@licklist/design 0.78.43 → 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

@@ -211,6 +211,16 @@ export const GripVerticalIcon = ({ width = 16, height = 16 }: { width?: number;
     </svg>
 )
 
+export const ReorderIcon = ({ width = 16, height = 16 }: { width?: number; height?: number } = {}) => (
+    <svg width={width} height={height} viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <rect x="7" y="11" width="18" height="2" rx="1" fill="currentColor"/>
+        <rect x="7" y="15" width="18" height="2" rx="1" fill="currentColor"/>
+        <rect x="7" y="19" width="18" height="2" rx="1" fill="currentColor"/>
+        <path d="M19.9325 8H12.0675C11.6436 8 11.412 7.50557 11.6834 7.17991L15.6159 2.46093C15.8158 2.22106 16.1842 2.22106 16.3841 2.46093L20.3166 7.17991C20.588 7.50557 20.3564 8 19.9325 8Z" fill="currentColor" fillOpacity="0.5"/>
+        <path d="M12.0675 24L19.9325 24C20.3564 24 20.588 24.4944 20.3166 24.8201L16.3841 29.5391C16.1842 29.7789 15.8158 29.7789 15.6159 29.5391L11.6834 24.8201C11.412 24.4944 11.6436 24 12.0675 24Z" fill="currentColor" fillOpacity="0.5"/>
+    </svg>
+)
+
 export const PlusIcon = ({ width = 16, height = 16 }: { width?: number; height?: number } = {}) => (
     <svg width={width} height={height} viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
         <path d="M17 14.5H24.5V17.5H17V25H14V17.5H6.5V14.5H14V7H17V14.5Z" fill="currentColor"/>
@@ -378,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/navigation/DashboardLayout/DashboardLayout.tsx

@@ -157,7 +157,7 @@ export const DashboardLayout: React.FC<DashboardLayoutProps> = ({
                 providerType={providerType}
                 activePath={activePath}
                 onNavigation={onNavigation}
-                showBackToAdmin={hasAdminAccess && destination !== 'admin'}
+                showBackToAdmin={hasAdminAccess}
                 onBackToAdmin={() => onNavigation?.('/admin')}
                 navItems={navItems}
             />

package/src/v2/navigation/DashboardLayout/TopNavigation.tsx

@@ -43,7 +43,8 @@ const SidebarCollapsedIcon = () => (
     <path d="M29 10C30.6569 10 32 11.3431 32 13V27C32 28.6569 30.6569 30 29 30H11C9.34315 30 8 28.6569 8 27V13C8 11.3431 9.34315 10 11 10H29ZM14 28H29C29.5523 28 30 27.5523 30 27V13C30 12.4477 29.5523 12 29 12H14V28ZM11 12C10.4477 12 10 12.4477 10 13V27C10 27.5523 10.4477 28 11 28H12V12H11Z" fill="var(--fills-main-fill-secondary, #626A90)"/>
   </svg>
 )
-const InboxIcon = ({ active, hovered }: { active?: boolean; hovered?: boolean }) => (
+// @ts-ignore kept for future use
+const _InboxIcon = ({ active, hovered }: { active?: boolean; hovered?: boolean }) => (
     <svg width="32" height="32" viewBox="0 0 32 32" fill="none">
         {(hovered && !active) && (
             <path d="M11 10H21L22.5 18H19L18 20L16 20.5L14 20L13 18H9.5L11 10Z" fill="var(--fills-main-fill-secondary, #626A90)" fillOpacity="0.3"/>
@@ -54,7 +55,8 @@ const InboxIcon = ({ active, hovered }: { active?: boolean; hovered?: boolean })
         <path d="M8.02381 7.78307C8.12549 7.32553 8.5313 7 9 7H23C23.4687 7 23.8745 7.32553 23.9762 7.78307L25.9762 16.7831C25.992 16.8543 26 16.927 26 17V24C26 24.5523 25.5523 25 25 25H7C6.44772 25 6 24.5523 6 24V17C6 16.927 6.00799 16.8543 6.02381 16.7831L8.02381 7.78307ZM9.80217 9L8.24662 16H13C13 17.6569 14.3431 19 16 19C17.6569 19 19 17.6569 19 16H23.7534L22.1978 9H9.80217ZM20.584 18C19.8124 19.7659 18.0503 21 16 21C13.9497 21 12.1876 19.7659 11.416 18H8V23H24V18H20.584Z" fill={active ? 'white' : 'var(--fills-main-fill-secondary, #626A90)'}/>
     </svg>
 )
-const NotificationIcon = ({ active, hovered }: { active?: boolean; hovered?: boolean }) => {
+// @ts-ignore kept for future use
+const _NotificationIcon = ({ active, hovered }: { active?: boolean; hovered?: boolean }) => {
     if (active) {
         return (
             <svg width="32" height="32" viewBox="0 0 32 32" fill="none">
@@ -135,10 +137,10 @@ export const TopNavigation: React.FC<TopNavigationProps> = ({
     userAvatarUrl,
     userId,
     userRole,
-    inboxCount = 0,
-    notificationCount = 0,
+    inboxCount: _inboxCount = 0,
+    notificationCount: _notificationCount = 0,
     onUserClick,
-    onInboxClick,
+    onInboxClick: _onInboxClick,
     onNotificationClick,
     onHelpClick,
     onProfileClick,
@@ -153,7 +155,8 @@ export const TopNavigation: React.FC<TopNavigationProps> = ({
     const handleUserClick = () => {
         onUserClick?.()
     }
-    const handleNotificationClick = () => {
+    // @ts-ignore kept for future use
+    const _handleNotificationClick = () => {
         setIsNotificationActive(!isNotificationActive)
         onNotificationClick?.()
     }

package/src/v2/navigation/FigmasAdminSideBar/FigmasAdminSideBar.tsx

@@ -8,7 +8,7 @@ export interface FigmasAdminSideBarProps {
 
 export const FigmasAdminSideBar: React.FC<FigmasAdminSideBarProps> = ({
     expanded = true,
-    onToggle,
+    onToggle: _onToggle,
 }) => {
     const homeIcon = (
         <div className="figmas-admin-sidebar__icon">

package/src/v2/navigation/FigmasSideBar/FigmasSideBar.tsx

@@ -26,18 +26,20 @@ export const FigmasSideBar: React.FC<FigmasSideBarProps> = ({
     venueName = "Sharky's Soft Play",
     venueId = "123",
     venueImage,
-    onToggle,
+    onToggle: _onToggle,
     navigationItems,
-    onNavigation,
+    onNavigation: _onNavigation,
     activePath,
     authCredentials,
 }) => {
     // Filter navigation items based on auth if provided
-    const accessibleItems = authCredentials && navigationItems
+    // @ts-ignore kept for future use
+    const _accessibleItems = authCredentials && navigationItems
         ? navigationItems.filter(item => useCanAccess(authCredentials, item))
         : navigationItems || []
 
-    const isActive = (path: string) => activePath === path
+    // @ts-ignore kept for future use
+    const _isActive = (path: string) => activePath === path
     const icon = (
         <div className="figmas-sidebar__icon">
             <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">

package/src/v2/navigation/config.tsx

@@ -1,4 +1,3 @@
-import React from 'react'
 import type { NavigationItem } from '../types/navigation'
 
 // Icon components (these would be your actual icon imports)

package/src/v2/pages/SettingsSubPage/SettingsSubPage.scss

@@ -0,0 +1,43 @@
+.settings-sub-page {
+  display: flex;
+  flex-direction: column;
+  align-self: stretch;
+
+  &__back {
+    padding: 24px 32px 0 0;
+    align-self: flex-start;
+
+    .ghost-button {
+      color: var(--fill-action, #5D5BF4);
+      border-color: var(--borders-main-border-primary, #E8E9EF);
+
+      &:not(.active):hover:not(:disabled) {
+        background-color: var(--surface-action-soft, #F4F4FE);
+        color: var(--fill-action, #5D5BF4);
+      }
+
+      .ghost-button__icon svg {
+        width: 24px;
+        height: 24px;
+      }
+    }
+
+    @media (max-width: 768px) {
+      padding: 16px 16px 0 0;
+    }
+  }
+
+  &__content {
+    padding: 24px 0;
+
+    @media (max-width: 768px) {
+      padding: 0;
+    }
+  }
+
+  &__action {
+    margin-bottom: 16px;
+    display: flex;
+    justify-content: flex-end;
+  }
+}

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%;
+    }
+  }
+}