@kushagradhawan/kookie-ui 0.1.27 → 0.1.29

package/components.css

@@ -935,6 +935,210 @@
         --letter-spacing: var(--letter-spacing-9);
     }
 }
+.rt-AccordionRoot {
+    border-radius: var(--radius-3);
+    overflow: hidden;
+}
+:where(.rt-AccordionRoot:where(.rt-variant-surface)) {
+    background-color: var(--color-surface);
+    box-shadow: inset 0 0 0 1px var(--gray-a6);
+}
+:where(.rt-AccordionRoot:where(.rt-variant-classic)) {
+    background-color: var(--color-surface);
+    box-shadow: var(--classic-inset-shadow-light);
+}
+:where(.rt-AccordionRoot:where(.rt-variant-soft)) {
+    background-color: var(--accent-a3);
+}
+:where(.rt-AccordionRoot:where(.rt-variant-outline)) {
+    box-shadow: inset 0 0 0 1px var(--gray-a7);
+}
+:where(.rt-AccordionRoot:where(.rt-variant-ghost)) {
+    background-color: transparent;
+}
+:where(.rt-AccordionRoot[data-panel-background="translucent"]) {
+    background-color: color-mix(in srgb, var(--color-panel-translucent), transparent var(--panel-opacity-light));
+    -webkit-backdrop-filter: var(--backdrop-blur-panel);
+            backdrop-filter: var(--backdrop-blur-panel);
+}
+.rt-AccordionItem {
+    overflow: hidden;
+}
+:where(.rt-AccordionItem:not(:last-child)) {
+    border-bottom: 1px solid var(--gray-a6);
+}
+:where(.rt-AccordionRoot:where(.rt-variant-ghost)) :where(.rt-AccordionItem:not(:last-child)) {
+    border-bottom: 1px solid var(--gray-a4);
+}
+.rt-AccordionHeader {
+    display: flex;
+}
+.rt-AccordionTrigger {
+    all: unset;
+    font-family: inherit;
+    display: flex;
+    flex: 1;
+    align-items: center;
+    justify-content: space-between;
+    padding: var(--space-3) var(--space-4);
+    font-size: var(--font-size-2);
+    font-weight: var(--font-weight-medium);
+    line-height: var(--line-height-3);
+    color: var(--gray-12);
+    cursor: pointer;
+    transition: var(--transition-standard);
+}
+:where(.rt-AccordionRoot:where(.rt-r-size-1)) .rt-AccordionTrigger {
+    padding: var(--space-2) var(--space-3);
+    font-size: var(--font-size-1);
+}
+:where(.rt-AccordionRoot:where(.rt-r-size-2)) .rt-AccordionTrigger {
+    padding: var(--space-3) var(--space-4);
+    font-size: var(--font-size-2);
+}
+:where(.rt-AccordionRoot:where(.rt-r-size-3)) .rt-AccordionTrigger {
+    padding: var(--space-4) var(--space-5);
+    font-size: var(--font-size-3);
+}
+:where(.rt-AccordionRoot:where(.rt-r-size-4)) .rt-AccordionTrigger {
+    padding: var(--space-5) var(--space-6);
+    font-size: var(--font-size-4);
+}
+:where(.rt-AccordionTrigger:hover) {
+    background-color: var(--gray-a3);
+}
+:where(.rt-AccordionRoot:where(.rt-variant-soft)) :where(.rt-AccordionTrigger:hover) {
+    background-color: var(--accent-a4);
+}
+:where(.rt-AccordionRoot:where(.rt-variant-ghost)) :where(.rt-AccordionTrigger:hover) {
+    background-color: var(--gray-a2);
+}
+:where(.rt-AccordionTrigger:focus-visible) {
+    outline: var(--focus-outline-width) solid var(--focus-8);
+    outline-offset: var(--focus-outline-offset-inset);
+}
+.rt-AccordionContent {
+    overflow: hidden;
+    font-size: var(--font-size-2);
+    color: var(--gray-11);
+    line-height: var(--line-height-4);
+}
+.rt-AccordionContentInner {
+    padding: 0 var(--space-4) var(--space-3);
+}
+:where(.rt-AccordionRoot:where(.rt-r-size-1)) .rt-AccordionContentInner {
+    padding: 0 var(--space-3) var(--space-2);
+    font-size: var(--font-size-1);
+}
+:where(.rt-AccordionRoot:where(.rt-r-size-2)) .rt-AccordionContentInner {
+    padding: 0 var(--space-4) var(--space-3);
+    font-size: var(--font-size-2);
+}
+:where(.rt-AccordionRoot:where(.rt-r-size-3)) .rt-AccordionContentInner {
+    padding: 0 var(--space-5) var(--space-4);
+    font-size: var(--font-size-3);
+}
+:where(.rt-AccordionRoot:where(.rt-r-size-4)) .rt-AccordionContentInner {
+    padding: 0 var(--space-6) var(--space-5);
+    font-size: var(--font-size-4);
+}
+:where(.rt-AccordionContent[data-state="open"]) {
+    animation: rt-slide-down var(--duration-2) var(--ease-1);
+}
+:where(.rt-AccordionContent[data-state="closed"]) {
+    animation: rt-slide-up var(--duration-2) var(--ease-1);
+}
+@keyframes rt-slide-down {
+    from {
+        height: 0;
+    }
+    to {
+        height: var(--radix-accordion-content-height);
+    }
+}
+@keyframes rt-slide-up {
+    from {
+        height: var(--radix-accordion-content-height);
+    }
+    to {
+        height: 0;
+    }
+}
+:where(.rt-AccordionRoot[data-high-contrast]) .rt-AccordionTrigger {
+    color: var(--gray-12);
+}
+:where(.rt-AccordionRoot[data-high-contrast]) .rt-AccordionContent {
+    color: var(--gray-12);
+}
+:where(.rt-AccordionRoot:where(.rt-variant-soft)[data-accent-color]) :where(.rt-AccordionTrigger:hover) {
+    background-color: var(--accent-a4);
+}
+@media (prefers-reduced-motion: reduce) {
+    :where(.rt-AccordionContent[data-state="open"]),
+  :where(.rt-AccordionContent[data-state="closed"]) {
+        animation: none;
+    }
+}
+.rt-AccordionRoot:where(.rt-variant-soft) {
+    background-color: var(--accent-3);
+    color: var(--accent-12);
+    transition: var(--transition-background-blur);
+}
+:where([data-panel-background='translucent']) .rt-AccordionRoot:where(.rt-variant-soft) {
+    background-color: var(--accent-a3);
+    -webkit-backdrop-filter: var(--backdrop-filter-components);
+            backdrop-filter: var(--backdrop-filter-components);
+}
+.rt-AccordionRoot:where(.rt-variant-soft[data-panel-background='solid']) {
+    background-color: var(--accent-3);
+    -webkit-backdrop-filter: none;
+            backdrop-filter: none;
+}
+.rt-AccordionRoot:where(.rt-variant-soft[data-panel-background='translucent']) {
+    background-color: var(--accent-a3);
+    -webkit-backdrop-filter: var(--backdrop-filter-components);
+            backdrop-filter: var(--backdrop-filter-components);
+    --backdrop-filter-components: blur(var(--backdrop-blur-components));
+}
+@media (hover: hover) {
+    :where(.rt-AccordionRoot.rt-variant-soft:hover) {
+        background-color: var(--accent-4);
+    }
+    :where([data-panel-background='translucent']) :where(.rt-AccordionRoot.rt-variant-soft:hover) {
+        background-color: var(--accent-a4);
+    }
+    :where(.rt-AccordionRoot.rt-variant-soft[data-panel-background='solid']:hover) {
+        background-color: var(--accent-4);
+        -webkit-backdrop-filter: none;
+                backdrop-filter: none;
+    }
+    :where(.rt-AccordionRoot.rt-variant-soft[data-panel-background='translucent']:hover) {
+        background-color: var(--accent-a4);
+        -webkit-backdrop-filter: var(--backdrop-filter-components);
+                backdrop-filter: var(--backdrop-filter-components);
+    }
+}
+@media (hover: hover) {
+    :where(.rt-AccordionRoot.rt-variant-ghost:hover) {
+        background-color: var(--accent-2);
+    }
+    :where([data-panel-background='translucent']) :where(.rt-AccordionRoot.rt-variant-ghost:hover) {
+        background-color: var(--accent-a2);
+        -webkit-backdrop-filter: var(--backdrop-filter-components);
+                backdrop-filter: var(--backdrop-filter-components);
+    }
+    :where(.rt-AccordionRoot.rt-variant-ghost[data-panel-background='solid']:hover) {
+        background-color: var(--accent-2);
+        -webkit-backdrop-filter: none;
+                backdrop-filter: none;
+    }
+    :where(.rt-AccordionRoot.rt-variant-ghost[data-panel-background='translucent']:hover) {
+        background-color: var(--accent-a2);
+        -webkit-backdrop-filter: var(--backdrop-filter-components);
+                backdrop-filter: var(--backdrop-filter-components);
+        --backdrop-filter-components: blur(var(--backdrop-blur-components));
+    }
+}
 .rt-BaseDialogOverlay {
     position: fixed;
     inset: 0;
@@ -1948,6 +2152,8 @@
     --base-button-solid-high-contrast-active-filter: contrast(0.82) saturate(1.2) brightness(1.16);
     --progress-indicator-after-linear-gradient: var(--white-a5), var(--white-a9), var(--white-a5);
     --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));
     --slider-disabled-blend-mode: multiply;
     --switch-disabled-blend-mode: multiply;
@@ -11667,122 +11873,12 @@
     border-radius: inherit;
     flex: 1;
 }
-.rt-SidebarContainer:where(.rt-variant-surface) {
-    background-color: var(--color-panel);
-    -webkit-backdrop-filter: var(--backdrop-filter-panel);
-            backdrop-filter: var(--backdrop-filter-panel);
-}
-.rt-SidebarContainer:where(.rt-variant-surface):where([data-panel-background='solid']) {
-    --color-panel: var(--color-panel-solid);
-    -webkit-backdrop-filter: none;
-            backdrop-filter: none;
-    --backdrop-filter-panel: none;
-    --backdrop-filter-components: none;
-}
-.rt-SidebarContainer:where(.rt-variant-surface):where([data-panel-background='translucent']) {
-    --color-panel: var(--color-panel-translucent);
-    -webkit-backdrop-filter: var(--backdrop-filter-panel);
-            backdrop-filter: var(--backdrop-filter-panel);
-    --backdrop-filter-panel: blur(var(--backdrop-blur-panel));
-    --backdrop-filter-components: blur(var(--backdrop-blur-components));
-}
-:where(.rt-SidebarRoot[data-type="floating"]) .rt-SidebarContainer:where(.rt-variant-surface) {
-    box-shadow: inset 0 0 0 1px var(--gray-a6);
-}
-:where(.rt-SidebarRoot[data-type="sidebar"][data-side="left"]) .rt-SidebarContainer:where(.rt-variant-surface) {
-    box-shadow: inset -1px 0 0 0 var(--gray-a6);
-}
-:where(.rt-SidebarRoot[data-type="sidebar"][data-side="right"]) .rt-SidebarContainer:where(.rt-variant-surface) {
-    box-shadow: inset 1px 0 0 0 var(--gray-a6);
-}
 .rt-SidebarHeader {
     display: flex;
     flex-direction: column;
     flex-shrink: 0;
     border-radius: var(--sidebar-base-border-radius) var(--sidebar-base-border-radius) 0 0;
 }
-.rt-SidebarHeader :where(.rt-SidebarMenuButton) {
-    display: flex;
-    align-items: center;
-    gap: var(--space-2);
-    min-height: var(--base-menu-item-height);
-    padding-top: var(--base-menu-item-padding-y);
-    padding-bottom: var(--base-menu-item-padding-y);
-    padding-left: var(--base-menu-item-padding-left);
-    padding-right: var(--base-menu-item-padding-right);
-    box-sizing: border-box;
-    position: relative;
-    outline: none;
-    background: none;
-    border: none;
-    width: 100%;
-    text-align: left;
-    cursor: var(--cursor-menu-item);
-    -webkit-user-select: none;
-            user-select: none;
-    justify-content: flex-start;
-    border-radius: var(--sidebar-base-border-radius) var(--sidebar-base-border-radius) 0 0;
-    transition: background var(--duration-2) var(--ease-1), box-shadow var(--duration-2) var(--ease-1), filter var(--duration-2) var(--ease-1);
-}
-.rt-SidebarHeader :where(.rt-SidebarMenuButton):where(:focus-visible) {
-    outline: 2px solid var(--focus-8);
-    outline-offset: 2px;
-}
-@media (prefers-reduced-motion: reduce) {
-    .rt-SidebarHeader :where(.rt-SidebarMenuButton) {
-        transition: none;
-    }
-}
-.rt-SidebarHeader:where(.rt-SidebarHeader--container) {
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    gap: var(--space-2);
-    padding: var(--base-menu-content-padding);
-    min-height: var(--base-menu-item-height);
-}
-.rt-SidebarHeader:where(.rt-SidebarHeader--container) :where(.rt-SidebarMenuButton) {
-    flex: 1;
-}
-.rt-SidebarHeader:where(.rt-flex-row) {
-    flex-direction: row;
-}
-.rt-SidebarHeader:where(.rt-flex-col) {
-    flex-direction: column;
-}
-.rt-SidebarHeader:where(.rt-items-center) {
-    align-items: center;
-}
-.rt-SidebarHeader:where(.rt-items-start) {
-    align-items: flex-start;
-}
-.rt-SidebarHeader:where(.rt-items-end) {
-    align-items: flex-end;
-}
-.rt-SidebarHeader:where(.rt-justify-between) {
-    justify-content: space-between;
-}
-.rt-SidebarHeader:where(.rt-justify-center) {
-    justify-content: center;
-}
-.rt-SidebarHeader:where(.rt-justify-start) {
-    justify-content: flex-start;
-}
-.rt-SidebarHeader:where(.rt-justify-end) {
-    justify-content: flex-end;
-}
-.rt-SidebarHeader:where(.rt-gap-1) {
-    gap: var(--space-1);
-}
-.rt-SidebarHeader:where(.rt-gap-2) {
-    gap: var(--space-2);
-}
-.rt-SidebarHeader:where(.rt-gap-3) {
-    gap: var(--space-3);
-}
-.rt-SidebarHeader:where(.rt-gap-4) {
-    gap: var(--space-4);
-}
 .rt-SidebarContent {
     --scrollarea-scrollbar-vertical-margin-top: var(--base-menu-content-padding);
     --scrollarea-scrollbar-vertical-margin-bottom: var(--base-menu-content-padding);
@@ -11811,18 +11907,34 @@
     flex-direction: column;
     min-height: 0;
 }
-.rt-SidebarMenu {
-    flex: 1;
+.rt-SidebarFooter {
     display: flex;
     flex-direction: column;
-    padding: var(--base-menu-content-padding);
-    box-sizing: border-box;
-    list-style: none;
-    margin: 0;
-    min-height: 0;
+    flex-shrink: 0;
+    margin-top: auto;
+    border-radius: 0 0 var(--sidebar-base-border-radius) var(--sidebar-base-border-radius);
 }
-:where(.rt-SidebarContent:has(.rt-ScrollAreaScrollbar[data-orientation='vertical'])) .rt-SidebarMenu {
-    padding-right: var(--space-3);
+.rt-SidebarSeparator {
+    width: 100%;
+    margin: var(--space-2) 0;
+}
+@media (max-width: 768px) {
+    .rt-SidebarRoot {
+        display: none;
+    }
+}
+.rt-SidebarMenu {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    padding: var(--base-menu-content-padding);
+    box-sizing: border-box;
+    list-style: none;
+    margin: 0;
+    min-height: 0;
+}
+:where(.rt-SidebarContent:has(.rt-ScrollAreaScrollbar[data-orientation='vertical'])) .rt-SidebarMenu {
+    padding-right: var(--space-3);
 }
 .rt-SidebarMenuItem {
     list-style: none;
@@ -11844,7 +11956,6 @@
     border: none;
     width: 100%;
     text-align: left;
-    border-radius: var(--radius-2);
     transition: var(--transition-menu);
     -webkit-user-select: none;
             user-select: none;
@@ -11932,44 +12043,151 @@
     min-height: var(--space-6);
     font-size: var(--font-size-2);
 }
-.rt-SidebarFooter {
-    display: flex;
-    flex-direction: column;
-    flex-shrink: 0;
-    margin-top: auto;
-    border-radius: 0 0 var(--sidebar-base-border-radius) var(--sidebar-base-border-radius);
-}
-.rt-SidebarFooter :where(.rt-SidebarMenuButton) {
+.rt-SidebarGroupLabel {
     display: flex;
     align-items: center;
-    gap: var(--space-2);
     min-height: var(--base-menu-item-height);
     padding-top: var(--base-menu-item-padding-y);
     padding-bottom: var(--base-menu-item-padding-y);
     padding-left: var(--base-menu-item-padding-left);
     padding-right: var(--base-menu-item-padding-right);
     box-sizing: border-box;
-    position: relative;
-    outline: none;
-    background: none;
-    border: none;
-    width: 100%;
-    text-align: left;
-    cursor: var(--cursor-menu-item);
+    color: var(--gray-a10);
     -webkit-user-select: none;
             user-select: none;
-    justify-content: flex-start;
-    border-radius: 0 0 var(--sidebar-base-border-radius) var(--sidebar-base-border-radius);
-    transition: background var(--duration-2) var(--ease-1), box-shadow var(--duration-2) var(--ease-1), filter var(--duration-2) var(--ease-1);
+    cursor: default;
 }
-.rt-SidebarFooter :where(.rt-SidebarMenuButton):where(:focus-visible) {
-    outline: 2px solid var(--focus-8);
-    outline-offset: 2px;
+:where(.rt-SidebarMenuItem) + .rt-SidebarGroupLabel {
+    margin-top: var(--space-2);
 }
-@media (prefers-reduced-motion: reduce) {
-    .rt-SidebarFooter :where(.rt-SidebarMenuButton) {
-        transition: none;
-    }
+:where(.rt-SidebarContent.rt-r-size-1) .rt-SidebarMenuButton:where(:has(.rt-SidebarMenuShortcut, .rt-SidebarMenuBadge)) {
+    padding-right: var(--base-menu-item-padding-y);
+}
+:where(.rt-SidebarContent.rt-r-size-2) .rt-SidebarMenuButton:where(:has(.rt-SidebarMenuShortcut, .rt-SidebarMenuBadge)) {
+    padding-right: var(--base-menu-item-padding-y);
+}
+.rt-SidebarMenuShortcut {
+    display: flex;
+    align-items: center;
+    margin-left: auto;
+    padding-left: var(--space-4);
+    color: var(--gray-a11);
+}
+.rt-SidebarMenuBadge {
+    display: flex;
+    align-items: center;
+    margin-left: auto;
+    padding-left: var(--space-2);
+}
+.rt-SidebarContent :where(.rt-BaseMenuItem) {
+    margin-top: calc(var(--space-1) / 2);
+    margin-bottom: calc(var(--space-1) / 2);
+}
+.rt-SidebarContainer:where(.rt-variant-outline) {
+    background-color: var(--color-panel);
+    -webkit-backdrop-filter: var(--backdrop-filter-panel);
+            backdrop-filter: var(--backdrop-filter-panel);
+}
+.rt-SidebarContainer:where(.rt-variant-outline):where([data-panel-background='solid']) {
+    --color-panel: var(--color-panel-solid);
+    -webkit-backdrop-filter: none;
+            backdrop-filter: none;
+    --backdrop-filter-panel: none;
+    --backdrop-filter-components: none;
+}
+.rt-SidebarContainer:where(.rt-variant-outline):where([data-panel-background='translucent']) {
+    --color-panel: var(--color-panel-translucent);
+    -webkit-backdrop-filter: var(--backdrop-filter-panel);
+            backdrop-filter: var(--backdrop-filter-panel);
+    --backdrop-filter-panel: blur(var(--backdrop-blur-panel));
+    --backdrop-filter-components: blur(var(--backdrop-blur-components));
+}
+:where(.rt-SidebarRoot[data-type="floating"]) .rt-SidebarContainer:where(.rt-variant-outline) {
+    box-shadow: inset 0 0 0 1px var(--gray-a6);
+}
+:where(.rt-SidebarRoot[data-type="sidebar"][data-side="left"]) .rt-SidebarContainer:where(.rt-variant-outline) {
+    box-shadow: inset -1px 0 0 0 var(--gray-a6);
+}
+:where(.rt-SidebarRoot[data-type="sidebar"][data-side="right"]) .rt-SidebarContainer:where(.rt-variant-outline) {
+    box-shadow: inset 1px 0 0 0 var(--gray-a6);
+}
+.rt-SidebarContainer:where(.rt-variant-ghost) {
+    background-color: transparent;
+    -webkit-backdrop-filter: none;
+            backdrop-filter: none;
+    border: none;
+}
+.rt-SidebarContainer:where(.rt-variant-soft) {
+    background-color: var(--gray-2);
+}
+:where([data-panel-background='translucent']) .rt-SidebarContainer:where(.rt-variant-soft) {
+    background-color: var(--gray-a2);
+    -webkit-backdrop-filter: var(--backdrop-filter-panel);
+            backdrop-filter: var(--backdrop-filter-panel);
+}
+.rt-SidebarContainer:where(.rt-variant-soft):where([data-panel-background='solid']) {
+    background-color: var(--gray-2);
+    -webkit-backdrop-filter: none;
+            backdrop-filter: none;
+    --backdrop-filter-components: none;
+}
+.rt-SidebarContainer:where(.rt-variant-soft):where([data-panel-background='translucent']) {
+    background-color: var(--gray-a2);
+    -webkit-backdrop-filter: var(--backdrop-filter-panel);
+            backdrop-filter: var(--backdrop-filter-panel);
+    --backdrop-filter-panel: blur(var(--backdrop-blur-panel));
+    --backdrop-filter-components: blur(var(--backdrop-blur-components));
+}
+.rt-SidebarContainer:where(.rt-variant-surface) {
+    background-color: var(--gray-1);
+}
+:where([data-panel-background='translucent']) .rt-SidebarContainer:where(.rt-variant-surface) {
+    background-color: var(--gray-a1);
+    -webkit-backdrop-filter: var(--backdrop-filter-panel);
+            backdrop-filter: var(--backdrop-filter-panel);
+}
+.rt-SidebarContainer:where(.rt-variant-surface):where([data-panel-background='solid']) {
+    background-color: var(--gray-1);
+    -webkit-backdrop-filter: none;
+            backdrop-filter: none;
+    --backdrop-filter-panel: none;
+    --backdrop-filter-components: none;
+}
+.rt-SidebarContainer:where(.rt-variant-surface):where([data-panel-background='translucent']) {
+    background-color: var(--gray-a1);
+    -webkit-backdrop-filter: var(--backdrop-filter-panel);
+            backdrop-filter: var(--backdrop-filter-panel);
+    --backdrop-filter-panel: blur(var(--backdrop-blur-panel));
+    --backdrop-filter-components: blur(var(--backdrop-blur-components));
+}
+:where(.rt-SidebarRoot[data-type="floating"]) .rt-SidebarContainer:where(.rt-variant-surface) {
+    box-shadow: inset 0 0 0 1px var(--gray-6);
+}
+:where([data-panel-background='translucent']) :is(:where(.rt-SidebarRoot[data-type="floating"]) .rt-SidebarContainer:where(.rt-variant-surface)) {
+    box-shadow: inset 0 0 0 1px var(--gray-a6);
+}
+:where(.rt-SidebarRoot[data-type="sidebar"][data-side="left"]) .rt-SidebarContainer:where(.rt-variant-surface) {
+    box-shadow: inset -1px 0 0 0 var(--gray-6);
+}
+:where([data-panel-background='translucent']) :is(:where(.rt-SidebarRoot[data-type="sidebar"][data-side="left"]) .rt-SidebarContainer:where(.rt-variant-surface)) {
+    box-shadow: inset -1px 0 0 0 var(--gray-a6);
+}
+:where(.rt-SidebarRoot[data-type="sidebar"][data-side="right"]) .rt-SidebarContainer:where(.rt-variant-surface) {
+    box-shadow: inset 1px 0 0 0 var(--gray-6);
+}
+:where([data-panel-background='translucent']) :is(:where(.rt-SidebarRoot[data-type="sidebar"][data-side="right"]) .rt-SidebarContainer:where(.rt-variant-surface)) {
+    box-shadow: inset 1px 0 0 0 var(--gray-a6);
+}
+.rt-SidebarHeader:where(.rt-SidebarHeader--container) {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    gap: var(--space-2);
+    padding: var(--base-menu-content-padding);
+    min-height: var(--base-menu-item-height);
+}
+.rt-SidebarHeader:where(.rt-SidebarHeader--container) :where(.rt-SidebarMenuButton) {
+    flex: 1;
 }
 .rt-SidebarFooter:where(.rt-SidebarFooter--container) {
     display: flex;
@@ -11982,6 +12200,45 @@
 .rt-SidebarFooter:where(.rt-SidebarFooter--container) :where(.rt-SidebarMenuButton) {
     flex: 1;
 }
+.rt-SidebarHeader:where(.rt-flex-row) {
+    flex-direction: row;
+}
+.rt-SidebarHeader:where(.rt-flex-col) {
+    flex-direction: column;
+}
+.rt-SidebarHeader:where(.rt-items-center) {
+    align-items: center;
+}
+.rt-SidebarHeader:where(.rt-items-start) {
+    align-items: flex-start;
+}
+.rt-SidebarHeader:where(.rt-items-end) {
+    align-items: flex-end;
+}
+.rt-SidebarHeader:where(.rt-justify-between) {
+    justify-content: space-between;
+}
+.rt-SidebarHeader:where(.rt-justify-center) {
+    justify-content: center;
+}
+.rt-SidebarHeader:where(.rt-justify-start) {
+    justify-content: flex-start;
+}
+.rt-SidebarHeader:where(.rt-justify-end) {
+    justify-content: flex-end;
+}
+.rt-SidebarHeader:where(.rt-gap-1) {
+    gap: var(--space-1);
+}
+.rt-SidebarHeader:where(.rt-gap-2) {
+    gap: var(--space-2);
+}
+.rt-SidebarHeader:where(.rt-gap-3) {
+    gap: var(--space-3);
+}
+.rt-SidebarHeader:where(.rt-gap-4) {
+    gap: var(--space-4);
+}
 .rt-SidebarFooter:where(.rt-flex-row) {
     flex-direction: row;
 }
@@ -12021,26 +12278,44 @@
 .rt-SidebarFooter:where(.rt-gap-4) {
     gap: var(--space-4);
 }
-.rt-SidebarSeparator {
-    width: 100%;
-    margin: var(--space-2) 0;
-}
-.rt-SidebarGroupLabel {
+.rt-SidebarHeader :where(.rt-SidebarMenuButton),
+.rt-SidebarFooter :where(.rt-SidebarMenuButton) {
     display: flex;
     align-items: center;
+    gap: var(--space-2);
     min-height: var(--base-menu-item-height);
     padding-top: var(--base-menu-item-padding-y);
     padding-bottom: var(--base-menu-item-padding-y);
     padding-left: var(--base-menu-item-padding-left);
     padding-right: var(--base-menu-item-padding-right);
     box-sizing: border-box;
-    color: var(--gray-a10);
+    position: relative;
+    outline: none;
+    background: none;
+    border: none;
+    width: 100%;
+    text-align: left;
+    cursor: var(--cursor-menu-item);
     -webkit-user-select: none;
             user-select: none;
-    cursor: default;
+    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);
 }
-:where(.rt-SidebarMenuItem) + .rt-SidebarGroupLabel {
-    margin-top: var(--space-2);
+.rt-SidebarHeader :where(.rt-SidebarMenuButton):where(:focus-visible), .rt-SidebarFooter :where(.rt-SidebarMenuButton):where(:focus-visible) {
+    outline: 2px solid var(--focus-8);
+    outline-offset: 2px;
+}
+@media (prefers-reduced-motion: reduce) {
+    .rt-SidebarHeader :where(.rt-SidebarMenuButton),
+.rt-SidebarFooter :where(.rt-SidebarMenuButton) {
+        transition: none;
+    }
+}
+.rt-SidebarHeader :where(.rt-SidebarMenuButton) {
+    border-radius: var(--sidebar-base-border-radius) var(--sidebar-base-border-radius) 0 0;
+}
+.rt-SidebarFooter :where(.rt-SidebarMenuButton) {
+    border-radius: 0 0 var(--sidebar-base-border-radius) var(--sidebar-base-border-radius);
 }
 .rt-SidebarContainer:where(.rt-r-size-1) {
     --sidebar-base-padding: var(--space-3);
@@ -12068,6 +12343,7 @@
     line-height: var(--line-height-1);
     letter-spacing: var(--letter-spacing-1);
     border-radius: var(--radius-1);
+    font-weight: var(--font-weight-medium);
 }
 .rt-SidebarContent:where(.rt-r-size-1) :where(.rt-SidebarMenuButton) :where(svg) {
     width: var(--content-icon-size-1);
@@ -12086,6 +12362,7 @@
     line-height: var(--line-height-2);
     letter-spacing: var(--letter-spacing-2);
     border-radius: var(--radius-2);
+    font-weight: var(--font-weight-medium);
 }
 .rt-SidebarContent:where(.rt-r-size-2) :where(.rt-SidebarMenuButton) :where(svg) {
     width: var(--content-icon-size-2);
@@ -12125,6 +12402,7 @@
         line-height: var(--line-height-1);
         letter-spacing: var(--letter-spacing-1);
         border-radius: var(--radius-1);
+        font-weight: var(--font-weight-medium);
     }
     .rt-SidebarContent:where(.xs\:rt-r-size-1) :where(.rt-SidebarMenuButton) :where(svg) {
         width: var(--content-icon-size-1);
@@ -12143,6 +12421,7 @@
         line-height: var(--line-height-2);
         letter-spacing: var(--letter-spacing-2);
         border-radius: var(--radius-2);
+        font-weight: var(--font-weight-medium);
     }
     .rt-SidebarContent:where(.xs\:rt-r-size-2) :where(.rt-SidebarMenuButton) :where(svg) {
         width: var(--content-icon-size-2);
@@ -12183,6 +12462,7 @@
         line-height: var(--line-height-1);
         letter-spacing: var(--letter-spacing-1);
         border-radius: var(--radius-1);
+        font-weight: var(--font-weight-medium);
     }
     .rt-SidebarContent:where(.sm\:rt-r-size-1) :where(.rt-SidebarMenuButton) :where(svg) {
         width: var(--content-icon-size-1);
@@ -12201,6 +12481,7 @@
         line-height: var(--line-height-2);
         letter-spacing: var(--letter-spacing-2);
         border-radius: var(--radius-2);
+        font-weight: var(--font-weight-medium);
     }
     .rt-SidebarContent:where(.sm\:rt-r-size-2) :where(.rt-SidebarMenuButton) :where(svg) {
         width: var(--content-icon-size-2);
@@ -12241,6 +12522,7 @@
         line-height: var(--line-height-1);
         letter-spacing: var(--letter-spacing-1);
         border-radius: var(--radius-1);
+        font-weight: var(--font-weight-medium);
     }
     .rt-SidebarContent:where(.md\:rt-r-size-1) :where(.rt-SidebarMenuButton) :where(svg) {
         width: var(--content-icon-size-1);
@@ -12259,6 +12541,7 @@
         line-height: var(--line-height-2);
         letter-spacing: var(--letter-spacing-2);
         border-radius: var(--radius-2);
+        font-weight: var(--font-weight-medium);
     }
     .rt-SidebarContent:where(.md\:rt-r-size-2) :where(.rt-SidebarMenuButton) :where(svg) {
         width: var(--content-icon-size-2);
@@ -12299,6 +12582,7 @@
         line-height: var(--line-height-1);
         letter-spacing: var(--letter-spacing-1);
         border-radius: var(--radius-1);
+        font-weight: var(--font-weight-medium);
     }
     .rt-SidebarContent:where(.lg\:rt-r-size-1) :where(.rt-SidebarMenuButton) :where(svg) {
         width: var(--content-icon-size-1);
@@ -12317,6 +12601,7 @@
         line-height: var(--line-height-2);
         letter-spacing: var(--letter-spacing-2);
         border-radius: var(--radius-2);
+        font-weight: var(--font-weight-medium);
     }
     .rt-SidebarContent:where(.lg\:rt-r-size-2) :where(.rt-SidebarMenuButton) :where(svg) {
         width: var(--content-icon-size-2);
@@ -12357,6 +12642,7 @@
         line-height: var(--line-height-1);
         letter-spacing: var(--letter-spacing-1);
         border-radius: var(--radius-1);
+        font-weight: var(--font-weight-medium);
     }
     .rt-SidebarContent:where(.xl\:rt-r-size-1) :where(.rt-SidebarMenuButton) :where(svg) {
         width: var(--content-icon-size-1);
@@ -12375,6 +12661,7 @@
         line-height: var(--line-height-2);
         letter-spacing: var(--letter-spacing-2);
         border-radius: var(--radius-2);
+        font-weight: var(--font-weight-medium);
     }
     .rt-SidebarContent:where(.xl\:rt-r-size-2) :where(.rt-SidebarMenuButton) :where(svg) {
         width: var(--content-icon-size-2);
@@ -12388,36 +12675,6 @@
         margin-left: auto;
     }
 }
-.rt-SidebarContainer:where(.rt-variant-ghost) {
-    background-color: transparent;
-    -webkit-backdrop-filter: none;
-            backdrop-filter: none;
-    border: none;
-}
-.rt-SidebarContainer:where(.rt-variant-soft) {
-    background-color: var(--gray-2);
-}
-:where([data-panel-background='translucent']) .rt-SidebarContainer:where(.rt-variant-soft) {
-    background-color: var(--gray-a2);
-    -webkit-backdrop-filter: var(--backdrop-filter-panel);
-            backdrop-filter: var(--backdrop-filter-panel);
-}
-.rt-SidebarContainer:where(.rt-variant-soft):where([data-panel-background='solid']) {
-    background-color: var(--gray-2);
-    -webkit-backdrop-filter: none;
-            backdrop-filter: none;
-    --backdrop-filter-components: none;
-}
-.rt-SidebarContainer:where(.rt-variant-soft):where([data-panel-background='translucent']) {
-    background-color: var(--gray-a2);
-    -webkit-backdrop-filter: var(--backdrop-filter-panel);
-            backdrop-filter: var(--backdrop-filter-panel);
-    --backdrop-filter-panel: blur(var(--backdrop-blur-panel));
-    --backdrop-filter-components: blur(var(--backdrop-blur-components));
-}
-:where(.rt-SidebarRoot[data-type="floating"]) .rt-SidebarContainer:where(.rt-variant-ghost) {
-    box-shadow: var(--shadow-4);
-}
 .rt-SidebarHeader:where(.rt-menu-variant-solid) :where(.rt-SidebarMenuSubTrigger), .rt-SidebarContent:where(.rt-menu-variant-solid) :where(.rt-SidebarMenuSubTrigger), .rt-SidebarFooter:where(.rt-menu-variant-solid) :where(.rt-SidebarMenuSubTrigger) {
     transition: var(--transition-menu);
 }
@@ -12460,6 +12717,10 @@
 .rt-SidebarHeader:where(.rt-menu-variant-solid) :where(.rt-SidebarMenuButton[data-highlighted]) :where([data-accent-color='gray']:not(.rt-Badge)), .rt-SidebarContent:where(.rt-menu-variant-solid) :where(.rt-SidebarMenuButton[data-highlighted]) :where([data-accent-color='gray']:not(.rt-Badge)), .rt-SidebarFooter:where(.rt-menu-variant-solid) :where(.rt-SidebarMenuButton[data-highlighted]) :where([data-accent-color='gray']:not(.rt-Badge)) {
     color: inherit !important;
 }
+.rt-SidebarHeader:where(.rt-menu-variant-solid) :where(.rt-SidebarMenuButton[data-highlighted]) :where(.rt-Badge), .rt-SidebarContent:where(.rt-menu-variant-solid) :where(.rt-SidebarMenuButton[data-highlighted]) :where(.rt-Badge), .rt-SidebarFooter:where(.rt-menu-variant-solid) :where(.rt-SidebarMenuButton[data-highlighted]) :where(.rt-Badge) {
+    color: var(--accent-contrast) !important;
+    background-color: var(--accent-12) !important;
+}
 .rt-SidebarHeader:where(.rt-menu-variant-solid) :where(.rt-SidebarMenuButton[data-active]), .rt-SidebarContent:where(.rt-menu-variant-solid) :where(.rt-SidebarMenuButton[data-active]), .rt-SidebarFooter:where(.rt-menu-variant-solid) :where(.rt-SidebarMenuButton[data-active]) {
     background-color: var(--accent-9);
     color: var(--accent-contrast);
@@ -12470,6 +12731,10 @@
 .rt-SidebarHeader:where(.rt-menu-variant-solid) :where(.rt-SidebarMenuButton[data-active]) :where([data-accent-color='gray']:not(.rt-Badge)), .rt-SidebarContent:where(.rt-menu-variant-solid) :where(.rt-SidebarMenuButton[data-active]) :where([data-accent-color='gray']:not(.rt-Badge)), .rt-SidebarFooter:where(.rt-menu-variant-solid) :where(.rt-SidebarMenuButton[data-active]) :where([data-accent-color='gray']:not(.rt-Badge)) {
     color: inherit !important;
 }
+.rt-SidebarHeader:where(.rt-menu-variant-solid) :where(.rt-SidebarMenuButton[data-active]) :where(.rt-Badge), .rt-SidebarContent:where(.rt-menu-variant-solid) :where(.rt-SidebarMenuButton[data-active]) :where(.rt-Badge), .rt-SidebarFooter:where(.rt-menu-variant-solid) :where(.rt-SidebarMenuButton[data-active]) :where(.rt-Badge) {
+    color: var(--accent-contrast) !important;
+    background-color: var(--accent-12) !important;
+}
 .rt-SidebarHeader:where(.rt-menu-variant-solid):where(.rt-high-contrast) :where(.rt-SidebarMenuButton[data-highlighted]), .rt-SidebarContent:where(.rt-menu-variant-solid):where(.rt-high-contrast) :where(.rt-SidebarMenuButton[data-highlighted]), .rt-SidebarFooter:where(.rt-menu-variant-solid):where(.rt-high-contrast) :where(.rt-SidebarMenuButton[data-highlighted]) {
     background-color: var(--accent-12);
     color: var(--accent-1);
@@ -12483,6 +12748,10 @@
 .rt-SidebarHeader:where(.rt-menu-variant-solid):where(.rt-high-contrast) :where(.rt-SidebarMenuButton[data-highlighted]) :where([data-accent-color='gray']:not(.rt-Badge)), .rt-SidebarContent:where(.rt-menu-variant-solid):where(.rt-high-contrast) :where(.rt-SidebarMenuButton[data-highlighted]) :where([data-accent-color='gray']:not(.rt-Badge)), .rt-SidebarFooter:where(.rt-menu-variant-solid):where(.rt-high-contrast) :where(.rt-SidebarMenuButton[data-highlighted]) :where([data-accent-color='gray']:not(.rt-Badge)) {
     color: inherit !important;
 }
+.rt-SidebarHeader:where(.rt-menu-variant-solid):where(.rt-high-contrast) :where(.rt-SidebarMenuButton[data-highlighted]) :where(.rt-Badge), .rt-SidebarContent:where(.rt-menu-variant-solid):where(.rt-high-contrast) :where(.rt-SidebarMenuButton[data-highlighted]) :where(.rt-Badge), .rt-SidebarFooter:where(.rt-menu-variant-solid):where(.rt-high-contrast) :where(.rt-SidebarMenuButton[data-highlighted]) :where(.rt-Badge) {
+    color: var(--accent-1) !important;
+    background-color: var(--accent-9) !important;
+}
 .rt-SidebarHeader:where(.rt-menu-variant-solid):where(.rt-high-contrast) :where(.rt-SidebarMenuButton[data-highlighted]):where([data-accent-color]), .rt-SidebarContent:where(.rt-menu-variant-solid):where(.rt-high-contrast) :where(.rt-SidebarMenuButton[data-highlighted]):where([data-accent-color]), .rt-SidebarFooter:where(.rt-menu-variant-solid):where(.rt-high-contrast) :where(.rt-SidebarMenuButton[data-highlighted]):where([data-accent-color]) {
     background-color: var(--accent-9);
     color: var(--accent-contrast);
@@ -12493,6 +12762,10 @@
 .rt-SidebarHeader:where(.rt-menu-variant-solid):where(.rt-high-contrast) :where(.rt-SidebarMenuButton[data-highlighted]):where([data-accent-color]) :where([data-accent-color='gray']:not(.rt-Badge)), .rt-SidebarContent:where(.rt-menu-variant-solid):where(.rt-high-contrast) :where(.rt-SidebarMenuButton[data-highlighted]):where([data-accent-color]) :where([data-accent-color='gray']:not(.rt-Badge)), .rt-SidebarFooter:where(.rt-menu-variant-solid):where(.rt-high-contrast) :where(.rt-SidebarMenuButton[data-highlighted]):where([data-accent-color]) :where([data-accent-color='gray']:not(.rt-Badge)) {
     color: inherit !important;
 }
+.rt-SidebarHeader:where(.rt-menu-variant-solid):where(.rt-high-contrast) :where(.rt-SidebarMenuButton[data-highlighted]):where([data-accent-color]) :where(.rt-Badge), .rt-SidebarContent:where(.rt-menu-variant-solid):where(.rt-high-contrast) :where(.rt-SidebarMenuButton[data-highlighted]):where([data-accent-color]) :where(.rt-Badge), .rt-SidebarFooter:where(.rt-menu-variant-solid):where(.rt-high-contrast) :where(.rt-SidebarMenuButton[data-highlighted]):where([data-accent-color]) :where(.rt-Badge) {
+    color: var(--accent-contrast) !important;
+    background-color: var(--accent-12) !important;
+}
 .rt-SidebarHeader:where(.rt-menu-variant-solid):where(.rt-high-contrast) :where(.rt-SidebarMenuButton[data-active]), .rt-SidebarContent:where(.rt-menu-variant-solid):where(.rt-high-contrast) :where(.rt-SidebarMenuButton[data-active]), .rt-SidebarFooter:where(.rt-menu-variant-solid):where(.rt-high-contrast) :where(.rt-SidebarMenuButton[data-active]) {
     background-color: var(--accent-12);
     color: var(--accent-1);
@@ -12503,6 +12776,10 @@
 .rt-SidebarHeader:where(.rt-menu-variant-solid):where(.rt-high-contrast) :where(.rt-SidebarMenuButton[data-active]) :where([data-accent-color='gray']:not(.rt-Badge)), .rt-SidebarContent:where(.rt-menu-variant-solid):where(.rt-high-contrast) :where(.rt-SidebarMenuButton[data-active]) :where([data-accent-color='gray']:not(.rt-Badge)), .rt-SidebarFooter:where(.rt-menu-variant-solid):where(.rt-high-contrast) :where(.rt-SidebarMenuButton[data-active]) :where([data-accent-color='gray']:not(.rt-Badge)) {
     color: inherit !important;
 }
+.rt-SidebarHeader:where(.rt-menu-variant-solid):where(.rt-high-contrast) :where(.rt-SidebarMenuButton[data-active]) :where(.rt-Badge), .rt-SidebarContent:where(.rt-menu-variant-solid):where(.rt-high-contrast) :where(.rt-SidebarMenuButton[data-active]) :where(.rt-Badge), .rt-SidebarFooter:where(.rt-menu-variant-solid):where(.rt-high-contrast) :where(.rt-SidebarMenuButton[data-active]) :where(.rt-Badge) {
+    color: var(--accent-1) !important;
+    background-color: var(--accent-9) !important;
+}
 .rt-SidebarHeader:where(.rt-menu-variant-solid):where(.rt-high-contrast) :where(.rt-SidebarMenuButton[data-active]):where([data-accent-color]), .rt-SidebarContent:where(.rt-menu-variant-solid):where(.rt-high-contrast) :where(.rt-SidebarMenuButton[data-active]):where([data-accent-color]), .rt-SidebarFooter:where(.rt-menu-variant-solid):where(.rt-high-contrast) :where(.rt-SidebarMenuButton[data-active]):where([data-accent-color]) {
     background-color: var(--accent-9);
     color: var(--accent-contrast);
@@ -12513,6 +12790,10 @@
 .rt-SidebarHeader:where(.rt-menu-variant-solid):where(.rt-high-contrast) :where(.rt-SidebarMenuButton[data-active]):where([data-accent-color]) :where([data-accent-color='gray']:not(.rt-Badge)), .rt-SidebarContent:where(.rt-menu-variant-solid):where(.rt-high-contrast) :where(.rt-SidebarMenuButton[data-active]):where([data-accent-color]) :where([data-accent-color='gray']:not(.rt-Badge)), .rt-SidebarFooter:where(.rt-menu-variant-solid):where(.rt-high-contrast) :where(.rt-SidebarMenuButton[data-active]):where([data-accent-color]) :where([data-accent-color='gray']:not(.rt-Badge)) {
     color: inherit !important;
 }
+.rt-SidebarHeader:where(.rt-menu-variant-solid):where(.rt-high-contrast) :where(.rt-SidebarMenuButton[data-active]):where([data-accent-color]) :where(.rt-Badge), .rt-SidebarContent:where(.rt-menu-variant-solid):where(.rt-high-contrast) :where(.rt-SidebarMenuButton[data-active]):where([data-accent-color]) :where(.rt-Badge), .rt-SidebarFooter:where(.rt-menu-variant-solid):where(.rt-high-contrast) :where(.rt-SidebarMenuButton[data-active]):where([data-accent-color]) :where(.rt-Badge) {
+    color: var(--accent-contrast) !important;
+    background-color: var(--accent-12) !important;
+}
 .rt-SidebarHeader:where(.rt-menu-variant-soft) :where(.rt-SidebarMenuSubTrigger), .rt-SidebarContent:where(.rt-menu-variant-soft) :where(.rt-SidebarMenuSubTrigger), .rt-SidebarFooter:where(.rt-menu-variant-soft) :where(.rt-SidebarMenuSubTrigger) {
     transition: var(--transition-menu);
 }
@@ -12582,46 +12863,137 @@
 .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-SidebarContent :where(.rt-BaseMenuItem) {
-    border-radius: var(--radius-2);
-    margin-bottom: var(--space-1);
-}
 .rt-SidebarRoot:where([data-collapsible="icon"]) {
     transition: none;
-    overflow: hidden;
+    overflow: visible;
     flex-shrink: 0;
 }
-.rt-SidebarContainer:where(.rt-variant-ghost[data-collapsible="icon"][data-type="floating"]) {
-    overflow: visible !important;
-}
 .rt-SidebarRoot:where([data-collapsible="icon"][data-state="collapsed"]) {
-    width: 0;
-    min-width: 0;
-    opacity: 0;
-    pointer-events: none;
-    flex-basis: 0;
-    width: 0;
-    width: 0;
-    min-width: 0;
-    opacity: 0;
-    pointer-events: none;
-    margin: 0;
+    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-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));
 }
 .rt-SidebarRoot:where([data-collapsible="icon"][data-state="expanded"]) {
     width: var(--sidebar-width);
     min-width: var(--sidebar-width);
     opacity: 1;
     pointer-events: auto;
-    flex-basis: var(--sidebar-width);
-    width: var(--sidebar-width);
+}
+.rt-SidebarContainer:where([data-collapsible="icon"]) {
+    width: 100%;
+    min-width: 0;
+    flex-shrink: 0;
+}
+.rt-SidebarContent:where([data-collapsible="icon"]) {
+    width: 100%;
+    min-width: 0;
+    flex-shrink: 0;
+}
+.rt-SidebarRoot:where([data-collapsible="icon"][data-state="collapsed"]) :where(.rt-SidebarMenuButton) {
+    justify-content: center;
+    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%;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+.rt-SidebarRoot:where([data-collapsible="icon"][data-state="collapsed"]) :where(.rt-SidebarGroupLabel) {
+    max-width: var(--sidebar-group-label-width);
+    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;
+    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;
+    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: hidden;
+    overflow: visible;
     flex-shrink: 0;
 }
-.rt-SidebarRoot:where([data-collapsible="icon"][data-type="floating"]:has(.rt-variant-ghost)) {
-    overflow: visible;
+.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);
 }
 .rt-SidebarRoot:where([data-collapsible="icon"][data-type="floating"][data-state="expanded"]) {
     width: var(--sidebar-width);
@@ -12630,22 +13002,11 @@
     pointer-events: auto;
     margin: var(--space-2);
 }
-.rt-SidebarContainer:where([data-collapsible="icon"]) {
-    width: var(--sidebar-width);
-    min-width: var(--sidebar-width);
-    flex-shrink: 0;
-}
-.rt-SidebarContent:where([data-collapsible="icon"]) {
-    width: 100%;
-    min-width: var(--sidebar-width);
-    flex-shrink: 0;
-}
 @media (max-width: 768px) {
-    .rt-SidebarRoot {
-        display: none;
+    .rt-SidebarRoot:where([data-collapsible="icon"]) {
         display: none;
     }
-    .rt-SidebarRoot:where([data-state="expanded"]) {
+    .rt-SidebarRoot:where([data-collapsible="icon"][data-state="expanded"]) {
         display: flex;
         position: fixed;
         top: 0;
@@ -12661,25 +13022,6 @@
         transition: none;
     }
 }
-:where(.rt-SidebarContent.rt-r-size-1) .rt-SidebarMenuButton:where(:has(.rt-SidebarMenuShortcut, .rt-SidebarMenuBadge)) {
-    padding-right: var(--base-menu-item-padding-y);
-}
-:where(.rt-SidebarContent.rt-r-size-2) .rt-SidebarMenuButton:where(:has(.rt-SidebarMenuShortcut, .rt-SidebarMenuBadge)) {
-    padding-right: var(--base-menu-item-padding-y);
-}
-.rt-SidebarMenuShortcut {
-    display: flex;
-    align-items: center;
-    margin-left: auto;
-    padding-left: var(--space-4);
-    color: var(--gray-a11);
-}
-.rt-SidebarMenuBadge {
-    display: flex;
-    align-items: center;
-    margin-left: auto;
-    padding-left: var(--space-2);
-}
 .rt-SliderRoot {
     --slider-thumb-size: calc(var(--slider-track-size) + var(--space-1));
     position: relative;