@autoafleveren/ui 1.3.2 → 1.4.0

package/src/modules/composables/useNavigation/__tests__/index.spec.ts

@@ -0,0 +1,88 @@
+import { describe, it, expect } from 'vitest';
+import { RouterLinkStub } from '@vue/test-utils';
+import { useNavigation } from '../index';
+import { navigationItem as navigationItemMock } from '../__mocks__/navigation';
+
+describe('the useNavigation composables', () => {
+  const navigation = useNavigation();
+
+  it('can set navigation items', () => {
+    expect(navigation.navigationItems.value).toHaveLength(0);
+
+    navigation.setNavigationItems([
+      navigationItemMock,
+      navigationItemMock,
+    ]);
+
+    expect(navigation.navigationItems.value).toHaveLength(2);
+  });
+
+  it('can set navigation component', () => {
+    expect(navigation.navigationComponent.value).toBe('a');
+
+    navigation.setNavigationComponent(RouterLinkStub);
+
+    expect(navigation.navigationComponent.value).toBe(RouterLinkStub);
+  });
+
+  it('can set logo', () => {
+    expect(navigation.logo.value).toBeNull();
+
+    navigation.setLogo('logo.png');
+
+    expect(navigation.logo.value).toBe('logo.png');
+  });
+
+  it('can open, close and toggle main menu', () => {
+    expect(navigation.mainMenuOpen.value).toBe(false);
+
+    navigation.openMainMenu();
+
+    expect(navigation.mainMenuOpen.value).toBe(true);
+
+    navigation.closeMainMenu();
+
+    expect(navigation.mainMenuOpen.value).toBe(false);
+
+    navigation.toggleMainMenu();
+
+    expect(navigation.mainMenuOpen.value).toBe(true);
+
+    navigation.toggleMainMenu();
+
+    expect(navigation.mainMenuOpen.value).toBe(false);
+  });
+
+  it('can open,close and toggle mobile menu', () => {
+    expect(navigation.mobileMenuOpen.value).toBe(false);
+
+    navigation.openMobileMenu();
+
+    expect(navigation.mobileMenuOpen.value).toBe(true);
+
+    navigation.closeMobileMenu();
+
+    expect(navigation.mobileMenuOpen.value).toBe(false);
+
+    navigation.toggleMobileMenu();
+
+    expect(navigation.mobileMenuOpen.value).toBe(true);
+
+    navigation.toggleMobileMenu();
+
+    expect(navigation.mobileMenuOpen.value).toBe(false);
+  });
+
+  it('should export the state', () => {
+    const states = [
+      'navigationItems',
+      'mainMenuOpen',
+      'mobileMenuOpen',
+      'navigationComponent',
+      'logo',
+      'contactRoute',
+    ];
+
+    expect(states.every(state => Object.keys(navigation).includes(state))).toBe(true);
+  });
+});

package/src/modules/composables/useNavigation/index.d.ts

@@ -0,0 +1,17 @@
+import type { Component } from 'vue';
+import type { RouteLocationNormalized } from 'vue-router';
+
+export interface NavigationItem {
+  name: string;
+  icon: string | Component;
+  to?: RouteLocationNormalized | string;
+  href?: string;
+  active?: boolean;
+  rounded?: boolean;
+  bottom?: boolean;
+  visible?: boolean;
+  onClick?: () => unknown;
+  linkClasses?: string;
+}
+
+export type Logo = string | Component;

package/src/modules/composables/useNavigation/index.ts

@@ -0,0 +1,97 @@
+import { isRef, shallowRef } from 'vue';
+import Cookies from 'js-cookie';
+
+import type { Component, MaybeRef } from 'vue';
+import type { NavigationItem, Logo } from './index.d';
+
+const state = {
+  navigationItems: shallowRef<NavigationItem[]>([]),
+  mainMenuOpen: shallowRef<boolean>(false),
+  expanded: shallowRef<boolean>(Cookies.get('navigation-expanded') === 'true'),
+  mobileMenuOpen: shallowRef<boolean>(false),
+  mobileMenuOpenTransition: shallowRef<boolean>(false),
+  navigationComponent: shallowRef<'a' | Component>('a'),
+  logo: shallowRef<Logo | null>(null),
+  avatar: shallowRef<Component | null>(null),
+  contactRoute: shallowRef<string | null>(),
+  contactIcon: shallowRef<Component | string>('?'),
+};
+
+export function useNavigation() {
+  function setNavigationItems(items: MaybeRef<NavigationItem[]>): void {
+    state.navigationItems.value = isRef(items) ? items?.value : items;
+  }
+
+  function setNavigationComponent(value: 'a' | Component): void {
+    state.navigationComponent.value = value;
+  }
+
+  function setLogo(logo: Logo): void {
+    state.logo.value = logo;
+  }
+
+  function setAvatar(avatar: Component): void {
+    state.avatar.value = avatar;
+  }
+
+  function openMainMenu(): void {
+    state.mainMenuOpen.value = true;
+  }
+
+  function expand(expanded: boolean = true): void {
+    Cookies.set('navigation-expanded', `${expanded}`);
+
+    state.expanded.value = expanded;
+  }
+
+  function toggleExpand(): void {
+    expand(!state.expanded.value);
+  }
+
+  function closeMainMenu(): void {
+    state.mainMenuOpen.value = false;
+  }
+
+  function toggleMainMenu(): void {
+    state.mainMenuOpen.value = !state.mainMenuOpen.value;
+  }
+
+  function openMobileMenu(): void {
+    state.mobileMenuOpen.value = true;
+    state.mobileMenuOpenTransition.value = true;
+  }
+
+  function closeMobileMenu(): void {
+    state.mobileMenuOpen.value = false;
+
+    setTimeout(() => {
+      state.mobileMenuOpenTransition.value = false;
+    }, 100);
+  }
+
+  function toggleMobileMenu(): void {
+    if (state.mobileMenuOpen.value) {
+      return closeMobileMenu();
+    }
+
+    return openMobileMenu();
+  }
+
+  return {
+    ...state,
+    setNavigationItems,
+    setNavigationComponent,
+    setLogo,
+    setAvatar,
+    openMainMenu,
+    closeMainMenu,
+    toggleMainMenu,
+    openMobileMenu,
+    closeMobileMenu,
+    toggleMobileMenu,
+    expand,
+    toggleExpand,
+  };
+}
+
+export type { NavigationItem, Logo };

package/src/modules/icons/BuildingCircleCheck.vue

@@ -0,0 +1,32 @@
+<template>
+  <svg
+    width="26"
+    height="21"
+    viewBox="0 0 26 21"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M2.375 0H13.625C14.6406 0 15.5 0.859375 15.5 1.875V9.10156C13.9375 10.3516 13 12.2656 13 14.375C13 16.3281
+        13.7812 18.0859 15.0703 19.3359C14.7188 19.7656 14.2109 20 13.625 20H9.875V16.875C9.875 15.8594 9.01562 15 8
+        15C6.94531 15 6.125 15.8594 6.125 16.875V20H2.375C1.32031 20 0.5 19.1797 0.5 18.125V1.875C0.5 0.859375 1.32031
+        0 2.375 0ZM3 9.375V10.625C3 10.9766 3.27344 11.25 3.625 11.25H4.875C5.1875 11.25 5.5 10.9766 5.5
+        10.625V9.375C5.5 9.0625 5.1875 8.75 4.875 8.75H3.625C3.27344 8.75 3 9.0625 3 9.375ZM7.375 8.75C7.02344 8.75 6.75
+        9.0625 6.75 9.375V10.625C6.75 10.9766 7.02344 11.25 7.375 11.25H8.625C8.9375 11.25 9.25 10.9766 9.25
+        10.625V9.375C9.25 9.0625 8.9375 8.75 8.625 8.75H7.375ZM10.5 9.375V10.625C10.5 10.9766 10.7734 11.25 11.125
+        11.25H12.375C12.6875 11.25 13 10.9766 13 10.625V9.375C13 9.0625 12.6875 8.75 12.375 8.75H11.125C10.7734 8.75
+        10.5 9.0625 10.5 9.375ZM3.625 3.75C3.27344 3.75 3 4.0625 3 4.375V5.625C3 5.97656 3.27344 6.25 3.625
+        6.25H4.875C5.1875 6.25 5.5 5.97656 5.5 5.625V4.375C5.5 4.0625 5.1875 3.75 4.875 3.75H3.625ZM6.75
+        4.375V5.625C6.75 5.97656 7.02344 6.25 7.375 6.25H8.625C8.9375 6.25 9.25 5.97656 9.25 5.625V4.375C9.25 4.0625
+        8.9375 3.75 8.625 3.75H7.375C7.02344 3.75 6.75 4.0625 6.75 4.375ZM11.125 3.75C10.7734 3.75 10.5 4.0625 10.5
+        4.375V5.625C10.5 5.97656 10.7734 6.25 11.125 6.25H12.375C12.6875 6.25 13 5.97656 13 5.625V4.375C13 4.0625
+        12.6875 3.75 12.375 3.75H11.125ZM25.5 14.375C25.5 16.4062 24.4062 18.2422 22.6875 19.2578C20.9297 20.2734
+        18.7812 20.2734 17.0625 19.2578C15.3047 18.2422 14.25 16.4062 14.25 14.375C14.25 12.3828 15.3047 10.5469 17.0625
+        9.53125C18.7812 8.51562 20.9297 8.51562 22.6875 9.53125C24.4062 10.5469 25.5 12.3828 25.5 14.375ZM22.4922
+        12.6953C22.2578 12.4609 21.8281 12.4609 21.5938 12.6953L19.25 15.0781L18.1172 13.9453C17.8828 13.7109 17.4531
+        13.7109 17.2188 13.9453C16.9844 14.1797 16.9844 14.6094 17.2188 14.8438L18.7812 16.4062C19.0156 16.6406 19.4453
+        16.6406 19.6797 16.4062L22.4922 13.5938C22.7266 13.3594 22.7266 12.9297 22.4922 12.6953Z"
+      fill="currentColor"
+    ></path>
+  </svg>
+</template>

package/src/modules/icons/BuildingCircleXmark.vue

@@ -0,0 +1,20 @@
+<template>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 640 512"
+  >
+    <path
+      d="M48 0C21.5 0 0 21.5 0 48L0 464c0 26.5 21.5 48 48 48l96 0 0-80c0-26.5 21.5-48 48-48s48 21.5 48 48l0 80 96 0c15.1 0 28.5-6.9
+        37.3-17.8C340.4 462.2 320 417.5 320 368c0-54.7 24.9-103.5 64-135.8L384 48c0-26.5-21.5-48-48-48L48 0zM64 240c0-8.8 7.2-16
+        6-16l32 0c8.8 0 16 7.2 16 16l0 32c0 8.8-7.2 16-16 16l-32 0c-8.8 0-16-7.2-16-16l0-32zm112-16l32 0c8.8 0 16 7.2 16 16l0 32c0
+        8.8-7.2 16-16 16l-32 0c-8.8 0-16-7.2-16-16l0-32c0-8.8 7.2-16 16-16zm80 16c0-8.8 7.2-16 16-16l32 0c8.8 0 16 7.2 16 16l0 32c0
+        8.8-7.2 16-16 16l-32 0c-8.8 0-16-7.2-16-16l0-32zM80 96l32 0c8.8 0 16 7.2 16 16l0 32c0 8.8-7.2 16-16 16l-32 0c-8.8
+        0-16-7.2-16-16l0-32c0-8.8 7.2-16 16-16zm80 16c0-8.8 7.2-16 16-16l32 0c8.8 0 16 7.2 16 16l0 32c0 8.8-7.2 16-16 16l-32 0c-8.8
+        0-16-7.2-16-16l0-32zM272 96l32 0c8.8 0 16 7.2 16 16l0 32c0 8.8-7.2 16-16 16l-32 0c-8.8 0-16-7.2-16-16l0-32c0-8.8 7.2-16 16-16zM496
+        512a144 144 0 1 0 0-288 144 144 0 1 0 0 288zm59.3-180.7L518.6 368l36.7 36.7c6.2 6.2 6.2 16.4 0 22.6s-16.4 6.2-22.6 0L496 390.6l-36.7
+        36.7c-6.2 6.2-16.4 6.2-22.6 0s-6.2-16.4 0-22.6L473.4 368l-36.7-36.7c-6.2-6.2-6.2-16.4 0-22.6s16.4-6.2 22.6 0L496
+        345.4l36.7-36.7c6.2-6.2 16.4-6.2 22.6 0s6.2 16.4 0 22.6z"
+      fill="currentColor"
+    ></path>
+  </svg>
+</template>

package/src/modules/icons/CarsIcon.vue

@@ -0,0 +1,29 @@
+<template>
+  <svg
+    width="26"
+    height="20"
+    viewBox="0 0 26 20"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M5.85156 1.875C5.46094 1.875 5.10938 2.14844 4.99219 2.5L4.32812 4.375H12.8828L12.2188 2.5C12.1016 2.14844 11.75 1.875 11.3594
+        1.875H5.85156ZM2.10156 5L3.23438 1.875C3.625 0.78125 4.67969 0 5.85156 0H11.3594C12.5312 0 13.5859 0.78125 14.0156 1.875L15.1094
+        5H14.6016C13.4688 5 12.4531 5.46875 11.6719 6.25H4.25C3.19531 6.25 2.375 7.10938 2.375 8.125V9.375H10.1875L9.75781 10.5469C9.52344
+        10.7812 9.28906 11.0156 9.09375 11.25H2.375V12.8125C2.375 13.3594 1.94531 13.75 1.4375 13.75C0.890625 13.75 0.5 13.3594 0.5
+        12.8125V11.25V10V9.375V8.125C0.5 6.875 1.125 5.74219 2.0625 5.07812C2.10156 5.03906 2.10156 5.03906 2.10156 5ZM4.875 8.75C4.32812
+        8.75 3.9375 8.35938 3.9375 7.8125C3.9375 7.30469 4.32812 6.875 4.875 6.875C5.38281 6.875 5.8125 7.30469 5.8125 7.8125C5.8125 8.35938
+        5.38281 8.75 4.875 8.75ZM14.6016 8.125C14.2109 8.125 13.8594 8.39844 13.7422 8.75L13.0781 10.625H21.6328L20.9688 8.75C20.8516
+        8.39844 20.5 8.125 20.1094 8.125H14.6016ZM10.8516 11.25L11.9844 8.125C12.375 7.03125 13.4297 6.25 14.6016 6.25H20.1094C21.2812
+        6.25 22.3359 7.03125 22.7656 8.125L23.8594 11.25C23.8594 11.2891 23.8984 11.2891 23.8984 11.3281C24.8359 11.9922 25.5 13.125 25.5
+        14.375V15.625V16.25V17.5V19.0625C25.5 19.6094 25.0703 20 24.5625 20C24.0156 20 23.625 19.6094 23.625
+        19.0625V17.5H11.125V19.0625C11.125 19.6094 10.6953 20 10.1875 20C9.64062 20 9.25 19.6094 9.25 19.0625V17.5V16.25V15.625V14.375C9.25
+        13.125 9.875 11.9922 10.8125 11.3281C10.8516 11.2891 10.8516 11.2891 10.8516 11.25ZM21.75 12.5H13C11.9453 12.5 11.125 13.3594 11.125
+        14.375V15.625H23.625V14.375C23.625 13.3594 22.7656 12.5 21.75 12.5ZM13.625 15C13.0781 15 12.6875 14.6094 12.6875 14.0625C12.6875
+        13.5547 13.0781 13.125 13.625 13.125C14.1328 13.125 14.5625 13.5547 14.5625 14.0625C14.5625 14.6094 14.1328 15 13.625 15ZM22.0625
+        14.0625C22.0625 14.6094 21.6328 15 21.125 15C20.5781 15 20.1875 14.6094 20.1875 14.0625C20.1875 13.5547 20.5781 13.125 21.125
+        13.125C21.6328 13.125 22.0625 13.5547 22.0625 14.0625Z"
+      fill="currentColor"
+    ></path>
+  </svg>
+</template>

package/src/modules/icons/ChatPersonRoundedIcon.vue

@@ -0,0 +1,184 @@
+<script lang="ts" setup>
+  import { computed } from 'vue';
+  import { useLayout } from '~/modules/composables';
+
+  const props = defineProps<{
+    primaryColor?: string;
+  }>();
+
+  const { colors } = useLayout();
+
+  const primaryColorWithFallback = computed(() => props.primaryColor ?? colors.primaryColor.value);
+</script>
+
+<template>
+  <svg
+    width="50"
+    height="50"
+    viewBox="0 0 50 50"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <mask
+      id="mask0_3811_5945"
+      style="mask-type:alpha"
+      maskUnits="userSpaceOnUse"
+      x="0"
+      y="0"
+      width="50"
+      height="50"
+    >
+      <circle
+        cx="25"
+        cy="25"
+        r="25"
+        transform="matrix(-1 0 0 1 50 0)"
+        fill="#D9D9D9"
+      ></circle>
+    </mask>
+
+    <g mask="url(#mask0_3811_5945)">
+      <circle
+        cx="25"
+        cy="25"
+        r="25"
+        transform="matrix(-1 0 0 1 50 0)"
+        fill="#A1A1AA"
+      ></circle>
+
+      <path
+        d="M21.5701 39.3696C23.0466 41.612 22.6426 45.3129 22.6426 45.3129C22.6426 45.3129
+          20.4717 44.0286 20.3264 41.8759C20.1812 39.7232 21.5701 39.3696 21.5701 39.3696Z"
+        fill="#EBEFF2"
+      ></path>
+
+      <path
+        :fill="primaryColorWithFallback"
+        d="M4.37772 103.714C12.6102 105.679 31.1059 105.294 38.7144 103.671C38.8175 96.8455 38.61 89.8252 38.0145 82.6722C36.5563 65.1681
+          22.3973 48.4737 21.7245 42.9224C21.5698 41.6538 21.5251 40.4663 21.5752 39.3696C20.2323 42.1141 21.266 46.3236 20.0736
+          45.7292C19.059 45.2242 14.4293 41.4385 13.1148 39.7839C9.45505 51.5689 4.27057 71.1026 4.27057 87.2364C4.25971 92.827 4.2977
+          98.3295 4.37908 103.716L4.37772 103.714Z"
+      ></path>
+
+      <path
+        d="M12.8873 38.894C12.8767 39.0253 13.0027 39.2524 13.2296 39.5452C14.5152 41.2169 19.0446 45.0419 20.0357 45.5522C21.2019 46.1528
+          20.1923 41.8996 21.5044 39.1265C20.8808 39.1649 15.7795 36.686 14.1888 36.4206C13.9765 36.385 13.8266 36.3891 13.7589
+          36.4425C13.1765 36.9049 12.9549 38.0143 12.8873 38.8926V38.894Z"
+        fill="#F4F4F5"
+      ></path>
+
+      <path
+        d="M31.9449 4.78145C36.621 3.89561 38.7617 7.74691 38.1187 11.3839C37.477 15.0209 30.294 16.5796 29.438 16.6108C28.582 16.642
+          28.1547 11.4761 28.6132 8.6938C29.0717 5.91283 31.9449 4.78145 31.9449 4.78145Z"
+        fill="#27272A"
+      ></path>
+
+      <path
+        d="M14.1224 36.5629C15.6079 36.803 20.0832 38.8717 21.3367 39.2C21.3407 39.2 21.3421 39.2014 21.3434 39.2014C21.4588 39.2326 21.5469
+          39.2475 21.6026 39.2434C21.7586 35.7693 22.8723 33.2311 24.5558 32.0251C24.6698 31.9451 24.7837 31.8691 24.9004 31.8013C25.8174
+          31.2654 27.2472 31.222 28.6879 31.1759H28.6893C31.0646 31.1027 33.4726 31.028 33.672 28.7436C33.9935 25.0754 32.0671 24.2045
+          32.0563 22.9659C32.0441 21.7274 33.3057 22.0028 34.0382 21.5578C34.7722 21.1129 33.3966 20.3532 32.2964 17.8313C31.686 16.43
+          31.9369 14.7031 31.7606 13.0521C31.6235 11.7322 31.2098 10.4583 29.8654 9.44092L24.043 12.3752L16.685 17.8313V29.0787C16.685
+          29.0787 16.6809 29.0841 16.6809 29.0882C16.6402 29.198 16.1953 30.3945 15.4966 32.4294C15.1073 33.5608 14.6406 34.9526 14.1211
+          36.5615L14.1224 36.5629Z"
+        fill="#F5CAA4"
+      ></path>
+
+      <path
+        d="M16.6864 17.8327V29.08C17.8802 26.5514 16.8003 22.6322 19.3222 21.7315C21.8441 20.8307 22.776 17.7716 22.776 17.7716C22.776
+          17.7716 23.1884 17.2968 23.434 16.0895C23.6782 14.8821 25.9097 14.7912 26.3221 14.8509C26.6938 14.9065 30.8286 15.0965 31.762
+          13.0521C31.6249 11.7322 31.2112 10.4583 29.8668 9.44092L24.0444 12.3752L16.6864 17.8313V17.8327Z"
+        fill="#EAAA79"
+      ></path>
+
+      <path
+        d="M9.98288 24.5277C9.91098 25.0106 9.90285 25.7472 10.0453 26.5218C10.4468 28.6856 12.0313 31.1328 16.6857 29.0817V18.9956C22.3331
+          21.626 23.4021 17.4898 23.0806 16.2295C22.7591 14.9693 23.1728 14.8784 24.3191 15.3803C25.4654 15.8863 30.0357 15.9392 30.463
+          12.8517C30.8904 9.76545 29.6695 8.66527 31.197 9.18348C32.7245 9.7044 35.4756 6.43235 34.4378 3.86436C33.3973 1.29637 31.7477
+          -4.16654 26.9794 -2.95105C22.211 -1.73692 25.3596 2.76418 24.0451 3.68123C22.7306 4.59827 20.2548 1.26788 17.6869 3.19286C15.1189
+          5.11919 17.657 10.0083 17.6869 11.1993C17.7181 12.3918 14.5084 9.5484 11.9716 11.1383C9.43347 12.7282 8.42418 14.8377 10.0751
+          17.6485C10.4414 18.2739 10.7778 18.7758 11.0709 19.1855C12.0991 20.6167 12.6445 20.9205 12.4301 21.4537C12.1548 22.1415 10.2583
+          22.6922 9.98424 24.525L9.98288 24.5277Z"
+        fill="#52525B"
+      ></path>
+
+      <path
+        d="M14.1218 36.5633C15.6072 36.8034 20.0825 38.8722 21.336 39.2004C21.3401 39.2004 21.3414 39.2018 21.3428 39.2018C21.4839 39.2262
+          21.5707 39.2384 21.5938 39.2425C21.3848 39.1475 16.782 37.095 16.0644 35.9582C15.6126 35.2447 15.5082 33.5964 15.496
+          32.4312C15.1066 33.5625 14.64 34.9544 14.1204 36.5633H14.1218Z"
+        fill="#EAAA79"
+      ></path>
+
+      <path
+        d="M24.5629 31.62C24.5615 31.7625 24.5575 31.8981 24.5561 32.027C24.6701 31.947 24.784 31.871 24.9007 31.8032C25.8177 31.2673
+          27.2476 31.2239 28.6882 31.1778C25.1435 31.0679 22.0872 27.3102 21.8443 27.5544C21.6001 27.7986 24.5955 29.9379 24.5643
+          31.62H24.5629Z"
+        fill="#EAAA79"
+      ></path>
+
+      <path
+        d="M10.0457 26.5203C12.7833 26.0916 16.678 24.8327 16.678 24.8327C16.678 24.8327 16.6821 24.8259 16.6875 24.8083V20.7318C15.9319
+          19.2477 14.4939 17.2183 14.4939 17.2183L11.0713 19.1866C12.0996 20.6178 12.6449 20.9217 12.4306 21.4548C12.1552 22.1426 10.2587
+          22.6934 9.98468 24.5261C9.91278 25.0091 9.90464 25.7457 10.0471 26.5203H10.0457Z"
+        fill="#27272A"
+      ></path>
+
+      <path
+        d="M20.6782 23.0028C20.2129 17.4517 15.1678 15.2649 13.9727 17.9184C12.7775 20.5718 17.862
+          24.8871 19.2592 25.0689C20.6565 25.2507 20.6769 23.0028 20.6769 23.0028H20.6782Z"
+        fill="#F5CAA4"
+      ></path>
+
+      <path
+        d="M19.0258 23.1914C19.936 21.2488 18.0314 19.5748 16.8959 20.4389C15.7605 21.3031 17.87 21.2122 18.011 21.6897C18.1521
+          22.1672 17.9812 22.3978 18.342 22.4887C18.7042 22.5796 18.8738 23.5129 19.0258 23.1914Z"
+        fill="#EAAA79"
+      ></path>
+
+      <circle
+        cx="2.08015"
+        cy="2.08015"
+        r="2.08015"
+        transform="matrix(-1 0 0 1 27.1504 20.0537)"
+        fill="#FCA573"
+      ></circle>
+
+      <path
+        d="M32.7966 25.459C31.5895 27.0548 28.9072 29.0995 27.8345 24.5113C28.8892 25.7212 31.3703 26.195 32.7966 25.459Z"
+        fill="#F4F4F5"
+      ></path>
+
+      <path
+        d="M32.7966 25.459C31.5895 27.0548 28.9072 29.0995 27.8345 24.5113C28.8521 25.9158 31.4635 26.7699 32.7966 25.459Z"
+        fill="#FE9661"
+      ></path>
+
+      <path
+        :fill="primaryColorWithFallback"
+        d="M9.34796 103.118C10.9894 104.39 12.6892 105.609 14.3618 106.736C15.3833 105.454 18.8914 102.254 20.3294 101.607C20.3308 101.605
+          20.3335 101.605 20.3335 101.605C17.7573 97.6143 15.4132 93.611 15.0578 91.2438C14.1407 85.1406 26.5683 72.9206 24.7776
+          65.4255C24.76 65.3509 24.1468 63.3269 24.1278 63.2523C22.6898 57.5656 17.543 49.0368 14.507 54.0547C9.26792 62.7151 -0.633701
+          79.4579 -1.99841 87.2053C-2.84627 92.0198 2.78215 98.0226 9.34796 103.118Z"
+      ></path>
+
+      <ellipse
+        cx="0.742909"
+        cy="1.78298"
+        rx="0.742909"
+        ry="1.78298"
+        transform="matrix(-0.991178 0.132536 0.132536 0.991178 29.8645 15.8945)"
+        fill="#232426"
+      ></ellipse>
+
+      <ellipse
+        cx="0.697212"
+        cy="1.67331"
+        rx="0.697212"
+        ry="1.67331"
+        transform="matrix(-0.999956 -0.00943597 -0.00943597 0.999956 32.7969 15.9067)"
+        fill="#232426"
+      ></ellipse>
+    </g>
+  </svg>
+</template>
+

package/src/modules/icons/CompanyIcon.vue

@@ -0,0 +1,18 @@
+<script lang="ts" setup>
+  /* eslint-disable max-len */
+</script>
+
+<template>
+  <svg
+    width="26"
+    height="20"
+    viewBox="0 0 26 20"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M11.75 1.875H3C2.64844 1.875 2.375 2.1875 2.375 2.5V16.25C2.375 16.6016 2.64844 16.875 3 16.875H8V18.75H3C1.59375 18.75 0.5 17.6562 0.5 16.25V2.5C0.5 1.13281 1.59375 0 3 0H11.75C13.1172 0 14.25 1.13281 14.25 2.5V5.03906C13.5469 5.11719 12.9219 5.35156 12.375 5.70312V2.5C12.375 2.1875 12.0625 1.875 11.75 1.875ZM10.5 8.59375L9.95312 10C9.95312 10 9.91406 10 9.875 10H8.625C8.27344 10 8 9.72656 8 9.375V8.125C8 7.8125 8.27344 7.5 8.625 7.5H9.875C10.1875 7.5 10.5 7.8125 10.5 8.125V8.59375ZM4.25 4.375C4.25 4.0625 4.52344 3.75 4.875 3.75H6.125C6.4375 3.75 6.75 4.0625 6.75 4.375V5.625C6.75 5.97656 6.4375 6.25 6.125 6.25H4.875C4.52344 6.25 4.25 5.97656 4.25 5.625V4.375ZM8.625 3.75H9.875C10.1875 3.75 10.5 4.0625 10.5 4.375V5.625C10.5 5.97656 10.1875 6.25 9.875 6.25H8.625C8.27344 6.25 8 5.97656 8 5.625V4.375C8 4.0625 8.27344 3.75 8.625 3.75ZM4.25 8.125C4.25 7.8125 4.52344 7.5 4.875 7.5H6.125C6.4375 7.5 6.75 7.8125 6.75 8.125V9.375C6.75 9.72656 6.4375 10 6.125 10H4.875C4.52344 10 4.25 9.72656 4.25 9.375V8.125ZM4.25 11.875C4.25 11.5625 4.52344 11.25 4.875 11.25H6.125C6.4375 11.25 6.75 11.5625 6.75 11.875V13.125C6.75 13.4766 6.4375 13.75 6.125 13.75H4.875C4.52344 13.75 4.25 13.4766 4.25 13.125V11.875ZM14.6016 8.125C14.2109 8.125 13.8594 8.39844 13.7422 8.75L13.0781 10.625H21.6328L20.9688 8.75C20.8516 8.39844 20.5 8.125 20.1094 8.125H14.6016ZM10.8516 11.25L11.9844 8.125C12.375 7.03125 13.4297 6.25 14.6016 6.25H20.1094C21.2812 6.25 22.3359 7.03125 22.7656 8.125L23.8594 11.25C23.8594 11.2891 23.8594 11.2891 23.8984 11.3281C24.8359 11.9922 25.5 13.125 25.5 14.375V15.625V16.25V17.5V19.0625C25.5 19.6094 25.0703 20 24.5625 20C24.0156 20 23.625 19.6094 23.625 19.0625V17.5H11.125V19.0625C11.125 19.6094 10.6953 20 10.1875 20C9.64062 20 9.25 19.6094 9.25 19.0625V17.5V16.25V15.625V14.375C9.25 13.125 9.875 11.9922 10.8125 11.3281C10.8516 11.2891 10.8516 11.2891 10.8516 11.25ZM21.75 12.5H13C11.9453 12.5 11.125 13.3594 11.125 14.375V15.625H23.625V14.375C23.625 13.3594 22.7656 12.5 21.75 12.5ZM13.625 13.125C14.1328 13.125 14.5625 13.5547 14.5625 14.0625C14.5625 14.6094 14.1328 15 13.625 15C13.0781 15 12.6875 14.6094 12.6875 14.0625C12.6875 13.5547 13.0781 13.125 13.625 13.125ZM20.1875 14.0625C20.1875 13.5547 20.5781 13.125 21.125 13.125C21.6328 13.125 22.0625 13.5547 22.0625 14.0625C22.0625 14.6094 21.6328 15 21.125 15C20.5781 15 20.1875 14.6094 20.1875 14.0625Z"
+      fill="white"
+    ></path>
+  </svg>
+</template>