@skbkontur/react-ui 0.0.0-c91b3db3f4 → 0.0.0-cb270e7a13

package/cjs/internal/ThemePlayground/Playground.js

@@ -1,321 +0,0 @@
-"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"));
-var _Search = _interopRequireDefault(require("@skbkontur/react-icons/Search"));
-var _Card = _interopRequireDefault(require("@skbkontur/react-icons/Card"));
-var _Link = _interopRequireDefault(require("@skbkontur/react-icons/Link"));
-var _Ok = _interopRequireDefault(require("@skbkontur/react-icons/Ok"));
-var _Error = _interopRequireDefault(require("@skbkontur/react-icons/Error"));
-var _Trash = _interopRequireDefault(require("@skbkontur/react-icons/Trash"));
-var _HelpDot = _interopRequireDefault(require("@skbkontur/react-icons/HelpDot"));
-
-var _Button = require("../../components/Button");
-var _Tabs = require("../../components/Tabs");
-var _Gapped = require("../../components/Gapped");
-var _Link2 = require("../../components/Link");
-var _Input = require("../../components/Input");
-var _Toggle = require("../../components/Toggle");
-var _ThemeContext = require("../../lib/theming/ThemeContext");
-var _Tooltip = require("../../components/Tooltip");
-var _Sticky = require("../../components/Sticky");
-
-var _currentEnvironment = require("../../lib/currentEnvironment");
-
-var _constants = require("./constants");
-var _TokenInputPlayground = require("./TokenInputPlayground");
-var _AnotherInputsPlayground = require("./AnotherInputsPlayground");
-var _TogglePlayground = require("./TogglePlayground");
-var _SwitcherPlayground = require("./SwitcherPlayground");
-var _FxInputPlayground = require("./FxInputPlayground");
-var _CurrencyInputPlayground = require("./CurrencyInputPlayground");
-var _SelectPlayground = require("./SelectPlayground");
-var _helpers = require("./helpers");
-var _CheckboxPlayground = require("./CheckboxPlayground");
-var _RadioPlayground = require("./RadioPlayground");
-var _PagingPlayground = require("./PagingPlayground");
-var _HintPlayground = require("./HintPlayground");
-var _ComponentsGroup = require("./ComponentsGroup");
-var _Playground = require("./Playground.styles");
-
-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.
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-    renderTabsGroup = function () {
-      return useSticky ? /*#__PURE__*/
-      _react.default.createElement(_Sticky.Sticky, { side: 'top', getStop: _this.getStickyStop },
-      _this.renderTabs()) :
-
-
-      _this.renderTabs();
-
-    };_this.
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-    getCurrentTab = function () {
-      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:
-        case _constants.ThemeType.DefaultOld:
-        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' })));
-
-
-    };_this.
-
-    renderLinksGroup = function () {
-      var propsList = [
-      { 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)( /*#__PURE__*/_react.default.createElement(_Link2.Link, null), propsList))));
-
-
-
-    };_this.
-
-    renderButtonsGroup = function () {
-      var propsList = [
-      { children: 'Default' },
-      { 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 /*#__PURE__*/(
-        _react.default.createElement(_ComponentsGroup.ComponentsGroup, { title: 'Кнопки', theme: _this.theme },
-        (0, _helpers.getComponentsFromPropsList)( /*#__PURE__*/_react.default.createElement(_Button.Button, { width: 120, size: 'small' }), propsList)));
-
-
-    };_this.
-
-    renderInputsGroup = function () {
-      var propsList = [
-      { placeholder: 'Enabled' },
-      { placeholder: 'Error', error: true },
-      { placeholder: 'Warning', warning: true },
-      { placeholder: 'Disabled', disabled: true }];
-
-      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))));
-
-
-
-    };_this.
-
-    renderTokenInputsGroup = function () {
-      return /*#__PURE__*/(
-        _react.default.createElement(_ComponentsGroup.ComponentsGroup, { title: 'Поле с токеном', theme: _this.theme }, /*#__PURE__*/
-        _react.default.createElement(_TokenInputPlayground.TokenInputPlayground, null)));
-
-
-    };_this.
-
-    renderOtherInputsGroup = function () {
-      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 /*#__PURE__*/(
-        _react.default.createElement(_ComponentsGroup.ComponentsGroup, { title: 'Переключатели', theme: _this.theme }, /*#__PURE__*/
-        _react.default.createElement(_SwitcherPlayground.SwitcherPlayground, null)));
-
-
-    };_this.
-
-    renderControlsGroup = function () {
-      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))));
-
-
-
-    };_this.
-
-    renderHintsGroup = function () {
-      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 /*#__PURE__*/(
-          _react.default.createElement("div", { className: _Playground.jsStyles.tooltipContent() },
-          'Информация об ошибке. Короткий объясняющий текст и ссылка, если нужно'));};
-
-
-      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 /*#__PURE__*/(
-        _react.default.createElement(_ComponentsGroup.ComponentsGroup, { title: 'Пейджинг', theme: _this.theme }, /*#__PURE__*/
-        _react.default.createElement(_PagingPlayground.PagingPlayground, null)));
-
-
-    };_this.
-
-    renderStickyStopElement = function () {
-      return /*#__PURE__*/_react.default.createElement("div", { ref: _this.stopEl, style: { height: 50 } });
-    };_this.
-
-    getStickyStop = function () {return _this.stopEl.current;};return _this;}var _proto = Playground.prototype;_proto.render = function render() {var _this2 = this;return /*#__PURE__*/_react.default.createElement(_ThemeContext.ThemeContext.Consumer, null, function (theme) {_this2.theme = theme;return _this2.renderMain();});};_proto.renderMain = function renderMain() {var wrapperClassName = (0, _classnames.default)(_Playground.jsStyles.playground(), _Playground.jsStyles.playgroundWrapper(this.theme));return /*#__PURE__*/_react.default.createElement("div", { className: wrapperClassName }, /*#__PURE__*/_react.default.createElement(_Gapped.Gapped, { vertical: true, gap: 50 }, this.renderTabsGroup(), this.renderSizesGroup(), this.renderLinksGroup(), this.renderButtonsGroup(), this.renderInputsGroup(), this.renderOtherInputsGroup(), this.renderTokenInputsGroup(), this.renderSwitchersGroup(), this.renderControlsGroup()), this.renderStickyStopElement(), /*#__PURE__*/_react.default.createElement(_Gapped.Gapped, { vertical: true, gap: 50 }, this.renderHintsGroup(), this.renderTooltip(), this.renderPaging()));};_proto.renderTabs = function renderTabs() {var _cn;var _this$props2 = this.props,currentThemeType = _this$props2.currentThemeType,onThemeChange = _this$props2.onThemeChange,onEditLinkClick = _this$props2.onEditLinkClick;var tabsOuterWrapperStyle = { background: this.theme.bgDefault };var tabsOuterWrapperClass = (0, _classnames.default)((_cn = {}, _cn[_Playground.jsStyles.tabsWrapper(this.theme)] = true, _cn[_Playground.jsStyles.stickyTabsWrapper(this.theme)] = useSticky, _cn));return /*#__PURE__*/_react.default.createElement("div", { style: tabsOuterWrapperStyle, className: tabsOuterWrapperClass }, /*#__PURE__*/_react.default.createElement(_Gapped.Gapped, { gap: 40 }, /*#__PURE__*/_react.default.createElement(_Tabs.Tabs, { value: this.getCurrentTab(), onValueChange: onThemeChange, vertical: false }, /*#__PURE__*/_react.default.createElement("div", { className: _Playground.jsStyles.tabsInnerWrapper(this.theme) }, /*#__PURE__*/_react.default.createElement(_Tabs.Tabs.Tab, { id: _constants.ThemeType.Default }, "\u0414\u0435\u0444\u043E\u043B\u0442\u043D\u0430\u044F"), /*#__PURE__*/_react.default.createElement(_Tabs.Tabs.Tab, { id: _constants.ThemeType.Flat }, "\u041F\u043B\u043E\u0441\u043A\u0430\u044F"), /*#__PURE__*/_react.default.createElement(_Tabs.Tabs.Tab, { id: _constants.ThemeType.Dark }, "\u0422\u0435\u043C\u043D\u0430\u044F"))), /*#__PURE__*/_react.default.createElement(_Gapped.Gapped, null, /*#__PURE__*/_react.default.createElement(_Toggle.Toggle, { checked: this.is8pxTheme, onValueChange: this.toggle8pxTheme, disabled: currentThemeType === _constants.ThemeType.Dark }), /*#__PURE__*/_react.default.createElement("span", null, "8px")), /*#__PURE__*/_react.default.createElement(_Link2.Link, { onClick: onEditLinkClick }, "\u041D\u0430\u0441\u0442\u0440\u043E\u0438\u0442\u044C \u0442\u0435\u043C\u0443")));};(0, _createClass2.default)(Playground, [{ key: "is8pxTheme", get: function get() {switch (this.props.currentThemeType) {case _constants.ThemeType.Default:case _constants.ThemeType.Flat:return true;default:return false;}} }]);return Playground;}(_react.default.Component);exports.Playground = Playground;

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

@@ -1 +0,0 @@
-{"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","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.FlatOld:\r\n        return ThemeType.Flat;\r\n      case ThemeType.Default:\r\n      case ThemeType.DefaultOld:\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.Default:\r\n      case ThemeType.Flat:\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.DefaultOld);\r\n        break;\r\n      case ThemeType.DefaultOld:\r\n        onThemeChange(ThemeType.Default);\r\n        break;\r\n      case ThemeType.Flat:\r\n        onThemeChange(ThemeType.FlatOld);\r\n        break;\r\n      case ThemeType.FlatOld:\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: 'Success', use: 'success' },\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"]}

package/cjs/internal/ThemePlayground/Playground.md

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

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

@@ -1,23 +0,0 @@
-import { Theme } from '../../lib/theming/Theme';
-export declare const jsStyles: {
-    playground(): string;
-    title(t: Theme): string;
-    componentsGroup(t: Theme): string;
-    sidePageBody(): string;
-    variable(t: Theme): string;
-    variableName(t: Theme): string;
-    deprecated(): string;
-    colorIcon(): string;
-    baseLinkWrapper(): string;
-    linkRoot(): string;
-    baseVariableRoot(): string;
-    loaderWrapper(): string;
-    loader(): string;
-    tabsWrapper(t: Theme): string;
-    tooltipContent(): string;
-    stickyTabsWrapper(t: Theme): string;
-    tabsInnerWrapper(t: Theme): string;
-    playgroundWrapper(t: Theme): string;
-    editorHeaderWrapper(t: Theme): string;
-    editorGroupHeader(t: Theme): string;
-};

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

@@ -1,162 +0,0 @@
-"use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");exports.__esModule = true;exports.jsStyles = void 0;var _taggedTemplateLiteralLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteralLoose"));var _Emotion = require("../../lib/theming/Emotion");var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19, _templateObject20;
-
-
-var styles = {
-  playground: function playground() {
-    return (0, _Emotion.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteralLoose2.default)(["\n      margin: -16px;\n      padding: 32px;\n    "])));
-
-
-
-  },
-
-  title: function title(t) {
-    return (0, _Emotion.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteralLoose2.default)(["\n      width: 110px;\n      color: ", ";\n    "])),
-
-    t.textColorDefault);
-
-  },
-
-  componentsGroup: function componentsGroup(t) {
-    return (0, _Emotion.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteralLoose2.default)(["\n      max-width: 700px;\n      color: ", ";\n    "])),
-
-    t.textColorDefault);
-
-  },
-
-  sidePageBody: function sidePageBody() {
-    return (0, _Emotion.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteralLoose2.default)(["\n      padding: 0 30px 30px;\n    "])));
-
-
-  },
-
-  variable: function variable(t) {
-    return (0, _Emotion.css)(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteralLoose2.default)(["\n      display: flex;\n      align-items: center;\n      margin-bottom: 16px;\n\n      &:focus {\n        outline: 1px solid ", ";\n        outline-offset: 8px;\n      }\n    "])),
-
-
-
-
-
-    t.borderColorFocus);
-
-
-
-  },
-
-  variableName: function variableName(t) {
-    return (0, _Emotion.css)(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteralLoose2.default)(["\n      white-space: nowrap;\n      overflow: hidden;\n      text-overflow: ellipsis;\n      width: 250px;\n      position: relative;\n      z-index: 1;\n      line-height: 34px;\n      color: ", ";\n      flex: 1 1 auto;\n    "])),
-
-
-
-
-
-
-
-    t.textColorDefault);
-
-
-  },
-
-  deprecated: function deprecated() {
-    return (0, _Emotion.css)(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteralLoose2.default)(["\n      text-decoration: line-through;\n    "])));
-
-
-  },
-
-  colorIcon: function colorIcon() {
-    return (0, _Emotion.css)(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteralLoose2.default)(["\n      height: 16px;\n      width: 16px;\n    "])));
-
-
-
-  },
-
-  baseLinkWrapper: function baseLinkWrapper() {
-    return (0, _Emotion.css)(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteralLoose2.default)(["\n      margin-left: auto;\n    "])));
-
-
-  },
-
-  linkRoot: function linkRoot() {
-    return (0, _Emotion.css)(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteralLoose2.default)(["\n      position: relative;\n      z-index: 1;\n    "])));
-
-
-
-  },
-
-  baseVariableRoot: function baseVariableRoot() {
-    return (0, _Emotion.css)(_templateObject11 || (_templateObject11 = (0, _taggedTemplateLiteralLoose2.default)(["\n      position: relative;\n      z-index: 1;\n      padding-left: 10px;\n      width: 240px;\n      display: flex;\n    "])));
-
-
-
-
-
-
-  },
-
-  loaderWrapper: function loaderWrapper() {
-    return (0, _Emotion.css)(_templateObject12 || (_templateObject12 = (0, _taggedTemplateLiteralLoose2.default)(["\n      width: 500px;\n    "])));
-
-
-  },
-
-  loader: function loader() {
-    return (0, _Emotion.css)(_templateObject13 || (_templateObject13 = (0, _taggedTemplateLiteralLoose2.default)(["\n      height: 300px;\n      margin: auto;\n    "])));
-
-
-
-  },
-
-  tabsWrapper: function tabsWrapper(t) {
-    return (0, _Emotion.css)(_templateObject14 || (_templateObject14 = (0, _taggedTemplateLiteralLoose2.default)(["\n      margin: 0 -32px;\n      padding: 11px 32px;\n      position: relative;\n      color: ", ";\n\n      &::after {\n        content: '';\n        position: absolute;\n        bottom: 0;\n        left: 0;\n        height: 1px;\n        width: 100%;\n        z-index: -1;\n      }\n    "])),
-
-
-
-    t.textColorDefault);
-
-
-
-
-
-
-
-
-
-
-
-  },
-
-  tooltipContent: function tooltipContent() {
-    return (0, _Emotion.css)(_templateObject15 || (_templateObject15 = (0, _taggedTemplateLiteralLoose2.default)(["\n      width: 210px;\n    "])));
-
-
-  },
-
-  stickyTabsWrapper: function stickyTabsWrapper(t) {
-    return (0, _Emotion.css)(_templateObject16 || (_templateObject16 = (0, _taggedTemplateLiteralLoose2.default)(["\n      &:after {\n        box-shadow: 0 2px 10px 0px ", ";\n      }\n    "])),
-
-    t.textColorDefault);
-
-
-  },
-  tabsInnerWrapper: function tabsInnerWrapper(t) {
-    return (0, _Emotion.css)(_templateObject17 || (_templateObject17 = (0, _taggedTemplateLiteralLoose2.default)(["\n      color: ", ";\n    "])),
-    t.textColorDefault);
-
-  },
-  playgroundWrapper: function playgroundWrapper(t) {
-    return (0, _Emotion.css)(_templateObject18 || (_templateObject18 = (0, _taggedTemplateLiteralLoose2.default)(["\n      background: ", ";\n    "])),
-    t.bgDefault);
-
-  },
-  editorHeaderWrapper: function editorHeaderWrapper(t) {
-    return (0, _Emotion.css)(_templateObject19 || (_templateObject19 = (0, _taggedTemplateLiteralLoose2.default)(["\n      color: ", ";\n    "])),
-    t.textColorDefault);
-
-  },
-  editorGroupHeader: function editorGroupHeader(t) {
-    return (0, _Emotion.css)(_templateObject20 || (_templateObject20 = (0, _taggedTemplateLiteralLoose2.default)(["\n      color: ", ";\n    "])),
-    t.textColorDefault);
-
-  } };
-
-
-var jsStyles = (0, _Emotion.memoizeStyle)(styles);exports.jsStyles = jsStyles;

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

@@ -1 +0,0 @@
-{"version":3,"sources":["Playground.styles.ts"],"names":["styles","playground","css","title","t","textColorDefault","componentsGroup","sidePageBody","variable","borderColorFocus","variableName","deprecated","colorIcon","baseLinkWrapper","linkRoot","baseVariableRoot","loaderWrapper","loader","tabsWrapper","tooltipContent","stickyTabsWrapper","tabsInnerWrapper","playgroundWrapper","bgDefault","editorHeaderWrapper","editorGroupHeader","jsStyles"],"mappings":"8QAAA,oD;;;AAGA,IAAMA,MAAM,GAAG;AACbC,EAAAA,UADa,wBACA;AACX,eAAOC,YAAP;;;;AAID,GANY;;AAQbC,EAAAA,KARa,iBAQPC,CARO,EAQG;AACd,eAAOF,YAAP;;AAEWE,IAAAA,CAAC,CAACC,gBAFb;;AAID,GAbY;;AAebC,EAAAA,eAfa,2BAeGF,CAfH,EAea;AACxB,eAAOF,YAAP;;AAEWE,IAAAA,CAAC,CAACC,gBAFb;;AAID,GApBY;;AAsBbE,EAAAA,YAtBa,0BAsBE;AACb,eAAOL,YAAP;;;AAGD,GA1BY;;AA4BbM,EAAAA,QA5Ba,oBA4BJJ,CA5BI,EA4BM;AACjB,eAAOF,YAAP;;;;;;AAMyBE,IAAAA,CAAC,CAACK,gBAN3B;;;;AAUD,GAvCY;;AAyCbC,EAAAA,YAzCa,wBAyCAN,CAzCA,EAyCU;AACrB,eAAOF,YAAP;;;;;;;;AAQWE,IAAAA,CAAC,CAACC,gBARb;;;AAWD,GArDY;;AAuDbM,EAAAA,UAvDa,wBAuDA;AACX,eAAOT,YAAP;;;AAGD,GA3DY;;AA6DbU,EAAAA,SA7Da,uBA6DD;AACV,eAAOV,YAAP;;;;AAID,GAlEY;;AAoEbW,EAAAA,eApEa,6BAoEK;AAChB,eAAOX,YAAP;;;AAGD,GAxEY;;AA0EbY,EAAAA,QA1Ea,sBA0EF;AACT,eAAOZ,YAAP;;;;AAID,GA/EY;;AAiFba,EAAAA,gBAjFa,8BAiFM;AACjB,eAAOb,YAAP;;;;;;;AAOD,GAzFY;;AA2Fbc,EAAAA,aA3Fa,2BA2FG;AACd,eAAOd,YAAP;;;AAGD,GA/FY;;AAiGbe,EAAAA,MAjGa,oBAiGJ;AACP,eAAOf,YAAP;;;;AAID,GAtGY;;AAwGbgB,EAAAA,WAxGa,uBAwGDd,CAxGC,EAwGS;AACpB,eAAOF,YAAP;;;;AAIWE,IAAAA,CAAC,CAACC,gBAJb;;;;;;;;;;;;AAgBD,GAzHY;;AA2Hbc,EAAAA,cA3Ha,4BA2HI;AACf,eAAOjB,YAAP;;;AAGD,GA/HY;;AAiIbkB,EAAAA,iBAjIa,6BAiIKhB,CAjIL,EAiIe;AAC1B,eAAOF,YAAP;;AAEiCE,IAAAA,CAAC,CAACC,gBAFnC;;;AAKD,GAvIY;AAwIbgB,EAAAA,gBAxIa,4BAwIIjB,CAxIJ,EAwIc;AACzB,eAAOF,YAAP;AACWE,IAAAA,CAAC,CAACC,gBADb;;AAGD,GA5IY;AA6IbiB,EAAAA,iBA7Ia,6BA6IKlB,CA7IL,EA6Ie;AAC1B,eAAOF,YAAP;AACgBE,IAAAA,CAAC,CAACmB,SADlB;;AAGD,GAjJY;AAkJbC,EAAAA,mBAlJa,+BAkJOpB,CAlJP,EAkJiB;AAC5B,eAAOF,YAAP;AACWE,IAAAA,CAAC,CAACC,gBADb;;AAGD,GAtJY;AAuJboB,EAAAA,iBAvJa,6BAuJKrB,CAvJL,EAuJe;AAC1B,eAAOF,YAAP;AACWE,IAAAA,CAAC,CAACC,gBADb;;AAGD,GA3JY,EAAf;;;AA8JO,IAAMqB,QAAQ,GAAG,2BAAa1B,MAAb,CAAjB,C","sourcesContent":["import { css, memoizeStyle } from '../../lib/theming/Emotion';\r\nimport { Theme } from '../../lib/theming/Theme';\r\n\r\nconst styles = {\r\n  playground() {\r\n    return css`\r\n      margin: -16px;\r\n      padding: 32px;\r\n    `;\r\n  },\r\n\r\n  title(t: Theme) {\r\n    return css`\r\n      width: 110px;\r\n      color: ${t.textColorDefault};\r\n    `;\r\n  },\r\n\r\n  componentsGroup(t: Theme) {\r\n    return css`\r\n      max-width: 700px;\r\n      color: ${t.textColorDefault};\r\n    `;\r\n  },\r\n\r\n  sidePageBody() {\r\n    return css`\r\n      padding: 0 30px 30px;\r\n    `;\r\n  },\r\n\r\n  variable(t: Theme) {\r\n    return css`\r\n      display: flex;\r\n      align-items: center;\r\n      margin-bottom: 16px;\r\n\r\n      &:focus {\r\n        outline: 1px solid ${t.borderColorFocus};\r\n        outline-offset: 8px;\r\n      }\r\n    `;\r\n  },\r\n\r\n  variableName(t: Theme) {\r\n    return css`\r\n      white-space: nowrap;\r\n      overflow: hidden;\r\n      text-overflow: ellipsis;\r\n      width: 250px;\r\n      position: relative;\r\n      z-index: 1;\r\n      line-height: 34px;\r\n      color: ${t.textColorDefault};\r\n      flex: 1 1 auto;\r\n    `;\r\n  },\r\n\r\n  deprecated() {\r\n    return css`\r\n      text-decoration: line-through;\r\n    `;\r\n  },\r\n\r\n  colorIcon() {\r\n    return css`\r\n      height: 16px;\r\n      width: 16px;\r\n    `;\r\n  },\r\n\r\n  baseLinkWrapper() {\r\n    return css`\r\n      margin-left: auto;\r\n    `;\r\n  },\r\n\r\n  linkRoot() {\r\n    return css`\r\n      position: relative;\r\n      z-index: 1;\r\n    `;\r\n  },\r\n\r\n  baseVariableRoot() {\r\n    return css`\r\n      position: relative;\r\n      z-index: 1;\r\n      padding-left: 10px;\r\n      width: 240px;\r\n      display: flex;\r\n    `;\r\n  },\r\n\r\n  loaderWrapper() {\r\n    return css`\r\n      width: 500px;\r\n    `;\r\n  },\r\n\r\n  loader() {\r\n    return css`\r\n      height: 300px;\r\n      margin: auto;\r\n    `;\r\n  },\r\n\r\n  tabsWrapper(t: Theme) {\r\n    return css`\r\n      margin: 0 -32px;\r\n      padding: 11px 32px;\r\n      position: relative;\r\n      color: ${t.textColorDefault};\r\n\r\n      &::after {\r\n        content: '';\r\n        position: absolute;\r\n        bottom: 0;\r\n        left: 0;\r\n        height: 1px;\r\n        width: 100%;\r\n        z-index: -1;\r\n      }\r\n    `;\r\n  },\r\n\r\n  tooltipContent() {\r\n    return css`\r\n      width: 210px;\r\n    `;\r\n  },\r\n\r\n  stickyTabsWrapper(t: Theme) {\r\n    return css`\r\n      &:after {\r\n        box-shadow: 0 2px 10px 0px ${t.textColorDefault};\r\n      }\r\n    `;\r\n  },\r\n  tabsInnerWrapper(t: Theme) {\r\n    return css`\r\n      color: ${t.textColorDefault};\r\n    `;\r\n  },\r\n  playgroundWrapper(t: Theme) {\r\n    return css`\r\n      background: ${t.bgDefault};\r\n    `;\r\n  },\r\n  editorHeaderWrapper(t: Theme) {\r\n    return css`\r\n      color: ${t.textColorDefault};\r\n    `;\r\n  },\r\n  editorGroupHeader(t: Theme) {\r\n    return css`\r\n      color: ${t.textColorDefault};\r\n    `;\r\n  },\r\n};\r\n\r\nexport const jsStyles = memoizeStyle(styles);\r\n"]}

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

@@ -1 +0,0 @@
-export declare const RadioPlayground: () => JSX.Element;

package/cjs/internal/ThemePlayground/RadioPlayground.js

@@ -1,27 +0,0 @@
-"use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");exports.__esModule = true;exports.RadioPlayground = void 0;var _react = _interopRequireDefault(require("react"));
-
-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");
-
-var propsList = [
-{ value: '', children: 'Default', checked: false },
-{ value: '', children: 'Checked' },
-{ value: '', children: 'Disabled', disabled: true },
-{ value: '', children: 'Focused', focused: true },
-{ value: '', children: 'Error', error: true },
-{ value: '', children: 'Warning', warning: true }];
-
-
-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 },
-    (0, _helpers.getComponentsFromPropsList)( /*#__PURE__*/_react.default.createElement(_Radio.Radio, { value: '', checked: true }), propsList)));
-
-
-};exports.RadioPlayground = RadioPlayground;

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

@@ -1 +0,0 @@
-{"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';\r\n\r\nimport { Gapped } from '../../components/Gapped';\r\nimport { Radio, RadioProps } from '../../components/Radio';\r\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\r\nimport { is8pxTheme } from '../../lib/theming/ThemeHelpers';\r\n\r\nimport { getComponentsFromPropsList } from './helpers';\r\n\r\nconst propsList: RadioProps<string>[] = [\r\n  { value: '', children: 'Default', checked: false },\r\n  { value: '', children: 'Checked' },\r\n  { value: '', children: 'Disabled', disabled: true },\r\n  { value: '', children: 'Focused', focused: true },\r\n  { value: '', children: 'Error', error: true },\r\n  { value: '', children: 'Warning', warning: true },\r\n];\r\n\r\nexport const RadioPlayground = () => {\r\n  const theme = React.useContext(ThemeContext);\r\n  const gap = is8pxTheme(theme) ? 0 : 10;\r\n  return (\r\n    <Gapped gap={gap} vertical>\r\n      {getComponentsFromPropsList(<Radio value={''} checked />, propsList)}\r\n    </Gapped>\r\n  );\r\n};\r\n"]}

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

@@ -1,12 +0,0 @@
-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;
-    };
-    private readonly selectItems;
-    render(): JSX.Element;
-    private handleChange;
-}