@skbkontur/react-ui 0.0.0-444dd4e7b3 → 0.0.0-48840c3b9c

package/cjs/internal/RenderContainer/RenderInnerContainer.js.map

@@ -1 +1 @@
-{"version":3,"sources":["RenderInnerContainer.tsx"],"names":["SSRPlaceholder","Portal","container","rt_rootID","children","ReactDOM","createPortal","RenderInnerContainer","render","props","anchor","domContainer","rootId","inner","React","Component","__KONTUR_REACT_UI__","propTypes","globalObject","HTMLElement","string","isRequired","node"],"mappings":"iRAAA;AACA;AACA;AACA;;;AAGA;;;;;;;;;AASA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA,IAAMA,cAAc,GAAG,SAAjBA,cAAiB,wBAAM,yCAAQ,WAAQ,iBAAhB,GAAN,EAAvB;;AAEO,IAAMC,MAAM,GAAG,SAATA,MAAS,OAAqD,KAAlDC,SAAkD,QAAlDA,SAAkD,CAAvCC,SAAuC,QAAvCA,SAAuC,CAA5BC,QAA4B,QAA5BA,QAA4B;AACzE;AACA;AACE,iCAAC,cAAD,CAAO,QAAP;AACGF,IAAAA,SAAS,gBAAGG,kBAASC,YAAT,CAAsBF,QAAtB,EAAgCF,SAAhC,CAAH,gBAAgD,6BAAC,cAAD,OAD5D;AAEGA,IAAAA,SAAS,gBAAG,2CAAU,4BAA0BC,SAApC,GAAH,gBAAuD,6BAAC,cAAD,OAFnE,CADF;;;AAMD,CARM,C;;AAUMI,oB;;;AAGJC,EAAAA,M,GAAP,kBAAgB;AACd,sBAAmD,KAAKC,KAAxD,CAAQC,MAAR,eAAQA,MAAR,CAAgBN,QAAhB,eAAgBA,QAAhB,CAA0BO,YAA1B,eAA0BA,YAA1B,CAAwCC,MAAxC,eAAwCA,MAAxC;AACA,QAAIC,KAAK,GAAGH,MAAZ;;AAEA,QAAIN,QAAJ,EAAc;AACZS,MAAAA,KAAK;AACH,mCAAC,cAAD,CAAO,QAAP;AACGH,MAAAA,MADH;AAEE,mCAAC,MAAD,IAAQ,GAAG,EAAC,YAAZ,EAAyB,SAAS,EAAEE,MAApC,EAA4C,SAAS,EAAED,YAAvD;AACGP,MAAAA,QADH,CAFF,CADF;;;;AAQD;;AAED,WAAOS,KAAP;AACD,G,+BAnBuCC,eAAMC,S,sDAAnCR,oB,CACGS,mB,GAAsB,sB;;;AAqBtCf,MAAM,CAACgB,SAAP,GAAmB;AACjBf,EAAAA,SAAS,EAAE,sCAAwBgB,2BAAaC,WAArC,CADM;AAEjBhB,EAAAA,SAAS,EAAEc,mBAAUG,MAAV,CAAiBC,UAFX;AAGjBjB,EAAAA,QAAQ,EAAEa,mBAAUK,IAAV,CAAeD,UAHR,EAAnB","sourcesContent":["import React from 'react';\nimport ReactDOM from 'react-dom';\nimport propTypes from 'prop-types';\nimport { globalObject } from '@skbkontur/global-object';\n\nimport { Nullable } from '../../typings/utility-types';\nimport { safePropTypesInstanceOf } from '../../lib/SSRSafe';\n\nimport { PortalProps, RenderContainerProps } from './RenderContainerTypes';\n\ninterface RenderInnerContainerProps extends RenderContainerProps {\n  domContainer: Nullable<HTMLElement>;\n  rootId: string;\n}\n\n// Заглушка нужна для корректной гидрации порталов после SSR,\n// которую реакт сам пока не поддерживает.\n// @see https://github.com/facebook/react/issues/13097\n// А также для вставки актуального render-container-id на клиенте.\n//\n// Дело в том, что во время гидрации, структура HTML на сервере\n// и на клиенте должна совпадать, иначе возможны артефакты.\n// Алгоритм там примерно такой. Клиент во время гидрации идет\n// по этим двум деревьям и сравнивает узлы. Элементы разных типов\n// он подменяет на свои. А те, что совпадают, он оставляет как есть\n// вместе со всеми атрибутами, навесив только обработчики событий.\n//\n// Поэтому, для портала, который рендерится только на клиенте,\n// нужно использовать серверную заглушку, чтобы при гидрации\n// он не испортил какой-то другой элемент. Null не подходит,\n// т.к. на сервере он тоже не рендерится.\n// А элемент с render-container-id нужно отрендерить с нуля.\n\nconst SSRPlaceholder = () => <script data-id=\"ssr-placeholder\" />;\n\nexport const Portal = ({ container, rt_rootID, children }: PortalProps) => {\n  // container exists only in browser\n  return (\n    <React.Fragment>\n      {container ? ReactDOM.createPortal(children, container) : <SSRPlaceholder />}\n      {container ? <noscript data-render-container-id={rt_rootID} /> : <SSRPlaceholder />}\n    </React.Fragment>\n  );\n};\n\nexport class RenderInnerContainer extends React.Component<RenderInnerContainerProps> {\n  public static __KONTUR_REACT_UI__ = 'RenderInnerContainer';\n\n  public render() {\n    const { anchor, children, domContainer, rootId } = this.props;\n    let inner = anchor;\n\n    if (children) {\n      inner = (\n        <React.Fragment>\n          {anchor}\n          <Portal key=\"portal-ref\" rt_rootID={rootId} container={domContainer}>\n            {children}\n          </Portal>\n        </React.Fragment>\n      );\n    }\n\n    return inner;\n  }\n}\n\nPortal.propTypes = {\n  container: safePropTypesInstanceOf(globalObject.HTMLElement),\n  rt_rootID: propTypes.string.isRequired,\n  children: propTypes.node.isRequired,\n};\n"]}
+{"version":3,"sources":["RenderInnerContainer.tsx"],"names":["SSRPlaceholder","Portal","container","rt_rootID","children","ReactDOM","createPortal","RenderInnerContainer","render","props","anchor","domContainer","rootId","inner","React","Component","__KONTUR_REACT_UI__","displayName","propTypes","globalObject","HTMLElement","string","isRequired","node"],"mappings":"yRAAA;AACA;AACA;AACA;;;AAGA;;;;;;;;;AASA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA,IAAMA,cAAc,GAAG,SAAjBA,cAAiB,wBAAM,yCAAQ,WAAQ,iBAAhB,GAAN,EAAvB;;AAEO,IAAMC,MAAM,GAAG,SAATA,MAAS,OAAqD,KAAlDC,SAAkD,QAAlDA,SAAkD,CAAvCC,SAAuC,QAAvCA,SAAuC,CAA5BC,QAA4B,QAA5BA,QAA4B;AACzE;AACA;AACE,iCAAC,cAAD,CAAO,QAAP;AACGF,IAAAA,SAAS,gBAAGG,kBAASC,YAAT,CAAsBF,QAAtB,EAAgCF,SAAhC,CAAH,gBAAgD,6BAAC,cAAD,OAD5D;AAEGA,IAAAA,SAAS,gBAAG,2CAAU,4BAA0BC,SAApC,GAAH,gBAAuD,6BAAC,cAAD,OAFnE,CADF;;;AAMD,CARM,C;;AAUMI,oB;;;;AAIJC,EAAAA,M,GAAP,kBAAgB;AACd,sBAAmD,KAAKC,KAAxD,CAAQC,MAAR,eAAQA,MAAR,CAAgBN,QAAhB,eAAgBA,QAAhB,CAA0BO,YAA1B,eAA0BA,YAA1B,CAAwCC,MAAxC,eAAwCA,MAAxC;AACA,QAAIC,KAAK,GAAGH,MAAZ;;AAEA,QAAIN,QAAJ,EAAc;AACZS,MAAAA,KAAK;AACH,mCAAC,cAAD,CAAO,QAAP;AACGH,MAAAA,MADH;AAEE,mCAAC,MAAD,IAAQ,GAAG,EAAC,YAAZ,EAAyB,SAAS,EAAEE,MAApC,EAA4C,SAAS,EAAED,YAAvD;AACGP,MAAAA,QADH,CAFF,CADF;;;;AAQD;;AAED,WAAOS,KAAP;AACD,G,+BApBuCC,eAAMC,S,sDAAnCR,oB,CACGS,mB,GAAsB,sB,CADzBT,oB,CAEGU,W,GAAc,sB;;;AAqB9BhB,MAAM,CAACiB,SAAP,GAAmB;AACjBhB,EAAAA,SAAS,EAAE,sCAAwBiB,2BAAaC,WAArC,CADM;AAEjBjB,EAAAA,SAAS,EAAEe,mBAAUG,MAAV,CAAiBC,UAFX;AAGjBlB,EAAAA,QAAQ,EAAEc,mBAAUK,IAAV,CAAeD,UAHR,EAAnB;;;AAMArB,MAAM,CAACe,mBAAP,GAA6B,QAA7B;AACAf,MAAM,CAACgB,WAAP,GAAqB,QAArB","sourcesContent":["import React from 'react';\nimport ReactDOM from 'react-dom';\nimport propTypes from 'prop-types';\nimport { globalObject } from '@skbkontur/global-object';\n\nimport { Nullable } from '../../typings/utility-types';\nimport { safePropTypesInstanceOf } from '../../lib/SSRSafe';\n\nimport { PortalProps, RenderContainerProps } from './RenderContainerTypes';\n\ninterface RenderInnerContainerProps extends RenderContainerProps {\n  domContainer: Nullable<HTMLElement>;\n  rootId: string;\n}\n\n// Заглушка нужна для корректной гидрации порталов после SSR,\n// которую реакт сам пока не поддерживает.\n// @see https://github.com/facebook/react/issues/13097\n// А также для вставки актуального render-container-id на клиенте.\n//\n// Дело в том, что во время гидрации, структура HTML на сервере\n// и на клиенте должна совпадать, иначе возможны артефакты.\n// Алгоритм там примерно такой. Клиент во время гидрации идет\n// по этим двум деревьям и сравнивает узлы. Элементы разных типов\n// он подменяет на свои. А те, что совпадают, он оставляет как есть\n// вместе со всеми атрибутами, навесив только обработчики событий.\n//\n// Поэтому, для портала, который рендерится только на клиенте,\n// нужно использовать серверную заглушку, чтобы при гидрации\n// он не испортил какой-то другой элемент. Null не подходит,\n// т.к. на сервере он тоже не рендерится.\n// А элемент с render-container-id нужно отрендерить с нуля.\n\nconst SSRPlaceholder = () => <script data-id=\"ssr-placeholder\" />;\n\nexport const Portal = ({ container, rt_rootID, children }: PortalProps) => {\n  // container exists only in browser\n  return (\n    <React.Fragment>\n      {container ? ReactDOM.createPortal(children, container) : <SSRPlaceholder />}\n      {container ? <noscript data-render-container-id={rt_rootID} /> : <SSRPlaceholder />}\n    </React.Fragment>\n  );\n};\n\nexport class RenderInnerContainer extends React.Component<RenderInnerContainerProps> {\n  public static __KONTUR_REACT_UI__ = 'RenderInnerContainer';\n  public static displayName = 'RenderInnerContainer';\n\n  public render() {\n    const { anchor, children, domContainer, rootId } = this.props;\n    let inner = anchor;\n\n    if (children) {\n      inner = (\n        <React.Fragment>\n          {anchor}\n          <Portal key=\"portal-ref\" rt_rootID={rootId} container={domContainer}>\n            {children}\n          </Portal>\n        </React.Fragment>\n      );\n    }\n\n    return inner;\n  }\n}\n\nPortal.propTypes = {\n  container: safePropTypesInstanceOf(globalObject.HTMLElement),\n  rt_rootID: propTypes.string.isRequired,\n  children: propTypes.node.isRequired,\n};\n\nPortal.__KONTUR_REACT_UI__ = 'Portal';\nPortal.displayName = 'Portal';\n"]}

package/cjs/internal/RenderLayer/RenderLayer.d.ts

@@ -9,8 +9,11 @@ export interface RenderLayerProps extends CommonProps {
     getAnchorElement?: () => Nullable<Element>;
 }
 declare type DefaultProps = Required<Pick<RenderLayerProps, 'active'>>;
+export declare const RenderLayerProvider: React.Provider<Nullable<Element | ShadowRoot>>;
+export declare const RenderLayerConsumer: React.Consumer<Nullable<Element | ShadowRoot>>;
 export declare class RenderLayer extends React.Component<RenderLayerProps> {
     static __KONTUR_REACT_UI__: string;
+    static displayName: string;
     static propTypes: {
         active(props: RenderLayerProps, propName: keyof RenderLayerProps, componentName: string): Error | undefined;
     };
@@ -18,6 +21,7 @@ export declare class RenderLayer extends React.Component<RenderLayerProps> {
     private getProps;
     private focusOutsideListenerToken;
     private setRootNode;
+    private container;
     componentDidMount(): void;
     componentDidUpdate(prevProps: RenderLayerProps): void;
     componentWillUnmount(): void;

package/cjs/internal/RenderLayer/RenderLayer.js

@@ -1,4 +1,4 @@
-"use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");exports.__esModule = true;exports.RenderLayer = 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;var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;exports.__esModule = true;exports.RenderLayerProvider = exports.RenderLayerConsumer = exports.RenderLayer = void 0;var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));var _inheritsLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/inheritsLoose"));var _react = _interopRequireWildcard(require("react"));
 var _globalObject = require("@skbkontur/global-object");
 
 var _listenFocusOutside = require("../../lib/listenFocusOutside");
@@ -6,7 +6,7 @@ var _CommonWrapper = require("../CommonWrapper");
 var _rootNode = require("../../lib/rootNode");
 
 var _createPropsGetter = require("../../lib/createPropsGetter");
-var _isInstanceOf = require("../../lib/isInstanceOf");var _class, _class2, _temp;var
+var _isInstanceOf = require("../../lib/isInstanceOf");var _class, _class2, _temp;
 
 
 
@@ -18,6 +18,10 @@ var _isInstanceOf = require("../../lib/isInstanceOf");var _class, _class2, _temp
 
 
 
+var RenderLayerContext = /*#__PURE__*/(0, _react.createContext)(null);
+var RenderLayerProvider = RenderLayerContext.Provider;exports.RenderLayerProvider = RenderLayerProvider;
+var RenderLayerConsumer = RenderLayerContext.Consumer;exports.RenderLayerConsumer = RenderLayerConsumer;var
+
 
 RenderLayer = (0, _rootNode.rootNode)(_class = (_temp = _class2 = /*#__PURE__*/function (_React$Component) {(0, _inheritsLoose2.default)(RenderLayer, _React$Component);function RenderLayer() {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.
 
@@ -37,12 +41,21 @@ RenderLayer = (0, _rootNode.rootNode)(_class = (_temp = _class2 = /*#__PURE__*/f
 
 
 
+
     getProps = (0, _createPropsGetter.createPropsGetter)(RenderLayer.defaultProps);_this.
 
     focusOutsideListenerToken =
 
     null;_this.
 
+    container = null;_this.
+
+
+
+
+
+
+
 
 
 
@@ -120,11 +133,14 @@ RenderLayer = (0, _rootNode.rootNode)(_class = (_temp = _class2 = /*#__PURE__*/f
       var target = event.target || event.srcElement;
       var node = _this.getAnchorNode();
 
-      if (!node || (0, _isInstanceOf.isInstanceOf)(target, _globalObject.globalObject.Element) && (0, _listenFocusOutside.containsTargetOrRenderContainer)(target)(node)) {
+      if (
+      !node ||
+      (0, _isInstanceOf.isInstanceOf)(target, _globalObject.globalObject.Element) && (0, _listenFocusOutside.containsTargetOrRenderContainer)(target, _this.container)(node))
+      {
         return;
       }
 
       if (_this.props.onClickOutside) {
         _this.props.onClickOutside(event);
       }
-    };return _this;}var _proto = RenderLayer.prototype;_proto.componentDidMount = function componentDidMount() {if (this.getProps().active) {this.attachListeners();}};_proto.componentDidUpdate = function componentDidUpdate(prevProps) {var active = this.getProps().active;if (!prevProps.active && active) {this.attachListeners();}if (prevProps.active && !active) {this.detachListeners();}};_proto.componentWillUnmount = function componentWillUnmount() {if (this.getProps().active) {this.detachListeners();}};_proto.render = function render() {return /*#__PURE__*/_react.default.createElement(_CommonWrapper.CommonWrapper, (0, _extends2.default)({ rootNodeRef: this.setRootNode }, this.props), _react.default.Children.only(this.props.children));};_proto.getAnchorNode = function getAnchorNode() {var getAnchorElement = this.props.getAnchorElement;return getAnchorElement ? getAnchorElement() : (0, _rootNode.getRootNode)(this);};_proto.attachListeners = function attachListeners() {var _globalObject$documen;var node = this.getAnchorNode();if (!node) {return;}this.focusOutsideListenerToken = (0, _listenFocusOutside.listen)(function () {return [node];}, this.handleFocusOutside);_globalObject.globalObject.addEventListener == null ? void 0 : _globalObject.globalObject.addEventListener('blur', this.handleFocusOutside);(_globalObject$documen = _globalObject.globalObject.document) == null ? void 0 : _globalObject$documen.addEventListener('ontouchstart' in _globalObject.globalObject.document.documentElement && 'onpointerup' in _globalObject.globalObject.document.documentElement ? 'pointerup' : 'mousedown', this.handleNativeDocClick);};_proto.detachListeners = function detachListeners() {var _globalObject$documen2;if (this.focusOutsideListenerToken) {this.focusOutsideListenerToken.remove();this.focusOutsideListenerToken = null;}_globalObject.globalObject.removeEventListener == null ? void 0 : _globalObject.globalObject.removeEventListener('blur', this.handleFocusOutside);(_globalObject$documen2 = _globalObject.globalObject.document) == null ? void 0 : _globalObject$documen2.removeEventListener('ontouchstart' in _globalObject.globalObject.document.documentElement && 'onpointerup' in _globalObject.globalObject.document.documentElement ? 'pointerup' : 'mousedown', this.handleNativeDocClick);};return RenderLayer;}(_react.default.Component), _class2.__KONTUR_REACT_UI__ = 'RenderLayer', _class2.propTypes = { active: function active(props, propName, componentName) {var active = props.active,onClickOutside = props.onClickOutside,onFocusOutside = props.onFocusOutside;if (active && !(onClickOutside || onFocusOutside)) {return new Error("[" + componentName + "]: using the component without either 'onClickOutside' or 'onFocusOutside' callback is pointless.");}} }, _class2.defaultProps = { active: true }, _temp)) || _class;exports.RenderLayer = RenderLayer;
+    };return _this;}var _proto = RenderLayer.prototype;_proto.componentDidMount = function componentDidMount() {if (this.getProps().active) {this.attachListeners();}};_proto.componentDidUpdate = function componentDidUpdate(prevProps) {var active = this.getProps().active;if (!prevProps.active && active) {this.attachListeners();}if (prevProps.active && !active) {this.detachListeners();}};_proto.componentWillUnmount = function componentWillUnmount() {if (this.getProps().active) {this.detachListeners();}};_proto.render = function render() {var _this2 = this;return /*#__PURE__*/_react.default.createElement(RenderLayerConsumer, null, function (container) {_this2.container = container;return /*#__PURE__*/_react.default.createElement(_CommonWrapper.CommonWrapper, (0, _extends2.default)({ rootNodeRef: _this2.setRootNode }, _this2.props), _react.default.Children.only(_this2.props.children));});};_proto.getAnchorNode = function getAnchorNode() {var getAnchorElement = this.props.getAnchorElement;return getAnchorElement ? getAnchorElement() : (0, _rootNode.getRootNode)(this);};_proto.attachListeners = function attachListeners() {var _globalObject$documen;var node = this.getAnchorNode();if (!node) {return;}this.focusOutsideListenerToken = (0, _listenFocusOutside.listen)(function () {return [node];}, this.handleFocusOutside);_globalObject.globalObject.addEventListener == null ? void 0 : _globalObject.globalObject.addEventListener('blur', this.handleFocusOutside);(_globalObject$documen = _globalObject.globalObject.document) == null ? void 0 : _globalObject$documen.addEventListener('ontouchstart' in _globalObject.globalObject.document.documentElement && 'onpointerup' in _globalObject.globalObject.document.documentElement ? 'pointerup' : 'mousedown', this.handleNativeDocClick);};_proto.detachListeners = function detachListeners() {var _globalObject$documen2;if (this.focusOutsideListenerToken) {this.focusOutsideListenerToken.remove();this.focusOutsideListenerToken = null;}_globalObject.globalObject.removeEventListener == null ? void 0 : _globalObject.globalObject.removeEventListener('blur', this.handleFocusOutside);(_globalObject$documen2 = _globalObject.globalObject.document) == null ? void 0 : _globalObject$documen2.removeEventListener('ontouchstart' in _globalObject.globalObject.document.documentElement && 'onpointerup' in _globalObject.globalObject.document.documentElement ? 'pointerup' : 'mousedown', this.handleNativeDocClick);};return RenderLayer;}(_react.default.Component), _class2.__KONTUR_REACT_UI__ = 'RenderLayer', _class2.displayName = 'RenderLayer', _class2.propTypes = { active: function active(props, propName, componentName) {var active = props.active,onClickOutside = props.onClickOutside,onFocusOutside = props.onFocusOutside;if (active && !(onClickOutside || onFocusOutside)) {return new Error("[" + componentName + "]: using the component without either 'onClickOutside' or 'onFocusOutside' callback is pointless.");}} }, _class2.defaultProps = { active: true }, _temp)) || _class;exports.RenderLayer = RenderLayer;

package/cjs/internal/RenderLayer/RenderLayer.js.map

@@ -1 +1 @@
-{"version":3,"sources":["RenderLayer.tsx"],"names":["RenderLayer","rootNode","getProps","defaultProps","focusOutsideListenerToken","handleFocusOutside","event","props","onFocusOutside","handleNativeDocClick","target","srcElement","node","getAnchorNode","globalObject","Element","onClickOutside","componentDidMount","active","attachListeners","componentDidUpdate","prevProps","detachListeners","componentWillUnmount","render","setRootNode","React","Children","only","children","getAnchorElement","addEventListener","document","documentElement","remove","removeEventListener","Component","__KONTUR_REACT_UI__","propTypes","propName","componentName","Error"],"mappings":"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","sourcesContent":["import React from 'react';\nimport { globalObject } from '@skbkontur/global-object';\n\nimport { listen as listenFocusOutside, containsTargetOrRenderContainer } from '../../lib/listenFocusOutside';\nimport { CommonProps, CommonWrapper } from '../CommonWrapper';\nimport { getRootNode, rootNode, TSetRootNode } from '../../lib/rootNode';\nimport { Nullable } from '../../typings/utility-types';\nimport { createPropsGetter } from '../../lib/createPropsGetter';\nimport { isInstanceOf } from '../../lib/isInstanceOf';\n\nexport interface RenderLayerProps extends CommonProps {\n  children: JSX.Element;\n  onClickOutside?: (e: Event) => void;\n  onFocusOutside?: (e: Event) => void;\n  active?: boolean;\n  getAnchorElement?: () => Nullable<Element>;\n}\n\ntype DefaultProps = Required<Pick<RenderLayerProps, 'active'>>;\n\n@rootNode\nexport class RenderLayer extends React.Component<RenderLayerProps> {\n  public static __KONTUR_REACT_UI__ = 'RenderLayer';\n\n  public static propTypes = {\n    active(props: RenderLayerProps, propName: keyof RenderLayerProps, componentName: string) {\n      const { active, onClickOutside, onFocusOutside } = props;\n      if (active && !(onClickOutside || onFocusOutside)) {\n        return new Error(\n          `[${componentName}]: using the component without either 'onClickOutside' or 'onFocusOutside' callback is pointless.`,\n        );\n      }\n    },\n  };\n\n  public static defaultProps: DefaultProps = {\n    active: true,\n  };\n\n  private getProps = createPropsGetter(RenderLayer.defaultProps);\n\n  private focusOutsideListenerToken: {\n    remove: () => void;\n  } | null = null;\n  private setRootNode!: TSetRootNode;\n\n  public componentDidMount() {\n    if (this.getProps().active) {\n      this.attachListeners();\n    }\n  }\n\n  public componentDidUpdate(prevProps: RenderLayerProps) {\n    const active = this.getProps().active;\n    if (!prevProps.active && active) {\n      this.attachListeners();\n    }\n    if (prevProps.active && !active) {\n      this.detachListeners();\n    }\n  }\n\n  public componentWillUnmount() {\n    if (this.getProps().active) {\n      this.detachListeners();\n    }\n  }\n\n  public render() {\n    return (\n      <CommonWrapper rootNodeRef={this.setRootNode} {...this.props}>\n        {React.Children.only(this.props.children)}\n      </CommonWrapper>\n    );\n  }\n\n  private getAnchorNode(): Nullable<Element> {\n    const { getAnchorElement } = this.props;\n    return getAnchorElement ? getAnchorElement() : getRootNode(this);\n  }\n\n  private attachListeners() {\n    const node = this.getAnchorNode();\n    if (!node) {\n      return;\n    }\n\n    this.focusOutsideListenerToken = listenFocusOutside(() => [node], this.handleFocusOutside);\n    globalObject.addEventListener?.('blur', this.handleFocusOutside);\n    globalObject.document?.addEventListener(\n      'ontouchstart' in globalObject.document.documentElement && 'onpointerup' in globalObject.document.documentElement\n        ? 'pointerup'\n        : 'mousedown',\n      this.handleNativeDocClick,\n    );\n  }\n\n  private detachListeners() {\n    if (this.focusOutsideListenerToken) {\n      this.focusOutsideListenerToken.remove();\n      this.focusOutsideListenerToken = null;\n    }\n\n    globalObject.removeEventListener?.('blur', this.handleFocusOutside);\n    globalObject.document?.removeEventListener(\n      'ontouchstart' in globalObject.document.documentElement && 'onpointerup' in globalObject.document.documentElement\n        ? 'pointerup'\n        : 'mousedown',\n      this.handleNativeDocClick,\n    );\n  }\n\n  private handleFocusOutside = (event: Event) => {\n    if (this.props.onFocusOutside) {\n      this.props.onFocusOutside(event);\n    }\n  };\n\n  private handleNativeDocClick = (event: Event) => {\n    const target = event.target || event.srcElement;\n    const node = this.getAnchorNode();\n\n    if (!node || (isInstanceOf(target, globalObject.Element) && containsTargetOrRenderContainer(target)(node))) {\n      return;\n    }\n\n    if (this.props.onClickOutside) {\n      this.props.onClickOutside(event);\n    }\n  };\n}\n"]}
+{"version":3,"sources":["RenderLayer.tsx"],"names":["RenderLayerContext","RenderLayerProvider","Provider","RenderLayerConsumer","Consumer","RenderLayer","rootNode","getProps","defaultProps","focusOutsideListenerToken","container","handleFocusOutside","event","props","onFocusOutside","handleNativeDocClick","target","srcElement","node","getAnchorNode","globalObject","Element","onClickOutside","componentDidMount","active","attachListeners","componentDidUpdate","prevProps","detachListeners","componentWillUnmount","render","setRootNode","React","Children","only","children","getAnchorElement","addEventListener","document","documentElement","remove","removeEventListener","Component","__KONTUR_REACT_UI__","displayName","propTypes","propName","componentName","Error"],"mappings":"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","sourcesContent":["import React, { createContext } from 'react';\nimport { globalObject } from '@skbkontur/global-object';\n\nimport { containsTargetOrRenderContainer, listen as listenFocusOutside } from '../../lib/listenFocusOutside';\nimport { CommonProps, CommonWrapper } from '../CommonWrapper';\nimport { getRootNode, rootNode, TSetRootNode } from '../../lib/rootNode';\nimport { Nullable } from '../../typings/utility-types';\nimport { createPropsGetter } from '../../lib/createPropsGetter';\nimport { isInstanceOf } from '../../lib/isInstanceOf';\n\nexport interface RenderLayerProps extends CommonProps {\n  children: JSX.Element;\n  onClickOutside?: (e: Event) => void;\n  onFocusOutside?: (e: Event) => void;\n  active?: boolean;\n  getAnchorElement?: () => Nullable<Element>;\n}\n\ntype DefaultProps = Required<Pick<RenderLayerProps, 'active'>>;\n\nconst RenderLayerContext = createContext<Nullable<ShadowRoot | Element>>(null);\nexport const RenderLayerProvider = RenderLayerContext.Provider;\nexport const RenderLayerConsumer = RenderLayerContext.Consumer;\n\n@rootNode\nexport class RenderLayer extends React.Component<RenderLayerProps> {\n  public static __KONTUR_REACT_UI__ = 'RenderLayer';\n  public static displayName = 'RenderLayer';\n\n  public static propTypes = {\n    active(props: RenderLayerProps, propName: keyof RenderLayerProps, componentName: string) {\n      const { active, onClickOutside, onFocusOutside } = props;\n      if (active && !(onClickOutside || onFocusOutside)) {\n        return new Error(\n          `[${componentName}]: using the component without either 'onClickOutside' or 'onFocusOutside' callback is pointless.`,\n        );\n      }\n    },\n  };\n\n  public static defaultProps: DefaultProps = {\n    active: true,\n  };\n\n  private getProps = createPropsGetter(RenderLayer.defaultProps);\n\n  private focusOutsideListenerToken: {\n    remove: () => void;\n  } | null = null;\n  private setRootNode!: TSetRootNode;\n  private container: Nullable<Element | ShadowRoot> = null;\n\n  public componentDidMount() {\n    if (this.getProps().active) {\n      this.attachListeners();\n    }\n  }\n\n  public componentDidUpdate(prevProps: RenderLayerProps) {\n    const active = this.getProps().active;\n    if (!prevProps.active && active) {\n      this.attachListeners();\n    }\n    if (prevProps.active && !active) {\n      this.detachListeners();\n    }\n  }\n\n  public componentWillUnmount() {\n    if (this.getProps().active) {\n      this.detachListeners();\n    }\n  }\n\n  public render() {\n    return (\n      <RenderLayerConsumer>\n        {(container) => {\n          this.container = container;\n          return (\n            <CommonWrapper rootNodeRef={this.setRootNode} {...this.props}>\n              {React.Children.only(this.props.children)}\n            </CommonWrapper>\n          );\n        }}\n      </RenderLayerConsumer>\n    );\n  }\n\n  private getAnchorNode(): Nullable<Element> {\n    const { getAnchorElement } = this.props;\n    return getAnchorElement ? getAnchorElement() : getRootNode(this);\n  }\n\n  private attachListeners() {\n    const node = this.getAnchorNode();\n    if (!node) {\n      return;\n    }\n\n    this.focusOutsideListenerToken = listenFocusOutside(() => [node], this.handleFocusOutside);\n    globalObject.addEventListener?.('blur', this.handleFocusOutside);\n    globalObject.document?.addEventListener(\n      'ontouchstart' in globalObject.document.documentElement && 'onpointerup' in globalObject.document.documentElement\n        ? 'pointerup'\n        : 'mousedown',\n      this.handleNativeDocClick,\n    );\n  }\n\n  private detachListeners() {\n    if (this.focusOutsideListenerToken) {\n      this.focusOutsideListenerToken.remove();\n      this.focusOutsideListenerToken = null;\n    }\n\n    globalObject.removeEventListener?.('blur', this.handleFocusOutside);\n    globalObject.document?.removeEventListener(\n      'ontouchstart' in globalObject.document.documentElement && 'onpointerup' in globalObject.document.documentElement\n        ? 'pointerup'\n        : 'mousedown',\n      this.handleNativeDocClick,\n    );\n  }\n\n  private handleFocusOutside = (event: Event) => {\n    if (this.props.onFocusOutside) {\n      this.props.onFocusOutside(event);\n    }\n  };\n\n  private handleNativeDocClick = (event: Event) => {\n    const target = event.target || event.srcElement;\n    const node = this.getAnchorNode();\n\n    if (\n      !node ||\n      (isInstanceOf(target, globalObject.Element) && containsTargetOrRenderContainer(target, this.container)(node))\n    ) {\n      return;\n    }\n\n    if (this.props.onClickOutside) {\n      this.props.onClickOutside(event);\n    }\n  };\n}\n"]}

package/cjs/internal/ResizeDetector/ResizeDetector.d.ts

@@ -5,6 +5,7 @@ export interface ResizeDetectorProps {
 }
 export declare class ResizeDetector extends React.Component<ResizeDetectorProps> {
     static __KONTUR_REACT_UI__: string;
+    static displayName: string;
     private iframeWindow;
     componentDidMount(): void;
     render(): JSX.Element;

package/cjs/internal/ResizeDetector/ResizeDetector.js

@@ -1,4 +1,4 @@
-"use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");exports.__esModule = true;exports.ResizeDetector = 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.ResizeDetector = void 0;var _inheritsLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/inheritsLoose"));var _react = _interopRequireDefault(require("react"));
 
 var _Emotion = require("../../lib/theming/Emotion");
 
@@ -12,6 +12,7 @@ var _ResizeDetector = require("./ResizeDetector.styles");var
 ResizeDetector = /*#__PURE__*/function (_React$Component) {(0, _inheritsLoose2.default)(ResizeDetector, _React$Component);function ResizeDetector() {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.
 
 
+
     iframeWindow = null;_this.
 
 
@@ -26,6 +27,13 @@ ResizeDetector = /*#__PURE__*/function (_React$Component) {(0, _inheritsLoose2.d
 
 
 
+
+
+
+
+
+
+
 
 
 
@@ -41,4 +49,4 @@ ResizeDetector = /*#__PURE__*/function (_React$Component) {(0, _inheritsLoose2.d
       if (iframe && iframe.contentWindow) {
         _this.iframeWindow = iframe.contentWindow;
       }
-    };return _this;}var _proto = ResizeDetector.prototype;_proto.componentDidMount = function componentDidMount() {if (this.iframeWindow) {this.iframeWindow.addEventListener('resize', this.handleResize);}};_proto.render = function render() {var _cx;return /*#__PURE__*/_react.default.createElement("div", { className: _ResizeDetector.styles.root() }, /*#__PURE__*/_react.default.createElement("iframe", { title: "resizeDetector", ref: this.iframeRef, className: _ResizeDetector.styles.iframe(), tabIndex: -1 }), /*#__PURE__*/_react.default.createElement("div", { className: (0, _Emotion.cx)((_cx = {}, _cx[_ResizeDetector.styles.content()] = true, _cx[_ResizeDetector.styles.fullHeight()] = this.props.fullHeight, _cx)) }, this.props.children));};return ResizeDetector;}(_react.default.Component);exports.ResizeDetector = ResizeDetector;ResizeDetector.__KONTUR_REACT_UI__ = 'ResizeDetector';
+    };return _this;}var _proto = ResizeDetector.prototype;_proto.componentDidMount = function componentDidMount() {if (this.iframeWindow) {this.iframeWindow.addEventListener('resize', this.handleResize);}};_proto.render = function render() {var _this2 = this;return /*#__PURE__*/_react.default.createElement(_Emotion.EmotionConsumer, null, function (emotion) {var _emotion$cx;var styles = (0, _ResizeDetector.getStyles)(emotion);return /*#__PURE__*/_react.default.createElement("div", { className: styles.root() }, /*#__PURE__*/_react.default.createElement("iframe", { title: "resizeDetector", ref: _this2.iframeRef, className: styles.iframe(), tabIndex: -1 }), /*#__PURE__*/_react.default.createElement("div", { className: emotion.cx((_emotion$cx = {}, _emotion$cx[styles.content()] = true, _emotion$cx[styles.fullHeight()] = _this2.props.fullHeight, _emotion$cx)) }, _this2.props.children));});};return ResizeDetector;}(_react.default.Component);exports.ResizeDetector = ResizeDetector;ResizeDetector.__KONTUR_REACT_UI__ = 'ResizeDetector';ResizeDetector.displayName = 'ResizeDetector';

package/cjs/internal/ResizeDetector/ResizeDetector.js.map

@@ -1 +1 @@
-{"version":3,"sources":["ResizeDetector.tsx"],"names":["ResizeDetector","iframeWindow","handleResize","event","props","onResize","iframeRef","iframe","contentWindow","componentDidMount","addEventListener","render","styles","root","content","fullHeight","children","React","Component","__KONTUR_REACT_UI__"],"mappings":"0PAAA;;AAEA;;AAEA,yD;;;;;;;AAOaA,c;;;AAGHC,IAAAA,Y,GAA8B,I;;;;;;;;;;;;;;;;;;;AAmB9BC,IAAAA,Y,GAAe,UAACC,KAAD,EAAoB;AACzC,UAAI,MAAKC,KAAL,CAAWC,QAAf,EAAyB;AACvB,cAAKD,KAAL,CAAWC,QAAX,CAAoBF,KAApB;AACD;AACF,K;;AAEOG,IAAAA,S,GAAY,UAACC,MAAD,EAA+B;AACjD,UAAIA,MAAM,IAAIA,MAAM,CAACC,aAArB,EAAoC;AAClC,cAAKP,YAAL,GAAoBM,MAAM,CAACC,aAA3B;AACD;AACF,K,4DA3BMC,iB,GAAP,6BAA2B,CACzB,IAAI,KAAKR,YAAT,EAAuB,CACrB,KAAKA,YAAL,CAAkBS,gBAAlB,CAAmC,QAAnC,EAA6C,KAAKR,YAAlD,EACD,CACF,C,QAEMS,M,GAAP,kBAAgB,SACd,oBACE,sCAAK,SAAS,EAAEC,uBAAOC,IAAP,EAAhB,iBACE,yCAAQ,KAAK,EAAC,gBAAd,EAA+B,GAAG,EAAE,KAAKP,SAAzC,EAAoD,SAAS,EAAEM,uBAAOL,MAAP,EAA/D,EAAgF,QAAQ,EAAE,CAAC,CAA3F,GADF,eAEE,sCAAK,SAAS,EAAE,gCAAMK,uBAAOE,OAAP,EAAN,IAAyB,IAAzB,MAAgCF,uBAAOG,UAAP,EAAhC,IAAsD,KAAKX,KAAL,CAAWW,UAAjE,OAAhB,IACG,KAAKX,KAAL,CAAWY,QADd,CAFF,CADF,CAQD,C,yBApBiCC,eAAMC,S,0CAA7BlB,c,CACGmB,mB,GAAsB,gB","sourcesContent":["import React from 'react';\n\nimport { cx } from '../../lib/theming/Emotion';\n\nimport { styles } from './ResizeDetector.styles';\n\nexport interface ResizeDetectorProps {\n  onResize?: (event: UIEvent) => void;\n  fullHeight?: boolean;\n}\n\nexport class ResizeDetector extends React.Component<ResizeDetectorProps> {\n  public static __KONTUR_REACT_UI__ = 'ResizeDetector';\n\n  private iframeWindow: Window | null = null;\n\n  public componentDidMount() {\n    if (this.iframeWindow) {\n      this.iframeWindow.addEventListener('resize', this.handleResize);\n    }\n  }\n\n  public render() {\n    return (\n      <div className={styles.root()}>\n        <iframe title=\"resizeDetector\" ref={this.iframeRef} className={styles.iframe()} tabIndex={-1} />\n        <div className={cx({ [styles.content()]: true, [styles.fullHeight()]: this.props.fullHeight })}>\n          {this.props.children}\n        </div>\n      </div>\n    );\n  }\n\n  private handleResize = (event: UIEvent) => {\n    if (this.props.onResize) {\n      this.props.onResize(event);\n    }\n  };\n\n  private iframeRef = (iframe: HTMLIFrameElement) => {\n    if (iframe && iframe.contentWindow) {\n      this.iframeWindow = iframe.contentWindow;\n    }\n  };\n}\n"]}
+{"version":3,"sources":["ResizeDetector.tsx"],"names":["ResizeDetector","iframeWindow","handleResize","event","props","onResize","iframeRef","iframe","contentWindow","componentDidMount","addEventListener","render","emotion","styles","root","cx","content","fullHeight","children","React","Component","__KONTUR_REACT_UI__","displayName"],"mappings":"kQAAA;;AAEA;;AAEA,yD;;;;;;;AAOaA,c;;;;AAIHC,IAAAA,Y,GAA8B,I;;;;;;;;;;;;;;;;;;;;;;;;;;AA0B9BC,IAAAA,Y,GAAe,UAACC,KAAD,EAAoB;AACzC,UAAI,MAAKC,KAAL,CAAWC,QAAf,EAAyB;AACvB,cAAKD,KAAL,CAAWC,QAAX,CAAoBF,KAApB;AACD;AACF,K;;AAEOG,IAAAA,S,GAAY,UAACC,MAAD,EAA+B;AACjD,UAAIA,MAAM,IAAIA,MAAM,CAACC,aAArB,EAAoC;AAClC,cAAKP,YAAL,GAAoBM,MAAM,CAACC,aAA3B;AACD;AACF,K,4DAlCMC,iB,GAAP,6BAA2B,CACzB,IAAI,KAAKR,YAAT,EAAuB,CACrB,KAAKA,YAAL,CAAkBS,gBAAlB,CAAmC,QAAnC,EAA6C,KAAKR,YAAlD,EACD,CACF,C,QAEMS,M,GAAP,kBAAgB,mBACd,oBACE,6BAAC,wBAAD,QACG,UAACC,OAAD,EAAa,iBACZ,IAAMC,MAAM,GAAG,+BAAUD,OAAV,CAAf,CACA,oBACE,sCAAK,SAAS,EAAEC,MAAM,CAACC,IAAP,EAAhB,iBACE,yCAAQ,KAAK,EAAC,gBAAd,EAA+B,GAAG,EAAE,MAAI,CAACR,SAAzC,EAAoD,SAAS,EAAEO,MAAM,CAACN,MAAP,EAA/D,EAAgF,QAAQ,EAAE,CAAC,CAA3F,GADF,eAEE,sCAAK,SAAS,EAAEK,OAAO,CAACG,EAAR,gCAAcF,MAAM,CAACG,OAAP,EAAd,IAAiC,IAAjC,cAAwCH,MAAM,CAACI,UAAP,EAAxC,IAA8D,MAAI,CAACb,KAAL,CAAWa,UAAzE,eAAhB,IACG,MAAI,CAACb,KAAL,CAAWc,QADd,CAFF,CADF,CAQD,CAXH,CADF,CAeD,C,yBA5BiCC,eAAMC,S,0CAA7BpB,c,CACGqB,mB,GAAsB,gB,CADzBrB,c,CAEGsB,W,GAAc,gB","sourcesContent":["import React from 'react';\n\nimport { EmotionConsumer } from '../../lib/theming/Emotion';\n\nimport { getStyles } from './ResizeDetector.styles';\n\nexport interface ResizeDetectorProps {\n  onResize?: (event: UIEvent) => void;\n  fullHeight?: boolean;\n}\n\nexport class ResizeDetector extends React.Component<ResizeDetectorProps> {\n  public static __KONTUR_REACT_UI__ = 'ResizeDetector';\n  public static displayName = 'ResizeDetector';\n\n  private iframeWindow: Window | null = null;\n\n  public componentDidMount() {\n    if (this.iframeWindow) {\n      this.iframeWindow.addEventListener('resize', this.handleResize);\n    }\n  }\n\n  public render() {\n    return (\n      <EmotionConsumer>\n        {(emotion) => {\n          const styles = getStyles(emotion);\n          return (\n            <div className={styles.root()}>\n              <iframe title=\"resizeDetector\" ref={this.iframeRef} className={styles.iframe()} tabIndex={-1} />\n              <div className={emotion.cx({ [styles.content()]: true, [styles.fullHeight()]: this.props.fullHeight })}>\n                {this.props.children}\n              </div>\n            </div>\n          );\n        }}\n      </EmotionConsumer>\n    );\n  }\n\n  private handleResize = (event: UIEvent) => {\n    if (this.props.onResize) {\n      this.props.onResize(event);\n    }\n  };\n\n  private iframeRef = (iframe: HTMLIFrameElement) => {\n    if (iframe && iframe.contentWindow) {\n      this.iframeWindow = iframe.contentWindow;\n    }\n  };\n}\n"]}

package/cjs/internal/ResizeDetector/ResizeDetector.styles.d.ts

@@ -1,4 +1,5 @@
-export declare const styles: {
+import type { Emotion } from '@emotion/css/create-instance';
+export declare const getStyles: (emotion: Emotion) => {
     root(): string;
     iframe(): string;
     content(): string;

package/cjs/internal/ResizeDetector/ResizeDetector.styles.js

@@ -1,16 +1,18 @@
-"use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");exports.__esModule = true;exports.styles = void 0;var _taggedTemplateLiteralLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteralLoose"));var _Emotion = require("../../lib/theming/Emotion");var _templateObject, _templateObject2, _templateObject3, _templateObject4;
+"use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;exports.__esModule = true;exports.getStyles = void 0;var _taggedTemplateLiteralLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteralLoose"));
 
-var styles = (0, _Emotion.memoizeStyle)({
-  root: function root() {
-    return (0, _Emotion.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteralLoose2.default)(["\n      position: relative;\n      height: 100%;\n    "])));
+var _Emotion = require("../../lib/theming/Emotion");var _templateObject, _templateObject2, _templateObject3, _templateObject4;
 
+var getStyles = function getStyles(emotion) {return (
+    (0, _Emotion.memoizeStyle)({
+      root: function root() {
+        return emotion.css(_templateObject || (_templateObject = (0, _taggedTemplateLiteralLoose2.default)(["\n        position: relative;\n        height: 100%;\n      "])));
 
 
-  },
 
-  iframe: function iframe() {
-    return (0, _Emotion.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteralLoose2.default)(["\n      position: absolute;\n      top: 0;\n      left: 0;\n      width: 100%;\n      height: 100%;\n      padding: 0;\n      margin: 0;\n      border: 0;\n      background: transparent;\n      opacity: 0;\n    "])));
+      },
 
+      iframe: function iframe() {
+        return emotion.css(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteralLoose2.default)(["\n        position: absolute;\n        top: 0;\n        left: 0;\n        width: 100%;\n        height: 100%;\n        padding: 0;\n        margin: 0;\n        border: 0;\n        background: transparent;\n        opacity: 0;\n      "])));
 
 
 
@@ -21,16 +23,17 @@ var styles = (0, _Emotion.memoizeStyle)({
 
 
 
-  },
 
-  content: function content() {
-    return (0, _Emotion.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteralLoose2.default)(["\n      position: relative;\n    "])));
+      },
 
+      content: function content() {
+        return emotion.css(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteralLoose2.default)(["\n        position: relative;\n      "])));
 
-  },
 
-  fullHeight: function fullHeight() {
-    return (0, _Emotion.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteralLoose2.default)(["\n      height: 100%;\n    "])));
+      },
 
+      fullHeight: function fullHeight() {
+        return emotion.css(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteralLoose2.default)(["\n        height: 100%;\n      "])));
 
-  } });exports.styles = styles;
+
+      } }));};exports.getStyles = getStyles;

package/cjs/internal/ResizeDetector/ResizeDetector.styles.js.map

@@ -1 +1 @@
-{"version":3,"sources":["ResizeDetector.styles.ts"],"names":["styles","root","css","iframe","content","fullHeight"],"mappings":"4QAAA,oD;;AAEO,IAAMA,MAAM,GAAG,2BAAa;AACjCC,EAAAA,IADiC,kBAC1B;AACL,eAAOC,YAAP;;;;AAID,GANgC;;AAQjCC,EAAAA,MARiC,oBAQxB;AACP,eAAOD,YAAP;;;;;;;;;;;;AAYD,GArBgC;;AAuBjCE,EAAAA,OAvBiC,qBAuBvB;AACR,eAAOF,YAAP;;;AAGD,GA3BgC;;AA6BjCG,EAAAA,UA7BiC,wBA6BpB;AACX,eAAOH,YAAP;;;AAGD,GAjCgC,EAAb,CAAf,C","sourcesContent":["import { css, memoizeStyle } from '../../lib/theming/Emotion';\n\nexport const styles = memoizeStyle({\n  root() {\n    return css`\n      position: relative;\n      height: 100%;\n    `;\n  },\n\n  iframe() {\n    return css`\n      position: absolute;\n      top: 0;\n      left: 0;\n      width: 100%;\n      height: 100%;\n      padding: 0;\n      margin: 0;\n      border: 0;\n      background: transparent;\n      opacity: 0;\n    `;\n  },\n\n  content() {\n    return css`\n      position: relative;\n    `;\n  },\n\n  fullHeight() {\n    return css`\n      height: 100%;\n    `;\n  },\n});\n"]}
+{"version":3,"sources":["ResizeDetector.styles.ts"],"names":["getStyles","emotion","root","css","iframe","content","fullHeight"],"mappings":";;AAEA,oD;;AAEO,IAAMA,SAAS,GAAG,SAAZA,SAAY,CAACC,OAAD;AACvB,+BAAa;AACXC,MAAAA,IADW,kBACJ;AACL,eAAOD,OAAO,CAACE,GAAf;;;;AAID,OANU;;AAQXC,MAAAA,MARW,oBAQF;AACP,eAAOH,OAAO,CAACE,GAAf;;;;;;;;;;;;AAYD,OArBU;;AAuBXE,MAAAA,OAvBW,qBAuBD;AACR,eAAOJ,OAAO,CAACE,GAAf;;;AAGD,OA3BU;;AA6BXG,MAAAA,UA7BW,wBA6BE;AACX,eAAOL,OAAO,CAACE,GAAf;;;AAGD,OAjCU,EAAb,CADuB,GAAlB,C","sourcesContent":["import type { Emotion } from '@emotion/css/create-instance';\n\nimport { memoizeStyle } from '../../lib/theming/Emotion';\n\nexport const getStyles = (emotion: Emotion) =>\n  memoizeStyle({\n    root() {\n      return emotion.css`\n        position: relative;\n        height: 100%;\n      `;\n    },\n\n    iframe() {\n      return emotion.css`\n        position: absolute;\n        top: 0;\n        left: 0;\n        width: 100%;\n        height: 100%;\n        padding: 0;\n        margin: 0;\n        border: 0;\n        background: transparent;\n        opacity: 0;\n      `;\n    },\n\n    content() {\n      return emotion.css`\n        position: relative;\n      `;\n    },\n\n    fullHeight() {\n      return emotion.css`\n        height: 100%;\n      `;\n    },\n  });\n"]}

package/cjs/internal/TextWidthHelper/TextWidthHelper.js

@@ -1,6 +1,7 @@
-"use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");exports.__esModule = true;exports.TextWidthHelper = 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.TextWidthHelper = void 0;var _inheritsLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/inheritsLoose"));var _react = _interopRequireDefault(require("react"));
 
 var _getDOMRect = require("../../lib/dom/getDOMRect");
+var _Emotion = require("../../lib/theming/Emotion");
 
 var _TextWidthHelper = require("./TextWidthHelper.styles");
 
@@ -33,4 +34,11 @@ TextWidthHelper = /*#__PURE__*/function (_React$Component) {(0, _inheritsLoose2.
 
 
 
-    elementRef = function (node) {return _this.element = node;};return _this;}var _proto = TextWidthHelper.prototype;_proto.render = function render() {return /*#__PURE__*/_react.default.createElement("div", { className: _TextWidthHelper.jsStyles.root() }, /*#__PURE__*/_react.default.createElement("div", { className: _TextWidthHelper.jsStyles.textContainer(), ref: this.elementRef }, this.props.text || THIN_SPACE));};_proto.getTextWidth = function getTextWidth() {return (0, _getDOMRect.getDOMRect)(this.element).width;};_proto.getTextHeight = function getTextHeight() {return (0, _getDOMRect.getDOMRect)(this.element).height;};return TextWidthHelper;}(_react.default.Component);exports.TextWidthHelper = TextWidthHelper;
+
+
+
+
+
+
+
+    elementRef = function (node) {return _this.element = node;};return _this;}var _proto = TextWidthHelper.prototype;_proto.render = function render() {var _this2 = this;return /*#__PURE__*/_react.default.createElement(_Emotion.EmotionConsumer, null, function (emotion) {var styles = (0, _TextWidthHelper.getStyles)(emotion);return /*#__PURE__*/_react.default.createElement("div", { className: styles.root() }, /*#__PURE__*/_react.default.createElement("div", { className: styles.textContainer(), ref: _this2.elementRef }, _this2.props.text || THIN_SPACE));});};_proto.getTextWidth = function getTextWidth() {return (0, _getDOMRect.getDOMRect)(this.element).width;};_proto.getTextHeight = function getTextHeight() {return (0, _getDOMRect.getDOMRect)(this.element).height;};return TextWidthHelper;}(_react.default.Component);exports.TextWidthHelper = TextWidthHelper;

package/cjs/internal/TextWidthHelper/TextWidthHelper.js.map

@@ -1 +1 @@
-{"version":3,"sources":["TextWidthHelper.tsx"],"names":["THIN_SPACE","TextWidthHelper","element","elementRef","node","render","jsStyles","root","textContainer","props","text","getTextWidth","width","getTextHeight","height","React","Component"],"mappings":"2PAAA;;AAEA;;AAEA;;AAEA,IAAMA,UAAU,GAAG,QAAnB;;;;;AAKA;AACA;AACA,G;AACaC,e;AACHC,IAAAA,O,GAAiC,I;;;;;;;;;;;;;;;;;;;;AAoBjCC,IAAAA,U,GAAa,UAACC,IAAD,UAA2B,MAAKF,OAAL,GAAeE,IAA1C,E,6DAlBdC,M,GAAP,kBAAgB,CACd,oBACE,sCAAK,SAAS,EAAEC,0BAASC,IAAT,EAAhB,iBACE,sCAAK,SAAS,EAAED,0BAASE,aAAT,EAAhB,EAA0C,GAAG,EAAE,KAAKL,UAApD,IACG,KAAKM,KAAL,CAAWC,IAAX,IAAmBV,UADtB,CADF,CADF,CAOD,C,QAEMW,Y,GAAP,wBAA8B,CAC5B,OAAO,4BAAW,KAAKT,OAAhB,EAAyBU,KAAhC,CACD,C,QAEMC,a,GAAP,yBAA+B,CAC7B,OAAO,4BAAW,KAAKX,OAAhB,EAAyBY,MAAhC,CACD,C,0BAnBkCC,eAAMC,S","sourcesContent":["import React from 'react';\n\nimport { getDOMRect } from '../../lib/dom/getDOMRect';\n\nimport { jsStyles } from './TextWidthHelper.styles';\n\nconst THIN_SPACE = '\\u2009';\n\ninterface TextWidthHelperProps {\n  text?: string;\n}\n/**\n * Херпер позволяет вычислить размеры блока с текстом\n */\nexport class TextWidthHelper extends React.Component<TextWidthHelperProps> {\n  private element: HTMLDivElement | null = null;\n\n  public render() {\n    return (\n      <div className={jsStyles.root()}>\n        <div className={jsStyles.textContainer()} ref={this.elementRef}>\n          {this.props.text || THIN_SPACE}\n        </div>\n      </div>\n    );\n  }\n\n  public getTextWidth(): number {\n    return getDOMRect(this.element).width;\n  }\n\n  public getTextHeight(): number {\n    return getDOMRect(this.element).height;\n  }\n\n  private elementRef = (node: HTMLDivElement) => (this.element = node);\n}\n"]}
+{"version":3,"sources":["TextWidthHelper.tsx"],"names":["THIN_SPACE","TextWidthHelper","element","elementRef","node","render","emotion","styles","root","textContainer","props","text","getTextWidth","width","getTextHeight","height","React","Component"],"mappings":"mQAAA;;AAEA;AACA;;AAEA;;AAEA,IAAMA,UAAU,GAAG,QAAnB;;;;;AAKA;AACA;AACA,G;AACaC,e;AACHC,IAAAA,O,GAAiC,I;;;;;;;;;;;;;;;;;;;;;;;;;;;AA2BjCC,IAAAA,U,GAAa,UAACC,IAAD,UAA2B,MAAKF,OAAL,GAAeE,IAA1C,E,6DAzBdC,M,GAAP,kBAAgB,mBACd,oBACE,6BAAC,wBAAD,QACG,UAACC,OAAD,EAAa,CACZ,IAAMC,MAAM,GAAG,gCAAUD,OAAV,CAAf,CACA,oBACE,sCAAK,SAAS,EAAEC,MAAM,CAACC,IAAP,EAAhB,iBACE,sCAAK,SAAS,EAAED,MAAM,CAACE,aAAP,EAAhB,EAAwC,GAAG,EAAE,MAAI,CAACN,UAAlD,IACG,MAAI,CAACO,KAAL,CAAWC,IAAX,IAAmBX,UADtB,CADF,CADF,CAOD,CAVH,CADF,CAcD,C,QAEMY,Y,GAAP,wBAA8B,CAC5B,OAAO,4BAAW,KAAKV,OAAhB,EAAyBW,KAAhC,CACD,C,QAEMC,a,GAAP,yBAA+B,CAC7B,OAAO,4BAAW,KAAKZ,OAAhB,EAAyBa,MAAhC,CACD,C,0BA1BkCC,eAAMC,S","sourcesContent":["import React from 'react';\n\nimport { getDOMRect } from '../../lib/dom/getDOMRect';\nimport { EmotionConsumer } from '../../lib/theming/Emotion';\n\nimport { getStyles } from './TextWidthHelper.styles';\n\nconst THIN_SPACE = '\\u2009';\n\ninterface TextWidthHelperProps {\n  text?: string;\n}\n/**\n * Херпер позволяет вычислить размеры блока с текстом\n */\nexport class TextWidthHelper extends React.Component<TextWidthHelperProps> {\n  private element: HTMLDivElement | null = null;\n\n  public render() {\n    return (\n      <EmotionConsumer>\n        {(emotion) => {\n          const styles = getStyles(emotion);\n          return (\n            <div className={styles.root()}>\n              <div className={styles.textContainer()} ref={this.elementRef}>\n                {this.props.text || THIN_SPACE}\n              </div>\n            </div>\n          );\n        }}\n      </EmotionConsumer>\n    );\n  }\n\n  public getTextWidth(): number {\n    return getDOMRect(this.element).width;\n  }\n\n  public getTextHeight(): number {\n    return getDOMRect(this.element).height;\n  }\n\n  private elementRef = (node: HTMLDivElement) => (this.element = node);\n}\n"]}

package/cjs/internal/TextWidthHelper/TextWidthHelper.styles.d.ts

@@ -1,4 +1,5 @@
-export declare const jsStyles: {
+import type { Emotion } from '@emotion/css/create-instance';
+export declare const getStyles: (emotion: Emotion) => {
     root(): string;
     textContainer(): string;
 };

package/cjs/internal/TextWidthHelper/TextWidthHelper.styles.js

@@ -1,9 +1,11 @@
-"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;
+"use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;exports.__esModule = true;exports.getStyles = void 0;var _taggedTemplateLiteralLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteralLoose"));
 
-var styles = {
-  root: function root() {
-    return (0, _Emotion.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteralLoose2.default)(["\n      display: flex;\n      position: absolute;\n      top: 0;\n      left: 0;\n      right: 0;\n      visibility: hidden;\n      overflow: hidden;\n    "])));
+var _Emotion = require("../../lib/theming/Emotion");var _templateObject, _templateObject2;
 
+var getStyles = function getStyles(emotion) {return (
+    (0, _Emotion.memoizeStyle)({
+      root: function root() {
+        return emotion.css(_templateObject || (_templateObject = (0, _taggedTemplateLiteralLoose2.default)(["\n      display: flex;\n      position: absolute;\n      top: 0;\n      left: 0;\n      right: 0;\n      visibility: hidden;\n      overflow: hidden;\n    "])));
 
 
 
@@ -11,13 +13,11 @@ var styles = {
 
 
 
-  },
-  textContainer: function textContainer() {
-    return (0, _Emotion.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteralLoose2.default)(["\n      word-break: break-all;\n      white-space: nowrap;\n    "])));
 
+      },
+      textContainer: function textContainer() {
+        return emotion.css(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteralLoose2.default)(["\n      word-break: break-all;\n      white-space: nowrap;\n    "])));
 
 
-  } };
 
-
-var jsStyles = (0, _Emotion.memoizeStyle)(styles);exports.jsStyles = jsStyles;
+      } }));};exports.getStyles = getStyles;

package/cjs/internal/TextWidthHelper/TextWidthHelper.styles.js.map

@@ -1 +1 @@
-{"version":3,"sources":["TextWidthHelper.styles.ts"],"names":["styles","root","css","textContainer","jsStyles"],"mappings":"8QAAA,oD;;AAEA,IAAMA,MAAM,GAAG;AACbC,EAAAA,IADa,kBACN;AACL,eAAOC,YAAP;;;;;;;;;AASD,GAXY;AAYbC,EAAAA,aAZa,2BAYG;AACd,eAAOD,YAAP;;;;AAID,GAjBY,EAAf;;;AAoBO,IAAME,QAAQ,GAAG,2BAAaJ,MAAb,CAAjB,C","sourcesContent":["import { css, memoizeStyle } from '../../lib/theming/Emotion';\n\nconst styles = {\n  root() {\n    return css`\n      display: flex;\n      position: absolute;\n      top: 0;\n      left: 0;\n      right: 0;\n      visibility: hidden;\n      overflow: hidden;\n    `;\n  },\n  textContainer() {\n    return css`\n      word-break: break-all;\n      white-space: nowrap;\n    `;\n  },\n};\n\nexport const jsStyles = memoizeStyle(styles);\n"]}
+{"version":3,"sources":["TextWidthHelper.styles.ts"],"names":["getStyles","emotion","root","css","textContainer"],"mappings":";;AAEA,oD;;AAEO,IAAMA,SAAS,GAAG,SAAZA,SAAY,CAACC,OAAD;AACvB,+BAAa;AACXC,MAAAA,IADW,kBACJ;AACL,eAAOD,OAAO,CAACE,GAAf;;;;;;;;;AASD,OAXU;AAYXC,MAAAA,aAZW,2BAYK;AACd,eAAOH,OAAO,CAACE,GAAf;;;;AAID,OAjBU,EAAb,CADuB,GAAlB,C","sourcesContent":["import type { Emotion } from '@emotion/css/create-instance';\n\nimport { memoizeStyle } from '../../lib/theming/Emotion';\n\nexport const getStyles = (emotion: Emotion) =>\n  memoizeStyle({\n    root() {\n      return emotion.css`\n      display: flex;\n      position: absolute;\n      top: 0;\n      left: 0;\n      right: 0;\n      visibility: hidden;\n      overflow: hidden;\n    `;\n    },\n    textContainer() {\n      return emotion.css`\n      word-break: break-all;\n      white-space: nowrap;\n    `;\n    },\n  });\n"]}

package/cjs/internal/ThemePlayground/AnotherInputsPlayground.js

@@ -1,4 +1,4 @@
-"use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");exports.__esModule = true;exports.DatePickerPlayground = 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.DatePickerPlayground = void 0;var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));var _inheritsLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/inheritsLoose"));var _react = _interopRequireDefault(require("react"));
 
 
 var _Tooltip = require("../../components/Tooltip");

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

@@ -1 +1 @@
-{"version":3,"sources":["AnotherInputsPlayground.tsx"],"names":["DatePickerPlayground","state","value","error","tooltip","handleChange","setState","invalidate","validate","currentValue","DatePicker","removeTooltip","render","props","disabled","size","React","Component"],"mappings":"kVAAA;;;AAGA;AACA,yD;;;;;;;;AAQaA,oB;AACJC,IAAAA,K,GAAmC;AACxCC,MAAAA,KAAK,EAAE,YADiC;AAExCC,MAAAA,KAAK,EAAE,KAFiC;AAGxCC,MAAAA,OAAO,EAAE,KAH+B,E;;;;;;;;;;;;;;;;;;;;;;;;;AA4BlCC,IAAAA,Y,GAAe,UAACH,KAAD,EAAmB;AACxC,YAAKI,QAAL,CAAc;AACZJ,QAAAA,KAAK,EAALA,KADY,EAAd;;AAGD,K;;AAEOK,IAAAA,U,GAAa,YAAM;AACzB,YAAKD,QAAL,CAAc,EAAEH,KAAK,EAAE,KAAT,EAAgBC,OAAO,EAAE,KAAzB,EAAd;AACD,K;;AAEOI,IAAAA,Q,GAAW,YAAM;AACvB,UAAMC,YAAY,GAAG,MAAKR,KAAL,CAAWC,KAAhC;AACA,YAAKI,QAAL,CAAc,YAAM;AAClB,YAAMH,KAAK,GAAG,CAAC,CAACM,YAAF,IAAkB,CAACC,uBAAWF,QAAX,CAAoBC,YAApB,CAAjC;AACA,eAAO;AACLN,UAAAA,KAAK,EAALA,KADK;AAELC,UAAAA,OAAO,EAAED,KAFJ,EAAP;;AAID,OAND;AAOD,K;;AAEOQ,IAAAA,a,GAAgB,YAAM;AAC5B,YAAKL,QAAL,CAAc;AACZF,QAAAA,OAAO,EAAE,KADG,EAAd;;AAGD,K,kEA/CMQ,M,GAAP,kBAAgB,CACd,oBACE,6BAAC,gBAAD,IACE,OAAO,EAAE,KAAKX,KAAL,CAAWG,OAAX,GAAqB,QAArB,GAAgC,QAD3C,EAEE,MAAM,EAAE,0BAAM,0BAAN,EAFV,EAGE,YAAY,EAAE,KAAKO,aAHrB,iBAKE,6BAAC,sBAAD,6BACM,KAAKE,KADX,IAEE,QAAQ,EAAE,KAAKA,KAAL,CAAWC,QAFvB,EAGE,IAAI,EAAE,KAAKD,KAAL,CAAWE,IAHnB,EAIE,KAAK,EAAE,KAAKd,KAAL,CAAWE,KAJpB,EAKE,KAAK,EAAE,KAAKF,KAAL,CAAWC,KALpB,EAME,aAAa,EAAE,KAAKG,YANtB,EAOE,OAAO,EAAE,KAAKE,UAPhB,EAQE,MAAM,EAAE,KAAKC,QARf,EASE,eAAe,MATjB,IALF,CADF,CAmBD,C,+BA3BuCQ,eAAMC,S","sourcesContent":["import React from 'react';\n\nimport { Nullable } from '../../typings/utility-types';\nimport { Tooltip } from '../../components/Tooltip';\nimport { DatePicker, DatePickerProps } from '../../components/DatePicker';\n\ninterface DatePickerPlaygroundState {\n  value: Nullable<string>;\n  error: boolean;\n  tooltip: boolean;\n}\ntype DatePickerPlaygroundProps = Partial<DatePickerProps>;\nexport class DatePickerPlayground extends React.Component<DatePickerPlaygroundProps> {\n  public state: DatePickerPlaygroundState = {\n    value: '17.06.2019',\n    error: false,\n    tooltip: false,\n  };\n\n  public render() {\n    return (\n      <Tooltip\n        trigger={this.state.tooltip ? 'opened' : 'closed'}\n        render={() => 'Такой даты не существует'}\n        onCloseClick={this.removeTooltip}\n      >\n        <DatePicker\n          {...this.props}\n          disabled={this.props.disabled}\n          size={this.props.size}\n          error={this.state.error}\n          value={this.state.value}\n          onValueChange={this.handleChange}\n          onFocus={this.invalidate}\n          onBlur={this.validate}\n          enableTodayLink\n        />\n      </Tooltip>\n    );\n  }\n\n  private handleChange = (value: string) => {\n    this.setState({\n      value,\n    });\n  };\n\n  private invalidate = () => {\n    this.setState({ error: false, tooltip: false });\n  };\n\n  private validate = () => {\n    const currentValue = this.state.value;\n    this.setState(() => {\n      const error = !!currentValue && !DatePicker.validate(currentValue);\n      return {\n        error,\n        tooltip: error,\n      };\n    });\n  };\n\n  private removeTooltip = () => {\n    this.setState({\n      tooltip: false,\n    });\n  };\n}\n"]}
+{"version":3,"sources":["AnotherInputsPlayground.tsx"],"names":["DatePickerPlayground","state","value","error","tooltip","handleChange","setState","invalidate","validate","currentValue","DatePicker","removeTooltip","render","props","disabled","size","React","Component"],"mappings":"0VAAA;;;AAGA;AACA,yD;;;;;;;;AAQaA,oB;AACJC,IAAAA,K,GAAmC;AACxCC,MAAAA,KAAK,EAAE,YADiC;AAExCC,MAAAA,KAAK,EAAE,KAFiC;AAGxCC,MAAAA,OAAO,EAAE,KAH+B,E;;;;;;;;;;;;;;;;;;;;;;;;;AA4BlCC,IAAAA,Y,GAAe,UAACH,KAAD,EAAmB;AACxC,YAAKI,QAAL,CAAc;AACZJ,QAAAA,KAAK,EAALA,KADY,EAAd;;AAGD,K;;AAEOK,IAAAA,U,GAAa,YAAM;AACzB,YAAKD,QAAL,CAAc,EAAEH,KAAK,EAAE,KAAT,EAAgBC,OAAO,EAAE,KAAzB,EAAd;AACD,K;;AAEOI,IAAAA,Q,GAAW,YAAM;AACvB,UAAMC,YAAY,GAAG,MAAKR,KAAL,CAAWC,KAAhC;AACA,YAAKI,QAAL,CAAc,YAAM;AAClB,YAAMH,KAAK,GAAG,CAAC,CAACM,YAAF,IAAkB,CAACC,uBAAWF,QAAX,CAAoBC,YAApB,CAAjC;AACA,eAAO;AACLN,UAAAA,KAAK,EAALA,KADK;AAELC,UAAAA,OAAO,EAAED,KAFJ,EAAP;;AAID,OAND;AAOD,K;;AAEOQ,IAAAA,a,GAAgB,YAAM;AAC5B,YAAKL,QAAL,CAAc;AACZF,QAAAA,OAAO,EAAE,KADG,EAAd;;AAGD,K,kEA/CMQ,M,GAAP,kBAAgB,CACd,oBACE,6BAAC,gBAAD,IACE,OAAO,EAAE,KAAKX,KAAL,CAAWG,OAAX,GAAqB,QAArB,GAAgC,QAD3C,EAEE,MAAM,EAAE,0BAAM,0BAAN,EAFV,EAGE,YAAY,EAAE,KAAKO,aAHrB,iBAKE,6BAAC,sBAAD,6BACM,KAAKE,KADX,IAEE,QAAQ,EAAE,KAAKA,KAAL,CAAWC,QAFvB,EAGE,IAAI,EAAE,KAAKD,KAAL,CAAWE,IAHnB,EAIE,KAAK,EAAE,KAAKd,KAAL,CAAWE,KAJpB,EAKE,KAAK,EAAE,KAAKF,KAAL,CAAWC,KALpB,EAME,aAAa,EAAE,KAAKG,YANtB,EAOE,OAAO,EAAE,KAAKE,UAPhB,EAQE,MAAM,EAAE,KAAKC,QARf,EASE,eAAe,MATjB,IALF,CADF,CAmBD,C,+BA3BuCQ,eAAMC,S","sourcesContent":["import React from 'react';\n\nimport { Nullable } from '../../typings/utility-types';\nimport { Tooltip } from '../../components/Tooltip';\nimport { DatePicker, DatePickerProps } from '../../components/DatePicker';\n\ninterface DatePickerPlaygroundState {\n  value: Nullable<string>;\n  error: boolean;\n  tooltip: boolean;\n}\ntype DatePickerPlaygroundProps = Partial<DatePickerProps>;\nexport class DatePickerPlayground extends React.Component<DatePickerPlaygroundProps> {\n  public state: DatePickerPlaygroundState = {\n    value: '17.06.2019',\n    error: false,\n    tooltip: false,\n  };\n\n  public render() {\n    return (\n      <Tooltip\n        trigger={this.state.tooltip ? 'opened' : 'closed'}\n        render={() => 'Такой даты не существует'}\n        onCloseClick={this.removeTooltip}\n      >\n        <DatePicker\n          {...this.props}\n          disabled={this.props.disabled}\n          size={this.props.size}\n          error={this.state.error}\n          value={this.state.value}\n          onValueChange={this.handleChange}\n          onFocus={this.invalidate}\n          onBlur={this.validate}\n          enableTodayLink\n        />\n      </Tooltip>\n    );\n  }\n\n  private handleChange = (value: string) => {\n    this.setState({\n      value,\n    });\n  };\n\n  private invalidate = () => {\n    this.setState({ error: false, tooltip: false });\n  };\n\n  private validate = () => {\n    const currentValue = this.state.value;\n    this.setState(() => {\n      const error = !!currentValue && !DatePicker.validate(currentValue);\n      return {\n        error,\n        tooltip: error,\n      };\n    });\n  };\n\n  private removeTooltip = () => {\n    this.setState({\n      tooltip: false,\n    });\n  };\n}\n"]}

package/cjs/internal/ThemePlayground/CheckboxPlayground.js

@@ -1,4 +1,4 @@
-"use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");exports.__esModule = true;exports.CheckboxPlayground = void 0;var _react = _interopRequireDefault(require("react"));
+"use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;exports.__esModule = true;exports.CheckboxPlayground = void 0;var _react = _interopRequireDefault(require("react"));
 
 var _Gapped = require("../../components/Gapped");
 var _Checkbox = require("../../components/Checkbox");

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

@@ -1 +1 @@
-{"version":3,"sources":["CheckboxPlayground.tsx"],"names":["propsList","children","checked","disabled","initialIndeterminate","focused","error","warning","CheckboxPlayground"],"mappings":"gKAAA;;AAEA;AACA;;AAEA;;;AAGA,IAAMA,SAAyB,GAAG;AAChC,EAAEC,QAAQ,EAAE,SAAZ,EADgC;AAEhC,EAAEA,QAAQ,EAAE,SAAZ,EAAuBC,OAAO,EAAE,IAAhC,EAFgC;AAGhC,EAAED,QAAQ,EAAE,UAAZ,EAAwBC,OAAO,EAAE,IAAjC,EAAuCC,QAAQ,EAAE,IAAjD,EAHgC;AAIhC,EAAEF,QAAQ,EAAE,aAAZ,EAA2BG,oBAAoB,EAAE,IAAjD,EAJgC;AAKhC,EAAEH,QAAQ,EAAE,SAAZ,EAAuBI,OAAO,EAAE,IAAhC,EALgC;AAMhC,EAAEJ,QAAQ,EAAE,OAAZ,EAAqBK,KAAK,EAAE,IAA5B,EANgC;AAOhC,EAAEL,QAAQ,EAAE,SAAZ,EAAuBM,OAAO,EAAE,IAAhC,EAPgC,CAAlC;;;AAUO,IAAMC,kBAAkB,GAAG,SAArBA,kBAAqB,GAAM;AACtC;AACE,iCAAC,cAAD,IAAQ,GAAG,EAAE,CAAb,EAAgB,QAAQ,MAAxB;AACG,2DAA2B,6BAAC,kBAAD,OAA3B,EAAyCR,SAAzC,CADH,CADF;;;AAKD,CANM,C","sourcesContent":["import React from 'react';\n\nimport { Gapped } from '../../components/Gapped';\nimport { Checkbox, CheckboxProps } from '../../components/Checkbox';\n\nimport { getComponentsFromPropsList } from './helpers';\n\ntype CheckboxProp = CheckboxProps & { focused?: boolean };\nconst propsList: CheckboxProp[] = [\n  { children: 'Default' },\n  { children: 'Checked', checked: true },\n  { children: 'Disabled', checked: true, disabled: true },\n  { children: 'Semichecked', initialIndeterminate: true },\n  { children: 'Focused', focused: true },\n  { children: 'Error', error: true },\n  { children: 'Warning', warning: true },\n];\n\nexport const CheckboxPlayground = () => {\n  return (\n    <Gapped gap={0} vertical>\n      {getComponentsFromPropsList(<Checkbox />, propsList)}\n    </Gapped>\n  );\n};\n"]}
+{"version":3,"sources":["CheckboxPlayground.tsx"],"names":["propsList","children","checked","disabled","initialIndeterminate","focused","error","warning","CheckboxPlayground"],"mappings":"wKAAA;;AAEA;AACA;;AAEA;;;AAGA,IAAMA,SAAyB,GAAG;AAChC,EAAEC,QAAQ,EAAE,SAAZ,EADgC;AAEhC,EAAEA,QAAQ,EAAE,SAAZ,EAAuBC,OAAO,EAAE,IAAhC,EAFgC;AAGhC,EAAED,QAAQ,EAAE,UAAZ,EAAwBC,OAAO,EAAE,IAAjC,EAAuCC,QAAQ,EAAE,IAAjD,EAHgC;AAIhC,EAAEF,QAAQ,EAAE,aAAZ,EAA2BG,oBAAoB,EAAE,IAAjD,EAJgC;AAKhC,EAAEH,QAAQ,EAAE,SAAZ,EAAuBI,OAAO,EAAE,IAAhC,EALgC;AAMhC,EAAEJ,QAAQ,EAAE,OAAZ,EAAqBK,KAAK,EAAE,IAA5B,EANgC;AAOhC,EAAEL,QAAQ,EAAE,SAAZ,EAAuBM,OAAO,EAAE,IAAhC,EAPgC,CAAlC;;;AAUO,IAAMC,kBAAkB,GAAG,SAArBA,kBAAqB,GAAM;AACtC;AACE,iCAAC,cAAD,IAAQ,GAAG,EAAE,CAAb,EAAgB,QAAQ,MAAxB;AACG,2DAA2B,6BAAC,kBAAD,OAA3B,EAAyCR,SAAzC,CADH,CADF;;;AAKD,CANM,C","sourcesContent":["import React from 'react';\n\nimport { Gapped } from '../../components/Gapped';\nimport { Checkbox, CheckboxProps } from '../../components/Checkbox';\n\nimport { getComponentsFromPropsList } from './helpers';\n\ntype CheckboxProp = CheckboxProps & { focused?: boolean };\nconst propsList: CheckboxProp[] = [\n  { children: 'Default' },\n  { children: 'Checked', checked: true },\n  { children: 'Disabled', checked: true, disabled: true },\n  { children: 'Semichecked', initialIndeterminate: true },\n  { children: 'Focused', focused: true },\n  { children: 'Error', error: true },\n  { children: 'Warning', warning: true },\n];\n\nexport const CheckboxPlayground = () => {\n  return (\n    <Gapped gap={0} vertical>\n      {getComponentsFromPropsList(<Checkbox />, propsList)}\n    </Gapped>\n  );\n};\n"]}

package/cjs/internal/ThemePlayground/ComponentsGroup.js

@@ -1,7 +1,8 @@
-"use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");exports.__esModule = true;exports.ComponentsGroup = void 0;var _react = _interopRequireDefault(require("react"));
+"use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;exports.__esModule = true;exports.ComponentsGroup = void 0;var _react = _interopRequireDefault(require("react"));
 
 var _Gapped = require("../../components/Gapped");
 
+var _Emotion = require("../../lib/theming/Emotion");
 
 var _Playground = require("./Playground.styles");
 
@@ -14,12 +15,15 @@ var _Playground = require("./Playground.styles");
 
 var ComponentsGroup = function ComponentsGroup(props) {
   var title = props.title,children = props.children,style = props.style,theme = props.theme;
+  var emotion = (0, _Emotion.useEmotion)();
+  var styles = (0, _Playground.getStyles)(emotion);
+
   return /*#__PURE__*/(
     _react.default.createElement(_Gapped.Gapped, { wrap: true, verticalAlign: "top", gap: 40 }, /*#__PURE__*/
-    _react.default.createElement("div", { className: _Playground.styles.title(theme), style: style },
+    _react.default.createElement("div", { className: styles.title(theme), style: style },
     title), /*#__PURE__*/
 
-    _react.default.createElement("div", { className: _Playground.styles.componentsGroup(theme) }, /*#__PURE__*/
+    _react.default.createElement("div", { className: styles.componentsGroup(theme) }, /*#__PURE__*/
     _react.default.createElement(_Gapped.Gapped, { wrap: true, verticalAlign: "middle", gap: 10 },
     children))));
 

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

@@ -1 +1 @@
-{"version":3,"sources":["ComponentsGroup.tsx"],"names":["ComponentsGroup","props","title","children","style","theme","styles","componentsGroup"],"mappings":"6JAAA;;AAEA;;;AAGA;;;;;;;;;AASO,IAAMA,eAAe,GAAG,SAAlBA,eAAkB,CAACC,KAAD,EAA2E;AACxG,MAAQC,KAAR,GAA0CD,KAA1C,CAAQC,KAAR,CAAeC,QAAf,GAA0CF,KAA1C,CAAeE,QAAf,CAAyBC,KAAzB,GAA0CH,KAA1C,CAAyBG,KAAzB,CAAgCC,KAAhC,GAA0CJ,KAA1C,CAAgCI,KAAhC;AACA;AACE,iCAAC,cAAD,IAAQ,IAAI,MAAZ,EAAa,aAAa,EAAC,KAA3B,EAAiC,GAAG,EAAE,EAAtC;AACE,0CAAK,SAAS,EAAEC,mBAAOJ,KAAP,CAAaG,KAAb,CAAhB,EAAqC,KAAK,EAAED,KAA5C;AACGF,IAAAA,KADH,CADF;;AAIE,0CAAK,SAAS,EAAEI,mBAAOC,eAAP,CAAuBF,KAAvB,CAAhB;AACE,iCAAC,cAAD,IAAQ,IAAI,MAAZ,EAAa,aAAa,EAAC,QAA3B,EAAoC,GAAG,EAAE,EAAzC;AACGF,IAAAA,QADH,CADF,CAJF,CADF;;;;;AAYD,CAdM,C","sourcesContent":["import React from 'react';\n\nimport { Gapped } from '../../components/Gapped';\nimport { Theme } from '../../lib/theming/Theme';\n\nimport { styles } from './Playground.styles';\n\ninterface ComponentsGroupProps {\n  title: string;\n  children: React.ReactNode;\n  style?: React.CSSProperties;\n  theme: Theme;\n}\n\nexport const ComponentsGroup = (props: ComponentsGroupProps): React.ReactElement<ComponentsGroupProps> => {\n  const { title, children, style, theme } = props;\n  return (\n    <Gapped wrap verticalAlign=\"top\" gap={40}>\n      <div className={styles.title(theme)} style={style}>\n        {title}\n      </div>\n      <div className={styles.componentsGroup(theme)}>\n        <Gapped wrap verticalAlign=\"middle\" gap={10}>\n          {children}\n        </Gapped>\n      </div>\n    </Gapped>\n  );\n};\n"]}
+{"version":3,"sources":["ComponentsGroup.tsx"],"names":["ComponentsGroup","props","title","children","style","theme","emotion","styles","componentsGroup"],"mappings":"qKAAA;;AAEA;;AAEA;;AAEA;;;;;;;;;AASO,IAAMA,eAAe,GAAG,SAAlBA,eAAkB,CAACC,KAAD,EAA2E;AACxG,MAAQC,KAAR,GAA0CD,KAA1C,CAAQC,KAAR,CAAeC,QAAf,GAA0CF,KAA1C,CAAeE,QAAf,CAAyBC,KAAzB,GAA0CH,KAA1C,CAAyBG,KAAzB,CAAgCC,KAAhC,GAA0CJ,KAA1C,CAAgCI,KAAhC;AACA,MAAMC,OAAO,GAAG,0BAAhB;AACA,MAAMC,MAAM,GAAG,2BAAUD,OAAV,CAAf;;AAEA;AACE,iCAAC,cAAD,IAAQ,IAAI,MAAZ,EAAa,aAAa,EAAC,KAA3B,EAAiC,GAAG,EAAE,EAAtC;AACE,0CAAK,SAAS,EAAEC,MAAM,CAACL,KAAP,CAAaG,KAAb,CAAhB,EAAqC,KAAK,EAAED,KAA5C;AACGF,IAAAA,KADH,CADF;;AAIE,0CAAK,SAAS,EAAEK,MAAM,CAACC,eAAP,CAAuBH,KAAvB,CAAhB;AACE,iCAAC,cAAD,IAAQ,IAAI,MAAZ,EAAa,aAAa,EAAC,QAA3B,EAAoC,GAAG,EAAE,EAAzC;AACGF,IAAAA,QADH,CADF,CAJF,CADF;;;;;AAYD,CAjBM,C","sourcesContent":["import React from 'react';\n\nimport { Gapped } from '../../components/Gapped';\nimport { Theme } from '../../lib/theming/Theme';\nimport { useEmotion } from '../../lib/theming/Emotion';\n\nimport { getStyles } from './Playground.styles';\n\ninterface ComponentsGroupProps {\n  title: string;\n  children: React.ReactNode;\n  style?: React.CSSProperties;\n  theme: Theme;\n}\n\nexport const ComponentsGroup = (props: ComponentsGroupProps): React.ReactElement<ComponentsGroupProps> => {\n  const { title, children, style, theme } = props;\n  const emotion = useEmotion();\n  const styles = getStyles(emotion);\n\n  return (\n    <Gapped wrap verticalAlign=\"top\" gap={40}>\n      <div className={styles.title(theme)} style={style}>\n        {title}\n      </div>\n      <div className={styles.componentsGroup(theme)}>\n        <Gapped wrap verticalAlign=\"middle\" gap={10}>\n          {children}\n        </Gapped>\n      </div>\n    </Gapped>\n  );\n};\n"]}

package/cjs/internal/ThemePlayground/CurrencyInputPlayground.js

@@ -1,4 +1,4 @@
-"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

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;;;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"]}
+{"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.js

@@ -1,4 +1,4 @@
-"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
 

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

@@ -1 +1 @@
-{"version":3,"sources":["FxInputPlayground.tsx"],"names":["FxInputPlayground","state","auto","value","onValueChange","setState","handleRestore","render","React","Component"],"mappings":"6PAAA;;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"]}
+{"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.js

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

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

@@ -1 +1 @@
-{"version":3,"sources":["HintPlayground.tsx"],"names":["HintPlayground","pushToast","Toast","push","pushToastWithAction","label","handler","render","React","Component"],"mappings":"0PAAA;;AAEA;AACA;AACA;AACA,+C;;AAEaA,c;;;;;;;;;;;;;;AAcHC,IAAAA,S,GAAY,YAAM;AACxBC,mBAAMC,IAAN,CAAW,iBAAX;AACD,K;;AAEOC,IAAAA,mB,GAAsB,YAAM;AAClCF,mBAAMC,IAAN,CAAW,iBAAX,EAA8B,EAAEE,KAAK,EAAE,QAAT,EAAmBC,OAAO,EAAE,2BAAM,IAAN,EAA5B,EAA9B;AACD,K,4DAnBMC,M,GAAP,kBAAgB,CACd,oBACE,6BAAC,cAAD,IAAQ,GAAG,EAAE,EAAb,iBACE,6BAAC,UAAD,IAAM,MAAM,MAAZ,EAAa,MAAM,MAAnB,EAAoB,IAAI,EAAE,eAA1B,iBACE,6BAAC,cAAD,IAAQ,OAAO,EAAE,KAAKN,SAAtB,YADF,CADF,eAIE,6BAAC,UAAD,IAAM,MAAM,MAAZ,EAAa,MAAM,MAAnB,EAAoB,IAAI,EAAE,yBAA1B,EAAqD,GAAG,EAAE,OAA1D,iBACE,6BAAC,cAAD,IAAQ,OAAO,EAAE,KAAKG,mBAAtB,sBADF,CAJF,CADF,CAUD,C,yBAZiCI,eAAMC,S","sourcesContent":["import React from 'react';\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"]}
+{"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.js

@@ -1,4 +1,4 @@
-"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
 

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

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

@@ -7,6 +7,7 @@ export interface PlaygroundProps {
 }
 export declare class Playground extends React.Component<PlaygroundProps> {
     private theme;
+    private emotion;
     private stopEl;
     render(): JSX.Element;
     private renderMain;