@salutejs/sdds-cs 0.361.0-next-sbcom.0 → 0.362.0-dev.0

package/dist/emotion/cjs/components/EmptyState/EmptyState.config.js

@@ -8,6 +8,7 @@ Object.defineProperty(exports, "config", {
         return config;
     }
 });
+const _sdds_cs = require("@salutejs/sdds-themes/tokens/sdds_cs");
 const _emotion = require("@salutejs/plasma-new-hope/emotion");
 const config = {
     defaults: {
@@ -22,12 +23,12 @@ const config = {
                 ${_emotion.emptyStateTokens.descriptionMargin}: 0 0 1rem 0;
                 ${_emotion.emptyStateTokens.buttonMargin}: -1rem 0 0 0;
                 ${_emotion.emptyStateTokens.buttonHeight}: 3.5rem;
-                ${_emotion.emptyStateTokens.fontFamily}: var(--plasma-typo-body-l-font-family);
-                ${_emotion.emptyStateTokens.fontSize}: var(--plasma-typo-body-l-font-size);
-                ${_emotion.emptyStateTokens.fontStyle}: var(--plasma-typo-body-l-font-style);
-                ${_emotion.emptyStateTokens.fontWeight}: var(--plasma-typo-body-l-font-weight);
-                ${_emotion.emptyStateTokens.fontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing);
-                ${_emotion.emptyStateTokens.fontLineHeight}: var(--plasma-typo-body-l-line-height);
+                ${_emotion.emptyStateTokens.fontFamily}: ${_sdds_cs.bodyL.fontFamily};
+                ${_emotion.emptyStateTokens.fontSize}: ${_sdds_cs.bodyL.fontSize};
+                ${_emotion.emptyStateTokens.fontStyle}: ${_sdds_cs.bodyL.fontStyle};
+                ${_emotion.emptyStateTokens.fontWeight}: ${_sdds_cs.bodyL.fontWeight};
+                ${_emotion.emptyStateTokens.fontLetterSpacing}: ${_sdds_cs.bodyL.letterSpacing};
+                ${_emotion.emptyStateTokens.fontLineHeight}: ${_sdds_cs.bodyL.lineHeight};
             `,
             m: (0, _emotion.css)`
                 ${_emotion.emptyStateTokens.borderRadius}: 0.75rem;
@@ -36,12 +37,12 @@ const config = {
                 ${_emotion.emptyStateTokens.descriptionMargin}: 0 0 0.875rem 0;
                 ${_emotion.emptyStateTokens.buttonMargin}: -0.875rem 0 0 0;
                 ${_emotion.emptyStateTokens.buttonHeight}: 3rem;
-                ${_emotion.emptyStateTokens.fontFamily}: var(--plasma-typo-body-m-font-family);
-                ${_emotion.emptyStateTokens.fontSize}: var(--plasma-typo-body-m-font-size);
-                ${_emotion.emptyStateTokens.fontStyle}: var(--plasma-typo-body-m-font-style);
-                ${_emotion.emptyStateTokens.fontWeight}: var(--plasma-typo-body-m-font-weight);
-                ${_emotion.emptyStateTokens.fontLetterSpacing}: var(--plasma-typo-body-m-letter-spacing);
-                ${_emotion.emptyStateTokens.fontLineHeight}: var(--plasma-typo-body-m-line-height);
+                ${_emotion.emptyStateTokens.fontFamily}: ${_sdds_cs.bodyM.fontFamily};
+                ${_emotion.emptyStateTokens.fontSize}: ${_sdds_cs.bodyM.fontSize};
+                ${_emotion.emptyStateTokens.fontStyle}: ${_sdds_cs.bodyM.fontStyle};
+                ${_emotion.emptyStateTokens.fontWeight}: ${_sdds_cs.bodyM.fontWeight};
+                ${_emotion.emptyStateTokens.fontLetterSpacing}: ${_sdds_cs.bodyM.letterSpacing};
+                ${_emotion.emptyStateTokens.fontLineHeight}: ${_sdds_cs.bodyM.lineHeight};
             `,
             s: (0, _emotion.css)`
                 ${_emotion.emptyStateTokens.borderRadius}: 0.625rem;
@@ -50,12 +51,12 @@ const config = {
                 ${_emotion.emptyStateTokens.descriptionMargin}: 0 0 0.625rem 0;
                 ${_emotion.emptyStateTokens.buttonMargin}: -0.625rem 0 0 0;
                 ${_emotion.emptyStateTokens.buttonHeight}: 2.5rem;
-                ${_emotion.emptyStateTokens.fontFamily}: var(--plasma-typo-body-s-font-family);
-                ${_emotion.emptyStateTokens.fontSize}: var(--plasma-typo-body-s-font-size);
-                ${_emotion.emptyStateTokens.fontStyle}: var(--plasma-typo-body-s-font-style);
-                ${_emotion.emptyStateTokens.fontWeight}: var(--plasma-typo-body-s-font-weight);
-                ${_emotion.emptyStateTokens.fontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing);
-                ${_emotion.emptyStateTokens.fontLineHeight}: var(--plasma-typo-body-s-line-height);
+                ${_emotion.emptyStateTokens.fontFamily}: ${_sdds_cs.bodyS.fontFamily};
+                ${_emotion.emptyStateTokens.fontSize}: ${_sdds_cs.bodyS.fontSize};
+                ${_emotion.emptyStateTokens.fontStyle}: ${_sdds_cs.bodyS.fontStyle};
+                ${_emotion.emptyStateTokens.fontWeight}: ${_sdds_cs.bodyS.fontWeight};
+                ${_emotion.emptyStateTokens.fontLetterSpacing}: ${_sdds_cs.bodyS.letterSpacing};
+                ${_emotion.emptyStateTokens.fontLineHeight}: ${_sdds_cs.bodyS.lineHeight};
             `,
             xs: (0, _emotion.css)`
                 ${_emotion.emptyStateTokens.borderRadius}: 0.5rem;
@@ -64,12 +65,12 @@ const config = {
                 ${_emotion.emptyStateTokens.descriptionMargin}: 0 0 0.5rem 0;
                 ${_emotion.emptyStateTokens.buttonMargin}: -0.5rem 0 0 0;
                 ${_emotion.emptyStateTokens.buttonHeight}: 2rem;
-                ${_emotion.emptyStateTokens.fontFamily}: var(--plasma-typo-body-xs-font-family);
-                ${_emotion.emptyStateTokens.fontSize}: var(--plasma-typo-body-xs-font-size);
-                ${_emotion.emptyStateTokens.fontStyle}: var(--plasma-typo-body-xs-font-style);
-                ${_emotion.emptyStateTokens.fontWeight}: var(--plasma-typo-body-xs-font-weight);
-                ${_emotion.emptyStateTokens.fontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing);
-                ${_emotion.emptyStateTokens.fontLineHeight}: var(--plasma-typo-body-xs-line-height);
+                ${_emotion.emptyStateTokens.fontFamily}: ${_sdds_cs.bodyXS.fontFamily};
+                ${_emotion.emptyStateTokens.fontSize}: ${_sdds_cs.bodyXS.fontSize};
+                ${_emotion.emptyStateTokens.fontStyle}: ${_sdds_cs.bodyXS.fontStyle};
+                ${_emotion.emptyStateTokens.fontWeight}: ${_sdds_cs.bodyXS.fontWeight};
+                ${_emotion.emptyStateTokens.fontLetterSpacing}: ${_sdds_cs.bodyXS.letterSpacing};
+                ${_emotion.emptyStateTokens.fontLineHeight}: ${_sdds_cs.bodyXS.lineHeight};
             `
         }
     }

package/dist/emotion/cjs/components/IconButton/IconButton.config.js

@@ -8,6 +8,7 @@ Object.defineProperty(exports, "config", {
         return config;
     }
 });
+const _sdds_cs = require("@salutejs/sdds-themes/tokens/sdds_cs");
 const _emotion = require("@salutejs/plasma-new-hope/emotion");
 const config = {
     defaults: {
@@ -18,29 +19,29 @@ const config = {
     variations: {
         view: {
             accent: (0, _emotion.css)`
-                ${_emotion.iconButtonTokens.iconButtonColor}: var(--on-dark-text-primary);
-                ${_emotion.iconButtonTokens.iconButtonBackgroundColor}: var(--surface-accent);
+                ${_emotion.iconButtonTokens.iconButtonColor}: ${_sdds_cs.onDarkTextPrimary};
+                ${_emotion.iconButtonTokens.iconButtonBackgroundColor}: ${_sdds_cs.surfaceAccent};
                 ${_emotion.iconButtonTokens.iconButtonLoadingBackgroundColor}: var(${_emotion.iconButtonTokens.iconButtonBackgroundColor});
-                ${_emotion.iconButtonTokens.iconButtonBackgroundColorHover}: var(--surface-accent-hover);
-                ${_emotion.iconButtonTokens.iconButtonBackgroundColorActive}: var(--surface-accent-active);
+                ${_emotion.iconButtonTokens.iconButtonBackgroundColorHover}: ${_sdds_cs.surfaceAccentHover};
+                ${_emotion.iconButtonTokens.iconButtonBackgroundColorActive}: ${_sdds_cs.surfaceAccentActive};
             `,
             secondary: (0, _emotion.css)`
-                ${_emotion.iconButtonTokens.iconButtonColor}: var(--text-accent);
-                ${_emotion.iconButtonTokens.iconButtonColorHover}: var(--text-accent-minor);
+                ${_emotion.iconButtonTokens.iconButtonColor}: ${_sdds_cs.textAccent};
+                ${_emotion.iconButtonTokens.iconButtonColorHover}: ${_sdds_cs.textAccentMinor};
 
-                ${_emotion.iconButtonTokens.iconButtonBackgroundColor}: var(--surface-solid-secondary);
-                ${_emotion.iconButtonTokens.iconButtonBackgroundColorHover}: var(--surface-solid-secondary-hover);
-                ${_emotion.iconButtonTokens.iconButtonBackgroundColorActive}: var(--surface-solid-secondary-active);
+                ${_emotion.iconButtonTokens.iconButtonBackgroundColor}: ${_sdds_cs.surfaceSolidSecondary};
+                ${_emotion.iconButtonTokens.iconButtonBackgroundColorHover}: ${_sdds_cs.surfaceSolidSecondaryHover};
+                ${_emotion.iconButtonTokens.iconButtonBackgroundColorActive}: ${_sdds_cs.surfaceSolidSecondaryActive};
                 ${_emotion.iconButtonTokens.iconButtonLoadingBackgroundColor}: var(${_emotion.iconButtonTokens.iconButtonBackgroundColor});
 
-                ${_emotion.iconButtonTokens.iconButtonColorActive}: var(--text-accent-active);
+                ${_emotion.iconButtonTokens.iconButtonColorActive}: ${_sdds_cs.textAccentActive};
             `,
             clear: (0, _emotion.css)`
-                ${_emotion.iconButtonTokens.iconButtonColor}: var(--text-accent);
-                ${_emotion.iconButtonTokens.iconButtonBackgroundColor}: var(--surface-clear);
-                ${_emotion.iconButtonTokens.iconButtonLoadingBackgroundColor}: var(--surface-transparent-accent);
-                ${_emotion.iconButtonTokens.iconButtonBackgroundColorHover}: var(--surface-transparent-accent);
-                ${_emotion.iconButtonTokens.iconButtonBackgroundColorActive}: var(--surface-transparent-accent-active);
+                ${_emotion.iconButtonTokens.iconButtonColor}: ${_sdds_cs.textAccent};
+                ${_emotion.iconButtonTokens.iconButtonBackgroundColor}: ${_sdds_cs.surfaceClear};
+                ${_emotion.iconButtonTokens.iconButtonLoadingBackgroundColor}: ${_sdds_cs.surfaceTransparentAccent};
+                ${_emotion.iconButtonTokens.iconButtonBackgroundColorHover}: ${_sdds_cs.surfaceTransparentAccent};
+                ${_emotion.iconButtonTokens.iconButtonBackgroundColorActive}: ${_sdds_cs.surfaceTransparentAccentActive};
             `
         },
         size: {
@@ -49,12 +50,12 @@ const config = {
                 ${_emotion.iconButtonTokens.iconButtonWidth}: 3rem;
                 ${_emotion.iconButtonTokens.iconButtonPadding}: 0.75rem;
                 ${_emotion.iconButtonTokens.iconButtonRadius}: 0.75rem;
-                ${_emotion.iconButtonTokens.iconButtonFontFamily}: var(--plasma-typo-body-m-font-family);
-                ${_emotion.iconButtonTokens.iconButtonFontSize}: var(--plasma-typo-body-m-font-size);
-                ${_emotion.iconButtonTokens.iconButtonFontStyle}: var(--plasma-typo-body-m-font-style);
-                ${_emotion.iconButtonTokens.iconButtonFontWeight}: var(--plasma-typo-body-m-bold-font-weight);
-                ${_emotion.iconButtonTokens.iconButtonLetterSpacing}: var(--plasma-typo-body-m-letter-spacing);
-                ${_emotion.iconButtonTokens.iconButtonLineHeight}: var(--plasma-typo-body-m-line-height);
+                ${_emotion.iconButtonTokens.iconButtonFontFamily}: ${_sdds_cs.bodyM.fontFamily};
+                ${_emotion.iconButtonTokens.iconButtonFontSize}: ${_sdds_cs.bodyM.fontSize};
+                ${_emotion.iconButtonTokens.iconButtonFontStyle}: ${_sdds_cs.bodyM.fontStyle};
+                ${_emotion.iconButtonTokens.iconButtonFontWeight}: ${_sdds_cs.bodyMBold.fontWeight};
+                ${_emotion.iconButtonTokens.iconButtonLetterSpacing}: ${_sdds_cs.bodyM.letterSpacing};
+                ${_emotion.iconButtonTokens.iconButtonLineHeight}: ${_sdds_cs.bodyM.lineHeight};
 
                 ${_emotion.iconButtonTokens.iconButtonSpinnerSize}: 1.375rem;
                 ${_emotion.iconButtonTokens.iconButtonSpinnerColor}: inherit;
@@ -64,12 +65,12 @@ const config = {
                 ${_emotion.iconButtonTokens.iconButtonWidth}: 2.5rem;
                 ${_emotion.iconButtonTokens.iconButtonPadding}: 1rem;
                 ${_emotion.iconButtonTokens.iconButtonRadius}: 0.75rem;
-                ${_emotion.iconButtonTokens.iconButtonFontFamily}: var(--plasma-typo-body-s-font-family);
-                ${_emotion.iconButtonTokens.iconButtonFontSize}: var(--plasma-typo-body-s-font-size);
-                ${_emotion.iconButtonTokens.iconButtonFontStyle}: var(--plasma-typo-body-s-font-style);
-                ${_emotion.iconButtonTokens.iconButtonFontWeight}: var(--plasma-typo-body-s-bold-font-weight);
-                ${_emotion.iconButtonTokens.iconButtonLetterSpacing}: var(--plasma-typo-body-s-letter-spacing);
-                ${_emotion.iconButtonTokens.iconButtonLineHeight}: var(--plasma-typo-body-s-line-height);
+                ${_emotion.iconButtonTokens.iconButtonFontFamily}: ${_sdds_cs.bodyS.fontFamily};
+                ${_emotion.iconButtonTokens.iconButtonFontSize}: ${_sdds_cs.bodyS.fontSize};
+                ${_emotion.iconButtonTokens.iconButtonFontStyle}: ${_sdds_cs.bodyS.fontStyle};
+                ${_emotion.iconButtonTokens.iconButtonFontWeight}: ${_sdds_cs.bodySBold.fontWeight};
+                ${_emotion.iconButtonTokens.iconButtonLetterSpacing}: ${_sdds_cs.bodyS.letterSpacing};
+                ${_emotion.iconButtonTokens.iconButtonLineHeight}: ${_sdds_cs.bodyS.lineHeight};
 
                 ${_emotion.iconButtonTokens.iconButtonSpinnerSize}: 1.375rem;
                 ${_emotion.iconButtonTokens.iconButtonSpinnerColor}: inherit;
@@ -82,7 +83,7 @@ const config = {
         },
         focused: {
             true: (0, _emotion.css)`
-                ${_emotion.iconButtonTokens.iconButtonFocusColor}: var(--surface-accent);
+                ${_emotion.iconButtonTokens.iconButtonFocusColor}: ${_sdds_cs.surfaceAccent};
             `
         }
     }

package/dist/emotion/cjs/components/IconButton/IconButton.js

@@ -8,8 +8,77 @@ Object.defineProperty(exports, "IconButton", {
         return IconButton;
     }
 });
+const _react = /*#__PURE__*/ _interop_require_wildcard(require("react"));
 const _emotion = require("@salutejs/plasma-new-hope/emotion");
+const _styled = /*#__PURE__*/ _interop_require_default(require("@emotion/styled"));
 const _IconButtonconfig = require("./IconButton.config");
+function _interop_require_default(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
+function _getRequireWildcardCache(nodeInterop) {
+    if (typeof WeakMap !== "function") return null;
+    var cacheBabelInterop = new WeakMap();
+    var cacheNodeInterop = new WeakMap();
+    return (_getRequireWildcardCache = function(nodeInterop) {
+        return nodeInterop ? cacheNodeInterop : cacheBabelInterop;
+    })(nodeInterop);
+}
+function _interop_require_wildcard(obj, nodeInterop) {
+    if (!nodeInterop && obj && obj.__esModule) {
+        return obj;
+    }
+    if (obj === null || typeof obj !== "object" && typeof obj !== "function") {
+        return {
+            default: obj
+        };
+    }
+    var cache = _getRequireWildcardCache(nodeInterop);
+    if (cache && cache.has(obj)) {
+        return cache.get(obj);
+    }
+    var newObj = {
+        __proto__: null
+    };
+    var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor;
+    for(var key in obj){
+        if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) {
+            var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null;
+            if (desc && (desc.get || desc.set)) {
+                Object.defineProperty(newObj, key, desc);
+            } else {
+                newObj[key] = obj[key];
+            }
+        }
+    }
+    newObj.default = obj;
+    if (cache) {
+        cache.set(obj, newObj);
+    }
+    return newObj;
+}
 const mergedConfig = (0, _emotion.mergeConfig)(_emotion.iconButtonConfig, _IconButtonconfig.config);
 const IconButtonComponent = (0, _emotion.component)(mergedConfig);
-const IconButton = IconButtonComponent;
+const { iconButtonBackgroundColorActive, iconButtonBackgroundColor, iconButtonColor, iconButtonColorActive } = _emotion.iconButtonTokens;
+// INFO: Данное поведение запрошено продуктом
+const StyledIconButton = /*#__PURE__*/ (0, _styled.default)(IconButtonComponent, {
+    target: "ez9pxld0",
+    label: "StyledIconButton"
+})("&&.", String(_emotion.buttonClasses.buttonLoading), "{color:var(", iconButtonColorActive, ",var(", iconButtonColor, "));background:var(", iconButtonBackgroundColorActive, ",var(", iconButtonBackgroundColor, "));pointer-events:none;}", "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic3JjL2NvbXBvbmVudHMvSWNvbkJ1dHRvbi9JY29uQnV0dG9uLnRzeCIsInNvdXJjZXMiOlsic3JjL2NvbXBvbmVudHMvSWNvbkJ1dHRvbi9JY29uQnV0dG9uLnRzeCJdLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgUmVhY3QsIHsgQ29tcG9uZW50UHJvcHMsIHVzZUNhbGxiYWNrLCBNb3VzZUV2ZW50LCBmb3J3YXJkUmVmIH0gZnJvbSAncmVhY3QnO1xuaW1wb3J0IHtcbiAgICBpY29uQnV0dG9uQ29uZmlnLFxuICAgIGNvbXBvbmVudCxcbiAgICBtZXJnZUNvbmZpZyxcbiAgICBidXR0b25DbGFzc2VzLFxuICAgIGljb25CdXR0b25Ub2tlbnMsXG59IGZyb20gJ0BzYWx1dGVqcy9wbGFzbWEtbmV3LWhvcGUvZW1vdGlvbic7XG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCc7XG5cbmltcG9ydCB7IGNvbmZpZyB9IGZyb20gJy4vSWNvbkJ1dHRvbi5jb25maWcnO1xuXG5jb25zdCBtZXJnZWRDb25maWcgPSBtZXJnZUNvbmZpZyhpY29uQnV0dG9uQ29uZmlnLCBjb25maWcpO1xuY29uc3QgSWNvbkJ1dHRvbkNvbXBvbmVudCA9IGNvbXBvbmVudChtZXJnZWRDb25maWcpO1xuXG50eXBlIEljb25CdXR0b25Qcm9wcyA9IENvbXBvbmVudFByb3BzPHR5cGVvZiBJY29uQnV0dG9uQ29tcG9uZW50PjtcblxuY29uc3Qge1xuICAgIGljb25CdXR0b25CYWNrZ3JvdW5kQ29sb3JBY3RpdmUsXG4gICAgaWNvbkJ1dHRvbkJhY2tncm91bmRDb2xvcixcbiAgICBpY29uQnV0dG9uQ29sb3IsXG4gICAgaWNvbkJ1dHRvbkNvbG9yQWN0aXZlLFxufSA9IGljb25CdXR0b25Ub2tlbnM7XG5cbi8vIElORk86INCU0LDQvdC90L7QtSDQv9C+0LLQtdC00LXQvdC40LUg0LfQsNC/0YDQvtGI0LXQvdC+INC/0YDQvtC00YPQutGC0L7QvFxuY29uc3QgU3R5bGVkSWNvbkJ1dHRvbiA9IHN0eWxlZChJY29uQnV0dG9uQ29tcG9uZW50KWBcbiAgICAmJi4ke1N0cmluZyhidXR0b25DbGFzc2VzLmJ1dHRvbkxvYWRpbmcpfSB7XG4gICAgICAgIGNvbG9yOiB2YXIoJHtpY29uQnV0dG9uQ29sb3JBY3RpdmV9LCB2YXIoJHtpY29uQnV0dG9uQ29sb3J9KSk7XG4gICAgICAgIGJhY2tncm91bmQ6IHZhcigke2ljb25CdXR0b25CYWNrZ3JvdW5kQ29sb3JBY3RpdmV9LCB2YXIoJHtpY29uQnV0dG9uQmFja2dyb3VuZENvbG9yfSkpO1xuXG4gICAgICAgIHBvaW50ZXItZXZlbnRzOiBub25lO1xuICAgIH1cbmA7XG5cbi8qKlxuICog0JrQvdC+0L/QutCwINGBINC40LrQvtC90LrQvtC5LlxuICovXG5leHBvcnQgY29uc3QgSWNvbkJ1dHRvbiA9IGZvcndhcmRSZWY8SFRNTEJ1dHRvbkVsZW1lbnQsIEljb25CdXR0b25Qcm9wcz4oKHsgb25DbGljaywgaXNMb2FkaW5nLCAuLi5wcm9wcyB9LCByZWYpID0+IHtcbiAgICBjb25zdCBoYW5kbGVDbGljayA9IHVzZUNhbGxiYWNrKFxuICAgICAgICAoZXZlbnQ6IE1vdXNlRXZlbnQ8SFRNTEJ1dHRvbkVsZW1lbnQ+KSA9PiB7XG4gICAgICAgICAgICBpZiAoIWlzTG9hZGluZykge1xuICAgICAgICAgICAgICAgIG9uQ2xpY2s/LihldmVudCk7XG4gICAgICAgICAgICB9XG4gICAgICAgIH0sXG4gICAgICAgIFtpc0xvYWRpbmcsIG9uQ2xpY2tdLFxuICAgICk7XG5cbiAgICByZXR1cm4gPFN0eWxlZEljb25CdXR0b24gcmVmPXtyZWZ9IG9uQ2xpY2s9e2hhbmRsZUNsaWNrfSBpc0xvYWRpbmc9e2lzTG9hZGluZ30gey4uLnByb3BzfSAvPjtcbn0pO1xuIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQXlCeUIifQ== */");
+const IconButton = /*#__PURE__*/ (0, _react.forwardRef)(({ onClick, isLoading, ...props }, ref)=>{
+    const handleClick = (0, _react.useCallback)((event)=>{
+        if (!isLoading) {
+            onClick?.(event);
+        }
+    }, [
+        isLoading,
+        onClick
+    ]);
+    return /*#__PURE__*/ _react.default.createElement(StyledIconButton, {
+        ref: ref,
+        onClick: handleClick,
+        isLoading: isLoading,
+        ...props
+    });
+});

package/dist/emotion/cjs/components/Indicator/Indicator.config.js

@@ -8,6 +8,7 @@ Object.defineProperty(exports, "config", {
         return config;
     }
 });
+const _sdds_cs = require("@salutejs/sdds-themes/tokens/sdds_cs");
 const _emotion = require("@salutejs/plasma-new-hope/emotion");
 const config = {
     defaults: {
@@ -17,25 +18,25 @@ const config = {
     variations: {
         view: {
             default: (0, _emotion.css)`
-                ${_emotion.indicatorTokens.color}: var(--surface-solid-default);
+                ${_emotion.indicatorTokens.color}: ${_sdds_cs.surfaceSolidDefault};
             `,
             accent: (0, _emotion.css)`
-                ${_emotion.indicatorTokens.color}: var(--surface-accent);
+                ${_emotion.indicatorTokens.color}: ${_sdds_cs.surfaceAccent};
             `,
             inactive: (0, _emotion.css)`
-                ${_emotion.indicatorTokens.color}: var(--on-light-surface-solid-primary);
+                ${_emotion.indicatorTokens.color}: ${_sdds_cs.onLightSurfaceSolidPrimary};
             `,
             positive: (0, _emotion.css)`
-                ${_emotion.indicatorTokens.color}: var(--surface-positive);
+                ${_emotion.indicatorTokens.color}: ${_sdds_cs.surfacePositive};
             `,
             negative: (0, _emotion.css)`
-                ${_emotion.indicatorTokens.color}: var(--surface-negative);
+                ${_emotion.indicatorTokens.color}: ${_sdds_cs.surfaceNegative};
             `,
             warning: (0, _emotion.css)`
-                ${_emotion.indicatorTokens.color}: var(--surface-warning);
+                ${_emotion.indicatorTokens.color}: ${_sdds_cs.surfaceWarning};
             `,
             black: (0, _emotion.css)`
-                ${_emotion.indicatorTokens.color}: var(--text-primary);
+                ${_emotion.indicatorTokens.color}: ${_sdds_cs.textPrimary};
             `
         },
         size: {

package/dist/emotion/cjs/components/Link/Link.config.js

@@ -8,6 +8,7 @@ Object.defineProperty(exports, "config", {
         return config;
     }
 });
+const _sdds_cs = require("@salutejs/sdds-themes/tokens/sdds_cs");
 const _emotion = require("@salutejs/plasma-new-hope/emotion");
 const config = {
     defaults: {
@@ -17,40 +18,40 @@ const config = {
     variations: {
         view: {
             default: (0, _emotion.css)`
-                ${_emotion.linkTokens.linkFontFamily}: var(--plasma-typo-text-m-font-family);
-                ${_emotion.linkTokens.linkColor}: var(--text-primary);
-                ${_emotion.linkTokens.linkColorHover}: var(--text-primary-hover);
-                ${_emotion.linkTokens.linkColorActive}: var(--text-primary-active);
-                ${_emotion.linkTokens.linkColorVisited}: var(--text-primary);
-                ${_emotion.linkTokens.linkColorVisitedHover}: var(--text-primary-hover);
-                ${_emotion.linkTokens.linkColorVisitedActive}: var(--text-primary-active);
+                ${_emotion.linkTokens.linkFontFamily}: ${_sdds_cs.textM.fontFamily};
+                ${_emotion.linkTokens.linkColor}: ${_sdds_cs.textPrimary};
+                ${_emotion.linkTokens.linkColorHover}: ${_sdds_cs.textPrimaryHover};
+                ${_emotion.linkTokens.linkColorActive}: ${_sdds_cs.textPrimaryActive};
+                ${_emotion.linkTokens.linkColorVisited}: ${_sdds_cs.textPrimary};
+                ${_emotion.linkTokens.linkColorVisitedHover}: ${_sdds_cs.textPrimaryHover};
+                ${_emotion.linkTokens.linkColorVisitedActive}: ${_sdds_cs.textPrimaryActive};
                 ${_emotion.linkTokens.linkUnderlineBorder}: 0.063rem;
                 ${_emotion.linkTokens.linkUnderlineOffset}: 0.25rem;
             `,
             secondary: (0, _emotion.css)`
-                ${_emotion.linkTokens.linkFontFamily}: var(--plasma-typo-text-m-font-family);
-                ${_emotion.linkTokens.linkColor}: var(--text-secondary);
-                ${_emotion.linkTokens.linkColorHover}: var(--text-secondary-hover);
-                ${_emotion.linkTokens.linkColorActive}: var(--text-secondary-active);
-                ${_emotion.linkTokens.linkColorVisited}: var(--text-secondary);
-                ${_emotion.linkTokens.linkColorVisitedHover}: var(--text-secondary-hover);
-                ${_emotion.linkTokens.linkColorVisitedActive}: var(--text-secondary-active);
+                ${_emotion.linkTokens.linkFontFamily}: ${_sdds_cs.textM.fontFamily};
+                ${_emotion.linkTokens.linkColor}: ${_sdds_cs.textSecondary};
+                ${_emotion.linkTokens.linkColorHover}: ${_sdds_cs.textSecondaryHover};
+                ${_emotion.linkTokens.linkColorActive}: ${_sdds_cs.textSecondaryActive};
+                ${_emotion.linkTokens.linkColorVisited}: ${_sdds_cs.textSecondary};
+                ${_emotion.linkTokens.linkColorVisitedHover}: ${_sdds_cs.textSecondaryHover};
+                ${_emotion.linkTokens.linkColorVisitedActive}: ${_sdds_cs.textSecondaryActive};
                 ${_emotion.linkTokens.linkUnderlineBorder}: 0.063rem;
                 ${_emotion.linkTokens.linkUnderlineOffset}: 0.25rem;
             `,
             tertiary: (0, _emotion.css)`
-                ${_emotion.linkTokens.linkFontFamily}: var(--plasma-typo-text-m-font-family);
-                ${_emotion.linkTokens.linkColor}: var(--text-tertiary);
-                ${_emotion.linkTokens.linkColorHover}: var(--text-tertiary-hover);
-                ${_emotion.linkTokens.linkColorActive}: var(--text-tertiary-active);
-                ${_emotion.linkTokens.linkColorVisited}: var(--text-tertiary);
-                ${_emotion.linkTokens.linkColorVisitedHover}: var(--text-tertiary-hover);
-                ${_emotion.linkTokens.linkColorVisitedActive}: var(--text-tertiary-active);
+                ${_emotion.linkTokens.linkFontFamily}: ${_sdds_cs.textM.fontFamily};
+                ${_emotion.linkTokens.linkColor}: ${_sdds_cs.textTertiary};
+                ${_emotion.linkTokens.linkColorHover}: ${_sdds_cs.textTertiaryHover};
+                ${_emotion.linkTokens.linkColorActive}: ${_sdds_cs.textTertiaryActive};
+                ${_emotion.linkTokens.linkColorVisited}: ${_sdds_cs.textTertiary};
+                ${_emotion.linkTokens.linkColorVisitedHover}: ${_sdds_cs.textTertiaryHover};
+                ${_emotion.linkTokens.linkColorVisitedActive}: ${_sdds_cs.textTertiaryActive};
                 ${_emotion.linkTokens.linkUnderlineBorder}: 0.063rem;
                 ${_emotion.linkTokens.linkUnderlineOffset}: 0.25rem;
             `,
             paragraph: (0, _emotion.css)`
-                ${_emotion.linkTokens.linkFontFamily}: var(--plasma-typo-text-m-font-family);
+                ${_emotion.linkTokens.linkFontFamily}: ${_sdds_cs.textM.fontFamily};
                 ${_emotion.linkTokens.linkColor}: var(--text-paragraph);
                 ${_emotion.linkTokens.linkColorHover}: var(--text-paragraph-hover);
                 ${_emotion.linkTokens.linkColorActive}: var(--text-paragraph-active);
@@ -61,51 +62,51 @@ const config = {
                 ${_emotion.linkTokens.linkUnderlineOffset}: 0.25rem;
             `,
             accent: (0, _emotion.css)`
-                ${_emotion.linkTokens.linkFontFamily}: var(--plasma-typo-text-m-font-family);
-                ${_emotion.linkTokens.linkColor}: var(--text-accent);
-                ${_emotion.linkTokens.linkColorHover}: var(--text-accent-minor);
-                ${_emotion.linkTokens.linkColorActive}: var(--text-accent-active);
-                ${_emotion.linkTokens.linkColorVisited}: var(--text-accent);
-                ${_emotion.linkTokens.linkColorVisitedHover}: var(--text-accent-minor);
-                ${_emotion.linkTokens.linkColorVisitedActive}: var(--text-accent-active);
+                ${_emotion.linkTokens.linkFontFamily}: ${_sdds_cs.textM.fontFamily};
+                ${_emotion.linkTokens.linkColor}: ${_sdds_cs.textAccent};
+                ${_emotion.linkTokens.linkColorHover}: ${_sdds_cs.textAccentMinor};
+                ${_emotion.linkTokens.linkColorActive}: ${_sdds_cs.textAccentActive};
+                ${_emotion.linkTokens.linkColorVisited}: ${_sdds_cs.textAccent};
+                ${_emotion.linkTokens.linkColorVisitedHover}: ${_sdds_cs.textAccentMinor};
+                ${_emotion.linkTokens.linkColorVisitedActive}: ${_sdds_cs.textAccentActive};
                 ${_emotion.linkTokens.linkUnderlineBorder}: 0.063rem;
                 ${_emotion.linkTokens.linkUnderlineOffset}: 0.25rem;
             `,
             positive: (0, _emotion.css)`
-                ${_emotion.linkTokens.linkFontFamily}: var(--plasma-typo-text-m-font-family);
-                ${_emotion.linkTokens.linkColor}: var(--text-positive);
-                ${_emotion.linkTokens.linkColorHover}: var(--text-positive-hover);
-                ${_emotion.linkTokens.linkColorActive}: var(--text-positive-active);
-                ${_emotion.linkTokens.linkColorVisited}: var(--text-positive);
-                ${_emotion.linkTokens.linkColorVisitedHover}: var(--text-positive-hover);
-                ${_emotion.linkTokens.linkColorVisitedActive}: var(--text-positive-active);
+                ${_emotion.linkTokens.linkFontFamily}: ${_sdds_cs.textM.fontFamily};
+                ${_emotion.linkTokens.linkColor}: ${_sdds_cs.textPositive};
+                ${_emotion.linkTokens.linkColorHover}: ${_sdds_cs.textPositiveHover};
+                ${_emotion.linkTokens.linkColorActive}: ${_sdds_cs.textPositiveActive};
+                ${_emotion.linkTokens.linkColorVisited}: ${_sdds_cs.textPositive};
+                ${_emotion.linkTokens.linkColorVisitedHover}: ${_sdds_cs.textPositiveHover};
+                ${_emotion.linkTokens.linkColorVisitedActive}: ${_sdds_cs.textPositiveActive};
                 ${_emotion.linkTokens.linkUnderlineBorder}: 0.063rem;
                 ${_emotion.linkTokens.linkUnderlineOffset}: 0.25rem;
             `,
             warning: (0, _emotion.css)`
-                ${_emotion.linkTokens.linkFontFamily}: var(--plasma-typo-text-m-font-family);
-                ${_emotion.linkTokens.linkColor}: var(--text-warning);
-                ${_emotion.linkTokens.linkColorHover}: var(--text-warning-hover);
-                ${_emotion.linkTokens.linkColorActive}: var(--text-warning-active);
-                ${_emotion.linkTokens.linkColorVisited}: var(--text-warning);
-                ${_emotion.linkTokens.linkColorVisitedHover}: var(--text-warning-hover);
-                ${_emotion.linkTokens.linkColorVisitedActive}: var(--text-warning-active);
+                ${_emotion.linkTokens.linkFontFamily}: ${_sdds_cs.textM.fontFamily};
+                ${_emotion.linkTokens.linkColor}: ${_sdds_cs.textWarning};
+                ${_emotion.linkTokens.linkColorHover}: ${_sdds_cs.textWarningHover};
+                ${_emotion.linkTokens.linkColorActive}: ${_sdds_cs.textWarningActive};
+                ${_emotion.linkTokens.linkColorVisited}: ${_sdds_cs.textWarning};
+                ${_emotion.linkTokens.linkColorVisitedHover}: ${_sdds_cs.textWarningHover};
+                ${_emotion.linkTokens.linkColorVisitedActive}: ${_sdds_cs.textWarningActive};
                 ${_emotion.linkTokens.linkUnderlineBorder}: 0.063rem;
                 ${_emotion.linkTokens.linkUnderlineOffset}: 0.25rem;
             `,
             negative: (0, _emotion.css)`
-                ${_emotion.linkTokens.linkFontFamily}: var(--plasma-typo-text-m-font-family);
-                ${_emotion.linkTokens.linkColor}: var(--text-negative);
-                ${_emotion.linkTokens.linkColorHover}: var(--text-negative-hover);
-                ${_emotion.linkTokens.linkColorActive}: var(--text-negative-active);
-                ${_emotion.linkTokens.linkColorVisited}: var(--text-negative);
-                ${_emotion.linkTokens.linkColorVisitedHover}: var(--text-negative-hover);
-                ${_emotion.linkTokens.linkColorVisitedActive}: var(--text-negative-active);
+                ${_emotion.linkTokens.linkFontFamily}: ${_sdds_cs.textM.fontFamily};
+                ${_emotion.linkTokens.linkColor}: ${_sdds_cs.textNegative};
+                ${_emotion.linkTokens.linkColorHover}: ${_sdds_cs.textNegativeHover};
+                ${_emotion.linkTokens.linkColorActive}: ${_sdds_cs.textNegativeActive};
+                ${_emotion.linkTokens.linkColorVisited}: ${_sdds_cs.textNegative};
+                ${_emotion.linkTokens.linkColorVisitedHover}: ${_sdds_cs.textNegativeHover};
+                ${_emotion.linkTokens.linkColorVisitedActive}: ${_sdds_cs.textNegativeActive};
                 ${_emotion.linkTokens.linkUnderlineBorder}: 0.063rem;
                 ${_emotion.linkTokens.linkUnderlineOffset}: 0.25rem;
             `,
             clear: (0, _emotion.css)`
-                ${_emotion.linkTokens.linkFontFamily}: var(--plasma-typo-text-m-font-family);
+                ${_emotion.linkTokens.linkFontFamily}: ${_sdds_cs.textM.fontFamily};
                 ${_emotion.linkTokens.linkColor}:inherit;
                 ${_emotion.linkTokens.linkColorHover}: inherit;
                 ${_emotion.linkTokens.linkColorActive}: inherit;
@@ -123,7 +124,7 @@ const config = {
         },
         focused: {
             true: (0, _emotion.css)`
-                ${_emotion.linkTokens.linkColorFocus}: var(--text-primary);
+                ${_emotion.linkTokens.linkColorFocus}: ${_sdds_cs.textPrimary};
             `
         }
     }

package/dist/emotion/cjs/components/Modal/Modal.config.js

@@ -8,6 +8,7 @@ Object.defineProperty(exports, "config", {
         return config;
     }
 });
+const _sdds_cs = require("@salutejs/sdds-themes/tokens/sdds_cs");
 const _emotion = require("@salutejs/plasma-new-hope/emotion");
 const config = {
     defaults: {
@@ -18,15 +19,15 @@ const config = {
             default: (0, _emotion.css)`
                 ${_emotion.modalTokens.modalOverlayWithBlurColor}: rgba(35, 35, 35, 0.2);
                 ${_emotion.modalTokens.modalOverlayColor}: var(--overlay-soft);
-                ${_emotion.modalTokens.modalBodyBackground}: var(--surface-solid-card);
+                ${_emotion.modalTokens.modalBodyBackground}: ${_sdds_cs.surfaceSolidCard};
                 ${_emotion.modalTokens.modalBodyBorderRadius}: 1.25rem;
                 ${_emotion.modalTokens.modalBodyPadding}: 2rem;
                 ${_emotion.modalTokens.modalContentPadding}: 0.625rem;
                 ${_emotion.modalTokens.modalCloseButtonRadius}: 0.375rem;
-                ${_emotion.modalTokens.modalCloseButtonColor}: var(--text-accent);
-                ${_emotion.modalTokens.modalCloseButtonHoverColor}: var(--text-accent-minor);
-                ${_emotion.modalTokens.modalCloseButtonActiveColor}: var(--text-accent-active);
-                ${_emotion.modalTokens.modalOutlineFocusColor}: var(--surface-accent);
+                ${_emotion.modalTokens.modalCloseButtonColor}: ${_sdds_cs.textAccent};
+                ${_emotion.modalTokens.modalCloseButtonHoverColor}: ${_sdds_cs.textAccentMinor};
+                ${_emotion.modalTokens.modalCloseButtonActiveColor}: ${_sdds_cs.textAccentActive};
+                ${_emotion.modalTokens.modalOutlineFocusColor}: ${_sdds_cs.surfaceAccent};
             `
         }
     }

package/dist/emotion/cjs/components/Notification/Notification.config.js

@@ -8,6 +8,7 @@ Object.defineProperty(exports, "config", {
         return config;
     }
 });
+const _sdds_cs = require("@salutejs/sdds-themes/tokens/sdds_cs");
 const _emotion = require("@salutejs/plasma-new-hope/emotion");
 const config = {
     defaults: {
@@ -17,13 +18,13 @@ const config = {
     variations: {
         view: {
             default: (0, _emotion.css)`
-                ${_emotion.notificationTokens.titleColor}: var(--text-primary);
-                ${_emotion.notificationTokens.contentLeftIconColor}: var(--text-primary);
-                ${_emotion.notificationTokens.contentColor}: var(--text-secondary);
-                ${_emotion.notificationTokens.background}: var(--surface-solid-card);
+                ${_emotion.notificationTokens.titleColor}: ${_sdds_cs.textPrimary};
+                ${_emotion.notificationTokens.contentLeftIconColor}: ${_sdds_cs.textPrimary};
+                ${_emotion.notificationTokens.contentColor}: ${_sdds_cs.textSecondary};
+                ${_emotion.notificationTokens.background}: ${_sdds_cs.surfaceSolidCard};
                 ${_emotion.notificationTokens.borderRadius}: 0.75rem;
                 ${_emotion.notificationTokens.padding}: 0.75rem;
-                ${_emotion.notificationTokens.borderColor}: var(--outline-solid-primary);
+                ${_emotion.notificationTokens.borderColor}: ${_sdds_cs.outlineSolidPrimary};
 
                 ${_emotion.notificationTokens.contentPaddingTop}: 0.125rem;
                 ${_emotion.notificationTokens.contentPaddingRight}: 0.25rem;
@@ -50,22 +51,22 @@ const config = {
                 ${_emotion.notificationTokens.contentLeftIconMargin}: 0.25rem;
                 ${_emotion.notificationTokens.contentTopIconMargin}: 0.25rem;
 
-                ${_emotion.notificationTokens.contentFontFamily}: var(--plasma-typo-body-s-font-family);
-                ${_emotion.notificationTokens.contentFontSize}: var(--plasma-typo-body-s-font-size);
-                ${_emotion.notificationTokens.contentFontStyle}: var(--plasma-typo-body-s-font-style);
-                ${_emotion.notificationTokens.contentFontWeight}: var(--plasma-typo-body-s-font-weight);
-                ${_emotion.notificationTokens.contentFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing);
-                ${_emotion.notificationTokens.contentFontLineHeight}: var(--plasma-typo-body-s-line-height);
-
-                ${_emotion.notificationTokens.titleFontFamily}: var(--plasma-typo-body-m-font-family);
-                ${_emotion.notificationTokens.titleFontSize}: var(--plasma-typo-body-m-font-size);
-                ${_emotion.notificationTokens.titleFontStyle}: var(--plasma-typo-body-m-font-style);
-                ${_emotion.notificationTokens.titleFontWeight}: var(--plasma-typo-body-m-bold-font-weight);
-                ${_emotion.notificationTokens.titleFontLetterSpacing}: var(--plasma-typo-body-m-letter-spacing);
-                ${_emotion.notificationTokens.titleFontLineHeight}: var(--plasma-typo-body-m-line-height);
-
-                ${_emotion.notificationTokens.closeIconColor}: var(--text-accent);
-                ${_emotion.notificationTokens.closeIconColorOnHover}:var(--text-accent-minor);
+                ${_emotion.notificationTokens.contentFontFamily}: ${_sdds_cs.bodyS.fontFamily};
+                ${_emotion.notificationTokens.contentFontSize}: ${_sdds_cs.bodyS.fontSize};
+                ${_emotion.notificationTokens.contentFontStyle}: ${_sdds_cs.bodyS.fontStyle};
+                ${_emotion.notificationTokens.contentFontWeight}: ${_sdds_cs.bodyS.fontWeight};
+                ${_emotion.notificationTokens.contentFontLetterSpacing}: ${_sdds_cs.bodyS.letterSpacing};
+                ${_emotion.notificationTokens.contentFontLineHeight}: ${_sdds_cs.bodyS.lineHeight};
+
+                ${_emotion.notificationTokens.titleFontFamily}: ${_sdds_cs.bodyM.fontFamily};
+                ${_emotion.notificationTokens.titleFontSize}: ${_sdds_cs.bodyM.fontSize};
+                ${_emotion.notificationTokens.titleFontStyle}: ${_sdds_cs.bodyM.fontStyle};
+                ${_emotion.notificationTokens.titleFontWeight}: ${_sdds_cs.bodyMBold.fontWeight};
+                ${_emotion.notificationTokens.titleFontLetterSpacing}: ${_sdds_cs.bodyM.letterSpacing};
+                ${_emotion.notificationTokens.titleFontLineHeight}: ${_sdds_cs.bodyM.lineHeight};
+
+                ${_emotion.notificationTokens.closeIconColor}: ${_sdds_cs.textAccent};
+                ${_emotion.notificationTokens.closeIconColorOnHover}:${_sdds_cs.textAccentMinor};
 
                 ${_emotion.notificationTokens.horizontalLayoutGap}: 0.5rem;
                 ${_emotion.notificationTokens.horizontalLayoutLeftIconMargin}: 0.75rem;