@skbkontur/react-ui 0.0.0-8ea1692541 → 0.0.0-9216939ede

package/cjs/components/Tabs/Tab.md

@@ -0,0 +1,71 @@
+У компонента `<Tabs.Tab />` есть несколько визуальных состояний, в которых компонент может находиться: `primary`, `success`, `warning` и `error`. Чтобы перевести контрол в нужное состояние передайте компоненту булевый проп с соответсвующим названием.
+
+Используя переменные `tabColorPrimary`, `tabColorSuccess`, `tabColorWarning` и `tabColorError` можно изменить активный цвет состояния, а библиотека автоматически подберёт цвет подчёркивания при наведении.
+```jsx harmony
+import { ThemeContext, ThemeFactory, Button, Tabs } from '@skbkontur/react-ui';
+
+const getRandomColor = () => '#' + Math.random().toString(16).substr(-6);
+const updateColors = () => {
+  return {
+    tabColorPrimary: getRandomColor(),
+    tabColorSuccess: getRandomColor(),
+    tabColorWarning: getRandomColor(),
+    tabColorError: getRandomColor(),
+  }
+};
+
+const [activeBase, setActiveBase] = React.useState('error');
+const [activeRandom, setActiveRandom] = React.useState('error');
+const [colors, setColors] = React.useState(updateColors());
+
+<>
+  <p style={{ fontSize: '17px' }}>C цветами по умолчанию</p>
+  <Tabs value={activeBase} onValueChange={setActiveBase}>
+    <Tabs.Tab primary id="primary">Primary</Tabs.Tab>
+    <Tabs.Tab success id="success">Success</Tabs.Tab>
+    <Tabs.Tab warning id="warning">Warning</Tabs.Tab>
+    <Tabs.Tab error id="error">Error</Tabs.Tab>
+  </Tabs>
+
+  <p style={{ fontSize: '17px' }}>Со случайным основным цветом</p>
+  <div style={{ display: 'inline-flex', flexDirection: 'column', justifyContent: 'space-between', height: '100px' }}>
+    <ThemeContext.Consumer>
+      {(theme) => {
+        return (
+          <ThemeContext.Provider
+            value={ThemeFactory.create(colors,theme)}
+          >
+            <Tabs value={activeRandom} onValueChange={setActiveRandom}>
+            <Tabs.Tab primary id="primary">Primary</Tabs.Tab>
+            <Tabs.Tab success id="success">Success</Tabs.Tab>
+            <Tabs.Tab warning id="warning">Warning</Tabs.Tab>
+            <Tabs.Tab error id="error">Error</Tabs.Tab>
+          </Tabs>
+          </ThemeContext.Provider>
+        );
+      }}
+    </ThemeContext.Consumer>
+    <Button onClick={() => setColors(updateColors)}>Получить новый набор цветов</Button>
+  </div>
+</>
+```
+
+С помощью пропа `component` можно изменять корневой элемент `<Tab />`.
+
+Проп может принимать: компоненты, функции и строки.
+```jsx harmony
+import { Tabs } from '@skbkontur/react-ui';
+
+const [active, setActive] = React.useState('/fuji');
+
+const NavLink = props => <a {...props} />;
+
+<Tabs value={active} onValueChange={setActive}>
+  {/** Кастомный компонент **/}
+  <Tabs.Tab  component={(props) => <NavLink {...props} />} id="/fuji">🌋 Fuji</Tabs.Tab>
+  {/** Функция **/}
+  <Tabs.Tab component={(props) => <a {...props} />} id="/tahat">⛰ Tahat</Tabs.Tab>
+  {/** Строка **/}
+  <Tabs.Tab component="a" id="/alps">🗻 Alps</Tabs.Tab>
+</Tabs>;
+```

package/cjs/components/Tabs/Tab.styles.d.ts

@@ -3,9 +3,15 @@ export declare const globalClasses: {
     focus: string;
 };
 export declare const styles: {
-    root(t: Theme): string;
-    vertical(t: Theme): string;
-    focus(t: Theme): string;
+    rootSmall(t: Theme): string;
+    rootMedium(t: Theme): string;
+    rootLarge(t: Theme): string;
+    verticalSmall(t: Theme): string;
+    verticalMedium(t: Theme): string;
+    verticalLarge(t: Theme): string;
+    focusSmall(t: Theme): string;
+    focusMedium(t: Theme): string;
+    focusLarge(t: Theme): string;
     disabled(t: Theme): string;
     active(): string;
 };

package/cjs/components/Tabs/Tab.styles.js

@@ -1,79 +1,54 @@
 "use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");exports.__esModule = true;exports.verticalStyles = exports.styles = exports.horizontalStyles = exports.globalClasses = void 0;var _taggedTemplateLiteralLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteralLoose"));var _Emotion = require("../../lib/theming/Emotion");
 var _DimensionFunctions = require("../../lib/styles/DimensionFunctions");
-var ColorFunctions = _interopRequireWildcard(require("../../lib/styles/ColorFunctions"));var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17;function _getRequireWildcardCache(nodeInterop) {if (typeof WeakMap !== "function") return null;var cacheBabelInterop = new WeakMap();var cacheNodeInterop = new WeakMap();return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) {return nodeInterop ? cacheNodeInterop : cacheBabelInterop;})(nodeInterop);}function _interopRequireWildcard(obj, nodeInterop) {if (!nodeInterop && obj && obj.__esModule) {return obj;}if (obj === null || typeof obj !== "object" && typeof obj !== "function") {return { default: obj };}var cache = _getRequireWildcardCache(nodeInterop);if (cache && cache.has(obj)) {return cache.get(obj);}var newObj = {};var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor;for (var key in obj) {if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) {var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null;if (desc && (desc.get || desc.set)) {Object.defineProperty(newObj, key, desc);} else {newObj[key] = obj[key];}}}newObj.default = obj;if (cache) {cache.set(obj, newObj);}return newObj;}
+var ColorFunctions = _interopRequireWildcard(require("../../lib/styles/ColorFunctions"));
 
 
+
+var _helpers = require("./helpers");var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17;function _getRequireWildcardCache(nodeInterop) {if (typeof WeakMap !== "function") return null;var cacheBabelInterop = new WeakMap();var cacheNodeInterop = new WeakMap();return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) {return nodeInterop ? cacheNodeInterop : cacheBabelInterop;})(nodeInterop);}function _interopRequireWildcard(obj, nodeInterop) {if (!nodeInterop && obj && obj.__esModule) {return obj;}if (obj === null || typeof obj !== "object" && typeof obj !== "function") {return { default: obj };}var cache = _getRequireWildcardCache(nodeInterop);if (cache && cache.has(obj)) {return cache.get(obj);}var newObj = {};var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor;for (var key in obj) {if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) {var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null;if (desc && (desc.get || desc.set)) {Object.defineProperty(newObj, key, desc);} else {newObj[key] = obj[key];}}}newObj.default = obj;if (cache) {cache.set(obj, newObj);}return newObj;}
+
 var globalClasses = (0, _Emotion.prefix)('tab')({
   focus: 'focus' });exports.globalClasses = globalClasses;
 
 
 var styles = (0, _Emotion.memoizeStyle)({
-  root: function root(t) {
-    var paddingTop = t.tabPaddingY;
-    var paddingBottom = "calc(" + t.tabPaddingY + " - " + t.tabBorderWidth + ")";
-    return (0, _Emotion.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteralLoose2.default)(["\n      border-bottom: ", " solid transparent;\n      box-sizing: border-box;\n      color: ", ";\n      cursor: pointer;\n      display: inline-block;\n      font-size: ", ";\n      line-height: ", ";\n      margin-left: ", ";\n      margin-right: ", ";\n      padding-bottom: ", ";\n      padding-top: ", ";\n      position: relative;\n      text-decoration: inherit;\n      transition: border-bottom 0.2s ease-out;\n\n      &:hover {\n        outline: inherit;\n        border-bottom: ", " solid ", ";\n      }\n\n      &:focus {\n        outline: inherit;\n      }\n    "])),
-    t.tabBorderWidth,
-
-    t.tabTextColorDefault,
-
-
-    t.tabFontSize,
-    t.tabLineHeight,
-    t.tabPaddingX,
-    t.tabPaddingX,
-    paddingBottom,
-    paddingTop,
-
-
-
-
-
-
-    t.tabBorderWidth, t.tabColorHover);
-
-
-
-
-
-
+  rootSmall: function rootSmall(t) {
+    return tabRoot(t, 'small');
   },
 
-  vertical: function vertical(t) {
-    return (0, _Emotion.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteralLoose2.default)(["\n      border-bottom: none;\n      border-left: ", " solid transparent;\n      display: block;\n      margin-left: 0;\n      margin-right: 0;\n      padding-left: ", ";\n      padding-right: ", ";\n\n      &:hover {\n        border-bottom: none;\n        border-left: ", " solid ", ";\n      }\n\n      .", " {\n        bottom: 0;\n        left: -", ";\n        right: 0;\n      }\n    "])),
-
-    t.tabBorderWidth,
-
-
-
-    (0, _DimensionFunctions.shift)(t.tabPaddingX, "-" + t.tabBorderWidth),
-    t.tabPaddingX,
-
-
-
-    t.tabBorderWidth, t.tabColorHover,
-
-
-    globalClasses.focus,
-
-    t.tabBorderWidth);
+  rootMedium: function rootMedium(t) {
+    return tabRoot(t, 'medium');
+  },
 
+  rootLarge: function rootLarge(t) {
+    return tabRoot(t, 'large');
+  },
 
+  verticalSmall: function verticalSmall(t) {
+    return tabVertical(t, 'small');
+  },
 
+  verticalMedium: function verticalMedium(t) {
+    return tabVertical(t, 'medium');
   },
 
-  focus: function focus(t) {
-    return (0, _Emotion.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteralLoose2.default)(["\n      border: ", " solid ", ";\n      bottom: -", ";\n      left: -", ";\n      position: absolute;\n      right: -", ";\n      top: 0;\n    "])),
-    t.tabOutlineWidth, t.tabColorFocus,
-    t.tabBorderWidth,
-    t.tabPaddingX,
+  verticalLarge: function verticalLarge(t) {
+    return tabVertical(t, 'large');
+  },
 
-    t.tabPaddingX);
+  focusSmall: function focusSmall(t) {
+    return tabFocus(t, 'small');
+  },
 
+  focusMedium: function focusMedium(t) {
+    return tabFocus(t, 'medium');
+  },
 
+  focusLarge: function focusLarge(t) {
+    return tabFocus(t, 'large');
   },
 
   disabled: function disabled(t) {
-    return (0, _Emotion.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteralLoose2.default)(["\n      color: rgba(\n        ", ",\n        ", ",\n        ", ",\n        0.5\n      );\n      cursor: default;\n    "])),
+    return (0, _Emotion.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteralLoose2.default)(["\n      color: rgba(\n        ", ",\n        ", ",\n        ", ",\n        0.5\n      );\n      cursor: default;\n    "])),
 
     ColorFunctions.red(t.tabTextColorDefault),
     ColorFunctions.green(t.tabTextColorDefault),
@@ -85,7 +60,7 @@ var styles = (0, _Emotion.memoizeStyle)({
   },
 
   active: function active() {
-    return (0, _Emotion.css)(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteralLoose2.default)(["\n      cursor: default;\n    "])));
+    return (0, _Emotion.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteralLoose2.default)(["\n      cursor: default;\n    "])));
 
 
   } });exports.styles = styles;
@@ -93,7 +68,7 @@ var styles = (0, _Emotion.memoizeStyle)({
 
 var horizontalStyles = (0, _Emotion.memoizeStyle)({
   active: function active(t) {
-    return (0, _Emotion.css)(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteralLoose2.default)(["\n      &:hover {\n        border-bottom: ", " solid transparent;\n      }\n    "])),
+    return (0, _Emotion.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteralLoose2.default)(["\n      &:hover {\n        border-bottom: ", " solid transparent;\n      }\n    "])),
 
     t.tabBorderWidth);
 
@@ -101,7 +76,7 @@ var horizontalStyles = (0, _Emotion.memoizeStyle)({
   },
 
   disabled: function disabled() {
-    return (0, _Emotion.css)(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteralLoose2.default)(["\n      &:hover {\n        border-bottom-color: transparent;\n      }\n    "])));
+    return (0, _Emotion.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteralLoose2.default)(["\n      &:hover {\n        border-bottom-color: transparent;\n      }\n    "])));
 
 
 
@@ -109,7 +84,7 @@ var horizontalStyles = (0, _Emotion.memoizeStyle)({
   },
 
   primary: function primary(t) {
-    return (0, _Emotion.css)(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteralLoose2.default)(["\n      &:hover {\n        border-bottom-color: ", ";\n      }\n    "])),
+    return (0, _Emotion.css)(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteralLoose2.default)(["\n      &:hover {\n        border-bottom-color: ", ";\n      }\n    "])),
 
     t.tabColorHoverPrimary);
 
@@ -117,7 +92,7 @@ var horizontalStyles = (0, _Emotion.memoizeStyle)({
   },
 
   success: function success(t) {
-    return (0, _Emotion.css)(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteralLoose2.default)(["\n      &:hover {\n        border-bottom-color: ", ";\n      }\n    "])),
+    return (0, _Emotion.css)(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteralLoose2.default)(["\n      &:hover {\n        border-bottom-color: ", ";\n      }\n    "])),
 
     t.tabColorHoverSuccess);
 
@@ -125,7 +100,7 @@ var horizontalStyles = (0, _Emotion.memoizeStyle)({
   },
 
   warning: function warning(t) {
-    return (0, _Emotion.css)(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteralLoose2.default)(["\n      &:hover {\n        border-bottom-color: ", ";\n      }\n    "])),
+    return (0, _Emotion.css)(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteralLoose2.default)(["\n      &:hover {\n        border-bottom-color: ", ";\n      }\n    "])),
 
     t.tabColorHoverWarning);
 
@@ -133,7 +108,7 @@ var horizontalStyles = (0, _Emotion.memoizeStyle)({
   },
 
   error: function error(t) {
-    return (0, _Emotion.css)(_templateObject11 || (_templateObject11 = (0, _taggedTemplateLiteralLoose2.default)(["\n      &:hover {\n        border-bottom-color: ", ";\n      }\n    "])),
+    return (0, _Emotion.css)(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteralLoose2.default)(["\n      &:hover {\n        border-bottom-color: ", ";\n      }\n    "])),
 
     t.tabColorHoverError);
 
@@ -143,7 +118,7 @@ var horizontalStyles = (0, _Emotion.memoizeStyle)({
 
 var verticalStyles = (0, _Emotion.memoizeStyle)({
   active: function active(t) {
-    return (0, _Emotion.css)(_templateObject12 || (_templateObject12 = (0, _taggedTemplateLiteralLoose2.default)(["\n      &:hover {\n        border-left: ", " solid transparent;\n      }\n    "])),
+    return (0, _Emotion.css)(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteralLoose2.default)(["\n      &:hover {\n        border-left: ", " solid transparent;\n      }\n    "])),
 
     t.tabBorderWidth);
 
@@ -151,7 +126,7 @@ var verticalStyles = (0, _Emotion.memoizeStyle)({
   },
 
   disabled: function disabled() {
-    return (0, _Emotion.css)(_templateObject13 || (_templateObject13 = (0, _taggedTemplateLiteralLoose2.default)(["\n      &:hover {\n        border-left-color: transparent;\n      }\n    "])));
+    return (0, _Emotion.css)(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteralLoose2.default)(["\n      &:hover {\n        border-left-color: transparent;\n      }\n    "])));
 
 
 
@@ -159,7 +134,7 @@ var verticalStyles = (0, _Emotion.memoizeStyle)({
   },
 
   primary: function primary(t) {
-    return (0, _Emotion.css)(_templateObject14 || (_templateObject14 = (0, _taggedTemplateLiteralLoose2.default)(["\n      &:hover {\n        border-left-color: ", ";\n      }\n    "])),
+    return (0, _Emotion.css)(_templateObject11 || (_templateObject11 = (0, _taggedTemplateLiteralLoose2.default)(["\n      &:hover {\n        border-left-color: ", ";\n      }\n    "])),
 
     t.tabColorHoverPrimary);
 
@@ -167,7 +142,7 @@ var verticalStyles = (0, _Emotion.memoizeStyle)({
   },
 
   success: function success(t) {
-    return (0, _Emotion.css)(_templateObject15 || (_templateObject15 = (0, _taggedTemplateLiteralLoose2.default)(["\n      &:hover {\n        border-left-color: ", ";\n      }\n    "])),
+    return (0, _Emotion.css)(_templateObject12 || (_templateObject12 = (0, _taggedTemplateLiteralLoose2.default)(["\n      &:hover {\n        border-left-color: ", ";\n      }\n    "])),
 
     t.tabColorHoverSuccess);
 
@@ -175,7 +150,7 @@ var verticalStyles = (0, _Emotion.memoizeStyle)({
   },
 
   warning: function warning(t) {
-    return (0, _Emotion.css)(_templateObject16 || (_templateObject16 = (0, _taggedTemplateLiteralLoose2.default)(["\n      &:hover {\n        border-left-color: ", ";\n      }\n    "])),
+    return (0, _Emotion.css)(_templateObject13 || (_templateObject13 = (0, _taggedTemplateLiteralLoose2.default)(["\n      &:hover {\n        border-left-color: ", ";\n      }\n    "])),
 
     t.tabColorHoverWarning);
 
@@ -183,9 +158,72 @@ var verticalStyles = (0, _Emotion.memoizeStyle)({
   },
 
   error: function error(t) {
-    return (0, _Emotion.css)(_templateObject17 || (_templateObject17 = (0, _taggedTemplateLiteralLoose2.default)(["\n      &:hover {\n        border-left-color: ", ";\n      }\n    "])),
+    return (0, _Emotion.css)(_templateObject14 || (_templateObject14 = (0, _taggedTemplateLiteralLoose2.default)(["\n      &:hover {\n        border-left-color: ", ";\n      }\n    "])),
 
     t.tabColorHoverError);
 
 
-  } });exports.verticalStyles = verticalStyles;
+  } });exports.verticalStyles = verticalStyles;
+
+
+function tabRoot(t, size) {
+  return (0, _Emotion.css)(_templateObject15 || (_templateObject15 = (0, _taggedTemplateLiteralLoose2.default)(["\n    border-bottom: ", " solid transparent;\n    box-sizing: border-box;\n    color: ", ";\n    cursor: pointer;\n    display: inline-block;\n    font-size: ", ";\n    line-height: ", ";\n    margin-left: ", ";\n    margin-right: ", ";\n    padding-bottom: calc(", " - ", ");\n    padding-top: ", ";\n    position: relative;\n    text-decoration: inherit;\n    transition: border-bottom ", " ", ";\n\n    &:hover {\n      outline: inherit;\n      border-bottom: ", " solid ", ";\n    }\n\n    &:focus {\n      outline: inherit;\n    }\n  "])),
+  t.tabBorderWidth,
+
+  t.tabTextColorDefault,
+
+
+  (0, _helpers.fontSize)(t, size),
+  (0, _helpers.lineHeight)(t, size),
+  (0, _helpers.paddingX)(t, size),
+  (0, _helpers.paddingX)(t, size),
+  (0, _helpers.paddingY)(t, size), t.tabBorderWidth,
+  (0, _helpers.paddingY)(t, size),
+
+
+  t.transitionDuration, t.transitionTimingFunction,
+
+
+
+  t.tabBorderWidth, t.tabColorHover);
+
+
+
+
+
+
+}
+
+function tabVertical(t, size) {
+  return (0, _Emotion.css)(_templateObject16 || (_templateObject16 = (0, _taggedTemplateLiteralLoose2.default)(["\n    border-bottom: none;\n    border-left: ", " solid transparent;\n    display: block;\n    margin-left: 0;\n    margin-right: 0;\n    padding-left: ", ";\n    padding-right: ", ";\n\n    &:hover {\n      border-bottom: none;\n      border-left: ", " solid ", ";\n    }\n\n    .", " {\n      bottom: 0;\n      left: -", ";\n      right: 0;\n    }\n  "])),
+
+  t.tabBorderWidth,
+
+
+
+  (0, _DimensionFunctions.shift)((0, _helpers.paddingX)(t, size), "-" + t.tabBorderWidth),
+  (0, _helpers.paddingX)(t, size),
+
+
+
+  t.tabBorderWidth, t.tabColorHover,
+
+
+  globalClasses.focus,
+
+  t.tabBorderWidth);
+
+
+
+}
+
+function tabFocus(t, size) {
+  return (0, _Emotion.css)(_templateObject17 || (_templateObject17 = (0, _taggedTemplateLiteralLoose2.default)(["\n    border: ", " solid ", ";\n    bottom: -", ";\n    left: -", ";\n    position: absolute;\n    right: -", ";\n    top: 0;\n  "])),
+  t.tabOutlineWidth, t.tabColorFocus,
+  t.tabBorderWidth,
+  (0, _helpers.paddingX)(t, size),
+
+  (0, _helpers.paddingX)(t, size));
+
+
+}

package/cjs/components/Tabs/Tab.styles.js.map

@@ -1 +1 @@
-{"version":3,"sources":["Tab.styles.ts"],"names":["globalClasses","focus","styles","root","t","paddingTop","tabPaddingY","paddingBottom","tabBorderWidth","css","tabTextColorDefault","tabFontSize","tabLineHeight","tabPaddingX","tabColorHover","vertical","tabOutlineWidth","tabColorFocus","disabled","ColorFunctions","red","green","blue","active","horizontalStyles","primary","tabColorHoverPrimary","success","tabColorHoverSuccess","warning","tabColorHoverWarning","error","tabColorHoverError","verticalStyles"],"mappings":"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","sourcesContent":["import { css, memoizeStyle, prefix } from '../../lib/theming/Emotion';\nimport { shift } from '../../lib/styles/DimensionFunctions';\nimport * as ColorFunctions from '../../lib/styles/ColorFunctions';\nimport { Theme } from '../../lib/theming/Theme';\n\nexport const globalClasses = prefix('tab')({\n  focus: 'focus',\n});\n\nexport const styles = memoizeStyle({\n  root(t: Theme) {\n    const paddingTop = t.tabPaddingY;\n    const paddingBottom = `calc(${t.tabPaddingY} - ${t.tabBorderWidth})`;\n    return css`\n      border-bottom: ${t.tabBorderWidth} solid transparent;\n      box-sizing: border-box;\n      color: ${t.tabTextColorDefault};\n      cursor: pointer;\n      display: inline-block;\n      font-size: ${t.tabFontSize};\n      line-height: ${t.tabLineHeight};\n      margin-left: ${t.tabPaddingX};\n      margin-right: ${t.tabPaddingX};\n      padding-bottom: ${paddingBottom};\n      padding-top: ${paddingTop};\n      position: relative;\n      text-decoration: inherit;\n      transition: border-bottom 0.2s ease-out;\n\n      &:hover {\n        outline: inherit;\n        border-bottom: ${t.tabBorderWidth} solid ${t.tabColorHover};\n      }\n\n      &:focus {\n        outline: inherit;\n      }\n    `;\n  },\n\n  vertical(t: Theme) {\n    return css`\n      border-bottom: none;\n      border-left: ${t.tabBorderWidth} solid transparent;\n      display: block;\n      margin-left: 0;\n      margin-right: 0;\n      padding-left: ${shift(t.tabPaddingX, `-${t.tabBorderWidth}`)};\n      padding-right: ${t.tabPaddingX};\n\n      &:hover {\n        border-bottom: none;\n        border-left: ${t.tabBorderWidth} solid ${t.tabColorHover};\n      }\n\n      .${globalClasses.focus} {\n        bottom: 0;\n        left: -${t.tabBorderWidth};\n        right: 0;\n      }\n    `;\n  },\n\n  focus(t: Theme) {\n    return css`\n      border: ${t.tabOutlineWidth} solid ${t.tabColorFocus};\n      bottom: -${t.tabBorderWidth};\n      left: -${t.tabPaddingX};\n      position: absolute;\n      right: -${t.tabPaddingX};\n      top: 0;\n    `;\n  },\n\n  disabled(t: Theme) {\n    return css`\n      color: rgba(\n        ${ColorFunctions.red(t.tabTextColorDefault)},\n        ${ColorFunctions.green(t.tabTextColorDefault)},\n        ${ColorFunctions.blue(t.tabTextColorDefault)},\n        0.5\n      );\n      cursor: default;\n    `;\n  },\n\n  active() {\n    return css`\n      cursor: default;\n    `;\n  },\n});\n\nexport const horizontalStyles = memoizeStyle({\n  active(t: Theme) {\n    return css`\n      &:hover {\n        border-bottom: ${t.tabBorderWidth} solid transparent;\n      }\n    `;\n  },\n\n  disabled() {\n    return css`\n      &:hover {\n        border-bottom-color: transparent;\n      }\n    `;\n  },\n\n  primary(t: Theme) {\n    return css`\n      &:hover {\n        border-bottom-color: ${t.tabColorHoverPrimary};\n      }\n    `;\n  },\n\n  success(t: Theme) {\n    return css`\n      &:hover {\n        border-bottom-color: ${t.tabColorHoverSuccess};\n      }\n    `;\n  },\n\n  warning(t: Theme) {\n    return css`\n      &:hover {\n        border-bottom-color: ${t.tabColorHoverWarning};\n      }\n    `;\n  },\n\n  error(t: Theme) {\n    return css`\n      &:hover {\n        border-bottom-color: ${t.tabColorHoverError};\n      }\n    `;\n  },\n});\n\nexport const verticalStyles = memoizeStyle({\n  active(t: Theme) {\n    return css`\n      &:hover {\n        border-left: ${t.tabBorderWidth} solid transparent;\n      }\n    `;\n  },\n\n  disabled() {\n    return css`\n      &:hover {\n        border-left-color: transparent;\n      }\n    `;\n  },\n\n  primary(t: Theme) {\n    return css`\n      &:hover {\n        border-left-color: ${t.tabColorHoverPrimary};\n      }\n    `;\n  },\n\n  success(t: Theme) {\n    return css`\n      &:hover {\n        border-left-color: ${t.tabColorHoverSuccess};\n      }\n    `;\n  },\n\n  warning(t: Theme) {\n    return css`\n      &:hover {\n        border-left-color: ${t.tabColorHoverWarning};\n      }\n    `;\n  },\n\n  error(t: Theme) {\n    return css`\n      &:hover {\n        border-left-color: ${t.tabColorHoverError};\n      }\n    `;\n  },\n});\n"]}
+{"version":3,"sources":["Tab.styles.ts"],"names":["globalClasses","focus","styles","rootSmall","t","tabRoot","rootMedium","rootLarge","verticalSmall","tabVertical","verticalMedium","verticalLarge","focusSmall","tabFocus","focusMedium","focusLarge","disabled","css","ColorFunctions","red","tabTextColorDefault","green","blue","active","horizontalStyles","tabBorderWidth","primary","tabColorHoverPrimary","success","tabColorHoverSuccess","warning","tabColorHoverWarning","error","tabColorHoverError","verticalStyles","size","transitionDuration","transitionTimingFunction","tabColorHover","tabOutlineWidth","tabColorFocus"],"mappings":"wVAAA;AACA;AACA;;;;AAIA,oC;;AAEO,IAAMA,aAAa,GAAG,qBAAO,KAAP,EAAc;AACzCC,EAAAA,KAAK,EAAE,OADkC,EAAd,CAAtB,C;;;AAIA,IAAMC,MAAM,GAAG,2BAAa;AACjCC,EAAAA,SADiC,qBACvBC,CADuB,EACb;AAClB,WAAOC,OAAO,CAACD,CAAD,EAAI,OAAJ,CAAd;AACD,GAHgC;;AAKjCE,EAAAA,UALiC,sBAKtBF,CALsB,EAKZ;AACnB,WAAOC,OAAO,CAACD,CAAD,EAAI,QAAJ,CAAd;AACD,GAPgC;;AASjCG,EAAAA,SATiC,qBASvBH,CATuB,EASb;AAClB,WAAOC,OAAO,CAACD,CAAD,EAAI,OAAJ,CAAd;AACD,GAXgC;;AAajCI,EAAAA,aAbiC,yBAanBJ,CAbmB,EAaT;AACtB,WAAOK,WAAW,CAACL,CAAD,EAAI,OAAJ,CAAlB;AACD,GAfgC;;AAiBjCM,EAAAA,cAjBiC,0BAiBlBN,CAjBkB,EAiBR;AACvB,WAAOK,WAAW,CAACL,CAAD,EAAI,QAAJ,CAAlB;AACD,GAnBgC;;AAqBjCO,EAAAA,aArBiC,yBAqBnBP,CArBmB,EAqBT;AACtB,WAAOK,WAAW,CAACL,CAAD,EAAI,OAAJ,CAAlB;AACD,GAvBgC;;AAyBjCQ,EAAAA,UAzBiC,sBAyBtBR,CAzBsB,EAyBZ;AACnB,WAAOS,QAAQ,CAACT,CAAD,EAAI,OAAJ,CAAf;AACD,GA3BgC;;AA6BjCU,EAAAA,WA7BiC,uBA6BrBV,CA7BqB,EA6BX;AACpB,WAAOS,QAAQ,CAACT,CAAD,EAAI,QAAJ,CAAf;AACD,GA/BgC;;AAiCjCW,EAAAA,UAjCiC,sBAiCtBX,CAjCsB,EAiCZ;AACnB,WAAOS,QAAQ,CAACT,CAAD,EAAI,OAAJ,CAAf;AACD,GAnCgC;;AAqCjCY,EAAAA,QArCiC,oBAqCxBZ,CArCwB,EAqCd;AACjB,eAAOa,YAAP;;AAEMC,IAAAA,cAAc,CAACC,GAAf,CAAmBf,CAAC,CAACgB,mBAArB,CAFN;AAGMF,IAAAA,cAAc,CAACG,KAAf,CAAqBjB,CAAC,CAACgB,mBAAvB,CAHN;AAIMF,IAAAA,cAAc,CAACI,IAAf,CAAoBlB,CAAC,CAACgB,mBAAtB,CAJN;;;;;AASD,GA/CgC;;AAiDjCG,EAAAA,MAjDiC,oBAiDxB;AACP,eAAON,YAAP;;;AAGD,GArDgC,EAAb,CAAf,C;;;AAwDA,IAAMO,gBAAgB,GAAG,2BAAa;AAC3CD,EAAAA,MAD2C,kBACpCnB,CADoC,EAC1B;AACf,eAAOa,YAAP;;AAEqBb,IAAAA,CAAC,CAACqB,cAFvB;;;AAKD,GAP0C;;AAS3CT,EAAAA,QAT2C,sBAShC;AACT,eAAOC,YAAP;;;;;AAKD,GAf0C;;AAiB3CS,EAAAA,OAjB2C,mBAiBnCtB,CAjBmC,EAiBzB;AAChB,eAAOa,YAAP;;AAE2Bb,IAAAA,CAAC,CAACuB,oBAF7B;;;AAKD,GAvB0C;;AAyB3CC,EAAAA,OAzB2C,mBAyBnCxB,CAzBmC,EAyBzB;AAChB,eAAOa,YAAP;;AAE2Bb,IAAAA,CAAC,CAACyB,oBAF7B;;;AAKD,GA/B0C;;AAiC3CC,EAAAA,OAjC2C,mBAiCnC1B,CAjCmC,EAiCzB;AAChB,eAAOa,YAAP;;AAE2Bb,IAAAA,CAAC,CAAC2B,oBAF7B;;;AAKD,GAvC0C;;AAyC3CC,EAAAA,KAzC2C,iBAyCrC5B,CAzCqC,EAyC3B;AACd,eAAOa,YAAP;;AAE2Bb,IAAAA,CAAC,CAAC6B,kBAF7B;;;AAKD,GA/C0C,EAAb,CAAzB,C;;;AAkDA,IAAMC,cAAc,GAAG,2BAAa;AACzCX,EAAAA,MADyC,kBAClCnB,CADkC,EACxB;AACf,eAAOa,YAAP;;AAEmBb,IAAAA,CAAC,CAACqB,cAFrB;;;AAKD,GAPwC;;AASzCT,EAAAA,QATyC,sBAS9B;AACT,eAAOC,YAAP;;;;;AAKD,GAfwC;;AAiBzCS,EAAAA,OAjByC,mBAiBjCtB,CAjBiC,EAiBvB;AAChB,eAAOa,YAAP;;AAEyBb,IAAAA,CAAC,CAACuB,oBAF3B;;;AAKD,GAvBwC;;AAyBzCC,EAAAA,OAzByC,mBAyBjCxB,CAzBiC,EAyBvB;AAChB,eAAOa,YAAP;;AAEyBb,IAAAA,CAAC,CAACyB,oBAF3B;;;AAKD,GA/BwC;;AAiCzCC,EAAAA,OAjCyC,mBAiCjC1B,CAjCiC,EAiCvB;AAChB,eAAOa,YAAP;;AAEyBb,IAAAA,CAAC,CAAC2B,oBAF3B;;;AAKD,GAvCwC;;AAyCzCC,EAAAA,KAzCyC,iBAyCnC5B,CAzCmC,EAyCzB;AACd,eAAOa,YAAP;;AAEyBb,IAAAA,CAAC,CAAC6B,kBAF3B;;;AAKD,GA/CwC,EAAb,CAAvB,C;;;AAkDP,SAAS5B,OAAT,CAAiBD,CAAjB,EAA2B+B,IAA3B,EAA2C;AACzC,aAAOlB,YAAP;AACmBb,EAAAA,CAAC,CAACqB,cADrB;;AAGWrB,EAAAA,CAAC,CAACgB,mBAHb;;;AAMe,yBAAShB,CAAT,EAAY+B,IAAZ,CANf;AAOiB,2BAAW/B,CAAX,EAAc+B,IAAd,CAPjB;AAQiB,yBAAS/B,CAAT,EAAY+B,IAAZ,CARjB;AASkB,yBAAS/B,CAAT,EAAY+B,IAAZ,CATlB;AAUyB,yBAAS/B,CAAT,EAAY+B,IAAZ,CAVzB,EAUgD/B,CAAC,CAACqB,cAVlD;AAWiB,yBAASrB,CAAT,EAAY+B,IAAZ,CAXjB;;;AAc8B/B,EAAAA,CAAC,CAACgC,kBAdhC,EAcsDhC,CAAC,CAACiC,wBAdxD;;;;AAkBqBjC,EAAAA,CAAC,CAACqB,cAlBvB,EAkB+CrB,CAAC,CAACkC,aAlBjD;;;;;;;AAyBD;;AAED,SAAS7B,WAAT,CAAqBL,CAArB,EAA+B+B,IAA/B,EAA+C;AAC7C,aAAOlB,YAAP;;AAEiBb,EAAAA,CAAC,CAACqB,cAFnB;;;;AAMkB,iCAAM,uBAASrB,CAAT,EAAY+B,IAAZ,CAAN,QAA6B/B,CAAC,CAACqB,cAA/B,CANlB;AAOmB,yBAASrB,CAAT,EAAY+B,IAAZ,CAPnB;;;;AAWmB/B,EAAAA,CAAC,CAACqB,cAXrB,EAW6CrB,CAAC,CAACkC,aAX/C;;;AAcKtC,EAAAA,aAAa,CAACC,KAdnB;;AAgBaG,EAAAA,CAAC,CAACqB,cAhBf;;;;AAoBD;;AAED,SAASZ,QAAT,CAAkBT,CAAlB,EAA4B+B,IAA5B,EAA4C;AAC1C,aAAOlB,YAAP;AACYb,EAAAA,CAAC,CAACmC,eADd,EACuCnC,CAAC,CAACoC,aADzC;AAEapC,EAAAA,CAAC,CAACqB,cAFf;AAGW,yBAASrB,CAAT,EAAY+B,IAAZ,CAHX;;AAKY,yBAAS/B,CAAT,EAAY+B,IAAZ,CALZ;;;AAQD","sourcesContent":["import { css, memoizeStyle, prefix } from '../../lib/theming/Emotion';\nimport { shift } from '../../lib/styles/DimensionFunctions';\nimport * as ColorFunctions from '../../lib/styles/ColorFunctions';\nimport { Theme } from '../../lib/theming/Theme';\nimport { SizeProp } from '../../lib/types/props';\n\nimport { fontSize, lineHeight, paddingX, paddingY } from './helpers';\n\nexport const globalClasses = prefix('tab')({\n  focus: 'focus',\n});\n\nexport const styles = memoizeStyle({\n  rootSmall(t: Theme) {\n    return tabRoot(t, 'small');\n  },\n\n  rootMedium(t: Theme) {\n    return tabRoot(t, 'medium');\n  },\n\n  rootLarge(t: Theme) {\n    return tabRoot(t, 'large');\n  },\n\n  verticalSmall(t: Theme) {\n    return tabVertical(t, 'small');\n  },\n\n  verticalMedium(t: Theme) {\n    return tabVertical(t, 'medium');\n  },\n\n  verticalLarge(t: Theme) {\n    return tabVertical(t, 'large');\n  },\n\n  focusSmall(t: Theme) {\n    return tabFocus(t, 'small');\n  },\n\n  focusMedium(t: Theme) {\n    return tabFocus(t, 'medium');\n  },\n\n  focusLarge(t: Theme) {\n    return tabFocus(t, 'large');\n  },\n\n  disabled(t: Theme) {\n    return css`\n      color: rgba(\n        ${ColorFunctions.red(t.tabTextColorDefault)},\n        ${ColorFunctions.green(t.tabTextColorDefault)},\n        ${ColorFunctions.blue(t.tabTextColorDefault)},\n        0.5\n      );\n      cursor: default;\n    `;\n  },\n\n  active() {\n    return css`\n      cursor: default;\n    `;\n  },\n});\n\nexport const horizontalStyles = memoizeStyle({\n  active(t: Theme) {\n    return css`\n      &:hover {\n        border-bottom: ${t.tabBorderWidth} solid transparent;\n      }\n    `;\n  },\n\n  disabled() {\n    return css`\n      &:hover {\n        border-bottom-color: transparent;\n      }\n    `;\n  },\n\n  primary(t: Theme) {\n    return css`\n      &:hover {\n        border-bottom-color: ${t.tabColorHoverPrimary};\n      }\n    `;\n  },\n\n  success(t: Theme) {\n    return css`\n      &:hover {\n        border-bottom-color: ${t.tabColorHoverSuccess};\n      }\n    `;\n  },\n\n  warning(t: Theme) {\n    return css`\n      &:hover {\n        border-bottom-color: ${t.tabColorHoverWarning};\n      }\n    `;\n  },\n\n  error(t: Theme) {\n    return css`\n      &:hover {\n        border-bottom-color: ${t.tabColorHoverError};\n      }\n    `;\n  },\n});\n\nexport const verticalStyles = memoizeStyle({\n  active(t: Theme) {\n    return css`\n      &:hover {\n        border-left: ${t.tabBorderWidth} solid transparent;\n      }\n    `;\n  },\n\n  disabled() {\n    return css`\n      &:hover {\n        border-left-color: transparent;\n      }\n    `;\n  },\n\n  primary(t: Theme) {\n    return css`\n      &:hover {\n        border-left-color: ${t.tabColorHoverPrimary};\n      }\n    `;\n  },\n\n  success(t: Theme) {\n    return css`\n      &:hover {\n        border-left-color: ${t.tabColorHoverSuccess};\n      }\n    `;\n  },\n\n  warning(t: Theme) {\n    return css`\n      &:hover {\n        border-left-color: ${t.tabColorHoverWarning};\n      }\n    `;\n  },\n\n  error(t: Theme) {\n    return css`\n      &:hover {\n        border-left-color: ${t.tabColorHoverError};\n      }\n    `;\n  },\n});\n\nfunction tabRoot(t: Theme, size: SizeProp) {\n  return css`\n    border-bottom: ${t.tabBorderWidth} solid transparent;\n    box-sizing: border-box;\n    color: ${t.tabTextColorDefault};\n    cursor: pointer;\n    display: inline-block;\n    font-size: ${fontSize(t, size)};\n    line-height: ${lineHeight(t, size)};\n    margin-left: ${paddingX(t, size)};\n    margin-right: ${paddingX(t, size)};\n    padding-bottom: calc(${paddingY(t, size)} - ${t.tabBorderWidth});\n    padding-top: ${paddingY(t, size)};\n    position: relative;\n    text-decoration: inherit;\n    transition: border-bottom ${t.transitionDuration} ${t.transitionTimingFunction};\n\n    &:hover {\n      outline: inherit;\n      border-bottom: ${t.tabBorderWidth} solid ${t.tabColorHover};\n    }\n\n    &:focus {\n      outline: inherit;\n    }\n  `;\n}\n\nfunction tabVertical(t: Theme, size: SizeProp) {\n  return css`\n    border-bottom: none;\n    border-left: ${t.tabBorderWidth} solid transparent;\n    display: block;\n    margin-left: 0;\n    margin-right: 0;\n    padding-left: ${shift(paddingX(t, size), `-${t.tabBorderWidth}`)};\n    padding-right: ${paddingX(t, size)};\n\n    &:hover {\n      border-bottom: none;\n      border-left: ${t.tabBorderWidth} solid ${t.tabColorHover};\n    }\n\n    .${globalClasses.focus} {\n      bottom: 0;\n      left: -${t.tabBorderWidth};\n      right: 0;\n    }\n  `;\n}\n\nfunction tabFocus(t: Theme, size: SizeProp) {\n  return css`\n    border: ${t.tabOutlineWidth} solid ${t.tabColorFocus};\n    bottom: -${t.tabBorderWidth};\n    left: -${paddingX(t, size)};\n    position: absolute;\n    right: -${paddingX(t, size)};\n    top: 0;\n  `;\n}\n"]}

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

@@ -1,54 +1,51 @@
-import React from 'react';
-import PropTypes from 'prop-types';
+import React, { AriaAttributes } from 'react';
 import { CommonProps } from '../../internal/CommonWrapper';
+import { SizeProp } from '../../lib/types/props';
 import { Tab } from './Tab';
 declare type ValueBaseType = string;
 export interface TabsProps<T extends ValueBaseType = string> extends CommonProps {
     /**
-     * Tab component should be child of Tabs component
-     */
-    children?: React.ReactNode;
-    /**
-     * Classname of indicator
+     * Позволяет задать кастомный класс подчёркиванию таба.
      */
     indicatorClassName?: string;
     /**
-     * Tabs change event
+     * Задаёт размер контрола.
+     *
+     * **Допустимые значения**: `"small"`, `"medium"`, `"large"`.
      */
-    onValueChange?: (value: T) => void;
+    size?: SizeProp;
     /**
-     * Active tab identifier
+     * Задаёт текущий активный `<Tab />`. Принимает `id` таба.
      */
     value: T;
     /**
-     * Vertical indicator
+     * Функция, позволяющая изменить текущий активный `<Tab />`.
+     */
+    onValueChange?: (value: T) => void;
+    /**
+     * Переводит компонент в режим вертикального отображения.
      * @default false
      */
     vertical?: boolean;
     /**
-     * Width of tabs container
+     * `CSS`-свойство `width`.
      */
     width?: number | string;
+    /**
+     * Атрибут для указания id элемента(-ов), описывающих его.
+     */
+    'aria-describedby'?: AriaAttributes['aria-describedby'];
 }
 export declare const TabsDataTids: {
     readonly root: "Tabs__root";
     readonly indicatorRoot: "Indicator__root";
 };
-declare type DefaultProps = Required<Pick<TabsProps, 'vertical'>>;
+declare type DefaultProps = Required<Pick<TabsProps, 'vertical' | 'size'>>;
 /**
- * Tabs wrapper
- *
- * contains static property `Tab`
+ * Родитель компонента `<Tab />`. Связывает `Tab`'ы в группу и позволяет управлять их состоянием.
  */
 export declare class Tabs<T extends string = string> extends React.Component<TabsProps<T>> {
     static __KONTUR_REACT_UI__: string;
-    static propTypes: {
-        children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
-        indicatorClassName: PropTypes.Requireable<string>;
-        value: PropTypes.Validator<string>;
-        vertical: PropTypes.Requireable<boolean>;
-        width: PropTypes.Requireable<string | number>;
-    };
     static defaultProps: DefaultProps;
     private getProps;
     static Tab: typeof Tab;

package/cjs/components/Tabs/Tabs.js

@@ -1,5 +1,5 @@
 "use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");exports.__esModule = true;exports.TabsDataTids = exports.Tabs = void 0;var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));var _inheritsLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/inheritsLoose"));var _react = _interopRequireDefault(require("react"));
-var _propTypes = _interopRequireDefault(require("prop-types"));
+var _globalObject = require("@skbkontur/global-object");
 
 
 var _ThemeContext = require("../../lib/theming/ThemeContext");
@@ -10,6 +10,8 @@ var _getRootNode = require("../../lib/rootNode/getRootNode");
 var _rootNode = require("../../lib/rootNode");
 var _createPropsGetter = require("../../lib/createPropsGetter");
 
+var _isInstanceOf = require("../../lib/isInstanceOf");
+
 var _Indicator = require("./Indicator");
 var _Tabs = require("./Tabs.styles");
 var _TabsContext = require("./TabsContext");
@@ -54,26 +56,25 @@ var _Tab = require("./Tab");var _class, _class2, _temp;
 
 
 
-var TabsDataTids = {
-  root: 'Tabs__root',
-  indicatorRoot: 'Indicator__root' };exports.TabsDataTids = TabsDataTids;
 
 
 
 
-/**
- * Tabs wrapper
- *
- * contains static property `Tab`
- */var
 
-Tabs = (0, _rootNode.rootNode)(_class = (_temp = _class2 = /*#__PURE__*/function (_React$Component) {(0, _inheritsLoose2.default)(Tabs, _React$Component);function Tabs() {var _this;for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {args[_key] = arguments[_key];}_this = _React$Component.call.apply(_React$Component, [this].concat(args)) || this;_this.
 
 
+var TabsDataTids = {
+  root: 'Tabs__root',
+  indicatorRoot: 'Indicator__root' };exports.TabsDataTids = TabsDataTids;
 
 
 
 
+/**
+ * Родитель компонента `<Tab />`. Связывает `Tab`'ы в группу и позволяет управлять их состоянием.
+ */var
+
+Tabs = (0, _rootNode.rootNode)(_class = (_temp = _class2 = /*#__PURE__*/function (_React$Component) {(0, _inheritsLoose2.default)(Tabs, _React$Component);function Tabs() {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.
 
 
 
@@ -134,6 +135,13 @@ Tabs = (0, _rootNode.rootNode)(_class = (_temp = _class2 = /*#__PURE__*/function
 
 
 
+
+
+
+
+
+
+
 
 
 
@@ -151,7 +159,7 @@ Tabs = (0, _rootNode.rootNode)(_class = (_temp = _class2 = /*#__PURE__*/function
       var tabNode = tab.getNode();
       var htmlNode = (0, _getRootNode.getRootNode)(tabNode);
 
-      if (htmlNode && htmlNode instanceof HTMLElement && typeof htmlNode.focus === 'function') {
+      if ((0, _isInstanceOf.isInstanceOf)(htmlNode, _globalObject.globalObject.HTMLElement) && typeof htmlNode.focus === 'function') {
         htmlNode.focus();
       }
     };_this.
@@ -178,4 +186,4 @@ Tabs = (0, _rootNode.rootNode)(_class = (_temp = _class2 = /*#__PURE__*/function
 
     removeTab = function (id) {
       _this.tabs = _this.tabs.filter(function (tab) {return tab.id !== id;});
-    };return _this;}var _proto = Tabs.prototype;_proto.render = function render() {var _this2 = this;var _this$props2 = this.props,value = _this$props2.value,width = _this$props2.width,children = _this$props2.children,indicatorClassName = _this$props2.indicatorClassName;var vertical = this.getProps().vertical;return /*#__PURE__*/_react.default.createElement(_ThemeContext.ThemeContext.Consumer, null, function (theme) {_this2.theme = theme;return /*#__PURE__*/_react.default.createElement(_CommonWrapper.CommonWrapper, (0, _extends2.default)({ rootNodeRef: _this2.setRootNode }, _this2.props), /*#__PURE__*/_react.default.createElement("div", { "data-tid": TabsDataTids.root, className: (0, _Emotion.cx)(_Tabs.styles.root(_this2.theme), vertical && _Tabs.styles.vertical()), style: { width: width } }, /*#__PURE__*/_react.default.createElement(_TabsContext.TabsContext.Provider, { value: { vertical: vertical, activeTab: value, getTab: _this2.getTab, addTab: _this2.addTab, removeTab: _this2.removeTab, notifyUpdate: _this2.notifyUpdate, shiftFocus: _this2.shiftFocus, switchTab: _this2.switchTab } }, children, /*#__PURE__*/_react.default.createElement(_Indicator.Indicator, { className: indicatorClassName, tabUpdates: _this2.tabUpdates, vertical: _this2.getProps().vertical }))));});};return Tabs;}(_react.default.Component), _class2.__KONTUR_REACT_UI__ = 'Tabs', _class2.propTypes = { children: _propTypes.default.node, indicatorClassName: _propTypes.default.string, value: _propTypes.default.string.isRequired, vertical: _propTypes.default.bool, width: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]) }, _class2.defaultProps = { vertical: false }, _class2.Tab = _Tab.Tab, _temp)) || _class;exports.Tabs = Tabs;
+    };return _this;}var _proto = Tabs.prototype;_proto.render = function render() {var _this2 = this;var _this$props2 = this.props,value = _this$props2.value,width = _this$props2.width,children = _this$props2.children,indicatorClassName = _this$props2.indicatorClassName,ariaDescribedby = _this$props2['aria-describedby'];var _this$getProps = this.getProps(),vertical = _this$getProps.vertical,size = _this$getProps.size;return /*#__PURE__*/_react.default.createElement(_ThemeContext.ThemeContext.Consumer, null, function (theme) {var _cx;_this2.theme = theme;return /*#__PURE__*/_react.default.createElement(_CommonWrapper.CommonWrapper, (0, _extends2.default)({ rootNodeRef: _this2.setRootNode }, _this2.props), /*#__PURE__*/_react.default.createElement("div", { "data-tid": TabsDataTids.root, className: (0, _Emotion.cx)((_cx = {}, _cx[_Tabs.styles.rootSmall(_this2.theme)] = size === 'small', _cx[_Tabs.styles.rootMedium(_this2.theme)] = size === 'medium', _cx[_Tabs.styles.rootLarge(_this2.theme)] = size === 'large', _cx[_Tabs.styles.vertical()] = vertical, _cx)), style: { width: width }, "aria-describedby": ariaDescribedby }, /*#__PURE__*/_react.default.createElement(_TabsContext.TabsContext.Provider, { value: { vertical: vertical, activeTab: value, size: size, getTab: _this2.getTab, addTab: _this2.addTab, removeTab: _this2.removeTab, notifyUpdate: _this2.notifyUpdate, shiftFocus: _this2.shiftFocus, switchTab: _this2.switchTab } }, children, /*#__PURE__*/_react.default.createElement(_Indicator.Indicator, { className: indicatorClassName, tabUpdates: _this2.tabUpdates, vertical: _this2.getProps().vertical }))));});};return Tabs;}(_react.default.Component), _class2.__KONTUR_REACT_UI__ = 'Tabs', _class2.defaultProps = { vertical: false, size: 'large' }, _class2.Tab = _Tab.Tab, _temp)) || _class;exports.Tabs = Tabs;