@bytebrand/fe-ui-core 4.1.47 → 4.1.49

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bytebrand/fe-ui-core",
-  "version": "4.1.47",
+  "version": "4.1.49",
   "description": "UI components for the auto.de project",
   "main": "index.ts",
   "module": "dist/common.js",

package/source/components/PriceRating/PriceRating.tsx

@@ -20,7 +20,6 @@ export interface IPriceRatingProps {
 const PriceRating: React.SFC<IPriceRatingProps> = ({ t, rating, className, darkBackground, i18nPrefix, classLabel, classSegmentWrapper, onClick }) => {
   const ratingCode = (rating > 0 && rating < priceRatings.length) ? rating : 0;
   const ratingName = priceRatings[ratingCode];
-  console.log('ratingName', ratingName);
   const onWrapperClick = (event: React.SyntheticEvent<HTMLDivElement>) => {
     if (typeof onClick === 'function') {
       onClick(event);

package/source/components/SearchPage/SearchTopBar/SearchTopBar.styl

@@ -45,8 +45,8 @@
   font-weight: 700
 
 .sorting
-  flex-basis: 20%
-  min-width: 140px
+  // flex-basis: 20%
+  min-width: 180px
   [class*='MuiPaper-root'], [class*='MuiOutlinedInput-root']
     font-size: 14px !important
 

package/source/components/VehicleSmallCard/VehicleData/VehicleInfo/VehicleInfo.styl

@@ -180,9 +180,13 @@
           border: none;
 
       & .carIconSearch
-        width: 23px;
-        height: 23px;
-        max-width: 23px;
+        width: 25px;
+        height: 25px;
+        max-width: 25px;
+
+      span
+        font-size: 12px;
+        color: rgba(76, 78, 100, 0.87);
 
       & .priceRatingLabelSRL
         font-size: 10px;

package/source/components/_common/IconSVG/SVG/searchWidgets/drive/AllWheelDrive.tsx

@@ -5,18 +5,20 @@ const SvgAllWheelDrive = (
   props: any
 ) => (
   <svg
-    viewBox="0 0 31 25"
+    viewBox="0 0 25 25"
     width="1em"
     height="1em"
+    fill="none"
     {...props}
   >
-    <g fill="#231f20">
-      <path d="M20.7 4.2V2.4c0-1.3 1.1-2.4 2.5-2.4h5.4C29.9 0 31 1.1 31 2.4v1.8c0 1.3-1.1 2.4-2.4 2.4h-5.4c-1.4.1-2.5-1-2.5-2.4zM20.7 22.4v-1.8c0-1.3 1.1-2.4 2.4-2.4h5.5c1.3 0 2.4 1.1 2.4 2.4v1.8c0 1.3-1.1 2.4-2.4 2.4h-5.4c-1.4.1-2.5-1-2.5-2.4zM.4 4.2V2.4C.4 1.1 1.5 0 2.8 0h5.4c1.3 0 2.4 1.1 2.4 2.4v1.8c0 1.3-1.1 2.4-2.4 2.4H2.8C1.5 6.7.4 5.6.4 4.2zM.4 22.4v-1.8c0-1.3 1.1-2.4 2.4-2.4h5.4c1.3 0 2.4 1.1 2.4 2.4v1.8c0 1.3-1.1 2.4-2.4 2.4H2.8c-1.3.1-2.4-1-2.4-2.4z" />
-      <path d="M25.5 18.6V6.3c0-.2.2-.3.4-.3s.3.2.3.4v12.2c0 .2-.2.3-.3.3s-.4-.1-.4-.3z" />
-      <path d="M17.7 12.4c0-.2.2-.4.3-.4h7.9c.2 0 .3.2.3.4s-.2.4-.3.4H18c-.2 0-.3-.2-.3-.4zM4.9 18.6V6.3c0-.2.2-.4.3-.4s.3.2.3.4v12.2c0 .2-.2.3-.3.3s-.3 0-.3-.2z" />
-      <path d="M4.9 12.4c0-.2.2-.4.3-.4H13c.2 0 .3.2.3.4s-.2.4-.3.4H5.2c-.1 0-.3-.2-.3-.4z" />
-      <path d="M12.8 12.4c0-1.4 1.1-2.5 2.5-2.5s2.5 1.1 2.5 2.5-1.1 2.5-2.5 2.5-2.5-1.1-2.5-2.5zm4.4 0c0-1-.8-1.8-1.8-1.8s-1.8.8-1.8 1.8.8 1.8 1.8 1.8 1.8-.7 1.8-1.8z" />
-    </g>
+    <rect x="5.3811" y="22.0454" width="5.57939" height="3.21824" rx="1" transform="rotate(-90 5.3811 22.0454)" stroke="#616376"/>
+    <rect x="17.1628" y="22.0454" width="5.57939" height="3.21824" rx="1" transform="rotate(-90 17.1628 22.0454)" stroke="#616376"/>
+    <rect x="5.3811" y="8.97205" width="5.57939" height="3.21824" rx="1" transform="rotate(-90 5.3811 8.97205)" stroke="#616376"/>
+    <rect x="17.1628" y="8.97205" width="5.57939" height="3.21824" rx="1" transform="rotate(-90 17.1628 8.97205)" stroke="#616376"/>
+    <path d="M8.91357 6.13966L16.7747 6.13966M8.91357 19.156L16.7747 19.156" stroke="#616376" stroke-linecap="round"/>
+    <path d="M12.844 6.25354L12.844 19.099" stroke="#616376" stroke-linecap="round"/>
+    <circle cx="12.858" cy="6.02868" r="2.11537" transform="rotate(-90 12.858 6.02868)" fill="#616376"/>
+    <circle cx="12.858" cy="19.0991" r="2.11537" transform="rotate(-90 12.858 19.0991)" fill="#616376"/>
   </svg>
 );
 

package/source/components/_common/IconSVG/SVG/searchWidgets/drive/FrontWheelDrive.tsx

@@ -5,18 +5,19 @@ const SvgFrontWheelDrive = (
   props: any
 ) => (
   <svg
-    viewBox="0 0 31 25"
+    viewBox="0 0 25 25"
     width="1em"
     height="1em"
+    fill="none"
     {...props}
   >
-    <g fill="#231f20">
-      <path d="M10.3 20.8v1.8c0 1.3-1.1 2.4-2.5 2.4H2.4C1.1 25 0 23.9 0 22.6v-1.8c0-1.3 1.1-2.4 2.4-2.4h5.4c1.4-.1 2.5 1 2.5 2.4zM.7 22.6c0 1 .8 1.7 1.7 1.7h5.4c1 0 1.7-.8 1.7-1.7v-1.8c0-1-.8-1.7-1.7-1.7H2.4c-1 0-1.7.8-1.7 1.7zM10.3 2.6v1.8c0 1.3-1.1 2.4-2.4 2.4H2.4C1.1 6.8 0 5.7 0 4.4V2.6C0 1.3 1.1.2 2.4.2h5.4c1.4-.1 2.5 1 2.5 2.4zM.7 4.3c0 1 .8 1.7 1.7 1.7h5.4c1 0 1.7-.8 1.7-1.7V2.5c0-1-.8-1.7-1.7-1.7H2.4C1.4.8.7 1.6.7 2.5zM30.6 20.8v1.8c0 1.3-1.1 2.4-2.4 2.4h-5.4c-1.3 0-2.4-1.1-2.4-2.4v-1.8c0-1.3 1.1-2.4 2.4-2.4h5.4c1.3-.1 2.4 1 2.4 2.4zM30.6 2.6v1.8c0 1.3-1.1 2.4-2.4 2.4h-5.4c-1.3 0-2.4-1.1-2.4-2.4V2.6c0-1.3 1.1-2.4 2.4-2.4h5.4c1.3-.1 2.4 1 2.4 2.4z" />
-      <path d="M5.5 6.4v12.3c0 .2-.2.3-.4.3s-.3-.2-.3-.4V6.4c0-.2.2-.3.3-.3s.4.1.4.3z" />
-      <path d="M13.3 12.6c0 .2-.2.4-.3.4H5.1c-.2 0-.3-.2-.3-.4s.2-.4.3-.4H13c.2 0 .3.2.3.4zM26.1 6.4v12.3c0 .2-.2.4-.3.4s-.3-.2-.3-.4V6.5c0-.2.2-.3.3-.3s.3 0 .3.2z" />
-      <path d="M26.1 12.6c0 .2-.2.4-.3.4H18c-.2 0-.3-.2-.3-.4s.2-.4.3-.4h7.8c.1 0 .3.2.3.4z" />
-      <path d="M18.2 12.6c0 1.4-1.1 2.5-2.5 2.5s-2.5-1.1-2.5-2.5 1.1-2.5 2.5-2.5 2.5 1.1 2.5 2.5zm-4.4 0c0 1 .8 1.8 1.8 1.8s1.8-.8 1.8-1.8-.8-1.8-1.8-1.8-1.8.7-1.8 1.8z" />
-    </g>
+    <rect x="4.52319" y="22.1165" width="5.57939" height="3.21824" rx="1" transform="rotate(-90 4.52319 22.1165)" stroke="#616376"/>
+    <rect x="16.3049" y="22.1165" width="5.57939" height="3.21824" rx="1" transform="rotate(-90 16.3049 22.1165)" stroke="#616376"/>
+    <rect x="4.52319" y="9.04309" width="5.57939" height="3.21824" rx="1" transform="rotate(-90 4.52319 9.04309)" stroke="#616376"/>
+    <rect x="16.3049" y="9.04309" width="5.57939" height="3.21824" rx="1" transform="rotate(-90 16.3049 9.04309)" stroke="#616376"/>
+    <path d="M8.05566 6.21071L15.9167 6.21071M8.05566 19.2271L15.9167 19.2271" stroke="#616376" stroke-linecap="round"/>
+    <path d="M11.9861 6.32458L11.9861 19.1701" stroke="#616376" stroke-linecap="round"/>
+    <circle cx="12.0001" cy="6.09972" r="2.11537" transform="rotate(-90 12.0001 6.09972)" fill="#616376"/>
   </svg>
 );
 

package/source/components/_common/IconSVG/SVG/searchWidgets/drive/RearWheelDrive.tsx

@@ -5,18 +5,19 @@ const SvgRearWheelDrive = (
   props: any
 ) => (
   <svg
-    viewBox="0 0 31 25"
+    viewBox="0 0 25 25"
     width="1em"
     height="1em"
+    fill="none"
     {...props}
   >
-    <g fill="#231f20">
-      <path d="M20.7 4.2V2.4c0-1.3 1.1-2.4 2.5-2.4h5.4C29.9 0 31 1.1 31 2.4v1.8c0 1.3-1.1 2.4-2.4 2.4h-5.4c-1.4.1-2.5-1-2.5-2.4zm9.6-1.8c0-1-.8-1.7-1.7-1.7h-5.4c-1 0-1.7.8-1.7 1.7v1.8c0 1 .8 1.7 1.7 1.7h5.4c1 0 1.7-.8 1.7-1.7zM20.7 22.4v-1.8c0-1.3 1.1-2.4 2.4-2.4h5.5c1.3 0 2.4 1.1 2.4 2.4v1.8c0 1.3-1.1 2.4-2.4 2.4h-5.4c-1.4.1-2.5-1-2.5-2.4zm9.6-1.7c0-1-.8-1.7-1.7-1.7h-5.4c-1 0-1.7.8-1.7 1.7v1.8c0 1 .8 1.7 1.7 1.7h5.4c1 0 1.7-.8 1.7-1.7zM.4 4.2V2.4C.4 1.1 1.5 0 2.8 0h5.4c1.3 0 2.4 1.1 2.4 2.4v1.8c0 1.3-1.1 2.4-2.4 2.4H2.8C1.5 6.7.4 5.6.4 4.2zM.4 22.4v-1.8c0-1.3 1.1-2.4 2.4-2.4h5.4c1.3 0 2.4 1.1 2.4 2.4v1.8c0 1.3-1.1 2.4-2.4 2.4H2.8c-1.3.1-2.4-1-2.4-2.4z" />
-      <path d="M25.5 18.6V6.3c0-.2.2-.3.4-.3s.3.2.3.4v12.2c0 .2-.2.3-.3.3s-.4-.1-.4-.3z" />
-      <path d="M17.7 12.4c0-.2.2-.4.3-.4h7.9c.2 0 .3.2.3.4s-.2.4-.3.4H18c-.2 0-.3-.2-.3-.4zM4.9 18.6V6.3c0-.2.2-.4.3-.4s.3.2.3.4v12.2c0 .2-.2.3-.3.3s-.3 0-.3-.2z" />
-      <path d="M4.9 12.4c0-.2.2-.4.3-.4H13c.2 0 .3.2.3.4s-.2.4-.3.4H5.2c-.1 0-.3-.2-.3-.4z" />
-      <path d="M12.8 12.4c0-1.4 1.1-2.5 2.5-2.5s2.5 1.1 2.5 2.5-1.1 2.5-2.5 2.5-2.5-1.1-2.5-2.5zm4.4 0c0-1-.8-1.8-1.8-1.8s-1.8.8-1.8 1.8.8 1.8 1.8 1.8 1.8-.7 1.8-1.8z" />
-    </g>
+    <rect x="4.83862" y="22.1165" width="5.57939" height="3.21824" rx="1" transform="rotate(-90 4.83862 22.1165)" stroke="#616376"/>
+    <rect x="16.6204" y="22.1165" width="5.57939" height="3.21824" rx="1" transform="rotate(-90 16.6204 22.1165)" stroke="#616376"/>
+    <rect x="4.83862" y="9.04309" width="5.57939" height="3.21824" rx="1" transform="rotate(-90 4.83862 9.04309)" stroke="#616376"/>
+    <path d="M17.6204 9.04309C17.0681 9.04309 16.6204 8.59538 16.6204 8.04309L16.6204 4.4637C16.6204 3.91142 17.0681 3.4637 17.6204 3.4637L18.8386 3.4637C19.3909 3.4637 19.8386 3.91142 19.8386 4.4637L19.8386 8.04309C19.8386 8.59538 19.3909 9.04309 18.8386 9.04309L17.6204 9.04309Z" stroke="#616376"/>
+    <path d="M8.37109 6.21071L16.2322 6.21071M8.37109 19.2271L16.2322 19.2271" stroke="#616376" stroke-linecap="round"/>
+    <path d="M12.3015 6.32458L12.3015 19.1701" stroke="#616376" stroke-linecap="round"/>
+    <circle cx="12.3156" cy="19.2784" r="2.11537" transform="rotate(-90 12.3156 19.2784)" fill="#616376"/>
   </svg>
 );
 

package/source/components/_common/IconSVG/SVG/searchWidgets/fuel/FuelElectrical.tsx

@@ -5,17 +5,13 @@ const SvgFuelElectrical = (
   props: any
 ) => (
   <svg
-    viewBox="0 0 14.2 23.6"
+    viewBox="0 0 25 24"
     width="1em"
     height="1em"
+    fill='none'
     {...props}
   >
-    <switch>
-      <g fill="#231f20">
-        <path d="M7.1 15.1C3.2 15.1 0 12 0 8.1V4.3c0-.2.2-.3.3-.3h13.5c.2 0 .3.2.3.3v3.8c.1 3.9-3.1 7-7 7zM.7 4.6V8c0 3.5 2.9 6.4 6.4 6.4s6.4-2.9 6.4-6.4V4.6z" />
-        <path d="M7.1 23.6c-.2 0-.3-.2-.3-.3v-8.5c0-.2.2-.3.3-.3s.3.2.3.3v8.5c0 .2-.1.3-.3.3zM3.7 4.6c-.2 0-.3-.2-.3-.3v-4c0-.1.1-.3.3-.3s.3.2.3.3v3.9c.1.3-.1.4-.3.4zM10.2 4.6c-.2 0-.3-.2-.3-.3v-4c-.1-.1.1-.3.3-.3s.3.2.3.3v3.9c0 .3-.1.4-.3.4z" />
-      </g>
-    </switch>
+    <path d="M10.4199 19.6889C10.4199 19.7994 10.5094 19.8889 10.6199 19.8889H14.1079C14.2184 19.8889 14.3079 19.7994 14.3079 19.6889V17.8637C14.3079 17.6597 14.3703 17.4607 14.4866 17.2932L16.6931 14.1169C16.8094 13.9494 16.8718 13.7503 16.8718 13.5463V9.3235C16.8718 9.13567 16.8012 8.97151 16.6599 8.83101C16.5194 8.68976 16.3553 8.61914 16.1674 8.61914H8.56034C8.37251 8.61914 8.20835 8.68976 8.06785 8.83101C7.92661 8.97151 7.85598 9.13567 7.85598 9.3235V13.5463C7.85598 13.7503 7.91834 13.9494 8.03469 14.1169L10.2411 17.2932C10.3575 17.4607 10.4199 17.6597 10.4199 17.8637V19.6889ZM9.29288 18.3231C9.29288 18.1314 9.23775 17.9436 9.13406 17.7823L7.26432 14.8739C7.09527 14.7236 6.96379 14.5309 6.86988 14.2957C6.77596 14.0613 6.729 13.822 6.729 13.5778V9.3235C6.729 8.81636 6.90744 8.38435 7.26432 8.02748C7.62119 7.6706 8.0532 7.49216 8.56034 7.49216H9.94089L9.3774 8.05565V3.54774C9.3774 3.3787 9.42924 3.24233 9.53292 3.13865C9.63585 3.03572 9.77184 2.98425 9.94089 2.98425C10.0912 2.98425 10.2226 3.03572 10.3353 3.13865C10.448 3.24233 10.5044 3.3787 10.5044 3.54774V7.49216H14.2234V3.54774C14.2234 3.3787 14.2798 3.24233 14.3925 3.13865C14.5051 3.03572 14.6366 2.98425 14.7869 2.98425C14.9559 2.98425 15.0919 3.03572 15.1949 3.13865C15.2985 3.24233 15.3504 3.3787 15.3504 3.54774V8.05565L14.7869 7.49216H16.1674C16.6746 7.49216 17.1066 7.6706 17.4635 8.02748C17.8203 8.38435 17.9988 8.81636 17.9988 9.3235V13.5778C17.9988 13.822 17.9518 14.0613 17.8579 14.2957C17.764 14.5309 17.6325 14.7236 17.4635 14.8739L15.5937 17.7823C15.49 17.9436 15.4349 18.1314 15.4349 18.3231V20.1143C15.4349 20.3585 15.3504 20.5696 15.1813 20.7477C15.0123 20.9265 14.7963 21.0159 14.5333 21.0159H10.1945C9.9315 21.0159 9.71549 20.9265 9.54645 20.7477C9.3774 20.5696 9.29288 20.3585 9.29288 20.1143V18.3231Z" fill="#616376"/>
   </svg>
 );
 

package/source/components/_common/IconSVG/SVG/searchWidgets/fuel/FuelElectricalPetrol.tsx

@@ -5,40 +5,14 @@ const SvgFuelElectricalPetrol = (
   props: any
 ) => (
   <svg
-    viewBox="0 0 33.7 24.4"
+    viewBox="0 0 25 24"
     width="1em"
     height="1em"
+    fill="none"
     {...props}
   >
-    <clipPath id="fuelElectricalPetrol_svg__a">
-      <path d="M-51.1 53.7h27.9v27.9h-27.9z" />
-    </clipPath>
-    <switch>
-      <g>
-        <path
-          d="M8.3 24.4c-4.5 0-8.3-3.8-8.3-8.3C0 11.7 7.7.6 8 .1c.2-.1.5-.1.6 0 .3.5 8 11.6 8 16 0 4.5-3.8 8.3-8.3 8.3zM8.3 1C6.9 3.1.7 12.4.7 16.1c0 4.1 3.5 7.6 7.6 7.6s7.6-3.5 7.6-7.6c0-3.7-6.2-13-7.6-15.1z"
-          fill="#231f20"
-        />
-        <path
-          d="M3.4 17.2s.4 2 2.6 3.1"
-          fill="#fff"
-        />
-        <g fill="#231f20">
-          <path d="M6 20.7h-.2C3.5 19.6 3 17.5 3 17.4c0-.2.1-.4.3-.4s.4.1.4.3c0 0 .4 1.9 2.4 2.8.2.1.2.3.2.5-.1 0-.2.1-.3.1zM26.6 15.4c-3.9 0-7.1-3.2-7.1-7.1V4.5c0-.2.2-.3.3-.3h13.5c.2 0 .3.2.3.3v3.8c.1 3.9-3 7.1-7 7.1zM20.3 4.9v3.4c0 3.5 2.9 6.4 6.4 6.4S33 11.8 33 8.3V4.9z" />
-          <path d="M26.6 23.9c-.2 0-.3-.2-.3-.3V15c0-.2.2-.3.3-.3s.4.1.4.3v8.5c0 .2-.2.4-.4.4zM23.3 4.9c-.2 0-.3-.2-.3-.3v-4c0-.2.2-.3.3-.3s.3.2.3.3v3.9c0 .2-.1.4-.3.4zM29.8 4.9c-.2 0-.3-.2-.3-.3v-4c0-.2.2-.3.3-.3s.3.2.3.3v3.9c0 .2-.1.4-.3.4z" />
-        </g>
-        <g clipPath="url(#fuelElectricalPetrol_svg__a)">
-          <path
-            d="M-21.1 22.6l29 29"
-            fill="#fff"
-          />
-          <path
-            d="M7.9 51.9c-.1 0-.2 0-.2-.1l-29-29c-.1-.1-.1-.4 0-.5s.4-.1.5 0l29 29c.1.1.1.4 0 .5-.2.1-.3.1-.3.1z"
-            fill="#231f20"
-          />
-        </g>
-      </g>
-    </switch>
+    <path d="M13.7575 19.3727C12.9518 19.7549 12.0634 19.9409 11.0924 19.9409C9.36736 19.9409 7.91086 19.3521 6.70227 18.1538C5.49368 16.9556 4.89455 15.4164 4.89455 13.5364C4.89455 12.3175 5.40071 10.923 6.41303 9.3425C7.43569 7.77237 8.99549 6.0163 11.0924 4.08463C11.8568 4.78706 12.5386 5.46882 13.1584 6.1196L13.6646 5.1486C13.0551 4.52881 12.4043 3.88836 11.6812 3.23759C11.5986 3.16528 11.5056 3.11363 11.4023 3.07231C11.299 3.03099 11.1957 3 11.0924 3C10.9891 3 10.8858 3.03099 10.7825 3.07231C10.6792 3.11363 10.5863 3.16528 10.4933 3.23759C8.2724 5.27256 6.61963 7.13192 5.51434 8.83634C4.40905 10.5408 3.86157 12.1109 3.86157 13.5364C3.86157 15.8296 4.58466 17.6477 6.04116 18.9802C7.49766 20.3128 9.18142 20.9739 11.0924 20.9739C12.0325 20.9739 12.9311 20.8189 13.7575 20.4884H13.7679V19.3624H13.7575V19.3727Z" fill="#616376"/>
+    <path d="M14.8008 13.3608V20.4987C14.8008 20.7569 14.9351 20.9119 15.1934 20.9635C15.4516 21.0152 15.6375 20.9429 15.7305 20.7466L20.3789 11.801C20.5132 11.5427 20.4925 11.2845 20.3273 11.0159C20.162 10.7577 19.9347 10.6234 19.6455 10.6234H16.7635V3.4855C16.7635 3.22725 16.6292 3.07231 16.371 3.02066C16.1127 2.96901 15.9268 3.04132 15.8338 3.23758L11.1751 12.1832C11.0408 12.4414 11.0614 12.6997 11.2267 12.9683C11.392 13.2265 11.6192 13.3608 11.9085 13.3608H14.7905H14.8008Z" fill="#616376"/>
   </svg>
 );
 

package/source/components/_common/IconSVG/SVG/searchWidgets/fuel/FuelPetrol.tsx

@@ -3,17 +3,14 @@ import * as React from 'react';
 
 const SvgFuelPetrol = (props: any) => (
   <svg
-    viewBox="0 0 22 32.4"
+    viewBox="0 0 25 24"
     width="1em"
     height="1em"
+    fill="none"
     {...props}
   >
-    <switch>
-      <g fill="#231f20">
-        <path d="M11 32.4c-6 0-11-5-11-11C0 15.7 10.3.8 10.7.1c.1-.2.4-.2.6 0C11.7.8 22 15.7 22 21.5c0 5.9-5 10.9-11 10.9zM11 1C9.3 3.5.7 16.4.7 21.5.7 27 5.4 31.7 11 31.7S21.3 27 21.3 21.4c0-5-8.6-17.9-10.3-20.4z" />
-        <path d="M7.9 27.4h-.2c-3-1.5-3.6-4.2-3.7-4.3 0-.2.1-.4.3-.4s.4.1.4.3c0 0 .6 2.5 3.3 3.9.2.1.2.3.2.5h-.3z" />
-      </g>
-    </switch>
+    <path d="M7.53289 19.3455L7.53263 19.3452C6.06547 17.9058 5.34033 16.1898 5.34033 14.1702C5.34033 12.5156 5.81782 11.1268 6.75923 9.97619C7.73729 8.78078 9.76429 6.37887 12.8435 2.76685C15.9762 6.38122 18.0132 8.78016 18.9615 9.97105C19.8755 11.1215 20.3403 12.5121 20.3403 14.1702C20.3403 16.19 19.6161 17.9061 18.1512 19.3455C16.6845 20.7843 14.9237 21.5 12.8403 21.5C10.7568 21.5 8.99725 20.7842 7.53289 19.3455Z" stroke="#616376"/>
+    <path d="M16.8077 15.0745C16.5769 16.0466 15.7 17.5142 13.8772 17.9629" stroke="#616376" stroke-linecap="round"/>
   </svg>
 );
 

package/source/components/_common/IconSVG/SVG/vehicle/CarAvailability.tsx

@@ -5,15 +5,16 @@ const SvgCarAvailability = (
   props: any
 ) => (
   <svg
-    viewBox="0 0 28 28"
+    viewBox="0 0 25 25"
     width="1em"
     height="1em"
+    fill="none"
     {...props}
   >
-    <g id="carAvailability_svg__surface1">
-      <path d="M3.922 11.95h.32c.309 1.257 1.403 2.09 2.7 2.09 1.296 0 2.39-.833 2.703-2.09h8.43c.312 1.257 1.405 2.09 2.702 2.09s2.387-.833 2.7-2.09h.601a2.172 2.172 0 0 0 2.195-2.172V8.144c0-.864-.503-1.645-1.285-2l-1.976-.899-1.739-2.773a2.75 2.75 0 0 0-2.34-1.29h-7.398c-.863 0-1.676.403-2.2 1.083L7.099 5.203 3.344 6.23a2.194 2.194 0 0 0-1.617 2.118v1.43c0 .581.23 1.136.644 1.542.41.407.969.633 1.55.63zm3.02 1.109c-.985 0-1.786-.801-1.786-1.786a1.786 1.786 0 0 1 3.57 0 1.79 1.79 0 0 1-1.785 1.786zm13.835 0a1.784 1.784 0 1 1 0 0zM2.734 8.348c0-.536.356-1.008.875-1.149l3.918-1.07a.523.523 0 0 0 .266-.18l2.344-3.07a1.77 1.77 0 0 1 1.398-.688h7.399a1.745 1.745 0 0 1 1.488.817l1.82 2.906c.051.082.13.149.219.188l2.11.96c.425.192.695.618.695 1.083v1.632a1.161 1.161 0 0 1-1.188 1.164h-.527a2.791 2.791 0 0 0-5.547 0h-8.29a2.791 2.791 0 0 0-5.546 0h-.246a1.161 1.161 0 0 1-1.188-1.164zm0 0" />
-      <path d="M1.586 26.465c.043.238.25.414.496.414.027 0 .059 0 .086-.008l4.113-.719a.499.499 0 0 0 .407-.582l-.079-.457.957-.781c.38-.312.86-.465 1.348-.43l6.703.489c.012.004.024.004.035.004a7.033 7.033 0 0 0 4.157-1.348c.02-.016.035-.031.054-.047l7.985-7.82a.498.498 0 0 0 .027-.688 2.631 2.631 0 0 0-3.621-.347l-3.668 2.742a3.336 3.336 0 0 0-3.148-1.168l-3.75.656a3.975 3.975 0 0 1-1.793-.094l-.418-.117A6.798 6.798 0 0 0 5.27 17.45l-.16-.902a.499.499 0 0 0-.583-.406l-4.109.718a.504.504 0 0 0-.41.582zm9.613-9.332l.418.117c.73.207 1.496.246 2.246.117l3.75-.656a2.334 2.334 0 0 1 2.551 1.406l-5.613.98a.51.51 0 0 0-.418.54.506.506 0 0 0 .59.453l6.164-1.078a.504.504 0 0 0 .41-.582 3.661 3.661 0 0 0-.192-.672l3.758-2.809.012-.008a1.635 1.635 0 0 1 1.883-.101l-7.574 7.426a6.018 6.018 0 0 1-3.493 1.14h-.015l-6.688-.5a2.87 2.87 0 0 0-2.058.653l-.52.418-.937-5.352a5.8 5.8 0 0 1 5.726-1.492zm-6.992.086l1.402 8.027-3.117.547-1.406-8.031zm0 0" />
-    </g>
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M13.968 5.39478H17.1545C17.8657 5.39478 18.1742 5.44652 18.3307 5.52134C18.4176 5.56292 18.4827 5.61745 18.5789 5.89233L19.4967 9.98336C19.7458 11.1237 20.1585 13.8172 19.8886 15.6058C19.8473 15.8789 20.0353 16.1336 20.3083 16.1749C20.5814 16.2161 20.8361 16.0281 20.8774 15.7551C21.1763 13.7745 20.7268 10.9283 20.4734 9.76852L20.4734 9.76851L20.4728 9.76581L19.5485 5.64615L19.5426 5.61983L19.5339 5.5943C19.4032 5.21073 19.2172 4.83681 18.762 4.61915C18.3737 4.43352 17.845 4.39478 17.1545 4.39478H13.968H12.507H9.37292C8.68237 4.39478 8.15365 4.43352 7.76538 4.61915C7.31015 4.83681 7.12418 5.21073 6.99345 5.5943L6.98475 5.61983L6.97884 5.64615L6.05462 9.76581L6.05142 9.78008L6.04906 9.79451L5.84111 11.0651C5.79651 11.3376 5.98127 11.5947 6.25379 11.6393C6.52631 11.6839 6.78338 11.4991 6.82798 11.2266L7.03357 9.97045L7.94847 5.89233C8.04472 5.61745 8.10975 5.56293 8.19673 5.52134C8.35321 5.44652 8.66173 5.39478 9.37292 5.39478H12.507H13.968Z" fill="#616376"/>
+    <path d="M20.0786 9.7749V9.7749C15.6262 11.0818 10.8796 11.0794 6.42651 9.7749V9.7749" stroke="#616376" stroke-linecap="round"/>
+    <circle cx="17.7078" cy="13.0418" r="0.98072" fill="#616376"/>
+    <path d="M6.40728 13.2671V19.2442C6.40728 19.7965 5.95956 20.2442 5.40728 20.2442H4.45679C3.9045 20.2442 3.45679 19.7965 3.45679 19.2442V14.3006C3.45679 13.755 3.89415 13.3101 4.43969 13.3008L6.40728 13.2671ZM6.40728 13.2671H9.2674C9.37733 13.2671 9.4865 13.2852 9.59052 13.3208L16.0445 15.5244C16.4493 15.6626 16.7214 16.043 16.7214 16.4707V17.4955M16.7214 17.4955H21.2804C21.8266 17.4955 22.2693 17.9383 22.2693 18.4844V18.4844C22.2693 18.9164 21.9889 19.2984 21.5767 19.4279L15.574 21.3132C15.3849 21.3726 15.1824 21.3744 14.9923 21.3186L6.53337 18.8321M16.7214 17.4955H14.0082C13.8847 17.4955 13.7622 17.4726 13.647 17.428L11.0221 16.4112" stroke="#616376" stroke-linecap="square"/>
   </svg>
 );
 

package/source/components/_common/IconSVG/SVG/vehicle/Date.tsx

@@ -3,22 +3,20 @@ import * as React from 'react';
 
 const SvgDate = (props: any) => (
   <svg
-    viewBox="0 0 30.7 29.8"
+    viewBox="0 0 25 25"
     width="1em"
     height="1em"
+    fill="none"
     {...props}
   >
-    <switch>
-      <g>
-        <g fill="#231f20">
-          <path d="M25.6 29.8H5.1c-2.8 0-5.1-2.3-5.1-5.1V9.1C0 6.3 2.3 4 5.1 4h20.6c2.8 0 5.1 2.3 5.1 5.1v15.6c-.1 2.8-2.4 5.1-5.2 5.1zM5.1 4.7C2.7 4.7.7 6.7.7 9.1v15.6c0 2.4 2 4.4 4.4 4.4h20.6c2.4 0 4.4-2 4.4-4.4V9.1c0-2.4-2-4.4-4.4-4.4z" />
-          <path d="M30.3 11.8H.3c-.2 0-.3-.2-.3-.3s.2-.3.3-.3h30c.2 0 .3.2.3.3s-.1.3-.3.3zM7.3 7.6c-.2 0-.3-.2-.3-.3v-7c-.1-.1.1-.3.3-.3s.3.2.3.3v6.9c0 .3-.1.4-.3.4zM23.5 7.6c-.2 0-.3-.2-.3-.3v-7c0-.2.2-.3.3-.3s.3.2.3.3v6.9c.1.3-.1.4-.3.4z" />
-        </g>
-        <path d="M14.3 24.1c0 .6-.5 1.1-1.1 1.1H9.9c-.6 0-1.1-.5-1.1-1.1v-7.8c0-.6.5-1.1 1.1-1.1h3.3c.6 0 1.1.5 1.1 1.1s-.5 1.1-1.1 1.1h-2.3v1.9H13c.5 0 .9.4.9.9s-.4.9-.9.9h-2.1V23h2.3c.6 0 1.1.5 1.1 1.1zM22.7 24.1c0 .6-.5 1.1-1.1 1.1h-5.4c-.2 0-.4-.1-.6-.2-.5-.3-.6-1-.3-1.5l4.4-6.2h-3.6c-.6 0-1-.5-1-1 0-.6.5-1 1-1h5.5c.2 0 .5 0 .7.2.5.4.6 1 .3 1.5l-4.4 6h3.4c.6 0 1.1.5 1.1 1.1z" />
-      </g>
-    </switch>
+    <rect x="4.63599" y="5.68835" width="16.5062" height="16.5062" rx="1.5" stroke="#616376"/>
+    <path d="M4.77173 11.0561H21.0554M17.2901 3.65015V5.55519M8.58591 3.65015V5.55519" stroke="#616376" stroke-linecap="round"/>
+    <path d="M12.0153 18.5595V19.074H9.48858V18.5595H12.0153ZM9.61639 14.3024V19.074H8.98389V14.3024H9.61639ZM11.681 16.3539V16.8684H9.48858V16.3539H11.681ZM11.9825 14.3024V14.8202H9.48858V14.3024H11.9825Z" fill="#616376"/>
+    <path d="M16.9401 18.5595V19.074H13.7087V18.5595H16.9401ZM16.8352 14.7612L13.8595 19.074H13.4695V18.6021L16.4419 14.3024H16.8352V14.7612ZM16.5665 14.3024V14.8202H13.5121V14.3024H16.5665Z" fill="#616376"/>
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M12.1114 18.4637V19.1699H8.88818V14.2065H12.0786V14.9161H9.71245V16.2581H11.7771V16.9644H9.71245V18.4637H12.1114ZM9.61657 18.5595H12.0155V19.0741H8.98407V14.3024H11.9827V14.8202H9.61657V16.354H11.6812V16.8685H9.61657V18.5595ZM17.0361 18.4637V19.1699H13.3738V18.5722L15.9013 14.9161H13.4164V14.2065H16.9312V14.7911L14.3973 18.4637H17.0361ZM14.2147 18.5595H16.9402V19.0741H13.4697V18.6021L16.0841 14.8202H13.5123V14.3024H16.8354V14.7612L14.2147 18.5595Z" fill="#616376"/>
   </svg>
 );
 
 export default SvgDate;
 /* tslint:enable */
+

package/source/components/_common/IconSVG/SVG/vehicle/FuelConsumption.tsx

@@ -5,18 +5,14 @@ const SvgFuelConsumption = (
   props: any
 ) => (
   <svg
-    viewBox="0 0 28.3 29.5"
+    viewBox="0 0 25 25"
     width="1em"
     height="1em"
+    fill="none"
     {...props}
   >
-    <switch>
-      <g fill="#231f20">
-        <path d="M24.7 25.5c-.2 0-.3-.2-.3-.3V2.4c0-.9-.8-1.7-1.7-1.7H10.6c-.9 0-1.7.8-1.7 1.7v22.7c0 .2-.2.3-.3.3s-.3-.2-.3-.3V2.4C8.2 1.1 9.2 0 10.6 0h12.1C24 0 25 1.1 25 2.4v22.7c0 .2-.1.4-.3.4z" />
-        <path d="M28 29.5H5.6c-.2 0-.3-.2-.3-.3v-4c0-.2.2-.3.3-.3H28c.2 0 .3.2.3.3v4c0 .1-.1.3-.3.3zm-22-.7h21.6v-3.3H6zM22.2 7.7H11.3c-.2 0-.3-.2-.3-.3v-4c0-.2.2-.3.3-.3h10.9c.2 0 .3.2.3.3v4c0 .2-.2.3-.3.3zM11.6 7h10.2V3.7H11.6zM3.5 22.1H1.8c-1 0-1.8-.8-1.8-1.8V6.5C0 5.9.2 5.4.6 5l3.7-3.9c.1-.1.4-.1.5 0s.1.4 0 .5L1.1 5.5c-.3.3-.4.6-.4 1v13.9c0 .6.5 1.1 1.1 1.1h1.7c.6 0 1.1-.5 1.1-1.1v-6.7c0-.9.7-1.5 1.5-1.5h1.8c.2 0 .3.2.3.3s-.2.3-.3.3H6.1c-.5 0-.8.4-.8.8v6.7c0 1-.8 1.8-1.8 1.8z" />
-        <path d="M2.9 9.5C1.4 9.5.3 8.3.3 6.9s1.2-2.6 2.6-2.6 2.6 1.2 2.6 2.6-1.2 2.6-2.6 2.6zm0-4.6c-1.1 0-1.9.9-1.9 2s.9 1.9 1.9 1.9S4.8 8 4.8 6.9s-.8-2-1.9-2z" />
-      </g>
-    </switch>
+    <path d="M6.14357 12.2522H6.64357L6.64357 12.2505L6.14357 12.2522ZM6.82501 11.4113V10.9113H6.81593L6.80686 10.9116L6.82501 11.4113ZM8.0286 19.4836C8.0286 19.7597 8.25246 19.9836 8.5286 19.9836C8.80475 19.9836 9.0286 19.7597 9.0286 19.4836H8.0286ZM6.14357 16.2883L6.64357 16.2883L6.14357 16.2883ZM3.0771 16.2879L2.57711 16.2913L3.0771 16.2879ZM3.07712 16.2898L2.57716 16.2966L3.07712 16.2898ZM2.5673 8.5535C2.5573 13.3264 2.57684 16.2506 2.57711 16.2913L3.57709 16.2845C3.57683 16.2462 3.55731 13.325 3.56729 8.55559L2.5673 8.5535ZM2.57716 16.2966C2.57803 16.36 2.59142 16.7696 2.86712 17.1759C3.16617 17.6165 3.71335 17.9655 4.61034 17.9655V16.9655C4.00568 16.9655 3.78657 16.7499 3.69458 16.6143C3.57924 16.4444 3.57684 16.2661 3.57707 16.2829L2.57716 16.2966ZM4.61034 17.9655C5.52768 17.9655 6.07739 17.6005 6.3709 17.1498C6.64023 16.7362 6.64357 16.3266 6.64357 16.2883L5.64357 16.2883C5.64357 16.25 5.64691 16.429 5.53293 16.6041C5.44313 16.7419 5.22622 16.9655 4.61034 16.9655V17.9655ZM6.64357 16.2883V12.2522H5.64357V16.2883H6.64357ZM6.64357 12.2505C6.6431 12.1057 6.65212 12.0133 6.66446 11.9549C6.6763 11.8989 6.68625 11.8982 6.67221 11.9153C6.65432 11.937 6.6375 11.9401 6.65374 11.9347C6.67843 11.9266 6.73362 11.915 6.84316 11.911L6.80686 10.9116C6.51812 10.9221 6.15102 10.9755 5.90069 11.2791C5.67227 11.5561 5.64252 11.928 5.64357 12.2538L6.64357 12.2505ZM6.82501 11.9113H8.5286V10.9113H6.82501V11.9113ZM8.0286 11.4113V19.4836H9.0286V11.4113H8.0286ZM9.18537 4.17537H13.6394V3.17537H9.18537V4.17537ZM18.7502 19.9836H20.4784V18.9836H18.7502V19.9836ZM20.6352 20.1403V21.5176H21.6352V20.1403H20.6352ZM20.4784 21.6743H7.14106V22.6743H20.4784V21.6743ZM6.98429 21.5176V20.1403H5.98429V21.5176H6.98429ZM7.14106 19.9836H18.7502V18.9836H7.14106V19.9836ZM13.6394 4.17537H18.0934V3.17537H13.6394V4.17537ZM18.2502 4.33214V19.4836H19.2502V4.33214H18.2502ZM8.0286 4.33214V11.4113H9.0286V4.33214H8.0286ZM10.0069 6.6732V7.71408H11.0069V6.6732H10.0069ZM11.1637 8.87085H15.831V7.87085H11.1637V8.87085ZM16.9878 7.71408V6.6732H15.9878V7.71408H16.9878ZM15.831 5.51643H11.1637V6.51643H15.831V5.51643ZM16.9878 6.6732C16.9878 6.03433 16.4699 5.51643 15.831 5.51643V6.51643C15.9176 6.51643 15.9878 6.58662 15.9878 6.6732H16.9878ZM15.831 8.87085C16.4699 8.87085 16.9878 8.35295 16.9878 7.71408H15.9878C15.9878 7.80066 15.9176 7.87085 15.831 7.87085V8.87085ZM10.0069 7.71408C10.0069 8.35295 10.5248 8.87085 11.1637 8.87085V7.87085C11.0771 7.87085 11.0069 7.80066 11.0069 7.71408H10.0069ZM11.0069 6.6732C11.0069 6.58662 11.0771 6.51643 11.1637 6.51643V5.51643C10.5248 5.51643 10.0069 6.03434 10.0069 6.6732H11.0069ZM18.0934 4.17537C18.18 4.17537 18.2502 4.24556 18.2502 4.33214H19.2502C19.2502 3.69327 18.7323 3.17537 18.0934 3.17537V4.17537ZM7.14106 21.6743C7.05448 21.6743 6.98429 21.6042 6.98429 21.5176H5.98429C5.98429 22.1564 6.50219 22.6743 7.14106 22.6743V21.6743ZM9.18537 3.17537C8.5465 3.17537 8.0286 3.69327 8.0286 4.33214H9.0286C9.0286 4.24556 9.09879 4.17537 9.18537 4.17537V3.17537ZM6.98429 20.1403C6.98429 20.0538 7.05448 19.9836 7.14106 19.9836V18.9836C6.50219 18.9836 5.98429 19.5015 5.98429 20.1403H6.98429ZM6.64357 16.2883V16.2883H5.64357V16.2883L6.64357 16.2883ZM3.56729 8.55559C3.57103 6.77234 4.36913 5.08204 5.742 3.94247L5.1033 3.17301C3.50285 4.50149 2.57165 6.47257 2.5673 8.5535L3.56729 8.55559ZM20.4784 19.9836C20.565 19.9836 20.6352 20.0538 20.6352 20.1403H21.6352C21.6352 19.5015 21.1173 18.9836 20.4784 18.9836V19.9836ZM20.6352 21.5176C20.6352 21.6042 20.565 21.6743 20.4784 21.6743V22.6743C21.1173 22.6743 21.6352 22.1564 21.6352 21.5176H20.6352ZM2.57711 16.2913C2.57711 16.2913 2.57711 16.2912 2.57711 16.291C2.57711 16.2908 2.57711 16.2905 2.57711 16.2901C2.57711 16.2897 2.57711 16.2893 2.57711 16.289C2.57711 16.2882 2.57711 16.2894 2.57711 16.2901C2.57711 16.2929 2.57715 16.2952 2.57715 16.2955C2.57715 16.2959 2.57716 16.2965 2.57716 16.2966L3.57707 16.2829C3.57706 16.2823 3.57706 16.2825 3.57707 16.2826C3.57707 16.2827 3.5771 16.2849 3.5771 16.2876C3.57711 16.2883 3.57711 16.2894 3.57711 16.2885C3.57711 16.2881 3.5771 16.2877 3.5771 16.2871C3.5771 16.2861 3.57709 16.2852 3.57709 16.2845L2.57711 16.2913Z" fill="#616376"/>
+    <circle cx="4.80321" cy="7.67772" r="1.63377" stroke="#616376" stroke-linecap="round"/>
   </svg>
 );
 

package/source/components/_common/IconSVG/SVG/vehicle/Owner.tsx

@@ -3,19 +3,17 @@ import * as React from 'react';
 
 const SvgOwner = (props: any) => (
   <svg
-    viewBox="0 0 25.2 23.3"
+    viewBox="0 0 25 25"
     width="1em"
     height="1em"
+    fill="none"
     {...props}
   >
-    <switch>
-      <g fill="#231f20">
-        <path d="M12.5 15C8.3 15 5 11.7 5 7.5 5 3.4 8.3 0 12.5 0 16.6 0 20 3.4 20 7.5c0 4.2-3.4 7.5-7.5 7.5zm0-14.3C8.7.7 5.7 3.8 5.7 7.5c0 3.8 3.1 6.8 6.8 6.8 3.8 0 6.8-3.1 6.8-6.8S16.2.7 12.5.7z" />
-        <path d="M.3 23.3H.2c-.2-.1-.2-.3-.2-.5 2-5.1 6.9-8.4 12.5-8.4 6.1 0 10.9 3.2 12.7 8.5.1.2 0 .4-.2.4-.2.1-.4 0-.4-.2-1.7-4.9-6.3-8-12-8-5.2 0-9.9 3.1-11.8 8-.2.1-.3.2-.5.2z" />
-      </g>
-    </switch>
+    <path d="M21.3037 19.6633V21.0284H3.07861V19.6633C3.07861 19.2472 3.20436 18.8495 3.47431 18.4606L3.47497 18.4596C3.74387 18.0702 4.10986 17.7606 4.58676 17.5323C5.87289 16.9244 7.14928 16.4704 8.4162 16.1683L8.41628 16.1683C9.68239 15.8662 10.9404 15.7157 12.1912 15.7157C13.4419 15.7157 14.7004 15.8662 15.9675 16.1683C17.2335 16.4704 18.5094 16.9244 19.7955 17.5323C20.2725 17.7606 20.6391 18.0703 20.909 18.46C21.1782 18.849 21.3037 19.2468 21.3037 19.6633Z" stroke="#616376"/>
+    <path d="M15.5852 9.27955C15.5852 11.154 14.0657 12.6736 12.1912 12.6736C10.3167 12.6736 8.79712 11.154 8.79712 9.27955C8.79712 7.40507 10.3167 5.8855 12.1912 5.8855C14.0657 5.8855 15.5852 7.40507 15.5852 9.27955Z" stroke="#616376"/>
   </svg>
 );
 
 export default SvgOwner;
 /* tslint:enable */
+

package/source/components/_common/IconSVG/SVG/vehicle/Ps.tsx

@@ -3,15 +3,15 @@ import * as React from 'react';
 
 const SvgPs = (props: any) => (
   <svg
-    viewBox="0 0 29.5 29.5"
+    viewBox="0 0 25 25"
     width="1em"
     height="1em"
+    fill="none"
     {...props}
   >
-    <path d="M26.6 15.1h-5c-.2 0-.3-.2-.3-.3 0-1.1-.3-2.2-.8-3.2-.1-.1-.1-.3.1-.4L24 7.5c.1-.1.2-.1.3-.1.1 0 .2.1.3.1 1.5 2.1 2.3 4.6 2.3 7.2 0 .2-.1.4-.3.4zm-4.7-.7h4.3c-.1-2.2-.7-4.3-2-6.1L21 11.5c.6.9.8 1.9.9 2.9z" />
-    <path d="M14.7 29.5C6.6 29.5 0 22.9 0 14.7S6.6 0 14.7 0s14.7 6.6 14.7 14.7-6.5 14.8-14.7 14.8zm0-28.8C7 .7.7 7 .7 14.7s6.3 14 14 14 14-6.3 14-14-6.2-14-14-14z" />
-    <path d="M7.9 15.1h-5c-.2 0-.3-.2-.3-.3 0-2.7.9-5.3 2.5-7.4.1-.1.2-.1.3-.1.1 0 .2 0 .3.1L9.3 11c.1.1.1.3 0 .4-.6 1-1 2.2-1 3.4 0 .1-.2.3-.4.3zm-4.6-.7h4.3c.1-1.1.4-2.2.9-3.2L5.4 8.1c-1.3 1.8-2.1 4-2.1 6.3zm15-5.1c-.1 0-.1 0-.2-.1-.6-.3-1.2-.6-1.8-.8-.2 0-.3-.2-.3-.4s.2-.3.4-.3c.6.2 1.2.4 1.8.7l3.1-3.1c-1.9-1.4-4.2-2.1-6.6-2.1-2.3 0-4.5.7-6.4 1.9l3.2 3.2c.6-.3 1.1-.5 1.8-.6.2 0 .4.1.4.3s-.1.4-.3.4c-.6.1-1.2.4-1.8.7-.1.1-.3.1-.4-.1L7.6 5.4c-.1-.1-.1-.2-.1-.3 0-.1.1-.2.1-.3 2.1-1.5 4.6-2.3 7.1-2.3 2.7 0 5.2.9 7.4 2.5.1.1.1.2.1.3s0 .2-.1.3l-3.6 3.6c-.1 0-.1.1-.2.1zm-3.5 8.1c-.9 0-1.6-.7-1.6-1.6s.7-1.6 1.6-1.6 1.6.7 1.6 1.6-.7 1.6-1.6 1.6zm0-2.4c-.5 0-.9.4-.9.9s.4.9.9.9.9-.4.9-.9-.4-.9-.9-.9z" />
-    <path d="M14.8 15c-.2 0-.3-.2-.3-.3V6.3c0-.2.2-.3.3-.3s.3.2.3.3v8.4c0 .2-.1.3-.3.3zm3 10.2c-.7.8-1.8.8-2.6.3-.3-.2-.3-.5-.2-.8.1-.1.3-.2.4-.3.2 0 .4.1.6.2.3.1.6.1.8-.2.2-.3.2-.7-.2-.8-.3-.2-.8-.2-1.2-.6-.3-.3-.5-.7-.5-1.1 0-.6.3-1.1.8-1.4.5-.3 1.2-.3 1.8 0 .3.2.4.6.2.8-.2.3-.5.3-.9.2-.5-.2-.9.2-.8.5.1.3.7.4 1 .5.5.3.9.8.9 1.4.3.5.2 1-.1 1.3zM14.7 22c0 .9-.8 1.7-1.7 1.7h-.6v1.5c0 .3-.3.6-.6.6s-.6-.3-.6-.6v-4.3c0-.3.3-.6.6-.6H13c1 0 1.7.8 1.7 1.7zm-1.2 0c0-.3-.2-.5-.5-.5h-.6v1h.6c.3 0 .5-.2.5-.5z" />
+    <path d="M21.6453 11.1141C21.6453 11.1141 21.6467 13.302 21.6467 14.7929M21.6421 18.6516C21.6421 18.6516 21.6467 16.256 21.6467 14.7929M2.69604 18.4987V14.7975M2.69604 11.0962V14.7975M9.39218 5.46521H13.0438M16.6953 5.46521H13.0438M2.69604 14.7975H4.78422M13.0438 5.46521V8.91799M21.6467 14.7929C20.8205 14.7929 19.3361 14.7975 19.3361 14.7975M4.85065 16.0643V17.2802C4.85065 17.3113 4.86513 17.3406 4.88982 17.3595L8.97506 20.4911C8.99252 20.5045 9.0139 20.5117 9.0359 20.5117L17.2534 20.5108C17.2878 20.5108 17.3198 20.4931 17.3381 20.4639L19.2535 17.4053C19.2634 17.3894 19.2687 17.3711 19.2687 17.3523L19.2771 12.2443C19.2771 12.2258 19.272 12.2077 19.2623 12.1919L17.3374 9.05544C17.3192 9.02581 17.2869 9.00775 17.2521 9.00775H13.6814L11.4954 9.0096H9.04608C9.02356 9.0096 9.0017 9.0172 8.98404 9.03117L4.87604 12.2803C4.85207 12.2993 4.83808 12.3282 4.83808 12.3587V13.9281L4.85065 16.0643Z" stroke="#616376" stroke-linecap="round"/>
+    <path d="M11.115 14.7688H10.0513V14.3395H11.115C11.3209 14.3395 11.4877 14.3067 11.6153 14.2411C11.7429 14.1755 11.8359 14.0843 11.8942 13.9677C11.9544 13.851 11.9844 13.718 11.9844 13.5685C11.9844 13.4318 11.9544 13.3033 11.8942 13.183C11.8359 13.0626 11.7429 12.966 11.6153 12.8931C11.4877 12.8184 11.3209 12.781 11.115 12.781H10.1744V16.3301H9.64666V12.349H11.115C11.4157 12.349 11.67 12.401 11.8778 12.5049C12.0856 12.6088 12.2433 12.7528 12.3508 12.9369C12.4584 13.1192 12.5122 13.3279 12.5122 13.563C12.5122 13.8182 12.4584 14.036 12.3508 14.2165C12.2433 14.397 12.0856 14.5346 11.8778 14.6294C11.67 14.7223 11.4157 14.7688 11.115 14.7688ZM15.5251 15.3239C15.5251 15.2309 15.5105 15.1489 15.4813 15.0778C15.454 15.0049 15.4048 14.9393 15.3337 14.8809C15.2644 14.8226 15.1678 14.767 15.0439 14.7141C14.9217 14.6613 14.7668 14.6075 14.579 14.5528C14.3822 14.4945 14.2044 14.4298 14.0459 14.3587C13.8873 14.2858 13.7515 14.2028 13.6385 14.1099C13.5254 14.0169 13.4389 13.9103 13.3787 13.79C13.3185 13.6696 13.2885 13.532 13.2885 13.3771C13.2885 13.2221 13.3204 13.079 13.3842 12.9478C13.448 12.8166 13.5391 12.7026 13.6576 12.606C13.7779 12.5076 13.921 12.431 14.0869 12.3763C14.2527 12.3217 14.4378 12.2943 14.6419 12.2943C14.9409 12.2943 15.1942 12.3517 15.402 12.4666C15.6117 12.5796 15.7712 12.7282 15.8805 12.9123C15.9899 13.0945 16.0446 13.2896 16.0446 13.4974H15.5196C15.5196 13.3479 15.4877 13.2158 15.4239 13.1009C15.3601 12.9843 15.2635 12.8931 15.1341 12.8275C15.0047 12.7601 14.8406 12.7263 14.6419 12.7263C14.4542 12.7263 14.2992 12.7546 14.1771 12.8111C14.055 12.8676 13.9638 12.9442 13.9037 13.0408C13.8453 13.1374 13.8162 13.2477 13.8162 13.3716C13.8162 13.4555 13.8335 13.532 13.8681 13.6013C13.9046 13.6687 13.9602 13.7316 14.0349 13.79C14.1115 13.8483 14.2081 13.9021 14.3248 13.9513C14.4432 14.0005 14.5845 14.0479 14.7486 14.0935C14.9746 14.1573 15.1696 14.2283 15.3337 14.3067C15.4977 14.3851 15.6326 14.4735 15.7384 14.572C15.8459 14.6686 15.9252 14.7788 15.9762 14.9028C16.0291 15.0249 16.0555 15.1635 16.0555 15.3184C16.0555 15.4806 16.0227 15.6274 15.9571 15.7586C15.8915 15.8899 15.7976 16.002 15.6755 16.0949C15.5533 16.1879 15.4066 16.2599 15.2353 16.3109C15.0657 16.3602 14.8762 16.3848 14.6665 16.3848C14.4824 16.3848 14.3011 16.3592 14.1224 16.3082C13.9456 16.2572 13.7843 16.1806 13.6385 16.0785C13.4944 15.9764 13.3787 15.8507 13.2912 15.7012C13.2055 15.5499 13.1627 15.3749 13.1627 15.1762H13.6877C13.6877 15.3129 13.7141 15.4305 13.767 15.5289C13.8198 15.6256 13.8918 15.7058 13.983 15.7696C14.0759 15.8334 14.1807 15.8807 14.2974 15.9117C14.4159 15.9409 14.5389 15.9555 14.6665 15.9555C14.8506 15.9555 15.0065 15.93 15.1341 15.8789C15.2617 15.8279 15.3583 15.755 15.4239 15.6602C15.4914 15.5654 15.5251 15.4533 15.5251 15.3239Z" fill="#616376"/>
+    <path d="M10.0513 14.7688H9.95133C9.95133 14.824 9.9961 14.8688 10.0513 14.8688V14.7688ZM10.0513 14.3395V14.2395C9.9961 14.2395 9.95133 14.2843 9.95133 14.3395H10.0513ZM11.8942 13.9677L11.8053 13.9218L11.8048 13.923L11.8942 13.9677ZM11.8942 13.183L11.8042 13.2266L11.8048 13.2277L11.8942 13.183ZM11.6153 12.8931L11.5648 12.9794L11.5657 12.9799L11.6153 12.8931ZM10.1744 12.781V12.681C10.1191 12.681 10.0744 12.7258 10.0744 12.781H10.1744ZM10.1744 16.3301V16.4301C10.2296 16.4301 10.2744 16.3853 10.2744 16.3301H10.1744ZM9.64666 16.3301H9.54666C9.54666 16.3853 9.59143 16.4301 9.64666 16.4301V16.3301ZM9.64666 12.349V12.249C9.59143 12.249 9.54666 12.2938 9.54666 12.349H9.64666ZM12.3508 12.9369L12.2645 12.9873L12.2647 12.9877L12.3508 12.9369ZM11.8778 14.6294L11.9186 14.7207L11.9193 14.7204L11.8778 14.6294ZM11.115 14.6688H10.0513V14.8688H11.115V14.6688ZM10.1513 14.7688V14.3395H9.95133V14.7688H10.1513ZM10.0513 14.4395H11.115V14.2395H10.0513V14.4395ZM11.115 14.4395C11.3304 14.4395 11.5145 14.4054 11.6611 14.33L11.5696 14.1522C11.4609 14.2081 11.3115 14.2395 11.115 14.2395V14.4395ZM11.6611 14.33C11.8056 14.2557 11.9149 14.15 11.9837 14.0124L11.8048 13.923C11.7569 14.0187 11.6803 14.0953 11.5696 14.1522L11.6611 14.33ZM11.9831 14.0135C12.0515 13.8808 12.0844 13.7317 12.0844 13.5685H11.8844C11.8844 13.7042 11.8572 13.8212 11.8053 13.9219L11.9831 14.0135ZM12.0844 13.5685C12.0844 13.4165 12.0509 13.2727 11.9837 13.1382L11.8048 13.2277C11.8579 13.3339 11.8844 13.447 11.8844 13.5685H12.0844ZM11.9842 13.1393C11.9162 12.9991 11.8082 12.8882 11.6649 12.8063L11.5657 12.9799C11.6776 13.0439 11.7556 13.1262 11.8042 13.2266L11.9842 13.1393ZM11.6659 12.8068C11.5181 12.7203 11.332 12.681 11.115 12.681V12.881C11.3098 12.881 11.4574 12.9165 11.5648 12.9794L11.6659 12.8068ZM11.115 12.681H10.1744V12.881H11.115V12.681ZM10.0744 12.781V16.3301H10.2744V12.781H10.0744ZM10.1744 16.2301H9.64666V16.4301H10.1744V16.2301ZM9.74666 16.3301V12.349H9.54666V16.3301H9.74666ZM9.64666 12.449H11.115V12.249H9.64666V12.449ZM11.115 12.449C11.4046 12.449 11.6426 12.4991 11.8331 12.5943L11.9225 12.4154C11.6974 12.3028 11.4268 12.249 11.115 12.249V12.449ZM11.8331 12.5943C12.0251 12.6903 12.1676 12.8215 12.2645 12.9873L12.4372 12.8864C12.319 12.6841 12.1461 12.5272 11.9225 12.4154L11.8331 12.5943ZM12.2647 12.9877C12.3622 13.1529 12.4122 13.3437 12.4122 13.563H12.6122C12.6122 13.312 12.5546 13.0854 12.437 12.8861L12.2647 12.9877ZM12.4122 13.563C12.4122 13.8041 12.3615 14.0033 12.2649 14.1653L12.4367 14.2677C12.5553 14.0687 12.6122 13.8324 12.6122 13.563H12.4122ZM12.2649 14.1653C12.1687 14.3268 12.0273 14.4513 11.8363 14.5384L11.9193 14.7204C12.1439 14.6179 12.3179 14.4672 12.4367 14.2677L12.2649 14.1653ZM11.837 14.5381C11.6454 14.6238 11.406 14.6688 11.115 14.6688V14.8688C11.4255 14.8688 11.6946 14.8209 11.9186 14.7207L11.837 14.5381ZM15.4813 15.0778L15.3877 15.1129L15.3888 15.1157L15.4813 15.0778ZM15.3337 14.8809L15.2693 14.9574L15.2703 14.9582L15.3337 14.8809ZM15.0439 14.7141L15.0041 14.8059L15.0046 14.8061L15.0439 14.7141ZM14.579 14.5528L14.5506 14.6487L14.5511 14.6488L14.579 14.5528ZM14.0459 14.3587L14.0041 14.4495L14.005 14.4499L14.0459 14.3587ZM13.6576 12.606L13.7208 12.6835L13.7209 12.6834L13.6576 12.606ZM15.402 12.4666L15.3537 12.5541L15.3546 12.5546L15.402 12.4666ZM15.8805 12.9123L15.7946 12.9633L15.7948 12.9637L15.8805 12.9123ZM16.0446 13.4974V13.5974C16.0998 13.5974 16.1446 13.5526 16.1446 13.4974H16.0446ZM15.5196 13.4974H15.4196C15.4196 13.5526 15.4644 13.5974 15.5196 13.5974V13.4974ZM15.4239 13.1009L15.3362 13.1489L15.3365 13.1495L15.4239 13.1009ZM15.1341 12.8275L15.0879 12.9162L15.0889 12.9167L15.1341 12.8275ZM13.9037 13.0408L13.8188 12.9879L13.8181 12.9891L13.9037 13.0408ZM13.8681 13.6013L13.7786 13.646L13.7802 13.6488L13.8681 13.6013ZM14.0349 13.79L13.9734 13.8688L13.9743 13.8695L14.0349 13.79ZM14.3248 13.9513L14.2859 14.0434L14.2864 14.0436L14.3248 13.9513ZM14.7486 14.0935L14.7757 13.9972L14.7753 13.9971L14.7486 14.0935ZM15.7384 14.572L15.6702 14.6452L15.6715 14.6463L15.7384 14.572ZM15.9762 14.9028L15.8838 14.9409L15.8845 14.9425L15.9762 14.9028ZM15.6755 16.0949L15.6149 16.0154L15.6755 16.0949ZM15.2353 16.3109L15.2631 16.407L15.2638 16.4068L15.2353 16.3109ZM14.1224 16.3082L14.0947 16.4043L14.0949 16.4044L14.1224 16.3082ZM13.6385 16.0785L13.5806 16.1601L13.5811 16.1604L13.6385 16.0785ZM13.2912 15.7012L13.2042 15.7505L13.2049 15.7517L13.2912 15.7012ZM13.1627 15.1762V15.0762C13.1075 15.0762 13.0627 15.121 13.0627 15.1762H13.1627ZM13.6877 15.1762H13.7877C13.7877 15.121 13.7429 15.0762 13.6877 15.0762V15.1762ZM13.767 15.5289L13.6789 15.5763L13.6792 15.5769L13.767 15.5289ZM13.983 15.7696L13.9256 15.8515L13.9264 15.852L13.983 15.7696ZM14.2974 15.9117L14.2717 16.0084L14.2735 16.0088L14.2974 15.9117ZM15.4239 15.6602L15.3424 15.6022L15.3417 15.6033L15.4239 15.6602ZM15.6251 15.3239C15.6251 15.2206 15.6089 15.1252 15.5739 15.0398L15.3888 15.1157C15.4121 15.1725 15.4251 15.2413 15.4251 15.3239H15.6251ZM15.575 15.0427C15.5404 14.9505 15.4793 14.8711 15.3971 14.8036L15.2703 14.9582C15.3302 15.0074 15.3676 15.0592 15.3877 15.1129L15.575 15.0427ZM15.3981 14.8044C15.3185 14.7374 15.2122 14.6772 15.0831 14.6221L15.0046 14.8061C15.1235 14.8568 15.2103 14.9078 15.2693 14.9574L15.3981 14.8044ZM15.0836 14.6224C14.9563 14.5673 14.7971 14.5122 14.607 14.4568L14.5511 14.6488C14.7365 14.7028 14.8872 14.7553 15.0041 14.8059L15.0836 14.6224ZM14.6074 14.4569C14.4141 14.3996 14.2406 14.3364 14.0868 14.2674L14.005 14.4499C14.1682 14.5231 14.3502 14.5893 14.5506 14.6487L14.6074 14.4569ZM14.0876 14.2678C13.9354 14.1978 13.8072 14.1192 13.702 14.0326L13.5749 14.1871C13.6957 14.2864 13.8391 14.3737 14.0041 14.4495L14.0876 14.2678ZM13.702 14.0326C13.5988 13.9478 13.5215 13.8519 13.4681 13.7452L13.2893 13.8347C13.3562 13.9686 13.4521 14.086 13.5749 14.1871L13.702 14.0326ZM13.4681 13.7452C13.4159 13.6408 13.3885 13.5189 13.3885 13.3771H13.1885C13.1885 13.5452 13.2212 13.6985 13.2893 13.8347L13.4681 13.7452ZM13.3885 13.3771C13.3885 13.2363 13.4173 13.1083 13.4741 12.9915L13.2942 12.9041C13.2234 13.0498 13.1885 13.208 13.1885 13.3771H13.3885ZM13.4741 12.9915C13.5312 12.874 13.613 12.7714 13.7208 12.6835L13.5944 12.5285C13.4652 12.6339 13.3647 12.7591 13.2942 12.9041L13.4741 12.9915ZM13.7209 12.6834C13.8306 12.5937 13.9625 12.5226 14.1182 12.4713L14.0556 12.2814C13.8795 12.3394 13.7252 12.4215 13.5943 12.5286L13.7209 12.6834ZM14.1182 12.4713C14.2724 12.4205 14.4466 12.3943 14.6419 12.3943V12.1943C14.4289 12.1943 14.2331 12.2229 14.0556 12.2814L14.1182 12.4713ZM14.6419 12.3943C14.9283 12.3943 15.164 12.4493 15.3537 12.5541L15.4504 12.3791C15.2244 12.2542 14.9535 12.1943 14.6419 12.1943V12.3943ZM15.3546 12.5546C15.5501 12.66 15.6955 12.7965 15.7946 12.9633L15.9665 12.8612C15.8469 12.6598 15.6732 12.4992 15.4495 12.3786L15.3546 12.5546ZM15.7948 12.9637C15.8951 13.1308 15.9446 13.3081 15.9446 13.4974H16.1446C16.1446 13.271 16.0848 13.0583 15.9663 12.8608L15.7948 12.9637ZM16.0446 13.3974H15.5196V13.5974H16.0446V13.3974ZM15.6196 13.4974C15.6196 13.3333 15.5845 13.184 15.5113 13.0524L15.3365 13.1495C15.391 13.2475 15.4196 13.3625 15.4196 13.4974H15.6196ZM15.5117 13.0529C15.4373 12.9169 15.325 12.8122 15.1793 12.7383L15.0889 12.9167C15.202 12.9741 15.283 13.0516 15.3362 13.1489L15.5117 13.0529ZM15.1803 12.7388C15.0324 12.6617 14.8512 12.6263 14.6419 12.6263V12.8263C14.8301 12.8263 14.9769 12.8584 15.0879 12.9162L15.1803 12.7388ZM14.6419 12.6263C14.445 12.6263 14.2745 12.6558 14.1351 12.7203L14.2191 12.9018C14.3239 12.8533 14.4633 12.8263 14.6419 12.8263V12.6263ZM14.1351 12.7203C13.9986 12.7835 13.891 12.8719 13.8188 12.9879L13.9886 13.0936C14.0367 13.0164 14.1114 12.9517 14.2191 12.9018L14.1351 12.7203ZM13.8181 12.9891C13.7494 13.1028 13.7162 13.2313 13.7162 13.3716H13.9162C13.9162 13.264 13.9413 13.172 13.9893 13.0925L13.8181 12.9891ZM13.7162 13.3716C13.7162 13.4697 13.7365 13.5617 13.7787 13.646L13.9576 13.5566C13.9304 13.5023 13.9162 13.4413 13.9162 13.3716H13.7162ZM13.7802 13.6488C13.8245 13.7309 13.8903 13.8039 13.9734 13.8688L14.0964 13.7111C14.0301 13.6593 13.9846 13.6065 13.9561 13.5537L13.7802 13.6488ZM13.9743 13.8695C14.0593 13.9342 14.1638 13.9919 14.2859 14.0434L14.3636 13.8591C14.2524 13.8122 14.1637 13.7623 14.0955 13.7104L13.9743 13.8695ZM14.2864 14.0436C14.4096 14.0948 14.555 14.1435 14.7218 14.1898L14.7753 13.9971C14.614 13.9523 14.4768 13.9062 14.3631 13.8589L14.2864 14.0436ZM14.7214 14.1897C14.9434 14.2524 15.1329 14.3216 15.2906 14.397L15.3768 14.2165C15.2064 14.1351 15.0057 14.0621 14.7757 13.9972L14.7214 14.1897ZM15.2906 14.397C15.4477 14.472 15.5736 14.5551 15.6702 14.6451L15.8065 14.4988C15.6917 14.3919 15.5478 14.2982 15.3768 14.2165L15.2906 14.397ZM15.6715 14.6463C15.7688 14.7337 15.8389 14.8319 15.8838 14.9409L16.0687 14.8647C16.0115 14.7258 15.923 14.6034 15.8052 14.4976L15.6715 14.6463ZM15.8845 14.9425C15.9311 15.0502 15.9555 15.1749 15.9555 15.3184H16.1555C16.1555 15.152 16.1271 14.9996 16.068 14.8631L15.8845 14.9425ZM15.9555 15.3184C15.9555 15.4668 15.9256 15.598 15.8677 15.7139L16.0465 15.8033C16.1198 15.6568 16.1555 15.4945 16.1555 15.3184H15.9555ZM15.8677 15.7139C15.8092 15.8308 15.7254 15.9312 15.6149 16.0154L15.736 16.1745C15.8698 16.0727 15.9738 15.9489 16.0465 15.8033L15.8677 15.7139ZM15.6149 16.0154C15.5038 16.0999 15.3684 16.1669 15.2067 16.2151L15.2638 16.4068C15.4448 16.3528 15.6029 16.2759 15.736 16.1745L15.6149 16.0154ZM15.2074 16.2149C15.0484 16.2611 14.8684 16.2848 14.6665 16.2848V16.4848C14.8839 16.4848 15.083 16.4593 15.2631 16.407L15.2074 16.2149ZM14.6665 16.2848C14.4918 16.2848 14.3197 16.2606 14.1499 16.2121L14.0949 16.4044C14.2824 16.4579 14.473 16.4848 14.6665 16.4848V16.2848ZM14.1501 16.2121C13.9836 16.164 13.8323 16.0922 13.6958 15.9966L13.5811 16.1604C13.7363 16.2691 13.9076 16.3503 14.0947 16.4043L14.1501 16.2121ZM13.6963 15.9969C13.5636 15.9029 13.4577 15.7877 13.3775 15.6507L13.2049 15.7517C13.2997 15.9137 13.4253 16.05 13.5806 16.1601L13.6963 15.9969ZM13.3782 15.6519C13.3022 15.5177 13.2627 15.3601 13.2627 15.1762H13.0627C13.0627 15.3897 13.1088 15.5821 13.2042 15.7505L13.3782 15.6519ZM13.1627 15.2762H13.6877V15.0762H13.1627V15.2762ZM13.5877 15.1762C13.5877 15.3258 13.6166 15.4604 13.6789 15.5763L13.8551 15.4816C13.8116 15.4007 13.7877 15.3001 13.7877 15.1762H13.5877ZM13.6792 15.5769C13.7396 15.6872 13.822 15.779 13.9256 15.8515L14.0403 15.6876C13.9616 15.6326 13.9001 15.5639 13.8547 15.4809L13.6792 15.5769ZM13.9264 15.852C14.0294 15.9227 14.1448 15.9747 14.2717 16.0084L14.3231 15.8151C14.2167 15.7868 14.1225 15.744 14.0396 15.6871L13.9264 15.852ZM14.2735 16.0088C14.4002 16.04 14.5312 16.0555 14.6665 16.0555V15.8555C14.5466 15.8555 14.4316 15.8418 14.3213 15.8146L14.2735 16.0088ZM14.6665 16.0555C14.8593 16.0555 15.0286 16.0288 15.1712 15.9718L15.097 15.7861C14.9844 15.8311 14.842 15.8555 14.6665 15.8555V16.0555ZM15.1712 15.9718C15.3135 15.9149 15.4273 15.8309 15.5061 15.7171L15.3417 15.6033C15.2893 15.679 15.2099 15.7409 15.097 15.7861L15.1712 15.9718ZM15.5054 15.7182C15.5862 15.6046 15.6251 15.4716 15.6251 15.3239H15.4251C15.4251 15.435 15.3965 15.5262 15.3424 15.6022L15.5054 15.7182Z" fill="#616376"/>
   </svg>
 );
 

package/source/components/_common/IconSVG/SVG/vehicle/SelectorGearboxAutomatic.tsx

@@ -5,21 +5,18 @@ const SvgSelectorGearboxAutomatic = (
   props: any
 ) => (
   <svg
-    viewBox="0 0 24.4 34.9"
+    viewBox="0 0 25 25"
     width="1em"
     height="1em"
+    fill="none"
     {...props}
   >
-    <switch>
-      <g>
-        <g fill="#231f20">
-          <path d="M22.5 25.5H1.8c-1 0-1.8-.8-1.8-1.8v-4c0-1 .8-1.8 1.8-1.8h20.7c1 0 1.8.8 1.8 1.8v4c.1 1-.8 1.8-1.8 1.8zM1.8 18.6c-.6 0-1.1.5-1.1 1.1v4c0 .6.5 1.1 1.1 1.1h20.7c.6 0 1.1-.5 1.1-1.1v-4c0-.6-.5-1.1-1.1-1.1z" />
-          <path d="M17.4 18.6H6.9V2.9C6.9 1.3 8.2 0 9.8 0h4.8c1.6 0 2.9 1.3 2.9 2.9v15.7zm-9.8-.7h9.1v-15c0-1.2-1-2.2-2.2-2.2H9.8c-1.2 0-2.2 1-2.2 2.2zm7 17H9.8c-1.6 0-2.9-1.3-2.9-2.9v-7.2h10.5V32c0 1.6-1.2 2.9-2.8 2.9zm-7-9.4V32c0 1.2 1 2.2 2.2 2.2h4.8c1.2 0 2.2-1 2.2-2.2v-6.5z" />
-          <path d="M14.9 18.6H9.7v-7.8c0-1 .8-1.8 1.8-1.8h1.7c1 0 1.8.8 1.8 1.8v7.8zm-4.5-.7h3.8v-7.1c0-.6-.5-1.1-1.1-1.1h-1.7c-.6 0-1.1.5-1.1 1.1v7.1z" />
-        </g>
-        <path d="M23 4c0 .8-.6 1.4-1.4 1.4h-.5v1.2c0 .3-.2.5-.5.5s-.5-.2-.5-.5V3.1c0-.3.2-.5.5-.5h.9c.9 0 1.5.7 1.5 1.4zm-.9 0c0-.2-.2-.4-.4-.4h-.5v.8h.5c.2.1.4-.1.4-.4zm.7 10.8c-.2.1-.5.1-.7-.2l-.9-1.5h-.1v1.2c0 .3-.2.5-.5.5s-.5-.2-.5-.5v-3.5c0-.3.2-.5.5-.5h.9c.8 0 1.4.6 1.4 1.4 0 .5-.3 1-.7 1.2l.7 1.1c.2.4.1.7-.1.8zm-1.1-3.4h-.4v.8h.4c.2 0 .4-.2.4-.4s-.2-.4-.4-.4zM23.8 28.1v3.5c0 .4-.5.6-.8.3l-.2-.2c-.1-.1-1.5-2.1-1.5-2.3v2.2c0 .3-.2.5-.5.5s-.5-.2-.5-.5v-3.5c0-.3.2-.5.5-.5.2 0 .3.1.4.2s1.1 1.6 1.7 2.4V28c0-.3.2-.5.5-.5.1.2.4.4.4.6z" />
-      </g>
-    </switch>
+    <path d="M17.2388 20.7173C17.2388 21.5019 17.9102 22.1379 18.7385 22.1379C19.5668 22.1379 20.2383 21.5019 20.2383 20.7173C20.2383 19.9327 19.5668 19.2967 18.7385 19.2967C17.9102 19.2967 17.2388 19.9327 17.2388 20.7173Z" stroke="#616376"/>
+    <path d="M17.2388 15.4385C17.2388 16.2231 17.9102 16.8591 18.7385 16.8591C19.5668 16.8591 20.2383 16.2231 20.2383 15.4385C20.2383 14.6539 19.5668 14.0179 18.7385 14.0179C17.9102 14.0179 17.2388 14.6539 17.2388 15.4385Z" stroke="#616376"/>
+    <path d="M17.2388 10.1596C17.2388 10.9442 17.9102 11.5802 18.7385 11.5802C19.5668 11.5802 20.2383 10.9442 20.2383 10.1596C20.2383 9.37498 19.5668 8.73894 18.7385 8.73894C17.9102 8.73894 17.2388 9.37498 17.2388 10.1596Z" stroke="#616376"/>
+    <path d="M17.2388 4.88064C17.2388 5.66523 17.9102 6.30127 18.7385 6.30127C19.5668 6.30127 20.2383 5.66523 20.2383 4.88064C20.2383 4.09605 19.5668 3.46001 18.7385 3.46001C17.9102 3.46001 17.2388 4.09605 17.2388 4.88064Z" stroke="#616376"/>
+    <path d="M11.1587 12.9488V5.04847C11.1587 4.23035 10.4955 3.56714 9.67737 3.56714V3.56714C8.85926 3.56714 8.19604 4.23035 8.19604 5.04847V12.9488M11.1587 17.7802L11.1587 20.8492C11.1587 21.6673 10.4955 22.3306 9.67737 22.3306V22.3306C8.85926 22.3306 8.19604 21.6673 8.19604 20.8492V17.7802" stroke="#616376" stroke-linecap="round"/>
+    <rect x="5.26782" y="12.954" width="8.81951" height="4.82125" rx="0.1" stroke="#616376" stroke-linecap="round"/>
   </svg>
 );
 

package/source/components/_common/IconSVG/SVG/vehicle/SelectorGearboxManualShift.tsx

@@ -5,18 +5,13 @@ const SvgSelectorGearboxManualShift = (
   props: any
 ) => (
   <svg
-    viewBox="0 0 32.3 27.6"
+    viewBox="0 0 25 25"
     width="1em"
     height="1em"
+    fill="none"
     {...props}
   >
-    <switch>
-      <g fill="#231f20">
-        <path d="M3.5 7C1.6 7 0 5.4 0 3.5S1.6 0 3.5 0 7 1.6 7 3.5 5.4 7 3.5 7zm0-6.3C2 .7.7 2 .7 3.5S2 6.3 3.5 6.3 6.3 5 6.3 3.5 5.1.7 3.5.7zM16.2 7c-1.9 0-3.5-1.6-3.5-3.5S14.3 0 16.2 0s3.5 1.6 3.5 3.5S18.1 7 16.2 7zm0-6.3c-1.5 0-2.8 1.3-2.8 2.8s1.3 2.8 2.8 2.8S19 5 19 3.5 17.7.7 16.2.7zM28.8 7c-1.9 0-3.5-1.6-3.5-3.5S26.9 0 28.8 0s3.5 1.6 3.5 3.5S30.7 7 28.8 7zm0-6.3C27.3.7 26 2 26 3.5s1.3 2.8 2.8 2.8 2.8-1.3 2.8-2.8S30.3.7 28.8.7zM3.5 27.6C1.6 27.6 0 26 0 24.1s1.6-3.5 3.5-3.5S7 22.2 7 24.1c0 2-1.6 3.5-3.5 3.5zm0-6.3C2 21.3.7 22.6.7 24.1s1.3 2.8 2.8 2.8 2.8-1.3 2.8-2.8-1.2-2.8-2.8-2.8zm12.7 6.3c-1.9 0-3.5-1.6-3.5-3.5s1.6-3.5 3.5-3.5 3.5 1.6 3.5 3.5c0 2-1.6 3.5-3.5 3.5zm0-6.3c-1.5 0-2.8 1.3-2.8 2.8s1.3 2.8 2.8 2.8 2.8-1.3 2.8-2.8-1.3-2.8-2.8-2.8zm12.6 6.3c-1.9 0-3.5-1.6-3.5-3.5s1.6-3.5 3.5-3.5 3.5 1.6 3.5 3.5c0 2-1.6 3.5-3.5 3.5zm0-6.3c-1.5 0-2.8 1.3-2.8 2.8s1.3 2.8 2.8 2.8 2.8-1.3 2.8-2.8-1.3-2.8-2.8-2.8z" />
-        <path d="M3.5 21.3c-.2 0-.3-.2-.3-.3V6.7c0-.2.2-.3.3-.3s.3.2.3.3V21c.1.2-.1.3-.3.3zm12.7 0c-.2 0-.3-.2-.3-.3V6.7c0-.2.2-.3.3-.3s.3.2.3.3V21c0 .2-.2.3-.3.3z" />
-        <path d="M28.8 13.9H3.5c-.2 0-.3-.2-.3-.3s.2-.3.3-.3h24.9V6.7c0-.2.2-.3.3-.3s.3.2.3.3v6.9c.1.1 0 .3-.2.3z" />
-      </g>
-    </switch>
+    <path d="M5.05012 8.83123C4.00754 8.83123 3.16235 8.03064 3.16235 7.04306C3.16235 6.05548 4.00754 5.25488 5.05012 5.25488C6.09271 5.25488 6.93789 6.05548 6.93789 7.04306C6.93789 8.03064 6.09271 8.83123 5.05012 8.83123ZM5.05012 8.83123V12.7327M12.6012 8.83123C11.5586 8.83123 10.7134 8.03064 10.7134 7.04306C10.7134 6.05548 11.5586 5.25488 12.6012 5.25488C13.6438 5.25488 14.489 6.05548 14.489 7.04306C14.489 8.03064 13.6438 8.83123 12.6012 8.83123ZM12.6012 8.83123V12.7327M20.1523 8.83123C19.1097 8.83123 18.2645 8.03064 18.2645 7.04306C18.2645 6.05548 19.1097 5.25488 20.1523 5.25488C21.1949 5.25488 22.04 6.05548 22.04 7.04306C22.04 8.03064 21.1949 8.83123 20.1523 8.83123ZM20.1523 8.83123V12.0759C20.1523 12.4387 19.8582 12.7327 19.4955 12.7327H12.6012M5.05012 16.9593C4.00754 16.9593 3.16235 17.7599 3.16235 18.7475C3.16235 19.735 4.00754 20.5356 5.05012 20.5356C6.09271 20.5356 6.93789 19.735 6.93789 18.7475C6.93789 17.7599 6.09271 16.9593 5.05012 16.9593ZM5.05012 16.9593V12.7327M12.6012 16.9593C11.5586 16.9593 10.7134 17.7599 10.7134 18.7475C10.7134 19.735 11.5586 20.5356 12.6012 20.5356C13.6438 20.5356 14.489 19.735 14.489 18.7475C14.489 17.7599 13.6438 16.9593 12.6012 16.9593ZM12.6012 16.9593V12.7327M5.05012 12.7327H12.6012M20.1523 16.9593C19.1097 16.9593 18.2645 17.7599 18.2645 18.7475C18.2645 19.735 19.1097 20.5356 20.1523 20.5356C21.1949 20.5356 22.04 19.735 22.04 18.7475C22.04 17.7599 21.1949 16.9593 20.1523 16.9593Z" stroke="#616376"/>
   </svg>
 );
 

package/source/components/_common/IconSVG/SVG/vehicle/Speedometer.tsx

@@ -3,19 +3,13 @@ import * as React from 'react';
 
 const SvgSpeedometer = (props: any) => (
   <svg
-    viewBox="0 0 27 23.1"
+    viewBox="0 0 24 25"
     width="1em"
+    fill='none'
     height="1em"
     {...props}
   >
-    <switch>
-      <g fill="#231f20">
-        <path d="M13.6 15.8c-1.3 0-2.3-1-2.3-2.3s1-2.3 2.3-2.3 2.3 1 2.3 2.3-1 2.3-2.3 2.3zm0-3.9c-.9 0-1.6.7-1.6 1.6s.7 1.6 1.6 1.6 1.6-.7 1.6-1.6-.7-1.6-1.6-1.6z" />
-        <path d="M14.9 12.4c-.1 0-.2 0-.2-.1-.1-.1-.1-.4 0-.5l3.2-3.2c.1-.1.4-.1.5 0s.1.4 0 .5l-3.2 3.2c-.1.1-.2.1-.3.1z" />
-        <path d="M22.9 23.1c-.1 0-.2 0-.2-.1l-2.3-2.3c-.1-.1-.1-.4 0-.5s.4-.1.5 0l2.1 2.1c2.2-2.4 3.4-5.5 3.4-8.7C26.4 6.5 20.7.8 13.6.8S.7 6.4.7 13.5c0 3.2 1.2 6.3 3.4 8.7l2-2c.1-.1.4-.1.5 0s.1.4 0 .5L4.3 23c-.1.1-.1.1-.2.1s-.2 0-.2-.1C1.4 20.4 0 17.1 0 13.5 0 6.1 6.1 0 13.5 0 21 0 27 6.1 27 13.5c0 3.6-1.4 6.9-3.9 9.5 0 .1-.1.1-.2.1z" />
-        <path d="M4.1 13.9H.4c-.2 0-.4-.2-.4-.3s.2-.3.4-.3h3.8c.2 0 .4.2.4.3s-.3.3-.5.3zM26.7 13.9h-3.8c-.2 0-.3-.2-.3-.3s.2-.3.3-.3h3.8c.2 0 .3.2.3.3s-.1.3-.3.3zM20.1 7.1c-.1 0-.2 0-.2-.1-.1-.1-.1-.4 0-.5l2.7-2.7c.1-.1.4-.1.5 0s.1.4 0 .5L20.3 7c-.1.1-.2.1-.2.1zM13.4 4.5c-.2 0-.4-.2-.4-.3V.3c0-.2.2-.3.4-.3s.4.2.4.3v3.8c0 .2-.2.4-.4.4zM7 7.1c-.1 0-.2 0-.2-.1L4.1 4.4c-.2-.2-.2-.4 0-.5.1-.1.4-.1.5 0l2.7 2.7c.1.1.1.4 0 .5H7zM18.2 22.6H9c-.2 0-.4-.2-.4-.3v-3.9c.1-.3.3-.4.4-.4h9.1c.2 0 .3.2.3.3v3.9c.1.2 0 .4-.2.4zm-8.8-.7h8.4v-3.2H9.4z" />
-      </g>
-    </switch>
+    <path d="M13.028 13.0779C13.3499 13.3635 13.5436 13.7933 13.5421 14.2628C13.5393 15.112 12.8501 15.8503 11.9999 15.8004C11.1955 15.7532 10.6264 15.0662 10.629 14.2628C10.6318 13.4136 11.321 12.6753 12.1712 12.7252C12.5055 12.7448 12.7992 12.8749 13.028 13.0779ZM13.028 13.0779L15.2557 11.0168M11.9999 4.86487C12.0569 4.86488 12.114 4.8654 12.1712 4.86644C14.7273 4.91278 17.0193 5.95821 18.6828 7.62712M11.9999 4.86487V7.77079M11.9999 4.86487C9.40971 4.86447 7.05466 5.92149 5.34659 7.62712M18.6828 7.62712C20.3755 9.32535 21.4174 11.6692 21.4245 14.2628C21.4247 14.3314 21.4239 14.3998 21.4221 14.468M18.6828 7.62712L16.7979 9.47923M21.4221 14.468C21.35 17.2136 19.7044 19.6265 18.9991 20.5383C18.8181 20.7724 18.4992 20.8342 18.2344 20.7022L15.2557 19.2173M21.4221 14.468H18.6828M5.34659 7.62712C3.64253 9.32875 2.58241 11.676 2.57522 14.2628C2.57503 14.3312 2.57599 14.3997 2.57806 14.468M5.34659 7.62712L7.37323 9.47923M2.57806 14.468C2.65608 17.0501 4.30924 19.5696 5.00871 20.5242C5.1854 20.7654 5.50586 20.8372 5.77656 20.7103L8.74408 19.3196M2.57806 14.468H5.34659M9.40085 20.584H14.5989C14.9616 20.584 15.2557 20.29 15.2557 19.9272V18.5073C15.2557 18.1446 14.9616 17.8505 14.5989 17.8505H9.40085C9.03813 17.8505 8.74408 18.1446 8.74408 18.5073V19.9272C8.74408 20.29 9.03813 20.584 9.40085 20.584Z" stroke="#616376"/>
   </svg>
 );
 

package/source/components/_common/IconSVG/SVG/vehicle/Wrench.tsx

@@ -3,13 +3,13 @@ import * as React from 'react';
 
 const SvgWrench = (props: any) => (
   <svg
-    viewBox="0 0 40 40"
+    viewBox="0 0 25 25"
     width="1em"
     height="1em"
+    fill="none"
     {...props}
   >
-    <path d="M37.9 28.6l-10-10c-.4-.4-1-.4-1.4 0s-.4 1 0 1.4l10 10c1.8 1.8 1.8 4.8 0 6.6-.9.9-2.1 1.4-3.3 1.4s-2.4-.5-3.3-1.4L17.4 24.2c3.5-1.5 6.1-4.5 7.2-8.2.4-1.4.5-2.8.4-4.2C24.6 5.6 19.4.4 13.2 0c-2.1-.1-4.1.3-6 1.1-.2.2-.4.4-.5.8-.1.3 0 .6.3.8l7 7.1c1.2 1.2 1.2 3.1 0 4.3-1.2 1.1-3.2 1.1-4.3 0L2.7 7c-.3-.2-.6-.3-.9-.2-.4.1-.6.3-.8.6C.2 9.1-.2 11-.1 12.9c.1 6 4.7 11.2 10.5 12.1.7.1 1.4.2 2.1.2.9 0 1.9-.1 2.8-.3L28.5 38c1.3 1.3 2.9 2 4.7 2s3.5-.7 4.7-2c2.6-2.6 2.6-6.8 0-9.4zm-22.7-5.8c-1.4.4-3 .5-4.5.2-4.9-.8-8.7-5.1-8.8-10.1 0-1.1.1-2.2.4-3.3l6 5.9c1 1 2.2 1.5 3.6 1.5s2.6-.5 3.6-1.5c2-2 2-5.2 0-7.2l-6-5.9c1.1-.3 2.4-.4 3.6-.4 5.2.3 9.6 4.6 9.9 9.9.1 1.2 0 2.4-.4 3.5-1 3.5-3.8 6.3-7.3 7.3 0 .1 0 .1-.1.1z" />
-    <path d="M31.6 34.7c-1.7 0-3-1.3-3-3s1.3-3 3-3 3 1.3 3 3c0 1.6-1.3 3-3 3zm0-4c-.6 0-1 .4-1 1s.4 1 1 1 1-.4 1-1-.4-1-1-1z" />
+    <path d="M9.87417 14.2384C9.40162 14.3877 8.88305 14.4726 8.29005 14.4939C6.85196 14.5456 5.89132 14.0531 4.76053 13.1105C3.65313 12.1875 3.19045 11.3753 2.8193 9.99791C2.62655 9.28259 2.66923 8.33752 2.76082 7.56829C2.83338 6.95879 3.55404 6.74059 3.99245 7.17018L6.54788 9.67417C6.77147 9.87177 7.26503 10.0315 7.54876 10.1113C7.68679 10.1501 7.83269 10.1434 7.96909 10.0992L8.97132 9.7744C9.20887 9.69742 9.39598 9.51256 9.47583 9.27596L9.8009 8.31281C9.84876 8.17102 9.85602 8.01858 9.81304 7.87524C9.73058 7.60025 9.57149 7.14315 9.37779 6.95279L6.52159 4.37797C6.06168 3.96337 6.24219 3.22478 6.85285 3.12228C7.68554 2.98253 8.73347 2.88637 9.52538 3.08099C10.9355 3.42753 11.738 3.91667 12.702 4.9831C13.7881 6.18475 14.3436 7.44288 14.2902 8.78742C14.2279 10.357 13.6196 11.2709 12.5255 12.4188C11.6683 13.3182 10.8743 13.9224 9.87417 14.2384ZM9.87417 14.2384L17.5109 21.2887C17.5263 21.3029 17.5421 21.3164 17.559 21.3286C17.6059 21.3624 17.7106 21.4326 17.8048 21.4587C17.9309 21.4936 18.296 21.5836 18.5257 21.5838C19.3892 21.5846 19.9124 21.195 20.4669 20.5463C20.9849 19.9403 21.2446 19.4279 21.3493 18.6441C21.3911 18.3308 21.2792 17.8073 21.2319 17.6412C21.197 17.5185 21.1071 17.391 21.0624 17.3327C21.0455 17.3105 21.0263 17.2904 21.0061 17.2711L13.9187 10.5036" stroke="#616376"/>
   </svg>
 );
 

package/source/components/_common/MaterialAccordionGroup/MaterialAccordionGroup.story.js

@@ -0,0 +1,49 @@
+import React, { useState } from 'react';
+import { storiesOf } from '@storybook/react';
+import MaterialAccordionGroup from './MaterialAccordionGroup';
+
+const MaterialAccordionGroupComponent = () => {
+  const [switchValue, setSwitchValue] = useState(false);
+  const handleSwitch = (value) => {
+    setSwitchValue(value);
+  };
+  const switchProps = {
+    value: switchValue,
+    onChange: handleSwitch
+  }
+  return (
+    <>
+      <MaterialAccordionGroup
+        title='Collaps item 1'
+        tooltipText='tooltipText'
+        withSwitch
+        switchProps={switchProps}
+      >
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse
+        malesuada lacus ex, sit amet blandit leo lobortis eget. Lorem ipsum dolor
+        sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex,
+        sit amet blandit leo lobortis eget.
+      </MaterialAccordionGroup>
+      <MaterialAccordionGroup
+        title='collaps item 1'
+      >
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse
+        malesuada lacus ex, sit amet blandit leo lobortis eget. Lorem ipsum dolor
+        sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex,
+        sit amet blandit leo lobortis eget.
+      </MaterialAccordionGroup>
+      <MaterialAccordionGroup
+        title='collaps item 1'
+        tooltipText='tooltipText 3'
+      >
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse
+        malesuada lacus ex, sit amet blandit leo lobortis eget. Lorem ipsum dolor
+        sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex,
+        sit amet blandit leo lobortis eget.
+      </MaterialAccordionGroup>
+    </>
+  )
+}
+
+storiesOf('_Common_UI', module)
+  .add('MaterialAccordionGroup', () => <MaterialAccordionGroupComponent />)

package/source/components/_common/MaterialAccordionGroup/MaterialAccordionGroup.styled.tsx

@@ -0,0 +1,55 @@
+import { styled, createTheme } from '@mui/material/styles';
+
+export const AccordionSummaryContent = styled('div')({
+  display: 'flex',
+  justifyContent: 'start',
+  alignItems: 'center'
+});
+
+export const AccordionSummaryTitle = styled('div')({
+  fontFamily: 'sans-serif',
+  fontWeight: '400',
+  fontSize: '16px',
+  lineHeight: '24px',
+  letterSpacing: '0.15px',
+  color: 'rgba(76, 78, 100, 0.87)'
+});
+
+export const Theme = createTheme({
+  components: {
+    MuiAccordion: {
+      styleOverrides: {
+        root: {
+          border: `1px solid lightgrey`,
+          '&:not(:last-child)': {
+            borderBottom: 0
+          },
+          '&:last-child': {
+            borderBottomRightRadius: '8px',
+            borderBottomLeftRadius: '8px'
+          },
+          '&:first-child': {
+            borderTopRightRadius: '8px',
+            borderTopLeftRadius: '8px'
+          },
+          '&:before': {
+            display: 'none'
+          }
+        }
+      }
+    },
+    MuiAccordionSummary: {
+      styleOverrides: {
+        root: {
+          height: '51px',
+          padding: '0 22px 0 16px',
+          '& .MuiAccordionSummary-content': {
+            display: 'flex',
+            justifyContent: 'space-between',
+            alignItems: 'center'
+          }
+        }
+      }
+    }
+  }
+});

package/source/components/_common/MaterialAccordionGroup/MaterialAccordionGroup.tsx

@@ -0,0 +1,41 @@
+import React from 'react';
+import Typography from '@mui/material/Typography';
+import { AccordionSummaryContent, AccordionSummaryTitle, Theme } from './MaterialAccordionGroup.styled';
+import { ThemeProvider } from '@mui/material/styles';
+import MaterialSwitch from '../MaterialSwitch/MaterialSwitch';
+import MaterialTooltip from '../MaterialTooltip/MaterialTooltip';
+import MuiAccordionDetails from '@mui/material/AccordionDetails';
+import IconSVG from '../IconSVG/IconSVG';
+import MuiAccordionSummary from '@mui/material/AccordionSummary';
+import MuiAccordion from '@mui/material/Accordion';
+
+interface IMaterialAccordionGroup {
+  title?: string;
+  tooltipText?: string;
+  children?: any;
+  switchProps?: any;
+  withSwitch?: boolean;
+}
+
+const MaterialAccordionGroup = ({ title, tooltipText, children, switchProps, withSwitch }: IMaterialAccordionGroup) => {
+  return (
+    <ThemeProvider theme={Theme}>
+      <MuiAccordion disableGutters elevation={0}>
+        <MuiAccordionSummary expandIcon={<IconSVG name='menuArrow' customDimensions width={12} />}>
+          <AccordionSummaryContent>
+            <AccordionSummaryTitle>{title}</AccordionSummaryTitle>
+            {!!tooltipText && <MaterialTooltip icon='infoIcon' text={tooltipText}/>}
+          </AccordionSummaryContent>
+          {withSwitch && <MaterialSwitch { ...switchProps } />}
+        </MuiAccordionSummary>
+        <MuiAccordionDetails>
+          <Typography>
+            {children}
+          </Typography>
+        </MuiAccordionDetails>
+      </MuiAccordion>
+    </ThemeProvider>
+  );
+};
+
+export default MaterialAccordionGroup;

package/source/components/_common/MaterialSwitch/MaterialSwitch.story.js

@@ -0,0 +1,17 @@
+import React, { useState } from 'react';
+import { storiesOf } from '@storybook/react';
+import MaterialSwitch from './MaterialSwitch';
+
+const Switch = () => {
+  const [value, setValue] = useState(false);
+
+  const onChange = (checked) => {
+    setValue(checked);
+  };
+
+  return <MaterialSwitch value={value} onChange={onChange} label='switcher' />
+}
+
+
+storiesOf('_Common_UI', module)
+  .add('MaterialSwitch', () => <Switch />)

package/source/components/_common/MaterialSwitch/MaterialSwitch.styled.tsx

@@ -0,0 +1,5 @@
+import { styled } from '@mui/system';
+
+export const BaseModalWrapper = styled('div')({
+
+});

package/source/components/_common/MaterialSwitch/MaterialSwitch.tsx

@@ -0,0 +1,35 @@
+import React, { useState } from 'react';
+import Switch from '@mui/material/Switch';
+import FormControlLabel from '@mui/material/FormControlLabel';
+
+interface IMaterialSwitch {
+  value: boolean;
+  disabled?: boolean;
+  onChange: (value: boolean) => void;
+  label?: any;
+  labelPlacement?: 'bottom' | 'end' | 'start' | 'top';
+}
+
+const MaterialSwitch = ({ disabled, label, onChange, value = false, labelPlacement }: IMaterialSwitch) => {
+  const [checked, setChecked] = useState(value);
+  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    setChecked(event.target.checked);
+    onChange(event.target.checked);
+  };
+  return (
+    <FormControlLabel
+      label={label}
+      labelPlacement={labelPlacement}
+      control={
+        <Switch
+          checked={checked}
+          onChange={handleChange}
+          disabled={disabled}
+          onClick={e => e.stopPropagation()}
+        />
+      }
+    />
+  );
+};
+
+export default MaterialSwitch;

package/source/components/_common/MaterialTooltip/MaterialTooltip.story.js

@@ -0,0 +1,10 @@
+import React, { useState } from 'react';
+import { storiesOf } from '@storybook/react';
+import MaterialTooltip from './MaterialTooltip';
+
+const Tooltip = () => {
+  return <MaterialTooltip text='info text' icon='infoIcon' />
+}
+
+storiesOf('_Common_UI', module)
+  .add('MaterialTooltip', () => <Tooltip />)

package/source/components/_common/MaterialTooltip/MaterialTooltip.tsx

@@ -0,0 +1,21 @@
+import React from 'react';
+import IconButton from '@mui/material/IconButton';
+import Tooltip from '@mui/material/Tooltip';
+import IconSVG from '../IconSVG/IconSVG';
+
+interface IMaterialTooltip {
+  text: string;
+  icon: string;
+}
+
+const MaterialTooltip = ({ text, icon }: IMaterialTooltip) => {
+  return (
+    <Tooltip title={text}>
+      <IconButton>
+        <IconSVG name={icon} customDimensions />
+      </IconButton>
+    </Tooltip>
+  );
+};
+
+export default MaterialTooltip;

package/source/components/_common/Modal/modals/ManageCookieModal/ManageCookieModal.styl

@@ -0,0 +1,52 @@
+.modalWrapper
+  padding: 16px 10px 25px 25px
+  text-align: center
+  box-sizing: border-box
+  max-width: 600px
+
+.modalTitle
+  font-family: sans-serif
+  font-weight: bold
+  font-size: 24px;
+  line-height: 133.4%;
+  color: rgba(76, 78, 100, 0.87)
+  margin-top: 20px
+
+.modalContent
+  font-family: sans-serif
+  font-size: 16px;
+  line-height: 24px;
+  text-align: justify;
+  letter-spacing: 0.15px;
+  color: rgba(76, 78, 100, 0.87);
+  margin-top: 20px
+  margin-right: 25px
+
+.accordions
+  height: 278px
+  overflow-y: scroll
+  padding-right: 10px
+  margin-top: 16px
+  &::-webkit-scrollbar {
+    width: 6px
+  }
+  &::-webkit-scrollbar-track {
+    background: linear-gradient(0deg, rgba(255, 255, 255, 0.88), rgba(255, 255, 255, 0.88)), #666CFF;
+  }
+  &::-webkit-scrollbar-thumb {
+    background: #005CCB
+    border-radius: 50px
+  }
+
+.buttonsContainer
+  margin-top: 20px
+  display: flex
+  justify-content: center
+  column-gap: 20px
+
+.modalBtn
+  height: 38px
+  text-transform: uppercase !important
+
+.outlinedBtn
+  border: none !important

package/source/components/_common/Modal/modals/ManageCookieModal/ManageCookieModal.tsx

@@ -1,9 +1,53 @@
 import React from 'react';
 import styles from './ManageCookieModal.styl';
 
+import IconSVG from '../../../IconSVG/IconSVG';
+import Button from '../../../Button/Button';
+import MaterialAccordionGroup from '../../../MaterialAccordionGroup/MaterialAccordionGroup';
+import classNames from 'classnames';
+
 const ManageCookieModal = () => {
   return (
-    <div>ManageCookieModal</div>
+    <div className={styles.modalWrapper}>
+      <IconSVG name='autodeLogo' customDimensions />
+      <div className={styles.modalTitle}>Nach den Cookies geht die Fahrt weiter.</div>
+      <div className={styles.modalContent}>Für ein bestmögliches Nutzererlebnis setzen wir Cookies und andere Technologien ein. Diese können Sie hier verwalten.</div>
+      <div className={styles.accordions}>
+        <MaterialAccordionGroup
+          title='Notwendig'
+          tooltipText='tooltip text'
+          withSwitch
+        >
+          Wir verwenden Browser-Cookies, die notwendig sind, damit die Website wie vorgesehen funktioniert.
+          Beispiel: Wir speichern Ihre Präferenzen bei der Datenerfassung auf der Website, damit wir sie berücksichtigen
+          können, wenn Sie auf unsere Website zurückkehren.
+          For example, we store your website data collection preferences so we can honor them if you return to our site.
+          You can disable these cookies in your browser settings but if you do the site may not work as intended.
+        </MaterialAccordionGroup>
+        <MaterialAccordionGroup
+          title='Analytisch'
+          withSwitch
+        >
+          Um das Nutzerverhalten zu verstehen und Ihnen ein relevanteres Surferlebnis zu bieten oder den Inhalt
+          unserer Website zu personalisieren. Beispiel: Wir sammeln Informationen darüber, welche Seiten Sie besuchen,
+          damit wir Ihnen relevantere Informationen präsentieren können.
+          For example, we collect information about which pages you visit to help us present more relevant information.
+        </MaterialAccordionGroup>
+        <MaterialAccordionGroup
+          title='Marketing'
+          withSwitch
+        >
+          Zur Personalisierung und Messung der Effektivität von Werbung auf unserer Website und anderen Websites.
+          Beispiel: Wir können Ihnen eine personalisierte Werbung auf der Grundlage der Seiten, die Sie auf unserer
+          Website besuchen, anzeigen.
+          For example, we may serve you a personalized ad based on the pages you visit on our site.
+        </MaterialAccordionGroup>
+      </div>
+      <div className={styles.buttonsContainer}>
+        <Button className={classNames(styles.modalBtn, styles.outlinedBtn)} variant='outlined'>Cookie-Einstellungen</Button>
+        <Button className={styles.modalBtn}>zustimmen</Button>
+      </div>
+    </div>
   );
 };
 

package/source/components/_common/Modal/modals/PreviewCookieModal/PreviewCookieModal.styl

@@ -29,4 +29,7 @@
 
 .modalBtn
   height: 38px
-  text-transform: uppercase !important
+  text-transform: uppercase !important
+
+.outlinedBtn
+  border: none !important

package/source/components/_common/Modal/modals/PreviewCookieModal/PreviewCookieModal.tsx

@@ -2,8 +2,14 @@ import React from 'react';
 import IconSVG from '../../../IconSVG/IconSVG';
 import Button from '../../../Button/Button';
 import styles from './PreviewCookieModal.styl';
+import classNames from 'classnames';
 
-const PreviewCookieModal = ({ toggleModal, modalCookieChange, setModal }) => {
+interface IPreviewCookieModal {
+  toggleModal: () => void;
+  setModal: (value: string) => void;
+}
+
+const PreviewCookieModal = ({ toggleModal, setModal }: IPreviewCookieModal) => {
   const onAcceptAll = () => {
     localStorage.setItem('cookieConfig', JSON.stringify([]));
     toggleModal();
@@ -14,7 +20,7 @@ const PreviewCookieModal = ({ toggleModal, modalCookieChange, setModal }) => {
       <div className={styles.modalTitle}>Nach den Cookies geht die Fahrt weiter.</div>
       <div className={styles.modalContent}>Für ein bestmögliches Nutzererlebnis setzen wir Cookies und andere Technologien ein. Diese können Sie hier verwalten.</div>
       <div className={styles.buttonsContainer}>
-        <Button onClick={() => setModal('MANAGE_COOKIE_MODAL')} className={styles.modalBtn} variant='outlined'>Cookie-Einstellungen</Button>
+        <Button onClick={() => setModal('MANAGE_COOKIE_MODAL')} className={classNames(styles.modalBtn, styles.outlinedBtn)} variant='outlined'>Cookie-Einstellungen</Button>
         <Button onClick={onAcceptAll} className={styles.modalBtn}>zustimmen</Button>
       </div>
     </div>

package/source/components/_common/TimePicker/TimePicker.tsx

@@ -27,8 +27,8 @@ const TimePicker = ({
     setDay(value);
   };
   const onHandleTimeChange = (value: number) => {
-    setTime(value)
-  }
+    setTime(value);
+  };
   const format = {
     hour: 'numeric',
     minute: 'numeric'