@alfalab/core-components 21.3.2 → 22.2.0

package/button/Component.js

@@ -51,13 +51,13 @@ function __rest(s, e) {
     return t;
 }
 
-var styles = {"component":"button__component_15wb8","focused":"button__focused_15wb8","loading":"button__loading_15wb8","text":"button__text_15wb8","addons":"button__addons_15wb8","stretchText":"button__stretchText_15wb8","loader":"button__loader_15wb8","xs":"button__xs_15wb8","iconOnly":"button__iconOnly_15wb8","s":"button__s_15wb8","m":"button__m_15wb8","l":"button__l_15wb8","xl":"button__xl_15wb8","link":"button__link_15wb8","ghost":"button__ghost_15wb8","block":"button__block_15wb8","nowrap":"button__nowrap_15wb8"};
+var styles = {"component":"button__component_13l79","focused":"button__focused_13l79","loading":"button__loading_13l79","text":"button__text_13l79","addons":"button__addons_13l79","stretchText":"button__stretchText_13l79","loader":"button__loader_13l79","xxs":"button__xxs_13l79","iconOnly":"button__iconOnly_13l79","xs":"button__xs_13l79","s":"button__s_13l79","m":"button__m_13l79","l":"button__l_13l79","xl":"button__xl_13l79","withRightAddons":"button__withRightAddons_13l79","withLeftAddons":"button__withLeftAddons_13l79","link":"button__link_13l79","ghost":"button__ghost_13l79","block":"button__block_13l79","nowrap":"button__nowrap_13l79"};
 require('./index.css');
 
-var defaultColors = {"primary":"button__primary_t05jj","secondary":"button__secondary_t05jj","outlined":"button__outlined_t05jj","filled":"button__filled_t05jj","transparent":"button__transparent_t05jj","link":"button__link_t05jj","ghost":"button__ghost_t05jj","component":"button__component_t05jj","loading":"button__loading_t05jj"};
+var defaultColors = {"primary":"button__primary_1i4d0","secondary":"button__secondary_1i4d0","outlined":"button__outlined_1i4d0","tertiary":"button__tertiary_1i4d0","filled":"button__filled_1i4d0","transparent":"button__transparent_1i4d0","link":"button__link_1i4d0","ghost":"button__ghost_1i4d0","component":"button__component_1i4d0","loading":"button__loading_1i4d0"};
 require('./default.css');
 
-var invertedColors = {"primary":"button__primary_hq414","secondary":"button__secondary_hq414","outlined":"button__outlined_hq414","filled":"button__filled_hq414","transparent":"button__transparent_hq414","link":"button__link_hq414","ghost":"button__ghost_hq414","component":"button__component_hq414","loading":"button__loading_hq414"};
+var invertedColors = {"primary":"button__primary_16ubh","secondary":"button__secondary_16ubh","outlined":"button__outlined_16ubh","tertiary":"button__tertiary_16ubh","filled":"button__filled_16ubh","transparent":"button__transparent_16ubh","link":"button__link_16ubh","ghost":"button__ghost_16ubh","component":"button__component_16ubh","loading":"button__loading_16ubh"};
 require('./inverted.css');
 
 var colorStyles = {
@@ -69,21 +69,40 @@ var colorStyles = {
  * чтобы при быстрых ответах от сервера кнопка не «моргала».
  */
 var LOADER_MIN_DISPLAY_INTERVAL = 500;
+var logWarning = function (view) {
+    var viewsMap = {
+        filled: 'secondary',
+        transparent: 'secondary',
+        outlined: 'tertiary',
+    };
+    // eslint-disable-next-line no-console
+    console.warn(
+    // eslint-disable-next-line prefer-template
+    "@alfalab/core-components/button: view='" + view + "' \u0431\u0443\u0434\u0435\u0442 \u0443\u0434\u0430\u043B\u0435\u043D \u0432 \u0441\u043B\u0435\u0434\u0443\u044E\u0449\u0438\u0445 \u043C\u0430\u0436\u043E\u0440\u043D\u044B\u0445 \u0432\u0435\u0440\u0441\u0438\u044F\u0445. " +
+        ("\u0418\u0441\u043F\u043E\u043B\u044C\u0437\u0443\u0439\u0442\u0435 view='" + viewsMap[view] + "'. \u0427\u0442\u043E\u0431\u044B \u043F\u043E\u043C\u0435\u043D\u044F\u0442\u044C \u0432\u0441\u0435 \u043A\u043D\u043E\u043F\u043A\u0438 \u043D\u0430 \u043F\u0440\u043E\u0435\u043A\u0442\u0435 \u0440\u0430\u0437\u043E\u043C, \u043C\u043E\u0436\u043D\u043E \u0432\u043E\u0441\u043F\u043E\u043B\u044C\u0437\u043E\u0432\u0430\u0442\u044C\u0441\u044F codemod: ") +
+        'npx core-components-codemod --components=ButtonViews src/**/*.tsx');
+};
 var Button = React__default['default'].forwardRef(function (_a, ref) {
     var _b, _c, _d;
     var children = _a.children, _e = _a.view, view = _e === void 0 ? 'secondary' : _e, leftAddons = _a.leftAddons, rightAddons = _a.rightAddons, _f = _a.size, size = _f === void 0 ? 'm' : _f, _g = _a.block, block = _g === void 0 ? false : _g, className = _a.className, dataTestId = _a.dataTestId, href = _a.href, _h = _a.loading, loading = _h === void 0 ? false : _h, _j = _a.nowrap, nowrap = _j === void 0 ? false : _j, _k = _a.colors, colors = _k === void 0 ? 'default' : _k, _l = _a.Component, Component = _l === void 0 ? href ? 'a' : 'button' : _l, restProps = __rest(_a, ["children", "view", "leftAddons", "rightAddons", "size", "block", "className", "dataTestId", "href", "loading", "nowrap", "colors", "Component"]);
+    if (['outlined', 'filled', 'transparent'].includes(view)) {
+        logWarning(view);
+    }
     var buttonRef = React.useRef(null);
     var focused = hooks.useFocus(buttonRef, 'keyboard')[0];
     var _m = React.useState(true), loaderTimePassed = _m[0], setLoaderTimePassed = _m[1];
     var timerId = React.useRef(0);
     var showLoader = loading || !loaderTimePassed;
+    var iconOnly = !children;
     var componentProps = {
         className: cn__default['default'](styles.component, styles[view], styles[size], colorStyles[colors].component, colorStyles[colors][view], (_b = {},
             _b[styles.focused] = focused,
             _b[styles.block] = block,
-            _b[styles.iconOnly] = !children,
+            _b[styles.iconOnly] = iconOnly,
             _b[styles.nowrap] = nowrap,
             _b[styles.loading] = showLoader,
+            _b[styles.withRightAddons] = Boolean(rightAddons) && !iconOnly,
+            _b[styles.withLeftAddons] = Boolean(leftAddons) && !iconOnly,
             _b[colorStyles[colors].loading] = showLoader,
             _b), className),
         'data-test-id': dataTestId || null,

package/button/cssm/Component.d.ts

@@ -5,7 +5,7 @@ type ComponentProps = {
     /**
      * Тип кнопки
      */
-    view?: 'primary' | 'secondary' | 'outlined' | 'filled' | 'transparent' | 'link' | 'ghost';
+    view?: 'primary' | 'secondary' | 'tertiary' | 'outlined' | 'filled' | 'transparent' | 'link' | 'ghost';
     /**
      * Слот слева
      */
@@ -17,7 +17,7 @@ type ComponentProps = {
     /**
      * Размер компонента
      */
-    size?: 'xs' | 's' | 'm' | 'l' | 'xl';
+    size?: 'xxs' | 'xs' | 's' | 'm' | 'l' | 'xl';
     /**
      * Растягивает компонент на ширину контейнера
      */

package/button/cssm/Component.js

@@ -66,21 +66,40 @@ var colorStyles = {
  * чтобы при быстрых ответах от сервера кнопка не «моргала».
  */
 var LOADER_MIN_DISPLAY_INTERVAL = 500;
+var logWarning = function (view) {
+    var viewsMap = {
+        filled: 'secondary',
+        transparent: 'secondary',
+        outlined: 'tertiary',
+    };
+    // eslint-disable-next-line no-console
+    console.warn(
+    // eslint-disable-next-line prefer-template
+    "@alfalab/core-components/button: view='" + view + "' \u0431\u0443\u0434\u0435\u0442 \u0443\u0434\u0430\u043B\u0435\u043D \u0432 \u0441\u043B\u0435\u0434\u0443\u044E\u0449\u0438\u0445 \u043C\u0430\u0436\u043E\u0440\u043D\u044B\u0445 \u0432\u0435\u0440\u0441\u0438\u044F\u0445. " +
+        ("\u0418\u0441\u043F\u043E\u043B\u044C\u0437\u0443\u0439\u0442\u0435 view='" + viewsMap[view] + "'. \u0427\u0442\u043E\u0431\u044B \u043F\u043E\u043C\u0435\u043D\u044F\u0442\u044C \u0432\u0441\u0435 \u043A\u043D\u043E\u043F\u043A\u0438 \u043D\u0430 \u043F\u0440\u043E\u0435\u043A\u0442\u0435 \u0440\u0430\u0437\u043E\u043C, \u043C\u043E\u0436\u043D\u043E \u0432\u043E\u0441\u043F\u043E\u043B\u044C\u0437\u043E\u0432\u0430\u0442\u044C\u0441\u044F codemod: ") +
+        'npx core-components-codemod --components=ButtonViews src/**/*.tsx');
+};
 var Button = React__default['default'].forwardRef(function (_a, ref) {
     var _b, _c, _d;
     var children = _a.children, _e = _a.view, view = _e === void 0 ? 'secondary' : _e, leftAddons = _a.leftAddons, rightAddons = _a.rightAddons, _f = _a.size, size = _f === void 0 ? 'm' : _f, _g = _a.block, block = _g === void 0 ? false : _g, className = _a.className, dataTestId = _a.dataTestId, href = _a.href, _h = _a.loading, loading = _h === void 0 ? false : _h, _j = _a.nowrap, nowrap = _j === void 0 ? false : _j, _k = _a.colors, colors = _k === void 0 ? 'default' : _k, _l = _a.Component, Component = _l === void 0 ? href ? 'a' : 'button' : _l, restProps = __rest(_a, ["children", "view", "leftAddons", "rightAddons", "size", "block", "className", "dataTestId", "href", "loading", "nowrap", "colors", "Component"]);
+    if (['outlined', 'filled', 'transparent'].includes(view)) {
+        logWarning(view);
+    }
     var buttonRef = React.useRef(null);
     var focused = hooks.useFocus(buttonRef, 'keyboard')[0];
     var _m = React.useState(true), loaderTimePassed = _m[0], setLoaderTimePassed = _m[1];
     var timerId = React.useRef(0);
     var showLoader = loading || !loaderTimePassed;
+    var iconOnly = !children;
     var componentProps = {
         className: cn__default['default'](styles__default['default'].component, styles__default['default'][view], styles__default['default'][size], colorStyles[colors].component, colorStyles[colors][view], (_b = {},
             _b[styles__default['default'].focused] = focused,
             _b[styles__default['default'].block] = block,
-            _b[styles__default['default'].iconOnly] = !children,
+            _b[styles__default['default'].iconOnly] = iconOnly,
             _b[styles__default['default'].nowrap] = nowrap,
             _b[styles__default['default'].loading] = showLoader,
+            _b[styles__default['default'].withRightAddons] = Boolean(rightAddons) && !iconOnly,
+            _b[styles__default['default'].withLeftAddons] = Boolean(leftAddons) && !iconOnly,
             _b[colorStyles[colors].loading] = showLoader,
             _b), className),
         'data-test-id': dataTestId || null,

package/button/cssm/default.module.css

@@ -48,6 +48,16 @@
     --button-secondary-color: var(--color-light-text-primary);
     --button-secondary-disabled-color: var(--color-light-text-primary-alpha-30);
 
+    /* tertiary */
+    --button-tertiary-base-bg-color: transparent;
+    --button-tertiary-hover-bg-color: rgba(0, 0, 0, 0.07);
+    --button-tertiary-active-bg-color: rgba(0, 0, 0, 0.15);
+    --button-tertiary-disabled-bg-color: transparent;
+    --button-tertiary-base-border-color: var(--color-light-border-tertiary-inverted);
+    --button-tertiary-disabled-border-color: var(--color-light-border-tertiary-inverted-alpha-30);
+    --button-tertiary-color: var(--color-light-text-primary);
+    --button-tertiary-disabled-color: var(--color-light-text-primary-alpha-30);
+
     /* outlined */
     --button-outlined-base-bg-color: transparent;
     --button-outlined-hover-bg-color: rgba(0, 0, 0, 0.07);
@@ -96,6 +106,17 @@
 .outlined:active {
         background-color: var(--button-outlined-active-bg-color);
     }
+.tertiary {
+    color: var(--button-tertiary-color);
+    background-color: var(--button-tertiary-base-bg-color);
+    border: 1px solid var(--button-tertiary-base-border-color)
+}
+.tertiary:hover {
+        background-color: var(--button-tertiary-hover-bg-color);
+    }
+.tertiary:active {
+        background-color: var(--button-tertiary-active-bg-color);
+    }
 .filled {
     color: var(--color-light-text-primary);
     background-color: var(--color-light-bg-neutral)
@@ -162,6 +183,15 @@
             color: var(--button-outlined-color);
             border-color: var(--button-outlined-border-color);
         }
+.component:disabled.tertiary {
+        color: var(--button-tertiary-disabled-color);
+        background-color: var(--button-tertiary-disabled-bg-color);
+        border-color: var(--button-tertiary-disabled-border-color)
+    }
+.component:disabled.tertiary.loading {
+            color: var(--button-tertiary-color);
+            border-color: var(--button-tertiary-border-color);
+        }
 .component:disabled.filled {
         color: var(--color-light-text-primary-alpha-30);
         background-color: var(--color-light-bg-neutral-alpha-30)

package/button/cssm/index.module.css

@@ -10,13 +10,16 @@
     /* Hard up */
 }
 :root {
+    --gap-2xs: 4px;
     --gap-xs: 8px;
+    --gap-s: 12px;
     --gap-m: 16px;
+    --gap-l: 20px;
     --gap-xl: 24px;
     --gap-2xl: 32px;
 }
 :root {
-    --border-radius-s: 4px;
+    --border-radius-m: 8px;
 }
 :root {
     --focus-color: var(--color-light-border-link);
@@ -31,8 +34,8 @@
 }
 :root {
     /* misc */
-    --button-border-radius: var(--border-radius-s);
-    --button-active-transform: none;
+    --button-border-radius: var(--border-radius-m);
+    --button-active-transform: scale(0.97);
     --button-font-weight: 500;
 }
 .component {
@@ -87,15 +90,24 @@ a.loading {
     transform: translate(-50%, -50%);
 }
 /* Size */
-.xs {
+.xxs {
     min-width: 80px;
     min-height: var(--size-xs-height);
     padding: 0 var(--gap-m);
     font-size: 14px
 }
-.xs.iconOnly {
+.xxs.iconOnly {
         min-width: var(--size-xs-height);
     }
+.xs {
+    min-width: 88px;
+    min-height: 40px;
+    padding: 0 var(--gap-l);
+    font-size: 14px
+}
+.xs.iconOnly {
+        min-width: 40px;
+    }
 .s {
     min-width: 104px;
     min-height: var(--size-s-height);
@@ -107,6 +119,7 @@ a.loading {
 .m {
     min-width: 128px;
     min-height: var(--size-m-height);
+    padding: 0 28px;
     font-size: 16px
 }
 .m.iconOnly {
@@ -123,15 +136,51 @@ a.loading {
         min-width: var(--size-l-height);
     }
 .xl {
-    min-width: 160px;
+    min-width: 168px;
     min-height: var(--size-xl-height);
-    padding: 0 var(--gap-2xl);
+    padding: 0 36px;
     font-size: 18px;
     line-height: 24px
 }
 .xl.iconOnly {
         min-width: var(--size-xl-height);
     }
+.withRightAddons.xxs {
+        padding-right: var(--gap-s);
+    }
+.withRightAddons.xs {
+        padding-right: var(--gap-m);
+    }
+.withRightAddons.s {
+        padding-right: var(--gap-l);
+    }
+.withRightAddons.m {
+        padding-right: var(--gap-xl);
+    }
+.withRightAddons.l {
+        padding-right: 28px;
+    }
+.withRightAddons.xl {
+        padding-right: var(--gap-2xl);
+    }
+.withLeftAddons.xxs {
+        padding-left: var(--gap-s);
+    }
+.withLeftAddons.xs {
+        padding-left: var(--gap-m);
+    }
+.withLeftAddons.s {
+        padding-left: var(--gap-l);
+    }
+.withLeftAddons.m {
+        padding-left: var(--gap-xl);
+    }
+.withLeftAddons.l {
+        padding-left: 28px;
+    }
+.withLeftAddons.xl {
+        padding-left: var(--gap-2xl);
+    }
 .link {
     min-width: 0;
 }
@@ -155,16 +204,35 @@ a.loading {
     display: flex;
     flex-shrink: 0;
     align-items: center;
+    margin: 0
 }
 .addons:first-child {
-    margin: 0 var(--gap-xs) 0 0;
-}
+        margin-right: var(--gap-2xs);
+    }
 .addons:last-child {
-    margin: 0 0 0 var(--gap-xs);
-}
+        margin-left: var(--gap-2xs);
+    }
 .addons:only-child {
-    margin: 0;
-}
+        margin: 0;
+    }
+.s .addons:first-child, .m .addons:first-child {
+        margin-right: var(--gap-xs);
+    }
+.s .addons:last-child, .m .addons:last-child {
+        margin-left: var(--gap-xs);
+    }
+.s .addons:only-child, .m .addons:only-child {
+        margin: 0;
+    }
+.l .addons:first-child, .xl .addons:first-child {
+        margin-right: var(--gap-s);
+    }
+.l .addons:last-child, .xl .addons:last-child {
+        margin-left: var(--gap-s);
+    }
+.l .addons:only-child, .xl .addons:only-child {
+        margin: 0;
+    }
 .iconOnly {
     padding: 0;
 }

package/button/cssm/inverted.module.css

@@ -33,6 +33,16 @@
     --button-inverted-secondary-color: var(--color-dark-text-primary);
     --button-inverted-secondary-disabled-color: rgba(255, 255, 255, 0.3);
 
+    /* tertiary */
+    --button-inverted-tertiary-base-bg-color: transparent;
+    --button-inverted-tertiary-hover-bg-color: rgba(255, 255, 255, 0.15);
+    --button-inverted-tertiary-active-bg-color: rgba(0, 0, 0, 0.15);
+    --button-inverted-tertiary-disabled-bg-color: transparent;
+    --button-inverted-tertiary-base-border-color: var(--color-light-border-tertiary-inverted);
+    --button-inverted-tertiary-disabled-border-color: rgba(35, 53, 73, 0.3);
+    --button-inverted-tertiary-color: var(--color-dark-text-primary);
+    --button-inverted-tertiary-disabled-color: rgba(255, 255, 255, 0.3);
+
     /* outlined */
     --button-inverted-outlined-base-bg-color: transparent;
     --button-inverted-outlined-hover-bg-color: rgba(255, 255, 255, 0.15);
@@ -81,6 +91,17 @@
 .outlined:active {
         background-color: var(--button-inverted-outlined-active-bg-color);
     }
+.tertiary {
+    color: var(--button-inverted-tertiary-color);
+    background-color: var(--button-inverted-tertiary-base-bg-color);
+    border: 1px solid var(--button-inverted-tertiary-base-border-color)
+}
+.tertiary:hover {
+        background-color: var(--button-inverted-tertiary-hover-bg-color);
+    }
+.tertiary:active {
+        background-color: var(--button-inverted-tertiary-active-bg-color);
+    }
 .filled {
     color: var(--color-dark-text-primary);
     background-color: var(--color-dark-bg-neutral)
@@ -148,6 +169,15 @@
             color: var(--button-inverted-outlined-color);
             border-color: var(--button-inverted-outlined-border-color);
         }
+.component:disabled.tertiary {
+        color: var(--button-inverted-tertiary-disabled-color);
+        background-color: var(--button-inverted-tertiary-disabled-bg-color);
+        border-color: var(--button-inverted-tertiary-disabled-border-color)
+    }
+.component:disabled.tertiary.loading {
+            color: var(--button-inverted-tertiary-color);
+            border-color: var(--button-inverted-tertiary-border-color);
+        }
 .component:disabled.filled {
         color: rgba(255, 255, 255, 0.3);
         background-color: rgba(72, 87, 103, 0.3);

package/button/cssm/utils.js

@@ -0,0 +1 @@
+

package/button/default.css

@@ -1,4 +1,4 @@
-/* hash: 1krar */
+/* hash: 10n1n */
 :root {
     --color-light-bg-accent: #ef3124;
     --color-light-bg-neutral: #dbdee1;
@@ -49,6 +49,16 @@
     --button-secondary-color: var(--color-light-text-primary);
     --button-secondary-disabled-color: var(--color-light-text-primary-alpha-30);
 
+    /* tertiary */
+    --button-tertiary-base-bg-color: transparent;
+    --button-tertiary-hover-bg-color: rgba(0, 0, 0, 0.07);
+    --button-tertiary-active-bg-color: rgba(0, 0, 0, 0.15);
+    --button-tertiary-disabled-bg-color: transparent;
+    --button-tertiary-base-border-color: var(--color-light-border-tertiary-inverted);
+    --button-tertiary-disabled-border-color: var(--color-light-border-tertiary-inverted-alpha-30);
+    --button-tertiary-color: var(--color-light-text-primary);
+    --button-tertiary-disabled-color: var(--color-light-text-primary-alpha-30);
+
     /* outlined */
     --button-outlined-base-bg-color: transparent;
     --button-outlined-hover-bg-color: rgba(0, 0, 0, 0.07);
@@ -65,130 +75,150 @@
     --button-ghost-active-color: var(--color-light-text-primary-tint-50);
     --button-ghost-disabled-color: var(--color-light-text-primary-alpha-30);
 }
-.button__primary_t05jj {
+.button__primary_1i4d0 {
     color: var(--button-primary-color);
     background-color: var(--button-primary-base-bg-color)
 }
-.button__primary_t05jj:hover {
+.button__primary_1i4d0:hover {
         background-color: var(--button-primary-hover-bg-color);
     }
-.button__primary_t05jj:active {
+.button__primary_1i4d0:active {
         background-color: var(--button-primary-active-bg-color);
     }
-.button__secondary_t05jj {
+.button__secondary_1i4d0 {
     color: var(--button-secondary-color);
     background-color: var(--button-secondary-base-bg-color);
     border: 1px solid var(--button-secondary-base-border-color)
 }
-.button__secondary_t05jj:hover {
+.button__secondary_1i4d0:hover {
         background-color: var(--button-secondary-hover-bg-color);
     }
-.button__secondary_t05jj:active {
+.button__secondary_1i4d0:active {
         background-color: var(--button-secondary-active-bg-color);
     }
-.button__outlined_t05jj {
+.button__outlined_1i4d0 {
     color: var(--button-outlined-color);
     background-color: var(--button-outlined-base-bg-color);
     border: 1px solid var(--button-outlined-base-border-color)
 }
-.button__outlined_t05jj:hover {
+.button__outlined_1i4d0:hover {
         background-color: var(--button-outlined-hover-bg-color);
     }
-.button__outlined_t05jj:active {
+.button__outlined_1i4d0:active {
         background-color: var(--button-outlined-active-bg-color);
     }
-.button__filled_t05jj {
+.button__tertiary_1i4d0 {
+    color: var(--button-tertiary-color);
+    background-color: var(--button-tertiary-base-bg-color);
+    border: 1px solid var(--button-tertiary-base-border-color)
+}
+.button__tertiary_1i4d0:hover {
+        background-color: var(--button-tertiary-hover-bg-color);
+    }
+.button__tertiary_1i4d0:active {
+        background-color: var(--button-tertiary-active-bg-color);
+    }
+.button__filled_1i4d0 {
     color: var(--color-light-text-primary);
     background-color: var(--color-light-bg-neutral)
 }
-.button__filled_t05jj:hover {
+.button__filled_1i4d0:hover {
         background-color: var(--color-light-bg-neutral-shade-7);
     }
-.button__filled_t05jj:active {
+.button__filled_1i4d0:active {
         background-color: var(--color-light-bg-neutral-shade-15);
     }
-.button__transparent_t05jj {
+.button__transparent_1i4d0 {
     color: var(--color-light-text-primary);
     background-color: var(--color-light-bg-primary-inverted-alpha-10)
 }
-.button__transparent_t05jj:hover {
+.button__transparent_1i4d0:hover {
         background-color: var(--color-light-bg-primary-inverted-alpha-20);
     }
-.button__transparent_t05jj:active {
+.button__transparent_1i4d0:active {
         background-color: var(--color-light-bg-primary-inverted-alpha-40);
     }
-.button__link_t05jj {
+.button__link_1i4d0 {
     color: var(--color-light-text-primary);
     background-color: transparent
 }
-.button__link_t05jj:hover {
+.button__link_1i4d0:hover {
         background-color: var(--color-light-specialbg-component);
     }
-.button__link_t05jj:active {
+.button__link_1i4d0:active {
         background-color: var(--color-light-specialbg-component-shade-7);
     }
-.button__ghost_t05jj {
+.button__ghost_1i4d0 {
     color: var(--button-ghost-base-color)
 }
-.button__ghost_t05jj:hover {
+.button__ghost_1i4d0:hover {
         color: var(--button-ghost-hover-color);
     }
-.button__ghost_t05jj:active {
+.button__ghost_1i4d0:active {
         color: var(--button-ghost-active-color);
     }
 /* Disabled */
-.button__component_t05jj:disabled.button__primary_t05jj {
+.button__component_1i4d0:disabled.button__primary_1i4d0 {
         color: var(--button-primary-disabled-color);
         background-color: var(--button-primary-disabled-bg-color)
     }
-.button__component_t05jj:disabled.button__primary_t05jj.button__loading_t05jj {
+.button__component_1i4d0:disabled.button__primary_1i4d0.button__loading_1i4d0 {
             background-color: var(--button-primary-base-bg-color);
         }
-.button__component_t05jj:disabled.button__secondary_t05jj {
+.button__component_1i4d0:disabled.button__secondary_1i4d0 {
         color: var(--button-secondary-disabled-color);
         background-color: var(--button-secondary-disabled-bg-color);
         border-color: var(--button-secondary-disabled-border-color)
     }
-.button__component_t05jj:disabled.button__secondary_t05jj.button__loading_t05jj {
+.button__component_1i4d0:disabled.button__secondary_1i4d0.button__loading_1i4d0 {
             color: var(--button-secondary-color);
             background-color: var(--button-secondary-base-bg-color);
             border-color: var(--button-secondary-base-border-color);
         }
-.button__component_t05jj:disabled.button__outlined_t05jj {
+.button__component_1i4d0:disabled.button__outlined_1i4d0 {
         color: var(--button-outlined-disabled-color);
         background-color: var(--button-outlined-disabled-bg-color);
         border-color: var(--button-outlined-disabled-border-color)
     }
-.button__component_t05jj:disabled.button__outlined_t05jj.button__loading_t05jj {
+.button__component_1i4d0:disabled.button__outlined_1i4d0.button__loading_1i4d0 {
             color: var(--button-outlined-color);
             border-color: var(--button-outlined-border-color);
         }
-.button__component_t05jj:disabled.button__filled_t05jj {
+.button__component_1i4d0:disabled.button__tertiary_1i4d0 {
+        color: var(--button-tertiary-disabled-color);
+        background-color: var(--button-tertiary-disabled-bg-color);
+        border-color: var(--button-tertiary-disabled-border-color)
+    }
+.button__component_1i4d0:disabled.button__tertiary_1i4d0.button__loading_1i4d0 {
+            color: var(--button-tertiary-color);
+            border-color: var(--button-tertiary-border-color);
+        }
+.button__component_1i4d0:disabled.button__filled_1i4d0 {
         color: var(--color-light-text-primary-alpha-30);
         background-color: var(--color-light-bg-neutral-alpha-30)
     }
-.button__component_t05jj:disabled.button__filled_t05jj.button__loading_t05jj {
+.button__component_1i4d0:disabled.button__filled_1i4d0.button__loading_1i4d0 {
             color: var(--color-light-text-primary);
             background-color: var(--color-light-bg-neutral);
         }
-.button__component_t05jj:disabled.button__transparent_t05jj {
+.button__component_1i4d0:disabled.button__transparent_1i4d0 {
         color: var(--color-light-text-primary-alpha-30);
         background-color: var(--color-light-bg-primary-inverted-alpha-3)
     }
-.button__component_t05jj:disabled.button__transparent_t05jj.button__loading_t05jj {
+.button__component_1i4d0:disabled.button__transparent_1i4d0.button__loading_1i4d0 {
             color: var(--color-light-text-primary);
             background-color: var(--color-light-bg-primary-inverted-alpha-10);
         }
-.button__component_t05jj:disabled.button__link_t05jj {
+.button__component_1i4d0:disabled.button__link_1i4d0 {
         color: var(--color-light-text-primary-alpha-30);
         background-color: transparent
     }
-.button__component_t05jj:disabled.button__link_t05jj.button__loading_t05jj {
+.button__component_1i4d0:disabled.button__link_1i4d0.button__loading_1i4d0 {
             color: var(--color-light-text-primary);
         }
-.button__component_t05jj:disabled.button__ghost_t05jj {
+.button__component_1i4d0:disabled.button__ghost_1i4d0 {
         color: var(--button-ghost-disabled-color)
     }
-.button__component_t05jj:disabled.button__ghost_t05jj.button__loading_t05jj {
+.button__component_1i4d0:disabled.button__ghost_1i4d0.button__loading_1i4d0 {
             color: var(--button-ghost-base-color);
         }

package/button/esm/Component.d.ts

@@ -5,7 +5,7 @@ type ComponentProps = {
     /**
      * Тип кнопки
      */
-    view?: 'primary' | 'secondary' | 'outlined' | 'filled' | 'transparent' | 'link' | 'ghost';
+    view?: 'primary' | 'secondary' | 'tertiary' | 'outlined' | 'filled' | 'transparent' | 'link' | 'ghost';
     /**
      * Слот слева
      */
@@ -17,7 +17,7 @@ type ComponentProps = {
     /**
      * Размер компонента
      */
-    size?: 'xs' | 's' | 'm' | 'l' | 'xl';
+    size?: 'xxs' | 'xs' | 's' | 'm' | 'l' | 'xl';
     /**
      * Растягивает компонент на ширину контейнера
      */