@licklist/design 0.78.34 → 0.78.36

package/src/v2/components/ZoneCard/ZoneCard.stories.tsx

@@ -0,0 +1,137 @@
+import React from 'react'
+import { Meta, StoryObj } from '@storybook/react'
+import { ZoneCard } from './ZoneCard'
+import { ZoneContainer } from './ZoneContainer'
+import { ZoneHeader } from './ZoneHeader'
+import { ResourceRow } from './ResourceRow'
+import { AddResourceButton } from './AddResourceButton'
+
+export default {
+  title: 'v2/Components/ZoneCard',
+  component: ZoneCard,
+  parameters: {
+    layout: 'padded',
+  },
+} as Meta<typeof ZoneCard>
+
+type Story = StoryObj<typeof ZoneCard>
+
+const zoneMenuItems = [
+  { label: 'Edit Zone', onClick: () => alert('Edit Zone') },
+  { label: 'Delete Zone', onClick: () => alert('Delete Zone'), variant: 'danger' as const },
+]
+
+const resourceMenuItems = [
+  { label: 'Edit Resource', onClick: () => alert('Edit Resource') },
+  { label: 'Delete Resource', onClick: () => alert('Delete Resource'), variant: 'danger' as const },
+]
+
+// Composed ZoneCard (all-in-one)
+export const Default: Story = {
+  args: {
+    name: 'Bowling',
+
+    totalCapacity: 2,
+    menuItems: zoneMenuItems,
+    onAddResource: () => alert('Add Resource'),
+    resources: [
+      { id: '1', name: 'Table', quantity: 1, capacity: 1, menuItems: resourceMenuItems },
+      { id: '2', name: 'Lane', quantity: 1, capacity: 1, menuItems: resourceMenuItems },
+    ],
+  },
+}
+
+export const EmptyZone: Story = {
+  args: {
+    name: 'VIP Lounge',
+    totalCapacity: 0,
+    menuItems: zoneMenuItems,
+    onAddResource: () => alert('Add Resource'),
+    resources: [],
+  },
+}
+
+// Individual components composed manually
+export const ComposedManually: Story = {
+  render: () => (
+    <ZoneContainer>
+      <ZoneHeader
+        name="Bowling"
+        totalCapacity={2}
+        menuItems={zoneMenuItems}
+      />
+      <ResourceRow
+        name="Table"
+        quantity={1}
+        capacity={1}
+        menuItems={resourceMenuItems}
+        onClick={() => alert('Edit Table')}
+      />
+      <ResourceRow
+        name="Lane"
+        quantity={1}
+        capacity={1}
+        menuItems={resourceMenuItems}
+        onClick={() => alert('Edit Lane')}
+      />
+      <AddResourceButton onClick={() => alert('Add Resource')} />
+    </ZoneContainer>
+  ),
+}
+
+// Standalone ZoneHeader
+export const StandaloneHeader: Story = {
+  render: () => (
+    <ZoneContainer>
+      <ZoneHeader
+        name="Main Floor"
+        totalCapacity={50}
+        menuItems={zoneMenuItems}
+      />
+    </ZoneContainer>
+  ),
+}
+
+// Standalone ResourceRow
+export const StandaloneResource: Story = {
+  render: () => (
+    <ZoneContainer>
+      <ResourceRow
+        name="Table"
+        quantity={10}
+        capacity={4}
+        menuItems={resourceMenuItems}
+        onClick={() => alert('Edit Table')}
+      />
+    </ZoneContainer>
+  ),
+}
+
+// Multiple zones
+export const MultipleZones: Story = {
+  render: () => (
+    <div style={{ display: 'flex', flexDirection: 'column', gap: '12px' }}>
+      <ZoneCard
+        name="Bowling"
+        status="active"
+        totalCapacity={2}
+        menuItems={zoneMenuItems}
+        onAddResource={() => alert('Add Resource')}
+        resources={[
+          { id: '1', name: 'Table', quantity: 1, capacity: 1, menuItems: resourceMenuItems },
+          { id: '2', name: 'Lane', quantity: 1, capacity: 1, menuItems: resourceMenuItems },
+        ]}
+      />
+      <ZoneCard
+        name="VIP Lounge"
+        status="active"
+        totalCapacity={20}
+        menuItems={zoneMenuItems}
+        onAddResource={() => alert('Add Resource')}
+        resources={[
+          { id: '3', name: 'Sofa', quantity: 4, capacity: 5, menuItems: resourceMenuItems },
+        ]}
+      />
+    </div>
+  ),
+}

package/src/v2/components/ZoneCard/ZoneCard.tsx

@@ -0,0 +1,69 @@
+import React from 'react'
+import { ActionMenuItem } from '../ActionMenu'
+import { ZoneContainer } from './ZoneContainer'
+import { ZoneHeader } from './ZoneHeader'
+import { ResourceRow } from './ResourceRow'
+import { AddResourceButton } from './AddResourceButton'
+import { DragHandleProps } from './ZoneContainer'
+
+export interface ZoneResource {
+  id: string
+  name: string
+  quantity: number
+  capacity: number
+  menuItems?: ActionMenuItem[]
+  dragHandleProps?: DragHandleProps
+}
+
+export interface ZoneCardProps {
+  name: string
+  totalCapacity: number
+  resources?: ZoneResource[]
+  menuItems?: ActionMenuItem[]
+  onAddResource?: () => void
+  className?: string
+  draggable?: boolean
+  onResourceClick?: (resource: ZoneResource) => void
+  dragHandleProps?: DragHandleProps
+  style?: React.CSSProperties
+}
+
+export const ZoneCard = React.forwardRef<HTMLDivElement, ZoneCardProps>(({
+  name,
+  totalCapacity,
+  resources = [],
+  menuItems = [],
+  onAddResource,
+  className = '',
+  draggable = true,
+  onResourceClick,
+  dragHandleProps,
+  style,
+}, ref) => {
+  return (
+    <ZoneContainer ref={ref} className={className} style={style}>
+      <ZoneHeader
+        name={name}
+        totalCapacity={totalCapacity}
+        menuItems={menuItems}
+        draggable={draggable}
+        dragHandleProps={dragHandleProps}
+      />
+      {resources.map((resource) => (
+        <ResourceRow
+          key={resource.id}
+          name={resource.name}
+          quantity={resource.quantity}
+          capacity={resource.capacity}
+          menuItems={resource.menuItems}
+          draggable={draggable}
+          dragHandleProps={resource.dragHandleProps}
+          onClick={onResourceClick ? () => onResourceClick(resource) : undefined}
+        />
+      ))}
+      {onAddResource && <AddResourceButton onClick={onAddResource} />}
+    </ZoneContainer>
+  )
+})
+
+ZoneCard.displayName = 'ZoneCard'

package/src/v2/components/ZoneCard/ZoneContainer.tsx

@@ -0,0 +1,26 @@
+import React from 'react'
+import './ZoneCard.scss'
+
+export interface DragHandleProps {
+  [key: string]: unknown
+}
+
+export interface ZoneContainerProps {
+  children: React.ReactNode
+  className?: string
+  style?: React.CSSProperties
+}
+
+export const ZoneContainer = React.forwardRef<HTMLDivElement, ZoneContainerProps>(({
+  children,
+  className = '',
+  style,
+}, ref) => {
+  return (
+    <div ref={ref} className={`zone-card ${className}`} style={style}>
+      {children}
+    </div>
+  )
+})
+
+ZoneContainer.displayName = 'ZoneContainer'

package/src/v2/components/ZoneCard/ZoneHeader.tsx

@@ -0,0 +1,84 @@
+import React from 'react'
+import { ActionMenu, ActionMenuItem } from '../ActionMenu'
+import { GripVerticalIcon, ArrowUpIcon, ArrowDownIcon } from '../../icons'
+import { DragHandleProps } from './ZoneContainer'
+import './ZoneCard.scss'
+
+export interface ZoneHeaderProps {
+  name: string
+  totalCapacity: number
+  totalLabel?: string
+  menuItems?: ActionMenuItem[]
+  draggable?: boolean
+  dragHandleProps?: DragHandleProps
+  className?: string
+  isMobile?: boolean
+  isFirst?: boolean
+  isLast?: boolean
+  onMoveUp?: () => void
+  onMoveDown?: () => void
+}
+
+export const ZoneHeader: React.FC<ZoneHeaderProps> = ({
+  name,
+  totalCapacity,
+  totalLabel = 'Total',
+  menuItems = [],
+  draggable = true,
+  dragHandleProps,
+  className = '',
+  isMobile = false,
+  isFirst = false,
+  isLast = false,
+  onMoveUp,
+  onMoveDown,
+}) => {
+  return (
+    <div className={`zone-card__header ${className}`}>
+      {draggable && !isMobile && (
+        <div className="zone-card__drag-handle" {...dragHandleProps}>
+          {GripVerticalIcon({ width: 20, height: 20 })}
+        </div>
+      )}
+      {draggable && isMobile && (
+        <div className="zone-card__reorder-arrows">
+          <button
+            className="zone-card__arrow-btn"
+            disabled={isFirst}
+            onClick={(e) => { e.stopPropagation(); onMoveUp?.() }}
+          >
+            <ArrowUpIcon />
+          </button>
+          <button
+            className="zone-card__arrow-btn"
+            disabled={isLast}
+            onClick={(e) => { e.stopPropagation(); onMoveDown?.() }}
+          >
+            <ArrowDownIcon />
+          </button>
+        </div>
+      )}
+      {isMobile ? (
+        <>
+          <div className="zone-card__header-info">
+            <span className="zone-card__name">{name}</span>
+            <span className="zone-card__total">{totalLabel}: {totalCapacity}</span>
+          </div>
+          {menuItems.length > 0 && (
+            <div className="zone-card__header-right">
+              <ActionMenu items={menuItems} />
+            </div>
+          )}
+        </>
+      ) : (
+        <>
+          <span className="zone-card__name">{name}</span>
+          <div className="zone-card__header-right">
+            <span className="zone-card__total">{totalLabel}: {totalCapacity}</span>
+            {menuItems.length > 0 && <ActionMenu items={menuItems} />}
+          </div>
+        </>
+      )}
+    </div>
+  )
+}

package/src/v2/components/ZoneCard/index.ts

@@ -0,0 +1,14 @@
+export { ZoneCard } from './ZoneCard'
+export type { ZoneCardProps, ZoneResource } from './ZoneCard'
+
+export { ZoneContainer } from './ZoneContainer'
+export type { ZoneContainerProps, DragHandleProps } from './ZoneContainer'
+
+export { ZoneHeader } from './ZoneHeader'
+export type { ZoneHeaderProps } from './ZoneHeader'
+
+export { ResourceRow } from './ResourceRow'
+export type { ResourceRowProps, ResourceRowLabels } from './ResourceRow'
+
+export { AddResourceButton } from './AddResourceButton'
+export type { AddResourceButtonProps } from './AddResourceButton'

package/src/v2/components/index.ts

@@ -1,3 +1,6 @@
+export { IconButton } from './IconButton'
+export type { IconButtonProps } from './IconButton'
+
 export { Badge } from './Badge'
 export type { BadgeProps } from './Badge'
 
@@ -58,9 +61,14 @@ export { NPSScore } from './NPSScore'
 export { Pagination } from './Pagination'
 export type { PaginationProps } from './Pagination'
 
+export { ZoneCard, ZoneContainer, ZoneHeader, ResourceRow, AddResourceButton } from './ZoneCard'
+export type { ZoneCardProps, ZoneResource, ZoneContainerProps, DragHandleProps, ZoneHeaderProps, ResourceRowProps, AddResourceButtonProps } from './ZoneCard'
+
 // Icons
 export {
   InfoIcon,
+  TableHeaderArrowUpIcon,
+  TableHeaderArrowDownIcon,
   ArrowUpIcon,
   ArrowDownIcon,
   EditIcon,
@@ -74,6 +82,10 @@ export {
   ClearIcon,
   CloseIcon,
   EllipsisIcon,
-  CircleIcon
+  CircleIcon,
+  GripVerticalIcon,
+  PlusIcon,
+  DeleteIcon,
+  ClockIcon
 } from '../icons'
 

package/src/v2/icons/index.tsx

@@ -114,19 +114,19 @@ export const CalendarSmallIcon = () => (
 
 export const SearchIcon = () => (
     <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 22 22" fill="none">
-        <path d="M14.6593 13.7979L17.2683 16.4068L16.4068 17.2684L13.7978 14.6594C12.8597 15.4099 11.67 15.8589 10.3761 15.8589C7.34958 15.8589 4.89331 13.4026 4.89331 10.3761C4.89331 7.34965 7.34958 4.89337 10.3761 4.89337C13.4025 4.89337 15.8588 7.34965 15.8588 10.3761C15.8588 11.6701 15.4098 12.8598 14.6593 13.7979ZM13.4371 13.3458C14.182 12.5781 14.6404 11.5309 14.6404 10.3761C14.6404 8.02006 12.7321 6.11176 10.3761 6.11176C8.02 6.11176 6.1117 8.02006 6.1117 10.3761C6.1117 12.7322 8.02 14.6405 10.3761 14.6405C11.5309 14.6405 12.5781 14.1821 13.3458 13.4371L13.4371 13.3458Z" fill="#626A90"/>
+        <path d="M14.6593 13.7979L17.2683 16.4068L16.4068 17.2684L13.7978 14.6594C12.8597 15.4099 11.67 15.8589 10.3761 15.8589C7.34958 15.8589 4.89331 13.4026 4.89331 10.3761C4.89331 7.34965 7.34958 4.89337 10.3761 4.89337C13.4025 4.89337 15.8588 7.34965 15.8588 10.3761C15.8588 11.6701 15.4098 12.8598 14.6593 13.7979ZM13.4371 13.3458C14.182 12.5781 14.6404 11.5309 14.6404 10.3761C14.6404 8.02006 12.7321 6.11176 10.3761 6.11176C8.02 6.11176 6.1117 8.02006 6.1117 10.3761C6.1117 12.7322 8.02 14.6405 10.3761 14.6405C11.5309 14.6405 12.5781 14.1821 13.3458 13.4371L13.4371 13.3458Z" fill="currentColor"/>
     </svg>
 )
 
 export const RefreshIcon = ({ width = 24, height = 24 }: React.SVGProps<SVGSVGElement> & { width?: number; height?: number } = {}) => (
     <svg xmlns="http://www.w3.org/2000/svg" width={width} height={height} viewBox="0 0 24 24" fill="none">
-        <path d="M7.09693 6.32447C8.41167 5.18766 10.1255 4.5 12 4.5C16.1421 4.5 19.5 7.85786 19.5 12C19.5 13.6021 18.9976 15.0869 18.1419 16.3055L15.75 12H18C18 8.68629 15.3137 6 12 6C10.3874 6 8.92333 6.6362 7.84517 7.67131L7.09693 6.32447ZM16.903 17.6755C15.5883 18.8123 13.8745 19.5 12 19.5C7.85786 19.5 4.5 16.1421 4.5 12C4.5 10.3979 5.00234 8.91312 5.8581 7.69458L8.25 12H6C6 15.3137 8.68629 18 12 18C13.6126 18 15.0767 17.3638 16.1549 16.3287L16.903 17.6755Z" fill="#14215A"/>
+        <path d="M7.09693 6.32447C8.41167 5.18766 10.1255 4.5 12 4.5C16.1421 4.5 19.5 7.85786 19.5 12C19.5 13.6021 18.9976 15.0869 18.1419 16.3055L15.75 12H18C18 8.68629 15.3137 6 12 6C10.3874 6 8.92333 6.6362 7.84517 7.67131L7.09693 6.32447ZM16.903 17.6755C15.5883 18.8123 13.8745 19.5 12 19.5C7.85786 19.5 4.5 16.1421 4.5 12C4.5 10.3979 5.00234 8.91312 5.8581 7.69458L8.25 12H6C6 15.3137 8.68629 18 12 18C13.6126 18 15.0767 17.3638 16.1549 16.3287L16.903 17.6755Z" fill="currentColor"/>
     </svg>
 )
 
 export const SendIcon = ({ width = 24, height = 24 }: React.SVGProps<SVGSVGElement> & { width?: number; height?: number } = {}) => (
     <svg xmlns="http://www.w3.org/2000/svg" width={width} height={height} viewBox="0 0 24 24" fill="none">
-        <path d="M18 6C18.4142 6 18.75 6.33579 18.75 6.75V12.75H17.25V9.17871L11.3037 14.5039L5.25 9.16211V17.25H18V18.75H4.5C4.08579 18.75 3.75 18.4142 3.75 18V6.75C3.75 6.33579 4.08579 6 4.5 6H18ZM24 15L20.25 18V15.75H15V14.25H20.25V12L24 15ZM11.2969 12.4961L16.876 7.5H5.63379L11.2969 12.4961Z" fill="black"/>
+        <path d="M18 6C18.4142 6 18.75 6.33579 18.75 6.75V12.75H17.25V9.17871L11.3037 14.5039L5.25 9.16211V17.25H18V18.75H4.5C4.08579 18.75 3.75 18.4142 3.75 18V6.75C3.75 6.33579 4.08579 6 4.5 6H18ZM24 15L20.25 18V15.75H15V14.25H20.25V12L24 15ZM11.2969 12.4961L16.876 7.5H5.63379L11.2969 12.4961Z" fill="currentColor"/>
     </svg>
 )
 
@@ -181,15 +181,39 @@ export const InfoIcon = ({ width = 16, height = 16 }: { width?: number; height?:
     </svg>
 )
 
-export const ArrowUpIcon = () => (
-    <svg width="11" height="6" viewBox="0 0 11 6" fill="none" xmlns="http://www.w3.org/2000/svg">
-        <path d="M10 5L5.5 1L1 5" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
+export const TableHeaderArrowUpIcon = () => (
+  <svg width="11" height="6" viewBox="0 0 11 6" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M10 5L5.5 1L1 5" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
+  </svg>
+)
+
+export const TableHeaderArrowDownIcon = () => (
+  <svg width="11" height="6" viewBox="0 0 11 6" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M1 1L5.5 5L10 1" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
+  </svg>
+)
+
+export const ArrowUpIcon = ({ width = 20, height = 20 }: { 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="M14.9999 11.8283L9.63589 17.1923L8.22168 15.7781L15.9999 7.99988L23.778 15.7781L22.3638 17.1923L16.9999 11.8283L16.9999 23.9999L14.9999 23.9999L14.9999 11.8283Z" fill="currentColor" />
     </svg>
 )
 
-export const ArrowDownIcon = () => (
-    <svg width="11" height="6" viewBox="0 0 11 6" fill="none" xmlns="http://www.w3.org/2000/svg">
-        <path d="M1 1L5.5 5L10 1" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
+export const ArrowDownIcon = ({ width = 20, height = 20 }: { 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="M16.9999 20.1715L22.3639 14.8075L23.7781 16.2217L15.9999 23.9999L8.22176 16.2217L9.63596 14.8075L14.9999 20.1715L14.9999 7.99988L16.9999 7.99988L16.9999 20.1715Z" fill="currentColor" />
+    </svg>
+)
+
+export const GripVerticalIcon = ({ 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="M13 20C14.1046 20 15 20.8954 15 22C15 23.1046 14.1046 24 13 24C11.8954 24 11 23.1046 11 22C11 20.8954 11.8954 20 13 20ZM19 20C20.1046 20 21 20.8954 21 22C21 23.1046 20.1046 24 19 24C17.8954 24 17 23.1046 17 22C17 20.8954 17.8954 20 19 20ZM13 14C14.1046 14 15 14.8954 15 16C15 17.1046 14.1046 18 13 18C11.8954 18 11 17.1046 11 16C11 14.8954 11.8954 14 13 14ZM19 14C20.1046 14 21 14.8954 21 16C21 17.1046 20.1046 18 19 18C17.8954 18 17 17.1046 17 16C17 14.8954 17.8954 14 19 14ZM13 8C14.1046 8 15 8.89543 15 10C15 11.1046 14.1046 12 13 12C11.8954 12 11 11.1046 11 10C11 8.89543 11.8954 8 13 8ZM19 8C20.1046 8 21 8.89543 21 10C21 11.1046 20.1046 12 19 12C17.8954 12 17 11.1046 17 10C17 8.89543 17.8954 8 19 8Z" fill="currentColor"/>
+    </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"/>
     </svg>
 )
 
@@ -207,11 +231,9 @@ export const CloseIcon = ({width = 24, height = 24, ...props
   </svg>
 )
 
-export const EllipsisIcon = ({ width = 32, height = 32, fill = 'black', ...props }: React.SVGProps<SVGSVGElement> & { width?: number; height?: number; fill?: string } = {}) => (
-  <svg width={width} height={height} viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
-    <circle cx="8" cy="16" r="3" fill={fill} />
-    <circle cx="16" cy="16" r="3" fill={fill} />
-    <circle cx="24" cy="16" r="3" fill={fill} />
+export const EllipsisIcon = ({ width = 18, height = 4, fill = 'currentColor', ...props }: React.SVGProps<SVGSVGElement> & { width?: number; height?: number; fill?: string } = {}) => (
+  <svg width={width} height={height} viewBox="0 0 18 4" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+    <path d="M2 0C3.10457 0 4 0.895431 4 2C4 3.10457 3.10457 4 2 4C0.895431 4 0 3.10457 0 2C0 0.895431 0.895431 0 2 0ZM9 0C10.1046 0 11 0.895431 11 2C11 3.10457 10.1046 4 9 4C7.89543 4 7 3.10457 7 2C7 0.895431 7.89543 0 9 0ZM16 0C17.1046 0 18 0.895431 18 2C18 3.10457 17.1046 4 16 4C14.8954 4 14 3.10457 14 2C14 0.895431 14.8954 0 16 0Z" fill={fill} />
   </svg>
 )
 
@@ -221,5 +243,116 @@ export const CircleIcon = ({ width = 32, height = 32, fill = 'var(--surface-acti
   </svg>
 )
 
+export const SecurityIcon = () => (
+  <svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M8 8L16 6.5V25.5L11 22.5L8 19.5V8Z" fill="currentColor" fillOpacity="0.1"/>
+    <path d="M16 5L24.2169 6.82598C24.6745 6.92766 25 7.33347 25 7.80217V17.7889C25 19.795 23.9974 21.6684 22.3282 22.7812L16 27L9.6718 22.7812C8.00261 21.6684 7 19.795 7 17.7889V7.80217C7 7.33347 7.32553 6.92766 7.78307 6.82598L16 5ZM16 7.04879L9 8.60434V17.7889C9 19.1263 9.6684 20.3752 10.7812 21.1171L16 24.5963L21.2188 21.1171C22.3316 20.3752 23 19.1263 23 17.7889V8.60434L16 7.04879ZM16 11C17.1046 11 18 11.8954 18 13C18 13.7398 17.5983 14.3858 17.0011 14.7318L17 19H15L14.9999 14.7324C14.4022 14.3866 14 13.7402 14 13C14 11.8954 14.8954 11 16 11Z" fill="currentColor"/>
+  </svg>
+)
 
+export const NewPasswordIcon = () => (
+  <svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M8 8L16 6.5V25.5L11 22.5L8 19.5V8Z" fill="currentColor" fillOpacity="0.1"/>
+    <path d="M23.4648 20.9775L26.751 21.4551L24.373 23.7725L24.9346 27.0449L21.9951 25.5L19.0566 27.0449L19.6182 23.7725L17.2402 21.4551L20.5254 20.9775L21.9951 18L23.4648 20.9775ZM24.2168 6.82617C24.6743 6.92782 24.9998 7.33323 25 7.80176V17.7891C25 18.2541 24.9434 18.7114 24.8398 19.1543L24.7979 19.1484L23 15.5059V8.60449L16 7.04883L9 8.60449V17.7891C9.00005 19.1264 9.66849 20.3753 10.7812 21.1172L16 24.5967L16.9512 23.9619L17.4727 24.4707L17.1729 26.2168L16 27L9.67188 22.7812C8.00273 21.6685 7.00005 19.7951 7 17.7891V7.80176C7.00019 7.33323 7.3258 6.92782 7.7832 6.82617L16 5L24.2168 6.82617ZM16 11C17.1046 11 18 11.8954 18 13C18 13.7398 17.5981 14.3854 17.001 14.7314L17 19H15V14.7324C14.4023 14.3866 14 13.7402 14 13C14 11.8954 14.8954 11 16 11Z" fill="currentColor"/>
+  </svg>
+)
 
+export const PasswordRequirementIcon = ({ met, visible = true }: { met: boolean; visible?: boolean }) => (
+  <svg
+    width="16"
+    height="16"
+    viewBox="0 0 16 16"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    className={`auth-create-password__requirement-icon auth-create-password__requirement-icon--${!visible ? 'neutral' : met ? 'met' : 'unmet'}`}
+    aria-hidden="true"
+  >
+    {visible && met ? (
+      <path
+        d="M8 1.333A6.667 6.667 0 1 0 8 14.667 6.667 6.667 0 0 0 8 1.333zm-1.333 9.724L4 8.39l.943-.943 1.724 1.724 3.723-3.724.944.943-4.667 4.667z"
+        fill="currentColor"
+      />
+    ) : (
+      <path
+        d="M8 1.333A6.667 6.667 0 1 0 8 14.667 6.667 6.667 0 0 0 8 1.333zm.667 10H7.333V10h1.334v1.333zm0-2.666H7.333V4.667h1.334v4z"
+        fill="currentColor"
+      />
+    )}
+  </svg>
+)
+
+export const VerifyEmailIcon = () => (
+  <svg width="64" height="64" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M7 8H25C25.5523 8 26 8.44772 26 9V24C26 24.5523 25.5523 25 25 25H7C6.44772 25 6 24.5523 6 24V9C6 8.44772 6.44772 8 7 8ZM24 12.2379L16.0718 19.338L8 12.2159V23H24V12.2379ZM8.51146 10L16.0619 16.662L23.501 10H8.51146Z" fill="currentColor" />
+  </svg>
+)
+
+export const PasswordTypeIcon = () => (
+  <svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M8 8L16 6.5V25.5L11 22.5L8 19.5V8Z" fill="currentColor" fillOpacity="0.1"/>
+    <path d="M16 7.04883L9 8.60449V17.7891C9.00005 19.1264 9.66849 20.3753 10.7812 21.1172L16 24.5967L21.2188 21.1172C22.3315 20.3753 22.9999 19.1264 23 17.7891V10.9619C23.1634 10.9854 23.3301 11 23.5 11C24.0368 11 24.5454 10.8791 25 10.6631V17.7891C24.9999 19.7951 23.9973 21.6685 22.3281 22.7812L16 27L9.67188 22.7812C8.00273 21.6685 7.00005 19.7951 7 17.7891V7.80176C7.00019 7.33323 7.3258 6.92782 7.7832 6.82617L16 5V7.04883ZM16 11C17.1046 11 18 11.8954 18 13C18 13.7398 17.5981 14.3854 17.001 14.7314L17 19H15V14.7324C14.4023 14.3866 14 13.7402 14 13C14 11.8954 14.8954 11 16 11ZM19.5 6C20.3284 6 21 6.67157 21 7.5C21 8.32843 20.3284 9 19.5 9C18.6716 9 18 8.32843 18 7.5C18 6.67157 18.6716 6 19.5 6ZM23.5 6C24.3284 6 25 6.67157 25 7.5C25 8.32843 24.3284 9 23.5 9C22.6716 9 22 8.32843 22 7.5C22 6.67157 22.6716 6 23.5 6ZM27.5 6C28.3284 6 29 6.67157 29 7.5C29 8.32843 28.3284 9 27.5 9C26.6716 9 26 8.32843 26 7.5C26 6.67157 26.6716 6 27.5 6Z" fill="currentColor"/>
+  </svg>
+)
+
+export const BookedLogo = () => (
+  <svg
+    width="98"
+    height="25"
+    viewBox="0 0 98 25"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    aria-label="Booked it"
+  >
+    <defs>
+      <linearGradient id="auth-logo-gradient" x1="4.50024" y1="17" x2="21.0002" y2="9.5" gradientUnits="userSpaceOnUse">
+        <stop stopColor="var(--gradient-stop1)" />
+        <stop offset="0.5" stopColor="var(--gradient-stop2)" />
+        <stop offset="1" stopColor="var(--gradient-stop3)" />
+      </linearGradient>
+    </defs>
+    <path
+      d="M7.5265 4.86842C9.1925 3.17961 9.9701 2.74305 10.9049 2.45584C11.8397 2.16862 12.7957 2.16862 13.7305 2.45584C14.6653 2.74305 15.4429 3.17961 17.1089 4.86842L19.8327 7.62955C21.4987 9.31836 21.9294 10.1066 22.2127 11.0542C22.496 12.0018 22.496 12.9709 22.2127 13.9185C21.9294 14.8661 21.4987 15.6543 19.8327 17.3431L17.1089 20.1042C15.4429 21.793 14.6653 22.2296 13.7305 22.5168C12.7957 22.804 11.8397 22.804 10.9049 22.5168C9.9701 22.2296 9.1925 21.793 7.5265 20.1042L4.80266 17.3431C3.13666 15.6543 2.70599 14.8661 2.42266 13.9185C2.13933 12.9709 2.13933 12.0018 2.42266 11.0542C2.70599 10.1066 3.13666 9.31836 4.80266 7.62955L7.5265 4.86842ZM9.02372 6.30766L6.26118 9.10803C4.96243 10.4246 4.6069 10.9575 4.39663 11.6607C4.23154 12.2128 4.23154 12.7598 4.39663 13.312C4.6048 14.0082 4.95534 14.5374 6.22249 15.8254L9.02375 18.665C10.2943 19.9495 10.8164 20.3048 11.5032 20.5158C12.0479 20.6832 12.5875 20.6832 13.1322 20.5158C13.8259 20.3027 14.3516 19.9423 15.6504 18.6258L18.3742 15.8646C19.6729 14.5481 20.0285 14.0152 20.2387 13.312C20.4038 12.7598 20.4038 12.2128 20.2387 11.6607C20.0285 10.9575 19.6729 10.4246 18.3742 9.10803L15.6504 6.3469C14.3516 5.03038 13.8259 4.66998 13.1322 4.45683C12.5875 4.28948 12.0479 4.28948 11.5032 4.45683C10.8164 4.66784 10.2943 5.02318 9.02372 6.30766ZM15.8147 11.4923C16.3685 10.9309 17.2664 10.9309 17.8202 11.4923C18.3739 12.0537 18.374 12.9638 17.8202 13.5252L13.3535 18.0531C12.7997 18.6144 11.9018 18.6144 11.348 18.0531L10.6958 17.392C10.5739 17.2684 10.5424 17.2107 10.5217 17.1414C10.501 17.0721 10.501 17.0011 10.5217 16.9318C10.5424 16.8625 10.5739 16.8048 10.6958 16.6812L15.8147 11.4923ZM8.35774 14.0054C8.49112 13.8702 8.67213 13.7944 8.86075 13.7949L11.4696 13.801C11.612 13.8013 11.7272 13.9186 11.7268 14.063C11.7267 14.1307 11.7006 14.1958 11.654 14.2444L11.5164 14.3881L9.88948 16.0226C9.73826 16.1745 9.49432 16.174 9.34376 16.0214L8.35774 15.0219C8.08085 14.7412 8.08085 14.2861 8.35774 14.0054Z"
+      fill="url(#auth-logo-gradient)"
+    />
+    <path
+      d="M40.7292 9.05655C42.0233 9.05655 43.0329 9.39581 43.7581 10.0743C44.4832 10.7529 44.8458 11.6859 44.8458 12.8733V14.6545C44.8458 15.8984 44.4804 16.8795 43.7497 17.5976C43.019 18.3157 42.0121 18.6748 40.7292 18.6748C39.4462 18.6748 38.4394 18.3355 37.7086 17.657C36.9779 16.9784 36.6125 16.0454 36.6125 14.858V13.0769C36.6125 11.8329 36.9779 10.8518 37.7086 10.1337C38.4394 9.4156 39.4462 9.05655 40.7292 9.05655ZM49.8828 9.05655C51.1769 9.05655 52.1865 9.39581 52.9117 10.0743C53.6368 10.7529 53.9994 11.6859 53.9994 12.8733V14.6545C53.9994 15.8984 53.6341 16.8795 52.9033 17.5976C52.1726 18.3157 51.1658 18.6748 49.8828 18.6748C48.5998 18.6748 47.593 18.3355 46.8623 17.657C46.1315 16.9784 45.7662 16.0454 45.7662 14.858V13.0769C45.7662 11.8329 46.1315 10.8518 46.8623 10.1337C47.593 9.4156 48.5998 9.05655 49.8828 9.05655ZM67.9725 9.05655C69.1662 9.05655 70.1201 9.40995 70.8341 10.1168C71.5481 10.8236 71.9051 11.8329 71.9051 13.1447V13.942C71.9051 14.2134 71.8576 14.3887 71.7628 14.4679C71.668 14.547 71.4755 14.5866 71.1855 14.5866H66.5166V14.6545C66.5166 15.3217 66.6226 15.8051 66.8346 16.1048C67.0466 16.4045 67.4537 16.5543 68.0562 16.5543C68.3462 16.5543 68.5889 16.5148 68.7841 16.4356C68.9794 16.3564 69.1383 16.1981 69.261 15.9606C69.3168 15.8475 69.3866 15.7627 69.4702 15.7062C69.5539 15.6496 69.7017 15.6214 69.9137 15.6214H71.219C71.4421 15.6214 71.5927 15.6638 71.6708 15.7486C71.7489 15.8334 71.7879 15.9663 71.7879 16.1472C71.7879 16.396 71.7294 16.6363 71.6122 16.8682C71.4951 17.1 71.364 17.3007 71.219 17.4704C70.862 17.8888 70.3906 18.1941 69.8049 18.3864C69.2192 18.5786 68.5973 18.6748 67.939 18.6748C66.6449 18.6748 65.6465 18.344 64.9436 17.6824C64.2408 17.0208 63.8894 16.0341 63.8894 14.7223V13.1108C63.8894 11.8329 64.2491 10.8377 64.9687 10.1252C65.6883 9.41278 66.6896 9.05655 67.9725 9.05655ZM80.2554 6.35938C80.5455 6.35938 80.7379 6.40178 80.8328 6.4866C80.9276 6.57142 80.975 6.74388 80.975 7.00398V14.841C80.975 16.0285 80.6041 16.9643 79.8622 17.6485C79.1203 18.3327 78.1023 18.6748 76.8082 18.6748C75.5364 18.6748 74.5407 18.3327 73.8211 17.6485C73.1016 16.9643 72.7418 16.0115 72.7418 14.7902V12.9412C72.7418 11.7424 73.0541 10.7953 73.6789 10.0998C74.3036 9.40429 75.1571 9.05655 76.2392 9.05655C77.1652 9.05655 77.8569 9.28838 78.3143 9.75204V7.00398C78.3143 6.74388 78.3617 6.57142 78.4565 6.4866C78.5513 6.40178 78.7438 6.35938 79.0338 6.35938H80.2554ZM91.3366 6.82054C91.6267 6.82054 91.8191 6.86294 91.9139 6.94776C92.0088 7.03258 92.0562 7.20504 92.0562 7.46514V9.31415H93.2778C93.5344 9.31415 93.7073 9.35656 93.7966 9.44137C93.8858 9.52619 93.9304 9.68734 93.9304 9.92483V10.773C93.9304 11.0331 93.8858 11.2084 93.7966 11.2989C93.7073 11.3893 93.5344 11.4346 93.2778 11.4346H92.0562V14.9969C92.0562 15.404 92.1231 15.698 92.257 15.879C92.3909 16.0599 92.614 16.1504 92.9264 16.1504H93.2109C93.4898 16.1504 93.6738 16.1928 93.7631 16.2776C93.8523 16.3624 93.897 16.5349 93.897 16.795V17.8297C93.897 18.0785 93.8523 18.2453 93.7631 18.3302C93.6738 18.415 93.4842 18.4574 93.1941 18.4574H92.3741C91.3031 18.4574 90.539 18.2199 90.0816 17.7449C89.6241 17.27 89.3954 16.484 89.3954 15.387V7.46514C89.3954 7.20504 89.4429 7.03258 89.5377 6.94776C89.6325 6.86294 89.825 6.82054 90.115 6.82054H91.3366ZM31.6425 6.35938C34.1972 6.35938 35.4746 7.37718 35.4746 9.41278V9.6333C35.4746 10.2327 35.3324 10.7614 35.0479 11.2194C34.7634 11.6774 34.3869 11.9856 33.9183 12.1439C34.4761 12.2796 34.9252 12.5849 35.2654 13.0599C35.6057 13.5349 35.7758 14.089 35.7758 14.7223V14.9937C35.7758 16.1812 35.4244 17.0519 34.7216 17.6061C34.0187 18.1602 32.9087 18.4373 31.3915 18.4373H27.9107C27.6207 18.4373 27.4282 18.3949 27.3334 18.3101C27.2386 18.2252 27.1912 18.0528 27.1912 17.7927V7.00398C27.1912 6.74388 27.2386 6.57142 27.3334 6.4866C27.4282 6.40178 27.6207 6.35938 27.9107 6.35938H31.6425ZM57.1455 6.35938C57.4355 6.35938 57.628 6.40178 57.7228 6.4866C57.8176 6.57142 57.865 6.74388 57.865 7.00398V12.7037L60.3584 9.76901C60.5481 9.54283 60.682 9.40712 60.7601 9.36189C60.8381 9.31665 60.9664 9.29403 61.1449 9.29403H62.8351C63.1363 9.29403 63.2869 9.41843 63.2869 9.66723C63.2869 9.79162 63.2256 9.91602 63.1028 10.0404L60.6931 12.7206L63.5045 17.6909C63.5937 17.8492 63.6383 17.9793 63.6383 18.081C63.6383 18.3185 63.471 18.4373 63.1363 18.4373H61.4964C61.2955 18.4373 61.1422 18.4033 61.0362 18.3355C60.9302 18.2676 60.827 18.1432 60.7266 17.9623L58.9026 14.5866L57.865 15.7401V17.7927C57.865 18.0528 57.8176 18.2252 57.7228 18.3101C57.628 18.3949 57.4355 18.4373 57.1455 18.4373H55.9908C55.7007 18.4373 55.5083 18.3949 55.4135 18.3101C55.3186 18.2252 55.2712 18.0528 55.2712 17.7927V7.00398C55.2712 6.74388 55.3186 6.57142 55.4135 6.4866C55.5083 6.40178 55.7007 6.35938 55.9908 6.35938H57.1455ZM87.083 11.1346C87.3731 11.1346 87.5655 11.177 87.6603 11.2618C87.7552 11.3466 87.8026 11.5191 87.8026 11.7792L87.7859 17.7757C87.7859 18.0358 87.7384 18.2083 87.6436 18.2931C87.5488 18.3779 87.3563 18.4203 87.0663 18.4203H85.8447C85.5546 18.4203 85.3622 18.3779 85.2673 18.2931C85.1725 18.2083 85.1251 18.0358 85.1251 17.7757L85.1418 11.7792C85.1418 11.5191 85.1893 11.3466 85.2841 11.2618C85.3789 11.177 85.5714 11.1346 85.8614 11.1346H87.083ZM40.7794 11.177C40.2997 11.177 39.9287 11.3325 39.6665 11.6435C39.4044 11.9545 39.2733 12.404 39.2733 12.992V14.7393C39.2733 15.9493 39.7418 16.5543 40.679 16.5543C41.1698 16.5543 41.5436 16.3988 41.8002 16.0879C42.0567 15.7769 42.185 15.3273 42.185 14.7393V12.992C42.185 11.782 41.7165 11.177 40.7794 11.177ZM49.933 11.177C49.4533 11.177 49.0823 11.3325 48.8202 11.6435C48.558 11.9545 48.4269 12.404 48.4269 12.992V14.7393C48.4269 15.9493 48.8955 16.5543 49.8326 16.5543C50.3235 16.5543 50.6972 16.3988 50.9538 16.0879C51.2104 15.7769 51.3387 15.3273 51.3387 14.7393V12.992C51.3387 11.782 50.8701 11.177 49.933 11.177ZM76.8082 11.177C75.8711 11.177 75.4025 11.782 75.4025 12.992V14.7393C75.4025 15.3273 75.528 15.7769 75.779 16.0879C76.03 16.3988 76.3954 16.5543 76.8751 16.5543C77.8346 16.5543 78.3143 15.9493 78.3143 14.7393V12.992C78.3143 12.404 78.186 11.9545 77.9294 11.6435C77.6728 11.3325 77.2991 11.177 76.8082 11.177ZM31.6592 13.3483H29.8854V16.1133H31.4751C32.468 16.1133 32.9645 15.7005 32.9645 14.875V14.5696C32.9645 14.1738 32.8529 13.8713 32.6298 13.6621C32.4067 13.4529 32.0831 13.3483 31.6592 13.3483ZM67.8721 11.1261C67.4705 11.1261 67.1525 11.2505 66.9183 11.4993C66.684 11.7481 66.5557 12.1721 66.5334 12.7715H69.2276C69.2164 12.2061 69.1076 11.7905 68.9013 11.5247C68.6949 11.259 68.3518 11.1261 67.8721 11.1261ZM31.2911 8.68335H29.8854V11.1939H31.4082C32.2672 11.1939 32.6967 10.8038 32.6967 10.0235V9.75204C32.6967 9.03958 32.2282 8.68335 31.2911 8.68335ZM86.6929 6.82054C87.0716 6.82054 87.2089 6.86118 87.3474 6.93751C87.4858 7.01384 87.5945 7.12586 87.6685 7.26858C87.7426 7.41131 87.782 7.55287 87.782 7.94328V8.58156C87.782 8.97197 87.7426 9.11353 87.6685 9.25626C87.5945 9.39898 87.4858 9.51099 87.3474 9.58732C87.2089 9.66365 87.0716 9.7043 86.6929 9.7043H86.0737C85.695 9.7043 85.5577 9.66365 85.4192 9.58732C85.2808 9.51099 85.1721 9.39898 85.0981 9.25626C85.024 9.11353 84.9846 8.97197 84.9846 8.58156V7.94328C84.9846 7.55287 85.024 7.41131 85.0981 7.26858C85.1721 7.12586 85.2808 7.01384 85.4192 6.93751C85.5577 6.86118 85.695 6.82054 86.0737 6.82054H86.6929Z"
+      fill="var(--label-primary)"
+    />
+  </svg>
+)
+
+export const AuthBgDecorationIcon = () => (
+  <svg
+    width="489"
+    height="588"
+    viewBox="0 0 489 588"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    className="auth-layout__bg-decoration"
+    aria-hidden="true"
+  >
+    <g clipPath="url(#auth-bg-clip)">
+      <path d="M-17.7607 -1.80137C3.60513 -22.7649 13.5775 -28.1841 25.5659 -31.7493C37.5544 -35.3145 49.8146 -35.3145 61.803 -31.7493C73.7915 -28.1841 83.7639 -22.7649 105.13 -1.80136L140.062 32.4732C161.428 53.4367 166.951 63.2214 170.585 74.9841C174.218 86.7467 174.218 98.7762 170.585 110.539C166.951 122.302 161.428 132.086 140.062 153.05L105.13 187.324C83.7639 208.288 73.7915 213.707 61.8031 217.272C49.8146 220.837 37.5543 220.837 25.5659 217.272C13.5775 213.707 3.60513 208.288 -17.7607 187.324L-52.6929 153.05C-74.0588 132.086 -79.5819 122.302 -83.2156 110.539C-86.8492 98.7762 -86.8492 86.7468 -83.2156 74.9841C-79.5819 63.2214 -74.0588 53.4367 -52.6929 32.4732L-17.7607 -1.80137Z" fill="var(--surface-tertiary)" />
+      <path d="M174.305 176.142C195.671 155.178 205.643 149.759 217.632 146.194C229.62 142.629 241.88 142.629 253.869 146.194C265.857 149.759 275.83 155.178 297.195 176.142L332.128 210.416C353.494 231.38 359.017 241.164 362.65 252.927C366.284 264.69 366.284 276.719 362.65 288.482C359.017 300.245 353.494 310.029 332.128 330.993L297.195 365.267C275.83 386.231 265.857 391.65 253.869 395.215C241.88 398.781 229.62 398.781 217.632 395.215C205.643 391.65 195.671 386.231 174.305 365.267L139.373 330.993C118.007 310.029 112.484 300.245 108.85 288.482C105.217 276.719 105.217 264.69 108.85 252.927C112.484 241.164 118.007 231.38 139.373 210.416L174.305 176.142Z" fill="var(--surface-tertiary)" />
+      <path d="M-60.1281 280.648C-38.7623 259.685 -28.7899 254.265 -16.8015 250.7C-4.81308 247.135 7.4472 247.135 19.4356 250.7C31.424 254.265 41.3964 259.685 62.7623 280.648L97.6945 314.923C119.06 335.886 124.583 345.671 128.217 357.434C131.851 369.196 131.851 381.226 128.217 392.988C124.583 404.751 119.06 414.536 97.6945 435.499L62.7623 469.774C41.3964 490.737 31.424 496.156 19.4356 499.722C7.44721 503.287 -4.81308 503.287 -16.8015 499.722C-28.7899 496.156 -38.7623 490.737 -60.1281 469.774L-95.0604 435.499C-116.426 414.536 -121.949 404.751 -125.583 392.988C-129.217 381.226 -129.217 369.196 -125.583 357.434C-121.949 345.671 -116.426 335.886 -95.0604 314.923L-60.1281 280.648Z" fill="var(--surface-tertiary)" />
+      <path d="M256.215 -83.7118C277.581 -104.675 287.554 -110.094 299.542 -113.66C311.53 -117.225 323.791 -117.225 335.779 -113.66C347.768 -110.094 357.74 -104.675 379.106 -83.7118L414.038 -49.4372C435.404 -28.4737 440.927 -18.689 444.561 -6.92635C448.194 4.83635 448.194 16.8658 444.561 28.6285C440.927 40.3912 435.404 50.1758 414.038 71.1394L379.106 105.414C357.74 126.377 347.768 131.797 335.779 135.362C323.791 138.927 311.53 138.927 299.542 135.362C287.554 131.797 277.581 126.377 256.215 105.414L221.283 71.1394C199.917 50.1758 194.394 40.3912 190.761 28.6285C187.127 16.8658 187.127 4.83635 190.761 -6.92635C194.394 -18.689 199.917 -28.4737 221.283 -49.4372L256.215 -83.7118Z" fill="var(--surface-tertiary)" />
+    </g>
+    <defs>
+      <clipPath id="auth-bg-clip">
+        <rect width="489" height="588" fill="white" />
+      </clipPath>
+    </defs>
+  </svg>
+)
+
+export const DeleteIcon = ({ width = 24, height = 24 }: { 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="M21 10H26V12H24V25C24 25.5523 23.5523 26 23 26H9C8.44772 26 8 25.5523 8 25V12H6V10H11V7C11 6.44772 11.4477 6 12 6H20C20.5523 6 21 6.44772 21 7V10ZM22 12H10V24H22V12ZM13 15H15V21H13V15ZM17 15H19V21H17V15ZM13 8V10H19V8H13Z" fill="currentColor" />
+  </svg>
+)
+
+export const ClockIcon = ({ width = 20, height = 20 }: { 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="M16 28C9.37258 28 4 22.6274 4 16C4 9.37258 9.37258 4 16 4C22.6274 4 28 9.37258 28 16C28 22.6274 22.6274 28 16 28ZM16 26C21.5228 26 26 21.5228 26 16C26 10.4772 21.5228 6 16 6C10.4772 6 6 10.4772 6 16C6 21.5228 10.4772 26 16 26ZM17 9V15.5858L21.2426 19.8284L19.8284 21.2426L15 16.4142V9H17Z" fill="currentColor" />
+  </svg>
+)

package/src/v2/index.ts

@@ -21,6 +21,19 @@ export type { AlertProps, AlertVariant } from './components/Alert'
 export { Button } from './components/Button'
 export type { ButtonProps } from './components/Button'
 
+// NewInput Component
+export { NewInput } from './components/NewInput'
+export type { NewInputProps } from './components/NewInput'
+
+// Checkbox Component
+export { Checkbox } from './components/Checkbox'
+export type { CheckboxProps } from './components/Checkbox'
+
+// NewPageHeader Component
+export { NewPageHeader } from './components/NewPageHeader'
+export type { NewPageHeaderProps } from './components/NewPageHeader'
+
+
 // EntityHeader Component
 export { EntityHeader } from './components/EntityHeader'
 export type { EntityHeaderProps } from './components/EntityHeader'
@@ -36,6 +49,14 @@ export type { NPSScoreProps, NPSSubmitData } from './components/NPSScore'
 export { UserPanel } from './components/UserPanel'
 export type { UserPanelProps } from './components/UserPanel'
 
+// ZoneCard Components
+export { ZoneCard, ZoneContainer, ZoneHeader, ResourceRow, AddResourceButton } from './components/ZoneCard'
+export type { ZoneCardProps, ZoneResource, ZoneContainerProps, DragHandleProps, ZoneHeaderProps, ResourceRowProps, ResourceRowLabels, AddResourceButtonProps } from './components/ZoneCard'
+
+// ZonesResources Page
+export { ZonesResourcesPage } from './pages/ZonesResources'
+export type { ZonesResourcesPageProps } from './pages/ZonesResources'
+
 // ============================================================================
 // Navigation Components
 // ============================================================================