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

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"}