@jobber/components 5.1.3-scottssr-.1 → 5.1.3

package/dist/index.mjs

@@ -1,159 +1,161 @@
-export { A as AnimatedPresence } from './AnimatedPresence-IqEu8uUA.js';
-export { A as AnimatedSwitcher } from './AnimatedSwitcher-CFN4brVd.js';
-export { A as AtlantisContext, a as atlantisContextDefaultValues, u as useAtlantisContext } from './AtlantisContext-CP2q-9W8.js';
-export { A as Autocomplete } from './Autocomplete-C7-QLAyb.js';
-export { A as Avatar } from './Avatar-CRx6_Si4.js';
-export { B as Banner } from './Banner-B1_DnqiM.js';
-export { B as Button } from './Button-BV7GOohB.js';
-export { B as ButtonDismiss } from './ButtonDismiss-D9JeaG1c.js';
-export { C as Card } from './Card-8H84WunI.js';
-export { C as Checkbox } from './Checkbox--MAa1SNg.js';
-export { C as Chip } from './Chip-D-wUJgDa.js';
-export { a as ChipDismissible, C as ChipSelectable } from './ChipDismissible-BBeIEkpS.js';
+export { A as AnimatedPresence } from './AnimatedPresence-Br6yUmB6.js';
+export { A as AnimatedSwitcher } from './AnimatedSwitcher-CNg6AAO-.js';
+export { A as AtlantisContext, a as atlantisContextDefaultValues, u as useAtlantisContext } from './AtlantisContext-BXcsOqy7.js';
+export { A as Autocomplete } from './Autocomplete-BnyUJEht.js';
+export { A as Avatar } from './Avatar-DB5kUNWp.js';
+export { B as Banner } from './Banner-8wJ8Wdos.js';
+export { B as Button } from './Button-C9J52CkE.js';
+export { B as ButtonDismiss } from './ButtonDismiss-BtwiHJfr.js';
+export { C as Card } from './Card-i2M0lhgG.js';
+export { C as Checkbox } from './Checkbox-C-8ULFTC.js';
+export { C as Chip } from './Chip-Mj1eLjuy.js';
+export { a as ChipDismissible, C as ChipSelectable } from './ChipDismissible-B24FHxPM.js';
 import 'react';
 import 'classnames';
-import './useAssert-Dsu_ZHbo.js';
-export { I as Icon } from './Icon-D2ge9gX0.js';
-export { T as Typography } from './Typography-DvuJPpAt.js';
-export { T as Tooltip } from './Tooltip-Dy7mtLqq.js';
-export { C as Chips } from './Chips-DbmC4SL_.js';
-export { C as Combobox } from './Combobox-Cdzzns06.js';
-export { C as ComboboxContextProvider } from './ComboboxProvider-C4irCMza.js';
-export { C as ConfirmationModal } from './ConfirmationModal-BvM2QyMh.js';
-export { C as Content } from './Content-BNOHyiPU.js';
-export { C as Countdown } from './Countdown-Bi4tjE0G.js';
-export { D as DataDump } from './DataDump-KWNwxlXm.js';
-export { D as DataList } from './DataList-Cz8XExEz.js';
-export { D as DataTable } from './DataTable-BdqcRZkY.js';
-import './useResizeObserver-PYWVfauh.js';
+import './useAssert-BRCzYQeF.js';
+export { I as Icon } from './Icon-OZibx43U.js';
+export { T as Typography } from './Typography-CFMQeqhD.js';
+export { T as Tooltip } from './Tooltip-BVwWosKJ.js';
+export { C as Chips } from './Chips-7huCWCz_.js';
+export { C as Combobox } from './Combobox-CkN7H-DZ.js';
+export { C as ComboboxContextProvider } from './ComboboxProvider-CqdAqCaM.js';
+export { C as ConfirmationModal } from './ConfirmationModal-BkiVNcsI.js';
+export { C as Content } from './Content-DMmIV939.js';
+export { C as Countdown } from './Countdown-34iFY-YW.js';
+export { D as DataDump } from './DataDump-iQvkDsyc.js';
+export { D as DataList } from './DataList-CCpgA2QI.js';
+export { D as DataTable } from './DataTable-CFs7-Q2q.js';
+import './useResizeObserver-CsoX86Oc.js';
 export { createColumnHelper } from '@tanstack/react-table';
-export { D as DatePicker } from './DatePicker-BhaFcwdL.js';
-export { D as DescriptionList } from './DescriptionList-DRJ1NqI3.js';
-export { D as Disclosure } from './Disclosure-Bf_Hrdk1.js';
-export { D as Divider } from './Divider-CzY6NLcF.js';
-export { D as Drawer, a as DrawerGrid } from './DrawerGrid-BOv2HoBI.js';
-export { E as Emphasis } from './Emphasis-BvSXoZjm.js';
-export { F as FeatureSwitch } from './FeatureSwitch-CU_HBzLt.js';
-export { F as Flex } from './Flex-CSNHBJCw.js';
-export { F as Form } from './Form-Dkc3m7bS.js';
-export { F as FormField } from './FormField-DqnVEP6B.js';
-export { F as FormatDate, s as strFormatDate } from './FormatDate-C6h_MK1W.js';
-export { F as FormatEmail } from './FormatEmail-Da54ppqY.js';
-export { F as FormatFile } from './FormatFile-wekpR3Gf.js';
-export { F as FormatRelativeDateTime } from './FormatRelativeDateTime-DazBLKjI.js';
-export { F as FormatTime } from './FormatTime-CK0mRHMF.js';
-export { G as Gallery } from './Gallery-C_FI2tjE.js';
-export { a as GLIMMER_TEST_ID, G as Glimmer } from './Glimmer-Bv-6DpN7.js';
-export { G as GRID_TEST_ID, a as Grid } from './Grid-BtLDmnSf.js';
-export { H as Heading } from './Heading-CgDWT2Vn.js';
-export { I as InlineLabel } from './InlineLabel-Ba9neCfx.js';
-export { I as InputAvatar } from './InputAvatar-BtjJb0s1.js';
-export { I as InputDate } from './InputDate-Blmv5nqf.js';
-export { I as InputEmail, v as validationMessage } from './InputEmail-D-lJehNg.js';
-export { I as InputFile, u as updateFiles } from './InputFile-C7MKk0ub.js';
-export { I as InputGroup } from './InputGroup-D6N3XbXm.js';
-export { I as InputNumber } from './InputNumber-ShoXf9jL.js';
-export { I as InputPassword } from './InputPassword-MDTwCFVf.js';
-export { I as InputPhoneNumber } from './InputPhoneNumber-DXohSlPC.js';
-export { I as InputText } from './InputText-i-X9qDzZ.js';
-export { I as InputTime } from './InputTime-J9-59L2h.js';
-export { I as InputValidation } from './InputValidation-Ds-dMoD-.js';
-export { L as LightBox } from './LightBox-DTz3PXtr.js';
-export { L as Link } from './Link-BtnInZde.js';
-export { L as List, a as ListItem } from './List-2yLwKCsF.js';
-export { M as Markdown } from './Markdown-Dyw3AiVB.js';
-export { M as Menu } from './Menu-DLZ7Rahi.js';
-export { M as Modal } from './Modal-B44QJcXx.js';
-export { M as MultiSelect } from './MultiSelect-B5hpmvQ9.js';
-export { P as Page } from './Page-BHqD2Fs9.js';
-export { P as Popover } from './Popover-jbm6aRzW.js';
-export { P as ProgressBar } from './ProgressBar-ltJdvFN-.js';
-export { R as RadioGroup, a as RadioOption } from './RadioGroup-qZRNH9X0.js';
-export { R as RecurringSelect } from './RecurringSelect-QVRgksHX.js';
-export { D as DurationPeriod, W as WeekDay } from './DayOfMonthSelect-t8LSqk7L.js';
-export { a as Option, S as Select } from './Option-7hgHwaEZ.js';
-export { S as Spinner } from './Spinner-Bjwg8ID8.js';
-export { S as StatusIndicator } from './StatusIndicator-CirtIL-P.js';
-export { S as StatusLabel } from './StatusLabel-Cq1gI1Ra.js';
-export { S as Switch } from './Switch-DA1w3H7J.js';
-export { B as Body, C as Cell, b as CellCurrency, a as CellNumeric, F as Footer, H as Header, R as Row, T as Table } from './Body-BUScojSS.js';
-export { a as Tab, T as Tabs } from './Tabs-U_mkzigt.js';
-export { T as Text } from './Text-DAgWH55Q.js';
+export { D as DatePicker } from './DatePicker-C7QZae3M.js';
+export { D as DescriptionList } from './DescriptionList-DC1e-pp7.js';
+export { D as Disclosure } from './Disclosure-C043z0pO.js';
+export { D as Divider } from './Divider-6BSyOgRd.js';
+export { D as Drawer, a as DrawerGrid } from './DrawerGrid-DFjjtLrO.js';
+export { E as Emphasis } from './Emphasis-BGUAnC5O.js';
+export { F as FeatureSwitch } from './FeatureSwitch-D9mn02Sy.js';
+export { F as Flex } from './Flex-Cs_zTGaV.js';
+export { F as Form } from './Form-Clwj_-vz.js';
+export { F as FormField } from './FormField-Digi9e2a.js';
+export { F as FormatDate, s as strFormatDate } from './FormatDate-CzG7c9P_.js';
+export { F as FormatEmail } from './FormatEmail-DK6cEbDV.js';
+export { F as FormatFile } from './FormatFile-CEOx11XS.js';
+export { F as FormatRelativeDateTime } from './FormatRelativeDateTime-aPmTKh0m.js';
+export { F as FormatTime } from './FormatTime-BS8wFmCV.js';
+export { G as Gallery } from './Gallery-CG6UX_pb.js';
+export { a as GLIMMER_TEST_ID, G as Glimmer } from './Glimmer-DeFL7aVt.js';
+export { G as GRID_TEST_ID, a as Grid } from './Grid-ZrKxn_QR.js';
+export { H as Heading } from './Heading-CXcDLwx_.js';
+export { I as InlineLabel } from './InlineLabel-D3X84reU.js';
+export { I as InputAvatar } from './InputAvatar-CFIAPI9d.js';
+export { I as InputDate } from './InputDate-CgWmAkCS.js';
+export { I as InputEmail, v as validationMessage } from './InputEmail-ByUjZ4J3.js';
+export { I as InputFile, u as updateFiles } from './InputFile-UwiKk7Qx.js';
+export { I as InputGroup } from './InputGroup-DJUXVMky.js';
+export { I as InputNumber } from './InputNumber-C5LtmRH-.js';
+export { I as InputPassword } from './InputPassword-6ObsDYP8.js';
+export { I as InputPhoneNumber } from './InputPhoneNumber-OoBSBbaS.js';
+export { I as InputText } from './InputText-CRJRXOHy.js';
+export { I as InputTime } from './InputTime-CRVoRAH6.js';
+export { I as InputValidation } from './InputValidation-BG2qdvJb.js';
+export { L as LightBox } from './LightBox-bvmloWjK.js';
+export { L as Link } from './Link-CJJ2hO3d.js';
+export { L as List, a as ListItem } from './List-N7RhQ6xu.js';
+export { M as Markdown } from './Markdown-CA2dtbxm.js';
+export { M as Menu } from './Menu-Deopaqpz.js';
+export { M as Modal } from './Modal-oTgFx8Zb.js';
+export { M as MultiSelect } from './MultiSelect-BnwmIo0l.js';
+export { P as Page } from './Page-aCvSbDAd.js';
+export { P as Popover } from './Popover-DquZ6HDU.js';
+export { P as ProgressBar } from './ProgressBar-B-jN977g.js';
+export { R as RadioGroup, a as RadioOption } from './RadioGroup-DGKMiDZ0.js';
+export { R as RecurringSelect } from './RecurringSelect-CRJIREcE.js';
+export { D as DurationPeriod, W as WeekDay } from './DayOfMonthSelect-hcl8bQUt.js';
+export { a as Option, S as Select } from './Option-Co5EKho6.js';
+export { S as Spinner } from './Spinner-uFiabCF5.js';
+export { S as StatusIndicator } from './StatusIndicator-Dr1ltDFL.js';
+export { S as StatusLabel } from './StatusLabel-CyyhhiGv.js';
+export { S as Switch } from './Switch-DoIDW663.js';
+export { B as Body, C as Cell, b as CellCurrency, a as CellNumeric, F as Footer, H as Header, R as Row, T as Table } from './Body-CgxSjuH_.js';
+export { a as Tab, T as Tabs } from './Tabs-hkEeDnbZ.js';
+export { T as Text } from './Text-Dras3zfG.js';
+export { s as showToast } from './showToast-KHxpuZGA.js';
 import 'framer-motion';
 import '@jobber/design';
-import './tslib.es6-B8xwFsbq.js';
-import './debounce-Cn_nOUaP.js';
-import './_commonjsHelpers-BE7ts0dL.js';
-import './isObjectLike-CnAaaEk1.js';
-import './isSymbol-B9T59lk5.js';
+import './tslib.es6-IuyQgt2j.js';
+import './debounce-Bm9bGObQ.js';
+import './_commonjsHelpers-B71AZ_Rx.js';
+import './isObjectLike-Dim02HcU.js';
+import './isSymbol-CpW57fBe.js';
 import 'react-dom';
 import 'react-popper';
-import './useOnKeyDown-DmmcoBSb.js';
-import './useSafeLayoutEffect-C0rJH4wN.js';
-import './useIsMounted-BZ_Hh7Yn.js';
+import './useOnKeyDown-C6nQX7WE.js';
+import './useSafeLayoutEffect-CZ6du6_g.js';
+import './useIsMounted-Dpa-z-7K.js';
 import 'color';
-import './BannerIcon-BF_5pLAP.js';
+import './BannerIcon-B_wdeGj8.js';
 import 'react-router-dom';
 import 'react-hook-form';
-import './useInView-CHqYb6nn.js';
-import './useChildComponent-1Gx1jK8q.js';
-import './_polyfill-node.process-BqKfCqhe.js';
-import './InternalChipDismissible-DcuturFC.js';
-import './useScrollToActive-CNrZkpaG.js';
-import './_setToString-CVjg5S9r.js';
-import './_defineProperty-DAG-4gXq.js';
-import './_getTag-DuENwwhN.js';
-import './_baseEach-CZe3tJDZ.js';
-import './ComboboxContent-C0zpYwe8.js';
-import './ComboboxContentSearch-DfZOYAqi.js';
-import './ComboboxContentList-BZ0jJc6k.js';
-import './ComboboxOption-Uiv61uq7.js';
-import './ComboboxLoadMore-DgTFALBd.js';
-import './ComboboxContentHeader-DSLuKi1D.js';
-import './useRefocusOnActivator-CIfxfvAz.js';
-import './useFocusTrap-CdpTZ1GR.js';
-import './ComboboxAction-DDbpCujP.js';
-import './ComboboxTrigger-BnUJ5Jcz.js';
-import './noop-CEZ6ZgdB.js';
-import './ComboboxActivator-C4u6hUk_.js';
+import './useInView-55LBbNcJ.js';
+import './useChildComponent-CyZrqc7O.js';
+import './_polyfill-node.process-D212f-A-.js';
+import './InternalChipDismissible-CTdzckQb.js';
+import './useScrollToActive-CJN6yvRn.js';
+import './_setToString--AInEOjW.js';
+import './_defineProperty-BH9aLlHH.js';
+import './_getTag-Ctw_EOfE.js';
+import './_baseEach-5eQqayX1.js';
+import './ComboboxContent-DF4lqjom.js';
+import './ComboboxContentSearch-C4DpYiLD.js';
+import './ComboboxContentList-CT1PEB_1.js';
+import './ComboboxOption-CnBLkxqt.js';
+import './ComboboxLoadMore-CRS6iuf0.js';
+import './ComboboxContentHeader-B514d4jV.js';
+import './useRefocusOnActivator-kBGQs8ea.js';
+import './useFocusTrap-Gdvgf5FG.js';
+import './ComboboxAction-6PILUU9Y.js';
+import './ComboboxTrigger-CgCOyntt.js';
+import './noop-B0uhHAUc.js';
+import './ComboboxActivator-CobF_5Le.js';
 import '@std-proposal/temporal';
-import './index-DOZFWsBE.js';
-import './DataList-DuiIx6KN.js';
-import './DataListTotalCount-DTkOqSbB.js';
-import './DataListLoadingState-DXAMXYXi.js';
-import './DataListContext-CpCyH4v9.js';
-import './useActiveLayout-mamDiV2w.js';
-import './useResponsiveSizing-GBU4tbQY.js';
-import './DataList.const-CMLfPmqY.js';
-import './DataListLayout-Bl45cwnM.js';
-import './DataListItems-BVIH6lGB.js';
-import './DataListLayoutContext-crRWSX_-.js';
-import './DataListItem-DfM8HbVW.js';
-import './DataListItemActions-DGrqyT7m.js';
-import './DataListActions-qgjqJK52.js';
-import './DataListOverflowFade-CgNKRHW5.js';
-import './DataList.utils-BklrPY88.js';
-import './DataListTags-DCzcXNbB.js';
-import './DataListHeaderTile-CxHZAWjQ.js';
-import './DataListSortingOptions-C4fxVEu3.js';
-import './DataListLayoutContext-0rEb3hG6.js';
-import './DataListItemActionsOverflow-x6TkXwOW.js';
-import './DataListActionsMenu-n4fhkS4b.js';
-import './useBatchSelect-BAJ5nvz9.js';
-import './DataListItemClickable-MjRi7vV9.js';
-import './DataListHeader-CnWFEQ47.js';
-import './DataListBulkActions-B3H3qIt6.js';
-import './DataListFilters-CyPhlR0Q.js';
-import './DataListSort-DB1lYgbP.js';
-import './DataListStickyHeader-B5k67734.js';
-import './DataListSearch-BmWPz2qA.js';
-import './DataListEmptyState-DXuKf59F.js';
-import './DataListLoadMore-bVFSXW51.js';
-import './DataListAction-DlZMijVV.js';
-import './DataListLayoutActions-p-tlqNPH.js';
-import './DataListStatusBar-BgsRrr9U.js';
-import './_baseAssignValue-B9VeJuGH.js';
+import './index-rIgrX1en.js';
+import './DataList-PYJvoKPT.js';
+import './DataListTotalCount-BHGxRkNT.js';
+import './DataListLoadingState-BwHHkNg9.js';
+import './DataListContext-CFgEx6vK.js';
+import './useActiveLayout-D19y1xMi.js';
+import './useResponsiveSizing-BLLTSRXk.js';
+import './DataList.const-9hvKCn2E.js';
+import './DataListLayout-D3zyMmSn.js';
+import './DataListItems-DiJjOUGd.js';
+import './DataListLayoutContext-CL9V9Gup.js';
+import './DataListItem-BU_kpD2X.js';
+import './DataListItemActions-CZHkmDOb.js';
+import './DataListActions-BErz2Iub.js';
+import './DataListOverflowFade-D__sMTpr.js';
+import './DataList.utils-B0JPJnNm.js';
+import './DataListTags-CbncXClK.js';
+import './DataListHeaderTile-DLGKy63u.js';
+import './DataListSortingOptions-BOtCHFA1.js';
+import './DataListLayoutContext-BZ5QZFN2.js';
+import './DataListItemActionsOverflow-B3SK5rnk.js';
+import './DataListActionsMenu-B3dlzXr1.js';
+import './useBatchSelect-DcqeoBPK.js';
+import './DataListItemClickable-iWxIz2gX.js';
+import './DataListHeader-xFmggPOV.js';
+import './DataListBulkActions-Bu6va5sR.js';
+import './DataListFilters-CtHkSJZ1.js';
+import './DataListSort-wtukvOKm.js';
+import './DataListStickyHeader-CAhVD2ST.js';
+import './DataListSearch-BUKE_doW.js';
+import './DataListEmptyState-BTu8w0Br.js';
+import './DataListLoadMore-DWLMd-XO.js';
+import './DataListAction-CxJF5Lk0.js';
+import './DataListLayoutActions-BwvfyE3H.js';
+import './DataListStatusBar-obItXvic.js';
+import './_baseAssignValue-DA9qU18q.js';
 import 'filesize';
-import './InternalGridCell-CYcw6Rlq.js';
+import './InternalGridCell-BVkTNSPj.js';
 import 'axios';
 import '@jobber/formatters';
+import 'react-dom/client';

package/dist/{isObjectLike-CnAaaEk1.js → isObjectLike-Dim02HcU.js}

@@ -1,4 +1,4 @@
-import { c as commonjsGlobal } from './_commonjsHelpers-BE7ts0dL.js';
+import { c as commonjsGlobal } from './_commonjsHelpers-B71AZ_Rx.js';
 
 /**
  * Checks if `value` is the

package/dist/{isObjectLike-Bm3kzduZ.js → isObjectLike-l1q7glXu.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var _commonjsHelpers = require('./_commonjsHelpers-BwBMQa7C.js');
+var _commonjsHelpers = require('./_commonjsHelpers-CAuMqnLW.js');
 
 /**
  * Checks if `value` is the

package/dist/{isSymbol-B9T59lk5.js → isSymbol-CpW57fBe.js}

@@ -1,4 +1,4 @@
-import { _ as _baseGetTag, i as isObjectLike_1 } from './isObjectLike-CnAaaEk1.js';
+import { _ as _baseGetTag, i as isObjectLike_1 } from './isObjectLike-Dim02HcU.js';
 
 var baseGetTag = _baseGetTag,
     isObjectLike = isObjectLike_1;

package/dist/{isSymbol-CGBBSYjP.js → isSymbol-DI2S_WOc.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var isObjectLike$1 = require('./isObjectLike-Bm3kzduZ.js');
+var isObjectLike$1 = require('./isObjectLike-l1q7glXu.js');
 
 var baseGetTag = isObjectLike$1._baseGetTag,
     isObjectLike = isObjectLike$1.isObjectLike_1;

package/dist/{noop-CEZ6ZgdB.js → noop-B0uhHAUc.js}

@@ -1,4 +1,4 @@
-import { g as getDefaultExportFromCjs } from './_commonjsHelpers-BE7ts0dL.js';
+import { g as getDefaultExportFromCjs } from './_commonjsHelpers-B71AZ_Rx.js';
 
 /**
  * This method returns `undefined`.

package/dist/{noop-BSJblT3b.js → noop-unRxKHqS.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var _commonjsHelpers = require('./_commonjsHelpers-BwBMQa7C.js');
+var _commonjsHelpers = require('./_commonjsHelpers-CAuMqnLW.js');
 
 /**
  * This method returns `undefined`.

package/dist/showToast-Czli_MGa.js

@@ -0,0 +1,98 @@
+'use strict';
+
+var React = require('react');
+var client = require('react-dom/client');
+var framerMotion = require('framer-motion');
+var Icon = require('./Icon-DxRiqHon.js');
+var Button = require('./Button-BW6JyfoC.js');
+var Typography = require('./Typography-CYMWPHqc.js');
+
+var styles = {"wrapper":"FVK4VwhLaVQ-","container":"MUXYGaC7Msg-","toast":"yCRa7jHH33M-","slice":"KiJL-VNZ3Sg-","button":"cExoS0APILs-"};
+
+function Toast({ message, variation = "success", action, actionLabel, }) {
+    const [visible, setVisible] = React.useState(true);
+    const icon = getIcon();
+    let timer;
+    React.useEffect(() => startTimer(), []);
+    return (React.createElement(framerMotion.AnimatePresence, null, visible && (React.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,
+            transition: { duration: 0.4 },
+        } },
+        React.createElement("div", { className: styles.slice },
+            React.createElement(Icon.Icon, { color: icon.color, name: icon.name }),
+            React.createElement(Typography.Typography, { element: "span", size: "large" }, message),
+            action && (React.createElement(Button.Button, { label: `${actionLabel}`, onClick: action, type: "tertiary" })),
+            React.createElement("div", { className: styles.button },
+                React.createElement(Button.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 = 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.createElement(ToasterOven, Object.assign({}, props)));
+    }
+}
+const ToastContainer = React.forwardRef(ToastInternal);
+function ToasterOven(props) {
+    const toastRef = React.useRef();
+    React.useEffect(() => toastRef.current.add(props));
+    return React.createElement(ToastContainer, { ref: toastRef });
+}
+function ToastInternal(_, ref) {
+    const [toastKey, setToastKey] = React.useState(0);
+    const [toasts, setToasts] = React.useState([]);
+    React.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 }))))));
+}
+
+exports.showToast = showToast;

package/dist/showToast-KHxpuZGA.js

@@ -0,0 +1,96 @@
+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-OZibx43U.js';
+import { B as Button } from './Button-C9J52CkE.js';
+import { T as Typography } from './Typography-CFMQeqhD.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 };