@kushagradhawan/kookie-ui 0.1.32 → 0.1.34

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (120) hide show
  1. package/components.css +937 -458
  2. package/dist/cjs/components/_internal/base-button.d.ts.map +1 -1
  3. package/dist/cjs/components/_internal/base-button.js +1 -1
  4. package/dist/cjs/components/_internal/base-button.js.map +3 -3
  5. package/dist/cjs/components/chatbar.d.ts +202 -0
  6. package/dist/cjs/components/chatbar.d.ts.map +1 -0
  7. package/dist/cjs/components/chatbar.js +2 -0
  8. package/dist/cjs/components/chatbar.js.map +7 -0
  9. package/dist/cjs/components/icon-button.d.ts.map +1 -1
  10. package/dist/cjs/components/icon-button.js +2 -2
  11. package/dist/cjs/components/icon-button.js.map +3 -3
  12. package/dist/cjs/components/icons.d.ts +6 -1
  13. package/dist/cjs/components/icons.d.ts.map +1 -1
  14. package/dist/cjs/components/icons.js +1 -1
  15. package/dist/cjs/components/icons.js.map +3 -3
  16. package/dist/cjs/components/index.d.ts +3 -0
  17. package/dist/cjs/components/index.d.ts.map +1 -1
  18. package/dist/cjs/components/index.js +1 -1
  19. package/dist/cjs/components/index.js.map +3 -3
  20. package/dist/cjs/components/popover.d.ts +13 -1
  21. package/dist/cjs/components/popover.d.ts.map +1 -1
  22. package/dist/cjs/components/popover.js +1 -1
  23. package/dist/cjs/components/popover.js.map +3 -3
  24. package/dist/cjs/components/sheet.d.ts +82 -0
  25. package/dist/cjs/components/sheet.d.ts.map +1 -0
  26. package/dist/cjs/components/sheet.js +2 -0
  27. package/dist/cjs/components/sheet.js.map +7 -0
  28. package/dist/cjs/components/shell.d.ts +180 -0
  29. package/dist/cjs/components/shell.d.ts.map +1 -0
  30. package/dist/cjs/components/shell.js +2 -0
  31. package/dist/cjs/components/shell.js.map +7 -0
  32. package/dist/cjs/components/sidebar.d.ts +4 -33
  33. package/dist/cjs/components/sidebar.d.ts.map +1 -1
  34. package/dist/cjs/components/sidebar.js +1 -1
  35. package/dist/cjs/components/sidebar.js.map +3 -3
  36. package/dist/cjs/components/skeleton.d.ts.map +1 -1
  37. package/dist/cjs/components/skeleton.js +1 -1
  38. package/dist/cjs/components/skeleton.js.map +2 -2
  39. package/dist/cjs/helpers/inert.d.ts +1 -1
  40. package/dist/cjs/helpers/inert.d.ts.map +1 -1
  41. package/dist/cjs/helpers/inert.js +1 -1
  42. package/dist/cjs/helpers/inert.js.map +2 -2
  43. package/dist/esm/components/_internal/base-button.d.ts.map +1 -1
  44. package/dist/esm/components/_internal/base-button.js +1 -1
  45. package/dist/esm/components/_internal/base-button.js.map +3 -3
  46. package/dist/esm/components/chatbar.d.ts +202 -0
  47. package/dist/esm/components/chatbar.d.ts.map +1 -0
  48. package/dist/esm/components/chatbar.js +2 -0
  49. package/dist/esm/components/chatbar.js.map +7 -0
  50. package/dist/esm/components/icon-button.d.ts.map +1 -1
  51. package/dist/esm/components/icon-button.js +2 -2
  52. package/dist/esm/components/icon-button.js.map +3 -3
  53. package/dist/esm/components/icons.d.ts +6 -1
  54. package/dist/esm/components/icons.d.ts.map +1 -1
  55. package/dist/esm/components/icons.js +1 -1
  56. package/dist/esm/components/icons.js.map +3 -3
  57. package/dist/esm/components/index.d.ts +3 -0
  58. package/dist/esm/components/index.d.ts.map +1 -1
  59. package/dist/esm/components/index.js +1 -1
  60. package/dist/esm/components/index.js.map +3 -3
  61. package/dist/esm/components/popover.d.ts +13 -1
  62. package/dist/esm/components/popover.d.ts.map +1 -1
  63. package/dist/esm/components/popover.js +1 -1
  64. package/dist/esm/components/popover.js.map +3 -3
  65. package/dist/esm/components/sheet.d.ts +82 -0
  66. package/dist/esm/components/sheet.d.ts.map +1 -0
  67. package/dist/esm/components/sheet.js +2 -0
  68. package/dist/esm/components/sheet.js.map +7 -0
  69. package/dist/esm/components/shell.d.ts +180 -0
  70. package/dist/esm/components/shell.d.ts.map +1 -0
  71. package/dist/esm/components/shell.js +2 -0
  72. package/dist/esm/components/shell.js.map +7 -0
  73. package/dist/esm/components/sidebar.d.ts +4 -33
  74. package/dist/esm/components/sidebar.d.ts.map +1 -1
  75. package/dist/esm/components/sidebar.js +1 -1
  76. package/dist/esm/components/sidebar.js.map +3 -3
  77. package/dist/esm/components/skeleton.d.ts.map +1 -1
  78. package/dist/esm/components/skeleton.js.map +2 -2
  79. package/dist/esm/helpers/inert.d.ts +1 -1
  80. package/dist/esm/helpers/inert.d.ts.map +1 -1
  81. package/dist/esm/helpers/inert.js +1 -1
  82. package/dist/esm/helpers/inert.js.map +2 -2
  83. package/package.json +2 -1
  84. package/src/components/_internal/base-button.tsx +8 -0
  85. package/src/components/_internal/base-card.css +18 -18
  86. package/src/components/_internal/base-dialog.css +11 -49
  87. package/src/components/_internal/base-menu.css +2 -2
  88. package/src/components/_internal/base-sidebar-menu.css +3 -3
  89. package/src/components/accordion.css +6 -6
  90. package/src/components/animations.css +65 -81
  91. package/src/components/callout.css +3 -3
  92. package/src/components/chatbar.css +214 -0
  93. package/src/components/chatbar.tsx +1181 -0
  94. package/src/components/icon-button.tsx +11 -0
  95. package/src/components/icons.tsx +97 -2
  96. package/src/components/image.css +3 -3
  97. package/src/components/index.css +3 -0
  98. package/src/components/index.tsx +3 -0
  99. package/src/components/popover.css +53 -8
  100. package/src/components/popover.tsx +180 -2
  101. package/src/components/scroll-area.css +3 -3
  102. package/src/components/segmented-control.css +3 -3
  103. package/src/components/sheet.css +90 -0
  104. package/src/components/sheet.tsx +247 -0
  105. package/src/components/shell.css +137 -0
  106. package/src/components/shell.tsx +1032 -0
  107. package/src/components/sidebar.css +55 -268
  108. package/src/components/sidebar.tsx +40 -262
  109. package/src/components/skeleton.tsx +1 -2
  110. package/src/components/text-area.css +6 -5
  111. package/src/components/tooltip.css +2 -2
  112. package/src/helpers/inert.ts +3 -3
  113. package/src/styles/tokens/constants.css +6 -3
  114. package/src/styles/tokens/index.css +1 -0
  115. package/src/styles/tokens/radius.css +7 -2
  116. package/src/styles/tokens/space.css +6 -0
  117. package/src/styles/tokens/transition.css +91 -46
  118. package/styles.css +998 -496
  119. package/tokens/base.css +57 -35
  120. package/tokens.css +61 -38
package/styles.css CHANGED
@@ -90,42 +90,64 @@
90
90
  --duration-3: 100ms;
91
91
  --duration-4: 150ms;
92
92
  --duration-5: 200ms;
93
- --duration-spring-1: 200ms;
94
- --duration-spring-2: 250ms;
95
- --duration-spring-3: 300ms;
96
- --ease-1: ease-out;
97
- --ease-2: ease-in-out;
98
- --ease-3: cubic-bezier(0.4, 0, 0.2, 1);
99
- --ease-4: cubic-bezier(0.25, 0.46, 0.45, 0.94);
100
- --ease-5: cubic-bezier(0.68, -0.55, 0.265, 1.55);
93
+ --duration-spring-1: 100ms;
94
+ --duration-spring-2: 150ms;
95
+ --duration-spring-3: 200ms;
96
+ --ease-1: var(--ease-spring-1);
97
+ --ease-2: var(--ease-spring-2);
98
+ --ease-3: var(--ease-spring-3);
99
+ --ease-4: var(--ease-spring-1);
100
+ --ease-5: var(--ease-spring-2);
101
101
  --ease-spring-1: cubic-bezier(0.25, 0.46, 0.45, 0.94);
102
102
  --ease-spring-2: cubic-bezier(0.68, -0.55, 0.265, 1.55);
103
103
  --ease-spring-3: cubic-bezier(0.175, 0.885, 0.32, 1.275);
104
- --transition-fast: var(--duration-2) var(--ease-1);
105
- --transition-standard: var(--duration-3) var(--ease-2);
106
- --transition-slow: var(--duration-4) var(--ease-3);
107
- --transition-spring-fast: var(--duration-spring-1) var(--ease-spring-1);
108
- --transition-spring-standard: var(--duration-spring-2) var(--ease-spring-1);
109
- --transition-spring-slow: var(--duration-spring-3) var(--ease-spring-1);
110
- --transition-spring-bounce: var(--duration-spring-2) var(--ease-spring-2);
111
- --transition-spring-elastic: var(--duration-spring-3) var(--ease-spring-3);
112
- --transition-button: background var(--duration-2) var(--ease-1), box-shadow var(--duration-2) var(--ease-1), backdrop-filter var(--duration-2) var(--ease-1), transform var(--duration-1) var(--ease-1), padding var(--duration-1) var(--ease-1);
113
- --transition-text-field: background var(--duration-2) var(--ease-1), box-shadow var(--duration-2) var(--ease-1);
114
- --transition-select: background var(--duration-2) var(--ease-1), box-shadow var(--duration-2) var(--ease-1);
115
- --transition-badge: background var(--duration-2) var(--ease-1), box-shadow var(--duration-2) var(--ease-1), padding var(--duration-1) var(--ease-1);
116
- --transition-card: background-color var(--duration-2) var(--ease-1), box-shadow var(--duration-2) var(--ease-1), top var(--duration-2) var(--ease-1);
117
- --transition-tabs: color var(--duration-1) var(--ease-1), background-color var(--duration-1) var(--ease-1), font-weight var(--duration-2) var(--ease-2), letter-spacing var(--duration-2) var(--ease-2), word-spacing var(--duration-2) var(--ease-2), transform var(--duration-1) var(--ease-1);
118
- --transition-segmented-control: opacity var(--duration-2) var(--ease-1), transform var(--duration-2) var(--ease-3), background-color var(--duration-2) var(--ease-1);
119
- --transition-menu: background var(--duration-1) var(--ease-1), color var(--duration-2) var(--ease-1);
120
- --transition-checkbox: background-color var(--duration-2) var(--ease-1), box-shadow var(--duration-2) var(--ease-1), color var(--duration-1) var(--ease-1);
121
- --transition-radio: background-color var(--duration-2) var(--ease-1), box-shadow var(--duration-2) var(--ease-1), color var(--duration-1) var(--ease-1);
122
- --transition-focus: outline var(--duration-2) var(--ease-1), outline-offset var(--duration-2) var(--ease-1);
123
- --transition-progress: transform var(--duration-2) var(--ease-1);
124
- --transition-accordion-content: height var(--duration-spring-2) var(--ease-spring-1), opacity var(--duration-spring-2) var(--ease-spring-1), transform var(--duration-spring-2) var(--ease-spring-1);
125
- --transition-accordion-trigger: background-color var(--duration-spring-1) var(--ease-spring-1), transform var(--duration-spring-1) var(--ease-spring-1);
126
- --transition-accordion-trigger-active: transform var(--duration-1) var(--ease-spring-2);
127
- --transition-spring-gpu: transform var(--duration-spring-2) var(--ease-spring-1), opacity var(--duration-spring-2) var(--ease-spring-1);
128
- --transition-spring-gpu-fast: transform var(--duration-spring-1) var(--ease-spring-1), opacity var(--duration-spring-1) var(--ease-spring-1);
104
+ --transition-fast: var(--motion-duration-micro) var(--motion-ease-standard);
105
+ --transition-standard: var(--motion-duration-small) var(--motion-ease-standard);
106
+ --transition-slow: var(--motion-duration-medium) var(--motion-ease-smooth);
107
+ --transition-spring-fast: var(--motion-duration-micro) var(--motion-spring-snappy);
108
+ --transition-spring-standard: var(--motion-duration-small) var(--motion-spring-snappy);
109
+ --transition-spring-slow: var(--motion-duration-medium) var(--motion-spring-snappy);
110
+ --transition-spring-bounce: var(--motion-duration-small) var(--motion-spring-bounce);
111
+ --transition-spring-elastic: var(--motion-duration-medium) var(--motion-spring-elastic);
112
+ --motion-duration-micro: 75ms;
113
+ --motion-duration-small: 150ms;
114
+ --motion-duration-medium: 250ms;
115
+ --motion-duration-large: 350ms;
116
+ --motion-ease-standard: ease-in-out;
117
+ --motion-ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);
118
+ --motion-ease-anticipate: cubic-bezier(0.36, 0, 0.66, -0.56);
119
+ --motion-ease-follow: cubic-bezier(0.34, 1.56, 0.64, 1);
120
+ --motion-spring-snappy: var(--ease-spring-1);
121
+ --motion-spring-bounce: var(--ease-spring-2);
122
+ --motion-spring-elastic: var(--ease-spring-3);
123
+ --motion-stagger-1: 15ms;
124
+ --motion-stagger-2: 30ms;
125
+ --motion-stagger-3: 45ms;
126
+ --spring-snappy-mass: 1;
127
+ --spring-snappy-stiffness: 280;
128
+ --spring-snappy-damping: 24;
129
+ --spring-snappy-initial-velocity: 0;
130
+ --spring-smooth-mass: 1;
131
+ --spring-smooth-stiffness: 200;
132
+ --spring-smooth-damping: 30;
133
+ --spring-smooth-initial-velocity: 0;
134
+ --transition-button: background var(--motion-duration-small) var(--motion-ease-standard), box-shadow var(--motion-duration-small) var(--motion-ease-standard), backdrop-filter var(--motion-duration-small) var(--motion-ease-standard), transform var(--motion-duration-micro) var(--motion-spring-snappy), padding var(--motion-duration-micro) var(--motion-ease-standard);
135
+ --transition-text-field: background var(--motion-duration-small) var(--motion-ease-standard), box-shadow var(--motion-duration-small) var(--motion-ease-standard);
136
+ --transition-select: background var(--motion-duration-small) var(--motion-ease-standard), box-shadow var(--motion-duration-small) var(--motion-ease-standard);
137
+ --transition-badge: background var(--motion-duration-small) var(--motion-ease-standard), box-shadow var(--motion-duration-small) var(--motion-ease-standard), padding var(--motion-duration-micro) var(--motion-ease-standard);
138
+ --transition-card: background-color var(--motion-duration-small) var(--motion-ease-standard), box-shadow var(--motion-duration-small) var(--motion-ease-standard), top var(--motion-duration-small) var(--motion-ease-standard);
139
+ --transition-tabs: color var(--motion-duration-micro) var(--motion-ease-standard), background-color var(--motion-duration-micro) var(--motion-ease-standard), font-weight var(--motion-duration-small) var(--motion-ease-standard), letter-spacing var(--motion-duration-small) var(--motion-ease-standard), word-spacing var(--motion-duration-small) var(--motion-ease-standard), transform var(--motion-duration-micro) var(--motion-spring-snappy);
140
+ --transition-segmented-control: opacity var(--motion-duration-small) var(--motion-ease-standard), transform var(--motion-duration-small) var(--motion-spring-snappy), background-color var(--motion-duration-small) var(--motion-ease-standard);
141
+ --transition-menu: background var(--motion-duration-micro) var(--motion-ease-standard), color var(--motion-duration-small) var(--motion-ease-standard);
142
+ --transition-checkbox: background-color var(--motion-duration-small) var(--motion-ease-standard), box-shadow var(--motion-duration-small) var(--motion-ease-standard), color var(--motion-duration-micro) var(--motion-ease-standard);
143
+ --transition-radio: background-color var(--motion-duration-small) var(--motion-ease-standard), box-shadow var(--motion-duration-small) var(--motion-ease-standard), color var(--motion-duration-micro) var(--motion-ease-standard);
144
+ --transition-focus: outline var(--motion-duration-small) var(--motion-ease-standard), outline-offset var(--motion-duration-small) var(--motion-ease-standard);
145
+ --transition-progress: transform var(--motion-duration-small) var(--motion-ease-standard);
146
+ --transition-accordion-content: height var(--motion-duration-small) var(--motion-spring-snappy), opacity var(--motion-duration-small) var(--motion-spring-snappy), transform var(--motion-duration-small) var(--motion-spring-snappy);
147
+ --transition-accordion-trigger: background-color var(--motion-duration-small) var(--motion-spring-snappy), transform var(--motion-duration-micro) var(--motion-spring-snappy);
148
+ --transition-accordion-trigger-active: transform var(--motion-duration-micro) var(--motion-spring-bounce);
149
+ --transition-spring-gpu: transform var(--motion-duration-small) var(--motion-spring-snappy), opacity var(--motion-duration-small) var(--motion-spring-snappy);
150
+ --transition-spring-gpu-fast: transform var(--motion-duration-micro) var(--motion-spring-snappy), opacity var(--motion-duration-micro) var(--motion-spring-snappy);
129
151
  --font-size-0: calc(10px * var(--scaling));
130
152
  --font-size-1: calc(12px * var(--scaling));
131
153
  --font-size-2: calc(14px * var(--scaling));
@@ -240,7 +262,7 @@
240
262
  --scrollarea-scrollbar-vertical-margin-bottom: var(--space-1);
241
263
  --scrollarea-scrollbar-vertical-margin-left: var(--space-1);
242
264
  --scrollarea-scrollbar-vertical-margin-right: var(--space-1);
243
- --segmented-control-transition-duration: var(--duration-1);
265
+ --segmented-control-transition-duration: var(--motion-duration-micro);
244
266
  --spinner-animation-duration: 800ms;
245
267
  --spinner-opacity: 0.65;
246
268
  color: var(--gray-12);
@@ -3509,11 +3531,11 @@
3509
3531
  --surface-opacity-light: var(--opacity-5);
3510
3532
  --surface-opacity-heavy: var(--opacity-6);
3511
3533
  --surface-opacity-dark: var(--opacity-7);
3512
- --dialog-opacity: var(--opacity-7);
3534
+ --dialog-opacity: var(--opacity-9);
3513
3535
  --dialog-opacity-percentage: calc(var(--dialog-opacity) * 100%);
3514
- --panel-opacity: var(--opacity-6);
3536
+ --panel-opacity: var(--opacity-8);
3515
3537
  --panel-opacity-percentage: calc(var(--panel-opacity) * 100%);
3516
- --surface-opacity: var(--opacity-5);
3538
+ --surface-opacity: var(--opacity-7);
3517
3539
  --surface-opacity-percentage: calc(var(--surface-opacity) * 100%);
3518
3540
  --border-width-standard: 1px;
3519
3541
  --classic-elevation-offset: -0.02em;
@@ -3588,6 +3610,7 @@
3588
3610
  --position-negative-full: -100%;
3589
3611
  --position-zero: 0%;
3590
3612
  --transition-background-blur: background-color var(--duration-2) var(--ease-1);
3613
+ --sheet-slide-distance: 50%;
3591
3614
  --spacing-multiplier-small: 0.5;
3592
3615
  --spacing-multiplier-medium: 0.75;
3593
3616
  --spacing-multiplier-large: 1.25;
@@ -3642,8 +3665,6 @@
3642
3665
  --avatar-image-active-filter: brightness(0.9) saturate(1.1);
3643
3666
  --base-button-solid-high-contrast-hover-filter: contrast(0.88) saturate(1.1) brightness(1.1);
3644
3667
  --segmented-control-indicator-background-color: var(--color-background);
3645
- --sidebar-icon-width-1: calc(var(--space-9) + var(--space-1));
3646
- --sidebar-icon-width-2: calc(var(--space-9) + var(--space-3));
3647
3668
  --slider-range-high-contrast-background-image: linear-gradient(var(--black-a8), var(--black-a8));
3648
3669
  }
3649
3670
  @supports (color: color(display-p3 1 1 1)) {
@@ -4714,8 +4735,8 @@
4714
4735
  --radius-5: calc(16px * var(--scaling) * var(--radius-factor));
4715
4736
  --radius-6: calc(20px * var(--scaling) * var(--radius-factor));
4716
4737
  --radius-7: calc(24px * var(--scaling) * var(--radius-factor));
4717
- --radius-8: calc(32px * var(--scaling) * var(--radius-factor));
4718
- --radius-9: calc(40px * var(--scaling) * var(--radius-factor));
4738
+ --radius-8: calc(28px * var(--scaling) * var(--radius-factor));
4739
+ --radius-9: calc(32px * var(--scaling) * var(--radius-factor));
4719
4740
  }
4720
4741
  [data-radius='none']{
4721
4742
  --radius-factor: 0;
@@ -5188,65 +5209,81 @@
5188
5209
  @keyframes rt-slide-from-top {
5189
5210
  from{
5190
5211
  transform: translateY(4px) scale(0.97);
5212
+ opacity: 0.5;
5191
5213
  }
5192
5214
  to{
5193
5215
  transform: translateY(0) scale(1);
5216
+ opacity: 1;
5194
5217
  }
5195
5218
  }
5196
5219
  @keyframes rt-slide-to-top {
5197
5220
  from{
5198
5221
  transform: translateY(0) scale(1);
5222
+ opacity: 1;
5199
5223
  }
5200
5224
  to{
5201
5225
  transform: translateY(4px) scale(0.97);
5226
+ opacity: 0.5;
5202
5227
  }
5203
5228
  }
5204
5229
  @keyframes rt-slide-from-bottom {
5205
5230
  from{
5206
5231
  transform: translateY(-4px) scale(0.97);
5232
+ opacity: 0.5;
5207
5233
  }
5208
5234
  to{
5209
5235
  transform: translateY(0) scale(1);
5236
+ opacity: 1;
5210
5237
  }
5211
5238
  }
5212
5239
  @keyframes rt-slide-to-bottom {
5213
5240
  from{
5214
5241
  transform: translateY(0) scale(1);
5242
+ opacity: 1;
5215
5243
  }
5216
5244
  to{
5217
5245
  transform: translateY(-4px) scale(0.97);
5246
+ opacity: 0.5;
5218
5247
  }
5219
5248
  }
5220
5249
  @keyframes rt-slide-from-left {
5221
5250
  from{
5222
5251
  transform: translateX(4px) scale(0.97);
5252
+ opacity: 0.5;
5223
5253
  }
5224
5254
  to{
5225
5255
  transform: translateX(0) scale(1);
5256
+ opacity: 1;
5226
5257
  }
5227
5258
  }
5228
5259
  @keyframes rt-slide-to-left {
5229
5260
  from{
5230
5261
  transform: translateX(0) scale(1);
5262
+ opacity: 1;
5231
5263
  }
5232
5264
  to{
5233
5265
  transform: translateX(4px) scale(0.97);
5266
+ opacity: 0.5;
5234
5267
  }
5235
5268
  }
5236
5269
  @keyframes rt-slide-from-right {
5237
5270
  from{
5238
5271
  transform: translateX(-4px) scale(0.97);
5272
+ opacity: 0.5;
5239
5273
  }
5240
5274
  to{
5241
5275
  transform: translateX(0) scale(1);
5276
+ opacity: 1;
5242
5277
  }
5243
5278
  }
5244
5279
  @keyframes rt-slide-to-right {
5245
5280
  from{
5246
5281
  transform: translateX(0) scale(1);
5282
+ opacity: 1;
5247
5283
  }
5248
5284
  to{
5249
5285
  transform: translateX(-4px) scale(0.97);
5286
+ opacity: 0.5;
5250
5287
  }
5251
5288
  }
5252
5289
  @keyframes rt-tab-indicator-appear {
@@ -5264,10 +5301,10 @@
5264
5301
  }
5265
5302
  @media (prefers-reduced-motion: no-preference) {
5266
5303
  .rt-PopperContent{
5267
- animation-timing-function: var(--ease-3);
5304
+ animation-timing-function: var(--motion-spring-snappy);
5268
5305
  }
5269
5306
  .rt-PopperContent:where([data-state='open']){
5270
- animation-duration: var(--duration-2);
5307
+ animation-duration: var(--motion-duration-small);
5271
5308
  }
5272
5309
  .rt-PopperContent:where([data-state='open']):where([data-side='top']){
5273
5310
  animation-name: rt-slide-from-top, rt-fade-in;
@@ -5285,7 +5322,7 @@
5285
5322
  animation-name: rt-slide-from-bottom, rt-fade-in;
5286
5323
  }
5287
5324
  .rt-PopperContent:where([data-state='closed']){
5288
- animation-duration: var(--duration-1);
5325
+ animation-duration: var(--motion-duration-small);
5289
5326
  }
5290
5327
  .rt-PopperContent:where([data-state='closed']):where([data-side='top']){
5291
5328
  animation-name: rt-slide-to-top, rt-fade-out;
@@ -5303,7 +5340,99 @@
5303
5340
  animation-name: rt-slide-to-bottom, rt-fade-out;
5304
5341
  }
5305
5342
  .rt-BaseTabListTrigger:where([data-state='active'], [data-active])::before{
5306
- animation: rt-tab-indicator-appear var(--duration-2) var(--ease-3);
5343
+ animation: rt-tab-indicator-appear var(--motion-duration-small) var(--motion-spring-snappy);
5344
+ }
5345
+ }
5346
+ @keyframes rt-dialog-overlay-no-op {
5347
+ from{
5348
+ opacity: 1;
5349
+ }
5350
+ to{
5351
+ opacity: 1;
5352
+ }
5353
+ }
5354
+ @keyframes rt-dialog-content-show {
5355
+ from{
5356
+ opacity: 0;
5357
+ transform: translateY(5px) scale(0.97);
5358
+ }
5359
+ to{
5360
+ opacity: 1;
5361
+ transform: translateY(0px) scale(1);
5362
+ }
5363
+ }
5364
+ @keyframes rt-dialog-content-hide {
5365
+ from{
5366
+ opacity: 1;
5367
+ transform: translateY(0px) scale(1);
5368
+ }
5369
+ to{
5370
+ opacity: 0;
5371
+ transform: translateY(5px) scale(0.99);
5372
+ }
5373
+ }
5374
+ @keyframes rt-sheet-open-from-start {
5375
+ from{
5376
+ transform: translate3d(calc(-1 * var(--sheet-slide-distance)), 0, 0);
5377
+ }
5378
+ to{
5379
+ transform: translate3d(0, 0, 0);
5380
+ }
5381
+ }
5382
+ @keyframes rt-sheet-close-to-start {
5383
+ from{
5384
+ transform: translate3d(0, 0, 0);
5385
+ }
5386
+ to{
5387
+ transform: translate3d(calc(-1 * var(--sheet-slide-distance)), 0, 0);
5388
+ }
5389
+ }
5390
+ @keyframes rt-sheet-open-from-end {
5391
+ from{
5392
+ transform: translate3d(var(--sheet-slide-distance), 0, 0);
5393
+ }
5394
+ to{
5395
+ transform: translate3d(0, 0, 0);
5396
+ }
5397
+ }
5398
+ @keyframes rt-sheet-close-to-end {
5399
+ from{
5400
+ transform: translate3d(0, 0, 0);
5401
+ }
5402
+ to{
5403
+ transform: translate3d(var(--sheet-slide-distance), 0, 0);
5404
+ }
5405
+ }
5406
+ @keyframes rt-sheet-open-from-top {
5407
+ from{
5408
+ transform: translate3d(0, calc(-1 * var(--sheet-slide-distance)), 0);
5409
+ }
5410
+ to{
5411
+ transform: translate3d(0, 0, 0);
5412
+ }
5413
+ }
5414
+ @keyframes rt-sheet-close-to-top {
5415
+ from{
5416
+ transform: translate3d(0, 0, 0);
5417
+ }
5418
+ to{
5419
+ transform: translate3d(0, calc(-1 * var(--sheet-slide-distance)), 0);
5420
+ }
5421
+ }
5422
+ @keyframes rt-sheet-open-from-bottom {
5423
+ from{
5424
+ transform: translate3d(0, var(--sheet-slide-distance), 0);
5425
+ }
5426
+ to{
5427
+ transform: translate3d(0, 0, 0);
5428
+ }
5429
+ }
5430
+ @keyframes rt-sheet-close-to-bottom {
5431
+ from{
5432
+ transform: translate3d(0, 0, 0);
5433
+ }
5434
+ to{
5435
+ transform: translate3d(0, var(--sheet-slide-distance), 0);
5307
5436
  }
5308
5437
  }
5309
5438
  .rt-Box{
@@ -5922,85 +6051,85 @@
5922
6051
  --backdrop-filter-components: blur(var(--backdrop-blur-components));
5923
6052
  }
5924
6053
  .rt-AccordionRoot:where(.rt-r-size-1){
5925
- border-radius: var(--radius-2);
6054
+ border-radius: var(--radius-1);
5926
6055
  }
5927
6056
  .rt-AccordionRoot:where(.rt-r-size-2){
5928
- border-radius: var(--radius-3);
6057
+ border-radius: var(--radius-2);
5929
6058
  }
5930
6059
  .rt-AccordionRoot:where(.rt-r-size-3){
5931
- border-radius: var(--radius-4);
6060
+ border-radius: var(--radius-3);
5932
6061
  }
5933
6062
  .rt-AccordionRoot:where(.rt-r-size-4){
5934
- border-radius: var(--radius-5);
6063
+ border-radius: var(--radius-4);
5935
6064
  }
5936
6065
  @media (min-width: 520px){
5937
6066
  .rt-AccordionRoot:where(.xs\:rt-r-size-1){
5938
- border-radius: var(--radius-2);
6067
+ border-radius: var(--radius-1);
5939
6068
  }
5940
6069
  .rt-AccordionRoot:where(.xs\:rt-r-size-2){
5941
- border-radius: var(--radius-3);
6070
+ border-radius: var(--radius-2);
5942
6071
  }
5943
6072
  .rt-AccordionRoot:where(.xs\:rt-r-size-3){
5944
- border-radius: var(--radius-4);
6073
+ border-radius: var(--radius-3);
5945
6074
  }
5946
6075
  .rt-AccordionRoot:where(.xs\:rt-r-size-4){
5947
- border-radius: var(--radius-5);
6076
+ border-radius: var(--radius-4);
5948
6077
  }
5949
6078
  }
5950
6079
  @media (min-width: 768px){
5951
6080
  .rt-AccordionRoot:where(.sm\:rt-r-size-1){
5952
- border-radius: var(--radius-2);
6081
+ border-radius: var(--radius-1);
5953
6082
  }
5954
6083
  .rt-AccordionRoot:where(.sm\:rt-r-size-2){
5955
- border-radius: var(--radius-3);
6084
+ border-radius: var(--radius-2);
5956
6085
  }
5957
6086
  .rt-AccordionRoot:where(.sm\:rt-r-size-3){
5958
- border-radius: var(--radius-4);
6087
+ border-radius: var(--radius-3);
5959
6088
  }
5960
6089
  .rt-AccordionRoot:where(.sm\:rt-r-size-4){
5961
- border-radius: var(--radius-5);
6090
+ border-radius: var(--radius-4);
5962
6091
  }
5963
6092
  }
5964
6093
  @media (min-width: 1024px){
5965
6094
  .rt-AccordionRoot:where(.md\:rt-r-size-1){
5966
- border-radius: var(--radius-2);
6095
+ border-radius: var(--radius-1);
5967
6096
  }
5968
6097
  .rt-AccordionRoot:where(.md\:rt-r-size-2){
5969
- border-radius: var(--radius-3);
6098
+ border-radius: var(--radius-2);
5970
6099
  }
5971
6100
  .rt-AccordionRoot:where(.md\:rt-r-size-3){
5972
- border-radius: var(--radius-4);
6101
+ border-radius: var(--radius-3);
5973
6102
  }
5974
6103
  .rt-AccordionRoot:where(.md\:rt-r-size-4){
5975
- border-radius: var(--radius-5);
6104
+ border-radius: var(--radius-4);
5976
6105
  }
5977
6106
  }
5978
6107
  @media (min-width: 1280px){
5979
6108
  .rt-AccordionRoot:where(.lg\:rt-r-size-1){
5980
- border-radius: var(--radius-2);
6109
+ border-radius: var(--radius-1);
5981
6110
  }
5982
6111
  .rt-AccordionRoot:where(.lg\:rt-r-size-2){
5983
- border-radius: var(--radius-3);
6112
+ border-radius: var(--radius-2);
5984
6113
  }
5985
6114
  .rt-AccordionRoot:where(.lg\:rt-r-size-3){
5986
- border-radius: var(--radius-4);
6115
+ border-radius: var(--radius-3);
5987
6116
  }
5988
6117
  .rt-AccordionRoot:where(.lg\:rt-r-size-4){
5989
- border-radius: var(--radius-5);
6118
+ border-radius: var(--radius-4);
5990
6119
  }
5991
6120
  }
5992
6121
  @media (min-width: 1640px){
5993
6122
  .rt-AccordionRoot:where(.xl\:rt-r-size-1){
5994
- border-radius: var(--radius-2);
6123
+ border-radius: var(--radius-1);
5995
6124
  }
5996
6125
  .rt-AccordionRoot:where(.xl\:rt-r-size-2){
5997
- border-radius: var(--radius-3);
6126
+ border-radius: var(--radius-2);
5998
6127
  }
5999
6128
  .rt-AccordionRoot:where(.xl\:rt-r-size-3){
6000
- border-radius: var(--radius-4);
6129
+ border-radius: var(--radius-3);
6001
6130
  }
6002
6131
  .rt-AccordionRoot:where(.xl\:rt-r-size-4){
6003
- border-radius: var(--radius-5);
6132
+ border-radius: var(--radius-4);
6004
6133
  }
6005
6134
  }
6006
6135
  :where(.rt-AccordionRoot:where(.rt-variant-surface)){
@@ -6324,10 +6453,10 @@
6324
6453
  font-size: var(--font-size-4);
6325
6454
  }
6326
6455
  :where(.rt-AccordionContent[data-state="open"]){
6327
- animation: rt-slide-down var(--duration-spring-2) var(--ease-spring-1);
6456
+ animation: rt-slide-down var(--motion-duration-small) var(--motion-spring-snappy);
6328
6457
  }
6329
6458
  :where(.rt-AccordionContent[data-state="closed"]){
6330
- animation: rt-slide-up var(--duration-spring-1) var(--ease-spring-1);
6459
+ animation: rt-slide-up var(--motion-duration-micro) var(--motion-spring-snappy);
6331
6460
  }
6332
6461
  @keyframes rt-slide-down {
6333
6462
  0%{
@@ -6568,142 +6697,114 @@
6568
6697
  backdrop-filter: var(--backdrop-filter-dialog);
6569
6698
  }
6570
6699
  .rt-BaseDialogContent:where(.rt-r-size-1){
6571
- --dialog-content-padding: var(--space-4);
6572
- border-radius: var(--radius-5);
6700
+ --dialog-content-padding: var(--space-5);
6701
+ border-radius: min(var(--radius-5), calc(var(--radius-1) + var(--space-2)));
6573
6702
  }
6574
6703
  .rt-BaseDialogContent:where(.rt-r-size-2){
6575
- --dialog-content-padding: var(--space-5);
6576
- border-radius: var(--radius-6);
6704
+ --dialog-content-padding: var(--space-6);
6705
+ border-radius: min(var(--radius-6), calc(var(--radius-2) + var(--space-3)));
6577
6706
  }
6578
6707
  .rt-BaseDialogContent:where(.rt-r-size-3){
6579
- --dialog-content-padding: var(--space-6);
6580
- border-radius: var(--radius-7);
6708
+ --dialog-content-padding: var(--space-7);
6709
+ border-radius: min(var(--radius-7), calc(var(--radius-3) + var(--space-4)));
6581
6710
  }
6582
6711
  .rt-BaseDialogContent:where(.rt-r-size-4){
6583
- --dialog-content-padding: var(--space-7);
6584
- border-radius: var(--radius-8);
6712
+ --dialog-content-padding: var(--space-8);
6713
+ border-radius: min(var(--radius-8), calc(var(--radius-4) + var(--space-5)));
6585
6714
  }
6586
6715
  @media (min-width: 520px){
6587
6716
  .rt-BaseDialogContent:where(.xs\:rt-r-size-1){
6588
- --dialog-content-padding: var(--space-4);
6589
- border-radius: var(--radius-5);
6717
+ --dialog-content-padding: var(--space-5);
6718
+ border-radius: min(var(--radius-5), calc(var(--radius-1) + var(--space-2)));
6590
6719
  }
6591
6720
  .rt-BaseDialogContent:where(.xs\:rt-r-size-2){
6592
- --dialog-content-padding: var(--space-5);
6593
- border-radius: var(--radius-6);
6721
+ --dialog-content-padding: var(--space-6);
6722
+ border-radius: min(var(--radius-6), calc(var(--radius-2) + var(--space-3)));
6594
6723
  }
6595
6724
  .rt-BaseDialogContent:where(.xs\:rt-r-size-3){
6596
- --dialog-content-padding: var(--space-6);
6597
- border-radius: var(--radius-7);
6725
+ --dialog-content-padding: var(--space-7);
6726
+ border-radius: min(var(--radius-7), calc(var(--radius-3) + var(--space-4)));
6598
6727
  }
6599
6728
  .rt-BaseDialogContent:where(.xs\:rt-r-size-4){
6600
- --dialog-content-padding: var(--space-7);
6601
- border-radius: var(--radius-8);
6729
+ --dialog-content-padding: var(--space-8);
6730
+ border-radius: min(var(--radius-8), calc(var(--radius-4) + var(--space-5)));
6602
6731
  }
6603
6732
  }
6604
6733
  @media (min-width: 768px){
6605
6734
  .rt-BaseDialogContent:where(.sm\:rt-r-size-1){
6606
- --dialog-content-padding: var(--space-4);
6607
- border-radius: var(--radius-5);
6735
+ --dialog-content-padding: var(--space-5);
6736
+ border-radius: min(var(--radius-5), calc(var(--radius-1) + var(--space-2)));
6608
6737
  }
6609
6738
  .rt-BaseDialogContent:where(.sm\:rt-r-size-2){
6610
- --dialog-content-padding: var(--space-5);
6611
- border-radius: var(--radius-6);
6739
+ --dialog-content-padding: var(--space-6);
6740
+ border-radius: min(var(--radius-6), calc(var(--radius-2) + var(--space-3)));
6612
6741
  }
6613
6742
  .rt-BaseDialogContent:where(.sm\:rt-r-size-3){
6614
- --dialog-content-padding: var(--space-6);
6615
- border-radius: var(--radius-7);
6743
+ --dialog-content-padding: var(--space-7);
6744
+ border-radius: min(var(--radius-7), calc(var(--radius-3) + var(--space-4)));
6616
6745
  }
6617
6746
  .rt-BaseDialogContent:where(.sm\:rt-r-size-4){
6618
- --dialog-content-padding: var(--space-7);
6619
- border-radius: var(--radius-8);
6747
+ --dialog-content-padding: var(--space-8);
6748
+ border-radius: min(var(--radius-8), calc(var(--radius-4) + var(--space-5)));
6620
6749
  }
6621
6750
  }
6622
6751
  @media (min-width: 1024px){
6623
6752
  .rt-BaseDialogContent:where(.md\:rt-r-size-1){
6624
- --dialog-content-padding: var(--space-4);
6625
- border-radius: var(--radius-5);
6753
+ --dialog-content-padding: var(--space-5);
6754
+ border-radius: min(var(--radius-5), calc(var(--radius-1) + var(--space-2)));
6626
6755
  }
6627
6756
  .rt-BaseDialogContent:where(.md\:rt-r-size-2){
6628
- --dialog-content-padding: var(--space-5);
6629
- border-radius: var(--radius-6);
6757
+ --dialog-content-padding: var(--space-6);
6758
+ border-radius: min(var(--radius-6), calc(var(--radius-2) + var(--space-3)));
6630
6759
  }
6631
6760
  .rt-BaseDialogContent:where(.md\:rt-r-size-3){
6632
- --dialog-content-padding: var(--space-6);
6633
- border-radius: var(--radius-7);
6761
+ --dialog-content-padding: var(--space-7);
6762
+ border-radius: min(var(--radius-7), calc(var(--radius-3) + var(--space-4)));
6634
6763
  }
6635
6764
  .rt-BaseDialogContent:where(.md\:rt-r-size-4){
6636
- --dialog-content-padding: var(--space-7);
6637
- border-radius: var(--radius-8);
6765
+ --dialog-content-padding: var(--space-8);
6766
+ border-radius: min(var(--radius-8), calc(var(--radius-4) + var(--space-5)));
6638
6767
  }
6639
6768
  }
6640
6769
  @media (min-width: 1280px){
6641
6770
  .rt-BaseDialogContent:where(.lg\:rt-r-size-1){
6642
- --dialog-content-padding: var(--space-4);
6643
- border-radius: var(--radius-5);
6771
+ --dialog-content-padding: var(--space-5);
6772
+ border-radius: min(var(--radius-5), calc(var(--radius-1) + var(--space-2)));
6644
6773
  }
6645
6774
  .rt-BaseDialogContent:where(.lg\:rt-r-size-2){
6646
- --dialog-content-padding: var(--space-5);
6647
- border-radius: var(--radius-6);
6775
+ --dialog-content-padding: var(--space-6);
6776
+ border-radius: min(var(--radius-6), calc(var(--radius-2) + var(--space-3)));
6648
6777
  }
6649
6778
  .rt-BaseDialogContent:where(.lg\:rt-r-size-3){
6650
- --dialog-content-padding: var(--space-6);
6651
- border-radius: var(--radius-7);
6779
+ --dialog-content-padding: var(--space-7);
6780
+ border-radius: min(var(--radius-7), calc(var(--radius-3) + var(--space-4)));
6652
6781
  }
6653
6782
  .rt-BaseDialogContent:where(.lg\:rt-r-size-4){
6654
- --dialog-content-padding: var(--space-7);
6655
- border-radius: var(--radius-8);
6783
+ --dialog-content-padding: var(--space-8);
6784
+ border-radius: min(var(--radius-8), calc(var(--radius-4) + var(--space-5)));
6656
6785
  }
6657
6786
  }
6658
6787
  @media (min-width: 1640px){
6659
6788
  .rt-BaseDialogContent:where(.xl\:rt-r-size-1){
6660
- --dialog-content-padding: var(--space-4);
6661
- border-radius: var(--radius-5);
6789
+ --dialog-content-padding: var(--space-5);
6790
+ border-radius: min(var(--radius-5), calc(var(--radius-1) + var(--space-2)));
6662
6791
  }
6663
6792
  .rt-BaseDialogContent:where(.xl\:rt-r-size-2){
6664
- --dialog-content-padding: var(--space-5);
6665
- border-radius: var(--radius-6);
6793
+ --dialog-content-padding: var(--space-6);
6794
+ border-radius: min(var(--radius-6), calc(var(--radius-2) + var(--space-3)));
6666
6795
  }
6667
6796
  .rt-BaseDialogContent:where(.xl\:rt-r-size-3){
6668
- --dialog-content-padding: var(--space-6);
6669
- border-radius: var(--radius-7);
6797
+ --dialog-content-padding: var(--space-7);
6798
+ border-radius: min(var(--radius-7), calc(var(--radius-3) + var(--space-4)));
6670
6799
  }
6671
6800
  .rt-BaseDialogContent:where(.xl\:rt-r-size-4){
6672
- --dialog-content-padding: var(--space-7);
6673
- border-radius: var(--radius-8);
6801
+ --dialog-content-padding: var(--space-8);
6802
+ border-radius: min(var(--radius-8), calc(var(--radius-4) + var(--space-5)));
6674
6803
  }
6675
6804
  }
6676
6805
  @media (prefers-reduced-motion: no-preference) {
6677
- @keyframes rt-dialog-overlay-no-op {
6678
- from{
6679
- opacity: 1;
6680
- }
6681
- to{
6682
- opacity: 1;
6683
- }
6684
- }
6685
- @keyframes rt-dialog-content-show {
6686
- from{
6687
- opacity: 0;
6688
- transform: translateY(5px) scale(0.97);
6689
- }
6690
- to{
6691
- opacity: 1;
6692
- transform: translateY(0px) scale(1);
6693
- }
6694
- }
6695
- @keyframes rt-dialog-content-hide {
6696
- from{
6697
- opacity: 1;
6698
- transform: translateY(0px) scale(1);
6699
- }
6700
- to{
6701
- opacity: 0;
6702
- transform: translateY(5px) scale(0.99);
6703
- }
6704
- }
6705
6806
  .rt-BaseDialogOverlay:where([data-state='closed']){
6706
- animation: rt-dialog-overlay-no-op var(--duration-4) var(--ease-spring-1);
6807
+ animation: rt-dialog-overlay-no-op var(--motion-duration-small) var(--motion-spring-snappy);
6707
6808
  }
6708
6809
  .rt-BaseDialogOverlay:where([data-state='open'])::before{
6709
6810
  animation: rt-fade-in var(--duration-5) var(--ease-spring-1);
@@ -6713,11 +6814,11 @@
6713
6814
  animation: rt-fade-out var(--duration-4) var(--ease-spring-1);
6714
6815
  }
6715
6816
  .rt-BaseDialogContent:where([data-state='open']){
6716
- animation: rt-dialog-content-show var(--duration-5) var(--ease-spring-1);
6817
+ animation: rt-dialog-content-show var(--motion-duration-medium) var(--motion-spring-snappy);
6717
6818
  }
6718
6819
  .rt-BaseDialogContent:where([data-state='closed']){
6719
6820
  opacity: 0;
6720
- animation: rt-dialog-content-hide var(--duration-3) var(--ease-spring-1);
6821
+ animation: rt-dialog-content-hide var(--motion-duration-small) var(--motion-spring-snappy);
6721
6822
  }
6722
6823
  }
6723
6824
  @supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
@@ -9478,7 +9579,7 @@
9478
9579
  row-gap: var(--space-2);
9479
9580
  column-gap: var(--space-2);
9480
9581
  padding: var(--space-3);
9481
- border-radius: var(--radius-3);
9582
+ border-radius: var(--radius-1);
9482
9583
  --callout-icon-height: var(--line-height-1);
9483
9584
  --callout-icon-size: var(--content-icon-size-1);
9484
9585
  }
@@ -9486,7 +9587,7 @@
9486
9587
  row-gap: var(--space-2);
9487
9588
  column-gap: var(--space-3);
9488
9589
  padding: var(--space-4);
9489
- border-radius: var(--radius-4);
9590
+ border-radius: var(--radius-2);
9490
9591
  --callout-icon-height: var(--line-height-2);
9491
9592
  --callout-icon-size: var(--content-icon-size-2);
9492
9593
  }
@@ -9494,7 +9595,7 @@
9494
9595
  row-gap: var(--space-3);
9495
9596
  column-gap: var(--space-4);
9496
9597
  padding: var(--space-5);
9497
- border-radius: var(--radius-5);
9598
+ border-radius: var(--radius-3);
9498
9599
  --callout-icon-height: var(--line-height-3);
9499
9600
  --callout-icon-size: var(--content-icon-size-3);
9500
9601
  }
@@ -9503,7 +9604,7 @@
9503
9604
  row-gap: var(--space-2);
9504
9605
  column-gap: var(--space-2);
9505
9606
  padding: var(--space-3);
9506
- border-radius: var(--radius-3);
9607
+ border-radius: var(--radius-1);
9507
9608
  --callout-icon-height: var(--line-height-1);
9508
9609
  --callout-icon-size: var(--content-icon-size-1);
9509
9610
  }
@@ -9511,7 +9612,7 @@
9511
9612
  row-gap: var(--space-2);
9512
9613
  column-gap: var(--space-3);
9513
9614
  padding: var(--space-4);
9514
- border-radius: var(--radius-4);
9615
+ border-radius: var(--radius-2);
9515
9616
  --callout-icon-height: var(--line-height-2);
9516
9617
  --callout-icon-size: var(--content-icon-size-2);
9517
9618
  }
@@ -9519,7 +9620,7 @@
9519
9620
  row-gap: var(--space-3);
9520
9621
  column-gap: var(--space-4);
9521
9622
  padding: var(--space-5);
9522
- border-radius: var(--radius-5);
9623
+ border-radius: var(--radius-3);
9523
9624
  --callout-icon-height: var(--line-height-3);
9524
9625
  --callout-icon-size: var(--content-icon-size-3);
9525
9626
  }
@@ -9529,7 +9630,7 @@
9529
9630
  row-gap: var(--space-2);
9530
9631
  column-gap: var(--space-2);
9531
9632
  padding: var(--space-3);
9532
- border-radius: var(--radius-3);
9633
+ border-radius: var(--radius-1);
9533
9634
  --callout-icon-height: var(--line-height-1);
9534
9635
  --callout-icon-size: var(--content-icon-size-1);
9535
9636
  }
@@ -9537,7 +9638,7 @@
9537
9638
  row-gap: var(--space-2);
9538
9639
  column-gap: var(--space-3);
9539
9640
  padding: var(--space-4);
9540
- border-radius: var(--radius-4);
9641
+ border-radius: var(--radius-2);
9541
9642
  --callout-icon-height: var(--line-height-2);
9542
9643
  --callout-icon-size: var(--content-icon-size-2);
9543
9644
  }
@@ -9545,7 +9646,7 @@
9545
9646
  row-gap: var(--space-3);
9546
9647
  column-gap: var(--space-4);
9547
9648
  padding: var(--space-5);
9548
- border-radius: var(--radius-5);
9649
+ border-radius: var(--radius-3);
9549
9650
  --callout-icon-height: var(--line-height-3);
9550
9651
  --callout-icon-size: var(--content-icon-size-3);
9551
9652
  }
@@ -9555,7 +9656,7 @@
9555
9656
  row-gap: var(--space-2);
9556
9657
  column-gap: var(--space-2);
9557
9658
  padding: var(--space-3);
9558
- border-radius: var(--radius-3);
9659
+ border-radius: var(--radius-1);
9559
9660
  --callout-icon-height: var(--line-height-1);
9560
9661
  --callout-icon-size: var(--content-icon-size-1);
9561
9662
  }
@@ -9563,7 +9664,7 @@
9563
9664
  row-gap: var(--space-2);
9564
9665
  column-gap: var(--space-3);
9565
9666
  padding: var(--space-4);
9566
- border-radius: var(--radius-4);
9667
+ border-radius: var(--radius-2);
9567
9668
  --callout-icon-height: var(--line-height-2);
9568
9669
  --callout-icon-size: var(--content-icon-size-2);
9569
9670
  }
@@ -9571,7 +9672,7 @@
9571
9672
  row-gap: var(--space-3);
9572
9673
  column-gap: var(--space-4);
9573
9674
  padding: var(--space-5);
9574
- border-radius: var(--radius-5);
9675
+ border-radius: var(--radius-3);
9575
9676
  --callout-icon-height: var(--line-height-3);
9576
9677
  --callout-icon-size: var(--content-icon-size-3);
9577
9678
  }
@@ -9581,7 +9682,7 @@
9581
9682
  row-gap: var(--space-2);
9582
9683
  column-gap: var(--space-2);
9583
9684
  padding: var(--space-3);
9584
- border-radius: var(--radius-3);
9685
+ border-radius: var(--radius-1);
9585
9686
  --callout-icon-height: var(--line-height-1);
9586
9687
  --callout-icon-size: var(--content-icon-size-1);
9587
9688
  }
@@ -9589,7 +9690,7 @@
9589
9690
  row-gap: var(--space-2);
9590
9691
  column-gap: var(--space-3);
9591
9692
  padding: var(--space-4);
9592
- border-radius: var(--radius-4);
9693
+ border-radius: var(--radius-2);
9593
9694
  --callout-icon-height: var(--line-height-2);
9594
9695
  --callout-icon-size: var(--content-icon-size-2);
9595
9696
  }
@@ -9597,7 +9698,7 @@
9597
9698
  row-gap: var(--space-3);
9598
9699
  column-gap: var(--space-4);
9599
9700
  padding: var(--space-5);
9600
- border-radius: var(--radius-5);
9701
+ border-radius: var(--radius-3);
9601
9702
  --callout-icon-height: var(--line-height-3);
9602
9703
  --callout-icon-size: var(--content-icon-size-3);
9603
9704
  }
@@ -9607,7 +9708,7 @@
9607
9708
  row-gap: var(--space-2);
9608
9709
  column-gap: var(--space-2);
9609
9710
  padding: var(--space-3);
9610
- border-radius: var(--radius-3);
9711
+ border-radius: var(--radius-1);
9611
9712
  --callout-icon-height: var(--line-height-1);
9612
9713
  --callout-icon-size: var(--content-icon-size-1);
9613
9714
  }
@@ -9615,7 +9716,7 @@
9615
9716
  row-gap: var(--space-2);
9616
9717
  column-gap: var(--space-3);
9617
9718
  padding: var(--space-4);
9618
- border-radius: var(--radius-4);
9719
+ border-radius: var(--radius-2);
9619
9720
  --callout-icon-height: var(--line-height-2);
9620
9721
  --callout-icon-size: var(--content-icon-size-2);
9621
9722
  }
@@ -9623,7 +9724,7 @@
9623
9724
  row-gap: var(--space-3);
9624
9725
  column-gap: var(--space-4);
9625
9726
  padding: var(--space-5);
9626
- border-radius: var(--radius-5);
9727
+ border-radius: var(--radius-3);
9627
9728
  --callout-icon-height: var(--line-height-3);
9628
9729
  --callout-icon-size: var(--content-icon-size-3);
9629
9730
  }
@@ -9768,223 +9869,223 @@
9768
9869
  backdrop-filter: none !important;
9769
9870
  }
9770
9871
  .rt-BaseCard:where(.rt-r-size-1){
9872
+ --base-card-padding-top: var(--space-2);
9873
+ --base-card-padding-right: var(--space-2);
9874
+ --base-card-padding-bottom: var(--space-2);
9875
+ --base-card-padding-left: var(--space-2);
9876
+ --base-card-border-radius: min(var(--radius-5), calc(var(--radius-1) + var(--space-1)));
9877
+ }
9878
+ .rt-BaseCard:where(.rt-r-size-2){
9771
9879
  --base-card-padding-top: var(--space-3);
9772
9880
  --base-card-padding-right: var(--space-3);
9773
9881
  --base-card-padding-bottom: var(--space-3);
9774
9882
  --base-card-padding-left: var(--space-3);
9775
- --base-card-border-radius: var(--radius-5);
9883
+ --base-card-border-radius: min(var(--radius-6), calc(var(--radius-2) + var(--space-2)));
9776
9884
  }
9777
- .rt-BaseCard:where(.rt-r-size-2){
9885
+ .rt-BaseCard:where(.rt-r-size-3){
9778
9886
  --base-card-padding-top: var(--space-4);
9779
9887
  --base-card-padding-right: var(--space-4);
9780
9888
  --base-card-padding-bottom: var(--space-4);
9781
9889
  --base-card-padding-left: var(--space-4);
9782
- --base-card-border-radius: var(--radius-6);
9890
+ --base-card-border-radius: min(var(--radius-7), calc(var(--radius-3) + var(--space-3)));
9783
9891
  }
9784
- .rt-BaseCard:where(.rt-r-size-3){
9892
+ .rt-BaseCard:where(.rt-r-size-4){
9785
9893
  --base-card-padding-top: var(--space-5);
9786
9894
  --base-card-padding-right: var(--space-5);
9787
9895
  --base-card-padding-bottom: var(--space-5);
9788
9896
  --base-card-padding-left: var(--space-5);
9789
- --base-card-border-radius: var(--radius-7);
9897
+ --base-card-border-radius: min(var(--radius-8), calc(var(--radius-4) + var(--space-4)));
9790
9898
  }
9791
- .rt-BaseCard:where(.rt-r-size-4){
9899
+ .rt-BaseCard:where(.rt-r-size-5){
9792
9900
  --base-card-padding-top: var(--space-6);
9793
9901
  --base-card-padding-right: var(--space-6);
9794
9902
  --base-card-padding-bottom: var(--space-6);
9795
9903
  --base-card-padding-left: var(--space-6);
9796
- --base-card-border-radius: var(--radius-8);
9797
- }
9798
- .rt-BaseCard:where(.rt-r-size-5){
9799
- --base-card-padding-top: var(--space-7);
9800
- --base-card-padding-right: var(--space-7);
9801
- --base-card-padding-bottom: var(--space-7);
9802
- --base-card-padding-left: var(--space-7);
9803
- --base-card-border-radius: var(--radius-9);
9904
+ --base-card-border-radius: min(var(--radius-9), calc(var(--radius-5) + var(--space-5)));
9804
9905
  }
9805
9906
  @media (min-width: 520px){
9806
9907
  .rt-BaseCard:where(.xs\:rt-r-size-1){
9908
+ --base-card-padding-top: var(--space-2);
9909
+ --base-card-padding-right: var(--space-2);
9910
+ --base-card-padding-bottom: var(--space-2);
9911
+ --base-card-padding-left: var(--space-2);
9912
+ --base-card-border-radius: min(var(--radius-5), calc(var(--radius-1) + var(--space-1)));
9913
+ }
9914
+ .rt-BaseCard:where(.xs\:rt-r-size-2){
9807
9915
  --base-card-padding-top: var(--space-3);
9808
9916
  --base-card-padding-right: var(--space-3);
9809
9917
  --base-card-padding-bottom: var(--space-3);
9810
9918
  --base-card-padding-left: var(--space-3);
9811
- --base-card-border-radius: var(--radius-5);
9919
+ --base-card-border-radius: min(var(--radius-6), calc(var(--radius-2) + var(--space-2)));
9812
9920
  }
9813
- .rt-BaseCard:where(.xs\:rt-r-size-2){
9921
+ .rt-BaseCard:where(.xs\:rt-r-size-3){
9814
9922
  --base-card-padding-top: var(--space-4);
9815
9923
  --base-card-padding-right: var(--space-4);
9816
9924
  --base-card-padding-bottom: var(--space-4);
9817
9925
  --base-card-padding-left: var(--space-4);
9818
- --base-card-border-radius: var(--radius-6);
9926
+ --base-card-border-radius: min(var(--radius-7), calc(var(--radius-3) + var(--space-3)));
9819
9927
  }
9820
- .rt-BaseCard:where(.xs\:rt-r-size-3){
9928
+ .rt-BaseCard:where(.xs\:rt-r-size-4){
9821
9929
  --base-card-padding-top: var(--space-5);
9822
9930
  --base-card-padding-right: var(--space-5);
9823
9931
  --base-card-padding-bottom: var(--space-5);
9824
9932
  --base-card-padding-left: var(--space-5);
9825
- --base-card-border-radius: var(--radius-7);
9933
+ --base-card-border-radius: min(var(--radius-8), calc(var(--radius-4) + var(--space-4)));
9826
9934
  }
9827
- .rt-BaseCard:where(.xs\:rt-r-size-4){
9935
+ .rt-BaseCard:where(.xs\:rt-r-size-5){
9828
9936
  --base-card-padding-top: var(--space-6);
9829
9937
  --base-card-padding-right: var(--space-6);
9830
9938
  --base-card-padding-bottom: var(--space-6);
9831
9939
  --base-card-padding-left: var(--space-6);
9832
- --base-card-border-radius: var(--radius-8);
9833
- }
9834
- .rt-BaseCard:where(.xs\:rt-r-size-5){
9835
- --base-card-padding-top: var(--space-7);
9836
- --base-card-padding-right: var(--space-7);
9837
- --base-card-padding-bottom: var(--space-7);
9838
- --base-card-padding-left: var(--space-7);
9839
- --base-card-border-radius: var(--radius-9);
9940
+ --base-card-border-radius: min(var(--radius-9), calc(var(--radius-5) + var(--space-5)));
9840
9941
  }
9841
9942
  }
9842
9943
  @media (min-width: 768px){
9843
9944
  .rt-BaseCard:where(.sm\:rt-r-size-1){
9945
+ --base-card-padding-top: var(--space-2);
9946
+ --base-card-padding-right: var(--space-2);
9947
+ --base-card-padding-bottom: var(--space-2);
9948
+ --base-card-padding-left: var(--space-2);
9949
+ --base-card-border-radius: min(var(--radius-5), calc(var(--radius-1) + var(--space-1)));
9950
+ }
9951
+ .rt-BaseCard:where(.sm\:rt-r-size-2){
9844
9952
  --base-card-padding-top: var(--space-3);
9845
9953
  --base-card-padding-right: var(--space-3);
9846
9954
  --base-card-padding-bottom: var(--space-3);
9847
9955
  --base-card-padding-left: var(--space-3);
9848
- --base-card-border-radius: var(--radius-5);
9956
+ --base-card-border-radius: min(var(--radius-6), calc(var(--radius-2) + var(--space-2)));
9849
9957
  }
9850
- .rt-BaseCard:where(.sm\:rt-r-size-2){
9958
+ .rt-BaseCard:where(.sm\:rt-r-size-3){
9851
9959
  --base-card-padding-top: var(--space-4);
9852
9960
  --base-card-padding-right: var(--space-4);
9853
9961
  --base-card-padding-bottom: var(--space-4);
9854
9962
  --base-card-padding-left: var(--space-4);
9855
- --base-card-border-radius: var(--radius-6);
9963
+ --base-card-border-radius: min(var(--radius-7), calc(var(--radius-3) + var(--space-3)));
9856
9964
  }
9857
- .rt-BaseCard:where(.sm\:rt-r-size-3){
9965
+ .rt-BaseCard:where(.sm\:rt-r-size-4){
9858
9966
  --base-card-padding-top: var(--space-5);
9859
9967
  --base-card-padding-right: var(--space-5);
9860
9968
  --base-card-padding-bottom: var(--space-5);
9861
9969
  --base-card-padding-left: var(--space-5);
9862
- --base-card-border-radius: var(--radius-7);
9970
+ --base-card-border-radius: min(var(--radius-8), calc(var(--radius-4) + var(--space-4)));
9863
9971
  }
9864
- .rt-BaseCard:where(.sm\:rt-r-size-4){
9972
+ .rt-BaseCard:where(.sm\:rt-r-size-5){
9865
9973
  --base-card-padding-top: var(--space-6);
9866
9974
  --base-card-padding-right: var(--space-6);
9867
9975
  --base-card-padding-bottom: var(--space-6);
9868
9976
  --base-card-padding-left: var(--space-6);
9869
- --base-card-border-radius: var(--radius-8);
9870
- }
9871
- .rt-BaseCard:where(.sm\:rt-r-size-5){
9872
- --base-card-padding-top: var(--space-7);
9873
- --base-card-padding-right: var(--space-7);
9874
- --base-card-padding-bottom: var(--space-7);
9875
- --base-card-padding-left: var(--space-7);
9876
- --base-card-border-radius: var(--radius-9);
9977
+ --base-card-border-radius: min(var(--radius-9), calc(var(--radius-5) + var(--space-5)));
9877
9978
  }
9878
9979
  }
9879
9980
  @media (min-width: 1024px){
9880
9981
  .rt-BaseCard:where(.md\:rt-r-size-1){
9982
+ --base-card-padding-top: var(--space-2);
9983
+ --base-card-padding-right: var(--space-2);
9984
+ --base-card-padding-bottom: var(--space-2);
9985
+ --base-card-padding-left: var(--space-2);
9986
+ --base-card-border-radius: min(var(--radius-5), calc(var(--radius-1) + var(--space-1)));
9987
+ }
9988
+ .rt-BaseCard:where(.md\:rt-r-size-2){
9881
9989
  --base-card-padding-top: var(--space-3);
9882
9990
  --base-card-padding-right: var(--space-3);
9883
9991
  --base-card-padding-bottom: var(--space-3);
9884
9992
  --base-card-padding-left: var(--space-3);
9885
- --base-card-border-radius: var(--radius-5);
9993
+ --base-card-border-radius: min(var(--radius-6), calc(var(--radius-2) + var(--space-2)));
9886
9994
  }
9887
- .rt-BaseCard:where(.md\:rt-r-size-2){
9995
+ .rt-BaseCard:where(.md\:rt-r-size-3){
9888
9996
  --base-card-padding-top: var(--space-4);
9889
9997
  --base-card-padding-right: var(--space-4);
9890
9998
  --base-card-padding-bottom: var(--space-4);
9891
9999
  --base-card-padding-left: var(--space-4);
9892
- --base-card-border-radius: var(--radius-6);
10000
+ --base-card-border-radius: min(var(--radius-7), calc(var(--radius-3) + var(--space-3)));
9893
10001
  }
9894
- .rt-BaseCard:where(.md\:rt-r-size-3){
10002
+ .rt-BaseCard:where(.md\:rt-r-size-4){
9895
10003
  --base-card-padding-top: var(--space-5);
9896
10004
  --base-card-padding-right: var(--space-5);
9897
10005
  --base-card-padding-bottom: var(--space-5);
9898
10006
  --base-card-padding-left: var(--space-5);
9899
- --base-card-border-radius: var(--radius-7);
10007
+ --base-card-border-radius: min(var(--radius-8), calc(var(--radius-4) + var(--space-4)));
9900
10008
  }
9901
- .rt-BaseCard:where(.md\:rt-r-size-4){
10009
+ .rt-BaseCard:where(.md\:rt-r-size-5){
9902
10010
  --base-card-padding-top: var(--space-6);
9903
10011
  --base-card-padding-right: var(--space-6);
9904
10012
  --base-card-padding-bottom: var(--space-6);
9905
10013
  --base-card-padding-left: var(--space-6);
9906
- --base-card-border-radius: var(--radius-8);
9907
- }
9908
- .rt-BaseCard:where(.md\:rt-r-size-5){
9909
- --base-card-padding-top: var(--space-7);
9910
- --base-card-padding-right: var(--space-7);
9911
- --base-card-padding-bottom: var(--space-7);
9912
- --base-card-padding-left: var(--space-7);
9913
- --base-card-border-radius: var(--radius-9);
10014
+ --base-card-border-radius: min(var(--radius-9), calc(var(--radius-5) + var(--space-5)));
9914
10015
  }
9915
10016
  }
9916
10017
  @media (min-width: 1280px){
9917
10018
  .rt-BaseCard:where(.lg\:rt-r-size-1){
10019
+ --base-card-padding-top: var(--space-2);
10020
+ --base-card-padding-right: var(--space-2);
10021
+ --base-card-padding-bottom: var(--space-2);
10022
+ --base-card-padding-left: var(--space-2);
10023
+ --base-card-border-radius: min(var(--radius-5), calc(var(--radius-1) + var(--space-1)));
10024
+ }
10025
+ .rt-BaseCard:where(.lg\:rt-r-size-2){
9918
10026
  --base-card-padding-top: var(--space-3);
9919
10027
  --base-card-padding-right: var(--space-3);
9920
10028
  --base-card-padding-bottom: var(--space-3);
9921
10029
  --base-card-padding-left: var(--space-3);
9922
- --base-card-border-radius: var(--radius-5);
10030
+ --base-card-border-radius: min(var(--radius-6), calc(var(--radius-2) + var(--space-2)));
9923
10031
  }
9924
- .rt-BaseCard:where(.lg\:rt-r-size-2){
10032
+ .rt-BaseCard:where(.lg\:rt-r-size-3){
9925
10033
  --base-card-padding-top: var(--space-4);
9926
10034
  --base-card-padding-right: var(--space-4);
9927
10035
  --base-card-padding-bottom: var(--space-4);
9928
10036
  --base-card-padding-left: var(--space-4);
9929
- --base-card-border-radius: var(--radius-6);
10037
+ --base-card-border-radius: min(var(--radius-7), calc(var(--radius-3) + var(--space-3)));
9930
10038
  }
9931
- .rt-BaseCard:where(.lg\:rt-r-size-3){
10039
+ .rt-BaseCard:where(.lg\:rt-r-size-4){
9932
10040
  --base-card-padding-top: var(--space-5);
9933
10041
  --base-card-padding-right: var(--space-5);
9934
10042
  --base-card-padding-bottom: var(--space-5);
9935
10043
  --base-card-padding-left: var(--space-5);
9936
- --base-card-border-radius: var(--radius-7);
10044
+ --base-card-border-radius: min(var(--radius-8), calc(var(--radius-4) + var(--space-4)));
9937
10045
  }
9938
- .rt-BaseCard:where(.lg\:rt-r-size-4){
10046
+ .rt-BaseCard:where(.lg\:rt-r-size-5){
9939
10047
  --base-card-padding-top: var(--space-6);
9940
10048
  --base-card-padding-right: var(--space-6);
9941
10049
  --base-card-padding-bottom: var(--space-6);
9942
10050
  --base-card-padding-left: var(--space-6);
9943
- --base-card-border-radius: var(--radius-8);
9944
- }
9945
- .rt-BaseCard:where(.lg\:rt-r-size-5){
9946
- --base-card-padding-top: var(--space-7);
9947
- --base-card-padding-right: var(--space-7);
9948
- --base-card-padding-bottom: var(--space-7);
9949
- --base-card-padding-left: var(--space-7);
9950
- --base-card-border-radius: var(--radius-9);
10051
+ --base-card-border-radius: min(var(--radius-9), calc(var(--radius-5) + var(--space-5)));
9951
10052
  }
9952
10053
  }
9953
10054
  @media (min-width: 1640px){
9954
10055
  .rt-BaseCard:where(.xl\:rt-r-size-1){
10056
+ --base-card-padding-top: var(--space-2);
10057
+ --base-card-padding-right: var(--space-2);
10058
+ --base-card-padding-bottom: var(--space-2);
10059
+ --base-card-padding-left: var(--space-2);
10060
+ --base-card-border-radius: min(var(--radius-5), calc(var(--radius-1) + var(--space-1)));
10061
+ }
10062
+ .rt-BaseCard:where(.xl\:rt-r-size-2){
9955
10063
  --base-card-padding-top: var(--space-3);
9956
10064
  --base-card-padding-right: var(--space-3);
9957
10065
  --base-card-padding-bottom: var(--space-3);
9958
10066
  --base-card-padding-left: var(--space-3);
9959
- --base-card-border-radius: var(--radius-5);
10067
+ --base-card-border-radius: min(var(--radius-6), calc(var(--radius-2) + var(--space-2)));
9960
10068
  }
9961
- .rt-BaseCard:where(.xl\:rt-r-size-2){
10069
+ .rt-BaseCard:where(.xl\:rt-r-size-3){
9962
10070
  --base-card-padding-top: var(--space-4);
9963
10071
  --base-card-padding-right: var(--space-4);
9964
10072
  --base-card-padding-bottom: var(--space-4);
9965
10073
  --base-card-padding-left: var(--space-4);
9966
- --base-card-border-radius: var(--radius-6);
10074
+ --base-card-border-radius: min(var(--radius-7), calc(var(--radius-3) + var(--space-3)));
9967
10075
  }
9968
- .rt-BaseCard:where(.xl\:rt-r-size-3){
10076
+ .rt-BaseCard:where(.xl\:rt-r-size-4){
9969
10077
  --base-card-padding-top: var(--space-5);
9970
10078
  --base-card-padding-right: var(--space-5);
9971
10079
  --base-card-padding-bottom: var(--space-5);
9972
10080
  --base-card-padding-left: var(--space-5);
9973
- --base-card-border-radius: var(--radius-7);
10081
+ --base-card-border-radius: min(var(--radius-8), calc(var(--radius-4) + var(--space-4)));
9974
10082
  }
9975
- .rt-BaseCard:where(.xl\:rt-r-size-4){
10083
+ .rt-BaseCard:where(.xl\:rt-r-size-5){
9976
10084
  --base-card-padding-top: var(--space-6);
9977
10085
  --base-card-padding-right: var(--space-6);
9978
10086
  --base-card-padding-bottom: var(--space-6);
9979
10087
  --base-card-padding-left: var(--space-6);
9980
- --base-card-border-radius: var(--radius-8);
9981
- }
9982
- .rt-BaseCard:where(.xl\:rt-r-size-5){
9983
- --base-card-padding-top: var(--space-7);
9984
- --base-card-padding-right: var(--space-7);
9985
- --base-card-padding-bottom: var(--space-7);
9986
- --base-card-padding-left: var(--space-7);
9987
- --base-card-border-radius: var(--radius-9);
10088
+ --base-card-border-radius: min(var(--radius-9), calc(var(--radius-5) + var(--space-5)));
9988
10089
  }
9989
10090
  }
9990
10091
  .rt-BaseCard:where(.rt-variant-outline){
@@ -10343,16 +10444,16 @@
10343
10444
  }
10344
10445
  .rt-BaseCard:where(.rt-variant-soft){
10345
10446
  --card-border-width: 0px;
10346
- --card-background-color: var(--gray-2);
10447
+ --card-background-color: var(--gray-3);
10347
10448
  }
10348
10449
  :where([data-panel-background='translucent'], [data-material='translucent']) .rt-BaseCard:where(.rt-variant-soft){
10349
- --card-background-color: color-mix(in srgb, var(--gray-a2), var(--gray-2) 60%);
10450
+ --card-background-color: color-mix(in srgb, var(--gray-a3), var(--gray-3) 60%);
10350
10451
  }
10351
10452
  .rt-BaseCard:where(.rt-variant-soft):where([data-panel-background='solid'], [data-material='solid']){
10352
- --card-background-color: var(--gray-2);
10453
+ --card-background-color: var(--gray-3);
10353
10454
  }
10354
10455
  .rt-BaseCard:where(.rt-variant-soft):where([data-panel-background='translucent'], [data-material='translucent']){
10355
- --card-background-color: color-mix(in srgb, var(--gray-a2), var(--gray-2) 60%);
10456
+ --card-background-color: color-mix(in srgb, var(--gray-a3), var(--gray-3) 60%);
10356
10457
  }
10357
10458
  .rt-BaseCard:where(.rt-variant-soft)::before{
10358
10459
  background-color: var(--card-background-color);
@@ -12411,10 +12512,10 @@
12411
12512
  }
12412
12513
  }
12413
12514
  :where([data-panel-background='translucent']) :is(.rt-BaseMenuContent:where(.rt-variant-solid, .rt-variant-soft) :where(.rt-BaseMenuSubTrigger)){
12414
- transition: background var(--duration-1) var(--ease-1), color var(--duration-2) var(--ease-1);
12515
+ transition: background var(--motion-duration-micro) var(--motion-ease-standard), color var(--motion-duration-small) var(--motion-ease-standard);
12415
12516
  }
12416
12517
  :where([data-panel-background='translucent']) :is(.rt-BaseMenuContent:where(.rt-variant-solid, .rt-variant-soft) :where(.rt-BaseMenuItem)){
12417
- transition: background var(--duration-1) var(--ease-1), color var(--duration-2) var(--ease-1);
12518
+ transition: background var(--motion-duration-micro) var(--motion-ease-standard), color var(--motion-duration-small) var(--motion-ease-standard);
12418
12519
  }
12419
12520
  .rt-BaseMenuContent:where(.rt-variant-solid) :where(.rt-BaseMenuSubTrigger[data-state='open']){
12420
12521
  background-color: var(--gray-3);
@@ -14006,7 +14107,7 @@
14006
14107
  .rt-Image{
14007
14108
  display: block;
14008
14109
  object-fit: var(--object-fit);
14009
- border-radius: var(--radius-4);
14110
+ border-radius: var(--radius-2);
14010
14111
  }
14011
14112
  @media (prefers-reduced-motion: reduce) {
14012
14113
  .rt-Image{
@@ -14024,7 +14125,7 @@
14024
14125
  }
14025
14126
  .rt-Image:where(:any-link, button, label){
14026
14127
  cursor: pointer;
14027
- transition: var(--transition-card), filter var(--duration-2) var(--ease-1);
14128
+ transition: var(--transition-card), filter var(--motion-duration-small) var(--motion-ease-standard);
14028
14129
  }
14029
14130
  @media (hover: hover) {
14030
14131
  .rt-Image:where(:any-link, button, label):where(:hover){
@@ -14041,7 +14142,7 @@
14041
14142
  }
14042
14143
  :where(:any-link, button, label){
14043
14144
  cursor: pointer;
14044
- transition: var(--transition-card), filter var(--duration-2) var(--ease-1);
14145
+ transition: var(--transition-card), filter var(--motion-duration-small) var(--motion-ease-standard);
14045
14146
  }
14046
14147
  @media (hover: hover) {
14047
14148
  :where(:any-link, button, label):where(:hover){
@@ -15082,6 +15183,7 @@
15082
15183
  --inset-padding-right: var(--popover-content-padding);
15083
15184
  --inset-padding-bottom: var(--popover-content-padding);
15084
15185
  --inset-padding-left: var(--popover-content-padding);
15186
+ --popover-toolbar-padding: var(--popover-content-padding);
15085
15187
  padding: var(--popover-content-padding);
15086
15188
  box-sizing: border-box;
15087
15189
  transform-origin: var(--radix-popover-content-transform-origin);
@@ -15101,110 +15203,173 @@
15101
15203
  -webkit-backdrop-filter: var(--backdrop-filter-panel);
15102
15204
  backdrop-filter: var(--backdrop-filter-panel);
15103
15205
  }
15206
+ .rt-PopoverContent:where([data-has-toolbar]){
15207
+ padding-top: var(--popover-toolbar-offset, var(--popover-content-padding));
15208
+ }
15209
+ .rt-PopoverToolbar{
15210
+ position: absolute;
15211
+ top: 0;
15212
+ left: 0;
15213
+ right: 0;
15214
+ z-index: 1;
15215
+ display: grid;
15216
+ grid-template-columns: 1fr auto 1fr;
15217
+ align-items: center;
15218
+ column-gap: var(--space-1);
15219
+ padding: var(--popover-toolbar-padding);
15220
+ background-color: var(--color-panel);
15221
+ }
15222
+ .rt-PopoverToolbarSection{
15223
+ display: flex;
15224
+ align-items: center;
15225
+ gap: var(--space-2);
15226
+ }
15227
+ .rt-PopoverToolbarLeft{
15228
+ justify-self: start;
15229
+ }
15230
+ .rt-PopoverToolbarCenter{
15231
+ grid-column: 2;
15232
+ justify-self: center;
15233
+ min-width: 0;
15234
+ text-align: center;
15235
+ }
15236
+ .rt-PopoverToolbarRight{
15237
+ justify-self: end;
15238
+ }
15239
+ .rt-PopoverToolbarTitle{
15240
+ display: inline-block;
15241
+ white-space: nowrap;
15242
+ overflow: hidden;
15243
+ text-overflow: ellipsis;
15244
+ }
15104
15245
  .rt-PopoverContent:where(.rt-r-size-1){
15105
- --popover-content-padding: var(--space-3);
15106
- border-radius: var(--radius-3);
15246
+ --popover-content-padding: var(--space-5);
15247
+ --popover-toolbar-padding: var(--space-2);
15248
+ border-radius: min(var(--radius-5), calc(var(--radius-1) + var(--space-2)));
15107
15249
  }
15108
15250
  .rt-PopoverContent:where(.rt-r-size-2){
15109
- --popover-content-padding: var(--space-4);
15110
- border-radius: var(--radius-4);
15251
+ --popover-content-padding: var(--space-6);
15252
+ --popover-toolbar-padding: var(--space-2);
15253
+ border-radius: min(var(--radius-6), calc(var(--radius-2) + var(--space-3)));
15111
15254
  }
15112
15255
  .rt-PopoverContent:where(.rt-r-size-3){
15113
- --popover-content-padding: var(--space-5);
15114
- border-radius: var(--radius-5);
15256
+ --popover-content-padding: var(--space-7);
15257
+ --popover-toolbar-padding: var(--space-3);
15258
+ border-radius: min(var(--radius-7), calc(var(--radius-3) + var(--space-4)));
15115
15259
  }
15116
15260
  .rt-PopoverContent:where(.rt-r-size-4){
15117
- --popover-content-padding: var(--space-6);
15118
- border-radius: var(--radius-6);
15261
+ --popover-content-padding: var(--space-8);
15262
+ --popover-toolbar-padding: var(--space-4);
15263
+ border-radius: min(var(--radius-8), calc(var(--radius-4) + var(--space-5)));
15119
15264
  }
15120
15265
  @media (min-width: 520px){
15121
15266
  .rt-PopoverContent:where(.xs\:rt-r-size-1){
15122
- --popover-content-padding: var(--space-3);
15123
- border-radius: var(--radius-3);
15267
+ --popover-content-padding: var(--space-5);
15268
+ --popover-toolbar-padding: var(--space-2);
15269
+ border-radius: min(var(--radius-5), calc(var(--radius-1) + var(--space-2)));
15124
15270
  }
15125
15271
  .rt-PopoverContent:where(.xs\:rt-r-size-2){
15126
- --popover-content-padding: var(--space-4);
15127
- border-radius: var(--radius-4);
15272
+ --popover-content-padding: var(--space-6);
15273
+ --popover-toolbar-padding: var(--space-2);
15274
+ border-radius: min(var(--radius-6), calc(var(--radius-2) + var(--space-3)));
15128
15275
  }
15129
15276
  .rt-PopoverContent:where(.xs\:rt-r-size-3){
15130
- --popover-content-padding: var(--space-5);
15131
- border-radius: var(--radius-5);
15277
+ --popover-content-padding: var(--space-7);
15278
+ --popover-toolbar-padding: var(--space-3);
15279
+ border-radius: min(var(--radius-7), calc(var(--radius-3) + var(--space-4)));
15132
15280
  }
15133
15281
  .rt-PopoverContent:where(.xs\:rt-r-size-4){
15134
- --popover-content-padding: var(--space-6);
15135
- border-radius: var(--radius-6);
15282
+ --popover-content-padding: var(--space-8);
15283
+ --popover-toolbar-padding: var(--space-4);
15284
+ border-radius: min(var(--radius-8), calc(var(--radius-4) + var(--space-5)));
15136
15285
  }
15137
15286
  }
15138
15287
  @media (min-width: 768px){
15139
15288
  .rt-PopoverContent:where(.sm\:rt-r-size-1){
15140
- --popover-content-padding: var(--space-3);
15141
- border-radius: var(--radius-3);
15289
+ --popover-content-padding: var(--space-5);
15290
+ --popover-toolbar-padding: var(--space-2);
15291
+ border-radius: min(var(--radius-5), calc(var(--radius-1) + var(--space-2)));
15142
15292
  }
15143
15293
  .rt-PopoverContent:where(.sm\:rt-r-size-2){
15144
- --popover-content-padding: var(--space-4);
15145
- border-radius: var(--radius-4);
15294
+ --popover-content-padding: var(--space-6);
15295
+ --popover-toolbar-padding: var(--space-2);
15296
+ border-radius: min(var(--radius-6), calc(var(--radius-2) + var(--space-3)));
15146
15297
  }
15147
15298
  .rt-PopoverContent:where(.sm\:rt-r-size-3){
15148
- --popover-content-padding: var(--space-5);
15149
- border-radius: var(--radius-5);
15299
+ --popover-content-padding: var(--space-7);
15300
+ --popover-toolbar-padding: var(--space-3);
15301
+ border-radius: min(var(--radius-7), calc(var(--radius-3) + var(--space-4)));
15150
15302
  }
15151
15303
  .rt-PopoverContent:where(.sm\:rt-r-size-4){
15152
- --popover-content-padding: var(--space-6);
15153
- border-radius: var(--radius-6);
15304
+ --popover-content-padding: var(--space-8);
15305
+ --popover-toolbar-padding: var(--space-4);
15306
+ border-radius: min(var(--radius-8), calc(var(--radius-4) + var(--space-5)));
15154
15307
  }
15155
15308
  }
15156
15309
  @media (min-width: 1024px){
15157
15310
  .rt-PopoverContent:where(.md\:rt-r-size-1){
15158
- --popover-content-padding: var(--space-3);
15159
- border-radius: var(--radius-3);
15311
+ --popover-content-padding: var(--space-5);
15312
+ --popover-toolbar-padding: var(--space-2);
15313
+ border-radius: min(var(--radius-5), calc(var(--radius-1) + var(--space-2)));
15160
15314
  }
15161
15315
  .rt-PopoverContent:where(.md\:rt-r-size-2){
15162
- --popover-content-padding: var(--space-4);
15163
- border-radius: var(--radius-4);
15316
+ --popover-content-padding: var(--space-6);
15317
+ --popover-toolbar-padding: var(--space-2);
15318
+ border-radius: min(var(--radius-6), calc(var(--radius-2) + var(--space-3)));
15164
15319
  }
15165
15320
  .rt-PopoverContent:where(.md\:rt-r-size-3){
15166
- --popover-content-padding: var(--space-5);
15167
- border-radius: var(--radius-5);
15321
+ --popover-content-padding: var(--space-7);
15322
+ --popover-toolbar-padding: var(--space-3);
15323
+ border-radius: min(var(--radius-7), calc(var(--radius-3) + var(--space-4)));
15168
15324
  }
15169
15325
  .rt-PopoverContent:where(.md\:rt-r-size-4){
15170
- --popover-content-padding: var(--space-6);
15171
- border-radius: var(--radius-6);
15326
+ --popover-content-padding: var(--space-8);
15327
+ --popover-toolbar-padding: var(--space-4);
15328
+ border-radius: min(var(--radius-8), calc(var(--radius-4) + var(--space-5)));
15172
15329
  }
15173
15330
  }
15174
15331
  @media (min-width: 1280px){
15175
15332
  .rt-PopoverContent:where(.lg\:rt-r-size-1){
15176
- --popover-content-padding: var(--space-3);
15177
- border-radius: var(--radius-3);
15333
+ --popover-content-padding: var(--space-5);
15334
+ --popover-toolbar-padding: var(--space-2);
15335
+ border-radius: min(var(--radius-5), calc(var(--radius-1) + var(--space-2)));
15178
15336
  }
15179
15337
  .rt-PopoverContent:where(.lg\:rt-r-size-2){
15180
- --popover-content-padding: var(--space-4);
15181
- border-radius: var(--radius-4);
15338
+ --popover-content-padding: var(--space-6);
15339
+ --popover-toolbar-padding: var(--space-2);
15340
+ border-radius: min(var(--radius-6), calc(var(--radius-2) + var(--space-3)));
15182
15341
  }
15183
15342
  .rt-PopoverContent:where(.lg\:rt-r-size-3){
15184
- --popover-content-padding: var(--space-5);
15185
- border-radius: var(--radius-5);
15343
+ --popover-content-padding: var(--space-7);
15344
+ --popover-toolbar-padding: var(--space-3);
15345
+ border-radius: min(var(--radius-7), calc(var(--radius-3) + var(--space-4)));
15186
15346
  }
15187
15347
  .rt-PopoverContent:where(.lg\:rt-r-size-4){
15188
- --popover-content-padding: var(--space-6);
15189
- border-radius: var(--radius-6);
15348
+ --popover-content-padding: var(--space-8);
15349
+ --popover-toolbar-padding: var(--space-4);
15350
+ border-radius: min(var(--radius-8), calc(var(--radius-4) + var(--space-5)));
15190
15351
  }
15191
15352
  }
15192
15353
  @media (min-width: 1640px){
15193
15354
  .rt-PopoverContent:where(.xl\:rt-r-size-1){
15194
- --popover-content-padding: var(--space-3);
15195
- border-radius: var(--radius-3);
15355
+ --popover-content-padding: var(--space-5);
15356
+ --popover-toolbar-padding: var(--space-2);
15357
+ border-radius: min(var(--radius-5), calc(var(--radius-1) + var(--space-2)));
15196
15358
  }
15197
15359
  .rt-PopoverContent:where(.xl\:rt-r-size-2){
15198
- --popover-content-padding: var(--space-4);
15199
- border-radius: var(--radius-4);
15360
+ --popover-content-padding: var(--space-6);
15361
+ --popover-toolbar-padding: var(--space-2);
15362
+ border-radius: min(var(--radius-6), calc(var(--radius-2) + var(--space-3)));
15200
15363
  }
15201
15364
  .rt-PopoverContent:where(.xl\:rt-r-size-3){
15202
- --popover-content-padding: var(--space-5);
15203
- border-radius: var(--radius-5);
15365
+ --popover-content-padding: var(--space-7);
15366
+ --popover-toolbar-padding: var(--space-3);
15367
+ border-radius: min(var(--radius-7), calc(var(--radius-3) + var(--space-4)));
15204
15368
  }
15205
15369
  .rt-PopoverContent:where(.xl\:rt-r-size-4){
15206
- --popover-content-padding: var(--space-6);
15207
- border-radius: var(--radius-6);
15370
+ --popover-content-padding: var(--space-8);
15371
+ --popover-toolbar-padding: var(--space-4);
15372
+ border-radius: min(var(--radius-8), calc(var(--radius-4) + var(--space-5)));
15208
15373
  }
15209
15374
  }
15210
15375
  .rt-ProgressRoot{
@@ -16159,6 +16324,103 @@
16159
16324
  .rt-RadioGroupItemInner{
16160
16325
  min-width: 0;
16161
16326
  }
16327
+ :where(.rt-SheetContent){
16328
+ position: fixed !important;
16329
+ width: var(--width, 90vw) !important;
16330
+ max-width: var(--max-width, 100vw) !important;
16331
+ height: 100vh !important;
16332
+ max-height: 100vh !important;
16333
+ margin: 0 !important;
16334
+ border-radius: 0 !important;
16335
+ will-change: transform;
16336
+ }
16337
+ :where(.rt-SheetContent[data-side='start']){
16338
+ top: 0 !important;
16339
+ bottom: 0 !important;
16340
+ left: 0 !important;
16341
+ right: auto !important;
16342
+ margin: 0 !important;
16343
+ border-start-start-radius: 0;
16344
+ border-end-start-radius: 0;
16345
+ }
16346
+ :where(.rt-SheetContent[data-side='end']){
16347
+ top: 0 !important;
16348
+ bottom: 0 !important;
16349
+ right: 0 !important;
16350
+ left: auto !important;
16351
+ margin: 0 !important;
16352
+ border-start-end-radius: 0;
16353
+ border-end-end-radius: 0;
16354
+ }
16355
+ :where(.rt-SheetContent[data-side='top']){
16356
+ top: 0 !important;
16357
+ left: 0 !important;
16358
+ right: 0 !important;
16359
+ bottom: auto !important;
16360
+ width: auto !important;
16361
+ max-width: none !important;
16362
+ height: var(--height, 75vh) !important;
16363
+ margin: 0 !important;
16364
+ border-start-start-radius: 0;
16365
+ border-start-end-radius: 0;
16366
+ }
16367
+ :where(.rt-SheetContent[data-side='bottom']){
16368
+ bottom: 0 !important;
16369
+ left: 0 !important;
16370
+ right: 0 !important;
16371
+ top: auto !important;
16372
+ width: auto !important;
16373
+ max-width: none !important;
16374
+ height: var(--height, 75vh) !important;
16375
+ margin: 0 !important;
16376
+ border-end-start-radius: 0;
16377
+ border-end-end-radius: 0;
16378
+ }
16379
+ :where(.rt-SheetOverlay)::before{
16380
+ opacity: 1;
16381
+ }
16382
+ @media (prefers-reduced-motion: no-preference) {
16383
+ .rt-SheetContent:where([data-state='open']){
16384
+ animation-duration: var(--motion-duration-medium);
16385
+ animation-timing-function: var(--motion-spring-snappy);
16386
+ animation-fill-mode: both;
16387
+ }
16388
+ .rt-SheetContent:where([data-state='closed']){
16389
+ opacity: 1;
16390
+ animation-duration: var(--motion-duration-small);
16391
+ animation-timing-function: var(--motion-spring-snappy);
16392
+ animation-fill-mode: both;
16393
+ }
16394
+ .rt-SheetContent:where([data-state='open'][data-side='start']){
16395
+ animation-name: rt-sheet-open-from-start, rt-fade-in !important;
16396
+ }
16397
+ .rt-SheetContent:where([data-state='closed'][data-side='start']){
16398
+ animation-name: rt-sheet-close-to-start, rt-fade-out !important;
16399
+ }
16400
+ .rt-SheetContent:where([data-state='open'][data-side='end']){
16401
+ animation-name: rt-sheet-open-from-end, rt-fade-in !important;
16402
+ }
16403
+ .rt-SheetContent:where([data-state='closed'][data-side='end']){
16404
+ animation-name: rt-sheet-close-to-end, rt-fade-out !important;
16405
+ }
16406
+ .rt-SheetContent:where([data-state='open'][data-side='top']){
16407
+ animation-name: rt-sheet-open-from-top, rt-fade-in !important;
16408
+ }
16409
+ .rt-SheetContent:where([data-state='closed'][data-side='top']){
16410
+ animation-name: rt-sheet-close-to-top, rt-fade-out !important;
16411
+ }
16412
+ .rt-SheetContent:where([data-state='open'][data-side='bottom']){
16413
+ animation-name: rt-sheet-open-from-bottom, rt-fade-in !important;
16414
+ }
16415
+ .rt-SheetContent:where([data-state='closed'][data-side='bottom']){
16416
+ animation-name: rt-sheet-close-to-bottom, rt-fade-out !important;
16417
+ }
16418
+ }
16419
+ @media (prefers-reduced-motion: reduce) {
16420
+ .rt-SheetContent{
16421
+ animation: none !important;
16422
+ }
16423
+ }
16162
16424
  .rt-ScrollAreaRoot{
16163
16425
  display: flex;
16164
16426
  flex-direction: column;
@@ -16194,8 +16456,8 @@
16194
16456
  touch-action: none;
16195
16457
  background-color: var(--gray-a3);
16196
16458
  border-radius: var(--scrollarea-scrollbar-border-radius);
16197
- animation-duration: 120ms;
16198
- animation-timing-function: ease-out;
16459
+ animation-duration: var(--motion-duration-micro);
16460
+ animation-timing-function: var(--motion-ease-standard);
16199
16461
  }
16200
16462
  .rt-ScrollAreaScrollbar:where([data-orientation='vertical']){
16201
16463
  flex-direction: column;
@@ -16217,7 +16479,7 @@
16217
16479
  position: relative;
16218
16480
  background-color: var(--gray-a8);
16219
16481
  border-radius: inherit;
16220
- transition: background-color 100ms;
16482
+ transition: background-color var(--motion-duration-micro) var(--motion-ease-standard);
16221
16483
  }
16222
16484
  .rt-ScrollAreaThumb::before{
16223
16485
  content: '';
@@ -16413,7 +16675,7 @@
16413
16675
  margin-right: calc(-1 * var(--border-width-standard) * 0.5);
16414
16676
  width: var(--border-width-standard);
16415
16677
  background-color: var(--gray-a4);
16416
- transition: opacity calc(0.8 * var(--segmented-control-transition-duration)) var(--ease-1);
16678
+ transition: opacity calc(0.8 * var(--segmented-control-transition-duration)) var(--motion-ease-standard);
16417
16679
  }
16418
16680
  :where(.rt-SegmentedControlItem:first-child) .rt-SegmentedControlItemSeparator,
16419
16681
  :where(.rt-SegmentedControlItem:where([data-state='on'], :focus-visible)) .rt-SegmentedControlItemSeparator,
@@ -16432,7 +16694,7 @@
16432
16694
  left: 0;
16433
16695
  height: 100%;
16434
16696
  pointer-events: none;
16435
- transition: transform var(--segmented-control-transition-duration) var(--ease-3);
16697
+ transition: transform var(--segmented-control-transition-duration) var(--motion-spring-snappy);
16436
16698
  }
16437
16699
  .rt-SegmentedControlIndicator::before{
16438
16700
  inset: var(--border-width-standard);
@@ -18547,7 +18809,7 @@
18547
18809
  justify-content: space-between;
18548
18810
  }
18549
18811
  .rt-SidebarMenuSubTrigger :where(.rt-SidebarMenuSubTriggerIcon){
18550
- transition: transform 0.2s ease;
18812
+ transition: transform var(--motion-duration-micro) var(--motion-ease-standard);
18551
18813
  }
18552
18814
  .rt-SidebarMenuSubTrigger:where([data-state="open"]) :where(.rt-SidebarMenuSubTriggerIcon){
18553
18815
  transform: rotate(90deg);
@@ -18559,10 +18821,10 @@
18559
18821
  overflow: visible;
18560
18822
  }
18561
18823
  .rt-SidebarMenuSubContent:where([data-state="open"]){
18562
- animation: rt-sidebar-slide-down 200ms ease-out;
18824
+ animation: rt-sidebar-slide-down var(--motion-duration-small) var(--motion-ease-standard);
18563
18825
  }
18564
18826
  .rt-SidebarMenuSubContent:where([data-state="closed"]){
18565
- animation: rt-sidebar-slide-up 200ms ease-out;
18827
+ animation: rt-sidebar-slide-up var(--motion-duration-small) var(--motion-ease-standard);
18566
18828
  }
18567
18829
  @keyframes rt-sidebar-slide-down {
18568
18830
  from{
@@ -18639,6 +18901,43 @@
18639
18901
  margin-top: calc(var(--space-1) / 2);
18640
18902
  margin-bottom: calc(var(--space-1) / 2);
18641
18903
  }
18904
+ .rt-ShellSidebarRail :where(.rt-SidebarContent),
18905
+ :where(.rt-ShellSidebar[data-state='rail'] .rt-SidebarContent){
18906
+ padding: var(--space-2);
18907
+ }
18908
+ .rt-ShellSidebarRail :where(.rt-SidebarMenuButton),
18909
+ :where(.rt-ShellSidebar[data-state='rail'] .rt-SidebarMenuButton){
18910
+ justify-content: center;
18911
+ align-items: center;
18912
+ flex-direction: column;
18913
+ gap: var(--space-1);
18914
+ padding: var(--space-2) var(--space-1);
18915
+ }
18916
+ .rt-ShellSidebarRail :where(.rt-SidebarMenuBadge),
18917
+ .rt-ShellSidebarRail :where(.rt-SidebarMenuShortcut),
18918
+ :where(.rt-ShellSidebar[data-state='rail'] .rt-SidebarMenuBadge),
18919
+ :where(.rt-ShellSidebar[data-state='rail'] .rt-SidebarMenuShortcut){
18920
+ display: none;
18921
+ }
18922
+ .rt-ShellSidebarRail :where(.rt-SidebarGroupLabel),
18923
+ :where(.rt-ShellSidebar[data-state='rail'] .rt-SidebarGroupLabel){
18924
+ display: block;
18925
+ text-align: center;
18926
+ font-size: var(--font-size-0);
18927
+ line-height: var(--line-height-0);
18928
+ color: var(--gray-a9);
18929
+ font-weight: var(--font-weight-medium);
18930
+ }
18931
+ .rt-ShellSidebarRail :where(.rt-SidebarMenuSubTriggerIcon),
18932
+ :where(.rt-ShellSidebar[data-state='rail'] .rt-SidebarMenuSubTriggerIcon){
18933
+ display: none;
18934
+ }
18935
+ .rt-ShellSidebarRail :where(.rt-SidebarMenuSubList),
18936
+ :where(.rt-ShellSidebar[data-state='rail'] .rt-SidebarMenuSubList){
18937
+ padding-left: 0;
18938
+ border-left: none;
18939
+ margin-left: 0;
18940
+ }
18642
18941
  .rt-SidebarContainer:where(.rt-variant-outline){
18643
18942
  background-color: var(--color-panel);
18644
18943
  -webkit-backdrop-filter: var(--backdrop-filter-panel);
@@ -18855,7 +19154,7 @@
18855
19154
  -webkit-user-select: none;
18856
19155
  user-select: none;
18857
19156
  justify-content: flex-start;
18858
- transition: background var(--duration-2) var(--ease-1), box-shadow var(--duration-2) var(--ease-1), filter var(--duration-2) var(--ease-1);
19157
+ transition: background var(--motion-duration-small) var(--motion-ease-standard), box-shadow var(--motion-duration-small) var(--motion-ease-standard), filter var(--motion-duration-small) var(--motion-ease-standard);
18859
19158
  }
18860
19159
  .rt-SidebarHeader :where(.rt-SidebarMenuButton):where(:focus-visible), .rt-SidebarFooter :where(.rt-SidebarMenuButton):where(:focus-visible){
18861
19160
  outline: 2px solid var(--focus-8);
@@ -19419,172 +19718,100 @@
19419
19718
  .rt-SidebarHeader:where(.rt-menu-variant-soft) :where(.rt-SidebarMenuButton[data-active]) :where(.rt-Text[data-accent-color='gray'], [data-accent-color='gray']:not(.rt-Badge)), .rt-SidebarContent:where(.rt-menu-variant-soft) :where(.rt-SidebarMenuButton[data-active]) :where(.rt-Text[data-accent-color='gray'], [data-accent-color='gray']:not(.rt-Badge)), .rt-SidebarFooter:where(.rt-menu-variant-soft) :where(.rt-SidebarMenuButton[data-active]) :where(.rt-Text[data-accent-color='gray'], [data-accent-color='gray']:not(.rt-Badge)){
19420
19719
  color: var(--gray-11) !important;
19421
19720
  }
19422
- .rt-SidebarRoot:where([data-collapsible="icon"]){
19423
- transition: none;
19424
- overflow: visible;
19425
- flex-shrink: 0;
19426
- }
19427
- .rt-SidebarRoot:where([data-collapsible="icon"][data-state="collapsed"]){
19428
- opacity: 1;
19429
- pointer-events: auto;
19430
- }
19431
- .rt-SidebarRoot:where([data-collapsible="icon"][data-state="collapsed"]):where(.rt-r-size-1){
19432
- width: var(--sidebar-icon-width-1);
19433
- min-width: var(--sidebar-icon-width-1);
19434
- --sidebar-group-label-width: calc(var(--sidebar-icon-width-1) - (var(--space-2) * 2));
19435
- --sidebar-button-label-width: calc(var(--sidebar-group-label-width) - (var(--space-1) * 2));
19721
+ .rt-ShellRoot{
19722
+ inline-size: 100%;
19723
+ display: flex;
19724
+ flex-direction: column;
19725
+ block-size: 100vh;
19726
+ --shell-sidebar-rail-width: var(--space-9, 64px);
19727
+ --shell-sidebar-panel-width: 288px;
19728
+ --shell-sidebar-combined-width: calc(var(--shell-sidebar-rail-width) + var(--shell-sidebar-panel-width));
19729
+ --shell-overlay-width: auto;
19436
19730
  }
19437
- .rt-SidebarRoot:where([data-collapsible="icon"][data-state="collapsed"]):where(.rt-r-size-2){
19438
- width: var(--sidebar-icon-width-2);
19439
- min-width: var(--sidebar-icon-width-2);
19440
- --sidebar-group-label-width: calc(var(--sidebar-icon-width-2) - (var(--space-2) * 2));
19441
- --sidebar-button-label-width: calc(var(--sidebar-group-label-width) - (var(--space-1) * 2));
19731
+ @supports (height: 100dvh) {
19732
+ .rt-ShellRoot{
19733
+ block-size: 100dvh;
19734
+ }
19442
19735
  }
19443
- .rt-SidebarRoot:where([data-collapsible="icon"][data-state="expanded"]){
19444
- width: var(--sidebar-width);
19445
- min-width: var(--sidebar-width);
19446
- opacity: 1;
19447
- pointer-events: auto;
19736
+ .rt-ShellHeader{
19737
+ position: sticky;
19738
+ top: 0;
19739
+ inset-inline: 0;
19740
+ z-index: var(--shell-z-header, 10);
19741
+ block-size: var(--shell-header-height, 64px);
19742
+ display: flex;
19743
+ align-items: center;
19744
+ background-color: var(--color-panel);
19448
19745
  }
19449
- .rt-SidebarContainer:where([data-collapsible="icon"]){
19450
- width: 100%;
19451
- min-width: 0;
19452
- flex-shrink: 0;
19746
+ .rt-ShellBody{
19747
+ display: flex;
19748
+ flex-direction: row;
19749
+ align-items: stretch;
19750
+ inline-size: 100%;
19751
+ flex: 1 1 auto;
19752
+ block-size: auto;
19753
+ min-block-size: 0;
19754
+ min-inline-size: 0;
19755
+ overflow: hidden;
19453
19756
  }
19454
- .rt-SidebarContent:where([data-collapsible="icon"]){
19455
- width: 100%;
19456
- min-width: 0;
19457
- flex-shrink: 0;
19757
+ .rt-ShellSidebar{
19758
+ display: flex;
19759
+ flex-direction: row;
19760
+ align-items: stretch;
19761
+ block-size: 100%;
19762
+ min-block-size: 0;
19458
19763
  }
19459
- .rt-SidebarRoot:where([data-collapsible="icon"][data-state="collapsed"]) :where(.rt-SidebarMenuButton){
19460
- justify-content: center;
19764
+ .rt-ShellSidebarRail{
19765
+ display: flex;
19461
19766
  flex-direction: column;
19462
- padding: var(--space-2) var(--space-1);
19463
- gap: var(--space-1);
19464
- min-height: auto;
19465
- }
19466
- .rt-SidebarRoot:where([data-collapsible="icon"][data-state="collapsed"]) :where(.rt-SidebarMenuButton) :where(span){
19467
- display: block;
19468
- font-size: var(--font-size-0);
19469
- line-height: var(--line-height-0);
19470
- color: var(--gray-a10);
19471
- text-align: center;
19472
- font-weight: var(--font-weight-medium);
19473
- max-width: 100%;
19767
+ align-items: center;
19768
+ gap: var(--space-2);
19769
+ padding-block: var(--space-2);
19770
+ block-size: 100%;
19771
+ min-block-size: 0;
19474
19772
  overflow: hidden;
19475
- text-overflow: ellipsis;
19476
- white-space: nowrap;
19773
+ opacity: 0;
19774
+ transition: inline-size var(--motion-duration-small) var(--motion-ease-standard), opacity var(--motion-duration-small) var(--motion-ease-standard) var(--motion-duration-small);
19477
19775
  }
19478
- .rt-SidebarRoot:where([data-collapsible="icon"][data-state="collapsed"]) :where(.rt-SidebarGroupLabel){
19479
- max-width: var(--sidebar-group-label-width);
19776
+ .rt-ShellSidebarPanel{
19480
19777
  display: block;
19481
- text-align: center;
19482
- min-width: 0;
19483
- min-height: auto;
19484
- max-width: var(--sidebar-group-label-width);
19485
- font-size: var(--font-size-0);
19486
- line-height: var(--line-height-0);
19487
- color: var(--gray-a9);
19488
- font-weight: var(--font-weight-medium);
19489
- padding: var(--space-1) var(--space-1);
19490
- margin: var(--space-2) 0 var(--space-1) 0;
19778
+ opacity: 0;
19779
+ transition: inline-size var(--motion-duration-small) var(--motion-ease-standard), opacity var(--motion-duration-small) var(--motion-ease-standard) var(--motion-duration-small);
19780
+ block-size: 100%;
19781
+ min-block-size: 0;
19491
19782
  overflow: hidden;
19492
- text-overflow: ellipsis;
19493
- white-space: nowrap;
19494
19783
  }
19495
- .rt-SidebarRoot:where([data-collapsible="icon"][data-state="collapsed"]) :where(.rt-SidebarMenuButton span){
19496
- max-width: var(--sidebar-button-label-width);
19497
- min-width: 0;
19784
+ .rt-ShellSidebarSingle{
19785
+ opacity: 0;
19786
+ transition: inline-size var(--motion-duration-small) var(--motion-ease-standard), opacity var(--motion-duration-small) var(--motion-ease-standard) var(--motion-duration-small);
19787
+ block-size: 100%;
19498
19788
  overflow: hidden;
19499
- text-overflow: ellipsis;
19500
- white-space: nowrap;
19501
- color: var(--gray-a12);
19502
- font-weight: var(--font-weight-medium);
19503
- }
19504
- .rt-SidebarRoot.rt-menu-variant-solid:where([data-collapsible="icon"][data-state="collapsed"]) :where(.rt-SidebarMenuButton[data-highlighted] span),
19505
- .rt-SidebarRoot.rt-menu-variant-solid:where([data-collapsible="icon"][data-state="collapsed"]) :where(.rt-SidebarMenuButton[data-active] span){
19506
- color: var(--accent-contrast) !important;
19507
- }
19508
- :where(.rt-SidebarGroup:first-child) :is(.rt-SidebarRoot:where([data-collapsible="icon"][data-state="collapsed"]) :where(.rt-SidebarGroupLabel)){
19509
- margin-top: 0;
19510
- }
19511
- .rt-SidebarRoot:where([data-collapsible="icon"][data-state="collapsed"]) :where(.rt-SidebarMenuBadge),
19512
- .rt-SidebarRoot:where([data-collapsible="icon"][data-state="collapsed"]) :where(.rt-SidebarMenuShortcut){
19513
- display: none;
19514
- }
19515
- .rt-SidebarRoot:where([data-collapsible="icon"][data-state="collapsed"]) :where(.rt-SidebarMenuSubTriggerIcon){
19516
- display: none;
19517
- }
19518
- .rt-SidebarRoot:where([data-collapsible="icon"][data-state="collapsed"]) :where(.rt-SidebarMenuSubList){
19519
- padding-left: 0;
19520
- border-left: none;
19521
- margin-left: 0;
19522
- }
19523
- .rt-SidebarRoot:where([data-collapsible="icon"][data-state="collapsed"]) :where(.rt-SidebarMenu){
19524
- padding: var(--space-2);
19525
- }
19526
- .rt-SidebarRoot:where([data-collapsible="icon"][data-state="collapsed"]):where(.rt-r-size-1) :where(.rt-SidebarMenuButton svg){
19527
- width: var(--content-icon-size-2) !important;
19528
- height: var(--content-icon-size-2) !important;
19529
- color: currentColor !important;
19530
- }
19531
- .rt-SidebarRoot:where([data-collapsible="icon"][data-state="collapsed"]):where(.rt-r-size-2) :where(.rt-SidebarMenuButton svg){
19532
- width: var(--content-icon-size-3) !important;
19533
- height: var(--content-icon-size-3) !important;
19534
- color: currentColor !important;
19535
- }
19536
- .rt-SidebarRoot:where([data-collapsible="icon"][data-type="floating"]){
19537
- transition: none;
19538
- overflow: visible;
19539
- flex-shrink: 0;
19540
19789
  }
19541
- .rt-SidebarRoot:where([data-collapsible="icon"][data-type="floating"][data-state="collapsed"]){
19542
- opacity: 1;
19543
- pointer-events: auto;
19544
- margin: var(--space-2);
19545
- }
19546
- .rt-SidebarRoot:where([data-collapsible="icon"][data-type="floating"][data-state="collapsed"]):where(.rt-r-size-1){
19547
- width: var(--sidebar-icon-width-1);
19548
- min-width: var(--sidebar-icon-width-1);
19549
- }
19550
- .rt-SidebarRoot:where([data-collapsible="icon"][data-type="floating"][data-state="collapsed"]):where(.rt-r-size-2){
19551
- width: var(--sidebar-icon-width-2);
19552
- min-width: var(--sidebar-icon-width-2);
19790
+ :where(.rt-ShellSidebarRail):not([data-visible]),
19791
+ :where(.rt-ShellSidebarPanel):not([data-visible]),
19792
+ :where(.rt-ShellSidebarSingle):not([data-visible]){
19793
+ opacity: 0;
19794
+ transition: opacity var(--motion-duration-small) var(--motion-ease-standard), inline-size var(--motion-duration-small) var(--motion-ease-standard) var(--motion-duration-small);
19553
19795
  }
19554
- .rt-SidebarRoot:where([data-collapsible="icon"][data-type="floating"][data-state="expanded"]){
19555
- width: var(--sidebar-width);
19556
- min-width: var(--sidebar-width);
19796
+ [data-visible]{
19557
19797
  opacity: 1;
19558
- pointer-events: auto;
19559
- margin: var(--space-2);
19560
- }
19561
- @media (max-width: 768px) {
19562
- .rt-SidebarRoot:where([data-collapsible="icon"]){
19563
- display: none;
19564
- }
19565
- .rt-SidebarRoot:where([data-collapsible="icon"][data-state="expanded"]){
19566
- display: flex;
19567
- position: fixed;
19568
- top: 0;
19569
- left: 0;
19570
- height: 100vh;
19571
- width: var(--sidebar-width);
19572
- z-index: 50;
19573
- box-shadow: var(--shadow-6);
19574
- }
19575
19798
  }
19576
19799
  @media (prefers-reduced-motion: reduce) {
19577
- .rt-SidebarRoot:where([data-collapsible="icon"]){
19800
+ .rt-ShellSidebarRail,
19801
+ .rt-ShellSidebarPanel,
19802
+ .rt-ShellSidebarSingle{
19578
19803
  transition: none;
19579
19804
  }
19580
19805
  }
19581
- @media (forced-colors: active) {
19582
- :where(.rt-SidebarMenuButton):focus-visible{
19583
- outline: 2px solid CanvasText;
19584
- }
19585
- :where(.rt-SidebarTrigger):focus-visible{
19586
- outline: 2px solid CanvasText;
19587
- }
19806
+ .rt-ShellContent{
19807
+ flex: 1 1 auto;
19808
+ block-size: 100%;
19809
+ min-block-size: 0;
19810
+ min-inline-size: 0;
19811
+ overflow: auto;
19812
+ }
19813
+ :where(.rt-SheetContent) :where(.rt-ShellSidebarPanel){
19814
+ transition: none !important;
19588
19815
  }
19589
19816
  .rt-SliderRoot{
19590
19817
  --slider-thumb-width: var(--space-3);
@@ -20990,6 +21217,7 @@
20990
21217
  padding: var(--text-area-padding-y) var(--text-area-padding-x);
20991
21218
  border-radius: inherit;
20992
21219
  resize: none;
21220
+ min-width: 0;
20993
21221
  display: block;
20994
21222
  width: 100%;
20995
21223
  flex-grow: 1;
@@ -21001,7 +21229,7 @@
21001
21229
  }
21002
21230
  .rt-TextAreaRoot:where(.rt-r-size-1){
21003
21231
  min-height: var(--space-8);
21004
- border-radius: var(--radius-3);
21232
+ border-radius: var(--radius-1);
21005
21233
  }
21006
21234
  .rt-TextAreaRoot:where(.rt-r-size-1) :where(.rt-TextAreaInput){
21007
21235
  --text-area-padding-y: calc(var(--space-2) - var(--text-area-border-width));
@@ -21012,22 +21240,22 @@
21012
21240
  }
21013
21241
  .rt-TextAreaRoot:where(.rt-r-size-2){
21014
21242
  min-height: var(--space-9);
21015
- border-radius: var(--radius-4);
21243
+ border-radius: var(--radius-2);
21016
21244
  }
21017
21245
  .rt-TextAreaRoot:where(.rt-r-size-2) :where(.rt-TextAreaInput){
21018
21246
  --text-area-padding-y: calc(var(--space-2) - var(--text-area-border-width));
21019
- --text-area-padding-x: calc(var(--space-3) - var(--text-area-border-width));
21247
+ --text-area-padding-x: calc(var(--space-2) - var(--text-area-border-width));
21020
21248
  font-size: var(--font-size-2);
21021
21249
  line-height: var(--line-height-2);
21022
21250
  letter-spacing: var(--letter-spacing-2);
21023
21251
  }
21024
21252
  .rt-TextAreaRoot:where(.rt-r-size-3){
21025
21253
  min-height: 80px;
21026
- border-radius: var(--radius-5);
21254
+ border-radius: var(--radius-3);
21027
21255
  }
21028
21256
  .rt-TextAreaRoot:where(.rt-r-size-3) :where(.rt-TextAreaInput){
21029
21257
  --text-area-padding-y: calc(var(--space-3) - var(--text-area-border-width));
21030
- --text-area-padding-x: calc(var(--space-4) - var(--text-area-border-width));
21258
+ --text-area-padding-x: calc(var(--space-3) - var(--text-area-border-width));
21031
21259
  font-size: var(--font-size-3);
21032
21260
  line-height: var(--line-height-3);
21033
21261
  letter-spacing: var(--letter-spacing-3);
@@ -21035,7 +21263,7 @@
21035
21263
  @media (min-width: 520px){
21036
21264
  .rt-TextAreaRoot:where(.xs\:rt-r-size-1){
21037
21265
  min-height: var(--space-8);
21038
- border-radius: var(--radius-3);
21266
+ border-radius: var(--radius-1);
21039
21267
  }
21040
21268
  .rt-TextAreaRoot:where(.xs\:rt-r-size-1) :where(.rt-TextAreaInput){
21041
21269
  --text-area-padding-y: calc(var(--space-2) - var(--text-area-border-width));
@@ -21046,22 +21274,22 @@
21046
21274
  }
21047
21275
  .rt-TextAreaRoot:where(.xs\:rt-r-size-2){
21048
21276
  min-height: var(--space-9);
21049
- border-radius: var(--radius-4);
21277
+ border-radius: var(--radius-2);
21050
21278
  }
21051
21279
  .rt-TextAreaRoot:where(.xs\:rt-r-size-2) :where(.rt-TextAreaInput){
21052
21280
  --text-area-padding-y: calc(var(--space-2) - var(--text-area-border-width));
21053
- --text-area-padding-x: calc(var(--space-3) - var(--text-area-border-width));
21281
+ --text-area-padding-x: calc(var(--space-2) - var(--text-area-border-width));
21054
21282
  font-size: var(--font-size-2);
21055
21283
  line-height: var(--line-height-2);
21056
21284
  letter-spacing: var(--letter-spacing-2);
21057
21285
  }
21058
21286
  .rt-TextAreaRoot:where(.xs\:rt-r-size-3){
21059
21287
  min-height: 80px;
21060
- border-radius: var(--radius-5);
21288
+ border-radius: var(--radius-3);
21061
21289
  }
21062
21290
  .rt-TextAreaRoot:where(.xs\:rt-r-size-3) :where(.rt-TextAreaInput){
21063
21291
  --text-area-padding-y: calc(var(--space-3) - var(--text-area-border-width));
21064
- --text-area-padding-x: calc(var(--space-4) - var(--text-area-border-width));
21292
+ --text-area-padding-x: calc(var(--space-3) - var(--text-area-border-width));
21065
21293
  font-size: var(--font-size-3);
21066
21294
  line-height: var(--line-height-3);
21067
21295
  letter-spacing: var(--letter-spacing-3);
@@ -21070,7 +21298,7 @@
21070
21298
  @media (min-width: 768px){
21071
21299
  .rt-TextAreaRoot:where(.sm\:rt-r-size-1){
21072
21300
  min-height: var(--space-8);
21073
- border-radius: var(--radius-3);
21301
+ border-radius: var(--radius-1);
21074
21302
  }
21075
21303
  .rt-TextAreaRoot:where(.sm\:rt-r-size-1) :where(.rt-TextAreaInput){
21076
21304
  --text-area-padding-y: calc(var(--space-2) - var(--text-area-border-width));
@@ -21081,22 +21309,22 @@
21081
21309
  }
21082
21310
  .rt-TextAreaRoot:where(.sm\:rt-r-size-2){
21083
21311
  min-height: var(--space-9);
21084
- border-radius: var(--radius-4);
21312
+ border-radius: var(--radius-2);
21085
21313
  }
21086
21314
  .rt-TextAreaRoot:where(.sm\:rt-r-size-2) :where(.rt-TextAreaInput){
21087
21315
  --text-area-padding-y: calc(var(--space-2) - var(--text-area-border-width));
21088
- --text-area-padding-x: calc(var(--space-3) - var(--text-area-border-width));
21316
+ --text-area-padding-x: calc(var(--space-2) - var(--text-area-border-width));
21089
21317
  font-size: var(--font-size-2);
21090
21318
  line-height: var(--line-height-2);
21091
21319
  letter-spacing: var(--letter-spacing-2);
21092
21320
  }
21093
21321
  .rt-TextAreaRoot:where(.sm\:rt-r-size-3){
21094
21322
  min-height: 80px;
21095
- border-radius: var(--radius-5);
21323
+ border-radius: var(--radius-3);
21096
21324
  }
21097
21325
  .rt-TextAreaRoot:where(.sm\:rt-r-size-3) :where(.rt-TextAreaInput){
21098
21326
  --text-area-padding-y: calc(var(--space-3) - var(--text-area-border-width));
21099
- --text-area-padding-x: calc(var(--space-4) - var(--text-area-border-width));
21327
+ --text-area-padding-x: calc(var(--space-3) - var(--text-area-border-width));
21100
21328
  font-size: var(--font-size-3);
21101
21329
  line-height: var(--line-height-3);
21102
21330
  letter-spacing: var(--letter-spacing-3);
@@ -21105,7 +21333,7 @@
21105
21333
  @media (min-width: 1024px){
21106
21334
  .rt-TextAreaRoot:where(.md\:rt-r-size-1){
21107
21335
  min-height: var(--space-8);
21108
- border-radius: var(--radius-3);
21336
+ border-radius: var(--radius-1);
21109
21337
  }
21110
21338
  .rt-TextAreaRoot:where(.md\:rt-r-size-1) :where(.rt-TextAreaInput){
21111
21339
  --text-area-padding-y: calc(var(--space-2) - var(--text-area-border-width));
@@ -21116,22 +21344,22 @@
21116
21344
  }
21117
21345
  .rt-TextAreaRoot:where(.md\:rt-r-size-2){
21118
21346
  min-height: var(--space-9);
21119
- border-radius: var(--radius-4);
21347
+ border-radius: var(--radius-2);
21120
21348
  }
21121
21349
  .rt-TextAreaRoot:where(.md\:rt-r-size-2) :where(.rt-TextAreaInput){
21122
21350
  --text-area-padding-y: calc(var(--space-2) - var(--text-area-border-width));
21123
- --text-area-padding-x: calc(var(--space-3) - var(--text-area-border-width));
21351
+ --text-area-padding-x: calc(var(--space-2) - var(--text-area-border-width));
21124
21352
  font-size: var(--font-size-2);
21125
21353
  line-height: var(--line-height-2);
21126
21354
  letter-spacing: var(--letter-spacing-2);
21127
21355
  }
21128
21356
  .rt-TextAreaRoot:where(.md\:rt-r-size-3){
21129
21357
  min-height: 80px;
21130
- border-radius: var(--radius-5);
21358
+ border-radius: var(--radius-3);
21131
21359
  }
21132
21360
  .rt-TextAreaRoot:where(.md\:rt-r-size-3) :where(.rt-TextAreaInput){
21133
21361
  --text-area-padding-y: calc(var(--space-3) - var(--text-area-border-width));
21134
- --text-area-padding-x: calc(var(--space-4) - var(--text-area-border-width));
21362
+ --text-area-padding-x: calc(var(--space-3) - var(--text-area-border-width));
21135
21363
  font-size: var(--font-size-3);
21136
21364
  line-height: var(--line-height-3);
21137
21365
  letter-spacing: var(--letter-spacing-3);
@@ -21140,7 +21368,7 @@
21140
21368
  @media (min-width: 1280px){
21141
21369
  .rt-TextAreaRoot:where(.lg\:rt-r-size-1){
21142
21370
  min-height: var(--space-8);
21143
- border-radius: var(--radius-3);
21371
+ border-radius: var(--radius-1);
21144
21372
  }
21145
21373
  .rt-TextAreaRoot:where(.lg\:rt-r-size-1) :where(.rt-TextAreaInput){
21146
21374
  --text-area-padding-y: calc(var(--space-2) - var(--text-area-border-width));
@@ -21151,22 +21379,22 @@
21151
21379
  }
21152
21380
  .rt-TextAreaRoot:where(.lg\:rt-r-size-2){
21153
21381
  min-height: var(--space-9);
21154
- border-radius: var(--radius-4);
21382
+ border-radius: var(--radius-2);
21155
21383
  }
21156
21384
  .rt-TextAreaRoot:where(.lg\:rt-r-size-2) :where(.rt-TextAreaInput){
21157
21385
  --text-area-padding-y: calc(var(--space-2) - var(--text-area-border-width));
21158
- --text-area-padding-x: calc(var(--space-3) - var(--text-area-border-width));
21386
+ --text-area-padding-x: calc(var(--space-2) - var(--text-area-border-width));
21159
21387
  font-size: var(--font-size-2);
21160
21388
  line-height: var(--line-height-2);
21161
21389
  letter-spacing: var(--letter-spacing-2);
21162
21390
  }
21163
21391
  .rt-TextAreaRoot:where(.lg\:rt-r-size-3){
21164
21392
  min-height: 80px;
21165
- border-radius: var(--radius-5);
21393
+ border-radius: var(--radius-3);
21166
21394
  }
21167
21395
  .rt-TextAreaRoot:where(.lg\:rt-r-size-3) :where(.rt-TextAreaInput){
21168
21396
  --text-area-padding-y: calc(var(--space-3) - var(--text-area-border-width));
21169
- --text-area-padding-x: calc(var(--space-4) - var(--text-area-border-width));
21397
+ --text-area-padding-x: calc(var(--space-3) - var(--text-area-border-width));
21170
21398
  font-size: var(--font-size-3);
21171
21399
  line-height: var(--line-height-3);
21172
21400
  letter-spacing: var(--letter-spacing-3);
@@ -21175,7 +21403,7 @@
21175
21403
  @media (min-width: 1640px){
21176
21404
  .rt-TextAreaRoot:where(.xl\:rt-r-size-1){
21177
21405
  min-height: var(--space-8);
21178
- border-radius: var(--radius-3);
21406
+ border-radius: var(--radius-1);
21179
21407
  }
21180
21408
  .rt-TextAreaRoot:where(.xl\:rt-r-size-1) :where(.rt-TextAreaInput){
21181
21409
  --text-area-padding-y: calc(var(--space-2) - var(--text-area-border-width));
@@ -21186,22 +21414,22 @@
21186
21414
  }
21187
21415
  .rt-TextAreaRoot:where(.xl\:rt-r-size-2){
21188
21416
  min-height: var(--space-9);
21189
- border-radius: var(--radius-4);
21417
+ border-radius: var(--radius-2);
21190
21418
  }
21191
21419
  .rt-TextAreaRoot:where(.xl\:rt-r-size-2) :where(.rt-TextAreaInput){
21192
21420
  --text-area-padding-y: calc(var(--space-2) - var(--text-area-border-width));
21193
- --text-area-padding-x: calc(var(--space-3) - var(--text-area-border-width));
21421
+ --text-area-padding-x: calc(var(--space-2) - var(--text-area-border-width));
21194
21422
  font-size: var(--font-size-2);
21195
21423
  line-height: var(--line-height-2);
21196
21424
  letter-spacing: var(--letter-spacing-2);
21197
21425
  }
21198
21426
  .rt-TextAreaRoot:where(.xl\:rt-r-size-3){
21199
21427
  min-height: 80px;
21200
- border-radius: var(--radius-5);
21428
+ border-radius: var(--radius-3);
21201
21429
  }
21202
21430
  .rt-TextAreaRoot:where(.xl\:rt-r-size-3) :where(.rt-TextAreaInput){
21203
21431
  --text-area-padding-y: calc(var(--space-3) - var(--text-area-border-width));
21204
- --text-area-padding-x: calc(var(--space-4) - var(--text-area-border-width));
21432
+ --text-area-padding-x: calc(var(--space-3) - var(--text-area-border-width));
21205
21433
  font-size: var(--font-size-3);
21206
21434
  line-height: var(--line-height-3);
21207
21435
  letter-spacing: var(--letter-spacing-3);
@@ -22531,8 +22759,8 @@
22531
22759
  background-color: var(--gray-12);
22532
22760
  border-radius: var(--radius-1);
22533
22761
  transform-origin: var(--radix-tooltip-content-transform-origin);
22534
- animation-duration: var(--duration-2);
22535
- animation-timing-function: var(--ease-3);
22762
+ animation-duration: var(--motion-duration-small);
22763
+ animation-timing-function: var(--motion-spring-snappy);
22536
22764
  }
22537
22765
  @media (prefers-reduced-motion: no-preference) {
22538
22766
  .rt-TooltipContent:where([data-state='delayed-open']):where([data-side='top']){
@@ -22569,6 +22797,280 @@
22569
22797
  .rt-UserCard:where(.rt-r-size-4) :where(.rt-Flex){
22570
22798
  gap: var(--space-5);
22571
22799
  }
22800
+ .rt-ChatbarField{
22801
+ position: relative;
22802
+ width: 100%;
22803
+ min-width: 0;
22804
+ }
22805
+ .rt-ChatbarRoot{
22806
+ --chatbar-attachment-thumb: var(--space-8);
22807
+ transition: outline var(--motion-duration-small) var(--motion-spring-snappy);
22808
+ }
22809
+ .rt-ChatbarInput{
22810
+ display: block;
22811
+ width: 100%;
22812
+ min-width: 0;
22813
+ resize: none;
22814
+ border: 0;
22815
+ outline: 0;
22816
+ background: transparent;
22817
+ padding: 0;
22818
+ margin: 0;
22819
+ color: inherit;
22820
+ font: inherit;
22821
+ line-height: inherit;
22822
+ text-align: start;
22823
+ transition: height 150ms ease-out;
22824
+ }
22825
+ .rt-ChatbarCard :where(.rt-ChatbarGrid){
22826
+ display: flex;
22827
+ flex-direction: column;
22828
+ gap: var(--space-4);
22829
+ width: 100%;
22830
+ }
22831
+ .rt-ChatbarRoot:where([data-state="closed"]) :where(.rt-ChatbarGrid){
22832
+ flex-direction: row;
22833
+ align-items: center;
22834
+ flex-wrap: wrap;
22835
+ }
22836
+ .rt-ChatbarRoot:where([data-state="closed"]) :where(.rt-ChatbarAttachmentsRow){
22837
+ flex-basis: 100%;
22838
+ order: -1;
22839
+ }
22840
+ .rt-ChatbarTextarea{
22841
+ flex: 1;
22842
+ min-width: 0;
22843
+ }
22844
+ .rt-ChatbarSend{
22845
+ transition: opacity 150ms ease-in-out;
22846
+ }
22847
+ .rt-ChatbarRoot:where([data-state="closed"]) :where(.rt-ChatbarRow){
22848
+ display: none;
22849
+ }
22850
+ .rt-ChatbarRoot:where([data-state="open"]) :where(.rt-ChatbarRow){
22851
+ display: block;
22852
+ width: 100%;
22853
+ }
22854
+ .rt-ChatbarAttachmentsRow{
22855
+ width: 100%;
22856
+ }
22857
+ .rt-ChatbarScrollArea{
22858
+ border-radius: var(--chatbar-attachments-radius);
22859
+ }
22860
+ .rt-ChatbarScrollArea :where(.rt-ScrollAreaScrollbar){
22861
+ display: none;
22862
+ }
22863
+ .rt-ChatbarAttachmentPreview{
22864
+ height: var(--chatbar-attachment-thumb);
22865
+ width: var(--chatbar-attachment-thumb);
22866
+ min-width: var(--chatbar-attachment-thumb);
22867
+ flex-shrink: 0;
22868
+ border-radius: var(--radius-1);
22869
+ overflow: hidden;
22870
+ display: inline-flex;
22871
+ align-items: center;
22872
+ justify-content: center;
22873
+ background: var(--gray-a3);
22874
+ }
22875
+ .rt-ChatbarAttachmentImage{
22876
+ height: 100%;
22877
+ width: auto;
22878
+ object-fit: contain;
22879
+ max-width: none;
22880
+ }
22881
+ .rt-ChatbarAttachment{
22882
+ position: relative;
22883
+ }
22884
+ .rt-ChatbarAttachmentRemove{
22885
+ position: absolute;
22886
+ top: var(--chatbar-remove-offset);
22887
+ right: var(--chatbar-remove-offset);
22888
+ }
22889
+ .rt-ChatbarCard{
22890
+ width: 100%;
22891
+ transition: all var(--motion-duration-small) var(--motion-spring-snappy);
22892
+ }
22893
+ .rt-ChatbarDropOverlay{
22894
+ position: absolute;
22895
+ top: 0;
22896
+ left: 0;
22897
+ right: 0;
22898
+ bottom: 0;
22899
+ background: var(--gray-a3);
22900
+ border-radius: inherit;
22901
+ display: flex;
22902
+ align-items: center;
22903
+ justify-content: center;
22904
+ z-index: 10;
22905
+ animation: rt-fade-in var(--motion-duration-small) var(--motion-spring-snappy);
22906
+ }
22907
+ .rt-ChatbarDropContent{
22908
+ display: flex;
22909
+ flex-direction: column;
22910
+ align-items: center;
22911
+ gap: var(--space-2);
22912
+ color: var(--accent-11);
22913
+ }
22914
+ .rt-ChatbarDropIcon{
22915
+ width: var(--space-6);
22916
+ height: var(--space-6);
22917
+ }
22918
+ .rt-ChatbarInlineStart,
22919
+ .rt-ChatbarInlineEnd{
22920
+ flex-shrink: 0;
22921
+ display: inline-flex;
22922
+ align-items: center;
22923
+ gap: var(--space-2);
22924
+ }
22925
+ .rt-ChatbarRowStart{
22926
+ display: inline-flex;
22927
+ align-items: center;
22928
+ gap: var(--space-2);
22929
+ flex-shrink: 0;
22930
+ }
22931
+ .rt-ChatbarRowEnd{
22932
+ display: inline-flex;
22933
+ align-items: center;
22934
+ gap: var(--space-2);
22935
+ flex-shrink: 0;
22936
+ margin-left: auto;
22937
+ }
22938
+ .rt-ChatbarRoot:where(.rt-r-size-1){
22939
+ font-size: var(--font-size-1);
22940
+ line-height: var(--line-height-1);
22941
+ --chatbar-attachment-thumb: var(--space-8);
22942
+ --chatbar-remove-offset: var(--space-1);
22943
+ --chatbar-attachments-radius: min(var(--radius-5), calc(var(--radius-1) + var(--space-1)));
22944
+ }
22945
+ .rt-ChatbarRoot:where(.rt-r-size-2){
22946
+ font-size: var(--font-size-2);
22947
+ line-height: var(--line-height-2);
22948
+ --chatbar-attachment-thumb: var(--space-9);
22949
+ --chatbar-remove-offset: var(--space-2);
22950
+ --chatbar-attachments-radius: min(var(--radius-6), calc(var(--radius-2) + var(--space-2)));
22951
+ }
22952
+ .rt-ChatbarRoot:where(.rt-r-size-3){
22953
+ font-size: var(--font-size-3);
22954
+ line-height: var(--line-height-3);
22955
+ --chatbar-attachment-thumb: var(--space-9);
22956
+ --chatbar-remove-offset: var(--space-3);
22957
+ --chatbar-attachments-radius: min(var(--radius-7), calc(var(--radius-3) + var(--space-3)));
22958
+ }
22959
+ @media (min-width: 520px){
22960
+ .rt-ChatbarRoot:where(.xs\:rt-r-size-1){
22961
+ font-size: var(--font-size-1);
22962
+ line-height: var(--line-height-1);
22963
+ --chatbar-attachment-thumb: var(--space-8);
22964
+ --chatbar-remove-offset: var(--space-1);
22965
+ --chatbar-attachments-radius: min(var(--radius-5), calc(var(--radius-1) + var(--space-1)));
22966
+ }
22967
+ .rt-ChatbarRoot:where(.xs\:rt-r-size-2){
22968
+ font-size: var(--font-size-2);
22969
+ line-height: var(--line-height-2);
22970
+ --chatbar-attachment-thumb: var(--space-9);
22971
+ --chatbar-remove-offset: var(--space-2);
22972
+ --chatbar-attachments-radius: min(var(--radius-6), calc(var(--radius-2) + var(--space-2)));
22973
+ }
22974
+ .rt-ChatbarRoot:where(.xs\:rt-r-size-3){
22975
+ font-size: var(--font-size-3);
22976
+ line-height: var(--line-height-3);
22977
+ --chatbar-attachment-thumb: var(--space-9);
22978
+ --chatbar-remove-offset: var(--space-3);
22979
+ --chatbar-attachments-radius: min(var(--radius-7), calc(var(--radius-3) + var(--space-3)));
22980
+ }
22981
+ }
22982
+ @media (min-width: 768px){
22983
+ .rt-ChatbarRoot:where(.sm\:rt-r-size-1){
22984
+ font-size: var(--font-size-1);
22985
+ line-height: var(--line-height-1);
22986
+ --chatbar-attachment-thumb: var(--space-8);
22987
+ --chatbar-remove-offset: var(--space-1);
22988
+ --chatbar-attachments-radius: min(var(--radius-5), calc(var(--radius-1) + var(--space-1)));
22989
+ }
22990
+ .rt-ChatbarRoot:where(.sm\:rt-r-size-2){
22991
+ font-size: var(--font-size-2);
22992
+ line-height: var(--line-height-2);
22993
+ --chatbar-attachment-thumb: var(--space-9);
22994
+ --chatbar-remove-offset: var(--space-2);
22995
+ --chatbar-attachments-radius: min(var(--radius-6), calc(var(--radius-2) + var(--space-2)));
22996
+ }
22997
+ .rt-ChatbarRoot:where(.sm\:rt-r-size-3){
22998
+ font-size: var(--font-size-3);
22999
+ line-height: var(--line-height-3);
23000
+ --chatbar-attachment-thumb: var(--space-9);
23001
+ --chatbar-remove-offset: var(--space-3);
23002
+ --chatbar-attachments-radius: min(var(--radius-7), calc(var(--radius-3) + var(--space-3)));
23003
+ }
23004
+ }
23005
+ @media (min-width: 1024px){
23006
+ .rt-ChatbarRoot:where(.md\:rt-r-size-1){
23007
+ font-size: var(--font-size-1);
23008
+ line-height: var(--line-height-1);
23009
+ --chatbar-attachment-thumb: var(--space-8);
23010
+ --chatbar-remove-offset: var(--space-1);
23011
+ --chatbar-attachments-radius: min(var(--radius-5), calc(var(--radius-1) + var(--space-1)));
23012
+ }
23013
+ .rt-ChatbarRoot:where(.md\:rt-r-size-2){
23014
+ font-size: var(--font-size-2);
23015
+ line-height: var(--line-height-2);
23016
+ --chatbar-attachment-thumb: var(--space-9);
23017
+ --chatbar-remove-offset: var(--space-2);
23018
+ --chatbar-attachments-radius: min(var(--radius-6), calc(var(--radius-2) + var(--space-2)));
23019
+ }
23020
+ .rt-ChatbarRoot:where(.md\:rt-r-size-3){
23021
+ font-size: var(--font-size-3);
23022
+ line-height: var(--line-height-3);
23023
+ --chatbar-attachment-thumb: var(--space-9);
23024
+ --chatbar-remove-offset: var(--space-3);
23025
+ --chatbar-attachments-radius: min(var(--radius-7), calc(var(--radius-3) + var(--space-3)));
23026
+ }
23027
+ }
23028
+ @media (min-width: 1280px){
23029
+ .rt-ChatbarRoot:where(.lg\:rt-r-size-1){
23030
+ font-size: var(--font-size-1);
23031
+ line-height: var(--line-height-1);
23032
+ --chatbar-attachment-thumb: var(--space-8);
23033
+ --chatbar-remove-offset: var(--space-1);
23034
+ --chatbar-attachments-radius: min(var(--radius-5), calc(var(--radius-1) + var(--space-1)));
23035
+ }
23036
+ .rt-ChatbarRoot:where(.lg\:rt-r-size-2){
23037
+ font-size: var(--font-size-2);
23038
+ line-height: var(--line-height-2);
23039
+ --chatbar-attachment-thumb: var(--space-9);
23040
+ --chatbar-remove-offset: var(--space-2);
23041
+ --chatbar-attachments-radius: min(var(--radius-6), calc(var(--radius-2) + var(--space-2)));
23042
+ }
23043
+ .rt-ChatbarRoot:where(.lg\:rt-r-size-3){
23044
+ font-size: var(--font-size-3);
23045
+ line-height: var(--line-height-3);
23046
+ --chatbar-attachment-thumb: var(--space-9);
23047
+ --chatbar-remove-offset: var(--space-3);
23048
+ --chatbar-attachments-radius: min(var(--radius-7), calc(var(--radius-3) + var(--space-3)));
23049
+ }
23050
+ }
23051
+ @media (min-width: 1640px){
23052
+ .rt-ChatbarRoot:where(.xl\:rt-r-size-1){
23053
+ font-size: var(--font-size-1);
23054
+ line-height: var(--line-height-1);
23055
+ --chatbar-attachment-thumb: var(--space-8);
23056
+ --chatbar-remove-offset: var(--space-1);
23057
+ --chatbar-attachments-radius: min(var(--radius-5), calc(var(--radius-1) + var(--space-1)));
23058
+ }
23059
+ .rt-ChatbarRoot:where(.xl\:rt-r-size-2){
23060
+ font-size: var(--font-size-2);
23061
+ line-height: var(--line-height-2);
23062
+ --chatbar-attachment-thumb: var(--space-9);
23063
+ --chatbar-remove-offset: var(--space-2);
23064
+ --chatbar-attachments-radius: min(var(--radius-6), calc(var(--radius-2) + var(--space-2)));
23065
+ }
23066
+ .rt-ChatbarRoot:where(.xl\:rt-r-size-3){
23067
+ font-size: var(--font-size-3);
23068
+ line-height: var(--line-height-3);
23069
+ --chatbar-attachment-thumb: var(--space-9);
23070
+ --chatbar-remove-offset: var(--space-3);
23071
+ --chatbar-attachments-radius: min(var(--radius-7), calc(var(--radius-3) + var(--space-3)));
23072
+ }
23073
+ }
22572
23074
  .radix-themes:where([data-is-root-theme='true']){
22573
23075
  position: relative;
22574
23076
  z-index: 0;