@womp/kookie-ui 0.19.0 → 0.21.0

package/src/components/select.css

@@ -39,11 +39,16 @@
   height: var(--trigger-icon-size-default);
 }
 
+/*
+ * The panel and its rows are the menu's (base-menu.css): the content is a BaseMenuContent and
+ * every item a BaseMenuItem, so the panel pads --panel-p-N and a row hugs its line. What is
+ * left here is the select's own: the check mark's box and rich rows.
+ */
 .rt-SelectContent {
-  --scrollarea-scrollbar-vertical-margin-top: var(--select-content-padding);
-  --scrollarea-scrollbar-vertical-margin-bottom: var(--select-content-padding);
-  --scrollarea-scrollbar-horizontal-margin-left: var(--select-content-padding);
-  --scrollarea-scrollbar-horizontal-margin-right: var(--select-content-padding);
+  --scrollarea-scrollbar-vertical-margin-top: var(--base-menu-content-padding);
+  --scrollarea-scrollbar-vertical-margin-bottom: var(--base-menu-content-padding);
+  --scrollarea-scrollbar-horizontal-margin-left: var(--base-menu-content-padding);
+  --scrollarea-scrollbar-horizontal-margin-right: var(--base-menu-content-padding);
 
   overflow: hidden;
   z-index: 200; /* Above dialogs (100) so select inside dialogs/sheets work */
@@ -59,47 +64,28 @@
 
 .rt-SelectViewport {
   box-sizing: border-box;
-  padding: var(--select-content-padding);
 
   :where(.rt-SelectContent:has(.rt-ScrollAreaScrollbar[data-orientation='vertical'])) & {
     padding-right: var(--space-4);
   }
 }
 
-.rt-SelectItem {
-  display: flex;
-  align-items: center;
-  height: var(--select-item-height);
-  padding-left: var(--select-item-indicator-width);
-  padding-right: var(--select-item-indicator-width);
-  position: relative;
-  box-sizing: border-box;
-  outline: none;
-  scroll-margin: var(--select-content-padding) 0;
-
-  /* Fix sticky text highlighting after selection in Firefox */
-  user-select: none;
-
-  /* Cursors */
-  cursor: var(--cursor-menu-item);
-  &:where([data-disabled]) {
-    cursor: default;
-  }
+/* Rich content grows the row; the mark stays on the first line. */
+.rt-SelectItem:where(.rt-SelectItemRich) {
+  align-items: flex-start;
 
-  /* Allow rich content to expand height */
-  &:where(.rt-SelectItemRich) {
-    height: auto;
-    min-height: var(--select-item-height);
-    align-items: flex-start;
-    padding-top: var(--space-3);
-    padding-bottom: var(--space-3);
+  & :where(.rt-SelectItemIndicator) {
+    bottom: auto;
+    height: var(--base-menu-item-height);
   }
 }
 
 .rt-SelectItemIndicator {
   position: absolute;
-  left: 0;
-  width: var(--select-item-indicator-width);
+  inset-inline-start: var(--base-menu-item-px);
+  top: 0;
+  bottom: 0;
+  width: var(--base-menu-icon-size);
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -107,25 +93,10 @@
 
 .rt-SelectSeparator {
   height: var(--separator-height-thin);
-  margin-top: var(--space-3);
-  margin-bottom: var(--space-3);
-  margin-left: var(--select-item-indicator-width);
-  margin-right: var(--select-separator-margin-right);
 }
 
 .rt-SelectLabel {
-  display: flex;
-  align-items: center;
-  height: var(--select-item-height);
-  padding-left: var(--select-item-indicator-width);
-  padding-right: var(--select-item-indicator-width);
   color: var(--gray-a10);
-  user-select: none;
-  cursor: default;
-
-  :where(.rt-SelectItem) + & {
-    margin-top: var(--space-3);
-  }
 }
 
 /***************************************************************************************************
@@ -217,92 +188,6 @@
   }
 }
 
-/***************************************************************************************************
- *                                                                                                 *
- * CONTENT SIZES                                                                                   *
- *                                                                                                 *
- ***************************************************************************************************/
-
-@breakpoints {
-  .rt-SelectContent {
-    &:where(.rt-r-size-1) {
-      --select-content-padding: var(--space-2);
-      --select-item-height: var(--control-height-1);
-      --select-item-indicator-width: calc(var(--space-6) / var(--select-item-indicator-width-factor));
-      --select-separator-margin-right: var(--space-3);
-      border-radius: var(--radius-surface-1);
-
-      & :where(.rt-SelectLabel) {
-        font-size: var(--font-size-1);
-        letter-spacing: var(--letter-spacing-1);
-        line-height: var(--line-height-1);
-      }
-      & :where(.rt-SelectItem) {
-        font-size: var(--font-size-1);
-        line-height: var(--line-height-1);
-        letter-spacing: var(--letter-spacing-1);
-        border-radius: var(--radius-1);
-      }
-      & :where(.rt-SelectItemIndicatorIcon) {
-        width: var(--select-indicator-icon-size-1);
-        height: var(--select-indicator-icon-size-1);
-      }
-    }
-    &:where(.rt-r-size-2, .rt-r-size-3, .rt-r-size-4) {
-      --select-content-padding: var(--space-3);
-      --select-item-indicator-width: var(--space-6);
-      --select-separator-margin-right: var(--space-4);
-      border-radius: var(--radius-surface-1);
-
-      & :where(.rt-SelectLabel) {
-        font-size: var(--font-size-2);
-        letter-spacing: var(--letter-spacing-2);
-        line-height: var(--line-height-2);
-      }
-      & :where(.rt-SelectItem) {
-        line-height: var(--line-height-2);
-        border-radius: var(--radius-2);
-      }
-    }
-    &:where(.rt-r-size-2) {
-      --select-item-height: var(--control-height-2);
-
-      & :where(.rt-SelectItem) {
-        font-size: var(--font-size-2);
-        letter-spacing: var(--letter-spacing-2);
-      }
-      & :where(.rt-SelectItemIndicatorIcon) {
-        width: var(--select-indicator-icon-size-2);
-        height: var(--select-indicator-icon-size-2);
-      }
-    }
-    &:where(.rt-r-size-3) {
-      --select-item-height: var(--control-height-3);
-
-      & :where(.rt-SelectItem) {
-        font-size: var(--font-size-3);
-        letter-spacing: var(--letter-spacing-3);
-      }
-      & :where(.rt-SelectItemIndicatorIcon) {
-        width: var(--select-indicator-icon-size-3);
-        height: var(--select-indicator-icon-size-3);
-      }
-    }
-    &:where(.rt-r-size-4) {
-      --select-item-height: var(--control-height-4);
-
-      & :where(.rt-SelectItem) {
-        font-size: var(--font-size-4);
-        letter-spacing: var(--letter-spacing-4);
-      }
-      & :where(.rt-SelectItemIndicatorIcon) {
-        width: var(--select-indicator-icon-size-4);
-        height: var(--select-indicator-icon-size-4);
-      }
-    }
-  }
-}
-
 /***************************************************************************************************
  *                                                                                                 *
  * TRIGGER VARIANTS                                                                                *

package/src/components/select.tsx

@@ -7,7 +7,6 @@ import { Select as SelectPrimitive, ScrollArea as ScrollAreaPrimitive } from 'ra
 
 import { extractProps } from '../helpers/extract-props.js';
 import { useThemeSize } from '../helpers/theme-size.js';
-import { marginPropDefs } from '../props/margin.props.js';
 import { ChevronDownIcon, ThickCheckIcon } from './icons.js';
 import {
   selectRootPropDefs,
@@ -17,7 +16,6 @@ import {
 import { useThemeContext, Theme } from './theme.js';
 import { useThumbSync } from '../hooks/use-thumb-sync.js';
 
-import type { MarginProps } from '../props/margin.props.js';
 import type { GetPropDefTypes } from '../props/prop-def.js';
 import type { ComponentPropsWithout, RemovedProps } from '../helpers/component-props.js';
 
@@ -44,7 +42,6 @@ type SelectTriggerElement = React.ElementRef<typeof SelectPrimitive.Trigger>;
 type SelectTriggerOwnProps = GetPropDefTypes<typeof selectTriggerPropDefs>;
 interface SelectTriggerProps
   extends ComponentPropsWithout<typeof SelectPrimitive.Trigger, RemovedProps>,
-    MarginProps,
     SelectTriggerOwnProps {}
 const SelectTrigger = React.forwardRef<SelectTriggerElement, SelectTriggerProps>(
   (props, forwardedRef) => {
@@ -66,7 +63,6 @@ const SelectTrigger = React.forwardRef<SelectTriggerElement, SelectTriggerProps>
       // Pass size prop def to allow it to be extracted
       { size: selectRootPropDefs.size },
       selectTriggerPropDefs,
-      marginPropDefs,
     );
 
 

package/src/components/separator.tsx

@@ -3,17 +3,15 @@ import classNames from 'classnames';
 
 import { separatorPropDefs } from './separator.props.js';
 import { extractProps } from '../helpers/extract-props.js';
-import { marginPropDefs } from '../props/margin.props.js';
 
-import type { MarginProps } from '../props/margin.props.js';
 import type { ComponentPropsWithout, RemovedProps } from '../helpers/component-props.js';
 import type { GetPropDefTypes } from '../props/prop-def.js';
 
 type SeparatorElement = React.ElementRef<'span'>;
 type SeparatorOwnProps = GetPropDefTypes<typeof separatorPropDefs>;
-interface SeparatorProps extends ComponentPropsWithout<'span', RemovedProps>, MarginProps, SeparatorOwnProps {}
+interface SeparatorProps extends ComponentPropsWithout<'span', RemovedProps>, SeparatorOwnProps {}
 const Separator = React.forwardRef<SeparatorElement, SeparatorProps>((props, forwardedRef) => {
-  const { className, color, decorative, ...separatorProps } = extractProps(props, separatorPropDefs, marginPropDefs);
+  const { className, color, decorative, ...separatorProps } = extractProps(props, separatorPropDefs);
   return <span data-accent-color={color} role={decorative ? undefined : 'separator'} {...separatorProps} ref={forwardedRef} className={classNames('rt-Separator', className)} />;
 });
 Separator.displayName = 'Separator';

package/src/components/sidebar.css

@@ -39,8 +39,8 @@
   flex-direction: column !important;
   gap: var(--space-2) !important;
   text-align: center !important;
-  font-size: var(--font-size-0) !important;
-  line-height: var(--line-height-0) !important;
+  font-size: var(--font-size-1) !important;
+  line-height: var(--line-height-1) !important;
   padding-inline-start: var(--space-2) !important;
   padding-inline-end: var(--space-2) !important;
   /* Add margin for balanced spacing like normal variant */
@@ -87,8 +87,8 @@
     flex-direction: column;
     gap: var(--space-2);
     text-align: center;
-    font-size: var(--font-size-0);
-    line-height: var(--line-height-0);
+    font-size: var(--font-size-1);
+    line-height: var(--line-height-1);
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
@@ -122,8 +122,8 @@
     flex-direction: column;
     gap: var(--space-2);
     text-align: center;
-    font-size: var(--font-size-0);
-    line-height: var(--line-height-0);
+    font-size: var(--font-size-1);
+    line-height: var(--line-height-1);
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
@@ -156,8 +156,8 @@
     flex-direction: column;
     gap: var(--space-2);
     text-align: center;
-    font-size: var(--font-size-0);
-    line-height: var(--line-height-0);
+    font-size: var(--font-size-1);
+    line-height: var(--line-height-1);
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
@@ -257,8 +257,8 @@
   white-space: nowrap;
   text-align: center;
   color: var(--gray-11);
-  font-size: var(--font-size-0);
-  line-height: var(--line-height-0);
+  font-size: var(--font-size-1);
+  line-height: var(--line-height-1);
 }
 
 /* Active label gets accent color and medium weight */
@@ -307,7 +307,7 @@
 /* Solid variant icon wrapper states in thin mode */
 :where(.rt-ShellRailContent .rt-SidebarMenuBadge),
 :where(.rt-ShellRailContent .rt-SidebarMenuShortcut),
-:where(.rt-ShellRailContent .rt-Badge),
+:where(.rt-ShellRailContent .rt-Chip),
 :where(.rt-ShellRailContent .rt-Kbd) {
   display: none !important;
 }
@@ -493,12 +493,12 @@
   /* Inherit all base MenuButton styles */
   display: flex;
   align-items: center;
-  gap: var(--space-3);
+  gap: var(--base-menu-item-gap);
   min-height: var(--base-menu-item-height);
   padding-top: var(--base-menu-item-padding-y);
   padding-bottom: var(--base-menu-item-padding-y);
-  padding-left: var(--base-menu-item-padding-left);
-  padding-right: var(--base-menu-item-padding-right);
+  padding-inline-start: var(--base-menu-item-padding-left);
+  padding-inline-end: var(--base-menu-item-padding-right);
   box-sizing: border-box;
   position: relative;
   outline: none;
@@ -523,14 +523,6 @@
   /* Reduced motion support */
 }
 
-.rt-SidebarHeader :where(.rt-SidebarMenuButton) {
-  border-radius: var(--sidebar-base-border-radius) var(--sidebar-base-border-radius) 0 0;
-}
-
-.rt-SidebarFooter :where(.rt-SidebarMenuButton) {
-  border-radius: 0 0 var(--sidebar-base-border-radius) var(--sidebar-base-border-radius);
-}
-
 /***************************************************************************************************
  *                                                                                                 *
  * SIZES                                                                                           *
@@ -544,10 +536,10 @@
 }
 
 @breakpoints {
-  /* Sidebar rows sit on the control height ladder: size N is as tall as a Button,
-     menu item or TextField of size N. Content is a BaseMenuContent, so it takes
-     every size value from base-menu.css. Header and Footer are not, so they
-     restate base-menu's values here; keep the two in step. */
+  /* Sidebar rows sit on the control height ladder: size N is as tall as a Button or
+     TextField of size N, with the row family's pill padding, gap and icon box. Content is a
+     BaseMenuContent, so it takes every other size value from base-menu.css. Header and
+     Footer are not, so they restate base-menu's values here; keep the two in step. */
   /* A Shell pane is a surface: its header, footer, search and scrolling list all pad by the
      surface padding at the Shell's index, so every row and every control in the pane starts on
      one line. The Rail is left out: its tiles keep their own tight padding (above). */
@@ -580,98 +572,71 @@
 
   .rt-SidebarHeader:where(.rt-r-size-1),
   .rt-SidebarFooter:where(.rt-r-size-1) {
-    --base-menu-content-padding: var(--space-3);
-    --base-menu-item-padding-left: var(--space-3);
-    --base-menu-item-padding-right: var(--space-3);
-    --base-menu-item-padding-y: var(--space-2);
+    --base-menu-content-padding: var(--panel-p-1);
+    --base-menu-item-padding-y: var(--row-inset-1);
+    --base-menu-item-px: var(--control-px-1);
+    --base-menu-item-px-pill: var(--control-px-pill-1);
+    --base-menu-item-gap: var(--control-gap-1);
+    --base-menu-icon-size: var(--icon-size-1);
+    --base-menu-indicator-icon-size: var(--indicator-icon-size-1);
+    --base-menu-font-size: var(--font-size-1);
+    --base-menu-line-height: var(--line-height-1);
+    --base-menu-letter-spacing: var(--letter-spacing-1);
+  }
+
+  /* A sidebar row stands level with a button: control height, and the control's corner. */
+  .rt-SidebarContent:where(.rt-r-size-1),
+  .rt-SidebarHeader:where(.rt-r-size-1),
+  .rt-SidebarFooter:where(.rt-r-size-1) {
     --base-menu-item-height: var(--control-height-1);
-    --sidebar-item-height: var(--base-menu-item-height);
-
-    & :where(.rt-SidebarMenuButton) {
-      gap: var(--component-gap-2);
-      font-size: var(--font-size-1);
-      line-height: var(--line-height-1);
-      letter-spacing: var(--letter-spacing-1);
-      border-radius: var(--radius-1);
-
-      /* stylelint-disable-next-line selector-max-type */
-      & :where(svg) {
-        width: var(--content-icon-size-1);
-        height: var(--content-icon-size-1);
-        flex-shrink: 0;
-      }
-    }
+    --base-menu-item-radius: var(--radius-control-1);
+    --sidebar-item-height: var(--control-height-1);
+  }
 
-    & :where(.rt-BaseMenuSubTriggerIcon) {
-      width: var(--indicator-icon-size-1);
-      height: var(--indicator-icon-size-1);
-      flex-shrink: 0;
-      margin-left: auto;
-    }
+  .rt-SidebarHeader:where(.rt-r-size-2),
+  .rt-SidebarFooter:where(.rt-r-size-2) {
+    --base-menu-content-padding: var(--panel-p-2);
+    --base-menu-item-padding-y: var(--row-inset-2);
+    --base-menu-item-px: var(--control-px-2);
+    --base-menu-item-px-pill: var(--control-px-pill-2);
+    --base-menu-item-gap: var(--control-gap-2);
+    --base-menu-icon-size: var(--icon-size-2);
+    --base-menu-indicator-icon-size: var(--indicator-icon-size-2);
+    --base-menu-font-size: var(--font-size-2);
+    --base-menu-line-height: var(--line-height-2);
+    --base-menu-letter-spacing: var(--letter-spacing-2);
   }
 
+  /* A sidebar row stands level with a button: control height, and the control's corner. */
+  .rt-SidebarContent:where(.rt-r-size-2),
   .rt-SidebarHeader:where(.rt-r-size-2),
   .rt-SidebarFooter:where(.rt-r-size-2) {
-    --base-menu-content-padding: var(--space-4);
-    --base-menu-item-padding-left: var(--space-4);
-    --base-menu-item-padding-right: var(--space-4);
-    --base-menu-item-padding-y: var(--space-2);
     --base-menu-item-height: var(--control-height-2);
-    --sidebar-item-height: var(--base-menu-item-height);
-
-    & :where(.rt-SidebarMenuButton) {
-      gap: var(--component-gap-3);
-      font-size: var(--font-size-2);
-      line-height: var(--line-height-2);
-      letter-spacing: var(--letter-spacing-2);
-      border-radius: var(--radius-2);
-
-      /* stylelint-disable-next-line selector-max-type */
-      & :where(svg) {
-        width: var(--content-icon-size-2);
-        height: var(--content-icon-size-2);
-        flex-shrink: 0;
-      }
-    }
+    --base-menu-item-radius: var(--radius-control-2);
+    --sidebar-item-height: var(--control-height-2);
+  }
 
-    & :where(.rt-BaseMenuSubTriggerIcon) {
-      width: var(--indicator-icon-size-2);
-      height: var(--indicator-icon-size-2);
-      flex-shrink: 0;
-      margin-left: auto;
-    }
+  .rt-SidebarHeader:where(.rt-r-size-3),
+  .rt-SidebarFooter:where(.rt-r-size-3) {
+    --base-menu-content-padding: var(--panel-p-3);
+    --base-menu-item-padding-y: var(--row-inset-3);
+    --base-menu-item-px: var(--control-px-3);
+    --base-menu-item-px-pill: var(--control-px-pill-3);
+    --base-menu-item-gap: var(--control-gap-3);
+    --base-menu-icon-size: var(--icon-size-3);
+    --base-menu-indicator-icon-size: var(--indicator-icon-size-3);
+    --base-menu-font-size: var(--font-size-3);
+    --base-menu-line-height: var(--line-height-3);
+    --base-menu-letter-spacing: var(--letter-spacing-3);
   }
 
+  /* A sidebar row stands level with a button: control height, and the control's corner. */
+  .rt-SidebarContent:where(.rt-r-size-3),
   .rt-SidebarHeader:where(.rt-r-size-3),
   .rt-SidebarFooter:where(.rt-r-size-3) {
-    --base-menu-content-padding: var(--space-4);
-    --base-menu-item-padding-left: var(--space-4);
-    --base-menu-item-padding-right: var(--space-4);
-    --base-menu-item-padding-y: var(--space-3);
     --base-menu-item-height: var(--control-height-3);
-    --sidebar-item-height: var(--base-menu-item-height);
-
-    & :where(.rt-SidebarMenuButton) {
-      gap: var(--component-gap-4);
-      font-size: var(--font-size-3);
-      line-height: var(--line-height-3);
-      letter-spacing: var(--letter-spacing-3);
-      border-radius: var(--radius-2);
-
-      /* stylelint-disable-next-line selector-max-type */
-      & :where(svg) {
-        width: var(--content-icon-size-3);
-        height: var(--content-icon-size-3);
-        flex-shrink: 0;
-      }
-    }
-
-    & :where(.rt-BaseMenuSubTriggerIcon) {
-      width: var(--indicator-icon-size-3);
-      height: var(--indicator-icon-size-3);
-      flex-shrink: 0;
-      margin-left: auto;
-    }
+    --base-menu-item-radius: var(--radius-control-3);
+    --sidebar-item-height: var(--control-height-3);
   }
 }
 
@@ -753,12 +718,12 @@
       }
 
       /* Also target any element with data-accent-color="gray" */
-      & :where([data-accent-color='gray']:not(.rt-Badge)) {
+      & :where([data-accent-color='gray']:not(.rt-Chip)) {
         color: inherit !important;
       }
 
-      /* FIX: Ensure badges maintain their own styling and don't inherit hover colors */
-      & :where(.rt-Badge) {
+      /* FIX: Ensure chips maintain their own styling and don't inherit hover colors */
+      & :where(.rt-Chip) {
         color: var(--accent-solid-badge-contrast) !important;
         background-color: var(--accent-solid-badge) !important;
       }
@@ -775,12 +740,12 @@
         color: inherit !important;
       }
 
-      & :where([data-accent-color='gray']:not(.rt-Badge)) {
+      & :where([data-accent-color='gray']:not(.rt-Chip)) {
         color: inherit !important;
       }
 
-      /* FIX: Ensure badges maintain their own styling and don't inherit active colors */
-      & :where(.rt-Badge) {
+      /* FIX: Ensure chips maintain their own styling and don't inherit active colors */
+      & :where(.rt-Chip) {
         color: var(--accent-solid-badge-contrast) !important;
         background-color: var(--accent-solid-badge) !important;
       }
@@ -805,12 +770,12 @@
     }
 
     /* Also target any element with data-accent-color="gray" */
-    & :where([data-accent-color='gray']:not(.rt-Badge)) {
+    & :where([data-accent-color='gray']:not(.rt-Chip)) {
       color: inherit !important;
     }
 
-    /* FIX: Ensure badges maintain their own styling and don't inherit hover colors */
-    & :where(.rt-Badge) {
+    /* FIX: Ensure chips maintain their own styling and don't inherit hover colors */
+    & :where(.rt-Chip) {
       color: var(--accent-solid-badge-contrast) !important;
       background-color: var(--accent-solid-badge) !important;
     }
@@ -862,8 +827,8 @@
   flex-direction: column !important;
   gap: var(--space-2) !important;
   text-align: center !important;
-  font-size: var(--font-size-0) !important;
-  line-height: var(--line-height-0) !important;
+  font-size: var(--font-size-1) !important;
+  line-height: var(--line-height-1) !important;
   padding-inline-start: var(--space-2) !important;
   padding-inline-end: var(--space-2) !important;
   margin-top: 1px;
@@ -950,11 +915,18 @@
   display: flex;
   flex-direction: column;
   gap: var(--space-4);
-  --base-menu-item-height: var(--space-8);
-  --base-menu-item-padding-y: var(--space-2);
-  --base-menu-item-padding-left: var(--space-4);
-  --base-menu-item-padding-right: var(--space-4);
+  /* A floating panel of rows at size 2: the rows hug their line (base-menu.css). */
   --base-menu-content-padding: 0;
+  --base-menu-item-padding-y: var(--row-inset-2);
+  --base-menu-item-px: var(--control-px-2);
+  --base-menu-item-px-pill: var(--control-px-pill-2);
+  --base-menu-item-gap: var(--control-gap-2);
+  --base-menu-item-radius: var(--radius-row-2);
+  --base-menu-icon-size: var(--icon-size-2);
+  --base-menu-indicator-icon-size: var(--indicator-icon-size-2);
+  --base-menu-font-size: var(--font-size-2);
+  --base-menu-line-height: var(--line-height-2);
+  --base-menu-letter-spacing: var(--letter-spacing-2);
 }
 
 /* stylelint-disable-next-line selector-max-specificity */
@@ -986,26 +958,13 @@
   list-style: none;
 }
 
-/* Popover menu button sizing (mirrors size-2 Content rules) */
 /* stylelint-disable-next-line selector-max-specificity */
 .rt-SidebarSearchPopover .rt-SidebarMenuButton {
-  gap: var(--component-gap-3);
-  font-size: var(--font-size-2);
-  line-height: var(--line-height-2);
-  letter-spacing: var(--letter-spacing-2);
-  border-radius: var(--radius-2);
   font-weight: var(--font-weight-regular);
   margin-top: 1px;
   margin-bottom: 1px;
 }
 
-/* stylelint-disable-next-line selector-max-type, selector-max-specificity */
-.rt-SidebarSearchPopover .rt-SidebarMenuButton :where(svg) {
-  width: var(--content-icon-size-3);
-  height: var(--content-icon-size-3);
-  flex-shrink: 0;
-}
-
 /* Popover menu button hover (soft variant) */
 @media (hover: hover) {
   /* stylelint-disable-next-line selector-max-specificity */