@laerdal/life-react-components 3.5.1-dev.12 → 3.5.1-dev.14

package/dist/Toasters/Toast.d.ts

@@ -15,7 +15,7 @@ export declare const ToastActionButtons: import("styled-components").StyledCompo
 export declare const ToastCloseButton: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const ToastTextContainer: import("styled-components").StyledComponent<"span", any, {}, never>;
 export declare const ToastIconContainer: import("styled-components").StyledComponent<"span", any, {}, never>;
-export declare type ToastOptions = {
+export type ToastOptions = {
     /** Optional. Color of the toast. Defaults to 'BLACK' */
     color?: ToastColor;
     /** Optional. If set Toast will automatically close after delay. Defaults to 'true' */
@@ -37,7 +37,7 @@ export declare type ToastOptions = {
     /** Optional. Icon that will be shown on the left side of the Toast */
     icon?: React.ReactNode;
 };
-declare type Props = {
+type Props = {
     remove?: any;
     content: any;
     options?: ToastOptions;

package/dist/Toasters/Toast.js

@@ -1,166 +1,241 @@
-var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
-    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
-    return cooked;
-};
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-var _a, _b;
-import * as React from 'react';
-import styled, { keyframes } from 'styled-components';
-import { ToastActionType, ToastColor, ToastEntryDirection, ToastPosition } from '../types';
-import { BOXSHADOWS, COLORS } from '../styles';
-import { Size } from '../types';
-import { Button, IconButton } from '../Button';
-import { ComponentSStyling, ComponentTextStyle } from '../styles';
-import { HyperLinkDefaultStyling, HyperLinkInvertedStyling } from '../HyperLink';
-import { SystemIcons } from '../icons';
-var LoaderAnimationKeyframes = keyframes(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  0% {\n    background-position: right;\n  }\n  100% {\n    background-position: left;\n  }\n"], ["\n  0% {\n    background-position: right;\n  }\n  100% {\n    background-position: left;\n  }\n"])));
-var Loader = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  position: absolute;\n  bottom: 0;\n  left: 0;\n  width: 100%;\n  height: 4px;\n  border-bottom-left-radius: 8px;\n  border-bottom-right-radius: 8px;\n\n  animation: ", " ", "ms cubic-bezier(0.18, 0.39, 0.35, 1);\n\n  &.", " {\n    background: linear-gradient(to right, ", " 50%, ", " 50%) left;\n    background-size: 200% 100%;\n  }\n\n  &.", " {\n    background: linear-gradient(to right, ", " 50%, ", " 50%) left;\n    background-size: 200% 100%;\n  }\n\n  &.", " {\n    background: linear-gradient(to right, ", " 50%, ", " 50%) left;\n    background-size: 200% 100%;\n  }\n\n  &.", " {\n    background: linear-gradient(to right, ", " 50%, ", " 50%) left;\n    background-size: 200% 100%;\n  }\n\n  &.", " {\n    background: linear-gradient(to right, ", " 50%, ", " 50%) left;\n    background-size: 200% 100%;\n  }\n\n  &.", " {\n    background: linear-gradient(to right, ", " 50%, ", " 50%) left;\n    background-size: 200% 100%;\n  }\n"], ["\n  position: absolute;\n  bottom: 0;\n  left: 0;\n  width: 100%;\n  height: 4px;\n  border-bottom-left-radius: 8px;\n  border-bottom-right-radius: 8px;\n\n  animation: ", " ", "ms cubic-bezier(0.18, 0.39, 0.35, 1);\n\n  &.", " {\n    background: linear-gradient(to right, ", " 50%, ", " 50%) left;\n    background-size: 200% 100%;\n  }\n\n  &.", " {\n    background: linear-gradient(to right, ", " 50%, ", " 50%) left;\n    background-size: 200% 100%;\n  }\n\n  &.", " {\n    background: linear-gradient(to right, ", " 50%, ", " 50%) left;\n    background-size: 200% 100%;\n  }\n\n  &.", " {\n    background: linear-gradient(to right, ", " 50%, ", " 50%) left;\n    background-size: 200% 100%;\n  }\n\n  &.", " {\n    background: linear-gradient(to right, ", " 50%, ", " 50%) left;\n    background-size: 200% 100%;\n  }\n\n  &.", " {\n    background: linear-gradient(to right, ", " 50%, ", " 50%) left;\n    background-size: 200% 100%;\n  }\n"])), LoaderAnimationKeyframes, function (props) { return props.duration; }, ToastColor[ToastColor.BLACK], COLORS.neutral_200, COLORS.neutral_800, ToastColor[ToastColor.WHITE], COLORS.neutral_400, COLORS.white, ToastColor[ToastColor.BLUE], COLORS.accent1_200, COLORS.accent1_600, ToastColor[ToastColor.GREEN], COLORS.correct_200, COLORS.correct_500, ToastColor[ToastColor.ORANGE], COLORS.warning_200, COLORS.warning_500, ToastColor[ToastColor.RED], COLORS.critical_200, COLORS.critical_500);
-export var ToastContainer = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  box-shadow: ", ";\n  border-radius: 4px;\n\n  animation: ", " ", " ", ";\n  transform: ", ";\n\n  transition: all 300ms cubic-bezier(0.64, 0.04, 0.35, 1);\n\n  padding: 0 ", " ", " 16px;\n\n  margin-bottom: 8px;\n  display: flex;\n  align-items: center;\n  gap: 16px;\n  justify-content: left;\n\n  position: relative;\n\n  width: max-content;\n  min-height: 48px;\n  box-sizing: border-box;\n\n  ", "\n\n  & a {\n    display: inline;\n    ", "\n  }\n\n  &.", " {\n    background-color: ", ";\n  }\n\n  &.", " {\n    background-color: ", ";\n    color: ", ";\n\n    & a {\n      ", "\n    }\n  }\n\n  &.", " {\n    background-color: ", ";\n  }\n\n  &.", " {\n    background-color: ", ";\n  }\n\n  &.", " {\n    background-color: ", ";\n  }\n\n  &.", " {\n    background-color: ", ";\n  }\n"], ["\n  box-shadow: ", ";\n  border-radius: 4px;\n\n  animation: ", " ", " ", ";\n  transform: ", ";\n\n  transition: all 300ms cubic-bezier(0.64, 0.04, 0.35, 1);\n\n  padding: 0 ", " ", " 16px;\n\n  margin-bottom: 8px;\n  display: flex;\n  align-items: center;\n  gap: 16px;\n  justify-content: left;\n\n  position: relative;\n\n  width: max-content;\n  min-height: 48px;\n  box-sizing: border-box;\n\n  ", "\n\n  & a {\n    display: inline;\n    ", "\n  }\n\n  &.", " {\n    background-color: ", ";\n  }\n\n  &.", " {\n    background-color: ", ";\n    color: ", ";\n\n    & a {\n      ", "\n    }\n  }\n\n  &.", " {\n    background-color: ", ";\n  }\n\n  &.", " {\n    background-color: ", ";\n  }\n\n  &.", " {\n    background-color: ", ";\n  }\n\n  &.", " {\n    background-color: ", ";\n  }\n"])), BOXSHADOWS.BOXSHADOW_L2, function (props) { return props.animation.keyframes; }, function (props) { return props.animation.duration; }, function (props) { return props.animation.bezier; }, function (props) { return props.animation.transform; }, function (props) { return (props.withClose ? '0' : '16px'); }, function (props) { return (props.withLoader ? '4px' : '0'); }, ComponentSStyling(ComponentTextStyle.Regular, COLORS.white), HyperLinkInvertedStyling, ToastColor[ToastColor.BLACK], COLORS.neutral_800, ToastColor[ToastColor.WHITE], COLORS.white, COLORS.black, HyperLinkDefaultStyling, ToastColor[ToastColor.BLUE], COLORS.accent1_600, ToastColor[ToastColor.GREEN], COLORS.correct_500, ToastColor[ToastColor.ORANGE], COLORS.warning_500, ToastColor[ToastColor.RED], COLORS.critical_500);
-export var ToastActionButtons = styled.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: row;\n  gap: 8px;\n  align-items: center;\n\n  & .action {\n    height: unset;\n  }\n"], ["\n  display: flex;\n  flex-direction: row;\n  gap: 8px;\n  align-items: center;\n\n  & .action {\n    height: unset;\n  }\n"])));
-export var ToastCloseButton = styled.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  & > button {\n    margin-left: 16px;\n\n    & svg {\n      padding: 0;\n    }\n  }\n\n  button svg path{\n    fill: ", " !important;\n  }\n\n  &.", " {\n    button svg path {\n      fill: ", " !important;\n    }\n  }\n"], ["\n  & > button {\n    margin-left: 16px;\n\n    & svg {\n      padding: 0;\n    }\n  }\n\n  button svg path{\n    fill: ", " !important;\n  }\n\n  &.", " {\n    button svg path {\n      fill: ", " !important;\n    }\n  }\n"])), COLORS.white, ToastColor[ToastColor.WHITE], COLORS.neutral_600);
-export var ToastTextContainer = styled.span(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  font-feature-settings: 'liga' off;\n  width: 240px;\n  display: flex;\n  padding: 16px 0;\n"], ["\n  font-feature-settings: 'liga' off;\n  width: 240px;\n  display: flex;\n  padding: 16px 0;\n"])));
-export var ToastIconContainer = styled.span(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  margin-right: -8px;\n"], ["\n  margin-right: -8px;\n"])));
-var DEFAULT_OPTIONS = {
-    color: ToastColor.BLACK,
-    autoClose: true,
-    delay: 5000,
-    showCloseButton: false,
-    position: ToastPosition.TOPLEFT,
-    enterFrom: ToastEntryDirection.TOP,
-};
-var Toast = function (_a) {
-    var _b, _c, _d;
-    var content = _a.content, remove = _a.remove, _e = _a.options, options = _e === void 0 ? DEFAULT_OPTIONS : _e, testId = _a.testId;
-    if (!remove)
-        throw new Error('remove function is required when rendering Toast. Make sure that you are using useToast hook and ToastProvider for rendering Toasts');
-    var removeRef = React.useRef();
-    removeRef.current = remove;
-    var elementRef = React.useRef(null);
-    var _f = React.useState(false), shouldRemove = _f[0], setShouldRemove = _f[1];
-    var _g = React.useState({ width: 0, height: 0 }), dimensions = _g[0], setDimensions = _g[1];
-    var opts = __assign(__assign({}, DEFAULT_OPTIONS), options);
-    React.useEffect(function () {
-        if (opts === null || opts === void 0 ? void 0 : opts.autoClose) {
-            // @ts-ignore
-            var id_1 = setTimeout(function () { return setShouldRemove(true); }, opts.delay);
-            return function () { return clearTimeout(id_1); };
-        }
-        return undefined;
-    }, []);
-    React.useEffect(function () {
-        if (shouldRemove) {
-            // @ts-ignore
-            var id_2 = setTimeout(function () { return removeRef.current(); }, 200);
-            return function () { return clearTimeout(id_2); };
-        }
-    }, [shouldRemove]);
-    React.useEffect(function () {
-        var _a, _b;
-        setDimensions({ height: (_a = elementRef.current) === null || _a === void 0 ? void 0 : _a.clientHeight, width: (_b = elementRef.current) === null || _b === void 0 ? void 0 : _b.clientWidth });
-    }, []);
-    var animation = animations[shouldRemove ? 'leave' : 'enter'];
-    var direction = animation[(_b = opts.enterFrom) !== null && _b !== void 0 ? _b : ToastEntryDirection.TOP];
-    var fromY = dimensions.height * direction.fromHeight;
-    var toY = dimensions.height * direction.toHeight;
-    var fromX = dimensions.width * direction.fromWidth;
-    var toX = dimensions.width * direction.toWidth;
-    var prop = {
-        duration: animation.duration,
-        bezier: animation.bezier,
-        transform: "translateY(".concat(toY, ") translateX(").concat(toX, ")"),
-        keyframes: keyframes(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n        0% {\n          transform: translateY(", "px) translateX(", "px);\n        }\n        100% {\n          transform: translateY(", "px) translateX(", "px);\n        }"], ["\n        0% {\n          transform: translateY(", "px) translateX(", "px);\n        }\n        100% {\n          transform: translateY(", "px) translateX(", "px);\n        }"])), fromY, fromX, toY, toX),
-    };
-    if (!dimensions.height) {
-        prop = __assign(__assign({}, prop), {
-            transform: 'translateY(-1000vh) translateX(-1000vw)',
-            keyframes: keyframes(templateObject_9 || (templateObject_9 = __makeTemplateObject([""], [""]))),
-        });
-    }
-    var theme = ToastColor[(_c = opts.color) !== null && _c !== void 0 ? _c : ToastColor.BLACK];
-    if (!shouldRemove) {
-        setTimeout(function () { var _a; return (_a = elementRef === null || elementRef === void 0 ? void 0 : elementRef.current) === null || _a === void 0 ? void 0 : _a.focus(); });
-    }
-    return (React.createElement(ToastContainer, { "data-testid": testId, animation: prop, ref: elementRef, withLoader: !!opts.autoClose, className: theme, withClose: !!opts.showCloseButton, tabIndex: -1 },
-        opts.icon && React.createElement(ToastIconContainer, null, opts.icon),
-        React.createElement(ToastTextContainer, { className: 'description' }, content),
-        opts.action && (React.createElement(ToastActionButtons, null, opts.action.map(function (action, i) { return (React.createElement(Button, { size: Size.Small, variant: action.type === ToastActionType.SECONDARY ? 'secondary' : 'primary', colorTheme: opts.color !== ToastColor.WHITE ? 'dark' : 'teal', invertFocus: opts.color === ToastColor.BLACK, key: i, onClick: function () {
-                setShouldRemove(true);
-                action.handler();
-            }, className: 'action' }, action.label)); }))),
-        opts.showCloseButton && (React.createElement(ToastCloseButton, { className: "close-button ".concat(theme) },
-            React.createElement(IconButton, { variant: 'secondary', shape: "circular", useTransparentBackground: true, invertFocus: opts.color === ToastColor.BLACK, action: function (event) { return setShouldRemove(true); } },
-                React.createElement(SystemIcons.Close, { size: "24px", color: COLORS.neutral_600 })))),
-        !!opts.autoClose && React.createElement(Loader, { className: "loader ".concat(theme), duration: (_d = opts.delay) !== null && _d !== void 0 ? _d : 0 })));
-};
-export default Toast;
-var animations = {
-    enter: (_a = {
-            bezier: 'cubic-bezier(0.22, 0.61, 0.35, 1)',
-            duration: '300ms'
-        },
-        _a[ToastEntryDirection.TOP] = {
-            fromHeight: -1,
-            toHeight: 0,
-            fromWidth: 0,
-            toWidth: 0,
-        },
-        _a[ToastEntryDirection.BOTTOM] = {
-            fromHeight: 1,
-            toHeight: 0,
-            fromWidth: 0,
-            toWidth: 0,
-        },
-        _a[ToastEntryDirection.LEFT] = {
-            fromHeight: 0,
-            toHeight: 0,
-            fromWidth: -1,
-            toWidth: 0,
-        },
-        _a[ToastEntryDirection.RIGHT] = {
-            fromHeight: 0,
-            toHeight: 0,
-            fromWidth: 1,
-            toWidth: 0,
-        },
-        _a),
-    leave: (_b = {
-            bezier: 'cubic-bezier(0.5, 0.05, 0.67, 0.19)',
-            duration: '205ms'
-        },
-        _b[ToastEntryDirection.TOP] = {
-            fromHeight: 0,
-            toHeight: -1,
-            fromWidth: 0,
-            toWidth: 0,
-        },
-        _b[ToastEntryDirection.BOTTOM] = {
-            fromHeight: 0,
-            toHeight: 1,
-            fromWidth: 0,
-            toWidth: 0,
-        },
-        _b[ToastEntryDirection.LEFT] = {
-            fromHeight: 0,
-            toHeight: 0,
-            fromWidth: 0,
-            toWidth: -1,
-        },
-        _b[ToastEntryDirection.RIGHT] = {
-            fromHeight: 0,
-            toHeight: 0,
-            fromWidth: 0,
-            toWidth: 1,
-        },
-        _b),
-};
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9;
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
+import _pt from "prop-types";
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _enter, _leave;
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+import * as React from 'react';
+import styled, { keyframes } from 'styled-components';
+import { ToastActionType, ToastColor, ToastEntryDirection, ToastPosition } from '../types';
+import { BOXSHADOWS, COLORS } from '../styles';
+import { Size } from '../types';
+import { Button, IconButton } from '../Button';
+import { ComponentSStyling, ComponentTextStyle } from '../styles';
+import { HyperLinkDefaultStyling, HyperLinkInvertedStyling } from '../HyperLink';
+import { SystemIcons } from '../icons';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+var LoaderAnimationKeyframes = keyframes(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  0% {\n    background-position: right;\n  }\n  100% {\n    background-position: left;\n  }\n"])));
+var Loader = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  position: absolute;\n  bottom: 0;\n  left: 0;\n  width: 100%;\n  height: 4px;\n  border-bottom-left-radius: 8px;\n  border-bottom-right-radius: 8px;\n\n  animation: ", " ", "ms cubic-bezier(0.18, 0.39, 0.35, 1);\n\n  &.", " {\n    background: linear-gradient(to right, ", " 50%, ", " 50%) left;\n    background-size: 200% 100%;\n  }\n\n  &.", " {\n    background: linear-gradient(to right, ", " 50%, ", " 50%) left;\n    background-size: 200% 100%;\n  }\n\n  &.", " {\n    background: linear-gradient(to right, ", " 50%, ", " 50%) left;\n    background-size: 200% 100%;\n  }\n\n  &.", " {\n    background: linear-gradient(to right, ", " 50%, ", " 50%) left;\n    background-size: 200% 100%;\n  }\n\n  &.", " {\n    background: linear-gradient(to right, ", " 50%, ", " 50%) left;\n    background-size: 200% 100%;\n  }\n\n  &.", " {\n    background: linear-gradient(to right, ", " 50%, ", " 50%) left;\n    background-size: 200% 100%;\n  }\n"])), LoaderAnimationKeyframes, function (props) {
+  return props.duration;
+}, ToastColor[ToastColor.BLACK], COLORS.neutral_200, COLORS.neutral_800, ToastColor[ToastColor.WHITE], COLORS.neutral_400, COLORS.white, ToastColor[ToastColor.BLUE], COLORS.accent1_200, COLORS.accent1_600, ToastColor[ToastColor.GREEN], COLORS.correct_200, COLORS.correct_500, ToastColor[ToastColor.ORANGE], COLORS.warning_200, COLORS.warning_500, ToastColor[ToastColor.RED], COLORS.critical_200, COLORS.critical_500);
+export var ToastContainer = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  box-shadow: ", ";\n  border-radius: 4px;\n\n  animation: ", " ", " ", ";\n  transform: ", ";\n\n  transition: all 300ms cubic-bezier(0.64, 0.04, 0.35, 1);\n\n  padding: 0 ", " ", " 16px;\n\n  margin-bottom: 8px;\n  display: flex;\n  align-items: center;\n  gap: 16px;\n  justify-content: left;\n\n  position: relative;\n\n  width: max-content;\n  min-height: 48px;\n  box-sizing: border-box;\n\n  ", "\n\n  & a {\n    display: inline;\n    ", "\n  }\n\n  &.", " {\n    background-color: ", ";\n  }\n\n  &.", " {\n    background-color: ", ";\n    color: ", ";\n\n    & a {\n      ", "\n    }\n  }\n\n  &.", " {\n    background-color: ", ";\n  }\n\n  &.", " {\n    background-color: ", ";\n  }\n\n  &.", " {\n    background-color: ", ";\n  }\n\n  &.", " {\n    background-color: ", ";\n  }\n"])), BOXSHADOWS.BOXSHADOW_L2, function (props) {
+  return props.animation.keyframes;
+}, function (props) {
+  return props.animation.duration;
+}, function (props) {
+  return props.animation.bezier;
+}, function (props) {
+  return props.animation.transform;
+}, function (props) {
+  return props.withClose ? '0' : '16px';
+}, function (props) {
+  return props.withLoader ? '4px' : '0';
+}, ComponentSStyling(ComponentTextStyle.Regular, COLORS.white), HyperLinkInvertedStyling, ToastColor[ToastColor.BLACK], COLORS.neutral_800, ToastColor[ToastColor.WHITE], COLORS.white, COLORS.black, HyperLinkDefaultStyling, ToastColor[ToastColor.BLUE], COLORS.accent1_600, ToastColor[ToastColor.GREEN], COLORS.correct_500, ToastColor[ToastColor.ORANGE], COLORS.warning_500, ToastColor[ToastColor.RED], COLORS.critical_500);
+export var ToastActionButtons = styled.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: row;\n  gap: 8px;\n  align-items: center;\n\n  & .action {\n    height: unset;\n  }\n"])));
+export var ToastCloseButton = styled.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  & > button {\n    margin-left: 16px;\n\n    & svg {\n      padding: 0;\n    }\n  }\n\n  button svg path{\n    fill: ", " !important;\n  }\n\n  &.", " {\n    button svg path {\n      fill: ", " !important;\n    }\n  }\n"])), COLORS.white, ToastColor[ToastColor.WHITE], COLORS.neutral_600);
+export var ToastTextContainer = styled.span(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  font-feature-settings: 'liga' off;\n  width: 240px;\n  display: flex;\n  padding: 16px 0;\n"])));
+export var ToastIconContainer = styled.span(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n  margin-right: -8px;\n"])));
+var DEFAULT_OPTIONS = {
+  color: ToastColor.BLACK,
+  autoClose: true,
+  delay: 5000,
+  showCloseButton: false,
+  position: ToastPosition.TOPLEFT,
+  enterFrom: ToastEntryDirection.TOP
+};
+var Toast = function Toast(_ref) {
+  var _opts$enterFrom, _opts$color, _opts$delay;
+  var content = _ref.content,
+    remove = _ref.remove,
+    _ref$options = _ref.options,
+    options = _ref$options === void 0 ? DEFAULT_OPTIONS : _ref$options,
+    testId = _ref.testId;
+  if (!remove) throw new Error('remove function is required when rendering Toast. Make sure that you are using useToast hook and ToastProvider for rendering Toasts');
+  var removeRef = React.useRef();
+  removeRef.current = remove;
+  var elementRef = React.useRef(null);
+  var _React$useState = React.useState(false),
+    _React$useState2 = _slicedToArray(_React$useState, 2),
+    shouldRemove = _React$useState2[0],
+    setShouldRemove = _React$useState2[1];
+  var _React$useState3 = React.useState({
+      width: 0,
+      height: 0
+    }),
+    _React$useState4 = _slicedToArray(_React$useState3, 2),
+    dimensions = _React$useState4[0],
+    setDimensions = _React$useState4[1];
+  var opts = _objectSpread(_objectSpread({}, DEFAULT_OPTIONS), options);
+  React.useEffect(function () {
+    if (opts !== null && opts !== void 0 && opts.autoClose) {
+      // @ts-ignore
+      var id = setTimeout(function () {
+        return setShouldRemove(true);
+      }, opts.delay);
+      return function () {
+        return clearTimeout(id);
+      };
+    }
+    return undefined;
+  }, []);
+  React.useEffect(function () {
+    if (shouldRemove) {
+      // @ts-ignore
+      var id = setTimeout(function () {
+        return removeRef.current();
+      }, 200);
+      return function () {
+        return clearTimeout(id);
+      };
+    }
+  }, [shouldRemove]);
+  React.useEffect(function () {
+    var _elementRef$current, _elementRef$current2;
+    setDimensions({
+      height: (_elementRef$current = elementRef.current) === null || _elementRef$current === void 0 ? void 0 : _elementRef$current.clientHeight,
+      width: (_elementRef$current2 = elementRef.current) === null || _elementRef$current2 === void 0 ? void 0 : _elementRef$current2.clientWidth
+    });
+  }, []);
+  var animation = animations[shouldRemove ? 'leave' : 'enter'];
+  var direction = animation[(_opts$enterFrom = opts.enterFrom) !== null && _opts$enterFrom !== void 0 ? _opts$enterFrom : ToastEntryDirection.TOP];
+  var fromY = dimensions.height * direction.fromHeight;
+  var toY = dimensions.height * direction.toHeight;
+  var fromX = dimensions.width * direction.fromWidth;
+  var toX = dimensions.width * direction.toWidth;
+  var prop = {
+    duration: animation.duration,
+    bezier: animation.bezier,
+    transform: "translateY(".concat(toY, ") translateX(").concat(toX, ")"),
+    keyframes: keyframes(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n        0% {\n          transform: translateY(", "px) translateX(", "px);\n        }\n        100% {\n          transform: translateY(", "px) translateX(", "px);\n        }"])), fromY, fromX, toY, toX)
+  };
+  if (!dimensions.height) {
+    prop = _objectSpread(_objectSpread({}, prop), {
+      transform: 'translateY(-1000vh) translateX(-1000vw)',
+      keyframes: keyframes(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral([""])))
+    });
+  }
+  var theme = ToastColor[(_opts$color = opts.color) !== null && _opts$color !== void 0 ? _opts$color : ToastColor.BLACK];
+  if (!shouldRemove) {
+    setTimeout(function () {
+      var _elementRef$current3;
+      return elementRef === null || elementRef === void 0 ? void 0 : (_elementRef$current3 = elementRef.current) === null || _elementRef$current3 === void 0 ? void 0 : _elementRef$current3.focus();
+    });
+  }
+  return /*#__PURE__*/_jsxs(ToastContainer, {
+    "data-testid": testId,
+    animation: prop,
+    ref: elementRef,
+    withLoader: !!opts.autoClose,
+    className: theme,
+    withClose: !!opts.showCloseButton,
+    tabIndex: -1,
+    children: [opts.icon && /*#__PURE__*/_jsx(ToastIconContainer, {
+      children: opts.icon
+    }), /*#__PURE__*/_jsx(ToastTextContainer, {
+      className: 'description',
+      children: content
+    }), opts.action && /*#__PURE__*/_jsx(ToastActionButtons, {
+      children: opts.action.map(function (action, i) {
+        return /*#__PURE__*/_jsx(Button, {
+          size: Size.Small,
+          variant: action.type === ToastActionType.SECONDARY ? 'secondary' : 'primary',
+          colorTheme: opts.color !== ToastColor.WHITE ? 'dark' : 'teal',
+          invertFocus: opts.color === ToastColor.BLACK,
+          onClick: function onClick() {
+            setShouldRemove(true);
+            action.handler();
+          },
+          className: 'action',
+          children: action.label
+        }, i);
+      })
+    }), opts.showCloseButton && /*#__PURE__*/_jsx(ToastCloseButton, {
+      className: "close-button ".concat(theme),
+      children: /*#__PURE__*/_jsx(IconButton, {
+        variant: 'secondary',
+        shape: "circular",
+        useTransparentBackground: true,
+        invertFocus: opts.color === ToastColor.BLACK,
+        action: function action(event) {
+          return setShouldRemove(true);
+        },
+        children: /*#__PURE__*/_jsx(SystemIcons.Close, {
+          size: "24px",
+          color: COLORS.neutral_600
+        })
+      })
+    }), !!opts.autoClose && /*#__PURE__*/_jsx(Loader, {
+      className: "loader ".concat(theme),
+      duration: (_opts$delay = opts.delay) !== null && _opts$delay !== void 0 ? _opts$delay : 0
+    })]
+  });
+};
+Toast.propTypes = {
+  remove: _pt.any,
+  content: _pt.any.isRequired,
+  options: _pt.shape({
+    autoClose: _pt.bool,
+    delay: _pt.number,
+    showCloseButton: _pt.bool,
+    action: _pt.arrayOf(_pt.shape({
+      label: _pt.string.isRequired,
+      handler: _pt.func.isRequired
+    })),
+    icon: _pt.node
+  }),
+  testId: _pt.string
+};
+export default Toast;
+var animations = {
+  enter: (_enter = {
+    bezier: 'cubic-bezier(0.22, 0.61, 0.35, 1)',
+    duration: '300ms'
+  }, _defineProperty(_enter, ToastEntryDirection.TOP, {
+    fromHeight: -1,
+    toHeight: 0,
+    fromWidth: 0,
+    toWidth: 0
+  }), _defineProperty(_enter, ToastEntryDirection.BOTTOM, {
+    fromHeight: 1,
+    toHeight: 0,
+    fromWidth: 0,
+    toWidth: 0
+  }), _defineProperty(_enter, ToastEntryDirection.LEFT, {
+    fromHeight: 0,
+    toHeight: 0,
+    fromWidth: -1,
+    toWidth: 0
+  }), _defineProperty(_enter, ToastEntryDirection.RIGHT, {
+    fromHeight: 0,
+    toHeight: 0,
+    fromWidth: 1,
+    toWidth: 0
+  }), _enter),
+  leave: (_leave = {
+    bezier: 'cubic-bezier(0.5, 0.05, 0.67, 0.19)',
+    duration: '205ms'
+  }, _defineProperty(_leave, ToastEntryDirection.TOP, {
+    fromHeight: 0,
+    toHeight: -1,
+    fromWidth: 0,
+    toWidth: 0
+  }), _defineProperty(_leave, ToastEntryDirection.BOTTOM, {
+    fromHeight: 0,
+    toHeight: 1,
+    fromWidth: 0,
+    toWidth: 0
+  }), _defineProperty(_leave, ToastEntryDirection.LEFT, {
+    fromHeight: 0,
+    toHeight: 0,
+    fromWidth: 0,
+    toWidth: -1
+  }), _defineProperty(_leave, ToastEntryDirection.RIGHT, {
+    fromHeight: 0,
+    toHeight: 0,
+    fromWidth: 0,
+    toWidth: 1
+  }), _leave)
+};
+//# sourceMappingURL=Toast.js.map

package/dist/Toasters/ToastContext.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { ToastOptions } from './Toast';
-export declare type ToastProviderProps = {
+export type ToastProviderProps = {
     children?: any;
 };
 export interface toast {
@@ -8,7 +8,7 @@ export interface toast {
     id: string;
     content: any;
 }
-export declare type ToasterValueProps = {
+export type ToasterValueProps = {
     toasts: toast[];
     addToast: (content: any, options: ToastOptions) => string;
     removeToast: (id: string) => void;