@skbkontur/react-ui 0.0.0-375e096002 → 0.0.0-3974a633b4

package/cjs/components/Sticky/Sticky.js.map

@@ -1 +1 @@
-{"version":3,"sources":["Sticky.tsx"],"names":["MAX_REFLOW_RETRIES","Sticky","state","fixed","deltaHeight","stopped","relativeTop","wrapper","inner","layoutSubscription","remove","reflowCounter","refWrapper","ref","refInner","reflow","document","documentElement","Error","windowHeight","window","innerHeight","clientHeight","getBoundingClientRect","top","bottom","left","width","height","props","offset","getStop","side","prevFixed","prevHeight","setState","stop","stopRect","outerHeight","componentDidMount","LayoutEvents","addListener","componentWillUnmount","componentDidUpdate","prevProps","prevState","emit","render","children","innerStyle","jsStyles","container","React","Component","__KONTUR_REACT_UI__","propTypes","PropTypes","oneOfType","node","func","number","oneOf","isRequired","defaultProps"],"mappings":"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","sourcesContent":["import React from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport shallowEqual from 'shallowequal';\r\nimport cn from 'classnames';\r\n\r\nimport * as LayoutEvents from '../../lib/LayoutEvents';\r\nimport { Nullable } from '../../typings/utility-types';\r\nimport { isFunction } from '../../lib/utils';\r\nimport { ZIndex } from '../../internal/ZIndex';\r\n\r\nimport { jsStyles } from './Sticky.styles';\r\n\r\nconst MAX_REFLOW_RETRIES = 5;\r\n\r\nexport interface StickyProps {\r\n  side: 'top' | 'bottom';\r\n  /**\r\n   * Отступ в пикселях от края экрана, на сколько сдвигается элемент в залипшем состоянии\r\n   * @default 0\r\n   */\r\n  offset: number;\r\n  getStop?: () => Nullable<HTMLElement>;\r\n  children?: React.ReactNode | ((fixed: boolean) => React.ReactNode);\r\n}\r\n\r\nexport interface StickyState {\r\n  fixed: boolean;\r\n  deltaHeight: number;\r\n  height?: number;\r\n  width?: number;\r\n  left?: number;\r\n  stopped: boolean;\r\n  relativeTop: number;\r\n}\r\n\r\nexport class Sticky extends React.Component<StickyProps, StickyState> {\r\n  public static __KONTUR_REACT_UI__ = 'Sticky';\r\n\r\n  public static propTypes = {\r\n    children: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),\r\n\r\n    /**\r\n     * Функция, которая возвращает DOM-элемент, который нельзя пересекать.\r\n     */\r\n    getStop: PropTypes.func,\r\n\r\n    /**\r\n     * Отступ от границы в пикселях\r\n     */\r\n    offset: PropTypes.number,\r\n\r\n    side: PropTypes.oneOf(['top', 'bottom']).isRequired,\r\n  };\r\n\r\n  public static defaultProps = { offset: 0 };\r\n\r\n  public state: StickyState = {\r\n    fixed: false,\r\n    deltaHeight: 0,\r\n    stopped: false,\r\n    relativeTop: 0,\r\n  };\r\n\r\n  private wrapper: Nullable<HTMLElement>;\r\n  private inner: Nullable<HTMLElement>;\r\n  private layoutSubscription: { remove: Nullable<() => void> } = { remove: null };\r\n  private reflowCounter = 0;\r\n\r\n  public componentDidMount() {\r\n    this.reflow();\r\n\r\n    this.layoutSubscription = LayoutEvents.addListener(this.reflow);\r\n  }\r\n\r\n  public componentWillUnmount() {\r\n    if (this.layoutSubscription.remove) {\r\n      this.layoutSubscription.remove();\r\n    }\r\n  }\r\n\r\n  public componentDidUpdate(prevProps: StickyProps, prevState: StickyState) {\r\n    if (!shallowEqual(prevProps, this.props) || !shallowEqual(prevState, this.state)) {\r\n      if (this.reflowCounter < MAX_REFLOW_RETRIES) {\r\n        LayoutEvents.emit();\r\n        this.reflowCounter += 1;\r\n        return;\r\n      }\r\n    }\r\n    this.reflowCounter = 0;\r\n  }\r\n\r\n  public render() {\r\n    let { children } = this.props;\r\n    const { side, offset } = this.props;\r\n    const { fixed, stopped, relativeTop, deltaHeight, width, height, left } = this.state;\r\n    const innerStyle: React.CSSProperties = {};\r\n\r\n    if (fixed) {\r\n      if (stopped) {\r\n        innerStyle.top = relativeTop;\r\n        innerStyle[side === 'top' ? 'marginTop' : 'marginBottom'] = deltaHeight;\r\n      } else {\r\n        innerStyle.width = width;\r\n        innerStyle[side] = offset;\r\n        innerStyle.left = left;\r\n      }\r\n    }\r\n\r\n    if (isFunction(children)) {\r\n      children = children(fixed);\r\n    }\r\n\r\n    return (\r\n      <div ref={this.refWrapper}>\r\n        <ZIndex\r\n          priority=\"Sticky\"\r\n          applyZIndex={fixed}\r\n          className={cn(jsStyles.inner(), {\r\n            [jsStyles.fixed()]: fixed && !stopped,\r\n            [jsStyles.stopped()]: stopped,\r\n          })}\r\n          style={innerStyle}\r\n          wrapperRef={this.refInner}\r\n        >\r\n          <div className={jsStyles.container()}>{children}</div>\r\n        </ZIndex>\r\n        {fixed && !stopped ? <div style={{ width, height }} /> : null}\r\n      </div>\r\n    );\r\n  }\r\n\r\n  private refWrapper = (ref: Nullable<HTMLElement>) => (this.wrapper = ref);\r\n\r\n  private refInner = (ref: Nullable<HTMLElement>) => (this.inner = ref);\r\n\r\n  private reflow = () => {\r\n    const { documentElement } = document;\r\n\r\n    if (!documentElement) {\r\n      throw Error('There is no \"documentElement\" in document');\r\n    }\r\n\r\n    const windowHeight = window.innerHeight || documentElement.clientHeight;\r\n    if (!this.wrapper || !this.inner) {\r\n      return;\r\n    }\r\n    const { top, bottom, left } = this.wrapper.getBoundingClientRect();\r\n    const { width, height } = this.inner.getBoundingClientRect();\r\n    const { offset, getStop, side } = this.props;\r\n    const { fixed: prevFixed, height: prevHeight = height } = this.state;\r\n    const fixed = side === 'top' ? top < offset : bottom > windowHeight - offset;\r\n\r\n    this.setState({ fixed, left });\r\n\r\n    if (fixed && !prevFixed) {\r\n      this.setState({ width, height });\r\n    }\r\n\r\n    if (fixed) {\r\n      const stop = getStop && getStop();\r\n      if (stop) {\r\n        const deltaHeight = prevHeight - height;\r\n        const stopRect = stop.getBoundingClientRect();\r\n        const outerHeight = height + offset;\r\n        let stopped = false;\r\n        let relativeTop = 0;\r\n\r\n        if (side === 'top') {\r\n          stopped = stopRect.top - outerHeight < 0;\r\n          relativeTop = stopRect.top - height - top;\r\n        } else {\r\n          stopped = stopRect.bottom + outerHeight > windowHeight;\r\n          relativeTop = stopRect.bottom - top;\r\n        }\r\n\r\n        this.setState({ relativeTop, deltaHeight, stopped });\r\n      }\r\n    }\r\n  };\r\n}\r\n"]}
+{"version":3,"sources":["Sticky.tsx"],"names":["MAX_REFLOW_RETRIES","Sticky","rootNode","state","fixed","deltaHeight","stopped","relativeTop","wrapper","inner","layoutSubscription","remove","reflowCounter","setRootNode","refWrapper","ref","refInner","reflow","document","documentElement","Error","windowHeight","window","innerHeight","clientHeight","getBoundingClientRect","top","bottom","left","width","height","props","offset","getStop","side","prevFixed","prevHeight","setState","stop","stopRect","outerHeight","componentDidMount","LayoutEvents","addListener","componentWillUnmount","componentDidUpdate","prevProps","prevState","emit","render","children","innerStyle","styles","container","React","Component","__KONTUR_REACT_UI__","propTypes","PropTypes","oneOfType","node","func","number","oneOf","isRequired","defaultProps"],"mappings":"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","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport shallowEqual from 'shallowequal';\n\nimport * as LayoutEvents from '../../lib/LayoutEvents';\nimport { Nullable } from '../../typings/utility-types';\nimport { isFunction } from '../../lib/utils';\nimport { ZIndex } from '../../internal/ZIndex';\nimport { CommonWrapper, CommonProps } from '../../internal/CommonWrapper';\nimport { cx } from '../../lib/theming/Emotion';\nimport { rootNode, TSetRootNode } from '../../lib/rootNode';\n\nimport { styles } from './Sticky.styles';\n\nconst MAX_REFLOW_RETRIES = 5;\n\nexport interface StickyProps extends CommonProps {\n  side: 'top' | 'bottom';\n  /**\n   * Отступ в пикселях от края экрана, на сколько сдвигается элемент в залипшем состоянии\n   * @default 0\n   */\n  offset: number;\n  getStop?: () => Nullable<HTMLElement>;\n  children?: React.ReactNode | ((fixed: boolean) => React.ReactNode);\n}\n\nexport interface StickyState {\n  fixed: boolean;\n  deltaHeight: number;\n  height?: number;\n  width?: number;\n  left?: number;\n  stopped: boolean;\n  relativeTop: number;\n}\n\n@rootNode\nexport class Sticky extends React.Component<StickyProps, StickyState> {\n  public static __KONTUR_REACT_UI__ = 'Sticky';\n\n  public static propTypes = {\n    children: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),\n\n    /**\n     * Функция, которая возвращает DOM-элемент, который нельзя пересекать.\n     */\n    getStop: PropTypes.func,\n\n    /**\n     * Отступ от границы в пикселях\n     */\n    offset: PropTypes.number,\n\n    side: PropTypes.oneOf(['top', 'bottom']).isRequired,\n  };\n\n  public static defaultProps = { offset: 0 };\n\n  public state: StickyState = {\n    fixed: false,\n    deltaHeight: 0,\n    stopped: false,\n    relativeTop: 0,\n  };\n\n  private wrapper: Nullable<HTMLElement>;\n  private inner: Nullable<HTMLElement>;\n  private layoutSubscription: { remove: Nullable<() => void> } = { remove: null };\n  private reflowCounter = 0;\n  private setRootNode!: TSetRootNode;\n\n  public componentDidMount() {\n    this.reflow();\n\n    this.layoutSubscription = LayoutEvents.addListener(this.reflow);\n  }\n\n  public componentWillUnmount() {\n    if (this.layoutSubscription.remove) {\n      this.layoutSubscription.remove();\n    }\n  }\n\n  public componentDidUpdate(prevProps: StickyProps, prevState: StickyState) {\n    if (!shallowEqual(prevProps, this.props) || !shallowEqual(prevState, this.state)) {\n      if (this.reflowCounter < MAX_REFLOW_RETRIES) {\n        LayoutEvents.emit();\n        this.reflowCounter += 1;\n        return;\n      }\n    }\n    this.reflowCounter = 0;\n  }\n\n  public render() {\n    let { children } = this.props;\n    const { side, offset } = this.props;\n    const { fixed, stopped, relativeTop, deltaHeight, width, height, left } = this.state;\n    const innerStyle: React.CSSProperties = {};\n\n    if (fixed) {\n      if (stopped) {\n        innerStyle.top = relativeTop;\n        innerStyle[side === 'top' ? 'marginTop' : 'marginBottom'] = deltaHeight;\n      } else {\n        innerStyle.width = width;\n        innerStyle[side] = offset;\n        innerStyle.left = left;\n      }\n    }\n\n    if (isFunction(children)) {\n      children = children(fixed);\n    }\n\n    return (\n      <CommonWrapper rootNodeRef={this.setRootNode} {...this.props}>\n        <div ref={this.refWrapper} className={styles.wrapper()}>\n          <ZIndex\n            priority=\"Sticky\"\n            applyZIndex={fixed}\n            className={cx(styles.inner(), {\n              [styles.fixed()]: fixed && !stopped,\n              [styles.stopped()]: stopped,\n            })}\n            style={innerStyle}\n            wrapperRef={this.refInner}\n          >\n            <div className={styles.container()}>{children}</div>\n          </ZIndex>\n          {fixed && !stopped ? <div style={{ width, height }} /> : null}\n        </div>\n      </CommonWrapper>\n    );\n  }\n\n  private refWrapper = (ref: Nullable<HTMLElement>) => (this.wrapper = ref);\n\n  private refInner = (ref: Nullable<HTMLElement>) => (this.inner = ref);\n\n  /**\n   * Пересчитать габариты и позицию залипшего элемента\n   *\n   * @public\n   */\n  public reflow = () => {\n    const { documentElement } = document;\n\n    if (!documentElement) {\n      throw Error('There is no \"documentElement\" in document');\n    }\n\n    const windowHeight = window.innerHeight || documentElement.clientHeight;\n    if (!this.wrapper || !this.inner) {\n      return;\n    }\n    const { top, bottom, left } = this.wrapper.getBoundingClientRect();\n    const { width, height } = this.inner.getBoundingClientRect();\n    const { offset, getStop, side } = this.props;\n    const { fixed: prevFixed, height: prevHeight = height } = this.state;\n    const fixed = side === 'top' ? top < offset : bottom > windowHeight - offset;\n\n    this.setState({ fixed, left });\n\n    if (fixed && !prevFixed) {\n      this.setState({ width, height });\n    }\n\n    if (fixed) {\n      const stop = getStop && getStop();\n      if (stop) {\n        const deltaHeight = prevHeight - height;\n        const stopRect = stop.getBoundingClientRect();\n        const outerHeight = height + offset;\n        let stopped = false;\n        let relativeTop = 0;\n\n        if (side === 'top') {\n          stopped = stopRect.top - outerHeight < 0;\n          relativeTop = stopRect.top - prevHeight - top;\n        } else {\n          stopped = stopRect.bottom + outerHeight > windowHeight;\n          relativeTop = stopRect.bottom - top;\n        }\n\n        this.setState({ relativeTop, deltaHeight, stopped });\n      }\n    }\n  };\n}\n"]}

package/cjs/components/Sticky/Sticky.md

@@ -1,27 +1,27 @@
-```jsx harmony
-const style = {
-  padding: 10,
-  background: '#f99',
-};
-
-let stop = null;
-
-<div>
-  <Sticky side="top" getStop={() => stop}>
-    {fixed => (
-      <div style={style}>
-        Small loan of a million dollars
-        {fixed ? ' fixed' : <div>not fixed</div>}
-      </div>
-    )}
-  </Sticky>
-  Great
-  <div style={{ height: 1000 }} />
-  <div ref={el => (stop = el)} style={{ borderTop: '1px solid #000' }} />
-  <div style={{ height: 1000 }} />
-  <Sticky side="bottom" getStop={() => stop} offset={20}>
-    <div style={style}>Make America Great Again</div>
-  </Sticky>
-  <div style={{ height: 100 }} />
-</div>;
-```
+```jsx harmony
+const style = {
+  padding: 10,
+  background: '#f99',
+};
+
+let stop = null;
+
+<div>
+  <Sticky side="top" getStop={() => stop}>
+    {fixed => (
+      <div style={style}>
+        Small loan of a million dollars
+        {fixed ? ' fixed' : <div>not fixed</div>}
+      </div>
+    )}
+  </Sticky>
+  Great
+  <div style={{ height: 1000 }} />
+  <div ref={el => (stop = el)} style={{ borderTop: '1px solid #000' }} />
+  <div style={{ height: 1000 }} />
+  <Sticky side="bottom" getStop={() => stop} offset={20}>
+    <div style={style}>Make America Great Again</div>
+  </Sticky>
+  <div style={{ height: 100 }} />
+</div>;
+```

package/cjs/components/Sticky/Sticky.styles.d.ts

@@ -1,4 +1,5 @@
-export declare const jsStyles: {
+export declare const styles: {
+    wrapper(): string;
     inner(): string;
     fixed(): string;
     stopped(): string;

package/cjs/components/Sticky/Sticky.styles.js

@@ -1,30 +1,33 @@
-"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");function _templateObject4() {var data = (0, _taggedTemplateLiteralLoose2.default)(["\n      flex: auto;\n      width: 100%;\n    "]);_templateObject4 = function _templateObject4() {return data;};return data;}function _templateObject3() {var data = (0, _taggedTemplateLiteralLoose2.default)(["\n      position: relative;\n    "]);_templateObject3 = function _templateObject3() {return data;};return data;}function _templateObject2() {var data = (0, _taggedTemplateLiteralLoose2.default)(["\n      position: fixed;\n    "]);_templateObject2 = function _templateObject2() {return data;};return data;}function _templateObject() {var data = (0, _taggedTemplateLiteralLoose2.default)(["\n      display: flex;\n    "]);_templateObject = function _templateObject() {return data;};return data;}
+"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, _templateObject5;
 
-var styles = {
+var styles = (0, _Emotion.memoizeStyle)({
+  wrapper: function wrapper() {
+    return (0, _Emotion.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteralLoose2.default)(["\n      display: flex;\n    "])));
+
+
+  },
   inner: function inner() {
-    return (0, _Emotion.css)(_templateObject());
+    return (0, _Emotion.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteralLoose2.default)(["\n      display: flex;\n      width: 100%;\n    "])));
+
 
 
   },
 
   fixed: function fixed() {
-    return (0, _Emotion.css)(_templateObject2());
+    return (0, _Emotion.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteralLoose2.default)(["\n      position: fixed;\n    "])));
 
 
   },
 
   stopped: function stopped() {
-    return (0, _Emotion.css)(_templateObject3());
+    return (0, _Emotion.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteralLoose2.default)(["\n      position: relative;\n    "])));
 
 
   },
 
   container: function container() {
-    return (0, _Emotion.css)(_templateObject4());
-
-
+    return (0, _Emotion.css)(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteralLoose2.default)(["\n      flex: auto;\n      width: 100%;\n    "])));
 
-  } };
 
 
-var jsStyles = (0, _Emotion.memoizeStyle)(styles);exports.jsStyles = jsStyles;
+  } });exports.styles = styles;

package/cjs/components/Sticky/Sticky.styles.js.map

@@ -1 +1 @@
-{"version":3,"sources":["Sticky.styles.ts"],"names":["styles","inner","css","fixed","stopped","container","jsStyles"],"mappings":"8QAAA,oD;;AAEA,IAAMA,MAAM,GAAG;AACbC,EAAAA,KADa,mBACL;AACN,eAAOC,YAAP;;;AAGD,GALY;;AAObC,EAAAA,KAPa,mBAOL;AACN,eAAOD,YAAP;;;AAGD,GAXY;;AAabE,EAAAA,OAba,qBAaH;AACR,eAAOF,YAAP;;;AAGD,GAjBY;;AAmBbG,EAAAA,SAnBa,uBAmBD;AACV,eAAOH,YAAP;;;;AAID,GAxBY,EAAf;;;AA2BO,IAAMI,QAAQ,GAAG,2BAAaN,MAAb,CAAjB,C","sourcesContent":["import { css, memoizeStyle } from '../../lib/theming/Emotion';\r\n\r\nconst styles = {\r\n  inner() {\r\n    return css`\r\n      display: flex;\r\n    `;\r\n  },\r\n\r\n  fixed() {\r\n    return css`\r\n      position: fixed;\r\n    `;\r\n  },\r\n\r\n  stopped() {\r\n    return css`\r\n      position: relative;\r\n    `;\r\n  },\r\n\r\n  container() {\r\n    return css`\r\n      flex: auto;\r\n      width: 100%;\r\n    `;\r\n  },\r\n};\r\n\r\nexport const jsStyles = memoizeStyle(styles);\r\n"]}
+{"version":3,"sources":["Sticky.styles.ts"],"names":["styles","wrapper","css","inner","fixed","stopped","container"],"mappings":"4QAAA,oD;;AAEO,IAAMA,MAAM,GAAG,2BAAa;AACjCC,EAAAA,OADiC,qBACvB;AACR,eAAOC,YAAP;;;AAGD,GALgC;AAMjCC,EAAAA,KANiC,mBAMzB;AACN,eAAOD,YAAP;;;;AAID,GAXgC;;AAajCE,EAAAA,KAbiC,mBAazB;AACN,eAAOF,YAAP;;;AAGD,GAjBgC;;AAmBjCG,EAAAA,OAnBiC,qBAmBvB;AACR,eAAOH,YAAP;;;AAGD,GAvBgC;;AAyBjCI,EAAAA,SAzBiC,uBAyBrB;AACV,eAAOJ,YAAP;;;;AAID,GA9BgC,EAAb,CAAf,C","sourcesContent":["import { css, memoizeStyle } from '../../lib/theming/Emotion';\n\nexport const styles = memoizeStyle({\n  wrapper() {\n    return css`\n      display: flex;\n    `;\n  },\n  inner() {\n    return css`\n      display: flex;\n      width: 100%;\n    `;\n  },\n\n  fixed() {\n    return css`\n      position: fixed;\n    `;\n  },\n\n  stopped() {\n    return css`\n      position: relative;\n    `;\n  },\n\n  container() {\n    return css`\n      flex: auto;\n      width: 100%;\n    `;\n  },\n});\n"]}

package/cjs/components/Sticky/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["index.tsx"],"names":[],"mappings":"uCAAA","sourcesContent":["export * from './Sticky';\r\n"]}
+{"version":3,"sources":["index.tsx"],"names":[],"mappings":"uCAAA","sourcesContent":["export * from './Sticky';\n"]}

package/cjs/components/Switcher/Switcher.d.ts

@@ -2,8 +2,9 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { ButtonSize } from '../Button';
 import { Nullable } from '../../typings/utility-types';
+import { CommonProps } from '../../internal/CommonWrapper';
 export declare type SwitcherSize = ButtonSize;
-export interface SwitcherProps {
+export interface SwitcherProps extends CommonProps {
     /**
      * Список строк или список элементов типа `{ label: string, value: string }`
      */
@@ -38,6 +39,7 @@ export declare class Switcher extends React.Component<SwitcherProps, SwitcherSta
     };
     state: SwitcherState;
     private theme;
+    private setRootNode;
     render(): JSX.Element;
     private renderMain;
     private selectItem;

package/cjs/components/Switcher/Switcher.js

@@ -1,6 +1,5 @@
 "use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");exports.__esModule = true;exports.Switcher = void 0;var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));var _inheritsLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/inheritsLoose"));var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
-var _classnames = _interopRequireDefault(require("classnames"));
 
 var _identifiers = require("../../lib/events/keyboard/identifiers");
 var _Group = require("../Group");
@@ -8,9 +7,12 @@ var _Button = require("../Button");
 
 var _ThemeContext = require("../../lib/theming/ThemeContext");
 
+var _CommonWrapper = require("../../internal/CommonWrapper");
+var _Emotion = require("../../lib/theming/Emotion");
+var _rootNode = require("../../lib/rootNode");
 
 var _Switcher = require("./Switcher.styles");
-var _switcherTheme = require("./switcherTheme");var
+var _switcherTheme = require("./switcherTheme");var _class, _class2, _temp;var
 
 
 
@@ -43,7 +45,8 @@ var _switcherTheme = require("./switcherTheme");var
 
 
 
-Switcher = /*#__PURE__*/function (_React$Component) {(0, _inheritsLoose2.default)(Switcher, _React$Component);function Switcher() {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.
+
+Switcher = (0, _rootNode.rootNode)(_class = (_temp = _class2 = /*#__PURE__*/function (_React$Component) {(0, _inheritsLoose2.default)(Switcher, _React$Component);function Switcher() {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.
 
 
 
@@ -68,6 +71,9 @@ Switcher = /*#__PURE__*/function (_React$Component) {(0, _inheritsLoose2.default
 
 
     theme = void 0;_this.
+    setRootNode = void 0;_this.
+
+
 
 
 
@@ -207,11 +213,11 @@ Switcher = /*#__PURE__*/function (_React$Component) {(0, _inheritsLoose2.default
     getLabelSizeClassName = function () {
       switch (_this.props.size) {
         case 'large':
-          return _Switcher.jsStyles.labelLarge(_this.theme);
+          return _Switcher.styles.labelLarge(_this.theme);
         case 'medium':
-          return _Switcher.jsStyles.labelMedium(_this.theme);
+          return _Switcher.styles.labelMedium(_this.theme);
         case 'small':
         default:
-          return _Switcher.jsStyles.labelSmall(_this.theme);}
+          return _Switcher.styles.labelSmall(_this.theme);}
 
-    };return _this;}var _proto = Switcher.prototype;_proto.render = function render() {var _this2 = this;return /*#__PURE__*/_react.default.createElement(_ThemeContext.ThemeContext.Consumer, null, function (theme) {_this2.theme = (0, _switcherTheme.getSwitcherTheme)(theme);return /*#__PURE__*/_react.default.createElement(_ThemeContext.ThemeContext.Provider, { value: _this2.theme }, _this2.renderMain());});};_proto.renderMain = function renderMain() {var _cn;var listClassName = (0, _classnames.default)((_cn = {}, _cn[_Switcher.jsStyles.error(this.theme)] = !!this.props.error, _cn));var inputProps = { type: 'checkbox', onKeyDown: this.handleKey, onFocus: this._handleFocus, onBlur: this._handleBlur, className: _Switcher.jsStyles.input() };var lableClassName = (0, _classnames.default)(_Switcher.jsStyles.label(), this.getLabelSizeClassName());return /*#__PURE__*/_react.default.createElement("div", null, this.props.label ? /*#__PURE__*/_react.default.createElement("div", { className: lableClassName }, this.props.label) : null, /*#__PURE__*/_react.default.createElement("div", { className: _Switcher.jsStyles.wrap() }, /*#__PURE__*/_react.default.createElement("input", inputProps), /*#__PURE__*/_react.default.createElement("div", { className: listClassName }, /*#__PURE__*/_react.default.createElement(_Group.Group, null, this._renderItems()))));};return Switcher;}(_react.default.Component);exports.Switcher = Switcher;Switcher.__KONTUR_REACT_UI__ = 'Switcher';Switcher.propTypes = { error: _propTypes.default.bool, disabled: _propTypes.default.bool, items: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.string), _propTypes.default.arrayOf(_propTypes.default.shape({ label: _propTypes.default.string, value: _propTypes.default.string }))]).isRequired, label: _propTypes.default.string, value: _propTypes.default.string, onValueChange: _propTypes.default.func };
+    };return _this;}var _proto = Switcher.prototype;_proto.render = function render() {var _this2 = this;return /*#__PURE__*/_react.default.createElement(_ThemeContext.ThemeContext.Consumer, null, function (theme) {_this2.theme = (0, _switcherTheme.getSwitcherTheme)(theme);return /*#__PURE__*/_react.default.createElement(_ThemeContext.ThemeContext.Provider, { value: _this2.theme }, _this2.renderMain());});};_proto.renderMain = function renderMain() {var _cx;var listClassName = (0, _Emotion.cx)((_cx = {}, _cx[_Switcher.styles.error(this.theme)] = !!this.props.error, _cx));var inputProps = { type: 'checkbox', onKeyDown: this.handleKey, onFocus: this._handleFocus, onBlur: this._handleBlur, className: _Switcher.styles.input() };var lableClassName = (0, _Emotion.cx)(_Switcher.styles.label(this.theme), this.getLabelSizeClassName());return /*#__PURE__*/_react.default.createElement(_CommonWrapper.CommonWrapper, (0, _extends2.default)({ rootNodeRef: this.setRootNode }, this.props), /*#__PURE__*/_react.default.createElement("div", null, this.props.label ? /*#__PURE__*/_react.default.createElement("div", { className: lableClassName }, this.props.label) : null, /*#__PURE__*/_react.default.createElement("div", { className: _Switcher.styles.wrap() }, /*#__PURE__*/_react.default.createElement("input", inputProps), /*#__PURE__*/_react.default.createElement("div", { className: listClassName }, /*#__PURE__*/_react.default.createElement(_Group.Group, null, this._renderItems())))));};return Switcher;}(_react.default.Component), _class2.__KONTUR_REACT_UI__ = 'Switcher', _class2.propTypes = { error: _propTypes.default.bool, disabled: _propTypes.default.bool, items: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.string), _propTypes.default.arrayOf(_propTypes.default.shape({ label: _propTypes.default.string, value: _propTypes.default.string }))]).isRequired, label: _propTypes.default.string, value: _propTypes.default.string, onValueChange: _propTypes.default.func }, _temp)) || _class;exports.Switcher = Switcher;

package/cjs/components/Switcher/Switcher.js.map

@@ -1 +1 @@
-{"version":3,"sources":["Switcher.tsx"],"names":["Switcher","state","focusedIndex","theme","selectItem","value","props","onValueChange","_extractPropsFromItem","item","label","_extractValuesFromItems","items","map","move","step","selectedIndex","length","_focus","index","setState","handleKey","e","preventDefault","_handleFocus","currentIndex","indexOf","_handleBlur","_renderItems","i","buttonProps","checked","visuallyFocused","onClick","disableFocus","size","disabled","getLabelSizeClassName","jsStyles","labelLarge","labelMedium","labelSmall","render","renderMain","listClassName","error","inputProps","type","onKeyDown","onFocus","onBlur","className","input","lableClassName","wrap","React","Component","__KONTUR_REACT_UI__","propTypes","PropTypes","bool","oneOfType","arrayOf","string","shape","isRequired","func"],"mappings":"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","sourcesContent":["import React from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport cn from 'classnames';\r\n\r\nimport { isKeyArrowHorizontal, isKeyArrowLeft, isKeyEnter } from '../../lib/events/keyboard/identifiers';\r\nimport { Group } from '../Group';\r\nimport { Button, ButtonSize } from '../Button';\r\nimport { Nullable } from '../../typings/utility-types';\r\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\r\nimport { Theme } from '../../lib/theming/Theme';\r\n\r\nimport { jsStyles } from './Switcher.styles';\r\nimport { getSwitcherTheme } from './switcherTheme';\r\n\r\nexport type SwitcherSize = ButtonSize;\r\n\r\nexport interface SwitcherProps {\r\n  /**\r\n   * Список строк или список элементов типа `{ label: string, value: string }`\r\n   */\r\n  items: Array<string | SwitcherItem>;\r\n\r\n  value?: string;\r\n\r\n  onValueChange?: (value: string) => void;\r\n\r\n  label?: string;\r\n\r\n  error?: boolean;\r\n\r\n  /** Размер */\r\n  size?: SwitcherSize;\r\n\r\n  disabled?: boolean;\r\n}\r\n\r\nexport interface SwitcherState {\r\n  focusedIndex: Nullable<number>;\r\n}\r\n\r\ninterface SwitcherItem {\r\n  label: string;\r\n  value: string;\r\n}\r\n\r\nexport class Switcher extends React.Component<SwitcherProps, SwitcherState> {\r\n  public static __KONTUR_REACT_UI__ = 'Switcher';\r\n\r\n  public static propTypes = {\r\n    error: PropTypes.bool,\r\n    disabled: PropTypes.bool,\r\n    items: PropTypes.oneOfType([\r\n      PropTypes.arrayOf(PropTypes.string),\r\n      PropTypes.arrayOf(\r\n        PropTypes.shape({\r\n          label: PropTypes.string,\r\n          value: PropTypes.string,\r\n        }),\r\n      ),\r\n    ]).isRequired,\r\n    label: PropTypes.string,\r\n    value: PropTypes.string,\r\n    onValueChange: PropTypes.func,\r\n  };\r\n\r\n  public state: SwitcherState = {\r\n    focusedIndex: null,\r\n  };\r\n\r\n  private theme!: Theme;\r\n\r\n  public render() {\r\n    return (\r\n      <ThemeContext.Consumer>\r\n        {theme => {\r\n          this.theme = getSwitcherTheme(theme);\r\n          return <ThemeContext.Provider value={this.theme}>{this.renderMain()}</ThemeContext.Provider>;\r\n        }}\r\n      </ThemeContext.Consumer>\r\n    );\r\n  }\r\n\r\n  private renderMain() {\r\n    const listClassName = cn({\r\n      [jsStyles.error(this.theme)]: !!this.props.error,\r\n    });\r\n\r\n    const inputProps = {\r\n      type: 'checkbox',\r\n      onKeyDown: this.handleKey,\r\n      onFocus: this._handleFocus,\r\n      onBlur: this._handleBlur,\r\n      className: jsStyles.input(),\r\n    };\r\n\r\n    const lableClassName = cn(jsStyles.label(), this.getLabelSizeClassName());\r\n\r\n    return (\r\n      <div>\r\n        {this.props.label ? <div className={lableClassName}>{this.props.label}</div> : null}\r\n        <div className={jsStyles.wrap()}>\r\n          <input {...inputProps} />\r\n          <div className={listClassName}>\r\n            <Group>{this._renderItems()}</Group>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    );\r\n  }\r\n\r\n  private selectItem = (value: string) => {\r\n    if (this.props.onValueChange) {\r\n      this.props.onValueChange(value);\r\n    }\r\n  };\r\n\r\n  private _extractPropsFromItem = (item: string | SwitcherItem): SwitcherItem => {\r\n    return typeof item === 'object' ? item : { label: item, value: item };\r\n  };\r\n\r\n  private _extractValuesFromItems = (): string[] => {\r\n    return this.props.items.map(item => {\r\n      const { value } = this._extractPropsFromItem(item);\r\n      return value;\r\n    });\r\n  };\r\n\r\n  private move = (step: number) => {\r\n    let selectedIndex = this.state.focusedIndex;\r\n\r\n    if (typeof selectedIndex !== 'number') {\r\n      return;\r\n    }\r\n\r\n    const items = this._extractValuesFromItems();\r\n\r\n    selectedIndex += step;\r\n\r\n    if (selectedIndex < 0) {\r\n      selectedIndex = items.length - 1;\r\n    } else if (selectedIndex >= items.length) {\r\n      selectedIndex = 0;\r\n    }\r\n\r\n    this._focus(selectedIndex);\r\n  };\r\n\r\n  private _focus = (index: number) => {\r\n    this.setState({ focusedIndex: index });\r\n  };\r\n\r\n  private handleKey = (e: React.KeyboardEvent<HTMLInputElement>) => {\r\n    const focusedIndex = this.state.focusedIndex;\r\n    if (typeof focusedIndex !== 'number') {\r\n      return;\r\n    }\r\n\r\n    if (isKeyEnter(e)) {\r\n      if (this.props.onValueChange) {\r\n        const { value } = this._extractPropsFromItem(this.props.items[focusedIndex]);\r\n        this.selectItem(value);\r\n      }\r\n      return;\r\n    }\r\n\r\n    if (isKeyArrowHorizontal(e)) {\r\n      e.preventDefault();\r\n      this.move(isKeyArrowLeft(e) ? -1 : 1);\r\n    }\r\n  };\r\n\r\n  private _handleFocus = () => {\r\n    const { value } = this.props;\r\n\r\n    const items = this._extractValuesFromItems();\r\n    const currentIndex = [...items].indexOf(value as string);\r\n    const index = currentIndex > -1 ? currentIndex : 0;\r\n\r\n    this.setState({ focusedIndex: index });\r\n  };\r\n\r\n  private _handleBlur = () => {\r\n    this.setState({ focusedIndex: null });\r\n  };\r\n\r\n  private _renderItems = () => {\r\n    return this.props.items.map((item, i) => {\r\n      const { label, value } = this._extractPropsFromItem(item);\r\n      const buttonProps = {\r\n        checked: this.props.value === value,\r\n        visuallyFocused: this.state.focusedIndex === i,\r\n        onClick: () => {\r\n          this.selectItem(value);\r\n        },\r\n        disableFocus: true,\r\n        size: this.props.size,\r\n        disabled: this.props.disabled,\r\n      };\r\n      return (\r\n        <Button key={value} {...buttonProps}>\r\n          {label}\r\n        </Button>\r\n      );\r\n    });\r\n  };\r\n\r\n  private getLabelSizeClassName = (): string => {\r\n    switch (this.props.size) {\r\n      case 'large':\r\n        return jsStyles.labelLarge(this.theme);\r\n      case 'medium':\r\n        return jsStyles.labelMedium(this.theme);\r\n      case 'small':\r\n      default:\r\n        return jsStyles.labelSmall(this.theme);\r\n    }\r\n  };\r\n}\r\n"]}
+{"version":3,"sources":["Switcher.tsx"],"names":["Switcher","rootNode","state","focusedIndex","theme","setRootNode","selectItem","value","props","onValueChange","_extractPropsFromItem","item","label","_extractValuesFromItems","items","map","move","step","selectedIndex","length","_focus","index","setState","handleKey","e","preventDefault","_handleFocus","currentIndex","indexOf","_handleBlur","_renderItems","i","buttonProps","checked","visuallyFocused","onClick","disableFocus","size","disabled","getLabelSizeClassName","styles","labelLarge","labelMedium","labelSmall","render","renderMain","listClassName","error","inputProps","type","onKeyDown","onFocus","onBlur","className","input","lableClassName","wrap","React","Component","__KONTUR_REACT_UI__","propTypes","PropTypes","bool","oneOfType","arrayOf","string","shape","isRequired","func"],"mappings":"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","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\n\nimport { isKeyArrowHorizontal, isKeyArrowLeft, isKeyEnter } from '../../lib/events/keyboard/identifiers';\nimport { Group } from '../Group';\nimport { Button, ButtonSize } from '../Button';\nimport { Nullable } from '../../typings/utility-types';\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\nimport { Theme } from '../../lib/theming/Theme';\nimport { CommonProps, CommonWrapper } from '../../internal/CommonWrapper';\nimport { cx } from '../../lib/theming/Emotion';\nimport { rootNode, TSetRootNode } from '../../lib/rootNode';\n\nimport { styles } from './Switcher.styles';\nimport { getSwitcherTheme } from './switcherTheme';\n\nexport type SwitcherSize = ButtonSize;\n\nexport interface SwitcherProps extends CommonProps {\n  /**\n   * Список строк или список элементов типа `{ label: string, value: string }`\n   */\n  items: Array<string | SwitcherItem>;\n\n  value?: string;\n\n  onValueChange?: (value: string) => void;\n\n  label?: string;\n\n  error?: boolean;\n\n  /** Размер */\n  size?: SwitcherSize;\n\n  disabled?: boolean;\n}\n\nexport interface SwitcherState {\n  focusedIndex: Nullable<number>;\n}\n\ninterface SwitcherItem {\n  label: string;\n  value: string;\n}\n\n@rootNode\nexport class Switcher extends React.Component<SwitcherProps, SwitcherState> {\n  public static __KONTUR_REACT_UI__ = 'Switcher';\n\n  public static propTypes = {\n    error: PropTypes.bool,\n    disabled: PropTypes.bool,\n    items: PropTypes.oneOfType([\n      PropTypes.arrayOf(PropTypes.string),\n      PropTypes.arrayOf(\n        PropTypes.shape({\n          label: PropTypes.string,\n          value: PropTypes.string,\n        }),\n      ),\n    ]).isRequired,\n    label: PropTypes.string,\n    value: PropTypes.string,\n    onValueChange: PropTypes.func,\n  };\n\n  public state: SwitcherState = {\n    focusedIndex: null,\n  };\n\n  private theme!: Theme;\n  private setRootNode!: TSetRootNode;\n\n  public render() {\n    return (\n      <ThemeContext.Consumer>\n        {(theme) => {\n          this.theme = getSwitcherTheme(theme);\n          return <ThemeContext.Provider value={this.theme}>{this.renderMain()}</ThemeContext.Provider>;\n        }}\n      </ThemeContext.Consumer>\n    );\n  }\n\n  private renderMain() {\n    const listClassName = cx({\n      [styles.error(this.theme)]: !!this.props.error,\n    });\n\n    const inputProps = {\n      type: 'checkbox',\n      onKeyDown: this.handleKey,\n      onFocus: this._handleFocus,\n      onBlur: this._handleBlur,\n      className: styles.input(),\n    };\n\n    const lableClassName = cx(styles.label(this.theme), this.getLabelSizeClassName());\n\n    return (\n      <CommonWrapper rootNodeRef={this.setRootNode} {...this.props}>\n        <div>\n          {this.props.label ? <div className={lableClassName}>{this.props.label}</div> : null}\n          <div className={styles.wrap()}>\n            <input {...inputProps} />\n            <div className={listClassName}>\n              <Group>{this._renderItems()}</Group>\n            </div>\n          </div>\n        </div>\n      </CommonWrapper>\n    );\n  }\n\n  private selectItem = (value: string) => {\n    if (this.props.onValueChange) {\n      this.props.onValueChange(value);\n    }\n  };\n\n  private _extractPropsFromItem = (item: string | SwitcherItem): SwitcherItem => {\n    return typeof item === 'object' ? item : { label: item, value: item };\n  };\n\n  private _extractValuesFromItems = (): string[] => {\n    return this.props.items.map((item) => {\n      const { value } = this._extractPropsFromItem(item);\n      return value;\n    });\n  };\n\n  private move = (step: number) => {\n    let selectedIndex = this.state.focusedIndex;\n\n    if (typeof selectedIndex !== 'number') {\n      return;\n    }\n\n    const items = this._extractValuesFromItems();\n\n    selectedIndex += step;\n\n    if (selectedIndex < 0) {\n      selectedIndex = items.length - 1;\n    } else if (selectedIndex >= items.length) {\n      selectedIndex = 0;\n    }\n\n    this._focus(selectedIndex);\n  };\n\n  private _focus = (index: number) => {\n    this.setState({ focusedIndex: index });\n  };\n\n  private handleKey = (e: React.KeyboardEvent<HTMLInputElement>) => {\n    const focusedIndex = this.state.focusedIndex;\n    if (typeof focusedIndex !== 'number') {\n      return;\n    }\n\n    if (isKeyEnter(e)) {\n      if (this.props.onValueChange) {\n        const { value } = this._extractPropsFromItem(this.props.items[focusedIndex]);\n        this.selectItem(value);\n      }\n      return;\n    }\n\n    if (isKeyArrowHorizontal(e)) {\n      e.preventDefault();\n      this.move(isKeyArrowLeft(e) ? -1 : 1);\n    }\n  };\n\n  private _handleFocus = () => {\n    const { value } = this.props;\n\n    const items = this._extractValuesFromItems();\n    const currentIndex = [...items].indexOf(value as string);\n    const index = currentIndex > -1 ? currentIndex : 0;\n\n    this.setState({ focusedIndex: index });\n  };\n\n  private _handleBlur = () => {\n    this.setState({ focusedIndex: null });\n  };\n\n  private _renderItems = () => {\n    return this.props.items.map((item, i) => {\n      const { label, value } = this._extractPropsFromItem(item);\n      const buttonProps = {\n        checked: this.props.value === value,\n        visuallyFocused: this.state.focusedIndex === i,\n        onClick: () => {\n          this.selectItem(value);\n        },\n        disableFocus: true,\n        size: this.props.size,\n        disabled: this.props.disabled,\n      };\n      return (\n        <Button key={value} {...buttonProps}>\n          {label}\n        </Button>\n      );\n    });\n  };\n\n  private getLabelSizeClassName = (): string => {\n    switch (this.props.size) {\n      case 'large':\n        return styles.labelLarge(this.theme);\n      case 'medium':\n        return styles.labelMedium(this.theme);\n      case 'small':\n      default:\n        return styles.labelSmall(this.theme);\n    }\n  };\n}\n"]}

package/cjs/components/Switcher/Switcher.md

@@ -1,10 +1,10 @@
-```jsx harmony
-let intialState = {};
-
-<Switcher
-  label="Switch the switcher"
-  items={['One', 'Two', 'Three']}
-  value={state.value}
-  onValueChange={value => setState({ value })}
-/>;
-```
+```jsx harmony
+const [value, setValue] = React.useState();
+
+<Switcher
+  label="Switch the switcher"
+  items={['One', 'Two', 'Three']}
+  value={value}
+  onValueChange={setValue}
+/>;
+```

package/cjs/components/Switcher/Switcher.styles.d.ts

@@ -1,9 +1,10 @@
-export declare const jsStyles: {
+import { Theme } from '../../lib/theming/Theme';
+export declare const styles: {
     wrap(): string;
     input(): string;
-    label(): string;
-    labelSmall(t: Readonly<typeof import("../../internal/themes/DefaultTheme").DefaultTheme>): string;
-    labelMedium(t: Readonly<typeof import("../../internal/themes/DefaultTheme").DefaultTheme>): string;
-    labelLarge(t: Readonly<typeof import("../../internal/themes/DefaultTheme").DefaultTheme>): string;
-    error(t: Readonly<typeof import("../../internal/themes/DefaultTheme").DefaultTheme>): string;
+    label(t: Theme): string;
+    labelSmall(t: Theme): string;
+    labelMedium(t: Theme): string;
+    labelLarge(t: Theme): string;
+    error(t: Theme): string;
 };

package/cjs/components/Switcher/Switcher.styles.js

@@ -1,16 +1,16 @@
-"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");function _templateObject7() {var data = (0, _taggedTemplateLiteralLoose2.default)(["\n      border-radius: 2px;\n      box-shadow: 0 0 0 ", " ", ";\n    "]);_templateObject7 = function _templateObject7() {return data;};return data;}function _templateObject6() {var data = (0, _taggedTemplateLiteralLoose2.default)(["\n      margin-right: ", ";\n      font-size: ", ";\n      line-height: ", ";\n    "]);_templateObject6 = function _templateObject6() {return data;};return data;}function _templateObject5() {var data = (0, _taggedTemplateLiteralLoose2.default)(["\n      margin-right: ", ";\n      font-size: ", ";\n      line-height: ", ";\n    "]);_templateObject5 = function _templateObject5() {return data;};return data;}function _templateObject4() {var data = (0, _taggedTemplateLiteralLoose2.default)(["\n      margin-right: ", ";\n      font-size: ", ";\n      line-height: ", ";\n    "]);_templateObject4 = function _templateObject4() {return data;};return data;}function _templateObject3() {var data = (0, _taggedTemplateLiteralLoose2.default)(["\n      vertical-align: middle;\n      display: inline-block;\n    "]);_templateObject3 = function _templateObject3() {return data;};return data;}function _templateObject2() {var data = (0, _taggedTemplateLiteralLoose2.default)(["\n      height: 0;\n      opacity: 0;\n      position: absolute;\n      width: 0;\n    "]);_templateObject2 = function _templateObject2() {return data;};return data;}function _templateObject() {var data = (0, _taggedTemplateLiteralLoose2.default)(["\n      display: inline-block;\n      vertical-align: middle;\n    "]);_templateObject = function _templateObject() {return data;};return data;}
+"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, _templateObject5, _templateObject6, _templateObject7;
 
 
-var styles = {
+var styles = (0, _Emotion.memoizeStyle)({
   wrap: function wrap() {
-    return (0, _Emotion.css)(_templateObject());
+    return (0, _Emotion.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteralLoose2.default)(["\n      display: inline-block;\n      vertical-align: middle;\n    "])));
 
 
 
   },
 
   input: function input() {
-    return (0, _Emotion.css)(_templateObject2());
+    return (0, _Emotion.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteralLoose2.default)(["\n      height: 0;\n      opacity: 0;\n      position: absolute;\n      width: 0;\n    "])));
 
 
 
@@ -18,15 +18,16 @@ var styles = {
 
   },
 
-  label: function label() {
-    return (0, _Emotion.css)(_templateObject3());
+  label: function label(t) {
+    return (0, _Emotion.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteralLoose2.default)(["\n      color: ", ";\n      vertical-align: middle;\n      display: inline-block;\n    "])),
+    t.switcherTextColor);
 
 
 
   },
 
   labelSmall: function labelSmall(t) {
-    return (0, _Emotion.css)(_templateObject4(),
+    return (0, _Emotion.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteralLoose2.default)(["\n      margin-right: ", ";\n      font-size: ", ";\n      line-height: ", ";\n    "])),
     t.switcherLabelGapSmall,
     t.switcherLabelFontSizeSmall,
     t.switcherLabelLineHeightSmall);
@@ -34,7 +35,7 @@ var styles = {
   },
 
   labelMedium: function labelMedium(t) {
-    return (0, _Emotion.css)(_templateObject5(),
+    return (0, _Emotion.css)(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteralLoose2.default)(["\n      margin-right: ", ";\n      font-size: ", ";\n      line-height: ", ";\n    "])),
     t.switcherLabelGapMedium,
     t.switcherLabelFontSizeMedium,
     t.switcherLabelLineHeightMedium);
@@ -42,7 +43,7 @@ var styles = {
   },
 
   labelLarge: function labelLarge(t) {
-    return (0, _Emotion.css)(_templateObject6(),
+    return (0, _Emotion.css)(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteralLoose2.default)(["\n      margin-right: ", ";\n      font-size: ", ";\n      line-height: ", ";\n    "])),
     t.switcherLabelGapLarge,
     t.switcherLabelFontSizeLarge,
     t.switcherLabelLineHeightLarge);
@@ -50,11 +51,10 @@ var styles = {
   },
 
   error: function error(t) {
-    return (0, _Emotion.css)(_templateObject7(),
+    var insideWidth = parseInt(t.btnBorderWidth);
+    var outsideWidth = parseInt(t.switcherOutlineWidth) - insideWidth + "px";
+    return (0, _Emotion.css)(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteralLoose2.default)(["\n      border-radius: 2px;\n      box-shadow: inset 0 0 0 ", "px ", ", 0 0 0 ", " ", ";\n    "])),
 
-    t.switcherOutlineWidth, t.borderColorError);
+    insideWidth, t.borderColorError, outsideWidth, t.borderColorError);
 
-  } };
-
-
-var jsStyles = (0, _Emotion.memoizeStyle)(styles);exports.jsStyles = jsStyles;
+  } });exports.styles = styles;

package/cjs/components/Switcher/Switcher.styles.js.map

@@ -1 +1 @@
-{"version":3,"sources":["Switcher.styles.ts"],"names":["styles","wrap","css","input","label","labelSmall","t","switcherLabelGapSmall","switcherLabelFontSizeSmall","switcherLabelLineHeightSmall","labelMedium","switcherLabelGapMedium","switcherLabelFontSizeMedium","switcherLabelLineHeightMedium","labelLarge","switcherLabelGapLarge","switcherLabelFontSizeLarge","switcherLabelLineHeightLarge","error","switcherOutlineWidth","borderColorError","jsStyles"],"mappings":"8QAAA,oD;;;AAGA,IAAMA,MAAM,GAAG;AACbC,EAAAA,IADa,kBACN;AACL,eAAOC,YAAP;;;;AAID,GANY;;AAQbC,EAAAA,KARa,mBAQL;AACN,eAAOD,YAAP;;;;;;AAMD,GAfY;;AAiBbE,EAAAA,KAjBa,mBAiBL;AACN,eAAOF,YAAP;;;;AAID,GAtBY;;AAwBbG,EAAAA,UAxBa,sBAwBFC,CAxBE,EAwBQ;AACnB,eAAOJ,YAAP;AACkBI,IAAAA,CAAC,CAACC,qBADpB;AAEeD,IAAAA,CAAC,CAACE,0BAFjB;AAGiBF,IAAAA,CAAC,CAACG,4BAHnB;;AAKD,GA9BY;;AAgCbC,EAAAA,WAhCa,uBAgCDJ,CAhCC,EAgCS;AACpB,eAAOJ,YAAP;AACkBI,IAAAA,CAAC,CAACK,sBADpB;AAEeL,IAAAA,CAAC,CAACM,2BAFjB;AAGiBN,IAAAA,CAAC,CAACO,6BAHnB;;AAKD,GAtCY;;AAwCbC,EAAAA,UAxCa,sBAwCFR,CAxCE,EAwCQ;AACnB,eAAOJ,YAAP;AACkBI,IAAAA,CAAC,CAACS,qBADpB;AAEeT,IAAAA,CAAC,CAACU,0BAFjB;AAGiBV,IAAAA,CAAC,CAACW,4BAHnB;;AAKD,GA9CY;;AAgDbC,EAAAA,KAhDa,iBAgDPZ,CAhDO,EAgDG;AACd,eAAOJ,YAAP;;AAEsBI,IAAAA,CAAC,CAACa,oBAFxB,EAEgDb,CAAC,CAACc,gBAFlD;;AAID,GArDY,EAAf;;;AAwDO,IAAMC,QAAQ,GAAG,2BAAarB,MAAb,CAAjB,C","sourcesContent":["import { css, memoizeStyle } from '../../lib/theming/Emotion';\r\nimport { Theme } from '../../lib/theming/Theme';\r\n\r\nconst styles = {\r\n  wrap() {\r\n    return css`\r\n      display: inline-block;\r\n      vertical-align: middle;\r\n    `;\r\n  },\r\n\r\n  input() {\r\n    return css`\r\n      height: 0;\r\n      opacity: 0;\r\n      position: absolute;\r\n      width: 0;\r\n    `;\r\n  },\r\n\r\n  label() {\r\n    return css`\r\n      vertical-align: middle;\r\n      display: inline-block;\r\n    `;\r\n  },\r\n\r\n  labelSmall(t: Theme) {\r\n    return css`\r\n      margin-right: ${t.switcherLabelGapSmall};\r\n      font-size: ${t.switcherLabelFontSizeSmall};\r\n      line-height: ${t.switcherLabelLineHeightSmall};\r\n    `;\r\n  },\r\n\r\n  labelMedium(t: Theme) {\r\n    return css`\r\n      margin-right: ${t.switcherLabelGapMedium};\r\n      font-size: ${t.switcherLabelFontSizeMedium};\r\n      line-height: ${t.switcherLabelLineHeightMedium};\r\n    `;\r\n  },\r\n\r\n  labelLarge(t: Theme) {\r\n    return css`\r\n      margin-right: ${t.switcherLabelGapLarge};\r\n      font-size: ${t.switcherLabelFontSizeLarge};\r\n      line-height: ${t.switcherLabelLineHeightLarge};\r\n    `;\r\n  },\r\n\r\n  error(t: Theme) {\r\n    return css`\r\n      border-radius: 2px;\r\n      box-shadow: 0 0 0 ${t.switcherOutlineWidth} ${t.borderColorError};\r\n    `;\r\n  },\r\n};\r\n\r\nexport const jsStyles = memoizeStyle(styles);\r\n"]}
+{"version":3,"sources":["Switcher.styles.ts"],"names":["styles","wrap","css","input","label","t","switcherTextColor","labelSmall","switcherLabelGapSmall","switcherLabelFontSizeSmall","switcherLabelLineHeightSmall","labelMedium","switcherLabelGapMedium","switcherLabelFontSizeMedium","switcherLabelLineHeightMedium","labelLarge","switcherLabelGapLarge","switcherLabelFontSizeLarge","switcherLabelLineHeightLarge","error","insideWidth","parseInt","btnBorderWidth","outsideWidth","switcherOutlineWidth","borderColorError"],"mappings":"4QAAA,oD;;;AAGO,IAAMA,MAAM,GAAG,2BAAa;AACjCC,EAAAA,IADiC,kBAC1B;AACL,eAAOC,YAAP;;;;AAID,GANgC;;AAQjCC,EAAAA,KARiC,mBAQzB;AACN,eAAOD,YAAP;;;;;;AAMD,GAfgC;;AAiBjCE,EAAAA,KAjBiC,iBAiB3BC,CAjB2B,EAiBjB;AACd,eAAOH,YAAP;AACWG,IAAAA,CAAC,CAACC,iBADb;;;;AAKD,GAvBgC;;AAyBjCC,EAAAA,UAzBiC,sBAyBtBF,CAzBsB,EAyBZ;AACnB,eAAOH,YAAP;AACkBG,IAAAA,CAAC,CAACG,qBADpB;AAEeH,IAAAA,CAAC,CAACI,0BAFjB;AAGiBJ,IAAAA,CAAC,CAACK,4BAHnB;;AAKD,GA/BgC;;AAiCjCC,EAAAA,WAjCiC,uBAiCrBN,CAjCqB,EAiCX;AACpB,eAAOH,YAAP;AACkBG,IAAAA,CAAC,CAACO,sBADpB;AAEeP,IAAAA,CAAC,CAACQ,2BAFjB;AAGiBR,IAAAA,CAAC,CAACS,6BAHnB;;AAKD,GAvCgC;;AAyCjCC,EAAAA,UAzCiC,sBAyCtBV,CAzCsB,EAyCZ;AACnB,eAAOH,YAAP;AACkBG,IAAAA,CAAC,CAACW,qBADpB;AAEeX,IAAAA,CAAC,CAACY,0BAFjB;AAGiBZ,IAAAA,CAAC,CAACa,4BAHnB;;AAKD,GA/CgC;;AAiDjCC,EAAAA,KAjDiC,iBAiD3Bd,CAjD2B,EAiDjB;AACd,QAAMe,WAAW,GAAGC,QAAQ,CAAChB,CAAC,CAACiB,cAAH,CAA5B;AACA,QAAMC,YAAY,GAAMF,QAAQ,CAAChB,CAAC,CAACmB,oBAAH,CAAR,GAAmCJ,WAAzC,OAAlB;AACA,eAAOlB,YAAP;;AAE4BkB,IAAAA,WAF5B,EAE6Cf,CAAC,CAACoB,gBAF/C,EAE0EF,YAF1E,EAE0FlB,CAAC,CAACoB,gBAF5F;;AAID,GAxDgC,EAAb,CAAf,C","sourcesContent":["import { css, memoizeStyle } from '../../lib/theming/Emotion';\nimport { Theme } from '../../lib/theming/Theme';\n\nexport const styles = memoizeStyle({\n  wrap() {\n    return css`\n      display: inline-block;\n      vertical-align: middle;\n    `;\n  },\n\n  input() {\n    return css`\n      height: 0;\n      opacity: 0;\n      position: absolute;\n      width: 0;\n    `;\n  },\n\n  label(t: Theme) {\n    return css`\n      color: ${t.switcherTextColor};\n      vertical-align: middle;\n      display: inline-block;\n    `;\n  },\n\n  labelSmall(t: Theme) {\n    return css`\n      margin-right: ${t.switcherLabelGapSmall};\n      font-size: ${t.switcherLabelFontSizeSmall};\n      line-height: ${t.switcherLabelLineHeightSmall};\n    `;\n  },\n\n  labelMedium(t: Theme) {\n    return css`\n      margin-right: ${t.switcherLabelGapMedium};\n      font-size: ${t.switcherLabelFontSizeMedium};\n      line-height: ${t.switcherLabelLineHeightMedium};\n    `;\n  },\n\n  labelLarge(t: Theme) {\n    return css`\n      margin-right: ${t.switcherLabelGapLarge};\n      font-size: ${t.switcherLabelFontSizeLarge};\n      line-height: ${t.switcherLabelLineHeightLarge};\n    `;\n  },\n\n  error(t: Theme) {\n    const insideWidth = parseInt(t.btnBorderWidth);\n    const outsideWidth = `${parseInt(t.switcherOutlineWidth) - insideWidth}px`;\n    return css`\n      border-radius: 2px;\n      box-shadow: inset 0 0 0 ${insideWidth}px ${t.borderColorError}, 0 0 0 ${outsideWidth} ${t.borderColorError};\n    `;\n  },\n});\n"]}

package/cjs/components/Switcher/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["index.tsx"],"names":[],"mappings":"uCAAA","sourcesContent":["export * from './Switcher';\r\n"]}
+{"version":3,"sources":["index.tsx"],"names":[],"mappings":"uCAAA","sourcesContent":["export * from './Switcher';\n"]}

package/cjs/components/Switcher/switcherTheme.d.ts

@@ -1 +1,2 @@
-export declare const getSwitcherTheme: (theme: Readonly<typeof import("../../internal/themes/DefaultTheme").DefaultTheme>) => Readonly<typeof import("../../internal/themes/DefaultTheme").DefaultTheme>;
+import { Theme } from '../../lib/theming/Theme';
+export declare const getSwitcherTheme: (theme: Theme) => Theme;

package/cjs/components/Switcher/switcherTheme.js.map

@@ -1 +1 @@
-{"version":3,"sources":["switcherTheme.ts"],"names":["getSwitcherTheme","theme","ThemeFactory","create","btnBorderWidth","switcherButtonBorderWidth","btnDisabledBorderColor","switcherButtonDisabledBorderColor","btnCheckedDisabledShadow","switcherButtonCheckedDisabledShadow","btnLineHeightSmall","switcherButtonLineHeightSmall","btnFontSizeSmall","switcherButtonFontSizeSmall","btnPaddingXSmall","switcherButtonPaddingXSmall","btnPaddingYSmall","switcherButtonPaddingYSmall","btnBorderRadiusSmall","switcherButtonBorderRadiusSmall","btnLineHeightMedium","switcherButtonLineHeightMedium","btnFontSizeMedium","switcherButtonFontSizeMedium","btnPaddingXMedium","switcherButtonPaddingXMedium","btnPaddingYMedium","switcherButtonPaddingYMedium","btnBorderRadiusMedium","switcherButtonBorderRadiusMedium","btnLineHeightLarge","switcherButtonLineHeightLarge","btnFontSizeLarge","switcherButtonFontSizeLarge","btnPaddingXLarge","switcherButtonPaddingXLarge","btnPaddingYLarge","switcherButtonPaddingYLarge","btnBorderRadiusLarge","switcherButtonBorderRadiusLarge"],"mappings":"yEAAA;;;AAGO,IAAMA,gBAAgB,GAAG,SAAnBA,gBAAmB,CAACC,KAAD,EAAyB;AACvD,SAAOC,2BAAaC,MAAb;AACL;AACEC,IAAAA,cAAc,EAAEH,KAAK,CAACI,yBADxB;AAEEC,IAAAA,sBAAsB,EAAEL,KAAK,CAACM,iCAFhC;AAGEC,IAAAA,wBAAwB,EAAEP,KAAK,CAACQ,mCAHlC;;AAKEC,IAAAA,kBAAkB,EAAET,KAAK,CAACU,6BAL5B;AAMEC,IAAAA,gBAAgB,EAAEX,KAAK,CAACY,2BAN1B;AAOEC,IAAAA,gBAAgB,EAAEb,KAAK,CAACc,2BAP1B;AAQEC,IAAAA,gBAAgB,EAAEf,KAAK,CAACgB,2BAR1B;AASEC,IAAAA,oBAAoB,EAAEjB,KAAK,CAACkB,+BAT9B;;AAWEC,IAAAA,mBAAmB,EAAEnB,KAAK,CAACoB,8BAX7B;AAYEC,IAAAA,iBAAiB,EAAErB,KAAK,CAACsB,4BAZ3B;AAaEC,IAAAA,iBAAiB,EAAEvB,KAAK,CAACwB,4BAb3B;AAcEC,IAAAA,iBAAiB,EAAEzB,KAAK,CAAC0B,4BAd3B;AAeEC,IAAAA,qBAAqB,EAAE3B,KAAK,CAAC4B,gCAf/B;;AAiBEC,IAAAA,kBAAkB,EAAE7B,KAAK,CAAC8B,6BAjB5B;AAkBEC,IAAAA,gBAAgB,EAAE/B,KAAK,CAACgC,2BAlB1B;AAmBEC,IAAAA,gBAAgB,EAAEjC,KAAK,CAACkC,2BAnB1B;AAoBEC,IAAAA,gBAAgB,EAAEnC,KAAK,CAACoC,2BApB1B;AAqBEC,IAAAA,oBAAoB,EAAErC,KAAK,CAACsC,+BArB9B,EADK;;AAwBLtC,EAAAA,KAxBK,CAAP;;AA0BD,CA3BM,C","sourcesContent":["import { ThemeFactory } from '../../lib/theming/ThemeFactory';\r\nimport { Theme } from '../../lib/theming/Theme';\r\n\r\nexport const getSwitcherTheme = (theme: Theme): Theme => {\r\n  return ThemeFactory.create(\r\n    {\r\n      btnBorderWidth: theme.switcherButtonBorderWidth,\r\n      btnDisabledBorderColor: theme.switcherButtonDisabledBorderColor,\r\n      btnCheckedDisabledShadow: theme.switcherButtonCheckedDisabledShadow,\r\n\r\n      btnLineHeightSmall: theme.switcherButtonLineHeightSmall,\r\n      btnFontSizeSmall: theme.switcherButtonFontSizeSmall,\r\n      btnPaddingXSmall: theme.switcherButtonPaddingXSmall,\r\n      btnPaddingYSmall: theme.switcherButtonPaddingYSmall,\r\n      btnBorderRadiusSmall: theme.switcherButtonBorderRadiusSmall,\r\n\r\n      btnLineHeightMedium: theme.switcherButtonLineHeightMedium,\r\n      btnFontSizeMedium: theme.switcherButtonFontSizeMedium,\r\n      btnPaddingXMedium: theme.switcherButtonPaddingXMedium,\r\n      btnPaddingYMedium: theme.switcherButtonPaddingYMedium,\r\n      btnBorderRadiusMedium: theme.switcherButtonBorderRadiusMedium,\r\n\r\n      btnLineHeightLarge: theme.switcherButtonLineHeightLarge,\r\n      btnFontSizeLarge: theme.switcherButtonFontSizeLarge,\r\n      btnPaddingXLarge: theme.switcherButtonPaddingXLarge,\r\n      btnPaddingYLarge: theme.switcherButtonPaddingYLarge,\r\n      btnBorderRadiusLarge: theme.switcherButtonBorderRadiusLarge,\r\n    },\r\n    theme,\r\n  );\r\n};\r\n"]}
+{"version":3,"sources":["switcherTheme.ts"],"names":["getSwitcherTheme","theme","ThemeFactory","create","btnBorderWidth","switcherButtonBorderWidth","btnDisabledBorderColor","switcherButtonDisabledBorderColor","btnCheckedDisabledShadow","switcherButtonCheckedDisabledShadow","btnLineHeightSmall","switcherButtonLineHeightSmall","btnFontSizeSmall","switcherButtonFontSizeSmall","btnPaddingXSmall","switcherButtonPaddingXSmall","btnPaddingYSmall","switcherButtonPaddingYSmall","btnBorderRadiusSmall","switcherButtonBorderRadiusSmall","btnLineHeightMedium","switcherButtonLineHeightMedium","btnFontSizeMedium","switcherButtonFontSizeMedium","btnPaddingXMedium","switcherButtonPaddingXMedium","btnPaddingYMedium","switcherButtonPaddingYMedium","btnBorderRadiusMedium","switcherButtonBorderRadiusMedium","btnLineHeightLarge","switcherButtonLineHeightLarge","btnFontSizeLarge","switcherButtonFontSizeLarge","btnPaddingXLarge","switcherButtonPaddingXLarge","btnPaddingYLarge","switcherButtonPaddingYLarge","btnBorderRadiusLarge","switcherButtonBorderRadiusLarge"],"mappings":"yEAAA;;;AAGO,IAAMA,gBAAgB,GAAG,SAAnBA,gBAAmB,CAACC,KAAD,EAAyB;AACvD,SAAOC,2BAAaC,MAAb;AACL;AACEC,IAAAA,cAAc,EAAEH,KAAK,CAACI,yBADxB;AAEEC,IAAAA,sBAAsB,EAAEL,KAAK,CAACM,iCAFhC;AAGEC,IAAAA,wBAAwB,EAAEP,KAAK,CAACQ,mCAHlC;;AAKEC,IAAAA,kBAAkB,EAAET,KAAK,CAACU,6BAL5B;AAMEC,IAAAA,gBAAgB,EAAEX,KAAK,CAACY,2BAN1B;AAOEC,IAAAA,gBAAgB,EAAEb,KAAK,CAACc,2BAP1B;AAQEC,IAAAA,gBAAgB,EAAEf,KAAK,CAACgB,2BAR1B;AASEC,IAAAA,oBAAoB,EAAEjB,KAAK,CAACkB,+BAT9B;;AAWEC,IAAAA,mBAAmB,EAAEnB,KAAK,CAACoB,8BAX7B;AAYEC,IAAAA,iBAAiB,EAAErB,KAAK,CAACsB,4BAZ3B;AAaEC,IAAAA,iBAAiB,EAAEvB,KAAK,CAACwB,4BAb3B;AAcEC,IAAAA,iBAAiB,EAAEzB,KAAK,CAAC0B,4BAd3B;AAeEC,IAAAA,qBAAqB,EAAE3B,KAAK,CAAC4B,gCAf/B;;AAiBEC,IAAAA,kBAAkB,EAAE7B,KAAK,CAAC8B,6BAjB5B;AAkBEC,IAAAA,gBAAgB,EAAE/B,KAAK,CAACgC,2BAlB1B;AAmBEC,IAAAA,gBAAgB,EAAEjC,KAAK,CAACkC,2BAnB1B;AAoBEC,IAAAA,gBAAgB,EAAEnC,KAAK,CAACoC,2BApB1B;AAqBEC,IAAAA,oBAAoB,EAAErC,KAAK,CAACsC,+BArB9B,EADK;;AAwBLtC,EAAAA,KAxBK,CAAP;;AA0BD,CA3BM,C","sourcesContent":["import { ThemeFactory } from '../../lib/theming/ThemeFactory';\nimport { Theme } from '../../lib/theming/Theme';\n\nexport const getSwitcherTheme = (theme: Theme): Theme => {\n  return ThemeFactory.create(\n    {\n      btnBorderWidth: theme.switcherButtonBorderWidth,\n      btnDisabledBorderColor: theme.switcherButtonDisabledBorderColor,\n      btnCheckedDisabledShadow: theme.switcherButtonCheckedDisabledShadow,\n\n      btnLineHeightSmall: theme.switcherButtonLineHeightSmall,\n      btnFontSizeSmall: theme.switcherButtonFontSizeSmall,\n      btnPaddingXSmall: theme.switcherButtonPaddingXSmall,\n      btnPaddingYSmall: theme.switcherButtonPaddingYSmall,\n      btnBorderRadiusSmall: theme.switcherButtonBorderRadiusSmall,\n\n      btnLineHeightMedium: theme.switcherButtonLineHeightMedium,\n      btnFontSizeMedium: theme.switcherButtonFontSizeMedium,\n      btnPaddingXMedium: theme.switcherButtonPaddingXMedium,\n      btnPaddingYMedium: theme.switcherButtonPaddingYMedium,\n      btnBorderRadiusMedium: theme.switcherButtonBorderRadiusMedium,\n\n      btnLineHeightLarge: theme.switcherButtonLineHeightLarge,\n      btnFontSizeLarge: theme.switcherButtonFontSizeLarge,\n      btnPaddingXLarge: theme.switcherButtonPaddingXLarge,\n      btnPaddingYLarge: theme.switcherButtonPaddingYLarge,\n      btnBorderRadiusLarge: theme.switcherButtonBorderRadiusLarge,\n    },\n    theme,\n  );\n};\n"]}

package/cjs/components/Tabs/Indicator.d.ts

@@ -11,18 +11,18 @@ export interface IndicatorState {
     styles: React.CSSProperties;
 }
 export declare class Indicator extends React.Component<IndicatorProps, IndicatorState> {
-    static contextType: React.Context<TabsContextType>;
+    static contextType: React.Context<TabsContextType<any>>;
     context: TabsContextType;
     state: IndicatorState;
     private theme;
     private eventListener;
     private removeTabUpdatesListener;
+    private setRootNode;
     componentDidMount(): void;
     componentWillUnmount(): void;
     componentDidUpdate(_: IndicatorProps, prevState: IndicatorState): void;
     render(): JSX.Element;
     private renderMain;
     private reflow;
-    private throttledReflow;
     private getStyles;
 }