@licklist/design 0.78.34 → 0.78.36

package/dist/v2/styles/form/NewInput.scss.js

@@ -1,6 +1,6 @@
 import styleInject from '/opt/atlassian/pipelines/agent/build/node_modules/style-inject/dist/style-inject.es.js';
 
-var css_248z = ":root{--font-family-sans:\"Geist\",-apple-system,BlinkMacSystemFont,\"Segoe UI\",\"Roboto\",\"Helvetica Neue\",Arial,sans-serif;--font-family-mono:\"Geist Mono\",ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,\"Liberation Mono\",\"Courier New\",monospace;--heading-xxl-size:44px;--heading-xxl-line:48px;--heading-xxl-weight:600;--heading-xl-size:32px;--heading-xl-line:36px;--heading-xl-weight:700;--heading-h1-size:24px;--heading-h1-line:28px;--heading-h1-weight:600;--heading-h2-size:20px;--heading-h2-line:24px;--heading-h2-weight:600;--heading-h3-size:17px;--heading-h3-line:20px;--heading-h3-weight:600;--heading-h4-size:15px;--heading-h4-line:18px;--heading-h4-weight:600;--heading-h5-size:13px;--heading-h5-line:16px;--heading-h5-weight:500;--heading-h6-size:11px;--heading-h6-line:14px;--heading-h6-weight:500;--heading-xxl-mobile-size:32px;--heading-xxl-mobile-line:36px;--heading-xxl-mobile-weight:600;--heading-xl-mobile-size:26px;--heading-xl-mobile-line:30px;--heading-xl-mobile-weight:700;--heading-h1-mobile-size:20px;--heading-h1-mobile-line:23px;--heading-h1-mobile-weight:600;--heading-h2-mobile-size:18px;--heading-h2-mobile-line:22px;--heading-h2-mobile-weight:600;--heading-h3-mobile-size:16px;--heading-h3-mobile-line:18px;--heading-h3-mobile-weight:600;--heading-h4-mobile-size:14px;--heading-h4-mobile-line:16px;--heading-h4-mobile-weight:600;--heading-h5-mobile-size:13px;--heading-h5-mobile-line:16px;--heading-h5-mobile-weight:500;--heading-h6-mobile-size:11px;--heading-h6-mobile-line:14px;--heading-h6-mobile-weight:500;--text-xl-size:20px;--text-xl-line:26px;--text-xl-weight:400;--text-large-size:18px;--text-large-line:24px;--text-large-weight:400;--text-regular-size:15px;--text-regular-line:20px;--text-regular-weight:400;--text-small-size:13px;--text-small-line:16px;--text-small-weight:400;--text-small-emphasis-weight:500;--text-small-bold-weight:600;--text-xs-size:10px;--text-xs-line:13px;--text-xs-weight:500;--text-xs-bold-weight:600}.new-form-input{align-items:flex-start;align-self:stretch;display:flex;flex-direction:column;gap:var(--spacing-sm);width:100%}.new-form-input__label{display:block;font-style:normal}.new-form-input__label,.new-form-input__label-optional{color:var(--label-primary,#121e52);font-family:var(--font-family-sans,\"Geist\",sans-serif);font-size:15px;font-weight:600;line-height:20px}.new-form-input__input{background-color:var(--surfaces-main-background-secondary);background:var(--surface-secondary);border:2px solid var(--border-primary);border-radius:var(--radius-md);color:var(--labels-main-label-primary,#121e52);flex:1 0 0;font-family:var(--font-family-sans);font-size:var(--text-regular-size);font-weight:var(--text-regular-weight);line-height:var(--text-regular-line);min-height:40px;padding:8px 10px;transition:all .2s ease;width:100%}@media (max-width:768px){.new-form-input__input{font-size:16px}}.new-form-input__input:focus{background-color:var(--surfaces-main-background-secondary,#f8f8fa);border-color:var(--border-selected,#6200ee);outline:none}.new-form-input__input::placeholder{color:var(--labels-main-label-secondary,#626a90)}.new-form-input__textarea{background-color:var(--surfaces-main-background-secondary,#f8f8fa);border:1px solid var(--borders-main-border-primary,#e8e9ef);border-radius:var(--radius-md,4px);color:var(--labels-main-label-primary,#121e52);font-family:var(--font-family-sans,\"Geist\",sans-serif);font-size:var(--text-regular-size,15px);line-height:var(--text-regular-line,20px);min-height:120px;padding:8px 10px;resize:vertical;transition:all .2s ease;width:100%}@media (max-width:768px){.new-form-input__textarea{font-size:16px}}.new-form-input__textarea:focus{border-color:var(--border-selected,#6200ee);outline:none}.new-form-input__textarea::placeholder{color:var(--labels-main-label-secondary,#626a90)}.new-form-input__input-with-icon{align-items:center;background-color:var(--surfaces-main-background-secondary,#f8f8fa);border:2px solid var(--border-primary,#e8e9ef);border-radius:var(--radius-md,4px);display:flex;gap:var(--spacing-sm,8px);min-height:52px;padding:8px 10px;transition:all .2s ease;width:70%}.new-form-input__input-with-icon:focus-within{border-color:var(--border-selected,#6200ee)}.new-form-input__input-with-icon .icon{align-items:center;display:flex;flex-shrink:0;height:24px;justify-content:center;order:-1;width:24px}.new-form-input__input-with-icon--right .icon{order:1}.new-form-input__input-with-icon input{background:#0000;border:none;color:var(--label-primary);flex:1;font-family:var(--font-family-sans,\"Geist\",sans-serif);font-size:var(--text-regular-size,15px);line-height:var(--text-regular-line,20px)}@media (max-width:768px){.new-form-input__input-with-icon input{font-size:16px}}.new-form-input__input-with-icon input:focus{outline:none}.new-form-input__input-with-icon input::placeholder{color:var(--labels-main-label-secondary,#626a90)}.new-form-input__input-with-icon input[type=date]::-webkit-calendar-picker-indicator{-webkit-appearance:none;display:none}.new-form-input__input-with-icon input[type=date]::-webkit-inner-spin-button,.new-form-input__input-with-icon input[type=date]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.new-form-input__verification-code{display:flex;gap:var(--spacing-sm,8px);height:62px}.new-form-input__verification-code .code-input{background-color:var(--surfaces-main-background-secondary,#f8f8fa);border:2px solid var(--borders-main-border-primary,#e8e9ef);border-radius:var(--radius-md,4px);color:var(--labels-main-label-primary,#121e52);flex:1;font-family:var(--font-family-sans,\"Geist\",sans-serif);font-size:var(--text-lg-size,18px);font-weight:var(--heading-h3-weight,600);text-align:center;transition:all .2s ease}.new-form-input__verification-code .code-input:focus{border-color:var(--border-selected,#6200ee);outline:none}.new-form-input__helper-text{color:var(--label-secondary,#626a90);font-family:var(--font-family-sans,\"Geist\",sans-serif);font-size:var(--text-regular-size,15px);font-style:normal;font-weight:400;line-height:var(--text-regular-line,20px);margin-top:2px;min-width:max-content;white-space:nowrap}@media (max-width:768px){.new-form-input__helper-text{word-wrap:break-word;min-width:unset;white-space:normal}}.new-form-input__error-text{color:var(--labels-status-label-error,#ef4444);font-family:var(--font-family-sans,\"Geist\",sans-serif);font-size:11px;font-style:normal;font-weight:400;line-height:14px;margin-top:2px}.new-form-input--active .new-form-input__input{border-color:var(--border-selected,#6200ee)}.new-form-input--error .new-form-input__input{border-color:var(--borders-status-border-error,#ef4444)}.new-form-input--disabled{opacity:var(--opacity-50,.5);pointer-events:none}.new-form-input.dob-input .new-form-input__label{color:var(--label-secondary,#626a90)}";
+var css_248z = ":root{--font-family-sans:\"Geist\",-apple-system,BlinkMacSystemFont,\"Segoe UI\",\"Roboto\",\"Helvetica Neue\",Arial,sans-serif;--font-family-mono:\"Geist Mono\",ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,\"Liberation Mono\",\"Courier New\",monospace;--heading-xxl-size:44px;--heading-xxl-line:48px;--heading-xxl-weight:600;--heading-xl-size:32px;--heading-xl-line:36px;--heading-xl-weight:700;--heading-h1-size:24px;--heading-h1-line:28px;--heading-h1-weight:600;--heading-h2-size:20px;--heading-h2-line:24px;--heading-h2-weight:600;--heading-h3-size:17px;--heading-h3-line:20px;--heading-h3-weight:600;--heading-h4-size:15px;--heading-h4-line:18px;--heading-h4-weight:600;--heading-h5-size:13px;--heading-h5-line:16px;--heading-h5-weight:500;--heading-h6-size:11px;--heading-h6-line:14px;--heading-h6-weight:500;--heading-xxl-mobile-size:32px;--heading-xxl-mobile-line:36px;--heading-xxl-mobile-weight:600;--heading-xl-mobile-size:26px;--heading-xl-mobile-line:30px;--heading-xl-mobile-weight:700;--heading-h1-mobile-size:20px;--heading-h1-mobile-line:23px;--heading-h1-mobile-weight:600;--heading-h2-mobile-size:18px;--heading-h2-mobile-line:22px;--heading-h2-mobile-weight:600;--heading-h3-mobile-size:16px;--heading-h3-mobile-line:18px;--heading-h3-mobile-weight:600;--heading-h4-mobile-size:14px;--heading-h4-mobile-line:16px;--heading-h4-mobile-weight:600;--heading-h5-mobile-size:13px;--heading-h5-mobile-line:16px;--heading-h5-mobile-weight:500;--heading-h6-mobile-size:11px;--heading-h6-mobile-line:14px;--heading-h6-mobile-weight:500;--text-xl-size:20px;--text-xl-line:26px;--text-xl-weight:400;--text-large-size:18px;--text-large-line:24px;--text-large-weight:400;--text-regular-size:15px;--text-regular-line:20px;--text-regular-weight:400;--text-small-size:13px;--text-small-line:16px;--text-small-weight:400;--text-small-emphasis-weight:500;--text-small-bold-weight:600;--text-xs-size:10px;--text-xs-line:13px;--text-xs-weight:500;--text-xs-bold-weight:600}.new-form-input{align-items:flex-start;align-self:stretch;display:flex;flex-direction:column;gap:var(--spacing-sm);width:100%}.new-form-input__label{align-items:center;color:var(--label-primary);display:flex;font-size:15px;font-weight:600;justify-content:space-between;line-height:20px;width:100%}.new-form-input__label,.new-form-input__label-optional{font-family:var(--font-family-sans,\"Geist\",sans-serif);font-style:normal}.new-form-input__label-optional{color:var(--label-secondary);font-size:13px;font-weight:400;line-height:16px}.new-form-input__input{background-color:var(--surfaces-main-background-secondary);background:var(--surface-secondary);border:2px solid var(--border-primary);border-radius:var(--radius-md);color:var(--labels-main-label-primary,#121e52);flex:1 0 0;font-family:var(--font-family-sans);font-size:var(--text-regular-size);font-weight:var(--text-regular-weight);line-height:var(--text-regular-line);min-height:40px;padding:8px 10px;transition:all .2s ease;width:100%}@media (max-width:768px){.new-form-input__input{font-size:16px}}.new-form-input__input:focus{background-color:var(--surfaces-main-background-secondary,#f8f8fa);border-color:var(--border-selected,#6200ee);outline:none}.new-form-input__input::placeholder{color:var(--labels-main-label-secondary,#626a90)}.new-form-input__textarea{background-color:var(--surfaces-main-background-secondary,#f8f8fa);border:1px solid var(--borders-main-border-primary,#e8e9ef);border-radius:var(--radius-md,4px);color:var(--labels-main-label-primary,#121e52);font-family:var(--font-family-sans,\"Geist\",sans-serif);font-size:var(--text-regular-size,15px);line-height:var(--text-regular-line,20px);min-height:120px;padding:8px 10px;resize:vertical;transition:all .2s ease;width:100%}@media (max-width:768px){.new-form-input__textarea{font-size:16px}}.new-form-input__textarea:focus{border-color:var(--border-selected,#6200ee);outline:none}.new-form-input__textarea::placeholder{color:var(--labels-main-label-secondary,#626a90)}.new-form-input__input-with-icon{align-items:center;background-color:var(--surfaces-main-background-secondary,#f8f8fa);border:2px solid var(--border-primary,#e8e9ef);border-radius:var(--radius-md,4px);display:flex;gap:var(--spacing-sm,8px);min-height:52px;padding:8px 10px;transition:all .2s ease;width:70%}.new-form-input__input-with-icon:focus-within{border-color:var(--border-selected,#6200ee)}.new-form-input__input-with-icon .icon{align-items:center;display:flex;flex-shrink:0;height:24px;justify-content:center;order:-1;width:24px}.new-form-input__input-with-icon--right .icon{order:1}.new-form-input__input-with-icon input{background:#0000;border:none;color:var(--label-primary);flex:1;font-family:var(--font-family-sans,\"Geist\",sans-serif);font-size:var(--text-regular-size,15px);line-height:var(--text-regular-line,20px)}@media (max-width:768px){.new-form-input__input-with-icon input{font-size:16px}}.new-form-input__input-with-icon input:focus{outline:none}.new-form-input__input-with-icon input::placeholder{color:var(--labels-main-label-secondary,#626a90)}.new-form-input__input-with-icon input[type=date]::-webkit-calendar-picker-indicator{-webkit-appearance:none;display:none}.new-form-input__input-with-icon input[type=date]::-webkit-inner-spin-button,.new-form-input__input-with-icon input[type=date]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.new-form-input__verification-code{display:flex;gap:var(--spacing-sm,8px);height:62px}.new-form-input__verification-code .code-input{background-color:var(--surfaces-main-background-secondary,#f8f8fa);border:2px solid var(--borders-main-border-primary,#e8e9ef);border-radius:var(--radius-md,4px);color:var(--labels-main-label-primary,#121e52);flex:1;font-family:var(--font-family-sans,\"Geist\",sans-serif);font-size:var(--text-lg-size,18px);font-weight:var(--heading-h3-weight,600);text-align:center;transition:all .2s ease}.new-form-input__verification-code .code-input:focus{border-color:var(--border-selected,#6200ee);outline:none}.new-form-input__helper-text{color:var(--label-secondary,#626a90);font-family:var(--font-family-sans,\"Geist\",sans-serif);font-size:var(--text-regular-size,15px);font-style:normal;font-weight:400;line-height:var(--text-regular-line,20px);margin-top:2px;min-width:max-content;white-space:nowrap}@media (max-width:768px){.new-form-input__helper-text{word-wrap:break-word;min-width:unset;white-space:normal}}.new-form-input__error-text{color:var(--labels-status-label-error,#ef4444);font-family:var(--font-family-sans,\"Geist\",sans-serif);font-size:11px;font-style:normal;font-weight:400;line-height:14px;margin-top:2px}.new-form-input--active .new-form-input__input{border-color:var(--border-selected,#6200ee)}.new-form-input--error .new-form-input__input{border-color:var(--borders-status-border-error,#ef4444)}.new-form-input--disabled{opacity:var(--opacity-50,.5);pointer-events:none}.new-form-input--on-surface .new-form-input__input,.new-form-input--on-surface .new-form-input__input-with-icon,.new-form-input--on-surface .new-form-input__textarea{background-color:var(--surface-primary,#fff);background:var(--surface-primary,#fff)}.new-form-input--on-surface .new-form-input__input-with-icon:focus,.new-form-input--on-surface .new-form-input__input-with-icon:focus-within,.new-form-input--on-surface .new-form-input__input:focus,.new-form-input--on-surface .new-form-input__input:focus-within,.new-form-input--on-surface .new-form-input__textarea:focus,.new-form-input--on-surface .new-form-input__textarea:focus-within{background-color:var(--surface-primary,#fff)}.new-form-input.dob-input .new-form-input__label{color:var(--label-secondary,#626a90)}.surface-context--secondary .new-form-input__input,.surface-context--secondary .new-form-input__input-with-icon,.surface-context--secondary .new-form-input__textarea{background-color:var(--surface-primary,#fff);background:var(--surface-primary,#fff)}.surface-context--secondary .new-form-input__input-with-icon:focus,.surface-context--secondary .new-form-input__input-with-icon:focus-within,.surface-context--secondary .new-form-input__input:focus,.surface-context--secondary .new-form-input__input:focus-within,.surface-context--secondary .new-form-input__textarea:focus,.surface-context--secondary .new-form-input__textarea:focus-within{background-color:var(--surface-primary,#fff)}";
 styleInject(css_248z);
 
 export { css_248z as default };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@licklist/design",
-  "version": "0.78.34",
+  "version": "0.78.36",
   "repository": {
     "type": "git",
     "url": "git+ssh://git@bitbucket.org/bookedit-licklist/licklist_design.git"
@@ -42,7 +42,7 @@
     ]
   },
   "peerDependencies": {
-    "@licklist/core": "0.36.12",
+    "@licklist/core": "0.36.13",
     "@licklist/eslint-config": "0.5.6",
     "@licklist/plugins": "0.36.10",
     "clsx": "2.1.1",
@@ -64,7 +64,7 @@
     "@dnd-kit/utilities": "2.0.0",
     "@fortawesome/fontawesome-svg-core": "1.2.34",
     "@fortawesome/free-solid-svg-icons": "5.15.2",
-    "@licklist/core": "0.36.12",
+    "@licklist/core": "0.36.13",
     "@licklist/eslint-config": "0.5.6",
     "@licklist/plugins": "0.36.10",
     "@mantine/core": "6.0.22",

package/src/index.ts

@@ -29,7 +29,8 @@ export * from './report'
 export * from './venue-map-sets'
 export * from './affiliate'
 export * from './typeahead-helper'
-export * from './zone'
+export { ZoneForm } from './zone/form'
+export type { ZoneFormProps } from './zone/form'
 export * from './resource'
 export * from './virtualized'
 export * from './customers'
@@ -50,3 +51,5 @@ export * from './v2/components'
 export * from './v2/dashboard-analytics'
 export * from './v2/navigation/DashboardLayout'
 export * from './v2/pages/Settings'
+export * from './v2/pages/ZonesResources'
+export * from './v2/components'

package/src/provider/location-input/LocationInput.tsx

@@ -71,7 +71,7 @@ export function LocationInput({ path }: { path: TimeZonePath }) {
             <option key='' value='' disabled>
               {t('chooseTimeZone')}
             </option>
-            {data.map((zone) => (
+            {data?.map((zone) => (
               <option key={zone.id} value={zone.id.toString()}>
                 {zone.name}
               </option>

package/src/v2/components/ActionMenu/ActionMenu.scss

@@ -7,46 +7,33 @@
 
   &__trigger {
     display: flex;
-    width: 40px;
-    height: 40px;
-    padding: 8px;
+    width: 32px;
+    height: 32px;
+    padding: 0;
     justify-content: center;
     align-items: center;
     border-radius: 50%;
-    border: 1px solid var(--border-primary, #E8E9EF);
+    border: none;
     background: var(--surface-action-soft);
     color: var(--actions-regular, #5D5BF4);
     cursor: pointer;
     transition: all 0.2s ease;
+    position: relative;
 
     &:hover {
-      background: var(--surface-action-soft);
+      opacity: 0.8;
     }
 
     &--close {
       border-radius: 50%;
       background: #F4F4FE;
-      border: 1px solid #F4F4FE;
 
       &:hover {
         background: #E8E8FD;
+        opacity: 1;
       }
     }
 
-    svg {
-      width: 28px;
-      height: 28px;
-    }
-
-    .action-menu__circle {
-      position: absolute;
-      top: 50%;
-      left: 50%;
-      transform: translate(-50%, -50%);
-      width: 32px;
-      height: 32px;
-      z-index: -1;
-    }
   }
 
   &__dropdown {

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

@@ -0,0 +1,58 @@
+import React from 'react'
+import { Meta, StoryObj } from '@storybook/react'
+import { ActionMenu } from './ActionMenu'
+
+export default {
+  title: 'v2/Components/ActionMenu',
+  component: ActionMenu,
+} as Meta<typeof ActionMenu>
+
+type Story = StoryObj<typeof ActionMenu>
+
+const defaultItems = [
+  { label: 'Edit', onClick: () => console.log('Edit') },
+  { label: 'Duplicate', onClick: () => console.log('Duplicate') },
+  { label: 'Delete', onClick: () => console.log('Delete'), variant: 'danger' as const },
+]
+
+export const Default: Story = {
+  args: {
+    items: defaultItems,
+  },
+  decorators: [
+    (Story) => (
+      <div style={{ display: 'flex', justifyContent: 'flex-end', paddingTop: 200 }}>
+        <Story />
+      </div>
+    ),
+  ],
+}
+
+export const OpenDown: Story = {
+  args: {
+    items: defaultItems,
+    direction: 'down',
+  },
+  decorators: [
+    (Story) => (
+      <div style={{ display: 'flex', justifyContent: 'flex-end', paddingTop: 20 }}>
+        <Story />
+      </div>
+    ),
+  ],
+}
+
+export const WithCustomIconColour: Story = {
+  args: {
+    items: defaultItems,
+    iconColour: '#E0423A',
+    direction: 'down',
+  },
+}
+
+export const SingleItem: Story = {
+  args: {
+    items: [{ label: 'Edit', onClick: () => console.log('Edit') }],
+    direction: 'down',
+  },
+}

package/src/v2/components/ActionMenu/ActionMenu.tsx

@@ -1,5 +1,5 @@
 import React, { useState, useRef, useEffect, useLayoutEffect } from 'react'
-import { CloseIcon, EllipsisIcon, CircleIcon } from '../../icons'
+import { CloseIcon, EllipsisIcon } from '../../icons'
 import './ActionMenu.scss'
 
 export interface ActionMenuItem {
@@ -83,10 +83,7 @@ export const ActionMenu: React.FC<ActionMenuProps> = ({ items, className = '', i
         {isOpen ? (
           <CloseIcon width={18} height={18} />
         ) : (
-          <>
-            <CircleIcon width={32} height={32} className="action-menu__circle" fill="var(--surface-action-soft)" />
-            <EllipsisIcon width={18} height={18} fill="var(--fill-action)" />
-          </>
+          <EllipsisIcon width={18} height={4} fill="var(--fill-action)" />
         )}
       </button>
 
@@ -112,4 +109,4 @@ export const ActionMenu: React.FC<ActionMenuProps> = ({ items, className = '', i
       )}
     </div>
   )
-}
+}

package/src/v2/components/Badge/Badge.scss

@@ -1,19 +1,20 @@
 .new-badge {
+  font-family: var(--font-family-mono, 'Geist Mono', monospace);
   display: inline-flex;
-  align-items: center;
+  padding: 6px 10px;
   justify-content: center;
-  padding: 2px 12px;
-  border-radius: 100px;
+  align-items: center;
+  gap: 1px;
+  color: var(--label-primary, #121E52);
+  font-size: 11px;
+  font-style: normal;
+  font-weight: 600;
+  line-height: 14px;
+  height: 28px;
 
   &--with-icon {
-    padding-left: 8px;
+    padding-left: 6px;
   }
-  font-family: var(--font-family-mono, 'Geist Mono', monospace);
-  font-size: var(--text-small-size, 13px);
-  font-weight: 500;
-  line-height: 1.2;
-  white-space: nowrap;
-  gap: 4px;
 
   &__icon {
     display: inline-flex;
@@ -21,39 +22,40 @@
     justify-content: center;
 
     svg {
-      width: 16px;
-      height: 16px;
+      width: 18px;
+      height: 18px;
     }
   }
 
   &--success {
-    background-color: var(--surface-status-success, #EEF9EA);
-    color: var(--label-status-success, #3A8A1F);
+    border-radius: var(--padding-lg, 24px);
     border: 1px solid var(--border-status-success, #C9ECBD);
+    background: var(--surface-colour-green-soft, #EEF9EA);
   }
 
   &--danger {
-    background-color: var(--surface-status-error, #FCECEB);
-    color: var(--label-status-error, #CC3C35);
+    border-radius: var(--padding-lg, 24px);
     border: 1px solid var(--border-status-error, #F5C4C2);
+    background: var(--surface-colour-red-soft, #FCECEB);
   }
 
   &--warning {
-    background-color: var(--surface-status-alert, #FCF6E7);
-    color: var(--label-status-alert, #FD7E14);
+    border-radius: var(--padding-lg, 24px);
     border: 1px solid var(--border-status-alert, #FED7B6);
+    background: var(--surface-colour-yellow-soft, #FCF6E7);
   }
 
   &--info {
-    background-color: var(--surface-status-info, #E7F4FC);
-    color: var(--label-status-info, #0D7FCE);
+    border-radius: var(--padding-lg, 24px);
     border: 1px solid var(--border-status-info, #B4DBF6);
+    background: var(--surface-colour-blue-soft, #E7F4FC);
   }
 
   &--neutral {
     background-color: var(--surface-secondary, #F8F8FA);
     color: var(--label-secondary, #9399B3);
-    border: 1px solid var(--border-primary, #E8E9EF);
+    border-radius: var(--padding-lg, 24px);
+    border: 1px solid var(--border-colour-overlay, rgba(18, 30, 82, 0.10));
   }
 }
 
@@ -71,11 +73,11 @@
 
 @media (max-width: 480px) {
   .new-badge {
-    padding: 1px 8px;
+    padding: 1px 10px;
     font-size: 11px;
 
     &--with-icon {
-      padding-left: 4px;
+      padding-left: 6px;
     }
   }
 }

package/src/v2/components/Badge/Badge.tsx

@@ -6,6 +6,7 @@ export interface BadgeProps {
   variant?: 'success' | 'danger' | 'warning' | 'info' | 'neutral'
   className?: string
   icon?: React.ReactNode
+  onClick?: (e: React.MouseEvent) => void
 }
 
 export const Badge: React.FC<BadgeProps> = ({
@@ -13,11 +14,13 @@ export const Badge: React.FC<BadgeProps> = ({
   variant = 'neutral',
   className = '',
   icon,
+  onClick,
 }) => (
   <span
     className={`new-badge new-badge--${variant} ${
       icon ? 'new-badge--with-icon' : ''
     } ${className}`}
+    onClick={onClick}
   >
     {icon && <span className="new-badge__icon">{icon}</span>}
     {children}

package/src/v2/components/Checkbox/Checkbox.scss

@@ -3,9 +3,8 @@
 .checkbox {
   display: flex;
   max-width: 500px;
-  align-items: flex-start;
+  align-items: center;
   gap: 11px;
-  align-self: stretch;
 
   @media (min-width: 992px) {
     max-width: unset;
@@ -13,11 +12,12 @@
 
   &__wrapper {
     display: flex;
-    align-items: flex-start;
+    align-items: center;
     gap: 11px;
     cursor: pointer;
     user-select: none;
     width: 100%;
+    margin: 0;
   }
 
   &__input {

package/src/v2/components/Customer/CustomersList.scss

@@ -54,6 +54,7 @@
       width: 30px;
       height: 30px;
       flex-shrink: 0;
+      fill: var(--shade-lighter);
     }
   }
 
@@ -111,6 +112,10 @@
 
     .search-input-wrapper {
       width: 70%;
+
+      .new-form-input__icon {
+        color: var(--shade-lighter);
+      }
     }
 
     .search-helper-text {
@@ -125,13 +130,21 @@
 
     .filters-actions-row {
       display: flex;
-      justify-content: space-between;
-      align-items: center;
-      gap: 24px;
+      flex-direction: column;
+      align-items: flex-start;
+      gap: 16px;
       width: 100%;
+
+      @media (min-width: 1024px) {
+        flex-direction: row;
+        justify-content: space-between;
+        align-items: center;
+        gap: 24px;
+      }
     }
 
     .quick-filters-wrapper {
+      width: 100%;
       flex: 1;
     }
 
@@ -139,6 +152,12 @@
       display: flex;
       gap: 12px;
       align-items: center;
+
+      .ghost-button {
+        &__icon svg {
+          fill: var(--shade-lighter);
+        }
+      }
     }
 
     &__row {
@@ -165,19 +184,46 @@
     &__sub {
       font-size: 13px;
       color: #9399B3;
+      display: block !important;
     }
     &__id {
       font-size: 13px;
       color: #9399B3;
-      display: none;
+      display: none !important;
     }
 
     &:hover {
       .entity-cell__id {
-        display: block;
+        display: block !important;
       }
       .entity-cell__sub {
-        display: none;
+        display: none !important;
+      }
+    }
+
+    // Ensure hover state on the row also triggers the same behavior
+    // This addresses potential flickering when moving between cells
+    :is(.new-table__row:hover) & {
+      .entity-cell__id {
+        display: block !important;
+      }
+      .entity-cell__sub {
+        display: none !important;
+      }
+    }
+
+    // When entity-cell__sub is missing (like in template list),
+    // showing entity-cell__id on hover causes height jump.
+    // We only want to swap if both exist, or ensure height is stable.
+    &:not(:has(.entity-cell__sub)) {
+      .entity-cell__id {
+        display: block !important;
+      }
+    }
+
+    :is(.new-table__row:hover) &:not(:has(.entity-cell__sub)) {
+      .entity-cell__id {
+        display: block !important;
       }
     }
   }
@@ -542,6 +588,7 @@
             "customer bookings"
             "divider divider"
             "next last"
+            "status status"
             "actions actions";
           grid-template-columns: 1fr auto;
           border: 1px solid var(--border-primary, #E8E9EF);
@@ -604,6 +651,10 @@
             grid-area: last; // Reuse 'last' area for waiver in waiver list
             text-align: right;
           }
+          &.waiver-col-mb {
+            grid-area: status;
+            text-align: left;
+          }
         }
       }
     }
@@ -679,7 +730,7 @@
     .waiver-cell {
       display: flex;
       flex-direction: column;
-      align-items: flex-end;
+      align-items: flex-start;
       min-width: 0;
       overflow: hidden;
 
@@ -688,7 +739,7 @@
         color: #626A90;
         font-weight: 500;
         margin-bottom: 4px;
-        text-align: right;
+        text-align: left;
         white-space: nowrap;
         overflow: hidden;
         text-overflow: ellipsis;
@@ -697,7 +748,7 @@
 
       .v2-badge {
         display: inline-flex;
-        margin-left: auto;
+        margin-right: auto;
       }
     }
 

package/src/v2/components/FormField/FormField.scss

@@ -33,7 +33,7 @@
     padding: 8px 10px;
     height: 40px;
     font-family: var(--font-family-sans, 'Geist', sans-serif);
-    font-size: var(--text-regular-size, 15px);
+    font-size: var(--text-regular-size, 16px);
     line-height: var(--text-regular-line, 20px);
     color: var(--label-primary, #121e52);
     background-color: var(--surface-secondary, #f8f8fa);
@@ -66,6 +66,14 @@
       cursor: not-allowed;
       opacity: 0.6;
     }
+
+    &--on-surface {
+      background-color: var(--surface-primary, #fff);
+
+      &:focus {
+        background-color: var(--surface-primary, #fff);
+      }
+    }
   }
 
   &__help-text {
@@ -81,3 +89,14 @@
   }
 }
 
+// Auto-detect: swap input backgrounds when inside a surface-secondary container
+.surface-context--secondary {
+  .form-field__input {
+    background-color: var(--surface-primary, #fff);
+
+    &:focus {
+      background-color: var(--surface-primary, #fff);
+    }
+  }
+}
+

package/src/v2/components/FormField/FormField.tsx

@@ -4,30 +4,44 @@ import './FormField.scss'
 export interface FormFieldProps extends InputHTMLAttributes<HTMLInputElement> {
   label?: string
   error?: string
+  hasError?: boolean
+  success?: boolean
   helpText?: string
   required?: boolean
+  variant?: 'default' | 'on-surface'
 }
 
 export const FormField = forwardRef<HTMLInputElement, FormFieldProps>(
-  ({ label, error, helpText, required, className = '', ...props }, ref) => (
-    <div className={`form-field ${className}`}>
-      {label && (
-        <label className="form-field__label">
-          {label}
-          {required && <span className="form-field__required">*</span>}
-        </label>
-      )}
-      <input
-        ref={ref}
-        className={`form-field__input ${error ? 'form-field__input--error' : ''}`}
-        {...props}
-      />
-      {helpText && !error && (
-        <span className="form-field__help-text">{helpText}</span>
-      )}
-      {error && <span className="form-field__error-text">{error}</span>}
-    </div>
-  )
+  ({ label, error, hasError, success, helpText, required, variant, className = '', ...props }, ref) => {
+    const showError = error || hasError
+    const showSuccess = success && !showError
+    const inputClassName = [
+      'form-field__input',
+      showError ? 'form-field__input--error' : '',
+      showSuccess ? 'form-field__input--success' : '',
+      variant === 'on-surface' ? 'form-field__input--on-surface' : '',
+    ].filter(Boolean).join(' ')
+
+    return (
+      <div className={`form-field ${className}`}>
+        {label && (
+          <label className="form-field__label">
+            {label}
+            {required && <span className="form-field__required">*</span>}
+          </label>
+        )}
+        <input
+          ref={ref}
+          className={inputClassName}
+          {...props}
+        />
+        {helpText && !showError && (
+          <span className="form-field__help-text">{helpText}</span>
+        )}
+        {error && <span className="form-field__error-text">{error}</span>}
+      </div>
+    )
+  }
 )
 
 FormField.displayName = 'FormField'