@licklist/design 0.78.44 → 0.78.46

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

@@ -53,6 +53,19 @@ export type { UserPanelProps } from './components/UserPanel'
 export { ZoneCard, ZoneContainer, ZoneHeader, ResourceRow, AddResourceButton } from './components/ZoneCard'
 export type { ZoneCardProps, ZoneResource, ZoneContainerProps, DragHandleProps, ZoneHeaderProps, ResourceRowProps, ResourceRowLabels, AddResourceButtonProps } from './components/ZoneCard'
 
+// SettingsSubPage (generic settings sub-page layout)
+export { SettingsSubPage } from './pages/SettingsSubPage'
+export type { SettingsSubPageProps } from './pages/SettingsSubPage'
+
+// ZonesResources Page (deprecated — use SettingsSubPage)
+// PeriodCard Component
+export { PeriodCard, PeriodCardSection, PeriodCardTimeRange } from './components/PeriodCard'
+export type { PeriodCardProps, PeriodCardValue, PeriodCardLabels, PeriodCardSectionProps, PeriodCardTimeRangeProps } from './components/PeriodCard'
+
+// ReorderRow Component
+export { ReorderRow } from './components/ReorderRow'
+export type { ReorderRowProps, DragHandleRenderProps } from './components/ReorderRow'
+
 // ZonesResources Page
 export { ZonesResourcesPage } from './pages/ZonesResources'
 export type { ZonesResourcesPageProps } from './pages/ZonesResources'
@@ -151,6 +164,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/DeleteEntity/DeleteEntityPage.scss

@@ -0,0 +1,96 @@
+.delete-entity-page {
+  padding: 0;
+
+  &__content {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    padding: 48px 32px;
+
+    @media (max-width: 768px) {
+      padding: 24px 16px;
+    }
+  }
+
+  &__inner {
+    display: flex;
+    flex-direction: column;
+    gap: 24px;
+    width: 100%;
+    max-width: 672px;
+  }
+
+  &__entity-name {
+    font-family: var(--font-family-sans, 'Geist', sans-serif);
+    font-size: 20px;
+    font-weight: 600;
+    line-height: 28px;
+    color: var(--label-primary, #121e52);
+    margin: 0;
+  }
+
+  &__warning-card {
+    display: flex;
+    flex-direction: column;
+    gap: 16px;
+    padding: 24px;
+    background: var(--surface-secondary, #f8f8fa);
+    border: 1px solid var(--border-primary, #e8e9ef);
+    border-radius: 8px;
+  }
+
+  &__warning-text {
+    font-family: var(--font-family-sans, 'Geist', sans-serif);
+    font-size: 14px;
+    font-weight: 600;
+    color: var(--label-status-error, #ef4444);
+    margin: 0;
+  }
+
+  &__warning-description {
+    font-family: var(--font-family-sans, 'Geist', sans-serif);
+    font-size: 14px;
+    color: var(--label-secondary, #626a90);
+    margin: 0;
+  }
+
+  &__consequences {
+    list-style: disc;
+    padding-left: 20px;
+    margin: 0;
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+
+    li {
+      font-family: var(--font-family-sans, 'Geist', sans-serif);
+      font-size: 14px;
+      color: var(--label-secondary, #626a90);
+    }
+  }
+
+  &__confirm-field {
+    display: flex;
+    flex-direction: column;
+    gap: var(--spacing-xs, 2px);
+  }
+
+  &__confirm-label {
+    font-family: var(--font-family-sans, 'Geist', sans-serif);
+    font-size: 14px;
+    font-weight: 500;
+    line-height: 20px;
+    color: var(--label-primary, #121e52);
+    margin: 0;
+
+    strong {
+      font-weight: 700;
+    }
+  }
+
+  &__confirm-error {
+    font-family: var(--font-family-sans, 'Geist', sans-serif);
+    font-size: 11px;
+    color: var(--label-status-error, #ef4444);
+  }
+}

package/src/v2/pages/DeleteEntity/DeleteEntityPage.stories.tsx

@@ -0,0 +1,83 @@
+import React from 'react'
+import type { Meta, StoryObj } from '@storybook/react'
+import { DeleteEntityPage } from './DeleteEntityPage'
+
+const meta: Meta<typeof DeleteEntityPage> = {
+  title: 'v2/Pages/DeleteEntity',
+  component: DeleteEntityPage,
+  parameters: { layout: 'fullscreen' },
+}
+
+export default meta
+type Story = StoryObj<typeof DeleteEntityPage>
+
+const baseArgs = {
+  confirmWord: 'DELETE',
+  warningTitle: 'This action cannot be undone',
+  confirmLabelPrefix: 'Type',
+  confirmLabelSuffix: 'to confirm deletion',
+  confirmErrorMessage: 'Please type DELETE to confirm.',
+  isDeleting: false,
+  onDelete: () => console.log('Delete confirmed'),
+  onCancel: () => console.log('Cancel'),
+}
+
+/**
+ * **Delete Zone** — confirmation page for deleting a zone.
+ *
+ * Lists the consequences of the action and requires the user to type
+ * the confirmation word before the destructive button is enabled.
+ */
+export const DeleteZone: Story = {
+  name: 'Delete Zone',
+  args: {
+    ...baseArgs,
+    title: 'Delete Zone',
+    entityName: 'Main Hall',
+    deleteButtonLabel: 'Delete Zone',
+    warningDescription:
+      'You are about to permanently delete the zone "Main Hall". This will:',
+    consequences: [
+      'Remove the zone from your venue layout',
+      'Delete all resources assigned to this zone',
+      'Cancel any future bookings linked to this zone',
+    ],
+  },
+}
+
+/**
+ * **Delete Special Hours** — confirmation page for removing a special hours schedule.
+ */
+export const DeleteSpecialHours: Story = {
+  name: 'Delete Special Hours',
+  args: {
+    ...baseArgs,
+    title: 'Delete Special Hours',
+    entityName: 'Christmas Closure',
+    deleteButtonLabel: 'Delete Schedule',
+    warningDescription:
+      'You are about to permanently delete the special hours schedule "Christmas Closure". This will:',
+    consequences: [
+      'Remove all date-specific overrides from this schedule',
+      'Restore your default opening hours for the affected dates',
+    ],
+  },
+}
+
+/**
+ * **Deleting** — destructive button shown in its loading state while the
+ * delete request is in flight.
+ */
+export const Deleting: Story = {
+  name: 'Deleting',
+  args: {
+    ...baseArgs,
+    title: 'Delete Zone',
+    entityName: 'Main Hall',
+    deleteButtonLabel: 'Delete Zone',
+    warningDescription:
+      'You are about to permanently delete the zone "Main Hall". This will:',
+    consequences: ['Remove the zone from your venue layout'],
+    isDeleting: true,
+  },
+}

package/src/v2/pages/DeleteEntity/DeleteEntityPage.tsx

@@ -0,0 +1,120 @@
+import { useState } from 'react'
+import { NewPageHeader } from '../../components/NewPageHeader'
+import { Button } from '../../components/Button/Button'
+import { NewInput } from '../../components/NewInput/NewInput'
+import './DeleteEntityPage.scss'
+
+export interface DeleteEntityPageProps {
+  /** Page title shown in the header (e.g. "Delete Zone") */
+  title: string
+  /** Name of the entity being deleted, displayed prominently */
+  entityName: string
+  /** Bullet list of consequences shown inside the warning card */
+  consequences: string[]
+  /** Label for the destructive action button */
+  deleteButtonLabel: string
+  /** Whether the delete request is in flight */
+  isDeleting: boolean
+  /** Word the user must type to confirm deletion (e.g. "DELETE") */
+  confirmWord: string
+  /** Heading inside the warning card (e.g. "This action cannot be undone") */
+  warningTitle: string
+  /** Description below the warning title */
+  warningDescription: string
+  /** Label above the confirmation input — `confirmWord` is rendered as <strong> */
+  confirmLabelPrefix: string
+  confirmLabelSuffix: string
+  /** Error message shown when the typed value does not match `confirmWord` */
+  confirmErrorMessage: string
+  onDelete: () => void | Promise<void>
+  onCancel: () => void
+}
+
+export function DeleteEntityPage({
+  title,
+  entityName,
+  consequences,
+  deleteButtonLabel,
+  isDeleting,
+  confirmWord,
+  warningTitle,
+  warningDescription,
+  confirmLabelPrefix,
+  confirmLabelSuffix,
+  confirmErrorMessage,
+  onDelete,
+  onCancel,
+}: DeleteEntityPageProps) {
+  const [confirmationInput, setConfirmationInput] = useState('')
+  const [confirmationError, setConfirmationError] = useState(false)
+
+  const handleDelete = async () => {
+    if (confirmationInput.toLowerCase() !== confirmWord.toLowerCase()) {
+      setConfirmationError(true)
+      return
+    }
+
+    await onDelete()
+  }
+
+  return (
+    <div className="delete-entity-page">
+      <NewPageHeader title={title} onCancel={onCancel} />
+      <div className="delete-entity-page__content">
+        <div className="delete-entity-page__inner">
+          <h2 className="delete-entity-page__entity-name">{entityName}</h2>
+
+          <div className="delete-entity-page__warning-card">
+            <p className="delete-entity-page__warning-text">{warningTitle}</p>
+            <p className="delete-entity-page__warning-description">
+              {warningDescription}
+            </p>
+            <ul className="delete-entity-page__consequences">
+              {consequences.map((item, i) => (
+                <li key={i}>{item}</li>
+              ))}
+            </ul>
+
+            <div className="delete-entity-page__confirm-field">
+              <p className="delete-entity-page__confirm-label">
+                {confirmLabelPrefix} <strong>{confirmWord}</strong>{' '}
+                {confirmLabelSuffix}
+              </p>
+              {confirmationError && (
+                <span className="delete-entity-page__confirm-error">
+                  {confirmErrorMessage}
+                </span>
+              )}
+              <NewInput
+                value={confirmationInput}
+                onChange={(e) => {
+                  setConfirmationInput(
+                    (e.target as HTMLInputElement).value,
+                  )
+                  setConfirmationError(false)
+                }}
+                error={confirmationError ? ' ' : undefined}
+              />
+            </div>
+          </div>
+
+          <div>
+            <Button
+              variant="destructive-strong"
+              onClick={handleDelete}
+              disabled={isDeleting}
+              isLoading={isDeleting}
+              style={{
+                background: 'var(--fills-main-fill-danger, #cc3c35)',
+              }}
+            >
+              {deleteButtonLabel}
+            </Button>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default DeleteEntityPage

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

@@ -0,0 +1,2 @@
+export { DeleteEntityPage } from './DeleteEntityPage'
+export type { DeleteEntityPageProps } from './DeleteEntityPage'

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'