@skbkontur/react-ui 0.0.0-bb4cbfe9c6 → 0.0.0-bd4276284d

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

@@ -1 +1 @@
-{"version":3,"sources":["RenderLayer.tsx"],"names":["React","listen","listenFocusOutside","containsTargetOrRenderContainer","CommonWrapper","getRootNode","rootNode","RenderLayer","focusOutsideListenerToken","handleFocusOutside","event","props","onFocusOutside","handleNativeDocClick","target","srcElement","node","getAnchorElement","Element","onClickOutside","componentDidMount","active","attachListeners","componentDidUpdate","prevProps","detachListeners","componentWillUnmount","render","setRootNode","Children","only","children","window","addEventListener","document","documentElement","remove","removeEventListener","Component","__KONTUR_REACT_UI__","propTypes","propName","componentName","Error","defaultProps"],"mappings":"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","sourcesContent":["import React from 'react';\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';\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<HTMLElement>;\n}\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 = {\n    active: true,\n  };\n\n  private focusOutsideListenerToken: {\n    remove: () => void;\n  } | null = null;\n  private setRootNode!: TSetRootNode;\n\n  public componentDidMount() {\n    if (this.props.active) {\n      this.attachListeners();\n    }\n  }\n\n  public componentDidUpdate(prevProps: RenderLayerProps) {\n    if (!prevProps.active && this.props.active) {\n      this.attachListeners();\n    }\n    if (prevProps.active && !this.props.active) {\n      this.detachListeners();\n    }\n  }\n\n  public componentWillUnmount() {\n    if (this.props.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 attachListeners() {\n    const rootNode = getRootNode(this) || this.props.getAnchorElement?.();\n    if (!rootNode) return;\n    this.focusOutsideListenerToken = listenFocusOutside(() => [rootNode], this.handleFocusOutside);\n    window.addEventListener('blur', this.handleFocusOutside);\n    document.addEventListener(\n      'ontouchstart' in document.documentElement ? 'touchstart' : '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    window.removeEventListener('blur', this.handleFocusOutside);\n    document.removeEventListener(\n      'ontouchstart' in document.documentElement ? 'touchstart' : '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 = getRootNode(this) || getRootNode(this.props.getAnchorElement?.());\n\n    if (!node || (target instanceof 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":["React","listen","listenFocusOutside","containsTargetOrRenderContainer","CommonWrapper","getRootNode","rootNode","createPropsGetter","RenderLayer","getProps","defaultProps","focusOutsideListenerToken","handleFocusOutside","event","props","onFocusOutside","handleNativeDocClick","target","srcElement","node","getAnchorNode","Element","onClickOutside","componentDidMount","active","attachListeners","componentDidUpdate","prevProps","detachListeners","componentWillUnmount","render","setRootNode","Children","only","children","getAnchorElement","window","addEventListener","document","documentElement","remove","removeEventListener","Component","__KONTUR_REACT_UI__","propTypes","propName","componentName","Error"],"mappings":"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","sourcesContent":["import React from 'react';\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';\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    window.addEventListener('blur', this.handleFocusOutside);\n    document.addEventListener(\n      'ontouchstart' in document.documentElement && 'onpointerup' in 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    window.removeEventListener('blur', this.handleFocusOutside);\n    document.removeEventListener(\n      'ontouchstart' in document.documentElement && 'onpointerup' in 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 || (target instanceof Element && containsTargetOrRenderContainer(target)(node))) {\n      return;\n    }\n\n    if (this.props.onClickOutside) {\n      this.props.onClickOutside(event);\n    }\n  };\n}\n"]}

package/internal/RenderLayer/RenderLayer.d.ts

@@ -6,24 +6,26 @@ export interface RenderLayerProps extends CommonProps {
     onClickOutside?: (e: Event) => void;
     onFocusOutside?: (e: Event) => void;
     active?: boolean;
-    getAnchorElement?: () => Nullable<HTMLElement>;
+    getAnchorElement?: () => Nullable<Element>;
 }
+declare type DefaultProps = Required<Pick<RenderLayerProps, 'active'>>;
 export declare class RenderLayer extends React.Component<RenderLayerProps> {
     static __KONTUR_REACT_UI__: string;
     static propTypes: {
         active(props: RenderLayerProps, propName: keyof RenderLayerProps, componentName: string): Error | undefined;
     };
-    static defaultProps: {
-        active: boolean;
-    };
+    static defaultProps: DefaultProps;
+    private getProps;
     private focusOutsideListenerToken;
     private setRootNode;
     componentDidMount(): void;
     componentDidUpdate(prevProps: RenderLayerProps): void;
     componentWillUnmount(): void;
     render(): JSX.Element;
+    private getAnchorNode;
     private attachListeners;
     private detachListeners;
     private handleFocusOutside;
     private handleNativeDocClick;
 }
+export {};

package/internal/TextWidthHelper/TextWidthHelper/TextWidthHelper.js

@@ -0,0 +1,50 @@
+import _inheritsLoose from "@babel/runtime/helpers/esm/inheritsLoose";
+import React from 'react';
+import { getDOMRect } from "../../../lib/dom/getDOMRect";
+import { jsStyles } from "../TextWidthHelper.styles";
+var THIN_SPACE = "\u2009";
+/**
+ * Херпер позволяет вычислить размеры блока с текстом
+ */
+
+export var TextWidthHelper = /*#__PURE__*/function (_React$Component) {
+  _inheritsLoose(TextWidthHelper, _React$Component);
+
+  function TextWidthHelper() {
+    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.element = null;
+
+    _this.elementRef = function (node) {
+      return _this.element = node;
+    };
+
+    return _this;
+  }
+
+  var _proto = TextWidthHelper.prototype;
+
+  _proto.render = function render() {
+    return /*#__PURE__*/React.createElement("div", {
+      className: jsStyles.root()
+    }, /*#__PURE__*/React.createElement("div", {
+      className: jsStyles.textContainer(),
+      ref: this.elementRef
+    }, this.props.text || THIN_SPACE));
+  };
+
+  _proto.getTextWidth = function getTextWidth() {
+    return getDOMRect(this.element).width;
+  };
+
+  _proto.getTextHeight = function getTextHeight() {
+    return getDOMRect(this.element).height;
+  };
+
+  return TextWidthHelper;
+}(React.Component);

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

@@ -0,0 +1 @@
+{"version":3,"sources":["TextWidthHelper.tsx"],"names":["React","getDOMRect","jsStyles","THIN_SPACE","TextWidthHelper","element","elementRef","node","render","root","textContainer","props","text","getTextWidth","width","getTextHeight","height","Component"],"mappings":"sEAAA,OAAOA,KAAP,MAAkB,OAAlB;;AAEA,SAASC,UAAT,QAA2B,0BAA3B;;AAEA,SAASC,QAAT,QAAyB,0BAAzB;;AAEA,IAAMC,UAAU,GAAG,QAAnB;;;;;AAKA;AACA;AACA;AACA,WAAaC,eAAb;AACUC,IAAAA,OADV,GAC2C,IAD3C;;;;;;;;;;;;;;;;;;;;AAqBUC,IAAAA,UArBV,GAqBuB,UAACC,IAAD,UAA2B,MAAKF,OAAL,GAAeE,IAA1C,EArBvB,6DAGSC,MAHT,GAGE,kBAAgB,CACd,oBACE,6BAAK,SAAS,EAAEN,QAAQ,CAACO,IAAT,EAAhB,iBACE,6BAAK,SAAS,EAAEP,QAAQ,CAACQ,aAAT,EAAhB,EAA0C,GAAG,EAAE,KAAKJ,UAApD,IACG,KAAKK,KAAL,CAAWC,IAAX,IAAmBT,UADtB,CADF,CADF,CAOD,CAXH,QAaSU,YAbT,GAaE,wBAA8B,CAC5B,OAAOZ,UAAU,CAAC,KAAKI,OAAN,CAAV,CAAyBS,KAAhC,CACD,CAfH,QAiBSC,aAjBT,GAiBE,yBAA+B,CAC7B,OAAOd,UAAU,CAAC,KAAKI,OAAN,CAAV,CAAyBW,MAAhC,CACD,CAnBH,0BAAqChB,KAAK,CAACiB,SAA3C","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"]}

package/internal/TextWidthHelper/TextWidthHelper/package.json

@@ -0,0 +1,6 @@
+{
+  "main": "../../../cjs/internal/TextWidthHelper/TextWidthHelper.js",
+  "module": "TextWidthHelper",
+  "types": "../TextWidthHelper.d.ts",
+  "sideEffects": false
+}

package/internal/TextWidthHelper/TextWidthHelper.d.ts

@@ -0,0 +1,15 @@
+import React from 'react';
+interface TextWidthHelperProps {
+    text?: string;
+}
+/**
+ * Херпер позволяет вычислить размеры блока с текстом
+ */
+export declare class TextWidthHelper extends React.Component<TextWidthHelperProps> {
+    private element;
+    render(): JSX.Element;
+    getTextWidth(): number;
+    getTextHeight(): number;
+    private elementRef;
+}
+export {};

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

@@ -0,0 +1,14 @@
+import _taggedTemplateLiteralLoose from "@babel/runtime/helpers/esm/taggedTemplateLiteralLoose";
+
+var _templateObject, _templateObject2;
+
+import { css, memoizeStyle } from "../../../lib/theming/Emotion";
+var styles = {
+  root: function root() {
+    return css(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n      display: flex;\n      position: absolute;\n      top: 0;\n      left: 0;\n      right: 0;\n      visibility: hidden;\n      overflow: hidden;\n    "])));
+  },
+  textContainer: function textContainer() {
+    return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n      word-break: break-all;\n      white-space: nowrap;\n    "])));
+  }
+};
+export var jsStyles = memoizeStyle(styles);

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

@@ -0,0 +1 @@
+{"version":3,"sources":["TextWidthHelper.styles.ts"],"names":["css","memoizeStyle","styles","root","textContainer","jsStyles"],"mappings":"sIAAA,SAASA,GAAT,EAAcC,YAAd,QAAkC,2BAAlC;;AAEA,IAAMC,MAAM,GAAG;AACbC,EAAAA,IADa,kBACN;AACL,WAAOH,GAAP;;;;;;;;;AASD,GAXY;AAYbI,EAAAA,aAZa,2BAYG;AACd,WAAOJ,GAAP;;;;AAID,GAjBY,EAAf;;;AAoBA,OAAO,IAAMK,QAAQ,GAAGJ,YAAY,CAACC,MAAD,CAA7B","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"]}

package/internal/TextWidthHelper/TextWidthHelper.styles/package.json

@@ -0,0 +1,6 @@
+{
+  "main": "../../../cjs/internal/TextWidthHelper/TextWidthHelper.styles.js",
+  "module": "TextWidthHelper.styles",
+  "types": "../TextWidthHelper.styles.d.ts",
+  "sideEffects": false
+}

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

@@ -0,0 +1,4 @@
+export declare const jsStyles: {
+    root(): string;
+    textContainer(): string;
+};

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

@@ -1 +1 @@
-{"version":3,"sources":["AnotherInputsPlayground.tsx"],"names":["React","Tooltip","DatePicker","DatePickerPlayground","state","value","error","tooltip","handleChange","setState","invalidate","validate","currentValue","removeTooltip","render","props","disabled","size","Component"],"mappings":"gIAAA,OAAOA,KAAP,MAAkB,OAAlB;;AAEA,SAASC,OAAT,QAAwB,0BAAxB;AACA,SAASC,UAAT,QAA2B,6BAA3B;;AAEA,WAAaC,oBAAb;AACSC,IAAAA,KADT,GACiB;AACbC,MAAAA,KAAK,EAAE,YADM;AAEbC,MAAAA,KAAK,EAAE,KAFM;AAGbC,MAAAA,OAAO,EAAE,KAHI,EADjB;;;;;;;;;;;;;;;;;;;;;;;;;AA6BUC,IAAAA,YA7BV,GA6ByB,UAACH,KAAD,EAAmB;AACxC,YAAKI,QAAL,CAAc;AACZJ,QAAAA,KAAK,EAALA,KADY,EAAd;;AAGD,KAjCH;;AAmCUK,IAAAA,UAnCV,GAmCuB,YAAM;AACzB,YAAKD,QAAL,CAAc,EAAEH,KAAK,EAAE,KAAT,EAAgBC,OAAO,EAAE,KAAzB,EAAd;AACD,KArCH;;AAuCUI,IAAAA,QAvCV,GAuCqB,YAAM;AACvB,UAAMC,YAAY,GAAG,MAAKR,KAAL,CAAWC,KAAhC;AACA,YAAKI,QAAL,CAAc,YAAM;AAClB,YAAMH,KAAK,GAAG,CAAC,CAACM,YAAF,IAAkB,CAACV,UAAU,CAACS,QAAX,CAAoBC,YAApB,CAAjC;AACA,eAAO;AACLN,UAAAA,KAAK,EAALA,KADK;AAELC,UAAAA,OAAO,EAAED,KAFJ,EAAP;;AAID,OAND;AAOD,KAhDH;;AAkDUO,IAAAA,aAlDV,GAkD0B,YAAM;AAC5B,YAAKJ,QAAL,CAAc;AACZF,QAAAA,OAAO,EAAE,KADG,EAAd;;AAGD,KAtDH,kEAOSO,MAPT,GAOE,kBAAgB,CACd,oBACE,oBAAC,OAAD,IACE,OAAO,EAAE,KAAKV,KAAL,CAAWG,OAAX,GAAqB,QAArB,GAAgC,QAD3C,EAEE,MAAM,EAAE,0BAAM,0BAAN,EAFV,EAGE,YAAY,EAAE,KAAKM,aAHrB,iBAKE,oBAAC,UAAD,eACM,KAAKE,KADX,IAEE,QAAQ,EAAE,KAAKA,KAAL,CAAWC,QAFvB,EAGE,IAAI,EAAE,KAAKD,KAAL,CAAWE,IAHnB,EAIE,KAAK,EAAE,KAAKb,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,CA3BH,+BAA0CX,KAAK,CAACkB,SAAhD","sourcesContent":["import React from 'react';\n\nimport { Tooltip } from '../../components/Tooltip';\nimport { DatePicker } from '../../components/DatePicker';\n\nexport class DatePickerPlayground extends React.Component<any, any> {\n  public state = {\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":["React","Tooltip","DatePicker","DatePickerPlayground","state","value","error","tooltip","handleChange","setState","invalidate","validate","currentValue","removeTooltip","render","props","disabled","size","Component"],"mappings":"gIAAA,OAAOA,KAAP,MAAkB,OAAlB;;;AAGA,SAASC,OAAT,QAAwB,0BAAxB;AACA,SAASC,UAAT,QAA4C,6BAA5C;;;;;;;;AAQA,WAAaC,oBAAb;AACSC,IAAAA,KADT,GAC4C;AACxCC,MAAAA,KAAK,EAAE,YADiC;AAExCC,MAAAA,KAAK,EAAE,KAFiC;AAGxCC,MAAAA,OAAO,EAAE,KAH+B,EAD5C;;;;;;;;;;;;;;;;;;;;;;;;;AA6BUC,IAAAA,YA7BV,GA6ByB,UAACH,KAAD,EAAmB;AACxC,YAAKI,QAAL,CAAc;AACZJ,QAAAA,KAAK,EAALA,KADY,EAAd;;AAGD,KAjCH;;AAmCUK,IAAAA,UAnCV,GAmCuB,YAAM;AACzB,YAAKD,QAAL,CAAc,EAAEH,KAAK,EAAE,KAAT,EAAgBC,OAAO,EAAE,KAAzB,EAAd;AACD,KArCH;;AAuCUI,IAAAA,QAvCV,GAuCqB,YAAM;AACvB,UAAMC,YAAY,GAAG,MAAKR,KAAL,CAAWC,KAAhC;AACA,YAAKI,QAAL,CAAc,YAAM;AAClB,YAAMH,KAAK,GAAG,CAAC,CAACM,YAAF,IAAkB,CAACV,UAAU,CAACS,QAAX,CAAoBC,YAApB,CAAjC;AACA,eAAO;AACLN,UAAAA,KAAK,EAALA,KADK;AAELC,UAAAA,OAAO,EAAED,KAFJ,EAAP;;AAID,OAND;AAOD,KAhDH;;AAkDUO,IAAAA,aAlDV,GAkD0B,YAAM;AAC5B,YAAKJ,QAAL,CAAc;AACZF,QAAAA,OAAO,EAAE,KADG,EAAd;;AAGD,KAtDH,kEAOSO,MAPT,GAOE,kBAAgB,CACd,oBACE,oBAAC,OAAD,IACE,OAAO,EAAE,KAAKV,KAAL,CAAWG,OAAX,GAAqB,QAArB,GAAgC,QAD3C,EAEE,MAAM,EAAE,0BAAM,0BAAN,EAFV,EAGE,YAAY,EAAE,KAAKM,aAHrB,iBAKE,oBAAC,UAAD,eACM,KAAKE,KADX,IAEE,QAAQ,EAAE,KAAKA,KAAL,CAAWC,QAFvB,EAGE,IAAI,EAAE,KAAKD,KAAL,CAAWE,IAHnB,EAIE,KAAK,EAAE,KAAKb,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,CA3BH,+BAA0CX,KAAK,CAACkB,SAAhD","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/internal/ThemePlayground/AnotherInputsPlayground.d.ts

@@ -1,13 +1,18 @@
 import React from 'react';
-export declare class DatePickerPlayground extends React.Component<any, any> {
-    state: {
-        value: string;
-        error: boolean;
-        tooltip: boolean;
-    };
+import { Nullable } from '../../typings/utility-types';
+import { DatePickerProps } from '../../components/DatePicker';
+interface DatePickerPlaygroundState {
+    value: Nullable<string>;
+    error: boolean;
+    tooltip: boolean;
+}
+declare type DatePickerPlaygroundProps = Partial<DatePickerProps>;
+export declare class DatePickerPlayground extends React.Component<DatePickerPlaygroundProps> {
+    state: DatePickerPlaygroundState;
     render(): JSX.Element;
     private handleChange;
     private invalidate;
     private validate;
     private removeTooltip;
 }
+export {};

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

@@ -1 +1 @@
-{"version":3,"sources":["CheckboxPlayground.tsx"],"names":["React","Gapped","Checkbox","getComponentsFromPropsList","propsList","children","checked","disabled","initialIndeterminate","focused","error","warning","CheckboxPlayground"],"mappings":"AAAA,OAAOA,KAAP,MAAkB,OAAlB;;AAEA,SAASC,MAAT,QAAuB,yBAAvB;AACA,SAASC,QAAT,QAAwC,2BAAxC;;AAEA,SAASC,0BAAT,QAA2C,WAA3C;;AAEA,IAAMC,SAAuD,GAAG;AAC9D,EAAEC,QAAQ,EAAE,SAAZ,EAD8D;AAE9D,EAAEA,QAAQ,EAAE,SAAZ,EAAuBC,OAAO,EAAE,IAAhC,EAF8D;AAG9D,EAAED,QAAQ,EAAE,UAAZ,EAAwBC,OAAO,EAAE,IAAjC,EAAuCC,QAAQ,EAAE,IAAjD,EAH8D;AAI9D,EAAEF,QAAQ,EAAE,aAAZ,EAA2BG,oBAAoB,EAAE,IAAjD,EAJ8D;AAK9D,EAAEH,QAAQ,EAAE,SAAZ,EAAuBI,OAAO,EAAE,IAAhC,EAL8D;AAM9D,EAAEJ,QAAQ,EAAE,OAAZ,EAAqBK,KAAK,EAAE,IAA5B,EAN8D;AAO9D,EAAEL,QAAQ,EAAE,SAAZ,EAAuBM,OAAO,EAAE,IAAhC,EAP8D,CAAhE;;;AAUA,OAAO,IAAMC,kBAAkB,GAAG,SAArBA,kBAAqB,GAAM;AACtC;AACE,wBAAC,MAAD,IAAQ,GAAG,EAAE,CAAb,EAAgB,QAAQ,MAAxB;AACGT,IAAAA,0BAA0B,eAAC,oBAAC,QAAD,OAAD,EAAeC,SAAf,CAD7B,CADF;;;AAKD,CANM","sourcesContent":["import React from 'react';\n\nimport { Gapped } from '../../components/Gapped';\nimport { Checkbox, CheckboxProps } from '../../components/Checkbox';\n\nimport { getComponentsFromPropsList } from './helpers';\n\nconst propsList: Array<CheckboxProps & { focused?: boolean }> = [\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":["React","Gapped","Checkbox","getComponentsFromPropsList","propsList","children","checked","disabled","initialIndeterminate","focused","error","warning","CheckboxPlayground"],"mappings":"AAAA,OAAOA,KAAP,MAAkB,OAAlB;;AAEA,SAASC,MAAT,QAAuB,yBAAvB;AACA,SAASC,QAAT,QAAwC,2BAAxC;;AAEA,SAASC,0BAAT,QAA2C,WAA3C;;;AAGA,IAAMC,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;;;AAUA,OAAO,IAAMC,kBAAkB,GAAG,SAArBA,kBAAqB,GAAM;AACtC;AACE,wBAAC,MAAD,IAAQ,GAAG,EAAE,CAAb,EAAgB,QAAQ,MAAxB;AACGT,IAAAA,0BAA0B,eAAC,oBAAC,QAAD,OAAD,EAAeC,SAAf,CAD7B,CADF;;;AAKD,CANM","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/internal/ThemePlayground/CurrencyInputPlayground/CurrencyInputPlayground.js.map

@@ -1 +1 @@
-{"version":3,"sources":["CurrencyInputPlayground.tsx"],"names":["React","CurrencyInput","CurrencyInputPlayground","state","value","props","handleChange","setState","render","Component"],"mappings":"gIAAA,OAAOA,KAAP,MAAkB,OAAlB;;AAEA,SAASC,aAAT,QAAkD,gCAAlD;;AAEA,WAAaC,uBAAb;;;;;;AAMSC,IAAAA,KANT,GAMiB;AACbC,MAAAA,KAAK,EAAE,MAAKC,KAAL,CAAWD,KAAX,IAAoB,IADd,EANjB;;;;;;;;;;;;;;;;;AAwBUE,IAAAA,YAxBV,GAwByB,UAACF,KAAD,EAA2B;AAChD,YAAKG,QAAL,CAAc,EAAEH,KAAK,EAALA,KAAF,EAAd;AACD,KA1BH,qEAUSI,MAVT,GAUE,kBAAgB,CACd,oBACE,8CACE,oBAAC,aAAD,eACM,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,CAtBH,kCAA6CN,KAAK,CAACS,SAAnD","sourcesContent":["import React from 'react';\n\nimport { CurrencyInput, CurrencyInputProps } from '../../components/CurrencyInput';\n\nexport class CurrencyInputPlayground extends React.Component<\n  Partial<CurrencyInputProps>,\n  {\n    value?: number | null;\n  }\n> {\n  public state = {\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":["React","CurrencyInput","CurrencyInputPlayground","state","value","props","handleChange","setState","render","Component"],"mappings":"gIAAA,OAAOA,KAAP,MAAkB,OAAlB;;;AAGA,SAASC,aAAT,QAAkD,gCAAlD;;;;;AAKA,WAAaC,uBAAb;AACSC,IAAAA,KADT,GAC+C;AAC3CC,MAAAA,KAAK,EAAE,MAAKC,KAAL,CAAWD,KAAX,IAAoB,IADgB,EAD/C;;;;;;;;;;;;;;;;;AAmBUE,IAAAA,YAnBV,GAmByB,UAACF,KAAD,EAA2B;AAChD,YAAKG,QAAL,CAAc,EAAEH,KAAK,EAALA,KAAF,EAAd;AACD,KArBH,qEAKSI,MALT,GAKE,kBAAgB,CACd,oBACE,8CACE,oBAAC,aAAD,eACM,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,CAjBH,kCAA6CN,KAAK,CAACS,SAAnD","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/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/internal/ThemePlayground/FxInputPlayground/FxInputPlayground.js

@@ -4,10 +4,18 @@ import { FxInput } from "../../../components/FxInput";
 export var FxInputPlayground = /*#__PURE__*/function (_React$Component) {
   _inheritsLoose(FxInputPlayground, _React$Component);
 
-  function FxInputPlayground(props) {
+  function FxInputPlayground() {
     var _this;
 
-    _this = _React$Component.call(this, props) || 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.onValueChange = function (value) {
       _this.setState({
@@ -23,10 +31,6 @@ export var FxInputPlayground = /*#__PURE__*/function (_React$Component) {
       });
     };
 
-    _this.state = {
-      auto: true,
-      value: 'auto'
-    };
     return _this;
   }
 

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

@@ -1 +1 @@
-{"version":3,"sources":["FxInputPlayground.tsx"],"names":["React","FxInput","FxInputPlayground","props","onValueChange","value","setState","auto","handleRestore","state","render","Component"],"mappings":"sEAAA,OAAOA,KAAP,MAAkB,OAAlB;;AAEA,SAASC,OAAT,QAAwB,0BAAxB;;AAEA,WAAaC,iBAAb;AACE,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,CARH,gDAUSK,MAVT,GAUE,kBAA6B,CAC3B,oBACE,oBAAC,OAAD,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,CArBH,4BAAuCJ,KAAK,CAACW,SAA7C","sourcesContent":["import React from 'react';\n\nimport { FxInput } from '../../components/FxInput';\n\nexport class FxInputPlayground extends React.Component<{}, { value: string; auto: boolean }> {\n  constructor(props: {}) {\n    super(props);\n\n    this.state = {\n      auto: true,\n      value: 'auto',\n    };\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":["React","FxInput","FxInputPlayground","state","auto","value","onValueChange","setState","handleRestore","render","Component"],"mappings":"sEAAA,OAAOA,KAAP,MAAkB,OAAlB;;AAEA,SAASC,OAAT,QAAwB,0BAAxB;;;;;;AAMA,WAAaC,iBAAb;AACSC,IAAAA,KADT,GACyC;AACrCC,MAAAA,IAAI,EAAE,IAD+B;AAErCC,MAAAA,KAAK,EAAE,MAF8B,EADzC;;;;;;;;;;;;;;;;AAmBUC,IAAAA,aAnBV,GAmB0B,UAACD,KAAD,EAAmB;AACzC,YAAKE,QAAL,CAAc,EAAEF,KAAK,EAALA,KAAF,EAASD,IAAI,EAAE,KAAf,EAAd;AACD,KArBH;;AAuBUI,IAAAA,aAvBV,GAuB0B,YAAM;AAC5B,YAAKD,QAAL,CAAc;AACZF,QAAAA,KAAK,EAAE,MADK;AAEZD,QAAAA,IAAI,EAAE,IAFM,EAAd;;AAID,KA5BH,+DAMSK,MANT,GAME,kBAA6B,CAC3B,oBACE,oBAAC,OAAD,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,CAjBH,4BAAuCN,KAAK,CAACU,SAA7C","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/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/internal/ThemePlayground/HintPlayground/HintPlayground.js.map

@@ -1 +1 @@
-{"version":3,"sources":["HintPlayground.tsx"],"names":["React","Gapped","Button","Hint","Toast","HintPlayground","pushToast","push","pushToastWithAction","label","handler","render","Component"],"mappings":"sEAAA,OAAOA,KAAP,MAAkB,OAAlB;;AAEA,SAASC,MAAT,QAAuB,yBAAvB;AACA,SAASC,MAAT,QAAuB,yBAAvB;AACA,SAASC,IAAT,QAAqB,uBAArB;AACA,SAASC,KAAT,QAAsB,wBAAtB;;AAEA,WAAaC,cAAb;;;;;;;;;;;;;;AAcUC,IAAAA,SAdV,GAcsB,YAAM;AACxBF,MAAAA,KAAK,CAACG,IAAN,CAAW,iBAAX;AACD,KAhBH;;AAkBUC,IAAAA,mBAlBV,GAkBgC,YAAM;AAClCJ,MAAAA,KAAK,CAACG,IAAN,CAAW,iBAAX,EAA8B,EAAEE,KAAK,EAAE,QAAT,EAAmBC,OAAO,EAAE,2BAAM,IAAN,EAA5B,EAA9B;AACD,KApBH,4DACSC,MADT,GACE,kBAAgB,CACd,oBACE,oBAAC,MAAD,IAAQ,GAAG,EAAE,EAAb,iBACE,oBAAC,IAAD,IAAM,MAAM,MAAZ,EAAa,MAAM,MAAnB,EAAoB,IAAI,EAAE,eAA1B,iBACE,oBAAC,MAAD,IAAQ,OAAO,EAAE,KAAKL,SAAtB,YADF,CADF,eAIE,oBAAC,IAAD,IAAM,MAAM,MAAZ,EAAa,MAAM,MAAnB,EAAoB,IAAI,EAAE,yBAA1B,EAAqD,GAAG,EAAE,OAA1D,iBACE,oBAAC,MAAD,IAAQ,OAAO,EAAE,KAAKE,mBAAtB,sBADF,CAJF,CADF,CAUD,CAZH,yBAAoCR,KAAK,CAACY,SAA1C","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":["React","Gapped","Button","Hint","Toast","HintPlayground","pushToast","push","pushToastWithAction","label","handler","render","Component"],"mappings":"sEAAA,OAAOA,KAAP,MAAkB,OAAlB;;AAEA,SAASC,MAAT,QAAuB,yBAAvB;AACA,SAASC,MAAT,QAAuB,yBAAvB;AACA,SAASC,IAAT,QAAqB,uBAArB;AACA,SAASC,KAAT,QAAsB,wBAAtB;;AAEA,WAAaC,cAAb;;;;;;;;;;;;;;AAcUC,IAAAA,SAdV,GAcsB,YAAM;AACxBF,MAAAA,KAAK,CAACG,IAAN,CAAW,iBAAX;AACD,KAhBH;;AAkBUC,IAAAA,mBAlBV,GAkBgC,YAAM;AAClCJ,MAAAA,KAAK,CAACG,IAAN,CAAW,iBAAX,EAA8B,EAAEE,KAAK,EAAE,QAAT,EAAmBC,OAAO,EAAE,2BAAM,IAAN,EAA5B,EAA9B;AACD,KApBH,4DACSC,MADT,GACE,kBAAgB,CACd,oBACE,oBAAC,MAAD,IAAQ,GAAG,EAAE,EAAb,iBACE,oBAAC,IAAD,IAAM,MAAM,MAAZ,EAAa,MAAM,MAAnB,EAAoB,IAAI,EAAE,eAA1B,iBACE,oBAAC,MAAD,IAAQ,OAAO,EAAE,KAAKL,SAAtB,YADF,CADF,eAIE,oBAAC,IAAD,IAAM,MAAM,MAAZ,EAAa,MAAM,MAAnB,EAAoB,IAAI,EAAE,yBAA1B,EAAqD,GAAG,EAAE,OAA1D,iBACE,oBAAC,MAAD,IAAQ,OAAO,EAAE,KAAKE,mBAAtB,sBADF,CAJF,CADF,CAUD,CAZH,yBAAoCR,KAAK,CAACY,SAA1C","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/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/internal/ThemePlayground/PagingPlayground/PagingPlayground.js

@@ -13,7 +13,7 @@ export var PagingPlayground = /*#__PURE__*/function (_React$Component) {
 
     _this = _React$Component.call.apply(_React$Component, [this].concat(args)) || this;
     _this.state = {
-      active: 1
+      activePage: 1
     };
 
     _this.handlePageChange = function (pageNumber) {
@@ -29,7 +29,7 @@ export var PagingPlayground = /*#__PURE__*/function (_React$Component) {
 
   _proto.render = function render() {
     return /*#__PURE__*/React.createElement(Paging, {
-      activePage: this.state.active,
+      activePage: this.state.activePage,
       onPageChange: this.handlePageChange,
       pagesCount: 12
     });

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

@@ -1 +1 @@
-{"version":3,"sources":["PagingPlayground.tsx"],"names":["React","Paging","PagingPlayground","state","active","handlePageChange","pageNumber","setState","render","Component"],"mappings":"sEAAA,OAAOA,KAAP,MAAkB,OAAlB;;AAEA,SAASC,MAAT,QAAuB,yBAAvB;;AAEA,WAAaC,gBAAb;AACSC,IAAAA,KADT,GACiB;AACbC,MAAAA,MAAM,EAAE,CADK,EADjB;;;;;;;AASUC,IAAAA,gBATV,GAS6B,UAACC,UAAD,EAAwB;AACjD,YAAKC,QAAL,CAAc,EAAEH,MAAM,EAAEE,UAAV,EAAd;AACD,KAXH,8DAKSE,MALT,GAKE,kBAAgB,CACd,oBAAO,oBAAC,MAAD,IAAQ,UAAU,EAAE,KAAKL,KAAL,CAAWC,MAA/B,EAAuC,YAAY,EAAE,KAAKC,gBAA1D,EAA4E,UAAU,EAAE,EAAxF,GAAP,CACD,CAPH,2BAAsCL,KAAK,CAACS,SAA5C","sourcesContent":["import React from 'react';\n\nimport { Paging } from '../../components/Paging';\n\nexport class PagingPlayground extends React.Component<{}, { active: number }> {\n  public state = {\n    active: 1,\n  };\n\n  public render() {\n    return <Paging activePage={this.state.active} onPageChange={this.handlePageChange} pagesCount={12} />;\n  }\n\n  private handlePageChange = (pageNumber: number) => {\n    this.setState({ active: pageNumber });\n  };\n}\n"]}
+{"version":3,"sources":["PagingPlayground.tsx"],"names":["React","Paging","PagingPlayground","state","activePage","handlePageChange","pageNumber","setState","active","render","Component"],"mappings":"sEAAA,OAAOA,KAAP,MAAkB,OAAlB;;AAEA,SAASC,MAAT,QAAuB,yBAAvB;;;;;AAKA,WAAaC,gBAAb;AACSC,IAAAA,KADT,GACwC;AACpCC,MAAAA,UAAU,EAAE,CADwB,EADxC;;;;;;;AASUC,IAAAA,gBATV,GAS6B,UAACC,UAAD,EAAwB;AACjD,YAAKC,QAAL,CAAc,EAAEC,MAAM,EAAEF,UAAV,EAAd;AACD,KAXH,8DAKSG,MALT,GAKE,kBAAgB,CACd,oBAAO,oBAAC,MAAD,IAAQ,UAAU,EAAE,KAAKN,KAAL,CAAWC,UAA/B,EAA2C,YAAY,EAAE,KAAKC,gBAA9D,EAAgF,UAAU,EAAE,EAA5F,GAAP,CACD,CAPH,2BAAsCL,KAAK,CAACU,SAA5C","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/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/internal/ThemePlayground/Playground/Playground.js

@@ -1,7 +1,6 @@
 import _inheritsLoose from "@babel/runtime/helpers/esm/inheritsLoose";
 import React from 'react';
 import SearchIcon from '@skbkontur/react-icons/Search';
-import CardIcon from '@skbkontur/react-icons/Card';
 import LinkIcon from '@skbkontur/react-icons/Link';
 import OkIcon from '@skbkontur/react-icons/Ok';
 import ErrorIcon from '@skbkontur/react-icons/Error';
@@ -17,6 +16,7 @@ import { Tooltip } from "../../../components/Tooltip";
 import { Sticky } from "../../../components/Sticky";
 import { isTestEnv } from "../../../lib/currentEnvironment";
 import { cx } from "../../../lib/theming/Emotion";
+import { FileUploader } from "../../../components/FileUploader";
 import { ThemeType } from "../constants";
 import { TokenInputPlayground } from "../TokenInputPlayground";
 import { DatePickerPlayground } from "../AnotherInputsPlayground";
@@ -24,7 +24,6 @@ import { TogglePlayground } from "../TogglePlayground";
 import { SwitcherPlayground } from "../SwitcherPlayground";
 import { FxInputPlayground } from "../FxInputPlayground";
 import { CurrencyInputPlayground } from "../CurrencyInputPlayground";
-import { SelectPlayground } from "../SelectPlayground";
 import { getComponentsFromPropsList } from "../helpers";
 import { CheckboxPlayground } from "../CheckboxPlayground";
 import { RadioPlayground } from "../RadioPlayground";
@@ -32,6 +31,7 @@ import { PagingPlayground } from "../PagingPlayground";
 import { HintPlayground } from "../HintPlayground";
 import { ComponentsGroup } from "../ComponentsGroup";
 import { styles } from "../Playground.styles";
+import { SizesGroup } from "../SizesGroup";
 var useSticky = !isTestEnv;
 export var Playground = /*#__PURE__*/function (_React$Component) {
   _inheritsLoose(Playground, _React$Component);
@@ -64,8 +64,11 @@ export var Playground = /*#__PURE__*/function (_React$Component) {
         case ThemeType.DefaultOld:
           return ThemeType.DefaultOld;
 
-        case ThemeType.DarkOld:
-          return ThemeType.DarkOld;
+        case ThemeType.Theme2022:
+          return ThemeType.Theme2022;
+
+        case ThemeType.Theme2022Dark:
+          return ThemeType.Theme2022Dark;
 
         default:
           return ThemeType.Default;
@@ -73,37 +76,14 @@ export var Playground = /*#__PURE__*/function (_React$Component) {
     };
 
     _this.renderSizesGroup = function () {
-      var Group = function Group(_ref) {
-        var size = _ref.size;
-        return /*#__PURE__*/React.createElement(Gapped, {
-          wrap: true,
-          verticalAlign: "middle",
-          gap: 10
-        }, /*#__PURE__*/React.createElement(SelectPlayground, {
-          width: 120,
-          size: size
-        }), /*#__PURE__*/React.createElement(Input, {
-          rightIcon: /*#__PURE__*/React.createElement(CardIcon, null),
-          placeholder: 'Text value',
-          size: size
-        }), /*#__PURE__*/React.createElement(Button, {
-          width: 120,
-          size: size
-        }, "Button"), /*#__PURE__*/React.createElement(Button, {
-          icon: /*#__PURE__*/React.createElement(LinkIcon, null),
-          use: 'link',
-          size: size
-        }, "Button like a link"));
-      };
-
       return /*#__PURE__*/React.createElement(ComponentsGroup, {
         title: 'Размеры',
         theme: _this.theme
-      }, /*#__PURE__*/React.createElement(Group, {
+      }, /*#__PURE__*/React.createElement(SizesGroup, {
         size: 'small'
-      }), /*#__PURE__*/React.createElement(Group, {
+      }), /*#__PURE__*/React.createElement(SizesGroup, {
         size: 'medium'
-      }), /*#__PURE__*/React.createElement(Group, {
+      }), /*#__PURE__*/React.createElement(SizesGroup, {
         size: 'large'
       }));
     };
@@ -275,6 +255,15 @@ export var Playground = /*#__PURE__*/function (_React$Component) {
       }, /*#__PURE__*/React.createElement(PagingPlayground, null));
     };
 
+    _this.renderFileUploader = function () {
+      return /*#__PURE__*/React.createElement(ComponentsGroup, {
+        title: 'FileUploader',
+        theme: _this.theme
+      }, /*#__PURE__*/React.createElement(FileUploader, {
+        multiple: true
+      }));
+    };
+
     _this.renderStickyStopElement = function () {
       return /*#__PURE__*/React.createElement("div", {
         ref: _this.stopEl,
@@ -312,7 +301,7 @@ export var Playground = /*#__PURE__*/function (_React$Component) {
     }, this.renderTabsGroup(), this.renderSizesGroup(), this.renderLinksGroup(), this.renderButtonsGroup(), this.renderInputsGroup(), this.renderOtherInputsGroup(), this.renderTokenInputsGroup(), this.renderSwitchersGroup(), this.renderControlsGroup()), this.renderStickyStopElement(), /*#__PURE__*/React.createElement(Gapped, {
       vertical: true,
       gap: 50
-    }, this.renderHintsGroup(), this.renderTooltip(), this.renderPaging()));
+    }, this.renderHintsGroup(), this.renderTooltip(), this.renderPaging(), this.renderFileUploader()));
   };
 
   _proto.renderTabs = function renderTabs() {
@@ -342,11 +331,13 @@ export var Playground = /*#__PURE__*/function (_React$Component) {
       id: ThemeType.Dark
     }, "\u0422\u0435\u043C\u043D\u0430\u044F"), /*#__PURE__*/React.createElement(Tabs.Tab, {
       id: ThemeType.DefaultOld
-    }, "\u0421\u0442\u0430\u0440\u0430\u044F \u0434\u0435\u0444\u043E\u043B\u0442\u043D\u0430\u044F"), /*#__PURE__*/React.createElement(Tabs.Tab, {
+    }, "\u0414\u0435\u0444\u043E\u043B\u0442\u043D\u0430\u044F 3.0"), /*#__PURE__*/React.createElement(Tabs.Tab, {
       id: ThemeType.FlatOld
-    }, "\u0421\u0442\u0430\u0440\u0430\u044F \u043F\u043B\u043E\u0441\u043A\u0430\u044F"), /*#__PURE__*/React.createElement(Tabs.Tab, {
-      id: ThemeType.DarkOld
-    }, "\u0421\u0442\u0430\u0440\u0430\u044F \u0442\u0435\u043C\u043D\u0430\u044F"))), /*#__PURE__*/React.createElement(Link, {
+    }, "\u041F\u043B\u043E\u0441\u043A\u0430\u044F 3.0"), /*#__PURE__*/React.createElement(Tabs.Tab, {
+      id: ThemeType.Theme2022
+    }, "\u041D\u043E\u0432\u0430\u044F 2022"), /*#__PURE__*/React.createElement(Tabs.Tab, {
+      id: ThemeType.Theme2022Dark
+    }, "\u041D\u043E\u0432\u0430\u044F 2022 \u0422\u0451\u043C\u043D\u0430\u044F"))), /*#__PURE__*/React.createElement(Link, {
       onClick: onEditLinkClick
     }, "\u041D\u0430\u0441\u0442\u0440\u043E\u0438\u0442\u044C \u0442\u0435\u043C\u0443")));
   };