@skbkontur/react-ui 0.0.0-044e274f2c → 0.0.0-07d08325b0

package/components/Toast/Toast.md

@@ -1,4 +1,4 @@
-Вызов статических методов
+### Вызов статических методов
 
 ```jsx harmony
 import { Button, Toast } from '@skbkontur/react-ui';
@@ -13,7 +13,7 @@ function showComplexNotification() {
 <Button onClick={showComplexNotification}>Show notification</Button>;
 ```
 
-C кастомным showTime
+### Кастомный showTime
 
 ```jsx harmony
 import { Button, Toast } from '@skbkontur/react-ui';
@@ -28,7 +28,7 @@ function showComplexNotification() {
 <Button onClick={showComplexNotification}>Show notification</Button>;
 ```
 
-C кастомным showTime без action
+### Кастомный showTime без action
 
 
 ```jsx harmony
@@ -41,7 +41,7 @@ function showComplexNotification() {
 <Button onClick={showComplexNotification}>Show notification</Button>;
 ```
 
-Использование `ref`
+### Использование `ref`
 
 ```jsx harmony
 import { Button, Toast } from '@skbkontur/react-ui';

package/components/Toast/Toast.styles/Toast.styles.js

@@ -1,19 +1,17 @@
 import _taggedTemplateLiteralLoose from "@babel/runtime/helpers/esm/taggedTemplateLiteralLoose";
 var _templateObject, _templateObject2, _templateObject3, _templateObject4;
-import { memoizeStyle } from "../../../lib/theming/Emotion";
-export var getStyles = function getStyles(emotion) {
-  return memoizeStyle({
-    enter: function enter() {
-      return emotion.css(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n        transform: translateY(-40px);\n      "])));
-    },
-    enterActive: function enterActive() {
-      return emotion.css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n        transition: transform 0.2s cubic-bezier(0.22, 0.61, 0.36, 1);\n        transform: translateY(0) !important;\n      "])));
-    },
-    exit: function exit() {
-      return emotion.css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\n        transform: translateY(0);\n        opacity: 1;\n      "])));
-    },
-    exitActive: function exitActive() {
-      return emotion.css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteralLoose(["\n        opacity: 0.01 !important;\n        transition: opacity 0.15s ease-out;\n      "])));
-    }
-  });
-};
+import { css, memoizeStyle } from "../../../lib/theming/Emotion";
+export var styles = memoizeStyle({
+  enter: function enter() {
+    return css(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n      transform: translateY(-40px);\n    "])));
+  },
+  enterActive: function enterActive() {
+    return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n      transition: transform 0.2s cubic-bezier(0.22, 0.61, 0.36, 1);\n      transform: translateY(0) !important;\n    "])));
+  },
+  exit: function exit() {
+    return css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\n      transform: translateY(0);\n      opacity: 1;\n    "])));
+  },
+  exitActive: function exitActive() {
+    return css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteralLoose(["\n      opacity: 0.01 !important;\n      transition: opacity 0.15s ease-out;\n    "])));
+  }
+});

package/components/Toast/Toast.styles/Toast.styles.js.map

@@ -1 +1 @@
-{"version":3,"names":["memoizeStyle","getStyles","emotion","enter","css","_templateObject","_taggedTemplateLiteralLoose","enterActive","_templateObject2","exit","_templateObject3","exitActive","_templateObject4"],"sources":["Toast.styles.ts"],"sourcesContent":["import type { Emotion } from '@emotion/css/create-instance';\n\nimport { memoizeStyle } from '../../lib/theming/Emotion';\n\nexport const getStyles = (emotion: Emotion) =>\n  memoizeStyle({\n    enter() {\n      return emotion.css`\n        transform: translateY(-40px);\n      `;\n    },\n    enterActive() {\n      return emotion.css`\n        transition: transform 0.2s cubic-bezier(0.22, 0.61, 0.36, 1);\n        transform: translateY(0) !important;\n      `;\n    },\n    exit() {\n      return emotion.css`\n        transform: translateY(0);\n        opacity: 1;\n      `;\n    },\n    exitActive() {\n      return emotion.css`\n        opacity: 0.01 !important;\n        transition: opacity 0.15s ease-out;\n      `;\n    },\n  });\n"],"mappings":";;AAEA,SAASA,YAAY,QAAQ,2BAA2B;;AAExD,OAAO,IAAMC,SAAS,GAAG,SAAZA,SAASA,CAAIC,OAAgB;IACxCF,YAAY,CAAC;MACXG,KAAK,WAAAA,MAAA,EAAG;QACN,OAAOD,OAAO,CAACE,GAAG,CAAAC,eAAA,KAAAA,eAAA,GAAAC,2BAAA;;;MAGpB,CAAC;MACDC,WAAW,WAAAA,YAAA,EAAG;QACZ,OAAOL,OAAO,CAACE,GAAG,CAAAI,gBAAA,KAAAA,gBAAA,GAAAF,2BAAA;;;;MAIpB,CAAC;MACDG,IAAI,WAAAA,KAAA,EAAG;QACL,OAAOP,OAAO,CAACE,GAAG,CAAAM,gBAAA,KAAAA,gBAAA,GAAAJ,2BAAA;;;;MAIpB,CAAC;MACDK,UAAU,WAAAA,WAAA,EAAG;QACX,OAAOT,OAAO,CAACE,GAAG,CAAAQ,gBAAA,KAAAA,gBAAA,GAAAN,2BAAA;;;;MAIpB;IACF,CAAC,CAAC","ignoreList":[]}
+{"version":3,"names":["css","memoizeStyle","styles","enter","_templateObject","_taggedTemplateLiteralLoose","enterActive","_templateObject2","exit","_templateObject3","exitActive","_templateObject4"],"sources":["Toast.styles.ts"],"sourcesContent":["import { css, memoizeStyle } from '../../lib/theming/Emotion';\n\nexport const styles = memoizeStyle({\n  enter() {\n    return css`\n      transform: translateY(-40px);\n    `;\n  },\n  enterActive() {\n    return css`\n      transition: transform 0.2s cubic-bezier(0.22, 0.61, 0.36, 1);\n      transform: translateY(0) !important;\n    `;\n  },\n  exit() {\n    return css`\n      transform: translateY(0);\n      opacity: 1;\n    `;\n  },\n  exitActive() {\n    return css`\n      opacity: 0.01 !important;\n      transition: opacity 0.15s ease-out;\n    `;\n  },\n});\n"],"mappings":"0KAAA,SAASA,GAAG,EAAEC,YAAY,QAAQ,2BAA2B;;AAE7D,OAAO,IAAMC,MAAM,GAAGD,YAAY,CAAC;EACjCE,KAAK,WAAAA,MAAA,EAAG;IACN,OAAOH,GAAG,CAAAI,eAAA,KAAAA,eAAA,GAAAC,2BAAA;;;EAGZ,CAAC;EACDC,WAAW,WAAAA,YAAA,EAAG;IACZ,OAAON,GAAG,CAAAO,gBAAA,KAAAA,gBAAA,GAAAF,2BAAA;;;;EAIZ,CAAC;EACDG,IAAI,WAAAA,KAAA,EAAG;IACL,OAAOR,GAAG,CAAAS,gBAAA,KAAAA,gBAAA,GAAAJ,2BAAA;;;;EAIZ,CAAC;EACDK,UAAU,WAAAA,WAAA,EAAG;IACX,OAAOV,GAAG,CAAAW,gBAAA,KAAAA,gBAAA,GAAAN,2BAAA;;;;EAIZ;AACF,CAAC,CAAC","ignoreList":[]}

package/components/Toast/Toast.styles.d.ts

@@ -1,5 +1,4 @@
-import type { Emotion } from '@emotion/css/create-instance';
-export declare const getStyles: (emotion: Emotion) => {
+export declare const styles: {
     enter(): string;
     enterActive(): string;
     exit(): string;

package/components/Toast/ToastStatic/ToastStatic.js

@@ -5,7 +5,7 @@ import { globalObject } from '@skbkontur/global-object';
 import { Toast, ToastDataTids } from "../Toast";
 export var ToastStatic = function ToastStatic() {};
 _ToastStatic = ToastStatic;
-ToastStatic.push = function (notification, action, showTime) {
+ToastStatic.push = function (notification, action, showTime, showCloseIcon) {
   if (!_ToastStatic.node && globalObject.document) {
     _ToastStatic.node = globalObject.document.createElement('div');
     var body = globalObject.document.body;
@@ -20,15 +20,15 @@ ToastStatic.push = function (notification, action, showTime) {
         return _ToastStatic.instance = el;
       }
     }), _ToastStatic.node, function () {
-      return _ToastStatic._push(notification, action, showTime);
+      return _ToastStatic._push(notification, action, showTime, showCloseIcon);
     });
   } else {
-    _ToastStatic._push(notification, action, showTime);
+    _ToastStatic._push(notification, action, showTime, showCloseIcon);
   }
 };
-ToastStatic._push = function (notification, action, showTime) {
+ToastStatic._push = function (notification, action, showTime, showCloseIcon) {
   if (_ToastStatic.instance) {
-    _ToastStatic.instance.push(notification, action, showTime);
+    _ToastStatic.instance.push(notification, action, showTime, showCloseIcon);
   }
 };
 ToastStatic.close = function () {

package/components/Toast/ToastStatic/ToastStatic.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","ReactDOM","globalObject","Toast","ToastDataTids","ToastStatic","_ToastStatic","push","notification","action","showTime","node","document","createElement","body","Error","appendChild","render","toastStatic","ref","el","instance","_push","close"],"sources":["ToastStatic.tsx"],"sourcesContent":["import React from 'react';\nimport ReactDOM from 'react-dom';\nimport { globalObject } from '@skbkontur/global-object';\n\nimport { Nullable } from '../../typings/utility-types';\n\nimport { Toast, Action, ToastDataTids } from './Toast';\n\nexport class ToastStatic {\n  public static push = (notification: string, action?: Nullable<Action>, showTime?: number) => {\n    if (!ToastStatic.node && globalObject.document) {\n      ToastStatic.node = globalObject.document.createElement('div');\n      const { body } = globalObject.document;\n      if (!body) {\n        throw Error('There is no \"body\" element in \"document\"');\n      }\n      body.appendChild(ToastStatic.node);\n\n      ReactDOM.render(\n        <Toast data-tid={ToastDataTids.toastStatic} ref={(el) => (ToastStatic.instance = el)} />,\n        ToastStatic.node,\n        () => ToastStatic._push(notification, action, showTime),\n      );\n    } else {\n      ToastStatic._push(notification, action, showTime);\n    }\n  };\n\n  public static _push = (notification: string, action?: Nullable<Action>, showTime?: number) => {\n    if (ToastStatic.instance) {\n      ToastStatic.instance.push(notification, action, showTime);\n    }\n  };\n\n  public static close = () => {\n    if (ToastStatic.instance) {\n      ToastStatic.instance.close();\n    }\n  };\n\n  private static node: HTMLDivElement;\n  private static instance: Nullable<Toast> = null;\n}\n"],"mappings":"iBAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,OAAOC,QAAQ,MAAM,WAAW;AAChC,SAASC,YAAY,QAAQ,0BAA0B;;;;AAIvD,SAASC,KAAK,EAAUC,aAAa,QAAQ,SAAS;;AAEtD,WAAaC,WAAW,YAAAA,YAAA,KAkCvBC,YAAA,GAlCYD,WAAW,CAAXA,WAAW;AACRE,IAAI,GAAG,UAACC,YAAoB,EAAEC,MAAyB,EAAEC,QAAiB,EAAK;EAC3F,IAAI,CAACL,YAAW,CAACM,IAAI,IAAIT,YAAY,CAACU,QAAQ,EAAE;IAC9CP,YAAW,CAACM,IAAI,GAAGT,YAAY,CAACU,QAAQ,CAACC,aAAa,CAAC,KAAK,CAAC;IAC7D,IAAQC,IAAI,GAAKZ,YAAY,CAACU,QAAQ,CAA9BE,IAAI;IACZ,IAAI,CAACA,IAAI,EAAE;MACT,MAAMC,KAAK,CAAC,0CAA0C,CAAC;IACzD;IACAD,IAAI,CAACE,WAAW,CAACX,YAAW,CAACM,IAAI,CAAC;;IAElCV,QAAQ,CAACgB,MAAM;MACbjB,KAAA,CAAAa,aAAA,CAACV,KAAK,IAAC,YAAUC,aAAa,CAACc,WAAY,EAACC,GAAG,EAAE,SAAAA,IAACC,EAAE,UAAMf,YAAW,CAACgB,QAAQ,GAAGD,EAAE,EAAE,EAAE,CAAC;MACxFf,YAAW,CAACM,IAAI;MAChB,oBAAMN,YAAW,CAACiB,KAAK,CAACd,YAAY,EAAEC,MAAM,EAAEC,QAAQ,CAAC;IACzD,CAAC;EACH,CAAC,MAAM;IACLL,YAAW,CAACiB,KAAK,CAACd,YAAY,EAAEC,MAAM,EAAEC,QAAQ,CAAC;EACnD;AACF,CAAC,CAlBUL,WAAW;;AAoBRiB,KAAK,GAAG,UAACd,YAAoB,EAAEC,MAAyB,EAAEC,QAAiB,EAAK;EAC5F,IAAIL,YAAW,CAACgB,QAAQ,EAAE;IACxBhB,YAAW,CAACgB,QAAQ,CAACd,IAAI,CAACC,YAAY,EAAEC,MAAM,EAAEC,QAAQ,CAAC;EAC3D;AACF,CAAC,CAxBUL,WAAW;;AA0BRkB,KAAK,GAAG,YAAM;EAC1B,IAAIlB,YAAW,CAACgB,QAAQ,EAAE;IACxBhB,YAAW,CAACgB,QAAQ,CAACE,KAAK,CAAC,CAAC;EAC9B;AACF,CAAC,CA9BUlB,WAAW;;;AAiCPgB,QAAQ,GAAoB,IAAI","ignoreList":[]}
+{"version":3,"names":["React","ReactDOM","globalObject","Toast","ToastDataTids","ToastStatic","_ToastStatic","push","notification","action","showTime","showCloseIcon","node","document","createElement","body","Error","appendChild","render","toastStatic","ref","el","instance","_push","close"],"sources":["ToastStatic.tsx"],"sourcesContent":["import React from 'react';\nimport ReactDOM from 'react-dom';\nimport { globalObject } from '@skbkontur/global-object';\n\nimport { Nullable } from '../../typings/utility-types';\n\nimport { Toast, Action, ToastDataTids } from './Toast';\n\nexport class ToastStatic {\n  public static push = (\n    notification: string,\n    action?: Nullable<Action>,\n    showTime?: number,\n    showCloseIcon?: boolean,\n  ) => {\n    if (!ToastStatic.node && globalObject.document) {\n      ToastStatic.node = globalObject.document.createElement('div');\n      const { body } = globalObject.document;\n      if (!body) {\n        throw Error('There is no \"body\" element in \"document\"');\n      }\n      body.appendChild(ToastStatic.node);\n\n      ReactDOM.render(\n        <Toast data-tid={ToastDataTids.toastStatic} ref={(el) => (ToastStatic.instance = el)} />,\n        ToastStatic.node,\n        () => ToastStatic._push(notification, action, showTime, showCloseIcon),\n      );\n    } else {\n      ToastStatic._push(notification, action, showTime, showCloseIcon);\n    }\n  };\n\n  public static _push = (\n    notification: string,\n    action?: Nullable<Action>,\n    showTime?: number,\n    showCloseIcon?: boolean,\n  ) => {\n    if (ToastStatic.instance) {\n      ToastStatic.instance.push(notification, action, showTime, showCloseIcon);\n    }\n  };\n\n  public static close = () => {\n    if (ToastStatic.instance) {\n      ToastStatic.instance.close();\n    }\n  };\n\n  private static node: HTMLDivElement;\n  private static instance: Nullable<Toast> = null;\n}\n"],"mappings":"iBAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,OAAOC,QAAQ,MAAM,WAAW;AAChC,SAASC,YAAY,QAAQ,0BAA0B;;;;AAIvD,SAASC,KAAK,EAAUC,aAAa,QAAQ,SAAS;;AAEtD,WAAaC,WAAW,YAAAA,YAAA,KA4CvBC,YAAA,GA5CYD,WAAW,CAAXA,WAAW;AACRE,IAAI,GAAG;AACnBC,YAAoB;AACpBC,MAAyB;AACzBC,QAAiB;AACjBC,aAAuB;AACpB;EACH,IAAI,CAACN,YAAW,CAACO,IAAI,IAAIV,YAAY,CAACW,QAAQ,EAAE;IAC9CR,YAAW,CAACO,IAAI,GAAGV,YAAY,CAACW,QAAQ,CAACC,aAAa,CAAC,KAAK,CAAC;IAC7D,IAAQC,IAAI,GAAKb,YAAY,CAACW,QAAQ,CAA9BE,IAAI;IACZ,IAAI,CAACA,IAAI,EAAE;MACT,MAAMC,KAAK,CAAC,0CAA0C,CAAC;IACzD;IACAD,IAAI,CAACE,WAAW,CAACZ,YAAW,CAACO,IAAI,CAAC;;IAElCX,QAAQ,CAACiB,MAAM;MACblB,KAAA,CAAAc,aAAA,CAACX,KAAK,IAAC,YAAUC,aAAa,CAACe,WAAY,EAACC,GAAG,EAAE,SAAAA,IAACC,EAAE,UAAMhB,YAAW,CAACiB,QAAQ,GAAGD,EAAE,EAAE,EAAE,CAAC;MACxFhB,YAAW,CAACO,IAAI;MAChB,oBAAMP,YAAW,CAACkB,KAAK,CAACf,YAAY,EAAEC,MAAM,EAAEC,QAAQ,EAAEC,aAAa,CAAC;IACxE,CAAC;EACH,CAAC,MAAM;IACLN,YAAW,CAACkB,KAAK,CAACf,YAAY,EAAEC,MAAM,EAAEC,QAAQ,EAAEC,aAAa,CAAC;EAClE;AACF,CAAC,CAvBUN,WAAW;;AAyBRkB,KAAK,GAAG;AACpBf,YAAoB;AACpBC,MAAyB;AACzBC,QAAiB;AACjBC,aAAuB;AACpB;EACH,IAAIN,YAAW,CAACiB,QAAQ,EAAE;IACxBjB,YAAW,CAACiB,QAAQ,CAACf,IAAI,CAACC,YAAY,EAAEC,MAAM,EAAEC,QAAQ,EAAEC,aAAa,CAAC;EAC1E;AACF,CAAC,CAlCUN,WAAW;;AAoCRmB,KAAK,GAAG,YAAM;EAC1B,IAAInB,YAAW,CAACiB,QAAQ,EAAE;IACxBjB,YAAW,CAACiB,QAAQ,CAACE,KAAK,CAAC,CAAC;EAC9B;AACF,CAAC,CAxCUnB,WAAW;;;AA2CPiB,QAAQ,GAAoB,IAAI","ignoreList":[]}

package/components/Toast/ToastStatic.d.ts

@@ -1,8 +1,8 @@
 import { Nullable } from '../../typings/utility-types';
 import { Action } from './Toast';
 export declare class ToastStatic {
-    static push: (notification: string, action?: Nullable<Action>, showTime?: number) => void;
-    static _push: (notification: string, action?: Nullable<Action>, showTime?: number) => void;
+    static push: (notification: string, action?: Nullable<Action>, showTime?: number, showCloseIcon?: boolean) => void;
+    static _push: (notification: string, action?: Nullable<Action>, showTime?: number, showCloseIcon?: boolean) => void;
     static close: () => void;
     private static node;
     private static instance;

package/components/Toast/ToastView/ToastView.js

@@ -4,12 +4,11 @@ import React from 'react';
 import { func, shape, string } from 'prop-types';
 import { locale } from "../../../lib/locale/decorators";
 import { ZIndex } from "../../../internal/ZIndex";
+import { ThemeContext } from "../../../lib/theming/ThemeContext";
 import { CommonWrapper } from "../../../internal/CommonWrapper";
 import { rootNode } from "../../../lib/rootNode";
 import { CloseButtonIcon } from "../../../internal/CloseButtonIcon/CloseButtonIcon";
-import { ThemeContext } from "../../../lib/theming/ThemeContext";
-import { EmotionConsumer } from "../../../lib/theming/Emotion";
-import { getStyles } from "../ToastView.styles";
+import { styles } from "../ToastView.styles";
 import { ToastDataTids } from "../Toast";
 import { ToastLocaleHelper } from "../locale";
 export var ToastView = (_dec = locale('Toast', ToastLocaleHelper), rootNode(_class = _dec(_class = (_ToastView = /*#__PURE__*/function (_React$Component) {
@@ -22,10 +21,10 @@ export var ToastView = (_dec = locale('Toast', ToastLocaleHelper), rootNode(_cla
     _this.renderMain = function () {
       var _this$props = _this.props,
         action = _this$props.action,
+        showCloseIcon = _this$props.showCloseIcon,
         onClose = _this$props.onClose,
         onMouseEnter = _this$props.onMouseEnter,
         onMouseLeave = _this$props.onMouseLeave;
-      var styles = _this.styles;
       var link = action ? /*#__PURE__*/
       React.createElement("button", {
         "aria-label": action['aria-label'],
@@ -33,7 +32,7 @@ export var ToastView = (_dec = locale('Toast', ToastLocaleHelper), rootNode(_cla
         className: styles.link(_this.theme),
         onClick: action.handler
       }, action.label) : null;
-      var close = action ? /*#__PURE__*/
+      var close = action || showCloseIcon ? /*#__PURE__*/
       React.createElement("span", {
         className: styles.closeWrapper(_this.theme)
       }, /*#__PURE__*/
@@ -70,13 +69,9 @@ export var ToastView = (_dec = locale('Toast', ToastLocaleHelper), rootNode(_cla
   var _proto = ToastView.prototype;
   _proto.render = function render() {
     var _this2 = this;
-    return /*#__PURE__*/React.createElement(EmotionConsumer, null, function (emotion) {
-      _this2.emotion = emotion;
-      _this2.styles = getStyles(_this2.emotion);
-      return /*#__PURE__*/React.createElement(ThemeContext.Consumer, null, function (theme) {
-        _this2.theme = theme;
-        return _this2.renderMain();
-      });
+    return /*#__PURE__*/React.createElement(ThemeContext.Consumer, null, function (theme) {
+      _this2.theme = theme;
+      return _this2.renderMain();
     });
   };
   return ToastView;

package/components/Toast/ToastView/ToastView.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","func","shape","string","locale","ZIndex","CommonWrapper","rootNode","CloseButtonIcon","ThemeContext","EmotionConsumer","getStyles","ToastDataTids","ToastLocaleHelper","ToastView","_dec","_class","_ToastView","_React$Component","_this","_len","arguments","length","args","Array","_key","call","apply","concat","renderMain","_this$props","props","action","onClose","onMouseEnter","onMouseLeave","styles","link","createElement","className","theme","onClick","handler","label","close","closeWrapper","closeButtonAriaLabel","size","parseInt","toastCloseSize","side","color","toastCloseColor","colorHover","toastCloseHoverColor","tabbable","priority","wrapper","toastView","root","ref","setRootNode","children","_inheritsLoose","_proto","prototype","render","_this2","emotion","Consumer","Component","propTypes","isRequired"],"sources":["ToastView.tsx"],"sourcesContent":["import React, { AriaAttributes } from 'react';\nimport { func, shape, string } from 'prop-types';\nimport type { Emotion } from '@emotion/css/create-instance';\n\nimport { locale } from '../../lib/locale/decorators';\nimport { Nullable } from '../../typings/utility-types';\nimport { ZIndex } from '../../internal/ZIndex';\nimport { Theme } from '../../lib/theming/Theme';\nimport { CommonProps, CommonWrapper } from '../../internal/CommonWrapper';\nimport { rootNode, TSetRootNode } from '../../lib/rootNode';\nimport { CloseButtonIcon } from '../../internal/CloseButtonIcon/CloseButtonIcon';\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\nimport { EmotionConsumer } from '../../lib/theming/Emotion';\n\nimport { getStyles } from './ToastView.styles';\nimport { Action, ToastDataTids } from './Toast';\nimport { ToastLocale, ToastLocaleHelper } from './locale';\n\nexport interface ToastViewProps extends Pick<AriaAttributes, 'aria-label'>, CommonProps {\n  /**\n   * Toast content\n   */\n  children?: string;\n  /**\n   * Adds action handling and close icon for toast\n   */\n  action?: Nullable<Action>;\n  onClose?: () => void;\n  onMouseEnter?: () => void;\n  onMouseLeave?: () => void;\n}\n\n@rootNode\n@locale('Toast', ToastLocaleHelper)\nexport class ToastView extends React.Component<ToastViewProps> {\n  public static propTypes = {\n    /**\n     * Adds action handling and close icon for toast\n     */\n    action: shape({\n      label: string.isRequired,\n      handler: func.isRequired,\n    }),\n    /**\n     * Toast content\n     */\n    children: string.isRequired,\n    onClose: func,\n  };\n\n  private theme!: Theme;\n  private emotion!: Emotion;\n  private styles!: ReturnType<typeof getStyles>;\n  private setRootNode!: TSetRootNode;\n  private readonly locale!: ToastLocale;\n\n  public render() {\n    return (\n      <EmotionConsumer>\n        {(emotion) => {\n          this.emotion = emotion;\n          this.styles = getStyles(this.emotion);\n          return (\n            <ThemeContext.Consumer>\n              {(theme) => {\n                this.theme = theme;\n                return this.renderMain();\n              }}\n            </ThemeContext.Consumer>\n          );\n        }}\n      </EmotionConsumer>\n    );\n  }\n\n  private renderMain = () => {\n    const { action, onClose, onMouseEnter, onMouseLeave } = this.props;\n    const styles = this.styles;\n\n    const link = action ? (\n      <button\n        aria-label={action['aria-label']}\n        data-tid={ToastDataTids.action}\n        className={styles.link(this.theme)}\n        onClick={action.handler}\n      >\n        {action.label}\n      </button>\n    ) : null;\n\n    const close = action ? (\n      <span className={styles.closeWrapper(this.theme)}>\n        <CloseButtonIcon\n          aria-label={this.locale.closeButtonAriaLabel}\n          data-tid={ToastDataTids.close}\n          onClick={onClose}\n          size={parseInt(this.theme.toastCloseSize)}\n          side={40}\n          color={this.theme.toastCloseColor}\n          colorHover={this.theme.toastCloseHoverColor}\n          tabbable={false}\n        />\n      </span>\n    ) : null;\n\n    return (\n      <CommonWrapper {...this.props}>\n        <ZIndex priority=\"Toast\" className={styles.wrapper(this.theme)}>\n          <div\n            data-tid={ToastDataTids.toastView}\n            className={styles.root(this.theme)}\n            ref={this.setRootNode}\n            onMouseEnter={onMouseEnter}\n            onMouseLeave={onMouseLeave}\n          >\n            <span>{this.props.children}</span>\n            {link}\n            {close}\n          </div>\n        </ZIndex>\n      </CommonWrapper>\n    );\n  };\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["React","func","shape","string","locale","ZIndex","ThemeContext","CommonWrapper","rootNode","CloseButtonIcon","styles","ToastDataTids","ToastLocaleHelper","ToastView","_dec","_class","_ToastView","_React$Component","_this","_len","arguments","length","args","Array","_key","call","apply","concat","renderMain","_this$props","props","action","showCloseIcon","onClose","onMouseEnter","onMouseLeave","link","createElement","className","theme","onClick","handler","label","close","closeWrapper","closeButtonAriaLabel","size","parseInt","toastCloseSize","side","color","toastCloseColor","colorHover","toastCloseHoverColor","tabbable","priority","wrapper","toastView","root","ref","setRootNode","children","_inheritsLoose","_proto","prototype","render","_this2","Consumer","Component","propTypes","isRequired"],"sources":["ToastView.tsx"],"sourcesContent":["import React, { AriaAttributes } from 'react';\nimport { func, shape, string } from 'prop-types';\n\nimport { locale } from '../../lib/locale/decorators';\nimport { Nullable } from '../../typings/utility-types';\nimport { ZIndex } from '../../internal/ZIndex';\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\nimport { Theme } from '../../lib/theming/Theme';\nimport { CommonProps, CommonWrapper } from '../../internal/CommonWrapper';\nimport { rootNode, TSetRootNode } from '../../lib/rootNode';\nimport { CloseButtonIcon } from '../../internal/CloseButtonIcon/CloseButtonIcon';\n\nimport { styles } from './ToastView.styles';\nimport { Action, ToastDataTids } from './Toast';\nimport { ToastLocale, ToastLocaleHelper } from './locale';\n\nexport interface ToastViewProps extends Pick<AriaAttributes, 'aria-label'>, CommonProps {\n  /** Задает контент тоста. */\n  children?: string;\n  /** Добавляет возможность действия и кнопку закрытия у тоста. */\n  action?: Nullable<Action>;\n  showCloseIcon?: boolean;\n  onClose?: () => void;\n  onMouseEnter?: () => void;\n  onMouseLeave?: () => void;\n}\n\n@rootNode\n@locale('Toast', ToastLocaleHelper)\nexport class ToastView extends React.Component<ToastViewProps> {\n  public static propTypes = {\n    /**\n     * Adds action handling and close icon for toast\n     */\n    action: shape({\n      label: string.isRequired,\n      handler: func.isRequired,\n    }),\n    /**\n     * Toast content\n     */\n    children: string.isRequired,\n    onClose: func,\n  };\n\n  private theme!: Theme;\n  private setRootNode!: TSetRootNode;\n  private readonly locale!: ToastLocale;\n\n  public render() {\n    return (\n      <ThemeContext.Consumer>\n        {(theme) => {\n          this.theme = theme;\n          return this.renderMain();\n        }}\n      </ThemeContext.Consumer>\n    );\n  }\n\n  private renderMain = () => {\n    const { action, showCloseIcon, onClose, onMouseEnter, onMouseLeave } = this.props;\n\n    const link = action ? (\n      <button\n        aria-label={action['aria-label']}\n        data-tid={ToastDataTids.action}\n        className={styles.link(this.theme)}\n        onClick={action.handler}\n      >\n        {action.label}\n      </button>\n    ) : null;\n\n    const close =\n      action || showCloseIcon ? (\n        <span className={styles.closeWrapper(this.theme)}>\n          <CloseButtonIcon\n            aria-label={this.locale.closeButtonAriaLabel}\n            data-tid={ToastDataTids.close}\n            onClick={onClose}\n            size={parseInt(this.theme.toastCloseSize)}\n            side={40}\n            color={this.theme.toastCloseColor}\n            colorHover={this.theme.toastCloseHoverColor}\n            tabbable={false}\n          />\n        </span>\n      ) : null;\n\n    return (\n      <CommonWrapper {...this.props}>\n        <ZIndex priority=\"Toast\" className={styles.wrapper(this.theme)}>\n          <div\n            data-tid={ToastDataTids.toastView}\n            className={styles.root(this.theme)}\n            ref={this.setRootNode}\n            onMouseEnter={onMouseEnter}\n            onMouseLeave={onMouseLeave}\n          >\n            <span>{this.props.children}</span>\n            {link}\n            {close}\n          </div>\n        </ZIndex>\n      </CommonWrapper>\n    );\n  };\n}\n"],"mappings":"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","ignoreList":[]}

package/components/Toast/ToastView.d.ts

@@ -3,14 +3,11 @@ import { Nullable } from '../../typings/utility-types';
 import { CommonProps } from '../../internal/CommonWrapper';
 import { Action } from './Toast';
 export interface ToastViewProps extends Pick<AriaAttributes, 'aria-label'>, CommonProps {
-    /**
-     * Toast content
-     */
+    /** Задает контент тоста. */
     children?: string;
-    /**
-     * Adds action handling and close icon for toast
-     */
+    /** Добавляет возможность действия и кнопку закрытия у тоста. */
     action?: Nullable<Action>;
+    showCloseIcon?: boolean;
     onClose?: () => void;
     onMouseEnter?: () => void;
     onMouseLeave?: () => void;
@@ -31,8 +28,6 @@ export declare class ToastView extends React.Component<ToastViewProps> {
         onClose: import("prop-types").Requireable<(...args: any[]) => any>;
     };
     private theme;
-    private emotion;
-    private styles;
     private setRootNode;
     private readonly locale;
     render(): React.JSX.Element;

package/components/Toast/ToastView.styles/ToastView.styles.js

@@ -1,34 +1,32 @@
 import _taggedTemplateLiteralLoose from "@babel/runtime/helpers/esm/taggedTemplateLiteralLoose";
 var _templateObject, _templateObject2, _templateObject3, _templateObject4;
-import { memoizeStyle } from "../../../lib/theming/Emotion";
+import { css, memoizeStyle } from "../../../lib/theming/Emotion";
 var getVerticalPaddings = function getVerticalPaddings(theme) {
   var toastPaddingY = theme.toastPaddingY;
   var paddingY = parseInt(toastPaddingY);
   return [paddingY + "px", paddingY + "px"];
 };
-export var getStyles = function getStyles(emotion) {
-  return memoizeStyle({
-    root: function root(t) {
-      var _getVerticalPaddings = getVerticalPaddings(t),
-        paddingTop = _getVerticalPaddings[0],
-        paddingBottom = _getVerticalPaddings[1];
-      return emotion.css(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n        background: ", ";\n        border-radius: ", ";\n        border: ", ";\n        color: ", ";\n        display: inline-flex;\n        font-size: ", ";\n        line-height: ", ";\n        opacity: 1;\n        padding: ", " ", " ", ";\n        position: relative;\n        top: ", ";\n      "])), t.toastBg, t.toastBorderRadius, t.toastBorder, t.toastColor, t.toastFontSize, t.toastLineHeight, paddingTop, t.toastPaddingX, paddingBottom, t.toastTop);
-    },
-    wrapper: function wrapper(t) {
-      return emotion.css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n        position: fixed;\n        top: 0;\n        left: 0;\n        right: 0;\n        height: 0;\n        text-align: center;\n        border-radius: ", ";\n      "])), t.toastBorderRadius);
-    },
-    closeWrapper: function closeWrapper(t) {
-      var _getVerticalPaddings2 = getVerticalPaddings(t),
-        paddingTop = _getVerticalPaddings2[0],
-        paddingBottom = _getVerticalPaddings2[1];
-      return emotion.css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\n        display: flex;\n        margin: -", " -", " -", " -", ";\n      "])), paddingTop, t.toastPaddingX, paddingBottom, t.toastClosePadding);
-    },
-    link: function link(t) {
-      var _getVerticalPaddings3 = getVerticalPaddings(t),
-        paddingTop = _getVerticalPaddings3[0],
-        paddingBottom = _getVerticalPaddings3[1];
-      var padding = paddingTop + " " + t.toastLinkPadding;
-      return emotion.css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteralLoose(["\n        border: none;\n        font: inherit;\n        color: ", ";\n        cursor: pointer;\n        display: inline-block;\n        font-weight: 600;\n        background-color: transparent;\n\n        margin: -", " ", " -", " ", ";\n\n        padding: ", ";\n        transition: background ", " ", ";\n        &:hover {\n          background: ", ";\n          text-decoration: ", ";\n        }\n\n        &:active {\n          background: ", ";\n        }\n      "])), t.toastLinkColor, paddingTop, t.toastPaddingX, paddingBottom, t.toastPaddingX, padding, t.transitionDuration, t.transitionTimingFunction, t.toastLinkBgHover, t.toastLinkTextDecorationHover, t.toastLinkBgActive);
-    }
-  });
-};
+export var styles = memoizeStyle({
+  root: function root(t) {
+    var _getVerticalPaddings = getVerticalPaddings(t),
+      paddingTop = _getVerticalPaddings[0],
+      paddingBottom = _getVerticalPaddings[1];
+    return css(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n      background: ", ";\n      border-radius: ", ";\n      border: ", ";\n      color: ", ";\n      display: inline-flex;\n      font-size: ", ";\n      line-height: ", ";\n      opacity: 1;\n      padding: ", " ", " ", ";\n      position: relative;\n      top: ", ";\n    "])), t.toastBg, t.toastBorderRadius, t.toastBorder, t.toastColor, t.toastFontSize, t.toastLineHeight, paddingTop, t.toastPaddingX, paddingBottom, t.toastTop);
+  },
+  wrapper: function wrapper(t) {
+    return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n      position: fixed;\n      top: 0;\n      left: 0;\n      right: 0;\n      height: 0;\n      text-align: center;\n      border-radius: ", ";\n    "])), t.toastBorderRadius);
+  },
+  closeWrapper: function closeWrapper(t) {
+    var _getVerticalPaddings2 = getVerticalPaddings(t),
+      paddingTop = _getVerticalPaddings2[0],
+      paddingBottom = _getVerticalPaddings2[1];
+    return css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\n      display: flex;\n      margin: -", " -", " -", " 0;\n    "])), paddingTop, t.toastPaddingX, paddingBottom);
+  },
+  link: function link(t) {
+    var _getVerticalPaddings3 = getVerticalPaddings(t),
+      paddingTop = _getVerticalPaddings3[0],
+      paddingBottom = _getVerticalPaddings3[1];
+    var padding = paddingTop + " " + t.toastLinkPadding;
+    return css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteralLoose(["\n      border: none;\n      font: inherit;\n      color: ", ";\n      cursor: pointer;\n      display: inline-block;\n      font-weight: 600;\n      background-color: transparent;\n\n      margin: -", " 0 -", " ", ";\n\n      padding: ", ";\n      transition: background ", " ", ";\n      &:hover {\n        background: ", ";\n        text-decoration: ", ";\n      }\n\n      &:active {\n        background: ", ";\n      }\n    "])), t.toastLinkColor, paddingTop, paddingBottom, t.toastPaddingX, padding, t.transitionDuration, t.transitionTimingFunction, t.toastLinkBgHover, t.toastLinkTextDecorationHover, t.toastLinkBgActive);
+  }
+});

package/components/Toast/ToastView.styles/ToastView.styles.js.map

@@ -1 +1 @@
-{"version":3,"names":["memoizeStyle","getVerticalPaddings","theme","toastPaddingY","paddingY","parseInt","getStyles","emotion","root","t","_getVerticalPaddings","paddingTop","paddingBottom","css","_templateObject","_taggedTemplateLiteralLoose","toastBg","toastBorderRadius","toastBorder","toastColor","toastFontSize","toastLineHeight","toastPaddingX","toastTop","wrapper","_templateObject2","closeWrapper","_getVerticalPaddings2","_templateObject3","toastClosePadding","link","_getVerticalPaddings3","padding","toastLinkPadding","_templateObject4","toastLinkColor","transitionDuration","transitionTimingFunction","toastLinkBgHover","toastLinkTextDecorationHover","toastLinkBgActive"],"sources":["ToastView.styles.ts"],"sourcesContent":["import type { Emotion } from '@emotion/css/create-instance';\n\nimport { memoizeStyle } from '../../lib/theming/Emotion';\nimport { Theme } from '../../lib/theming/Theme';\n\nconst getVerticalPaddings = (theme: Theme) => {\n  const { toastPaddingY } = theme;\n  const paddingY = parseInt(toastPaddingY);\n\n  return [`${paddingY}px`, `${paddingY}px`];\n};\n\nexport const getStyles = (emotion: Emotion) =>\n  memoizeStyle({\n    root(t: Theme) {\n      const [paddingTop, paddingBottom] = getVerticalPaddings(t);\n      return emotion.css`\n        background: ${t.toastBg};\n        border-radius: ${t.toastBorderRadius};\n        border: ${t.toastBorder};\n        color: ${t.toastColor};\n        display: inline-flex;\n        font-size: ${t.toastFontSize};\n        line-height: ${t.toastLineHeight};\n        opacity: 1;\n        padding: ${paddingTop} ${t.toastPaddingX} ${paddingBottom};\n        position: relative;\n        top: ${t.toastTop};\n      `;\n    },\n\n    wrapper(t: Theme) {\n      return emotion.css`\n        position: fixed;\n        top: 0;\n        left: 0;\n        right: 0;\n        height: 0;\n        text-align: center;\n        border-radius: ${t.toastBorderRadius};\n      `;\n    },\n\n    closeWrapper(t: Theme) {\n      const [paddingTop, paddingBottom] = getVerticalPaddings(t);\n      return emotion.css`\n        display: flex;\n        margin: -${paddingTop} -${t.toastPaddingX} -${paddingBottom} -${t.toastClosePadding};\n      `;\n    },\n\n    link(t: Theme) {\n      const [paddingTop, paddingBottom] = getVerticalPaddings(t);\n      const padding = `${paddingTop} ${t.toastLinkPadding}`;\n\n      return emotion.css`\n        border: none;\n        font: inherit;\n        color: ${t.toastLinkColor};\n        cursor: pointer;\n        display: inline-block;\n        font-weight: 600;\n        background-color: transparent;\n\n        margin: -${paddingTop} ${t.toastPaddingX} -${paddingBottom} ${t.toastPaddingX};\n\n        padding: ${padding};\n        transition: background ${t.transitionDuration} ${t.transitionTimingFunction};\n        &:hover {\n          background: ${t.toastLinkBgHover};\n          text-decoration: ${t.toastLinkTextDecorationHover};\n        }\n\n        &:active {\n          background: ${t.toastLinkBgActive};\n        }\n      `;\n    },\n  });\n"],"mappings":";;AAEA,SAASA,YAAY,QAAQ,2BAA2B;;;AAGxD,IAAMC,mBAAmB,GAAG,SAAtBA,mBAAmBA,CAAIC,KAAY,EAAK;EAC5C,IAAQC,aAAa,GAAKD,KAAK,CAAvBC,aAAa;EACrB,IAAMC,QAAQ,GAAGC,QAAQ,CAACF,aAAa,CAAC;;EAExC,OAAO,CAAIC,QAAQ,SAASA,QAAQ,QAAK;AAC3C,CAAC;;AAED,OAAO,IAAME,SAAS,GAAG,SAAZA,SAASA,CAAIC,OAAgB;IACxCP,YAAY,CAAC;MACXQ,IAAI,WAAAA,KAACC,CAAQ,EAAE;QACb,IAAAC,oBAAA,GAAoCT,mBAAmB,CAACQ,CAAC,CAAC,CAAnDE,UAAU,GAAAD,oBAAA,IAAEE,aAAa,GAAAF,oBAAA;QAChC,OAAOH,OAAO,CAACM,GAAG,CAAAC,eAAA,KAAAA,eAAA,GAAAC,2BAAA;QACFN,CAAC,CAACO,OAAO;QACNP,CAAC,CAACQ,iBAAiB;QAC1BR,CAAC,CAACS,WAAW;QACdT,CAAC,CAACU,UAAU;;QAERV,CAAC,CAACW,aAAa;QACbX,CAAC,CAACY,eAAe;;QAErBV,UAAU,EAAIF,CAAC,CAACa,aAAa,EAAIV,aAAa;;QAElDH,CAAC,CAACc,QAAQ;;MAErB,CAAC;;MAEDC,OAAO,WAAAA,QAACf,CAAQ,EAAE;QAChB,OAAOF,OAAO,CAACM,GAAG,CAAAY,gBAAA,KAAAA,gBAAA,GAAAV,2BAAA;;;;;;;QAOCN,CAAC,CAACQ,iBAAiB;;MAExC,CAAC;;MAEDS,YAAY,WAAAA,aAACjB,CAAQ,EAAE;QACrB,IAAAkB,qBAAA,GAAoC1B,mBAAmB,CAACQ,CAAC,CAAC,CAAnDE,UAAU,GAAAgB,qBAAA,IAAEf,aAAa,GAAAe,qBAAA;QAChC,OAAOpB,OAAO,CAACM,GAAG,CAAAe,gBAAA,KAAAA,gBAAA,GAAAb,2BAAA;;QAELJ,UAAU,EAAKF,CAAC,CAACa,aAAa,EAAKV,aAAa,EAAKH,CAAC,CAACoB,iBAAiB;;MAEvF,CAAC;;MAEDC,IAAI,WAAAA,KAACrB,CAAQ,EAAE;QACb,IAAAsB,qBAAA,GAAoC9B,mBAAmB,CAACQ,CAAC,CAAC,CAAnDE,UAAU,GAAAoB,qBAAA,IAAEnB,aAAa,GAAAmB,qBAAA;QAChC,IAAMC,OAAO,GAAMrB,UAAU,SAAIF,CAAC,CAACwB,gBAAkB;;QAErD,OAAO1B,OAAO,CAACM,GAAG,CAAAqB,gBAAA,KAAAA,gBAAA,GAAAnB,2BAAA;;;QAGPN,CAAC,CAAC0B,cAAc;;;;;;QAMdxB,UAAU,EAAIF,CAAC,CAACa,aAAa,EAAKV,aAAa,EAAIH,CAAC,CAACa,aAAa;;QAElEU,OAAO;QACOvB,CAAC,CAAC2B,kBAAkB,EAAI3B,CAAC,CAAC4B,wBAAwB;;QAE3D5B,CAAC,CAAC6B,gBAAgB;QACb7B,CAAC,CAAC8B,4BAA4B;;;;QAInC9B,CAAC,CAAC+B,iBAAiB;;;MAGvC;IACF,CAAC,CAAC","ignoreList":[]}
+{"version":3,"names":["css","memoizeStyle","getVerticalPaddings","theme","toastPaddingY","paddingY","parseInt","styles","root","t","_getVerticalPaddings","paddingTop","paddingBottom","_templateObject","_taggedTemplateLiteralLoose","toastBg","toastBorderRadius","toastBorder","toastColor","toastFontSize","toastLineHeight","toastPaddingX","toastTop","wrapper","_templateObject2","closeWrapper","_getVerticalPaddings2","_templateObject3","link","_getVerticalPaddings3","padding","toastLinkPadding","_templateObject4","toastLinkColor","transitionDuration","transitionTimingFunction","toastLinkBgHover","toastLinkTextDecorationHover","toastLinkBgActive"],"sources":["ToastView.styles.ts"],"sourcesContent":["import { css, memoizeStyle } from '../../lib/theming/Emotion';\nimport { Theme } from '../../lib/theming/Theme';\n\nconst getVerticalPaddings = (theme: Theme) => {\n  const { toastPaddingY } = theme;\n  const paddingY = parseInt(toastPaddingY);\n\n  return [`${paddingY}px`, `${paddingY}px`];\n};\n\nexport const styles = memoizeStyle({\n  root(t: Theme) {\n    const [paddingTop, paddingBottom] = getVerticalPaddings(t);\n    return css`\n      background: ${t.toastBg};\n      border-radius: ${t.toastBorderRadius};\n      border: ${t.toastBorder};\n      color: ${t.toastColor};\n      display: inline-flex;\n      font-size: ${t.toastFontSize};\n      line-height: ${t.toastLineHeight};\n      opacity: 1;\n      padding: ${paddingTop} ${t.toastPaddingX} ${paddingBottom};\n      position: relative;\n      top: ${t.toastTop};\n    `;\n  },\n\n  wrapper(t: Theme) {\n    return css`\n      position: fixed;\n      top: 0;\n      left: 0;\n      right: 0;\n      height: 0;\n      text-align: center;\n      border-radius: ${t.toastBorderRadius};\n    `;\n  },\n\n  closeWrapper(t: Theme) {\n    const [paddingTop, paddingBottom] = getVerticalPaddings(t);\n    return css`\n      display: flex;\n      margin: -${paddingTop} -${t.toastPaddingX} -${paddingBottom} 0;\n    `;\n  },\n\n  link(t: Theme) {\n    const [paddingTop, paddingBottom] = getVerticalPaddings(t);\n    const padding = `${paddingTop} ${t.toastLinkPadding}`;\n\n    return css`\n      border: none;\n      font: inherit;\n      color: ${t.toastLinkColor};\n      cursor: pointer;\n      display: inline-block;\n      font-weight: 600;\n      background-color: transparent;\n\n      margin: -${paddingTop} 0 -${paddingBottom} ${t.toastPaddingX};\n\n      padding: ${padding};\n      transition: background ${t.transitionDuration} ${t.transitionTimingFunction};\n      &:hover {\n        background: ${t.toastLinkBgHover};\n        text-decoration: ${t.toastLinkTextDecorationHover};\n      }\n\n      &:active {\n        background: ${t.toastLinkBgActive};\n      }\n    `;\n  },\n});\n"],"mappings":"0KAAA,SAASA,GAAG,EAAEC,YAAY,QAAQ,2BAA2B;;;AAG7D,IAAMC,mBAAmB,GAAG,SAAtBA,mBAAmBA,CAAIC,KAAY,EAAK;EAC5C,IAAQC,aAAa,GAAKD,KAAK,CAAvBC,aAAa;EACrB,IAAMC,QAAQ,GAAGC,QAAQ,CAACF,aAAa,CAAC;;EAExC,OAAO,CAAIC,QAAQ,SAASA,QAAQ,QAAK;AAC3C,CAAC;;AAED,OAAO,IAAME,MAAM,GAAGN,YAAY,CAAC;EACjCO,IAAI,WAAAA,KAACC,CAAQ,EAAE;IACb,IAAAC,oBAAA,GAAoCR,mBAAmB,CAACO,CAAC,CAAC,CAAnDE,UAAU,GAAAD,oBAAA,IAAEE,aAAa,GAAAF,oBAAA;IAChC,OAAOV,GAAG,CAAAa,eAAA,KAAAA,eAAA,GAAAC,2BAAA;IACML,CAAC,CAACM,OAAO;IACNN,CAAC,CAACO,iBAAiB;IAC1BP,CAAC,CAACQ,WAAW;IACdR,CAAC,CAACS,UAAU;;IAERT,CAAC,CAACU,aAAa;IACbV,CAAC,CAACW,eAAe;;IAErBT,UAAU,EAAIF,CAAC,CAACY,aAAa,EAAIT,aAAa;;IAElDH,CAAC,CAACa,QAAQ;;EAErB,CAAC;;EAEDC,OAAO,WAAAA,QAACd,CAAQ,EAAE;IAChB,OAAOT,GAAG,CAAAwB,gBAAA,KAAAA,gBAAA,GAAAV,2BAAA;;;;;;;IAOSL,CAAC,CAACO,iBAAiB;;EAExC,CAAC;;EAEDS,YAAY,WAAAA,aAAChB,CAAQ,EAAE;IACrB,IAAAiB,qBAAA,GAAoCxB,mBAAmB,CAACO,CAAC,CAAC,CAAnDE,UAAU,GAAAe,qBAAA,IAAEd,aAAa,GAAAc,qBAAA;IAChC,OAAO1B,GAAG,CAAA2B,gBAAA,KAAAA,gBAAA,GAAAb,2BAAA;;IAEGH,UAAU,EAAKF,CAAC,CAACY,aAAa,EAAKT,aAAa;;EAE/D,CAAC;;EAEDgB,IAAI,WAAAA,KAACnB,CAAQ,EAAE;IACb,IAAAoB,qBAAA,GAAoC3B,mBAAmB,CAACO,CAAC,CAAC,CAAnDE,UAAU,GAAAkB,qBAAA,IAAEjB,aAAa,GAAAiB,qBAAA;IAChC,IAAMC,OAAO,GAAMnB,UAAU,SAAIF,CAAC,CAACsB,gBAAkB;;IAErD,OAAO/B,GAAG,CAAAgC,gBAAA,KAAAA,gBAAA,GAAAlB,2BAAA;;;IAGCL,CAAC,CAACwB,cAAc;;;;;;IAMdtB,UAAU,EAAOC,aAAa,EAAIH,CAAC,CAACY,aAAa;;IAEjDS,OAAO;IACOrB,CAAC,CAACyB,kBAAkB,EAAIzB,CAAC,CAAC0B,wBAAwB;;IAE3D1B,CAAC,CAAC2B,gBAAgB;IACb3B,CAAC,CAAC4B,4BAA4B;;;;IAInC5B,CAAC,CAAC6B,iBAAiB;;;EAGvC;AACF,CAAC,CAAC","ignoreList":[]}

package/components/Toast/ToastView.styles.d.ts

@@ -1,6 +1,5 @@
-import type { Emotion } from '@emotion/css/create-instance';
 import { Theme } from '../../lib/theming/Theme';
-export declare const getStyles: (emotion: Emotion) => {
+export declare const styles: {
     root(t: Theme): string;
     wrapper(t: Theme): string;
     closeWrapper(t: Theme): string;

package/components/Toast/__creevey__/Toast.creevey.mts

@@ -0,0 +1,77 @@
+import { story, kind, test } from 'creevey';
+
+import { delay } from '../../../lib/delay';
+
+const kindTests = () => {
+  test('toastShown', async (context) => {
+    const showToast = context.webdriver.findElement({ css: '[data-tid~="show-toast"]' });
+    await context.webdriver.actions({ bridge: true }).click(showToast).move({ x: 0, y: 0 }).click().perform();
+    await delay(1000);
+    await context.matchImage(await context.takeScreenshot());
+  });
+};
+
+kind('Toast', () => {
+  story('SimpleNotification', () => {
+    kindTests();
+  });
+
+  story('TestNotifier', () => {
+    kindTests();
+  });
+
+  story('ComplexNotification', () => {
+    kindTests();
+  });
+
+  story('complex', () => {
+    kindTests();
+  });
+
+  story('StaticMethod', () => {
+    kindTests();
+  });
+
+  story('button', () => {
+    kindTests();
+  });
+
+  story('data-tid', () => {
+    kindTests();
+  });
+
+  story('onClick', () => {
+    kindTests();
+  });
+
+  story('Toast', () => {
+    kindTests();
+  });
+
+  story('push', () => {
+    kindTests();
+  });
+
+  story('ToastWithCross', () => {
+    test('idle', async (context) => {
+      const showStaticToastButton = context.webdriver.findElement({ css: '[data-tid="show-static-toast"]' });
+      const showInstanceToastButton = context.webdriver.findElement({ css: '[data-tid="show-instance-toast"]' });
+
+      await context.webdriver.actions({ bridge: true }).click(showStaticToastButton).perform();
+      await delay(1000);
+      const staticToast = await context.takeScreenshot();
+
+      const closeFirstToast = context.webdriver.findElement({ css: '[data-tid="ToastView__close"]' });
+      await context.webdriver
+        .actions({ bridge: true })
+        .click(closeFirstToast)
+        .pause(100)
+        .click(showInstanceToastButton)
+        .perform();
+      await delay(1000);
+      const instanceToast = await context.takeScreenshot();
+
+      await context.matchImages({ staticToast, instanceToast });
+    });
+  });
+});

package/components/Toast/__docs__/Toast.mdx

@@ -0,0 +1,28 @@
+import * as ToastStories from './Toast.docs.stories.tsx';
+import { Primary, ArgTypes, Stories, Description } from '@storybook/blocks';
+import { Meta } from '../../../.storybook/Meta';
+
+<Meta of={ToastStories} />
+
+# Toast
+
+[Компонент в Контур.Гайдах](https://guides.kontur.ru/components/popup-elements/toast/)
+
+[Компонент в Figma](https://www.figma.com/file/87ScqxPzJpF9DcVBNYWOjM/%E2%9A%A1-Kontur-UI-Modern-Layout?node-id=230%3A5203)
+
+<Description />
+
+## Базовый пример
+
+<Primary />
+
+## Пропы
+
+<details>
+  <summary>Открыть таблицу с пропами</summary>
+  <ArgTypes />
+</details>
+
+## Примеры использования
+
+<Stories title="" includePrimary={false} />