@kaizen/components 0.0.0-canary-versioned-tooltip-poc-20240619013415 → 0.0.0-canary-tooltip-poc-20240621045645

package/dist/cjs/KaizenProvider/KaizenProvider.cjs

@@ -1,6 +1,7 @@
 'use strict';
 
 var React = require('react');
+var reactAria = require('react-aria');
 require('../Notification/InlineNotification/InlineNotification.cjs');
 require('../Notification/GlobalNotification/GlobalNotification.cjs');
 require('../Notification/ToastNotification/ToastNotification/ToastNotification.cjs');
@@ -34,7 +35,9 @@ var KaizenProvider = function (_a) {
   }, [documentIsAvailable]);
   return React__default.default.createElement(OptionalIntlProvider.OptionalIntlProvider, {
     locale: locale
-  }, React__default.default.createElement(React__default.default.Fragment, null, React__default.default.createElement(ToastNotificationContext.ToastNotificationProvider, null, notificationsList, children), React__default.default.createElement(FontDefinitions.FontDefinitions, null)));
+  }, React__default.default.createElement(reactAria.I18nProvider, {
+    locale: locale
+  }, React__default.default.createElement(ToastNotificationContext.ToastNotificationProvider, null, notificationsList, children), React__default.default.createElement(FontDefinitions.FontDefinitions, null)));
 };
 KaizenProvider.displayName = "KaizenProvider";
 exports.KaizenProvider = KaizenProvider;

package/dist/cjs/reactAriaComponentsV3.cjs

@@ -0,0 +1,11 @@
+'use strict';
+
+var reactAriaComponents = require('react-aria-components');
+Object.keys(reactAriaComponents).forEach(function (k) {
+  if (k !== 'default' && !Object.prototype.hasOwnProperty.call(exports, k)) Object.defineProperty(exports, k, {
+    enumerable: true,
+    get: function () {
+      return reactAriaComponents[k];
+    }
+  });
+});

package/dist/cjs/reactAriaV3.cjs

@@ -0,0 +1,11 @@
+'use strict';
+
+var reactAria = require('react-aria');
+Object.keys(reactAria).forEach(function (k) {
+  if (k !== 'default' && !Object.prototype.hasOwnProperty.call(exports, k)) Object.defineProperty(exports, k, {
+    enumerable: true,
+    get: function () {
+      return reactAria[k];
+    }
+  });
+});

package/dist/esm/KaizenProvider/KaizenProvider.mjs

@@ -1,4 +1,5 @@
 import React, { useState, useEffect } from 'react';
+import { I18nProvider } from 'react-aria';
 import '../Notification/InlineNotification/InlineNotification.mjs';
 import '../Notification/GlobalNotification/GlobalNotification.mjs';
 import '../Notification/ToastNotification/ToastNotification/ToastNotification.mjs';
@@ -27,7 +28,9 @@ const KaizenProvider = /*#__PURE__*/function () {
     }, [documentIsAvailable]);
     return /*#__PURE__*/React.createElement(OptionalIntlProvider, {
       locale: locale
-    }, /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(ToastNotificationProvider, null, notificationsList, children), /*#__PURE__*/React.createElement(FontDefinitions, null)));
+    }, /*#__PURE__*/React.createElement(I18nProvider, {
+      locale: locale
+    }, /*#__PURE__*/React.createElement(ToastNotificationProvider, null, notificationsList, children), /*#__PURE__*/React.createElement(FontDefinitions, null)));
   };
   KaizenProvider.displayName = "KaizenProvider";
   return KaizenProvider;

package/dist/esm/reactAriaComponentsV3.mjs

@@ -0,0 +1 @@
+export * from 'react-aria-components';

package/dist/esm/reactAriaV3.mjs

@@ -0,0 +1 @@
+export * from 'react-aria';

package/dist/styles.css

@@ -1,7 +1,7 @@
 @layer tokens, normalize, reset;@layer tokens{:root{--theme-key:heart;--animation-easing-function-ease-in-out:cubic-bezier(0.455,0.03,0.515,0.955);--animation-easing-function-ease-in:cubic-bezier(0.55,0.085,0.68,0.53);--animation-easing-function-ease-out:cubic-bezier(0.25,0.46,0.45,0.94);--animation-easing-function-linear:linear;--animation-easing-function-bounce-in:cubic-bezier(0.485,0.155,0.24,1.245);--animation-easing-function-bounce-out:cubic-bezier(0.485,0.155,0.515,0.845);--animation-easing-function-bounce-in-out:cubic-bezier(0.76,-0.245,0.24,1.245);--animation-duration-instant:0ms;--animation-duration-immediate:100ms;--animation-duration-rapid:200ms;--animation-duration-fast:300ms;--animation-duration-slow:400ms;--animation-duration-deliberate:700ms;--border-solid-border-width:2px;--border-solid-border-radius:7px;--border-solid-border-style:solid;--border-solid-border-color:#e1e2ea;--border-solid-border-color-rgb:225,226,234;--border-dashed-border-width:2px;--border-dashed-border-radius:7px;--border-dashed-border-style:dashed;--border-borderless-border-width:2px;--border-borderless-border-radius:7px;--border-borderless-border-style:solid;--border-borderless-border-color:transparent;--border-borderless-border-color-rgb:0,0,0;--border-focus-ring-border-width:2px;--border-focus-ring-border-radius:10px;--border-focus-ring-border-style:solid;--color-purple-100:#f4edf8;--color-purple-100-rgb:244,237,248;--color-purple-200:#dfc9ea;--color-purple-200-rgb:223,201,234;--color-purple-300:#c9a5dd;--color-purple-300-rgb:201,165,221;--color-purple-400:#ae67b1;--color-purple-400-rgb:174,103,177;--color-purple-500:#844587;--color-purple-500-rgb:132,69,135;--color-purple-600:#5f3361;--color-purple-600-rgb:95,51,97;--color-purple-700:#4a234d;--color-purple-700-rgb:74,35,77;--color-purple-800:#2f2438;--color-purple-800-rgb:47,36,56;--color-blue-100:#e6f6ff;--color-blue-100-rgb:230,246,255;--color-blue-200:#bde2f5;--color-blue-200-rgb:189,226,245;--color-blue-300:#73c0e8;--color-blue-300-rgb:115,192,232;--color-blue-400:#008bd6;--color-blue-400-rgb:0,139,214;--color-blue-500:#0168b3;--color-blue-500-rgb:1,104,179;--color-blue-600:#004970;--color-blue-600-rgb:0,73,112;--color-blue-700:#003157;--color-blue-700-rgb:0,49,87;--color-green-100:#e8f8f4;--color-green-100-rgb:232,248,244;--color-green-200:#c4ede2;--color-green-200-rgb:196,237,226;--color-green-300:#8fdbc7;--color-green-300-rgb:143,219,199;--color-green-400:#5dcaad;--color-green-400-rgb:93,202,173;--color-green-500:#44a289;--color-green-500-rgb:68,162,137;--color-green-600:#2c7d67;--color-green-600-rgb:44,125,103;--color-green-700:#22594a;--color-green-700-rgb:34,89,74;--color-yellow-100:#fff9e4;--color-yellow-100-rgb:255,249,228;--color-yellow-200:#ffeeb3;--color-yellow-200-rgb:255,238,179;--color-yellow-300:#ffe36e;--color-yellow-300-rgb:255,227,110;--color-yellow-400:#ffca4d;--color-yellow-400-rgb:255,202,77;--color-yellow-500:#ffb600;--color-yellow-500-rgb:255,182,0;--color-yellow-600:#c68600;--color-yellow-600-rgb:198,134,0;--color-yellow-700:#876400;--color-yellow-700-rgb:135,100,0;--color-red-100:#fdeaee;--color-red-100-rgb:253,234,238;--color-red-200:#f9c2cb;--color-red-200-rgb:249,194,203;--color-red-300:#f597a8;--color-red-300-rgb:245,151,168;--color-red-400:#e0707d;--color-red-400-rgb:224,112,125;--color-red-500:#c93b55;--color-red-500-rgb:201,59,85;--color-red-600:#a82433;--color-red-600-rgb:168,36,51;--color-red-700:#6c1e20;--color-red-700-rgb:108,30,32;--color-orange-100:#fff0e8;--color-orange-100-rgb:255,240,232;--color-orange-200:#ffd1b9;--color-orange-200-rgb:255,209,185;--color-orange-300:#ffb08a;--color-orange-300-rgb:255,176,138;--color-orange-400:#ff9461;--color-orange-400-rgb:255,148,97;--color-orange-500:#e96c2f;--color-orange-500-rgb:233,108,47;--color-orange-600:#b74302;--color-orange-600-rgb:183,67,2;--color-orange-700:#903c00;--color-orange-700-rgb:144,60,0;--color-gray-100:#f9f9f9;--color-gray-100-rgb:249,249,249;--color-gray-200:#f4f4f5;--color-gray-200-rgb:244,244,245;--color-gray-300:#eaeaec;--color-gray-300-rgb:234,234,236;--color-gray-400:#cdcdd0;--color-gray-400-rgb:205,205,208;--color-gray-500:#878792;--color-gray-500-rgb:135,135,146;--color-gray-600:#524e56;--color-gray-600-rgb:82,78,86;--color-white:#fff;--color-white-rgb:255,255,255;--data-viz-favorable:#7dd5bd;--data-viz-favorable-rgb:125,213,189;--data-viz-unfavorable:#e68d97;--data-viz-unfavorable-rgb:230,141,151;--layout-content-max-width:1392px;--layout-content-max-width-with-sidebar:1080px;--layout-content-side-margin:72px;--layout-mobile-actions-drawer-height:60px;--layout-navigation-bar-height:72px;--layout-breakpoints-medium:768px;--layout-breakpoints-large:1080px;--shadow-small-box-shadow:0 1px 3px 0 rgba(0,0,0,.1),0 3px 16px 0 rgba(0,0,0,.06);--shadow-large-box-shadow:0 3px 9px 0 rgba(0,0,0,.1),0 8px 40px 0 rgba(0,0,0,.08);--spacing-0:0;--spacing-1:.0625rem;--spacing-2:.125rem;--spacing-4:.25rem;--spacing-6:.375rem;--spacing-8:.5rem;--spacing-12:.75rem;--spacing-16:1rem;--spacing-24:1.5rem;--spacing-32:2rem;--spacing-40:2.5rem;--spacing-48:3rem;--spacing-56:3.5rem;--spacing-64:4rem;--spacing-72:4.5rem;--spacing-80:5rem;--spacing-96:6rem;--spacing-112:7rem;--spacing-128:8rem;--spacing-160:10rem;--spacing-200:12.5rem;--spacing-240:15rem;--spacing-280:17.5rem;--spacing-320:20rem;--spacing-xs:0.375rem;--spacing-sm:0.75rem;--spacing-md:1.5rem;--spacing-lg:2.25rem;--spacing-xl:3rem;--spacing-xxl:3.75rem;--spacing-xxxl:4.5rem;--spacing-xxxxl:5.25rem;--spacing-xxxxxl:6rem;--typography-data-large-font-family:"Inter","Noto Sans",Helvetica,Arial,sans-serif;--typography-data-large-font-weight:700;--typography-data-large-font-size:5.25rem;--typography-data-large-line-height:5.25rem;--typography-data-large-letter-spacing:normal;--typography-data-large-units-font-family:"Inter","Noto Sans",Helvetica,Arial,sans-serif;--typography-data-large-units-font-weight:700;--typography-data-large-units-font-size:2.625rem;--typography-data-large-units-line-height:5.25rem;--typography-data-large-units-letter-spacing:normal;--typography-data-medium-font-family:"Inter","Noto Sans",Helvetica,Arial,sans-serif;--typography-data-medium-font-weight:700;--typography-data-medium-font-size:3rem;--typography-data-medium-line-height:5rem;--typography-data-medium-letter-spacing:normal;--typography-data-medium-units-font-family:"Inter","Noto Sans",Helvetica,Arial,sans-serif;--typography-data-medium-units-font-weight:700;--typography-data-medium-units-font-size:1.5rem;--typography-data-medium-units-line-height:5rem;--typography-data-medium-units-letter-spacing:normal;--typography-data-small-font-family:"Inter","Noto Sans",Helvetica,Arial,sans-serif;--typography-data-small-font-weight:700;--typography-data-small-font-size:1.5rem;--typography-data-small-line-height:1.5rem;--typography-data-small-letter-spacing:normal;--typography-data-small-units-font-family:"Inter","Noto Sans",Helvetica,Arial,sans-serif;--typography-data-small-units-font-weight:700;--typography-data-small-units-font-size:1.125rem;--typography-data-small-units-line-height:1.5rem;--typography-data-small-units-letter-spacing:normal;--typography-display-0-font-family:"Tiempos Headline",Georgia,serif;--typography-display-0-font-weight:800;--typography-display-0-font-size:4.5rem;--typography-display-0-line-height:5.25rem;--typography-display-0-letter-spacing:0em;--typography-heading-1-font-family:"Inter","Noto Sans",Helvetica,Arial,sans-serif;--typography-heading-1-font-weight:700;--typography-heading-1-font-size:2.125rem;--typography-heading-1-line-height:2.625rem;--typography-heading-1-letter-spacing:normal;--typography-heading-2-font-family:"Inter","Noto Sans",Helvetica,Arial,sans-serif;--typography-heading-2-font-weight:700;--typography-heading-2-font-size:1.75rem;--typography-heading-2-line-height:2.25rem;--typography-heading-2-letter-spacing:normal;--typography-heading-3-font-family:"Inter","Noto Sans",Helvetica,Arial,sans-serif;--typography-heading-3-font-weight:700;--typography-heading-3-font-size:1.375rem;--typography-heading-3-line-height:1.875rem;--typography-heading-3-letter-spacing:normal;--typography-heading-4-font-family:"Inter","Noto Sans",Helvetica,Arial,sans-serif;--typography-heading-4-font-weight:600;--typography-heading-4-font-size:1.125rem;--typography-heading-4-line-height:1.5rem;--typography-heading-4-letter-spacing:normal;--typography-heading-5-font-family:"Inter","Noto Sans",Helvetica,Arial,sans-serif;--typography-heading-5-font-weight:600;--typography-heading-5-font-size:1rem;--typography-heading-5-line-height:1.5rem;--typography-heading-5-letter-spacing:normal;--typography-heading-6-font-family:"Inter","Noto Sans",Helvetica,Arial,sans-serif;--typography-heading-6-font-weight:700;--typography-heading-6-font-size:0.875rem;--typography-heading-6-line-height:1.5rem;--typography-heading-6-letter-spacing:normal;--typography-paragraph-intro-lede-font-family:"Inter","Noto Sans",Helvetica,Arial,sans-serif;--typography-paragraph-intro-lede-font-weight:400;--typography-paragraph-intro-lede-font-size:1.25rem;--typography-paragraph-intro-lede-line-height:1.875rem;--typography-paragraph-intro-lede-letter-spacing:0;--typography-paragraph-intro-lede-max-width:975px;--typography-paragraph-body-font-family:"Inter","Noto Sans",Helvetica,Arial,sans-serif;--typography-paragraph-body-font-weight:400;--typography-paragraph-body-font-size:1rem;--typography-paragraph-body-line-height:1.5rem;--typography-paragraph-body-letter-spacing:normal;--typography-paragraph-body-max-width:780px;--typography-paragraph-small-font-family:"Inter","Noto Sans",Helvetica,Arial,sans-serif;--typography-paragraph-small-font-weight:400;--typography-paragraph-small-font-size:0.875rem;--typography-paragraph-small-line-height:1.125rem;--typography-paragraph-small-letter-spacing:normal;--typography-paragraph-small-max-width:680px;--typography-paragraph-extra-small-font-family:"Inter","Noto Sans",Helvetica,Arial,sans-serif;--typography-paragraph-extra-small-font-weight:400;--typography-paragraph-extra-small-font-size:0.75rem;--typography-paragraph-extra-small-line-height:1.125rem;--typography-paragraph-extra-small-letter-spacing:normal;--typography-paragraph-extra-small-max-width:600px;--typography-paragraph-bold-font-weight:600;--typography-button-primary-font-family:"Inter","Noto Sans",Helvetica,Arial,sans-serif;--typography-button-primary-font-weight:700;--typography-button-primary-font-size:1.125rem;--typography-button-primary-line-height:1.5rem;--typography-button-primary-letter-spacing:normal;--typography-button-secondary-font-family:"Inter","Noto Sans",Helvetica,Arial,sans-serif;--typography-button-secondary-font-weight:500;--typography-button-secondary-font-size:1rem;--typography-button-secondary-line-height:1.5rem;--typography-button-secondary-letter-spacing:normal}}@layer normalize{html{-webkit-text-size-adjust:100%;line-height:1.15}body{margin:0}main{display:block}h1{font-size:2em;margin:.67em 0}hr{box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace,monospace;font-size:1em}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible}button,select{text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:.35em .75em .625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{vertical-align:baseline}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details{display:block}summary{display:list-item}[hidden],template{display:none}}@layer reset{@font-face{font-family:Tiempos Headline;font-weight:800;src:url(https://d1e7r7b0lb8p4d.cloudfront.net/fonts/tiempos/tiempos-headline-bold.woff2),url(https://d1e7r7b0lb8p4d.cloudfront.net/fonts/tiempos/tiempos-headline-bold.woff)}@font-face{font-family:Greycliff CF;font-weight:300;src:url(https://d1e7r7b0lb8p4d.cloudfront.net/fonts/greycliff/greycliff-cf-light.woff) format("woff")}@font-face{font-family:Greycliff CF;font-weight:400;src:url(https://d1e7r7b0lb8p4d.cloudfront.net/fonts/greycliff/greycliff-cf-regular.woff) format("woff")}@font-face{font-family:Greycliff CF;font-weight:500;src:url(https://d1e7r7b0lb8p4d.cloudfront.net/fonts/greycliff/greycliff-cf-medium.woff) format("woff")}@font-face{font-family:Greycliff CF;font-weight:600;src:url(https://d1e7r7b0lb8p4d.cloudfront.net/fonts/greycliff/greycliff-cf-demi-bold.woff) format("woff")}@font-face{font-family:Greycliff CF;font-weight:700;src:url(https://d1e7r7b0lb8p4d.cloudfront.net/fonts/greycliff/greycliff-cf-bold.woff) format("woff")}@font-face{font-family:Greycliff CF;font-weight:800;src:url(https://d1e7r7b0lb8p4d.cloudfront.net/fonts/greycliff/greycliff-cf-extra-bold.woff) format("woff")}@font-face{font-family:Inter;font-weight:300;src:url(https://d1e7r7b0lb8p4d.cloudfront.net/fonts/inter/inter-light.woff2),url(https://d1e7r7b0lb8p4d.cloudfront.net/fonts/inter/inter-light.woff)}@font-face{font-family:Inter;font-weight:400;src:url(https://d1e7r7b0lb8p4d.cloudfront.net/fonts/inter/inter-regular.woff2),url(https://d1e7r7b0lb8p4d.cloudfront.net/fonts/inter/inter-regular.woff)}@font-face{font-family:Inter;font-weight:500;src:url(https://d1e7r7b0lb8p4d.cloudfront.net/fonts/inter/inter-medium.woff2),url(https://d1e7r7b0lb8p4d.cloudfront.net/fonts/inter/inter-medium.woff)}@font-face{font-family:Inter;font-weight:600;src:url(https://d1e7r7b0lb8p4d.cloudfront.net/fonts/inter/inter-demi-bold.woff2),url(https://d1e7r7b0lb8p4d.cloudfront.net/fonts/inter/inter-demi-bold.woff)}@font-face{font-family:Inter;font-weight:700;src:url(https://d1e7r7b0lb8p4d.cloudfront.net/fonts/inter/inter-bold.woff2),url(https://d1e7r7b0lb8p4d.cloudfront.net/fonts/inter/inter-bold.woff)}@font-face{font-family:Inter;font-weight:800;src:url(https://d1e7r7b0lb8p4d.cloudfront.net/fonts/inter/inter-extra-bold.woff2),url(https://d1e7r7b0lb8p4d.cloudfront.net/fonts/inter/inter-extra-bold.woff)}@font-face{font-family:IBM Plex Mono;src:url(https://d1e7r7b0lb8p4d.cloudfront.net/fonts/ibm-plex-mono/ibm-plex-mono-regular.woff2),url(https://d1e7r7b0lb8p4d.cloudfront.net/fonts/ibm-plex-mono/ibm-plex-mono-regular.woff)}}@layer reset{*,:after,:before{border-color:var(--border-solid-border-color,"currentColor");border-style:solid;border-width:0}}
-.OverlayArrow-module_overlayArrow__hoDyK{display:flex}.OverlayArrow-module_overlayArrow__hoDyK path{fill:var(--color-purple-800,#2f2438);box-shadow:var(--shadow-small-box-shadow,0 1px 3px 0 rgba(0,0,0,.1),0 3px 16px 0 rgba(0,0,0,.06))}.OverlayArrow-module_overlayArrow__hoDyK[data-placement=right] svg{transform:rotate(90deg)}.OverlayArrow-module_overlayArrow__hoDyK[data-placement=bottom] svg{transform:rotate(180deg)}.OverlayArrow-module_overlayArrow__hoDyK[data-placement=left] svg{transform:rotate(270deg)}.OverlayArrow-module_overlayArrow__hoDyK.OverlayArrow-module_reversed__-WGcR path{fill:var(--color-white,#fff)}
+.OverlayArrow-module_overlayArrow__hoDyK{display:flex;padding:8px}.OverlayArrow-module_overlayArrow__hoDyK[data-placement=bottom],.OverlayArrow-module_overlayArrow__hoDyK[data-placement=top]{padding:0 8px}.OverlayArrow-module_overlayArrow__hoDyK[data-placement=left],.OverlayArrow-module_overlayArrow__hoDyK[data-placement=right]{padding:8px 0}.OverlayArrow-module_overlayArrow__hoDyK path{fill:var(--color-purple-800,#2f2438);box-shadow:var(--shadow-small-box-shadow,0 1px 3px 0 rgba(0,0,0,.1),0 3px 16px 0 rgba(0,0,0,.06))}.OverlayArrow-module_overlayArrow__hoDyK[data-placement=right] svg{transform:rotate(90deg)}.OverlayArrow-module_overlayArrow__hoDyK[data-placement=bottom] svg{transform:rotate(180deg)}.OverlayArrow-module_overlayArrow__hoDyK[data-placement=left] svg{transform:rotate(270deg)}.OverlayArrow-module_overlayArrow__hoDyK.OverlayArrow-module_reversed__-WGcR path{fill:var(--color-white,#fff)}
 .Focusable-module_focusableWrapper__TCysR{display:inline-flex}
-.Tooltip-module_tooltip__efL1m{text-wrap:balance;background-color:var(--color-purple-800,#2f2438);border-radius:var(--border-solid-border-radius,7px);box-shadow:var(--shadow-small-box-shadow,0 1px 3px 0 rgba(0,0,0,.1),0 3px 16px 0 rgba(0,0,0,.06));color:var(--color-white,#fff);font-family:var(--typography-paragraph-extra-small-font-family,"Inter","Noto Sans",Helvetica,Arial,sans-serif);font-size:var(--typography-paragraph-extra-small-font-size,.75rem);font-weight:var(--typography-paragraph-extra-small-font-weight,400);letter-spacing:var(--typography-paragraph-extra-small-letter-spacing,normal);line-height:var(--typography-paragraph-extra-small-line-height,1.125rem);max-width:200px;padding:var(--spacing-8,.5rem) var(--spacing-12,.75rem);text-align:center;transform:translateZ(0)}.Tooltip-module_tooltip__efL1m.Tooltip-module_reversed__NnCbZ{background-color:var(--color-white,#fff);color:var(--color-purple-800,#2f2438)}.Tooltip-module_tooltip__efL1m[data-placement=top]{--origin:translateY(4px)}.Tooltip-module_tooltip__efL1m[data-placement=bottom]{--origin:translateY(-4px)}.Tooltip-module_tooltip__efL1m[data-placement=right]{--origin:translateX(-4px)}.Tooltip-module_tooltip__efL1m[data-placement=left]{--origin:translateX(4px)}.Tooltip-module_tooltip__efL1m[data-entering]{animation:Tooltip-module_slide__lFdGA var(--animation-duration-fast,.3s)}.Tooltip-module_tooltip__efL1m[data-exiting]{animation:Tooltip-module_slide__lFdGA var(--animation-duration-fast,.3s) reverse var(--animation-easing-function-ease-in,cubic-bezier(.55,.085,.68,.53))}@keyframes Tooltip-module_slide__lFdGA{0%{opacity:0;transform:var(--origin)}to{opacity:1;transform:translateY(0)}}
+.Tooltip-module_tooltip__efL1m{text-wrap:pretty;background-color:var(--color-purple-800,#2f2438);border-radius:var(--border-solid-border-radius,7px);box-shadow:var(--shadow-small-box-shadow,0 1px 3px 0 rgba(0,0,0,.1),0 3px 16px 0 rgba(0,0,0,.06));color:var(--color-white,#fff);font-family:var(--typography-paragraph-extra-small-font-family,"Inter","Noto Sans",Helvetica,Arial,sans-serif);font-size:var(--typography-paragraph-extra-small-font-size,.75rem);font-weight:var(--typography-paragraph-extra-small-font-weight,400);letter-spacing:var(--typography-paragraph-extra-small-letter-spacing,normal);line-height:var(--typography-paragraph-extra-small-line-height,1.125rem);max-width:200px;padding:var(--spacing-8,.5rem) var(--spacing-12,.75rem);text-align:center;transform:translateZ(0)}.Tooltip-module_tooltip__efL1m.Tooltip-module_reversed__NnCbZ{background-color:var(--color-white,#fff);color:var(--color-purple-800,#2f2438)}.Tooltip-module_tooltip__efL1m[data-placement=top]{--origin:translateY(4px)}.Tooltip-module_tooltip__efL1m[data-placement=bottom]{--origin:translateY(-4px)}.Tooltip-module_tooltip__efL1m[data-placement=right]{--origin:translateX(-4px)}.Tooltip-module_tooltip__efL1m[data-placement=left]{--origin:translateX(4px)}.Tooltip-module_tooltip__efL1m[data-entering]{animation:Tooltip-module_slide__lFdGA var(--animation-duration-fast,.3s)}.Tooltip-module_tooltip__efL1m[data-exiting]{animation:Tooltip-module_slide__lFdGA var(--animation-duration-fast,.3s) reverse var(--animation-easing-function-ease-in,cubic-bezier(.55,.085,.68,.53))}@keyframes Tooltip-module_slide__lFdGA{0%{opacity:0;transform:var(--origin)}to{opacity:1;transform:translateY(0)}}
 .ToggleTip-module_toggleTip__IrY8Y{align-items:center;appearance:none;background:transparent;border:none;color:inherit;display:inline;display:inline-flex;font:inherit;justify-content:center;margin:0;min-height:1.5rem;min-width:1.5rem;padding:0}
 .SVG-module_icon__8J5Ev{display:inline-block;height:20px;width:20px}.SVG-module_icon__8J5Ev>use{pointer-events:none}@media screen and (-ms-high-contrast:active){.SVG-module_icon__8J5Ev{color:#000}}@media screen and (-ms-high-contrast:white-on-black){.SVG-module_icon__8J5Ev{color:#fff}}@media screen and (-ms-high-contrast:black-on-white){.SVG-module_icon__8J5Ev{color:#000}}.SVG-module_inheritSize__Q8iam{display:block;height:inherit;width:inherit}
 .Avatar-module_wrapper__LY2q2{align-items:center;background:var(--color-gray-300,#eaeaec);border-radius:100%;box-sizing:border-box;display:flex;justify-content:center;overflow:hidden}.Avatar-module_wrapper__LY2q2:not(.Avatar-module_small__PeksS){border:3px solid var(--color-white,#fff);box-shadow:var(--shadow-small-box-shadow,0 1px 3px 0 rgba(0,0,0,.1),0 3px 16px 0 rgba(0,0,0,.06))}.Avatar-module_wrapper__LY2q2.Avatar-module_personal__2U7--{background:var(--color-orange-100,#fff0e8)}.Avatar-module_wrapper__LY2q2.Avatar-module_otherUser__b-drl{background:var(--color-gray-300,#eaeaec)}.Avatar-module_wrapper__LY2q2.Avatar-module_company__2qtJE{background:var(--color-white,#fff);border:0;border-radius:var(--border-solid-border-radius,7px);padding:6px}.Avatar-module_wrapper__LY2q2.Avatar-module_small__PeksS{height:1.25rem;width:1.25rem}.Avatar-module_wrapper__LY2q2.Avatar-module_small__PeksS .Avatar-module_initials__VDY2Q{margin-bottom:-1px}.Avatar-module_wrapper__LY2q2.Avatar-module_small__PeksS.Avatar-module_company__2qtJE{padding:0}.Avatar-module_wrapper__LY2q2.Avatar-module_medium__Vy3V8{height:3rem;width:3rem}.Avatar-module_wrapper__LY2q2.Avatar-module_medium__Vy3V8 .Avatar-module_initials__VDY2Q{margin-bottom:-1px}.Avatar-module_wrapper__LY2q2.Avatar-module_large__qiNWs{height:4.5rem;width:4.5rem}.Avatar-module_wrapper__LY2q2.Avatar-module_xlarge__Vx4IG{height:6rem;width:6rem}.Avatar-module_wrapper__LY2q2.Avatar-module_xxlarge__oOoGq{height:7.75rem;width:7.75rem}.Avatar-module_wrapper__LY2q2 .Avatar-module_initials__VDY2Q{speak-as:spell-out;border-bottom:none;text-decoration:none}.Avatar-module_avatarImage__FuULy{height:100%;object-fit:cover;width:100%}.Avatar-module_loading__i9V-D .Avatar-module_avatarImage__FuULy{display:none}.Avatar-module_companyAvatarImage__7rlfG{border-radius:4px;box-sizing:border-box;object-fit:contain}.Avatar-module_fallbackIcon__MPWxq{color:rgba(var(--color-purple-800-rgb,47,36,56),.7);width:28px}.Avatar-module_xxlarge__oOoGq .Avatar-module_fallbackIcon__MPWxq{width:75px}.Avatar-module_xlarge__Vx4IG .Avatar-module_fallbackIcon__MPWxq{width:60px}.Avatar-module_large__qiNWs .Avatar-module_fallbackIcon__MPWxq{width:35px}.Avatar-module_medium__Vy3V8 .Avatar-module_fallbackIcon__MPWxq{margin-bottom:-1px;width:25px}.Avatar-module_small__PeksS .Avatar-module_fallbackIcon__MPWxq{margin-bottom:-1px;width:10px}.Avatar-module_initials__VDY2Q{box-sizing:border-box;color:var(--color-purple-800,#2f2438);font-family:var(--typography-heading-1-font-family,"Inter","Noto Sans",Helvetica,Arial,sans-serif);font-size:22px;font-weight:var(--typography-heading-1-font-weight,700);letter-spacing:var(--typography-heading-3-letter-spacing,normal);padding-left:5px;padding-right:5px;text-align:center;width:100%}.Avatar-module_initials__VDY2Q:not(.Avatar-module_longName__31Yuf):before{content:"";display:block;margin-top:-.001em}.Avatar-module_xlarge__Vx4IG .Avatar-module_initials__VDY2Q,.Avatar-module_xxlarge__oOoGq .Avatar-module_initials__VDY2Q{font-size:34px;letter-spacing:var(--typography-heading-1-letter-spacing,normal)}.Avatar-module_medium__Vy3V8 .Avatar-module_initials__VDY2Q{font-size:16px}.Avatar-module_medium__Vy3V8 .Avatar-module_initials__VDY2Q,.Avatar-module_small__PeksS .Avatar-module_initials__VDY2Q{font-weight:var(--typography-heading-5-font-weight,600);letter-spacing:var(--typography-heading-5-letter-spacing,normal)}.Avatar-module_small__PeksS .Avatar-module_initials__VDY2Q{font-size:8px}

package/dist/types/__overlays__/Tooltip/v3/Tooltip.d.ts

@@ -8,6 +8,11 @@ export type TooltipProps = Omit<RACTooltipProps, "offset"> & {
      * @default 8
      */
     offset?: number;
+    /**
+     * The placement of the tooltip relative to the trigger.
+     * + we're intentionally limiting the placement options to rtl friendly ones (start, end, top, bottom)
+     */
+    placement?: "bottom" | "bottom start" | "bottom end" | "top" | "top start" | "top end" | "start" | "start top" | "start bottom" | "end" | "end top" | "end bottom";
 };
 /**
  * A tooltip displays a description of an element on hover or focus.
@@ -19,4 +24,9 @@ export declare const Tooltip: React.ForwardRefExoticComponent<Omit<RACTooltipPro
      * @default 8
      */
     offset?: number | undefined;
+    /**
+     * The placement of the tooltip relative to the trigger.
+     * + we're intentionally limiting the placement options to rtl friendly ones (start, end, top, bottom)
+     */
+    placement?: "end" | "start" | "bottom" | "top" | "bottom start" | "bottom end" | "top start" | "top end" | "start top" | "start bottom" | "end top" | "end bottom" | undefined;
 } & React.RefAttributes<HTMLDivElement>>;

package/dist/types/__react-aria-components__/index.d.ts

@@ -0,0 +1 @@
+export * from "react-aria-components";

package/dist/types/__react-aria__/index.d.ts

@@ -0,0 +1 @@
+export * from "react-aria";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kaizen/components",
-  "version": "0.0.0-canary-versioned-tooltip-poc-20240619013415",
+  "version": "0.0.0-canary-tooltip-poc-20240621045645",
   "description": "Kaizen component library",
   "author": "Geoffrey Chong <geoff.chong@cultureamp.com>",
   "homepage": "https://cultureamp.design",

package/src/KaizenProvider/KaizenProvider.tsx

@@ -1,4 +1,5 @@
 import React, { useEffect, useState } from "react"
+import { I18nProvider } from "react-aria"
 import { ToastNotificationsList } from "~components/Notification"
 import { ToastNotificationProvider } from "~components/Notification/ToastNotification/context/ToastNotificationContext"
 import { FontDefinitions } from "./subcomponents/FontDefinitions"
@@ -27,13 +28,13 @@ export const KaizenProvider = ({
 
   return (
     <OptionalIntlProvider locale={locale}>
-      <>
+      <I18nProvider locale={locale}>
         <ToastNotificationProvider>
           {notificationsList}
           {children}
         </ToastNotificationProvider>
         <FontDefinitions />
-      </>
+      </I18nProvider>
     </OptionalIntlProvider>
   )
 }

package/src/__overlays__/Tooltip/v2/_docs/Tooltip.mdx

@@ -1,5 +1,5 @@
 import { Canvas, Controls, Meta } from "@storybook/blocks"
-import { ResourceLinks, Installation } from "~storybook/components"
+import { ResourceLinks, KAIOInstallation } from "~storybook/components"
 import * as TooltipStories from "./Tooltip.stories"
 
 <Meta of={TooltipStories} />
@@ -9,14 +9,9 @@ import * as TooltipStories from "./Tooltip.stories"
 <ResourceLinks
   sourceCode="https://github.com/cultureamp/kaizen-design-system/tree/main/packages/components/src/Tooltip"
   figma="https://www.figma.com/file/eZKEE5kXbEMY3lx84oz8iN/%F0%9F%92%9C-UI-Kit%3A-Heart?type=design&node-id=1929%3A32006&mode=design&t=LwTCBZ5E1uRvOA1l-1"
-  designGuidelines="https://cultureamp.atlassian.net/wiki/spaces/DesignSystem/pages/3075604978/Tooltip"
-  className="!mb-8"
 />
 
-<Installation
-  installCommand="pnpm add @kaizen/components"
-  importStatement='import { Tooltip } from "@kaizen/components/v2/overlays"'
-/>
+<KAIOInstallation exportNames="Tooltip" family="overlays" version="2" />
 
 ## Overview
 

package/src/__overlays__/Tooltip/v3/OverlayArrow.module.scss

@@ -4,6 +4,22 @@
 .overlayArrow {
   display: flex;
 
+  // for correct arrow positioning with rounded corners we need to do bit trickery here
+  // the positioning is done in js in RAC and works by first getting size of arrow without data-placement, and isn't recomputed after update
+  // so we first set padding on arrow from all sides (that'll be used for start position computation)
+  // and then we remove it from the oposite axis
+  padding: 8px;
+
+  &[data-placement="top"],
+  &[data-placement="bottom"] {
+    padding: 0 8px;
+  }
+
+  &[data-placement="left"],
+  &[data-placement="right"] {
+    padding: 8px 0;
+  }
+
   path {
     fill: $color-purple-800;
     box-shadow: $shadow-small-box-shadow;

package/src/__overlays__/Tooltip/v3/Tooltip.module.scss

@@ -18,7 +18,7 @@
   border-radius: $border-solid-border-radius;
   box-shadow: $shadow-small-box-shadow;
   background-color: $color-purple-800;
-  text-wrap: balance;
+  text-wrap: pretty;
 
   /* fixes FF gap */
   transform: translate3d(0, 0, 0);

package/src/__overlays__/Tooltip/v3/Tooltip.tsx

@@ -21,6 +21,23 @@ export type TooltipProps = Omit<RACTooltipProps, "offset"> & {
    * @default 8
    */
   offset?: number
+  /**
+   * The placement of the tooltip relative to the trigger.
+   * + we're intentionally limiting the placement options to rtl friendly ones (start, end, top, bottom)
+   */
+  placement?:
+    | "bottom"
+    | "bottom start"
+    | "bottom end"
+    | "top"
+    | "top start"
+    | "top end"
+    | "start"
+    | "start top"
+    | "start bottom"
+    | "end"
+    | "end top"
+    | "end bottom"
 }
 
 /**

package/src/__overlays__/Tooltip/v3/_docs/API.mdx

@@ -0,0 +1,55 @@
+import { Canvas, Controls, Meta } from "@storybook/blocks"
+import { KAIOInstallation, ResourceLinks, SbText } from "~storybook/components"
+import * as docStories from "./Tooltip.docs.stories"
+import * as exampleStories from "./Tooltip.stories"
+
+<Meta title="Overlays/Tooltip/v3/API Specification" />
+
+
+# Tooltip API specifications (v3)
+<SbText variant="extra-small">
+  Updated June X, 2024
+</SbText>
+
+<ResourceLinks
+  sourceCode="https://github.com/cultureamp/kaizen-design-system/tree/main/packages/components/src/Tooltip"
+  figma="https://www.figma.com/file/eZKEE5kXbEMY3lx84oz8iN/%F0%9F%92%9C-UI-Kit%3A-Heart?type=design&node-id=1929%3A32006&mode=design&t=LwTCBZ5E1uRvOA1l-1"
+  designGuidelines="/?path=/docs/overlays-tooltip-v3-usage-guidelines--docs"
+  className="!mb-8"
+/>
+
+<KAIOInstallation exportNames="Tooltip" family="overlays" version="3" />
+
+
+## Overview
+
+Tooltips are brief floating labels used to add additional contextual information when users hover, click or focus on an interactive element.
+
+This component is built on top of [React Aria's Tooltip](https://react-spectrum.adobe.com/react-aria/Tooltip.html) and share similar [anatomy](https://react-spectrum.adobe.com/react-aria/Tooltip.html#anatomy) and functionality.
+
+<Canvas of={exampleStories.OnButton} />
+<Controls of={exampleStories.OnButton}  />
+
+### triggerRef
+Notes on the `triggerRef`
+
+### Placement
+Notes on placement with examples, include `shouldFlip` and `offset`
+
+<Canvas of={docStories.Placement}  />
+
+### Controlled state
+Notes on the controlled states vs out of the box
+
+### ToggleTip
+
+<Canvas of={exampleStories.ToggleTip} />
+
+## Examples
+
+Here are examples of how to use the Tooltip with compatible Kaizen components.
+
+### On Button
+
+<Canvas of={exampleStories.OnButton} />
+

package/src/__overlays__/Tooltip/v3/_docs/Tooltip.docs.stories.tsx

@@ -0,0 +1,158 @@
+import React from "react"
+import { Meta, StoryObj } from "@storybook/react"
+import isChromatic from "chromatic"
+import { Button, IconButton } from "~components/Button"
+import { FieldMessage } from "~components/FieldMessage"
+import { AddIcon, QuestionIcon } from "~components/Icon"
+import { Input } from "~components/Input"
+import { Label } from "~components/Label"
+import { Tooltip, TooltipTrigger } from "../index"
+import * as TestStories from "./Tooltip.spec.stories"
+
+const meta = {
+  title: "Overlays/Tooltip/v3/Docs Assets",
+  component: Tooltip,
+  parameters: {
+    layout: "centered",
+    a11y: { disable: true },
+  },
+  args: {
+    defaultOpen: isChromatic(),
+  },
+  argTypes: {
+    // eslint-disable-next-line camelcase
+    UNSTABLE_portalContainer: {
+      control: false,
+      table: { disable: true },
+    },
+    triggerRef: { control: false },
+  },
+} satisfies Meta<typeof Tooltip>
+
+export default meta
+
+type Story = StoryObj<typeof meta>
+
+export const Playground: Story = {
+  render: ({ defaultOpen: _, isOpen, ...args }) => (
+    <TooltipTrigger defaultOpen={true} isOpen={isOpen}>
+      <Button label="Button" />
+      <Tooltip {...args}>Tooltip content</Tooltip>
+    </TooltipTrigger>
+  ),
+}
+
+export const Primary: Story = {
+  render: () => (
+    <TooltipTrigger>
+      <IconButton
+        label="Add something"
+        icon={<AddIcon role="presentation" />}
+        primary
+        // Negate the aria description (added by RAC) as it should be the
+        // same as the accessible name, therefore no need to duplicate it
+        aria-describedby={null}
+      />
+      <Tooltip>Add something</Tooltip>
+    </TooltipTrigger>
+  ),
+}
+
+export const Placement: Story = {
+  ...TestStories.Placement,
+}
+
+export const DoFieldTooltip: Story = {
+  render: () => (
+    <div>
+      <Label>Password</Label>
+      <div className="flex gap-4">
+        <Input type="text" />
+        <TooltipTrigger>
+          <IconButton
+            label="Help"
+            icon={<QuestionIcon role="presentation" />}
+            // Negate the aria description (added by RAC) as it should be the
+            // same as the accessible name, therefore no need to duplicate it
+            aria-describedby={null}
+          />
+          <Tooltip>Contact customer support for help</Tooltip>
+        </TooltipTrigger>
+      </div>
+      <FieldMessage message="Password must be at least 8 characters" />
+    </div>
+  ),
+}
+
+export const DontFieldTooltip: Story = {
+  parameters: {
+    docs: {
+      source: { type: "dynamic" },
+    },
+  },
+  render: () => (
+    <div>
+      <Label>Password</Label>
+      <div className="flex gap-4">
+        <Input type="text" />
+        <TooltipTrigger>
+          <IconButton
+            label="Help"
+            icon={<QuestionIcon role="presentation" />}
+          />
+          <Tooltip>Password must be at least 8 characters</Tooltip>
+        </TooltipTrigger>
+      </div>
+    </div>
+  ),
+}
+
+export const DoConcise: Story = {
+  parameters: {
+    docs: {
+      source: { type: "dynamic" },
+    },
+  },
+  render: () => (
+    <div>
+      <Label>Email</Label>
+      <div className="flex gap-4">
+        <Input type="text" />
+        <TooltipTrigger>
+          <IconButton
+            label="Help"
+            icon={<QuestionIcon role="presentation" />}
+          />
+          <Tooltip>Enter your email to help us find your account</Tooltip>
+        </TooltipTrigger>
+      </div>
+    </div>
+  ),
+}
+
+export const DontConcise: Story = {
+  parameters: {
+    docs: {
+      source: { type: "dynamic" },
+    },
+  },
+  render: () => (
+    <div>
+      <Label>Email</Label>
+      <div className="flex gap-4">
+        <Input type="text" />
+        <TooltipTrigger>
+          <IconButton
+            label="Help"
+            icon={<QuestionIcon role="presentation" />}
+          />
+          <Tooltip>
+            The email field is required. Your email address will be used as an
+            identifier when we search for your account and we will also use it
+            to send you confirmation numbers via email.
+          </Tooltip>
+        </TooltipTrigger>
+      </div>
+    </div>
+  ),
+}

package/src/__overlays__/Tooltip/v3/_docs/Tooltip.mdx

@@ -1,20 +1,24 @@
-import { Meta, Canvas, Controls } from "@storybook/blocks"
-import { ResourceLinks, Installation } from "~storybook/components"
-import * as TooltipStories from "./Tooltip.stories"
+import { Canvas, Meta, Unstyled, Controls } from "@storybook/blocks"
+import { CheckIcon, ClearIcon } from "~components/Icon"
+import { ResourceLinks, SbText, SbHeading, Installation } from "~storybook/components"
+import * as TooltipStories from "./Tooltip.docs.stories"
+import AnatomyPng from "./assets/tooltip_anatomy.png"
+import VariantsPng from "./assets/tooltip_variants.png"
+import WhenToUsePng from "./assets/tooltip_when_to_use.png"
 
-<Meta of={TooltipStories} />
+<Meta title="Overlays/Tooltip/v3/Usage Guidelines" />
 
 # Tooltip (v3)
+<SbText variant="extra-small">
+  Updated June X, 2024
+</SbText>
+
 
-{/*
-  * @todo:
-  * - Adjust Github link (if needed)
-  * - Add Figma and Design Guidelines (Confluence) link
-  */}
 <ResourceLinks
   sourceCode="https://github.com/cultureamp/kaizen-design-system/tree/main/packages/components/src/Tooltip"
   figma=""
-  designGuidelines=""
+  designGuidelines="/?path=/docs/overlays-tooltip-v3-usage-guidelines--docs"
+  apiSpecification="/?path=/docs/overlays-tooltip-v3-api-specifications--docs"
   className="!mb-8"
 />
 
@@ -26,10 +30,126 @@ import * as TooltipStories from "./Tooltip.stories"
 
 ## Overview
 
-{/* @todo: Update summary. */}
-Brief summary of the component here.
+<SbText>
+  Tooltips are brief floating labels used to add additional contextual information when users hover, click or focus on an interactive element. These should offer concise explanations,  elaborating on the element they are associated with.
+</SbText>
+
+<Canvas of={TooltipStories.Playground} />
+<Controls of={TooltipStories.Playground} include={["placement", "isOpen"]} className="mb-64" />
+
+
+### Anatomy
+
+<div className="mb-32">
+  <SbText>
+    - The anatomy of a tooltip is made up of a container, description and arrow.
+      - **They do not include a title or heading**. If you need to include a title, use a Popover
+    - A tooltip is connected to a trigger element, such as a button or icon, that shows the tooltip when the interactive trigger element is hovered or focused. (More details below.)
+  </ SbText>
+</div>
+
+<img src={AnatomyPng} alt="Indicates the anatomy of the Tooltip component, the Container, Label, zArrow and Trigger" className="mb-64" />
+
+### When to use
+
+<div className="mt-16 mb-32">
+  <SbText>
+    - Tooltips are used to provide additional information when space is tight.
+    - Tooltips must be concise with one or more lines of text.
+    - Tooltips must be accessible via hover and focus only.
+    - Trigger tooltips from Interactive elements (Buttons, Links, Icon buttons) or Non-interactive elements (Icons, Abbreviations Truncated text)—be mindful of keyboard accessibility
+    - **Never include any kind of error messages** in a tooltip
+  </ SbText>
+</ div>
+
+<img src={WhenToUsePng} alt="Illustration of when to use the Tooltip component" className="mb-32"/>
+
+### Dos and don'ts
+<Unstyled>
+  <div className="flex flex-col mt-16 gap-40 mb-64">
+    <div className="flex flex-col m-0 gap-16">
+        <SbHeading variant="heading-4">
+          #### Do use tooltips to describe icons
+        </SbHeading>
+        <SbText variant="body" tag="span">
+          Icons are not always easy to identify on their own. When you use components that don&apos;t have labels — for example, icon-only action buttons and tabs — make sure to use tooltips to provide context for the icons.
+        </SbText>
+      <div className="grid grid-cols-2 gap-16">
+        <div className="relative [&>*]:m-0">
+          <div className="bg-green-500 absolute top-6 left-6 z-10 py-4 px-6 font-bold text-white rounded flex gap-2 items-center justify-center">
+            <CheckIcon role="presentation" />
+            <SbText color="white">
+              <strong>Do</strong>
+            </SbText>
+          </div>
+          <Canvas of={TooltipStories.Primary} className="border-green-500 !rounded" />
+        </div>
+      </div>
+    </div>
+
+    <div className="flex flex-col gap-16">
+        <SbHeading variant="heading-4">
+          #### Don&apos;t use tooltips to communicate crucial information
+        </SbHeading>
+        <SbText>
+          Tooltips should never stop a user (or be a gate) from completing a task or performing an action. They disappear so they should never contain critical information that a user would absolutely need to proceed, or information without which a user may cause errors. If the information is crucial for a user to proceed, consider using a modal or inline notification instead.
+        </SbText>
+      <div className="grid grid-cols-2 gap-16">
+        <div className="relative [&>*]:m-0">
+          <div className="bg-green-500 absolute top-6 left-6 z-10 py-4 px-6 font-bold text-white rounded flex gap-2 items-center justify-center">
+            <CheckIcon role="presentation" />
+            <SbText color="white"><strong>Do</strong></SbText>
+          </div>
+          <Canvas of={TooltipStories.DoFieldTooltip} className="border-green-500 !rounded-[10px]" />
+        </div>
+        <div className="relative [&>*]:m-0">
+          <div className="bg-gray-500 absolute top-6 left-6 z-10 py-4 px-6 font-bold text-white rounded flex gap-2 items-center justify-center">
+            <ClearIcon role="presentation" />
+            <SbText color="white"><strong>Don&apos;t</strong></SbText>
+          </div>
+          <Canvas of={TooltipStories.DontFieldTooltip} className="border-gray-500 !rounded-[10px]" />
+        </div>
+      </div>
+    </div>
+
+    <div className="flex flex-col m-0 gap-16">
+        <SbHeading variant="heading-4">
+          #### Do be concise
+        </SbHeading>
+        <SbText>
+          Good tooltips contain concise and helpful information, keep it short. If you need more space, consider using a Popover. Don’t use it to duplicate information that already exists on the page. Instead, closely consider its placement and whether the disclosed copy will inform the action the user is about to perform.
+        </SbText>
+      <div className="grid grid-cols-2 gap-16">
+        <div className="relative [&>*]:m-0">
+          <div className="bg-green-500 absolute top-6 left-6 z-10 py-4 px-6 font-bold text-white rounded flex gap-2 items-center justify-center">
+            <CheckIcon role="presentation" />
+            <SbText color="white"><strong>Do</strong></SbText>
+          </div>
+          <Canvas of={TooltipStories.DoConcise} className="border-green-500 !rounded-[10px]" />
+        </div>
+        <div className="relative [&>*]:m-0">
+          <div className="bg-gray-500 absolute top-6 left-6 z-10 py-4 px-6 font-bold text-white rounded flex gap-2 items-center justify-center">
+            <ClearIcon role="presentation" />
+            <SbText color="white"><strong>Don&apos;t</strong></SbText>
+          </div>
+          <Canvas of={TooltipStories.DontConcise} className="border-gray-500 !rounded-[10px]" />
+        </div>
+      </div>
+    </div>
+  </div>
+</Unstyled>
+
+### Variations
+
+<img src={VariantsPng} alt="Indicates the anatomy of the Tooltip component, the Container, Label, zArrow and Trigger" className="my-16" />
 
-<Canvas of={TooltipStories.OnButton} />
-<Controls of={TooltipStories.OnButton} />
+<div className="mb-64">
+  <SbText>
+    - Type: Dropdown to choose from Default (dark tooltip) and Reverse (light tooltip)
+    - Direction: Dropdown to choose where the arrow points
+    - Tooltip label: Input field allows you to type in the label from the properties panel
+    - Use strong signifiers for trigger elements to ensure the tooltip is discoverable.
+    - The proximity of tooltips is always paired to the element with which they are associated.
+  </SbText>
+</ div>
 
-## API