@salutejs/sdds-dfa 0.321.0-canary.2199.17384366399.0 → 0.321.0-canary.2203.17433640523.0

package/components/Tabs/TabItem.js

@@ -2,28 +2,84 @@
 Object.defineProperty(exports, "__esModule", {
     value: true
 });
-Object.defineProperty(exports, "TabItem", {
-    enumerable: true,
-    get: function() {
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: Object.getOwnPropertyDescriptor(all, name).get
+    });
+}
+_export(exports, {
+    get IconTabItem () {
+        return IconTabItem;
+    },
+    get TabItem () {
         return TabItem;
     }
 });
 var _react = /*#__PURE__*/ _interop_require_default(require("react"));
 var _styledcomponents = require("@salutejs/plasma-new-hope/styled-components");
 var _HorizontalTabItemconfig = require("./horizontal/HorizontalTabItem.config");
+var _HorizontalIconTabItemconfig = require("./horizontal/HorizontalIconTabItem.config");
 var _VerticalTabItemconfig = require("./vertical/VerticalTabItem.config");
+var _VerticalIconTabItemconfig = require("./vertical/VerticalIconTabItem.config");
+function _define_property(obj, key, value) {
+    if (key in obj) {
+        Object.defineProperty(obj, key, {
+            value: value,
+            enumerable: true,
+            configurable: true,
+            writable: true
+        });
+    } else {
+        obj[key] = value;
+    }
+    return obj;
+}
 function _interop_require_default(obj) {
     return obj && obj.__esModule ? obj : {
         default: obj
     };
 }
+function _object_spread(target) {
+    for(var i = 1; i < arguments.length; i++){
+        var source = arguments[i] != null ? arguments[i] : {};
+        var ownKeys = Object.keys(source);
+        if (typeof Object.getOwnPropertySymbols === "function") {
+            ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function(sym) {
+                return Object.getOwnPropertyDescriptor(source, sym).enumerable;
+            }));
+        }
+        ownKeys.forEach(function(key) {
+            _define_property(target, key, source[key]);
+        });
+    }
+    return target;
+}
 var mergedHorizontalTabItemConfig = (0, _styledcomponents.mergeConfig)(_styledcomponents.horizontalTabItemConfig, _HorizontalTabItemconfig.config);
 var HorizontalTabItem = (0, _styledcomponents.component)(mergedHorizontalTabItemConfig);
+var mergedHorizontalIconTabItemConfig = (0, _styledcomponents.mergeConfig)(_styledcomponents.horizontalIconTabItemConfig, _HorizontalIconTabItemconfig.config);
+var HorizontalIconTabItem = (0, _styledcomponents.component)(mergedHorizontalIconTabItemConfig);
 var mergedVerticalTabItemConfig = (0, _styledcomponents.mergeConfig)(_styledcomponents.verticalTabItemConfig, _VerticalTabItemconfig.config);
 var VerticalTabItem = (0, _styledcomponents.component)(mergedVerticalTabItemConfig);
-var TabItem = function(props) {
+var mergedVerticalIconTabItemConfig = (0, _styledcomponents.mergeConfig)(_styledcomponents.verticalIconTabItemConfig, _VerticalIconTabItemconfig.config);
+var VerticalIconTabItem = (0, _styledcomponents.component)(mergedVerticalIconTabItemConfig);
+var TabItem = (0, _styledcomponents.fixedForwardRef)(function(props, ref) {
     if (props.orientation === 'vertical') {
-        return /*#__PURE__*/ _react.default.createElement(VerticalTabItem, props);
+        return /*#__PURE__*/ _react.default.createElement(VerticalTabItem, _object_spread({
+            ref: ref
+        }, props));
     }
-    return /*#__PURE__*/ _react.default.createElement(HorizontalTabItem, props);
-};
+    return /*#__PURE__*/ _react.default.createElement(HorizontalTabItem, _object_spread({
+        ref: ref
+    }, props));
+});
+var IconTabItem = (0, _styledcomponents.fixedForwardRef)(function(props, ref) {
+    if (props.orientation === 'vertical') {
+        return /*#__PURE__*/ _react.default.createElement(VerticalIconTabItem, _object_spread({
+            ref: ref
+        }, props));
+    }
+    return /*#__PURE__*/ _react.default.createElement(HorizontalIconTabItem, _object_spread({
+        ref: ref
+    }, props));
+});

package/components/Tabs/horizontal/HorizontalIconTabItem.config.d.ts

@@ -0,0 +1,28 @@
+export declare const config: {
+    defaults: {
+        view: string;
+        size: string;
+    };
+    variations: {
+        view: {
+            clear: import("@salutejs/plasma-new-hope/types/engines/types").PolymorphicClassName;
+            secondary: import("@salutejs/plasma-new-hope/types/engines/types").PolymorphicClassName;
+            divider: import("@salutejs/plasma-new-hope/types/engines/types").PolymorphicClassName;
+            default: import("@salutejs/plasma-new-hope/types/engines/types").PolymorphicClassName;
+        };
+        size: {
+            xs: import("@salutejs/plasma-new-hope/types/engines/types").PolymorphicClassName;
+            s: import("@salutejs/plasma-new-hope/types/engines/types").PolymorphicClassName;
+            m: import("@salutejs/plasma-new-hope/types/engines/types").PolymorphicClassName;
+            l: import("@salutejs/plasma-new-hope/types/engines/types").PolymorphicClassName;
+            h5: import("@salutejs/plasma-new-hope/types/engines/types").PolymorphicClassName;
+            h4: import("@salutejs/plasma-new-hope/types/engines/types").PolymorphicClassName;
+            h3: import("@salutejs/plasma-new-hope/types/engines/types").PolymorphicClassName;
+            h2: import("@salutejs/plasma-new-hope/types/engines/types").PolymorphicClassName;
+            h1: import("@salutejs/plasma-new-hope/types/engines/types").PolymorphicClassName;
+        };
+        disabled: {
+            true: import("@salutejs/plasma-new-hope/types/engines/types").PolymorphicClassName;
+        };
+    };
+};

package/components/Tabs/horizontal/HorizontalIconTabItem.config.js

@@ -0,0 +1,268 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "config", {
+    enumerable: true,
+    get: function() {
+        return config;
+    }
+});
+var _styledcomponents = require("@salutejs/plasma-new-hope/styled-components");
+function _tagged_template_literal(strings, raw) {
+    if (!raw) {
+        raw = strings.slice(0);
+    }
+    return Object.freeze(Object.defineProperties(strings, {
+        raw: {
+            value: Object.freeze(raw)
+        }
+    }));
+}
+function _templateObject() {
+    var data = _tagged_template_literal([
+        "\n                ",
+        ": var(--text-secondary);\n                ",
+        ": transparent;\n                ",
+        ": var(--text-secondary-hover);\n                ",
+        ": var(--text-secondary-active);\n                ",
+        ": transparent;\n                ",
+        ": var(--text-primary);\n                ",
+        ": transparent;\n                ",
+        ": var(--text-primary);\n                ",
+        ": transparent;\n                ",
+        ": background-color 0.3s ease-in-out;\n\n                ",
+        ": var(--surface-accent);\n\n                ",
+        ": 0;\n\n                ",
+        ": pointer;\n            "
+    ]);
+    _templateObject = function _templateObject() {
+        return data;
+    };
+    return data;
+}
+function _templateObject1() {
+    var data = _tagged_template_literal([
+        "\n                ",
+        ": var(--text-primary);\n                ",
+        ": transparent;\n                ",
+        ": var(--text-secondary-hover);\n                ",
+        ": var(--text-secondary-active);\n                ",
+        ": transparent;\n                ",
+        ": var(--text-primary);\n                ",
+        ": var(--surface-solid-card);\n                ",
+        ": var(--text-primary);\n                ",
+        ": var(--surface-solid-card);\n                ",
+        ": background-color 0.3s ease-in-out;\n\n                ",
+        ": 0.125rem;\n\n                ",
+        ": var(--surface-accent);\n\n                ",
+        ": 0;\n\n                ",
+        ": pointer;\n            "
+    ]);
+    _templateObject1 = function _templateObject() {
+        return data;
+    };
+    return data;
+}
+function _templateObject2() {
+    var data = _tagged_template_literal([
+        "\n                ",
+        ": var(--text-secondary);\n                ",
+        ": transparent;\n                ",
+        ": var(--text-secondary-hover);\n                ",
+        ": var(--text-secondary-active);\n                ",
+        ": transparent;\n                ",
+        ": var(--text-primary);\n                ",
+        ": transparent;\n                ",
+        ": var(--text-primary);\n                ",
+        ": transparent;\n                ",
+        ": background-color 0.3s ease-in-out;\n\n                ",
+        ": var(--surface-accent);\n\n                ",
+        ": 0.125rem;\n                ",
+        ": var(--text-primary);\n                ",
+        ": var(--text-primary);\n\n                ",
+        ": pointer;\n            "
+    ]);
+    _templateObject2 = function _templateObject() {
+        return data;
+    };
+    return data;
+}
+function _templateObject3() {
+    var data = _tagged_template_literal([
+        "\n                ",
+        ": var(--text-primary);\n                ",
+        ": transparent;\n                ",
+        ": var(--text-secondary-hover);\n                ",
+        ": var(--text-secondary-active);\n                ",
+        ": transparent;\n                ",
+        ": var(--inverse-text-primary);\n                ",
+        ": var(--surface-solid-default);\n                ",
+        ": var(--inverse-text-primary);\n                ",
+        ": var(--surface-solid-default);\n                ",
+        ": background-color 0.3s ease-in-out;\n\n                ",
+        ": 0.125rem;\n\n                ",
+        ": var(--surface-accent);\n\n                ",
+        ": 0;\n\n                ",
+        ": pointer;\n            "
+    ]);
+    _templateObject3 = function _templateObject() {
+        return data;
+    };
+    return data;
+}
+function _templateObject4() {
+    var data = _tagged_template_literal([
+        "\n                ",
+        ": 0.375rem;\n                ",
+        ": 0.5rem 0.625rem;\n                ",
+        ": 0.25rem;\n\n                ",
+        ": 0;\n            "
+    ]);
+    _templateObject4 = function _templateObject() {
+        return data;
+    };
+    return data;
+}
+function _templateObject5() {
+    var data = _tagged_template_literal([
+        "\n                ",
+        ": 0.5rem;\n                ",
+        ": 0.5rem 0.625rem;\n                ",
+        ": 0.25rem;\n\n                ",
+        ": 0.125rem;\n            "
+    ]);
+    _templateObject5 = function _templateObject() {
+        return data;
+    };
+    return data;
+}
+function _templateObject6() {
+    var data = _tagged_template_literal([
+        "\n                ",
+        ": 0.625rem;\n                ",
+        ": 0.75rem 0.875rem;\n                ",
+        ": 0.375rem;\n\n                ",
+        ": 0.25rem;\n            "
+    ]);
+    _templateObject6 = function _templateObject() {
+        return data;
+    };
+    return data;
+}
+function _templateObject7() {
+    var data = _tagged_template_literal([
+        "\n                ",
+        ": 0.75rem;\n                ",
+        ": 1rem 1.125rem;\n                ",
+        ": 0.5rem;\n\n                ",
+        ": 0.125rem;\n            "
+    ]);
+    _templateObject7 = function _templateObject() {
+        return data;
+    };
+    return data;
+}
+function _templateObject8() {
+    var data = _tagged_template_literal([
+        "\n                ",
+        ": 0.375rem;\n                ",
+        ": 0rem;\n                ",
+        ": 0.625rem;\n\n                ",
+        ": -0.125rem;\n            "
+    ]);
+    _templateObject8 = function _templateObject() {
+        return data;
+    };
+    return data;
+}
+function _templateObject9() {
+    var data = _tagged_template_literal([
+        "\n                ",
+        ": 0.375rem;\n                ",
+        ": 0rem;\n                ",
+        ": 0.625rem;\n\n                ",
+        ": -0.125rem;\n            "
+    ]);
+    _templateObject9 = function _templateObject() {
+        return data;
+    };
+    return data;
+}
+function _templateObject10() {
+    var data = _tagged_template_literal([
+        "\n                ",
+        ": 0.5rem;\n                ",
+        ": 0rem;\n                ",
+        ": 0.75rem;\n\n                ",
+        ": -0.125rem;\n            "
+    ]);
+    _templateObject10 = function _templateObject() {
+        return data;
+    };
+    return data;
+}
+function _templateObject11() {
+    var data = _tagged_template_literal([
+        "\n                ",
+        ": 0.625rem;\n                ",
+        ": 0rem;\n                ",
+        ": 0.875rem;\n\n                ",
+        ": -0.125rem;\n            "
+    ]);
+    _templateObject11 = function _templateObject() {
+        return data;
+    };
+    return data;
+}
+function _templateObject12() {
+    var data = _tagged_template_literal([
+        "\n                ",
+        ": 0.75rem;\n                ",
+        ": 0rem;\n                ",
+        ": 1rem;\n\n                ",
+        ": 0;\n            "
+    ]);
+    _templateObject12 = function _templateObject() {
+        return data;
+    };
+    return data;
+}
+function _templateObject13() {
+    var data = _tagged_template_literal([
+        "\n                ",
+        ": 0.4;\n            "
+    ]);
+    _templateObject13 = function _templateObject() {
+        return data;
+    };
+    return data;
+}
+var config = {
+    defaults: {
+        view: 'default',
+        size: 'xs'
+    },
+    variations: {
+        view: {
+            clear: (0, _styledcomponents.css)(_templateObject(), _styledcomponents.tabsTokens.itemColor, _styledcomponents.tabsTokens.itemBackgroundColor, _styledcomponents.tabsTokens.itemColorHover, _styledcomponents.tabsTokens.itemColorActive, _styledcomponents.tabsTokens.itemBackgroundColorHover, _styledcomponents.tabsTokens.itemSelectedColor, _styledcomponents.tabsTokens.itemSelectedBackgroundColor, _styledcomponents.tabsTokens.itemSelectedColorHover, _styledcomponents.tabsTokens.itemSelectedBackgroundColorHover, _styledcomponents.tabsTokens.itemBackgroundTransition, _styledcomponents.tabsTokens.outlineFocusColor, _styledcomponents.tabsTokens.itemSelectedDividerHeight, _styledcomponents.tabsTokens.itemCursor),
+            secondary: (0, _styledcomponents.css)(_templateObject1(), _styledcomponents.tabsTokens.itemColor, _styledcomponents.tabsTokens.itemBackgroundColor, _styledcomponents.tabsTokens.itemColorHover, _styledcomponents.tabsTokens.itemColorActive, _styledcomponents.tabsTokens.itemBackgroundColorHover, _styledcomponents.tabsTokens.itemSelectedColor, _styledcomponents.tabsTokens.itemSelectedBackgroundColor, _styledcomponents.tabsTokens.itemSelectedColorHover, _styledcomponents.tabsTokens.itemSelectedBackgroundColorHover, _styledcomponents.tabsTokens.itemBackgroundTransition, _styledcomponents.tabsTokens.itemMarginLeftFilled, _styledcomponents.tabsTokens.outlineFocusColor, _styledcomponents.tabsTokens.itemSelectedDividerHeight, _styledcomponents.tabsTokens.itemCursor),
+            divider: (0, _styledcomponents.css)(_templateObject2(), _styledcomponents.tabsTokens.itemColor, _styledcomponents.tabsTokens.itemBackgroundColor, _styledcomponents.tabsTokens.itemColorHover, _styledcomponents.tabsTokens.itemColorActive, _styledcomponents.tabsTokens.itemBackgroundColorHover, _styledcomponents.tabsTokens.itemSelectedColor, _styledcomponents.tabsTokens.itemSelectedBackgroundColor, _styledcomponents.tabsTokens.itemSelectedColorHover, _styledcomponents.tabsTokens.itemSelectedBackgroundColorHover, _styledcomponents.tabsTokens.itemBackgroundTransition, _styledcomponents.tabsTokens.outlineFocusColor, _styledcomponents.tabsTokens.itemSelectedDividerHeight, _styledcomponents.tabsTokens.itemSelectedDividerColor, _styledcomponents.tabsTokens.itemSelectedDividerColorHover, _styledcomponents.tabsTokens.itemCursor),
+            default: (0, _styledcomponents.css)(_templateObject3(), _styledcomponents.tabsTokens.itemColor, _styledcomponents.tabsTokens.itemBackgroundColor, _styledcomponents.tabsTokens.itemColorHover, _styledcomponents.tabsTokens.itemColorActive, _styledcomponents.tabsTokens.itemBackgroundColorHover, _styledcomponents.tabsTokens.itemSelectedColor, _styledcomponents.tabsTokens.itemSelectedBackgroundColor, _styledcomponents.tabsTokens.itemSelectedColorHover, _styledcomponents.tabsTokens.itemSelectedBackgroundColorHover, _styledcomponents.tabsTokens.itemBackgroundTransition, _styledcomponents.tabsTokens.itemMarginLeftFilled, _styledcomponents.tabsTokens.outlineFocusColor, _styledcomponents.tabsTokens.itemSelectedDividerHeight, _styledcomponents.tabsTokens.itemCursor)
+        },
+        size: {
+            xs: (0, _styledcomponents.css)(_templateObject4(), _styledcomponents.tabsTokens.itemBorderRadius, _styledcomponents.tabsTokens.itemPadding, _styledcomponents.tabsTokens.itemContentGap, _styledcomponents.tabsTokens.actionContentMarginLeft),
+            s: (0, _styledcomponents.css)(_templateObject5(), _styledcomponents.tabsTokens.itemBorderRadius, _styledcomponents.tabsTokens.itemPadding, _styledcomponents.tabsTokens.itemContentGap, _styledcomponents.tabsTokens.actionContentMarginLeft),
+            m: (0, _styledcomponents.css)(_templateObject6(), _styledcomponents.tabsTokens.itemBorderRadius, _styledcomponents.tabsTokens.itemPadding, _styledcomponents.tabsTokens.itemContentGap, _styledcomponents.tabsTokens.actionContentMarginLeft),
+            l: (0, _styledcomponents.css)(_templateObject7(), _styledcomponents.tabsTokens.itemBorderRadius, _styledcomponents.tabsTokens.itemPadding, _styledcomponents.tabsTokens.itemContentGap, _styledcomponents.tabsTokens.actionContentMarginLeft),
+            h5: (0, _styledcomponents.css)(_templateObject8(), _styledcomponents.tabsTokens.itemBorderRadius, _styledcomponents.tabsTokens.itemPadding, _styledcomponents.tabsTokens.itemContentGap, _styledcomponents.tabsTokens.actionContentMarginLeft),
+            h4: (0, _styledcomponents.css)(_templateObject9(), _styledcomponents.tabsTokens.itemBorderRadius, _styledcomponents.tabsTokens.itemPadding, _styledcomponents.tabsTokens.itemContentGap, _styledcomponents.tabsTokens.actionContentMarginLeft),
+            h3: (0, _styledcomponents.css)(_templateObject10(), _styledcomponents.tabsTokens.itemBorderRadius, _styledcomponents.tabsTokens.itemPadding, _styledcomponents.tabsTokens.itemContentGap, _styledcomponents.tabsTokens.actionContentMarginLeft),
+            h2: (0, _styledcomponents.css)(_templateObject11(), _styledcomponents.tabsTokens.itemBorderRadius, _styledcomponents.tabsTokens.itemPadding, _styledcomponents.tabsTokens.itemContentGap, _styledcomponents.tabsTokens.actionContentMarginLeft),
+            h1: (0, _styledcomponents.css)(_templateObject12(), _styledcomponents.tabsTokens.itemBorderRadius, _styledcomponents.tabsTokens.itemPadding, _styledcomponents.tabsTokens.itemContentGap, _styledcomponents.tabsTokens.actionContentMarginLeft)
+        },
+        disabled: {
+            true: (0, _styledcomponents.css)(_templateObject13(), _styledcomponents.tabsTokens.disabledOpacity)
+        }
+    }
+};

package/components/Tabs/horizontal/HorizontalTabItem.config.js

@@ -157,7 +157,8 @@ function _templateObject4() {
         ": var(--plasma-typo-body-xs-font-style);\n                ",
         ": var(--plasma-typo-body-xs-font-weight);\n                ",
         ": var(--plasma-typo-body-xs-letter-spacing);\n                ",
-        ": var(--plasma-typo-body-xs-line-height);\n            "
+        ": var(--plasma-typo-body-xs-line-height);\n\n                ",
+        ": 0;\n            "
     ]);
     _templateObject4 = function _templateObject() {
         return data;
@@ -180,7 +181,8 @@ function _templateObject5() {
         ": var(--plasma-typo-body-s-font-style);\n                ",
         ": var(--plasma-typo-body-s-font-weight);\n                ",
         ": var(--plasma-typo-body-s-letter-spacing);\n                ",
-        ": var(--plasma-typo-body-s-line-height);\n            "
+        ": var(--plasma-typo-body-s-line-height);\n\n                ",
+        ": 0.125rem;\n            "
     ]);
     _templateObject5 = function _templateObject() {
         return data;
@@ -203,7 +205,8 @@ function _templateObject6() {
         ": var(--plasma-typo-body-m-font-style);\n                ",
         ": var(--plasma-typo-body-m-font-weight);\n                ",
         ": var(--plasma-typo-body-m-letter-spacing);\n                ",
-        ": var(--plasma-typo-body-m-line-height);\n            "
+        ": var(--plasma-typo-body-m-line-height);\n\n                ",
+        ": 0.25rem;\n            "
     ]);
     _templateObject6 = function _templateObject() {
         return data;
@@ -226,7 +229,8 @@ function _templateObject7() {
         ": var(--plasma-typo-body-l-font-style);\n                ",
         ": var(--plasma-typo-body-l-font-weight);\n                ",
         ": var(--plasma-typo-body-l-letter-spacing);\n                ",
-        ": var(--plasma-typo-body-l-line-height);\n            "
+        ": var(--plasma-typo-body-l-line-height);\n\n                ",
+        ": 0.125rem;\n            "
     ]);
     _templateObject7 = function _templateObject() {
         return data;
@@ -247,7 +251,8 @@ function _templateObject8() {
         ": var(--plasma-typo-h5-font-style);\n                ",
         ": var(--plasma-typo-h5-font-weight);\n                ",
         ": var(--plasma-typo-h5-letter-spacing);\n                ",
-        ": var(--plasma-typo-h5-line-height);\n            "
+        ": var(--plasma-typo-h5-line-height);\n\n                ",
+        ": -0.125rem;\n            "
     ]);
     _templateObject8 = function _templateObject() {
         return data;
@@ -268,7 +273,8 @@ function _templateObject9() {
         ": var(--plasma-typo-h4-font-style);\n                ",
         ": var(--plasma-typo-h4-font-weight);\n                ",
         ": var(--plasma-typo-h4-letter-spacing);\n                ",
-        ": var(--plasma-typo-h4-line-height);\n            "
+        ": var(--plasma-typo-h4-line-height);\n\n                ",
+        ": -0.125rem;\n            "
     ]);
     _templateObject9 = function _templateObject() {
         return data;
@@ -289,7 +295,8 @@ function _templateObject10() {
         ": var(--plasma-typo-h3-font-style);\n                ",
         ": var(--plasma-typo-h3-font-weight);\n                ",
         ": var(--plasma-typo-h3-letter-spacing);\n                ",
-        ": var(--plasma-typo-h3-line-height);\n            "
+        ": var(--plasma-typo-h3-line-height);\n\n                ",
+        ": -0.125rem;\n            "
     ]);
     _templateObject10 = function _templateObject() {
         return data;
@@ -310,7 +317,8 @@ function _templateObject11() {
         ": var(--plasma-typo-h2-font-style);\n                ",
         ": var(--plasma-typo-h2-font-weight);\n                ",
         ": var(--plasma-typo-h2-letter-spacing);\n                ",
-        ": var(--plasma-typo-h2-line-height);\n            "
+        ": var(--plasma-typo-h2-line-height);\n\n                ",
+        ": -0.125rem;\n            "
     ]);
     _templateObject11 = function _templateObject() {
         return data;
@@ -331,7 +339,8 @@ function _templateObject12() {
         ": var(--plasma-typo-h1-font-style);\n                ",
         ": var(--plasma-typo-h1-font-weight);\n                ",
         ": var(--plasma-typo-h1-letter-spacing);\n                ",
-        ": var(--plasma-typo-h1-line-height);\n            "
+        ": var(--plasma-typo-h1-line-height);\n\n                ",
+        ": 0;\n            "
     ]);
     _templateObject12 = function _templateObject() {
         return data;
@@ -380,15 +389,15 @@ var config = {
             default: (0, _styledcomponents.css)(_templateObject3(), _styledcomponents.tabsTokens.itemColor, _styledcomponents.tabsTokens.itemValueColor, _styledcomponents.tabsTokens.itemBackgroundColor, _styledcomponents.tabsTokens.itemColorHover, _styledcomponents.tabsTokens.itemValueColorHover, _styledcomponents.tabsTokens.itemColorActive, _styledcomponents.tabsTokens.itemValueColorActive, _styledcomponents.tabsTokens.itemBackgroundColorHover, _styledcomponents.tabsTokens.itemSelectedColor, _styledcomponents.tabsTokens.itemSelectedValueColor, _styledcomponents.tabsTokens.itemSelectedBackgroundColor, _styledcomponents.tabsTokens.itemSelectedColorHover, _styledcomponents.tabsTokens.itemSelectedValueColorHover, _styledcomponents.tabsTokens.itemSelectedBackgroundColorHover, _styledcomponents.tabsTokens.itemBackgroundTransition, _styledcomponents.tabsTokens.itemMarginLeftFilled, _styledcomponents.tabsTokens.outlineFocusColor, _styledcomponents.tabsTokens.itemSelectedDividerHeight, _styledcomponents.tabsTokens.itemSelectedDividerColor, _styledcomponents.tabsTokens.itemSelectedDividerColorHover, _styledcomponents.tabsTokens.itemCursor)
         },
         size: {
-            xs: (0, _styledcomponents.css)(_templateObject4(), _styledcomponents.tabsTokens.itemBorderRadius, _styledcomponents.tabsTokens.itemWidth, _styledcomponents.tabsTokens.itemHeight, _styledcomponents.tabsTokens.itemPadding, _styledcomponents.tabsTokens.itemPaddingPilled, _styledcomponents.tabsTokens.itemMarginLeft, _styledcomponents.tabsTokens.itemContentGap, _styledcomponents.tabsTokens.itemContentPadding, _styledcomponents.tabsTokens.fontFamily, _styledcomponents.tabsTokens.fontSize, _styledcomponents.tabsTokens.fontStyle, _styledcomponents.tabsTokens.fontWeight, _styledcomponents.tabsTokens.letterSpacing, _styledcomponents.tabsTokens.lineHeight),
-            s: (0, _styledcomponents.css)(_templateObject5(), _styledcomponents.tabsTokens.itemBorderRadius, _styledcomponents.tabsTokens.itemWidth, _styledcomponents.tabsTokens.itemHeight, _styledcomponents.tabsTokens.itemPadding, _styledcomponents.tabsTokens.itemPaddingPilled, _styledcomponents.tabsTokens.itemMarginLeft, _styledcomponents.tabsTokens.itemContentGap, _styledcomponents.tabsTokens.itemContentPadding, _styledcomponents.tabsTokens.fontFamily, _styledcomponents.tabsTokens.fontSize, _styledcomponents.tabsTokens.fontStyle, _styledcomponents.tabsTokens.fontWeight, _styledcomponents.tabsTokens.letterSpacing, _styledcomponents.tabsTokens.lineHeight),
-            m: (0, _styledcomponents.css)(_templateObject6(), _styledcomponents.tabsTokens.itemBorderRadius, _styledcomponents.tabsTokens.itemWidth, _styledcomponents.tabsTokens.itemHeight, _styledcomponents.tabsTokens.itemPadding, _styledcomponents.tabsTokens.itemPaddingPilled, _styledcomponents.tabsTokens.itemMarginLeft, _styledcomponents.tabsTokens.itemContentGap, _styledcomponents.tabsTokens.itemContentPadding, _styledcomponents.tabsTokens.fontFamily, _styledcomponents.tabsTokens.fontSize, _styledcomponents.tabsTokens.fontStyle, _styledcomponents.tabsTokens.fontWeight, _styledcomponents.tabsTokens.letterSpacing, _styledcomponents.tabsTokens.lineHeight),
-            l: (0, _styledcomponents.css)(_templateObject7(), _styledcomponents.tabsTokens.itemBorderRadius, _styledcomponents.tabsTokens.itemWidth, _styledcomponents.tabsTokens.itemHeight, _styledcomponents.tabsTokens.itemPadding, _styledcomponents.tabsTokens.itemPaddingPilled, _styledcomponents.tabsTokens.itemMarginLeft, _styledcomponents.tabsTokens.itemContentGap, _styledcomponents.tabsTokens.itemContentPadding, _styledcomponents.tabsTokens.fontFamily, _styledcomponents.tabsTokens.fontSize, _styledcomponents.tabsTokens.fontStyle, _styledcomponents.tabsTokens.fontWeight, _styledcomponents.tabsTokens.letterSpacing, _styledcomponents.tabsTokens.lineHeight),
-            h5: (0, _styledcomponents.css)(_templateObject8(), _styledcomponents.tabsTokens.itemBorderRadius, _styledcomponents.tabsTokens.itemWidth, _styledcomponents.tabsTokens.itemHeight, _styledcomponents.tabsTokens.itemPadding, _styledcomponents.tabsTokens.itemMarginLeft, _styledcomponents.tabsTokens.itemContentGap, _styledcomponents.tabsTokens.fontFamily, _styledcomponents.tabsTokens.fontSize, _styledcomponents.tabsTokens.fontStyle, _styledcomponents.tabsTokens.fontWeight, _styledcomponents.tabsTokens.letterSpacing, _styledcomponents.tabsTokens.lineHeight),
-            h4: (0, _styledcomponents.css)(_templateObject9(), _styledcomponents.tabsTokens.itemBorderRadius, _styledcomponents.tabsTokens.itemWidth, _styledcomponents.tabsTokens.itemHeight, _styledcomponents.tabsTokens.itemPadding, _styledcomponents.tabsTokens.itemMarginLeft, _styledcomponents.tabsTokens.itemContentGap, _styledcomponents.tabsTokens.fontFamily, _styledcomponents.tabsTokens.fontSize, _styledcomponents.tabsTokens.fontStyle, _styledcomponents.tabsTokens.fontWeight, _styledcomponents.tabsTokens.letterSpacing, _styledcomponents.tabsTokens.lineHeight),
-            h3: (0, _styledcomponents.css)(_templateObject10(), _styledcomponents.tabsTokens.itemBorderRadius, _styledcomponents.tabsTokens.itemWidth, _styledcomponents.tabsTokens.itemHeight, _styledcomponents.tabsTokens.itemPadding, _styledcomponents.tabsTokens.itemMarginLeft, _styledcomponents.tabsTokens.itemContentGap, _styledcomponents.tabsTokens.fontFamily, _styledcomponents.tabsTokens.fontSize, _styledcomponents.tabsTokens.fontStyle, _styledcomponents.tabsTokens.fontWeight, _styledcomponents.tabsTokens.letterSpacing, _styledcomponents.tabsTokens.lineHeight),
-            h2: (0, _styledcomponents.css)(_templateObject11(), _styledcomponents.tabsTokens.itemBorderRadius, _styledcomponents.tabsTokens.itemWidth, _styledcomponents.tabsTokens.itemHeight, _styledcomponents.tabsTokens.itemPadding, _styledcomponents.tabsTokens.itemMarginLeft, _styledcomponents.tabsTokens.itemContentGap, _styledcomponents.tabsTokens.fontFamily, _styledcomponents.tabsTokens.fontSize, _styledcomponents.tabsTokens.fontStyle, _styledcomponents.tabsTokens.fontWeight, _styledcomponents.tabsTokens.letterSpacing, _styledcomponents.tabsTokens.lineHeight),
-            h1: (0, _styledcomponents.css)(_templateObject12(), _styledcomponents.tabsTokens.itemBorderRadius, _styledcomponents.tabsTokens.itemWidth, _styledcomponents.tabsTokens.itemHeight, _styledcomponents.tabsTokens.itemPadding, _styledcomponents.tabsTokens.itemMarginLeft, _styledcomponents.tabsTokens.itemContentGap, _styledcomponents.tabsTokens.fontFamily, _styledcomponents.tabsTokens.fontSize, _styledcomponents.tabsTokens.fontStyle, _styledcomponents.tabsTokens.fontWeight, _styledcomponents.tabsTokens.letterSpacing, _styledcomponents.tabsTokens.lineHeight)
+            xs: (0, _styledcomponents.css)(_templateObject4(), _styledcomponents.tabsTokens.itemBorderRadius, _styledcomponents.tabsTokens.itemWidth, _styledcomponents.tabsTokens.itemHeight, _styledcomponents.tabsTokens.itemPadding, _styledcomponents.tabsTokens.itemPaddingPilled, _styledcomponents.tabsTokens.itemMarginLeft, _styledcomponents.tabsTokens.itemContentGap, _styledcomponents.tabsTokens.itemContentPadding, _styledcomponents.tabsTokens.fontFamily, _styledcomponents.tabsTokens.fontSize, _styledcomponents.tabsTokens.fontStyle, _styledcomponents.tabsTokens.fontWeight, _styledcomponents.tabsTokens.letterSpacing, _styledcomponents.tabsTokens.lineHeight, _styledcomponents.tabsTokens.actionContentMarginLeft),
+            s: (0, _styledcomponents.css)(_templateObject5(), _styledcomponents.tabsTokens.itemBorderRadius, _styledcomponents.tabsTokens.itemWidth, _styledcomponents.tabsTokens.itemHeight, _styledcomponents.tabsTokens.itemPadding, _styledcomponents.tabsTokens.itemPaddingPilled, _styledcomponents.tabsTokens.itemMarginLeft, _styledcomponents.tabsTokens.itemContentGap, _styledcomponents.tabsTokens.itemContentPadding, _styledcomponents.tabsTokens.fontFamily, _styledcomponents.tabsTokens.fontSize, _styledcomponents.tabsTokens.fontStyle, _styledcomponents.tabsTokens.fontWeight, _styledcomponents.tabsTokens.letterSpacing, _styledcomponents.tabsTokens.lineHeight, _styledcomponents.tabsTokens.actionContentMarginLeft),
+            m: (0, _styledcomponents.css)(_templateObject6(), _styledcomponents.tabsTokens.itemBorderRadius, _styledcomponents.tabsTokens.itemWidth, _styledcomponents.tabsTokens.itemHeight, _styledcomponents.tabsTokens.itemPadding, _styledcomponents.tabsTokens.itemPaddingPilled, _styledcomponents.tabsTokens.itemMarginLeft, _styledcomponents.tabsTokens.itemContentGap, _styledcomponents.tabsTokens.itemContentPadding, _styledcomponents.tabsTokens.fontFamily, _styledcomponents.tabsTokens.fontSize, _styledcomponents.tabsTokens.fontStyle, _styledcomponents.tabsTokens.fontWeight, _styledcomponents.tabsTokens.letterSpacing, _styledcomponents.tabsTokens.lineHeight, _styledcomponents.tabsTokens.actionContentMarginLeft),
+            l: (0, _styledcomponents.css)(_templateObject7(), _styledcomponents.tabsTokens.itemBorderRadius, _styledcomponents.tabsTokens.itemWidth, _styledcomponents.tabsTokens.itemHeight, _styledcomponents.tabsTokens.itemPadding, _styledcomponents.tabsTokens.itemPaddingPilled, _styledcomponents.tabsTokens.itemMarginLeft, _styledcomponents.tabsTokens.itemContentGap, _styledcomponents.tabsTokens.itemContentPadding, _styledcomponents.tabsTokens.fontFamily, _styledcomponents.tabsTokens.fontSize, _styledcomponents.tabsTokens.fontStyle, _styledcomponents.tabsTokens.fontWeight, _styledcomponents.tabsTokens.letterSpacing, _styledcomponents.tabsTokens.lineHeight, _styledcomponents.tabsTokens.actionContentMarginLeft),
+            h5: (0, _styledcomponents.css)(_templateObject8(), _styledcomponents.tabsTokens.itemBorderRadius, _styledcomponents.tabsTokens.itemWidth, _styledcomponents.tabsTokens.itemHeight, _styledcomponents.tabsTokens.itemPadding, _styledcomponents.tabsTokens.itemMarginLeft, _styledcomponents.tabsTokens.itemContentGap, _styledcomponents.tabsTokens.fontFamily, _styledcomponents.tabsTokens.fontSize, _styledcomponents.tabsTokens.fontStyle, _styledcomponents.tabsTokens.fontWeight, _styledcomponents.tabsTokens.letterSpacing, _styledcomponents.tabsTokens.lineHeight, _styledcomponents.tabsTokens.actionContentMarginLeft),
+            h4: (0, _styledcomponents.css)(_templateObject9(), _styledcomponents.tabsTokens.itemBorderRadius, _styledcomponents.tabsTokens.itemWidth, _styledcomponents.tabsTokens.itemHeight, _styledcomponents.tabsTokens.itemPadding, _styledcomponents.tabsTokens.itemMarginLeft, _styledcomponents.tabsTokens.itemContentGap, _styledcomponents.tabsTokens.fontFamily, _styledcomponents.tabsTokens.fontSize, _styledcomponents.tabsTokens.fontStyle, _styledcomponents.tabsTokens.fontWeight, _styledcomponents.tabsTokens.letterSpacing, _styledcomponents.tabsTokens.lineHeight, _styledcomponents.tabsTokens.actionContentMarginLeft),
+            h3: (0, _styledcomponents.css)(_templateObject10(), _styledcomponents.tabsTokens.itemBorderRadius, _styledcomponents.tabsTokens.itemWidth, _styledcomponents.tabsTokens.itemHeight, _styledcomponents.tabsTokens.itemPadding, _styledcomponents.tabsTokens.itemMarginLeft, _styledcomponents.tabsTokens.itemContentGap, _styledcomponents.tabsTokens.fontFamily, _styledcomponents.tabsTokens.fontSize, _styledcomponents.tabsTokens.fontStyle, _styledcomponents.tabsTokens.fontWeight, _styledcomponents.tabsTokens.letterSpacing, _styledcomponents.tabsTokens.lineHeight, _styledcomponents.tabsTokens.actionContentMarginLeft),
+            h2: (0, _styledcomponents.css)(_templateObject11(), _styledcomponents.tabsTokens.itemBorderRadius, _styledcomponents.tabsTokens.itemWidth, _styledcomponents.tabsTokens.itemHeight, _styledcomponents.tabsTokens.itemPadding, _styledcomponents.tabsTokens.itemMarginLeft, _styledcomponents.tabsTokens.itemContentGap, _styledcomponents.tabsTokens.fontFamily, _styledcomponents.tabsTokens.fontSize, _styledcomponents.tabsTokens.fontStyle, _styledcomponents.tabsTokens.fontWeight, _styledcomponents.tabsTokens.letterSpacing, _styledcomponents.tabsTokens.lineHeight, _styledcomponents.tabsTokens.actionContentMarginLeft),
+            h1: (0, _styledcomponents.css)(_templateObject12(), _styledcomponents.tabsTokens.itemBorderRadius, _styledcomponents.tabsTokens.itemWidth, _styledcomponents.tabsTokens.itemHeight, _styledcomponents.tabsTokens.itemPadding, _styledcomponents.tabsTokens.itemMarginLeft, _styledcomponents.tabsTokens.itemContentGap, _styledcomponents.tabsTokens.fontFamily, _styledcomponents.tabsTokens.fontSize, _styledcomponents.tabsTokens.fontStyle, _styledcomponents.tabsTokens.fontWeight, _styledcomponents.tabsTokens.letterSpacing, _styledcomponents.tabsTokens.lineHeight, _styledcomponents.tabsTokens.actionContentMarginLeft)
         },
         disabled: {
             true: (0, _styledcomponents.css)(_templateObject13(), _styledcomponents.tabsTokens.disabledOpacity)

package/components/Tabs/index.d.ts

@@ -1,5 +1,6 @@
 export { TabsController } from './TabsController';
 export { TabItemRefs, TabsContext } from '@salutejs/plasma-new-hope/styled-components';
-export type { TabItemProps, TabsProps, TabsControllerProps } from '@salutejs/plasma-new-hope/styled-components';
+export type { TabsProps, TabsControllerProps } from '@salutejs/plasma-new-hope/styled-components';
+export type { TabItemProps, IconTabItemProps } from './TabItem';
 export { Tabs } from './Tabs';
-export { TabItem } from './TabItem';
+export { TabItem, IconTabItem } from './TabItem';

package/components/Tabs/index.js

@@ -9,6 +9,9 @@ function _export(target, all) {
     });
 }
 _export(exports, {
+    get IconTabItem () {
+        return _TabItem.IconTabItem;
+    },
     get TabItem () {
         return _TabItem.TabItem;
     },

package/components/Tabs/vertical/VerticalIconTabItem.config.d.ts

@@ -0,0 +1,20 @@
+export declare const config: {
+    defaults: {
+        view: string;
+        size: string;
+    };
+    variations: {
+        view: {
+            divider: import("@salutejs/plasma-new-hope/types/engines/types").PolymorphicClassName;
+        };
+        size: {
+            xs: import("@salutejs/plasma-new-hope/types/engines/types").PolymorphicClassName;
+            s: import("@salutejs/plasma-new-hope/types/engines/types").PolymorphicClassName;
+            m: import("@salutejs/plasma-new-hope/types/engines/types").PolymorphicClassName;
+            l: import("@salutejs/plasma-new-hope/types/engines/types").PolymorphicClassName;
+        };
+        disabled: {
+            true: import("@salutejs/plasma-new-hope/types/engines/types").PolymorphicClassName;
+        };
+    };
+};