@typlog/ui 0.12.2 → 0.13.0

package/components.css

@@ -149,18 +149,20 @@
   box-shadow: inset 0 0 1px var(--accent-a8);
 }
 
+@layer components {
 .ui-Badge {
-  display: inline-flex;
-  align-items: center;
-  white-space: nowrap;
-  font-weight: var(--font-weight-medium);
-  font-style: normal;
-  flex-shrink: 0;
-  line-height: 1;
-  height: -moz-fit-content;
-  height: fit-content;
-  width: -moz-fit-content;
-  width: fit-content;
+    display: inline-flex;
+    align-items: center;
+    white-space: nowrap;
+    font-weight: var(--font-weight-medium);
+    font-style: normal;
+    flex-shrink: 0;
+    line-height: 1;
+    height: -moz-fit-content;
+    height: fit-content;
+    width: -moz-fit-content;
+    width: fit-content;
+}
 }
 .ui-Badge:where(.r-size-1) {
   font-size: var(--font-size-1);
@@ -265,22 +267,29 @@
 .ui-Card:where(.r-variant-soft):where(:any-link, button, label):where(:hover) {
   border-color: var(--gray-a5);
 }
+@layer components {
 .ui-Button {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  flex-shrink: 0;
-  -webkit-user-select: none;
-     -moz-user-select: none;
-          user-select: none;
-  vertical-align: top;
-  font-style: normal;
-  font-weight: var(--button-font-weight);
-  text-align: center;
-  white-space: nowrap;
-  height: var(--button-height);
-  padding-left: var(--button-padding-x);
-  padding-right: var(--button-padding-x);
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    -webkit-user-select: none;
+       -moz-user-select: none;
+            user-select: none;
+    vertical-align: top;
+    font-style: normal;
+    font-weight: var(--button-font-weight);
+    text-align: center;
+    white-space: nowrap;
+    height: var(--button-height);
+    padding-left: var(--button-padding-x);
+    padding-right: var(--button-padding-x);
+    gap: var(--button-gap);
+    font-size: var(--button-font-size);
+    line-height: var(--button-line-height);
+    letter-spacing: var(--button-letter-spacing);
+    border-radius: var(--button-radius);
+}
 }
 .ui-Button:where(.r-variant-ghost) {
   --button-font-weight: var(--font-weight-regular);
@@ -288,15 +297,15 @@
 .ui-Button:where(:not(.r-variant-ghost)) {
   --button-font-weight: var(--font-weight-medium);
 }
-.ui-Button:where([data-disabled]) {
+.ui-Button:where(:disabled, [data-disabled]) {
   cursor: not-allowed;
 }
 .ui-Button:where(.r-size-1) {
-  gap: var(--space-1);
-  font-size: var(--font-size-1);
-  line-height: var(--line-height-1);
-  letter-spacing: var(--letter-spacing-1);
-  border-radius: max(var(--radius-1), var(--radius-full));
+  --button-gap: var(--space-1);
+  --button-font-size: var(--font-size-1);
+  --button-line-height: var(--line-height-1);
+  --button-letter-spacing: var(--letter-spacing-1);
+  --button-radius: max(var(--radius-1), var(--radius-full));
   --button-height: var(--space-5);
   --button-padding-x: var(--space-2);
 }
@@ -304,44 +313,44 @@
   --button-ghost-padding-y: var(--space-1);
 }
 .ui-Button:where(.r-size-2) {
-  gap: var(--space-2);
-  font-size: var(--font-size-2);
-  line-height: var(--line-height-2);
-  letter-spacing: var(--letter-spacing-2);
-  border-radius: max(var(--radius-2), var(--radius-full));
+  --button-gap: var(--space-2);
+  --button-font-size: var(--font-size-2);
+  --button-line-height: var(--line-height-2);
+  --button-letter-spacing: var(--letter-spacing-2);
+  --button-radius: max(var(--radius-2), var(--radius-full));
   --button-height: var(--space-6);
   --button-padding-x: var(--space-3);
 }
 .ui-Button:where(.r-size-2):where(.r-variant-ghost) {
-  gap: var(--space-1);
+  --button-gap: var(--space-1);
   --button-padding-x: var(--space-2);
   --button-ghost-padding-y: var(--space-1);
 }
 .ui-Button:where(.r-size-3) {
-  gap: var(--space-3);
-  font-size: var(--font-size-3);
-  line-height: var(--line-height-3);
-  letter-spacing: var(--letter-spacing-3);
-  border-radius: max(var(--radius-3), var(--radius-full));
+  --button-gap: var(--space-3);
+  --button-font-size: var(--font-size-3);
+  --button-line-height: var(--line-height-3);
+  --button-letter-spacing: var(--letter-spacing-3);
+  --button-radius: max(var(--radius-3), var(--radius-full));
   --button-height: var(--space-7);
   --button-padding-x: var(--space-4);
 }
 .ui-Button:where(.r-size-3):where(.r-variant-ghost) {
-  gap: var(--space-2);
+  --button-gap: var(--space-2);
   --button-padding-x: var(--space-3);
   --button-ghost-padding-y: calc(var(--space-1) * 1.5);
 }
 .ui-Button:where(.r-size-4) {
-  gap: var(--space-3);
-  font-size: var(--font-size-4);
-  line-height: var(--line-height-4);
-  letter-spacing: var(--letter-spacing-4);
-  border-radius: max(var(--radius-4), var(--radius-full));
+  --button-gap: var(--space-3);
+  --button-font-size: var(--font-size-4);
+  --button-line-height: var(--line-height-4);
+  --button-letter-spacing: var(--letter-spacing-4);
+  --button-radius: max(var(--radius-4), var(--radius-full));
   --button-height: var(--space-8);
   --button-padding-x: var(--space-5);
 }
 .ui-Button:where(.r-size-4):where(.r-variant-ghost) {
-  gap: var(--space-2);
+  --button-gap: var(--space-2);
   --button-padding-x: var(--space-4);
   --button-ghost-padding-y: var(--space-2);
 }
@@ -382,7 +391,7 @@
     filter: var(--button-solid-high-contrast-hover-filter);
 }
 }
-.ui-Button:where(.r-variant-solid):where([data-disabled]) {
+.ui-Button:where(.r-variant-solid):where(:disabled, [data-disabled]) {
   color: var(--gray-a8);
   background-color: var(--gray-a3);
   outline: none;
@@ -411,7 +420,7 @@
 .ui-Button:where(.r-variant-soft):where(:active) {
   background-color: var(--accent-a5);
 }
-.ui-Button:where(.r-variant-soft):where([data-disabled]) {
+.ui-Button:where(.r-variant-soft):where(:disabled, [data-disabled]) {
   color: var(--gray-a8);
   background-color: var(--gray-a3);
 }
@@ -430,7 +439,7 @@
 .ui-Button:where(.r-variant-ghost):where(:active) {
   background-color: var(--accent-a4);
 }
-.ui-Button:where(.r-variant-ghost):where([data-disabled]) {
+.ui-Button:where(.r-variant-ghost):where(:disabled, [data-disabled]) {
   color: var(--gray-a8);
   background-color: transparent;
 }
@@ -457,10 +466,10 @@
   outline: 2px solid var(--focus-8);
   outline-offset: 2px;
 }
-.ui-Button:where(.r-variant-classic):where(:active:not([data-disabled])) {
+.ui-Button:where(.r-variant-classic):where(:active:not(:disabled, [data-disabled])) {
   box-shadow: var(--shadow-1);
 }
-.ui-Button:where(.r-variant-classic):where([data-disabled]) {
+.ui-Button:where(.r-variant-classic):where(:disabled, [data-disabled]) {
   color: var(--gray-a10);
   background-color: var(--gray-a2);
 }
@@ -486,7 +495,7 @@
 .ui-Button:where(.r-variant-outline):where(:active) {
   background-color: var(--accent-a4);
 }
-.ui-Button:where(.r-variant-outline):where([data-disabled]) {
+.ui-Button:where(.r-variant-outline):where(:disabled, [data-disabled]) {
   color: var(--gray-a8);
   box-shadow: inset 0 0 0 1px var(--gray-a7);
   background-color: transparent;
@@ -513,7 +522,7 @@
 .ui-Button:where(.r-variant-surface):where(:active) {
   background-color: var(--accent-a4);
 }
-.ui-Button:where(.r-variant-surface):where([data-disabled]) {
+.ui-Button:where(.r-variant-surface):where(:disabled, [data-disabled]) {
   color: var(--gray-a8);
   box-shadow: inset 0 0 0 1px var(--gray-a6);
   background-color: var(--gray-a2);
@@ -541,12 +550,14 @@
   --scrollarea-scrollbar-vertical-margin-left: var(--space-1);
   --scrollarea-scrollbar-vertical-margin-right: var(--space-1);
 }
+@layer components {
 .ui-ScrollArea {
-  display: flex;
-  flex-direction: column;
-  overflow: hidden;
-  width: 100%;
-  height: 100%;
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+    width: 100%;
+    height: 100%;
+}
 }
 .ui-ScrollAreaViewport {
   display: flex;
@@ -554,6 +565,13 @@
   width: 100%;
   height: 100%;
 }
+.ui-ScrollAreaViewport > div {
+  display: block;
+  min-width: -moz-fit-content;
+  min-width: fit-content;
+  width: 100%;
+  flex-grow: 1;
+}
 .ui-ScrollAreaViewport:where(:focus-visible) + :where(.ui-ScrollAreaViewportFocusRing) {
   position: absolute;
   inset: 0;
@@ -638,6 +656,59 @@
   background-color: var(--gray-a9);
 }
 
+.ui-Tooltip {
+  box-sizing: border-box;
+  padding: var(--space-1) var(--space-2);
+  border-radius: var(--radius-2);
+  transform-origin: var(--reka-tooltip-content-transform-origin);
+  animation-duration: 140ms;
+  animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
+  background-color: var(--accent-11);
+}
+@media (prefers-reduced-motion: no-preference) {
+.ui-Tooltip:where([data-state='delayed-open']):where([data-side='top']) {
+    animation-name: ui-slide-from-top, ui-fade-in;
+}
+.ui-Tooltip:where([data-state='delayed-open']):where([data-side='bottom']) {
+    animation-name: ui-slide-from-bottom, ui-fade-in;
+}
+.ui-Tooltip:where([data-state='delayed-open']):where([data-side='left']) {
+    animation-name: ui-slide-from-left, ui-fade-in;
+}
+.ui-Tooltip:where([data-state='delayed-open']):where([data-side='right']) {
+    animation-name: ui-slide-from-right, ui-fade-in;
+}
+}
+.ui-TooltipText {
+  color: var(--gray-1);
+  -webkit-user-select: none;
+     -moz-user-select: none;
+          user-select: none;
+  cursor: default;
+  font-size: var(--font-size-1);
+  line-height: var(--line-height-1);
+  letter-spacing: var(--letter-spacing-1);
+}
+.ui-TooltipArrow {
+  fill: var(--accent-11);
+}
+
+/* special handle for gray color */
+.ui-Tooltip:where([data-accent-color="gray"]) {
+  background-color: var(--gray-12);
+}
+.ui-Tooltip:where([data-accent-color="gray"]) :where(.ui-TooltipArrow) {
+  fill: var(--gray-12);
+}
+
+@layer components {
+.ui-DialogCloseButton {
+    position: absolute;
+    top: calc(var(--dialog-popup-padding) / 2);
+    right: calc(var(--dialog-popup-padding) / 2);
+}
+}
+
 .ui-DialogTitle {
   font-size: var(--font-size-4);
   font-weight: var(--font-weight-semibold);
@@ -695,11 +766,6 @@
     max-height: var(--dialog-popup-max-height);
     padding: var(--dialog-popup-padding);
 }
-:where(.ui-DialogPopup) .ui-CloseButton {
-    position: absolute;
-    top: calc(var(--dialog-popup-padding) / 2);
-    right: calc(var(--dialog-popup-padding) / 2);
-}
 }
 .ui-DialogPopup:where(.r-size-1) {
   --dialog-popup-padding: var(--space-4);
@@ -968,6 +1034,175 @@ to {
   --popover-popup-padding: var(--space-4);
 }
 
+.ui-NavigationMenuRoot {
+  position: relative;
+  z-index: 1;
+}
+.ui-NavigationMenuViewport {
+  position: absolute;
+  margin-top: 10px;
+  top: 100%;
+  left: var(--reka-navigation-menu-viewport-left);
+  height: var(--reka-navigation-menu-viewport-height);
+  background-color: white;
+  border-radius: var(--radius-4);
+  overflow: hidden;
+  box-shadow: var(--shadow-3);
+  width: 100%;
+  max-width: var(--reka-navigation-menu-viewport-width);
+  transition: width, height, 300ms ease;
+  transform-origin: top center;
+}
+.ui-NavigationMenuViewport:where([data-state="open"]) {
+  animation: navigation-menu-viewport-scale-in 200ms ease;
+}
+.ui-NavigationMenuViewport:where([data-state="closed"]) {
+  animation: navigation-menu-viewport-scale-out 200ms ease;
+}
+@keyframes navigation-menu-viewport-scale-in {
+from {
+    opacity: 0;
+    transform: rotateX(-30deg) scale(0.9);
+}
+to {
+    opacity: 1;
+    transform: rotateX(0deg) scale(1);
+}
+}
+@keyframes navigation-menu-viewport-scale-out {
+from {
+    opacity: 1;
+    transform: rotateX(0deg) scale(1);
+}
+to {
+    opacity: 0;
+    transform: rotateX(-10deg) scale(0.95);
+}
+}
+
+@layer components {
+.ui-NavigationMenuList {
+    display: flex;
+    gap: var(--navigation-menu-gap);
+}
+}
+.ui-NavigationMenuList:where(.r-size-1) {
+  --navigation-menu-gap: calc(var(--space-1) / 2);
+  --navigation-menu-height: var(--space-5);
+  --navigation-menu-padding-x: var(--space-2);
+  --navigation-menu-font-size: var(--font-size-1);
+  --navigation-menu-line-height: var(--line-height-1);
+  --navigation-menu-letter-spacing: var(--letter-spacing-1);
+  --navigation-menu-radius: max(var(--radius-1), var(--radius-full));
+}
+.ui-NavigationMenuList:where(.r-size-2) {
+  --navigation-menu-gap: var(--space-1);
+  --navigation-menu-height: var(--space-6);
+  --navigation-menu-padding-x: var(--space-3);
+  --navigation-menu-font-size: var(--font-size-2);
+  --navigation-menu-line-height: var(--line-height-2);
+  --navigation-menu-letter-spacing: var(--letter-spacing-2);
+  --navigation-menu-radius: max(var(--radius-2), var(--radius-full));
+}
+.ui-NavigationMenuList:where(.r-size-3) {
+  --navigation-menu-gap: calc(var(--space-1) * 1.5);
+  --navigation-menu-height: var(--space-7);
+  --navigation-menu-padding-x: var(--space-4);
+  --navigation-menu-font-size: var(--font-size-3);
+  --navigation-menu-line-height: var(--line-height-3);
+  --navigation-menu-letter-spacing: var(--letter-spacing-3);
+  --navigation-menu-radius: max(var(--radius-3), var(--radius-full));
+}
+.ui-NavigationMenuIndicator {
+  position: absolute;
+  display: flex;
+  align-items: flex-end;
+  justify-content: center;
+  height: 10px;
+  top: 100%;
+  overflow: hidden;
+  z-index: 1;
+  transition: width, transform 250ms ease;
+  width: var(--reka-navigation-menu-indicator-size);
+  transform: translateX(var(--reka-navigation-menu-indicator-position));
+}
+.ui-NavigationMenuIndicator:where([data-state="visible"]) {
+  animation: ui-fade-in 200ms ease;
+}
+.ui-NavigationMenuIndicator:where([data-state="hidden"]) {
+  animation: ui-fade-out 200ms ease;
+}
+.ui-NavigationMenuIndicator:before {
+  content: '';
+  position: relative;
+  top: 70%;
+  background-color: var(--color-panel-solid);
+  border: 1px solid var(--gray-a4);
+  width: 10px;
+  height: 10px;
+  transform: rotate(45deg);
+  border-top-left-radius: 2px;
+}
+@layer components {
+.ui-NavigationMenuTrigger,
+  .ui-NavigationMenuLink {
+    display: inline-flex;
+    gap: var(--space-1);
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    -webkit-user-select: none;
+       -moz-user-select: none;
+            user-select: none;
+    vertical-align: top;
+    font-style: normal;
+    text-align: center;
+    white-space: nowrap;
+    font-weight: var(--font-weight-medium);
+    height: var(--navigation-menu-height);
+    padding-left: var(--navigation-menu-padding-x);
+    padding-right: var(--navigation-menu-padding-x);
+    font-size: var(--navigation-menu-font-size);
+    line-height: var(--navigation-menu-line-height);
+    letter-spacing: var(--navigation-menu-letter-spacing);
+    border-radius: var(--navigation-menu-radius);
+}
+.ui-NavigationMenuTrigger:where(:hover),
+  .ui-NavigationMenuLink:where(:hover) {
+    background-color: var(--accent-a2);
+}
+}
+
+.ui-NavigationMenuTriggerArrow {
+  transform: rotate(0deg);
+  transition: transform 250ms ease;
+}
+:where(.ui-NavigationMenuTrigger[data-state="open"]) .ui-NavigationMenuTriggerArrow {
+  transform: rotate(-180deg);
+}
+
+@layer components {
+.ui-NavigationMenuContent {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    animation: var(--navigation-menu-content-animation);
+}
+}
+.ui-NavigationMenuContent:where([data-motion="from-start"]) {
+  --navigation-menu-content-animation: enterFromLeft 250ms ease;
+}
+.ui-NavigationMenuContent:where([data-motion="to-start"]) {
+  --navigation-menu-content-animation: exitToLeft 250ms ease;
+}
+.ui-NavigationMenuContent:where([data-motion="from-end"]) {
+  --navigation-menu-content-animation: enterFromRight 250ms ease;
+}
+.ui-NavigationMenuContent:where([data-motion="to-end"]) {
+  --navigation-menu-content-animation: exitToRight 250ms ease;
+}
+
 .ui-root {
   --switch-disabled-blend-mode: multiply;
   --switch-high-contrast-checked-color-overlay: var(--black-a8);
@@ -1027,6 +1262,9 @@ to {
   cursor: not-allowed;
 }
 .ui-SwitchThumb {
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
   background-color: white;
   position: absolute;
   left: var(--switch-thumb-inset);
@@ -1144,16 +1382,18 @@ to {
   transition: none;
 }
 
+@layer components {
 .ui-Checkbox {
-  position: relative;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  vertical-align: top;
-  flex-shrink: 0;
-  cursor: default;
-  height: var(--checkbox-size);
-  border-radius: var(--checkbox-border-radius);
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    vertical-align: top;
+    flex-shrink: 0;
+    cursor: default;
+    height: var(--checkbox-size);
+    border-radius: var(--checkbox-border-radius);
+}
 }
 .ui-Checkbox::before {
   content: '';
@@ -1234,29 +1474,33 @@ to {
   color: var(--gray-a8);
 }
 
+@layer components {
 .ui-Toggle {
-  position: relative;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  vertical-align: top;
-  flex-shrink: 0;
-  width: var(--toggle-size);
-  height: var(--toggle-size);
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    vertical-align: top;
+    flex-shrink: 0;
+    border-radius: var(--toggle-border-radius);
+    font-size: var(--toggle-font-size);
+    width: var(--toggle-size);
+    height: var(--toggle-size);
+}
 }
 .ui-Toggle:where(.r-size-1) {
-  border-radius: max(var(--radius-1), var(--radius-full));
-  font-size: var(--font-size-1);
+  --toggle-border-radius: max(var(--radius-1), var(--radius-full));
+  --toggle-font-size: var(--font-size-1);
   --toggle-size: var(--space-5);
 }
 .ui-Toggle:where(.r-size-2) {
-  border-radius: max(var(--radius-2), var(--radius-full));
-  font-size: var(--font-size-3);
+  --toggle-border-radius: max(var(--radius-2), var(--radius-full));
+  --toggle-font-size: var(--font-size-3);
   --toggle-size: var(--space-6);
 }
 .ui-Toggle:where(.r-size-3) {
-  border-radius: max(var(--radius-3), var(--radius-full));
-  font-size: var(--font-size-6);
+  --toggle-border-radius: max(var(--radius-3), var(--radius-full));
+  --toggle-font-size: var(--font-size-6);
   --toggle-size: var(--space-7);
 }
 
@@ -1319,14 +1563,16 @@ to {
   color: var(--gray-1);
 }
 
+@layer components {
 .ui-ToggleGroupRoot {
-  position: relative;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  vertical-align: top;
-  flex-shrink: 0;
-  height: var(--toggle-group-height);
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    vertical-align: top;
+    flex-shrink: 0;
+    height: var(--toggle-group-height);
+}
 }
 .ui-ToggleGroupRoot:where(.r-size-1) {
   font-size: var(--font-size-1);
@@ -1367,15 +1613,17 @@ to {
   --toggle-item-size: var(--toggle-group-height);
 }
 
+@layer components {
 .ui-ToggleGroupItem {
-  position: relative;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  vertical-align: top;
-  flex-shrink: 0;
-  width: var(--toggle-item-size);
-  height: var(--toggle-item-size);
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    vertical-align: top;
+    flex-shrink: 0;
+    width: var(--toggle-item-size);
+    height: var(--toggle-item-size);
+}
 }
 .ui-ToggleGroupRoot:where(.r-variant-solid, .r-variant-surface, .r-variant-outline) :where(.ui-ToggleGroupItem:first-child) {
   border-top-left-radius: var(--toggle-radius);
@@ -2024,13 +2272,16 @@ to {
 .ui-SelectContent {
   --scrollarea-scrollbar-vertical-margin-top: var(--select-content-padding);
   --scrollarea-scrollbar-vertical-margin-bottom: var(--select-content-padding);
-  --scrollarea-scrollbar-horizontal-margin-left: var(--select-content-padding);
-  --scrollarea-scrollbar-horizontal-margin-right: var(--select-content-padding);
-
-  overflow: hidden;
-  box-shadow: var(--shadow-5);
-  background-color: var(--color-panel-solid);
-  box-sizing: border-box;
+  --scrollarea-scrollbar-horizontal-margin-left: var(--select-content-padding);
+  --scrollarea-scrollbar-horizontal-margin-right: var(--select-content-padding);
+}
+@layer components {
+.ui-SelectContent {
+    overflow: hidden;
+    box-shadow: var(--shadow-5);
+    background-color: var(--color-panel-solid);
+    box-sizing: border-box;
+}
 }
 .ui-SelectContent:where([data-side]) {
   min-width: var(--reka-select-trigger-width);
@@ -2061,21 +2312,23 @@ to {
   border-radius: var(--radius-4);
 }
 
+@layer components {
 .ui-SelectTrigger {
-  display: inline-flex;
-  align-items: center;
-  justify-content: space-between;
-  flex-shrink: 0;
-  -webkit-user-select: none;
-     -moz-user-select: none;
-          user-select: none;
-  vertical-align: top;
-  font-weight: var(--font-weight-regular);
-  font-style: normal;
-  text-align: start;
-  color: var(--gray-12);
-  box-sizing: border-box;
-  height: var(--select-trigger-height);
+    display: inline-flex;
+    align-items: center;
+    justify-content: space-between;
+    flex-shrink: 0;
+    -webkit-user-select: none;
+       -moz-user-select: none;
+            user-select: none;
+    vertical-align: top;
+    font-weight: var(--font-weight-regular);
+    font-style: normal;
+    text-align: start;
+    color: var(--gray-12);
+    box-sizing: border-box;
+    height: var(--select-trigger-height);
+}
 }
 .ui-SelectTriggerInner {
   overflow: hidden;
@@ -2215,20 +2468,22 @@ to {
   color: var(--gray-a9);
 }
 
+@layer components {
 .ui-SelectItem {
-  display: flex;
-  align-items: center;
-  height: var(--select-item-height);
-  padding-left: var(--select-item-indicator-width);
-  padding-right: var(--select-item-indicator-width);
-  position: relative;
-  box-sizing: border-box;
-  outline: none;
-  scroll-margin: var(--select-content-padding) 0;
-  -webkit-user-select: none;
-     -moz-user-select: none;
-          user-select: none;
-  cursor: default;
+    display: flex;
+    align-items: center;
+    height: var(--select-item-height);
+    padding-left: var(--select-item-indicator-width);
+    padding-right: var(--select-item-indicator-width);
+    position: relative;
+    box-sizing: border-box;
+    outline: none;
+    scroll-margin: var(--select-content-padding) 0;
+    -webkit-user-select: none;
+       -moz-user-select: none;
+            user-select: none;
+    cursor: default;
+}
 }
 .ui-SelectItem:where([data-disabled]) {
   cursor: not-allowed;
@@ -2283,17 +2538,19 @@ to {
   background-color: var(--accent-a4);
 }
 
+@layer components {
 .ui-SelectLabel {
-  display: flex;
-  align-items: center;
-  height: var(--select-item-height);
-  padding-left: var(--select-item-indicator-width);
-  padding-right: var(--select-item-indicator-width);
-  color: var(--gray-a10);
-  -webkit-user-select: none;
-     -moz-user-select: none;
-          user-select: none;
-  cursor: default;
+    display: flex;
+    align-items: center;
+    height: var(--select-item-height);
+    padding-left: var(--select-item-indicator-width);
+    padding-right: var(--select-item-indicator-width);
+    color: var(--gray-a10);
+    -webkit-user-select: none;
+       -moz-user-select: none;
+            user-select: none;
+    cursor: default;
+}
 }
 .ui-SelectItem + .ui-SelectLabel {
   margin-top: var(--space-2);
@@ -2310,21 +2567,25 @@ to {
   line-height: var(--line-height-2);
 }
 
+@layer components {
 .ui-SelectSeparator {
-  height: 1px;
-  margin-top: var(--space-2);
-  margin-bottom: var(--space-2);
-  margin-left: var(--select-item-indicator-width);
-  margin-right: var(--select-separator-margin-right);
-  background-color: var(--gray-a6);
+    height: 1px;
+    margin-top: var(--space-2);
+    margin-bottom: var(--space-2);
+    margin-left: var(--select-item-indicator-width);
+    margin-right: var(--select-separator-margin-right);
+    background-color: var(--gray-a6);
+}
 }
 
+@layer components {
 .ui-ComboboxRoot {
-  width: -moz-fit-content;
-  width: fit-content;
+    width: -moz-fit-content;
+    width: fit-content;
 }
 .ui-ComboboxRoot:where(.r-multiple) {
-  width: auto;
+    width: auto;
+}
 }
 .ui-ComboboxRoot:where(.r-size-1) {
   --combobox-field-height: var(--space-5);
@@ -2412,21 +2673,23 @@ to {
 .ui-ComboboxValuesItem:where([aria-current="true"]) {
   background-color: var(--red-a9);
 }
+@layer components {
 .ui-ComboboxInput {
-  text-align: inherit;
-  border: none;
-  padding: 0;
-  width: 100%;
-  font-size: 1em;
-  background-color: transparent;
-  border-radius: calc(var(--combobox-field-border-radius) - var(--combobox-field-border-width));
-  text-indent: var(--combobox-field-padding);
-  height: var(--combobox-input-height);
-  cursor: auto;
+    text-align: inherit;
+    border: none;
+    padding: 0;
+    width: 100%;
+    font-size: 1em;
+    background-color: transparent;
+    border-radius: calc(var(--combobox-field-border-radius) - var(--combobox-field-border-width));
+    text-indent: var(--combobox-field-padding);
+    height: var(--combobox-input-height);
+    cursor: auto;
 
-  /* Reset size 2 padding bottom */
-  padding-bottom: 0px;
-  /* Safari credentials autofill icon */
+    /* Reset size 2 padding bottom */
+    padding-bottom: 0px;
+    /* Safari credentials autofill icon */
+}
 }
 .ui-ComboboxField:where([data-multiple="true"]) :where(.ui-ComboboxInput) {
   text-indent: calc(var(--combobox-field-padding) / 2);
@@ -2581,11 +2844,14 @@ to {
   --scrollarea-scrollbar-vertical-margin-bottom: var(--combobox-content-padding);
   --scrollarea-scrollbar-horizontal-margin-left: var(--combobox-content-padding);
   --scrollarea-scrollbar-horizontal-margin-right: var(--combobox-content-padding);
-
-  overflow: hidden;
-  box-shadow: var(--shadow-5);
-  background-color: var(--color-panel-solid);
-  box-sizing: border-box;
+}
+@layer components {
+.ui-ComboboxContent {
+    overflow: hidden;
+    box-shadow: var(--shadow-5);
+    background-color: var(--color-panel-solid);
+    box-sizing: border-box;
+}
 }
 .ui-ComboboxContent:where([data-side]) {
   min-width: var(--reka-combobox-trigger-width);
@@ -2662,25 +2928,27 @@ to {
   --combobox-highlighted-text-color: var(--accent-12);
 }
 
+@layer components {
 .ui-ComboboxItem {
-  display: flex;
-  align-items: center;
-  height: var(--combobox-item-height);
-  padding-left: var(--combobox-indicator-width);
-  padding-right: var(--combobox-indicator-width);
-  position: relative;
-  box-sizing: border-box;
-  outline: none;
-  scroll-margin: var(--combobox-content-padding) 0;
-  -webkit-user-select: none;
-     -moz-user-select: none;
-          user-select: none;
-  cursor: default;
+    display: flex;
+    align-items: center;
+    height: var(--combobox-item-height);
+    padding-left: var(--combobox-indicator-width);
+    padding-right: var(--combobox-indicator-width);
+    position: relative;
+    box-sizing: border-box;
+    outline: none;
+    scroll-margin: var(--combobox-content-padding) 0;
+    -webkit-user-select: none;
+       -moz-user-select: none;
+            user-select: none;
+    cursor: default;
 
-  font-size: var(--combobox-item-font-size);
-  line-height: var(--combobox-item-line-height);
-  letter-spacing: var(--combobox-item-letter-spacing);
-  border-radius: var(--combobox-item-radius);
+    font-size: var(--combobox-item-font-size);
+    line-height: var(--combobox-item-line-height);
+    letter-spacing: var(--combobox-item-letter-spacing);
+    border-radius: var(--combobox-item-radius);
+}
 }
 .ui-ComboboxItem:where([data-disabled]) {
   cursor: not-allowed;
@@ -2705,40 +2973,44 @@ to {
   height: var(--combobox-indicator-icon-height);
 }
 
+@layer components {
 .ui-ComboboxLabel {
-  display: flex;
-  align-items: center;
-  height: var(--combobox-item-height);
-  padding-left: calc(var(--combobox-indicator-width) / 2);
-  padding-right: var(--combobox-indicator-width);
-  color: var(--gray-a10);
-  -webkit-user-select: none;
-     -moz-user-select: none;
-          user-select: none;
-  cursor: default;
+    display: flex;
+    align-items: center;
+    height: var(--combobox-item-height);
+    padding-left: calc(var(--combobox-indicator-width) / 2);
+    padding-right: var(--combobox-indicator-width);
+    color: var(--gray-a10);
+    -webkit-user-select: none;
+       -moz-user-select: none;
+            user-select: none;
+    cursor: default;
 
-  font-size: var(--combobox-label-font-size);
-  letter-spacing: var(--combobox-label-letter-spacing);
-  line-height: var(--combobox-label-line-height);
+    font-size: var(--combobox-label-font-size);
+    letter-spacing: var(--combobox-label-letter-spacing);
+    line-height: var(--combobox-label-line-height);
+}
 }
 .ui-SelectItem + .ui-ComboboxLabel {
   margin-top: var(--space-2);
 }
 
+@layer components {
 .ui-ComboboxEmpty {
-  box-sizing: border-box;
-  outline: none;
-  scroll-margin: var(--combobox-content-padding) 0;
-  -webkit-user-select: none;
-     -moz-user-select: none;
-          user-select: none;
-  cursor: default;
-  padding-left: calc(var(--combobox-indicator-width) / 2);
-  padding-right: var(--combobox-indicator-width);
-  font-size: var(--combobox-item-font-size);
-  line-height: var(--combobox-item-line-height);
-  letter-spacing: var(--combobox-item-letter-spacing);
-  color: var(--gray-11);
+    box-sizing: border-box;
+    outline: none;
+    scroll-margin: var(--combobox-content-padding) 0;
+    -webkit-user-select: none;
+       -moz-user-select: none;
+            user-select: none;
+    cursor: default;
+    padding-left: calc(var(--combobox-indicator-width) / 2);
+    padding-right: var(--combobox-indicator-width);
+    font-size: var(--combobox-item-font-size);
+    line-height: var(--combobox-item-line-height);
+    letter-spacing: var(--combobox-item-letter-spacing);
+    color: var(--gray-11);
+}
 }
 .ui-RadioBase {
   position: relative;
@@ -3005,10 +3277,10 @@ to {
 }
 }
 
-.ui-TabList::-webkit-scrollbar {
+.ui-TabsList::-webkit-scrollbar {
   display: none;
 }
-.ui-TabList:where(.r-size-1) {
+.ui-TabsList:where(.r-size-1) {
   --tab-font-size: var(--font-size-1);
   --tab-line-height: var(--line-height-1);
   --tab-letter-spacing: var(--letter-spacing-1);
@@ -3019,7 +3291,7 @@ to {
   --tab-inner-padding-x: var(--space-1);
   --tab-inner-height: var(--space-5);
 }
-.ui-TabList:where(.r-size-2) {
+.ui-TabsList:where(.r-size-2) {
   --tab-font-size: var(--font-size-2);
   --tab-line-height: var(--line-height-2);
   --tab-letter-spacing: var(--letter-spacing-2);
@@ -3030,12 +3302,12 @@ to {
   --tab-inner-padding-x: var(--space-2);
   --tab-inner-height: calc(var(--space-6) - var(--space-1));
 }
-.ui-TabList:where(.r-variant-surface.r-size-1),
-.ui-TabList:where(.r-variant-soft.r-size-1) {
+.ui-TabsList:where(.r-variant-surface.r-size-1),
+.ui-TabsList:where(.r-variant-soft.r-size-1) {
   --tab-inner-padding-x: calc(var(--space-2) / 4 * 3);
 }
 @layer components {
-.ui-TabList {
+.ui-TabsList {
     justify-content: flex-start;
     position: relative;
     overflow-x: auto;
@@ -3048,34 +3320,33 @@ to {
 }
 
   /** classic & surface */
-.ui-TabList:where(.r-variant-surface, .r-variant-classic) {
+.ui-TabsList:where(.r-variant-surface, .r-variant-classic) {
     position: relative;
     display: inline-flex;
     width: -moz-fit-content;
     width: fit-content;
     align-items: center;
-    justify-content: center;
     vertical-align: top;
     flex-shrink: 0;
     border-radius: var(--tab-radius);
 }
-.ui-TabList:where(.r-variant-classic) {
+.ui-TabsList:where(.r-variant-classic) {
     background-color: var(--accent-a3);
     padding-left: var(--tab-padding-x);
     padding-right: var(--tab-padding-x);
 }
-.ui-TabList:where(.r-variant-surface) {
+.ui-TabsList:where(.r-variant-surface) {
     --tab-item-radius: 0;
     --tab-inner-height: var(--tab-height);
     box-shadow: inset 0 0 0 1px var(--gray-a6);
 }
 
   /** soft & outline */
-.ui-TabList:where(.r-variant-outline, .r-variant-soft) {
+.ui-TabsList:where(.r-variant-outline, .r-variant-soft) {
     display: flex;
     box-shadow: inset 0 -1px 0 0 var(--gray-a5);
 }
-.ui-TabList:where(.r-variant-soft) {
+.ui-TabsList:where(.r-variant-soft) {
     padding-left: var(--tab-padding-x);
     padding-right: var(--tab-padding-x);
 }
@@ -3087,13 +3358,13 @@ to {
   transform: translateX(var(--reka-tabs-indicator-position));
   width: var(--reka-tabs-indicator-size);
 }
-.ui-TabList:where(.r-variant-surface) :where(.ui-TabsIndicator) {
+.ui-TabsList:where(.r-variant-surface) :where(.ui-TabsIndicator) {
   top: 0;
-  height: var(--tab-inner-height);
+  height: var(--tab-height);
   background-color: var(--accent-a3);
   transition-duration: 100ms;
 }
-.ui-TabList:where(.r-variant-classic) :where(.ui-TabsIndicator) {
+.ui-TabsList:where(.r-variant-classic) :where(.ui-TabsIndicator) {
   top: calc((var(--tab-height) - var(--tab-inner-height)) / 2);
   height: var(--tab-inner-height);
   background-color: var(--color-panel-solid);
@@ -3105,14 +3376,14 @@ to {
   border-radius: var(--tab-item-radius);
   transition-duration: 100ms;
 }
-.ui-TabList:where(.r-variant-soft) :where(.ui-TabsIndicator) {
+.ui-TabsList:where(.r-variant-soft) :where(.ui-TabsIndicator) {
   top: calc((var(--tab-height) - var(--tab-inner-height)) / 2);
   height: var(--tab-inner-height);
   background-color: var(--accent-a3);
   border-radius: var(--tab-item-radius);
   transition-duration: 100ms;
 }
-.ui-TabList:where(.r-variant-outline) :where(.ui-TabsIndicator) {
+.ui-TabsList:where(.r-variant-outline) :where(.ui-TabsIndicator) {
   bottom: 0;
   height: 2px;
   background-color: var(--accent-indicator);
@@ -3120,7 +3391,7 @@ to {
 }
 
 /** high contrast */
-:where(.ui-TabList.r-variant-outline.r-high-contrast) .ui-TabsIndicator {
+:where(.ui-TabsList.r-variant-outline.r-high-contrast) .ui-TabsIndicator {
   background-color: var(--accent-12);
 }
 
@@ -3172,13 +3443,13 @@ to {
   word-spacing: var(--tab-active-word-spacing);
 }
 @media (hover: hover) {
-.ui-TabList:where(.r-variant-outline, .r-variant-classic) :where(.ui-TabTrigger:hover) {
+.ui-TabsList:where(.r-variant-outline, .r-variant-classic) :where(.ui-TabTrigger:hover) {
     color: var(--gray-12);
 }
-.ui-TabList:where(.r-variant-surface, .r-variant-soft) :where(.ui-TabTrigger:hover) {
+.ui-TabsList:where(.r-variant-surface, .r-variant-soft) :where(.ui-TabTrigger:hover) {
     color: var(--accent-a11);
 }
-.ui-TabList:where(.r-variant-outline) :where(.ui-TabTrigger:not(:disabled):hover) :where(.ui-TabTriggerInner) {
+.ui-TabsList:where(.r-variant-outline) :where(.ui-TabTrigger:not(:disabled):hover) :where(.ui-TabTriggerInner) {
     background-color: var(--gray-a3);
 }
 .ui-TabTrigger:where(:focus-visible:hover) :where(.ui-TabTriggerInner) {
@@ -3189,20 +3460,20 @@ to {
   outline: 2px solid var(--focus-8);
   outline-offset: -2px;
 }
-.ui-TabList:where(.r-variant-outline) :where(.ui-TabTrigger) {
+.ui-TabsList:where(.r-variant-outline) :where(.ui-TabTrigger) {
   padding-left: var(--tab-padding-x);
   padding-right: var(--tab-padding-x);
 }
-.ui-TabList:where(.r-variant-classic, .r-variant-outline) :where(.ui-TabTrigger[data-state='active']) {
+.ui-TabsList:where(.r-variant-classic, .r-variant-outline) :where(.ui-TabTrigger[data-state='active']) {
   color: var(--gray-12);
 }
-.ui-TabList:where(.r-variant-soft) :where(.ui-TabTrigger + .ui-TabTrigger) {
+.ui-TabsList:where(.r-variant-soft) :where(.ui-TabTrigger + .ui-TabTrigger) {
   margin-left: calc(var(--tab-padding-x) / 2)
 }
-.ui-TabList:where(.r-variant-surface) :where(.ui-TabTrigger + .ui-TabTrigger) {
+.ui-TabsList:where(.r-variant-surface) :where(.ui-TabTrigger + .ui-TabTrigger) {
   box-shadow: inset 1px 0 0 var(--gray-a4);
 }
-.ui-TabList:where(.r-variant-surface, .r-variant-soft) :where(.ui-TabTrigger[data-state='active']) {
+.ui-TabsList:where(.r-variant-surface, .r-variant-soft) :where(.ui-TabTrigger[data-state='active']) {
   color: var(--accent-a11);
 }
 
@@ -3285,10 +3556,12 @@ to {
     height: 0;
 }
 }
+@layer components {
 .ui-AccordionContent {
-  overflow: hidden;
-  font-weight: var(--font-weight-regular);
-  font-size: var(--accordion-content-font-size);
+    overflow: hidden;
+    font-weight: var(--font-weight-regular);
+    font-size: var(--accordion-content-font-size);
+}
 }
 .ui-AccordionContent:where([data-state="open"]) {
   animation: accordion-down 0.2s ease-out;
@@ -3432,28 +3705,37 @@ to {
   --collapsible-trigger-open-text-color: var(--accent-12);
 }
 
+@layer components {
 .ui-CollapsibleIndicator {
-  display: inline-flex;
-  align-items: center;
-  font-size: var(--collapsible-indicator-icon-size);
-  transition: transform 0.2s ease;
-  color: var(--gray-10);
+    display: inline-flex;
+    align-items: center;
+    font-size: var(--collapsible-indicator-icon-size);
+    transition: transform 0.2s ease;
+    color: var(--gray-10);
+}
 }
 .ui-CollapsibleIndicator:where([data-side="left"]) {
   order: -1;
 }
+:where([aria-expanded="false"]) .ui-CollapsibleIndicator,
+:where([data-state="closed"]) .ui-CollapsibleIndicator {
+  transform: rotate(0);
+}
+:where([aria-expanded="true"]) .ui-CollapsibleIndicator,
 :where([data-state="open"]) .ui-CollapsibleIndicator {
   transform: rotate(90deg);
 }
 
+@layer components {
 .ui-CollapsibleTrigger {
-  display: inline-flex;
-  align-items: center;
-  justify-content: space-between;
-  text-align: initial;
-  gap: var(--collapsible-trigger-gap);
-  font-size: var(--collapsible-font-size);
-  font-weight: var(--font-weight-medium);
+    display: inline-flex;
+    align-items: center;
+    justify-content: space-between;
+    text-align: initial;
+    gap: var(--collapsible-trigger-gap);
+    font-size: var(--collapsible-font-size);
+    font-weight: var(--font-weight-medium);
+}
 }
 .ui-CollapsibleTriggerText {
   flex-grow: 1;
@@ -3496,11 +3778,13 @@ to {
     height: 0;
 }
 }
+@layer components {
 .ui-CollapsibleContent {
-  overflow: hidden;
-  font-size: var(--collapsible-font-size);
-  font-weight: var(--font-weight-regular);
-  padding-block: var(--collapsible-padding-y);
+    overflow: hidden;
+    font-size: var(--collapsible-font-size);
+    font-weight: var(--font-weight-regular);
+    padding-block: var(--collapsible-padding-y);
+}
 }
 .ui-CollapsibleContent:where([data-state="open"]) {
   animation: collapsible-down 0.2s ease-out;
@@ -3515,24 +3799,33 @@ to {
   padding-inline: var(--collapsible-padding-x);
 }
 
-.ui-Pagination {
+.ui-PaginationList {
   display: flex;
   align-items: center;
-}
-.ui-Pagination:where(.r-size-1) {
   gap: var(--space-1);
 }
-.ui-Pagination:where(.r-size-2) {
-  gap: var(--space-2);
+.ui-PaginationList .ui-Button {
+  height: var(--button-height);
+  width: var(--button-height);
+  padding: 0;
 }
-.ui-Pagination:where(.r-size-3) {
-  gap: var(--space-3);
+.ui-PaginationRoot:where(.r-variant-ghost):where([data-accent-color="gray"]) :where(.ui-Button) {
+  color: var(--accent-12);
+}
+
+/** selected on ghost -> outline */
+.ui-PaginationRoot:where(.r-variant-ghost) :where(.ui-Button[data-selected]) {
+  box-shadow: inset 0 0 0 1px var(--accent-a6);
+}
+.ui-PaginationRoot:where(.r-variant-soft, .r-variant-surface, .r-variant-outline) :where(.ui-Button[data-selected]) {
+  background-color: var(--accent-9);
+  color: var(--accent-contrast);
 }
-.ui-Pagination:where(.r-size-4) {
-  gap: var(--space-4);
+.ui-PaginationRoot:where([data-accent-color="gray"]):where(.r-variant-soft, .r-variant-surface, .r-variant-outline) :where(.ui-Button[data-selected]) {
+  background-color: var(--accent-12);
 }
-.ui-Pagination:where(.r-variant-ghost) {
-  gap: 0;
+.ui-PaginationRoot:where(.r-variant-surface, .r-variant-outline) :where(.ui-Button[data-selected]) {
+  box-shadow: none;
 }
 
 .ui-root {
@@ -3674,10 +3967,10 @@ to {
 .ui-ToastItem:where([data-swipe-direction="right"]) {
   --toast-item-swipe-to-x: calc(100% + var(--toast-x-position))
 }
-.ui-ToastItem:where([data-swipe-direction="top"]) {
+.ui-ToastItem:where([data-swipe-direction="up"]) {
   --toast-item-swipe-to-y: calc(0 - 100% - var(--toast-y-position))
 }
-.ui-ToastItem:where([data-swipe-direction="bottom"]) {
+.ui-ToastItem:where([data-swipe-direction="down"]) {
   --toast-item-swipe-to-y: calc(100% + var(--toast-y-position))
 }
 .ui-ToastItem:where([data-state="closed"]),
@@ -3771,6 +4064,9 @@ to {
 .ui-ToastViewport:where([data-x-position="right"]) {
   right: var(--toast-x-position);
 }
+.ui-ToastViewport:where([data-x-position="center"]) {
+  left: calc(50% - var(--toast-width) / 2);
+}
 .ui-ToastViewport:where([data-y-position="top"]) {
   top: var(--toast-y-position);
 }
@@ -3845,8 +4141,7 @@ to {
   border: 1px solid var(--gray-a5);
   border-radius: var(--table-border-radius);
   background-color: var(--color-panel);
-  -webkit-backdrop-filter: var(--backdrop-filter-panel);
-          backdrop-filter: var(--backdrop-filter-panel);
+  backdrop-filter: var(--backdrop-filter-panel);
   background-clip: padding-box;
   position: relative;
 }
@@ -3869,18 +4164,20 @@ to {
   --scrollarea-scrollbar-horizontal-margin-right: 0;
 }
 
+@layer components {
 .ui-Separator {
-  display: block;
-  box-sizing: border-box;
-  background-color: var(--accent-a6);
+    display: block;
+    box-sizing: border-box;
+    background-color: var(--accent-a6);
 }
-.ui-Separator[aria-orientation="horizontal"] {
-  width: var(--separator-size, auto);
-  height: 1px;
+.ui-Separator:where([aria-orientation="horizontal"]) {
+    width: var(--separator-size, auto);
+    height: 1px;
+}
+.ui-Separator:where([aria-orientation="vertical"]) {
+    width: 1px;
+    height: var(--separator-size, auto);
 }
-.ui-Separator[aria-orientation="vertical"] {
-  width: 1px;
-  height: var(--separator-size, auto);
 }
 .ui-Separator:where(.r-size-1) {
   --separator-size: var(--space-4);
@@ -3895,51 +4192,6 @@ to {
   --separator-size: 100%;
 }
 
-.ui-Tooltip {
-  box-sizing: border-box;
-  padding: var(--space-1) var(--space-2);
-  border-radius: var(--radius-2);
-  transform-origin: var(--reka-tooltip-content-transform-origin);
-  animation-duration: 140ms;
-  animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
-  background-color: var(--accent-11);
-}
-@media (prefers-reduced-motion: no-preference) {
-.ui-Tooltip:where([data-state='delayed-open']):where([data-side='top']) {
-    animation-name: ui-slide-from-top, ui-fade-in;
-}
-.ui-Tooltip:where([data-state='delayed-open']):where([data-side='bottom']) {
-    animation-name: ui-slide-from-bottom, ui-fade-in;
-}
-.ui-Tooltip:where([data-state='delayed-open']):where([data-side='left']) {
-    animation-name: ui-slide-from-left, ui-fade-in;
-}
-.ui-Tooltip:where([data-state='delayed-open']):where([data-side='right']) {
-    animation-name: ui-slide-from-right, ui-fade-in;
-}
-}
-.ui-TooltipText {
-  color: var(--gray-1);
-  -webkit-user-select: none;
-     -moz-user-select: none;
-          user-select: none;
-  cursor: default;
-  font-size: var(--font-size-1);
-  line-height: var(--line-height-1);
-  letter-spacing: var(--letter-spacing-1);
-}
-.ui-TooltipArrow {
-  fill: var(--accent-11);
-}
-
-/* special handle for gray color */
-.ui-Tooltip:where([data-accent-color="gray"]) {
-  background-color: var(--gray-12);
-}
-.ui-Tooltip:where([data-accent-color="gray"]) :where(.ui-TooltipArrow) {
-  fill: var(--gray-12);
-}
-
 .ui-Quota {
   position: relative;
   overflow: hidden;