@licklist/design 0.78.31 → 0.78.33

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

@@ -161,4 +161,80 @@ export const AllVariants: Story = {
       </div>
     </div>
   ),
-}
+}
+
+export const WithLabel: Story = {
+  args: {
+    label: 'Select an option',
+    variant: 'default',
+    size: 'md',
+  },
+  render: (args) => (
+    <div style={{ width: '300px' }}>
+      <Select {...args}>
+        <option value="">Select</option>
+        <option value="option1">Option 1</option>
+        <option value="option2">Option 2</option>
+        <option value="option3">Option 3</option>
+      </Select>
+    </div>
+  ),
+}
+
+export const WithLabelAndOptional: Story = {
+  args: {
+    label: 'Gender',
+    optional: true,
+    variant: 'default',
+    size: 'md',
+  },
+  render: (args) => (
+    <div style={{ width: '300px' }}>
+      <Select {...args}>
+        <option value="">Select gender</option>
+        <option value="female">Female</option>
+        <option value="male">Male</option>
+        <option value="prefer_not_to_say">Prefer not to say</option>
+      </Select>
+    </div>
+  ),
+}
+
+export const WithError: Story = {
+  args: {
+    label: 'Country',
+    error: 'Please select a country',
+    variant: 'default',
+    size: 'md',
+  },
+  render: (args) => (
+    <div style={{ width: '300px' }}>
+      <Select {...args}>
+        <option value="">Select country</option>
+        <option value="us">United States</option>
+        <option value="uk">United Kingdom</option>
+        <option value="ca">Canada</option>
+      </Select>
+    </div>
+  ),
+}
+
+export const WithHelperText: Story = {
+  args: {
+    label: 'Timezone',
+    helperText: 'Choose your preferred timezone',
+    variant: 'default',
+    size: 'md',
+  },
+  render: (args) => (
+    <div style={{ width: '300px' }}>
+      <Select {...args}>
+        <option value="">Select timezone</option>
+        <option value="utc">UTC</option>
+        <option value="est">EST</option>
+        <option value="pst">PST</option>
+      </Select>
+    </div>
+  ),
+}
+

package/src/v2/components/Select/Select.tsx

@@ -1,56 +1,85 @@
-import React, { HTMLAttributes } from 'react'
+import { SelectHTMLAttributes } from 'react'
 import './Select.scss'
 
-export interface SelectProps extends HTMLAttributes<HTMLSelectElement> {
+export interface SelectProps extends Omit<SelectHTMLAttributes<HTMLSelectElement>, 'size'> {
   variant?: 'default' | 'hover'| 'focus' | 'error' | 'disabled'
   size?: 'sm' | 'md' | 'lg'
-  disabled?: boolean
+  label?: string
+  optional?: boolean
+  error?: string
+  helperText?: string
 }
 
-export function Select({ 
-  variant = 'default', 
-  size = 'md', 
-  disabled = false, 
+export function Select({
+  variant = 'default',
+  size = 'md',
+  disabled = false,
   className = '',
+  label,
+  optional,
+  error,
+  helperText,
   children,
-  ...props 
+  ...props
 }: SelectProps) {
+  const isError = !!error
   const classes = [
     'select',
     `select--${variant}`,
     `select--${size}`,
     disabled ? 'select--disabled' : '',
+    isError ? 'select--error' : '',
     className
   ].filter(Boolean).join(' ')
 
   return (
-    <div className="select-container">
-      <select 
-        className={classes} 
-        disabled={disabled}
-        {...props}
-      >
-        {children}
-      </select>
-      <svg 
-        className="select-arrow"
-        xmlns="http://www.w3.org/2000/svg" 
-        width="11" 
-        height="6" 
-        viewBox="0 0 11 6" 
-        fill="none"
-        aria-hidden="true"
-      >
-        <path 
-          d="M1 1L5.5 5L10 1" 
-          stroke="#626A90" 
-          strokeWidth="2" 
-          strokeLinecap="round" 
-          strokeLinejoin="round"
-        />
-      </svg>
+    <div className="select-wrapper">
+      {(label || optional) && (
+        <label className="select-label">
+          {label} {optional && <span className="select-label-optional">(Optional)</span>}
+        </label>
+      )}
+
+      <div className="select-container">
+        <select
+          className={classes}
+          disabled={disabled}
+          {...props}
+        >
+          {children}
+        </select>
+        <svg
+          className="select-arrow"
+          xmlns="http://www.w3.org/2000/svg"
+          width="11"
+          height="6"
+          viewBox="0 0 11 6"
+          fill="none"
+          aria-hidden="true"
+        >
+          <path
+            d="M1 1L5.5 5L10 1"
+            stroke="#626A90"
+            strokeWidth="2"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+          />
+        </svg>
+      </div>
+
+      {helperText && (
+        <p className="select-helper-text">
+          {helperText}
+        </p>
+      )}
+
+      {error && error !== ' ' && (
+        <p className="select-error-text">
+          {error}
+        </p>
+      )}
     </div>
   )
 }
 
-export default Select
+export default Select

package/src/v2/components/TableSortIcon/TableSortIcon.tsx

@@ -0,0 +1,20 @@
+import React from 'react'
+import { ArrowUpIcon, ArrowDownIcon } from '../../icons'
+
+export type SortDirection = 'asc' | 'desc' | null
+
+export interface TableSortIconProps {
+  active?: boolean
+  direction: SortDirection
+  className?: string
+}
+
+export const TableSortIcon: React.FC<TableSortIconProps> = ({ active = false, direction, className = '' }) => {
+  if (!active || !direction) return null
+
+  return (
+    <span className={className}>
+      {direction === 'asc' ? <ArrowUpIcon /> : <ArrowDownIcon />}
+    </span>
+  )
+}

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

@@ -0,0 +1 @@
+export * from './TableSortIcon'

package/src/v2/components/WYSIWYGEditor/Icons.tsx

@@ -62,8 +62,8 @@ export const QuoteAltIcon = () => (
 export const DividerIcon = () => (
   <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
     <rect x="5.25" y="11.25" width="13.5" height="1.5" fill="#626A90"/>
-    <circle cx="21.75" cy="12" r="0.75" fill="#626A90" fill-opacity="0.5"/>
-    <circle cx="2.25" cy="12" r="0.75" fill="#626A90" fill-opacity="0.5"/>
+    <circle cx="21.75" cy="12" r="0.75" fill="#626A90" fillOpacity="0.5"/>
+    <circle cx="2.25" cy="12" r="0.75" fill="#626A90" fillOpacity="0.5"/>
   </svg>
 );
 

package/src/v2/components/index.ts

@@ -1,3 +1,22 @@
+export { Badge } from './Badge'
+export type { BadgeProps } from './Badge'
+
+export { QuickFilter } from './QuickFilter'
+export type { QuickFilterProps, QuickFilterOption } from './QuickFilter'
+
+export { NewTable } from './NewTable'
+export type { NewTableProps, NewTableColumn } from './NewTable'
+
+export { TableSortIcon } from './TableSortIcon'
+export type { TableSortIconProps } from './TableSortIcon'
+
+
+export { ActionMenu } from './ActionMenu'
+export type { ActionMenuProps, ActionMenuItem } from './ActionMenu'
+
+export { DeleteModal } from './Modal'
+export type { DeleteModalProps } from './Modal'
+
 // Form Components
 export { FormField } from './FormField'
 export type { FormFieldProps } from './FormField'
@@ -18,8 +37,8 @@ export { SectionHeader } from './SectionHeader'
 export type { SectionHeaderProps } from './SectionHeader'
 
 // Existing Components
-export { Button, ButtonText } from './Button'
-export type { ButtonProps, ButtonTextProps } from './Button'
+export { Button, ButtonText, GhostButton } from './Button'
+export type { ButtonProps, ButtonTextProps, GhostButtonProps } from './Button'
 
 export { Select } from './Select'
 
@@ -31,7 +50,30 @@ export { UserPanel } from './UserPanel'
 
 export { EntityHeader } from './EntityHeader'
 
+
 export { Alert } from './Alert'
 
 export { NPSScore } from './NPSScore'
 
+export { Pagination } from './Pagination'
+export type { PaginationProps } from './Pagination'
+
+// Icons
+export {
+  InfoIcon,
+  ArrowUpIcon,
+  ArrowDownIcon,
+  EditIcon,
+  ArrowLeftIcon,
+  ArrowRightIcon,
+  SearchIcon,
+  RefreshIcon,
+  SendIcon,
+  ExternalLinkIcon,
+  ExportIcon,
+  ClearIcon,
+  CloseIcon,
+  EllipsisIcon,
+  CircleIcon
+} from '../icons'
+

package/src/v2/icons/index.tsx

@@ -99,7 +99,127 @@ export const BookingTypesIcon = () => (
 )
 
 export const EditIcon = () => (
-    <svg width="24" height="24" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
-        <path d="M9 22.89H10.4142L19.7279 13.5763L18.3137 12.1621L9 21.4758V22.89ZM25 24.89H7V20.6473L20.435 7.21232C20.8256 6.8218 21.4587 6.8218 21.8492 7.21232L24.6777 10.0408C25.0682 10.4313 25.0682 11.0644 24.6777 11.455L13.2426 22.89H25V24.89ZM19.7279 10.7479L21.1421 12.1621L22.5563 10.7479L21.1421 9.33364L19.7279 10.7479Z" fill="var(--fills-main-fill-primary, #14215A)"/>
+    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <path d="M4 20H20" stroke="currentColor" strokeWidth="2" strokeLinecap="round" />
+        <path d="M6 16L15.5 6.5C16.3 5.7 17.7 5.7 18.5 6.5C19.3 7.3 19.3 8.7 18.5 9.5L9 19H6V16Z" stroke="currentColor" strokeWidth="2" strokeLinejoin="round" />
+        <path d="M14.5 7.5L17.5 10.5" stroke="currentColor" strokeWidth="2" strokeLinecap="round" />
+    </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"/>
+    </svg>
+)
+
+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"/>
+    </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"/>
+    </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"/>
+    </svg>
+)
+
+export const ExternalLinkIcon = () => (
+    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
+        <path d="M11.25 7.5V9H7.5V17.25H15.75V13.5H17.25V18C17.25 18.4142 16.9142 18.75 16.5 18.75H6.75C6.33579 18.75 6 18.4142 6 18V8.25C6 7.83579 6.33579 7.5 6.75 7.5H11.25ZM19.5 5.25V11.25H18L17.9999 7.80975L12.1553 13.6553L11.0947 12.5947L16.9387 6.75H13.5V5.25H19.5Z" fill="#14215A"/>
+    </svg>
+)
+
+export const ExportIcon = ({ width = 24, height = 24 }: React.SVGProps<SVGSVGElement> & { 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 16H20L16 20L12 16H15V12H17V16ZM19 8H9V24H23V12H19V8ZM7 6.9918C7 6.44405 7.44749 6 7.9985 6H20L24.9997 11L25 24.9925C25 25.5489 24.5551 26 24.0066 26H7.9934C7.44476 26 7 25.5447 7 25.0082V6.9918Z" fill="currentColor"/>
+    </svg>
+)
+
+export const ClearIcon = () => (
+    <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32" fill="none">
+        <rect x="9.00006" y="22" width="18" height="2" transform="rotate(-45 9.00006 22)" fill="#CC3C35"></rect>
+        <rect x="10" y="9" width="18" height="2" transform="rotate(45 10 9)" fill="#CC3C35"></rect>
+    </svg>
+)
+
+export const ChevronLeftIcon = () => (
+    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <path d="M19 12H5" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
+        <path d="M12 19L5 12L12 5" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
+    </svg>
+)
+
+export const ChevronRightIcon = () => (
+    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <path d="M5 12H19" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
+        <path d="M12 5L19 12L12 19" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
+    </svg>
+)
+
+export const ArrowRightIcon   = ({ 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="M20.1716 14.9999L14.8076 9.63589L16.2218 8.22168L24 15.9999L16.2218 23.778L14.8076 22.3638L20.1716 16.9999H8V14.9999H20.1716Z" fill="currentColor"/>
+    </svg>
+)
+
+export const ArrowLeftIcon = ({ 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="M11.8284 16.9997L17.1924 22.3637L15.7782 23.778L8 15.9997L15.7782 8.22163L17.1924 9.63583L11.8284 14.9997L24 14.9997L24 16.9997L11.8284 16.9997Z" fill="currentColor"/>
+    </svg>
+)
+
+export const InfoIcon = ({ 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" className="flex-shrink-0 text-label-primary">
+        <path d="M16 25C11.0294 25 7 20.9706 7 16C7 11.0294 11.0294 7 16 7C20.9706 7 25 11.0294 25 16C25 20.9706 20.9706 25 16 25ZM16 18C16.5523 18 17 17.5523 17 17L17 12C17 11.4477 16.5523 11 16 11C15.4477 11 15 11.4477 15 12L15 17C15 17.5523 15.4477 18 16 18ZM16 21C16.5523 21 17 20.5523 17 20C17 19.4477 16.5523 19 16 19C15.4477 19 15 19.4477 15 20C15 20.5523 15.4477 21 16 21Z" fill="currentColor"/>
+    </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"/>
+    </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"/>
     </svg>
-)
+)
+
+export const CloseIcon = ({width = 24, height = 24, ...props
+}: React.SVGProps<SVGSVGElement> & { width?: number; height?: number }) => (
+  <svg
+    width={width}
+    height={height}
+    viewBox="0 0 24 24"
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}
+  >
+    <path d="M18 6L6 18" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
+    <path d="M6 6L18 18" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
+  </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} />
+  </svg>
+)
+
+export const CircleIcon = ({ width = 32, height = 32, fill = 'var(--surface-action-soft)', className = '', ...props }: React.SVGProps<SVGSVGElement> & { width?: number; height?: number; fill?: string } = {}) => (
+  <svg width={width} height={height} viewBox="0 0 32 32" fill="none" className={className} xmlns="http://www.w3.org/2000/svg" {...props}>
+    <circle cx="16" cy="16" r="16" fill={fill} />
+  </svg>
+)
+
+
+

package/src/v2/navigation/DashboardLayout/ProviderSidebar.scss

@@ -76,6 +76,47 @@
         &--collapsed {
             justify-content: center;
         }
+
+        &.provider-sidebar__link--active {
+            border-radius: 8px;
+
+            .entity-header {
+                background: transparent;
+
+                &:hover {
+                    background: transparent;
+
+                    .entity-header__badge {
+                        background: rgba(255, 255, 255, 0.2);
+
+                        span {
+                            color: white;
+                        }
+                    }
+                }
+            }
+
+            .entity-header__name {
+                color: white;
+            }
+
+            .entity-header__badge {
+                background: rgba(255, 255, 255, 0.2);
+
+                span {
+                    color: white;
+                }
+            }
+
+            .entity-header__placeholder span {
+                color: white;
+            }
+
+            .entity-header__placeholder svg circle {
+                fill: rgba(255, 255, 255, 0.2);
+                stroke: rgba(255, 255, 255, 0.6);
+            }
+        }
     }
 
     &__avatar {

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

@@ -118,11 +118,13 @@ const defaultNavItems: NavItem[] = [
     { id: 'flows', label: 'Flows', path: '/flows', icon: <FlowsIcon /> },
     { id: 'inventory', label: 'Inventory', path: '/inventory', icon: <InventoryIcon /> },
     { id: 'loyalty', label: 'Loyalty', path: '/loyalty', icon: <LoyaltyIcon /> },
-    { id: 'customers', label: 'Customers', path: '/customers', icon: <CustomersIcon /> },
+    { id: 'customers', label: 'Customers', path: '/customers/overview', icon: <CustomersIcon /> },
     { id: 'reports', label: 'Reports', path: '/reports', icon: <ReportsIcon /> },
     { id: 'analytics', label: 'Analytics', path: '/analytics', icon: <AnalyticsIcon /> },
     { id: 'marketing', label: 'Marketing', path: '/marketing', icon: <MarketingIcon /> },
+/*
     { id: 'waivers', label: 'Waivers', path: '/waivers', icon: <WaiversIcon /> },
+*/
     { id: 'settings', label: 'Settings', path: '/settings', icon: <SettingsIcon /> },
 ]
 
@@ -189,8 +191,8 @@ export const ProviderSidebar: React.FC<ProviderSidebarProps> = ({
 
                 
                 {expanded ? (
-                    <div 
-                        className="provider-sidebar__header"
+                    <div
+                        className={`provider-sidebar__header ${activePath?.startsWith('/profile') ? 'provider-sidebar__link--active' : ''}`}
                         onClick={() => handleNavClick('/profile')}
                         role="button"
                         tabIndex={0}
@@ -208,8 +210,8 @@ export const ProviderSidebar: React.FC<ProviderSidebarProps> = ({
                     </div>
                 ) : (
                     <Tooltip content={providerName} side="right" sideOffset={8} delayDuration={100}>
-                        <div 
-                            className="provider-sidebar__header provider-sidebar__header--collapsed"
+                        <div
+                            className={`provider-sidebar__header provider-sidebar__header--collapsed ${activePath?.startsWith('/profile') ? 'provider-sidebar__link--active' : ''}`}
                             onClick={() => handleNavClick('/profile')}
                             role="button"
                             tabIndex={0}

package/src/v2/navigation/config.tsx

@@ -104,7 +104,7 @@ export const NAVIGATION_ITEMS: NavigationItem[] = [
         id: 'customers',
         label: 'Customers',
         icon: customersIcon,
-        path: '/customers',
+        path: '/customers/overview',
         venueRequired: true,
         requiredPermissions: ['view_customers']
     },

package/src/v2/pages/Settings/components/SidebarCustomisation.scss

@@ -48,40 +48,6 @@
     }
   }
 
-  &__edit-btn {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    gap: 6px;
-    height: 36px;
-    padding: 0 12px 0 4px;
-    border-radius: 6px;
-    border: none;
-    background: transparent;
-    color: var(--label-primary);
-    font-size: 14px;
-    font-weight: 500;
-    white-space: nowrap;
-    cursor: pointer;
-    transition: background-color 0.2s ease;
-
-    svg {
-      width: 20px;
-      height: 20px;
-      flex-shrink: 0;
-      color: var(--fill-primary);
-    }
-
-    &:hover {
-      background-color: var(--surface-tertiary);
-    }
-
-    &:focus-visible {
-      outline: 2px solid var(--border-action);
-      outline-offset: 2px;
-    }
-  }
-
   // Edit mode grid - responsive columns
   &__grid {
     display: grid;

package/src/v2/pages/Settings/components/SidebarCustomisation.tsx

@@ -13,6 +13,7 @@ import {
   EditIcon,
 } from '../../../icons'
 import { Button } from 'src/v2/components'
+import { GhostButton } from 'src/v2/components/Button/GhostButton'
 
 export interface SidebarItem {
   id: string
@@ -109,14 +110,12 @@ export const SidebarCustomisation: React.FC<SidebarCustomisationProps> = ({
             Cancel
           </button>
         ) : (
-          <button
-            type="button"
-            className="sidebar-customisation__edit-btn"
+          <GhostButton
+            icon={<EditIcon />}
             onClick={handleEdit}
           >
-            <EditIcon />
-            <span>Edit Side Bar</span>
-          </button>
+            Edit Side Bar
+          </GhostButton>
         )}
       </div>
 
@@ -175,4 +174,4 @@ export const SidebarCustomisation: React.FC<SidebarCustomisationProps> = ({
   )
 }
 
-export default SidebarCustomisation
+export default SidebarCustomisation

package/src/v2/styles/common.scss

@@ -0,0 +1,7 @@
+.text-description {
+  font-family: var(--font-family-sans, 'Geist', sans-serif);
+  font-size: 16px;
+  font-style: normal;
+  line-height: 24px;
+  color: var(--label-secondary, #626A90);
+}