@skbkontur/react-ui 0.0.0-6a047cca2c → 0.0.0-6fbd9fadb2

package/cjs/internal/ThemePlayground/HintPlayground.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-export declare class HintPlayground extends React.Component<{}, {}> {
+export declare class HintPlayground extends React.Component {
     render(): JSX.Element;
     private pushToast;
     private pushToastWithAction;

package/cjs/internal/ThemePlayground/HintPlayground.js

@@ -1,4 +1,4 @@
-"use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");exports.__esModule = true;exports.HintPlayground = void 0;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.HintPlayground = void 0;var _inheritsLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/inheritsLoose"));var _react = _interopRequireDefault(require("react"));
 
 var _Gapped = require("../../components/Gapped");
 var _Button = require("../../components/Button");

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

@@ -1 +1 @@
-{"version":3,"sources":["HintPlayground.tsx"],"names":["HintPlayground","pushToast","Toast","push","pushToastWithAction","label","handler","render","React","Component"],"mappings":"0PAAA;;AAEA;AACA;AACA;AACA,+C;;AAEaA,c;;;;;;;;;;;;;;AAcHC,IAAAA,S,GAAY,YAAM;AACxBC,mBAAMC,IAAN,CAAW,iBAAX;AACD,K;;AAEOC,IAAAA,mB,GAAsB,YAAM;AAClCF,mBAAMC,IAAN,CAAW,iBAAX,EAA8B,EAAEE,KAAK,EAAE,QAAT,EAAmBC,OAAO,EAAE,2BAAM,IAAN,EAA5B,EAA9B;AACD,K,4DAnBMC,M,GAAP,kBAAgB,CACd,oBACE,6BAAC,cAAD,IAAQ,GAAG,EAAE,EAAb,iBACE,6BAAC,UAAD,IAAM,MAAM,MAAZ,EAAa,MAAM,MAAnB,EAAoB,IAAI,EAAE,eAA1B,iBACE,6BAAC,cAAD,IAAQ,OAAO,EAAE,KAAKN,SAAtB,YADF,CADF,eAIE,6BAAC,UAAD,IAAM,MAAM,MAAZ,EAAa,MAAM,MAAnB,EAAoB,IAAI,EAAE,yBAA1B,EAAqD,GAAG,EAAE,OAA1D,iBACE,6BAAC,cAAD,IAAQ,OAAO,EAAE,KAAKG,mBAAtB,sBADF,CAJF,CADF,CAUD,C,yBAZiCI,eAAMC,S","sourcesContent":["import React from 'react';\r\n\r\nimport { Gapped } from '../../components/Gapped';\r\nimport { Button } from '../../components/Button';\r\nimport { Hint } from '../../components/Hint';\r\nimport { Toast } from '../../components/Toast';\r\n\r\nexport class HintPlayground extends React.Component<{}, {}> {\r\n  public render() {\r\n    return (\r\n      <Gapped gap={10}>\r\n        <Hint manual opened text={'Показать тост'}>\r\n          <Button onClick={this.pushToast}>Toast</Button>\r\n        </Hint>\r\n        <Hint manual opened text={'Показать тост с ссылкой'} pos={'right'}>\r\n          <Button onClick={this.pushToastWithAction}>Toast with link</Button>\r\n        </Hint>\r\n      </Gapped>\r\n    );\r\n  }\r\n\r\n  private pushToast = () => {\r\n    Toast.push('Текст сообщения');\r\n  };\r\n\r\n  private pushToastWithAction = () => {\r\n    Toast.push('Текст сообщения', { label: 'Ссылка', handler: () => null });\r\n  };\r\n}\r\n"]}
+{"version":3,"sources":["HintPlayground.tsx"],"names":["HintPlayground","pushToast","Toast","push","pushToastWithAction","label","handler","render","React","Component"],"mappings":"kQAAA;;AAEA;AACA;AACA;AACA,+C;;AAEaA,c;;;;;;;;;;;;;;AAcHC,IAAAA,S,GAAY,YAAM;AACxBC,mBAAMC,IAAN,CAAW,iBAAX;AACD,K;;AAEOC,IAAAA,mB,GAAsB,YAAM;AAClCF,mBAAMC,IAAN,CAAW,iBAAX,EAA8B,EAAEE,KAAK,EAAE,QAAT,EAAmBC,OAAO,EAAE,2BAAM,IAAN,EAA5B,EAA9B;AACD,K,4DAnBMC,M,GAAP,kBAAgB,CACd,oBACE,6BAAC,cAAD,IAAQ,GAAG,EAAE,EAAb,iBACE,6BAAC,UAAD,IAAM,MAAM,MAAZ,EAAa,MAAM,MAAnB,EAAoB,IAAI,EAAE,eAA1B,iBACE,6BAAC,cAAD,IAAQ,OAAO,EAAE,KAAKN,SAAtB,YADF,CADF,eAIE,6BAAC,UAAD,IAAM,MAAM,MAAZ,EAAa,MAAM,MAAnB,EAAoB,IAAI,EAAE,yBAA1B,EAAqD,GAAG,EAAE,OAA1D,iBACE,6BAAC,cAAD,IAAQ,OAAO,EAAE,KAAKG,mBAAtB,sBADF,CAJF,CADF,CAUD,C,yBAZiCI,eAAMC,S","sourcesContent":["import React from 'react';\n\nimport { Gapped } from '../../components/Gapped';\nimport { Button } from '../../components/Button';\nimport { Hint } from '../../components/Hint';\nimport { Toast } from '../../components/Toast';\n\nexport class HintPlayground extends React.Component {\n  public render() {\n    return (\n      <Gapped gap={10}>\n        <Hint manual opened text={'Показать тост'}>\n          <Button onClick={this.pushToast}>Toast</Button>\n        </Hint>\n        <Hint manual opened text={'Показать тост с ссылкой'} pos={'right'}>\n          <Button onClick={this.pushToastWithAction}>Toast with link</Button>\n        </Hint>\n      </Gapped>\n    );\n  }\n\n  private pushToast = () => {\n    Toast.push('Текст сообщения');\n  };\n\n  private pushToastWithAction = () => {\n    Toast.push('Текст сообщения', { label: 'Ссылка', handler: () => null });\n  };\n}\n"]}

package/cjs/internal/ThemePlayground/PagingPlayground.d.ts

@@ -1,10 +1,10 @@
 import React from 'react';
-export declare class PagingPlayground extends React.Component<{}, {
-    active: number;
-}> {
-    state: {
-        active: number;
-    };
+interface PagingPlaygroundState {
+    activePage: number;
+}
+export declare class PagingPlayground extends React.Component {
+    state: PagingPlaygroundState;
     render(): JSX.Element;
     private handlePageChange;
 }
+export {};

package/cjs/internal/ThemePlayground/PagingPlayground.js

@@ -1,10 +1,13 @@
-"use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");exports.__esModule = true;exports.PagingPlayground = void 0;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.PagingPlayground = void 0;var _inheritsLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/inheritsLoose"));var _react = _interopRequireDefault(require("react"));
 
 var _Paging = require("../../components/Paging");var
 
+
+
+
 PagingPlayground = /*#__PURE__*/function (_React$Component) {(0, _inheritsLoose2.default)(PagingPlayground, _React$Component);function PagingPlayground() {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.
     state = {
-      active: 1 };_this.
+      activePage: 1 };_this.
 
 
 
@@ -13,4 +16,4 @@ PagingPlayground = /*#__PURE__*/function (_React$Component) {(0, _inheritsLoose2
 
     handlePageChange = function (pageNumber) {
       _this.setState({ active: pageNumber });
-    };return _this;}var _proto = PagingPlayground.prototype;_proto.render = function render() {return /*#__PURE__*/_react.default.createElement(_Paging.Paging, { activePage: this.state.active, onPageChange: this.handlePageChange, pagesCount: 12 });};return PagingPlayground;}(_react.default.Component);exports.PagingPlayground = PagingPlayground;
+    };return _this;}var _proto = PagingPlayground.prototype;_proto.render = function render() {return /*#__PURE__*/_react.default.createElement(_Paging.Paging, { activePage: this.state.activePage, onPageChange: this.handlePageChange, pagesCount: 12 });};return PagingPlayground;}(_react.default.Component);exports.PagingPlayground = PagingPlayground;

package/cjs/internal/ThemePlayground/PagingPlayground.js.map

@@ -1 +1 @@
-{"version":3,"sources":["PagingPlayground.tsx"],"names":["PagingPlayground","state","active","handlePageChange","pageNumber","setState","render","React","Component"],"mappings":"4PAAA;;AAEA,iD;;AAEaA,gB;AACJC,IAAAA,K,GAAQ;AACbC,MAAAA,MAAM,EAAE,CADK,E;;;;;;;AAQPC,IAAAA,gB,GAAmB,UAACC,UAAD,EAAwB;AACjD,YAAKC,QAAL,CAAc,EAAEH,MAAM,EAAEE,UAAV,EAAd;AACD,K,8DANME,M,GAAP,kBAAgB,CACd,oBAAO,6BAAC,cAAD,IAAQ,UAAU,EAAE,KAAKL,KAAL,CAAWC,MAA/B,EAAuC,YAAY,EAAE,KAAKC,gBAA1D,EAA4E,UAAU,EAAE,EAAxF,GAAP,CACD,C,2BAPmCI,eAAMC,S","sourcesContent":["import React from 'react';\r\n\r\nimport { Paging } from '../../components/Paging';\r\n\r\nexport class PagingPlayground extends React.Component<{}, { active: number }> {\r\n  public state = {\r\n    active: 1,\r\n  };\r\n\r\n  public render() {\r\n    return <Paging activePage={this.state.active} onPageChange={this.handlePageChange} pagesCount={12} />;\r\n  }\r\n\r\n  private handlePageChange = (pageNumber: number) => {\r\n    this.setState({ active: pageNumber });\r\n  };\r\n}\r\n"]}
+{"version":3,"sources":["PagingPlayground.tsx"],"names":["PagingPlayground","state","activePage","handlePageChange","pageNumber","setState","active","render","React","Component"],"mappings":"oQAAA;;AAEA,iD;;;;;AAKaA,gB;AACJC,IAAAA,K,GAA+B;AACpCC,MAAAA,UAAU,EAAE,CADwB,E;;;;;;;AAQ9BC,IAAAA,gB,GAAmB,UAACC,UAAD,EAAwB;AACjD,YAAKC,QAAL,CAAc,EAAEC,MAAM,EAAEF,UAAV,EAAd;AACD,K,8DANMG,M,GAAP,kBAAgB,CACd,oBAAO,6BAAC,cAAD,IAAQ,UAAU,EAAE,KAAKN,KAAL,CAAWC,UAA/B,EAA2C,YAAY,EAAE,KAAKC,gBAA9D,EAAgF,UAAU,EAAE,EAA5F,GAAP,CACD,C,2BAPmCK,eAAMC,S","sourcesContent":["import React from 'react';\n\nimport { Paging } from '../../components/Paging';\n\ninterface PagingPlaygroundState {\n  activePage: number;\n}\nexport class PagingPlayground extends React.Component {\n  public state: PagingPlaygroundState = {\n    activePage: 1,\n  };\n\n  public render() {\n    return <Paging activePage={this.state.activePage} onPageChange={this.handlePageChange} pagesCount={12} />;\n  }\n\n  private handlePageChange = (pageNumber: number) => {\n    this.setState({ active: pageNumber });\n  };\n}\n"]}

package/cjs/internal/ThemePlayground/Playground.d.ts

@@ -5,16 +5,15 @@ export interface PlaygroundProps {
     onThemeChange: (value: string) => void;
     onEditLinkClick: () => void;
 }
-export declare class Playground extends React.Component<PlaygroundProps, {}> {
+export declare class Playground extends React.Component<PlaygroundProps> {
     private theme;
+    private emotion;
     private stopEl;
     render(): JSX.Element;
     private renderMain;
     private renderTabsGroup;
     private renderTabs;
     private getCurrentTab;
-    private get is8pxTheme();
-    private toggle8pxTheme;
     private renderSizesGroup;
     private renderLinksGroup;
     private renderButtonsGroup;
@@ -26,6 +25,7 @@ export declare class Playground extends React.Component<PlaygroundProps, {}> {
     private renderHintsGroup;
     private renderTooltip;
     private renderPaging;
+    private renderFileUploader;
     private renderStickyStopElement;
     private getStickyStop;
 }

package/cjs/internal/ThemePlayground/Playground.js

@@ -1,24 +1,24 @@
-"use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");exports.__esModule = true;exports.Playground = void 0;var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));var _inheritsLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/inheritsLoose"));var _react = _interopRequireDefault(require("react"));
-var _classnames = _interopRequireDefault(require("classnames"));
+"use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;exports.__esModule = true;exports.Playground = void 0;var _inheritsLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/inheritsLoose"));var _react = _interopRequireDefault(require("react"));
 var _Search = _interopRequireDefault(require("@skbkontur/react-icons/Search"));
-var _Card = _interopRequireDefault(require("@skbkontur/react-icons/Card"));
 var _Link = _interopRequireDefault(require("@skbkontur/react-icons/Link"));
 var _Ok = _interopRequireDefault(require("@skbkontur/react-icons/Ok"));
 var _Error = _interopRequireDefault(require("@skbkontur/react-icons/Error"));
 var _Trash = _interopRequireDefault(require("@skbkontur/react-icons/Trash"));
 var _HelpDot = _interopRequireDefault(require("@skbkontur/react-icons/HelpDot"));
 
+
 var _Button = require("../../components/Button");
 var _Tabs = require("../../components/Tabs");
 var _Gapped = require("../../components/Gapped");
 var _Link2 = require("../../components/Link");
 var _Input = require("../../components/Input");
-var _Toggle = require("../../components/Toggle");
-var _ThemeContext = require("../../lib/theming/ThemeContext");
 var _Tooltip = require("../../components/Tooltip");
 var _Sticky = require("../../components/Sticky");
 
 var _currentEnvironment = require("../../lib/currentEnvironment");
+var _Emotion = require("../../lib/theming/Emotion");
+var _FileUploader = require("../../components/FileUploader");
+var _ThemeContext = require("../../lib/theming/ThemeContext");
 
 var _constants = require("./constants");
 var _TokenInputPlayground = require("./TokenInputPlayground");
@@ -27,13 +27,13 @@ var _TogglePlayground = require("./TogglePlayground");
 var _SwitcherPlayground = require("./SwitcherPlayground");
 var _FxInputPlayground = require("./FxInputPlayground");
 var _CurrencyInputPlayground = require("./CurrencyInputPlayground");
-var _SelectPlayground = require("./SelectPlayground");
 var _helpers = require("./helpers");
 var _CheckboxPlayground = require("./CheckboxPlayground");
 var _RadioPlayground = require("./RadioPlayground");
 var _PagingPlayground = require("./PagingPlayground");
 var _HintPlayground = require("./HintPlayground");
 var _ComponentsGroup = require("./ComponentsGroup");
+var _SizesGroup = require("./SizesGroup");
 var _Playground = require("./Playground.styles");
 
 var useSticky = !_currentEnvironment.isTestEnv;var
@@ -45,7 +45,8 @@ var useSticky = !_currentEnvironment.isTestEnv;var
 
 
 Playground = /*#__PURE__*/function (_React$Component) {(0, _inheritsLoose2.default)(Playground, _React$Component);function Playground() {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.
-    theme = void 0;_this.
+
+
     stopEl = /*#__PURE__*/_react.default.createRef();_this.
 
 
@@ -73,6 +74,15 @@ Playground = /*#__PURE__*/function (_React$Component) {(0, _inheritsLoose2.defau
 
 
 
+
+
+
+
+
+
+
+
+
 
 
 
@@ -116,10 +126,6 @@ Playground = /*#__PURE__*/function (_React$Component) {(0, _inheritsLoose2.defau
 
 
 
-
-
-
-
 
 
 
@@ -129,63 +135,25 @@ Playground = /*#__PURE__*/function (_React$Component) {(0, _inheritsLoose2.defau
       switch (_this.props.currentThemeType) {
         case _constants.ThemeType.Dark:
           return _constants.ThemeType.Dark;
-        case _constants.ThemeType.Flat:
-        case _constants.ThemeType.Flat8px:
-          return _constants.ThemeType.Flat;
-        case _constants.ThemeType.Default:
-        case _constants.ThemeType.Default8px:
+        case _constants.ThemeType.FlatOld:
+          return _constants.ThemeType.FlatOld;
+        case _constants.ThemeType.DefaultOld:
+          return _constants.ThemeType.DefaultOld;
+        case _constants.ThemeType.Theme2022:
+          return _constants.ThemeType.Theme2022;
+        case _constants.ThemeType.Theme2022Dark:
+          return _constants.ThemeType.Theme2022Dark;
         default:
           return _constants.ThemeType.Default;}
 
     };_this.
 
-
-
-
-
-
-
-
-
-
-
-    toggle8pxTheme = function (value) {var _this$props =
-      _this.props,currentThemeType = _this$props.currentThemeType,onThemeChange = _this$props.onThemeChange;
-      switch (currentThemeType) {
-        case _constants.ThemeType.Default:
-          onThemeChange(_constants.ThemeType.Default8px);
-          break;
-        case _constants.ThemeType.Default8px:
-          onThemeChange(_constants.ThemeType.Default);
-          break;
-        case _constants.ThemeType.Flat:
-          onThemeChange(_constants.ThemeType.Flat8px);
-          break;
-        case _constants.ThemeType.Flat8px:
-          onThemeChange(_constants.ThemeType.Flat);
-          break;}
-
-    };_this.
-
     renderSizesGroup = function () {
-      var Group = function Group(_ref) {var size = _ref.size;return /*#__PURE__*/(
-          _react.default.createElement(_Gapped.Gapped, { wrap: true, verticalAlign: "middle", gap: 10 }, /*#__PURE__*/
-          _react.default.createElement(_SelectPlayground.SelectPlayground, { width: 120, size: size }), /*#__PURE__*/
-          _react.default.createElement(_Input.Input, { rightIcon: /*#__PURE__*/_react.default.createElement(_Card.default, null), placeholder: 'Text value', size: size }), /*#__PURE__*/
-          _react.default.createElement(_Button.Button, { width: 120, size: size }, "Button"), /*#__PURE__*/
-
-
-          _react.default.createElement(_Button.Button, { icon: /*#__PURE__*/_react.default.createElement(_Link.default, null), use: 'link', size: size }, "Button like a link")));};
-
-
-
-
-
       return /*#__PURE__*/(
         _react.default.createElement(_ComponentsGroup.ComponentsGroup, { title: 'Размеры', theme: _this.theme }, /*#__PURE__*/
-        _react.default.createElement(Group, { size: 'small' }), /*#__PURE__*/
-        _react.default.createElement(Group, { size: 'medium' }), /*#__PURE__*/
-        _react.default.createElement(Group, { size: 'large' })));
+        _react.default.createElement(_SizesGroup.SizesGroup, { size: 'small' }), /*#__PURE__*/
+        _react.default.createElement(_SizesGroup.SizesGroup, { size: 'medium' }), /*#__PURE__*/
+        _react.default.createElement(_SizesGroup.SizesGroup, { size: 'large' })));
 
 
     };_this.
@@ -213,6 +181,7 @@ Playground = /*#__PURE__*/function (_React$Component) {(0, _inheritsLoose2.defau
       { children: 'Primary', use: 'primary' },
       { children: 'Danger', use: 'danger' },
       { children: 'Pay', use: 'pay' },
+      { children: 'Success', use: 'success' },
       { children: 'Disabled', disabled: true },
       { children: 'Back', arrow: 'left', size: 'medium', width: 110 },
       { children: 'Forward', arrow: true, size: 'medium', use: 'primary', width: 110 },
@@ -291,8 +260,9 @@ Playground = /*#__PURE__*/function (_React$Component) {(0, _inheritsLoose2.defau
     };_this.
 
     renderTooltip = function () {
+      var styles = (0, _Playground.getStyles)(_this.emotion);
       var tooltipContent = function tooltipContent() {return /*#__PURE__*/(
-          _react.default.createElement("div", { className: _Playground.jsStyles.tooltipContent() },
+          _react.default.createElement("div", { className: styles.tooltipContent() },
           'Информация об ошибке. Короткий объясняющий текст и ссылка, если нужно'));};
 
 
@@ -311,10 +281,18 @@ Playground = /*#__PURE__*/function (_React$Component) {(0, _inheritsLoose2.defau
         _react.default.createElement(_PagingPlayground.PagingPlayground, null)));
 
 
+    };_this.
+
+    renderFileUploader = function () {
+      return /*#__PURE__*/(
+        _react.default.createElement(_ComponentsGroup.ComponentsGroup, { title: 'FileUploader', theme: _this.theme }, /*#__PURE__*/
+        _react.default.createElement(_FileUploader.FileUploader, { multiple: true })));
+
+
     };_this.
 
     renderStickyStopElement = function () {
       return /*#__PURE__*/_react.default.createElement("div", { ref: _this.stopEl, style: { height: 50 } });
     };_this.
 
-    getStickyStop = function () {return _this.stopEl.current;};return _this;}var _proto = Playground.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.renderMain = function renderMain() {var wrapperClassName = (0, _classnames.default)(_Playground.jsStyles.playground(), _Playground.jsStyles.playgroundWrapper(this.theme));return /*#__PURE__*/_react.default.createElement("div", { className: wrapperClassName }, /*#__PURE__*/_react.default.createElement(_Gapped.Gapped, { vertical: true, gap: 50 }, this.renderTabsGroup(), this.renderSizesGroup(), this.renderLinksGroup(), this.renderButtonsGroup(), this.renderInputsGroup(), this.renderOtherInputsGroup(), this.renderTokenInputsGroup(), this.renderSwitchersGroup(), this.renderControlsGroup()), this.renderStickyStopElement(), /*#__PURE__*/_react.default.createElement(_Gapped.Gapped, { vertical: true, gap: 50 }, this.renderHintsGroup(), this.renderTooltip(), this.renderPaging()));};_proto.renderTabs = function renderTabs() {var _cn;var _this$props2 = this.props,currentThemeType = _this$props2.currentThemeType,onThemeChange = _this$props2.onThemeChange,onEditLinkClick = _this$props2.onEditLinkClick;var tabsOuterWrapperStyle = { background: this.theme.bgDefault };var tabsOuterWrapperClass = (0, _classnames.default)((_cn = {}, _cn[_Playground.jsStyles.tabsWrapper(this.theme)] = true, _cn[_Playground.jsStyles.stickyTabsWrapper(this.theme)] = useSticky, _cn));return /*#__PURE__*/_react.default.createElement("div", { style: tabsOuterWrapperStyle, className: tabsOuterWrapperClass }, /*#__PURE__*/_react.default.createElement(_Gapped.Gapped, { gap: 40 }, /*#__PURE__*/_react.default.createElement(_Tabs.Tabs, { value: this.getCurrentTab(), onValueChange: onThemeChange, vertical: false }, /*#__PURE__*/_react.default.createElement("div", { className: _Playground.jsStyles.tabsInnerWrapper(this.theme) }, /*#__PURE__*/_react.default.createElement(_Tabs.Tabs.Tab, { id: _constants.ThemeType.Default }, "\u0414\u0435\u0444\u043E\u043B\u0442\u043D\u0430\u044F"), /*#__PURE__*/_react.default.createElement(_Tabs.Tabs.Tab, { id: _constants.ThemeType.Flat }, "\u041F\u043B\u043E\u0441\u043A\u0430\u044F"), /*#__PURE__*/_react.default.createElement(_Tabs.Tabs.Tab, { id: _constants.ThemeType.Dark }, "\u0422\u0435\u043C\u043D\u0430\u044F"))), /*#__PURE__*/_react.default.createElement(_Gapped.Gapped, null, /*#__PURE__*/_react.default.createElement(_Toggle.Toggle, { checked: this.is8pxTheme, onValueChange: this.toggle8pxTheme, disabled: currentThemeType === _constants.ThemeType.Dark }), /*#__PURE__*/_react.default.createElement("span", null, "8px")), /*#__PURE__*/_react.default.createElement(_Link2.Link, { onClick: onEditLinkClick }, "\u041D\u0430\u0441\u0442\u0440\u043E\u0438\u0442\u044C \u0442\u0435\u043C\u0443")));};(0, _createClass2.default)(Playground, [{ key: "is8pxTheme", get: function get() {switch (this.props.currentThemeType) {case _constants.ThemeType.Default8px:case _constants.ThemeType.Flat8px:return true;default:return false;}} }]);return Playground;}(_react.default.Component);exports.Playground = Playground;
+    getStickyStop = function () {return _this.stopEl.current;};return _this;}var _proto = Playground.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.ThemeConsumer, null, function (theme) {_this2.theme = theme;return _this2.renderMain();});});};_proto.renderMain = function renderMain() {var styles = (0, _Playground.getStyles)(this.emotion);var wrapperClassName = this.emotion.cx(styles.playground(), styles.playgroundWrapper(this.theme));return /*#__PURE__*/_react.default.createElement("div", { className: wrapperClassName }, /*#__PURE__*/_react.default.createElement(_Gapped.Gapped, { vertical: true, gap: 50 }, this.renderTabsGroup(), this.renderSizesGroup(), this.renderLinksGroup(), this.renderButtonsGroup(), this.renderInputsGroup(), this.renderOtherInputsGroup(), this.renderTokenInputsGroup(), this.renderSwitchersGroup(), this.renderControlsGroup()), this.renderStickyStopElement(), /*#__PURE__*/_react.default.createElement(_Gapped.Gapped, { vertical: true, gap: 50 }, this.renderHintsGroup(), this.renderTooltip(), this.renderPaging(), this.renderFileUploader()));};_proto.renderTabs = function renderTabs() {var _this$emotion$cx;var styles = (0, _Playground.getStyles)(this.emotion);var _this$props = this.props,onThemeChange = _this$props.onThemeChange,onEditLinkClick = _this$props.onEditLinkClick;var tabsOuterWrapperStyle = { background: this.theme.bgDefault };var tabsOuterWrapperClass = this.emotion.cx((_this$emotion$cx = {}, _this$emotion$cx[styles.tabsWrapper(this.theme)] = true, _this$emotion$cx[styles.stickyTabsWrapper(this.theme)] = useSticky, _this$emotion$cx));return /*#__PURE__*/_react.default.createElement("div", { style: tabsOuterWrapperStyle, className: tabsOuterWrapperClass }, /*#__PURE__*/_react.default.createElement(_Gapped.Gapped, { gap: 40 }, /*#__PURE__*/_react.default.createElement(_Tabs.Tabs, { value: this.getCurrentTab(), onValueChange: onThemeChange, vertical: false }, /*#__PURE__*/_react.default.createElement("div", { className: styles.tabsInnerWrapper(this.theme) }, /*#__PURE__*/_react.default.createElement(_Tabs.Tabs.Tab, { id: _constants.ThemeType.Default }, "\u0414\u0435\u0444\u043E\u043B\u0442\u043D\u0430\u044F"), /*#__PURE__*/_react.default.createElement(_Tabs.Tabs.Tab, { id: _constants.ThemeType.Dark }, "\u0422\u0435\u043C\u043D\u0430\u044F"), /*#__PURE__*/_react.default.createElement(_Tabs.Tabs.Tab, { id: _constants.ThemeType.DefaultOld }, "\u0414\u0435\u0444\u043E\u043B\u0442\u043D\u0430\u044F 3.0"), /*#__PURE__*/_react.default.createElement(_Tabs.Tabs.Tab, { id: _constants.ThemeType.FlatOld }, "\u041F\u043B\u043E\u0441\u043A\u0430\u044F 3.0"), /*#__PURE__*/_react.default.createElement(_Tabs.Tabs.Tab, { id: _constants.ThemeType.Theme2022 }, "\u041D\u043E\u0432\u0430\u044F 2022"), /*#__PURE__*/_react.default.createElement(_Tabs.Tabs.Tab, { id: _constants.ThemeType.Theme2022Dark }, "\u041D\u043E\u0432\u0430\u044F 2022 \u0422\u0451\u043C\u043D\u0430\u044F"))), /*#__PURE__*/_react.default.createElement(_Link2.Link, { onClick: onEditLinkClick }, "\u041D\u0430\u0441\u0442\u0440\u043E\u0438\u0442\u044C \u0442\u0435\u043C\u0443")));};return Playground;}(_react.default.Component);exports.Playground = Playground;

package/cjs/internal/ThemePlayground/Playground.js.map

@@ -1 +1 @@
-{"version":3,"sources":["Playground.tsx"],"names":["useSticky","isTestEnv","Playground","theme","stopEl","React","createRef","renderTabsGroup","getStickyStop","renderTabs","getCurrentTab","props","currentThemeType","ThemeType","Dark","Flat","Flat8px","Default","Default8px","toggle8pxTheme","value","onThemeChange","renderSizesGroup","Group","size","renderLinksGroup","propsList","icon","children","use","disabled","renderButtonsGroup","arrow","width","loading","renderInputsGroup","placeholder","error","warning","fromProps","renderTokenInputsGroup","renderOtherInputsGroup","renderSwitchersGroup","renderControlsGroup","renderHintsGroup","renderTooltip","tooltipContent","jsStyles","renderPaging","renderStickyStopElement","height","current","render","renderMain","wrapperClassName","playground","playgroundWrapper","onEditLinkClick","tabsOuterWrapperStyle","background","bgDefault","tabsOuterWrapperClass","tabsWrapper","stickyTabsWrapper","tabsInnerWrapper","is8pxTheme","Component"],"mappings":"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","sourcesContent":["import React from 'react';\r\nimport cn from 'classnames';\r\nimport SearchIcon from '@skbkontur/react-icons/Search';\r\nimport CardIcon from '@skbkontur/react-icons/Card';\r\nimport LinkIcon from '@skbkontur/react-icons/Link';\r\nimport OkIcon from '@skbkontur/react-icons/Ok';\r\nimport ErrorIcon from '@skbkontur/react-icons/Error';\r\nimport TrashIcon from '@skbkontur/react-icons/Trash';\r\nimport HelpDotIcon from '@skbkontur/react-icons/HelpDot';\r\n\r\nimport { Button, ButtonProps } from '../../components/Button';\r\nimport { Tabs } from '../../components/Tabs';\r\nimport { Gapped } from '../../components/Gapped';\r\nimport { Link, LinkProps } from '../../components/Link';\r\nimport { Input, InputProps } from '../../components/Input';\r\nimport { Toggle } from '../../components/Toggle';\r\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\r\nimport { Tooltip } from '../../components/Tooltip';\r\nimport { Sticky } from '../../components/Sticky';\r\nimport { Theme } from '../../lib/theming/Theme';\r\nimport { isTestEnv } from '../../lib/currentEnvironment';\r\n\r\nimport { ThemeType } from './constants';\r\nimport { TokenInputPlayground } from './TokenInputPlayground';\r\nimport { DatePickerPlayground } from './AnotherInputsPlayground';\r\nimport { TogglePlayground } from './TogglePlayground';\r\nimport { SwitcherPlayground } from './SwitcherPlayground';\r\nimport { FxInputPlayground } from './FxInputPlayground';\r\nimport { CurrencyInputPlayground } from './CurrencyInputPlayground';\r\nimport { SelectPlayground } from './SelectPlayground';\r\nimport { getComponentsFromPropsList } from './helpers';\r\nimport { CheckboxPlayground } from './CheckboxPlayground';\r\nimport { RadioPlayground } from './RadioPlayground';\r\nimport { PagingPlayground } from './PagingPlayground';\r\nimport { HintPlayground } from './HintPlayground';\r\nimport { ComponentsGroup } from './ComponentsGroup';\r\nimport { jsStyles } from './Playground.styles';\r\n\r\nconst useSticky = !isTestEnv;\r\n\r\nexport interface PlaygroundProps {\r\n  currentThemeType: ThemeType;\r\n  onThemeChange: (value: string) => void;\r\n  onEditLinkClick: () => void;\r\n}\r\n\r\nexport class Playground extends React.Component<PlaygroundProps, {}> {\r\n  private theme!: Theme;\r\n  private stopEl = React.createRef<HTMLDivElement>();\r\n\r\n  public render() {\r\n    return (\r\n      <ThemeContext.Consumer>\r\n        {theme => {\r\n          this.theme = theme;\r\n          return this.renderMain();\r\n        }}\r\n      </ThemeContext.Consumer>\r\n    );\r\n  }\r\n  private renderMain() {\r\n    const wrapperClassName = cn(jsStyles.playground(), jsStyles.playgroundWrapper(this.theme));\r\n    return (\r\n      <div className={wrapperClassName}>\r\n        <Gapped vertical gap={50}>\r\n          {this.renderTabsGroup()}\r\n          {this.renderSizesGroup()}\r\n          {this.renderLinksGroup()}\r\n          {this.renderButtonsGroup()}\r\n          {this.renderInputsGroup()}\r\n          {this.renderOtherInputsGroup()}\r\n          {this.renderTokenInputsGroup()}\r\n          {this.renderSwitchersGroup()}\r\n          {this.renderControlsGroup()}\r\n        </Gapped>\r\n        {this.renderStickyStopElement()}\r\n        <Gapped vertical gap={50}>\r\n          {this.renderHintsGroup()}\r\n          {this.renderTooltip()}\r\n          {this.renderPaging()}\r\n        </Gapped>\r\n      </div>\r\n    );\r\n  }\r\n\r\n  private renderTabsGroup = () => {\r\n    return useSticky ? (\r\n      <Sticky side={'top'} getStop={this.getStickyStop}>\r\n        {this.renderTabs()}\r\n      </Sticky>\r\n    ) : (\r\n      this.renderTabs()\r\n    );\r\n  };\r\n\r\n  private renderTabs() {\r\n    const { currentThemeType, onThemeChange, onEditLinkClick } = this.props;\r\n    const tabsOuterWrapperStyle = { background: this.theme.bgDefault };\r\n    const tabsOuterWrapperClass = cn({\r\n      [jsStyles.tabsWrapper(this.theme)]: true,\r\n      [jsStyles.stickyTabsWrapper(this.theme)]: useSticky,\r\n    });\r\n\r\n    return (\r\n      <div style={tabsOuterWrapperStyle} className={tabsOuterWrapperClass}>\r\n        <Gapped gap={40}>\r\n          <Tabs value={this.getCurrentTab()} onValueChange={onThemeChange} vertical={false}>\r\n            <div className={jsStyles.tabsInnerWrapper(this.theme)}>\r\n              <Tabs.Tab id={ThemeType.Default}>Дефолтная</Tabs.Tab>\r\n              <Tabs.Tab id={ThemeType.Flat}>Плоская</Tabs.Tab>\r\n              <Tabs.Tab id={ThemeType.Dark}>Темная</Tabs.Tab>\r\n            </div>\r\n          </Tabs>\r\n          <Gapped>\r\n            <Toggle\r\n              checked={this.is8pxTheme}\r\n              onValueChange={this.toggle8pxTheme}\r\n              disabled={currentThemeType === ThemeType.Dark}\r\n            />\r\n            <span>8px</span>\r\n          </Gapped>\r\n          <Link onClick={onEditLinkClick}>Настроить тему</Link>\r\n        </Gapped>\r\n      </div>\r\n    );\r\n  }\r\n\r\n  private getCurrentTab = () => {\r\n    switch (this.props.currentThemeType) {\r\n      case ThemeType.Dark:\r\n        return ThemeType.Dark;\r\n      case ThemeType.Flat:\r\n      case ThemeType.Flat8px:\r\n        return ThemeType.Flat;\r\n      case ThemeType.Default:\r\n      case ThemeType.Default8px:\r\n      default:\r\n        return ThemeType.Default;\r\n    }\r\n  };\r\n\r\n  private get is8pxTheme(): boolean {\r\n    switch (this.props.currentThemeType) {\r\n      case ThemeType.Default8px:\r\n      case ThemeType.Flat8px:\r\n        return true;\r\n      default:\r\n        return false;\r\n    }\r\n  }\r\n\r\n  private toggle8pxTheme = (value: boolean) => {\r\n    const { currentThemeType, onThemeChange } = this.props;\r\n    switch (currentThemeType) {\r\n      case ThemeType.Default:\r\n        onThemeChange(ThemeType.Default8px);\r\n        break;\r\n      case ThemeType.Default8px:\r\n        onThemeChange(ThemeType.Default);\r\n        break;\r\n      case ThemeType.Flat:\r\n        onThemeChange(ThemeType.Flat8px);\r\n        break;\r\n      case ThemeType.Flat8px:\r\n        onThemeChange(ThemeType.Flat);\r\n        break;\r\n    }\r\n  };\r\n\r\n  private renderSizesGroup = () => {\r\n    const Group = ({ size }: { size: 'small' | 'medium' | 'large' }) => (\r\n      <Gapped wrap verticalAlign=\"middle\" gap={10}>\r\n        <SelectPlayground width={120} size={size} />\r\n        <Input rightIcon={<CardIcon />} placeholder={'Text value'} size={size} />\r\n        <Button width={120} size={size}>\r\n          Button\r\n        </Button>\r\n        <Button icon={<LinkIcon />} use={'link'} size={size}>\r\n          Button like a link\r\n        </Button>\r\n      </Gapped>\r\n    );\r\n\r\n    return (\r\n      <ComponentsGroup title={'Размеры'} theme={this.theme}>\r\n        <Group size={'small'} />\r\n        <Group size={'medium'} />\r\n        <Group size={'large'} />\r\n      </ComponentsGroup>\r\n    );\r\n  };\r\n\r\n  private renderLinksGroup = () => {\r\n    const propsList: LinkProps[] = [\r\n      { icon: <LinkIcon />, children: 'Enabled' },\r\n      { icon: <OkIcon />, use: 'success', children: 'Success' },\r\n      { icon: <ErrorIcon />, use: 'danger', children: 'Danger' },\r\n      { icon: <TrashIcon />, use: 'grayed', children: 'Grayed' },\r\n      { icon: <TrashIcon />, children: 'Disabled', disabled: true },\r\n    ];\r\n    return (\r\n      <ComponentsGroup title={'Ссылки'} theme={this.theme}>\r\n        <Gapped wrap verticalAlign=\"middle\" gap={10}>\r\n          {getComponentsFromPropsList(<Link />, propsList)}\r\n        </Gapped>\r\n      </ComponentsGroup>\r\n    );\r\n  };\r\n\r\n  private renderButtonsGroup = () => {\r\n    const propsList: ButtonProps[] = [\r\n      { children: 'Default' },\r\n      { children: 'Primary', use: 'primary' },\r\n      { children: 'Danger', use: 'danger' },\r\n      { children: 'Pay', use: 'pay' },\r\n      { children: 'Disabled', disabled: true },\r\n      { children: 'Back', arrow: 'left', size: 'medium', width: 110 },\r\n      { children: 'Forward', arrow: true, size: 'medium', use: 'primary', width: 110 },\r\n      { children: 'Loading', size: 'medium', loading: true },\r\n    ];\r\n\r\n    return (\r\n      <ComponentsGroup title={'Кнопки'} theme={this.theme}>\r\n        {getComponentsFromPropsList(<Button width={120} size={'small'} />, propsList)}\r\n      </ComponentsGroup>\r\n    );\r\n  };\r\n\r\n  private renderInputsGroup = () => {\r\n    const propsList: InputProps[] = [\r\n      { placeholder: 'Enabled' },\r\n      { placeholder: 'Error', error: true },\r\n      { placeholder: 'Warning', warning: true },\r\n      { placeholder: 'Disabled', disabled: true },\r\n    ];\r\n    const fromProps = getComponentsFromPropsList(<Input width={120} />, propsList);\r\n    return (\r\n      <ComponentsGroup title={'Поле ввода'} theme={this.theme}>\r\n        <Input width={380} prefix=\"https://kontur.ru/search?query=\" rightIcon={<SearchIcon />} />\r\n        <div>\r\n          <Gapped gap={10}>{fromProps}</Gapped>\r\n        </div>\r\n      </ComponentsGroup>\r\n    );\r\n  };\r\n\r\n  private renderTokenInputsGroup = () => {\r\n    return (\r\n      <ComponentsGroup title={'Поле с токеном'} theme={this.theme}>\r\n        <TokenInputPlayground />\r\n      </ComponentsGroup>\r\n    );\r\n  };\r\n\r\n  private renderOtherInputsGroup = () => {\r\n    return (\r\n      <ComponentsGroup title={'Прочие поля'} theme={this.theme}>\r\n        <CurrencyInputPlayground />\r\n        <FxInputPlayground />\r\n        <DatePickerPlayground />\r\n      </ComponentsGroup>\r\n    );\r\n  };\r\n\r\n  private renderSwitchersGroup = () => {\r\n    return (\r\n      <ComponentsGroup title={'Переключатели'} theme={this.theme}>\r\n        <SwitcherPlayground />\r\n      </ComponentsGroup>\r\n    );\r\n  };\r\n\r\n  private renderControlsGroup = () => {\r\n    return (\r\n      <ComponentsGroup title={'Радио, чекбоксы'} theme={this.theme}>\r\n        <Gapped verticalAlign={'top'} gap={60}>\r\n          <CheckboxPlayground />\r\n          <RadioPlayground />\r\n          <TogglePlayground />\r\n        </Gapped>\r\n      </ComponentsGroup>\r\n    );\r\n  };\r\n\r\n  private renderHintsGroup = () => {\r\n    return (\r\n      <ComponentsGroup title={'Тултип'} theme={this.theme}>\r\n        <HintPlayground />\r\n      </ComponentsGroup>\r\n    );\r\n  };\r\n\r\n  private renderTooltip = () => {\r\n    const tooltipContent = () => (\r\n      <div className={jsStyles.tooltipContent()}>\r\n        {'Информация об ошибке. Короткий объясняющий текст и ссылка, если нужно'}\r\n      </div>\r\n    );\r\n    return (\r\n      <ComponentsGroup title={'Тултип'} theme={this.theme}>\r\n        <Tooltip render={tooltipContent} pos=\"right middle\" trigger={'opened'} disableAnimations={true}>\r\n          <Link icon={<HelpDotIcon />} />\r\n        </Tooltip>\r\n      </ComponentsGroup>\r\n    );\r\n  };\r\n\r\n  private renderPaging = () => {\r\n    return (\r\n      <ComponentsGroup title={'Пейджинг'} theme={this.theme}>\r\n        <PagingPlayground />\r\n      </ComponentsGroup>\r\n    );\r\n  };\r\n\r\n  private renderStickyStopElement = () => {\r\n    return <div ref={this.stopEl} style={{ height: 50 }} />;\r\n  };\r\n\r\n  private getStickyStop = () => this.stopEl.current;\r\n}\r\n"]}
+{"version":3,"sources":["Playground.tsx"],"names":["useSticky","isTestEnv","Playground","stopEl","React","createRef","renderTabsGroup","getStickyStop","renderTabs","getCurrentTab","props","currentThemeType","ThemeType","Dark","FlatOld","DefaultOld","Theme2022","Theme2022Dark","Default","renderSizesGroup","theme","renderLinksGroup","propsList","icon","children","use","disabled","renderButtonsGroup","arrow","size","width","loading","renderInputsGroup","placeholder","error","warning","fromProps","renderTokenInputsGroup","renderOtherInputsGroup","renderSwitchersGroup","renderControlsGroup","renderHintsGroup","renderTooltip","styles","emotion","tooltipContent","renderPaging","renderFileUploader","renderStickyStopElement","height","current","render","renderMain","wrapperClassName","cx","playground","playgroundWrapper","onThemeChange","onEditLinkClick","tabsOuterWrapperStyle","background","bgDefault","tabsOuterWrapperClass","tabsWrapper","stickyTabsWrapper","tabsInnerWrapper","Component"],"mappings":"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","sourcesContent":["import React from 'react';\nimport SearchIcon from '@skbkontur/react-icons/Search';\nimport LinkIcon from '@skbkontur/react-icons/Link';\nimport OkIcon from '@skbkontur/react-icons/Ok';\nimport ErrorIcon from '@skbkontur/react-icons/Error';\nimport TrashIcon from '@skbkontur/react-icons/Trash';\nimport HelpDotIcon from '@skbkontur/react-icons/HelpDot';\nimport type { Emotion } from '@emotion/css/create-instance';\n\nimport { Button, ButtonProps } from '../../components/Button';\nimport { Tabs } from '../../components/Tabs';\nimport { Gapped } from '../../components/Gapped';\nimport { Link, LinkProps } from '../../components/Link';\nimport { Input, InputProps } from '../../components/Input';\nimport { Tooltip } from '../../components/Tooltip';\nimport { Sticky } from '../../components/Sticky';\nimport { Theme } from '../../lib/theming/Theme';\nimport { isTestEnv } from '../../lib/currentEnvironment';\nimport { EmotionConsumer } from '../../lib/theming/Emotion';\nimport { FileUploader } from '../../components/FileUploader';\nimport { ThemeConsumer } from '../../lib/theming/ThemeContext';\n\nimport { ThemeType } from './constants';\nimport { TokenInputPlayground } from './TokenInputPlayground';\nimport { DatePickerPlayground } from './AnotherInputsPlayground';\nimport { TogglePlayground } from './TogglePlayground';\nimport { SwitcherPlayground } from './SwitcherPlayground';\nimport { FxInputPlayground } from './FxInputPlayground';\nimport { CurrencyInputPlayground } from './CurrencyInputPlayground';\nimport { getComponentsFromPropsList } from './helpers';\nimport { CheckboxPlayground } from './CheckboxPlayground';\nimport { RadioPlayground } from './RadioPlayground';\nimport { PagingPlayground } from './PagingPlayground';\nimport { HintPlayground } from './HintPlayground';\nimport { ComponentsGroup } from './ComponentsGroup';\nimport { SizesGroup } from './SizesGroup';\nimport { getStyles } from './Playground.styles';\n\nconst useSticky = !isTestEnv;\n\nexport interface PlaygroundProps {\n  currentThemeType: ThemeType;\n  onThemeChange: (value: string) => void;\n  onEditLinkClick: () => void;\n}\n\nexport class Playground extends React.Component<PlaygroundProps> {\n  private theme!: Theme;\n  private emotion!: Emotion;\n  private stopEl = React.createRef<HTMLDivElement>();\n\n  public render() {\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  private renderMain() {\n    const styles = getStyles(this.emotion);\n    const wrapperClassName = this.emotion.cx(styles.playground(), styles.playgroundWrapper(this.theme));\n    return (\n      <div className={wrapperClassName}>\n        <Gapped vertical gap={50}>\n          {this.renderTabsGroup()}\n          {this.renderSizesGroup()}\n          {this.renderLinksGroup()}\n          {this.renderButtonsGroup()}\n          {this.renderInputsGroup()}\n          {this.renderOtherInputsGroup()}\n          {this.renderTokenInputsGroup()}\n          {this.renderSwitchersGroup()}\n          {this.renderControlsGroup()}\n        </Gapped>\n        {this.renderStickyStopElement()}\n        <Gapped vertical gap={50}>\n          {this.renderHintsGroup()}\n          {this.renderTooltip()}\n          {this.renderPaging()}\n          {this.renderFileUploader()}\n        </Gapped>\n      </div>\n    );\n  }\n\n  private renderTabsGroup = () => {\n    return useSticky ? (\n      <Sticky side={'top'} getStop={this.getStickyStop}>\n        {this.renderTabs()}\n      </Sticky>\n    ) : (\n      this.renderTabs()\n    );\n  };\n\n  private renderTabs() {\n    const styles = getStyles(this.emotion);\n    const { onThemeChange, onEditLinkClick } = this.props;\n    const tabsOuterWrapperStyle = { background: this.theme.bgDefault };\n    const tabsOuterWrapperClass = this.emotion.cx({\n      [styles.tabsWrapper(this.theme)]: true,\n      [styles.stickyTabsWrapper(this.theme)]: useSticky,\n    });\n\n    return (\n      <div style={tabsOuterWrapperStyle} className={tabsOuterWrapperClass}>\n        <Gapped gap={40}>\n          <Tabs value={this.getCurrentTab()} onValueChange={onThemeChange} vertical={false}>\n            <div className={styles.tabsInnerWrapper(this.theme)}>\n              <Tabs.Tab id={ThemeType.Default}>Дефолтная</Tabs.Tab>\n              <Tabs.Tab id={ThemeType.Dark}>Темная</Tabs.Tab>\n              <Tabs.Tab id={ThemeType.DefaultOld}>Дефолтная 3.0</Tabs.Tab>\n              <Tabs.Tab id={ThemeType.FlatOld}>Плоская 3.0</Tabs.Tab>\n              <Tabs.Tab id={ThemeType.Theme2022}>Новая 2022</Tabs.Tab>\n              <Tabs.Tab id={ThemeType.Theme2022Dark}>Новая 2022 Тёмная</Tabs.Tab>\n            </div>\n          </Tabs>\n          <Link onClick={onEditLinkClick}>Настроить тему</Link>\n        </Gapped>\n      </div>\n    );\n  }\n\n  private getCurrentTab = () => {\n    switch (this.props.currentThemeType) {\n      case ThemeType.Dark:\n        return ThemeType.Dark;\n      case ThemeType.FlatOld:\n        return ThemeType.FlatOld;\n      case ThemeType.DefaultOld:\n        return ThemeType.DefaultOld;\n      case ThemeType.Theme2022:\n        return ThemeType.Theme2022;\n      case ThemeType.Theme2022Dark:\n        return ThemeType.Theme2022Dark;\n      default:\n        return ThemeType.Default;\n    }\n  };\n\n  private renderSizesGroup = () => {\n    return (\n      <ComponentsGroup title={'Размеры'} theme={this.theme}>\n        <SizesGroup size={'small'} />\n        <SizesGroup size={'medium'} />\n        <SizesGroup size={'large'} />\n      </ComponentsGroup>\n    );\n  };\n\n  private renderLinksGroup = () => {\n    const propsList: LinkProps[] = [\n      { icon: <LinkIcon />, children: 'Enabled' },\n      { icon: <OkIcon />, use: 'success', children: 'Success' },\n      { icon: <ErrorIcon />, use: 'danger', children: 'Danger' },\n      { icon: <TrashIcon />, use: 'grayed', children: 'Grayed' },\n      { icon: <TrashIcon />, children: 'Disabled', disabled: true },\n    ];\n    return (\n      <ComponentsGroup title={'Ссылки'} theme={this.theme}>\n        <Gapped wrap verticalAlign=\"middle\" gap={10}>\n          {getComponentsFromPropsList(<Link />, propsList)}\n        </Gapped>\n      </ComponentsGroup>\n    );\n  };\n\n  private renderButtonsGroup = () => {\n    const propsList: ButtonProps[] = [\n      { children: 'Default' },\n      { children: 'Primary', use: 'primary' },\n      { children: 'Danger', use: 'danger' },\n      { children: 'Pay', use: 'pay' },\n      { children: 'Success', use: 'success' },\n      { children: 'Disabled', disabled: true },\n      { children: 'Back', arrow: 'left', size: 'medium', width: 110 },\n      { children: 'Forward', arrow: true, size: 'medium', use: 'primary', width: 110 },\n      { children: 'Loading', size: 'medium', loading: true },\n    ];\n\n    return (\n      <ComponentsGroup title={'Кнопки'} theme={this.theme}>\n        {getComponentsFromPropsList(<Button width={120} size={'small'} />, propsList)}\n      </ComponentsGroup>\n    );\n  };\n\n  private renderInputsGroup = () => {\n    const propsList: InputProps[] = [\n      { placeholder: 'Enabled' },\n      { placeholder: 'Error', error: true },\n      { placeholder: 'Warning', warning: true },\n      { placeholder: 'Disabled', disabled: true },\n    ];\n    const fromProps = getComponentsFromPropsList(<Input width={120} />, propsList);\n    return (\n      <ComponentsGroup title={'Поле ввода'} theme={this.theme}>\n        <Input width={380} prefix=\"https://kontur.ru/search?query=\" rightIcon={<SearchIcon />} />\n        <div>\n          <Gapped gap={10}>{fromProps}</Gapped>\n        </div>\n      </ComponentsGroup>\n    );\n  };\n\n  private renderTokenInputsGroup = () => {\n    return (\n      <ComponentsGroup title={'Поле с токеном'} theme={this.theme}>\n        <TokenInputPlayground />\n      </ComponentsGroup>\n    );\n  };\n\n  private renderOtherInputsGroup = () => {\n    return (\n      <ComponentsGroup title={'Прочие поля'} theme={this.theme}>\n        <CurrencyInputPlayground />\n        <FxInputPlayground />\n        <DatePickerPlayground />\n      </ComponentsGroup>\n    );\n  };\n\n  private renderSwitchersGroup = () => {\n    return (\n      <ComponentsGroup title={'Переключатели'} theme={this.theme}>\n        <SwitcherPlayground />\n      </ComponentsGroup>\n    );\n  };\n\n  private renderControlsGroup = () => {\n    return (\n      <ComponentsGroup title={'Радио, чекбоксы'} theme={this.theme}>\n        <Gapped verticalAlign={'top'} gap={60}>\n          <CheckboxPlayground />\n          <RadioPlayground />\n          <TogglePlayground />\n        </Gapped>\n      </ComponentsGroup>\n    );\n  };\n\n  private renderHintsGroup = () => {\n    return (\n      <ComponentsGroup title={'Тултип'} theme={this.theme}>\n        <HintPlayground />\n      </ComponentsGroup>\n    );\n  };\n\n  private renderTooltip = () => {\n    const styles = getStyles(this.emotion);\n    const tooltipContent = () => (\n      <div className={styles.tooltipContent()}>\n        {'Информация об ошибке. Короткий объясняющий текст и ссылка, если нужно'}\n      </div>\n    );\n    return (\n      <ComponentsGroup title={'Тултип'} theme={this.theme}>\n        <Tooltip render={tooltipContent} pos=\"right middle\" trigger={'opened'} disableAnimations>\n          <Link icon={<HelpDotIcon />} />\n        </Tooltip>\n      </ComponentsGroup>\n    );\n  };\n\n  private renderPaging = () => {\n    return (\n      <ComponentsGroup title={'Пейджинг'} theme={this.theme}>\n        <PagingPlayground />\n      </ComponentsGroup>\n    );\n  };\n\n  private renderFileUploader = () => {\n    return (\n      <ComponentsGroup title={'FileUploader'} theme={this.theme}>\n        <FileUploader multiple />\n      </ComponentsGroup>\n    );\n  };\n\n  private renderStickyStopElement = () => {\n    return <div ref={this.stopEl} style={{ height: 50 }} />;\n  };\n\n  private getStickyStop = () => this.stopEl.current;\n}\n"]}

package/cjs/internal/ThemePlayground/Playground.md

@@ -1,7 +1,7 @@
-Разные варианты стилизации компонентов:
-
-```jsx harmony
-import { ThemeContextPlayground } from './ThemeContextPlayground';
-
-<ThemeContextPlayground />;
-```
+Разные варианты стилизации компонентов:
+
+```jsx harmony
+import { ThemeContextPlayground } from './ThemeContextPlayground';
+
+<ThemeContextPlayground />;
+```

package/cjs/internal/ThemePlayground/Playground.styles.d.ts

@@ -1,10 +1,12 @@
-export declare const jsStyles: {
+import type { Emotion } from '@emotion/css/create-instance';
+import { Theme } from '../../lib/theming/Theme';
+export declare const getStyles: (emotion: Emotion) => {
     playground(): string;
-    title(t: Readonly<typeof import("../themes/DefaultTheme").DefaultTheme>): string;
-    componentsGroup(t: Readonly<typeof import("../themes/DefaultTheme").DefaultTheme>): string;
+    title(t: Theme): string;
+    componentsGroup(t: Theme): string;
     sidePageBody(): string;
-    variable(t: Readonly<typeof import("../themes/DefaultTheme").DefaultTheme>): string;
-    variableName(t: Readonly<typeof import("../themes/DefaultTheme").DefaultTheme>): string;
+    variable(t: Theme): string;
+    variableName(t: Theme): string;
     deprecated(): string;
     colorIcon(): string;
     baseLinkWrapper(): string;
@@ -12,11 +14,11 @@ export declare const jsStyles: {
     baseVariableRoot(): string;
     loaderWrapper(): string;
     loader(): string;
-    tabsWrapper(t: Readonly<typeof import("../themes/DefaultTheme").DefaultTheme>): string;
+    tabsWrapper(t: Theme): string;
     tooltipContent(): string;
-    stickyTabsWrapper(t: Readonly<typeof import("../themes/DefaultTheme").DefaultTheme>): string;
-    tabsInnerWrapper(t: Readonly<typeof import("../themes/DefaultTheme").DefaultTheme>): string;
-    playgroundWrapper(t: Readonly<typeof import("../themes/DefaultTheme").DefaultTheme>): string;
-    editorHeaderWrapper(t: Readonly<typeof import("../themes/DefaultTheme").DefaultTheme>): string;
-    editorGroupHeader(t: Readonly<typeof import("../themes/DefaultTheme").DefaultTheme>): string;
+    stickyTabsWrapper(t: Theme): string;
+    tabsInnerWrapper(t: Theme): string;
+    playgroundWrapper(t: Theme): string;
+    editorHeaderWrapper(t: Theme): string;
+    editorGroupHeader(t: Theme): string;
 };