@7shifts/sous-chef 4.2.0 → 4.3.0-beta-20260522180347

package/dist/assets/SevenShiftsLogo/SevenShiftsLogo.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+declare const SevenShiftsLogo: () => React.JSX.Element;
+export default SevenShiftsLogo;

package/dist/assets/SevenShiftsLogo/index.d.ts

@@ -0,0 +1 @@
+export { default } from './SevenShiftsLogo';

package/dist/assets/SevenShiftsShortLogo/SevenShiftsShortLogo.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+declare const SevenShiftsShortLogo: () => React.JSX.Element;
+export default SevenShiftsShortLogo;

package/dist/assets/SevenShiftsShortLogo/index.d.ts

@@ -0,0 +1 @@
+export { default } from './SevenShiftsShortLogo';

package/dist/foundation/tokens/color/color-constants.d.ts

@@ -189,4 +189,5 @@ export declare const COLORS: {
     readonly 'brand-neutrals-chefscoat-dynamic': "var(--color-brand-neutrals-chefscoat-dynamic)";
     readonly 'on-graphic-black': "var(--color-on-graphic-black)";
     readonly 'on-graphic-white': "var(--color-on-graphic-white)";
+    readonly 'canvas-background-color': "var(--color-canvas-background-color)";
 };

package/dist/foundation/tokens/color/color-types.d.ts

@@ -1 +1 @@
-export type Color = 'white' | 'black' | 'tangerine-100' | 'tangerine-200' | 'tangerine-300' | 'tangerine-400' | 'tangerine-500' | 'tangerine-600' | 'eggplant-100' | 'eggplant-200' | 'eggplant-300' | 'eggplant-400' | 'eggplant-500' | 'eggplant-600' | 'mint-100' | 'mint-200' | 'mint-300' | 'mint-400' | 'mint-500' | 'mint-600' | 'radish-100' | 'radish-200' | 'radish-300' | 'radish-400' | 'radish-500' | 'radish-600' | 'blueberry-100' | 'blueberry-200' | 'blueberry-300' | 'blueberry-400' | 'blueberry-500' | 'blueberry-600' | 'banana-100' | 'banana-200' | 'banana-300' | 'banana-400' | 'banana-500' | 'banana-600' | 'grey-100' | 'grey-200' | 'grey-300' | 'grey-400' | 'grey-500' | 'grey-600' | 'oat-100' | 'oat-200' | 'oat-300' | 'oat-400' | 'oat-500' | 'oat-600' | 'lime-100' | 'lime-200' | 'lime-300' | 'lime-400' | 'lime-500' | 'lime-600' | 'blackberry-100' | 'blackberry-200' | 'blackberry-300' | 'blackberry-400' | 'blackberry-500' | 'blackberry-600' | 'seq-1' | 'seq-2' | 'seq-3' | 'seq-4' | 'seq-5' | 'seq-6' | 'seq-7' | 'seq-8' | 'seq-9' | 'seq-10' | 'seq-11' | 'seq-12' | 'seq-13' | 'seq-14' | 'seq-15' | 'seq-16' | 'seq-17' | 'seq-18' | 'seq-19' | 'seq-20' | 'neutral-color' | 'neutral-on-color' | 'neutral-container' | 'neutral-on-container' | 'neutral-container-variant' | 'neutral-on-container-variant' | 'neutral-black-transparent-05' | 'neutral-black-transparent-10' | 'neutral-black-transparent-15' | 'neutral-black-transparent-20' | 'neutral-black-transparent-30' | 'neutral-black-transparent-40' | 'neutral-black-transparent-50' | 'neutral-black-transparent-60' | 'neutral-black-transparent-70' | 'neutral-black-transparent-80' | 'neutral-black-transparent-90' | 'neutral-white-transparent-05' | 'neutral-white-transparent-10' | 'neutral-white-transparent-15' | 'neutral-white-transparent-20' | 'neutral-white-transparent-30' | 'neutral-white-transparent-40' | 'neutral-white-transparent-50' | 'neutral-white-transparent-60' | 'neutral-white-transparent-70' | 'neutral-white-transparent-80' | 'neutral-white-transparent-90' | 'surface-color-overlay' | 'surface-color-dim' | 'surface-color' | 'surface-on-color-disabled' | 'surface-on-color-subtle' | 'surface-on-color' | 'surface-on-color-bold' | 'surface-container' | 'surface-container-high' | 'surface-container-highest' | 'surface-container-disabled' | 'surface-container-disabled-variant' | 'surface-on-container-disabled' | 'surface-inverse' | 'surface-on-inverse' | 'surface-on-inverse-disabled' | 'outline' | 'outline-variant' | 'outline-inverse' | 'primary-color' | 'primary-on-color' | 'primary-color-variant' | 'primary-on-color-variant' | 'primary-container' | 'primary-on-container' | 'primary-container-variant' | 'primary-on-container-variant' | 'secondary-color' | 'secondary-on-color' | 'secondary-container' | 'secondary-on-container' | 'secondary-container-variant' | 'secondary-on-container-variant' | 'tertiary-color' | 'tertiary-on-color' | 'tertiary-container' | 'tertiary-on-container' | 'tertiary-container-variant' | 'tertiary-on-container-variant' | 'success-color' | 'success-on-color' | 'success-container' | 'success-on-container' | 'success-container-variant' | 'success-on-container-variant' | 'danger-color' | 'danger-on-color' | 'danger-container' | 'danger-on-container' | 'danger-container-variant' | 'danger-on-container-variant' | 'info-color' | 'info-on-color' | 'info-container' | 'info-on-container' | 'info-container-variant' | 'info-on-container-variant' | 'upsell-color' | 'upsell-on-color' | 'upsell-color-variant' | 'upsell-on-color-variant' | 'upsell-container' | 'upsell-on-container' | 'upsell-container-variant' | 'upsell-on-container-variant' | 'warning-color' | 'warning-on-color' | 'warning-container' | 'warning-on-container' | 'warning-container-variant' | 'warning-on-container-variant' | 'shadow-overlay' | 'shadow-active' | 'hover-inverse' | 'hover-lighten' | 'hover-darken' | 'brand-neutrals-caviar-dynamic' | 'brand-neutrals-chefscoat-dynamic' | 'on-graphic-black' | 'on-graphic-white';
+export type Color = 'white' | 'black' | 'tangerine-100' | 'tangerine-200' | 'tangerine-300' | 'tangerine-400' | 'tangerine-500' | 'tangerine-600' | 'eggplant-100' | 'eggplant-200' | 'eggplant-300' | 'eggplant-400' | 'eggplant-500' | 'eggplant-600' | 'mint-100' | 'mint-200' | 'mint-300' | 'mint-400' | 'mint-500' | 'mint-600' | 'radish-100' | 'radish-200' | 'radish-300' | 'radish-400' | 'radish-500' | 'radish-600' | 'blueberry-100' | 'blueberry-200' | 'blueberry-300' | 'blueberry-400' | 'blueberry-500' | 'blueberry-600' | 'banana-100' | 'banana-200' | 'banana-300' | 'banana-400' | 'banana-500' | 'banana-600' | 'grey-100' | 'grey-200' | 'grey-300' | 'grey-400' | 'grey-500' | 'grey-600' | 'oat-100' | 'oat-200' | 'oat-300' | 'oat-400' | 'oat-500' | 'oat-600' | 'lime-100' | 'lime-200' | 'lime-300' | 'lime-400' | 'lime-500' | 'lime-600' | 'blackberry-100' | 'blackberry-200' | 'blackberry-300' | 'blackberry-400' | 'blackberry-500' | 'blackberry-600' | 'seq-1' | 'seq-2' | 'seq-3' | 'seq-4' | 'seq-5' | 'seq-6' | 'seq-7' | 'seq-8' | 'seq-9' | 'seq-10' | 'seq-11' | 'seq-12' | 'seq-13' | 'seq-14' | 'seq-15' | 'seq-16' | 'seq-17' | 'seq-18' | 'seq-19' | 'seq-20' | 'neutral-color' | 'neutral-on-color' | 'neutral-container' | 'neutral-on-container' | 'neutral-container-variant' | 'neutral-on-container-variant' | 'neutral-black-transparent-05' | 'neutral-black-transparent-10' | 'neutral-black-transparent-15' | 'neutral-black-transparent-20' | 'neutral-black-transparent-30' | 'neutral-black-transparent-40' | 'neutral-black-transparent-50' | 'neutral-black-transparent-60' | 'neutral-black-transparent-70' | 'neutral-black-transparent-80' | 'neutral-black-transparent-90' | 'neutral-white-transparent-05' | 'neutral-white-transparent-10' | 'neutral-white-transparent-15' | 'neutral-white-transparent-20' | 'neutral-white-transparent-30' | 'neutral-white-transparent-40' | 'neutral-white-transparent-50' | 'neutral-white-transparent-60' | 'neutral-white-transparent-70' | 'neutral-white-transparent-80' | 'neutral-white-transparent-90' | 'surface-color-overlay' | 'surface-color-dim' | 'surface-color' | 'surface-on-color-disabled' | 'surface-on-color-subtle' | 'surface-on-color' | 'surface-on-color-bold' | 'surface-container' | 'surface-container-high' | 'surface-container-highest' | 'surface-container-disabled' | 'surface-container-disabled-variant' | 'surface-on-container-disabled' | 'surface-inverse' | 'surface-on-inverse' | 'surface-on-inverse-disabled' | 'outline' | 'outline-variant' | 'outline-inverse' | 'primary-color' | 'primary-on-color' | 'primary-color-variant' | 'primary-on-color-variant' | 'primary-container' | 'primary-on-container' | 'primary-container-variant' | 'primary-on-container-variant' | 'secondary-color' | 'secondary-on-color' | 'secondary-container' | 'secondary-on-container' | 'secondary-container-variant' | 'secondary-on-container-variant' | 'tertiary-color' | 'tertiary-on-color' | 'tertiary-container' | 'tertiary-on-container' | 'tertiary-container-variant' | 'tertiary-on-container-variant' | 'success-color' | 'success-on-color' | 'success-container' | 'success-on-container' | 'success-container-variant' | 'success-on-container-variant' | 'danger-color' | 'danger-on-color' | 'danger-container' | 'danger-on-container' | 'danger-container-variant' | 'danger-on-container-variant' | 'info-color' | 'info-on-color' | 'info-container' | 'info-on-container' | 'info-container-variant' | 'info-on-container-variant' | 'upsell-color' | 'upsell-on-color' | 'upsell-color-variant' | 'upsell-on-color-variant' | 'upsell-container' | 'upsell-on-container' | 'upsell-container-variant' | 'upsell-on-container-variant' | 'warning-color' | 'warning-on-color' | 'warning-container' | 'warning-on-container' | 'warning-container-variant' | 'warning-on-container-variant' | 'shadow-overlay' | 'shadow-active' | 'hover-inverse' | 'hover-lighten' | 'hover-darken' | 'brand-neutrals-caviar-dynamic' | 'brand-neutrals-chefscoat-dynamic' | 'on-graphic-black' | 'on-graphic-white' | 'canvas-background-color';

package/dist/hooks/useScrollDetector.d.ts

@@ -0,0 +1,5 @@
+import { RefObject } from 'react';
+export declare const useScrollDetector: (contentRef: RefObject<HTMLDivElement>) => {
+    hasScroll: boolean;
+    isScrolled: boolean;
+};

package/dist/index.css

@@ -1,7 +1,23 @@
+@font-face {
+  font-family: "SF Pro";
+  src: url("https://cdn.7shifts.com/fonts/SFPro/SFPRODISPLAYTHIN.OTF") format("opentype");
+  font-weight: 100;
+  font-style: normal;
+  /* Preload the font */
+  unicode-range: U+0000-00FF; /* Basic Latin */
+}
+@font-face {
+  font-family: "SF Pro";
+  src: url("https://cdn.7shifts.com/fonts/SFPro/SFPRODISPLAYLIGHT.OTF") format("opentype");
+  font-weight: 200;
+  font-style: normal;
+  /* Preload the font */
+  unicode-range: U+0000-00FF; /* Basic Latin */
+}
 @font-face {
   font-family: "SF Pro";
   src: url("https://cdn.7shifts.com/fonts/SFPro/SFPRODISPLAYREGULAR.OTF") format("opentype");
-  font-weight: normal;
+  font-weight: 300;
   font-style: normal;
   /* Preload the font */
   unicode-range: U+0000-00FF; /* Basic Latin */
@@ -9,11 +25,43 @@
 @font-face {
   font-family: "SF Pro";
   src: url("https://cdn.7shifts.com/fonts/SFPro/SFPRODISPLAYMEDIUM.OTF") format("opentype");
+  font-weight: 400;
+  font-style: normal;
+  /* Preload the font */
+  unicode-range: U+0000-00FF; /* Basic Latin */
+}
+@font-face {
+  font-family: "SF Pro";
+  src: url("https://cdn.7shifts.com/fonts/SFPro/SFPRODISPLAYSEMIBOLD.OTF") format("opentype");
+  font-weight: 500;
+  font-style: normal;
+  /* Preload the font */
+  unicode-range: U+0000-00FF; /* Basic Latin */
+}
+@font-face {
+  font-family: "SF Pro";
+  src: url("https://cdn.7shifts.com/fonts/SFPro/SFPRODISPLAYBOLD.OTF") format("opentype");
   font-weight: 600;
   font-style: normal;
   /* Preload the font */
   unicode-range: U+0000-00FF; /* Basic Latin */
 }
+@font-face {
+  font-family: "SF Pro";
+  src: url("https://cdn.7shifts.com/fonts/SFPro/SFPRODISPLAYHEAVY.OTF") format("opentype");
+  font-weight: 700;
+  font-style: normal;
+  /* Preload the font */
+  unicode-range: U+0000-00FF; /* Basic Latin */
+}
+@font-face {
+  font-family: "SF Pro";
+  src: url("https://cdn.7shifts.com/fonts/SFPro/SFPRODISPLAYBLACK.OTF") format("opentype");
+  font-weight: 800;
+  font-style: normal;
+  /* Preload the font */
+  unicode-range: U+0000-00FF; /* Basic Latin */
+}
 @font-face {
   font-family: "Universal Sans Display";
   src: url("https://cdn.7shifts.com/fonts/UniversalSans/Universal-Sans-Display-500.ttf");
@@ -39,10 +87,14 @@
   --font-line-height-500: 1.75rem;
   --font-line-height-600: 2rem;
   --font-line-height-700: 2.75rem;
-  --p-font-weight-light: 300;
-  --p-font-weight-normal: 400;
+  --p-font-weight-thin: 100;
+  --p-font-weight-light: 200;
+  --p-font-weight-normal: 300;
+  --p-font-weight-medium: 400;
   --p-font-weight-semibold: 500;
   --p-font-weight-bold: 600;
+  --p-font-weight-heavy: 700;
+  --p-font-weight-black: 800;
 }
 :root {
   --color-white: #fff;
@@ -297,6 +349,7 @@
   --color-brand-neutrals-chefscoat-dynamic: #fff;
   --color-on-graphic-black: #000;
   --color-on-graphic-white: #fff;
+  --color-canvas-background-color: #fff;
 }
 
 .theme-dark {
@@ -406,6 +459,7 @@
   --color-brand-neutrals-chefscoat-dynamic: #000;
   --color-on-graphic-black: #000;
   --color-on-graphic-white: #fff;
+  --color-canvas-background-color: #2c2c2c;
 }
 :root {
   --border-radius-300: 4px;
@@ -426,8 +480,10 @@ body {
   font-size: var(--font-size-200);
   line-height: var(--font-line-height-200);
   font-weight: var(--p-font-weight-normal);
+  -webkit-font-smoothing: antialiased; /* Chrome, Safari, Edge, Opera */
+  -moz-osx-font-smoothing: grayscale; /* Firefox on macOS */
   color: var(--color-surface-on-color);
-  background-color: var(--color-surface-color-dim) !important;
+  background-color: var(--color-canvas-background-color) !important;
 }
 
 body * {
@@ -1226,7 +1282,7 @@ h1._6SgoN {
   font-family: var(--font-family-heading);
   font-size: var(--font-size-600);
   line-height: var(--font-line-height-600);
-  font-weight: var(--p-font-weight-semibold);
+  font-weight: var(--p-font-weight-medium);
 }
 h1._i2LHD {
   font-weight: var(--p-font-weight-bold);
@@ -1236,7 +1292,7 @@ h2._6SgoN {
   font-family: var(--font-family-heading);
   font-size: var(--font-size-500);
   line-height: var(--font-line-height-500);
-  font-weight: var(--p-font-weight-semibold);
+  font-weight: var(--p-font-weight-medium);
 }
 h2._i2LHD {
   font-weight: var(--p-font-weight-bold);
@@ -1246,7 +1302,7 @@ h3._6SgoN {
   font-family: var(--font-family-heading);
   font-size: var(--font-size-400);
   line-height: var(--font-line-height-400);
-  font-weight: var(--p-font-weight-semibold);
+  font-weight: var(--p-font-weight-medium);
 }
 h3._i2LHD {
   font-weight: var(--p-font-weight-bold);
@@ -1291,7 +1347,7 @@ h5._i2LHD {
   font-family: var(--font-family-heading);
   font-size: var(--font-size-700);
   line-height: var(--font-line-height-700);
-  font-weight: var(--p-font-weight-semibold);
+  font-weight: var(--p-font-weight-medium);
 }
 ._yZbuO {
   font-family: var(--font-family-body);
@@ -1869,7 +1925,7 @@ h5._i2LHD {
   font-family: var(--font-family-heading);
   font-size: var(--font-size-500);
   line-height: var(--font-line-height-500);
-  font-weight: var(--p-font-weight-semibold);
+  font-weight: var(--p-font-weight-medium);
   color: var(--color-surface-on-color-bold);
   padding: 0;
 }
@@ -3561,7 +3617,7 @@ input:disabled + ._kmvBP::after {
   font-family: var(--font-family-heading);
   font-size: var(--font-size-400);
   line-height: var(--font-line-height-400);
-  font-weight: var(--p-font-weight-semibold);
+  font-weight: var(--p-font-weight-medium);
   margin: 0;
 }
 ._zybxx {
@@ -5552,7 +5608,7 @@ input._TEU6N {
   font-family: var(--font-family-heading);
   font-size: var(--font-size-500);
   line-height: var(--font-line-height-500);
-  font-weight: var(--p-font-weight-semibold);
+  font-weight: var(--p-font-weight-medium);
   width: 40px;
   height: 40px;
 }
@@ -5564,7 +5620,7 @@ input._TEU6N {
   font-family: var(--font-family-heading);
   font-size: var(--font-size-600);
   line-height: var(--font-line-height-600);
-  font-weight: var(--p-font-weight-semibold);
+  font-weight: var(--p-font-weight-medium);
   width: 80px;
   height: 80px;
 }
@@ -5677,6 +5733,256 @@ input._TEU6N {
 ._4M-yZ {
   min-width: 40px;
 }
+._6bVLs {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  flex-shrink: 0;
+  position: relative;
+  z-index: 1;
+  box-sizing: border-box;
+  height: 56px;
+  padding-left: 28px;
+  padding-right: 4px;
+  color: var(--color-brand-neutrals-caviar-dynamic);
+}
+._AYwpG {
+  padding: 0;
+  padding-left: 20px;
+}
+._IpBk1 {
+  box-shadow: 0 0 12px -3px var(--color-shadow-overlay);
+  border-bottom: 1px solid var(--nav-foreground-color);
+  transition: box-shadow 0.4s ease-in-out;
+}
+._Smo46 {
+  --nav-background-color: #f1f0ec;
+  --nav-foreground-color: #e2ded6;
+  --nav-object-soft-color: #6e6d6c;
+  --nav-object-normal-color: #232324;
+  height: 100%;
+  background-color: var(--nav-background-color);
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  transition: width 0.4s;
+}
+._-6GAa {
+  --nav-background-color: #413e3e;
+  --nav-foreground-color: #6e6d6c;
+  --nav-object-soft-color: #c9c4ba;
+  --nav-object-normal-color: #f8f7f5;
+}
+._w-QAC {
+  width: 64px;
+}
+._w-QAC ._UCA59 {
+  scrollbar-width: none;
+}
+._w-QAC ._UCA59::-webkit-scrollbar {
+  display: none;
+}
+._B7Nse {
+  width: 248px;
+}
+._UCA59 {
+  flex-grow: 1;
+  min-height: 0;
+  overflow-y: auto;
+  overflow-x: hidden;
+  background-color: var(--nav-background-color);
+  padding-top: 10px;
+}
+@keyframes _aMyIG {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+._mWULf {
+  padding: 4px 12px;
+  min-height: 38px;
+  color: var(--nav-object-soft-color);
+  box-sizing: border-box;
+}
+._mWULf button {
+  width: 100%;
+  padding: 0;
+  border: 0;
+  text-align: left;
+  background-color: transparent;
+}
+._GkDWn {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+  padding: 4px 2px 4px 12px;
+  min-height: 29px;
+  box-sizing: border-box;
+  border-radius: var(--border-radius-400);
+  line-height: 16px;
+  cursor: pointer;
+  position: relative;
+}
+._GkDWn:hover {
+  background: var(--color-hover-darken);
+}
+._3LYJx {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  width: 16px;
+  height: 16px;
+  color: var(--nav-object-soft-color);
+}
+._oz5bt {
+  flex-grow: 1;
+  min-width: 0;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  color: var(--nav-object-normal-color);
+  font-family: var(--font-family-body);
+}
+._yCxLl {
+  width: 8px;
+  height: 8px;
+  background: var(--color-secondary-color);
+  border-radius: 50%;
+  position: absolute;
+  right: 9px;
+  top: 2px;
+  border: 1px solid var(--nav-foreground-color);
+  animation: _aMyIG 0.8s ease;
+}
+._SFpch {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  margin-top: 4px;
+}
+._zfy2L {
+  color: var(--nav-object-normal-color);
+  border-left: 2px solid var(--nav-object-normal-color);
+  padding-left: 10px;
+}
+._zfy2L ._GkDWn {
+  background: var(--nav-foreground-color);
+}
+._zfy2L ._3LYJx {
+  color: var(--nav-object-normal-color);
+}
+._els3B ._3LYJx {
+  color: var(--nav-object-normal-color);
+}
+._-RLI8 {
+  color: var(--nav-object-normal-color);
+  border-left: 2px solid var(--nav-object-normal-color);
+  padding-left: 10px;
+}
+._S2i4R {
+  width: 8px;
+  height: 8px;
+  background: var(--color-secondary-color);
+  border-radius: 50%;
+  position: absolute;
+  right: 9px;
+  top: 2px;
+  border: 1px solid var(--nav-foreground-color);
+  animation: _D9NA6 0.8s ease;
+}
+@keyframes _eIHTO {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+._kWT6L {
+  min-height: 30px;
+  color: var(--nav-object-soft-color);
+  box-sizing: border-box;
+}
+._c3utS {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+  padding: 4px 2px 4px 44px;
+  min-height: 30px;
+  box-sizing: border-box;
+  border-radius: var(--border-radius-400);
+  line-height: 21px;
+  cursor: pointer;
+}
+._3IImx {
+  padding-left: 16px;
+}
+._WwagZ {
+  padding-left: 12px;
+}
+._c3utS:hover {
+  background: var(--color-hover-darken);
+}
+._uDuDj {
+  width: 16px;
+}
+._Kg1TF {
+  flex-grow: 1;
+  min-width: 0;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  color: var(--nav-object-normal-color);
+  font-family: var(--font-family-body);
+}
+._uMbkq {
+  width: 6px;
+  height: 6px;
+  border: 1px solid var(--nav-object-soft-color);
+  border-radius: 50%;
+  animation: _eIHTO 0.2s ease;
+  box-sizing: border-box;
+}
+._nkaWg {
+  color: var(--nav-object-normal-color);
+}
+._nkaWg ._3IImx {
+  padding-left: 15px;
+}
+._nkaWg ._uMbkq {
+  background: var(--nav-object-normal-color);
+  width: 8px;
+  height: 8px;
+  border: none;
+}
+._nkaWg ._c3utS {
+  background: var(--nav-foreground-color);
+}
+._qN8Zl {
+  width: 100%;
+  padding: 10px 15px;
+  box-sizing: border-box;
+}
+._qN8Zl::after {
+  content: "";
+  display: block;
+  width: 100%;
+  height: 1px;
+  background-color: var(--nav-foreground-color);
+}
+._9dbuu {
+  flex-shrink: 0;
+  padding: 10px 0 20px 0;
+}
+._Bq3B4 {
+  box-shadow: 0 0 12px -3px var(--color-shadow-overlay);
+  border-top: 1px solid var(--nav-foreground-color);
+  transition: box-shadow 0.4s ease-in-out;
+}
 ._mhyqH {
   display: flex;
   flex-direction: row;