@skbkontur/react-ui 0.0.0-e55f22da73 → 0.0.0-ea6161656e

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

@@ -1,11 +1,12 @@
 import React from 'react';
+import { Nullable } from '../../typings/utility-types';
 import { CurrencyInputProps } from '../../components/CurrencyInput';
-export declare class CurrencyInputPlayground extends React.Component<Partial<CurrencyInputProps>, {
-    value?: number | null;
-}> {
-    state: {
-        value: number;
-    };
+interface CurrencyInputPlaygroundState {
+    value: Nullable<number>;
+}
+export declare class CurrencyInputPlayground extends React.Component<Partial<CurrencyInputProps>> {
+    state: CurrencyInputPlaygroundState;
     render(): JSX.Element;
     private handleChange;
 }
+export {};

package/cjs/internal/ThemePlayground/CurrencyInputPlayground.js

@@ -1,13 +1,12 @@
-"use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");exports.__esModule = true;exports.CurrencyInputPlayground = void 0;var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));var _inheritsLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/inheritsLoose"));var _react = _interopRequireDefault(require("react"));
+"use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;exports.__esModule = true;exports.CurrencyInputPlayground = void 0;var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));var _inheritsLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/inheritsLoose"));var _react = _interopRequireDefault(require("react"));
 
-var _CurrencyInput = require("../../components/CurrencyInput");var
-
-CurrencyInputPlayground = /*#__PURE__*/function (_React$Component) {(0, _inheritsLoose2.default)(CurrencyInputPlayground, _React$Component);function CurrencyInputPlayground() {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.
 
+var _CurrencyInput = require("../../components/CurrencyInput");var
 
 
 
 
+CurrencyInputPlayground = /*#__PURE__*/function (_React$Component) {(0, _inheritsLoose2.default)(CurrencyInputPlayground, _React$Component);function CurrencyInputPlayground() {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: _this.props.value || 2222 };_this.
 
@@ -28,4 +27,4 @@ CurrencyInputPlayground = /*#__PURE__*/function (_React$Component) {(0, _inherit
 
     handleChange = function (value) {
       _this.setState({ value: value });
-    };return _this;}var _proto = CurrencyInputPlayground.prototype;_proto.render = function render() {return _react.default.createElement("div", null, _react.default.createElement(_CurrencyInput.CurrencyInput, (0, _extends2.default)({}, this.props, { placeholder: 'currency', value: this.state.value, onValueChange: this.handleChange, width: 150 })));};return CurrencyInputPlayground;}(_react.default.Component);exports.CurrencyInputPlayground = CurrencyInputPlayground;
+    };return _this;}var _proto = CurrencyInputPlayground.prototype;_proto.render = function render() {return /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_CurrencyInput.CurrencyInput, (0, _extends2.default)({}, this.props, { placeholder: 'currency', value: this.state.value, onValueChange: this.handleChange, width: 150 })));};return CurrencyInputPlayground;}(_react.default.Component);exports.CurrencyInputPlayground = CurrencyInputPlayground;

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

@@ -1 +1 @@
-{"version":3,"sources":["CurrencyInputPlayground.tsx"],"names":["CurrencyInputPlayground","state","value","props","handleChange","setState","render","React","Component"],"mappings":"qVAAA;;AAEA,+D;;AAEaA,uB;;;;;;AAMJC,IAAAA,K,GAAQ;AACbC,MAAAA,KAAK,EAAE,MAAKC,KAAL,CAAWD,KAAX,IAAoB,IADd,E;;;;;;;;;;;;;;;;;AAkBPE,IAAAA,Y,GAAe,UAACF,KAAD,EAA2B;AAChD,YAAKG,QAAL,CAAc,EAAEH,KAAK,EAALA,KAAF,EAAd;AACD,K,qEAhBMI,M,GAAP,kBAAgB,CACd,OACE,0CACE,6BAAC,4BAAD,6BACM,KAAKH,KADX,IAEE,WAAW,EAAE,UAFf,EAGE,KAAK,EAAE,KAAKF,KAAL,CAAWC,KAHpB,EAIE,aAAa,EAAE,KAAKE,YAJtB,EAKE,KAAK,EAAE,GALT,IADF,CADF,CAWD,C,kCAtB0CG,eAAMC,S","sourcesContent":["import React from 'react';\r\n\r\nimport { CurrencyInput, CurrencyInputProps } from '../../components/CurrencyInput';\r\n\r\nexport class CurrencyInputPlayground extends React.Component<\r\n  Partial<CurrencyInputProps>,\r\n  {\r\n    value?: number | null;\r\n  }\r\n> {\r\n  public state = {\r\n    value: this.props.value || 2222,\r\n  };\r\n\r\n  public render() {\r\n    return (\r\n      <div>\r\n        <CurrencyInput\r\n          {...this.props}\r\n          placeholder={'currency'}\r\n          value={this.state.value}\r\n          onValueChange={this.handleChange}\r\n          width={150}\r\n        />\r\n      </div>\r\n    );\r\n  }\r\n\r\n  private handleChange = (value?: number | null) => {\r\n    this.setState({ value });\r\n  };\r\n}\r\n"]}
+{"version":3,"sources":["CurrencyInputPlayground.tsx"],"names":["CurrencyInputPlayground","state","value","props","handleChange","setState","render","React","Component"],"mappings":"6VAAA;;;AAGA,+D;;;;;AAKaA,uB;AACJC,IAAAA,K,GAAsC;AAC3CC,MAAAA,KAAK,EAAE,MAAKC,KAAL,CAAWD,KAAX,IAAoB,IADgB,E;;;;;;;;;;;;;;;;;AAkBrCE,IAAAA,Y,GAAe,UAACF,KAAD,EAA2B;AAChD,YAAKG,QAAL,CAAc,EAAEH,KAAK,EAALA,KAAF,EAAd;AACD,K,qEAhBMI,M,GAAP,kBAAgB,CACd,oBACE,uDACE,6BAAC,4BAAD,6BACM,KAAKH,KADX,IAEE,WAAW,EAAE,UAFf,EAGE,KAAK,EAAE,KAAKF,KAAL,CAAWC,KAHpB,EAIE,aAAa,EAAE,KAAKE,YAJtB,EAKE,KAAK,EAAE,GALT,IADF,CADF,CAWD,C,kCAjB0CG,eAAMC,S","sourcesContent":["import React from 'react';\n\nimport { Nullable } from '../../typings/utility-types';\nimport { CurrencyInput, CurrencyInputProps } from '../../components/CurrencyInput';\n\ninterface CurrencyInputPlaygroundState {\n  value: Nullable<number>;\n}\nexport class CurrencyInputPlayground extends React.Component<Partial<CurrencyInputProps>> {\n  public state: CurrencyInputPlaygroundState = {\n    value: this.props.value || 2222,\n  };\n\n  public render() {\n    return (\n      <div>\n        <CurrencyInput\n          {...this.props}\n          placeholder={'currency'}\n          value={this.state.value}\n          onValueChange={this.handleChange}\n          width={150}\n        />\n      </div>\n    );\n  }\n\n  private handleChange = (value?: number | null) => {\n    this.setState({ value });\n  };\n}\n"]}

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

@@ -1,10 +1,12 @@
 import React from 'react';
-export declare class FxInputPlayground extends React.Component<{}, {
-    value: string;
+interface FxInputPlaygroundState {
     auto: boolean;
-}> {
-    constructor(props: {});
+    value: string;
+}
+export declare class FxInputPlayground extends React.Component {
+    state: FxInputPlaygroundState;
     render(): JSX.Element;
     private onValueChange;
     private handleRestore;
 }
+export {};

package/cjs/internal/ThemePlayground/FxInputPlayground.js

@@ -1,15 +1,15 @@
-"use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");exports.__esModule = true;exports.FxInputPlayground = void 0;var _inheritsLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/inheritsLoose"));var _react = _interopRequireDefault(require("react"));
+"use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;exports.__esModule = true;exports.FxInputPlayground = void 0;var _inheritsLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/inheritsLoose"));var _react = _interopRequireDefault(require("react"));
 
 var _FxInput = require("../../components/FxInput");var
 
-FxInputPlayground = /*#__PURE__*/function (_React$Component) {(0, _inheritsLoose2.default)(FxInputPlayground, _React$Component);
-  function FxInputPlayground(props) {var _this;
-    _this = _React$Component.call(this, props) || this;_this.
-
 
 
 
 
+FxInputPlayground = /*#__PURE__*/function (_React$Component) {(0, _inheritsLoose2.default)(FxInputPlayground, _React$Component);function FxInputPlayground() {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 = {
+      auto: true,
+      value: 'auto' };_this.
 
 
 
@@ -34,4 +34,4 @@ FxInputPlayground = /*#__PURE__*/function (_React$Component) {(0, _inheritsLoose
         value: 'auto',
         auto: true });
 
-    };_this.state = { auto: true, value: 'auto' };return _this;}var _proto = FxInputPlayground.prototype;_proto.render = function render() {return _react.default.createElement(_FxInput.FxInput, { auto: this.state.auto, type: 'text', value: this.state.value, onRestore: this.handleRestore, onValueChange: this.onValueChange, width: 150 });};return FxInputPlayground;}(_react.default.Component);exports.FxInputPlayground = FxInputPlayground;
+    };return _this;}var _proto = FxInputPlayground.prototype;_proto.render = function render() {return /*#__PURE__*/_react.default.createElement(_FxInput.FxInput, { auto: this.state.auto, type: 'text', value: this.state.value, onRestore: this.handleRestore, onValueChange: this.onValueChange, width: 150 });};return FxInputPlayground;}(_react.default.Component);exports.FxInputPlayground = FxInputPlayground;

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

@@ -1 +1 @@
-{"version":3,"sources":["FxInputPlayground.tsx"],"names":["FxInputPlayground","props","onValueChange","value","setState","auto","handleRestore","state","render","React","Component"],"mappings":"6PAAA;;AAEA,mD;;AAEaA,iB;AACX,6BAAYC,KAAZ,EAAuB;AACrB,wCAAMA,KAAN,UADqB;;;;;;;;;;;;;;;;;;;;;AAsBfC,IAAAA,aAtBe,GAsBC,UAACC,KAAD,EAAmB;AACzC,YAAKC,QAAL,CAAc,EAAED,KAAK,EAALA,KAAF,EAASE,IAAI,EAAE,KAAf,EAAd;AACD,KAxBsB;;AA0BfC,IAAAA,aA1Be,GA0BC,YAAM;AAC5B,YAAKF,QAAL,CAAc;AACZD,QAAAA,KAAK,EAAE,MADK;AAEZE,QAAAA,IAAI,EAAE,IAFM,EAAd;;AAID,KA/BsB,CAGrB,MAAKE,KAAL,GAAa,EACXF,IAAI,EAAE,IADK,EAEXF,KAAK,EAAE,MAFI,EAAb,CAHqB,aAOtB,C,gDAEMK,M,GAAP,kBAA6B,CAC3B,OACE,6BAAC,gBAAD,IACE,IAAI,EAAE,KAAKD,KAAL,CAAWF,IADnB,EAEE,IAAI,EAAE,MAFR,EAGE,KAAK,EAAE,KAAKE,KAAL,CAAWJ,KAHpB,EAIE,SAAS,EAAE,KAAKG,aAJlB,EAKE,aAAa,EAAE,KAAKJ,aALtB,EAME,KAAK,EAAE,GANT,GADF,CAUD,C,4BArBoCO,eAAMC,S","sourcesContent":["import React from 'react';\r\n\r\nimport { FxInput } from '../../components/FxInput';\r\n\r\nexport class FxInputPlayground extends React.Component<{}, { value: string; auto: boolean }> {\r\n  constructor(props: {}) {\r\n    super(props);\r\n\r\n    this.state = {\r\n      auto: true,\r\n      value: 'auto',\r\n    };\r\n  }\r\n\r\n  public render(): JSX.Element {\r\n    return (\r\n      <FxInput\r\n        auto={this.state.auto}\r\n        type={'text'}\r\n        value={this.state.value}\r\n        onRestore={this.handleRestore}\r\n        onValueChange={this.onValueChange}\r\n        width={150}\r\n      />\r\n    );\r\n  }\r\n\r\n  private onValueChange = (value: string) => {\r\n    this.setState({ value, auto: false });\r\n  };\r\n\r\n  private handleRestore = () => {\r\n    this.setState({\r\n      value: 'auto',\r\n      auto: true,\r\n    });\r\n  };\r\n}\r\n"]}
+{"version":3,"sources":["FxInputPlayground.tsx"],"names":["FxInputPlayground","state","auto","value","onValueChange","setState","handleRestore","render","React","Component"],"mappings":"qQAAA;;AAEA,mD;;;;;;AAMaA,iB;AACJC,IAAAA,K,GAAgC;AACrCC,MAAAA,IAAI,EAAE,IAD+B;AAErCC,MAAAA,KAAK,EAAE,MAF8B,E;;;;;;;;;;;;;;;;AAkB/BC,IAAAA,a,GAAgB,UAACD,KAAD,EAAmB;AACzC,YAAKE,QAAL,CAAc,EAAEF,KAAK,EAALA,KAAF,EAASD,IAAI,EAAE,KAAf,EAAd;AACD,K;;AAEOI,IAAAA,a,GAAgB,YAAM;AAC5B,YAAKD,QAAL,CAAc;AACZF,QAAAA,KAAK,EAAE,MADK;AAEZD,QAAAA,IAAI,EAAE,IAFM,EAAd;;AAID,K,+DAtBMK,M,GAAP,kBAA6B,CAC3B,oBACE,6BAAC,gBAAD,IACE,IAAI,EAAE,KAAKN,KAAL,CAAWC,IADnB,EAEE,IAAI,EAAE,MAFR,EAGE,KAAK,EAAE,KAAKD,KAAL,CAAWE,KAHpB,EAIE,SAAS,EAAE,KAAKG,aAJlB,EAKE,aAAa,EAAE,KAAKF,aALtB,EAME,KAAK,EAAE,GANT,GADF,CAUD,C,4BAjBoCI,eAAMC,S","sourcesContent":["import React from 'react';\n\nimport { FxInput } from '../../components/FxInput';\n\ninterface FxInputPlaygroundState {\n  auto: boolean;\n  value: string;\n}\nexport class FxInputPlayground extends React.Component {\n  public state: FxInputPlaygroundState = {\n    auto: true,\n    value: 'auto',\n  };\n\n  public render(): JSX.Element {\n    return (\n      <FxInput\n        auto={this.state.auto}\n        type={'text'}\n        value={this.state.value}\n        onRestore={this.handleRestore}\n        onValueChange={this.onValueChange}\n        width={150}\n      />\n    );\n  }\n\n  private onValueChange = (value: string) => {\n    this.setState({ value, auto: false });\n  };\n\n  private handleRestore = () => {\n    this.setState({\n      value: 'auto',\n      auto: true,\n    });\n  };\n}\n"]}

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

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

package/cjs/internal/ThemePlayground/HintPlayground.js

@@ -1,4 +1,4 @@
-"use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");exports.__esModule = true;exports.HintPlayground = void 0;var _inheritsLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/inheritsLoose"));var _react = _interopRequireDefault(require("react"));
+"use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;exports.__esModule = true;exports.HintPlayground = void 0;var _inheritsLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/inheritsLoose"));var _react = _interopRequireDefault(require("react"));
 
 var _Gapped = require("../../components/Gapped");
 var _Button = require("../../components/Button");
@@ -25,4 +25,4 @@ HintPlayground = /*#__PURE__*/function (_React$Component) {(0, _inheritsLoose2.d
 
     pushToastWithAction = function () {
       _Toast.Toast.push('Текст сообщения', { label: 'Ссылка', handler: function handler() {return null;} });
-    };return _this;}var _proto = HintPlayground.prototype;_proto.render = function render() {return _react.default.createElement(_Gapped.Gapped, { gap: 10 }, _react.default.createElement(_Hint.Hint, { manual: true, opened: true, text: 'Показать тост' }, _react.default.createElement(_Button.Button, { onClick: this.pushToast }, "Toast")), _react.default.createElement(_Hint.Hint, { manual: true, opened: true, text: 'Показать тост с ссылкой', pos: 'right' }, _react.default.createElement(_Button.Button, { onClick: this.pushToastWithAction }, "Toast with link")));};return HintPlayground;}(_react.default.Component);exports.HintPlayground = HintPlayground;
+    };return _this;}var _proto = HintPlayground.prototype;_proto.render = function render() {return /*#__PURE__*/_react.default.createElement(_Gapped.Gapped, { gap: 10 }, /*#__PURE__*/_react.default.createElement(_Hint.Hint, { manual: true, opened: true, text: 'Показать тост' }, /*#__PURE__*/_react.default.createElement(_Button.Button, { onClick: this.pushToast }, "Toast")), /*#__PURE__*/_react.default.createElement(_Hint.Hint, { manual: true, opened: true, text: 'Показать тост с ссылкой', pos: 'right' }, /*#__PURE__*/_react.default.createElement(_Button.Button, { onClick: this.pushToastWithAction }, "Toast with link")));};return HintPlayground;}(_react.default.Component);exports.HintPlayground = HintPlayground;

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

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

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

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

package/cjs/internal/ThemePlayground/PagingPlayground.js

@@ -1,10 +1,13 @@
-"use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");exports.__esModule = true;exports.PagingPlayground = void 0;var _inheritsLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/inheritsLoose"));var _react = _interopRequireDefault(require("react"));
+"use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;exports.__esModule = true;exports.PagingPlayground = void 0;var _inheritsLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/inheritsLoose"));var _react = _interopRequireDefault(require("react"));
 
 var _Paging = require("../../components/Paging");var
 
+
+
+
 PagingPlayground = /*#__PURE__*/function (_React$Component) {(0, _inheritsLoose2.default)(PagingPlayground, _React$Component);function PagingPlayground() {var _this;for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {args[_key] = arguments[_key];}_this = _React$Component.call.apply(_React$Component, [this].concat(args)) || this;_this.
     state = {
-      active: 1 };_this.
+      activePage: 1 };_this.
 
 
 
@@ -13,4 +16,4 @@ PagingPlayground = /*#__PURE__*/function (_React$Component) {(0, _inheritsLoose2
 
     handlePageChange = function (pageNumber) {
       _this.setState({ active: pageNumber });
-    };return _this;}var _proto = PagingPlayground.prototype;_proto.render = function render() {return _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,OAAO,6BAAC,cAAD,IAAQ,UAAU,EAAE,KAAKL,KAAL,CAAWC,MAA/B,EAAuC,YAAY,EAAE,KAAKC,gBAA1D,EAA4E,UAAU,EAAE,EAAxF,GAAP,CACD,C,2BAPmCI,eAAMC,S","sourcesContent":["import React from 'react';\r\n\r\nimport { Paging } from '../../components/Paging';\r\n\r\nexport class PagingPlayground extends React.Component<{}, { active: number }> {\r\n  public state = {\r\n    active: 1,\r\n  };\r\n\r\n  public render() {\r\n    return <Paging activePage={this.state.active} onPageChange={this.handlePageChange} pagesCount={12} />;\r\n  }\r\n\r\n  private handlePageChange = (pageNumber: number) => {\r\n    this.setState({ active: pageNumber });\r\n  };\r\n}\r\n"]}
+{"version":3,"sources":["PagingPlayground.tsx"],"names":["PagingPlayground","state","activePage","handlePageChange","pageNumber","setState","active","render","React","Component"],"mappings":"oQAAA;;AAEA,iD;;;;;AAKaA,gB;AACJC,IAAAA,K,GAA+B;AACpCC,MAAAA,UAAU,EAAE,CADwB,E;;;;;;;AAQ9BC,IAAAA,gB,GAAmB,UAACC,UAAD,EAAwB;AACjD,YAAKC,QAAL,CAAc,EAAEC,MAAM,EAAEF,UAAV,EAAd;AACD,K,8DANMG,M,GAAP,kBAAgB,CACd,oBAAO,6BAAC,cAAD,IAAQ,UAAU,EAAE,KAAKN,KAAL,CAAWC,UAA/B,EAA2C,YAAY,EAAE,KAAKC,gBAA9D,EAAgF,UAAU,EAAE,EAA5F,GAAP,CACD,C,2BAPmCK,eAAMC,S","sourcesContent":["import React from 'react';\n\nimport { Paging } from '../../components/Paging';\n\ninterface PagingPlaygroundState {\n  activePage: number;\n}\nexport class PagingPlayground extends React.Component {\n  public state: PagingPlaygroundState = {\n    activePage: 1,\n  };\n\n  public render() {\n    return <Paging activePage={this.state.activePage} onPageChange={this.handlePageChange} pagesCount={12} />;\n  }\n\n  private handlePageChange = (pageNumber: number) => {\n    this.setState({ active: pageNumber });\n  };\n}\n"]}

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

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

package/cjs/internal/ThemePlayground/Playground.js

@@ -1,24 +1,24 @@
-"use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");exports.__esModule = true;exports.Playground = void 0;var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));var _inheritsLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/inheritsLoose"));var _react = _interopRequireDefault(require("react"));
-var _classnames = _interopRequireDefault(require("classnames"));
+"use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;exports.__esModule = true;exports.Playground = void 0;var _inheritsLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/inheritsLoose"));var _react = _interopRequireDefault(require("react"));
 var _Search = _interopRequireDefault(require("@skbkontur/react-icons/Search"));
-var _Card = _interopRequireDefault(require("@skbkontur/react-icons/Card"));
 var _Link = _interopRequireDefault(require("@skbkontur/react-icons/Link"));
 var _Ok = _interopRequireDefault(require("@skbkontur/react-icons/Ok"));
 var _Error = _interopRequireDefault(require("@skbkontur/react-icons/Error"));
 var _Trash = _interopRequireDefault(require("@skbkontur/react-icons/Trash"));
 var _HelpDot = _interopRequireDefault(require("@skbkontur/react-icons/HelpDot"));
 
+
 var _Button = require("../../components/Button");
 var _Tabs = require("../../components/Tabs");
 var _Gapped = require("../../components/Gapped");
 var _Link2 = require("../../components/Link");
 var _Input = require("../../components/Input");
-var _Toggle = require("../../components/Toggle");
-var _ThemeContext = require("../../lib/theming/ThemeContext");
 var _Tooltip = require("../../components/Tooltip");
 var _Sticky = require("../../components/Sticky");
 
 var _currentEnvironment = require("../../lib/currentEnvironment");
+var _Emotion = require("../../lib/theming/Emotion");
+var _FileUploader = require("../../components/FileUploader");
+var _ThemeContext = require("../../lib/theming/ThemeContext");
 
 var _constants = require("./constants");
 var _TokenInputPlayground = require("./TokenInputPlayground");
@@ -27,13 +27,13 @@ var _TogglePlayground = require("./TogglePlayground");
 var _SwitcherPlayground = require("./SwitcherPlayground");
 var _FxInputPlayground = require("./FxInputPlayground");
 var _CurrencyInputPlayground = require("./CurrencyInputPlayground");
-var _SelectPlayground = require("./SelectPlayground");
 var _helpers = require("./helpers");
 var _CheckboxPlayground = require("./CheckboxPlayground");
 var _RadioPlayground = require("./RadioPlayground");
 var _PagingPlayground = require("./PagingPlayground");
 var _HintPlayground = require("./HintPlayground");
 var _ComponentsGroup = require("./ComponentsGroup");
+var _SizesGroup = require("./SizesGroup");
 var _Playground = require("./Playground.styles");
 
 var useSticky = !_currentEnvironment.isTestEnv;var
@@ -45,10 +45,9 @@ var useSticky = !_currentEnvironment.isTestEnv;var
 
 
 Playground = /*#__PURE__*/function (_React$Component) {(0, _inheritsLoose2.default)(Playground, _React$Component);function Playground() {var _this;for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {args[_key] = arguments[_key];}_this = _React$Component.call.apply(_React$Component, [this].concat(args)) || this;_this.
-    theme = void 0;_this.
-    stopEl = _react.default.createRef();_this.
 
 
+    stopEl = /*#__PURE__*/_react.default.createRef();_this.
 
 
 
@@ -83,17 +82,6 @@ Playground = /*#__PURE__*/function (_React$Component) {(0, _inheritsLoose2.defau
 
 
 
-    renderTabsGroup = function () {
-      return useSticky ?
-      _react.default.createElement(_Sticky.Sticky, { side: 'top', getStop: _this.getStickyStop },
-      _this.renderTabs()) :
-
-
-      _this.renderTabs();
-
-    };_this.
-
-
 
 
 
@@ -105,9 +93,15 @@ Playground = /*#__PURE__*/function (_React$Component) {(0, _inheritsLoose2.defau
 
 
 
+    renderTabsGroup = function () {
+      return useSticky ? /*#__PURE__*/
+      _react.default.createElement(_Sticky.Sticky, { side: 'top', getStop: _this.getStickyStop },
+      _this.renderTabs()) :
 
 
+      _this.renderTabs();
 
+    };_this.
 
 
 
@@ -125,19 +119,7 @@ Playground = /*#__PURE__*/function (_React$Component) {(0, _inheritsLoose2.defau
 
 
 
-    getCurrentTab = function () {
-      switch (_this.props.currentThemeType) {
-        case _constants.ThemeType.Dark:
-          return _constants.ThemeType.Dark;
-        case _constants.ThemeType.Flat:
-        case _constants.ThemeType.Flat8px:
-          return _constants.ThemeType.Flat;
-        case _constants.ThemeType.Default:
-        case _constants.ThemeType.Default8px:
-        default:
-          return _constants.ThemeType.Default;}
 
-    };_this.
 
 
 
@@ -149,59 +131,45 @@ Playground = /*#__PURE__*/function (_React$Component) {(0, _inheritsLoose2.defau
 
 
 
-    toggle8pxTheme = function (value) {var _this$props =
-      _this.props,currentThemeType = _this$props.currentThemeType,onThemeChange = _this$props.onThemeChange;
-      switch (currentThemeType) {
-        case _constants.ThemeType.Default:
-          onThemeChange(_constants.ThemeType.Default8px);
-          break;
-        case _constants.ThemeType.Default8px:
-          onThemeChange(_constants.ThemeType.Default);
-          break;
-        case _constants.ThemeType.Flat:
-          onThemeChange(_constants.ThemeType.Flat8px);
-          break;
-        case _constants.ThemeType.Flat8px:
-          onThemeChange(_constants.ThemeType.Flat);
-          break;}
+    getCurrentTab = function () {
+      switch (_this.props.currentThemeType) {
+        case _constants.ThemeType.Dark:
+          return _constants.ThemeType.Dark;
+        case _constants.ThemeType.FlatOld:
+          return _constants.ThemeType.FlatOld;
+        case _constants.ThemeType.DefaultOld:
+          return _constants.ThemeType.DefaultOld;
+        case _constants.ThemeType.Theme2022:
+          return _constants.ThemeType.Theme2022;
+        case _constants.ThemeType.Theme2022Dark:
+          return _constants.ThemeType.Theme2022Dark;
+        default:
+          return _constants.ThemeType.Default;}
 
     };_this.
 
     renderSizesGroup = function () {
-      var Group = function Group(_ref) {var size = _ref.size;return (
-          _react.default.createElement(_Gapped.Gapped, { wrap: true, verticalAlign: "middle", gap: 10 },
-          _react.default.createElement(_SelectPlayground.SelectPlayground, { width: 120, size: size }),
-          _react.default.createElement(_Input.Input, { rightIcon: _react.default.createElement(_Card.default, null), placeholder: 'Text value', size: size }),
-          _react.default.createElement(_Button.Button, { width: 120, size: size }, "Button"),
-
-
-          _react.default.createElement(_Button.Button, { icon: _react.default.createElement(_Link.default, null), use: 'link', size: size }, "Button like a link")));};
-
-
-
-
-
-      return (
-        _react.default.createElement(_ComponentsGroup.ComponentsGroup, { title: 'Размеры', theme: _this.theme },
-        _react.default.createElement(Group, { size: 'small' }),
-        _react.default.createElement(Group, { size: 'medium' }),
-        _react.default.createElement(Group, { size: 'large' })));
+      return /*#__PURE__*/(
+        _react.default.createElement(_ComponentsGroup.ComponentsGroup, { title: 'Размеры', theme: _this.theme }, /*#__PURE__*/
+        _react.default.createElement(_SizesGroup.SizesGroup, { size: 'small' }), /*#__PURE__*/
+        _react.default.createElement(_SizesGroup.SizesGroup, { size: 'medium' }), /*#__PURE__*/
+        _react.default.createElement(_SizesGroup.SizesGroup, { size: 'large' })));
 
 
     };_this.
 
     renderLinksGroup = function () {
       var propsList = [
-      { icon: _react.default.createElement(_Link.default, null), children: 'Enabled' },
-      { icon: _react.default.createElement(_Ok.default, null), use: 'success', children: 'Success' },
-      { icon: _react.default.createElement(_Error.default, null), use: 'danger', children: 'Danger' },
-      { icon: _react.default.createElement(_Trash.default, null), use: 'grayed', children: 'Grayed' },
-      { icon: _react.default.createElement(_Trash.default, null), children: 'Disabled', disabled: true }];
-
-      return (
-        _react.default.createElement(_ComponentsGroup.ComponentsGroup, { title: 'Ссылки', theme: _this.theme },
+      { icon: /*#__PURE__*/_react.default.createElement(_Link.default, null), children: 'Enabled' },
+      { icon: /*#__PURE__*/_react.default.createElement(_Ok.default, null), use: 'success', children: 'Success' },
+      { icon: /*#__PURE__*/_react.default.createElement(_Error.default, null), use: 'danger', children: 'Danger' },
+      { icon: /*#__PURE__*/_react.default.createElement(_Trash.default, null), use: 'grayed', children: 'Grayed' },
+      { icon: /*#__PURE__*/_react.default.createElement(_Trash.default, null), children: 'Disabled', disabled: true }];
+
+      return /*#__PURE__*/(
+        _react.default.createElement(_ComponentsGroup.ComponentsGroup, { title: 'Ссылки', theme: _this.theme }, /*#__PURE__*/
         _react.default.createElement(_Gapped.Gapped, { wrap: true, verticalAlign: "middle", gap: 10 },
-        (0, _helpers.getComponentsFromPropsList)(_react.default.createElement(_Link2.Link, null), propsList))));
+        (0, _helpers.getComponentsFromPropsList)( /*#__PURE__*/_react.default.createElement(_Link2.Link, null), propsList))));
 
 
 
@@ -213,15 +181,16 @@ Playground = /*#__PURE__*/function (_React$Component) {(0, _inheritsLoose2.defau
       { children: 'Primary', use: 'primary' },
       { children: 'Danger', use: 'danger' },
       { children: 'Pay', use: 'pay' },
+      { children: 'Success', use: 'success' },
       { children: 'Disabled', disabled: true },
       { children: 'Back', arrow: 'left', size: 'medium', width: 110 },
       { children: 'Forward', arrow: true, size: 'medium', use: 'primary', width: 110 },
       { children: 'Loading', size: 'medium', loading: true }];
 
 
-      return (
+      return /*#__PURE__*/(
         _react.default.createElement(_ComponentsGroup.ComponentsGroup, { title: 'Кнопки', theme: _this.theme },
-        (0, _helpers.getComponentsFromPropsList)(_react.default.createElement(_Button.Button, { width: 120, size: 'small' }), propsList)));
+        (0, _helpers.getComponentsFromPropsList)( /*#__PURE__*/_react.default.createElement(_Button.Button, { width: 120, size: 'small' }), propsList)));
 
 
     };_this.
@@ -233,11 +202,11 @@ Playground = /*#__PURE__*/function (_React$Component) {(0, _inheritsLoose2.defau
       { placeholder: 'Warning', warning: true },
       { placeholder: 'Disabled', disabled: true }];
 
-      var fromProps = (0, _helpers.getComponentsFromPropsList)(_react.default.createElement(_Input.Input, { width: 120 }), propsList);
-      return (
-        _react.default.createElement(_ComponentsGroup.ComponentsGroup, { title: 'Поле ввода', theme: _this.theme },
-        _react.default.createElement(_Input.Input, { width: 380, prefix: "https://kontur.ru/search?query=", rightIcon: _react.default.createElement(_Search.default, null) }),
-        _react.default.createElement("div", null,
+      var fromProps = (0, _helpers.getComponentsFromPropsList)( /*#__PURE__*/_react.default.createElement(_Input.Input, { width: 120 }), propsList);
+      return /*#__PURE__*/(
+        _react.default.createElement(_ComponentsGroup.ComponentsGroup, { title: 'Поле ввода', theme: _this.theme }, /*#__PURE__*/
+        _react.default.createElement(_Input.Input, { width: 380, prefix: "https://kontur.ru/search?query=", rightIcon: /*#__PURE__*/_react.default.createElement(_Search.default, null) }), /*#__PURE__*/
+        _react.default.createElement("div", null, /*#__PURE__*/
         _react.default.createElement(_Gapped.Gapped, { gap: 10 }, fromProps))));
 
 
@@ -245,37 +214,37 @@ Playground = /*#__PURE__*/function (_React$Component) {(0, _inheritsLoose2.defau
     };_this.
 
     renderTokenInputsGroup = function () {
-      return (
-        _react.default.createElement(_ComponentsGroup.ComponentsGroup, { title: 'Поле с токеном', theme: _this.theme },
+      return /*#__PURE__*/(
+        _react.default.createElement(_ComponentsGroup.ComponentsGroup, { title: 'Поле с токеном', theme: _this.theme }, /*#__PURE__*/
         _react.default.createElement(_TokenInputPlayground.TokenInputPlayground, null)));
 
 
     };_this.
 
     renderOtherInputsGroup = function () {
-      return (
-        _react.default.createElement(_ComponentsGroup.ComponentsGroup, { title: 'Прочие поля', theme: _this.theme },
-        _react.default.createElement(_CurrencyInputPlayground.CurrencyInputPlayground, null),
-        _react.default.createElement(_FxInputPlayground.FxInputPlayground, null),
+      return /*#__PURE__*/(
+        _react.default.createElement(_ComponentsGroup.ComponentsGroup, { title: 'Прочие поля', theme: _this.theme }, /*#__PURE__*/
+        _react.default.createElement(_CurrencyInputPlayground.CurrencyInputPlayground, null), /*#__PURE__*/
+        _react.default.createElement(_FxInputPlayground.FxInputPlayground, null), /*#__PURE__*/
         _react.default.createElement(_AnotherInputsPlayground.DatePickerPlayground, null)));
 
 
     };_this.
 
     renderSwitchersGroup = function () {
-      return (
-        _react.default.createElement(_ComponentsGroup.ComponentsGroup, { title: 'Переключатели', theme: _this.theme },
+      return /*#__PURE__*/(
+        _react.default.createElement(_ComponentsGroup.ComponentsGroup, { title: 'Переключатели', theme: _this.theme }, /*#__PURE__*/
         _react.default.createElement(_SwitcherPlayground.SwitcherPlayground, null)));
 
 
     };_this.
 
     renderControlsGroup = function () {
-      return (
-        _react.default.createElement(_ComponentsGroup.ComponentsGroup, { title: 'Радио, чекбоксы', theme: _this.theme },
-        _react.default.createElement(_Gapped.Gapped, { verticalAlign: 'top', gap: 60 },
-        _react.default.createElement(_CheckboxPlayground.CheckboxPlayground, null),
-        _react.default.createElement(_RadioPlayground.RadioPlayground, null),
+      return /*#__PURE__*/(
+        _react.default.createElement(_ComponentsGroup.ComponentsGroup, { title: 'Радио, чекбоксы', theme: _this.theme }, /*#__PURE__*/
+        _react.default.createElement(_Gapped.Gapped, { verticalAlign: 'top', gap: 60 }, /*#__PURE__*/
+        _react.default.createElement(_CheckboxPlayground.CheckboxPlayground, null), /*#__PURE__*/
+        _react.default.createElement(_RadioPlayground.RadioPlayground, null), /*#__PURE__*/
         _react.default.createElement(_TogglePlayground.TogglePlayground, null))));
 
 
@@ -283,38 +252,47 @@ Playground = /*#__PURE__*/function (_React$Component) {(0, _inheritsLoose2.defau
     };_this.
 
     renderHintsGroup = function () {
-      return (
-        _react.default.createElement(_ComponentsGroup.ComponentsGroup, { title: 'Тултип', theme: _this.theme },
+      return /*#__PURE__*/(
+        _react.default.createElement(_ComponentsGroup.ComponentsGroup, { title: 'Тултип', theme: _this.theme }, /*#__PURE__*/
         _react.default.createElement(_HintPlayground.HintPlayground, null)));
 
 
     };_this.
 
     renderTooltip = function () {
-      var tooltipContent = function tooltipContent() {return (
-          _react.default.createElement("div", { className: _Playground.jsStyles.tooltipContent() },
+      var styles = (0, _Playground.getStyles)(_this.emotion);
+      var tooltipContent = function tooltipContent() {return /*#__PURE__*/(
+          _react.default.createElement("div", { className: styles.tooltipContent() },
           'Информация об ошибке. Короткий объясняющий текст и ссылка, если нужно'));};
 
 
-      return (
-        _react.default.createElement(_ComponentsGroup.ComponentsGroup, { title: 'Тултип', theme: _this.theme },
-        _react.default.createElement(_Tooltip.Tooltip, { render: tooltipContent, pos: "right middle", trigger: 'opened', disableAnimations: true },
-        _react.default.createElement(_Link2.Link, { icon: _react.default.createElement(_HelpDot.default, null) }))));
+      return /*#__PURE__*/(
+        _react.default.createElement(_ComponentsGroup.ComponentsGroup, { title: 'Тултип', theme: _this.theme }, /*#__PURE__*/
+        _react.default.createElement(_Tooltip.Tooltip, { render: tooltipContent, pos: "right middle", trigger: 'opened', disableAnimations: true }, /*#__PURE__*/
+        _react.default.createElement(_Link2.Link, { icon: /*#__PURE__*/_react.default.createElement(_HelpDot.default, null) }))));
 
 
 
     };_this.
 
     renderPaging = function () {
-      return (
-        _react.default.createElement(_ComponentsGroup.ComponentsGroup, { title: 'Пейджинг', theme: _this.theme },
+      return /*#__PURE__*/(
+        _react.default.createElement(_ComponentsGroup.ComponentsGroup, { title: 'Пейджинг', theme: _this.theme }, /*#__PURE__*/
         _react.default.createElement(_PagingPlayground.PagingPlayground, null)));
 
 
+    };_this.
+
+    renderFileUploader = function () {
+      return /*#__PURE__*/(
+        _react.default.createElement(_ComponentsGroup.ComponentsGroup, { title: 'FileUploader', theme: _this.theme }, /*#__PURE__*/
+        _react.default.createElement(_FileUploader.FileUploader, { multiple: true })));
+
+
     };_this.
 
     renderStickyStopElement = function () {
-      return _react.default.createElement("div", { ref: _this.stopEl, style: { height: 50 } });
+      return /*#__PURE__*/_react.default.createElement("div", { ref: _this.stopEl, style: { height: 50 } });
     };_this.
 
-    getStickyStop = function () {return _this.stopEl.current;};return _this;}var _proto = Playground.prototype;_proto.render = function render() {var _this2 = this;return _react.default.createElement(_ThemeContext.ThemeContext.Consumer, null, function (theme) {_this2.theme = theme;return _this2.renderMain();});};_proto.renderMain = function renderMain() {var wrapperClassName = (0, _classnames.default)(_Playground.jsStyles.playground(), _Playground.jsStyles.playgroundWrapper(this.theme));return _react.default.createElement("div", { className: wrapperClassName }, _react.default.createElement(_Gapped.Gapped, { vertical: true, gap: 50 }, this.renderTabsGroup(), this.renderSizesGroup(), this.renderLinksGroup(), this.renderButtonsGroup(), this.renderInputsGroup(), this.renderOtherInputsGroup(), this.renderTokenInputsGroup(), this.renderSwitchersGroup(), this.renderControlsGroup()), this.renderStickyStopElement(), _react.default.createElement(_Gapped.Gapped, { vertical: true, gap: 50 }, this.renderHintsGroup(), this.renderTooltip(), this.renderPaging()));};_proto.renderTabs = function renderTabs() {var _cn;var _this$props2 = this.props,currentThemeType = _this$props2.currentThemeType,onThemeChange = _this$props2.onThemeChange,onEditLinkClick = _this$props2.onEditLinkClick;var tabsOuterWrapperStyle = { background: this.theme.bgDefault };var tabsOuterWrapperClass = (0, _classnames.default)((_cn = {}, _cn[_Playground.jsStyles.tabsWrapper(this.theme)] = true, _cn[_Playground.jsStyles.stickyTabsWrapper(this.theme)] = useSticky, _cn));return _react.default.createElement("div", { style: tabsOuterWrapperStyle, className: tabsOuterWrapperClass }, _react.default.createElement(_Gapped.Gapped, { gap: 40 }, _react.default.createElement(_Tabs.Tabs, { value: this.getCurrentTab(), onValueChange: onThemeChange, vertical: false }, _react.default.createElement("div", { className: _Playground.jsStyles.tabsInnerWrapper(this.theme) }, _react.default.createElement(_Tabs.Tabs.Tab, { id: _constants.ThemeType.Default }, "\u0414\u0435\u0444\u043E\u043B\u0442\u043D\u0430\u044F"), _react.default.createElement(_Tabs.Tabs.Tab, { id: _constants.ThemeType.Flat }, "\u041F\u043B\u043E\u0441\u043A\u0430\u044F"), _react.default.createElement(_Tabs.Tabs.Tab, { id: _constants.ThemeType.Dark }, "\u0422\u0435\u043C\u043D\u0430\u044F"))), _react.default.createElement(_Gapped.Gapped, null, _react.default.createElement(_Toggle.Toggle, { checked: this.is8pxTheme, onValueChange: this.toggle8pxTheme, disabled: currentThemeType === _constants.ThemeType.Dark }), _react.default.createElement("span", null, "8px")), _react.default.createElement(_Link2.Link, { onClick: onEditLinkClick }, "\u041D\u0430\u0441\u0442\u0440\u043E\u0438\u0442\u044C \u0442\u0435\u043C\u0443")));};(0, _createClass2.default)(Playground, [{ key: "is8pxTheme", get: function get() {switch (this.props.currentThemeType) {case _constants.ThemeType.Default8px:case _constants.ThemeType.Flat8px:return true;default:return false;}} }]);return Playground;}(_react.default.Component);exports.Playground = Playground;
+    getStickyStop = function () {return _this.stopEl.current;};return _this;}var _proto = Playground.prototype;_proto.render = function render() {var _this2 = this;return /*#__PURE__*/_react.default.createElement(_Emotion.EmotionConsumer, null, function (emotion) {_this2.emotion = emotion;return /*#__PURE__*/_react.default.createElement(_ThemeContext.ThemeContext.Consumer, null, function (theme) {_this2.theme = theme;return _this2.renderMain();});});};_proto.renderMain = function renderMain() {var styles = (0, _Playground.getStyles)(this.emotion);var wrapperClassName = this.emotion.cx(styles.playground(), styles.playgroundWrapper(this.theme));return /*#__PURE__*/_react.default.createElement("div", { className: wrapperClassName }, /*#__PURE__*/_react.default.createElement(_Gapped.Gapped, { vertical: true, gap: 50 }, this.renderTabsGroup(), this.renderSizesGroup(), this.renderLinksGroup(), this.renderButtonsGroup(), this.renderInputsGroup(), this.renderOtherInputsGroup(), this.renderTokenInputsGroup(), this.renderSwitchersGroup(), this.renderControlsGroup()), this.renderStickyStopElement(), /*#__PURE__*/_react.default.createElement(_Gapped.Gapped, { vertical: true, gap: 50 }, this.renderHintsGroup(), this.renderTooltip(), this.renderPaging(), this.renderFileUploader()));};_proto.renderTabs = function renderTabs() {var _this$emotion$cx;var styles = (0, _Playground.getStyles)(this.emotion);var _this$props = this.props,onThemeChange = _this$props.onThemeChange,onEditLinkClick = _this$props.onEditLinkClick;var tabsOuterWrapperStyle = { background: this.theme.bgDefault };var tabsOuterWrapperClass = this.emotion.cx((_this$emotion$cx = {}, _this$emotion$cx[styles.tabsWrapper(this.theme)] = true, _this$emotion$cx[styles.stickyTabsWrapper(this.theme)] = useSticky, _this$emotion$cx));return /*#__PURE__*/_react.default.createElement("div", { style: tabsOuterWrapperStyle, className: tabsOuterWrapperClass }, /*#__PURE__*/_react.default.createElement(_Gapped.Gapped, { gap: 40 }, /*#__PURE__*/_react.default.createElement(_Tabs.Tabs, { value: this.getCurrentTab(), onValueChange: onThemeChange, vertical: false }, /*#__PURE__*/_react.default.createElement("div", { className: styles.tabsInnerWrapper(this.theme) }, /*#__PURE__*/_react.default.createElement(_Tabs.Tabs.Tab, { id: _constants.ThemeType.Default }, "\u0414\u0435\u0444\u043E\u043B\u0442\u043D\u0430\u044F"), /*#__PURE__*/_react.default.createElement(_Tabs.Tabs.Tab, { id: _constants.ThemeType.Dark }, "\u0422\u0435\u043C\u043D\u0430\u044F"), /*#__PURE__*/_react.default.createElement(_Tabs.Tabs.Tab, { id: _constants.ThemeType.DefaultOld }, "\u0414\u0435\u0444\u043E\u043B\u0442\u043D\u0430\u044F 3.0"), /*#__PURE__*/_react.default.createElement(_Tabs.Tabs.Tab, { id: _constants.ThemeType.FlatOld }, "\u041F\u043B\u043E\u0441\u043A\u0430\u044F 3.0"), /*#__PURE__*/_react.default.createElement(_Tabs.Tabs.Tab, { id: _constants.ThemeType.Theme2022 }, "\u041D\u043E\u0432\u0430\u044F 2022"), /*#__PURE__*/_react.default.createElement(_Tabs.Tabs.Tab, { id: _constants.ThemeType.Theme2022Dark }, "\u041D\u043E\u0432\u0430\u044F 2022 \u0422\u0451\u043C\u043D\u0430\u044F"))), /*#__PURE__*/_react.default.createElement(_Link2.Link, { onClick: onEditLinkClick }, "\u041D\u0430\u0441\u0442\u0440\u043E\u0438\u0442\u044C \u0442\u0435\u043C\u0443")));};return Playground;}(_react.default.Component);exports.Playground = Playground;