diff --git a/src/axe/testA11y.ts b/src/axe/testA11y.ts
index 482e29b93..9c2fcf027 100644
--- a/src/axe/testA11y.ts
+++ b/src/axe/testA11y.ts
@@ -22,7 +22,7 @@ import {render} from '@testing-library/react';
  * ```
  */
 
-// @ts-expect-error TS7006
+// @ts-ignore TS7006
 export default async function testA11y(node, axeOptions?) {
   const container = React.isValidElement(node)
     ? render(node, axeOptions).container
diff --git a/src/chromatic/HoverStyle.tsx b/src/chromatic/HoverStyle.tsx
index 94f01d487..bcacae185 100644
--- a/src/chromatic/HoverStyle.tsx
+++ b/src/chromatic/HoverStyle.tsx
@@ -48,17 +48,17 @@ const applyHoverStates = (
 
   const hoverStylesheet = hStylesheet.sheet;
 
-  // @ts-expect-error TS18047
+  // @ts-ignore TS18047
   if (!hoverStylesheet.cssRules || hoverStylesheet.cssRules.length !== 0) {
     return;
   }
 
   const insertUnhoveredRule = (unhoveredSelector: string) => {
     if (unhoveredSelector) {
-      // @ts-expect-error TS18047
+      // @ts-ignore TS18047
       hoverStylesheet.insertRule(
         unhoveredSelector,
-        // @ts-expect-error TS18047
+        // @ts-ignore TS18047
         hoverStylesheet.cssRules.length
       );
     }
@@ -72,7 +72,7 @@ const applyHoverStates = (
       if (conditionText) {
         Array.from((rule as CSSGroupingRule).cssRules).forEach(r => {
           insertUnhoveredRule(
-            // @ts-expect-error TS2345
+            // @ts-ignore TS2345
             generateUnhoveredSelector(
               r as CSSStyleRule,
               hoverContainerId,
@@ -82,7 +82,7 @@ const applyHoverStates = (
         });
       } else {
         insertUnhoveredRule(
-          // @ts-expect-error TS2345
+          // @ts-ignore TS2345
           generateUnhoveredSelector(rule as CSSStyleRule, hoverContainerId)
         );
       }
@@ -103,7 +103,7 @@ const HoverStyle = ({
   const hoverContainerId = 'hover-container';
 
   React.useEffect(() => {
-    // @ts-expect-error TS2345
+    // @ts-ignore TS2345
     applyHoverStates(hoverContainerId, styleheetRef.current);
   }, []);
 
diff --git a/src/chromatic/utils.tsx b/src/chromatic/utils.tsx
index 4a34e58ed..9052fbbf6 100644
--- a/src/chromatic/utils.tsx
+++ b/src/chromatic/utils.tsx
@@ -27,7 +27,7 @@ export const generateChromaticStory: any = (
           const storyName = !isNew && storyToHover;
 
           return (
-            // @ts-expect-error TS2322
+            // @ts-ignore TS2322
             <HoverStyle storyName={storyName} key={storyName || i}>
               <HoverStory {...module.default.args} {...HoverStory.args} />
             </HoverStyle>
@@ -37,7 +37,7 @@ export const generateChromaticStory: any = (
   );
 };
 
-// @ts-expect-error TS7006
+// @ts-ignore TS7006
 const mergeStories: any = module => {
   const stories = Object.keys(module)
     .filter(
diff --git a/src/components/accordion/Accordion.chromatic.stories.tsx b/src/components/accordion/Accordion.chromatic.stories.tsx
index 6b3e0c931..b63ec3c4c 100644
--- a/src/components/accordion/Accordion.chromatic.stories.tsx
+++ b/src/components/accordion/Accordion.chromatic.stories.tsx
@@ -14,7 +14,7 @@ const copy = {
     "Now your family member just needs to open the link and hit 'accept'. If they aren't already on Brainly",
 };
 
-// @ts-expect-error TS7006
+// @ts-ignore TS7006
 const WithTooltip = args => {
   const handleChange = () => null;
 
diff --git a/src/components/accordion/Accordion.tsx b/src/components/accordion/Accordion.tsx
index 14680cb43..aa1921907 100644
--- a/src/components/accordion/Accordion.tsx
+++ b/src/components/accordion/Accordion.tsx
@@ -167,7 +167,7 @@ const Accordion = ({
     const wrapper = wrapperRef.current;
 
     function handleKeyDown(event: KeyboardEvent) {
-      // @ts-expect-error TS7053
+      // @ts-ignore TS7053
       const key = KEY_CODES[event.keyCode];
 
       if (['space', 'enter'].includes(key)) {
diff --git a/src/components/action-list/ActionList.spec.tsx b/src/components/action-list/ActionList.spec.tsx
index e01e739e8..61788e8c6 100644
--- a/src/components/action-list/ActionList.spec.tsx
+++ b/src/components/action-list/ActionList.spec.tsx
@@ -18,7 +18,7 @@ describe('ActionList', () => {
     );
     const root = actionList.container.firstElementChild;
 
-    // @ts-expect-error TS18047
+    // @ts-ignore TS18047
     expect(root.classList.contains('sg-actions-list')).toEqual(true);
   });
 
@@ -26,7 +26,7 @@ describe('ActionList', () => {
     const actionList = render(<ActionList direction={DIRECTION.TO_RIGHT} />);
     const root = actionList.container.firstElementChild;
 
-    // @ts-expect-error TS18047
+    // @ts-ignore TS18047
     expect(root.classList.contains('sg-actions-list--to-right')).toEqual(true);
   });
 
@@ -34,7 +34,7 @@ describe('ActionList', () => {
     const actionList = render(<ActionList toTop />);
     const root = actionList.container.firstElementChild;
 
-    // @ts-expect-error TS18047
+    // @ts-ignore TS18047
     expect(root.classList.contains('sg-actions-list--to-top')).toEqual(true);
   });
 
@@ -42,7 +42,7 @@ describe('ActionList', () => {
     const actionList = render(<ActionList align={ALIGNMENT.BASELINE} />);
     const root = actionList.container.firstElementChild;
 
-    // @ts-expect-error TS18047
+    // @ts-ignore TS18047
     expect(root.classList.contains('sg-actions-list--align-baseline')).toEqual(
       true
     );
@@ -52,7 +52,7 @@ describe('ActionList', () => {
     const actionList = render(<ActionList direction={DIRECTION.CENTERED} />);
     const root = actionList.container.firstElementChild;
 
-    // @ts-expect-error TS18047
+    // @ts-ignore TS18047
     expect(root.classList.contains('sg-actions-list--centered')).toEqual(true);
   });
 
@@ -62,7 +62,7 @@ describe('ActionList', () => {
     );
     const root = actionList.container.firstElementChild;
 
-    // @ts-expect-error TS18047
+    // @ts-ignore TS18047
     expect(root.classList.contains('sg-actions-list--space-between')).toEqual(
       true
     );
@@ -74,7 +74,7 @@ describe('ActionList', () => {
     );
     const root = actionList.container.firstElementChild;
 
-    // @ts-expect-error TS18047
+    // @ts-ignore TS18047
     expect(root.classList.contains('sg-actions-list--space-around')).toEqual(
       true
     );
@@ -86,7 +86,7 @@ describe('ActionList', () => {
     );
     const root = actionList.container.firstElementChild;
 
-    // @ts-expect-error TS18047
+    // @ts-ignore TS18047
     expect(root.classList.contains('sg-actions-list--space-evenly')).toEqual(
       true
     );
@@ -96,7 +96,7 @@ describe('ActionList', () => {
     const actionList = render(<ActionList noWrap />);
     const root = actionList.container.firstElementChild;
 
-    // @ts-expect-error TS18047
+    // @ts-ignore TS18047
     expect(root.classList.contains('sg-actions-list--no-wrap')).toEqual(true);
   });
 });
diff --git a/src/components/action-list/ActionListHole.spec.tsx b/src/components/action-list/ActionListHole.spec.tsx
index fcb95c156..3a816f4d0 100644
--- a/src/components/action-list/ActionListHole.spec.tsx
+++ b/src/components/action-list/ActionListHole.spec.tsx
@@ -14,7 +14,7 @@ describe('<ActionListHole />', () => {
     );
 
     expect(
-      // @ts-expect-error TS18047
+      // @ts-ignore TS18047
       actionListHole.container.firstElementChild.classList.contains(
         'sg-actions-list__hole'
       )
@@ -27,7 +27,7 @@ describe('<ActionListHole />', () => {
     );
 
     expect(
-      // @ts-expect-error TS18047
+      // @ts-ignore TS18047
       actionListHole.container.firstElementChild.classList.contains(
         'sg-actions-list__hole--container'
       )
@@ -39,7 +39,7 @@ describe('<ActionListHole />', () => {
     );
 
     expect(
-      // @ts-expect-error TS18047
+      // @ts-ignore TS18047
       actionListHole.container.firstElementChild.classList.contains(
         'sg-actions-list__hole--no-spacing'
       )
@@ -51,7 +51,7 @@ describe('<ActionListHole />', () => {
     );
 
     expect(
-      // @ts-expect-error TS18047
+      // @ts-ignore TS18047
       actionListHole.container.firstElementChild.classList.contains(
         'sg-actions-list__hole--space-bellow'
       )
@@ -63,7 +63,7 @@ describe('<ActionListHole />', () => {
     );
 
     expect(
-      // @ts-expect-error TS18047
+      // @ts-ignore TS18047
       actionListHole.container.firstElementChild.classList.contains(
         'sg-actions-list__hole--no-shrink'
       )
@@ -73,7 +73,7 @@ describe('<ActionListHole />', () => {
     const actionListHole = render(<ActionListHole grow>test</ActionListHole>);
 
     expect(
-      // @ts-expect-error TS18047
+      // @ts-ignore TS18047
       actionListHole.container.firstElementChild.classList.contains(
         'sg-actions-list__hole--grow'
       )
@@ -83,7 +83,7 @@ describe('<ActionListHole />', () => {
     const actionListHole = render(<ActionListHole toEnd>test</ActionListHole>);
 
     expect(
-      // @ts-expect-error TS18047
+      // @ts-ignore TS18047
       actionListHole.container.firstElementChild.classList.contains(
         'sg-actions-list__hole--to-end'
       )
@@ -95,7 +95,7 @@ describe('<ActionListHole />', () => {
     );
 
     expect(
-      // @ts-expect-error TS18047
+      // @ts-ignore TS18047
       actionListHole.container.firstElementChild.classList.contains(
         'sg-actions-list__hole--to-right'
       )
@@ -107,7 +107,7 @@ describe('<ActionListHole />', () => {
     );
 
     expect(
-      // @ts-expect-error TS18047
+      // @ts-ignore TS18047
       actionListHole.container.firstElementChild.classList.contains(
         'sg-actions-list__hole--to-right'
       )
@@ -121,7 +121,7 @@ describe('<ActionListHole />', () => {
     );
 
     expect(
-      // @ts-expect-error TS18047
+      // @ts-ignore TS18047
       actionListHole.container.firstElementChild.classList.contains(
         'sg-actions-list__hole--spaced-small'
       )
@@ -135,7 +135,7 @@ describe('<ActionListHole />', () => {
     );
 
     expect(
-      // @ts-expect-error TS18047
+      // @ts-ignore TS18047
       actionListHole.container.firstElementChild.classList.contains(
         'sg-actions-list__hole--spaced-xsmall'
       )
@@ -147,7 +147,7 @@ describe('<ActionListHole />', () => {
     );
 
     expect(
-      // @ts-expect-error TS18047
+      // @ts-ignore TS18047
       actionListHole.container.firstElementChild.classList.contains(
         'sg-actions-list__hole--equal-width'
       )
diff --git a/src/components/box/Box.chromatic.stories.tsx b/src/components/box/Box.chromatic.stories.tsx
index 99d9f80d9..f71aa1044 100644
--- a/src/components/box/Box.chromatic.stories.tsx
+++ b/src/components/box/Box.chromatic.stories.tsx
@@ -6,7 +6,7 @@ import {
   responsivePropsStoryLabel,
 } from '../../chromatic/utils';
 
-// @ts-expect-error TS7006
+// @ts-ignore TS7006
 export const ResponsiveProps = args => {
   return (
     <div>
diff --git a/src/components/buttons/Button.tsx b/src/components/buttons/Button.tsx
index b3a220bfe..c38892789 100644
--- a/src/components/buttons/Button.tsx
+++ b/src/components/buttons/Button.tsx
@@ -369,7 +369,7 @@ const Button = React.forwardRef(
       ico = <span className={iconClass}>{icon}</span>;
     }
 
-    // @ts-expect-error TS7006
+    // @ts-ignore TS7006
     const onButtonClick = e => {
       if (isLink && isDisabled) {
         return;
@@ -386,7 +386,7 @@ const Button = React.forwardRef(
         className={btnClass}
         href={href}
         disabled={isDisabled}
-        // @ts-expect-error generics while using React.forwardRef
+        // @ts-ignore generics while using React.forwardRef
         ref={ref}
         target={target}
         aria-label={ariaLabel}
diff --git a/src/components/buttons/ButtonLite.tsx b/src/components/buttons/ButtonLite.tsx
index 4b89a1dd0..b3983bea1 100644
--- a/src/components/buttons/ButtonLite.tsx
+++ b/src/components/buttons/ButtonLite.tsx
@@ -217,7 +217,7 @@ const ButtonLite = ({
     );
   }
 
-  // @ts-expect-error TS7006
+  // @ts-ignore TS7006
   const onButtonClick = e => {
     if (isLink && isDisabled) {
       return;
diff --git a/src/components/card-interactive/CardCheckbox.tsx b/src/components/card-interactive/CardCheckbox.tsx
index c14d34dbd..f97cb0f55 100644
--- a/src/components/card-interactive/CardCheckbox.tsx
+++ b/src/components/card-interactive/CardCheckbox.tsx
@@ -168,7 +168,7 @@ export const CardCheckboxRoot = React.forwardRef<
     };
 
     const onInputChange = React.useCallback(
-      // @ts-expect-error TS7006
+      // @ts-ignore TS7006
       e => {
         if (!isControlled) {
           setIsChecked(val => !val);
@@ -189,9 +189,9 @@ export const CardCheckboxRoot = React.forwardRef<
       <CardCheckboxContext.Provider
         value={{
           checked: isChecked,
-          // @ts-expect-error TS2322
+          // @ts-ignore TS2322
           indeterminate,
-          // @ts-expect-error TS2322
+          // @ts-ignore TS2322
           disabled,
         }}
       >
diff --git a/src/components/card-interactive/CardRadio.tsx b/src/components/card-interactive/CardRadio.tsx
index b9bf0df33..a8fc755e4 100644
--- a/src/components/card-interactive/CardRadio.tsx
+++ b/src/components/card-interactive/CardRadio.tsx
@@ -153,7 +153,7 @@ const CardRadio = React.forwardRef<HTMLInputElement, CardRadioPropsType>(
       <CardRadioContext.Provider
         value={{
           checked: isChecked,
-          // @ts-expect-error TS2322
+          // @ts-ignore TS2322
           disabled,
         }}
       >
diff --git a/src/components/chip/Chip.tsx b/src/components/chip/Chip.tsx
index 37bcabf1b..adafdbd15 100644
--- a/src/components/chip/Chip.tsx
+++ b/src/components/chip/Chip.tsx
@@ -151,11 +151,11 @@ const Chip = ({
 
   const isControlled = checked !== undefined || isWithinChipGroup;
   const isChecked = isControlled
-    ? // @ts-expect-error TS2345
+    ? // @ts-ignore TS2345
       checked ?? isCheckedWithinGroup(chipGroupContext.groupValue, value)
     : undefined;
 
-  // @ts-expect-error TS7006
+  // @ts-ignore TS7006
   const onInputChange = e => {
     if (isWithinChipGroup) {
       chipGroupContext.onChipChange(e, value);
diff --git a/src/components/chip/ChipGroup.spec.tsx b/src/components/chip/ChipGroup.spec.tsx
index 05ee0ce07..e158a40eb 100644
--- a/src/components/chip/ChipGroup.spec.tsx
+++ b/src/components/chip/ChipGroup.spec.tsx
@@ -8,7 +8,7 @@ import {testA11y} from '../../axe';
 const chips = ['option-a', 'option-b'];
 
 describe('<ChipGroup />', () => {
-  // @ts-expect-error TS7006
+  // @ts-ignore TS7006
   const renderChipGroup = props =>
     render(
       <ChipGroup {...props} name="chipgroup">
diff --git a/src/components/chip/ChipGroup.tsx b/src/components/chip/ChipGroup.tsx
index 8673754fd..a72ee3ae1 100644
--- a/src/components/chip/ChipGroup.tsx
+++ b/src/components/chip/ChipGroup.tsx
@@ -92,7 +92,7 @@ const getGroupValue = (
 ) => {
   if (multiSelect) {
     if (Array.isArray(currentValue)) {
-      // @ts-expect-error TS2345
+      // @ts-ignore TS2345
       return currentValue.includes(toggledValue)
         ? currentValue.filter(v => v !== toggledValue)
         : [...currentValue, toggledValue];
@@ -123,13 +123,13 @@ const ChipGroup = ({
   const [selectedValue, setSelectedValue] = React.useState(value || null);
 
   React.useEffect(() => {
-    // @ts-expect-error TS2345
+    // @ts-ignore TS2345
     setSelectedValue(value);
   }, [value]);
 
-  // @ts-expect-error TS7006
+  // @ts-ignore TS7006
   const setValue = (event, chipValue) => {
-    // @ts-expect-error TS2345
+    // @ts-ignore TS2345
     setSelectedValue(getGroupValue(selectedValue, chipValue, multiSelect));
     if (onChange) onChange(event, chipValue);
   };
diff --git a/src/components/colors/hex.spec.ts b/src/components/colors/hex.spec.ts
index f9c51a2a5..d3b89765d 100644
--- a/src/components/colors/hex.spec.ts
+++ b/src/components/colors/hex.spec.ts
@@ -1,4 +1,4 @@
-// @ts-expect-error TS7016
+// @ts-ignore TS7016
 import colors from './colors';
 import hex from './hex';
 
diff --git a/src/components/colors/hex.ts b/src/components/colors/hex.ts
index e83a9d7de..cba92f3ba 100644
--- a/src/components/colors/hex.ts
+++ b/src/components/colors/hex.ts
@@ -1,10 +1,10 @@
-// @ts-expect-error TS7016
+// @ts-ignore TS7016
 import colors from './colors';
 
 const hex: Record<string, string> = {};
 
 Object.keys(colors).forEach(groupName => {
-  // @ts-expect-error TS7006
+  // @ts-ignore TS7006
   colors[groupName].forEach(color => {
     hex[color.variable.slice(1)] = `#${color.hex}`;
   });
diff --git a/src/components/content-box/ContentBox.spec.tsx b/src/components/content-box/ContentBox.spec.tsx
index 830d9a827..4107639d3 100644
--- a/src/components/content-box/ContentBox.spec.tsx
+++ b/src/components/content-box/ContentBox.spec.tsx
@@ -7,7 +7,7 @@ describe('<ContentBox />', () => {
     const contentBox = render(<ContentBox>test</ContentBox>);
 
     expect(
-      // @ts-expect-error TS18047
+      // @ts-ignore TS18047
       contentBox.container.firstElementChild.classList.contains(
         'sg-content-box'
       )
@@ -17,7 +17,7 @@ describe('<ContentBox />', () => {
     const contentBox = render(<ContentBox full>test</ContentBox>);
 
     expect(
-      // @ts-expect-error TS18047
+      // @ts-ignore TS18047
       contentBox.container.firstElementChild.classList.contains(
         'sg-content-box--full'
       )
@@ -28,13 +28,13 @@ describe('<ContentBox />', () => {
     const contentBox2 = render(<ContentBox spacedSmall>test</ContentBox>);
 
     expect(
-      // @ts-expect-error TS18047
+      // @ts-ignore TS18047
       contentBox.container.firstElementChild.classList.contains(
         'sg-content-box--spaced'
       )
     ).toEqual(true);
     expect(
-      // @ts-expect-error TS18047
+      // @ts-ignore TS18047
       contentBox2.container.firstElementChild.classList.contains(
         'sg-content-box--spaced-small'
       )
@@ -48,13 +48,13 @@ describe('<ContentBox />', () => {
     );
 
     expect(
-      // @ts-expect-error TS18047
+      // @ts-ignore TS18047
       testBox.container.firstElementChild.classList.contains(
         'sg-content-box--spaced-bottom'
       )
     ).toEqual(true);
     expect(
-      // @ts-expect-error TS18047
+      // @ts-ignore TS18047
       testBox.container.firstElementChild.classList.contains(
         'sg-content-box--spaced-bottom-normal'
       )
@@ -68,7 +68,7 @@ describe('<ContentBox />', () => {
     );
 
     expect(
-      // @ts-expect-error TS18047
+      // @ts-ignore TS18047
       testBox.container.firstElementChild.classList.contains(
         'sg-content-box--spaced-bottom-xsmall'
       )
@@ -80,13 +80,13 @@ describe('<ContentBox />', () => {
     );
 
     expect(
-      // @ts-expect-error TS18047
+      // @ts-ignore TS18047
       testBox.container.firstElementChild.classList.contains(
         'sg-content-box--spaced-top'
       )
     ).toEqual(true);
     expect(
-      // @ts-expect-error TS18047
+      // @ts-ignore TS18047
       testBox.container.firstElementChild.classList.contains(
         'sg-content-box--spaced-top-normal'
       )
@@ -98,7 +98,7 @@ describe('<ContentBox />', () => {
     );
 
     expect(
-      // @ts-expect-error TS18047
+      // @ts-ignore TS18047
       testBox.container.firstElementChild.classList.contains(
         'sg-content-box--spaced-top-xsmall'
       )
diff --git a/src/components/content-box/ContentBoxActions.spec.tsx b/src/components/content-box/ContentBoxActions.spec.tsx
index e0b814905..6c4f6aca1 100644
--- a/src/components/content-box/ContentBoxActions.spec.tsx
+++ b/src/components/content-box/ContentBoxActions.spec.tsx
@@ -8,7 +8,7 @@ describe('<ContentBoxActions />', () => {
     const testBox = render(<ContentBoxActions>test</ContentBoxActions>);
 
     expect(
-      // @ts-expect-error TS18047
+      // @ts-ignore TS18047
       testBox.container.firstElementChild.classList.contains(
         'sg-content-box__actions'
       )
@@ -21,7 +21,7 @@ describe('<ContentBoxActions />', () => {
     );
 
     expect(
-      // @ts-expect-error TS18047
+      // @ts-ignore TS18047
       testBox.container.firstElementChild.classList.contains(
         'sg-content-box__actions--with-centered-elements'
       )
@@ -34,7 +34,7 @@ describe('<ContentBoxActions />', () => {
     );
 
     expect(
-      // @ts-expect-error TS18047
+      // @ts-ignore TS18047
       testBox.container.firstElementChild.classList.contains(
         'sg-content-box__actions--with-elements-to-right'
       )
@@ -47,7 +47,7 @@ describe('<ContentBoxActions />', () => {
     );
 
     expect(
-      // @ts-expect-error TS18047
+      // @ts-ignore TS18047
       testBox.container.firstElementChild.classList.contains(
         'sg-content-box__actions--spaced-top-xsmall'
       )
@@ -60,7 +60,7 @@ describe('<ContentBoxActions />', () => {
     );
 
     expect(
-      // @ts-expect-error TS18047
+      // @ts-ignore TS18047
       testBox.container.firstElementChild.classList.contains(
         'sg-content-box__actions--spaced-bottom-xsmall'
       )
diff --git a/src/components/content-box/ContentBoxContent.spec.tsx b/src/components/content-box/ContentBoxContent.spec.tsx
index 3f71cf8b6..cac17ff40 100644
--- a/src/components/content-box/ContentBoxContent.spec.tsx
+++ b/src/components/content-box/ContentBoxContent.spec.tsx
@@ -8,7 +8,7 @@ describe('<ContentBoxContent />', () => {
     const testBox = render(<ContentBoxContent>test</ContentBoxContent>);
 
     expect(
-      // @ts-expect-error TS18047
+      // @ts-ignore TS18047
       testBox.container.firstElementChild.classList.contains(
         'sg-content-box__content'
       )
@@ -18,7 +18,7 @@ describe('<ContentBoxContent />', () => {
     const testBox = render(<ContentBoxContent full>test</ContentBoxContent>);
 
     expect(
-      // @ts-expect-error TS18047
+      // @ts-ignore TS18047
       testBox.container.firstElementChild.classList.contains(
         'sg-content-box__content--full'
       )
@@ -30,7 +30,7 @@ describe('<ContentBoxContent />', () => {
     );
 
     expect(
-      // @ts-expect-error TS18047
+      // @ts-ignore TS18047
       testBox.container.firstElementChild.classList.contains(
         'sg-content-box__content--with-elements-to-right'
       )
@@ -42,7 +42,7 @@ describe('<ContentBoxContent />', () => {
     );
 
     expect(
-      // @ts-expect-error TS18047
+      // @ts-ignore TS18047
       testBox.container.firstElementChild.classList.contains(
         'sg-content-box__content--with-centered-text'
       )
@@ -54,13 +54,13 @@ describe('<ContentBoxContent />', () => {
     );
 
     expect(
-      // @ts-expect-error TS18047
+      // @ts-ignore TS18047
       testBox.container.firstElementChild.classList.contains(
         'sg-content-box__content--spaced-top'
       )
     ).toBeTruthy();
     expect(
-      // @ts-expect-error TS18047
+      // @ts-ignore TS18047
       testBox.container.firstElementChild.classList.contains(
         'sg-content-box__content--spaced-top-normal'
       )
@@ -72,7 +72,7 @@ describe('<ContentBoxContent />', () => {
     );
 
     expect(
-      // @ts-expect-error TS18047
+      // @ts-ignore TS18047
       testBox.container.firstElementChild.classList.contains(
         'sg-content-box__content--spaced-top-xsmall'
       )
@@ -84,13 +84,13 @@ describe('<ContentBoxContent />', () => {
     );
 
     expect(
-      // @ts-expect-error TS18047
+      // @ts-ignore TS18047
       testBox.container.firstElementChild.classList.contains(
         'sg-content-box__content--spaced-bottom'
       )
     ).toBeTruthy();
     expect(
-      // @ts-expect-error TS18047
+      // @ts-ignore TS18047
       testBox.container.firstElementChild.classList.contains(
         'sg-content-box__content--spaced-bottom-normal'
       )
@@ -102,7 +102,7 @@ describe('<ContentBoxContent />', () => {
     );
 
     expect(
-      // @ts-expect-error TS18047
+      // @ts-ignore TS18047
       testBox.container.firstElementChild.classList.contains(
         'sg-content-box__content--spaced-bottom-xsmall'
       )
diff --git a/src/components/content-box/ContentBoxHeader.spec.tsx b/src/components/content-box/ContentBoxHeader.spec.tsx
index 485f19d4e..5cc1d031e 100644
--- a/src/components/content-box/ContentBoxHeader.spec.tsx
+++ b/src/components/content-box/ContentBoxHeader.spec.tsx
@@ -8,7 +8,7 @@ describe('<ContentBoxHeader />', () => {
     const testBox = render(<ContentBoxHeader>test</ContentBoxHeader>);
 
     expect(
-      // @ts-expect-error TS18047
+      // @ts-ignore TS18047
       testBox.container.firstElementChild.classList.contains(
         'sg-content-box__header'
       )
@@ -20,7 +20,7 @@ describe('<ContentBoxHeader />', () => {
     );
 
     expect(
-      // @ts-expect-error TS18047
+      // @ts-ignore TS18047
       testBox.container.firstElementChild.classList.contains(
         'sg-content-box__header--with-centered-elements'
       )
@@ -33,13 +33,13 @@ describe('<ContentBoxHeader />', () => {
     );
 
     expect(
-      // @ts-expect-error TS18047
+      // @ts-ignore TS18047
       testBox.container.firstElementChild.classList.contains(
         'sg-content-box__header--spaced'
       )
     ).toEqual(true);
     expect(
-      // @ts-expect-error TS18047
+      // @ts-ignore TS18047
       testBox2.container.firstElementChild.classList.contains(
         'sg-content-box__header--spaced-small'
       )
@@ -51,13 +51,13 @@ describe('<ContentBoxHeader />', () => {
     );
 
     expect(
-      // @ts-expect-error TS18047
+      // @ts-ignore TS18047
       testBox.container.firstElementChild.classList.contains(
         'sg-content-box__header--spaced-top'
       )
     ).toBeTruthy();
     expect(
-      // @ts-expect-error TS18047
+      // @ts-ignore TS18047
       testBox.container.firstElementChild.classList.contains(
         'sg-content-box__header--spaced-top-normal'
       )
@@ -69,7 +69,7 @@ describe('<ContentBoxHeader />', () => {
     );
 
     expect(
-      // @ts-expect-error TS18047
+      // @ts-ignore TS18047
       testBox.container.firstElementChild.classList.contains(
         'sg-content-box__header--spaced-top-xsmall'
       )
@@ -81,13 +81,13 @@ describe('<ContentBoxHeader />', () => {
     );
 
     expect(
-      // @ts-expect-error TS18047
+      // @ts-ignore TS18047
       testBox.container.firstElementChild.classList.contains(
         'sg-content-box__header--spaced-bottom'
       )
     ).toBeTruthy();
     expect(
-      // @ts-expect-error TS18047
+      // @ts-ignore TS18047
       testBox.container.firstElementChild.classList.contains(
         'sg-content-box__header--spaced-bottom-normal'
       )
@@ -99,7 +99,7 @@ describe('<ContentBoxHeader />', () => {
     );
 
     expect(
-      // @ts-expect-error TS18047
+      // @ts-ignore TS18047
       testBox.container.firstElementChild.classList.contains(
         'sg-content-box__header--spaced-bottom-xsmall'
       )
diff --git a/src/components/content-box/ContentBoxTitle.spec.tsx b/src/components/content-box/ContentBoxTitle.spec.tsx
index 6440ed4e8..69c38793b 100644
--- a/src/components/content-box/ContentBoxTitle.spec.tsx
+++ b/src/components/content-box/ContentBoxTitle.spec.tsx
@@ -8,7 +8,7 @@ describe('<ContentBoxTitle />', () => {
     const testBox = render(<ContentBoxTitle>test</ContentBoxTitle>);
 
     expect(
-      // @ts-expect-error TS18047
+      // @ts-ignore TS18047
       testBox.container.firstElementChild.classList.contains(
         'sg-content-box__title'
       )
@@ -20,7 +20,7 @@ describe('<ContentBoxTitle />', () => {
     );
 
     expect(
-      // @ts-expect-error TS18047
+      // @ts-ignore TS18047
       testBox.container.firstElementChild.classList.contains(
         'sg-content-box__title--with-centered-elements'
       )
@@ -33,13 +33,13 @@ describe('<ContentBoxTitle />', () => {
     );
 
     expect(
-      // @ts-expect-error TS18047
+      // @ts-ignore TS18047
       testBox.container.firstElementChild.classList.contains(
         'sg-content-box__title--spaced'
       )
     ).toEqual(true);
     expect(
-      // @ts-expect-error TS18047
+      // @ts-ignore TS18047
       testBox2.container.firstElementChild.classList.contains(
         'sg-content-box__title--spaced-small'
       )
@@ -51,13 +51,13 @@ describe('<ContentBoxTitle />', () => {
     );
 
     expect(
-      // @ts-expect-error TS18047
+      // @ts-ignore TS18047
       testBox.container.firstElementChild.classList.contains(
         'sg-content-box__title--spaced-top'
       )
     ).toBeTruthy();
     expect(
-      // @ts-expect-error TS18047
+      // @ts-ignore TS18047
       testBox.container.firstElementChild.classList.contains(
         'sg-content-box__title--spaced-top-normal'
       )
@@ -69,7 +69,7 @@ describe('<ContentBoxTitle />', () => {
     );
 
     expect(
-      // @ts-expect-error TS18047
+      // @ts-ignore TS18047
       testBox.container.firstElementChild.classList.contains(
         'sg-content-box__title--spaced-top-xsmall'
       )
@@ -81,13 +81,13 @@ describe('<ContentBoxTitle />', () => {
     );
 
     expect(
-      // @ts-expect-error TS18047
+      // @ts-ignore TS18047
       testBox.container.firstElementChild.classList.contains(
         'sg-content-box__title--spaced-bottom'
       )
     ).toBeTruthy();
     expect(
-      // @ts-expect-error TS18047
+      // @ts-ignore TS18047
       testBox.container.firstElementChild.classList.contains(
         'sg-content-box__title--spaced-bottom-normal'
       )
@@ -99,7 +99,7 @@ describe('<ContentBoxTitle />', () => {
     );
 
     expect(
-      // @ts-expect-error TS18047
+      // @ts-ignore TS18047
       testBox.container.firstElementChild.classList.contains(
         'sg-content-box__title--spaced-bottom-xsmall'
       )
diff --git a/src/components/counters/Counter.tsx b/src/components/counters/Counter.tsx
index 69b8e1153..351480338 100644
--- a/src/components/counters/Counter.tsx
+++ b/src/components/counters/Counter.tsx
@@ -147,9 +147,9 @@ const Counter = ({
 }: CounterPropsType) => {
   const backgroundColor =
     variant === 'solid'
-      ? // @ts-expect-error TS2538
+      ? // @ts-ignore TS2538
         SOLID_COLOR_BACKGROUND_MAP[color]
-      : // @ts-expect-error TS2538
+      : // @ts-ignore TS2538
         LIGHT_COLOR_BACKGROUND_MAP[color];
   const counterClass = cx(
     'sg-counter',
@@ -163,7 +163,7 @@ const Counter = ({
   );
 
   const textColor =
-    // @ts-expect-error TS2538
+    // @ts-ignore TS2538
     variant === 'solid' ? SOLID_COLOR_TEXT_MAP[color] : 'text-black';
 
   let content;
diff --git a/src/components/dialog/Dialog.spec.tsx b/src/components/dialog/Dialog.spec.tsx
index d017ed569..7bdf463d7 100644
--- a/src/components/dialog/Dialog.spec.tsx
+++ b/src/components/dialog/Dialog.spec.tsx
@@ -30,7 +30,7 @@ describe('<Dialog>', () => {
       </Dialog>
     );
 
-    // @ts-expect-error TS2345
+    // @ts-ignore TS2345
     fireEvent.keyUp(wrapper.container.firstChild, {
       key: 'Escape',
     });
@@ -45,7 +45,7 @@ describe('<Dialog>', () => {
       </Dialog>
     );
 
-    // @ts-expect-error TS2345
+    // @ts-ignore TS2345
     fireEvent.click(wrapper.container.firstChild);
     expect(onDismiss).toHaveBeenCalledTimes(1);
   });
@@ -202,7 +202,7 @@ describe('<Dialog>', () => {
     const descId = 'desc-id';
     const dialog = render(
       <Dialog open aria-describedby={descId} aria-label="Dialog label">
-        {/*@ts-expect-error to be fixed, dialog body doesn't expose id*/}
+        {/*@ts-ignore to be fixed, dialog body doesn't expose id*/}
         <DialogBody id={descId}>
           Information you provide to us directly.
         </DialogBody>
diff --git a/src/components/dialog/useBodyNoScroll.ts b/src/components/dialog/useBodyNoScroll.ts
index 11dfa22d6..7b525b85d 100644
--- a/src/components/dialog/useBodyNoScroll.ts
+++ b/src/components/dialog/useBodyNoScroll.ts
@@ -6,7 +6,7 @@ const DIALOG_SELECTOR = '.js-dialog';
 export function useBodyNoScroll(overlayRef: {current: HTMLDivElement | null}) {
   const cleanupRef = React.useRef(null);
   const forceCleanup = React.useCallback(() => {
-    // @ts-expect-error TS2349
+    // @ts-ignore TS2349
     if (cleanupRef.current) cleanupRef.current();
   }, []);
 
@@ -36,7 +36,7 @@ export function useBodyNoScroll(overlayRef: {current: HTMLDivElement | null}) {
       const dialogsOpenCount =
         document.querySelectorAll(DIALOG_SELECTOR).length;
       const nestedOpenDialogsCount =
-        // @ts-expect-error TS2532
+        // @ts-ignore TS2532
         overlayRef.current?.querySelectorAll(DIALOG_SELECTOR).length | 0;
 
       // nested dialogs shouldn't be counted
@@ -55,7 +55,7 @@ export function useBodyNoScroll(overlayRef: {current: HTMLDivElement | null}) {
       window.scrollTo(0, scrollY);
     };
 
-    // @ts-expect-error TS2322
+    // @ts-ignore TS2322
     cleanupRef.current = cleanup;
     return cleanup;
   }, [overlayRef]);
diff --git a/src/components/dialog/useFocusTrap.ts b/src/components/dialog/useFocusTrap.ts
index 162a5f10a..7369ae2d0 100644
--- a/src/components/dialog/useFocusTrap.ts
+++ b/src/components/dialog/useFocusTrap.ts
@@ -35,13 +35,13 @@ export function useFocusTrap({
     function handleFocusTrap(event: FocusEvent) {
       if (
         event.target instanceof Node &&
-        // @ts-expect-error TS18047
+        // @ts-ignore TS18047
         dialogElement.contains(event.target)
       ) {
         return;
       }
 
-      // @ts-expect-error TS2345
+      // @ts-ignore TS2345
       focusDescendant(dialogElement, isTabbingForward);
     }
 
diff --git a/src/components/dropdowns/Dropdown.spec.tsx b/src/components/dropdowns/Dropdown.spec.tsx
index 9d2d55463..ca9375eaf 100644
--- a/src/components/dropdowns/Dropdown.spec.tsx
+++ b/src/components/dropdowns/Dropdown.spec.tsx
@@ -31,7 +31,7 @@ describe('<Dropdown />', () => {
   it('should render links with proper data', () => {
     const component = render(<Dropdown {...testProps} />);
 
-    // @ts-expect-error TS2345
+    // @ts-ignore TS2345
     fireEvent.click(component.container.firstElementChild);
 
     expect(component.getAllByRole('link')[0].getAttribute('href')).toEqual(
@@ -48,7 +48,7 @@ describe('<Dropdown />', () => {
   it('should open dropdown on click', () => {
     const component = render(<Dropdown {...testProps} />);
 
-    // @ts-expect-error TS2345
+    // @ts-ignore TS2345
     fireEvent.click(component.container.firstElementChild);
     expect(component.getAllByRole('link')).toHaveLength(3);
   });
@@ -56,7 +56,7 @@ describe('<Dropdown />', () => {
   it('should close dropdown when click outside', () => {
     const component = render(<Dropdown {...testProps} />);
 
-    // @ts-expect-error TS2345
+    // @ts-ignore TS2345
     fireEvent.click(component.container.firstElementChild);
     expect(component.getAllByRole('link')).toHaveLength(3);
 
@@ -70,7 +70,7 @@ describe('<Dropdown />', () => {
       <Dropdown {...testProps} onItemSelect={onItemSelect} />
     );
 
-    // @ts-expect-error TS2345
+    // @ts-ignore TS2345
     fireEvent.click(component.container.firstElementChild);
     const link = component.getAllByRole('link')[0];
 
diff --git a/src/components/flex/Flex.chromatic.stories.tsx b/src/components/flex/Flex.chromatic.stories.tsx
index 7ac343926..1f038eeb7 100644
--- a/src/components/flex/Flex.chromatic.stories.tsx
+++ b/src/components/flex/Flex.chromatic.stories.tsx
@@ -20,7 +20,7 @@ const indigoBoxStyle = {
   color: COLOR['indigo-20'],
 };
 
-// @ts-expect-error TS7006
+// @ts-ignore TS7006
 export const ResponsiveProps = args => {
   return (
     <div>
diff --git a/src/components/flex/Flex.tsx b/src/components/flex/Flex.tsx
index 2f258ec98..8eeb1eed6 100644
--- a/src/components/flex/Flex.tsx
+++ b/src/components/flex/Flex.tsx
@@ -428,7 +428,7 @@ const Flex = React.forwardRef<HTMLElement, FlexPropsType>(
     );
 
     return (
-      // @ts-expect-error ts migration
+      // @ts-ignore ts migration
       <Container {...otherProps} className={flexClass} ref={ref}>
         {children}
       </Container>
diff --git a/src/components/form-elements/Input.tsx b/src/components/form-elements/Input.tsx
index 582fb46ff..1a1c98576 100644
--- a/src/components/form-elements/Input.tsx
+++ b/src/components/form-elements/Input.tsx
@@ -199,9 +199,9 @@ const Input = (props: InputPropsType) => {
     <div className={wrapperClass}>
       <input
         {...additionalProps}
-        // @ts-expect-error TS2322
+        // @ts-ignore TS2322
         type={type}
-        // @ts-expect-error TS2322
+        // @ts-ignore TS2322
         ref={setInputRef}
         className={inputClass}
         value={value}
diff --git a/src/components/form-elements/Textarea.spec.tsx b/src/components/form-elements/Textarea.spec.tsx
index f90dcd051..d7803c618 100644
--- a/src/components/form-elements/Textarea.spec.tsx
+++ b/src/components/form-elements/Textarea.spec.tsx
@@ -15,7 +15,7 @@ it('error when both valid and invalid', () => {
 });
 
 it('Type', () => {
-  // @ts-expect-error TS7006
+  // @ts-ignore TS7006
   const CustomTextarea = props => (
     <label>
       superCustom
diff --git a/src/components/form-elements/checkbox/Checkbox.chromatic.stories.tsx b/src/components/form-elements/checkbox/Checkbox.chromatic.stories.tsx
index 7f72fba71..4b6e273c6 100644
--- a/src/components/form-elements/checkbox/Checkbox.chromatic.stories.tsx
+++ b/src/components/form-elements/checkbox/Checkbox.chromatic.stories.tsx
@@ -3,7 +3,7 @@ import * as CheckboxStories from './Checkbox.stories.mdx';
 import {generateChromaticStory} from '../../../chromatic/utils';
 import Checkbox from './Checkbox';
 
-// @ts-expect-error TS7006
+// @ts-ignore TS7006
 const Hovers = args => {
   const types = [
     {name: 'unchecked'},
diff --git a/src/components/form-elements/checkbox/Checkbox.spec.tsx b/src/components/form-elements/checkbox/Checkbox.spec.tsx
index ed12bbed2..b20b0de67 100644
--- a/src/components/form-elements/checkbox/Checkbox.spec.tsx
+++ b/src/components/form-elements/checkbox/Checkbox.spec.tsx
@@ -5,7 +5,7 @@ import userEvent from '@testing-library/user-event';
 import {testA11y} from '../../../axe';
 
 describe('<Checkbox />', () => {
-  // @ts-expect-error TS7006
+  // @ts-ignore TS7006
   const renderCheckbox = props =>
     render(<Checkbox onChange={() => jest.fn()} {...props} />);
 
diff --git a/src/components/form-elements/checkbox/Checkbox.tsx b/src/components/form-elements/checkbox/Checkbox.tsx
index 46d3bbceb..9db57834f 100644
--- a/src/components/form-elements/checkbox/Checkbox.tsx
+++ b/src/components/form-elements/checkbox/Checkbox.tsx
@@ -206,7 +206,7 @@ const Checkbox = ({
     }
   }, [checked, isControlled, isChecked]);
   const onInputChange = React.useCallback(
-    // @ts-expect-error TS7006
+    // @ts-ignore TS7006
     e => {
       if (!isControlled) {
         setIsChecked(val => !val);
@@ -301,7 +301,7 @@ const Checkbox = ({
           <div className="sg-checkbox__icon-wrapper">
             <span
               className={iconClass} // This element is purely decorative so
-              // @ts-expect-error TS2322
+              // @ts-ignore TS2322
               ref={checkboxIconRef}
               // we hide it for screen readers
               aria-hidden="true"
diff --git a/src/components/form-elements/radio/Radio.chromatic.stories.tsx b/src/components/form-elements/radio/Radio.chromatic.stories.tsx
index 33aca19ad..e63dcd0ef 100644
--- a/src/components/form-elements/radio/Radio.chromatic.stories.tsx
+++ b/src/components/form-elements/radio/Radio.chromatic.stories.tsx
@@ -3,7 +3,7 @@ import * as RadioStories from './Radio.stories.mdx';
 import {generateChromaticStory} from '../../../chromatic/utils';
 import Radio from './Radio';
 
-// @ts-expect-error TS7006
+// @ts-ignore TS7006
 const Hovers = args => {
   const types = [
     {name: 'unchecked', checked: false},
diff --git a/src/components/form-elements/radio/Radio.spec.tsx b/src/components/form-elements/radio/Radio.spec.tsx
index b612f85cf..78902c585 100644
--- a/src/components/form-elements/radio/Radio.spec.tsx
+++ b/src/components/form-elements/radio/Radio.spec.tsx
@@ -5,7 +5,7 @@ import userEvent from '@testing-library/user-event';
 import {testA11y} from '../../../axe';
 
 describe('<Radio />', () => {
-  // @ts-expect-error TS7006
+  // @ts-ignore TS7006
   const renderRadio = props =>
     render(<Radio onChange={() => jest.fn()} {...props} />);
 
diff --git a/src/components/form-elements/radio/Radio.tsx b/src/components/form-elements/radio/Radio.tsx
index 8827788c2..f3266d772 100644
--- a/src/components/form-elements/radio/Radio.tsx
+++ b/src/components/form-elements/radio/Radio.tsx
@@ -215,7 +215,7 @@ const Radio = ({
   const labelId = ariaLabelledBy || `${radioId}-label`;
   const isInvalid = invalid !== undefined ? invalid : radioGroupContext.invalid;
 
-  // @ts-expect-error TS7006
+  // @ts-ignore TS7006
   const onInputChange = e => {
     if (isWithinRadioGroup) {
       radioGroupContext.setLastFocusedValue(value);
@@ -245,14 +245,14 @@ const Radio = ({
             name={name || radioGroupContext.name}
             onChange={onInputChange}
             required={required}
-            // @ts-expect-error TS2322
+            // @ts-ignore TS2322
             value={value}
             aria-labelledby={labelId}
             aria-describedby={descriptionId}
             aria-invalid={isInvalid ? true : undefined}
           />
           <span
-            // @ts-expect-error TS2322
+            // @ts-ignore TS2322
             ref={circleRef}
             className={circleClass} // This element is purely decorative so
             // we hide it for screen readers
@@ -274,7 +274,7 @@ const Radio = ({
       </div>
       {description && (
         <Text
-          // @ts-expect-error TS2322
+          // @ts-ignore TS2322
           id={descriptionId}
           className="sg-radio__description"
           size="small"
diff --git a/src/components/form-elements/radio/RadioGroup.spec.tsx b/src/components/form-elements/radio/RadioGroup.spec.tsx
index a10077a73..c0f6056cb 100644
--- a/src/components/form-elements/radio/RadioGroup.spec.tsx
+++ b/src/components/form-elements/radio/RadioGroup.spec.tsx
@@ -5,7 +5,7 @@ import {render, waitFor} from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 
 describe('<RadioGroup />', () => {
-  // @ts-expect-error TS7006
+  // @ts-ignore TS7006
   const renderRadioGroup = props =>
     render(
       <RadioGroup {...props}>
diff --git a/src/components/form-elements/radio/RadioGroup.tsx b/src/components/form-elements/radio/RadioGroup.tsx
index 9dd3ad644..d048add9b 100644
--- a/src/components/form-elements/radio/RadioGroup.tsx
+++ b/src/components/form-elements/radio/RadioGroup.tsx
@@ -136,7 +136,7 @@ const RadioGroup = ({
     if (selectedValue !== initialValue && isPristine) setIsPristine(false);
   }, [selectedValue, initialValue, isPristine]);
 
-  // @ts-expect-error TS7006
+  // @ts-ignore TS7006
   const updateValue = (event, value) => {
     setSelectedValue(value);
     if (onChange) onChange(event);
diff --git a/src/components/header/Header.spec.tsx b/src/components/header/Header.spec.tsx
index a69b5874b..7d479d865 100644
--- a/src/components/header/Header.spec.tsx
+++ b/src/components/header/Header.spec.tsx
@@ -8,7 +8,7 @@ describe('Header', () => {
     const header = render(<Header>some text</Header>);
 
     expect(
-      // @ts-expect-error TS18047
+      // @ts-ignore TS18047
       header.container.firstElementChild.classList.contains('sg-header')
     ).toEqual(true);
   });
@@ -16,7 +16,7 @@ describe('Header', () => {
     const header = render(<Header fixed>some text</Header>);
 
     expect(
-      // @ts-expect-error TS18047
+      // @ts-ignore TS18047
       header.container.firstElementChild.classList.contains('sg-header--fixed')
     ).toEqual(true);
   });
@@ -24,7 +24,7 @@ describe('Header', () => {
     const header = render(<Header withDivider>some text</Header>);
 
     expect(
-      // @ts-expect-error TS18047
+      // @ts-ignore TS18047
       header.container.firstElementChild.classList.contains(
         'sg-header--with-divider'
       )
diff --git a/src/components/header/HeaderContainer.spec.tsx b/src/components/header/HeaderContainer.spec.tsx
index 5260acaee..5ba6b9265 100644
--- a/src/components/header/HeaderContainer.spec.tsx
+++ b/src/components/header/HeaderContainer.spec.tsx
@@ -6,7 +6,7 @@ it('render', () => {
   const headerContainer = render(<HeaderContainer>some text</HeaderContainer>);
 
   expect(
-    // @ts-expect-error TS18047
+    // @ts-ignore TS18047
     headerContainer.container.firstElementChild.classList.contains(
       'sg-header__container'
     )
diff --git a/src/components/header/HeaderContent.spec.tsx b/src/components/header/HeaderContent.spec.tsx
index 46f9d081a..b63b113d7 100644
--- a/src/components/header/HeaderContent.spec.tsx
+++ b/src/components/header/HeaderContent.spec.tsx
@@ -6,7 +6,7 @@ it('render', () => {
   const headerContent = render(<HeaderContent>some text</HeaderContent>);
 
   expect(
-    // @ts-expect-error TS18047
+    // @ts-ignore TS18047
     headerContent.container.firstElementChild.classList.contains(
       'sg-header__content'
     )
@@ -18,7 +18,7 @@ it('auto-height', () => {
   );
 
   expect(
-    // @ts-expect-error TS18047
+    // @ts-ignore TS18047
     headerContent.container.firstElementChild.classList.contains(
       'sg-header__content--auto-height'
     )
diff --git a/src/components/header/HeaderLeft.spec.tsx b/src/components/header/HeaderLeft.spec.tsx
index cbff531cc..9ef0c2956 100644
--- a/src/components/header/HeaderLeft.spec.tsx
+++ b/src/components/header/HeaderLeft.spec.tsx
@@ -6,7 +6,7 @@ it('render', () => {
   const header = render(<HeaderLeft>some text</HeaderLeft>);
 
   expect(
-    // @ts-expect-error TS18047
+    // @ts-ignore TS18047
     header.container.firstElementChild.classList.contains('sg-header__left')
   ).toEqual(true);
 });
diff --git a/src/components/header/HeaderMiddle.spec.tsx b/src/components/header/HeaderMiddle.spec.tsx
index 7a1c4b1f8..5a01bb97f 100644
--- a/src/components/header/HeaderMiddle.spec.tsx
+++ b/src/components/header/HeaderMiddle.spec.tsx
@@ -6,7 +6,7 @@ it('render', () => {
   const header = render(<HeaderMiddle>some text</HeaderMiddle>);
 
   expect(
-    // @ts-expect-error TS18047
+    // @ts-ignore TS18047
     header.container.firstElementChild.classList.contains('sg-header__middle')
   ).toEqual(true);
 });
diff --git a/src/components/header/HeaderRight.spec.tsx b/src/components/header/HeaderRight.spec.tsx
index bab3fa85a..ad7ec8554 100644
--- a/src/components/header/HeaderRight.spec.tsx
+++ b/src/components/header/HeaderRight.spec.tsx
@@ -6,7 +6,7 @@ it('render', () => {
   const header = render(<HeaderRight>some text</HeaderRight>);
 
   expect(
-    // @ts-expect-error TS18047
+    // @ts-ignore TS18047
     header.container.firstElementChild.classList.contains('sg-header__right')
   ).toEqual(true);
 });
diff --git a/src/components/icon-as-button/IconAsButton.spec.tsx b/src/components/icon-as-button/IconAsButton.spec.tsx
index 50e85790a..5ea3c7d16 100644
--- a/src/components/icon-as-button/IconAsButton.spec.tsx
+++ b/src/components/icon-as-button/IconAsButton.spec.tsx
@@ -15,7 +15,7 @@ it('colors', () => {
   const iconAsButton = render(<IconAsButton type={type} color={color} />);
 
   expect(
-    // @ts-expect-error TS18047
+    // @ts-ignore TS18047
     iconAsButton.container.firstElementChild.classList.contains(
       'sg-icon-as-button--icon-black'
     )
@@ -28,7 +28,7 @@ it('size', () => {
   const iconAsButton = render(<IconAsButton type={type} size={size} />);
 
   expect(
-    // @ts-expect-error TS18047
+    // @ts-ignore TS18047
     iconAsButton.container.firstElementChild.classList.contains(
       'sg-icon-as-button--small'
     )
@@ -40,7 +40,7 @@ it('default size', () => {
   const iconAsButton = render(<IconAsButton type={type} />);
 
   expect(
-    // @ts-expect-error TS18047
+    // @ts-ignore TS18047
     iconAsButton.container.firstElementChild.classList.contains(
       'sg-icon-as-button--normal'
     )
@@ -52,7 +52,7 @@ it('border', () => {
   const iconAsButton = render(<IconAsButton type={type} border />);
 
   expect(
-    // @ts-expect-error TS18047
+    // @ts-ignore TS18047
     iconAsButton.container.firstElementChild.classList.contains(
       'sg-icon-as-button--with-border'
     )
@@ -64,7 +64,7 @@ it('transparent', () => {
   const iconAsButton = render(<IconAsButton type={type} transparent />);
 
   expect(
-    // @ts-expect-error TS18047
+    // @ts-ignore TS18047
     iconAsButton.container.firstElementChild.classList.contains(
       'sg-icon-as-button--transparent'
     )
@@ -76,13 +76,13 @@ it('transparent active', () => {
   const iconAsButton = render(<IconAsButton type={type} transparent active />);
 
   expect(
-    // @ts-expect-error TS18047
+    // @ts-ignore TS18047
     iconAsButton.container.firstElementChild.classList.contains(
       'sg-icon-as-button--transparent'
     )
   ).toEqual(true);
   expect(
-    // @ts-expect-error TS18047
+    // @ts-ignore TS18047
     iconAsButton.container.firstElementChild.classList.contains(
       'sg-icon-as-button--transparent-active'
     )
@@ -94,7 +94,7 @@ it('action', () => {
   const iconAsButton = render(<IconAsButton type={type} action />);
 
   expect(
-    // @ts-expect-error TS18047
+    // @ts-ignore TS18047
     iconAsButton.container.firstElementChild.classList.contains(
       'sg-icon-as-button--action'
     )
@@ -106,13 +106,13 @@ it('action active', () => {
   const iconAsButton = render(<IconAsButton type={type} action active />);
 
   expect(
-    // @ts-expect-error TS18047
+    // @ts-ignore TS18047
     iconAsButton.container.firstElementChild.classList.contains(
       'sg-icon-as-button--action'
     )
   ).toEqual(true);
   expect(
-    // @ts-expect-error TS18047
+    // @ts-ignore TS18047
     iconAsButton.container.firstElementChild.classList.contains(
       'sg-icon-as-button--action-active'
     )
diff --git a/src/components/icons/Icon.spec.tsx b/src/components/icons/Icon.spec.tsx
index 63b7e5232..1d340d3b9 100644
--- a/src/components/icons/Icon.spec.tsx
+++ b/src/components/icons/Icon.spec.tsx
@@ -29,7 +29,7 @@ describe('Icon', () => {
   it('tag type', () => {
     const component = render(<Icon type={TYPE.ANSWER} size={16} as="span" />);
 
-    // @ts-expect-error TS18047
+    // @ts-ignore TS18047
     expect(component.container.firstElementChild.tagName).toEqual('SPAN');
   });
 
diff --git a/src/components/icons/Icon.tsx b/src/components/icons/Icon.tsx
index c275f5f6b..c45a4851f 100644
--- a/src/components/icons/Icon.tsx
+++ b/src/components/icons/Icon.tsx
@@ -576,7 +576,7 @@ const Icon = ({
   );
   const iconType = `#icon-${type}`;
   const Tag = as;
-  // @ts-expect-error TS2345
+  // @ts-ignore TS2345
   const idSuffix = generateIdSuffix(type);
   const titleId = `title-${idSuffix}`;
   const defaultTitle = String(type).replace(/_/g, ' ');
diff --git a/src/components/icons/get-icon-group.ts b/src/components/icons/get-icon-group.ts
index 26b10a839..4a380d74e 100644
--- a/src/components/icons/get-icon-group.ts
+++ b/src/components/icons/get-icon-group.ts
@@ -224,6 +224,6 @@ const iconMap = {
 const groups = Object.keys(iconMap);
 
 export function getIconGroup(iconName: string): string {
-  // @ts-expect-error TS7053
+  // @ts-ignore TS7053
   return groups.find(group => iconMap[group].includes(iconName)) || 'Misc';
 }
diff --git a/src/components/layout/Layout.spec.tsx b/src/components/layout/Layout.spec.tsx
index 2bda3f047..e9b109694 100644
--- a/src/components/layout/Layout.spec.tsx
+++ b/src/components/layout/Layout.spec.tsx
@@ -12,7 +12,7 @@ describe('Layout', () => {
     const layout = render(<Layout footer={footer}>Content</Layout>);
 
     expect(
-      // @ts-expect-error TS18047
+      // @ts-ignore TS18047
       layout.container.firstElementChild.querySelector('.sg-layout__footer')
     ).toBeTruthy();
   });
@@ -21,7 +21,7 @@ describe('Layout', () => {
     const layout = render(<Layout noMaxWidth>Content</Layout>);
 
     expect(
-      // @ts-expect-error TS18047
+      // @ts-ignore TS18047
       layout.container.firstElementChild.querySelector(
         '.sg-layout__container--no-max-width'
       )
@@ -48,7 +48,7 @@ describe('LayoutContent', () => {
     );
 
     expect(
-      // @ts-expect-error TS18047
+      // @ts-ignore TS18047
       layoutContent.container.firstElementChild.classList.contains(
         'sg-layout__content--no-max-width'
       )
diff --git a/src/components/list/List.tsx b/src/components/list/List.tsx
index e10fff4e3..4b725da13 100644
--- a/src/components/list/List.tsx
+++ b/src/components/list/List.tsx
@@ -28,7 +28,7 @@ const List = ({
   const Tag = ordered ? 'ol' : 'ul';
 
   return (
-    // @ts-expect-error ts migration
+    // @ts-ignore ts migration
     <Tag {...props} className={listClass} role="list">
       {children}
     </Tag>
diff --git a/src/components/list/MenuList.spec.tsx b/src/components/list/MenuList.spec.tsx
index 7e71c9f2a..118698b56 100644
--- a/src/components/list/MenuList.spec.tsx
+++ b/src/components/list/MenuList.spec.tsx
@@ -19,7 +19,7 @@ describe('MenuList', () => {
     const menu = render(<MenuList items={menuItems} size={SIZE.SMALL} />);
 
     expect(
-      // @ts-expect-error TS18047
+      // @ts-ignore TS18047
       menu.container.firstElementChild.classList.contains('sg-menu-list--small')
     ).toEqual(true);
   });
@@ -28,7 +28,7 @@ describe('MenuList', () => {
     const menu = render(<MenuList items={menuItems} size={SIZE.LARGE} />);
 
     expect(
-      // @ts-expect-error TS18047
+      // @ts-ignore TS18047
       menu.container.firstElementChild.classList.contains('sg-menu-list--large')
     ).toEqual(true);
   });
diff --git a/src/components/logo/Logo.tsx b/src/components/logo/Logo.tsx
index 45fefa539..22c85d91b 100644
--- a/src/components/logo/Logo.tsx
+++ b/src/components/logo/Logo.tsx
@@ -98,7 +98,7 @@ function getDefaultAlt(type: LogoTypeType) {
   ];
 
   return replacers.reduce(
-    // @ts-expect-error TS2769
+    // @ts-ignore TS2769
     (alt, {regexp, newSubstr}) => alt.replace(regexp, newSubstr),
     type
   );
@@ -129,7 +129,7 @@ const Logo = ({
   return (
     <div {...props} className={logoClass} data-logotype={type}>
       {/*
-       // @ts-expect-error TS2322 */}
+       // @ts-ignore TS2322 */}
       <img className="sg-logo__image" src={logoPath} alt={alt ?? defaultAlt} />
     </div>
   );
diff --git a/src/components/math-symbols/MathSymbol.spec.tsx b/src/components/math-symbols/MathSymbol.spec.tsx
index 47d7d503d..2a4516385 100644
--- a/src/components/math-symbols/MathSymbol.spec.tsx
+++ b/src/components/math-symbols/MathSymbol.spec.tsx
@@ -19,7 +19,7 @@ describe('MathSymbol', () => {
     const icon = render(<MathSymbol type={MATH_SYMBOL_TYPE.SQUERE_ROOT} />);
 
     expect(icon.getByRole('img')).toBeTruthy();
-    // @ts-expect-error TS18047
+    // @ts-ignore TS18047
     expect(icon.container.firstElementChild.querySelector('use')).toBeTruthy();
   });
 
@@ -27,7 +27,7 @@ describe('MathSymbol', () => {
     const type = MATH_SYMBOL_TYPE.SQUERE_ROOT;
     const icon = render(<MathSymbol type={type} data-foo="bar" />);
 
-    // @ts-expect-error TS18047
+    // @ts-ignore TS18047
     expect(icon.container.firstElementChild.getAttribute('data-foo')).toEqual(
       'bar'
     );
diff --git a/src/components/math-symbols/MathSymbol.tsx b/src/components/math-symbols/MathSymbol.tsx
index 52de4dbc0..bce264a26 100644
--- a/src/components/math-symbols/MathSymbol.tsx
+++ b/src/components/math-symbols/MathSymbol.tsx
@@ -90,9 +90,9 @@ const MathSymbol = ({
   const defaultTitle = type.replace(/-/g, ' ');
 
   return (
-    // @ts-expect-error ts migration
+    // @ts-ignore ts migration
     <svg {...props} className={iconClass} aria-labelledby={titleId} role="img">
-      {/* @ts-expect-error ts migration */}
+      {/* @ts-ignore ts migration */}
       <text id={titleId} hidden>
         {title || defaultTitle}
       </text>
diff --git a/src/components/media/Media.spec.tsx b/src/components/media/Media.spec.tsx
index 4f5105372..6dbc875b3 100644
--- a/src/components/media/Media.spec.tsx
+++ b/src/components/media/Media.spec.tsx
@@ -33,19 +33,19 @@ describe('Media', () => {
         spacedBottom
       />
     );
-    // @ts-expect-error TS18047
+    // @ts-ignore TS18047
     const rootClasses = media.container.firstElementChild.classList;
 
     expect(rootClasses.contains('sg-media--clickable')).toEqual(true);
     expect(rootClasses.contains('sg-media--no-padding')).toEqual(true);
     expect(
-      // @ts-expect-error TS18047
+      // @ts-ignore TS18047
       media.container.firstElementChild.querySelectorAll(
         '.sg-media__content--spaced-bottom'
       )
     ).toHaveLength(defaultProps.contentArray.length);
     expect(
-      // @ts-expect-error TS18047
+      // @ts-ignore TS18047
       media.container.firstElementChild.querySelectorAll(
         '.sg-media__content--small'
       )
@@ -54,7 +54,7 @@ describe('Media', () => {
 
   it('testing modifications - all off', () => {
     const media = render(<Media {...defaultProps} />);
-    // @ts-expect-error TS18047
+    // @ts-ignore TS18047
     const rootClasses = media.container.firstElementChild.classList;
 
     expect(rootClasses.contains('sg-media--clickable')).toEqual(false);
diff --git a/src/components/mobile-icons/MobileIcon.spec.tsx b/src/components/mobile-icons/MobileIcon.spec.tsx
index 8f68441ce..8e4cb2b26 100644
--- a/src/components/mobile-icons/MobileIcon.spec.tsx
+++ b/src/components/mobile-icons/MobileIcon.spec.tsx
@@ -5,9 +5,9 @@ import {render} from '@testing-library/react';
 it('render if type', () => {
   const icon = render(<MobileIcon type={TYPE.ANSWER_BUBBLE} />);
 
-  // @ts-expect-error TS18047
+  // @ts-ignore TS18047
   expect(icon.container.firstElementChild.tagName).toEqual('svg');
-  // @ts-expect-error TS18047
+  // @ts-ignore TS18047
   expect(icon.container.firstElementChild.querySelector('use')).toBeTruthy();
 });
 
diff --git a/src/components/mobile-icons/MobileIcon.tsx b/src/components/mobile-icons/MobileIcon.tsx
index ec365fc33..696715405 100644
--- a/src/components/mobile-icons/MobileIcon.tsx
+++ b/src/components/mobile-icons/MobileIcon.tsx
@@ -133,7 +133,7 @@ const MobileIcon = ({
   const iconType = `#icon-mobile-${type}`;
 
   return (
-    // @ts-expect-error ts migration
+    // @ts-ignore ts migration
     <svg {...props} className={iconClass}>
       <use xlinkHref={iconType} />
     </svg>
diff --git a/src/components/popover/Popover.spec.tsx b/src/components/popover/Popover.spec.tsx
index f4774e990..83b3ccb44 100644
--- a/src/components/popover/Popover.spec.tsx
+++ b/src/components/popover/Popover.spec.tsx
@@ -163,7 +163,7 @@ describe('<Popover />', () => {
     fireEvent.focus(button);
     expect(await screen.findByText(POPOVER_TEXT)).toBeInTheDocument();
 
-    // @ts-expect-error TS2345
+    // @ts-ignore TS2345
     fireEvent.keyDown(document.activeElement, {key: 'Escape'});
     await waitForElementToBeRemoved(() => screen.queryByText(POPOVER_TEXT));
   });
@@ -175,7 +175,7 @@ describe('<Popover />', () => {
     userEvent.hover(button);
     expect(await screen.findByText(POPOVER_TEXT)).toBeInTheDocument();
 
-    // @ts-expect-error TS2345
+    // @ts-ignore TS2345
     fireEvent.keyDown(document.activeElement, {key: 'Escape'});
     await waitForElementToBeRemoved(() => screen.queryByText(POPOVER_TEXT));
   });
@@ -188,7 +188,7 @@ describe('<Popover />', () => {
     userEvent.hover(button);
     expect(await screen.findByText(POPOVER_TEXT)).toBeInTheDocument();
 
-    // @ts-expect-error TS2345
+    // @ts-ignore TS2345
     fireEvent.keyDown(document.activeElement, {key: 'Escape'});
     await waitForElementToBeRemoved(() => screen.queryByText(POPOVER_TEXT));
   });
diff --git a/src/components/popover/PopoverElement.tsx b/src/components/popover/PopoverElement.tsx
index 908ef1bf7..448d41eb9 100644
--- a/src/components/popover/PopoverElement.tsx
+++ b/src/components/popover/PopoverElement.tsx
@@ -34,7 +34,7 @@ const ARROW_SVG_PATH =
 const PopoverElement = React.forwardRef<
   HTMLDivElement,
   PopoverElementPropsType
-  // @ts-expect-error
+  // @ts-ignore
 >((props: PopoverElementPropsType, ref) => {
   const {
     className,
@@ -45,16 +45,16 @@ const PopoverElement = React.forwardRef<
     ...rest
   } = props;
   const context = usePopoverContext();
-  // @ts-expect-error TS18047
+  // @ts-ignore TS18047
   const elementRef = useMergeRefs([context.refs.setFloating, ref]);
 
-  // @ts-expect-error TS18047
+  // @ts-ignore TS18047
   if (context.hasArrow !== withArrow) context.setHasArrow(withArrow);
 
   const isShorterThanArrowWithPadding =
-    // @ts-expect-error TS18047
+    // @ts-ignore TS18047
     ARROW_SIZE + 2 * context.arrowPadding >
-    // @ts-expect-error TS18047
+    // @ts-ignore TS18047
     context.refs.floating.current?.offsetHeight;
 
   // If the placement is right or left
@@ -63,7 +63,7 @@ const PopoverElement = React.forwardRef<
   // We don't care for top and bottom, because the component min width is enough to fit both arrow and it's padding.
   const arrowOffset =
     isShorterThanArrowWithPadding &&
-    // @ts-expect-error TS18047
+    // @ts-ignore TS18047
     (context.placement.includes('right') || context.placement.includes('left'))
       ? `calc(50% - ${ARROW_SIZE / 2}px)`
       : null;
@@ -71,11 +71,11 @@ const PopoverElement = React.forwardRef<
   const popoverClass = classNames('sg-popover', className);
 
   return (
-    // @ts-expect-error TS18047
+    // @ts-ignore TS18047
     context.isMounted && (
       <FloatingPortal>
         <FloatingFocusManager
-          // @ts-expect-error TS18047
+          // @ts-ignore TS18047
           context={context.context}
           order={['reference', 'content']}
           visuallyHiddenDismiss
@@ -84,20 +84,20 @@ const PopoverElement = React.forwardRef<
           <div
             ref={elementRef}
             className={popoverClass}
-            // @ts-expect-error TS18047
+            // @ts-ignore TS18047
             data-popover-id={context.id}
-            // @ts-expect-error TS18047
+            // @ts-ignore TS18047
             data-placement={context.floatingPlacement}
-            // @ts-expect-error TS18047
+            // @ts-ignore TS18047
             data-status={context.status}
             style={{
-              // @ts-expect-error TS18047
+              // @ts-ignore TS18047
               position: context.strategy,
-              // @ts-expect-error TS18047
+              // @ts-ignore TS18047
               top: context.y ?? 0,
-              // @ts-expect-error TS18047
+              // @ts-ignore TS18047
               left: context.x ?? 0,
-              // @ts-expect-error TS18047
+              // @ts-ignore TS18047
               visibility: context.middlewareData.hide?.referenceHidden
                 ? 'hidden'
                 : 'visible',
@@ -105,17 +105,17 @@ const PopoverElement = React.forwardRef<
               padding,
               maxWidth,
             }}
-            // @ts-expect-error TS18047
+            // @ts-ignore TS18047
             {...context.getFloatingProps()}
             {...rest}
           >
             {children}
             {withArrow && (
               <FloatingArrow
-                // @ts-expect-error TS18047
+                // @ts-ignore TS18047
                 ref={context.arrowRef}
                 className="sg-popover__arrow"
-                // @ts-expect-error TS18047
+                // @ts-ignore TS18047
                 context={context.context}
                 width={ARROW_SIZE}
                 height={ARROW_SIZE}
diff --git a/src/components/popover/PopoverTrigger.tsx b/src/components/popover/PopoverTrigger.tsx
index 4d16b804c..57553bb28 100644
--- a/src/components/popover/PopoverTrigger.tsx
+++ b/src/components/popover/PopoverTrigger.tsx
@@ -3,7 +3,7 @@ import {useMergeRefs} from '@floating-ui/react';
 
 import usePopoverContext from './usePopoverContext';
 
-// @ts-expect-error TS7006
+// @ts-ignore TS7006
 function isReactForwardRefType(object) {
   const REACT_FORWARD_REF_TYPE = Symbol.for('react.forward_ref');
 
@@ -30,28 +30,28 @@ const PopoverTrigger = React.forwardRef<
   const context = usePopoverContext();
   const childrenRef = (children as any).ref;
   const triggerRef = useMergeRefs([
-    // @ts-expect-error TS18047
+    // @ts-ignore TS18047
     context.refs.setReference,
     ref,
     childrenRef,
   ]);
 
   const className = 'sg-popover-trigger';
-  // @ts-expect-error TS18047
+  // @ts-ignore TS18047
   const popoverId = context.getFloatingProps().id as string;
 
   // If children is valid element, i.e. <p>, <Checkbox> etc.
   // and if the element is forward ref type (otherwise we cannot pass ref).
   if (React.isValidElement(children) && isReactForwardRefType(children)) {
     return React.cloneElement(children, {
-      // @ts-expect-error TS18047
+      // @ts-ignore TS18047
       ...context.getReferenceProps({
         className,
         tabIndex: 0, // ensure the element tabindex is set, but allow overriding with children props
         ...rest,
         ...children.props,
         ref: triggerRef, // override forwarded ref with merged refs
-        // @ts-expect-error TS18047
+        // @ts-ignore TS18047
         'data-state': context.isOpen ? 'open' : 'closed',
       }),
     });
@@ -63,9 +63,9 @@ const PopoverTrigger = React.forwardRef<
       tabIndex={0} // ensure the element tabindex is set, but allow overriding with children props
       className={className}
       // The user can style the trigger based on the state
-      // @ts-expect-error TS18047
+      // @ts-ignore TS18047
       data-state={context.isOpen ? 'open' : 'closed'}
-      // @ts-expect-error TS18047
+      // @ts-ignore TS18047
       {...context.getReferenceProps(props)}
       aria-describedby={popoverId}
     >
diff --git a/src/components/popover/usePopover.ts b/src/components/popover/usePopover.ts
index bf6a623cb..7945c0f7a 100644
--- a/src/components/popover/usePopover.ts
+++ b/src/components/popover/usePopover.ts
@@ -108,7 +108,7 @@ const usePopover = ({
     variantParams.padding,
   ]);
 
-  // @ts-expect-error TS7006
+  // @ts-ignore TS7006
   const handleOpenChange = isOpen => {
     if (isControlled && onOpenChange) onOpenChange(isOpen);
     else setIsOpen(isOpen);
@@ -160,7 +160,7 @@ const usePopover = ({
       arrowPadding: variantParams.arrowPadding,
       hasArrow,
       setHasArrow,
-      // @ts-expect-error TS2783
+      // @ts-ignore TS2783
       placement,
       isMounted,
       status,
diff --git a/src/components/popup-menu/PopupMenu.spec.tsx b/src/components/popup-menu/PopupMenu.spec.tsx
index 28320432a..98693b238 100644
--- a/src/components/popup-menu/PopupMenu.spec.tsx
+++ b/src/components/popup-menu/PopupMenu.spec.tsx
@@ -8,7 +8,7 @@ it('render', () => {
   const popupMenu = render(<PopupMenu items={items} />);
 
   expect(
-    // @ts-expect-error TS18047
+    // @ts-ignore TS18047
     popupMenu.container.firstElementChild.classList.contains('sg-popup-menu')
   ).toEqual(true);
 });
@@ -25,7 +25,7 @@ it('extra spacing', () => {
   const popupMenu = render(<PopupMenu items={items} extraSpacing />);
 
   expect(
-    // @ts-expect-error TS18047
+    // @ts-ignore TS18047
     popupMenu.container.firstElementChild.classList.contains(
       'sg-popup-menu--elements-spaced'
     )
diff --git a/src/components/progress-bar/ProgressBar.tsx b/src/components/progress-bar/ProgressBar.tsx
index 51b3c4fbe..53460556e 100644
--- a/src/components/progress-bar/ProgressBar.tsx
+++ b/src/components/progress-bar/ProgressBar.tsx
@@ -85,12 +85,12 @@ const ProgressBar = ({
 }: ProgressBarPropsType) => {
   const trackRef = React.useRef<HTMLDivElement>(null);
   const [transitionDuration, setTransitionDuration] = React.useState(() => {
-    // @ts-expect-error TS2345
+    // @ts-ignore TS2345
     return getTransitionDuration(minValue, maxValue, trackRef);
   });
 
   React.useEffect(() => {
-    // @ts-expect-error TS2345
+    // @ts-ignore TS2345
     setTransitionDuration(getTransitionDuration(minValue, maxValue, trackRef));
   }, [minValue, maxValue]);
 
diff --git a/src/components/rating/Rating.spec.tsx b/src/components/rating/Rating.spec.tsx
index 58112be06..b7294a697 100644
--- a/src/components/rating/Rating.spec.tsx
+++ b/src/components/rating/Rating.spec.tsx
@@ -10,7 +10,7 @@ describe('Rating', () => {
     const rating = render(<Rating active />);
 
     expect(
-      // @ts-expect-error TS18047
+      // @ts-ignore TS18047
       rating.container.firstElementChild.classList.contains(
         'sg-rate-box--active'
       )
@@ -37,16 +37,16 @@ describe('Rating', () => {
 
   it('renders active text when active and mouse over stars', () => {
     const rating = render(<Rating rate={3} activeText="foo" active />);
-    // @ts-expect-error TS18047
+    // @ts-ignore TS18047
     const stars = rating.container.firstElementChild.querySelector(
       '.sg-rate-box__stars-container'
     );
 
     expect(rating.getAllByText('foo')).toHaveLength(2);
-    // @ts-expect-error TS2345
+    // @ts-ignore TS2345
     fireEvent.mouseEnter(stars);
     expect(rating.getAllByText('foo')).toHaveLength(2);
-    // @ts-expect-error TS2345
+    // @ts-ignore TS2345
     fireEvent.mouseLeave(stars);
     expect(rating.getAllByText('foo')).toHaveLength(2);
   });
diff --git a/src/components/select-menu/SelectMenu.chromatic.stories.tsx b/src/components/select-menu/SelectMenu.chromatic.stories.tsx
index 39aeae93f..f94dd856a 100644
--- a/src/components/select-menu/SelectMenu.chromatic.stories.tsx
+++ b/src/components/select-menu/SelectMenu.chromatic.stories.tsx
@@ -8,7 +8,7 @@ import Flex from '../flex/Flex';
 
 const onOptionChange = () => null;
 
-// @ts-expect-error TS7006
+// @ts-ignore TS7006
 export const Sizes = args => {
   return (
     <div style={{display: 'flex', flexDirection: 'row'}}>
@@ -26,7 +26,7 @@ export const Sizes = args => {
   );
 };
 
-// @ts-expect-error TS7006
+// @ts-ignore TS7006
 export const DifferentPopupLenghts = args => {
   return (
     <Flex direction="row" style={{gap: '40px'}}>
@@ -115,7 +115,7 @@ export const DifferentPopupLenghts = args => {
   );
 };
 
-// @ts-expect-error TS7006
+// @ts-ignore TS7006
 const Hovers = args => {
   const types = [{name: 'default'}, {disabled: true, name: 'disabled'}];
 
diff --git a/src/components/select-menu/SelectMenu.spec.tsx b/src/components/select-menu/SelectMenu.spec.tsx
index a6047cb86..a601ff34c 100644
--- a/src/components/select-menu/SelectMenu.spec.tsx
+++ b/src/components/select-menu/SelectMenu.spec.tsx
@@ -19,7 +19,7 @@ export function RenderSelectMenu(props: {
 }) {
   const {selected, ...restProps} = props;
   const [selectedOptions, setSelectedOptions] = React.useState(selected || []);
-  // @ts-expect-error TS7006
+  // @ts-ignore TS7006
   const handleOptionChange = option => {
     if (props.multiSelect) {
       if (!selectedOptions.find(item => item.value === option.value))
diff --git a/src/components/select-menu/SelectMenu.tsx b/src/components/select-menu/SelectMenu.tsx
index bbaf4b25b..73594dfaf 100644
--- a/src/components/select-menu/SelectMenu.tsx
+++ b/src/components/select-menu/SelectMenu.tsx
@@ -154,7 +154,7 @@ export type SelectMenuPropsType = {
    *           options={[{value: 'option1', label: 'Option1'},{value: 'option2', label: 'Select selector'}]}
    *          />
    */
-  // @ts-expect-error TS7051
+  // @ts-ignore TS7051
   onOptionChange: (SelectMenuOptionType) => unknown;
 
   /**
@@ -166,7 +166,7 @@ export type SelectMenuPropsType = {
    *           options={[{value: 'option1', label: 'Option1'},{value: 'option2', label: 'Select selector'}]}
    *          />
    */
-  // @ts-expect-error TS7051
+  // @ts-ignore TS7051
   onToggle?: (boolean) => unknown;
 } & Omit<
   React.AllHTMLAttributes<HTMLElement>,
@@ -242,7 +242,7 @@ const SelectMenu = React.forwardRef<HTMLDivElement, SelectMenuPropsType>(
       disabled,
       multiSelect,
       onEntry: animateEntry,
-      // @ts-expect-error TS2322
+      // @ts-ignore TS2322
       onExit: animateExit,
       onToggle,
       onOptionChange,
@@ -374,11 +374,11 @@ const SelectMenu = React.forwardRef<HTMLDivElement, SelectMenuPropsType>(
 
         return displayLabel;
       } else {
-        // @ts-expect-error TS7034
+        // @ts-ignore TS7034
         const label = [];
 
         selectedOptions.map(option => label.push(option.label));
-        // @ts-expect-error TS7005
+        // @ts-ignore TS7005
         const labelString = label.join(', ');
 
         return (
diff --git a/src/components/select-menu/SelectMenuOption.tsx b/src/components/select-menu/SelectMenuOption.tsx
index eefedc2a1..940d01ab9 100644
--- a/src/components/select-menu/SelectMenuOption.tsx
+++ b/src/components/select-menu/SelectMenuOption.tsx
@@ -53,7 +53,7 @@ const SelectMenuOption = React.forwardRef<
         return (
           <SubjectIcon
             size="small"
-            // @ts-expect-error TS2322
+            // @ts-ignore TS2322
             monoColor={isSelected || isHovered ? null : 'icon-gray-50'}
             type={subjectIconName}
           />
diff --git a/src/components/select-menu/useFloatingSelectMenu.tsx b/src/components/select-menu/useFloatingSelectMenu.tsx
index 7e9e428d1..42c1a057f 100644
--- a/src/components/select-menu/useFloatingSelectMenu.tsx
+++ b/src/components/select-menu/useFloatingSelectMenu.tsx
@@ -18,7 +18,7 @@ const MAX_POPUP_WIDTH = 320;
 
 type UseFloatingSelectMenuPropsType = {
   isExpanded: boolean;
-  // @ts-expect-error TS7051
+  // @ts-ignore TS7051
   onOpenChange: (string) => void;
 };
 
diff --git a/src/components/select-menu/useSelectMenu.tsx b/src/components/select-menu/useSelectMenu.tsx
index 54d17ba94..6bdd09289 100644
--- a/src/components/select-menu/useSelectMenu.tsx
+++ b/src/components/select-menu/useSelectMenu.tsx
@@ -72,7 +72,7 @@ const useSelectMenu = (props: UseSelectMenuPropsType) => {
   const onOpenChange = (isOpen: boolean) => {
     if (disabled) return;
 
-    // @ts-expect-error TS7006
+    // @ts-ignore TS7006
     const handleOpenChange = isOpen => {
       if (isExpandedControlled && onToggle) onToggle(isOpen);
       else setIsExpanded(isOpen);
diff --git a/src/components/select-menu/useSelectMenuAnimations.tsx b/src/components/select-menu/useSelectMenuAnimations.tsx
index 7b611bed0..850b759a6 100644
--- a/src/components/select-menu/useSelectMenuAnimations.tsx
+++ b/src/components/select-menu/useSelectMenuAnimations.tsx
@@ -28,19 +28,19 @@ const useSelectMenuAnimations = (props: UseSelectMenuAnimationsPropsType) => {
   const selectRef = React.useRef<DOMRect>();
   const hasReduceMotion = useReducedMotion();
 
-  // @ts-expect-error TS7031
+  // @ts-ignore TS7031
   const animateExit = ({callback}) => {
     try {
       const select = document.getElementById(selectId);
-      // @ts-expect-error TS18047
+      // @ts-ignore TS18047
       const popupContainer = select.getElementsByClassName(
         popupClassName
       )[0] as HTMLDivElement;
-      // @ts-expect-error TS18047
+      // @ts-ignore TS18047
       const floatingContainer = select.getElementsByClassName(
         floatingContainerClassName
       )[0] as HTMLDivElement;
-      // @ts-expect-error TS18047
+      // @ts-ignore TS18047
       const popupContent = select.getElementsByClassName(
         popupContentClassName
       )[0] as HTMLDivElement;
@@ -141,12 +141,12 @@ const useSelectMenuAnimations = (props: UseSelectMenuAnimationsPropsType) => {
           });
         }
 
-        // @ts-expect-error TS7006
+        // @ts-ignore TS7006
         const cleanupAfterTransition = popupContent => {
           popupContent.classList.remove(SCROLL_HIDE_CLASSNAME);
         };
 
-        // @ts-expect-error TS7006
+        // @ts-ignore TS7006
         const handleTransitionEnd = e => {
           // Once height finishes transition
           // we are sure the component is fully visible
diff --git a/src/components/skip-link/SkipLink.chromatic.stories.tsx b/src/components/skip-link/SkipLink.chromatic.stories.tsx
index 965cecbc6..1d2a3caab 100644
--- a/src/components/skip-link/SkipLink.chromatic.stories.tsx
+++ b/src/components/skip-link/SkipLink.chromatic.stories.tsx
@@ -2,7 +2,7 @@ import * as SkipLink from './SkipLink.stories.mdx';
 import {generateChromaticStory} from '../../chromatic/utils';
 import {within} from '@storybook/testing-library';
 
-// @ts-expect-error TS7031
+// @ts-ignore TS7031
 const play = async ({canvasElement}) => {
   const canvas = within(canvasElement);
   const link = canvas.getByRole('link', {
diff --git a/src/components/sparks/Sparks.tsx b/src/components/sparks/Sparks.tsx
index 08c442b0b..6888f3383 100644
--- a/src/components/sparks/Sparks.tsx
+++ b/src/components/sparks/Sparks.tsx
@@ -236,7 +236,7 @@ const Sparks = React.forwardRef<HTMLDivElement, SparksPropsType>(
               <Particle
                 key={index}
                 shape={shape}
-                // @ts-expect-error TS2322
+                // @ts-ignore TS2322
                 style={{
                   ...style,
                   color: colors?.[colorIndex] || shapeColor[colorIndex],
diff --git a/src/components/sparks/animation.ts b/src/components/sparks/animation.ts
index becec1ab0..e617ad48c 100644
--- a/src/components/sparks/animation.ts
+++ b/src/components/sparks/animation.ts
@@ -96,14 +96,14 @@ function useAnimation(config: AnimationConfig) {
           const {index, overrides = {}} = parameters.current.get(ref);
           const entry = entryAnimations.current.get(ref) ?? [];
 
-          // @ts-expect-error TS7006
+          // @ts-ignore TS7006
           ref.getAnimations().forEach(animation => animation.cancel());
 
           configRef.current.entry?.forEach((keyframesConfig, i) => {
             const id = keyframesConfig.id;
             let {keyframes, options = {}} = keyframesConfig;
 
-            // @ts-expect-error TS2538
+            // @ts-ignore TS2538
             const override = overrides[id];
 
             if (override) {
@@ -145,7 +145,7 @@ function useAnimation(config: AnimationConfig) {
             const id = keyframesConfig.id;
             let {keyframes, options = {}} = keyframesConfig;
 
-            // @ts-expect-error TS2538
+            // @ts-ignore TS2538
             const override = overrides[id];
 
             if (override) {
diff --git a/src/components/sparks/presets.ts b/src/components/sparks/presets.ts
index 8291f6256..3aed51788 100644
--- a/src/components/sparks/presets.ts
+++ b/src/components/sparks/presets.ts
@@ -213,7 +213,7 @@ const heartAnimationReduced: AnimationConfig = {
 };
 
 export const shapeAnimationMap: Record<
-  // @ts-expect-error TS2344
+  // @ts-ignore TS2344
   ParticleProps['shape'],
   {default: AnimationConfig; reduced: AnimationConfig}
 > = {
@@ -227,7 +227,7 @@ export const shapeAnimationMap: Record<
   },
 };
 
-// @ts-expect-error TS2344
+// @ts-ignore TS2344
 export const shapeColorMap: Record<ParticleProps['shape'], string[]> = {
   spark: [
     'var(--yellow-20)',
diff --git a/src/components/spinner-container/SpinnerContainer.tsx b/src/components/spinner-container/SpinnerContainer.tsx
index a9c5e8d85..56809cc78 100644
--- a/src/components/spinner-container/SpinnerContainer.tsx
+++ b/src/components/spinner-container/SpinnerContainer.tsx
@@ -49,7 +49,7 @@ const SpinnerContainer = ({
     return React.Children.map(children, child => {
       if (React.isValidElement(child)) {
         return React.cloneElement(child, {
-          // @ts-expect-error ts migration
+          // @ts-ignore ts migration
           'aria-busy': loading,
         });
       }
diff --git a/src/components/spinner/Spinner.spec.tsx b/src/components/spinner/Spinner.spec.tsx
index 104908551..b269ebc09 100644
--- a/src/components/spinner/Spinner.spec.tsx
+++ b/src/components/spinner/Spinner.spec.tsx
@@ -15,7 +15,7 @@ describe('Spinner', () => {
     const component = render(<Spinner className={testclass} />);
 
     expect(
-      // @ts-expect-error TS18047
+      // @ts-ignore TS18047
       component.container.firstElementChild.classList.contains(`${testclass}`)
     ).toEqual(true);
   });
diff --git a/src/components/subject-icons/SubjectIcon.spec.tsx b/src/components/subject-icons/SubjectIcon.spec.tsx
index 650a1f1a0..4578a76fd 100644
--- a/src/components/subject-icons/SubjectIcon.spec.tsx
+++ b/src/components/subject-icons/SubjectIcon.spec.tsx
@@ -19,7 +19,7 @@ describe('SubjectIcon', () => {
     const icon = render(<SubjectIcon type={TYPE.ACCOUNTANCY} />);
 
     expect(icon.getByRole('img')).toBeTruthy();
-    // @ts-expect-error TS18047
+    // @ts-ignore TS18047
     expect(icon.container.firstElementChild.querySelector('use')).toBeTruthy();
   });
 
diff --git a/src/components/text/Headline.chromatic.stories.tsx b/src/components/text/Headline.chromatic.stories.tsx
index 2c1353cd5..e06c2d621 100644
--- a/src/components/text/Headline.chromatic.stories.tsx
+++ b/src/components/text/Headline.chromatic.stories.tsx
@@ -10,7 +10,7 @@ import {
   responsivePropsStoryLabel,
 } from '../../chromatic/utils';
 
-// @ts-expect-error TS7006
+// @ts-ignore TS7006
 export const ResponsiveProps = args => {
   return (
     <div>
diff --git a/src/components/text/Link.chromatic.stories.tsx b/src/components/text/Link.chromatic.stories.tsx
index 5d69521e3..a85a1a045 100644
--- a/src/components/text/Link.chromatic.stories.tsx
+++ b/src/components/text/Link.chromatic.stories.tsx
@@ -6,7 +6,7 @@ import {
 import React from 'react';
 import Link, {LINK_ALIGN, LINK_SIZE, LINK_WEIGHT, LINK_TRANSFORM} from './Link';
 
-// @ts-expect-error TS7006
+// @ts-ignore TS7006
 export const ResponsiveProps = args => {
   return (
     <div>
diff --git a/src/components/text/Link.tsx b/src/components/text/Link.tsx
index 1fcddcbbe..5d979c36f 100644
--- a/src/components/text/Link.tsx
+++ b/src/components/text/Link.tsx
@@ -194,7 +194,7 @@ const Link = (props: LinkPropsType) => {
 
   const linkType = disabled ? 'span' : 'a';
 
-  // @ts-expect-error TS7006
+  // @ts-ignore TS7006
   const onLinkClick = e => {
     if (!disabled && onClick) {
       return onClick(e);
diff --git a/src/components/text/Subheadline.chromatic.stories.tsx b/src/components/text/Subheadline.chromatic.stories.tsx
index 11a32f994..303da0b1f 100644
--- a/src/components/text/Subheadline.chromatic.stories.tsx
+++ b/src/components/text/Subheadline.chromatic.stories.tsx
@@ -10,7 +10,7 @@ import Subheadline, {
 } from './Subheadline';
 import React from 'react';
 
-// @ts-expect-error TS7006
+// @ts-ignore TS7006
 export const ResponsiveProps = args => {
   return (
     <div>
diff --git a/src/components/text/Subheadline.tsx b/src/components/text/Subheadline.tsx
index 7dbf141ab..3964ad39a 100644
--- a/src/components/text/Subheadline.tsx
+++ b/src/components/text/Subheadline.tsx
@@ -85,12 +85,12 @@ const Subheadline = ({
     ),
     ...generateResponsiveClassNames(
       (propValue: string) => `sg-subheadline--${propValue}`,
-      // @ts-expect-error TS2345
+      // @ts-ignore TS2345
       transform
     ),
     ...generateResponsiveClassNames(
       (propValue: string) => `sg-subheadline--${propValue}`,
-      // @ts-expect-error TS2345
+      // @ts-ignore TS2345
       align
     ),
     className
diff --git a/src/components/text/Text.chromatic.stories.tsx b/src/components/text/Text.chromatic.stories.tsx
index f2bee7b3e..0a5e7c208 100644
--- a/src/components/text/Text.chromatic.stories.tsx
+++ b/src/components/text/Text.chromatic.stories.tsx
@@ -8,7 +8,7 @@ import Text, {TEXT_ALIGN, TEXT_SIZE, TEXT_TRANSFORM, TEXT_WEIGHT} from './Text';
 import hex from '../colors/hex';
 import Flex from '../flex/Flex';
 
-// @ts-expect-error TS7006
+// @ts-ignore TS7006
 export const ResponsiveProps = args => {
   return (
     <div>
diff --git a/src/components/text/Text.spec.tsx b/src/components/text/Text.spec.tsx
index 519102342..93afdfdc5 100644
--- a/src/components/text/Text.spec.tsx
+++ b/src/components/text/Text.spec.tsx
@@ -15,7 +15,7 @@ describe('Text', () => {
     const text = 'random text';
     const component = render(<Text as={TEXT_AS.SPAN}>{text}</Text>);
 
-    // @ts-expect-error TS2531
+    // @ts-ignore TS2531
     expect(component.queryByText(text).tagName).toEqual('SPAN');
   });
 
diff --git a/src/components/text/TextBit.chromatic.stories.tsx b/src/components/text/TextBit.chromatic.stories.tsx
index fccc8923e..55e0a705d 100644
--- a/src/components/text/TextBit.chromatic.stories.tsx
+++ b/src/components/text/TextBit.chromatic.stories.tsx
@@ -6,7 +6,7 @@ import {
 import React from 'react';
 import TextBit, {TEXT_BIT_SIZE} from './TextBit';
 
-// @ts-expect-error TS7006
+// @ts-ignore TS7006
 export const ResponsiveProps = args => {
   return (
     <div>
diff --git a/src/components/tooltip/Tooltip.chromatic.stories.tsx b/src/components/tooltip/Tooltip.chromatic.stories.tsx
index f1eec665e..1662c0406 100644
--- a/src/components/tooltip/Tooltip.chromatic.stories.tsx
+++ b/src/components/tooltip/Tooltip.chromatic.stories.tsx
@@ -11,7 +11,7 @@ import Checkbox from '../form-elements/checkbox/Checkbox';
 import Button from '../buttons/Button';
 
 const Placement = () => {
-  // @ts-expect-error TS7031
+  // @ts-ignore TS7031
   const RenderTooltip = ({placement}) => (
     <Tooltip placement={placement} defaultOpen>
       <Tooltip.Element label="Report this" />
@@ -55,7 +55,7 @@ const Placement = () => {
 };
 
 const TypesOfTriggers = () => {
-  // @ts-expect-error TS7031
+  // @ts-ignore TS7031
   const RenderTooltip = ({trigger}) => (
     <Tooltip defaultOpen>
       <Tooltip.Element label="Here's tooltip" />
@@ -109,7 +109,7 @@ const TypesOfTriggers = () => {
 };
 
 const TextLengths = () => {
-  // @ts-expect-error TS7031
+  // @ts-ignore TS7031
   const RenderShortTooltip = ({placement}) => (
     <Tooltip placement={placement} defaultOpen>
       <Tooltip.Element label="0" />
@@ -123,7 +123,7 @@ const TextLengths = () => {
     </Tooltip>
   );
 
-  // @ts-expect-error TS7031
+  // @ts-ignore TS7031
   const RenderLongTooltip = ({placement}) => (
     <Tooltip placement={placement} defaultOpen>
       <Tooltip.Element
diff --git a/src/components/tooltip/Tooltip.spec.tsx b/src/components/tooltip/Tooltip.spec.tsx
index 72cb1c579..7da861b4b 100644
--- a/src/components/tooltip/Tooltip.spec.tsx
+++ b/src/components/tooltip/Tooltip.spec.tsx
@@ -205,7 +205,7 @@ describe('<Tooltip />', () => {
     fireEvent.focus(button);
     expect(await screen.findByText('Copy to clipboard')).toBeInTheDocument();
 
-    // @ts-expect-error TS2345
+    // @ts-ignore TS2345
     fireEvent.keyDown(document.activeElement, {key: 'Escape'});
     await waitForElementToBeRemoved(() =>
       screen.queryByText('Copy to clipboard')
@@ -230,7 +230,7 @@ describe('<Tooltip />', () => {
     userEvent.hover(button);
     expect(await screen.findByText('Copy to clipboard')).toBeInTheDocument();
 
-    // @ts-expect-error TS2345
+    // @ts-ignore TS2345
     fireEvent.keyDown(document.activeElement, {key: 'Escape'});
     await waitForElementToBeRemoved(() =>
       screen.queryByText('Copy to clipboard')
@@ -256,7 +256,7 @@ describe('<Tooltip />', () => {
     userEvent.hover(button);
     expect(await screen.findByText('Copy to clipboard')).toBeInTheDocument();
 
-    // @ts-expect-error TS2345
+    // @ts-ignore TS2345
     fireEvent.keyDown(document.activeElement, {key: 'Escape'});
     await waitForElementToBeRemoved(() =>
       screen.queryByText('Copy to clipboard')
diff --git a/src/components/tooltip/TooltipElement.tsx b/src/components/tooltip/TooltipElement.tsx
index c9a561a80..adfd8118f 100644
--- a/src/components/tooltip/TooltipElement.tsx
+++ b/src/components/tooltip/TooltipElement.tsx
@@ -27,24 +27,24 @@ const ARROW_SVG_PATH_SMALL =
 const TooltipElement = React.forwardRef<
   HTMLDivElement,
   TooltipElementPropsType
-  // @ts-expect-error
+  // @ts-ignore
 >((props: TooltipElementPropsType, ref) => {
   const {className, label} = props;
   const context = useTooltipContext();
-  // @ts-expect-error TS18047
+  // @ts-ignore TS18047
   const elementRef = useMergeRefs([context.refs.setFloating, ref]);
 
   const arrowSize =
-    // @ts-expect-error TS18047
+    // @ts-ignore TS18047
     context.size === 'small' ? ARROW_SIZE_SMALL : ARROW_SIZE_DEFAULT;
   const arrowSVGPath =
-    // @ts-expect-error TS18047
+    // @ts-ignore TS18047
     context.size === 'small' ? ARROW_SVG_PATH_SMALL : ARROW_SVG_PATH_DEFAULT;
 
   const isShorterThanArrowWithPadding =
-    // @ts-expect-error TS18047
+    // @ts-ignore TS18047
     arrowSize + 2 * context.arrowPadding >
-    // @ts-expect-error TS18047
+    // @ts-ignore TS18047
     context.refs.floating.current?.offsetHeight;
 
   // If the placement is right or left
@@ -53,7 +53,7 @@ const TooltipElement = React.forwardRef<
   // We don't care for top and bottom, because the component min width is enough to fit both arrow and it's padding.
   const arrowOffset =
     isShorterThanArrowWithPadding &&
-    // @ts-expect-error TS18047
+    // @ts-ignore TS18047
     (context.placement.includes('right') || context.placement.includes('left'))
       ? `calc(50% - ${arrowSize / 2}px)`
       : null;
@@ -61,59 +61,59 @@ const TooltipElement = React.forwardRef<
   const tooltipClass = classNames(
     'sg-tooltip',
     {
-      // @ts-expect-error TS18047
+      // @ts-ignore TS18047
       [`sg-tooltip--${String(context.size)}`]: context.size,
-      // @ts-expect-error TS18047
+      // @ts-ignore TS18047
       [`sg-tooltip--${String(context.color)}`]: context.color,
     },
     className
   );
 
   return (
-    // @ts-expect-error TS18047
+    // @ts-ignore TS18047
     context.isMounted && (
       <FloatingPortal>
         <div
           ref={elementRef}
           className={tooltipClass}
-          // @ts-expect-error TS18047
+          // @ts-ignore TS18047
           data-tooltip-id={context.id}
-          // @ts-expect-error TS18047
+          // @ts-ignore TS18047
           data-placement={context.floatingPlacement}
-          // @ts-expect-error TS18047
+          // @ts-ignore TS18047
           data-status={context.status}
           style={{
-            // @ts-expect-error TS18047
+            // @ts-ignore TS18047
             position: context.strategy,
-            // @ts-expect-error TS18047
+            // @ts-ignore TS18047
             top: context.y ?? 0,
-            // @ts-expect-error TS18047
+            // @ts-ignore TS18047
             left: context.x ?? 0,
-            // @ts-expect-error TS18047
+            // @ts-ignore TS18047
             visibility: context.middlewareData.hide?.referenceHidden
               ? 'hidden'
               : 'visible',
             ...props.style,
           }}
           aria-hidden="true"
-          // @ts-expect-error TS18047
+          // @ts-ignore TS18047
           {...context.getFloatingProps()}
           role="none"
         >
           <Text
             className="sg-tooltip__label"
             align="to-center"
-            // @ts-expect-error TS18047
+            // @ts-ignore TS18047
             color={context.color === 'dark' ? 'text-white' : 'text-black'}
             size="small"
           >
             {label}
           </Text>
           <FloatingArrow
-            // @ts-expect-error TS18047
+            // @ts-ignore TS18047
             ref={context.arrowRef}
             className="sg-tooltip__arrow"
-            // @ts-expect-error TS18047
+            // @ts-ignore TS18047
             context={context.context}
             width={arrowSize}
             height={arrowSize}
diff --git a/src/components/tooltip/TooltipTrigger.tsx b/src/components/tooltip/TooltipTrigger.tsx
index 4bdb610fe..c794dc990 100644
--- a/src/components/tooltip/TooltipTrigger.tsx
+++ b/src/components/tooltip/TooltipTrigger.tsx
@@ -3,7 +3,7 @@ import {useMergeRefs} from '@floating-ui/react';
 
 import useTooltipContext from './useTooltipContext';
 
-// @ts-expect-error TS7006
+// @ts-ignore TS7006
 function isReactForwardRefType(object) {
   const REACT_FORWARD_REF_TYPE = Symbol.for('react.forward_ref');
 
@@ -30,16 +30,16 @@ const TooltipTrigger = React.forwardRef<
   const context = useTooltipContext();
   const childrenRef = (children as any).ref;
   const triggerRef = useMergeRefs([
-    // @ts-expect-error TS18047
+    // @ts-ignore TS18047
     context.refs.setReference,
     ref,
     childrenRef,
   ]);
 
   const className = 'sg-tooltip-trigger';
-  // @ts-expect-error TS18047
+  // @ts-ignore TS18047
   const tooltipId = context.getFloatingProps().id as string;
-  // @ts-expect-error TS18047
+  // @ts-ignore TS18047
   const ariaLink = context.asLabel
     ? {'aria-labeledby': tooltipId}
     : {'aria-describedby': tooltipId};
@@ -48,14 +48,14 @@ const TooltipTrigger = React.forwardRef<
   // and if the element is forward ref type (otherwise we cannot pass ref).
   if (React.isValidElement(children) && isReactForwardRefType(children)) {
     return React.cloneElement(children, {
-      // @ts-expect-error TS18047
+      // @ts-ignore TS18047
       ...context.getReferenceProps({
         className,
         tabIndex: 0, // ensure the element tabindex is set, but allow overriding with children props
         ...rest,
         ...children.props,
         ref: triggerRef, // override forwarded ref with merged refs
-        // @ts-expect-error TS18047
+        // @ts-ignore TS18047
         'data-state': context.isOpen ? 'open' : 'closed',
       }),
       ...ariaLink,
@@ -68,9 +68,9 @@ const TooltipTrigger = React.forwardRef<
       tabIndex={0} // ensure the element tabindex is set, but allow overriding with children props
       className={className}
       // The user can style the trigger based on the state
-      // @ts-expect-error TS18047
+      // @ts-ignore TS18047
       data-state={context.isOpen ? 'open' : 'closed'}
-      // @ts-expect-error TS18047
+      // @ts-ignore TS18047
       {...context.getReferenceProps(props)}
       aria-describedby={tooltipId}
     >
diff --git a/src/components/tooltip/useTooltip.ts b/src/components/tooltip/useTooltip.ts
index a8ac36cd1..c2438adf2 100644
--- a/src/components/tooltip/useTooltip.ts
+++ b/src/components/tooltip/useTooltip.ts
@@ -110,7 +110,7 @@ const useTooltip = ({
     variantParams.padding,
   ]);
 
-  // @ts-expect-error TS7006
+  // @ts-ignore TS7006
   const handleOpenChange = isOpen => {
     if (isControlled && onOpenChange) onOpenChange(isOpen);
     else setIsOpen(isOpen);
@@ -153,7 +153,7 @@ const useTooltip = ({
       setIsOpen,
       arrowRef,
       arrowPadding: variantParams.arrowPadding,
-      // @ts-expect-error TS2783
+      // @ts-ignore TS2783
       placement,
       size,
       color,
diff --git a/src/components/transition/CSSTransitionAnimator.spec.ts b/src/components/transition/CSSTransitionAnimator.spec.ts
index 6c77b4f67..5a1eeff05 100644
--- a/src/components/transition/CSSTransitionAnimator.spec.ts
+++ b/src/components/transition/CSSTransitionAnimator.spec.ts
@@ -7,7 +7,7 @@ const classNamesRegistry = {
 
 const createMockedElement = () => {
   const element = document.createElement('div');
-  // @ts-expect-error TS7034
+  // @ts-ignore TS7034
   const styleChanges = [];
 
   Object.defineProperty(element, 'style', {
@@ -20,7 +20,7 @@ const createMockedElement = () => {
   });
   return {
     element,
-    // @ts-expect-error TS7005
+    // @ts-ignore TS7005
     styleChanges,
   };
 };
diff --git a/src/components/transition/CSSTransitionAnimator.ts b/src/components/transition/CSSTransitionAnimator.ts
index df2780395..91439b4be 100644
--- a/src/components/transition/CSSTransitionAnimator.ts
+++ b/src/components/transition/CSSTransitionAnimator.ts
@@ -33,7 +33,7 @@ export function createCSSTransitionAnimator(
   };
 
   const hasLastChangedValue = (prop: string) =>
-    // @ts-expect-error TS7053
+    // @ts-ignore TS7053
     history[0][prop].value !== history[1][prop].value;
 
   const getWillChangeProps = () => ({
@@ -74,7 +74,7 @@ export function createCSSTransitionAnimator(
     const combine = (a: Array<string>) => a.join(', ');
 
     const willChangePropsArray = Object.keys(willChangeProps).filter(
-      // @ts-expect-error TS7053
+      // @ts-ignore TS7053
       prop => willChangeProps[prop]
     );
 
@@ -85,7 +85,7 @@ export function createCSSTransitionAnimator(
     if (transitioned) {
       const transitionProperty: string[] = [];
       const transitionDuration: string[] = [];
-      // @ts-expect-error TS7034
+      // @ts-ignore TS7034
       const transitionTimingFunction = [];
 
       /**
@@ -94,15 +94,15 @@ export function createCSSTransitionAnimator(
        */
       willChangePropsArray.forEach(prop => {
         transitionProperty.push(prop);
-        // @ts-expect-error TS7053
+        // @ts-ignore TS7053
         transitionDuration.push(applySpeed(parsedProps[prop].duration, speed));
-        // @ts-expect-error TS7053
+        // @ts-ignore TS7053
         transitionTimingFunction.push(parsedProps[prop].easing);
       });
       element.style.transitionProperty = combine(transitionProperty);
       element.style.transitionDuration = combine(oneOrAll(transitionDuration));
       element.style.transitionTimingFunction = combine(
-        // @ts-expect-error TS7005
+        // @ts-ignore TS7005
         oneOrAll(transitionTimingFunction)
       );
     }
@@ -178,7 +178,7 @@ export function createCSSTransitionAnimator(
   ) {
     if (parsedProps !== undefined) {
       return !Object.keys(willChangeProps).some(
-        // @ts-expect-error TS7053
+        // @ts-ignore TS7053
         prop => parsedProps[prop].duration !== '0ms'
       );
     }
@@ -212,7 +212,7 @@ export function createCSSTransitionAnimator(
       const willChangeProps = getWillChangeProps();
 
       remainingPropsToChange = Object.keys(willChangeProps).reduce(
-        // @ts-expect-error TS7053
+        // @ts-ignore TS7053
         (sum, prop) => sum + Number(willChangeProps[prop]),
         0
       );
diff --git a/src/components/transition/Transition.spec.tsx b/src/components/transition/Transition.spec.tsx
index afcdd384c..b979979c0 100644
--- a/src/components/transition/Transition.spec.tsx
+++ b/src/components/transition/Transition.spec.tsx
@@ -8,7 +8,7 @@ class TransitionEvent extends Event {
   propertyName: string;
   pseudoElement: string;
 
-  // @ts-expect-error TS7006
+  // @ts-ignore TS7006
   constructor(type, init: {[key: string]: any} = {}) {
     super(type, init);
     this.elapsedTime = init.elapsedTime || 0.0;
@@ -69,7 +69,7 @@ describe('<Transition />', () => {
   });
 
   it('does not apply any style when not support transition', () => {
-    // @ts-expect-error TS2322
+    // @ts-ignore TS2322
     global.TransitionEvent = undefined;
     const wrapper = render(<Transition effect={testEffect} active />);
 
@@ -79,7 +79,7 @@ describe('<Transition />', () => {
   });
 
   it('fires onTransitionStart as a fallback when not support transition', () => {
-    // @ts-expect-error TS2322
+    // @ts-ignore TS2322
     global.TransitionEvent = undefined;
     const onTransitionStart = jest.fn();
 
@@ -94,7 +94,7 @@ describe('<Transition />', () => {
   });
 
   it('fires onTransitionEnd as a fallback when not support transition', () => {
-    // @ts-expect-error TS2322
+    // @ts-ignore TS2322
     global.TransitionEvent = undefined;
     const onTransitionEnd = jest.fn();
 
@@ -147,7 +147,7 @@ describe('<Transition />', () => {
           />
         );
       });
-      // @ts-expect-error TS2345
+      // @ts-ignore TS2345
       fireEvent.transitionEnd(wrapper.container.firstElementChild);
       expect(
         (wrapper.container.firstElementChild as HTMLElement).style.opacity
diff --git a/src/components/transition/Transition.tsx b/src/components/transition/Transition.tsx
index 3c6fbc1d4..b72912e76 100644
--- a/src/components/transition/Transition.tsx
+++ b/src/components/transition/Transition.tsx
@@ -12,10 +12,10 @@ import {getDebugOptions} from './debug';
 
 Transition.createEffect = predefinedEffects.createEffect;
 
-// @ts-expect-error TS7006
+// @ts-ignore TS7006
 const isFillModeBackwards = mode => mode === 'backwards' || mode === 'both';
 
-// @ts-expect-error TS7006
+// @ts-ignore TS7006
 const isFillModeForwards = mode => mode === 'forwards' || mode === 'both';
 
 // https://github.com/jsdom/jsdom/issues/1781
@@ -201,7 +201,7 @@ function BaseTransition({
     const container = containerRef.current;
 
     if (container) {
-      // @ts-expect-error TS2339
+      // @ts-ignore TS2339
       container.className = classNamesRegistry.toString();
     }
   }, [classNamesRegistry, baseClassName]);
diff --git a/src/components/transition/debug.ts b/src/components/transition/debug.ts
index d105a445e..58e87719d 100644
--- a/src/components/transition/debug.ts
+++ b/src/components/transition/debug.ts
@@ -3,7 +3,7 @@ type DebugOptionsType = {
   outlines: boolean;
 };
 
-// @ts-expect-error TS7034
+// @ts-ignore TS7034
 let batchTimeoutId = null;
 
 export function getDebugOptions(): DebugOptionsType {
@@ -38,7 +38,7 @@ export function getDebugOptions(): DebugOptionsType {
    * therefore multiple references to this function should not
    * immediately print a warning.
    */
-  // @ts-expect-error TS7005
+  // @ts-ignore TS7005
   clearTimeout(batchTimeoutId);
   batchTimeoutId = setTimeout(printWarning, 100);
   return options;
diff --git a/src/components/transition/predefinedEffects.ts b/src/components/transition/predefinedEffects.ts
index 9a47504fb..dbb1e5dde 100644
--- a/src/components/transition/predefinedEffects.ts
+++ b/src/components/transition/predefinedEffects.ts
@@ -170,12 +170,12 @@ export function createEffect({
  */
 function mergeDeepEffects<T extends {}>(target: T, source: T): T {
   Object.keys(source).forEach(key => {
-    // @ts-expect-error TS7053
+    // @ts-ignore TS7053
     if (typeof target[key] === 'object') {
-      // @ts-expect-error TS7053
+      // @ts-ignore TS7053
       target[key] = mergeDeepEffects(target[key], source[key]);
     } else {
-      // @ts-expect-error TS7053
+      // @ts-ignore TS7053
       target[key] = source[key];
     }
   });
diff --git a/src/components/transition/propertyObject.ts b/src/components/transition/propertyObject.ts
index 59841d22a..0db06893b 100644
--- a/src/components/transition/propertyObject.ts
+++ b/src/components/transition/propertyObject.ts
@@ -127,7 +127,7 @@ export function parsePropertyObject({
   };
 }
 
-// @ts-expect-error TS7006
+// @ts-ignore TS7006
 function getDurationValue(duration) {
   if (duration === undefined) {
     return DEFAULT_DURATION_VALUE;
@@ -137,26 +137,26 @@ function getDurationValue(duration) {
     return `${duration}ms`;
   }
 
-  // @ts-expect-error TS7053
+  // @ts-ignore TS7053
   if (DURATION_VALUES[duration] !== undefined) {
-    // @ts-expect-error TS7053
+    // @ts-ignore TS7053
     return DURATION_VALUES[duration];
   }
 
   return DEFAULT_DURATION_VALUE;
 }
 
-// @ts-expect-error TS7006
+// @ts-ignore TS7006
 function getEasingValue(easing) {
   if (easing === undefined) {
     return DEFAULT_EASING_VALUE;
   }
 
-  // @ts-expect-error TS7053
+  // @ts-ignore TS7053
   return EASING_VALUES[easing];
 }
 
-// @ts-expect-error TS7006
+// @ts-ignore TS7006
 function getTranslateValue(translate) {
   if (translate === undefined) {
     return DEFAULT_TRANSLATE_VALUE;
@@ -167,36 +167,36 @@ function getTranslateValue(translate) {
   }
 
   // $FlowFixMe: could be TransitionTranslateType or a string
-  // @ts-expect-error TS7053
+  // @ts-ignore TS7053
   if (TRANSLATE_VALUES[translate] !== undefined) {
-    // @ts-expect-error TS7053
+    // @ts-ignore TS7053
     return TRANSLATE_VALUES[translate];
   }
 
   return translate;
 }
 
-// @ts-expect-error TS7006
+// @ts-ignore TS7006
 function getScaleValue(scale) {
   return scale === undefined ? DEFAULT_SCALE_VALUE : String(scale);
 }
 
-// @ts-expect-error TS7031
+// @ts-ignore TS7031
 function getTransformValue({translateX, translateY, scaleX, scaleY}) {
   return `translate3d(${translateX}, ${translateY}, 0px) scale3d(${scaleX}, ${scaleY}, 1)`;
 }
 
-// @ts-expect-error TS7006
+// @ts-ignore TS7006
 function getTransformOriginValue(transform) {
   return (transform && transform.origin) || DEFAULT_TRANSFORM_ORIGIN_VALUE;
 }
 
-// @ts-expect-error TS7006
+// @ts-ignore TS7006
 function getOpacityValue(opacity) {
   return opacity === undefined ? DEFAULT_OPACITY_VALUE : String(opacity);
 }
 
-// @ts-expect-error TS7006
+// @ts-ignore TS7006
 function getWidthHeightValue(widthHeight) {
   if (widthHeight === undefined) {
     return DEFAULT_WIDTH_HEIGHT_VALUE;
diff --git a/src/components/transition/stories/CurvedMovement.tsx b/src/components/transition/stories/CurvedMovement.tsx
index b11f1c6a5..361de2526 100644
--- a/src/components/transition/stories/CurvedMovement.tsx
+++ b/src/components/transition/stories/CurvedMovement.tsx
@@ -110,7 +110,7 @@ export const CurvedMovement = () => {
   );
 };
 
-// @ts-expect-error TS7006
+// @ts-ignore TS7006
 const getBoxStyle = expanded => {
   if (!expanded) {
     return {
diff --git a/src/components/transition/stories/ExpandingDetails.tsx b/src/components/transition/stories/ExpandingDetails.tsx
index b33c56a7c..3c69efaa5 100644
--- a/src/components/transition/stories/ExpandingDetails.tsx
+++ b/src/components/transition/stories/ExpandingDetails.tsx
@@ -93,7 +93,7 @@ const ExpandableBox = ({
      * https://css-tricks.com/animating-layouts-with-the-flip-technique/
      */
     setEffects({
-      // @ts-expect-error TS2322
+      // @ts-ignore TS2322
       expandingBox: {
         initial: {
           transform: {
@@ -110,7 +110,7 @@ const ExpandableBox = ({
           duration: 'gentle1',
         },
       },
-      // @ts-expect-error TS2322
+      // @ts-ignore TS2322
       appearingContent: {
         initial: {
           opacity: 0,
@@ -268,7 +268,7 @@ const exampleData: ExampleDataType = [
   },
 ];
 
-// @ts-expect-error TS7006
+// @ts-ignore TS7006
 const getElementStyle = (expanded, animating) => {
   if (expanded) {
     return {
@@ -294,7 +294,7 @@ const getElementStyle = (expanded, animating) => {
   } as const;
 };
 
-// @ts-expect-error TS7006
+// @ts-ignore TS7006
 const getBoxStylingProps = color => {
   const colorsMap = {
     red: {
@@ -317,9 +317,9 @@ const getBoxStylingProps = color => {
       position: 'relative',
       overflow: 'hidden',
     },
-    // @ts-expect-error TS7053
+    // @ts-ignore TS7053
     color: colorsMap[color].backgroundColor,
-    // @ts-expect-error TS7053
+    // @ts-ignore TS7053
     borderColor: colorsMap[color].borderColor,
     border: true,
   } as const;
diff --git a/src/components/transition/stories/FluidList.tsx b/src/components/transition/stories/FluidList.tsx
index a50ca00e8..aa41fea64 100644
--- a/src/components/transition/stories/FluidList.tsx
+++ b/src/components/transition/stories/FluidList.tsx
@@ -132,7 +132,7 @@ const FluidListItem = ({
        * https://css-tricks.com/animating-layouts-with-the-flip-technique/
        */
       setMovementEffect({
-        // @ts-expect-error TS2353
+        // @ts-ignore TS2353
         initial: {
           transform: {
             translateY: -transformation.diffTop,
@@ -151,7 +151,7 @@ const FluidListItem = ({
     <div ref={elementRef}>
       <Transition
         active
-        // @ts-expect-error TS2322
+        // @ts-ignore TS2322
         effect={getTransitionEffect()}
         delay={getTransitionDelay()}
         onTransitionEnd={removing ? onRemove : undefined}
diff --git a/src/components/transition/stories/InTextCounter.tsx b/src/components/transition/stories/InTextCounter.tsx
index b84b860f0..c22653d76 100644
--- a/src/components/transition/stories/InTextCounter.tsx
+++ b/src/components/transition/stories/InTextCounter.tsx
@@ -36,7 +36,7 @@ export const InTextCounter = () => {
   const [index, setIndex] = React.useState(0);
   const currentEffect = cycle[index % cycle.length];
 
-  // @ts-expect-error TS7006
+  // @ts-ignore TS7006
   const handleTransitionEnd = effect => {
     setIndex(increment);
 
diff --git a/src/components/transition/stories/SharedAxis.tsx b/src/components/transition/stories/SharedAxis.tsx
index 69821a134..4eb049e77 100644
--- a/src/components/transition/stories/SharedAxis.tsx
+++ b/src/components/transition/stories/SharedAxis.tsx
@@ -50,15 +50,15 @@ export const SharedAxis = () => {
       const direction = currentViewIndex < viewIndex ? 'left' : 'right';
 
       // hide previous view
-      // @ts-expect-error TS2345
+      // @ts-ignore TS2345
       setEffect(createSlideOutEffect(direction));
 
       // show the next view
       nextTransitionCallback.current = () => {
         setCurrentViewIndex(viewIndex);
-        // @ts-expect-error TS2345
+        // @ts-ignore TS2345
         setEffect(createSlideInEffect(direction));
-        // @ts-expect-error TS2322
+        // @ts-ignore TS2322
         nextTransitionCallback.current = null;
       };
     }
diff --git a/src/components/utils/UseFirstpaintExample.tsx b/src/components/utils/UseFirstpaintExample.tsx
index 79382ebf1..c35d901aa 100644
--- a/src/components/utils/UseFirstpaintExample.tsx
+++ b/src/components/utils/UseFirstpaintExample.tsx
@@ -11,13 +11,13 @@ export const Example = () => {
     setIsToggled(!isToggled);
 
     if (shouldAnimateRef.current) {
-      // @ts-expect-error TS18048
+      // @ts-ignore TS18048
       animatedElementRef.current.style.animationDuration = '';
     }
   }, [isToggled]);
 
   React.useLayoutEffect(() => {
-    // @ts-expect-error TS18048
+    // @ts-ignore TS18048
     animatedElementRef.current.style.animationDuration = '0ms';
   }, []);
 
@@ -33,7 +33,7 @@ export const Example = () => {
             'use-first-paint-example-box--toggled': isToggled,
           })}
           onClick={handleClick}
-          // @ts-expect-error TS2322
+          // @ts-ignore TS2322
           ref={animatedElementRef}
         >
           Click me
diff --git a/src/components/utils/__mocks__/mq.ts b/src/components/utils/__mocks__/mq.ts
index 936f48770..f0bcb3895 100644
--- a/src/components/utils/__mocks__/mq.ts
+++ b/src/components/utils/__mocks__/mq.ts
@@ -20,7 +20,7 @@ type MediaQueryListenerType = (
 ) => void;
 export default class MatchMedia {
   mediaQueries: Record<string, Array<MediaQueryListenerType>> = {};
-  // @ts-expect-error TS2564
+  // @ts-ignore TS2564
   mediaQueryList: MediaQueryList;
   userCurrentMediaQuery: string;
 
@@ -87,7 +87,7 @@ export default class MatchMedia {
 
     this.mediaQueries[MEDIA_QUERY].forEach(listener => {
       listener // $FlowFixMe
-        // @ts-expect-error TS2554
+        // @ts-ignore TS2554
         .call(this.mediaQueryList, mqListEvent);
     });
   }
@@ -98,7 +98,7 @@ export default class MatchMedia {
 
   destroy(): void {
     this.clear();
-    // @ts-expect-error TS2790
+    // @ts-ignore TS2790
     delete window.matchMedia;
   }
 }
diff --git a/src/components/utils/responsive-props.spec.ts b/src/components/utils/responsive-props.spec.ts
index 2555df1ca..7d5966831 100644
--- a/src/components/utils/responsive-props.spec.ts
+++ b/src/components/utils/responsive-props.spec.ts
@@ -54,7 +54,7 @@ describe('mergeResponsiveProps', () => {
   });
 });
 describe('generateResponsiveClassNames', () => {
-  // @ts-expect-error TS7006
+  // @ts-ignore TS7006
   const generateClass = prop => (prop ? 'foo' : 'bar');
 
   const responsivePropsCases = [
@@ -123,7 +123,7 @@ describe('generateResponsiveClassNames', () => {
 
   it.each(responsivePropsCases)(
     'renders responsive classNames when prop passed as %s with %s',
-    // @ts-expect-error TS2345
+    // @ts-ignore TS2345
     (type, testCase, prop, classNames) => {
       expect(generateResponsiveClassNames(generateClass, prop)).toEqual(
         classNames
diff --git a/src/components/utils/responsive-props.ts b/src/components/utils/responsive-props.ts
index bb9bca5f6..c2b4d03e8 100644
--- a/src/components/utils/responsive-props.ts
+++ b/src/components/utils/responsive-props.ts
@@ -55,7 +55,7 @@ export function mergeResponsiveProps(
     }
   });
   // fill empty breakpoints when other props have values
-  // @ts-expect-error TS7034
+  // @ts-ignore TS7034
   let lastRowValues = [];
 
   breakpoints.forEach(breakpoint => {
@@ -67,9 +67,9 @@ export function mergeResponsiveProps(
     if (valueBreakpointExist) {
       // eslint-disable-next-line no-loop-func
       propObjects.forEach((propObject, propObjectsIndex) => {
-        // @ts-expect-error TS7005
+        // @ts-ignore TS7005
         if (lastRowValues[propObjectsIndex] && !propObject[breakpoint]) {
-          // @ts-expect-error TS7005
+          // @ts-ignore TS7005
           propObject[breakpoint] = lastRowValues[propObjectsIndex];
         }
       });
@@ -87,7 +87,7 @@ export function mergeResponsiveProps(
           propObject[breakpoint] !== undefined
       )
     ) {
-      // @ts-expect-error TS7053
+      // @ts-ignore TS7053
       acc[breakpoint] = propObjects.map<unknown>(
         propObject => propObject[breakpoint]
       );
@@ -117,7 +117,7 @@ export function generateResponsiveClassNames<T>(
           return acc;
         } else {
           acc.push(
-            // @ts-expect-error TS2345
+            // @ts-ignore TS2345
             `${
               responsivePrefixes[index] ? `${responsivePrefixes[index]}:` : ''
             }${createBaseClassName(propBreakpointValue)}`
@@ -131,17 +131,17 @@ export function generateResponsiveClassNames<T>(
 
   return breakpoints
     .map(breakpoint => {
-      // @ts-expect-error TS7053
+      // @ts-ignore TS7053
       if (prop[breakpoint] === null || prop[breakpoint] === undefined) {
         return '';
-        // @ts-expect-error TS7053
+        // @ts-ignore TS7053
       } else if (!createBaseClassName(prop[breakpoint])) {
         return '';
       } else {
         return breakpoint === 'sm'
-          ? // @ts-expect-error TS7053
+          ? // @ts-ignore TS7053
             createBaseClassName(prop[breakpoint])
-          : // @ts-expect-error TS7053
+          : // @ts-ignore TS7053
             `${breakpoint}:${createBaseClassName(prop[breakpoint])}`;
       }
     })
diff --git a/src/components/utils/useReducedMotion.spec.ts b/src/components/utils/useReducedMotion.spec.ts
index 9ca8a3684..2ab88f093 100644
--- a/src/components/utils/useReducedMotion.spec.ts
+++ b/src/components/utils/useReducedMotion.spec.ts
@@ -6,12 +6,12 @@ const MOTION_MQ = {
   reduced: '(prefers-reduced-motion: reduce)',
   default: '(prefers-reduced-motion: default)',
 };
-// @ts-expect-error TS7034
+// @ts-ignore TS7034
 let matchMedia;
 
 describe('useReducedMotion', () => {
   afterEach(() => {
-    // @ts-expect-error TS7005
+    // @ts-ignore TS7005
     matchMedia.destroy();
   });
   it('returns true if user preference is to reduce motion', () => {
@@ -31,13 +31,13 @@ describe('useReducedMotion', () => {
     const {result} = renderHook(() => useReducedMotion());
 
     expect(result.current).toBe(false);
-    // @ts-expect-error TS7005
+    // @ts-ignore TS7005
     act(() => matchMedia.updateMediaQuery(MOTION_MQ.reduced));
     expect(result.current).toBe(true);
-    // @ts-expect-error TS7005
+    // @ts-ignore TS7005
     act(() => matchMedia.updateMediaQuery(MOTION_MQ.default));
     expect(result.current).toBe(false);
-    // @ts-expect-error TS7005
+    // @ts-ignore TS7005
     act(() => matchMedia.updateMediaQuery(MOTION_MQ.reduced));
     expect(result.current).toBe(true);
   });
diff --git a/src/docs/addons/sandbox/CodeEditor.tsx b/src/docs/addons/sandbox/CodeEditor.tsx
index e459a569d..559da4233 100644
--- a/src/docs/addons/sandbox/CodeEditor.tsx
+++ b/src/docs/addons/sandbox/CodeEditor.tsx
@@ -12,12 +12,12 @@ import {
   createVirtualTypeScriptEnvironment,
   VirtualTypeScriptEnvironment,
 } from '@typescript/vfs';
-// @ts-expect-error TS7016
+// @ts-ignore TS7016
 import lzstring from 'lz-string';
 import {useActiveCode, SandpackCodeEditor} from '@codesandbox/sandpack-react';
-// @ts-expect-error
+// @ts-ignore
 import styleguideTypeDefinitions from '!!raw-loader!../../../../dist/sandbox-types/brainly-style-guide-sandbox.d.ts';
-// @ts-expect-error
+// @ts-ignore
 import reactTypes from '!!raw-loader!../../../../node_modules/@types/react/index.d.ts';
 
 type CodeEditorPropsType = {
@@ -87,7 +87,7 @@ export const CodeEditor = ({code}: CodeEditorPropsType) => {
       ];
 
       setTsEnv(env);
-      // @ts-expect-error TS2345
+      // @ts-ignore TS2345
       setExtensions(extensions);
     };
 
diff --git a/src/docs/addons/sandbox/Sandbox.tsx b/src/docs/addons/sandbox/Sandbox.tsx
index 317dbc35f..828f06122 100644
--- a/src/docs/addons/sandbox/Sandbox.tsx
+++ b/src/docs/addons/sandbox/Sandbox.tsx
@@ -1,5 +1,5 @@
 import {SandpackProvider, SandpackPreview} from '@codesandbox/sandpack-react';
-// @ts-expect-error TS7016
+// @ts-ignore TS7016
 import styleguideJsCode from '!!raw-loader!../../../../dist/sandbox/sandbox';
 import * as React from 'react';
 import {CodeEditor} from './CodeEditor';
diff --git a/src/docs/addons/sandbox/manager.tsx b/src/docs/addons/sandbox/manager.tsx
index d153a465e..feec6d322 100644
--- a/src/docs/addons/sandbox/manager.tsx
+++ b/src/docs/addons/sandbox/manager.tsx
@@ -21,7 +21,7 @@ addons.register('sandbox', () => {
       });
 
       return (
-        // @ts-expect-error TS2322
+        // @ts-ignore TS2322
         <AddonPanel key={key} active={active}>
           {active && state.layout.showPanel && state.viewMode !== 'docs' ? (
             <Sandbox code={code} />
diff --git a/src/docs/blocks/Label.tsx b/src/docs/blocks/Label.tsx
index 337621acc..ca58a63f9 100644
--- a/src/docs/blocks/Label.tsx
+++ b/src/docs/blocks/Label.tsx
@@ -5,7 +5,7 @@ const Status = styled.span`
   margin-left: 8px;
 `;
 
-// @ts-expect-error TS7031
+// @ts-ignore TS7031
 // eslint-disable-next-line react/prop-types
 const Label = ({children, status}) => {
   return (
diff --git a/src/docs/blocks/utils.ts b/src/docs/blocks/utils.ts
index 45ee9a310..a9e294790 100644
--- a/src/docs/blocks/utils.ts
+++ b/src/docs/blocks/utils.ts
@@ -1,4 +1,4 @@
-// @ts-expect-error TS7006
+// @ts-ignore TS7006
 const getBlockBackgroundStyle = theme => {
   return {
     borderRadius: theme.appBorderRadius,
diff --git a/src/logo-url.ts b/src/logo-url.ts
index b7cd010bb..7c3871833 100644
--- a/src/logo-url.ts
+++ b/src/logo-url.ts
@@ -1,4 +1,4 @@
-// @ts-expect-error
+// @ts-ignore
 import LOGO_SOURCE_PATHS from './logos';
 
 declare let LOGO_BASE_URL: string;
diff --git a/src/logos.codegen.ts b/src/logos.codegen.ts
index fa2a80d9e..4b06ca034 100644
--- a/src/logos.codegen.ts
+++ b/src/logos.codegen.ts
@@ -8,7 +8,7 @@ const logos = glob
   .sync('images/logos/**/*.svg', {
     cwd: path.join(__dirname),
   })
-  // @ts-expect-error TS7006
+  // @ts-ignore TS7006
   .reduce((acc, next) => {
     const key = path.basename(next).split('.')[0];
 
diff --git a/src/sandbox.ts b/src/sandbox.ts
index bb357df34..f8f51f8bb 100644
--- a/src/sandbox.ts
+++ b/src/sandbox.ts
@@ -2,7 +2,7 @@ import './main.scss';
 import * as styleguide from './index';
 import * as docsUtils from './docs/utils';
 
-// @ts-expect-error TS7006
+// @ts-ignore TS7006
 function importAll(r) {
   r.keys().forEach(r);
 }
@@ -16,11 +16,11 @@ importAll(require.context('./images/math-symbols', true, /\.svg$/));
 importAll(require.context('./images/mobile-icons', true, /\.svg$/));
 
 Object.keys(styleguide).forEach(exportName => {
-  // @ts-expect-error TS7015
+  // @ts-ignore TS7015
   window[exportName] = styleguide[exportName];
 });
 
 Object.keys(docsUtils).forEach(exportName => {
-  // @ts-expect-error TS7015
+  // @ts-ignore TS7015
   window[exportName] = docsUtils[exportName];
 });