diff --git a/package.json b/package.json
index b3f3e66e24..4ff8d675bf 100644
--- a/package.json
+++ b/package.json
@@ -28,11 +28,13 @@
     "@codesandbox/sandpack-react": "^1.17.0",
     "@codesandbox/sandpack-themes": "^1.17.0",
     "@floating-ui/react": "^0.21.1",
+    "@types/jest-axe": "^3.5.9",
     "chalk": "4.1.2",
     "classnames": "^2.3.2",
     "glob": "^7.2.0",
     "inquirer": "^8.2.0",
     "jscodeshift": "^0.13.1",
+    "lz-string": "1.4.4",
     "meow": "^5.0.0",
     "patch-package": "^6.5.1",
     "path": "^0.12.7",
diff --git a/src/axe/testA11y.ts b/src/axe/testA11y.ts
index 11c653b7f3..482e29b93f 100644
--- a/src/axe/testA11y.ts
+++ b/src/axe/testA11y.ts
@@ -22,6 +22,7 @@ import {render} from '@testing-library/react';
  * ```
  */
 
+// @ts-expect-error 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 62fb64a34b..94f01d487d 100644
--- a/src/chromatic/HoverStyle.tsx
+++ b/src/chromatic/HoverStyle.tsx
@@ -48,14 +48,17 @@ const applyHoverStates = (
 
   const hoverStylesheet = hStylesheet.sheet;
 
+  // @ts-expect-error TS18047
   if (!hoverStylesheet.cssRules || hoverStylesheet.cssRules.length !== 0) {
     return;
   }
 
   const insertUnhoveredRule = (unhoveredSelector: string) => {
     if (unhoveredSelector) {
+      // @ts-expect-error TS18047
       hoverStylesheet.insertRule(
         unhoveredSelector,
+        // @ts-expect-error TS18047
         hoverStylesheet.cssRules.length
       );
     }
@@ -69,6 +72,7 @@ const applyHoverStates = (
       if (conditionText) {
         Array.from((rule as CSSGroupingRule).cssRules).forEach(r => {
           insertUnhoveredRule(
+            // @ts-expect-error TS2345
             generateUnhoveredSelector(
               r as CSSStyleRule,
               hoverContainerId,
@@ -78,6 +82,7 @@ const applyHoverStates = (
         });
       } else {
         insertUnhoveredRule(
+          // @ts-expect-error TS2345
           generateUnhoveredSelector(rule as CSSStyleRule, hoverContainerId)
         );
       }
@@ -98,6 +103,7 @@ const HoverStyle = ({
   const hoverContainerId = 'hover-container';
 
   React.useEffect(() => {
+    // @ts-expect-error TS2345
     applyHoverStates(hoverContainerId, styleheetRef.current);
   }, []);
 
diff --git a/src/chromatic/utils.tsx b/src/chromatic/utils.tsx
index 9fc481d3b9..4a34e58eda 100644
--- a/src/chromatic/utils.tsx
+++ b/src/chromatic/utils.tsx
@@ -27,6 +27,7 @@ export const generateChromaticStory: any = (
           const storyName = !isNew && storyToHover;
 
           return (
+            // @ts-expect-error TS2322
             <HoverStyle storyName={storyName} key={storyName || i}>
               <HoverStory {...module.default.args} {...HoverStory.args} />
             </HoverStyle>
@@ -36,6 +37,7 @@ export const generateChromaticStory: any = (
   );
 };
 
+// @ts-expect-error 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 4246407140..6b3e0c931b 100644
--- a/src/components/accordion/Accordion.chromatic.stories.tsx
+++ b/src/components/accordion/Accordion.chromatic.stories.tsx
@@ -14,6 +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
 const WithTooltip = args => {
   const handleChange = () => null;
 
diff --git a/src/components/accordion/Accordion.tsx b/src/components/accordion/Accordion.tsx
index 7bcdddaa9d..14680cb439 100644
--- a/src/components/accordion/Accordion.tsx
+++ b/src/components/accordion/Accordion.tsx
@@ -167,6 +167,7 @@ const Accordion = ({
     const wrapper = wrapperRef.current;
 
     function handleKeyDown(event: KeyboardEvent) {
+      // @ts-expect-error 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 f3c96a44a8..e01e739e8d 100644
--- a/src/components/action-list/ActionList.spec.tsx
+++ b/src/components/action-list/ActionList.spec.tsx
@@ -18,6 +18,7 @@ describe('ActionList', () => {
     );
     const root = actionList.container.firstElementChild;
 
+    // @ts-expect-error TS18047
     expect(root.classList.contains('sg-actions-list')).toEqual(true);
   });
 
@@ -25,6 +26,7 @@ describe('ActionList', () => {
     const actionList = render(<ActionList direction={DIRECTION.TO_RIGHT} />);
     const root = actionList.container.firstElementChild;
 
+    // @ts-expect-error TS18047
     expect(root.classList.contains('sg-actions-list--to-right')).toEqual(true);
   });
 
@@ -32,6 +34,7 @@ describe('ActionList', () => {
     const actionList = render(<ActionList toTop />);
     const root = actionList.container.firstElementChild;
 
+    // @ts-expect-error TS18047
     expect(root.classList.contains('sg-actions-list--to-top')).toEqual(true);
   });
 
@@ -39,6 +42,7 @@ describe('ActionList', () => {
     const actionList = render(<ActionList align={ALIGNMENT.BASELINE} />);
     const root = actionList.container.firstElementChild;
 
+    // @ts-expect-error TS18047
     expect(root.classList.contains('sg-actions-list--align-baseline')).toEqual(
       true
     );
@@ -48,6 +52,7 @@ describe('ActionList', () => {
     const actionList = render(<ActionList direction={DIRECTION.CENTERED} />);
     const root = actionList.container.firstElementChild;
 
+    // @ts-expect-error TS18047
     expect(root.classList.contains('sg-actions-list--centered')).toEqual(true);
   });
 
@@ -57,6 +62,7 @@ describe('ActionList', () => {
     );
     const root = actionList.container.firstElementChild;
 
+    // @ts-expect-error TS18047
     expect(root.classList.contains('sg-actions-list--space-between')).toEqual(
       true
     );
@@ -68,6 +74,7 @@ describe('ActionList', () => {
     );
     const root = actionList.container.firstElementChild;
 
+    // @ts-expect-error TS18047
     expect(root.classList.contains('sg-actions-list--space-around')).toEqual(
       true
     );
@@ -79,6 +86,7 @@ describe('ActionList', () => {
     );
     const root = actionList.container.firstElementChild;
 
+    // @ts-expect-error TS18047
     expect(root.classList.contains('sg-actions-list--space-evenly')).toEqual(
       true
     );
@@ -88,6 +96,7 @@ describe('ActionList', () => {
     const actionList = render(<ActionList noWrap />);
     const root = actionList.container.firstElementChild;
 
+    // @ts-expect-error 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 753b9dea6d..fcb95c1566 100644
--- a/src/components/action-list/ActionListHole.spec.tsx
+++ b/src/components/action-list/ActionListHole.spec.tsx
@@ -14,6 +14,7 @@ describe('<ActionListHole />', () => {
     );
 
     expect(
+      // @ts-expect-error TS18047
       actionListHole.container.firstElementChild.classList.contains(
         'sg-actions-list__hole'
       )
@@ -26,6 +27,7 @@ describe('<ActionListHole />', () => {
     );
 
     expect(
+      // @ts-expect-error TS18047
       actionListHole.container.firstElementChild.classList.contains(
         'sg-actions-list__hole--container'
       )
@@ -37,6 +39,7 @@ describe('<ActionListHole />', () => {
     );
 
     expect(
+      // @ts-expect-error TS18047
       actionListHole.container.firstElementChild.classList.contains(
         'sg-actions-list__hole--no-spacing'
       )
@@ -48,6 +51,7 @@ describe('<ActionListHole />', () => {
     );
 
     expect(
+      // @ts-expect-error TS18047
       actionListHole.container.firstElementChild.classList.contains(
         'sg-actions-list__hole--space-bellow'
       )
@@ -59,6 +63,7 @@ describe('<ActionListHole />', () => {
     );
 
     expect(
+      // @ts-expect-error TS18047
       actionListHole.container.firstElementChild.classList.contains(
         'sg-actions-list__hole--no-shrink'
       )
@@ -68,6 +73,7 @@ describe('<ActionListHole />', () => {
     const actionListHole = render(<ActionListHole grow>test</ActionListHole>);
 
     expect(
+      // @ts-expect-error TS18047
       actionListHole.container.firstElementChild.classList.contains(
         'sg-actions-list__hole--grow'
       )
@@ -77,6 +83,7 @@ describe('<ActionListHole />', () => {
     const actionListHole = render(<ActionListHole toEnd>test</ActionListHole>);
 
     expect(
+      // @ts-expect-error TS18047
       actionListHole.container.firstElementChild.classList.contains(
         'sg-actions-list__hole--to-end'
       )
@@ -88,6 +95,7 @@ describe('<ActionListHole />', () => {
     );
 
     expect(
+      // @ts-expect-error TS18047
       actionListHole.container.firstElementChild.classList.contains(
         'sg-actions-list__hole--to-right'
       )
@@ -99,6 +107,7 @@ describe('<ActionListHole />', () => {
     );
 
     expect(
+      // @ts-expect-error TS18047
       actionListHole.container.firstElementChild.classList.contains(
         'sg-actions-list__hole--to-right'
       )
@@ -112,6 +121,7 @@ describe('<ActionListHole />', () => {
     );
 
     expect(
+      // @ts-expect-error TS18047
       actionListHole.container.firstElementChild.classList.contains(
         'sg-actions-list__hole--spaced-small'
       )
@@ -125,6 +135,7 @@ describe('<ActionListHole />', () => {
     );
 
     expect(
+      // @ts-expect-error TS18047
       actionListHole.container.firstElementChild.classList.contains(
         'sg-actions-list__hole--spaced-xsmall'
       )
@@ -136,6 +147,7 @@ describe('<ActionListHole />', () => {
     );
 
     expect(
+      // @ts-expect-error 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 202d986fe6..99d9f80d96 100644
--- a/src/components/box/Box.chromatic.stories.tsx
+++ b/src/components/box/Box.chromatic.stories.tsx
@@ -6,6 +6,7 @@ import {
   responsivePropsStoryLabel,
 } from '../../chromatic/utils';
 
+// @ts-expect-error TS7006
 export const ResponsiveProps = args => {
   return (
     <div>
diff --git a/src/components/buttons/Button.tsx b/src/components/buttons/Button.tsx
index 3cf286606f..b3a220bfea 100644
--- a/src/components/buttons/Button.tsx
+++ b/src/components/buttons/Button.tsx
@@ -369,6 +369,7 @@ const Button = React.forwardRef(
       ico = <span className={iconClass}>{icon}</span>;
     }
 
+    // @ts-expect-error TS7006
     const onButtonClick = e => {
       if (isLink && isDisabled) {
         return;
diff --git a/src/components/buttons/ButtonLite.tsx b/src/components/buttons/ButtonLite.tsx
index 4520aa70ad..4b89a1dd01 100644
--- a/src/components/buttons/ButtonLite.tsx
+++ b/src/components/buttons/ButtonLite.tsx
@@ -217,6 +217,7 @@ const ButtonLite = ({
     );
   }
 
+  // @ts-expect-error 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 1257ae9fee..c14d34dbdd 100644
--- a/src/components/card-interactive/CardCheckbox.tsx
+++ b/src/components/card-interactive/CardCheckbox.tsx
@@ -168,6 +168,7 @@ export const CardCheckboxRoot = React.forwardRef<
     };
 
     const onInputChange = React.useCallback(
+      // @ts-expect-error TS7006
       e => {
         if (!isControlled) {
           setIsChecked(val => !val);
@@ -188,7 +189,9 @@ export const CardCheckboxRoot = React.forwardRef<
       <CardCheckboxContext.Provider
         value={{
           checked: isChecked,
+          // @ts-expect-error TS2322
           indeterminate,
+          // @ts-expect-error TS2322
           disabled,
         }}
       >
diff --git a/src/components/card-interactive/CardRadio.tsx b/src/components/card-interactive/CardRadio.tsx
index 1d9235f9f3..b9bf0df330 100644
--- a/src/components/card-interactive/CardRadio.tsx
+++ b/src/components/card-interactive/CardRadio.tsx
@@ -153,6 +153,7 @@ const CardRadio = React.forwardRef<HTMLInputElement, CardRadioPropsType>(
       <CardRadioContext.Provider
         value={{
           checked: isChecked,
+          // @ts-expect-error TS2322
           disabled,
         }}
       >
diff --git a/src/components/chip/Chip.tsx b/src/components/chip/Chip.tsx
index 0ffaea919b..37bcabf1b0 100644
--- a/src/components/chip/Chip.tsx
+++ b/src/components/chip/Chip.tsx
@@ -151,9 +151,11 @@ const Chip = ({
 
   const isControlled = checked !== undefined || isWithinChipGroup;
   const isChecked = isControlled
-    ? checked ?? isCheckedWithinGroup(chipGroupContext.groupValue, value)
+    ? // @ts-expect-error TS2345
+      checked ?? isCheckedWithinGroup(chipGroupContext.groupValue, value)
     : undefined;
 
+  // @ts-expect-error 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 68ff811238..05ee0ce071 100644
--- a/src/components/chip/ChipGroup.spec.tsx
+++ b/src/components/chip/ChipGroup.spec.tsx
@@ -8,6 +8,7 @@ import {testA11y} from '../../axe';
 const chips = ['option-a', 'option-b'];
 
 describe('<ChipGroup />', () => {
+  // @ts-expect-error TS7006
   const renderChipGroup = props =>
     render(
       <ChipGroup {...props} name="chipgroup">
diff --git a/src/components/chip/ChipGroup.tsx b/src/components/chip/ChipGroup.tsx
index be63f852b5..8673754fd0 100644
--- a/src/components/chip/ChipGroup.tsx
+++ b/src/components/chip/ChipGroup.tsx
@@ -92,6 +92,7 @@ const getGroupValue = (
 ) => {
   if (multiSelect) {
     if (Array.isArray(currentValue)) {
+      // @ts-expect-error TS2345
       return currentValue.includes(toggledValue)
         ? currentValue.filter(v => v !== toggledValue)
         : [...currentValue, toggledValue];
@@ -122,10 +123,13 @@ const ChipGroup = ({
   const [selectedValue, setSelectedValue] = React.useState(value || null);
 
   React.useEffect(() => {
+    // @ts-expect-error TS2345
     setSelectedValue(value);
   }, [value]);
 
+  // @ts-expect-error TS7006
   const setValue = (event, chipValue) => {
+    // @ts-expect-error 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 131aa269bd..f9c51a2a5d 100644
--- a/src/components/colors/hex.spec.ts
+++ b/src/components/colors/hex.spec.ts
@@ -1,3 +1,4 @@
+// @ts-expect-error TS7016
 import colors from './colors';
 import hex from './hex';
 
diff --git a/src/components/colors/hex.ts b/src/components/colors/hex.ts
index fa039926c5..e83a9d7de4 100644
--- a/src/components/colors/hex.ts
+++ b/src/components/colors/hex.ts
@@ -1,8 +1,10 @@
+// @ts-expect-error TS7016
 import colors from './colors';
 
 const hex: Record<string, string> = {};
 
 Object.keys(colors).forEach(groupName => {
+  // @ts-expect-error 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 31034f50d1..830d9a827b 100644
--- a/src/components/content-box/ContentBox.spec.tsx
+++ b/src/components/content-box/ContentBox.spec.tsx
@@ -7,6 +7,7 @@ describe('<ContentBox />', () => {
     const contentBox = render(<ContentBox>test</ContentBox>);
 
     expect(
+      // @ts-expect-error TS18047
       contentBox.container.firstElementChild.classList.contains(
         'sg-content-box'
       )
@@ -16,6 +17,7 @@ describe('<ContentBox />', () => {
     const contentBox = render(<ContentBox full>test</ContentBox>);
 
     expect(
+      // @ts-expect-error TS18047
       contentBox.container.firstElementChild.classList.contains(
         'sg-content-box--full'
       )
@@ -26,11 +28,13 @@ describe('<ContentBox />', () => {
     const contentBox2 = render(<ContentBox spacedSmall>test</ContentBox>);
 
     expect(
+      // @ts-expect-error TS18047
       contentBox.container.firstElementChild.classList.contains(
         'sg-content-box--spaced'
       )
     ).toEqual(true);
     expect(
+      // @ts-expect-error TS18047
       contentBox2.container.firstElementChild.classList.contains(
         'sg-content-box--spaced-small'
       )
@@ -44,11 +48,13 @@ describe('<ContentBox />', () => {
     );
 
     expect(
+      // @ts-expect-error TS18047
       testBox.container.firstElementChild.classList.contains(
         'sg-content-box--spaced-bottom'
       )
     ).toEqual(true);
     expect(
+      // @ts-expect-error TS18047
       testBox.container.firstElementChild.classList.contains(
         'sg-content-box--spaced-bottom-normal'
       )
@@ -62,6 +68,7 @@ describe('<ContentBox />', () => {
     );
 
     expect(
+      // @ts-expect-error TS18047
       testBox.container.firstElementChild.classList.contains(
         'sg-content-box--spaced-bottom-xsmall'
       )
@@ -73,11 +80,13 @@ describe('<ContentBox />', () => {
     );
 
     expect(
+      // @ts-expect-error TS18047
       testBox.container.firstElementChild.classList.contains(
         'sg-content-box--spaced-top'
       )
     ).toEqual(true);
     expect(
+      // @ts-expect-error TS18047
       testBox.container.firstElementChild.classList.contains(
         'sg-content-box--spaced-top-normal'
       )
@@ -89,6 +98,7 @@ describe('<ContentBox />', () => {
     );
 
     expect(
+      // @ts-expect-error 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 c564eff086..e0b8149059 100644
--- a/src/components/content-box/ContentBoxActions.spec.tsx
+++ b/src/components/content-box/ContentBoxActions.spec.tsx
@@ -8,6 +8,7 @@ describe('<ContentBoxActions />', () => {
     const testBox = render(<ContentBoxActions>test</ContentBoxActions>);
 
     expect(
+      // @ts-expect-error TS18047
       testBox.container.firstElementChild.classList.contains(
         'sg-content-box__actions'
       )
@@ -20,6 +21,7 @@ describe('<ContentBoxActions />', () => {
     );
 
     expect(
+      // @ts-expect-error TS18047
       testBox.container.firstElementChild.classList.contains(
         'sg-content-box__actions--with-centered-elements'
       )
@@ -32,6 +34,7 @@ describe('<ContentBoxActions />', () => {
     );
 
     expect(
+      // @ts-expect-error TS18047
       testBox.container.firstElementChild.classList.contains(
         'sg-content-box__actions--with-elements-to-right'
       )
@@ -44,6 +47,7 @@ describe('<ContentBoxActions />', () => {
     );
 
     expect(
+      // @ts-expect-error TS18047
       testBox.container.firstElementChild.classList.contains(
         'sg-content-box__actions--spaced-top-xsmall'
       )
@@ -56,6 +60,7 @@ describe('<ContentBoxActions />', () => {
     );
 
     expect(
+      // @ts-expect-error 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 3d88b62d47..3f71cf8b6e 100644
--- a/src/components/content-box/ContentBoxContent.spec.tsx
+++ b/src/components/content-box/ContentBoxContent.spec.tsx
@@ -8,6 +8,7 @@ describe('<ContentBoxContent />', () => {
     const testBox = render(<ContentBoxContent>test</ContentBoxContent>);
 
     expect(
+      // @ts-expect-error TS18047
       testBox.container.firstElementChild.classList.contains(
         'sg-content-box__content'
       )
@@ -17,6 +18,7 @@ describe('<ContentBoxContent />', () => {
     const testBox = render(<ContentBoxContent full>test</ContentBoxContent>);
 
     expect(
+      // @ts-expect-error TS18047
       testBox.container.firstElementChild.classList.contains(
         'sg-content-box__content--full'
       )
@@ -28,6 +30,7 @@ describe('<ContentBoxContent />', () => {
     );
 
     expect(
+      // @ts-expect-error TS18047
       testBox.container.firstElementChild.classList.contains(
         'sg-content-box__content--with-elements-to-right'
       )
@@ -39,6 +42,7 @@ describe('<ContentBoxContent />', () => {
     );
 
     expect(
+      // @ts-expect-error TS18047
       testBox.container.firstElementChild.classList.contains(
         'sg-content-box__content--with-centered-text'
       )
@@ -50,11 +54,13 @@ describe('<ContentBoxContent />', () => {
     );
 
     expect(
+      // @ts-expect-error TS18047
       testBox.container.firstElementChild.classList.contains(
         'sg-content-box__content--spaced-top'
       )
     ).toBeTruthy();
     expect(
+      // @ts-expect-error TS18047
       testBox.container.firstElementChild.classList.contains(
         'sg-content-box__content--spaced-top-normal'
       )
@@ -66,6 +72,7 @@ describe('<ContentBoxContent />', () => {
     );
 
     expect(
+      // @ts-expect-error TS18047
       testBox.container.firstElementChild.classList.contains(
         'sg-content-box__content--spaced-top-xsmall'
       )
@@ -77,11 +84,13 @@ describe('<ContentBoxContent />', () => {
     );
 
     expect(
+      // @ts-expect-error TS18047
       testBox.container.firstElementChild.classList.contains(
         'sg-content-box__content--spaced-bottom'
       )
     ).toBeTruthy();
     expect(
+      // @ts-expect-error TS18047
       testBox.container.firstElementChild.classList.contains(
         'sg-content-box__content--spaced-bottom-normal'
       )
@@ -93,6 +102,7 @@ describe('<ContentBoxContent />', () => {
     );
 
     expect(
+      // @ts-expect-error 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 fff2edfc4c..485f19d4e0 100644
--- a/src/components/content-box/ContentBoxHeader.spec.tsx
+++ b/src/components/content-box/ContentBoxHeader.spec.tsx
@@ -8,6 +8,7 @@ describe('<ContentBoxHeader />', () => {
     const testBox = render(<ContentBoxHeader>test</ContentBoxHeader>);
 
     expect(
+      // @ts-expect-error TS18047
       testBox.container.firstElementChild.classList.contains(
         'sg-content-box__header'
       )
@@ -19,6 +20,7 @@ describe('<ContentBoxHeader />', () => {
     );
 
     expect(
+      // @ts-expect-error TS18047
       testBox.container.firstElementChild.classList.contains(
         'sg-content-box__header--with-centered-elements'
       )
@@ -31,11 +33,13 @@ describe('<ContentBoxHeader />', () => {
     );
 
     expect(
+      // @ts-expect-error TS18047
       testBox.container.firstElementChild.classList.contains(
         'sg-content-box__header--spaced'
       )
     ).toEqual(true);
     expect(
+      // @ts-expect-error TS18047
       testBox2.container.firstElementChild.classList.contains(
         'sg-content-box__header--spaced-small'
       )
@@ -47,11 +51,13 @@ describe('<ContentBoxHeader />', () => {
     );
 
     expect(
+      // @ts-expect-error TS18047
       testBox.container.firstElementChild.classList.contains(
         'sg-content-box__header--spaced-top'
       )
     ).toBeTruthy();
     expect(
+      // @ts-expect-error TS18047
       testBox.container.firstElementChild.classList.contains(
         'sg-content-box__header--spaced-top-normal'
       )
@@ -63,6 +69,7 @@ describe('<ContentBoxHeader />', () => {
     );
 
     expect(
+      // @ts-expect-error TS18047
       testBox.container.firstElementChild.classList.contains(
         'sg-content-box__header--spaced-top-xsmall'
       )
@@ -74,11 +81,13 @@ describe('<ContentBoxHeader />', () => {
     );
 
     expect(
+      // @ts-expect-error TS18047
       testBox.container.firstElementChild.classList.contains(
         'sg-content-box__header--spaced-bottom'
       )
     ).toBeTruthy();
     expect(
+      // @ts-expect-error TS18047
       testBox.container.firstElementChild.classList.contains(
         'sg-content-box__header--spaced-bottom-normal'
       )
@@ -90,6 +99,7 @@ describe('<ContentBoxHeader />', () => {
     );
 
     expect(
+      // @ts-expect-error 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 14e4b61b9f..6440ed4e87 100644
--- a/src/components/content-box/ContentBoxTitle.spec.tsx
+++ b/src/components/content-box/ContentBoxTitle.spec.tsx
@@ -8,6 +8,7 @@ describe('<ContentBoxTitle />', () => {
     const testBox = render(<ContentBoxTitle>test</ContentBoxTitle>);
 
     expect(
+      // @ts-expect-error TS18047
       testBox.container.firstElementChild.classList.contains(
         'sg-content-box__title'
       )
@@ -19,6 +20,7 @@ describe('<ContentBoxTitle />', () => {
     );
 
     expect(
+      // @ts-expect-error TS18047
       testBox.container.firstElementChild.classList.contains(
         'sg-content-box__title--with-centered-elements'
       )
@@ -31,11 +33,13 @@ describe('<ContentBoxTitle />', () => {
     );
 
     expect(
+      // @ts-expect-error TS18047
       testBox.container.firstElementChild.classList.contains(
         'sg-content-box__title--spaced'
       )
     ).toEqual(true);
     expect(
+      // @ts-expect-error TS18047
       testBox2.container.firstElementChild.classList.contains(
         'sg-content-box__title--spaced-small'
       )
@@ -47,11 +51,13 @@ describe('<ContentBoxTitle />', () => {
     );
 
     expect(
+      // @ts-expect-error TS18047
       testBox.container.firstElementChild.classList.contains(
         'sg-content-box__title--spaced-top'
       )
     ).toBeTruthy();
     expect(
+      // @ts-expect-error TS18047
       testBox.container.firstElementChild.classList.contains(
         'sg-content-box__title--spaced-top-normal'
       )
@@ -63,6 +69,7 @@ describe('<ContentBoxTitle />', () => {
     );
 
     expect(
+      // @ts-expect-error TS18047
       testBox.container.firstElementChild.classList.contains(
         'sg-content-box__title--spaced-top-xsmall'
       )
@@ -74,11 +81,13 @@ describe('<ContentBoxTitle />', () => {
     );
 
     expect(
+      // @ts-expect-error TS18047
       testBox.container.firstElementChild.classList.contains(
         'sg-content-box__title--spaced-bottom'
       )
     ).toBeTruthy();
     expect(
+      // @ts-expect-error TS18047
       testBox.container.firstElementChild.classList.contains(
         'sg-content-box__title--spaced-bottom-normal'
       )
@@ -90,6 +99,7 @@ describe('<ContentBoxTitle />', () => {
     );
 
     expect(
+      // @ts-expect-error 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 0d2c5700e8..69b8e1153f 100644
--- a/src/components/counters/Counter.tsx
+++ b/src/components/counters/Counter.tsx
@@ -147,8 +147,10 @@ const Counter = ({
 }: CounterPropsType) => {
   const backgroundColor =
     variant === 'solid'
-      ? SOLID_COLOR_BACKGROUND_MAP[color]
-      : LIGHT_COLOR_BACKGROUND_MAP[color];
+      ? // @ts-expect-error TS2538
+        SOLID_COLOR_BACKGROUND_MAP[color]
+      : // @ts-expect-error TS2538
+        LIGHT_COLOR_BACKGROUND_MAP[color];
   const counterClass = cx(
     'sg-counter',
     {
@@ -161,6 +163,7 @@ const Counter = ({
   );
 
   const textColor =
+    // @ts-expect-error 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 84bbf7ac2b..d017ed5697 100644
--- a/src/components/dialog/Dialog.spec.tsx
+++ b/src/components/dialog/Dialog.spec.tsx
@@ -30,6 +30,7 @@ describe('<Dialog>', () => {
       </Dialog>
     );
 
+    // @ts-expect-error TS2345
     fireEvent.keyUp(wrapper.container.firstChild, {
       key: 'Escape',
     });
@@ -44,6 +45,7 @@ describe('<Dialog>', () => {
       </Dialog>
     );
 
+    // @ts-expect-error TS2345
     fireEvent.click(wrapper.container.firstChild);
     expect(onDismiss).toHaveBeenCalledTimes(1);
   });
diff --git a/src/components/dialog/useBodyNoScroll.ts b/src/components/dialog/useBodyNoScroll.ts
index 8ce076d98e..11dfa22d6f 100644
--- a/src/components/dialog/useBodyNoScroll.ts
+++ b/src/components/dialog/useBodyNoScroll.ts
@@ -6,6 +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
     if (cleanupRef.current) cleanupRef.current();
   }, []);
 
@@ -35,6 +36,7 @@ export function useBodyNoScroll(overlayRef: {current: HTMLDivElement | null}) {
       const dialogsOpenCount =
         document.querySelectorAll(DIALOG_SELECTOR).length;
       const nestedOpenDialogsCount =
+        // @ts-expect-error TS2532
         overlayRef.current?.querySelectorAll(DIALOG_SELECTOR).length | 0;
 
       // nested dialogs shouldn't be counted
@@ -53,6 +55,7 @@ export function useBodyNoScroll(overlayRef: {current: HTMLDivElement | null}) {
       window.scrollTo(0, scrollY);
     };
 
+    // @ts-expect-error TS2322
     cleanupRef.current = cleanup;
     return cleanup;
   }, [overlayRef]);
diff --git a/src/components/dialog/useFocusTrap.ts b/src/components/dialog/useFocusTrap.ts
index 92c301de83..162a5f10ae 100644
--- a/src/components/dialog/useFocusTrap.ts
+++ b/src/components/dialog/useFocusTrap.ts
@@ -35,11 +35,13 @@ export function useFocusTrap({
     function handleFocusTrap(event: FocusEvent) {
       if (
         event.target instanceof Node &&
+        // @ts-expect-error TS18047
         dialogElement.contains(event.target)
       ) {
         return;
       }
 
+      // @ts-expect-error TS2345
       focusDescendant(dialogElement, isTabbingForward);
     }
 
diff --git a/src/components/dropdowns/Dropdown.spec.tsx b/src/components/dropdowns/Dropdown.spec.tsx
index c62751c2e6..9d2d554635 100644
--- a/src/components/dropdowns/Dropdown.spec.tsx
+++ b/src/components/dropdowns/Dropdown.spec.tsx
@@ -31,6 +31,7 @@ describe('<Dropdown />', () => {
   it('should render links with proper data', () => {
     const component = render(<Dropdown {...testProps} />);
 
+    // @ts-expect-error TS2345
     fireEvent.click(component.container.firstElementChild);
 
     expect(component.getAllByRole('link')[0].getAttribute('href')).toEqual(
@@ -47,6 +48,7 @@ describe('<Dropdown />', () => {
   it('should open dropdown on click', () => {
     const component = render(<Dropdown {...testProps} />);
 
+    // @ts-expect-error TS2345
     fireEvent.click(component.container.firstElementChild);
     expect(component.getAllByRole('link')).toHaveLength(3);
   });
@@ -54,6 +56,7 @@ describe('<Dropdown />', () => {
   it('should close dropdown when click outside', () => {
     const component = render(<Dropdown {...testProps} />);
 
+    // @ts-expect-error TS2345
     fireEvent.click(component.container.firstElementChild);
     expect(component.getAllByRole('link')).toHaveLength(3);
 
@@ -67,6 +70,7 @@ describe('<Dropdown />', () => {
       <Dropdown {...testProps} onItemSelect={onItemSelect} />
     );
 
+    // @ts-expect-error 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 5fe8f44f56..7ac3439264 100644
--- a/src/components/flex/Flex.chromatic.stories.tsx
+++ b/src/components/flex/Flex.chromatic.stories.tsx
@@ -20,6 +20,7 @@ const indigoBoxStyle = {
   color: COLOR['indigo-20'],
 };
 
+// @ts-expect-error TS7006
 export const ResponsiveProps = args => {
   return (
     <div>
diff --git a/src/components/form-elements/Input.tsx b/src/components/form-elements/Input.tsx
index 7662aeac74..582fb46ffb 100644
--- a/src/components/form-elements/Input.tsx
+++ b/src/components/form-elements/Input.tsx
@@ -199,7 +199,9 @@ const Input = (props: InputPropsType) => {
     <div className={wrapperClass}>
       <input
         {...additionalProps}
+        // @ts-expect-error TS2322
         type={type}
+        // @ts-expect-error 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 8e7d6dba61..f90dcd0512 100644
--- a/src/components/form-elements/Textarea.spec.tsx
+++ b/src/components/form-elements/Textarea.spec.tsx
@@ -15,6 +15,7 @@ it('error when both valid and invalid', () => {
 });
 
 it('Type', () => {
+  // @ts-expect-error 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 bdc21324e6..7f72fba719 100644
--- a/src/components/form-elements/checkbox/Checkbox.chromatic.stories.tsx
+++ b/src/components/form-elements/checkbox/Checkbox.chromatic.stories.tsx
@@ -3,6 +3,7 @@ import * as CheckboxStories from './Checkbox.stories.mdx';
 import {generateChromaticStory} from '../../../chromatic/utils';
 import Checkbox from './Checkbox';
 
+// @ts-expect-error 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 24209f2bc3..ed12bbed28 100644
--- a/src/components/form-elements/checkbox/Checkbox.spec.tsx
+++ b/src/components/form-elements/checkbox/Checkbox.spec.tsx
@@ -5,6 +5,7 @@ import userEvent from '@testing-library/user-event';
 import {testA11y} from '../../../axe';
 
 describe('<Checkbox />', () => {
+  // @ts-expect-error 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 e328030e63..46d3bbcebf 100644
--- a/src/components/form-elements/checkbox/Checkbox.tsx
+++ b/src/components/form-elements/checkbox/Checkbox.tsx
@@ -206,6 +206,7 @@ const Checkbox = ({
     }
   }, [checked, isControlled, isChecked]);
   const onInputChange = React.useCallback(
+    // @ts-expect-error TS7006
     e => {
       if (!isControlled) {
         setIsChecked(val => !val);
@@ -300,6 +301,7 @@ const Checkbox = ({
           <div className="sg-checkbox__icon-wrapper">
             <span
               className={iconClass} // This element is purely decorative so
+              // @ts-expect-error 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 e826a23f1e..33aca19ad6 100644
--- a/src/components/form-elements/radio/Radio.chromatic.stories.tsx
+++ b/src/components/form-elements/radio/Radio.chromatic.stories.tsx
@@ -3,6 +3,7 @@ import * as RadioStories from './Radio.stories.mdx';
 import {generateChromaticStory} from '../../../chromatic/utils';
 import Radio from './Radio';
 
+// @ts-expect-error 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 08a528185d..b612f85cf2 100644
--- a/src/components/form-elements/radio/Radio.spec.tsx
+++ b/src/components/form-elements/radio/Radio.spec.tsx
@@ -5,6 +5,7 @@ import userEvent from '@testing-library/user-event';
 import {testA11y} from '../../../axe';
 
 describe('<Radio />', () => {
+  // @ts-expect-error 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 e6f32506f2..8827788c2a 100644
--- a/src/components/form-elements/radio/Radio.tsx
+++ b/src/components/form-elements/radio/Radio.tsx
@@ -215,6 +215,7 @@ const Radio = ({
   const labelId = ariaLabelledBy || `${radioId}-label`;
   const isInvalid = invalid !== undefined ? invalid : radioGroupContext.invalid;
 
+  // @ts-expect-error TS7006
   const onInputChange = e => {
     if (isWithinRadioGroup) {
       radioGroupContext.setLastFocusedValue(value);
@@ -244,12 +245,14 @@ const Radio = ({
             name={name || radioGroupContext.name}
             onChange={onInputChange}
             required={required}
+            // @ts-expect-error TS2322
             value={value}
             aria-labelledby={labelId}
             aria-describedby={descriptionId}
             aria-invalid={isInvalid ? true : undefined}
           />
           <span
+            // @ts-expect-error TS2322
             ref={circleRef}
             className={circleClass} // This element is purely decorative so
             // we hide it for screen readers
@@ -271,6 +274,7 @@ const Radio = ({
       </div>
       {description && (
         <Text
+          // @ts-expect-error 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 16ab2fa586..a10077a732 100644
--- a/src/components/form-elements/radio/RadioGroup.spec.tsx
+++ b/src/components/form-elements/radio/RadioGroup.spec.tsx
@@ -5,6 +5,7 @@ import {render, waitFor} from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 
 describe('<RadioGroup />', () => {
+  // @ts-expect-error 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 0d1880399d..9dd3ad644f 100644
--- a/src/components/form-elements/radio/RadioGroup.tsx
+++ b/src/components/form-elements/radio/RadioGroup.tsx
@@ -136,6 +136,7 @@ const RadioGroup = ({
     if (selectedValue !== initialValue && isPristine) setIsPristine(false);
   }, [selectedValue, initialValue, isPristine]);
 
+  // @ts-expect-error 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 2765d2e397..a69b5874ba 100644
--- a/src/components/header/Header.spec.tsx
+++ b/src/components/header/Header.spec.tsx
@@ -8,6 +8,7 @@ describe('Header', () => {
     const header = render(<Header>some text</Header>);
 
     expect(
+      // @ts-expect-error TS18047
       header.container.firstElementChild.classList.contains('sg-header')
     ).toEqual(true);
   });
@@ -15,6 +16,7 @@ describe('Header', () => {
     const header = render(<Header fixed>some text</Header>);
 
     expect(
+      // @ts-expect-error TS18047
       header.container.firstElementChild.classList.contains('sg-header--fixed')
     ).toEqual(true);
   });
@@ -22,6 +24,7 @@ describe('Header', () => {
     const header = render(<Header withDivider>some text</Header>);
 
     expect(
+      // @ts-expect-error 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 5bde2c832e..5260acaee1 100644
--- a/src/components/header/HeaderContainer.spec.tsx
+++ b/src/components/header/HeaderContainer.spec.tsx
@@ -6,6 +6,7 @@ it('render', () => {
   const headerContainer = render(<HeaderContainer>some text</HeaderContainer>);
 
   expect(
+    // @ts-expect-error 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 bc1e4bd761..46f9d081a5 100644
--- a/src/components/header/HeaderContent.spec.tsx
+++ b/src/components/header/HeaderContent.spec.tsx
@@ -6,6 +6,7 @@ it('render', () => {
   const headerContent = render(<HeaderContent>some text</HeaderContent>);
 
   expect(
+    // @ts-expect-error TS18047
     headerContent.container.firstElementChild.classList.contains(
       'sg-header__content'
     )
@@ -17,6 +18,7 @@ it('auto-height', () => {
   );
 
   expect(
+    // @ts-expect-error 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 73d498b1a0..cbff531cc0 100644
--- a/src/components/header/HeaderLeft.spec.tsx
+++ b/src/components/header/HeaderLeft.spec.tsx
@@ -6,6 +6,7 @@ it('render', () => {
   const header = render(<HeaderLeft>some text</HeaderLeft>);
 
   expect(
+    // @ts-expect-error 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 2d95766549..7a1c4b1f8c 100644
--- a/src/components/header/HeaderMiddle.spec.tsx
+++ b/src/components/header/HeaderMiddle.spec.tsx
@@ -6,6 +6,7 @@ it('render', () => {
   const header = render(<HeaderMiddle>some text</HeaderMiddle>);
 
   expect(
+    // @ts-expect-error 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 e27ceafd85..bab3fa85a9 100644
--- a/src/components/header/HeaderRight.spec.tsx
+++ b/src/components/header/HeaderRight.spec.tsx
@@ -6,6 +6,7 @@ it('render', () => {
   const header = render(<HeaderRight>some text</HeaderRight>);
 
   expect(
+    // @ts-expect-error 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 1a2691e367..50e85790aa 100644
--- a/src/components/icon-as-button/IconAsButton.spec.tsx
+++ b/src/components/icon-as-button/IconAsButton.spec.tsx
@@ -15,6 +15,7 @@ it('colors', () => {
   const iconAsButton = render(<IconAsButton type={type} color={color} />);
 
   expect(
+    // @ts-expect-error TS18047
     iconAsButton.container.firstElementChild.classList.contains(
       'sg-icon-as-button--icon-black'
     )
@@ -27,6 +28,7 @@ it('size', () => {
   const iconAsButton = render(<IconAsButton type={type} size={size} />);
 
   expect(
+    // @ts-expect-error TS18047
     iconAsButton.container.firstElementChild.classList.contains(
       'sg-icon-as-button--small'
     )
@@ -38,6 +40,7 @@ it('default size', () => {
   const iconAsButton = render(<IconAsButton type={type} />);
 
   expect(
+    // @ts-expect-error TS18047
     iconAsButton.container.firstElementChild.classList.contains(
       'sg-icon-as-button--normal'
     )
@@ -49,6 +52,7 @@ it('border', () => {
   const iconAsButton = render(<IconAsButton type={type} border />);
 
   expect(
+    // @ts-expect-error TS18047
     iconAsButton.container.firstElementChild.classList.contains(
       'sg-icon-as-button--with-border'
     )
@@ -60,6 +64,7 @@ it('transparent', () => {
   const iconAsButton = render(<IconAsButton type={type} transparent />);
 
   expect(
+    // @ts-expect-error TS18047
     iconAsButton.container.firstElementChild.classList.contains(
       'sg-icon-as-button--transparent'
     )
@@ -71,11 +76,13 @@ it('transparent active', () => {
   const iconAsButton = render(<IconAsButton type={type} transparent active />);
 
   expect(
+    // @ts-expect-error TS18047
     iconAsButton.container.firstElementChild.classList.contains(
       'sg-icon-as-button--transparent'
     )
   ).toEqual(true);
   expect(
+    // @ts-expect-error TS18047
     iconAsButton.container.firstElementChild.classList.contains(
       'sg-icon-as-button--transparent-active'
     )
@@ -87,6 +94,7 @@ it('action', () => {
   const iconAsButton = render(<IconAsButton type={type} action />);
 
   expect(
+    // @ts-expect-error TS18047
     iconAsButton.container.firstElementChild.classList.contains(
       'sg-icon-as-button--action'
     )
@@ -98,11 +106,13 @@ it('action active', () => {
   const iconAsButton = render(<IconAsButton type={type} action active />);
 
   expect(
+    // @ts-expect-error TS18047
     iconAsButton.container.firstElementChild.classList.contains(
       'sg-icon-as-button--action'
     )
   ).toEqual(true);
   expect(
+    // @ts-expect-error 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 83d38b7b06..63b7e5232d 100644
--- a/src/components/icons/Icon.spec.tsx
+++ b/src/components/icons/Icon.spec.tsx
@@ -29,6 +29,7 @@ describe('Icon', () => {
   it('tag type', () => {
     const component = render(<Icon type={TYPE.ANSWER} size={16} as="span" />);
 
+    // @ts-expect-error TS18047
     expect(component.container.firstElementChild.tagName).toEqual('SPAN');
   });
 
diff --git a/src/components/icons/Icon.tsx b/src/components/icons/Icon.tsx
index a81dd66e83..c275f5f6b4 100644
--- a/src/components/icons/Icon.tsx
+++ b/src/components/icons/Icon.tsx
@@ -576,6 +576,7 @@ const Icon = ({
   );
   const iconType = `#icon-${type}`;
   const Tag = as;
+  // @ts-expect-error 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 2dfc0e45bb..26b10a8397 100644
--- a/src/components/icons/get-icon-group.ts
+++ b/src/components/icons/get-icon-group.ts
@@ -224,5 +224,6 @@ const iconMap = {
 const groups = Object.keys(iconMap);
 
 export function getIconGroup(iconName: string): string {
+  // @ts-expect-error 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 ab5630a9b4..2bda3f0476 100644
--- a/src/components/layout/Layout.spec.tsx
+++ b/src/components/layout/Layout.spec.tsx
@@ -12,6 +12,7 @@ describe('Layout', () => {
     const layout = render(<Layout footer={footer}>Content</Layout>);
 
     expect(
+      // @ts-expect-error TS18047
       layout.container.firstElementChild.querySelector('.sg-layout__footer')
     ).toBeTruthy();
   });
@@ -20,6 +21,7 @@ describe('Layout', () => {
     const layout = render(<Layout noMaxWidth>Content</Layout>);
 
     expect(
+      // @ts-expect-error TS18047
       layout.container.firstElementChild.querySelector(
         '.sg-layout__container--no-max-width'
       )
@@ -46,6 +48,7 @@ describe('LayoutContent', () => {
     );
 
     expect(
+      // @ts-expect-error TS18047
       layoutContent.container.firstElementChild.classList.contains(
         'sg-layout__content--no-max-width'
       )
diff --git a/src/components/list/MenuList.spec.tsx b/src/components/list/MenuList.spec.tsx
index 6b89574d1e..7e71c9f2a6 100644
--- a/src/components/list/MenuList.spec.tsx
+++ b/src/components/list/MenuList.spec.tsx
@@ -19,6 +19,7 @@ describe('MenuList', () => {
     const menu = render(<MenuList items={menuItems} size={SIZE.SMALL} />);
 
     expect(
+      // @ts-expect-error TS18047
       menu.container.firstElementChild.classList.contains('sg-menu-list--small')
     ).toEqual(true);
   });
@@ -27,6 +28,7 @@ describe('MenuList', () => {
     const menu = render(<MenuList items={menuItems} size={SIZE.LARGE} />);
 
     expect(
+      // @ts-expect-error 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 60f3c0fdfc..45fefa5396 100644
--- a/src/components/logo/Logo.tsx
+++ b/src/components/logo/Logo.tsx
@@ -98,6 +98,7 @@ function getDefaultAlt(type: LogoTypeType) {
   ];
 
   return replacers.reduce(
+    // @ts-expect-error TS2769
     (alt, {regexp, newSubstr}) => alt.replace(regexp, newSubstr),
     type
   );
@@ -127,6 +128,8 @@ const Logo = ({
 
   return (
     <div {...props} className={logoClass} data-logotype={type}>
+      {/*
+       // @ts-expect-error 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 331528146b..47d7d503d0 100644
--- a/src/components/math-symbols/MathSymbol.spec.tsx
+++ b/src/components/math-symbols/MathSymbol.spec.tsx
@@ -19,6 +19,7 @@ describe('MathSymbol', () => {
     const icon = render(<MathSymbol type={MATH_SYMBOL_TYPE.SQUERE_ROOT} />);
 
     expect(icon.getByRole('img')).toBeTruthy();
+    // @ts-expect-error TS18047
     expect(icon.container.firstElementChild.querySelector('use')).toBeTruthy();
   });
 
@@ -26,6 +27,7 @@ describe('MathSymbol', () => {
     const type = MATH_SYMBOL_TYPE.SQUERE_ROOT;
     const icon = render(<MathSymbol type={type} data-foo="bar" />);
 
+    // @ts-expect-error TS18047
     expect(icon.container.firstElementChild.getAttribute('data-foo')).toEqual(
       'bar'
     );
diff --git a/src/components/media/Media.spec.tsx b/src/components/media/Media.spec.tsx
index 2940881ce9..4f51053723 100644
--- a/src/components/media/Media.spec.tsx
+++ b/src/components/media/Media.spec.tsx
@@ -33,16 +33,19 @@ describe('Media', () => {
         spacedBottom
       />
     );
+    // @ts-expect-error 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
       media.container.firstElementChild.querySelectorAll(
         '.sg-media__content--spaced-bottom'
       )
     ).toHaveLength(defaultProps.contentArray.length);
     expect(
+      // @ts-expect-error TS18047
       media.container.firstElementChild.querySelectorAll(
         '.sg-media__content--small'
       )
@@ -51,6 +54,7 @@ describe('Media', () => {
 
   it('testing modifications - all off', () => {
     const media = render(<Media {...defaultProps} />);
+    // @ts-expect-error 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 633510504e..8f68441ce8 100644
--- a/src/components/mobile-icons/MobileIcon.spec.tsx
+++ b/src/components/mobile-icons/MobileIcon.spec.tsx
@@ -5,7 +5,9 @@ import {render} from '@testing-library/react';
 it('render if type', () => {
   const icon = render(<MobileIcon type={TYPE.ANSWER_BUBBLE} />);
 
+  // @ts-expect-error TS18047
   expect(icon.container.firstElementChild.tagName).toEqual('svg');
+  // @ts-expect-error TS18047
   expect(icon.container.firstElementChild.querySelector('use')).toBeTruthy();
 });
 
diff --git a/src/components/popover/Popover.spec.tsx b/src/components/popover/Popover.spec.tsx
index ad30c2ba02..f4774e990f 100644
--- a/src/components/popover/Popover.spec.tsx
+++ b/src/components/popover/Popover.spec.tsx
@@ -163,6 +163,7 @@ describe('<Popover />', () => {
     fireEvent.focus(button);
     expect(await screen.findByText(POPOVER_TEXT)).toBeInTheDocument();
 
+    // @ts-expect-error TS2345
     fireEvent.keyDown(document.activeElement, {key: 'Escape'});
     await waitForElementToBeRemoved(() => screen.queryByText(POPOVER_TEXT));
   });
@@ -174,6 +175,7 @@ describe('<Popover />', () => {
     userEvent.hover(button);
     expect(await screen.findByText(POPOVER_TEXT)).toBeInTheDocument();
 
+    // @ts-expect-error TS2345
     fireEvent.keyDown(document.activeElement, {key: 'Escape'});
     await waitForElementToBeRemoved(() => screen.queryByText(POPOVER_TEXT));
   });
@@ -186,6 +188,7 @@ describe('<Popover />', () => {
     userEvent.hover(button);
     expect(await screen.findByText(POPOVER_TEXT)).toBeInTheDocument();
 
+    // @ts-expect-error 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 c387e346aa..908ef1bf7f 100644
--- a/src/components/popover/PopoverElement.tsx
+++ b/src/components/popover/PopoverElement.tsx
@@ -34,6 +34,7 @@ const ARROW_SVG_PATH =
 const PopoverElement = React.forwardRef<
   HTMLDivElement,
   PopoverElementPropsType
+  // @ts-expect-error
 >((props: PopoverElementPropsType, ref) => {
   const {
     className,
@@ -44,12 +45,16 @@ const PopoverElement = React.forwardRef<
     ...rest
   } = props;
   const context = usePopoverContext();
+  // @ts-expect-error TS18047
   const elementRef = useMergeRefs([context.refs.setFloating, ref]);
 
+  // @ts-expect-error TS18047
   if (context.hasArrow !== withArrow) context.setHasArrow(withArrow);
 
   const isShorterThanArrowWithPadding =
+    // @ts-expect-error TS18047
     ARROW_SIZE + 2 * context.arrowPadding >
+    // @ts-expect-error TS18047
     context.refs.floating.current?.offsetHeight;
 
   // If the placement is right or left
@@ -58,6 +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
     (context.placement.includes('right') || context.placement.includes('left'))
       ? `calc(50% - ${ARROW_SIZE / 2}px)`
       : null;
@@ -65,9 +71,11 @@ const PopoverElement = React.forwardRef<
   const popoverClass = classNames('sg-popover', className);
 
   return (
+    // @ts-expect-error TS18047
     context.isMounted && (
       <FloatingPortal>
         <FloatingFocusManager
+          // @ts-expect-error TS18047
           context={context.context}
           order={['reference', 'content']}
           visuallyHiddenDismiss
@@ -76,13 +84,20 @@ const PopoverElement = React.forwardRef<
           <div
             ref={elementRef}
             className={popoverClass}
+            // @ts-expect-error TS18047
             data-popover-id={context.id}
+            // @ts-expect-error TS18047
             data-placement={context.floatingPlacement}
+            // @ts-expect-error TS18047
             data-status={context.status}
             style={{
+              // @ts-expect-error TS18047
               position: context.strategy,
+              // @ts-expect-error TS18047
               top: context.y ?? 0,
+              // @ts-expect-error TS18047
               left: context.x ?? 0,
+              // @ts-expect-error TS18047
               visibility: context.middlewareData.hide?.referenceHidden
                 ? 'hidden'
                 : 'visible',
@@ -90,14 +105,17 @@ const PopoverElement = React.forwardRef<
               padding,
               maxWidth,
             }}
+            // @ts-expect-error TS18047
             {...context.getFloatingProps()}
             {...rest}
           >
             {children}
             {withArrow && (
               <FloatingArrow
+                // @ts-expect-error TS18047
                 ref={context.arrowRef}
                 className="sg-popover__arrow"
+                // @ts-expect-error 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 3ec0eb338b..4d16b804c8 100644
--- a/src/components/popover/PopoverTrigger.tsx
+++ b/src/components/popover/PopoverTrigger.tsx
@@ -3,6 +3,7 @@ import {useMergeRefs} from '@floating-ui/react';
 
 import usePopoverContext from './usePopoverContext';
 
+// @ts-expect-error TS7006
 function isReactForwardRefType(object) {
   const REACT_FORWARD_REF_TYPE = Symbol.for('react.forward_ref');
 
@@ -29,24 +30,28 @@ const PopoverTrigger = React.forwardRef<
   const context = usePopoverContext();
   const childrenRef = (children as any).ref;
   const triggerRef = useMergeRefs([
+    // @ts-expect-error TS18047
     context.refs.setReference,
     ref,
     childrenRef,
   ]);
 
   const className = 'sg-popover-trigger';
+  // @ts-expect-error 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
       ...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
         'data-state': context.isOpen ? 'open' : 'closed',
       }),
     });
@@ -58,7 +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
       data-state={context.isOpen ? 'open' : 'closed'}
+      // @ts-expect-error TS18047
       {...context.getReferenceProps(props)}
       aria-describedby={popoverId}
     >
diff --git a/src/components/popover/usePopover.ts b/src/components/popover/usePopover.ts
index 4c7c79dcb6..bf6a623cb0 100644
--- a/src/components/popover/usePopover.ts
+++ b/src/components/popover/usePopover.ts
@@ -108,6 +108,7 @@ const usePopover = ({
     variantParams.padding,
   ]);
 
+  // @ts-expect-error TS7006
   const handleOpenChange = isOpen => {
     if (isControlled && onOpenChange) onOpenChange(isOpen);
     else setIsOpen(isOpen);
@@ -159,6 +160,7 @@ const usePopover = ({
       arrowPadding: variantParams.arrowPadding,
       hasArrow,
       setHasArrow,
+      // @ts-expect-error TS2783
       placement,
       isMounted,
       status,
diff --git a/src/components/popup-menu/PopupMenu.spec.tsx b/src/components/popup-menu/PopupMenu.spec.tsx
index 6f3b062507..28320432ab 100644
--- a/src/components/popup-menu/PopupMenu.spec.tsx
+++ b/src/components/popup-menu/PopupMenu.spec.tsx
@@ -8,6 +8,7 @@ it('render', () => {
   const popupMenu = render(<PopupMenu items={items} />);
 
   expect(
+    // @ts-expect-error TS18047
     popupMenu.container.firstElementChild.classList.contains('sg-popup-menu')
   ).toEqual(true);
 });
@@ -24,6 +25,7 @@ it('extra spacing', () => {
   const popupMenu = render(<PopupMenu items={items} extraSpacing />);
 
   expect(
+    // @ts-expect-error 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 47f03173db..51b3c4fbeb 100644
--- a/src/components/progress-bar/ProgressBar.tsx
+++ b/src/components/progress-bar/ProgressBar.tsx
@@ -85,10 +85,12 @@ const ProgressBar = ({
 }: ProgressBarPropsType) => {
   const trackRef = React.useRef<HTMLDivElement>(null);
   const [transitionDuration, setTransitionDuration] = React.useState(() => {
+    // @ts-expect-error TS2345
     return getTransitionDuration(minValue, maxValue, trackRef);
   });
 
   React.useEffect(() => {
+    // @ts-expect-error 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 fca7f462b0..58112be068 100644
--- a/src/components/rating/Rating.spec.tsx
+++ b/src/components/rating/Rating.spec.tsx
@@ -10,6 +10,7 @@ describe('Rating', () => {
     const rating = render(<Rating active />);
 
     expect(
+      // @ts-expect-error TS18047
       rating.container.firstElementChild.classList.contains(
         'sg-rate-box--active'
       )
@@ -36,13 +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
     const stars = rating.container.firstElementChild.querySelector(
       '.sg-rate-box__stars-container'
     );
 
     expect(rating.getAllByText('foo')).toHaveLength(2);
+    // @ts-expect-error TS2345
     fireEvent.mouseEnter(stars);
     expect(rating.getAllByText('foo')).toHaveLength(2);
+    // @ts-expect-error 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 67e652636a..39aeae93f0 100644
--- a/src/components/select-menu/SelectMenu.chromatic.stories.tsx
+++ b/src/components/select-menu/SelectMenu.chromatic.stories.tsx
@@ -8,6 +8,7 @@ import Flex from '../flex/Flex';
 
 const onOptionChange = () => null;
 
+// @ts-expect-error TS7006
 export const Sizes = args => {
   return (
     <div style={{display: 'flex', flexDirection: 'row'}}>
@@ -25,6 +26,7 @@ export const Sizes = args => {
   );
 };
 
+// @ts-expect-error TS7006
 export const DifferentPopupLenghts = args => {
   return (
     <Flex direction="row" style={{gap: '40px'}}>
@@ -113,6 +115,7 @@ export const DifferentPopupLenghts = args => {
   );
 };
 
+// @ts-expect-error 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 6adda4bd37..a6047cb866 100644
--- a/src/components/select-menu/SelectMenu.spec.tsx
+++ b/src/components/select-menu/SelectMenu.spec.tsx
@@ -19,6 +19,7 @@ export function RenderSelectMenu(props: {
 }) {
   const {selected, ...restProps} = props;
   const [selectedOptions, setSelectedOptions] = React.useState(selected || []);
+  // @ts-expect-error 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 d8ee62bee1..bbaf4b25b8 100644
--- a/src/components/select-menu/SelectMenu.tsx
+++ b/src/components/select-menu/SelectMenu.tsx
@@ -154,6 +154,7 @@ export type SelectMenuPropsType = {
    *           options={[{value: 'option1', label: 'Option1'},{value: 'option2', label: 'Select selector'}]}
    *          />
    */
+  // @ts-expect-error TS7051
   onOptionChange: (SelectMenuOptionType) => unknown;
 
   /**
@@ -165,6 +166,7 @@ export type SelectMenuPropsType = {
    *           options={[{value: 'option1', label: 'Option1'},{value: 'option2', label: 'Select selector'}]}
    *          />
    */
+  // @ts-expect-error TS7051
   onToggle?: (boolean) => unknown;
 } & Omit<
   React.AllHTMLAttributes<HTMLElement>,
@@ -240,6 +242,7 @@ const SelectMenu = React.forwardRef<HTMLDivElement, SelectMenuPropsType>(
       disabled,
       multiSelect,
       onEntry: animateEntry,
+      // @ts-expect-error TS2322
       onExit: animateExit,
       onToggle,
       onOptionChange,
@@ -371,9 +374,11 @@ const SelectMenu = React.forwardRef<HTMLDivElement, SelectMenuPropsType>(
 
         return displayLabel;
       } else {
+        // @ts-expect-error TS7034
         const label = [];
 
         selectedOptions.map(option => label.push(option.label));
+        // @ts-expect-error TS7005
         const labelString = label.join(', ');
 
         return (
diff --git a/src/components/select-menu/SelectMenuOption.tsx b/src/components/select-menu/SelectMenuOption.tsx
index db22e2daa8..eefedc2a10 100644
--- a/src/components/select-menu/SelectMenuOption.tsx
+++ b/src/components/select-menu/SelectMenuOption.tsx
@@ -53,6 +53,7 @@ const SelectMenuOption = React.forwardRef<
         return (
           <SubjectIcon
             size="small"
+            // @ts-expect-error 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 d748a43a8f..7e9e428d1f 100644
--- a/src/components/select-menu/useFloatingSelectMenu.tsx
+++ b/src/components/select-menu/useFloatingSelectMenu.tsx
@@ -18,6 +18,7 @@ const MAX_POPUP_WIDTH = 320;
 
 type UseFloatingSelectMenuPropsType = {
   isExpanded: boolean;
+  // @ts-expect-error TS7051
   onOpenChange: (string) => void;
 };
 
diff --git a/src/components/select-menu/useSelectMenu.tsx b/src/components/select-menu/useSelectMenu.tsx
index 5473ae7245..54d17ba943 100644
--- a/src/components/select-menu/useSelectMenu.tsx
+++ b/src/components/select-menu/useSelectMenu.tsx
@@ -72,6 +72,7 @@ const useSelectMenu = (props: UseSelectMenuPropsType) => {
   const onOpenChange = (isOpen: boolean) => {
     if (disabled) return;
 
+    // @ts-expect-error 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 07bf90d6b1..7b611bed02 100644
--- a/src/components/select-menu/useSelectMenuAnimations.tsx
+++ b/src/components/select-menu/useSelectMenuAnimations.tsx
@@ -28,15 +28,19 @@ const useSelectMenuAnimations = (props: UseSelectMenuAnimationsPropsType) => {
   const selectRef = React.useRef<DOMRect>();
   const hasReduceMotion = useReducedMotion();
 
+  // @ts-expect-error TS7031
   const animateExit = ({callback}) => {
     try {
       const select = document.getElementById(selectId);
+      // @ts-expect-error TS18047
       const popupContainer = select.getElementsByClassName(
         popupClassName
       )[0] as HTMLDivElement;
+      // @ts-expect-error TS18047
       const floatingContainer = select.getElementsByClassName(
         floatingContainerClassName
       )[0] as HTMLDivElement;
+      // @ts-expect-error TS18047
       const popupContent = select.getElementsByClassName(
         popupContentClassName
       )[0] as HTMLDivElement;
@@ -137,10 +141,12 @@ const useSelectMenuAnimations = (props: UseSelectMenuAnimationsPropsType) => {
           });
         }
 
+        // @ts-expect-error TS7006
         const cleanupAfterTransition = popupContent => {
           popupContent.classList.remove(SCROLL_HIDE_CLASSNAME);
         };
 
+        // @ts-expect-error 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 2252d64327..965cecbc61 100644
--- a/src/components/skip-link/SkipLink.chromatic.stories.tsx
+++ b/src/components/skip-link/SkipLink.chromatic.stories.tsx
@@ -2,6 +2,7 @@ import * as SkipLink from './SkipLink.stories.mdx';
 import {generateChromaticStory} from '../../chromatic/utils';
 import {within} from '@storybook/testing-library';
 
+// @ts-expect-error 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 d4ab71cc0f..08c442b0bf 100644
--- a/src/components/sparks/Sparks.tsx
+++ b/src/components/sparks/Sparks.tsx
@@ -236,6 +236,7 @@ const Sparks = React.forwardRef<HTMLDivElement, SparksPropsType>(
               <Particle
                 key={index}
                 shape={shape}
+                // @ts-expect-error TS2322
                 style={{
                   ...style,
                   color: colors?.[colorIndex] || shapeColor[colorIndex],
diff --git a/src/components/sparks/animation.ts b/src/components/sparks/animation.ts
index c1c7f07130..becec1ab00 100644
--- a/src/components/sparks/animation.ts
+++ b/src/components/sparks/animation.ts
@@ -96,12 +96,14 @@ function useAnimation(config: AnimationConfig) {
           const {index, overrides = {}} = parameters.current.get(ref);
           const entry = entryAnimations.current.get(ref) ?? [];
 
+          // @ts-expect-error 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
             const override = overrides[id];
 
             if (override) {
@@ -143,6 +145,7 @@ function useAnimation(config: AnimationConfig) {
             const id = keyframesConfig.id;
             let {keyframes, options = {}} = keyframesConfig;
 
+            // @ts-expect-error TS2538
             const override = overrides[id];
 
             if (override) {
diff --git a/src/components/sparks/presets.ts b/src/components/sparks/presets.ts
index fb063b076b..8291f62566 100644
--- a/src/components/sparks/presets.ts
+++ b/src/components/sparks/presets.ts
@@ -213,6 +213,7 @@ const heartAnimationReduced: AnimationConfig = {
 };
 
 export const shapeAnimationMap: Record<
+  // @ts-expect-error TS2344
   ParticleProps['shape'],
   {default: AnimationConfig; reduced: AnimationConfig}
 > = {
@@ -226,6 +227,7 @@ export const shapeAnimationMap: Record<
   },
 };
 
+// @ts-expect-error TS2344
 export const shapeColorMap: Record<ParticleProps['shape'], string[]> = {
   spark: [
     'var(--yellow-20)',
diff --git a/src/components/spinner/Spinner.spec.tsx b/src/components/spinner/Spinner.spec.tsx
index 28468d1af6..104908551c 100644
--- a/src/components/spinner/Spinner.spec.tsx
+++ b/src/components/spinner/Spinner.spec.tsx
@@ -15,6 +15,7 @@ describe('Spinner', () => {
     const component = render(<Spinner className={testclass} />);
 
     expect(
+      // @ts-expect-error 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 48972c8cd0..650a1f1a06 100644
--- a/src/components/subject-icons/SubjectIcon.spec.tsx
+++ b/src/components/subject-icons/SubjectIcon.spec.tsx
@@ -19,6 +19,7 @@ describe('SubjectIcon', () => {
     const icon = render(<SubjectIcon type={TYPE.ACCOUNTANCY} />);
 
     expect(icon.getByRole('img')).toBeTruthy();
+    // @ts-expect-error 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 5747c16010..2c1353cd58 100644
--- a/src/components/text/Headline.chromatic.stories.tsx
+++ b/src/components/text/Headline.chromatic.stories.tsx
@@ -10,6 +10,7 @@ import {
   responsivePropsStoryLabel,
 } from '../../chromatic/utils';
 
+// @ts-expect-error 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 16b28e4dad..5d69521e34 100644
--- a/src/components/text/Link.chromatic.stories.tsx
+++ b/src/components/text/Link.chromatic.stories.tsx
@@ -6,6 +6,7 @@ import {
 import React from 'react';
 import Link, {LINK_ALIGN, LINK_SIZE, LINK_WEIGHT, LINK_TRANSFORM} from './Link';
 
+// @ts-expect-error TS7006
 export const ResponsiveProps = args => {
   return (
     <div>
diff --git a/src/components/text/Link.tsx b/src/components/text/Link.tsx
index 7b29430b52..1fcddcbbed 100644
--- a/src/components/text/Link.tsx
+++ b/src/components/text/Link.tsx
@@ -194,6 +194,7 @@ const Link = (props: LinkPropsType) => {
 
   const linkType = disabled ? 'span' : 'a';
 
+  // @ts-expect-error 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 d9a8996e66..11a32f9946 100644
--- a/src/components/text/Subheadline.chromatic.stories.tsx
+++ b/src/components/text/Subheadline.chromatic.stories.tsx
@@ -10,6 +10,7 @@ import Subheadline, {
 } from './Subheadline';
 import React from 'react';
 
+// @ts-expect-error TS7006
 export const ResponsiveProps = args => {
   return (
     <div>
diff --git a/src/components/text/Subheadline.tsx b/src/components/text/Subheadline.tsx
index fb3e2ed012..7dbf141ab1 100644
--- a/src/components/text/Subheadline.tsx
+++ b/src/components/text/Subheadline.tsx
@@ -85,10 +85,12 @@ const Subheadline = ({
     ),
     ...generateResponsiveClassNames(
       (propValue: string) => `sg-subheadline--${propValue}`,
+      // @ts-expect-error TS2345
       transform
     ),
     ...generateResponsiveClassNames(
       (propValue: string) => `sg-subheadline--${propValue}`,
+      // @ts-expect-error TS2345
       align
     ),
     className
diff --git a/src/components/text/Text.chromatic.stories.tsx b/src/components/text/Text.chromatic.stories.tsx
index d86f7836ba..f2bee7b3eb 100644
--- a/src/components/text/Text.chromatic.stories.tsx
+++ b/src/components/text/Text.chromatic.stories.tsx
@@ -8,6 +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
 export const ResponsiveProps = args => {
   return (
     <div>
diff --git a/src/components/text/Text.spec.tsx b/src/components/text/Text.spec.tsx
index d9122c0477..5191023425 100644
--- a/src/components/text/Text.spec.tsx
+++ b/src/components/text/Text.spec.tsx
@@ -15,6 +15,7 @@ describe('Text', () => {
     const text = 'random text';
     const component = render(<Text as={TEXT_AS.SPAN}>{text}</Text>);
 
+    // @ts-expect-error 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 b69e7a8c29..fccc8923eb 100644
--- a/src/components/text/TextBit.chromatic.stories.tsx
+++ b/src/components/text/TextBit.chromatic.stories.tsx
@@ -6,6 +6,7 @@ import {
 import React from 'react';
 import TextBit, {TEXT_BIT_SIZE} from './TextBit';
 
+// @ts-expect-error 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 a4d257bfce..f1eec665ed 100644
--- a/src/components/tooltip/Tooltip.chromatic.stories.tsx
+++ b/src/components/tooltip/Tooltip.chromatic.stories.tsx
@@ -11,6 +11,7 @@ import Checkbox from '../form-elements/checkbox/Checkbox';
 import Button from '../buttons/Button';
 
 const Placement = () => {
+  // @ts-expect-error TS7031
   const RenderTooltip = ({placement}) => (
     <Tooltip placement={placement} defaultOpen>
       <Tooltip.Element label="Report this" />
@@ -54,6 +55,7 @@ const Placement = () => {
 };
 
 const TypesOfTriggers = () => {
+  // @ts-expect-error TS7031
   const RenderTooltip = ({trigger}) => (
     <Tooltip defaultOpen>
       <Tooltip.Element label="Here's tooltip" />
@@ -107,6 +109,7 @@ const TypesOfTriggers = () => {
 };
 
 const TextLengths = () => {
+  // @ts-expect-error TS7031
   const RenderShortTooltip = ({placement}) => (
     <Tooltip placement={placement} defaultOpen>
       <Tooltip.Element label="0" />
@@ -120,6 +123,7 @@ const TextLengths = () => {
     </Tooltip>
   );
 
+  // @ts-expect-error 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 007ae1ed0b..72cb1c579f 100644
--- a/src/components/tooltip/Tooltip.spec.tsx
+++ b/src/components/tooltip/Tooltip.spec.tsx
@@ -205,6 +205,7 @@ describe('<Tooltip />', () => {
     fireEvent.focus(button);
     expect(await screen.findByText('Copy to clipboard')).toBeInTheDocument();
 
+    // @ts-expect-error TS2345
     fireEvent.keyDown(document.activeElement, {key: 'Escape'});
     await waitForElementToBeRemoved(() =>
       screen.queryByText('Copy to clipboard')
@@ -229,6 +230,7 @@ describe('<Tooltip />', () => {
     userEvent.hover(button);
     expect(await screen.findByText('Copy to clipboard')).toBeInTheDocument();
 
+    // @ts-expect-error TS2345
     fireEvent.keyDown(document.activeElement, {key: 'Escape'});
     await waitForElementToBeRemoved(() =>
       screen.queryByText('Copy to clipboard')
@@ -254,6 +256,7 @@ describe('<Tooltip />', () => {
     userEvent.hover(button);
     expect(await screen.findByText('Copy to clipboard')).toBeInTheDocument();
 
+    // @ts-expect-error 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 ec4b078ab0..c9a561a807 100644
--- a/src/components/tooltip/TooltipElement.tsx
+++ b/src/components/tooltip/TooltipElement.tsx
@@ -27,18 +27,24 @@ const ARROW_SVG_PATH_SMALL =
 const TooltipElement = React.forwardRef<
   HTMLDivElement,
   TooltipElementPropsType
+  // @ts-expect-error
 >((props: TooltipElementPropsType, ref) => {
   const {className, label} = props;
   const context = useTooltipContext();
+  // @ts-expect-error TS18047
   const elementRef = useMergeRefs([context.refs.setFloating, ref]);
 
   const arrowSize =
+    // @ts-expect-error TS18047
     context.size === 'small' ? ARROW_SIZE_SMALL : ARROW_SIZE_DEFAULT;
   const arrowSVGPath =
+    // @ts-expect-error TS18047
     context.size === 'small' ? ARROW_SVG_PATH_SMALL : ARROW_SVG_PATH_DEFAULT;
 
   const isShorterThanArrowWithPadding =
+    // @ts-expect-error TS18047
     arrowSize + 2 * context.arrowPadding >
+    // @ts-expect-error TS18047
     context.refs.floating.current?.offsetHeight;
 
   // If the placement is right or left
@@ -47,6 +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
     (context.placement.includes('right') || context.placement.includes('left'))
       ? `calc(50% - ${arrowSize / 2}px)`
       : null;
@@ -54,45 +61,59 @@ const TooltipElement = React.forwardRef<
   const tooltipClass = classNames(
     'sg-tooltip',
     {
+      // @ts-expect-error TS18047
       [`sg-tooltip--${String(context.size)}`]: context.size,
+      // @ts-expect-error TS18047
       [`sg-tooltip--${String(context.color)}`]: context.color,
     },
     className
   );
 
   return (
+    // @ts-expect-error TS18047
     context.isMounted && (
       <FloatingPortal>
         <div
           ref={elementRef}
           className={tooltipClass}
+          // @ts-expect-error TS18047
           data-tooltip-id={context.id}
+          // @ts-expect-error TS18047
           data-placement={context.floatingPlacement}
+          // @ts-expect-error TS18047
           data-status={context.status}
           style={{
+            // @ts-expect-error TS18047
             position: context.strategy,
+            // @ts-expect-error TS18047
             top: context.y ?? 0,
+            // @ts-expect-error TS18047
             left: context.x ?? 0,
+            // @ts-expect-error TS18047
             visibility: context.middlewareData.hide?.referenceHidden
               ? 'hidden'
               : 'visible',
             ...props.style,
           }}
           aria-hidden="true"
+          // @ts-expect-error TS18047
           {...context.getFloatingProps()}
           role="none"
         >
           <Text
             className="sg-tooltip__label"
             align="to-center"
+            // @ts-expect-error TS18047
             color={context.color === 'dark' ? 'text-white' : 'text-black'}
             size="small"
           >
             {label}
           </Text>
           <FloatingArrow
+            // @ts-expect-error TS18047
             ref={context.arrowRef}
             className="sg-tooltip__arrow"
+            // @ts-expect-error TS18047
             context={context.context}
             width={arrowSize}
             height={arrowSize}
diff --git a/src/components/tooltip/TooltipTrigger.tsx b/src/components/tooltip/TooltipTrigger.tsx
index 3483b2eed2..4bdb610fec 100644
--- a/src/components/tooltip/TooltipTrigger.tsx
+++ b/src/components/tooltip/TooltipTrigger.tsx
@@ -3,6 +3,7 @@ import {useMergeRefs} from '@floating-ui/react';
 
 import useTooltipContext from './useTooltipContext';
 
+// @ts-expect-error TS7006
 function isReactForwardRefType(object) {
   const REACT_FORWARD_REF_TYPE = Symbol.for('react.forward_ref');
 
@@ -29,13 +30,16 @@ const TooltipTrigger = React.forwardRef<
   const context = useTooltipContext();
   const childrenRef = (children as any).ref;
   const triggerRef = useMergeRefs([
+    // @ts-expect-error TS18047
     context.refs.setReference,
     ref,
     childrenRef,
   ]);
 
   const className = 'sg-tooltip-trigger';
+  // @ts-expect-error TS18047
   const tooltipId = context.getFloatingProps().id as string;
+  // @ts-expect-error TS18047
   const ariaLink = context.asLabel
     ? {'aria-labeledby': tooltipId}
     : {'aria-describedby': tooltipId};
@@ -44,12 +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
       ...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
         'data-state': context.isOpen ? 'open' : 'closed',
       }),
       ...ariaLink,
@@ -62,7 +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
       data-state={context.isOpen ? 'open' : 'closed'}
+      // @ts-expect-error TS18047
       {...context.getReferenceProps(props)}
       aria-describedby={tooltipId}
     >
diff --git a/src/components/tooltip/useTooltip.ts b/src/components/tooltip/useTooltip.ts
index 1cf2cab6a5..a8ac36cd1a 100644
--- a/src/components/tooltip/useTooltip.ts
+++ b/src/components/tooltip/useTooltip.ts
@@ -110,6 +110,7 @@ const useTooltip = ({
     variantParams.padding,
   ]);
 
+  // @ts-expect-error TS7006
   const handleOpenChange = isOpen => {
     if (isControlled && onOpenChange) onOpenChange(isOpen);
     else setIsOpen(isOpen);
@@ -152,6 +153,7 @@ const useTooltip = ({
       setIsOpen,
       arrowRef,
       arrowPadding: variantParams.arrowPadding,
+      // @ts-expect-error TS2783
       placement,
       size,
       color,
diff --git a/src/components/transition/CSSTransitionAnimator.spec.ts b/src/components/transition/CSSTransitionAnimator.spec.ts
index d8a3c1b63b..6c77b4f671 100644
--- a/src/components/transition/CSSTransitionAnimator.spec.ts
+++ b/src/components/transition/CSSTransitionAnimator.spec.ts
@@ -7,6 +7,7 @@ const classNamesRegistry = {
 
 const createMockedElement = () => {
   const element = document.createElement('div');
+  // @ts-expect-error TS7034
   const styleChanges = [];
 
   Object.defineProperty(element, 'style', {
@@ -19,6 +20,7 @@ const createMockedElement = () => {
   });
   return {
     element,
+    // @ts-expect-error TS7005
     styleChanges,
   };
 };
diff --git a/src/components/transition/CSSTransitionAnimator.ts b/src/components/transition/CSSTransitionAnimator.ts
index e0144c8012..df27803952 100644
--- a/src/components/transition/CSSTransitionAnimator.ts
+++ b/src/components/transition/CSSTransitionAnimator.ts
@@ -33,6 +33,7 @@ export function createCSSTransitionAnimator(
   };
 
   const hasLastChangedValue = (prop: string) =>
+    // @ts-expect-error TS7053
     history[0][prop].value !== history[1][prop].value;
 
   const getWillChangeProps = () => ({
@@ -73,6 +74,7 @@ export function createCSSTransitionAnimator(
     const combine = (a: Array<string>) => a.join(', ');
 
     const willChangePropsArray = Object.keys(willChangeProps).filter(
+      // @ts-expect-error TS7053
       prop => willChangeProps[prop]
     );
 
@@ -83,6 +85,7 @@ export function createCSSTransitionAnimator(
     if (transitioned) {
       const transitionProperty: string[] = [];
       const transitionDuration: string[] = [];
+      // @ts-expect-error TS7034
       const transitionTimingFunction = [];
 
       /**
@@ -91,12 +94,15 @@ export function createCSSTransitionAnimator(
        */
       willChangePropsArray.forEach(prop => {
         transitionProperty.push(prop);
+        // @ts-expect-error TS7053
         transitionDuration.push(applySpeed(parsedProps[prop].duration, speed));
+        // @ts-expect-error 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
         oneOrAll(transitionTimingFunction)
       );
     }
@@ -172,6 +178,7 @@ export function createCSSTransitionAnimator(
   ) {
     if (parsedProps !== undefined) {
       return !Object.keys(willChangeProps).some(
+        // @ts-expect-error TS7053
         prop => parsedProps[prop].duration !== '0ms'
       );
     }
@@ -205,6 +212,7 @@ export function createCSSTransitionAnimator(
       const willChangeProps = getWillChangeProps();
 
       remainingPropsToChange = Object.keys(willChangeProps).reduce(
+        // @ts-expect-error 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 75bc5db14b..afcdd384c6 100644
--- a/src/components/transition/Transition.spec.tsx
+++ b/src/components/transition/Transition.spec.tsx
@@ -8,6 +8,7 @@ class TransitionEvent extends Event {
   propertyName: string;
   pseudoElement: string;
 
+  // @ts-expect-error TS7006
   constructor(type, init: {[key: string]: any} = {}) {
     super(type, init);
     this.elapsedTime = init.elapsedTime || 0.0;
@@ -68,6 +69,7 @@ describe('<Transition />', () => {
   });
 
   it('does not apply any style when not support transition', () => {
+    // @ts-expect-error TS2322
     global.TransitionEvent = undefined;
     const wrapper = render(<Transition effect={testEffect} active />);
 
@@ -77,6 +79,7 @@ describe('<Transition />', () => {
   });
 
   it('fires onTransitionStart as a fallback when not support transition', () => {
+    // @ts-expect-error TS2322
     global.TransitionEvent = undefined;
     const onTransitionStart = jest.fn();
 
@@ -91,6 +94,7 @@ describe('<Transition />', () => {
   });
 
   it('fires onTransitionEnd as a fallback when not support transition', () => {
+    // @ts-expect-error TS2322
     global.TransitionEvent = undefined;
     const onTransitionEnd = jest.fn();
 
@@ -143,6 +147,7 @@ describe('<Transition />', () => {
           />
         );
       });
+      // @ts-expect-error 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 06c1acb63e..3c6fbc1d4b 100644
--- a/src/components/transition/Transition.tsx
+++ b/src/components/transition/Transition.tsx
@@ -12,8 +12,10 @@ import {getDebugOptions} from './debug';
 
 Transition.createEffect = predefinedEffects.createEffect;
 
+// @ts-expect-error TS7006
 const isFillModeBackwards = mode => mode === 'backwards' || mode === 'both';
 
+// @ts-expect-error TS7006
 const isFillModeForwards = mode => mode === 'forwards' || mode === 'both';
 
 // https://github.com/jsdom/jsdom/issues/1781
@@ -199,6 +201,7 @@ function BaseTransition({
     const container = containerRef.current;
 
     if (container) {
+      // @ts-expect-error TS2339
       container.className = classNamesRegistry.toString();
     }
   }, [classNamesRegistry, baseClassName]);
diff --git a/src/components/transition/debug.ts b/src/components/transition/debug.ts
index 9899764cde..d105a445ee 100644
--- a/src/components/transition/debug.ts
+++ b/src/components/transition/debug.ts
@@ -3,6 +3,7 @@ type DebugOptionsType = {
   outlines: boolean;
 };
 
+// @ts-expect-error TS7034
 let batchTimeoutId = null;
 
 export function getDebugOptions(): DebugOptionsType {
@@ -37,6 +38,7 @@ export function getDebugOptions(): DebugOptionsType {
    * therefore multiple references to this function should not
    * immediately print a warning.
    */
+  // @ts-expect-error TS7005
   clearTimeout(batchTimeoutId);
   batchTimeoutId = setTimeout(printWarning, 100);
   return options;
diff --git a/src/components/transition/predefinedEffects.ts b/src/components/transition/predefinedEffects.ts
index b5ed052932..9a47504fb3 100644
--- a/src/components/transition/predefinedEffects.ts
+++ b/src/components/transition/predefinedEffects.ts
@@ -170,9 +170,12 @@ export function createEffect({
  */
 function mergeDeepEffects<T extends {}>(target: T, source: T): T {
   Object.keys(source).forEach(key => {
+    // @ts-expect-error TS7053
     if (typeof target[key] === 'object') {
+      // @ts-expect-error TS7053
       target[key] = mergeDeepEffects(target[key], source[key]);
     } else {
+      // @ts-expect-error TS7053
       target[key] = source[key];
     }
   });
diff --git a/src/components/transition/propertyObject.ts b/src/components/transition/propertyObject.ts
index 14dc91ea72..59841d22a8 100644
--- a/src/components/transition/propertyObject.ts
+++ b/src/components/transition/propertyObject.ts
@@ -127,6 +127,7 @@ export function parsePropertyObject({
   };
 }
 
+// @ts-expect-error TS7006
 function getDurationValue(duration) {
   if (duration === undefined) {
     return DEFAULT_DURATION_VALUE;
@@ -136,21 +137,26 @@ function getDurationValue(duration) {
     return `${duration}ms`;
   }
 
+  // @ts-expect-error TS7053
   if (DURATION_VALUES[duration] !== undefined) {
+    // @ts-expect-error TS7053
     return DURATION_VALUES[duration];
   }
 
   return DEFAULT_DURATION_VALUE;
 }
 
+// @ts-expect-error TS7006
 function getEasingValue(easing) {
   if (easing === undefined) {
     return DEFAULT_EASING_VALUE;
   }
 
+  // @ts-expect-error TS7053
   return EASING_VALUES[easing];
 }
 
+// @ts-expect-error TS7006
 function getTranslateValue(translate) {
   if (translate === undefined) {
     return DEFAULT_TRANSLATE_VALUE;
@@ -161,29 +167,36 @@ function getTranslateValue(translate) {
   }
 
   // $FlowFixMe: could be TransitionTranslateType or a string
+  // @ts-expect-error TS7053
   if (TRANSLATE_VALUES[translate] !== undefined) {
+    // @ts-expect-error TS7053
     return TRANSLATE_VALUES[translate];
   }
 
   return translate;
 }
 
+// @ts-expect-error TS7006
 function getScaleValue(scale) {
   return scale === undefined ? DEFAULT_SCALE_VALUE : String(scale);
 }
 
+// @ts-expect-error TS7031
 function getTransformValue({translateX, translateY, scaleX, scaleY}) {
   return `translate3d(${translateX}, ${translateY}, 0px) scale3d(${scaleX}, ${scaleY}, 1)`;
 }
 
+// @ts-expect-error TS7006
 function getTransformOriginValue(transform) {
   return (transform && transform.origin) || DEFAULT_TRANSFORM_ORIGIN_VALUE;
 }
 
+// @ts-expect-error TS7006
 function getOpacityValue(opacity) {
   return opacity === undefined ? DEFAULT_OPACITY_VALUE : String(opacity);
 }
 
+// @ts-expect-error 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 f2641ddf2e..b11f1c6a50 100644
--- a/src/components/transition/stories/CurvedMovement.tsx
+++ b/src/components/transition/stories/CurvedMovement.tsx
@@ -110,6 +110,7 @@ export const CurvedMovement = () => {
   );
 };
 
+// @ts-expect-error TS7006
 const getBoxStyle = expanded => {
   if (!expanded) {
     return {
diff --git a/src/components/transition/stories/ExpandingDetails.tsx b/src/components/transition/stories/ExpandingDetails.tsx
index b767061fb4..b33c56a7c2 100644
--- a/src/components/transition/stories/ExpandingDetails.tsx
+++ b/src/components/transition/stories/ExpandingDetails.tsx
@@ -93,6 +93,7 @@ const ExpandableBox = ({
      * https://css-tricks.com/animating-layouts-with-the-flip-technique/
      */
     setEffects({
+      // @ts-expect-error TS2322
       expandingBox: {
         initial: {
           transform: {
@@ -109,6 +110,7 @@ const ExpandableBox = ({
           duration: 'gentle1',
         },
       },
+      // @ts-expect-error TS2322
       appearingContent: {
         initial: {
           opacity: 0,
@@ -266,6 +268,7 @@ const exampleData: ExampleDataType = [
   },
 ];
 
+// @ts-expect-error TS7006
 const getElementStyle = (expanded, animating) => {
   if (expanded) {
     return {
@@ -291,6 +294,7 @@ const getElementStyle = (expanded, animating) => {
   } as const;
 };
 
+// @ts-expect-error TS7006
 const getBoxStylingProps = color => {
   const colorsMap = {
     red: {
@@ -313,7 +317,9 @@ const getBoxStylingProps = color => {
       position: 'relative',
       overflow: 'hidden',
     },
+    // @ts-expect-error TS7053
     color: colorsMap[color].backgroundColor,
+    // @ts-expect-error 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 36f6f7dbb7..a50ca00e84 100644
--- a/src/components/transition/stories/FluidList.tsx
+++ b/src/components/transition/stories/FluidList.tsx
@@ -132,6 +132,7 @@ const FluidListItem = ({
        * https://css-tricks.com/animating-layouts-with-the-flip-technique/
        */
       setMovementEffect({
+        // @ts-expect-error TS2353
         initial: {
           transform: {
             translateY: -transformation.diffTop,
@@ -150,6 +151,7 @@ const FluidListItem = ({
     <div ref={elementRef}>
       <Transition
         active
+        // @ts-expect-error 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 e3ba6103c3..b84b860f06 100644
--- a/src/components/transition/stories/InTextCounter.tsx
+++ b/src/components/transition/stories/InTextCounter.tsx
@@ -36,6 +36,7 @@ export const InTextCounter = () => {
   const [index, setIndex] = React.useState(0);
   const currentEffect = cycle[index % cycle.length];
 
+  // @ts-expect-error TS7006
   const handleTransitionEnd = effect => {
     setIndex(increment);
 
diff --git a/src/components/transition/stories/SharedAxis.tsx b/src/components/transition/stories/SharedAxis.tsx
index 29a245bafc..69821a134f 100644
--- a/src/components/transition/stories/SharedAxis.tsx
+++ b/src/components/transition/stories/SharedAxis.tsx
@@ -50,12 +50,15 @@ export const SharedAxis = () => {
       const direction = currentViewIndex < viewIndex ? 'left' : 'right';
 
       // hide previous view
+      // @ts-expect-error TS2345
       setEffect(createSlideOutEffect(direction));
 
       // show the next view
       nextTransitionCallback.current = () => {
         setCurrentViewIndex(viewIndex);
+        // @ts-expect-error TS2345
         setEffect(createSlideInEffect(direction));
+        // @ts-expect-error TS2322
         nextTransitionCallback.current = null;
       };
     }
diff --git a/src/components/utils/UseFirstpaintExample.tsx b/src/components/utils/UseFirstpaintExample.tsx
index 1a29f06075..79382ebf10 100644
--- a/src/components/utils/UseFirstpaintExample.tsx
+++ b/src/components/utils/UseFirstpaintExample.tsx
@@ -11,11 +11,13 @@ export const Example = () => {
     setIsToggled(!isToggled);
 
     if (shouldAnimateRef.current) {
+      // @ts-expect-error TS18048
       animatedElementRef.current.style.animationDuration = '';
     }
   }, [isToggled]);
 
   React.useLayoutEffect(() => {
+    // @ts-expect-error TS18048
     animatedElementRef.current.style.animationDuration = '0ms';
   }, []);
 
@@ -31,6 +33,7 @@ export const Example = () => {
             'use-first-paint-example-box--toggled': isToggled,
           })}
           onClick={handleClick}
+          // @ts-expect-error TS2322
           ref={animatedElementRef}
         >
           Click me
diff --git a/src/components/utils/__mocks__/mq.ts b/src/components/utils/__mocks__/mq.ts
index f36ec93ab5..936f48770f 100644
--- a/src/components/utils/__mocks__/mq.ts
+++ b/src/components/utils/__mocks__/mq.ts
@@ -20,6 +20,7 @@ type MediaQueryListenerType = (
 ) => void;
 export default class MatchMedia {
   mediaQueries: Record<string, Array<MediaQueryListenerType>> = {};
+  // @ts-expect-error TS2564
   mediaQueryList: MediaQueryList;
   userCurrentMediaQuery: string;
 
@@ -86,6 +87,7 @@ export default class MatchMedia {
 
     this.mediaQueries[MEDIA_QUERY].forEach(listener => {
       listener // $FlowFixMe
+        // @ts-expect-error TS2554
         .call(this.mediaQueryList, mqListEvent);
     });
   }
@@ -96,6 +98,7 @@ export default class MatchMedia {
 
   destroy(): void {
     this.clear();
+    // @ts-expect-error TS2790
     delete window.matchMedia;
   }
 }
diff --git a/src/components/utils/responsive-props.spec.ts b/src/components/utils/responsive-props.spec.ts
index 3853b3508a..2555df1ca0 100644
--- a/src/components/utils/responsive-props.spec.ts
+++ b/src/components/utils/responsive-props.spec.ts
@@ -54,6 +54,7 @@ describe('mergeResponsiveProps', () => {
   });
 });
 describe('generateResponsiveClassNames', () => {
+  // @ts-expect-error TS7006
   const generateClass = prop => (prop ? 'foo' : 'bar');
 
   const responsivePropsCases = [
@@ -122,6 +123,7 @@ describe('generateResponsiveClassNames', () => {
 
   it.each(responsivePropsCases)(
     'renders responsive classNames when prop passed as %s with %s',
+    // @ts-expect-error 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 53695ac2f0..bb9bca5f6e 100644
--- a/src/components/utils/responsive-props.ts
+++ b/src/components/utils/responsive-props.ts
@@ -55,6 +55,7 @@ export function mergeResponsiveProps(
     }
   });
   // fill empty breakpoints when other props have values
+  // @ts-expect-error TS7034
   let lastRowValues = [];
 
   breakpoints.forEach(breakpoint => {
@@ -66,7 +67,9 @@ export function mergeResponsiveProps(
     if (valueBreakpointExist) {
       // eslint-disable-next-line no-loop-func
       propObjects.forEach((propObject, propObjectsIndex) => {
+        // @ts-expect-error TS7005
         if (lastRowValues[propObjectsIndex] && !propObject[breakpoint]) {
+          // @ts-expect-error TS7005
           propObject[breakpoint] = lastRowValues[propObjectsIndex];
         }
       });
@@ -84,6 +87,7 @@ export function mergeResponsiveProps(
           propObject[breakpoint] !== undefined
       )
     ) {
+      // @ts-expect-error TS7053
       acc[breakpoint] = propObjects.map<unknown>(
         propObject => propObject[breakpoint]
       );
@@ -113,6 +117,7 @@ export function generateResponsiveClassNames<T>(
           return acc;
         } else {
           acc.push(
+            // @ts-expect-error TS2345
             `${
               responsivePrefixes[index] ? `${responsivePrefixes[index]}:` : ''
             }${createBaseClassName(propBreakpointValue)}`
@@ -126,14 +131,18 @@ export function generateResponsiveClassNames<T>(
 
   return breakpoints
     .map(breakpoint => {
+      // @ts-expect-error TS7053
       if (prop[breakpoint] === null || prop[breakpoint] === undefined) {
         return '';
+        // @ts-expect-error TS7053
       } else if (!createBaseClassName(prop[breakpoint])) {
         return '';
       } else {
         return breakpoint === 'sm'
-          ? createBaseClassName(prop[breakpoint])
-          : `${breakpoint}:${createBaseClassName(prop[breakpoint])}`;
+          ? // @ts-expect-error TS7053
+            createBaseClassName(prop[breakpoint])
+          : // @ts-expect-error TS7053
+            `${breakpoint}:${createBaseClassName(prop[breakpoint])}`;
       }
     })
     .filter(className => className);
diff --git a/src/components/utils/useReducedMotion.spec.ts b/src/components/utils/useReducedMotion.spec.ts
index a47d1bd1e1..9ca8a3684b 100644
--- a/src/components/utils/useReducedMotion.spec.ts
+++ b/src/components/utils/useReducedMotion.spec.ts
@@ -6,10 +6,12 @@ const MOTION_MQ = {
   reduced: '(prefers-reduced-motion: reduce)',
   default: '(prefers-reduced-motion: default)',
 };
+// @ts-expect-error TS7034
 let matchMedia;
 
 describe('useReducedMotion', () => {
   afterEach(() => {
+    // @ts-expect-error TS7005
     matchMedia.destroy();
   });
   it('returns true if user preference is to reduce motion', () => {
@@ -29,10 +31,13 @@ describe('useReducedMotion', () => {
     const {result} = renderHook(() => useReducedMotion());
 
     expect(result.current).toBe(false);
+    // @ts-expect-error TS7005
     act(() => matchMedia.updateMediaQuery(MOTION_MQ.reduced));
     expect(result.current).toBe(true);
+    // @ts-expect-error TS7005
     act(() => matchMedia.updateMediaQuery(MOTION_MQ.default));
     expect(result.current).toBe(false);
+    // @ts-expect-error 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 df72e4574d..e459a569d6 100644
--- a/src/docs/addons/sandbox/CodeEditor.tsx
+++ b/src/docs/addons/sandbox/CodeEditor.tsx
@@ -12,6 +12,7 @@ import {
   createVirtualTypeScriptEnvironment,
   VirtualTypeScriptEnvironment,
 } from '@typescript/vfs';
+// @ts-expect-error TS7016
 import lzstring from 'lz-string';
 import {useActiveCode, SandpackCodeEditor} from '@codesandbox/sandpack-react';
 // @ts-expect-error
@@ -86,6 +87,7 @@ export const CodeEditor = ({code}: CodeEditorPropsType) => {
       ];
 
       setTsEnv(env);
+      // @ts-expect-error TS2345
       setExtensions(extensions);
     };
 
diff --git a/src/docs/addons/sandbox/Sandbox.tsx b/src/docs/addons/sandbox/Sandbox.tsx
index b5e0037b68..317dbc35fc 100644
--- a/src/docs/addons/sandbox/Sandbox.tsx
+++ b/src/docs/addons/sandbox/Sandbox.tsx
@@ -1,4 +1,5 @@
 import {SandpackProvider, SandpackPreview} from '@codesandbox/sandpack-react';
+// @ts-expect-error 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 f7afa67010..d153a465ee 100644
--- a/src/docs/addons/sandbox/manager.tsx
+++ b/src/docs/addons/sandbox/manager.tsx
@@ -21,6 +21,7 @@ addons.register('sandbox', () => {
       });
 
       return (
+        // @ts-expect-error 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 35958e6ddc..32178ffc53 100644
--- a/src/docs/blocks/Label.tsx
+++ b/src/docs/blocks/Label.tsx
@@ -6,6 +6,7 @@ const Status = styled.span`
 `;
 
 // eslint-disable-next-line react/prop-types
+// @ts-expect-error TS7031
 const Label = ({children, status}) => {
   return (
     <div
diff --git a/src/docs/blocks/utils.ts b/src/docs/blocks/utils.ts
index bc6f366e31..45ee9a310c 100644
--- a/src/docs/blocks/utils.ts
+++ b/src/docs/blocks/utils.ts
@@ -1,3 +1,4 @@
+// @ts-expect-error TS7006
 const getBlockBackgroundStyle = theme => {
   return {
     borderRadius: theme.appBorderRadius,
diff --git a/src/logos.codegen.ts b/src/logos.codegen.ts
index 6a2502905b..fa2a80d9e7 100644
--- a/src/logos.codegen.ts
+++ b/src/logos.codegen.ts
@@ -8,6 +8,7 @@ const logos = glob
   .sync('images/logos/**/*.svg', {
     cwd: path.join(__dirname),
   })
+  // @ts-expect-error TS7006
   .reduce((acc, next) => {
     const key = path.basename(next).split('.')[0];
 
diff --git a/src/sandbox.ts b/src/sandbox.ts
index 8de4f7ee6a..bb357df344 100644
--- a/src/sandbox.ts
+++ b/src/sandbox.ts
@@ -2,6 +2,7 @@ import './main.scss';
 import * as styleguide from './index';
 import * as docsUtils from './docs/utils';
 
+// @ts-expect-error TS7006
 function importAll(r) {
   r.keys().forEach(r);
 }
@@ -15,9 +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
   window[exportName] = styleguide[exportName];
 });
 
 Object.keys(docsUtils).forEach(exportName => {
+  // @ts-expect-error TS7015
   window[exportName] = docsUtils[exportName];
 });
diff --git a/tsconfig.json b/tsconfig.json
index 3dbe0a3ced..39d5bce58f 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -1,6 +1,9 @@
 {
   "$schema": "http://json.schemastore.org/tsconfig",
   "compilerOptions": {
+    "strict": true,
+    "noImplicitAny": true,
+    "noImplicitThis": true,
     "target": "es5",
     "module": "esnext",
     "declaration": true,
diff --git a/yarn.lock b/yarn.lock
index 1888fd8d3e..0ed40adbe9 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -5334,6 +5334,14 @@
   dependencies:
     "@types/istanbul-lib-report" "*"
 
+"@types/jest-axe@^3.5.9":
+  version "3.5.9"
+  resolved "https://registry.yarnpkg.com/@types/jest-axe/-/jest-axe-3.5.9.tgz#97b1317371a48707ca93825d4c990b0d07690d99"
+  integrity sha512-z98CzR0yVDalCEuhGXXO4/zN4HHuSebAukXDjTLJyjEAgoUf1H1i+sr7SUB/mz8CRS/03/XChsx0dcLjHkndoQ==
+  dependencies:
+    "@types/jest" "*"
+    axe-core "^3.5.5"
+
 "@types/jest@*":
   version "27.5.1"
   resolved "https://registry.yarnpkg.com/@types/jest/-/jest-27.5.1.tgz#2c8b6dc6ff85c33bcd07d0b62cb3d19ddfdb3ab9"
@@ -6756,6 +6764,11 @@ axe-core@4.5.1:
   resolved "https://registry.yarnpkg.com/axe-core/-/axe-core-4.5.1.tgz#04d561c11b6d76d096d34e9d14ba2c294fb20cdc"
   integrity sha512-1exVbW0X1O/HSr/WMwnaweyqcWOgZgLiVxdLG34pvSQk4NlYQr9OUy0JLwuhFfuVNQzzqgH57eYzkFBCb3bIsQ==
 
+axe-core@^3.5.5:
+  version "3.5.6"
+  resolved "https://registry.yarnpkg.com/axe-core/-/axe-core-3.5.6.tgz#e762a90d7f6dbd244ceacb4e72760ff8aad521b5"
+  integrity sha512-LEUDjgmdJoA3LqklSTwKYqkjcZ4HKc4ddIYGSAiSkr46NTjzg2L9RNB+lekO9P7Dlpa87+hBtzc2Fzn/+GUWMQ==
+
 axe-core@^4.2.0:
   version "4.3.3"
   resolved "https://registry.yarnpkg.com/axe-core/-/axe-core-4.3.3.tgz#b55cd8e8ddf659fe89b064680e1c6a4dceab0325"
@@ -14437,7 +14450,7 @@ lru-queue@0.1:
   dependencies:
     es5-ext "~0.10.2"
 
-lz-string@^1.4.4:
+lz-string@1.4.4, lz-string@^1.4.4:
   version "1.4.4"
   resolved "https://registry.yarnpkg.com/lz-string/-/lz-string-1.4.4.tgz#c0d8eaf36059f705796e1e344811cf4c498d3a26"
   integrity sha1-wNjq82BZ9wV5bh40SBHPTEmNOiY=