@salutejs/plasma-new-hope 0.335.0-canary.2199.17384366399.0 → 0.335.0-canary.2203.17432366342.0

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/Calendar/Calendar.tokens.d.ts

@@ -71,6 +71,7 @@ export declare const tokens: {
     calendarHeaderWrapperPadding: string;
     calendarHeaderArrowGap: string;
     calendarHeaderArrowPadding: string;
+    calendarArrowHeaderCustomSize: string;
     calendarHeaderPadding: string;
     calendarHeaderDateGap: string;
     calendarHeaderFontFamily: string;

package/types/components/Calendar/Calendar.tokens.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Calendar.tokens.d.ts","sourceRoot":"","sources":["../../../src/components/Calendar/Calendar.tokens.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,OAAO;;;;;;;;;;;;;;;;;CAiBnB,CAAC;AAEF,eAAO,MAAM,WAAW;;;;;;;;;CAWvB,CAAC;AAEF,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2GlB,CAAC"}
+{"version":3,"file":"Calendar.tokens.d.ts","sourceRoot":"","sources":["../../../src/components/Calendar/Calendar.tokens.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,OAAO;;;;;;;;;;;;;;;;;CAiBnB,CAAC;AAEF,eAAO,MAAM,WAAW;;;;;;;;;CAWvB,CAAC;AAEF,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA4GlB,CAAC"}

package/types/components/DatePicker/DatePicker.tokens.d.ts

@@ -184,6 +184,7 @@ export declare const tokens: {
     calendarHeaderFontWeight: string;
     calendarHeaderFontWeightBold: string;
     calendarHeaderArrowColor: string;
+    calendarHeaderArrowCustomSize: string;
     iconButtonColor: string;
     iconButtonBackgroundColor: string;
     iconButtonColorHover: string;

package/types/components/DatePicker/DatePicker.tokens.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DatePicker.tokens.d.ts","sourceRoot":"","sources":["../../../src/components/DatePicker/DatePicker.tokens.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,OAAO;;;;;;CAMnB,CAAC;AAEF,eAAO,MAAM,YAAY;;CAExB,CAAC;AAEF,eAAO,MAAM,MAAM;;IAGf,kCAAkC;;;;;;;;;;;;;IAclC,yBAAyB;;;;;;;;;;IAWzB,0CAA0C;;;IAI1C,oBAAoB;;;;;;;;;;IAYpB,wBAAwB;;;;;;;;;;;;;;;;IAqBxB,qCAAqC;;;;;;;;;;;;IAcrC,6DAA6D;;IAG7D,yCAAyC;;IAGzC,yBAAyB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAqDzB,uBAAuB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAkG1B,CAAC"}
+{"version":3,"file":"DatePicker.tokens.d.ts","sourceRoot":"","sources":["../../../src/components/DatePicker/DatePicker.tokens.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,OAAO;;;;;;CAMnB,CAAC;AAEF,eAAO,MAAM,YAAY;;CAExB,CAAC;AAEF,eAAO,MAAM,MAAM;;IAGf,kCAAkC;;;;;;;;;;;;;IAclC,yBAAyB;;;;;;;;;;IAWzB,0CAA0C;;;IAI1C,oBAAoB;;;;;;;;;;IAYpB,wBAAwB;;;;;;;;;;;;;;;;IAqBxB,qCAAqC;;;;;;;;;;;;IAcrC,6DAA6D;;IAG7D,yCAAyC;;IAGzC,yBAAyB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAqDzB,uBAAuB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAmG1B,CAAC"}

package/types/components/DatePicker/DatePickerBase.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DatePickerBase.styles.d.ts","sourceRoot":"","sources":["../../../src/components/DatePicker/DatePickerBase.styles.ts"],"names":[],"mappings":"AAWA,eAAO,MAAM,kBAAkB,QAiG9B,CAAC;AAGF,eAAO,MAAM,cAAc;iBAAmC,MAAM;kBAAgB,MAAM;+OAKzF,CAAC;AAEF,eAAO,MAAM,WAAW,8KAEvB,CAAC"}
+{"version":3,"file":"DatePickerBase.styles.d.ts","sourceRoot":"","sources":["../../../src/components/DatePicker/DatePickerBase.styles.ts"],"names":[],"mappings":"AAWA,eAAO,MAAM,kBAAkB,QAkG9B,CAAC;AAGF,eAAO,MAAM,cAAc;iBAAmC,MAAM;kBAAgB,MAAM;+OAKzF,CAAC;AAEF,eAAO,MAAM,WAAW,8KAEvB,CAAC"}

package/types/components/Drawer/Drawer.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Drawer.styles.d.ts","sourceRoot":"","sources":["../../../src/components/Drawer/Drawer.styles.ts"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,gBAAgB,CAAC;AA8FtD,eAAO,MAAM,WAAW,0OAEvB,CAAC;AAEF,eAAO,MAAM,WAAW;eACT,eAAe;YAClB,MAAM,GAAG,MAAM;aACd,MAAM,GAAG,MAAM;kFAoC3B,CAAC"}
+{"version":3,"file":"Drawer.styles.d.ts","sourceRoot":"","sources":["../../../src/components/Drawer/Drawer.styles.ts"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,gBAAgB,CAAC;AA8FtD,eAAO,MAAM,WAAW,0OAEvB,CAAC;AAEF,eAAO,MAAM,WAAW;eACT,eAAe;YAClB,MAAM,GAAG,MAAM;aACd,MAAM,GAAG,MAAM;kFAqC3B,CAAC"}

package/types/components/NavigationDrawer/NavigationDrawer.d.ts

@@ -0,0 +1,22 @@
+import React from 'react';
+import { RootProps } from '../../engines';
+import { NavigationDrawerProps } from './NavigationDrawer.types';
+export declare const navigationDrawerRoot: (Root: RootProps<HTMLDivElement, Omit<NavigationDrawerProps, "opened" | "header" | "sections" | "footer" | "withContentLeft" | "mode" | "onHide">>) => React.ForwardRefExoticComponent<NavigationDrawerProps & React.RefAttributes<HTMLDivElement>>;
+export declare const navigationDrawerConfig: {
+    name: string;
+    tag: string;
+    layout: (Root: RootProps<HTMLDivElement, Omit<NavigationDrawerProps, "opened" | "header" | "sections" | "footer" | "withContentLeft" | "mode" | "onHide">>) => React.ForwardRefExoticComponent<NavigationDrawerProps & React.RefAttributes<HTMLDivElement>>;
+    base: import("@linaria/core").LinariaClassName;
+    variations: {
+        size: {
+            css: import("@linaria/core").LinariaClassName;
+        };
+        view: {
+            css: import("@linaria/core").LinariaClassName;
+        };
+    };
+    defaults: {
+        view: string;
+    };
+};
+//# sourceMappingURL=NavigationDrawer.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"NavigationDrawer.d.ts","sourceRoot":"","sources":["../../../src/components/NavigationDrawer/NavigationDrawer.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAqB,MAAM,OAAO,CAAC;AAI1C,OAAO,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;AAE1C,OAAO,EAAE,qBAAqB,EAAE,MAAM,0BAA0B,CAAC;AASjE,eAAO,MAAM,oBAAoB,SACvB,SAAS,CACX,cAAc,EACd,IAAI,CAAC,qBAAqB,EAAE,QAAQ,GAAG,QAAQ,GAAG,UAAU,GAAG,QAAQ,GAAG,iBAAiB,GAAG,MAAM,GAAG,QAAQ,CAAC,CACnH,iGA+CJ,CAAC;AAEF,eAAO,MAAM,sBAAsB;;;mBApDzB,SAAS,CACX,cAAc,EACd,IAAI,CAAC,qBAAqB,EAAE,QAAQ,GAAG,QAAQ,GAAG,UAAU,GAAG,QAAQ,GAAG,iBAAiB,GAAG,MAAM,GAAG,QAAQ,CAAC,CACnH;;;;;;;;;;;;;CAiEJ,CAAC"}

package/types/components/NavigationDrawer/NavigationDrawer.styles.d.ts

@@ -0,0 +1,5 @@
+export declare const base: import("@linaria/core").LinariaClassName;
+export declare const Content: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
+export declare const Overlay: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
+export declare const Footer: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
+//# sourceMappingURL=NavigationDrawer.styles.d.ts.map

package/types/components/NavigationDrawer/NavigationDrawer.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"NavigationDrawer.styles.d.ts","sourceRoot":"","sources":["../../../src/components/NavigationDrawer/NavigationDrawer.styles.ts"],"names":[],"mappings":"AAKA,eAAO,MAAM,IAAI,0CA0IhB,CAAC;AAEF,eAAO,MAAM,OAAO,qKAGnB,CAAC;AAEF,eAAO,MAAM,OAAO,qKASnB,CAAC;AAEF,eAAO,MAAM,MAAM,qKAElB,CAAC"}

package/types/components/NavigationDrawer/NavigationDrawer.tokens.d.ts

@@ -0,0 +1,62 @@
+export declare const classes: {
+    navigationDrawerSidebar: string;
+    navigationDrawerSidebarOverlay: string;
+    navigationDrawerSidebarClosed: string;
+    navigationDrawerMenuItem: string;
+    navigationDrawerMenuLink: string;
+    navigationDrawerMenuIndicator: string;
+    navigationDrawerMenuCounter: string;
+    navigationDrawerMenuItemWithoutContentLeft: string;
+    navigationDrawerMenuItemSelected: string;
+    navigationDrawerMenuItemDisabled: string;
+    navigationDrawerMenuItemContentLeft: string;
+    navigationDrawerContentOverlay: string;
+    navigationDrawerArrowInverse: string;
+};
+export declare const tokens: {
+    sidebarPadding: string;
+    sidebarGap: string;
+    sidebarWidth: string;
+    sidebarWidthClosed: string;
+    sidebarBoxShadow: string;
+    sidebarBackground: string;
+    sectionFontSize: string;
+    sectionColor: string;
+    sectionHeaderGap: string;
+    sectionPadding: string;
+    sectionBorderRadius: string;
+    menuItemGap: string;
+    menuItemPadding: string;
+    menuItemBorderRadius: string;
+    menuItemHoverColor: string;
+    menuItemSelectedColor: string;
+    menuItemDisabledOpacity: string;
+    menuItemIndicatorSize: string;
+    menuItemIndicatorColor: string;
+    menuItemFontFamily: string;
+    menuItemFontSize: string;
+    menuItemFontStyle: string;
+    menuItemFontWeight: string;
+    menuItemFontLetterSpacing: string;
+    menuItemFontLineHeight: string;
+    menuItemContentLeftSize: string;
+    menuItemContentLeftMargin: string;
+    dividerColor: string;
+    dividerHeight: string;
+    iconSize: string;
+    iconContainerSize: string;
+    iconMargin: string;
+    overlayBackground: string;
+    counterBackground: string;
+    counterColor: string;
+    counterBorderRadius: string;
+    counterHeight: string;
+    counterPadding: string;
+    counterFontFamily: string;
+    counterFontSize: string;
+    counterFontStyle: string;
+    counterFontWeight: string;
+    counterLetterSpacing: string;
+    counterLineHeight: string;
+};
+//# sourceMappingURL=NavigationDrawer.tokens.d.ts.map

package/types/components/NavigationDrawer/NavigationDrawer.tokens.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"NavigationDrawer.tokens.d.ts","sourceRoot":"","sources":["../../../src/components/NavigationDrawer/NavigationDrawer.tokens.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,OAAO;;;;;;;;;;;;;;CAgBnB,CAAC;AAEF,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA8DlB,CAAC"}