@kushagradhawan/kookie-ui 0.1.14 → 0.1.16

package/components.css

@@ -1800,16 +1800,10 @@
     position: relative;
     cursor: wait;
 }
-.rt-BaseButton:where(:active:not([data-disabled], [data-state='open'])) {
-    transform: scale(0.98);
-}
 @media (prefers-reduced-motion: reduce) {
     .rt-BaseButton {
         transition: none;
     }
-    .rt-BaseButton:where(:active:not([data-disabled], [data-state='open'])) {
-        transform: none;
-    }
 }
 .rt-BaseButton:where(.rt-full-width) {
     display: flex;
@@ -2337,8 +2331,8 @@
     letter-spacing: var(--letter-spacing-1);
 }
 .rt-Button:where(.rt-r-size-1) :where(svg) {
-    width: var(--space-4);
-    height: var(--space-4);
+    width: calc(var(--space-3) * 1.175);
+    height: calc(var(--space-3) * 1.175);
 }
 .rt-Button:where(.rt-r-size-1):where(:not(.rt-variant-ghost)) {
     padding-left: var(--space-2);
@@ -2414,8 +2408,8 @@
         letter-spacing: var(--letter-spacing-1);
     }
     .rt-Button:where(.xs\:rt-r-size-1) :where(svg) {
-        width: var(--space-4);
-        height: var(--space-4);
+        width: calc(var(--space-3) * 1.175);
+        height: calc(var(--space-3) * 1.175);
     }
     .rt-Button:where(.xs\:rt-r-size-1):where(:not(.rt-variant-ghost)) {
         padding-left: var(--space-2);
@@ -2492,8 +2486,8 @@
         letter-spacing: var(--letter-spacing-1);
     }
     .rt-Button:where(.sm\:rt-r-size-1) :where(svg) {
-        width: var(--space-4);
-        height: var(--space-4);
+        width: calc(var(--space-3) * 1.175);
+        height: calc(var(--space-3) * 1.175);
     }
     .rt-Button:where(.sm\:rt-r-size-1):where(:not(.rt-variant-ghost)) {
         padding-left: var(--space-2);
@@ -2570,8 +2564,8 @@
         letter-spacing: var(--letter-spacing-1);
     }
     .rt-Button:where(.md\:rt-r-size-1) :where(svg) {
-        width: var(--space-4);
-        height: var(--space-4);
+        width: calc(var(--space-3) * 1.175);
+        height: calc(var(--space-3) * 1.175);
     }
     .rt-Button:where(.md\:rt-r-size-1):where(:not(.rt-variant-ghost)) {
         padding-left: var(--space-2);
@@ -2648,8 +2642,8 @@
         letter-spacing: var(--letter-spacing-1);
     }
     .rt-Button:where(.lg\:rt-r-size-1) :where(svg) {
-        width: var(--space-4);
-        height: var(--space-4);
+        width: calc(var(--space-3) * 1.175);
+        height: calc(var(--space-3) * 1.175);
     }
     .rt-Button:where(.lg\:rt-r-size-1):where(:not(.rt-variant-ghost)) {
         padding-left: var(--space-2);
@@ -2726,8 +2720,8 @@
         letter-spacing: var(--letter-spacing-1);
     }
     .rt-Button:where(.xl\:rt-r-size-1) :where(svg) {
-        width: var(--space-4);
-        height: var(--space-4);
+        width: calc(var(--space-3) * 1.175);
+        height: calc(var(--space-3) * 1.175);
     }
     .rt-Button:where(.xl\:rt-r-size-1):where(:not(.rt-variant-ghost)) {
         padding-left: var(--space-2);
@@ -4265,8 +4259,8 @@
     border-radius: var(--radius-1);
 }
 .rt-BaseMenuContent:where(.rt-r-size-1) :where(.rt-BaseMenuItem) :where(svg) {
-    width: var(--space-4);
-    height: var(--space-4);
+    width: calc(var(--space-3) * 1.175);
+    height: calc(var(--space-3) * 1.175);
     flex-shrink: 0;
 }
 .rt-BaseMenuContent:where(.rt-r-size-1) :where(.rt-BaseMenuLabel) {
@@ -4334,8 +4328,8 @@
         border-radius: var(--radius-1);
     }
     .rt-BaseMenuContent:where(.xs\:rt-r-size-1) :where(.rt-BaseMenuItem) :where(svg) {
-        width: var(--space-4);
-        height: var(--space-4);
+        width: calc(var(--space-3) * 1.175);
+        height: calc(var(--space-3) * 1.175);
         flex-shrink: 0;
     }
     .rt-BaseMenuContent:where(.xs\:rt-r-size-1) :where(.rt-BaseMenuLabel) {
@@ -4404,8 +4398,8 @@
         border-radius: var(--radius-1);
     }
     .rt-BaseMenuContent:where(.sm\:rt-r-size-1) :where(.rt-BaseMenuItem) :where(svg) {
-        width: var(--space-4);
-        height: var(--space-4);
+        width: calc(var(--space-3) * 1.175);
+        height: calc(var(--space-3) * 1.175);
         flex-shrink: 0;
     }
     .rt-BaseMenuContent:where(.sm\:rt-r-size-1) :where(.rt-BaseMenuLabel) {
@@ -4474,8 +4468,8 @@
         border-radius: var(--radius-1);
     }
     .rt-BaseMenuContent:where(.md\:rt-r-size-1) :where(.rt-BaseMenuItem) :where(svg) {
-        width: var(--space-4);
-        height: var(--space-4);
+        width: calc(var(--space-3) * 1.175);
+        height: calc(var(--space-3) * 1.175);
         flex-shrink: 0;
     }
     .rt-BaseMenuContent:where(.md\:rt-r-size-1) :where(.rt-BaseMenuLabel) {
@@ -4544,8 +4538,8 @@
         border-radius: var(--radius-1);
     }
     .rt-BaseMenuContent:where(.lg\:rt-r-size-1) :where(.rt-BaseMenuItem) :where(svg) {
-        width: var(--space-4);
-        height: var(--space-4);
+        width: calc(var(--space-3) * 1.175);
+        height: calc(var(--space-3) * 1.175);
         flex-shrink: 0;
     }
     .rt-BaseMenuContent:where(.lg\:rt-r-size-1) :where(.rt-BaseMenuLabel) {
@@ -4614,8 +4608,8 @@
         border-radius: var(--radius-1);
     }
     .rt-BaseMenuContent:where(.xl\:rt-r-size-1) :where(.rt-BaseMenuItem) :where(svg) {
-        width: var(--space-4);
-        height: var(--space-4);
+        width: calc(var(--space-3) * 1.175);
+        height: calc(var(--space-3) * 1.175);
         flex-shrink: 0;
     }
     .rt-BaseMenuContent:where(.xl\:rt-r-size-1) :where(.rt-BaseMenuLabel) {
@@ -5923,8 +5917,8 @@
     width: var(--base-button-height);
 }
 .rt-IconButton:where(.rt-r-size-1) :where(svg) {
-    width: var(--space-4);
-    height: var(--space-4);
+    width: calc(var(--space-3) * 1.175);
+    height: calc(var(--space-3) * 1.175);
 }
 .rt-IconButton:where(.rt-r-size-2) :where(svg) {
     width: var(--space-4);
@@ -5952,8 +5946,8 @@
 }
 @media (min-width: 520px) {
     .rt-IconButton:where(.xs\:rt-r-size-1) :where(svg) {
-        width: var(--space-4);
-        height: var(--space-4);
+        width: calc(var(--space-3) * 1.175);
+        height: calc(var(--space-3) * 1.175);
     }
     .rt-IconButton:where(.xs\:rt-r-size-2) :where(svg) {
         width: var(--space-4);
@@ -5982,8 +5976,8 @@
 }
 @media (min-width: 768px) {
     .rt-IconButton:where(.sm\:rt-r-size-1) :where(svg) {
-        width: var(--space-4);
-        height: var(--space-4);
+        width: calc(var(--space-3) * 1.175);
+        height: calc(var(--space-3) * 1.175);
     }
     .rt-IconButton:where(.sm\:rt-r-size-2) :where(svg) {
         width: var(--space-4);
@@ -6012,8 +6006,8 @@
 }
 @media (min-width: 1024px) {
     .rt-IconButton:where(.md\:rt-r-size-1) :where(svg) {
-        width: var(--space-4);
-        height: var(--space-4);
+        width: calc(var(--space-3) * 1.175);
+        height: calc(var(--space-3) * 1.175);
     }
     .rt-IconButton:where(.md\:rt-r-size-2) :where(svg) {
         width: var(--space-4);
@@ -6042,8 +6036,8 @@
 }
 @media (min-width: 1280px) {
     .rt-IconButton:where(.lg\:rt-r-size-1) :where(svg) {
-        width: var(--space-4);
-        height: var(--space-4);
+        width: calc(var(--space-3) * 1.175);
+        height: calc(var(--space-3) * 1.175);
     }
     .rt-IconButton:where(.lg\:rt-r-size-2) :where(svg) {
         width: var(--space-4);
@@ -6072,8 +6066,8 @@
 }
 @media (min-width: 1640px) {
     .rt-IconButton:where(.xl\:rt-r-size-1) :where(svg) {
-        width: var(--space-4);
-        height: var(--space-4);
+        width: calc(var(--space-3) * 1.175);
+        height: calc(var(--space-3) * 1.175);
     }
     .rt-IconButton:where(.xl\:rt-r-size-2) :where(svg) {
         width: var(--space-4);
@@ -6198,6 +6192,9 @@
 .rt-r-shadow-6 {
     --box-shadow: var(--shadow-6);
 }
+.rt-Image--placeholder {
+    z-index: 0;
+}
 .rt-Inset {
     box-sizing: border-box;
     --margin-top: 0px;
@@ -9396,16 +9393,34 @@
         --separator-size: 100%;
     }
 }
+.rt-SidebarProvider:where([data-side="left"]) {
+    order: -1;
+}
+.rt-SidebarProvider:where([data-side="right"]) {
+    order: 999;
+}
 .rt-SidebarRoot {
     --sidebar-width: 16rem;
-    --sidebar-width-icon: 3rem;
-    position: fixed;
-    top: 0;
-    bottom: 0;
-    left: 0;
-    z-index: 30;
     width: var(--sidebar-width);
-    transition: transform 0.2s ease, width 0.2s ease;
+    height: 100vh;
+    flex-shrink: 0;
+    display: flex;
+    flex-direction: column;
+}
+.rt-SidebarRoot :where(.radix-themes) {
+    display: flex;
+    flex-direction: column;
+    flex: 1;
+    height: 100%;
+}
+.rt-SidebarRoot:where([data-type="floating"]) {
+    border-radius: var(--radius-4);
+    margin: var(--space-2);
+    height: calc(100vh - var(--space-4));
+    overflow: visible;
+}
+.rt-SidebarRoot:where([data-type="floating"]) :where(.radix-themes) {
+    border-radius: inherit;
 }
 .rt-SidebarContainer {
     display: flex;
@@ -9413,122 +9428,1300 @@
     height: 100%;
     width: 100%;
     background-color: var(--color-panel-solid);
-    border-right: 1px solid var(--gray-a5);
+    border-radius: inherit;
+    flex: 1;
 }
 .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;
-    padding: var(--space-3);
-    border-bottom: 1px solid var(--gray-a5);
+    gap: var(--space-2);
+    min-height: var(--sidebar-item-height);
+    padding-top: var(--sidebar-item-padding-y);
+    padding-bottom: var(--sidebar-item-padding-y);
+    padding-left: var(--sidebar-item-padding-left);
+    padding-right: var(--sidebar-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([data-highlighted]:not([data-disabled])) {
+    background-color: var(--gray-a3);
+}
+.rt-SidebarHeader :where(.rt-SidebarMenuButton):where(:active:not([data-disabled])) {
+    background-color: var(--gray-a4);
+}
+.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(--sidebar-content-padding);
+    min-height: var(--sidebar-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(--sidebar-content-padding);
+    --scrollarea-scrollbar-vertical-margin-bottom: var(--sidebar-content-padding);
+    --scrollarea-scrollbar-horizontal-margin-left: var(--sidebar-content-padding);
+    --scrollarea-scrollbar-horizontal-margin-right: var(--sidebar-content-padding);
+    display: flex;
+    flex-direction: column;
     flex: 1;
-    padding: var(--space-2);
+    box-sizing: border-box;
     min-height: 0;
 }
-.rt-SidebarFooter {
-    padding: var(--space-3);
-    border-top: 1px solid var(--gray-a5);
+.rt-SidebarContent :where(.rt-ScrollAreaRoot) {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    min-height: 0;
 }
-.rt-SidebarInset {
+.rt-SidebarContent :where(.rt-ScrollAreaViewport) {
     flex: 1;
-    margin-left: var(--sidebar-width);
-    transition: margin-left 0.2s ease;
+    display: flex;
+    flex-direction: column;
+    min-height: 0;
 }
-.rt-SidebarRoot:where(.rt-r-size-1) {
-    --sidebar-width: 14rem;
-    --sidebar-width-icon: 2.5rem;
+.rt-SidebarMenu {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-2);
+    padding: var(--sidebar-content-padding);
+    box-sizing: border-box;
+    list-style: none;
+    margin: 0;
+    min-height: 0;
 }
-.rt-SidebarRoot:where(.rt-r-size-3) {
-    --sidebar-width: 18rem;
-    --sidebar-width-icon: 3.5rem;
+:where(.rt-SidebarContent:has(.rt-ScrollAreaScrollbar[data-orientation='vertical'])) .rt-SidebarMenu {
+    padding-right: var(--space-3);
 }
-@media (min-width: 520px) {
-    .rt-SidebarRoot:where(.xs\:rt-r-size-1) {
-        --sidebar-width: 14rem;
-        --sidebar-width-icon: 2.5rem;
-    }
-    .rt-SidebarRoot:where(.xs\:rt-r-size-3) {
-        --sidebar-width: 18rem;
-        --sidebar-width-icon: 3.5rem;
-    }
+.rt-SidebarMenuItem {
+    list-style: none;
 }
-@media (min-width: 768px) {
-    .rt-SidebarRoot:where(.sm\:rt-r-size-1) {
-        --sidebar-width: 14rem;
-        --sidebar-width-icon: 2.5rem;
-    }
-    .rt-SidebarRoot:where(.sm\:rt-r-size-3) {
-        --sidebar-width: 18rem;
-        --sidebar-width-icon: 3.5rem;
-    }
+.rt-SidebarMenuButton {
+    display: flex;
+    align-items: center;
+    gap: var(--space-2);
+    min-height: var(--sidebar-item-height);
+    padding-top: var(--sidebar-item-padding-y);
+    padding-bottom: var(--sidebar-item-padding-y);
+    padding-left: var(--sidebar-item-padding-left);
+    padding-right: var(--sidebar-item-padding-right);
+    box-sizing: border-box;
+    position: relative;
+    outline: none;
+    scroll-margin: var(--sidebar-content-padding) 0;
+    background: none;
+    border: none;
+    width: 100%;
+    text-align: left;
+    border-radius: var(--radius-2);
+    transition: background var(--duration-2) var(--ease-1), box-shadow var(--duration-2) var(--ease-1), filter var(--duration-2) var(--ease-1);
+    -webkit-user-select: none;
+            user-select: none;
+    cursor: var(--cursor-menu-item);
 }
-@media (min-width: 1024px) {
-    .rt-SidebarRoot:where(.md\:rt-r-size-1) {
-        --sidebar-width: 14rem;
-        --sidebar-width-icon: 2.5rem;
+.rt-SidebarMenuButton:where([data-disabled]) {
+    cursor: default;
+    color: var(--gray-a8);
+}
+.rt-SidebarMenuButton:where([data-highlighted]:not([data-disabled])) {
+    background-color: var(--gray-a3);
+}
+@media (hover: hover) {
+    .rt-SidebarMenuButton:where(:hover:not([data-disabled])) {
+        background-color: var(--gray-a3);
     }
-    .rt-SidebarRoot:where(.md\:rt-r-size-3) {
-        --sidebar-width: 18rem;
-        --sidebar-width-icon: 3.5rem;
+}
+.rt-SidebarMenuButton:where(:active:not([data-disabled])) {
+    background-color: var(--gray-a4);
+}
+.rt-SidebarMenuButton:where([data-active], .rt-active) {
+    background-color: var(--accent-a3);
+    color: var(--accent-a12);
+}
+.rt-SidebarMenuButton:where(:focus-visible) {
+    outline: 2px solid var(--focus-8);
+    outline-offset: 2px;
+}
+.rt-SidebarMenuButton:where([data-accent-color]) {
+    color: var(--accent-a11);
+}
+.rt-SidebarMenuButton :where(.rt-Text[data-accent-color='gray'], [data-accent-color='gray']) {
+    color: var(--gray-a10);
+}
+@media (prefers-reduced-motion: reduce) {
+    .rt-SidebarMenuButton {
+        transition: none;
     }
 }
-@media (min-width: 1280px) {
-    .rt-SidebarRoot:where(.lg\:rt-r-size-1) {
-        --sidebar-width: 14rem;
-        --sidebar-width-icon: 2.5rem;
+.rt-SidebarMenuSubTrigger {
+    justify-content: space-between;
+}
+.rt-SidebarMenuSubTrigger :where(.rt-SidebarMenuSubTriggerIcon) {
+    transition: transform 0.2s ease;
+}
+.rt-SidebarMenuSubTrigger:where([data-state="open"]) :where(.rt-SidebarMenuSubTriggerIcon) {
+    transform: rotate(90deg);
+}
+.rt-SidebarMenuSubContent {
+    overflow: hidden;
+}
+.rt-SidebarMenuSubContent:where(:focus-within) {
+    overflow: visible;
+}
+.rt-SidebarMenuSubContent:where([data-state="open"]) {
+    animation: rt-sidebar-slide-down 200ms ease-out;
+}
+.rt-SidebarMenuSubContent:where([data-state="closed"]) {
+    animation: rt-sidebar-slide-up 200ms ease-out;
+}
+@keyframes rt-sidebar-slide-down {
+    from {
+        height: 0;
     }
-    .rt-SidebarRoot:where(.lg\:rt-r-size-3) {
-        --sidebar-width: 18rem;
-        --sidebar-width-icon: 3.5rem;
+    to {
+        height: var(--radix-accordion-content-height);
     }
 }
-@media (min-width: 1640px) {
-    .rt-SidebarRoot:where(.xl\:rt-r-size-1) {
-        --sidebar-width: 14rem;
-        --sidebar-width-icon: 2.5rem;
+@keyframes rt-sidebar-slide-up {
+    from {
+        height: var(--radix-accordion-content-height);
     }
-    .rt-SidebarRoot:where(.xl\:rt-r-size-3) {
-        --sidebar-width: 18rem;
-        --sidebar-width-icon: 3.5rem;
+    to {
+        height: 0;
     }
 }
-.rt-SidebarHeader:where(.rt-r-size-1) {
-    padding: var(--space-2);
-}
-.rt-SidebarHeader:where(.rt-r-size-3) {
-    padding: var(--space-4);
+.rt-SidebarMenuSubList {
+    padding-left: var(--space-4);
+    border-left: 1px solid var(--gray-a5);
+    margin-left: var(--space-3);
 }
-.rt-SidebarFooter:where(.rt-r-size-1) {
-    padding: var(--space-2);
+:where(.rt-SidebarContent.rt-r-size-1) :where(.rt-SidebarMenuSubList) .rt-SidebarMenuButton {
+    padding-left: var(--space-3);
+    padding-top: calc(var(--space-1) * 0.75);
+    padding-bottom: calc(var(--space-1) * 0.75);
+    min-height: var(--space-5);
+    font-size: var(--font-size-1);
 }
-.rt-SidebarFooter:where(.rt-r-size-3) {
-    padding: var(--space-4);
+:where(.rt-SidebarContent.rt-r-size-2) :where(.rt-SidebarMenuSubList) .rt-SidebarMenuButton {
+    padding-left: var(--space-3);
+    padding-top: var(--space-1);
+    padding-bottom: var(--space-1);
+    min-height: var(--space-6);
+    font-size: var(--font-size-2);
 }
-.rt-SidebarContent:where(.rt-r-size-1) {
-    padding: var(--space-1);
+.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-SidebarContent:where(.rt-r-size-3) {
-    padding: var(--space-3);
+.rt-SidebarFooter :where(.rt-SidebarMenuButton) {
+    display: flex;
+    align-items: center;
+    gap: var(--space-2);
+    min-height: var(--sidebar-item-height);
+    padding-top: var(--sidebar-item-padding-y);
+    padding-bottom: var(--sidebar-item-padding-y);
+    padding-left: var(--sidebar-item-padding-left);
+    padding-right: var(--sidebar-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: 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);
 }
-.rt-SidebarContainer:where(.rt-variant-classic) {
-    background-color: var(--color-surface);
-    border: 1px solid var(--gray-a5);
+.rt-SidebarFooter :where(.rt-SidebarMenuButton):where([data-highlighted]:not([data-disabled])) {
+    background-color: var(--gray-a3);
 }
-.rt-SidebarContainer:where(.rt-variant-ghost) {
-    background-color: transparent;
-    border: none;
+.rt-SidebarFooter :where(.rt-SidebarMenuButton):where(:active:not([data-disabled])) {
+    background-color: var(--gray-a4);
 }
-.rt-SidebarContent :where(.rt-BaseMenuItem) {
-    border-radius: var(--radius-2);
-    margin-bottom: var(--space-1);
+.rt-SidebarFooter :where(.rt-SidebarMenuButton):where(:focus-visible) {
+    outline: 2px solid var(--focus-8);
+    outline-offset: 2px;
 }
-@media (max-width: 768px) {
-    .rt-SidebarRoot {
-        display: none;
+@media (prefers-reduced-motion: reduce) {
+    .rt-SidebarFooter :where(.rt-SidebarMenuButton) {
+        transition: none;
     }
-    .rt-SidebarInset {
-        margin-left: 0;
+}
+.rt-SidebarFooter:where(.rt-SidebarFooter--container) {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    gap: var(--space-2);
+    padding: var(--sidebar-content-padding);
+    min-height: var(--sidebar-item-height);
+}
+.rt-SidebarFooter:where(.rt-SidebarFooter--container) :where(.rt-SidebarMenuButton) {
+    flex: 1;
+}
+.rt-SidebarFooter:where(.rt-flex-row) {
+    flex-direction: row;
+}
+.rt-SidebarFooter:where(.rt-flex-col) {
+    flex-direction: column;
+}
+.rt-SidebarFooter:where(.rt-items-center) {
+    align-items: center;
+}
+.rt-SidebarFooter:where(.rt-items-start) {
+    align-items: flex-start;
+}
+.rt-SidebarFooter:where(.rt-items-end) {
+    align-items: flex-end;
+}
+.rt-SidebarFooter:where(.rt-justify-between) {
+    justify-content: space-between;
+}
+.rt-SidebarFooter:where(.rt-justify-center) {
+    justify-content: center;
+}
+.rt-SidebarFooter:where(.rt-justify-start) {
+    justify-content: flex-start;
+}
+.rt-SidebarFooter:where(.rt-justify-end) {
+    justify-content: flex-end;
+}
+.rt-SidebarFooter:where(.rt-gap-1) {
+    gap: var(--space-1);
+}
+.rt-SidebarFooter:where(.rt-gap-2) {
+    gap: var(--space-2);
+}
+.rt-SidebarFooter:where(.rt-gap-3) {
+    gap: var(--space-3);
+}
+.rt-SidebarFooter:where(.rt-gap-4) {
+    gap: var(--space-4);
+}
+.rt-SidebarSeparator {
+    width: 100%;
+    margin: var(--space-2) 0;
+}
+.rt-SidebarGroup {
+    display: flex;
+    flex-direction: column;
+    flex-shrink: 0;
+}
+.rt-SidebarGroup:where(:not(:first-child)) {
+    margin-top: var(--space-4);
+}
+.rt-SidebarGroupLabel {
+    display: flex;
+    align-items: center;
+    min-height: var(--sidebar-item-height);
+    padding-top: var(--sidebar-item-padding-y);
+    padding-bottom: var(--sidebar-item-padding-y);
+    padding-left: var(--sidebar-item-padding-left);
+    padding-right: var(--sidebar-item-padding-right);
+    box-sizing: border-box;
+    color: var(--gray-a10);
+    -webkit-user-select: none;
+            user-select: none;
+    cursor: default;
+    flex-shrink: 0;
+}
+.rt-SidebarGroupContent {
+    display: flex;
+    flex-direction: column;
+    flex-shrink: 0;
+}
+.rt-SidebarContainer:where(.rt-r-size-1) {
+    --sidebar-base-padding: var(--space-3);
+    --sidebar-base-border-radius: var(--radius-4);
+    --sidebar-content-padding: var(--space-1);
+    --sidebar-item-padding-left: var(--space-2);
+    --sidebar-item-padding-right: var(--space-2);
+    --sidebar-item-padding-y: calc(var(--space-1) * 0.75);
+    --sidebar-item-height: var(--space-5);
+}
+.rt-SidebarContainer:where(.rt-r-size-2) {
+    --sidebar-base-padding: var(--space-4);
+    --sidebar-base-border-radius: var(--radius-4);
+    --sidebar-content-padding: var(--space-2);
+    --sidebar-item-padding-left: var(--space-3);
+    --sidebar-item-padding-right: var(--space-3);
+    --sidebar-item-padding-y: var(--space-1);
+    --sidebar-item-height: var(--space-6);
+}
+.rt-SidebarContent:where(.rt-r-size-1) {
+    --sidebar-content-padding: var(--space-1);
+    --sidebar-item-padding-left: calc(var(--space-5) / 1.2);
+    --sidebar-item-padding-right: var(--space-2);
+    --sidebar-item-padding-y: calc(var(--space-1) * 0.75);
+    --sidebar-item-height: var(--space-5);
+    border-radius: var(--radius-3);
+}
+.rt-SidebarContent:where(.rt-r-size-1):where(:not(:has(.rt-BaseMenuCheckboxItem, .rt-BaseMenuRadioItem))) {
+    --sidebar-item-padding-left: var(--space-2);
+}
+.rt-SidebarContent:where(.rt-r-size-1):where(:has(.rt-BaseMenuCheckboxItem, .rt-BaseMenuRadioItem)) {
+    --sidebar-item-padding-left: calc(var(--space-5) / 1.2);
+}
+.rt-SidebarContent:where(.rt-r-size-2) {
+    --sidebar-content-padding: var(--space-2);
+    --sidebar-item-padding-left: var(--space-3);
+    --sidebar-item-padding-right: var(--space-3);
+    --sidebar-item-padding-y: var(--space-1);
+    --sidebar-item-height: var(--space-6);
+    border-radius: var(--radius-4);
+}
+.rt-SidebarContent:where(.rt-r-size-2):where(:not(:has(.rt-BaseMenuCheckboxItem, .rt-BaseMenuRadioItem))) {
+    --sidebar-item-padding-left: var(--space-3);
+}
+.rt-SidebarContent:where(.rt-r-size-2):where(:has(.rt-BaseMenuCheckboxItem, .rt-BaseMenuRadioItem)) {
+    --sidebar-item-padding-left: var(--space-5);
+}
+.rt-SidebarContent:where(.rt-r-size-1) :where(.rt-SidebarMenuButton) {
+    font-size: var(--font-size-1);
+    line-height: var(--line-height-1);
+    letter-spacing: var(--letter-spacing-1);
+    border-radius: var(--radius-1);
+}
+.rt-SidebarContent:where(.rt-r-size-1) :where(.rt-SidebarMenuButton) :where(svg) {
+    width: calc(var(--space-3) * 1.175);
+    height: calc(var(--space-3) * 1.175);
+    flex-shrink: 0;
+}
+.rt-SidebarContent:where(.rt-r-size-1) :where(.rt-BaseMenuSubTriggerIcon) {
+    width: calc(8px * var(--scaling));
+    height: calc(8px * var(--scaling));
+    flex-shrink: 0;
+    margin-left: auto;
+}
+.rt-SidebarContent:where(.rt-r-size-1) :where(.rt-SidebarGroupLabel) {
+    font-size: var(--font-size-1);
+    line-height: var(--line-height-1);
+    letter-spacing: var(--letter-spacing-1);
+}
+.rt-SidebarContainer:where(.rt-r-size-1) :where(.rt-SidebarHeader .rt-SidebarMenuButton) {
+    font-size: var(--font-size-1);
+    line-height: var(--line-height-1);
+    letter-spacing: var(--letter-spacing-1);
+    border-radius: var(--radius-1);
+}
+.rt-SidebarContainer:where(.rt-r-size-1) :where(.rt-SidebarHeader .rt-SidebarMenuButton) :where(svg) {
+    width: calc(var(--space-3) * 1.175);
+    height: calc(var(--space-3) * 1.175);
+    flex-shrink: 0;
+}
+.rt-SidebarContainer:where(.rt-r-size-1) :where(.rt-SidebarFooter .rt-SidebarMenuButton) {
+    font-size: var(--font-size-1);
+    line-height: var(--line-height-1);
+    letter-spacing: var(--letter-spacing-1);
+    border-radius: var(--radius-1);
+}
+.rt-SidebarContainer:where(.rt-r-size-1) :where(.rt-SidebarFooter .rt-SidebarMenuButton) :where(svg) {
+    width: calc(var(--space-3) * 1.175);
+    height: calc(var(--space-3) * 1.175);
+    flex-shrink: 0;
+}
+.rt-SidebarContent:where(.rt-r-size-2) :where(.rt-SidebarMenuButton) {
+    font-size: var(--font-size-2);
+    line-height: var(--line-height-2);
+    letter-spacing: var(--letter-spacing-2);
+    border-radius: var(--radius-2);
+}
+.rt-SidebarContent:where(.rt-r-size-2) :where(.rt-SidebarMenuButton) :where(svg) {
+    width: var(--space-4);
+    height: var(--space-4);
+    flex-shrink: 0;
+}
+.rt-SidebarContent:where(.rt-r-size-2) :where(.rt-BaseMenuSubTriggerIcon) {
+    width: calc(10px * var(--scaling));
+    height: calc(10px * var(--scaling));
+    flex-shrink: 0;
+    margin-left: auto;
+}
+.rt-SidebarContent:where(.rt-r-size-2) :where(.rt-SidebarGroupLabel) {
+    font-size: var(--font-size-2);
+    line-height: var(--line-height-2);
+    letter-spacing: var(--letter-spacing-2);
+}
+.rt-SidebarContainer:where(.rt-r-size-2) :where(.rt-SidebarHeader .rt-SidebarMenuButton) {
+    font-size: var(--font-size-2);
+    line-height: var(--line-height-2);
+    letter-spacing: var(--letter-spacing-2);
+    border-radius: var(--radius-2);
+}
+.rt-SidebarContainer:where(.rt-r-size-2) :where(.rt-SidebarHeader .rt-SidebarMenuButton) :where(svg) {
+    width: var(--space-4);
+    height: var(--space-4);
+    flex-shrink: 0;
+}
+.rt-SidebarContainer:where(.rt-r-size-2) :where(.rt-SidebarFooter .rt-SidebarMenuButton) {
+    font-size: var(--font-size-2);
+    line-height: var(--line-height-2);
+    letter-spacing: var(--letter-spacing-2);
+    border-radius: var(--radius-2);
+}
+.rt-SidebarContainer:where(.rt-r-size-2) :where(.rt-SidebarFooter .rt-SidebarMenuButton) :where(svg) {
+    width: var(--space-4);
+    height: var(--space-4);
+    flex-shrink: 0;
+}
+@media (min-width: 520px) {
+    .rt-SidebarContainer:where(.xs\:rt-r-size-1) {
+        --sidebar-base-padding: var(--space-3);
+        --sidebar-base-border-radius: var(--radius-4);
+        --sidebar-content-padding: var(--space-1);
+        --sidebar-item-padding-left: var(--space-2);
+        --sidebar-item-padding-right: var(--space-2);
+        --sidebar-item-padding-y: calc(var(--space-1) * 0.75);
+        --sidebar-item-height: var(--space-5);
+    }
+    .rt-SidebarContainer:where(.xs\:rt-r-size-2) {
+        --sidebar-base-padding: var(--space-4);
+        --sidebar-base-border-radius: var(--radius-4);
+        --sidebar-content-padding: var(--space-2);
+        --sidebar-item-padding-left: var(--space-3);
+        --sidebar-item-padding-right: var(--space-3);
+        --sidebar-item-padding-y: var(--space-1);
+        --sidebar-item-height: var(--space-6);
+    }
+    .rt-SidebarContent:where(.xs\:rt-r-size-1) {
+        --sidebar-content-padding: var(--space-1);
+        --sidebar-item-padding-left: calc(var(--space-5) / 1.2);
+        --sidebar-item-padding-right: var(--space-2);
+        --sidebar-item-padding-y: calc(var(--space-1) * 0.75);
+        --sidebar-item-height: var(--space-5);
+        border-radius: var(--radius-3);
+    }
+    .rt-SidebarContent:where(.xs\:rt-r-size-1):where(:not(:has(.rt-BaseMenuCheckboxItem, .rt-BaseMenuRadioItem))) {
+        --sidebar-item-padding-left: var(--space-2);
+    }
+    .rt-SidebarContent:where(.xs\:rt-r-size-1):where(:has(.rt-BaseMenuCheckboxItem, .rt-BaseMenuRadioItem)) {
+        --sidebar-item-padding-left: calc(var(--space-5) / 1.2);
+    }
+    .rt-SidebarContent:where(.xs\:rt-r-size-2) {
+        --sidebar-content-padding: var(--space-2);
+        --sidebar-item-padding-left: var(--space-3);
+        --sidebar-item-padding-right: var(--space-3);
+        --sidebar-item-padding-y: var(--space-1);
+        --sidebar-item-height: var(--space-6);
+        border-radius: var(--radius-4);
+    }
+    .rt-SidebarContent:where(.xs\:rt-r-size-2):where(:not(:has(.rt-BaseMenuCheckboxItem, .rt-BaseMenuRadioItem))) {
+        --sidebar-item-padding-left: var(--space-3);
+    }
+    .rt-SidebarContent:where(.xs\:rt-r-size-2):where(:has(.rt-BaseMenuCheckboxItem, .rt-BaseMenuRadioItem)) {
+        --sidebar-item-padding-left: var(--space-5);
+    }
+    .rt-SidebarContent:where(.xs\:rt-r-size-1) :where(.rt-SidebarMenuButton) {
+        font-size: var(--font-size-1);
+        line-height: var(--line-height-1);
+        letter-spacing: var(--letter-spacing-1);
+        border-radius: var(--radius-1);
+    }
+    .rt-SidebarContent:where(.xs\:rt-r-size-1) :where(.rt-SidebarMenuButton) :where(svg) {
+        width: calc(var(--space-3) * 1.175);
+        height: calc(var(--space-3) * 1.175);
+        flex-shrink: 0;
+    }
+    .rt-SidebarContent:where(.xs\:rt-r-size-1) :where(.rt-BaseMenuSubTriggerIcon) {
+        width: calc(8px * var(--scaling));
+        height: calc(8px * var(--scaling));
+        flex-shrink: 0;
+        margin-left: auto;
+    }
+    .rt-SidebarContent:where(.xs\:rt-r-size-1) :where(.rt-SidebarGroupLabel) {
+        font-size: var(--font-size-1);
+        line-height: var(--line-height-1);
+        letter-spacing: var(--letter-spacing-1);
+    }
+    .rt-SidebarContainer:where(.xs\:rt-r-size-1) :where(.rt-SidebarHeader .rt-SidebarMenuButton) {
+        font-size: var(--font-size-1);
+        line-height: var(--line-height-1);
+        letter-spacing: var(--letter-spacing-1);
+        border-radius: var(--radius-1);
+    }
+    .rt-SidebarContainer:where(.xs\:rt-r-size-1) :where(.rt-SidebarHeader .rt-SidebarMenuButton) :where(svg) {
+        width: calc(var(--space-3) * 1.175);
+        height: calc(var(--space-3) * 1.175);
+        flex-shrink: 0;
+    }
+    .rt-SidebarContainer:where(.xs\:rt-r-size-1) :where(.rt-SidebarFooter .rt-SidebarMenuButton) {
+        font-size: var(--font-size-1);
+        line-height: var(--line-height-1);
+        letter-spacing: var(--letter-spacing-1);
+        border-radius: var(--radius-1);
+    }
+    .rt-SidebarContainer:where(.xs\:rt-r-size-1) :where(.rt-SidebarFooter .rt-SidebarMenuButton) :where(svg) {
+        width: calc(var(--space-3) * 1.175);
+        height: calc(var(--space-3) * 1.175);
+        flex-shrink: 0;
+    }
+    .rt-SidebarContent:where(.xs\:rt-r-size-2) :where(.rt-SidebarMenuButton) {
+        font-size: var(--font-size-2);
+        line-height: var(--line-height-2);
+        letter-spacing: var(--letter-spacing-2);
+        border-radius: var(--radius-2);
+    }
+    .rt-SidebarContent:where(.xs\:rt-r-size-2) :where(.rt-SidebarMenuButton) :where(svg) {
+        width: var(--space-4);
+        height: var(--space-4);
+        flex-shrink: 0;
+    }
+    .rt-SidebarContent:where(.xs\:rt-r-size-2) :where(.rt-BaseMenuSubTriggerIcon) {
+        width: calc(10px * var(--scaling));
+        height: calc(10px * var(--scaling));
+        flex-shrink: 0;
+        margin-left: auto;
+    }
+    .rt-SidebarContent:where(.xs\:rt-r-size-2) :where(.rt-SidebarGroupLabel) {
+        font-size: var(--font-size-2);
+        line-height: var(--line-height-2);
+        letter-spacing: var(--letter-spacing-2);
+    }
+    .rt-SidebarContainer:where(.xs\:rt-r-size-2) :where(.rt-SidebarHeader .rt-SidebarMenuButton) {
+        font-size: var(--font-size-2);
+        line-height: var(--line-height-2);
+        letter-spacing: var(--letter-spacing-2);
+        border-radius: var(--radius-2);
+    }
+    .rt-SidebarContainer:where(.xs\:rt-r-size-2) :where(.rt-SidebarHeader .rt-SidebarMenuButton) :where(svg) {
+        width: var(--space-4);
+        height: var(--space-4);
+        flex-shrink: 0;
+    }
+    .rt-SidebarContainer:where(.xs\:rt-r-size-2) :where(.rt-SidebarFooter .rt-SidebarMenuButton) {
+        font-size: var(--font-size-2);
+        line-height: var(--line-height-2);
+        letter-spacing: var(--letter-spacing-2);
+        border-radius: var(--radius-2);
+    }
+    .rt-SidebarContainer:where(.xs\:rt-r-size-2) :where(.rt-SidebarFooter .rt-SidebarMenuButton) :where(svg) {
+        width: var(--space-4);
+        height: var(--space-4);
+        flex-shrink: 0;
+    }
+}
+@media (min-width: 768px) {
+    .rt-SidebarContainer:where(.sm\:rt-r-size-1) {
+        --sidebar-base-padding: var(--space-3);
+        --sidebar-base-border-radius: var(--radius-4);
+        --sidebar-content-padding: var(--space-1);
+        --sidebar-item-padding-left: var(--space-2);
+        --sidebar-item-padding-right: var(--space-2);
+        --sidebar-item-padding-y: calc(var(--space-1) * 0.75);
+        --sidebar-item-height: var(--space-5);
+    }
+    .rt-SidebarContainer:where(.sm\:rt-r-size-2) {
+        --sidebar-base-padding: var(--space-4);
+        --sidebar-base-border-radius: var(--radius-4);
+        --sidebar-content-padding: var(--space-2);
+        --sidebar-item-padding-left: var(--space-3);
+        --sidebar-item-padding-right: var(--space-3);
+        --sidebar-item-padding-y: var(--space-1);
+        --sidebar-item-height: var(--space-6);
+    }
+    .rt-SidebarContent:where(.sm\:rt-r-size-1) {
+        --sidebar-content-padding: var(--space-1);
+        --sidebar-item-padding-left: calc(var(--space-5) / 1.2);
+        --sidebar-item-padding-right: var(--space-2);
+        --sidebar-item-padding-y: calc(var(--space-1) * 0.75);
+        --sidebar-item-height: var(--space-5);
+        border-radius: var(--radius-3);
+    }
+    .rt-SidebarContent:where(.sm\:rt-r-size-1):where(:not(:has(.rt-BaseMenuCheckboxItem, .rt-BaseMenuRadioItem))) {
+        --sidebar-item-padding-left: var(--space-2);
+    }
+    .rt-SidebarContent:where(.sm\:rt-r-size-1):where(:has(.rt-BaseMenuCheckboxItem, .rt-BaseMenuRadioItem)) {
+        --sidebar-item-padding-left: calc(var(--space-5) / 1.2);
+    }
+    .rt-SidebarContent:where(.sm\:rt-r-size-2) {
+        --sidebar-content-padding: var(--space-2);
+        --sidebar-item-padding-left: var(--space-3);
+        --sidebar-item-padding-right: var(--space-3);
+        --sidebar-item-padding-y: var(--space-1);
+        --sidebar-item-height: var(--space-6);
+        border-radius: var(--radius-4);
+    }
+    .rt-SidebarContent:where(.sm\:rt-r-size-2):where(:not(:has(.rt-BaseMenuCheckboxItem, .rt-BaseMenuRadioItem))) {
+        --sidebar-item-padding-left: var(--space-3);
+    }
+    .rt-SidebarContent:where(.sm\:rt-r-size-2):where(:has(.rt-BaseMenuCheckboxItem, .rt-BaseMenuRadioItem)) {
+        --sidebar-item-padding-left: var(--space-5);
+    }
+    .rt-SidebarContent:where(.sm\:rt-r-size-1) :where(.rt-SidebarMenuButton) {
+        font-size: var(--font-size-1);
+        line-height: var(--line-height-1);
+        letter-spacing: var(--letter-spacing-1);
+        border-radius: var(--radius-1);
+    }
+    .rt-SidebarContent:where(.sm\:rt-r-size-1) :where(.rt-SidebarMenuButton) :where(svg) {
+        width: calc(var(--space-3) * 1.175);
+        height: calc(var(--space-3) * 1.175);
+        flex-shrink: 0;
+    }
+    .rt-SidebarContent:where(.sm\:rt-r-size-1) :where(.rt-BaseMenuSubTriggerIcon) {
+        width: calc(8px * var(--scaling));
+        height: calc(8px * var(--scaling));
+        flex-shrink: 0;
+        margin-left: auto;
+    }
+    .rt-SidebarContent:where(.sm\:rt-r-size-1) :where(.rt-SidebarGroupLabel) {
+        font-size: var(--font-size-1);
+        line-height: var(--line-height-1);
+        letter-spacing: var(--letter-spacing-1);
+    }
+    .rt-SidebarContainer:where(.sm\:rt-r-size-1) :where(.rt-SidebarHeader .rt-SidebarMenuButton) {
+        font-size: var(--font-size-1);
+        line-height: var(--line-height-1);
+        letter-spacing: var(--letter-spacing-1);
+        border-radius: var(--radius-1);
+    }
+    .rt-SidebarContainer:where(.sm\:rt-r-size-1) :where(.rt-SidebarHeader .rt-SidebarMenuButton) :where(svg) {
+        width: calc(var(--space-3) * 1.175);
+        height: calc(var(--space-3) * 1.175);
+        flex-shrink: 0;
+    }
+    .rt-SidebarContainer:where(.sm\:rt-r-size-1) :where(.rt-SidebarFooter .rt-SidebarMenuButton) {
+        font-size: var(--font-size-1);
+        line-height: var(--line-height-1);
+        letter-spacing: var(--letter-spacing-1);
+        border-radius: var(--radius-1);
+    }
+    .rt-SidebarContainer:where(.sm\:rt-r-size-1) :where(.rt-SidebarFooter .rt-SidebarMenuButton) :where(svg) {
+        width: calc(var(--space-3) * 1.175);
+        height: calc(var(--space-3) * 1.175);
+        flex-shrink: 0;
+    }
+    .rt-SidebarContent:where(.sm\:rt-r-size-2) :where(.rt-SidebarMenuButton) {
+        font-size: var(--font-size-2);
+        line-height: var(--line-height-2);
+        letter-spacing: var(--letter-spacing-2);
+        border-radius: var(--radius-2);
+    }
+    .rt-SidebarContent:where(.sm\:rt-r-size-2) :where(.rt-SidebarMenuButton) :where(svg) {
+        width: var(--space-4);
+        height: var(--space-4);
+        flex-shrink: 0;
+    }
+    .rt-SidebarContent:where(.sm\:rt-r-size-2) :where(.rt-BaseMenuSubTriggerIcon) {
+        width: calc(10px * var(--scaling));
+        height: calc(10px * var(--scaling));
+        flex-shrink: 0;
+        margin-left: auto;
+    }
+    .rt-SidebarContent:where(.sm\:rt-r-size-2) :where(.rt-SidebarGroupLabel) {
+        font-size: var(--font-size-2);
+        line-height: var(--line-height-2);
+        letter-spacing: var(--letter-spacing-2);
+    }
+    .rt-SidebarContainer:where(.sm\:rt-r-size-2) :where(.rt-SidebarHeader .rt-SidebarMenuButton) {
+        font-size: var(--font-size-2);
+        line-height: var(--line-height-2);
+        letter-spacing: var(--letter-spacing-2);
+        border-radius: var(--radius-2);
+    }
+    .rt-SidebarContainer:where(.sm\:rt-r-size-2) :where(.rt-SidebarHeader .rt-SidebarMenuButton) :where(svg) {
+        width: var(--space-4);
+        height: var(--space-4);
+        flex-shrink: 0;
+    }
+    .rt-SidebarContainer:where(.sm\:rt-r-size-2) :where(.rt-SidebarFooter .rt-SidebarMenuButton) {
+        font-size: var(--font-size-2);
+        line-height: var(--line-height-2);
+        letter-spacing: var(--letter-spacing-2);
+        border-radius: var(--radius-2);
+    }
+    .rt-SidebarContainer:where(.sm\:rt-r-size-2) :where(.rt-SidebarFooter .rt-SidebarMenuButton) :where(svg) {
+        width: var(--space-4);
+        height: var(--space-4);
+        flex-shrink: 0;
+    }
+}
+@media (min-width: 1024px) {
+    .rt-SidebarContainer:where(.md\:rt-r-size-1) {
+        --sidebar-base-padding: var(--space-3);
+        --sidebar-base-border-radius: var(--radius-4);
+        --sidebar-content-padding: var(--space-1);
+        --sidebar-item-padding-left: var(--space-2);
+        --sidebar-item-padding-right: var(--space-2);
+        --sidebar-item-padding-y: calc(var(--space-1) * 0.75);
+        --sidebar-item-height: var(--space-5);
+    }
+    .rt-SidebarContainer:where(.md\:rt-r-size-2) {
+        --sidebar-base-padding: var(--space-4);
+        --sidebar-base-border-radius: var(--radius-4);
+        --sidebar-content-padding: var(--space-2);
+        --sidebar-item-padding-left: var(--space-3);
+        --sidebar-item-padding-right: var(--space-3);
+        --sidebar-item-padding-y: var(--space-1);
+        --sidebar-item-height: var(--space-6);
+    }
+    .rt-SidebarContent:where(.md\:rt-r-size-1) {
+        --sidebar-content-padding: var(--space-1);
+        --sidebar-item-padding-left: calc(var(--space-5) / 1.2);
+        --sidebar-item-padding-right: var(--space-2);
+        --sidebar-item-padding-y: calc(var(--space-1) * 0.75);
+        --sidebar-item-height: var(--space-5);
+        border-radius: var(--radius-3);
+    }
+    .rt-SidebarContent:where(.md\:rt-r-size-1):where(:not(:has(.rt-BaseMenuCheckboxItem, .rt-BaseMenuRadioItem))) {
+        --sidebar-item-padding-left: var(--space-2);
+    }
+    .rt-SidebarContent:where(.md\:rt-r-size-1):where(:has(.rt-BaseMenuCheckboxItem, .rt-BaseMenuRadioItem)) {
+        --sidebar-item-padding-left: calc(var(--space-5) / 1.2);
+    }
+    .rt-SidebarContent:where(.md\:rt-r-size-2) {
+        --sidebar-content-padding: var(--space-2);
+        --sidebar-item-padding-left: var(--space-3);
+        --sidebar-item-padding-right: var(--space-3);
+        --sidebar-item-padding-y: var(--space-1);
+        --sidebar-item-height: var(--space-6);
+        border-radius: var(--radius-4);
+    }
+    .rt-SidebarContent:where(.md\:rt-r-size-2):where(:not(:has(.rt-BaseMenuCheckboxItem, .rt-BaseMenuRadioItem))) {
+        --sidebar-item-padding-left: var(--space-3);
+    }
+    .rt-SidebarContent:where(.md\:rt-r-size-2):where(:has(.rt-BaseMenuCheckboxItem, .rt-BaseMenuRadioItem)) {
+        --sidebar-item-padding-left: var(--space-5);
+    }
+    .rt-SidebarContent:where(.md\:rt-r-size-1) :where(.rt-SidebarMenuButton) {
+        font-size: var(--font-size-1);
+        line-height: var(--line-height-1);
+        letter-spacing: var(--letter-spacing-1);
+        border-radius: var(--radius-1);
+    }
+    .rt-SidebarContent:where(.md\:rt-r-size-1) :where(.rt-SidebarMenuButton) :where(svg) {
+        width: calc(var(--space-3) * 1.175);
+        height: calc(var(--space-3) * 1.175);
+        flex-shrink: 0;
+    }
+    .rt-SidebarContent:where(.md\:rt-r-size-1) :where(.rt-BaseMenuSubTriggerIcon) {
+        width: calc(8px * var(--scaling));
+        height: calc(8px * var(--scaling));
+        flex-shrink: 0;
+        margin-left: auto;
+    }
+    .rt-SidebarContent:where(.md\:rt-r-size-1) :where(.rt-SidebarGroupLabel) {
+        font-size: var(--font-size-1);
+        line-height: var(--line-height-1);
+        letter-spacing: var(--letter-spacing-1);
+    }
+    .rt-SidebarContainer:where(.md\:rt-r-size-1) :where(.rt-SidebarHeader .rt-SidebarMenuButton) {
+        font-size: var(--font-size-1);
+        line-height: var(--line-height-1);
+        letter-spacing: var(--letter-spacing-1);
+        border-radius: var(--radius-1);
+    }
+    .rt-SidebarContainer:where(.md\:rt-r-size-1) :where(.rt-SidebarHeader .rt-SidebarMenuButton) :where(svg) {
+        width: calc(var(--space-3) * 1.175);
+        height: calc(var(--space-3) * 1.175);
+        flex-shrink: 0;
+    }
+    .rt-SidebarContainer:where(.md\:rt-r-size-1) :where(.rt-SidebarFooter .rt-SidebarMenuButton) {
+        font-size: var(--font-size-1);
+        line-height: var(--line-height-1);
+        letter-spacing: var(--letter-spacing-1);
+        border-radius: var(--radius-1);
+    }
+    .rt-SidebarContainer:where(.md\:rt-r-size-1) :where(.rt-SidebarFooter .rt-SidebarMenuButton) :where(svg) {
+        width: calc(var(--space-3) * 1.175);
+        height: calc(var(--space-3) * 1.175);
+        flex-shrink: 0;
+    }
+    .rt-SidebarContent:where(.md\:rt-r-size-2) :where(.rt-SidebarMenuButton) {
+        font-size: var(--font-size-2);
+        line-height: var(--line-height-2);
+        letter-spacing: var(--letter-spacing-2);
+        border-radius: var(--radius-2);
+    }
+    .rt-SidebarContent:where(.md\:rt-r-size-2) :where(.rt-SidebarMenuButton) :where(svg) {
+        width: var(--space-4);
+        height: var(--space-4);
+        flex-shrink: 0;
+    }
+    .rt-SidebarContent:where(.md\:rt-r-size-2) :where(.rt-BaseMenuSubTriggerIcon) {
+        width: calc(10px * var(--scaling));
+        height: calc(10px * var(--scaling));
+        flex-shrink: 0;
+        margin-left: auto;
+    }
+    .rt-SidebarContent:where(.md\:rt-r-size-2) :where(.rt-SidebarGroupLabel) {
+        font-size: var(--font-size-2);
+        line-height: var(--line-height-2);
+        letter-spacing: var(--letter-spacing-2);
+    }
+    .rt-SidebarContainer:where(.md\:rt-r-size-2) :where(.rt-SidebarHeader .rt-SidebarMenuButton) {
+        font-size: var(--font-size-2);
+        line-height: var(--line-height-2);
+        letter-spacing: var(--letter-spacing-2);
+        border-radius: var(--radius-2);
+    }
+    .rt-SidebarContainer:where(.md\:rt-r-size-2) :where(.rt-SidebarHeader .rt-SidebarMenuButton) :where(svg) {
+        width: var(--space-4);
+        height: var(--space-4);
+        flex-shrink: 0;
+    }
+    .rt-SidebarContainer:where(.md\:rt-r-size-2) :where(.rt-SidebarFooter .rt-SidebarMenuButton) {
+        font-size: var(--font-size-2);
+        line-height: var(--line-height-2);
+        letter-spacing: var(--letter-spacing-2);
+        border-radius: var(--radius-2);
+    }
+    .rt-SidebarContainer:where(.md\:rt-r-size-2) :where(.rt-SidebarFooter .rt-SidebarMenuButton) :where(svg) {
+        width: var(--space-4);
+        height: var(--space-4);
+        flex-shrink: 0;
+    }
+}
+@media (min-width: 1280px) {
+    .rt-SidebarContainer:where(.lg\:rt-r-size-1) {
+        --sidebar-base-padding: var(--space-3);
+        --sidebar-base-border-radius: var(--radius-4);
+        --sidebar-content-padding: var(--space-1);
+        --sidebar-item-padding-left: var(--space-2);
+        --sidebar-item-padding-right: var(--space-2);
+        --sidebar-item-padding-y: calc(var(--space-1) * 0.75);
+        --sidebar-item-height: var(--space-5);
+    }
+    .rt-SidebarContainer:where(.lg\:rt-r-size-2) {
+        --sidebar-base-padding: var(--space-4);
+        --sidebar-base-border-radius: var(--radius-4);
+        --sidebar-content-padding: var(--space-2);
+        --sidebar-item-padding-left: var(--space-3);
+        --sidebar-item-padding-right: var(--space-3);
+        --sidebar-item-padding-y: var(--space-1);
+        --sidebar-item-height: var(--space-6);
+    }
+    .rt-SidebarContent:where(.lg\:rt-r-size-1) {
+        --sidebar-content-padding: var(--space-1);
+        --sidebar-item-padding-left: calc(var(--space-5) / 1.2);
+        --sidebar-item-padding-right: var(--space-2);
+        --sidebar-item-padding-y: calc(var(--space-1) * 0.75);
+        --sidebar-item-height: var(--space-5);
+        border-radius: var(--radius-3);
+    }
+    .rt-SidebarContent:where(.lg\:rt-r-size-1):where(:not(:has(.rt-BaseMenuCheckboxItem, .rt-BaseMenuRadioItem))) {
+        --sidebar-item-padding-left: var(--space-2);
+    }
+    .rt-SidebarContent:where(.lg\:rt-r-size-1):where(:has(.rt-BaseMenuCheckboxItem, .rt-BaseMenuRadioItem)) {
+        --sidebar-item-padding-left: calc(var(--space-5) / 1.2);
+    }
+    .rt-SidebarContent:where(.lg\:rt-r-size-2) {
+        --sidebar-content-padding: var(--space-2);
+        --sidebar-item-padding-left: var(--space-3);
+        --sidebar-item-padding-right: var(--space-3);
+        --sidebar-item-padding-y: var(--space-1);
+        --sidebar-item-height: var(--space-6);
+        border-radius: var(--radius-4);
+    }
+    .rt-SidebarContent:where(.lg\:rt-r-size-2):where(:not(:has(.rt-BaseMenuCheckboxItem, .rt-BaseMenuRadioItem))) {
+        --sidebar-item-padding-left: var(--space-3);
+    }
+    .rt-SidebarContent:where(.lg\:rt-r-size-2):where(:has(.rt-BaseMenuCheckboxItem, .rt-BaseMenuRadioItem)) {
+        --sidebar-item-padding-left: var(--space-5);
+    }
+    .rt-SidebarContent:where(.lg\:rt-r-size-1) :where(.rt-SidebarMenuButton) {
+        font-size: var(--font-size-1);
+        line-height: var(--line-height-1);
+        letter-spacing: var(--letter-spacing-1);
+        border-radius: var(--radius-1);
+    }
+    .rt-SidebarContent:where(.lg\:rt-r-size-1) :where(.rt-SidebarMenuButton) :where(svg) {
+        width: calc(var(--space-3) * 1.175);
+        height: calc(var(--space-3) * 1.175);
+        flex-shrink: 0;
+    }
+    .rt-SidebarContent:where(.lg\:rt-r-size-1) :where(.rt-BaseMenuSubTriggerIcon) {
+        width: calc(8px * var(--scaling));
+        height: calc(8px * var(--scaling));
+        flex-shrink: 0;
+        margin-left: auto;
+    }
+    .rt-SidebarContent:where(.lg\:rt-r-size-1) :where(.rt-SidebarGroupLabel) {
+        font-size: var(--font-size-1);
+        line-height: var(--line-height-1);
+        letter-spacing: var(--letter-spacing-1);
+    }
+    .rt-SidebarContainer:where(.lg\:rt-r-size-1) :where(.rt-SidebarHeader .rt-SidebarMenuButton) {
+        font-size: var(--font-size-1);
+        line-height: var(--line-height-1);
+        letter-spacing: var(--letter-spacing-1);
+        border-radius: var(--radius-1);
+    }
+    .rt-SidebarContainer:where(.lg\:rt-r-size-1) :where(.rt-SidebarHeader .rt-SidebarMenuButton) :where(svg) {
+        width: calc(var(--space-3) * 1.175);
+        height: calc(var(--space-3) * 1.175);
+        flex-shrink: 0;
+    }
+    .rt-SidebarContainer:where(.lg\:rt-r-size-1) :where(.rt-SidebarFooter .rt-SidebarMenuButton) {
+        font-size: var(--font-size-1);
+        line-height: var(--line-height-1);
+        letter-spacing: var(--letter-spacing-1);
+        border-radius: var(--radius-1);
+    }
+    .rt-SidebarContainer:where(.lg\:rt-r-size-1) :where(.rt-SidebarFooter .rt-SidebarMenuButton) :where(svg) {
+        width: calc(var(--space-3) * 1.175);
+        height: calc(var(--space-3) * 1.175);
+        flex-shrink: 0;
+    }
+    .rt-SidebarContent:where(.lg\:rt-r-size-2) :where(.rt-SidebarMenuButton) {
+        font-size: var(--font-size-2);
+        line-height: var(--line-height-2);
+        letter-spacing: var(--letter-spacing-2);
+        border-radius: var(--radius-2);
+    }
+    .rt-SidebarContent:where(.lg\:rt-r-size-2) :where(.rt-SidebarMenuButton) :where(svg) {
+        width: var(--space-4);
+        height: var(--space-4);
+        flex-shrink: 0;
+    }
+    .rt-SidebarContent:where(.lg\:rt-r-size-2) :where(.rt-BaseMenuSubTriggerIcon) {
+        width: calc(10px * var(--scaling));
+        height: calc(10px * var(--scaling));
+        flex-shrink: 0;
+        margin-left: auto;
+    }
+    .rt-SidebarContent:where(.lg\:rt-r-size-2) :where(.rt-SidebarGroupLabel) {
+        font-size: var(--font-size-2);
+        line-height: var(--line-height-2);
+        letter-spacing: var(--letter-spacing-2);
+    }
+    .rt-SidebarContainer:where(.lg\:rt-r-size-2) :where(.rt-SidebarHeader .rt-SidebarMenuButton) {
+        font-size: var(--font-size-2);
+        line-height: var(--line-height-2);
+        letter-spacing: var(--letter-spacing-2);
+        border-radius: var(--radius-2);
+    }
+    .rt-SidebarContainer:where(.lg\:rt-r-size-2) :where(.rt-SidebarHeader .rt-SidebarMenuButton) :where(svg) {
+        width: var(--space-4);
+        height: var(--space-4);
+        flex-shrink: 0;
+    }
+    .rt-SidebarContainer:where(.lg\:rt-r-size-2) :where(.rt-SidebarFooter .rt-SidebarMenuButton) {
+        font-size: var(--font-size-2);
+        line-height: var(--line-height-2);
+        letter-spacing: var(--letter-spacing-2);
+        border-radius: var(--radius-2);
+    }
+    .rt-SidebarContainer:where(.lg\:rt-r-size-2) :where(.rt-SidebarFooter .rt-SidebarMenuButton) :where(svg) {
+        width: var(--space-4);
+        height: var(--space-4);
+        flex-shrink: 0;
+    }
+}
+@media (min-width: 1640px) {
+    .rt-SidebarContainer:where(.xl\:rt-r-size-1) {
+        --sidebar-base-padding: var(--space-3);
+        --sidebar-base-border-radius: var(--radius-4);
+        --sidebar-content-padding: var(--space-1);
+        --sidebar-item-padding-left: var(--space-2);
+        --sidebar-item-padding-right: var(--space-2);
+        --sidebar-item-padding-y: calc(var(--space-1) * 0.75);
+        --sidebar-item-height: var(--space-5);
+    }
+    .rt-SidebarContainer:where(.xl\:rt-r-size-2) {
+        --sidebar-base-padding: var(--space-4);
+        --sidebar-base-border-radius: var(--radius-4);
+        --sidebar-content-padding: var(--space-2);
+        --sidebar-item-padding-left: var(--space-3);
+        --sidebar-item-padding-right: var(--space-3);
+        --sidebar-item-padding-y: var(--space-1);
+        --sidebar-item-height: var(--space-6);
+    }
+    .rt-SidebarContent:where(.xl\:rt-r-size-1) {
+        --sidebar-content-padding: var(--space-1);
+        --sidebar-item-padding-left: calc(var(--space-5) / 1.2);
+        --sidebar-item-padding-right: var(--space-2);
+        --sidebar-item-padding-y: calc(var(--space-1) * 0.75);
+        --sidebar-item-height: var(--space-5);
+        border-radius: var(--radius-3);
+    }
+    .rt-SidebarContent:where(.xl\:rt-r-size-1):where(:not(:has(.rt-BaseMenuCheckboxItem, .rt-BaseMenuRadioItem))) {
+        --sidebar-item-padding-left: var(--space-2);
+    }
+    .rt-SidebarContent:where(.xl\:rt-r-size-1):where(:has(.rt-BaseMenuCheckboxItem, .rt-BaseMenuRadioItem)) {
+        --sidebar-item-padding-left: calc(var(--space-5) / 1.2);
+    }
+    .rt-SidebarContent:where(.xl\:rt-r-size-2) {
+        --sidebar-content-padding: var(--space-2);
+        --sidebar-item-padding-left: var(--space-3);
+        --sidebar-item-padding-right: var(--space-3);
+        --sidebar-item-padding-y: var(--space-1);
+        --sidebar-item-height: var(--space-6);
+        border-radius: var(--radius-4);
+    }
+    .rt-SidebarContent:where(.xl\:rt-r-size-2):where(:not(:has(.rt-BaseMenuCheckboxItem, .rt-BaseMenuRadioItem))) {
+        --sidebar-item-padding-left: var(--space-3);
+    }
+    .rt-SidebarContent:where(.xl\:rt-r-size-2):where(:has(.rt-BaseMenuCheckboxItem, .rt-BaseMenuRadioItem)) {
+        --sidebar-item-padding-left: var(--space-5);
+    }
+    .rt-SidebarContent:where(.xl\:rt-r-size-1) :where(.rt-SidebarMenuButton) {
+        font-size: var(--font-size-1);
+        line-height: var(--line-height-1);
+        letter-spacing: var(--letter-spacing-1);
+        border-radius: var(--radius-1);
+    }
+    .rt-SidebarContent:where(.xl\:rt-r-size-1) :where(.rt-SidebarMenuButton) :where(svg) {
+        width: calc(var(--space-3) * 1.175);
+        height: calc(var(--space-3) * 1.175);
+        flex-shrink: 0;
+    }
+    .rt-SidebarContent:where(.xl\:rt-r-size-1) :where(.rt-BaseMenuSubTriggerIcon) {
+        width: calc(8px * var(--scaling));
+        height: calc(8px * var(--scaling));
+        flex-shrink: 0;
+        margin-left: auto;
+    }
+    .rt-SidebarContent:where(.xl\:rt-r-size-1) :where(.rt-SidebarGroupLabel) {
+        font-size: var(--font-size-1);
+        line-height: var(--line-height-1);
+        letter-spacing: var(--letter-spacing-1);
+    }
+    .rt-SidebarContainer:where(.xl\:rt-r-size-1) :where(.rt-SidebarHeader .rt-SidebarMenuButton) {
+        font-size: var(--font-size-1);
+        line-height: var(--line-height-1);
+        letter-spacing: var(--letter-spacing-1);
+        border-radius: var(--radius-1);
+    }
+    .rt-SidebarContainer:where(.xl\:rt-r-size-1) :where(.rt-SidebarHeader .rt-SidebarMenuButton) :where(svg) {
+        width: calc(var(--space-3) * 1.175);
+        height: calc(var(--space-3) * 1.175);
+        flex-shrink: 0;
+    }
+    .rt-SidebarContainer:where(.xl\:rt-r-size-1) :where(.rt-SidebarFooter .rt-SidebarMenuButton) {
+        font-size: var(--font-size-1);
+        line-height: var(--line-height-1);
+        letter-spacing: var(--letter-spacing-1);
+        border-radius: var(--radius-1);
+    }
+    .rt-SidebarContainer:where(.xl\:rt-r-size-1) :where(.rt-SidebarFooter .rt-SidebarMenuButton) :where(svg) {
+        width: calc(var(--space-3) * 1.175);
+        height: calc(var(--space-3) * 1.175);
+        flex-shrink: 0;
+    }
+    .rt-SidebarContent:where(.xl\:rt-r-size-2) :where(.rt-SidebarMenuButton) {
+        font-size: var(--font-size-2);
+        line-height: var(--line-height-2);
+        letter-spacing: var(--letter-spacing-2);
+        border-radius: var(--radius-2);
+    }
+    .rt-SidebarContent:where(.xl\:rt-r-size-2) :where(.rt-SidebarMenuButton) :where(svg) {
+        width: var(--space-4);
+        height: var(--space-4);
+        flex-shrink: 0;
+    }
+    .rt-SidebarContent:where(.xl\:rt-r-size-2) :where(.rt-BaseMenuSubTriggerIcon) {
+        width: calc(10px * var(--scaling));
+        height: calc(10px * var(--scaling));
+        flex-shrink: 0;
+        margin-left: auto;
+    }
+    .rt-SidebarContent:where(.xl\:rt-r-size-2) :where(.rt-SidebarGroupLabel) {
+        font-size: var(--font-size-2);
+        line-height: var(--line-height-2);
+        letter-spacing: var(--letter-spacing-2);
+    }
+    .rt-SidebarContainer:where(.xl\:rt-r-size-2) :where(.rt-SidebarHeader .rt-SidebarMenuButton) {
+        font-size: var(--font-size-2);
+        line-height: var(--line-height-2);
+        letter-spacing: var(--letter-spacing-2);
+        border-radius: var(--radius-2);
+    }
+    .rt-SidebarContainer:where(.xl\:rt-r-size-2) :where(.rt-SidebarHeader .rt-SidebarMenuButton) :where(svg) {
+        width: var(--space-4);
+        height: var(--space-4);
+        flex-shrink: 0;
+    }
+    .rt-SidebarContainer:where(.xl\:rt-r-size-2) :where(.rt-SidebarFooter .rt-SidebarMenuButton) {
+        font-size: var(--font-size-2);
+        line-height: var(--line-height-2);
+        letter-spacing: var(--letter-spacing-2);
+        border-radius: var(--radius-2);
+    }
+    .rt-SidebarContainer:where(.xl\:rt-r-size-2) :where(.rt-SidebarFooter .rt-SidebarMenuButton) :where(svg) {
+        width: var(--space-4);
+        height: var(--space-4);
+        flex-shrink: 0;
+    }
+}
+.rt-SidebarContainer:where(.rt-variant-ghost) {
+    background-color: transparent;
+    border: none;
+}
+.rt-SidebarContainer:where(.rt-variant-soft) {
+    background-color: var(--accent-a2);
+}
+.rt-SidebarContainer:where(.rt-variant-surface) {
+    background-color: var(--color-surface);
+}
+.rt-SidebarContainer:where(.rt-variant-surface):where([data-side="left"]) {
+    border-right: 1px solid var(--gray-a6);
+}
+.rt-SidebarContainer:where(.rt-variant-surface):where([data-side="right"]) {
+    border-left: 1px solid var(--gray-a6);
+}
+:where(.rt-SidebarRoot[data-type="floating"]) .rt-SidebarContainer:where(.rt-variant-ghost) {
+    box-shadow: var(--shadow-4);
+}
+:where(.rt-SidebarRoot[data-type="floating"]) .rt-SidebarContainer:where(.rt-variant-surface) {
+    border: 1px solid var(--gray-a6);
+}
+.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);
+}
+.rt-SidebarHeader:where(.rt-menu-variant-solid) :where(.rt-SidebarMenuButton[data-active]) :where(.rt-Text), .rt-SidebarContent:where(.rt-menu-variant-solid) :where(.rt-SidebarMenuButton[data-active]) :where(.rt-Text), .rt-SidebarFooter:where(.rt-menu-variant-solid) :where(.rt-SidebarMenuButton[data-active]) :where(.rt-Text) {
+    color: inherit !important;
+}
+.rt-SidebarHeader:where(.rt-menu-variant-solid) :where(.rt-SidebarMenuButton[data-active]) :where([data-accent-color='gray']), .rt-SidebarContent:where(.rt-menu-variant-solid) :where(.rt-SidebarMenuButton[data-active]) :where([data-accent-color='gray']), .rt-SidebarFooter:where(.rt-menu-variant-solid) :where(.rt-SidebarMenuButton[data-active]) :where([data-accent-color='gray']) {
+    color: inherit !important;
+}
+.rt-SidebarHeader:where(.rt-menu-variant-solid) :where(.rt-SidebarMenuButton[data-highlighted]), .rt-SidebarContent:where(.rt-menu-variant-solid) :where(.rt-SidebarMenuButton[data-highlighted]), .rt-SidebarFooter:where(.rt-menu-variant-solid) :where(.rt-SidebarMenuButton[data-highlighted]) {
+    background-color: var(--accent-9);
+    color: var(--accent-contrast);
+}
+.rt-SidebarHeader:where(.rt-menu-variant-solid) :where(.rt-SidebarMenuButton[data-highlighted]) :where(.rt-Text), .rt-SidebarContent:where(.rt-menu-variant-solid) :where(.rt-SidebarMenuButton[data-highlighted]) :where(.rt-Text), .rt-SidebarFooter:where(.rt-menu-variant-solid) :where(.rt-SidebarMenuButton[data-highlighted]) :where(.rt-Text) {
+    color: inherit !important;
+}
+.rt-SidebarHeader:where(.rt-menu-variant-solid) :where(.rt-SidebarMenuButton[data-highlighted]) :where([data-accent-color='gray']), .rt-SidebarContent:where(.rt-menu-variant-solid) :where(.rt-SidebarMenuButton[data-highlighted]) :where([data-accent-color='gray']), .rt-SidebarFooter:where(.rt-menu-variant-solid) :where(.rt-SidebarMenuButton[data-highlighted]) :where([data-accent-color='gray']) {
+    color: inherit !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]),
+    .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);
+}
+.rt-SidebarHeader:where(.rt-menu-variant-solid):where(.rt-high-contrast) :where(.rt-SidebarMenuButton[data-active]) :where(.rt-Text), .rt-SidebarContent:where(.rt-menu-variant-solid):where(.rt-high-contrast) :where(.rt-SidebarMenuButton[data-active]) :where(.rt-Text), .rt-SidebarFooter:where(.rt-menu-variant-solid):where(.rt-high-contrast) :where(.rt-SidebarMenuButton[data-active]) :where(.rt-Text), .rt-SidebarHeader:where(.rt-menu-variant-solid):where(.rt-high-contrast) :where(.rt-SidebarMenuButton[data-highlighted]) :where(.rt-Text), .rt-SidebarContent:where(.rt-menu-variant-solid):where(.rt-high-contrast) :where(.rt-SidebarMenuButton[data-highlighted]) :where(.rt-Text), .rt-SidebarFooter:where(.rt-menu-variant-solid):where(.rt-high-contrast) :where(.rt-SidebarMenuButton[data-highlighted]) :where(.rt-Text) {
+    color: inherit !important;
+}
+.rt-SidebarHeader:where(.rt-menu-variant-solid):where(.rt-high-contrast) :where(.rt-SidebarMenuButton[data-active]) :where([data-accent-color='gray']), .rt-SidebarContent:where(.rt-menu-variant-solid):where(.rt-high-contrast) :where(.rt-SidebarMenuButton[data-active]) :where([data-accent-color='gray']), .rt-SidebarFooter:where(.rt-menu-variant-solid):where(.rt-high-contrast) :where(.rt-SidebarMenuButton[data-active]) :where([data-accent-color='gray']), .rt-SidebarHeader:where(.rt-menu-variant-solid):where(.rt-high-contrast) :where(.rt-SidebarMenuButton[data-highlighted]) :where([data-accent-color='gray']), .rt-SidebarContent:where(.rt-menu-variant-solid):where(.rt-high-contrast) :where(.rt-SidebarMenuButton[data-highlighted]) :where([data-accent-color='gray']), .rt-SidebarFooter:where(.rt-menu-variant-solid):where(.rt-high-contrast) :where(.rt-SidebarMenuButton[data-highlighted]) :where([data-accent-color='gray']) {
+    color: inherit !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]), .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);
+}
+.rt-SidebarHeader:where(.rt-menu-variant-solid):where(.rt-high-contrast) :where(.rt-SidebarMenuButton[data-active]):where([data-accent-color]) :where(.rt-Text), .rt-SidebarContent:where(.rt-menu-variant-solid):where(.rt-high-contrast) :where(.rt-SidebarMenuButton[data-active]):where([data-accent-color]) :where(.rt-Text), .rt-SidebarFooter:where(.rt-menu-variant-solid):where(.rt-high-contrast) :where(.rt-SidebarMenuButton[data-active]):where([data-accent-color]) :where(.rt-Text), .rt-SidebarHeader:where(.rt-menu-variant-solid):where(.rt-high-contrast) :where(.rt-SidebarMenuButton[data-highlighted]):where([data-accent-color]) :where(.rt-Text), .rt-SidebarContent:where(.rt-menu-variant-solid):where(.rt-high-contrast) :where(.rt-SidebarMenuButton[data-highlighted]):where([data-accent-color]) :where(.rt-Text), .rt-SidebarFooter:where(.rt-menu-variant-solid):where(.rt-high-contrast) :where(.rt-SidebarMenuButton[data-highlighted]):where([data-accent-color]) :where(.rt-Text) {
+    color: inherit !important;
+}
+.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']), .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']), .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']), .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']), .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']), .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']) {
+    color: inherit !important;
+}
+.rt-SidebarHeader:where(.rt-menu-variant-soft) :where(.rt-SidebarMenuButton[data-active]), .rt-SidebarContent:where(.rt-menu-variant-soft) :where(.rt-SidebarMenuButton[data-active]), .rt-SidebarFooter:where(.rt-menu-variant-soft) :where(.rt-SidebarMenuButton[data-active]) {
+    background-color: var(--accent-a4);
+    color: var(--accent-a12);
+}
+.rt-SidebarHeader:where(.rt-menu-variant-soft) :where(.rt-SidebarMenuButton[data-active]) :where(.rt-Text[data-accent-color='gray'], [data-accent-color='gray']), .rt-SidebarContent:where(.rt-menu-variant-soft) :where(.rt-SidebarMenuButton[data-active]) :where(.rt-Text[data-accent-color='gray'], [data-accent-color='gray']), .rt-SidebarFooter:where(.rt-menu-variant-soft) :where(.rt-SidebarMenuButton[data-active]) :where(.rt-Text[data-accent-color='gray'], [data-accent-color='gray']) {
+    color: var(--gray-11) !important;
+}
+.rt-SidebarHeader:where(.rt-menu-variant-soft) :where(.rt-SidebarMenuButton[data-highlighted]), .rt-SidebarContent:where(.rt-menu-variant-soft) :where(.rt-SidebarMenuButton[data-highlighted]), .rt-SidebarFooter:where(.rt-menu-variant-soft) :where(.rt-SidebarMenuButton[data-highlighted]) {
+    background-color: var(--accent-a4);
+}
+.rt-SidebarHeader:where(.rt-menu-variant-soft) :where(.rt-SidebarMenuButton[data-highlighted]) :where(.rt-Text[data-accent-color='gray'], [data-accent-color='gray']), .rt-SidebarContent:where(.rt-menu-variant-soft) :where(.rt-SidebarMenuButton[data-highlighted]) :where(.rt-Text[data-accent-color='gray'], [data-accent-color='gray']), .rt-SidebarFooter:where(.rt-menu-variant-soft) :where(.rt-SidebarMenuButton[data-highlighted]) :where(.rt-Text[data-accent-color='gray'], [data-accent-color='gray']) {
+    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"][data-state="collapsed"]) {
+    transform: translateX(-100%);
+    transition: transform var(--duration-3) var(--ease-2);
+}
+.rt-SidebarRoot:where([data-collapsible="icon"][data-state="expanded"]) {
+    transform: translateX(0);
+    transition: transform var(--duration-3) var(--ease-2);
+}
+.rt-SidebarRoot:where([data-collapsible="icon"][data-state="collapsed"][data-side="right"]) {
+    transform: translateX(100%);
+}
+@media (prefers-reduced-motion: reduce) {
+    .rt-SidebarRoot:where([data-collapsible="icon"]) {
+        transition: none;
+    }
+}
+@media (max-width: 768px) {
+    .rt-SidebarRoot {
+        display: none;
     }
 }
 .rt-SliderRoot {