@jobber/components 5.1.4 → 5.2.0

package/dist/styles.css

@@ -1,3 +1,79 @@
+.FVK4VwhLaVQ- {
+  position: relative;
+  z-index: 1003;
+  z-index: var(--elevation-toast);
+}
+
+.MUXYGaC7Msg- {
+  display: -ms-flexbox;
+  display: flex;
+  position: fixed;
+  right: 0;
+  bottom: calc(16px * 1.5);
+  bottom: var(--space-large);
+  left: 0;
+  z-index: 1003;
+  z-index: var(--elevation-toast);
+  width: 100%;
+  box-sizing: border-box;
+  -ms-flex-direction: column;
+      flex-direction: column;
+  -ms-flex-align: center;
+      align-items: center;
+  padding: 0 calc(16px * 1.5);
+  padding: 0 var(--space-large);
+  color: rgba(255, 255, 255, 1);
+  color: var(--color-text--reverse);
+  font-size: calc(16px * 1);
+  font-size: var(--typography--fontSize-large);
+  pointer-events: none;
+}
+
+.yCRa7jHH33M- {
+  box-shadow: 0px calc(16px * 1) calc(16px * 1) 0px
+      rgba(0, 0, 0, 0.075),
+    0px 0px calc(16px / 2) 0px rgba(0, 0, 0, 0.05);
+  box-shadow: var(--shadow-high);
+  overflow: hidden;
+  pointer-events: all;
+}
+
+.yCRa7jHH33M- + .yCRa7jHH33M- {
+  margin-top: calc(16px * 1);
+  margin-top: var(--space-base);
+}
+
+.KiJL-VNZ3Sg- {
+  display: -ms-flexbox;
+  display: flex;
+  gap: calc(16px / 2);
+  gap: var(--space-small);
+  -ms-flex-align: center;
+      align-items: center;
+  padding: calc(16px / 4) calc(16px / 4) calc(16px / 4);
+  padding: var(--space-smaller) var(--space-smaller) var(--space-smaller);
+  padding-left: calc((16px / 2) + (16px / 4));
+  padding-left: calc(calc(16px / 2) + calc(16px / 4));
+  padding-left: calc(var(--space-small) + var(--space-smaller));
+  border-radius: 8px;
+  border-radius: var(--radius-base);
+  background: rgb(1, 40, 55);
+  background: var(--color-surface--reverse);
+}
+
+/* Use of !important to make the button icon visible in
+   the reverse color scheme of Toast */
+
+.cExoS0APILs- * path {
+  fill: rgb(78, 105, 116) !important;
+  fill: var(--color-text--secondary) !important;
+}
+
+.cExoS0APILs-:hover * path {
+  fill: rgba(101, 120, 132, 1) !important;
+  fill: var(--color-greyBlue) !important;
+}
+
 .v0Cys9vQ-NE- {
   position: relative;
   width: 100%;
@@ -452,9 +528,9 @@
   display: -ms-flexbox;
 
   display: flex;
+  -ms-flex-direction: column;
+      flex-direction: column;
   width: 100%;
-  height: calc(16px * 3);
-  height: var(--field--height);
   border: calc(16px / 16) solid rgb(218, 224, 226);
   border: var(--border-base) solid var(--field--border-color);
   border-radius: 8px;
@@ -488,6 +564,15 @@
   box-shadow: var(--shadow-focus);
 }
 
+.q7AxfhwVVBs- {
+  display: -ms-flexbox;
+  display: flex;
+  width: 100%;
+  height: var(--field--height);
+  -ms-flex: 1;
+      flex: 1;
+}
+
 .YhserUiOeFE-:not(:focus-within) input {
   color: var(--field--background-color);
   -webkit-text-fill-color: var(--field--background-color);
@@ -507,13 +592,17 @@
   --field--padding-top: calc(var(--space-large) + var(--space-smaller));
 }
 
-.nPGhTEEzsoU-.mgPacJ6Z71Y- {
+.nPGhTEEzsoU-.e4VYDAkWHAg- {
   --field--placeholder-offset: 0;
   --field--placeholder-transform: 0;
-  height: auto;
   min-height: auto;
 }
 
+.nPGhTEEzsoU-.mgPacJ6Z71Y- {
+  resize: vertical;
+  overflow: auto;
+}
+
 .gJ-15M615eY-,
 .gJ-15M615eY-:focus-within {
   --field--border-color: var(--color-critical);
@@ -609,7 +698,6 @@
   position: relative;
   z-index: var(--field--base-elevation);
   width: 100%;
-  height: 100%;
   padding-top: var(--field--padding-top);
   padding-bottom: var(--field--padding-bottom);
   padding-left: var(--field--padding-left);
@@ -630,8 +718,20 @@
   outline: none;
 }
 
+.mgPacJ6Z71Y- .Yo2Wi9dpa-Y- {
+  display: -ms-flexbox;
+  display: flex;
+  min-height: var(--field--height);
+  -ms-flex-direction: column;
+      flex-direction: column;
+}
+
 .mgPacJ6Z71Y- .LSHPV7PwOTg- {
-  resize: vertical;
+  -ms-flex: 1;
+      flex: 1;
+  resize: none;
+  scroll-padding-bottom: calc(16px * 1);
+  scroll-padding-bottom: var(--space-base);
 }
 
 .i31GQXcMz54- .LSHPV7PwOTg- {
@@ -678,14 +778,17 @@
   padding-right: calc(var(--field--padding-right) + var(--base-unit) * 2);
 }
 
+.e4VYDAkWHAg- ._3xREbTN5pPg- {
+  padding-top: var(--field--padding-top);
+  -webkit-transform: translateY(var(--field--placeholder-transform));
+          transform: translateY(var(--field--placeholder-transform));
+}
+
 .mgPacJ6Z71Y- ._3xREbTN5pPg- {
   /* Changes the width so that the scrollbar on the textarea doesn't get cut off */
   width: calc(100% - var(--field--padding-right));
-  padding-top: var(--field--padding-top);
   /* Remove padding on right to make use of the entire width */
   padding-right: 0;
-  -webkit-transform: translateY(var(--field--placeholder-transform));
-          transform: translateY(var(--field--placeholder-transform));
 }
 
 .UIZq8hTmJVU- ._3xREbTN5pPg-,
@@ -695,9 +798,12 @@
   font-size: var(--typography--fontSize-small);
 }
 
-.mgPacJ6Z71Y-.UIZq8hTmJVU- ._3xREbTN5pPg- {
+.e4VYDAkWHAg-.UIZq8hTmJVU- ._3xREbTN5pPg- {
   padding-top: calc(16px / 8);
   padding-top: var(--space-smallest);
+}
+
+.mgPacJ6Z71Y-.UIZq8hTmJVU- ._3xREbTN5pPg- {
   background-color: var(--field--background-color);
 }
 
@@ -745,19 +851,6 @@
   padding: 0 var(--field--padding-right) 0 var(--field--padding-left);
 }
 
-@supports (aspect-ratio: 1/1) {
-  .uPLklxvtfJw- {
-    /*
-     * disabling property-no-unknown here as this is a real property
-     * that stylelint just doesn't know about. We may be able to remove
-     * this when we update our stylelint to not care about IE11.
-     */
-    /* stylelint-disable-next-line property-no-unknown */
-    aspect-ratio: 1/1;
-    padding: 0;
-  }
-}
-
 .uPLklxvtfJw-.pYqqDvv57JE- {
   margin: 0 0 0 calc(var(--field--padding-right) * -1);
 }
@@ -796,6 +889,33 @@
   margin-top: var(--space-smaller);
 }
 
+._3GtIRFCkZMg- {
+  display: -ms-flexbox;
+  display: flex;
+  position: relative;
+  margin: calc(16px / 2) var(--field--padding-right) calc(16px * 1)
+    var(--field--padding-left);
+  margin: var(--space-small) var(--field--padding-right) var(--space-base)
+    var(--field--padding-left);
+}
+
+._3GtIRFCkZMg-::before {
+  content: "";
+  display: block;
+  position: absolute;
+  top: calc(-1.25 * (16px * 1));
+  top: calc(-1.25 * calc(16px * 1));
+  top: calc(-1.25 * var(--space-base));
+  right: 0;
+  left: 0;
+  z-index: 1;
+  z-index: var(--elevation-base);
+  height: calc(16px * 1);
+  height: var(--space-base);
+  background: linear-gradient(to bottom, transparent, rgba(255, 255, 255, 1) 60%);
+  background: linear-gradient(to bottom, transparent, var(--color-surface) 60%);
+}
+
 :root {
   --button--color-variation: var(--color-interactive);
   --button--color-variation--hover: var(--color-interactive--hover);
@@ -1149,15 +1269,6 @@ a.U9VsquOtk2I-.bg-l22drjd0-:hover {
   }
 }
 
-._07kZJ5ltI5E- {
-  display: -ms-flexbox;
-  display: flex;
-  -ms-flex-align: center;
-      align-items: center;
-  padding-left: calc(16px / 2);
-  padding-left: var(--space-small);
-}
-
 .t1fFX8kDJh8- {
   display: -ms-flexbox;
   display: flex;
@@ -1181,6 +1292,8 @@ a.U9VsquOtk2I-.bg-l22drjd0-:hover {
       justify-content: center;
   -ms-flex-align: center;
       align-items: center;
+  -webkit-transform: translateY(50%);
+          transform: translateY(50%);
 }
 
 .t1fFX8kDJh8-:focus {
@@ -8334,79 +8447,3 @@ ul.wdW31G8Trag- {
   padding-right: calc(16px * 1);
   padding-right: var(--public-tab--inset);
 }
-
-.FVK4VwhLaVQ- {
-  position: relative;
-  z-index: 1003;
-  z-index: var(--elevation-toast);
-}
-
-.MUXYGaC7Msg- {
-  display: -ms-flexbox;
-  display: flex;
-  position: fixed;
-  right: 0;
-  bottom: calc(16px * 1.5);
-  bottom: var(--space-large);
-  left: 0;
-  z-index: 1003;
-  z-index: var(--elevation-toast);
-  width: 100%;
-  box-sizing: border-box;
-  -ms-flex-direction: column;
-      flex-direction: column;
-  -ms-flex-align: center;
-      align-items: center;
-  padding: 0 calc(16px * 1.5);
-  padding: 0 var(--space-large);
-  color: rgba(255, 255, 255, 1);
-  color: var(--color-text--reverse);
-  font-size: calc(16px * 1);
-  font-size: var(--typography--fontSize-large);
-  pointer-events: none;
-}
-
-.yCRa7jHH33M- {
-  box-shadow: 0px calc(16px * 1) calc(16px * 1) 0px
-      rgba(0, 0, 0, 0.075),
-    0px 0px calc(16px / 2) 0px rgba(0, 0, 0, 0.05);
-  box-shadow: var(--shadow-high);
-  overflow: hidden;
-  pointer-events: all;
-}
-
-.yCRa7jHH33M- + .yCRa7jHH33M- {
-  margin-top: calc(16px * 1);
-  margin-top: var(--space-base);
-}
-
-.KiJL-VNZ3Sg- {
-  display: -ms-flexbox;
-  display: flex;
-  gap: calc(16px / 2);
-  gap: var(--space-small);
-  -ms-flex-align: center;
-      align-items: center;
-  padding: calc(16px / 4) calc(16px / 4) calc(16px / 4);
-  padding: var(--space-smaller) var(--space-smaller) var(--space-smaller);
-  padding-left: calc((16px / 2) + (16px / 4));
-  padding-left: calc(calc(16px / 2) + calc(16px / 4));
-  padding-left: calc(var(--space-small) + var(--space-smaller));
-  border-radius: 8px;
-  border-radius: var(--radius-base);
-  background: rgb(1, 40, 55);
-  background: var(--color-surface--reverse);
-}
-
-/* Use of !important to make the button icon visible in
-   the reverse color scheme of Toast */
-
-.cExoS0APILs- * path {
-  fill: rgb(78, 105, 116) !important;
-  fill: var(--color-text--secondary) !important;
-}
-
-.cExoS0APILs-:hover * path {
-  fill: rgba(101, 120, 132, 1) !important;
-  fill: var(--color-greyBlue) !important;
-}

package/dist/{useActiveLayout-pK3kqOkB.js → useActiveLayout-CGN3K-VZ.js}

@@ -1,5 +1,5 @@
-import { u as useResponsiveSizing } from './useResponsiveSizing-CVZfj_Zz.js';
-import { u as useDataListContext } from './DataListContext-DMRsu6t3.js';
+import { u as useResponsiveSizing } from './useResponsiveSizing-BuCi04IC.js';
+import { u as useDataListContext } from './DataListContext-sNb5c-VJ.js';
 
 function useActiveLayout() {
     const { layoutBreakpoints, layouts } = useDataListContext();

package/dist/{useActiveLayout-DWEq1yCU.js → useActiveLayout-FejohWuZ.js}

@@ -1,7 +1,7 @@
 'use strict';
 
-var useResponsiveSizing = require('./useResponsiveSizing-g-Gg9oSA.js');
-var DataListContext = require('./DataListContext-C_g5TQQ2.js');
+var useResponsiveSizing = require('./useResponsiveSizing-D8w0T9CC.js');
+var DataListContext = require('./DataListContext-CJevK_NE.js');
 
 function useActiveLayout() {
     const { layoutBreakpoints, layouts } = DataListContext.useDataListContext();

package/dist/{useAssert-DR0CRBvc.js → useAssert-S2g8GFSl.js}

@@ -1,5 +1,5 @@
-import { a as getAugmentedNamespace, c as commonjsGlobal } from './_commonjsHelpers-ZwCII1KZ.js';
-import { _ as _polyfillNode_process } from './_polyfill-node.process-DbS8i7wf.js';
+import { a as getAugmentedNamespace, c as commonjsGlobal } from './_commonjsHelpers-DbzqrCSE.js';
+import { _ as _polyfillNode_process } from './_polyfill-node.process-BTv4F0Wu.js';
 
 var useAssert$1 = {};
 

package/dist/{useAssert-D4bR-RWM.js → useAssert-p1Un-QOQ.js}

@@ -1,7 +1,7 @@
 'use strict';
 
-var _commonjsHelpers = require('./_commonjsHelpers-wR_coaIm.js');
-var _polyfillNode_process = require('./_polyfill-node.process-DERiTOE4.js');
+var _commonjsHelpers = require('./_commonjsHelpers-nhjdfSrh.js');
+var _polyfillNode_process = require('./_polyfill-node.process-DpvXRb7o.js');
 
 var useAssert$1 = {};
 

package/dist/{useBatchSelect-C27OkV3m.js → useBatchSelect-DQ10M64a.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var DataListContext = require('./DataListContext-C_g5TQQ2.js');
+var DataListContext = require('./DataListContext-CJevK_NE.js');
 
 function useBatchSelect() {
     const { selected, onSelect, onSelectAll } = DataListContext.useDataListContext();

package/dist/{useBatchSelect-D7twIwgs.js → useBatchSelect-Dcb4mkPI.js}

@@ -1,4 +1,4 @@
-import { u as useDataListContext } from './DataListContext-DMRsu6t3.js';
+import { u as useDataListContext } from './DataListContext-sNb5c-VJ.js';
 
 function useBatchSelect() {
     const { selected, onSelect, onSelectAll } = useDataListContext();

package/dist/{useIsMounted-B8Oz9QnI.js → useIsMounted-hdjJs1tK.js}

@@ -1,7 +1,7 @@
 'use strict';
 
 var React = require('react');
-var useSafeLayoutEffect$1 = require('./useSafeLayoutEffect-G3QLfyzl.js');
+var useSafeLayoutEffect$1 = require('./useSafeLayoutEffect-CCMFNvpO.js');
 
 var useIsMounted$1 = {};
 

package/dist/{useIsMounted-4L0Wg2jn.js → useIsMounted-w5KblljD.js}

@@ -1,5 +1,5 @@
 import React from 'react';
-import { a as useSafeLayoutEffect$1 } from './useSafeLayoutEffect-DjaPMhn2.js';
+import { a as useSafeLayoutEffect$1 } from './useSafeLayoutEffect-tvCutuXX.js';
 
 var useIsMounted$1 = {};
 

package/dist/{useResizeObserver-g89_A7gf.js → useResizeObserver-httVe-Tj.js}

@@ -1,9 +1,9 @@
 'use strict';
 
-var _commonjsHelpers = require('./_commonjsHelpers-wR_coaIm.js');
+var _commonjsHelpers = require('./_commonjsHelpers-nhjdfSrh.js');
 var React = require('react');
-var debounce$1 = require('./debounce-C6ZfzyIf.js');
-var isObjectLike = require('./isObjectLike-2fhNnGPz.js');
+var debounce$1 = require('./debounce-Bnf4hEiS.js');
+var isObjectLike = require('./isObjectLike-JstvtTq0.js');
 
 function _mergeNamespaces(n, m) {
     m.forEach(function (e) {

package/dist/{useResizeObserver-B3ncXZk_.js → useResizeObserver-qHokk_1R.js}

@@ -1,7 +1,7 @@
-import { a as getAugmentedNamespace, c as commonjsGlobal, g as getDefaultExportFromCjs } from './_commonjsHelpers-ZwCII1KZ.js';
+import { a as getAugmentedNamespace, c as commonjsGlobal, g as getDefaultExportFromCjs } from './_commonjsHelpers-DbzqrCSE.js';
 import React from 'react';
-import { a as debounce_1 } from './debounce-nK8tPN3_.js';
-import { b as isObject_1 } from './isObjectLike-DiXX2xWy.js';
+import { a as debounce_1 } from './debounce-B-2SBoHX.js';
+import { b as isObject_1 } from './isObjectLike-srkRoDpL.js';
 
 function _mergeNamespaces(n, m) {
     m.forEach(function (e) {

package/dist/{useResponsiveSizing-CVZfj_Zz.js → useResponsiveSizing-BuCi04IC.js}

@@ -1,5 +1,5 @@
 import { useCallback, useSyncExternalStore } from 'react';
-import { e as BREAKPOINT_SIZES } from './DataList.const-pZixpeBz.js';
+import { e as BREAKPOINT_SIZES } from './DataList.const-tYOKS1oN.js';
 
 const mediaQueryStore = {
     subscribe(onChange, query) {

package/dist/{useResponsiveSizing-g-Gg9oSA.js → useResponsiveSizing-D8w0T9CC.js}

@@ -1,7 +1,7 @@
 'use strict';
 
 var React = require('react');
-var DataList_const = require('./DataList.const-BF4kbOOb.js');
+var DataList_const = require('./DataList.const-p8ceg6Ai.js');
 
 const mediaQueryStore = {
     subscribe(onChange, query) {

package/dist/{useScrollToActive-CTt2Or_l.js → useScrollToActive-CPcpNMlD.js}

@@ -1,13 +1,13 @@
 import React, { useRef, useId, useState, useEffect } from 'react';
-import { g as getDefaultExportFromCjs } from './_commonjsHelpers-ZwCII1KZ.js';
-import { _ as _overRest, a as _setToString, b as _baseFlatten } from './_setToString-D5SkDZ6r.js';
-import { b as _arrayMap, c as _baseGet, i as identity_1, e as eq_1, d as _isIndex } from './_defineProperty-DxVU8Ksz.js';
-import { _ as _baseEach, a as _baseIteratee } from './_baseEach-BRGylvgO.js';
-import { c as isArrayLike_1, g as _baseUnary, b as isArray_1 } from './_getTag-DN26lOQL.js';
-import { i as isSymbol_1 } from './isSymbol-3zjkjWC0.js';
-import { b as isObject_1 } from './isObjectLike-DiXX2xWy.js';
-import { d as debounce } from './debounce-nK8tPN3_.js';
-import { I as Icon } from './Icon-CqIXt_h2.js';
+import { g as getDefaultExportFromCjs } from './_commonjsHelpers-DbzqrCSE.js';
+import { _ as _overRest, a as _setToString, b as _baseFlatten } from './_setToString-DexPDZlJ.js';
+import { b as _arrayMap, c as _baseGet, i as identity_1, e as eq_1, d as _isIndex } from './_defineProperty-3YJgsTOw.js';
+import { _ as _baseEach, a as _baseIteratee } from './_baseEach-C0EuzQ50.js';
+import { c as isArrayLike_1, g as _baseUnary, b as isArray_1 } from './_getTag-BkmsVho5.js';
+import { i as isSymbol_1 } from './isSymbol-Bqm7fAbO.js';
+import { b as isObject_1 } from './isObjectLike-srkRoDpL.js';
+import { d as debounce } from './debounce-B-2SBoHX.js';
+import { I as Icon } from './Icon-BtAyqPaM.js';
 import { usePopper } from 'react-popper';
 
 var baseEach = _baseEach,

package/dist/{useScrollToActive-CWVFo17g.js → useScrollToActive-D7fSe936.js}

@@ -1,15 +1,15 @@
 'use strict';
 
 var React = require('react');
-var _commonjsHelpers = require('./_commonjsHelpers-wR_coaIm.js');
-var _setToString = require('./_setToString-DB7P-HZX.js');
-var _defineProperty = require('./_defineProperty-U_KziJ5Z.js');
-var _baseEach = require('./_baseEach-CHT0w-eL.js');
-var _getTag = require('./_getTag-DMU3tqpY.js');
-var isSymbol$1 = require('./isSymbol-DxEnSeTx.js');
-var isObjectLike = require('./isObjectLike-2fhNnGPz.js');
-var debounce = require('./debounce-C6ZfzyIf.js');
-var Icon = require('./Icon-DkziW-2D.js');
+var _commonjsHelpers = require('./_commonjsHelpers-nhjdfSrh.js');
+var _setToString = require('./_setToString-CO8cXagN.js');
+var _defineProperty = require('./_defineProperty-B5IFq25F.js');
+var _baseEach = require('./_baseEach-DWl-ytXs.js');
+var _getTag = require('./_getTag-B6gaTb-i.js');
+var isSymbol$1 = require('./isSymbol-B8nwmBwI.js');
+var isObjectLike = require('./isObjectLike-JstvtTq0.js');
+var debounce = require('./debounce-Bnf4hEiS.js');
+var Icon = require('./Icon-BVFuPKYG.js');
 var reactPopper = require('react-popper');
 
 var baseEach = _baseEach._baseEach,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jobber/components",
-  "version": "5.1.4",
+  "version": "5.2.0",
   "license": "MIT",
   "type": "module",
   "main": "dist/index.cjs",
@@ -482,5 +482,5 @@
     "> 1%",
     "IE 10"
   ],
-  "gitHead": "3236c10bb0c0df966ea6131d615214ea665d30dd"
+  "gitHead": "1509a4620d6fb7b7dc0976d3a7f040b06e66d7f1"
 }

package/dist/showToast-BLO_vX7y.js

@@ -1,96 +0,0 @@
-import React, { useState, useEffect, forwardRef, useImperativeHandle, useRef } from 'react';
-import { createRoot } from 'react-dom/client';
-import { AnimatePresence, motion } from 'framer-motion';
-import { I as Icon } from './Icon-CqIXt_h2.js';
-import { B as Button } from './Button-C0_-w97z.js';
-import { T as Typography } from './Typography-DML6tnyc.js';
-
-var styles = {"wrapper":"FVK4VwhLaVQ-","container":"MUXYGaC7Msg-","toast":"yCRa7jHH33M-","slice":"KiJL-VNZ3Sg-","button":"cExoS0APILs-"};
-
-function Toast({ message, variation = "success", action, actionLabel, }) {
-    const [visible, setVisible] = useState(true);
-    const icon = getIcon();
-    let timer;
-    useEffect(() => startTimer(), []);
-    return (React.createElement(AnimatePresence, null, visible && (React.createElement(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,
-            transition: { duration: 0.4 },
-        } },
-        React.createElement("div", { className: styles.slice },
-            React.createElement(Icon, { color: icon.color, name: icon.name }),
-            React.createElement(Typography, { element: "span", size: "large" }, message),
-            action && (React.createElement(Button, { label: `${actionLabel}`, onClick: action, type: "tertiary" })),
-            React.createElement("div", { className: styles.button },
-                React.createElement(Button, { icon: "remove", ariaLabel: "Hide Notification", onClick: handleToastClose, type: "tertiary", variation: "subtle" })))))));
-    function startTimer() {
-        timer = setTimeout(() => handleToastClose(), getTimeout());
-    }
-    function stopTimer() {
-        clearTimeout(timer);
-    }
-    function handleToastClose() {
-        setVisible(false);
-    }
-    function getTimeout() {
-        const min = 5000;
-        const max = 10000;
-        const 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" };
-        }
-    }
-}
-
-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);
-}
-const root = 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.createElement(ToasterOven, Object.assign({}, props)));
-    }
-}
-const ToastContainer = forwardRef(ToastInternal);
-function ToasterOven(props) {
-    const toastRef = useRef();
-    useEffect(() => toastRef.current.add(props));
-    return React.createElement(ToastContainer, { ref: toastRef });
-}
-function ToastInternal(_, ref) {
-    const [toastKey, setToastKey] = useState(0);
-    const [toasts, setToasts] = useState([]);
-    useImperativeHandle(ref, () => ({
-        add: props => {
-            setToastKey(toastKey + 1);
-            setToasts([
-                Object.assign(Object.assign({}, props), { id: toastKey }),
-                ...toasts,
-            ]);
-        },
-    }));
-    return (React.createElement("div", { className: styles.container }, toasts.map(toast => (React.createElement(Toast, Object.assign({}, toast, { key: toast.id }))))));
-}
-
-export { showToast as s };