@kushagradhawan/kookie-ui 0.1.33 → 0.1.35

package/components.css

@@ -207,65 +207,81 @@
 @keyframes rt-slide-from-top {
     from {
         transform: translateY(4px) scale(0.97);
+        opacity: 0.5;
     }
     to {
         transform: translateY(0) scale(1);
+        opacity: 1;
     }
 }
 @keyframes rt-slide-to-top {
     from {
         transform: translateY(0) scale(1);
+        opacity: 1;
     }
     to {
         transform: translateY(4px) scale(0.97);
+        opacity: 0.5;
     }
 }
 @keyframes rt-slide-from-bottom {
     from {
         transform: translateY(-4px) scale(0.97);
+        opacity: 0.5;
     }
     to {
         transform: translateY(0) scale(1);
+        opacity: 1;
     }
 }
 @keyframes rt-slide-to-bottom {
     from {
         transform: translateY(0) scale(1);
+        opacity: 1;
     }
     to {
         transform: translateY(-4px) scale(0.97);
+        opacity: 0.5;
     }
 }
 @keyframes rt-slide-from-left {
     from {
         transform: translateX(4px) scale(0.97);
+        opacity: 0.5;
     }
     to {
         transform: translateX(0) scale(1);
+        opacity: 1;
     }
 }
 @keyframes rt-slide-to-left {
     from {
         transform: translateX(0) scale(1);
+        opacity: 1;
     }
     to {
         transform: translateX(4px) scale(0.97);
+        opacity: 0.5;
     }
 }
 @keyframes rt-slide-from-right {
     from {
         transform: translateX(-4px) scale(0.97);
+        opacity: 0.5;
     }
     to {
         transform: translateX(0) scale(1);
+        opacity: 1;
     }
 }
 @keyframes rt-slide-to-right {
     from {
         transform: translateX(0) scale(1);
+        opacity: 1;
     }
     to {
         transform: translateX(-4px) scale(0.97);
+        opacity: 0.5;
     }
 }
 @keyframes rt-tab-indicator-appear {
@@ -283,10 +299,10 @@
 }
 @media (prefers-reduced-motion: no-preference) {
     .rt-PopperContent {
-        animation-timing-function: var(--ease-3);
+        animation-timing-function: var(--motion-spring-snappy);
     }
     .rt-PopperContent:where([data-state='open']) {
-        animation-duration: var(--duration-2);
+        animation-duration: var(--motion-duration-small);
     }
     .rt-PopperContent:where([data-state='open']):where([data-side='top']) {
         animation-name: rt-slide-from-top, rt-fade-in;
@@ -304,7 +320,7 @@
         animation-name: rt-slide-from-bottom, rt-fade-in;
     }
     .rt-PopperContent:where([data-state='closed']) {
-        animation-duration: var(--duration-1);
+        animation-duration: var(--motion-duration-small);
     }
     .rt-PopperContent:where([data-state='closed']):where([data-side='top']) {
         animation-name: rt-slide-to-top, rt-fade-out;
@@ -322,7 +338,99 @@
         animation-name: rt-slide-to-bottom, rt-fade-out;
     }
     .rt-BaseTabListTrigger:where([data-state='active'], [data-active])::before {
-        animation: rt-tab-indicator-appear var(--duration-2) var(--ease-3);
+        animation: rt-tab-indicator-appear var(--motion-duration-small) var(--motion-spring-snappy);
+    }
+}
+@keyframes rt-dialog-overlay-no-op {
+    from {
+        opacity: 1;
+    }
+    to {
+        opacity: 1;
+    }
+}
+@keyframes rt-dialog-content-show {
+    from {
+        opacity: 0;
+        transform: translateY(5px) scale(0.97);
+    }
+    to {
+        opacity: 1;
+        transform: translateY(0px) scale(1);
+    }
+}
+@keyframes rt-dialog-content-hide {
+    from {
+        opacity: 1;
+        transform: translateY(0px) scale(1);
+    }
+    to {
+        opacity: 0;
+        transform: translateY(5px) scale(0.99);
+    }
+}
+@keyframes rt-sheet-open-from-start {
+    from {
+        transform: translate3d(calc(-1 * var(--sheet-slide-distance)), 0, 0);
+    }
+    to {
+        transform: translate3d(0, 0, 0);
+    }
+}
+@keyframes rt-sheet-close-to-start {
+    from {
+        transform: translate3d(0, 0, 0);
+    }
+    to {
+        transform: translate3d(calc(-1 * var(--sheet-slide-distance)), 0, 0);
+    }
+}
+@keyframes rt-sheet-open-from-end {
+    from {
+        transform: translate3d(var(--sheet-slide-distance), 0, 0);
+    }
+    to {
+        transform: translate3d(0, 0, 0);
+    }
+}
+@keyframes rt-sheet-close-to-end {
+    from {
+        transform: translate3d(0, 0, 0);
+    }
+    to {
+        transform: translate3d(var(--sheet-slide-distance), 0, 0);
+    }
+}
+@keyframes rt-sheet-open-from-top {
+    from {
+        transform: translate3d(0, calc(-1 * var(--sheet-slide-distance)), 0);
+    }
+    to {
+        transform: translate3d(0, 0, 0);
+    }
+}
+@keyframes rt-sheet-close-to-top {
+    from {
+        transform: translate3d(0, 0, 0);
+    }
+    to {
+        transform: translate3d(0, calc(-1 * var(--sheet-slide-distance)), 0);
+    }
+}
+@keyframes rt-sheet-open-from-bottom {
+    from {
+        transform: translate3d(0, var(--sheet-slide-distance), 0);
+    }
+    to {
+        transform: translate3d(0, 0, 0);
+    }
+}
+@keyframes rt-sheet-close-to-bottom {
+    from {
+        transform: translate3d(0, 0, 0);
+    }
+    to {
+        transform: translate3d(0, var(--sheet-slide-distance), 0);
     }
 }
 .rt-Box {
@@ -465,7 +573,7 @@
     --scrollarea-scrollbar-vertical-margin-bottom: var(--space-1);
     --scrollarea-scrollbar-vertical-margin-left: var(--space-1);
     --scrollarea-scrollbar-vertical-margin-right: var(--space-1);
-    --segmented-control-transition-duration: var(--duration-1);
+    --segmented-control-transition-duration: var(--motion-duration-micro);
     --spinner-animation-duration: 800ms;
     --spinner-opacity: 0.65;
 }
@@ -1360,10 +1468,10 @@
     font-size: var(--font-size-4);
 }
 :where(.rt-AccordionContent[data-state="open"]) {
-    animation: rt-slide-down var(--duration-spring-2) var(--ease-spring-1);
+    animation: rt-slide-down var(--motion-duration-small) var(--motion-spring-snappy);
 }
 :where(.rt-AccordionContent[data-state="closed"]) {
-    animation: rt-slide-up var(--duration-spring-1) var(--ease-spring-1);
+    animation: rt-slide-up var(--motion-duration-micro) var(--motion-spring-snappy);
 }
 @keyframes rt-slide-down {
     0% {
@@ -1710,36 +1818,8 @@
     }
 }
 @media (prefers-reduced-motion: no-preference) {
-    @keyframes rt-dialog-overlay-no-op {
-        from {
-            opacity: 1;
-        }
-        to {
-            opacity: 1;
-        }
-    }
-    @keyframes rt-dialog-content-show {
-        from {
-            opacity: 0;
-            transform: translateY(5px) scale(0.97);
-        }
-        to {
-            opacity: 1;
-            transform: translateY(0px) scale(1);
-        }
-    }
-    @keyframes rt-dialog-content-hide {
-        from {
-            opacity: 1;
-            transform: translateY(0px) scale(1);
-        }
-        to {
-            opacity: 0;
-            transform: translateY(5px) scale(0.99);
-        }
-    }
     .rt-BaseDialogOverlay:where([data-state='closed']) {
-        animation: rt-dialog-overlay-no-op var(--duration-4) var(--ease-spring-1);
+        animation: rt-dialog-overlay-no-op var(--motion-duration-small) var(--motion-spring-snappy);
     }
     .rt-BaseDialogOverlay:where([data-state='open'])::before {
         animation: rt-fade-in var(--duration-5) var(--ease-spring-1);
@@ -1749,11 +1829,11 @@
         animation: rt-fade-out var(--duration-4) var(--ease-spring-1);
     }
     .rt-BaseDialogContent:where([data-state='open']) {
-        animation: rt-dialog-content-show var(--duration-5) var(--ease-spring-1);
+        animation: rt-dialog-content-show var(--motion-duration-medium) var(--motion-spring-snappy);
     }
     .rt-BaseDialogContent:where([data-state='closed']) {
         opacity: 0;
-        animation: rt-dialog-content-hide var(--duration-3) var(--ease-spring-1);
+        animation: rt-dialog-content-hide var(--motion-duration-small) var(--motion-spring-snappy);
     }
 }
 @supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
@@ -2634,8 +2714,6 @@
     --avatar-image-active-filter: brightness(0.9) saturate(1.1);
     --base-button-solid-high-contrast-hover-filter: contrast(0.88) saturate(1.1) brightness(1.1);
     --segmented-control-indicator-background-color: var(--color-background);
-    --sidebar-icon-width-1: calc(var(--space-9) + var(--space-1));
-    --sidebar-icon-width-2: calc(var(--space-9) + var(--space-3));
     --slider-range-high-contrast-background-image: linear-gradient(var(--black-a8), var(--black-a8));
 }
 :is(.dark, .dark-theme),
@@ -5395,16 +5473,16 @@
 }
 .rt-BaseCard:where(.rt-variant-soft) {
     --card-border-width: 0px;
-    --card-background-color: var(--gray-2);
+    --card-background-color: var(--gray-3);
 }
 :where([data-panel-background='translucent'], [data-material='translucent']) .rt-BaseCard:where(.rt-variant-soft) {
-    --card-background-color: color-mix(in srgb, var(--gray-a2), var(--gray-2) 60%);
+    --card-background-color: color-mix(in srgb, var(--gray-a3), var(--gray-3) 60%);
 }
 .rt-BaseCard:where(.rt-variant-soft):where([data-panel-background='solid'], [data-material='solid']) {
-    --card-background-color: var(--gray-2);
+    --card-background-color: var(--gray-3);
 }
 .rt-BaseCard:where(.rt-variant-soft):where([data-panel-background='translucent'], [data-material='translucent']) {
-    --card-background-color: color-mix(in srgb, var(--gray-a2), var(--gray-2) 60%);
+    --card-background-color: color-mix(in srgb, var(--gray-a3), var(--gray-3) 60%);
 }
 .rt-BaseCard:where(.rt-variant-soft)::before {
     background-color: var(--card-background-color);
@@ -7463,10 +7541,10 @@
     }
 }
 :where([data-panel-background='translucent']) :is(.rt-BaseMenuContent:where(.rt-variant-solid, .rt-variant-soft) :where(.rt-BaseMenuSubTrigger)) {
-    transition: background var(--duration-1) var(--ease-1), color var(--duration-2) var(--ease-1);
+    transition: background var(--motion-duration-micro) var(--motion-ease-standard), color var(--motion-duration-small) var(--motion-ease-standard);
 }
 :where([data-panel-background='translucent']) :is(.rt-BaseMenuContent:where(.rt-variant-solid, .rt-variant-soft) :where(.rt-BaseMenuItem)) {
-    transition: background var(--duration-1) var(--ease-1), color var(--duration-2) var(--ease-1);
+    transition: background var(--motion-duration-micro) var(--motion-ease-standard), color var(--motion-duration-small) var(--motion-ease-standard);
 }
 .rt-BaseMenuContent:where(.rt-variant-solid) :where(.rt-BaseMenuSubTrigger[data-state='open']) {
     background-color: var(--gray-3);
@@ -9076,7 +9154,7 @@
 }
 .rt-Image:where(:any-link, button, label) {
     cursor: pointer;
-    transition: var(--transition-card), filter var(--duration-2) var(--ease-1);
+    transition: var(--transition-card), filter var(--motion-duration-small) var(--motion-ease-standard);
 }
 @media (hover: hover) {
     .rt-Image:where(:any-link, button, label):where(:hover) {
@@ -9093,7 +9171,7 @@
 }
 :where(:any-link, button, label) {
     cursor: pointer;
-    transition: var(--transition-card), filter var(--duration-2) var(--ease-1);
+    transition: var(--transition-card), filter var(--motion-duration-small) var(--motion-ease-standard);
 }
 @media (hover: hover) {
     :where(:any-link, button, label):where(:hover) {
@@ -10134,6 +10212,7 @@
     --inset-padding-right: var(--popover-content-padding);
     --inset-padding-bottom: var(--popover-content-padding);
     --inset-padding-left: var(--popover-content-padding);
+    --popover-toolbar-padding: var(--popover-content-padding);
     padding: var(--popover-content-padding);
     box-sizing: border-box;
     transform-origin: var(--radix-popover-content-transform-origin);
@@ -10153,109 +10232,172 @@
     -webkit-backdrop-filter: var(--backdrop-filter-panel);
             backdrop-filter: var(--backdrop-filter-panel);
 }
+.rt-PopoverContent:where([data-has-toolbar]) {
+    padding-top: var(--popover-toolbar-offset, var(--popover-content-padding));
+}
+.rt-PopoverToolbar {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    z-index: 1;
+    display: grid;
+    grid-template-columns: 1fr auto 1fr;
+    align-items: center;
+    column-gap: var(--space-1);
+    padding: var(--popover-toolbar-padding);
+    background-color: var(--color-panel);
+}
+.rt-PopoverToolbarSection {
+    display: flex;
+    align-items: center;
+    gap: var(--space-2);
+}
+.rt-PopoverToolbarLeft {
+    justify-self: start;
+}
+.rt-PopoverToolbarCenter {
+    grid-column: 2;
+    justify-self: center;
+    min-width: 0;
+    text-align: center;
+}
+.rt-PopoverToolbarRight {
+    justify-self: end;
+}
+.rt-PopoverToolbarTitle {
+    display: inline-block;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
 .rt-PopoverContent:where(.rt-r-size-1) {
     --popover-content-padding: var(--space-5);
+    --popover-toolbar-padding: var(--space-2);
     border-radius: min(var(--radius-5), calc(var(--radius-1) + var(--space-2)));
 }
 .rt-PopoverContent:where(.rt-r-size-2) {
     --popover-content-padding: var(--space-6);
+    --popover-toolbar-padding: var(--space-2);
     border-radius: min(var(--radius-6), calc(var(--radius-2) + var(--space-3)));
 }
 .rt-PopoverContent:where(.rt-r-size-3) {
     --popover-content-padding: var(--space-7);
+    --popover-toolbar-padding: var(--space-3);
     border-radius: min(var(--radius-7), calc(var(--radius-3) + var(--space-4)));
 }
 .rt-PopoverContent:where(.rt-r-size-4) {
     --popover-content-padding: var(--space-8);
+    --popover-toolbar-padding: var(--space-4);
     border-radius: min(var(--radius-8), calc(var(--radius-4) + var(--space-5)));
 }
 @media (min-width: 520px) {
     .rt-PopoverContent:where(.xs\:rt-r-size-1) {
         --popover-content-padding: var(--space-5);
+        --popover-toolbar-padding: var(--space-2);
         border-radius: min(var(--radius-5), calc(var(--radius-1) + var(--space-2)));
     }
     .rt-PopoverContent:where(.xs\:rt-r-size-2) {
         --popover-content-padding: var(--space-6);
+        --popover-toolbar-padding: var(--space-2);
         border-radius: min(var(--radius-6), calc(var(--radius-2) + var(--space-3)));
     }
     .rt-PopoverContent:where(.xs\:rt-r-size-3) {
         --popover-content-padding: var(--space-7);
+        --popover-toolbar-padding: var(--space-3);
         border-radius: min(var(--radius-7), calc(var(--radius-3) + var(--space-4)));
     }
     .rt-PopoverContent:where(.xs\:rt-r-size-4) {
         --popover-content-padding: var(--space-8);
+        --popover-toolbar-padding: var(--space-4);
         border-radius: min(var(--radius-8), calc(var(--radius-4) + var(--space-5)));
     }
 }
 @media (min-width: 768px) {
     .rt-PopoverContent:where(.sm\:rt-r-size-1) {
         --popover-content-padding: var(--space-5);
+        --popover-toolbar-padding: var(--space-2);
         border-radius: min(var(--radius-5), calc(var(--radius-1) + var(--space-2)));
     }
     .rt-PopoverContent:where(.sm\:rt-r-size-2) {
         --popover-content-padding: var(--space-6);
+        --popover-toolbar-padding: var(--space-2);
         border-radius: min(var(--radius-6), calc(var(--radius-2) + var(--space-3)));
     }
     .rt-PopoverContent:where(.sm\:rt-r-size-3) {
         --popover-content-padding: var(--space-7);
+        --popover-toolbar-padding: var(--space-3);
         border-radius: min(var(--radius-7), calc(var(--radius-3) + var(--space-4)));
     }
     .rt-PopoverContent:where(.sm\:rt-r-size-4) {
         --popover-content-padding: var(--space-8);
+        --popover-toolbar-padding: var(--space-4);
         border-radius: min(var(--radius-8), calc(var(--radius-4) + var(--space-5)));
     }
 }
 @media (min-width: 1024px) {
     .rt-PopoverContent:where(.md\:rt-r-size-1) {
         --popover-content-padding: var(--space-5);
+        --popover-toolbar-padding: var(--space-2);
         border-radius: min(var(--radius-5), calc(var(--radius-1) + var(--space-2)));
     }
     .rt-PopoverContent:where(.md\:rt-r-size-2) {
         --popover-content-padding: var(--space-6);
+        --popover-toolbar-padding: var(--space-2);
         border-radius: min(var(--radius-6), calc(var(--radius-2) + var(--space-3)));
     }
     .rt-PopoverContent:where(.md\:rt-r-size-3) {
         --popover-content-padding: var(--space-7);
+        --popover-toolbar-padding: var(--space-3);
         border-radius: min(var(--radius-7), calc(var(--radius-3) + var(--space-4)));
     }
     .rt-PopoverContent:where(.md\:rt-r-size-4) {
         --popover-content-padding: var(--space-8);
+        --popover-toolbar-padding: var(--space-4);
         border-radius: min(var(--radius-8), calc(var(--radius-4) + var(--space-5)));
     }
 }
 @media (min-width: 1280px) {
     .rt-PopoverContent:where(.lg\:rt-r-size-1) {
         --popover-content-padding: var(--space-5);
+        --popover-toolbar-padding: var(--space-2);
         border-radius: min(var(--radius-5), calc(var(--radius-1) + var(--space-2)));
     }
     .rt-PopoverContent:where(.lg\:rt-r-size-2) {
         --popover-content-padding: var(--space-6);
+        --popover-toolbar-padding: var(--space-2);
         border-radius: min(var(--radius-6), calc(var(--radius-2) + var(--space-3)));
     }
     .rt-PopoverContent:where(.lg\:rt-r-size-3) {
         --popover-content-padding: var(--space-7);
+        --popover-toolbar-padding: var(--space-3);
         border-radius: min(var(--radius-7), calc(var(--radius-3) + var(--space-4)));
     }
     .rt-PopoverContent:where(.lg\:rt-r-size-4) {
         --popover-content-padding: var(--space-8);
+        --popover-toolbar-padding: var(--space-4);
         border-radius: min(var(--radius-8), calc(var(--radius-4) + var(--space-5)));
     }
 }
 @media (min-width: 1640px) {
     .rt-PopoverContent:where(.xl\:rt-r-size-1) {
         --popover-content-padding: var(--space-5);
+        --popover-toolbar-padding: var(--space-2);
         border-radius: min(var(--radius-5), calc(var(--radius-1) + var(--space-2)));
     }
     .rt-PopoverContent:where(.xl\:rt-r-size-2) {
         --popover-content-padding: var(--space-6);
+        --popover-toolbar-padding: var(--space-2);
         border-radius: min(var(--radius-6), calc(var(--radius-2) + var(--space-3)));
     }
     .rt-PopoverContent:where(.xl\:rt-r-size-3) {
         --popover-content-padding: var(--space-7);
+        --popover-toolbar-padding: var(--space-3);
         border-radius: min(var(--radius-7), calc(var(--radius-3) + var(--space-4)));
     }
     .rt-PopoverContent:where(.xl\:rt-r-size-4) {
         --popover-content-padding: var(--space-8);
+        --popover-toolbar-padding: var(--space-4);
         border-radius: min(var(--radius-8), calc(var(--radius-4) + var(--space-5)));
     }
 }
@@ -11211,6 +11353,103 @@
 .rt-RadioGroupItemInner {
     min-width: 0;
 }
+:where(.rt-SheetContent) {
+    position: fixed !important;
+    width: var(--width, 90vw) !important;
+    max-width: var(--max-width, 100vw) !important;
+    height: 100vh !important;
+    max-height: 100vh !important;
+    margin: 0 !important;
+    border-radius: 0 !important;
+    will-change: transform;
+}
+:where(.rt-SheetContent[data-side='start']) {
+    top: 0 !important;
+    bottom: 0 !important;
+    left: 0 !important;
+    right: auto !important;
+    margin: 0 !important;
+    border-start-start-radius: 0;
+    border-end-start-radius: 0;
+}
+:where(.rt-SheetContent[data-side='end']) {
+    top: 0 !important;
+    bottom: 0 !important;
+    right: 0 !important;
+    left: auto !important;
+    margin: 0 !important;
+    border-start-end-radius: 0;
+    border-end-end-radius: 0;
+}
+:where(.rt-SheetContent[data-side='top']) {
+    top: 0 !important;
+    left: 0 !important;
+    right: 0 !important;
+    bottom: auto !important;
+    width: auto !important;
+    max-width: none !important;
+    height: var(--height, 75vh) !important;
+    margin: 0 !important;
+    border-start-start-radius: 0;
+    border-start-end-radius: 0;
+}
+:where(.rt-SheetContent[data-side='bottom']) {
+    bottom: 0 !important;
+    left: 0 !important;
+    right: 0 !important;
+    top: auto !important;
+    width: auto !important;
+    max-width: none !important;
+    height: var(--height, 75vh) !important;
+    margin: 0 !important;
+    border-end-start-radius: 0;
+    border-end-end-radius: 0;
+}
+:where(.rt-SheetOverlay)::before {
+    opacity: 1;
+}
+@media (prefers-reduced-motion: no-preference) {
+    .rt-SheetContent:where([data-state='open']) {
+        animation-duration: var(--motion-duration-medium);
+        animation-timing-function: var(--motion-spring-snappy);
+        animation-fill-mode: both;
+    }
+    .rt-SheetContent:where([data-state='closed']) {
+        opacity: 1;
+        animation-duration: var(--motion-duration-small);
+        animation-timing-function: var(--motion-spring-snappy);
+        animation-fill-mode: both;
+    }
+    .rt-SheetContent:where([data-state='open'][data-side='start']) {
+        animation-name: rt-sheet-open-from-start, rt-fade-in !important;
+    }
+    .rt-SheetContent:where([data-state='closed'][data-side='start']) {
+        animation-name: rt-sheet-close-to-start, rt-fade-out !important;
+    }
+    .rt-SheetContent:where([data-state='open'][data-side='end']) {
+        animation-name: rt-sheet-open-from-end, rt-fade-in !important;
+    }
+    .rt-SheetContent:where([data-state='closed'][data-side='end']) {
+        animation-name: rt-sheet-close-to-end, rt-fade-out !important;
+    }
+    .rt-SheetContent:where([data-state='open'][data-side='top']) {
+        animation-name: rt-sheet-open-from-top, rt-fade-in !important;
+    }
+    .rt-SheetContent:where([data-state='closed'][data-side='top']) {
+        animation-name: rt-sheet-close-to-top, rt-fade-out !important;
+    }
+    .rt-SheetContent:where([data-state='open'][data-side='bottom']) {
+        animation-name: rt-sheet-open-from-bottom, rt-fade-in !important;
+    }
+    .rt-SheetContent:where([data-state='closed'][data-side='bottom']) {
+        animation-name: rt-sheet-close-to-bottom, rt-fade-out !important;
+    }
+}
+@media (prefers-reduced-motion: reduce) {
+    .rt-SheetContent {
+        animation: none !important;
+    }
+}
 .rt-ScrollAreaRoot {
     display: flex;
     flex-direction: column;
@@ -11246,8 +11485,8 @@
     touch-action: none;
     background-color: var(--gray-a3);
     border-radius: var(--scrollarea-scrollbar-border-radius);
-    animation-duration: 120ms;
-    animation-timing-function: ease-out;
+    animation-duration: var(--motion-duration-micro);
+    animation-timing-function: var(--motion-ease-standard);
 }
 .rt-ScrollAreaScrollbar:where([data-orientation='vertical']) {
     flex-direction: column;
@@ -11269,7 +11508,7 @@
     position: relative;
     background-color: var(--gray-a8);
     border-radius: inherit;
-    transition: background-color 100ms;
+    transition: background-color var(--motion-duration-micro) var(--motion-ease-standard);
 }
 .rt-ScrollAreaThumb::before {
     content: '';
@@ -11465,7 +11704,7 @@
     margin-right: calc(-1 * var(--border-width-standard) * 0.5);
     width: var(--border-width-standard);
     background-color: var(--gray-a4);
-    transition: opacity calc(0.8 * var(--segmented-control-transition-duration)) var(--ease-1);
+    transition: opacity calc(0.8 * var(--segmented-control-transition-duration)) var(--motion-ease-standard);
 }
 :where(.rt-SegmentedControlItem:first-child) .rt-SegmentedControlItemSeparator,
   :where(.rt-SegmentedControlItem:where([data-state='on'], :focus-visible)) .rt-SegmentedControlItemSeparator,
@@ -11484,7 +11723,7 @@
     left: 0;
     height: 100%;
     pointer-events: none;
-    transition: transform var(--segmented-control-transition-duration) var(--ease-3);
+    transition: transform var(--segmented-control-transition-duration) var(--motion-spring-snappy);
 }
 .rt-SegmentedControlIndicator::before {
     inset: var(--border-width-standard);
@@ -13599,7 +13838,7 @@
     justify-content: space-between;
 }
 .rt-SidebarMenuSubTrigger :where(.rt-SidebarMenuSubTriggerIcon) {
-    transition: transform 0.2s ease;
+    transition: transform var(--motion-duration-micro) var(--motion-ease-standard);
 }
 .rt-SidebarMenuSubTrigger:where([data-state="open"]) :where(.rt-SidebarMenuSubTriggerIcon) {
     transform: rotate(90deg);
@@ -13611,10 +13850,10 @@
     overflow: visible;
 }
 .rt-SidebarMenuSubContent:where([data-state="open"]) {
-    animation: rt-sidebar-slide-down 200ms ease-out;
+    animation: rt-sidebar-slide-down var(--motion-duration-small) var(--motion-ease-standard);
 }
 .rt-SidebarMenuSubContent:where([data-state="closed"]) {
-    animation: rt-sidebar-slide-up 200ms ease-out;
+    animation: rt-sidebar-slide-up var(--motion-duration-small) var(--motion-ease-standard);
 }
 @keyframes rt-sidebar-slide-down {
     from {
@@ -13691,6 +13930,43 @@
     margin-top: calc(var(--space-1) / 2);
     margin-bottom: calc(var(--space-1) / 2);
 }
+.rt-ShellSidebarRail :where(.rt-SidebarContent),
+:where(.rt-ShellSidebar[data-state='rail'] .rt-SidebarContent) {
+    padding: var(--space-2);
+}
+.rt-ShellSidebarRail :where(.rt-SidebarMenuButton),
+:where(.rt-ShellSidebar[data-state='rail'] .rt-SidebarMenuButton) {
+    justify-content: center;
+    align-items: center;
+    flex-direction: column;
+    gap: var(--space-1);
+    padding: var(--space-2) var(--space-1);
+}
+.rt-ShellSidebarRail :where(.rt-SidebarMenuBadge),
+.rt-ShellSidebarRail :where(.rt-SidebarMenuShortcut),
+:where(.rt-ShellSidebar[data-state='rail'] .rt-SidebarMenuBadge),
+:where(.rt-ShellSidebar[data-state='rail'] .rt-SidebarMenuShortcut) {
+    display: none;
+}
+.rt-ShellSidebarRail :where(.rt-SidebarGroupLabel),
+:where(.rt-ShellSidebar[data-state='rail'] .rt-SidebarGroupLabel) {
+    display: block;
+    text-align: center;
+    font-size: var(--font-size-0);
+    line-height: var(--line-height-0);
+    color: var(--gray-a9);
+    font-weight: var(--font-weight-medium);
+}
+.rt-ShellSidebarRail :where(.rt-SidebarMenuSubTriggerIcon),
+:where(.rt-ShellSidebar[data-state='rail'] .rt-SidebarMenuSubTriggerIcon) {
+    display: none;
+}
+.rt-ShellSidebarRail :where(.rt-SidebarMenuSubList),
+:where(.rt-ShellSidebar[data-state='rail'] .rt-SidebarMenuSubList) {
+    padding-left: 0;
+    border-left: none;
+    margin-left: 0;
+}
 .rt-SidebarContainer:where(.rt-variant-outline) {
     background-color: var(--color-panel);
     -webkit-backdrop-filter: var(--backdrop-filter-panel);
@@ -13907,7 +14183,7 @@
     -webkit-user-select: none;
             user-select: none;
     justify-content: flex-start;
-    transition: background var(--duration-2) var(--ease-1), box-shadow var(--duration-2) var(--ease-1), filter var(--duration-2) var(--ease-1);
+    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);
 }
 .rt-SidebarHeader :where(.rt-SidebarMenuButton):where(:focus-visible), .rt-SidebarFooter :where(.rt-SidebarMenuButton):where(:focus-visible) {
     outline: 2px solid var(--focus-8);
@@ -14471,172 +14747,100 @@
 .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)) {
     color: var(--gray-11) !important;
 }
-.rt-SidebarRoot:where([data-collapsible="icon"]) {
-    transition: none;
-    overflow: visible;
-    flex-shrink: 0;
-}
-.rt-SidebarRoot:where([data-collapsible="icon"][data-state="collapsed"]) {
-    opacity: 1;
-    pointer-events: auto;
-}
-.rt-SidebarRoot:where([data-collapsible="icon"][data-state="collapsed"]):where(.rt-r-size-1) {
-    width: var(--sidebar-icon-width-1);
-    min-width: var(--sidebar-icon-width-1);
-    --sidebar-group-label-width: calc(var(--sidebar-icon-width-1) - (var(--space-2) * 2));
-    --sidebar-button-label-width: calc(var(--sidebar-group-label-width) - (var(--space-1) * 2));
+.rt-ShellRoot {
+    inline-size: 100%;
+    display: flex;
+    flex-direction: column;
+    block-size: 100vh;
+    --shell-sidebar-rail-width: var(--space-9, 64px);
+    --shell-sidebar-panel-width: 288px;
+    --shell-sidebar-combined-width: calc(var(--shell-sidebar-rail-width) + var(--shell-sidebar-panel-width));
+    --shell-overlay-width: auto;
 }
-.rt-SidebarRoot:where([data-collapsible="icon"][data-state="collapsed"]):where(.rt-r-size-2) {
-    width: var(--sidebar-icon-width-2);
-    min-width: var(--sidebar-icon-width-2);
-    --sidebar-group-label-width: calc(var(--sidebar-icon-width-2) - (var(--space-2) * 2));
-    --sidebar-button-label-width: calc(var(--sidebar-group-label-width) - (var(--space-1) * 2));
+@supports (height: 100dvh) {
+    .rt-ShellRoot {
+        block-size: 100dvh;
+    }
 }
-.rt-SidebarRoot:where([data-collapsible="icon"][data-state="expanded"]) {
-    width: var(--sidebar-width);
-    min-width: var(--sidebar-width);
-    opacity: 1;
-    pointer-events: auto;
+.rt-ShellHeader {
+    position: sticky;
+    top: 0;
+    inset-inline: 0;
+    z-index: var(--shell-z-header, 10);
+    block-size: var(--shell-header-height, 64px);
+    display: flex;
+    align-items: center;
+    background-color: var(--color-panel);
 }
-.rt-SidebarContainer:where([data-collapsible="icon"]) {
-    width: 100%;
-    min-width: 0;
-    flex-shrink: 0;
+.rt-ShellBody {
+    display: flex;
+    flex-direction: row;
+    align-items: stretch;
+    inline-size: 100%;
+    flex: 1 1 auto;
+    block-size: auto;
+    min-block-size: 0;
+    min-inline-size: 0;
+    overflow: hidden;
 }
-.rt-SidebarContent:where([data-collapsible="icon"]) {
-    width: 100%;
-    min-width: 0;
-    flex-shrink: 0;
+.rt-ShellSidebar {
+    display: flex;
+    flex-direction: row;
+    align-items: stretch;
+    block-size: 100%;
+    min-block-size: 0;
 }
-.rt-SidebarRoot:where([data-collapsible="icon"][data-state="collapsed"]) :where(.rt-SidebarMenuButton) {
-    justify-content: center;
+.rt-ShellSidebarRail {
+    display: flex;
     flex-direction: column;
-    padding: var(--space-2) var(--space-1);
-    gap: var(--space-1);
-    min-height: auto;
-}
-.rt-SidebarRoot:where([data-collapsible="icon"][data-state="collapsed"]) :where(.rt-SidebarMenuButton) :where(span) {
-    display: block;
-    font-size: var(--font-size-0);
-    line-height: var(--line-height-0);
-    color: var(--gray-a10);
-    text-align: center;
-    font-weight: var(--font-weight-medium);
-    max-width: 100%;
+    align-items: center;
+    gap: var(--space-2);
+    padding-block: var(--space-2);
+    block-size: 100%;
+    min-block-size: 0;
     overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
+    opacity: 0;
+    transition: inline-size var(--motion-duration-small) var(--motion-ease-standard), opacity var(--motion-duration-small) var(--motion-ease-standard) var(--motion-duration-small);
 }
-.rt-SidebarRoot:where([data-collapsible="icon"][data-state="collapsed"]) :where(.rt-SidebarGroupLabel) {
-    max-width: var(--sidebar-group-label-width);
+.rt-ShellSidebarPanel {
     display: block;
-    text-align: center;
-    min-width: 0;
-    min-height: auto;
-    max-width: var(--sidebar-group-label-width);
-    font-size: var(--font-size-0);
-    line-height: var(--line-height-0);
-    color: var(--gray-a9);
-    font-weight: var(--font-weight-medium);
-    padding: var(--space-1) var(--space-1);
-    margin: var(--space-2) 0 var(--space-1) 0;
+    opacity: 0;
+    transition: inline-size var(--motion-duration-small) var(--motion-ease-standard), opacity var(--motion-duration-small) var(--motion-ease-standard) var(--motion-duration-small);
+    block-size: 100%;
+    min-block-size: 0;
     overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
 }
-.rt-SidebarRoot:where([data-collapsible="icon"][data-state="collapsed"]) :where(.rt-SidebarMenuButton span) {
-    max-width: var(--sidebar-button-label-width);
-    min-width: 0;
+.rt-ShellSidebarSingle {
+    opacity: 0;
+    transition: inline-size var(--motion-duration-small) var(--motion-ease-standard), opacity var(--motion-duration-small) var(--motion-ease-standard) var(--motion-duration-small);
+    block-size: 100%;
     overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    color: var(--gray-a12);
-    font-weight: var(--font-weight-medium);
-}
-.rt-SidebarRoot.rt-menu-variant-solid:where([data-collapsible="icon"][data-state="collapsed"]) :where(.rt-SidebarMenuButton[data-highlighted] span),
-  .rt-SidebarRoot.rt-menu-variant-solid:where([data-collapsible="icon"][data-state="collapsed"]) :where(.rt-SidebarMenuButton[data-active] span) {
-    color: var(--accent-contrast) !important;
-}
-:where(.rt-SidebarGroup:first-child) :is(.rt-SidebarRoot:where([data-collapsible="icon"][data-state="collapsed"]) :where(.rt-SidebarGroupLabel)) {
-    margin-top: 0;
-}
-.rt-SidebarRoot:where([data-collapsible="icon"][data-state="collapsed"]) :where(.rt-SidebarMenuBadge),
-  .rt-SidebarRoot:where([data-collapsible="icon"][data-state="collapsed"]) :where(.rt-SidebarMenuShortcut) {
-    display: none;
-}
-.rt-SidebarRoot:where([data-collapsible="icon"][data-state="collapsed"]) :where(.rt-SidebarMenuSubTriggerIcon) {
-    display: none;
-}
-.rt-SidebarRoot:where([data-collapsible="icon"][data-state="collapsed"]) :where(.rt-SidebarMenuSubList) {
-    padding-left: 0;
-    border-left: none;
-    margin-left: 0;
-}
-.rt-SidebarRoot:where([data-collapsible="icon"][data-state="collapsed"]) :where(.rt-SidebarMenu) {
-    padding: var(--space-2);
-}
-.rt-SidebarRoot:where([data-collapsible="icon"][data-state="collapsed"]):where(.rt-r-size-1) :where(.rt-SidebarMenuButton svg) {
-    width: var(--content-icon-size-2) !important;
-    height: var(--content-icon-size-2) !important;
-    color: currentColor !important;
-}
-.rt-SidebarRoot:where([data-collapsible="icon"][data-state="collapsed"]):where(.rt-r-size-2) :where(.rt-SidebarMenuButton svg) {
-    width: var(--content-icon-size-3) !important;
-    height: var(--content-icon-size-3) !important;
-    color: currentColor !important;
 }
-.rt-SidebarRoot:where([data-collapsible="icon"][data-type="floating"]) {
-    transition: none;
-    overflow: visible;
-    flex-shrink: 0;
-}
-.rt-SidebarRoot:where([data-collapsible="icon"][data-type="floating"][data-state="collapsed"]) {
-    opacity: 1;
-    pointer-events: auto;
-    margin: var(--space-2);
-}
-.rt-SidebarRoot:where([data-collapsible="icon"][data-type="floating"][data-state="collapsed"]):where(.rt-r-size-1) {
-    width: var(--sidebar-icon-width-1);
-    min-width: var(--sidebar-icon-width-1);
-}
-.rt-SidebarRoot:where([data-collapsible="icon"][data-type="floating"][data-state="collapsed"]):where(.rt-r-size-2) {
-    width: var(--sidebar-icon-width-2);
-    min-width: var(--sidebar-icon-width-2);
+:where(.rt-ShellSidebarRail):not([data-visible]),
+:where(.rt-ShellSidebarPanel):not([data-visible]),
+:where(.rt-ShellSidebarSingle):not([data-visible]) {
+    opacity: 0;
+    transition: opacity var(--motion-duration-small) var(--motion-ease-standard), inline-size var(--motion-duration-small) var(--motion-ease-standard) var(--motion-duration-small);
 }
-.rt-SidebarRoot:where([data-collapsible="icon"][data-type="floating"][data-state="expanded"]) {
-    width: var(--sidebar-width);
-    min-width: var(--sidebar-width);
+[data-visible] {
     opacity: 1;
-    pointer-events: auto;
-    margin: var(--space-2);
-}
-@media (max-width: 768px) {
-    .rt-SidebarRoot:where([data-collapsible="icon"]) {
-        display: none;
-    }
-    .rt-SidebarRoot:where([data-collapsible="icon"][data-state="expanded"]) {
-        display: flex;
-        position: fixed;
-        top: 0;
-        left: 0;
-        height: 100vh;
-        width: var(--sidebar-width);
-        z-index: 50;
-        box-shadow: var(--shadow-6);
-    }
 }
 @media (prefers-reduced-motion: reduce) {
-    .rt-SidebarRoot:where([data-collapsible="icon"]) {
+    .rt-ShellSidebarRail,
+  .rt-ShellSidebarPanel,
+  .rt-ShellSidebarSingle {
         transition: none;
     }
 }
-@media (forced-colors: active) {
-    :where(.rt-SidebarMenuButton):focus-visible {
-        outline: 2px solid CanvasText;
-    }
-    :where(.rt-SidebarTrigger):focus-visible {
-        outline: 2px solid CanvasText;
-    }
+.rt-ShellContent {
+    flex: 1 1 auto;
+    block-size: 100%;
+    min-block-size: 0;
+    min-inline-size: 0;
+    overflow: auto;
+}
+:where(.rt-SheetContent) :where(.rt-ShellSidebarPanel) {
+    transition: none !important;
 }
 .rt-SliderRoot {
     --slider-thumb-width: var(--space-3);
@@ -16042,6 +16246,7 @@
     padding: var(--text-area-padding-y) var(--text-area-padding-x);
     border-radius: inherit;
     resize: none;
+    min-width: 0;
     display: block;
     width: 100%;
     flex-grow: 1;
@@ -17583,8 +17788,8 @@
     background-color: var(--gray-12);
     border-radius: var(--radius-1);
     transform-origin: var(--radix-tooltip-content-transform-origin);
-    animation-duration: var(--duration-2);
-    animation-timing-function: var(--ease-3);
+    animation-duration: var(--motion-duration-small);
+    animation-timing-function: var(--motion-spring-snappy);
 }
 @media (prefers-reduced-motion: no-preference) {
     .rt-TooltipContent:where([data-state='delayed-open']):where([data-side='top']) {
@@ -17621,6 +17826,280 @@
 .rt-UserCard:where(.rt-r-size-4) :where(.rt-Flex) {
     gap: var(--space-5);
 }
+.rt-ChatbarField {
+    position: relative;
+    width: 100%;
+    min-width: 0;
+}
+.rt-ChatbarRoot {
+    --chatbar-attachment-thumb: var(--space-8);
+    transition: outline var(--motion-duration-small) var(--motion-spring-snappy);
+}
+.rt-ChatbarInput {
+    display: block;
+    width: 100%;
+    min-width: 0;
+    resize: none;
+    border: 0;
+    outline: 0;
+    background: transparent;
+    padding: 0;
+    margin: 0;
+    color: inherit;
+    font: inherit;
+    line-height: inherit;
+    text-align: start;
+    transition: height 150ms ease-out;
+}
+.rt-ChatbarCard :where(.rt-ChatbarGrid) {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-4);
+    width: 100%;
+}
+.rt-ChatbarRoot:where([data-state="closed"]) :where(.rt-ChatbarGrid) {
+    flex-direction: row;
+    align-items: center;
+    flex-wrap: wrap;
+}
+.rt-ChatbarRoot:where([data-state="closed"]) :where(.rt-ChatbarAttachmentsRow) {
+    flex-basis: 100%;
+    order: -1;
+}
+.rt-ChatbarTextarea {
+    flex: 1;
+    min-width: 0;
+}
+.rt-ChatbarSend {
+    transition: opacity 150ms ease-in-out;
+}
+.rt-ChatbarRoot:where([data-state="closed"]) :where(.rt-ChatbarRow) {
+    display: none;
+}
+.rt-ChatbarRoot:where([data-state="open"]) :where(.rt-ChatbarRow) {
+    display: block;
+    width: 100%;
+}
+.rt-ChatbarAttachmentsRow {
+    width: 100%;
+}
+.rt-ChatbarScrollArea {
+    border-radius: var(--chatbar-attachments-radius);
+}
+.rt-ChatbarScrollArea :where(.rt-ScrollAreaScrollbar) {
+    display: none;
+}
+.rt-ChatbarAttachmentPreview {
+    height: var(--chatbar-attachment-thumb);
+    width: var(--chatbar-attachment-thumb);
+    min-width: var(--chatbar-attachment-thumb);
+    flex-shrink: 0;
+    border-radius: var(--radius-1);
+    overflow: hidden;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    background: var(--gray-a3);
+}
+.rt-ChatbarAttachmentImage {
+    height: 100%;
+    width: auto;
+    object-fit: contain;
+    max-width: none;
+}
+.rt-ChatbarAttachment {
+    position: relative;
+}
+.rt-ChatbarAttachmentRemove {
+    position: absolute;
+    top: var(--chatbar-remove-offset);
+    right: var(--chatbar-remove-offset);
+}
+.rt-ChatbarCard {
+    width: 100%;
+    transition: all var(--motion-duration-small) var(--motion-spring-snappy);
+}
+.rt-ChatbarDropOverlay {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: var(--gray-a3);
+    border-radius: inherit;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 10;
+    animation: rt-fade-in var(--motion-duration-small) var(--motion-spring-snappy);
+}
+.rt-ChatbarDropContent {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: var(--space-2);
+    color: var(--accent-11);
+}
+.rt-ChatbarDropIcon {
+    width: var(--space-6);
+    height: var(--space-6);
+}
+.rt-ChatbarInlineStart,
+.rt-ChatbarInlineEnd {
+    flex-shrink: 0;
+    display: inline-flex;
+    align-items: center;
+    gap: var(--space-2);
+}
+.rt-ChatbarRowStart {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--space-2);
+    flex-shrink: 0;
+}
+.rt-ChatbarRowEnd {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--space-2);
+    flex-shrink: 0;
+    margin-left: auto;
+}
+.rt-ChatbarRoot:where(.rt-r-size-1) {
+    font-size: var(--font-size-1);
+    line-height: var(--line-height-1);
+    --chatbar-attachment-thumb: var(--space-8);
+    --chatbar-remove-offset: var(--space-1);
+    --chatbar-attachments-radius: min(var(--radius-5), calc(var(--radius-1) + var(--space-1)));
+}
+.rt-ChatbarRoot:where(.rt-r-size-2) {
+    font-size: var(--font-size-2);
+    line-height: var(--line-height-2);
+    --chatbar-attachment-thumb: var(--space-9);
+    --chatbar-remove-offset: var(--space-2);
+    --chatbar-attachments-radius: min(var(--radius-6), calc(var(--radius-2) + var(--space-2)));
+}
+.rt-ChatbarRoot:where(.rt-r-size-3) {
+    font-size: var(--font-size-3);
+    line-height: var(--line-height-3);
+    --chatbar-attachment-thumb: var(--space-9);
+    --chatbar-remove-offset: var(--space-3);
+    --chatbar-attachments-radius: min(var(--radius-7), calc(var(--radius-3) + var(--space-3)));
+}
+@media (min-width: 520px) {
+    .rt-ChatbarRoot:where(.xs\:rt-r-size-1) {
+        font-size: var(--font-size-1);
+        line-height: var(--line-height-1);
+        --chatbar-attachment-thumb: var(--space-8);
+        --chatbar-remove-offset: var(--space-1);
+        --chatbar-attachments-radius: min(var(--radius-5), calc(var(--radius-1) + var(--space-1)));
+    }
+    .rt-ChatbarRoot:where(.xs\:rt-r-size-2) {
+        font-size: var(--font-size-2);
+        line-height: var(--line-height-2);
+        --chatbar-attachment-thumb: var(--space-9);
+        --chatbar-remove-offset: var(--space-2);
+        --chatbar-attachments-radius: min(var(--radius-6), calc(var(--radius-2) + var(--space-2)));
+    }
+    .rt-ChatbarRoot:where(.xs\:rt-r-size-3) {
+        font-size: var(--font-size-3);
+        line-height: var(--line-height-3);
+        --chatbar-attachment-thumb: var(--space-9);
+        --chatbar-remove-offset: var(--space-3);
+        --chatbar-attachments-radius: min(var(--radius-7), calc(var(--radius-3) + var(--space-3)));
+    }
+}
+@media (min-width: 768px) {
+    .rt-ChatbarRoot:where(.sm\:rt-r-size-1) {
+        font-size: var(--font-size-1);
+        line-height: var(--line-height-1);
+        --chatbar-attachment-thumb: var(--space-8);
+        --chatbar-remove-offset: var(--space-1);
+        --chatbar-attachments-radius: min(var(--radius-5), calc(var(--radius-1) + var(--space-1)));
+    }
+    .rt-ChatbarRoot:where(.sm\:rt-r-size-2) {
+        font-size: var(--font-size-2);
+        line-height: var(--line-height-2);
+        --chatbar-attachment-thumb: var(--space-9);
+        --chatbar-remove-offset: var(--space-2);
+        --chatbar-attachments-radius: min(var(--radius-6), calc(var(--radius-2) + var(--space-2)));
+    }
+    .rt-ChatbarRoot:where(.sm\:rt-r-size-3) {
+        font-size: var(--font-size-3);
+        line-height: var(--line-height-3);
+        --chatbar-attachment-thumb: var(--space-9);
+        --chatbar-remove-offset: var(--space-3);
+        --chatbar-attachments-radius: min(var(--radius-7), calc(var(--radius-3) + var(--space-3)));
+    }
+}
+@media (min-width: 1024px) {
+    .rt-ChatbarRoot:where(.md\:rt-r-size-1) {
+        font-size: var(--font-size-1);
+        line-height: var(--line-height-1);
+        --chatbar-attachment-thumb: var(--space-8);
+        --chatbar-remove-offset: var(--space-1);
+        --chatbar-attachments-radius: min(var(--radius-5), calc(var(--radius-1) + var(--space-1)));
+    }
+    .rt-ChatbarRoot:where(.md\:rt-r-size-2) {
+        font-size: var(--font-size-2);
+        line-height: var(--line-height-2);
+        --chatbar-attachment-thumb: var(--space-9);
+        --chatbar-remove-offset: var(--space-2);
+        --chatbar-attachments-radius: min(var(--radius-6), calc(var(--radius-2) + var(--space-2)));
+    }
+    .rt-ChatbarRoot:where(.md\:rt-r-size-3) {
+        font-size: var(--font-size-3);
+        line-height: var(--line-height-3);
+        --chatbar-attachment-thumb: var(--space-9);
+        --chatbar-remove-offset: var(--space-3);
+        --chatbar-attachments-radius: min(var(--radius-7), calc(var(--radius-3) + var(--space-3)));
+    }
+}
+@media (min-width: 1280px) {
+    .rt-ChatbarRoot:where(.lg\:rt-r-size-1) {
+        font-size: var(--font-size-1);
+        line-height: var(--line-height-1);
+        --chatbar-attachment-thumb: var(--space-8);
+        --chatbar-remove-offset: var(--space-1);
+        --chatbar-attachments-radius: min(var(--radius-5), calc(var(--radius-1) + var(--space-1)));
+    }
+    .rt-ChatbarRoot:where(.lg\:rt-r-size-2) {
+        font-size: var(--font-size-2);
+        line-height: var(--line-height-2);
+        --chatbar-attachment-thumb: var(--space-9);
+        --chatbar-remove-offset: var(--space-2);
+        --chatbar-attachments-radius: min(var(--radius-6), calc(var(--radius-2) + var(--space-2)));
+    }
+    .rt-ChatbarRoot:where(.lg\:rt-r-size-3) {
+        font-size: var(--font-size-3);
+        line-height: var(--line-height-3);
+        --chatbar-attachment-thumb: var(--space-9);
+        --chatbar-remove-offset: var(--space-3);
+        --chatbar-attachments-radius: min(var(--radius-7), calc(var(--radius-3) + var(--space-3)));
+    }
+}
+@media (min-width: 1640px) {
+    .rt-ChatbarRoot:where(.xl\:rt-r-size-1) {
+        font-size: var(--font-size-1);
+        line-height: var(--line-height-1);
+        --chatbar-attachment-thumb: var(--space-8);
+        --chatbar-remove-offset: var(--space-1);
+        --chatbar-attachments-radius: min(var(--radius-5), calc(var(--radius-1) + var(--space-1)));
+    }
+    .rt-ChatbarRoot:where(.xl\:rt-r-size-2) {
+        font-size: var(--font-size-2);
+        line-height: var(--line-height-2);
+        --chatbar-attachment-thumb: var(--space-9);
+        --chatbar-remove-offset: var(--space-2);
+        --chatbar-attachments-radius: min(var(--radius-6), calc(var(--radius-2) + var(--space-2)));
+    }
+    .rt-ChatbarRoot:where(.xl\:rt-r-size-3) {
+        font-size: var(--font-size-3);
+        line-height: var(--line-height-3);
+        --chatbar-attachment-thumb: var(--space-9);
+        --chatbar-remove-offset: var(--space-3);
+        --chatbar-attachments-radius: min(var(--radius-7), calc(var(--radius-3) + var(--space-3)));
+    }
+}
 .radix-themes:where([data-is-root-theme='true']) {
     position: relative;
     z-index: 0;