@laerdal/life-react-components 1.4.1-dev.7.full → 1.4.1-dev.8

package/dist/Tabs/Tabs.js

@@ -0,0 +1,101 @@
+import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
+import _pt from "prop-types";
+
+var _templateObject;
+
+import * as React from 'react';
+import styled from 'styled-components';
+import { Size } from '../types';
+import { jsx as _jsx } from "react/jsx-runtime";
+
+var getHeight = function getHeight(size) {
+  switch (size) {
+    case Size.Small:
+      return '48px';
+
+    case Size.Medium:
+      return '56px';
+
+    case Size.Large:
+      return '64px';
+
+    default:
+      return '48px';
+  }
+};
+
+var getFontSize = function getFontSize(size) {
+  switch (size) {
+    case Size.Small:
+      return '16px';
+
+    case Size.Medium:
+      return '18px';
+
+    case Size.Large:
+      return '20px';
+
+    default:
+      return '20px';
+  }
+};
+
+var getTopMargin = function getTopMargin(size) {
+  switch (size) {
+    case Size.Small:
+      return '6px';
+
+    case Size.Medium:
+      return '10px';
+
+    case Size.Large:
+      return '12px';
+
+    default:
+      return '12px';
+  }
+};
+
+var getBottomMargin = function getBottomMargin(size) {
+  switch (size) {
+    case Size.Small:
+      return '2px';
+
+    case Size.Medium:
+      return '3px';
+
+    case Size.Large:
+      return '4px';
+
+    default:
+      return '4px';
+  }
+};
+
+var Nav = styled.nav(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n\n  a {\n    height: ", ";\n  }\n\n  a > div:last-of-type {\n    font-size: 12px;\n    margin: 0 0 8px 16px;\n  }\n  a > div:first-child {\n    font-size: ", ";\n    margin: ", " 0 ", " 16px;\n  }\n  a > div:only-of-type {\n    font-size: ", ";\n    margin: auto 0 auto 16px;\n  }\n\n  @media print {\n    display: none;\n  }\n"])), function (props) {
+  return getHeight(props.size);
+}, function (props) {
+  return getFontSize(props.size);
+}, function (props) {
+  return getTopMargin(props.size);
+}, function (props) {
+  return getBottomMargin(props.size);
+}, function (props) {
+  return getFontSize(props.size);
+});
+
+var Tabs = function Tabs(_ref) {
+  var children = _ref.children,
+      size = _ref.size;
+  return /*#__PURE__*/_jsx(Nav, {
+    role: "tablist",
+    size: size,
+    children: children
+  });
+};
+
+Tabs.propTypes = {
+  children: _pt.any
+};
+export default Tabs;
+//# sourceMappingURL=Tabs.js.map

package/dist/Tabs/Tabs.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/Tabs/Tabs.tsx"],"names":["React","styled","Size","getHeight","size","Small","Medium","Large","getFontSize","getTopMargin","getBottomMargin","Nav","nav","props","Tabs","children"],"mappings":";;;;;AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,OAAOC,MAAP,MAAmB,mBAAnB;AACA,SAASC,IAAT,QAAqB,UAArB;;;AAOA,IAAMC,SAAS,GAAG,SAAZA,SAAY,CAACC,IAAD,EAAgB;AAChC,UAAQA,IAAR;AACE,SAAKF,IAAI,CAACG,KAAV;AACE,aAAO,MAAP;;AACF,SAAKH,IAAI,CAACI,MAAV;AACE,aAAO,MAAP;;AACF,SAAKJ,IAAI,CAACK,KAAV;AACE,aAAO,MAAP;;AACF;AACE,aAAO,MAAP;AARJ;AAUD,CAXD;;AAaA,IAAMC,WAAW,GAAG,SAAdA,WAAc,CAACJ,IAAD,EAAgB;AAClC,UAAQA,IAAR;AACE,SAAKF,IAAI,CAACG,KAAV;AACE,aAAO,MAAP;;AACF,SAAKH,IAAI,CAACI,MAAV;AACE,aAAO,MAAP;;AACF,SAAKJ,IAAI,CAACK,KAAV;AACE,aAAO,MAAP;;AACF;AACE,aAAO,MAAP;AARJ;AAUD,CAXD;;AAaA,IAAME,YAAY,GAAG,SAAfA,YAAe,CAACL,IAAD,EAAgB;AACnC,UAAQA,IAAR;AACE,SAAKF,IAAI,CAACG,KAAV;AACE,aAAO,KAAP;;AACF,SAAKH,IAAI,CAACI,MAAV;AACE,aAAO,MAAP;;AACF,SAAKJ,IAAI,CAACK,KAAV;AACE,aAAO,MAAP;;AACF;AACE,aAAO,MAAP;AARJ;AAUD,CAXD;;AAaA,IAAMG,eAAe,GAAG,SAAlBA,eAAkB,CAACN,IAAD,EAAgB;AACtC,UAAQA,IAAR;AACE,SAAKF,IAAI,CAACG,KAAV;AACE,aAAO,KAAP;;AACF,SAAKH,IAAI,CAACI,MAAV;AACE,aAAO,KAAP;;AACF,SAAKJ,IAAI,CAACK,KAAV;AACE,aAAO,KAAP;;AACF;AACE,aAAO,KAAP;AARJ;AAUD,CAXD;;AAaA,IAAMI,GAAG,GAAGV,MAAM,CAACW,GAAV,4bAKK,UAACC,KAAD;AAAA,SAAWV,SAAS,CAACU,KAAK,CAACT,IAAP,CAApB;AAAA,CALL,EAaQ,UAACS,KAAD;AAAA,SAAWL,WAAW,CAACK,KAAK,CAACT,IAAP,CAAtB;AAAA,CAbR,EAcK,UAACS,KAAD;AAAA,SAAWJ,YAAY,CAACI,KAAK,CAACT,IAAP,CAAvB;AAAA,CAdL,EAc8C,UAACS,KAAD;AAAA,SAAWH,eAAe,CAACG,KAAK,CAACT,IAAP,CAA1B;AAAA,CAd9C,EAiBQ,UAACS,KAAD;AAAA,SAAWL,WAAW,CAACK,KAAK,CAACT,IAAP,CAAtB;AAAA,CAjBR,CAAT;;AA0BA,IAAMU,IAAwC,GAAG,SAA3CA,IAA2C;AAAA,MAAGC,QAAH,QAAGA,QAAH;AAAA,MAAaX,IAAb,QAAaA,IAAb;AAAA,sBAC/C,KAAC,GAAD;AAAK,IAAA,IAAI,EAAC,SAAV;AAAoB,IAAA,IAAI,EAAEA,IAA1B;AAAA,cACGW;AADH,IAD+C;AAAA,CAAjD;;;AAlFEA,EAAAA,Q;;AAwFF,eAAeD,IAAf","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport { Size } from '../types';\n\ntype TabsProps = {\n  children?: any;\n  size: Size;\n};\n\nconst getHeight = (size: Size) => {\n  switch (size) {\n    case Size.Small:\n      return '48px';\n    case Size.Medium:\n      return '56px';\n    case Size.Large:\n      return '64px';\n    default:\n      return '48px';\n  }\n};\n\nconst getFontSize = (size: Size) => {\n  switch (size) {\n    case Size.Small:\n      return '16px';\n    case Size.Medium:\n      return '18px';\n    case Size.Large:\n      return '20px';\n    default:\n      return '20px';\n  }\n};\n\nconst getTopMargin = (size: Size) => {\n  switch (size) {\n    case Size.Small:\n      return '6px';\n    case Size.Medium:\n      return '10px';\n    case Size.Large:\n      return '12px';\n    default:\n      return '12px';\n  }\n};\n\nconst getBottomMargin = (size: Size) => {\n  switch (size) {\n    case Size.Small:\n      return '2px';\n    case Size.Medium:\n      return '3px';\n    case Size.Large:\n      return '4px';\n    default:\n      return '4px';\n  }\n};\n\nconst Nav = styled.nav<TabsProps>`\n  display: flex;\n  flex-direction: column;\n\n  a {\n    height: ${(props) => getHeight(props.size)};\n  }\n\n  a > div:last-of-type {\n    font-size: 12px;\n    margin: 0 0 8px 16px;\n  }\n  a > div:first-child {\n    font-size: ${(props) => getFontSize(props.size)};\n    margin: ${(props) => getTopMargin(props.size)} 0 ${(props) => getBottomMargin(props.size)} 16px;\n  }\n  a > div:only-of-type {\n    font-size: ${(props) => getFontSize(props.size)};\n    margin: auto 0 auto 16px;\n  }\n\n  @media print {\n    display: none;\n  }\n`;\n\nconst Tabs: React.FunctionComponent<TabsProps> = ({ children, size }) => (\n  <Nav role=\"tablist\" size={size}>\n    {children}\n  </Nav>\n);\n\nexport default Tabs;\n"],"file":"Tabs.js"}

package/dist/Tabs/VerticalTabs.js

@@ -0,0 +1,47 @@
+import _pt from "prop-types";
+import * as React from 'react';
+import Tabs from './Tabs';
+import TabLink from './TabLink';
+import { Size } from '../types';
+import { jsx as _jsx } from "react/jsx-runtime";
+
+var VerticalTabs = function VerticalTabs(_ref) {
+  var size = _ref.size,
+      entries = _ref.entries;
+  return /*#__PURE__*/_jsx(Tabs, {
+    size: size !== null && size !== void 0 ? size : Size.Large,
+    children: entries === null || entries === void 0 ? void 0 : entries.map(function (entry) {
+      return /*#__PURE__*/_jsx(TabLink, {
+        to: entry.to,
+        exact: entry.exact,
+        requiredLine: entry.requiredLine,
+        optionalLine: entry.optionalLine,
+        OptionalLineIcon: entry.optionalLineIcon,
+        disabled: entry.disabled,
+        showNotificationDot: entry.showNotificationDot,
+        size: size,
+        variant: entry.variant,
+        onLinkClick: function onLinkClick() {
+          if (entry.onClick) {
+            entry.onClick();
+          }
+        }
+      }, entry.to);
+    })
+  });
+};
+
+VerticalTabs.propTypes = {
+  entries: _pt.arrayOf(_pt.shape({
+    requiredLine: _pt.string.isRequired,
+    optionalLine: _pt.string,
+    to: _pt.string.isRequired,
+    disabled: _pt.bool,
+    onClick: _pt.func,
+    exact: _pt.bool,
+    showNotificationDot: _pt.bool,
+    variant: _pt.oneOf(['critical', 'positive'])
+  })).isRequired
+};
+export default VerticalTabs;
+//# sourceMappingURL=VerticalTabs.js.map

package/dist/Tabs/VerticalTabs.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/Tabs/VerticalTabs.tsx"],"names":["React","Tabs","TabLink","Size","VerticalTabs","size","entries","Large","map","entry","to","exact","requiredLine","optionalLine","optionalLineIcon","disabled","showNotificationDot","variant","onClick"],"mappings":";AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,OAAOC,IAAP,MAAiB,QAAjB;AACA,OAAOC,OAAP,MAAoB,WAApB;AAEA,SAASC,IAAT,QAAqB,UAArB;;;AAkBA,IAAMC,YAAY,GAAG,SAAfA,YAAe,OAA0C;AAAA,MAAvCC,IAAuC,QAAvCA,IAAuC;AAAA,MAAjCC,OAAiC,QAAjCA,OAAiC;AAC7D,sBACE,KAAC,IAAD;AAAM,IAAA,IAAI,EAAED,IAAF,aAAEA,IAAF,cAAEA,IAAF,GAAUF,IAAI,CAACI,KAAzB;AAAA,cACGD,OADH,aACGA,OADH,uBACGA,OAAO,CAAEE,GAAT,CAAa,UAACC,KAAD;AAAA,0BACZ,KAAC,OAAD;AAEE,QAAA,EAAE,EAAEA,KAAK,CAACC,EAFZ;AAGE,QAAA,KAAK,EAAED,KAAK,CAACE,KAHf;AAIE,QAAA,YAAY,EAAEF,KAAK,CAACG,YAJtB;AAKE,QAAA,YAAY,EAAEH,KAAK,CAACI,YALtB;AAME,QAAA,gBAAgB,EAAEJ,KAAK,CAACK,gBAN1B;AAOE,QAAA,QAAQ,EAAEL,KAAK,CAACM,QAPlB;AAQE,QAAA,mBAAmB,EAAEN,KAAK,CAACO,mBAR7B;AASE,QAAA,IAAI,EAAEX,IATR;AAUE,QAAA,OAAO,EAAEI,KAAK,CAACQ,OAVjB;AAWE,QAAA,WAAW,EAAE,uBAAM;AACjB,cAAIR,KAAK,CAACS,OAAV,EAAmB;AACjBT,YAAAA,KAAK,CAACS,OAAN;AACD;AACF;AAfH,SACOT,KAAK,CAACC,EADb,CADY;AAAA,KAAb;AADH,IADF;AAsBD,CAvBD;;;AAHEJ,EAAAA,O;AAZAM,IAAAA,Y;AACAC,IAAAA,Y;AAEAH,IAAAA,E;AACAK,IAAAA,Q;AACAG,IAAAA,O;AACAP,IAAAA,K;AACAK,IAAAA,mB;AACAC,IAAAA,O,aAAU,U,EAAa,U;;;AAgCzB,eAAeb,YAAf","sourcesContent":["import * as React from 'react';\nimport Tabs from './Tabs';\nimport TabLink from './TabLink';\nimport { BaseProps } from '../icons';\nimport { Size } from '../types';\n\nexport interface VerticalTabEntry {\n  requiredLine: string;\n  optionalLine?: string;\n  optionalLineIcon?: React.FunctionComponent<BaseProps>;\n  to: string;\n  disabled?: boolean;\n  onClick?: () => void;\n  exact?: boolean;\n  showNotificationDot?: boolean;\n  variant?: 'critical' | 'positive';\n}\ninterface VerticalTabsProps {\n  size?: Size.Small | Size.Medium | Size.Large;\n  entries: VerticalTabEntry[];\n}\n\nconst VerticalTabs = ({ size, entries }: VerticalTabsProps) => {\n  return (\n    <Tabs size={size ?? Size.Large}>\n      {entries?.map((entry: VerticalTabEntry) => (\n        <TabLink\n          key={entry.to}\n          to={entry.to}\n          exact={entry.exact}\n          requiredLine={entry.requiredLine}\n          optionalLine={entry.optionalLine}\n          OptionalLineIcon={entry.optionalLineIcon}\n          disabled={entry.disabled}\n          showNotificationDot={entry.showNotificationDot}\n          size={size}\n          variant={entry.variant}\n          onLinkClick={() => {\n            if (entry.onClick) {\n              entry.onClick();\n            }\n          }}></TabLink>\n      ))}\n    </Tabs>\n  );\n};\n\nexport default VerticalTabs;\n"],"file":"VerticalTabs.js"}

package/dist/Tabs/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/Tabs/index.ts"],"names":["VerticalTabs","HorizontalTabs"],"mappings":"AAAA,OAAOA,YAAP,MAAyB,gBAAzB;AACA,OAAOC,cAAP,MAA2B,kBAA3B;AAEA,SAASD,YAAT,EAAuBC,cAAvB","sourcesContent":["import VerticalTabs from './VerticalTabs';\nimport HorizontalTabs from './HorizontalTabs';\n\nexport { VerticalTabs, HorizontalTabs };\n"],"file":"index.js"}

package/dist/Toasters/Toast.js

@@ -0,0 +1,256 @@
+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(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
+import * as React from 'react';
+import styled, { keyframes } from 'styled-components';
+import { ToastActionType, ToastColor, ToastEntryDirection, ToastPosition } from '../types';
+import { BOXSHADOWS, COLORS } from '../styles';
+import { Close } from '../icons/systemicons/SystemIcons';
+import { Size } from '../types';
+import { Button, IconButton } from '../Button';
+import { ComponentSStyling, ComponentTextStyle } from '../styles/typography';
+import { HyperLinkDefaultStyling, HyperLinkInvertedStyling } from '../HyperLink';
+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);
+var Container = 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);
+var ActionButtons = 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"])));
+var CloseButton = 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);
+var TextContainer = styled.span(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  font-feature-settings: 'liga' off;\n  width: 240px;\n  display: flex;\n  padding: 16px 0;\n"])));
+var IconContainer = 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;
+  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(Container, {
+    "data-testid": testId,
+    animation: prop,
+    ref: elementRef,
+    withLoader: !!opts.autoClose,
+    className: theme,
+    withClose: !!opts.showCloseButton,
+    tabIndex: -1,
+    children: [opts.icon && /*#__PURE__*/_jsx(IconContainer, {
+      children: opts.icon
+    }), /*#__PURE__*/_jsx(TextContainer, {
+      className: 'description',
+      children: content
+    }), opts.action && /*#__PURE__*/_jsx(ActionButtons, {
+      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',
+          onClick: function onClick() {
+            setShouldRemove(true);
+            action.handler();
+          },
+          className: 'action',
+          children: action.label
+        }, i);
+      })
+    }), opts.showCloseButton && /*#__PURE__*/_jsx(CloseButton, {
+      className: "close-button ".concat(theme),
+      children: /*#__PURE__*/_jsx(IconButton, {
+        variant: 'secondary',
+        shape: "circular",
+        useTransparentBackground: true,
+        action: function action(event) {
+          return setShouldRemove(true);
+        },
+        children: /*#__PURE__*/_jsx(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/Toast.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/Toasters/Toast.tsx"],"names":["React","styled","keyframes","ToastActionType","ToastColor","ToastEntryDirection","ToastPosition","BOXSHADOWS","COLORS","Close","Size","Button","IconButton","ComponentSStyling","ComponentTextStyle","HyperLinkDefaultStyling","HyperLinkInvertedStyling","LoaderAnimationKeyframes","Loader","div","props","duration","BLACK","neutral_200","neutral_800","WHITE","neutral_400","white","BLUE","accent1_200","accent1_600","GREEN","correct_200","correct_500","ORANGE","warning_200","warning_500","RED","critical_200","critical_500","Container","BOXSHADOW_L2","animation","bezier","transform","withClose","withLoader","Regular","black","ActionButtons","CloseButton","neutral_600","TextContainer","span","IconContainer","DEFAULT_OPTIONS","color","autoClose","delay","showCloseButton","position","TOPLEFT","enterFrom","TOP","Toast","content","remove","options","testId","removeRef","useRef","current","elementRef","useState","shouldRemove","setShouldRemove","width","height","dimensions","setDimensions","opts","useEffect","id","setTimeout","clearTimeout","undefined","clientHeight","clientWidth","animations","direction","fromY","fromHeight","toY","toHeight","fromX","fromWidth","toX","toWidth","prop","theme","focus","icon","action","map","i","Small","type","SECONDARY","handler","label","event","enter","BOTTOM","LEFT","RIGHT","leave"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport styled, { keyframes } from 'styled-components';\nimport { ToastActionType, ToastColor, ToastEntryDirection, ToastPosition } from '../types';\nimport { BOXSHADOWS, COLORS, TYPOGRAPHY } from '../styles';\nimport { Close } from '../icons/systemicons/SystemIcons';\nimport { Size } from '../types' \nimport { Button, IconButton } from '../Button';\nimport { ComponentSStyling, ComponentTextStyle } from '../styles/typography';\nimport {HyperLinkDefaultStyling, HyperLinkInvertedStyling} from '../HyperLink';\n\nconst LoaderAnimationKeyframes = keyframes`\n  0% {\n    background-position: right;\n  }\n  100% {\n    background-position: left;\n  }\n`;\n\nconst Loader = styled.div<{ duration: number }>`\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: ${LoaderAnimationKeyframes} ${(props) => props.duration}ms cubic-bezier(0.18, 0.39, 0.35, 1);\n\n  &.${ToastColor[ToastColor.BLACK]} {\n    background: linear-gradient(to right, ${COLORS.neutral_200} 50%, ${COLORS.neutral_800} 50%) left;\n    background-size: 200% 100%;\n  }\n\n  &.${ToastColor[ToastColor.WHITE]} {\n    background: linear-gradient(to right, ${COLORS.neutral_400} 50%, ${COLORS.white} 50%) left;\n    background-size: 200% 100%;\n  }\n\n  &.${ToastColor[ToastColor.BLUE]} {\n    background: linear-gradient(to right, ${COLORS.accent1_200} 50%, ${COLORS.accent1_600} 50%) left;\n    background-size: 200% 100%;\n  }\n\n  &.${ToastColor[ToastColor.GREEN]} {\n    background: linear-gradient(to right, ${COLORS.correct_200} 50%, ${COLORS.correct_500} 50%) left;\n    background-size: 200% 100%;\n  }\n\n  &.${ToastColor[ToastColor.ORANGE]} {\n    background: linear-gradient(to right, ${COLORS.warning_200} 50%, ${COLORS.warning_500} 50%) left;\n    background-size: 200% 100%;\n  }\n\n  &.${ToastColor[ToastColor.RED]} {\n    background: linear-gradient(to right, ${COLORS.critical_200} 50%, ${COLORS.critical_500} 50%) left;\n    background-size: 200% 100%;\n  }\n`;\n\nconst Container = styled.div<{ animation: { duration: string; bezier: string; transform: string; keyframes: any }; withLoader: boolean; withClose: boolean }>`\n  box-shadow: ${BOXSHADOWS.BOXSHADOW_L2};\n  border-radius: 4px;\n\n  animation: ${(props) => props.animation.keyframes} ${(props) => props.animation.duration} ${(props) => props.animation.bezier};\n  transform: ${(props) => props.animation.transform};\n\n  transition: all 300ms cubic-bezier(0.64, 0.04, 0.35, 1);\n\n  padding: 0 ${(props) => (props.withClose ? '0' : '16px')} ${(props) => (props.withLoader ? '4px' : '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  ${ComponentSStyling(ComponentTextStyle.Regular, COLORS.white)}\n\n  & a {\n    display: inline;\n    ${HyperLinkInvertedStyling}\n  }\n\n  &.${ToastColor[ToastColor.BLACK]} {\n    background-color: ${COLORS.neutral_800};\n  }\n\n  &.${ToastColor[ToastColor.WHITE]} {\n    background-color: ${COLORS.white};\n    color: ${COLORS.black};\n\n    & a {\n      ${HyperLinkDefaultStyling}\n    }\n  }\n\n  &.${ToastColor[ToastColor.BLUE]} {\n    background-color: ${COLORS.accent1_600};\n  }\n\n  &.${ToastColor[ToastColor.GREEN]} {\n    background-color: ${COLORS.correct_500};\n  }\n\n  &.${ToastColor[ToastColor.ORANGE]} {\n    background-color: ${COLORS.warning_500};\n  }\n\n  &.${ToastColor[ToastColor.RED]} {\n    background-color: ${COLORS.critical_500};\n  }\n`;\n\nconst ActionButtons = styled.div`\n  display: flex;\n  flex-direction: row;\n  gap: 8px;\n  align-items: center;\n\n  & .action {\n    height: unset;\n  }\n`;\n\nconst CloseButton = styled.div`\n  & > button {\n    margin-left: 16px;\n\n    & svg {\n      padding: 0;\n    }\n  }\n\n  button svg path{\n    fill: ${COLORS.white} !important;\n  }\n\n  &.${ToastColor[ToastColor.WHITE]} {\n    button svg path {\n      fill: ${COLORS.neutral_600} !important;\n    }\n  }\n`;\n\nconst TextContainer = styled.span`\n  font-feature-settings: 'liga' off;\n  width: 240px;\n  display: flex;\n  padding: 16px 0;\n`;\n\nconst IconContainer = styled.span`\n  margin-right: -8px;\n`;\n\nexport type ToastOptions = {\n  color?: ToastColor;\n  autoClose?: boolean;\n  delay?: number;\n  showCloseButton?: boolean;\n  action?: {\n    label: string;\n    handler: () => void;\n    type?: ToastActionType;\n  }[];\n  position: ToastPosition;\n  enterFrom?: ToastEntryDirection;\n  icon?: React.ReactNode;\n};\n\ntype Props = {\n  remove?: any;\n  content: any;\n  options?: ToastOptions;\n  testId?: string;\n};\n\nconst DEFAULT_OPTIONS: ToastOptions = {\n  color: ToastColor.BLACK,\n  autoClose: true,\n  delay: 5000,\n  showCloseButton: false,\n  position: ToastPosition.TOPLEFT,\n  enterFrom: ToastEntryDirection.TOP,\n};\n\nconst Toast = ({ content, remove, options = DEFAULT_OPTIONS, testId }: Props) => {\n  const removeRef = React.useRef();\n  removeRef.current = remove;\n\n  const elementRef = React.useRef<any>(null);\n\n  const [shouldRemove, setShouldRemove] = React.useState(false);\n  const [dimensions, setDimensions] = React.useState<{ width: number; height: number }>({ width: 0, height: 0 });\n\n  const opts = { ...DEFAULT_OPTIONS, ...options };\n\n  React.useEffect(() => {\n    if (opts?.autoClose) {\n      // @ts-ignore\n      const id = setTimeout(() => setShouldRemove(true), opts.delay);\n      return () => clearTimeout(id);\n    }\n    return undefined;\n  }, []);\n\n  React.useEffect(() => {\n    if (shouldRemove) {\n      // @ts-ignore\n      const id = setTimeout(() => removeRef.current(), 200);\n      return () => clearTimeout(id);\n    }\n  }, [shouldRemove]);\n\n  React.useEffect(() => {\n    setDimensions({ height: elementRef.current?.clientHeight, width: elementRef.current?.clientWidth });\n  }, []);\n\n  const animation = animations[shouldRemove ? 'leave' : 'enter'];\n  const direction = animation[opts.enterFrom ?? ToastEntryDirection.TOP];\n\n  const fromY = dimensions.height * direction.fromHeight;\n  const toY = dimensions.height * direction.toHeight;\n  const fromX = dimensions.width * direction.fromWidth;\n  const toX = dimensions.width * direction.toWidth;\n\n  let prop = {\n    duration: animation.duration,\n    bezier: animation.bezier,\n    transform: `translateY(${toY}) translateX(${toX})`,\n    keyframes: keyframes`\n        0% {\n          transform: translateY(${fromY}px) translateX(${fromX}px);\n        }\n        100% {\n          transform: translateY(${toY}px) translateX(${toX}px);\n        }`,\n  };\n\n  if (!dimensions.height) {\n    prop = {\n      ...prop,\n      ...{\n        transform: 'translateY(-1000vh) translateX(-1000vw)',\n        keyframes: keyframes``,\n      },\n    };\n  }\n\n  const theme = ToastColor[opts.color ?? ToastColor.BLACK];\n\n  if (!shouldRemove){\n    setTimeout(() => elementRef?.current?.focus());\n  }\n\n  return (\n    <Container data-testid={testId} animation={prop} ref={elementRef} withLoader={!!opts.autoClose} className={theme} withClose={!!opts.showCloseButton} tabIndex={-1}>\n      {opts.icon && <IconContainer>{opts.icon}</IconContainer>}\n      <TextContainer className={'description'}>{content}</TextContainer>\n      {opts.action && (\n        <ActionButtons>\n          {opts.action.map((action, i) => (\n            <Button\n              size={Size.Small}\n              variant={action.type === ToastActionType.SECONDARY ? 'secondary' : 'primary'}\n              colorTheme={opts.color !== ToastColor.WHITE ? 'dark' : 'teal'}\n              key={i}\n              onClick={() => {\n                setShouldRemove(true);\n                action.handler();\n              }}\n              className={'action'}>\n              {action.label}\n            </Button>\n          ))}\n        </ActionButtons>\n      )}\n      {opts.showCloseButton && (\n        <CloseButton className={`close-button ${theme}`}>\n          <IconButton variant={'secondary'}\n                      shape=\"circular\"\n                      useTransparentBackground={true}\n                      action={(event) => setShouldRemove(true)}>\n            <Close size=\"24px\" color={COLORS.neutral_600} />\n          </IconButton>\n        </CloseButton>\n      )}\n      {!!opts.autoClose && <Loader className={`loader ${theme}`} duration={opts.delay ?? 0} />}\n    </Container>\n  );\n};\n\nexport default Toast;\n\nconst animations = {\n  enter: {\n    bezier: 'cubic-bezier(0.22, 0.61, 0.35, 1)',\n    duration: '300ms',\n    [ToastEntryDirection.TOP]: {\n      fromHeight: -1,\n      toHeight: 0,\n      fromWidth: 0,\n      toWidth: 0,\n    },\n    [ToastEntryDirection.BOTTOM]: {\n      fromHeight: 1,\n      toHeight: 0,\n      fromWidth: 0,\n      toWidth: 0,\n    },\n    [ToastEntryDirection.LEFT]: {\n      fromHeight: 0,\n      toHeight: 0,\n      fromWidth: -1,\n      toWidth: 0,\n    },\n    [ToastEntryDirection.RIGHT]: {\n      fromHeight: 0,\n      toHeight: 0,\n      fromWidth: 1,\n      toWidth: 0,\n    },\n  },\n  leave: {\n    bezier: 'cubic-bezier(0.5, 0.05, 0.67, 0.19)',\n    duration: '205ms',\n    [ToastEntryDirection.TOP]: {\n      fromHeight: 0,\n      toHeight: -1,\n      fromWidth: 0,\n      toWidth: 0,\n    },\n    [ToastEntryDirection.BOTTOM]: {\n      fromHeight: 0,\n      toHeight: 1,\n      fromWidth: 0,\n      toWidth: 0,\n    },\n    [ToastEntryDirection.LEFT]: {\n      fromHeight: 0,\n      toHeight: 0,\n      fromWidth: 0,\n      toWidth: -1,\n    },\n    [ToastEntryDirection.RIGHT]: {\n      fromHeight: 0,\n      toHeight: 0,\n      fromWidth: 0,\n      toWidth: 1,\n    },\n  },\n};\n"],"file":"Toast.js"}

package/dist/Toasters/ToastContext.js

@@ -0,0 +1,148 @@
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
+
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7;
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
+import * as React from 'react';
+import styled from 'styled-components';
+import { createUUID } from '../Services/functions';
+import Toast from './Toast';
+import { ToastPosition } from '../types';
+import { Z_INDEXES } from '../styles/z-indexes';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+
+/*export const ToastContext = React.createContext<ToasterValueProps>(null);*/
+export var ToastContext = /*#__PURE__*/React.createContext({});
+var ToastBucket = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  position: fixed;\n  z-index: ", ";\n  display: flex;\n  flex-direction: column-reverse;\n"])), Z_INDEXES.toast);
+var ToastBucketTopLeft = styled(ToastBucket)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  top: 16px;\n  left: 5%;\n"])));
+var ToastBucketTopMiddle = styled(ToastBucket)(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  top: 16px;\n  left: 50%;\n  transform: translateX(-50%);\n"])));
+var ToastBucketTopRight = styled(ToastBucket)(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  top: 16px;\n  right: 5%;\n"])));
+var ToastBucketBottomLeft = styled(ToastBucket)(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  bottom: 16px;\n  left: 5%;\n"])));
+var ToastBucketBottomMiddle = styled(ToastBucket)(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  bottom: 16px;\n  left: 50%;\n  transform: translateX(-50%);\n"])));
+var ToastBucketBottomRight = styled(ToastBucket)(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n  bottom: 16px;\n  right: 5%;\n"])));
+export var ToastProvider = function ToastProvider(_ref) {
+  var children = _ref.children;
+
+  var _React$useState = React.useState([]),
+      _React$useState2 = _slicedToArray(_React$useState, 2),
+      toasts = _React$useState2[0],
+      setToasts = _React$useState2[1];
+
+  var add = function add(content, options) {
+    var id = createUUID();
+    setToasts(function (prev) {
+      return [].concat(_toConsumableArray(prev), [{
+        id: id,
+        content: content,
+        options: options
+      }]);
+    });
+  };
+
+  var _remove = function remove(id) {
+    return setToasts(toasts.filter(function (t) {
+      return t.id !== id;
+    }));
+  };
+
+  var functions = React.useMemo(function () {
+    return {
+      addToast: add,
+      removeToast: _remove
+    };
+  }, [toasts]);
+  return /*#__PURE__*/_jsxs(ToastContext.Provider, {
+    value: _objectSpread({
+      toasts: toasts
+    }, functions),
+    children: [/*#__PURE__*/_jsx(ToastBucketTopLeft, {
+      children: toasts.filter(function (t) {
+        return t.options.position === ToastPosition.TOPLEFT;
+      }).map(function (t) {
+        return /*#__PURE__*/_jsx(Toast, {
+          content: t.content,
+          remove: function remove() {
+            return _remove(t.id);
+          },
+          options: t.options
+        }, t.id);
+      })
+    }), /*#__PURE__*/_jsx(ToastBucketTopMiddle, {
+      children: toasts.filter(function (t) {
+        return t.options.position === ToastPosition.TOPMIDDLE;
+      }).map(function (t) {
+        return /*#__PURE__*/_jsx(Toast, {
+          content: t.content,
+          remove: function remove() {
+            return _remove(t.id);
+          },
+          options: t.options
+        }, t.id);
+      })
+    }), /*#__PURE__*/_jsx(ToastBucketTopRight, {
+      children: toasts.filter(function (t) {
+        return t.options.position === ToastPosition.TOPRIGHT;
+      }).map(function (t) {
+        return /*#__PURE__*/_jsx(Toast, {
+          content: t.content,
+          remove: function remove() {
+            return _remove(t.id);
+          },
+          options: t.options
+        }, t.id);
+      })
+    }), /*#__PURE__*/_jsx(ToastBucketBottomLeft, {
+      children: toasts.filter(function (t) {
+        return t.options.position === ToastPosition.BOTTOMLEFT;
+      }).map(function (t) {
+        return /*#__PURE__*/_jsx(Toast, {
+          content: t.content,
+          remove: function remove() {
+            return _remove(t.id);
+          },
+          options: t.options
+        }, t.id);
+      })
+    }), /*#__PURE__*/_jsx(ToastBucketBottomMiddle, {
+      children: toasts.filter(function (t) {
+        return t.options.position === ToastPosition.BOTTOMMIDDLE;
+      }).map(function (t) {
+        return /*#__PURE__*/_jsx(Toast, {
+          content: t.content,
+          remove: function remove() {
+            return _remove(t.id);
+          },
+          options: t.options
+        }, t.id);
+      })
+    }), /*#__PURE__*/_jsx(ToastBucketBottomRight, {
+      children: toasts.filter(function (t) {
+        return t.options.position === ToastPosition.BOTTOMRIGHT;
+      }).map(function (t) {
+        return /*#__PURE__*/_jsx(Toast, {
+          content: t.content,
+          remove: function remove() {
+            return _remove(t.id);
+          },
+          options: t.options
+        }, t.id);
+      })
+    }), children]
+  });
+};
+export function useToast() {
+  var _React$useContext = React.useContext(ToastContext),
+      addToast = _React$useContext.addToast;
+
+  return {
+    addToast: addToast
+  };
+}
+//# sourceMappingURL=ToastContext.js.map