@jobber/components 2.86.0 → 2.86.2

package/dist/Toast/index.js

@@ -2,108 +2,108 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }
-
-var __chunk_1 = require('../chunk-b67af3cb.js');
+var tslib_es6 = require('../tslib.es6-5b50eb8e.js');
 var React = require('react');
-var React__default = _interopDefault(React);
-var __chunk_2 = require('../chunk-17e02351.js');
-require('classnames');
-var index = require('../Typography/index.js');
+var ReactDOM = require('react-dom');
+var framerMotion = require('framer-motion');
+var styleInject_es = require('../style-inject.es-dcee06b6.js');
+var Icon = require('../Icon-d5ad1a6d.js');
+var Button = require('../Button-5b2f1636.js');
+var Typography = require('../Typography-7e542a72.js');
 require('@jobber/design');
-var index$2 = require('../Icon/index.js');
+require('classnames');
 require('react-router-dom');
-var index$5 = require('../Button/index.js');
-var framerMotion = require('framer-motion');
-var ReactDOM = require('react-dom');
-var ReactDOM__default = _interopDefault(ReactDOM);
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
 var css = "._1jL4uuxcwlNL5YnUj_ua2g {\n  position: relative;\n  z-index: var(--elevation-toast);\n}\n\n._1OJBJo55SADOx1bC1JQBfB {\n  display: -ms-flexbox;\n  display: flex;\n  position: fixed;\n  right: 0;\n  bottom: var(--space-large);\n  left: 0;\n  z-index: var(--elevation-toast);\n  width: 100%;\n  box-sizing: border-box;\n  -ms-flex-direction: column;\n      flex-direction: column;\n  -ms-flex-align: center;\n      align-items: center;\n  padding: 0 var(--space-large);\n  color: var(--color-text--reverse);\n  font-size: var(--typography--fontSize-large);\n  pointer-events: none;\n}\n\n._3M3dXN6cHdqE_9yCnTwXuA {\n  box-shadow: var(--shadow-high);\n  overflow: hidden;\n  pointer-events: all;\n}\n\n._3M3dXN6cHdqE_9yCnTwXuA + ._3M3dXN6cHdqE_9yCnTwXuA {\n  margin-top: var(--space-base);\n}\n\n._2JTk_JuoYf4H1PIiFTxwK {\n  display: -ms-flexbox;\n  display: flex;\n  -ms-flex-align: center;\n      align-items: center;\n  padding: calc(var(--space-small) / 1.25) var(--space-base);\n  border-radius: var(--radius-base);\n  background: var(--color-surface--reverse);\n}\n\n._3kimXYOdDlyI9bxgiFJMgZ {\n  margin-right: var(--space-base);\n}\n\n._1izxhu6XCPAQla9emS_Wn_ {\n  margin-left: var(--space-base);\n}\n\n.FMxl_EoRhLki7i_UOLCT4 {\n  margin-left: var(--space-small);\n}\n";
 var styles = {"wrapper":"_1jL4uuxcwlNL5YnUj_ua2g","container":"_1OJBJo55SADOx1bC1JQBfB","toast":"_3M3dXN6cHdqE_9yCnTwXuA","slice":"_2JTk_JuoYf4H1PIiFTxwK","icon":"_3kimXYOdDlyI9bxgiFJMgZ","button":"_1izxhu6XCPAQla9emS_Wn_","action":"FMxl_EoRhLki7i_UOLCT4"};
-__chunk_2.styleInject(css);
+styleInject_es.styleInject(css);
 
-function Toast(_a) {
-    var message = _a.message, _b = _a.variation, variation = _b === void 0 ? "success" : _b, action = _a.action, actionLabel = _a.actionLabel;
-    var _c = __chunk_1.__read(React.useState(true), 2), visible = _c[0], setVisible = _c[1];
-    var icon = getIcon();
-    var timer;
-    React.useEffect(function () { return startTimer(); }, []);
-    return (React__default.createElement(framerMotion.AnimatePresence, null, visible && (React__default.createElement(framerMotion.motion.div, { className: styles.toast, initial: { opacity: 0, scale: 0.8 }, animate: { opacity: 1, scale: 1 }, onMouseEnter: function () { return stopTimer(); }, onMouseLeave: function () { return startTimer(); }, exit: {
-            opacity: 0,
-            scale: 0.8,
-            height: 0,
-            transition: { duration: 0.4 },
-        } },
-        React__default.createElement("div", { className: styles.slice },
-            React__default.createElement("div", { className: styles.icon },
-                React__default.createElement(index$2.Icon, { color: icon.color, name: icon.name })),
-            React__default.createElement(index.Typography, { element: "span", size: "large" }, message),
-            action && (React__default.createElement(index$5.Button, { label: "" + actionLabel, onClick: action, type: "tertiary" })),
-            React__default.createElement("div", { className: styles.button },
-                React__default.createElement(index$5.Button, { icon: "remove", ariaLabel: "Hide Notification", onClick: handleToastClose, type: "tertiary", variation: "subtle" })))))));
-    function startTimer() {
-        timer = setTimeout(function () { return handleToastClose(); }, getTimeout());
-    }
-    function stopTimer() {
-        clearTimeout(timer);
-    }
-    function handleToastClose() {
-        setVisible(false);
-    }
-    function getTimeout() {
-        var min = 5000;
-        var max = 10000;
-        var time = message.length * 200;
-        if (time < min)
-            return min;
-        if (time > max)
-            return max;
-        return time;
-    }
-    function getIcon() {
-        switch (variation) {
-            case "info":
-                return { name: "knot", color: "lightBlue" };
-            case "error":
-                return { name: "alert", color: "red" };
-            default:
-                return { name: "checkmark", color: "green" };
-        }
-    }
+function Toast(_a) {
+    var message = _a.message, _b = _a.variation, variation = _b === void 0 ? "success" : _b, action = _a.action, actionLabel = _a.actionLabel;
+    var _c = tslib_es6.__read(React.useState(true), 2), visible = _c[0], setVisible = _c[1];
+    var icon = getIcon();
+    var timer;
+    React.useEffect(function () { return startTimer(); }, []);
+    return (React__default["default"].createElement(framerMotion.AnimatePresence, null, visible && (React__default["default"].createElement(framerMotion.motion.div, { className: styles.toast, initial: { opacity: 0, scale: 0.8 }, animate: { opacity: 1, scale: 1 }, onMouseEnter: function () { return stopTimer(); }, onMouseLeave: function () { return startTimer(); }, exit: {
+            opacity: 0,
+            scale: 0.8,
+            height: 0,
+            transition: { duration: 0.4 },
+        } },
+        React__default["default"].createElement("div", { className: styles.slice },
+            React__default["default"].createElement("div", { className: styles.icon },
+                React__default["default"].createElement(Icon.Icon, { color: icon.color, name: icon.name })),
+            React__default["default"].createElement(Typography.Typography, { element: "span", size: "large" }, message),
+            action && (React__default["default"].createElement(Button.Button, { label: "" + actionLabel, onClick: action, type: "tertiary" })),
+            React__default["default"].createElement("div", { className: styles.button },
+                React__default["default"].createElement(Button.Button, { icon: "remove", ariaLabel: "Hide Notification", onClick: handleToastClose, type: "tertiary", variation: "subtle" })))))));
+    function startTimer() {
+        timer = setTimeout(function () { return handleToastClose(); }, getTimeout());
+    }
+    function stopTimer() {
+        clearTimeout(timer);
+    }
+    function handleToastClose() {
+        setVisible(false);
+    }
+    function getTimeout() {
+        var min = 5000;
+        var max = 10000;
+        var time = message.length * 200;
+        if (time < min)
+            return min;
+        if (time > max)
+            return max;
+        return time;
+    }
+    function getIcon() {
+        switch (variation) {
+            case "info":
+                return { name: "knot", color: "lightBlue" };
+            case "error":
+                return { name: "alert", color: "red" };
+            default:
+                return { name: "checkmark", color: "green" };
+        }
+    }
 }
 
-function showToast(props) {
-    createDocumentToast(props);
-}
-function createDocumentToast(props) {
-    var targetId = "atlantis-toast-element";
-    var target = document.querySelector("#" + targetId);
-    if (!target) {
-        target = document.createElement("div");
-        target.id = targetId;
-        target.classList.add(styles.wrapper);
-        document.body.appendChild(target);
-    }
-    ReactDOM.render(React__default.createElement(ToasterOven, __chunk_1.__assign({}, props)), target);
-}
-var ToastContainer = React.forwardRef(ToastInternal);
-function ToasterOven(props) {
-    var toastRef = React.useRef();
-    React.useEffect(function () { return toastRef.current.add(props); });
-    return React__default.createElement(ToastContainer, { ref: toastRef });
-}
-function ToastInternal(_, ref) {
-    var _a = __chunk_1.__read(React.useState(0), 2), toastKey = _a[0], setToastKey = _a[1];
-    var _b = __chunk_1.__read(React.useState([]), 2), toasts = _b[0], setToasts = _b[1];
-    React.useImperativeHandle(ref, function () { return ({
-        add: function (props) {
-            setToastKey(toastKey + 1);
-            setToasts(__chunk_1.__spread([
-                __chunk_1.__assign(__chunk_1.__assign({}, props), { id: toastKey })
-            ], toasts));
-        },
-    }); });
-    return (React__default.createElement("div", { className: styles.container }, toasts.map(function (toast) { return (React__default.createElement(Toast, __chunk_1.__assign({}, toast, { key: toast.id }))); })));
+function showToast(props) {
+    createDocumentToast(props);
+}
+function createDocumentToast(props) {
+    var targetId = "atlantis-toast-element";
+    var target = document.querySelector("#" + targetId);
+    if (!target) {
+        target = document.createElement("div");
+        target.id = targetId;
+        target.classList.add(styles.wrapper);
+        document.body.appendChild(target);
+    }
+    ReactDOM.render(React__default["default"].createElement(ToasterOven, tslib_es6.__assign({}, props)), target);
+}
+var ToastContainer = React.forwardRef(ToastInternal);
+function ToasterOven(props) {
+    var toastRef = React.useRef();
+    React.useEffect(function () { return toastRef.current.add(props); });
+    return React__default["default"].createElement(ToastContainer, { ref: toastRef });
+}
+function ToastInternal(_, ref) {
+    var _a = tslib_es6.__read(React.useState(0), 2), toastKey = _a[0], setToastKey = _a[1];
+    var _b = tslib_es6.__read(React.useState([]), 2), toasts = _b[0], setToasts = _b[1];
+    React.useImperativeHandle(ref, function () { return ({
+        add: function (props) {
+            setToastKey(toastKey + 1);
+            setToasts(tslib_es6.__spread([
+                tslib_es6.__assign(tslib_es6.__assign({}, props), { id: toastKey })
+            ], toasts));
+        },
+    }); });
+    return (React__default["default"].createElement("div", { className: styles.container }, toasts.map(function (toast) { return (React__default["default"].createElement(Toast, tslib_es6.__assign({}, toast, { key: toast.id }))); })));
 }
 
 exports.showToast = showToast;

package/dist/Toast/showToast.d.ts

@@ -1,2 +1,2 @@
-import { ToastProps } from "./Toast";
-export declare function showToast(props: ToastProps): void;
+import { ToastProps } from "./Toast";
+export declare function showToast(props: ToastProps): void;

package/dist/Tooltip/Tooltip.d.ts

@@ -1,10 +1,10 @@
-import { ReactElement } from "react";
-interface TooltipProps {
-    readonly children: ReactElement;
-    /**
-     * Tooltip text
-     */
-    readonly message: string;
-}
-export declare function Tooltip({ message, children }: TooltipProps): JSX.Element;
-export {};
+import { ReactElement } from "react";
+interface TooltipProps {
+    readonly children: ReactElement;
+    /**
+     * Tooltip text
+     */
+    readonly message: string;
+}
+export declare function Tooltip({ message, children }: TooltipProps): JSX.Element;
+export {};

package/dist/Tooltip/index.d.ts

@@ -1 +1 @@
-export { Tooltip } from "./Tooltip";
+export { Tooltip } from "./Tooltip";

package/dist/Tooltip/index.js

@@ -2,116 +2,17 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }
+var Tooltip = require('../Tooltip-4396164d.js');
+require('../tslib.es6-5b50eb8e.js');
+require('react');
+require('classnames');
+require('react-dom');
+require('framer-motion');
+require('../style-inject.es-dcee06b6.js');
+require('react-popper');
+require('../Text-9bc093e9.js');
+require('../Typography-7e542a72.js');
 
-var __chunk_1 = require('../chunk-b67af3cb.js');
-var React = require('react');
-var React__default = _interopDefault(React);
-var __chunk_2 = require('../chunk-17e02351.js');
-var classnames = _interopDefault(require('classnames'));
-require('../Typography/index.js');
-var index$1 = require('../Text/index.js');
-var framerMotion = require('framer-motion');
-var ReactDOM = require('react-dom');
-var ReactDOM__default = _interopDefault(ReactDOM);
-var reactPopper = require('react-popper');
 
-var css = ":root {\n  --tooltip--arrow-size: var(--space-small);\n  --tooltip--offset: calc(-1 * calc(var(--space-smaller) + 1px));\n}\n\n._2IKuYsqwWWH9A-WgJDR61q {\n  display: none;\n}\n\n._2fkHxHwiJK9AkUMCIPucCJ {\n  display: inline-block;\n  position: absolute;\n  z-index: var(--elevation-tooltip);\n}\n\n._2YpF1qO7J5ncFlfoW0hA1L {\n  display: inline-block;\n  position: relative;\n  max-width: calc(var(--base-unit) * 15);\n  padding: var(--space-small);\n  border: var(--border-base) solid var(--color-informative);\n  border-radius: var(--radius-base);\n  background-color: var(--color-informative--surface);\n}\n\n._2YpF1qO7J5ncFlfoW0hA1L ._3DjyKsZFiUA0QD18ABsimd,\n._2YpF1qO7J5ncFlfoW0hA1L ._3DjyKsZFiUA0QD18ABsimd::after {\n  width: var(--space-small);\n  width: var(--space-small);\n  width: var(--tooltip--arrow-size);\n  height: var(--space-small);\n  height: var(--space-small);\n  height: var(--tooltip--arrow-size);\n  background-color: inherit;\n}\n\n._2YpF1qO7J5ncFlfoW0hA1L ._3DjyKsZFiUA0QD18ABsimd::after {\n  content: \"\";\n  display: block;\n  position: absolute;\n  border: var(--border-base) solid var(--color-informative);\n  -webkit-transform: rotate(45deg);\n          transform: rotate(45deg);\n}\n\n._3VkJmaX3T1x98A59lZbEa5 {\n  padding-bottom: var(--space-small);\n}\n\n._3VkJmaX3T1x98A59lZbEa5 ._2YpF1qO7J5ncFlfoW0hA1L {\n  -webkit-transform-origin: bottom center;\n          transform-origin: bottom center;\n}\n\n._3VkJmaX3T1x98A59lZbEa5 ._2YpF1qO7J5ncFlfoW0hA1L ._3DjyKsZFiUA0QD18ABsimd {\n  bottom: calc(-1 * calc(var(--space-smaller) + 1px));\n  bottom: calc(-1 * calc(var(--space-smaller) + 1px));\n  bottom: var(--tooltip--offset);\n}\n\n._3VkJmaX3T1x98A59lZbEa5 ._2YpF1qO7J5ncFlfoW0hA1L ._3DjyKsZFiUA0QD18ABsimd::after {\n  border-top-width: 0;\n  border-left-width: 0;\n}\n\n.QtIXawS3dVhY8j2NKSZLY {\n  padding-top: var(--space-small);\n}\n\n.QtIXawS3dVhY8j2NKSZLY ._2YpF1qO7J5ncFlfoW0hA1L {\n  -webkit-transform-origin: top center;\n          transform-origin: top center;\n}\n\n.QtIXawS3dVhY8j2NKSZLY ._2YpF1qO7J5ncFlfoW0hA1L ._3DjyKsZFiUA0QD18ABsimd {\n  top: calc(-1 * calc(var(--space-smaller) + 1px));\n  top: calc(-1 * calc(var(--space-smaller) + 1px));\n  top: var(--tooltip--offset);\n}\n\n.QtIXawS3dVhY8j2NKSZLY ._2YpF1qO7J5ncFlfoW0hA1L ._3DjyKsZFiUA0QD18ABsimd::after {\n  border-bottom-width: 0;\n  border-right-width: 0;\n}\n";
-var styles = {"shadowActivator":"_2IKuYsqwWWH9A-WgJDR61q","tooltipWrapper":"_2fkHxHwiJK9AkUMCIPucCJ","tooltip":"_2YpF1qO7J5ncFlfoW0hA1L","arrow":"_3DjyKsZFiUA0QD18ABsimd","above":"_3VkJmaX3T1x98A59lZbEa5","below":"QtIXawS3dVhY8j2NKSZLY"};
-__chunk_2.styleInject(css);
 
-function useTooltipPositioning() {
-    var _a, _b;
-    var shadowRef = React.useRef(null);
-    var _c = __chunk_1.__read(React.useState(), 2), positionElement = _c[0], setTooltipRef = _c[1];
-    var _d = __chunk_1.__read(React.useState(), 2), arrowElement = _d[0], setArrowRef = _d[1];
-    var popper = reactPopper.usePopper((_a = shadowRef.current) === null || _a === void 0 ? void 0 : _a.nextElementSibling, positionElement, {
-        placement: "top",
-        modifiers: [
-            { name: "flip", options: { fallbackPlacements: ["bottom"] } },
-            {
-                name: "arrow",
-                options: { element: arrowElement },
-            },
-        ],
-    });
-    return __chunk_1.__assign(__chunk_1.__assign({}, popper), { placement: (_b = popper.state) === null || _b === void 0 ? void 0 : _b.placement, shadowRef: shadowRef,
-        setArrowRef: setArrowRef,
-        setTooltipRef: setTooltipRef });
-}
-
-var variation = {
-    startOrStop: { scale: 0.6, opacity: 0 },
-    done: { scale: 1, opacity: 1 },
-};
-function Tooltip(_a) {
-    var message = _a.message, children = _a.children;
-    var _b = __chunk_1.__read(React.useState(false), 2), show = _b[0], setShow = _b[1];
-    var _c = useTooltipPositioning(), attributes = _c.attributes, placement = _c.placement, shadowRef = _c.shadowRef, popperStyles = _c.styles, setArrowRef = _c.setArrowRef, setTooltipRef = _c.setTooltipRef;
-    initializeListeners();
-    var toolTipClassNames = classnames(styles.tooltipWrapper, placement === "bottom" && styles.below, placement === "top" && styles.above);
-    return (React__default.createElement(React__default.Fragment, null,
-        React__default.createElement("span", { className: styles.shadowActivator, ref: shadowRef }),
-        children,
-        React__default.createElement(TooltipPortal, null, show && (React__default.createElement("div", __chunk_1.__assign({ className: toolTipClassNames, style: popperStyles.popper, ref: setTooltipRef, role: "tooltip" }, attributes.popper),
-            React__default.createElement(framerMotion.motion.div, { className: styles.tooltip, variants: variation, initial: "startOrStop", animate: "done", exit: "startOrStop", transition: {
-                    type: "spring",
-                    damping: 20,
-                    stiffness: 300,
-                } },
-                React__default.createElement(index$1.Text, null, message),
-                React__default.createElement("div", { ref: setArrowRef, style: popperStyles.arrow, className: styles.arrow })))))));
-    function initializeListeners() {
-        var showTooltip = function () {
-            setShow(true);
-        };
-        var hideTooltip = function () {
-            setShow(false);
-        };
-        var injectAttributes = function () {
-            var _a;
-            if ((_a = shadowRef === null || shadowRef === void 0 ? void 0 : shadowRef.current) === null || _a === void 0 ? void 0 : _a.nextElementSibling) {
-                var activator = shadowRef.current.nextElementSibling;
-                // Manually inject "aria-description" and "tabindex" to let the screen
-                // readers read the tooltip message.
-                // This is to avoid having to add those attribute as a prop on every
-                // component we have.
-                activator.setAttribute("aria-description", message);
-                activator.setAttribute("tabindex", "0"); // enable focus
-            }
-        };
-        var addListeners = function () {
-            var _a;
-            if ((_a = shadowRef === null || shadowRef === void 0 ? void 0 : shadowRef.current) === null || _a === void 0 ? void 0 : _a.nextElementSibling) {
-                var activator = shadowRef.current.nextElementSibling;
-                activator.addEventListener("mouseenter", showTooltip);
-                activator.addEventListener("mouseleave", hideTooltip);
-                activator.addEventListener("focus", showTooltip);
-                activator.addEventListener("blur", hideTooltip);
-            }
-        };
-        var removeListeners = function () {
-            var _a;
-            if ((_a = shadowRef === null || shadowRef === void 0 ? void 0 : shadowRef.current) === null || _a === void 0 ? void 0 : _a.nextElementSibling) {
-                var activator = shadowRef.current.nextElementSibling;
-                activator.removeEventListener("mouseenter", showTooltip);
-                activator.removeEventListener("mouseleave", hideTooltip);
-                activator.removeEventListener("focus", showTooltip);
-                activator.removeEventListener("blur", hideTooltip);
-            }
-        };
-        React.useLayoutEffect(function () {
-            injectAttributes();
-            addListeners();
-            return function () {
-                removeListeners();
-            };
-        }, []);
-    }
-}
-function TooltipPortal(_a) {
-    var children = _a.children;
-    return ReactDOM__default.createPortal(children, document.body);
-}
-
-exports.Tooltip = Tooltip;
+exports.Tooltip = Tooltip.Tooltip;

package/dist/Tooltip/useTooltipPositioning.d.ts

@@ -1,18 +1,18 @@
-/// <reference types="react" />
-export declare function useTooltipPositioning(): {
-    placement: "auto" | "auto-start" | "auto-end" | "top" | "bottom" | "right" | "left" | "top-start" | "top-end" | "bottom-start" | "bottom-end" | "right-start" | "right-end" | "left-start" | "left-end" | undefined;
-    shadowRef: import("react").RefObject<HTMLSpanElement>;
-    setArrowRef: import("react").Dispatch<import("react").SetStateAction<HTMLDivElement | null | undefined>>;
-    setTooltipRef: import("react").Dispatch<import("react").SetStateAction<HTMLDivElement | null | undefined>>;
-    styles: {
-        [key: string]: import("react").CSSProperties;
-    };
-    attributes: {
-        [key: string]: {
-            [key: string]: string;
-        } | undefined;
-    };
-    state: import("@popperjs/core").State | null;
-    update: (() => Promise<Partial<import("@popperjs/core").State>>) | null;
-    forceUpdate: (() => void) | null;
-};
+/// <reference types="react" />
+export declare function useTooltipPositioning(): {
+    placement: "top" | "bottom" | "right" | "left" | "auto" | "auto-start" | "auto-end" | "top-start" | "top-end" | "bottom-start" | "bottom-end" | "right-start" | "right-end" | "left-start" | "left-end" | undefined;
+    shadowRef: import("react").RefObject<HTMLSpanElement>;
+    setArrowRef: import("react").Dispatch<import("react").SetStateAction<HTMLDivElement | null | undefined>>;
+    setTooltipRef: import("react").Dispatch<import("react").SetStateAction<HTMLDivElement | null | undefined>>;
+    styles: {
+        [key: string]: import("react").CSSProperties;
+    };
+    attributes: {
+        [key: string]: {
+            [key: string]: string;
+        } | undefined;
+    };
+    state: import("@popperjs/core").State | null;
+    update: (() => Promise<Partial<import("@popperjs/core").State>>) | null;
+    forceUpdate: (() => void) | null;
+};

package/dist/Tooltip-4396164d.js

@@ -0,0 +1,116 @@
+'use strict';
+
+var tslib_es6 = require('./tslib.es6-5b50eb8e.js');
+var React = require('react');
+var classnames = require('classnames');
+var ReactDOM = require('react-dom');
+var framerMotion = require('framer-motion');
+var styleInject_es = require('./style-inject.es-dcee06b6.js');
+var reactPopper = require('react-popper');
+var Text = require('./Text-9bc093e9.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var classnames__default = /*#__PURE__*/_interopDefaultLegacy(classnames);
+var ReactDOM__default = /*#__PURE__*/_interopDefaultLegacy(ReactDOM);
+
+var css = ":root {\n  --tooltip--arrow-size: var(--space-small);\n  --tooltip--offset: calc(-1 * calc(var(--space-smaller) + 1px));\n}\n\n._2IKuYsqwWWH9A-WgJDR61q {\n  display: none;\n}\n\n._2fkHxHwiJK9AkUMCIPucCJ {\n  display: inline-block;\n  position: absolute;\n  z-index: var(--elevation-tooltip);\n}\n\n._2YpF1qO7J5ncFlfoW0hA1L {\n  display: inline-block;\n  position: relative;\n  max-width: calc(var(--base-unit) * 15);\n  padding: var(--space-small);\n  border: var(--border-base) solid var(--color-informative);\n  border-radius: var(--radius-base);\n  background-color: var(--color-informative--surface);\n}\n\n._2YpF1qO7J5ncFlfoW0hA1L ._3DjyKsZFiUA0QD18ABsimd,\n._2YpF1qO7J5ncFlfoW0hA1L ._3DjyKsZFiUA0QD18ABsimd::after {\n  width: var(--space-small);\n  width: var(--space-small);\n  width: var(--tooltip--arrow-size);\n  height: var(--space-small);\n  height: var(--space-small);\n  height: var(--tooltip--arrow-size);\n  background-color: inherit;\n}\n\n._2YpF1qO7J5ncFlfoW0hA1L ._3DjyKsZFiUA0QD18ABsimd::after {\n  content: \"\";\n  display: block;\n  position: absolute;\n  border: var(--border-base) solid var(--color-informative);\n  -webkit-transform: rotate(45deg);\n          transform: rotate(45deg);\n}\n\n._3VkJmaX3T1x98A59lZbEa5 {\n  padding-bottom: var(--space-small);\n}\n\n._3VkJmaX3T1x98A59lZbEa5 ._2YpF1qO7J5ncFlfoW0hA1L {\n  -webkit-transform-origin: bottom center;\n          transform-origin: bottom center;\n}\n\n._3VkJmaX3T1x98A59lZbEa5 ._2YpF1qO7J5ncFlfoW0hA1L ._3DjyKsZFiUA0QD18ABsimd {\n  bottom: calc(-1 * calc(var(--space-smaller) + 1px));\n  bottom: calc(-1 * calc(var(--space-smaller) + 1px));\n  bottom: var(--tooltip--offset);\n}\n\n._3VkJmaX3T1x98A59lZbEa5 ._2YpF1qO7J5ncFlfoW0hA1L ._3DjyKsZFiUA0QD18ABsimd::after {\n  border-top-width: 0;\n  border-left-width: 0;\n}\n\n.QtIXawS3dVhY8j2NKSZLY {\n  padding-top: var(--space-small);\n}\n\n.QtIXawS3dVhY8j2NKSZLY ._2YpF1qO7J5ncFlfoW0hA1L {\n  -webkit-transform-origin: top center;\n          transform-origin: top center;\n}\n\n.QtIXawS3dVhY8j2NKSZLY ._2YpF1qO7J5ncFlfoW0hA1L ._3DjyKsZFiUA0QD18ABsimd {\n  top: calc(-1 * calc(var(--space-smaller) + 1px));\n  top: calc(-1 * calc(var(--space-smaller) + 1px));\n  top: var(--tooltip--offset);\n}\n\n.QtIXawS3dVhY8j2NKSZLY ._2YpF1qO7J5ncFlfoW0hA1L ._3DjyKsZFiUA0QD18ABsimd::after {\n  border-bottom-width: 0;\n  border-right-width: 0;\n}\n";
+var styles = {"shadowActivator":"_2IKuYsqwWWH9A-WgJDR61q","tooltipWrapper":"_2fkHxHwiJK9AkUMCIPucCJ","tooltip":"_2YpF1qO7J5ncFlfoW0hA1L","arrow":"_3DjyKsZFiUA0QD18ABsimd","above":"_3VkJmaX3T1x98A59lZbEa5","below":"QtIXawS3dVhY8j2NKSZLY"};
+styleInject_es.styleInject(css);
+
+function useTooltipPositioning() {
+    var _a, _b;
+    var shadowRef = React.useRef(null);
+    var _c = tslib_es6.__read(React.useState(), 2), positionElement = _c[0], setTooltipRef = _c[1];
+    var _d = tslib_es6.__read(React.useState(), 2), arrowElement = _d[0], setArrowRef = _d[1];
+    var popper = reactPopper.usePopper((_a = shadowRef.current) === null || _a === void 0 ? void 0 : _a.nextElementSibling, positionElement, {
+        placement: "top",
+        modifiers: [
+            { name: "flip", options: { fallbackPlacements: ["bottom"] } },
+            {
+                name: "arrow",
+                options: { element: arrowElement },
+            },
+        ],
+    });
+    return tslib_es6.__assign(tslib_es6.__assign({}, popper), { placement: (_b = popper.state) === null || _b === void 0 ? void 0 : _b.placement, shadowRef: shadowRef,
+        setArrowRef: setArrowRef,
+        setTooltipRef: setTooltipRef });
+}
+
+var variation = {
+    startOrStop: { scale: 0.6, opacity: 0 },
+    done: { scale: 1, opacity: 1 },
+};
+function Tooltip(_a) {
+    var message = _a.message, children = _a.children;
+    var _b = tslib_es6.__read(React.useState(false), 2), show = _b[0], setShow = _b[1];
+    var _c = useTooltipPositioning(), attributes = _c.attributes, placement = _c.placement, shadowRef = _c.shadowRef, popperStyles = _c.styles, setArrowRef = _c.setArrowRef, setTooltipRef = _c.setTooltipRef;
+    initializeListeners();
+    var toolTipClassNames = classnames__default["default"](styles.tooltipWrapper, placement === "bottom" && styles.below, placement === "top" && styles.above);
+    return (React__default["default"].createElement(React__default["default"].Fragment, null,
+        React__default["default"].createElement("span", { className: styles.shadowActivator, ref: shadowRef }),
+        children,
+        React__default["default"].createElement(TooltipPortal, null, show && (React__default["default"].createElement("div", tslib_es6.__assign({ className: toolTipClassNames, style: popperStyles.popper, ref: setTooltipRef, role: "tooltip" }, attributes.popper),
+            React__default["default"].createElement(framerMotion.motion.div, { className: styles.tooltip, variants: variation, initial: "startOrStop", animate: "done", exit: "startOrStop", transition: {
+                    type: "spring",
+                    damping: 20,
+                    stiffness: 300,
+                } },
+                React__default["default"].createElement(Text.Text, null, message),
+                React__default["default"].createElement("div", { ref: setArrowRef, style: popperStyles.arrow, className: styles.arrow })))))));
+    function initializeListeners() {
+        var showTooltip = function () {
+            setShow(true);
+        };
+        var hideTooltip = function () {
+            setShow(false);
+        };
+        var injectAttributes = function () {
+            var _a;
+            if ((_a = shadowRef === null || shadowRef === void 0 ? void 0 : shadowRef.current) === null || _a === void 0 ? void 0 : _a.nextElementSibling) {
+                var activator = shadowRef.current.nextElementSibling;
+                // Manually inject "aria-description" and "tabindex" to let the screen
+                // readers read the tooltip message.
+                // This is to avoid having to add those attribute as a prop on every
+                // component we have.
+                activator.setAttribute("aria-description", message);
+                activator.setAttribute("tabindex", "0"); // enable focus
+            }
+        };
+        var addListeners = function () {
+            var _a;
+            if ((_a = shadowRef === null || shadowRef === void 0 ? void 0 : shadowRef.current) === null || _a === void 0 ? void 0 : _a.nextElementSibling) {
+                var activator = shadowRef.current.nextElementSibling;
+                activator.addEventListener("mouseenter", showTooltip);
+                activator.addEventListener("mouseleave", hideTooltip);
+                activator.addEventListener("focus", showTooltip);
+                activator.addEventListener("blur", hideTooltip);
+            }
+        };
+        var removeListeners = function () {
+            var _a;
+            if ((_a = shadowRef === null || shadowRef === void 0 ? void 0 : shadowRef.current) === null || _a === void 0 ? void 0 : _a.nextElementSibling) {
+                var activator = shadowRef.current.nextElementSibling;
+                activator.removeEventListener("mouseenter", showTooltip);
+                activator.removeEventListener("mouseleave", hideTooltip);
+                activator.removeEventListener("focus", showTooltip);
+                activator.removeEventListener("blur", hideTooltip);
+            }
+        };
+        React.useLayoutEffect(function () {
+            injectAttributes();
+            addListeners();
+            return function () {
+                removeListeners();
+            };
+        }, []);
+    }
+}
+function TooltipPortal(_a) {
+    var children = _a.children;
+    return ReactDOM__default["default"].createPortal(children, document.body);
+}
+
+exports.Tooltip = Tooltip;

package/dist/Typography/Typography.d.ts

@@ -1,38 +1,38 @@
-import { ReactNode } from "react";
-import fontSizes from "./css/FontSizes.css";
-import fontWeights from "./css/FontWeights.css";
-import textCases from "./css/TextCases.css";
-import textColors from "./css/TextColors.css";
-import emphasis from "./css/Emphasis.css";
-import alignment from "./css/TextAlignment.css";
-import fontFamilies from "./css/FontFamilies.css";
-interface TypographyProps {
-    readonly id?: string;
-    /**
-     * @default "p"
-     */
-    readonly element?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "p" | "b" | "em" | "dd" | "dt" | "strong" | "span";
-    readonly size?: keyof typeof fontSizes;
-    /**
-     * Aside from changing the font weights, this also changes the font family.
-     * Source sans for `regular` and `bold`.
-     * Poppins for `extraBold` and `black`.
-     * @default "regular"
-     */
-    readonly fontWeight?: keyof typeof fontWeights;
-    readonly textCase?: keyof typeof textCases;
-    readonly textColor?: keyof typeof textColors;
-    readonly emphasisType?: keyof typeof emphasis;
-    /**
-     * Sets the alignment to start, center, or end.
-     * In LTR scripts this equates to left, center, or right.
-     * @default "start"
-     */
-    readonly align?: keyof typeof alignment;
-    readonly fontFamily?: keyof typeof fontFamilies;
-    readonly children: ReactNode;
-    numberOfLines?: number;
-}
-export declare type TypographyOptions = Omit<TypographyProps, "children">;
-export declare function Typography({ id, children, element: Tag, size, align, fontWeight, textCase, textColor, emphasisType, numberOfLines, fontFamily, }: TypographyProps): JSX.Element;
-export {};
+import { ReactNode } from "react";
+import fontSizes from "./css/FontSizes.css";
+import fontWeights from "./css/FontWeights.css";
+import textCases from "./css/TextCases.css";
+import textColors from "./css/TextColors.css";
+import emphasis from "./css/Emphasis.css";
+import alignment from "./css/TextAlignment.css";
+import fontFamilies from "./css/FontFamilies.css";
+interface TypographyProps {
+    readonly id?: string;
+    /**
+     * @default "p"
+     */
+    readonly element?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "p" | "b" | "em" | "dd" | "dt" | "strong" | "span";
+    readonly size?: keyof typeof fontSizes;
+    /**
+     * Aside from changing the font weights, this also changes the font family.
+     * Source sans for `regular` and `bold`.
+     * Poppins for `extraBold` and `black`.
+     * @default "regular"
+     */
+    readonly fontWeight?: keyof typeof fontWeights;
+    readonly textCase?: keyof typeof textCases;
+    readonly textColor?: keyof typeof textColors;
+    readonly emphasisType?: keyof typeof emphasis;
+    /**
+     * Sets the alignment to start, center, or end.
+     * In LTR scripts this equates to left, center, or right.
+     * @default "start"
+     */
+    readonly align?: keyof typeof alignment;
+    readonly fontFamily?: keyof typeof fontFamilies;
+    readonly children: ReactNode;
+    numberOfLines?: number;
+}
+export declare type TypographyOptions = Omit<TypographyProps, "children">;
+export declare function Typography({ id, children, element: Tag, size, align, fontWeight, textCase, textColor, emphasisType, numberOfLines, fontFamily, }: TypographyProps): JSX.Element;
+export {};

package/dist/Typography/index.d.ts

@@ -1 +1 @@
-export * from "./Typography";
+export * from "./Typography";