@jobber/components 4.0.2 → 4.1.1

package/dist/{Switch-f03b70fc.js → Switch-7ac32f7b.js}

@@ -1,10 +1,9 @@
 'use strict';
 
-var tslib_es6 = require('./tslib.es6-5b50eb8e.js');
 var React = require('react');
 var classnames = require('classnames');
 var styleInject_es = require('./style-inject.es-dcee06b6.js');
-var Typography = require('./Typography-fbe0ed6e.js');
+var Typography = require('./Typography-9262511f.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -15,25 +14,23 @@ var css = ":root {\n  --switch--pipSize: calc(var(--space-base) * 1.875);\n  --s
 var styles = {"track":"_1TYiN0KipS0HguS_tKWfjN","isChecked":"_2FTUgoy1jHHC6Zp3jZiFem","toggle":"_17OASjesGo_G7ojFH6iMvI","label":"_2QoMYBKIeOc4fkTMpeJ-0Y","pip":"JsY6cDqLe8d_25vumz97W","disabled":"_3uDSBuknYCWotuDOq6jYUD"};
 styleInject_es.styleInject(css);
 
-function Switch(_a) {
-    var _b;
-    var providedValue = _a.value, ariaLabel = _a.ariaLabel, name = _a.name, disabled = _a.disabled, onChange = _a.onChange;
-    var _c = tslib_es6.__read(React.useState(false), 2), statefulValue = _c[0], setValue = _c[1];
-    var value = providedValue != undefined ? providedValue : statefulValue;
-    var toggleSwitch = function () {
+function Switch({ value: providedValue, ariaLabel, name, disabled, onChange, }) {
+    const [statefulValue, setValue] = React.useState(false);
+    const value = providedValue != undefined ? providedValue : statefulValue;
+    const toggleSwitch = () => {
         if (disabled) {
             return;
         }
-        var newValue = !value;
+        const newValue = !value;
         onChange && onChange(newValue);
         if (providedValue == undefined) {
             setValue(newValue);
         }
     };
-    var className = classnames__default["default"](styles.track, (_b = {},
-        _b[styles.isChecked] = value,
-        _b[styles.disabled] = disabled,
-        _b));
+    const className = classnames__default["default"](styles.track, {
+        [styles.isChecked]: value,
+        [styles.disabled]: disabled,
+    });
     return (React__default["default"].createElement(React__default["default"].Fragment, null,
         React__default["default"].createElement("button", { id: name, type: "button", role: "switch", "aria-checked": value, "aria-label": ariaLabel, className: className, onClick: toggleSwitch, disabled: disabled },
             React__default["default"].createElement("span", { className: styles.toggle },
@@ -42,9 +39,8 @@ function Switch(_a) {
                 React__default["default"].createElement(Label, { as: "Off", disabled: disabled }))),
         React__default["default"].createElement("input", { name: name, type: "hidden", value: String(value) })));
 }
-function Label(_a) {
-    var as = _a.as, disabled = _a.disabled;
-    var getTextColor = function () {
+function Label({ as, disabled }) {
+    const getTextColor = () => {
         if (disabled) {
             return "grey";
         }

package/dist/Table/index.js

@@ -16,13 +16,11 @@ var css$1 = ".gByR7gRALLoMeErFwXopX {\n  --border-color: var(--color-border);\n
 var styles$1 = {"table":"gByR7gRALLoMeErFwXopX","row":"_2NFX_QOYJa4MyVRCz6JquI","header":"_3KP2hgsyvrNv4nEo3uCeR1","footer":"_1gl1OQ5klhRSWkmB-Q01kt"};
 styleInject_es.styleInject(css$1);
 
-function Table(_a) {
-    var children = _a.children;
+function Table({ children }) {
     return React__default["default"].createElement("table", { className: styles$1.table }, children);
 }
 
-function Row(_a) {
-    var children = _a.children;
+function Row({ children }) {
     return React__default["default"].createElement("tr", { className: styles$1.row }, children);
 }
 
@@ -30,37 +28,31 @@ var css = ".Dq-OQpN9kItKfJsIaTjL6 {\n  padding: var(--horizontal-inset) calc(var
 var styles = {"cell":"Dq-OQpN9kItKfJsIaTjL6","left":"_3bBRzvtoTBozmykVE7XqOe","center":"_1f1IguDUp2Dy3ZhU_LCrgu","right":"_3cxjTRdABFJmE_6huhyU4R","numeric":"_3kcv5Lj_4g1u4sK_yR4QOu"};
 styleInject_es.styleInject(css);
 
-function Cell(_a) {
-    var children = _a.children, _b = _a.align, align = _b === void 0 ? "left" : _b;
-    var className = classnames__default["default"](styles.cell, styles[align]);
+function Cell({ children, align = "left" }) {
+    const className = classnames__default["default"](styles.cell, styles[align]);
     return React__default["default"].createElement("td", { className: className }, children);
 }
 
-function CellNumeric(_a) {
-    var value = _a.value;
+function CellNumeric({ value }) {
     return (React__default["default"].createElement(Cell, { align: "right" },
         React__default["default"].createElement("span", { className: styles.numeric }, value.toString())));
 }
 
-function CellCurrency(_a) {
-    var value = _a.value, _b = _a.currency, currency = _b === void 0 ? undefined : _b;
+function CellCurrency({ value, currency = undefined, }) {
     return React__default["default"].createElement(CellNumeric, { value: formatters.formatCurrency(value, currency) });
 }
 
-function Header(_a) {
-    var children = _a.children;
+function Header({ children }) {
     return (React__default["default"].createElement("thead", { className: styles$1.header },
         React__default["default"].createElement(Row, null, children)));
 }
 
-function Footer(_a) {
-    var children = _a.children;
+function Footer({ children }) {
     return (React__default["default"].createElement("tfoot", { className: styles$1.footer },
         React__default["default"].createElement(Row, null, children)));
 }
 
-function Body(_a) {
-    var children = _a.children;
+function Body({ children }) {
     return React__default["default"].createElement("tbody", null, children);
 }
 

package/dist/Tabs/index.js

@@ -2,11 +2,10 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var tslib_es6 = require('../tslib.es6-5b50eb8e.js');
 var React = require('react');
 var classnames = require('classnames');
 var styleInject_es = require('../style-inject.es-dcee06b6.js');
-var Typography = require('../Typography-fbe0ed6e.js');
+var Typography = require('../Typography-9262511f.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -17,61 +16,56 @@ var css = ":root {\n  --tab--height: calc(var(--space-larger) + var(--space-smal
 var styles = {"tabs":"_1XPiwZ-6hOSsu7HDy5yHmS","overflow":"RnC8r3uAcGujRbYT-p6nj","overflowRight":"_2gWu8IF5c8dDlBnYmABbrH","overflowLeft":"_3PQJmJy2Ol38mhvrp-VAjw","tabRow":"_2SHAj2nQK9vISS7i_Zfxuw","tab":"NClJjJvATDpU-FSQJ6ywe","selected":"_2ijhlnd8EAKFyri-YTtRjw","tabContent":"_3Y4JRV5DrYYp-_haxplE4P"};
 styleInject_es.styleInject(css);
 
-function Tabs(_a) {
-    var _b;
-    var children = _a.children;
-    var _c = tslib_es6.__read(React.useState(0), 2), activeTab = _c[0], setActiveTab = _c[1];
-    var _d = tslib_es6.__read(React.useState(false), 2), overflowRight = _d[0], setOverflowRight = _d[1];
-    var _e = tslib_es6.__read(React.useState(false), 2), overflowLeft = _e[0], setOverflowLeft = _e[1];
-    var tabRow = React.useRef();
-    var overflowClassNames = classnames__default["default"](styles.overflow, (_b = {},
-        _b[styles.overflowRight] = overflowRight,
-        _b[styles.overflowLeft] = overflowLeft,
-        _b));
-    var activateTab = function (index) {
-        return function () {
+function Tabs({ children }) {
+    const [activeTab, setActiveTab] = React.useState(0);
+    const [overflowRight, setOverflowRight] = React.useState(false);
+    const [overflowLeft, setOverflowLeft] = React.useState(false);
+    const tabRow = React.useRef();
+    const overflowClassNames = classnames__default["default"](styles.overflow, {
+        [styles.overflowRight]: overflowRight,
+        [styles.overflowLeft]: overflowLeft,
+    });
+    const activateTab = (index) => {
+        return () => {
             setActiveTab(index);
         };
     };
-    var activeTabProps = React__default["default"].Children.toArray(children)[activeTab].props;
-    var handleOverflowing = function () {
+    const activeTabProps = React__default["default"].Children.toArray(children)[activeTab].props;
+    const handleOverflowing = () => {
         if (tabRow.current) {
-            var scrollWidth = tabRow.current.scrollWidth;
-            var clientWidth = tabRow.current.clientWidth;
-            var maxScroll = scrollWidth - clientWidth;
-            var scrollPos = tabRow.current.scrollLeft;
+            const scrollWidth = tabRow.current.scrollWidth;
+            const clientWidth = tabRow.current.clientWidth;
+            const maxScroll = scrollWidth - clientWidth;
+            const scrollPos = tabRow.current.scrollLeft;
             if (scrollWidth > clientWidth) {
                 setOverflowRight(scrollPos >= 0 && scrollPos != maxScroll);
                 setOverflowLeft(scrollPos > 0 && scrollPos < scrollWidth);
             }
         }
     };
-    React.useEffect(function () {
+    React.useEffect(() => {
         handleOverflowing();
         tabRow.current &&
             tabRow.current.addEventListener("scroll", handleOverflowing);
-        return function () {
+        return () => {
             window.removeEventListener("scroll", handleOverflowing);
         };
     });
     return (React__default["default"].createElement("div", { className: styles.tabs },
         React__default["default"].createElement("div", { className: overflowClassNames },
             React__default["default"].createElement("ul", { role: "tablist", className: styles.tabRow, ref: tabRow },
-                React__default["default"].createElement("li", { role: "presentation" }, React__default["default"].Children.map(children, function (tab, index) { return (React__default["default"].createElement(InternalTab, { label: tab.props.label, selected: activeTab === index, activateTab: activateTab(index), onClick: tab.props.onClick })); })))),
+                React__default["default"].createElement("li", { role: "presentation" }, React__default["default"].Children.map(children, (tab, index) => (React__default["default"].createElement(InternalTab, { label: tab.props.label, selected: activeTab === index, activateTab: activateTab(index), onClick: tab.props.onClick })))))),
         React__default["default"].createElement("section", { role: "tabpanel", className: styles.tabContent, "aria-label": activeTabProps.label }, activeTabProps.children)));
 }
-function Tab(_a) {
-    var label = _a.label;
+function Tab({ label }) {
     return React__default["default"].createElement(React__default["default"].Fragment, null, label);
 }
-function InternalTab(_a) {
-    var _b;
-    var label = _a.label, selected = _a.selected, activateTab = _a.activateTab, _c = _a.onClick, onClick = _c === void 0 ? function () {
-        return;
-    } : _c;
-    var className = classnames__default["default"](styles.tab, (_b = {}, _b[styles.selected] = selected, _b));
-    var color = selected ? "green" : "heading";
-    return (React__default["default"].createElement("button", { type: "button", role: "tab", id: label, className: className, onClick: function (event) {
+function InternalTab({ label, selected, activateTab, onClick = () => {
+    return;
+}, }) {
+    const className = classnames__default["default"](styles.tab, { [styles.selected]: selected });
+    const color = selected ? "green" : "heading";
+    return (React__default["default"].createElement("button", { type: "button", role: "tab", id: label, className: className, onClick: event => {
             activateTab();
             onClick(event);
         } },

package/dist/Text/index.js

@@ -2,10 +2,9 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var Text = require('../Text-e012fb46.js');
+var Text = require('../Text-7ce00adb.js');
 require('react');
-require('../Typography-fbe0ed6e.js');
-require('../tslib.es6-5b50eb8e.js');
+require('../Typography-9262511f.js');
 require('classnames');
 require('../style-inject.es-dcee06b6.js');
 

package/dist/{Text-e012fb46.js → Text-7ce00adb.js}

@@ -1,15 +1,14 @@
 'use strict';
 
 var React = require('react');
-var Typography = require('./Typography-fbe0ed6e.js');
+var Typography = require('./Typography-9262511f.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
-function Text(_a) {
-    var _b = _a.variation, variation = _b === void 0 ? "default" : _b, _c = _a.size, size = _c === void 0 ? "base" : _c, _d = _a.align, align = _d === void 0 ? "start" : _d, children = _a.children, _e = _a.maxLines, maxLines = _e === void 0 ? "unlimited" : _e;
-    var textColors = {
+function Text({ variation = "default", size = "base", align = "start", children, maxLines = "unlimited", }) {
+    const textColors = {
         default: "text",
         subdued: "textSecondary",
         success: "success",
@@ -18,7 +17,7 @@ function Text(_a) {
         info: "informative",
         disabled: "disabled",
     };
-    var maxLineToNumber = {
+    const maxLineToNumber = {
         single: 1,
         small: 2,
         base: 4,

package/dist/Toast/Toast.d.ts

@@ -9,8 +9,8 @@ interface ActionToastProps extends BaseToastProps {
     action(): void;
     actionLabel: string;
 }
-export declare type ToastProps = XOR<BaseToastProps, ActionToastProps>;
-declare type ToastPropsInternal = Omit<ToastProps, "id">;
+export type ToastProps = XOR<BaseToastProps, ActionToastProps>;
+type ToastPropsInternal = Omit<ToastProps, "id">;
 export interface ToastRef {
     add(props: ToastProps): void;
 }

package/dist/Toast/index.js

@@ -2,14 +2,13 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var tslib_es6 = require('../tslib.es6-5b50eb8e.js');
 var React = require('react');
 var client = require('react-dom/client');
 var framerMotion = require('framer-motion');
 var styleInject_es = require('../style-inject.es-dcee06b6.js');
-var Icon = require('../Icon-d5ad1a6d.js');
-var Button = require('../Button-cd30df0f.js');
-var Typography = require('../Typography-fbe0ed6e.js');
+var Icon = require('../Icon-405a216c.js');
+var Button = require('../Button-16e043ec.js');
+var Typography = require('../Typography-9262511f.js');
 require('@jobber/design');
 require('classnames');
 require('react-router-dom');
@@ -22,13 +21,12 @@ var css = "._1jL4uuxcwlNL5YnUj_ua2g {\n  position: relative;\n  z-index: var(--e
 var styles = {"wrapper":"_1jL4uuxcwlNL5YnUj_ua2g","container":"_1OJBJo55SADOx1bC1JQBfB","toast":"_3M3dXN6cHdqE_9yCnTwXuA","slice":"_2JTk_JuoYf4H1PIiFTxwK","icon":"_3kimXYOdDlyI9bxgiFJMgZ","button":"_1izxhu6XCPAQla9emS_Wn_","action":"FMxl_EoRhLki7i_UOLCT4"};
 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 = 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: {
+function Toast({ message, variation = "success", action, actionLabel, }) {
+    const [visible, setVisible] = React.useState(true);
+    const icon = getIcon();
+    let timer;
+    React.useEffect(() => 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: () => stopTimer(), onMouseLeave: () => startTimer(), exit: {
             opacity: 0,
             scale: 0.8,
             height: 0,
@@ -38,11 +36,11 @@ function Toast(_a) {
             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" })),
+            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());
+        timer = setTimeout(() => handleToastClose(), getTimeout());
     }
     function stopTimer() {
         clearTimeout(timer);
@@ -51,9 +49,9 @@ function Toast(_a) {
         setVisible(false);
     }
     function getTimeout() {
-        var min = 5000;
-        var max = 10000;
-        var time = message.length * 200;
+        const min = 5000;
+        const max = 10000;
+        const time = message.length * 200;
         if (time < min)
             return min;
         if (time > max)
@@ -72,41 +70,42 @@ function Toast(_a) {
     }
 }
 
-var targetId = "atlantis-toast-element";
-var target = document.querySelector("#" + targetId);
+const targetId = "atlantis-toast-element";
+let target = document.querySelector(`#${targetId}`);
 if (!target) {
     target = document.createElement("div");
     target.id = targetId;
     target.classList.add(styles.wrapper);
     document.body.appendChild(target);
 }
-var root = client.createRoot(target);
+const root = client.createRoot(target);
 function showToast(props) {
     // Ensure target and body is still there when rendering the toast. This is due
     // to an issue with ReactDOM createRoot assuming document is always there and
     // Jest taking the document down.
     if (document.body.contains(target)) {
-        root.render(React__default["default"].createElement(ToasterOven, tslib_es6.__assign({}, props)));
+        root.render(React__default["default"].createElement(ToasterOven, Object.assign({}, props)));
     }
 }
-var ToastContainer = React.forwardRef(ToastInternal);
+const ToastContainer = React.forwardRef(ToastInternal);
 function ToasterOven(props) {
-    var toastRef = React.useRef();
-    React.useEffect(function () { return toastRef.current.add(props); });
+    const toastRef = React.useRef();
+    React.useEffect(() => 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) {
+    const [toastKey, setToastKey] = React.useState(0);
+    const [toasts, setToasts] = React.useState([]);
+    React.useImperativeHandle(ref, () => ({
+        add: props => {
             setToastKey(toastKey + 1);
-            setToasts(tslib_es6.__spread([
-                tslib_es6.__assign(tslib_es6.__assign({}, props), { id: toastKey })
-            ], toasts));
+            setToasts([
+                Object.assign(Object.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 }))); })));
+    }));
+    return (React__default["default"].createElement("div", { className: styles.container }, toasts.map(toast => (React__default["default"].createElement(Toast, Object.assign({}, toast, { key: toast.id }))))));
 }
 
 exports.showToast = showToast;

package/dist/Tooltip/index.js

@@ -2,16 +2,15 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var Tooltip = require('../Tooltip-041feb00.js');
-require('../tslib.es6-5b50eb8e.js');
+var Tooltip = require('../Tooltip-1090a43d.js');
 require('react');
 require('classnames');
 require('react-dom');
 require('framer-motion');
 require('../style-inject.es-dcee06b6.js');
 require('react-popper');
-require('../Text-e012fb46.js');
-require('../Typography-fbe0ed6e.js');
+require('../Text-7ce00adb.js');
+require('../Typography-9262511f.js');
 
 
 

package/dist/Tooltip/useTooltipPositioning.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 export declare function useTooltipPositioning(): {
-    placement: "top" | "bottom" | "right" | "auto" | "left" | "auto-start" | "auto-end" | "top-start" | "top-end" | "bottom-start" | "bottom-end" | "right-start" | "right-end" | "left-start" | "left-end" | undefined;
+    placement: import("@popperjs/core").Placement | 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>>;

package/dist/{Tooltip-041feb00.js → Tooltip-1090a43d.js}

@@ -1,13 +1,12 @@
 '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-e012fb46.js');
+var Text = require('./Text-7ce00adb.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -21,10 +20,10 @@ 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, {
+    const shadowRef = React.useRef(null);
+    const [positionElement, setTooltipRef] = React.useState();
+    const [arrowElement, setArrowRef] = React.useState();
+    const popper = reactPopper.usePopper((_a = shadowRef.current) === null || _a === void 0 ? void 0 : _a.nextElementSibling, positionElement, {
         placement: "top",
         modifiers: [
             { name: "flip", options: { fallbackPlacements: ["bottom"] } },
@@ -34,25 +33,24 @@ function useTooltipPositioning() {
             },
         ],
     });
-    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 });
+    return Object.assign(Object.assign({}, popper), { placement: (_b = popper.state) === null || _b === void 0 ? void 0 : _b.placement, shadowRef,
+        setArrowRef,
+        setTooltipRef });
 }
 
-var variation = {
+const 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;
+function Tooltip({ message, children }) {
+    const [show, setShow] = React.useState(false);
+    const { attributes, placement, shadowRef, styles: popperStyles, setArrowRef, setTooltipRef, } = useTooltipPositioning();
     initializeListeners();
-    var toolTipClassNames = classnames__default["default"](styles.tooltipWrapper, placement === "bottom" && styles.below, placement === "top" && styles.above);
+    const 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(TooltipPortal, null, show && (React__default["default"].createElement("div", Object.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,
@@ -61,16 +59,16 @@ function Tooltip(_a) {
                 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 () {
+        const showTooltip = () => {
             setShow(true);
         };
-        var hideTooltip = function () {
+        const hideTooltip = () => {
             setShow(false);
         };
-        var injectAttributes = function () {
+        const injectAttributes = () => {
             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;
+                const 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
@@ -79,37 +77,36 @@ function Tooltip(_a) {
                 activator.setAttribute("tabindex", "0"); // enable focus
             }
         };
-        var addListeners = function () {
+        const addListeners = () => {
             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;
+                const activator = shadowRef.current.nextElementSibling;
                 activator.addEventListener("mouseenter", showTooltip);
                 activator.addEventListener("mouseleave", hideTooltip);
                 activator.addEventListener("focus", showTooltip);
                 activator.addEventListener("blur", hideTooltip);
             }
         };
-        var removeListeners = function () {
+        const removeListeners = () => {
             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;
+                const activator = shadowRef.current.nextElementSibling;
                 activator.removeEventListener("mouseenter", showTooltip);
                 activator.removeEventListener("mouseleave", hideTooltip);
                 activator.removeEventListener("focus", showTooltip);
                 activator.removeEventListener("blur", hideTooltip);
             }
         };
-        React.useLayoutEffect(function () {
+        React.useLayoutEffect(() => {
             injectAttributes();
             addListeners();
-            return function () {
+            return () => {
                 removeListeners();
             };
         }, []);
     }
 }
-function TooltipPortal(_a) {
-    var children = _a.children;
+function TooltipPortal({ children }) {
     return ReactDOM__default["default"].createPortal(children, document.body);
 }
 

package/dist/Typography/Typography.d.ts

@@ -33,6 +33,6 @@ interface TypographyProps {
     readonly children: ReactNode;
     numberOfLines?: number;
 }
-export declare type TypographyOptions = Omit<TypographyProps, "children">;
+export 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.js

@@ -2,8 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var Typography = require('../Typography-fbe0ed6e.js');
-require('../tslib.es6-5b50eb8e.js');
+var Typography = require('../Typography-9262511f.js');
 require('react');
 require('classnames');
 require('../style-inject.es-dcee06b6.js');

package/dist/{Typography-fbe0ed6e.js → Typography-9262511f.js}

@@ -1,6 +1,5 @@
 'use strict';
 
-var tslib_es6 = require('./tslib.es6-5b50eb8e.js');
 var React = require('react');
 var classnames = require('classnames');
 var styleInject_es = require('./style-inject.es-dcee06b6.js');
@@ -46,12 +45,11 @@ var css = ".IO8ujZ7qHogIbFAEazAGH {\n  font-family: var(--typography--fontFamily
 var fontFamilies = {"base":"IO8ujZ7qHogIbFAEazAGH","display":"_2VhNxoLIw82qbVgNH2yiv7"};
 styleInject_es.styleInject(css);
 
-function Typography(_a) {
-    var _b;
-    var id = _a.id, children = _a.children, _c = _a.element, Tag = _c === void 0 ? "p" : _c, size = _a.size, align = _a.align, _d = _a.fontWeight, fontWeight = _d === void 0 ? "regular" : _d, textCase = _a.textCase, textColor = _a.textColor, emphasisType = _a.emphasisType, numberOfLines = _a.numberOfLines, fontFamily = _a.fontFamily;
-    var shouldTruncateText = numberOfLines && numberOfLines > 0;
-    var className = classnames__default["default"](styles.base, fontWeights[fontWeight], size && fontSizes[size], textCase && textCases[textCase], textColor && textColors[textColor], emphasisType && emphasis[emphasisType], fontFamily && fontFamilies[fontFamily], shouldTruncateText && truncate.textTruncate, tslib_es6.__assign({}, (align && (_b = {}, _b[alignment[align]] = align !== "start", _b))));
-    var truncateLines;
+/* eslint-disable import/no-internal-modules */
+function Typography({ id, children, element: Tag = "p", size, align, fontWeight = "regular", textCase, textColor, emphasisType, numberOfLines, fontFamily, }) {
+    const shouldTruncateText = numberOfLines && numberOfLines > 0;
+    const className = classnames__default["default"](styles.base, fontWeights[fontWeight], size && fontSizes[size], textCase && textCases[textCase], textColor && textColors[textColor], emphasisType && emphasis[emphasisType], fontFamily && fontFamilies[fontFamily], shouldTruncateText && truncate.textTruncate, Object.assign({}, (align && { [alignment[align]]: align !== `start` })));
+    let truncateLines;
     if (shouldTruncateText) {
         truncateLines = {
             WebkitLineClamp: numberOfLines,