@licklist/design 0.78.5-dev.45 → 0.78.5-dev.47

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

@@ -0,0 +1,150 @@
+@import '../../../styles/tokens/typography';
+@import '../../../styles/tokens/colors';
+
+.sidebar-customisation {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  width: 100%;
+  font-family: var(--font-family-sans);
+
+  &__header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+  }
+
+  &__title {
+    @include typography('text.small.bold');
+    margin: 0;
+  }
+
+  &__cancel-btn {
+    @include typography('text.regular');
+    color: var(--label-danger);
+    background: none;
+    border: none;
+    cursor: pointer;
+    padding: 0;
+
+    &:hover {
+      text-decoration: underline;
+    }
+  }
+
+  &__edit-btn {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    @include typography('text.regular');
+    color: var(--label-primary);
+    background: none;
+    border: none;
+    cursor: pointer;
+    padding: 0;
+
+    svg {
+      color: var(--fill-primary);
+    }
+
+    &:hover {
+      text-decoration: underline;
+    }
+  }
+
+  // Edit mode grid
+  &__grid {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    gap: 16px;
+    width: 100%;
+  }
+
+  // View mode grid
+  &__view-grid {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    gap: 12px;
+    width: 100%;
+  }
+
+  &__view-item {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    padding: 12px;
+    border: 1px solid var(--border-primary);
+    border-radius: 8px;
+    background-color: var(--surface-secondary);
+    min-width: 0;
+
+    &--hidden {
+      opacity: 0.5;
+    }
+  }
+
+  &__view-icon {
+    width: 24px;
+    height: 24px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: var(--fill-primary);
+    flex-shrink: 0;
+
+    svg {
+      width: 24px;
+      height: 24px;
+    }
+  }
+
+  &__view-label {
+    @include typography('text.small.emphasis');
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  &__actions {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    margin-top: 8px;
+  }
+
+  &__save-btn {
+    @include typography('text.regular');
+    font-weight: 600;
+    padding: 10px 20px;
+    border-radius: 8px;
+    border: none;
+    background-color: var(--fill-action);
+    color: var(--label-white);
+    cursor: pointer;
+    transition: background-color 0.2s ease;
+
+    &:hover {
+      background-color: var(--actions-dark);
+    }
+
+    &:focus-visible {
+      outline: 2px solid var(--border-action);
+      outline-offset: 2px;
+    }
+  }
+
+  &__reset-btn {
+    @include typography('text.small');
+    font-weight: 500;
+    color: var(--label-secondary);
+    background: none;
+    border: none;
+    cursor: pointer;
+    padding: 0;
+
+    &:hover {
+      color: var(--label-primary);
+      text-decoration: underline;
+    }
+  }
+}

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

@@ -0,0 +1,48 @@
+import React, { useState } from 'react'
+import type { Meta, StoryObj } from '@storybook/react'
+import { SidebarCustomisation, defaultSidebarItems, SidebarItem } from './SidebarCustomisation'
+
+const meta: Meta<typeof SidebarCustomisation> = {
+  title: 'V2/Pages/Settings/SidebarCustomisation',
+  component: SidebarCustomisation,
+  parameters: {
+    layout: 'padded',
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof SidebarCustomisation>
+
+const InteractiveSidebarCustomisation = () => {
+  const [items, setItems] = useState<SidebarItem[]>(defaultSidebarItems)
+
+  const handleSave = (updatedItems: SidebarItem[]) => {
+    console.log('Saved items:', updatedItems)
+    alert('Settings saved!')
+  }
+
+  const handleReset = () => {
+    setItems(defaultSidebarItems)
+    console.log('Reset to defaults')
+  }
+
+  const handleCancel = () => {
+    console.log('Cancelled')
+  }
+
+  return (
+    <div style={{ maxWidth: '900px' }}>
+      <SidebarCustomisation
+        items={items}
+        onItemsChange={setItems}
+        onSave={handleSave}
+        onReset={handleReset}
+        onCancel={handleCancel}
+      />
+    </div>
+  )
+}
+
+export const Default: Story = {
+  render: () => <InteractiveSidebarCustomisation />,
+}

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

@@ -0,0 +1,166 @@
+import React, { useEffect, useState } from 'react'
+import { SidebarNavItem } from './SidebarNavItem'
+import './SidebarCustomisation.scss'
+import {
+  CalendarIcon,
+  BookingsIcon,
+  BookingTypesIcon,
+  LoyaltyIcon,
+  CustomersIcon,
+  MarketingIcon,
+  WaiversIcon,
+  SettingsIcon,
+  EditIcon,
+} from '../../../icons'
+
+export interface SidebarItem {
+  id: string
+  label: string
+  icon: React.ReactNode
+  visible: boolean
+  locked?: boolean
+}
+
+export interface SidebarCustomisationProps {
+  items: SidebarItem[]
+  onItemsChange?: (items: SidebarItem[]) => void
+  onSave?: (items: SidebarItem[]) => void
+  onReset?: () => void
+  onCancel?: () => void
+}
+
+// Default sidebar items - IDs must match useProviderNavigation.tsx
+export const defaultSidebarItems: SidebarItem[] = [
+  { id: 'events', label: 'Dates & Events', icon: <CalendarIcon />, visible: true },
+  { id: 'sales', label: 'Bookings & Enquiries', icon: <BookingsIcon />, visible: true },
+  { id: 'product-sets', label: 'Booking Types', icon: <BookingTypesIcon />, visible: true },
+  { id: 'loyalty', label: 'Loyalty', icon: <LoyaltyIcon />, visible: true },
+  { id: 'customers', label: 'Customers', icon: <CustomersIcon />, visible: true },
+  { id: 'emails', label: 'Email & SMS', icon: <MarketingIcon />, visible: true },
+  { id: 'waivers', label: 'Waivers', icon: <WaiversIcon />, visible: true },
+  { id: 'settings', label: 'Settings', icon: <SettingsIcon />, visible: true, locked: true },
+]
+
+export const SidebarCustomisation: React.FC<SidebarCustomisationProps> = ({
+  items: initialItems,
+  onItemsChange,
+  onSave,
+  onReset,
+  onCancel,
+}) => {
+  const [items, setItems] = useState<SidebarItem[]>(initialItems)
+  const [isEditing, setIsEditing] = useState(false)
+
+  useEffect(() => {
+    setItems(initialItems)
+  }, [initialItems])
+
+  const handleLabelChange = (id: string, newLabel: string) => {
+    const updatedItems = items.map((item) =>
+      item.id === id ? { ...item, label: newLabel } : item
+    )
+    setItems(updatedItems)
+    onItemsChange?.(updatedItems)
+  }
+
+  const handleSave = () => {
+    onSave?.(items)
+    setIsEditing(false)
+  }
+
+  const handleReset = () => {
+    setItems(defaultSidebarItems)
+    onReset?.()
+  }
+
+  const handleCancel = () => {
+    setItems(initialItems)
+    onCancel?.()
+    setIsEditing(false)
+  }
+
+  const handleEdit = () => {
+    setIsEditing(true)
+  }
+
+  return (
+    <div className="sidebar-customisation">
+      <div className="sidebar-customisation__header">
+        <h3 className="sidebar-customisation__title">Sidebar Customisation</h3>
+        {isEditing ? (
+          <button
+            type="button"
+            className="sidebar-customisation__cancel-btn"
+            onClick={handleCancel}
+          >
+            Cancel
+          </button>
+        ) : (
+          <button
+            type="button"
+            className="sidebar-customisation__edit-btn"
+            onClick={handleEdit}
+          >
+            <EditIcon />
+            <span>Edit Side Bar</span>
+          </button>
+        )}
+      </div>
+
+      {isEditing ? (
+        <>
+          <div className="sidebar-customisation__grid">
+            {items.map((item) => {
+              const defaultItem = defaultSidebarItems.find(d => d.id === item.id)
+              return (
+                <SidebarNavItem
+                  key={item.id}
+                  id={item.id}
+                  label={item.label}
+                  defaultLabel={defaultItem?.label || item.label}
+                  icon={item.icon}
+                  onLabelChange={handleLabelChange}
+                />
+              )
+            })}
+          </div>
+
+          <div className="sidebar-customisation__actions">
+            <button
+              type="button"
+              className="sidebar-customisation__save-btn"
+              onClick={handleSave}
+            >
+              Save Changes
+            </button>
+            <button
+              type="button"
+              className="sidebar-customisation__reset-btn"
+              onClick={handleReset}
+            >
+              Reset to defaults
+            </button>
+          </div>
+        </>
+      ) : (
+        <div className="sidebar-customisation__view-grid">
+          {items.map((item) => (
+            <div
+              key={item.id}
+              className={`sidebar-customisation__view-item ${!item.visible ? 'sidebar-customisation__view-item--hidden' : ''}`}
+            >
+              <span className="sidebar-customisation__view-icon">
+                {item.icon}
+              </span>
+              <span className="sidebar-customisation__view-label">
+                {item.label}
+              </span>
+            </div>
+          ))}
+        </div>
+      )}
+    </div>
+  )
+}
+
+export default SidebarCustomisation

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

@@ -0,0 +1,76 @@
+@import '../../../styles/tokens/typography';
+@import '../../../styles/tokens/colors';
+
+.sidebar-nav-item {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  font-family: var(--font-family-sans);
+
+  &__header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+  }
+
+  &__info {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+
+    &--disabled {
+      .sidebar-nav-item__icon {
+        color: var(--fill-disabled);
+      }
+
+      .sidebar-nav-item__name {
+        color: var(--label-status-disabled);
+      }
+    }
+  }
+
+  &__icon {
+    width: 24px;
+    height: 24px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: var(--fill-primary);
+
+    svg {
+      width: 24px;
+      height: 24px;
+    }
+  }
+
+  &__name {
+    @include typography('text.small.emphasis');
+  }
+
+  &__input {
+    @include typography('text.small');
+    height: 40px;
+    width: 100%;
+    padding: 8px 12px;
+    border: 1px solid var(--border-primary);
+    border-radius: 6px;
+    background-color: var(--surface-secondary);
+    color: var(--label-primary);
+    outline: none;
+    transition: border-color 0.2s ease, box-shadow 0.2s ease;
+
+    &::placeholder {
+      color: var(--label-secondary);
+    }
+
+    &:focus {
+      outline: none;
+      box-shadow: 0 0 0 2px var(--surface-primary), 0 0 0 4px var(--actions-regular);
+    }
+
+    &--disabled {
+      opacity: 0.5;
+      cursor: not-allowed;
+    }
+  }
+}

package/src/v2/pages/Settings/components/SidebarNavItem.stories.tsx

@@ -0,0 +1,50 @@
+import React, { useState } from 'react'
+import type { Meta, StoryObj } from '@storybook/react'
+import { SidebarNavItem } from './SidebarNavItem'
+
+const HomeIcon = () => (
+  <svg width="24" height="24" viewBox="0 0 24 24" fill="none">
+    <path d="M17.7273 20.1182H6.27273C5.82086 20.1182 5.45455 19.7423 5.45455 19.2785V11.7207H3L11.4496 3.83661C11.7617 3.54543 12.2383 3.54543 12.5504 3.83661L21 11.7207H18.5455V19.2785C18.5455 19.7423 18.1792 20.1182 17.7273 20.1182ZM7.09091 18.4387H16.9091V10.1734L12 5.59288L7.09091 10.1734V18.4387Z" fill="currentColor" />
+  </svg>
+)
+
+const meta: Meta<typeof SidebarNavItem> = {
+  title: 'V2/Pages/Settings/SidebarNavItem',
+  component: SidebarNavItem,
+  parameters: {
+    layout: 'padded',
+  },
+  argTypes: {
+    label: {
+      control: 'text',
+      description: 'Display label for the item',
+    },
+    disabled: {
+      control: 'boolean',
+      description: 'Whether the input is disabled',
+    },
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof SidebarNavItem>
+
+const InteractiveSidebarNavItem = () => {
+  const [label, setLabel] = useState('Home')
+
+  return (
+    <div style={{ maxWidth: '300px' }}>
+      <SidebarNavItem
+        id="home"
+        label={label}
+        defaultLabel="Home"
+        icon={<HomeIcon />}
+        onLabelChange={(id, newLabel) => setLabel(newLabel)}
+      />
+    </div>
+  )
+}
+
+export const Default: Story = {
+  render: () => <InteractiveSidebarNavItem />,
+}

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

@@ -0,0 +1,52 @@
+import React from 'react'
+import './SidebarNavItem.scss'
+
+export interface SidebarNavItemProps {
+  /** Unique identifier for the item */
+  id: string
+  /** Display label for the item (editable value) */
+  label: string
+  /** Default/original label name shown in header */
+  defaultLabel: string
+  /** Icon to display */
+  icon: React.ReactNode
+  /** Whether the input is disabled */
+  disabled?: boolean
+  /** Callback when the label changes */
+  onLabelChange?: (id: string, label: string) => void
+}
+
+export const SidebarNavItem: React.FC<SidebarNavItemProps> = ({
+  id,
+  label,
+  defaultLabel,
+  icon,
+  disabled = false,
+  onLabelChange,
+}) => {
+  return (
+    <div className="sidebar-nav-item">
+      <div className="sidebar-nav-item__header">
+        <div className={`sidebar-nav-item__info ${disabled ? 'sidebar-nav-item__info--disabled' : ''}`}>
+          <div className="sidebar-nav-item__icon">
+            {icon}
+          </div>
+          <span className="sidebar-nav-item__name">
+            {defaultLabel}
+          </span>
+        </div>
+      </div>
+      <input
+        type="text"
+        id={id}
+        className={`sidebar-nav-item__input ${disabled ? 'sidebar-nav-item__input--disabled' : ''}`}
+        value={label}
+        onChange={(e) => onLabelChange?.(id, e.target.value)}
+        disabled={disabled}
+        placeholder={label}
+      />
+    </div>
+  )
+}
+
+export default SidebarNavItem

package/src/v2/pages/Settings/components/index.ts

@@ -0,0 +1,5 @@
+export { SidebarCustomisation, defaultSidebarItems } from './SidebarCustomisation'
+export type { SidebarCustomisationProps, SidebarItem } from './SidebarCustomisation'
+
+export { SidebarNavItem } from './SidebarNavItem'
+export type { SidebarNavItemProps } from './SidebarNavItem'

package/src/v2/pages/Settings/index.ts

@@ -0,0 +1,8 @@
+export { SettingsPage } from './SettingsPage'
+export type { SettingsPageProps } from './SettingsPage'
+
+export { SettingsTabs } from './SettingsTabs'
+export type { SettingsTabsProps, SettingsTab } from './SettingsTabs'
+
+export { SidebarCustomisation, defaultSidebarItems, SidebarNavItem } from './components'
+export type { SidebarCustomisationProps, SidebarItem, SidebarNavItemProps } from './components'

package/src/v2/styles/form/NewInput.scss

@@ -1,4 +1,5 @@
 /* New Form Input Styles based on Figma design tokens */
+@import '../../styles/tokens/typography';
 
 .new-form-input {
   display: flex;
@@ -36,9 +37,7 @@
     }
 
   &__input {
-    font-family: var(--font-family-sans, 'Geist', sans-serif);
-    font-size: var(--text-regular-size, 15px);
-    line-height: var(--text-regular-line, 20px);
+    @include typography('text.regular');
     flex: 1 0 0;
     background-color: var(--surfaces-main-background-secondary);
     border: 2px solid var(--border-primary);

package/dist/v2/navigation/icons/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/v2/navigation/icons/index.tsx"],"names":[],"mappings":"AAEA,eAAO,MAAM,aAAa,+CAOzB,CAAA;AAED,eAAO,MAAM,WAAW,+CAIvB,CAAA;AAED,eAAO,MAAM,SAAS,+CAKrB,CAAA;AAED,eAAO,MAAM,aAAa,+CAIzB,CAAA;AAED,eAAO,MAAM,SAAS,+CAIrB,CAAA;AAED,eAAO,MAAM,WAAW,+CAIvB,CAAA;AAED,eAAO,MAAM,aAAa,+CAIzB,CAAA;AAED,eAAO,MAAM,WAAW,+CAIvB,CAAA;AAED,eAAO,MAAM,aAAa,+CAIzB,CAAA;AAED,eAAO,MAAM,YAAY,+CAIxB,CAAA;AAED,eAAO,MAAM,YAAY,+CAIxB,CAAA"}

package/src/v2/navigation/icons/index.tsx

@@ -1,72 +0,0 @@
-import React from 'react'
-
-export const DashboardIcon = () => (
-    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
-        <path
-            fill="var(--fills-main-fill-primary, #14215A)"
-            d="M17.727 20.118H6.273a.83.83 0 0 1-.818-.84v-7.557H3l8.45-7.884a.803.803 0 0 1 1.1 0L21 11.72h-2.454v7.557a.83.83 0 0 1-.819.84Zm-10.636-1.68h9.818v-8.265L12 5.593l-4.91 4.58v8.266Z"
-        />
-    </svg>
-)
-
-export const CompanyIcon = () => (
-    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-        <path d="M19.5 18.75H4.5V17.25H5.25V6C5.25 5.58579 5.58579 5.25 6 5.25H16.5C16.9142 5.25 17.25 5.58579 17.25 6V9.75H18.75V17.25H19.5V18.75ZM15.75 17.25H17.25V11.25H12.75V17.25H14.25V12.75H15.75V17.25ZM15.75 9.75V6.75H6.75V17.25H11.25V9.75H15.75ZM8.25 11.25H9.75V12.75H8.25V11.25ZM8.25 14.25H9.75V15.75H8.25V14.25ZM8.25 8.25H9.75V9.75H8.25V8.25Z" fill="var(--fills-main-fill-primary, #14215A)" />
-    </svg>
-)
-
-export const VenueIcon = () => (
-    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none">
-        <path fill="#000" fillOpacity=".1" d="m6 7.5 6.75-2.625V18H6V7.5Z" />
-        <path fill="var(--fills-main-fill-primary, #14215A)" d="M5.25 17.25V7.275a.75.75 0 0 1 .494-.704l7.253-2.638a.375.375 0 0 1 .503.353V8l4.737 1.58a.75.75 0 0 1 .513.71v6.96h1.5v1.5H3.75v-1.5h1.5Zm1.5 0H12V5.892L6.75 7.8v9.45Zm10.5 0v-6.419l-3.75-1.25v7.67h3.75Z" />
-    </svg>
-)
-
-export const MarketingIcon = () => (
-    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none">
-        <path fill="var(--fills-main-fill-primary, #14215A)" d="M10.72 16.363s5.264-.634 8.02.957l.725-.194a.75.75 0 0 0 .53-.919l-1.177-4.392a1.5 1.5 0 0 0-.752-2.807L16.89 4.616a.75.75 0 0 0-.918-.53l-.725.194c-1.59 2.755-6.468 4.839-6.468 4.839l-2.898.776a1.5 1.5 0 0 0-1.06 1.837l1.164 4.347a1.5 1.5 0 0 0 1.838 1.06l.724-.194 1.695 3.428 1.449-.388-.97-3.622Zm-.17-6.43a25.444 25.444 0 0 0 1.647-.92c1.12-.683 2.514-1.66 3.549-2.868l2.494 9.31c-1.5-.529-3.196-.678-4.507-.71-.713-.017-1.364 0-1.887.026L10.55 9.934Zm-4.281 1.41 2.897-.775 1.165 4.346-2.898.777-1.164-4.347Z" />
-    </svg>
-)
-
-export const AdminIcon = () => (
-    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none">
-        <path fill="var(--fills-main-fill-primary, #14215A)" d="M12 13.5V15a4.5 4.5 0 0 0-4.5 4.5H6a6 6 0 0 1 6-6Zm0-.75a4.499 4.499 0 0 1-4.5-4.5c0-2.486 2.014-4.5 4.5-4.5s4.5 2.014 4.5 4.5-2.014 4.5-4.5 4.5Zm0-1.5a3 3 0 1 0 0-6 3 3 0 1 0 0 6Zm4.5 7.875-2.204 1.159.42-2.455-1.782-1.738 2.464-.358L16.5 13.5l1.102 2.233 2.465.358-1.784 1.738.421 2.455-2.204-1.159Z" />
-    </svg>
-)
-
-export const ProfileIcon = () => (
-    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none">
-        <path fill="var(--fills-main-fill-primary, #14215A)" d="M6 19.5a6 6 0 0 1 12 0h-1.5a4.5 4.5 0 1 0-9 0H6Zm6-6.75a4.499 4.499 0 0 1-4.5-4.5c0-2.486 2.014-4.5 4.5-4.5s4.5 2.014 4.5 4.5-2.014 4.5-4.5 4.5Zm0-1.5a3 3 0 1 0 0-6 3 3 0 1 0 0 6Z" />
-    </svg>
-)
-
-export const CustomersIcon = () => (
-    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none">
-        <path fill="var(--fills-main-fill-primary, #14215A)" d="M4.5 19.5a6 6 0 0 1 12 0H15a4.5 4.5 0 1 0-9 0H4.5Zm6-6.75A4.499 4.499 0 0 1 6 8.25c0-2.486 2.014-4.5 4.5-4.5S15 5.764 15 8.25s-2.014 4.5-4.5 4.5Zm0-1.5a3 3 0 1 0 0-6 3 3 0 1 0 0 6Zm6.213 2.777A6.001 6.001 0 0 1 20.25 19.5h-1.5c0-1.827-1.089-3.4-2.653-4.105l.616-1.368Zm-.516-8.467A4.125 4.125 0 0 1 15 13.483v-1.51a2.625 2.625 0 0 0 .78-4.956l.417-1.457Z" />
-    </svg>
-)
-
-export const ReportsIcon = () => (
-    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none">
-        <path fill="var(--fills-main-fill-primary, #14215A)" d="M11.25 8.25h1.5v7.5h-1.5v-7.5Zm3 3h1.5v4.5h-1.5v-4.5Zm-6 1.5h1.5v3h-1.5v-3Zm6-6.75h-7.5v12h10.5V9h-3V6Zm-9-.756c0-.411.336-.744.749-.744H15l3.75 3.75v10.494a.75.75 0 0 1-.745.756H5.995a.75.75 0 0 1-.745-.744V5.244Z" />
-    </svg>
-)
-
-export const AnalyticsIcon = () => (
-    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none">
-        <path fill="var(--fills-main-fill-primary, #14215A)" d="M6.75 5.25v12h12v1.5H5.25V5.25h1.5Zm11.47 2.47 1.06 1.06L15 13.06l-2.25-2.249-3.22 3.22-1.06-1.061 4.28-4.28L15 10.938l3.22-3.22Z" />
-    </svg>
-)
-
-export const PaymentsIcon = () => (
-    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none">
-        <path fill="var(--fills-main-fill-primary, #14215A)" d="M12.004 19.502a7.5 7.5 0 1 1 0-15 7.5 7.5 0 0 1 0 15Zm0-1.5a6 6 0 1 0 0-12 6 6 0 0 0 0 12Zm-2.25-5.25h-.75v-1.5h.75v-.75a2.625 2.625 0 0 1 5.06-.984l-1.49.373a1.124 1.124 0 0 0-2.07.61v.75h2.25v1.5h-2.25v1.5h3.75v1.5h-6v-1.5h.75v-1.5Z" />
-    </svg>
-)
-
-export const SettingsIcon = () => (
-    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none">
-        <path fill="var(--fills-main-fill-primary, #14215A)" d="M4.5 11.729c0-.648.082-1.278.237-1.878A2.25 2.25 0 0 0 6.743 6.38 7.492 7.492 0 0 1 9.995 4.5a2.25 2.25 0 0 0 4.01 0c1.244.344 2.357 1 3.252 1.88a2.25 2.25 0 0 0 2.006 3.471c.155.6.237 1.23.237 1.878a7.51 7.51 0 0 1-.237 1.878 2.25 2.25 0 0 0-2.006 3.471 7.492 7.492 0 0 1-3.252 1.88 2.25 2.25 0 0 0-4.01 0 7.492 7.492 0 0 1-3.252-1.88 2.25 2.25 0 0 0-2.006-3.471 7.514 7.514 0 0 1-.237-1.878Zm3.603 2.25c.472.818.608 1.76.423 2.643.306.217.632.406.973.563A3.745 3.745 0 0 1 12 16.229c.946 0 1.829.353 2.501.956a5.99 5.99 0 0 0 .973-.563 3.744 3.744 0 0 1 .423-2.643 3.744 3.744 0 0 1 2.077-1.688 6.099 6.099 0 0 0 0-1.124 3.744 3.744 0 0 1-2.077-1.688 3.744 3.744 0 0 1-.423-2.643 5.997 5.997 0 0 0-.973-.563A3.745 3.745 0 0 1 12 7.23a3.745 3.745 0 0 1-2.501-.956 5.993 5.993 0 0 0-.973.563c.185.883.05 1.824-.423 2.643a3.745 3.745 0 0 1-2.077 1.688 6.097 6.097 0 0 0 0 1.124c.857.282 1.604.87 2.077 1.688Zm3.897 0a2.25 2.25 0 1 1 0-4.5 2.25 2.25 0 0 1 0 4.5Zm0-1.5a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5Z" />
-    </svg>
-)
-