@skbkontur/react-ui 0.0.0-69a6fa606f → 0.0.0-6fbd9fadb2

package/components/SidePage/locale/locales/en/package.json

@@ -0,0 +1,6 @@
+{
+  "main": "../../../../../cjs/components/SidePage/locale/locales/en.js",
+  "module": "en",
+  "types": "../en.d.ts",
+  "sideEffects": false
+}

package/components/SidePage/locale/locales/en.d.ts

@@ -0,0 +1,2 @@
+import { SidePageLocale } from '../types';
+export declare const componentsLocales: SidePageLocale;

package/components/SidePage/locale/locales/ru/package.json

@@ -0,0 +1,6 @@
+{
+  "main": "../../../../../cjs/components/SidePage/locale/locales/ru.js",
+  "module": "ru",
+  "types": "../ru.d.ts",
+  "sideEffects": false
+}

package/components/SidePage/locale/locales/ru/ru.js

@@ -0,0 +1,3 @@
+export var componentsLocales = {
+  closeButtonAriaLabel: 'Закрыть модальное окно'
+};

package/components/SidePage/locale/locales/ru/ru.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["ru.ts"],"names":["componentsLocales","closeButtonAriaLabel"],"mappings":";;AAEA,OAAO,IAAMA,iBAAiC,GAAG;AAC/CC,EAAAA,oBAAoB,EAAE,wBADyB,EAA1C","sourcesContent":["import { SidePageLocale } from '../types';\n\nexport const componentsLocales: SidePageLocale = {\n  closeButtonAriaLabel: 'Закрыть модальное окно',\n};\n"]}

package/components/SidePage/locale/locales/ru.d.ts

@@ -0,0 +1,2 @@
+import { SidePageLocale } from '../types';
+export declare const componentsLocales: SidePageLocale;

package/components/SidePage/locale/package.json

@@ -0,0 +1,6 @@
+{
+  "main": "../../../cjs/components/SidePage/locale/index.js",
+  "module": "index",
+  "types": "index.d.ts",
+  "sideEffects": false
+}

package/components/SidePage/locale/types/package.json

@@ -0,0 +1,6 @@
+{
+  "main": "../../../../cjs/components/SidePage/locale/types.js",
+  "module": "types",
+  "types": "../types.d.ts",
+  "sideEffects": false
+}

package/components/SidePage/locale/types/types.js

@@ -0,0 +1 @@
+export {};

package/components/SidePage/locale/types/types.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","sourcesContent":[]}

package/components/SidePage/locale/types.d.ts

@@ -0,0 +1,3 @@
+export interface SidePageLocale {
+    closeButtonAriaLabel?: string;
+}

package/components/SingleToast/SingleToast/SingleToast.js

@@ -0,0 +1,55 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _inheritsLoose from "@babel/runtime/helpers/esm/inheritsLoose";
+import React from 'react';
+import ReactDOM from 'react-dom';
+import { Toast } from "../../Toast/Toast";
+/**
+ * Позволяет вызывать тосты с помощью статических методов. В отличие от статических методов из компонента `<Toast>` - их можно кастомизировать и они работают с `React@18`.
+ */
+
+export var SingleToast = /*#__PURE__*/function (_React$Component) {
+  _inheritsLoose(SingleToast, _React$Component);
+
+  function SingleToast() {
+    var _this;
+
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+
+    _this = _React$Component.call.apply(_React$Component, [this].concat(args)) || this;
+
+    _this.render = function () {
+      return /*#__PURE__*/React.createElement(Toast, _extends({
+        ref: SingleToast.ref
+      }, _this.props));
+    };
+
+    return _this;
+  }
+
+  return SingleToast;
+}(React.Component);
+SingleToast.__KONTUR_REACT_UI__ = 'SingleToast';
+SingleToast.displayName = 'SingleToast';
+SingleToast.ref = /*#__PURE__*/React.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.flushSync(function () {
+    var _SingleToast$ref$curr2;
+
+    return (_SingleToast$ref$curr2 = SingleToast.ref.current) == null ? void 0 : _SingleToast$ref$curr2.close();
+  });
+};

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

@@ -0,0 +1 @@
+{"version":3,"sources":["SingleToast.tsx"],"names":["React","ReactDOM","Toast","SingleToast","render","ref","props","Component","__KONTUR_REACT_UI__","displayName","createRef","push","close","args","current","flushSync"],"mappings":"gIAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,OAAOC,QAAP,MAAqB,WAArB;;AAEA,SAASC,KAAT,QAAkC,gBAAlC;;AAEA;AACA;AACA;AACA,WAAaC,WAAb;;;;;;;;;;;;AAYEC,IAAAA,MAZF,GAYW,YAAM;AACb,0BAAO,oBAAC,KAAD,aAAO,GAAG,EAAED,WAAW,CAACE,GAAxB,IAAiC,MAAKC,KAAtC,EAAP;AACD,KAdH,oCAAiCN,KAAK,CAACO,SAAvC,EAAaJ,W,CACGK,mB,GAAsB,a,CADzBL,W,CAEGM,W,GAAc,a,CAFjBN,W,CAIGE,G,gBAAML,KAAK,CAACU,SAAN,E,CAJTP,W,CAKGQ,I,GAA0B,YAAa,2BACnDR,WAAW,CAACS,KAAZ,GADmD,mCAATC,IAAS,yDAATA,IAAS,4BAEnD,yBAAAV,WAAW,CAACE,GAAZ,CAAgBS,OAAhB,2CAAyBH,IAAzB,8BAAiCE,IAAjC,EACD,C,CARUV,W,CASGS,K,GAA4B,YAAM,CAC9CX,QAAQ,CAACc,SAAT,CAAmB,yEAAMZ,WAAW,CAACE,GAAZ,CAAgBS,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/components/SingleToast/SingleToast/package.json

@@ -0,0 +1,6 @@
+{
+  "main": "../../../cjs/components/SingleToast/SingleToast.js",
+  "module": "SingleToast",
+  "types": "../SingleToast.d.ts",
+  "sideEffects": false
+}

package/components/SingleToast/SingleToast.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+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;
+    render: () => JSX.Element;
+}

package/components/SingleToast/SingleToast.md

@@ -0,0 +1,35 @@
+`<SingleToast>` можно добавить в единственном месте в проекте, а статические методы будут всегда использовать последний отрендеренный экземпляр `<Toast>`.
+
+_На внешний вид этого примера влияет следующий пример_
+
+```jsx harmony
+import { Button, SingleToast } from '@skbkontur/react-ui';
+
+<div>
+  <SingleToast />
+  <Button onClick={() => SingleToast.push('Статический тост')}>
+    Показать статический тост
+  </Button>
+</div>
+```
+
+`<SingleToast>` можно кастомизировать с помощью переменных темы для `toast`.
+```jsx harmony
+import { Button, SingleToast, ThemeContext, ThemeFactory, THEME_2022 } from '@skbkontur/react-ui';
+
+const rand = () => "Пример жёлтого тоста № " + Math.round(Math.random() * 100).toString();
+
+const pushToast = () => {
+  SingleToast.push(rand(), {
+    label: "Cancel",
+    handler: () => SingleToast.push("Canceled")
+  });
+};
+
+<div>
+  <SingleToast theme={{ toastBg: '#f1c40f' }} />
+  <Button onClick={pushToast}>
+    Показать тост с жёлтым фоном
+  </Button>
+</div>
+```

package/components/SingleToast/index/index.js

@@ -0,0 +1 @@
+export * from "../SingleToast";

package/components/SingleToast/index/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["index.ts"],"names":[],"mappings":"AAAA,cAAc,eAAd","sourcesContent":["export * from './SingleToast';\n"]}

package/components/SingleToast/index/package.json

@@ -0,0 +1,6 @@
+{
+  "main": "../../../cjs/components/SingleToast/index.js",
+  "module": "index",
+  "types": "../index.d.ts",
+  "sideEffects": false
+}

package/components/SingleToast/index.d.ts

@@ -0,0 +1 @@
+export * from './SingleToast';

package/components/SingleToast/package.json

@@ -0,0 +1,6 @@
+{
+  "main": "../../cjs/components/SingleToast/index.js",
+  "module": "index",
+  "types": "index.d.ts",
+  "sideEffects": false
+}

package/components/Spinner/Spinner/Spinner.js

@@ -6,26 +6,24 @@ var _dec, _class, _class2, _temp;
 import React from 'react';
 import PropTypes from 'prop-types';
 import { locale } from "../../../lib/locale/decorators";
-import { ThemeContext } from "../../../lib/theming/ThemeContext";
 import { SpinnerIcon } from "../../../internal/icons/SpinnerIcon";
 import { CommonWrapper } from "../../../internal/CommonWrapper";
-import { cx } from "../../../lib/theming/Emotion";
+import { EmotionConsumer } from "../../../lib/theming/Emotion";
 import { rootNode } from "../../../lib/rootNode";
-import { styles } from "../Spinner.styles";
+import { createPropsGetter } from "../../../lib/createPropsGetter";
+import { getFullReactUIFlagsContext, ReactUIFeatureFlagsContext } from "../../../lib/featureFlagsContext";
+import { ThemeConsumer } from "../../../lib/theming/ThemeContext";
+import { getStyles } from "../Spinner.styles";
 import { SpinnerLocaleHelper } from "../locale";
-var types = {
-  big: 'big',
-  mini: 'mini',
-  normal: 'normal'
-};
+var types = ['big', 'mini', 'normal'];
 export var SpinnerDataTids = {
   root: 'Spinner__root'
 };
+export
 /**
- * DRAFT - инлайн-лоадер
- */
-
-export var Spinner = (_dec = locale('Spinner', SpinnerLocaleHelper), rootNode(_class = _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_React$Component) {
+* Используйте компонент `Spinner`, если вам нужен спиннер, без дополнительного функционала, который предоставляет компонент [Loader](https://tech.skbkontur.ru/react-ui/#/Components/Loader)
+*/
+var Spinner = (_dec = locale('Spinner', SpinnerLocaleHelper), rootNode(_class = _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_React$Component) {
   _inheritsLoose(Spinner, _React$Component);
 
   function Spinner() {
@@ -36,13 +34,15 @@ export var Spinner = (_dec = locale('Spinner', SpinnerLocaleHelper), rootNode(_c
     }
 
     _this = _React$Component.call.apply(_React$Component, [this].concat(args)) || this;
+    _this.getProps = createPropsGetter(Spinner.defaultProps);
 
     _this.renderSpinner = function (type, dimmed, inline) {
-      var _cx;
+      var _this$emotion$cx;
 
+      var styles = getStyles(_this.emotion);
       return /*#__PURE__*/React.createElement(SpinnerIcon, {
         size: type,
-        className: cx((_cx = {}, _cx[styles.circle(_this.theme)] = !dimmed && !_this.props.color, _cx[styles.circleDimmedColor(_this.theme)] = dimmed, _cx[styles.circleWithoutColorAnimation(_this.theme)] = 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,
         color: _this.props.color,
@@ -51,8 +51,9 @@ export var Spinner = (_dec = locale('Spinner', SpinnerLocaleHelper), rootNode(_c
     };
 
     _this.renderCaption = function (type, caption) {
+      var styles = getStyles(_this.emotion);
       return /*#__PURE__*/React.createElement("span", {
-        className: cx(styles[type](_this.theme), styles.captionColor(_this.theme))
+        className: _this.emotion.cx(styles[type](_this.theme), styles.captionColor(_this.theme))
       }, caption);
     };
 
@@ -64,19 +65,28 @@ export var Spinner = (_dec = locale('Spinner', SpinnerLocaleHelper), rootNode(_c
   _proto.render = function render() {
     var _this2 = this;
 
-    return /*#__PURE__*/React.createElement(ThemeContext.Consumer, null, function (theme) {
-      _this2.theme = theme;
-      return _this2.renderMain();
+    return /*#__PURE__*/React.createElement(ReactUIFeatureFlagsContext.Consumer, null, function (flags) {
+      _this2.featureFlags = getFullReactUIFlagsContext(flags);
+      return /*#__PURE__*/React.createElement(EmotionConsumer, null, function (emotion) {
+        _this2.emotion = emotion;
+        return /*#__PURE__*/React.createElement(ThemeConsumer, 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,
-        type = _this$props.type,
         _this$props$caption = _this$props.caption,
-        caption = _this$props$caption === void 0 ? this.locale.loading : _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 = getStyles(this.emotion);
     return /*#__PURE__*/React.createElement(CommonWrapper, _extends({
       rootNodeRef: this.setRootNode
     }, this.props), /*#__PURE__*/React.createElement("div", {
@@ -88,7 +98,7 @@ export var Spinner = (_dec = locale('Spinner', SpinnerLocaleHelper), rootNode(_c
   };
 
   return Spinner;
-}(React.Component), _class2.__KONTUR_REACT_UI__ = 'Spinner', _class2.propTypes = {
+}(React.Component), _class2.__KONTUR_REACT_UI__ = 'Spinner', _class2.displayName = 'Spinner', _class2.propTypes = {
   /**
   * Текст рядом с мини-лоадером.
   *
@@ -104,7 +114,11 @@ export var Spinner = (_dec = locale('Spinner', SpinnerLocaleHelper), rootNode(_c
   *
   * Spinner.types - все доступные типы
   */
-  type: PropTypes.oneOf(Object.keys(types))
+  type: PropTypes.oneOf(types)
 }, _class2.defaultProps = {
   type: 'normal'
-}, _class2.Types = types, _temp)) || _class) || _class);
+}, _class2.Types = Object.assign.apply(Object, [{}].concat(types.map(function (type) {
+  var _ref;
+
+  return _ref = {}, _ref[type] = type, _ref;
+}))), _temp)) || _class) || _class);

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

@@ -1 +1 @@
-{"version":3,"sources":["Spinner.tsx"],"names":["React","PropTypes","locale","ThemeContext","SpinnerIcon","CommonWrapper","cx","rootNode","styles","SpinnerLocaleHelper","types","big","mini","normal","SpinnerDataTids","root","Spinner","renderSpinner","type","dimmed","inline","circle","theme","props","color","circleDimmedColor","circleWithoutColorAnimation","width","renderCaption","caption","captionColor","render","renderMain","loading","setRootNode","spinner","inner","Component","__KONTUR_REACT_UI__","propTypes","node","bool","oneOf","Object","keys","defaultProps","Types"],"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';\n\nimport { styles } from './Spinner.styles';\nimport { SpinnerLocale, SpinnerLocaleHelper } from './locale';\n\nconst types: Record<SpinnerType, SpinnerType> = {\n  big: 'big',\n  mini: 'mini',\n  normal: 'normal',\n};\n\nexport type SpinnerType = 'mini' | 'normal' | 'big';\n\nexport interface SpinnerProps extends CommonProps {\n  caption?: React.ReactNode;\n  dimmed?: boolean;\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\n/**\n * DRAFT - инлайн-лоадер\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(Object.keys(types)),\n  };\n\n  public static defaultProps: SpinnerProps = {\n    type: 'normal',\n  };\n\n  public static Types: typeof types = types;\n  private theme!: Theme;\n  private readonly locale!: SpinnerLocale;\n  private setRootNode!: TSetRootNode;\n\n  public render() {\n    return (\n      <ThemeContext.Consumer>\n        {(theme) => {\n          this.theme = theme;\n          return this.renderMain();\n        }}\n      </ThemeContext.Consumer>\n    );\n  }\n\n  private renderMain() {\n    const { type, caption = this.locale.loading, dimmed, inline } = this.props;\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(this.theme)]: 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":["React","PropTypes","locale","SpinnerIcon","CommonWrapper","EmotionConsumer","rootNode","createPropsGetter","getFullReactUIFlagsContext","ReactUIFeatureFlagsContext","ThemeConsumer","getStyles","SpinnerLocaleHelper","types","SpinnerDataTids","root","Spinner","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","loading","setRootNode","spinner","inner","Component","__KONTUR_REACT_UI__","displayName","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 { ThemeConsumer } 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                  <ThemeConsumer>\n                    {(theme) => {\n                      this.theme = theme;\n                      return this.renderMain();\n                    }}\n                  </ThemeConsumer>\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/components/Spinner/Spinner.d.ts

@@ -1,16 +1,25 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { CommonProps } from '../../internal/CommonWrapper';
-declare const types: Record<SpinnerType, SpinnerType>;
-export declare type SpinnerType = 'mini' | 'normal' | 'big';
+declare const types: readonly ["big", "mini", "normal"];
+export declare type SpinnerType = typeof types[number];
 export interface SpinnerProps extends CommonProps {
+    /**
+     * Подпись под спиннером
+     */
     caption?: React.ReactNode;
+    /**
+     * Переводит спиннер в "затемнённый режим"
+     *
+     * Цвет спиннера в "затемнённом режиме" определяется переменной `spinnerDimmedColor`
+     */
     dimmed?: boolean;
     /**
-     * Тип спиннера
+     * Размер спиннера и текста
+     *
      * @default normal
      */
-    type: SpinnerType;
+    type?: SpinnerType;
     inline?: boolean;
     /**
      * Толщина спиннера
@@ -24,11 +33,13 @@ export interface SpinnerProps extends CommonProps {
 export declare const SpinnerDataTids: {
     readonly root: "Spinner__root";
 };
+declare type DefaultProps = Required<Pick<SpinnerProps, 'type'>>;
 /**
- * DRAFT - инлайн-лоадер
+ * Используйте компонент `Spinner`, если вам нужен спиннер, без дополнительного функционала, который предоставляет компонент [Loader](https://tech.skbkontur.ru/react-ui/#/Components/Loader)
  */
 export declare class Spinner extends React.Component<SpinnerProps> {
     static __KONTUR_REACT_UI__: string;
+    static displayName: string;
     static propTypes: {
         /**
          * Текст рядом с мини-лоадером.
@@ -44,13 +55,16 @@ export declare class Spinner extends React.Component<SpinnerProps> {
          *
          * Spinner.types - все доступные типы
          */
-        type: PropTypes.Requireable<string>;
+        type: PropTypes.Requireable<"big" | "normal" | "mini">;
     };
-    static defaultProps: SpinnerProps;
-    static Types: typeof types;
+    static defaultProps: DefaultProps;
+    private getProps;
+    static Types: Record<SpinnerType, SpinnerType>;
     private theme;
+    private emotion;
     private readonly locale;
     private setRootNode;
+    private featureFlags;
     render(): JSX.Element;
     private renderMain;
     private renderSpinner;

package/components/Spinner/Spinner.md

@@ -4,7 +4,7 @@ import { Gapped, Spinner } from '@skbkontur/react-ui';
 const reactNodeCaption = (
   <div>
     <Spinner type="mini" caption={null} /> <span style={{ color: 'tomato', fontSize: '1.3em' }}>З</span>
-    агрузка ...
+    агрузка
   </div>
 );
 

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

@@ -1,39 +1,51 @@
 import _taggedTemplateLiteralLoose from "@babel/runtime/helpers/esm/taggedTemplateLiteralLoose";
 
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13;
 
-import { css, memoizeStyle } from "../../../lib/theming/Emotion";
-import { AnimationKeyframes } from "../../../lib/theming/AnimationKeyframes";
+import { memoizeStyle } from "../../../lib/theming/Emotion";
+import { getAnimationKeyframes } from "../../../lib/theming/AnimationKeyframes";
 import { isIE11 } from "../../../lib/client";
-export var styles = memoizeStyle({
-  circle: function circle(t) {
-    return css(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n      stroke: ", ";\n\n      ", "\n    "])), t.spinnerColor, !isIE11 && "\n          animation: " + AnimationKeyframes.spinnerCircleOffset(t) + " 1s cubic-bezier(0.5, 0.2, 0.5, 0.8) infinite,\n            " + AnimationKeyframes.spinnerCircleLength(t) + " 2s cubic-bezier(0.36, 0.14, 0.38, 0.69) infinite,\n            " + AnimationKeyframes.spinnerCircleRotate(t) + " 2s linear infinite,\n            " + AnimationKeyframes.spinnerColor(t) + " 6s ease-in-out infinite;\n        ");
-  },
-  circleDimmedColor: function circleDimmedColor(t) {
-    return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n      stroke: ", ";\n    "])), t.spinnerDimmedColor);
-  },
-  circleWithoutColorAnimation: function circleWithoutColorAnimation(t) {
-    return css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\n      ", "\n    "])), !isIE11 && "\n          animation: " + AnimationKeyframes.spinnerCircleOffset(t) + " 1s cubic-bezier(0.5, 0.2, 0.5, 0.8) infinite,\n          " + AnimationKeyframes.spinnerCircleLength(t) + " 2s cubic-bezier(0.36, 0.14, 0.38, 0.69) infinite,\n          " + AnimationKeyframes.spinnerCircleRotate(t) + " 2s linear infinite;\n        ");
-  },
-  captionColor: function captionColor(t) {
-    return css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteralLoose(["\n      color: ", ";\n    "])), t.spinnerCaptionColor);
-  },
-  inline: function inline() {
-    return css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteralLoose(["\n      font-size: inherit;\n      line-height: inherit;\n    "])));
-  },
-  mini: function mini(t) {
-    return css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteralLoose(["\n      margin-left: ", ";\n      font-size: ", ";\n      line-height: ", ";\n    "])), t.spinnerCaptionGapSmall, t.spinnerFontSizeSmall, t.spinnerLineHeightSmall);
-  },
-  normal: function normal(t) {
-    return css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteralLoose(["\n      display: block;\n      font-size: ", ";\n      line-height: ", ";\n      margin-top: ", ";\n    "])), t.spinnerFontSizeMedium, t.spinnerLineHeightMedium, t.spinnerCaptionGapMedium);
-  },
-  big: function big(t) {
-    return css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteralLoose(["\n      display: block;\n      font-size: ", ";\n      line-height: ", ";\n      margin-top: ", ";\n    "])), t.spinnerFontSizeLarge, t.spinnerLineHeightLarge, t.spinnerCaptionGapLarge);
-  },
-  spinner: function spinner() {
-    return css(_templateObject9 || (_templateObject9 = _taggedTemplateLiteralLoose(["\n      display: inline-block;\n      text-align: center;\n      line-height: normal;\n    "])));
-  },
-  inner: function inner() {
-    return css(_templateObject10 || (_templateObject10 = _taggedTemplateLiteralLoose(["\n      display: inline-block;\n    "])));
-  }
-});
+export var getStyles = function getStyles(emotion) {
+  var AnimationKeyframes = getAnimationKeyframes(emotion);
+  return memoizeStyle({
+    circle: function circle(t) {
+      return emotion.css(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n        stroke: ", ";\n\n        ", "\n      "])), t.spinnerColor, !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        ");
+    },
+    circleDimmedColor: function circleDimmedColor(t) {
+      return emotion.css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n        stroke: ", ";\n      "])), t.spinnerDimmedColor);
+    },
+    circleWithoutColorAnimation: function circleWithoutColorAnimation() {
+      return emotion.css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\n        ", "\n      "])), !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        ");
+    },
+    captionColor: function captionColor(t) {
+      return emotion.css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteralLoose(["\n        color: ", ";\n      "])), t.spinnerCaptionColor);
+    },
+    inline: function inline() {
+      return emotion.css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteralLoose(["\n        font-size: inherit;\n        line-height: inherit;\n      "])));
+    },
+    mini: function mini(t) {
+      return emotion.css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteralLoose(["\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 = _taggedTemplateLiteralLoose(["\n        margin: ", ";\n        font-size: ", ";\n        line-height: ", ";\n      "])), t.spinnerCaptionMarginSmall, t.spinnerFontSizeSmall, t.spinnerLineHeightSmall);
+    },
+    normal: function normal(t) {
+      return emotion.css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteralLoose(["\n        display: block;\n        font-size: ", ";\n        line-height: ", ";\n        margin-top: ", ";\n      "])), t.spinnerFontSizeMedium, t.spinnerLineHeightMedium, t.spinnerCaptionGapMedium);
+    },
+    medium: function medium(t) {
+      return emotion.css(_templateObject9 || (_templateObject9 = _taggedTemplateLiteralLoose(["\n        margin: ", ";\n        font-size: ", ";\n        line-height: ", ";\n      "])), t.spinnerCaptionMarginMedium, t.spinnerFontSizeMedium, t.spinnerLineHeightMedium);
+    },
+    big: function big(t) {
+      return emotion.css(_templateObject10 || (_templateObject10 = _taggedTemplateLiteralLoose(["\n        display: block;\n        font-size: ", ";\n        line-height: ", ";\n        margin-top: ", ";\n      "])), t.spinnerFontSizeLarge, t.spinnerLineHeightLarge, t.spinnerCaptionGapLarge);
+    },
+    large: function large(t) {
+      return emotion.css(_templateObject11 || (_templateObject11 = _taggedTemplateLiteralLoose(["\n        font-size: ", ";\n        line-height: ", ";\n        margin: ", ";\n      "])), t.spinnerFontSizeLarge, t.spinnerLineHeightLarge, t.spinnerCaptionMarginLarge);
+    },
+    spinner: function spinner() {
+      return emotion.css(_templateObject12 || (_templateObject12 = _taggedTemplateLiteralLoose(["\n        display: inline-block;\n        text-align: center;\n        line-height: normal;\n      "])));
+    },
+    inner: function inner() {
+      return emotion.css(_templateObject13 || (_templateObject13 = _taggedTemplateLiteralLoose(["\n        display: inline-block;\n      "])));
+    }
+  });
+};

package/components/Spinner/Spinner.styles/Spinner.styles.js.map

@@ -1 +1 @@
-{"version":3,"sources":["Spinner.styles.ts"],"names":["css","memoizeStyle","AnimationKeyframes","isIE11","styles","circle","t","spinnerColor","spinnerCircleOffset","spinnerCircleLength","spinnerCircleRotate","circleDimmedColor","spinnerDimmedColor","circleWithoutColorAnimation","captionColor","spinnerCaptionColor","inline","mini","spinnerCaptionGapSmall","spinnerFontSizeSmall","spinnerLineHeightSmall","normal","spinnerFontSizeMedium","spinnerLineHeightMedium","spinnerCaptionGapMedium","big","spinnerFontSizeLarge","spinnerLineHeightLarge","spinnerCaptionGapLarge","spinner","inner"],"mappings":"uRAAA,SAASA,GAAT,EAAcC,YAAd,QAAkC,2BAAlC;;AAEA,SAASC,kBAAT,QAAmC,sCAAnC;AACA,SAASC,MAAT,QAAuB,kBAAvB;;AAEA,OAAO,IAAMC,MAAM,GAAGH,YAAY,CAAC;AACjCI,EAAAA,MADiC,kBAC1BC,CAD0B,EAChB;AACf,WAAON,GAAP;AACYM,IAAAA,CAAC,CAACC,YADd;;AAGI,KAACJ,MAAD;;AAEeD,IAAAA,kBAAkB,CAACM,mBAAnB,CAAuCF,CAAvC,CAFf;AAGMJ,IAAAA,kBAAkB,CAACO,mBAAnB,CAAuCH,CAAvC,CAHN;AAIMJ,IAAAA,kBAAkB,CAACQ,mBAAnB,CAAuCJ,CAAvC,CAJN;AAKMJ,IAAAA,kBAAkB,CAACK,YAAnB,CAAgCD,CAAhC,CALN,wCAHJ;;;AAWD,GAbgC;AAcjCK,EAAAA,iBAdiC,6BAcfL,CAde,EAcL;AAC1B,WAAON,GAAP;AACYM,IAAAA,CAAC,CAACM,kBADd;;AAGD,GAlBgC;AAmBjCC,EAAAA,2BAnBiC,uCAmBLP,CAnBK,EAmBK;AACpC,WAAON,GAAP;AACI,KAACG,MAAD;;AAEeD,IAAAA,kBAAkB,CAACM,mBAAnB,CAAuCF,CAAvC,CAFf;AAGIJ,IAAAA,kBAAkB,CAACO,mBAAnB,CAAuCH,CAAvC,CAHJ;AAIIJ,IAAAA,kBAAkB,CAACQ,mBAAnB,CAAuCJ,CAAvC,CAJJ,mCADJ;;;AAQD,GA5BgC;;AA8BjCQ,EAAAA,YA9BiC,wBA8BpBR,CA9BoB,EA8BV;AACrB,WAAON,GAAP;AACWM,IAAAA,CAAC,CAACS,mBADb;;AAGD,GAlCgC;;AAoCjCC,EAAAA,MApCiC,oBAoCxB;AACP,WAAOhB,GAAP;;;;AAID,GAzCgC;;AA2CjCiB,EAAAA,IA3CiC,gBA2C5BX,CA3C4B,EA2ClB;AACb,WAAON,GAAP;AACiBM,IAAAA,CAAC,CAACY,sBADnB;AAEeZ,IAAAA,CAAC,CAACa,oBAFjB;AAGiBb,IAAAA,CAAC,CAACc,sBAHnB;;AAKD,GAjDgC;;AAmDjCC,EAAAA,MAnDiC,kBAmD1Bf,CAnD0B,EAmDhB;AACf,WAAON,GAAP;;AAEeM,IAAAA,CAAC,CAACgB,qBAFjB;AAGiBhB,IAAAA,CAAC,CAACiB,uBAHnB;AAIgBjB,IAAAA,CAAC,CAACkB,uBAJlB;;AAMD,GA1DgC;;AA4DjCC,EAAAA,GA5DiC,eA4D7BnB,CA5D6B,EA4DnB;AACZ,WAAON,GAAP;;AAEeM,IAAAA,CAAC,CAACoB,oBAFjB;AAGiBpB,IAAAA,CAAC,CAACqB,sBAHnB;AAIgBrB,IAAAA,CAAC,CAACsB,sBAJlB;;AAMD,GAnEgC;;AAqEjCC,EAAAA,OArEiC,qBAqEvB;AACR,WAAO7B,GAAP;;;;;AAKD,GA3EgC;;AA6EjC8B,EAAAA,KA7EiC,mBA6EzB;AACN,WAAO9B,GAAP;;;AAGD,GAjFgC,EAAD,CAA3B","sourcesContent":["import { css, memoizeStyle } from '../../lib/theming/Emotion';\nimport { Theme } from '../../lib/theming/Theme';\nimport { AnimationKeyframes } from '../../lib/theming/AnimationKeyframes';\nimport { isIE11 } from '../../lib/client';\n\nexport const styles = memoizeStyle({\n  circle(t: Theme) {\n    return css`\n      stroke: ${t.spinnerColor};\n\n      ${!isIE11 &&\n      `\n          animation: ${AnimationKeyframes.spinnerCircleOffset(t)} 1s cubic-bezier(0.5, 0.2, 0.5, 0.8) infinite,\n            ${AnimationKeyframes.spinnerCircleLength(t)} 2s cubic-bezier(0.36, 0.14, 0.38, 0.69) infinite,\n            ${AnimationKeyframes.spinnerCircleRotate(t)} 2s linear infinite,\n            ${AnimationKeyframes.spinnerColor(t)} 6s ease-in-out infinite;\n        `}\n    `;\n  },\n  circleDimmedColor(t: Theme) {\n    return css`\n      stroke: ${t.spinnerDimmedColor};\n    `;\n  },\n  circleWithoutColorAnimation(t: Theme) {\n    return css`\n      ${!isIE11 &&\n      `\n          animation: ${AnimationKeyframes.spinnerCircleOffset(t)} 1s cubic-bezier(0.5, 0.2, 0.5, 0.8) infinite,\n          ${AnimationKeyframes.spinnerCircleLength(t)} 2s cubic-bezier(0.36, 0.14, 0.38, 0.69) infinite,\n          ${AnimationKeyframes.spinnerCircleRotate(t)} 2s linear infinite;\n        `}\n    `;\n  },\n\n  captionColor(t: Theme) {\n    return css`\n      color: ${t.spinnerCaptionColor};\n    `;\n  },\n\n  inline() {\n    return css`\n      font-size: inherit;\n      line-height: inherit;\n    `;\n  },\n\n  mini(t: Theme) {\n    return css`\n      margin-left: ${t.spinnerCaptionGapSmall};\n      font-size: ${t.spinnerFontSizeSmall};\n      line-height: ${t.spinnerLineHeightSmall};\n    `;\n  },\n\n  normal(t: Theme) {\n    return css`\n      display: block;\n      font-size: ${t.spinnerFontSizeMedium};\n      line-height: ${t.spinnerLineHeightMedium};\n      margin-top: ${t.spinnerCaptionGapMedium};\n    `;\n  },\n\n  big(t: Theme) {\n    return css`\n      display: block;\n      font-size: ${t.spinnerFontSizeLarge};\n      line-height: ${t.spinnerLineHeightLarge};\n      margin-top: ${t.spinnerCaptionGapLarge};\n    `;\n  },\n\n  spinner() {\n    return css`\n      display: inline-block;\n      text-align: center;\n      line-height: normal;\n    `;\n  },\n\n  inner() {\n    return css`\n      display: inline-block;\n    `;\n  },\n});\n"]}
+{"version":3,"sources":["Spinner.styles.ts"],"names":["memoizeStyle","getAnimationKeyframes","isIE11","getStyles","emotion","AnimationKeyframes","circle","t","css","spinnerColor","spinnerCircleOffset","spinnerCircleLength","spinnerCircleRotate","circleDimmedColor","spinnerDimmedColor","circleWithoutColorAnimation","captionColor","spinnerCaptionColor","inline","mini","spinnerCaptionGapSmall","spinnerFontSizeSmall","spinnerLineHeightSmall","small","spinnerCaptionMarginSmall","normal","spinnerFontSizeMedium","spinnerLineHeightMedium","spinnerCaptionGapMedium","medium","spinnerCaptionMarginMedium","big","spinnerFontSizeLarge","spinnerLineHeightLarge","spinnerCaptionGapLarge","large","spinnerCaptionMarginLarge","spinner","inner"],"mappings":";;AAEA,SAASA,YAAT,QAA6B,2BAA7B;;AAEA,SAASC,qBAAT,QAAsC,sCAAtC;AACA,SAASC,MAAT,QAAuB,kBAAvB;;AAEA,OAAO,IAAMC,SAAS,GAAG,SAAZA,SAAY,CAACC,OAAD,EAAsB;AAC7C,MAAMC,kBAAkB,GAAGJ,qBAAqB,CAACG,OAAD,CAAhD;AACA,SAAOJ,YAAY,CAAC;AAClBM,IAAAA,MADkB,kBACXC,CADW,EACD;AACf,aAAOH,OAAO,CAACI,GAAf;AACYD,MAAAA,CAAC,CAACE,YADd;;;AAII,OAACP,MAAD;;AAEaG,MAAAA,kBAAkB,CAACK,mBAAnB,EAFb;AAGIL,MAAAA,kBAAkB,CAACM,mBAAnB,EAHJ;AAIIN,MAAAA,kBAAkB,CAACO,mBAAnB,EAJJ;AAKIP,MAAAA,kBAAkB,CAACI,YAAnB,CAAgCF,CAAhC,CALJ,wCAJJ;;;;AAaD,KAfiB;AAgBlBM,IAAAA,iBAhBkB,6BAgBAN,CAhBA,EAgBU;AAC1B,aAAOH,OAAO,CAACI,GAAf;AACYD,MAAAA,CAAC,CAACO,kBADd;;AAGD,KApBiB;AAqBlBC,IAAAA,2BArBkB,yCAqBY;AAC5B,aAAOX,OAAO,CAACI,GAAf;;AAEI,OAACN,MAAD;;AAEaG,MAAAA,kBAAkB,CAACK,mBAAnB,EAFb;AAGEL,MAAAA,kBAAkB,CAACM,mBAAnB,EAHF;AAIEN,MAAAA,kBAAkB,CAACO,mBAAnB,EAJF,mCAFJ;;;;AAUD,KAhCiB;;AAkClBI,IAAAA,YAlCkB,wBAkCLT,CAlCK,EAkCK;AACrB,aAAOH,OAAO,CAACI,GAAf;AACWD,MAAAA,CAAC,CAACU,mBADb;;AAGD,KAtCiB;;AAwClBC,IAAAA,MAxCkB,oBAwCT;AACP,aAAOd,OAAO,CAACI,GAAf;;;;AAID,KA7CiB;;AA+ClBW,IAAAA,IA/CkB,gBA+CbZ,CA/Ca,EA+CH;AACb,aAAOH,OAAO,CAACI,GAAf;AACiBD,MAAAA,CAAC,CAACa,sBADnB;AAEeb,MAAAA,CAAC,CAACc,oBAFjB;AAGiBd,MAAAA,CAAC,CAACe,sBAHnB;;AAKD,KArDiB;;AAuDlBC,IAAAA,KAvDkB,iBAuDZhB,CAvDY,EAuDF;AACd,aAAOH,OAAO,CAACI,GAAf;AACYD,MAAAA,CAAC,CAACiB,yBADd;AAEejB,MAAAA,CAAC,CAACc,oBAFjB;AAGiBd,MAAAA,CAAC,CAACe,sBAHnB;;AAKD,KA7DiB;;AA+DlBG,IAAAA,MA/DkB,kBA+DXlB,CA/DW,EA+DD;AACf,aAAOH,OAAO,CAACI,GAAf;;AAEeD,MAAAA,CAAC,CAACmB,qBAFjB;AAGiBnB,MAAAA,CAAC,CAACoB,uBAHnB;AAIgBpB,MAAAA,CAAC,CAACqB,uBAJlB;;AAMD,KAtEiB;;AAwElBC,IAAAA,MAxEkB,kBAwEXtB,CAxEW,EAwED;AACf,aAAOH,OAAO,CAACI,GAAf;AACYD,MAAAA,CAAC,CAACuB,0BADd;AAEevB,MAAAA,CAAC,CAACmB,qBAFjB;AAGiBnB,MAAAA,CAAC,CAACoB,uBAHnB;;AAKD,KA9EiB;;AAgFlBI,IAAAA,GAhFkB,eAgFdxB,CAhFc,EAgFJ;AACZ,aAAOH,OAAO,CAACI,GAAf;;AAEeD,MAAAA,CAAC,CAACyB,oBAFjB;AAGiBzB,MAAAA,CAAC,CAAC0B,sBAHnB;AAIgB1B,MAAAA,CAAC,CAAC2B,sBAJlB;;AAMD,KAvFiB;;AAyFlBC,IAAAA,KAzFkB,iBAyFZ5B,CAzFY,EAyFF;AACd,aAAOH,OAAO,CAACI,GAAf;AACeD,MAAAA,CAAC,CAACyB,oBADjB;AAEiBzB,MAAAA,CAAC,CAAC0B,sBAFnB;AAGY1B,MAAAA,CAAC,CAAC6B,yBAHd;;AAKD,KA/FiB;;AAiGlBC,IAAAA,OAjGkB,qBAiGR;AACR,aAAOjC,OAAO,CAACI,GAAf;;;;;AAKD,KAvGiB;;AAyGlB8B,IAAAA,KAzGkB,mBAyGV;AACN,aAAOlC,OAAO,CAACI,GAAf;;;AAGD,KA7GiB,EAAD,CAAnB;;AA+GD,CAjHM","sourcesContent":["import type { Emotion } from '@emotion/css/create-instance';\n\nimport { memoizeStyle } from '../../lib/theming/Emotion';\nimport { Theme } from '../../lib/theming/Theme';\nimport { getAnimationKeyframes } from '../../lib/theming/AnimationKeyframes';\nimport { isIE11 } from '../../lib/client';\n\nexport const getStyles = (emotion: Emotion) => {\n  const AnimationKeyframes = getAnimationKeyframes(emotion);\n  return memoizeStyle({\n    circle(t: Theme) {\n      return emotion.css`\n        stroke: ${t.spinnerColor};\n\n        ${\n          !isIE11 &&\n          `\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        `\n        }\n      `;\n    },\n    circleDimmedColor(t: Theme) {\n      return emotion.css`\n        stroke: ${t.spinnerDimmedColor};\n      `;\n    },\n    circleWithoutColorAnimation() {\n      return emotion.css`\n        ${\n          !isIE11 &&\n          `\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        `\n        }\n      `;\n    },\n\n    captionColor(t: Theme) {\n      return emotion.css`\n        color: ${t.spinnerCaptionColor};\n      `;\n    },\n\n    inline() {\n      return emotion.css`\n        font-size: inherit;\n        line-height: inherit;\n      `;\n    },\n\n    mini(t: Theme) {\n      return emotion.css`\n        margin-left: ${t.spinnerCaptionGapSmall};\n        font-size: ${t.spinnerFontSizeSmall};\n        line-height: ${t.spinnerLineHeightSmall};\n      `;\n    },\n\n    small(t: Theme) {\n      return emotion.css`\n        margin: ${t.spinnerCaptionMarginSmall};\n        font-size: ${t.spinnerFontSizeSmall};\n        line-height: ${t.spinnerLineHeightSmall};\n      `;\n    },\n\n    normal(t: Theme) {\n      return emotion.css`\n        display: block;\n        font-size: ${t.spinnerFontSizeMedium};\n        line-height: ${t.spinnerLineHeightMedium};\n        margin-top: ${t.spinnerCaptionGapMedium};\n      `;\n    },\n\n    medium(t: Theme) {\n      return emotion.css`\n        margin: ${t.spinnerCaptionMarginMedium};\n        font-size: ${t.spinnerFontSizeMedium};\n        line-height: ${t.spinnerLineHeightMedium};\n      `;\n    },\n\n    big(t: Theme) {\n      return emotion.css`\n        display: block;\n        font-size: ${t.spinnerFontSizeLarge};\n        line-height: ${t.spinnerLineHeightLarge};\n        margin-top: ${t.spinnerCaptionGapLarge};\n      `;\n    },\n\n    large(t: Theme) {\n      return emotion.css`\n        font-size: ${t.spinnerFontSizeLarge};\n        line-height: ${t.spinnerLineHeightLarge};\n        margin: ${t.spinnerCaptionMarginLarge};\n      `;\n    },\n\n    spinner() {\n      return emotion.css`\n        display: inline-block;\n        text-align: center;\n        line-height: normal;\n      `;\n    },\n\n    inner() {\n      return emotion.css`\n        display: inline-block;\n      `;\n    },\n  });\n};\n"]}

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

@@ -1,13 +1,17 @@
+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(t: Theme): string;
+    circleWithoutColorAnimation(): string;
     captionColor(t: Theme): string;
     inline(): string;
     mini(t: Theme): string;
+    small(t: Theme): string;
     normal(t: Theme): string;
+    medium(t: Theme): string;
     big(t: Theme): string;
+    large(t: Theme): string;
     spinner(): string;
     inner(): string;
 };