chore(deps-dev): bump prettier from 2.8.0 to 3.0.3

package.json

@@ -107,15 +107,15 @@
     "chromatic": "^6.19.9",
     "css-loader": "^6.5.1",
     "eslint": "^8.6.0",
-    "eslint-config-prettier": "^8.0.0",
+    "eslint-config-prettier": "^9.0.0",
     "eslint-config-standard": "^17.0.0",
     "eslint-config-standard-jsx": "^11.0.0",
     "eslint-config-standard-react": "^13.0.0",
     "eslint-plugin-babel": "^5.3.0",
     "eslint-plugin-import": "^2.25.4",
     "eslint-plugin-n": "^15.2.4",
     "eslint-plugin-node": "^11.0.0",
-    "eslint-plugin-prettier": "^4.0.0",
+    "eslint-plugin-prettier": "^5.0.0",
     "eslint-plugin-promise": "^6.0.0",
     "eslint-plugin-react": "^7.30.1",
     "eslint-plugin-react-hooks": "^4.6.0",
@@ -139,7 +139,7 @@
     "postcss-preset-env": "9.1.1",
     "postcss-pseudoelements": "^5.0.0",
     "postcss-reporter": "^7.0.5",
-    "prettier": "2.8.0",
+    "prettier": "3.0.3",
     "pretty-quick": "3.1.3",
     "proptypes": "^1.1.0",
     "react": "^17.0.2",

src/components/advancedCollapsible/AdvancedCollapsible.tsx

@@ -8,9 +8,12 @@ import { BoxProps } from '../box/Box';
 import { GenericComponent } from '../../@types/types';
 import { COLORS, SIZES } from '../../constants';
 
-export type AllowedAdvancedCollapsibleSize = Exclude<typeof SIZES[number], 'tiny' | 'fullscreen' | 'smallest' | 'hero'>;
+export type AllowedAdvancedCollapsibleSize = Exclude<
+  (typeof SIZES)[number],
+  'tiny' | 'fullscreen' | 'smallest' | 'hero'
+>;
 export type AllowedAdvancedCollapsibleColor = Exclude<
-  typeof COLORS[number],
+  (typeof COLORS)[number],
   'aqua' | 'gold' | 'mint' | 'ruby' | 'violet'
 >;
 export interface AdvancedCollapsibleProps extends Omit<BoxProps, 'size'> {

src/components/avatar/Avatar.tsx

@@ -45,7 +45,7 @@ export interface AvatarProps extends Omit<BoxProps, 'size' | 'ref'> {
   /** The shape of the avatar. */
   shape?: Shape;
   /** The size of the avatar. */
-  size?: Exclude<typeof SIZES[number], 'fullscreen' | 'smallest'>;
+  size?: Exclude<(typeof SIZES)[number], 'fullscreen' | 'smallest'>;
   /** If true, a team icon will be shown. */
   team?: boolean;
   /** If true, the name will be shown in a tooltip on hover. */
@@ -54,7 +54,7 @@ export interface AvatarProps extends Omit<BoxProps, 'size' | 'ref'> {
   tooltipProps?: TooltipProps;
 }
 
-type AvatarInternalComponentProps = { size: Exclude<typeof SIZES[number], 'fullscreen' | 'smallest'> } & Pick<
+type AvatarInternalComponentProps = { size: Exclude<(typeof SIZES)[number], 'fullscreen' | 'smallest'> } & Pick<
   AvatarProps,
   | 'creatable'
   | 'children'

src/components/avatar/AvatarAdd.tsx

@@ -11,7 +11,7 @@ interface AvatarAddProps {
   /** Component that will be placed top right of the avatar image. */
   children?: React.ReactNode;
   /** The size of the avatar. */
-  size: Exclude<typeof SIZES[number], 'fullscreen' | 'smallest'>;
+  size: Exclude<(typeof SIZES)[number], 'fullscreen' | 'smallest'>;
 }
 
 const AvatarAdd: GenericComponent<AvatarAddProps> = ({ children, size }) => {

src/components/avatar/AvatarAnonymous.tsx

@@ -11,7 +11,7 @@ interface AvatarAnonymousProps {
   /** Component that will be placed top right of the avatar image. */
   children?: React.ReactNode;
   /** The size of the avatar. */
-  size: Exclude<typeof SIZES[number], 'fullscreen' | 'smallest'>;
+  size: Exclude<(typeof SIZES)[number], 'fullscreen' | 'smallest'>;
 }
 
 const AvatarAnonymous: GenericComponent<AvatarAnonymousProps> = ({ children, size }) => {

src/components/avatar/AvatarImage.tsx

@@ -19,7 +19,7 @@ interface AvatarImageProps {
   /** Callback function that is fired the image fails to load. */
   onImageLoadFailure?: React.ReactEventHandler<HTMLImageElement>;
   /** The size of the avatar. */
-  size: Exclude<typeof SIZES[number], 'fullscreen' | 'smallest'>;
+  size: Exclude<(typeof SIZES)[number], 'fullscreen' | 'smallest'>;
   /** How non-square images should be displayed. Default cover. */
   objectFit?: 'cover' | 'contain';
 }

src/components/avatar/AvatarInitials.tsx

@@ -22,7 +22,7 @@ interface AvatarInitialsProps {
   /** Callback function that is fired when user clicks the edit icon. */
   onImageChange?: React.MouseEventHandler<HTMLDivElement>;
   /** The size of the avatar. */
-  size: Exclude<typeof SIZES[number], 'fullscreen' | 'smallest'>;
+  size: Exclude<(typeof SIZES)[number], 'fullscreen' | 'smallest'>;
 }
 
 const AvatarInitials: GenericComponent<AvatarInitialsProps> = ({

src/components/avatar/AvatarOverlay.tsx

@@ -8,7 +8,7 @@ import { GenericComponent } from '../../@types/types';
 import { SIZES } from '../../constants';
 
 interface AvatarOverlayProps {
-  size: Exclude<typeof SIZES[number], 'fullscreen' | 'smallest'>;
+  size: Exclude<(typeof SIZES)[number], 'fullscreen' | 'smallest'>;
   onClick?: React.MouseEventHandler<HTMLDivElement>;
 }
 

src/components/avatar/AvatarStack.tsx

@@ -36,7 +36,7 @@ export interface AvatarStackProps extends Omit<BoxProps, 'size' | 'ref'> {
   /** If true, avatars will not be overlapping each other and will become interactive. */
   selectable?: boolean;
   /** The size of the avatar stack. */
-  size?: Exclude<typeof SIZES[number], 'fullscreen' | 'smallest'>;
+  size?: Exclude<(typeof SIZES)[number], 'fullscreen' | 'smallest'>;
   /** If true, the names will be shown in a tooltip on hover. */
   tooltip?: boolean;
 }

src/components/avatar/AvatarTeam.tsx

@@ -9,7 +9,7 @@ import { SIZES } from '../../constants';
 
 interface AvatarTeamProps {
   /** The size of the avatar. */
-  size?: Exclude<typeof SIZES[number], 'fullscreen' | 'smallest'>;
+  size?: Exclude<(typeof SIZES)[number], 'fullscreen' | 'smallest'>;
 }
 
 const AvatarTeam: GenericComponent<AvatarTeamProps> = ({ size }) => {

src/components/badge/Badge.tsx

@@ -8,7 +8,7 @@ import Icon from '../icon';
 import { UITextBody, UITextDisplay, UITextSmall } from '../typography';
 import theme from './theme.css';
 
-export type AllowedBadgeSize = Exclude<typeof SIZES[number], 'tiny' | 'fullscreen' | 'smallest' | 'hero'>;
+export type AllowedBadgeSize = Exclude<(typeof SIZES)[number], 'tiny' | 'fullscreen' | 'smallest' | 'hero'>;
 export interface BadgeProps extends Omit<BoxProps, 'ref' | 'size'> {
   /** The content to display inside the badge. */
   children?: ReactNode;

src/components/banner/Banner.tsx

@@ -25,9 +25,9 @@ export interface BannerProps extends Omit<BoxProps, 'size'> {
   /** If true, component will take the full width of it's container. */
   fullWidth?: boolean;
   /** The color for the Banner background and border */
-  color?: Exclude<typeof COLORS[number], 'teal'> | 'white';
+  color?: Exclude<(typeof COLORS)[number], 'teal'> | 'white';
   /** The size of the Banner component */
-  size?: Exclude<typeof SIZES[number], 'tiny' | 'smallest' | 'hero' | 'fullscreen'>;
+  size?: Exclude<(typeof SIZES)[number], 'tiny' | 'smallest' | 'hero' | 'fullscreen'>;
 }
 
 const Banner = ({

src/components/box/Box.tsx

@@ -5,9 +5,9 @@ import theme from './theme.css';
 import { GenericComponent } from '../../@types/types';
 
 const margins = [-8, -7, -6, -5, -4, -3, -2, -1, 0, 1, 2, 3, 4, 5, 6, 7, 8] as const;
-export type Margin = typeof margins[number];
+export type Margin = (typeof margins)[number];
 const paddings = [0, 1, 2, 3, 4, 5, 6, 7, 8] as const;
-export type Padding = typeof paddings[number];
+export type Padding = (typeof paddings)[number];
 
 const borderRadiuses = {
   square: null,
@@ -20,13 +20,13 @@ export type BoxProps = Partial<
     alignContent: 'center' | 'flex-start' | 'flex-end' | 'space-around' | 'space-between' | 'space-evenly';
     alignItems: 'center' | 'flex-start' | 'flex-end' | 'baseline' | 'stretch';
     alignSelf: 'center' | 'flex-start' | 'flex-end' | 'stretch';
-    backgroundColor: typeof COLORS[number];
-    backgroundTint: typeof TINTS[number];
+    backgroundColor: (typeof COLORS)[number];
+    backgroundTint: (typeof TINTS)[number];
     borderBottomWidth: number;
-    borderColor: typeof COLORS[number];
+    borderColor: (typeof COLORS)[number];
     borderLeftWidth: number;
     borderRightWidth: number;
-    borderTint: typeof TINTS[number];
+    borderTint: (typeof TINTS)[number];
     borderTopWidth: number;
     borderWidth: number;
     borderRadius: keyof typeof borderRadiuses;
@@ -130,7 +130,7 @@ const Box: GenericComponent<BoxProps> = forwardRef(
     const getBorder = (value: number) => {
       return `${value}px solid ${
         COLOR[borderColor.toUpperCase() as Uppercase<keyof typeof COLOR>][
-          borderTint.toUpperCase() as Uppercase<keyof typeof COLOR['AQUA']>
+          borderTint.toUpperCase() as Uppercase<keyof (typeof COLOR)['AQUA']>
         ]
       }`;
     };

src/components/bullet/Bullet.tsx

@@ -7,15 +7,15 @@ import { COLORS, SIZES, TINTS } from '../../constants';
 
 export interface BulletProps extends Omit<BoxProps, 'size' | 'ref'> {
   /** A border color to give to the counter */
-  borderColor?: typeof COLORS[number];
+  borderColor?: (typeof COLORS)[number];
   /** A border tint to give to the counter */
-  borderTint?: Exclude<typeof TINTS[number], 'normal'>;
+  borderTint?: Exclude<(typeof TINTS)[number], 'normal'>;
   /** A class name for the wrapper to give custom styles. */
   className?: string;
   /** The color of the bullet. */
-  color?: typeof COLORS[number];
+  color?: (typeof COLORS)[number];
   /** The size of the bullet. */
-  size?: Exclude<typeof SIZES[number], 'tiny' | 'fullscreen' | 'smallest' | 'hero'>;
+  size?: Exclude<(typeof SIZES)[number], 'tiny' | 'fullscreen' | 'smallest' | 'hero'>;
 }
 
 class Bullet extends PureComponent<BulletProps> {

src/components/button/Button.tsx

@@ -23,7 +23,7 @@ const textComponentMap = {
   medium: UITextBody,
   large: UITextDisplay,
 };
-export type AllowedButtonColor = typeof COLORS[number] | 'white';
+export type AllowedButtonColor = (typeof COLORS)[number] | 'white';
 
 export interface ButtonProps extends Omit<BoxProps, 'size'> {
   /** The content to display inside the button. */
@@ -51,7 +51,7 @@ export interface ButtonProps extends Omit<BoxProps, 'size'> {
   /** If true, component will show a loading spinner instead of label or children. */
   processing?: boolean;
   /** Size of the button. */
-  size?: Exclude<typeof SIZES[number], 'fullscreen' | 'smallest' | 'hero'>;
+  size?: Exclude<(typeof SIZES)[number], 'fullscreen' | 'smallest' | 'hero'>;
   /** Type of the button element. */
   type?: string;
   /** Button value in case it's being in a button group. */

src/components/buttonGroup/ButtonGroup.tsx

@@ -18,7 +18,7 @@ export interface ButtonGroupProps extends Omit<BoxProps, 'size' | 'onChange' | '
   /** If true, child components will be displayed segmented. */
   segmented?: boolean;
   /** The level of the buttons */
-  size?: Exclude<typeof SIZES[number], 'fullscreen' | 'smallest' | 'hero'>;
+  size?: Exclude<(typeof SIZES)[number], 'fullscreen' | 'smallest' | 'hero'>;
   /** The level of the buttons */
   level?: keyof typeof BUTTON_LEVELS;
   /** The value of the currently active button. */

src/components/checkbox/Checkbox.tsx

@@ -9,7 +9,7 @@ import { BoxProps } from '../box/Box';
 import { TextBodyCompact, TextDisplay, TextSmall } from '../typography';
 import theme from './theme.css';
 
-export type AllowedCheckboxSize = Exclude<typeof SIZES[number], 'tiny' | 'fullscreen' | 'smallest' | 'hero'>;
+export type AllowedCheckboxSize = Exclude<(typeof SIZES)[number], 'tiny' | 'fullscreen' | 'smallest' | 'hero'>;
 export interface CheckboxProps extends Omit<BoxProps, 'onChange' | 'size'> {
   /** If true, the checkbox will be checked. */
   checked?: boolean;

src/components/counter/Counter.tsx

@@ -10,15 +10,15 @@ import { GenericComponent } from '../../@types/types';
 
 export interface CounterProps extends Omit<BoxProps, 'size' | 'ref'> {
   /** A border color to give to the counter */
-  borderColor?: typeof COLORS[number];
+  borderColor?: (typeof COLORS)[number];
   /** A border tint to give to the counter */
-  borderTint?: typeof TINTS[number];
+  borderTint?: (typeof TINTS)[number];
   /** The content to display inside the Counter */
   children?: ReactNode;
   /** A class name for the counter to give custom styles */
   className?: string;
   /** The color theme you want to style the counter in */
-  color?: typeof COLORS[number];
+  color?: (typeof COLORS)[number];
   /** The value of the counter. */
   count: number;
   /** The max value of the counter. */

src/components/datepicker/DatePicker.tsx

@@ -25,7 +25,7 @@ export interface DatePickerProps extends Omit<BoxProps & DayPickerProps, 'size'
   /** The current selected date. */
   selectedDate?: Date;
   /** Size of the DatePicker component. */
-  size?: Exclude<typeof SIZES[number], 'tiny' | 'fullscreen' | 'hero'>;
+  size?: Exclude<(typeof SIZES)[number], 'tiny' | 'fullscreen' | 'hero'>;
   /** Show a dropdown for the month? */
   withMonthPicker?: boolean;
   /** Show week numbers? */
@@ -69,7 +69,7 @@ const DatePicker: GenericComponent<DatePickerProps> = ({
   const getMonthPickerSize = () => {
     const monthPickerSizeByDatePickerSize: Record<
       string,
-      Exclude<typeof SIZES[number], 'tiny' | 'fullscreen' | 'hero'>
+      Exclude<(typeof SIZES)[number], 'tiny' | 'fullscreen' | 'hero'>
     > = {
       small: 'smallest',
       medium: showWeekNumbers ? 'medium' : 'small',

src/components/datepicker/DatePickerInput.tsx

@@ -42,11 +42,11 @@ export interface DatePickerInputProps<IsTypeable extends boolean = true> extends
   /** The current selected value. */
   selectedDate?: IsTypeable extends true ? Date | string : Date;
   /** Size of the Input & DatePicker components. */
-  size?: Exclude<typeof SIZES[number], 'tiny' | 'smallest' | 'hero' | 'fullscreen'>;
+  size?: Exclude<(typeof SIZES)[number], 'tiny' | 'smallest' | 'hero' | 'fullscreen'>;
   /** Overridable size of the Input component. */
-  inputSize?: Exclude<typeof SIZES[number], 'tiny' | 'smallest' | 'hero' | 'fullscreen'>;
+  inputSize?: Exclude<(typeof SIZES)[number], 'tiny' | 'smallest' | 'hero' | 'fullscreen'>;
   /** Overridable size of the DatePicker component. */
-  datePickerSize?: Exclude<typeof SIZES[number], 'tiny' | 'smallest' | 'hero' | 'fullscreen'>;
+  datePickerSize?: Exclude<(typeof SIZES)[number], 'tiny' | 'smallest' | 'hero' | 'fullscreen'>;
   /** Whether the picker should automatically open on input focus. True by default. */
   openPickerOnFocus?: boolean;
   /** Whether the input should have button for value clearing. False by default. */

src/components/datepicker/MonthPicker.tsx

@@ -18,7 +18,7 @@ interface MonthPickerProps {
   /** The localeUtils from the DatePicker */
   localeUtils?: LocaleUtils;
   /** Size of the MonthPicker component. */
-  size?: Exclude<typeof SIZES[number], 'tiny' | 'fullscreen' | 'hero'>;
+  size?: Exclude<(typeof SIZES)[number], 'tiny' | 'fullscreen' | 'hero'>;
 }
 
 interface Option {

src/components/datepicker/NavigationBar.tsx

@@ -20,7 +20,7 @@ interface NavigationBarProps {
   previousMonth: Date;
   onNextClick?: () => void;
   onPreviousClick?: () => void;
-  size?: Exclude<typeof SIZES[number], 'tiny' | 'fullscreen' | 'hero'>;
+  size?: Exclude<(typeof SIZES)[number], 'tiny' | 'fullscreen' | 'hero'>;
   withMonthPicker?: boolean;
 }
 

src/components/datepicker/WeekDay.tsx

@@ -8,7 +8,7 @@ interface WeekDayProps {
   className?: string;
   localeUtils?: LocaleUtils;
   locale?: string;
-  size?: Exclude<typeof SIZES[number], 'tiny' | 'fullscreen' | 'hero'>;
+  size?: Exclude<(typeof SIZES)[number], 'tiny' | 'fullscreen' | 'hero'>;
 }
 
 const WeekDay: GenericComponent<WeekDayProps> = ({ weekday, className, localeUtils, locale, size }) => {

src/components/datepicker/__tests__/datePicker.stories.tsx

@@ -5,7 +5,7 @@ import DatePickerInput from '../DatePickerInput';
 import { SIZES } from '../../../constants';
 
 const SIZE = ['small', 'medium', 'large'];
-type Size = Exclude<typeof SIZES[number], 'tiny' | 'smallest' | 'hero' | 'fullscreen'>;
+type Size = Exclude<(typeof SIZES)[number], 'tiny' | 'smallest' | 'hero' | 'fullscreen'>;
 
 export default {
   component: DatePicker,

src/components/dialog/Dialog.tsx

@@ -23,7 +23,7 @@ export interface DialogProps extends Omit<DialogBaseProps, 'ref'> {
   /** Object containing the props of the primary action (a Button, with level prop set to 'primary'). */
   primaryAction: object;
   /** The size of the dialog. */
-  size?: Exclude<typeof SIZES[number], 'tiny' | 'smallest'>;
+  size?: Exclude<(typeof SIZES)[number], 'tiny' | 'smallest'>;
   /** If true, the content of the dialog will be scrollable when it exceeds the available height. */
   scrollable?: boolean;
   /** Object containing the the props of the secondary action (a Button). */

src/components/dialog/DialogBase.tsx

@@ -31,7 +31,7 @@ export interface DialogBaseProps extends Omit<BoxProps, 'form' | 'size'> {
   /** If true, the content of the dialog will be scrollable when it exceeds the available height. */
   scrollable?: boolean;
   /** The size of the dialog. */
-  size?: Exclude<typeof SIZES[number], 'tiny' | 'smallest' | 'hero'>;
+  size?: Exclude<(typeof SIZES)[number], 'tiny' | 'smallest' | 'hero'>;
   /** The initial part of the dialog where the focus will be set, useful to avoid focusing on the close button */
   initialFocusRef?: RefObject<HTMLElement>;
   /** The element used to drag a dialog, @see Dialog component header for an example */

src/components/emptyState/EmptyState.tsx

@@ -17,7 +17,7 @@ import { IconAddSmallOutline } from '@teamleader/ui-icons';
 export interface EmptyStateProps extends Omit<BoxProps, 'size'> {
   hidePointer?: boolean;
   metaText?: ReactNode | string;
-  size?: Exclude<typeof SIZES[number], 'tiny' | 'fullscreen' | 'smallest' | 'hero'>;
+  size?: Exclude<(typeof SIZES)[number], 'tiny' | 'fullscreen' | 'smallest' | 'hero'>;
   title?: ReactNode | string;
   action?: Omit<BadgedLinkProps, 'icon' | 'inherit'> & { children: ReactNode };
 }

src/components/filterSelection/FilterSelection.tsx

@@ -23,7 +23,7 @@ export const STATUS: Record<string, StatusValues> = {
   BROKEN: 'broken',
 };
 
-const COLOR_BY_STATUS: Record<string, typeof COLORS[number]> = {
+const COLOR_BY_STATUS: Record<string, (typeof COLORS)[number]> = {
   [STATUS.DEFAULT]: 'neutral',
   [STATUS.ACTIVE]: 'aqua',
   [STATUS.FOCUSED]: 'aqua',
@@ -32,7 +32,7 @@ const COLOR_BY_STATUS: Record<string, typeof COLORS[number]> = {
   [STATUS.BROKEN]: 'ruby',
 };
 
-const BACKGROUND_TINT_BY_STATUS: Record<string, typeof TINTS[number] | undefined> = {
+const BACKGROUND_TINT_BY_STATUS: Record<string, (typeof TINTS)[number] | undefined> = {
   [STATUS.DEFAULT]: undefined,
   [STATUS.ACTIVE]: 'light',
   [STATUS.FOCUSED]: 'light',

src/components/icon/Icon.tsx

@@ -12,9 +12,9 @@ export interface IconProps extends Omit<BoxProps, 'children' | 'className'> {
   /** Classname for the Icon component */
   className?: string;
   /** Color of the icon */
-  color?: typeof COLORS[number];
+  color?: (typeof COLORS)[number];
   /** Tint of the icon */
-  tint?: typeof TINTS[number];
+  tint?: (typeof TINTS)[number];
   /** Opacity of the icon */
   opacity?: number;
 }

src/components/icon/__tests__/icon.stories.tsx

@@ -15,9 +15,9 @@ const Wrapper = ({ children }: { children: React.ReactNode }) => (
 
 export const Main = () => (
   <div>
-    {(['neutral', 'mint', 'violet', 'ruby', 'gold', 'aqua', 'teal'] as typeof COLORS[number][]).map((color) => (
+    {(['neutral', 'mint', 'violet', 'ruby', 'gold', 'aqua', 'teal'] as (typeof COLORS)[number][]).map((color) => (
       <Wrapper key={color}>
-        {(['lightest', 'light', 'normal', 'dark', 'darkest'] as typeof TINTS[number][]).map((tint) => (
+        {(['lightest', 'light', 'normal', 'dark', 'darkest'] as (typeof TINTS)[number][]).map((tint) => (
           <Icon key={tint} color={color} tint={tint}>
             <IconGiftMediumOutline />
           </Icon>