npm - @alfalab/core-components - Versions diffs - 48.4.0 → 48.6.0 - Mend

@alfalab/core-components 48.4.0 → 48.6.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (2872) hide show

package/bottom-sheet/modern/index.css CHANGED Viewed

@@ -1,4 +1,4 @@
-/* hash: 1eaf5 */
+/* hash: 1lfns */
 :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 */ /* 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 {
     --color-light-modal-bg-primary: #fff;
@@ -61,25 +61,25 @@
     /* header */
     /* footer */
-} .bottom-sheet__modal_1rt61 {
+} .bottom-sheet__modal_uemty {
     bottom: var(--gap-0);
     width: 100%;
     max-width: 600px;
     pointer-events: none;
     touch-action: none;
-} .bottom-sheet__modal_1rt61.bottom-sheet__modal_1rt61 {
+} .bottom-sheet__modal_uemty.bottom-sheet__modal_uemty {
     background-color: transparent;
     position: fixed;
-} .bottom-sheet__wrapper_1rt61 {
+} .bottom-sheet__wrapper_uemty {
     transform: translateY(100%);
     pointer-events: none;
     touch-action: none;
     border-top-right-radius: var(--bottom-sheet-top-radius);
     border-top-left-radius: var(--bottom-sheet-top-radius);
     transition: border-radius 0.3s ease;
-} .bottom-sheet__fullscreen_1rt61 {
+} .bottom-sheet__fullscreen_uemty {
     border-radius: 0;
-} .bottom-sheet__component_1rt61 {
+} .bottom-sheet__component_uemty {
     position: relative;
     display: flex;
     flex-direction: column;
@@ -87,9 +87,9 @@
     background-color: var(--color-light-modal-bg-primary);
     pointer-events: all;
     box-shadow: var(--bottom-sheet-shadow);
-} .bottom-sheet__withTransition_1rt61 {
+} .bottom-sheet__withTransition_uemty {
     transition: var(--bottom-sheet-out-transition);
-} .bottom-sheet__scrollableContainer_1rt61 {
+} .bottom-sheet__scrollableContainer_uemty {
     overflow: auto;
     display: flex;
     flex-direction: column;
@@ -98,7 +98,7 @@
     background-color: inherit;
     border-radius: inherit;
     overscroll-behavior: contain;
-} .bottom-sheet__marker_1rt61 {
+} .bottom-sheet__marker_uemty {
     position: fixed;
     top: var(--gap-4);
     right: var(--gap-0);
@@ -106,11 +106,11 @@
     z-index: 1000;
     width: 36px;
     margin: var(--gap-0) auto;
-} .bottom-sheet__defaultMarker_1rt61 {
+} .bottom-sheet__defaultMarker_uemty {
     height: 4px;
     border-radius: var(--border-radius-20);
     background-color: var(--color-light-neutral-translucent-300);
-} .bottom-sheet__content_1rt61 {
+} .bottom-sheet__content_uemty {
     position: relative;
     z-index: 0;
     display: flex;
@@ -120,75 +120,75 @@
     color: var(--color-light-text-primary);
     background-color: inherit;
     border-radius: inherit;
-} .bottom-sheet__noHeader_1rt61 {
+} .bottom-sheet__noHeader_uemty {
     padding-top: var(--gap-16);
-} .bottom-sheet__noFooter_1rt61 {
+} .bottom-sheet__noFooter_uemty {
     padding-bottom: var(--gap-16);
-} .bottom-sheet__scrollLocked_1rt61 {
+} .bottom-sheet__scrollLocked_uemty {
     overflow: hidden;
-} .bottom-sheet__hiddenScrollbar_1rt61 {
+} .bottom-sheet__hiddenScrollbar_uemty {
     scrollbar-width: none
-} .bottom-sheet__hiddenScrollbar_1rt61::-webkit-scrollbar {
+} .bottom-sheet__hiddenScrollbar_uemty::-webkit-scrollbar {
         width: 0;
         height: 0;
-    } .bottom-sheet__disabledPointerEvents_1rt61 {
+    } .bottom-sheet__disabledPointerEvents_uemty {
     pointer-events: none;
-} .bottom-sheet__appear_1rt61 .bottom-sheet__wrapper_1rt61, .bottom-sheet__enter_1rt61 .bottom-sheet__wrapper_1rt61 {
+} .bottom-sheet__appear_uemty .bottom-sheet__wrapper_uemty, .bottom-sheet__enter_uemty .bottom-sheet__wrapper_uemty {
         transition: none;
-    } .bottom-sheet__appearActive_1rt61 .bottom-sheet__wrapper_1rt61, .bottom-sheet__enterActive_1rt61 .bottom-sheet__wrapper_1rt61 {
+    } .bottom-sheet__appearActive_uemty .bottom-sheet__wrapper_uemty, .bottom-sheet__enterActive_uemty .bottom-sheet__wrapper_uemty {
         transition: var(--bottom-sheet-in-transition);
         transform: translateY(0);
-    } .bottom-sheet__enterDone_1rt61 .bottom-sheet__wrapper_1rt61, .bottom-sheet__appearDone_1rt61 .bottom-sheet__wrapper_1rt61 {
+    } .bottom-sheet__enterDone_uemty .bottom-sheet__wrapper_uemty, .bottom-sheet__appearDone_uemty .bottom-sheet__wrapper_uemty {
         transform: translateY(0);
-    } .bottom-sheet__exit_1rt61 .bottom-sheet__wrapper_1rt61 {
+    } .bottom-sheet__exit_uemty .bottom-sheet__wrapper_uemty {
         transform: translateY(0);
-    } .bottom-sheet__exitActive_1rt61 .bottom-sheet__wrapper_1rt61 {
+    } .bottom-sheet__exitActive_uemty .bottom-sheet__wrapper_uemty {
         transition: var(--bottom-sheet-out-transition);
         transform: translateY(100%);
-    } .bottom-sheet__safeAreaBottom_1rt61 {
+    } .bottom-sheet__safeAreaBottom_uemty {
     padding-bottom: env(safe-area-inset-bottom);
-} .bottom-sheet__background-accent_1rt61 {
+} .bottom-sheet__background-accent_uemty {
             background-color: var(--color-light-bg-accent);
-        } .bottom-sheet__background-info_1rt61 {
+        } .bottom-sheet__background-info_uemty {
             background-color: var(--color-light-bg-info);
-        } .bottom-sheet__background-attention-muted_1rt61 {
+        } .bottom-sheet__background-attention-muted_uemty {
             background-color: var(--color-light-bg-attention-muted);
-        } .bottom-sheet__background-positive-muted_1rt61 {
+        } .bottom-sheet__background-positive-muted_uemty {
             background-color: var(--color-light-bg-positive-muted);
-        } .bottom-sheet__background-negative-muted_1rt61 {
+        } .bottom-sheet__background-negative-muted_uemty {
             background-color: var(--color-light-bg-negative-muted);
-        } .bottom-sheet__background-primary_1rt61 {
+        } .bottom-sheet__background-primary_uemty {
             background-color: var(--color-light-bg-primary);
-        } .bottom-sheet__background-primary-inverted_1rt61 {
+        } .bottom-sheet__background-primary-inverted_uemty {
             background-color: var(--color-light-bg-primary-inverted);
-        } .bottom-sheet__background-secondary_1rt61 {
+        } .bottom-sheet__background-secondary_uemty {
             background-color: var(--color-light-bg-secondary);
-        } .bottom-sheet__background-secondary-inverted_1rt61 {
+        } .bottom-sheet__background-secondary-inverted_uemty {
             background-color: var(--color-light-bg-secondary-inverted);
-        } .bottom-sheet__background-tertiary_1rt61 {
+        } .bottom-sheet__background-tertiary_uemty {
             background-color: var(--color-light-bg-tertiary);
-        } .bottom-sheet__background-tertiary-inverted_1rt61 {
+        } .bottom-sheet__background-tertiary-inverted_uemty {
             background-color: var(--color-light-bg-tertiary-inverted);
-        } .bottom-sheet__background-quaternary_1rt61 {
+        } .bottom-sheet__background-quaternary_uemty {
             background-color: var(--color-light-bg-quaternary);
-        } .bottom-sheet__background-quaternary-inverted_1rt61 {
+        } .bottom-sheet__background-quaternary-inverted_uemty {
             background-color: var(--color-light-bg-quaternary-inverted);
-        } .bottom-sheet__background-specialbg-component_1rt61 {
+        } .bottom-sheet__background-specialbg-component_uemty {
             background-color: var(--color-light-specialbg-component);
-        } .bottom-sheet__background-specialbg-component-inverted_1rt61 {
+        } .bottom-sheet__background-specialbg-component-inverted_uemty {
             background-color: var(--color-light-specialbg-component-inverted);
-        } .bottom-sheet__background-specialbg-primary-grouped_1rt61 {
+        } .bottom-sheet__background-specialbg-primary-grouped_uemty {
             background-color: var(--color-light-specialbg-primary-grouped);
-        } .bottom-sheet__background-specialbg-secondary-grouped_1rt61 {
+        } .bottom-sheet__background-specialbg-secondary-grouped_uemty {
             background-color: var(--color-light-specialbg-secondary-grouped);
-        } .bottom-sheet__background-specialbg-tertiary-grouped_1rt61 {
+        } .bottom-sheet__background-specialbg-tertiary-grouped_uemty {
             background-color: var(--color-light-specialbg-tertiary-grouped);
-        } .bottom-sheet__background-specialbg-secondary-transparent_1rt61 {
+        } .bottom-sheet__background-specialbg-secondary-transparent_uemty {
             background-color: var(--color-light-specialbg-secondary-transparent);
-        } .bottom-sheet__background-specialbg-secondary-transparent-inverted_1rt61 {
+        } .bottom-sheet__background-specialbg-secondary-transparent-inverted_uemty {
             background-color: var(--color-light-specialbg-secondary-transparent-inverted);
-        } .bottom-sheet__background-specialbg-tertiary-transparent_1rt61 {
+        } .bottom-sheet__background-specialbg-tertiary-transparent_uemty {
             background-color: var(--color-light-specialbg-tertiary-transparent);
-        } .bottom-sheet__background-specialbg-tertiary-transparent-inverted_1rt61 {
+        } .bottom-sheet__background-specialbg-tertiary-transparent-inverted_uemty {
             background-color: var(--color-light-specialbg-tertiary-transparent-inverted);
         }

package/button/components/base-button/Component.js CHANGED Viewed

@@ -14,13 +14,13 @@ var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 var mergeRefs__default = /*#__PURE__*/_interopDefaultCompat(mergeRefs);
 var cn__default = /*#__PURE__*/_interopDefaultCompat(cn);
-var defaultColors = {"accent":"button__accent_tcopr","loader":"button__loader_tcopr","primary":"button__primary_tcopr","secondary":"button__secondary_tcopr","outlined":"button__outlined_tcopr","tertiary":"button__tertiary_tcopr","filled":"button__filled_tcopr","transparent":"button__transparent_tcopr","link":"button__link_tcopr","text":"button__text_tcopr","ghost":"button__ghost_tcopr","component":"button__component_tcopr","loading":"button__loading_tcopr"};
+var defaultColors = {"accent":"button__accent_mmhrb","loader":"button__loader_mmhrb","primary":"button__primary_mmhrb","hint":"button__hint_mmhrb","secondary":"button__secondary_mmhrb","outlined":"button__outlined_mmhrb","tertiary":"button__tertiary_mmhrb","filled":"button__filled_mmhrb","transparent":"button__transparent_mmhrb","link":"button__link_mmhrb","text":"button__text_mmhrb","ghost":"button__ghost_mmhrb","component":"button__component_mmhrb","loading":"button__loading_mmhrb"};
 require('./default.css');
-var commonStyles = {"component":"button__component_1v7o5","hug":"button__hug_1v7o5","fill":"button__fill_1v7o5","hint":"button__hint_1v7o5","allowBackdropBlur":"button__allowBackdropBlur_1v7o5","secondary":"button__secondary_1v7o5","accent":"button__accent_1v7o5","primary":"button__primary_1v7o5","focused":"button__focused_1v7o5","loading":"button__loading_1v7o5","label":"button__label_1v7o5","addons":"button__addons_1v7o5","stretchText":"button__stretchText_1v7o5","loader":"button__loader_1v7o5","size-32":"button__size-32_1v7o5","iconOnly":"button__iconOnly_1v7o5","size-40":"button__size-40_1v7o5","size-48":"button__size-48_1v7o5","size-56":"button__size-56_1v7o5","size-64":"button__size-64_1v7o5","size-72":"button__size-72_1v7o5","withRightAddons":"button__withRightAddons_1v7o5","ghost":"button__ghost_1v7o5","text":"button__text_1v7o5","withLeftAddons":"button__withLeftAddons_1v7o5","link":"button__link_1v7o5","transparent":"button__transparent_1v7o5","block":"button__block_1v7o5","nowrap":"button__nowrap_1v7o5","rounded":"button__rounded_1v7o5"};
+var commonStyles = {"component":"button__component_1xl99","hug":"button__hug_1xl99","fill":"button__fill_1xl99","hint":"button__hint_1xl99","allowBackdropBlur":"button__allowBackdropBlur_1xl99","secondary":"button__secondary_1xl99","accent":"button__accent_1xl99","primary":"button__primary_1xl99","focused":"button__focused_1xl99","loading":"button__loading_1xl99","label":"button__label_1xl99","addons":"button__addons_1xl99","stretchText":"button__stretchText_1xl99","loader":"button__loader_1xl99","size-32":"button__size-32_1xl99","iconOnly":"button__iconOnly_1xl99","size-40":"button__size-40_1xl99","size-48":"button__size-48_1xl99","size-56":"button__size-56_1xl99","size-64":"button__size-64_1xl99","size-72":"button__size-72_1xl99","withRightAddons":"button__withRightAddons_1xl99","ghost":"button__ghost_1xl99","text":"button__text_1xl99","withLeftAddons":"button__withLeftAddons_1xl99","link":"button__link_1xl99","transparent":"button__transparent_1xl99","block":"button__block_1xl99","nowrap":"button__nowrap_1xl99","rounded":"button__rounded_1xl99"};
 require('./index.css');
-var invertedColors = {"accent":"button__accent_pphn0","loader":"button__loader_pphn0","primary":"button__primary_pphn0","secondary":"button__secondary_pphn0","outlined":"button__outlined_pphn0","tertiary":"button__tertiary_pphn0","filled":"button__filled_pphn0","transparent":"button__transparent_pphn0","link":"button__link_pphn0","text":"button__text_pphn0","ghost":"button__ghost_pphn0","component":"button__component_pphn0","loading":"button__loading_pphn0"};
+var invertedColors = {"accent":"button__accent_izaol","loader":"button__loader_izaol","primary":"button__primary_izaol","hint":"button__hint_izaol","secondary":"button__secondary_izaol","outlined":"button__outlined_izaol","tertiary":"button__tertiary_izaol","filled":"button__filled_izaol","transparent":"button__transparent_izaol","link":"button__link_izaol","text":"button__text_izaol","ghost":"button__ghost_izaol","component":"button__component_izaol","loading":"button__loading_izaol"};
 require('./inverted.css');
 var colorStyles = {
@@ -97,7 +97,7 @@ var BaseButton = React__default.default.forwardRef(function (_a, ref) {
                 _c[commonStyles.stretchText] = !(leftAddons || rightAddons) || textResizing === 'fill',
                 _c)) },
             children,
-            showHint && React__default.default.createElement("span", { className: commonStyles.hint }, hint))),
+            showHint && (React__default.default.createElement("span", { className: cn__default.default(commonStyles.hint, colorStyles[colors].hint) }, hint)))),
         showLoader && (React__default.default.createElement(coreComponentsSpinner.Spinner, { preset: 24, dataTestId: coreComponentsShared.getDataTestId(dataTestId, 'loader'), visible: true, className: cn__default.default(commonStyles.loader, colorStyles[colors].loader, colorStylesMap[colors].loader, spinnerClassName) })),
         rightAddons && React__default.default.createElement("span", { className: commonStyles.addons }, rightAddons)));
     React.useEffect(function () {

package/button/components/base-button/default.css CHANGED Viewed

@@ -1,4 +1,4 @@
-/* hash: 5dlsg */
+/* hash: 1rlza */
 :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 */ /* 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 {
     --color-light-accent-primary: #ef3124;
@@ -11,6 +11,8 @@
     --color-light-neutral-translucent-300-press: rgba(5, 11, 44, 0.18);
     --color-light-text-primary: rgba(3, 3, 6, 0.88);
     --color-light-text-primary-hover: rgba(1, 1, 12, 0.63);
+    --color-light-text-secondary: rgba(4, 4, 19, 0.55);
+    --color-light-text-secondary-inverted: rgba(238, 238, 251, 0.55);
     --color-light-text-tertiary: rgba(5, 8, 29, 0.38);
     --color-light-transparent-default: rgba(255, 255, 255, 0);
     --color-light-transparent-default-hover: rgba(38, 55, 88, 0.06);
@@ -40,6 +42,7 @@
     /* border-radius desktop */
     /* primary */
+    --button-primary-hint-color: var(--color-light-text-secondary-inverted);
     /* accent */
     --button-accent-base-bg-color: var(--color-light-accent-primary);
@@ -54,6 +57,7 @@
     --button-secondary-base-border-color: transparent;
     --button-secondary-disabled-border-color: transparent;
     --button-secondary-color: var(--color-light-text-primary);
+    --button-secondary-hint-color: var(--color-light-text-secondary);
     /* tertiary */
     --button-tertiary-base-bg-color: var(--color-light-transparent-default);
@@ -63,6 +67,7 @@
     --button-tertiary-disabled-bg-color: var(--color-light-transparent-default);
     --button-tertiary-base-border-color: var(--color-light-neutral-translucent-1300);
     --button-tertiary-color: var(--color-light-text-primary);
+    --button-tertiary-hint-color: var(--color-light-text-secondary);
     /* outlined */
     --button-outlined-base-bg-color: var(--color-light-transparent-default);
@@ -72,6 +77,7 @@
     --button-outlined-disabled-bg-color: var(--color-light-transparent-default);
     --button-outlined-base-border-color: var(--color-light-neutral-translucent-1300);
     --button-outlined-color: var(--color-light-text-primary);
+    --button-outlined-hint-color: var(--color-light-text-secondary);
     /* ghost */
     --button-ghost-base-color: var(--color-light-text-primary);
@@ -79,6 +85,7 @@
     /* text */
     --button-text-base-color: var(--color-light-text-primary);
+    --button-text-base-hint-color: var(--color-light-text-secondary);
     --button-text-hover-color: var(--color-light-text-primary-hover);
     /* link */
@@ -88,6 +95,7 @@
     /* transparent */
     --button-transparent-base-color: var(--color-light-text-primary);
+    --button-transparent-base-hint-color: var(--color-light-text-secondary);
     --button-transparent-hover-bg-color: var(--color-light-transparent-default-hover);
     --button-transparent-active-bg-color: var(--color-light-transparent-default-press);
@@ -150,142 +158,154 @@
     /* text mobile inverted */
     /* loader mobile */
-} .button__accent_tcopr {
+} .button__accent_mmhrb {
     color: var(--button-accent-color);
     background-color: var(--button-accent-base-bg-color);
     border: 1px solid transparent
 } @media (hover: hover) {
-        .button__accent_tcopr:hover {
+        .button__accent_mmhrb:hover {
             background-color: var(--button-accent-hover-bg-color);
         }
-    } .button__accent_tcopr:active {
+    } .button__accent_mmhrb:active {
         background-color: var(--button-accent-active-bg-color);
-    } .button__accent_tcopr > .button__loader_tcopr {
+    } .button__accent_mmhrb > .button__loader_mmhrb {
         color: var(--button-spinner-static-color);
-    } .button__primary_tcopr {
-    border: 1px solid transparent;
-} .button__secondary_tcopr {
+    } .button__primary_mmhrb {
+    border: 1px solid transparent
+} .button__primary_mmhrb .button__hint_mmhrb {
+        color: var(--button-primary-hint-color);
+    } .button__secondary_mmhrb {
     color: var(--button-secondary-color);
     border: 1px solid var(--button-secondary-base-border-color)
-} .button__secondary_tcopr > .button__loader_tcopr {
+} .button__secondary_mmhrb > .button__loader_mmhrb {
         color: var(--button-spinner-default-color);
-    } .button__outlined_tcopr {
+    } .button__secondary_mmhrb .button__hint_mmhrb {
+        color: var(--button-secondary-hint-color);
+    } .button__outlined_mmhrb {
     color: var(--button-outlined-color);
     background-color: var(--button-outlined-base-bg-color);
     border: 1px solid var(--button-outlined-base-border-color)
 } @media (hover: hover) {
-        .button__outlined_tcopr:hover {
+        .button__outlined_mmhrb:hover {
             background-color: var(--button-outlined-hover-bg-color);
             border-color: var(--button-outlined-hover-border-color);
         }
-    } .button__outlined_tcopr:active {
+    } .button__outlined_mmhrb:active {
         background-color: var(--button-outlined-active-bg-color);
-    } .button__outlined_tcopr > .button__loader_tcopr {
+    } .button__outlined_mmhrb > .button__loader_mmhrb {
         color: var(--button-spinner-default-color);
-    } .button__tertiary_tcopr {
+    } .button__outlined_mmhrb .button__hint_mmhrb {
+        color: var(--button-outlined-hint-color);
+    } .button__tertiary_mmhrb {
     color: var(--button-tertiary-color);
     background-color: var(--button-tertiary-base-bg-color);
     border: 1px solid var(--button-tertiary-base-border-color)
 } @media (hover: hover) {
-        .button__tertiary_tcopr:hover {
+        .button__tertiary_mmhrb:hover {
             background-color: var(--button-tertiary-hover-bg-color);
             border-color: var(--button-tertiary-hover-border-color);
         }
-    } .button__tertiary_tcopr:active {
+    } .button__tertiary_mmhrb:active {
         background-color: var(--button-tertiary-active-bg-color);
-    } .button__tertiary_tcopr > .button__loader_tcopr {
+    } .button__tertiary_mmhrb > .button__loader_mmhrb {
         color: var(--button-spinner-default-color);
-    } .button__filled_tcopr {
+    } .button__tertiary_mmhrb .button__hint_mmhrb {
+        color: var(--button-tertiary-hint-color);
+    } .button__filled_mmhrb {
     color: var(--color-light-text-primary);
     background-color: var(--color-light-neutral-translucent-300);
     border: 1px solid transparent
 } @media (hover: hover) {
-        .button__filled_tcopr:hover {
+        .button__filled_mmhrb:hover {
             background-color: var(--color-light-neutral-translucent-300-hover);
         }
-    } .button__filled_tcopr:active {
+    } .button__filled_mmhrb:active {
         background-color: var(--color-light-neutral-translucent-300-press);
-    } .button__filled_tcopr > .button__loader_tcopr {
+    } .button__filled_mmhrb > .button__loader_mmhrb {
         color: var(--button-spinner-default-color);
-    } .button__transparent_tcopr {
+    } .button__transparent_mmhrb {
     color: var(--button-transparent-base-color);
     background-color: transparent;
     border: 1px solid transparent
 } @media (hover: hover) {
-        .button__transparent_tcopr:hover {
+        .button__transparent_mmhrb:hover {
             background-color: var(--button-transparent-hover-bg-color);
         }
-    } .button__transparent_tcopr:active {
+    } .button__transparent_mmhrb:active {
         background-color: var(--button-transparent-active-bg-color);
-    } .button__transparent_tcopr > .button__loader_tcopr {
+    } .button__transparent_mmhrb > .button__loader_mmhrb {
         color: var(--button-spinner-default-color);
-    } .button__link_tcopr {
+    } .button__transparent_mmhrb .button__hint_mmhrb {
+        color: var(--button-transparent-base-hint-color);
+    } .button__link_mmhrb {
     color: var(--button-link-base-color);
     background-color: transparent;
     border: 1px solid transparent
 } @media (hover: hover) {
-        .button__link_tcopr:hover {
+        .button__link_mmhrb:hover {
             background-color: var(--button-link-hover-bg-color);
         }
-    } .button__link_tcopr:active {
+    } .button__link_mmhrb:active {
         background-color: var(--button-link-active-bg-color);
-    } .button__link_tcopr > .button__loader_tcopr {
+    } .button__link_mmhrb > .button__loader_mmhrb {
         color: var(--button-spinner-default-color);
-    } .button__text_tcopr {
+    } .button__text_mmhrb {
     background-color: transparent;
     color: var(--button-text-base-color)
 } @media (hover: hover) {
-        .button__text_tcopr:hover {
+        .button__text_mmhrb:hover {
             color: var(--button-text-hover-color);
         }
-    } .button__text_tcopr > .button__loader_tcopr {
+    } .button__text_mmhrb > .button__loader_mmhrb {
         color: var(--button-spinner-default-color);
-    } .button__ghost_tcopr {
+    } .button__text_mmhrb .button__hint_mmhrb {
+        color: var(--button-text-base-hint-color);
+    } .button__ghost_mmhrb {
     background-color: transparent;
     color: var(--button-ghost-base-color)
 } @media (hover: hover) {
-        .button__ghost_tcopr:hover {
+        .button__ghost_mmhrb:hover {
             color: var(--button-ghost-hover-color);
         }
-    } .button__ghost_tcopr > .button__loader_tcopr {
+    } .button__ghost_mmhrb > .button__loader_mmhrb {
         color: var(--button-spinner-default-color);
-    } /* Disabled */ .button__component_tcopr[disabled].button__accent_tcopr {
+    } /* Disabled */ .button__component_mmhrb[disabled].button__accent_mmhrb {
         color: var(--button-accent-disabled-color);
         background-color: var(--button-accent-disabled-bg-color)
-    } .button__component_tcopr[disabled].button__accent_tcopr.button__loading_tcopr {
+    } .button__component_mmhrb[disabled].button__accent_mmhrb.button__loading_mmhrb {
             background-color: var(--button-accent-base-bg-color);
-        } .button__component_tcopr[disabled].button__secondary_tcopr {
+        } .button__component_mmhrb[disabled].button__secondary_mmhrb {
         border-color: var(--button-secondary-disabled-border-color)
-    } .button__component_tcopr[disabled].button__secondary_tcopr.button__loading_tcopr {
+    } .button__component_mmhrb[disabled].button__secondary_mmhrb.button__loading_mmhrb {
             color: var(--button-secondary-color);
             background-color: var(--button-secondary-base-bg-color);
             border-color: var(--button-secondary-base-border-color);
-        } .button__component_tcopr[disabled].button__outlined_tcopr {
+        } .button__component_mmhrb[disabled].button__outlined_mmhrb {
         background-color: var(--button-outlined-disabled-bg-color)
-    } .button__component_tcopr[disabled].button__outlined_tcopr.button__loading_tcopr {
+    } .button__component_mmhrb[disabled].button__outlined_mmhrb.button__loading_mmhrb {
             color: var(--button-outlined-color);
             border-color: var(--button-outlined-base-border-color);
-        } .button__component_tcopr[disabled].button__tertiary_tcopr {
+        } .button__component_mmhrb[disabled].button__tertiary_mmhrb {
         background-color: var(--button-tertiary-disabled-bg-color)
-    } .button__component_tcopr[disabled].button__tertiary_tcopr.button__loading_tcopr {
+    } .button__component_mmhrb[disabled].button__tertiary_mmhrb.button__loading_mmhrb {
             color: var(--button-tertiary-color);
             border-color: var(--button-tertiary-base-border-color);
-        } .button__component_tcopr[disabled].button__filled_tcopr {
+        } .button__component_mmhrb[disabled].button__filled_mmhrb {
         color: var(--color-light-text-tertiary);
         background-color: var(--color-light-neutral-translucent-100)
-    } .button__component_tcopr[disabled].button__filled_tcopr.button__loading_tcopr {
+    } .button__component_mmhrb[disabled].button__filled_mmhrb.button__loading_mmhrb {
             color: var(--color-light-text-primary);
             background-color: var(--color-light-neutral-translucent-300);
-        } .button__component_tcopr[disabled].button__transparent_tcopr {
+        } .button__component_mmhrb[disabled].button__transparent_mmhrb {
         background-color: transparent
-    } .button__component_tcopr[disabled].button__transparent_tcopr.button__loading_tcopr {
+    } .button__component_mmhrb[disabled].button__transparent_mmhrb.button__loading_mmhrb {
             color: var(--button-transparent-base-color);
-        } .button__component_tcopr[disabled].button__link_tcopr {
+        } .button__component_mmhrb[disabled].button__link_mmhrb {
         background-color: transparent
-    } .button__component_tcopr[disabled].button__link_tcopr.button__loading_tcopr {
+    } .button__component_mmhrb[disabled].button__link_mmhrb.button__loading_mmhrb {
             color: var(--button-link-base-color);
-        } .button__component_tcopr[disabled].button__text_tcopr.button__loading_tcopr {
+        } .button__component_mmhrb[disabled].button__text_mmhrb.button__loading_mmhrb {
             color: var(--button-text-base-color);
-        } .button__component_tcopr[disabled].button__ghost_tcopr.button__loading_tcopr {
+        } .button__component_mmhrb[disabled].button__ghost_mmhrb.button__loading_mmhrb {
             color: var(--button-ghost-base-color);
         }