@womp/kookie-ui 0.10.0 → 0.12.0

package/styles.css

@@ -3420,6 +3420,20 @@
   --color-surface-translucent: rgba(255, 255, 255, var(--surface-opacity));
   --color-dialog-solid: white;
   --color-dialog-translucent: rgba(255, 255, 255, var(--dialog-opacity));
+  --color-page: var(--color-background);
+  --color-text: var(--gray-12);
+  --neutral-1: var(--gray-1);
+  --neutral-2: var(--gray-2);
+  --neutral-3: var(--gray-3);
+  --neutral-4: var(--gray-4);
+  --neutral-5: var(--gray-5);
+  --neutral-6: var(--gray-6);
+  --neutral-7: var(--gray-7);
+  --neutral-8: var(--gray-8);
+  --neutral-9: var(--gray-9);
+  --neutral-10: var(--gray-10);
+  --neutral-11: var(--gray-11);
+  --neutral-12: var(--gray-12);
   --material-blend: 100%;
   --material-alpha: 0;
   --color-transparent: rgb(0 0 0 / 0);
@@ -26721,11 +26735,11 @@
   outline-style: solid;
   outline-color: var(--accent-9);
 }
-.rt-Toolbar {
+.rt-AppBar {
   position: absolute;
   z-index: 1;
 }
-.rt-ToolbarInner {
+.rt-AppBarInner {
   display: grid;
   grid-template-columns: 1fr auto 1fr;
   -webkit-box-align: center;
@@ -26735,112 +26749,218 @@
   height: 100%;
   gap: var(--space-2);
 }
-.rt-Toolbar:where([data-anchor='left'], [data-anchor='right']) .rt-ToolbarInner {
+.rt-AppBar:where([data-anchor='left'], [data-anchor='right']) .rt-AppBarInner {
   grid-template-columns: 1fr;
   grid-template-rows: 1fr auto 1fr;
 }
-.rt-Toolbar:where([data-anchor='left'], [data-anchor='right']) .rt-ToolbarLeft {
+.rt-AppBar:where([data-anchor='left'], [data-anchor='right']) .rt-AppBarLeft {
   grid-column: 1;
   grid-row: 1;
   align-self: start;
   justify-self: center;
 }
-.rt-Toolbar:where([data-anchor='left'], [data-anchor='right']) .rt-ToolbarCenter {
+.rt-AppBar:where([data-anchor='left'], [data-anchor='right']) .rt-AppBarCenter {
   grid-column: 1;
   grid-row: 2;
   align-self: center;
   justify-self: center;
 }
-.rt-Toolbar:where([data-anchor='left'], [data-anchor='right']) .rt-ToolbarRight {
+.rt-AppBar:where([data-anchor='left'], [data-anchor='right']) .rt-AppBarRight {
   grid-column: 1;
   grid-row: 3;
   align-self: end;
   justify-self: center;
 }
-.rt-Toolbar:where([data-anchor='top']) {
+.rt-AppBar:where([data-anchor='top']) {
   top: 0;
   left: 0;
   right: 0;
 }
-.rt-Toolbar:where([data-anchor='bottom']) {
+.rt-AppBar:where([data-anchor='bottom']) {
   bottom: 0;
   left: 0;
   right: 0;
 }
-.rt-Toolbar:where([data-anchor='left']) {
+.rt-AppBar:where([data-anchor='left']) {
   top: 0;
   bottom: 0;
   left: 0;
 }
-.rt-Toolbar:where([data-anchor='right']) {
+.rt-AppBar:where([data-anchor='right']) {
   top: 0;
   bottom: 0;
   right: 0;
 }
-.rt-Toolbar:where(:not([data-floating])) {
+.rt-AppBar:where(:not([data-floating])) {
   --base-card-border-radius: 0;
   border-radius: 0;
 }
-.rt-Toolbar:where([data-anchor='top']:not([data-floating]))::after {
+.rt-AppBar:where([data-anchor='top']:not([data-floating]))::after {
   -webkit-box-shadow: inset 0 -1px 0 0 var(--gray-6);
           box-shadow: inset 0 -1px 0 0 var(--gray-6);
 }
-:where([data-panel-background='translucent'],[data-material='translucent']) .rt-Toolbar:where([data-anchor='top']:not([data-floating]))::after,.rt-Toolbar:where([data-anchor='top']:not([data-floating])):where([data-panel-background='translucent'],[data-material='translucent'])::after {
+:where([data-panel-background='translucent'],[data-material='translucent']) .rt-AppBar:where([data-anchor='top']:not([data-floating]))::after,.rt-AppBar:where([data-anchor='top']:not([data-floating])):where([data-panel-background='translucent'],[data-material='translucent'])::after {
   -webkit-box-shadow: inset 0 -1px 0 0 var(--gray-a6);
           box-shadow: inset 0 -1px 0 0 var(--gray-a6);
 }
-.rt-Toolbar:where([data-anchor='bottom']:not([data-floating]))::after {
+.rt-AppBar:where([data-anchor='bottom']:not([data-floating]))::after {
   -webkit-box-shadow: inset 0 1px 0 0 var(--gray-6);
           box-shadow: inset 0 1px 0 0 var(--gray-6);
 }
-:where([data-panel-background='translucent'],[data-material='translucent']) .rt-Toolbar:where([data-anchor='bottom']:not([data-floating]))::after,.rt-Toolbar:where([data-anchor='bottom']:not([data-floating])):where([data-panel-background='translucent'],[data-material='translucent'])::after {
+:where([data-panel-background='translucent'],[data-material='translucent']) .rt-AppBar:where([data-anchor='bottom']:not([data-floating]))::after,.rt-AppBar:where([data-anchor='bottom']:not([data-floating])):where([data-panel-background='translucent'],[data-material='translucent'])::after {
   -webkit-box-shadow: inset 0 1px 0 0 var(--gray-a6);
           box-shadow: inset 0 1px 0 0 var(--gray-a6);
 }
-.rt-Toolbar:where([data-anchor='left']:not([data-floating]))::after {
+.rt-AppBar:where([data-anchor='left']:not([data-floating]))::after {
   -webkit-box-shadow: inset -1px 0 0 0 var(--gray-6);
           box-shadow: inset -1px 0 0 0 var(--gray-6);
 }
-:where([data-panel-background='translucent'],[data-material='translucent']) .rt-Toolbar:where([data-anchor='left']:not([data-floating]))::after,.rt-Toolbar:where([data-anchor='left']:not([data-floating])):where([data-panel-background='translucent'],[data-material='translucent'])::after {
+:where([data-panel-background='translucent'],[data-material='translucent']) .rt-AppBar:where([data-anchor='left']:not([data-floating]))::after,.rt-AppBar:where([data-anchor='left']:not([data-floating])):where([data-panel-background='translucent'],[data-material='translucent'])::after {
   -webkit-box-shadow: inset -1px 0 0 0 var(--gray-a6);
           box-shadow: inset -1px 0 0 0 var(--gray-a6);
 }
-.rt-Toolbar:where([data-anchor='right']:not([data-floating]))::after {
+.rt-AppBar:where([data-anchor='right']:not([data-floating]))::after {
   -webkit-box-shadow: inset 1px 0 0 0 var(--gray-6);
           box-shadow: inset 1px 0 0 0 var(--gray-6);
 }
-:where([data-panel-background='translucent'],[data-material='translucent']) .rt-Toolbar:where([data-anchor='right']:not([data-floating]))::after,.rt-Toolbar:where([data-anchor='right']:not([data-floating])):where([data-panel-background='translucent'],[data-material='translucent'])::after {
+:where([data-panel-background='translucent'],[data-material='translucent']) .rt-AppBar:where([data-anchor='right']:not([data-floating]))::after,.rt-AppBar:where([data-anchor='right']:not([data-floating])):where([data-panel-background='translucent'],[data-material='translucent'])::after {
   -webkit-box-shadow: inset 1px 0 0 0 var(--gray-a6);
           box-shadow: inset 1px 0 0 0 var(--gray-a6);
 }
-.rt-Toolbar:where(.rt-variant-ghost:not([data-floating]))::after {
+.rt-AppBar:where(.rt-variant-ghost:not([data-floating]))::after {
   -webkit-box-shadow: none;
           box-shadow: none;
 }
-.rt-Toolbar:where(.rt-variant-soft:not([data-floating]))::after {
+.rt-AppBar:where(.rt-variant-soft:not([data-floating]))::after {
   -webkit-box-shadow: none;
           box-shadow: none;
 }
-.rt-ToolbarTitle {
+.rt-AppBarTitle {
   min-width: 0;
   -ms-flex-negative: 1;
       flex-shrink: 1;
 }
-.rt-ToolbarSection {
+.rt-AppBarSection {
   min-width: 0;
 }
-.rt-ToolbarLeft {
+.rt-AppBarLeft {
   grid-column: 1;
   justify-self: start;
 }
-.rt-ToolbarCenter {
+.rt-AppBarCenter {
   grid-column: 2;
   justify-self: center;
 }
-.rt-ToolbarRight {
+.rt-AppBarRight {
   grid-column: 3;
   justify-self: end;
 }
+.rt-Toolbar {
+  --toolbar-group-inset: calc(var(--space-1) / 2);
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  -webkit-box-pack: justify;
+      -ms-flex-pack: justify;
+          justify-content: space-between;
+  gap: var(--toolbar-gap);
+  min-width: 0;
+  min-height: var(--toolbar-control-height);
+  -webkit-box-sizing: border-box;
+          box-sizing: border-box;
+}
+.rt-Toolbar:where([data-orientation='vertical']) {
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+      -ms-flex-direction: column;
+          flex-direction: column;
+  -webkit-box-pack: start;
+      -ms-flex-pack: start;
+          justify-content: flex-start;
+  min-height: 0;
+  min-width: var(--toolbar-control-height);
+}
+.rt-Toolbar:where(.rt-r-size-1) {
+  --toolbar-control-height: var(--space-5);
+  --toolbar-radius: max(var(--radius-1), var(--radius-full));
+  --toolbar-gap: var(--space-1);
+  --toolbar-title-gap: var(--space-2);
+}
+.rt-Toolbar:where(.rt-r-size-2) {
+  --toolbar-control-height: var(--space-6);
+  --toolbar-radius: max(var(--radius-2), var(--radius-full));
+  --toolbar-gap: var(--space-2);
+  --toolbar-title-gap: var(--space-3);
+}
+.rt-Toolbar:where(.rt-r-size-3) {
+  --toolbar-control-height: var(--space-7);
+  --toolbar-radius: max(var(--radius-3), var(--radius-full));
+  --toolbar-gap: var(--space-2);
+  --toolbar-title-gap: var(--space-4);
+}
+.rt-Toolbar:where(.rt-r-size-4) {
+  --toolbar-control-height: var(--space-8);
+  --toolbar-radius: max(var(--radius-4), var(--radius-full));
+  --toolbar-gap: var(--space-3);
+  --toolbar-title-gap: var(--space-5);
+}
+.rt-ToolbarGroup {
+  display: -webkit-inline-box;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  -ms-flex-negative: 0;
+      flex-shrink: 0;
+  -webkit-box-sizing: border-box;
+          box-sizing: border-box;
+  height: var(--toolbar-control-height);
+  padding: var(--toolbar-group-inset);
+  border-radius: var(--toolbar-radius);
+  background-color: var(--gray-a3);
+}
+.rt-ToolbarGroup:where([data-orientation='vertical']) {
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+      -ms-flex-direction: column;
+          flex-direction: column;
+  height: auto;
+  width: var(--toolbar-control-height);
+}
+.rt-ToolbarGroup > :where(.rt-BaseButton) {
+  --base-button-height: calc(var(--toolbar-control-height) - 2 * var(--toolbar-group-inset));
+  border-radius: max(0px, calc(var(--toolbar-radius) - var(--toolbar-group-inset)));
+}
+.rt-ToolbarSeparator {
+  -ms-flex-negative: 0;
+      flex-shrink: 0;
+  background-color: var(--gray-a5);
+}
+.rt-ToolbarSeparator:where([data-orientation='vertical']) {
+  width: var(--border-width-standard);
+  height: calc(var(--toolbar-control-height) / 2);
+}
+.rt-ToolbarSeparator:where([data-orientation='horizontal']) {
+  height: var(--border-width-standard);
+  width: calc(var(--toolbar-control-height) / 2);
+}
+.rt-ToolbarTitle {
+  min-width: 0;
+  -ms-flex-negative: 1;
+      flex-shrink: 1;
+}
+:where(.rt-Toolbar) .rt-ToolbarTitle:where(:not(:first-child)) {
+  -webkit-margin-start: calc(var(--toolbar-title-gap) - var(--toolbar-gap));
+          margin-inline-start: calc(var(--toolbar-title-gap) - var(--toolbar-gap));
+}
+:where(.rt-Toolbar) .rt-ToolbarTitle:where(:not(:last-child)) {
+  -webkit-margin-end: calc(var(--toolbar-title-gap) - var(--toolbar-gap));
+          margin-inline-end: calc(var(--toolbar-title-gap) - var(--toolbar-gap));
+}
 .rt-TooltipContent {
   -webkit-box-sizing: border-box;
           box-sizing: border-box;
@@ -26929,7 +27049,9 @@
   min-width: 0;
 }
 .rt-ChatbarRoot {
-  --chatbar-attachment-thumb: var(--space-8);
+  --chatbar-item-lead: var(--space-5);
+  --chatbar-item-lead-radius: var(--radius-2);
+  --chatbar-item-padding: var(--space-1);
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
@@ -27032,13 +27154,40 @@
 .rt-ChatbarScrollArea :where(.rt-ScrollAreaScrollbar[data-orientation='horizontal']) {
   --scrollarea-scrollbar-size: 3px;
 }
-.rt-ChatbarAttachmentPreview {
-  height: var(--chatbar-attachment-thumb);
-  width: var(--chatbar-attachment-thumb);
-  min-width: var(--chatbar-attachment-thumb);
+.rt-ChatbarAttachment {
+  position: relative;
+}
+.rt-ChatbarItem {
+  display: -webkit-inline-box;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  gap: var(--space-2);
   -ms-flex-negative: 0;
       flex-shrink: 0;
-  border-radius: var(--radius-1);
+  -webkit-box-sizing: border-box;
+          box-sizing: border-box;
+  max-width: 240px;
+  padding: var(--chatbar-item-padding);
+  padding-right: calc(var(--chatbar-item-padding) + var(--space-1));
+  border: 1px solid var(--gray-a5);
+  border-radius: calc(var(--chatbar-item-lead-radius) + var(--chatbar-item-padding));
+  background-color: var(--color-panel-solid);
+  -webkit-box-shadow: 0 1px 2px var(--gray-a3);
+          box-shadow: 0 1px 2px var(--gray-a3);
+  color: var(--gray-12);
+}
+.rt-ChatbarItem:where([data-status='error']) {
+  border-color: var(--red-a7);
+}
+.rt-ChatbarItemLead {
+  height: var(--chatbar-item-lead);
+  width: var(--chatbar-item-lead);
+  -ms-flex-negative: 0;
+      flex-shrink: 0;
+  border-radius: var(--chatbar-item-lead-radius);
   overflow: hidden;
   display: -webkit-inline-box;
   display: -ms-inline-flexbox;
@@ -27049,90 +27198,187 @@
   -webkit-box-pack: center;
       -ms-flex-pack: center;
           justify-content: center;
+  background: var(--accent-a3);
+  color: var(--accent-11);
+}
+.rt-ChatbarItemLead :where(svg) {
+  width: calc(var(--chatbar-item-lead) * 0.6);
+  height: calc(var(--chatbar-item-lead) * 0.6);
+}
+.rt-ChatbarItemLead:where([data-kind='image']) {
   background: var(--gray-a3);
 }
+.rt-ChatbarAttachment .rt-ChatbarItemLead:where([data-kind='icon']) {
+  background: var(--gray-a3);
+  color: var(--gray-11);
+}
 .rt-ChatbarAttachmentImage {
+  width: 100%;
   height: 100%;
-  width: auto;
-  -o-object-fit: contain;
-     object-fit: contain;
+  -o-object-fit: cover;
+     object-fit: cover;
   max-width: none;
 }
-.rt-ChatbarAttachment {
-  position: relative;
-  background-color: var(--gray-1);
-  border-radius: var(--radius-1);
-}
-.rt-ChatbarAttachment:where([data-kind='file']) {
-  max-width: 200px;
+.rt-ChatbarItemLabel {
+  min-width: 0;
 }
-.rt-ChatbarAttachmentRemove {
-  position: absolute;
-  top: var(--chatbar-remove-offset);
-  right: var(--chatbar-remove-offset);
+.rt-ChatbarItemRemove {
+  -ms-flex-negative: 0;
+      flex-shrink: 0;
+  margin-left: calc(var(--space-1) * -1);
 }
-.rt-ChatbarRoot:where(.rt-r-size-1) :where(.rt-ChatbarAttachment, .rt-ChatbarAttachmentPreview) {
-  border-radius: var(--radius-1);
+.rt-ChatbarRoot:where(.rt-r-size-1) {
+  --chatbar-item-lead: var(--space-4);
+  --chatbar-item-lead-radius: var(--radius-1);
+  --chatbar-item-padding: var(--space-1);
+  font-size: var(--font-size-1);
+  line-height: var(--line-height-1);
+  --chatbar-attachments-radius: var(--radius-1);
 }
-.rt-ChatbarRoot:where(.rt-r-size-2) :where(.rt-ChatbarAttachment, .rt-ChatbarAttachmentPreview) {
-  border-radius: var(--radius-2);
+.rt-ChatbarRoot:where(.rt-r-size-2) {
+  --chatbar-item-lead: var(--space-5);
+  --chatbar-item-lead-radius: var(--radius-2);
+  --chatbar-item-padding: var(--space-1);
+  font-size: var(--font-size-2);
+  line-height: var(--line-height-2);
+  --chatbar-attachments-radius: var(--radius-2);
 }
-.rt-ChatbarRoot:where(.rt-r-size-3) :where(.rt-ChatbarAttachment, .rt-ChatbarAttachmentPreview) {
-  border-radius: var(--radius-3);
+.rt-ChatbarRoot:where(.rt-r-size-3) {
+  --chatbar-item-lead: calc(var(--space-5) + var(--space-1));
+  --chatbar-item-lead-radius: var(--radius-2);
+  --chatbar-item-padding: calc(var(--space-1) * 1.5);
+  font-size: var(--font-size-3);
+  line-height: var(--line-height-3);
+  --chatbar-attachments-radius: var(--radius-3);
 }
 @media (min-width: 520px) {
-  .rt-ChatbarRoot:where(.xs\:rt-r-size-1) :where(.rt-ChatbarAttachment, .rt-ChatbarAttachmentPreview) {
-    border-radius: var(--radius-1);
+  .rt-ChatbarRoot:where(.xs\:rt-r-size-1) {
+    --chatbar-item-lead: var(--space-4);
+    --chatbar-item-lead-radius: var(--radius-1);
+    --chatbar-item-padding: var(--space-1);
+    font-size: var(--font-size-1);
+    line-height: var(--line-height-1);
+    --chatbar-attachments-radius: var(--radius-1);
   }
-  .rt-ChatbarRoot:where(.xs\:rt-r-size-2) :where(.rt-ChatbarAttachment, .rt-ChatbarAttachmentPreview) {
-    border-radius: var(--radius-2);
+  .rt-ChatbarRoot:where(.xs\:rt-r-size-2) {
+    --chatbar-item-lead: var(--space-5);
+    --chatbar-item-lead-radius: var(--radius-2);
+    --chatbar-item-padding: var(--space-1);
+    font-size: var(--font-size-2);
+    line-height: var(--line-height-2);
+    --chatbar-attachments-radius: var(--radius-2);
   }
-  .rt-ChatbarRoot:where(.xs\:rt-r-size-3) :where(.rt-ChatbarAttachment, .rt-ChatbarAttachmentPreview) {
-    border-radius: var(--radius-3);
+  .rt-ChatbarRoot:where(.xs\:rt-r-size-3) {
+    --chatbar-item-lead: calc(var(--space-5) + var(--space-1));
+    --chatbar-item-lead-radius: var(--radius-2);
+    --chatbar-item-padding: calc(var(--space-1) * 1.5);
+    font-size: var(--font-size-3);
+    line-height: var(--line-height-3);
+    --chatbar-attachments-radius: var(--radius-3);
   }
 }
 @media (min-width: 768px) {
-  .rt-ChatbarRoot:where(.sm\:rt-r-size-1) :where(.rt-ChatbarAttachment, .rt-ChatbarAttachmentPreview) {
-    border-radius: var(--radius-1);
+  .rt-ChatbarRoot:where(.sm\:rt-r-size-1) {
+    --chatbar-item-lead: var(--space-4);
+    --chatbar-item-lead-radius: var(--radius-1);
+    --chatbar-item-padding: var(--space-1);
+    font-size: var(--font-size-1);
+    line-height: var(--line-height-1);
+    --chatbar-attachments-radius: var(--radius-1);
   }
-  .rt-ChatbarRoot:where(.sm\:rt-r-size-2) :where(.rt-ChatbarAttachment, .rt-ChatbarAttachmentPreview) {
-    border-radius: var(--radius-2);
+  .rt-ChatbarRoot:where(.sm\:rt-r-size-2) {
+    --chatbar-item-lead: var(--space-5);
+    --chatbar-item-lead-radius: var(--radius-2);
+    --chatbar-item-padding: var(--space-1);
+    font-size: var(--font-size-2);
+    line-height: var(--line-height-2);
+    --chatbar-attachments-radius: var(--radius-2);
   }
-  .rt-ChatbarRoot:where(.sm\:rt-r-size-3) :where(.rt-ChatbarAttachment, .rt-ChatbarAttachmentPreview) {
-    border-radius: var(--radius-3);
+  .rt-ChatbarRoot:where(.sm\:rt-r-size-3) {
+    --chatbar-item-lead: calc(var(--space-5) + var(--space-1));
+    --chatbar-item-lead-radius: var(--radius-2);
+    --chatbar-item-padding: calc(var(--space-1) * 1.5);
+    font-size: var(--font-size-3);
+    line-height: var(--line-height-3);
+    --chatbar-attachments-radius: var(--radius-3);
   }
 }
 @media (min-width: 1024px) {
-  .rt-ChatbarRoot:where(.md\:rt-r-size-1) :where(.rt-ChatbarAttachment, .rt-ChatbarAttachmentPreview) {
-    border-radius: var(--radius-1);
+  .rt-ChatbarRoot:where(.md\:rt-r-size-1) {
+    --chatbar-item-lead: var(--space-4);
+    --chatbar-item-lead-radius: var(--radius-1);
+    --chatbar-item-padding: var(--space-1);
+    font-size: var(--font-size-1);
+    line-height: var(--line-height-1);
+    --chatbar-attachments-radius: var(--radius-1);
   }
-  .rt-ChatbarRoot:where(.md\:rt-r-size-2) :where(.rt-ChatbarAttachment, .rt-ChatbarAttachmentPreview) {
-    border-radius: var(--radius-2);
+  .rt-ChatbarRoot:where(.md\:rt-r-size-2) {
+    --chatbar-item-lead: var(--space-5);
+    --chatbar-item-lead-radius: var(--radius-2);
+    --chatbar-item-padding: var(--space-1);
+    font-size: var(--font-size-2);
+    line-height: var(--line-height-2);
+    --chatbar-attachments-radius: var(--radius-2);
   }
-  .rt-ChatbarRoot:where(.md\:rt-r-size-3) :where(.rt-ChatbarAttachment, .rt-ChatbarAttachmentPreview) {
-    border-radius: var(--radius-3);
+  .rt-ChatbarRoot:where(.md\:rt-r-size-3) {
+    --chatbar-item-lead: calc(var(--space-5) + var(--space-1));
+    --chatbar-item-lead-radius: var(--radius-2);
+    --chatbar-item-padding: calc(var(--space-1) * 1.5);
+    font-size: var(--font-size-3);
+    line-height: var(--line-height-3);
+    --chatbar-attachments-radius: var(--radius-3);
   }
 }
 @media (min-width: 1280px) {
-  .rt-ChatbarRoot:where(.lg\:rt-r-size-1) :where(.rt-ChatbarAttachment, .rt-ChatbarAttachmentPreview) {
-    border-radius: var(--radius-1);
+  .rt-ChatbarRoot:where(.lg\:rt-r-size-1) {
+    --chatbar-item-lead: var(--space-4);
+    --chatbar-item-lead-radius: var(--radius-1);
+    --chatbar-item-padding: var(--space-1);
+    font-size: var(--font-size-1);
+    line-height: var(--line-height-1);
+    --chatbar-attachments-radius: var(--radius-1);
   }
-  .rt-ChatbarRoot:where(.lg\:rt-r-size-2) :where(.rt-ChatbarAttachment, .rt-ChatbarAttachmentPreview) {
-    border-radius: var(--radius-2);
+  .rt-ChatbarRoot:where(.lg\:rt-r-size-2) {
+    --chatbar-item-lead: var(--space-5);
+    --chatbar-item-lead-radius: var(--radius-2);
+    --chatbar-item-padding: var(--space-1);
+    font-size: var(--font-size-2);
+    line-height: var(--line-height-2);
+    --chatbar-attachments-radius: var(--radius-2);
   }
-  .rt-ChatbarRoot:where(.lg\:rt-r-size-3) :where(.rt-ChatbarAttachment, .rt-ChatbarAttachmentPreview) {
-    border-radius: var(--radius-3);
+  .rt-ChatbarRoot:where(.lg\:rt-r-size-3) {
+    --chatbar-item-lead: calc(var(--space-5) + var(--space-1));
+    --chatbar-item-lead-radius: var(--radius-2);
+    --chatbar-item-padding: calc(var(--space-1) * 1.5);
+    font-size: var(--font-size-3);
+    line-height: var(--line-height-3);
+    --chatbar-attachments-radius: var(--radius-3);
   }
 }
 @media (min-width: 1640px) {
-  .rt-ChatbarRoot:where(.xl\:rt-r-size-1) :where(.rt-ChatbarAttachment, .rt-ChatbarAttachmentPreview) {
-    border-radius: var(--radius-1);
+  .rt-ChatbarRoot:where(.xl\:rt-r-size-1) {
+    --chatbar-item-lead: var(--space-4);
+    --chatbar-item-lead-radius: var(--radius-1);
+    --chatbar-item-padding: var(--space-1);
+    font-size: var(--font-size-1);
+    line-height: var(--line-height-1);
+    --chatbar-attachments-radius: var(--radius-1);
   }
-  .rt-ChatbarRoot:where(.xl\:rt-r-size-2) :where(.rt-ChatbarAttachment, .rt-ChatbarAttachmentPreview) {
-    border-radius: var(--radius-2);
+  .rt-ChatbarRoot:where(.xl\:rt-r-size-2) {
+    --chatbar-item-lead: var(--space-5);
+    --chatbar-item-lead-radius: var(--radius-2);
+    --chatbar-item-padding: var(--space-1);
+    font-size: var(--font-size-2);
+    line-height: var(--line-height-2);
+    --chatbar-attachments-radius: var(--radius-2);
   }
-  .rt-ChatbarRoot:where(.xl\:rt-r-size-3) :where(.rt-ChatbarAttachment, .rt-ChatbarAttachmentPreview) {
-    border-radius: var(--radius-3);
+  .rt-ChatbarRoot:where(.xl\:rt-r-size-3) {
+    --chatbar-item-lead: calc(var(--space-5) + var(--space-1));
+    --chatbar-item-lead-radius: var(--radius-2);
+    --chatbar-item-padding: calc(var(--space-1) * 1.5);
+    font-size: var(--font-size-3);
+    line-height: var(--line-height-3);
+    --chatbar-attachments-radius: var(--radius-3);
   }
 }
 .rt-ChatbarBox {
@@ -27686,142 +27932,6 @@
       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: calc(var(--space-1) * 0.5);
-  --chatbar-attachments-radius: var(--radius-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-1);
-  --chatbar-attachments-radius: var(--radius-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-2);
-  --chatbar-attachments-radius: var(--radius-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: calc(var(--space-1) * 0.5);
-    --chatbar-attachments-radius: var(--radius-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-1);
-    --chatbar-attachments-radius: var(--radius-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-2);
-    --chatbar-attachments-radius: var(--radius-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: calc(var(--space-1) * 0.5);
-    --chatbar-attachments-radius: var(--radius-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-1);
-    --chatbar-attachments-radius: var(--radius-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-2);
-    --chatbar-attachments-radius: var(--radius-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: calc(var(--space-1) * 0.5);
-    --chatbar-attachments-radius: var(--radius-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-1);
-    --chatbar-attachments-radius: var(--radius-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-2);
-    --chatbar-attachments-radius: var(--radius-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: calc(var(--space-1) * 0.5);
-    --chatbar-attachments-radius: var(--radius-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-1);
-    --chatbar-attachments-radius: var(--radius-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-2);
-    --chatbar-attachments-radius: var(--radius-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: calc(var(--space-1) * 0.5);
-    --chatbar-attachments-radius: var(--radius-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-1);
-    --chatbar-attachments-radius: var(--radius-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-2);
-    --chatbar-attachments-radius: var(--radius-3);
-  }
-}
 .rt-ChatbarNotices {
   display: -webkit-box;
   display: -ms-flexbox;