diff --git a/package.json b/package.json
index b8b197c9a..65a54fa02 100644
--- a/package.json
+++ b/package.json
@@ -107,7 +107,7 @@
     "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",
@@ -115,7 +115,7 @@
     "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",
diff --git a/src/components/advancedCollapsible/AdvancedCollapsible.tsx b/src/components/advancedCollapsible/AdvancedCollapsible.tsx
index cb0d3ff54..1a3d26ff4 100644
--- a/src/components/advancedCollapsible/AdvancedCollapsible.tsx
+++ b/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'> {
diff --git a/src/components/avatar/Avatar.tsx b/src/components/avatar/Avatar.tsx
index 7e76a2804..2635a0eca 100644
--- a/src/components/avatar/Avatar.tsx
+++ b/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'
diff --git a/src/components/avatar/AvatarAdd.tsx b/src/components/avatar/AvatarAdd.tsx
index c19ed7600..83f5311d1 100644
--- a/src/components/avatar/AvatarAdd.tsx
+++ b/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 }) => {
diff --git a/src/components/avatar/AvatarAnonymous.tsx b/src/components/avatar/AvatarAnonymous.tsx
index d820f42d9..27c748100 100644
--- a/src/components/avatar/AvatarAnonymous.tsx
+++ b/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 }) => {
diff --git a/src/components/avatar/AvatarImage.tsx b/src/components/avatar/AvatarImage.tsx
index 7fe5203eb..9736bd555 100644
--- a/src/components/avatar/AvatarImage.tsx
+++ b/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';
 }
diff --git a/src/components/avatar/AvatarInitials.tsx b/src/components/avatar/AvatarInitials.tsx
index 1d6ca469e..32e6a87dd 100644
--- a/src/components/avatar/AvatarInitials.tsx
+++ b/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> = ({
diff --git a/src/components/avatar/AvatarOverlay.tsx b/src/components/avatar/AvatarOverlay.tsx
index b2ced57fe..e6a986ec0 100644
--- a/src/components/avatar/AvatarOverlay.tsx
+++ b/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>;
 }
 
diff --git a/src/components/avatar/AvatarStack.tsx b/src/components/avatar/AvatarStack.tsx
index d8e7cc990..b06b69f33 100644
--- a/src/components/avatar/AvatarStack.tsx
+++ b/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;
 }
diff --git a/src/components/avatar/AvatarTeam.tsx b/src/components/avatar/AvatarTeam.tsx
index d50ceb35b..fe1650891 100644
--- a/src/components/avatar/AvatarTeam.tsx
+++ b/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 }) => {
diff --git a/src/components/badge/Badge.tsx b/src/components/badge/Badge.tsx
index 62fafdffd..2ee81b9ac 100644
--- a/src/components/badge/Badge.tsx
+++ b/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;
diff --git a/src/components/banner/Banner.tsx b/src/components/banner/Banner.tsx
index f5485f659..fdb49c52f 100644
--- a/src/components/banner/Banner.tsx
+++ b/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 = ({
diff --git a/src/components/box/Box.tsx b/src/components/box/Box.tsx
index c6f40ac19..34b13b631 100644
--- a/src/components/box/Box.tsx
+++ b/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']>
         ]
       }`;
     };
diff --git a/src/components/bullet/Bullet.tsx b/src/components/bullet/Bullet.tsx
index 00544b021..c7107c7de 100644
--- a/src/components/bullet/Bullet.tsx
+++ b/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> {
diff --git a/src/components/button/Button.tsx b/src/components/button/Button.tsx
index d87096e17..896074d35 100644
--- a/src/components/button/Button.tsx
+++ b/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. */
diff --git a/src/components/buttonGroup/ButtonGroup.tsx b/src/components/buttonGroup/ButtonGroup.tsx
index bf45aee43..a1f20d97c 100644
--- a/src/components/buttonGroup/ButtonGroup.tsx
+++ b/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. */
diff --git a/src/components/checkbox/Checkbox.tsx b/src/components/checkbox/Checkbox.tsx
index 9d416f513..6cc4f9af9 100644
--- a/src/components/checkbox/Checkbox.tsx
+++ b/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;
diff --git a/src/components/counter/Counter.tsx b/src/components/counter/Counter.tsx
index 924358a84..bb24b770d 100644
--- a/src/components/counter/Counter.tsx
+++ b/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. */
diff --git a/src/components/datepicker/DatePicker.tsx b/src/components/datepicker/DatePicker.tsx
index 000f1de01..7c197b9dd 100644
--- a/src/components/datepicker/DatePicker.tsx
+++ b/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',
diff --git a/src/components/datepicker/DatePickerInput.tsx b/src/components/datepicker/DatePickerInput.tsx
index 70d9632d3..51f45ab9c 100644
--- a/src/components/datepicker/DatePickerInput.tsx
+++ b/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. */
diff --git a/src/components/datepicker/MonthPicker.tsx b/src/components/datepicker/MonthPicker.tsx
index dfac03b15..5d0a30a4b 100644
--- a/src/components/datepicker/MonthPicker.tsx
+++ b/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 {
diff --git a/src/components/datepicker/NavigationBar.tsx b/src/components/datepicker/NavigationBar.tsx
index ccf41ac30..ed1be70eb 100644
--- a/src/components/datepicker/NavigationBar.tsx
+++ b/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;
 }
 
diff --git a/src/components/datepicker/WeekDay.tsx b/src/components/datepicker/WeekDay.tsx
index 4163542c3..4e985a57d 100644
--- a/src/components/datepicker/WeekDay.tsx
+++ b/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 }) => {
diff --git a/src/components/datepicker/__tests__/datePicker.stories.tsx b/src/components/datepicker/__tests__/datePicker.stories.tsx
index 649ca742b..93dbcdb1e 100644
--- a/src/components/datepicker/__tests__/datePicker.stories.tsx
+++ b/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,
diff --git a/src/components/dialog/Dialog.tsx b/src/components/dialog/Dialog.tsx
index 32fe95c68..a69f13fb6 100644
--- a/src/components/dialog/Dialog.tsx
+++ b/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). */
diff --git a/src/components/dialog/DialogBase.tsx b/src/components/dialog/DialogBase.tsx
index d9c30c5c6..4586724db 100644
--- a/src/components/dialog/DialogBase.tsx
+++ b/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 */
diff --git a/src/components/emptyState/EmptyState.tsx b/src/components/emptyState/EmptyState.tsx
index 2b992a48a..f4afaadd5 100644
--- a/src/components/emptyState/EmptyState.tsx
+++ b/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 };
 }
diff --git a/src/components/filterSelection/FilterSelection.tsx b/src/components/filterSelection/FilterSelection.tsx
index 67495290d..c4d559d93 100644
--- a/src/components/filterSelection/FilterSelection.tsx
+++ b/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',
diff --git a/src/components/icon/Icon.tsx b/src/components/icon/Icon.tsx
index d9bbe6536..19030d6b1 100644
--- a/src/components/icon/Icon.tsx
+++ b/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;
 }
diff --git a/src/components/icon/__tests__/icon.stories.tsx b/src/components/icon/__tests__/icon.stories.tsx
index 37888c897..db018a10d 100644
--- a/src/components/icon/__tests__/icon.stories.tsx
+++ b/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>
diff --git a/src/components/iconButton/IconButton.tsx b/src/components/iconButton/IconButton.tsx
index 4777071b3..62efbf6e8 100644
--- a/src/components/iconButton/IconButton.tsx
+++ b/src/components/iconButton/IconButton.tsx
@@ -21,11 +21,11 @@ export interface IconButtonProps extends Omit<BoxProps, 'ref' | 'children' | 'cl
   /** The icon displayed inside the button. */
   icon?: ReactNode;
   /** Size of the button. */
-  size?: Exclude<typeof SIZES[number], 'tiny' | 'fullscreen' | 'smallest' | 'hero'>;
+  size?: Exclude<(typeof SIZES)[number], 'tiny' | 'fullscreen' | 'smallest' | 'hero'>;
   /** The color which the icon should have */
-  color?: typeof COLORS[number] | 'white';
+  color?: (typeof COLORS)[number] | 'white';
   /** The tint which the icon should have */
-  tint?: typeof TINTS[number];
+  tint?: (typeof TINTS)[number];
   /** If true, component will be shown in a selected state */
   selected?: boolean;
   /** Type of the button element. */
diff --git a/src/components/iconButton/__tests__/iconButton.stories.tsx b/src/components/iconButton/__tests__/iconButton.stories.tsx
index 151584644..56331545b 100644
--- a/src/components/iconButton/__tests__/iconButton.stories.tsx
+++ b/src/components/iconButton/__tests__/iconButton.stories.tsx
@@ -17,7 +17,7 @@ const Wrapper = ({ children, inverse = false }: { children: ReactNode; inverse:
 );
 type Sizes = 'small' | 'medium' | 'large';
 const sizes: Sizes[] = ['small', 'medium', 'large'];
-const colors: (typeof COLORS[number] | 'white')[] = [
+const colors: ((typeof COLORS)[number] | 'white')[] = [
   'neutral',
   'white',
   'mint',
@@ -27,7 +27,7 @@ const colors: (typeof COLORS[number] | 'white')[] = [
   'aqua',
   'teal',
 ];
-const tints: typeof TINTS[number][] = ['lightest', 'light', 'normal', 'dark', 'darkest'];
+const tints: (typeof TINTS)[number][] = ['lightest', 'light', 'normal', 'dark', 'darkest'];
 export const Main = () => (
   <div>
     {sizes.map((size) =>
diff --git a/src/components/input/DurationInput.tsx b/src/components/input/DurationInput.tsx
index da91e1541..e1b05d23e 100644
--- a/src/components/input/DurationInput.tsx
+++ b/src/components/input/DurationInput.tsx
@@ -25,7 +25,7 @@ export interface DurationInputProps
   /** Callback function that is fired when the keyboard is touched. */
   onKeyDown?: (event: KeyboardEvent<HTMLElement>) => void;
   /** Size of the input element. */
-  size?: Exclude<typeof SIZES[number], 'tiny' | 'fullscreen' | 'smallest' | 'hero'>;
+  size?: Exclude<(typeof SIZES)[number], 'tiny' | 'fullscreen' | 'smallest' | 'hero'>;
   /** Current value of the input element. */
   value?: {
     hours?: number;
diff --git a/src/components/input/InputBase.tsx b/src/components/input/InputBase.tsx
index 59cd8e43e..a80c691cb 100644
--- a/src/components/input/InputBase.tsx
+++ b/src/components/input/InputBase.tsx
@@ -31,7 +31,7 @@ export interface InputBaseProps
   /** Forwarded ref element. */
   ref?: ForwardedRef<HTMLElement>;
   /** Size of the input element. */
-  size?: Exclude<typeof SIZES[number], 'fullscreen' | 'smallest' | 'hero'>;
+  size?: Exclude<(typeof SIZES)[number], 'fullscreen' | 'smallest' | 'hero'>;
   /** If true, the input text is aligned to the right. */
   textAlignRight?: boolean;
   /** Type of the input element. It can be a valid HTML5 input type. */
diff --git a/src/components/input/NumericInput.tsx b/src/components/input/NumericInput.tsx
index 35c103898..8ae8b1e68 100644
--- a/src/components/input/NumericInput.tsx
+++ b/src/components/input/NumericInput.tsx
@@ -41,10 +41,10 @@ const StepperControls: GenericComponent<StepperControlsProps> = ({
   stepperDownProps,
 }: StepperControlsProps) => {
   const iconProps: {
-    color: typeof COLORS[number];
+    color: (typeof COLORS)[number];
     element: string;
     tabIndex: string;
-    tint: typeof TINTS[number];
+    tint: (typeof TINTS)[number];
     type: string;
   } = {
     color: inverse ? 'teal' : 'neutral',
@@ -98,7 +98,7 @@ export interface NumericInputProps
   /** Callback function that is fired when the keyboard is touched. */
   onKeyDown?: (event: KeyboardEvent<HTMLElement>) => void;
   /** Size of the input element. */
-  size?: Exclude<typeof SIZES[number], 'fullscreen' | 'smallest' | 'hero'>;
+  size?: Exclude<(typeof SIZES)[number], 'fullscreen' | 'smallest' | 'hero'>;
   /** Limit increment value for numeric inputs. */
   step?: number;
   /** Specifiy where the stepper controls should be rendered. */
diff --git a/src/components/island/Island.tsx b/src/components/island/Island.tsx
index b1d3eeb1d..bb323eb38 100644
--- a/src/components/island/Island.tsx
+++ b/src/components/island/Island.tsx
@@ -20,9 +20,9 @@ export interface IslandProps extends Omit<BoxProps, 'size'> {
   /** A class name for the button to give custom styles. */
   className?: string;
   /** The color for the Island background and border */
-  color?: Exclude<typeof COLORS[number], 'teal'> | 'white';
+  color?: Exclude<(typeof COLORS)[number], 'teal'> | 'white';
   /** Te size of the Island component */
-  size?: Exclude<typeof SIZES[number], 'tiny' | 'smallest' | 'hero' | 'fullscreen'>;
+  size?: Exclude<(typeof SIZES)[number], 'tiny' | 'smallest' | 'hero' | 'fullscreen'>;
 }
 
 const Island: GenericComponent<IslandProps> = ({
diff --git a/src/components/label/Label.tsx b/src/components/label/Label.tsx
index 1627fe557..5fb3594be 100644
--- a/src/components/label/Label.tsx
+++ b/src/components/label/Label.tsx
@@ -14,7 +14,7 @@ export interface LabelProps extends Omit<BoxProps, 'children'> {
   children: ReactNode;
   inverse?: boolean;
   required?: boolean;
-  size?: Exclude<typeof SIZES[number], 'tiny' | 'fullscreen' | 'smallest' | 'hero'>;
+  size?: Exclude<(typeof SIZES)[number], 'tiny' | 'fullscreen' | 'smallest' | 'hero'>;
   tooltip?: ReactNode;
   tooltipProps?: Record<string, any>;
 }
diff --git a/src/components/loadingBar/LoadingBar.tsx b/src/components/loadingBar/LoadingBar.tsx
index cdbb3a46d..a33afdffd 100644
--- a/src/components/loadingBar/LoadingBar.tsx
+++ b/src/components/loadingBar/LoadingBar.tsx
@@ -10,11 +10,11 @@ export interface LoadingBarProps extends Omit<BoxProps, 'className' | 'size'> {
   /** A class name for the wrapper to add custom classes */
   className?: string;
   /** The color of the components */
-  color?: typeof COLORS[number];
+  color?: (typeof COLORS)[number];
   /** Size of the component */
-  size?: Exclude<typeof SIZES[number], 'tiny' | 'fullscreen' | 'smallest' | 'hero'>;
+  size?: Exclude<(typeof SIZES)[number], 'tiny' | 'fullscreen' | 'smallest' | 'hero'>;
   /** The tint of the components color */
-  tint?: typeof TINTS[number];
+  tint?: (typeof TINTS)[number];
 }
 
 const LoadingBar: GenericComponent<LoadingBarProps> = ({
diff --git a/src/components/loadingSpinner/LoadingSpinner.tsx b/src/components/loadingSpinner/LoadingSpinner.tsx
index e9e5af3b2..5b5e622b0 100644
--- a/src/components/loadingSpinner/LoadingSpinner.tsx
+++ b/src/components/loadingSpinner/LoadingSpinner.tsx
@@ -10,11 +10,11 @@ export interface LoadingSpinnerProps extends Omit<BoxProps, 'className' | 'size'
   /** A class name for the wrapper to add custom classes */
   className?: string;
   /** The color of the components */
-  color?: typeof COLORS[number];
+  color?: (typeof COLORS)[number];
   /** Size of the component */
-  size?: Exclude<typeof SIZES[number], 'tiny' | 'large' | 'fullscreen' | 'smallest' | 'hero'>;
+  size?: Exclude<(typeof SIZES)[number], 'tiny' | 'large' | 'fullscreen' | 'smallest' | 'hero'>;
   /** The tint of the components color */
-  tint?: typeof TINTS[number];
+  tint?: (typeof TINTS)[number];
 }
 const LoadingSpinner: GenericComponent<LoadingSpinnerProps> = forwardRef<HTMLElement, LoadingSpinnerProps>(
   ({ className, color = 'teal', size = 'medium', tint = 'darkest', ...others }, ref) => {
diff --git a/src/components/marketingButton/MarketingButton.tsx b/src/components/marketingButton/MarketingButton.tsx
index 4682b72e8..26d3d1625 100644
--- a/src/components/marketingButton/MarketingButton.tsx
+++ b/src/components/marketingButton/MarketingButton.tsx
@@ -28,7 +28,7 @@ export interface MarketingButtonProps extends Omit<BoxProps, 'ref' | 'element'>
   /** 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;
 }
diff --git a/src/components/marketingLockBadge/MarketingLockBadge.tsx b/src/components/marketingLockBadge/MarketingLockBadge.tsx
index c1f9e9a17..9de86e910 100644
--- a/src/components/marketingLockBadge/MarketingLockBadge.tsx
+++ b/src/components/marketingLockBadge/MarketingLockBadge.tsx
@@ -10,7 +10,7 @@ import { SIZES } from '../../constants';
 
 export interface MarketingLockBadgeProps extends Omit<BoxProps, 'ref'> {
   className?: string;
-  size?: Exclude<typeof SIZES[number], 'tiny' | 'large' | 'fullscreen' | 'smallest' | 'hero'>;
+  size?: Exclude<(typeof SIZES)[number], 'tiny' | 'large' | 'fullscreen' | 'smallest' | 'hero'>;
 }
 
 const MarketingLockBadge: GenericComponent<MarketingLockBadgeProps> = ({ className, size = 'medium', ...others }) => {
diff --git a/src/components/marketingStatusLabel/MarketingStatusLabel.tsx b/src/components/marketingStatusLabel/MarketingStatusLabel.tsx
index fe0de3df2..253aa1ed1 100644
--- a/src/components/marketingStatusLabel/MarketingStatusLabel.tsx
+++ b/src/components/marketingStatusLabel/MarketingStatusLabel.tsx
@@ -12,7 +12,7 @@ export interface MarketingStatusLabelProps extends Omit<BoxProps, 'ref' | 'size'
   children?: ReactNode;
   className?: string;
   fullWidth?: boolean;
-  size?: Exclude<typeof SIZES[number], 'tiny' | 'large' | 'fullscreen' | 'smallest' | 'hero'>;
+  size?: Exclude<(typeof SIZES)[number], 'tiny' | 'large' | 'fullscreen' | 'smallest' | 'hero'>;
   icon?: ReactNode;
 }
 
diff --git a/src/components/marketingTab/MarketingTab.tsx b/src/components/marketingTab/MarketingTab.tsx
index 108860f9b..f88ffed4f 100644
--- a/src/components/marketingTab/MarketingTab.tsx
+++ b/src/components/marketingTab/MarketingTab.tsx
@@ -13,7 +13,7 @@ export interface MarketingTabProps extends Omit<BoxProps, 'ref'> {
   children: ReactNode;
   className?: string;
   onClick?: (event: React.MouseEvent) => void;
-  size?: Exclude<typeof SIZES[number], 'tiny' | 'large' | 'fullscreen' | 'smallest' | 'hero'>;
+  size?: Exclude<(typeof SIZES)[number], 'tiny' | 'large' | 'fullscreen' | 'smallest' | 'hero'>;
 }
 
 const MarketingTab: GenericComponent<MarketingTabProps> = forwardRef<HTMLElement, MarketingTabProps>(
diff --git a/src/components/message/Message.tsx b/src/components/message/Message.tsx
index ae96e3f0a..cf7750cb9 100644
--- a/src/components/message/Message.tsx
+++ b/src/components/message/Message.tsx
@@ -17,28 +17,28 @@ import { COLORS, TINTS } from '../../constants';
 
 export type Status = 'error' | 'info' | 'success' | 'warning';
 
-const iconColorMap: Record<Status, typeof COLORS[number]> = {
+const iconColorMap: Record<Status, (typeof COLORS)[number]> = {
   error: 'neutral',
   info: 'neutral',
   success: 'neutral',
   warning: 'gold',
 };
 
-const iconTintMap: Record<Status, typeof TINTS[number]> = {
+const iconTintMap: Record<Status, (typeof TINTS)[number]> = {
   error: 'lightest',
   info: 'darkest',
   success: 'lightest',
   warning: 'dark',
 };
 
-const backgroundColorMap: Record<Status, typeof COLORS[number]> = {
+const backgroundColorMap: Record<Status, (typeof COLORS)[number]> = {
   error: 'ruby',
   info: 'neutral',
   success: 'mint',
   warning: 'gold',
 };
 
-const backgroundTintMap: Record<Status, typeof TINTS[number]> = {
+const backgroundTintMap: Record<Status, (typeof TINTS)[number]> = {
   error: 'normal',
   info: 'normal',
   success: 'light',
diff --git a/src/components/popover/Popover.tsx b/src/components/popover/Popover.tsx
index acc6e97b3..5ac2fa1c5 100644
--- a/src/components/popover/Popover.tsx
+++ b/src/components/popover/Popover.tsx
@@ -28,7 +28,7 @@ export interface PopoverProps extends Omit<BoxProps, 'ref'> {
   /** The class names for the wrapper to apply custom styling. */
   className?: string;
   /** The background colour of the Popover. */
-  color?: typeof COLORS[number];
+  color?: (typeof COLORS)[number];
   /** The preferred direction in which the Popover is rendered, is overridden with the opposite or adjacent direction if the Popover cannot be entirely displayed in the current direction. */
   direction?: 'north' | 'south' | 'east' | 'west';
   /** If true, the Popover stretches to fit its content vertically */
@@ -50,7 +50,7 @@ export interface PopoverProps extends Omit<BoxProps, 'ref'> {
   /** The position in which the Popover is rendered, is overridden with the another position if the Popover cannot be entirely displayed in the current position. */
   position?: 'start' | 'center' | 'end';
   /** The tint of the background colour of the Popover. */
-  tint?: typeof TINTS[number];
+  tint?: (typeof TINTS)[number];
   /** The z-index of the Popover */
   zIndex?: number;
   /** Determines whether the focus should be returned to the source element, enabled by default in useFocusTrap */
diff --git a/src/components/poweredByButton/PoweredByButton.tsx b/src/components/poweredByButton/PoweredByButton.tsx
index 4026afe9a..20ef48cb9 100644
--- a/src/components/poweredByButton/PoweredByButton.tsx
+++ b/src/components/poweredByButton/PoweredByButton.tsx
@@ -48,7 +48,7 @@ const PoweredByButton: GenericComponent<PoweredByButtonProps> = forwardRef<HTMLE
       className,
     );
 
-    const iconProps: { color?: typeof COLORS[number]; tint: typeof TINTS[number] } =
+    const iconProps: { color?: (typeof COLORS)[number]; tint: (typeof TINTS)[number] } =
       tint === 'light' ? { color: 'neutral', tint: 'lightest' } : { tint: 'darkest' };
 
     return (
diff --git a/src/components/progressTracker/ProgressTracker.tsx b/src/components/progressTracker/ProgressTracker.tsx
index 996ff710c..6e516286e 100644
--- a/src/components/progressTracker/ProgressTracker.tsx
+++ b/src/components/progressTracker/ProgressTracker.tsx
@@ -15,7 +15,7 @@ export interface ProgressTrackerProps {
   /** The steps to display inside the progress tracker */
   children?: ReactNode;
   /** Color theme of the progress tracker. */
-  color?: typeof COLORS[number];
+  color?: (typeof COLORS)[number];
   /** Color of the progress step. */
   activeStepColor?: string;
   /** Where to position the labels. Alternating allows for wider labels. */
diff --git a/src/components/radio/RadioButton.tsx b/src/components/radio/RadioButton.tsx
index 9fce4ba32..8b1a35cb6 100644
--- a/src/components/radio/RadioButton.tsx
+++ b/src/components/radio/RadioButton.tsx
@@ -18,7 +18,7 @@ export interface RadioButtonProps extends Omit<BoxProps, 'className' | 'children
   onMouseEnter?: (event: MouseEvent) => void;
   onMouseLeave?: (event: MouseEvent) => void;
   label?: string;
-  size?: Exclude<typeof SIZES[number], 'fullscreen' | 'smallest' | 'tiny' | 'hero'>;
+  size?: Exclude<(typeof SIZES)[number], 'fullscreen' | 'smallest' | 'tiny' | 'hero'>;
   value: string | boolean;
 }
 
diff --git a/src/components/select/Select.tsx b/src/components/select/Select.tsx
index b66f79a51..c8226b90e 100644
--- a/src/components/select/Select.tsx
+++ b/src/components/select/Select.tsx
@@ -62,7 +62,7 @@ export interface SelectProps<
   /** Boolean indicating whether the select option text should render on one single line. */
   truncateOptionText?: boolean;
   /** Size of the input element. */
-  size?: Exclude<typeof SIZES[number], 'smallest' | 'hero' | 'fullscreen'>;
+  size?: Exclude<(typeof SIZES)[number], 'smallest' | 'hero' | 'fullscreen'>;
   /** The text string/element to use as success message below the input. */
   success?: ReactNode;
   /** Selected option value(s) */
diff --git a/src/components/splitButton/SplitButton.tsx b/src/components/splitButton/SplitButton.tsx
index bb37f0108..05511b4d2 100644
--- a/src/components/splitButton/SplitButton.tsx
+++ b/src/components/splitButton/SplitButton.tsx
@@ -18,7 +18,7 @@ export interface SplitButtonProps extends Omit<BoxProps, 'children' | 'size'> {
   /** Determines which kind of button to be rendered. */
   level?: 'primary' | 'secondary' | 'destructive';
   /** Size of the button. */
-  size?: Exclude<typeof SIZES[number], 'tiny' | 'fullscreen' | 'smallest' | 'hero'>;
+  size?: Exclude<(typeof SIZES)[number], 'tiny' | 'fullscreen' | 'smallest' | 'hero'>;
   /** The function executed, when we click on the main button. */
   onButtonClick: (event: MouseEvent<HTMLElement>) => void;
   /** The function executed, when we click on the secondary button. */
diff --git a/src/components/statusLabel/StatusLabel.tsx b/src/components/statusLabel/StatusLabel.tsx
index b034b184a..6a83df501 100644
--- a/src/components/statusLabel/StatusLabel.tsx
+++ b/src/components/statusLabel/StatusLabel.tsx
@@ -9,8 +9,8 @@ import theme from './theme.css';
 export interface StatusLabelProps extends Omit<BoxProps, 'size'> {
   children: ReactNode;
   className?: string;
-  color?: Exclude<typeof COLORS[number], 'teal'>;
-  size?: Exclude<typeof SIZES[number], 'tiny' | 'large' | 'fullscreen' | 'smallest' | 'hero'>;
+  color?: Exclude<(typeof COLORS)[number], 'teal'>;
+  size?: Exclude<(typeof SIZES)[number], 'tiny' | 'large' | 'fullscreen' | 'smallest' | 'hero'>;
 }
 
 const StatusLabel: GenericComponent<StatusLabelProps> = forwardRef<HTMLElement, StatusLabelProps>(
diff --git a/src/components/tab/TabGroup.tsx b/src/components/tab/TabGroup.tsx
index 9a9f73a95..e4efef534 100644
--- a/src/components/tab/TabGroup.tsx
+++ b/src/components/tab/TabGroup.tsx
@@ -16,7 +16,7 @@ const SCROLL_DISTANCE = 200;
 export interface TabGroupProps extends Omit<BoxProps, 'children'> {
   children: ReactNode;
   className?: string;
-  size?: Exclude<typeof SIZES[number], 'tiny' | 'large' | 'fullscreen' | 'smallest' | 'hero'>;
+  size?: Exclude<(typeof SIZES)[number], 'tiny' | 'large' | 'fullscreen' | 'smallest' | 'hero'>;
 }
 
 const TabGroup: GenericComponent<TabGroupProps> = ({ children, className, size, ...others }) => {
diff --git a/src/components/tab/TitleTab.tsx b/src/components/tab/TitleTab.tsx
index af6ea3a7b..89f476b3f 100644
--- a/src/components/tab/TitleTab.tsx
+++ b/src/components/tab/TitleTab.tsx
@@ -15,7 +15,7 @@ export interface TitleTabProps extends Omit<BoxProps, 'size' | 'element'> {
   className?: string;
   counter?: ReactNode;
   onClick?: React.MouseEventHandler<HTMLElement>;
-  size?: Exclude<typeof SIZES[number], 'tiny' | 'large' | 'fullscreen' | 'smallest' | 'hero'>;
+  size?: Exclude<(typeof SIZES)[number], 'tiny' | 'large' | 'fullscreen' | 'smallest' | 'hero'>;
 }
 
 const TitleTab: GenericComponent<TitleTabProps> = forwardRef<HTMLElement, TitleTabProps>(
diff --git a/src/components/tag/Tag.tsx b/src/components/tag/Tag.tsx
index e6c6a5849..a2b8275d5 100644
--- a/src/components/tag/Tag.tsx
+++ b/src/components/tag/Tag.tsx
@@ -17,7 +17,7 @@ export interface TagProps extends Omit<BoxProps, 'className' | 'size'> {
   /** The tint of the components color */
   onRemoveClick?: React.MouseEventHandler;
   /** The tint of the components color */
-  size?: Exclude<typeof SIZES[number], 'tiny' | 'fullscreen' | 'smallest' | 'hero'>;
+  size?: Exclude<(typeof SIZES)[number], 'tiny' | 'fullscreen' | 'smallest' | 'hero'>;
 }
 
 const Tag: GenericComponent<TagProps> = ({ children, className, onRemoveClick, size = 'medium', ...others }) => {
diff --git a/src/components/toggle/Toggle.tsx b/src/components/toggle/Toggle.tsx
index 4f2547e5b..ee0b07c73 100644
--- a/src/components/toggle/Toggle.tsx
+++ b/src/components/toggle/Toggle.tsx
@@ -24,7 +24,7 @@ export interface ToggleProps
   className?: string;
   label?: ReactNode;
   onChange?: (event: ChangeEvent<HTMLInputElement>) => void;
-  size?: Exclude<typeof SIZES[number], 'tiny' | 'fullscreen' | 'smallest' | 'hero'>;
+  size?: Exclude<(typeof SIZES)[number], 'tiny' | 'fullscreen' | 'smallest' | 'hero'>;
   labelPosition?: 'left' | 'right';
   fullWidth?: boolean;
 }
diff --git a/src/components/tooltip/Tooltip.tsx b/src/components/tooltip/Tooltip.tsx
index a686c5bff..7940a13df 100644
--- a/src/components/tooltip/Tooltip.tsx
+++ b/src/components/tooltip/Tooltip.tsx
@@ -28,8 +28,8 @@ interface PositionState {
   top: number | string;
   left: number | string;
 }
-export type AllowedColor = Exclude<typeof COLORS[number], 'teal'> | 'white' | 'inverse';
-export type AllowedSize = Exclude<typeof SIZES[number], 'tiny' | 'fullscreen' | 'smallest' | 'hero'>;
+export type AllowedColor = Exclude<(typeof COLORS)[number], 'teal'> | 'white' | 'inverse';
+export type AllowedSize = Exclude<(typeof SIZES)[number], 'tiny' | 'fullscreen' | 'smallest' | 'hero'>;
 const SIZE_MAP: Record<AllowedSize, BoxProps> = {
   large: {
     padding: 4,
diff --git a/src/components/typography/Text.tsx b/src/components/typography/Text.tsx
index 37aee3fb5..fd2e77f64 100644
--- a/src/components/typography/Text.tsx
+++ b/src/components/typography/Text.tsx
@@ -10,11 +10,11 @@ import theme from './theme.css';
 export interface TextProps extends BoxProps {
   children?: ReactNode;
   className?: string;
-  color?: typeof COLORS[number];
+  color?: (typeof COLORS)[number];
   element?: ElementType;
   maxLines?: number;
   style?: CSSProperties;
-  tint?: typeof TINTS[number];
+  tint?: (typeof TINTS)[number];
 }
 
 const factory = (baseType: string, type: string, defaultElement: ElementType) => {
diff --git a/src/components/typography/typography.stories.tsx b/src/components/typography/typography.stories.tsx
index 51124d2c4..5726f7d27 100644
--- a/src/components/typography/typography.stories.tsx
+++ b/src/components/typography/typography.stories.tsx
@@ -23,9 +23,9 @@ export default {
   title: 'Foundation / Typography',
 };
 
-const color: typeof COLORS[number] = 'teal';
+const color: (typeof COLORS)[number] = 'teal';
 const maxLines = undefined;
-const tint: typeof TINTS[number] = 'darkest';
+const tint: (typeof TINTS)[number] = 'darkest';
 export const headings = () => {
   return (
     <>
diff --git a/src/components/widget/Header.tsx b/src/components/widget/Header.tsx
index 29bd6033c..864b7a5e3 100644
--- a/src/components/widget/Header.tsx
+++ b/src/components/widget/Header.tsx
@@ -15,7 +15,7 @@ const PADDING_VERTICAL = {
 export interface HeaderProps extends Omit<BoxProps, 'className' | 'children'> {
   className?: string;
   children?: ReactNode;
-  size?: Exclude<typeof SIZES[number], 'fullscreen' | 'smallest' | 'tiny' | 'hero'>;
+  size?: Exclude<(typeof SIZES)[number], 'fullscreen' | 'smallest' | 'tiny' | 'hero'>;
 }
 
 const Header: GenericComponent<HeaderProps> = ({ children, className, size, ...others }) => {
@@ -29,7 +29,7 @@ const Header: GenericComponent<HeaderProps> = ({ children, className, size, ...o
       display="flex"
       size={size}
       paddingVertical={
-        PADDING_VERTICAL[size as Exclude<typeof SIZES[number], 'fullscreen' | 'smallest' | 'tiny' | 'hero'>]
+        PADDING_VERTICAL[size as Exclude<(typeof SIZES)[number], 'fullscreen' | 'smallest' | 'tiny' | 'hero'>]
       }
     >
       {children}
diff --git a/src/components/widget/Widget.tsx b/src/components/widget/Widget.tsx
index 08c1761d2..61e72e413 100644
--- a/src/components/widget/Widget.tsx
+++ b/src/components/widget/Widget.tsx
@@ -11,7 +11,7 @@ export interface WidgetProps extends Omit<BoxProps, 'children' | 'ref'> {
   /** The content to display inside the widget. */
   children?: ReactNode;
   /** The size which controls the padding of the children. */
-  size?: Exclude<typeof SIZES[number], 'fullscreen' | 'smallest' | 'tiny' | 'hero'>;
+  size?: Exclude<(typeof SIZES)[number], 'fullscreen' | 'smallest' | 'tiny' | 'hero'>;
 }
 
 interface WidgetComponent extends GenericComponent<WidgetProps> {
diff --git a/src/constants/sizes.ts b/src/constants/sizes.ts
index f46226499..7c91ccd19 100644
--- a/src/constants/sizes.ts
+++ b/src/constants/sizes.ts
@@ -10,4 +10,4 @@ export const FULLSCREEN = 'fullscreen';
 
 export const SIZE = { TINY, SMALL, SMALLEST, MEDIUM, LARGE, HERO, FULLSCREEN };
 export const SIZES = Object.keys(SIZE).map((key) => key.toLowerCase()) as unknown as Lowercase<keyof typeof SIZE>[];
-export const sizesWithout = (sizesToExclude: typeof SIZES[number][]) => without(SIZES, ...sizesToExclude);
+export const sizesWithout = (sizesToExclude: (typeof SIZES)[number][]) => without(SIZES, ...sizesToExclude);
diff --git a/yarn.lock b/yarn.lock
index b18f4fb93..e860dac9f 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2688,6 +2688,18 @@
     "@nodelib/fs.scandir" "2.1.5"
     fastq "^1.6.0"
 
+"@pkgr/utils@^2.3.1":
+  version "2.4.2"
+  resolved "https://registry.yarnpkg.com/@pkgr/utils/-/utils-2.4.2.tgz#9e638bbe9a6a6f165580dc943f138fd3309a2cbc"
+  integrity sha512-POgTXhjrTfbTV63DiFXav4lBHiICLKKwDeaKn9Nphwj7WH6m0hMMCaJkMyRWjgtPFyRKRVoMXXjczsTQRDEhYw==
+  dependencies:
+    cross-spawn "^7.0.3"
+    fast-glob "^3.3.0"
+    is-glob "^4.0.3"
+    open "^9.1.0"
+    picocolors "^1.0.0"
+    tslib "^2.6.0"
+
 "@pmmmwh/react-refresh-webpack-plugin@^0.5.5":
   version "0.5.10"
   resolved "https://registry.yarnpkg.com/@pmmmwh/react-refresh-webpack-plugin/-/react-refresh-webpack-plugin-0.5.10.tgz#2eba163b8e7dbabb4ce3609ab5e32ab63dda3ef8"
@@ -5241,6 +5253,13 @@ builtins@^5.0.1:
   dependencies:
     semver "^7.0.0"
 
+bundle-name@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/bundle-name/-/bundle-name-3.0.0.tgz#ba59bcc9ac785fb67ccdbf104a2bf60c099f0e1a"
+  integrity sha512-PKA4BeSvBpQKQ8iPOGCSiell+N8P+Tf1DlwqmYhpe2gAhKPHn8EYOxVT+ShuGmhg8lN8XiSlS80yiExKXrURlw==
+  dependencies:
+    run-applescript "^5.0.0"
+
 bytes@3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/bytes/-/bytes-3.0.0.tgz#d32815404d689699f85a4ea4fa8755dd13a96048"
@@ -6083,7 +6102,7 @@ deepmerge@^4.2.2:
   resolved "https://registry.yarnpkg.com/deepmerge/-/deepmerge-4.2.2.tgz#44d2ea3679b8f4d4ffba33f03d865fc1e7bf4955"
   integrity sha512-FJ3UgI4gIl+PHZm53knsuSFpE+nESMr7M4v9QcgB7S63Kj/6WqMiFQJpBBYz1Pt+66bZpP3Q7Lye0Oo9MPKEdg==
 
-default-browser-id@3.0.0:
+default-browser-id@3.0.0, default-browser-id@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/default-browser-id/-/default-browser-id-3.0.0.tgz#bee7bbbef1f4e75d31f98f4d3f1556a14cea790c"
   integrity sha512-OZ1y3y0SqSICtE8DE4S8YOE9UZOJ8wO16fKWVP5J1Qz42kV9jcnMVFrEE/noXb/ss3Q4pZIH79kxofzyNNtUNA==
@@ -6091,6 +6110,16 @@ default-browser-id@3.0.0:
     bplist-parser "^0.2.0"
     untildify "^4.0.0"
 
+default-browser@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/default-browser/-/default-browser-4.0.0.tgz#53c9894f8810bf86696de117a6ce9085a3cbc7da"
+  integrity sha512-wX5pXO1+BrhMkSbROFsyxUm0i/cJEScyNhA4PPxc41ICuv05ZZB/MX28s8aZx6xjmatvebIapF6hLEKEcpneUA==
+  dependencies:
+    bundle-name "^3.0.0"
+    default-browser-id "^3.0.0"
+    execa "^7.1.1"
+    titleize "^3.0.0"
+
 defaults@^1.0.3:
   version "1.0.4"
   resolved "https://registry.yarnpkg.com/defaults/-/defaults-1.0.4.tgz#b0b02062c1e2aa62ff5d9528f0f98baa90978d7a"
@@ -6103,6 +6132,11 @@ define-lazy-prop@^2.0.0:
   resolved "https://registry.yarnpkg.com/define-lazy-prop/-/define-lazy-prop-2.0.0.tgz#3f7ae421129bcaaac9bc74905c98a0009ec9ee7f"
   integrity sha512-Ds09qNh8yw3khSjiJjiUInaGX9xlqZDY7JVryGxdxV7NPeuqQfplOpQ66yJFZut3jLa5zOwkXw1g9EI2uKh4Og==
 
+define-lazy-prop@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/define-lazy-prop/-/define-lazy-prop-3.0.0.tgz#dbb19adfb746d7fc6d734a06b72f4a00d021255f"
+  integrity sha512-N+MeXYoqr3pOgn8xfyRPREN7gHakLYjhsHhWGT3fWAiL4IkAt0iDw14QiiEm2bE30c5XX5q0FtAA3CK5f9/BUg==
+
 define-properties@^1.1.3:
   version "1.1.3"
   resolved "https://registry.yarnpkg.com/define-properties/-/define-properties-1.1.3.tgz#cf88da6cbee26fe6db7094f61d870cbd84cee9f1"
@@ -6678,10 +6712,10 @@ escodegen@^2.0.0:
   optionalDependencies:
     source-map "~0.6.1"
 
-eslint-config-prettier@^8.0.0:
-  version "8.8.0"
-  resolved "https://registry.yarnpkg.com/eslint-config-prettier/-/eslint-config-prettier-8.8.0.tgz#bfda738d412adc917fd7b038857110efe98c9348"
-  integrity sha512-wLbQiFre3tdGgpDv67NQKnJuTlcUVYHas3k+DZCc2U2BadthoEY4B7hLPvAxaqdyOGCzuLfii2fqGph10va7oA==
+eslint-config-prettier@^9.0.0:
+  version "9.0.0"
+  resolved "https://registry.yarnpkg.com/eslint-config-prettier/-/eslint-config-prettier-9.0.0.tgz#eb25485946dd0c66cd216a46232dc05451518d1f"
+  integrity sha512-IcJsTkJae2S35pRsRAwoCE+925rJJStOdkKnLVgtE+tEpqU0EVVM7OqrwxqgptKdX29NUwC82I5pXsGFIgSevw==
 
 eslint-config-standard-jsx@^11.0.0:
   version "11.0.0"
@@ -6783,12 +6817,13 @@ eslint-plugin-node@^11.0.0:
     resolve "^1.10.1"
     semver "^6.1.0"
 
-eslint-plugin-prettier@^4.0.0:
-  version "4.2.1"
-  resolved "https://registry.yarnpkg.com/eslint-plugin-prettier/-/eslint-plugin-prettier-4.2.1.tgz#651cbb88b1dab98bfd42f017a12fa6b2d993f94b"
-  integrity sha512-f/0rXLXUt0oFYs8ra4w49wYZBG5GKZpAYsJSm6rnYL5uVDjd+zowwMwVZHnAjf4edNrKpCDYfXDgmRE/Ak7QyQ==
+eslint-plugin-prettier@^5.0.0:
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/eslint-plugin-prettier/-/eslint-plugin-prettier-5.0.0.tgz#6887780ed95f7708340ec79acfdf60c35b9be57a"
+  integrity sha512-AgaZCVuYDXHUGxj/ZGu1u8H8CYgDY3iG6w5kUFw4AzMVXzB7VvbKgYR4nATIN+OvUrghMbiDLeimVjVY5ilq3w==
   dependencies:
     prettier-linter-helpers "^1.0.0"
+    synckit "^0.8.5"
 
 eslint-plugin-promise@^6.0.0:
   version "6.1.1"
@@ -7048,6 +7083,21 @@ execa@^5.0.0, execa@^5.1.1:
     signal-exit "^3.0.3"
     strip-final-newline "^2.0.0"
 
+execa@^7.1.1:
+  version "7.2.0"
+  resolved "https://registry.yarnpkg.com/execa/-/execa-7.2.0.tgz#657e75ba984f42a70f38928cedc87d6f2d4fe4e9"
+  integrity sha512-UduyVP7TLB5IcAQl+OzLyLcS/l32W/GLg+AhHJ+ow40FOk2U3SAllPwR44v4vmdFwIWqpdwxxpQbF1n5ta9seA==
+  dependencies:
+    cross-spawn "^7.0.3"
+    get-stream "^6.0.1"
+    human-signals "^4.3.0"
+    is-stream "^3.0.0"
+    merge-stream "^2.0.0"
+    npm-run-path "^5.1.0"
+    onetime "^6.0.0"
+    signal-exit "^3.0.7"
+    strip-final-newline "^3.0.0"
+
 executable@^4.1.0:
   version "4.1.1"
   resolved "https://registry.yarnpkg.com/executable/-/executable-4.1.1.tgz#41532bff361d3e57af4d763b70582db18f5d133c"
@@ -7180,6 +7230,17 @@ fast-glob@^3.2.11, fast-glob@^3.2.9:
     merge2 "^1.3.0"
     micromatch "^4.0.4"
 
+fast-glob@^3.3.0:
+  version "3.3.1"
+  resolved "https://registry.yarnpkg.com/fast-glob/-/fast-glob-3.3.1.tgz#784b4e897340f3dbbef17413b3f11acf03c874c4"
+  integrity sha512-kNFPyjhh5cKjrUltxs+wFx+ZkbRaxxmZ+X0ZU31SOsxCEtP9VPgtq2teZw1DebupL5GmDaNQ6yKMMVcM41iqDg==
+  dependencies:
+    "@nodelib/fs.stat" "^2.0.2"
+    "@nodelib/fs.walk" "^1.2.3"
+    glob-parent "^5.1.2"
+    merge2 "^1.3.0"
+    micromatch "^4.0.4"
+
 fast-json-parse@^1.0.3:
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/fast-json-parse/-/fast-json-parse-1.0.3.tgz#43e5c61ee4efa9265633046b770fb682a7577c4d"
@@ -7707,7 +7768,7 @@ get-stream@^5.0.0:
   dependencies:
     pump "^3.0.0"
 
-get-stream@^6.0.0:
+get-stream@^6.0.0, get-stream@^6.0.1:
   version "6.0.1"
   resolved "https://registry.yarnpkg.com/get-stream/-/get-stream-6.0.1.tgz#a262d8eef67aced57c2852ad6167526a43cbf7b7"
   integrity sha512-ts6Wi+2j3jQjqi70w5AlN8DFnkSwC+MqmxEzdEALB2qXZYV3X/b1CTfgPLGJNMeAWxdPfU8FO1ms3NUfaHCPYg==
@@ -8176,6 +8237,11 @@ human-signals@^2.1.0:
   resolved "https://registry.yarnpkg.com/human-signals/-/human-signals-2.1.0.tgz#dc91fcba42e4d06e4abaed33b3e7a3c02f514ea0"
   integrity sha512-B4FFZ6q/T2jhhksgkbEW3HBvWIfDW85snkQgawt07S7J5QXTk6BkNV+0yAeZrM5QpMAdYlocGoljn0sJ/WQkFw==
 
+human-signals@^4.3.0:
+  version "4.3.1"
+  resolved "https://registry.yarnpkg.com/human-signals/-/human-signals-4.3.1.tgz#ab7f811e851fca97ffbd2c1fe9a958964de321b2"
+  integrity sha512-nZXjEF2nbo7lIw3mgYjItAfgQXog3OjJogSbKa2CQIIvSGWcKgeJnQlNXip6NglNzYH45nSRiEVimMvYL8DDqQ==
+
 husky@^8.0.1:
   version "8.0.1"
   resolved "https://registry.yarnpkg.com/husky/-/husky-8.0.1.tgz#511cb3e57de3e3190514ae49ed50f6bc3f50b3e9"
@@ -8518,6 +8584,11 @@ is-docker@^2.0.0, is-docker@^2.1.1:
   resolved "https://registry.yarnpkg.com/is-docker/-/is-docker-2.2.1.tgz#33eeabe23cfe86f14bde4408a02c0cfb853acdaa"
   integrity sha512-F+i2BKsFrH66iaUFc0woD8sLy8getkwTwtOBjvs56Cx4CgJDeKQeqfz8wAYiSb8JOprWhHH5p77PbmYCvvUuXQ==
 
+is-docker@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/is-docker/-/is-docker-3.0.0.tgz#90093aa3106277d8a77a5910dbae71747e15a200"
+  integrity sha512-eljcgEDlEns/7AXFosB5K/2nCM4P7FQPkGc/DWLy5rmFEWvZayGrik1d9/QIY5nJ4f9YsVvBkA6kJpHn9rISdQ==
+
 is-extglob@^2.1.1:
   version "2.1.1"
   resolved "https://registry.yarnpkg.com/is-extglob/-/is-extglob-2.1.1.tgz#a88c02535791f02ed37c76a1b9ea9773c833f8c2"
@@ -8571,6 +8642,13 @@ is-gzip@^1.0.0:
   resolved "https://registry.yarnpkg.com/is-gzip/-/is-gzip-1.0.0.tgz#6ca8b07b99c77998025900e555ced8ed80879a83"
   integrity sha512-rcfALRIb1YewtnksfRIHGcIY93QnK8BIQ/2c9yDYcG/Y6+vRoJuTWBmmSEbyLLYtXm7q35pHOHbZFQBaLrhlWQ==
 
+is-inside-container@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/is-inside-container/-/is-inside-container-1.0.0.tgz#e81fba699662eb31dbdaf26766a61d4814717ea4"
+  integrity sha512-KIYLCCJghfHZxqjYBE7rEy0OBuTd5xCHS7tHVgvCLkx7StIoaxwNW3hCALgEUjFfeRk+MG/Qxmp/vtETEF3tRA==
+  dependencies:
+    is-docker "^3.0.0"
+
 is-interactive@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/is-interactive/-/is-interactive-1.0.0.tgz#cea6e6ae5c870a7b0a0004070b7b587e0252912e"
@@ -8714,6 +8792,11 @@ is-stream@^2.0.0:
   resolved "https://registry.yarnpkg.com/is-stream/-/is-stream-2.0.0.tgz#bde9c32680d6fae04129d6ac9d921ce7815f78e3"
   integrity sha512-XCoy+WlUr7d1+Z8GgSuXmpuUFC9fOhRXglJMx+dwLKTkL44Cjd4W1Z5P+BQZpr+cR93aGP4S/s7Ftw6Nd/kiEw==
 
+is-stream@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/is-stream/-/is-stream-3.0.0.tgz#e6bfd7aa6bef69f4f472ce9bb681e3e57b4319ac"
+  integrity sha512-LnQR4bZ9IADDRSkvpqMGvt/tEJWclzklNgSw48V5EAaAeDd6qGvN8ei6k5p0tvxSR171VmGyHuTiAOfxAbr8kA==
+
 is-string@^1.0.5:
   version "1.0.5"
   resolved "https://registry.yarnpkg.com/is-string/-/is-string-1.0.5.tgz#40493ed198ef3ff477b8c7f92f644ec82a5cd3a6"
@@ -10352,6 +10435,11 @@ mimic-fn@^2.1.0:
   resolved "https://registry.yarnpkg.com/mimic-fn/-/mimic-fn-2.1.0.tgz#7ed2c2ccccaf84d3ffcb7a69b57711fc2083401b"
   integrity sha512-OqbOk5oEQeAZ8WXWydlu9HJjz9WVdEIvamMCcXmuqUYjTknH/sqsWvhQ3vgwKFRR1HpjvNBKQ37nbJgYzGqGcg==
 
+mimic-fn@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/mimic-fn/-/mimic-fn-4.0.0.tgz#60a90550d5cb0b239cca65d893b1a53b29871ecc"
+  integrity sha512-vqiC06CuhBTUdZH+RYl8sFrL096vA45Ok5ISO6sE/Mr1jRbGH4Csnhi8f3wKVl7x8mO4Au7Ir9D3Oyv1VYMFJw==
+
 mimic-response@^1.0.0:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/mimic-response/-/mimic-response-1.0.1.tgz#4923538878eef42063cb8a3e3b0798781487ab1b"
@@ -10622,6 +10710,13 @@ npm-run-path@^4.0.0, npm-run-path@^4.0.1:
   dependencies:
     path-key "^3.0.0"
 
+npm-run-path@^5.1.0:
+  version "5.1.0"
+  resolved "https://registry.yarnpkg.com/npm-run-path/-/npm-run-path-5.1.0.tgz#bc62f7f3f6952d9894bd08944ba011a6ee7b7e00"
+  integrity sha512-sJOdmRGrY2sjNTRMbSvluQqg+8X7ZK61yvzBEIDhz4f8z1TZFYABsqjjCBd/0PUNE9M6QDgHJXQkGUEm7Q+l9Q==
+  dependencies:
+    path-key "^4.0.0"
+
 npmlog@^5.0.1:
   version "5.0.1"
   resolved "https://registry.yarnpkg.com/npmlog/-/npmlog-5.0.1.tgz#f06678e80e29419ad67ab964e0fa69959c1eb8b0"
@@ -10770,6 +10865,13 @@ onetime@^5.1.2:
   dependencies:
     mimic-fn "^2.1.0"
 
+onetime@^6.0.0:
+  version "6.0.0"
+  resolved "https://registry.yarnpkg.com/onetime/-/onetime-6.0.0.tgz#7c24c18ed1fd2e9bca4bd26806a33613c77d34b4"
+  integrity sha512-1FlR+gjXK7X+AsAHso35MnyN5KqGwJRi/31ft6x0M194ht7S+rWAvd7PHss9xSKMzE0asv1pyIHaJYq+BbacAQ==
+  dependencies:
+    mimic-fn "^4.0.0"
+
 open@^7.0.3:
   version "7.4.2"
   resolved "https://registry.yarnpkg.com/open/-/open-7.4.2.tgz#b8147e26dcf3e426316c730089fd71edd29c2321"
@@ -10787,6 +10889,16 @@ open@^8.4.0:
     is-docker "^2.1.1"
     is-wsl "^2.2.0"
 
+open@^9.1.0:
+  version "9.1.0"
+  resolved "https://registry.yarnpkg.com/open/-/open-9.1.0.tgz#684934359c90ad25742f5a26151970ff8c6c80b6"
+  integrity sha512-OS+QTnw1/4vrf+9hh1jc1jnYjzSG4ttTBB8UxOwAnInG3Uo4ssetzC1ihqaIHjLJnA5GGlRl6QlZXOTQhRBUvg==
+  dependencies:
+    default-browser "^4.0.0"
+    define-lazy-prop "^3.0.0"
+    is-inside-container "^1.0.0"
+    is-wsl "^2.2.0"
+
 optionator@^0.8.1:
   version "0.8.3"
   resolved "https://registry.yarnpkg.com/optionator/-/optionator-0.8.3.tgz#84fa1d036fe9d3c7e21d99884b601167ec8fb495"
@@ -11084,6 +11196,11 @@ path-key@^3.0.0, path-key@^3.1.0:
   resolved "https://registry.yarnpkg.com/path-key/-/path-key-3.1.1.tgz#581f6ade658cbba65a0d3380de7753295054f375"
   integrity sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==
 
+path-key@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/path-key/-/path-key-4.0.0.tgz#295588dc3aee64154f877adb9d780b81c554bf18"
+  integrity sha512-haREypq7xkM7ErfgIyA0z+Bj4AGKlMSdlQE2jvJo6huWD1EdkKYV+G/T4nq0YEF2vgTT8kqMFKo1uHn950r4SQ==
+
 path-parse@^1.0.7:
   version "1.0.7"
   resolved "https://registry.yarnpkg.com/path-parse/-/path-parse-1.0.7.tgz#fbc114b60ca42b30d9daf5858e4bd68bbedb6735"
@@ -11679,10 +11796,10 @@ prettier-linter-helpers@^1.0.0:
   dependencies:
     fast-diff "^1.1.2"
 
-prettier@2.8.0:
-  version "2.8.0"
-  resolved "https://registry.yarnpkg.com/prettier/-/prettier-2.8.0.tgz#c7df58393c9ba77d6fba3921ae01faf994fb9dc9"
-  integrity sha512-9Lmg8hTFZKG0Asr/kW9Bp8tJjRVluO8EJQVfY2T7FMw9T5jy4I/Uvx0Rca/XWf50QQ1/SS48+6IJWnrb+2yemA==
+prettier@3.0.3:
+  version "3.0.3"
+  resolved "https://registry.yarnpkg.com/prettier/-/prettier-3.0.3.tgz#432a51f7ba422d1469096c0fdc28e235db8f9643"
+  integrity sha512-L/4pUDMxcNa8R/EthV08Zt42WBO4h1rarVtK0K+QJG0X187OLo7l699jWw0GKuwzkPQ//jMFA/8Xm6Fh3J/DAg==
 
 prettier@^2.8.0:
   version "2.8.8"
@@ -12477,6 +12594,13 @@ rimraf@~2.6.2:
   dependencies:
     glob "^7.1.3"
 
+run-applescript@^5.0.0:
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/run-applescript/-/run-applescript-5.0.0.tgz#e11e1c932e055d5c6b40d98374e0268d9b11899c"
+  integrity sha512-XcT5rBksx1QdIhlFOCtgZkB99ZEouFZ1E2Kc2LHqNW13U3/74YGdkQRmThTwxy4QIyookibDKYZOPqX//6BlAg==
+  dependencies:
+    execa "^5.0.0"
+
 run-parallel@^1.1.9:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/run-parallel/-/run-parallel-1.2.0.tgz#66d1368da7bdf921eb9d95bd1a9229e7f21a43ee"
@@ -13078,6 +13202,11 @@ strip-final-newline@^2.0.0:
   resolved "https://registry.yarnpkg.com/strip-final-newline/-/strip-final-newline-2.0.0.tgz#89b852fb2fcbe936f6f4b3187afb0a12c1ab58ad"
   integrity sha512-BrpvfNAE3dcvq7ll3xVumzjKjZQ5tI1sEUIKr3Uoks0XUl45St3FlatVqef9prk4jRDzhW6WZg+3bk93y6pLjA==
 
+strip-final-newline@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/strip-final-newline/-/strip-final-newline-3.0.0.tgz#52894c313fbff318835280aed60ff71ebf12b8fd"
+  integrity sha512-dOESqjYr96iWYylGObzd39EuNTa5VJxyvVAEm5Jnh7KGo75V43Hk1odPQkNDyXNmUR6k+gEiDVXnjB8HJ3crXw==
+
 strip-indent@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/strip-indent/-/strip-indent-1.0.1.tgz#0c7962a6adefa7bbd4ac366460a638552ae1a0a2"
@@ -13173,6 +13302,14 @@ synchronous-promise@^2.0.15:
   resolved "https://registry.yarnpkg.com/synchronous-promise/-/synchronous-promise-2.0.15.tgz#07ca1822b9de0001f5ff73595f3d08c4f720eb8e"
   integrity sha512-k8uzYIkIVwmT+TcglpdN50pS2y1BDcUnBPK9iJeGu0Pl1lOI8pD6wtzgw91Pjpe+RxtTncw32tLxs/R0yNL2Mg==
 
+synckit@^0.8.5:
+  version "0.8.5"
+  resolved "https://registry.yarnpkg.com/synckit/-/synckit-0.8.5.tgz#b7f4358f9bb559437f9f167eb6bc46b3c9818fa3"
+  integrity sha512-L1dapNV6vu2s/4Sputv8xGsCdAVlb5nRDMFU/E27D44l5U6cw1g0dGd45uLc+OXjNMmF4ntiMdCimzcjFKQI8Q==
+  dependencies:
+    "@pkgr/utils" "^2.3.1"
+    tslib "^2.5.0"
+
 tapable@^2.0.0, tapable@^2.1.1, tapable@^2.2.0, tapable@^2.2.1:
   version "2.2.1"
   resolved "https://registry.yarnpkg.com/tapable/-/tapable-2.2.1.tgz#1967a73ef4060a82f12ab96af86d52fdb76eeca0"
@@ -13370,6 +13507,11 @@ timed-out@^4.0.0, timed-out@^4.0.1:
   resolved "https://registry.yarnpkg.com/timed-out/-/timed-out-4.0.1.tgz#f32eacac5a175bea25d7fab565ab3ed8741ef56f"
   integrity sha1-8y6srFoXW+ol1/q1Zas+2HQe9W8=
 
+titleize@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/titleize/-/titleize-3.0.0.tgz#71c12eb7fdd2558aa8a44b0be83b8a76694acd53"
+  integrity sha512-KxVu8EYHDPBdUYdKZdKtU2aj2XfEx9AfjXxE/Aj0vT06w2icA09Vus1rh6eSu1y01akYg6BjIK/hxyLJINoMLQ==
+
 tmpl@1.0.5:
   version "1.0.5"
   resolved "https://registry.yarnpkg.com/tmpl/-/tmpl-1.0.5.tgz#8683e0b902bb9c20c4f726e3c0b69f36518c07cc"
@@ -13476,6 +13618,11 @@ tslib@^2.0.3:
   resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.4.0.tgz#7cecaa7f073ce680a05847aa77be941098f36dc3"
   integrity sha512-d6xOpEDfsi2CZVlPQzGeux8XMwLT9hssAsaPYExaQMuYskwb+x1x7J371tWlbBdWHroy99KnVB6qIkUbs5X3UQ==
 
+tslib@^2.5.0, tslib@^2.6.0:
+  version "2.6.2"
+  resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.6.2.tgz#703ac29425e7b37cd6fd456e92404d46d1f3e4ae"
+  integrity sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q==
+
 tsutils@^3.21.0:
   version "3.21.0"
   resolved "https://registry.yarnpkg.com/tsutils/-/tsutils-3.21.0.tgz#b48717d394cea6c1e096983eed58e9d61715b623"