diff --git a/packages/ffe-message-box-react/README.md b/packages/ffe-message-box-react/README.md
index ba9d0731c0..e858c85bba 100644
--- a/packages/ffe-message-box-react/README.md
+++ b/packages/ffe-message-box-react/README.md
@@ -10,11 +10,6 @@ npm install --save @sb1/ffe-message-box-react
 
 Full documentation on message box usage is available at https://design.sparebank1.no/komponenter/meldinger/#messagebox.
 
-## TypeScript definition files
-
-This component supports TypeScript - please update `index.d.ts` if you change any
-of the external methods or properties in this component.
-
 ## Development
 
 To start a local development server, run the following from the designsystem root folder:
diff --git a/packages/ffe-message-box-react/package.json b/packages/ffe-message-box-react/package.json
index 11de7d7ae2..d396af8fec 100644
--- a/packages/ffe-message-box-react/package.json
+++ b/packages/ffe-message-box-react/package.json
@@ -17,10 +17,10 @@
         "url": "ssh://git@github.com:SpareBank1/designsystem.git"
     },
     "scripts": {
-        "build": "ffe-buildtool babel",
+        "build": "ffe-buildtool tsc",
         "watch": "ffe-buildtool babel-watch",
-        "lint": "eslint src",
-        "lint:fix": "eslint src --fix",
+        "lint": "eslint src --ext ts,tsx",
+        "lint:fix": "eslint src --fix --ext ts,tsx",
         "test": "ffe-buildtool jest",
         "test:watch": "ffe-buildtool jest --watch"
     },
diff --git a/packages/ffe-message-box-react/src/BaseMessage.spec.js b/packages/ffe-message-box-react/src/BaseMessage.spec.js
deleted file mode 100644
index a82becac25..0000000000
--- a/packages/ffe-message-box-react/src/BaseMessage.spec.js
+++ /dev/null
@@ -1,56 +0,0 @@
-import React from 'react';
-import BaseMessage from './BaseMessage';
-import { Icon } from '@sb1/ffe-icons-react';
-const defaultProps = {
-    type: 'info',
-    icon: <Icon fileUrl="priority_high" />,
-};
-const getWrapper = props =>
-    shallow(<BaseMessage {...defaultProps} {...props} />);
-
-describe('<BaseMessage />', () => {
-    it('renders without exploding', () => {
-        const wrapper = getWrapper();
-        expect(wrapper.exists()).toBe(true);
-    });
-    it('renders the correct classes by default', () => {
-        const wrapper = getWrapper({ title: 'test title' });
-        expect(wrapper.hasClass('ffe-message-box')).toBe(true);
-
-        ['info', 'error', 'success', 'tips'].forEach(type => {
-            const typedWrapper = getWrapper({ type, title: 'test' });
-            expect(
-                typedWrapper.find(`.ffe-message-box--${type}`).exists(),
-            ).toBe(true);
-            expect(typedWrapper.find('.ffe-message-box__icon').exists()).toBe(
-                true,
-            );
-        });
-    });
-    it('renders with correct title class', () => {
-        const wrapper = getWrapper({ title: 'test title' });
-        expect(wrapper.find(`.ffe-message-box__title`).exists()).toBe(true);
-    });
-    it('renders an icon by default', () => {
-        const wrapper = getWrapper();
-        expect(wrapper.find('.ffe-message-box__icon').exists()).toBe(true);
-    });
-    it('renders the container with role="group" by default', () => {
-        const wrapper = getWrapper();
-        expect(wrapper.prop('role')).toBe('group');
-    });
-    it('renders a title if specified', () => {
-        const wrapper = getWrapper({ title: 'test title' });
-        expect(wrapper.find('.ffe-message-box__title').text()).toBe(
-            'test title',
-        );
-    });
-    it('renders children if specified', () => {
-        const wrapper = getWrapper({ children: <p>children</p> });
-        expect(wrapper.text()).toContain('children');
-    });
-    it('renders onColoredBg styling if specified', () => {
-        const wrapper = getWrapper({ onColoredBg: true });
-        expect(wrapper.find('.ffe-message-box--coloredbg').exists()).toBe(true);
-    });
-});
diff --git a/packages/ffe-message-box-react/src/BaseMessage.spec.tsx b/packages/ffe-message-box-react/src/BaseMessage.spec.tsx
new file mode 100644
index 0000000000..4da69f8d90
--- /dev/null
+++ b/packages/ffe-message-box-react/src/BaseMessage.spec.tsx
@@ -0,0 +1,81 @@
+import React from 'react';
+import { BaseMessage, BaseMessageProps } from './BaseMessage';
+import { Icon } from '@sb1/ffe-icons-react';
+import { render, screen } from '@testing-library/react';
+
+const defaultProps = {
+    type: 'info' as const,
+    icon: <Icon fileUrl="priority_high" />,
+};
+
+const TEST_ID = 'TEST_ID';
+
+const renderBaseMessage = (props?: Partial<BaseMessageProps>) =>
+    render(<BaseMessage {...defaultProps} {...props} data-testid={TEST_ID} />);
+
+describe('<BaseMessage />', () => {
+    it('renders the correct classes by default', () => {
+        const { rerender, container } = render(
+            <BaseMessage
+                {...defaultProps}
+                title="test title"
+                data-testid={TEST_ID}
+            />,
+        );
+        const baseMessage = screen.getByTestId(TEST_ID);
+        expect(baseMessage.classList.contains('ffe-message-box')).toBe(true);
+
+        const types = ['info', 'error', 'success', 'tips'] as const;
+
+        types.forEach(type => {
+            rerender(
+                <BaseMessage
+                    {...defaultProps}
+                    title="test"
+                    type={type}
+                    data-testid={TEST_ID}
+                />,
+            );
+            expect(
+                baseMessage.classList.contains(`ffe-message-box--${type}`),
+            ).toBe(true);
+            expect(
+                container.querySelector(`.ffe-message-box__icon`),
+            ).toBeTruthy();
+        });
+    });
+
+    it('renders with correct title class', () => {
+        const { container } = renderBaseMessage({ title: 'test title' });
+        expect(container.querySelector(`.ffe-message-box__title`)).toBeTruthy();
+    });
+    it('renders an icon by default', () => {
+        const { container } = renderBaseMessage();
+        expect(container.querySelector(`.ffe-message-box__icon`)).toBeTruthy();
+    });
+    it('renders the container with role="group" by default', () => {
+        renderBaseMessage();
+        const baseMessage = screen.getByTestId(TEST_ID);
+
+        expect(baseMessage.getAttribute('role')).toBe('group');
+    });
+    it('renders a title if specified', () => {
+        const { container } = renderBaseMessage({ title: 'test title' });
+
+        expect(
+            container.querySelector(`.ffe-message-box__title`)?.textContent,
+        ).toBe('test title');
+    });
+    it('renders children if specified', () => {
+        renderBaseMessage({ children: <p>children</p> });
+        const baseMessage = screen.getByTestId(TEST_ID);
+
+        expect(baseMessage.textContent).toContain('children');
+    });
+    it('renders onColoredBg styling if specified', () => {
+        const { container } = renderBaseMessage({ onColoredBg: true });
+        expect(
+            container.querySelector('.ffe-message-box--coloredbg'),
+        ).toBeTruthy();
+    });
+});
diff --git a/packages/ffe-message-box-react/src/BaseMessage.js b/packages/ffe-message-box-react/src/BaseMessage.tsx
similarity index 54%
rename from packages/ffe-message-box-react/src/BaseMessage.js
rename to packages/ffe-message-box-react/src/BaseMessage.tsx
index 1efbb8057a..1622069569 100644
--- a/packages/ffe-message-box-react/src/BaseMessage.js
+++ b/packages/ffe-message-box-react/src/BaseMessage.tsx
@@ -1,21 +1,35 @@
 import React from 'react';
-import { bool, node, oneOf, string } from 'prop-types';
 import classNames from 'classnames';
 
-const BaseMessage = props => {
-    const {
-        type,
-        title,
-        titleElement = 'h2',
-        icon,
-        children,
-        className = '',
-        onColoredBg = false,
-        ariaLabel,
-        role = 'group',
-        ...rest
-    } = props;
+export interface BaseMessageProps
+    extends Omit<React.ComponentPropsWithoutRef<'div'>, 'title'> {
+    icon?: React.ReactNode;
+    title?: React.ReactNode;
+    /** HTML element for the title */
+    titleElement?: string;
+    /**
+     * Internal type enum for specifying the style of message box. Should not be used directly
+     * @ignore
+     */
+    type: 'success' | 'error' | 'tips' | 'info';
+    /** Adds alternative styling for better contrast on certain backgrounds */
+    onColoredBg?: boolean;
+    ariaLabel?: string;
+    role?: 'alert' | 'group';
+}
 
+export const BaseMessage: React.FC<BaseMessageProps> = ({
+    type,
+    title,
+    titleElement = 'h2',
+    icon,
+    children,
+    className = '',
+    onColoredBg = false,
+    ariaLabel,
+    role = 'group',
+    ...rest
+}) => {
     return (
         <div
             className={classNames(
@@ -29,11 +43,12 @@ const BaseMessage = props => {
             {...rest}
         >
             <span className="ffe-message-box__icon">
-                {React.cloneElement(icon, {
-                    ...icon.props,
-                    size: 'xl',
-                    weight: 300,
-                })}
+                {React.isValidElement(icon) &&
+                    React.cloneElement(icon, {
+                        ...icon.props,
+                        size: 'xl',
+                        weight: 300,
+                    })}
             </span>
             <div className="ffe-message-box__box">
                 {title &&
@@ -49,23 +64,3 @@ const BaseMessage = props => {
         </div>
     );
 };
-
-BaseMessage.propTypes = {
-    children: node,
-    className: string,
-    icon: node.isRequired,
-    title: node,
-    /** HTML element for the title */
-    titleElement: string,
-    /**
-     * Internal type enum for specifying the style of message box. Should not be used directly
-     * @ignore
-     */
-    type: oneOf(['success', 'error', 'tips', 'info']).isRequired,
-    /* Adds alternative styling for better contrast on certain backgrounds */
-    onColoredBg: bool,
-    ariaLabel: string,
-    role: oneOf(['alert', 'group']),
-};
-
-export default BaseMessage;
diff --git a/packages/ffe-message-box-react/src/ErrorMessage.js b/packages/ffe-message-box-react/src/ErrorMessage.tsx
similarity index 65%
rename from packages/ffe-message-box-react/src/ErrorMessage.js
rename to packages/ffe-message-box-react/src/ErrorMessage.tsx
index b6919a7142..1eade48f19 100644
--- a/packages/ffe-message-box-react/src/ErrorMessage.js
+++ b/packages/ffe-message-box-react/src/ErrorMessage.tsx
@@ -1,12 +1,20 @@
 import React from 'react';
-import { node, string, bool, oneOf } from 'prop-types';
 import { Icon } from '@sb1/ffe-icons-react';
-import BaseMessage from './BaseMessage';
-import texts from './texts';
+import { BaseMessage, BaseMessageProps } from './BaseMessage';
+import { texts } from './texts';
 
-const ErrorMessage = props => {
-    const { alert = true, locale = 'nb', ...rest } = props;
+export interface ErrorMessageProps
+    extends Omit<BaseMessageProps, 'type' | 'icon'> {
+    /** When false, role is not set to alert, avoids message from being read up immediately after page load. Default value is true. */
+    alert?: boolean;
+    locale?: 'nb' | 'nn' | 'en';
+}
 
+export const ErrorMessage: React.FC<ErrorMessageProps> = ({
+    alert = true,
+    locale = 'nb',
+    ...rest
+}) => {
     const priorityHighIcon =
         'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iNDgiIHZpZXdCb3g9IjAgLTk2MCA5NjAgOTYwIiB3aWR0aD0iNDgiPjxwYXRoIGQ9Ik00NzkuODgxLTE2My4wOHEtMjEuNzg0IDAtMzcuMTc4LTE1LjUxMy0xNS4zOTQtMTUuNTEzLTE1LjM5NC0zNy4yOTd0MTUuNTEzLTM3LjE3OHExNS41MTMtMTUuMzk0IDM3LjI5Ny0xNS4zOTR0MzcuMTc4IDE1LjUxM3ExNS4zOTQgMTUuNTEzIDE1LjM5NCAzNy4yOTd0LTE1LjUxMyAzNy4xNzhxLTE1LjUxMyAxNS4zOTQtMzcuMjk3IDE1LjM5NFptLS4wNjEtMTk2LjE1MXEtMTkuNTg5IDAtMzMuMzU3LTEzLjg5Ni0xMy43NjktMTMuODk2LTEzLjc2OS0zMy40MXYtMzYzLjA3OHEwLTE5LjUxNCAxMy45NDktMzMuNDEgMTMuOTQ5LTEzLjg5NiAzMy41MzctMTMuODk2IDE5LjU4OSAwIDMzLjM1NyAxMy44OTYgMTMuNzY5IDEzLjg5NiAxMy43NjkgMzMuNDF2MzYzLjA3OHEwIDE5LjUxNC0xMy45NDkgMzMuNDEtMTMuOTQ5IDEzLjg5Ni0zMy41MzcgMTMuODk2WiIvPjwvc3ZnPg==';
 
@@ -20,20 +28,3 @@ const ErrorMessage = props => {
         />
     );
 };
-
-ErrorMessage.propTypes = {
-    /** The content of the message box */
-    children: node,
-    /** Any extra class names to the wrapping DOM node */
-    className: string,
-    /** The icon to show. Has a default value, but can be overridden */
-    icon: node,
-    /** An optional title for the message */
-    title: node,
-    /** When false, role is not set to alert, avoids message from being read up immediately after page load. Default value is true. */
-    alert: bool,
-    /** 'nb', 'nn', or 'en' */
-    locale: oneOf(['en', 'nb', 'nn']),
-};
-
-export default ErrorMessage;
diff --git a/packages/ffe-message-box-react/src/InfoMessage.js b/packages/ffe-message-box-react/src/InfoMessage.tsx
similarity index 64%
rename from packages/ffe-message-box-react/src/InfoMessage.js
rename to packages/ffe-message-box-react/src/InfoMessage.tsx
index d17c92cf03..ef4746ca68 100644
--- a/packages/ffe-message-box-react/src/InfoMessage.js
+++ b/packages/ffe-message-box-react/src/InfoMessage.tsx
@@ -1,10 +1,17 @@
 import React from 'react';
-import { node, oneOf, string } from 'prop-types';
 import { Icon } from '@sb1/ffe-icons-react';
-import BaseMessage from './BaseMessage';
-import texts from './texts';
+import { BaseMessage, BaseMessageProps } from './BaseMessage';
+import { texts } from './texts';
 
-const InfoMessage = ({ locale = 'nb', ...rest }) => {
+export interface InfoMessageProps
+    extends Omit<BaseMessageProps, 'type' | 'icon'> {
+    locale?: 'nb' | 'nn' | 'en';
+}
+
+export const InfoMessage: React.FC<InfoMessageProps> = ({
+    locale = 'nb',
+    ...rest
+}) => {
     const infoIcon =
         'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iNDgiIHZpZXdCb3g9IjAgLTk2MCA5NjAgOTYwIiB3aWR0aD0iNDgiPjxwYXRoIGQ9Ik00NzkuODgxLTY5NC42MTVxLTI2LjE4OCAwLTQ0LjM4MS0xOC4zMTEtMTguMTkyLTE4LjMxMi0xOC4xOTItNDQuNXQxOC4zMTItNDQuMzhxMTguMzExLTE4LjE5MyA0NC40OTktMTguMTkzIDI2LjE4OCAwIDQ0LjM4MSAxOC4zMTIgMTguMTkyIDE4LjMxMSAxOC4xOTIgNDQuNDk5IDAgMjYuMTg5LTE4LjMxMiA0NC4zODEtMTguMzExIDE4LjE5Mi00NC40OTkgMTguMTkyWm0uMDI0IDU1NC42MTRxLTE3LjgyOCAwLTMwLjIxMi0xMi40NTItMTIuMzg1LTEyLjQ1Mi0xMi4zODUtMzAuMjR2LTM1OS4yMjlxMC0xNy43ODkgMTIuNDgtMzAuMjQgMTIuNDc5LTEyLjQ1MiAzMC4zMDctMTIuNDUydDMwLjIxMiAxMi40NTJxMTIuMzg1IDEyLjQ1MSAxMi4zODUgMzAuMjR2MzU5LjIyOXEwIDE3Ljc4OC0xMi40OCAzMC4yNC0xMi40NzkgMTIuNDUyLTMwLjMwNyAxMi40NTJaIi8+PC9zdmc+';
     return (
@@ -16,18 +23,3 @@ const InfoMessage = ({ locale = 'nb', ...rest }) => {
         />
     );
 };
-
-InfoMessage.propTypes = {
-    /** The content of the message box */
-    children: node,
-    /** Any extra class names to the wrapping DOM node */
-    className: string,
-    /** The icon to show. Has a default value, but can be overridden */
-    icon: node,
-    /** An optional title for the message */
-    title: node,
-    /** 'nb', 'nn', or 'en' */
-    locale: oneOf(['en', 'nb', 'nn']),
-};
-
-export default InfoMessage;
diff --git a/packages/ffe-message-box-react/src/InfoMessageList.js b/packages/ffe-message-box-react/src/InfoMessageList.js
deleted file mode 100644
index c20253aacc..0000000000
--- a/packages/ffe-message-box-react/src/InfoMessageList.js
+++ /dev/null
@@ -1,25 +0,0 @@
-import React from 'react';
-import { string, node } from 'prop-types';
-
-export const InfoMessageListItem = props => (
-    <li>
-        {props.href && (
-            <a href={props.href} className="ffe-message-box__link">
-                {props.children}
-            </a>
-        )}
-        {!props.href && props.children}
-    </li>
-);
-InfoMessageListItem.propTypes = {
-    href: string,
-    children: string.isRequired,
-};
-
-export const InfoMessageList = props => (
-    <ul className="ffe-message-box__list">{props.children}</ul>
-);
-
-InfoMessageList.propTypes = {
-    children: node.isRequired,
-};
diff --git a/packages/ffe-message-box-react/src/InfoMessageList.tsx b/packages/ffe-message-box-react/src/InfoMessageList.tsx
new file mode 100644
index 0000000000..b8e21387ee
--- /dev/null
+++ b/packages/ffe-message-box-react/src/InfoMessageList.tsx
@@ -0,0 +1,29 @@
+import React from 'react';
+
+export interface InfoMessageListItemProps {
+    href: string;
+    children: NonNullable<React.ReactNode>;
+}
+
+export const InfoMessageListItem: React.FC<InfoMessageListItemProps> = ({
+    children,
+    href,
+}) => (
+    <li>
+        {href ? (
+            <a href={href} className="ffe-message-box__link">
+                {children}
+            </a>
+        ) : (
+            children
+        )}
+    </li>
+);
+
+export interface InfoMessageListProps {
+    children: NonNullable<React.ReactNode>;
+}
+
+export const InfoMessageList: React.FC<InfoMessageListProps> = ({
+    children,
+}) => <ul className="ffe-message-box__list">{children}</ul>;
diff --git a/packages/ffe-message-box-react/src/SuccessMessage.js b/packages/ffe-message-box-react/src/SuccessMessage.tsx
similarity index 60%
rename from packages/ffe-message-box-react/src/SuccessMessage.js
rename to packages/ffe-message-box-react/src/SuccessMessage.tsx
index e0b9dceb80..017387caac 100644
--- a/packages/ffe-message-box-react/src/SuccessMessage.js
+++ b/packages/ffe-message-box-react/src/SuccessMessage.tsx
@@ -1,10 +1,17 @@
 import React from 'react';
-import { node, oneOf, string } from 'prop-types';
 import { Icon } from '@sb1/ffe-icons-react';
-import BaseMessage from './BaseMessage';
-import texts from './texts';
+import { BaseMessage, BaseMessageProps } from './BaseMessage';
+import { texts } from './texts';
 
-const SuccessMessage = ({ locale = 'nb', ...rest }) => {
+export interface SuccessMessageProps
+    extends Omit<BaseMessageProps, 'type' | 'icon'> {
+    locale?: 'nb' | 'nn' | 'en';
+}
+
+export const SuccessMessage: React.FC<SuccessMessageProps> = ({
+    locale = 'nb',
+    ...rest
+}) => {
     const checkIcon =
         'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iNDgiIHZpZXdCb3g9IjAgLTk2MCA5NjAgOTYwIiB3aWR0aD0iNDgiPjxwYXRoIGQ9Im0zNzkuMTU0LTMyMy4xNTMgMzYzLTM2My4zODVxNi43NTktNi4zMDcgMTYuMTQ4LTYuNSA5LjM5LS4xOTIgMTYuNDY3IDYuNTUzIDYuNjkyIDcuMTI5IDYuNjkyIDE2LjQ5OSAwIDkuMzcxLTYuNjkyIDE2LjA2M0wzOTkuMzg1LTI3OC41MzlxLTguNjE2IDguNjE1LTIwLjIzMSA4LjYxNS0xMS42MTUgMC0yMC4yMzEtOC42MTVMMTg0LjYxNi00NTIuODQ2cS02LjY5Mi02Ljc1OS02LjU3Ny0xNi4xNDkuMTE2LTkuMzg5IDcuMjQ1LTE2LjQ2NiA3LjEyOS02LjY5MiAxNi4zMDctNi42OTIgOS4xNzggMCAxNi4yNTUgNi42OTJsMTYxLjMwOCAxNjIuMzA4WiIvPjwvc3ZnPg==';
 
@@ -17,18 +24,3 @@ const SuccessMessage = ({ locale = 'nb', ...rest }) => {
         />
     );
 };
-
-SuccessMessage.propTypes = {
-    /** The content of the message box */
-    children: node,
-    /** Any extra class names to the wrapping DOM node */
-    className: string,
-    /** The icon to show. Has a default value, but can be overridden */
-    icon: node,
-    /** An optional title for the message */
-    title: node,
-    /** 'nb', 'nn', or 'en' */
-    locale: oneOf(['en', 'nb', 'nn']),
-};
-
-export default SuccessMessage;
diff --git a/packages/ffe-message-box-react/src/TipsMessage.js b/packages/ffe-message-box-react/src/TipsMessage.tsx
similarity index 70%
rename from packages/ffe-message-box-react/src/TipsMessage.js
rename to packages/ffe-message-box-react/src/TipsMessage.tsx
index 734fedcfd4..865700afc8 100644
--- a/packages/ffe-message-box-react/src/TipsMessage.js
+++ b/packages/ffe-message-box-react/src/TipsMessage.tsx
@@ -1,12 +1,17 @@
 import React from 'react';
-import { node, oneOf, string } from 'prop-types';
 import { Icon } from '@sb1/ffe-icons-react';
-import BaseMessage from './BaseMessage';
-import texts from './texts';
+import { BaseMessage, BaseMessageProps } from './BaseMessage';
+import { texts } from './texts';
 
-const TipsMessage = props => {
-    const { locale = 'nb', ...rest } = props;
+export interface TipsMessageProps
+    extends Omit<BaseMessageProps, 'type' | 'icon'> {
+    locale?: 'nb' | 'nn' | 'en';
+}
 
+export const TipsMessage: React.FC<TipsMessageProps> = ({
+    locale = 'nb',
+    ...rest
+}) => {
     const lightbulbIcon =
         'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iNDgiIHZpZXdCb3g9IjAgLTk2MCA5NjAgOTYwIiB3aWR0aD0iNDgiPjxwYXRoIGQ9Ik00ODAtOTYuOTI0cS0zMC45MjMgMC01My4wNzctMjEtMjIuMTUzLTIxLTIzLjY5Mi01MS45MjNoMTUzLjUzOHEtMS41MzkgMzAuOTIzLTIzLjY5MiA1MS45MjMtMjIuMTU0IDIxLTUzLjA3NyAyMVpNMzUxLjA3Ny0yNDEuNDYzcS05LjY2MyAwLTE2LjE3Ny02LjU2Ny02LjUxNS02LjU2Ni02LjUxNS0xNi4zMDd0Ni41MTUtMTYuMTI1cTYuNTE0LTYuMzg0IDE2LjE3Ny02LjM4NGgyNTcuODQ2cTkuNjYzIDAgMTYuMTc3IDYuNTY2IDYuNTE1IDYuNTY3IDYuNTE1IDE2LjMwOCAwIDkuNzQtNi41MTUgMTYuMTI1LTYuNTE0IDYuMzg0LTE2LjE3NyA2LjM4NEgzNTEuMDc3Wm0tMTkuOTk5LTExNnEtNjAuNjE1LTQwLjY5Mi05NS44NDYtMTAwLjM4NHQtMzUuMjMxLTEzNC41MzdxMC0xMTQuNjkyIDgyLjY1NC0xOTcuMzQ1UTM2NS4zMDgtODcyLjM4MyA0ODAtODcyLjM4M3QxOTcuMzQ1IDgyLjY1NHE4Mi42NTQgODIuNjUzIDgyLjY1NCAxOTcuMzQ1IDAgNzQuODQ1LTM0LjkyMyAxMzQuNTM3LTM0LjkyMyA1OS42OTItOTYuMTU0IDEwMC4zODRIMzMxLjA3OFptMTYuMjMtNDUuMzgzaDI2NS43NzFxNDcuNDU5LTMyIDc0LjQ5OC04Mi4wMjkgMjcuMDM4LTUwLjAyOSAyNy4wMzgtMTA3LjUwOSAwLTk3LjA3Ny02OC43NjktMTY1Ljg0NlQ0ODAtODI2Ljk5OXEtOTcuMDc3IDAtMTY1Ljg0NiA2OC43NjlUMjQ1LjM4NS01OTIuNHEwIDU3LjYwNSAyNy4wMzggMTA3LjU3OSAyNy4wMzkgNDkuOTc1IDc0Ljg4NSA4MS45NzVabTEzMi42OTIgMFoiLz48L3N2Zz4=';
     return (
@@ -18,18 +23,3 @@ const TipsMessage = props => {
         />
     );
 };
-
-TipsMessage.propTypes = {
-    /** The content of the message box */
-    children: node,
-    /** Any extra class names to the wrapping DOM node */
-    className: string,
-    /** The icon to show. Has a default value, but can be overridden */
-    icon: node,
-    /** An optional title for the message */
-    title: node,
-    /** 'nb', 'nn', or 'en' */
-    locale: oneOf(['en', 'nb', 'nn']),
-};
-
-export default TipsMessage;
diff --git a/packages/ffe-message-box-react/src/index.d.ts b/packages/ffe-message-box-react/src/index.d.ts
deleted file mode 100644
index 039deea258..0000000000
--- a/packages/ffe-message-box-react/src/index.d.ts
+++ /dev/null
@@ -1,38 +0,0 @@
-import * as React from 'react';
-
-export interface MessageBoxProps
-    extends Omit<React.ComponentProps<'div'>, 'title' | 'content'> {
-    children?: React.ReactNode;
-    className?: string;
-    icon?: React.ReactNode;
-    title?: React.ReactNode;
-    titleElement?: string;
-    onColoredBg?: boolean;
-    locale?: 'nb' | 'nn' | 'en';
-}
-
-export interface ErrorMessageBoxProps extends MessageBoxProps {
-    alert?: boolean;
-}
-
-export interface InfoMessageListItemProps {
-    children: string;
-    href?: string;
-}
-
-export interface InfoMessageListProps {
-    children: React.ReactNode;
-}
-
-declare class SuccessMessage extends React.Component<MessageBoxProps, any> {}
-declare class ErrorMessage extends React.Component<ErrorMessageBoxProps, any> {}
-declare class InfoMessage extends React.Component<MessageBoxProps, any> {}
-declare class TipsMessage extends React.Component<MessageBoxProps, any> {}
-declare class InfoMessageList extends React.Component<
-    InfoMessageListProps,
-    any
-> {}
-declare class InfoMessageListItem extends React.Component<
-    InfoMessageListItemProps,
-    any
-> {}
diff --git a/packages/ffe-message-box-react/src/index.js b/packages/ffe-message-box-react/src/index.js
deleted file mode 100644
index 1f8d26110d..0000000000
--- a/packages/ffe-message-box-react/src/index.js
+++ /dev/null
@@ -1,14 +0,0 @@
-import SuccessMessage from './SuccessMessage';
-import ErrorMessage from './ErrorMessage';
-import InfoMessage from './InfoMessage';
-import TipsMessage from './TipsMessage';
-import { InfoMessageList, InfoMessageListItem } from './InfoMessageList';
-
-export {
-    SuccessMessage,
-    ErrorMessage,
-    InfoMessage,
-    TipsMessage,
-    InfoMessageList,
-    InfoMessageListItem,
-};
diff --git a/packages/ffe-message-box-react/src/index.ts b/packages/ffe-message-box-react/src/index.ts
new file mode 100644
index 0000000000..1f135e22d6
--- /dev/null
+++ b/packages/ffe-message-box-react/src/index.ts
@@ -0,0 +1,10 @@
+export { SuccessMessage, SuccessMessageProps } from './SuccessMessage';
+export { ErrorMessage, ErrorMessageProps } from './ErrorMessage';
+export { InfoMessage, InfoMessageProps } from './InfoMessage';
+export { TipsMessage, TipsMessageProps } from './TipsMessage';
+export {
+    InfoMessageList,
+    InfoMessageListProps,
+    InfoMessageListItem,
+    InfoMessageListItemProps,
+} from './InfoMessageList';
diff --git a/packages/ffe-message-box-react/src/texts.js b/packages/ffe-message-box-react/src/texts.ts
similarity index 90%
rename from packages/ffe-message-box-react/src/texts.js
rename to packages/ffe-message-box-react/src/texts.ts
index f61c96eb91..14321a2c1d 100644
--- a/packages/ffe-message-box-react/src/texts.js
+++ b/packages/ffe-message-box-react/src/texts.ts
@@ -11,7 +11,7 @@ const nb = {
     tip: {
         ariaLabel: 'Tipsmelding',
     },
-};
+} as const;
 const nn = {
     error: {
         ariaLabel: 'Feilmelding',
@@ -25,7 +25,7 @@ const nn = {
     tip: {
         ariaLabel: 'Tipsmelding',
     },
-};
+} as const;
 const en = {
     error: {
         ariaLabel: 'Error message',
@@ -39,6 +39,6 @@ const en = {
     tip: {
         ariaLabel: 'Tip message',
     },
-};
+} as const;
 
-export default { nb, nn, en };
+export const texts = { nb, nn, en };
diff --git a/packages/ffe-message-box-react/tsconfig.cjs.json b/packages/ffe-message-box-react/tsconfig.cjs.json
new file mode 100644
index 0000000000..6579fd2246
--- /dev/null
+++ b/packages/ffe-message-box-react/tsconfig.cjs.json
@@ -0,0 +1,9 @@
+{
+    "extends": "../../tsconfig.json",
+    "compilerOptions": {
+        "outDir": "./lib",
+        "module": "commonjs"
+    },
+    "include": ["src/**/*"],
+    "exclude": ["node_modules", "src/**/*.spec.ts*"]
+}
diff --git a/packages/ffe-message-box-react/tsconfig.esm.json b/packages/ffe-message-box-react/tsconfig.esm.json
new file mode 100644
index 0000000000..8e577796bf
--- /dev/null
+++ b/packages/ffe-message-box-react/tsconfig.esm.json
@@ -0,0 +1,9 @@
+{
+    "extends": "../../tsconfig.json",
+    "compilerOptions": {
+        "outDir": "./es",
+        "module": "esnext"
+    },
+    "include": ["src/**/*"],
+    "exclude": ["node_modules", "src/**/*.spec.ts*"]
+}
diff --git a/packages/ffe-message-box-react/tsconfig.types.json b/packages/ffe-message-box-react/tsconfig.types.json
new file mode 100644
index 0000000000..3499c0be03
--- /dev/null
+++ b/packages/ffe-message-box-react/tsconfig.types.json
@@ -0,0 +1,10 @@
+{
+    "extends": "../../tsconfig.json",
+    "compilerOptions": {
+        "outDir": "./types",
+        "declaration": true,
+        "emitDeclarationOnly": true
+    },
+    "include": ["src/**/*"],
+    "exclude": ["node_modules", "src/**/*.spec.ts*"]
+}