From 24e03d32d88a66c1efa79c12bef15b1e00d8720a Mon Sep 17 00:00:00 2001
From: Brett Dorrans <hello@lapidist.net>
Date: Sat, 1 Oct 2022 11:57:21 +0100
Subject: [PATCH] Feat/improvepanel (#1226)

* feat: add tag prop to Panel

* feat: add buttons prop to Panel

* feat: add dismissable prop to Panel

* feat: give Panel better status styles

* test: improve coverage of Panel dismissable

* feat: refactor a bit

* test: improve coverage
---
 src/components/button/Button.spec.tsx         |    6 +-
 .../button/__snapshots__/Button.spec.tsx.snap |  107 +-
 src/components/button/styles.ts               |    4 +-
 src/components/index.ts                       |    1 -
 src/components/panel/Panel.spec.tsx           |   58 +-
 src/components/panel/Panel.stories.tsx        |  149 ++-
 .../panel/__snapshots__/Panel.spec.tsx.snap   | 1159 ++++++++++++++++-
 .../panel-actions/PanelActions.spec.tsx       |   59 +
 .../__snapshots__/PanelActions.spec.tsx.snap  |  601 +++++++++
 .../panel/components/panel-actions/index.tsx  |   26 +
 .../panel/components/panel-actions/styles.ts  |   11 +
 .../components/panel-body/PanelBody.spec.tsx  |   49 +
 .../__snapshots__/PanelBody.spec.tsx.snap     |   94 ++
 .../panel/components/panel-body/index.tsx     |   37 +
 .../panel/components/panel-body/styles.ts     |   27 +
 .../panel-buttons/PanelButtons.spec.tsx       |   35 +
 .../__snapshots__/PanelButtons.spec.tsx.snap  |  201 +++
 .../panel/components/panel-buttons/index.tsx  |   23 +
 .../panel/components/panel-buttons/styles.ts  |    8 +
 .../panel-icons/PanelIcons.spec.tsx           |   41 +
 .../__snapshots__/PanelIcons.spec.tsx.snap    |  239 ++++
 .../panel/components/panel-icons/index.tsx    |   55 +
 .../panel/components/panel-icons/styles.ts    |   40 +
 src/components/panel/index.tsx                |  105 +-
 src/components/panel/styles.ts                |   60 +-
 .../status-message/StatusMessage.spec.tsx     |   54 -
 .../status-message/StatusMessage.stories.tsx  |   73 --
 .../__snapshots__/StatusMessage.spec.tsx.snap |  416 ------
 src/components/status-message/index.tsx       |  101 --
 src/components/status-message/styles.ts       |   69 -
 src/components/text/Text.spec.tsx             |    2 +-
 .../text/__snapshots__/Text.spec.tsx.snap     |    8 +-
 .../toggle/__snapshots__/Toggle.spec.tsx.snap |   88 +-
 33 files changed, 3075 insertions(+), 931 deletions(-)
 create mode 100644 src/components/panel/components/panel-actions/PanelActions.spec.tsx
 create mode 100644 src/components/panel/components/panel-actions/__snapshots__/PanelActions.spec.tsx.snap
 create mode 100644 src/components/panel/components/panel-actions/index.tsx
 create mode 100644 src/components/panel/components/panel-actions/styles.ts
 create mode 100644 src/components/panel/components/panel-body/PanelBody.spec.tsx
 create mode 100644 src/components/panel/components/panel-body/__snapshots__/PanelBody.spec.tsx.snap
 create mode 100644 src/components/panel/components/panel-body/index.tsx
 create mode 100644 src/components/panel/components/panel-body/styles.ts
 create mode 100644 src/components/panel/components/panel-buttons/PanelButtons.spec.tsx
 create mode 100644 src/components/panel/components/panel-buttons/__snapshots__/PanelButtons.spec.tsx.snap
 create mode 100644 src/components/panel/components/panel-buttons/index.tsx
 create mode 100644 src/components/panel/components/panel-buttons/styles.ts
 create mode 100644 src/components/panel/components/panel-icons/PanelIcons.spec.tsx
 create mode 100644 src/components/panel/components/panel-icons/__snapshots__/PanelIcons.spec.tsx.snap
 create mode 100644 src/components/panel/components/panel-icons/index.tsx
 create mode 100644 src/components/panel/components/panel-icons/styles.ts
 delete mode 100644 src/components/status-message/StatusMessage.spec.tsx
 delete mode 100644 src/components/status-message/StatusMessage.stories.tsx
 delete mode 100644 src/components/status-message/__snapshots__/StatusMessage.spec.tsx.snap
 delete mode 100644 src/components/status-message/index.tsx
 delete mode 100644 src/components/status-message/styles.ts

diff --git a/src/components/button/Button.spec.tsx b/src/components/button/Button.spec.tsx
index 3c28da08..36e174d8 100644
--- a/src/components/button/Button.spec.tsx
+++ b/src/components/button/Button.spec.tsx
@@ -21,7 +21,7 @@ test('it works', () => {
 
 test('it works with size small', () => {
     const { container } = setup(
-        <Button type="button" kind="secondary" sizes="small">
+        <Button type="button" kind="secondary" variant="small">
             Hello world
         </Button>
     );
@@ -30,7 +30,7 @@ test('it works with size small', () => {
 
 test('it works with size medium', () => {
     const { container } = setup(
-        <Button type="button" kind="secondary" sizes="small">
+        <Button type="button" kind="secondary" variant="medium">
             Hello world
         </Button>
     );
@@ -39,7 +39,7 @@ test('it works with size medium', () => {
 
 test('it works with size large', () => {
     const { container } = setup(
-        <Button type="button" kind="secondary" sizes="small">
+        <Button type="button" kind="secondary" variant="large">
             Hello world
         </Button>
     );
diff --git a/src/components/button/__snapshots__/Button.spec.tsx.snap b/src/components/button/__snapshots__/Button.spec.tsx.snap
index 39a3b594..8f67acd8 100644
--- a/src/components/button/__snapshots__/Button.spec.tsx.snap
+++ b/src/components/button/__snapshots__/Button.spec.tsx.snap
@@ -11,8 +11,8 @@ exports[`it works 1`] = `
   border-radius: 0.3rem;
   border-width: 2px;
   box-shadow: 0 2px 3px rgba(0,0,0,0.1);
-  padding-left: 1rem;
-  padding-right: 1rem;
+  padding-left: 0.75rem;
+  padding-right: 0.75rem;
   padding-top: 0.5rem;
   padding-bottom: 0.5rem;
   background-color: #17a3a5;
@@ -49,8 +49,8 @@ exports[`it works 1`] = `
   border-radius: 0.3rem;
   border-width: 2px;
   box-shadow: 0 2px 3px rgba(0,0,0,0.1);
-  padding-left: 1rem;
-  padding-right: 1rem;
+  padding-left: 0.75rem;
+  padding-right: 0.75rem;
   padding-top: 0.5rem;
   padding-bottom: 0.5rem;
   background-color: #17a3a5;
@@ -110,11 +110,11 @@ exports[`it works with anchor 1`] = `
   border-radius: 0.3rem;
   border-width: 2px;
   box-shadow: 0 2px 3px rgba(0,0,0,0.1);
-  padding-left: 1rem;
-  padding-right: 1rem;
+  padding-left: 0.75rem;
+  padding-right: 0.75rem;
   padding-top: 0.5rem;
   padding-bottom: 0.5rem;
-  background-color: transparent;
+  background-color: white;
   color: #17a3a5;
   border-color: #d4d4d4;
 }
@@ -148,11 +148,11 @@ exports[`it works with anchor 1`] = `
   border-radius: 0.3rem;
   border-width: 2px;
   box-shadow: 0 2px 3px rgba(0,0,0,0.1);
-  padding-left: 1rem;
-  padding-right: 1rem;
+  padding-left: 0.75rem;
+  padding-right: 0.75rem;
   padding-top: 0.5rem;
   padding-bottom: 0.5rem;
-  background-color: transparent;
+  background-color: white;
   color: #17a3a5;
   border-color: #d4d4d4;
 }
@@ -210,11 +210,11 @@ exports[`it works with icon 1`] = `
   border-radius: 0.3rem;
   border-width: 2px;
   box-shadow: 0 2px 3px rgba(0,0,0,0.1);
-  padding-left: 1rem;
-  padding-right: 1rem;
+  padding-left: 0.75rem;
+  padding-right: 0.75rem;
   padding-top: 0.5rem;
   padding-bottom: 0.5rem;
-  background-color: transparent;
+  background-color: white;
   color: #17a3a5;
   border-color: #d4d4d4;
 }
@@ -248,11 +248,11 @@ exports[`it works with icon 1`] = `
   border-radius: 0.3rem;
   border-width: 2px;
   box-shadow: 0 2px 3px rgba(0,0,0,0.1);
-  padding-left: 1rem;
-  padding-right: 1rem;
+  padding-left: 0.75rem;
+  padding-right: 0.75rem;
   padding-top: 0.5rem;
   padding-bottom: 0.5rem;
-  background-color: transparent;
+  background-color: white;
   color: #17a3a5;
   border-color: #d4d4d4;
 }
@@ -325,11 +325,11 @@ exports[`it works with loading 1`] = `
   border-radius: 0.3rem;
   border-width: 2px;
   box-shadow: 0 2px 3px rgba(0,0,0,0.1);
-  padding-left: 1rem;
-  padding-right: 1rem;
+  padding-left: 0.75rem;
+  padding-right: 0.75rem;
   padding-top: 0.5rem;
   padding-bottom: 0.5rem;
-  background-color: transparent;
+  background-color: white;
   color: #17a3a5;
   border-color: #d4d4d4;
 }
@@ -363,11 +363,11 @@ exports[`it works with loading 1`] = `
   border-radius: 0.3rem;
   border-width: 2px;
   box-shadow: 0 2px 3px rgba(0,0,0,0.1);
-  padding-left: 1rem;
-  padding-right: 1rem;
+  padding-left: 0.75rem;
+  padding-right: 0.75rem;
   padding-top: 0.5rem;
   padding-bottom: 0.5rem;
-  background-color: transparent;
+  background-color: white;
   color: #17a3a5;
   border-color: #d4d4d4;
 }
@@ -502,11 +502,11 @@ exports[`it works with size large 1`] = `
   border-radius: 0.3rem;
   border-width: 2px;
   box-shadow: 0 2px 3px rgba(0,0,0,0.1);
-  padding-left: 1rem;
-  padding-right: 1rem;
+  padding-left: 0.75rem;
+  padding-right: 0.75rem;
   padding-top: 0.5rem;
   padding-bottom: 0.5rem;
-  background-color: transparent;
+  background-color: white;
   color: #17a3a5;
   border-color: #d4d4d4;
 }
@@ -540,11 +540,11 @@ exports[`it works with size large 1`] = `
   border-radius: 0.3rem;
   border-width: 2px;
   box-shadow: 0 2px 3px rgba(0,0,0,0.1);
-  padding-left: 1rem;
-  padding-right: 1rem;
+  padding-left: 0.75rem;
+  padding-right: 0.75rem;
   padding-top: 0.5rem;
   padding-bottom: 0.5rem;
-  background-color: transparent;
+  background-color: white;
   color: #17a3a5;
   border-color: #d4d4d4;
 }
@@ -580,7 +580,6 @@ exports[`it works with size large 1`] = `
 
 <button
   class="c0 sc-bcXHqe c1"
-  sizes="small"
   type="button"
 >
   <div
@@ -597,16 +596,16 @@ exports[`it works with size medium 1`] = `
   text-align: center;
   display: inline-block;
   position: relative;
-  font-size: 1rem;
+  font-size: 0.875rem;
   font-weight: 500;
   border-radius: 0.3rem;
   border-width: 2px;
   box-shadow: 0 2px 3px rgba(0,0,0,0.1);
-  padding-left: 1rem;
-  padding-right: 1rem;
-  padding-top: 0.5rem;
-  padding-bottom: 0.5rem;
-  background-color: transparent;
+  padding-left: 0.75rem;
+  padding-right: 0.75rem;
+  padding-top: 0.25rem;
+  padding-bottom: 0.25rem;
+  background-color: white;
   color: #17a3a5;
   border-color: #d4d4d4;
 }
@@ -633,18 +632,18 @@ exports[`it works with size medium 1`] = `
   text-align: center;
   display: inline-block;
   position: relative;
-  font-size: 1rem;
+  font-size: 0.875rem;
   font-weight: 500;
   font-family: Montserrat,sans-serif;
   line-height: 2;
   border-radius: 0.3rem;
   border-width: 2px;
   box-shadow: 0 2px 3px rgba(0,0,0,0.1);
-  padding-left: 1rem;
-  padding-right: 1rem;
-  padding-top: 0.5rem;
-  padding-bottom: 0.5rem;
-  background-color: transparent;
+  padding-left: 0.75rem;
+  padding-right: 0.75rem;
+  padding-top: 0.25rem;
+  padding-bottom: 0.25rem;
+  background-color: white;
   color: #17a3a5;
   border-color: #d4d4d4;
 }
@@ -680,7 +679,6 @@ exports[`it works with size medium 1`] = `
 
 <button
   class="c0 sc-bcXHqe c1"
-  sizes="small"
   type="button"
 >
   <div
@@ -697,16 +695,16 @@ exports[`it works with size small 1`] = `
   text-align: center;
   display: inline-block;
   position: relative;
-  font-size: 1rem;
+  font-size: 0.75rem;
   font-weight: 500;
   border-radius: 0.3rem;
   border-width: 2px;
   box-shadow: 0 2px 3px rgba(0,0,0,0.1);
-  padding-left: 1rem;
-  padding-right: 1rem;
-  padding-top: 0.5rem;
-  padding-bottom: 0.5rem;
-  background-color: transparent;
+  padding-left: 0.75rem;
+  padding-right: 0.75rem;
+  padding-top: 0;
+  padding-bottom: 0;
+  background-color: white;
   color: #17a3a5;
   border-color: #d4d4d4;
 }
@@ -733,18 +731,18 @@ exports[`it works with size small 1`] = `
   text-align: center;
   display: inline-block;
   position: relative;
-  font-size: 1rem;
+  font-size: 0.75rem;
   font-weight: 500;
   font-family: Montserrat,sans-serif;
   line-height: 2;
   border-radius: 0.3rem;
   border-width: 2px;
   box-shadow: 0 2px 3px rgba(0,0,0,0.1);
-  padding-left: 1rem;
-  padding-right: 1rem;
-  padding-top: 0.5rem;
-  padding-bottom: 0.5rem;
-  background-color: transparent;
+  padding-left: 0.75rem;
+  padding-right: 0.75rem;
+  padding-top: 0;
+  padding-bottom: 0;
+  background-color: white;
   color: #17a3a5;
   border-color: #d4d4d4;
 }
@@ -780,7 +778,6 @@ exports[`it works with size small 1`] = `
 
 <button
   class="c0 sc-bcXHqe c1"
-  sizes="small"
   type="button"
 >
   <div
diff --git a/src/components/button/styles.ts b/src/components/button/styles.ts
index ad560894..62c9a6ec 100644
--- a/src/components/button/styles.ts
+++ b/src/components/button/styles.ts
@@ -73,7 +73,7 @@ const buttonColors = (dark: string, base: string, kind: string) => {
 
     return {
         borderColor: borderColor(),
-        backgroundColor: isPrimary ? base : 'transparent',
+        backgroundColor: isPrimary ? base : lightBase,
         textColor: textColor(),
         hoverBackgroundColor: isPrimary ? dark : lightestGrey,
         hoverTextColor: hoverTextColor(),
@@ -103,7 +103,7 @@ const buttonBaseStyles: Styles = {
     position: 'relative',
     borderWidth: '1',
     textAlign: 'center',
-    paddingX: '4',
+    paddingX: '3',
     borderRadius: '2',
     borderStyle: 'solid',
     fontWeight: '500'
diff --git a/src/components/index.ts b/src/components/index.ts
index 467dc7d8..7226c59c 100644
--- a/src/components/index.ts
+++ b/src/components/index.ts
@@ -9,7 +9,6 @@ export * from './list';
 export * from './logo';
 export * from './panel';
 export * from './spinner';
-export * from './status-message';
 export * from './tag';
 export * from './text';
 export * from './theme-provider';
diff --git a/src/components/panel/Panel.spec.tsx b/src/components/panel/Panel.spec.tsx
index 79442246..472303c0 100644
--- a/src/components/panel/Panel.spec.tsx
+++ b/src/components/panel/Panel.spec.tsx
@@ -1,10 +1,10 @@
 import * as React from 'react';
-import { render } from '@testing-library/react';
+import { render, fireEvent } from '@testing-library/react';
 import '@testing-library/jest-dom';
 import 'jest-styled-components';
 
 import { ThemeProvider } from '../theme-provider';
-import { Panel } from './index';
+import { Panel, PanelStatusType } from './index';
 import { ElevationHeight } from '../elevated';
 
 const setup = (panel: React.ReactElement) =>
@@ -25,11 +25,65 @@ test('it works with heading', () => {
     expect(container.querySelectorAll('h2').length).toBe(1);
 });
 
+test('it works with tag', () => {
+    const { container, getByText } = setup(
+        <Panel tag={{ title: 'v1.0.0', props: { kind: 'primary' } }}>
+            body
+        </Panel>
+    );
+    expect(container.firstChild).toMatchSnapshot();
+    expect(getByText('v1.0.0')).toBeTruthy();
+    expect(getByText('body')).toBeTruthy();
+});
+
+test('it works with button', () => {
+    const { container, getByText, getAllByRole } = setup(
+        <Panel buttons={[{ title: 'Edit', props: { kind: 'primary' } }]}>
+            body
+        </Panel>
+    );
+    expect(container.firstChild).toMatchSnapshot();
+    expect(getByText('Edit')).toBeTruthy();
+    expect(getByText('body')).toBeTruthy();
+    expect(getAllByRole('button').length).toBe(1);
+});
+
+test('it works with dismissable', () => {
+    const onDismissMock = jest.fn();
+    const { container, getByText, getAllByRole } = setup(
+        <Panel dismissable onDismiss={onDismissMock}>
+            body
+        </Panel>
+    );
+    expect(container.firstChild).toMatchSnapshot();
+    expect(getByText('body')).toBeTruthy();
+    expect(getAllByRole('button').length).toBe(1);
+    fireEvent.click(getAllByRole('button')[0]);
+    expect(onDismissMock).toHaveBeenCalledTimes(1);
+});
+
 test('it works loading', () => {
     const { container } = setup(<Panel loading>Hello world</Panel>);
     expect(container.firstChild).toMatchSnapshot();
 });
 
+test('it works with image', () => {
+    const { container, getByAltText } = setup(
+        <Panel image={{ src: '', alt: 'test' }}>Hello world</Panel>
+    );
+    expect(container.firstChild).toMatchSnapshot();
+    expect(getByAltText('test')).toBeTruthy();
+});
+
+test('it works with status', () => {
+    const statuses: PanelStatusType[] = ['none', 'info', 'warning', 'error'];
+
+    statuses.forEach((status) => {
+        const { container } = setup(<Panel status={status}>Hello world</Panel>);
+        expect(container.firstChild).toMatchSnapshot();
+    });
+});
+
 test('it works with elevation', () => {
     const elevations: ElevationHeight[] = ['1', '2', '3', '4'];
 
diff --git a/src/components/panel/Panel.stories.tsx b/src/components/panel/Panel.stories.tsx
index 1949ed13..230ff4bb 100644
--- a/src/components/panel/Panel.stories.tsx
+++ b/src/components/panel/Panel.stories.tsx
@@ -1,7 +1,6 @@
 import * as React from 'react';
 import { ThemeProvider } from '../theme-provider';
 import { Panel } from './index';
-import { Text } from '../text';
 
 export default {
     title: 'Components/Panel',
@@ -11,16 +10,97 @@ export default {
 
 const templateStyles = {};
 
+const headingProp = {
+    title: 'Hello world!',
+    props: {
+        as: 'h2',
+        size: '4'
+    }
+};
+const tagProp = {
+    title: 'v1.0.0',
+    props: {
+        kind: 'primary'
+    }
+};
+const imageProp = {
+    src: 'https://placekitten.com/800/450',
+    alt: 'A pretty cat'
+};
+const websiteButtonsProp = [
+    {
+        title: 'GitHub',
+        props: {
+            as: 'a',
+            kind: 'primary',
+            variant: 'small',
+            href: 'https://google.com',
+            target: '_blank',
+            rel: 'noopener'
+        }
+    },
+    {
+        title: 'npm',
+        props: {
+            as: 'a',
+            kind: 'secondary',
+            variant: 'small',
+            href: 'https://google.com',
+            target: '_blank',
+            rel: 'noopener'
+        }
+    },
+    {
+        title: 'Docs',
+        props: {
+            as: 'a',
+            kind: 'secondary',
+            variant: 'small',
+            href: 'https://google.com',
+            target: '_blank',
+            rel: 'noopener'
+        }
+    }
+];
+const buttonsProp = [
+    {
+        title: 'Primary',
+        props: {
+            kind: 'primary',
+            variant: 'medium'
+        }
+    },
+    {
+        title: 'Secondary',
+        props: {
+            kind: 'secondary',
+            variant: 'medium'
+        }
+    },
+    {
+        title: 'Tertiary',
+        props: {
+            kind: 'tertiary',
+            variant: 'medium'
+        }
+    },
+    {
+        title: 'Dangerous',
+        props: {
+            kind: 'danger',
+            variant: 'medium'
+        }
+    }
+];
+
 const DefaultTemplate = (args) => (
     <Panel {...args}>
-        <Text>
-            Nunc porttitor lectus ex, eu pharetra elit placerat non. Suspendisse
-            nec ultrices augue, et varius velit. Vestibulum ante ipsum primis in
-            faucibus orci luctus et ultrices posuere cubilia curae; Morbi
-            sollicitudin sed turpis et vulputate. Nam consequat porttitor
-            scelerisque. Nulla ultricies enim at eros accumsan interdum. Aenean
-            egestas enim mi, nec tincidunt libero gravida et.
-        </Text>
+        Nunc porttitor lectus ex, eu pharetra elit placerat non. Suspendisse nec
+        ultrices augue, et varius velit. Vestibulum ante ipsum primis in
+        faucibus orci luctus et ultrices posuere cubilia curae; Morbi
+        sollicitudin sed turpis et vulputate. Nam consequat porttitor
+        scelerisque. Nulla ultricies enim at eros accumsan interdum. Aenean
+        egestas enim mi, nec tincidunt libero gravida et.
     </Panel>
 );
 
@@ -31,13 +111,7 @@ Default.args = {
 
 export const WithHeading = DefaultTemplate.bind({});
 WithHeading.args = {
-    heading: {
-        title: 'Hello world!',
-        props: {
-            as: 'h2',
-            size: '4'
-        }
-    },
+    heading: headingProp,
     styles: templateStyles
 };
 
@@ -46,3 +120,46 @@ WithLoading.args = {
     loading: true,
     styles: templateStyles
 };
+
+export const WithTag = DefaultTemplate.bind({});
+WithTag.args = {
+    tag: tagProp,
+    styles: templateStyles
+};
+
+export const WithButtons = DefaultTemplate.bind({});
+WithButtons.args = {
+    buttons: buttonsProp,
+    styles: templateStyles
+};
+
+export const WithDismissable = DefaultTemplate.bind({});
+WithDismissable.args = {
+    dismissable: true,
+    styles: templateStyles
+};
+
+export const WithStatus = DefaultTemplate.bind({});
+WithStatus.args = {
+    dismissable: true,
+    status: 'error',
+    styles: templateStyles
+};
+
+export const Website = DefaultTemplate.bind({});
+Website.args = {
+    heading: headingProp,
+    tag: tagProp,
+    buttons: websiteButtonsProp
+};
+
+export const CompleteImplementation = DefaultTemplate.bind({});
+CompleteImplementation.args = {
+    dismissable: true,
+    status: 'success',
+    heading: headingProp,
+    tag: tagProp,
+    buttons: buttonsProp,
+    image: imageProp,
+    styles: templateStyles
+};
diff --git a/src/components/panel/__snapshots__/Panel.spec.tsx.snap b/src/components/panel/__snapshots__/Panel.spec.tsx.snap
index 0f8c5cc9..6a0871d1 100644
--- a/src/components/panel/__snapshots__/Panel.spec.tsx.snap
+++ b/src/components/panel/__snapshots__/Panel.spec.tsx.snap
@@ -2,30 +2,57 @@
 
 exports[`it works 1`] = `
 .c0 {
+  border-style: solid;
   border-radius: 0.3rem;
+  border-width: 2px;
   box-shadow: 0 2px 3px rgba(0,0,0,0.1);
   min-height: 8rem;
+  background-color: white;
+  border-color: transparent;
+}
+
+.c1 {
+  position: relative;
+}
+
+.c2 {
+  font-size: 1rem;
+  font-weight: 400;
+  font-family: Montserrat,sans-serif;
+  line-height: 2;
+  max-width: 91.666667%;
+  margin-top: 0.5rem;
+  margin-bottom: 0.5rem;
   padding-left: 1rem;
   padding-right: 1rem;
-  padding-top: 0.75rem;
-  padding-bottom: 0.75rem;
-  background-color: white;
+  padding-left: 1rem;
+  color: #292B3E;
 }
 
 <div
   class="c0"
 >
-  Hello world
+  <div
+    class="c1"
+  >
+    <p
+      class="c2"
+    >
+      Hello world
+    </p>
+  </div>
 </div>
 `;
 
 exports[`it works loading 1`] = `
 .c0 {
+  border-style: solid;
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
   border-radius: 0.3rem;
+  border-width: 2px;
   box-shadow: 0 2px 3px rgba(0,0,0,0.1);
   min-height: 8rem;
   -webkit-box-pack: center;
@@ -36,11 +63,9 @@ exports[`it works loading 1`] = `
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
-  padding-left: 1rem;
-  padding-right: 1rem;
-  padding-top: 0.75rem;
-  padding-bottom: 0.75rem;
+  padding-left: 0;
   background-color: white;
+  border-color: transparent;
 }
 
 .c1 {
@@ -121,111 +146,1139 @@ exports[`it works loading 1`] = `
 </div>
 `;
 
-exports[`it works with elevation 1`] = `
+exports[`it works with button 1`] = `
 .c0 {
+  border-style: solid;
   border-radius: 0.3rem;
+  border-width: 2px;
   box-shadow: 0 2px 3px rgba(0,0,0,0.1);
   min-height: 8rem;
+  background-color: white;
+  border-color: transparent;
+}
+
+.c1 {
+  position: relative;
+}
+
+.c2 {
+  font-size: 1rem;
+  font-weight: 400;
+  font-family: Montserrat,sans-serif;
+  line-height: 2;
+  max-width: 91.666667%;
+  margin-top: 0.5rem;
+  margin-bottom: 0.5rem;
   padding-left: 1rem;
   padding-right: 1rem;
-  padding-top: 0.75rem;
-  padding-bottom: 0.75rem;
-  background-color: white;
+  padding-left: 1rem;
+  color: #292B3E;
+}
+
+.c3 {
+  border-top-style: solid;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  border-top-width: 4px;
+  -webkit-align-items: flex-end;
+  -webkit-box-align: flex-end;
+  -ms-flex-align: flex-end;
+  align-items: flex-end;
+  margin-top: 0.5rem;
+  padding: 1rem;
+  border-top-color: #fafafa;
+}
+
+.c4 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+}
+
+.c5 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  width: 100%;
+  -webkit-box-pack: end;
+  -webkit-justify-content: end;
+  -ms-flex-pack: end;
+  justify-content: end;
+  gap: 0.5rem;
+}
+
+.c7 {
+  border-style: solid;
+  text-align: center;
+  display: inline-block;
+  position: relative;
+  font-size: 1rem;
+  font-weight: 500;
+  border-radius: 0.3rem;
+  border-width: 2px;
+  box-shadow: 0 2px 3px rgba(0,0,0,0.1);
+  padding-left: 0.75rem;
+  padding-right: 0.75rem;
+  padding-top: 0.5rem;
+  padding-bottom: 0.5rem;
+  background-color: #17a3a5;
+  color: white;
+  border-color: #17a3a5;
+}
+
+.c7:hover {
+  cursor: pointer;
+  background-color: #135f61;
+  color: white;
+}
+
+.c7:hover:disabled {
+  cursor: not-allowed;
+  background-color: #135f61;
+}
+
+.c7:disabled {
+  opacity: 0.7;
+  background-color: #135f61;
+  color: white;
+}
+
+.c6 {
+  border-style: solid;
+  text-align: center;
+  display: inline-block;
+  position: relative;
+  font-size: 1rem;
+  font-weight: 500;
+  font-family: Montserrat,sans-serif;
+  line-height: 2;
+  border-radius: 0.3rem;
+  border-width: 2px;
+  box-shadow: 0 2px 3px rgba(0,0,0,0.1);
+  padding-left: 0.75rem;
+  padding-right: 0.75rem;
+  padding-top: 0.5rem;
+  padding-bottom: 0.5rem;
+  background-color: #17a3a5;
+  color: white;
+  border-color: #17a3a5;
+}
+
+.c6:hover {
+  cursor: pointer;
+  background-color: #135f61;
+  color: white;
+}
+
+.c6:hover:disabled {
+  cursor: not-allowed;
+  background-color: #135f61;
+}
+
+.c6:disabled {
+  opacity: 0.7;
+  background-color: #135f61;
+  color: white;
+}
+
+.c8 {
+  opacity: 1;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
 }
 
 <div
   class="c0"
 >
-  Hello world
+  <div
+    class="c1"
+  >
+    <p
+      class="c2"
+    >
+      body
+    </p>
+  </div>
+  <div
+    class="c3"
+  >
+    <div
+      class="c4"
+    />
+    <div
+      class="c5"
+    >
+      <button
+        class="c6 sc-bcXHqe c7"
+      >
+        <div
+          class="c8"
+        >
+          Edit
+        </div>
+      </button>
+    </div>
+  </div>
 </div>
 `;
 
-exports[`it works with elevation 2`] = `
+exports[`it works with dismissable 1`] = `
 .c0 {
+  border-style: solid;
   border-radius: 0.3rem;
-  box-shadow: 0 2px 4px rgba(0,0,0,0.12),0 10px 13px rgba(0,0,0,0.02),0 -10px 13px rgba(0,0,0,0.02);
+  border-width: 2px;
+  box-shadow: 0 2px 3px rgba(0,0,0,0.1);
   min-height: 8rem;
+  background-color: white;
+  border-color: transparent;
+}
+
+.c1 {
+  position: relative;
+}
+
+.c2 {
+  font-size: 1rem;
+  font-weight: 400;
+  font-family: Montserrat,sans-serif;
+  line-height: 2;
+  max-width: 91.666667%;
+  margin-top: 0.5rem;
+  margin-bottom: 0.5rem;
   padding-left: 1rem;
   padding-right: 1rem;
-  padding-top: 0.75rem;
-  padding-bottom: 0.75rem;
+  padding-left: 1rem;
+  color: #292B3E;
+}
+
+.c4 {
+  border-style: solid;
+  text-align: center;
+  display: inline-block;
+  position: absolute;
+  top: 0;
+  right: 0;
+  font-size: 1rem;
+  font-weight: 500;
+  border-radius: 0.3rem;
+  border-width: 2px;
+  box-shadow: 0 2px 3px rgba(0,0,0,0.1);
+  margin-top: 1.5rem;
+  margin-right: 1.5rem;
+  padding-left: 0.75rem;
+  padding-right: 0.75rem;
+  padding-top: 0.5rem;
+  padding-bottom: 0.5rem;
+  background-color: white;
+  color: #73748b;
+  border-color: #fafafa;
+}
+
+.c4:hover {
+  cursor: pointer;
+  background-color: #fafafa;
+  color: #292B3E;
+}
+
+.c4:hover:disabled {
+  cursor: not-allowed;
+  background-color: #fafafa;
+}
+
+.c4:disabled {
+  opacity: 0.7;
+  background-color: #fafafa;
+  color: #292B3E;
+}
+
+.c3 {
+  border-style: solid;
+  text-align: center;
+  display: inline-block;
+  position: absolute;
+  top: 0;
+  right: 0;
+  font-size: 1rem;
+  font-weight: 500;
+  font-family: Montserrat,sans-serif;
+  line-height: 2;
+  border-radius: 0.3rem;
+  border-width: 2px;
+  box-shadow: 0 2px 3px rgba(0,0,0,0.1);
+  margin-top: 1.5rem;
+  margin-right: 1.5rem;
+  padding-left: 0.75rem;
+  padding-right: 0.75rem;
+  padding-top: 0.5rem;
+  padding-bottom: 0.5rem;
   background-color: white;
+  color: #73748b;
+  border-color: #fafafa;
+}
+
+.c3:hover {
+  cursor: pointer;
+  background-color: #fafafa;
+  color: #292B3E;
+}
+
+.c3:hover:disabled {
+  cursor: not-allowed;
+  background-color: #fafafa;
+}
+
+.c3:disabled {
+  opacity: 0.7;
+  background-color: #fafafa;
+  color: #292B3E;
+}
+
+.c5 {
+  opacity: 1;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
 }
 
 <div
   class="c0"
 >
-  Hello world
+  <div
+    class="c1"
+  >
+    <p
+      class="c2"
+    >
+      body
+    </p>
+  </div>
+  <button
+    class="c3 sc-bcXHqe c4"
+  >
+    <div
+      class="c5"
+    >
+      <svg
+        aria-hidden="true"
+        class="svg-inline--fa fa-xmark "
+        data-icon="xmark"
+        data-prefix="fas"
+        focusable="false"
+        role="img"
+        viewBox="0 0 320 512"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="M310.6 361.4c12.5 12.5 12.5 32.75 0 45.25C304.4 412.9 296.2 416 288 416s-16.38-3.125-22.62-9.375L160 301.3L54.63 406.6C48.38 412.9 40.19 416 32 416S15.63 412.9 9.375 406.6c-12.5-12.5-12.5-32.75 0-45.25l105.4-105.4L9.375 150.6c-12.5-12.5-12.5-32.75 0-45.25s32.75-12.5 45.25 0L160 210.8l105.4-105.4c12.5-12.5 32.75-12.5 45.25 0s12.5 32.75 0 45.25l-105.4 105.4L310.6 361.4z"
+          fill="currentColor"
+        />
+      </svg>
+    </div>
+  </button>
 </div>
 `;
 
-exports[`it works with elevation 3`] = `
+exports[`it works with elevation 1`] = `
 .c0 {
+  border-style: solid;
   border-radius: 0.3rem;
-  box-shadow: 0 2px 5px rgba(0,0,0,0.16),-10px 15px 15px rgba(0,0,0,0.03),10px 0px 15px rgba(0,0,0,0.03);
+  border-width: 2px;
+  box-shadow: 0 2px 3px rgba(0,0,0,0.1);
   min-height: 8rem;
+  background-color: white;
+  border-color: transparent;
+}
+
+.c1 {
+  position: relative;
+}
+
+.c2 {
+  font-size: 1rem;
+  font-weight: 400;
+  font-family: Montserrat,sans-serif;
+  line-height: 2;
+  max-width: 91.666667%;
+  margin-top: 0.5rem;
+  margin-bottom: 0.5rem;
   padding-left: 1rem;
   padding-right: 1rem;
-  padding-top: 0.75rem;
-  padding-bottom: 0.75rem;
-  background-color: white;
+  padding-left: 1rem;
+  color: #292B3E;
 }
 
 <div
   class="c0"
 >
-  Hello world
+  <div
+    class="c1"
+  >
+    <p
+      class="c2"
+    >
+      Hello world
+    </p>
+  </div>
 </div>
 `;
 
-exports[`it works with elevation 4`] = `
+exports[`it works with elevation 2`] = `
+.c1 {
+  position: relative;
+}
+
+.c2 {
+  font-size: 1rem;
+  font-weight: 400;
+  font-family: Montserrat,sans-serif;
+  line-height: 2;
+  max-width: 91.666667%;
+  margin-top: 0.5rem;
+  margin-bottom: 0.5rem;
+  padding-left: 1rem;
+  padding-right: 1rem;
+  padding-left: 1rem;
+  color: #292B3E;
+}
+
 .c0 {
+  border-style: solid;
   border-radius: 0.3rem;
-  box-shadow: 0 2px 6px rgba(0,0,0,0.18),-15px 20px 20px rgba(0,0,0,0.04),15px -5px 20px rgba(0,0,0,0.04);
+  border-width: 2px;
+  box-shadow: 0 2px 4px rgba(0,0,0,0.12),0 10px 13px rgba(0,0,0,0.02),0 -10px 13px rgba(0,0,0,0.02);
   min-height: 8rem;
-  padding-left: 1rem;
-  padding-right: 1rem;
-  padding-top: 0.75rem;
-  padding-bottom: 0.75rem;
   background-color: white;
+  border-color: transparent;
 }
 
 <div
   class="c0"
 >
-  Hello world
+  <div
+    class="c1"
+  >
+    <p
+      class="c2"
+    >
+      Hello world
+    </p>
+  </div>
 </div>
 `;
 
-exports[`it works with heading 1`] = `
-.c0 {
-  border-radius: 0.3rem;
-  box-shadow: 0 2px 3px rgba(0,0,0,0.1);
-  min-height: 8rem;
-  padding-left: 1rem;
-  padding-right: 1rem;
-  padding-top: 0.75rem;
-  padding-bottom: 0.75rem;
-  background-color: white;
+exports[`it works with elevation 3`] = `
+.c1 {
+  position: relative;
 }
 
-.c1 {
-  font-size: 1.875rem;
-  font-weight: 700;
+.c2 {
+  font-size: 1rem;
+  font-weight: 400;
   font-family: Montserrat,sans-serif;
-  line-height: 1.25;
-  margin-bottom: 1rem;
+  line-height: 2;
+  max-width: 91.666667%;
+  margin-top: 0.5rem;
+  margin-bottom: 0.5rem;
+  padding-left: 1rem;
+  padding-right: 1rem;
+  padding-left: 1rem;
   color: #292B3E;
 }
 
-<div
-  class="c0"
->
-  <h2
+.c0 {
+  border-style: solid;
+  border-radius: 0.3rem;
+  border-width: 2px;
+  box-shadow: 0 2px 5px rgba(0,0,0,0.16),-10px 15px 15px rgba(0,0,0,0.03),10px 0px 15px rgba(0,0,0,0.03);
+  min-height: 8rem;
+  background-color: white;
+  border-color: transparent;
+}
+
+<div
+  class="c0"
+>
+  <div
+    class="c1"
+  >
+    <p
+      class="c2"
+    >
+      Hello world
+    </p>
+  </div>
+</div>
+`;
+
+exports[`it works with elevation 4`] = `
+.c1 {
+  position: relative;
+}
+
+.c2 {
+  font-size: 1rem;
+  font-weight: 400;
+  font-family: Montserrat,sans-serif;
+  line-height: 2;
+  max-width: 91.666667%;
+  margin-top: 0.5rem;
+  margin-bottom: 0.5rem;
+  padding-left: 1rem;
+  padding-right: 1rem;
+  padding-left: 1rem;
+  color: #292B3E;
+}
+
+.c0 {
+  border-style: solid;
+  border-radius: 0.3rem;
+  border-width: 2px;
+  box-shadow: 0 2px 6px rgba(0,0,0,0.18),-15px 20px 20px rgba(0,0,0,0.04),15px -5px 20px rgba(0,0,0,0.04);
+  min-height: 8rem;
+  background-color: white;
+  border-color: transparent;
+}
+
+<div
+  class="c0"
+>
+  <div
+    class="c1"
+  >
+    <p
+      class="c2"
+    >
+      Hello world
+    </p>
+  </div>
+</div>
+`;
+
+exports[`it works with heading 1`] = `
+.c0 {
+  border-style: solid;
+  border-radius: 0.3rem;
+  border-width: 2px;
+  box-shadow: 0 2px 3px rgba(0,0,0,0.1);
+  min-height: 8rem;
+  background-color: white;
+  border-color: transparent;
+}
+
+.c1 {
+  position: relative;
+}
+
+.c2 {
+  font-size: 1.875rem;
+  font-weight: 700;
+  font-family: Montserrat,sans-serif;
+  line-height: 1.25;
+  padding: 1rem;
+  padding-top: 1rem;
+  padding-bottom: 0;
+  padding-left: 1rem;
+  color: #292B3E;
+}
+
+.c3 {
+  font-size: 1rem;
+  font-weight: 400;
+  font-family: Montserrat,sans-serif;
+  line-height: 2;
+  max-width: 91.666667%;
+  margin-top: 0.5rem;
+  margin-bottom: 0.5rem;
+  padding-left: 1rem;
+  padding-right: 1rem;
+  padding-left: 1rem;
+  color: #292B3E;
+}
+
+<div
+  class="c0"
+>
+  <div
+    class="c1"
+  >
+    <h2
+      class="c2"
+    >
+      heading
+    </h2>
+    <p
+      class="c3"
+    >
+      body
+    </p>
+  </div>
+</div>
+`;
+
+exports[`it works with image 1`] = `
+.c0 {
+  border-style: solid;
+  border-radius: 0.3rem;
+  border-width: 2px;
+  box-shadow: 0 2px 3px rgba(0,0,0,0.1);
+  min-height: 8rem;
+  background-color: white;
+  border-color: transparent;
+}
+
+.c1 {
+  border-bottom-style: solid;
+  border-bottom-width: 4px;
+  width: 100%;
+  margin-bottom: 0.5rem;
+  border-bottom-color: #fafafa;
+}
+
+.c2 {
+  position: relative;
+}
+
+.c3 {
+  font-size: 1rem;
+  font-weight: 400;
+  font-family: Montserrat,sans-serif;
+  line-height: 2;
+  max-width: 91.666667%;
+  margin-top: 0.5rem;
+  margin-bottom: 0.5rem;
+  padding-left: 1rem;
+  padding-right: 1rem;
+  padding-left: 1rem;
+  color: #292B3E;
+}
+
+<div
+  class="c0"
+>
+  <img
+    alt="test"
+    class="c1"
+    src=""
+  />
+  <div
+    class="c2"
+  >
+    <p
+      class="c3"
+    >
+      Hello world
+    </p>
+  </div>
+</div>
+`;
+
+exports[`it works with status 1`] = `
+.c0 {
+  border-style: solid;
+  border-radius: 0.3rem;
+  border-width: 2px;
+  box-shadow: 0 2px 3px rgba(0,0,0,0.1);
+  min-height: 8rem;
+  background-color: white;
+  border-color: transparent;
+}
+
+.c1 {
+  position: relative;
+}
+
+.c2 {
+  font-size: 1rem;
+  font-weight: 400;
+  font-family: Montserrat,sans-serif;
+  line-height: 2;
+  max-width: 91.666667%;
+  margin-top: 0.5rem;
+  margin-bottom: 0.5rem;
+  padding-left: 1rem;
+  padding-right: 1rem;
+  padding-left: 1rem;
+  color: #292B3E;
+}
+
+<div
+  class="c0"
+>
+  <div
+    class="c1"
+  >
+    <p
+      class="c2"
+    >
+      Hello world
+    </p>
+  </div>
+</div>
+`;
+
+exports[`it works with status 2`] = `
+.c1 {
+  position: relative;
+}
+
+.c2 {
+  font-size: 1rem;
+  font-weight: 400;
+  font-family: Montserrat,sans-serif;
+  line-height: 2;
+  max-width: 91.666667%;
+  margin-top: 0.5rem;
+  margin-bottom: 0.5rem;
+  padding-left: 1rem;
+  padding-right: 1rem;
+  padding-left: 1rem;
+  color: #292B3E;
+}
+
+.c0 {
+  border-style: solid;
+  border-radius: 0.3rem;
+  border-width: 2px;
+  box-shadow: 0 2px 3px rgba(0,0,0,0.1);
+  min-height: 8rem;
+  background-color: white;
+  border-color: #73748b;
+}
+
+.c3 {
+  border-top-style: solid;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  border-top-width: 4px;
+  -webkit-align-items: flex-end;
+  -webkit-box-align: flex-end;
+  -ms-flex-align: flex-end;
+  align-items: flex-end;
+  margin-top: 0.5rem;
+  padding: 1rem;
+  border-top-color: #fafafa;
+}
+
+.c4 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+}
+
+.c5 {
+  font-size: 1.875rem;
+  font-weight: 400;
+  font-family: Montserrat,sans-serif;
+  line-height: 0;
+  border-radius: 9999px;
+  margin-right: 1rem;
+  background-color: white;
+  color: #73748b;
+}
+
+<div
+  class="c0"
+>
+  <div
+    class="c1"
+  >
+    <p
+      class="c2"
+    >
+      Hello world
+    </p>
+  </div>
+  <div
+    class="c3"
+  >
+    <div
+      class="c4"
+    >
+      <p
+        class="c5"
+      >
+        <svg
+          aria-hidden="true"
+          class="svg-inline--fa fa-circle-info "
+          data-icon="circle-info"
+          data-prefix="fas"
+          focusable="false"
+          role="img"
+          viewBox="0 0 512 512"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M256 0C114.6 0 0 114.6 0 256s114.6 256 256 256s256-114.6 256-256S397.4 0 256 0zM256 128c17.67 0 32 14.33 32 32c0 17.67-14.33 32-32 32S224 177.7 224 160C224 142.3 238.3 128 256 128zM296 384h-80C202.8 384 192 373.3 192 360s10.75-24 24-24h16v-64H224c-13.25 0-24-10.75-24-24S210.8 224 224 224h32c13.25 0 24 10.75 24 24v88h16c13.25 0 24 10.75 24 24S309.3 384 296 384z"
+            fill="currentColor"
+          />
+        </svg>
+      </p>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`it works with status 3`] = `
+.c1 {
+  position: relative;
+}
+
+.c2 {
+  font-size: 1rem;
+  font-weight: 400;
+  font-family: Montserrat,sans-serif;
+  line-height: 2;
+  max-width: 91.666667%;
+  margin-top: 0.5rem;
+  margin-bottom: 0.5rem;
+  padding-left: 1rem;
+  padding-right: 1rem;
+  padding-left: 1rem;
+  color: #292B3E;
+}
+
+.c3 {
+  border-top-style: solid;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  border-top-width: 4px;
+  -webkit-align-items: flex-end;
+  -webkit-box-align: flex-end;
+  -ms-flex-align: flex-end;
+  align-items: flex-end;
+  margin-top: 0.5rem;
+  padding: 1rem;
+  border-top-color: #fafafa;
+}
+
+.c4 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+}
+
+.c0 {
+  border-style: solid;
+  border-radius: 0.3rem;
+  border-width: 2px;
+  box-shadow: 0 2px 3px rgba(0,0,0,0.1);
+  min-height: 8rem;
+  background-color: white;
+  border-color: #ebc764;
+}
+
+.c5 {
+  font-size: 1.875rem;
+  font-weight: 400;
+  font-family: Montserrat,sans-serif;
+  line-height: 0;
+  border-radius: 9999px;
+  margin-right: 1rem;
+  background-color: white;
+  color: #ebc764;
+}
+
+<div
+  class="c0"
+>
+  <div
+    class="c1"
+  >
+    <p
+      class="c2"
+    >
+      Hello world
+    </p>
+  </div>
+  <div
+    class="c3"
+  >
+    <div
+      class="c4"
+    >
+      <p
+        class="c5"
+      >
+        <svg
+          aria-hidden="true"
+          class="svg-inline--fa fa-circle-exclamation "
+          data-icon="circle-exclamation"
+          data-prefix="fas"
+          focusable="false"
+          role="img"
+          viewBox="0 0 512 512"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M256 0C114.6 0 0 114.6 0 256s114.6 256 256 256s256-114.6 256-256S397.4 0 256 0zM232 152C232 138.8 242.8 128 256 128s24 10.75 24 24v128c0 13.25-10.75 24-24 24S232 293.3 232 280V152zM256 400c-17.36 0-31.44-14.08-31.44-31.44c0-17.36 14.07-31.44 31.44-31.44s31.44 14.08 31.44 31.44C287.4 385.9 273.4 400 256 400z"
+            fill="currentColor"
+          />
+        </svg>
+      </p>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`it works with status 4`] = `
+.c1 {
+  position: relative;
+}
+
+.c2 {
+  font-size: 1rem;
+  font-weight: 400;
+  font-family: Montserrat,sans-serif;
+  line-height: 2;
+  max-width: 91.666667%;
+  margin-top: 0.5rem;
+  margin-bottom: 0.5rem;
+  padding-left: 1rem;
+  padding-right: 1rem;
+  padding-left: 1rem;
+  color: #292B3E;
+}
+
+.c3 {
+  border-top-style: solid;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  border-top-width: 4px;
+  -webkit-align-items: flex-end;
+  -webkit-box-align: flex-end;
+  -ms-flex-align: flex-end;
+  align-items: flex-end;
+  margin-top: 0.5rem;
+  padding: 1rem;
+  border-top-color: #fafafa;
+}
+
+.c4 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+}
+
+.c0 {
+  border-style: solid;
+  border-radius: 0.3rem;
+  border-width: 2px;
+  box-shadow: 0 2px 3px rgba(0,0,0,0.1);
+  min-height: 8rem;
+  background-color: white;
+  border-color: #b41e25;
+}
+
+.c5 {
+  font-size: 1.875rem;
+  font-weight: 400;
+  font-family: Montserrat,sans-serif;
+  line-height: 0;
+  border-radius: 9999px;
+  margin-right: 1rem;
+  background-color: white;
+  color: #b41e25;
+}
+
+<div
+  class="c0"
+>
+  <div
+    class="c1"
+  >
+    <p
+      class="c2"
+    >
+      Hello world
+    </p>
+  </div>
+  <div
+    class="c3"
+  >
+    <div
+      class="c4"
+    >
+      <p
+        class="c5"
+      >
+        <svg
+          aria-hidden="true"
+          class="svg-inline--fa fa-circle-exclamation "
+          data-icon="circle-exclamation"
+          data-prefix="fas"
+          focusable="false"
+          role="img"
+          viewBox="0 0 512 512"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M256 0C114.6 0 0 114.6 0 256s114.6 256 256 256s256-114.6 256-256S397.4 0 256 0zM232 152C232 138.8 242.8 128 256 128s24 10.75 24 24v128c0 13.25-10.75 24-24 24S232 293.3 232 280V152zM256 400c-17.36 0-31.44-14.08-31.44-31.44c0-17.36 14.07-31.44 31.44-31.44s31.44 14.08 31.44 31.44C287.4 385.9 273.4 400 256 400z"
+            fill="currentColor"
+          />
+        </svg>
+      </p>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`it works with tag 1`] = `
+.c0 {
+  border-style: solid;
+  border-radius: 0.3rem;
+  border-width: 2px;
+  box-shadow: 0 2px 3px rgba(0,0,0,0.1);
+  min-height: 8rem;
+  background-color: white;
+  border-color: transparent;
+}
+
+.c1 {
+  position: relative;
+}
+
+.c2 {
+  font-size: 1rem;
+  font-weight: 400;
+  font-family: Montserrat,sans-serif;
+  line-height: 2;
+  max-width: 91.666667%;
+  margin-top: 0.5rem;
+  margin-bottom: 0.5rem;
+  padding-left: 1rem;
+  padding-right: 1rem;
+  padding-left: 1rem;
+  color: #292B3E;
+}
+
+.c3 {
+  border-top-style: solid;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  border-top-width: 4px;
+  -webkit-align-items: flex-end;
+  -webkit-box-align: flex-end;
+  -ms-flex-align: flex-end;
+  align-items: flex-end;
+  margin-top: 0.5rem;
+  padding: 1rem;
+  border-top-color: #fafafa;
+}
+
+.c4 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+}
+
+.c5 {
+  -webkit-flex: 1 1 auto;
+  -ms-flex: 1 1 auto;
+  flex: 1 1 auto;
+}
+
+.c6 {
+  border-style: solid;
+  text-align: center;
+  font-size: 0.75rem;
+  font-weight: 500;
+  font-family: Montserrat,sans-serif;
+  line-height: 2;
+  border-radius: 0.6rem;
+  border-width: 0;
+  padding-top: 0.25rem;
+  padding-bottom: 0.25rem;
+  background-color: #135f61;
+  color: white;
+  border-color: #292B3E;
+}
+
+.c7 {
+  padding-left: 0.5rem;
+  padding-right: 0.5rem;
+  padding-top: 0.25rem;
+  padding-bottom: 0.25rem;
+}
+
+<div
+  class="c0"
+>
+  <div
     class="c1"
   >
-    heading
-  </h2>
-  body
+    <p
+      class="c2"
+    >
+      body
+    </p>
+  </div>
+  <div
+    class="c3"
+  >
+    <div
+      class="c4"
+    >
+      <div
+        class="c5"
+      >
+        <span
+          class="c6"
+        >
+          <span
+            class="c7"
+          >
+            v1.0.0
+          </span>
+        </span>
+      </div>
+    </div>
+  </div>
 </div>
 `;
diff --git a/src/components/panel/components/panel-actions/PanelActions.spec.tsx b/src/components/panel/components/panel-actions/PanelActions.spec.tsx
new file mode 100644
index 00000000..0211c2e8
--- /dev/null
+++ b/src/components/panel/components/panel-actions/PanelActions.spec.tsx
@@ -0,0 +1,59 @@
+import * as React from 'react';
+import { render } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import 'jest-styled-components';
+
+import { ThemeProvider } from '../../../theme-provider';
+import { PanelActions } from './index';
+import { PanelStatusType } from '../../index';
+
+const setup = (panel: React.ReactElement) =>
+    render(<ThemeProvider>{panel}</ThemeProvider>);
+
+const defaultProps = {
+    tag: undefined,
+    buttons: undefined,
+    status: undefined
+};
+
+test('it works', () => {
+    const { container } = setup(<PanelActions {...defaultProps} />);
+    expect(container.firstChild).toMatchSnapshot();
+});
+
+test('it works with tag', () => {
+    const { container, getByText } = setup(
+        <PanelActions
+            {...defaultProps}
+            tag={{ title: 'v1.0.0', props: { kind: 'primary' } }}
+        />
+    );
+    expect(container.firstChild).toMatchSnapshot();
+    expect(container.firstChild).toMatchSnapshot();
+    expect(getByText('v1.0.0')).toBeTruthy();
+});
+
+test('it works with buttons', () => {
+    const { container, getByText, getAllByRole } = setup(
+        <PanelActions
+            {...defaultProps}
+            buttons={[
+                { title: 'Button 1', props: { kind: 'primary' } },
+                { title: 'Button 2', props: { kind: 'secondary' } }
+            ]}
+        />
+    );
+    expect(container.firstChild).toMatchSnapshot();
+    expect(getByText('Button 1')).toBeTruthy();
+    expect(getByText('Button 2')).toBeTruthy();
+    expect(getAllByRole('button').length).toBe(2);
+});
+
+test('it works with status', () => {
+    const statuses: PanelStatusType[] = ['none', 'info', 'warning', 'error'];
+
+    statuses.forEach((status) => {
+        const { container } = setup(<PanelActions status={status} />);
+        expect(container.firstChild).toMatchSnapshot();
+    });
+});
diff --git a/src/components/panel/components/panel-actions/__snapshots__/PanelActions.spec.tsx.snap b/src/components/panel/components/panel-actions/__snapshots__/PanelActions.spec.tsx.snap
new file mode 100644
index 00000000..d29369c4
--- /dev/null
+++ b/src/components/panel/components/panel-actions/__snapshots__/PanelActions.spec.tsx.snap
@@ -0,0 +1,601 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`it works 1`] = `null`;
+
+exports[`it works with buttons 1`] = `
+.c0 {
+  border-top-style: solid;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  border-top-width: 4px;
+  -webkit-align-items: flex-end;
+  -webkit-box-align: flex-end;
+  -ms-flex-align: flex-end;
+  align-items: flex-end;
+  margin-top: 0.5rem;
+  padding: 1rem;
+  border-top-color: #fafafa;
+}
+
+.c1 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+}
+
+.c2 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  width: 100%;
+  -webkit-box-pack: end;
+  -webkit-justify-content: end;
+  -ms-flex-pack: end;
+  justify-content: end;
+  gap: 0.5rem;
+}
+
+.c4 {
+  border-style: solid;
+  text-align: center;
+  display: inline-block;
+  position: relative;
+  font-size: 1rem;
+  font-weight: 500;
+  border-radius: 0.3rem;
+  border-width: 2px;
+  box-shadow: 0 2px 3px rgba(0,0,0,0.1);
+  padding-left: 0.75rem;
+  padding-right: 0.75rem;
+  padding-top: 0.5rem;
+  padding-bottom: 0.5rem;
+  background-color: #17a3a5;
+  color: white;
+  border-color: #17a3a5;
+}
+
+.c4:hover {
+  cursor: pointer;
+  background-color: #135f61;
+  color: white;
+}
+
+.c4:hover:disabled {
+  cursor: not-allowed;
+  background-color: #135f61;
+}
+
+.c4:disabled {
+  opacity: 0.7;
+  background-color: #135f61;
+  color: white;
+}
+
+.c3 {
+  border-style: solid;
+  text-align: center;
+  display: inline-block;
+  position: relative;
+  font-size: 1rem;
+  font-weight: 500;
+  font-family: Montserrat,sans-serif;
+  line-height: 2;
+  border-radius: 0.3rem;
+  border-width: 2px;
+  box-shadow: 0 2px 3px rgba(0,0,0,0.1);
+  padding-left: 0.75rem;
+  padding-right: 0.75rem;
+  padding-top: 0.5rem;
+  padding-bottom: 0.5rem;
+  background-color: #17a3a5;
+  color: white;
+  border-color: #17a3a5;
+}
+
+.c3:hover {
+  cursor: pointer;
+  background-color: #135f61;
+  color: white;
+}
+
+.c3:hover:disabled {
+  cursor: not-allowed;
+  background-color: #135f61;
+}
+
+.c3:disabled {
+  opacity: 0.7;
+  background-color: #135f61;
+  color: white;
+}
+
+.c5 {
+  opacity: 1;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+}
+
+.c7 {
+  border-style: solid;
+  text-align: center;
+  display: inline-block;
+  position: relative;
+  font-size: 1rem;
+  font-weight: 500;
+  border-radius: 0.3rem;
+  border-width: 2px;
+  box-shadow: 0 2px 3px rgba(0,0,0,0.1);
+  padding-left: 0.75rem;
+  padding-right: 0.75rem;
+  padding-top: 0.5rem;
+  padding-bottom: 0.5rem;
+  background-color: white;
+  color: #17a3a5;
+  border-color: #d4d4d4;
+}
+
+.c7:hover {
+  cursor: pointer;
+  background-color: #fafafa;
+  color: #135f61;
+}
+
+.c7:hover:disabled {
+  cursor: not-allowed;
+  background-color: #fafafa;
+}
+
+.c7:disabled {
+  opacity: 0.7;
+  background-color: #fafafa;
+  color: #292B3E;
+}
+
+.c6 {
+  border-style: solid;
+  text-align: center;
+  display: inline-block;
+  position: relative;
+  font-size: 1rem;
+  font-weight: 500;
+  font-family: Montserrat,sans-serif;
+  line-height: 2;
+  border-radius: 0.3rem;
+  border-width: 2px;
+  box-shadow: 0 2px 3px rgba(0,0,0,0.1);
+  padding-left: 0.75rem;
+  padding-right: 0.75rem;
+  padding-top: 0.5rem;
+  padding-bottom: 0.5rem;
+  background-color: white;
+  color: #17a3a5;
+  border-color: #d4d4d4;
+}
+
+.c6:hover {
+  cursor: pointer;
+  background-color: #fafafa;
+  color: #135f61;
+}
+
+.c6:hover:disabled {
+  cursor: not-allowed;
+  background-color: #fafafa;
+}
+
+.c6:disabled {
+  opacity: 0.7;
+  background-color: #fafafa;
+  color: #292B3E;
+}
+
+<div
+  class="c0"
+>
+  <div
+    class="c1"
+  />
+  <div
+    class="c2"
+  >
+    <button
+      class="c3 sc-bcXHqe c4"
+    >
+      <div
+        class="c5"
+      >
+        Button 1
+      </div>
+    </button>
+    <button
+      class="c6 sc-bcXHqe c7"
+    >
+      <div
+        class="c5"
+      >
+        Button 2
+      </div>
+    </button>
+  </div>
+</div>
+`;
+
+exports[`it works with status 1`] = `null`;
+
+exports[`it works with status 2`] = `
+.c0 {
+  border-top-style: solid;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  border-top-width: 4px;
+  -webkit-align-items: flex-end;
+  -webkit-box-align: flex-end;
+  -ms-flex-align: flex-end;
+  align-items: flex-end;
+  margin-top: 0.5rem;
+  padding: 1rem;
+  border-top-color: #fafafa;
+}
+
+.c1 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+}
+
+.c2 {
+  font-size: 1.875rem;
+  font-weight: 400;
+  font-family: Montserrat,sans-serif;
+  line-height: 0;
+  border-radius: 9999px;
+  margin-right: 1rem;
+  background-color: white;
+  color: #73748b;
+}
+
+<div
+  class="c0"
+>
+  <div
+    class="c1"
+  >
+    <p
+      class="c2"
+    >
+      <svg
+        aria-hidden="true"
+        class="svg-inline--fa fa-circle-info "
+        data-icon="circle-info"
+        data-prefix="fas"
+        focusable="false"
+        role="img"
+        viewBox="0 0 512 512"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="M256 0C114.6 0 0 114.6 0 256s114.6 256 256 256s256-114.6 256-256S397.4 0 256 0zM256 128c17.67 0 32 14.33 32 32c0 17.67-14.33 32-32 32S224 177.7 224 160C224 142.3 238.3 128 256 128zM296 384h-80C202.8 384 192 373.3 192 360s10.75-24 24-24h16v-64H224c-13.25 0-24-10.75-24-24S210.8 224 224 224h32c13.25 0 24 10.75 24 24v88h16c13.25 0 24 10.75 24 24S309.3 384 296 384z"
+          fill="currentColor"
+        />
+      </svg>
+    </p>
+  </div>
+</div>
+`;
+
+exports[`it works with status 3`] = `
+.c0 {
+  border-top-style: solid;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  border-top-width: 4px;
+  -webkit-align-items: flex-end;
+  -webkit-box-align: flex-end;
+  -ms-flex-align: flex-end;
+  align-items: flex-end;
+  margin-top: 0.5rem;
+  padding: 1rem;
+  border-top-color: #fafafa;
+}
+
+.c1 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+}
+
+.c2 {
+  font-size: 1.875rem;
+  font-weight: 400;
+  font-family: Montserrat,sans-serif;
+  line-height: 0;
+  border-radius: 9999px;
+  margin-right: 1rem;
+  background-color: white;
+  color: #ebc764;
+}
+
+<div
+  class="c0"
+>
+  <div
+    class="c1"
+  >
+    <p
+      class="c2"
+    >
+      <svg
+        aria-hidden="true"
+        class="svg-inline--fa fa-circle-exclamation "
+        data-icon="circle-exclamation"
+        data-prefix="fas"
+        focusable="false"
+        role="img"
+        viewBox="0 0 512 512"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="M256 0C114.6 0 0 114.6 0 256s114.6 256 256 256s256-114.6 256-256S397.4 0 256 0zM232 152C232 138.8 242.8 128 256 128s24 10.75 24 24v128c0 13.25-10.75 24-24 24S232 293.3 232 280V152zM256 400c-17.36 0-31.44-14.08-31.44-31.44c0-17.36 14.07-31.44 31.44-31.44s31.44 14.08 31.44 31.44C287.4 385.9 273.4 400 256 400z"
+          fill="currentColor"
+        />
+      </svg>
+    </p>
+  </div>
+</div>
+`;
+
+exports[`it works with status 4`] = `
+.c0 {
+  border-top-style: solid;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  border-top-width: 4px;
+  -webkit-align-items: flex-end;
+  -webkit-box-align: flex-end;
+  -ms-flex-align: flex-end;
+  align-items: flex-end;
+  margin-top: 0.5rem;
+  padding: 1rem;
+  border-top-color: #fafafa;
+}
+
+.c1 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+}
+
+.c2 {
+  font-size: 1.875rem;
+  font-weight: 400;
+  font-family: Montserrat,sans-serif;
+  line-height: 0;
+  border-radius: 9999px;
+  margin-right: 1rem;
+  background-color: white;
+  color: #b41e25;
+}
+
+<div
+  class="c0"
+>
+  <div
+    class="c1"
+  >
+    <p
+      class="c2"
+    >
+      <svg
+        aria-hidden="true"
+        class="svg-inline--fa fa-circle-exclamation "
+        data-icon="circle-exclamation"
+        data-prefix="fas"
+        focusable="false"
+        role="img"
+        viewBox="0 0 512 512"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="M256 0C114.6 0 0 114.6 0 256s114.6 256 256 256s256-114.6 256-256S397.4 0 256 0zM232 152C232 138.8 242.8 128 256 128s24 10.75 24 24v128c0 13.25-10.75 24-24 24S232 293.3 232 280V152zM256 400c-17.36 0-31.44-14.08-31.44-31.44c0-17.36 14.07-31.44 31.44-31.44s31.44 14.08 31.44 31.44C287.4 385.9 273.4 400 256 400z"
+          fill="currentColor"
+        />
+      </svg>
+    </p>
+  </div>
+</div>
+`;
+
+exports[`it works with tag 1`] = `
+.c0 {
+  border-top-style: solid;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  border-top-width: 4px;
+  -webkit-align-items: flex-end;
+  -webkit-box-align: flex-end;
+  -ms-flex-align: flex-end;
+  align-items: flex-end;
+  margin-top: 0.5rem;
+  padding: 1rem;
+  border-top-color: #fafafa;
+}
+
+.c1 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+}
+
+.c2 {
+  -webkit-flex: 1 1 auto;
+  -ms-flex: 1 1 auto;
+  flex: 1 1 auto;
+}
+
+.c3 {
+  border-style: solid;
+  text-align: center;
+  font-size: 0.75rem;
+  font-weight: 500;
+  font-family: Montserrat,sans-serif;
+  line-height: 2;
+  border-radius: 0.6rem;
+  border-width: 0;
+  padding-top: 0.25rem;
+  padding-bottom: 0.25rem;
+  background-color: #135f61;
+  color: white;
+  border-color: #292B3E;
+}
+
+.c4 {
+  padding-left: 0.5rem;
+  padding-right: 0.5rem;
+  padding-top: 0.25rem;
+  padding-bottom: 0.25rem;
+}
+
+<div
+  class="c0"
+>
+  <div
+    class="c1"
+  >
+    <div
+      class="c2"
+    >
+      <span
+        class="c3"
+      >
+        <span
+          class="c4"
+        >
+          v1.0.0
+        </span>
+      </span>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`it works with tag 2`] = `
+.c0 {
+  border-top-style: solid;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  border-top-width: 4px;
+  -webkit-align-items: flex-end;
+  -webkit-box-align: flex-end;
+  -ms-flex-align: flex-end;
+  align-items: flex-end;
+  margin-top: 0.5rem;
+  padding: 1rem;
+  border-top-color: #fafafa;
+}
+
+.c1 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+}
+
+.c2 {
+  -webkit-flex: 1 1 auto;
+  -ms-flex: 1 1 auto;
+  flex: 1 1 auto;
+}
+
+.c3 {
+  border-style: solid;
+  text-align: center;
+  font-size: 0.75rem;
+  font-weight: 500;
+  font-family: Montserrat,sans-serif;
+  line-height: 2;
+  border-radius: 0.6rem;
+  border-width: 0;
+  padding-top: 0.25rem;
+  padding-bottom: 0.25rem;
+  background-color: #135f61;
+  color: white;
+  border-color: #292B3E;
+}
+
+.c4 {
+  padding-left: 0.5rem;
+  padding-right: 0.5rem;
+  padding-top: 0.25rem;
+  padding-bottom: 0.25rem;
+}
+
+<div
+  class="c0"
+>
+  <div
+    class="c1"
+  >
+    <div
+      class="c2"
+    >
+      <span
+        class="c3"
+      >
+        <span
+          class="c4"
+        >
+          v1.0.0
+        </span>
+      </span>
+    </div>
+  </div>
+</div>
+`;
diff --git a/src/components/panel/components/panel-actions/index.tsx b/src/components/panel/components/panel-actions/index.tsx
new file mode 100644
index 00000000..838ca879
--- /dev/null
+++ b/src/components/panel/components/panel-actions/index.tsx
@@ -0,0 +1,26 @@
+import * as React from 'react';
+import { Box } from '../../../box';
+import { PanelProps } from '../../index';
+import { panelActionsStyles } from './styles';
+import { PanelIcons } from '../panel-icons';
+import { PanelButtons } from '../panel-buttons';
+
+export const PanelActions: React.FC<
+    Pick<PanelProps, 'tag' | 'buttons' | 'status'>
+> = ({ tag, buttons, status }) => {
+    const hasTag = tag?.title;
+    const hasButtons = buttons?.length;
+    const hasStatus = status && status !== 'none';
+    const canRender = hasTag || hasButtons || hasStatus;
+
+    if (!canRender) return null;
+
+    return (
+        <Box styles={panelActionsStyles()}>
+            <PanelIcons status={status} tag={tag} />
+            <PanelButtons buttons={buttons} />
+        </Box>
+    );
+};
+
+PanelActions.displayName = 'PanelActions';
diff --git a/src/components/panel/components/panel-actions/styles.ts b/src/components/panel/components/panel-actions/styles.ts
new file mode 100644
index 00000000..3713b23d
--- /dev/null
+++ b/src/components/panel/components/panel-actions/styles.ts
@@ -0,0 +1,11 @@
+import { Styles } from '@lapidist/styles';
+
+export const panelActionsStyles = (): Styles => ({
+    display: 'flex',
+    alignItems: 'flex-end',
+    borderTopColor: { group: 'grey', shade: 'lightest' },
+    borderTopStyle: 'solid',
+    borderTopWidth: '2',
+    padding: '4',
+    marginTop: '2'
+});
diff --git a/src/components/panel/components/panel-body/PanelBody.spec.tsx b/src/components/panel/components/panel-body/PanelBody.spec.tsx
new file mode 100644
index 00000000..d693b28b
--- /dev/null
+++ b/src/components/panel/components/panel-body/PanelBody.spec.tsx
@@ -0,0 +1,49 @@
+import * as React from 'react';
+import { render } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import 'jest-styled-components';
+
+import { ThemeProvider } from '../../../theme-provider';
+import { PanelBody } from './index';
+
+const setup = (panel: React.ReactElement) =>
+    render(<ThemeProvider>{panel}</ThemeProvider>);
+
+const defaultProps = {
+    image: undefined,
+    heading: undefined
+};
+
+test('it works', () => {
+    const { container, getByText } = setup(
+        <PanelBody {...defaultProps}>body</PanelBody>
+    );
+    expect(container.firstChild).toMatchSnapshot();
+    expect(getByText('body')).toBeTruthy();
+});
+
+test('it works with image', () => {
+    const { container, getByText, getByAltText } = setup(
+        <PanelBody {...defaultProps} image={{ src: '', alt: 'test' }}>
+            body
+        </PanelBody>
+    );
+    expect(container.firstChild).toMatchSnapshot();
+    expect(getByText('body')).toBeTruthy();
+    expect(getByAltText('test')).toBeTruthy();
+});
+
+test('it works with heading', () => {
+    const { container, getByText } = setup(
+        <PanelBody
+            {...defaultProps}
+            heading={{ title: 'heading', props: { as: 'h2' } }}
+        >
+            body
+        </PanelBody>
+    );
+    expect(container.firstChild).toMatchSnapshot();
+    expect(getByText('heading')).toBeTruthy();
+    expect(getByText('body')).toBeTruthy();
+    expect(container.querySelectorAll('h2').length).toBe(1);
+});
diff --git a/src/components/panel/components/panel-body/__snapshots__/PanelBody.spec.tsx.snap b/src/components/panel/components/panel-body/__snapshots__/PanelBody.spec.tsx.snap
new file mode 100644
index 00000000..6a542e24
--- /dev/null
+++ b/src/components/panel/components/panel-body/__snapshots__/PanelBody.spec.tsx.snap
@@ -0,0 +1,94 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`it works 1`] = `
+.c0 {
+  position: relative;
+}
+
+.c1 {
+  font-size: 1rem;
+  font-weight: 400;
+  font-family: Montserrat,sans-serif;
+  line-height: 2;
+  max-width: 91.666667%;
+  margin-top: 0.5rem;
+  margin-bottom: 0.5rem;
+  padding-left: 1rem;
+  padding-right: 1rem;
+  padding-left: 1rem;
+  color: #292B3E;
+}
+
+<div
+  class="c0"
+>
+  <p
+    class="c1"
+  >
+    body
+  </p>
+</div>
+`;
+
+exports[`it works with heading 1`] = `
+.c0 {
+  position: relative;
+}
+
+.c1 {
+  font-size: 1.875rem;
+  font-weight: 700;
+  font-family: Montserrat,sans-serif;
+  line-height: 1.25;
+  padding: 1rem;
+  padding-top: 1rem;
+  padding-bottom: 0;
+  padding-left: 1rem;
+  color: #292B3E;
+}
+
+.c2 {
+  font-size: 1rem;
+  font-weight: 400;
+  font-family: Montserrat,sans-serif;
+  line-height: 2;
+  max-width: 91.666667%;
+  margin-top: 0.5rem;
+  margin-bottom: 0.5rem;
+  padding-left: 1rem;
+  padding-right: 1rem;
+  padding-left: 1rem;
+  color: #292B3E;
+}
+
+<div
+  class="c0"
+>
+  <h2
+    class="c1"
+  >
+    heading
+  </h2>
+  <p
+    class="c2"
+  >
+    body
+  </p>
+</div>
+`;
+
+exports[`it works with image 1`] = `
+.c0 {
+  border-bottom-style: solid;
+  border-bottom-width: 4px;
+  width: 100%;
+  margin-bottom: 0.5rem;
+  border-bottom-color: #fafafa;
+}
+
+<img
+  alt="test"
+  class="c0"
+  src=""
+/>
+`;
diff --git a/src/components/panel/components/panel-body/index.tsx b/src/components/panel/components/panel-body/index.tsx
new file mode 100644
index 00000000..867aa8da
--- /dev/null
+++ b/src/components/panel/components/panel-body/index.tsx
@@ -0,0 +1,37 @@
+import * as React from 'react';
+import { PanelProps, PanelPropType } from '../../index';
+import { Image } from '../../../image';
+import { Box } from '../../../box';
+import { Heading } from '../../../heading';
+import { Text } from '../../../text';
+import {
+    panelBodyStyles,
+    panelHeadingStyles,
+    panelImageStyles
+} from './styles';
+
+export const PanelBody = ({
+    image,
+    heading,
+    children
+}: Pick<PanelProps & PanelPropType, 'image' | 'heading' | 'children'>) => {
+    return (
+        <>
+            {image && <Image styles={panelImageStyles()} {...image} />}
+
+            <Box styles={{ position: 'relative' }}>
+                {heading?.title && (
+                    <Heading
+                        styles={panelHeadingStyles({ image })}
+                        {...heading?.props}
+                    >
+                        {heading.title}
+                    </Heading>
+                )}
+                {children && <Text styles={panelBodyStyles()}>{children}</Text>}
+            </Box>
+        </>
+    );
+};
+
+PanelBody.displayName = 'PanelBody';
diff --git a/src/components/panel/components/panel-body/styles.ts b/src/components/panel/components/panel-body/styles.ts
new file mode 100644
index 00000000..6229aecd
--- /dev/null
+++ b/src/components/panel/components/panel-body/styles.ts
@@ -0,0 +1,27 @@
+import { Styles } from '@lapidist/styles';
+import { PanelProps } from '../../index';
+
+export const panelBodyStyles = (): Styles => ({
+    paddingX: '4',
+    paddingLeft: '4',
+    maxWidth: '11/12',
+    marginY: '2'
+});
+
+export const panelImageStyles = (): Styles => ({
+    borderBottomColor: { group: 'grey', shade: 'lightest' },
+    borderBottomStyle: 'solid',
+    borderBottomWidth: '2',
+    marginBottom: '2',
+    width: 'full'
+});
+
+export const panelHeadingStyles = ({
+    image
+}: Pick<PanelProps, 'image'>): Styles => ({
+    padding: '4',
+    paddingTop: image ? '2' : '4',
+    paddingLeft: '4',
+    paddingBottom: '0',
+    fontWeight: 700
+});
diff --git a/src/components/panel/components/panel-buttons/PanelButtons.spec.tsx b/src/components/panel/components/panel-buttons/PanelButtons.spec.tsx
new file mode 100644
index 00000000..0c572d33
--- /dev/null
+++ b/src/components/panel/components/panel-buttons/PanelButtons.spec.tsx
@@ -0,0 +1,35 @@
+import * as React from 'react';
+import { render } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import 'jest-styled-components';
+
+import { ThemeProvider } from '../../../theme-provider';
+import { PanelButtons } from './index';
+
+const setup = (panel: React.ReactElement) =>
+    render(<ThemeProvider>{panel}</ThemeProvider>);
+
+const defaultProps = {
+    buttons: undefined
+};
+
+test('it works', () => {
+    const { container } = setup(<PanelButtons {...defaultProps} />);
+    expect(container.firstChild).toMatchSnapshot();
+});
+
+test('it works with buttons', () => {
+    const { container, getByText, getAllByRole } = setup(
+        <PanelButtons
+            {...defaultProps}
+            buttons={[
+                { title: 'Button 1', props: { kind: 'primary' } },
+                { title: 'Button 2', props: { kind: 'secondary' } }
+            ]}
+        />
+    );
+    expect(container.firstChild).toMatchSnapshot();
+    expect(getByText('Button 1')).toBeTruthy();
+    expect(getByText('Button 2')).toBeTruthy();
+    expect(getAllByRole('button').length).toBe(2);
+});
diff --git a/src/components/panel/components/panel-buttons/__snapshots__/PanelButtons.spec.tsx.snap b/src/components/panel/components/panel-buttons/__snapshots__/PanelButtons.spec.tsx.snap
new file mode 100644
index 00000000..bf03a6c5
--- /dev/null
+++ b/src/components/panel/components/panel-buttons/__snapshots__/PanelButtons.spec.tsx.snap
@@ -0,0 +1,201 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`it works 1`] = `null`;
+
+exports[`it works with buttons 1`] = `
+.c0 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  width: 100%;
+  -webkit-box-pack: end;
+  -webkit-justify-content: end;
+  -ms-flex-pack: end;
+  justify-content: end;
+  gap: 0.5rem;
+}
+
+.c2 {
+  border-style: solid;
+  text-align: center;
+  display: inline-block;
+  position: relative;
+  font-size: 1rem;
+  font-weight: 500;
+  border-radius: 0.3rem;
+  border-width: 2px;
+  box-shadow: 0 2px 3px rgba(0,0,0,0.1);
+  padding-left: 0.75rem;
+  padding-right: 0.75rem;
+  padding-top: 0.5rem;
+  padding-bottom: 0.5rem;
+  background-color: #17a3a5;
+  color: white;
+  border-color: #17a3a5;
+}
+
+.c2:hover {
+  cursor: pointer;
+  background-color: #135f61;
+  color: white;
+}
+
+.c2:hover:disabled {
+  cursor: not-allowed;
+  background-color: #135f61;
+}
+
+.c2:disabled {
+  opacity: 0.7;
+  background-color: #135f61;
+  color: white;
+}
+
+.c1 {
+  border-style: solid;
+  text-align: center;
+  display: inline-block;
+  position: relative;
+  font-size: 1rem;
+  font-weight: 500;
+  font-family: Montserrat,sans-serif;
+  line-height: 2;
+  border-radius: 0.3rem;
+  border-width: 2px;
+  box-shadow: 0 2px 3px rgba(0,0,0,0.1);
+  padding-left: 0.75rem;
+  padding-right: 0.75rem;
+  padding-top: 0.5rem;
+  padding-bottom: 0.5rem;
+  background-color: #17a3a5;
+  color: white;
+  border-color: #17a3a5;
+}
+
+.c1:hover {
+  cursor: pointer;
+  background-color: #135f61;
+  color: white;
+}
+
+.c1:hover:disabled {
+  cursor: not-allowed;
+  background-color: #135f61;
+}
+
+.c1:disabled {
+  opacity: 0.7;
+  background-color: #135f61;
+  color: white;
+}
+
+.c3 {
+  opacity: 1;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+}
+
+.c5 {
+  border-style: solid;
+  text-align: center;
+  display: inline-block;
+  position: relative;
+  font-size: 1rem;
+  font-weight: 500;
+  border-radius: 0.3rem;
+  border-width: 2px;
+  box-shadow: 0 2px 3px rgba(0,0,0,0.1);
+  padding-left: 0.75rem;
+  padding-right: 0.75rem;
+  padding-top: 0.5rem;
+  padding-bottom: 0.5rem;
+  background-color: white;
+  color: #17a3a5;
+  border-color: #d4d4d4;
+}
+
+.c5:hover {
+  cursor: pointer;
+  background-color: #fafafa;
+  color: #135f61;
+}
+
+.c5:hover:disabled {
+  cursor: not-allowed;
+  background-color: #fafafa;
+}
+
+.c5:disabled {
+  opacity: 0.7;
+  background-color: #fafafa;
+  color: #292B3E;
+}
+
+.c4 {
+  border-style: solid;
+  text-align: center;
+  display: inline-block;
+  position: relative;
+  font-size: 1rem;
+  font-weight: 500;
+  font-family: Montserrat,sans-serif;
+  line-height: 2;
+  border-radius: 0.3rem;
+  border-width: 2px;
+  box-shadow: 0 2px 3px rgba(0,0,0,0.1);
+  padding-left: 0.75rem;
+  padding-right: 0.75rem;
+  padding-top: 0.5rem;
+  padding-bottom: 0.5rem;
+  background-color: white;
+  color: #17a3a5;
+  border-color: #d4d4d4;
+}
+
+.c4:hover {
+  cursor: pointer;
+  background-color: #fafafa;
+  color: #135f61;
+}
+
+.c4:hover:disabled {
+  cursor: not-allowed;
+  background-color: #fafafa;
+}
+
+.c4:disabled {
+  opacity: 0.7;
+  background-color: #fafafa;
+  color: #292B3E;
+}
+
+<div
+  class="c0"
+>
+  <button
+    class="c1 sc-bcXHqe c2"
+  >
+    <div
+      class="c3"
+    >
+      Button 1
+    </div>
+  </button>
+  <button
+    class="c4 sc-bcXHqe c5"
+  >
+    <div
+      class="c3"
+    >
+      Button 2
+    </div>
+  </button>
+</div>
+`;
diff --git a/src/components/panel/components/panel-buttons/index.tsx b/src/components/panel/components/panel-buttons/index.tsx
new file mode 100644
index 00000000..743ac2e2
--- /dev/null
+++ b/src/components/panel/components/panel-buttons/index.tsx
@@ -0,0 +1,23 @@
+import * as React from 'react';
+import { Box } from '../../../box';
+import { Button } from '../../../button';
+import { PanelProps } from '../../index';
+import { panelButtonsStyles } from './styles';
+
+export const PanelButtons: React.FC<Pick<PanelProps, 'buttons'>> = ({
+    buttons
+}) => {
+    if (!buttons?.length) return null;
+
+    return (
+        <Box styles={panelButtonsStyles()}>
+            {buttons.map((button) => (
+                <Button key={button.title} kind="primary" {...button?.props}>
+                    {button.title}
+                </Button>
+            ))}
+        </Box>
+    );
+};
+
+PanelButtons.displayName = 'PanelButtons';
diff --git a/src/components/panel/components/panel-buttons/styles.ts b/src/components/panel/components/panel-buttons/styles.ts
new file mode 100644
index 00000000..0332e662
--- /dev/null
+++ b/src/components/panel/components/panel-buttons/styles.ts
@@ -0,0 +1,8 @@
+import { Styles } from '@lapidist/styles';
+
+export const panelButtonsStyles = (): Styles => ({
+    display: 'flex',
+    sizeGap: '2',
+    width: 'full',
+    justifyContent: 'end'
+});
diff --git a/src/components/panel/components/panel-icons/PanelIcons.spec.tsx b/src/components/panel/components/panel-icons/PanelIcons.spec.tsx
new file mode 100644
index 00000000..47cfee5e
--- /dev/null
+++ b/src/components/panel/components/panel-icons/PanelIcons.spec.tsx
@@ -0,0 +1,41 @@
+import * as React from 'react';
+import { render } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import 'jest-styled-components';
+
+import { ThemeProvider } from '../../../theme-provider';
+import { PanelIcons } from './index';
+import { PanelStatusType } from '../../index';
+
+const setup = (panel: React.ReactElement) =>
+    render(<ThemeProvider>{panel}</ThemeProvider>);
+
+const defaultProps = {
+    status: undefined,
+    tag: undefined
+};
+
+test('it works', () => {
+    const { container } = setup(<PanelIcons {...defaultProps} />);
+    expect(container.firstChild).toMatchSnapshot();
+});
+
+test('it works with status', () => {
+    const statuses: PanelStatusType[] = ['none', 'info', 'warning', 'error'];
+
+    statuses.forEach((status) => {
+        const { container } = setup(<PanelIcons status={status} />);
+        expect(container.firstChild).toMatchSnapshot();
+    });
+});
+
+test('it works with tag', () => {
+    const { container, getByText } = setup(
+        <PanelIcons
+            {...defaultProps}
+            tag={{ title: 'v1.0.0', props: { kind: 'primary' } }}
+        />
+    );
+    expect(container.firstChild).toMatchSnapshot();
+    expect(getByText('v1.0.0')).toBeTruthy();
+});
diff --git a/src/components/panel/components/panel-icons/__snapshots__/PanelIcons.spec.tsx.snap b/src/components/panel/components/panel-icons/__snapshots__/PanelIcons.spec.tsx.snap
new file mode 100644
index 00000000..52a1db80
--- /dev/null
+++ b/src/components/panel/components/panel-icons/__snapshots__/PanelIcons.spec.tsx.snap
@@ -0,0 +1,239 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`it works 1`] = `
+.c0 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+}
+
+<div
+  class="c0"
+/>
+`;
+
+exports[`it works with status 1`] = `
+.c0 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+}
+
+<div
+  class="c0"
+/>
+`;
+
+exports[`it works with status 2`] = `
+.c0 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+}
+
+.c1 {
+  font-size: 1.875rem;
+  font-weight: 400;
+  font-family: Montserrat,sans-serif;
+  line-height: 0;
+  border-radius: 9999px;
+  margin-right: 1rem;
+  background-color: white;
+  color: #73748b;
+}
+
+<div
+  class="c0"
+>
+  <p
+    class="c1"
+  >
+    <svg
+      aria-hidden="true"
+      class="svg-inline--fa fa-circle-info "
+      data-icon="circle-info"
+      data-prefix="fas"
+      focusable="false"
+      role="img"
+      viewBox="0 0 512 512"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M256 0C114.6 0 0 114.6 0 256s114.6 256 256 256s256-114.6 256-256S397.4 0 256 0zM256 128c17.67 0 32 14.33 32 32c0 17.67-14.33 32-32 32S224 177.7 224 160C224 142.3 238.3 128 256 128zM296 384h-80C202.8 384 192 373.3 192 360s10.75-24 24-24h16v-64H224c-13.25 0-24-10.75-24-24S210.8 224 224 224h32c13.25 0 24 10.75 24 24v88h16c13.25 0 24 10.75 24 24S309.3 384 296 384z"
+        fill="currentColor"
+      />
+    </svg>
+  </p>
+</div>
+`;
+
+exports[`it works with status 3`] = `
+.c0 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+}
+
+.c1 {
+  font-size: 1.875rem;
+  font-weight: 400;
+  font-family: Montserrat,sans-serif;
+  line-height: 0;
+  border-radius: 9999px;
+  margin-right: 1rem;
+  background-color: white;
+  color: #ebc764;
+}
+
+<div
+  class="c0"
+>
+  <p
+    class="c1"
+  >
+    <svg
+      aria-hidden="true"
+      class="svg-inline--fa fa-circle-exclamation "
+      data-icon="circle-exclamation"
+      data-prefix="fas"
+      focusable="false"
+      role="img"
+      viewBox="0 0 512 512"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M256 0C114.6 0 0 114.6 0 256s114.6 256 256 256s256-114.6 256-256S397.4 0 256 0zM232 152C232 138.8 242.8 128 256 128s24 10.75 24 24v128c0 13.25-10.75 24-24 24S232 293.3 232 280V152zM256 400c-17.36 0-31.44-14.08-31.44-31.44c0-17.36 14.07-31.44 31.44-31.44s31.44 14.08 31.44 31.44C287.4 385.9 273.4 400 256 400z"
+        fill="currentColor"
+      />
+    </svg>
+  </p>
+</div>
+`;
+
+exports[`it works with status 4`] = `
+.c0 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+}
+
+.c1 {
+  font-size: 1.875rem;
+  font-weight: 400;
+  font-family: Montserrat,sans-serif;
+  line-height: 0;
+  border-radius: 9999px;
+  margin-right: 1rem;
+  background-color: white;
+  color: #b41e25;
+}
+
+<div
+  class="c0"
+>
+  <p
+    class="c1"
+  >
+    <svg
+      aria-hidden="true"
+      class="svg-inline--fa fa-circle-exclamation "
+      data-icon="circle-exclamation"
+      data-prefix="fas"
+      focusable="false"
+      role="img"
+      viewBox="0 0 512 512"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M256 0C114.6 0 0 114.6 0 256s114.6 256 256 256s256-114.6 256-256S397.4 0 256 0zM232 152C232 138.8 242.8 128 256 128s24 10.75 24 24v128c0 13.25-10.75 24-24 24S232 293.3 232 280V152zM256 400c-17.36 0-31.44-14.08-31.44-31.44c0-17.36 14.07-31.44 31.44-31.44s31.44 14.08 31.44 31.44C287.4 385.9 273.4 400 256 400z"
+        fill="currentColor"
+      />
+    </svg>
+  </p>
+</div>
+`;
+
+exports[`it works with tag 1`] = `
+.c0 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+}
+
+.c1 {
+  -webkit-flex: 1 1 auto;
+  -ms-flex: 1 1 auto;
+  flex: 1 1 auto;
+}
+
+.c2 {
+  border-style: solid;
+  text-align: center;
+  font-size: 0.75rem;
+  font-weight: 500;
+  font-family: Montserrat,sans-serif;
+  line-height: 2;
+  border-radius: 0.6rem;
+  border-width: 0;
+  padding-top: 0.25rem;
+  padding-bottom: 0.25rem;
+  background-color: #135f61;
+  color: white;
+  border-color: #292B3E;
+}
+
+.c3 {
+  padding-left: 0.5rem;
+  padding-right: 0.5rem;
+  padding-top: 0.25rem;
+  padding-bottom: 0.25rem;
+}
+
+<div
+  class="c0"
+>
+  <div
+    class="c1"
+  >
+    <span
+      class="c2"
+    >
+      <span
+        class="c3"
+      >
+        v1.0.0
+      </span>
+    </span>
+  </div>
+</div>
+`;
diff --git a/src/components/panel/components/panel-icons/index.tsx b/src/components/panel/components/panel-icons/index.tsx
new file mode 100644
index 00000000..278e3166
--- /dev/null
+++ b/src/components/panel/components/panel-icons/index.tsx
@@ -0,0 +1,55 @@
+import * as React from 'react';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { IconProp } from '@fortawesome/fontawesome-svg-core';
+import {
+    faCircleCheck,
+    faCircleExclamation,
+    faCircleInfo,
+    faComment
+} from '@fortawesome/free-solid-svg-icons';
+import { Box } from '../../../box';
+import { Text } from '../../../text';
+import { Tag } from '../../../tag';
+import { PanelProps, PanelStatusType } from '../../index';
+import { panelIconStyles, panelIconsStyles, panelTagStyles } from './styles';
+
+export const PanelIcons: React.FC<Pick<PanelProps, 'status' | 'tag'>> = ({
+    status,
+    tag
+}) => {
+    const hasStatus = status && status !== 'none';
+    const hasTag = tag?.title;
+    const getIcon = (variant?: PanelStatusType): IconProp => {
+        switch (variant) {
+            case 'warning':
+            case 'error':
+                return faCircleExclamation;
+            case 'success':
+                return faCircleCheck;
+            case 'info':
+                return faCircleInfo;
+            case 'none':
+            default:
+                return faComment;
+        }
+    };
+
+    return (
+        <Box styles={panelIconsStyles()}>
+            {hasStatus && (
+                <Text styles={panelIconStyles({ status })}>
+                    <FontAwesomeIcon icon={getIcon(status)} />
+                </Text>
+            )}
+            {hasTag && (
+                <Box styles={panelTagStyles()}>
+                    <Tag kind="primary" {...tag?.props}>
+                        {tag.title}
+                    </Tag>
+                </Box>
+            )}
+        </Box>
+    );
+};
+
+PanelIcons.displayName = 'PanelIcons';
diff --git a/src/components/panel/components/panel-icons/styles.ts b/src/components/panel/components/panel-icons/styles.ts
new file mode 100644
index 00000000..424da526
--- /dev/null
+++ b/src/components/panel/components/panel-icons/styles.ts
@@ -0,0 +1,40 @@
+import { Styles } from '@lapidist/styles';
+import { PanelProps } from '../../index';
+
+export const panelIconsStyles = (): Styles => ({
+    display: 'flex',
+    alignItems: 'center'
+});
+
+export const panelIconStyles = ({ status }: Pick<PanelProps, 'status'>) => {
+    const variantStyles = {
+        none: {
+            textColor: { shade: 'base', group: 'grey' }
+        },
+        info: {
+            textColor: { shade: 'base', group: 'grey' }
+        },
+        warning: {
+            textColor: { shade: 'base', group: 'secondary' }
+        },
+        error: {
+            textColor: { shade: 'base', group: 'danger' }
+        },
+        success: {
+            textColor: { shade: 'base', group: 'tertiary' }
+        }
+    };
+
+    return {
+        marginRight: '4',
+        fontSize: '7',
+        borderRadius: 'rounded',
+        lineHeight: '0',
+        backgroundColor: { group: 'base', shade: 'light' },
+        ...variantStyles[status || 'none']
+    };
+};
+
+export const panelTagStyles = (): Styles => ({
+    flex: '1 1 auto'
+});
diff --git a/src/components/panel/index.tsx b/src/components/panel/index.tsx
index 2ccfa890..7517068e 100644
--- a/src/components/panel/index.tsx
+++ b/src/components/panel/index.tsx
@@ -1,23 +1,55 @@
 import * as React from 'react';
 import { withTheme } from 'styled-components';
 import { mergeStyles, Theme } from '@lapidist/styles';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faClose } from '@fortawesome/free-solid-svg-icons';
 import { Elevated, ElevationHeight } from '../elevated';
 import { BoxProps } from '../box';
 import { Spinner } from '../spinner';
-import { Heading, HeadingProps, HeadingPropType } from '../heading';
-import { panelStyles } from './styles';
+import { HeadingProps, HeadingPropType } from '../heading';
+import { TagProps, TagPropType } from '../tag';
+import { Button, ButtonProps, ButtonPropType } from '../button';
+import {
+    panelStyles,
+    panelSpinnerStyles,
+    panelLoadingStyles,
+    panelCloseButtonStyles
+} from './styles';
+import { ImagePropType } from '../image';
+import { PanelActions } from './components/panel-actions';
+import { PanelBody } from './components/panel-body';
 
 export * from './styles';
 
 export type PanelPropType = BoxProps;
 
+export type PanelStatusType = 'none' | 'info' | 'warning' | 'error' | 'success';
+
+export type PanelHeadingProp = {
+    readonly title: string;
+    readonly props?: Omit<HeadingProps & HeadingPropType, 'ref' | 'theme'>;
+};
+
+export type PanelTagProp = {
+    readonly title: string;
+    readonly props?: Omit<TagProps & TagPropType, 'ref' | 'theme'>;
+};
+
+export type PanelButtonProp = {
+    readonly title: string;
+    readonly props?: Omit<ButtonProps & ButtonPropType, 'ref' | 'theme'>;
+};
+
 export interface PanelProps {
     readonly loading?: boolean;
-    readonly heading?: {
-        title: string;
-        props?: HeadingProps & HeadingPropType;
-    };
+    readonly dismissable?: boolean;
+    readonly onDismiss?: () => void;
+    readonly status?: PanelStatusType;
+    readonly heading?: PanelHeadingProp;
     readonly elevation?: ElevationHeight;
+    readonly tag?: PanelTagProp;
+    readonly buttons?: PanelButtonProp[];
+    readonly image?: ImagePropType;
     readonly theme: Theme;
 }
 
@@ -25,43 +57,58 @@ const BasePanel: React.FC<PanelPropType & PanelProps> = ({
     as = 'div',
     styles,
     loading,
+    dismissable,
+    onDismiss,
+    status,
     heading,
     elevation = '1',
+    tag,
+    buttons,
+    image,
     children,
     ...restProps
-}) =>
-    loading ? (
+}) => {
+    const [dismissed, setDismissed] = React.useState(false);
+
+    const handleDismiss = () => {
+        setDismissed(!dismissed);
+        onDismiss && onDismiss();
+    };
+
+    if (dismissed) return null;
+
+    return (
         <Elevated
             as={as}
             elevation={elevation}
-            styles={mergeStyles(panelStyles(), {
-                ...styles,
-                display: 'flex',
-                alignItems: 'center',
-                justifyContent: 'center'
+            styles={mergeStyles(panelStyles({ status, ...restProps }), {
+                ...panelLoadingStyles({ loading, ...restProps }),
+                ...styles
             })}
             {...restProps}
         >
-            <Spinner styles={{ sizeWidth: 16 }} />
-        </Elevated>
-    ) : (
-        <Elevated
-            as={as}
-            elevation={elevation}
-            styles={mergeStyles(panelStyles(), styles)}
-            {...restProps}
-        >
-            {heading?.title && (
-                <Heading
-                    styles={{ marginBottom: '4', fontWeight: 700 }}
-                    {...heading?.props}
+            {loading ? (
+                <Spinner styles={panelSpinnerStyles()} />
+            ) : (
+                <>
+                    <PanelBody heading={heading} image={image}>
+                        {children}
+                    </PanelBody>
+                    <PanelActions tag={tag} buttons={buttons} status={status} />
+                </>
+            )}
+            {dismissable && (
+                <Button
+                    styles={panelCloseButtonStyles()}
+                    kind="tertiary"
+                    onClick={handleDismiss}
                 >
-                    {heading.title}
-                </Heading>
+                    <FontAwesomeIcon icon={faClose} />
+                </Button>
             )}
-            {children}
         </Elevated>
     );
+};
 
 export const Panel = withTheme(BasePanel);
 
diff --git a/src/components/panel/styles.ts b/src/components/panel/styles.ts
index b28ab561..0ef0a150 100644
--- a/src/components/panel/styles.ts
+++ b/src/components/panel/styles.ts
@@ -1,9 +1,57 @@
 import { Styles } from '@lapidist/styles';
+import { PanelProps } from './index';
 
-export const panelStyles = (): Styles => ({
-    borderRadius: '2',
-    paddingX: '4',
-    paddingY: '3',
-    sizeMinHeight: '32',
-    backgroundColor: { shade: 'light', group: 'base' }
+export const panelStyles = ({ status }: PanelProps): Styles => {
+    const variantStyles = {
+        none: {
+            borderColor: { shade: 'transparent', group: 'base' }
+        },
+        info: {
+            borderColor: { shade: 'base', group: 'grey' }
+        },
+        warning: {
+            borderColor: { shade: 'base', group: 'secondary' }
+        },
+        error: {
+            borderColor: { shade: 'base', group: 'danger' }
+        },
+        success: {
+            borderColor: { shade: 'base', group: 'tertiary' }
+        }
+    };
+
+    return {
+        borderStyle: 'solid',
+        borderWidth: '1',
+        borderRadius: '2',
+        sizeMinHeight: '32',
+        backgroundColor: { shade: 'light', group: 'base' },
+        ...variantStyles[status || 'none']
+    };
+};
+
+export const panelSpinnerStyles = (): Styles => ({ sizeWidth: 16 });
+
+export const panelCloseButtonStyles = (): Styles => ({
+    position: 'absolute',
+    top: '0',
+    right: '0',
+    marginTop: '6',
+    marginRight: '6'
+});
+
+export const panelLoadingStyles = ({ loading }: PanelProps): Styles =>
+    loading
+        ? {
+              display: 'flex',
+              alignItems: 'center',
+              justifyContent: 'center',
+              paddingLeft: '0'
+          }
+        : {};
+
+export const panelMessageStyles = () => ({
+    display: 'flex',
+    alignItems: 'center',
+    fontSize: '2'
 });
diff --git a/src/components/status-message/StatusMessage.spec.tsx b/src/components/status-message/StatusMessage.spec.tsx
deleted file mode 100644
index 280298e9..00000000
--- a/src/components/status-message/StatusMessage.spec.tsx
+++ /dev/null
@@ -1,54 +0,0 @@
-import * as React from 'react';
-import { render, fireEvent } from '@testing-library/react';
-import '@testing-library/jest-dom';
-import 'jest-styled-components';
-
-import { ThemeProvider } from '../theme-provider';
-import { StatusMessage, StatusMessageVariantType } from './index';
-
-const setup = (statusMessage: React.ReactElement) =>
-    render(<ThemeProvider>{statusMessage}</ThemeProvider>);
-
-test('it works', () => {
-    const { container } = setup(
-        <StatusMessage message="I am a status message" />
-    );
-    expect(container.firstChild).toMatchSnapshot();
-});
-
-test('it works with different variants', () => {
-    const variants: StatusMessageVariantType[] = [
-        'info',
-        'success',
-        'warning',
-        'error'
-    ];
-    variants.forEach((variant) => {
-        const { container } = setup(
-            <StatusMessage variant={variant} message="I am a status message" />
-        );
-        expect(container.firstChild).toMatchSnapshot();
-    });
-});
-
-test('it renders message', () => {
-    const { getByText } = setup(
-        <StatusMessage message="I am a status message" />
-    );
-    expect(getByText('I am a status message')).toBeTruthy();
-});
-
-test('it renders dismiss button', () => {
-    const { getByRole } = setup(
-        <StatusMessage message="I am a status message" dismissable />
-    );
-    expect(getByRole('button')).toBeTruthy();
-});
-
-test('it dismisses when dismiss button clicked', () => {
-    const { queryByText, getByRole } = setup(
-        <StatusMessage message="I am a status message" dismissable />
-    );
-    fireEvent.click(getByRole('button'));
-    expect(queryByText('I am a status message')).toBeFalsy();
-});
diff --git a/src/components/status-message/StatusMessage.stories.tsx b/src/components/status-message/StatusMessage.stories.tsx
deleted file mode 100644
index 1c78e389..00000000
--- a/src/components/status-message/StatusMessage.stories.tsx
+++ /dev/null
@@ -1,73 +0,0 @@
-import * as React from 'react';
-import { ThemeProvider } from '../theme-provider';
-import { StatusMessage } from './index';
-
-export default {
-    title: 'Components/StatusMessage',
-    component: StatusMessage,
-    decorators: [(getStory) => <ThemeProvider>{getStory()}</ThemeProvider>]
-};
-
-const templateStyles = {};
-
-const DefaultTemplate = (args) => <StatusMessage {...args} />;
-
-export const Info = DefaultTemplate.bind({});
-Info.args = {
-    variant: 'info',
-    message: 'I am a status message',
-    styles: templateStyles
-};
-
-export const Warning = DefaultTemplate.bind({});
-Warning.args = {
-    variant: 'warning',
-    message: 'I am a status message',
-    styles: templateStyles
-};
-
-export const Error = DefaultTemplate.bind({});
-Error.args = {
-    variant: 'error',
-    message: 'I am a status message',
-    styles: templateStyles
-};
-
-export const Success = DefaultTemplate.bind({});
-Success.args = {
-    variant: 'success',
-    message: 'I am a status message',
-    styles: templateStyles
-};
-
-export const InfoDismissable = DefaultTemplate.bind({});
-InfoDismissable.args = {
-    variant: 'info',
-    dismissable: true,
-    message: 'I am a status message',
-    styles: templateStyles
-};
-
-export const WarningDismissable = DefaultTemplate.bind({});
-WarningDismissable.args = {
-    variant: 'warning',
-    dismissable: true,
-    message: 'I am a status message',
-    styles: templateStyles
-};
-
-export const ErrorDismissable = DefaultTemplate.bind({});
-ErrorDismissable.args = {
-    variant: 'error',
-    dismissable: true,
-    message: 'I am a status message',
-    styles: templateStyles
-};
-
-export const SuccessDismissable = DefaultTemplate.bind({});
-SuccessDismissable.args = {
-    variant: 'success',
-    dismissable: true,
-    message: 'I am a status message',
-    styles: templateStyles
-};
diff --git a/src/components/status-message/__snapshots__/StatusMessage.spec.tsx.snap b/src/components/status-message/__snapshots__/StatusMessage.spec.tsx.snap
deleted file mode 100644
index 91eed345..00000000
--- a/src/components/status-message/__snapshots__/StatusMessage.spec.tsx.snap
+++ /dev/null
@@ -1,416 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`it works 1`] = `
-.c0 {
-  border-style: solid;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  border-radius: 0.3rem;
-  border-width: 1px;
-  border-left-width: 4px;
-  box-shadow: 0 2px 3px rgba(0,0,0,0.1);
-  -webkit-box-pack: justify;
-  -webkit-justify-content: space-between;
-  -ms-flex-pack: justify;
-  justify-content: space-between;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  padding-left: 1rem;
-  padding-right: 1rem;
-  padding-top: 0.5rem;
-  padding-bottom: 0.5rem;
-  background-color: white;
-  border-color: #73748b;
-}
-
-.c1 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  font-size: 0.875rem;
-  font-weight: 400;
-  font-family: Montserrat,sans-serif;
-  line-height: 2;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  color: #292B3E;
-}
-
-.c2 {
-  display: inline;
-  font-size: 1rem;
-  font-weight: 400;
-  font-family: Montserrat,sans-serif;
-  line-height: 2;
-  margin-right: 0.75rem;
-  color: #292B3E;
-}
-
-<div
-  class="c0"
->
-  <p
-    class="c1"
-  >
-    <p
-      class="c2"
-    >
-      <svg
-        aria-hidden="true"
-        class="svg-inline--fa fa-circle-info "
-        data-icon="circle-info"
-        data-prefix="fas"
-        focusable="false"
-        role="img"
-        viewBox="0 0 512 512"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <path
-          d="M256 0C114.6 0 0 114.6 0 256s114.6 256 256 256s256-114.6 256-256S397.4 0 256 0zM256 128c17.67 0 32 14.33 32 32c0 17.67-14.33 32-32 32S224 177.7 224 160C224 142.3 238.3 128 256 128zM296 384h-80C202.8 384 192 373.3 192 360s10.75-24 24-24h16v-64H224c-13.25 0-24-10.75-24-24S210.8 224 224 224h32c13.25 0 24 10.75 24 24v88h16c13.25 0 24 10.75 24 24S309.3 384 296 384z"
-          fill="currentColor"
-        />
-      </svg>
-    </p>
-    I am a status message
-  </p>
-</div>
-`;
-
-exports[`it works with different variants 1`] = `
-.c0 {
-  border-style: solid;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  border-radius: 0.3rem;
-  border-width: 1px;
-  border-left-width: 4px;
-  box-shadow: 0 2px 3px rgba(0,0,0,0.1);
-  -webkit-box-pack: justify;
-  -webkit-justify-content: space-between;
-  -ms-flex-pack: justify;
-  justify-content: space-between;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  padding-left: 1rem;
-  padding-right: 1rem;
-  padding-top: 0.5rem;
-  padding-bottom: 0.5rem;
-  background-color: white;
-  border-color: #73748b;
-}
-
-.c1 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  font-size: 0.875rem;
-  font-weight: 400;
-  font-family: Montserrat,sans-serif;
-  line-height: 2;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  color: #292B3E;
-}
-
-.c2 {
-  display: inline;
-  font-size: 1rem;
-  font-weight: 400;
-  font-family: Montserrat,sans-serif;
-  line-height: 2;
-  margin-right: 0.75rem;
-  color: #292B3E;
-}
-
-<div
-  class="c0"
->
-  <p
-    class="c1"
-  >
-    <p
-      class="c2"
-    >
-      <svg
-        aria-hidden="true"
-        class="svg-inline--fa fa-circle-info "
-        data-icon="circle-info"
-        data-prefix="fas"
-        focusable="false"
-        role="img"
-        viewBox="0 0 512 512"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <path
-          d="M256 0C114.6 0 0 114.6 0 256s114.6 256 256 256s256-114.6 256-256S397.4 0 256 0zM256 128c17.67 0 32 14.33 32 32c0 17.67-14.33 32-32 32S224 177.7 224 160C224 142.3 238.3 128 256 128zM296 384h-80C202.8 384 192 373.3 192 360s10.75-24 24-24h16v-64H224c-13.25 0-24-10.75-24-24S210.8 224 224 224h32c13.25 0 24 10.75 24 24v88h16c13.25 0 24 10.75 24 24S309.3 384 296 384z"
-          fill="currentColor"
-        />
-      </svg>
-    </p>
-    I am a status message
-  </p>
-</div>
-`;
-
-exports[`it works with different variants 2`] = `
-.c1 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  font-size: 0.875rem;
-  font-weight: 400;
-  font-family: Montserrat,sans-serif;
-  line-height: 2;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  color: #292B3E;
-}
-
-.c0 {
-  border-style: solid;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  border-radius: 0.3rem;
-  border-width: 1px;
-  border-left-width: 4px;
-  box-shadow: 0 2px 3px rgba(0,0,0,0.1);
-  -webkit-box-pack: justify;
-  -webkit-justify-content: space-between;
-  -ms-flex-pack: justify;
-  justify-content: space-between;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  padding-left: 1rem;
-  padding-right: 1rem;
-  padding-top: 0.5rem;
-  padding-bottom: 0.5rem;
-  background-color: white;
-  border-color: #72af5d;
-}
-
-.c2 {
-  display: inline;
-  font-size: 1rem;
-  font-weight: 400;
-  font-family: Montserrat,sans-serif;
-  line-height: 2;
-  margin-right: 0.75rem;
-  color: #548230;
-}
-
-<div
-  class="c0"
->
-  <p
-    class="c1"
-  >
-    <p
-      class="c2"
-    >
-      <svg
-        aria-hidden="true"
-        class="svg-inline--fa fa-circle-check "
-        data-icon="circle-check"
-        data-prefix="fas"
-        focusable="false"
-        role="img"
-        viewBox="0 0 512 512"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <path
-          d="M0 256C0 114.6 114.6 0 256 0C397.4 0 512 114.6 512 256C512 397.4 397.4 512 256 512C114.6 512 0 397.4 0 256zM371.8 211.8C382.7 200.9 382.7 183.1 371.8 172.2C360.9 161.3 343.1 161.3 332.2 172.2L224 280.4L179.8 236.2C168.9 225.3 151.1 225.3 140.2 236.2C129.3 247.1 129.3 264.9 140.2 275.8L204.2 339.8C215.1 350.7 232.9 350.7 243.8 339.8L371.8 211.8z"
-          fill="currentColor"
-        />
-      </svg>
-    </p>
-    I am a status message
-  </p>
-</div>
-`;
-
-exports[`it works with different variants 3`] = `
-.c1 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  font-size: 0.875rem;
-  font-weight: 400;
-  font-family: Montserrat,sans-serif;
-  line-height: 2;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  color: #292B3E;
-}
-
-.c0 {
-  border-style: solid;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  border-radius: 0.3rem;
-  border-width: 1px;
-  border-left-width: 4px;
-  box-shadow: 0 2px 3px rgba(0,0,0,0.1);
-  -webkit-box-pack: justify;
-  -webkit-justify-content: space-between;
-  -ms-flex-pack: justify;
-  justify-content: space-between;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  padding-left: 1rem;
-  padding-right: 1rem;
-  padding-top: 0.5rem;
-  padding-bottom: 0.5rem;
-  background-color: white;
-  border-color: #ebc764;
-}
-
-.c2 {
-  display: inline;
-  font-size: 1rem;
-  font-weight: 400;
-  font-family: Montserrat,sans-serif;
-  line-height: 2;
-  margin-right: 0.75rem;
-  color: #937032;
-}
-
-<div
-  class="c0"
->
-  <p
-    class="c1"
-  >
-    <p
-      class="c2"
-    >
-      <svg
-        aria-hidden="true"
-        class="svg-inline--fa fa-circle-exclamation "
-        data-icon="circle-exclamation"
-        data-prefix="fas"
-        focusable="false"
-        role="img"
-        viewBox="0 0 512 512"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <path
-          d="M256 0C114.6 0 0 114.6 0 256s114.6 256 256 256s256-114.6 256-256S397.4 0 256 0zM232 152C232 138.8 242.8 128 256 128s24 10.75 24 24v128c0 13.25-10.75 24-24 24S232 293.3 232 280V152zM256 400c-17.36 0-31.44-14.08-31.44-31.44c0-17.36 14.07-31.44 31.44-31.44s31.44 14.08 31.44 31.44C287.4 385.9 273.4 400 256 400z"
-          fill="currentColor"
-        />
-      </svg>
-    </p>
-    I am a status message
-  </p>
-</div>
-`;
-
-exports[`it works with different variants 4`] = `
-.c1 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  font-size: 0.875rem;
-  font-weight: 400;
-  font-family: Montserrat,sans-serif;
-  line-height: 2;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  color: #292B3E;
-}
-
-.c0 {
-  border-style: solid;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  border-radius: 0.3rem;
-  border-width: 1px;
-  border-left-width: 4px;
-  box-shadow: 0 2px 3px rgba(0,0,0,0.1);
-  -webkit-box-pack: justify;
-  -webkit-justify-content: space-between;
-  -ms-flex-pack: justify;
-  justify-content: space-between;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  padding-left: 1rem;
-  padding-right: 1rem;
-  padding-top: 0.5rem;
-  padding-bottom: 0.5rem;
-  background-color: white;
-  border-color: #b41e25;
-}
-
-.c2 {
-  display: inline;
-  font-size: 1rem;
-  font-weight: 400;
-  font-family: Montserrat,sans-serif;
-  line-height: 2;
-  margin-right: 0.75rem;
-  color: #810000;
-}
-
-<div
-  class="c0"
->
-  <p
-    class="c1"
-  >
-    <p
-      class="c2"
-    >
-      <svg
-        aria-hidden="true"
-        class="svg-inline--fa fa-circle-exclamation "
-        data-icon="circle-exclamation"
-        data-prefix="fas"
-        focusable="false"
-        role="img"
-        viewBox="0 0 512 512"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <path
-          d="M256 0C114.6 0 0 114.6 0 256s114.6 256 256 256s256-114.6 256-256S397.4 0 256 0zM232 152C232 138.8 242.8 128 256 128s24 10.75 24 24v128c0 13.25-10.75 24-24 24S232 293.3 232 280V152zM256 400c-17.36 0-31.44-14.08-31.44-31.44c0-17.36 14.07-31.44 31.44-31.44s31.44 14.08 31.44 31.44C287.4 385.9 273.4 400 256 400z"
-          fill="currentColor"
-        />
-      </svg>
-    </p>
-    I am a status message
-  </p>
-</div>
-`;
diff --git a/src/components/status-message/index.tsx b/src/components/status-message/index.tsx
deleted file mode 100644
index e8d35a9c..00000000
--- a/src/components/status-message/index.tsx
+++ /dev/null
@@ -1,101 +0,0 @@
-import * as React from 'react';
-import { withTheme } from 'styled-components';
-import { mergeStyles, Theme } from '@lapidist/styles';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import {
-    faClose,
-    faCircleInfo,
-    faCircleExclamation,
-    faCircleCheck
-} from '@fortawesome/free-solid-svg-icons';
-import { Text } from '../text';
-import { BoxProps } from '../box';
-import { Elevated } from '../elevated';
-import { Button } from '../button';
-import {
-    statusMessageIconStyles,
-    statusMessageMessageStyles,
-    statusMessageStyles
-} from './styles';
-
-export * from './styles';
-
-export type StatusMessagePropType = BoxProps;
-
-export type StatusMessageVariantType = 'info' | 'warning' | 'error' | 'success';
-
-export interface StatusMessageProps {
-    readonly variant?: StatusMessageVariantType;
-    readonly message: string;
-    readonly dismissable?: boolean;
-    readonly theme: Theme;
-}
-
-const BaseStatusMessage: React.FC<StatusMessagePropType & StatusMessageProps> =
-    ({
-        as = 'div',
-        styles,
-        variant = 'info',
-        message,
-        dismissable,
-        theme,
-        ...restProps
-    }) => {
-        const [dismissed, setDismissed] = React.useState(false);
-
-        const handleDismiss = () => setDismissed(!dismissed);
-
-        const getIcon = (variant?: StatusMessageVariantType) => {
-            switch (variant) {
-                case 'warning':
-                case 'error':
-                    return faCircleExclamation;
-                case 'success':
-                    return faCircleCheck;
-                case 'info':
-                default:
-                    return faCircleInfo;
-            }
-        };
-
-        if (dismissed) return null;
-
-        return (
-            <Elevated
-                as={as}
-                elevation="1"
-                styles={mergeStyles(
-                    statusMessageStyles({ theme, message, variant }),
-                    styles
-                )}
-                {...restProps}
-            >
-                <Text styles={statusMessageMessageStyles()}>
-                    <Text
-                        styles={statusMessageIconStyles({
-                            theme,
-                            message,
-                            variant
-                        })}
-                    >
-                        <FontAwesomeIcon icon={getIcon(variant)} />
-                    </Text>
-                    {message}
-                </Text>
-                {dismissable && (
-                    <Button
-                        kind="tertiary"
-                        variant="small"
-                        onClick={handleDismiss}
-                        styles={{ minHeight: '2rem' }}
-                    >
-                        <FontAwesomeIcon icon={faClose} />
-                    </Button>
-                )}
-            </Elevated>
-        );
-    };
-
-export const StatusMessage = withTheme(BaseStatusMessage);
-
-StatusMessage.displayName = 'StatusMessage';
diff --git a/src/components/status-message/styles.ts b/src/components/status-message/styles.ts
deleted file mode 100644
index f68b65cd..00000000
--- a/src/components/status-message/styles.ts
+++ /dev/null
@@ -1,69 +0,0 @@
-import { Styles } from '@lapidist/styles';
-import { StatusMessageProps } from './index';
-
-export const statusMessageStyles = ({
-    variant
-}: StatusMessageProps): Styles => {
-    const baseStyles = {
-        display: 'flex',
-        alignItems: 'center',
-        justifyContent: 'space-between',
-        borderRadius: '2',
-        borderLeftWidth: '2',
-        borderWidth: 'px',
-        borderStyle: 'solid',
-        paddingX: '4',
-        paddingY: '2',
-        backgroundColor: { shade: 'light', group: 'base' }
-    };
-
-    const variantStyles = {
-        info: {
-            borderColor: { shade: 'base', group: 'grey' }
-        },
-        warning: {
-            borderColor: { shade: 'base', group: 'secondary' }
-        },
-        error: {
-            borderColor: { shade: 'base', group: 'danger' }
-        },
-        success: {
-            borderColor: { shade: 'base', group: 'tertiary' }
-        }
-    };
-
-    return {
-        ...baseStyles,
-        ...variantStyles[variant || 'info']
-    };
-};
-
-export const statusMessageMessageStyles = () => ({
-    display: 'flex',
-    alignItems: 'center',
-    fontSize: '2'
-});
-
-export const statusMessageIconStyles = ({ variant }: StatusMessageProps) => {
-    const variantStyles = {
-        info: {
-            textColor: { shade: 'dark', group: 'grey' }
-        },
-        warning: {
-            textColor: { shade: 'dark', group: 'secondary' }
-        },
-        error: {
-            textColor: { shade: 'dark', group: 'danger' }
-        },
-        success: {
-            textColor: { shade: 'dark', group: 'tertiary' }
-        }
-    };
-
-    return {
-        ...variantStyles[variant || 'info'],
-        display: 'inline',
-        marginRight: '3',
-        fontSize: '3'
-    };
-};
diff --git a/src/components/text/Text.spec.tsx b/src/components/text/Text.spec.tsx
index 13c547f8..8514f212 100644
--- a/src/components/text/Text.spec.tsx
+++ b/src/components/text/Text.spec.tsx
@@ -8,7 +8,7 @@ import { ThemeProvider } from '../theme-provider';
 
 const setup = (
     props?: TextPropType,
-    children: React.ReactElement = <p>Hello world!</p>
+    children: React.ReactElement = <>Hello world!</>
 ) =>
     render(
         <ThemeProvider>
diff --git a/src/components/text/__snapshots__/Text.spec.tsx.snap b/src/components/text/__snapshots__/Text.spec.tsx.snap
index 71545936..12f6d113 100644
--- a/src/components/text/__snapshots__/Text.spec.tsx.snap
+++ b/src/components/text/__snapshots__/Text.spec.tsx.snap
@@ -12,9 +12,7 @@ exports[`it works with defaults 1`] = `
 <p
   class="c0"
 >
-  <p>
-    Hello world!
-  </p>
+  Hello world!
 </p>
 `;
 
@@ -31,8 +29,6 @@ exports[`it works with styles 1`] = `
 <p
   class="c0"
 >
-  <p>
-    Hello world!
-  </p>
+  Hello world!
 </p>
 `;
diff --git a/src/components/toggle/__snapshots__/Toggle.spec.tsx.snap b/src/components/toggle/__snapshots__/Toggle.spec.tsx.snap
index 7418fc63..ec0a1f02 100644
--- a/src/components/toggle/__snapshots__/Toggle.spec.tsx.snap
+++ b/src/components/toggle/__snapshots__/Toggle.spec.tsx.snap
@@ -11,8 +11,8 @@ exports[`it works 1`] = `
   border-radius: 9999px;
   border-width: 2px;
   box-shadow: 0 2px 3px rgba(0,0,0,0.1);
-  padding-left: 1rem;
-  padding-right: 1rem;
+  padding-left: 0.75rem;
+  padding-right: 0.75rem;
   padding-top: 0.5rem;
   padding-bottom: 0.5rem;
   background-color: #17a3a5;
@@ -53,8 +53,8 @@ exports[`it works 1`] = `
   border-radius: 9999px;
   border-width: 2px;
   box-shadow: 0 2px 3px rgba(0,0,0,0.1);
-  padding-left: 1rem;
-  padding-right: 1rem;
+  padding-left: 0.75rem;
+  padding-right: 0.75rem;
   padding-top: 0.5rem;
   padding-bottom: 0.5rem;
   background-color: #17a3a5;
@@ -145,11 +145,11 @@ exports[`it works 2`] = `
   border-radius: 9999px;
   border-width: 2px;
   box-shadow: 0 2px 3px rgba(0,0,0,0.1);
-  padding-left: 1rem;
-  padding-right: 1rem;
+  padding-left: 0.75rem;
+  padding-right: 0.75rem;
   padding-top: 0.5rem;
   padding-bottom: 0.5rem;
-  background-color: transparent;
+  background-color: white;
   color: #17a3a5;
   border-color: #d4d4d4;
   border-top-color: transparent;
@@ -187,11 +187,11 @@ exports[`it works 2`] = `
   border-radius: 9999px;
   border-width: 2px;
   box-shadow: 0 2px 3px rgba(0,0,0,0.1);
-  padding-left: 1rem;
-  padding-right: 1rem;
+  padding-left: 0.75rem;
+  padding-right: 0.75rem;
   padding-top: 0.5rem;
   padding-bottom: 0.5rem;
-  background-color: transparent;
+  background-color: white;
   color: #17a3a5;
   border-color: #d4d4d4;
   border-top-color: transparent;
@@ -267,11 +267,11 @@ exports[`it works 3`] = `
   border-radius: 9999px;
   border-width: 2px;
   box-shadow: 0 2px 3px rgba(0,0,0,0.1);
-  padding-left: 1rem;
-  padding-right: 1rem;
+  padding-left: 0.75rem;
+  padding-right: 0.75rem;
   padding-top: 0.5rem;
   padding-bottom: 0.5rem;
-  background-color: transparent;
+  background-color: white;
   color: #73748b;
   border-color: #fafafa;
   border-top-color: transparent;
@@ -309,11 +309,11 @@ exports[`it works 3`] = `
   border-radius: 9999px;
   border-width: 2px;
   box-shadow: 0 2px 3px rgba(0,0,0,0.1);
-  padding-left: 1rem;
-  padding-right: 1rem;
+  padding-left: 0.75rem;
+  padding-right: 0.75rem;
   padding-top: 0.5rem;
   padding-bottom: 0.5rem;
-  background-color: transparent;
+  background-color: white;
   color: #73748b;
   border-color: #fafafa;
   border-top-color: transparent;
@@ -389,11 +389,11 @@ exports[`it works 4`] = `
   border-radius: 9999px;
   border-width: 2px;
   box-shadow: 0 2px 3px rgba(0,0,0,0.1);
-  padding-left: 1rem;
-  padding-right: 1rem;
+  padding-left: 0.75rem;
+  padding-right: 0.75rem;
   padding-top: 0.5rem;
   padding-bottom: 0.5rem;
-  background-color: transparent;
+  background-color: white;
   color: #b41e25;
   border-color: #810000;
   border-top-color: transparent;
@@ -431,11 +431,11 @@ exports[`it works 4`] = `
   border-radius: 9999px;
   border-width: 2px;
   box-shadow: 0 2px 3px rgba(0,0,0,0.1);
-  padding-left: 1rem;
-  padding-right: 1rem;
+  padding-left: 0.75rem;
+  padding-right: 0.75rem;
   padding-top: 0.5rem;
   padding-bottom: 0.5rem;
-  background-color: transparent;
+  background-color: white;
   color: #b41e25;
   border-color: #810000;
   border-top-color: transparent;
@@ -499,8 +499,8 @@ exports[`it works with checked 1`] = `
   border-radius: 9999px;
   border-width: 2px;
   box-shadow: 0 2px 3px rgba(0,0,0,0.1);
-  padding-left: 1rem;
-  padding-right: 1rem;
+  padding-left: 0.75rem;
+  padding-right: 0.75rem;
   padding-top: 0.5rem;
   padding-bottom: 0.5rem;
   background-color: #17a3a5;
@@ -541,8 +541,8 @@ exports[`it works with checked 1`] = `
   border-radius: 9999px;
   border-width: 2px;
   box-shadow: 0 2px 3px rgba(0,0,0,0.1);
-  padding-left: 1rem;
-  padding-right: 1rem;
+  padding-left: 0.75rem;
+  padding-right: 0.75rem;
   padding-top: 0.5rem;
   padding-bottom: 0.5rem;
   background-color: #17a3a5;
@@ -633,11 +633,11 @@ exports[`it works with checked 2`] = `
   border-radius: 9999px;
   border-width: 2px;
   box-shadow: 0 2px 3px rgba(0,0,0,0.1);
-  padding-left: 1rem;
-  padding-right: 1rem;
+  padding-left: 0.75rem;
+  padding-right: 0.75rem;
   padding-top: 0.5rem;
   padding-bottom: 0.5rem;
-  background-color: transparent;
+  background-color: white;
   color: #17a3a5;
   border-color: #d4d4d4;
   border-top-color: #73748b;
@@ -675,11 +675,11 @@ exports[`it works with checked 2`] = `
   border-radius: 9999px;
   border-width: 2px;
   box-shadow: 0 2px 3px rgba(0,0,0,0.1);
-  padding-left: 1rem;
-  padding-right: 1rem;
+  padding-left: 0.75rem;
+  padding-right: 0.75rem;
   padding-top: 0.5rem;
   padding-bottom: 0.5rem;
-  background-color: transparent;
+  background-color: white;
   color: #17a3a5;
   border-color: #d4d4d4;
   border-top-color: #73748b;
@@ -755,11 +755,11 @@ exports[`it works with checked 3`] = `
   border-radius: 9999px;
   border-width: 2px;
   box-shadow: 0 2px 3px rgba(0,0,0,0.1);
-  padding-left: 1rem;
-  padding-right: 1rem;
+  padding-left: 0.75rem;
+  padding-right: 0.75rem;
   padding-top: 0.5rem;
   padding-bottom: 0.5rem;
-  background-color: transparent;
+  background-color: white;
   color: #73748b;
   border-color: #fafafa;
   border-top-color: #73748b;
@@ -797,11 +797,11 @@ exports[`it works with checked 3`] = `
   border-radius: 9999px;
   border-width: 2px;
   box-shadow: 0 2px 3px rgba(0,0,0,0.1);
-  padding-left: 1rem;
-  padding-right: 1rem;
+  padding-left: 0.75rem;
+  padding-right: 0.75rem;
   padding-top: 0.5rem;
   padding-bottom: 0.5rem;
-  background-color: transparent;
+  background-color: white;
   color: #73748b;
   border-color: #fafafa;
   border-top-color: #73748b;
@@ -877,11 +877,11 @@ exports[`it works with checked 4`] = `
   border-radius: 9999px;
   border-width: 2px;
   box-shadow: 0 2px 3px rgba(0,0,0,0.1);
-  padding-left: 1rem;
-  padding-right: 1rem;
+  padding-left: 0.75rem;
+  padding-right: 0.75rem;
   padding-top: 0.5rem;
   padding-bottom: 0.5rem;
-  background-color: transparent;
+  background-color: white;
   color: #b41e25;
   border-color: #810000;
   border-top-color: #73748b;
@@ -919,11 +919,11 @@ exports[`it works with checked 4`] = `
   border-radius: 9999px;
   border-width: 2px;
   box-shadow: 0 2px 3px rgba(0,0,0,0.1);
-  padding-left: 1rem;
-  padding-right: 1rem;
+  padding-left: 0.75rem;
+  padding-right: 0.75rem;
   padding-top: 0.5rem;
   padding-bottom: 0.5rem;
-  background-color: transparent;
+  background-color: white;
   color: #b41e25;
   border-color: #810000;
   border-top-color: #73748b;