diff --git a/.eslintrc b/.eslintrc
index 0ae4a7a4e..b0af2227f 100644
--- a/.eslintrc
+++ b/.eslintrc
@@ -25,7 +25,6 @@
     }
   },
   "rules": {
-    "@typescript-eslint/camelcase": "off",
     "@typescript-eslint/ban-ts-comment": "off",
     "@typescript-eslint/ban-types": [
       "error",
@@ -37,14 +36,30 @@
         "extendDefaults": true
       }
     ],
+    "@typescript-eslint/camelcase": "off",
+    "@typescript-eslint/consistent-indexed-object-style": "error",
+    "@typescript-eslint/consistent-type-definitions": ["error", "interface"],
     "@typescript-eslint/explicit-function-return-type": "off",
     "@typescript-eslint/explicit-module-boundary-types": "off",
     "@typescript-eslint/naming-convention": "off",
     "@typescript-eslint/no-duplicate-imports": "error",
     "@typescript-eslint/no-shadow": "error",
     "@typescript-eslint/no-use-before-define": "error",
-    "@typescript-eslint/consistent-indexed-object-style": "error",
     "arrow-parens": "off",
+    "import/no-extraneous-dependencies": [
+      "error",
+      {
+        "devDependencies": true
+      }
+    ],
+    "import/extensions": [
+      "error",
+      {
+        "jpg": "always",
+        "png": "always",
+        "svg": "always"
+      }
+    ],
     "no-console": ["error", { "allow": ["warn", "error"] }],
     "no-duplicate-imports": "off",
     "no-shadow": "off",
@@ -68,25 +83,11 @@
       }
     ],
     "react/state-in-constructor": "off",
-    "react/static-property-placement": "off",
-    "import/no-extraneous-dependencies": [
-      "error",
-      {
-        "devDependencies": true
-      }
-    ],
-    "import/extensions": [
-      "error",
-      {
-        "jpg": "always",
-        "png": "always",
-        "svg": "always"
-      }
-    ]
+    "react/static-property-placement": "off"
   },
   "overrides": [
     {
-      "files": ["test.{js,ts,tsx}"],
+      "files": ["test.{ts,tsx}"],
       "rules": {
         "@typescript-eslint/no-unsafe-call": "off",
         "no-undef": "off",
@@ -98,25 +99,12 @@
       }
     },
     {
-      "files": ["**/style.{js,ts}"],
+      "files": ["**/style.ts"],
       "rules": {
         "@typescript-eslint/restrict-template-expressions": "off",
         "indent": "off"
       }
     },
-    {
-      "files": ["*.js"],
-      "rules": {
-        "@typescript-eslint/no-var-requires": "off",
-        "@typescript-eslint/explicit-function-return-type": "off",
-        "@typescript-eslint/explicit-module-boundary-types": "off",
-        "@typescript-eslint/no-unsafe-assignment": "off",
-        "@typescript-eslint/no-unsafe-return": "off",
-        "@typescript-eslint/no-unsafe-member-access": "off",
-        "@typescript-eslint/no-unsafe-call": "off",
-        "@typescript-eslint/restrict-template-expressions": "off"
-      }
-    },
     {
       "files": ["*.tsx"],
       "rules": {
@@ -131,7 +119,7 @@
       }
     },
     {
-      "files": ["stories/**/*.{js,ts,tsx}"],
+      "files": ["stories/**/*.{ts,tsx}"],
       "rules": {
         "no-alert": "off"
       }
diff --git a/src/constants/keyboardKeys/index.ts b/src/constants/keyboardKeys/index.ts
index 9402a2aae..f8c04bfd2 100644
--- a/src/constants/keyboardKeys/index.ts
+++ b/src/constants/keyboardKeys/index.ts
@@ -1,9 +1,9 @@
 import throwOnUndefinedProperty from '../../utils/throwOnUndefinedProperty';
 
-export type KeyType = {
+export interface KeyType {
   key: string;
   keyCode: number;
-};
+}
 
 const keyboardKeys = throwOnUndefinedProperty({
   escape: {
diff --git a/src/constants/mediaQueries/index.ts b/src/constants/mediaQueries/index.ts
index 64496f80c..79f2bb9e0 100644
--- a/src/constants/mediaQueries/index.ts
+++ b/src/constants/mediaQueries/index.ts
@@ -1,14 +1,14 @@
 import { throwOnUndefinedProperty } from '../../utils';
 import BREAKPOINTS from '../breakpoints';
 
-type MediaQueriesType = {
+interface MediaQueriesType extends Record<string, unknown> {
   xsUp: string;
   smUp: string;
   mdUp: string;
   lgUp: string;
   xlUp: string;
   xxlUp: string;
-};
+}
 
 const mediaQueries = Object.entries(BREAKPOINTS).reduce(
   (accumulator, [label, px]) => ({
diff --git a/src/constants/themes/types.ts b/src/constants/themes/types.ts
index a2f274131..78efc7cea 100644
--- a/src/constants/themes/types.ts
+++ b/src/constants/themes/types.ts
@@ -26,11 +26,11 @@ export const COLORS_PROP_TYPES = PropTypes.oneOf([
   ...Object.values(secondaryTheme.COLORS),
 ]);
 
-export type ThemeType = {
+export interface ThemeType {
   __type: 'primary' | 'secondary';
   BORDER_RADIUS: BorderRadius;
   BOX_SHADOWS: BoxShadows;
   COLORS: Colors;
   FONTS: Fonts;
   TYPOGRAPHY: Typography;
-};
+}
diff --git a/src/shared-components/accordion/index.tsx b/src/shared-components/accordion/index.tsx
index a13fa0ad3..500452598 100644
--- a/src/shared-components/accordion/index.tsx
+++ b/src/shared-components/accordion/index.tsx
@@ -4,7 +4,7 @@ import { useTheme } from 'emotion-theming';
 
 import { ThemeType } from '../../constants';
 import { ChevronIcon } from '../../icons';
-import Thumbnails from './thumbnails';
+import { Thumbnails } from './thumbnails';
 import {
   AccordionBox,
   ArrowWrapper,
@@ -21,7 +21,7 @@ export type BorderRadiusValues =
   | '0.5rem'
   | '2rem';
 
-type AccordionProps = {
+export interface AccordionProps {
   /** Sets the border-radius of Accordion.Container, AccordionBox, and TitleWrapper */
   borderRadius?: BorderRadiusValues;
   /** node(s) that will render only when expanded */
@@ -40,7 +40,7 @@ type AccordionProps = {
   rightAlignArrow?: boolean;
   /** node that will render whether collapsed or expanded */
   title: React.ReactNode;
-};
+}
 
 /**
  * A list of items that allows each item's content to be expanded and collapsed by clicking its title bar.
diff --git a/src/shared-components/accordion/thumbnails/index.tsx b/src/shared-components/accordion/thumbnails/index.tsx
index 25565630a..93c619791 100644
--- a/src/shared-components/accordion/thumbnails/index.tsx
+++ b/src/shared-components/accordion/thumbnails/index.tsx
@@ -8,12 +8,12 @@ import {
   MultiplesText,
 } from './style';
 
-type ThumbnailsProps = {
+export interface ThumbnailsProps {
   /** An array of image src strings that Accordion.Thumbails will use to render */
   photoSrcs: Array<string>;
-};
+}
 
-const Thumbnails = ({ photoSrcs }: ThumbnailsProps) => {
+export const Thumbnails = ({ photoSrcs }: ThumbnailsProps) => {
   /**
    * Thumbnail images set with empty alt text because they are decorative.
    * Accessible Accordion functionality does not depend on these thumbnails.
@@ -55,5 +55,3 @@ const Thumbnails = ({ photoSrcs }: ThumbnailsProps) => {
 
   return <Container>{renderThumbnails()}</Container>;
 };
-
-export default Thumbnails;
diff --git a/src/shared-components/alert/index.tsx b/src/shared-components/alert/index.tsx
index 02c553265..659fde3b3 100644
--- a/src/shared-components/alert/index.tsx
+++ b/src/shared-components/alert/index.tsx
@@ -24,7 +24,7 @@ const alertIconMapping = {
 
 export type AlertType = 'success' | 'error' | 'default' | 'danger';
 
-type AlertProps = {
+export interface AlertProps {
   avatarSrc?: string;
   content: React.ReactNode;
   ctaContent?: React.ReactNode;
@@ -33,7 +33,7 @@ type AlertProps = {
   truncateText?: boolean;
   type?: AlertType;
   [key: string]: unknown;
-};
+}
 
 /**
  * Alerts should be used to show notifications or messages from (providers, support, or system).
diff --git a/src/shared-components/avatar/index.tsx b/src/shared-components/avatar/index.tsx
index 04ee7dd0f..15c7d916a 100644
--- a/src/shared-components/avatar/index.tsx
+++ b/src/shared-components/avatar/index.tsx
@@ -3,11 +3,11 @@ import PropTypes from 'prop-types';
 
 import Style from './style';
 
-type AvatarProps = {
+export interface AvatarProps {
   alt: string;
   size?: 'small' | 'medium' | 'large';
   src: string;
-};
+}
 
 export const Avatar = ({ alt, size = 'small', src }: AvatarProps) => (
   <Style.AvatarImage alt={alt} avatarSize={size} src={src} />
diff --git a/src/shared-components/banner/index.tsx b/src/shared-components/banner/index.tsx
index ce85bc0ca..36308783d 100644
--- a/src/shared-components/banner/index.tsx
+++ b/src/shared-components/banner/index.tsx
@@ -19,11 +19,11 @@ const bannerIconMapping = {
 
 export type BannerType = 'default' | 'success' | 'error' | 'danger';
 
-type BannerProps = {
+export interface BannerProps {
   content: React.ReactNode;
   onClick?: () => void;
   type?: BannerType;
-};
+}
 
 /**
  * The `<Banner />` component provides only the styling and onClick behavior of banners.
diff --git a/src/shared-components/button/components/linkButton/index.tsx b/src/shared-components/button/components/linkButton/index.tsx
index 44b8f3e5f..31241fa6f 100644
--- a/src/shared-components/button/components/linkButton/index.tsx
+++ b/src/shared-components/button/components/linkButton/index.tsx
@@ -8,7 +8,7 @@ import { ButtonContents, ButtonText } from '../../style';
 import { linkButtonStyles } from './style';
 import { COLORS_PROP_TYPES, ThemeColors } from '../../../../constants';
 
-type LinkProps = {
+export interface LinkProps {
   /**
    * Specifies the tag or element to be rendered
    */
@@ -29,7 +29,7 @@ type LinkProps = {
    */
   textColor?: ThemeColors;
   [key: string]: unknown;
-};
+}
 
 /**
  * `LinkButton` will render a 'button-like' link for directing/linking to the path specified. This component can work with React Router's `Link`/`NavLink` by passing in the router component as a prop ---> `<LinkButton to='/path' as={Link}> ....`.
diff --git a/src/shared-components/button/components/roundButton/index.tsx b/src/shared-components/button/components/roundButton/index.tsx
index 8b8a1d576..9979a1748 100644
--- a/src/shared-components/button/components/roundButton/index.tsx
+++ b/src/shared-components/button/components/roundButton/index.tsx
@@ -18,7 +18,7 @@ import {
 } from '../../deprecatedPropsHandler';
 import { COLORS_PROP_TYPES, ThemeColors } from '../../../../constants';
 
-type RoundButtonProps = {
+export interface RoundButtonProps {
   buttonColor?: ThemeColors;
   /**
    * Determines the button's main style theme
@@ -44,7 +44,7 @@ type RoundButtonProps = {
    */
   textColor?: ThemeColors;
   [key: string]: unknown;
-};
+}
 
 /**
  * `<RoundButton />` behaves mostly the same as `<Button />` except that it requires an `icon` prop since that is the main content placed with in the round button. Any children of the component will be rendered immediately below the round button.
diff --git a/src/shared-components/button/components/textButton/index.tsx b/src/shared-components/button/components/textButton/index.tsx
index cec8a5395..de5b5dde6 100644
--- a/src/shared-components/button/components/textButton/index.tsx
+++ b/src/shared-components/button/components/textButton/index.tsx
@@ -4,7 +4,7 @@ import PropTypes from 'prop-types';
 import { ButtonContents } from '../../style';
 import { BaseTextButton } from './style';
 
-type TextButtonProps = {
+export interface TextButtonProps {
   /**
    * Node/text to be rendered inside the button
    */
@@ -12,7 +12,7 @@ type TextButtonProps = {
   disabled?: boolean;
   onClick?: () => void;
   [key: string]: unknown;
-};
+}
 
 /**
  * `TextButton` will render a block of text (or node) that will function as a button.
diff --git a/src/shared-components/button/index.tsx b/src/shared-components/button/index.tsx
index a73ca2e8b..70ba4597f 100644
--- a/src/shared-components/button/index.tsx
+++ b/src/shared-components/button/index.tsx
@@ -21,7 +21,7 @@ export type ButtonType = 'primary' | 'secondary' | 'tertiary' | 'quaternary';
  */
 export type ButtonTypeWithAction = ButtonType | 'action';
 
-type ButtonProps = {
+export interface ButtonProps {
   buttonColor?: ThemeColors;
   /**
    * Determines the button's main style theme
@@ -53,7 +53,7 @@ type ButtonProps = {
    */
   textColor?: ThemeColors;
   [key: string]: unknown;
-};
+}
 
 /**
  * Buttons can be used as a main call-to-action (CTA). Try to avoid using buttons of the same `buttonType` next to each other since we want to guide the user towards one option.
diff --git a/src/shared-components/button/shared-components/loader/index.tsx b/src/shared-components/button/shared-components/loader/index.tsx
index bf7cf9fc0..1adc7be0f 100644
--- a/src/shared-components/button/shared-components/loader/index.tsx
+++ b/src/shared-components/button/shared-components/loader/index.tsx
@@ -4,7 +4,7 @@ import ButtonLoader from './style';
 import { ButtonTypeWithAction } from '../..';
 import { ThemeColors } from '../../../../constants';
 
-type LoaderProps = {
+export interface LoaderProps {
   buttonColor: ThemeColors;
   buttonType: ButtonTypeWithAction;
   className?: string;
@@ -12,7 +12,7 @@ type LoaderProps = {
   isFullWidth?: boolean;
   isLoading: boolean;
   textColor?: ThemeColors;
-};
+}
 
 const Loader = ({
   buttonColor,
diff --git a/src/shared-components/button/style.ts b/src/shared-components/button/style.ts
index 0e9bffa5d..67e763524 100644
--- a/src/shared-components/button/style.ts
+++ b/src/shared-components/button/style.ts
@@ -162,7 +162,7 @@ function parseTheme(
   }
 }
 
-type BaseButtonStylesTypes = {
+export interface BaseButtonStylesTypes {
   disabled: boolean;
   buttonType: ButtonTypeWithAction;
   buttonColor: ThemeColors;
@@ -170,7 +170,7 @@ type BaseButtonStylesTypes = {
   textColor?: ThemeColors;
   isFullWidth?: boolean;
   theme: ThemeType;
-};
+}
 
 export const baseButtonStyles = ({
   disabled,
diff --git a/src/shared-components/callout/index.tsx b/src/shared-components/callout/index.tsx
index 2161e524b..0d3eb65b4 100644
--- a/src/shared-components/callout/index.tsx
+++ b/src/shared-components/callout/index.tsx
@@ -5,7 +5,7 @@ import { useTheme } from 'emotion-theming';
 import Style from './style';
 import { COLORS_PROP_TYPES, ThemeColors } from '../../constants';
 
-type CalloutProps = {
+export interface CalloutProps {
   /**
    * Content of the Callout element. It may contain `<strong>` tags
    */
@@ -18,7 +18,7 @@ type CalloutProps = {
    * Icon displayed inside the callout right aligned
    */
   icon?: React.ReactNode;
-};
+}
 
 /**
  * Callouts should be used to provide valuable information or additional context on a page. One of the best examples of a callout is for product recommendations.
diff --git a/src/shared-components/carousel/arrow/index.tsx b/src/shared-components/carousel/arrow/index.tsx
index ddcd71f21..577c6ccab 100644
--- a/src/shared-components/carousel/arrow/index.tsx
+++ b/src/shared-components/carousel/arrow/index.tsx
@@ -4,13 +4,13 @@ import { RoundButton } from '../../button';
 import { ArrowLeftIcon, ArrowRightIcon } from '../../../icons';
 import { ArrowContainer, BottomRightAlignedArrowContainer } from './style';
 
-type ArrowProps = {
+export interface ArrowProps {
   bottomRightAlignedArrows?: boolean;
   disabled?: boolean;
   next?: boolean;
   onClick?: () => void;
   prev?: boolean;
-};
+}
 
 const Arrow = ({
   bottomRightAlignedArrows = false,
diff --git a/src/shared-components/carousel/index.tsx b/src/shared-components/carousel/index.tsx
index 8090fc933..a18f5013a 100644
--- a/src/shared-components/carousel/index.tsx
+++ b/src/shared-components/carousel/index.tsx
@@ -15,7 +15,7 @@ const BASE_SLIDER_CONFIG = {
 
 export type CarouselType = 'primary' | 'secondary';
 
-type CarouselProps = {
+export interface CarouselProps {
   /**
    * Auto-advance the carousel cards
    */
@@ -44,7 +44,7 @@ type CarouselProps = {
    */
   infinite?: boolean;
   numCardsVisible: 1 | 2 | 3;
-};
+}
 
 /**
  * Carousels should be used to provide valuable information or additional context on a page. One of the best examples of a Carousel is for product recommendations.
diff --git a/src/shared-components/checkbox/index.tsx b/src/shared-components/checkbox/index.tsx
index 267dfee98..9a0aa74ce 100644
--- a/src/shared-components/checkbox/index.tsx
+++ b/src/shared-components/checkbox/index.tsx
@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 
 import { SelectorButton, SizeType, StyleType } from '../selectorButton';
 
-type CheckboxProps = {
+export interface CheckboxProps {
   checked: boolean;
   /**
    * Text label displayed next to the checkbox
@@ -20,7 +20,7 @@ type CheckboxProps = {
   size?: SizeType;
   type?: StyleType;
   [key: string]: unknown;
-};
+}
 
 /**
  * Checkboxes should be used to provide valuable information or additional context on a page. One of the best examples of a Checkbox is for product recommendations.
diff --git a/src/shared-components/chip/index.tsx b/src/shared-components/chip/index.tsx
index 7e4c1505b..cdeb13452 100644
--- a/src/shared-components/chip/index.tsx
+++ b/src/shared-components/chip/index.tsx
@@ -5,10 +5,10 @@ import { ChipStyles, ChipText } from './style';
 
 export type StatusType = 'default' | 'success' | 'error' | 'secondary';
 
-type ChipProps = {
+export interface ChipProps {
   status?: StatusType;
   text: string;
-};
+}
 
 /**
  * Chips should be used in small spaces to add value to the elements they're nested in. (i.e. "Recommended" on product cards or showing an error on an element in a list.)
diff --git a/src/shared-components/dialogModal/index.tsx b/src/shared-components/dialogModal/index.tsx
index 944c467fe..f55c1535f 100644
--- a/src/shared-components/dialogModal/index.tsx
+++ b/src/shared-components/dialogModal/index.tsx
@@ -12,7 +12,7 @@ import {
   CrossIconContainer,
 } from './style';
 
-type DialogModalProps = {
+export interface DialogModalProps {
   /**
    * Dialog Modal content.
    * Must contain at least 1 button and is responsible for closing the modal.
@@ -25,7 +25,7 @@ type DialogModalProps = {
   onCloseIconClick?: () => void;
   title?: string;
   [key: string]: unknown;
-};
+}
 
 const REACT_PORTAL_SECTION_ID = 'reactPortalSection';
 const getHtmlNode = () => document.querySelector('html') || document.body;
diff --git a/src/shared-components/dropdown/desktopDropdown.tsx b/src/shared-components/dropdown/desktopDropdown.tsx
index 957f1a010..f8e18f5f9 100644
--- a/src/shared-components/dropdown/desktopDropdown.tsx
+++ b/src/shared-components/dropdown/desktopDropdown.tsx
@@ -16,7 +16,7 @@ import {
 
 import { OptionType, OptionValue } from './index';
 
-type DesktopDropdownProps<T> = {
+interface DesktopDropdownProps<T> {
   borderRadius: string;
   closeDropdown: () => void;
   currentOption?: T;
@@ -29,7 +29,7 @@ type DesktopDropdownProps<T> = {
   textAlign: 'left' | 'center';
   toggleDropdown: () => void;
   value?: OptionValue;
-};
+}
 
 export const DesktopDropdown = <T extends OptionType>({
   borderRadius,
diff --git a/src/shared-components/dropdown/index.tsx b/src/shared-components/dropdown/index.tsx
index 86f67e1a5..f8e11582f 100644
--- a/src/shared-components/dropdown/index.tsx
+++ b/src/shared-components/dropdown/index.tsx
@@ -7,7 +7,7 @@ import { DesktopDropdown } from './desktopDropdown';
 
 export type OptionValue = string | number;
 
-export type OptionType = {
+export interface OptionType {
   disabled?: boolean;
   /**
    * The text to be displayed for the option
@@ -21,9 +21,9 @@ export type OptionType = {
    * Any other data we want to pass from options
    */
   [key: string]: unknown;
-};
+}
 
-type DropdownProps<T> = {
+interface DropdownProps<T> {
   borderRadius?: string;
   /**
    * The handler to be invoked on option change
@@ -39,7 +39,7 @@ type DropdownProps<T> = {
    * The currently selected option
    */
   value?: OptionValue;
-};
+}
 
 /**
  * `<Dropdown />` is a controlled component and should be wrapped by a parent to control the dropdown's state.
diff --git a/src/shared-components/dropdown/mobileDropdown.tsx b/src/shared-components/dropdown/mobileDropdown.tsx
index cdfc6041f..7ed290daa 100644
--- a/src/shared-components/dropdown/mobileDropdown.tsx
+++ b/src/shared-components/dropdown/mobileDropdown.tsx
@@ -6,13 +6,13 @@ import { DropdownContainer, dropdownInputStyle, IconContainer } from './style';
 
 import { OptionType, OptionValue } from '.';
 
-type MobileDropdownProps<T> = {
+interface MobileDropdownProps<T> {
   borderRadius: string;
   onMobileSelectChange: (event: React.ChangeEvent<HTMLSelectElement>) => void;
   options: T[];
   textAlign: 'left' | 'center';
   value?: OptionValue;
-};
+}
 
 /**
  * The mobile dropdown is built into the `<Dropdown />` component and cannot be used individually.
diff --git a/src/shared-components/dropdown/style.ts b/src/shared-components/dropdown/style.ts
index bc41613b0..3d4cba7e9 100644
--- a/src/shared-components/dropdown/style.ts
+++ b/src/shared-components/dropdown/style.ts
@@ -3,12 +3,12 @@ import { css } from '@emotion/core';
 
 import { SPACER, ANIMATION, ThemeType } from '../../constants';
 
-type DropdownInputStyleProps = {
+export interface DropdownInputStyleProps {
   borderRadius: string;
   shouldBeFullyRounded: boolean;
   textAlign: 'left' | 'center';
   theme: ThemeType;
-};
+}
 
 export const DropdownContainer = styled.div<{ textAlign: 'left' | 'center' }>`
   position: relative;
diff --git a/src/shared-components/field/index.tsx b/src/shared-components/field/index.tsx
index 0feb982b3..07029f64b 100644
--- a/src/shared-components/field/index.tsx
+++ b/src/shared-components/field/index.tsx
@@ -17,7 +17,7 @@ import {
   MessageType,
 } from '../verificationMessages';
 
-type FieldProps = {
+export interface FieldProps {
   /**
    * Must be either `Field.Input` or `Field.Textarea`
    */
@@ -47,7 +47,7 @@ type FieldProps = {
    */
   messages?: Record<string, MessageType>;
   messagesType?: MessagesTypes;
-};
+}
 
 /**
  * Field component uses VerificationMessages component internally along with extra styling for the input.
diff --git a/src/shared-components/immersiveModal/index.tsx b/src/shared-components/immersiveModal/index.tsx
index 5436d1ae0..b7b2475b5 100644
--- a/src/shared-components/immersiveModal/index.tsx
+++ b/src/shared-components/immersiveModal/index.tsx
@@ -22,7 +22,7 @@ import {
   MainModalContentContainer,
 } from './style';
 
-type ImmersiveModalProps = {
+export interface ImmersiveModalProps {
   /**
    * Modal body
    */
@@ -44,7 +44,7 @@ type ImmersiveModalProps = {
    */
   title?: string | JSX.Element;
   [key: string]: unknown;
-};
+}
 
 const REACT_PORTAL_SECTION_ID = 'reactPortalSection';
 const MODAL_MOBILE_SCROLLING_ID = 'modal-mobile-scrolling-id';
diff --git a/src/shared-components/immersiveModal/style.ts b/src/shared-components/immersiveModal/style.ts
index 5f5d3000c..22fa1c21e 100644
--- a/src/shared-components/immersiveModal/style.ts
+++ b/src/shared-components/immersiveModal/style.ts
@@ -207,9 +207,9 @@ export const ModalContainer = styled.div`
   }
 `;
 
-type HasHeaderImageProps = {
+export interface HasHeaderImageProps {
   hasHeaderImage: boolean;
-};
+}
 
 // 32px comes from top overlay
 // 272px comes from 32px top overlay + 240px image
diff --git a/src/shared-components/indicator/index.tsx b/src/shared-components/indicator/index.tsx
index 66772a423..d66cf52ec 100644
--- a/src/shared-components/indicator/index.tsx
+++ b/src/shared-components/indicator/index.tsx
@@ -5,10 +5,10 @@ import { useTheme } from 'emotion-theming';
 
 import { IndicatorContainer } from './style';
 
-type IndicatorProps = {
+export interface IndicatorProps {
   text: string | number;
   backgroundColor?: ThemeColors;
-};
+}
 
 /**
  * Indicators are used in navigation to help with wayfinding for messages and notifications.
diff --git a/src/shared-components/loadingSpinner/index.tsx b/src/shared-components/loadingSpinner/index.tsx
index b03615cdd..1800d695a 100644
--- a/src/shared-components/loadingSpinner/index.tsx
+++ b/src/shared-components/loadingSpinner/index.tsx
@@ -5,7 +5,7 @@ import { useTheme } from 'emotion-theming';
 import { LoadingSpinnerContainer, Overlay, Dot } from './style';
 import { ThemeColors } from '../../constants';
 
-type LoadingSpinnerProps = {
+export interface LoadingSpinnerProps {
   /**
    * Background color of loading container
    */
@@ -26,7 +26,7 @@ type LoadingSpinnerProps = {
    * Distance dots will move horizontally
    */
   translateX?: string;
-};
+}
 
 /**
  * LoadingSpinner will cover the entirety of the container that holds it. The container should have `position: relative;` as part of its styling to prevent the LoadingSpinner from spilling outside the container.
diff --git a/src/shared-components/offClickWrapper/index.tsx b/src/shared-components/offClickWrapper/index.tsx
index 302e32dee..fde4c3662 100644
--- a/src/shared-components/offClickWrapper/index.tsx
+++ b/src/shared-components/offClickWrapper/index.tsx
@@ -1,7 +1,7 @@
 import React, { useEffect, useRef } from 'react';
 import PropTypes from 'prop-types';
 
-type OffClickWrapperProps = {
+export interface OffClickWrapperProps {
   /**
    * Content/container that ignores clicks inside it
    */
@@ -11,7 +11,7 @@ type OffClickWrapperProps = {
    * Function invoked when clicking outside of the children content
    */
   onOffClick: (event: KeyboardEvent | MouseEvent) => void;
-};
+}
 
 export const OffClickWrapper = ({
   children,
diff --git a/src/shared-components/optionButton/index.tsx b/src/shared-components/optionButton/index.tsx
index 64551dbce..d0a09dd0a 100644
--- a/src/shared-components/optionButton/index.tsx
+++ b/src/shared-components/optionButton/index.tsx
@@ -12,7 +12,7 @@ import {
 } from './style';
 import { CheckmarkIcon } from '../../icons';
 
-type OptionButtonProps = {
+export interface OptionButtonProps {
   borderRadius?: string;
   buttonType?: 'primary' | 'secondary';
   /**
@@ -28,7 +28,7 @@ type OptionButtonProps = {
   subtext?: React.ReactNode;
   text: string;
   [key: string]: unknown;
-};
+}
 
 export const OptionButton = ({
   borderRadius,
diff --git a/src/shared-components/optionButton/style.ts b/src/shared-components/optionButton/style.ts
index 524d12362..985adaf4b 100644
--- a/src/shared-components/optionButton/style.ts
+++ b/src/shared-components/optionButton/style.ts
@@ -5,12 +5,12 @@ import { ANIMATION, SPACER, ThemeType } from '../../constants';
 import { containerStyles, ContainerType } from '../container/style';
 import { setThemeLineHeight } from '../../utils/themeStyles';
 
-type BaseIconWrapperStylesProps = {
+export interface BaseIconWrapperStylesProps {
   buttonType?: 'primary' | 'secondary';
   optionType?: 'radio' | 'checkbox';
   selected?: boolean;
   theme: ThemeType;
-};
+}
 
 const getOptionTypeStyles = (
   optionType: BaseIconWrapperStylesProps['optionType'],
diff --git a/src/shared-components/progressBar/index.tsx b/src/shared-components/progressBar/index.tsx
index 8a425c40b..b4feba0f3 100644
--- a/src/shared-components/progressBar/index.tsx
+++ b/src/shared-components/progressBar/index.tsx
@@ -7,7 +7,7 @@ import { OuterContainer, InnerBar } from './style';
 
 export type ProgressBarStatusType = valueof<typeof PROGRESS_BAR_STATUS>;
 
-type ProgressBarProps = {
+export interface ProgressBarProps {
   backgroundColor?: ThemeColors;
   barColor?: ThemeColors;
   /**
@@ -20,7 +20,7 @@ type ProgressBarProps = {
   loadingTime?: string;
   status: ProgressBarStatusType;
   [key: string]: unknown;
-};
+}
 
 /**
  * The component has `position: absolute` by default. You must provide a container with `position: relative` to contain the progress bar. To further refine the position, you may use custom styles.
diff --git a/src/shared-components/radioButton/index.tsx b/src/shared-components/radioButton/index.tsx
index d3dc56ae4..41c7a4dbb 100644
--- a/src/shared-components/radioButton/index.tsx
+++ b/src/shared-components/radioButton/index.tsx
@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 
 import { SelectorButton, SizeType, StyleType } from '../selectorButton';
 
-type RadioButtonProps = {
+export interface RadioButtonProps {
   checked: boolean;
   /**
    * Text label displayed next to the radio button
@@ -22,7 +22,7 @@ type RadioButtonProps = {
   size?: SizeType;
   type?: StyleType;
   [key: string]: unknown;
-};
+}
 
 /**
  * `<RadioButton />` is a controlled component that represents a radio selection. This means that the `onClick` function should be used to change the checked state of the radio button.
diff --git a/src/shared-components/selectorButton/index.tsx b/src/shared-components/selectorButton/index.tsx
index 2e5dbd841..da27ebdea 100644
--- a/src/shared-components/selectorButton/index.tsx
+++ b/src/shared-components/selectorButton/index.tsx
@@ -16,7 +16,7 @@ export type SelectorType = 'radio' | 'checkbox';
 export type SizeType = 'large' | 'small';
 export type StyleType = 'primary' | 'secondary';
 
-type SelectorButtonProps = {
+export interface SelectorButtonProps {
   checked: boolean;
   children?: React.ReactNode;
   disabled?: boolean;
@@ -28,7 +28,7 @@ type SelectorButtonProps = {
   size?: SizeType;
   type?: StyleType;
   [key: string]: unknown;
-};
+}
 
 export const SelectorButton = ({
   checked,
diff --git a/src/shared-components/tabs/index.tsx b/src/shared-components/tabs/index.tsx
index db8686222..f79d29da1 100644
--- a/src/shared-components/tabs/index.tsx
+++ b/src/shared-components/tabs/index.tsx
@@ -3,20 +3,20 @@ import React, { useState } from 'react';
 
 import { TabsContainer, TabItem } from './style';
 
-type TabType = {
+interface TabType {
   id: number;
   text: string;
-};
+}
 
 // Hardcoding TabType below to show the actual type in the docs
-type TabsProps = {
+export interface TabsProps {
   initialActiveTabId?: number;
   onClick?: (tab: TabType) => unknown;
   tabItems: Array<{
     id: number;
     text: string;
   }>;
-};
+}
 
 export const Tabs = ({
   initialActiveTabId = 1,
diff --git a/src/shared-components/toggle/index.tsx b/src/shared-components/toggle/index.tsx
index c67ef0936..540df9cfa 100644
--- a/src/shared-components/toggle/index.tsx
+++ b/src/shared-components/toggle/index.tsx
@@ -12,11 +12,11 @@ import {
   thumbStyle,
 } from './style';
 
-type ToggleProps = {
+export interface ToggleProps {
   checked?: boolean;
   label?: string;
   onChange: () => void;
-};
+}
 
 /**
  * react-toggle-button in-lines all of its styling.
diff --git a/src/shared-components/tooltip/index.tsx b/src/shared-components/tooltip/index.tsx
index a65d1fa04..ccaf9721e 100644
--- a/src/shared-components/tooltip/index.tsx
+++ b/src/shared-components/tooltip/index.tsx
@@ -17,7 +17,7 @@ export type ArrowAlignTypes = 'left' | 'middle' | 'right';
 
 export type PositionTypes = 'top' | 'bottom';
 
-type TooltipProps = {
+export interface TooltipProps {
   /**
    * Adjusts positioning, in percent
    */
@@ -68,7 +68,7 @@ type TooltipProps = {
    */
   nudgeTop?: number;
   position?: PositionTypes;
-};
+}
 
 /**
  * Tooltips provide additional context to elements or give patients hints about new features or updates.
diff --git a/src/shared-components/transitions/index.tsx b/src/shared-components/transitions/index.tsx
index 97d9b8a28..37e222c60 100644
--- a/src/shared-components/transitions/index.tsx
+++ b/src/shared-components/transitions/index.tsx
@@ -5,7 +5,7 @@ import { FadeInContainer as StyledContainer } from './style';
 
 export { opacityInAnimationStyle } from './style';
 
-type FadeInContainerProps = {
+export interface FadeInContainerProps {
   children: React.ReactNode;
   /**
    * Adds a slide in animation
@@ -15,7 +15,7 @@ type FadeInContainerProps = {
    * Animation transition duration
    */
   speed?: string;
-};
+}
 
 export const FadeInContainer = ({
   children,
diff --git a/src/shared-components/verificationMessages/index.tsx b/src/shared-components/verificationMessages/index.tsx
index 8229cd7cb..26bc45f4f 100644
--- a/src/shared-components/verificationMessages/index.tsx
+++ b/src/shared-components/verificationMessages/index.tsx
@@ -9,7 +9,7 @@ import formatMessage from './formatMessage';
 export type MessagesTypes = 'error' | 'success';
 export type MessageType = string | JSX.Element | Array<string | JSX.Element>;
 
-type VerificationMessagesProps = {
+export interface VerificationMessagesProps {
   /**
    * Centers the messages
    */
@@ -19,7 +19,7 @@ type VerificationMessagesProps = {
    */
   messages?: Record<string, MessageType>;
   type?: MessagesTypes;
-};
+}
 
 /**
  * Verification messages help provide context and status within forms.
diff --git a/src/types/tsconfig.json b/src/types/tsconfig.json
deleted file mode 100644
index 00cd7b9fa..000000000
--- a/src/types/tsconfig.json
+++ /dev/null
@@ -1,9 +0,0 @@
-{
-  "extends": "../tsconfig",
-  "compilerOptions": {},
-  "references": [
-    {
-      "path": "../src"
-    }
-  ]
-}
diff --git a/src/utils/helperTransition/index.tsx b/src/utils/helperTransition/index.tsx
index fa9764364..5f582942a 100644
--- a/src/utils/helperTransition/index.tsx
+++ b/src/utils/helperTransition/index.tsx
@@ -36,10 +36,10 @@ const getStyleForTransitionState = (transitionState: string) => {
   }
 };
 
-type HelperTransitionParamsType = {
+interface HelperTransitionParamsType {
   children: JSX.Element;
   [key: string]: unknown;
-};
+}
 
 const HelperTransition = ({
   children: child,
diff --git a/stories/theme/color.tsx b/stories/theme/color.tsx
index 20cb0e012..7f2bd7e3e 100644
--- a/stories/theme/color.tsx
+++ b/stories/theme/color.tsx
@@ -27,10 +27,10 @@ const ColorHex = styled.div`
   font-size: 12px;
 `;
 
-type ColorProps = {
+interface ColorProps {
   colorName: string;
   colorHex: string;
-};
+}
 
 const Color = ({ colorName, colorHex }: ColorProps) => (
   <ColorContainer>