@bytebrand/fe-ui-core 4.3.0 → 4.4.0

package/source/components/VehicleSmallCard/VehicleData/VehiclePrice/VehiclePrice.tsx

@@ -136,6 +136,7 @@ const VehiclePrice: React.FC<IVehiclePriceSectionProps> = (props: IVehiclePriceS
   const buttonClassNames = classnames(
     classButton,
     styles.buttonDetails,
+    { [styles.landingButton]: vehicleComponentName === 'landing' },
     { [styles.isAlternativeButton]: typeAlternative }
   );
 
@@ -183,7 +184,7 @@ const VehiclePrice: React.FC<IVehiclePriceSectionProps> = (props: IVehiclePriceS
     }
   ] : '';
 
-  const priceData = combineRefAlternative ? [
+  const priceData:any = combineRefAlternative ? [
     ...priceItemsGlobal,
     {
       isTotal: true,
@@ -195,7 +196,8 @@ const VehiclePrice: React.FC<IVehiclePriceSectionProps> = (props: IVehiclePriceS
     {
       isTotal: true,
       totalCurrent: margin ? margin : currentSalesPriceExtra,
-      title: t('vehicleProps:title.marge')
+      title: t('vehicleProps:title.marge'),
+      isMarge: true
     }
   ] : [
     ...priceItemsGlobal,
@@ -254,6 +256,7 @@ const VehiclePrice: React.FC<IVehiclePriceSectionProps> = (props: IVehiclePriceS
           routeObj={routeObj}
           vehicleComponentName={vehicleComponentName}
           combineRefAlternative={combineRefAlternative}
+          isMarge={props.isMarge}
         />
       ))}
       {vehicleComponentName === 'favorite' && showCompareCheckboxes && (
@@ -273,7 +276,10 @@ const VehiclePrice: React.FC<IVehiclePriceSectionProps> = (props: IVehiclePriceS
         </Button>
       ) : null}
       {showOfferBtn ? (
-        <Button variant={offerBtnVariantCondition} className={buttonClassNames} onClick={onDetailsClick}>{t('vehicleProps:title.toOffer')}</Button>
+        vehicleComponentName === 'landing' ? (
+          <button className={buttonClassNames} onClick={onDetailsClick}>{t('vehicleProps:title.toOffer')}</button>
+        ) :
+          <Button variant={offerBtnVariantCondition} className={buttonClassNames} onClick={onDetailsClick}>{t('vehicleProps:title.toOffer')}</Button>
       ) : ''}
     </section>
   );

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

@@ -28,6 +28,9 @@
     display block
     +media-tablet-landscape-up()
       display flex
+  &.wrapTitlesAlternative
+    +media-tablet-landscape-up()
+      flex-wrap: wrap
   &.wrapTitlesFavorite
     display: flex;
     +media-tablet-landscape-up()
@@ -57,7 +60,7 @@
 
   +media-tablet-landscape-up()
     margin: 0 0 -1px 3px
-    max-width: 100%;
+    overflow: hidden
 
 .optionTitle
   display: flex
@@ -72,6 +75,7 @@
     margin-top: 3px;
     +media-tablet-landscape-up()
       margin-left: 8px;
+      width: 100%
       margin-top: 0;
   &.optionTitleFavorite
     font-size: 12px;
@@ -83,7 +87,12 @@
     margin-left: 8px;
   &.optionTitleIsAlternative
     overflow: hidden;
-    max-width: 260px;
+    .subModel
+      margin: 5px 0 0 0
+      +media-tablet-landscape-up()
+        max-width: 260px;
+    +media-tablet-landscape-up()
+      margin-left: 0
 
 .sponsored
   font-weight: 700

package/source/components/VehicleSmallCard/VehicleData/VehicleTitle/VehicleTitle.tsx

@@ -33,7 +33,8 @@ const VehicleTitle: React.FC<IVehicleTitleProps> = ({
     styles.wrapTitles,
     { [styles.wrapTitlesFavorite]: vehicleComponentName === 'favorite' },
     { [styles.wrapTitlesRecently]: vehicleComponentName === 'recently' || vehicleComponentName === 'landing' || vehicleComponentName === 'main' },
-    { [styles.wrapTitlesSearch]: vehicleComponentName === 'search' || vehicleComponentName === 'myVehicles' }
+    { [styles.wrapTitlesSearch]: vehicleComponentName === 'search' || vehicleComponentName === 'myVehicles' },
+    { [styles.wrapTitlesAlternative]: combineRefAlternative }
   );
   const optionTitleClassName = classnames(
     styles.optionTitle,

package/source/components/VehicleSmallCard/VehicleSmallCard.styl

@@ -224,10 +224,12 @@
 
   & > div
     display flex
-    align-items: center
+    align-items: center;
+    gap: 4px;
 
     &:first-of-type
       color: $skyBlue;
+      line-height: 1;
 
 .isFirstReferenceCar
   border: 1px solid $skyBlue !important;

package/source/components/VehicleSmallCard/VehicleSmallCard.tsx

@@ -34,7 +34,6 @@ interface IVehicleSmallCardProps {
   language?: string;
   vehicleComponentName?: 'comparable' | 'landing' | 'search' | 'main' | 'myVehicles' | 'favorite' | 'recently';
   isTop?: boolean;
-  isDealer?: boolean;
   isDealerSuperAdmin?: boolean;
   isReferenceSearch?: boolean;
   dashboardButtonText?: string;
@@ -85,7 +84,6 @@ interface IVehicleSmallCardProps {
   isAlternative?: boolean;
   typeAlternative?: string;
   index?: number;
-  currentPage?: number;
 }
 
 const VehicleSmallCard: FunctionComponent<IVehicleSmallCardProps> = (props) => {
@@ -119,7 +117,6 @@ const VehicleSmallCard: FunctionComponent<IVehicleSmallCardProps> = (props) => {
     priceSubMtl,
     onContainerClick,
     onAddOfferToMainSlideClick,
-    isDealer,
     isDealerSuperAdmin,
     mainImageId,
     onFavoriteClick,
@@ -145,8 +142,7 @@ const VehicleSmallCard: FunctionComponent<IVehicleSmallCardProps> = (props) => {
     minimizeData = false,
     isAlternative = false,
     typeAlternative,
-    index,
-    currentPage
+    index
   } = props;
 
   const combineRefAlternative = isAlternative || isReferenceSearch;
@@ -167,7 +163,7 @@ const VehicleSmallCard: FunctionComponent<IVehicleSmallCardProps> = (props) => {
     { [styles.vehicleWrapRecently]: vehicleComponentName === 'recently' },
     { [styles.topVehicle]: isTop },
     { [styles.disableBorder]: minimizeData },
-    { [styles.isFirstReferenceCar]: isReferenceSearch && index === 0 && currentPage === 1 },
+    { [styles.isFirstReferenceCar]: isReferenceSearch && index === 0 },
     className
   );
 
@@ -295,7 +291,7 @@ const VehicleSmallCard: FunctionComponent<IVehicleSmallCardProps> = (props) => {
                   {showComponentLikeSlider ? (
                     <>
                       <DecoratedSliderForSRL {...decoratedSliderProps} />
-                      {renderIDInfo && isDealer ? renderIDInfo() : null}
+                      {renderIDInfo ? renderIDInfo() : null}
                       {combineRefAlternative && (
                         <div className={styles.wrapAlternativeData}>
                           <div>

package/source/components/_common/Badge/Badge.styl

@@ -35,6 +35,9 @@ $badge-border-width = 1px
 .blue
   background-color: $primary
   color: white
+.lightBlue
+  background-color: #26C6F9
+  color: white 
 
 .red
   color: #fff;

package/source/components/_common/Badge/Badge.tsx

@@ -3,7 +3,7 @@ import classnames from 'classnames';
 
 import styles from './Badge.styl';
 
-export type TBadgeType = 'white' | 'gray' | 'green' | 'blue' | 'red';
+export type TBadgeType = 'white' | 'gray' | 'green' | 'blue' | 'red' | 'lightBlue';
 
 export interface IBadgeProps {
   children: any;

package/source/components/_common/Button/Button.tsx

@@ -15,6 +15,7 @@ export interface IButtonProps {
   color?: variantColor;
   children?: any;
   variant?: variantType;
+  getRef?: (ref: HTMLButtonElement) => void;
 
   disabled?: boolean;
   loading?: boolean;
@@ -25,8 +26,7 @@ export interface IButtonProps {
   onMouseLeave?: (event: React.MouseEvent<HTMLButtonElement>) => void;
 }
 
-const Button: React.FC<IButtonProps> = ({ className, color = 'primary', onClick, onMouseEnter, onMouseLeave, variant, loading, disabled, children  }: IButtonProps) => {
-
+const Button: React.FC<IButtonProps> = ({ getRef, className, color, onClick, onMouseEnter, onMouseLeave, variant, loading, disabled, children  }: IButtonProps) => {
   const onHandlerClick = (event: React.MouseEvent<HTMLButtonElement>) => {
     event.stopPropagation();
     event.nativeEvent.stopImmediatePropagation();
@@ -53,6 +53,7 @@ const Button: React.FC<IButtonProps> = ({ className, color = 'primary', onClick,
     onClick: onHandlerClick,
     onMouseEnter: onHandlerMouseEnter,
     onMouseLeave: onHandlerMouseLeave,
+    ref:getRef,
     disabled: disabled || loading
   };
 
@@ -63,14 +64,14 @@ const Button: React.FC<IButtonProps> = ({ className, color = 'primary', onClick,
 
 Button.defaultProps = {
   className: '',
-
+  color: 'primary',
   disabled: false,
   loading: false,
   variant: 'contained',
   buttonType: 'button',
 
   onClick: () => { },
-
+  getRef: () => { },
   onMouseEnter: () => { },
   onMouseLeave: () => { }
 };

package/source/components/_common/Checkbox/FormCheckbox.tsx

@@ -21,7 +21,7 @@ interface IFormCheckboxState {
     checked?: boolean;
     error?: boolean;
     disabled?: boolean
-  }
+  };
 }
 
 class FormCheckbox extends React.Component<IFormCheckboxProps, IFormCheckboxState> {
@@ -68,11 +68,11 @@ class FormCheckbox extends React.Component<IFormCheckboxProps, IFormCheckboxStat
       checked,
       name,
       disabled,
-      onChange: this.handleChange,
-      error: customError,
       label,
       checkboxClassName,
-      labelClassName
+      labelClassName,
+      onChange: this.handleChange,
+      error: customError
     };
 
     return (

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

@@ -26,7 +26,7 @@ export interface ICheckboxProps {
   checkedIcon?: any;
   className?: string;
   type?: string;
-  content?: string;
+  content?: string | JSX.Element;
   radio?: boolean;
   formControlClassName?: string;
   contentType?: string;

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

@@ -7,13 +7,12 @@ export interface IChip {
 }
 
 export interface IChipProps {
-  className?: string;
   chip: IChip;
   onClick?: (event: React.MouseEvent, chip: IChip) => void;
   onDelete?: (event: React.MouseEvent, chip: IChip) => void;
 }
 
-const ChipLanding: React.FunctionComponent<IChipProps> = ({ chip, className, onClick, onDelete }) => {
+const ChipLanding: React.FunctionComponent<IChipProps> = ({ chip, onClick, onDelete }) => {
   const { key, value } = chip;
   const onDeleteHandler = (event: any) => { event.stopPropagation(); onDelete(event, chip); };
   const onClickHandler = (event: any) => { event.stopPropagation(); onClick(event, chip); };
@@ -31,7 +30,6 @@ const ChipLanding: React.FunctionComponent<IChipProps> = ({ chip, className, onC
 };
 
 ChipLanding.defaultProps = {
-  className: '',
   chip: { key: '', value: '' },
   onClick: () => {},
   onDelete: () => {}

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

@@ -8,10 +8,10 @@ import { ThemeProvider } from '@mui/material/styles';
 import { Theme } from './ExpansionPanel.styled';
 
 export interface IExpansionPanelProps {
-  title?: string | JSX.Element;
+  title?: string;
   subTitle?: string;
   defaultExpanded?: boolean;
-  onChange?: (panel: string) => (event: React.SyntheticEvent, isExpanded: boolean) => void;
+  onChange?: any; // TODO: understand how this onchange works and where it is used and write the correct types
   className?: string;
   children?: any;
   reactScrollName?: string; // property "name" for "Element" component of "react-scroll" library
@@ -71,7 +71,7 @@ class ExpansionPanel extends React.Component<IExpansionPanelProps> {
           <Accordion
             defaultExpanded={defaultExpanded}
             onChange={isCompare ? onChange : onChange && onChange(reactScrollName)}
-            expanded={isCompare ? expanded : expanded && (expanded === reactScrollName)}
+            expanded={(isCompare && typeof expanded === 'boolean') ? expanded : expanded && (expanded === reactScrollName)}
             className={accordionClassName}
           >
             <AccordionSummary

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

@@ -236,6 +236,7 @@ import Easy from './SVG/slider/Easy';
 import Safe from './SVG/slider/Safe';
 import ZoomIn from './SVG/slider/ZoomIn';
 import ZoomOut from './SVG/slider/ZoomOut';
+import YoutubeButton from './SVG/slider/YoutubeButton'
 
 // social
 import SharingInterface from './SVG/social/SharingInterface';
@@ -547,6 +548,7 @@ const components: IComponentsProp = {
   safe: Safe,
   zoomIn: ZoomIn,
   zoomOut: ZoomOut,
+  youtubeButton:YoutubeButton,
 
   // social
   sharingInterface: SharingInterface,

package/source/components/_common/IconSVG/SVG/flags/SK.tsx

@@ -1,5 +1,4 @@
 /* tslint:disable */
-import { fill } from "lodash";
 import * as React from "react";
 
 const SK = (props: any) => (

package/source/components/_common/IconSVG/SVG/slider/360New.tsx

@@ -10,7 +10,7 @@ const Svg360New = (props: any) => (
   >
     <path fillRule="evenodd" clipRule="evenodd" d="M19.2731 12.0024C19.2854 11.774 19.2917 11.5352 19.2917 11.2855C19.2917 11.1381 19.2896 10.9914 19.2854 10.8455C20.9575 11.7695 21.9814 13.0117 21.9814 14.3777C21.9814 16.8116 18.7309 18.8525 14.3546 19.4004V18.3921C16.0124 18.1721 17.47 17.7275 18.5982 17.1434C20.2857 16.2698 20.9814 15.24 20.9814 14.3777C20.9814 13.6409 20.4735 12.7818 19.2731 12.0024ZM8.73484 18.2452V16.9993C8.73484 16.8454 8.90151 16.7491 9.03484 16.8261L12.3089 18.7164C12.4422 18.7934 12.4422 18.9858 12.3089 19.0628L9.03484 20.9531C8.90151 21.03 8.73484 20.9338 8.73484 20.7799V19.2622C4.82573 18.562 2.01855 16.6395 2.01855 14.3777C2.01855 13.0115 3.04264 11.7692 4.71506 10.8452C4.71086 10.9912 4.70874 11.138 4.70874 11.2855C4.70874 11.5353 4.71462 11.7743 4.72619 12.0028C3.52623 12.7822 3.01855 13.641 3.01855 14.3777C3.01855 15.24 3.71425 16.2698 5.40178 17.1434C6.31839 17.618 7.45254 18.0005 8.73484 18.2452Z" fill="#636578"/>
     <path fillRule="evenodd" clipRule="evenodd" d="M12.5852 4.01221H11.371H8.76601C8.17317 4.01221 7.93534 4.05632 7.82485 4.10914L7.82398 4.10955C7.78226 4.12949 7.739 4.15017 7.66339 4.36463L6.90141 7.76114L6.89787 7.77689L6.89333 7.79238C6.36163 9.60562 6.44052 12.1325 6.61804 13.7916C6.65081 14.0978 6.91756 14.3404 7.25825 14.3404H7.51156C7.75013 14.3404 7.94353 14.147 7.94353 13.9084C7.94353 13.5663 8.22089 13.289 8.56302 13.289L11.3769 13.289L12.6228 13.289C12.6231 13.289 12.6234 13.289 12.6238 13.289H13.9287H15.3304C15.6726 13.289 15.9499 13.5663 15.9499 13.9084C15.9499 14.147 16.1433 14.3404 16.3819 14.3404H16.6927C17.0621 14.3404 17.3517 14.0778 17.3866 13.7448C17.5607 12.0842 17.633 9.5881 17.1064 7.79238L17.1018 7.77689L17.0983 7.76114L16.3363 4.36463C16.2607 4.15017 16.2175 4.12949 16.1757 4.10955L16.1749 4.10914C16.0644 4.05632 15.8265 4.01221 15.2337 4.01221H12.5852ZM12.6228 14.289L13.9287 14.289H15.001C15.1677 14.8951 15.7228 15.3404 16.3819 15.3404H16.6927C17.539 15.3404 18.2893 14.7252 18.3812 13.8491C18.5576 12.1668 18.6497 9.51711 18.0706 7.52675L17.3059 4.11822L17.3 4.09191L17.2913 4.06638C17.1801 3.7402 17.0155 3.40262 16.6062 3.20696C16.2639 3.04331 15.8059 3.01221 15.2337 3.01221H12.5852H11.371H8.76601C8.19381 3.01221 7.73577 3.04331 7.3935 3.20696C6.98426 3.40262 6.81959 3.7402 6.70842 4.06638L6.69972 4.09191L6.69381 4.11822L5.92913 7.52675C5.3446 9.5359 5.44389 12.2173 5.62372 13.898C5.71431 14.7446 6.43952 15.3404 7.25825 15.3404H7.51156C8.17066 15.3404 8.72577 14.8951 8.89243 14.289H11.3759C11.3763 14.289 11.3766 14.289 11.3769 14.289L12.6228 14.289Z" fill="#636578"/>
-    <path d="M17.5619 7.56836V7.56836C13.9305 8.65377 10.0509 8.65178 6.41895 7.56836V7.56836" stroke="#636578" stroke-linecap="round"/>
+    <path d="M17.5619 7.56836V7.56836C13.9305 8.65377 10.0509 8.65178 6.41895 7.56836V7.56836" stroke="#636578" strokeLinecap="round"/>
     <circle cx="8.15374" cy="10.3359" r="0.768972" fill="#636578"/>
     <circle cx="15.8442" cy="10.4555" r="0.768972" fill="#636578"/>
   </svg>

package/source/components/_common/IconSVG/SVG/slider/YoutubeButton.tsx

@@ -0,0 +1,26 @@
+/* tslint:disable */
+import * as React from 'react';
+
+const SvgYoutubeButton = (props: any) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg" 
+    width="146" 
+    height="103" 
+    viewBox="0 0 146 103" 
+    fill="none"
+    {...props}
+  >
+    <g clipPath="url(#clip0_13856_24182)">
+      <path d="M142.741 16.6087C141.067 10.3215 137.398 4.99979 131.11 3.32604C119.716 0.278958 72.9583 0 72.9583 0C72.9583 0 26.2006 0.278958 14.8063 3.32604C8.51896 4.99979 4.87104 10.3215 3.17583 16.6087C0.12875 28.0031 0 51.5 0 51.5C0 51.5 0.12875 74.9969 3.17583 86.3912C4.84958 92.6785 8.51896 98.0002 14.8063 99.674C26.2006 102.721 72.9583 103 72.9583 103C72.9583 103 119.716 102.721 131.11 99.674C137.398 98.0002 141.067 92.6785 142.741 86.3912C145.788 74.9969 145.917 51.5 145.917 51.5C145.917 51.5 145.788 28.0031 142.741 16.6087Z" fill="#FF0000" />
+      <path d="M96.5625 51.5003L57.9375 30.042V72.9587" fill="white" />
+    </g>
+    <defs>
+      <clipPath id="clip0_13856_24182">
+        <rect width="145.917" height="103" fill="white" />
+      </clipPath>
+    </defs>
+  </svg>
+);
+
+export default SvgYoutubeButton;
+/* tslint:enable */

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

@@ -3,8 +3,7 @@ import { Accordion, AccordionSummary, AccordionDetails } from '@mui/material';
 import IconSVG from '../IconSVG/IconSVG';
 import {
   ThemeProvider,
-  createTheme,
-  experimental_sx as sx
+  createTheme
 } from '@mui/material/styles';
 
 export interface IItem {
@@ -18,7 +17,9 @@ export interface IAccordionProps {
 
   defaultOpened?: number;
 
-  variant?: string;
+  variant?: any;
+
+  expandedDefault?: string;
 }
 
 declare module '@mui/material/AccordionSummary' {
@@ -46,10 +47,9 @@ const MaterialAccordion = (
   const theme = createTheme({
     components: {
       MuiAccordion: {
-        variants: [
-          {
-            props: { variant: 'searchDetailed' },
-            style: {
+        styleOverrides: {
+          root: () => ({
+            ...(variant === 'searchDetailed' && {
               margin: 0,
               '&.Mui-expanded': {
                 margin: 0
@@ -57,11 +57,8 @@ const MaterialAccordion = (
               '&.MuiAccordion-root:before': {
                 opacity: 0
               }
-            }
-          },
-          {
-            props: { variant: 'searchDetailedSmall' },
-            style: {
+            }),
+            ...(variant === 'searchDetailedSmall' && {
               margin: 0,
               boxShadow: 'none',
               '&.Mui-expanded': {
@@ -70,32 +67,28 @@ const MaterialAccordion = (
               '&.MuiAccordion-root:before': {
                 opacity: 0
               }
-            }
-          }
-        ]
+            })
+          })
+        }
       },
       MuiAccordionSummary: {
-        variants: [
-          {
-            props: { variant: 'searchDetailed' },
-            style: {
+        styleOverrides: {
+          root: () => ({
+            ...(variant === 'searchDetailed' && {
               color: '#005ccb',
               fontWeight: 'bold',
               fontSize: 14,
               '&.Mui-expanded': {
                 borderBottom: '1px solid #e8e8e8'
               }
-            }
-          },
-          {
-            props: { variant: 'searchDetailedSmall' },
-            style: {
+            }),
+            ...(variant === 'searchDetailedSmall' && {
               color: '1f1f1f',
               fontWeight: 'bold',
               fontSize: 14
-            }
-          }
-        ]
+            })
+          })
+        }
       }
     }
   });
@@ -104,10 +97,10 @@ const MaterialAccordion = (
     const [expanded, setExpanded] = useState(expandedDefault || false);
 
     const handleChange =
-      (panel: string) => (event: React.SyntheticEvent, isExpanded: boolean) => {
+      (panel: string) => (_: React.SyntheticEvent, isExpanded: boolean) => {
         setExpanded(isExpanded ? panel : false);
       };
-    return items.map((item: any, index: number) => {
+    return items.map((item: { title: string, content: any }, index: number) => {
       return (
         <ThemeProvider theme={theme}>
           <Accordion
@@ -120,7 +113,6 @@ const MaterialAccordion = (
               expandIcon={<IconSVG name={'arrowSelect'} customDimensions />}
               aria-controls={item.title}
               id={item.title}
-              variant={variant}
               sx={{
                 borderBottom: '1px solid #e8e8e8',
                 borderImageWidth: 0

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

@@ -21,7 +21,7 @@ export const Theme = createTheme({
           },
           ['&.Mui-focused + [data-popper-placement*="bottom"] .MuiOutlinedInput-notchedOutline']: {
             ...(ownerState.name === 'mobileSearch' && { // tslint:disable-line
-              borderTop: isMobileOnly ? '2px solid #1976d2' : 0
+              borderTop: isMobileOnly ? '2px solid #005CCB' : 0
             })
           },
           ['&.Mui-focused .MuiInputLabel-root']: {
@@ -38,9 +38,9 @@ export const Theme = createTheme({
           ['&.Mui-focused + [data-popper-placement*="top"] > .MuiPaper-root']: {
             borderBottomLeftRadius: 0,
             borderBottomRightRadius: 0,
-            borderLeft: '2px solid #1976d2',
-            borderRight: '2px solid #1976d2',
-            borderTop: '2px solid #1976d2',
+            borderLeft: '2px solid #005CCB',
+            borderRight: '2px solid #005CCB',
+            borderTop: '2px solid #005CCB',
             ...(ownerState.error && { // tslint:disable-line
               borderColor: '#d32f2f'
             })
@@ -48,15 +48,15 @@ export const Theme = createTheme({
           ['&.Mui-focused + [data-popper-placement*="bottom"] > .MuiPaper-root']: {
             borderTopLeftRadius: 0,
             borderTopRightRadius: 0,
-            borderLeft: '2px solid #1976d2',
-            borderRight: '2px solid #1976d2',
-            borderBottom: '2px solid #1976d2',
+            borderLeft: '2px solid #005CCB',
+            borderRight: '2px solid #005CCB',
+            borderBottom: '2px solid #005CCB',
             ...(ownerState.error && { // tslint:disable-line
               borderColor: '#d32f2f'
             }),
             marginTop: '-3px',
             ...(ownerState.name === 'mobileSearch' && { // tslint:disable-line
-              borderTop: isMobileOnly ? '2px solid #1976d2' : 0,
+              borderTop: isMobileOnly ? '2px solid #005CCB' : 0,
               marginTop: 0,
               borderTopRightRadius: 4,
               borderTopLeftRadius: 4

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

@@ -6,7 +6,6 @@ export const Theme = createTheme({
       styleOverrides: {
         input: ({ ownerState: { size } }: { ownerState: { size?: 'smaller' | 'custom' | 'normal' | 'small' | 'medium' } }) => ({
           ...(size === 'smaller' && {
-            // tslint:disable-line
             height: 28,
             boxSizing: 'border-box'
           }),

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

@@ -1,6 +1,6 @@
 import { createTheme } from '@mui/material/styles';
 import { IconButton } from '@mui/material';
-import { padding, styled } from '@mui/system';
+import { styled } from '@mui/system';
 import IconSVG from '../IconSVG/IconSVG';
 import { isMobileOnly } from 'react-device-detect';
 
@@ -15,9 +15,9 @@ export const Theme = createTheme({
     },
     MuiInputLabel: {
       styleOverrides: {
-        root: ({ ownerState }) => ({
+        root: ({ ownerState: { size } }: { ownerState: { size?: 'smaller' | 'custom' | 'normal' | 'small' | 'medium' } }) => ({
           maxWidth: 'calc(100% - 38px)',
-          ...(ownerState.size === 'custom' && { // tslint:disable-line
+          ...(size === 'custom' && {
             marginTop: isMobileOnly ? '0px' :'-4px',
             ['&.MuiInputLabel-shrink, &.Mui-focused']: {
               marginTop: 0
@@ -37,8 +37,8 @@ export const Theme = createTheme({
           borderTopLeftRadius: 0,
           borderTopRightRadius: 0,
           transformOrigin: '0 0 !important',
-          boxShadow: 'inset 2px 0px 0px 0px #1976d2, inset -2px 0px 0px 0px #1976d2',
-          borderBottom: '2px solid #1976d2',
+          boxShadow: 'inset 2px 0px 0px 0px #005CCB, inset -2px 0px 0px 0px #005CCB',
+          borderBottom: '2px solid #005CCB',
           ['& > .MuiList-root']: {
             paddingRight: '0 !important',
             width: '100% !important'
@@ -48,12 +48,12 @@ export const Theme = createTheme({
           },
           ['::-webkit-scrollbar-track']: {
             background: '#fff',
-            borderRight: '2px solid #1976d2',
+            borderRight: '2px solid #005CCB',
             boxShadow: 'inset -4px 0 0 0 #fff'
           },
           ['::-webkit-scrollbar-thumb']: {
             backgroundColor: '#e8e8e8',
-            borderRight: '2px solid #1976d2',
+            borderRight: '2px solid #005CCB',
             boxShadow: 'inset -4px 0 0 0 #fff'
           },
           ['::-webkit-scrollbar-thumb:hover']: {
@@ -64,22 +64,19 @@ export const Theme = createTheme({
     },
     MuiOutlinedInput: {
       styleOverrides: {
-        root: ({ ownerState }) => ({
-          ...(ownerState.size === 'small' && {
+        root: ({ ownerState: { size } }: { ownerState: { size?: 'smaller' | 'custom' | 'normal' | 'small' | 'medium' } }) => ({
+          ...(size === 'small' && {
             paddingRight: '0 !important',
-            flexWrap: 'nowrap !important',
-            ['.Mui-disabled']: {
-              // backgroundColor: '#e8e8e8'
-            }
+            flexWrap: 'nowrap !important'
           }),
-          ...(ownerState.size === 'custom' && {
+          ...(size === 'custom' && {
             height: isMobileOnly ? 56 : 48,
             boxSizing: 'border-box'
           }),
           ['&.Mui-disabled svg']: {
             opacity:'0.38'
           }
-        })
+        } as any)
       }
     },
     MuiListItemText: {

package/source/components/_common/MaterialSelect/MaterialSelect.tsx

@@ -9,7 +9,7 @@ import { isMobileOnly } from 'react-device-detect';
 
 export interface IItems {
   value: string | number;
-  label: string;
+  label: string | JSX.Element;
   isDisabled?: boolean;
   isSeries?: boolean;
 }
@@ -32,7 +32,7 @@ export interface IVehicleModalProps {
   icon?: string;
   children?: JSX.Element | JSX.Element[];
   onChange: (value: any) => void;
-  items: IItems[];
+  items?: IItems[];
   selectClassName?: string;
   amountOfItems?: number;
   customDimensionsIcon?: boolean;
@@ -99,7 +99,7 @@ const MaterialSelect: React.FC<IVehicleModalProps> = ({
     onChange('' as string);
   };
 
-  const getLabel = (label: string, disabled: boolean) => disabled ? <span>{label.toUpperCase()}</span> : label;
+  const getLabel = (label: string | JSX.Element, disabled: boolean) => disabled ? <span>{(label as string).toUpperCase()}</span> : label;
 
   const IconClassNames = classnames(
     classNameIcon

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

@@ -7,10 +7,11 @@ interface IMaterialSwitch {
   disabled?: boolean;
   onChange: (value: boolean) => void;
   label?: any;
+  sx?: any;
   labelPlacement?: 'bottom' | 'end' | 'start' | 'top';
 }
 
-const MaterialSwitch = ({ disabled, label, onChange, value = false, labelPlacement }: IMaterialSwitch) => {
+const MaterialSwitch = ({ disabled, label, onChange, value = false, sx, labelPlacement }: IMaterialSwitch) => {
   const [checked, setChecked] = useState(value);
   const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
     setChecked(event.target.checked);
@@ -19,6 +20,7 @@ const MaterialSwitch = ({ disabled, label, onChange, value = false, labelPlaceme
   return (
     <FormControlLabel
       label={label}
+      sx={sx}
       labelPlacement={labelPlacement}
       control={
         <Switch