@skbkontur/react-ui 0.0.0-444dd4e7b3 → 0.0.0-48840c3b9c

package/cjs/components/SidePage/SidePageHeader.js

@@ -1,9 +1,9 @@
-"use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");exports.__esModule = true;exports.SidePageHeaderDataTids = exports.SidePageHeader = void 0;var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));var _inheritsLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/inheritsLoose"));var _react = _interopRequireDefault(require("react"));
+"use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;exports.__esModule = true;exports.SidePageHeaderDataTids = exports.SidePageHeader = void 0;var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));var _inheritsLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/inheritsLoose"));var _react = _interopRequireDefault(require("react"));
 var _globalObject = require("@skbkontur/global-object");
 
+
 var _Sticky = require("../Sticky");
 var _utils = require("../../lib/utils");
-var _ThemeContext = require("../../lib/theming/ThemeContext");
 
 var _CommonWrapper = require("../../internal/CommonWrapper");
 var _Emotion = require("../../lib/theming/Emotion");
@@ -12,10 +12,11 @@ var _rootNode = require("../../lib/rootNode");
 var _getDOMRect = require("../../lib/dom/getDOMRect");
 var _ModalSeparator = require("../Modal/ModalSeparator");
 var _ThemeHelpers = require("../../lib/theming/ThemeHelpers");
+var _ThemeContext = require("../../lib/theming/ThemeContext");
 
-var _SidePage = require("./SidePage.styles");
 var _SidePageContext = require("./SidePageContext");
-var _SidePageCloseButton = require("./SidePageCloseButton");var _class, _class2, _temp;
+var _SidePageCloseButton = require("./SidePageCloseButton");
+var _SidePage = require("./SidePage.styles");var _class, _class2, _temp;
 
 
 
@@ -43,6 +44,7 @@ SidePageHeader = (0, _decorator.responsiveLayout)(_class = (0, _rootNode.rootNod
 
 
 
+
     context = _this.context;_this.
 
 
@@ -56,6 +58,7 @@ SidePageHeader = (0, _decorator.responsiveLayout)(_class = (0, _rootNode.rootNod
 
 
 
+
     wrapper = null;_this.
     sticky = null;_this.
     lastRegularHeight = 0;_this.
@@ -141,19 +144,29 @@ SidePageHeader = (0, _decorator.responsiveLayout)(_class = (0, _rootNode.rootNod
 
 
 
-    renderHeader = function (fixed) {var _cx, _cx2;if (fixed === void 0) {fixed = false;}
+
+
+
+
+
+
+
+
+    renderHeader = function (fixed) {var _this$emotion$cx, _this$emotion$cx2;if (fixed === void 0) {fixed = false;}
+      var styles = (0, _SidePage.getStyles)(_this.emotion);
+
       return /*#__PURE__*/(
         _react.default.createElement("div", {
-          className: (0, _Emotion.cx)(_SidePage.styles.header(_this.theme), (_cx = {}, _cx[
-          _SidePage.styles.headerFixed(_this.theme)] = fixed, _cx[
-          _SidePage.styles.mobileHeader(_this.theme)] = _this.isMobileLayout, _cx)) },
+          className: _this.emotion.cx(styles.header(_this.theme), (_this$emotion$cx = {}, _this$emotion$cx[
+          styles.headerFixed(_this.theme)] = fixed, _this$emotion$cx[
+          styles.mobileHeader(_this.theme)] = _this.isMobileLayout, _this$emotion$cx)) },
 
 
         _this.renderClose(fixed), /*#__PURE__*/
         _react.default.createElement("div", {
-          className: (0, _Emotion.cx)(_SidePage.styles.title(_this.theme), (_cx2 = {}, _cx2[
-          _SidePage.styles.mobileTitle(_this.theme)] = _this.isMobileLayout, _cx2[
-          _SidePage.styles.titleFixed()] = fixed, _cx2)) },
+          className: _this.emotion.cx(styles.title(_this.theme), (_this$emotion$cx2 = {}, _this$emotion$cx2[
+          styles.mobileTitle(_this.theme)] = _this.isMobileLayout, _this$emotion$cx2[
+          styles.titleFixed()] = fixed, _this$emotion$cx2)) },
 
 
         (0, _utils.isFunction)(_this.props.children) ? _this.props.children(fixed) : _this.props.children)));
@@ -172,13 +185,15 @@ SidePageHeader = (0, _decorator.responsiveLayout)(_class = (0, _rootNode.rootNod
 
     };_this.
 
-    renderClose = function (fixed) {var _cx3;
+    renderClose = function (fixed) {var _this$emotion$cx3;
       var stickyOffset = parseInt(_this.theme.sidePageHeaderStickyOffset);
+      var styles = (0, _SidePage.getStyles)(_this.emotion);
+
       return /*#__PURE__*/(
         _react.default.createElement("div", {
-          className: (0, _Emotion.cx)(_SidePage.styles.wrapperClose(_this.theme), (_cx3 = {}, _cx3[
-          _SidePage.styles.wrapperCloseFixed(_this.theme)] = fixed, _cx3[
-          _SidePage.styles.mobileWrapperClose(_this.theme)] = _this.isMobileLayout, _cx3)) },
+          className: _this.emotion.cx(styles.wrapperClose(_this.theme), (_this$emotion$cx3 = {}, _this$emotion$cx3[
+          styles.wrapperCloseFixed(_this.theme)] = fixed, _this$emotion$cx3[
+          styles.mobileWrapperClose(_this.theme)] = _this.isMobileLayout, _this$emotion$cx3)) },
 
 
         _this.isMobileLayout ?
@@ -206,4 +221,4 @@ SidePageHeader = (0, _decorator.responsiveLayout)(_class = (0, _rootNode.rootNod
 
     stickyRef = function (el) {
       _this.sticky = el;
-    };return _this;}var _proto = SidePageHeader.prototype;_proto.render = function render() {var _this2 = this;return /*#__PURE__*/_react.default.createElement(_ThemeContext.ThemeContext.Consumer, null, function (theme) {_this2.theme = theme;return _this2.renderMain();});};_proto.getStickyProp = function getStickyProp() {if (typeof this.props.sticky !== 'undefined') {return this.props.sticky;}if (this.isMobileLayout) {return false;}return true;};_proto.renderMain = function renderMain() {var isReadyToFix = this.state.isReadyToFix;var isStickyDesktop = !this.isMobileLayout && this.getStickyProp() && isReadyToFix;var isStickyMobile = this.isMobileLayout && this.getStickyProp();var header = (0, _ThemeHelpers.isTheme2022)(this.theme) ? this.renderHeader2022 : this.renderHeader;return /*#__PURE__*/_react.default.createElement(_CommonWrapper.CommonWrapper, (0, _extends2.default)({ rootNodeRef: this.setRootNode }, this.props), /*#__PURE__*/_react.default.createElement("div", { "data-tid": SidePageHeaderDataTids.root, ref: this.wrapperRef, className: _SidePage.styles.headerWrapper() }, isStickyDesktop || isStickyMobile ? /*#__PURE__*/_react.default.createElement(_Sticky.Sticky, { ref: this.stickyRef, side: "top" }, header) : header()));};(0, _createClass2.default)(SidePageHeader, [{ key: "regularHeight", get: function get() {var isReadyToFix = this.state.isReadyToFix;if (!this.wrapper) {return 0;}if (!isReadyToFix) {this.lastRegularHeight = (0, _getDOMRect.getDOMRect)(this.wrapper).height;}return this.lastRegularHeight;} }, { key: "fixedHeaderHeight", get: function get() {var theme = this.theme;return parseInt(theme.sidePageHeaderFixedLineHeight) + parseInt(theme.sidePageHeaderFixedPaddingY) * 2;} }]);return SidePageHeader;}(_react.default.Component), _class2.__KONTUR_REACT_UI__ = 'SidePageHeader', _class2.contextType = _SidePageContext.SidePageContext, _class2.defaultProps = { hasSeparator: false }, _temp)) || _class) || _class;exports.SidePageHeader = SidePageHeader;
+    };return _this;}var _proto = SidePageHeader.prototype;_proto.render = function render() {var _this2 = this;return /*#__PURE__*/_react.default.createElement(_Emotion.EmotionConsumer, null, function (emotion) {_this2.emotion = emotion;return /*#__PURE__*/_react.default.createElement(_ThemeContext.ThemeContext.Consumer, null, function (theme) {_this2.theme = theme;return _this2.renderMain();});});};_proto.getStickyProp = function getStickyProp() {if (typeof this.props.sticky !== 'undefined') {return this.props.sticky;}if (this.isMobileLayout) {return false;}return true;};_proto.renderMain = function renderMain() {var isReadyToFix = this.state.isReadyToFix;var isStickyDesktop = !this.isMobileLayout && this.getStickyProp() && isReadyToFix;var isStickyMobile = this.isMobileLayout && this.getStickyProp();var header = (0, _ThemeHelpers.isTheme2022)(this.theme) ? this.renderHeader2022 : this.renderHeader;var styles = (0, _SidePage.getStyles)(this.emotion);return /*#__PURE__*/_react.default.createElement(_CommonWrapper.CommonWrapper, (0, _extends2.default)({ rootNodeRef: this.setRootNode }, this.props), /*#__PURE__*/_react.default.createElement("div", { "data-tid": SidePageHeaderDataTids.root, ref: this.wrapperRef, className: styles.headerWrapper() }, isStickyDesktop || isStickyMobile ? /*#__PURE__*/_react.default.createElement(_Sticky.Sticky, { ref: this.stickyRef, side: "top" }, header) : header()));};(0, _createClass2.default)(SidePageHeader, [{ key: "regularHeight", get: function get() {var isReadyToFix = this.state.isReadyToFix;if (!this.wrapper) {return 0;}if (!isReadyToFix) {this.lastRegularHeight = (0, _getDOMRect.getDOMRect)(this.wrapper).height;}return this.lastRegularHeight;} }, { key: "fixedHeaderHeight", get: function get() {var theme = this.theme;return parseInt(theme.sidePageHeaderFixedLineHeight) + parseInt(theme.sidePageHeaderFixedPaddingY) * 2;} }]);return SidePageHeader;}(_react.default.Component), _class2.__KONTUR_REACT_UI__ = 'SidePageHeader', _class2.displayName = 'SidePageHeader', _class2.contextType = _SidePageContext.SidePageContext, _class2.defaultProps = { hasSeparator: false }, _temp)) || _class) || _class;exports.SidePageHeader = SidePageHeader;

package/cjs/components/SidePage/SidePageHeader.js.map

@@ -1 +1 @@
-{"version":3,"sources":["SidePageHeader.tsx"],"names":["SidePageHeaderDataTids","root","close","SidePageHeader","responsiveLayout","rootNode","context","state","isReadyToFix","wrapper","sticky","lastRegularHeight","closeIcon","componentDidMount","globalObject","addEventListener","update","setHasHeader","headerRef","componentWillUnmount","removeEventListener","reflow","updateReadyToFix","renderHeader","fixed","styles","header","theme","headerFixed","mobileHeader","isMobileLayout","renderClose","title","mobileTitle","titleFixed","props","children","renderHeader2022","isDisplayed","hasSeparator","stickyOffset","parseInt","sidePageHeaderStickyOffset","wrapperClose","wrapperCloseFixed","mobileWrapperClose","wrapperScrolledUp","top","regularHeight","fixedHeaderHeight","setState","wrapperRef","el","stickyRef","render","renderMain","getStickyProp","isStickyDesktop","isStickyMobile","setRootNode","headerWrapper","height","sidePageHeaderFixedLineHeight","sidePageHeaderFixedPaddingY","React","Component","__KONTUR_REACT_UI__","contextType","SidePageContext","defaultProps"],"mappings":"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","sourcesContent":["import React from 'react';\nimport { globalObject } from '@skbkontur/global-object';\n\nimport { Sticky } from '../Sticky';\nimport { isFunction } from '../../lib/utils';\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\nimport { Theme } from '../../lib/theming/Theme';\nimport { CommonProps, CommonWrapper } from '../../internal/CommonWrapper';\nimport { cx } from '../../lib/theming/Emotion';\nimport { responsiveLayout } from '../ResponsiveLayout/decorator';\nimport { rootNode, TSetRootNode } from '../../lib/rootNode';\nimport { getDOMRect } from '../../lib/dom/getDOMRect';\nimport { ModalSeparator } from '../Modal/ModalSeparator';\nimport { isTheme2022 } from '../../lib/theming/ThemeHelpers';\n\nimport { styles } from './SidePage.styles';\nimport { SidePageContext, SidePageContextType } from './SidePageContext';\nimport { SidePageCloseButton } from './SidePageCloseButton';\n\nexport interface SidePageHeaderProps extends Omit<CommonProps, 'children'> {\n  children?: React.ReactNode | ((fixed: boolean) => React.ReactNode);\n  sticky?: boolean;\n  hasSeparator?: boolean;\n}\n\nexport interface SidePageHeaderState {\n  isReadyToFix: boolean;\n}\n\nexport const SidePageHeaderDataTids = {\n  root: 'SidePageHeader__root',\n  close: 'SidePage__close',\n} as const;\n\n/**\n * Шапка сайдпейджа\n *\n * @visibleName SidePage.Header\n */\n@responsiveLayout\n@rootNode\nexport class SidePageHeader extends React.Component<SidePageHeaderProps, SidePageHeaderState> {\n  public static __KONTUR_REACT_UI__ = 'SidePageHeader';\n\n  public static contextType = SidePageContext;\n  public context: SidePageContextType = this.context;\n\n  private isMobileLayout!: boolean;\n\n  public state: SidePageHeaderState = {\n    isReadyToFix: false,\n  };\n\n  public static defaultProps: Partial<SidePageHeaderProps> = {\n    hasSeparator: false,\n  };\n\n  private theme!: Theme;\n  private wrapper: HTMLElement | null = null;\n  private sticky: Sticky | null = null;\n  private lastRegularHeight = 0;\n  private setRootNode!: TSetRootNode;\n  private closeIcon = (<SidePageCloseButton />);\n\n  public get regularHeight(): number {\n    const { isReadyToFix } = this.state;\n    if (!this.wrapper) {\n      return 0;\n    }\n    if (!isReadyToFix) {\n      this.lastRegularHeight = getDOMRect(this.wrapper).height;\n    }\n    return this.lastRegularHeight;\n  }\n\n  public get fixedHeaderHeight(): number {\n    const { theme } = this;\n    return parseInt(theme.sidePageHeaderFixedLineHeight) + parseInt(theme.sidePageHeaderFixedPaddingY) * 2;\n  }\n\n  public componentDidMount = () => {\n    globalObject.addEventListener?.('scroll', this.update, true);\n    this.context.setHasHeader?.();\n    this.context.headerRef(this);\n  };\n\n  public componentWillUnmount = () => {\n    globalObject.removeEventListener?.('scroll', this.update, true);\n    this.context.setHasHeader?.(false);\n    this.context.headerRef(null);\n  };\n\n  public update = () => {\n    this.sticky?.reflow();\n    this.updateReadyToFix();\n  };\n\n  public render(): JSX.Element {\n    return (\n      <ThemeContext.Consumer>\n        {(theme) => {\n          this.theme = theme;\n          return this.renderMain();\n        }}\n      </ThemeContext.Consumer>\n    );\n  }\n\n  public getStickyProp() {\n    if (typeof this.props.sticky !== 'undefined') {\n      return this.props.sticky;\n    }\n\n    if (this.isMobileLayout) {\n      return false;\n    }\n\n    return true;\n  }\n\n  private renderMain() {\n    const { isReadyToFix } = this.state;\n\n    const isStickyDesktop = !this.isMobileLayout && this.getStickyProp() && isReadyToFix;\n    const isStickyMobile = this.isMobileLayout && this.getStickyProp();\n\n    const header = isTheme2022(this.theme) ? this.renderHeader2022 : this.renderHeader;\n\n    return (\n      <CommonWrapper rootNodeRef={this.setRootNode} {...this.props}>\n        <div data-tid={SidePageHeaderDataTids.root} ref={this.wrapperRef} className={styles.headerWrapper()}>\n          {isStickyDesktop || isStickyMobile ? (\n            <Sticky ref={this.stickyRef} side=\"top\">\n              {header}\n            </Sticky>\n          ) : (\n            header()\n          )}\n        </div>\n      </CommonWrapper>\n    );\n  }\n\n  private renderHeader = (fixed = false) => {\n    return (\n      <div\n        className={cx(styles.header(this.theme), {\n          [styles.headerFixed(this.theme)]: fixed,\n          [styles.mobileHeader(this.theme)]: this.isMobileLayout,\n        })}\n      >\n        {this.renderClose(fixed)}\n        <div\n          className={cx(styles.title(this.theme), {\n            [styles.mobileTitle(this.theme)]: this.isMobileLayout,\n            [styles.titleFixed()]: fixed,\n          })}\n        >\n          {isFunction(this.props.children) ? this.props.children(fixed) : this.props.children}\n        </div>\n      </div>\n    );\n  };\n\n  private renderHeader2022 = (fixed = false) => {\n    const isDisplayed = this.props.hasSeparator || fixed;\n    return (\n      <div>\n        {this.renderHeader(fixed)}\n        {isDisplayed && <ModalSeparator fixed={fixed} />}\n      </div>\n    );\n  };\n\n  private renderClose = (fixed: boolean) => {\n    const stickyOffset = parseInt(this.theme.sidePageHeaderStickyOffset);\n    return (\n      <div\n        className={cx(styles.wrapperClose(this.theme), {\n          [styles.wrapperCloseFixed(this.theme)]: fixed,\n          [styles.mobileWrapperClose(this.theme)]: this.isMobileLayout,\n        })}\n      >\n        {this.isMobileLayout ? (\n          this.closeIcon\n        ) : (\n          <Sticky side=\"top\" offset={stickyOffset}>\n            {this.closeIcon}\n          </Sticky>\n        )}\n      </div>\n    );\n  };\n\n  private updateReadyToFix = () => {\n    if (this.wrapper) {\n      const wrapperScrolledUp = getDOMRect(this.wrapper).top;\n      const isReadyToFix = this.regularHeight + wrapperScrolledUp <= this.fixedHeaderHeight;\n      this.setState((state) => (state.isReadyToFix !== isReadyToFix ? { ...state, isReadyToFix } : state));\n    }\n  };\n\n  private wrapperRef = (el: HTMLElement | null) => {\n    this.wrapper = el;\n  };\n\n  private stickyRef = (el: Sticky | null) => {\n    this.sticky = el;\n  };\n}\n"]}
+{"version":3,"sources":["SidePageHeader.tsx"],"names":["SidePageHeaderDataTids","root","close","SidePageHeader","responsiveLayout","rootNode","context","state","isReadyToFix","wrapper","sticky","lastRegularHeight","closeIcon","componentDidMount","globalObject","addEventListener","update","setHasHeader","headerRef","componentWillUnmount","removeEventListener","reflow","updateReadyToFix","renderHeader","fixed","styles","emotion","cx","header","theme","headerFixed","mobileHeader","isMobileLayout","renderClose","title","mobileTitle","titleFixed","props","children","renderHeader2022","isDisplayed","hasSeparator","stickyOffset","parseInt","sidePageHeaderStickyOffset","wrapperClose","wrapperCloseFixed","mobileWrapperClose","wrapperScrolledUp","top","regularHeight","fixedHeaderHeight","setState","wrapperRef","el","stickyRef","render","renderMain","getStickyProp","isStickyDesktop","isStickyMobile","setRootNode","headerWrapper","height","sidePageHeaderFixedLineHeight","sidePageHeaderFixedPaddingY","React","Component","__KONTUR_REACT_UI__","displayName","contextType","SidePageContext","defaultProps"],"mappings":"6jBAAA;AACA;;;AAGA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA,6C;;;;;;;;;;;;AAYO,IAAMA,sBAAsB,GAAG;AACpCC,EAAAA,IAAI,EAAE,sBAD8B;AAEpCC,EAAAA,KAAK,EAAE,iBAF6B,EAA/B;;;AAKP;AACA;AACA;AACA;AACA,G;;;AAGaC,c,OAFZC,2B,eACAC,kB;;;;;AAMQC,IAAAA,O,GAA+B,MAAKA,O;;;;AAIpCC,IAAAA,K,GAA6B;AAClCC,MAAAA,YAAY,EAAE,KADoB,E;;;;;;;;;AAU5BC,IAAAA,O,GAA8B,I;AAC9BC,IAAAA,M,GAAwB,I;AACxBC,IAAAA,iB,GAAoB,C;;AAEpBC,IAAAA,S,gBAAa,6BAAC,wCAAD,O;;;;;;;;;;;;;;;;;;AAkBdC,IAAAA,iB,GAAoB,YAAM;AAC/BC,iCAAaC,gBAAb,+CAAaA,gBAAb,CAAgC,QAAhC,EAA0C,MAAKC,MAA/C,EAAuD,IAAvD;AACA,YAAKV,OAAL,CAAaW,YAAb,0BAAKX,OAAL,CAAaW,YAAb;AACA,YAAKX,OAAL,CAAaY,SAAb;AACD,K;;AAEMC,IAAAA,oB,GAAuB,YAAM;AAClCL,iCAAaM,mBAAb,+CAAaA,mBAAb,CAAmC,QAAnC,EAA6C,MAAKJ,MAAlD,EAA0D,IAA1D;AACA,YAAKV,OAAL,CAAaW,YAAb,0BAAKX,OAAL,CAAaW,YAAb,CAA4B,KAA5B;AACA,YAAKX,OAAL,CAAaY,SAAb,CAAuB,IAAvB;AACD,K;;AAEMF,IAAAA,M,GAAS,YAAM;AACpB,4BAAKN,MAAL,kCAAaW,MAAb;AACA,YAAKC,gBAAL;AACD,K;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAwDOC,IAAAA,Y,GAAe,UAACC,KAAD,EAAmB,6CAAlBA,KAAkB,cAAlBA,KAAkB,GAAV,KAAU;AACxC,UAAMC,MAAM,GAAG,yBAAU,MAAKC,OAAf,CAAf;;AAEA;AACE;AACE,UAAA,SAAS,EAAE,MAAKA,OAAL,CAAaC,EAAb,CAAgBF,MAAM,CAACG,MAAP,CAAc,MAAKC,KAAnB,CAAhB;AACRJ,UAAAA,MAAM,CAACK,WAAP,CAAmB,MAAKD,KAAxB,CADQ,IACyBL,KADzB;AAERC,UAAAA,MAAM,CAACM,YAAP,CAAoB,MAAKF,KAAzB,CAFQ,IAE0B,MAAKG,cAF/B,oBADb;;;AAMG,cAAKC,WAAL,CAAiBT,KAAjB,CANH;AAOE;AACE,UAAA,SAAS,EAAE,MAAKE,OAAL,CAAaC,EAAb,CAAgBF,MAAM,CAACS,KAAP,CAAa,MAAKL,KAAlB,CAAhB;AACRJ,UAAAA,MAAM,CAACU,WAAP,CAAmB,MAAKN,KAAxB,CADQ,IACyB,MAAKG,cAD9B;AAERP,UAAAA,MAAM,CAACW,UAAP,EAFQ,IAEcZ,KAFd,qBADb;;;AAMG,+BAAW,MAAKa,KAAL,CAAWC,QAAtB,IAAkC,MAAKD,KAAL,CAAWC,QAAX,CAAoBd,KAApB,CAAlC,GAA+D,MAAKa,KAAL,CAAWC,QAN7E,CAPF,CADF;;;;AAkBD,K;;AAEOC,IAAAA,gB,GAAmB,UAACf,KAAD,EAAmB,KAAlBA,KAAkB,cAAlBA,KAAkB,GAAV,KAAU;AAC5C,UAAMgB,WAAW,GAAG,MAAKH,KAAL,CAAWI,YAAX,IAA2BjB,KAA/C;AACA;AACE;AACG,cAAKD,YAAL,CAAkBC,KAAlB,CADH;AAEGgB,QAAAA,WAAW,iBAAI,6BAAC,8BAAD,IAAgB,KAAK,EAAEhB,KAAvB,GAFlB,CADF;;;AAMD,K;;AAEOS,IAAAA,W,GAAc,UAACT,KAAD,EAAoB;AACxC,UAAMkB,YAAY,GAAGC,QAAQ,CAAC,MAAKd,KAAL,CAAWe,0BAAZ,CAA7B;AACA,UAAMnB,MAAM,GAAG,yBAAU,MAAKC,OAAf,CAAf;;AAEA;AACE;AACE,UAAA,SAAS,EAAE,MAAKA,OAAL,CAAaC,EAAb,CAAgBF,MAAM,CAACoB,YAAP,CAAoB,MAAKhB,KAAzB,CAAhB;AACRJ,UAAAA,MAAM,CAACqB,iBAAP,CAAyB,MAAKjB,KAA9B,CADQ,IAC+BL,KAD/B;AAERC,UAAAA,MAAM,CAACsB,kBAAP,CAA0B,MAAKlB,KAA/B,CAFQ,IAEgC,MAAKG,cAFrC,qBADb;;;AAMG,cAAKA,cAAL;AACC,cAAKpB,SADN;;AAGC,qCAAC,cAAD,IAAQ,IAAI,EAAC,KAAb,EAAmB,MAAM,EAAE8B,YAA3B;AACG,cAAK9B,SADR,CATJ,CADF;;;;;AAgBD,K;;AAEOU,IAAAA,gB,GAAmB,YAAM;AAC/B,UAAI,MAAKb,OAAT,EAAkB;AAChB,YAAMuC,iBAAiB,GAAG,4BAAW,MAAKvC,OAAhB,EAAyBwC,GAAnD;AACA,YAAMzC,YAAY,GAAG,MAAK0C,aAAL,GAAqBF,iBAArB,IAA0C,MAAKG,iBAApE;AACA,cAAKC,QAAL,CAAc,UAAC7C,KAAD,UAAYA,KAAK,CAACC,YAAN,KAAuBA,YAAvB,8BAA2CD,KAA3C,IAAkDC,YAAY,EAAZA,YAAlD,MAAmED,KAA/E,EAAd;AACD;AACF,K;;AAEO8C,IAAAA,U,GAAa,UAACC,EAAD,EAA4B;AAC/C,YAAK7C,OAAL,GAAe6C,EAAf;AACD,K;;AAEOC,IAAAA,S,GAAY,UAACD,EAAD,EAAuB;AACzC,YAAK5C,MAAL,GAAc4C,EAAd;AACD,K,4DA3HME,M,GAAP,kBAA6B,mBAC3B,oBACE,6BAAC,wBAAD,QACG,UAAC9B,OAAD,EAAa,CACZ,MAAI,CAACA,OAAL,GAAeA,OAAf,CACA,oBACE,6BAAC,0BAAD,CAAc,QAAd,QACG,UAACG,KAAD,EAAW,CACV,MAAI,CAACA,KAAL,GAAaA,KAAb,CACA,OAAO,MAAI,CAAC4B,UAAL,EAAP,CACD,CAJH,CADF,CAQD,CAXH,CADF,CAeD,C,QAEMC,a,GAAP,yBAAuB,CACrB,IAAI,OAAO,KAAKrB,KAAL,CAAW3B,MAAlB,KAA6B,WAAjC,EAA8C,CAC5C,OAAO,KAAK2B,KAAL,CAAW3B,MAAlB,CACD,CAED,IAAI,KAAKsB,cAAT,EAAyB,CACvB,OAAO,KAAP,CACD,CAED,OAAO,IAAP,CACD,C,QAEOyB,U,GAAR,sBAAqB,CACnB,IAAQjD,YAAR,GAAyB,KAAKD,KAA9B,CAAQC,YAAR,CAEA,IAAMmD,eAAe,GAAG,CAAC,KAAK3B,cAAN,IAAwB,KAAK0B,aAAL,EAAxB,IAAgDlD,YAAxE,CACA,IAAMoD,cAAc,GAAG,KAAK5B,cAAL,IAAuB,KAAK0B,aAAL,EAA9C,CAEA,IAAM9B,MAAM,GAAG,+BAAY,KAAKC,KAAjB,IAA0B,KAAKU,gBAA/B,GAAkD,KAAKhB,YAAtE,CACA,IAAME,MAAM,GAAG,yBAAU,KAAKC,OAAf,CAAf,CAEA,oBACE,6BAAC,4BAAD,2BAAe,WAAW,EAAE,KAAKmC,WAAjC,IAAkD,KAAKxB,KAAvD,gBACE,sCAAK,YAAUrC,sBAAsB,CAACC,IAAtC,EAA4C,GAAG,EAAE,KAAKoD,UAAtD,EAAkE,SAAS,EAAE5B,MAAM,CAACqC,aAAP,EAA7E,IACGH,eAAe,IAAIC,cAAnB,gBACC,6BAAC,cAAD,IAAQ,GAAG,EAAE,KAAKL,SAAlB,EAA6B,IAAI,EAAC,KAAlC,IACG3B,MADH,CADD,GAKCA,MAAM,EANV,CADF,CADF,CAaD,C,0EArFD,eAAmC,CACjC,IAAQpB,YAAR,GAAyB,KAAKD,KAA9B,CAAQC,YAAR,CACA,IAAI,CAAC,KAAKC,OAAV,EAAmB,CACjB,OAAO,CAAP,CACD,CACD,IAAI,CAACD,YAAL,EAAmB,CACjB,KAAKG,iBAAL,GAAyB,4BAAW,KAAKF,OAAhB,EAAyBsD,MAAlD,CACD,CACD,OAAO,KAAKpD,iBAAZ,CACD,C,qCAED,eAAuC,CACrC,IAAQkB,KAAR,GAAkB,IAAlB,CAAQA,KAAR,CACA,OAAOc,QAAQ,CAACd,KAAK,CAACmC,6BAAP,CAAR,GAAgDrB,QAAQ,CAACd,KAAK,CAACoC,2BAAP,CAAR,GAA8C,CAArG,CACD,C,6BAvCiCC,eAAMC,S,WAC1BC,mB,GAAsB,gB,UACtBC,W,GAAc,gB,UAEdC,W,GAAcC,gC,UASdC,Y,GAA6C,EACzD/B,YAAY,EAAE,KAD2C,E","sourcesContent":["import React from 'react';\nimport { globalObject } from '@skbkontur/global-object';\nimport type { Emotion } from '@emotion/css/create-instance';\n\nimport { Sticky } from '../Sticky';\nimport { isFunction } from '../../lib/utils';\nimport { Theme } from '../../lib/theming/Theme';\nimport { CommonProps, CommonWrapper } from '../../internal/CommonWrapper';\nimport { EmotionConsumer } from '../../lib/theming/Emotion';\nimport { responsiveLayout } from '../ResponsiveLayout/decorator';\nimport { rootNode, TSetRootNode } from '../../lib/rootNode';\nimport { getDOMRect } from '../../lib/dom/getDOMRect';\nimport { ModalSeparator } from '../Modal/ModalSeparator';\nimport { isTheme2022 } from '../../lib/theming/ThemeHelpers';\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\n\nimport { SidePageContext, SidePageContextType } from './SidePageContext';\nimport { SidePageCloseButton } from './SidePageCloseButton';\nimport { getStyles } from './SidePage.styles';\n\nexport interface SidePageHeaderProps extends Omit<CommonProps, 'children'> {\n  children?: React.ReactNode | ((fixed: boolean) => React.ReactNode);\n  sticky?: boolean;\n  hasSeparator?: boolean;\n}\n\nexport interface SidePageHeaderState {\n  isReadyToFix: boolean;\n}\n\nexport const SidePageHeaderDataTids = {\n  root: 'SidePageHeader__root',\n  close: 'SidePage__close',\n} as const;\n\n/**\n * Шапка сайдпейджа\n *\n * @visibleName SidePage.Header\n */\n@responsiveLayout\n@rootNode\nexport class SidePageHeader extends React.Component<SidePageHeaderProps, SidePageHeaderState> {\n  public static __KONTUR_REACT_UI__ = 'SidePageHeader';\n  public static displayName = 'SidePageHeader';\n\n  public static contextType = SidePageContext;\n  public context: SidePageContextType = this.context;\n\n  private isMobileLayout!: boolean;\n\n  public state: SidePageHeaderState = {\n    isReadyToFix: false,\n  };\n\n  public static defaultProps: Partial<SidePageHeaderProps> = {\n    hasSeparator: false,\n  };\n\n  private theme!: Theme;\n  private emotion!: Emotion;\n  private wrapper: HTMLElement | null = null;\n  private sticky: Sticky | null = null;\n  private lastRegularHeight = 0;\n  private setRootNode!: TSetRootNode;\n  private closeIcon = (<SidePageCloseButton />);\n\n  public get regularHeight(): number {\n    const { isReadyToFix } = this.state;\n    if (!this.wrapper) {\n      return 0;\n    }\n    if (!isReadyToFix) {\n      this.lastRegularHeight = getDOMRect(this.wrapper).height;\n    }\n    return this.lastRegularHeight;\n  }\n\n  public get fixedHeaderHeight(): number {\n    const { theme } = this;\n    return parseInt(theme.sidePageHeaderFixedLineHeight) + parseInt(theme.sidePageHeaderFixedPaddingY) * 2;\n  }\n\n  public componentDidMount = () => {\n    globalObject.addEventListener?.('scroll', this.update, true);\n    this.context.setHasHeader?.();\n    this.context.headerRef(this);\n  };\n\n  public componentWillUnmount = () => {\n    globalObject.removeEventListener?.('scroll', this.update, true);\n    this.context.setHasHeader?.(false);\n    this.context.headerRef(null);\n  };\n\n  public update = () => {\n    this.sticky?.reflow();\n    this.updateReadyToFix();\n  };\n\n  public render(): JSX.Element {\n    return (\n      <EmotionConsumer>\n        {(emotion) => {\n          this.emotion = emotion;\n          return (\n            <ThemeContext.Consumer>\n              {(theme) => {\n                this.theme = theme;\n                return this.renderMain();\n              }}\n            </ThemeContext.Consumer>\n          );\n        }}\n      </EmotionConsumer>\n    );\n  }\n\n  public getStickyProp() {\n    if (typeof this.props.sticky !== 'undefined') {\n      return this.props.sticky;\n    }\n\n    if (this.isMobileLayout) {\n      return false;\n    }\n\n    return true;\n  }\n\n  private renderMain() {\n    const { isReadyToFix } = this.state;\n\n    const isStickyDesktop = !this.isMobileLayout && this.getStickyProp() && isReadyToFix;\n    const isStickyMobile = this.isMobileLayout && this.getStickyProp();\n\n    const header = isTheme2022(this.theme) ? this.renderHeader2022 : this.renderHeader;\n    const styles = getStyles(this.emotion);\n\n    return (\n      <CommonWrapper rootNodeRef={this.setRootNode} {...this.props}>\n        <div data-tid={SidePageHeaderDataTids.root} ref={this.wrapperRef} className={styles.headerWrapper()}>\n          {isStickyDesktop || isStickyMobile ? (\n            <Sticky ref={this.stickyRef} side=\"top\">\n              {header}\n            </Sticky>\n          ) : (\n            header()\n          )}\n        </div>\n      </CommonWrapper>\n    );\n  }\n\n  private renderHeader = (fixed = false) => {\n    const styles = getStyles(this.emotion);\n\n    return (\n      <div\n        className={this.emotion.cx(styles.header(this.theme), {\n          [styles.headerFixed(this.theme)]: fixed,\n          [styles.mobileHeader(this.theme)]: this.isMobileLayout,\n        })}\n      >\n        {this.renderClose(fixed)}\n        <div\n          className={this.emotion.cx(styles.title(this.theme), {\n            [styles.mobileTitle(this.theme)]: this.isMobileLayout,\n            [styles.titleFixed()]: fixed,\n          })}\n        >\n          {isFunction(this.props.children) ? this.props.children(fixed) : this.props.children}\n        </div>\n      </div>\n    );\n  };\n\n  private renderHeader2022 = (fixed = false) => {\n    const isDisplayed = this.props.hasSeparator || fixed;\n    return (\n      <div>\n        {this.renderHeader(fixed)}\n        {isDisplayed && <ModalSeparator fixed={fixed} />}\n      </div>\n    );\n  };\n\n  private renderClose = (fixed: boolean) => {\n    const stickyOffset = parseInt(this.theme.sidePageHeaderStickyOffset);\n    const styles = getStyles(this.emotion);\n\n    return (\n      <div\n        className={this.emotion.cx(styles.wrapperClose(this.theme), {\n          [styles.wrapperCloseFixed(this.theme)]: fixed,\n          [styles.mobileWrapperClose(this.theme)]: this.isMobileLayout,\n        })}\n      >\n        {this.isMobileLayout ? (\n          this.closeIcon\n        ) : (\n          <Sticky side=\"top\" offset={stickyOffset}>\n            {this.closeIcon}\n          </Sticky>\n        )}\n      </div>\n    );\n  };\n\n  private updateReadyToFix = () => {\n    if (this.wrapper) {\n      const wrapperScrolledUp = getDOMRect(this.wrapper).top;\n      const isReadyToFix = this.regularHeight + wrapperScrolledUp <= this.fixedHeaderHeight;\n      this.setState((state) => (state.isReadyToFix !== isReadyToFix ? { ...state, isReadyToFix } : state));\n    }\n  };\n\n  private wrapperRef = (el: HTMLElement | null) => {\n    this.wrapper = el;\n  };\n\n  private stickyRef = (el: Sticky | null) => {\n    this.sticky = el;\n  };\n}\n"]}

package/cjs/components/SingleToast/SingleToast.d.ts

@@ -4,6 +4,8 @@ import { Toast, ToastProps } from '../Toast/Toast';
  * Позволяет вызывать тосты с помощью статических методов. В отличие от статических методов из компонента `<Toast>` - их можно кастомизировать и они работают с `React@18`.
  */
 export declare class SingleToast extends React.Component<ToastProps> {
+    static __KONTUR_REACT_UI__: string;
+    static displayName: string;
     static ref: React.RefObject<Toast>;
     static push: typeof Toast.push;
     static close: typeof Toast.close;

package/cjs/components/SingleToast/SingleToast.js

@@ -1,4 +1,4 @@
-"use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");exports.__esModule = true;exports.SingleToast = void 0;var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));var _inheritsLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/inheritsLoose"));var _react = _interopRequireDefault(require("react"));
+"use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;exports.__esModule = true;exports.SingleToast = void 0;var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));var _inheritsLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/inheritsLoose"));var _react = _interopRequireDefault(require("react"));
 var _reactDom = _interopRequireDefault(require("react-dom"));
 
 var _Toast = require("../Toast/Toast");
@@ -15,6 +15,9 @@ SingleToast = /*#__PURE__*/function (_React$Component) {(0, _inheritsLoose2.defa
 
 
 
+
+
+
     render = function () {
       return /*#__PURE__*/_react.default.createElement(_Toast.Toast, (0, _extends2.default)({ ref: SingleToast.ref }, _this.props));
-    };return _this;}return SingleToast;}(_react.default.Component);exports.SingleToast = SingleToast;SingleToast.ref = /*#__PURE__*/_react.default.createRef();SingleToast.push = function () {var _SingleToast$ref$curr;SingleToast.close();for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {args[_key2] = arguments[_key2];}(_SingleToast$ref$curr = SingleToast.ref.current) == null ? void 0 : _SingleToast$ref$curr.push.apply(_SingleToast$ref$curr, args);};SingleToast.close = function () {_reactDom.default.flushSync(function () {var _SingleToast$ref$curr2;return (_SingleToast$ref$curr2 = SingleToast.ref.current) == null ? void 0 : _SingleToast$ref$curr2.close();});};
+    };return _this;}return SingleToast;}(_react.default.Component);exports.SingleToast = SingleToast;SingleToast.__KONTUR_REACT_UI__ = 'SingleToast';SingleToast.displayName = 'SingleToast';SingleToast.ref = /*#__PURE__*/_react.default.createRef();SingleToast.push = function () {var _SingleToast$ref$curr;SingleToast.close();for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {args[_key2] = arguments[_key2];}(_SingleToast$ref$curr = SingleToast.ref.current) == null ? void 0 : _SingleToast$ref$curr.push.apply(_SingleToast$ref$curr, args);};SingleToast.close = function () {_reactDom.default.flushSync(function () {var _SingleToast$ref$curr2;return (_SingleToast$ref$curr2 = SingleToast.ref.current) == null ? void 0 : _SingleToast$ref$curr2.close();});};

package/cjs/components/SingleToast/SingleToast.js.map

@@ -1 +1 @@
-{"version":3,"sources":["SingleToast.tsx"],"names":["SingleToast","render","ref","props","React","Component","createRef","push","close","args","current","ReactDOM","flushSync"],"mappings":"yUAAA;AACA;;AAEA;;AAEA;AACA;AACA,G;AACaA,W;;;;;;;;;AASXC,IAAAA,M,GAAS,YAAM;AACb,0BAAO,6BAAC,YAAD,2BAAO,GAAG,EAAED,WAAW,CAACE,GAAxB,IAAiC,MAAKC,KAAtC,EAAP;AACD,K,oCAX8BC,eAAMC,S,oCAA1BL,W,CACGE,G,gBAAME,eAAME,SAAN,E,CADTN,W,CAEGO,I,GAA0B,YAAa,2BACnDP,WAAW,CAACQ,KAAZ,GADmD,mCAATC,IAAS,yDAATA,IAAS,4BAEnD,yBAAAT,WAAW,CAACE,GAAZ,CAAgBQ,OAAhB,2CAAyBH,IAAzB,8BAAiCE,IAAjC,EACD,C,CALUT,W,CAMGQ,K,GAA4B,YAAM,CAC9CG,kBAASC,SAAT,CAAmB,yEAAMZ,WAAW,CAACE,GAAZ,CAAgBQ,OAAtB,qBAAM,uBAAyBF,KAAzB,EAAN,EAAnB,EACD,C","sourcesContent":["import React from 'react';\nimport ReactDOM from 'react-dom';\n\nimport { Toast, ToastProps } from '../Toast/Toast';\n\n/**\n * Позволяет вызывать тосты с помощью статических методов. В отличие от статических методов из компонента `<Toast>` - их можно кастомизировать и они работают с `React@18`.\n */\nexport class SingleToast extends React.Component<ToastProps> {\n  public static ref = React.createRef<Toast>();\n  public static push: typeof Toast.push = (...args) => {\n    SingleToast.close();\n    SingleToast.ref.current?.push(...args);\n  };\n  public static close: typeof Toast.close = () => {\n    ReactDOM.flushSync(() => SingleToast.ref.current?.close());\n  };\n  render = () => {\n    return <Toast ref={SingleToast.ref} {...this.props} />;\n  };\n}\n"]}
+{"version":3,"sources":["SingleToast.tsx"],"names":["SingleToast","render","ref","props","React","Component","__KONTUR_REACT_UI__","displayName","createRef","push","close","args","current","ReactDOM","flushSync"],"mappings":"iVAAA;AACA;;AAEA;;AAEA;AACA;AACA,G;AACaA,W;;;;;;;;;;;;AAYXC,IAAAA,M,GAAS,YAAM;AACb,0BAAO,6BAAC,YAAD,2BAAO,GAAG,EAAED,WAAW,CAACE,GAAxB,IAAiC,MAAKC,KAAtC,EAAP;AACD,K,oCAd8BC,eAAMC,S,oCAA1BL,W,CACGM,mB,GAAsB,a,CADzBN,W,CAEGO,W,GAAc,a,CAFjBP,W,CAIGE,G,gBAAME,eAAMI,SAAN,E,CAJTR,W,CAKGS,I,GAA0B,YAAa,2BACnDT,WAAW,CAACU,KAAZ,GADmD,mCAATC,IAAS,yDAATA,IAAS,4BAEnD,yBAAAX,WAAW,CAACE,GAAZ,CAAgBU,OAAhB,2CAAyBH,IAAzB,8BAAiCE,IAAjC,EACD,C,CARUX,W,CASGU,K,GAA4B,YAAM,CAC9CG,kBAASC,SAAT,CAAmB,yEAAMd,WAAW,CAACE,GAAZ,CAAgBU,OAAtB,qBAAM,uBAAyBF,KAAzB,EAAN,EAAnB,EACD,C","sourcesContent":["import React from 'react';\nimport ReactDOM from 'react-dom';\n\nimport { Toast, ToastProps } from '../Toast/Toast';\n\n/**\n * Позволяет вызывать тосты с помощью статических методов. В отличие от статических методов из компонента `<Toast>` - их можно кастомизировать и они работают с `React@18`.\n */\nexport class SingleToast extends React.Component<ToastProps> {\n  public static __KONTUR_REACT_UI__ = 'SingleToast';\n  public static displayName = 'SingleToast';\n\n  public static ref = React.createRef<Toast>();\n  public static push: typeof Toast.push = (...args) => {\n    SingleToast.close();\n    SingleToast.ref.current?.push(...args);\n  };\n  public static close: typeof Toast.close = () => {\n    ReactDOM.flushSync(() => SingleToast.ref.current?.close());\n  };\n  render = () => {\n    return <Toast ref={SingleToast.ref} {...this.props} />;\n  };\n}\n"]}

package/cjs/components/Spinner/Spinner.d.ts

@@ -39,6 +39,7 @@ declare type DefaultProps = Required<Pick<SpinnerProps, 'type'>>;
  */
 export declare class Spinner extends React.Component<SpinnerProps> {
     static __KONTUR_REACT_UI__: string;
+    static displayName: string;
     static propTypes: {
         /**
          * Текст рядом с мини-лоадером.
@@ -60,6 +61,7 @@ export declare class Spinner extends React.Component<SpinnerProps> {
     private getProps;
     static Types: Record<SpinnerType, SpinnerType>;
     private theme;
+    private emotion;
     private readonly locale;
     private setRootNode;
     private featureFlags;

package/cjs/components/Spinner/Spinner.js

@@ -1,9 +1,9 @@
-"use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");exports.__esModule = true;exports.SpinnerDataTids = exports.Spinner = void 0;var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));var _inheritsLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/inheritsLoose"));var _react = _interopRequireDefault(require("react"));
+"use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;exports.__esModule = true;exports.SpinnerDataTids = exports.Spinner = void 0;var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));var _inheritsLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/inheritsLoose"));var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
+
 var _decorators = require("../../lib/locale/decorators");
 
-var _ThemeContext = require("../../lib/theming/ThemeContext");
 var _SpinnerIcon = require("../../internal/icons/SpinnerIcon");
 var _CommonWrapper = require("../../internal/CommonWrapper");
 var _Emotion = require("../../lib/theming/Emotion");
@@ -14,6 +14,7 @@ var _featureFlagsContext = require("../../lib/featureFlagsContext");
 
 
 
+var _ThemeContext = require("../../lib/theming/ThemeContext");
 
 var _Spinner = require("./Spinner.styles");
 var _locale = require("./locale");var _dec, _class, _class2, _temp;
@@ -87,6 +88,7 @@ Spinner = (_dec = (0, _decorators.locale)('Spinner', _locale.SpinnerLocaleHelper
 
 
 
+
 
 
     getProps = (0, _createPropsGetter.createPropsGetter)(Spinner.defaultProps);_this.
@@ -131,14 +133,25 @@ Spinner = (_dec = (0, _decorators.locale)('Spinner', _locale.SpinnerLocaleHelper
 
 
 
-    renderSpinner = function (type, dimmed, inline) {var _cx;
+
+
+
+
+
+
+
+
+
+    renderSpinner = function (type, dimmed, inline) {var _this$emotion$cx;
+      var styles = (0, _Spinner.getStyles)(_this.emotion);
+
       return /*#__PURE__*/(
         _react.default.createElement(_SpinnerIcon.SpinnerIcon, {
           size: type,
-          className: (0, _Emotion.cx)((_cx = {}, _cx[
-          _Spinner.styles.circle(_this.theme)] = !dimmed && !_this.props.color, _cx[
-          _Spinner.styles.circleDimmedColor(_this.theme)] = dimmed, _cx[
-          _Spinner.styles.circleWithoutColorAnimation()] = dimmed || !!_this.props.color, _cx)),
+          className: _this.emotion.cx((_this$emotion$cx = {}, _this$emotion$cx[
+          styles.circle(_this.theme)] = !dimmed && !_this.props.color, _this$emotion$cx[
+          styles.circleDimmedColor(_this.theme)] = dimmed, _this$emotion$cx[
+          styles.circleWithoutColorAnimation()] = dimmed || !!_this.props.color, _this$emotion$cx)),
 
           dimmed: dimmed,
           width: _this.props.width,
@@ -148,8 +161,12 @@ Spinner = (_dec = (0, _decorators.locale)('Spinner', _locale.SpinnerLocaleHelper
 
     };_this.
 
-    renderCaption = function (type, caption) {return /*#__PURE__*/(
-        _react.default.createElement("span", { className: (0, _Emotion.cx)(_Spinner.styles[type](_this.theme), _Spinner.styles.captionColor(_this.theme)) }, caption));};return _this;}var _proto = Spinner.prototype;_proto.render = function render() {var _this2 = this;return /*#__PURE__*/_react.default.createElement(_featureFlagsContext.ReactUIFeatureFlagsContext.Consumer, null, function (flags) {_this2.featureFlags = (0, _featureFlagsContext.getFullReactUIFlagsContext)(flags);return /*#__PURE__*/_react.default.createElement(_ThemeContext.ThemeContext.Consumer, null, function (theme) {_this2.theme = theme;return _this2.renderMain();});});};_proto.renderMain = function renderMain() {var canDefaultCaptionBeRemoved = this.featureFlags.spinnerLoaderRemoveDefaultCaption;var defaultCaption = canDefaultCaptionBeRemoved ? null : this.locale.loading;var _this$props = this.props,_this$props$caption = _this$props.caption,caption = _this$props$caption === void 0 ? defaultCaption : _this$props$caption,dimmed = _this$props.dimmed,inline = _this$props.inline;var type = this.getProps().type;return /*#__PURE__*/_react.default.createElement(_CommonWrapper.CommonWrapper, (0, _extends2.default)({ rootNodeRef: this.setRootNode }, this.props), /*#__PURE__*/_react.default.createElement("div", { "data-tid": SpinnerDataTids.root, className: _Spinner.styles.spinner() }, /*#__PURE__*/_react.default.createElement("span", { className: _Spinner.styles.inner() }, this.renderSpinner(type, dimmed, inline)), caption && this.renderCaption(type, caption)));};return Spinner;}(_react.default.Component), _class2.__KONTUR_REACT_UI__ = 'Spinner', _class2.propTypes = { /**
+    renderCaption = function (type, caption) {
+      var styles = (0, _Spinner.getStyles)(_this.emotion);
+      return /*#__PURE__*/(
+        _react.default.createElement("span", { className: _this.emotion.cx(styles[type](_this.theme), styles.captionColor(_this.theme)) }, caption));
+
+    };return _this;}var _proto = Spinner.prototype;_proto.render = function render() {var _this2 = this;return /*#__PURE__*/_react.default.createElement(_featureFlagsContext.ReactUIFeatureFlagsContext.Consumer, null, function (flags) {_this2.featureFlags = (0, _featureFlagsContext.getFullReactUIFlagsContext)(flags);return /*#__PURE__*/_react.default.createElement(_Emotion.EmotionConsumer, null, function (emotion) {_this2.emotion = emotion;return /*#__PURE__*/_react.default.createElement(_ThemeContext.ThemeContext.Consumer, null, function (theme) {_this2.theme = theme;return _this2.renderMain();});});});};_proto.renderMain = function renderMain() {var canDefaultCaptionBeRemoved = this.featureFlags.spinnerLoaderRemoveDefaultCaption;var defaultCaption = canDefaultCaptionBeRemoved ? null : this.locale.loading;var _this$props = this.props,_this$props$caption = _this$props.caption,caption = _this$props$caption === void 0 ? defaultCaption : _this$props$caption,dimmed = _this$props.dimmed,inline = _this$props.inline;var type = this.getProps().type;var styles = (0, _Spinner.getStyles)(this.emotion);return /*#__PURE__*/_react.default.createElement(_CommonWrapper.CommonWrapper, (0, _extends2.default)({ rootNodeRef: this.setRootNode }, this.props), /*#__PURE__*/_react.default.createElement("div", { "data-tid": SpinnerDataTids.root, className: styles.spinner() }, /*#__PURE__*/_react.default.createElement("span", { className: styles.inner() }, this.renderSpinner(type, dimmed, inline)), caption && this.renderCaption(type, caption)));};return Spinner;}(_react.default.Component), _class2.__KONTUR_REACT_UI__ = 'Spinner', _class2.displayName = 'Spinner', _class2.propTypes = { /**
    * Текст рядом с мини-лоадером.
    *
    * 'Загрузка' - значение по-умолчанию

package/cjs/components/Spinner/Spinner.js.map

@@ -1 +1 @@
-{"version":3,"sources":["Spinner.tsx"],"names":["types","SpinnerDataTids","root","Spinner","SpinnerLocaleHelper","rootNode","getProps","defaultProps","renderSpinner","type","dimmed","inline","styles","circle","theme","props","color","circleDimmedColor","circleWithoutColorAnimation","width","renderCaption","caption","captionColor","render","flags","featureFlags","renderMain","canDefaultCaptionBeRemoved","spinnerLoaderRemoveDefaultCaption","defaultCaption","locale","loading","setRootNode","spinner","inner","React","Component","__KONTUR_REACT_UI__","propTypes","PropTypes","node","bool","oneOf","Types","Object","assign","map"],"mappings":"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","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\n\nimport { locale } from '../../lib/locale/decorators';\nimport { Theme } from '../../lib/theming/Theme';\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\nimport { SpinnerIcon } from '../../internal/icons/SpinnerIcon';\nimport { CommonProps, CommonWrapper } from '../../internal/CommonWrapper';\nimport { cx } from '../../lib/theming/Emotion';\nimport { rootNode, TSetRootNode } from '../../lib/rootNode';\nimport { createPropsGetter } from '../../lib/createPropsGetter';\nimport {\n  ReactUIFeatureFlags,\n  ReactUIFeatureFlagsContext,\n  getFullReactUIFlagsContext,\n} from '../../lib/featureFlagsContext';\n\nimport { styles } from './Spinner.styles';\nimport { SpinnerLocale, SpinnerLocaleHelper } from './locale';\n\nconst types = ['big', 'mini', 'normal'] as const;\n\nexport type SpinnerType = typeof types[number];\n\nexport interface SpinnerProps extends CommonProps {\n  /**\n   * Подпись под спиннером\n   */\n  caption?: React.ReactNode;\n  /**\n   * Переводит спиннер в \"затемнённый режим\"\n   *\n   * Цвет спиннера в \"затемнённом режиме\" определяется переменной `spinnerDimmedColor`\n   */\n  dimmed?: boolean;\n  /**\n   * Размер спиннера и текста\n   *\n   * @default normal\n   */\n  type?: SpinnerType;\n  inline?: boolean;\n  /**\n   * Толщина спиннера\n   */\n  width?: number;\n  /**\n   * Цвет спиннера\n   */\n  color?: React.CSSProperties['color'];\n}\n\nexport const SpinnerDataTids = {\n  root: 'Spinner__root',\n} as const;\n\ntype DefaultProps = Required<Pick<SpinnerProps, 'type'>>;\n\n/**\n * Используйте компонент `Spinner`, если вам нужен спиннер, без дополнительного функционала, который предоставляет компонент [Loader](https://tech.skbkontur.ru/react-ui/#/Components/Loader)\n */\n\n@rootNode\n@locale('Spinner', SpinnerLocaleHelper)\nexport class Spinner extends React.Component<SpinnerProps> {\n  public static __KONTUR_REACT_UI__ = 'Spinner';\n\n  public static propTypes = {\n    /**\n     * Текст рядом с мини-лоадером.\n     *\n     * 'Загрузка' - значение по-умолчанию\n     */\n    caption: PropTypes.node,\n\n    dimmed: PropTypes.bool,\n\n    /**\n     * Тип спиннера: mini, normal, big\n     *\n     * Значение по-умолчанию - normal\n     *\n     * Spinner.types - все доступные типы\n     */\n    type: PropTypes.oneOf(types),\n  };\n\n  public static defaultProps: DefaultProps = {\n    type: 'normal',\n  };\n\n  private getProps = createPropsGetter(Spinner.defaultProps);\n\n  public static Types: Record<SpinnerType, SpinnerType> = Object.assign({}, ...types.map((type) => ({ [type]: type })));\n  private theme!: Theme;\n  private readonly locale!: SpinnerLocale;\n  private setRootNode!: TSetRootNode;\n  private featureFlags!: ReactUIFeatureFlags;\n\n  public render() {\n    return (\n      <ReactUIFeatureFlagsContext.Consumer>\n        {(flags) => {\n          this.featureFlags = getFullReactUIFlagsContext(flags);\n          return (\n            <ThemeContext.Consumer>\n              {(theme) => {\n                this.theme = theme;\n                return this.renderMain();\n              }}\n            </ThemeContext.Consumer>\n          );\n        }}\n      </ReactUIFeatureFlagsContext.Consumer>\n    );\n  }\n\n  private renderMain() {\n    const canDefaultCaptionBeRemoved = this.featureFlags.spinnerLoaderRemoveDefaultCaption;\n    const defaultCaption = canDefaultCaptionBeRemoved ? null : this.locale.loading;\n    const { caption = defaultCaption, dimmed, inline } = this.props;\n    const type = this.getProps().type;\n\n    return (\n      <CommonWrapper rootNodeRef={this.setRootNode} {...this.props}>\n        <div data-tid={SpinnerDataTids.root} className={styles.spinner()}>\n          <span className={styles.inner()}>{this.renderSpinner(type, dimmed, inline)}</span>\n          {caption && this.renderCaption(type, caption)}\n        </div>\n      </CommonWrapper>\n    );\n  }\n\n  private renderSpinner = (type: SpinnerType, dimmed?: boolean, inline?: boolean) => {\n    return (\n      <SpinnerIcon\n        size={type}\n        className={cx({\n          [styles.circle(this.theme)]: !dimmed && !this.props.color,\n          [styles.circleDimmedColor(this.theme)]: dimmed,\n          [styles.circleWithoutColorAnimation()]: dimmed || !!this.props.color,\n        })}\n        dimmed={dimmed}\n        width={this.props.width}\n        color={this.props.color}\n        inline={inline}\n      />\n    );\n  };\n\n  private renderCaption = (type: SpinnerType, caption: React.ReactNode) => (\n    <span className={cx(styles[type](this.theme), styles.captionColor(this.theme))}>{caption}</span>\n  );\n}\n"]}
+{"version":3,"sources":["Spinner.tsx"],"names":["types","SpinnerDataTids","root","Spinner","SpinnerLocaleHelper","rootNode","getProps","defaultProps","renderSpinner","type","dimmed","inline","styles","emotion","cx","circle","theme","props","color","circleDimmedColor","circleWithoutColorAnimation","width","renderCaption","caption","captionColor","render","flags","featureFlags","renderMain","canDefaultCaptionBeRemoved","spinnerLoaderRemoveDefaultCaption","defaultCaption","locale","loading","setRootNode","spinner","inner","React","Component","__KONTUR_REACT_UI__","displayName","propTypes","PropTypes","node","bool","oneOf","Types","Object","assign","map"],"mappings":"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","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport type { Emotion } from '@emotion/css/create-instance';\n\nimport { locale } from '../../lib/locale/decorators';\nimport { Theme } from '../../lib/theming/Theme';\nimport { SpinnerIcon } from '../../internal/icons/SpinnerIcon';\nimport { CommonProps, CommonWrapper } from '../../internal/CommonWrapper';\nimport { EmotionConsumer } from '../../lib/theming/Emotion';\nimport { rootNode, TSetRootNode } from '../../lib/rootNode';\nimport { createPropsGetter } from '../../lib/createPropsGetter';\nimport {\n  getFullReactUIFlagsContext,\n  ReactUIFeatureFlags,\n  ReactUIFeatureFlagsContext,\n} from '../../lib/featureFlagsContext';\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\n\nimport { getStyles } from './Spinner.styles';\nimport { SpinnerLocale, SpinnerLocaleHelper } from './locale';\n\nconst types = ['big', 'mini', 'normal'] as const;\n\nexport type SpinnerType = typeof types[number];\n\nexport interface SpinnerProps extends CommonProps {\n  /**\n   * Подпись под спиннером\n   */\n  caption?: React.ReactNode;\n  /**\n   * Переводит спиннер в \"затемнённый режим\"\n   *\n   * Цвет спиннера в \"затемнённом режиме\" определяется переменной `spinnerDimmedColor`\n   */\n  dimmed?: boolean;\n  /**\n   * Размер спиннера и текста\n   *\n   * @default normal\n   */\n  type?: SpinnerType;\n  inline?: boolean;\n  /**\n   * Толщина спиннера\n   */\n  width?: number;\n  /**\n   * Цвет спиннера\n   */\n  color?: React.CSSProperties['color'];\n}\n\nexport const SpinnerDataTids = {\n  root: 'Spinner__root',\n} as const;\n\ntype DefaultProps = Required<Pick<SpinnerProps, 'type'>>;\n\n/**\n * Используйте компонент `Spinner`, если вам нужен спиннер, без дополнительного функционала, который предоставляет компонент [Loader](https://tech.skbkontur.ru/react-ui/#/Components/Loader)\n */\n\n@rootNode\n@locale('Spinner', SpinnerLocaleHelper)\nexport class Spinner extends React.Component<SpinnerProps> {\n  public static __KONTUR_REACT_UI__ = 'Spinner';\n  public static displayName = 'Spinner';\n\n  public static propTypes = {\n    /**\n     * Текст рядом с мини-лоадером.\n     *\n     * 'Загрузка' - значение по-умолчанию\n     */\n    caption: PropTypes.node,\n\n    dimmed: PropTypes.bool,\n\n    /**\n     * Тип спиннера: mini, normal, big\n     *\n     * Значение по-умолчанию - normal\n     *\n     * Spinner.types - все доступные типы\n     */\n    type: PropTypes.oneOf(types),\n  };\n\n  public static defaultProps: DefaultProps = {\n    type: 'normal',\n  };\n\n  private getProps = createPropsGetter(Spinner.defaultProps);\n\n  public static Types: Record<SpinnerType, SpinnerType> = Object.assign({}, ...types.map((type) => ({ [type]: type })));\n  private theme!: Theme;\n  private emotion!: Emotion;\n  private readonly locale!: SpinnerLocale;\n  private setRootNode!: TSetRootNode;\n  private featureFlags!: ReactUIFeatureFlags;\n\n  public render() {\n    return (\n      <ReactUIFeatureFlagsContext.Consumer>\n        {(flags) => {\n          this.featureFlags = getFullReactUIFlagsContext(flags);\n          return (\n            <EmotionConsumer>\n              {(emotion) => {\n                this.emotion = emotion;\n                return (\n                  <ThemeContext.Consumer>\n                    {(theme) => {\n                      this.theme = theme;\n                      return this.renderMain();\n                    }}\n                  </ThemeContext.Consumer>\n                );\n              }}\n            </EmotionConsumer>\n          );\n        }}\n      </ReactUIFeatureFlagsContext.Consumer>\n    );\n  }\n\n  private renderMain() {\n    const canDefaultCaptionBeRemoved = this.featureFlags.spinnerLoaderRemoveDefaultCaption;\n    const defaultCaption = canDefaultCaptionBeRemoved ? null : this.locale.loading;\n    const { caption = defaultCaption, dimmed, inline } = this.props;\n    const type = this.getProps().type;\n    const styles = getStyles(this.emotion);\n\n    return (\n      <CommonWrapper rootNodeRef={this.setRootNode} {...this.props}>\n        <div data-tid={SpinnerDataTids.root} className={styles.spinner()}>\n          <span className={styles.inner()}>{this.renderSpinner(type, dimmed, inline)}</span>\n          {caption && this.renderCaption(type, caption)}\n        </div>\n      </CommonWrapper>\n    );\n  }\n\n  private renderSpinner = (type: SpinnerType, dimmed?: boolean, inline?: boolean) => {\n    const styles = getStyles(this.emotion);\n\n    return (\n      <SpinnerIcon\n        size={type}\n        className={this.emotion.cx({\n          [styles.circle(this.theme)]: !dimmed && !this.props.color,\n          [styles.circleDimmedColor(this.theme)]: dimmed,\n          [styles.circleWithoutColorAnimation()]: dimmed || !!this.props.color,\n        })}\n        dimmed={dimmed}\n        width={this.props.width}\n        color={this.props.color}\n        inline={inline}\n      />\n    );\n  };\n\n  private renderCaption = (type: SpinnerType, caption: React.ReactNode) => {\n    const styles = getStyles(this.emotion);\n    return (\n      <span className={this.emotion.cx(styles[type](this.theme), styles.captionColor(this.theme))}>{caption}</span>\n    );\n  };\n}\n"]}

package/cjs/components/Spinner/Spinner.styles.d.ts

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

package/cjs/components/Spinner/Spinner.styles.js

@@ -1,111 +1,121 @@
-"use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");exports.__esModule = true;exports.styles = void 0;var _taggedTemplateLiteralLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteralLoose"));var _Emotion = require("../../lib/theming/Emotion");
+"use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;exports.__esModule = true;exports.getStyles = void 0;var _taggedTemplateLiteralLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteralLoose"));
+
+var _Emotion = require("../../lib/theming/Emotion");
 
 var _AnimationKeyframes = require("../../lib/theming/AnimationKeyframes");
 var _client = require("../../lib/client");var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13;
 
-var styles = (0, _Emotion.memoizeStyle)({
-  circle: function circle(t) {
-    return (0, _Emotion.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteralLoose2.default)(["\n      stroke: ", ";\n\n      ", "\n    "])),
-    t.spinnerColor,
+var getStyles = function getStyles(emotion) {
+  var AnimationKeyframes = (0, _AnimationKeyframes.getAnimationKeyframes)(emotion);
+  return (0, _Emotion.memoizeStyle)({
+    circle: function circle(t) {
+      return emotion.css(_templateObject || (_templateObject = (0, _taggedTemplateLiteralLoose2.default)(["\n        stroke: ", ";\n\n        ", "\n      "])),
+      t.spinnerColor,
+
+
+      !_client.isIE11 && "\n          animation: " +
+
+      AnimationKeyframes.spinnerCircleOffset() + " 1s cubic-bezier(0.5, 0.2, 0.5, 0.8) infinite,\n            " +
+      AnimationKeyframes.spinnerCircleLength() + " 2s cubic-bezier(0.36, 0.14, 0.38, 0.69) infinite,\n            " +
+      AnimationKeyframes.spinnerCircleRotate() + " 2s linear infinite,\n            " +
+      AnimationKeyframes.spinnerColor(t) + " 6s ease-in-out infinite;\n        ");
+
+
 
-    !_client.isIE11 && "\n          animation: " +
+    },
+    circleDimmedColor: function circleDimmedColor(t) {
+      return emotion.css(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteralLoose2.default)(["\n        stroke: ", ";\n      "])),
+      t.spinnerDimmedColor);
 
-    _AnimationKeyframes.AnimationKeyframes.spinnerCircleOffset() + " 1s cubic-bezier(0.5, 0.2, 0.5, 0.8) infinite,\n            " +
-    _AnimationKeyframes.AnimationKeyframes.spinnerCircleLength() + " 2s cubic-bezier(0.36, 0.14, 0.38, 0.69) infinite,\n            " +
-    _AnimationKeyframes.AnimationKeyframes.spinnerCircleRotate() + " 2s linear infinite,\n            " +
-    _AnimationKeyframes.AnimationKeyframes.spinnerColor(t) + " 6s ease-in-out infinite;\n        ");
+    },
+    circleWithoutColorAnimation: function circleWithoutColorAnimation() {
+      return emotion.css(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteralLoose2.default)(["\n        ", "\n      "])),
 
+      !_client.isIE11 && "\n          animation: " +
 
-  },
-  circleDimmedColor: function circleDimmedColor(t) {
-    return (0, _Emotion.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteralLoose2.default)(["\n      stroke: ", ";\n    "])),
-    t.spinnerDimmedColor);
+      AnimationKeyframes.spinnerCircleOffset() + " 1s cubic-bezier(0.5, 0.2, 0.5, 0.8) infinite,\n          " +
+      AnimationKeyframes.spinnerCircleLength() + " 2s cubic-bezier(0.36, 0.14, 0.38, 0.69) infinite,\n          " +
+      AnimationKeyframes.spinnerCircleRotate() + " 2s linear infinite;\n        ");
 
-  },
-  circleWithoutColorAnimation: function circleWithoutColorAnimation() {
-    return (0, _Emotion.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteralLoose2.default)(["\n      ", "\n    "])),
-    !_client.isIE11 && "\n          animation: " +
 
-    _AnimationKeyframes.AnimationKeyframes.spinnerCircleOffset() + " 1s cubic-bezier(0.5, 0.2, 0.5, 0.8) infinite,\n          " +
-    _AnimationKeyframes.AnimationKeyframes.spinnerCircleLength() + " 2s cubic-bezier(0.36, 0.14, 0.38, 0.69) infinite,\n          " +
-    _AnimationKeyframes.AnimationKeyframes.spinnerCircleRotate() + " 2s linear infinite;\n        ");
 
+    },
 
-  },
+    captionColor: function captionColor(t) {
+      return emotion.css(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteralLoose2.default)(["\n        color: ", ";\n      "])),
+      t.spinnerCaptionColor);
 
-  captionColor: function captionColor(t) {
-    return (0, _Emotion.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteralLoose2.default)(["\n      color: ", ";\n    "])),
-    t.spinnerCaptionColor);
+    },
 
-  },
+    inline: function inline() {
+      return emotion.css(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteralLoose2.default)(["\n        font-size: inherit;\n        line-height: inherit;\n      "])));
 
-  inline: function inline() {
-    return (0, _Emotion.css)(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteralLoose2.default)(["\n      font-size: inherit;\n      line-height: inherit;\n    "])));
 
 
+    },
 
-  },
+    mini: function mini(t) {
+      return emotion.css(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteralLoose2.default)(["\n        margin-left: ", ";\n        font-size: ", ";\n        line-height: ", ";\n      "])),
+      t.spinnerCaptionGapSmall,
+      t.spinnerFontSizeSmall,
+      t.spinnerLineHeightSmall);
 
-  mini: function mini(t) {
-    return (0, _Emotion.css)(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteralLoose2.default)(["\n      margin-left: ", ";\n      font-size: ", ";\n      line-height: ", ";\n    "])),
-    t.spinnerCaptionGapSmall,
-    t.spinnerFontSizeSmall,
-    t.spinnerLineHeightSmall);
+    },
 
-  },
+    small: function small(t) {
+      return emotion.css(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteralLoose2.default)(["\n        margin: ", ";\n        font-size: ", ";\n        line-height: ", ";\n      "])),
+      t.spinnerCaptionMarginSmall,
+      t.spinnerFontSizeSmall,
+      t.spinnerLineHeightSmall);
 
-  small: function small(t) {
-    return (0, _Emotion.css)(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteralLoose2.default)(["\n      margin: ", ";\n      font-size: ", ";\n      line-height: ", ";\n    "])),
-    t.spinnerCaptionMarginSmall,
-    t.spinnerFontSizeSmall,
-    t.spinnerLineHeightSmall);
+    },
 
-  },
+    normal: function normal(t) {
+      return emotion.css(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteralLoose2.default)(["\n        display: block;\n        font-size: ", ";\n        line-height: ", ";\n        margin-top: ", ";\n      "])),
 
-  normal: function normal(t) {
-    return (0, _Emotion.css)(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteralLoose2.default)(["\n      display: block;\n      font-size: ", ";\n      line-height: ", ";\n      margin-top: ", ";\n    "])),
+      t.spinnerFontSizeMedium,
+      t.spinnerLineHeightMedium,
+      t.spinnerCaptionGapMedium);
 
-    t.spinnerFontSizeMedium,
-    t.spinnerLineHeightMedium,
-    t.spinnerCaptionGapMedium);
+    },
 
-  },
+    medium: function medium(t) {
+      return emotion.css(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteralLoose2.default)(["\n        margin: ", ";\n        font-size: ", ";\n        line-height: ", ";\n      "])),
+      t.spinnerCaptionMarginMedium,
+      t.spinnerFontSizeMedium,
+      t.spinnerLineHeightMedium);
 
-  medium: function medium(t) {
-    return (0, _Emotion.css)(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteralLoose2.default)(["\n      margin: ", ";\n      font-size: ", ";\n      line-height: ", ";\n    "])),
-    t.spinnerCaptionMarginMedium,
-    t.spinnerFontSizeMedium,
-    t.spinnerLineHeightMedium);
+    },
 
-  },
+    big: function big(t) {
+      return emotion.css(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteralLoose2.default)(["\n        display: block;\n        font-size: ", ";\n        line-height: ", ";\n        margin-top: ", ";\n      "])),
 
-  big: function big(t) {
-    return (0, _Emotion.css)(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteralLoose2.default)(["\n      display: block;\n      font-size: ", ";\n      line-height: ", ";\n      margin-top: ", ";\n    "])),
+      t.spinnerFontSizeLarge,
+      t.spinnerLineHeightLarge,
+      t.spinnerCaptionGapLarge);
 
-    t.spinnerFontSizeLarge,
-    t.spinnerLineHeightLarge,
-    t.spinnerCaptionGapLarge);
+    },
 
-  },
+    large: function large(t) {
+      return emotion.css(_templateObject11 || (_templateObject11 = (0, _taggedTemplateLiteralLoose2.default)(["\n        font-size: ", ";\n        line-height: ", ";\n        margin: ", ";\n      "])),
+      t.spinnerFontSizeLarge,
+      t.spinnerLineHeightLarge,
+      t.spinnerCaptionMarginLarge);
 
-  large: function large(t) {
-    return (0, _Emotion.css)(_templateObject11 || (_templateObject11 = (0, _taggedTemplateLiteralLoose2.default)(["\n      font-size: ", ";\n      line-height: ", ";\n      margin: ", ";\n    "])),
-    t.spinnerFontSizeLarge,
-    t.spinnerLineHeightLarge,
-    t.spinnerCaptionMarginLarge);
+    },
 
-  },
+    spinner: function spinner() {
+      return emotion.css(_templateObject12 || (_templateObject12 = (0, _taggedTemplateLiteralLoose2.default)(["\n        display: inline-block;\n        text-align: center;\n        line-height: normal;\n      "])));
 
-  spinner: function spinner() {
-    return (0, _Emotion.css)(_templateObject12 || (_templateObject12 = (0, _taggedTemplateLiteralLoose2.default)(["\n      display: inline-block;\n      text-align: center;\n      line-height: normal;\n    "])));
 
 
 
+    },
 
-  },
+    inner: function inner() {
+      return emotion.css(_templateObject13 || (_templateObject13 = (0, _taggedTemplateLiteralLoose2.default)(["\n        display: inline-block;\n      "])));
 
-  inner: function inner() {
-    return (0, _Emotion.css)(_templateObject13 || (_templateObject13 = (0, _taggedTemplateLiteralLoose2.default)(["\n      display: inline-block;\n    "])));
 
+    } });
 
-  } });exports.styles = styles;
+};exports.getStyles = getStyles;