@jobber/components 5.18.1-JOB-99089.2 → 5.19.0

package/dist/index.mjs

@@ -1,163 +1,165 @@
-export { A as AnimatedPresence } from './AnimatedPresence-DgsM1UgG.js';
-export { A as AnimatedSwitcher } from './AnimatedSwitcher-DVHEqbkQ.js';
-export { A as AtlantisContext, a as atlantisContextDefaultValues, u as useAtlantisContext } from './AtlantisContext-Drg14RBq.js';
-export { A as Autocomplete } from './Autocomplete-ZMMnwFfo.js';
-export { A as Avatar } from './Avatar-BfQjGHbx.js';
-export { B as Banner } from './Banner-B8cMLRcJ.js';
-export { B as Box } from './Box-LpctYhMY.js';
-export { B as Button } from './Button-CLYzgjXV.js';
-export { B as ButtonDismiss } from './ButtonDismiss-DxIDM9Q3.js';
-export { C as Card } from './Card-Csj3DEyR.js';
-export { C as Checkbox } from './Checkbox-BADXzJnI.js';
-export { C as Chip } from './Chip-y1cWZm5F.js';
-export { a as ChipDismissible, C as ChipSelectable } from './ChipDismissible-BvBHo9aq.js';
+export { A as AnimatedPresence } from './AnimatedPresence-sXgeyUx0.js';
+export { A as AnimatedSwitcher } from './AnimatedSwitcher-BxuUIq4-.js';
+export { A as AtlantisContext, a as atlantisContextDefaultValues, u as useAtlantisContext } from './AtlantisContext-fkYdyFJE.js';
+export { A as Autocomplete } from './Autocomplete-Bd6y3Lvo.js';
+export { A as Avatar } from './Avatar-CbKcK9Xa.js';
+export { B as Banner } from './Banner-DxMINFf5.js';
+export { B as Box } from './Box-BLiQq2Yr.js';
+export { B as Button } from './Button-BymNW5Oe.js';
+export { B as ButtonDismiss } from './ButtonDismiss-Dha5Sz_n.js';
+export { C as Card } from './Card-Bkk4cetm.js';
+export { C as Checkbox } from './Checkbox-BiFEjNM5.js';
+export { C as Chip } from './Chip-BT5_84uL.js';
+export { a as ChipDismissible, C as ChipSelectable } from './ChipDismissible-BVrR55-d.js';
 import 'react';
 import 'classnames';
-import './useAssert-AK3gYz5S.js';
-export { I as Icon } from './Icon-Ce2too_I.js';
-export { T as Typography } from './Typography-DH1i45Cm.js';
-export { T as Tooltip } from './Tooltip-CMYrB0_J.js';
-export { C as Chips } from './Chips-3cfSLQJy.js';
-export { C as Combobox } from './Combobox-C4BomOIn.js';
-export { C as ComboboxContextProvider } from './ComboboxProvider-Ddi0gzrX.js';
-export { C as ConfirmationModal } from './ConfirmationModal-C3oUHOba.js';
-export { C as Content } from './Content-CuOwn3Zr.js';
-export { C as Countdown } from './Countdown-7w1cmBxr.js';
-export { D as DataDump } from './DataDump-BuKgOmu8.js';
-export { D as DataList } from './DataList-ctysTVyR.js';
-export { D as DataTable } from './DataTable-CzVnsYxr.js';
-import './useResizeObserver-gtYFjqER.js';
+import './useAssert-Dta8BhS_.js';
+export { I as Icon } from './Icon-Rg4OSYoL.js';
+export { T as Typography } from './Typography-CSv0oO0L.js';
+export { T as Tooltip } from './Tooltip-C0VawVBU.js';
+export { C as Chips } from './Chips-gAoz8abt.js';
+export { C as Combobox } from './Combobox-CuCZ9B5Y.js';
+export { C as ComboboxContextProvider } from './ComboboxProvider-Co3lca_n.js';
+export { C as ConfirmationModal } from './ConfirmationModal-qNALrzvb.js';
+export { C as Content } from './Content-DOZ5cNjx.js';
+export { C as Countdown } from './Countdown-CWDyzOAp.js';
+export { D as DataDump } from './DataDump-CrTm4GKv.js';
+export { D as DataList } from './DataList-CvFeimM_.js';
+export { D as DataTable } from './DataTable-nlFLhPVZ.js';
+import './useResizeObserver-Bt7of2d6.js';
 export { createColumnHelper } from '@tanstack/react-table';
-export { D as DatePicker } from './DatePicker-BDu20OMb.js';
-export { D as DescriptionList } from './DescriptionList-CcKS2lXS.js';
-export { D as Disclosure } from './Disclosure-DqR_dcBm.js';
-export { D as Divider } from './Divider-C1AKbN-1.js';
-export { D as Drawer, a as DrawerGrid } from './DrawerGrid-DlJ2eg5V.js';
-export { E as Emphasis } from './Emphasis-CuYJxrQe.js';
-export { F as FeatureSwitch } from './FeatureSwitch-Cw6vvlGI.js';
-export { F as Flex } from './Flex-CE1u9oQs.js';
-export { F as Form } from './Form-BFhodOln.js';
-export { F as FormField } from './FormField-DXgyh2K0.js';
-export { F as FormatDate, s as strFormatDate } from './FormatDate-BCVGnUca.js';
-export { F as FormatEmail } from './FormatEmail-CNm3jKtz.js';
-export { F as FormatFile } from './FormatFile-CVevKDr8.js';
-export { F as FormatRelativeDateTime } from './FormatRelativeDateTime-Czpue2S1.js';
-export { F as FormatTime } from './FormatTime-DNYt23X-.js';
-export { G as Gallery } from './Gallery-g9sVGNl4.js';
-export { a as GLIMMER_TEST_ID, G as Glimmer } from './Glimmer-Dy-e62Ba.js';
-export { G as GRID_TEST_ID, a as Grid } from './Grid-CvBAiJoL.js';
-export { H as Heading } from './Heading-C7iHMEO7.js';
-export { I as InlineLabel } from './InlineLabel-pXWKPL3f.js';
-export { I as InputAvatar } from './InputAvatar-eXzPEhQl.js';
-export { I as InputDate } from './InputDate-DmslvJIH.js';
-export { I as InputEmail, v as validationMessage } from './InputEmail-Dt6kSjCs.js';
-export { I as InputFile, u as updateFiles } from './InputFile-BY8vFRkV.js';
-export { I as InputGroup } from './InputGroup-R-pq3f0N.js';
-export { I as InputNumber } from './InputNumber-D2PqWdPP.js';
-export { I as InputPassword } from './InputPassword-r58tK-85.js';
-export { I as InputPhoneNumber } from './InputPhoneNumber-CgOWSEEY.js';
-export { I as InputText } from './InputText-CdSMwqAx.js';
-export { I as InputTime } from './InputTime-DjtVV23e.js';
-export { I as InputValidation } from './InputValidation-Cz12iNmx.js';
-export { L as LightBox } from './LightBox-DrgFHP4r.js';
-export { L as Link } from './Link-z91UrurX.js';
-export { L as List, a as ListItem } from './List-TIenZ5Ci.js';
-export { M as Markdown } from './Markdown-BQ_9o7R4.js';
-export { M as Menu } from './Menu-BF7WEvbv.js';
-export { M as Modal } from './Modal-C_UW2Q4W.js';
-export { M as MultiSelect } from './MultiSelect-Cs48vtt4.js';
-export { P as Page } from './Page-CWs9E80B.js';
-export { P as Popover } from './Popover-DqODu9Vt.js';
-export { P as ProgressBar } from './ProgressBar-HccCfZA_.js';
-export { R as RadioGroup, a as RadioOption } from './RadioGroup-D8r60sSf.js';
-export { R as RecurringSelect } from './RecurringSelect-DPDQvzCD.js';
-export { D as DurationPeriod, W as WeekDay } from './DayOfMonthSelect-C0aRxF0o.js';
-export { a as Option, S as Select } from './Option-BPLMInuU.js';
-export { S as SideDrawer } from './SideDrawer-09PUWaGe.js';
-export { S as Spinner } from './Spinner-PJ8-kqdd.js';
-export { S as StatusIndicator } from './StatusIndicator-D1hqtUBk.js';
-export { S as StatusLabel } from './StatusLabel-CMatftoa.js';
-export { S as Switch } from './Switch-DjkcsJpk.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-BpC7vxI0.js';
-export { a as Tab, T as Tabs } from './Tabs-BwFCWlDk.js';
-export { T as Text } from './Text-uJzqteFH.js';
+export { D as DatePicker } from './DatePicker-BMWiYi4f.js';
+export { D as DescriptionList } from './DescriptionList-CqTtjFQV.js';
+export { D as Disclosure } from './Disclosure-tToSAZrb.js';
+export { D as Divider } from './Divider-DI9NkvIx.js';
+export { D as Drawer, a as DrawerGrid } from './DrawerGrid-bQDXKU_E.js';
+export { E as Emphasis } from './Emphasis-DkmfG7uD.js';
+export { F as FeatureSwitch } from './FeatureSwitch-BsfovW5Y.js';
+export { F as Flex } from './Flex-Dqti_buL.js';
+export { F as Form } from './Form-D-muPuIL.js';
+export { F as FormField } from './FormField-D7dRM75q.js';
+export { F as FormatDate, s as strFormatDate } from './FormatDate-BaDpP7u5.js';
+export { F as FormatEmail } from './FormatEmail-6a7KaUsW.js';
+export { F as FormatFile } from './FormatFile-4CvMAu_U.js';
+export { F as FormatRelativeDateTime } from './FormatRelativeDateTime-JP8fg38S.js';
+export { F as FormatTime } from './FormatTime-QiEKjbgF.js';
+export { G as Gallery } from './Gallery-DquD6tms.js';
+export { a as GLIMMER_TEST_ID, G as Glimmer } from './Glimmer-BVMo-YTM.js';
+export { G as GRID_TEST_ID, a as Grid } from './Grid-xg03q57y.js';
+export { H as Heading } from './Heading-2tLRNoLi.js';
+export { I as InlineLabel } from './InlineLabel-BTQmke0X.js';
+export { I as InputAvatar } from './InputAvatar-CYii-UNn.js';
+export { I as InputDate } from './InputDate-CCK_v-TV.js';
+export { I as InputEmail, v as validationMessage } from './InputEmail-DjOmTOtG.js';
+export { I as InputFile, u as updateFiles } from './InputFile-CZVfG9R4.js';
+export { I as InputGroup } from './InputGroup-Sxs2MbtQ.js';
+export { I as InputNumber } from './InputNumber-BaiOERSA.js';
+export { I as InputPassword } from './InputPassword-4VttSgBc.js';
+export { I as InputPhoneNumber } from './InputPhoneNumber-3651VLa1.js';
+export { I as InputText } from './InputText-Ds2bv_IZ.js';
+export { I as InputTime } from './InputTime-whp0gC3W.js';
+export { I as InputValidation } from './InputValidation-B1FfgUM-.js';
+export { L as LightBox } from './LightBox-CsbgxWdJ.js';
+export { L as Link } from './Link-DPkcgiVM.js';
+export { L as List, a as ListItem } from './List-DujQyBbI.js';
+export { M as Markdown } from './Markdown-DzKTZAVw.js';
+export { M as Menu } from './Menu-D2IBI6Ox.js';
+export { M as Modal } from './Modal-VkA1VPYX.js';
+export { M as MultiSelect } from './MultiSelect-CFRRP8qa.js';
+export { P as Page } from './Page-DK1WWTbf.js';
+export { P as Popover } from './Popover-AdeZqqx_.js';
+export { P as ProgressBar } from './ProgressBar-B3EnrHTw.js';
+export { R as RadioGroup, a as RadioOption } from './RadioGroup-BnvSlr-X.js';
+export { R as RecurringSelect } from './RecurringSelect-rsDkNEWL.js';
+export { D as DurationPeriod, W as WeekDay } from './DayOfMonthSelect-1iUxrj6j.js';
+export { a as Option, S as Select } from './Option-BjdLsC0C.js';
+export { S as SideDrawer } from './SideDrawer-ou6jZRJQ.js';
+export { S as Spinner } from './Spinner-JMTGVOuU.js';
+export { S as StatusIndicator } from './StatusIndicator-CVqCZc37.js';
+export { S as StatusLabel } from './StatusLabel-BBp6lcbe.js';
+export { S as Switch } from './Switch-C7awOypm.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-CzYgk1U-.js';
+export { a as Tab, T as Tabs } from './Tabs-CqlmvAi3.js';
+export { T as Text } from './Text-D5zH_SD5.js';
+export { s as showToast } from './showToast-BfII2QS7.js';
 import 'framer-motion';
 import '@jobber/design';
-import './tslib.es6-BreJpntc.js';
-import './debounce-CvMRD-kP.js';
-import './_commonjsHelpers-Y9msgNsl.js';
-import './isObjectLike-CauXJFNr.js';
-import './isSymbol--94TIA30.js';
+import './tslib.es6-C5Wmkig-.js';
+import './debounce-AYcpZv3c.js';
+import './_commonjsHelpers-C_-0bU2G.js';
+import './isObjectLike-DJ9pm7V7.js';
+import './isSymbol-Brdz3x-m.js';
 import 'react-dom';
 import 'react-popper';
-import './useOnKeyDown-DEQLyeot.js';
-import './useSafeLayoutEffect-fdi8L7ou.js';
-import './useIsMounted-C8IfTRS0.js';
+import './useOnKeyDown-BJEKhimr.js';
+import './useSafeLayoutEffect-B3DemlJA.js';
+import './useIsMounted-DYSFdj5s.js';
 import 'color';
-import './BannerIcon-RiI168LA.js';
+import './BannerIcon-CqCQLQuZ.js';
 import 'react-router-dom';
 import 'react-hook-form';
-import './useInView-C71Bg3er.js';
-import './useChildComponent-DEy2xp7Z.js';
-import './_polyfill-node.process-DNKbwS6u.js';
-import './InternalChipDismissible-DpxNZ-PZ.js';
-import './useScrollToActive-xzYxEaqe.js';
-import './_setToString-DF3vPyvg.js';
-import './_defineProperty-CbZRTeG-.js';
-import './_getTag-CihVgkSP.js';
-import './_baseEach-CNYxRtwC.js';
-import './ComboboxContent-mOFqutvn.js';
-import './ComboboxContentSearch-BG71hIcJ.js';
-import './ComboboxContentList-D9wGgSOO.js';
-import './ComboboxOption-B0H4DNMq.js';
-import './ComboboxLoadMore-Er5cHkwD.js';
-import './ComboboxContentHeader-DrEUD0V7.js';
-import './useRefocusOnActivator-vK_z2yHv.js';
-import './useFocusTrap-LB9We7mr.js';
-import './ComboboxAction-DCyRqSdQ.js';
-import './ComboboxTrigger-7mpymX1w.js';
-import './noop-tCo3nZzr.js';
-import './ComboboxActivator-CyKUoABc.js';
+import './useInView-Cc7Njqkc.js';
+import './useChildComponent-C5oBlBHa.js';
+import './_polyfill-node.process-BizOZKnf.js';
+import './InternalChipDismissible-DJp67z9r.js';
+import './useScrollToActive-Adr0SqcF.js';
+import './_setToString-zO8GCYup.js';
+import './_defineProperty-CGICsf-Z.js';
+import './_getTag-RbAOAtdi.js';
+import './_baseEach-D7Wv4SNt.js';
+import './ComboboxContent-CHBX5oOe.js';
+import './ComboboxContentSearch-DXKgGey1.js';
+import './ComboboxContentList-gtoHwcfI.js';
+import './ComboboxOption-CiM5d6R6.js';
+import './ComboboxLoadMore-D-ltI90h.js';
+import './ComboboxContentHeader-CdSQLnQ4.js';
+import './useRefocusOnActivator-BJSxPAz2.js';
+import './useFocusTrap-B5TCIRsQ.js';
+import './ComboboxAction-CnBhU8NI.js';
+import './ComboboxTrigger-DOM1K5Il.js';
+import './noop-BDZuIIw7.js';
+import './ComboboxActivator-q19OCWIc.js';
 import '@std-proposal/temporal';
-import './index-Dm_Kr3zP.js';
-import './DataList-84V6P3oz.js';
-import './DataListTotalCount-Bnxm_aq6.js';
-import './DataListLoadingState-CT6N8yR1.js';
-import './DataListContext-BFfErQkB.js';
-import './useActiveLayout-CQQx-QeG.js';
-import './useResponsiveSizing-B4EHqa9L.js';
-import './DataList.const-BywMQVVe.js';
-import './DataListLayout-KPyT0H1o.js';
-import './DataListItems-De0iz5My.js';
-import './DataListLayoutContext-DhjiIkGe.js';
-import './DataListItem-Cp_Qw9Dy.js';
-import './DataListItemActions-Dfc-Az2L.js';
-import './DataListActions-DYo839vo.js';
-import './DataListOverflowFade-irsjmn8R.js';
-import './DataList.utils-B8IkvHP9.js';
-import './DataListTags-DY53xm6c.js';
-import './DataListHeaderTile-c0oPlSAt.js';
-import './DataListSortingOptions-CDTLl-te.js';
-import './DataListLayoutContext-CXV5XsFU.js';
-import './DataListItemActionsOverflow-C-lSeynk.js';
-import './DataListActionsMenu-BoP9GaLA.js';
-import './useBatchSelect-BvgUrvly.js';
-import './DataListItemClickable-CkBMGOOH.js';
-import './DataListHeader-x1jrhqyt.js';
-import './DataListBulkActions-DRAX26oJ.js';
-import './DataListFilters-B3W95J31.js';
-import './DataListSort-TmTqFRbB.js';
-import './DataListStickyHeader-BZa4jniG.js';
-import './DataListSearch-XdfzU7-u.js';
-import './DataListEmptyState-DAliZfAj.js';
-import './DataListLoadMore-Ba_XmaWE.js';
-import './DataListAction-C1oGsMOk.js';
-import './DataListLayoutActions-Dm1MFB3l.js';
-import './DataListStatusBar-Co3rSJEr.js';
-import './throttle-B0-U-NXB.js';
-import './_baseAssignValue-BXK_kuKz.js';
-import './useFormFieldFocus-28WpWzEn.js';
+import './index-DkrNdOvY.js';
+import './DataList-ft4T8T3E.js';
+import './DataListTotalCount-CBbydstu.js';
+import './DataListLoadingState-Clx1oEla.js';
+import './DataListContext-DQszOeuf.js';
+import './useActiveLayout-cBN-yfQj.js';
+import './useResponsiveSizing-WtRnujX5.js';
+import './DataList.const-oJ-tUrcq.js';
+import './DataListLayout-CKE-Opc9.js';
+import './DataListItems-C-d0pYMD.js';
+import './DataListLayoutContext-BHOcLYN9.js';
+import './DataListItem-CbihPyMG.js';
+import './DataListItemActions-BgW95xKA.js';
+import './DataListActions-Csxwj-lv.js';
+import './DataListOverflowFade-0tSiZ3bU.js';
+import './DataList.utils-DWjN0oAT.js';
+import './DataListTags-fJA2gIvi.js';
+import './DataListHeaderTile-B9G19eva.js';
+import './DataListSortingOptions-Dnoqr8EE.js';
+import './DataListLayoutContext-CAiOdWox.js';
+import './DataListItemActionsOverflow-UsiU0z3t.js';
+import './DataListActionsMenu-B6R6pVWc.js';
+import './useBatchSelect-DfzgVg0N.js';
+import './DataListItemClickable-DlVWn2eo.js';
+import './DataListHeader-CMRTOVIm.js';
+import './DataListBulkActions-gujjW8fs.js';
+import './DataListFilters-HkC4xS5B.js';
+import './DataListSort-DmN-kOeb.js';
+import './DataListStickyHeader-BaAXC91w.js';
+import './DataListSearch-C0rRgLQi.js';
+import './DataListEmptyState-BjYByrNI.js';
+import './DataListLoadMore-Bj8vWAto.js';
+import './DataListAction-CTIJMd6b.js';
+import './DataListLayoutActions-Y0hhtW1v.js';
+import './DataListStatusBar-DEJ5o9zo.js';
+import './throttle-B_tNTd7G.js';
+import './_baseAssignValue-DGQRJ7mn.js';
+import './useFormFieldFocus-B_Wc76-c.js';
 import 'filesize';
-import './InternalGridCell-DVJqiMBS.js';
+import './InternalGridCell-CF26x0ym.js';
 import 'axios';
 import '@jobber/formatters';
+import 'react-dom/client';

package/dist/{isObjectLike-CauXJFNr.js → isObjectLike-DJ9pm7V7.js}

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

package/dist/{isObjectLike-BmckOUuw.js → isObjectLike-DOIAlxkG.js}

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

package/dist/{isSymbol--94TIA30.js → isSymbol-Brdz3x-m.js}

@@ -1,4 +1,4 @@
-import { _ as _baseGetTag, a as isObjectLike_1 } from './isObjectLike-CauXJFNr.js';
+import { _ as _baseGetTag, a as isObjectLike_1 } from './isObjectLike-DJ9pm7V7.js';
 
 var baseGetTag = _baseGetTag,
     isObjectLike = isObjectLike_1;

package/dist/{isSymbol-BjAfIomf.js → isSymbol-_8Usoq8d.js}

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

package/dist/{noop-tCo3nZzr.js → noop-BDZuIIw7.js}

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

package/dist/{noop-DtMzRxfv.js → noop-F3L3BoyP.js}

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

package/dist/showToast-BfII2QS7.js

@@ -0,0 +1,101 @@
+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-Rg4OSYoL.js';
+import { B as Button } from './Button-BymNW5Oe.js';
+import { T as Typography } from './Typography-CSv0oO0L.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 root;
+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 (!globalThis.document)
+        return;
+    let target = globalThis.document.querySelector(`#${targetId}`);
+    if (!target) {
+        target = globalThis.document.createElement("div");
+        target.id = targetId;
+        target.classList.add(styles.wrapper);
+        globalThis.document.body.appendChild(target);
+    }
+    if (target && !root) {
+        root = createRoot(target);
+    }
+    if (root && target && globalThis.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 };

package/dist/showToast-DJnU23WD.js

@@ -0,0 +1,103 @@
+'use strict';
+
+var React = require('react');
+var client = require('react-dom/client');
+var framerMotion = require('framer-motion');
+var Icon = require('./Icon-CAkL6fde.js');
+var Button = require('./Button-qfPHhXD9.js');
+var Typography = require('./Typography-D7jV-Wfb.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 root;
+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 (!globalThis.document)
+        return;
+    let target = globalThis.document.querySelector(`#${targetId}`);
+    if (!target) {
+        target = globalThis.document.createElement("div");
+        target.id = targetId;
+        target.classList.add(styles.wrapper);
+        globalThis.document.body.appendChild(target);
+    }
+    if (target && !root) {
+        root = client.createRoot(target);
+    }
+    if (root && target && globalThis.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;