@licklist/design 0.78.41 → 0.78.44

package/dist/v2/styles/tokens/_status.scss

@@ -0,0 +1,108 @@
+/* Status/Alert Color tokens derived from Figma Alerts & Errors page
+ * Spec: https://www.figma.com/design/HPb8SEwQH2rrFAD2sRlKei/BKIT---Booked-Kit?node-id=167:968
+ */
+
+:root {
+    /* Success/Green Status Colors */
+    --color-success-fill: #2d6b18;
+    --color-success-background: #eef9ea;
+    --color-success-border: #c9ecbd;
+
+    /* Error/Red Status Colors */
+    --color-error-fill: #cc3c35;
+    --color-error-background: #fceceb;
+    --color-error-border: #f5c4c2;
+
+    /* Alert/Warning/Yellow Status Colors */
+    --color-alert-fill: #fd7e14;
+    --color-alert-background: #fcf6e7;
+    --color-alert-border: #f6e3b4;
+
+    /* Info/Blue Status Colors */
+    --color-info-fill: #0e8ce2;
+    --color-info-background: #e7f4fc;
+    --color-info-border: #b4dbf6;
+}
+
+/* Legacy format for compatibility with existing alias system */
+:root {
+    /* Surfaces - Status backgrounds */
+    --surfaces-status-background-success: var(--color-success-background);
+    --surfaces-status-background-error: var(--color-error-background);
+    --surfaces-status-background-alert: var(--color-alert-background);
+    --surfaces-status-background-info: var(--color-info-background);
+
+    /* Borders - Status borders */
+    --borders-status-border-success: var(--color-success-border);
+    --borders-status-border-error: var(--color-error-border);
+    --borders-status-border-alert: var(--color-alert-border);
+    --borders-status-border-info: var(--color-info-border);
+
+    /* Fills - Status icons/text */
+    --fills-status-fill-success: var(--color-success-fill);
+    --fills-status-fill-error: var(--color-error-fill);
+    --fills-status-fill-alert: var(--color-alert-fill);
+    --fills-status-fill-info: var(--color-info-fill);
+}
+
+/* SCSS Map for status colors */
+$status-colors: (
+    success: (
+        fill: var(--color-success-fill),
+        background: var(--color-success-background),
+        border: var(--color-success-border)
+    ),
+    error: (
+        fill: var(--color-error-fill),
+        background: var(--color-error-background),
+        border: var(--color-error-border)
+    ),
+    alert: (
+        fill: var(--color-alert-fill),
+        background: var(--color-alert-background),
+        border: var(--color-alert-border)
+    ),
+    info: (
+        fill: var(--color-info-fill),
+        background: var(--color-info-background),
+        border: var(--color-info-border)
+    )
+);
+
+/* Mixins for status colors */
+@mixin status-success() {
+    background-color: var(--surfaces-status-background-success);
+    border-color: var(--borders-status-border-success);
+    color: var(--fills-status-fill-success);
+}
+
+@mixin status-error() {
+    background-color: var(--surfaces-status-background-error);
+    border-color: var(--borders-status-border-error);
+    color: var(--fills-status-fill-error);
+}
+
+@mixin status-alert() {
+    background-color: var(--surfaces-status-background-alert);
+    border-color: var(--borders-status-border-alert);
+    color: var(--fills-status-fill-alert);
+}
+
+@mixin status-info() {
+    background-color: var(--surfaces-status-background-info);
+    border-color: var(--borders-status-border-info);
+    color: var(--fills-status-fill-info);
+}
+
+/* Helper mixin for getting status colors */
+@function get-status-color($status, $type) {
+    $status-map: map-get($status-colors, $status);
+    @if $status-map {
+        $color: map-get($status-map, $type);
+        @if $color {
+            @return $color;
+        }
+    }
+    @warn "Unknown status color: #{$status}.#{$type}";
+    @return null;
+}

package/dist/v2/styles/tokens/_typography.scss

@@ -0,0 +1,146 @@
+/* Typography tokens and mixins derived from Figma
+ * Spec: https://www.figma.com/design/HPb8SEwQH2rrFAD2sRlKei/BKIT---Booked-Kit?node-id=30-95&m=dev
+ */
+
+:root {
+    /* Families */
+    --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;
+
+  /* Headings Desktop */
+    --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;
+
+    /* Headings Mobile */
+    --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;
+
+    /* Body Desktop */
+    --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;
+}
+
+/* Breakpoint: adjust if your system uses different breakpoints */
+$bp-mobile-max: 767px;
+
+/* Map of variants to CSS variable tuples: (size, line, weight) */
+$typo-map: (
+    'heading.xxl': (var(--heading-xxl-size), var(--heading-xxl-line), var(--heading-xxl-weight), var(--font-family-sans)),
+    'heading.xl': (var(--heading-xl-size), var(--heading-xl-line), var(--heading-xl-weight), var(--font-family-sans)),
+    'heading.h1': (var(--heading-h1-size), var(--heading-h1-line), var(--heading-h1-weight), var(--font-family-sans)),
+    'heading.h2': (var(--heading-h2-size), var(--heading-h2-line), var(--heading-h2-weight), var(--font-family-sans)),
+    'heading.h3': (var(--heading-h3-size), var(--heading-h3-line), var(--heading-h3-weight), var(--font-family-sans)),
+    'heading.h4': (var(--heading-h4-size), var(--heading-h4-line), var(--heading-h4-weight), var(--font-family-sans)),
+    'heading.h5': (var(--heading-h5-size), var(--heading-h5-line), var(--heading-h5-weight), var(--font-family-sans)),
+    'heading.h6': (var(--heading-h6-size), var(--heading-h6-line), var(--heading-h6-weight), var(--font-family-sans)),
+
+    'heading.xxl.mobile': (var(--heading-xxl-mobile-size), var(--heading-xxl-mobile-line), var(--heading-xxl-mobile-weight), var(--font-family-sans)),
+    'heading.xl.mobile': (var(--heading-xl-mobile-size), var(--heading-xl-mobile-line), var(--heading-xl-mobile-weight), var(--font-family-sans)),
+    'heading.h1.mobile': (var(--heading-h1-mobile-size), var(--heading-h1-mobile-line), var(--heading-h1-mobile-weight), var(--font-family-sans)),
+    'heading.h2.mobile': (var(--heading-h2-mobile-size), var(--heading-h2-mobile-line), var(--heading-h2-mobile-weight), var(--font-family-sans)),
+    'heading.h3.mobile': (var(--heading-h3-mobile-size), var(--heading-h3-mobile-line), var(--heading-h3-mobile-weight), var(--font-family-sans)),
+    'heading.h4.mobile': (var(--heading-h4-mobile-size), var(--heading-h4-mobile-line), var(--heading-h4-mobile-weight), var(--font-family-sans)),
+    'heading.h5.mobile': (var(--heading-h5-mobile-size), var(--heading-h5-mobile-line), var(--heading-h5-mobile-weight), var(--font-family-sans)),
+    'heading.h6.mobile': (var(--heading-h6-mobile-size), var(--heading-h6-mobile-line), var(--heading-h6-mobile-weight), var(--font-family-sans)),
+
+    'text.xl': (var(--text-xl-size), var(--text-xl-line), var(--text-xl-weight), var(--font-family-sans)),
+    'text.large': (var(--text-large-size), var(--text-large-line), var(--text-large-weight), var(--font-family-sans)),
+    'text.regular': (var(--text-regular-size), var(--text-regular-line), var(--text-regular-weight), var(--font-family-sans)),
+    'text.small': (var(--text-small-size), var(--text-small-line), var(--text-small-weight), var(--font-family-sans)),
+    'text.small.emphasis': (var(--text-small-size), var(--text-small-line), var(--text-small-emphasis-weight), var(--font-family-sans)),
+    'text.small.bold': (var(--text-small-size), var(--text-small-line), var(--text-small-bold-weight), var(--font-family-sans)),
+    'text.xs': (var(--text-xs-size), var(--text-xs-line), var(--text-xs-weight), var(--font-family-sans)),
+    'text.xs.bold': (var(--text-xs-size), var(--text-xs-line), var(--text-xs-bold-weight), var(--font-family-sans))
+);
+
+@mixin apply-typo($tuple) {
+    $size: nth($tuple, 1);
+    $line: nth($tuple, 2);
+    $weight: nth($tuple, 3);
+    $family: nth($tuple, 4);
+    font-family: $family;
+    font-size: $size;
+    line-height: $line;
+    font-weight: $weight;
+    color: var(--labels-main-label-primary, #121E52);
+}
+
+@mixin typography($variant) {
+    @if map-has-key($typo-map, $variant) {
+        @include apply-typo(map-get($typo-map, $variant));
+    }
+
+    @else {
+        /* Fallback to regular text */
+        @include apply-typo(map-get($typo-map, 'text.regular'));
+    }
+}
+
+/* Convenience mixin that switches to mobile variant under mobile breakpoint */
+@mixin responsive-heading($desktopVariant, $mobileVariant) {
+    @include typography($desktopVariant);
+
+    @media (max-width: $bp-mobile-max) {
+        @include typography($mobileVariant);
+    }
+}

package/dist/v2/types/navigation.d.ts

@@ -1,6 +1,8 @@
+import React from 'react';
 export interface NavigationItem {
     id: string;
     label: string;
+    icon?: React.ReactNode;
     path: string;
     requiredRoles?: string[];
     requiredPermissions?: string[];

package/dist/v2/types/navigation.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"navigation.d.ts","sourceRoot":"","sources":["../../../src/v2/types/navigation.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,cAAc;IAC7B,EAAE,EAAE,MAAM,CAAA;IACV,KAAK,EAAE,MAAM,CAAA;IACb,IAAI,EAAE,MAAM,CAAA;IACZ,aAAa,CAAC,EAAE,MAAM,EAAE,CAAA;IACxB,mBAAmB,CAAC,EAAE,MAAM,EAAE,CAAA;IAC9B,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,aAAa,CAAC,EAAE,OAAO,CAAA;CACxB;AAED,MAAM,WAAW,eAAe;IAC9B,KAAK,EAAE,MAAM,EAAE,CAAA;IACf,WAAW,EAAE,MAAM,EAAE,CAAA;IACrB,OAAO,EAAE,OAAO,CAAA;IAChB,WAAW,EAAE,OAAO,CAAA;IACpB,OAAO,CAAC,EAAE,MAAM,CAAA;CACjB"}
+{"version":3,"file":"navigation.d.ts","sourceRoot":"","sources":["../../../src/v2/types/navigation.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,MAAM,WAAW,cAAc;IAC7B,EAAE,EAAE,MAAM,CAAA;IACV,KAAK,EAAE,MAAM,CAAA;IACb,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACtB,IAAI,EAAE,MAAM,CAAA;IACZ,aAAa,CAAC,EAAE,MAAM,EAAE,CAAA;IACxB,mBAAmB,CAAC,EAAE,MAAM,EAAE,CAAA;IAC9B,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,aAAa,CAAC,EAAE,OAAO,CAAA;CACxB;AAED,MAAM,WAAW,eAAe;IAC9B,KAAK,EAAE,MAAM,EAAE,CAAA;IACf,WAAW,EAAE,MAAM,EAAE,CAAA;IACrB,OAAO,EAAE,OAAO,CAAA;IAChB,WAAW,EAAE,OAAO,CAAA;IACpB,OAAO,CAAC,EAAE,MAAM,CAAA;CACjB"}

package/dist/virtualized/components/VirtualizedGrid.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"VirtualizedGrid.d.ts","sourceRoot":"","sources":["../../../src/virtualized/components/VirtualizedGrid.tsx"],"names":[],"mappings":"AACA,OAAO,EAAQ,SAAS,EAAE,SAAS,EAAE,MAAM,mBAAmB,CAAA;AAG9D,MAAM,MAAM,oBAAoB,GAAG,SAAS,GAAG,OAAO,CAAC,SAAS,CAAC,CAAA;AAEjE,eAAO,MAAM,eAAe,GAAI,OAAO,oBAAoB,4CAc1D,CAAA"}
+{"version":3,"file":"VirtualizedGrid.d.ts","sourceRoot":"","sources":["../../../src/virtualized/components/VirtualizedGrid.tsx"],"names":[],"mappings":"AACA,OAAO,EAAQ,SAAS,EAAE,SAAS,EAAE,MAAM,mBAAmB,CAAA;AAG9D,MAAM,MAAM,oBAAoB,GAAG,SAAS,GAAG,OAAO,CAAC,SAAS,CAAC,CAAA;AAEjE,eAAO,MAAM,eAAe,GAAI,OAAO,oBAAoB,4CAe1D,CAAA"}

package/dist/virtualized/components/VirtualizedWindowScroller.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"VirtualizedWindowScroller.d.ts","sourceRoot":"","sources":["../../../src/virtualized/components/VirtualizedWindowScroller.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAyB,MAAM,OAAO,CAAA;AAExD,OAAO,EAEL,mBAAmB,EACnB,wBAAwB,EACzB,MAAM,mBAAmB,CAAA;AAG1B,MAAM,MAAM,mCAAmC,GAAG;IAChD,gBAAgB,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,MAAM,CAAA;KAAE,CAAA;CACpD,GAAG,wBAAwB,CAAA;AAE5B,MAAM,MAAM,8BAA8B,GAAG,IAAI,CAC/C,mBAAmB,EACnB,UAAU,CACX,GAAG;IACF,QAAQ,EAAE,CAAC,KAAK,EAAE,mCAAmC,KAAK,SAAS,CAAA;IACnE,YAAY,CAAC,EAAE,MAAM,IAAI,CAAA;CAC1B,CAAA;AAED,MAAM,MAAM,qCAAqC,GAAG,IAAI,CACtD,mBAAmB,EACnB,UAAU,CACX,GAAG;IACF,QAAQ,EAAE,mCAAmC,CAAA;CAC9C,CAAA;AA8BD,eAAO,MAAM,yBAAyB,GACpC,OAAO,8BAA8B,4CAKtC,CAAA"}
+{"version":3,"file":"VirtualizedWindowScroller.d.ts","sourceRoot":"","sources":["../../../src/virtualized/components/VirtualizedWindowScroller.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAyB,MAAM,OAAO,CAAA;AAExD,OAAO,EAEL,mBAAmB,EACnB,wBAAwB,EACzB,MAAM,mBAAmB,CAAA;AAG1B,MAAM,MAAM,mCAAmC,GAAG;IAChD,gBAAgB,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,MAAM,CAAA;KAAE,CAAA;CACpD,GAAG,wBAAwB,CAAA;AAE5B,MAAM,MAAM,8BAA8B,GAAG,IAAI,CAC/C,mBAAmB,EACnB,UAAU,CACX,GAAG;IACF,QAAQ,EAAE,CAAC,KAAK,EAAE,mCAAmC,KAAK,SAAS,CAAA;IACnE,YAAY,CAAC,EAAE,MAAM,IAAI,CAAA;CAC1B,CAAA;AAED,MAAM,MAAM,qCAAqC,GAAG,IAAI,CACtD,mBAAmB,EACnB,UAAU,CACX,GAAG;IACF,QAAQ,EAAE,mCAAmC,CAAA;CAC9C,CAAA;AA+BD,eAAO,MAAM,yBAAyB,GACpC,OAAO,8BAA8B,4CAKtC,CAAA"}

package/dist/virtualized/components/VirtualizedWindowScroller.js

@@ -68,14 +68,15 @@ var WrappedVirtualizedWindowScroller = function(param) {
     }, [
         windowDimensions
     ]);
-    return /*#__PURE__*/ jsx(WindowScroller, {
+    return(// @ts-ignore - library types may be incompatible with newer TS
+    /*#__PURE__*/ jsx(WindowScroller, {
         scrollElement: scrollElement,
         children: function(props) {
             return children(_object_spread_props(_object_spread({}, props), {
                 windowDimensions: windowDimensions
             }));
         }
-    });
+    }));
 };
 var VirtualizedWindowScroller = function(props) {
     return /*#__PURE__*/ jsx(VirtualizedContextProvider, {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@licklist/design",
-  "version": "0.78.41",
+  "version": "0.78.44",
   "repository": {
     "type": "git",
     "url": "git+ssh://git@bitbucket.org/bookedit-licklist/licklist_design.git"
@@ -42,7 +42,7 @@
     ]
   },
   "peerDependencies": {
-    "@licklist/core": "0.36.13",
+    "@licklist/core": "0.36.16",
     "@licklist/eslint-config": "0.5.6",
     "@licklist/plugins": "0.36.11",
     "clsx": "2.1.1",
@@ -194,7 +194,7 @@
     "rollup-plugin-peer-deps-external": "2.2.4",
     "rollup-plugin-postcss": "^4.0.2",
     "rollup-plugin-swc3": "0.11.2",
-    "rollup-plugin-typescript2": "0.31.0",
+    "rollup-plugin-typescript2": "^0.37.0",
     "sass": "^1.93.2",
     "sass-loader": "10.1.1",
     "storybook": "9.1.13",

package/rollup.config.js

@@ -40,12 +40,18 @@ export default [
         targets: [
           { src: './src/assets/*', dest: './dist/assets' },
           { src: './src/styles/*', dest: './dist/styles' },
+          { src: './src/v2/styles', dest: './dist/v2' },
           { src: './src/root.css', dest: './dist' },
         ],
       }),
 
       typescript({
         tsconfig: './tsconfig.build.json',
+        tsconfigOverride: {
+          compilerOptions: {
+            emitDeclarationOnly: false,
+          },
+        },
         clean: true,
       }),
     ],

package/src/index.ts

@@ -29,8 +29,7 @@ export * from './report'
 export * from './venue-map-sets'
 export * from './affiliate'
 export * from './typeahead-helper'
-export { ZoneForm } from './zone/form'
-export type { ZoneFormProps } from './zone/form'
+export { ZoneForm, type ZoneFormProps } from './zone/form'
 export * from './resource'
 export * from './virtualized'
 export * from './customers'

package/src/static/date-range-input/DateRangeInput.tsx

@@ -108,6 +108,7 @@ export const DateRangeInput = ({
         overlay={
           <Popover id={popoverId} className='rounded'>
             <Popover.Content className='shadow-lg rounded' ref={popoverRef}>
+              {/* @ts-ignore - library types may be incompatible with newer TS */}
               <DateRange
                 onChange={(item) => setState([item.selection])}
                 moveRangeOnFirstSelection={false}

package/src/v2/components/InputCheckbox/InputCheckbox.scss

@@ -16,7 +16,7 @@
     width: 16px;
     height: 16px;
     min-width: 16px;
-    border: 1px solid var(--border-primary, #e2e2e2);
+    border: 1px solid var(--border-primary, #e8e9ef);
     border-radius: 3px;
     background: var(--surface-primary, #fff);
     transition: all 0.15s ease;
@@ -37,8 +37,8 @@
   }
 
   &__input:checked + &__box {
-    background: var(--fill-selected, #14215a);
-    border-color: var(--fill-selected, #14215a);
+    background: var(--fill-selected, #14215A);
+    border-color: var(--fill-selected, #14215A);
 
     &::after {
       opacity: 1;

package/src/v2/components/NPSScore/NPSScore.tsx

@@ -45,7 +45,7 @@ const IconBigSmile = ({ size = 24, className = '' }: { size?: number; className?
 export const NPSScore: React.FC<NPSScoreProps> = ({
     firstName,
     onSubmit,
-    onDismiss,
+    onDismiss: _onDismiss,
     onSubmitDismiss,
 }) => {
     const [selectedScore, setSelectedScore] = useState<number | null>(null)
@@ -53,7 +53,7 @@ export const NPSScore: React.FC<NPSScoreProps> = ({
     const [role, setRole] = useState('')
     const [isSubmitting, setIsSubmitting] = useState(false)
     const [errors, setErrors] = useState<{ reason?: string; role?: string }>({})
-    const [showReasonField, setShowReasonField] = useState(false)
+    const [_showReasonField, _setShowReasonField] = useState(false)
     const [isSubmitted, setIsSubmitted] = useState(false)
 
     const handleSubmit = async () => {

package/src/v2/components/NewTabs/NewTabs.scss

@@ -6,7 +6,7 @@
   padding-bottom: 0;
   padding-left: 0;
   padding-top: 0;
-  margin: 20px 0 0 0;
+  margin: 20px 0 20px 0;
   border-bottom: 1px solid var(--border-primary, #E8E9EF);
 
   &__container {

package/src/v2/components/Tooltip/Tooltip.tsx

@@ -60,5 +60,4 @@ const Tooltip: React.FC<TooltipProps> = ({
     )
 }
 
-export { Tooltip, TooltipProvider, TooltipRoot, TooltipTrigger, TooltipContent }
-export type { TooltipProps }
+export { Tooltip, TooltipProvider, TooltipRoot, TooltipTrigger, TooltipContent }

package/src/v2/components/ZoneCard/ZoneCard.scss

@@ -200,6 +200,84 @@
   }
 }
 
+// Reorder row subtitle
+.zone-card__subtitle {
+  display: block;
+  font-family: var(--font-family-sans, 'Geist', system-ui, sans-serif);
+  font-size: 13px;
+  font-weight: 400;
+  line-height: 16px;
+  color: var(--label-secondary);
+  margin-top: 2px;
+}
+
+// Reorder screen styles
+.reorder-screen {
+  color: var(--label-primary);
+
+  &__header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    align-self: stretch;
+    height: 72px;
+    padding: 24px 0 8px 8px;
+    border-bottom: 1px solid var(--border-primary);
+  }
+
+  &__content {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    align-self: stretch;
+    padding-top: 24px;
+    padding-bottom: 48px;
+  }
+
+  &__body {
+    display: flex;
+    flex-direction: column;
+    gap: 24px;
+    width: 100%;
+    max-width: 672px;
+  }
+
+  &__intro {
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+
+    p {
+      color: var(--label-secondary);
+    }
+  }
+
+  &__list {
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+  }
+
+  &__actions {
+    display: flex;
+    gap: 12px;
+    padding-top: 16px;
+  }
+}
+
+@media (max-width: 640px) {
+  .reorder-screen {
+    &__header {
+      height: auto;
+      padding: 16px 0 8px;
+    }
+
+    &__content {
+      padding-top: 32px;
+    }
+  }
+}
+
 @media (max-width: 768px) {
   .zone-card {
     &__header {

package/src/v2/components/index.ts

@@ -88,6 +88,7 @@ export {
   EllipsisIcon,
   CircleIcon,
   GripVerticalIcon,
+  ReorderIcon,
   PlusIcon,
   DeleteIcon,
   ClockIcon,

package/src/v2/dashboard-analytics/blog-posts/index.ts

@@ -1,2 +1,2 @@
 export { Blog } from './Blog';
-export type { BlogProps } from './Blog';
+export type { BlogProps, BlogPost } from './Blog';

package/src/v2/dashboard-analytics/chart/Chart.tsx

@@ -23,7 +23,7 @@ export const Chart: React.FC<ChartProps> = ({
   isRevenue = false,
   className = '',
   period = 'today',
-  bookingType = 'bookings_for',
+  bookingType: _bookingType = 'bookings_for',
   isFullWidth: propIsFullWidth = false,
   isLoading = false,
   isRefreshing = false
@@ -55,11 +55,12 @@ export const Chart: React.FC<ChartProps> = ({
       
       return () => clearTimeout(timer);
     }
+    return undefined
   }, [data, period]);
   const [isMobile, setIsMobile] = React.useState(false);
   const [isTablet, setIsTablet] = React.useState(false);
   const [detectedFullWidth, setDetectedFullWidth] = React.useState(false);
-  const [dimensions, setDimensions] = React.useState({ width: 0, height: 0 });
+  const [_dimensions, setDimensions] = React.useState({ width: 0, height: 0 });
   const chartRef = React.useRef<HTMLDivElement>(null);
 
   const isFullWidth = propIsFullWidth || detectedFullWidth;
@@ -108,7 +109,7 @@ export const Chart: React.FC<ChartProps> = ({
   }, [period, forceRecalculation]);
 
   React.useEffect(() => {
-    if (propIsFullWidth !== undefined) return; 
+    if (propIsFullWidth !== undefined) return undefined;
     
     const checkChartWidth = () => {
       if (chartRef.current) {
@@ -548,35 +549,39 @@ export const Chart: React.FC<ChartProps> = ({
                 </linearGradient>
               </defs>
               <CartesianGrid strokeDasharray="3 3" stroke="#E8E9EF" />
-               <XAxis 
-                dataKey="time" 
-                type="category"
-                axisLine={false}
-                tickLine={false}
-                tick={{ 
-                  fontSize: isMobile ? 9 : (isTablet ? 10 : 11), 
-                  fill: '#626A90' 
-                }}
-                tickMargin={isMobile ? 5 : 10}
-                interval={xAxisInterval}
+               <XAxis
+                {...{
+                  dataKey: "time",
+                  type: "category",
+                  axisLine: false,
+                  tickLine: false,
+                  tick: {
+                    fontSize: isMobile ? 9 : (isTablet ? 10 : 11),
+                    fill: '#626A90'
+                  },
+                  tickMargin: isMobile ? 5 : 10,
+                  interval: xAxisInterval,
+                } as any}
               />
-              <YAxis 
-                domain={[yAxisMin, yAxisMax]}
-                ticks={ticks}
-                axisLine={false}
-                tickLine={false}
-                tick={{ 
-                  fontSize: isMobile ? 9 : (isTablet ? 10 : 11), 
-                  fill: '#626A90' 
-                }}
-                tickFormatter={(value) => {
-                  if (isRevenue) {
-                    return isMobile ? `£${Math.round(value)}` : `£${value}`;
-                  }
-                  return value.toString();
-                }}
-                tickMargin={isMobile ? 3 : 5}
-                width={isMobile ? 30 : (isTablet ? 35 : 40)} 
+              <YAxis
+                {...{
+                  domain: [yAxisMin, yAxisMax],
+                  ticks: ticks,
+                  axisLine: false,
+                  tickLine: false,
+                  tick: {
+                    fontSize: isMobile ? 9 : (isTablet ? 10 : 11),
+                    fill: '#626A90'
+                  },
+                  tickFormatter: (value: any) => {
+                    if (isRevenue) {
+                      return isMobile ? `£${Math.round(value)}` : `£${value}`;
+                    }
+                    return value.toString();
+                  },
+                  tickMargin: isMobile ? 3 : 5,
+                  width: isMobile ? 30 : (isTablet ? 35 : 40),
+                } as any}
               />
               <Tooltip content={CustomTooltip} />
               {currentTimeRef && (

package/src/v2/dashboard-analytics/dashboard/Dashboard.tsx

@@ -225,7 +225,7 @@ export const Dashboard: React.FC<DashboardProps> = ({
                   value={metrics.peopleInVenue.formatted_value || '0'}
                 />
                 <VenueCard
-                  icon={<VenueIcon />}
+                  icon={<VenueIcon /> as any}
                   title="Open until"
                   value={metrics.workHours?.message?.replace('Open until ', '') || ''}
                   shadowColor='#121E52'

package/src/v2/icons/index.tsx

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

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

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