@longline/aqua-ui 1.0.102 → 1.0.104

package/inputs/Dropdown/Dropdown.d.ts

@@ -11,7 +11,7 @@ interface IDropdownProps {
     /**
      * Data to show in Dropdown.
      */
-    data: any[];
+    data?: any[];
     /**
      * If set, Dropdown's value can be cleared.
      * @default false

package/inputs/Dropdown/Dropdown.js

@@ -183,7 +183,7 @@ var DropdownBase = function (props) {
     var selectItemByCharacter = function (c) {
         c = c.toLowerCase();
         // Go through all (non-null) data records:
-        var idx = props.data.filter(function (r) { return r != null; }).findIndex(function (row) {
+        var idx = (props.data || []).filter(function (r) { return r != null; }).findIndex(function (row) {
             // Build a list of strings contained in the data row:
             var strings = [];
             // If data row is an object, convert all its keys to string.
@@ -199,10 +199,12 @@ var DropdownBase = function (props) {
         });
         // Was a matching row found?
         if (idx != -1) {
-            handleClick(props.data[idx]);
+            handleClick((props.data || [])[idx]);
         }
     };
     var selectPreviousItem = function () {
+        if (!props.data)
+            return;
         var prevIndex = props.data.indexOf(value) - 1;
         if (prevIndex < 0)
             prevIndex = 0;
@@ -212,6 +214,8 @@ var DropdownBase = function (props) {
         bodyRef.current.children[0].children[0].children[prevIndex].scrollIntoView({ block: 'start', inline: 'nearest' });
     };
     var selectNextItem = function () {
+        if (!props.data)
+            return;
         var nextIndex = props.data.indexOf(value) + 1;
         if (props.data.length <= nextIndex)
             return;
@@ -336,8 +340,8 @@ var DropdownBase = function (props) {
             if (child.type && child.type === Column)
                 return child;
         });
-        var activeIndex = props.data.indexOf(value);
-        return props.data.map(function (row, index) {
+        var activeIndex = (props.data || []).indexOf(value);
+        return (props.data || []).map(function (row, index) {
             return (React.createElement(ListRow, { active: index == activeIndex, key: index + 1, gap: props.gap, onClick: function () { return handleClick(row); } }, columns.map(function (child, index) {
                 return (React.createElement(ListCell, { key: index, width: child.props.width, align: child.props.align }, row !== null && child.props.children(row)));
             })));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@longline/aqua-ui",
-  "version": "1.0.102",
+  "version": "1.0.104",
   "description": "AquaUI",
   "author": "Alexander van Oostenrijk / Longline Environment",
   "license": "Commercial",
@@ -54,7 +54,6 @@
     "@types/mapbox-gl": "^3.4.0",
     "@types/react": "^18.3.10",
     "@types/react-dom": "^18.3.0",
-    "@types/react-transition-group": "^4.4.11",
     "awesome-debounce-promise": "^2.1.0",
     "date-fns": "^4.1.0",
     "gl-matrix": "^3.4.3",
@@ -64,7 +63,7 @@
     "react-map-gl": "^7.1.7",
     "react-popper": "^2.3.0",
     "react-router-dom": "^6.26.2",
-    "react-transition-group": "^4.4.5",
+    "react-transition-state": "^2.2.0",
     "styled-components": "^6.1.13"
   }
 }

package/services/Dialog/Dialog.js

@@ -21,8 +21,8 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import * as React from 'react';
-import { CSSTransition } from 'react-transition-group';
 import { createPortal } from 'react-dom';
+import { useTransitionState } from "react-transition-state";
 // Other controls
 import { DialogBackground } from './DialogBackground';
 import { DialogWindow } from './DialogWindow';
@@ -41,6 +41,16 @@ import { XhrDialog } from './XhrDialog';
  */
 var DialogBase = function (props) {
     var windowRef = React.useRef(null);
+    var _a = useTransitionState({
+        timeout: 500,
+        mountOnEnter: true,
+        initialEntered: false,
+        preEnter: true,
+        unmountOnExit: true
+    }), _b = _a[0], status = _b.status, isMounted = _b.isMounted, isEnter = _b.isEnter, toggle = _a[1];
+    React.useEffect(function () {
+        toggle(props.open);
+    }, [props.open]);
     // Listen for document-wide mousedown event when component mounts.
     React.useEffect(function () {
         document.addEventListener('mousedown', handleClickOutside);
@@ -58,18 +68,9 @@ var DialogBase = function (props) {
             props.onClose();
         }
     };
-    // CSS Transition mounts dialog when it is open. When it's closed, 
-    // a Dialog does not appear in the DOM at all.
-    //
-    // For use of CSSTransition, see:
-    // http://reactcommunity.org/react-transition-group/css-transition
-    // and 
-    // https://veerasundar.com/blog/2018/12/how-to-animate-page-transition-in-react-using-styled-components/  
-    return (React.createElement(React.Fragment, null,
-        createPortal(React.createElement(CSSTransition, { in: props.open, timeout: 300, unmountOnExit: true, classNames: "fade" },
-            React.createElement(DialogBackground, null)), document.body),
-        createPortal(React.createElement(CSSTransition, { in: props.open, timeout: 300, unmountOnExit: true, classNames: "fade" },
-            React.createElement(DialogWindow, { inverted: props.inverted, width: props.width, ref: windowRef }, props.children)), document.body)));
+    return (React.createElement(React.Fragment, null, isMounted && React.createElement(React.Fragment, null,
+        createPortal(React.createElement(DialogBackground, { status: status }), document.body),
+        createPortal(React.createElement(DialogWindow, { inverted: props.inverted, width: props.width, ref: windowRef, status: status }, props.children), document.body))));
 };
 var Dialog = function (_a) {
     var _b = _a.open, open = _b === void 0 ? false : _b, _c = _a.canClose, canClose = _c === void 0 ? true : _c, _d = _a.width, width = _d === void 0 ? 600 : _d, _e = _a.inverted, inverted = _e === void 0 ? false : _e, props = __rest(_a, ["open", "canClose", "width", "inverted"]);

package/services/Dialog/DialogBackground.d.ts

@@ -2,6 +2,10 @@ import * as React from 'react';
 interface IProps {
     /** @ignore */
     className?: string;
+    /**
+     * useTransitionState class
+     */
+    status: string;
 }
 declare const DialogBackground: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<IProps, never>> & string & Omit<(props: IProps) => React.JSX.Element, keyof React.Component<any, {}, any>>;
 export { DialogBackground };

package/services/Dialog/DialogBackground.js

@@ -5,8 +5,8 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook
 import * as React from 'react';
 import styled from 'styled-components';
 var DialogBackgroundBase = function (props) {
-    return React.createElement("div", { className: props.className });
+    return React.createElement("div", { className: "".concat(props.className, " ").concat(props.status) });
 };
-var DialogBackground = styled(DialogBackgroundBase)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  position:    fixed;\n  z-index:     2000;\n  left:        0;\n  top:         0;\n  right:       0;\n  bottom:      0;\n  background-color: #000;\n  opacity:     0.5;\n\n  /* CSSTransition classes */\n  &.fade-enter {\n    opacity: 0;\n  }\n  &.fade-enter-active {\n    opacity: 0.5;\n    transition: opacity 0.3s ease;\n  }\n  &.fade-exit {\n    opacity: 0.5;\n  }\n  &.fade-exit-active {\n    opacity: 0;\n    transition: opacity 0.3s ease;\n  }  \n"], ["\n  position:    fixed;\n  z-index:     2000;\n  left:        0;\n  top:         0;\n  right:       0;\n  bottom:      0;\n  background-color: #000;\n  opacity:     0.5;\n\n  /* CSSTransition classes */\n  &.fade-enter {\n    opacity: 0;\n  }\n  &.fade-enter-active {\n    opacity: 0.5;\n    transition: opacity 0.3s ease;\n  }\n  &.fade-exit {\n    opacity: 0.5;\n  }\n  &.fade-exit-active {\n    opacity: 0;\n    transition: opacity 0.3s ease;\n  }  \n"])));
+var DialogBackground = styled(DialogBackgroundBase)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  position:    fixed;\n  z-index:     2000;\n  left:        0;\n  top:         0;\n  right:       0;\n  bottom:      0;\n  background-color: #00000080;\n  opacity:     1;\n\n  /* useTransitionState classes */\n  transition: opacity 0.5s ease;\n  opacity: 0;\n  &.preEnter, &.exiting {\n    opacity: 0;\n  }\n  &.entering {\n    opacity: 1;\n  }\n  &.entered {\n    opacity: 1;\n  }  \n"], ["\n  position:    fixed;\n  z-index:     2000;\n  left:        0;\n  top:         0;\n  right:       0;\n  bottom:      0;\n  background-color: #00000080;\n  opacity:     1;\n\n  /* useTransitionState classes */\n  transition: opacity 0.5s ease;\n  opacity: 0;\n  &.preEnter, &.exiting {\n    opacity: 0;\n  }\n  &.entering {\n    opacity: 1;\n  }\n  &.entered {\n    opacity: 1;\n  }  \n"])));
 export { DialogBackground };
 var templateObject_1;

package/services/Dialog/DialogWindow.d.ts

@@ -10,6 +10,10 @@ interface IProps {
      * Are Dialog colors inverted?
      */
     inverted?: boolean;
+    /**
+     * useTransitionState class
+     */
+    status: string;
 }
 declare const DialogWindow: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<IProps & React.RefAttributes<HTMLDivElement>, "ref"> & {
     ref?: React.Ref<HTMLDivElement>;

package/services/Dialog/DialogWindow.js

@@ -5,8 +5,8 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook
 import * as React from 'react';
 import styled, { css } from 'styled-components';
 var DialogWindowBase = React.forwardRef(function (props, ref) {
-    return React.createElement("div", { className: props.className, ref: ref }, props.children);
+    return React.createElement("div", { className: "".concat(props.className, " ").concat(props.status), ref: ref }, props.children);
 });
-var DialogWindow = styled(DialogWindowBase)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  position: fixed;\n  z-index: 3000;\n  left: 50%;\n  top: 50%;\n  transform-origin: center center;\n  transform: translateX(-50%) translateY(-50%);\n  border-radius: ", "px;\n  background-color: ", ";\n  box-shadow: 0px 0px 10px 1px rgba(0,0,0,0.5);\n\n  ", "\n\n  // Font:\n  font: ", ";\n  color: ", ";  \n\n  /* Dialog window width:\n   * Narrower on small screen. */\n  width: ", "px;\n  @media (max-width: ", "px) {\n    width: ", "px;\n  }\n\n  /* CSSTransition classes: */\n  &.fade-enter {\n    opacity: 0;\n    transform: translateX(-50%) translateY(-50%) scale(0.8);\n  }\n  &.fade-enter-active {\n    opacity: 1;\n    transform: translateX(-50%) translateY(-50%);\n    transition: opacity 0.3s ease, transform 0.3s cubic-bezier(.17,.89,.35,1.67);\n  }\n  &.fade-exit {\n    opacity: 1;\n  }\n  &.fade-exit-active {\n    opacity: 0;\n    transform: translateX(-50%) translateY(-50%) scale(0.8);\n    transition: opacity 0.3s ease, transform 0.3s ease;\n  }\n"], ["\n  position: fixed;\n  z-index: 3000;\n  left: 50%;\n  top: 50%;\n  transform-origin: center center;\n  transform: translateX(-50%) translateY(-50%);\n  border-radius: ", "px;\n  background-color: ", ";\n  box-shadow: 0px 0px 10px 1px rgba(0,0,0,0.5);\n\n  ", "\n\n  // Font:\n  font: ", ";\n  color: ", ";  \n\n  /* Dialog window width:\n   * Narrower on small screen. */\n  width: ", "px;\n  @media (max-width: ", "px) {\n    width: ", "px;\n  }\n\n  /* CSSTransition classes: */\n  &.fade-enter {\n    opacity: 0;\n    transform: translateX(-50%) translateY(-50%) scale(0.8);\n  }\n  &.fade-enter-active {\n    opacity: 1;\n    transform: translateX(-50%) translateY(-50%);\n    transition: opacity 0.3s ease, transform 0.3s cubic-bezier(.17,.89,.35,1.67);\n  }\n  &.fade-exit {\n    opacity: 1;\n  }\n  &.fade-exit-active {\n    opacity: 0;\n    transform: translateX(-50%) translateY(-50%) scale(0.8);\n    transition: opacity 0.3s ease, transform 0.3s ease;\n  }\n"])), function (p) { return p.theme.radius.normal; }, function (p) { return p.inverted ? p.theme.colors.primary[3] : p.theme.colors.neutral[100]; }, function (p) { return p.inverted && css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    .footer {\n      background: ", ";\n    }  \n  "], ["\n    .footer {\n      background: ", ";\n    }  \n  "])), function (p) { return p.theme.colors.primary[5]; }); }, function (p) { return p.theme.font.bodyLarge; }, function (p) { return p.inverted ? p.theme.colors.neutral[100] : p.theme.colors.neutral[10]; }, function (p) { return p.width ? p.width : 600; }, function (p) { return p.theme.screen.small; }, function (p) { return p.width ? (p.width > 400 ? 400 : p.width) : 400; });
+var DialogWindow = styled(DialogWindowBase)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  position: fixed;\n  z-index: 3000;\n  left: 50%;\n  top: 50%;\n  transform-origin: center center;\n  border-radius: ", "px;\n  background-color: ", ";\n  box-shadow: 0px 0px 10px 1px rgba(0,0,0,0.5);\n\n  ", "\n\n  // Font:\n  font: ", ";\n  color: ", ";  \n\n  /* Dialog window width:\n   * Narrower on small screen. */\n  width: ", "px;\n  @media (max-width: ", "px) {\n    width: ", "px;\n  }\n\n  /* useTransitionState classes */\n  transition: opacity 0.5s ease, transform 0.5s cubic-bezier(.17,.89,.35,1.67);\n  opacity: 0;\n  &.preEnter, &.exiting {\n    opacity: 0;\n    transform: translateX(-50%) translateY(-50%) scale(0.8);\n  }\n  &.entering {\n    opacity: 1;\n    transform: translateX(-50%) translateY(-50%);\n  }\n  &.entered {\n    opacity: 1;\n    transform: translateX(-50%) translateY(-50%);\n  }\n\n"], ["\n  position: fixed;\n  z-index: 3000;\n  left: 50%;\n  top: 50%;\n  transform-origin: center center;\n  border-radius: ", "px;\n  background-color: ", ";\n  box-shadow: 0px 0px 10px 1px rgba(0,0,0,0.5);\n\n  ", "\n\n  // Font:\n  font: ", ";\n  color: ", ";  \n\n  /* Dialog window width:\n   * Narrower on small screen. */\n  width: ", "px;\n  @media (max-width: ", "px) {\n    width: ", "px;\n  }\n\n  /* useTransitionState classes */\n  transition: opacity 0.5s ease, transform 0.5s cubic-bezier(.17,.89,.35,1.67);\n  opacity: 0;\n  &.preEnter, &.exiting {\n    opacity: 0;\n    transform: translateX(-50%) translateY(-50%) scale(0.8);\n  }\n  &.entering {\n    opacity: 1;\n    transform: translateX(-50%) translateY(-50%);\n  }\n  &.entered {\n    opacity: 1;\n    transform: translateX(-50%) translateY(-50%);\n  }\n\n"])), function (p) { return p.theme.radius.normal; }, function (p) { return p.inverted ? p.theme.colors.primary[3] : p.theme.colors.neutral[100]; }, function (p) { return p.inverted && css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    .footer {\n      background: ", ";\n    }  \n  "], ["\n    .footer {\n      background: ", ";\n    }  \n  "])), function (p) { return p.theme.colors.primary[5]; }); }, function (p) { return p.theme.font.bodyLarge; }, function (p) { return p.inverted ? p.theme.colors.neutral[100] : p.theme.colors.neutral[10]; }, function (p) { return p.width ? p.width : 600; }, function (p) { return p.theme.screen.small; }, function (p) { return p.width ? (p.width > 400 ? 400 : p.width) : 400; });
 export { DialogWindow };
 var templateObject_1, templateObject_2;

package/services/Toast/Toast.js

@@ -25,13 +25,26 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import * as React from 'react';
+import styled, { useTheme } from 'styled-components';
+import { useTransitionState } from "react-transition-state";
 // Other controls
-import styled from 'styled-components';
 import { SVG } from '../../svg';
 ;
 var ToastBase = function (props) {
     var _a;
     var timerHandle = React.useRef(null);
+    var theme = useTheme();
+    var _b = useTransitionState({
+        timeout: theme.animation.duration * 2,
+        mountOnEnter: true,
+        initialEntered: false,
+        preEnter: true,
+        unmountOnExit: true
+    }), _c = _b[0], status = _c.status, isMounted = _c.isMounted, isEnter = _c.isEnter, toggle = _b[1];
+    React.useEffect(function () {
+        toggle(true);
+        return function () { return toggle(false); };
+    }, []);
     React.useEffect(function () {
         // Set a timeout on the toast, saving the
         // timer handle for later cleanup.    
@@ -49,17 +62,17 @@ var ToastBase = function (props) {
         props.action();
         props.onClose();
     };
-    return (React.createElement("div", { className: props.className },
+    return (React.createElement(React.Fragment, null, isMounted && React.createElement("div", { className: "".concat(props.className, " ").concat(status) },
         React.createElement(Message, null, props.message),
         props.action && React.createElement(Action, { onClick: handleAction }, (_a = props.actionLabel) !== null && _a !== void 0 ? _a : "Action"),
         props.dismissable && React.createElement(CloseButton, { onClick: props.onClose },
             React.createElement("svg", null,
-                React.createElement("use", { xlinkHref: SVG.Icons.Cross })))));
+                React.createElement("use", { xlinkHref: SVG.Icons.Cross }))))));
 };
 var Message = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  flex: 1;\n  padding-left: 16px;\n  padding-right: 16px;\n"], ["\n  display: flex;\n  align-items: center;\n  flex: 1;\n  padding-left: 16px;\n  padding-right: 16px;\n"])));
 var CloseButton = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 40px;\n  cursor: pointer;\n\n  svg {\n    fill: ", ";\n    width: 20px;\n    height: 20px;\n  }  \n  &:hover {\n    svg {\n      fill: ", ";\n    }\n  }\n"], ["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 40px;\n  cursor: pointer;\n\n  svg {\n    fill: ", ";\n    width: 20px;\n    height: 20px;\n  }  \n  &:hover {\n    svg {\n      fill: ", ";\n    }\n  }\n"])), function (p) { return p.theme.colors.neutral[95]; }, function (p) { return p.theme.colors.neutral[100]; });
 var Action = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  padding-left: 8px;\n  color: ", ";\n  cursor: pointer;\n  white-space: nowrap;\n  font: ", ";\n  text-transform: lowercase;\n  transition: color ease-in-out ", "ms;\n  &:hover {\n    color: ", ";\n  }\n  &:last-child {\n    padding-right: 16px;\n  }\n"], ["\n  display: flex;\n  align-items: center;\n  padding-left: 8px;\n  color: ", ";\n  cursor: pointer;\n  white-space: nowrap;\n  font: ", ";\n  text-transform: lowercase;\n  transition: color ease-in-out ", "ms;\n  &:hover {\n    color: ", ";\n  }\n  &:last-child {\n    padding-right: 16px;\n  }\n"])), function (p) { return p.theme.colors.primary[4]; }, function (p) { return p.theme.font.labelCaps; }, function (p) { return p.theme.animation.duration; }, function (p) { return p.theme.colors.primary[2]; });
-var ToastStyled = styled(ToastBase)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  // Position and size:\n  display: flex;\n  width: 344px;\n  box-sizing: border-box;\n  align-items: stretch;\n  justify-content: space-between;\n  user-select: none;\n  pointer-events: all;\n\n  // Space between toasts:\n  margin: 8px 0 8px 0; \n\n  // Appearance:\n  padding: 14px 0 14px 0;\n  background-color: ", ";\n  color: #fff;\n  border-radius: ", "px;\n  font: ", ";\n\n  // CSSTransition classes\n  &.item-enter {\n    opacity: 0;\n  }\n  // TODO: Second toast seems much faster.\n  // TODO: Animation fadeout should be much quicker when dismissed.\n  &.item-enter-active {\n    opacity: 1;\n    transition: opacity ", "ms ease-in;\n  }\n  &.item-exit {\n    opacity: 1;\n  }\n  &.item-exit-active {\n    opacity: 0;\n    transition: opacity ", "ms ease-out;\n  }    \n"], ["\n  // Position and size:\n  display: flex;\n  width: 344px;\n  box-sizing: border-box;\n  align-items: stretch;\n  justify-content: space-between;\n  user-select: none;\n  pointer-events: all;\n\n  // Space between toasts:\n  margin: 8px 0 8px 0; \n\n  // Appearance:\n  padding: 14px 0 14px 0;\n  background-color: ", ";\n  color: #fff;\n  border-radius: ", "px;\n  font: ", ";\n\n  // CSSTransition classes\n  &.item-enter {\n    opacity: 0;\n  }\n  // TODO: Second toast seems much faster.\n  // TODO: Animation fadeout should be much quicker when dismissed.\n  &.item-enter-active {\n    opacity: 1;\n    transition: opacity ", "ms ease-in;\n  }\n  &.item-exit {\n    opacity: 1;\n  }\n  &.item-exit-active {\n    opacity: 0;\n    transition: opacity ", "ms ease-out;\n  }    \n"])), function (p) { return p.theme.colors.primary[1]; }, function (p) { return p.theme.radius.normal; }, function (p) { return p.theme.font.bodyMedium; }, function (p) { return p.theme.animation.duration * 2; }, function (p) { return p.theme.animation.duration * 5; });
+var ToastStyled = styled(ToastBase)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  // Position and size:\n  display: flex;\n  width: 344px;\n  box-sizing: border-box;\n  align-items: stretch;\n  justify-content: space-between;\n  user-select: none;\n  pointer-events: all;\n\n  // Space between toasts:\n  margin: 8px 0 8px 0; \n\n  // Appearance:\n  padding: 14px 0 14px 0;\n  background-color: ", ";\n  color: #fff;\n  border-radius: ", "px;\n  font: ", ";\n\n  /* useTransitionState classes */\n  transition: opacity ", "ms ease;\n  &.preEnter, &.exiting, &.unmounted {\n    opacity: 0;\n  }\n  &.entering {\n    opacity: 1;\n  }\n  &.entered {\n    opacity: 1;\n  }\n\n"], ["\n  // Position and size:\n  display: flex;\n  width: 344px;\n  box-sizing: border-box;\n  align-items: stretch;\n  justify-content: space-between;\n  user-select: none;\n  pointer-events: all;\n\n  // Space between toasts:\n  margin: 8px 0 8px 0; \n\n  // Appearance:\n  padding: 14px 0 14px 0;\n  background-color: ", ";\n  color: #fff;\n  border-radius: ", "px;\n  font: ", ";\n\n  /* useTransitionState classes */\n  transition: opacity ", "ms ease;\n  &.preEnter, &.exiting, &.unmounted {\n    opacity: 0;\n  }\n  &.entering {\n    opacity: 1;\n  }\n  &.entered {\n    opacity: 1;\n  }\n\n"])), function (p) { return p.theme.colors.primary[1]; }, function (p) { return p.theme.radius.normal; }, function (p) { return p.theme.font.bodyMedium; }, function (p) { return p.theme.animation.duration * 2; });
 /**
  * A `Toast` is generated through the `ToastProvider.toast` method.
  *

package/services/Toast/ToastContainer.js

@@ -26,7 +26,6 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import * as React from 'react';
 import styled from 'styled-components';
-import { TransitionGroup, CSSTransition } from 'react-transition-group';
 // Other controls
 import { Toast } from './Toast';
 import { useToast } from './useToast';
@@ -35,11 +34,9 @@ var ToastContainerBase = function (props) {
     var handleClose = function (key) {
         toastProvider.remove(key);
     };
-    return (React.createElement("div", { className: props.className },
-        React.createElement(TransitionGroup, null, Object.keys(toastProvider.messages).map(function (key) {
-            return React.createElement(CSSTransition, { key: key, timeout: 500, classNames: "item" },
-                React.createElement(Toast, __assign({ message: toastProvider.messages[key].message, onClose: function () { return handleClose(key); } }, toastProvider.messages[key].options)));
-        }))));
+    return (React.createElement("div", { className: props.className }, Object.keys(toastProvider.messages).map(function (key) {
+        return React.createElement(Toast, __assign({ key: key, message: toastProvider.messages[key].message, onClose: function () { return handleClose(key); } }, toastProvider.messages[key].options));
+    })));
 };
 var ToastContainerStyled = styled(ToastContainerBase)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  // Position:\n  // ToastContainer occupies all area that it can, but captures no pointer events.\n  // Toast children do capture pointer events.\n  position: absolute;\n  z-index: 9999;\n  top: ", "px;\n  bottom: ", "px;\n  left: ", "px;\n  right: ", "px;\n  pointer-events: none !important;\n  // Toasts are placed using a flexbox:\n  display: flex;\n  flex-direction: ", ";\n  align-items: ", ";\n  justify-content: ", ";\n"], ["\n  // Position:\n  // ToastContainer occupies all area that it can, but captures no pointer events.\n  // Toast children do capture pointer events.\n  position: absolute;\n  z-index: 9999;\n  top: ", "px;\n  bottom: ", "px;\n  left: ", "px;\n  right: ", "px;\n  pointer-events: none !important;\n  // Toasts are placed using a flexbox:\n  display: flex;\n  flex-direction: ", ";\n  align-items: ", ";\n  justify-content: ", ";\n"
     /**