@bytebrand/fe-ui-core 4.1.23 → 4.1.25

package/source/components/_common/CheckboxMaterial/CheckboxMaterial.tsx

@@ -32,7 +32,7 @@ export interface ICheckboxProps {
   contentType?: string;
 }
 
-const CheckboxMaterial = ({ 
+const CheckboxMaterial = ({
   checked,
   value,
   disabled,
@@ -51,9 +51,12 @@ const CheckboxMaterial = ({
  }: ICheckboxProps) => {
   const [isChecked, setIsChecked] = useState(!!checked);
 
-  useEffect(() => {
-    setIsChecked(!!checked);
-  }, [checked])
+  useEffect(
+    () => {
+      setIsChecked(!!checked);
+    },
+    [checked]
+  );
 
   const onChangeHandler = (event: React.ChangeEvent<HTMLInputElement>) => {
     const { checked } = event.target;
@@ -83,9 +86,9 @@ const CheckboxMaterial = ({
           styles.color,
           `auto-de-color-${content}`,
           { [styles.iconError]: error }
-        )}></div>
+        )}></div>;
       case 'icon':
-        return <IconSVG customDimensions name={icon} className={classnames(styles.interiorIcon, { [styles.iconError]: error })} />
+        return <IconSVG customDimensions name={icon} className={classnames(styles.interiorIcon, { [styles.iconError]: error })} />;
       case 'door':
         return (
           <div className={styles.doorsContainer}>
@@ -93,27 +96,27 @@ const CheckboxMaterial = ({
               <span className={styles.content}>{content}</span>
             </div>
           </div>
-        )
+        );
       case 'text':
         return (
           <span className={classnames(styles.stickerTextContent, { [styles.iconError]: error })}>
             <span className={classnames(styles.inner, styles.textContent)}>{contentInner}</span>
           </span>
-        )
+        );
       case 'sticker':
         return (
           <span className={classnames(styles.stickerContent, { [styles.iconError]: error })}>
             <span className={classnames(styles.inner, styles.stickerIcon)}>{contentInner}</span>
           </span>
-        )
+        );
       case 'period':
         return (
           <div className={labelClassName} key={value}>
             <span>{value}</span>
           </div>
-        )
+        );
       default:
-        return
+        return;
     }
   };
 
@@ -129,7 +132,7 @@ const CheckboxMaterial = ({
             <IconSVG className={styles.interiorCheckedIcon} customDimensions name={icon} />
             <IconSVG className={styles.interiorCheckedIconCheck} customDimensions name='common_CheckBlue' />
           </div>
-        )
+        );
       case 'door':
         return (
           <div className={styles.doorsContainer}>
@@ -137,55 +140,55 @@ const CheckboxMaterial = ({
               <span className={classnames(styles.content, styles.selected)}>{content}</span>
             </div>
           </div>
-        )
+        );
       case 'text':
         return (
           <span className={styles.stickerTextContent}>
             {content ? <span className={classnames(styles.inner, styles.textContent)}>{contentInner}</span> : false}
             <IconSVG name='common_CheckBlue' className={classnames(styles.checkBlueIcon)} />
           </span>
-        )
+        );
       case 'sticker':
         return (
           <span className={styles.stickerContent}>
             {content ? <span className={classnames(styles.inner, styles.stickerIcon)}>{contentInner}</span> : false}
             <IconSVG name='common_CheckBlue' className={classnames(styles.checkBlueIconSticker, styles.checkBlueIcon)} />
           </span>
-        )
+        );
 
       case 'period':
         return (
           <div className={labelClassName} key={value}>
             <span>{value}</span>
           </div>
-        )
+        );
       default:
-        return
+        return;
     }
-  }
+  };
 
   const checkboxLabel = <span className={styles.checkboxLabel}>{label} {aggregation}</span>;
 
   const checkboxProps = {
-    checked: isChecked, // fix offerDetailedSection withFinalInstallment checkbox bug
     value,
+    className,
     disabled,
+    error,
     icon: renderIcon(),
     checkedIcon: renderCheckedIcon(),
-    className,
     onChange: onChangeHandler,
-    error
-  }
+    checked: isChecked // fix offerDetailedSection withFinalInstallment checkbox bug
+  };
 
   const radioProps = {
     value,
+    error,
     label,
     disabled,
     className,
     icon: renderIcon(),
-    checkedIcon: renderCheckedIcon(),
-    error
-  }
+    checkedIcon: renderCheckedIcon()
+  };
 
   return (
     <FormControlLabel
@@ -201,7 +204,7 @@ const CheckboxMaterial = ({
       labelPlacement={labelPlacement}
       className={formControlClassName}
     />
-  )
-}
+  );
+};
 
 export default CheckboxMaterial;

package/source/components/_common/Chip/Chip.tsx

@@ -21,7 +21,7 @@ const ChipLanding: React.FunctionComponent<IChipProps> = ({ chip, className, onC
   return (
     <div key={key}>
       <Chip
-        variant="outlined"
+        variant='outlined'
         label={value}
         onClick= {onClickHandler}
         onDelete={onDeleteHandler}

package/source/components/_common/DropDown/DropDown.tsx

@@ -1,11 +1,10 @@
-import * as React from 'react';
+import React, { FocusEventHandler } from 'react';
 import classnames from 'classnames';
 import Select from 'react-select';
 import Creatable, { CreatableProps } from 'react-select/creatable';
 // import { Props as SelectProps } from 'react-select/base';
 import { SelectComponentsConfig } from 'react-select/src/components';
 import { ActionMeta, ValueType, OptionsType } from 'react-select/src/types';
-import { FocusEventHandler } from 'react';
 
 import styles from './DropDown.styl';
 import { ClearIndicatorDefault } from './DropDownComponents';

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

@@ -10,13 +10,6 @@ export const Theme = createTheme({
         }
       }
     },
-    // MuiCollapse: {
-    //   styleOverrides: {
-    //     root: {
-          
-    //     }
-    //   }
-    // },
     MuiAccordionSummary: {
       styleOverrides: {
         root: {
@@ -27,9 +20,9 @@ export const Theme = createTheme({
           fontSize: 13,
           margin: 0,
           padding: '12px 0',
-          textTransform: 'uppercase',
+          textTransform: 'uppercase'
         }
       }
     }
   }
-});
+});

package/source/components/_common/IconSVG/IconSVGConfig.tsx

@@ -266,6 +266,18 @@ import RemoveEyeIcon from './SVG/settings/RemoveEye';
 import NewsletterIcon from './SVG/settings/Newsletter';
 import MarketResearchIcon from './SVG/settings/MarketResearch';
 import WarningIcon from './SVG/settings/Warning';
+
+// user menu
+import DashboardIcon from './SVG/common/DashboardIcon';
+import UserProfileIcon from './SVG/common/UserProfileIcon';
+import AddressIcon from './SVG/common/AddressIcon';
+import MyVehiclesIcon from './SVG/common/MyVehiclesIcon';
+import SavedSearchsIcon from './SVG/common/SavedSearchsIcon';
+import FavoritesIcon from './SVG/common/FavoritesIcon';
+import DealersIcon from './SVG/common/DealersIcon';
+import ImageSettingsIcon from './SVG/common/ImageSettingsIcon';
+import SupportCallbackIcon from './SVG/common/SupportCallbackIcon';
+import LogoutIcon from './SVG/common/LogoutIcon';
 interface IComponentsProp {
   [key: string]: (props: any) => React.ReactNode;
 }
@@ -603,7 +615,7 @@ const components: IComponentsProp = {
   copyIcon: CopyIcon,
   doneIcon: DoneIcon,
 
-  //settings
+  // settings
   accountIcon: AccountIcon,
   securityIcon: SecurityIcon,
   dataUsageIcon: DataUsageIcon,
@@ -623,7 +635,19 @@ const components: IComponentsProp = {
   greenCheck: CarInspectionCheck,
   autocheck: Autocheck,
   shoppingCart: ShoppingCart,
-  mobiledeLogo: MobileDeLogo
+  mobiledeLogo: MobileDeLogo,
+
+  // user menu
+  dashboardIcon: DashboardIcon,
+  userProfileIcon: UserProfileIcon,
+  addressIcon: AddressIcon,
+  myVehiclesIcon: MyVehiclesIcon,
+  savedSearchsIcon: SavedSearchsIcon,
+  favoritesIcon: FavoritesIcon,
+  dealersIcon: DealersIcon,
+  imageSettingsIcon: ImageSettingsIcon,
+  supportCallbackIcon: SupportCallbackIcon,
+  logoutIcon: LogoutIcon
 };
 
 export default components;

package/source/components/_common/IconSVG/SVG/common/AddressIcon.tsx

@@ -0,0 +1,20 @@
+/* tslint:disable */
+import * as React from 'react';
+
+const AddressIcon = (
+  props: any
+) => (
+  <svg
+    width="16"
+    height="20"
+    viewBox="0 0 16 20"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    { ...props }
+  >
+    <path d="M8 10.1831C8.48333 10.1831 8.896 10.0124 9.238 9.67111C9.57933 9.32911 9.75 8.91644 9.75 8.43311C9.75 7.94977 9.57933 7.53711 9.238 7.19511C8.896 6.85377 8.48333 6.68311 8 6.68311C7.51667 6.68311 7.104 6.85377 6.762 7.19511C6.42067 7.53711 6.25 7.94977 6.25 8.43311C6.25 8.91644 6.42067 9.32911 6.762 9.67111C7.104 10.0124 7.51667 10.1831 8 10.1831ZM8 18.2331C10.0667 16.3998 11.625 14.6454 12.675 12.9701C13.725 11.2954 14.25 9.84977 14.25 8.63311C14.25 6.73311 13.646 5.18311 12.438 3.98311C11.2293 2.78311 9.75 2.18311 8 2.18311C6.25 2.18311 4.77067 2.78311 3.562 3.98311C2.354 5.18311 1.75 6.73311 1.75 8.63311C1.75 9.84977 2.275 11.2954 3.325 12.9701C4.375 14.6454 5.93333 16.3998 8 18.2331ZM8 19.8831C7.88333 19.8831 7.76667 19.8664 7.65 19.8331C7.53333 19.7998 7.425 19.7414 7.325 19.6581C4.95833 17.5081 3.18767 15.5164 2.013 13.6831C0.837667 11.8498 0.25 10.1664 0.25 8.63311C0.25 6.21644 1.02933 4.28711 2.588 2.84511C4.146 1.40377 5.95 0.683105 8 0.683105C10.05 0.683105 11.8543 1.40377 13.413 2.84511C14.971 4.28711 15.75 6.21644 15.75 8.63311C15.75 10.1664 15.1627 11.8498 13.988 13.6831C12.8127 15.5164 11.0417 17.5081 8.675 19.6581C8.575 19.7414 8.46667 19.7998 8.35 19.8331C8.23333 19.8664 8.11667 19.8831 8 19.8831Z" fill="#4C4E64" fillOpacity="0.87"/>
+  </svg>
+);
+
+export default AddressIcon;
+/* tslint:enable */

package/source/components/_common/IconSVG/SVG/common/DashboardIcon.tsx

@@ -0,0 +1,20 @@
+/* tslint:disable */
+import * as React from 'react';
+
+const DashboardIcon = (
+  props: any
+) => (
+  <svg
+    width="18"
+    height="18"
+    viewBox="0 0 18 18"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    { ...props }
+  >
+    <path d="M10.25 5.53311V1.83311C10.25 1.58311 10.3373 1.37044 10.512 1.19511C10.6873 1.02044 10.9 0.933105 11.15 0.933105H16.6C16.85 0.933105 17.0627 1.02044 17.238 1.19511C17.4127 1.37044 17.5 1.58311 17.5 1.83311V5.53311C17.5 5.78311 17.4127 5.99577 17.238 6.17111C17.0627 6.34577 16.85 6.43311 16.6 6.43311H11.15C10.9 6.43311 10.6873 6.34577 10.512 6.17111C10.3373 5.99577 10.25 5.78311 10.25 5.53311ZM0.5 9.03311V1.83311C0.5 1.58311 0.587667 1.37044 0.763 1.19511C0.937667 1.02044 1.15 0.933105 1.4 0.933105H6.85C7.1 0.933105 7.31267 1.02044 7.488 1.19511C7.66267 1.37044 7.75 1.58311 7.75 1.83311V9.03311C7.75 9.28311 7.66267 9.49577 7.488 9.67111C7.31267 9.84577 7.1 9.93311 6.85 9.93311H1.4C1.15 9.93311 0.937667 9.84577 0.763 9.67111C0.587667 9.49577 0.5 9.28311 0.5 9.03311ZM10.25 17.0331V9.83311C10.25 9.58311 10.3373 9.37044 10.512 9.19511C10.6873 9.02044 10.9 8.93311 11.15 8.93311H16.6C16.85 8.93311 17.0627 9.02044 17.238 9.19511C17.4127 9.37044 17.5 9.58311 17.5 9.83311V17.0331C17.5 17.2831 17.4127 17.4958 17.238 17.6711C17.0627 17.8458 16.85 17.9331 16.6 17.9331H11.15C10.9 17.9331 10.6873 17.8458 10.512 17.6711C10.3373 17.4958 10.25 17.2831 10.25 17.0331ZM0.5 17.0331V13.3331C0.5 13.0831 0.587667 12.8704 0.763 12.6951C0.937667 12.5204 1.15 12.4331 1.4 12.4331H6.85C7.1 12.4331 7.31267 12.5204 7.488 12.6951C7.66267 12.8704 7.75 13.0831 7.75 13.3331V17.0331C7.75 17.2831 7.66267 17.4958 7.488 17.6711C7.31267 17.8458 7.1 17.9331 6.85 17.9331H1.4C1.15 17.9331 0.937667 17.8458 0.763 17.6711C0.587667 17.4958 0.5 17.2831 0.5 17.0331ZM2 8.43311H6.25V2.43311H2V8.43311ZM11.75 16.4331H16V10.4331H11.75V16.4331ZM11.75 4.93311H16V2.43311H11.75V4.93311ZM2 16.4331H6.25V13.9331H2V16.4331Z" fill="#4C4E64" fillOpacity="0.87"/>
+  </svg>
+);
+
+export default DashboardIcon;
+/* tslint:enable */

package/source/components/_common/IconSVG/SVG/common/DealersIcon.tsx

@@ -0,0 +1,20 @@
+/* tslint:disable */
+import * as React from 'react';
+
+const DealersIcon = (
+  props: any
+) => (
+  <svg
+    width="20"
+    height="17"
+    viewBox="0 0 20 17"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    { ...props }
+  >
+    <path d="M2.99995 2.43311C2.71662 2.43311 2.47895 2.33744 2.28695 2.14611C2.09562 1.95411 1.99995 1.71644 1.99995 1.43311C1.99995 1.14977 2.09562 0.912106 2.28695 0.720106C2.47895 0.528772 2.71662 0.433105 2.99995 0.433105H17C17.2833 0.433105 17.5206 0.528772 17.712 0.720106C17.9039 0.912106 18 1.14977 18 1.43311C18 1.71644 17.9039 1.95411 17.712 2.14611C17.5206 2.33744 17.2833 2.43311 17 2.43311H2.99995ZM2.99995 16.4331C2.71662 16.4331 2.47895 16.3371 2.28695 16.1451C2.09562 15.9538 1.99995 15.7164 1.99995 15.4331V10.4331H1.82495C1.50828 10.4331 1.24995 10.3121 1.04995 10.0701C0.849951 9.82877 0.783284 9.54977 0.849951 9.23311L1.84995 4.23311C1.89995 3.99977 2.01662 3.80811 2.19995 3.65811C2.38328 3.50811 2.59162 3.43311 2.82495 3.43311H17.1749C17.4083 3.43311 17.6166 3.50811 17.7999 3.65811C17.9833 3.80811 18.1 3.99977 18.15 4.23311L19.15 9.23311C19.2166 9.54977 19.15 9.82877 18.95 10.0701C18.75 10.3121 18.4916 10.4331 18.1749 10.4331H18V15.4331C18 15.7164 17.9039 15.9538 17.712 16.1451C17.5206 16.3371 17.2833 16.4331 17 16.4331C16.7166 16.4331 16.4793 16.3371 16.288 16.1451C16.096 15.9538 16 15.7164 16 15.4331V10.4331H12V15.4331C12 15.7164 11.9043 15.9538 11.713 16.1451C11.521 16.3371 11.2833 16.4331 11 16.4331H2.99995ZM3.99995 14.4331H9.99995V10.4331H3.99995V14.4331ZM3.04995 8.43311H16.95L16.35 5.43311H3.64995L3.04995 8.43311Z" fill="#4C4E64" fillOpacity="0.87"/>
+  </svg>
+);
+
+export default DealersIcon;
+/* tslint:enable */

package/source/components/_common/IconSVG/SVG/common/FavoritesIcon.tsx

@@ -0,0 +1,20 @@
+/* tslint:disable */
+import * as React from 'react';
+
+const FavoritesIcon = (
+  props: any
+) => (
+  <svg
+    width="14"
+    height="14"
+    viewBox="0 0 14 14"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    { ...props }
+  >
+    <path d="M3.97501 13.4082C3.64168 13.6915 3.29601 13.7039 2.93801 13.4452C2.57935 13.1872 2.45835 12.8499 2.57501 12.4332L3.72501 8.6332L0.825014 6.5832C0.475014 6.31654 0.371014 5.97487 0.513014 5.5582C0.654347 5.14154 0.94168 4.9332 1.37501 4.9332H4.97501L6.12501 1.0582C6.20835 0.841537 6.32935 0.67887 6.48801 0.570203C6.64601 0.462203 6.81668 0.408203 7.00001 0.408203C7.18335 0.408203 7.35401 0.462203 7.51201 0.570203C7.67068 0.67887 7.79168 0.841537 7.87501 1.0582L9.02501 4.9332H12.625C13.0583 4.9332 13.346 5.14154 13.488 5.5582C13.6293 5.97487 13.525 6.31654 13.175 6.5832L10.275 8.6332L11.425 12.4332C11.5417 12.8499 11.4207 13.1872 11.062 13.4452C10.704 13.7039 10.3583 13.6915 10.025 13.4082L7.00001 11.1082L3.97501 13.4082Z" fill="#4C4E64" fillOpacity="0.87"/>
+  </svg>
+);
+
+export default FavoritesIcon;
+/* tslint:enable */

package/source/components/_common/IconSVG/SVG/common/ImageSettingsIcon.tsx

@@ -0,0 +1,20 @@
+/* tslint:disable */
+import * as React from 'react';
+
+const ImageSettingsIcon = (
+  props: any
+) => (
+  <svg
+    width="20"
+    height="20"
+    viewBox="0 0 20 20"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    { ...props }
+  >
+    <path d="M11.4999 19.9331H8.47494C8.25828 19.9331 8.06661 19.8581 7.89994 19.7081C7.73327 19.5581 7.63328 19.3664 7.59994 19.1331L7.29994 16.8831C7.03327 16.7998 6.76261 16.6748 6.48794 16.5081C6.21261 16.3414 5.95827 16.1664 5.72494 15.9831L3.64994 16.8831C3.43327 16.9664 3.22094 16.9748 3.01294 16.9081C2.80427 16.8414 2.63327 16.7081 2.49994 16.5081L0.999941 13.8831C0.883275 13.6831 0.849941 13.4704 0.899941 13.2451C0.949941 13.0204 1.05827 12.8414 1.22494 12.7081L3.04994 11.3331C3.01661 11.1831 2.99594 11.0331 2.98794 10.8831C2.97927 10.7331 2.97494 10.5831 2.97494 10.4331C2.97494 10.2998 2.97927 10.1581 2.98794 10.0081C2.99594 9.85811 3.01661 9.69977 3.04994 9.53311L1.22494 8.15811C1.05827 8.02477 0.949941 7.84577 0.899941 7.62111C0.849941 7.39577 0.883275 7.18311 0.999941 6.98311L2.49994 4.38311C2.61661 4.18311 2.78327 4.04977 2.99994 3.98311C3.21661 3.91644 3.42494 3.92477 3.62494 4.00811L5.72494 4.88311C5.95827 4.69977 6.21261 4.52911 6.48794 4.37111C6.76261 4.21244 7.03327 4.08311 7.29994 3.98311L7.59994 1.73311C7.63328 1.49977 7.73327 1.30811 7.89994 1.15811C8.06661 1.00811 8.25828 0.933105 8.47494 0.933105H11.4999C11.7333 0.933105 11.9333 1.00811 12.0999 1.15811C12.2666 1.30811 12.3666 1.49977 12.3999 1.73311L12.6999 3.98311C12.9999 4.09977 13.2706 4.22877 13.5119 4.37011C13.7539 4.51211 13.9999 4.68311 14.2499 4.88311L16.3749 4.00811C16.5749 3.92477 16.7793 3.91644 16.9879 3.98311C17.1959 4.04977 17.3666 4.18311 17.4999 4.38311L18.9999 6.98311C19.1166 7.18311 19.1499 7.39577 19.0999 7.62111C19.0499 7.84577 18.9416 8.02477 18.7749 8.15811L16.9249 9.55811C16.9583 9.72477 16.9749 9.87477 16.9749 10.0081V10.4331C16.9749 10.5664 16.9706 10.7038 16.9619 10.8451C16.9539 10.9871 16.9333 11.1498 16.8999 11.3331L18.7249 12.7081C18.9083 12.8414 19.0249 13.0204 19.0749 13.2451C19.1249 13.4704 19.0833 13.6831 18.9499 13.8831L17.4499 16.4831C17.3333 16.6831 17.1666 16.8164 16.9499 16.8831C16.7333 16.9498 16.5166 16.9414 16.2999 16.8581L14.2499 15.9831C13.9999 16.1831 13.7459 16.3581 13.4879 16.5081C13.2293 16.6581 12.9666 16.7831 12.6999 16.8831L12.3999 19.1331C12.3666 19.3664 12.2666 19.5581 12.0999 19.7081C11.9333 19.8581 11.7333 19.9331 11.4999 19.9331ZM9.99994 13.4331C10.8333 13.4331 11.5416 13.1414 12.1249 12.5581C12.7083 11.9748 12.9999 11.2664 12.9999 10.4331C12.9999 9.59977 12.7083 8.89144 12.1249 8.30811C11.5416 7.72477 10.8333 7.43311 9.99994 7.43311C9.16661 7.43311 8.45827 7.72477 7.87494 8.30811C7.29161 8.89144 6.99994 9.59977 6.99994 10.4331C6.99994 11.2664 7.29161 11.9748 7.87494 12.5581C8.45827 13.1414 9.16661 13.4331 9.99994 13.4331ZM9.99994 11.9331C9.58327 11.9331 9.22927 11.7871 8.93794 11.4951C8.64594 11.2038 8.49994 10.8498 8.49994 10.4331C8.49994 10.0164 8.64594 9.66244 8.93794 9.37111C9.22927 9.07911 9.58327 8.93311 9.99994 8.93311C10.4166 8.93311 10.7706 9.07911 11.0619 9.37111C11.3539 9.66244 11.4999 10.0164 11.4999 10.4331C11.4999 10.8498 11.3539 11.2038 11.0619 11.4951C10.7706 11.7871 10.4166 11.9331 9.99994 11.9331ZM8.99994 18.4331H10.9749L11.3249 15.7581C11.8416 15.6248 12.3083 15.4331 12.7249 15.1831C13.1416 14.9331 13.5499 14.6164 13.9499 14.2331L16.4249 15.2831L17.4249 13.5831L15.2499 11.9581C15.3333 11.6914 15.3876 11.4331 15.4129 11.1831C15.4376 10.9331 15.4499 10.6831 15.4499 10.4331C15.4499 10.1664 15.4376 9.91244 15.4129 9.67111C15.3876 9.42911 15.3333 9.18311 15.2499 8.93311L17.4249 7.28311L16.4499 5.58311L13.9249 6.63311C13.5916 6.28311 13.1916 5.97044 12.7249 5.69511C12.2583 5.42044 11.7916 5.22477 11.3249 5.10811L10.9999 2.43311H9.02494L8.67494 5.10811C8.17494 5.22477 7.70827 5.40811 7.27494 5.65811C6.84161 5.90811 6.42494 6.22477 6.02494 6.60811L3.54994 5.58311L2.57494 7.28311L4.72494 8.88311C4.64161 9.13311 4.58327 9.38311 4.54994 9.63311C4.51661 9.88311 4.49994 10.1498 4.49994 10.4331C4.49994 10.6998 4.51661 10.9581 4.54994 11.2081C4.58327 11.4581 4.64161 11.7081 4.72494 11.9581L2.57494 13.5831L3.54994 15.2831L6.02494 14.2331C6.40827 14.6164 6.81661 14.9331 7.24994 15.1831C7.68327 15.4331 8.15827 15.6248 8.67494 15.7581L8.99994 18.4331Z" fill="#4C4E64" fillOpacity="0.87"/>
+  </svg>
+);
+
+export default ImageSettingsIcon;
+/* tslint:enable */

package/source/components/_common/IconSVG/SVG/common/LogoutIcon.tsx

@@ -0,0 +1,20 @@
+/* tslint:disable */
+import * as React from 'react';
+
+const LogoutIcon = (
+  props: any
+) => (
+  <svg
+    width="18"
+    height="19"
+    viewBox="0 0 18 19"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    { ...props }
+  >
+    <path d="M12.625 13.4081C12.475 13.2414 12.4 13.0581 12.4 12.8581C12.4 12.6581 12.475 12.4831 12.625 12.3331L14.525 10.4331H6.87498C6.65831 10.4331 6.47931 10.3621 6.33798 10.2201C6.19598 10.0788 6.12498 9.89977 6.12498 9.68311C6.12498 9.46644 6.19598 9.28711 6.33798 9.14511C6.47931 9.00377 6.65831 8.93311 6.87498 8.93311H14.525L12.625 7.00811C12.475 6.85811 12.4 6.68311 12.4 6.48311C12.4 6.28311 12.475 6.10811 12.625 5.95811C12.775 5.8081 12.95 5.73311 13.15 5.73311C13.35 5.73311 13.5166 5.79977 13.65 5.93311L16.775 9.05811C16.8583 9.14144 16.921 9.23711 16.963 9.34511C17.0043 9.45377 17.025 9.56644 17.025 9.68311C17.025 9.79977 17.0043 9.91211 16.963 10.0201C16.921 10.1288 16.8583 10.2248 16.775 10.3081L13.65 13.4331C13.5 13.5998 13.3293 13.6748 13.138 13.6581C12.946 13.6414 12.775 13.5581 12.625 13.4081ZM2.39998 18.4331C1.89998 18.4331 1.47498 18.2581 1.12498 17.9081C0.774976 17.5581 0.599976 17.1331 0.599976 16.6331V2.73311C0.599976 2.23311 0.774976 1.80811 1.12498 1.45811C1.47498 1.10811 1.89998 0.933105 2.39998 0.933105H8.37498C8.57498 0.933105 8.74998 1.00377 8.89997 1.14511C9.04997 1.28711 9.12498 1.46644 9.12498 1.68311C9.12498 1.89977 9.04997 2.07877 8.89997 2.22011C8.74998 2.36211 8.57498 2.43311 8.37498 2.43311H2.39998C2.33331 2.43311 2.26664 2.46644 2.19998 2.53311C2.13331 2.59977 2.09998 2.66644 2.09998 2.73311V16.6331C2.09998 16.6998 2.13331 16.7664 2.19998 16.8331C2.26664 16.8998 2.33331 16.9331 2.39998 16.9331H8.37498C8.57498 16.9331 8.74998 17.0038 8.89997 17.1451C9.04997 17.2871 9.12498 17.4664 9.12498 17.6831C9.12498 17.8998 9.04997 18.0791 8.89997 18.2211C8.74998 18.3624 8.57498 18.4331 8.37498 18.4331H2.39998Z" fill="#4C4E64" fillOpacity="0.87"/>
+  </svg>
+);
+
+export default LogoutIcon;
+/* tslint:enable */

package/source/components/_common/IconSVG/SVG/common/MyVehiclesIcon.tsx

@@ -0,0 +1,20 @@
+/* tslint:disable */
+import * as React from 'react';
+
+const MyVehiclesIcon = (
+  props: any
+) => (
+  <svg
+    width="18"
+    height="16"
+    viewBox="0 0 18 16"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    { ...props }
+  >
+    <path d="M2.625 13.9331V14.9081C2.625 15.1914 2.525 15.4331 2.325 15.6331C2.125 15.8331 1.86667 15.9331 1.55 15.9331C1.26667 15.9331 1.02067 15.8291 0.812 15.6211C0.604 15.4124 0.5 15.1664 0.5 14.8831V7.50811L2.55 1.68311C2.61667 1.44977 2.75 1.26644 2.95 1.13311C3.15 0.999772 3.375 0.933105 3.625 0.933105H14.425C14.6583 0.933105 14.8707 1.00411 15.062 1.14611C15.254 1.28744 15.3833 1.46644 15.45 1.68311L17.5 7.50811V14.9081C17.5 15.1914 17.4 15.4331 17.2 15.6331C17 15.8331 16.75 15.9331 16.45 15.9331C16.15 15.9331 15.896 15.8291 15.688 15.6211C15.4793 15.4124 15.375 15.1664 15.375 14.8831V13.9331H2.625ZM2.6 6.00811H15.4L14.125 2.43311H3.875L2.6 6.00811ZM4.475 11.2831C4.825 11.2831 5.129 11.1538 5.387 10.8951C5.64567 10.6371 5.775 10.3248 5.775 9.95811C5.775 9.6081 5.64567 9.30411 5.387 9.04611C5.129 8.78744 4.81667 8.65811 4.45 8.65811C4.1 8.65811 3.796 8.78744 3.538 9.04611C3.27933 9.30411 3.15 9.61644 3.15 9.98311C3.15 10.3331 3.27933 10.6371 3.538 10.8951C3.796 11.1538 4.10833 11.2831 4.475 11.2831ZM13.55 11.2831C13.9 11.2831 14.204 11.1538 14.462 10.8951C14.7207 10.6371 14.85 10.3248 14.85 9.95811C14.85 9.6081 14.7207 9.30411 14.462 9.04611C14.204 8.78744 13.8917 8.65811 13.525 8.65811C13.175 8.65811 12.871 8.78744 12.613 9.04611C12.3543 9.30411 12.225 9.61644 12.225 9.98311C12.225 10.3331 12.3543 10.6371 12.613 10.8951C12.871 11.1538 13.1833 11.2831 13.55 11.2831ZM2 12.4331H16V7.50811H2V12.4331Z" fill="#4C4E64" fillOpacity="0.87"/>
+  </svg>
+);
+
+export default MyVehiclesIcon;
+/* tslint:enable */

package/source/components/_common/IconSVG/SVG/common/SavedSearchsIcon.tsx

@@ -0,0 +1,20 @@
+/* tslint:disable */
+import * as React from 'react';
+
+const SavedSearchsIcon = (
+  props: any
+) => (
+  <svg
+    width="18"
+    height="21"
+    viewBox="0 0 18 21"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    { ...props }
+  >
+    <path d="M16.5 17.6831C16.2833 17.6831 16.104 17.6124 15.962 17.4711C15.8207 17.3291 15.75 17.1498 15.75 16.9331V2.23311C15.75 2.16644 15.7167 2.09977 15.65 2.03311C15.5833 1.96644 15.5167 1.93311 15.45 1.93311H4.5C4.28333 1.93311 4.10433 1.86211 3.963 1.72011C3.821 1.57877 3.75 1.39977 3.75 1.18311C3.75 0.966439 3.821 0.787105 3.963 0.645105C4.10433 0.503772 4.28333 0.433105 4.5 0.433105H15.45C15.95 0.433105 16.375 0.608106 16.725 0.958106C17.075 1.30811 17.25 1.73311 17.25 2.23311V16.9331C17.25 17.1498 17.1793 17.3291 17.038 17.4711C16.896 17.6124 16.7167 17.6831 16.5 17.6831ZM2.25 18.3831L7.25 16.2331L12.25 18.3831V5.73311C12.25 5.66644 12.2167 5.59977 12.15 5.53311C12.0833 5.46644 12.0167 5.43311 11.95 5.43311H2.55C2.48333 5.43311 2.41667 5.46644 2.35 5.53311C2.28333 5.59977 2.25 5.66644 2.25 5.73311V18.3831ZM2.025 20.1331C1.725 20.2664 1.43733 20.2414 1.162 20.0581C0.887334 19.8748 0.75 19.6248 0.75 19.3081V5.73311C0.75 5.23311 0.925 4.80811 1.275 4.45811C1.625 4.10811 2.05 3.93311 2.55 3.93311H11.95C12.45 3.93311 12.875 4.10811 13.225 4.45811C13.575 4.80811 13.75 5.23311 13.75 5.73311V19.3081C13.75 19.6248 13.6123 19.8748 13.337 20.0581C13.0623 20.2414 12.775 20.2664 12.475 20.1331L7.25 17.8831L2.025 20.1331Z" fill="#4C4E64" fillOpacity="0.87"/>
+  </svg>
+);
+
+export default SavedSearchsIcon;
+/* tslint:enable */

package/source/components/_common/IconSVG/SVG/common/SupportCallbackIcon.tsx

@@ -0,0 +1,20 @@
+/* tslint:disable */
+import * as React from 'react';
+
+const SupportCallbackIcon = (
+  props: any
+) => (
+  <svg
+    width="20"
+    height="20"
+    viewBox="0 0 20 20"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    { ...props }
+  >
+    <path d="M10 16.0581C10.2833 16.0581 10.521 15.9581 10.713 15.7581C10.9043 15.5581 11 15.3164 11 15.0331C11 14.7498 10.9043 14.5081 10.713 14.3081C10.521 14.1081 10.2833 14.0081 10 14.0081C9.7 14.0081 9.45433 14.1081 9.263 14.3081C9.071 14.5081 8.975 14.7498 8.975 15.0331C8.975 15.3164 9.071 15.5581 9.263 15.7581C9.45433 15.9581 9.7 16.0581 10 16.0581ZM10.075 6.15811C10.5917 6.15811 11.004 6.29544 11.312 6.57011C11.6207 6.84544 11.775 7.21644 11.775 7.68311C11.775 7.98311 11.6873 8.27877 11.512 8.57011C11.3373 8.86211 11.075 9.16644 10.725 9.48311C10.2417 9.89977 9.89167 10.2954 9.675 10.6701C9.45833 11.0454 9.34167 11.4331 9.325 11.8331C9.30833 11.9998 9.36667 12.1454 9.5 12.2701C9.63333 12.3954 9.79167 12.4581 9.975 12.4581C10.1583 12.4581 10.321 12.3954 10.463 12.2701C10.6043 12.1454 10.6917 11.9914 10.725 11.8081C10.775 11.5248 10.8833 11.2621 11.05 11.0201C11.2167 10.7788 11.4833 10.4748 11.85 10.1081C12.3667 9.62477 12.725 9.19144 12.925 8.80811C13.125 8.42477 13.225 8.00811 13.225 7.55811C13.225 6.75811 12.9333 6.10377 12.35 5.59511C11.7667 5.08711 11.0167 4.83311 10.1 4.83311C9.48333 4.83311 8.91667 4.96211 8.4 5.22011C7.88333 5.47877 7.475 5.86644 7.175 6.38311C7.09167 6.54977 7.06267 6.71244 7.088 6.87111C7.11267 7.02911 7.20833 7.15811 7.375 7.25811C7.525 7.35811 7.70433 7.39144 7.913 7.35811C8.121 7.32477 8.29167 7.21644 8.425 7.03311C8.625 6.76644 8.85433 6.55377 9.113 6.39511C9.371 6.23711 9.69167 6.15811 10.075 6.15811ZM10 19.9331C8.68333 19.9331 7.45 19.6831 6.3 19.1831C5.15 18.6831 4.14567 18.0081 3.287 17.1581C2.429 16.3081 1.75 15.3038 1.25 14.1451C0.75 12.9871 0.5 11.7498 0.5 10.4331C0.5 9.11644 0.75 7.87877 1.25 6.72011C1.75 5.56211 2.429 4.55811 3.287 3.70811C4.14567 2.85811 5.15 2.18311 6.3 1.68311C7.45 1.18311 8.68333 0.933105 10 0.933105C11.3333 0.933105 12.575 1.18311 13.725 1.68311C14.875 2.18311 15.8793 2.85811 16.738 3.70811C17.596 4.55811 18.271 5.56211 18.763 6.72011C19.2543 7.87877 19.5 9.11644 19.5 10.4331C19.5 11.7498 19.2543 12.9871 18.763 14.1451C18.271 15.3038 17.596 16.3081 16.738 17.1581C15.8793 18.0081 14.875 18.6831 13.725 19.1831C12.575 19.6831 11.3333 19.9331 10 19.9331ZM10 18.4331C12.2333 18.4331 14.125 17.6541 15.675 16.0961C17.225 14.5374 18 12.6498 18 10.4331C18 8.21644 17.225 6.32877 15.675 4.77011C14.125 3.21211 12.2333 2.43311 10 2.43311C7.8 2.43311 5.91667 3.21211 4.35 4.77011C2.78333 6.32877 2 8.21644 2 10.4331C2 12.6498 2.78333 14.5374 4.35 16.0961C5.91667 17.6541 7.8 18.4331 10 18.4331Z" fill="#4C4E64" fillOpacity="0.87"/>
+  </svg>
+);
+
+export default SupportCallbackIcon;
+/* tslint:enable */

package/source/components/_common/IconSVG/SVG/common/UserProfileIcon.tsx

@@ -0,0 +1,20 @@
+/* tslint:disable */
+import * as React from 'react';
+
+const UserProfileIcon = (
+  props: any
+) => (
+  <svg
+    width="16"
+    height="15"
+    viewBox="0 0 16 15"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    { ...props }
+  >
+    <path d="M8 7.13306C7.03333 7.13306 6.20833 6.78706 5.525 6.09506C4.84167 5.40372 4.5 4.58306 4.5 3.63306C4.5 2.66639 4.84167 1.84139 5.525 1.15806C6.20833 0.474723 7.03333 0.133057 8 0.133057C8.96667 0.133057 9.79167 0.474723 10.475 1.15806C11.1583 1.84139 11.5 2.66639 11.5 3.63306C11.5 4.58306 11.1583 5.40372 10.475 6.09506C9.79167 6.78706 8.96667 7.13306 8 7.13306ZM0.5 14.7331V12.5081C0.5 12.0247 0.633333 11.5747 0.9 11.1581C1.16667 10.7414 1.525 10.4164 1.975 10.1831C2.95833 9.69972 3.95433 9.33706 4.963 9.09506C5.971 8.85372 6.98333 8.73306 8 8.73306C9.01667 8.73306 10.0293 8.85372 11.038 9.09506C12.046 9.33706 13.0417 9.69972 14.025 10.1831C14.475 10.4164 14.8333 10.7414 15.1 11.1581C15.3667 11.5747 15.5 12.0247 15.5 12.5081V14.7331H0.5ZM2 13.2331H14V12.5081C14 12.3081 13.9417 12.1247 13.825 11.9581C13.7083 11.7914 13.55 11.6497 13.35 11.5331C12.4833 11.1164 11.6043 10.7954 10.713 10.5701C9.821 10.3454 8.91667 10.2331 8 10.2331C7.08333 10.2331 6.179 10.3454 5.287 10.5701C4.39567 10.7954 3.51667 11.1164 2.65 11.5331C2.45 11.6497 2.29167 11.7914 2.175 11.9581C2.05833 12.1247 2 12.3081 2 12.5081V13.2331ZM8 5.63306C8.55 5.63306 9.021 5.43706 9.413 5.04506C9.80433 4.65372 10 4.18306 10 3.63306C10 3.08306 9.80433 2.61206 9.413 2.22006C9.021 1.82872 8.55 1.63306 8 1.63306C7.45 1.63306 6.97933 1.82872 6.588 2.22006C6.196 2.61206 6 3.08306 6 3.63306C6 4.18306 6.196 4.65372 6.588 5.04506C6.97933 5.43706 7.45 5.63306 8 5.63306Z" fill="#4C4E64" fillOpacity="0.87"/>
+  </svg>
+);
+
+export default UserProfileIcon;
+/* tslint:enable */

package/source/components/_common/IconSVG/SVG/settings/RemoveEye.tsx

@@ -14,4 +14,4 @@ const SvgRemoveEye = (props: any) => (
 );
 
 export default SvgRemoveEye;
-/* tslint:enable */
+/* tslint:enable */

package/source/components/_common/MaterialAccordion/MaterialAccordion.tsx

@@ -4,7 +4,7 @@ import IconSVG from '../IconSVG/IconSVG';
 import {
   ThemeProvider,
   createTheme,
-  experimental_sx as sx,
+  experimental_sx as sx
 } from '@mui/material/styles';
 
 export interface IItem {
@@ -22,14 +22,14 @@ export interface IAccordionProps {
 }
 
 declare module '@mui/material/AccordionSummary' {
-  interface AccordionSummaryPropsVariantOverrides {
+  interface IAccordionSummaryPropsVariantOverrides {
     searchDetailed: true;
     searchDetailedSmall: true;
   }
 }
 
 declare module '@mui/material/Accordion' {
-  interface AccordionPropsVariantOverrides {
+  interface IAccordionPropsVariantOverrides {
     searchDetailed: true;
     searchDetailedSmall: true;
   }
@@ -40,65 +40,65 @@ const MaterialAccordion = (
     defaultOpened,
     expandedDefault,
     items,
-    variant,
+    variant
   }: IAccordionProps) => {
 
-    const theme = createTheme({
-      components: {
-        MuiAccordion: {
-          variants: [
-            {
-              props: { variant: 'searchDetailed' },
-              style: {
-                margin: 0,
-                '&.Mui-expanded': {
-                  margin: 0
-                },
-                '&.MuiAccordion-root:before': {
-                  opacity: 0
-                }
-              }
-            },
-            {
-              props: { variant: 'searchDetailedSmall' },
-              style: {
-                margin: 0,
-                boxShadow: 'none',
-                '&.Mui-expanded': {
-                  margin: 0
-                },
-                '&.MuiAccordion-root:before': {
-                  opacity: 0
-                }
+  const theme = createTheme({
+    components: {
+      MuiAccordion: {
+        variants: [
+          {
+            props: { variant: 'searchDetailed' },
+            style: {
+              margin: 0,
+              '&.Mui-expanded': {
+                margin: 0
               },
+              '&.MuiAccordion-root:before': {
+                opacity: 0
+              }
             }
-          ]
-        },
-        MuiAccordionSummary: {
-          variants: [
-            {
-              props: { variant: 'searchDetailed' },
-              style: {
-                color: '#005ccb',
-                fontWeight: 'bold',
-                fontSize: 14,
-                '&.Mui-expanded': {
-                  borderBottom: '1px solid #e8e8e8'
-                }
-              },
-            },
-            {
-              props: { variant: 'searchDetailedSmall' },
-              style: {
-                color: '1f1f1f',
-                fontWeight: 'bold',
-                fontSize: 14
+          },
+          {
+            props: { variant: 'searchDetailedSmall' },
+            style: {
+              margin: 0,
+              boxShadow: 'none',
+              '&.Mui-expanded': {
+                margin: 0
               },
+              '&.MuiAccordion-root:before': {
+                opacity: 0
+              }
             }
-          ],
-        },
+          }
+        ]
       },
-    });
+      MuiAccordionSummary: {
+        variants: [
+          {
+            props: { variant: 'searchDetailed' },
+            style: {
+              color: '#005ccb',
+              fontWeight: 'bold',
+              fontSize: 14,
+              '&.Mui-expanded': {
+                borderBottom: '1px solid #e8e8e8'
+              }
+            }
+          },
+          {
+            props: { variant: 'searchDetailedSmall' },
+            style: {
+              color: '1f1f1f',
+              fontWeight: 'bold',
+              fontSize: 14
+            }
+          }
+        ]
+      }
+    }
+  });
 
   const renderItems = (): React.ReactNode => {
     const [expanded, setExpanded] = useState(expandedDefault || false);
@@ -144,6 +144,6 @@ const MaterialAccordion = (
       {renderItems()}
     </div>
   );
-}
+};
 
 export default MaterialAccordion;