@skbkontur/react-ui 0.0.0-cb54865bf2 → 0.0.0-ccbe7cf017

package/cjs/internal/ThemePlayground/Playground.js

@@ -1,7 +1,5 @@
-"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");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"));
@@ -13,12 +11,13 @@ 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 _constants = require("./constants");
 var _TokenInputPlayground = require("./TokenInputPlayground");
@@ -27,7 +26,6 @@ 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");
@@ -35,6 +33,7 @@ var _PagingPlayground = require("./PagingPlayground");
 var _HintPlayground = require("./HintPlayground");
 var _ComponentsGroup = require("./ComponentsGroup");
 var _Playground = require("./Playground.styles");
+var _SizesGroup = require("./SizesGroup");
 
 var useSticky = !_currentEnvironment.isTestEnv;var
 
@@ -45,8 +44,9 @@ 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 = _react.default.createRef();_this.
+
+    stopEl = /*#__PURE__*/_react.default.createRef();_this.
+
 
 
 
@@ -84,7 +84,7 @@ Playground = /*#__PURE__*/function (_React$Component) {(0, _inheritsLoose2.defau
 
 
     renderTabsGroup = function () {
-      return useSticky ?
+      return useSticky ? /*#__PURE__*/
       _react.default.createElement(_Sticky.Sticky, { side: 'top', getStop: _this.getStickyStop },
       _this.renderTabs()) :
 
@@ -114,11 +114,6 @@ Playground = /*#__PURE__*/function (_React$Component) {(0, _inheritsLoose2.defau
 
 
 
-
-
-
-
-
 
 
 
@@ -129,79 +124,41 @@ 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 (
-          _react.default.createElement(_Gapped.Gapped, { wrap: true, verticalAlign: "middle", gap: 10 },
-          _react.default.createElement(_SelectPlayground.SelectPlayground, { width: 120, size: size }),
-          _react.default.createElement(_Input.Input, { rightIcon: _react.default.createElement(_Card.default, null), placeholder: 'Text value', size: size }),
-          _react.default.createElement(_Button.Button, { width: 120, size: size }, "Button"),
-
-
-          _react.default.createElement(_Button.Button, { icon: _react.default.createElement(_Link.default, null), use: 'link', size: size }, "Button like a link")));};
-
-
-
-
-
-      return (
-        _react.default.createElement(_ComponentsGroup.ComponentsGroup, { title: 'Размеры', theme: _this.theme },
-        _react.default.createElement(Group, { size: 'small' }),
-        _react.default.createElement(Group, { size: 'medium' }),
-        _react.default.createElement(Group, { size: 'large' })));
+      return /*#__PURE__*/(
+        _react.default.createElement(_ComponentsGroup.ComponentsGroup, { title: 'Размеры', theme: _this.theme }, /*#__PURE__*/
+        _react.default.createElement(_SizesGroup.SizesGroup, { size: 'small' }), /*#__PURE__*/
+        _react.default.createElement(_SizesGroup.SizesGroup, { size: 'medium' }), /*#__PURE__*/
+        _react.default.createElement(_SizesGroup.SizesGroup, { size: 'large' })));
 
 
     };_this.
 
     renderLinksGroup = function () {
       var propsList = [
-      { icon: _react.default.createElement(_Link.default, null), children: 'Enabled' },
-      { icon: _react.default.createElement(_Ok.default, null), use: 'success', children: 'Success' },
-      { icon: _react.default.createElement(_Error.default, null), use: 'danger', children: 'Danger' },
-      { icon: _react.default.createElement(_Trash.default, null), use: 'grayed', children: 'Grayed' },
-      { icon: _react.default.createElement(_Trash.default, null), children: 'Disabled', disabled: true }];
-
-      return (
-        _react.default.createElement(_ComponentsGroup.ComponentsGroup, { title: 'Ссылки', theme: _this.theme },
+      { icon: /*#__PURE__*/_react.default.createElement(_Link.default, null), children: 'Enabled' },
+      { icon: /*#__PURE__*/_react.default.createElement(_Ok.default, null), use: 'success', children: 'Success' },
+      { icon: /*#__PURE__*/_react.default.createElement(_Error.default, null), use: 'danger', children: 'Danger' },
+      { icon: /*#__PURE__*/_react.default.createElement(_Trash.default, null), use: 'grayed', children: 'Grayed' },
+      { icon: /*#__PURE__*/_react.default.createElement(_Trash.default, null), children: 'Disabled', disabled: true }];
+
+      return /*#__PURE__*/(
+        _react.default.createElement(_ComponentsGroup.ComponentsGroup, { title: 'Ссылки', theme: _this.theme }, /*#__PURE__*/
         _react.default.createElement(_Gapped.Gapped, { wrap: true, verticalAlign: "middle", gap: 10 },
-        (0, _helpers.getComponentsFromPropsList)(_react.default.createElement(_Link2.Link, null), propsList))));
+        (0, _helpers.getComponentsFromPropsList)( /*#__PURE__*/_react.default.createElement(_Link2.Link, null), propsList))));
 
 
 
@@ -213,15 +170,16 @@ 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 },
       { children: 'Loading', size: 'medium', loading: true }];
 
 
-      return (
+      return /*#__PURE__*/(
         _react.default.createElement(_ComponentsGroup.ComponentsGroup, { title: 'Кнопки', theme: _this.theme },
-        (0, _helpers.getComponentsFromPropsList)(_react.default.createElement(_Button.Button, { width: 120, size: 'small' }), propsList)));
+        (0, _helpers.getComponentsFromPropsList)( /*#__PURE__*/_react.default.createElement(_Button.Button, { width: 120, size: 'small' }), propsList)));
 
 
     };_this.
@@ -233,11 +191,11 @@ Playground = /*#__PURE__*/function (_React$Component) {(0, _inheritsLoose2.defau
       { placeholder: 'Warning', warning: true },
       { placeholder: 'Disabled', disabled: true }];
 
-      var fromProps = (0, _helpers.getComponentsFromPropsList)(_react.default.createElement(_Input.Input, { width: 120 }), propsList);
-      return (
-        _react.default.createElement(_ComponentsGroup.ComponentsGroup, { title: 'Поле ввода', theme: _this.theme },
-        _react.default.createElement(_Input.Input, { width: 380, prefix: "https://kontur.ru/search?query=", rightIcon: _react.default.createElement(_Search.default, null) }),
-        _react.default.createElement("div", null,
+      var fromProps = (0, _helpers.getComponentsFromPropsList)( /*#__PURE__*/_react.default.createElement(_Input.Input, { width: 120 }), propsList);
+      return /*#__PURE__*/(
+        _react.default.createElement(_ComponentsGroup.ComponentsGroup, { title: 'Поле ввода', theme: _this.theme }, /*#__PURE__*/
+        _react.default.createElement(_Input.Input, { width: 380, prefix: "https://kontur.ru/search?query=", rightIcon: /*#__PURE__*/_react.default.createElement(_Search.default, null) }), /*#__PURE__*/
+        _react.default.createElement("div", null, /*#__PURE__*/
         _react.default.createElement(_Gapped.Gapped, { gap: 10 }, fromProps))));
 
 
@@ -245,37 +203,37 @@ Playground = /*#__PURE__*/function (_React$Component) {(0, _inheritsLoose2.defau
     };_this.
 
     renderTokenInputsGroup = function () {
-      return (
-        _react.default.createElement(_ComponentsGroup.ComponentsGroup, { title: 'Поле с токеном', theme: _this.theme },
+      return /*#__PURE__*/(
+        _react.default.createElement(_ComponentsGroup.ComponentsGroup, { title: 'Поле с токеном', theme: _this.theme }, /*#__PURE__*/
         _react.default.createElement(_TokenInputPlayground.TokenInputPlayground, null)));
 
 
     };_this.
 
     renderOtherInputsGroup = function () {
-      return (
-        _react.default.createElement(_ComponentsGroup.ComponentsGroup, { title: 'Прочие поля', theme: _this.theme },
-        _react.default.createElement(_CurrencyInputPlayground.CurrencyInputPlayground, null),
-        _react.default.createElement(_FxInputPlayground.FxInputPlayground, null),
+      return /*#__PURE__*/(
+        _react.default.createElement(_ComponentsGroup.ComponentsGroup, { title: 'Прочие поля', theme: _this.theme }, /*#__PURE__*/
+        _react.default.createElement(_CurrencyInputPlayground.CurrencyInputPlayground, null), /*#__PURE__*/
+        _react.default.createElement(_FxInputPlayground.FxInputPlayground, null), /*#__PURE__*/
         _react.default.createElement(_AnotherInputsPlayground.DatePickerPlayground, null)));
 
 
     };_this.
 
     renderSwitchersGroup = function () {
-      return (
-        _react.default.createElement(_ComponentsGroup.ComponentsGroup, { title: 'Переключатели', theme: _this.theme },
+      return /*#__PURE__*/(
+        _react.default.createElement(_ComponentsGroup.ComponentsGroup, { title: 'Переключатели', theme: _this.theme }, /*#__PURE__*/
         _react.default.createElement(_SwitcherPlayground.SwitcherPlayground, null)));
 
 
     };_this.
 
     renderControlsGroup = function () {
-      return (
-        _react.default.createElement(_ComponentsGroup.ComponentsGroup, { title: 'Радио, чекбоксы', theme: _this.theme },
-        _react.default.createElement(_Gapped.Gapped, { verticalAlign: 'top', gap: 60 },
-        _react.default.createElement(_CheckboxPlayground.CheckboxPlayground, null),
-        _react.default.createElement(_RadioPlayground.RadioPlayground, null),
+      return /*#__PURE__*/(
+        _react.default.createElement(_ComponentsGroup.ComponentsGroup, { title: 'Радио, чекбоксы', theme: _this.theme }, /*#__PURE__*/
+        _react.default.createElement(_Gapped.Gapped, { verticalAlign: 'top', gap: 60 }, /*#__PURE__*/
+        _react.default.createElement(_CheckboxPlayground.CheckboxPlayground, null), /*#__PURE__*/
+        _react.default.createElement(_RadioPlayground.RadioPlayground, null), /*#__PURE__*/
         _react.default.createElement(_TogglePlayground.TogglePlayground, null))));
 
 
@@ -283,38 +241,46 @@ Playground = /*#__PURE__*/function (_React$Component) {(0, _inheritsLoose2.defau
     };_this.
 
     renderHintsGroup = function () {
-      return (
-        _react.default.createElement(_ComponentsGroup.ComponentsGroup, { title: 'Тултип', theme: _this.theme },
+      return /*#__PURE__*/(
+        _react.default.createElement(_ComponentsGroup.ComponentsGroup, { title: 'Тултип', theme: _this.theme }, /*#__PURE__*/
         _react.default.createElement(_HintPlayground.HintPlayground, null)));
 
 
     };_this.
 
     renderTooltip = function () {
-      var tooltipContent = function tooltipContent() {return (
-          _react.default.createElement("div", { className: _Playground.jsStyles.tooltipContent() },
+      var tooltipContent = function tooltipContent() {return /*#__PURE__*/(
+          _react.default.createElement("div", { className: _Playground.styles.tooltipContent() },
           'Информация об ошибке. Короткий объясняющий текст и ссылка, если нужно'));};
 
 
-      return (
-        _react.default.createElement(_ComponentsGroup.ComponentsGroup, { title: 'Тултип', theme: _this.theme },
-        _react.default.createElement(_Tooltip.Tooltip, { render: tooltipContent, pos: "right middle", trigger: 'opened', disableAnimations: true },
-        _react.default.createElement(_Link2.Link, { icon: _react.default.createElement(_HelpDot.default, null) }))));
+      return /*#__PURE__*/(
+        _react.default.createElement(_ComponentsGroup.ComponentsGroup, { title: 'Тултип', theme: _this.theme }, /*#__PURE__*/
+        _react.default.createElement(_Tooltip.Tooltip, { render: tooltipContent, pos: "right middle", trigger: 'opened', disableAnimations: true }, /*#__PURE__*/
+        _react.default.createElement(_Link2.Link, { icon: /*#__PURE__*/_react.default.createElement(_HelpDot.default, null) }))));
 
 
 
     };_this.
 
     renderPaging = function () {
-      return (
-        _react.default.createElement(_ComponentsGroup.ComponentsGroup, { title: 'Пейджинг', theme: _this.theme },
+      return /*#__PURE__*/(
+        _react.default.createElement(_ComponentsGroup.ComponentsGroup, { title: 'Пейджинг', theme: _this.theme }, /*#__PURE__*/
         _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 _react.default.createElement("div", { ref: _this.stopEl, style: { height: 50 } });
+      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 _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 _react.default.createElement("div", { className: wrapperClassName }, _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(), _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 _react.default.createElement("div", { style: tabsOuterWrapperStyle, className: tabsOuterWrapperClass }, _react.default.createElement(_Gapped.Gapped, { gap: 40 }, _react.default.createElement(_Tabs.Tabs, { value: this.getCurrentTab(), onValueChange: onThemeChange, vertical: false }, _react.default.createElement("div", { className: _Playground.jsStyles.tabsInnerWrapper(this.theme) }, _react.default.createElement(_Tabs.Tabs.Tab, { id: _constants.ThemeType.Default }, "\u0414\u0435\u0444\u043E\u043B\u0442\u043D\u0430\u044F"), _react.default.createElement(_Tabs.Tabs.Tab, { id: _constants.ThemeType.Flat }, "\u041F\u043B\u043E\u0441\u043A\u0430\u044F"), _react.default.createElement(_Tabs.Tabs.Tab, { id: _constants.ThemeType.Dark }, "\u0422\u0435\u043C\u043D\u0430\u044F"))), _react.default.createElement(_Gapped.Gapped, null, _react.default.createElement(_Toggle.Toggle, { checked: this.is8pxTheme, onValueChange: this.toggle8pxTheme, disabled: currentThemeType === _constants.ThemeType.Dark }), _react.default.createElement("span", null, "8px")), _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(_ThemeContext.ThemeContext.Consumer, null, function (theme) {_this2.theme = theme;return _this2.renderMain();});};_proto.renderMain = function renderMain() {var wrapperClassName = (0, _Emotion.cx)(_Playground.styles.playground(), _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 _cx;var _this$props = this.props,onThemeChange = _this$props.onThemeChange,onEditLinkClick = _this$props.onEditLinkClick;var tabsOuterWrapperStyle = { background: this.theme.bgDefault };var tabsOuterWrapperClass = (0, _Emotion.cx)((_cx = {}, _cx[_Playground.styles.tabsWrapper(this.theme)] = true, _cx[_Playground.styles.stickyTabsWrapper(this.theme)] = useSticky, _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: _Playground.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","tooltipContent","styles","renderPaging","renderFileUploader","renderStickyStopElement","height","current","render","renderMain","wrapperClassName","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';\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 { ThemeContext } from '../../lib/theming/ThemeContext';\nimport { Tooltip } from '../../components/Tooltip';\nimport { Sticky } from '../../components/Sticky';\nimport { Theme } from '../../lib/theming/Theme';\nimport { isTestEnv } from '../../lib/currentEnvironment';\nimport { cx } from '../../lib/theming/Emotion';\nimport { FileUploader } from '../../components/FileUploader';\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 { styles } from './Playground.styles';\nimport { SizesGroup } from './SizesGroup';\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 stopEl = React.createRef<HTMLDivElement>();\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  private renderMain() {\n    const wrapperClassName = 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 { onThemeChange, onEditLinkClick } = this.props;\n    const tabsOuterWrapperStyle = { background: this.theme.bgDefault };\n    const tabsOuterWrapperClass = 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 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,11 @@
-export declare const jsStyles: {
+import { Theme } from '../../lib/theming/Theme';
+export declare const styles: {
     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 +13,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;
 };