@skbkontur/react-ui 0.0.0-3974a633b4 → 0.0.0-444dd4e7b3

package/cjs/internal/ThemePlayground/PagingPlayground.js

@@ -2,9 +2,12 @@
 
 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';\n\nimport { Paging } from '../../components/Paging';\n\nexport class PagingPlayground extends React.Component<{}, { active: number }> {\n  public state = {\n    active: 1,\n  };\n\n  public render() {\n    return <Paging activePage={this.state.active} onPageChange={this.handlePageChange} pagesCount={12} />;\n  }\n\n  private handlePageChange = (pageNumber: number) => {\n    this.setState({ active: pageNumber });\n  };\n}\n"]}
+{"version":3,"sources":["PagingPlayground.tsx"],"names":["PagingPlayground","state","activePage","handlePageChange","pageNumber","setState","active","render","React","Component"],"mappings":"4PAAA;;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,7 +5,7 @@ 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 stopEl;
     render(): JSX.Element;
@@ -13,8 +13,6 @@ export declare class Playground extends React.Component<PlaygroundProps, {}> {
     private renderTabsGroup;
     private renderTabs;
     private getCurrentTab;
-    private get is8pxTheme();
-    private toggle8pxTheme;
     private renderSizesGroup;
     private renderLinksGroup;
     private renderButtonsGroup;
@@ -26,6 +24,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,6 +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"));
+"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"));
@@ -12,13 +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,7 +44,7 @@ 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.
 
 
@@ -81,6 +80,7 @@ Playground = /*#__PURE__*/function (_React$Component) {(0, _inheritsLoose2.defau
 
 
 
+
 
 
     renderTabsGroup = function () {
@@ -114,11 +114,6 @@ Playground = /*#__PURE__*/function (_React$Component) {(0, _inheritsLoose2.defau
 
 
 
-
-
-
-
-
 
 
 
@@ -129,63 +124,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.FlatOld:
-          return _constants.ThemeType.Flat;
-        case _constants.ThemeType.Default:
+          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.DefaultOld);
-          break;
-        case _constants.ThemeType.DefaultOld:
-          onThemeChange(_constants.ThemeType.Default);
-          break;
-        case _constants.ThemeType.Flat:
-          onThemeChange(_constants.ThemeType.FlatOld);
-          break;
-        case _constants.ThemeType.FlatOld:
-          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.
@@ -312,10 +269,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, _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()));};_proto.renderTabs = function renderTabs() {var _cx;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, _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.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.Default:case _constants.ThemeType.Flat: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","FlatOld","Default","DefaultOld","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","styles","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';\nimport SearchIcon from '@skbkontur/react-icons/Search';\nimport CardIcon from '@skbkontur/react-icons/Card';\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 { Toggle } from '../../components/Toggle';\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';\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 { SelectPlayground } from './SelectPlayground';\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';\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        </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 { currentThemeType, 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.Flat}>Плоская</Tabs.Tab>\n              <Tabs.Tab id={ThemeType.Dark}>Темная</Tabs.Tab>\n            </div>\n          </Tabs>\n          <Gapped>\n            <Toggle\n              checked={this.is8pxTheme}\n              onValueChange={this.toggle8pxTheme}\n              disabled={currentThemeType === ThemeType.Dark}\n            />\n            <span>8px</span>\n          </Gapped>\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.Flat:\n      case ThemeType.FlatOld:\n        return ThemeType.Flat;\n      case ThemeType.Default:\n      case ThemeType.DefaultOld:\n      default:\n        return ThemeType.Default;\n    }\n  };\n\n  private get is8pxTheme(): boolean {\n    switch (this.props.currentThemeType) {\n      case ThemeType.Default:\n      case ThemeType.Flat:\n        return true;\n      default:\n        return false;\n    }\n  }\n\n  private toggle8pxTheme = (value: boolean) => {\n    const { currentThemeType, onThemeChange } = this.props;\n    switch (currentThemeType) {\n      case ThemeType.Default:\n        onThemeChange(ThemeType.DefaultOld);\n        break;\n      case ThemeType.DefaultOld:\n        onThemeChange(ThemeType.Default);\n        break;\n      case ThemeType.Flat:\n        onThemeChange(ThemeType.FlatOld);\n        break;\n      case ThemeType.FlatOld:\n        onThemeChange(ThemeType.Flat);\n        break;\n    }\n  };\n\n  private renderSizesGroup = () => {\n    const Group = ({ size }: { size: 'small' | 'medium' | 'large' }) => (\n      <Gapped wrap verticalAlign=\"middle\" gap={10}>\n        <SelectPlayground width={120} size={size} />\n        <Input rightIcon={<CardIcon />} placeholder={'Text value'} size={size} />\n        <Button width={120} size={size}>\n          Button\n        </Button>\n        <Button icon={<LinkIcon />} use={'link'} size={size}>\n          Button like a link\n        </Button>\n      </Gapped>\n    );\n\n    return (\n      <ComponentsGroup title={'Размеры'} theme={this.theme}>\n        <Group size={'small'} />\n        <Group size={'medium'} />\n        <Group 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={true}>\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 renderStickyStopElement = () => {\n    return <div ref={this.stopEl} style={{ height: 50 }} />;\n  };\n\n  private getStickyStop = () => this.stopEl.current;\n}\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/RadioPlayground.js

@@ -2,8 +2,6 @@
 
 var _Gapped = require("../../components/Gapped");
 var _Radio = require("../../components/Radio");
-var _ThemeContext = require("../../lib/theming/ThemeContext");
-var _ThemeHelpers = require("../../lib/theming/ThemeHelpers");
 
 var _helpers = require("./helpers");
 
@@ -17,10 +15,8 @@ var propsList = [
 
 
 var RadioPlayground = function RadioPlayground() {
-  var theme = _react.default.useContext(_ThemeContext.ThemeContext);
-  var gap = (0, _ThemeHelpers.is8pxTheme)(theme) ? 0 : 10;
   return /*#__PURE__*/(
-    _react.default.createElement(_Gapped.Gapped, { gap: gap, vertical: true },
+    _react.default.createElement(_Gapped.Gapped, { gap: 0, vertical: true },
     (0, _helpers.getComponentsFromPropsList)( /*#__PURE__*/_react.default.createElement(_Radio.Radio, { value: '', checked: true }), propsList)));
 
 

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

@@ -1 +1 @@
-{"version":3,"sources":["RadioPlayground.tsx"],"names":["propsList","value","children","checked","disabled","focused","error","warning","RadioPlayground","theme","React","useContext","ThemeContext","gap"],"mappings":"6JAAA;;AAEA;AACA;AACA;AACA;;AAEA;;AAEA,IAAMA,SAA+B,GAAG;AACtC,EAAEC,KAAK,EAAE,EAAT,EAAaC,QAAQ,EAAE,SAAvB,EAAkCC,OAAO,EAAE,KAA3C,EADsC;AAEtC,EAAEF,KAAK,EAAE,EAAT,EAAaC,QAAQ,EAAE,SAAvB,EAFsC;AAGtC,EAAED,KAAK,EAAE,EAAT,EAAaC,QAAQ,EAAE,UAAvB,EAAmCE,QAAQ,EAAE,IAA7C,EAHsC;AAItC,EAAEH,KAAK,EAAE,EAAT,EAAaC,QAAQ,EAAE,SAAvB,EAAkCG,OAAO,EAAE,IAA3C,EAJsC;AAKtC,EAAEJ,KAAK,EAAE,EAAT,EAAaC,QAAQ,EAAE,OAAvB,EAAgCI,KAAK,EAAE,IAAvC,EALsC;AAMtC,EAAEL,KAAK,EAAE,EAAT,EAAaC,QAAQ,EAAE,SAAvB,EAAkCK,OAAO,EAAE,IAA3C,EANsC,CAAxC;;;AASO,IAAMC,eAAe,GAAG,SAAlBA,eAAkB,GAAM;AACnC,MAAMC,KAAK,GAAGC,eAAMC,UAAN,CAAiBC,0BAAjB,CAAd;AACA,MAAMC,GAAG,GAAG,8BAAWJ,KAAX,IAAoB,CAApB,GAAwB,EAApC;AACA;AACE,iCAAC,cAAD,IAAQ,GAAG,EAAEI,GAAb,EAAkB,QAAQ,MAA1B;AACG,2DAA2B,6BAAC,YAAD,IAAO,KAAK,EAAE,EAAd,EAAkB,OAAO,MAAzB,GAA3B,EAAyDb,SAAzD,CADH,CADF;;;AAKD,CARM,C","sourcesContent":["import React from 'react';\n\nimport { Gapped } from '../../components/Gapped';\nimport { Radio, RadioProps } from '../../components/Radio';\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\nimport { is8pxTheme } from '../../lib/theming/ThemeHelpers';\n\nimport { getComponentsFromPropsList } from './helpers';\n\nconst propsList: RadioProps<string>[] = [\n  { value: '', children: 'Default', checked: false },\n  { value: '', children: 'Checked' },\n  { value: '', children: 'Disabled', disabled: true },\n  { value: '', children: 'Focused', focused: true },\n  { value: '', children: 'Error', error: true },\n  { value: '', children: 'Warning', warning: true },\n];\n\nexport const RadioPlayground = () => {\n  const theme = React.useContext(ThemeContext);\n  const gap = is8pxTheme(theme) ? 0 : 10;\n  return (\n    <Gapped gap={gap} vertical>\n      {getComponentsFromPropsList(<Radio value={''} checked />, propsList)}\n    </Gapped>\n  );\n};\n"]}
+{"version":3,"sources":["RadioPlayground.tsx"],"names":["propsList","value","children","checked","disabled","focused","error","warning","RadioPlayground"],"mappings":"6JAAA;;AAEA;AACA;;AAEA;;AAEA,IAAMA,SAAoC,GAAG;AAC3C,EAAEC,KAAK,EAAE,EAAT,EAAaC,QAAQ,EAAE,SAAvB,EAAkCC,OAAO,EAAE,KAA3C,EAD2C;AAE3C,EAAEF,KAAK,EAAE,EAAT,EAAaC,QAAQ,EAAE,SAAvB,EAF2C;AAG3C,EAAED,KAAK,EAAE,EAAT,EAAaC,QAAQ,EAAE,UAAvB,EAAmCE,QAAQ,EAAE,IAA7C,EAH2C;AAI3C,EAAEH,KAAK,EAAE,EAAT,EAAaC,QAAQ,EAAE,SAAvB,EAAkCG,OAAO,EAAE,IAA3C,EAJ2C;AAK3C,EAAEJ,KAAK,EAAE,EAAT,EAAaC,QAAQ,EAAE,OAAvB,EAAgCI,KAAK,EAAE,IAAvC,EAL2C;AAM3C,EAAEL,KAAK,EAAE,EAAT,EAAaC,QAAQ,EAAE,SAAvB,EAAkCK,OAAO,EAAE,IAA3C,EAN2C,CAA7C;;;AASO,IAAMC,eAAe,GAAG,SAAlBA,eAAkB,GAAM;AACnC;AACE,iCAAC,cAAD,IAAQ,GAAG,EAAE,CAAb,EAAgB,QAAQ,MAAxB;AACG,2DAA2B,6BAAC,YAAD,IAAO,KAAK,EAAE,EAAd,EAAkB,OAAO,MAAzB,GAA3B,EAAyDR,SAAzD,CADH,CADF;;;AAKD,CANM,C","sourcesContent":["import React from 'react';\n\nimport { Gapped } from '../../components/Gapped';\nimport { Radio, RadioProps } from '../../components/Radio';\n\nimport { getComponentsFromPropsList } from './helpers';\n\nconst propsList: Array<RadioProps<string>> = [\n  { value: '', children: 'Default', checked: false },\n  { value: '', children: 'Checked' },\n  { value: '', children: 'Disabled', disabled: true },\n  { value: '', children: 'Focused', focused: true },\n  { value: '', children: 'Error', error: true },\n  { value: '', children: 'Warning', warning: true },\n];\n\nexport const RadioPlayground = () => {\n  return (\n    <Gapped gap={0} vertical>\n      {getComponentsFromPropsList(<Radio value={''} checked />, propsList)}\n    </Gapped>\n  );\n};\n"]}

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

@@ -1,12 +1,15 @@
 import React from 'react';
 import { SelectProps } from '../../components/Select';
-export declare class SelectPlayground extends React.Component<SelectProps<string, string>, {
-    value: string | undefined;
-}> {
-    state: {
-        value: string;
-    };
+declare type SelectPlaygroundValue = string;
+declare type SelectPlaygroundItem = string;
+declare type SelectPlaygroundProps = SelectProps<SelectPlaygroundValue, SelectPlaygroundItem>;
+interface SelectPlaygroundState {
+    value: string;
+}
+export declare class SelectPlayground extends React.Component<SelectPlaygroundProps> {
+    state: SelectPlaygroundState;
     private readonly selectItems;
     render(): JSX.Element;
     private handleChange;
 }
+export {};

package/cjs/internal/ThemePlayground/SelectPlayground.js

@@ -2,6 +2,12 @@
 
 var _Select = require("../../components/Select");var
 
+
+
+
+
+
+
 SelectPlayground = /*#__PURE__*/function (_React$Component) {(0, _inheritsLoose2.default)(SelectPlayground, _React$Component);function SelectPlayground() {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 = {
       value: capitalize(_this.props.size) };_this.

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

@@ -1 +1 @@
-{"version":3,"sources":["SelectPlayground.tsx"],"names":["SelectPlayground","state","value","capitalize","props","size","selectItems","handleChange","setState","render","React","Component","input","charAt","toUpperCase","slice"],"mappings":"8UAAA;;AAEA,iD;;AAEaA,gB;AACJC,IAAAA,K,GAAQ;AACbC,MAAAA,KAAK,EAAEC,UAAU,CAAC,MAAKC,KAAL,CAAWC,IAAZ,CADJ,E;;AAGEC,IAAAA,W,GAAc,CAAC,OAAD,EAAU,QAAV,EAAoB,OAApB,C;;;;;;;;;;;;;AAavBC,IAAAA,Y,GAAe,UAACL,KAAD,EAAmB;AACxC,YAAKM,QAAL,CAAc;AACZN,QAAAA,KAAK,EAALA,KADY,EAAd;;AAGD,K,8DAfMO,M,GAAP,kBAAgB,CACd,oBACE,6BAAC,cAAD,6BACM,KAAKL,KADX,IAEE,KAAK,EAAE,KAAKH,KAAL,CAAWC,KAFpB,EAGE,KAAK,EAAE,KAAKI,WAHd,EAIE,aAAa,EAAE,KAAKC,YAJtB,IADF,CAQD,C,2BAfmCG,eAAMC,S;;;AAwB5C,IAAMR,UAAU,GAAG,SAAbA,UAAa,CAACS,KAAD,EAAwB,KAAvBA,KAAuB,cAAvBA,KAAuB,GAAf,EAAe;AACzC,SAAOA,KAAK,CAACC,MAAN,CAAa,CAAb,EAAgBC,WAAhB,KAAgCF,KAAK,CAACG,KAAN,CAAY,CAAZ,CAAvC;AACD,CAFD","sourcesContent":["import React from 'react';\n\nimport { Select, SelectProps } from '../../components/Select';\n\nexport class SelectPlayground extends React.Component<SelectProps<string, string>, { value: string | undefined }> {\n  public state = {\n    value: capitalize(this.props.size),\n  };\n  private readonly selectItems = ['Small', 'Medium', 'Large'];\n\n  public render() {\n    return (\n      <Select<string, string>\n        {...this.props}\n        value={this.state.value}\n        items={this.selectItems}\n        onValueChange={this.handleChange}\n      />\n    );\n  }\n\n  private handleChange = (value: string) => {\n    this.setState({\n      value,\n    });\n  };\n}\n\nconst capitalize = (input = ''): string => {\n  return input.charAt(0).toUpperCase() + input.slice(1);\n};\n"]}
+{"version":3,"sources":["SelectPlayground.tsx"],"names":["SelectPlayground","state","value","capitalize","props","size","selectItems","handleChange","setState","render","React","Component","input","charAt","toUpperCase","slice"],"mappings":"8UAAA;;AAEA,iD;;;;;;;;AAQaA,gB;AACJC,IAAAA,K,GAA+B;AACpCC,MAAAA,KAAK,EAAEC,UAAU,CAAC,MAAKC,KAAL,CAAWC,IAAZ,CADmB,E;;AAGrBC,IAAAA,W,GAAc,CAAC,OAAD,EAAU,QAAV,EAAoB,OAApB,C;;;;;;;;;;;;;AAavBC,IAAAA,Y,GAAe,UAACL,KAAD,EAAmB;AACxC,YAAKM,QAAL,CAAc;AACZN,QAAAA,KAAK,EAALA,KADY,EAAd;;AAGD,K,8DAfMO,M,GAAP,kBAAgB,CACd,oBACE,6BAAC,cAAD,6BACM,KAAKL,KADX,IAEE,KAAK,EAAE,KAAKH,KAAL,CAAWC,KAFpB,EAGE,KAAK,EAAE,KAAKI,WAHd,EAIE,aAAa,EAAE,KAAKC,YAJtB,IADF,CAQD,C,2BAfmCG,eAAMC,S;;;AAwB5C,IAAMR,UAAU,GAAG,SAAbA,UAAa,CAACS,KAAD,EAAwB,KAAvBA,KAAuB,cAAvBA,KAAuB,GAAf,EAAe;AACzC,SAAOA,KAAK,CAACC,MAAN,CAAa,CAAb,EAAgBC,WAAhB,KAAgCF,KAAK,CAACG,KAAN,CAAY,CAAZ,CAAvC;AACD,CAFD","sourcesContent":["import React from 'react';\n\nimport { Select, SelectProps } from '../../components/Select';\n\ntype SelectPlaygroundValue = string;\ntype SelectPlaygroundItem = string;\ntype SelectPlaygroundProps = SelectProps<SelectPlaygroundValue, SelectPlaygroundItem>;\ninterface SelectPlaygroundState {\n  value: string;\n}\nexport class SelectPlayground extends React.Component<SelectPlaygroundProps> {\n  public state: SelectPlaygroundState = {\n    value: capitalize(this.props.size),\n  };\n  private readonly selectItems = ['Small', 'Medium', 'Large'];\n\n  public render() {\n    return (\n      <Select<SelectPlaygroundValue, SelectPlaygroundItem>\n        {...this.props}\n        value={this.state.value}\n        items={this.selectItems}\n        onValueChange={this.handleChange}\n      />\n    );\n  }\n\n  private handleChange = (value: string) => {\n    this.setState({\n      value,\n    });\n  };\n}\n\nconst capitalize = (input = ''): string => {\n  return input.charAt(0).toUpperCase() + input.slice(1);\n};\n"]}

package/cjs/internal/ThemePlayground/ShowcaseGroup.js

@@ -6,13 +6,17 @@ var _Button = require("../../components/Button");
 var _Input = require("../../components/Input");
 var _Toggle = require("../../components/Toggle");
 var _Radio = require("../../components/Radio");
+var _ThemeContext = require("../../lib/theming/ThemeContext");
 
 
 
 
-var ShowcaseGroup = function ShowcaseGroup(props) {return /*#__PURE__*/(
+var ShowcaseGroup = function ShowcaseGroup(props) {
+  var theme = _react.default.useContext(_ThemeContext.ThemeContext);
+
+  return /*#__PURE__*/(
     _react.default.createElement("div", null,
-    props.title && /*#__PURE__*/_react.default.createElement("h2", null, props.title), /*#__PURE__*/
+    props.title && /*#__PURE__*/_react.default.createElement("h2", { style: { color: theme.textColorDefault } }, props.title), /*#__PURE__*/
     _react.default.createElement(_Gapped.Gapped, { gap: 10 }, /*#__PURE__*/
     _react.default.createElement(_Button.Button, null, "Button"), /*#__PURE__*/
     _react.default.createElement(_Input.Input, null), /*#__PURE__*/
@@ -20,4 +24,8 @@ var ShowcaseGroup = function ShowcaseGroup(props) {return /*#__PURE__*/(
     _react.default.createElement(_Radio.Radio, { value: '', checked: true }, "Radio"), /*#__PURE__*/
 
 
-    _react.default.createElement(_Checkbox.Checkbox, { checked: true }, "Checkbox"))));};exports.ShowcaseGroup = ShowcaseGroup;
+    _react.default.createElement(_Checkbox.Checkbox, { checked: true }, "Checkbox"))));
+
+
+
+};exports.ShowcaseGroup = ShowcaseGroup;

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

@@ -1 +1 @@
-{"version":3,"sources":["ShowcaseGroup.tsx"],"names":["ShowcaseGroup","props","title"],"mappings":"2JAAA;;AAEA;AACA;AACA;AACA;AACA;AACA;;;;;AAKO,IAAMA,aAAa,GAAG,SAAhBA,aAAgB,CAACC,KAAD;AAC3B;AACGA,IAAAA,KAAK,CAACC,KAAN,iBAAe,yCAAKD,KAAK,CAACC,KAAX,CADlB;AAEE,iCAAC,cAAD,IAAQ,GAAG,EAAE,EAAb;AACE,iCAAC,cAAD,iBADF;AAEE,iCAAC,YAAD,OAFF;AAGE,iCAAC,cAAD,OAHF;AAIE,iCAAC,YAAD,IAAO,KAAK,EAAE,EAAd,EAAkB,OAAO,MAAzB,YAJF;;;AAOE,iCAAC,kBAAD,IAAU,OAAO,MAAjB,eAPF,CAFF,CAD2B,GAAtB,C","sourcesContent":["import React from 'react';\n\nimport { Checkbox } from '../../components/Checkbox';\nimport { Gapped } from '../../components/Gapped';\nimport { Button } from '../../components/Button';\nimport { Input } from '../../components/Input';\nimport { Toggle } from '../../components/Toggle';\nimport { Radio } from '../../components/Radio';\n\ninterface ShowcaseGroupProps {\n  title?: string;\n}\nexport const ShowcaseGroup = (props: ShowcaseGroupProps) => (\n  <div>\n    {props.title && <h2>{props.title}</h2>}\n    <Gapped gap={10}>\n      <Button>Button</Button>\n      <Input />\n      <Toggle />\n      <Radio value={''} checked>\n        Radio\n      </Radio>\n      <Checkbox checked>Checkbox</Checkbox>\n    </Gapped>\n  </div>\n);\n"]}
+{"version":3,"sources":["ShowcaseGroup.tsx"],"names":["ShowcaseGroup","props","theme","React","useContext","ThemeContext","title","color","textColorDefault"],"mappings":"2JAAA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;;;;;AAKO,IAAMA,aAAa,GAAG,SAAhBA,aAAgB,CAACC,KAAD,EAA+B;AAC1D,MAAMC,KAAK,GAAGC,eAAMC,UAAN,CAAiBC,0BAAjB,CAAd;;AAEA;AACE;AACGJ,IAAAA,KAAK,CAACK,KAAN,iBAAe,qCAAI,KAAK,EAAE,EAAEC,KAAK,EAAEL,KAAK,CAACM,gBAAf,EAAX,IAA+CP,KAAK,CAACK,KAArD,CADlB;AAEE,iCAAC,cAAD,IAAQ,GAAG,EAAE,EAAb;AACE,iCAAC,cAAD,iBADF;AAEE,iCAAC,YAAD,OAFF;AAGE,iCAAC,cAAD,OAHF;AAIE,iCAAC,YAAD,IAAO,KAAK,EAAE,EAAd,EAAkB,OAAO,MAAzB,YAJF;;;AAOE,iCAAC,kBAAD,IAAU,OAAO,MAAjB,eAPF,CAFF,CADF;;;;AAcD,CAjBM,C","sourcesContent":["import React from 'react';\n\nimport { Checkbox } from '../../components/Checkbox';\nimport { Gapped } from '../../components/Gapped';\nimport { Button } from '../../components/Button';\nimport { Input } from '../../components/Input';\nimport { Toggle } from '../../components/Toggle';\nimport { Radio } from '../../components/Radio';\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\n\ninterface ShowcaseGroupProps {\n  title?: string;\n}\nexport const ShowcaseGroup = (props: ShowcaseGroupProps) => {\n  const theme = React.useContext(ThemeContext);\n\n  return (\n    <div>\n      {props.title && <h2 style={{ color: theme.textColorDefault }}>{props.title}</h2>}\n      <Gapped gap={10}>\n        <Button>Button</Button>\n        <Input />\n        <Toggle />\n        <Radio value={''} checked>\n          Radio\n        </Radio>\n        <Checkbox checked>Checkbox</Checkbox>\n      </Gapped>\n    </div>\n  );\n};\n"]}

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

@@ -0,0 +1,5 @@
+import { SizeProp } from '../../lib/types/props';
+export interface SizesGroupProps {
+    size: SizeProp;
+}
+export declare const SizesGroup: ({ size }: SizesGroupProps) => JSX.Element;

package/cjs/internal/ThemePlayground/SizesGroup.js

@@ -0,0 +1,23 @@
+"use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");exports.__esModule = true;exports.SizesGroup = void 0;var _react = _interopRequireDefault(require("react"));
+var _Card = _interopRequireDefault(require("@skbkontur/react-icons/Card"));
+var _Link = _interopRequireDefault(require("@skbkontur/react-icons/Link"));
+
+var _Input = require("../../components/Input");
+var _Gapped = require("../../components/Gapped");
+var _Button = require("../../components/Button");
+
+
+var _SelectPlayground = require("./SelectPlayground");
+
+
+
+
+
+var SizesGroup = function SizesGroup(_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")));};exports.SizesGroup = SizesGroup;

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

@@ -0,0 +1 @@
+{"version":3,"sources":["SizesGroup.tsx"],"names":["SizesGroup","size"],"mappings":"wJAAA;AACA;AACA;;AAEA;AACA;AACA;;;AAGA;;;;;;AAMO,IAAMA,UAAU,GAAG,SAAbA,UAAa,YAAGC,IAAH,QAAGA,IAAH;AACxB,iCAAC,cAAD,IAAQ,IAAI,MAAZ,EAAa,aAAa,EAAC,QAA3B,EAAoC,GAAG,EAAE,EAAzC;AACE,iCAAC,kCAAD,IAAkB,KAAK,EAAE,GAAzB,EAA8B,IAAI,EAAEA,IAApC,GADF;AAEE,iCAAC,YAAD,IAAO,SAAS,eAAE,6BAAC,aAAD,OAAlB,EAAgC,WAAW,EAAE,YAA7C,EAA2D,IAAI,EAAEA,IAAjE,GAFF;AAGE,iCAAC,cAAD,IAAQ,KAAK,EAAE,GAAf,EAAoB,IAAI,EAAEA,IAA1B,aAHF;;;AAME,iCAAC,cAAD,IAAQ,IAAI,eAAE,6BAAC,aAAD,OAAd,EAA4B,GAAG,EAAE,MAAjC,EAAyC,IAAI,EAAEA,IAA/C,yBANF,CADwB,GAAnB,C","sourcesContent":["import React from 'react';\nimport CardIcon from '@skbkontur/react-icons/Card';\nimport LinkIcon from '@skbkontur/react-icons/Link';\n\nimport { Input } from '../../components/Input';\nimport { Gapped } from '../../components/Gapped';\nimport { Button } from '../../components/Button';\nimport { SizeProp } from '../../lib/types/props';\n\nimport { SelectPlayground } from './SelectPlayground';\n\nexport interface SizesGroupProps {\n  size: SizeProp;\n}\n\nexport const SizesGroup = ({ size }: SizesGroupProps) => (\n  <Gapped wrap verticalAlign=\"middle\" gap={10}>\n    <SelectPlayground width={120} size={size} />\n    <Input rightIcon={<CardIcon />} placeholder={'Text value'} size={size} />\n    <Button width={120} size={size}>\n      Button\n    </Button>\n    <Button icon={<LinkIcon />} use={'link'} size={size}>\n      Button like a link\n    </Button>\n  </Gapped>\n);\n"]}

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

@@ -1,15 +1,16 @@
 import React from 'react';
-export declare class SwitcherPlayground extends React.Component<{
-    items?: string[];
+import { SwitcherProps } from '../../components/Switcher';
+interface SwitcherPlaygroundProps {
+    items?: SwitcherProps['items'];
     disabled?: boolean;
-}, {
+}
+interface SwitcherPlaygroundState {
     value: string;
     error: boolean;
-}> {
-    state: {
-        value: string;
-        error: boolean;
-    };
+}
+export declare class SwitcherPlayground extends React.Component<SwitcherPlaygroundProps> {
+    state: SwitcherPlaygroundState;
     render(): JSX.Element;
     private handleValueChange;
 }
+export {};

package/cjs/internal/ThemePlayground/SwitcherPlayground.js

@@ -4,10 +4,15 @@ var _Switcher = require("../../components/Switcher");
 
 var defaultItems = ['Default', 'Error'];var
 
-SwitcherPlayground = /*#__PURE__*/function (_React$Component) {(0, _inheritsLoose2.default)(SwitcherPlayground, _React$Component);function SwitcherPlayground() {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.
 
 
 
+
+
+
+
+
+SwitcherPlayground = /*#__PURE__*/function (_React$Component) {(0, _inheritsLoose2.default)(SwitcherPlayground, _React$Component);function SwitcherPlayground() {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 = {
       value: '',
       error: false };_this.

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

@@ -1 +1 @@
-{"version":3,"sources":["SwitcherPlayground.tsx"],"names":["defaultItems","SwitcherPlayground","state","value","error","handleValueChange","setState","render","props","items","React","Component"],"mappings":"gVAAA;;AAEA;;AAEA,IAAMA,YAAY,GAAG,CAAC,SAAD,EAAY,OAAZ,CAArB,C;;AAEaC,kB;;;;AAIJC,IAAAA,K,GAAQ;AACbC,MAAAA,KAAK,EAAE,EADM;AAEbC,MAAAA,KAAK,EAAE,KAFM,E;;;;;;;;;;;;;;;AAiBPC,IAAAA,iB,GAAoB,UAACF,KAAD,EAAmB;AAC7C,YAAKG,QAAL,CAAc,EAAEH,KAAK,EAALA,KAAF,EAASC,KAAK,EAAED,KAAK,KAAK,OAA1B,EAAd;AACD,K,gEAdMI,M,GAAP,kBAAgB,CACd,oBACE,6BAAC,kBAAD,2BACE,KAAK,EAAE,KAAKL,KAAL,CAAWC,KADpB,EAEE,aAAa,EAAE,KAAKE,iBAFtB,EAGE,KAAK,EAAE,KAAKG,KAAL,CAAWC,KAAX,IAAoBT,YAH7B,EAIE,KAAK,EAAE,KAAKE,KAAL,CAAWE,KAJpB,IAKM,KAAKI,KALX,EADF,CASD,C,6BAnBqCE,eAAMC,S","sourcesContent":["import React from 'react';\n\nimport { Switcher } from '../../components/Switcher';\n\nconst defaultItems = ['Default', 'Error'];\n\nexport class SwitcherPlayground extends React.Component<\n  { items?: string[]; disabled?: boolean },\n  { value: string; error: boolean }\n> {\n  public state = {\n    value: '',\n    error: false,\n  };\n\n  public render() {\n    return (\n      <Switcher\n        value={this.state.value}\n        onValueChange={this.handleValueChange}\n        items={this.props.items || defaultItems}\n        error={this.state.error}\n        {...this.props}\n      />\n    );\n  }\n\n  private handleValueChange = (value: string) => {\n    this.setState({ value, error: value === 'Error' });\n  };\n}\n"]}
+{"version":3,"sources":["SwitcherPlayground.tsx"],"names":["defaultItems","SwitcherPlayground","state","value","error","handleValueChange","setState","render","props","items","React","Component"],"mappings":"gVAAA;;AAEA;;AAEA,IAAMA,YAAY,GAAG,CAAC,SAAD,EAAY,OAAZ,CAArB,C;;;;;;;;;;AAUaC,kB;AACJC,IAAAA,K,GAAiC;AACtCC,MAAAA,KAAK,EAAE,EAD+B;AAEtCC,MAAAA,KAAK,EAAE,KAF+B,E;;;;;;;;;;;;;;;AAiBhCC,IAAAA,iB,GAAoB,UAACF,KAAD,EAAmB;AAC7C,YAAKG,QAAL,CAAc,EAAEH,KAAK,EAALA,KAAF,EAASC,KAAK,EAAED,KAAK,KAAK,OAA1B,EAAd;AACD,K,gEAdMI,M,GAAP,kBAAgB,CACd,oBACE,6BAAC,kBAAD,2BACE,KAAK,EAAE,KAAKL,KAAL,CAAWC,KADpB,EAEE,aAAa,EAAE,KAAKE,iBAFtB,EAGE,KAAK,EAAE,KAAKG,KAAL,CAAWC,KAAX,IAAoBT,YAH7B,EAIE,KAAK,EAAE,KAAKE,KAAL,CAAWE,KAJpB,IAKM,KAAKI,KALX,EADF,CASD,C,6BAhBqCE,eAAMC,S","sourcesContent":["import React from 'react';\n\nimport { Switcher, SwitcherProps } from '../../components/Switcher';\n\nconst defaultItems = ['Default', 'Error'];\n\ninterface SwitcherPlaygroundProps {\n  items?: SwitcherProps['items'];\n  disabled?: boolean;\n}\ninterface SwitcherPlaygroundState {\n  value: string;\n  error: boolean;\n}\nexport class SwitcherPlayground extends React.Component<SwitcherPlaygroundProps> {\n  public state: SwitcherPlaygroundState = {\n    value: '',\n    error: false,\n  };\n\n  public render() {\n    return (\n      <Switcher\n        value={this.state.value}\n        onValueChange={this.handleValueChange}\n        items={this.props.items || defaultItems}\n        error={this.state.error}\n        {...this.props}\n      />\n    );\n  }\n\n  private handleValueChange = (value: string) => {\n    this.setState({ value, error: value === 'Error' });\n  };\n}\n"]}

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

@@ -12,17 +12,19 @@ interface PlaygroundState {
 }
 interface Themes {
     default: Theme;
-    defaultOld: Theme;
     dark: Theme;
-    flat: Theme;
+    defaultOld: Theme;
     flatOld: Theme;
+    theme2022: Theme;
+    theme2022Dark: Theme;
 }
 interface ThemesErrors {
     default: ThemeErrorsType;
-    defaultOld: ThemeErrorsType;
     dark: ThemeErrorsType;
-    flat: ThemeErrorsType;
+    defaultOld: ThemeErrorsType;
     flatOld: ThemeErrorsType;
+    theme2022: ThemeErrorsType;
+    theme2022Dark: ThemeErrorsType;
 }
 interface EditingThemeItem {
     value: ThemeType;