@licklist/design 0.78.5-dev.110 → 0.78.5-dev.112

package/src/v2/components/PeriodCard/PeriodCard.tsx

@@ -2,16 +2,18 @@ import React from 'react'
 import { NewInput } from '../NewInput'
 import { Checkbox } from '../Checkbox'
 import { IconButton } from '../IconButton'
-import { ClockIcon } from '../../icons'
+import { ClockIcon,  } from '../../icons'
 import './PeriodCard.scss'
 
 export interface PeriodCardValue {
-  days: string[]
+  days?: string[]
   is24Hours: boolean
   startTime?: string
   endTime?: string
-  maxCapacity: number
-  minCapacity: number | null
+  startDate?: string
+  endDate?: string
+  maxCapacity?: number
+  minCapacity?: number | null
 }
 
 export interface PeriodCardLabels {
@@ -24,6 +26,8 @@ export interface PeriodCardLabels {
   alignToggle?: string
   startTime?: string
   endTime?: string
+  startDate?: string
+  endDate?: string
 }
 
 const DEFAULT_LABELS: Required<PeriodCardLabels> = {
@@ -36,6 +40,8 @@ const DEFAULT_LABELS: Required<PeriodCardLabels> = {
   alignToggle: 'Align with Opening Hours',
   startTime: 'Start Time',
   endTime: 'End Time',
+  startDate: 'Start Date',
+  endDate: 'End Date',
 }
 
 const DAY_OPTIONS = [
@@ -68,8 +74,18 @@ export interface PeriodCardProps {
   hideTime?: boolean
   /** Make the min value field optional (shows "(optional)" label) */
   minOptional?: boolean
-  /** Custom icon for the badge. Defaults to ClockIcon */
+  /** Custom icon for the badge. Defaults to ClockIcon or CalendarIcon based on props */
   badgeIcon?: React.ReactNode
+  /** Type of the period card, determines the default badge icon */
+  type?: 'date_time' | 'range'
+  /** Background color for the delete icon button */
+  deleteBackgroundColor?: string
+  /** Border color for the delete icon button */
+  deleteBorderColor?: string
+  /** Hover background color for the delete icon button */
+  deleteHoverBackgroundColor?: string
+  /** Hover border color for the delete icon button */
+  deleteHoverBorderColor?: string
   /** Custom content. When provided, built-in sections (capacity, days, time) are not rendered. */
   children?: React.ReactNode
   className?: string
@@ -88,6 +104,11 @@ export const PeriodCard: React.FC<PeriodCardProps> = ({
   hideTime = false,
   minOptional = true,
   badgeIcon,
+  type,
+  deleteBackgroundColor,
+  deleteBorderColor,
+  deleteHoverBackgroundColor,
+  deleteHoverBorderColor,
   children,
   className = '',
 }) => {
@@ -127,7 +148,17 @@ export const PeriodCard: React.FC<PeriodCardProps> = ({
       {title && (
         <div className="period-card__title-row">
           <span className="period-card__title">{title}</span>
-          {onDelete && <IconButton icon="delete" onClick={onDelete} />}
+          {onDelete && (
+            <IconButton
+              icon="delete"
+              variant="danger"
+              backgroundColor={deleteBackgroundColor}
+              borderColor={deleteBorderColor}
+              hoverBackgroundColor={deleteHoverBackgroundColor}
+              hoverBorderColor={deleteHoverBorderColor}
+              onClick={onDelete}
+            />
+          )}
         </div>
       )}
 
@@ -139,7 +170,15 @@ export const PeriodCard: React.FC<PeriodCardProps> = ({
             <span className="period-card__badge">{labels.badge}</span>
           </div>
           {onDelete && (
-            <IconButton icon="delete" onClick={onDelete} />
+            <IconButton
+              icon="delete"
+              variant="danger"
+              backgroundColor={deleteBackgroundColor}
+              borderColor={deleteBorderColor}
+              hoverBackgroundColor={deleteHoverBackgroundColor}
+              hoverBorderColor={deleteHoverBorderColor}
+              onClick={onDelete}
+            />
           )}
         </div>
       )}
@@ -162,7 +201,7 @@ export const PeriodCard: React.FC<PeriodCardProps> = ({
                   type="number"
                   min={0}
                   value={
-                    value.minCapacity === null || value.minCapacity === 0
+                    value.minCapacity === null || value.minCapacity === undefined || value.minCapacity === 0
                       ? ''
                       : value.minCapacity
                   }
@@ -179,7 +218,7 @@ export const PeriodCard: React.FC<PeriodCardProps> = ({
                   label={labels.maxValue}
                   type="number"
                   min={1}
-                  value={value.maxCapacity === 0 ? '' : value.maxCapacity}
+                  value={value.maxCapacity === 0 || value.maxCapacity === undefined ? '' : value.maxCapacity}
                   onChange={(e) =>
                     updateField({
                       maxCapacity:
@@ -193,6 +232,30 @@ export const PeriodCard: React.FC<PeriodCardProps> = ({
             </div>
           )}
 
+          {/* Date Range */}
+          {type === 'range' && value && (
+            <div className="period-card__section">
+              <div className="period-card__row">
+                <NewInput
+                  label={labels.startDate}
+                  type="date"
+                  value={value.startDate || ''}
+                  onChange={(e) =>
+                    updateField({ startDate: (e.target as HTMLInputElement).value })
+                  }
+                />
+                <NewInput
+                  label={labels.endDate}
+                  type="date"
+                  value={value.endDate || ''}
+                  onChange={(e) =>
+                    updateField({ endDate: (e.target as HTMLInputElement).value })
+                  }
+                />
+              </div>
+            </div>
+          )}
+
           {/* Days */}
           {!hideDays && value && (
             <div className="period-card__section">
@@ -240,16 +303,16 @@ export const PeriodCard: React.FC<PeriodCardProps> = ({
                   <NewInput
                     label={labels.startTime}
                     type="time"
-                    value={value.startTime || '09:00'}
-                    onChange={(e) =>
+                    value={value.startTime || ''}
+                    onChange={(e: { target: HTMLInputElement }) =>
                       updateField({ startTime: (e.target as HTMLInputElement).value })
                     }
                   />
                   <NewInput
                     label={labels.endTime}
                     type="time"
-                    value={value.endTime || '17:00'}
-                    onChange={(e) =>
+                    value={value.endTime || ''}
+                    onChange={(e: { target: HTMLInputElement }) =>
                       updateField({ endTime: (e.target as HTMLInputElement).value })
                     }
                   />

package/src/v2/components/index.ts

@@ -1,3 +1,6 @@
+export { ColorPicker } from './ColorPicker'
+export type { ColorPickerProps, ColorOption } from './ColorPicker'
+
 export { IconButton } from './IconButton'
 export type { IconButtonProps } from './IconButton'
 
@@ -19,6 +22,9 @@ export type { TableControlsProps, TableSearchConfig, TableFilterConfig, TableHea
 export { EmptyState } from './EmptyState'
 export type { EmptyStateProps } from './EmptyState'
 
+export { FeatureCard } from './FeatureCard'
+export type { FeatureCardProps } from './FeatureCard'
+
 
 export { Tabs } from './Tabs'
 export type { TabsProps, TabItem } from './Tabs'

package/src/v2/icons/index.tsx

@@ -82,8 +82,8 @@ export const WaiversIcon = ({ width = 24, height = 24, className = '' }: { width
     </svg>
 )
 
-export const CalendarIcon = () => (
-    <svg width="24" height="24" viewBox="0 0 32 32" fill="none">
+export const CalendarIcon = ({ width = 24, height = 24 }: { width?: number; height?: number } = {}) => (
+    <svg width={width} height={height} viewBox="0 0 32 32" fill="none">
         <path d="M13 6V8H19V6H21V8H25C25.5523 8 26 8.44772 26 9V25C26 25.5523 25.5523 26 25 26H7C6.44772 26 6 25.5523 6 25V9C6 8.44772 6.44772 8 7 8H11V6H13ZM24 16H8V24H24V16ZM15 18V22H10V18H15ZM11 10H8V14H24V10H21V12H19V10H13V12H11V10Z" fill="currentColor" />
     </svg>
 )
@@ -108,6 +108,15 @@ export const EditIcon = () => (
     </svg>
 )
 
+export const NoRulesIcon = ({ width = 24, height = 24, className = '' }: { width?: number; height?: number; className?: string } = {}) => (
+    <svg width={width} height={height} viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg" className={className}>
+        <path d="M24 6C25.6569 6 27 7.34315 27 9V11H25V23C25 24.6569 23.6569 26 22 26H8C6.34315 26 5 24.6569 5 23V21H21V23C21 23.5128 21.386 23.9355 21.8834 23.9933L22 24C22.5128 24 22.9355 23.614 22.9933 23.1166L23 23V8H10C9.48716 8 9.06449 8.38604 9.00673 8.88338L9 9V19H7V9C7 7.34315 8.34315 6 10 6H24Z" fill="black"/>
+        <path d="M11 11C11 10.4477 11.4477 10 12 10H20C20.5523 10 21 10.4477 21 11C21 11.5523 20.5523 12 20 12H12C11.4477 12 11 11.5523 11 11Z" fill="black" fill-opacity="0.25"/>
+        <path d="M11 15C11 14.4477 11.4477 14 12 14H20C20.5523 14 21 14.4477 21 15C21 15.5523 20.5523 16 20 16H12C11.4477 16 11 15.5523 11 15Z" fill="black" fill-opacity="0.25"/>
+        <path d="M11 19C11 18.4477 11.4477 18 12 18H20C20.5523 18 21 18.4477 21 19C21 19.5523 20.5523 20 20 20H12C11.4477 20 11 19.5523 11 19Z" fill="black" fill-opacity="0.25"/>
+    </svg>
+)
+
 export const CalendarSmallIcon = () => (
     <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 22 22" fill="none">
         <path d="M8.9375 4.125V5.5H13.0625V4.125H14.4375V5.5H17.1875C17.5672 5.5 17.875 5.80781 17.875 6.1875V17.1875C17.875 17.5672 17.5672 17.875 17.1875 17.875H4.8125C4.43281 17.875 4.125 17.5672 4.125 17.1875V6.1875C4.125 5.80781 4.43281 5.5 4.8125 5.5H7.5625V4.125H8.9375ZM16.5 11H5.5V16.5H16.5V11ZM10.3125 12.375V15.125H6.875V12.375H10.3125ZM7.5625 6.875H5.5V9.625H16.5V6.875H14.4375V8.25H13.0625V6.875H8.9375V8.25H7.5625V6.875Z" fill="#626A90"/>
@@ -582,8 +591,21 @@ export const ReportsEmptyIcon = () => (
   </svg>
 )
 
-export const CurrencyPoundIcon = ({ size = 28 }: { size?: number } = {}) => (
-  <svg width={size} height={size} viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+export const CurrencyPoundIcon = ({
+  size = 28,
+  className = '',
+}: {
+  size?: number
+  className?: string
+} = {}) => (
+  <svg
+    width={size}
+    height={size}
+    viewBox="0 0 32 32"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    className={className}
+  >
     <path d="M16.0049 26.0028C10.482 26.0028 6.00488 21.5257 6.00488 16.0028C6.00488 10.48 10.482 6.00281 16.0049 6.00281C21.5277 6.00281 26.0049 10.48 26.0049 16.0028C26.0049 21.5257 21.5277 26.0028 16.0049 26.0028ZM16.0049 24.0028C20.4232 24.0028 24.0049 20.4211 24.0049 16.0028C24.0049 11.5845 20.4232 8.00281 16.0049 8.00281C11.5866 8.00281 8.00488 11.5845 8.00488 16.0028C8.00488 20.4211 11.5866 24.0028 16.0049 24.0028ZM13.0049 17.0028H12.0049V15.0028H13.0049V14.0028C13.0049 12.0698 14.5719 10.5028 16.5049 10.5028C17.9741 10.5028 19.2319 11.4081 19.7509 12.6913L17.7644 13.1879C17.4971 12.7756 17.0329 12.5028 16.5049 12.5028C15.6765 12.5028 15.0049 13.1744 15.0049 14.0028V15.0028H18.0049V17.0028H15.0049V19.0028H20.0049V21.0028H12.0049V19.0028H13.0049V17.0028Z" fill="currentColor"/>
   </svg>
 )
@@ -734,6 +756,9 @@ export const IconGripVertical: React.FC<ShadcnIconProps> = ({ className = '', si
   </svg>
 )
 
+export const IconPlus = PlusIcon
+export const IconPlusThick = PlusIcon
+
 // ── Sandbox icon aliases (used by shadcn ui components) ─────────────────────
 export const IconArrowLeft = ArrowLeftIcon
 export const IconArrowRight = ArrowRightIcon

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.scss

@@ -4,7 +4,7 @@
   align-self: stretch;
 
   &__back {
-    padding: 24px 32px 0 0;
+    padding: 24px 0 0 0;
     align-self: flex-start;
 
     .ghost-button {
@@ -23,15 +23,15 @@
     }
 
     @media (max-width: 768px) {
-      padding: 16px 16px 0 0;
+      padding: 16px 0 0 0;
     }
   }
 
   &__content {
-    padding: 24px 0;
+    padding: 0;
 
     @media (max-width: 768px) {
-      padding: 0;
+      padding: 16px 0;
     }
   }
 

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

@@ -11,6 +11,7 @@ export interface SettingsSubPageProps {
   actionLabel?: string
   onAction?: () => void
   children?: React.ReactNode
+  showDivider?: boolean
 }
 
 export const SettingsSubPage: React.FC<SettingsSubPageProps> = ({
@@ -20,6 +21,7 @@ export const SettingsSubPage: React.FC<SettingsSubPageProps> = ({
   actionLabel,
   onAction,
   children,
+  showDivider = true,
 }) => {
   return (
     <div className="settings-sub-page">
@@ -32,7 +34,7 @@ export const SettingsSubPage: React.FC<SettingsSubPageProps> = ({
       )}
       <NewPageHeader
         title={title}
-        showDivider
+        showDivider={showDivider}
       />
       <div className="settings-sub-page__content">
         {onAction && actionLabel && (

package/src/v2/styles/tokens/_colors.scss

@@ -116,6 +116,16 @@
   --pink-800: #80224D;
   --pink-900: #611A3B;
 
+  --grey-100: #F8F8FA;
+  --grey-200: #E8E9EF;
+  --grey-300: #D2D5E3;
+  --grey-400: #B6BACC;
+  --grey-500: #9399B3;
+  --grey-600: #626A90;
+  --grey-700: #433D7B;
+  --grey-800: #14215A;
+  --grey-900: #0B1232;
+
   /* Teals */
   --teal-50: #E9FAF7;
   --teal-100: #BAF0E7;
@@ -218,6 +228,15 @@
   --pink-darker: var(--pink-700);
   --pink-darkest: var(--pink-800);
 
+  /* Grey Scale */
+  --grey-lightest: var(--grey-50);
+  --grey-lighter: var(--grey-100);
+  --grey-light: var(--grey-300);
+  --grey-regular: var(--grey-500);
+  --grey-dark: var(--grey-600);
+  --grey-darker: var(--grey-700);
+  --grey-darkest: var(--grey-800);
+
   /* Green Scale */
   --green-lightest: var(--green-50);
   --green-lighter: var(--green-100);

package/src/v2/utils/colourPicker/colors.ts

@@ -0,0 +1,17 @@
+/**
+ * Standard color palette for pricing periods and other color picker components
+ */
+export const COLORS = [
+  { name: 'red', hex: '#E0423A' },
+  { name: 'orange', hex: '#FD7E14' },
+  { name: 'yellow', hex: '#FBB912' },
+  { name: 'green', hex: '#52C22B' },
+  { name: 'teal', hex: '#22CEB1' },
+  { name: 'cyan', hex: '#2BD9FF' },
+  { name: 'blue', hex: '#0E8CE2' },
+  { name: 'indigo', hex: '#5D5BF4' },
+  { name: 'purple', hex: '#6200EE' },
+  { name: 'pink', hex: '#EC1479' },
+  { name: 'grey', hex: '#9399B3' },
+]
+

package/src/v2/utils/timeFormat/formatTime.ts

@@ -0,0 +1,18 @@
+/**
+ * Formats time from "HH:mm:ss" to "HH:mm" format
+ * Useful for converting HTML time input values to backend-compatible format
+ *
+ * @param time - Time string in "HH:mm:ss" or "HH:mm" format
+ * @returns Time string in "HH:mm" format, or undefined if input is undefined
+ *
+ * @example
+ * formatTimeToHHMM("09:00:00") // returns "09:00"
+ * formatTimeToHHMM("17:30") // returns "17:30"
+ * formatTimeToHHMM(undefined) // returns undefined
+ */
+export const formatTimeToHHMM = (time?: string): string | undefined => {
+  if (!time) return undefined
+  // Extract HH:mm from HH:mm:ss (or return as-is if already HH:mm)
+  return time.substring(0, 5)
+}
+