@licklist/design 0.78.44 → 0.78.45

package/src/v2/icons/Icons.stories.tsx

@@ -0,0 +1,253 @@
+import React from 'react'
+import {
+  DashboardIcon,
+  CompanyIcon,
+  VenueIcon,
+  MarketingIcon,
+  AdminIcon,
+  ProfileIcon,
+  CustomersIcon,
+  ReportsIcon,
+  AnalyticsIcon,
+  PaymentsIcon,
+  SettingsIcon,
+  LoyaltyIcon,
+  WaiversIcon,
+  CalendarIcon,
+  BookingsIcon,
+  BookingTypesIcon,
+  EditIcon,
+  CalendarSmallIcon,
+  SearchIcon,
+  RefreshIcon,
+  SendIcon,
+  ExternalLinkIcon,
+  ExportIcon,
+  ClearIcon,
+  ChevronLeftIcon,
+  ChevronRightIcon,
+  ArrowRightIcon,
+  ArrowLeftIcon,
+  InfoIcon,
+  TableHeaderArrowUpIcon,
+  TableHeaderArrowDownIcon,
+  ArrowUpIcon,
+  ArrowDownIcon,
+  GripVerticalIcon,
+  PlusIcon,
+  CloseIcon,
+  EllipsisIcon,
+  CircleIcon,
+  SecurityIcon,
+  NewPasswordIcon,
+  PasswordRequirementIcon,
+  VerifyEmailIcon,
+  PasswordTypeIcon,
+  BookedLogo,
+  DeleteIcon,
+  UserAddIcon,
+  UserImportIcon,
+  SlidersIcon,
+  ProviderPlusIcon,
+  ClockIcon,
+  WarningTriangleIcon,
+  CheckCircleIcon,
+  XCircleIcon,
+  UserGroupIcon,
+  UploadIcon,
+  ArrowDownSmallIcon,
+  ToggleCheckIcon,
+  ToggleCrossIcon,
+  TrendUpIcon,
+  TrendDownIcon,
+  TrendSteadyIcon,
+  TrendUpSmallIcon,
+  TrendDownSmallIcon,
+  TrendSteadySmallIcon,
+  NPSHappyIcon,
+  NPSNeutralIcon,
+  NPSSadIcon,
+  NPSSadFaceIcon,
+  NPSNeutralFaceIcon,
+  NPSHappyFaceIcon,
+  AnalyticsEmptyIcon,
+  PaymentsEmptyIcon,
+  ReportsEmptyIcon,
+  SelectCheckIcon,
+} from './index'
+
+export default {
+  title: 'v2/Icons',
+}
+
+const iconCardStyle: React.CSSProperties = {
+  display: 'flex',
+  flexDirection: 'column',
+  alignItems: 'center',
+  justifyContent: 'center',
+  gap: 8,
+  padding: 16,
+  border: '1px solid #E8E9EF',
+  borderRadius: 8,
+  minWidth: 120,
+  minHeight: 100,
+}
+
+const labelStyle: React.CSSProperties = {
+  fontSize: 11,
+  color: '#6B7280',
+  fontFamily: 'monospace',
+  textAlign: 'center',
+  wordBreak: 'break-all',
+}
+
+const gridStyle: React.CSSProperties = {
+  display: 'grid',
+  gridTemplateColumns: 'repeat(auto-fill, minmax(140px, 1fr))',
+  gap: 12,
+  padding: 24,
+}
+
+const sectionStyle: React.CSSProperties = {
+  marginBottom: 32,
+}
+
+const sectionTitleStyle: React.CSSProperties = {
+  fontSize: 16,
+  fontWeight: 600,
+  marginBottom: 12,
+  paddingLeft: 24,
+  color: '#111827',
+}
+
+const IconCard = ({ name, children }: { name: string; children: React.ReactNode }) => (
+  <div style={iconCardStyle}>
+    <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
+      {children}
+    </div>
+    <span style={labelStyle}>{name}</span>
+  </div>
+)
+
+const Section = ({ title, children }: { title: string; children: React.ReactNode }) => (
+  <div style={sectionStyle}>
+    <h3 style={sectionTitleStyle}>{title}</h3>
+    <div style={gridStyle}>{children}</div>
+  </div>
+)
+
+export const AllIcons = () => (
+  <div>
+    <Section title="Navigation">
+      <IconCard name="DashboardIcon"><DashboardIcon /></IconCard>
+      <IconCard name="CompanyIcon"><CompanyIcon /></IconCard>
+      <IconCard name="VenueIcon"><VenueIcon /></IconCard>
+      <IconCard name="MarketingIcon"><MarketingIcon /></IconCard>
+      <IconCard name="AdminIcon"><AdminIcon /></IconCard>
+      <IconCard name="ProfileIcon"><ProfileIcon /></IconCard>
+      <IconCard name="CustomersIcon"><CustomersIcon /></IconCard>
+      <IconCard name="ReportsIcon"><ReportsIcon /></IconCard>
+      <IconCard name="AnalyticsIcon"><AnalyticsIcon /></IconCard>
+      <IconCard name="PaymentsIcon"><PaymentsIcon /></IconCard>
+      <IconCard name="SettingsIcon"><SettingsIcon /></IconCard>
+      <IconCard name="LoyaltyIcon"><LoyaltyIcon /></IconCard>
+      <IconCard name="WaiversIcon"><WaiversIcon /></IconCard>
+      <IconCard name="CalendarIcon"><CalendarIcon /></IconCard>
+      <IconCard name="BookingsIcon"><BookingsIcon /></IconCard>
+      <IconCard name="BookingTypesIcon"><BookingTypesIcon /></IconCard>
+    </Section>
+
+    <Section title="Actions">
+      <IconCard name="EditIcon"><EditIcon /></IconCard>
+      <IconCard name="SearchIcon"><SearchIcon /></IconCard>
+      <IconCard name="RefreshIcon"><RefreshIcon /></IconCard>
+      <IconCard name="SendIcon"><SendIcon /></IconCard>
+      <IconCard name="ExternalLinkIcon"><ExternalLinkIcon /></IconCard>
+      <IconCard name="ExportIcon"><ExportIcon /></IconCard>
+      <IconCard name="ClearIcon"><ClearIcon /></IconCard>
+      <IconCard name="DeleteIcon"><DeleteIcon /></IconCard>
+      <IconCard name="PlusIcon"><PlusIcon /></IconCard>
+      <IconCard name="CloseIcon"><CloseIcon /></IconCard>
+      <IconCard name="UploadIcon"><UploadIcon /></IconCard>
+    </Section>
+
+    <Section title="Arrows & Chevrons">
+      <IconCard name="ArrowLeftIcon"><ArrowLeftIcon /></IconCard>
+      <IconCard name="ArrowRightIcon"><ArrowRightIcon /></IconCard>
+      <IconCard name="ArrowUpIcon"><ArrowUpIcon /></IconCard>
+      <IconCard name="ArrowDownIcon"><ArrowDownIcon /></IconCard>
+      <IconCard name="ArrowDownSmallIcon"><ArrowDownSmallIcon /></IconCard>
+      <IconCard name="ChevronLeftIcon"><ChevronLeftIcon /></IconCard>
+      <IconCard name="ChevronRightIcon"><ChevronRightIcon /></IconCard>
+      <IconCard name="TableHeaderArrowUpIcon"><TableHeaderArrowUpIcon /></IconCard>
+      <IconCard name="TableHeaderArrowDownIcon"><TableHeaderArrowDownIcon /></IconCard>
+    </Section>
+
+    <Section title="Form & Input">
+      <IconCard name="CalendarSmallIcon"><CalendarSmallIcon /></IconCard>
+      <IconCard name="ClockIcon"><ClockIcon /></IconCard>
+      <IconCard name="InfoIcon"><InfoIcon /></IconCard>
+      <IconCard name="EllipsisIcon"><EllipsisIcon /></IconCard>
+      <IconCard name="CircleIcon"><CircleIcon /></IconCard>
+      <IconCard name="GripVerticalIcon"><GripVerticalIcon /></IconCard>
+      <IconCard name="SlidersIcon"><SlidersIcon /></IconCard>
+      <IconCard name="SelectCheckIcon"><SelectCheckIcon /></IconCard>
+      <IconCard name="ToggleCheckIcon"><ToggleCheckIcon /></IconCard>
+      <IconCard name="ToggleCrossIcon"><ToggleCrossIcon /></IconCard>
+    </Section>
+
+    <Section title="Users">
+      <IconCard name="UserAddIcon"><UserAddIcon /></IconCard>
+      <IconCard name="UserImportIcon"><UserImportIcon /></IconCard>
+      <IconCard name="UserGroupIcon"><UserGroupIcon /></IconCard>
+      <IconCard name="ProviderPlusIcon"><ProviderPlusIcon /></IconCard>
+    </Section>
+
+    <Section title="Status & Feedback">
+      <IconCard name="CheckCircleIcon"><CheckCircleIcon /></IconCard>
+      <IconCard name="XCircleIcon"><XCircleIcon /></IconCard>
+      <IconCard name="WarningTriangleIcon"><WarningTriangleIcon /></IconCard>
+      <IconCard name="SecurityIcon"><SecurityIcon /></IconCard>
+    </Section>
+
+    <Section title="Trends">
+      <IconCard name="TrendUpIcon"><TrendUpIcon /></IconCard>
+      <IconCard name="TrendDownIcon"><TrendDownIcon /></IconCard>
+      <IconCard name="TrendSteadyIcon"><TrendSteadyIcon /></IconCard>
+      <IconCard name="TrendUpSmallIcon"><TrendUpSmallIcon /></IconCard>
+      <IconCard name="TrendDownSmallIcon"><TrendDownSmallIcon /></IconCard>
+      <IconCard name="TrendSteadySmallIcon"><TrendSteadySmallIcon /></IconCard>
+    </Section>
+
+    <Section title="NPS">
+      <IconCard name="NPSHappyIcon"><NPSHappyIcon /></IconCard>
+      <IconCard name="NPSNeutralIcon"><NPSNeutralIcon /></IconCard>
+      <IconCard name="NPSSadIcon"><NPSSadIcon /></IconCard>
+      <IconCard name="NPSHappyFaceIcon"><NPSHappyFaceIcon /></IconCard>
+      <IconCard name="NPSNeutralFaceIcon"><NPSNeutralFaceIcon /></IconCard>
+      <IconCard name="NPSSadFaceIcon"><NPSSadFaceIcon /></IconCard>
+    </Section>
+
+    <Section title="Auth & Branding">
+      <IconCard name="NewPasswordIcon"><NewPasswordIcon /></IconCard>
+      <IconCard name="PasswordRequirementIcon"><PasswordRequirementIcon met={false} /></IconCard>
+      <IconCard name="PasswordRequirementIcon (met)"><PasswordRequirementIcon met /></IconCard>
+      <IconCard name="VerifyEmailIcon"><VerifyEmailIcon /></IconCard>
+      <IconCard name="PasswordTypeIcon"><PasswordTypeIcon /></IconCard>
+      <IconCard name="BookedLogo"><BookedLogo /></IconCard>
+    </Section>
+
+    <Section title="Empty States">
+      <IconCard name="AnalyticsEmptyIcon"><AnalyticsEmptyIcon /></IconCard>
+      <IconCard name="PaymentsEmptyIcon"><PaymentsEmptyIcon /></IconCard>
+      <IconCard name="ReportsEmptyIcon"><ReportsEmptyIcon /></IconCard>
+    </Section>
+
+  </div>
+)
+
+AllIcons.story = {
+  parameters: {
+    info: 'All v2 icons in the design system',
+  },
+}

package/src/v2/icons/index.tsx

@@ -388,6 +388,20 @@ export const SettingsPageDashboardIcon = ({ size = 24, className = '' }: { size?
   </svg>
 )
 
+// Logo icons (used by auth pages)
+export const LogoDesktop1 = ({ width = 18, height = 18, className = '' }: { width?: number; height?: number; className?: string } = {}) => (
+    <svg width={width} height={height} viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg" className={className}>
+        <path d="M9 1L11.5 5.5L16.5 6L13 9L14 14L9 11.5L4 14L5 9L1.5 6L6.5 5.5L9 1Z" fill="var(--fills-main-fill-primary, #14215A)" stroke="var(--fills-main-fill-primary, #14215A)" strokeWidth="0.5" />
+    </svg>
+)
+
+export const LogoDesktop2 = ({ width = 112, height = 29, className = '' }: { width?: number; height?: number; className?: string } = {}) => (
+    <svg width={width} height={height} viewBox="0 0 112 29" fill="none" xmlns="http://www.w3.org/2000/svg" className={className}>
+        <rect x="0" y="0" width="112" height="29" rx="4" fill="var(--surfaces-main-background-primary, #ffffff)" stroke="var(--borders-main-border-primary, #E8E9EF)" strokeWidth="1" />
+        <text x="56" y="18" textAnchor="middle" fontFamily="Geist" fontSize="11" fontWeight="600" fill="var(--labels-main-label-primary, #121E52)">Booked it</text>
+    </svg>
+)
+
 export const SettingsPageWaiversIcon = ({ size = 24, className = '', ...props }: React.SVGProps<SVGSVGElement> & { size?: number; className?: string } = {}) => (
   <svg width={size} height={size} viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg" className={className} {...props}>
     <path d="M29.3657 27.8354C31.4117 26.4405 34.0772 25.7503 37.729 26.1685L38.4731 26.2661L38.6235 26.2974C39.3599 26.4857 39.8491 27.2053 39.7339 27.9731C39.6184 28.741 38.9395 29.2849 38.1802 29.2485L38.0278 29.2339L37.395 29.1489C34.308 28.7933 32.394 29.4019 31.0562 30.314C29.5595 31.3345 28.5809 32.8586 27.5396 34.6099C26.5775 36.2279 25.4604 38.2594 23.6812 39.4409C21.8382 40.6643 19.5533 40.8605 16.5776 39.8687L15.9731 39.6548L15.8325 39.5933C15.1516 39.2557 14.8228 38.4502 15.0952 37.7231C15.3681 36.996 16.1461 36.6045 16.8813 36.7983L17.0278 36.8452L17.5229 37.021C19.9234 37.8245 21.1853 37.498 22.0229 36.9419C23.1024 36.2249 23.8614 34.9277 24.9614 33.0776C25.9824 31.3606 27.2536 29.2757 29.3657 27.8354ZM22.0132 6.82178C22.3878 6.08288 23.2909 5.78703 24.0298 6.16162L30.855 9.62256L30.9878 9.69775C31.6279 10.1082 31.8654 10.9454 31.5142 11.6382L21.6284 31.1382C21.5083 31.375 21.327 31.5762 21.104 31.7202L14.7261 35.8394C14.2781 36.1287 13.7106 36.1585 13.2349 35.9175C12.759 35.6762 12.4459 35.2001 12.4146 34.6675L11.9673 27.0884C11.9517 26.8234 12.0075 26.5586 12.1274 26.3218L22.0132 6.82178ZM14.9878 27.3149L15.2583 31.9224L19.1372 29.4185L28.1606 11.6196L24.0112 9.51611L14.9878 27.3149Z" fill="currentColor"/>

package/src/v2/index.ts

@@ -151,6 +151,10 @@ export type { AuthCredentials } from './types/navigation'
 export { SettingsPage, SettingsTabs, SidebarCustomisation, defaultSidebarItems, SidebarNavItem } from './pages/Settings'
 export type { SettingsPageProps, SettingsTabsProps, SettingsTab, SidebarCustomisationProps, SidebarItem, SidebarNavItemProps } from './pages/Settings'
 
+// Auth Pages
+export { AuthLayout, LoginPage, ResetPasswordPage, CreatePasswordPage } from './pages/auth'
+export type { AuthLayoutProps, LoginPageProps, ResetPasswordPageProps, CreatePasswordPageProps } from './pages/auth'
+
 // ============================================================================
 // Design Tokens
 // ============================================================================

package/src/v2/pages/SettingsSubPage/SettingsSubPage.tsx

@@ -0,0 +1,49 @@
+import React from 'react'
+import { GhostButton } from '../../components/Button'
+import { NewPageHeader } from '../../components/NewPageHeader'
+import { ArrowLeftIcon, PlusIcon } from '../../icons'
+import './SettingsSubPage.scss'
+
+export interface SettingsSubPageProps {
+  title?: string
+  backLabel?: string
+  onBack?: () => void
+  actionLabel?: string
+  onAction?: () => void
+  children?: React.ReactNode
+}
+
+export const SettingsSubPage: React.FC<SettingsSubPageProps> = ({
+  title = '',
+  backLabel = 'Back to Settings',
+  onBack,
+  actionLabel,
+  onAction,
+  children,
+}) => {
+  return (
+    <div className="settings-sub-page">
+      {onBack && (
+        <div className="settings-sub-page__back">
+          <GhostButton onClick={onBack} icon={<ArrowLeftIcon />}>
+            {backLabel}
+          </GhostButton>
+        </div>
+      )}
+      <NewPageHeader
+        title={title}
+        showDivider
+      />
+      <div className="settings-sub-page__content">
+        {onAction && actionLabel && (
+          <div className="settings-sub-page__action">
+            <GhostButton onClick={onAction} icon={<PlusIcon width={16} height={16} />}>
+              {actionLabel}
+            </GhostButton>
+          </div>
+        )}
+        {children}
+      </div>
+    </div>
+  )
+}

package/src/v2/pages/SettingsSubPage/index.ts

@@ -0,0 +1,2 @@
+export { SettingsSubPage } from './SettingsSubPage'
+export type { SettingsSubPageProps } from './SettingsSubPage'

package/src/v2/pages/auth/AuthLayout/AuthLayout.scss

@@ -0,0 +1,140 @@
+.auth-layout {
+  position: relative;
+  width: 100%;
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: flex-start;
+  background-color: var(--surface-secondary);
+  padding: 0 16px;
+
+  &__alert {
+    width: 846px;
+    max-width: 100%;
+    margin-top: 24px;
+    position: relative;
+    z-index: 1;
+  }
+
+  &__bg-decoration {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 489px;
+    height: 588px;
+    pointer-events: none;
+    z-index: 0;
+  }
+
+  &__card {
+    position: relative;
+    z-index: 10;
+    width: 846px;
+    max-width: 100%;
+    min-height: 400px;
+    background-color: var(--surface-primary);
+    border-radius: 16px;
+    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
+    overflow: hidden;
+    margin-top: 80px;
+
+    @media (max-width: 768px) {
+      margin-top: 40px;
+    }
+  }
+
+  &__alert + &__card {
+    margin-top: 16px;
+  }
+
+  &__header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 16px;
+    border-bottom: 1px solid var(--border-primary);
+
+    .new-badge {
+      padding: 6px 10px;
+      font-size: 11px;
+    }
+  }
+
+  &__body {
+    padding: 42px;
+
+    @media (max-width: 768px) {
+      padding: 20px;
+    }
+  }
+
+  &__content {
+    display: flex;
+    width: 100%;
+    gap: 64px;
+    flex-wrap: wrap;
+
+    @media (max-width: 768px) {
+      gap: 32px;
+    }
+  }
+
+  &__info {
+    min-width: 240px;
+    flex: 1;
+    flex-shrink: 0;
+    flex-basis: 0;
+    max-width: 260px;
+    color: var(--label-primary);
+  }
+
+  &__icon {
+    width: 64px;
+    height: 64px;
+    color: var(--fill-primary);
+
+    svg {
+      width: 100%;
+      height: 100%;
+    }
+  }
+
+  &__title {
+    font-family: var(--font-family-sans, 'Geist', sans-serif);
+    font-size: 32px;
+    font-weight: 700;
+    line-height: 1;
+    color: var(--label-primary);
+    margin: 8px 0 0;
+    padding: 0;
+  }
+
+  &__subtitle {
+    font-family: var(--font-family-sans, 'Geist', sans-serif);
+    font-size: 18px;
+    font-weight: 400;
+    line-height: 1;
+    color: var(--label-secondary);
+    margin: 16px 0 0;
+    padding: 0;
+
+    @media (max-width: 768px) {
+      margin-top: 4px;
+    }
+  }
+
+  &__form-area {
+    display: flex;
+    min-width: 240px;
+    flex-direction: column;
+    align-items: stretch;
+    flex: 1;
+    flex-shrink: 0;
+    flex-basis: 0;
+
+    @media (max-width: 768px) {
+      max-width: 100%;
+    }
+  }
+}

package/src/v2/pages/auth/AuthLayout/AuthLayout.tsx

@@ -0,0 +1,61 @@
+import React, { useState, useEffect } from 'react'
+import './AuthLayout.scss'
+import { DashboardFooter } from '../../../navigation/DashboardLayout/DashboardFooter'
+import { AuthBgDecorationIcon, BookedLogo } from '../../../icons'
+import { Badge } from '../../../components/Badge'
+import { Alert } from '../../../components/Alert'
+
+export interface AuthLayoutProps {
+  badgeLabel: string
+  icon: React.ReactNode
+  title: string
+  subtitle: string
+  children: React.ReactNode
+  version?: string
+  error?: string
+  successMessage?: string
+}
+
+export const AuthLayout: React.FC<AuthLayoutProps> = ({ badgeLabel, icon, title, subtitle, children, version, error, successMessage }) => {
+  const [dismissed, setDismissed] = useState(false)
+
+  useEffect(() => {
+    setDismissed(false)
+  }, [error, successMessage])
+
+  const showError = error && !dismissed
+  const showSuccess = successMessage && !dismissed
+
+  return (
+    <div className="auth-layout">
+      <AuthBgDecorationIcon />
+
+      {showError && (
+        <Alert variant="error" title="Error" message={error} className="auth-layout__alert" onDismiss={() => setDismissed(true)} />
+      )}
+      {showSuccess && (
+        <Alert variant="success" title="Success" message={successMessage} className="auth-layout__alert" onDismiss={() => setDismissed(true)} />
+      )}
+
+      <div className="auth-layout__card">
+        <div className="auth-layout__header">
+          <BookedLogo />
+          <Badge>{badgeLabel}</Badge>
+        </div>
+        <div className="auth-layout__body">
+          <div className="auth-layout__content">
+            <div className="auth-layout__info">
+              <div className="auth-layout__icon">{icon}</div>
+              <h1 className="auth-layout__title">{title}</h1>
+              <p className="auth-layout__subtitle">{subtitle}</p>
+            </div>
+            <div className="auth-layout__form-area">
+              {children}
+            </div>
+          </div>
+        </div>
+      </div>
+      <DashboardFooter version={version} />
+    </div>
+  )
+}

package/src/v2/pages/auth/AuthLayout/index.ts

@@ -0,0 +1,2 @@
+export { AuthLayout } from './AuthLayout'
+export type { AuthLayoutProps } from './AuthLayout'

package/src/v2/pages/auth/CreatePassword/CreatePasswordPage.scss

@@ -0,0 +1,149 @@
+.auth-create-password {
+  display: flex;
+  flex-direction: column;
+  gap: 0;
+
+  &__requirements {
+    margin-bottom: 24px;
+  }
+
+  &__requirements-title {
+    font-family: var(--font-family-sans, 'Geist', sans-serif);
+    font-size: 15px;
+    font-weight: 600;
+    line-height: 1.4;
+    color: var(--label-primary);
+    margin: 0 0 8px;
+    padding: 0;
+  }
+
+  &__requirements-list {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+    display: flex;
+    flex-direction: column;
+    gap: 6px;
+  }
+
+  &__requirement-item {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    font-family: var(--font-family-sans, 'Geist', sans-serif);
+    font-size: 15px;
+    font-weight: 400;
+    line-height: 1.4;
+    color: var(--label-primary);
+  }
+
+  &__requirement-icon {
+    width: 16px;
+    height: 16px;
+    flex-shrink: 0;
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    &--met {
+      color: var(--label-status-success);
+    }
+
+    &--unmet {
+      color: var(--label-status-error);
+    }
+
+    &--neutral {
+      color: var(--label-tertiary);
+    }
+  }
+
+  &__field {
+    margin-bottom: 16px;
+  }
+
+  &__field--last {
+    margin-bottom: 24px;
+  }
+
+  &__strength {
+    margin-top: 8px;
+  }
+
+  &__strength-header {
+    display: flex;
+    justify-content: space-between;
+    margin-bottom: 4px;
+    font-family: var(--font-family-sans, 'Geist', sans-serif);
+    font-size: 12px;
+    color: var(--label-secondary);
+  }
+
+  &__strength-bar-track {
+    height: 4px;
+    background-color: var(--surface-tertiary);
+    border-radius: 4px;
+    overflow: hidden;
+  }
+
+  &__strength-bar-fill {
+    height: 100%;
+    border-radius: 4px;
+    transition: width 0.3s ease, background-color 0.3s ease;
+  }
+
+  &__match {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    margin-top: 8px;
+    font-family: var(--font-family-sans, 'Geist', sans-serif);
+    font-size: 13px;
+
+    &--match {
+      color: var(--label-status-success);
+    }
+
+    &--no-match {
+      color: var(--label-status-error);
+    }
+  }
+
+  &__actions {
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+    align-items: flex-start;
+  }
+
+  &__reset-link {
+    font-family: var(--font-family-sans, 'Geist', sans-serif);
+    font-size: 15px;
+    font-weight: 400;
+    color: var(--label-action);
+    text-decoration: underline;
+    background: none;
+    border: none;
+    padding: 0;
+    cursor: pointer;
+
+    &:hover {
+      opacity: 0.8;
+    }
+  }
+
+  &__error {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    padding: 10px 12px;
+    border-radius: 8px;
+    background-color: var(--surface-status-error);
+    border: 1px solid var(--border-status-error);
+    font-family: var(--font-family-sans, 'Geist', sans-serif);
+    font-size: 13px;
+    color: var(--label-status-error);
+    margin-bottom: 16px;
+  }
+}