@umami/react-zen 0.148.0 → 0.150.0

package/dist/index.css

@@ -4393,12 +4393,12 @@ body a.Button_button__MDE1O {
 }
 
 /* virtual-css:css:ce310178c027bd5704a97ff6406d1f4f */
-.NavMenu_navmenu__NzU4Y {
+.NavMenu_navmenu__MDVmZ {
   font-size: var(--font-size);
   width: 100%;
   gap: var(--spacing-2);
 }
-.NavMenu_item__MzUzO {
+.NavMenu_item__OWJiY {
   color: var(--font-color-muted);
   gap: var(--gap);
   padding: var(--padding);
@@ -4414,15 +4414,12 @@ body a.Button_button__MDE1O {
     color: var(--font-color);
     background: var(--highlight-color);
   }
-  &.NavMenu_selected__MGM3O {
+  &.NavMenu_selected__ZDRiM {
     color: var(--font-color);
     background: var(--highlight-color);
     font-weight: var(--font-weight-bold);
   }
 }
-.NavMenu_group__NDg1M {
-  gap: var(--gap);
-}
 
 /* virtual-css:css:2684f3f399522c75740ad06c94a6137d */
 .Popover_popover__NDdlY[data-placement=top] {
@@ -4621,37 +4618,41 @@ body a.Button_button__MDE1O {
 }
 
 /* virtual-css:css:e81ca83878ceb2dba8f2cfa72b015b4c */
-.Sidebar_sidenav__OGRiM {
+:root {
+  --sidebar-expanded-width: 260px;
+  --sidebar-collapsed-width: 68px;
+}
+.Sidebar_sidebar__YWUyN {
   height: 100%;
   font-size: var(--font-size);
   border-right: 1px solid var(--border-color);
-  width: 200px;
+  width: var(--sidebar-expanded-width);
   overflow: hidden;
   transition: width 0.1s ease-out;
 }
-.Sidebar_header__ZTZhN {
+.Sidebar_header__MmM1Y {
   display: flex;
   align-items: center;
   gap: var(--gap);
   padding: var(--padding);
 }
-.Sidebar_name__YWUwM {
+.Sidebar_name__ZjQ0Z {
   font-weight: var(--font-weight-bold);
 }
-.Sidebar_section__NDE3M {
+.Sidebar_section__MWE3N {
   padding: var(--spacing-3);
   overflow: hidden;
 }
-.Sidebar_title__Njc2M {
+.Sidebar_title__NDMwM {
   font-weight: var(--font-weight-bold);
 }
-.Sidebar_content__YmIwN {
+.Sidebar_content__MDBlM {
   display: grid;
   min-height: 40px;
   gap: var(--gap);
   overflow: hidden;
 }
-.Sidebar_item__ZDVjZ {
+.Sidebar_item__ZDA4Z {
   display: flex;
   align-items: center;
   justify-content: flex-start;
@@ -4665,61 +4666,61 @@ body a.Button_button__MDE1O {
   white-space: nowrap;
   overflow: hidden;
 }
-.Sidebar_item__ZDVjZ:hover {
+.Sidebar_item__ZDA4Z:hover {
   color: var(--font-color);
 }
-.Sidebar_label__MWUzO {
+.Sidebar_label__ODNmM {
   opacity: 1;
   width: 100%;
   transition: all 0.3s;
 }
-.Sidebar_collapsed__ZjFkM .Sidebar_label__MWUzO {
+.Sidebar_collapsed__ZGE3M .Sidebar_label__ODNmM {
   opacity: 0;
   width: 0;
   transition: all 0.3s;
 }
-.Sidebar_collapsed__ZjFkM {
-  width: 68px;
+.Sidebar_collapsed__ZGE3M {
+  width: var(--sidebar-collapsed-width);
   transition: width 0.2s ease-in-out;
 }
-.Sidebar_muted__YjM1M .Sidebar_item__ZDVjZ {
+.Sidebar_muted__ZGI2O .Sidebar_item__ZDA4Z {
   color: var(--font-color-muted);
 }
-.Sidebar_muted__YjM1M .Sidebar_item__ZDVjZ:hover {
+.Sidebar_muted__ZGI2O .Sidebar_item__ZDA4Z:hover {
   color: var(--font-color);
 }
-.Sidebar_muted__YjM1M .Sidebar_item__ZDVjZ.Sidebar_selected__MTdkY {
+.Sidebar_muted__ZGI2O .Sidebar_item__ZDA4Z.Sidebar_selected__ZTk5M {
   color: var(--font-color);
 }
-.Sidebar_variant-quiet__MzFlN {
+.Sidebar_variant-quiet__ODNlY {
   background: transparent;
-  & .Sidebar_item__ZDVjZ:hover,
-  .Sidebar_selected__MTdkY {
+  & .Sidebar_item__ZDA4Z:hover,
+  .Sidebar_selected__ZTk5M {
     background: var(--base-color-2);
   }
 }
-.Sidebar_variant-1__ZTY2M {
+.Sidebar_variant-1__ZWRiO {
   background: var(--base-color-1);
-  & .Sidebar_item__ZDVjZ:hover,
-  .Sidebar_selected__MTdkY {
+  & .Sidebar_item__ZDA4Z:hover,
+  .Sidebar_selected__ZTk5M {
     background: var(--base-color-2);
   }
 }
-.Sidebar_variant-2__YzU0O {
+.Sidebar_variant-2__YzNlO {
   background: var(--base-color-2);
-  & .Sidebar_item__ZDVjZ:hover,
-  .Sidebar_selected__MTdkY {
+  & .Sidebar_item__ZDA4Z:hover,
+  .Sidebar_selected__ZTk5M {
     background: var(--base-color-3);
   }
 }
-.Sidebar_variant-3__YWRmM {
+.Sidebar_variant-3__YmZiN {
   background: var(--base-color-3);
-  & .Sidebar_item__ZDVjZ:hover,
-  .Sidebar_selected__MTdkY {
+  & .Sidebar_item__ZDA4Z:hover,
+  .Sidebar_selected__ZTk5M {
     background: var(--base-color-4);
   }
 }
-.Sidebar_sidenav__OGRiM.Sidebar_noborder__ODBlM {
+.Sidebar_sidebar__YWUyN.Sidebar_noborder__ZjYwZ {
   border: 0;
 }
 
@@ -4845,55 +4846,57 @@ body a.Button_button__MDE1O {
 }
 
 /* virtual-css:css:cbe0b95a27006b7a9f50c85d359272dc */
-.Switch_switch__NTVjN {
+:root {
+  --switch-knob-size: 16px;
+  --switch-knob-border-size: 2px;
+}
+.Switch_switch__ODFhM {
   position: relative;
   display: flex;
   align-items: center;
   font-size: var(--font-size);
   color: var(--font-color);
   gap: var(--gap);
-  --knob-size: 16px;
-  --knob-border-size: 2px;
 }
-.Switch_track__MTE2N {
+.Switch_track__YTU0N {
   position: relative;
   display: flex;
   align-items: center;
-  width: calc((var(--knob-size) + var(--knob-border-size)) * 2);
-  height: calc(var(--knob-size) + var(--knob-border-size) * 2);
-  border: var(--knob-border-size) solid transparent;
-  border-radius: calc(var(--knob-size) + var(--knob-border-size) * 2);
+  width: calc((var(--switch-knob-size) + var(--switch-knob-border-size)) * 2);
+  height: calc(var(--switch-knob-size) + var(--switch-knob-border-size) * 2);
+  border: var(--switch-knob-border-size) solid transparent;
+  border-radius: calc(var(--switch-knob-size) + var(--switch-knob-border-size) * 2);
   background: var(--base-color-3);
   transition: background-color 0.2s;
   cursor: pointer;
   outline: 1px solid var(--border-color);
 }
-.Switch_knob__OWYwN {
-  width: var(--knob-size);
-  height: var(--knob-size);
+.Switch_knob__YWNjN {
+  width: var(--switch-knob-size);
+  height: var(--switch-knob-size);
   border-radius: 100%;
   background: var(--background-color);
   transition: all 0.2s;
   box-shadow: var(--box-shadow-2);
   outline: 1px solid var(--border-color);
 }
-.Switch_switch__NTVjN[data-selected] .Switch_track__MTE2N {
+.Switch_switch__ODFhM[data-selected] .Switch_track__YTU0N {
   outline-color: var(--primary-color);
   background: var(--primary-color);
 }
-.Switch_switch__NTVjN[data-selected] .Switch_knob__OWYwN {
-  margin-left: var(--knob-size);
+.Switch_switch__ODFhM[data-selected] .Switch_knob__YWNjN {
+  margin-left: var(--switch-knob-size);
   outline-color: var(--primary-color);
 }
-.Switch_switch__NTVjN[data-disabled] {
+.Switch_switch__ODFhM[data-disabled] {
   color: var(--font-color-disabled);
   pointer-events: none;
 }
-.Switch_switch__NTVjN[data-disabled] .Switch_track__MTE2N {
+.Switch_switch__ODFhM[data-disabled] .Switch_track__YTU0N {
   background: var(--base-color-3);
   outline-color: var(--base-color-3);
 }
-.Switch_switch__NTVjN[data-disabled] .Switch_knob__OWYwN {
+.Switch_switch__ODFhM[data-disabled] .Switch_knob__YWNjN {
   background: var(--base-color-1);
   outline-color: var(--base-color-1);
 }

package/dist/index.d.mts

@@ -517,7 +517,7 @@ interface NavMenuGroupProps extends ColumnProps {
     allowMinimize?: boolean;
     isMinimized?: boolean;
 }
-declare function NavMenuGroup({ title, allowMinimize, isMinimized, className, children, ...props }: NavMenuGroupProps): react.JSX.Element;
+declare function NavMenuGroup({ title, allowMinimize, isMinimized, className, children, gap, ...props }: NavMenuGroupProps): react.JSX.Element;
 interface NavMenuItemProps extends RowProps {
     isSelected?: boolean;
 }

package/dist/index.d.ts

@@ -517,7 +517,7 @@ interface NavMenuGroupProps extends ColumnProps {
     allowMinimize?: boolean;
     isMinimized?: boolean;
 }
-declare function NavMenuGroup({ title, allowMinimize, isMinimized, className, children, ...props }: NavMenuGroupProps): react.JSX.Element;
+declare function NavMenuGroup({ title, allowMinimize, isMinimized, className, children, gap, ...props }: NavMenuGroupProps): react.JSX.Element;
 interface NavMenuItemProps extends RowProps {
     isSelected?: boolean;
 }

package/dist/index.js

@@ -31441,7 +31441,7 @@ var import_react185 = require("react");
 var import_classnames38 = __toESM(require_classnames());
 
 // css-modules:/Users/mikecao/Development/umami-software/react-zen/src/components/NavMenu.module.css
-var NavMenu_default = { "navmenu": "NavMenu_navmenu__NzU4Y", "item": "NavMenu_item__MzUzO", "selected": "NavMenu_selected__MGM3O", "group": "NavMenu_group__NDg1M" };
+var NavMenu_default = { "navmenu": "NavMenu_navmenu__MDVmZ", "item": "NavMenu_item__OWJiY", "selected": "NavMenu_selected__ZDRiM" };
 
 // src/components/NavMenu.tsx
 var import_jsx_runtime53 = require("react/jsx-runtime");
@@ -31462,32 +31462,26 @@ function NavMenuGroup({
   isMinimized,
   className,
   children,
+  gap = true,
   ...props
 }) {
   const [minimized, setMinimized] = (0, import_react185.useState)(!!isMinimized);
-  return /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)(
-    Column,
-    {
-      ...props,
-      className: (0, import_classnames38.default)(NavMenu_default.group, className, minimized && NavMenu_default.minimized),
-      children: [
-        /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)(
-          Row,
-          {
-            className: (0, import_classnames38.default)(NavMenu_default.title, NavMenu_default.item),
-            alignItems: "center",
-            justifyContent: "space-between",
-            onClick: () => setMinimized(!minimized),
-            children: [
-              /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(Text, { transform: "uppercase", size: "1", weight: "bold", color: true, children: title }),
-              /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(Icon2, { rotate: minimized ? 0 : 90, children: /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(ChevronRight, {}) })
-            ]
-          }
-        ),
-        !minimized && children
-      ]
-    }
-  );
+  return /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)(Column, { ...props, gap, className: (0, import_classnames38.default)(className, minimized && NavMenu_default.minimized), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)(
+      Row,
+      {
+        className: (0, import_classnames38.default)(NavMenu_default.title, NavMenu_default.item),
+        alignItems: "center",
+        justifyContent: "space-between",
+        onClick: () => setMinimized(!minimized),
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(Text, { transform: "uppercase", size: "1", weight: "bold", color: true, children: title }),
+          /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(Icon2, { rotate: minimized ? 0 : 90, children: /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(ChevronRight, {}) })
+        ]
+      }
+    ),
+    !minimized && children
+  ] });
 }
 function NavMenuItem({ isSelected, className, children, ...props }) {
   return /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(Row, { ...props, className: (0, import_classnames38.default)(NavMenu_default.item, className, isSelected && NavMenu_default.selected), children });
@@ -31751,7 +31745,7 @@ var import_react189 = require("react");
 var import_classnames46 = __toESM(require_classnames());
 
 // css-modules:/Users/mikecao/Development/umami-software/react-zen/src/components/Sidebar.module.css
-var Sidebar_default = { "sidenav": "Sidebar_sidenav__OGRiM", "header": "Sidebar_header__ZTZhN", "name": "Sidebar_name__YWUwM", "section": "Sidebar_section__NDE3M", "title": "Sidebar_title__Njc2M", "content": "Sidebar_content__YmIwN", "item": "Sidebar_item__ZDVjZ", "label": "Sidebar_label__MWUzO", "collapsed": "Sidebar_collapsed__ZjFkM", "muted": "Sidebar_muted__YjM1M", "selected": "Sidebar_selected__MTdkY", "variant-quiet": "Sidebar_variant-quiet__MzFlN", "variant-1": "Sidebar_variant-1__ZTY2M", "variant-2": "Sidebar_variant-2__YzU0O", "variant-3": "Sidebar_variant-3__YWRmM", "noborder": "Sidebar_noborder__ODBlM" };
+var Sidebar_default = { "sidebar": "Sidebar_sidebar__YWUyN", "header": "Sidebar_header__MmM1Y", "name": "Sidebar_name__ZjQ0Z", "section": "Sidebar_section__MWE3N", "title": "Sidebar_title__NDMwM", "content": "Sidebar_content__MDBlM", "item": "Sidebar_item__ZDA4Z", "label": "Sidebar_label__ODNmM", "collapsed": "Sidebar_collapsed__ZGE3M", "muted": "Sidebar_muted__ZGI2O", "selected": "Sidebar_selected__ZTk5M", "variant-quiet": "Sidebar_variant-quiet__ODNlY", "variant-1": "Sidebar_variant-1__ZWRiO", "variant-2": "Sidebar_variant-2__YzNlO", "variant-3": "Sidebar_variant-3__YmZiN", "noborder": "Sidebar_noborder__ZjYwZ" };
 
 // src/components/Sidebar.tsx
 var import_jsx_runtime61 = require("react/jsx-runtime");
@@ -31770,7 +31764,7 @@ function Sidebar({
     {
       ...props,
       className: (0, import_classnames46.default)(
-        Sidebar_default.sidenav,
+        Sidebar_default.sidebar,
         isCollapsed && Sidebar_default.collapsed,
         muteItems && Sidebar_default.muted,
         variant && Sidebar_default[`variant-${variant}`],
@@ -31889,7 +31883,7 @@ function StatusLight(props) {
 var import_classnames49 = __toESM(require_classnames());
 
 // css-modules:/Users/mikecao/Development/umami-software/react-zen/src/components/Switch.module.css
-var Switch_default = { "switch": "Switch_switch__NTVjN", "track": "Switch_track__MTE2N", "knob": "Switch_knob__OWYwN" };
+var Switch_default = { "switch": "Switch_switch__ODFhM", "track": "Switch_track__YTU0N", "knob": "Switch_knob__YWNjN" };
 
 // src/components/Switch.tsx
 var import_jsx_runtime64 = require("react/jsx-runtime");

package/dist/index.mjs

@@ -31329,7 +31329,7 @@ var import_classnames38 = __toESM(require_classnames());
 import { useState as useState15 } from "react";
 
 // css-modules:/Users/mikecao/Development/umami-software/react-zen/src/components/NavMenu.module.css
-var NavMenu_default = { "navmenu": "NavMenu_navmenu__NzU4Y", "item": "NavMenu_item__MzUzO", "selected": "NavMenu_selected__MGM3O", "group": "NavMenu_group__NDg1M" };
+var NavMenu_default = { "navmenu": "NavMenu_navmenu__MDVmZ", "item": "NavMenu_item__OWJiY", "selected": "NavMenu_selected__ZDRiM" };
 
 // src/components/NavMenu.tsx
 import { jsx as jsx53, jsxs as jsxs29 } from "react/jsx-runtime";
@@ -31350,32 +31350,26 @@ function NavMenuGroup({
   isMinimized,
   className,
   children,
+  gap = true,
   ...props
 }) {
   const [minimized, setMinimized] = useState15(!!isMinimized);
-  return /* @__PURE__ */ jsxs29(
-    Column,
-    {
-      ...props,
-      className: (0, import_classnames38.default)(NavMenu_default.group, className, minimized && NavMenu_default.minimized),
-      children: [
-        /* @__PURE__ */ jsxs29(
-          Row,
-          {
-            className: (0, import_classnames38.default)(NavMenu_default.title, NavMenu_default.item),
-            alignItems: "center",
-            justifyContent: "space-between",
-            onClick: () => setMinimized(!minimized),
-            children: [
-              /* @__PURE__ */ jsx53(Text, { transform: "uppercase", size: "1", weight: "bold", color: true, children: title }),
-              /* @__PURE__ */ jsx53(Icon2, { rotate: minimized ? 0 : 90, children: /* @__PURE__ */ jsx53(ChevronRight, {}) })
-            ]
-          }
-        ),
-        !minimized && children
-      ]
-    }
-  );
+  return /* @__PURE__ */ jsxs29(Column, { ...props, gap, className: (0, import_classnames38.default)(className, minimized && NavMenu_default.minimized), children: [
+    /* @__PURE__ */ jsxs29(
+      Row,
+      {
+        className: (0, import_classnames38.default)(NavMenu_default.title, NavMenu_default.item),
+        alignItems: "center",
+        justifyContent: "space-between",
+        onClick: () => setMinimized(!minimized),
+        children: [
+          /* @__PURE__ */ jsx53(Text, { transform: "uppercase", size: "1", weight: "bold", color: true, children: title }),
+          /* @__PURE__ */ jsx53(Icon2, { rotate: minimized ? 0 : 90, children: /* @__PURE__ */ jsx53(ChevronRight, {}) })
+        ]
+      }
+    ),
+    !minimized && children
+  ] });
 }
 function NavMenuItem({ isSelected, className, children, ...props }) {
   return /* @__PURE__ */ jsx53(Row, { ...props, className: (0, import_classnames38.default)(NavMenu_default.item, className, isSelected && NavMenu_default.selected), children });
@@ -31639,7 +31633,7 @@ var import_classnames46 = __toESM(require_classnames());
 import { createContext as createContext4, useContext as useContext6 } from "react";
 
 // css-modules:/Users/mikecao/Development/umami-software/react-zen/src/components/Sidebar.module.css
-var Sidebar_default = { "sidenav": "Sidebar_sidenav__OGRiM", "header": "Sidebar_header__ZTZhN", "name": "Sidebar_name__YWUwM", "section": "Sidebar_section__NDE3M", "title": "Sidebar_title__Njc2M", "content": "Sidebar_content__YmIwN", "item": "Sidebar_item__ZDVjZ", "label": "Sidebar_label__MWUzO", "collapsed": "Sidebar_collapsed__ZjFkM", "muted": "Sidebar_muted__YjM1M", "selected": "Sidebar_selected__MTdkY", "variant-quiet": "Sidebar_variant-quiet__MzFlN", "variant-1": "Sidebar_variant-1__ZTY2M", "variant-2": "Sidebar_variant-2__YzU0O", "variant-3": "Sidebar_variant-3__YWRmM", "noborder": "Sidebar_noborder__ODBlM" };
+var Sidebar_default = { "sidebar": "Sidebar_sidebar__YWUyN", "header": "Sidebar_header__MmM1Y", "name": "Sidebar_name__ZjQ0Z", "section": "Sidebar_section__MWE3N", "title": "Sidebar_title__NDMwM", "content": "Sidebar_content__MDBlM", "item": "Sidebar_item__ZDA4Z", "label": "Sidebar_label__ODNmM", "collapsed": "Sidebar_collapsed__ZGE3M", "muted": "Sidebar_muted__ZGI2O", "selected": "Sidebar_selected__ZTk5M", "variant-quiet": "Sidebar_variant-quiet__ODNlY", "variant-1": "Sidebar_variant-1__ZWRiO", "variant-2": "Sidebar_variant-2__YzNlO", "variant-3": "Sidebar_variant-3__YmZiN", "noborder": "Sidebar_noborder__ZjYwZ" };
 
 // src/components/Sidebar.tsx
 import { jsx as jsx61, jsxs as jsxs36 } from "react/jsx-runtime";
@@ -31658,7 +31652,7 @@ function Sidebar({
     {
       ...props,
       className: (0, import_classnames46.default)(
-        Sidebar_default.sidenav,
+        Sidebar_default.sidebar,
         isCollapsed && Sidebar_default.collapsed,
         muteItems && Sidebar_default.muted,
         variant && Sidebar_default[`variant-${variant}`],
@@ -31777,7 +31771,7 @@ function StatusLight(props) {
 var import_classnames49 = __toESM(require_classnames());
 
 // css-modules:/Users/mikecao/Development/umami-software/react-zen/src/components/Switch.module.css
-var Switch_default = { "switch": "Switch_switch__NTVjN", "track": "Switch_track__MTE2N", "knob": "Switch_knob__OWYwN" };
+var Switch_default = { "switch": "Switch_switch__ODFhM", "track": "Switch_track__YTU0N", "knob": "Switch_knob__YWNjN" };
 
 // src/components/Switch.tsx
 import { jsx as jsx64, jsxs as jsxs39 } from "react/jsx-runtime";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umami/react-zen",
-  "version": "0.148.0",
+  "version": "0.150.0",
   "description": "Modern, minimalist React component library",
   "author": "Umami <hello@umami.is>",
   "license": "MIT",

package/styles.css

@@ -4711,12 +4711,12 @@ body a.Button_button__MDE1O {
 }
 
 /* virtual-css:css:ce310178c027bd5704a97ff6406d1f4f */
-.NavMenu_navmenu__NzU4Y {
+.NavMenu_navmenu__MDVmZ {
   font-size: var(--font-size);
   width: 100%;
   gap: var(--spacing-2);
 }
-.NavMenu_item__MzUzO {
+.NavMenu_item__OWJiY {
   color: var(--font-color-muted);
   gap: var(--gap);
   padding: var(--padding);
@@ -4732,15 +4732,12 @@ body a.Button_button__MDE1O {
     color: var(--font-color);
     background: var(--highlight-color);
   }
-  &.NavMenu_selected__MGM3O {
+  &.NavMenu_selected__ZDRiM {
     color: var(--font-color);
     background: var(--highlight-color);
     font-weight: var(--font-weight-bold);
   }
 }
-.NavMenu_group__NDg1M {
-  gap: var(--gap);
-}
 
 /* virtual-css:css:2684f3f399522c75740ad06c94a6137d */
 .Popover_popover__NDdlY[data-placement=top] {
@@ -4939,37 +4936,41 @@ body a.Button_button__MDE1O {
 }
 
 /* virtual-css:css:e81ca83878ceb2dba8f2cfa72b015b4c */
-.Sidebar_sidenav__OGRiM {
+:root {
+  --sidebar-expanded-width: 260px;
+  --sidebar-collapsed-width: 68px;
+}
+.Sidebar_sidebar__YWUyN {
   height: 100%;
   font-size: var(--font-size);
   border-right: 1px solid var(--border-color);
-  width: 200px;
+  width: var(--sidebar-expanded-width);
   overflow: hidden;
   transition: width 0.1s ease-out;
 }
-.Sidebar_header__ZTZhN {
+.Sidebar_header__MmM1Y {
   display: flex;
   align-items: center;
   gap: var(--gap);
   padding: var(--padding);
 }
-.Sidebar_name__YWUwM {
+.Sidebar_name__ZjQ0Z {
   font-weight: var(--font-weight-bold);
 }
-.Sidebar_section__NDE3M {
+.Sidebar_section__MWE3N {
   padding: var(--spacing-3);
   overflow: hidden;
 }
-.Sidebar_title__Njc2M {
+.Sidebar_title__NDMwM {
   font-weight: var(--font-weight-bold);
 }
-.Sidebar_content__YmIwN {
+.Sidebar_content__MDBlM {
   display: grid;
   min-height: 40px;
   gap: var(--gap);
   overflow: hidden;
 }
-.Sidebar_item__ZDVjZ {
+.Sidebar_item__ZDA4Z {
   display: flex;
   align-items: center;
   justify-content: flex-start;
@@ -4983,61 +4984,61 @@ body a.Button_button__MDE1O {
   white-space: nowrap;
   overflow: hidden;
 }
-.Sidebar_item__ZDVjZ:hover {
+.Sidebar_item__ZDA4Z:hover {
   color: var(--font-color);
 }
-.Sidebar_label__MWUzO {
+.Sidebar_label__ODNmM {
   opacity: 1;
   width: 100%;
   transition: all 0.3s;
 }
-.Sidebar_collapsed__ZjFkM .Sidebar_label__MWUzO {
+.Sidebar_collapsed__ZGE3M .Sidebar_label__ODNmM {
   opacity: 0;
   width: 0;
   transition: all 0.3s;
 }
-.Sidebar_collapsed__ZjFkM {
-  width: 68px;
+.Sidebar_collapsed__ZGE3M {
+  width: var(--sidebar-collapsed-width);
   transition: width 0.2s ease-in-out;
 }
-.Sidebar_muted__YjM1M .Sidebar_item__ZDVjZ {
+.Sidebar_muted__ZGI2O .Sidebar_item__ZDA4Z {
   color: var(--font-color-muted);
 }
-.Sidebar_muted__YjM1M .Sidebar_item__ZDVjZ:hover {
+.Sidebar_muted__ZGI2O .Sidebar_item__ZDA4Z:hover {
   color: var(--font-color);
 }
-.Sidebar_muted__YjM1M .Sidebar_item__ZDVjZ.Sidebar_selected__MTdkY {
+.Sidebar_muted__ZGI2O .Sidebar_item__ZDA4Z.Sidebar_selected__ZTk5M {
   color: var(--font-color);
 }
-.Sidebar_variant-quiet__MzFlN {
+.Sidebar_variant-quiet__ODNlY {
   background: transparent;
-  & .Sidebar_item__ZDVjZ:hover,
-  .Sidebar_selected__MTdkY {
+  & .Sidebar_item__ZDA4Z:hover,
+  .Sidebar_selected__ZTk5M {
     background: var(--base-color-2);
   }
 }
-.Sidebar_variant-1__ZTY2M {
+.Sidebar_variant-1__ZWRiO {
   background: var(--base-color-1);
-  & .Sidebar_item__ZDVjZ:hover,
-  .Sidebar_selected__MTdkY {
+  & .Sidebar_item__ZDA4Z:hover,
+  .Sidebar_selected__ZTk5M {
     background: var(--base-color-2);
   }
 }
-.Sidebar_variant-2__YzU0O {
+.Sidebar_variant-2__YzNlO {
   background: var(--base-color-2);
-  & .Sidebar_item__ZDVjZ:hover,
-  .Sidebar_selected__MTdkY {
+  & .Sidebar_item__ZDA4Z:hover,
+  .Sidebar_selected__ZTk5M {
     background: var(--base-color-3);
   }
 }
-.Sidebar_variant-3__YWRmM {
+.Sidebar_variant-3__YmZiN {
   background: var(--base-color-3);
-  & .Sidebar_item__ZDVjZ:hover,
-  .Sidebar_selected__MTdkY {
+  & .Sidebar_item__ZDA4Z:hover,
+  .Sidebar_selected__ZTk5M {
     background: var(--base-color-4);
   }
 }
-.Sidebar_sidenav__OGRiM.Sidebar_noborder__ODBlM {
+.Sidebar_sidebar__YWUyN.Sidebar_noborder__ZjYwZ {
   border: 0;
 }
 
@@ -5163,55 +5164,57 @@ body a.Button_button__MDE1O {
 }
 
 /* virtual-css:css:cbe0b95a27006b7a9f50c85d359272dc */
-.Switch_switch__NTVjN {
+:root {
+  --switch-knob-size: 16px;
+  --switch-knob-border-size: 2px;
+}
+.Switch_switch__ODFhM {
   position: relative;
   display: flex;
   align-items: center;
   font-size: var(--font-size);
   color: var(--font-color);
   gap: var(--gap);
-  --knob-size: 16px;
-  --knob-border-size: 2px;
 }
-.Switch_track__MTE2N {
+.Switch_track__YTU0N {
   position: relative;
   display: flex;
   align-items: center;
-  width: calc((var(--knob-size) + var(--knob-border-size)) * 2);
-  height: calc(var(--knob-size) + var(--knob-border-size) * 2);
-  border: var(--knob-border-size) solid transparent;
-  border-radius: calc(var(--knob-size) + var(--knob-border-size) * 2);
+  width: calc((var(--switch-knob-size) + var(--switch-knob-border-size)) * 2);
+  height: calc(var(--switch-knob-size) + var(--switch-knob-border-size) * 2);
+  border: var(--switch-knob-border-size) solid transparent;
+  border-radius: calc(var(--switch-knob-size) + var(--switch-knob-border-size) * 2);
   background: var(--base-color-3);
   transition: background-color 0.2s;
   cursor: pointer;
   outline: 1px solid var(--border-color);
 }
-.Switch_knob__OWYwN {
-  width: var(--knob-size);
-  height: var(--knob-size);
+.Switch_knob__YWNjN {
+  width: var(--switch-knob-size);
+  height: var(--switch-knob-size);
   border-radius: 100%;
   background: var(--background-color);
   transition: all 0.2s;
   box-shadow: var(--box-shadow-2);
   outline: 1px solid var(--border-color);
 }
-.Switch_switch__NTVjN[data-selected] .Switch_track__MTE2N {
+.Switch_switch__ODFhM[data-selected] .Switch_track__YTU0N {
   outline-color: var(--primary-color);
   background: var(--primary-color);
 }
-.Switch_switch__NTVjN[data-selected] .Switch_knob__OWYwN {
-  margin-left: var(--knob-size);
+.Switch_switch__ODFhM[data-selected] .Switch_knob__YWNjN {
+  margin-left: var(--switch-knob-size);
   outline-color: var(--primary-color);
 }
-.Switch_switch__NTVjN[data-disabled] {
+.Switch_switch__ODFhM[data-disabled] {
   color: var(--font-color-disabled);
   pointer-events: none;
 }
-.Switch_switch__NTVjN[data-disabled] .Switch_track__MTE2N {
+.Switch_switch__ODFhM[data-disabled] .Switch_track__YTU0N {
   background: var(--base-color-3);
   outline-color: var(--base-color-3);
 }
-.Switch_switch__NTVjN[data-disabled] .Switch_knob__OWYwN {
+.Switch_switch__ODFhM[data-disabled] .Switch_knob__YWNjN {
   background: var(--base-color-1);
   outline-color: var(--base-color-1);
 }