@salutejs/plasma-new-hope 0.335.0-canary.2194.17367251959.0 → 0.335.0-canary.2195.17431561580.0

package/styled-components/es/examples/components/NavigationDrawer/NavigationDrawer.config.js

@@ -0,0 +1,81 @@
+import { css } from "styled-components";
+import { navigationDrawerTokens } from "../../../components/NavigationDrawer";
+export var config = {
+    defaults: {
+        view: 'default',
+        size: 's'
+    },
+    variations: {
+        view: {
+            default: css([
+                "",
+                ":var(--shadow-down-soft-s);",
+                ":1.25rem 0.75rem 0.75rem 0.75rem;",
+                ":0.625rem;",
+                ":250px;",
+                ":var(--surface-solid-card);",
+                ":var(--text-tertiary-active);",
+                ":0.75rem;",
+                ":0.75rem;",
+                ":0.75rem;",
+                ":0.75rem;",
+                ":0.625rem;",
+                ":var(--surface-transparent-secondary);",
+                ":var(--surface-transparent-secondary-hover);",
+                ":0.4;",
+                ":0.5rem;",
+                ":var(--surface-solid-default);",
+                ":var(--surface-transparent-tertiary);",
+                ":1px;",
+                ":var(--surface-transparent-secondary);",
+                ":1rem;",
+                ":1rem;",
+                ":0 0.125rem;",
+                ":var(--surface-solid-default);",
+                ":var(--surface-solid-card);",
+                ":var(--plasma-typo-body-xxs-font-family);",
+                ":var(--plasma-typo-body-xxs-font-size);",
+                ":var(--plasma-typo-body-xxs-font-style);",
+                ":var(--plasma-typo-body-xxs-font-weight);",
+                ":var(--plasma-typo-body-xxs-letter-spacing);",
+                ":var(--plasma-typo-body-xxs-line-height);"
+            ], navigationDrawerTokens.sidebarBoxShadow, navigationDrawerTokens.sidebarPadding, navigationDrawerTokens.sidebarGap, navigationDrawerTokens.sidebarWidth, navigationDrawerTokens.sidebarBackground, navigationDrawerTokens.sectionColor, navigationDrawerTokens.sectionFontSize, navigationDrawerTokens.sectionHeaderGap, navigationDrawerTokens.menuItemGap, navigationDrawerTokens.menuItemPadding, navigationDrawerTokens.menuItemBorderRadius, navigationDrawerTokens.menuItemSelectedColor, navigationDrawerTokens.menuItemHoverColor, navigationDrawerTokens.menuItemDisabledOpacity, navigationDrawerTokens.menuItemIndicatorSize, navigationDrawerTokens.menuItemIndicatorColor, navigationDrawerTokens.dividerColor, navigationDrawerTokens.dividerHeight, navigationDrawerTokens.overlayBackground, navigationDrawerTokens.counterBorderRadius, navigationDrawerTokens.counterHeight, navigationDrawerTokens.counterPadding, navigationDrawerTokens.counterBackground, navigationDrawerTokens.counterColor, navigationDrawerTokens.counterFontFamily, navigationDrawerTokens.counterFontSize, navigationDrawerTokens.counterFontStyle, navigationDrawerTokens.counterFontWeight, navigationDrawerTokens.counterLetterSpacing, navigationDrawerTokens.counterLineHeight)
+        },
+        size: {
+            s: css([
+                "",
+                ":0.875rem;",
+                ":1rem;",
+                ":0.875rem;",
+                ":2.5rem;",
+                ":0.625rem 0.75rem;",
+                ":0.625rem;",
+                ":1px 0 0 1px;",
+                ":var(--plasma-typo-body-s-font-family);",
+                ":var(--plasma-typo-body-s-font-style);",
+                ":var(--plasma-typo-body-s-font-weight);",
+                ":var(--plasma-typo-body-s-letter-spacing);",
+                ":var(--plasma-typo-body-s-line-height);",
+                ":1.5rem;",
+                ":0.5rem;"
+            ], navigationDrawerTokens.iconSize, navigationDrawerTokens.iconContainerSize, navigationDrawerTokens.menuItemFontSize, navigationDrawerTokens.sidebarWidthClosed, navigationDrawerTokens.sectionPadding, navigationDrawerTokens.sectionBorderRadius, navigationDrawerTokens.iconMargin, navigationDrawerTokens.menuItemFontFamily, navigationDrawerTokens.menuItemFontStyle, navigationDrawerTokens.menuItemFontWeight, navigationDrawerTokens.menuItemFontLetterSpacing, navigationDrawerTokens.menuItemFontLineHeight, navigationDrawerTokens.menuItemContentLeftSize, navigationDrawerTokens.menuItemContentLeftMargin),
+            m: css([
+                "",
+                ":1.25rem;",
+                ":1.5rem;",
+                ":1rem;",
+                ":3rem;",
+                ":0.75rem;",
+                ":0.75rem;",
+                ":2px 0 0 2px;",
+                ":var(--plasma-typo-body-m-font-family);",
+                ":var(--plasma-typo-body-m-font-style);",
+                ":var(--plasma-typo-body-m-font-weight);",
+                ":var(--plasma-typo-body-m-letter-spacing);",
+                ":var(--plasma-typo-body-m-line-height);",
+                ":2.25rem;",
+                ":0.375rem;"
+            ], navigationDrawerTokens.iconSize, navigationDrawerTokens.iconContainerSize, navigationDrawerTokens.menuItemFontSize, navigationDrawerTokens.sidebarWidthClosed, navigationDrawerTokens.sectionPadding, navigationDrawerTokens.sectionBorderRadius, navigationDrawerTokens.iconMargin, navigationDrawerTokens.menuItemFontFamily, navigationDrawerTokens.menuItemFontStyle, navigationDrawerTokens.menuItemFontWeight, navigationDrawerTokens.menuItemFontLetterSpacing, navigationDrawerTokens.menuItemFontLineHeight, navigationDrawerTokens.menuItemContentLeftSize, navigationDrawerTokens.menuItemContentLeftMargin)
+        }
+    }
+};

package/styled-components/es/examples/components/NavigationDrawer/NavigationDrawer.js

@@ -0,0 +1,7 @@
+import { component, mergeConfig } from "../../../engines";
+import { navigationDrawerConfig } from "../../../components/NavigationDrawer";
+import { config } from "./NavigationDrawer.config";
+var mergedConfig = mergeConfig(navigationDrawerConfig, config);
+/**
+ * Компонент NavigationDrawer.
+ */ export var NavigationDrawer = component(mergedConfig);

package/styled-components/es/examples/components/Tabs/TabItem.js

@@ -1,15 +1,60 @@
+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 _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;
+}
 import React from "react";
-import { horizontalTabItemConfig, verticalTabItemConfig } from "../../../components/Tabs";
+import { horizontalTabItemConfig, verticalTabItemConfig, horizontalIconTabItemConfig, verticalIconTabItemConfig } from "../../../components/Tabs";
 import { component, mergeConfig } from "../../../engines";
+import { fixedForwardRef } from "../../../utils";
 import { config as horizontalConfig } from "./horizontal/HorizontalTabItem.config";
+import { config as horizontalIconConfig } from "./horizontal/HorizontalIconTabItem.config";
 import { config as verticalConfig } from "./vertical/VerticalTabItem.config";
+import { config as verticalIconConfig } from "./vertical/VerticalIconTabItem.config";
 var mergedHorizontalTabItemConfig = mergeConfig(horizontalTabItemConfig, horizontalConfig);
 var HorizontalTabItem = component(mergedHorizontalTabItemConfig);
+var mergedHorizontalIconTabItemConfig = mergeConfig(horizontalIconTabItemConfig, horizontalIconConfig);
+var HorizontalIconTabItem = component(mergedHorizontalIconTabItemConfig);
 var mergedVerticalTabItemConfig = mergeConfig(verticalTabItemConfig, verticalConfig);
 var VerticalTabItem = component(mergedVerticalTabItemConfig);
+var mergedVerticalIconTabItemConfig = mergeConfig(verticalIconTabItemConfig, verticalIconConfig);
+var VerticalIconTabItem = component(mergedVerticalIconTabItemConfig);
 export var TabItem = function(props) {
     if (props.orientation === 'vertical') {
         return /*#__PURE__*/ React.createElement(VerticalTabItem, props);
     }
     return /*#__PURE__*/ React.createElement(HorizontalTabItem, props);
 };
+export var IconTabItem = fixedForwardRef(function(props, ref) {
+    if (props.orientation === 'vertical') {
+        return /*#__PURE__*/ React.createElement(VerticalIconTabItem, _object_spread({
+            ref: ref
+        }, props));
+    }
+    return /*#__PURE__*/ React.createElement(HorizontalIconTabItem, _object_spread({
+        ref: ref
+    }, props));
+});

package/styled-components/es/examples/components/Tabs/horizontal/HorizontalIconTabItem.config.js

@@ -0,0 +1,151 @@
+import { css } from "styled-components";
+import { tabsTokens } from "../../../../components/Tabs";
+export var config = {
+    defaults: {
+        view: 'default',
+        size: 'xs'
+    },
+    variations: {
+        view: {
+            clear: css([
+                "",
+                ":var(--text-secondary);",
+                ":transparent;",
+                ":var(--text-secondary-hover);",
+                ":var(--text-secondary-active);",
+                ":transparent;",
+                ":var(--text-primary);",
+                ":transparent;",
+                ":var(--text-primary);",
+                ":transparent;",
+                ":background-color 0.3s ease-in-out;",
+                ":var(--surface-accent);",
+                ":0;",
+                ":pointer;"
+            ], tabsTokens.itemColor, tabsTokens.itemBackgroundColor, tabsTokens.itemColorHover, tabsTokens.itemColorActive, tabsTokens.itemBackgroundColorHover, tabsTokens.itemSelectedColor, tabsTokens.itemSelectedBackgroundColor, tabsTokens.itemSelectedColorHover, tabsTokens.itemSelectedBackgroundColorHover, tabsTokens.itemBackgroundTransition, tabsTokens.outlineFocusColor, tabsTokens.itemSelectedDividerHeight, tabsTokens.itemCursor),
+            secondary: css([
+                "",
+                ":var(--text-primary);",
+                ":transparent;",
+                ":var(--text-secondary-hover);",
+                ":var(--text-secondary-active);",
+                ":transparent;",
+                ":var(--text-primary);",
+                ":var(--surface-solid-card);",
+                ":var(--text-primary);",
+                ":var(--surface-solid-card);",
+                ":background-color 0.3s ease-in-out;",
+                ":0.125rem;",
+                ":var(--surface-accent);",
+                ":0;",
+                ":pointer;"
+            ], tabsTokens.itemColor, tabsTokens.itemBackgroundColor, tabsTokens.itemColorHover, tabsTokens.itemColorActive, tabsTokens.itemBackgroundColorHover, tabsTokens.itemSelectedColor, tabsTokens.itemSelectedBackgroundColor, tabsTokens.itemSelectedColorHover, tabsTokens.itemSelectedBackgroundColorHover, tabsTokens.itemBackgroundTransition, tabsTokens.itemMarginLeftFilled, tabsTokens.outlineFocusColor, tabsTokens.itemSelectedDividerHeight, tabsTokens.itemCursor),
+            divider: css([
+                "",
+                ":var(--text-secondary);",
+                ":transparent;",
+                ":var(--text-secondary-hover);",
+                ":var(--text-secondary-active);",
+                ":transparent;",
+                ":var(--text-primary);",
+                ":transparent;",
+                ":var(--text-primary);",
+                ":transparent;",
+                ":background-color 0.3s ease-in-out;",
+                ":var(--surface-accent);",
+                ":0.125rem;",
+                ":var(--text-primary);",
+                ":var(--text-primary);",
+                ":pointer;"
+            ], tabsTokens.itemColor, tabsTokens.itemBackgroundColor, tabsTokens.itemColorHover, tabsTokens.itemColorActive, tabsTokens.itemBackgroundColorHover, tabsTokens.itemSelectedColor, tabsTokens.itemSelectedBackgroundColor, tabsTokens.itemSelectedColorHover, tabsTokens.itemSelectedBackgroundColorHover, tabsTokens.itemBackgroundTransition, tabsTokens.outlineFocusColor, tabsTokens.itemSelectedDividerHeight, tabsTokens.itemSelectedDividerColor, tabsTokens.itemSelectedDividerColorHover, tabsTokens.itemCursor),
+            default: css([
+                "",
+                ":var(--text-primary);",
+                ":transparent;",
+                ":var(--text-secondary-hover);",
+                ":var(--text-secondary-active);",
+                ":transparent;",
+                ":var(--inverse-text-primary);",
+                ":var(--surface-solid-default);",
+                ":var(--inverse-text-primary);",
+                ":var(--surface-solid-default);",
+                ":background-color 0.3s ease-in-out;",
+                ":0.125rem;",
+                ":var(--surface-accent);",
+                ":0;",
+                ":pointer;"
+            ], tabsTokens.itemColor, tabsTokens.itemBackgroundColor, tabsTokens.itemColorHover, tabsTokens.itemColorActive, tabsTokens.itemBackgroundColorHover, tabsTokens.itemSelectedColor, tabsTokens.itemSelectedBackgroundColor, tabsTokens.itemSelectedColorHover, tabsTokens.itemSelectedBackgroundColorHover, tabsTokens.itemBackgroundTransition, tabsTokens.itemMarginLeftFilled, tabsTokens.outlineFocusColor, tabsTokens.itemSelectedDividerHeight, tabsTokens.itemCursor)
+        },
+        size: {
+            xs: css([
+                "",
+                ":0.375rem;",
+                ":0.5rem 0.625rem;",
+                ":0.25rem;",
+                ":0;"
+            ], tabsTokens.itemBorderRadius, tabsTokens.itemPadding, tabsTokens.itemContentGap, tabsTokens.actionContentMarginLeft),
+            s: css([
+                "",
+                ":0.5rem;",
+                ":0.5rem 0.625rem;",
+                ":0.25rem;",
+                ":0.125rem;"
+            ], tabsTokens.itemBorderRadius, tabsTokens.itemPadding, tabsTokens.itemContentGap, tabsTokens.actionContentMarginLeft),
+            m: css([
+                "",
+                ":0.625rem;",
+                ":0.75rem 0.875rem;",
+                ":0.375rem;",
+                ":0.25rem;"
+            ], tabsTokens.itemBorderRadius, tabsTokens.itemPadding, tabsTokens.itemContentGap, tabsTokens.actionContentMarginLeft),
+            l: css([
+                "",
+                ":0.75rem;",
+                ":1rem 1.125rem;",
+                ":0.5rem;",
+                ":0.125rem;"
+            ], tabsTokens.itemBorderRadius, tabsTokens.itemPadding, tabsTokens.itemContentGap, tabsTokens.actionContentMarginLeft),
+            h5: css([
+                "",
+                ":0.375rem;",
+                ":0rem;",
+                ":0.625rem;",
+                ":-0.125rem;"
+            ], tabsTokens.itemBorderRadius, tabsTokens.itemPadding, tabsTokens.itemContentGap, tabsTokens.actionContentMarginLeft),
+            h4: css([
+                "",
+                ":0.375rem;",
+                ":0rem;",
+                ":0.625rem;",
+                ":-0.125rem;"
+            ], tabsTokens.itemBorderRadius, tabsTokens.itemPadding, tabsTokens.itemContentGap, tabsTokens.actionContentMarginLeft),
+            h3: css([
+                "",
+                ":0.5rem;",
+                ":0rem;",
+                ":0.75rem;",
+                ":-0.125rem;"
+            ], tabsTokens.itemBorderRadius, tabsTokens.itemPadding, tabsTokens.itemContentGap, tabsTokens.actionContentMarginLeft),
+            h2: css([
+                "",
+                ":0.625rem;",
+                ":0rem;",
+                ":0.875rem;",
+                ":-0.125rem;"
+            ], tabsTokens.itemBorderRadius, tabsTokens.itemPadding, tabsTokens.itemContentGap, tabsTokens.actionContentMarginLeft),
+            h1: css([
+                "",
+                ":0.75rem;",
+                ":0rem;",
+                ":1rem;",
+                ":0;"
+            ], tabsTokens.itemBorderRadius, tabsTokens.itemPadding, tabsTokens.itemContentGap, tabsTokens.actionContentMarginLeft)
+        },
+        disabled: {
+            true: css([
+                "",
+                ":0.4;"
+            ], tabsTokens.disabledOpacity)
+        }
+    }
+};

package/styled-components/es/examples/components/Tabs/horizontal/HorizontalTabItem.config.js

@@ -122,8 +122,9 @@ export var config = {
                 ":var(--plasma-typo-body-xs-font-style);",
                 ":var(--plasma-typo-body-xs-font-weight);",
                 ":var(--plasma-typo-body-xs-letter-spacing);",
-                ":var(--plasma-typo-body-xs-line-height);"
-            ], tabsTokens.itemBorderRadius, tabsTokens.itemWidth, tabsTokens.itemHeight, tabsTokens.itemPadding, tabsTokens.itemPaddingPilled, tabsTokens.itemMarginLeft, tabsTokens.itemContentGap, tabsTokens.itemContentPadding, tabsTokens.fontFamily, tabsTokens.fontSize, tabsTokens.fontStyle, tabsTokens.fontWeight, tabsTokens.letterSpacing, tabsTokens.lineHeight),
+                ":var(--plasma-typo-body-xs-line-height);",
+                ":0;"
+            ], tabsTokens.itemBorderRadius, tabsTokens.itemWidth, tabsTokens.itemHeight, tabsTokens.itemPadding, tabsTokens.itemPaddingPilled, tabsTokens.itemMarginLeft, tabsTokens.itemContentGap, tabsTokens.itemContentPadding, tabsTokens.fontFamily, tabsTokens.fontSize, tabsTokens.fontStyle, tabsTokens.fontWeight, tabsTokens.letterSpacing, tabsTokens.lineHeight, tabsTokens.actionContentMarginLeft),
             s: css([
                 "",
                 ":0.5rem;",
@@ -139,8 +140,9 @@ export var config = {
                 ":var(--plasma-typo-body-s-font-style);",
                 ":var(--plasma-typo-body-s-font-weight);",
                 ":var(--plasma-typo-body-s-letter-spacing);",
-                ":var(--plasma-typo-body-s-line-height);"
-            ], tabsTokens.itemBorderRadius, tabsTokens.itemWidth, tabsTokens.itemHeight, tabsTokens.itemPadding, tabsTokens.itemPaddingPilled, tabsTokens.itemMarginLeft, tabsTokens.itemContentGap, tabsTokens.itemContentPadding, tabsTokens.fontFamily, tabsTokens.fontSize, tabsTokens.fontStyle, tabsTokens.fontWeight, tabsTokens.letterSpacing, tabsTokens.lineHeight),
+                ":var(--plasma-typo-body-s-line-height);",
+                ":0.125rem;"
+            ], tabsTokens.itemBorderRadius, tabsTokens.itemWidth, tabsTokens.itemHeight, tabsTokens.itemPadding, tabsTokens.itemPaddingPilled, tabsTokens.itemMarginLeft, tabsTokens.itemContentGap, tabsTokens.itemContentPadding, tabsTokens.fontFamily, tabsTokens.fontSize, tabsTokens.fontStyle, tabsTokens.fontWeight, tabsTokens.letterSpacing, tabsTokens.lineHeight, tabsTokens.actionContentMarginLeft),
             m: css([
                 "",
                 ":0.625rem;",
@@ -156,8 +158,9 @@ export var config = {
                 ":var(--plasma-typo-body-m-font-style);",
                 ":var(--plasma-typo-body-m-font-weight);",
                 ":var(--plasma-typo-body-m-letter-spacing);",
-                ":var(--plasma-typo-body-m-line-height);"
-            ], tabsTokens.itemBorderRadius, tabsTokens.itemWidth, tabsTokens.itemHeight, tabsTokens.itemPadding, tabsTokens.itemPaddingPilled, tabsTokens.itemMarginLeft, tabsTokens.itemContentGap, tabsTokens.itemContentPadding, tabsTokens.fontFamily, tabsTokens.fontSize, tabsTokens.fontStyle, tabsTokens.fontWeight, tabsTokens.letterSpacing, tabsTokens.lineHeight),
+                ":var(--plasma-typo-body-m-line-height);",
+                ":0.25rem;"
+            ], tabsTokens.itemBorderRadius, tabsTokens.itemWidth, tabsTokens.itemHeight, tabsTokens.itemPadding, tabsTokens.itemPaddingPilled, tabsTokens.itemMarginLeft, tabsTokens.itemContentGap, tabsTokens.itemContentPadding, tabsTokens.fontFamily, tabsTokens.fontSize, tabsTokens.fontStyle, tabsTokens.fontWeight, tabsTokens.letterSpacing, tabsTokens.lineHeight, tabsTokens.actionContentMarginLeft),
             l: css([
                 "",
                 ":0.75rem;",
@@ -173,8 +176,9 @@ export var config = {
                 ":var(--plasma-typo-body-l-font-style);",
                 ":var(--plasma-typo-body-l-font-weight);",
                 ":var(--plasma-typo-body-l-letter-spacing);",
-                ":var(--plasma-typo-body-l-line-height);"
-            ], tabsTokens.itemBorderRadius, tabsTokens.itemWidth, tabsTokens.itemHeight, tabsTokens.itemPadding, tabsTokens.itemPaddingPilled, tabsTokens.itemMarginLeft, tabsTokens.itemContentGap, tabsTokens.itemContentPadding, tabsTokens.fontFamily, tabsTokens.fontSize, tabsTokens.fontStyle, tabsTokens.fontWeight, tabsTokens.letterSpacing, tabsTokens.lineHeight),
+                ":var(--plasma-typo-body-l-line-height);",
+                ":0.125rem;"
+            ], tabsTokens.itemBorderRadius, tabsTokens.itemWidth, tabsTokens.itemHeight, tabsTokens.itemPadding, tabsTokens.itemPaddingPilled, tabsTokens.itemMarginLeft, tabsTokens.itemContentGap, tabsTokens.itemContentPadding, tabsTokens.fontFamily, tabsTokens.fontSize, tabsTokens.fontStyle, tabsTokens.fontWeight, tabsTokens.letterSpacing, tabsTokens.lineHeight, tabsTokens.actionContentMarginLeft),
             h5: css([
                 "",
                 ":0.375rem;",
@@ -188,8 +192,9 @@ export var config = {
                 ":var(--plasma-typo-h5-font-style);",
                 ":var(--plasma-typo-h5-font-weight);",
                 ":var(--plasma-typo-h5-letter-spacing);",
-                ":var(--plasma-typo-h5-line-height);"
-            ], tabsTokens.itemBorderRadius, tabsTokens.itemWidth, tabsTokens.itemHeight, tabsTokens.itemPadding, tabsTokens.itemMarginLeft, tabsTokens.itemContentGap, tabsTokens.fontFamily, tabsTokens.fontSize, tabsTokens.fontStyle, tabsTokens.fontWeight, tabsTokens.letterSpacing, tabsTokens.lineHeight),
+                ":var(--plasma-typo-h5-line-height);",
+                ":-0.125rem;"
+            ], tabsTokens.itemBorderRadius, tabsTokens.itemWidth, tabsTokens.itemHeight, tabsTokens.itemPadding, tabsTokens.itemMarginLeft, tabsTokens.itemContentGap, tabsTokens.fontFamily, tabsTokens.fontSize, tabsTokens.fontStyle, tabsTokens.fontWeight, tabsTokens.letterSpacing, tabsTokens.lineHeight, tabsTokens.actionContentMarginLeft),
             h4: css([
                 "",
                 ":0.375rem;",
@@ -203,8 +208,9 @@ export var config = {
                 ":var(--plasma-typo-h4-font-style);",
                 ":var(--plasma-typo-h4-font-weight);",
                 ":var(--plasma-typo-h4-letter-spacing);",
-                ":var(--plasma-typo-h4-line-height);"
-            ], tabsTokens.itemBorderRadius, tabsTokens.itemWidth, tabsTokens.itemHeight, tabsTokens.itemPadding, tabsTokens.itemMarginLeft, tabsTokens.itemContentGap, tabsTokens.fontFamily, tabsTokens.fontSize, tabsTokens.fontStyle, tabsTokens.fontWeight, tabsTokens.letterSpacing, tabsTokens.lineHeight),
+                ":var(--plasma-typo-h4-line-height);",
+                ":-0.125rem;"
+            ], tabsTokens.itemBorderRadius, tabsTokens.itemWidth, tabsTokens.itemHeight, tabsTokens.itemPadding, tabsTokens.itemMarginLeft, tabsTokens.itemContentGap, tabsTokens.fontFamily, tabsTokens.fontSize, tabsTokens.fontStyle, tabsTokens.fontWeight, tabsTokens.letterSpacing, tabsTokens.lineHeight, tabsTokens.actionContentMarginLeft),
             h3: css([
                 "",
                 ":0.5rem;",
@@ -218,8 +224,9 @@ export var config = {
                 ":var(--plasma-typo-h3-font-style);",
                 ":var(--plasma-typo-h3-font-weight);",
                 ":var(--plasma-typo-h3-letter-spacing);",
-                ":var(--plasma-typo-h3-line-height);"
-            ], tabsTokens.itemBorderRadius, tabsTokens.itemWidth, tabsTokens.itemHeight, tabsTokens.itemPadding, tabsTokens.itemMarginLeft, tabsTokens.itemContentGap, tabsTokens.fontFamily, tabsTokens.fontSize, tabsTokens.fontStyle, tabsTokens.fontWeight, tabsTokens.letterSpacing, tabsTokens.lineHeight),
+                ":var(--plasma-typo-h3-line-height);",
+                ":-0.125rem;"
+            ], tabsTokens.itemBorderRadius, tabsTokens.itemWidth, tabsTokens.itemHeight, tabsTokens.itemPadding, tabsTokens.itemMarginLeft, tabsTokens.itemContentGap, tabsTokens.fontFamily, tabsTokens.fontSize, tabsTokens.fontStyle, tabsTokens.fontWeight, tabsTokens.letterSpacing, tabsTokens.lineHeight, tabsTokens.actionContentMarginLeft),
             h2: css([
                 "",
                 ":0.625rem;",
@@ -233,8 +240,9 @@ export var config = {
                 ":var(--plasma-typo-h2-font-style);",
                 ":var(--plasma-typo-h2-font-weight);",
                 ":var(--plasma-typo-h2-letter-spacing);",
-                ":var(--plasma-typo-h2-line-height);"
-            ], tabsTokens.itemBorderRadius, tabsTokens.itemWidth, tabsTokens.itemHeight, tabsTokens.itemPadding, tabsTokens.itemMarginLeft, tabsTokens.itemContentGap, tabsTokens.fontFamily, tabsTokens.fontSize, tabsTokens.fontStyle, tabsTokens.fontWeight, tabsTokens.letterSpacing, tabsTokens.lineHeight),
+                ":var(--plasma-typo-h2-line-height);",
+                ":-0.125rem;"
+            ], tabsTokens.itemBorderRadius, tabsTokens.itemWidth, tabsTokens.itemHeight, tabsTokens.itemPadding, tabsTokens.itemMarginLeft, tabsTokens.itemContentGap, tabsTokens.fontFamily, tabsTokens.fontSize, tabsTokens.fontStyle, tabsTokens.fontWeight, tabsTokens.letterSpacing, tabsTokens.lineHeight, tabsTokens.actionContentMarginLeft),
             h1: css([
                 "",
                 ":0.75rem;",
@@ -248,8 +256,9 @@ export var config = {
                 ":var(--plasma-typo-h1-font-style);",
                 ":var(--plasma-typo-h1-font-weight);",
                 ":var(--plasma-typo-h1-letter-spacing);",
-                ":var(--plasma-typo-h1-line-height);"
-            ], tabsTokens.itemBorderRadius, tabsTokens.itemWidth, tabsTokens.itemHeight, tabsTokens.itemPadding, tabsTokens.itemMarginLeft, tabsTokens.itemContentGap, tabsTokens.fontFamily, tabsTokens.fontSize, tabsTokens.fontStyle, tabsTokens.fontWeight, tabsTokens.letterSpacing, tabsTokens.lineHeight)
+                ":var(--plasma-typo-h1-line-height);",
+                ":0;"
+            ], tabsTokens.itemBorderRadius, tabsTokens.itemWidth, tabsTokens.itemHeight, tabsTokens.itemPadding, tabsTokens.itemMarginLeft, tabsTokens.itemContentGap, tabsTokens.fontFamily, tabsTokens.fontSize, tabsTokens.fontStyle, tabsTokens.fontWeight, tabsTokens.letterSpacing, tabsTokens.lineHeight, tabsTokens.actionContentMarginLeft)
         },
         disabled: {
             true: css([

package/styled-components/es/examples/components/Tabs/vertical/VerticalIconTabItem.config.js

@@ -0,0 +1,70 @@
+import { css } from "styled-components";
+import { tabsTokens } from "../../../../components/Tabs";
+export var config = {
+    defaults: {
+        view: 'divider',
+        size: 'xs'
+    },
+    variations: {
+        view: {
+            divider: css([
+                "",
+                ":var(--text-secondary);",
+                ":transparent;",
+                ":var(--text-secondary-hover);",
+                ":var(--text-secondary-active);",
+                ":transparent;",
+                ":var(--text-primary);",
+                ":transparent;",
+                ":var(--text-primary);",
+                ":transparent;",
+                ":background-color 0.3s ease-in-out;",
+                ":var(--surface-accent);",
+                ":0.125rem;",
+                ":var(--text-primary);",
+                ":var(--text-primary);",
+                ":pointer;"
+            ], tabsTokens.itemColor, tabsTokens.itemBackgroundColor, tabsTokens.itemColorHover, tabsTokens.itemColorActive, tabsTokens.itemBackgroundColorHover, tabsTokens.itemSelectedColor, tabsTokens.itemSelectedBackgroundColor, tabsTokens.itemSelectedColorHover, tabsTokens.itemSelectedBackgroundColorHover, tabsTokens.itemBackgroundTransition, tabsTokens.outlineFocusColor, tabsTokens.itemSelectedDividerWidth, tabsTokens.itemSelectedDividerColor, tabsTokens.itemSelectedDividerColorHover, tabsTokens.itemCursor)
+        },
+        size: {
+            xs: css([
+                "",
+                ":0.375rem;",
+                ":0.5rem 0.625rem;",
+                ":0.25rem;",
+                ":0.125rem;",
+                ":0;"
+            ], tabsTokens.itemBorderRadius, tabsTokens.itemPaddingOrientationVertical, tabsTokens.itemContentGap, tabsTokens.itemContentPadding, tabsTokens.actionContentMarginLeft),
+            s: css([
+                "",
+                ":0.5rem;",
+                ":0.5rem 0.625rem;",
+                ":0.25rem;",
+                ":0.125rem;",
+                ":0.25rem;"
+            ], tabsTokens.itemBorderRadius, tabsTokens.itemPaddingOrientationVertical, tabsTokens.itemContentGap, tabsTokens.itemContentPadding, tabsTokens.actionContentMarginLeft),
+            m: css([
+                "",
+                ":0.625rem;",
+                ":0.75rem 0.875rem;",
+                ":0.375rem;",
+                ":0.125rem;",
+                ":0.125rem;"
+            ], tabsTokens.itemBorderRadius, tabsTokens.itemPaddingOrientationVertical, tabsTokens.itemContentGap, tabsTokens.itemContentPadding, tabsTokens.actionContentMarginLeft),
+            l: css([
+                "",
+                ":0.75rem;",
+                ":1rem 1.125rem;",
+                ":0.5rem;",
+                ":0.125rem;",
+                ":0.125rem;"
+            ], tabsTokens.itemBorderRadius, tabsTokens.itemPaddingOrientationVertical, tabsTokens.itemContentGap, tabsTokens.itemContentPadding, tabsTokens.actionContentMarginLeft)
+        },
+        disabled: {
+            true: css([
+                "",
+                ":0.4;"
+            ], tabsTokens.disabledOpacity)
+        }
+    }
+};

package/styled-components/es/examples/components/Tabs/vertical/VerticalTabItem.config.js

@@ -51,8 +51,9 @@ export var config = {
                 ":var(--plasma-typo-body-xs-font-style);",
                 ":var(--plasma-typo-body-xs-font-weight);",
                 ":var(--plasma-typo-body-xs-letter-spacing);",
-                ":var(--plasma-typo-body-xs-line-height);"
-            ], tabsTokens.itemBorderRadius, tabsTokens.itemWidth, tabsTokens.itemHeight, tabsTokens.itemPadding, tabsTokens.itemPaddingPilled, tabsTokens.itemPaddingOrientationVertical, tabsTokens.itemMarginLeft, tabsTokens.itemContentGap, tabsTokens.itemContentPadding, tabsTokens.fontFamily, tabsTokens.fontSize, tabsTokens.fontStyle, tabsTokens.fontWeight, tabsTokens.letterSpacing, tabsTokens.lineHeight),
+                ":var(--plasma-typo-body-xs-line-height);",
+                ":0;"
+            ], tabsTokens.itemBorderRadius, tabsTokens.itemWidth, tabsTokens.itemHeight, tabsTokens.itemPadding, tabsTokens.itemPaddingPilled, tabsTokens.itemPaddingOrientationVertical, tabsTokens.itemMarginLeft, tabsTokens.itemContentGap, tabsTokens.itemContentPadding, tabsTokens.fontFamily, tabsTokens.fontSize, tabsTokens.fontStyle, tabsTokens.fontWeight, tabsTokens.letterSpacing, tabsTokens.lineHeight, tabsTokens.actionContentMarginLeft),
             s: css([
                 "",
                 ":0.5rem;",
@@ -69,8 +70,9 @@ export var config = {
                 ":var(--plasma-typo-body-s-font-style);",
                 ":var(--plasma-typo-body-s-font-weight);",
                 ":var(--plasma-typo-body-s-letter-spacing);",
-                ":var(--plasma-typo-body-s-line-height);"
-            ], tabsTokens.itemBorderRadius, tabsTokens.itemWidth, tabsTokens.itemHeight, tabsTokens.itemPadding, tabsTokens.itemPaddingPilled, tabsTokens.itemPaddingOrientationVertical, tabsTokens.itemMarginLeft, tabsTokens.itemContentGap, tabsTokens.itemContentPadding, tabsTokens.fontFamily, tabsTokens.fontSize, tabsTokens.fontStyle, tabsTokens.fontWeight, tabsTokens.letterSpacing, tabsTokens.lineHeight),
+                ":var(--plasma-typo-body-s-line-height);",
+                ":0.25rem;"
+            ], tabsTokens.itemBorderRadius, tabsTokens.itemWidth, tabsTokens.itemHeight, tabsTokens.itemPadding, tabsTokens.itemPaddingPilled, tabsTokens.itemPaddingOrientationVertical, tabsTokens.itemMarginLeft, tabsTokens.itemContentGap, tabsTokens.itemContentPadding, tabsTokens.fontFamily, tabsTokens.fontSize, tabsTokens.fontStyle, tabsTokens.fontWeight, tabsTokens.letterSpacing, tabsTokens.lineHeight, tabsTokens.actionContentMarginLeft),
             m: css([
                 "",
                 ":0.625rem;",
@@ -87,8 +89,9 @@ export var config = {
                 ":var(--plasma-typo-body-m-font-style);",
                 ":var(--plasma-typo-body-m-font-weight);",
                 ":var(--plasma-typo-body-m-letter-spacing);",
-                ":var(--plasma-typo-body-m-line-height);"
-            ], tabsTokens.itemBorderRadius, tabsTokens.itemWidth, tabsTokens.itemHeight, tabsTokens.itemPadding, tabsTokens.itemPaddingPilled, tabsTokens.itemPaddingOrientationVertical, tabsTokens.itemMarginLeft, tabsTokens.itemContentGap, tabsTokens.itemContentPadding, tabsTokens.fontFamily, tabsTokens.fontSize, tabsTokens.fontStyle, tabsTokens.fontWeight, tabsTokens.letterSpacing, tabsTokens.lineHeight),
+                ":var(--plasma-typo-body-m-line-height);",
+                ":0.125rem;"
+            ], tabsTokens.itemBorderRadius, tabsTokens.itemWidth, tabsTokens.itemHeight, tabsTokens.itemPadding, tabsTokens.itemPaddingPilled, tabsTokens.itemPaddingOrientationVertical, tabsTokens.itemMarginLeft, tabsTokens.itemContentGap, tabsTokens.itemContentPadding, tabsTokens.fontFamily, tabsTokens.fontSize, tabsTokens.fontStyle, tabsTokens.fontWeight, tabsTokens.letterSpacing, tabsTokens.lineHeight, tabsTokens.actionContentMarginLeft),
             l: css([
                 "",
                 ":0.75rem;",
@@ -105,8 +108,9 @@ export var config = {
                 ":var(--plasma-typo-body-l-font-style);",
                 ":var(--plasma-typo-body-l-font-weight);",
                 ":var(--plasma-typo-body-l-letter-spacing);",
-                ":var(--plasma-typo-body-l-line-height);"
-            ], tabsTokens.itemBorderRadius, tabsTokens.itemWidth, tabsTokens.itemHeight, tabsTokens.itemPadding, tabsTokens.itemPaddingPilled, tabsTokens.itemPaddingOrientationVertical, tabsTokens.itemMarginLeft, tabsTokens.itemContentGap, tabsTokens.itemContentPadding, tabsTokens.fontFamily, tabsTokens.fontSize, tabsTokens.fontStyle, tabsTokens.fontWeight, tabsTokens.letterSpacing, tabsTokens.lineHeight)
+                ":var(--plasma-typo-body-l-line-height);",
+                ":0.125rem;"
+            ], tabsTokens.itemBorderRadius, tabsTokens.itemWidth, tabsTokens.itemHeight, tabsTokens.itemPadding, tabsTokens.itemPaddingPilled, tabsTokens.itemPaddingOrientationVertical, tabsTokens.itemMarginLeft, tabsTokens.itemContentGap, tabsTokens.itemContentPadding, tabsTokens.fontFamily, tabsTokens.fontSize, tabsTokens.fontStyle, tabsTokens.fontWeight, tabsTokens.letterSpacing, tabsTokens.lineHeight, tabsTokens.actionContentMarginLeft)
         },
         disabled: {
             true: css([

package/styled-components/es/index.js

@@ -83,3 +83,4 @@ export * from "./components/List";
 export * from "./components/Tour";
 export * from "./components/EmbedIconButton";
 export * from "./components/InformationWrapper";
+export * from "./components/NavigationDrawer";

package/types/components/Attach/ui/Button/Button.styles.d.ts

@@ -2,6 +2,7 @@ export declare const StyledButton: import("@linaria/react").StyledMeta & import(
     text?: string;
     contentLeft?: import("react").ReactNode;
     contentPlacing?: "default" | "relaxed";
+    additionalContent?: import("react").ReactNode;
     isLoading?: boolean;
     loader?: import("react").ReactNode;
     stretch?: boolean;
@@ -23,6 +24,7 @@ export declare const StyledButton: import("@linaria/react").StyledMeta & import(
     text?: string;
     contentLeft?: import("react").ReactNode;
     contentPlacing?: "default" | "relaxed";
+    additionalContent?: import("react").ReactNode;
     isLoading?: boolean;
     loader?: import("react").ReactNode;
     stretch?: boolean;

package/types/components/Attach/ui/Button/Button.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Button.styles.d.ts","sourceRoot":"","sources":["../../../../../src/components/Attach/ui/Button/Button.styles.tsx"],"names":[],"mappings":"AASA,eAAO,MAAM,YAAY;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;uDAoCxB,CAAC"}
+{"version":3,"file":"Button.styles.d.ts","sourceRoot":"","sources":["../../../../../src/components/Attach/ui/Button/Button.styles.tsx"],"names":[],"mappings":"AASA,eAAO,MAAM,YAAY;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;uDAoCxB,CAAC"}

package/types/components/Attach/ui/IconButton/IconButton.styles.d.ts

@@ -2,6 +2,7 @@ export declare const StyledIconButton: import("@linaria/react").StyledMeta & imp
     text?: string;
     contentLeft?: import("react").ReactNode;
     contentPlacing?: "default" | "relaxed";
+    additionalContent?: import("react").ReactNode;
     isLoading?: boolean;
     loader?: import("react").ReactNode;
     stretch?: boolean;
@@ -23,6 +24,7 @@ export declare const StyledIconButton: import("@linaria/react").StyledMeta & imp
     text?: string;
     contentLeft?: import("react").ReactNode;
     contentPlacing?: "default" | "relaxed";
+    additionalContent?: import("react").ReactNode;
     isLoading?: boolean;
     loader?: import("react").ReactNode;
     stretch?: boolean;
@@ -45,6 +47,7 @@ export declare const StyledIconButtonCancel: import("@linaria/react").StyledMeta
     text?: string;
     contentLeft?: import("react").ReactNode;
     contentPlacing?: "default" | "relaxed";
+    additionalContent?: import("react").ReactNode;
     isLoading?: boolean;
     loader?: import("react").ReactNode;
     stretch?: boolean;
@@ -66,6 +69,7 @@ export declare const StyledIconButtonCancel: import("@linaria/react").StyledMeta
     text?: string;
     contentLeft?: import("react").ReactNode;
     contentPlacing?: "default" | "relaxed";
+    additionalContent?: import("react").ReactNode;
     isLoading?: boolean;
     loader?: import("react").ReactNode;
     stretch?: boolean;

package/types/components/Attach/ui/IconButton/IconButton.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"IconButton.styles.d.ts","sourceRoot":"","sources":["../../../../../src/components/Attach/ui/IconButton/IconButton.styles.ts"],"names":[],"mappings":"AASA,eAAO,MAAM,gBAAgB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;uDA8B5B,CAAC;AAEF,eAAO,MAAM,sBAAsB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;uDA4BlC,CAAC"}
+{"version":3,"file":"IconButton.styles.d.ts","sourceRoot":"","sources":["../../../../../src/components/Attach/ui/IconButton/IconButton.styles.ts"],"names":[],"mappings":"AASA,eAAO,MAAM,gBAAgB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;uDA8B5B,CAAC;AAEF,eAAO,MAAM,sBAAsB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;uDA4BlC,CAAC"}

package/types/components/Autocomplete/Autocomplete.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Autocomplete.d.ts","sourceRoot":"","sources":["../../../src/components/Autocomplete/Autocomplete.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmD,MAAM,OAAO,CAAC;AAGxE,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AAMxC,OAAO,KAAK,EAAE,iBAAiB,EAAsB,MAAM,sBAAsB,CAAC;AAGlF;;GAEG;AACH,eAAO,MAAM,gBAAgB,SAAU,SAAS,CAAC,gBAAgB,EAAE,IAAI,CAAC,iBAAiB,EAAE,UAAU,CAAC,CAAC,+FAkOlG,CAAC;AAEN,eAAO,MAAM,kBAAkB;;;mBApOQ,SAAS,CAAC,gBAAgB,EAAE,IAAI,CAAC,iBAAiB,EAAE,UAAU,CAAC,CAAC;;;;;;;;;;;;CAmPtG,CAAC"}
+{"version":3,"file":"Autocomplete.d.ts","sourceRoot":"","sources":["../../../src/components/Autocomplete/Autocomplete.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmD,MAAM,OAAO,CAAC;AAGxE,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AAMxC,OAAO,KAAK,EAAE,iBAAiB,EAAsB,MAAM,sBAAsB,CAAC;AAGlF;;GAEG;AACH,eAAO,MAAM,gBAAgB,SAAU,SAAS,CAAC,gBAAgB,EAAE,IAAI,CAAC,iBAAiB,EAAE,UAAU,CAAC,CAAC,+FAoOlG,CAAC;AAEN,eAAO,MAAM,kBAAkB;;;mBAtOQ,SAAS,CAAC,gBAAgB,EAAE,IAAI,CAAC,iBAAiB,EAAE,UAAU,CAAC,CAAC;;;;;;;;;;;;CAqPtG,CAAC"}

package/types/components/Autocomplete/Autocomplete.types.d.ts

@@ -100,6 +100,11 @@ export type AutocompleteProps = {
      * @default false
      */
     virtual?: boolean;
+    /**
+     * Отображение выпадающего списка сверху, если снизу недостаточно места.
+     * @default false
+     */
+    flip?: boolean;
     /**
      * Размер контрола.
      * @default l
@@ -119,5 +124,6 @@ export type FloatingPopoverProps = {
     zIndex?: AutocompleteProps['zIndex'];
     listWidth?: AutocompleteProps['listWidth'];
     offset?: [number, number];
+    flip?: boolean;
 };
 //# sourceMappingURL=Autocomplete.types.d.ts.map