@skbkontur/react-ui 5.6.1-9a162.0 → 6.0.0-alpha.0

package/internal/ResizeDetector/ResizeDetector/ResizeDetector.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","cx","styles","ResizeDetector","_React$Component","_this","_len","arguments","length","args","Array","_key","call","apply","concat","iframeWindow","handleResize","event","props","onResize","iframeRef","iframe","contentWindow","_inheritsLoose","_proto","prototype","componentDidMount","addEventListener","render","_cx","createElement","className","root","title","ref","tabIndex","content","fullHeight","flex","alignBaseline","children","Component","__KONTUR_REACT_UI__","displayName"],"sources":["ResizeDetector.tsx"],"sourcesContent":["import React from 'react';\n\nimport { cx } from '../../lib/theming/Emotion';\n\nimport { styles } from './ResizeDetector.styles';\n\nexport interface ResizeDetectorProps {\n  onResize?: (event: UIEvent) => void;\n  fullHeight?: boolean;\n  alignBaseline?: boolean;\n}\n\nexport class ResizeDetector extends React.Component<React.PropsWithChildren<ResizeDetectorProps>> {\n  public static __KONTUR_REACT_UI__ = 'ResizeDetector';\n  public static displayName = 'ResizeDetector';\n\n  private iframeWindow: Window | null = null;\n\n  public componentDidMount() {\n    if (this.iframeWindow) {\n      this.iframeWindow.addEventListener('resize', this.handleResize);\n    }\n  }\n\n  public render() {\n    return (\n      <div className={styles.root()}>\n        <iframe title=\"resizeDetector\" ref={this.iframeRef} className={styles.iframe()} tabIndex={-1} />\n        <div\n          className={cx({\n            [styles.content()]: true,\n            [styles.fullHeight()]: this.props.fullHeight,\n            [styles.flex()]: this.props.alignBaseline,\n          })}\n        >\n          {this.props.children}\n        </div>\n      </div>\n    );\n  }\n\n  private handleResize = (event: UIEvent) => {\n    if (this.props.onResize) {\n      this.props.onResize(event);\n    }\n  };\n\n  private iframeRef = (iframe: HTMLIFrameElement) => {\n    if (iframe && iframe.contentWindow) {\n      this.iframeWindow = iframe.contentWindow;\n    }\n  };\n}\n"],"mappings":"sEAAA,OAAOA,KAAK,MAAM,OAAO;;AAEzB,SAASC,EAAE,QAAQ,2BAA2B;;AAE9C,SAASC,MAAM,QAAQ,yBAAyB;;;;;;;;AAQhD,WAAaC,cAAc,0BAAAC,gBAAA,YAAAD,eAAA,OAAAE,KAAA,UAAAC,IAAA,GAAAC,SAAA,CAAAC,MAAA,EAAAC,IAAA,OAAAC,KAAA,CAAAJ,IAAA,GAAAK,IAAA,MAAAA,IAAA,GAAAL,IAAA,EAAAK,IAAA,KAAAF,IAAA,CAAAE,IAAA,IAAAJ,SAAA,CAAAI,IAAA,GAAAN,KAAA,GAAAD,gBAAA,CAAAQ,IAAA,CAAAC,KAAA,CAAAT,gBAAA,SAAAU,MAAA,CAAAL,IAAA,WAAAJ,KAAA;;;;IAIjBU,YAAY,GAAkB,IAAI,CAAAV,KAAA;;;;;;;;;;;;;;;;;;;;;;;;;IAyBlCW,YAAY,GAAG,UAACC,KAAc,EAAK;MACzC,IAAIZ,KAAA,CAAKa,KAAK,CAACC,QAAQ,EAAE;QACvBd,KAAA,CAAKa,KAAK,CAACC,QAAQ,CAACF,KAAK,CAAC;MAC5B;IACF,CAAC,CAAAZ,KAAA;;IAEOe,SAAS,GAAG,UAACC,MAAyB,EAAK;MACjD,IAAIA,MAAM,IAAIA,MAAM,CAACC,aAAa,EAAE;QAClCjB,KAAA,CAAKU,YAAY,GAAGM,MAAM,CAACC,aAAa;MAC1C;IACF,CAAC,QAAAjB,KAAA,EAAAkB,cAAA,CAAApB,cAAA,EAAAC,gBAAA,MAAAoB,MAAA,GAAArB,cAAA,CAAAsB,SAAA,CAAAD,MAAA,CAjCME,iBAAiB,GAAxB,SAAAA,kBAAA,EAA2B,CACzB,IAAI,IAAI,CAACX,YAAY,EAAE,CACrB,IAAI,CAACA,YAAY,CAACY,gBAAgB,CAAC,QAAQ,EAAE,IAAI,CAACX,YAAY,CAAC,CACjE,CACF,CAAC,CAAAQ,MAAA,CAEMI,MAAM,GAAb,SAAAA,OAAA,EAAgB,KAAAC,GAAA,CACd,oBACE7B,KAAA,CAAA8B,aAAA,UAAKC,SAAS,EAAE7B,MAAM,CAAC8B,IAAI,CAAC,CAAE,iBAC5BhC,KAAA,CAAA8B,aAAA,aAAQG,KAAK,EAAC,gBAAgB,EAACC,GAAG,EAAE,IAAI,CAACd,SAAU,EAACW,SAAS,EAAE7B,MAAM,CAACmB,MAAM,CAAC,CAAE,EAACc,QAAQ,EAAE,CAAC,CAAE,EAAE,CAAC,eAChGnC,KAAA,CAAA8B,aAAA,UACEC,SAAS,EAAE9B,EAAE,EAAA4B,GAAA,OAAAA,GAAA,CACV3B,MAAM,CAACkC,OAAO,CAAC,CAAC,IAAG,IAAI,EAAAP,GAAA,CACvB3B,MAAM,CAACmC,UAAU,CAAC,CAAC,IAAG,IAAI,CAACnB,KAAK,CAACmB,UAAU,EAAAR,GAAA,CAC3C3B,MAAM,CAACoC,IAAI,CAAC,CAAC,IAAG,IAAI,CAACpB,KAAK,CAACqB,aAAa,EAAAV,GAAA,CAC1C,CAAE,IAEF,IAAI,CAACX,KAAK,CAACsB,QACT,CACF,CAAC,CAEV,CAAC,QAAArC,cAAA,GA3BiCH,KAAK,CAACyC,SAAS,EAAtCtC,cAAc,CACXuC,mBAAmB,GAAG,gBAAgB,CADzCvC,cAAc,CAEXwC,WAAW,GAAG,gBAAgB","ignoreList":[]}
+{"version":3,"names":["React","withRenderEnvironment","getStyles","ResizeDetector","_class","_ResizeDetector","_React$Component","_this","_len","arguments","length","args","Array","_key","call","apply","concat","iframeWindow","handleResize","event","props","onResize","iframeRef","iframe","contentWindow","_inheritsLoose","_proto","prototype","componentDidMount","addEventListener","render","_this$cx","styles","emotion","createElement","className","root","title","ref","tabIndex","cx","content","fullHeight","flex","alignBaseline","children","Component","__KONTUR_REACT_UI__","displayName"],"sources":["ResizeDetector.tsx"],"sourcesContent":["import React from 'react';\nimport type { Emotion } from '@emotion/css/create-instance';\n\nimport { withRenderEnvironment } from '../../lib/renderEnvironment';\n\nimport { getStyles } from './ResizeDetector.styles';\n\nexport interface ResizeDetectorProps {\n  onResize?: (event: UIEvent) => void;\n  fullHeight?: boolean;\n  alignBaseline?: boolean;\n}\n\n@withRenderEnvironment\nexport class ResizeDetector extends React.Component<React.PropsWithChildren<ResizeDetectorProps>> {\n  public static __KONTUR_REACT_UI__ = 'ResizeDetector';\n  public static displayName = 'ResizeDetector';\n\n  private iframeWindow: Window | null = null;\n  private styles!: ReturnType<typeof getStyles>;\n  private emotion!: Emotion;\n  private cx!: Emotion['cx'];\n\n  public componentDidMount() {\n    if (this.iframeWindow) {\n      this.iframeWindow.addEventListener('resize', this.handleResize);\n    }\n  }\n\n  public render() {\n    this.styles = getStyles(this.emotion);\n\n    return (\n      <div className={this.styles.root()}>\n        <iframe title=\"resizeDetector\" ref={this.iframeRef} className={this.styles.iframe()} tabIndex={-1} />\n        <div\n          className={this.cx({\n            [this.styles.content()]: true,\n            [this.styles.fullHeight()]: this.props.fullHeight,\n            [this.styles.flex()]: this.props.alignBaseline,\n          })}\n        >\n          {this.props.children}\n        </div>\n      </div>\n    );\n  }\n\n  private handleResize = (event: UIEvent) => {\n    if (this.props.onResize) {\n      this.props.onResize(event);\n    }\n  };\n\n  private iframeRef = (iframe: HTMLIFrameElement) => {\n    if (iframe && iframe.contentWindow) {\n      this.iframeWindow = iframe.contentWindow;\n    }\n  };\n}\n"],"mappings":"kGAAA,OAAOA,KAAK,MAAM,OAAO;;;AAGzB,SAASC,qBAAqB,QAAQ,6BAA6B;;AAEnE,SAASC,SAAS,QAAQ,yBAAyB;;;;;;;;AAQnD;AACaC,cAAc,GAD1BF,qBAAqB,CAAAG,MAAA,IAAAC,eAAA,0BAAAC,gBAAA,YAAAH,eAAA,OAAAI,KAAA,UAAAC,IAAA,GAAAC,SAAA,CAAAC,MAAA,EAAAC,IAAA,OAAAC,KAAA,CAAAJ,IAAA,GAAAK,IAAA,MAAAA,IAAA,GAAAL,IAAA,EAAAK,IAAA,KAAAF,IAAA,CAAAE,IAAA,IAAAJ,SAAA,CAAAI,IAAA,GAAAN,KAAA,GAAAD,gBAAA,CAAAQ,IAAA,CAAAC,KAAA,CAAAT,gBAAA,SAAAU,MAAA,CAAAL,IAAA,WAAAJ,KAAA;;;;IAKZU,YAAY,GAAkB,IAAI,CAAAV,KAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IA8BlCW,YAAY,GAAG,UAACC,KAAc,EAAK;MACzC,IAAIZ,KAAA,CAAKa,KAAK,CAACC,QAAQ,EAAE;QACvBd,KAAA,CAAKa,KAAK,CAACC,QAAQ,CAACF,KAAK,CAAC;MAC5B;IACF,CAAC,CAAAZ,KAAA;;IAEOe,SAAS,GAAG,UAACC,MAAyB,EAAK;MACjD,IAAIA,MAAM,IAAIA,MAAM,CAACC,aAAa,EAAE;QAClCjB,KAAA,CAAKU,YAAY,GAAGM,MAAM,CAACC,aAAa;MAC1C;IACF,CAAC,QAAAjB,KAAA,EAAAkB,cAAA,CAAAtB,cAAA,EAAAG,gBAAA,MAAAoB,MAAA,GAAAvB,cAAA,CAAAwB,SAAA,CAAAD,MAAA,CAnCME,iBAAiB,GAAxB,SAAAA,kBAAA,EAA2B,CACzB,IAAI,IAAI,CAACX,YAAY,EAAE,CACrB,IAAI,CAACA,YAAY,CAACY,gBAAgB,CAAC,QAAQ,EAAE,IAAI,CAACX,YAAY,CAAC,CACjE,CACF,CAAC,CAAAQ,MAAA,CAEMI,MAAM,GAAb,SAAAA,OAAA,EAAgB,KAAAC,QAAA,CACd,IAAI,CAACC,MAAM,GAAG9B,SAAS,CAAC,IAAI,CAAC+B,OAAO,CAAC,CAErC,oBACEjC,KAAA,CAAAkC,aAAA,UAAKC,SAAS,EAAE,IAAI,CAACH,MAAM,CAACI,IAAI,CAAC,CAAE,iBACjCpC,KAAA,CAAAkC,aAAA,aAAQG,KAAK,EAAC,gBAAgB,EAACC,GAAG,EAAE,IAAI,CAAChB,SAAU,EAACa,SAAS,EAAE,IAAI,CAACH,MAAM,CAACT,MAAM,CAAC,CAAE,EAACgB,QAAQ,EAAE,CAAC,CAAE,EAAE,CAAC,eACrGvC,KAAA,CAAAkC,aAAA,UACEC,SAAS,EAAE,IAAI,CAACK,EAAE,EAAAT,QAAA,OAAAA,QAAA,CACf,IAAI,CAACC,MAAM,CAACS,OAAO,CAAC,CAAC,IAAG,IAAI,EAAAV,QAAA,CAC5B,IAAI,CAACC,MAAM,CAACU,UAAU,CAAC,CAAC,IAAG,IAAI,CAACtB,KAAK,CAACsB,UAAU,EAAAX,QAAA,CAChD,IAAI,CAACC,MAAM,CAACW,IAAI,CAAC,CAAC,IAAG,IAAI,CAACvB,KAAK,CAACwB,aAAa,EAAAb,QAAA,CAC/C,CAAE,IAEF,IAAI,CAACX,KAAK,CAACyB,QACT,CACF,CAAC,CAEV,CAAC,QAAA1C,cAAA,GAhCiCH,KAAK,CAAC8C,SAAS,GAAAzC,eAAA,CACnC0C,mBAAmB,GAAG,gBAAgB,EAAA1C,eAAA,CACtC2C,WAAW,GAAG,gBAAgB,EAAA3C,eAAA,MAAAD,MAAA","ignoreList":[]}

package/internal/ResizeDetector/ResizeDetector.d.ts

@@ -8,6 +8,9 @@ export declare class ResizeDetector extends React.Component<React.PropsWithChild
     static __KONTUR_REACT_UI__: string;
     static displayName: string;
     private iframeWindow;
+    private styles;
+    private emotion;
+    private cx;
     componentDidMount(): void;
     render(): React.JSX.Element;
     private handleResize;

package/internal/ResizeDetector/ResizeDetector.styles/ResizeDetector.styles.js

@@ -1,20 +1,23 @@
 import _taggedTemplateLiteralLoose from "@babel/runtime/helpers/esm/taggedTemplateLiteralLoose";
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
-import { css, memoizeStyle } from "../../../lib/theming/Emotion";
-export var styles = memoizeStyle({
-  root: function root() {
-    return css(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n      position: relative;\n      height: 100%;\n    "])));
-  },
-  iframe: function iframe() {
-    return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n      position: absolute;\n      top: 0;\n      left: 0;\n      width: 100%;\n      height: 100%;\n      padding: 0;\n      margin: 0;\n      border: 0;\n      background: transparent;\n      opacity: 0;\n    "])));
-  },
-  content: function content() {
-    return css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\n      position: relative;\n    "])));
-  },
-  fullHeight: function fullHeight() {
-    return css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteralLoose(["\n      height: 100%;\n    "])));
-  },
-  flex: function flex() {
-    return css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteralLoose(["\n      display: flex;\n    "])));
-  }
+import { memoizeGetStyles } from "../../../lib/theming/Emotion";
+export var getStyles = memoizeGetStyles(function (_ref) {
+  var css = _ref.css;
+  return {
+    root: function root() {
+      return css(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n      position: relative;\n      height: 100%;\n    "])));
+    },
+    iframe: function iframe() {
+      return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n      position: absolute;\n      top: 0;\n      left: 0;\n      width: 100%;\n      height: 100%;\n      padding: 0;\n      margin: 0;\n      border: 0;\n      background: transparent;\n      opacity: 0;\n    "])));
+    },
+    content: function content() {
+      return css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\n      position: relative;\n    "])));
+    },
+    fullHeight: function fullHeight() {
+      return css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteralLoose(["\n      height: 100%;\n    "])));
+    },
+    flex: function flex() {
+      return css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteralLoose(["\n      display: flex;\n    "])));
+    }
+  };
 });

package/internal/ResizeDetector/ResizeDetector.styles/ResizeDetector.styles.js.map

@@ -1 +1 @@
-{"version":3,"names":["css","memoizeStyle","styles","root","_templateObject","_taggedTemplateLiteralLoose","iframe","_templateObject2","content","_templateObject3","fullHeight","_templateObject4","flex","_templateObject5"],"sources":["ResizeDetector.styles.ts"],"sourcesContent":["import { css, memoizeStyle } from '../../lib/theming/Emotion';\n\nexport const styles = memoizeStyle({\n  root() {\n    return css`\n      position: relative;\n      height: 100%;\n    `;\n  },\n\n  iframe() {\n    return css`\n      position: absolute;\n      top: 0;\n      left: 0;\n      width: 100%;\n      height: 100%;\n      padding: 0;\n      margin: 0;\n      border: 0;\n      background: transparent;\n      opacity: 0;\n    `;\n  },\n\n  content() {\n    return css`\n      position: relative;\n    `;\n  },\n\n  fullHeight() {\n    return css`\n      height: 100%;\n    `;\n  },\n\n  flex() {\n    return css`\n      display: flex;\n    `;\n  },\n});\n"],"mappings":"4LAAA,SAASA,GAAG,EAAEC,YAAY,QAAQ,2BAA2B;;AAE7D,OAAO,IAAMC,MAAM,GAAGD,YAAY,CAAC;EACjCE,IAAI,WAAAA,KAAA,EAAG;IACL,OAAOH,GAAG,CAAAI,eAAA,KAAAA,eAAA,GAAAC,2BAAA;;;;EAIZ,CAAC;;EAEDC,MAAM,WAAAA,OAAA,EAAG;IACP,OAAON,GAAG,CAAAO,gBAAA,KAAAA,gBAAA,GAAAF,2BAAA;;;;;;;;;;;;EAYZ,CAAC;;EAEDG,OAAO,WAAAA,QAAA,EAAG;IACR,OAAOR,GAAG,CAAAS,gBAAA,KAAAA,gBAAA,GAAAJ,2BAAA;;;EAGZ,CAAC;;EAEDK,UAAU,WAAAA,WAAA,EAAG;IACX,OAAOV,GAAG,CAAAW,gBAAA,KAAAA,gBAAA,GAAAN,2BAAA;;;EAGZ,CAAC;;EAEDO,IAAI,WAAAA,KAAA,EAAG;IACL,OAAOZ,GAAG,CAAAa,gBAAA,KAAAA,gBAAA,GAAAR,2BAAA;;;EAGZ;AACF,CAAC,CAAC","ignoreList":[]}
+{"version":3,"names":["memoizeGetStyles","getStyles","_ref","css","root","_templateObject","_taggedTemplateLiteralLoose","iframe","_templateObject2","content","_templateObject3","fullHeight","_templateObject4","flex","_templateObject5"],"sources":["ResizeDetector.styles.ts"],"sourcesContent":["import type { Emotion } from '@emotion/css/create-instance';\n\nimport { memoizeGetStyles } from '../../lib/theming/Emotion';\n\nexport const getStyles = memoizeGetStyles(({ css }: Emotion) => ({\n  root() {\n    return css`\n      position: relative;\n      height: 100%;\n    `;\n  },\n\n  iframe() {\n    return css`\n      position: absolute;\n      top: 0;\n      left: 0;\n      width: 100%;\n      height: 100%;\n      padding: 0;\n      margin: 0;\n      border: 0;\n      background: transparent;\n      opacity: 0;\n    `;\n  },\n\n  content() {\n    return css`\n      position: relative;\n    `;\n  },\n\n  fullHeight() {\n    return css`\n      height: 100%;\n    `;\n  },\n\n  flex() {\n    return css`\n      display: flex;\n    `;\n  },\n}));\n"],"mappings":";;AAEA,SAASA,gBAAgB,QAAQ,2BAA2B;;AAE5D,OAAO,IAAMC,SAAS,GAAGD,gBAAgB,CAAC,UAAAE,IAAA,OAAGC,GAAG,GAAAD,IAAA,CAAHC,GAAG,QAAiB;IAC/DC,IAAI,WAAAA,KAAA,EAAG;MACL,OAAOD,GAAG,CAAAE,eAAA,KAAAA,eAAA,GAAAC,2BAAA;;;;IAIZ,CAAC;;IAEDC,MAAM,WAAAA,OAAA,EAAG;MACP,OAAOJ,GAAG,CAAAK,gBAAA,KAAAA,gBAAA,GAAAF,2BAAA;;;;;;;;;;;;IAYZ,CAAC;;IAEDG,OAAO,WAAAA,QAAA,EAAG;MACR,OAAON,GAAG,CAAAO,gBAAA,KAAAA,gBAAA,GAAAJ,2BAAA;;;IAGZ,CAAC;;IAEDK,UAAU,WAAAA,WAAA,EAAG;MACX,OAAOR,GAAG,CAAAS,gBAAA,KAAAA,gBAAA,GAAAN,2BAAA;;;IAGZ,CAAC;;IAEDO,IAAI,WAAAA,KAAA,EAAG;MACL,OAAOV,GAAG,CAAAW,gBAAA,KAAAA,gBAAA,GAAAR,2BAAA;;;IAGZ;EACF,CAAC,EAAC,CAAC","ignoreList":[]}

package/internal/ResizeDetector/ResizeDetector.styles.d.ts

@@ -1,7 +1,7 @@
-export declare const styles: {
+export declare const getStyles: import("../../lib/theming/Emotion").StylesGetter<{
     root(): string;
     iframe(): string;
     content(): string;
     fullHeight(): string;
     flex(): string;
-};
+}>;

package/internal/SpinnerIcon/SpinnerIcon/SpinnerIcon.js

@@ -1,10 +1,6 @@
 import React from 'react';
-import { isIE11 } from "../../../lib/client";
-import { SpinnerFallbackAnimationRunner, createOffsetAnimation, createLengthAnimation, createColorAnimation, createRotationAnimation } from "../../../components/Spinner/SpinnerFallbackAnimation";
-import { isTestEnv } from "../../../lib/currentEnvironment";
-import { ThemeContext } from "../../../lib/theming/ThemeContext";
-import { cx } from "../../../lib/theming/Emotion";
-import { styles } from "../SpinnerIcon.styles";
+import { useEmotion, useStyles } from "../../../lib/renderEnvironment";
+import { getStyles } from "../SpinnerIcon.styles";
 export var sizes = {
   big: {
     size: 96,
@@ -29,47 +25,14 @@ export var SpinnerIcon = function SpinnerIcon(_ref) {
   var _cx, _cx2;
   var size = _ref.size,
     className = _ref.className,
-    dimmed = _ref.dimmed,
     inline = _ref.inline,
     width = _ref.width,
     color = _ref.color;
   var _size = isSizeAlias(size) ? sizes[size] : size;
   var currentSize = inline ? sizes.mini : _size;
-  var svgRef = React.useRef(null);
-  if (isIE11 && !isTestEnv) {
-    // This condition will not change during app's life time
-    // So its OK to use hooks here
-    // https://reactjs.org/docs/hooks-rules.html#only-call-hooks-at-the-top-level
-
-    // eslint-disable-next-line react-hooks/rules-of-hooks
-    var fallbackAnimationRef = React.useRef(null);
-    // eslint-disable-next-line react-hooks/rules-of-hooks
-    var _React$useContext = React.useContext(ThemeContext),
-      red = _React$useContext.red,
-      yellow = _React$useContext.yellow,
-      green = _React$useContext.green,
-      brand = _React$useContext.brand;
-    // eslint-disable-next-line react-hooks/rules-of-hooks
-    React.useEffect(function () {
-      var svg = svgRef.current;
-      var setStyleProperty = function setStyleProperty() {
-        if (svg) {
-          var _svg$style;
-          (_svg$style = svg.style).setProperty.apply(_svg$style, arguments);
-        }
-      };
-      fallbackAnimationRef.current = new SpinnerFallbackAnimationRunner([createOffsetAnimation(0, -230, 1000, setStyleProperty, '%'), createLengthAnimation([62, 168], [187, 43], 2000, setStyleProperty, '%'), createRotationAnimation(0, 360, 2000, setStyleProperty)].concat(dimmed ? [] : [createColorAnimation([red, yellow, green, brand], 1500, setStyleProperty)]), 1000 / 60);
-      return function () {
-        var fallbackAnimation = fallbackAnimationRef.current;
-        if (fallbackAnimation) {
-          fallbackAnimation.stop();
-        }
-        if (svg) {
-          svg.removeAttribute('style');
-        }
-      };
-    }, [dimmed, red, yellow, green, brand]);
-  }
+  var _useEmotion = useEmotion(),
+    cx = _useEmotion.cx;
+  var styles = useStyles(getStyles);
   return /*#__PURE__*/(
     React.createElement("span", {
       className: cx(styles.root(), (_cx = {}, _cx[styles.rootInline()] = inline, _cx))
@@ -84,7 +47,6 @@ export var SpinnerIcon = function SpinnerIcon(_ref) {
       strokeDasharray: 10 * currentSize.radius / 6 + ", " + 27 * currentSize.radius / 6,
       strokeDashoffset: "0",
       strokeWidth: width || currentSize.width,
-      ref: svgRef,
       focusable: "false",
       "aria-hidden": "true"
     }, /*#__PURE__*/

package/internal/SpinnerIcon/SpinnerIcon/SpinnerIcon.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","isIE11","SpinnerFallbackAnimationRunner","createOffsetAnimation","createLengthAnimation","createColorAnimation","createRotationAnimation","isTestEnv","ThemeContext","cx","styles","sizes","big","size","width","radius","normal","mini","isSizeAlias","SpinnerIcon","_ref","_cx","_cx2","className","dimmed","inline","color","_size","currentSize","svgRef","useRef","fallbackAnimationRef","_React$useContext","useContext","red","yellow","green","brand","useEffect","svg","current","setStyleProperty","_svg$style","style","setProperty","apply","arguments","concat","fallbackAnimation","stop","removeAttribute","createElement","root","rootInline","viewBox","icon","iconInline","height","fill","stroke","strokeDasharray","strokeDashoffset","strokeWidth","ref","focusable","cy","r"],"sources":["SpinnerIcon.tsx"],"sourcesContent":["import React from 'react';\n\nimport { isIE11 } from '../../lib/client';\nimport {\n  SpinnerFallbackAnimationRunner,\n  createOffsetAnimation,\n  createLengthAnimation,\n  createColorAnimation,\n  createRotationAnimation,\n} from '../../components/Spinner/SpinnerFallbackAnimation';\nimport { isTestEnv } from '../../lib/currentEnvironment';\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\nimport { cx } from '../../lib/theming/Emotion';\n\nimport { styles } from './SpinnerIcon.styles';\n\ninterface SpinnerIconSize {\n  size: number;\n  width: number;\n  radius: number;\n}\n\nexport interface SpinnerIconProps {\n  className?: string;\n  size: SpinnerIconSize | keyof typeof sizes;\n  dimmed?: boolean;\n  inline?: boolean;\n  width?: number;\n  color?: React.CSSProperties['color'];\n}\n\nexport const sizes = {\n  big: {\n    size: 96,\n    width: 4,\n    radius: 32,\n  },\n  normal: {\n    size: 48,\n    width: 2,\n    radius: 16,\n  },\n  mini: {\n    size: 16,\n    width: 1.5,\n    radius: 6,\n  },\n} as const;\n\nconst isSizeAlias = (size: unknown): size is keyof typeof sizes => {\n  return typeof size === 'string' && size in sizes;\n};\n\nexport const SpinnerIcon = ({ size, className, dimmed, inline, width, color }: SpinnerIconProps) => {\n  const _size = isSizeAlias(size) ? sizes[size] : size;\n  const currentSize = inline ? sizes.mini : _size;\n  const svgRef = React.useRef<SVGSVGElement>(null);\n\n  if (isIE11 && !isTestEnv) {\n    // This condition will not change during app's life time\n    // So its OK to use hooks here\n    // https://reactjs.org/docs/hooks-rules.html#only-call-hooks-at-the-top-level\n\n    // eslint-disable-next-line react-hooks/rules-of-hooks\n    const fallbackAnimationRef = React.useRef<SpinnerFallbackAnimationRunner | null>(null);\n    // eslint-disable-next-line react-hooks/rules-of-hooks\n    const { red, yellow, green, brand } = React.useContext(ThemeContext);\n    // eslint-disable-next-line react-hooks/rules-of-hooks\n    React.useEffect(() => {\n      const svg = svgRef.current;\n\n      const setStyleProperty: CSSStyleDeclaration['setProperty'] = (...args) => {\n        if (svg) {\n          svg.style.setProperty(...args);\n        }\n      };\n\n      fallbackAnimationRef.current = new SpinnerFallbackAnimationRunner(\n        [\n          createOffsetAnimation(0, -230, 1000, setStyleProperty, '%'),\n          createLengthAnimation([62, 168], [187, 43], 2000, setStyleProperty, '%'),\n          createRotationAnimation(0, 360, 2000, setStyleProperty),\n          ...(dimmed ? [] : [createColorAnimation([red, yellow, green, brand], 1500, setStyleProperty)]),\n        ],\n        1000 / 60,\n      );\n\n      return () => {\n        const fallbackAnimation = fallbackAnimationRef.current;\n        if (fallbackAnimation) {\n          fallbackAnimation.stop();\n        }\n        if (svg) {\n          svg.removeAttribute('style');\n        }\n      };\n    }, [dimmed, red, yellow, green, brand]);\n  }\n\n  return (\n    <span className={cx(styles.root(), { [styles.rootInline()]: inline })}>\n      <svg\n        viewBox={`0 0 ${currentSize.size} ${currentSize.size}`}\n        className={cx(styles.icon(), className, {\n          [styles.iconInline()]: inline,\n        })}\n        width={currentSize.size}\n        height={currentSize.size}\n        fill=\"none\"\n        stroke={color}\n        strokeDasharray={`${(10 * currentSize.radius) / 6}, ${(27 * currentSize.radius) / 6}`}\n        strokeDashoffset=\"0\"\n        strokeWidth={width || currentSize.width}\n        ref={svgRef}\n        focusable=\"false\"\n        aria-hidden=\"true\"\n      >\n        <circle cx={currentSize.size / 2} cy={currentSize.size / 2} r={currentSize.radius} />\n      </svg>\n    </span>\n  );\n};\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["React","useEmotion","useStyles","getStyles","sizes","big","size","width","radius","normal","mini","isSizeAlias","SpinnerIcon","_ref","_cx","_cx2","className","inline","color","_size","currentSize","_useEmotion","cx","styles","createElement","root","rootInline","viewBox","icon","iconInline","height","fill","stroke","strokeDasharray","strokeDashoffset","strokeWidth","focusable","cy","r"],"sources":["SpinnerIcon.tsx"],"sourcesContent":["import React from 'react';\n\nimport { useEmotion, useStyles } from '../../lib/renderEnvironment';\n\nimport { getStyles } from './SpinnerIcon.styles';\n\ninterface SpinnerIconSize {\n  size: number;\n  width: number;\n  radius: number;\n}\n\nexport interface SpinnerIconProps {\n  className?: string;\n  size: SpinnerIconSize | keyof typeof sizes;\n  inline?: boolean;\n  width?: number;\n  color?: React.CSSProperties['color'];\n}\n\nexport const sizes = {\n  big: {\n    size: 96,\n    width: 4,\n    radius: 32,\n  },\n  normal: {\n    size: 48,\n    width: 2,\n    radius: 16,\n  },\n  mini: {\n    size: 16,\n    width: 1.5,\n    radius: 6,\n  },\n} as const;\n\nconst isSizeAlias = (size: unknown): size is keyof typeof sizes => {\n  return typeof size === 'string' && size in sizes;\n};\n\nexport const SpinnerIcon = ({ size, className, inline, width, color }: SpinnerIconProps) => {\n  const _size = isSizeAlias(size) ? sizes[size] : size;\n  const currentSize = inline ? sizes.mini : _size;\n\n  const { cx } = useEmotion();\n  const styles = useStyles(getStyles);\n\n  return (\n    <span className={cx(styles.root(), { [styles.rootInline()]: inline })}>\n      <svg\n        viewBox={`0 0 ${currentSize.size} ${currentSize.size}`}\n        className={cx(styles.icon(), className, {\n          [styles.iconInline()]: inline,\n        })}\n        width={currentSize.size}\n        height={currentSize.size}\n        fill=\"none\"\n        stroke={color}\n        strokeDasharray={`${(10 * currentSize.radius) / 6}, ${(27 * currentSize.radius) / 6}`}\n        strokeDashoffset=\"0\"\n        strokeWidth={width || currentSize.width}\n        focusable=\"false\"\n        aria-hidden=\"true\"\n      >\n        <circle cx={currentSize.size / 2} cy={currentSize.size / 2} r={currentSize.radius} />\n      </svg>\n    </span>\n  );\n};\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;;AAEzB,SAASC,UAAU,EAAEC,SAAS,QAAQ,6BAA6B;;AAEnE,SAASC,SAAS,QAAQ,sBAAsB;;;;;;;;;;;;;;;;AAgBhD,OAAO,IAAMC,KAAK,GAAG;EACnBC,GAAG,EAAE;IACHC,IAAI,EAAE,EAAE;IACRC,KAAK,EAAE,CAAC;IACRC,MAAM,EAAE;EACV,CAAC;EACDC,MAAM,EAAE;IACNH,IAAI,EAAE,EAAE;IACRC,KAAK,EAAE,CAAC;IACRC,MAAM,EAAE;EACV,CAAC;EACDE,IAAI,EAAE;IACJJ,IAAI,EAAE,EAAE;IACRC,KAAK,EAAE,GAAG;IACVC,MAAM,EAAE;EACV;AACF,CAAU;;AAEV,IAAMG,WAAW,GAAG,SAAdA,WAAWA,CAAIL,IAAa,EAAiC;EACjE,OAAO,OAAOA,IAAI,KAAK,QAAQ,IAAIA,IAAI,IAAIF,KAAK;AAClD,CAAC;;AAED,OAAO,IAAMQ,WAAW,GAAG,SAAdA,WAAWA,CAAAC,IAAA,EAAoE,KAAAC,GAAA,EAAAC,IAAA,KAA9DT,IAAI,GAAAO,IAAA,CAAJP,IAAI,CAAEU,SAAS,GAAAH,IAAA,CAATG,SAAS,CAAEC,MAAM,GAAAJ,IAAA,CAANI,MAAM,CAAEV,KAAK,GAAAM,IAAA,CAALN,KAAK,CAAEW,KAAK,GAAAL,IAAA,CAALK,KAAK;EACjE,IAAMC,KAAK,GAAGR,WAAW,CAACL,IAAI,CAAC,GAAGF,KAAK,CAACE,IAAI,CAAC,GAAGA,IAAI;EACpD,IAAMc,WAAW,GAAGH,MAAM,GAAGb,KAAK,CAACM,IAAI,GAAGS,KAAK;;EAE/C,IAAAE,WAAA,GAAepB,UAAU,CAAC,CAAC,CAAnBqB,EAAE,GAAAD,WAAA,CAAFC,EAAE;EACV,IAAMC,MAAM,GAAGrB,SAAS,CAACC,SAAS,CAAC;;EAEnC;IACEH,KAAA,CAAAwB,aAAA,WAAMR,SAAS,EAAEM,EAAE,CAACC,MAAM,CAACE,IAAI,CAAC,CAAC,GAAAX,GAAA,OAAAA,GAAA,CAAKS,MAAM,CAACG,UAAU,CAAC,CAAC,IAAGT,MAAM,EAAAH,GAAA,CAAE,CAAE;IACpEd,KAAA,CAAAwB,aAAA;MACEG,OAAO,WAASP,WAAW,CAACd,IAAI,SAAIc,WAAW,CAACd,IAAO;MACvDU,SAAS,EAAEM,EAAE,CAACC,MAAM,CAACK,IAAI,CAAC,CAAC,EAAEZ,SAAS,GAAAD,IAAA,OAAAA,IAAA;MACnCQ,MAAM,CAACM,UAAU,CAAC,CAAC,IAAGZ,MAAM,EAAAF,IAAA;MAC9B,CAAE;MACHR,KAAK,EAAEa,WAAW,CAACd,IAAK;MACxBwB,MAAM,EAAEV,WAAW,CAACd,IAAK;MACzByB,IAAI,EAAC,MAAM;MACXC,MAAM,EAAEd,KAAM;MACde,eAAe,EAAM,EAAE,GAAGb,WAAW,CAACZ,MAAM,GAAI,CAAC,UAAM,EAAE,GAAGY,WAAW,CAACZ,MAAM,GAAI,CAAI;MACtF0B,gBAAgB,EAAC,GAAG;MACpBC,WAAW,EAAE5B,KAAK,IAAIa,WAAW,CAACb,KAAM;MACxC6B,SAAS,EAAC,OAAO;MACjB,eAAY,MAAM;;IAElBpC,KAAA,CAAAwB,aAAA,aAAQF,EAAE,EAAEF,WAAW,CAACd,IAAI,GAAG,CAAE,EAAC+B,EAAE,EAAEjB,WAAW,CAACd,IAAI,GAAG,CAAE,EAACgC,CAAC,EAAElB,WAAW,CAACZ,MAAO,EAAE;IACjF;IACD,CAAC;;AAEX,CAAC","ignoreList":[]}

package/internal/SpinnerIcon/SpinnerIcon.d.ts

@@ -7,7 +7,6 @@ interface SpinnerIconSize {
 export interface SpinnerIconProps {
     className?: string;
     size: SpinnerIconSize | keyof typeof sizes;
-    dimmed?: boolean;
     inline?: boolean;
     width?: number;
     color?: React.CSSProperties['color'];
@@ -29,5 +28,5 @@ export declare const sizes: {
         readonly radius: 6;
     };
 };
-export declare const SpinnerIcon: ({ size, className, dimmed, inline, width, color }: SpinnerIconProps) => React.JSX.Element;
+export declare const SpinnerIcon: ({ size, className, inline, width, color }: SpinnerIconProps) => React.JSX.Element;
 export {};

package/internal/SpinnerIcon/SpinnerIcon.styles/SpinnerIcon.styles.js

@@ -1,17 +1,20 @@
 import _taggedTemplateLiteralLoose from "@babel/runtime/helpers/esm/taggedTemplateLiteralLoose";
 var _templateObject, _templateObject2, _templateObject3, _templateObject4;
-import { css, memoizeStyle } from "../../../lib/theming/Emotion";
-export var styles = memoizeStyle({
-  root: function root() {
-    return css(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n      display: inline-block;\n      margin-left: -1px;\n      margin-right: -1px;\n    "])));
-  },
-  rootInline: function rootInline() {
-    return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n      margin-left: -0.0714285714285714em;\n      margin-right: -0.0714285714285714em;\n    "])));
-  },
-  icon: function icon() {
-    return css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\n      margin-bottom: -3px;\n      border-radius: 50%;\n      overflow: visible;\n    "])));
-  },
-  iconInline: function iconInline() {
-    return css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteralLoose(["\n      height: 1.1428571428571428em;\n      width: 1.1428571428571428em;\n      margin-bottom: -0.2428571428571428em;\n      stroke-width: 0.10714285714285714em;\n    "])));
-  }
+import { memoizeGetStyles } from "../../../lib/theming/Emotion";
+export var getStyles = memoizeGetStyles(function (_ref) {
+  var css = _ref.css;
+  return {
+    root: function root() {
+      return css(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n      display: inline-block;\n      margin-left: -1px;\n      margin-right: -1px;\n    "])));
+    },
+    rootInline: function rootInline() {
+      return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n      margin-left: -0.0714285714285714em;\n      margin-right: -0.0714285714285714em;\n    "])));
+    },
+    icon: function icon() {
+      return css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\n      margin-bottom: -3px;\n      border-radius: 50%;\n      overflow: visible;\n    "])));
+    },
+    iconInline: function iconInline() {
+      return css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteralLoose(["\n      height: 1.1428571428571428em;\n      width: 1.1428571428571428em;\n      margin-bottom: -0.2428571428571428em;\n      stroke-width: 0.10714285714285714em;\n    "])));
+    }
+  };
 });

package/internal/SpinnerIcon/SpinnerIcon.styles/SpinnerIcon.styles.js.map

@@ -1 +1 @@
-{"version":3,"names":["css","memoizeStyle","styles","root","_templateObject","_taggedTemplateLiteralLoose","rootInline","_templateObject2","icon","_templateObject3","iconInline","_templateObject4"],"sources":["SpinnerIcon.styles.ts"],"sourcesContent":["import { css, memoizeStyle } from '../../lib/theming/Emotion';\n\nexport const styles = memoizeStyle({\n  root() {\n    return css`\n      display: inline-block;\n      margin-left: -1px;\n      margin-right: -1px;\n    `;\n  },\n  rootInline() {\n    return css`\n      margin-left: -0.0714285714285714em;\n      margin-right: -0.0714285714285714em;\n    `;\n  },\n\n  icon() {\n    return css`\n      margin-bottom: -3px;\n      border-radius: 50%;\n      overflow: visible;\n    `;\n  },\n\n  iconInline() {\n    return css`\n      height: 1.1428571428571428em;\n      width: 1.1428571428571428em;\n      margin-bottom: -0.2428571428571428em;\n      stroke-width: 0.10714285714285714em;\n    `;\n  },\n});\n"],"mappings":"0KAAA,SAASA,GAAG,EAAEC,YAAY,QAAQ,2BAA2B;;AAE7D,OAAO,IAAMC,MAAM,GAAGD,YAAY,CAAC;EACjCE,IAAI,WAAAA,KAAA,EAAG;IACL,OAAOH,GAAG,CAAAI,eAAA,KAAAA,eAAA,GAAAC,2BAAA;;;;;EAKZ,CAAC;EACDC,UAAU,WAAAA,WAAA,EAAG;IACX,OAAON,GAAG,CAAAO,gBAAA,KAAAA,gBAAA,GAAAF,2BAAA;;;;EAIZ,CAAC;;EAEDG,IAAI,WAAAA,KAAA,EAAG;IACL,OAAOR,GAAG,CAAAS,gBAAA,KAAAA,gBAAA,GAAAJ,2BAAA;;;;;EAKZ,CAAC;;EAEDK,UAAU,WAAAA,WAAA,EAAG;IACX,OAAOV,GAAG,CAAAW,gBAAA,KAAAA,gBAAA,GAAAN,2BAAA;;;;;;EAMZ;AACF,CAAC,CAAC","ignoreList":[]}
+{"version":3,"names":["memoizeGetStyles","getStyles","_ref","css","root","_templateObject","_taggedTemplateLiteralLoose","rootInline","_templateObject2","icon","_templateObject3","iconInline","_templateObject4"],"sources":["SpinnerIcon.styles.ts"],"sourcesContent":["import type { Emotion } from '@emotion/css/types/create-instance';\n\nimport { memoizeGetStyles } from '../../lib/theming/Emotion';\n\nexport const getStyles = memoizeGetStyles(({ css }: Emotion) => ({\n  root() {\n    return css`\n      display: inline-block;\n      margin-left: -1px;\n      margin-right: -1px;\n    `;\n  },\n  rootInline() {\n    return css`\n      margin-left: -0.0714285714285714em;\n      margin-right: -0.0714285714285714em;\n    `;\n  },\n\n  icon() {\n    return css`\n      margin-bottom: -3px;\n      border-radius: 50%;\n      overflow: visible;\n    `;\n  },\n\n  iconInline() {\n    return css`\n      height: 1.1428571428571428em;\n      width: 1.1428571428571428em;\n      margin-bottom: -0.2428571428571428em;\n      stroke-width: 0.10714285714285714em;\n    `;\n  },\n}));\n"],"mappings":";;AAEA,SAASA,gBAAgB,QAAQ,2BAA2B;;AAE5D,OAAO,IAAMC,SAAS,GAAGD,gBAAgB,CAAC,UAAAE,IAAA,OAAGC,GAAG,GAAAD,IAAA,CAAHC,GAAG,QAAiB;IAC/DC,IAAI,WAAAA,KAAA,EAAG;MACL,OAAOD,GAAG,CAAAE,eAAA,KAAAA,eAAA,GAAAC,2BAAA;;;;;IAKZ,CAAC;IACDC,UAAU,WAAAA,WAAA,EAAG;MACX,OAAOJ,GAAG,CAAAK,gBAAA,KAAAA,gBAAA,GAAAF,2BAAA;;;;IAIZ,CAAC;;IAEDG,IAAI,WAAAA,KAAA,EAAG;MACL,OAAON,GAAG,CAAAO,gBAAA,KAAAA,gBAAA,GAAAJ,2BAAA;;;;;IAKZ,CAAC;;IAEDK,UAAU,WAAAA,WAAA,EAAG;MACX,OAAOR,GAAG,CAAAS,gBAAA,KAAAA,gBAAA,GAAAN,2BAAA;;;;;;IAMZ;EACF,CAAC,EAAC,CAAC","ignoreList":[]}

package/internal/SpinnerIcon/SpinnerIcon.styles.d.ts

@@ -1,6 +1,6 @@
-export declare const styles: {
+export declare const getStyles: import("../../lib/theming/Emotion").StylesGetter<{
     root(): string;
     rootInline(): string;
     icon(): string;
     iconInline(): string;
-};
+}>;

package/internal/TextWidthHelper/TextWidthHelper/TextWidthHelper.js

@@ -1,13 +1,15 @@
 import _inheritsLoose from "@babel/runtime/helpers/esm/inheritsLoose";
+var _class;
 import React from 'react';
 import { getDOMRect } from "../../../lib/dom/getDOMRect";
-import { jsStyles } from "../TextWidthHelper.styles";
+import { withRenderEnvironment } from "../../../lib/renderEnvironment";
+import { getJsStyles } from "../TextWidthHelper.styles";
 var THIN_SPACE = "\u2009";
 
 /**
  * Херпер позволяет вычислить размеры блока с текстом
  */
-export var TextWidthHelper = /*#__PURE__*/function (_React$Component) {
+export var TextWidthHelper = withRenderEnvironment(_class = /*#__PURE__*/function (_React$Component) {
   function TextWidthHelper() {
     var _this;
     for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
@@ -16,17 +18,18 @@ export var TextWidthHelper = /*#__PURE__*/function (_React$Component) {
     _this = _React$Component.call.apply(_React$Component, [this].concat(args)) || this;
     _this.element = null;
     _this.elementRef = function (node) {
-      return _this.element = node;
+      _this.element = node;
     };
     return _this;
   }
   _inheritsLoose(TextWidthHelper, _React$Component);
   var _proto = TextWidthHelper.prototype;
   _proto.render = function render() {
+    this.jsStyles = getJsStyles(this.emotion);
     return /*#__PURE__*/React.createElement("div", {
-      className: jsStyles.root()
+      className: this.jsStyles.root()
     }, /*#__PURE__*/React.createElement("div", {
-      className: jsStyles.textContainer(),
+      className: this.jsStyles.textContainer(),
       ref: this.elementRef
     }, this.props.text || THIN_SPACE));
   };
@@ -37,4 +40,4 @@ export var TextWidthHelper = /*#__PURE__*/function (_React$Component) {
     return getDOMRect(this.element).height;
   };
   return TextWidthHelper;
-}(React.Component);
+}(React.Component)) || _class;

package/internal/TextWidthHelper/TextWidthHelper/TextWidthHelper.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","getDOMRect","jsStyles","THIN_SPACE","TextWidthHelper","_React$Component","_this","_len","arguments","length","args","Array","_key","call","apply","concat","element","elementRef","node","_inheritsLoose","_proto","prototype","render","createElement","className","root","textContainer","ref","props","text","getTextWidth","width","getTextHeight","height","Component"],"sources":["TextWidthHelper.tsx"],"sourcesContent":["import React from 'react';\n\nimport { getDOMRect } from '../../lib/dom/getDOMRect';\n\nimport { jsStyles } from './TextWidthHelper.styles';\n\nconst THIN_SPACE = '\\u2009';\n\ninterface TextWidthHelperProps {\n  text?: string;\n}\n/**\n * Херпер позволяет вычислить размеры блока с текстом\n */\nexport class TextWidthHelper extends React.Component<TextWidthHelperProps> {\n  private element: HTMLDivElement | null = null;\n\n  public render() {\n    return (\n      <div className={jsStyles.root()}>\n        <div className={jsStyles.textContainer()} ref={this.elementRef}>\n          {this.props.text || THIN_SPACE}\n        </div>\n      </div>\n    );\n  }\n\n  public getTextWidth(): number {\n    return getDOMRect(this.element).width;\n  }\n\n  public getTextHeight(): number {\n    return getDOMRect(this.element).height;\n  }\n\n  private elementRef = (node: HTMLDivElement) => (this.element = node);\n}\n"],"mappings":"sEAAA,OAAOA,KAAK,MAAM,OAAO;;AAEzB,SAASC,UAAU,QAAQ,0BAA0B;;AAErD,SAASC,QAAQ,QAAQ,0BAA0B;;AAEnD,IAAMC,UAAU,GAAG,QAAQ;;;;;AAK3B;AACA;AACA;AACA,WAAaC,eAAe,0BAAAC,gBAAA,YAAAD,gBAAA,OAAAE,KAAA,UAAAC,IAAA,GAAAC,SAAA,CAAAC,MAAA,EAAAC,IAAA,OAAAC,KAAA,CAAAJ,IAAA,GAAAK,IAAA,MAAAA,IAAA,GAAAL,IAAA,EAAAK,IAAA,KAAAF,IAAA,CAAAE,IAAA,IAAAJ,SAAA,CAAAI,IAAA,GAAAN,KAAA,GAAAD,gBAAA,CAAAQ,IAAA,CAAAC,KAAA,CAAAT,gBAAA,SAAAU,MAAA,CAAAL,IAAA,WAAAJ,KAAA;IAClBU,OAAO,GAA0B,IAAI,CAAAV,KAAA;;;;;;;;;;;;;;;;;;;;IAoBrCW,UAAU,GAAG,UAACC,IAAoB,UAAMZ,KAAA,CAAKU,OAAO,GAAGE,IAAI,EAAC,QAAAZ,KAAA,EAAAa,cAAA,CAAAf,eAAA,EAAAC,gBAAA,MAAAe,MAAA,GAAAhB,eAAA,CAAAiB,SAAA,CAAAD,MAAA,CAlB7DE,MAAM,GAAb,SAAAA,OAAA,EAAgB,CACd,oBACEtB,KAAA,CAAAuB,aAAA,UAAKC,SAAS,EAAEtB,QAAQ,CAACuB,IAAI,CAAC,CAAE,iBAC9BzB,KAAA,CAAAuB,aAAA,UAAKC,SAAS,EAAEtB,QAAQ,CAACwB,aAAa,CAAC,CAAE,EAACC,GAAG,EAAE,IAAI,CAACV,UAAW,IAC5D,IAAI,CAACW,KAAK,CAACC,IAAI,IAAI1B,UACjB,CACF,CAAC,CAEV,CAAC,CAAAiB,MAAA,CAEMU,YAAY,GAAnB,SAAAA,aAAA,EAA8B,CAC5B,OAAO7B,UAAU,CAAC,IAAI,CAACe,OAAO,CAAC,CAACe,KAAK,CACvC,CAAC,CAAAX,MAAA,CAEMY,aAAa,GAApB,SAAAA,cAAA,EAA+B,CAC7B,OAAO/B,UAAU,CAAC,IAAI,CAACe,OAAO,CAAC,CAACiB,MAAM,CACxC,CAAC,QAAA7B,eAAA,GAnBkCJ,KAAK,CAACkC,SAAS","ignoreList":[]}
+{"version":3,"names":["React","getDOMRect","withRenderEnvironment","getJsStyles","THIN_SPACE","TextWidthHelper","_class","_React$Component","_this","_len","arguments","length","args","Array","_key","call","apply","concat","element","elementRef","node","_inheritsLoose","_proto","prototype","render","jsStyles","emotion","createElement","className","root","textContainer","ref","props","text","getTextWidth","width","getTextHeight","height","Component"],"sources":["TextWidthHelper.tsx"],"sourcesContent":["import React from 'react';\nimport type { Emotion } from '@emotion/css/types/create-instance';\n\nimport { getDOMRect } from '../../lib/dom/getDOMRect';\nimport { withRenderEnvironment } from '../../lib/renderEnvironment';\n\nimport { getJsStyles } from './TextWidthHelper.styles';\n\nconst THIN_SPACE = '\\u2009';\n\ninterface TextWidthHelperProps {\n  text?: string;\n}\n/**\n * Херпер позволяет вычислить размеры блока с текстом\n */\n@withRenderEnvironment\nexport class TextWidthHelper extends React.Component<TextWidthHelperProps> {\n  private element: HTMLDivElement | null = null;\n  private emotion!: Emotion;\n  private jsStyles!: ReturnType<typeof getJsStyles>;\n\n  public render() {\n    this.jsStyles = getJsStyles(this.emotion);\n\n    return (\n      <div className={this.jsStyles.root()}>\n        <div className={this.jsStyles.textContainer()} ref={this.elementRef}>\n          {this.props.text || THIN_SPACE}\n        </div>\n      </div>\n    );\n  }\n\n  public getTextWidth(): number {\n    return getDOMRect(this.element).width;\n  }\n\n  public getTextHeight(): number {\n    return getDOMRect(this.element).height;\n  }\n\n  private elementRef = (node: HTMLDivElement) => {\n    this.element = node;\n  };\n}\n"],"mappings":"iFAAA,OAAOA,KAAK,MAAM,OAAO;;;AAGzB,SAASC,UAAU,QAAQ,0BAA0B;AACrD,SAASC,qBAAqB,QAAQ,6BAA6B;;AAEnE,SAASC,WAAW,QAAQ,0BAA0B;;AAEtD,IAAMC,UAAU,GAAG,QAAQ;;;;;AAK3B;AACA;AACA;AACA;AACaC,eAAe,GAD3BH,qBAAqB,CAAAI,MAAA,0BAAAC,gBAAA,YAAAF,gBAAA,OAAAG,KAAA,UAAAC,IAAA,GAAAC,SAAA,CAAAC,MAAA,EAAAC,IAAA,OAAAC,KAAA,CAAAJ,IAAA,GAAAK,IAAA,MAAAA,IAAA,GAAAL,IAAA,EAAAK,IAAA,KAAAF,IAAA,CAAAE,IAAA,IAAAJ,SAAA,CAAAI,IAAA,GAAAN,KAAA,GAAAD,gBAAA,CAAAQ,IAAA,CAAAC,KAAA,CAAAT,gBAAA,SAAAU,MAAA,CAAAL,IAAA,WAAAJ,KAAA;IAEZU,OAAO,GAA0B,IAAI,CAAAV,KAAA;;;;;;;;;;;;;;;;;;;;;;;;IAwBrCW,UAAU,GAAG,UAACC,IAAoB,EAAK;MAC7CZ,KAAA,CAAKU,OAAO,GAAGE,IAAI;IACrB,CAAC,QAAAZ,KAAA,EAAAa,cAAA,CAAAhB,eAAA,EAAAE,gBAAA,MAAAe,MAAA,GAAAjB,eAAA,CAAAkB,SAAA,CAAAD,MAAA,CAtBME,MAAM,GAAb,SAAAA,OAAA,EAAgB,CACd,IAAI,CAACC,QAAQ,GAAGtB,WAAW,CAAC,IAAI,CAACuB,OAAO,CAAC,CAEzC,oBACE1B,KAAA,CAAA2B,aAAA,UAAKC,SAAS,EAAE,IAAI,CAACH,QAAQ,CAACI,IAAI,CAAC,CAAE,iBACnC7B,KAAA,CAAA2B,aAAA,UAAKC,SAAS,EAAE,IAAI,CAACH,QAAQ,CAACK,aAAa,CAAC,CAAE,EAACC,GAAG,EAAE,IAAI,CAACZ,UAAW,IACjE,IAAI,CAACa,KAAK,CAACC,IAAI,IAAI7B,UACjB,CACF,CAAC,CAEV,CAAC,CAAAkB,MAAA,CAEMY,YAAY,GAAnB,SAAAA,aAAA,EAA8B,CAC5B,OAAOjC,UAAU,CAAC,IAAI,CAACiB,OAAO,CAAC,CAACiB,KAAK,CACvC,CAAC,CAAAb,MAAA,CAEMc,aAAa,GAApB,SAAAA,cAAA,EAA+B,CAC7B,OAAOnC,UAAU,CAAC,IAAI,CAACiB,OAAO,CAAC,CAACmB,MAAM,CACxC,CAAC,QAAAhC,eAAA,GAvBkCL,KAAK,CAACsC,SAAS,MAAAhC,MAAA","ignoreList":[]}

package/internal/TextWidthHelper/TextWidthHelper.d.ts

@@ -7,6 +7,8 @@ interface TextWidthHelperProps {
  */
 export declare class TextWidthHelper extends React.Component<TextWidthHelperProps> {
     private element;
+    private emotion;
+    private jsStyles;
     render(): React.JSX.Element;
     getTextWidth(): number;
     getTextHeight(): number;

package/internal/TextWidthHelper/TextWidthHelper.styles/TextWidthHelper.styles.js

@@ -1,12 +1,14 @@
 import _taggedTemplateLiteralLoose from "@babel/runtime/helpers/esm/taggedTemplateLiteralLoose";
 var _templateObject, _templateObject2;
-import { css, memoizeStyle } from "../../../lib/theming/Emotion";
-var styles = {
-  root: function root() {
-    return css(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n      display: flex;\n      position: absolute;\n      top: 0;\n      left: 0;\n      right: 0;\n      visibility: hidden;\n      overflow: hidden;\n    "])));
-  },
-  textContainer: function textContainer() {
-    return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n      word-break: break-all;\n      white-space: nowrap;\n    "])));
-  }
-};
-export var jsStyles = memoizeStyle(styles);
+import { memoizeGetStyles } from "../../../lib/theming/Emotion";
+export var getJsStyles = memoizeGetStyles(function (_ref) {
+  var css = _ref.css;
+  return {
+    root: function root() {
+      return css(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n      display: flex;\n      position: absolute;\n      top: 0;\n      left: 0;\n      right: 0;\n      visibility: hidden;\n      overflow: hidden;\n    "])));
+    },
+    textContainer: function textContainer() {
+      return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n      word-break: break-all;\n      white-space: nowrap;\n    "])));
+    }
+  };
+});

package/internal/TextWidthHelper/TextWidthHelper.styles/TextWidthHelper.styles.js.map

@@ -1 +1 @@
-{"version":3,"names":["css","memoizeStyle","styles","root","_templateObject","_taggedTemplateLiteralLoose","textContainer","_templateObject2","jsStyles"],"sources":["TextWidthHelper.styles.ts"],"sourcesContent":["import { css, memoizeStyle } from '../../lib/theming/Emotion';\n\nconst styles = {\n  root() {\n    return css`\n      display: flex;\n      position: absolute;\n      top: 0;\n      left: 0;\n      right: 0;\n      visibility: hidden;\n      overflow: hidden;\n    `;\n  },\n  textContainer() {\n    return css`\n      word-break: break-all;\n      white-space: nowrap;\n    `;\n  },\n};\n\nexport const jsStyles = memoizeStyle(styles);\n"],"mappings":"sIAAA,SAASA,GAAG,EAAEC,YAAY,QAAQ,2BAA2B;;AAE7D,IAAMC,MAAM,GAAG;EACbC,IAAI,WAAAA,KAAA,EAAG;IACL,OAAOH,GAAG,CAAAI,eAAA,KAAAA,eAAA,GAAAC,2BAAA;;;;;;;;;EASZ,CAAC;EACDC,aAAa,WAAAA,cAAA,EAAG;IACd,OAAON,GAAG,CAAAO,gBAAA,KAAAA,gBAAA,GAAAF,2BAAA;;;;EAIZ;AACF,CAAC;;AAED,OAAO,IAAMG,QAAQ,GAAGP,YAAY,CAACC,MAAM,CAAC","ignoreList":[]}
+{"version":3,"names":["memoizeGetStyles","getJsStyles","_ref","css","root","_templateObject","_taggedTemplateLiteralLoose","textContainer","_templateObject2"],"sources":["TextWidthHelper.styles.ts"],"sourcesContent":["import type { Emotion } from '@emotion/css/types/create-instance';\n\nimport { memoizeGetStyles } from '../../lib/theming/Emotion';\n\nexport const getJsStyles = memoizeGetStyles(({ css }: Emotion) => ({\n  root() {\n    return css`\n      display: flex;\n      position: absolute;\n      top: 0;\n      left: 0;\n      right: 0;\n      visibility: hidden;\n      overflow: hidden;\n    `;\n  },\n  textContainer() {\n    return css`\n      word-break: break-all;\n      white-space: nowrap;\n    `;\n  },\n}));\n"],"mappings":";;AAEA,SAASA,gBAAgB,QAAQ,2BAA2B;;AAE5D,OAAO,IAAMC,WAAW,GAAGD,gBAAgB,CAAC,UAAAE,IAAA,OAAGC,GAAG,GAAAD,IAAA,CAAHC,GAAG,QAAiB;IACjEC,IAAI,WAAAA,KAAA,EAAG;MACL,OAAOD,GAAG,CAAAE,eAAA,KAAAA,eAAA,GAAAC,2BAAA;;;;;;;;;IASZ,CAAC;IACDC,aAAa,WAAAA,cAAA,EAAG;MACd,OAAOJ,GAAG,CAAAK,gBAAA,KAAAA,gBAAA,GAAAF,2BAAA;;;;IAIZ;EACF,CAAC,EAAC,CAAC","ignoreList":[]}

package/internal/TextWidthHelper/TextWidthHelper.styles.d.ts

@@ -1,4 +1,4 @@
-export declare const jsStyles: {
+export declare const getJsStyles: import("../../lib/theming/Emotion").StylesGetter<{
     root(): string;
     textContainer(): string;
-};
+}>;

package/internal/ThemePlayground/ComponentsGroup/ComponentsGroup.js

@@ -1,11 +1,13 @@
 import React from 'react';
+import { useStyles } from "../../../lib/renderEnvironment";
 import { Gapped } from "../../../components/Gapped";
-import { styles } from "../Playground.styles";
+import { getStyles } from "../Playground.styles";
 export var ComponentsGroup = function ComponentsGroup(props) {
   var title = props.title,
     children = props.children,
     style = props.style,
     theme = props.theme;
+  var styles = useStyles(getStyles);
   return /*#__PURE__*/(
     React.createElement(Gapped, {
       wrap: true,

package/internal/ThemePlayground/ComponentsGroup/ComponentsGroup.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","Gapped","styles","ComponentsGroup","props","title","children","style","theme","createElement","wrap","verticalAlign","gap","className","componentsGroup"],"sources":["ComponentsGroup.tsx"],"sourcesContent":["import React from 'react';\n\nimport { Gapped } from '../../components/Gapped';\nimport type { Theme } from '../../lib/theming/Theme';\n\nimport { styles } from './Playground.styles';\n\ninterface ComponentsGroupProps {\n  title: string;\n  children: React.ReactNode;\n  style?: React.CSSProperties;\n  theme: Theme;\n}\n\nexport const ComponentsGroup = (props: ComponentsGroupProps): React.ReactElement<ComponentsGroupProps> => {\n  const { title, children, style, theme } = props;\n  return (\n    <Gapped wrap verticalAlign=\"top\" gap={40}>\n      <div className={styles.title(theme)} style={style}>\n        {title}\n      </div>\n      <div className={styles.componentsGroup(theme)}>\n        <Gapped wrap verticalAlign=\"middle\" gap={10}>\n          {children}\n        </Gapped>\n      </div>\n    </Gapped>\n  );\n};\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;;AAEzB,SAASC,MAAM,QAAQ,yBAAyB;;;AAGhD,SAASC,MAAM,QAAQ,qBAAqB;;;;;;;;;AAS5C,OAAO,IAAMC,eAAe,GAAG,SAAlBA,eAAeA,CAAIC,KAA2B,EAA+C;EACxG,IAAQC,KAAK,GAA6BD,KAAK,CAAvCC,KAAK,CAAEC,QAAQ,GAAmBF,KAAK,CAAhCE,QAAQ,CAAEC,KAAK,GAAYH,KAAK,CAAtBG,KAAK,CAAEC,KAAK,GAAKJ,KAAK,CAAfI,KAAK;EACrC;IACER,KAAA,CAAAS,aAAA,CAACR,MAAM,IAACS,IAAI,QAACC,aAAa,EAAC,KAAK,EAACC,GAAG,EAAE,EAAG;IACvCZ,KAAA,CAAAS,aAAA,UAAKI,SAAS,EAAEX,MAAM,CAACG,KAAK,CAACG,KAAK,CAAE,EAACD,KAAK,EAAEA,KAAM;IAC/CF;IACE,CAAC;IACNL,KAAA,CAAAS,aAAA,UAAKI,SAAS,EAAEX,MAAM,CAACY,eAAe,CAACN,KAAK,CAAE;IAC5CR,KAAA,CAAAS,aAAA,CAACR,MAAM,IAACS,IAAI,QAACC,aAAa,EAAC,QAAQ,EAACC,GAAG,EAAE,EAAG;IACzCN;IACK;IACL;IACC,CAAC;;AAEb,CAAC","ignoreList":[]}
+{"version":3,"names":["React","useStyles","Gapped","getStyles","ComponentsGroup","props","title","children","style","theme","styles","createElement","wrap","verticalAlign","gap","className","componentsGroup"],"sources":["ComponentsGroup.tsx"],"sourcesContent":["import React from 'react';\n\nimport { useStyles } from '../../lib/renderEnvironment';\nimport { Gapped } from '../../components/Gapped';\nimport type { Theme } from '../../lib/theming/Theme';\n\nimport { getStyles } from './Playground.styles';\n\ninterface ComponentsGroupProps {\n  title: string;\n  children: React.ReactNode;\n  style?: React.CSSProperties;\n  theme: Theme;\n}\n\nexport const ComponentsGroup = (props: ComponentsGroupProps): React.ReactElement<ComponentsGroupProps> => {\n  const { title, children, style, theme } = props;\n  const styles = useStyles(getStyles);\n  return (\n    <Gapped wrap verticalAlign=\"top\" gap={40}>\n      <div className={styles.title(theme)} style={style}>\n        {title}\n      </div>\n      <div className={styles.componentsGroup(theme)}>\n        <Gapped wrap verticalAlign=\"middle\" gap={10}>\n          {children}\n        </Gapped>\n      </div>\n    </Gapped>\n  );\n};\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;;AAEzB,SAASC,SAAS,QAAQ,6BAA6B;AACvD,SAASC,MAAM,QAAQ,yBAAyB;;;AAGhD,SAASC,SAAS,QAAQ,qBAAqB;;;;;;;;;AAS/C,OAAO,IAAMC,eAAe,GAAG,SAAlBA,eAAeA,CAAIC,KAA2B,EAA+C;EACxG,IAAQC,KAAK,GAA6BD,KAAK,CAAvCC,KAAK,CAAEC,QAAQ,GAAmBF,KAAK,CAAhCE,QAAQ,CAAEC,KAAK,GAAYH,KAAK,CAAtBG,KAAK,CAAEC,KAAK,GAAKJ,KAAK,CAAfI,KAAK;EACrC,IAAMC,MAAM,GAAGT,SAAS,CAACE,SAAS,CAAC;EACnC;IACEH,KAAA,CAAAW,aAAA,CAACT,MAAM,IAACU,IAAI,QAACC,aAAa,EAAC,KAAK,EAACC,GAAG,EAAE,EAAG;IACvCd,KAAA,CAAAW,aAAA,UAAKI,SAAS,EAAEL,MAAM,CAACJ,KAAK,CAACG,KAAK,CAAE,EAACD,KAAK,EAAEA,KAAM;IAC/CF;IACE,CAAC;IACNN,KAAA,CAAAW,aAAA,UAAKI,SAAS,EAAEL,MAAM,CAACM,eAAe,CAACP,KAAK,CAAE;IAC5CT,KAAA,CAAAW,aAAA,CAACT,MAAM,IAACU,IAAI,QAACC,aAAa,EAAC,QAAQ,EAACC,GAAG,EAAE,EAAG;IACzCP;IACK;IACL;IACC,CAAC;;AAEb,CAAC","ignoreList":[]}

package/internal/ThemePlayground/FxInputPlayground/FxInputPlayground.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","FxInput","FxInputPlayground","_React$Component","_this","_len","arguments","length","args","Array","_key","call","apply","concat","state","auto","value","onValueChange","setState","handleRestore","_inheritsLoose","_proto","prototype","render","createElement","type","onRestore","width","Component"],"sources":["FxInputPlayground.tsx"],"sourcesContent":["import React from 'react';\n\nimport { FxInput } from '../../components/FxInput';\n\ninterface FxInputPlaygroundState {\n  auto: boolean;\n  value: string;\n}\nexport class FxInputPlayground extends React.Component {\n  public state: FxInputPlaygroundState = {\n    auto: true,\n    value: 'auto',\n  };\n\n  public render(): JSX.Element {\n    return (\n      <FxInput\n        auto={this.state.auto}\n        type={'text'}\n        value={this.state.value}\n        onRestore={this.handleRestore}\n        onValueChange={this.onValueChange}\n        width={150}\n      />\n    );\n  }\n\n  private onValueChange = (value: string) => {\n    this.setState({ value, auto: false });\n  };\n\n  private handleRestore = () => {\n    this.setState({\n      value: 'auto',\n      auto: true,\n    });\n  };\n}\n"],"mappings":"sEAAA,OAAOA,KAAK,MAAM,OAAO;;AAEzB,SAASC,OAAO,QAAQ,0BAA0B;;;;;;AAMlD,WAAaC,iBAAiB,0BAAAC,gBAAA,YAAAD,kBAAA,OAAAE,KAAA,UAAAC,IAAA,GAAAC,SAAA,CAAAC,MAAA,EAAAC,IAAA,OAAAC,KAAA,CAAAJ,IAAA,GAAAK,IAAA,MAAAA,IAAA,GAAAL,IAAA,EAAAK,IAAA,KAAAF,IAAA,CAAAE,IAAA,IAAAJ,SAAA,CAAAI,IAAA,GAAAN,KAAA,GAAAD,gBAAA,CAAAQ,IAAA,CAAAC,KAAA,CAAAT,gBAAA,SAAAU,MAAA,CAAAL,IAAA,WAAAJ,KAAA;IACrBU,KAAK,GAA2B;MACrCC,IAAI,EAAE,IAAI;MACVC,KAAK,EAAE;IACT,CAAC,CAAAZ,KAAA;;;;;;;;;;;;;;;IAeOa,aAAa,GAAG,UAACD,KAAa,EAAK;MACzCZ,KAAA,CAAKc,QAAQ,CAAC,EAAEF,KAAK,EAALA,KAAK,EAAED,IAAI,EAAE,KAAK,CAAC,CAAC,CAAC;IACvC,CAAC,CAAAX,KAAA;;IAEOe,aAAa,GAAG,YAAM;MAC5Bf,KAAA,CAAKc,QAAQ,CAAC;QACZF,KAAK,EAAE,MAAM;QACbD,IAAI,EAAE;MACR,CAAC,CAAC;IACJ,CAAC,QAAAX,KAAA,EAAAgB,cAAA,CAAAlB,iBAAA,EAAAC,gBAAA,MAAAkB,MAAA,GAAAnB,iBAAA,CAAAoB,SAAA,CAAAD,MAAA,CAtBME,MAAM,GAAb,SAAAA,OAAA,EAA6B,CAC3B,oBACEvB,KAAA,CAAAwB,aAAA,CAACvB,OAAO,IACNc,IAAI,EAAE,IAAI,CAACD,KAAK,CAACC,IAAK,EACtBU,IAAI,EAAE,MAAO,EACbT,KAAK,EAAE,IAAI,CAACF,KAAK,CAACE,KAAM,EACxBU,SAAS,EAAE,IAAI,CAACP,aAAc,EAC9BF,aAAa,EAAE,IAAI,CAACA,aAAc,EAClCU,KAAK,EAAE,GAAI,EACZ,CAAC,CAEN,CAAC,QAAAzB,iBAAA,GAjBoCF,KAAK,CAAC4B,SAAS","ignoreList":[]}
+{"version":3,"names":["React","FxInput","FxInputPlayground","_React$Component","_this","_len","arguments","length","args","Array","_key","call","apply","concat","state","auto","value","onValueChange","setState","handleRestore","_inheritsLoose","_proto","prototype","render","createElement","type","onRestore","width","Component"],"sources":["FxInputPlayground.tsx"],"sourcesContent":["import React, { type JSX } from 'react';\n\nimport { FxInput } from '../../components/FxInput';\n\ninterface FxInputPlaygroundState {\n  auto: boolean;\n  value: string;\n}\nexport class FxInputPlayground extends React.Component {\n  public state: FxInputPlaygroundState = {\n    auto: true,\n    value: 'auto',\n  };\n\n  public render(): JSX.Element {\n    return (\n      <FxInput\n        auto={this.state.auto}\n        type={'text'}\n        value={this.state.value}\n        onRestore={this.handleRestore}\n        onValueChange={this.onValueChange}\n        width={150}\n      />\n    );\n  }\n\n  private onValueChange = (value: string) => {\n    this.setState({ value, auto: false });\n  };\n\n  private handleRestore = () => {\n    this.setState({\n      value: 'auto',\n      auto: true,\n    });\n  };\n}\n"],"mappings":"sEAAA,OAAOA,KAAK,MAAoB,OAAO;;AAEvC,SAASC,OAAO,QAAQ,0BAA0B;;;;;;AAMlD,WAAaC,iBAAiB,0BAAAC,gBAAA,YAAAD,kBAAA,OAAAE,KAAA,UAAAC,IAAA,GAAAC,SAAA,CAAAC,MAAA,EAAAC,IAAA,OAAAC,KAAA,CAAAJ,IAAA,GAAAK,IAAA,MAAAA,IAAA,GAAAL,IAAA,EAAAK,IAAA,KAAAF,IAAA,CAAAE,IAAA,IAAAJ,SAAA,CAAAI,IAAA,GAAAN,KAAA,GAAAD,gBAAA,CAAAQ,IAAA,CAAAC,KAAA,CAAAT,gBAAA,SAAAU,MAAA,CAAAL,IAAA,WAAAJ,KAAA;IACrBU,KAAK,GAA2B;MACrCC,IAAI,EAAE,IAAI;MACVC,KAAK,EAAE;IACT,CAAC,CAAAZ,KAAA;;;;;;;;;;;;;;;IAeOa,aAAa,GAAG,UAACD,KAAa,EAAK;MACzCZ,KAAA,CAAKc,QAAQ,CAAC,EAAEF,KAAK,EAALA,KAAK,EAAED,IAAI,EAAE,KAAK,CAAC,CAAC,CAAC;IACvC,CAAC,CAAAX,KAAA;;IAEOe,aAAa,GAAG,YAAM;MAC5Bf,KAAA,CAAKc,QAAQ,CAAC;QACZF,KAAK,EAAE,MAAM;QACbD,IAAI,EAAE;MACR,CAAC,CAAC;IACJ,CAAC,QAAAX,KAAA,EAAAgB,cAAA,CAAAlB,iBAAA,EAAAC,gBAAA,MAAAkB,MAAA,GAAAnB,iBAAA,CAAAoB,SAAA,CAAAD,MAAA,CAtBME,MAAM,GAAb,SAAAA,OAAA,EAA6B,CAC3B,oBACEvB,KAAA,CAAAwB,aAAA,CAACvB,OAAO,IACNc,IAAI,EAAE,IAAI,CAACD,KAAK,CAACC,IAAK,EACtBU,IAAI,EAAE,MAAO,EACbT,KAAK,EAAE,IAAI,CAACF,KAAK,CAACE,KAAM,EACxBU,SAAS,EAAE,IAAI,CAACP,aAAc,EAC9BF,aAAa,EAAE,IAAI,CAACA,aAAc,EAClCU,KAAK,EAAE,GAAI,EACZ,CAAC,CAEN,CAAC,QAAAzB,iBAAA,GAjBoCF,KAAK,CAAC4B,SAAS","ignoreList":[]}

package/internal/ThemePlayground/FxInputPlayground.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { type JSX } from 'react';
 interface FxInputPlaygroundState {
     auto: boolean;
     value: string;

package/internal/ThemePlayground/HintPlayground/HintPlayground.js

@@ -3,7 +3,7 @@ import React from 'react';
 import { Gapped } from "../../../components/Gapped";
 import { Button } from "../../../components/Button";
 import { Hint } from "../../../components/Hint";
-import { Toast } from "../../../components/Toast";
+import { SingleToast } from "../../../components/SingleToast";
 export var HintPlayground = /*#__PURE__*/function (_React$Component) {
   function HintPlayground() {
     var _this;
@@ -12,13 +12,15 @@ export var HintPlayground = /*#__PURE__*/function (_React$Component) {
     }
     _this = _React$Component.call.apply(_React$Component, [this].concat(args)) || this;
     _this.pushToast = function () {
-      Toast.push('Текст сообщения');
+      SingleToast.push('Текст сообщения');
     };
     _this.pushToastWithAction = function () {
-      Toast.push('Текст сообщения', {
-        label: 'Ссылка',
-        handler: function handler() {
-          return null;
+      SingleToast.push('Текст сообщения', {
+        action: {
+          label: 'Ссылка',
+          handler: function handler() {
+            return null;
+          }
         }
       });
     };
@@ -27,7 +29,7 @@ export var HintPlayground = /*#__PURE__*/function (_React$Component) {
   _inheritsLoose(HintPlayground, _React$Component);
   var _proto = HintPlayground.prototype;
   _proto.render = function render() {
-    return /*#__PURE__*/React.createElement(Gapped, {
+    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(SingleToast, null), /*#__PURE__*/React.createElement(Gapped, {
       gap: 10
     }, /*#__PURE__*/React.createElement(Hint, {
       manual: true,
@@ -42,7 +44,7 @@ export var HintPlayground = /*#__PURE__*/function (_React$Component) {
       pos: 'right'
     }, /*#__PURE__*/React.createElement(Button, {
       onClick: this.pushToastWithAction
-    }, "Toast with link")));
+    }, "Toast with link"))));
   };
   return HintPlayground;
 }(React.Component);

package/internal/ThemePlayground/HintPlayground/HintPlayground.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","Gapped","Button","Hint","Toast","HintPlayground","_React$Component","_this","_len","arguments","length","args","Array","_key","call","apply","concat","pushToast","push","pushToastWithAction","label","handler","_inheritsLoose","_proto","prototype","render","createElement","gap","manual","opened","text","onClick","pos","Component"],"sources":["HintPlayground.tsx"],"sourcesContent":["import React from 'react';\n\nimport { Gapped } from '../../components/Gapped';\nimport { Button } from '../../components/Button';\nimport { Hint } from '../../components/Hint';\nimport { Toast } from '../../components/Toast';\n\nexport class HintPlayground extends React.Component {\n  public render() {\n    return (\n      <Gapped gap={10}>\n        <Hint manual opened text={'Показать тост'}>\n          <Button onClick={this.pushToast}>Toast</Button>\n        </Hint>\n        <Hint manual opened text={'Показать тост с ссылкой'} pos={'right'}>\n          <Button onClick={this.pushToastWithAction}>Toast with link</Button>\n        </Hint>\n      </Gapped>\n    );\n  }\n\n  private pushToast = () => {\n    Toast.push('Текст сообщения');\n  };\n\n  private pushToastWithAction = () => {\n    Toast.push('Текст сообщения', { label: 'Ссылка', handler: () => null });\n  };\n}\n"],"mappings":"sEAAA,OAAOA,KAAK,MAAM,OAAO;;AAEzB,SAASC,MAAM,QAAQ,yBAAyB;AAChD,SAASC,MAAM,QAAQ,yBAAyB;AAChD,SAASC,IAAI,QAAQ,uBAAuB;AAC5C,SAASC,KAAK,QAAQ,wBAAwB;;AAE9C,WAAaC,cAAc,0BAAAC,gBAAA,YAAAD,eAAA,OAAAE,KAAA,UAAAC,IAAA,GAAAC,SAAA,CAAAC,MAAA,EAAAC,IAAA,OAAAC,KAAA,CAAAJ,IAAA,GAAAK,IAAA,MAAAA,IAAA,GAAAL,IAAA,EAAAK,IAAA,KAAAF,IAAA,CAAAE,IAAA,IAAAJ,SAAA,CAAAI,IAAA,GAAAN,KAAA,GAAAD,gBAAA,CAAAQ,IAAA,CAAAC,KAAA,CAAAT,gBAAA,SAAAU,MAAA,CAAAL,IAAA,WAAAJ,KAAA;;;;;;;;;;;;;;IAcjBU,SAAS,GAAG,YAAM;MACxBb,KAAK,CAACc,IAAI,CAAC,iBAAiB,CAAC;IAC/B,CAAC,CAAAX,KAAA;;IAEOY,mBAAmB,GAAG,YAAM;MAClCf,KAAK,CAACc,IAAI,CAAC,iBAAiB,EAAE,EAAEE,KAAK,EAAE,QAAQ,EAAEC,OAAO,EAAE,SAAAA,QAAA,UAAM,IAAI,GAAC,CAAC,CAAC;IACzE,CAAC,QAAAd,KAAA,EAAAe,cAAA,CAAAjB,cAAA,EAAAC,gBAAA,MAAAiB,MAAA,GAAAlB,cAAA,CAAAmB,SAAA,CAAAD,MAAA,CAnBME,MAAM,GAAb,SAAAA,OAAA,EAAgB,CACd,oBACEzB,KAAA,CAAA0B,aAAA,CAACzB,MAAM,IAAC0B,GAAG,EAAE,EAAG,iBACd3B,KAAA,CAAA0B,aAAA,CAACvB,IAAI,IAACyB,MAAM,QAACC,MAAM,QAACC,IAAI,EAAE,eAAgB,iBACxC9B,KAAA,CAAA0B,aAAA,CAACxB,MAAM,IAAC6B,OAAO,EAAE,IAAI,CAACd,SAAU,IAAC,OAAa,CAC1C,CAAC,eACPjB,KAAA,CAAA0B,aAAA,CAACvB,IAAI,IAACyB,MAAM,QAACC,MAAM,QAACC,IAAI,EAAE,yBAA0B,EAACE,GAAG,EAAE,OAAQ,iBAChEhC,KAAA,CAAA0B,aAAA,CAACxB,MAAM,IAAC6B,OAAO,EAAE,IAAI,CAACZ,mBAAoB,IAAC,iBAAuB,CAC9D,CACA,CAAC,CAEb,CAAC,QAAAd,cAAA,GAZiCL,KAAK,CAACiC,SAAS","ignoreList":[]}
+{"version":3,"names":["React","Gapped","Button","Hint","SingleToast","HintPlayground","_React$Component","_this","_len","arguments","length","args","Array","_key","call","apply","concat","pushToast","push","pushToastWithAction","action","label","handler","_inheritsLoose","_proto","prototype","render","createElement","Fragment","gap","manual","opened","text","onClick","pos","Component"],"sources":["HintPlayground.tsx"],"sourcesContent":["import React from 'react';\n\nimport { Gapped } from '../../components/Gapped';\nimport { Button } from '../../components/Button';\nimport { Hint } from '../../components/Hint';\nimport { SingleToast } from '../../components/SingleToast';\n\nexport class HintPlayground extends React.Component {\n  public render() {\n    return (\n      <>\n        <SingleToast />\n        <Gapped gap={10}>\n          <Hint manual opened text={'Показать тост'}>\n            <Button onClick={this.pushToast}>Toast</Button>\n          </Hint>\n          <Hint manual opened text={'Показать тост с ссылкой'} pos={'right'}>\n            <Button onClick={this.pushToastWithAction}>Toast with link</Button>\n          </Hint>\n        </Gapped>\n      </>\n    );\n  }\n\n  private pushToast = () => {\n    SingleToast.push('Текст сообщения');\n  };\n\n  private pushToastWithAction = () => {\n    SingleToast.push('Текст сообщения', { action: { label: 'Ссылка', handler: () => null } });\n  };\n}\n"],"mappings":"sEAAA,OAAOA,KAAK,MAAM,OAAO;;AAEzB,SAASC,MAAM,QAAQ,yBAAyB;AAChD,SAASC,MAAM,QAAQ,yBAAyB;AAChD,SAASC,IAAI,QAAQ,uBAAuB;AAC5C,SAASC,WAAW,QAAQ,8BAA8B;;AAE1D,WAAaC,cAAc,0BAAAC,gBAAA,YAAAD,eAAA,OAAAE,KAAA,UAAAC,IAAA,GAAAC,SAAA,CAAAC,MAAA,EAAAC,IAAA,OAAAC,KAAA,CAAAJ,IAAA,GAAAK,IAAA,MAAAA,IAAA,GAAAL,IAAA,EAAAK,IAAA,KAAAF,IAAA,CAAAE,IAAA,IAAAJ,SAAA,CAAAI,IAAA,GAAAN,KAAA,GAAAD,gBAAA,CAAAQ,IAAA,CAAAC,KAAA,CAAAT,gBAAA,SAAAU,MAAA,CAAAL,IAAA,WAAAJ,KAAA;;;;;;;;;;;;;;;;;IAiBjBU,SAAS,GAAG,YAAM;MACxBb,WAAW,CAACc,IAAI,CAAC,iBAAiB,CAAC;IACrC,CAAC,CAAAX,KAAA;;IAEOY,mBAAmB,GAAG,YAAM;MAClCf,WAAW,CAACc,IAAI,CAAC,iBAAiB,EAAE,EAAEE,MAAM,EAAE,EAAEC,KAAK,EAAE,QAAQ,EAAEC,OAAO,EAAE,SAAAA,QAAA,UAAM,IAAI,GAAC,CAAC,CAAC,CAAC,CAAC;IAC3F,CAAC,QAAAf,KAAA,EAAAgB,cAAA,CAAAlB,cAAA,EAAAC,gBAAA,MAAAkB,MAAA,GAAAnB,cAAA,CAAAoB,SAAA,CAAAD,MAAA,CAtBME,MAAM,GAAb,SAAAA,OAAA,EAAgB,CACd,oBACE1B,KAAA,CAAA2B,aAAA,CAAA3B,KAAA,CAAA4B,QAAA,qBACE5B,KAAA,CAAA2B,aAAA,CAACvB,WAAW,MAAE,CAAC,eACfJ,KAAA,CAAA2B,aAAA,CAAC1B,MAAM,IAAC4B,GAAG,EAAE,EAAG,iBACd7B,KAAA,CAAA2B,aAAA,CAACxB,IAAI,IAAC2B,MAAM,QAACC,MAAM,QAACC,IAAI,EAAE,eAAgB,iBACxChC,KAAA,CAAA2B,aAAA,CAACzB,MAAM,IAAC+B,OAAO,EAAE,IAAI,CAAChB,SAAU,IAAC,OAAa,CAC1C,CAAC,eACPjB,KAAA,CAAA2B,aAAA,CAACxB,IAAI,IAAC2B,MAAM,QAACC,MAAM,QAACC,IAAI,EAAE,yBAA0B,EAACE,GAAG,EAAE,OAAQ,iBAChElC,KAAA,CAAA2B,aAAA,CAACzB,MAAM,IAAC+B,OAAO,EAAE,IAAI,CAACd,mBAAoB,IAAC,iBAAuB,CAC9D,CACA,CACR,CAAC,CAEP,CAAC,QAAAd,cAAA,GAfiCL,KAAK,CAACmC,SAAS","ignoreList":[]}