diff --git a/packages/project-tailwind/package.json b/packages/project-tailwind/package.json
index ae05ef997..8501a34b6 100644
--- a/packages/project-tailwind/package.json
+++ b/packages/project-tailwind/package.json
@@ -25,32 +25,33 @@
     "test-ci": "jest --coverage --runInBand"
   },
   "dependencies": {
-    "@headlessui/react": "^1.7.11",
-    "@heroicons/react": "^2.0.15",
-    "clsx": "^1.2.1",
+    "@floating-ui/react": "0.19.2",
+    "@headlessui/react": "1.7.11",
+    "@heroicons/react": "2.0.15",
+    "clsx": "1.2.1",
     "react": "17.0.2",
     "react-dom": "17.0.2",
-    "react-polymorphic-box": "^3.0.3"
+    "react-polymorphic-box": "3.0.3"
   },
   "devDependencies": {
     "@babel/core": "7.20.12",
-    "@mdx-js/react": "^1.6.22",
+    "@mdx-js/react": "1.6.22",
     "@motech-development/eslint-config-motech-react": "workspace:*",
     "@motech-development/prettier-motech-config": "workspace:*",
     "@motech-development/semantic-release": "workspace:*",
     "@rollup/plugin-babel": "6.0.3",
     "@rollup/plugin-commonjs": "23.0.7",
     "@rollup/plugin-node-resolve": "15.0.1",
-    "@storybook/addon-actions": "^6.5.16",
-    "@storybook/addon-docs": "^6.5.16",
-    "@storybook/addon-essentials": "^6.5.16",
-    "@storybook/addon-interactions": "^6.5.16",
-    "@storybook/addon-links": "^6.5.16",
-    "@storybook/builder-webpack5": "^6.5.16",
-    "@storybook/manager-webpack5": "^6.5.16",
-    "@storybook/react": "^6.5.16",
+    "@storybook/addon-actions": "6.5.16",
+    "@storybook/addon-docs": "6.5.16",
+    "@storybook/addon-essentials": "6.5.16",
+    "@storybook/addon-interactions": "6.5.16",
+    "@storybook/addon-links": "6.5.16",
+    "@storybook/builder-webpack5": "6.5.16",
+    "@storybook/manager-webpack5": "6.5.16",
+    "@storybook/react": "6.5.16",
     "@storybook/storybook-deployer": "2.8.16",
-    "@storybook/testing-library": "^0.0.13",
+    "@storybook/testing-library": "0.0.13",
     "@testing-library/jest-dom": "5.16.5",
     "@testing-library/react": "12.1.4",
     "@testing-library/react-hooks": "8.0.1",
@@ -58,18 +59,20 @@
     "@types/jest": "29.4.0",
     "@types/react": "17.0.53",
     "@types/react-dom": "17.0.18",
-    "autoprefixer": "^10.4.13",
-    "babel-loader": "^8.3.0",
+    "autoprefixer": "10.4.13",
+    "babel-loader": "8.3.0",
     "eslint": "8.33.0",
     "jest": "29.4.2",
-    "jest-environment-jsdom": "^29.4.2",
-    "postcss": "^8.4.21",
+    "jest-environment-jsdom": "29.4.2",
+    "jsdom-testing-mocks": "1.7.0",
+    "postcss": "8.4.21",
     "prettier": "2.3.0",
     "rimraf": "3.0.2",
     "rollup": "2.79.1",
     "rollup-plugin-exclude-dependencies-from-bundle": "1.1.23",
-    "rollup-plugin-postcss": "^4.0.2",
-    "tailwindcss": "^3.2.6",
+    "rollup-plugin-postcss": "4.0.2",
+    "snapshot-diff": "0.10.0",
+    "tailwindcss": "3.2.6",
     "typescript": "4.9.5"
   },
   "peerDependencies": {
diff --git a/packages/project-tailwind/src/components/Tooltip.tsx b/packages/project-tailwind/src/components/Tooltip.tsx
new file mode 100644
index 000000000..3e06218e4
--- /dev/null
+++ b/packages/project-tailwind/src/components/Tooltip.tsx
@@ -0,0 +1,243 @@
+import {
+  arrow,
+  autoUpdate,
+  flip,
+  MiddlewareData,
+  offset,
+  Placement,
+  shift,
+  Side,
+  useDismiss,
+  useFloating,
+  useFocus,
+  useHover,
+  useInteractions,
+  useRole,
+} from '@floating-ui/react';
+import { ComponentPropsWithoutRef, ReactNode, useRef, useState } from 'react';
+import { Themes, TTheme, useTailwind } from '../utilities/tailwind';
+
+/** Default legth of time to display tooltip after moving away from parent */
+const DEFAULT_TIME = 1000;
+
+/** Arrow box dimension */
+const BOX_SIZE = 8;
+
+/** Arrow box's hypotenuse length */
+const FLOATING_OFFSET = Math.sqrt(2 * BOX_SIZE ** 2) / 2;
+
+/**
+ * Creates inline styles for arrows
+ *
+ * @param element - Arrow from middleware
+ *
+ * @param placement - Arrow placement
+ *
+ * @returns Arrow inline styles
+ */
+function createArrowStyles(
+  element: MiddlewareData['arrow'],
+  placement: Placement,
+) {
+  let styles = {
+    bottom: '',
+    left: '',
+    right: '',
+    top: '',
+  };
+
+  if (element) {
+    const { x, y } = element;
+
+    const side = placement.split('-')[0];
+
+    /** Position to apply generated style */
+    const xy = {
+      bottom: 'top',
+      left: 'right',
+      right: 'left',
+      top: 'bottom',
+    }[side] as string;
+
+    styles = {
+      ...styles,
+      left: xy === 'right' ? '' : `${x ?? BOX_SIZE}px`,
+      top: xy === 'bottom' ? '' : `${y ?? BOX_SIZE}px`,
+      [xy]: -BOX_SIZE / 2,
+    };
+  }
+
+  return styles;
+}
+
+/** Tooltip component properties */
+export interface ITooltipProps extends ComponentPropsWithoutRef<'div'> {
+  /** Content to be displayed */
+  content: ReactNode;
+
+  /** Element to output tooltip relative to */
+  parent: ReactNode;
+
+  /** Where tooltip should be places */
+  placement?: Side;
+
+  /** Length of time to keep tooltip visible in milliseconds */
+  time?: number;
+
+  /** Component theme */
+  theme?: TTheme;
+}
+
+/**
+ * Display information when hovering over a component
+ *
+ * @param props - Component props
+ *
+ * @returns Tooltip component
+ */
+export function Tooltip({
+  className,
+  content,
+  id,
+  parent,
+  placement = 'bottom',
+  time = DEFAULT_TIME,
+  theme = Themes.PRIMARY,
+  ...rest
+}: ITooltipProps) {
+  const arrowRef = useRef(null);
+
+  const { createStyles } = useTailwind(theme);
+
+  const [isOpen, setIsOpen] = useState(false);
+
+  const {
+    context,
+    middlewareData,
+    placement: floatingPlacement,
+    refs,
+    strategy,
+    x,
+    y,
+  } = useFloating({
+    middleware: [
+      flip(),
+      offset(FLOATING_OFFSET),
+      shift(),
+      arrow({
+        element: arrowRef,
+      }),
+    ],
+    onOpenChange: setIsOpen,
+    open: isOpen,
+    placement,
+    whileElementsMounted: autoUpdate,
+  });
+
+  const hover = useHover(context, {
+    delay: {
+      close: time,
+    },
+    move: false,
+  });
+
+  const focus = useFocus(context);
+
+  const dismiss = useDismiss(context);
+
+  const role = useRole(context, {
+    role: 'tooltip',
+  });
+
+  const { getFloatingProps, getReferenceProps } = useInteractions([
+    hover,
+    focus,
+    dismiss,
+    role,
+  ]);
+
+  const tooltipStyles = createStyles({
+    classNames: [className],
+    theme: {
+      danger: ['bg-red-600 text-red-50'],
+      primary: ['bg-blue-600 text-blue-50'],
+      secondary: ['bg-gray-100 text-gray-600'],
+      success: ['bg-green-600 text-green-50'],
+      warning: ['bg-yellow-600 text-yellow-50'],
+    },
+  });
+
+  const innerTooltipStyles = createStyles({
+    classNames: [
+      'px-1 text-sm font-display whitespace-nowrap',
+      {
+        'border-b-2': placement === 'top',
+        'border-l-2': placement === 'right',
+        'border-r-2': placement === 'left',
+        'border-t-2': placement === 'bottom',
+      },
+    ],
+    theme: {
+      danger: ['border-red-700'],
+      primary: ['border-blue-700'],
+      secondary: ['border-gray-200'],
+      success: ['border-green-700'],
+      warning: ['border-yellow-700'],
+    },
+  });
+
+  const tooltipInlineStyles = {
+    left: x ?? 0,
+    position: strategy,
+    top: y ?? 0,
+    width: 'max-content',
+  };
+
+  const arrowStyles = createStyles({
+    classNames: ['absolute w-2 h-2 rotate-45 -z-10 pointer-events-none'],
+    theme: {
+      danger: ['bg-red-700'],
+      primary: ['bg-blue-700'],
+      secondary: ['bg-gray-200'],
+      success: ['bg-green-700'],
+      warning: ['bg-yellow-700'],
+    },
+  });
+
+  const arrowInlineStyles = createArrowStyles(
+    middlewareData.arrow,
+    floatingPlacement,
+  );
+
+  return (
+    <>
+      <div
+        className="inline-block"
+        data-testid="tooltip-parent-element"
+        ref={refs.setReference}
+        {...getReferenceProps()}
+      >
+        {parent}
+      </div>
+
+      {isOpen && (
+        <div
+          id={id}
+          className={tooltipStyles}
+          ref={refs.setFloating}
+          style={tooltipInlineStyles}
+          {...getFloatingProps()}
+          {...rest}
+        >
+          <div className={innerTooltipStyles}>{content}</div>
+
+          <div
+            className={arrowStyles}
+            ref={arrowRef}
+            style={arrowInlineStyles}
+          />
+        </div>
+      )}
+    </>
+  );
+}
diff --git a/packages/project-tailwind/src/components/__tests__/Tooltip.test.tsx b/packages/project-tailwind/src/components/__tests__/Tooltip.test.tsx
new file mode 100644
index 000000000..c73c8119a
--- /dev/null
+++ b/packages/project-tailwind/src/components/__tests__/Tooltip.test.tsx
@@ -0,0 +1,201 @@
+import { Side } from '@floating-ui/react';
+import { fireEvent, render } from '@testing-library/react';
+import { mockViewport } from 'jsdom-testing-mocks';
+import { ReactNode } from 'react';
+import { act } from 'react-dom/test-utils';
+import { themes } from '../../utilities/jest';
+import { Tooltip } from '../Tooltip';
+
+interface IWrapperProps {
+  children: ReactNode;
+}
+function Wrapper({ children }: IWrapperProps) {
+  const styles = {
+    alignItems: 'center',
+    display: 'flex',
+    height: '100vh',
+    justifyContent: 'center',
+  };
+
+  return <div style={styles}>{children}</div>;
+}
+
+const placements: Side[] = ['top', 'bottom', 'right', 'left'];
+
+describe('Tooltip', () => {
+  beforeAll(() => {
+    mockViewport({
+      height: '768px',
+      width: '1024px',
+    });
+  });
+
+  describe('timer', () => {
+    beforeAll(() => {
+      jest.useFakeTimers();
+    });
+
+    afterAll(() => {
+      jest.useRealTimers();
+    });
+
+    it('should hide tooltip after 1000ms', async () => {
+      const { asFragment, findByTestId } = render(
+        <Wrapper>
+          <Tooltip
+            parent={
+              <button data-testid="button" type="button">
+                Hover over me
+              </button>
+            }
+            content={<p>Hello, world</p>}
+          />
+        </Wrapper>,
+      );
+
+      const firstRender = asFragment();
+
+      await act(async () => {
+        const parent = await findByTestId('tooltip-parent-element');
+
+        fireEvent.mouseEnter(parent);
+
+        fireEvent.mouseLeave(parent);
+      });
+
+      act(() => jest.advanceTimersByTime(900));
+
+      expect(firstRender).toMatchDiffSnapshot(asFragment());
+
+      act(() => jest.advanceTimersByTime(100));
+
+      expect(firstRender).toEqual(asFragment());
+    });
+
+    it('should hide after set time', async () => {
+      const { asFragment, findByTestId } = render(
+        <Wrapper>
+          <Tooltip
+            parent={
+              <button data-testid="button" type="button">
+                Hover over me
+              </button>
+            }
+            content={<p>Hello, world</p>}
+            time={400}
+          />
+        </Wrapper>,
+      );
+
+      const firstRender = asFragment();
+
+      await act(async () => {
+        const parent = await findByTestId('tooltip-parent-element');
+
+        fireEvent.mouseEnter(parent);
+
+        fireEvent.mouseLeave(parent);
+      });
+
+      act(() => jest.advanceTimersByTime(300));
+
+      expect(firstRender).toMatchDiffSnapshot(asFragment());
+
+      act(() => jest.advanceTimersByTime(100));
+
+      expect(firstRender).toEqual(asFragment());
+    });
+  });
+
+  describe.each(placements)('when placement is "%s"', (placement) => {
+    it('should correctly render component when parent is not hovered over', () => {
+      const { asFragment } = render(
+        <Wrapper>
+          <Tooltip
+            parent={
+              <button data-testid="button" type="button">
+                Hover over me
+              </button>
+            }
+            content={<p>Hello, world</p>}
+            placement={placement}
+          />
+        </Wrapper>,
+      );
+
+      expect(asFragment()).toMatchSnapshot();
+    });
+
+    it('should correctly render component when parent is hovered over', async () => {
+      const { asFragment, findByTestId } = render(
+        <Wrapper>
+          <Tooltip
+            parent={
+              <button data-testid="button" type="button">
+                Hover over me
+              </button>
+            }
+            content={<p>Hello, world</p>}
+            placement={placement}
+          />
+        </Wrapper>,
+      );
+
+      const firstRender = asFragment();
+
+      await act(async () => {
+        const parent = await findByTestId('tooltip-parent-element');
+
+        fireEvent.mouseEnter(parent);
+      });
+
+      expect(firstRender).toMatchDiffSnapshot(asFragment());
+    });
+  });
+
+  describe.each(themes)('when theme is "$theme"', ({ theme }) => {
+    it('should correctly render component when parent is not hovered over', () => {
+      const { asFragment } = render(
+        <Wrapper>
+          <Tooltip
+            parent={
+              <button data-testid="button" type="button">
+                Hover over me
+              </button>
+            }
+            content={<p>Hello, world</p>}
+            theme={theme}
+          />
+        </Wrapper>,
+      );
+
+      expect(asFragment()).toMatchSnapshot();
+    });
+
+    it('should correctly render component when parent is hovered over', async () => {
+      const { asFragment, findByTestId } = render(
+        <Wrapper>
+          <Tooltip
+            parent={
+              <button data-testid="button" type="button">
+                Hover over me
+              </button>
+            }
+            content={<p>Hello, world</p>}
+            theme={theme}
+          />
+        </Wrapper>,
+      );
+
+      const firstRender = asFragment();
+
+      await act(async () => {
+        const parent = await findByTestId('tooltip-parent-element');
+
+        fireEvent.mouseEnter(parent);
+      });
+
+      expect(firstRender).toMatchDiffSnapshot(asFragment());
+    });
+  });
+});
diff --git a/packages/project-tailwind/src/components/__tests__/__snapshots__/Tooltip.test.tsx.snap b/packages/project-tailwind/src/components/__tests__/__snapshots__/Tooltip.test.tsx.snap
new file mode 100644
index 000000000..d4b7a7f11
--- /dev/null
+++ b/packages/project-tailwind/src/components/__tests__/__snapshots__/Tooltip.test.tsx.snap
@@ -0,0 +1,665 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Tooltip timer should hide after set time 1`] = `
+"Snapshot Diff:
+- First value
++ Second value
+
+  <DocumentFragment>
+    <div
+      style="align-items: center; display: flex; height: 100vh; justify-content: center;"
+    >
+      <div
++       aria-describedby="floating-ui-2"
+        class="inline-block"
+        data-testid="tooltip-parent-element"
+      >
+        <button
+          data-testid="button"
+          type="button"
+        >
+          Hover over me
+        </button>
++     </div>
++     <div
++       class="bg-blue-600 text-blue-50"
++       id="floating-ui-2"
++       role="tooltip"
++       style="left: 0px; position: absolute; top: 5.656854249492381px;"
++       tabindex="-1"
++     >
++       <div
++         class="px-1 text-sm font-display whitespace-nowrap border-t-2 border-blue-700"
++       >
++         <p>
++           Hello, world
++         </p>
++       </div>
++       <div
++         class="absolute w-2 h-2 rotate-45 -z-10 pointer-events-none bg-blue-700"
++         style="left: 0px; top: -4px;"
++       />
+      </div>
+    </div>
+  </DocumentFragment>"
+`;
+
+exports[`Tooltip timer should hide tooltip after 1000ms 1`] = `
+"Snapshot Diff:
+- First value
++ Second value
+
+  <DocumentFragment>
+    <div
+      style="align-items: center; display: flex; height: 100vh; justify-content: center;"
+    >
+      <div
++       aria-describedby="floating-ui-0"
+        class="inline-block"
+        data-testid="tooltip-parent-element"
+      >
+        <button
+          data-testid="button"
+          type="button"
+        >
+          Hover over me
+        </button>
++     </div>
++     <div
++       class="bg-blue-600 text-blue-50"
++       id="floating-ui-0"
++       role="tooltip"
++       style="left: 0px; position: absolute; top: 5.656854249492381px;"
++       tabindex="-1"
++     >
++       <div
++         class="px-1 text-sm font-display whitespace-nowrap border-t-2 border-blue-700"
++       >
++         <p>
++           Hello, world
++         </p>
++       </div>
++       <div
++         class="absolute w-2 h-2 rotate-45 -z-10 pointer-events-none bg-blue-700"
++         style="left: 0px; top: -4px;"
++       />
+      </div>
+    </div>
+  </DocumentFragment>"
+`;
+
+exports[`Tooltip when placement is "bottom" should correctly render component when parent is hovered over 1`] = `
+"Snapshot Diff:
+- First value
++ Second value
+
+  <DocumentFragment>
+    <div
+      style="align-items: center; display: flex; height: 100vh; justify-content: center;"
+    >
+      <div
++       aria-describedby="floating-ui-10"
+        class="inline-block"
+        data-testid="tooltip-parent-element"
+      >
+        <button
+          data-testid="button"
+          type="button"
+        >
+          Hover over me
+        </button>
++     </div>
++     <div
++       class="bg-blue-600 text-blue-50"
++       id="floating-ui-10"
++       role="tooltip"
++       style="left: 0px; position: absolute; top: 5.656854249492381px;"
++       tabindex="-1"
++     >
++       <div
++         class="px-1 text-sm font-display whitespace-nowrap border-t-2 border-blue-700"
++       >
++         <p>
++           Hello, world
++         </p>
++       </div>
++       <div
++         class="absolute w-2 h-2 rotate-45 -z-10 pointer-events-none bg-blue-700"
++         style="left: 0px; top: -4px;"
++       />
+      </div>
+    </div>
+  </DocumentFragment>"
+`;
+
+exports[`Tooltip when placement is "bottom" should correctly render component when parent is not hovered over 1`] = `
+<DocumentFragment>
+  <div
+    style="align-items: center; display: flex; height: 100vh; justify-content: center;"
+  >
+    <div
+      class="inline-block"
+      data-testid="tooltip-parent-element"
+    >
+      <button
+        data-testid="button"
+        type="button"
+      >
+        Hover over me
+      </button>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Tooltip when placement is "left" should correctly render component when parent is hovered over 1`] = `
+"Snapshot Diff:
+- First value
++ Second value
+
+  <DocumentFragment>
+    <div
+      style="align-items: center; display: flex; height: 100vh; justify-content: center;"
+    >
+      <div
++       aria-describedby="floating-ui-18"
+        class="inline-block"
+        data-testid="tooltip-parent-element"
+      >
+        <button
+          data-testid="button"
+          type="button"
+        >
+          Hover over me
+        </button>
++     </div>
++     <div
++       class="bg-blue-600 text-blue-50"
++       id="floating-ui-18"
++       role="tooltip"
++       style="left: -5.656854249492381px; position: absolute; top: 0px;"
++       tabindex="-1"
++     >
++       <div
++         class="px-1 text-sm font-display whitespace-nowrap border-r-2 border-blue-700"
++       >
++         <p>
++           Hello, world
++         </p>
++       </div>
++       <div
++         class="absolute w-2 h-2 rotate-45 -z-10 pointer-events-none bg-blue-700"
++         style="right: -4px; top: 0px;"
++       />
+      </div>
+    </div>
+  </DocumentFragment>"
+`;
+
+exports[`Tooltip when placement is "left" should correctly render component when parent is not hovered over 1`] = `
+<DocumentFragment>
+  <div
+    style="align-items: center; display: flex; height: 100vh; justify-content: center;"
+  >
+    <div
+      class="inline-block"
+      data-testid="tooltip-parent-element"
+    >
+      <button
+        data-testid="button"
+        type="button"
+      >
+        Hover over me
+      </button>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Tooltip when placement is "right" should correctly render component when parent is hovered over 1`] = `
+"Snapshot Diff:
+- First value
++ Second value
+
+  <DocumentFragment>
+    <div
+      style="align-items: center; display: flex; height: 100vh; justify-content: center;"
+    >
+      <div
++       aria-describedby="floating-ui-14"
+        class="inline-block"
+        data-testid="tooltip-parent-element"
+      >
+        <button
+          data-testid="button"
+          type="button"
+        >
+          Hover over me
+        </button>
++     </div>
++     <div
++       class="bg-blue-600 text-blue-50"
++       id="floating-ui-14"
++       role="tooltip"
++       style="left: 5.656854249492381px; position: absolute; top: 0px;"
++       tabindex="-1"
++     >
++       <div
++         class="px-1 text-sm font-display whitespace-nowrap border-l-2 border-blue-700"
++       >
++         <p>
++           Hello, world
++         </p>
++       </div>
++       <div
++         class="absolute w-2 h-2 rotate-45 -z-10 pointer-events-none bg-blue-700"
++         style="left: -4px; top: 0px;"
++       />
+      </div>
+    </div>
+  </DocumentFragment>"
+`;
+
+exports[`Tooltip when placement is "right" should correctly render component when parent is not hovered over 1`] = `
+<DocumentFragment>
+  <div
+    style="align-items: center; display: flex; height: 100vh; justify-content: center;"
+  >
+    <div
+      class="inline-block"
+      data-testid="tooltip-parent-element"
+    >
+      <button
+        data-testid="button"
+        type="button"
+      >
+        Hover over me
+      </button>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Tooltip when placement is "top" should correctly render component when parent is hovered over 1`] = `
+"Snapshot Diff:
+- First value
++ Second value
+
+  <DocumentFragment>
+    <div
+      style="align-items: center; display: flex; height: 100vh; justify-content: center;"
+    >
+      <div
++       aria-describedby="floating-ui-6"
+        class="inline-block"
+        data-testid="tooltip-parent-element"
+      >
+        <button
+          data-testid="button"
+          type="button"
+        >
+          Hover over me
+        </button>
++     </div>
++     <div
++       class="bg-blue-600 text-blue-50"
++       id="floating-ui-6"
++       role="tooltip"
++       style="left: 0px; position: absolute; top: -5.656854249492381px;"
++       tabindex="-1"
++     >
++       <div
++         class="px-1 text-sm font-display whitespace-nowrap border-b-2 border-blue-700"
++       >
++         <p>
++           Hello, world
++         </p>
++       </div>
++       <div
++         class="absolute w-2 h-2 rotate-45 -z-10 pointer-events-none bg-blue-700"
++         style="bottom: -4px; left: 0px;"
++       />
+      </div>
+    </div>
+  </DocumentFragment>"
+`;
+
+exports[`Tooltip when placement is "top" should correctly render component when parent is not hovered over 1`] = `
+<DocumentFragment>
+  <div
+    style="align-items: center; display: flex; height: 100vh; justify-content: center;"
+  >
+    <div
+      class="inline-block"
+      data-testid="tooltip-parent-element"
+    >
+      <button
+        data-testid="button"
+        type="button"
+      >
+        Hover over me
+      </button>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Tooltip when theme is "danger" should correctly render component when parent is hovered over 1`] = `
+"Snapshot Diff:
+- First value
++ Second value
+
+  <DocumentFragment>
+    <div
+      style="align-items: center; display: flex; height: 100vh; justify-content: center;"
+    >
+      <div
++       aria-describedby="floating-ui-22"
+        class="inline-block"
+        data-testid="tooltip-parent-element"
+      >
+        <button
+          data-testid="button"
+          type="button"
+        >
+          Hover over me
+        </button>
++     </div>
++     <div
++       class="bg-red-600 text-red-50"
++       id="floating-ui-22"
++       role="tooltip"
++       style="left: 0px; position: absolute; top: 5.656854249492381px;"
++       tabindex="-1"
++     >
++       <div
++         class="px-1 text-sm font-display whitespace-nowrap border-t-2 border-red-700"
++       >
++         <p>
++           Hello, world
++         </p>
++       </div>
++       <div
++         class="absolute w-2 h-2 rotate-45 -z-10 pointer-events-none bg-red-700"
++         style="left: 0px; top: -4px;"
++       />
+      </div>
+    </div>
+  </DocumentFragment>"
+`;
+
+exports[`Tooltip when theme is "danger" should correctly render component when parent is not hovered over 1`] = `
+<DocumentFragment>
+  <div
+    style="align-items: center; display: flex; height: 100vh; justify-content: center;"
+  >
+    <div
+      class="inline-block"
+      data-testid="tooltip-parent-element"
+    >
+      <button
+        data-testid="button"
+        type="button"
+      >
+        Hover over me
+      </button>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Tooltip when theme is "primary" should correctly render component when parent is hovered over 1`] = `
+"Snapshot Diff:
+- First value
++ Second value
+
+  <DocumentFragment>
+    <div
+      style="align-items: center; display: flex; height: 100vh; justify-content: center;"
+    >
+      <div
++       aria-describedby="floating-ui-26"
+        class="inline-block"
+        data-testid="tooltip-parent-element"
+      >
+        <button
+          data-testid="button"
+          type="button"
+        >
+          Hover over me
+        </button>
++     </div>
++     <div
++       class="bg-blue-600 text-blue-50"
++       id="floating-ui-26"
++       role="tooltip"
++       style="left: 0px; position: absolute; top: 5.656854249492381px;"
++       tabindex="-1"
++     >
++       <div
++         class="px-1 text-sm font-display whitespace-nowrap border-t-2 border-blue-700"
++       >
++         <p>
++           Hello, world
++         </p>
++       </div>
++       <div
++         class="absolute w-2 h-2 rotate-45 -z-10 pointer-events-none bg-blue-700"
++         style="left: 0px; top: -4px;"
++       />
+      </div>
+    </div>
+  </DocumentFragment>"
+`;
+
+exports[`Tooltip when theme is "primary" should correctly render component when parent is not hovered over 1`] = `
+<DocumentFragment>
+  <div
+    style="align-items: center; display: flex; height: 100vh; justify-content: center;"
+  >
+    <div
+      class="inline-block"
+      data-testid="tooltip-parent-element"
+    >
+      <button
+        data-testid="button"
+        type="button"
+      >
+        Hover over me
+      </button>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Tooltip when theme is "secondary" should correctly render component when parent is hovered over 1`] = `
+"Snapshot Diff:
+- First value
++ Second value
+
+  <DocumentFragment>
+    <div
+      style="align-items: center; display: flex; height: 100vh; justify-content: center;"
+    >
+      <div
++       aria-describedby="floating-ui-30"
+        class="inline-block"
+        data-testid="tooltip-parent-element"
+      >
+        <button
+          data-testid="button"
+          type="button"
+        >
+          Hover over me
+        </button>
++     </div>
++     <div
++       class="bg-gray-100 text-gray-600"
++       id="floating-ui-30"
++       role="tooltip"
++       style="left: 0px; position: absolute; top: 5.656854249492381px;"
++       tabindex="-1"
++     >
++       <div
++         class="px-1 text-sm font-display whitespace-nowrap border-t-2 border-gray-200"
++       >
++         <p>
++           Hello, world
++         </p>
++       </div>
++       <div
++         class="absolute w-2 h-2 rotate-45 -z-10 pointer-events-none bg-gray-200"
++         style="left: 0px; top: -4px;"
++       />
+      </div>
+    </div>
+  </DocumentFragment>"
+`;
+
+exports[`Tooltip when theme is "secondary" should correctly render component when parent is not hovered over 1`] = `
+<DocumentFragment>
+  <div
+    style="align-items: center; display: flex; height: 100vh; justify-content: center;"
+  >
+    <div
+      class="inline-block"
+      data-testid="tooltip-parent-element"
+    >
+      <button
+        data-testid="button"
+        type="button"
+      >
+        Hover over me
+      </button>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Tooltip when theme is "success" should correctly render component when parent is hovered over 1`] = `
+"Snapshot Diff:
+- First value
++ Second value
+
+  <DocumentFragment>
+    <div
+      style="align-items: center; display: flex; height: 100vh; justify-content: center;"
+    >
+      <div
++       aria-describedby="floating-ui-34"
+        class="inline-block"
+        data-testid="tooltip-parent-element"
+      >
+        <button
+          data-testid="button"
+          type="button"
+        >
+          Hover over me
+        </button>
++     </div>
++     <div
++       class="bg-green-600 text-green-50"
++       id="floating-ui-34"
++       role="tooltip"
++       style="left: 0px; position: absolute; top: 5.656854249492381px;"
++       tabindex="-1"
++     >
++       <div
++         class="px-1 text-sm font-display whitespace-nowrap border-t-2 border-green-700"
++       >
++         <p>
++           Hello, world
++         </p>
++       </div>
++       <div
++         class="absolute w-2 h-2 rotate-45 -z-10 pointer-events-none bg-green-700"
++         style="left: 0px; top: -4px;"
++       />
+      </div>
+    </div>
+  </DocumentFragment>"
+`;
+
+exports[`Tooltip when theme is "success" should correctly render component when parent is not hovered over 1`] = `
+<DocumentFragment>
+  <div
+    style="align-items: center; display: flex; height: 100vh; justify-content: center;"
+  >
+    <div
+      class="inline-block"
+      data-testid="tooltip-parent-element"
+    >
+      <button
+        data-testid="button"
+        type="button"
+      >
+        Hover over me
+      </button>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Tooltip when theme is "warning" should correctly render component when parent is hovered over 1`] = `
+"Snapshot Diff:
+- First value
++ Second value
+
+  <DocumentFragment>
+    <div
+      style="align-items: center; display: flex; height: 100vh; justify-content: center;"
+    >
+      <div
++       aria-describedby="floating-ui-38"
+        class="inline-block"
+        data-testid="tooltip-parent-element"
+      >
+        <button
+          data-testid="button"
+          type="button"
+        >
+          Hover over me
+        </button>
++     </div>
++     <div
++       class="bg-yellow-600 text-yellow-50"
++       id="floating-ui-38"
++       role="tooltip"
++       style="left: 0px; position: absolute; top: 5.656854249492381px;"
++       tabindex="-1"
++     >
++       <div
++         class="px-1 text-sm font-display whitespace-nowrap border-t-2 border-yellow-700"
++       >
++         <p>
++           Hello, world
++         </p>
++       </div>
++       <div
++         class="absolute w-2 h-2 rotate-45 -z-10 pointer-events-none bg-yellow-700"
++         style="left: 0px; top: -4px;"
++       />
+      </div>
+    </div>
+  </DocumentFragment>"
+`;
+
+exports[`Tooltip when theme is "warning" should correctly render component when parent is not hovered over 1`] = `
+<DocumentFragment>
+  <div
+    style="align-items: center; display: flex; height: 100vh; justify-content: center;"
+  >
+    <div
+      class="inline-block"
+      data-testid="tooltip-parent-element"
+    >
+      <button
+        data-testid="button"
+        type="button"
+      >
+        Hover over me
+      </button>
+    </div>
+  </div>
+</DocumentFragment>
+`;
diff --git a/packages/project-tailwind/src/index.ts b/packages/project-tailwind/src/index.ts
index 0b78f1e20..03d4af629 100644
--- a/packages/project-tailwind/src/index.ts
+++ b/packages/project-tailwind/src/index.ts
@@ -9,4 +9,5 @@ export * from './components/Link';
 export * from './components/Logo';
 export * from './components/Title';
 export * from './components/Toolbar';
+export * from './components/Tooltip';
 export * from './components/Typography';
diff --git a/packages/project-tailwind/src/setupTests.ts b/packages/project-tailwind/src/setupTests.ts
index 8f2609b7b..09dcb1db9 100644
--- a/packages/project-tailwind/src/setupTests.ts
+++ b/packages/project-tailwind/src/setupTests.ts
@@ -3,3 +3,5 @@
 // expect(element).toHaveTextContent(/react/i)
 // learn more: https://github.com/testing-library/jest-dom
 import '@testing-library/jest-dom';
+import 'snapshot-diff';
+import 'snapshot-diff/extend-expect';
diff --git a/packages/project-tailwind/src/stories/Tooltip.stories.tsx b/packages/project-tailwind/src/stories/Tooltip.stories.tsx
new file mode 100644
index 000000000..a08c03f7e
--- /dev/null
+++ b/packages/project-tailwind/src/stories/Tooltip.stories.tsx
@@ -0,0 +1,20 @@
+import { ComponentMeta, ComponentStory } from '@storybook/react';
+import { Button } from '../components/Button';
+import { Tooltip } from '../components/Tooltip';
+import { Typography } from '../components/Typography';
+
+export default {
+  args: {
+    content: <Typography margin="none">Hello, world</Typography>,
+    parent: <Button>Hover over me</Button>,
+  },
+  component: Tooltip,
+} as ComponentMeta<typeof Tooltip>;
+
+const Template: ComponentStory<typeof Tooltip> = (props) => (
+  <div className="flex h-screen items-center justify-center">
+    <Tooltip {...props} />
+  </div>
+);
+
+export const TooltipComponent = Template.bind({});
diff --git a/yarn.lock b/yarn.lock
index 49f6d1d59..20255040a 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -4151,6 +4151,48 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@floating-ui/core@npm:^1.2.1":
+  version: 1.2.1
+  resolution: "@floating-ui/core@npm:1.2.1"
+  checksum: 7a263e15abad4cd98ce3938075c90f76bafef71c67964c83dd7cf1e1916c92ccfa46a4f2b95b403bb180f70b3e7ded118db1cbc3426269ec70e948edf0d19ae2
+  languageName: node
+  linkType: hard
+
+"@floating-ui/dom@npm:^1.2.1":
+  version: 1.2.1
+  resolution: "@floating-ui/dom@npm:1.2.1"
+  dependencies:
+    "@floating-ui/core": ^1.2.1
+  checksum: ad6928d5dd934ca8b3dcffdfcacde9d147afc0db4db0c0294b23d5f897224d73c7f0ae578b46d813f0d7ae22a86e7a3f8914fdbcdf4a8d42a1b430d0518f45be
+  languageName: node
+  linkType: hard
+
+"@floating-ui/react-dom@npm:^1.3.0":
+  version: 1.3.0
+  resolution: "@floating-ui/react-dom@npm:1.3.0"
+  dependencies:
+    "@floating-ui/dom": ^1.2.1
+  peerDependencies:
+    react: ">=16.8.0"
+    react-dom: ">=16.8.0"
+  checksum: ce0ad3e3bbe43cfd15a6a0d5cccede02175c845862bfab52027995ab99c6b29630180dc7d146f76ebb34730f90a6ab9bf193c8984fe8d7f56062308e4ca98f77
+  languageName: node
+  linkType: hard
+
+"@floating-ui/react@npm:0.19.2":
+  version: 0.19.2
+  resolution: "@floating-ui/react@npm:0.19.2"
+  dependencies:
+    "@floating-ui/react-dom": ^1.3.0
+    aria-hidden: ^1.1.3
+    tabbable: ^6.0.1
+  peerDependencies:
+    react: ">=16.8.0"
+    react-dom: ">=16.8.0"
+  checksum: 00fd827c2dcf879fec221d89ef5b90836bbecacc236ce2acc787db32ae7311d490cd136b13a8d0b6ab12842554a2ee1110605aa832af71a45c0a7297e342072c
+  languageName: node
+  linkType: hard
+
 "@fortawesome/fontawesome-common-types@npm:^0.2.36":
   version: 0.2.36
   resolution: "@fortawesome/fontawesome-common-types@npm:0.2.36"
@@ -4634,7 +4676,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@headlessui/react@npm:^1.7.11":
+"@headlessui/react@npm:1.7.11":
   version: 1.7.11
   resolution: "@headlessui/react@npm:1.7.11"
   dependencies:
@@ -4646,7 +4688,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@heroicons/react@npm:^2.0.15":
+"@heroicons/react@npm:2.0.15":
   version: 2.0.15
   resolution: "@heroicons/react@npm:2.0.15"
   peerDependencies:
@@ -4954,6 +4996,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@jest/expect-utils@npm:^29.4.3":
+  version: 29.4.3
+  resolution: "@jest/expect-utils@npm:29.4.3"
+  dependencies:
+    jest-get-type: ^29.4.3
+  checksum: 2bbed39ff2fb59f5acac465a1ce7303e3b4b62b479e4f386261986c9827f7f799ea912761e22629c5daf10addf8513f16733c14a29c2647bb66d4ee625e9ff92
+  languageName: node
+  linkType: hard
+
 "@jest/expect@npm:^29.4.2":
   version: 29.4.2
   resolution: "@jest/expect@npm:29.4.2"
@@ -5108,6 +5159,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@jest/schemas@npm:^29.4.3":
+  version: 29.4.3
+  resolution: "@jest/schemas@npm:29.4.3"
+  dependencies:
+    "@sinclair/typebox": ^0.25.16
+  checksum: ac754e245c19dc39e10ebd41dce09040214c96a4cd8efa143b82148e383e45128f24599195ab4f01433adae4ccfbe2db6574c90db2862ccd8551a86704b5bebd
+  languageName: node
+  linkType: hard
+
 "@jest/source-map@npm:^27.5.1":
   version: 27.5.1
   resolution: "@jest/source-map@npm:27.5.1"
@@ -5259,6 +5319,29 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@jest/transform@npm:^29.4.3":
+  version: 29.4.3
+  resolution: "@jest/transform@npm:29.4.3"
+  dependencies:
+    "@babel/core": ^7.11.6
+    "@jest/types": ^29.4.3
+    "@jridgewell/trace-mapping": ^0.3.15
+    babel-plugin-istanbul: ^6.1.1
+    chalk: ^4.0.0
+    convert-source-map: ^2.0.0
+    fast-json-stable-stringify: ^2.1.0
+    graceful-fs: ^4.2.9
+    jest-haste-map: ^29.4.3
+    jest-regex-util: ^29.4.3
+    jest-util: ^29.4.3
+    micromatch: ^4.0.4
+    pirates: ^4.0.4
+    slash: ^3.0.0
+    write-file-atomic: ^4.0.2
+  checksum: 082d74e04044213aa7baa8de29f8383e5010034f867969c8602a2447a4ef2f484cfaf2491eba3179ce42f369f7a0af419cbd087910f7e5caf7aa5d1fe03f2ff9
+  languageName: node
+  linkType: hard
+
 "@jest/types@npm:^26.6.2":
   version: 26.6.2
   resolution: "@jest/types@npm:26.6.2"
@@ -5313,6 +5396,20 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@jest/types@npm:^29.4.3":
+  version: 29.4.3
+  resolution: "@jest/types@npm:29.4.3"
+  dependencies:
+    "@jest/schemas": ^29.4.3
+    "@types/istanbul-lib-coverage": ^2.0.0
+    "@types/istanbul-reports": ^3.0.0
+    "@types/node": "*"
+    "@types/yargs": ^17.0.8
+    chalk: ^4.0.0
+  checksum: 1756f4149d360f98567f56f434144f7af23ed49a2c42889261a314df6b6654c2de70af618fb2ee0ee39cadaf10835b885845557184509503646c9cb9dcc02bac
+  languageName: node
+  linkType: hard
+
 "@jridgewell/gen-mapping@npm:^0.1.0":
   version: 0.1.1
   resolution: "@jridgewell/gen-mapping@npm:0.1.1"
@@ -5461,7 +5558,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@mdx-js/react@npm:^1.6.22":
+"@mdx-js/react@npm:1.6.22, @mdx-js/react@npm:^1.6.22":
   version: 1.6.22
   resolution: "@mdx-js/react@npm:1.6.22"
   peerDependencies:
@@ -5767,25 +5864,26 @@ __metadata:
   resolution: "@motech-development/project-tailwind@workspace:packages/project-tailwind"
   dependencies:
     "@babel/core": 7.20.12
-    "@headlessui/react": ^1.7.11
-    "@heroicons/react": ^2.0.15
-    "@mdx-js/react": ^1.6.22
+    "@floating-ui/react": 0.19.2
+    "@headlessui/react": 1.7.11
+    "@heroicons/react": 2.0.15
+    "@mdx-js/react": 1.6.22
     "@motech-development/eslint-config-motech-react": "workspace:*"
     "@motech-development/prettier-motech-config": "workspace:*"
     "@motech-development/semantic-release": "workspace:*"
     "@rollup/plugin-babel": 6.0.3
     "@rollup/plugin-commonjs": 23.0.7
     "@rollup/plugin-node-resolve": 15.0.1
-    "@storybook/addon-actions": ^6.5.16
-    "@storybook/addon-docs": ^6.5.16
-    "@storybook/addon-essentials": ^6.5.16
-    "@storybook/addon-interactions": ^6.5.16
-    "@storybook/addon-links": ^6.5.16
-    "@storybook/builder-webpack5": ^6.5.16
-    "@storybook/manager-webpack5": ^6.5.16
-    "@storybook/react": ^6.5.16
+    "@storybook/addon-actions": 6.5.16
+    "@storybook/addon-docs": 6.5.16
+    "@storybook/addon-essentials": 6.5.16
+    "@storybook/addon-interactions": 6.5.16
+    "@storybook/addon-links": 6.5.16
+    "@storybook/builder-webpack5": 6.5.16
+    "@storybook/manager-webpack5": 6.5.16
+    "@storybook/react": 6.5.16
     "@storybook/storybook-deployer": 2.8.16
-    "@storybook/testing-library": ^0.0.13
+    "@storybook/testing-library": 0.0.13
     "@testing-library/jest-dom": 5.16.5
     "@testing-library/react": 12.1.4
     "@testing-library/react-hooks": 8.0.1
@@ -5793,22 +5891,24 @@ __metadata:
     "@types/jest": 29.4.0
     "@types/react": 17.0.53
     "@types/react-dom": 17.0.18
-    autoprefixer: ^10.4.13
-    babel-loader: ^8.3.0
-    clsx: ^1.2.1
+    autoprefixer: 10.4.13
+    babel-loader: 8.3.0
+    clsx: 1.2.1
     eslint: 8.33.0
     jest: 29.4.2
-    jest-environment-jsdom: ^29.4.2
-    postcss: ^8.4.21
+    jest-environment-jsdom: 29.4.2
+    jsdom-testing-mocks: 1.7.0
+    postcss: 8.4.21
     prettier: 2.3.0
     react: 17.0.2
     react-dom: 17.0.2
-    react-polymorphic-box: ^3.0.3
+    react-polymorphic-box: 3.0.3
     rimraf: 3.0.2
     rollup: 2.79.1
     rollup-plugin-exclude-dependencies-from-bundle: 1.1.23
-    rollup-plugin-postcss: ^4.0.2
-    tailwindcss: ^3.2.6
+    rollup-plugin-postcss: 4.0.2
+    snapshot-diff: 0.10.0
+    tailwindcss: 3.2.6
     typescript: 4.9.5
   peerDependencies:
     react: 17.0.2
@@ -7205,7 +7305,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@storybook/addon-actions@npm:6.5.16, @storybook/addon-actions@npm:^6.5.16":
+"@storybook/addon-actions@npm:6.5.16":
   version: 6.5.16
   resolution: "@storybook/addon-actions@npm:6.5.16"
   dependencies:
@@ -7297,7 +7397,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@storybook/addon-docs@npm:6.5.16, @storybook/addon-docs@npm:^6.5.16":
+"@storybook/addon-docs@npm:6.5.16":
   version: 6.5.16
   resolution: "@storybook/addon-docs@npm:6.5.16"
   dependencies:
@@ -7344,7 +7444,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@storybook/addon-essentials@npm:^6.5.16":
+"@storybook/addon-essentials@npm:6.5.16":
   version: 6.5.16
   resolution: "@storybook/addon-essentials@npm:6.5.16"
   dependencies:
@@ -7404,7 +7504,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@storybook/addon-interactions@npm:^6.5.16":
+"@storybook/addon-interactions@npm:6.5.16":
   version: 6.5.16
   resolution: "@storybook/addon-interactions@npm:6.5.16"
   dependencies:
@@ -7467,7 +7567,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@storybook/addon-links@npm:^6.5.16":
+"@storybook/addon-links@npm:6.5.16":
   version: 6.5.16
   resolution: "@storybook/addon-links@npm:6.5.16"
   dependencies:
@@ -7706,7 +7806,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@storybook/builder-webpack5@npm:6.5.16, @storybook/builder-webpack5@npm:^6.5.16":
+"@storybook/builder-webpack5@npm:6.5.16":
   version: 6.5.16
   resolution: "@storybook/builder-webpack5@npm:6.5.16"
   dependencies:
@@ -8171,7 +8271,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@storybook/manager-webpack5@npm:6.5.16, @storybook/manager-webpack5@npm:^6.5.16":
+"@storybook/manager-webpack5@npm:6.5.16":
   version: 6.5.16
   resolution: "@storybook/manager-webpack5@npm:6.5.16"
   dependencies:
@@ -8303,7 +8403,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@storybook/react@npm:6.5.16, @storybook/react@npm:^6.5.16":
+"@storybook/react@npm:6.5.16":
   version: 6.5.16
   resolution: "@storybook/react@npm:6.5.16"
   dependencies:
@@ -8479,7 +8579,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@storybook/testing-library@npm:^0.0.13":
+"@storybook/testing-library@npm:0.0.13":
   version: 0.0.13
   resolution: "@storybook/testing-library@npm:0.0.13"
   dependencies:
@@ -11312,6 +11412,21 @@ __metadata:
   languageName: node
   linkType: hard
 
+"aria-hidden@npm:^1.1.3":
+  version: 1.2.2
+  resolution: "aria-hidden@npm:1.2.2"
+  dependencies:
+    tslib: ^2.0.0
+  peerDependencies:
+    "@types/react": ^16.9.0 || ^17.0.0 || ^18.0.0
+    react: ^16.9.0 || ^17.0.0 || ^18.0.0
+  peerDependenciesMeta:
+    "@types/react":
+      optional: true
+  checksum: ee1a3688db5491eeb87b73eea624614f24ef62a74cf9e47bc8229dde1ff7457f7e4a26425cadc0d3efd89380305e6fb4a4e505bccdee16beaa4686014861d7b1
+  languageName: node
+  linkType: hard
+
 "aria-query@npm:^4.2.2":
   version: 4.2.2
   resolution: "aria-query@npm:4.2.2"
@@ -11706,7 +11821,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"autoprefixer@npm:^10.4.13":
+"autoprefixer@npm:10.4.13, autoprefixer@npm:^10.4.13":
   version: 10.4.13
   resolution: "autoprefixer@npm:10.4.13"
   dependencies:
@@ -12006,20 +12121,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"babel-loader@npm:9.1.2":
-  version: 9.1.2
-  resolution: "babel-loader@npm:9.1.2"
-  dependencies:
-    find-cache-dir: ^3.3.2
-    schema-utils: ^4.0.0
-  peerDependencies:
-    "@babel/core": ^7.12.0
-    webpack: ">=5"
-  checksum: f0edb8e157f9806b810ba3f2c8ca8fa489d377ae5c2b7b00c2ace900a6925641ce4ec520b9c12f70e37b94aa5366e7003e0f6271b26821643e109966ce741cb7
-  languageName: node
-  linkType: hard
-
-"babel-loader@npm:^8.0.0, babel-loader@npm:^8.2.3, babel-loader@npm:^8.3.0":
+"babel-loader@npm:8.3.0, babel-loader@npm:^8.0.0, babel-loader@npm:^8.2.3":
   version: 8.3.0
   resolution: "babel-loader@npm:8.3.0"
   dependencies:
@@ -12034,6 +12136,19 @@ __metadata:
   languageName: node
   linkType: hard
 
+"babel-loader@npm:9.1.2":
+  version: 9.1.2
+  resolution: "babel-loader@npm:9.1.2"
+  dependencies:
+    find-cache-dir: ^3.3.2
+    schema-utils: ^4.0.0
+  peerDependencies:
+    "@babel/core": ^7.12.0
+    webpack: ">=5"
+  checksum: f0edb8e157f9806b810ba3f2c8ca8fa489d377ae5c2b7b00c2ace900a6925641ce4ec520b9c12f70e37b94aa5366e7003e0f6271b26821643e109966ce741cb7
+  languageName: node
+  linkType: hard
+
 "babel-plugin-add-react-displayname@npm:^0.0.5":
   version: 0.0.5
   resolution: "babel-plugin-add-react-displayname@npm:0.0.5"
@@ -12419,6 +12534,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"bezier-easing@npm:^2.1.0":
+  version: 2.1.0
+  resolution: "bezier-easing@npm:2.1.0"
+  checksum: ec22666b5385979b3e7a63eaf2631395b1be5beb3aed4f14cc70ae9eb09032082584f7e3eec045e4c122466987ed7e159f5b39f82b8a9870cd55e75b0d55a7d5
+  languageName: node
+  linkType: hard
+
 "bfj@npm:^7.0.2":
   version: 7.0.2
   resolution: "bfj@npm:7.0.2"
@@ -13960,7 +14082,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"clsx@npm:^1.0.4, clsx@npm:^1.2.1":
+"clsx@npm:1.2.1, clsx@npm:^1.0.4":
   version: 1.2.1
   resolution: "clsx@npm:1.2.1"
   checksum: 30befca8019b2eb7dbad38cff6266cf543091dae2825c856a62a8ccf2c3ab9c2907c4d12b288b73101196767f66812365400a227581484a05f968b0307cfaf12
@@ -15019,6 +15141,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"css-mediaquery@npm:^0.1.2":
+  version: 0.1.2
+  resolution: "css-mediaquery@npm:0.1.2"
+  checksum: 8e26ae52d8aaaa71893f82fc485363ff0fab494b7d3b3464572aaed50714b8b538d33dbdaa69f0c02cf7f80d1f4d9a77519306c0492223ce91b3987475031a69
+  languageName: node
+  linkType: hard
+
 "css-minimizer-webpack-plugin@npm:^3.2.0":
   version: 3.4.1
   resolution: "css-minimizer-webpack-plugin@npm:3.4.1"
@@ -16150,6 +16279,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"diff-sequences@npm:^29.4.3":
+  version: 29.4.3
+  resolution: "diff-sequences@npm:29.4.3"
+  checksum: 28b265e04fdddcf7f9f814effe102cc95a9dec0564a579b5aed140edb24fc345c611ca52d76d725a3cab55d3888b915b5e8a4702e0f6058968a90fa5f41fcde7
+  languageName: node
+  linkType: hard
+
 "diff@npm:3.5.0":
   version: 3.5.0
   resolution: "diff@npm:3.5.0"
@@ -17915,6 +18051,19 @@ __metadata:
   languageName: node
   linkType: hard
 
+"expect@npm:^29.4.3":
+  version: 29.4.3
+  resolution: "expect@npm:29.4.3"
+  dependencies:
+    "@jest/expect-utils": ^29.4.3
+    jest-get-type: ^29.4.3
+    jest-matcher-utils: ^29.4.3
+    jest-message-util: ^29.4.3
+    jest-util: ^29.4.3
+  checksum: ff9dd8c50c0c6fd4b2b00f6dbd7ab0e2063fe1953be81a8c10ae1c005c7f5667ba452918e2efb055504b72b701a4f82575a081a0a7158efb16d87991b0366feb
+  languageName: node
+  linkType: hard
+
 "express-history-api-fallback@npm:2.2.1":
   version: 2.2.1
   resolution: "express-history-api-fallback@npm:2.2.1"
@@ -22230,6 +22379,18 @@ __metadata:
   languageName: node
   linkType: hard
 
+"jest-diff@npm:^29.0.0, jest-diff@npm:^29.4.3":
+  version: 29.4.3
+  resolution: "jest-diff@npm:29.4.3"
+  dependencies:
+    chalk: ^4.0.0
+    diff-sequences: ^29.4.3
+    jest-get-type: ^29.4.3
+    pretty-format: ^29.4.3
+  checksum: 877fd1edffef6b319688c27b152e5b28e2bc4bcda5ce0ca90d7e137f9fafda4280bae25403d4c0bfd9806c2c0b15d966aa2dfaf5f9928ec8f1ccea7fa1d08ed6
+  languageName: node
+  linkType: hard
+
 "jest-diff@npm:^29.4.2":
   version: 29.4.2
   resolution: "jest-diff@npm:29.4.2"
@@ -22286,22 +22447,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"jest-environment-jsdom@npm:^27.5.1":
-  version: 27.5.1
-  resolution: "jest-environment-jsdom@npm:27.5.1"
-  dependencies:
-    "@jest/environment": ^27.5.1
-    "@jest/fake-timers": ^27.5.1
-    "@jest/types": ^27.5.1
-    "@types/node": "*"
-    jest-mock: ^27.5.1
-    jest-util: ^27.5.1
-    jsdom: ^16.6.0
-  checksum: bc104aef7d7530d0740402aa84ac812138b6d1e51fe58adecce679f82b99340ddab73e5ec68fa079f33f50c9ddec9728fc9f0ddcca2ad6f0b351eed2762cc555
-  languageName: node
-  linkType: hard
-
-"jest-environment-jsdom@npm:^29.4.2":
+"jest-environment-jsdom@npm:29.4.2, jest-environment-jsdom@npm:^29.4.2":
   version: 29.4.2
   resolution: "jest-environment-jsdom@npm:29.4.2"
   dependencies:
@@ -22322,6 +22468,21 @@ __metadata:
   languageName: node
   linkType: hard
 
+"jest-environment-jsdom@npm:^27.5.1":
+  version: 27.5.1
+  resolution: "jest-environment-jsdom@npm:27.5.1"
+  dependencies:
+    "@jest/environment": ^27.5.1
+    "@jest/fake-timers": ^27.5.1
+    "@jest/types": ^27.5.1
+    "@types/node": "*"
+    jest-mock: ^27.5.1
+    jest-util: ^27.5.1
+    jsdom: ^16.6.0
+  checksum: bc104aef7d7530d0740402aa84ac812138b6d1e51fe58adecce679f82b99340ddab73e5ec68fa079f33f50c9ddec9728fc9f0ddcca2ad6f0b351eed2762cc555
+  languageName: node
+  linkType: hard
+
 "jest-environment-node@npm:^27.5.1":
   version: 27.5.1
   resolution: "jest-environment-node@npm:27.5.1"
@@ -22364,6 +22525,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"jest-get-type@npm:^29.4.3":
+  version: 29.4.3
+  resolution: "jest-get-type@npm:29.4.3"
+  checksum: 6ac7f2dde1c65e292e4355b6c63b3a4897d7e92cb4c8afcf6d397f2682f8080e094c8b0b68205a74d269882ec06bf696a9de6cd3e1b7333531e5ed7b112605ce
+  languageName: node
+  linkType: hard
+
 "jest-haste-map@npm:^26.6.2":
   version: 26.6.2
   resolution: "jest-haste-map@npm:26.6.2"
@@ -22436,6 +22604,29 @@ __metadata:
   languageName: node
   linkType: hard
 
+"jest-haste-map@npm:^29.4.3":
+  version: 29.4.3
+  resolution: "jest-haste-map@npm:29.4.3"
+  dependencies:
+    "@jest/types": ^29.4.3
+    "@types/graceful-fs": ^4.1.3
+    "@types/node": "*"
+    anymatch: ^3.0.3
+    fb-watchman: ^2.0.0
+    fsevents: ^2.3.2
+    graceful-fs: ^4.2.9
+    jest-regex-util: ^29.4.3
+    jest-util: ^29.4.3
+    jest-worker: ^29.4.3
+    micromatch: ^4.0.4
+    walker: ^1.0.8
+  dependenciesMeta:
+    fsevents:
+      optional: true
+  checksum: c7a83ebe6008b3fe96a96235e8153092e54b14df68e0f4205faedec57450df26b658578495a71c6d82494c01fbb44bca98c1506a6b2b9c920696dcc5d2e2bc59
+  languageName: node
+  linkType: hard
+
 "jest-jasmine2@npm:^27.5.1":
   version: 27.5.1
   resolution: "jest-jasmine2@npm:27.5.1"
@@ -22505,6 +22696,18 @@ __metadata:
   languageName: node
   linkType: hard
 
+"jest-matcher-utils@npm:^29.4.3":
+  version: 29.4.3
+  resolution: "jest-matcher-utils@npm:29.4.3"
+  dependencies:
+    chalk: ^4.0.0
+    jest-diff: ^29.4.3
+    jest-get-type: ^29.4.3
+    pretty-format: ^29.4.3
+  checksum: 9e13cbe42d2113bab2691110c7c3ba5cec3b94abad2727e1de90929d0f67da444e9b2066da3b476b5bf788df53a8ede0e0a950cfb06a04e4d6d566d115ee4f1d
+  languageName: node
+  linkType: hard
+
 "jest-message-util@npm:^27.5.1":
   version: 27.5.1
   resolution: "jest-message-util@npm:27.5.1"
@@ -22556,6 +22759,23 @@ __metadata:
   languageName: node
   linkType: hard
 
+"jest-message-util@npm:^29.4.3":
+  version: 29.4.3
+  resolution: "jest-message-util@npm:29.4.3"
+  dependencies:
+    "@babel/code-frame": ^7.12.13
+    "@jest/types": ^29.4.3
+    "@types/stack-utils": ^2.0.0
+    chalk: ^4.0.0
+    graceful-fs: ^4.2.9
+    micromatch: ^4.0.4
+    pretty-format: ^29.4.3
+    slash: ^3.0.0
+    stack-utils: ^2.0.3
+  checksum: 64f06b9550021e68da0059020bea8691283cf818918810bb67192d7b7fb9b691c7eadf55c2ca3cd04df5394918f2327245077095cdc0d6b04be3532d2c7d0ced
+  languageName: node
+  linkType: hard
+
 "jest-mock@npm:^27.0.6, jest-mock@npm:^27.5.1":
   version: 27.5.1
   resolution: "jest-mock@npm:27.5.1"
@@ -22617,6 +22837,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"jest-regex-util@npm:^29.4.3":
+  version: 29.4.3
+  resolution: "jest-regex-util@npm:29.4.3"
+  checksum: 96fc7fc28cd4dd73a63c13a526202c4bd8b351d4e5b68b1a2a2c88da3308c2a16e26feaa593083eb0bac38cca1aa9dd05025412e7de013ba963fb8e66af22b8a
+  languageName: node
+  linkType: hard
+
 "jest-resolve-dependencies@npm:^27.5.1":
   version: 27.5.1
   resolution: "jest-resolve-dependencies@npm:27.5.1"
@@ -22842,6 +23069,38 @@ __metadata:
   languageName: node
   linkType: hard
 
+"jest-snapshot@npm:^29.0.0":
+  version: 29.4.3
+  resolution: "jest-snapshot@npm:29.4.3"
+  dependencies:
+    "@babel/core": ^7.11.6
+    "@babel/generator": ^7.7.2
+    "@babel/plugin-syntax-jsx": ^7.7.2
+    "@babel/plugin-syntax-typescript": ^7.7.2
+    "@babel/traverse": ^7.7.2
+    "@babel/types": ^7.3.3
+    "@jest/expect-utils": ^29.4.3
+    "@jest/transform": ^29.4.3
+    "@jest/types": ^29.4.3
+    "@types/babel__traverse": ^7.0.6
+    "@types/prettier": ^2.1.5
+    babel-preset-current-node-syntax: ^1.0.0
+    chalk: ^4.0.0
+    expect: ^29.4.3
+    graceful-fs: ^4.2.9
+    jest-diff: ^29.4.3
+    jest-get-type: ^29.4.3
+    jest-haste-map: ^29.4.3
+    jest-matcher-utils: ^29.4.3
+    jest-message-util: ^29.4.3
+    jest-util: ^29.4.3
+    natural-compare: ^1.4.0
+    pretty-format: ^29.4.3
+    semver: ^7.3.5
+  checksum: 79ba52f2435e23ce72b1309be4b17fdbcb299d1c2ce97ebb61df9a62711e9463035f63b4c849181b2fe5aa17b3e09d30ee4668cc25fb3c6f59511c010b4d9494
+  languageName: node
+  linkType: hard
+
 "jest-snapshot@npm:^29.4.2":
   version: 29.4.2
   resolution: "jest-snapshot@npm:29.4.2"
@@ -22941,6 +23200,20 @@ __metadata:
   languageName: node
   linkType: hard
 
+"jest-util@npm:^29.4.3":
+  version: 29.4.3
+  resolution: "jest-util@npm:29.4.3"
+  dependencies:
+    "@jest/types": ^29.4.3
+    "@types/node": "*"
+    chalk: ^4.0.0
+    ci-info: ^3.2.0
+    graceful-fs: ^4.2.9
+    picomatch: ^2.2.3
+  checksum: 606b3e6077895baf8fb4ad4d08c134f37a6b81d5ba77ae654c942b1ae4b7294ab3b5a0eb93db34f129407b367970cf3b76bf5c80897b30f215f2bc8bf20a5f3f
+  languageName: node
+  linkType: hard
+
 "jest-validate@npm:^27.5.1":
   version: 27.5.1
   resolution: "jest-validate@npm:27.5.1"
@@ -23078,6 +23351,18 @@ __metadata:
   languageName: node
   linkType: hard
 
+"jest-worker@npm:^29.4.3":
+  version: 29.4.3
+  resolution: "jest-worker@npm:29.4.3"
+  dependencies:
+    "@types/node": "*"
+    jest-util: ^29.4.3
+    merge-stream: ^2.0.0
+    supports-color: ^8.0.0
+  checksum: c99ae66f257564613e72c5797c3a68f21a22e1c1fb5f30d14695ff5b508a0d2405f22748f13a3df8d1015b5e16abb130170f81f047ff68f58b6b1d2ff6ebc51b
+  languageName: node
+  linkType: hard
+
 "jest@npm:29.4.2":
   version: 29.4.2
   resolution: "jest@npm:29.4.2"
@@ -23229,6 +23514,18 @@ __metadata:
   languageName: node
   linkType: hard
 
+"jsdom-testing-mocks@npm:1.7.0":
+  version: 1.7.0
+  resolution: "jsdom-testing-mocks@npm:1.7.0"
+  dependencies:
+    bezier-easing: ^2.1.0
+    css-mediaquery: ^0.1.2
+  peerDependencies:
+    react: ">=17"
+  checksum: 93db608c79d9010b4d10bc75e7d4e5f28125572a6e8fb3128f6250775973dfc06c4b6d06113c70525b0116ac0a4abc93644efa3aa3f3046e6345e3ed32ab00fd
+  languageName: node
+  linkType: hard
+
 "jsdom@npm:^16.6.0":
   version: 16.7.0
   resolution: "jsdom@npm:16.7.0"
@@ -28559,17 +28856,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"postcss@npm:^7.0.14, postcss@npm:^7.0.26, postcss@npm:^7.0.32, postcss@npm:^7.0.35, postcss@npm:^7.0.36, postcss@npm:^7.0.5, postcss@npm:^7.0.6":
-  version: 7.0.39
-  resolution: "postcss@npm:7.0.39"
-  dependencies:
-    picocolors: ^0.2.1
-    source-map: ^0.6.1
-  checksum: 4ac793f506c23259189064bdc921260d869a115a82b5e713973c5af8e94fbb5721a5cc3e1e26840500d7e1f1fa42a209747c5b1a151918a9bc11f0d7ed9048e3
-  languageName: node
-  linkType: hard
-
-"postcss@npm:^8.0.9, postcss@npm:^8.2.15, postcss@npm:^8.3.5, postcss@npm:^8.4.19, postcss@npm:^8.4.21, postcss@npm:^8.4.4":
+"postcss@npm:8.4.21, postcss@npm:^8.0.9, postcss@npm:^8.2.15, postcss@npm:^8.3.5, postcss@npm:^8.4.19, postcss@npm:^8.4.4":
   version: 8.4.21
   resolution: "postcss@npm:8.4.21"
   dependencies:
@@ -28580,6 +28867,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"postcss@npm:^7.0.14, postcss@npm:^7.0.26, postcss@npm:^7.0.32, postcss@npm:^7.0.35, postcss@npm:^7.0.36, postcss@npm:^7.0.5, postcss@npm:^7.0.6":
+  version: 7.0.39
+  resolution: "postcss@npm:7.0.39"
+  dependencies:
+    picocolors: ^0.2.1
+    source-map: ^0.6.1
+  checksum: 4ac793f506c23259189064bdc921260d869a115a82b5e713973c5af8e94fbb5721a5cc3e1e26840500d7e1f1fa42a209747c5b1a151918a9bc11f0d7ed9048e3
+  languageName: node
+  linkType: hard
+
 "prelude-ls@npm:^1.2.1":
   version: 1.2.1
   resolution: "prelude-ls@npm:1.2.1"
@@ -28719,6 +29016,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"pretty-format@npm:^29.4.3":
+  version: 29.4.3
+  resolution: "pretty-format@npm:29.4.3"
+  dependencies:
+    "@jest/schemas": ^29.4.3
+    ansi-styles: ^5.0.0
+    react-is: ^18.0.0
+  checksum: 3258b9a010bd79b3cf73783ad1e4592b6326fc981b6e31b742f316f14e7fbac09b48a9dbf274d092d9bde404db9fe16f518370e121837dc078a597392e6e5cc5
+  languageName: node
+  linkType: hard
+
 "pretty-hrtime@npm:^1.0.3":
   version: 1.0.3
   resolution: "pretty-hrtime@npm:1.0.3"
@@ -29734,7 +30042,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"react-polymorphic-box@npm:^3.0.3":
+"react-polymorphic-box@npm:3.0.3":
   version: 3.0.3
   resolution: "react-polymorphic-box@npm:3.0.3"
   peerDependencies:
@@ -30842,7 +31150,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"rollup-plugin-postcss@npm:^4.0.2":
+"rollup-plugin-postcss@npm:4.0.2":
   version: 4.0.2
   resolution: "rollup-plugin-postcss@npm:4.0.2"
   dependencies:
@@ -31930,6 +32238,19 @@ __metadata:
   languageName: node
   linkType: hard
 
+"snapshot-diff@npm:0.10.0":
+  version: 0.10.0
+  resolution: "snapshot-diff@npm:0.10.0"
+  dependencies:
+    jest-diff: ^29.0.0
+    jest-snapshot: ^29.0.0
+    pretty-format: ^29.0.0
+  peerDependencies:
+    jest: ">=16"
+  checksum: d13e310faeed3f091265cc141ac8f19f192b2c6837e1aaabf6ea601ed8edc40471324609434ab85cb5220fff4c7103fa48c4f9f63c3a207944c55224c0dbde0b
+  languageName: node
+  linkType: hard
+
 "sockjs@npm:^0.3.24":
   version: 0.3.24
   resolution: "sockjs@npm:0.3.24"
@@ -33105,7 +33426,14 @@ __metadata:
   languageName: node
   linkType: hard
 
-"tailwindcss@npm:^3.0.2, tailwindcss@npm:^3.2.6":
+"tabbable@npm:^6.0.1":
+  version: 6.1.1
+  resolution: "tabbable@npm:6.1.1"
+  checksum: 348639497262241ce8e0ccb0664ea582a386183107299ee8f27cf7b56bc84f36e09eaf667d3cb4201e789634012a91f7129bcbd49760abe874fbace35b4cf429
+  languageName: node
+  linkType: hard
+
+"tailwindcss@npm:3.2.6, tailwindcss@npm:^3.0.2":
   version: 3.2.6
   resolution: "tailwindcss@npm:3.2.6"
   dependencies: