@doist/reactist 15.3.0 → 16.1.0

package/dist/reactist.cjs.development.js

@@ -5,14 +5,15 @@ Object.defineProperty(exports, '__esModule', { value: true });
 function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }
 
 var React = require('react');
+var React__default = _interopDefault(React);
 var classNames = _interopDefault(require('classnames'));
 var flattenChildren = _interopDefault(require('react-keyed-flatten-children'));
 var tooltip = require('ariakit/tooltip');
+var portal = require('ariakit/portal');
 var ariakitUtils = require('ariakit-utils');
 var FocusLock = _interopDefault(require('react-focus-lock'));
 var ariaHidden = require('aria-hidden');
 var dialog = require('ariakit/dialog');
-var portal = require('ariakit/portal');
 var tab = require('ariakit/tab');
 var ReactDOM = _interopDefault(require('react-dom'));
 var dayjs = _interopDefault(require('dayjs'));
@@ -194,7 +195,7 @@ function mapResponsiveProp(fromValue, mapper) {
   };
 }
 
-var modules_54d944f2 = {"box":"f9408a0e","position-absolute":"_7807dcdd","position-fixed":"dc5f328c","position-relative":"_0e4ff085","position-sticky":"_4019d94a","tablet-position-absolute":"b1865c0f","tablet-position-fixed":"af8c5967","tablet-position-relative":"ef2b609f","tablet-position-sticky":"_04935ffd","desktop-position-absolute":"bda94091","desktop-position-fixed":"_691dfd31","desktop-position-relative":"efda904e","desktop-position-sticky":"bcf04687","display-block":"b5b9f34a","display-flex":"_6e9db9aa","display-inline":"ece6d246","display-inlineBlock":"e5e2223f","display-inlineFlex":"f344a0e2","display-none":"_9002f8c2","tablet-display-block":"d896f0ff","tablet-display-flex":"_56412665","tablet-display-inline":"_6b430cc5","tablet-display-inlineBlock":"_4158c5ad","tablet-display-inlineFlex":"c598eaab","tablet-display-none":"_5a2a6d3f","desktop-display-block":"_132ef8fb","desktop-display-flex":"_5bd11385","desktop-display-inline":"a51c2ec9","desktop-display-inlineBlock":"_93506988","desktop-display-inlineFlex":"_385d45a5","desktop-display-none":"_921732eb","flexDirection-column":"_41ef5755","flexDirection-row":"_6cad1a19","tablet-flexDirection-column":"f1c16205","tablet-flexDirection-row":"_65305ae1","desktop-flexDirection-column":"_4916f0f9","desktop-flexDirection-row":"_430dfc8e","flexWrap-wrap":"_3d2d56fe","flexWrap-nowrap":"_826e4adf","flexShrink-0":"f8344e0f","flexGrow-0":"f117e2ab","flexGrow-1":"_1355325c","alignItems-flexStart":"c5b05c6a","alignItems-center":"_21b8bafa","alignItems-flexEnd":"_56d73c9b","alignItems-baseline":"_052e0707","tablet-alignItems-flexStart":"_90048c98","tablet-alignItems-center":"_7e189a0b","tablet-alignItems-flexEnd":"b8aefb5c","tablet-alignItems-baseline":"_4c1a5ef9","desktop-alignItems-flexStart":"f4d052ef","desktop-alignItems-center":"e5478926","desktop-alignItems-flexEnd":"b4f5051a","desktop-alignItems-baseline":"b21adace","justifyContent-flexStart":"be6deb6a","justifyContent-center":"d8eaf780","justifyContent-flexEnd":"_9212ca89","justifyContent-spaceAround":"_5d2cd095","justifyContent-spaceBetween":"_00d5fe7e","justifyContent-spaceEvenly":"ce4f4c2d","tablet-justifyContent-flexStart":"_6580dbbc","tablet-justifyContent-center":"_3f689891","tablet-justifyContent-flexEnd":"_628df8db","tablet-justifyContent-spaceAround":"_3ea88b4f","tablet-justifyContent-spaceBetween":"_4554d93d","tablet-justifyContent-spaceEvenly":"eb13fb50","desktop-justifyContent-flexStart":"_36dc744d","desktop-justifyContent-center":"ee7077ab","desktop-justifyContent-flexEnd":"_4edc8c86","desktop-justifyContent-spaceBetween":"_7e147696","alignSelf-stretch":"c0655cd6","alignSelf-flexStart":"_11863030","alignSelf-center":"c6d86139","alignSelf-flexEnd":"c0bd1f82","alignSelf-baseline":"_95686aec","tablet-alignSelf-stretch":"_9b712cc7","tablet-alignSelf-flexStart":"f7b935f7","tablet-alignSelf-center":"bf9ad125","tablet-alignSelf-flexEnd":"_3b4f8c3c","tablet-alignSelf-baseline":"_49d27079","desktop-alignSelf-stretch":"_63d27ffa","desktop-alignSelf-flexStart":"d45796cc","desktop-alignSelf-center":"c91c7bf7","desktop-alignSelf-flexEnd":"f2453212","desktop-alignSelf-baseline":"_3882757c","overflow-hidden":"_473810b4","overflow-auto":"_051c2340","overflow-visible":"_14e451d1","overflow-scroll":"_4d8555f8","height-full":"_867d251e","bg-default":"_2d928bf8","bg-aside":"db3f5af6","bg-highlight":"c990fcc3","bg-selected":"_976a662f","borderRadius-standard":"_46b52f05","borderRadius-full":"_1c8b326b","border-primary":"_0ef8c314","border-secondary":"_14871605","border-tertiary":"_36c045c3","textAlign-start":"d745aa1e","textAlign-center":"_31cf99c5","textAlign-end":"_10a7a030","textAlign-justify":"_2cfc8b46","tablet-textAlign-start":"e6b7bb40","tablet-textAlign-center":"_47dcb91c","tablet-textAlign-end":"_1d4011ce","tablet-textAlign-justify":"_18407499","desktop-textAlign-start":"_565de5cf","desktop-textAlign-center":"_64254ba3","desktop-textAlign-end":"_3cc6a504","desktop-textAlign-justify":"_0efec659"};
+var modules_54d944f2 = {"box":"aa9a5a15","position-absolute":"_8e8803b9","position-fixed":"e11a8cf1","position-relative":"_5e6c2a17","position-sticky":"_125d4a65","tablet-position-absolute":"_8cbc0cd3","tablet-position-fixed":"_4b5e0b30","tablet-position-relative":"_32636b2c","tablet-position-sticky":"_3c8df1b2","desktop-position-absolute":"_0fc96c32","desktop-position-fixed":"_86f2af8d","desktop-position-relative":"_9ca81d89","desktop-position-sticky":"_7ddb76a3","display-block":"_1f239253","display-flex":"d3c9028a","display-inline":"_7804dae4","display-inlineBlock":"_2011b4f7","display-inlineFlex":"_84d1c5e9","display-none":"ecffd994","tablet-display-block":"_858d10e6","tablet-display-flex":"_048e1351","tablet-display-inline":"_4ad22f53","tablet-display-inlineBlock":"_9bdcf7c5","tablet-display-inlineFlex":"_086af02f","tablet-display-none":"e6d66504","desktop-display-block":"_42a60b7f","desktop-display-flex":"_75f9923b","desktop-display-inline":"_89fe8b6b","desktop-display-inlineBlock":"f5044459","desktop-display-inlineFlex":"c4bb937b","desktop-display-none":"_155e67e3","flexDirection-column":"_8b7928cc","flexDirection-row":"_5d86bbce","tablet-flexDirection-column":"_056ba2f7","tablet-flexDirection-row":"_68a9954e","desktop-flexDirection-column":"febb3bff","desktop-flexDirection-row":"e32ba18f","flexWrap-wrap":"bf057363","flexWrap-nowrap":"c12b5de4","flexShrink-0":"_1b0fdede","flexGrow-0":"_74d96364","flexGrow-1":"_8085a81a","alignItems-flexStart":"d646b895","alignItems-center":"_7eb6fbcd","alignItems-flexEnd":"aa0f1674","alignItems-baseline":"_5f712321","tablet-alignItems-flexStart":"_9cba71cc","tablet-alignItems-center":"_8803e1ed","tablet-alignItems-flexEnd":"dd23ad40","tablet-alignItems-baseline":"b6e66958","desktop-alignItems-flexStart":"_3cf6aa44","desktop-alignItems-center":"c455cc71","desktop-alignItems-flexEnd":"d72d7865","desktop-alignItems-baseline":"d856f657","justifyContent-flexStart":"e99eaf27","justifyContent-center":"f9927840","justifyContent-flexEnd":"_318ae7a4","justifyContent-spaceAround":"_792f21bb","justifyContent-spaceBetween":"c563d133","justifyContent-spaceEvenly":"_88fa03eb","tablet-justifyContent-flexStart":"_10110808","tablet-justifyContent-center":"_39532d47","tablet-justifyContent-flexEnd":"_6f28967b","tablet-justifyContent-spaceAround":"_61cf0e53","tablet-justifyContent-spaceBetween":"d9eb935c","tablet-justifyContent-spaceEvenly":"_2c34f330","desktop-justifyContent-flexStart":"_0d99cfa4","desktop-justifyContent-center":"a8e50b37","desktop-justifyContent-flexEnd":"_5c59c692","desktop-justifyContent-spaceBetween":"_2367b5bf","alignSelf-stretch":"da53b153","alignSelf-flexStart":"e7504e05","alignSelf-center":"_31910485","alignSelf-flexEnd":"f9deb037","alignSelf-baseline":"d2e0b600","tablet-alignSelf-stretch":"_322b2d4c","tablet-alignSelf-flexStart":"_8c3ace8c","tablet-alignSelf-center":"_3784fff8","tablet-alignSelf-flexEnd":"_7d7054cd","tablet-alignSelf-baseline":"_24e72f72","desktop-alignSelf-stretch":"_805f09a3","desktop-alignSelf-flexStart":"c124aecf","desktop-alignSelf-center":"_7f550538","desktop-alignSelf-flexEnd":"f1a1ea25","desktop-alignSelf-baseline":"a47a5534","overflow-hidden":"_79330f2d","overflow-auto":"_2d735aa4","overflow-visible":"_2d2dc480","overflow-scroll":"eae7bf85","height-full":"_3bd4b4e5","bg-default":"cdd56ed4","bg-aside":"ace3a6e9","bg-highlight":"_69ba9d50","bg-selected":"d3c85356","bg-toast":"_54ff8cfc","borderRadius-standard":"a010e6ce","borderRadius-full":"c7f4eef5","border-primary":"_0133b2bb","border-secondary":"_10ddcd6f","border-tertiary":"b1dd5c24","textAlign-start":"_3692c550","textAlign-center":"_917de8e0","textAlign-end":"f1f1808a","textAlign-justify":"_70cadb46","tablet-textAlign-start":"c009a023","tablet-textAlign-center":"_994025e9","tablet-textAlign-end":"da09b74f","tablet-textAlign-justify":"cedd005b","desktop-textAlign-start":"_6fb085b1","desktop-textAlign-center":"_742b34ba","desktop-textAlign-end":"_8d252912","desktop-textAlign-justify":"_081ee438"};
 
 var modules_b537a8ee = {"paddingTop-xsmall":"c4803194","paddingTop-small":"_4e9ab24b","paddingTop-medium":"_1d226e27","paddingTop-large":"eb6097f1","paddingTop-xlarge":"d3229ba4","paddingTop-xxlarge":"_47978ba4","tablet-paddingTop-xsmall":"f987719c","tablet-paddingTop-small":"_8dbc4b4d","tablet-paddingTop-medium":"ae44fe07","tablet-paddingTop-large":"ffe9548d","tablet-paddingTop-xlarge":"f2b76a44","tablet-paddingTop-xxlarge":"c6eb8f43","desktop-paddingTop-xsmall":"_8699b560","desktop-paddingTop-small":"_02c374b7","desktop-paddingTop-medium":"_0dd0332f","desktop-paddingTop-large":"da55f1f6","desktop-paddingTop-xlarge":"_8ef2a278","desktop-paddingTop-xxlarge":"_8b493b28","paddingRight-xsmall":"_211eebc7","paddingRight-small":"ad0ccf15","paddingRight-medium":"a03e39af","paddingRight-large":"f0941ead","paddingRight-xlarge":"e47c5a43","paddingRight-xxlarge":"e849a5cf","tablet-paddingRight-xsmall":"_85374228","tablet-paddingRight-small":"_89df37b9","tablet-paddingRight-medium":"_1cc50ebe","tablet-paddingRight-large":"_1060982b","tablet-paddingRight-xlarge":"be58847d","tablet-paddingRight-xxlarge":"_45093484","desktop-paddingRight-xsmall":"f8d99d6a","desktop-paddingRight-small":"efa076d9","desktop-paddingRight-medium":"e59caa64","desktop-paddingRight-large":"da42f46a","desktop-paddingRight-xlarge":"b3ee2580","desktop-paddingRight-xxlarge":"_3ef94658","paddingBottom-xsmall":"b0e6eab4","paddingBottom-small":"_9510d053","paddingBottom-medium":"d7af60c9","paddingBottom-large":"b75f86cd","paddingBottom-xlarge":"fbd4ce29","paddingBottom-xxlarge":"_33e3ad63","tablet-paddingBottom-xsmall":"f0302da7","tablet-paddingBottom-small":"_4f9b8012","tablet-paddingBottom-medium":"_4333e20e","tablet-paddingBottom-large":"_30bbc76c","tablet-paddingBottom-xlarge":"ba5a4008","tablet-paddingBottom-xxlarge":"_423a3b1a","desktop-paddingBottom-xsmall":"b40139b7","desktop-paddingBottom-small":"f96071fa","desktop-paddingBottom-medium":"fe803c9a","desktop-paddingBottom-large":"_01686eb9","desktop-paddingBottom-xlarge":"afa763d8","desktop-paddingBottom-xxlarge":"a95785f1","paddingLeft-xsmall":"cad4e2ec","paddingLeft-small":"d70b3c17","paddingLeft-medium":"_8c851bd6","paddingLeft-large":"_078feb3c","paddingLeft-xlarge":"_76ab968c","paddingLeft-xxlarge":"aaca85d7","tablet-paddingLeft-xsmall":"_5eb0e5aa","tablet-paddingLeft-small":"_0384fb4f","tablet-paddingLeft-medium":"edffff6f","tablet-paddingLeft-large":"_873b9a46","tablet-paddingLeft-xlarge":"_89105db5","tablet-paddingLeft-xxlarge":"db1966fe","desktop-paddingLeft-xsmall":"b17f826b","desktop-paddingLeft-small":"_6dc83610","desktop-paddingLeft-medium":"_3421b8b2","desktop-paddingLeft-large":"_68cec7a6","desktop-paddingLeft-xlarge":"_94bde020","desktop-paddingLeft-xxlarge":"b94ee579"};
 
@@ -865,66 +866,517 @@ function Notice({
   }, children))));
 }
 
-var modules_949d2ff4 = {"heading":"_71a1610c","weight-light":"_63750f40","tone-secondary":"_9ce984cf","tone-danger":"_1acad35e","size-largest":"_3da27a00","size-larger":"df220733","size-smaller":"eb373739","lineClampMultipleLines":"f53cfd2b","lineClamp-1":"e4819fc9","lineClamp-2":"a0ed6177","lineClamp-3":"_180d433e","lineClamp-4":"_40826ad9","lineClamp-5":"_5999b247"};
+var modules_a9637dd3 = {"text":"a83bd4e0","size-caption":"_266d6623","size-copy":"a8d37c6e","size-subtitle":"_39f4eb1f","weight-semibold":"_7be5c531","weight-bold":"e214ff2e","tone-secondary":"_6a3e5ade","tone-danger":"_8f5b5f2b","tone-positive":"_9ae47ae4","lineClampMultipleLines":"_969f18f7","lineClamp-1":"_2f303ac3","lineClamp-2":"d3e04245","lineClamp-3":"_33411704","lineClamp-4":"bfc32640","lineClamp-5":"f813c82f"};
 
-const _excluded$b = ["level", "weight", "size", "tone", "children", "lineClamp", "align", "exceptionallySetClassName"];
-const Heading = /*#__PURE__*/React.forwardRef(function Heading(_ref, ref) {
+const _excluded$b = ["as", "size", "weight", "tone", "align", "children", "lineClamp", "exceptionallySetClassName"];
+const Text = /*#__PURE__*/polymorphicComponent(function Text(_ref, ref) {
   let {
-    level,
+    as,
+    size = 'body',
     weight = 'regular',
-    size,
     tone = 'normal',
+    align,
     children,
     lineClamp,
-    align,
     exceptionallySetClassName
   } = _ref,
       props = _objectWithoutProperties(_ref, _excluded$b);
 
-  // In TypeScript v4.1, this would be properly recognized without needing the type assertion
-  // https://devblogs.microsoft.com/typescript/announcing-typescript-4-1-beta/#template-literal-types
-  const headingElementName = "h" + level;
-  const lineClampMultipleLines = typeof lineClamp === 'string' ? parseInt(lineClamp, 10) > 1 : (lineClamp || 0) > 1;
+  const lineClampMultipleLines = typeof lineClamp === 'string' ? Number(lineClamp) > 1 : (lineClamp != null ? lineClamp : 1) > 1;
   return /*#__PURE__*/React.createElement(Box, _objectSpread2(_objectSpread2({}, props), {}, {
-    className: [exceptionallySetClassName, modules_949d2ff4.heading, weight !== 'regular' ? getClassNames(modules_949d2ff4, 'weight', weight) : null, tone !== 'normal' ? getClassNames(modules_949d2ff4, 'tone', tone) : null, getClassNames(modules_949d2ff4, 'size', size), lineClampMultipleLines ? modules_949d2ff4.lineClampMultipleLines : null, lineClamp ? getClassNames(modules_949d2ff4, 'lineClamp', lineClamp.toString()) : null],
+    as: as,
+    className: [exceptionallySetClassName, modules_a9637dd3.text, size !== 'body' ? getClassNames(modules_a9637dd3, 'size', size) : null, weight !== 'regular' ? getClassNames(modules_a9637dd3, 'weight', weight) : null, tone !== 'normal' ? getClassNames(modules_a9637dd3, 'tone', tone) : null, lineClampMultipleLines ? modules_a9637dd3.lineClampMultipleLines : null, lineClamp ? getClassNames(modules_a9637dd3, 'lineClamp', lineClamp.toString()) : null],
     textAlign: align,
     // Prevents emojis from being cut-off
     // See https://github.com/Doist/reactist/pull/528
     paddingRight: lineClamp ? 'xsmall' : undefined,
-    as: headingElementName,
     ref: ref
   }), children);
 });
 
-var modules_a9637dd3 = {"text":"a83bd4e0","size-caption":"_266d6623","size-copy":"a8d37c6e","size-subtitle":"_39f4eb1f","weight-semibold":"_7be5c531","weight-bold":"e214ff2e","tone-secondary":"_6a3e5ade","tone-danger":"_8f5b5f2b","tone-positive":"_9ae47ae4","lineClampMultipleLines":"_969f18f7","lineClamp-1":"_2f303ac3","lineClamp-2":"d3e04245","lineClamp-3":"_33411704","lineClamp-4":"bfc32640","lineClamp-5":"f813c82f"};
+var modules_d11e18f0 = {"stackedToastsView":"_8e9f0a55","toastContainer":"_121b9429","slot":"_6a2a04c5"};
 
-const _excluded$c = ["as", "size", "weight", "tone", "align", "children", "lineClamp", "exceptionallySetClassName"];
-const Text = /*#__PURE__*/polymorphicComponent(function Text(_ref, ref) {
+const _excluded$c = ["message", "description", "icon", "action", "onDismiss", "dismissLabel"];
+/**
+ * A toast that shows a message, and an optional action associated with it.
+ *
+ * This component is generally not meant to be used directly. Most of the time you'll want to use
+ * toasts generated via `useToasts` instead. However, this component is available in case you need
+ * to take control of rendering a toast under different circumstances than that of notification-like
+ * floating toasts.
+ *
+ * This component makes no assumptions outwardly about how it is positioned on the screen. That is,
+ * it will not be shown floating or fixed to the viewport edges, as toasts normally show up. It only
+ * provides the toast look and feel, but you are responsible for positioning it as you want.
+ *
+ * @see useToasts
+ */
+
+const StaticToast = /*#__PURE__*/React__default.forwardRef(function Toast(_ref, ref) {
   let {
-    as,
-    size = 'body',
+    message,
+    description,
+    icon,
+    action,
+    onDismiss,
+    dismissLabel = 'Close'
+  } = _ref,
+      props = _objectWithoutProperties(_ref, _excluded$c);
+
+  return /*#__PURE__*/React__default.createElement(Box, _objectSpread2({
+    ref: ref,
+    role: "alert",
+    "aria-live": "polite",
+    borderRadius: "full",
+    width: "fitContent",
+    background: "toast",
+    display: "flex",
+    padding: "large",
+    alignItems: "center",
+    className: modules_d11e18f0.toastContainer
+  }, props), icon ? /*#__PURE__*/React__default.createElement(ToastContentSlot, null, icon) : null, /*#__PURE__*/React__default.createElement(Box, {
+    flexGrow: 1,
+    maxWidth: "small"
+  }, description ? /*#__PURE__*/React__default.createElement(Stack, {
+    space: "small"
+  }, /*#__PURE__*/React__default.createElement(Text, {
+    weight: "bold"
+  }, message, " "), /*#__PURE__*/React__default.createElement(Text, null, description)) : /*#__PURE__*/React__default.createElement(Text, null, message)), action ? /*#__PURE__*/React__default.createElement(ToastContentSlot, null, isActionObject(action) ? /*#__PURE__*/React__default.createElement(Button, {
+    variant: "tertiary",
+    size: "small",
+    onClick: action.onClick
+  }, action.label) : action) : null, onDismiss ? /*#__PURE__*/React__default.createElement(ToastContentSlot, null, /*#__PURE__*/React__default.createElement(Button, {
+    variant: "quaternary",
+    size: "small",
+    onClick: onDismiss,
+    "aria-label": dismissLabel,
+    icon: /*#__PURE__*/React__default.createElement(CloseIcon, null)
+  })) : null);
+});
+
+function isActionObject(action) {
+  return action != null && typeof action === 'object' && 'label' in action && 'onClick' in action && typeof action.label === 'string' && typeof action.onClick === 'function';
+}
+
+function ToastContentSlot({
+  children
+}) {
+  return /*#__PURE__*/React__default.createElement(Box, {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    marginX: "-xsmall",
+    marginY: "-medium",
+    className: modules_d11e18f0.slot
+  }, children);
+}
+
+let uid = 0;
+
+function uniqueId() {
+  return uid++;
+}
+
+function generateElementId(prefix) {
+  const num = uniqueId();
+  return prefix + "-" + num;
+}
+function useId(providedId) {
+  const ref = React.useRef(providedId != null ? providedId : null);
+
+  if (!ref.current) {
+    ref.current = generateElementId('element');
+  }
+
+  return ref.current;
+}
+
+/**
+ * Adapted with minor changes from https://github.com/seek-oss/braid-design-system/blob/7a5ebccb/packages/braid-design-system/lib/components/useToast/useFlipList.ts
+ *
+ * MIT License
+ *
+ * Copyright (c) 2018 SEEK
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+const ANIMATION_TIMEOUT = 400;
+const ENTRANCE_TRANSITION = 'transform 0.3s ease, opacity 0.3s ease';
+const EXIT_TRANSITION = 'opacity 0.2s ease';
+/**
+ * Applies the "from" value of given CSS properties, and also sets a transition CSS property. Then
+ * it waits an animation frame before setting the same CSS properties to the target "to" value. This
+ * triggers the browser to perform the CSS transition on them.
+ *
+ * At the end of the animation, it cleans up, unsetting all the CSS properties (including the
+ * transition), and calls the "done" callback, if given.
+ */
+
+function animate({
+  element,
+  transforms,
+  transition,
+  done
+}) {
+  const fallbackTimeout = setTimeout(() => {
+    done == null ? void 0 : done();
+  }, ANIMATION_TIMEOUT);
+  transforms.forEach(({
+    property,
+    from = ''
+  }) => {
+    element.style.setProperty(property, from);
+  });
+  element.style.setProperty('transition', '');
+
+  function transitionEndHandler(event) {
+    if (event.target !== element) {
+      return;
+    }
+
+    element.style.setProperty('transition', '');
+    done == null ? void 0 : done();
+    element.removeEventListener('transitionend', transitionEndHandler);
+    clearTimeout(fallbackTimeout);
+  }
+
+  element.addEventListener('transitionend', transitionEndHandler); // Call requestAnimationFrame twice to make sure we have a full animation frame at our disposal
+
+  window.requestAnimationFrame(() => {
+    window.requestAnimationFrame(() => {
+      element.style.setProperty('transition', transition);
+      transforms.forEach(({
+        property,
+        to = ''
+      }) => {
+        element.style.setProperty(property, to);
+      });
+    });
+  });
+}
+/**
+ * Provides the functionality of animating the stacked toasts when they appear and before they
+ * disappear.
+ *
+ * It works by keeping a mapping from toast IDs to the toast elements, and keeping a mapping from
+ * toast IDs to their top position. Then, on every single re-render, it compares the new DOM
+ * situation with the previously stored one in these mappings. With this information, it applies
+ * animations that smoothly transitions between both states.
+ */
+
+
+function useToastsAnimation() {
+  const refs = React.useMemo(() => new Map(), []);
+  const positions = React.useMemo(() => new Map(), []);
+  React.useLayoutEffect(() => {
+    const animations = [];
+    Array.from(refs.entries()).forEach(([id, element]) => {
+      if (!element) {
+        refs.delete(id);
+        return;
+      }
+
+      const prevTop = positions.get(id);
+      const {
+        top,
+        height
+      } = element.getBoundingClientRect();
+
+      if (typeof prevTop === 'number' && prevTop !== top) {
+        // Move animation
+        animations.push({
+          element,
+          transition: ENTRANCE_TRANSITION,
+          transforms: [{
+            property: 'transform',
+            from: "translateY(" + (prevTop - top) + "px)"
+          }]
+        });
+      } else if (typeof prevTop !== 'number') {
+        // Enter animation
+        animations.push({
+          element,
+          transition: ENTRANCE_TRANSITION,
+          transforms: [{
+            property: 'transform',
+            from: "translateY(" + height + "px)"
+          }, {
+            property: 'opacity',
+            from: '0'
+          }]
+        });
+      }
+
+      positions.set(id, element.getBoundingClientRect().top);
+    });
+    animations.forEach(({
+      element,
+      transforms,
+      transition
+    }) => {
+      animate({
+        element,
+        transforms,
+        transition
+      });
+    });
+  });
+  const animateRemove = React.useCallback(function animateRemove(id, onAnimationDone) {
+    const element = refs.get(id);
+
+    if (element) {
+      // Removal animation
+      animate({
+        element,
+        transforms: [{
+          property: 'opacity',
+          to: '0'
+        }],
+        transition: EXIT_TRANSITION,
+        done: onAnimationDone
+      });
+    }
+  }, [refs]);
+  const mappedRef = React.useCallback(id => ref => {
+    refs.set(id, ref);
+  }, [refs]);
+  return {
+    mappedRef,
+    animateRemove
+  };
+}
+
+const _excluded$d = ["toastId"];
+/** @private */
+
+const InternalToast = /*#__PURE__*/React__default.forwardRef(function InternalToast({
+  message,
+  description,
+  icon,
+  action,
+  autoDismissDelay,
+  dismissLabel,
+  showDismissButton = true,
+  toastId,
+  onDismiss,
+  onRemoveToast
+}, ref) {
+  const [timeoutRunning, setTimeoutRunning] = React__default.useState(Boolean(autoDismissDelay));
+  const timeoutRef = React__default.useRef();
+  const startTimeout = React__default.useCallback(function startTimeout() {
+    setTimeoutRunning(true);
+  }, []);
+  const stopTimeout = React__default.useCallback(function stopTimeout() {
+    setTimeoutRunning(false);
+    clearTimeout(timeoutRef.current);
+    timeoutRef.current = undefined;
+  }, []);
+  React__default.useEffect(function setupAutoDismiss() {
+    if (!timeoutRunning || !autoDismissDelay) return;
+    timeoutRef.current = window.setTimeout(() => {
+      onRemoveToast(toastId);
+      onDismiss == null ? void 0 : onDismiss();
+    }, autoDismissDelay * 1000);
+    return stopTimeout;
+  }, [autoDismissDelay, onDismiss, onRemoveToast, toastId, stopTimeout, timeoutRunning]);
+  return /*#__PURE__*/React__default.createElement(StaticToast, {
+    ref: ref,
+    message: message,
+    description: description,
+    icon: icon,
+    action: action,
+    onDismiss: showDismissButton ? () => {
+      onDismiss == null ? void 0 : onDismiss();
+      onRemoveToast(toastId);
+    } : undefined,
+    dismissLabel: dismissLabel,
+    // @ts-expect-error
+    onMouseEnter: stopTimeout,
+    onMouseLeave: startTimeout
+  });
+});
+const ToastsContext = /*#__PURE__*/React__default.createContext(() => () => undefined);
+/**
+ * Provides the state management and rendering of the toasts currently active.
+ *
+ * You need to render this near the top of your app components tree, in order to `useToasts`.
+ *
+ * @see useToasts
+ */
+
+function ToastsProvider({
+  children,
+  padding = 'large',
+  defaultAutoDismissDelay = 10
+  /* seconds */
+  ,
+  defaultDismissLabel = 'Close'
+}) {
+  const [toasts, setToasts] = React__default.useState([]);
+  const {
+    mappedRef,
+    animateRemove
+  } = useToastsAnimation();
+  const removeToast = React__default.useCallback(function onRemoveToast(toastId) {
+    animateRemove(toastId, () => {
+      setToasts(list => {
+        const index = list.findIndex(n => n.toastId === toastId);
+        if (index < 0) return list;
+        const copy = [...list];
+        copy.splice(index, 1);
+        return copy;
+      });
+    });
+  }, [animateRemove]);
+  const showToast = React__default.useCallback(function showToast(props) {
+    const toastId = generateElementId('toast');
+
+    const newToast = _objectSpread2(_objectSpread2({
+      autoDismissDelay: defaultAutoDismissDelay,
+      dismissLabel: defaultDismissLabel
+    }, props), {}, {
+      toastId
+    });
+
+    setToasts(list => [...list, newToast]);
+    return () => removeToast(toastId);
+  }, [defaultAutoDismissDelay, defaultDismissLabel, removeToast]);
+  return /*#__PURE__*/React__default.createElement(ToastsContext.Provider, {
+    value: showToast
+  }, children, /*#__PURE__*/React__default.createElement(portal.Portal, null, toasts.length === 0 ? null : /*#__PURE__*/React__default.createElement(Box, {
+    className: modules_d11e18f0.stackedToastsView,
+    position: "fixed",
+    width: "full",
+    paddingX: padding,
+    paddingBottom: padding
+  }, /*#__PURE__*/React__default.createElement(Stack, {
+    space: "medium"
+  }, toasts.map(_ref => {
+    let {
+      toastId
+    } = _ref,
+        props = _objectWithoutProperties(_ref, _excluded$d);
+
+    return /*#__PURE__*/React__default.createElement(InternalToast, _objectSpread2({
+      key: toastId,
+      ref: mappedRef(toastId),
+      toastId: toastId,
+      onRemoveToast: removeToast
+    }, props));
+  })))));
+}
+/**
+ * Provides a function `showToast` that shows a new toast every time you call it.
+ *
+ * ```jsx
+ * const showToast = useToasts()
+ *
+ * <button onClick={() => showToast({ message: 'Hello' })}>
+ *   Say hello
+ * </button>
+ * ```
+ *
+ * All toasts fired via this function are rendered in a global fixed location, and stacked one on
+ * top of the other.
+ *
+ * When called, `showToast` returns a function that dismisses the toast when called.
+ *
+ * @see ToastsProvider
+ */
+
+
+function useToasts() {
+  return React__default.useContext(ToastsContext);
+}
+/**
+ * Adds a toast to be rendered, stacked alongside any other currently active toasts.
+ *
+ * For most situations, you should prefer to use the `showToast` function obtained from `useToasts`.
+ * This component is provided for convenience to render toasts in the markup, but it has some
+ * peculiarities, which are discussed below.
+ *
+ * Internally, this calls `showToast`. It is provided for two reasons:
+ *
+ * 1. Convenience, when you want to fire a toast in markup/jsx code. Keep in mind, though, that
+ *    toasts rendered in this way will be removed from view when the context where it is rendered
+ *    is unmounted. Unlike toasts fired with `showToast`, which will normally be dismissed, either
+ *    by the user or after a delay. They'll still be animated on their way out, though.
+ * 2. When combined with disabling dismissing it (e.g. `showDismissButton={false}` and
+ *    `autoDismissDelay={false}` it provides a way to show "permanent" toasts that only go away when
+ *    the component ceases to be rendered).
+ *
+ * This is useful for cases when the consumer wants to control when a toast is visible, and to keep
+ * it visible based on an app-specific condition.
+ *
+ * Something important to note about this component is that it triggers the toast based on the props
+ * passed when first rendered, and it does not update the toast if these props change on subsequent
+ * renders. In this sense, this is an imperative component, more than a descriptive one. This is
+ * done to simplify the internals, and to keep it in line with how `showToast` works: you fire up a
+ * toast imperatively, and you loose control over it. It remains rendered according to the props you
+ * first passed.
+ *
+ * @see useToasts
+ */
+
+
+function Toast(props) {
+  const showToast = useToasts();
+  const propsRef = React__default.useRef(props);
+  React__default.useEffect(() => {
+    const dismissToast = showToast(propsRef.current);
+    return dismissToast;
+  }, [showToast]);
+  return null;
+}
+
+var modules_949d2ff4 = {"heading":"_71a1610c","weight-light":"_63750f40","tone-secondary":"_9ce984cf","tone-danger":"_1acad35e","size-largest":"_3da27a00","size-larger":"df220733","size-smaller":"eb373739","lineClampMultipleLines":"f53cfd2b","lineClamp-1":"e4819fc9","lineClamp-2":"a0ed6177","lineClamp-3":"_180d433e","lineClamp-4":"_40826ad9","lineClamp-5":"_5999b247"};
+
+const _excluded$e = ["level", "weight", "size", "tone", "children", "lineClamp", "align", "exceptionallySetClassName"];
+const Heading = /*#__PURE__*/React.forwardRef(function Heading(_ref, ref) {
+  let {
+    level,
     weight = 'regular',
+    size,
     tone = 'normal',
-    align,
     children,
     lineClamp,
+    align,
     exceptionallySetClassName
   } = _ref,
-      props = _objectWithoutProperties(_ref, _excluded$c);
+      props = _objectWithoutProperties(_ref, _excluded$e);
 
-  const lineClampMultipleLines = typeof lineClamp === 'string' ? Number(lineClamp) > 1 : (lineClamp != null ? lineClamp : 1) > 1;
+  // In TypeScript v4.1, this would be properly recognized without needing the type assertion
+  // https://devblogs.microsoft.com/typescript/announcing-typescript-4-1-beta/#template-literal-types
+  const headingElementName = "h" + level;
+  const lineClampMultipleLines = typeof lineClamp === 'string' ? parseInt(lineClamp, 10) > 1 : (lineClamp || 0) > 1;
   return /*#__PURE__*/React.createElement(Box, _objectSpread2(_objectSpread2({}, props), {}, {
-    as: as,
-    className: [exceptionallySetClassName, modules_a9637dd3.text, size !== 'body' ? getClassNames(modules_a9637dd3, 'size', size) : null, weight !== 'regular' ? getClassNames(modules_a9637dd3, 'weight', weight) : null, tone !== 'normal' ? getClassNames(modules_a9637dd3, 'tone', tone) : null, lineClampMultipleLines ? modules_a9637dd3.lineClampMultipleLines : null, lineClamp ? getClassNames(modules_a9637dd3, 'lineClamp', lineClamp.toString()) : null],
+    className: [exceptionallySetClassName, modules_949d2ff4.heading, weight !== 'regular' ? getClassNames(modules_949d2ff4, 'weight', weight) : null, tone !== 'normal' ? getClassNames(modules_949d2ff4, 'tone', tone) : null, getClassNames(modules_949d2ff4, 'size', size), lineClampMultipleLines ? modules_949d2ff4.lineClampMultipleLines : null, lineClamp ? getClassNames(modules_949d2ff4, 'lineClamp', lineClamp.toString()) : null],
     textAlign: align,
     // Prevents emojis from being cut-off
     // See https://github.com/Doist/reactist/pull/528
     paddingRight: lineClamp ? 'xsmall' : undefined,
+    as: headingElementName,
     ref: ref
   }), children);
 });
 
-const _excluded$d = ["as", "variant", "tone", "size", "exceptionallySetClassName", "openInNewTab"];
+const _excluded$f = ["as", "variant", "tone", "size", "exceptionallySetClassName", "openInNewTab"];
 /**
  * A semantic link that looks like a button, exactly matching the `Button` component in all visual
  * aspects.
@@ -941,7 +1393,7 @@ const ButtonLink = /*#__PURE__*/polymorphicComponent(function ButtonLink(_ref, r
     exceptionallySetClassName,
     openInNewTab = false
   } = _ref,
-      props = _objectWithoutProperties(_ref, _excluded$d);
+      props = _objectWithoutProperties(_ref, _excluded$f);
 
   return /*#__PURE__*/React.createElement(BaseButton, _objectSpread2(_objectSpread2({}, props), {}, {
     as: as,
@@ -957,14 +1409,14 @@ const ButtonLink = /*#__PURE__*/polymorphicComponent(function ButtonLink(_ref, r
 
 var modules_3d05deee = {"container":"_232127ef"};
 
-const _excluded$e = ["as", "openInNewTab", "exceptionallySetClassName"];
+const _excluded$g = ["as", "openInNewTab", "exceptionallySetClassName"];
 const TextLink = /*#__PURE__*/polymorphicComponent(function TextLink(_ref, ref) {
   let {
     as = 'a',
     openInNewTab = false,
     exceptionallySetClassName
   } = _ref,
-      props = _objectWithoutProperties(_ref, _excluded$e);
+      props = _objectWithoutProperties(_ref, _excluded$g);
 
   return /*#__PURE__*/React.createElement(Box, _objectSpread2(_objectSpread2({}, props), {}, {
     as: as,
@@ -976,7 +1428,7 @@ const TextLink = /*#__PURE__*/polymorphicComponent(function TextLink(_ref, ref)
   }));
 });
 
-const _excluded$f = ["checked", "indeterminate", "disabled"];
+const _excluded$h = ["checked", "indeterminate", "disabled"];
 const svgPath = {
   checked: 'M18 4a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h12zm-2.457 4.293l-5.293 5.293-1.793-1.793a1 1 0 1 0-1.414 1.414l2.5 2.5a1 1 0 0 0 1.414 0l6-6a1 1 0 1 0-1.414-1.414z',
   unchecked: 'M18 4a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h12zm0 1H6a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V6a1 1 0 0 0-1-1z',
@@ -1015,7 +1467,7 @@ function CheckboxIcon(_ref) {
     indeterminate,
     disabled
   } = _ref,
-      props = _objectWithoutProperties(_ref, _excluded$f);
+      props = _objectWithoutProperties(_ref, _excluded$h);
 
   const pathKey = getPathKey({
     checked,
@@ -1036,7 +1488,7 @@ function CheckboxIcon(_ref) {
 
 var modules_664a6a80 = {"container":"_96c4d12f","disabled":"_5048e2a5","checked":"_42187b48","keyFocused":"_3510166f"};
 
-const _excluded$g = ["label", "disabled", "indeterminate", "defaultChecked", "onChange"];
+const _excluded$i = ["label", "disabled", "indeterminate", "defaultChecked", "onChange"];
 const CheckboxField = /*#__PURE__*/React.forwardRef(function CheckboxField(_ref, ref) {
   var _ref2, _props$checked, _props$checked2;
 
@@ -1047,7 +1499,7 @@ const CheckboxField = /*#__PURE__*/React.forwardRef(function CheckboxField(_ref,
     defaultChecked,
     onChange
   } = _ref,
-      props = _objectWithoutProperties(_ref, _excluded$g);
+      props = _objectWithoutProperties(_ref, _excluded$i);
 
   const isControlledComponent = typeof props.checked === 'boolean';
 
@@ -1106,26 +1558,6 @@ const CheckboxField = /*#__PURE__*/React.forwardRef(function CheckboxField(_ref,
   }), label ? /*#__PURE__*/React.createElement(Text, null, label) : null);
 });
 
-let uid = 0;
-
-function uniqueId() {
-  return uid++;
-}
-
-function generateElementId(prefix) {
-  const num = uniqueId();
-  return prefix + "-" + num;
-}
-function useId(providedId) {
-  const ref = React.useRef(providedId != null ? providedId : null);
-
-  if (!ref.current) {
-    ref.current = generateElementId('element');
-  }
-
-  return ref.current;
-}
-
 var modules_540a88ff = {"container":"_2e189908","auxiliaryLabel":"_83051e0a","bordered":"fd20ef50","error":"d1a17d92","primaryLabel":"_75e0afa0","secondaryLabel":"d04a867d","messageIcon":"_77b2107e"};
 
 function FieldHint(props) {
@@ -1275,7 +1707,7 @@ var modules_3f03ead6 = {"inputWrapper":"_66b448b3"};
 
 var modules_aaf25250 = {"inputWrapper":"_9d172ece","bordered":"c59d0239","error":"_7e63ee20"};
 
-const _excluded$h = ["variant", "label", "secondaryLabel", "auxiliaryLabel", "hint", "message", "tone", "maxWidth", "togglePasswordLabel", "hidden", "aria-describedby"];
+const _excluded$j = ["variant", "label", "secondaryLabel", "auxiliaryLabel", "hint", "message", "tone", "maxWidth", "togglePasswordLabel", "hidden", "aria-describedby"];
 const PasswordField = /*#__PURE__*/React.forwardRef(function PasswordField(_ref, ref) {
   let {
     variant = 'default',
@@ -1290,7 +1722,7 @@ const PasswordField = /*#__PURE__*/React.forwardRef(function PasswordField(_ref,
     hidden,
     'aria-describedby': ariaDescribedBy
   } = _ref,
-      props = _objectWithoutProperties(_ref, _excluded$h);
+      props = _objectWithoutProperties(_ref, _excluded$j);
 
   const id = useId(props.id);
   const internalRef = React.useRef(null);
@@ -1339,7 +1771,7 @@ const PasswordField = /*#__PURE__*/React.forwardRef(function PasswordField(_ref,
 
 var modules_1fa9b208 = {"selectWrapper":"_07e75293","error":"f147bcea"};
 
-const _excluded$i = ["id", "label", "secondaryLabel", "auxiliaryLabel", "hint", "message", "tone", "maxWidth", "children", "hidden", "aria-describedby"];
+const _excluded$k = ["id", "label", "secondaryLabel", "auxiliaryLabel", "hint", "message", "tone", "maxWidth", "children", "hidden", "aria-describedby"];
 const SelectField = /*#__PURE__*/React.forwardRef(function SelectField(_ref, ref) {
   let {
     id,
@@ -1354,7 +1786,7 @@ const SelectField = /*#__PURE__*/React.forwardRef(function SelectField(_ref, ref
     hidden,
     'aria-describedby': ariaDescribedBy
   } = _ref,
-      props = _objectWithoutProperties(_ref, _excluded$i);
+      props = _objectWithoutProperties(_ref, _excluded$k);
 
   return /*#__PURE__*/React.createElement(BaseField, {
     id: id,
@@ -1390,7 +1822,7 @@ function SelectChevron(props) {
 
 var modules_8e05f7c9 = {"container":"ec63c3f1","disabled":"_7de9c06d","checked":"a37981fc","toggle":"_2a17ac45","label":"_68cc9707","handle":"_91409c7f","keyFocused":"a6490371"};
 
-const _excluded$j = ["label", "hint", "disabled", "hidden", "defaultChecked", "id", "aria-describedby", "aria-label", "aria-labelledby", "onChange"];
+const _excluded$l = ["label", "hint", "disabled", "hidden", "defaultChecked", "id", "aria-describedby", "aria-label", "aria-labelledby", "onChange"];
 const SwitchField = /*#__PURE__*/React.forwardRef(function SwitchField(_ref, ref) {
   var _ref2, _props$checked, _props$checked2;
 
@@ -1406,7 +1838,7 @@ const SwitchField = /*#__PURE__*/React.forwardRef(function SwitchField(_ref, ref
     'aria-labelledby': originalAriaLabelledby,
     onChange
   } = _ref,
-      props = _objectWithoutProperties(_ref, _excluded$j);
+      props = _objectWithoutProperties(_ref, _excluded$l);
 
   const id = useId(originalId);
   const hintId = useId();
@@ -1466,7 +1898,7 @@ const SwitchField = /*#__PURE__*/React.forwardRef(function SwitchField(_ref, ref
 
 var modules_2728c236 = {"textAreaContainer":"_61447829","bordered":"_76f4ad88","error":"_4df3452b"};
 
-const _excluded$k = ["variant", "id", "label", "secondaryLabel", "auxiliaryLabel", "hint", "message", "tone", "maxWidth", "hidden", "aria-describedby"];
+const _excluded$m = ["variant", "id", "label", "secondaryLabel", "auxiliaryLabel", "hint", "message", "tone", "maxWidth", "hidden", "aria-describedby"];
 
 function TextArea(_ref) {
   let {
@@ -1482,7 +1914,7 @@ function TextArea(_ref) {
     hidden,
     'aria-describedby': ariaDescribedBy
   } = _ref,
-      props = _objectWithoutProperties(_ref, _excluded$k);
+      props = _objectWithoutProperties(_ref, _excluded$m);
 
   return /*#__PURE__*/React.createElement(BaseField, {
     variant: variant,
@@ -1503,7 +1935,7 @@ function TextArea(_ref) {
   }, /*#__PURE__*/React.createElement("textarea", _objectSpread2(_objectSpread2({}, props), extraProps))));
 }
 
-const _excluded$l = ["variant", "id", "label", "secondaryLabel", "auxiliaryLabel", "hint", "message", "tone", "type", "maxWidth", "hidden", "aria-describedby"];
+const _excluded$n = ["variant", "id", "label", "secondaryLabel", "auxiliaryLabel", "hint", "message", "tone", "type", "maxWidth", "hidden", "aria-describedby"];
 const TextField = /*#__PURE__*/React.forwardRef(function TextField(_ref, ref) {
   let {
     variant = 'default',
@@ -1519,7 +1951,7 @@ const TextField = /*#__PURE__*/React.forwardRef(function TextField(_ref, ref) {
     hidden,
     'aria-describedby': ariaDescribedBy
   } = _ref,
-      props = _objectWithoutProperties(_ref, _excluded$l);
+      props = _objectWithoutProperties(_ref, _excluded$n);
 
   return /*#__PURE__*/React.createElement(BaseField, {
     variant: variant,
@@ -1570,7 +2002,7 @@ function emailToIndex(email, maxIndex) {
 
 var modules_08f3eeac = {"avatar":"_38a1be89","size-xxs":"d32e92ae","size-xs":"_0667d719","size-s":"cf529fcf","size-m":"_6e268eab","size-l":"d64c62cf","size-xl":"_44fb77de","size-xxl":"_01f85e0e","size-xxxl":"_41a5fe19","tablet-size-xxs":"_6ab1577d","tablet-size-xs":"b52a4963","tablet-size-s":"_714a8419","tablet-size-m":"_81cd4d51","tablet-size-l":"bf0a4edb","tablet-size-xl":"e4f0dabd","tablet-size-xxl":"_67ea065d","tablet-size-xxxl":"_2af7f76f","desktop-size-xxs":"_759081dc","desktop-size-xs":"_8290d1c1","desktop-size-s":"_48ea172d","desktop-size-m":"_758f6641","desktop-size-l":"f9ada088","desktop-size-xl":"d3bb7470","desktop-size-xxl":"_9a312ee3","desktop-size-xxxl":"a1d30c23"};
 
-const _excluded$m = ["user", "avatarUrl", "size", "className", "colorList", "exceptionallySetClassName"];
+const _excluded$o = ["user", "avatarUrl", "size", "className", "colorList", "exceptionallySetClassName"];
 const AVATAR_COLORS = ['#fcc652', '#e9952c', '#e16b2d', '#d84b40', '#e8435a', '#e5198a', '#ad3889', '#86389c', '#a8a8a8', '#98be2f', '#5d9d50', '#5f9f85', '#5bbcb6', '#32a3bf', '#2bafeb', '#2d88c3', '#3863cc', '#5e5e5e'];
 
 function Avatar(_ref) {
@@ -1582,7 +2014,7 @@ function Avatar(_ref) {
     colorList = AVATAR_COLORS,
     exceptionallySetClassName
   } = _ref,
-      props = _objectWithoutProperties(_ref, _excluded$m);
+      props = _objectWithoutProperties(_ref, _excluded$o);
 
   const userInitials = getInitials(user.name) || getInitials(user.email);
   const avatarSize = size ? size : 'l';
@@ -1602,16 +2034,16 @@ function Avatar(_ref) {
 
 Avatar.displayName = 'Avatar';
 
-var modules_33c7c985 = {"badge":"_0b1e00ed","badge-neutral":"dda494a5","badge-positive":"_9260b8b0","badge-color":"_73a14c03"};
+var modules_33c7c985 = {"badge":"d05d2b62","badge-neutral":"a14691f3","badge-positive":"_4e255fdb","badge-color":"a58624e2"};
 
-const _excluded$n = ["variant", "children"];
+const _excluded$p = ["variant", "children"];
 
 function Badge(_ref) {
   let {
     variant = 'neutral',
     children
   } = _ref,
-      rest = _objectWithoutProperties(_ref, _excluded$n);
+      rest = _objectWithoutProperties(_ref, _excluded$p);
 
   const variantClassName = modules_33c7c985["badge-" + variant];
   return /*#__PURE__*/React.createElement(Box, _objectSpread2(_objectSpread2({}, rest), {}, {
@@ -1621,7 +2053,7 @@ function Badge(_ref) {
 
 var modules_8f59d13b = {"overlay":"_868392ae","fadein":"_63d7ee15","fitContent":"b8548bf2","container":"_31956461","full":"_1007df83","large":"_10c275aa","medium":"_0ac526b4","small":"_30f38fdb","xlarge":"_54868e8b","expand":"c0bc68bc","buttonContainer":"_6527332a","headerContent":"_4750dc1b"};
 
-const _excluded$o = ["isOpen", "onDismiss", "height", "width", "exceptionallySetClassName", "autoFocus", "children"],
+const _excluded$q = ["isOpen", "onDismiss", "height", "width", "exceptionallySetClassName", "autoFocus", "children"],
       _excluded2$1 = ["children", "button", "withDivider", "exceptionallySetClassName"],
       _excluded3 = ["exceptionallySetClassName", "children"],
       _excluded4 = ["exceptionallySetClassName", "withDivider"],
@@ -1655,7 +2087,7 @@ function Modal(_ref) {
     autoFocus = true,
     children
   } = _ref,
-      props = _objectWithoutProperties(_ref, _excluded$o);
+      props = _objectWithoutProperties(_ref, _excluded$q);
 
   const setVisible = React.useCallback(visible => {
     if (!visible) {
@@ -1899,7 +2331,7 @@ function usePrevious(value) {
 
 var modules_40c67f5b = {"tab":"a1064a3b","track":"_06f1b8a1","tab-neutral":"dabbec7d","tab-themed":"e6f5ae4e","track-neutral":"_43913ce5","track-themed":"_39bdfdde","track-xsmall":"_1c148f4e","track-small":"_2a370df5","track-medium":"_77430437","track-large":"_33db5352","track-xlarge":"_60bf9564","track-xxlarge":"_29a35080"};
 
-const _excluded$p = ["as", "children", "id", "exceptionallySetClassName"],
+const _excluded$r = ["as", "children", "id", "exceptionallySetClassName"],
       _excluded2$2 = ["children", "space"],
       _excluded3$1 = ["children", "id", "as", "render"];
 const TabsContext = /*#__PURE__*/React.createContext(null);
@@ -1949,7 +2381,7 @@ const Tab = /*#__PURE__*/polymorphicComponent(function Tab(_ref, ref) {
     id,
     exceptionallySetClassName
   } = _ref,
-      props = _objectWithoutProperties(_ref, _excluded$p);
+      props = _objectWithoutProperties(_ref, _excluded$r);
 
   const tabContextValue = React.useContext(TabsContext);
 
@@ -2058,7 +2490,7 @@ function TabAwareSlot({
   }) : null;
 }
 
-const _excluded$q = ["type", "variant", "size", "loading", "disabled", "tooltip", "onClick", "children"];
+const _excluded$s = ["type", "variant", "size", "loading", "disabled", "tooltip", "onClick", "children"];
 /**
  * @deprecated
  */
@@ -2074,7 +2506,7 @@ const Button$1 = /*#__PURE__*/React.forwardRef(function Button(_ref, ref) {
     onClick,
     children
   } = _ref,
-      props = _objectWithoutProperties(_ref, _excluded$q);
+      props = _objectWithoutProperties(_ref, _excluded$s);
 
   const className = classNames('reactist_button', variant ? "reactist_button--" + variant : null, size !== 'default' ? "reactist_button--" + size : null, {
     'reactist_button--loading': loading
@@ -2097,7 +2529,7 @@ Button$1.defaultProps = {
   disabled: false
 };
 
-const _excluded$r = ["children", "onClick", "tooltip", "className"];
+const _excluded$t = ["children", "onClick", "tooltip", "className"];
 
 class Box$1 extends React.Component {
   constructor(props, context) {
@@ -2250,7 +2682,7 @@ const Trigger = /*#__PURE__*/React.forwardRef(function Trigger(_ref, ref) {
     tooltip,
     className
   } = _ref,
-      props = _objectWithoutProperties(_ref, _excluded$r);
+      props = _objectWithoutProperties(_ref, _excluded$t);
 
   function handleClick(event) {
     event.preventDefault();
@@ -2377,7 +2809,7 @@ function ColorItem({
 
 ColorItem.displayName = 'ColorItem';
 
-const _excluded$s = ["children", "className", "translateKey", "isMac"];
+const _excluded$u = ["children", "className", "translateKey", "isMac"];
 // Support for setting up how to translate modifiers globally.
 //
 
@@ -2459,7 +2891,7 @@ function KeyboardShortcut(_ref) {
     translateKey = globalTranslateKey,
     isMac = (_navigator$platform$t = (_navigator$platform = navigator.platform) == null ? void 0 : _navigator$platform.toUpperCase().includes('MAC')) != null ? _navigator$platform$t : false
   } = _ref,
-      props = _objectWithoutProperties(_ref, _excluded$s);
+      props = _objectWithoutProperties(_ref, _excluded$u);
 
   const shortcuts = typeof children === 'string' ? [children] : children;
   return /*#__PURE__*/React.createElement("span", _objectSpread2({
@@ -2865,83 +3297,7 @@ Time.defaultProps = {
   }
 };
 
-const CloseIcon$1 = () => /*#__PURE__*/React.createElement("svg", {
-  width: "24",
-  height: "24",
-  viewBox: "0 0 24 24"
-}, /*#__PURE__*/React.createElement("path", {
-  fill: "gray",
-  fillRule: "evenodd",
-  d: "M11.293 12L5.146 5.854a.5.5 0 1 1 .708-.708L12 11.293l6.146-6.147a.5.5 0 0 1 .708.708L12.707 12l6.147 6.146a.5.5 0 0 1-.708.708L12 12.707l-6.146 6.147a.5.5 0 0 1-.708-.708L11.293 12z"
-}));
-
-const _excluded$t = ["id", "icon", "title", "subtitle", "children", "customCloseButton", "onClick", "onClose", "closeAltText", "className", "aria-live"];
-
-function Notification(_ref) {
-  let {
-    id,
-    icon,
-    title,
-    subtitle,
-    children,
-    customCloseButton,
-    onClick,
-    onClose,
-    closeAltText = 'Close',
-    className,
-    'aria-live': ariaLive = 'polite'
-  } = _ref,
-      rest = _objectWithoutProperties(_ref, _excluded$t);
-
-  const titleId = title ? id + "-title" : null;
-  const titleIdAttribute = titleId ? {
-    id: titleId
-  } : null;
-  const subtitleId = subtitle ? id + "-subtitle" : null;
-  const subtitleIdAttribute = subtitleId ? {
-    id: subtitleId
-  } : null;
-  const contentId = children ? id + "-content" : null;
-  const contentIdAttribute = children ? {
-    id: id + "-content"
-  } : null;
-  const ariaLabelledBy = contentId ? {
-    'aria-labelledby': contentId
-  } : titleId ? {
-    'aria-labelledby': titleId
-  } : null;
-  const ariaDescribedBy = subtitleId && !children ? {
-    'aria-describedby': subtitleId
-  } : null;
-  const notificationContent = /*#__PURE__*/React.createElement("div", _objectSpread2({
-    className: "reactist-notification__content"
-  }, contentIdAttribute), children != null ? children : /*#__PURE__*/React.createElement(React.Fragment, null, title ? /*#__PURE__*/React.createElement("h3", _objectSpread2({
-    className: "reactist-notification__title"
-  }, titleIdAttribute), title) : null, subtitle ? /*#__PURE__*/React.createElement("p", _objectSpread2({
-    className: "reactist-notification__subtitle"
-  }, subtitleIdAttribute), subtitle) : null));
-  const notificationBody = /*#__PURE__*/React.createElement("div", {
-    className: "reactist-notification__icon-content-group"
-  }, icon != null ? icon : null, notificationContent);
-  return /*#__PURE__*/React.createElement("div", _objectSpread2(_objectSpread2(_objectSpread2({
-    id: id,
-    role: "alert",
-    className: classNames('reactist-notification', className, {
-      'reactist-notification--with-button': Boolean(onClick),
-      'reactist-notification--with-close-button': Boolean(onClose)
-    }),
-    "aria-live": ariaLive
-  }, ariaLabelledBy), ariaDescribedBy), rest), onClick ? /*#__PURE__*/React.createElement("button", {
-    className: "reactist-notification__button",
-    onClick: onClick
-  }, notificationBody) : notificationBody, onClose ? /*#__PURE__*/React.createElement("button", {
-    className: "reactist-notification__close-button",
-    onClick: onClose,
-    "aria-label": closeAltText
-  }, customCloseButton != null ? customCloseButton : /*#__PURE__*/React.createElement(CloseIcon$1, null)) : null);
-}
-
-const _excluded$u = ["children", "onItemSelect"],
+const _excluded$v = ["children", "onItemSelect"],
       _excluded2$3 = ["exceptionallySetClassName"],
       _excluded3$2 = ["exceptionallySetClassName"],
       _excluded4$1 = ["value", "children", "onSelect", "hideOnSelect", "onClick", "exceptionallySetClassName", "as"],
@@ -2963,7 +3319,7 @@ function Menu(_ref) {
     children,
     onItemSelect
   } = _ref,
-      props = _objectWithoutProperties(_ref, _excluded$u);
+      props = _objectWithoutProperties(_ref, _excluded$v);
 
   const state = Ariakit.useMenuState(_objectSpread2({
     focusLoop: true,
@@ -3150,7 +3506,7 @@ const Input = /*#__PURE__*/React.forwardRef((props, ref) => {
 });
 Input.displayName = 'Input';
 
-const _excluded$v = ["value", "options", "onChange", "disabled", "className", "defaultValue"];
+const _excluded$w = ["value", "options", "onChange", "disabled", "className", "defaultValue"];
 
 function Select(_ref) {
   let {
@@ -3161,7 +3517,7 @@ function Select(_ref) {
     className = '',
     defaultValue
   } = _ref,
-      otherProps = _objectWithoutProperties(_ref, _excluded$v);
+      otherProps = _objectWithoutProperties(_ref, _excluded$w);
 
   const selectClassName = classNames('reactist_select', {
     disabled
@@ -3185,9 +3541,85 @@ Select.defaultProps = {
   disabled: false
 };
 
+const CloseIcon$1 = () => /*#__PURE__*/React.createElement("svg", {
+  width: "24",
+  height: "24",
+  viewBox: "0 0 24 24"
+}, /*#__PURE__*/React.createElement("path", {
+  fill: "gray",
+  fillRule: "evenodd",
+  d: "M11.293 12L5.146 5.854a.5.5 0 1 1 .708-.708L12 11.293l6.146-6.147a.5.5 0 0 1 .708.708L12.707 12l6.147 6.146a.5.5 0 0 1-.708.708L12 12.707l-6.146 6.147a.5.5 0 0 1-.708-.708L11.293 12z"
+}));
+
+const _excluded$x = ["id", "icon", "title", "subtitle", "children", "customCloseButton", "onClick", "onClose", "closeAltText", "className", "aria-live"];
+
+function DeprecatedNotification(_ref) {
+  let {
+    id,
+    icon,
+    title,
+    subtitle,
+    children,
+    customCloseButton,
+    onClick,
+    onClose,
+    closeAltText = 'Close',
+    className,
+    'aria-live': ariaLive = 'polite'
+  } = _ref,
+      rest = _objectWithoutProperties(_ref, _excluded$x);
+
+  const titleId = title ? id + "-title" : null;
+  const titleIdAttribute = titleId ? {
+    id: titleId
+  } : null;
+  const subtitleId = subtitle ? id + "-subtitle" : null;
+  const subtitleIdAttribute = subtitleId ? {
+    id: subtitleId
+  } : null;
+  const contentId = children ? id + "-content" : null;
+  const contentIdAttribute = children ? {
+    id: id + "-content"
+  } : null;
+  const ariaLabelledBy = contentId ? {
+    'aria-labelledby': contentId
+  } : titleId ? {
+    'aria-labelledby': titleId
+  } : null;
+  const ariaDescribedBy = subtitleId && !children ? {
+    'aria-describedby': subtitleId
+  } : null;
+  const notificationContent = /*#__PURE__*/React.createElement("div", _objectSpread2({
+    className: "reactist-notification__content"
+  }, contentIdAttribute), children != null ? children : /*#__PURE__*/React.createElement(React.Fragment, null, title ? /*#__PURE__*/React.createElement("h3", _objectSpread2({
+    className: "reactist-notification__title"
+  }, titleIdAttribute), title) : null, subtitle ? /*#__PURE__*/React.createElement("p", _objectSpread2({
+    className: "reactist-notification__subtitle"
+  }, subtitleIdAttribute), subtitle) : null));
+  const notificationBody = /*#__PURE__*/React.createElement("div", {
+    className: "reactist-notification__icon-content-group"
+  }, icon != null ? icon : null, notificationContent);
+  return /*#__PURE__*/React.createElement("div", _objectSpread2(_objectSpread2(_objectSpread2({
+    id: id,
+    role: "alert",
+    className: classNames('reactist-notification', className, {
+      'reactist-notification--with-button': Boolean(onClick),
+      'reactist-notification--with-close-button': Boolean(onClose)
+    }),
+    "aria-live": ariaLive
+  }, ariaLabelledBy), ariaDescribedBy), rest), onClick ? /*#__PURE__*/React.createElement("button", {
+    className: "reactist-notification__button",
+    onClick: onClick
+  }, notificationBody) : notificationBody, onClose ? /*#__PURE__*/React.createElement("button", {
+    className: "reactist-notification__close-button",
+    onClick: onClose,
+    "aria-label": closeAltText
+  }, customCloseButton != null ? customCloseButton : /*#__PURE__*/React.createElement(CloseIcon$1, null)) : null);
+}
+
 var modules_8f59d13b$1 = {"reach-portal":"_37bef8d8","fadein":"_77f9687f","fitContent":"bcc4e0a5","container":"d4832c2d","full":"b0c3b021","large":"_573d6aa5","medium":"_8550d996","small":"_43bb18f5","xlarge":"_57b4159d","overlay":"cb63f300","expand":"e741893e","buttonContainer":"bb1ce281","headerContent":"c5ef989c"};
 
-const _excluded$w = ["isOpen", "onDismiss", "height", "width", "exceptionallySetClassName", "autoFocus", "children"],
+const _excluded$y = ["isOpen", "onDismiss", "height", "width", "exceptionallySetClassName", "autoFocus", "children"],
       _excluded2$4 = ["children", "button", "withDivider", "exceptionallySetClassName"],
       _excluded3$3 = ["exceptionallySetClassName", "children"],
       _excluded4$2 = ["exceptionallySetClassName", "withDivider"],
@@ -3222,7 +3654,7 @@ function DeprecatedModal(_ref) {
     autoFocus = true,
     children
   } = _ref,
-      props = _objectWithoutProperties(_ref, _excluded$w);
+      props = _objectWithoutProperties(_ref, _excluded$y);
 
   const contextValue = React.useMemo(() => ({
     onDismiss,
@@ -3411,6 +3843,7 @@ exports.DeprecatedModalBody = DeprecatedModalBody;
 exports.DeprecatedModalCloseButton = DeprecatedModalCloseButton;
 exports.DeprecatedModalFooter = DeprecatedModalFooter;
 exports.DeprecatedModalHeader = DeprecatedModalHeader;
+exports.DeprecatedNotification = DeprecatedNotification;
 exports.DeprecatedSelect = Select;
 exports.Divider = Divider;
 exports.Heading = Heading;
@@ -3432,12 +3865,12 @@ exports.ModalCloseButton = ModalCloseButton;
 exports.ModalFooter = ModalFooter;
 exports.ModalHeader = ModalHeader;
 exports.Notice = Notice;
-exports.Notification = Notification;
 exports.PasswordField = PasswordField;
 exports.ProgressBar = ProgressBar;
 exports.SUPPORTED_KEYS = SUPPORTED_KEYS;
 exports.SelectField = SelectField;
 exports.Stack = Stack;
+exports.StaticToast = StaticToast;
 exports.SubMenu = SubMenu;
 exports.SwitchField = SwitchField;
 exports.Tab = Tab;
@@ -3450,6 +3883,9 @@ exports.TextArea = TextArea;
 exports.TextField = TextField;
 exports.TextLink = TextLink;
 exports.Time = Time;
+exports.Toast = Toast;
+exports.ToastsProvider = ToastsProvider;
 exports.Tooltip = Tooltip;
 exports.usePrevious = usePrevious;
+exports.useToasts = useToasts;
 //# sourceMappingURL=reactist.cjs.development.js.map