@alfalab/core-components 44.3.0 → 44.5.0

package/button/cssm/mobile/default.mobile.module.css

@@ -1,8 +1,13 @@
 :root {
 } /* deprecated */ :root {
+    --color-light-accent-secondary: #0e0e0e;
+    --color-light-accent-secondary-hover: #29292c;
+    --color-light-accent-secondary-press: #2f2f32;
+    --color-light-neutral-1500-inverted: #fff;
     --color-light-neutral-translucent-100: rgba(38, 55, 88, 0.06);
     --color-light-neutral-translucent-100-press: rgba(5, 12, 41, 0.14);
     --color-light-neutral-translucent-500: rgba(9, 12, 37, 0.28);
+    --color-light-text-primary-inverted: #fff;
     --color-light-text-primary-press: #75757d;
     --color-light-text-tertiary: rgba(5, 8, 29, 0.38); /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
 } :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
@@ -58,6 +63,10 @@
     /* border-radius mobile */
 
     /* primary mobile */
+    --button-primary-mobile-base-bg-color: var(--color-light-accent-secondary);
+    --button-primary-mobile-hover-bg-color: var(--color-light-accent-secondary-hover);
+    --button-primary-mobile-active-bg-color: var(--color-light-accent-secondary-press);
+    --button-primary-mobile-color: var(--color-light-text-primary-inverted);
     --button-primary-mobile-disabled-color: var(--color-light-text-tertiary);
     --button-primary-mobile-disabled-bg-color: var(--color-light-neutral-translucent-100);
 
@@ -87,7 +96,21 @@
     --button-ghost-mobile-disabled-color: var(--color-light-text-tertiary);
 
     /* ghost mobile inverted */
-} .secondary {
+
+    /* loader mobile */
+    --button-spinner-primary-mobile-color: var(--color-light-neutral-1500-inverted);
+} .primary {
+    color: var(--button-primary-mobile-color);
+    background-color: var(--button-primary-mobile-base-bg-color)
+} @media (hover: hover) {
+        .primary:hover {
+            background-color: var(--button-primary-mobile-hover-bg-color);
+        }
+    } .primary:active {
+        background-color: var(--button-primary-mobile-active-bg-color);
+    } .primary > .loader {
+        color: var(--button-spinner-primary-mobile-color);
+    } .secondary {
     background-color: var(--button-secondary-mobile-base-bg-color)
 } .secondary:active {
         background-color: var(--button-secondary-mobile-active-bg-color);
@@ -95,8 +118,10 @@
         color: var(--button-ghost-mobile-active-color);
     } .component[disabled].primary {
         color: var(--button-primary-mobile-disabled-color);
-        background-color: var(--button-primary-mobile-disabled-bg-color);
-    } .component[disabled].secondary {
+        background-color: var(--button-primary-mobile-disabled-bg-color)
+    } .component[disabled].primary.loading {
+            background-color: var(--button-primary-mobile-base-bg-color);
+        } .component[disabled].secondary {
         color: var(--button-secondary-mobile-disabled-color);
         background-color: var(--button-secondary-mobile-disabled-bg-color);
     } .component[disabled].tertiary {

package/button/cssm/mobile/inverted.mobile.module.css

@@ -1,5 +1,8 @@
 :root {
 } /* deprecated */ :root {
+    --color-light-accent-secondary-inverted: #fff;
+    --color-light-neutral-1500: #0e0e0e;
+    --color-light-text-primary: #0e0e0e;
     --color-light-text-primary-inverted-press: #a0a1a9;
     --color-light-text-tertiary-inverted: rgba(233, 233, 250, 0.37); /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
 } :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
@@ -57,6 +60,14 @@
     /* primary mobile */
 
     /* primary inverted mobile */
+    --button-inverted-primary-mobile-base-bg-color: var(--color-light-accent-secondary-inverted);
+    --button-inverted-primary-mobile-hover-bg-color: var(
+        --color-light-accent-secondary-inverted-hover
+    );
+    --button-inverted-primary-mobile-active-bg-color: var(
+        --color-light-accent-secondary-inverted-press
+    );
+    --button-inverted-primary-mobile-color: var(--color-light-text-primary);
     --button-inverted-primary-mobile-disabled-bg-color: var(
         --color-light-neutral-translucent-100-inverted
     );
@@ -94,7 +105,21 @@
     /* ghost mobile inverted */
     --button-inverted-ghost-mobile-active-color: var(--color-light-text-primary-inverted-press);
     --button-inverted-ghost-mobile-disabled-color: var(--color-light-text-tertiary-inverted);
-} .secondary {
+
+    /* loader mobile */
+    --button-spinner-inverted-primary-mobile-color: var(--color-light-neutral-1500);
+} .primary {
+    color: var(--button-inverted-primary-mobile-color);
+    background-color: var(--button-inverted-primary-mobile-base-bg-color)
+} @media (hover: hover) {
+        .primary:hover {
+            background-color: var(--button-inverted-primary-mobile-hover-bg-color);
+        }
+    } .primary:active {
+        background-color: var(--button-inverted-primary-mobile-active-bg-color);
+    } .primary > .loader {
+        color: var(--button-spinner-inverted-primary-mobile-color);
+    } .secondary {
     background-color: var(--button-inverted-secondary-mobile-base-bg-color)
 } .secondary:active {
         background-color: var(--button-inverted-secondary-mobile-active-bg-color);
@@ -102,8 +127,10 @@
         color: var(--button-inverted-ghost-mobile-active-color);
     } .component[disabled].primary {
         color: var(--button-inverted-primary-mobile-disabled-color);
-        background-color: var(--button-inverted-primary-mobile-disabled-bg-color);
-    } .component[disabled].secondary {
+        background-color: var(--button-inverted-primary-mobile-disabled-bg-color)
+    } .component[disabled].primary.loading {
+            background-color: var(--button-inverted-primary-mobile-base-bg-color);
+        } .component[disabled].secondary {
         color: var(--button-inverted-secondary-mobile-disabled-color);
         background-color: var(--button-inverted-secondary-mobile-disabled-bg-color);
     } .component[disabled].tertiary {

package/button/cssm/mobile/mobile.module.css

@@ -80,6 +80,8 @@
     /* ghost mobile */
 
     /* ghost mobile inverted */
+
+    /* loader mobile */
 } .xxs {
     border-radius: var(--button-xxs-size-mobile-border-radius);
 } .xs {

package/button/cssm/typings.d.ts

@@ -13,6 +13,20 @@ type ComponentProps = {
      * @default secondary
      */
     view?: 'accent' | 'primary' | 'secondary' | 'tertiary' | 'outlined' | 'filled' | 'transparent' | 'link' | 'ghost';
+    /**
+     * Форма кнопки
+     * @default rectangular
+     */
+    shape?: 'rounded' | 'rectangular';
+    /**
+     * Ширина текстового контента
+     * @default hug
+     */
+    textResizing?: 'fill' | 'hug';
+    /**
+     *  Подпись под лейблом (видна только в размерах >= m)
+     */
+    hint?: ReactNode;
     /**
      * Слот слева
      */

package/button/cssm/vars.css

@@ -71,4 +71,6 @@
     /* ghost mobile */
 
     /* ghost mobile inverted */
+
+    /* loader mobile */
 }

package/button/desktop/Component.desktop.js

@@ -13,13 +13,13 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
 
 var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 
-var defaultColors = {"secondary":"button__secondary_14lml","ghost":"button__ghost_14lml","component":"button__component_14lml","primary":"button__primary_14lml","tertiary":"button__tertiary_14lml","link":"button__link_14lml"};
+var defaultColors = {"primary":"button__primary_18yr7","loader":"button__loader_18yr7","secondary":"button__secondary_18yr7","ghost":"button__ghost_18yr7","component":"button__component_18yr7","loading":"button__loading_18yr7","tertiary":"button__tertiary_18yr7","link":"button__link_18yr7"};
 require('./default.desktop.css');
 
-var styles = {"xxs":"button__xxs_lqshd","xs":"button__xs_lqshd","s":"button__s_lqshd","m":"button__m_lqshd","l":"button__l_lqshd","xl":"button__xl_lqshd"};
+var styles = {"xxs":"button__xxs_jve5r","xs":"button__xs_jve5r","s":"button__s_jve5r","m":"button__m_jve5r","l":"button__l_jve5r","xl":"button__xl_jve5r"};
 require('./desktop.css');
 
-var invertedColors = {"secondary":"button__secondary_o26jb","ghost":"button__ghost_o26jb","component":"button__component_o26jb","primary":"button__primary_o26jb","tertiary":"button__tertiary_o26jb","link":"button__link_o26jb"};
+var invertedColors = {"primary":"button__primary_qkfkt","loader":"button__loader_qkfkt","secondary":"button__secondary_qkfkt","ghost":"button__ghost_qkfkt","component":"button__component_qkfkt","loading":"button__loading_qkfkt","tertiary":"button__tertiary_qkfkt","link":"button__link_qkfkt"};
 require('./inverted.desktop.css');
 
 var colorStyles = {

package/button/desktop/default.desktop.css

@@ -1,11 +1,16 @@
-/* hash: ye9ro */
+/* hash: yevib */
 :root {
 } /* deprecated */ :root {
+    --color-light-accent-secondary: #0e0e0e;
+    --color-light-accent-secondary-hover: #29292c;
+    --color-light-accent-secondary-press: #2f2f32;
+    --color-light-neutral-1500-inverted: #fff;
     --color-light-neutral-translucent-100: rgba(38, 55, 88, 0.06);
     --color-light-neutral-translucent-300: rgba(15, 25, 55, 0.1);
     --color-light-neutral-translucent-300-hover: rgba(5, 12, 41, 0.14);
     --color-light-neutral-translucent-300-press: rgba(5, 11, 44, 0.18);
     --color-light-neutral-translucent-500: rgba(9, 12, 37, 0.28);
+    --color-light-text-primary-inverted: #fff;
     --color-light-text-primary-press: #75757d;
     --color-light-text-tertiary: rgba(5, 8, 29, 0.38); /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
 } :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
@@ -27,7 +32,11 @@
     /* border-radius desktop */
 
     /* primary */
+    --button-primary-base-bg-color: var(--color-light-accent-secondary);
+    --button-primary-hover-bg-color: var(--color-light-accent-secondary-hover);
+    --button-primary-active-bg-color: var(--color-light-accent-secondary-press);
     --button-primary-disabled-bg-color: var(--color-light-neutral-translucent-100);
+    --button-primary-color: var(--color-light-text-primary-inverted);
     --button-primary-disabled-color: var(--color-light-text-tertiary);
 
     /* accent */
@@ -53,6 +62,7 @@
     --button-link-disabled-color: var(--color-light-text-tertiary);
 
     /* loader */
+    --button-spinner-primary-color: var(--color-light-neutral-1500-inverted);
 
     /* primary inverted */
 
@@ -91,25 +101,40 @@
     /* ghost mobile */
 
     /* ghost mobile inverted */
-} .button__secondary_14lml {
+
+    /* loader mobile */
+} .button__primary_18yr7 {
+    color: var(--button-primary-color);
+    background-color: var(--button-primary-base-bg-color)
+} @media (hover: hover) {
+        .button__primary_18yr7:hover {
+            background-color: var(--button-primary-hover-bg-color);
+        }
+    } .button__primary_18yr7:active {
+        background-color: var(--button-primary-active-bg-color);
+    } .button__primary_18yr7 > .button__loader_18yr7 {
+        color: var(--button-spinner-primary-color);
+    } .button__secondary_18yr7 {
     background-color: var(--button-secondary-base-bg-color)
-} .button__secondary_14lml:hover {
+} .button__secondary_18yr7:hover {
         background-color: var(--button-secondary-hover-bg-color);
-    } .button__secondary_14lml:active {
+    } .button__secondary_18yr7:active {
         background-color: var(--button-secondary-active-bg-color);
-    } .button__ghost_14lml:active {
+    } .button__ghost_18yr7:active {
         color: var(--button-ghost-active-color);
-    } .button__component_14lml[disabled].button__primary_14lml {
+    } .button__component_18yr7[disabled].button__primary_18yr7 {
         color: var(--button-primary-disabled-color);
-        background-color: var(--button-primary-disabled-bg-color);
-    } .button__component_14lml[disabled].button__secondary_14lml {
+        background-color: var(--button-primary-disabled-bg-color)
+    } .button__component_18yr7[disabled].button__primary_18yr7.button__loading_18yr7 {
+            background-color: var(--button-primary-base-bg-color);
+        } .button__component_18yr7[disabled].button__secondary_18yr7 {
         color: var(--button-secondary-disabled-color);
         background-color: var(--button-secondary-disabled-bg-color);
-    } .button__component_14lml[disabled].button__tertiary_14lml {
+    } .button__component_18yr7[disabled].button__tertiary_18yr7 {
         color: var(--button-tertiary-disabled-color);
         border-color: var(--button-tertiary-disabled-border-color);
-    } .button__component_14lml[disabled].button__link_14lml {
+    } .button__component_18yr7[disabled].button__link_18yr7 {
         color: var(--button-link-disabled-color);
-    } .button__component_14lml[disabled].button__ghost_14lml {
+    } .button__component_18yr7[disabled].button__ghost_18yr7 {
         color: var(--button-ghost-disabled-color);
     }

package/button/desktop/desktop.css

@@ -1,4 +1,4 @@
-/* hash: 1glv8 */
+/* hash: 1gl9i */
 :root {
 } /* deprecated */ :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
 } :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
@@ -80,16 +80,18 @@
     /* ghost mobile */
 
     /* ghost mobile inverted */
-} .button__xxs_lqshd {
+
+    /* loader mobile */
+} .button__xxs_jve5r {
     border-radius: var(--button-xxs-size-border-radius);
-} .button__xs_lqshd {
+} .button__xs_jve5r {
     border-radius: var(--button-xs-size-border-radius);
-} .button__s_lqshd {
+} .button__s_jve5r {
     border-radius: var(--button-s-size-border-radius);
-} .button__m_lqshd {
+} .button__m_jve5r {
     border-radius: var(--button-m-size-border-radius);
-} .button__l_lqshd {
+} .button__l_jve5r {
     border-radius: var(--button-l-size-border-radius);
-} .button__xl_lqshd {
+} .button__xl_jve5r {
     border-radius: var(--button-xl-size-border-radius);
 }

package/button/desktop/inverted.desktop.css

@@ -1,7 +1,12 @@
-/* hash: bedfe */
+/* hash: 16tee */
 :root {
 } /* deprecated */ :root {
+    --color-light-accent-secondary-inverted: #fff;
+    --color-light-accent-secondary-inverted-hover: #e7e8eb;
+    --color-light-accent-secondary-inverted-press: #d2d3d9;
+    --color-light-neutral-1500: #0e0e0e;
     --color-light-neutral-translucent-300-inverted: rgba(222, 222, 238, 0.13);
+    --color-light-text-primary: #0e0e0e;
     --color-light-text-primary-inverted-press: #a0a1a9;
     --color-light-text-tertiary-inverted: rgba(233, 233, 250, 0.37); /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
 } :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
@@ -39,10 +44,14 @@
     /* loader */
 
     /* primary inverted */
+    --button-inverted-primary-base-bg-color: var(--color-light-accent-secondary-inverted);
+    --button-inverted-primary-hover-bg-color: var(--color-light-accent-secondary-inverted-hover);
+    --button-inverted-primary-active-bg-color: var(--color-light-accent-secondary-inverted-press);
     --button-inverted-primary-disabled-bg-color: var(
         --color-light-neutral-translucent-100-inverted
     );
     --button-inverted-primary-disabled-color: var(--color-light-text-tertiary-inverted);
+    --button-inverted-primary-color: var(--color-light-text-primary);
 
     /* accent inverted */
 
@@ -75,6 +84,7 @@
     --button-inverted-link-disabled-color: var(--color-light-text-tertiary-inverted);
 
     /* loader inverted */
+    --button-spinner-inverted-primary-color: var(--color-light-neutral-1500);
 
     /* border-radius mobile */
 
@@ -97,25 +107,40 @@
     /* ghost mobile */
 
     /* ghost mobile inverted */
-} .button__secondary_o26jb {
+
+    /* loader mobile */
+} .button__primary_qkfkt {
+    color: var(--button-inverted-primary-color);
+    background-color: var(--button-inverted-primary-base-bg-color)
+} @media (hover: hover) {
+        .button__primary_qkfkt:hover {
+            background-color: var(--button-inverted-primary-hover-bg-color);
+        }
+    } .button__primary_qkfkt:active {
+        background-color: var(--button-inverted-primary-active-bg-color);
+    } .button__primary_qkfkt > .button__loader_qkfkt {
+        color: var(--button-spinner-inverted-primary-color);
+    } .button__secondary_qkfkt {
     background-color: var(--button-inverted-secondary-base-bg-color)
-} .button__secondary_o26jb:hover {
+} .button__secondary_qkfkt:hover {
         background-color: var(--button-inverted-secondary-hover-bg-color);
-    } .button__secondary_o26jb:active {
+    } .button__secondary_qkfkt:active {
         background-color: var(--button-inverted-secondary-active-bg-color);
-    } .button__ghost_o26jb:active {
+    } .button__ghost_qkfkt:active {
         color: var(--button-inverted-ghost-active-color);
-    } .button__component_o26jb[disabled].button__primary_o26jb {
+    } .button__component_qkfkt[disabled].button__primary_qkfkt {
         color: var(--button-inverted-primary-disabled-color);
-        background-color: var(--button-inverted-primary-disabled-bg-color);
-    } .button__component_o26jb[disabled].button__secondary_o26jb {
+        background-color: var(--button-inverted-primary-disabled-bg-color)
+    } .button__component_qkfkt[disabled].button__primary_qkfkt.button__loading_qkfkt {
+            background-color: var(--button-inverted-primary-base-bg-color);
+        } .button__component_qkfkt[disabled].button__secondary_qkfkt {
         color: var(--button-inverted-secondary-disabled-color);
         background-color: var(--button-inverted-secondary-disabled-bg-color);
-    } .button__component_o26jb[disabled].button__tertiary_o26jb {
+    } .button__component_qkfkt[disabled].button__tertiary_qkfkt {
         color: var(--button-inverted-tertiary-disabled-color);
         border-color: var(--button-inverted-tertiary-disabled-border-color);
-    } .button__component_o26jb[disabled].button__link_o26jb {
+    } .button__component_qkfkt[disabled].button__link_qkfkt {
         color: var(--button-inverted-link-disabled-color);
-    } .button__component_o26jb[disabled].button__ghost_o26jb {
+    } .button__component_qkfkt[disabled].button__ghost_qkfkt {
         color: var(--button-inverted-ghost-disabled-color);
     }

package/button/esm/components/base-button/Component.js

@@ -6,13 +6,13 @@ import { getDataTestId } from '../../../../shared/esm';
 import { Spinner } from '../../../../spinner/esm';
 import { useFocus } from '@alfalab/hooks';
 
-var defaultColors = {"accent":"button__accent_r1cnc","loader":"button__loader_r1cnc","primary":"button__primary_r1cnc","secondary":"button__secondary_r1cnc","outlined":"button__outlined_r1cnc","tertiary":"button__tertiary_r1cnc","filled":"button__filled_r1cnc","transparent":"button__transparent_r1cnc","link":"button__link_r1cnc","ghost":"button__ghost_r1cnc","component":"button__component_r1cnc","loading":"button__loading_r1cnc"};
+var defaultColors = {"accent":"button__accent_swqyy","loader":"button__loader_swqyy","primary":"button__primary_swqyy","secondary":"button__secondary_swqyy","outlined":"button__outlined_swqyy","tertiary":"button__tertiary_swqyy","filled":"button__filled_swqyy","transparent":"button__transparent_swqyy","link":"button__link_swqyy","ghost":"button__ghost_swqyy","component":"button__component_swqyy","loading":"button__loading_swqyy"};
 require('./default.css');
 
-var commonStyles = {"component":"button__component_1uacw","secondary":"button__secondary_1uacw","accent":"button__accent_1uacw","primary":"button__primary_1uacw","focused":"button__focused_1uacw","loading":"button__loading_1uacw","text":"button__text_1uacw","addons":"button__addons_1uacw","stretchText":"button__stretchText_1uacw","loader":"button__loader_1uacw","xxs":"button__xxs_1uacw","iconOnly":"button__iconOnly_1uacw","xs":"button__xs_1uacw","s":"button__s_1uacw","m":"button__m_1uacw","l":"button__l_1uacw","xl":"button__xl_1uacw","withRightAddons":"button__withRightAddons_1uacw","ghost":"button__ghost_1uacw","withLeftAddons":"button__withLeftAddons_1uacw","link":"button__link_1uacw","block":"button__block_1uacw","nowrap":"button__nowrap_1uacw"};
+var commonStyles = {"component":"button__component_1rs3v","hug":"button__hug_1rs3v","fill":"button__fill_1rs3v","hint":"button__hint_1rs3v","secondary":"button__secondary_1rs3v","accent":"button__accent_1rs3v","primary":"button__primary_1rs3v","focused":"button__focused_1rs3v","loading":"button__loading_1rs3v","text":"button__text_1rs3v","addons":"button__addons_1rs3v","stretchText":"button__stretchText_1rs3v","loader":"button__loader_1rs3v","xxs":"button__xxs_1rs3v","iconOnly":"button__iconOnly_1rs3v","xs":"button__xs_1rs3v","s":"button__s_1rs3v","m":"button__m_1rs3v","l":"button__l_1rs3v","xl":"button__xl_1rs3v","withRightAddons":"button__withRightAddons_1rs3v","ghost":"button__ghost_1rs3v","withLeftAddons":"button__withLeftAddons_1rs3v","link":"button__link_1rs3v","block":"button__block_1rs3v","nowrap":"button__nowrap_1rs3v","rounded":"button__rounded_1rs3v"};
 require('./index.css');
 
-var invertedColors = {"accent":"button__accent_19fv6","loader":"button__loader_19fv6","primary":"button__primary_19fv6","secondary":"button__secondary_19fv6","outlined":"button__outlined_19fv6","tertiary":"button__tertiary_19fv6","filled":"button__filled_19fv6","transparent":"button__transparent_19fv6","link":"button__link_19fv6","ghost":"button__ghost_19fv6","component":"button__component_19fv6","loading":"button__loading_19fv6"};
+var invertedColors = {"accent":"button__accent_1bb9i","loader":"button__loader_1bb9i","primary":"button__primary_1bb9i","secondary":"button__secondary_1bb9i","outlined":"button__outlined_1bb9i","tertiary":"button__tertiary_1bb9i","filled":"button__filled_1bb9i","transparent":"button__transparent_1bb9i","link":"button__link_1bb9i","ghost":"button__ghost_1bb9i","component":"button__component_1bb9i","loading":"button__loading_1bb9i"};
 require('./inverted.css');
 
 var colorStyles = {
@@ -42,18 +42,19 @@ var logWarning = function (view) {
 };
 var BaseButton = React.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, spinnerClassName = _a.spinnerClassName, 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, onClick = _a.onClick, _m = _a.styles, styles = _m === void 0 ? {} : _m, _o = _a.colorStylesMap, colorStylesMap = _o === void 0 ? { default: {}, inverted: {} } : _o, restProps = __rest(_a, ["children", "view", "leftAddons", "rightAddons", "size", "block", "className", "spinnerClassName", "dataTestId", "href", "loading", "nowrap", "colors", "Component", "onClick", "styles", "colorStylesMap"]);
+    var children = _a.children, _e = _a.view, view = _e === void 0 ? 'secondary' : _e, _f = _a.shape, shape = _f === void 0 ? 'rectangular' : _f, _g = _a.textResizing, textResizing = _g === void 0 ? 'hug' : _g, hint = _a.hint, leftAddons = _a.leftAddons, rightAddons = _a.rightAddons, _h = _a.size, size = _h === void 0 ? 'm' : _h, _j = _a.block, block = _j === void 0 ? false : _j, className = _a.className, spinnerClassName = _a.spinnerClassName, dataTestId = _a.dataTestId, href = _a.href, _k = _a.loading, loading = _k === void 0 ? false : _k, _l = _a.nowrap, nowrap = _l === void 0 ? false : _l, _m = _a.colors, colors = _m === void 0 ? 'default' : _m, _o = _a.Component, Component = _o === void 0 ? href ? 'a' : 'button' : _o, onClick = _a.onClick, _p = _a.styles, styles = _p === void 0 ? {} : _p, _q = _a.colorStylesMap, colorStylesMap = _q === void 0 ? { default: {}, inverted: {} } : _q, restProps = __rest(_a, ["children", "view", "shape", "textResizing", "hint", "leftAddons", "rightAddons", "size", "block", "className", "spinnerClassName", "dataTestId", "href", "loading", "nowrap", "colors", "Component", "onClick", "styles", "colorStylesMap"]);
     if (['outlined', 'filled', 'transparent'].includes(view)) {
         logWarning(view);
     }
     var buttonRef = useRef(null);
     var focused = useFocus(buttonRef, 'keyboard')[0];
-    var _p = useState(true), loaderTimePassed = _p[0], setLoaderTimePassed = _p[1];
+    var _r = useState(true), loaderTimePassed = _r[0], setLoaderTimePassed = _r[1];
     var timerId = useRef(0);
     var showLoader = loading || !loaderTimePassed;
+    var showHint = hint && ['m', 'l', 'xl'].includes(size);
     var iconOnly = !children;
     var componentProps = {
-        className: cn(commonStyles.component, commonStyles[view], commonStyles[size], styles[size], colorStyles[colors].component, colorStyles[colors][view], colorStylesMap[colors].component, (_b = {},
+        className: cn(commonStyles.component, commonStyles[view], commonStyles[size], commonStyles[textResizing], shape === 'rectangular' && styles[size], shape === 'rounded' && commonStyles[shape], colorStyles[colors].component, colorStyles[colors][view], colorStylesMap[colors].component, (_b = {},
             _b[colorStylesMap[colors][view]] = Boolean(colorStylesMap[colors][view]),
             _b[commonStyles.focused] = focused,
             _b[commonStyles.block] = block,
@@ -62,17 +63,20 @@ var BaseButton = React.forwardRef(function (_a, ref) {
             _b[commonStyles.withRightAddons] = Boolean(rightAddons) && !iconOnly,
             _b[commonStyles.withLeftAddons] = Boolean(leftAddons) && !iconOnly,
             _b[colorStyles[colors].loading] = showLoader,
+            _b[colorStylesMap[colors].loading] = showLoader,
             _b), className),
         'data-test-id': dataTestId || null,
     };
-    var _q = restProps, disabled = _q.disabled, _r = _q.type, type = _r === void 0 ? 'button' : _r, restButtonProps = __rest(_q, ["disabled", "type"]);
+    var _s = restProps, disabled = _s.disabled, _t = _s.type, type = _t === void 0 ? 'button' : _t, restButtonProps = __rest(_s, ["disabled", "type"]);
     var buttonChildren = (React.createElement(React.Fragment, null,
         leftAddons && React.createElement("span", { className: commonStyles.addons }, leftAddons),
         children && (React.createElement("span", { className: cn(commonStyles.text, (_c = {},
                 _c[commonStyles.nowrap] = nowrap,
-                _c[commonStyles.stretchText] = !(leftAddons || rightAddons),
-                _c)) }, children)),
-        showLoader && (React.createElement(Spinner, { dataTestId: getDataTestId(dataTestId, 'loader'), visible: true, className: cn(commonStyles.loader, colorStyles[colors].loader, spinnerClassName) })),
+                _c[commonStyles.stretchText] = !(leftAddons || rightAddons) || textResizing === 'fill',
+                _c)) },
+            children,
+            showHint && React.createElement("span", { className: commonStyles.hint }, hint))),
+        showLoader && (React.createElement(Spinner, { dataTestId: getDataTestId(dataTestId, 'loader'), visible: true, className: cn(commonStyles.loader, colorStyles[colors].loader, colorStylesMap[colors].loader, spinnerClassName) })),
         rightAddons && React.createElement("span", { className: commonStyles.addons }, rightAddons)));
     useEffect(function () {
         if (loading) {