From 0ef7684b12514b47bde48790fef7e5ce76eb28a4 Mon Sep 17 00:00:00 2001
From: Nathan Vasse <nathan.vasse@gmail.com>
Date: Thu, 7 Mar 2024 16:35:14 +0100
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8(react)=20add=20Tooltip=20component?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

This component will allow to provide contextual information on any
DOM node.

Closes #239
---
 .changeset/shiny-days-notice.md               |   5 +
 packages/react/package.json                   |   4 +-
 .../react/src/components/Tooltip/_index.scss  |  91 +++++++++++
 .../react/src/components/Tooltip/index.mdx    |  58 +++++++
 .../src/components/Tooltip/index.spec.tsx     | 149 ++++++++++++++++++
 .../src/components/Tooltip/index.stories.tsx  | 147 +++++++++++++++++
 .../react/src/components/Tooltip/index.tsx    | 109 +++++++++++++
 .../react/src/components/Tooltip/tokens.ts    |  12 ++
 packages/react/src/cunningham-tokens.css      |   6 +
 packages/react/src/cunningham-tokens.js       |   2 +-
 packages/react/src/cunningham-tokens.scss     |   8 +
 packages/react/src/cunningham-tokens.ts       |   2 +-
 packages/react/src/index.scss                 |   1 +
 packages/react/src/index.ts                   |   1 +
 yarn.lock                                     |  92 ++++++++++-
 15 files changed, 683 insertions(+), 4 deletions(-)
 create mode 100644 .changeset/shiny-days-notice.md
 create mode 100644 packages/react/src/components/Tooltip/_index.scss
 create mode 100644 packages/react/src/components/Tooltip/index.mdx
 create mode 100644 packages/react/src/components/Tooltip/index.spec.tsx
 create mode 100644 packages/react/src/components/Tooltip/index.stories.tsx
 create mode 100644 packages/react/src/components/Tooltip/index.tsx
 create mode 100644 packages/react/src/components/Tooltip/tokens.ts

diff --git a/.changeset/shiny-days-notice.md b/.changeset/shiny-days-notice.md
new file mode 100644
index 0000000..d70dfdd
--- /dev/null
+++ b/.changeset/shiny-days-notice.md
@@ -0,0 +1,5 @@
+---
+"@openfun/cunningham-react": minor
+---
+
+add Tooltip component
diff --git a/packages/react/package.json b/packages/react/package.json
index f21dc50..2e8ede8 100644
--- a/packages/react/package.json
+++ b/packages/react/package.json
@@ -56,7 +56,9 @@
     "downshift": "8.4.0",
     "react": "18.2.0",
     "react-aria": "3.32.1",
-    "react-dom": "18.2.0"
+    "react-aria-components": "1.1.1",
+    "react-dom": "18.2.0",
+    "react-stately": "3.30.1"
   },
   "engines": {
     "node": ">=18.0.0"
diff --git a/packages/react/src/components/Tooltip/_index.scss b/packages/react/src/components/Tooltip/_index.scss
new file mode 100644
index 0000000..a185bab
--- /dev/null
+++ b/packages/react/src/components/Tooltip/_index.scss
@@ -0,0 +1,91 @@
+.c__tooltip {
+  border-radius: var(--c--components--tooltip--border-radius);
+  background: var(--c--components--tooltip--background-color);
+  color: var(--c--components--tooltip--color);
+  font-size: var(--c--components--tooltip--font-size);
+  forced-color-adjust: none;
+  outline: none;
+  padding: var(--c--components--tooltip--padding);
+  max-width: var(--c--components--tooltip--max-width);
+  display: flex;
+  /* fixes FF gap */
+  transform: translate3d(0, 0, 0);
+  --animation-duration: 200ms;
+
+  &[data-placement=top] {
+    margin-bottom: 8px;
+    --origin: translateY(4px);
+
+    .react-aria-OverlayArrow {
+      left: 50%;
+    }
+  }
+
+  &[data-placement=bottom] {
+    margin-top: 8px;
+    --origin: translateY(-4px);
+
+    .react-aria-OverlayArrow {
+      left: 50%;
+
+      svg {
+        transform: rotate(180deg);
+      }
+    }
+  }
+
+  &[data-placement=right] {
+    margin-left: 8px;
+    --origin: translateX(-4px);
+
+    .react-aria-OverlayArrow {
+      top: 50%;
+
+      svg {
+        transform: rotate(90deg);
+      }
+    }
+  }
+
+  &[data-placement=left] {
+    margin-right: 8px;
+    --origin: translateX(4px);
+
+    .react-aria-OverlayArrow {
+      top: 50%;
+
+      svg {
+        transform: rotate(-90deg);
+      }
+    }
+  }
+
+  & .react-aria-OverlayArrow svg {
+    display: block;
+    fill: var(--c--components--tooltip--background-color);
+  }
+
+  &--entering {
+    animation: slide var(--animation-duration);
+  }
+
+  &--exiting {
+    animation: slide var(--animation-duration) reverse forwards;
+  }
+
+  &__content {
+    overflow: scroll;
+  }
+}
+
+@keyframes slide {
+  from {
+    transform: var(--origin);
+    opacity: 0;
+  }
+
+  to {
+    transform: translateY(0);
+    opacity: 1;
+  }
+}
diff --git a/packages/react/src/components/Tooltip/index.mdx b/packages/react/src/components/Tooltip/index.mdx
new file mode 100644
index 0000000..6229924
--- /dev/null
+++ b/packages/react/src/components/Tooltip/index.mdx
@@ -0,0 +1,58 @@
+import { Canvas, Meta, Story, Source, ArgTypes } from '@storybook/blocks';
+import * as Stories from './index.stories';
+import { Tooltip } from './index';
+
+<Meta of={Stories}/>
+
+# Tooltip
+
+Cunningham provides a tooltip component for displaying any kind of additional information.
+
+<Canvas sourceState="shown" of={Stories.Default}/>
+
+
+## Content
+
+The content of the tooltip can either be a string or any React Element.
+
+### Plain text
+
+<Canvas sourceState="shown" of={Stories.OverflowingText}/>
+
+### HTML
+
+<Canvas sourceState="shown" of={Stories.WithHtml}/>
+
+## Trigger element
+
+As you can see in the examples above, the tooltip can be triggered by any kind of element which
+must be passed as children to the `Tooltip` component.
+
+Here is a more complex example with a more advanced component
+
+<Canvas sourceState="hidden" of={Stories.WithElements}/>
+
+## Placement
+
+The tooltip can be placed in different positions relative to the trigger element using `placement` props. The available positions are: `top`, `right`, `bottom`, `left`.
+
+<Canvas sourceState="hidden" of={Stories.Placements}/>
+
+## Props
+
+These are the props of `Tooltip`.
+
+<ArgTypes of={Tooltip} />
+
+## Design tokens
+
+Here a the custom design tokens defined by the Tooltip.
+
+| Token        	| Description                 	|
+|---------------	|-----------------------------	|
+| border-radius 	| Border radius of the tooltip 	|
+| background-color 	| Background color of the tooltip 	|
+| color 	| Text color of the tooltip 	|
+| font-size 	| Font size of the tooltip content	|
+| padding 	| Padding of the tooltip content	|
+| max-width | Max width of the tooltip	|
diff --git a/packages/react/src/components/Tooltip/index.spec.tsx b/packages/react/src/components/Tooltip/index.spec.tsx
new file mode 100644
index 0000000..324575c
--- /dev/null
+++ b/packages/react/src/components/Tooltip/index.spec.tsx
@@ -0,0 +1,149 @@
+import {
+  render,
+  screen,
+  waitFor,
+  waitForElementToBeRemoved,
+} from "@testing-library/react";
+import React from "react";
+import userEvent from "@testing-library/user-event";
+import { fireEvent } from "@testing-library/dom";
+import { Tooltip } from ":/components/Tooltip/index";
+import { Button } from ":/components/Button";
+
+describe("<Tooltip />", () => {
+  it("appear on button hover and then disappear", async () => {
+    render(
+      <Tooltip content="Hi there" closeDelay={0}>
+        <Button size="nano" color="tertiary-text">
+          ⬅️
+        </Button>
+      </Tooltip>,
+    );
+
+    const button = screen.getByRole("button");
+    expect(screen.queryByText("Hi there")).not.toBeInTheDocument();
+    const user = userEvent.setup();
+    fireEvent.mouseMove(document.body);
+    await user.hover(button);
+    expect(await screen.findByText("Hi there")).toBeInTheDocument();
+
+    await user.unhover(button);
+    await waitForElementToBeRemoved(screen.queryByText("Hi there"));
+  });
+  it("appear on button focus and then disappear", async () => {
+    render(
+      <Tooltip content="Hi there" closeDelay={0}>
+        <Button size="nano" color="tertiary-text">
+          ⬅️
+        </Button>
+      </Tooltip>,
+    );
+
+    expect(screen.queryByText("Hi there")).not.toBeInTheDocument();
+    const user = userEvent.setup();
+
+    await user.tab();
+    expect(await screen.findByText("Hi there")).toBeInTheDocument();
+
+    await user.tab();
+    await waitForElementToBeRemoved(screen.queryByText("Hi there"));
+  });
+  it("sets entering and exiting class", async () => {
+    render(
+      <Tooltip content="Hi there" closeDelay={0}>
+        <Button size="nano" color="tertiary-text">
+          ⬅️
+        </Button>
+      </Tooltip>,
+    );
+
+    expect(screen.queryByText("Hi there")).not.toBeInTheDocument();
+    const user = userEvent.setup();
+
+    const button = screen.getByRole("button");
+
+    fireEvent.mouseMove(document.body);
+    await user.hover(button);
+
+    // Make sure the tooltip is entering.
+    await waitFor(() => {
+      const tooltip = document.querySelector(".c__tooltip");
+      expect(tooltip).toHaveClass("c__tooltip--entering");
+      expect(tooltip).not.toHaveClass("c__tooltip--exiting");
+    });
+
+    // Make sure the entering class is removed and the exiting class is not added yet.
+    await waitFor(() => {
+      const tooltip = document.querySelector(".c__tooltip");
+      expect(tooltip).not.toHaveClass("c__tooltip--entering");
+      expect(tooltip).not.toHaveClass("c__tooltip--exiting");
+    });
+
+    await user.unhover(button);
+
+    // Make sure the tooltip is exiting.
+    await waitFor(() => {
+      const tooltip = document.querySelector(".c__tooltip");
+      expect(tooltip).not.toHaveClass("c__tooltip--entering");
+      expect(tooltip).toHaveClass("c__tooltip--exiting");
+    });
+
+    // Make sure the tooltip is removed.
+    await waitForElementToBeRemoved(document.querySelector(".c__tooltip"));
+  });
+  it("works with HTML", async () => {
+    render(
+      <Tooltip
+        content={
+          <>
+            <h1>Title</h1>
+            <p>Description</p>
+          </>
+        }
+        closeDelay={0}
+      >
+        <Button size="nano" color="tertiary-text">
+          ⬅️
+        </Button>
+      </Tooltip>,
+    );
+
+    const button = screen.getByRole("button");
+    expect(screen.queryByText("Hi there")).not.toBeInTheDocument();
+    const user = userEvent.setup();
+    fireEvent.mouseMove(document.body);
+    await user.hover(button);
+    await screen.findByRole("heading", { name: "Title" });
+    await screen.findByText("Description");
+  });
+  it("renders with className", async () => {
+    render(
+      <Tooltip
+        content={
+          <>
+            <h1>Title</h1>
+            <p>Description</p>
+          </>
+        }
+        closeDelay={0}
+        className="my-custom-class"
+      >
+        <Button size="nano" color="tertiary-text">
+          ⬅️
+        </Button>
+      </Tooltip>,
+    );
+
+    const button = screen.getByRole("button");
+    expect(screen.queryByText("Hi there")).not.toBeInTheDocument();
+
+    const user = userEvent.setup();
+    fireEvent.mouseMove(document.body);
+    await user.hover(button);
+
+    await waitFor(() => {
+      const tooltip = document.querySelector(".c__tooltip");
+      expect(tooltip).toHaveClass("my-custom-class");
+    });
+  });
+});
diff --git a/packages/react/src/components/Tooltip/index.stories.tsx b/packages/react/src/components/Tooltip/index.stories.tsx
new file mode 100644
index 0000000..64cd41b
--- /dev/null
+++ b/packages/react/src/components/Tooltip/index.stories.tsx
@@ -0,0 +1,147 @@
+import React from "react";
+import { Meta } from "@storybook/react";
+import { Tooltip } from ":/components/Tooltip";
+import { Button } from ":/components/Button";
+
+export default {
+  title: "Components/Tooltip",
+  component: Tooltip,
+  decorators: [
+    (Story) => {
+      return (
+        <div style={{ padding: "8rem", position: "relative" }}>
+          <div style={{ display: "flex", alignItems: "center", gap: "4rem" }}>
+            <Story />
+            <div>⬅️ Hover it</div>
+          </div>
+        </div>
+      );
+    },
+  ],
+} as Meta<typeof Tooltip>;
+
+export const Default = {
+  args: {
+    children: (
+      <Button
+        size="small"
+        icon={<span className="material-icons">info</span>}
+        color="tertiary-text"
+      />
+    ),
+    content:
+      "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
+  },
+};
+
+export const Placements = {
+  render: () => {
+    return (
+      <div>
+        <Tooltip placement="left" content="Hi there">
+          <Button size="nano" color="tertiary-text">
+            ⬅️
+          </Button>
+        </Tooltip>
+        <Tooltip placement="bottom" content="Hi there">
+          <Button size="nano" color="tertiary-text">
+            ⬇️
+          </Button>
+        </Tooltip>
+        <Tooltip placement="top" content="Hi there">
+          <Button size="nano" color="tertiary-text">
+            ⬆️
+          </Button>
+        </Tooltip>
+        <Tooltip placement="right" content="Hi there">
+          <Button size="nano" color="tertiary-text">
+            ➡️
+          </Button>
+        </Tooltip>
+      </div>
+    );
+  },
+};
+
+const lorem =
+  "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sit amet quam sed nunc commodo consequat. Vestibulum cursus venenatis massa et tempor.";
+export const OverflowingText = {
+  args: {
+    children: (
+      <p
+        style={{
+          width: "100px",
+          whiteSpace: "nowrap",
+          overflow: "hidden",
+          textOverflow: "ellipsis",
+        }}
+      >
+        {lorem}
+      </p>
+    ),
+    content: lorem,
+  },
+};
+
+export const WithElements = {
+  args: {
+    content: lorem,
+    placement: "bottom",
+    children: (
+      <div
+        style={{
+          display: "inline-flex",
+        }}
+      >
+        <div
+          style={{
+            borderRadius: "8px",
+            backgroundColor: "var(--c--theme--colors--greyscale-300)",
+            padding: "1rem",
+            display: "flex",
+            gap: "1rem",
+          }}
+        >
+          <div
+            style={{
+              width: "32px",
+              height: "32px",
+              borderRadius: "100%",
+              backgroundColor: "var(--c--theme--colors--greyscale-600)",
+            }}
+          />
+          <div
+            style={{
+              width: "150px",
+              height: "32px",
+              borderRadius: "4px",
+              backgroundColor: "var(--c--theme--colors--greyscale-400)",
+            }}
+          />
+        </div>
+      </div>
+    ),
+  },
+};
+
+export const WithHtml = {
+  args: {
+    children: (
+      <Button
+        size="small"
+        icon={<span className="material-icons">info</span>}
+        color="tertiary-text"
+      />
+    ),
+    placement: "right",
+    content: (
+      <div>
+        <h3>Heading</h3>
+        <p>
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
+          eiusmod tempor incididunt ut labore et dolore magna aliqua.
+        </p>
+      </div>
+    ),
+  },
+};
diff --git a/packages/react/src/components/Tooltip/index.tsx b/packages/react/src/components/Tooltip/index.tsx
new file mode 100644
index 0000000..cce14a0
--- /dev/null
+++ b/packages/react/src/components/Tooltip/index.tsx
@@ -0,0 +1,109 @@
+import React, { PropsWithChildren, ReactElement, ReactNode } from "react";
+import { OverlayArrow } from "react-aria-components";
+import {
+  mergeProps,
+  useOverlayPosition,
+  useTooltip,
+  useTooltipTrigger,
+} from "react-aria";
+import { useTooltipTriggerState } from "react-stately";
+import classNames from "classnames";
+
+const ANIMATION_DURATION = 200;
+
+export interface TooltipProps extends PropsWithChildren {
+  placement?: "top" | "bottom" | "left" | "right";
+  content: ReactNode;
+  closeDelay?: number;
+  className?: string;
+}
+
+export const Tooltip = ({
+  placement = "bottom",
+  content,
+  closeDelay = 150,
+  className,
+  ...props
+}: TooltipProps) => {
+  const ref = React.useRef(null);
+  const overlayRef = React.useRef(null);
+  const [isExiting, setIsExiting] = React.useState(false);
+  const [isEntering, setIsEntering] = React.useState(false);
+  const state = useTooltipTriggerState({
+    delay: 0,
+    closeDelay,
+    onOpenChange: (isOpen) => {
+      if (isOpen) {
+        setIsEntering(true);
+        setTimeout(() => {
+          setIsEntering(false);
+        }, ANIMATION_DURATION);
+      } else {
+        setIsExiting(true);
+        setTimeout(() => {
+          setIsExiting(false);
+        }, ANIMATION_DURATION);
+      }
+    },
+  });
+
+  // Get props for the trigger and its tooltip
+  const useTooltipTriggerRes = useTooltipTrigger({}, state, ref);
+
+  // overlayPosition.placement can be difference than placement, based on available screen space.
+  const overlayPosition = useOverlayPosition({
+    targetRef: ref,
+    overlayRef,
+    placement,
+    isOpen: state.isOpen,
+  });
+
+  const { tooltipProps: tooltipProps2 } = useTooltip(
+    useTooltipTriggerRes.tooltipProps,
+    state,
+  );
+
+  const arrowProps = {
+    placement: overlayPosition.placement,
+  };
+
+  const showTooltip = state.isOpen || isExiting;
+
+  return (
+    <>
+      {React.cloneElement(
+        React.Children.toArray(props.children)[0] as ReactElement,
+        {
+          ref,
+          ...useTooltipTriggerRes.triggerProps,
+        },
+      )}
+
+      {showTooltip && (
+        <span
+          className={classNames(
+            "c__tooltip",
+            {
+              "c__tooltip--exiting": isExiting,
+              "c__tooltip--entering": isEntering,
+            },
+            className,
+          )}
+          data-placement={overlayPosition.placement}
+          ref={overlayRef}
+          style={{
+            ...overlayPosition.overlayProps.style,
+          }}
+          {...mergeProps(props, tooltipProps2)}
+        >
+          <OverlayArrow {...arrowProps}>
+            <svg width={16} height={16} viewBox="0 0 16 16">
+              <path d="M0 0 L8 8 L16 0" />
+            </svg>
+          </OverlayArrow>
+          <span className="c__tooltip__content">{content}</span>
+        </span>
+      )}
+    </>
+  );
+};
diff --git a/packages/react/src/components/Tooltip/tokens.ts b/packages/react/src/components/Tooltip/tokens.ts
new file mode 100644
index 0000000..609ebe8
--- /dev/null
+++ b/packages/react/src/components/Tooltip/tokens.ts
@@ -0,0 +1,12 @@
+import { DefaultTokens } from "@openfun/cunningham-tokens";
+
+export const tokens = (defaults: DefaultTokens) => {
+  return {
+    "border-radius": "0.5rem",
+    "background-color": defaults.theme.colors["greyscale-900"],
+    color: defaults.theme.colors["greyscale-000"],
+    "font-size": defaults.theme.font.sizes.s,
+    padding: "1rem",
+    "max-width": "150px",
+  };
+};
diff --git a/packages/react/src/cunningham-tokens.css b/packages/react/src/cunningham-tokens.css
index 11d0e05..5d771b1 100644
--- a/packages/react/src/cunningham-tokens.css
+++ b/packages/react/src/cunningham-tokens.css
@@ -112,6 +112,12 @@
 	--c--theme--breakpoints--lg: 992px;
 	--c--theme--breakpoints--xl: 1200px;
 	--c--theme--breakpoints--xxl: 1400px;
+	--c--components--tooltip--border-radius: 0.5rem;
+	--c--components--tooltip--background-color: var(--c--theme--colors--greyscale-900);
+	--c--components--tooltip--color: var(--c--theme--colors--greyscale-000);
+	--c--components--tooltip--font-size: var(--c--theme--font--sizes--s);
+	--c--components--tooltip--padding: 1rem;
+	--c--components--tooltip--max-width: 150px;
 	--c--components--toast--slide-in-duration: 1000ms;
 	--c--components--toast--slide-out-duration: 300ms;
 	--c--components--toast--background-color: var(--c--theme--colors--greyscale-100);
diff --git a/packages/react/src/cunningham-tokens.js b/packages/react/src/cunningham-tokens.js
index fc5b364..e04e0d7 100644
--- a/packages/react/src/cunningham-tokens.js
+++ b/packages/react/src/cunningham-tokens.js
@@ -1 +1 @@
-export const tokens = {"themes":{"default":{"theme":{"colors":{"secondary-text":"#555F6B","secondary-100":"#F2F7FC","secondary-200":"#EBF3FA","secondary-300":"#E2EEF8","secondary-400":"#DDEAF7","secondary-500":"#D4E5F5","secondary-600":"#C1D0DF","secondary-700":"#97A3AE","secondary-800":"#757E87","secondary-900":"#596067","info-text":"#FFFFFF","info-100":"#EBF2FC","info-200":"#8CB5EA","info-300":"#5894E1","info-400":"#377FDB","info-500":"#055FD2","info-600":"#0556BF","info-700":"#044395","info-800":"#033474","info-900":"#022858","greyscale-100":"#FAFAFB","greyscale-200":"#F3F4F4","greyscale-300":"#E7E8EA","greyscale-400":"#C2C6CA","greyscale-500":"#9EA3AA","greyscale-600":"#79818A","greyscale-700":"#555F6B","greyscale-800":"#303C4B","greyscale-900":"#0C1A2B","greyscale-000":"#FFFFFF","primary-100":"#EBF2FC","primary-200":"#8CB5EA","primary-300":"#5894E1","primary-400":"#377FDB","primary-500":"#055FD2","primary-600":"#0556BF","primary-700":"#044395","primary-800":"#033474","primary-900":"#022858","success-100":"#EFFCD3","success-200":"#DBFAA9","success-300":"#BEF27C","success-400":"#A0E659","success-500":"#76D628","success-600":"#5AB81D","success-700":"#419A14","success-800":"#2C7C0C","success-900":"#1D6607","warning-100":"#FFF8CD","warning-200":"#FFEF9B","warning-300":"#FFE469","warning-400":"#FFDA43","warning-500":"#FFC805","warning-600":"#DBA603","warning-700":"#B78702","warning-800":"#936901","warning-900":"#7A5400","danger-100":"#F4B0B0","danger-200":"#EE8A8A","danger-300":"#E65454","danger-400":"#E13333","danger-500":"#DA0000","danger-600":"#C60000","danger-700":"#9B0000","danger-800":"#780000","danger-900":"#5C0000","primary-text":"#FFFFFF","success-text":"#FFFFFF","warning-text":"#FFFFFF","danger-text":"#FFFFFF"},"font":{"sizes":{"h1":"1.75rem","h2":"1.375rem","h3":"1.125rem","h4":"0.8125rem","h5":"0.625rem","h6":"0.5rem","l":"1rem","m":"0.8125rem","s":"0.6875rem"},"weights":{"thin":200,"light":300,"regular":400,"medium":500,"bold":600,"extrabold":700,"black":800},"families":{"base":"\"Roboto Flex Variable\", sans-serif","accent":"\"Roboto Flex Variable\", sans-serif"},"letterSpacings":{"h1":"normal","h2":"normal","h3":"normal","h4":"normal","h5":"1px","h6":"normal","l":"normal","m":"normal","s":"normal"}},"spacings":{"xl":"4rem","l":"3rem","b":"1.625rem","s":"1rem","t":"0.5rem","st":"0.25rem"},"transitions":{"ease-in":"cubic-bezier(0.32, 0, 0.67, 0)","ease-out":"cubic-bezier(0.33, 1, 0.68, 1)","ease-in-out":"cubic-bezier(0.65, 0, 0.35, 1)","duration":"250ms"},"breakpoints":{"xs":0,"sm":"576px","md":"768px","lg":"992px","xl":"1200px","xxl":"1400px"}},"components":{"toast":{"slide-in-duration":"1000ms","slide-out-duration":"300ms","background-color":"#FAFAFB","color":"#0C1A2B","font-weight":400,"icon-size":"19px","progress-bar-height":"3px"},"modal":{"background-color":"#FFFFFF","backdrop-color":"#0C1A2B99","border-radius":"4px","border-color":"#E7E8EA","box-shadow":"0px 1px 2px 0px #0C1A2B4D","color":"#0C1A2B","title-font-weight":600,"content-font-size":"0.8125rem","content-font-weight":400,"content-color":"#303C4B","width-small":"300px","width-medium":"600px","width-large":"75%"},"forms-textarea":{"font-weight":400,"font-size":"1rem","border-radius":"8px","border-radius--hover":"2px","border-radius--focus":"2px","border-width":"1px","border-color":"#E7E8EA","border-color--hover":"#9EA3AA","border-color--focus":"#0556BF","border-style":"solid","label-color--focus":"#0556BF","background-color":"#FFFFFF","value-color":"#0C1A2B","value-color--disabled":"#303C4B"},"forms-switch":{"accent-color":"#419A14","rail-background-color":"#9EA3AA","rail-background-color--disabled":"#C2C6CA","rail-border-radius":"50vw","handle-background-color":"white","handle-background-color--disabled":"#F3F4F4","handle-border-radius":"50%"},"forms-select":{"border-color":"#E7E8EA","border-color--focus":"#0556BF","border-color--hover":"#9EA3AA","border-radius":"8px","border-radius--focus":"2px","border-radius--hover":"2px","border-style":"solid","border-width":"1px","value-color":"#0C1A2B","value-color--disabled":"#303C4B","font-size":"1rem","height":"3.5rem","item-background-color--hover":"#F3F4F4","item-background-color--selected":"#EBF2FC","item-color":"#303C4B","item-color--disabled":"#9EA3AA","item-font-size":"1rem","background-color":"#FFFFFF","menu-background-color":"#FFFFFF","label-color--focus":"#0556BF","multi-pill-background-color":"#F3F4F4","multi-pill-border-radius":"2px","multi-pill-max-width":"68%","multi-pill-font-size":"0.8125rem"},"forms-radio":{"border-color":"#E7E8EA","accent-color":"#5AB81D","background-color":"#FFFFFF"},"forms-labelledbox":{"label-color--small":"#79818A","label-color--big":"#0C1A2B","label-color--small--disabled":"#79818A","label-color--big--disabled":"#79818A"},"forms-input":{"font-weight":400,"font-size":"1rem","border-radius":"8px","border-radius--hover":"2px","border-radius--focus":"2px","border-width":"1px","border-color":"#E7E8EA","border-color--hover":"#9EA3AA","border-color--focus":"#0556BF","border-style":"solid","label-color--focus":"#0556BF","background-color":"#FFFFFF","value-color":"#0C1A2B","value-color--disabled":"#303C4B"},"forms-fileuploader":{"background-color":"#FFFFFF","border-color":"#E7E8EA","border-radius":"0.5rem","border-width":"2px","border-style":"dotted","background-color--active":"#EBF2FC","color":"#0C1A2B","padding":"1rem","accent-color":"#0556BF","text-color":"#79818A","text-size":"0.6875rem","file-text-size":"0.8125rem","file-text-color":"#0C1A2B","file-text-weight":300,"file-border-color":"#E7E8EA","file-border-width":"1px","file-border-radius":"0.5rem","file-background-color":"#FFFFFF","file-specs-size":"0.6875rem","file-specs-color":"#79818A"},"forms-field":{"width":"292px","font-size":"0.6875rem","color":"#79818A"},"forms-datepicker":{"border-color":"#E7E8EA","border-color--disabled":"#F3F4F4","border-color--focus":"#0556BF","border-color--hover":"#9EA3AA","border-radius":"8px","border-radius--focus":"2px","border-radius--hover":"2px","border-style":"solid","border-width":"1px","value-color":"#0C1A2B","value-color--disabled":"#303C4B","font-size":"1rem","height":"3.5rem","item-background-color--hover":"#F3F4F4","item-background-color--selected":"#EBF2FC","item-color":"#303C4B","item-font-size":"1rem","background-color":"#FFFFFF","menu-background-color":"#FFFFFF","range-selection-background-color":"#EBF2FC","range-selection-background-color--disabled":"#FAFAFB","grid-cell--border-color--today":"#0556BF","grid-cell--color--today":"#0556BF","label-color--focus":"#0556BF"},"forms-checkbox":{"background-color--hover":"#F3F4F4","background-color":"#FFFFFF","font-size":"0.8125rem","font-weight":500,"color":"#0C1A2B","border-color":"#E7E8EA","border-radius":"2px","accent-color":"#5AB81D","size":"1.5rem"},"button":{"border-radius":"8px","border-radius--active":"2px","border-radius--focus":"8px","medium-text-height":"36px","medium-height":"48px","small-height":"32px","nano-height":"24px","medium-font-size":"1rem","medium-icon-font-size":"1.5rem","small-font-size":"0.8125rem","small-icon-font-size":"1rem","nano-font-size":"0.8125rem","nano-icon-font-size":"1rem","font-weight":400,"font-family":"\"Roboto Flex Variable\", sans-serif","text-font-weight":500},"alert":{"background-color":"#FAFAFB","border-radius":"4px","font-weight":500,"color":"#0C1A2B","icon-size":"19px","additional-font-weight":400,"additional-color":"#555F6B"}}},"dark":{"theme":{"colors":{"greyscale-100":"#182536","greyscale-200":"#303C4B","greyscale-300":"#555F6B","greyscale-400":"#79818A","greyscale-500":"#9EA3AA","greyscale-600":"#C2C6CA","greyscale-700":"#E7E8EA","greyscale-800":"#F3F4F4","greyscale-900":"#FAFAFB","greyscale-000":"#0C1A2B","primary-100":"#3B4C62","primary-200":"#4D6481","primary-300":"#6381A6","primary-400":"#7FA5D5","primary-500":"#8CB5EA","primary-600":"#A3C4EE","primary-700":"#C3D8F4","primary-800":"#DDE9F8","primary-900":"#F4F8FD","success-100":"#EEF8D7","success-200":"#D9F1B2","success-300":"#BDE985","success-400":"#A0E25D","success-500":"#76D628","success-600":"#5BB520","success-700":"#43941A","success-800":"#307414","success-900":"#225D10","warning-100":"#F7F3D5","warning-200":"#F0E5AA","warning-300":"#E8D680","warning-400":"#E3C95F","warning-500":"#D9B32B","warning-600":"#BD9721","warning-700":"#9D7B1C","warning-800":"#7E6016","warning-900":"#684D12","danger-100":"#F8D0D0","danger-200":"#F09898","danger-300":"#F09898","danger-400":"#ED8585","danger-500":"#E96666","danger-600":"#DD6666","danger-700":"#C36666","danger-800":"#AE6666","danger-900":"#9D6666"}}}}};
+export const tokens = {"themes":{"default":{"theme":{"colors":{"secondary-text":"#555F6B","secondary-100":"#F2F7FC","secondary-200":"#EBF3FA","secondary-300":"#E2EEF8","secondary-400":"#DDEAF7","secondary-500":"#D4E5F5","secondary-600":"#C1D0DF","secondary-700":"#97A3AE","secondary-800":"#757E87","secondary-900":"#596067","info-text":"#FFFFFF","info-100":"#EBF2FC","info-200":"#8CB5EA","info-300":"#5894E1","info-400":"#377FDB","info-500":"#055FD2","info-600":"#0556BF","info-700":"#044395","info-800":"#033474","info-900":"#022858","greyscale-100":"#FAFAFB","greyscale-200":"#F3F4F4","greyscale-300":"#E7E8EA","greyscale-400":"#C2C6CA","greyscale-500":"#9EA3AA","greyscale-600":"#79818A","greyscale-700":"#555F6B","greyscale-800":"#303C4B","greyscale-900":"#0C1A2B","greyscale-000":"#FFFFFF","primary-100":"#EBF2FC","primary-200":"#8CB5EA","primary-300":"#5894E1","primary-400":"#377FDB","primary-500":"#055FD2","primary-600":"#0556BF","primary-700":"#044395","primary-800":"#033474","primary-900":"#022858","success-100":"#EFFCD3","success-200":"#DBFAA9","success-300":"#BEF27C","success-400":"#A0E659","success-500":"#76D628","success-600":"#5AB81D","success-700":"#419A14","success-800":"#2C7C0C","success-900":"#1D6607","warning-100":"#FFF8CD","warning-200":"#FFEF9B","warning-300":"#FFE469","warning-400":"#FFDA43","warning-500":"#FFC805","warning-600":"#DBA603","warning-700":"#B78702","warning-800":"#936901","warning-900":"#7A5400","danger-100":"#F4B0B0","danger-200":"#EE8A8A","danger-300":"#E65454","danger-400":"#E13333","danger-500":"#DA0000","danger-600":"#C60000","danger-700":"#9B0000","danger-800":"#780000","danger-900":"#5C0000","primary-text":"#FFFFFF","success-text":"#FFFFFF","warning-text":"#FFFFFF","danger-text":"#FFFFFF"},"font":{"sizes":{"h1":"1.75rem","h2":"1.375rem","h3":"1.125rem","h4":"0.8125rem","h5":"0.625rem","h6":"0.5rem","l":"1rem","m":"0.8125rem","s":"0.6875rem"},"weights":{"thin":200,"light":300,"regular":400,"medium":500,"bold":600,"extrabold":700,"black":800},"families":{"base":"\"Roboto Flex Variable\", sans-serif","accent":"\"Roboto Flex Variable\", sans-serif"},"letterSpacings":{"h1":"normal","h2":"normal","h3":"normal","h4":"normal","h5":"1px","h6":"normal","l":"normal","m":"normal","s":"normal"}},"spacings":{"xl":"4rem","l":"3rem","b":"1.625rem","s":"1rem","t":"0.5rem","st":"0.25rem"},"transitions":{"ease-in":"cubic-bezier(0.32, 0, 0.67, 0)","ease-out":"cubic-bezier(0.33, 1, 0.68, 1)","ease-in-out":"cubic-bezier(0.65, 0, 0.35, 1)","duration":"250ms"},"breakpoints":{"xs":0,"sm":"576px","md":"768px","lg":"992px","xl":"1200px","xxl":"1400px"}},"components":{"tooltip":{"border-radius":"0.5rem","background-color":"#0C1A2B","color":"#FFFFFF","font-size":"0.6875rem","padding":"1rem","max-width":"150px"},"toast":{"slide-in-duration":"1000ms","slide-out-duration":"300ms","background-color":"#FAFAFB","color":"#0C1A2B","font-weight":400,"icon-size":"19px","progress-bar-height":"3px"},"modal":{"background-color":"#FFFFFF","backdrop-color":"#0C1A2B99","border-radius":"4px","border-color":"#E7E8EA","box-shadow":"0px 1px 2px 0px #0C1A2B4D","color":"#0C1A2B","title-font-weight":600,"content-font-size":"0.8125rem","content-font-weight":400,"content-color":"#303C4B","width-small":"300px","width-medium":"600px","width-large":"75%"},"forms-textarea":{"font-weight":400,"font-size":"1rem","border-radius":"8px","border-radius--hover":"2px","border-radius--focus":"2px","border-width":"1px","border-color":"#E7E8EA","border-color--hover":"#9EA3AA","border-color--focus":"#0556BF","border-style":"solid","label-color--focus":"#0556BF","background-color":"#FFFFFF","value-color":"#0C1A2B","value-color--disabled":"#303C4B"},"forms-switch":{"accent-color":"#419A14","rail-background-color":"#9EA3AA","rail-background-color--disabled":"#C2C6CA","rail-border-radius":"50vw","handle-background-color":"white","handle-background-color--disabled":"#F3F4F4","handle-border-radius":"50%"},"forms-select":{"border-color":"#E7E8EA","border-color--focus":"#0556BF","border-color--hover":"#9EA3AA","border-radius":"8px","border-radius--focus":"2px","border-radius--hover":"2px","border-style":"solid","border-width":"1px","value-color":"#0C1A2B","value-color--disabled":"#303C4B","font-size":"1rem","height":"3.5rem","item-background-color--hover":"#F3F4F4","item-background-color--selected":"#EBF2FC","item-color":"#303C4B","item-color--disabled":"#9EA3AA","item-font-size":"1rem","background-color":"#FFFFFF","menu-background-color":"#FFFFFF","label-color--focus":"#0556BF","multi-pill-background-color":"#F3F4F4","multi-pill-border-radius":"2px","multi-pill-max-width":"68%","multi-pill-font-size":"0.8125rem"},"forms-radio":{"border-color":"#E7E8EA","accent-color":"#5AB81D","background-color":"#FFFFFF"},"forms-labelledbox":{"label-color--small":"#79818A","label-color--big":"#0C1A2B","label-color--small--disabled":"#79818A","label-color--big--disabled":"#79818A"},"forms-input":{"font-weight":400,"font-size":"1rem","border-radius":"8px","border-radius--hover":"2px","border-radius--focus":"2px","border-width":"1px","border-color":"#E7E8EA","border-color--hover":"#9EA3AA","border-color--focus":"#0556BF","border-style":"solid","label-color--focus":"#0556BF","background-color":"#FFFFFF","value-color":"#0C1A2B","value-color--disabled":"#303C4B"},"forms-fileuploader":{"background-color":"#FFFFFF","border-color":"#E7E8EA","border-radius":"0.5rem","border-width":"2px","border-style":"dotted","background-color--active":"#EBF2FC","color":"#0C1A2B","padding":"1rem","accent-color":"#0556BF","text-color":"#79818A","text-size":"0.6875rem","file-text-size":"0.8125rem","file-text-color":"#0C1A2B","file-text-weight":300,"file-border-color":"#E7E8EA","file-border-width":"1px","file-border-radius":"0.5rem","file-background-color":"#FFFFFF","file-specs-size":"0.6875rem","file-specs-color":"#79818A"},"forms-field":{"width":"292px","font-size":"0.6875rem","color":"#79818A"},"forms-datepicker":{"border-color":"#E7E8EA","border-color--disabled":"#F3F4F4","border-color--focus":"#0556BF","border-color--hover":"#9EA3AA","border-radius":"8px","border-radius--focus":"2px","border-radius--hover":"2px","border-style":"solid","border-width":"1px","value-color":"#0C1A2B","value-color--disabled":"#303C4B","font-size":"1rem","height":"3.5rem","item-background-color--hover":"#F3F4F4","item-background-color--selected":"#EBF2FC","item-color":"#303C4B","item-font-size":"1rem","background-color":"#FFFFFF","menu-background-color":"#FFFFFF","range-selection-background-color":"#EBF2FC","range-selection-background-color--disabled":"#FAFAFB","grid-cell--border-color--today":"#0556BF","grid-cell--color--today":"#0556BF","label-color--focus":"#0556BF"},"forms-checkbox":{"background-color--hover":"#F3F4F4","background-color":"#FFFFFF","font-size":"0.8125rem","font-weight":500,"color":"#0C1A2B","border-color":"#E7E8EA","border-radius":"2px","accent-color":"#5AB81D","size":"1.5rem"},"button":{"border-radius":"8px","border-radius--active":"2px","border-radius--focus":"8px","medium-text-height":"36px","medium-height":"48px","small-height":"32px","nano-height":"24px","medium-font-size":"1rem","medium-icon-font-size":"1.5rem","small-font-size":"0.8125rem","small-icon-font-size":"1rem","nano-font-size":"0.8125rem","nano-icon-font-size":"1rem","font-weight":400,"font-family":"\"Roboto Flex Variable\", sans-serif","text-font-weight":500},"alert":{"background-color":"#FAFAFB","border-radius":"4px","font-weight":500,"color":"#0C1A2B","icon-size":"19px","additional-font-weight":400,"additional-color":"#555F6B"}}},"dark":{"theme":{"colors":{"greyscale-100":"#182536","greyscale-200":"#303C4B","greyscale-300":"#555F6B","greyscale-400":"#79818A","greyscale-500":"#9EA3AA","greyscale-600":"#C2C6CA","greyscale-700":"#E7E8EA","greyscale-800":"#F3F4F4","greyscale-900":"#FAFAFB","greyscale-000":"#0C1A2B","primary-100":"#3B4C62","primary-200":"#4D6481","primary-300":"#6381A6","primary-400":"#7FA5D5","primary-500":"#8CB5EA","primary-600":"#A3C4EE","primary-700":"#C3D8F4","primary-800":"#DDE9F8","primary-900":"#F4F8FD","success-100":"#EEF8D7","success-200":"#D9F1B2","success-300":"#BDE985","success-400":"#A0E25D","success-500":"#76D628","success-600":"#5BB520","success-700":"#43941A","success-800":"#307414","success-900":"#225D10","warning-100":"#F7F3D5","warning-200":"#F0E5AA","warning-300":"#E8D680","warning-400":"#E3C95F","warning-500":"#D9B32B","warning-600":"#BD9721","warning-700":"#9D7B1C","warning-800":"#7E6016","warning-900":"#684D12","danger-100":"#F8D0D0","danger-200":"#F09898","danger-300":"#F09898","danger-400":"#ED8585","danger-500":"#E96666","danger-600":"#DD6666","danger-700":"#C36666","danger-800":"#AE6666","danger-900":"#9D6666"}}}}};
diff --git a/packages/react/src/cunningham-tokens.scss b/packages/react/src/cunningham-tokens.scss
index cd96391..1c90903 100644
--- a/packages/react/src/cunningham-tokens.scss
+++ b/packages/react/src/cunningham-tokens.scss
@@ -134,6 +134,14 @@ $themes: (
       )
     ),
     'components': (
+      'tooltip': (
+        'border-radius': 0.5rem,
+        'background-color': #0C1A2B,
+        'color': #FFFFFF,
+        'font-size': 0.6875rem,
+        'padding': 1rem,
+        'max-width': 150px
+      ),
       'toast': (
         'slide-in-duration': 1000ms,
         'slide-out-duration': 300ms,
diff --git a/packages/react/src/cunningham-tokens.ts b/packages/react/src/cunningham-tokens.ts
index fc5b364..e04e0d7 100644
--- a/packages/react/src/cunningham-tokens.ts
+++ b/packages/react/src/cunningham-tokens.ts
@@ -1 +1 @@
-export const tokens = {"themes":{"default":{"theme":{"colors":{"secondary-text":"#555F6B","secondary-100":"#F2F7FC","secondary-200":"#EBF3FA","secondary-300":"#E2EEF8","secondary-400":"#DDEAF7","secondary-500":"#D4E5F5","secondary-600":"#C1D0DF","secondary-700":"#97A3AE","secondary-800":"#757E87","secondary-900":"#596067","info-text":"#FFFFFF","info-100":"#EBF2FC","info-200":"#8CB5EA","info-300":"#5894E1","info-400":"#377FDB","info-500":"#055FD2","info-600":"#0556BF","info-700":"#044395","info-800":"#033474","info-900":"#022858","greyscale-100":"#FAFAFB","greyscale-200":"#F3F4F4","greyscale-300":"#E7E8EA","greyscale-400":"#C2C6CA","greyscale-500":"#9EA3AA","greyscale-600":"#79818A","greyscale-700":"#555F6B","greyscale-800":"#303C4B","greyscale-900":"#0C1A2B","greyscale-000":"#FFFFFF","primary-100":"#EBF2FC","primary-200":"#8CB5EA","primary-300":"#5894E1","primary-400":"#377FDB","primary-500":"#055FD2","primary-600":"#0556BF","primary-700":"#044395","primary-800":"#033474","primary-900":"#022858","success-100":"#EFFCD3","success-200":"#DBFAA9","success-300":"#BEF27C","success-400":"#A0E659","success-500":"#76D628","success-600":"#5AB81D","success-700":"#419A14","success-800":"#2C7C0C","success-900":"#1D6607","warning-100":"#FFF8CD","warning-200":"#FFEF9B","warning-300":"#FFE469","warning-400":"#FFDA43","warning-500":"#FFC805","warning-600":"#DBA603","warning-700":"#B78702","warning-800":"#936901","warning-900":"#7A5400","danger-100":"#F4B0B0","danger-200":"#EE8A8A","danger-300":"#E65454","danger-400":"#E13333","danger-500":"#DA0000","danger-600":"#C60000","danger-700":"#9B0000","danger-800":"#780000","danger-900":"#5C0000","primary-text":"#FFFFFF","success-text":"#FFFFFF","warning-text":"#FFFFFF","danger-text":"#FFFFFF"},"font":{"sizes":{"h1":"1.75rem","h2":"1.375rem","h3":"1.125rem","h4":"0.8125rem","h5":"0.625rem","h6":"0.5rem","l":"1rem","m":"0.8125rem","s":"0.6875rem"},"weights":{"thin":200,"light":300,"regular":400,"medium":500,"bold":600,"extrabold":700,"black":800},"families":{"base":"\"Roboto Flex Variable\", sans-serif","accent":"\"Roboto Flex Variable\", sans-serif"},"letterSpacings":{"h1":"normal","h2":"normal","h3":"normal","h4":"normal","h5":"1px","h6":"normal","l":"normal","m":"normal","s":"normal"}},"spacings":{"xl":"4rem","l":"3rem","b":"1.625rem","s":"1rem","t":"0.5rem","st":"0.25rem"},"transitions":{"ease-in":"cubic-bezier(0.32, 0, 0.67, 0)","ease-out":"cubic-bezier(0.33, 1, 0.68, 1)","ease-in-out":"cubic-bezier(0.65, 0, 0.35, 1)","duration":"250ms"},"breakpoints":{"xs":0,"sm":"576px","md":"768px","lg":"992px","xl":"1200px","xxl":"1400px"}},"components":{"toast":{"slide-in-duration":"1000ms","slide-out-duration":"300ms","background-color":"#FAFAFB","color":"#0C1A2B","font-weight":400,"icon-size":"19px","progress-bar-height":"3px"},"modal":{"background-color":"#FFFFFF","backdrop-color":"#0C1A2B99","border-radius":"4px","border-color":"#E7E8EA","box-shadow":"0px 1px 2px 0px #0C1A2B4D","color":"#0C1A2B","title-font-weight":600,"content-font-size":"0.8125rem","content-font-weight":400,"content-color":"#303C4B","width-small":"300px","width-medium":"600px","width-large":"75%"},"forms-textarea":{"font-weight":400,"font-size":"1rem","border-radius":"8px","border-radius--hover":"2px","border-radius--focus":"2px","border-width":"1px","border-color":"#E7E8EA","border-color--hover":"#9EA3AA","border-color--focus":"#0556BF","border-style":"solid","label-color--focus":"#0556BF","background-color":"#FFFFFF","value-color":"#0C1A2B","value-color--disabled":"#303C4B"},"forms-switch":{"accent-color":"#419A14","rail-background-color":"#9EA3AA","rail-background-color--disabled":"#C2C6CA","rail-border-radius":"50vw","handle-background-color":"white","handle-background-color--disabled":"#F3F4F4","handle-border-radius":"50%"},"forms-select":{"border-color":"#E7E8EA","border-color--focus":"#0556BF","border-color--hover":"#9EA3AA","border-radius":"8px","border-radius--focus":"2px","border-radius--hover":"2px","border-style":"solid","border-width":"1px","value-color":"#0C1A2B","value-color--disabled":"#303C4B","font-size":"1rem","height":"3.5rem","item-background-color--hover":"#F3F4F4","item-background-color--selected":"#EBF2FC","item-color":"#303C4B","item-color--disabled":"#9EA3AA","item-font-size":"1rem","background-color":"#FFFFFF","menu-background-color":"#FFFFFF","label-color--focus":"#0556BF","multi-pill-background-color":"#F3F4F4","multi-pill-border-radius":"2px","multi-pill-max-width":"68%","multi-pill-font-size":"0.8125rem"},"forms-radio":{"border-color":"#E7E8EA","accent-color":"#5AB81D","background-color":"#FFFFFF"},"forms-labelledbox":{"label-color--small":"#79818A","label-color--big":"#0C1A2B","label-color--small--disabled":"#79818A","label-color--big--disabled":"#79818A"},"forms-input":{"font-weight":400,"font-size":"1rem","border-radius":"8px","border-radius--hover":"2px","border-radius--focus":"2px","border-width":"1px","border-color":"#E7E8EA","border-color--hover":"#9EA3AA","border-color--focus":"#0556BF","border-style":"solid","label-color--focus":"#0556BF","background-color":"#FFFFFF","value-color":"#0C1A2B","value-color--disabled":"#303C4B"},"forms-fileuploader":{"background-color":"#FFFFFF","border-color":"#E7E8EA","border-radius":"0.5rem","border-width":"2px","border-style":"dotted","background-color--active":"#EBF2FC","color":"#0C1A2B","padding":"1rem","accent-color":"#0556BF","text-color":"#79818A","text-size":"0.6875rem","file-text-size":"0.8125rem","file-text-color":"#0C1A2B","file-text-weight":300,"file-border-color":"#E7E8EA","file-border-width":"1px","file-border-radius":"0.5rem","file-background-color":"#FFFFFF","file-specs-size":"0.6875rem","file-specs-color":"#79818A"},"forms-field":{"width":"292px","font-size":"0.6875rem","color":"#79818A"},"forms-datepicker":{"border-color":"#E7E8EA","border-color--disabled":"#F3F4F4","border-color--focus":"#0556BF","border-color--hover":"#9EA3AA","border-radius":"8px","border-radius--focus":"2px","border-radius--hover":"2px","border-style":"solid","border-width":"1px","value-color":"#0C1A2B","value-color--disabled":"#303C4B","font-size":"1rem","height":"3.5rem","item-background-color--hover":"#F3F4F4","item-background-color--selected":"#EBF2FC","item-color":"#303C4B","item-font-size":"1rem","background-color":"#FFFFFF","menu-background-color":"#FFFFFF","range-selection-background-color":"#EBF2FC","range-selection-background-color--disabled":"#FAFAFB","grid-cell--border-color--today":"#0556BF","grid-cell--color--today":"#0556BF","label-color--focus":"#0556BF"},"forms-checkbox":{"background-color--hover":"#F3F4F4","background-color":"#FFFFFF","font-size":"0.8125rem","font-weight":500,"color":"#0C1A2B","border-color":"#E7E8EA","border-radius":"2px","accent-color":"#5AB81D","size":"1.5rem"},"button":{"border-radius":"8px","border-radius--active":"2px","border-radius--focus":"8px","medium-text-height":"36px","medium-height":"48px","small-height":"32px","nano-height":"24px","medium-font-size":"1rem","medium-icon-font-size":"1.5rem","small-font-size":"0.8125rem","small-icon-font-size":"1rem","nano-font-size":"0.8125rem","nano-icon-font-size":"1rem","font-weight":400,"font-family":"\"Roboto Flex Variable\", sans-serif","text-font-weight":500},"alert":{"background-color":"#FAFAFB","border-radius":"4px","font-weight":500,"color":"#0C1A2B","icon-size":"19px","additional-font-weight":400,"additional-color":"#555F6B"}}},"dark":{"theme":{"colors":{"greyscale-100":"#182536","greyscale-200":"#303C4B","greyscale-300":"#555F6B","greyscale-400":"#79818A","greyscale-500":"#9EA3AA","greyscale-600":"#C2C6CA","greyscale-700":"#E7E8EA","greyscale-800":"#F3F4F4","greyscale-900":"#FAFAFB","greyscale-000":"#0C1A2B","primary-100":"#3B4C62","primary-200":"#4D6481","primary-300":"#6381A6","primary-400":"#7FA5D5","primary-500":"#8CB5EA","primary-600":"#A3C4EE","primary-700":"#C3D8F4","primary-800":"#DDE9F8","primary-900":"#F4F8FD","success-100":"#EEF8D7","success-200":"#D9F1B2","success-300":"#BDE985","success-400":"#A0E25D","success-500":"#76D628","success-600":"#5BB520","success-700":"#43941A","success-800":"#307414","success-900":"#225D10","warning-100":"#F7F3D5","warning-200":"#F0E5AA","warning-300":"#E8D680","warning-400":"#E3C95F","warning-500":"#D9B32B","warning-600":"#BD9721","warning-700":"#9D7B1C","warning-800":"#7E6016","warning-900":"#684D12","danger-100":"#F8D0D0","danger-200":"#F09898","danger-300":"#F09898","danger-400":"#ED8585","danger-500":"#E96666","danger-600":"#DD6666","danger-700":"#C36666","danger-800":"#AE6666","danger-900":"#9D6666"}}}}};
+export const tokens = {"themes":{"default":{"theme":{"colors":{"secondary-text":"#555F6B","secondary-100":"#F2F7FC","secondary-200":"#EBF3FA","secondary-300":"#E2EEF8","secondary-400":"#DDEAF7","secondary-500":"#D4E5F5","secondary-600":"#C1D0DF","secondary-700":"#97A3AE","secondary-800":"#757E87","secondary-900":"#596067","info-text":"#FFFFFF","info-100":"#EBF2FC","info-200":"#8CB5EA","info-300":"#5894E1","info-400":"#377FDB","info-500":"#055FD2","info-600":"#0556BF","info-700":"#044395","info-800":"#033474","info-900":"#022858","greyscale-100":"#FAFAFB","greyscale-200":"#F3F4F4","greyscale-300":"#E7E8EA","greyscale-400":"#C2C6CA","greyscale-500":"#9EA3AA","greyscale-600":"#79818A","greyscale-700":"#555F6B","greyscale-800":"#303C4B","greyscale-900":"#0C1A2B","greyscale-000":"#FFFFFF","primary-100":"#EBF2FC","primary-200":"#8CB5EA","primary-300":"#5894E1","primary-400":"#377FDB","primary-500":"#055FD2","primary-600":"#0556BF","primary-700":"#044395","primary-800":"#033474","primary-900":"#022858","success-100":"#EFFCD3","success-200":"#DBFAA9","success-300":"#BEF27C","success-400":"#A0E659","success-500":"#76D628","success-600":"#5AB81D","success-700":"#419A14","success-800":"#2C7C0C","success-900":"#1D6607","warning-100":"#FFF8CD","warning-200":"#FFEF9B","warning-300":"#FFE469","warning-400":"#FFDA43","warning-500":"#FFC805","warning-600":"#DBA603","warning-700":"#B78702","warning-800":"#936901","warning-900":"#7A5400","danger-100":"#F4B0B0","danger-200":"#EE8A8A","danger-300":"#E65454","danger-400":"#E13333","danger-500":"#DA0000","danger-600":"#C60000","danger-700":"#9B0000","danger-800":"#780000","danger-900":"#5C0000","primary-text":"#FFFFFF","success-text":"#FFFFFF","warning-text":"#FFFFFF","danger-text":"#FFFFFF"},"font":{"sizes":{"h1":"1.75rem","h2":"1.375rem","h3":"1.125rem","h4":"0.8125rem","h5":"0.625rem","h6":"0.5rem","l":"1rem","m":"0.8125rem","s":"0.6875rem"},"weights":{"thin":200,"light":300,"regular":400,"medium":500,"bold":600,"extrabold":700,"black":800},"families":{"base":"\"Roboto Flex Variable\", sans-serif","accent":"\"Roboto Flex Variable\", sans-serif"},"letterSpacings":{"h1":"normal","h2":"normal","h3":"normal","h4":"normal","h5":"1px","h6":"normal","l":"normal","m":"normal","s":"normal"}},"spacings":{"xl":"4rem","l":"3rem","b":"1.625rem","s":"1rem","t":"0.5rem","st":"0.25rem"},"transitions":{"ease-in":"cubic-bezier(0.32, 0, 0.67, 0)","ease-out":"cubic-bezier(0.33, 1, 0.68, 1)","ease-in-out":"cubic-bezier(0.65, 0, 0.35, 1)","duration":"250ms"},"breakpoints":{"xs":0,"sm":"576px","md":"768px","lg":"992px","xl":"1200px","xxl":"1400px"}},"components":{"tooltip":{"border-radius":"0.5rem","background-color":"#0C1A2B","color":"#FFFFFF","font-size":"0.6875rem","padding":"1rem","max-width":"150px"},"toast":{"slide-in-duration":"1000ms","slide-out-duration":"300ms","background-color":"#FAFAFB","color":"#0C1A2B","font-weight":400,"icon-size":"19px","progress-bar-height":"3px"},"modal":{"background-color":"#FFFFFF","backdrop-color":"#0C1A2B99","border-radius":"4px","border-color":"#E7E8EA","box-shadow":"0px 1px 2px 0px #0C1A2B4D","color":"#0C1A2B","title-font-weight":600,"content-font-size":"0.8125rem","content-font-weight":400,"content-color":"#303C4B","width-small":"300px","width-medium":"600px","width-large":"75%"},"forms-textarea":{"font-weight":400,"font-size":"1rem","border-radius":"8px","border-radius--hover":"2px","border-radius--focus":"2px","border-width":"1px","border-color":"#E7E8EA","border-color--hover":"#9EA3AA","border-color--focus":"#0556BF","border-style":"solid","label-color--focus":"#0556BF","background-color":"#FFFFFF","value-color":"#0C1A2B","value-color--disabled":"#303C4B"},"forms-switch":{"accent-color":"#419A14","rail-background-color":"#9EA3AA","rail-background-color--disabled":"#C2C6CA","rail-border-radius":"50vw","handle-background-color":"white","handle-background-color--disabled":"#F3F4F4","handle-border-radius":"50%"},"forms-select":{"border-color":"#E7E8EA","border-color--focus":"#0556BF","border-color--hover":"#9EA3AA","border-radius":"8px","border-radius--focus":"2px","border-radius--hover":"2px","border-style":"solid","border-width":"1px","value-color":"#0C1A2B","value-color--disabled":"#303C4B","font-size":"1rem","height":"3.5rem","item-background-color--hover":"#F3F4F4","item-background-color--selected":"#EBF2FC","item-color":"#303C4B","item-color--disabled":"#9EA3AA","item-font-size":"1rem","background-color":"#FFFFFF","menu-background-color":"#FFFFFF","label-color--focus":"#0556BF","multi-pill-background-color":"#F3F4F4","multi-pill-border-radius":"2px","multi-pill-max-width":"68%","multi-pill-font-size":"0.8125rem"},"forms-radio":{"border-color":"#E7E8EA","accent-color":"#5AB81D","background-color":"#FFFFFF"},"forms-labelledbox":{"label-color--small":"#79818A","label-color--big":"#0C1A2B","label-color--small--disabled":"#79818A","label-color--big--disabled":"#79818A"},"forms-input":{"font-weight":400,"font-size":"1rem","border-radius":"8px","border-radius--hover":"2px","border-radius--focus":"2px","border-width":"1px","border-color":"#E7E8EA","border-color--hover":"#9EA3AA","border-color--focus":"#0556BF","border-style":"solid","label-color--focus":"#0556BF","background-color":"#FFFFFF","value-color":"#0C1A2B","value-color--disabled":"#303C4B"},"forms-fileuploader":{"background-color":"#FFFFFF","border-color":"#E7E8EA","border-radius":"0.5rem","border-width":"2px","border-style":"dotted","background-color--active":"#EBF2FC","color":"#0C1A2B","padding":"1rem","accent-color":"#0556BF","text-color":"#79818A","text-size":"0.6875rem","file-text-size":"0.8125rem","file-text-color":"#0C1A2B","file-text-weight":300,"file-border-color":"#E7E8EA","file-border-width":"1px","file-border-radius":"0.5rem","file-background-color":"#FFFFFF","file-specs-size":"0.6875rem","file-specs-color":"#79818A"},"forms-field":{"width":"292px","font-size":"0.6875rem","color":"#79818A"},"forms-datepicker":{"border-color":"#E7E8EA","border-color--disabled":"#F3F4F4","border-color--focus":"#0556BF","border-color--hover":"#9EA3AA","border-radius":"8px","border-radius--focus":"2px","border-radius--hover":"2px","border-style":"solid","border-width":"1px","value-color":"#0C1A2B","value-color--disabled":"#303C4B","font-size":"1rem","height":"3.5rem","item-background-color--hover":"#F3F4F4","item-background-color--selected":"#EBF2FC","item-color":"#303C4B","item-font-size":"1rem","background-color":"#FFFFFF","menu-background-color":"#FFFFFF","range-selection-background-color":"#EBF2FC","range-selection-background-color--disabled":"#FAFAFB","grid-cell--border-color--today":"#0556BF","grid-cell--color--today":"#0556BF","label-color--focus":"#0556BF"},"forms-checkbox":{"background-color--hover":"#F3F4F4","background-color":"#FFFFFF","font-size":"0.8125rem","font-weight":500,"color":"#0C1A2B","border-color":"#E7E8EA","border-radius":"2px","accent-color":"#5AB81D","size":"1.5rem"},"button":{"border-radius":"8px","border-radius--active":"2px","border-radius--focus":"8px","medium-text-height":"36px","medium-height":"48px","small-height":"32px","nano-height":"24px","medium-font-size":"1rem","medium-icon-font-size":"1.5rem","small-font-size":"0.8125rem","small-icon-font-size":"1rem","nano-font-size":"0.8125rem","nano-icon-font-size":"1rem","font-weight":400,"font-family":"\"Roboto Flex Variable\", sans-serif","text-font-weight":500},"alert":{"background-color":"#FAFAFB","border-radius":"4px","font-weight":500,"color":"#0C1A2B","icon-size":"19px","additional-font-weight":400,"additional-color":"#555F6B"}}},"dark":{"theme":{"colors":{"greyscale-100":"#182536","greyscale-200":"#303C4B","greyscale-300":"#555F6B","greyscale-400":"#79818A","greyscale-500":"#9EA3AA","greyscale-600":"#C2C6CA","greyscale-700":"#E7E8EA","greyscale-800":"#F3F4F4","greyscale-900":"#FAFAFB","greyscale-000":"#0C1A2B","primary-100":"#3B4C62","primary-200":"#4D6481","primary-300":"#6381A6","primary-400":"#7FA5D5","primary-500":"#8CB5EA","primary-600":"#A3C4EE","primary-700":"#C3D8F4","primary-800":"#DDE9F8","primary-900":"#F4F8FD","success-100":"#EEF8D7","success-200":"#D9F1B2","success-300":"#BDE985","success-400":"#A0E25D","success-500":"#76D628","success-600":"#5BB520","success-700":"#43941A","success-800":"#307414","success-900":"#225D10","warning-100":"#F7F3D5","warning-200":"#F0E5AA","warning-300":"#E8D680","warning-400":"#E3C95F","warning-500":"#D9B32B","warning-600":"#BD9721","warning-700":"#9D7B1C","warning-800":"#7E6016","warning-900":"#684D12","danger-100":"#F8D0D0","danger-200":"#F09898","danger-300":"#F09898","danger-400":"#ED8585","danger-500":"#E96666","danger-600":"#DD6666","danger-700":"#C36666","danger-800":"#AE6666","danger-900":"#9D6666"}}}}};
diff --git a/packages/react/src/index.scss b/packages/react/src/index.scss
index 142bd4a..3f8949d 100644
--- a/packages/react/src/index.scss
+++ b/packages/react/src/index.scss
@@ -23,6 +23,7 @@
 @use "./components/Pagination";
 @use "./components/Popover";
 @use "./components/Toast";
+@use "./components/Tooltip";
 
 body {
   font-family: var(--c--theme--font--families--base);
diff --git a/packages/react/src/index.ts b/packages/react/src/index.ts
index 1d3190a..4b5b575 100644
--- a/packages/react/src/index.ts
+++ b/packages/react/src/index.ts
@@ -27,6 +27,7 @@ export * from "./components/Popover";
 export * from "./components/Provider";
 export * from "./components/Toast";
 export * from "./components/Toast/ToastProvider";
+export * from "./components/Tooltip";
 export * from "./utils/VariantUtils";
 
 export type DefaultTokens = PartialNested<typeof tokens.themes.default>;
diff --git a/yarn.lock b/yarn.lock
index f5c1cb6..a94e229 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3982,6 +3982,17 @@
     "@react-types/checkbox" "^3.7.1"
     "@swc/helpers" "^0.5.0"
 
+"@react-aria/toolbar@3.0.0-beta.3":
+  version "3.0.0-beta.3"
+  resolved "https://registry.yarnpkg.com/@react-aria/toolbar/-/toolbar-3.0.0-beta.3.tgz#7b4a0e1da137cb84a65b38e0a4802984759e3d9f"
+  integrity sha512-tPIEPRsZI/6Mb0tAW/GBTt3wBk7dfJg/eUnTloY8NHialvDa+cMUQyUVzPyLWGpErhYeBeutBmw1e2seMjmu+A==
+  dependencies:
+    "@react-aria/focus" "^3.16.2"
+    "@react-aria/i18n" "^3.10.2"
+    "@react-aria/utils" "^3.23.2"
+    "@react-types/shared" "^3.22.1"
+    "@swc/helpers" "^0.5.0"
+
 "@react-aria/tooltip@^3.7.2":
   version "3.7.2"
   resolved "https://registry.yarnpkg.com/@react-aria/tooltip/-/tooltip-3.7.2.tgz#ccbcef4efcb27486cd845a734794d541696e3692"
@@ -4061,6 +4072,14 @@
     "@react-types/shared" "^3.22.1"
     "@swc/helpers" "^0.5.0"
 
+"@react-stately/data@^3.11.2":
+  version "3.11.2"
+  resolved "https://registry.yarnpkg.com/@react-stately/data/-/data-3.11.2.tgz#835c9a90eaeb832dbaac4c96f1aa91008913efb8"
+  integrity sha512-yhK2upk2WbJeiLBRWHrh/4G2CvmmozCzoivLaRAPYu53m1J3MyzVGCLJgnZMbMZvAbNcYWZK6IzO6VqZ2y1fOw==
+  dependencies:
+    "@react-types/shared" "^3.22.1"
+    "@swc/helpers" "^0.5.0"
+
 "@react-stately/datepicker@3.9.2", "@react-stately/datepicker@^3.9.2":
   version "3.9.2"
   resolved "https://registry.yarnpkg.com/@react-stately/datepicker/-/datepicker-3.9.2.tgz#a160d174c4c5a67b15e70a893071d948f5ad347d"
@@ -4328,6 +4347,13 @@
     "@react-types/overlays" "^3.8.5"
     "@react-types/shared" "^3.22.1"
 
+"@react-types/form@^3.7.2":
+  version "3.7.2"
+  resolved "https://registry.yarnpkg.com/@react-types/form/-/form-3.7.2.tgz#bfa8aef2f6e1ee579ab2f9a1f40556ae24f72d32"
+  integrity sha512-6/isEJY4PsYoHdMaGQtqQyquXGTwB1FqCBOPKQjI/vBGWG3fL7FGfWm4Z62eTbCH4Xyv3FZuNywlT8UjPMQyKA==
+  dependencies:
+    "@react-types/shared" "^3.22.1"
+
 "@react-types/grid@^3.2.4":
   version "3.2.4"
   resolved "https://registry.yarnpkg.com/@react-types/grid/-/grid-3.2.4.tgz#47b28424409b66b3bfcfcde03c92f03d6d41d1ba"
@@ -7203,6 +7229,11 @@ cli-table3@^0.6.1:
   optionalDependencies:
     "@colors/colors" "1.5.0"
 
+client-only@^0.0.1:
+  version "0.0.1"
+  resolved "https://registry.yarnpkg.com/client-only/-/client-only-0.0.1.tgz#38bba5d403c41ab150bff64a95c85013cf73bca1"
+  integrity sha512-IV3Ou0jSMzZrd3pZ48nLkT9DA7Ag1pnPzaiQhpW7c3RbcqqzvzzVu+L8gfqMp/8IM2MQtSiqaCxrrcfu8I8rMA==
+
 cliui@^6.0.0:
   version "6.0.0"
   resolved "https://registry.yarnpkg.com/cliui/-/cliui-6.0.0.tgz#511d702c0c4e41ca156d7d0e96021f23e13225b1"
@@ -13067,7 +13098,32 @@ raw-body@2.5.1:
     iconv-lite "0.4.24"
     unpipe "1.0.0"
 
-react-aria@3.32.1:
+react-aria-components@1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/react-aria-components/-/react-aria-components-1.1.1.tgz#85e47d9321af878f9e7a183c943d7c222ab0c370"
+  integrity sha512-XdgqSbrlh9V1vJEvTwrnr+YGndQWYcVEAbN+Rx104o9g88cAAabclgetU2OUJ9Gbht6+gwnvnA0ksgXzVZog2Q==
+  dependencies:
+    "@internationalized/date" "^3.5.2"
+    "@internationalized/string" "^3.2.1"
+    "@react-aria/focus" "^3.16.2"
+    "@react-aria/interactions" "^3.21.1"
+    "@react-aria/menu" "^3.13.1"
+    "@react-aria/toolbar" "3.0.0-beta.3"
+    "@react-aria/utils" "^3.23.2"
+    "@react-stately/menu" "^3.6.1"
+    "@react-stately/table" "^3.11.6"
+    "@react-stately/utils" "^3.9.1"
+    "@react-types/form" "^3.7.2"
+    "@react-types/grid" "^3.2.4"
+    "@react-types/shared" "^3.22.1"
+    "@react-types/table" "^3.9.3"
+    "@swc/helpers" "^0.5.0"
+    client-only "^0.0.1"
+    react-aria "^3.32.1"
+    react-stately "^3.30.1"
+    use-sync-external-store "^1.2.0"
+
+react-aria@3.32.1, react-aria@^3.32.1:
   version "3.32.1"
   resolved "https://registry.yarnpkg.com/react-aria/-/react-aria-3.32.1.tgz#e490259969b8cfbcc0fdb9cd3e041b1769b285d4"
   integrity sha512-7KCJg4K5vlRqiXdGjgCT05Du8RhGBYC+2ok4GOh/Znmg8aMwOk7t0YwxaT5i1z30+fmDcJS/pk/ipUPUg28CXg==
@@ -13202,6 +13258,35 @@ react-remove-scroll@2.5.5:
     use-callback-ref "^1.3.0"
     use-sidecar "^1.1.2"
 
+react-stately@3.30.1, react-stately@^3.30.1:
+  version "3.30.1"
+  resolved "https://registry.yarnpkg.com/react-stately/-/react-stately-3.30.1.tgz#7d87649c69f1bcf42c68a732f121ff23393f5abb"
+  integrity sha512-IEhKHMT7wijtczA5vtw/kdq9CZuOIF+ReoSimydTFiABRQxWO9ESAl/fToXOUM9qmCdhdqjGJgMAhqTnmheh8g==
+  dependencies:
+    "@react-stately/calendar" "^3.4.4"
+    "@react-stately/checkbox" "^3.6.3"
+    "@react-stately/collections" "^3.10.5"
+    "@react-stately/combobox" "^3.8.2"
+    "@react-stately/data" "^3.11.2"
+    "@react-stately/datepicker" "^3.9.2"
+    "@react-stately/dnd" "^3.2.8"
+    "@react-stately/form" "^3.0.1"
+    "@react-stately/list" "^3.10.3"
+    "@react-stately/menu" "^3.6.1"
+    "@react-stately/numberfield" "^3.9.1"
+    "@react-stately/overlays" "^3.6.5"
+    "@react-stately/radio" "^3.10.2"
+    "@react-stately/searchfield" "^3.5.1"
+    "@react-stately/select" "^3.6.2"
+    "@react-stately/selection" "^3.14.3"
+    "@react-stately/slider" "^3.5.2"
+    "@react-stately/table" "^3.11.6"
+    "@react-stately/tabs" "^3.6.4"
+    "@react-stately/toggle" "^3.7.2"
+    "@react-stately/tooltip" "^3.4.7"
+    "@react-stately/tree" "^3.7.6"
+    "@react-types/shared" "^3.22.1"
+
 react-style-singleton@^2.2.1:
   version "2.2.1"
   resolved "https://registry.yarnpkg.com/react-style-singleton/-/react-style-singleton-2.2.1.tgz#f99e420492b2d8f34d38308ff660b60d0b1205b4"
@@ -15136,6 +15221,11 @@ use-sidecar@^1.1.2:
     detect-node-es "^1.1.0"
     tslib "^2.0.0"
 
+use-sync-external-store@^1.2.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/use-sync-external-store/-/use-sync-external-store-1.2.0.tgz#7dbefd6ef3fe4e767a0cf5d7287aacfb5846928a"
+  integrity sha512-eEgnFxGQ1Ife9bzYs6VLi8/4X6CObHMw9Qr9tPY43iKwsPw8xE8+EFsf/2cFZ5S3esXgpWgtSCtLNS41F+sKPA==
+
 util-deprecate@^1.0.1, util-deprecate@^1.0.2, util-deprecate@~1.0.1:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/util-deprecate/-/util-deprecate-1.0.2.tgz#450d4dc9fa70de732762fbd2d4a28981419a0ccf"