@skbkontur/react-ui 0.0.0-bcbd5e6112 → 0.0.0-c13bb5f4ca

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/types/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/types/create-instance';
-export declare const getStyles: (emotion: Emotion) => {
+export declare const styles: {
     enter(): string;
     enterActive(): string;
     exit(): string;

package/components/Toast/ToastStatic/ToastStatic.js

@@ -1,12 +1,11 @@
 var _ToastStatic;
 import React from 'react';
 import ReactDOM from 'react-dom';
-import { getOwnerGlobalObject } from "../../../lib/globalObject";
+import { globalObject } from '@skbkontur/global-object';
 import { Toast, ToastDataTids } from "../Toast";
 export var ToastStatic = function ToastStatic() {};
 _ToastStatic = ToastStatic;
 ToastStatic.push = function (notification, action, showTime, showCloseIcon) {
-  var globalObject = getOwnerGlobalObject();
   if (!_ToastStatic.node && globalObject.document) {
     _ToastStatic.node = globalObject.document.createElement('div');
     var body = globalObject.document.body;

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

@@ -1 +1 @@
-{"version":3,"names":["React","ReactDOM","getOwnerGlobalObject","Toast","ToastDataTids","ToastStatic","_ToastStatic","push","notification","action","showTime","showCloseIcon","globalObject","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';\n\nimport { getOwnerGlobalObject } from '../../lib/globalObject';\nimport type { Nullable } from '../../typings/utility-types';\n\nimport type { Action } from './Toast';\nimport { Toast, ToastDataTids } from './Toast';\n\nexport class ToastStatic {\n  public static push = (\n    notification: React.ReactNode,\n    action?: Nullable<Action>,\n    showTime?: number,\n    showCloseIcon?: boolean,\n  ) => {\n    const globalObject = getOwnerGlobalObject();\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: React.ReactNode,\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;;AAEhC,SAASC,oBAAoB,QAAQ,wBAAwB;;;;AAI7D,SAASC,KAAK,EAAEC,aAAa,QAAQ,SAAS;;AAE9C,WAAaC,WAAW,YAAAA,YAAA,KA6CvBC,YAAA,GA7CYD,WAAW,CAAXA,WAAW;AACRE,IAAI,GAAG;AACnBC,YAA6B;AAC7BC,MAAyB;AACzBC,QAAiB;AACjBC,aAAuB;AACpB;EACH,IAAMC,YAAY,GAAGV,oBAAoB,CAAC,CAAC;EAC3C,IAAI,CAACG,YAAW,CAACQ,IAAI,IAAID,YAAY,CAACE,QAAQ,EAAE;IAC9CT,YAAW,CAACQ,IAAI,GAAGD,YAAY,CAACE,QAAQ,CAACC,aAAa,CAAC,KAAK,CAAC;IAC7D,IAAQC,IAAI,GAAKJ,YAAY,CAACE,QAAQ,CAA9BE,IAAI;IACZ,IAAI,CAACA,IAAI,EAAE;MACT,MAAMC,KAAK,CAAC,0CAA0C,CAAC;IACzD;IACAD,IAAI,CAACE,WAAW,CAACb,YAAW,CAACQ,IAAI,CAAC;;IAElCZ,QAAQ,CAACkB,MAAM;MACbnB,KAAA,CAAAe,aAAA,CAACZ,KAAK,IAAC,YAAUC,aAAa,CAACgB,WAAY,EAACC,GAAG,EAAE,SAAAA,IAACC,EAAE,UAAMjB,YAAW,CAACkB,QAAQ,GAAGD,EAAE,EAAE,EAAE,CAAC;MACxFjB,YAAW,CAACQ,IAAI;MAChB,oBAAMR,YAAW,CAACmB,KAAK,CAAChB,YAAY,EAAEC,MAAM,EAAEC,QAAQ,EAAEC,aAAa,CAAC;IACxE,CAAC;EACH,CAAC,MAAM;IACLN,YAAW,CAACmB,KAAK,CAAChB,YAAY,EAAEC,MAAM,EAAEC,QAAQ,EAAEC,aAAa,CAAC;EAClE;AACF,CAAC,CAxBUN,WAAW;;AA0BRmB,KAAK,GAAG;AACpBhB,YAA6B;AAC7BC,MAAyB;AACzBC,QAAiB;AACjBC,aAAuB;AACpB;EACH,IAAIN,YAAW,CAACkB,QAAQ,EAAE;IACxBlB,YAAW,CAACkB,QAAQ,CAAChB,IAAI,CAACC,YAAY,EAAEC,MAAM,EAAEC,QAAQ,EAAEC,aAAa,CAAC;EAC1E;AACF,CAAC,CAnCUN,WAAW;;AAqCRoB,KAAK,GAAG,YAAM;EAC1B,IAAIpB,YAAW,CAACkB,QAAQ,EAAE;IACxBlB,YAAW,CAACkB,QAAQ,CAACE,KAAK,CAAC,CAAC;EAC9B;AACF,CAAC,CAzCUpB,WAAW;;;AA4CPkB,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 type { Nullable } from '../../typings/utility-types';\n\nimport type { Action } from './Toast';\nimport { Toast, ToastDataTids } from './Toast';\n\nexport class ToastStatic {\n  public static push = (\n    notification: React.ReactNode,\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: React.ReactNode,\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;;;;;AAKvD,SAASC,KAAK,EAAEC,aAAa,QAAQ,SAAS;;AAE9C,WAAaC,WAAW,YAAAA,YAAA,KA4CvBC,YAAA,GA5CYD,WAAW,CAAXA,WAAW;AACRE,IAAI,GAAG;AACnBC,YAA6B;AAC7BC,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,YAA6B;AAC7BC,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/ToastView/ToastView.js

@@ -1,14 +1,13 @@
 import _inheritsLoose from "@babel/runtime/helpers/esm/inheritsLoose";
 var _dec, _class;
 import React from 'react';
-import { RenderEnvironmentContext } from "../../../lib/theming/RenderEnvironmentContext";
 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 { 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 = /*#__PURE__*/function (_React$Component) {
@@ -29,12 +28,12 @@ export var ToastView = (_dec = locale('Toast', ToastLocaleHelper), rootNode(_cla
       React.createElement("button", {
         "aria-label": action['aria-label'],
         "data-tid": ToastDataTids.action,
-        className: _this.styles.link(_this.theme),
+        className: styles.link(_this.theme),
         onClick: action.handler
       }, action.label) : null;
       var close = action || showCloseIcon ? /*#__PURE__*/
       React.createElement("span", {
-        className: _this.styles.closeWrapper(_this.theme)
+        className: styles.closeWrapper(_this.theme)
       }, /*#__PURE__*/
       React.createElement(CloseButtonIcon, {
         "aria-label": _this.locale.closeButtonAriaLabel,
@@ -50,11 +49,11 @@ export var ToastView = (_dec = locale('Toast', ToastLocaleHelper), rootNode(_cla
         React.createElement(CommonWrapper, _this.props, /*#__PURE__*/
         React.createElement(ZIndex, {
           priority: "Toast",
-          className: _this.styles.wrapper(_this.theme)
+          className: styles.wrapper(_this.theme)
         }, /*#__PURE__*/
         React.createElement("div", {
           "data-tid": ToastDataTids.toastView,
-          className: _this.styles.root(_this.theme),
+          className: styles.root(_this.theme),
           ref: _this.setRootNode,
           onMouseEnter: onMouseEnter,
           onMouseLeave: onMouseLeave
@@ -69,13 +68,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(RenderEnvironmentContext.Consumer, null, function (_ref) {
-      var emotion = _ref.emotion;
-      _this2.styles = getStyles(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","RenderEnvironmentContext","locale","ZIndex","ThemeContext","CommonWrapper","rootNode","CloseButtonIcon","getStyles","ToastDataTids","ToastLocaleHelper","ToastView","_dec","_class","_React$Component","_this","_len","arguments","length","args","Array","_key","call","apply","concat","renderMain","_this$props","props","action","showCloseIcon","onClose","onMouseEnter","onMouseLeave","link","createElement","className","styles","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","_ref","emotion","Component"],"sources":["ToastView.tsx"],"sourcesContent":["import type { AriaAttributes } from 'react';\nimport React from 'react';\n\nimport { RenderEnvironmentContext } from '../../lib/theming/RenderEnvironmentContext';\nimport { locale } from '../../lib/locale/decorators';\nimport type { Nullable } from '../../typings/utility-types';\nimport { ZIndex } from '../../internal/ZIndex';\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\nimport type { Theme } from '../../lib/theming/Theme';\nimport type { CommonProps } from '../../internal/CommonWrapper';\nimport { CommonWrapper } from '../../internal/CommonWrapper';\nimport type { TGetRootNode, TSetRootNode } from '../../lib/rootNode';\nimport { rootNode } from '../../lib/rootNode';\nimport { CloseButtonIcon } from '../../internal/CloseButtonIcon/CloseButtonIcon';\n\nimport { getStyles } from './ToastView.styles';\nimport type { Action } from './Toast';\nimport { ToastDataTids } from './Toast';\nimport type { ToastLocale } from './locale';\nimport { ToastLocaleHelper } from './locale';\n\nexport interface ToastViewProps extends Pick<AriaAttributes, 'aria-label'>, CommonProps {\n  /** Задает контент тоста. */\n  children?: React.ReactNode;\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  private styles!: ReturnType<typeof getStyles>;\n  private theme!: Theme;\n  public getRootNode!: TGetRootNode;\n  private setRootNode!: TSetRootNode;\n  private readonly locale!: ToastLocale;\n\n  public render() {\n    return (\n      <RenderEnvironmentContext.Consumer>\n        {({ emotion }) => {\n          this.styles = getStyles(emotion);\n\n          return (\n            <ThemeContext.Consumer>\n              {(theme) => {\n                this.theme = theme;\n                return this.renderMain();\n              }}\n            </ThemeContext.Consumer>\n          );\n        }}\n      </RenderEnvironmentContext.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={this.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={this.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={this.styles.wrapper(this.theme)}>\n          <div\n            data-tid={ToastDataTids.toastView}\n            className={this.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","locale","ZIndex","ThemeContext","CommonWrapper","rootNode","CloseButtonIcon","styles","ToastDataTids","ToastLocaleHelper","ToastView","_dec","_class","_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"],"sources":["ToastView.tsx"],"sourcesContent":["import type { AriaAttributes } from 'react';\nimport React from 'react';\n\nimport { locale } from '../../lib/locale/decorators';\nimport type { Nullable } from '../../typings/utility-types';\nimport { ZIndex } from '../../internal/ZIndex';\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\nimport type { Theme } from '../../lib/theming/Theme';\nimport type { CommonProps } from '../../internal/CommonWrapper';\nimport { CommonWrapper } from '../../internal/CommonWrapper';\nimport type { TGetRootNode, TSetRootNode } from '../../lib/rootNode';\nimport { rootNode } from '../../lib/rootNode';\nimport { CloseButtonIcon } from '../../internal/CloseButtonIcon/CloseButtonIcon';\n\nimport { styles } from './ToastView.styles';\nimport type { Action } from './Toast';\nimport { ToastDataTids } from './Toast';\nimport type { ToastLocale } from './locale';\nimport { ToastLocaleHelper } from './locale';\n\nexport interface ToastViewProps extends Pick<AriaAttributes, 'aria-label'>, CommonProps {\n  /** Задает контент тоста. */\n  children?: React.ReactNode;\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  private theme!: Theme;\n  public getRootNode!: TGetRootNode;\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

@@ -15,7 +15,6 @@ export interface ToastViewProps extends Pick<AriaAttributes, 'aria-label'>, Comm
     onMouseLeave?: () => void;
 }
 export declare class ToastView extends React.Component<ToastViewProps> {
-    private styles;
     private theme;
     getRootNode: TGetRootNode;
     private setRootNode;

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: -", " -", " -", " 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 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: -", " 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);
-    }
-  });
-};
+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","link","_getVerticalPaddings3","padding","toastLinkPadding","_templateObject4","toastLinkColor","transitionDuration","transitionTimingFunction","toastLinkBgHover","toastLinkTextDecorationHover","toastLinkBgActive"],"sources":["ToastView.styles.ts"],"sourcesContent":["import type { Emotion } from '@emotion/css/types/create-instance';\n\nimport { memoizeStyle } from '../../lib/theming/Emotion';\nimport type { 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} 0;\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} 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":";;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;;MAE/D,CAAC;;MAEDiB,IAAI,WAAAA,KAACpB,CAAQ,EAAE;QACb,IAAAqB,qBAAA,GAAoC7B,mBAAmB,CAACQ,CAAC,CAAC,CAAnDE,UAAU,GAAAmB,qBAAA,IAAElB,aAAa,GAAAkB,qBAAA;QAChC,IAAMC,OAAO,GAAMpB,UAAU,SAAIF,CAAC,CAACuB,gBAAkB;;QAErD,OAAOzB,OAAO,CAACM,GAAG,CAAAoB,gBAAA,KAAAA,gBAAA,GAAAlB,2BAAA;;;QAGPN,CAAC,CAACyB,cAAc;;;;;;QAMdvB,UAAU,EAAOC,aAAa,EAAIH,CAAC,CAACa,aAAa;;QAEjDS,OAAO;QACOtB,CAAC,CAAC0B,kBAAkB,EAAI1B,CAAC,CAAC2B,wBAAwB;;QAE3D3B,CAAC,CAAC4B,gBAAgB;QACb5B,CAAC,CAAC6B,4BAA4B;;;;QAInC7B,CAAC,CAAC8B,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 type { 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/types/create-instance';
 import type { 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/Toggle/Toggle/Toggle.js

@@ -2,15 +2,15 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import _inheritsLoose from "@babel/runtime/helpers/esm/inheritsLoose";
 var _class, _Toggle;
 import React from 'react';
-import { RenderEnvironmentContext } from "../../../lib/theming/RenderEnvironmentContext";
-import { KeyListener } from "../../../lib/events/keyListener";
+import { keyListener } from "../../../lib/events/keyListener";
 import { ThemeContext } from "../../../lib/theming/ThemeContext";
 import { CommonWrapper } from "../../../internal/CommonWrapper";
+import { cx } from "../../../lib/theming/Emotion";
 import { rootNode } from "../../../lib/rootNode";
 import { createPropsGetter } from "../../../lib/createPropsGetter";
 import { isTestEnv } from "../../../lib/currentEnvironment";
 import { FocusControlWrapper } from "../../../internal/FocusControlWrapper";
-import { getStyles, globalClasses } from "../Toggle.styles";
+import { styles, globalClasses } from "../Toggle.styles";
 export var ToggleDataTids = {
   root: 'Toggle__root'
 };
@@ -33,7 +33,7 @@ export var Toggle = rootNode(_class = (_Toggle = /*#__PURE__*/function (_React$C
      */
     _this.focus = function () {
       if (_this.input) {
-        _this.keyListener.isTabPressed = true;
+        keyListener.isTabPressed = true;
         _this.input.focus();
       }
     };
@@ -57,7 +57,7 @@ export var Toggle = rootNode(_class = (_Toggle = /*#__PURE__*/function (_React$C
       if (_this.props.onFocus) {
         _this.props.onFocus(event);
       }
-      if (_this.keyListener.isTabPressed) {
+      if (keyListener.isTabPressed) {
         _this.setState({
           focusByTab: true
         });
@@ -81,94 +81,86 @@ export var Toggle = rootNode(_class = (_Toggle = /*#__PURE__*/function (_React$C
   _inheritsLoose(Toggle, _React$Component);
   var _proto = Toggle.prototype;
   _proto.componentDidMount = function componentDidMount() {
-    this.keyListener = new KeyListener(this.globalObject);
     if (this.props.autoFocus) {
-      this.keyListener.isTabPressed = true;
+      keyListener.isTabPressed = true;
       this.focus();
     }
   };
   _proto.render = function render() {
     var _this2 = this;
-    return /*#__PURE__*/React.createElement(RenderEnvironmentContext.Consumer, null, function (_ref) {
-      var globalObject = _ref.globalObject,
-        emotion = _ref.emotion;
-      _this2.globalObject = globalObject;
-      _this2.cx = emotion.cx;
-      _this2.styles = getStyles(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();
     });
   };
   _proto.getContainerSizeClassName = function getContainerSizeClassName() {
     switch (this.getProps().size) {
       case 'large':
-        return this.styles.containerLarge(this.theme);
+        return styles.containerLarge(this.theme);
       case 'medium':
-        return this.styles.containerMedium(this.theme);
+        return styles.containerMedium(this.theme);
       case 'small':
       default:
-        return this.styles.containerSmall(this.theme);
+        return styles.containerSmall(this.theme);
     }
   };
   _proto.getHandleSizeClassName = function getHandleSizeClassName() {
     switch (this.getProps().size) {
       case 'large':
-        return this.styles.handleLarge(this.theme);
+        return styles.handleLarge(this.theme);
       case 'medium':
-        return this.styles.handleMedium(this.theme);
+        return styles.handleMedium(this.theme);
       case 'small':
       default:
-        return this.styles.handleSmall(this.theme);
+        return styles.handleSmall(this.theme);
     }
   };
   _proto.getButtonSizeClassName = function getButtonSizeClassName() {
     switch (this.getProps().size) {
       case 'large':
-        return this.styles.buttonLarge(this.theme);
+        return styles.buttonLarge(this.theme);
       case 'medium':
-        return this.styles.buttonMedium(this.theme);
+        return styles.buttonMedium(this.theme);
       case 'small':
       default:
-        return this.styles.buttonSmall(this.theme);
+        return styles.buttonSmall(this.theme);
     }
   };
   _proto.getRootSizeClassName = function getRootSizeClassName() {
     switch (this.getProps().size) {
       case 'large':
-        return this.styles.rootLarge(this.theme);
+        return styles.rootLarge(this.theme);
       case 'medium':
-        return this.styles.rootMedium(this.theme);
+        return styles.rootMedium(this.theme);
       case 'small':
       default:
-        return this.styles.rootSmall(this.theme);
+        return styles.rootSmall(this.theme);
     }
   };
   _proto.getInputSizeClassName = function getInputSizeClassName() {
     switch (this.getProps().size) {
       case 'large':
-        return this.styles.inputLarge(this.theme);
+        return styles.inputLarge(this.theme);
       case 'medium':
-        return this.styles.inputMedium(this.theme);
+        return styles.inputMedium(this.theme);
       case 'small':
       default:
-        return this.styles.inputSmall(this.theme);
+        return styles.inputSmall(this.theme);
     }
   };
   _proto.getCaptionSizeClassName = function getCaptionSizeClassName() {
     switch (this.getProps().size) {
       case 'large':
-        return this.styles.captionLarge(this.theme);
+        return styles.captionLarge(this.theme);
       case 'medium':
-        return this.styles.captionMedium(this.theme);
+        return styles.captionMedium(this.theme);
       case 'small':
       default:
-        return this.styles.captionSmall(this.theme);
+        return styles.captionSmall(this.theme);
     }
   };
   _proto.renderMain = function renderMain() {
-    var _this$cx, _this$cx2, _this$cx4, _this$cx5;
+    var _cx, _cx2, _cx4, _cx5;
     var _this$props = this.props,
       children = _this$props.children,
       warning = _this$props.warning,
@@ -183,12 +175,12 @@ export var Toggle = rootNode(_class = (_Toggle = /*#__PURE__*/function (_React$C
       disableAnimations = _this$getProps.disableAnimations;
     var disabled = this.getProps().disabled || loading;
     var checked = this.isUncontrolled() ? this.state.checked : this.props.checked;
-    var containerClassNames = this.cx(this.getContainerSizeClassName(), (_this$cx = {}, _this$cx[this.styles.container(this.theme)] = true, _this$cx[this.styles.containerDisabled(this.theme)] = !!disabled, _this$cx[globalClasses.container] = true, _this$cx[globalClasses.containerDisabled] = !!disabled, _this$cx[globalClasses.containerLoading] = loading, _this$cx));
-    var labelClassNames = this.cx(this.getRootSizeClassName(), (_this$cx2 = {}, _this$cx2[this.styles.root(this.theme)] = true, _this$cx2[this.styles.rootLeft()] = captionPosition === 'left', _this$cx2[this.styles.disabled()] = !!disabled, _this$cx2[globalClasses.disabled] = !!disabled, _this$cx2[this.styles.disableAnimation()] = disableAnimations, _this$cx2));
+    var containerClassNames = cx(this.getContainerSizeClassName(), (_cx = {}, _cx[styles.container(this.theme)] = true, _cx[styles.containerDisabled(this.theme)] = !!disabled, _cx[globalClasses.container] = true, _cx[globalClasses.containerDisabled] = !!disabled, _cx[globalClasses.containerLoading] = loading, _cx));
+    var labelClassNames = cx(this.getRootSizeClassName(), (_cx2 = {}, _cx2[styles.root(this.theme)] = true, _cx2[styles.rootLeft()] = captionPosition === 'left', _cx2[styles.disabled()] = !!disabled, _cx2[globalClasses.disabled] = !!disabled, _cx2[styles.disableAnimation()] = disableAnimations, _cx2));
     var caption = null;
     if (children) {
-      var _this$cx3;
-      var captionClass = this.cx(this.getCaptionSizeClassName(), (_this$cx3 = {}, _this$cx3[this.styles.caption(this.theme)] = true, _this$cx3[this.styles.captionLeft(this.theme)] = captionPosition === 'left', _this$cx3[this.styles.disabledCaption(this.theme)] = !!disabled, _this$cx3));
+      var _cx3;
+      var captionClass = cx(this.getCaptionSizeClassName(), (_cx3 = {}, _cx3[styles.caption(this.theme)] = true, _cx3[styles.captionLeft(this.theme)] = captionPosition === 'left', _cx3[styles.disabledCaption(this.theme)] = !!disabled, _cx3));
       caption = /*#__PURE__*/React.createElement("span", {
         className: captionClass
       }, children);
@@ -199,14 +191,14 @@ export var Toggle = rootNode(_class = (_Toggle = /*#__PURE__*/function (_React$C
       "data-tid": ToggleDataTids.root,
       className: labelClassNames
     }, /*#__PURE__*/React.createElement("div", {
-      className: this.cx(this.getButtonSizeClassName(), (_this$cx4 = {}, _this$cx4[this.styles.button(this.theme)] = true, _this$cx4[this.styles.buttonRight()] = captionPosition === 'left', _this$cx4[this.styles.isWarning(this.theme)] = !!warning, _this$cx4[this.styles.isError(this.theme)] = !!error, _this$cx4[this.styles.focused(this.theme)] = !disabled && !!this.state.focusByTab, _this$cx4))
+      className: cx(this.getButtonSizeClassName(), (_cx4 = {}, _cx4[styles.button(this.theme)] = true, _cx4[styles.buttonRight()] = captionPosition === 'left', _cx4[styles.isWarning(this.theme)] = !!warning, _cx4[styles.isError(this.theme)] = !!error, _cx4[styles.focused(this.theme)] = !disabled && !!this.state.focusByTab, _cx4))
     }, /*#__PURE__*/React.createElement(FocusControlWrapper, {
       onBlurWhenDisabled: this.resetFocus
     }, /*#__PURE__*/React.createElement("input", {
       type: "checkbox",
       checked: checked,
       onChange: this.handleChange,
-      className: this.cx(this.getInputSizeClassName(), this.styles.input(this.theme)),
+      className: cx(this.getInputSizeClassName(), styles.input(this.theme)),
       onFocus: this.handleFocus,
       onBlur: this.handleBlur,
       ref: this.inputRef,
@@ -219,7 +211,7 @@ export var Toggle = rootNode(_class = (_Toggle = /*#__PURE__*/function (_React$C
     })), /*#__PURE__*/React.createElement("div", {
       className: containerClassNames
     }), /*#__PURE__*/React.createElement("div", {
-      className: this.cx(this.getHandleSizeClassName(), globalClasses.handle, (_this$cx5 = {}, _this$cx5[this.styles.handle(this.theme)] = true, _this$cx5[this.styles.handleDisabled(this.theme)] = disabled, _this$cx5))
+      className: cx(this.getHandleSizeClassName(), globalClasses.handle, (_cx5 = {}, _cx5[styles.handle(this.theme)] = true, _cx5[styles.handleDisabled(this.theme)] = disabled, _cx5))
     })), caption));
   };
   _proto.isUncontrolled = function isUncontrolled() {