@licklist/design 0.78.18 → 0.78.20

package/src/v2/navigation/SidebarWithAuth.tsx

@@ -0,0 +1,49 @@
+import React from 'react'
+import { FigmasSideBar } from './FigmasSideBar'
+import type { NavigationItem } from '../types/navigation'
+import { useCanAccess } from '../hooks/useAuth'
+
+export interface SidebarWithAuthProps {
+  expanded?: boolean
+  venueName?: string
+  venueId?: string
+  venueImage?: string
+  navigationItems?: NavigationItem[]
+  onNavigation?: (path: string) => void
+  activePath?: string
+  authCredentials?: {
+    roles: string[]
+    permissions: string[]
+    isAdmin: boolean
+    isVenueUser: boolean
+    venueId?: string
+  }
+}
+
+export const SidebarWithAuth: React.FC<SidebarWithAuthProps> = ({
+  expanded = true,
+  venueName = "Sharky's Soft Play",
+  venueId = "123",
+  venueImage,
+  navigationItems,
+  onNavigation,
+  activePath,
+  authCredentials,
+}) => {
+  // Filter navigation items based on auth
+  const accessibleItems = authCredentials && navigationItems
+    ? navigationItems.filter(item => useCanAccess(authCredentials, item))
+    : navigationItems || []
+
+  return (
+    <FigmasSideBar
+      expanded={expanded}
+      venueName={venueName}
+      venueId={venueId}
+      venueImage={venueImage}
+      navigationItems={accessibleItems}
+      onNavigation={onNavigation}
+      activePath={activePath}
+    />
+  )
+}

package/src/v2/navigation/TopHatControlDisc/TopHatControlDisc.scss

@@ -0,0 +1,57 @@
+@import '../../../styles/overrides/functions';
+
+.tophat-control-disc {
+  background: var(--surfaces-main-background-primary, #ffffff);
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 4px;
+  border-radius: 8px;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  position: relative;
+  width: 100%;
+  height: 100%;
+
+  &:hover {
+    background: var(--surfaces-main-background-tertiary, #E8E9EF);
+  }
+
+  &:focus-visible {
+    outline: 2px solid var(--fills-main-fill-primary, #14215A);
+    outline-offset: 2px;
+  }
+
+  &--hover {
+    background: var(--surfaces-main-background-tertiary, #E8E9EF);
+  }
+
+  &--pressed {
+    background: var(--surfaces-main-background-quaternary, #D1D3D8);
+    transform: translateY(1px);
+  }
+
+  &__icon {
+    overflow: hidden;
+    flex-shrink: 0;
+    width: 32px;
+    height: 32px;
+    position: relative;
+
+    &-inner {
+      position: absolute;
+      inset: 15.625%;
+      width: 22px;
+      height: 22px;
+
+      .tophat-control-disc__icon-img {
+        width: 100%;
+        height: 100%;
+        display: block;
+        max-width: none;
+      }
+    }
+  }
+}

package/src/v2/navigation/TopHatControlDisc/TopHatControlDisc.stories.tsx

@@ -0,0 +1,153 @@
+import { Meta, StoryObj } from '@storybook/react'
+import React from 'react'
+import { TopHatControlDisc } from './TopHatControlDisc'
+
+export default {
+    title: 'v2/Navigation/Top Hat Control Disc',
+    component: TopHatControlDisc,
+    argTypes: {
+        variant: {
+            control: 'select',
+            options: ['default', 'hover', 'pressed'],
+            description: 'Visual state of the control',
+        },
+        onClick: { action: 'clicked' },
+        className: {
+            control: 'text',
+            description: 'Additional CSS classes',
+        },
+    },
+    parameters: {
+        layout: 'centered',
+    },
+} as Meta
+
+type Story = StoryObj<typeof TopHatControlDisc>
+
+export const Default: Story = {
+    args: {
+        variant: 'default',
+    },
+    decorators: [
+        (Story) => (
+            <div style={{ width: '48px', height: '48px', border: '1px solid #E8E9EF', borderRadius: '8px' }}>
+                <Story />
+            </div>
+        ),
+    ],
+}
+
+export const Hover: Story = {
+    args: {
+        variant: 'hover',
+    },
+    decorators: [
+        (Story) => (
+            <div style={{ width: '48px', height: '48px', border: '1px solid #E8E9EF', borderRadius: '8px' }}>
+                <Story />
+            </div>
+        ),
+    ],
+}
+
+export const Pressed: Story = {
+    args: {
+        variant: 'pressed',
+    },
+    decorators: [
+        (Story) => (
+            <div style={{ width: '48px', height: '48px', border: '1px solid #E8E9EF', borderRadius: '8px' }}>
+                <Story />
+            </div>
+        ),
+    ],
+}
+
+export const Interactive: Story = {
+    render: function (args) {
+        const [variant, setVariant] = React.useState<'default' | 'hover' | 'pressed'>('default');
+
+        return (
+            <div style={{ width: '48px', height: '48px', border: '1px solid #E8E9EF', borderRadius: '8px' }}>
+                <TopHatControlDisc
+                    {...args}
+                    variant={variant}
+                    onClick={() => {
+                        setVariant(variant === 'pressed' ? 'default' : 'pressed');
+                        setTimeout(() => setVariant('default'), 150);
+                    }}
+                />
+                <div style={{ position: 'absolute', top: '60px', left: '0', display: 'flex', gap: '8px', flexDirection: 'column' }}>
+                    <button
+                        onClick={() => setVariant('default')}
+                        style={{
+                            padding: '4px 8px',
+                            backgroundColor: variant === 'default' ? '#14215A' : '#E8E9EF',
+                            color: variant === 'default' ? 'white' : '#121E52',
+                            border: 'none',
+                            borderRadius: '4px',
+                            cursor: 'pointer',
+                            fontSize: '12px'
+                        }}
+                    >
+                        Default
+                    </button>
+                    <button
+                        onClick={() => setVariant('hover')}
+                        style={{
+                            padding: '4px 8px',
+                            backgroundColor: variant === 'hover' ? '#14215A' : '#E8E9EF',
+                            color: variant === 'hover' ? 'white' : '#121E52',
+                            border: 'none',
+                            borderRadius: '4px',
+                            cursor: 'pointer',
+                            fontSize: '12px'
+                        }}
+                    >
+                        Hover
+                    </button>
+                    <button
+                        onClick={() => setVariant('pressed')}
+                        style={{
+                            padding: '4px 8px',
+                            backgroundColor: variant === 'pressed' ? '#14215A' : '#E8E9EF',
+                            color: variant === 'pressed' ? 'white' : '#121E52',
+                            border: 'none',
+                            borderRadius: '4px',
+                            cursor: 'pointer',
+                            fontSize: '12px'
+                        }}
+                    >
+                        Pressed
+                    </button>
+                </div>
+            </div>
+        );
+    },
+    args: {},
+}
+
+export const MultipleStates: Story = {
+    render: () => (
+        <div style={{ display: 'flex', gap: '16px', alignItems: 'center' }}>
+            <div style={{ textAlign: 'center' }}>
+                <div style={{ width: '48px', height: '48px', border: '1px solid #E8E9EF', borderRadius: '8px', marginBottom: '8px' }}>
+                    <TopHatControlDisc variant="default" />
+                </div>
+                <span style={{ fontSize: '12px', color: '#626A90' }}>Default</span>
+            </div>
+            <div style={{ textAlign: 'center' }}>
+                <div style={{ width: '48px', height: '48px', border: '1px solid #E8E9EF', borderRadius: '8px', marginBottom: '8px' }}>
+                    <TopHatControlDisc variant="hover" />
+                </div>
+                <span style={{ fontSize: '12px', color: '#626A90' }}>Hover</span>
+            </div>
+            <div style={{ textAlign: 'center' }}>
+                <div style={{ width: '48px', height: '48px', border: '1px solid #E8E9EF', borderRadius: '8px', marginBottom: '8px' }}>
+                    <TopHatControlDisc variant="pressed" />
+                </div>
+                <span style={{ fontSize: '12px', color: '#626A90' }}>Pressed</span>
+            </div>
+        </div>
+    ),
+}

package/src/v2/navigation/TopHatControlDisc/TopHatControlDisc.tsx

@@ -0,0 +1,30 @@
+import React from 'react'
+import './TopHatControlDisc.scss'
+import discIcon from './assets/disc-icon.svg'
+
+export interface TopHatControlDiscProps {
+  variant?: 'default' | 'hover' | 'pressed'
+  onClick?: () => void
+  className?: string
+}
+
+export const TopHatControlDisc: React.FC<TopHatControlDiscProps> = ({
+  variant = 'default',
+  onClick,
+  className,
+}) => {
+  return (
+    <div
+      className={`tophat-control-disc tophat-control-disc--${variant} ${className || ''}`}
+      onClick={onClick}
+      data-name="Property 1=Default"
+      data-node-id="779:7127"
+    >
+      <div className="tophat-control-disc__icon" data-name="Assets / Icons" data-node-id="779:7128">
+        <div className="tophat-control-disc__icon-inner" data-name="Vector" data-node-id="I779:7128;81:688">
+          <img alt="Disc control" className="tophat-control-disc__icon-img" src={discIcon} />
+        </div>
+      </div>
+    </div>
+  )
+}

package/src/v2/navigation/TopHatControlDisc/assets/disc-icon.svg

@@ -0,0 +1,4 @@
+<svg width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="11" cy="11" r="10" fill="var(--fills-main-fill-primary, #14215A)" opacity="0.1" />
+<circle cx="11" cy="11" r="6" fill="var(--fills-main-fill-primary, #14215A)" />
+</svg>

package/src/v2/navigation/TopHatControlDisc/index.ts

@@ -0,0 +1,2 @@
+export { TopHatControlDisc } from './TopHatControlDisc'
+export type { TopHatControlDiscProps } from './TopHatControlDisc'

package/src/v2/navigation/config.tsx

@@ -0,0 +1,150 @@
+import React from 'react'
+import type { NavigationItem } from '../types/navigation'
+
+// Icon components (these would be your actual icon imports)
+const homeIcon = (
+    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <path 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" fill="var(--fills-main-fill-primary, #14215A)" />
+    </svg>
+)
+
+const datesIcon = (
+    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <path 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" fill="var(--fills-main-fill-primary, #14215A)" />
+    </svg>
+)
+
+const bookingsIcon = (
+    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <path 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" fill="var(--fills-main-fill-primary, #14215A)" />
+    </svg>
+)
+
+const loyaltyIcon = (
+    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <path 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" fill="var(--fills-main-fill-primary, #14215A)" />
+    </svg>
+)
+
+const customersIcon = (
+    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <path 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" fill="var(--fills-main-fill-primary, #14215A)" />
+    </svg>
+)
+
+const reportsIcon = (
+    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <path 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" fill="var(--fills-main-fill-primary, #14215A)" />
+    </svg>
+)
+
+const analyticsIcon = (
+    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <path 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" fill="var(--fills-main-fill-primary, #14215A)" />
+    </svg>
+)
+
+const emailIcon = (
+    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <path 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" fill="var(--fills-main-fill-primary, #14215A)" />
+    </svg>
+)
+
+const waiversIcon = (
+    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <path 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" fill="var(--fills-main-fill-primary, #14215A)" />
+    </svg>
+)
+
+const settingsIcon = (
+    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <path 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" fill="var(--fills-main-fill-primary, #14215A)" />
+    </svg>
+)
+
+export const NAVIGATION_ITEMS: NavigationItem[] = [
+    {
+        id: 'home',
+        label: 'Home',
+        icon: homeIcon,
+        path: '/home',
+        venueRequired: true
+    },
+    {
+        id: 'dates',
+        label: 'Dates & Events',
+        icon: datesIcon,
+        path: '/dates',
+        venueRequired: true
+    },
+    {
+        id: 'bookings',
+        label: 'Bookings & Enquiries',
+        icon: bookingsIcon,
+        path: '/bookings',
+        venueRequired: true,
+        requiredPermissions: ['view_bookings']
+    },
+    {
+        id: 'booking-types',
+        label: 'Booking Types',
+        icon: datesIcon,
+        path: '/booking-types',
+        venueRequired: true,
+        requiredPermissions: ['manage_bookings']
+    },
+    {
+        id: 'loyalty',
+        label: 'Loyalty',
+        icon: loyaltyIcon,
+        path: '/loyalty',
+        venueRequired: true
+    },
+    {
+        id: 'customers',
+        label: 'Customers',
+        icon: customersIcon,
+        path: '/customers',
+        venueRequired: true,
+        requiredPermissions: ['view_customers']
+    },
+    {
+        id: 'reports',
+        label: 'Reports',
+        icon: reportsIcon,
+        path: '/reports',
+        venueRequired: true,
+        requiredPermissions: ['view_reports']
+    },
+    {
+        id: 'analytics',
+        label: 'Analytics',
+        icon: analyticsIcon,
+        path: '/analytics',
+        venueRequired: true,
+        requiredPermissions: ['view_analytics']
+    },
+    {
+        id: 'email',
+        label: 'Email & SMS',
+        icon: emailIcon,
+        path: '/email',
+        venueRequired: true,
+        requiredPermissions: ['send_messages']
+    },
+    {
+        id: 'waivers',
+        label: 'Waivers',
+        icon: waiversIcon,
+        path: '/waivers',
+        venueRequired: true
+    },
+    {
+        id: 'settings',
+        label: 'Settings',
+        icon: settingsIcon,
+        path: '/settings',
+        venueRequired: true,
+        requiredPermissions: ['manage_venue_settings']
+    }
+]

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

@@ -0,0 +1,72 @@
+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>
+)
+

package/src/v2/navigation/index.ts

@@ -0,0 +1,23 @@
+export { Navigation } from './Navigation'
+export type { NavigationProps } from './Navigation'
+export { NavigationItem } from './NavigationItem'
+export type { NavigationItemProps } from './NavigationItem'
+export { NavigationSection } from './NavigationSection'
+export type { NavigationSectionProps } from './NavigationSection'
+export { FigmasSideBar } from './FigmasSideBar'
+export type { FigmasSideBarProps } from './FigmasSideBar'
+export { FigmasAdminSideBar } from './FigmasAdminSideBar'
+export type { FigmasAdminSideBarProps } from './FigmasAdminSideBar'
+export { FigmasTopHat } from './FigmasTopHat'
+export type { FigmasTopHatProps } from './FigmasTopHat'
+export { TopHatControlDisc } from './TopHatControlDisc'
+export type { TopHatControlDiscProps } from './TopHatControlDisc'
+export { SideBarToggleLarge } from './SideBarToggleLarge'
+export type { SideBarToggleLargeProps } from './SideBarToggleLarge'
+export { SidebarUserElement } from './SidebarUserElement'
+export type { SidebarUserElementProps } from './SidebarUserElement'
+export { SidebarWithAuth } from './SidebarWithAuth'
+export type { SidebarWithAuthProps } from './SidebarWithAuth'
+export { NAVIGATION_ITEMS } from './config'
+export * from './icons'
+