@licklist/design 0.78.21 → 0.78.25

package/src/v2/design-system/typography/Typography.scss

@@ -0,0 +1,295 @@
+/* Typography tokens and mixins derived from BKIT Design System
+ * Spec: https://www.figma.com/design/HPb8SEwQH2rrFAD2sRlKei/BKIT---Booked-Kit?node-id=30-95&m=dev
+ */
+
+:root {
+    /* Font Families */
+    --font-family-sans: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif;
+    --font-family-mono: 'Geist Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
+
+    /* Headings Desktop */
+    --heading-xxl-size: 44px;
+    --heading-xxl-line: 48px;
+    --heading-xxl-weight: 600;
+    --heading-xl-size: 32px;
+    --heading-xl-line: 36px;
+    --heading-xl-weight: 700;
+    --heading-h1-size: 24px;
+    --heading-h1-line: 28px;
+    --heading-h1-weight: 600;
+    --heading-h2-size: 20px;
+    --heading-h2-line: 24px;
+    --heading-h2-weight: 600;
+    --heading-h3-size: 17px;
+    --heading-h3-line: 20px;
+    --heading-h3-weight: 600;
+    --heading-h4-size: 15px;
+    --heading-h4-line: 18px;
+    --heading-h4-weight: 600;
+    --heading-h5-size: 13px;
+    --heading-h5-line: 16px;
+    --heading-h5-weight: 500;
+    --heading-h6-size: 11px;
+    --heading-h6-line: 14px;
+    --heading-h6-weight: 500;
+
+    /* Headings Mobile */
+    --heading-xxl-mobile-size: 32px;
+    --heading-xxl-mobile-line: 36px;
+    --heading-xxl-mobile-weight: 600;
+    --heading-xl-mobile-size: 26px;
+    --heading-xl-mobile-line: 30px;
+    --heading-xl-mobile-weight: 700;
+    --heading-h1-mobile-size: 20px;
+    --heading-h1-mobile-line: 23px;
+    --heading-h1-mobile-weight: 600;
+    --heading-h2-mobile-size: 18px;
+    --heading-h2-mobile-line: 22px;
+    --heading-h2-mobile-weight: 600;
+    --heading-h3-mobile-size: 16px;
+    --heading-h3-mobile-line: 18px;
+    --heading-h3-mobile-weight: 600;
+    --heading-h4-mobile-size: 14px;
+    --heading-h4-mobile-line: 16px;
+    --heading-h4-mobile-weight: 600;
+    --heading-h5-mobile-size: 13px;
+    --heading-h5-mobile-line: 16px;
+    --heading-h5-mobile-weight: 500;
+    --heading-h6-mobile-size: 11px;
+    --heading-h6-mobile-line: 14px;
+    --heading-h6-mobile-weight: 500;
+
+    /* Body Desktop */
+    --text-xl-size: 20px;
+    --text-xl-line: 26px;
+    --text-xl-weight: 400;
+    --text-large-size: 18px;
+    --text-large-line: 24px;
+    --text-large-weight: 400;
+    --text-regular-size: 15px;
+    --text-regular-line: 20px;
+    --text-regular-weight: 400;
+    --text-regular-emphasis-weight: 500;
+    --text-small-size: 13px;
+    --text-small-line: 16px;
+    --text-small-weight: 400;
+    --text-small-emphasis-weight: 500;
+    --text-small-bold-weight: 600;
+    --text-xs-size: 10px;
+    --text-xs-line: 13px;
+    --text-xs-weight: 500;
+    --text-xs-bold-weight: 600;
+}
+
+/* Breakpoint */
+$bp-mobile-max: 767px;
+
+/* Typography variant map */
+$typo-map: (
+    'heading.xxl': (var(--heading-xxl-size), var(--heading-xxl-line), var(--heading-xxl-weight), var(--font-family-sans)),
+    'heading.xl': (var(--heading-xl-size), var(--heading-xl-line), var(--heading-xl-weight), var(--font-family-sans)),
+    'heading.h1': (var(--heading-h1-size), var(--heading-h1-line), var(--heading-h1-weight), var(--font-family-sans)),
+    'heading.h2': (var(--heading-h2-size), var(--heading-h2-line), var(--heading-h2-weight), var(--font-family-sans)),
+    'heading.h3': (var(--heading-h3-size), var(--heading-h3-line), var(--heading-h3-weight), var(--font-family-sans)),
+    'heading.h4': (var(--heading-h4-size), var(--heading-h4-line), var(--heading-h4-weight), var(--font-family-sans)),
+    'heading.h5': (var(--heading-h5-size), var(--heading-h5-line), var(--heading-h5-weight), var(--font-family-sans)),
+    'heading.h6': (var(--heading-h6-size), var(--heading-h6-line), var(--heading-h6-weight), var(--font-family-sans)),
+
+    'heading.xxl.mobile': (var(--heading-xxl-mobile-size), var(--heading-xxl-mobile-line), var(--heading-xxl-mobile-weight), var(--font-family-sans)),
+    'heading.xl.mobile': (var(--heading-xl-mobile-size), var(--heading-xl-mobile-line), var(--heading-xl-mobile-weight), var(--font-family-sans)),
+    'heading.h1.mobile': (var(--heading-h1-mobile-size), var(--heading-h1-mobile-line), var(--heading-h1-mobile-weight), var(--font-family-sans)),
+    'heading.h2.mobile': (var(--heading-h2-mobile-size), var(--heading-h2-mobile-line), var(--heading-h2-mobile-weight), var(--font-family-sans)),
+    'heading.h3.mobile': (var(--heading-h3-mobile-size), var(--heading-h3-mobile-line), var(--heading-h3-mobile-weight), var(--font-family-sans)),
+    'heading.h4.mobile': (var(--heading-h4-mobile-size), var(--heading-h4-mobile-line), var(--heading-h4-mobile-weight), var(--font-family-sans)),
+    'heading.h5.mobile': (var(--heading-h5-mobile-size), var(--heading-h5-mobile-line), var(--heading-h5-mobile-weight), var(--font-family-sans)),
+    'heading.h6.mobile': (var(--heading-h6-mobile-size), var(--heading-h6-mobile-line), var(--heading-h6-mobile-weight), var(--font-family-sans)),
+
+    'text.xl': (var(--text-xl-size), var(--text-xl-line), var(--text-xl-weight), var(--font-family-sans)),
+    'text.large': (var(--text-large-size), var(--text-large-line), var(--text-large-weight), var(--font-family-sans)),
+    'text.regular': (var(--text-regular-size), var(--text-regular-line), var(--text-regular-weight), var(--font-family-sans)),
+    'text.regular.emphasis': (var(--text-regular-size), var(--text-regular-line), var(--text-regular-emphasis-weight), var(--font-family-sans)),
+    'text.small': (var(--text-small-size), var(--text-small-line), var(--text-small-weight), var(--font-family-sans)),
+    'text.small.emphasis': (var(--text-small-size), var(--text-small-line), var(--text-small-emphasis-weight), var(--font-family-sans)),
+    'text.small.bold': (var(--text-small-size), var(--text-small-line), var(--text-small-bold-weight), var(--font-family-sans)),
+    'text.xs': (var(--text-xs-size), var(--text-xs-line), var(--text-xs-weight), var(--font-family-sans)),
+    'text.xs.bold': (var(--text-xs-size), var(--text-xs-line), var(--text-xs-bold-weight), var(--font-family-sans))
+);
+
+@mixin apply-typo($tuple) {
+    $size: nth($tuple, 1);
+    $line: nth($tuple, 2);
+    $weight: nth($tuple, 3);
+    $family: nth($tuple, 4);
+    font-family: $family;
+    font-size: $size;
+    line-height: $line;
+    font-weight: $weight;
+    letter-spacing: 0;
+}
+
+@mixin typography($variant) {
+    @if map-has-key($typo-map, $variant) {
+        @include apply-typo(map-get($typo-map, $variant));
+    } @else {
+        @include apply-typo(map-get($typo-map, 'text.regular'));
+    }
+}
+
+/* Convenience mixin that switches to mobile variant under mobile breakpoint */
+@mixin responsive-heading($desktopVariant, $mobileVariant) {
+    @include typography($desktopVariant);
+
+    @media (max-width: $bp-mobile-max) {
+        @include typography($mobileVariant);
+    }
+}
+
+/* Legacy classes for backward compatibility - force Geist font */
+.heading-desktop-xxl { @include typography('heading.xxl'); font-family: var(--font-family-sans) !important; }
+.heading-desktop-xl { @include typography('heading.xl'); font-family: var(--font-family-sans) !important; }
+.heading-desktop-h1 { @include typography('heading.h1'); font-family: var(--font-family-sans) !important; }
+.heading-desktop-h2 { @include typography('heading.h2'); font-family: var(--font-family-sans) !important; }
+.heading-desktop-h3 { @include typography('heading.h3'); font-family: var(--font-family-sans) !important; }
+.heading-desktop-h4 { @include typography('heading.h4'); font-family: var(--font-family-sans) !important; }
+.heading-desktop-h5 { @include typography('heading.h5'); font-family: var(--font-family-sans) !important; }
+.heading-desktop-h6 { @include typography('heading.h6'); font-family: var(--font-family-sans) !important; }
+
+.heading-mobile-xxl { @include typography('heading.xxl.mobile'); font-family: var(--font-family-sans) !important; }
+.heading-mobile-xl { @include typography('heading.xl.mobile'); font-family: var(--font-family-sans) !important; }
+.heading-mobile-h1 { @include typography('heading.h1.mobile'); font-family: var(--font-family-sans) !important; }
+.heading-mobile-h2 { @include typography('heading.h2.mobile'); font-family: var(--font-family-sans) !important; }
+.heading-mobile-h3 { @include typography('heading.h3.mobile'); font-family: var(--font-family-sans) !important; }
+.heading-mobile-h4 { @include typography('heading.h4.mobile'); font-family: var(--font-family-sans) !important; }
+.heading-mobile-h5 { @include typography('heading.h5.mobile'); font-family: var(--font-family-sans) !important; }
+.heading-mobile-h6 { @include typography('heading.h6.mobile'); font-family: var(--font-family-sans) !important; }
+
+.body-desktop-xl { @include typography('text.xl'); font-family: var(--font-family-sans) !important; }
+.body-desktop-large { @include typography('text.large'); font-family: var(--font-family-sans) !important; }
+.body-desktop-regular { @include typography('text.regular'); font-family: var(--font-family-sans) !important; }
+.body-desktop-regular-emphasis { @include typography('text.regular.emphasis'); font-family: var(--font-family-sans) !important; }
+.body-desktop-small { @include typography('text.small'); font-family: var(--font-family-sans) !important; }
+.body-desktop-small-emphasis { @include typography('text.small.emphasis'); font-family: var(--font-family-sans) !important; }
+.body-desktop-small-bold { @include typography('text.small.bold'); font-family: var(--font-family-sans) !important; }
+.body-desktop-xs { @include typography('text.xs'); font-family: var(--font-family-sans) !important; }
+.body-desktop-xs-bold { @include typography('text.xs.bold'); font-family: var(--font-family-sans) !important; }
+
+/* Force Geist font for BKIT Typography stories */
+[id*="v2-design-system-typography"] {
+  * {
+    font-family: var(--font-family-sans) !important;
+  }
+}
+
+/* Storybook display styles */
+.typography-story {
+  padding: 2rem;
+  max-width: 1200px;
+  margin: 0 auto;
+  font-family: var(--font-family-sans) !important;
+  
+  * {
+    font-family: inherit !important;
+  }
+}
+
+.story-header {
+  margin-bottom: 3rem;
+  
+  h1 {
+    @include typography('heading.h1');
+    color: var(--label-primary, #121E52);
+    margin: 0 0 0.5rem 0;
+  }
+  
+  p {
+    @include typography('text.regular');
+    color: var(--label-secondary, #626A90);
+    margin: 0;
+  }
+}
+
+.typography-section {
+  margin-bottom: 3rem;
+}
+
+.typography-section__title {
+  @include typography('heading.h2');
+  color: var(--label-primary, #121E52);
+  margin: 0 0 2rem 0;
+  border-bottom: 2px solid var(--border-primary, #E8E9EF);
+  padding-bottom: 1rem;
+}
+
+.typography-grid {
+  display: grid;
+  gap: 2rem;
+}
+
+.typography-example {
+  display: grid;
+  grid-template-columns: 1fr auto;
+  gap: 2rem;
+  align-items: center;
+  padding: 1.5rem;
+  border: 1px solid var(--border-primary, #E8E9EF);
+  border-radius: 8px;
+  background: var(--surface-primary, #FFFFFF);
+}
+
+.typography-sample {
+  color: var(--label-primary, #121E52);
+}
+
+.typography-info {
+  min-width: 200px;
+  text-align: right;
+}
+
+.typography-name {
+  @include typography('text.small.emphasis');
+  color: var(--label-primary, #121E52);
+  margin-bottom: 0.25rem;
+}
+
+.typography-specs {
+  display: flex;
+  gap: 1rem;
+  justify-content: flex-end;
+  margin-bottom: 0.25rem;
+}
+
+.typography-size,
+.typography-weight {
+  @include typography('text.xs');
+  font-family: var(--font-family-mono);
+  padding: 0.25rem 0.5rem;
+  border-radius: 4px;
+  background: var(--surface-secondary, #F8F8FA);
+  color: var(--label-secondary, #626A90);
+}
+
+.typography-description {
+  @include typography('text.xs');
+  color: var(--label-secondary, #626A90);
+  font-style: italic;
+}
+
+/* Responsive adjustments */
+@media (max-width: 768px) {
+  .typography-story {
+    padding: 1rem;
+  }
+  
+  .typography-example {
+    grid-template-columns: 1fr;
+    gap: 1rem;
+  }
+  
+  .typography-info {
+    text-align: left;
+  }
+  
+  .typography-specs {
+    justify-content: flex-start;
+  }
+}

package/src/v2/design-system/typography/Typography.stories.tsx

@@ -0,0 +1,109 @@
+import React from 'react';
+import { Meta } from '@storybook/react';
+import './Typography.scss';
+
+const meta: Meta = {
+  title: 'v2/Design System/Typography',
+  parameters: {
+    docs: {
+      description: {
+        component: 'BKIT Typography system with Geist font family and comprehensive text styles.'
+      }
+    }
+  }
+};
+
+export default meta;
+
+const TypographyShowcase = ({ title, styles }: { title: string; styles: Array<{ name: string; className: string; size: string; weight: string; description?: string }> }) => (
+  <div className="typography-section">
+    <h3 className="typography-section__title">{title}</h3>
+    <div className="typography-grid">
+      {styles.map(({ name, className, size, weight, description }) => (
+        <div key={name} className="typography-example">
+          <div className={`typography-sample ${className}`}>
+            The quick brown fox jumps over the lazy dog
+          </div>
+          <div className="typography-info">
+            <div className="typography-name">{name}</div>
+            <div className="typography-specs">
+              <span className="typography-size">{size}</span>
+              <span className="typography-weight">{weight}</span>
+            </div>
+            {description && <div className="typography-description">{description}</div>}
+          </div>
+        </div>
+      ))}
+    </div>
+  </div>
+);
+
+export const DesktopHeadings = () => (
+  <div className="typography-story">
+    <div className="story-header">
+      <h1>Desktop Headings</h1>
+      <p>Heading styles optimized for desktop viewing</p>
+    </div>
+
+    <TypographyShowcase
+      title="Desktop Headings"
+      styles={[
+        { name: 'Heading XXL', className: 'heading-desktop-xxl', size: '44px', weight: 'SemiBold', description: 'Hero headings and large displays' },
+        { name: 'Heading XL', className: 'heading-desktop-xl', size: '32px', weight: 'Bold', description: 'Page titles and major sections' },
+        { name: 'Heading H1', className: 'heading-desktop-h1', size: '24px', weight: 'SemiBold', description: 'Primary page headings' },
+        { name: 'Heading H2', className: 'heading-desktop-h2', size: '20px', weight: 'SemiBold', description: 'Section headings' },
+        { name: 'Heading H3', className: 'heading-desktop-h3', size: '17px', weight: 'SemiBold', description: 'Subsection headings' },
+        { name: 'Heading H4', className: 'heading-desktop-h4', size: '15px', weight: 'SemiBold', description: 'Card titles and labels' },
+        { name: 'Heading H5', className: 'heading-desktop-h5', size: '13px', weight: 'Medium', description: 'Small headings' },
+        { name: 'Heading H6', className: 'heading-desktop-h6', size: '11px', weight: 'Medium', description: 'Micro headings' }
+      ]}
+    />
+  </div>
+);
+
+export const MobileHeadings = () => (
+  <div className="typography-story">
+    <div className="story-header">
+      <h1>Mobile Headings</h1>
+      <p>Heading styles optimized for mobile viewing</p>
+    </div>
+
+    <TypographyShowcase
+      title="Mobile Headings"
+      styles={[
+        { name: 'Mobile XXL', className: 'heading-mobile-xxl', size: '32px', weight: 'SemiBold', description: 'Mobile hero headings' },
+        { name: 'Mobile XL', className: 'heading-mobile-xl', size: '26px', weight: 'Bold', description: 'Mobile page titles' },
+        { name: 'Mobile H1', className: 'heading-mobile-h1', size: '20px', weight: 'SemiBold', description: 'Mobile primary headings' },
+        { name: 'Mobile H2', className: 'heading-mobile-h2', size: '18px', weight: 'SemiBold', description: 'Mobile section headings' },
+        { name: 'Mobile H3', className: 'heading-mobile-h3', size: '16px', weight: 'SemiBold', description: 'Mobile subsection headings' },
+        { name: 'Mobile H4', className: 'heading-mobile-h4', size: '14px', weight: 'SemiBold', description: 'Mobile card titles' },
+        { name: 'Mobile H5', className: 'heading-mobile-h5', size: '13px', weight: 'Medium', description: 'Mobile small headings' },
+        { name: 'Mobile H6', className: 'heading-mobile-h6', size: '11px', weight: 'Medium', description: 'Mobile micro headings' }
+      ]}
+    />
+  </div>
+);
+
+export const BodyText = () => (
+  <div className="typography-story">
+    <div className="story-header">
+      <h1>Body Text</h1>
+      <p>Body text styles for content and interface text</p>
+    </div>
+
+    <TypographyShowcase
+      title="Body Text Styles"
+      styles={[
+        { name: 'Body XL', className: 'body-desktop-xl', size: '20px', weight: 'Regular', description: 'Large body text for emphasis' },
+        { name: 'Body Large', className: 'body-desktop-large', size: '18px', weight: 'Regular', description: 'Large body text' },
+        { name: 'Body Regular', className: 'body-desktop-regular', size: '15px', weight: 'Regular', description: 'Standard body text' },
+        { name: 'Body Regular Emphasis', className: 'body-desktop-regular-emphasis', size: '15px', weight: 'Medium', description: 'Emphasized body text' },
+        { name: 'Body Small', className: 'body-desktop-small', size: '13px', weight: 'Regular', description: 'Small body text' },
+        { name: 'Body Small Emphasis', className: 'body-desktop-small-emphasis', size: '13px', weight: 'Medium', description: 'Small emphasized text' },
+        { name: 'Body Small Bold', className: 'body-desktop-small-bold', size: '13px', weight: 'SemiBold', description: 'Small bold text' },
+        { name: 'Body XS', className: 'body-desktop-xs', size: '10px', weight: 'Medium', description: 'Extra small text' },
+        { name: 'Body XS Bold', className: 'body-desktop-xs-bold', size: '10px', weight: 'SemiBold', description: 'Extra small bold text' }
+      ]}
+    />
+  </div>
+);

package/src/v2/index.ts

@@ -21,13 +21,20 @@ export type { AlertProps, AlertVariant } from './components/Alert'
 export { Button } from './components/Button'
 export type { ButtonProps } from './components/Button'
 
-// Colors Showcase
-export { ColorsShowcase, ColorSwatch } from './components/Colors'
-export type { ColorGroup } from './components/Colors'
+// EntityHeader Component
+export { EntityHeader } from './components/EntityHeader'
+export type { EntityHeaderProps } from './components/EntityHeader'
 
-// Typography Component
-export { Typography } from './components/Typography'
-export type { TypographyProps, TypographyVariant } from './components/Typography'
+// Tooltip Component
+export { Tooltip } from './components/Tooltip'
+export type { TooltipProps } from './components/Tooltip'
+// NPSScore Component
+export { NPSScore } from './components/NPSScore'
+export type { NPSScoreProps, NPSSubmitData } from './components/NPSScore'
+
+// UserPanel Component
+export { UserPanel } from './components/UserPanel'
+export type { UserPanelProps } from './components/UserPanel'
 
 // ============================================================================
 // Navigation Components
@@ -68,6 +75,35 @@ export type { SidebarUserElementProps } from './navigation/SidebarUserElement'
 export { SidebarWithAuth } from './navigation/SidebarWithAuth'
 export type { SidebarWithAuthProps } from './navigation/SidebarWithAuth'
 
+// Dashboard Layout (Complete layout with sidebar, tophat, and content area)
+export { 
+    DashboardLayout, 
+    ProviderSidebar, 
+    AdminSidebar, 
+    TopNavigation, 
+    DashboardFooter,
+    // Sidebar Icons
+    HomeIcon,
+    FlowsIcon,
+    InventoryIcon,
+    LoyaltyIcon,
+    CustomersIcon,
+    ReportsIcon,
+    AnalyticsIcon,
+    MarketingIcon,
+    WaiversIcon,
+    SettingsIcon,
+} from './navigation/DashboardLayout'
+export type { 
+    DashboardLayoutProps, 
+    DestinationType,
+    ProviderSidebarProps,
+    NavItem,
+    AdminSidebarProps, 
+    TopNavigationProps, 
+    DashboardFooterProps 
+} from './navigation/DashboardLayout'
+
 // Navigation Configuration
 export { NAVIGATION_ITEMS } from './navigation/config'
 
@@ -84,7 +120,7 @@ export { useAuth, useCanAccess } from './hooks/useAuth'
 // Types
 // ============================================================================
 
-export type { NavigationItem, AuthCredentials } from './types/navigation'
+export type { AuthCredentials } from './types/navigation'
 
 // ============================================================================
 // Design Tokens

package/src/v2/navigation/DashboardLayout/AdminSidebar.scss

@@ -0,0 +1,207 @@
+.admin-sidebar {
+    background: var(--surfaces-main-background-secondary, #F8F8FA);
+    border-right: 1px solid var(--borders-main-border-primary, #E8E9EF);
+    box-sizing: border-box;
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    padding: 8px;
+    height: 100%;
+    overflow-y: auto;
+    transition: width 0.3s ease;
+
+    &--expanded {
+        width: 268px;
+    }
+
+    &--collapsed {
+        width: 72px;
+    }
+
+    @media (max-width: 640px) {
+        width: 100% !important;
+        border-right: none;
+    }
+
+    &__content {
+        display: flex;
+        flex-direction: column;
+        gap: 4px;
+        width: 100%;
+    }
+
+    &__header {
+        display: flex;
+        align-items: center;
+        gap: 8px;
+        padding: 8px;
+        border-radius: 8px;
+        background: var(--surfaces-main-background-secondary, #F8F8FA);
+        transition: background 0.2s ease;
+        cursor: pointer;
+        width: 100%;
+        box-sizing: border-box;
+
+        &:hover {
+            background: var(--surfaces-main-background-secondary-hover, #F0F0F4);
+        }
+
+        &:active {
+            background: var(--surfaces-main-background-secondary-pressed, #E8E8EC);
+        }
+
+        &--collapsed {
+            justify-content: center;
+        }
+    }
+
+    &__avatar {
+        width: 47px;
+        height: 47px;
+        border-radius: 50%;
+        flex-shrink: 0;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        overflow: hidden;
+        position: relative;
+        border: 2px solid var(--borders-main-border-primary);
+        background: var(--surfaces-main-background-secondary);
+
+        img {
+            width: 100%;
+            height: 100%;
+            object-fit: cover;
+        }
+    }
+
+    &__header-text {
+        display: flex;
+        flex-direction: column;
+        gap: 4px;
+        min-width: 0;
+        flex: 1;
+    }
+
+    &__title {
+        font-family: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
+        font-weight: 600;
+        font-size: 15px;
+        line-height: 18px;
+        color: var(--labels-main-label-primary, #121E52);
+        margin: 0;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+    }
+
+    &__badge {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        padding: 4px 8px;
+        background: var(--surfaces-main-background-tertiary, #E8E9EF);
+        border-radius: 8px;
+        width: fit-content;
+        transition: background 0.2s ease;
+
+        .admin-sidebar__header:hover & {
+            background: var(--surfaces-main-surface-primary, #FFFFFF);
+        }
+
+        span {
+            font-family: 'Geist Mono', 'SF Mono', 'Consolas', monospace;
+            font-weight: 600;
+            font-size: 10px;
+            line-height: 12px;
+            color: var(--labels-main-label-secondary, #626A90);
+            white-space: nowrap;
+        }
+    }
+
+    &__nav {
+        display: flex;
+        flex-direction: column;
+        gap: 4px;
+        width: 100%;
+        padding-top: 8px;
+    }
+
+    &__link {
+        box-sizing: border-box;
+        display: flex;
+        align-items: center;
+        gap: 8px;
+        padding: 8px;
+        border-radius: 8px;
+        cursor: pointer;
+        transition: all 0.2s ease;
+        text-decoration: none;
+        outline: none;
+        width: 100%;
+        color: var(--fills-main-fill-primary, #14215A);
+
+        &:hover:not(&--active) {
+            background: var(--surfaces-main-background-secondary-hover, #F0F0F4);
+        }
+
+        &:active:not(&--active) {
+            background: var(--surfaces-main-background-secondary-pressed, #E8E8EC);
+        }
+
+        &:focus-visible {
+            outline: 2px solid var(--fills-main-fill-primary, #14215A);
+            outline-offset: 2px;
+        }
+
+        &--collapsed {
+            justify-content: center;
+        }
+
+        &--active {
+            background: linear-gradient(
+                to top right,
+                var(--gradient-stop3, #0E8CE2) 0%,
+                var(--gradient-stop2, #5D5BF4) 50%,
+                var(--gradient-stop1, #6200EE) 100%
+            );
+            color: white;
+
+            .admin-sidebar__icon {
+                color: white;
+
+                svg path {
+                    fill: white;
+                }
+            }
+
+            .admin-sidebar__link-text {
+                color: white;
+            }
+        }
+    }
+
+    &__icon {
+        flex-shrink: 0;
+        width: 24px;
+        height: 24px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+
+        svg {
+            width: 100%;
+            height: 100%;
+        }
+    }
+
+    &__link-text {
+        font-family: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
+        font-weight: 500;
+        font-size: 13px;
+        line-height: 16px;
+        color: var(--labels-main-label-primary, #121E52);
+        margin: 0;
+        white-space: nowrap;
+    }
+}