@salutejs/sdds-platform-ai 0.355.0-next-sbcom.0 → 0.355.0

package/dist/css/es/index.js

@@ -17,6 +17,7 @@ export { Cell } from './components/Cell/Cell.js';
 export { Checkbox } from './components/Checkbox/Checkbox.js';
 export { Chip } from './components/Chip/Chip.js';
 export { ChipGroup } from './components/ChipGroup/ChipGroup.js';
+export { CodeArea } from './components/CodeArea/CodeArea.js';
 export { CodeField } from './components/CodeField/CodeField.js';
 export { CodeInput } from './components/CodeInput/CodeInput.js';
 export { Combobox } from './components/Combobox/Combobox.js';

package/dist/styled-components/cjs/components/Autocomplete/Autocomplete.config.js

@@ -228,7 +228,7 @@ const config = {
                 ${_styledcomponents.autocompleteTokens.textFieldHintInnerLabelPlacementOffset}: 0.312rem -2.813rem auto auto;
                 ${_styledcomponents.autocompleteTokens.textFieldClearHintInnerLabelPlacementOffset}: 0.312rem -2.188rem auto auto;
 
-                ${_styledcomponents.autocompleteTokens.textFieldLeftHelperPadding}: 0.25rem 0 0 0;
+                ${_styledcomponents.autocompleteTokens.textFieldLeftHelperOffset}: 0.25rem 0 0 0;
                 ${_styledcomponents.autocompleteTokens.textFieldLeftHelperFontFamily}: var(--plasma-typo-body-xs-font-family);
                 ${_styledcomponents.autocompleteTokens.textFieldLeftHelperFontSize}: var(--plasma-typo-body-xs-font-size);
                 ${_styledcomponents.autocompleteTokens.textFieldLeftHelperFontStyle}: var(--plasma-typo-body-xs-font-style);

package/dist/styled-components/cjs/components/Avatar/Avatar.config.js

@@ -130,6 +130,14 @@ const config = {
                 ${_styledcomponents.avatarTokens.fontWeight}: 0;
                 ${_styledcomponents.avatarTokens.lineHeight}: 0;
                 ${_styledcomponents.avatarTokens.statusIconSize}: 0;
+                ${_styledcomponents.avatarTokens.borderRadius}: 50%;
+            `
+        },
+        focused: {
+            true: (0, _styledcomponents.css)`
+                ${_styledcomponents.avatarTokens.outlineSize}: 0.1rem;
+                ${_styledcomponents.avatarTokens.outlineOffset}: -0.2rem;
+                ${_styledcomponents.avatarTokens.outlineColor}: var(--surface-accent);
             `
         },
         shape: {

package/dist/styled-components/cjs/components/Button/Button.config.js

@@ -61,8 +61,8 @@ const config = {
                 ${_styledcomponents.buttonTokens.buttonValueColor}: var(--text-secondary);
 
                 ${_styledcomponents.buttonTokens.buttonBackgroundColor}: var(--surface-clear);
-                ${_styledcomponents.buttonTokens.buttonBackgroundColorHover}: var(--on-dark-surface-solid-default);
-                ${_styledcomponents.buttonTokens.buttonBackgroundColorActive}: var(--on-dark-surface-solid-default);
+                ${_styledcomponents.buttonTokens.buttonBackgroundColorHover}: var(--surface-transparent-secondary-hover);
+                ${_styledcomponents.buttonTokens.buttonBackgroundColorActive}: var(--surface-transparent-secondary-active);
 
                 ${_styledcomponents.buttonTokens.buttonLoadingBackgroundColor}: var(${_styledcomponents.buttonTokens.buttonBackgroundColor});
             `,
@@ -150,7 +150,7 @@ const config = {
                 ${_styledcomponents.buttonTokens.buttonHeight}: 4rem;
                 ${_styledcomponents.buttonTokens.buttonWidth}: 12.5rem;
                 ${_styledcomponents.buttonTokens.buttonPadding}: 1.75rem;
-                ${_styledcomponents.buttonTokens.buttonRadius}: 2rem;
+                ${_styledcomponents.buttonTokens.buttonRadius}: 1rem;
                 ${_styledcomponents.buttonTokens.buttonFontFamily}: var(--plasma-typo-body-l-font-family);
                 ${_styledcomponents.buttonTokens.buttonFontSize}: var(--plasma-typo-body-l-font-size);
                 ${_styledcomponents.buttonTokens.buttonFontStyle}: var(--plasma-typo-body-l-font-style);
@@ -171,7 +171,7 @@ const config = {
                 ${_styledcomponents.buttonTokens.buttonHeight}: 3.5rem;
                 ${_styledcomponents.buttonTokens.buttonWidth}: 12.5rem;
                 ${_styledcomponents.buttonTokens.buttonPadding}: 1.75rem;
-                ${_styledcomponents.buttonTokens.buttonRadius}: 1.75rem;
+                ${_styledcomponents.buttonTokens.buttonRadius}: 0.875rem;
 
                 ${_styledcomponents.buttonTokens.buttonFontFamily}: var(--plasma-typo-body-l-font-family);
                 ${_styledcomponents.buttonTokens.buttonFontSize}: var(--plasma-typo-body-l-font-size);
@@ -193,7 +193,7 @@ const config = {
                 ${_styledcomponents.buttonTokens.buttonHeight}: 3rem;
                 ${_styledcomponents.buttonTokens.buttonWidth}: 11.25rem;
                 ${_styledcomponents.buttonTokens.buttonPadding}: 1.5rem;
-                ${_styledcomponents.buttonTokens.buttonRadius}: 1.5rem;
+                ${_styledcomponents.buttonTokens.buttonRadius}: 0.75rem;
                 ${_styledcomponents.buttonTokens.buttonFontFamily}: var(--plasma-typo-body-m-font-family);
                 ${_styledcomponents.buttonTokens.buttonFontSize}: var(--plasma-typo-body-m-font-size);
                 ${_styledcomponents.buttonTokens.buttonFontStyle}: var(--plasma-typo-body-m-font-style);
@@ -214,7 +214,7 @@ const config = {
                 ${_styledcomponents.buttonTokens.buttonHeight}: 2.5rem;
                 ${_styledcomponents.buttonTokens.buttonWidth}: 11.25rem;
                 ${_styledcomponents.buttonTokens.buttonPadding}: 1rem;
-                ${_styledcomponents.buttonTokens.buttonRadius}: 1.375rem;
+                ${_styledcomponents.buttonTokens.buttonRadius}: 0.625rem;
                 ${_styledcomponents.buttonTokens.buttonFontFamily}: var(--plasma-typo-body-s-font-family);
                 ${_styledcomponents.buttonTokens.buttonFontSize}: var(--plasma-typo-body-s-font-size);
                 ${_styledcomponents.buttonTokens.buttonFontStyle}: var(--plasma-typo-body-s-font-style);
@@ -235,7 +235,7 @@ const config = {
                 ${_styledcomponents.buttonTokens.buttonHeight}: 2rem;
                 ${_styledcomponents.buttonTokens.buttonWidth}: 10rem;
                 ${_styledcomponents.buttonTokens.buttonPadding}: 0.75rem;
-                ${_styledcomponents.buttonTokens.buttonRadius}: 1.375rem;
+                ${_styledcomponents.buttonTokens.buttonRadius}: 0.5rem;
 
                 ${_styledcomponents.buttonTokens.buttonFontFamily}: var(--plasma-typo-body-xs-font-family);
                 ${_styledcomponents.buttonTokens.buttonFontSize}: var(--plasma-typo-body-xs-font-size);

package/dist/styled-components/cjs/components/ChipGroup/ChipGroup.config.js

@@ -17,6 +17,7 @@ const config = {
     variations: {
         view: {
             default: (0, _styledcomponents.css)`
+                ${_styledcomponents.chipGroupTokens.chipFocusColor}: var(--surface-accent);
                 ${_styledcomponents.chipGroupTokens.chipColor}: var(--inverse-text-primary);
                 ${_styledcomponents.chipGroupTokens.chipBackground}: var(--surface-solid-default);
                 ${_styledcomponents.chipGroupTokens.chipColorHover}: var(--inverse-text-primary);
@@ -25,6 +26,7 @@ const config = {
                 ${_styledcomponents.chipGroupTokens.chipBackgroundActive}: var(--surface-solid-default-active);
             `,
             secondary: (0, _styledcomponents.css)`
+                ${_styledcomponents.chipGroupTokens.chipFocusColor}: var(--surface-accent);
                 ${_styledcomponents.chipGroupTokens.chipColor}: var(--text-primary);
                 ${_styledcomponents.chipGroupTokens.chipBackground}: var(--surface-transparent-secondary);
                 ${_styledcomponents.chipGroupTokens.chipColorHover}: var(--text-primary);
@@ -33,6 +35,7 @@ const config = {
                 ${_styledcomponents.chipGroupTokens.chipBackgroundActive}: var(--surface-transparent-secondary-active);
             `,
             accent: (0, _styledcomponents.css)`
+                ${_styledcomponents.chipGroupTokens.chipFocusColor}: var(--surface-accent);
                 ${_styledcomponents.chipGroupTokens.chipColor}: var(--on-dark-text-primary);
                 ${_styledcomponents.chipGroupTokens.chipBackground}: var(--surface-accent);
                 ${_styledcomponents.chipGroupTokens.chipColorHover}: var(--on-dark-text-primary);

package/dist/styled-components/cjs/components/CodeArea/CodeArea.config.js

@@ -0,0 +1,161 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "config", {
+    enumerable: true,
+    get: function() {
+        return config;
+    }
+});
+const _styledcomponents = require("@salutejs/plasma-new-hope/styled-components");
+const config = {
+    defaults: {
+        view: 'default',
+        size: 'm'
+    },
+    variations: {
+        view: {
+            default: (0, _styledcomponents.css)`
+                ${_styledcomponents.codeAreaTokens.wrapperBackgroundColor}: transparent;
+                ${_styledcomponents.codeAreaTokens.fieldBackgroundColor}: var(--surface-transparent-primary);
+
+                ${_styledcomponents.codeAreaTokens.codeColor}: var(--text-primary);
+                ${_styledcomponents.codeAreaTokens.lineNumberColor}: var(--text-tertiary);
+                ${_styledcomponents.codeAreaTokens.dividerColor}: var(--surface-transparent-tertiary);
+
+                ${_styledcomponents.codeAreaTokens.scrollTrackColor}: var(--surface-transparent-primary);
+                ${_styledcomponents.codeAreaTokens.scrollThumbColor}: var(--surface-transparent-tertiary);
+
+                ${_styledcomponents.codeAreaTokens.syntaxYellow}: var(--syntax-yellow);
+                ${_styledcomponents.codeAreaTokens.syntaxOrange}: var(--syntax-orange);
+                ${_styledcomponents.codeAreaTokens.syntaxPink}: var(--syntax-pink);
+                ${_styledcomponents.codeAreaTokens.syntaxSpring}: var(--syntax-spring);
+                ${_styledcomponents.codeAreaTokens.syntaxSkyBlue}: var(--syntax-sky-blue);
+                ${_styledcomponents.codeAreaTokens.syntaxRed}: var(--syntax-red);
+            `
+        },
+        size: {
+            xl: (0, _styledcomponents.css)`
+                ${_styledcomponents.codeAreaTokens.wrapperPadding}: 0;
+                ${_styledcomponents.codeAreaTokens.wrapperGap}: 1.25rem;
+                ${_styledcomponents.codeAreaTokens.wrapperBorderRadius}: 0;
+
+                ${_styledcomponents.codeAreaTokens.overlayBorderRadius}: 1rem;
+                ${_styledcomponents.codeAreaTokens.overlayPadding}: 1.25rem 1.125rem;
+
+                ${_styledcomponents.codeAreaTokens.headerMarginBottom}: 1.25rem;
+                ${_styledcomponents.codeAreaTokens.contentGap}: 0.5rem;
+                ${_styledcomponents.codeAreaTokens.lineNumberGap}: 0.5rem;
+                ${_styledcomponents.codeAreaTokens.numerationPaddingRight}: 0.5rem;
+                ${_styledcomponents.codeAreaTokens.codeMarginRight}: -1rem;
+                ${_styledcomponents.codeAreaTokens.codePaddingRight}: 2.875rem;
+
+                ${_styledcomponents.codeAreaTokens.fontFamily}: 'SB Sans Text Mono', sans-serif;
+                ${_styledcomponents.codeAreaTokens.fontSize}: var(--plasma-typo-body-l-font-size);
+                ${_styledcomponents.codeAreaTokens.fontStyle}: var(--plasma-typo-body-l-font-style);
+                ${_styledcomponents.codeAreaTokens.fontWeight}: var(--plasma-typo-body-l-font-weight);
+                ${_styledcomponents.codeAreaTokens.letterSpacing}: var(--plasma-typo-body-l-letter-spacing);
+                ${_styledcomponents.codeAreaTokens.lineHeight}: var(--plasma-typo-body-l-line-height);
+
+                ${_styledcomponents.codeAreaTokens.scrollWidth}: 0.125rem;
+            `,
+            l: (0, _styledcomponents.css)`
+                ${_styledcomponents.codeAreaTokens.wrapperPadding}: 0;
+                ${_styledcomponents.codeAreaTokens.wrapperGap}: 1rem;
+                ${_styledcomponents.codeAreaTokens.wrapperBorderRadius}: 0;
+
+                ${_styledcomponents.codeAreaTokens.overlayBorderRadius}: 0.875rem;
+                ${_styledcomponents.codeAreaTokens.overlayPadding}: 1rem;
+
+                ${_styledcomponents.codeAreaTokens.headerMarginBottom}: 1rem;
+                ${_styledcomponents.codeAreaTokens.contentGap}: 0.5rem;
+                ${_styledcomponents.codeAreaTokens.lineNumberGap}: 0.5rem;
+                ${_styledcomponents.codeAreaTokens.numerationPaddingRight}: 0.5rem;
+                ${_styledcomponents.codeAreaTokens.codeMarginRight}: -0.875rem;
+                ${_styledcomponents.codeAreaTokens.codePaddingRight}: 2.75rem;
+
+                ${_styledcomponents.codeAreaTokens.fontFamily}: 'SB Sans Text Mono', sans-serif;
+                ${_styledcomponents.codeAreaTokens.fontSize}: var(--plasma-typo-body-l-font-size);
+                ${_styledcomponents.codeAreaTokens.fontStyle}: var(--plasma-typo-body-l-font-style);
+                ${_styledcomponents.codeAreaTokens.fontWeight}: var(--plasma-typo-body-l-font-weight);
+                ${_styledcomponents.codeAreaTokens.letterSpacing}: var(--plasma-typo-body-l-letter-spacing);
+                ${_styledcomponents.codeAreaTokens.lineHeight}: var(--plasma-typo-body-l-line-height);
+
+                ${_styledcomponents.codeAreaTokens.scrollWidth}: 0.125rem;
+            `,
+            m: (0, _styledcomponents.css)`
+                ${_styledcomponents.codeAreaTokens.wrapperPadding}: 0;
+                ${_styledcomponents.codeAreaTokens.wrapperGap}: 0.75rem;
+                ${_styledcomponents.codeAreaTokens.wrapperBorderRadius}: 0;
+
+                ${_styledcomponents.codeAreaTokens.overlayBorderRadius}: 0.75rem;
+                ${_styledcomponents.codeAreaTokens.overlayPadding}: 0.75rem 0.875rem;
+
+                ${_styledcomponents.codeAreaTokens.headerMarginBottom}: 0.75rem;
+                ${_styledcomponents.codeAreaTokens.contentGap}: 0.375rem;
+                ${_styledcomponents.codeAreaTokens.lineNumberGap}: 0.375rem;
+                ${_styledcomponents.codeAreaTokens.numerationPaddingRight}: 0.375rem;
+                ${_styledcomponents.codeAreaTokens.codeMarginRight}: -0.75rem;
+                ${_styledcomponents.codeAreaTokens.codePaddingRight}: 2.5rem;
+
+                ${_styledcomponents.codeAreaTokens.fontFamily}: 'SB Sans Text Mono', sans-serif;
+                ${_styledcomponents.codeAreaTokens.fontSize}: var(--plasma-typo-body-m-font-size);
+                ${_styledcomponents.codeAreaTokens.fontStyle}: var(--plasma-typo-body-m-font-style);
+                ${_styledcomponents.codeAreaTokens.fontWeight}: var(--plasma-typo-body-m-font-weight);
+                ${_styledcomponents.codeAreaTokens.letterSpacing}: var(--plasma-typo-body-m-letter-spacing);
+                ${_styledcomponents.codeAreaTokens.lineHeight}: var(--plasma-typo-body-m-line-height);
+
+                ${_styledcomponents.codeAreaTokens.scrollWidth}: 0.125rem;
+            `,
+            s: (0, _styledcomponents.css)`
+                ${_styledcomponents.codeAreaTokens.wrapperPadding}: 0;
+                ${_styledcomponents.codeAreaTokens.wrapperGap}: 0.5rem;
+                ${_styledcomponents.codeAreaTokens.wrapperBorderRadius}: 0;
+
+                ${_styledcomponents.codeAreaTokens.overlayBorderRadius}: 0.625rem;
+                ${_styledcomponents.codeAreaTokens.overlayPadding}: 0.5rem 0.75rem;
+
+                ${_styledcomponents.codeAreaTokens.headerMarginBottom}: 0.5rem;
+                ${_styledcomponents.codeAreaTokens.contentGap}: 0.375rem;
+                ${_styledcomponents.codeAreaTokens.lineNumberGap}: 0.25rem;
+                ${_styledcomponents.codeAreaTokens.numerationPaddingRight}: 0.25rem;
+                ${_styledcomponents.codeAreaTokens.codeMarginRight}: -0.625rem;
+                ${_styledcomponents.codeAreaTokens.codePaddingRight}: 2.375rem;
+
+                ${_styledcomponents.codeAreaTokens.fontFamily}: 'SB Sans Text Mono', sans-serif;
+                ${_styledcomponents.codeAreaTokens.fontSize}: var(--plasma-typo-body-s-font-size);
+                ${_styledcomponents.codeAreaTokens.fontStyle}: var(--plasma-typo-body-s-font-style);
+                ${_styledcomponents.codeAreaTokens.fontWeight}: var(--plasma-typo-body-s-font-weight);
+                ${_styledcomponents.codeAreaTokens.letterSpacing}: var(--plasma-typo-body-s-letter-spacing);
+                ${_styledcomponents.codeAreaTokens.lineHeight}: var(--plasma-typo-body-s-line-height);
+
+                ${_styledcomponents.codeAreaTokens.scrollWidth}: 0.125rem;
+            `,
+            xs: (0, _styledcomponents.css)`
+                ${_styledcomponents.codeAreaTokens.wrapperPadding}: 0;
+                ${_styledcomponents.codeAreaTokens.wrapperGap}: 0.5rem;
+                ${_styledcomponents.codeAreaTokens.wrapperBorderRadius}: 0;
+
+                ${_styledcomponents.codeAreaTokens.overlayBorderRadius}: 0.5rem;
+                ${_styledcomponents.codeAreaTokens.overlayPadding}: 0.5rem;
+
+                ${_styledcomponents.codeAreaTokens.headerMarginBottom}: 0.5rem;
+                ${_styledcomponents.codeAreaTokens.contentGap}: 0.25rem;
+                ${_styledcomponents.codeAreaTokens.lineNumberGap}: 0.25rem;
+                ${_styledcomponents.codeAreaTokens.numerationPaddingRight}: 0.25rem;
+                ${_styledcomponents.codeAreaTokens.codeMarginRight}: -0.375rem;
+                ${_styledcomponents.codeAreaTokens.codePaddingRight}: 1.5rem;
+
+                ${_styledcomponents.codeAreaTokens.fontFamily}: 'SB Sans Text Mono', sans-serif;
+                ${_styledcomponents.codeAreaTokens.fontSize}: var(--plasma-typo-body-xs-font-size);
+                ${_styledcomponents.codeAreaTokens.fontStyle}: var(--plasma-typo-body-xs-font-style);
+                ${_styledcomponents.codeAreaTokens.fontWeight}: var(--plasma-typo-body-xs-font-weight);
+                ${_styledcomponents.codeAreaTokens.letterSpacing}: var(--plasma-typo-body-xs-letter-spacing);
+                ${_styledcomponents.codeAreaTokens.lineHeight}: var(--plasma-typo-body-xs-line-height);
+
+                ${_styledcomponents.codeAreaTokens.scrollWidth}: 0.125rem;
+            `
+        }
+    }
+};

package/dist/styled-components/cjs/components/CodeArea/CodeArea.hasWrapper.config.js

@@ -0,0 +1,161 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "config", {
+    enumerable: true,
+    get: function() {
+        return config;
+    }
+});
+const _styledcomponents = require("@salutejs/plasma-new-hope/styled-components");
+const config = {
+    defaults: {
+        view: 'default',
+        size: 'm'
+    },
+    variations: {
+        view: {
+            default: (0, _styledcomponents.css)`
+                ${_styledcomponents.codeAreaTokens.wrapperBackgroundColor}: var(--surface-transparent-primary);
+                ${_styledcomponents.codeAreaTokens.fieldBackgroundColor}: var(--surface-solid-card);
+
+                ${_styledcomponents.codeAreaTokens.codeColor}: var(--text-primary);
+                ${_styledcomponents.codeAreaTokens.lineNumberColor}: var(--text-tertiary);
+                ${_styledcomponents.codeAreaTokens.dividerColor}: var(--surface-transparent-tertiary);
+
+                ${_styledcomponents.codeAreaTokens.scrollTrackColor}: var(--surface-transparent-primary);
+                ${_styledcomponents.codeAreaTokens.scrollThumbColor}: var(--surface-transparent-tertiary);
+
+                ${_styledcomponents.codeAreaTokens.syntaxYellow}: var(--syntax-yellow);
+                ${_styledcomponents.codeAreaTokens.syntaxOrange}: var(--syntax-orange);
+                ${_styledcomponents.codeAreaTokens.syntaxPink}: var(--syntax-pink);
+                ${_styledcomponents.codeAreaTokens.syntaxSpring}: var(--syntax-spring);
+                ${_styledcomponents.codeAreaTokens.syntaxSkyBlue}: var(--syntax-sky-blue);
+                ${_styledcomponents.codeAreaTokens.syntaxRed}: var(--syntax-red);
+            `
+        },
+        size: {
+            xl: (0, _styledcomponents.css)`
+                ${_styledcomponents.codeAreaTokens.wrapperPadding}: 1.25rem;
+                ${_styledcomponents.codeAreaTokens.wrapperGap}: 1.25rem;
+                ${_styledcomponents.codeAreaTokens.wrapperBorderRadius}: 2.25rem;
+
+                ${_styledcomponents.codeAreaTokens.overlayBorderRadius}: 1rem;
+                ${_styledcomponents.codeAreaTokens.overlayPadding}: 1.25rem 1.125rem;
+
+                ${_styledcomponents.codeAreaTokens.headerMarginBottom}: 1.25rem;
+                ${_styledcomponents.codeAreaTokens.contentGap}: 0.5rem;
+                ${_styledcomponents.codeAreaTokens.lineNumberGap}: 0.5rem;
+                ${_styledcomponents.codeAreaTokens.numerationPaddingRight}: 0.5rem;
+                ${_styledcomponents.codeAreaTokens.codeMarginRight}: -1rem;
+                ${_styledcomponents.codeAreaTokens.codePaddingRight}: 2.875rem;
+
+                ${_styledcomponents.codeAreaTokens.fontFamily}: 'SB Sans Text Mono', sans-serif;
+                ${_styledcomponents.codeAreaTokens.fontSize}: var(--plasma-typo-body-l-font-size);
+                ${_styledcomponents.codeAreaTokens.fontStyle}: var(--plasma-typo-body-l-font-style);
+                ${_styledcomponents.codeAreaTokens.fontWeight}: var(--plasma-typo-body-l-font-weight);
+                ${_styledcomponents.codeAreaTokens.letterSpacing}: var(--plasma-typo-body-l-letter-spacing);
+                ${_styledcomponents.codeAreaTokens.lineHeight}: var(--plasma-typo-body-l-line-height);
+
+                ${_styledcomponents.codeAreaTokens.scrollWidth}: 0.125rem;
+            `,
+            l: (0, _styledcomponents.css)`
+                ${_styledcomponents.codeAreaTokens.wrapperPadding}: 1rem;
+                ${_styledcomponents.codeAreaTokens.wrapperGap}: 1rem;
+                ${_styledcomponents.codeAreaTokens.wrapperBorderRadius}: 1.875rem;
+
+                ${_styledcomponents.codeAreaTokens.overlayBorderRadius}: 0.875rem;
+                ${_styledcomponents.codeAreaTokens.overlayPadding}: 1rem;
+
+                ${_styledcomponents.codeAreaTokens.headerMarginBottom}: 1rem;
+                ${_styledcomponents.codeAreaTokens.contentGap}: 0.5rem;
+                ${_styledcomponents.codeAreaTokens.lineNumberGap}: 0.5rem;
+                ${_styledcomponents.codeAreaTokens.numerationPaddingRight}: 0.5rem;
+                ${_styledcomponents.codeAreaTokens.codeMarginRight}: -0.875rem;
+                ${_styledcomponents.codeAreaTokens.codePaddingRight}: 2.75rem;
+
+                ${_styledcomponents.codeAreaTokens.fontFamily}: 'SB Sans Text Mono', sans-serif;
+                ${_styledcomponents.codeAreaTokens.fontSize}: var(--plasma-typo-body-l-font-size);
+                ${_styledcomponents.codeAreaTokens.fontStyle}: var(--plasma-typo-body-l-font-style);
+                ${_styledcomponents.codeAreaTokens.fontWeight}: var(--plasma-typo-body-l-font-weight);
+                ${_styledcomponents.codeAreaTokens.letterSpacing}: var(--plasma-typo-body-l-letter-spacing);
+                ${_styledcomponents.codeAreaTokens.lineHeight}: var(--plasma-typo-body-l-line-height);
+
+                ${_styledcomponents.codeAreaTokens.scrollWidth}: 0.125rem;
+            `,
+            m: (0, _styledcomponents.css)`
+                ${_styledcomponents.codeAreaTokens.wrapperPadding}: 0.75rem;
+                ${_styledcomponents.codeAreaTokens.wrapperGap}: 0.75rem;
+                ${_styledcomponents.codeAreaTokens.wrapperBorderRadius}: 1.5rem;
+
+                ${_styledcomponents.codeAreaTokens.overlayBorderRadius}: 0.75rem;
+                ${_styledcomponents.codeAreaTokens.overlayPadding}: 0.75rem 0.875rem;
+
+                ${_styledcomponents.codeAreaTokens.headerMarginBottom}: 0.75rem;
+                ${_styledcomponents.codeAreaTokens.contentGap}: 0.375rem;
+                ${_styledcomponents.codeAreaTokens.lineNumberGap}: 0.375rem;
+                ${_styledcomponents.codeAreaTokens.numerationPaddingRight}: 0.375rem;
+                ${_styledcomponents.codeAreaTokens.codeMarginRight}: -0.75rem;
+                ${_styledcomponents.codeAreaTokens.codePaddingRight}: 2.5rem;
+
+                ${_styledcomponents.codeAreaTokens.fontFamily}: 'SB Sans Text Mono', sans-serif;
+                ${_styledcomponents.codeAreaTokens.fontSize}: var(--plasma-typo-body-m-font-size);
+                ${_styledcomponents.codeAreaTokens.fontStyle}: var(--plasma-typo-body-m-font-style);
+                ${_styledcomponents.codeAreaTokens.fontWeight}: var(--plasma-typo-body-m-font-weight);
+                ${_styledcomponents.codeAreaTokens.letterSpacing}: var(--plasma-typo-body-m-letter-spacing);
+                ${_styledcomponents.codeAreaTokens.lineHeight}: var(--plasma-typo-body-m-line-height);
+
+                ${_styledcomponents.codeAreaTokens.scrollWidth}: 0.125rem;
+            `,
+            s: (0, _styledcomponents.css)`
+                ${_styledcomponents.codeAreaTokens.wrapperPadding}: 0.5rem;
+                ${_styledcomponents.codeAreaTokens.wrapperGap}: 0.5rem;
+                ${_styledcomponents.codeAreaTokens.wrapperBorderRadius}: 1.125rem;
+
+                ${_styledcomponents.codeAreaTokens.overlayBorderRadius}: 0.625rem;
+                ${_styledcomponents.codeAreaTokens.overlayPadding}: 0.5rem 0.75rem;
+
+                ${_styledcomponents.codeAreaTokens.headerMarginBottom}: 0.5rem;
+                ${_styledcomponents.codeAreaTokens.contentGap}: 0.375rem;
+                ${_styledcomponents.codeAreaTokens.lineNumberGap}: 0.25rem;
+                ${_styledcomponents.codeAreaTokens.numerationPaddingRight}: 0.25rem;
+                ${_styledcomponents.codeAreaTokens.codeMarginRight}: -0.625rem;
+                ${_styledcomponents.codeAreaTokens.codePaddingRight}: 2.375rem;
+
+                ${_styledcomponents.codeAreaTokens.fontFamily}: 'SB Sans Text Mono', sans-serif;
+                ${_styledcomponents.codeAreaTokens.fontSize}: var(--plasma-typo-body-s-font-size);
+                ${_styledcomponents.codeAreaTokens.fontStyle}: var(--plasma-typo-body-s-font-style);
+                ${_styledcomponents.codeAreaTokens.fontWeight}: var(--plasma-typo-body-s-font-weight);
+                ${_styledcomponents.codeAreaTokens.letterSpacing}: var(--plasma-typo-body-s-letter-spacing);
+                ${_styledcomponents.codeAreaTokens.lineHeight}: var(--plasma-typo-body-s-line-height);
+
+                ${_styledcomponents.codeAreaTokens.scrollWidth}: 0.125rem;
+            `,
+            xs: (0, _styledcomponents.css)`
+                ${_styledcomponents.codeAreaTokens.wrapperPadding}: 0.5rem;
+                ${_styledcomponents.codeAreaTokens.wrapperGap}: 0.5rem;
+                ${_styledcomponents.codeAreaTokens.wrapperBorderRadius}: 1rem;
+
+                ${_styledcomponents.codeAreaTokens.overlayBorderRadius}: 0.5rem;
+                ${_styledcomponents.codeAreaTokens.overlayPadding}: 0.5rem;
+
+                ${_styledcomponents.codeAreaTokens.headerMarginBottom}: 0.5rem;
+                ${_styledcomponents.codeAreaTokens.contentGap}: 0.25rem;
+                ${_styledcomponents.codeAreaTokens.lineNumberGap}: 0.25rem;
+                ${_styledcomponents.codeAreaTokens.numerationPaddingRight}: 0.25rem;
+                ${_styledcomponents.codeAreaTokens.codeMarginRight}: -0.375rem;
+                ${_styledcomponents.codeAreaTokens.codePaddingRight}: 1.5rem;
+
+                ${_styledcomponents.codeAreaTokens.fontFamily}: 'SB Sans Text Mono', sans-serif;
+                ${_styledcomponents.codeAreaTokens.fontSize}: var(--plasma-typo-body-xs-font-size);
+                ${_styledcomponents.codeAreaTokens.fontStyle}: var(--plasma-typo-body-xs-font-style);
+                ${_styledcomponents.codeAreaTokens.fontWeight}: var(--plasma-typo-body-xs-font-weight);
+                ${_styledcomponents.codeAreaTokens.letterSpacing}: var(--plasma-typo-body-xs-letter-spacing);
+                ${_styledcomponents.codeAreaTokens.lineHeight}: var(--plasma-typo-body-xs-line-height);
+
+                ${_styledcomponents.codeAreaTokens.scrollWidth}: 0.125rem;
+            `
+        }
+    }
+};

package/dist/styled-components/cjs/components/CodeArea/CodeArea.js

@@ -0,0 +1,32 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: Object.getOwnPropertyDescriptor(all, name).get
+    });
+}
+_export(exports, {
+    get CodeArea () {
+        return CodeArea;
+    },
+    get CodeAreaDefault () {
+        return CodeAreaDefault;
+    },
+    get CodeAreaHasWrapper () {
+        return CodeAreaHasWrapper;
+    }
+});
+const _styledcomponents = require("@salutejs/plasma-new-hope/styled-components");
+const _CodeAreaconfig = require("./CodeArea.config");
+const _CodeAreahasWrapperconfig = require("./CodeArea.hasWrapper.config");
+const mergedConfig = (0, _styledcomponents.mergeConfig)(_styledcomponents.codeAreaConfig, _CodeAreaconfig.config);
+const CodeAreaDefault = (0, _styledcomponents.component)(mergedConfig);
+const mergedConfigHasWrapper = (0, _styledcomponents.mergeConfig)(_styledcomponents.codeAreaConfig, _CodeAreahasWrapperconfig.config);
+const CodeAreaHasWrapper = (0, _styledcomponents.component)(mergedConfigHasWrapper);
+const CodeArea = (0, _styledcomponents.createConditionalComponent)({
+    default: CodeAreaDefault,
+    hasWrapper: CodeAreaHasWrapper
+});

package/dist/styled-components/cjs/components/CodeArea/index.js

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "CodeArea", {
+    enumerable: true,
+    get: function() {
+        return _CodeArea.CodeArea;
+    }
+});
+const _CodeArea = require("./CodeArea");

package/dist/styled-components/cjs/components/Combobox/Combobox.config.js

@@ -280,7 +280,7 @@ const config = {
                 ${_styledcomponents.comboboxTokens.textFieldHintInnerLabelPlacementOffset}: 0.312rem -2.813rem auto auto;
                 ${_styledcomponents.comboboxTokens.textFieldClearHintInnerLabelPlacementOffset}: 0.312rem -2.188rem auto auto;
 
-                ${_styledcomponents.comboboxTokens.textFieldLeftHelperPadding}: 0.25rem 0 0 0;
+                ${_styledcomponents.comboboxTokens.textFieldLeftHelperOffset}: 0.25rem 0 0 0;
                 ${_styledcomponents.comboboxTokens.textFieldLeftHelperFontFamily}: var(--plasma-typo-body-xs-font-family);
                 ${_styledcomponents.comboboxTokens.textFieldLeftHelperFontSize}: var(--plasma-typo-body-xs-font-size);
                 ${_styledcomponents.comboboxTokens.textFieldLeftHelperFontStyle}: var(--plasma-typo-body-xs-font-style);

package/dist/styled-components/cjs/components/IconButton/IconButton.config.js

@@ -27,7 +27,7 @@ const config = {
                 ${_styledcomponents.iconButtonTokens.iconButtonLoadingBackgroundColor}: var(${_styledcomponents.iconButtonTokens.iconButtonBackgroundColor});
             `,
             accent: (0, _styledcomponents.css)`
-                ${_styledcomponents.iconButtonTokens.iconButtonColor}: var(--text-primary);
+                ${_styledcomponents.iconButtonTokens.iconButtonColor}: var(--on-light-text-primary);
                 ${_styledcomponents.iconButtonTokens.iconButtonBackgroundColor}: var(--surface-accent-gradient);
 
                 ${_styledcomponents.iconButtonTokens.iconButtonLoadingBackgroundColor}: var(${_styledcomponents.iconButtonTokens.iconButtonBackgroundColor});
@@ -106,7 +106,7 @@ const config = {
                 ${_styledcomponents.iconButtonTokens.iconButtonHeight}: 4rem;
                 ${_styledcomponents.iconButtonTokens.iconButtonWidth}: 4.25rem;
                 ${_styledcomponents.iconButtonTokens.iconButtonPadding}: 1.375rem;
-                ${_styledcomponents.iconButtonTokens.iconButtonRadius}: 1.75rem;
+                ${_styledcomponents.iconButtonTokens.iconButtonRadius}: 1rem;
 
                 ${_styledcomponents.iconButtonTokens.iconButtonFontFamily}: var(--plasma-typo-body-l-font-family);
                 ${_styledcomponents.iconButtonTokens.iconButtonFontSize}: var(--plasma-typo-body-l-font-size);
@@ -138,7 +138,7 @@ const config = {
                 ${_styledcomponents.iconButtonTokens.iconButtonHeight}: 3rem;
                 ${_styledcomponents.iconButtonTokens.iconButtonWidth}: 3.25rem;
                 ${_styledcomponents.iconButtonTokens.iconButtonPadding}: 0.875rem;
-                ${_styledcomponents.iconButtonTokens.iconButtonRadius}: 1.25rem;
+                ${_styledcomponents.iconButtonTokens.iconButtonRadius}: 0.75rem;
 
                 ${_styledcomponents.iconButtonTokens.iconButtonFontFamily}: var(--plasma-typo-body-m-font-family);
                 ${_styledcomponents.iconButtonTokens.iconButtonFontSize}: var(--plasma-typo-body-m-font-size);
@@ -155,7 +155,7 @@ const config = {
                 ${_styledcomponents.iconButtonTokens.iconButtonWidth}: 2.75rem;
 
                 ${_styledcomponents.iconButtonTokens.iconButtonPadding}: 1rem;
-                ${_styledcomponents.iconButtonTokens.iconButtonRadius}: 1.125rem;
+                ${_styledcomponents.iconButtonTokens.iconButtonRadius}: 0.625rem;
 
                 ${_styledcomponents.iconButtonTokens.iconButtonFontFamily}: var(--plasma-typo-body-s-font-family);
                 ${_styledcomponents.iconButtonTokens.iconButtonFontSize}: var(--plasma-typo-body-s-font-size);

package/dist/styled-components/cjs/components/Segment/SegmentItem.config.js

@@ -30,7 +30,7 @@ const config = {
                 ${_styledcomponents.segmentTokens.itemSelectedAdditionalColor}: var(--text-secondary);
                 ${_styledcomponents.segmentTokens.itemSelectedAdditionalColorHover}: var(--text-secondary);
 
-                ${_styledcomponents.segmentTokens.groupFilledBackgroundColor}: var(--text-accent);
+                ${_styledcomponents.segmentTokens.outlineFocusColor}: var(--text-accent);
             `,
             secondary: (0, _styledcomponents.css)`
                 ${_styledcomponents.segmentTokens.itemColor}: var(--text-primary);
@@ -46,7 +46,7 @@ const config = {
                 ${_styledcomponents.segmentTokens.itemSelectedAdditionalColor}: var(--text-secondary);
                 ${_styledcomponents.segmentTokens.itemSelectedAdditionalColorHover}: var(--text-secondary);
 
-                ${_styledcomponents.segmentTokens.groupFilledBackgroundColor}: var(--text-accent);
+                ${_styledcomponents.segmentTokens.outlineFocusColor}: var(--text-accent);
             `,
             default: (0, _styledcomponents.css)`
                 ${_styledcomponents.segmentTokens.itemColor}: var(--text-primary);
@@ -62,7 +62,7 @@ const config = {
                 ${_styledcomponents.segmentTokens.itemSelectedAdditionalColor}: var(--inverse-text-secondary);
                 ${_styledcomponents.segmentTokens.itemSelectedAdditionalColorHover}: var(--inverse-text-secondary);
 
-                ${_styledcomponents.segmentTokens.groupFilledBackgroundColor}: var(--text-accent);
+                ${_styledcomponents.segmentTokens.outlineFocusColor}: var(--text-accent);
             `,
             accent: (0, _styledcomponents.css)`
                 ${_styledcomponents.segmentTokens.itemColor}: var(--text-primary);
@@ -78,7 +78,7 @@ const config = {
                 ${_styledcomponents.segmentTokens.itemSelectedAdditionalColor}: var(--on-dark-text-secondary);
                 ${_styledcomponents.segmentTokens.itemSelectedAdditionalColorHover}: var(--on-dark-text-secondary);
 
-                ${_styledcomponents.segmentTokens.groupFilledBackgroundColor}: var(--text-accent);
+                ${_styledcomponents.segmentTokens.outlineFocusColor}: var(--text-accent);
             `
         },
         size: {

package/dist/styled-components/cjs/components/Select/Select.config.js

@@ -408,7 +408,7 @@ const config = {
                 ${_styledcomponents.selectTokens.textFieldHintInnerLabelPlacementOffset}: 0.312rem -2.813rem auto auto;
                 ${_styledcomponents.selectTokens.textFieldClearHintInnerLabelPlacementOffset}: 0.312rem -2.188rem auto auto;
 
-                ${_styledcomponents.selectTokens.textFieldLeftHelperPadding}: 0.25rem 0 0 0;
+                ${_styledcomponents.selectTokens.textFieldLeftHelperOffset}: 0.25rem 0 0 0;
                 ${_styledcomponents.selectTokens.textFieldLeftHelperFontFamily}: var(--plasma-typo-body-xs-font-family);
                 ${_styledcomponents.selectTokens.textFieldLeftHelperFontSize}: var(--plasma-typo-body-xs-font-size);
                 ${_styledcomponents.selectTokens.textFieldLeftHelperFontStyle}: var(--plasma-typo-body-xs-font-style);

package/dist/styled-components/cjs/components/Switch/Switch.config.js

@@ -79,14 +79,14 @@ const config = {
                 ${_styledcomponents.switchTokens.labelColor}: var(--text-primary);
                 ${_styledcomponents.switchTokens.descriptionColor}: var(--text-secondary);
                 ${_styledcomponents.switchTokens.descriptionMaxLines}: initial;
-                ${_styledcomponents.switchTokens.trackBackgroundColorOn}: var(--surface-accent);
-                ${_styledcomponents.switchTokens.trackBackgroundColorOnHover}: var(--surface-accent-hover);
+                ${_styledcomponents.switchTokens.trackBackgroundColorOn}: var(--surface-solid-default);
+                ${_styledcomponents.switchTokens.trackBackgroundColorOnHover}: var(--surface-solid-default-hover);
                 ${_styledcomponents.switchTokens.trackBackgroundColorOff}: var(--surface-transparent-tertiary);
                 ${_styledcomponents.switchTokens.trackBackgroundColorOffHover}: var(--surface-transparent-tertiary-hover);
                 ${_styledcomponents.switchTokens.trackBorderWidthOn}: 0;
                 ${_styledcomponents.switchTokens.trackBorderWidthOff}: 0;
-                ${_styledcomponents.switchTokens.thumbBackgroundColorOn}: var(--on-dark-surface-solid-default);
-                ${_styledcomponents.switchTokens.thumbBackgroundColorOff}: var(--on-dark-surface-solid-default);
+                ${_styledcomponents.switchTokens.thumbBackgroundColorOn}: var(--surface-solid-primary);
+                ${_styledcomponents.switchTokens.thumbBackgroundColorOff}: var(--surface-solid-primary);
                 ${_styledcomponents.switchTokens.thumbBoxShadow}: 0 1px 1px rgba(0, 0, 0, 0.11);
             `
         },

package/dist/styled-components/cjs/components/TextField/TextField.config.js

@@ -202,7 +202,7 @@ const config = {
                 ${_styledcomponents.textFieldTokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing);
                 ${_styledcomponents.textFieldTokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height);
 
-                ${_styledcomponents.textFieldTokens.leftHelperPadding}: 0.25rem 0 0 0;
+                ${_styledcomponents.textFieldTokens.leftHelperOffset}: 0.25rem 0 0 0;
                 ${_styledcomponents.textFieldTokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family);
                 ${_styledcomponents.textFieldTokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size);
                 ${_styledcomponents.textFieldTokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style);

package/dist/styled-components/cjs/components/TextFieldGroup/TextFieldGroup.config.js

@@ -45,7 +45,7 @@ const config = {
                 ${_styledcomponents.textFieldGroupTokens.labelLetterSpacing}: var(--plasma-typo-body-m-letter-spacing);
                 ${_styledcomponents.textFieldGroupTokens.labelLineHeight}: var(--plasma-typo-body-m-line-height);
 
-                ${_styledcomponents.textFieldGroupTokens.leftHelperPadding}: 0.25rem 0 0 0;
+                ${_styledcomponents.textFieldGroupTokens.leftHelperOffset}: 0.25rem 0 0 0;
                 ${_styledcomponents.textFieldGroupTokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family);
                 ${_styledcomponents.textFieldGroupTokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size);
                 ${_styledcomponents.textFieldGroupTokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style);

package/dist/styled-components/cjs/index.js

@@ -13,6 +13,7 @@ _export_star(require("./components/Card"), exports);
 _export_star(require("./components/Cell"), exports);
 _export_star(require("./components/Chip"), exports);
 _export_star(require("./components/ChipGroup"), exports);
+_export_star(require("./components/CodeArea"), exports);
 _export_star(require("./components/Divider"), exports);
 _export_star(require("./components/Image"), exports);
 _export_star(require("./components/InformationWrapper"), exports);

package/dist/styled-components/es/components/Autocomplete/Autocomplete.config.js

@@ -218,7 +218,7 @@ export const config = {
                 ${tokens.textFieldHintInnerLabelPlacementOffset}: 0.312rem -2.813rem auto auto;
                 ${tokens.textFieldClearHintInnerLabelPlacementOffset}: 0.312rem -2.188rem auto auto;
 
-                ${tokens.textFieldLeftHelperPadding}: 0.25rem 0 0 0;
+                ${tokens.textFieldLeftHelperOffset}: 0.25rem 0 0 0;
                 ${tokens.textFieldLeftHelperFontFamily}: var(--plasma-typo-body-xs-font-family);
                 ${tokens.textFieldLeftHelperFontSize}: var(--plasma-typo-body-xs-font-size);
                 ${tokens.textFieldLeftHelperFontStyle}: var(--plasma-typo-body-xs-font-style);