@jobber/components 3.5.10 → 4.0.1-pre.4

package/dist/{Spinner-e4e9c8eb.js → Spinner-ae4c8a85.js}

@@ -13,13 +13,11 @@ var css = "._2Vxgrs4a5osOKmp9b0i7ud {\n  width: var(--space-larger);\n  height:
 var styles = {"spinner":"_2Vxgrs4a5osOKmp9b0i7ud","animationSpin":"_3bn_eCsItKh7HS1dEQIERv","small":"_3uMtJrFH9VsqhWvHLkG1SQ","inline-left":"_20N4X28gVsanpe8jhUzYxj","inline-right":"_20N4X28gVsanpe8jhUzYxj","inline":"_20N4X28gVsanpe8jhUzYxj"};
 styleInject_es.styleInject(css);
 
-function Spinner(_a) {
-    var _b;
-    var _c = _a.size, size = _c === void 0 ? "base" : _c, inline = _a.inline;
-    var spinnerStyles = classnames__default["default"](styles.spinner, (_b = {},
-        _b[styles.small] = size === "small",
-        _b[styles.inline] = inline,
-        _b));
+function Spinner({ size = "base", inline }) {
+    const spinnerStyles = classnames__default["default"](styles.spinner, {
+        [styles.small]: size === "small",
+        [styles.inline]: inline,
+    });
     return (React__default["default"].createElement("div", { className: spinnerStyles, role: "alert", "aria-busy": true, "aria-label": "loading" }));
 }
 

package/dist/StatusLabel/StatusLabel.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-export declare type StatusType = "success" | "warning" | "critical" | "inactive" | "informative";
+export type StatusType = "success" | "warning" | "critical" | "inactive" | "informative";
 export interface StatusLabelType {
     readonly statusLabel: string;
     readonly statusType?: StatusType;

package/dist/StatusLabel/index.js

@@ -5,9 +5,8 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var React = require('react');
 var classnames = require('classnames');
 var styleInject_es = require('../style-inject.es-dcee06b6.js');
-var Text = require('../Text-e012fb46.js');
-require('../Typography-fbe0ed6e.js');
-require('../tslib.es6-5b50eb8e.js');
+var Text = require('../Text-7ce00adb.js');
+require('../Typography-9262511f.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -18,16 +17,14 @@ var css = ":root {\n  --statusLabel-icon-diameter: calc(var(--space-base) - var(
 var styles = {"statusLabelRow":"NUUO4mR41Qn5Pf0pzjhZe","statusIndicator":"_2XU8xQD0q92o9P2Ej5EdwP","labelTextEndAligned":"_3eQHL9hZlneMfEoGaF0dDv"};
 styleInject_es.styleInject(css);
 
-function StatusLabel(_a) {
-    var label = _a.label, _b = _a.alignment, alignment = _b === void 0 ? "start" : _b, _c = _a.status, status = _c === void 0 ? "inactive" : _c;
-    var containerClassNames = classnames__default["default"](styles.statusLabelRow, alignment === "end" && styles.labelTextEndAligned);
+function StatusLabel({ label, alignment = "start", status = "inactive", }) {
+    const containerClassNames = classnames__default["default"](styles.statusLabelRow, alignment === "end" && styles.labelTextEndAligned);
     return (React__default["default"].createElement("div", { role: "status", className: containerClassNames },
         React__default["default"].createElement(StatusLabelIcon, { status: status }),
         React__default["default"].createElement(Text.Text, { size: "small", align: alignment }, label)));
 }
-function StatusLabelIcon(_a) {
-    var status = _a.status;
-    return (React__default["default"].createElement("div", { style: { backgroundColor: "var(--color-" + status }, className: styles.statusIndicator }));
+function StatusLabelIcon({ status }) {
+    return (React__default["default"].createElement("div", { style: { backgroundColor: `var(--color-${status}` }, className: styles.statusIndicator }));
 }
 
 exports.StatusLabel = StatusLabel;

package/dist/Switch/index.js

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

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 ReactDOM = require('react-dom');
+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,38 +70,42 @@ function Toast(_a) {
     }
 }
 
-function showToast(props) {
-    createDocumentToast(props);
+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);
 }
-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);
+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, Object.assign({}, props)));
     }
-    ReactDOM.render(React__default["default"].createElement(ToasterOven, tslib_es6.__assign({}, props)), target);
 }
-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>>;