@groupeactual/ui-kit 1.6.7-beta.0 → 1.7.0-beta.0

package/dist/es/{types → src}/components/Form/AutoCompleteMulti/AutoCompleteMulti.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import { type AutocompleteProps } from '@mui/material';
-interface AutocompleteMultipleSelectProps<T> extends Omit<AutocompleteProps<T, true, true, false>, 'onChange' | 'value' | 'options' | 'renderInput' | 'error'> {
+interface AutocompleteMultipleSelectProps<T> extends Omit<AutocompleteProps<T, true, true, false>, 'onChange' | 'value' | 'options' | 'renderInput' | 'error' | 'autocomplete'> {
     value: T[] | undefined;
     label?: string;
     helperText?: string;

package/dist/{cjs/types → es/src}/components/Form/AutoCompleteSingle/AutoCompleteSingle.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import { type AutocompleteProps } from '@mui/material';
-interface Props<T> extends Omit<AutocompleteProps<T, false, false, false>, 'onChange' | 'value' | 'options' | 'renderInput' | 'error' | 'getOptionLabel'> {
+interface Props<T> extends Omit<AutocompleteProps<T, false, false, false>, 'onChange' | 'value' | 'options' | 'renderInput' | 'error' | 'getOptionLabel' | 'autocomplete'> {
     label: string;
     options: T[];
     helperText?: string;

package/dist/{cjs/types → es/src}/components/Form/Select/Select.d.ts

@@ -1,22 +1,24 @@
 import React, { BaseSyntheticEvent } from 'react';
+import { IconDefinition } from '@fortawesome/fontawesome-svg-core';
 import { SelectProps } from '@mui/material';
 interface Props<T> extends Omit<SelectProps<T>, 'value' | 'onChange' | 'color' | 'error'> {
     options: T[];
     placeholder?: string;
     disabled?: boolean;
-    label: string;
+    label?: string;
     helperText?: string;
     color?: 'success';
     value: T | undefined;
     width?: number | string;
     error?: string;
     className?: string;
+    popupIcon?: IconDefinition;
     getRenderValue: (option: T) => string;
     onChange: (value: T) => void;
     onBlur?: (event: BaseSyntheticEvent) => void;
 }
 declare const Select: {
-    <T>({ value, label, options, color, error, placeholder, helperText, width, disabled, onChange, getRenderValue, ...props }: Props<T>): React.JSX.Element;
+    <T>({ value, label, options, color, error, placeholder, helperText, width, disabled, popupIcon, onChange, getRenderValue, ...props }: Props<T>): React.JSX.Element;
     displayName: string;
 };
 export default Select;

package/dist/{cjs/types → es/src}/components/IconButton/IconButton.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 import { IconDefinition } from '@fortawesome/fontawesome-svg-core';
 import { IconButtonProps, SxProps, Theme } from '@mui/material';
-import { Placement } from '../Tooltip/tooltip.interface';
+import { Placement } from '@/components/Tooltip/tooltip.interface';
 interface Props extends IconButtonProps {
     icon: IconDefinition;
     variant?: 'default' | 'table';

package/dist/es/{types → src}/components/Modal/Dialog/Dialog.d.ts

@@ -1,4 +1,4 @@
 import React from 'react';
-import { ModalProps } from '../modal.interface';
+import { ModalProps } from '@/components/Modal/modal.interface';
 declare const Dialog: ({ title, open, onClose, component, icon, ...props }: Omit<ModalProps, "footer" | "cardProps" | "size">) => React.JSX.Element;
 export default Dialog;

package/dist/es/{types → src}/components/Modal/Drawer/Drawer.d.ts

@@ -1,4 +1,4 @@
 import React from 'react';
-import { ModalProps } from '../modal.interface';
+import { ModalProps } from '@/components/Modal/modal.interface';
 declare const Drawer: ({ title, open, onClose, component, footer, cardProps, size, ...props }: Omit<ModalProps, "withHeaderDivider" | "icon">) => React.JSX.Element;
 export default Drawer;

package/dist/es/src/components/UploadDocument/FileUploaderSingle.d.ts

@@ -0,0 +1,30 @@
+import React from 'react';
+export interface Props {
+    setFile: (file: File | null) => void;
+    enableGoogleDrive: boolean;
+    googleAuthClientId?: string;
+    googleApiKey?: string;
+    error?: boolean;
+    helperText?: string;
+    fileUrl?: string | null;
+    fileName?: string | null;
+    accept?: string[];
+    acceptText?: string;
+    disabledInput?: boolean;
+    title?: string;
+    children?: JSX.Element | null;
+    titleAddButton?: string;
+    subText?: string;
+    maxSize?: string;
+    removeExistingFile?: () => void;
+    onTouched?: () => void;
+    onFileDataChange?: (fileData: {
+        name: string;
+        size: number;
+        type?: string;
+        driveFileId?: string;
+        driveAccessToken?: string;
+    } | null) => void;
+}
+declare const FileUploaderSingle: ({ enableGoogleDrive, googleAuthClientId, googleApiKey, error, helperText, accept, acceptText, title, subText, maxSize, disabledInput, children, fileUrl, fileName, titleAddButton, setFile, removeExistingFile, onTouched, onFileDataChange, }: Props) => React.JSX.Element;
+export default FileUploaderSingle;

package/dist/{cjs/types → es/src}/helpers/dataGetValue.d.ts

@@ -1,2 +1,2 @@
-import { Haystack } from '../types/googleDrive';
+import { Haystack } from '@/types/googleDrive';
 export declare function dataGetValue(object: Haystack, key: string | number, defaultValue?: any): object | number | string | null;

package/dist/{cjs/types → es/src}/hooks/useGooleDrivePicker.d.ts

@@ -1,4 +1,4 @@
-import { GoogleDrivePickerData, GoogleDrivePickerOptions } from '../types/googleDrive';
+import { GoogleDrivePickerData, GoogleDrivePickerOptions } from '@/types/googleDrive';
 declare const useGoogleDrivePicker: (callbackFunction: (result: GoogleDrivePickerData, token: string) => void, options: GoogleDrivePickerOptions) => readonly [() => Promise<void>, string];
-export * from '../types/googleDrive';
+export * from '@/types/googleDrive';
 export default useGoogleDrivePicker;

package/dist/es/src/index.d.ts

@@ -0,0 +1,4 @@
+export * from './components';
+export { default as DesignSystemProvider } from './DesignSystemProvider';
+export { DesignSystemContext } from './DesignSystemProvider';
+export { type DesignSystemContextValues } from './DesignSystemProvider';

package/package.json

@@ -1,18 +1,18 @@
 {
   "name": "@groupeactual/ui-kit",
-  "version": "1.6.7-beta.0",
+  "version": "1.7.0-beta.0",
   "type": "module",
   "description": "A simple template for a custom React component library",
   "devDependencies": {
-    "@groupeactual/code-quality-front": "1.2.1",
     "@babel/core": "^7.25.2",
     "@babel/preset-env": "^7.25.4",
     "@babel/preset-react": "^7.24.7",
     "@babel/preset-typescript": "^7.24.7",
+    "@groupeactual/code-quality-front": "^1.2.1",
     "@mdx-js/react": "^3.0.1",
-    "@types/google.picker": "^0.0.42",
-    "@types/lodash": "^4.17.7",
-    "@types/react": "^18.3.4",
+    "@types/google.picker": "^0.0.43",
+    "@types/lodash": "^4.17.12",
+    "@types/react": "^18.3.12",
     "@types/styled-components": "^5.1.34",
     "babel-loader": "^9.1.3",
     "clsx": "^2.1.1",
@@ -20,53 +20,48 @@
     "framer-motion": "^11.3.31",
     "identity-obj-proxy": "^3.0.0",
     "lodash": "^4.17.21",
-    "postcss": "^8.4.41",
+    "postcss": "^8.4.47",
     "prettier": "^3.3.3",
     "prop-types": "^15.8.1",
-    "dotenv-webpack": "^8.1.0",
     "sass": "^1.77.8",
-    "sass-loader": "^16.0.1",
+    "sass-loader": "^16.0.2",
     "style-loader": "^4.0.0",
-    "styled-components": "^6.1.12",
+    "styled-components": "^6.1.13",
     "tslib": "^2.7.0",
     "typescript": "^5.5.4"
   },
   "main": "dist/cjs/index.js",
-  "module": "dist/es/index.mjs",
+  "module": "dist/es/index.js",
   "files": [
     "dist",
     "src"
   ],
-  "types": "dist/es/types/index.d.ts",
+  "types": "dist/es/index.d.ts",
   "dependencies": {
-    "@emotion/is-prop-valid": "^1.3.0",
+    "@emotion/is-prop-valid": "^1.3.1",
     "@emotion/react": "^11.13.3",
-    "@emotion/serialize": "^1.3.1",
+    "@emotion/serialize": "^1.3.2",
     "@emotion/styled": "^11.13.0",
-    "@react-oauth/google": "^0.12.1",
-    "react-google-picker": "^0.1.0",
     "@fortawesome/fontawesome-svg-core": "^6.6.0",
+    "@fortawesome/free-brands-svg-icons": "^6.6.0",
     "@fortawesome/pro-regular-svg-icons": "git+https://github.com/actualtysoft/pro-regular-svg-icons.git#6.4.2",
     "@fortawesome/pro-solid-svg-icons": "git+https://github.com/actualtysoft/pro-solid-svg-icons.git#6.4.2",
-    "@fortawesome/free-brands-svg-icons": "^6.6.0",
     "@mui/material": "^5.16.7",
     "@mui/system": "^5.16.7",
     "@mui/x-date-pickers": "^7.15.0",
     "@mui/x-date-pickers-pro": "^7.15.0",
+    "@react-oauth/google": "^0.12.1",
     "dayjs": "^1.11.13",
     "notistack": "^3.0.1",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
-    "@groupeactual/design-tokens": "1.6.7-beta.0"
-  },
-  "peerDependencies": {
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1"
+    "react-google-picker": "^0.1.0",
+    "@groupeactual/design-tokens": "1.7.0-beta.0"
   },
   "scripts": {
     "build": "rollup -c",
-    "build:watch": "rollup -c -w",
-    "dev": "npm run build:watch --bundleConfigAsCjs",
+    "build:watch": "rollup --bundleConfigAsCjs -c -w",
+    "dev": "npm run build:watch",
     "eslint": "eslint ./src --ext .js,.jsx,.ts,.tsx",
     "lint": "npm run eslint"
   }

package/src/DesignSystemProvider.tsx

@@ -35,7 +35,8 @@ const MaterialThemeProvider = ({ children }: PropsWithChildren<unknown>) => {
   const { themeName } =
     useContext<DesignSystemContextValues>(DesignSystemContext);
   const { muiTokens } = useMaterialThemeTokens(themeName);
-  const theme = createTheme(muiTokens);
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  const theme = createTheme(muiTokens as any);
 
   return <ThemeProvider theme={theme}>{children}</ThemeProvider>;
 };

package/src/components/Accordion/Accordion.tsx

@@ -17,7 +17,7 @@ import {
   useTheme,
 } from '@mui/material';
 
-import IconProvider from '../IconProvider/IconProvider';
+import IconProvider from '@/components/IconProvider';
 
 interface Props extends AccordionProps {
   title?: string;

package/src/components/BannerNotification/BannerNotification.tsx

@@ -4,7 +4,7 @@ import { faBell, faTimes } from '@fortawesome/pro-solid-svg-icons';
 import { BannerNotificationStyle } from '@groupeactual/design-tokens';
 import { Alert, AlertProps, styled, useTheme } from '@mui/material';
 
-import IconProvider from '../IconProvider/IconProvider';
+import IconProvider from '@/components/IconProvider';
 
 interface Props extends AlertProps {
   text: string;

package/src/components/Breadcrumbs/Breadcrumbs.tsx

@@ -8,8 +8,8 @@ import {
   useTheme,
 } from '@mui/material';
 
-import Link from '../Link';
-import Text from '../Text';
+import Link from '@/components/Link';
+import Text from '@/components/Text';
 
 interface LinkItem {
   link: string;

package/src/components/Chip/Chip.tsx

@@ -11,7 +11,7 @@ import {
   useTheme,
 } from '@mui/material';
 
-import IconProvider from '../IconProvider';
+import IconProvider from '@/components/IconProvider';
 
 interface Props
   extends Omit<

package/src/components/Datatable/Datatable.tsx

@@ -18,9 +18,10 @@ import {
   useTheme,
 } from '@mui/material';
 
-import IconButton from '../IconButton';
-import Pagination from '../Pagination';
-import Text from '../Text';
+import IconButton from '@/components/IconButton';
+import Pagination from '@/components/Pagination';
+import Text from '@/components/Text';
+
 import { RowDetail as D, Props } from './datatable.interface';
 import usePaginationProps from './use-pagination-props.hook';
 

package/src/components/Datatable/DatatableCellRender.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 
-import Text from '../Text';
-import Tooltip from '../Tooltip';
+import Text from '@/components/Text';
+import Tooltip from '@/components/Tooltip';
 
 const DatatableCellRender = ({ data }: { data: string }): JSX.Element => {
   if (!data) {

package/src/components/EmbbededNotification/EmbeddedNotification.tsx

@@ -10,8 +10,8 @@ import {
 import { Box } from '@mui/material';
 import { BoxProps } from '@mui/system';
 
-import Icon from '../IconProvider/IconProvider';
-import Text from '../Text';
+import Text from '@/components//Text';
+import Icon from '@/components/IconProvider';
 
 interface Props extends BoxProps {
   variant: 'warning' | 'error' | 'success' | 'infos';

package/src/components/Form/AutoCompleteMulti/AutoCompleteMulti.tsx

@@ -1,11 +1,7 @@
 import React, { useMemo, useRef } from 'react';
 
-import {
-  faCheck,
-  faChevronDown,
-  faCircleX,
-  faTimes,
-} from '@fortawesome/pro-solid-svg-icons';
+import { faSearch } from '@fortawesome/pro-regular-svg-icons';
+import { faCheck, faCircleX, faTimes } from '@fortawesome/pro-solid-svg-icons';
 import { AutoCompleteStyle } from '@groupeactual/design-tokens';
 import {
   type AutocompleteProps,
@@ -19,13 +15,13 @@ import Autocomplete from '@mui/material/Autocomplete';
 import Box from '@mui/material/Box';
 import TextField, { TextFieldProps } from '@mui/material/TextField';
 
-import Chip from '../../Chip/Chip';
-import IconProvider from '../../IconProvider';
+import Chip from '@/components/Chip';
+import IconProvider from '@/components/IconProvider';
 
 interface AutocompleteMultipleSelectProps<T>
   extends Omit<
     AutocompleteProps<T, true, true, false>,
-    'onChange' | 'value' | 'options' | 'renderInput' | 'error'
+    'onChange' | 'value' | 'options' | 'renderInput' | 'error' | 'autocomplete'
   > {
   value: T[] | undefined;
   label?: string;
@@ -105,6 +101,14 @@ const AutocompleteMultipleSelect = <T,>({
     return classNames.filter(Boolean).join(' ');
   }, [error, color, value]);
 
+  const getPopupIcon = useMemo(() => {
+    if (color === 'success') {
+      return faCheck;
+    }
+
+    return faSearch;
+  }, [color]);
+
   const withPlaceholder = !value?.length && !!placeholder;
   const boxRef = useRef<HTMLHeadingElement>(null);
 
@@ -122,12 +126,18 @@ const AutocompleteMultipleSelect = <T,>({
           aria-placeholder={(withPlaceholder && placeholder) || ''}
           disableCloseOnSelect
           multiple
+          sx={{
+            ...props.sx,
+            '& .MuiAutocomplete-popupIndicator': { transform: 'none' },
+          }}
           disabled={disabled}
           options={options}
           slotProps={{
             paper: {
               sx: {
-                boxShadow: '0px 2px 10px 0px',
+                fontSize: '14px',
+                marginTop: '4px',
+                boxShadow: '0px 2px 10px 0px #2727271F',
               },
             },
           }}
@@ -147,8 +157,8 @@ const AutocompleteMultipleSelect = <T,>({
           popupIcon={
             <IconProvider
               className={disabled ? 'Mui-disabled SelectIcon' : 'SelectIcon'}
-              icon={color === 'success' ? faCheck : faChevronDown}
-              size={color === 'success' ? 'md' : 'sm'}
+              icon={getPopupIcon}
+              size="md"
             />
           }
           renderTags={(tag: T[]) => {

package/src/components/Form/AutoCompleteSingle/AutoCompleteSingle.tsx

@@ -1,10 +1,7 @@
 import React, { useMemo } from 'react';
 
-import {
-  faCheck,
-  faChevronDown,
-  faTimes,
-} from '@fortawesome/pro-solid-svg-icons';
+import { faSearch } from '@fortawesome/pro-regular-svg-icons';
+import { faCheck, faTimes } from '@fortawesome/pro-solid-svg-icons';
 import { AutoCompleteStyle } from '@groupeactual/design-tokens';
 import {
   Autocomplete,
@@ -19,7 +16,7 @@ import {
   useTheme,
 } from '@mui/material';
 
-import IconProvider from '../../IconProvider';
+import IconProvider from '@/components/IconProvider';
 
 interface Props<T>
   extends Omit<
@@ -30,6 +27,7 @@ interface Props<T>
     | 'renderInput'
     | 'error'
     | 'getOptionLabel'
+    | 'autocomplete'
   > {
   label: string;
   options: T[];
@@ -111,6 +109,14 @@ const AutoCompleteSingle = <T,>({
     return classNames.filter(Boolean).join(' ');
   }, [color, placeholder, value]);
 
+  const getPopupIcon = useMemo(() => {
+    if (color === 'success') {
+      return faCheck;
+    }
+
+    return faSearch;
+  }, [color]);
+
   return (
     <Box sx={{ width }}>
       <StyledAutoCompleteForm
@@ -120,21 +126,25 @@ const AutoCompleteSingle = <T,>({
       >
         <Autocomplete
           {...props}
-          value={isValueLabelNotEmpty && value || null}
+          value={(isValueLabelNotEmpty && value) || null}
           onChange={handleValueChange}
           aria-placeholder={placeholder}
           disabled={disabled}
           options={options}
           sx={{
+            ...props.sx,
             '.MuiOutlinedInput-input': {
               marginTop: value ? '0px' : '2px',
             },
+            '& .MuiAutocomplete-popupIndicator': { transform: 'none' },
           }}
           getOptionLabel={getOptionLabel as (option: T) => string}
           slotProps={{
             paper: {
               sx: {
-                boxShadow: '0px 2px 10px 0px',
+                fontSize: '14px',
+                marginTop: '4px',
+                boxShadow: '0px 2px 10px 0px #2727271F',
               },
             },
           }}
@@ -175,8 +185,8 @@ const AutoCompleteSingle = <T,>({
           popupIcon={
             <IconProvider
               className={disabled ? 'icon-disabled SelectIcon' : 'SelectIcon'}
-              icon={color === 'success' ? faCheck : faChevronDown}
-              size={color === 'success' ? 'md' : 'sm'}
+              icon={getPopupIcon}
+              size="md"
             />
           }
           renderInput={(params) => (
@@ -186,6 +196,8 @@ const AutoCompleteSingle = <T,>({
               error={!!error}
               fullWidth
               variant="outlined"
+              type="text"
+              inputProps={{ ...params.inputProps }}
               InputLabelProps={{
                 shrink: (placeholder && true) || undefined,
                 disabled: false,

package/src/components/Form/Checkbox/Checkbox.tsx

@@ -14,8 +14,8 @@ import {
   useTheme,
 } from '@mui/material';
 
-import IconProvider from '../../IconProvider';
-import Tooltip from '../../Tooltip';
+import IconProvider from '@/components/IconProvider';
+import Tooltip from '@/components/Tooltip';
 
 interface Props {
   name: string;

package/src/components/Form/CheckboxGroup/CheckboxGroup.tsx

@@ -10,7 +10,7 @@ import {
   useTheme,
 } from '@mui/material';
 
-import Checkbox from '../Checkbox/Checkbox';
+import Checkbox from '@/components/Form/Checkbox';
 
 interface ItemType {
   label: string;

package/src/components/Form/DatePicker/DatePicker.tsx

@@ -24,7 +24,7 @@ import { enUS, frFR } from '@mui/x-date-pickers/locales';
 import { Dayjs } from 'dayjs';
 import 'dayjs/locale/fr';
 
-import IconProvider from '../../IconProvider/IconProvider';
+import IconProvider from '@/components/IconProvider';
 
 interface Props<T extends Dayjs>
   extends Omit<DatePickerProps<T>, 'onChange' | 'width'> {

package/src/components/Form/MultiSelect/MultiSelect.tsx

@@ -20,8 +20,8 @@ import {
   useTheme,
 } from '@mui/material';
 
-import Chip from '../../Chip/Chip';
-import IconProvider from '../../IconProvider';
+import Chip from '@/components/Chip';
+import IconProvider from '@/components/IconProvider';
 
 interface Props<T>
   extends Omit<
@@ -50,7 +50,7 @@ const MenuProps = {
   disableAutoFocusItem: true,
   PaperProps: {
     sx: {
-      boxShadow: '0px 2px 10px 0px',
+      boxShadow: '0px 2px 10px 0px #2727271F',
       width: 0,
     },
   },
@@ -179,7 +179,7 @@ const MultiSelect = <T,>({
             <IconProvider
               className={disabled ? 'Mui-disabled SelectIcon' : 'SelectIcon'}
               icon={color === 'success' ? faCheck : faChevronDown}
-              size={color === 'success' ? 'md' : 'sm'}
+              size="md"
               sx={{
                 transform:
                   className.toString().includes('iconOpen') &&
@@ -197,6 +197,12 @@ const MultiSelect = <T,>({
               key={getKeyValue(option)}
               value={option as never}
               sx={{
+                '&:hover': {
+                  backgroundColor: theme.palette['blueHoverEquivalence'],
+                },
+                '&.Mui-selected': {
+                  backgroundColor: theme.palette['greyXLight'] + ' !important',
+                },
                 fontSize: 14,
                 fontWeight: value.indexOf(option) === -1 ? 400 : 500,
                 whiteSpace: 'normal',
@@ -205,9 +211,6 @@ const MultiSelect = <T,>({
                 maxWidth: '100%',
                 backgroundColor:
                   value.indexOf(option) === -1 ? 'white' : 'greyXLight',
-                '&:hover': {
-                  backgroundColor: 'blueHoverEquivalence',
-                },
               }}
             >
               {getRenderValue(option)}

package/src/components/Form/RadioGroup/RadioGroup.tsx

@@ -15,8 +15,8 @@ import {
   useTheme,
 } from '@mui/material';
 
-import IconProvider from '../../IconProvider';
-import Tooltip from '../../Tooltip';
+import IconProvider from '@/components/IconProvider';
+import Tooltip from '@/components/Tooltip';
 
 interface ItemType<T> {
   label: string;

package/src/components/Form/Select/Select.tsx

@@ -1,5 +1,6 @@
 import React, { BaseSyntheticEvent, useMemo } from 'react';
 
+import { IconDefinition } from '@fortawesome/fontawesome-svg-core';
 import { faCheck, faChevronDown } from '@fortawesome/pro-solid-svg-icons';
 import { SelectStyle } from '@groupeactual/design-tokens';
 import {
@@ -15,20 +16,21 @@ import {
   useTheme,
 } from '@mui/material';
 
-import Icon from '../../IconProvider';
+import IconProvider from '@/components/IconProvider';
 
 interface Props<T>
   extends Omit<SelectProps<T>, 'value' | 'onChange' | 'color' | 'error'> {
   options: T[];
   placeholder?: string;
   disabled?: boolean;
-  label: string;
+  label?: string;
   helperText?: string;
   color?: 'success';
   value: T | undefined;
   width?: number | string;
   error?: string;
   className?: string;
+  popupIcon?: IconDefinition;
   getRenderValue: (option: T) => string;
   onChange: (value: T) => void;
   onBlur?: (event: BaseSyntheticEvent) => void;
@@ -38,7 +40,7 @@ const MenuProps = {
   disableAutoFocusItem: true,
   PaperProps: {
     sx: {
-      boxShadow: '0px 2px 10px 0px',
+      boxShadow: '0px 2px 10px 0px #2727271F',
       width: 0,
     },
   },
@@ -54,6 +56,7 @@ const Select = <T,>({
   helperText,
   width = '100%',
   disabled,
+  popupIcon = faChevronDown,
   onChange,
   getRenderValue,
   ...props
@@ -109,10 +112,10 @@ const Select = <T,>({
           notched={(placeholder && true) || undefined}
           onChange={handleChange}
           IconComponent={({ className }) => (
-            <Icon
+            <IconProvider
               className={disabled ? 'Mui-disabled SelectIcon' : 'SelectIcon'}
-              icon={color === 'success' ? faCheck : faChevronDown}
-              size={color === 'success' ? 'md' : 'sm'}
+              icon={color === 'success' ? faCheck : popupIcon}
+              size="md"
               sx={{
                 marginTop: color === 'success' ? '2px' : '0px',
                 transform:
@@ -130,6 +133,12 @@ const Select = <T,>({
           {options?.map((option, i) => (
             <MenuItem
               sx={{
+                '&:hover': {
+                  backgroundColor: theme.palette['blueHoverEquivalence'],
+                },
+                '&.Mui-selected': {
+                  backgroundColor: theme.palette['greyXLight'] + ' !important',
+                },
                 fontSize: 14,
                 fontWeight: value === option ? 500 : 400,
                 whiteSpace: 'normal',

package/src/components/Form/TextField/TextField.tsx

@@ -15,7 +15,7 @@ import {
   useTheme,
 } from '@mui/material';
 
-import Icon from '../../IconProvider';
+import Icon from '@/components/IconProvider';
 
 interface Props extends Omit<TextFieldProps, 'error'> {
   error?: string;