@alfalab/core-components 48.3.0 → 48.5.0

package/bottom-sheet/modern/index.css

@@ -1,4 +1,4 @@
-/* hash: ia2ua */
+/* hash: 1eaf5 */
 :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_w3hfu {
+} .bottom-sheet__modal_1m0lg {
     bottom: var(--gap-0);
     width: 100%;
     max-width: 600px;
     pointer-events: none;
     touch-action: none;
-} .bottom-sheet__modal_w3hfu.bottom-sheet__modal_w3hfu {
+} .bottom-sheet__modal_1m0lg.bottom-sheet__modal_1m0lg {
     background-color: transparent;
     position: fixed;
-} .bottom-sheet__wrapper_w3hfu {
+} .bottom-sheet__wrapper_1m0lg {
     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_w3hfu {
+} .bottom-sheet__fullscreen_1m0lg {
     border-radius: 0;
-} .bottom-sheet__component_w3hfu {
+} .bottom-sheet__component_1m0lg {
     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_w3hfu {
+} .bottom-sheet__withTransition_1m0lg {
     transition: var(--bottom-sheet-out-transition);
-} .bottom-sheet__scrollableContainer_w3hfu {
+} .bottom-sheet__scrollableContainer_1m0lg {
     overflow: auto;
     display: flex;
     flex-direction: column;
@@ -98,7 +98,7 @@
     background-color: inherit;
     border-radius: inherit;
     overscroll-behavior: contain;
-} .bottom-sheet__marker_w3hfu {
+} .bottom-sheet__marker_1m0lg {
     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_w3hfu {
+} .bottom-sheet__defaultMarker_1m0lg {
     height: 4px;
     border-radius: var(--border-radius-20);
     background-color: var(--color-light-neutral-translucent-300);
-} .bottom-sheet__content_w3hfu {
+} .bottom-sheet__content_1m0lg {
     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_w3hfu {
+} .bottom-sheet__noHeader_1m0lg {
     padding-top: var(--gap-16);
-} .bottom-sheet__noFooter_w3hfu {
+} .bottom-sheet__noFooter_1m0lg {
     padding-bottom: var(--gap-16);
-} .bottom-sheet__scrollLocked_w3hfu {
+} .bottom-sheet__scrollLocked_1m0lg {
     overflow: hidden;
-} .bottom-sheet__hiddenScrollbar_w3hfu {
+} .bottom-sheet__hiddenScrollbar_1m0lg {
     scrollbar-width: none
-} .bottom-sheet__hiddenScrollbar_w3hfu::-webkit-scrollbar {
+} .bottom-sheet__hiddenScrollbar_1m0lg::-webkit-scrollbar {
         width: 0;
         height: 0;
-    } .bottom-sheet__disabledPointerEvents_w3hfu {
+    } .bottom-sheet__disabledPointerEvents_1m0lg {
     pointer-events: none;
-} .bottom-sheet__appear_w3hfu .bottom-sheet__wrapper_w3hfu, .bottom-sheet__enter_w3hfu .bottom-sheet__wrapper_w3hfu {
+} .bottom-sheet__appear_1m0lg .bottom-sheet__wrapper_1m0lg, .bottom-sheet__enter_1m0lg .bottom-sheet__wrapper_1m0lg {
         transition: none;
-    } .bottom-sheet__appearActive_w3hfu .bottom-sheet__wrapper_w3hfu, .bottom-sheet__enterActive_w3hfu .bottom-sheet__wrapper_w3hfu {
+    } .bottom-sheet__appearActive_1m0lg .bottom-sheet__wrapper_1m0lg, .bottom-sheet__enterActive_1m0lg .bottom-sheet__wrapper_1m0lg {
         transition: var(--bottom-sheet-in-transition);
         transform: translateY(0);
-    } .bottom-sheet__enterDone_w3hfu .bottom-sheet__wrapper_w3hfu, .bottom-sheet__appearDone_w3hfu .bottom-sheet__wrapper_w3hfu {
+    } .bottom-sheet__enterDone_1m0lg .bottom-sheet__wrapper_1m0lg, .bottom-sheet__appearDone_1m0lg .bottom-sheet__wrapper_1m0lg {
         transform: translateY(0);
-    } .bottom-sheet__exit_w3hfu .bottom-sheet__wrapper_w3hfu {
+    } .bottom-sheet__exit_1m0lg .bottom-sheet__wrapper_1m0lg {
         transform: translateY(0);
-    } .bottom-sheet__exitActive_w3hfu .bottom-sheet__wrapper_w3hfu {
+    } .bottom-sheet__exitActive_1m0lg .bottom-sheet__wrapper_1m0lg {
         transition: var(--bottom-sheet-out-transition);
         transform: translateY(100%);
-    } .bottom-sheet__safeAreaBottom_w3hfu {
+    } .bottom-sheet__safeAreaBottom_1m0lg {
     padding-bottom: env(safe-area-inset-bottom);
-} .bottom-sheet__background-accent_w3hfu {
+} .bottom-sheet__background-accent_1m0lg {
             background-color: var(--color-light-bg-accent);
-        } .bottom-sheet__background-info_w3hfu {
+        } .bottom-sheet__background-info_1m0lg {
             background-color: var(--color-light-bg-info);
-        } .bottom-sheet__background-attention-muted_w3hfu {
+        } .bottom-sheet__background-attention-muted_1m0lg {
             background-color: var(--color-light-bg-attention-muted);
-        } .bottom-sheet__background-positive-muted_w3hfu {
+        } .bottom-sheet__background-positive-muted_1m0lg {
             background-color: var(--color-light-bg-positive-muted);
-        } .bottom-sheet__background-negative-muted_w3hfu {
+        } .bottom-sheet__background-negative-muted_1m0lg {
             background-color: var(--color-light-bg-negative-muted);
-        } .bottom-sheet__background-primary_w3hfu {
+        } .bottom-sheet__background-primary_1m0lg {
             background-color: var(--color-light-bg-primary);
-        } .bottom-sheet__background-primary-inverted_w3hfu {
+        } .bottom-sheet__background-primary-inverted_1m0lg {
             background-color: var(--color-light-bg-primary-inverted);
-        } .bottom-sheet__background-secondary_w3hfu {
+        } .bottom-sheet__background-secondary_1m0lg {
             background-color: var(--color-light-bg-secondary);
-        } .bottom-sheet__background-secondary-inverted_w3hfu {
+        } .bottom-sheet__background-secondary-inverted_1m0lg {
             background-color: var(--color-light-bg-secondary-inverted);
-        } .bottom-sheet__background-tertiary_w3hfu {
+        } .bottom-sheet__background-tertiary_1m0lg {
             background-color: var(--color-light-bg-tertiary);
-        } .bottom-sheet__background-tertiary-inverted_w3hfu {
+        } .bottom-sheet__background-tertiary-inverted_1m0lg {
             background-color: var(--color-light-bg-tertiary-inverted);
-        } .bottom-sheet__background-quaternary_w3hfu {
+        } .bottom-sheet__background-quaternary_1m0lg {
             background-color: var(--color-light-bg-quaternary);
-        } .bottom-sheet__background-quaternary-inverted_w3hfu {
+        } .bottom-sheet__background-quaternary-inverted_1m0lg {
             background-color: var(--color-light-bg-quaternary-inverted);
-        } .bottom-sheet__background-specialbg-component_w3hfu {
+        } .bottom-sheet__background-specialbg-component_1m0lg {
             background-color: var(--color-light-specialbg-component);
-        } .bottom-sheet__background-specialbg-component-inverted_w3hfu {
+        } .bottom-sheet__background-specialbg-component-inverted_1m0lg {
             background-color: var(--color-light-specialbg-component-inverted);
-        } .bottom-sheet__background-specialbg-primary-grouped_w3hfu {
+        } .bottom-sheet__background-specialbg-primary-grouped_1m0lg {
             background-color: var(--color-light-specialbg-primary-grouped);
-        } .bottom-sheet__background-specialbg-secondary-grouped_w3hfu {
+        } .bottom-sheet__background-specialbg-secondary-grouped_1m0lg {
             background-color: var(--color-light-specialbg-secondary-grouped);
-        } .bottom-sheet__background-specialbg-tertiary-grouped_w3hfu {
+        } .bottom-sheet__background-specialbg-tertiary-grouped_1m0lg {
             background-color: var(--color-light-specialbg-tertiary-grouped);
-        } .bottom-sheet__background-specialbg-secondary-transparent_w3hfu {
+        } .bottom-sheet__background-specialbg-secondary-transparent_1m0lg {
             background-color: var(--color-light-specialbg-secondary-transparent);
-        } .bottom-sheet__background-specialbg-secondary-transparent-inverted_w3hfu {
+        } .bottom-sheet__background-specialbg-secondary-transparent-inverted_1m0lg {
             background-color: var(--color-light-specialbg-secondary-transparent-inverted);
-        } .bottom-sheet__background-specialbg-tertiary-transparent_w3hfu {
+        } .bottom-sheet__background-specialbg-tertiary-transparent_1m0lg {
             background-color: var(--color-light-specialbg-tertiary-transparent);
-        } .bottom-sheet__background-specialbg-tertiary-transparent-inverted_w3hfu {
+        } .bottom-sheet__background-specialbg-tertiary-transparent-inverted_1m0lg {
             background-color: var(--color-light-specialbg-tertiary-transparent-inverted);
         }

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

@@ -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_5x0a7","loader":"button__loader_5x0a7","primary":"button__primary_5x0a7","secondary":"button__secondary_5x0a7","outlined":"button__outlined_5x0a7","tertiary":"button__tertiary_5x0a7","filled":"button__filled_5x0a7","transparent":"button__transparent_5x0a7","link":"button__link_5x0a7","text":"button__text_5x0a7","ghost":"button__ghost_5x0a7","component":"button__component_5x0a7","loading":"button__loading_5x0a7"};
+var defaultColors = {"accent":"button__accent_11owe","loader":"button__loader_11owe","primary":"button__primary_11owe","hint":"button__hint_11owe","secondary":"button__secondary_11owe","outlined":"button__outlined_11owe","tertiary":"button__tertiary_11owe","filled":"button__filled_11owe","transparent":"button__transparent_11owe","link":"button__link_11owe","text":"button__text_11owe","ghost":"button__ghost_11owe","component":"button__component_11owe","loading":"button__loading_11owe"};
 require('./default.css');
 
-var commonStyles = {"component":"button__component_12fau","hug":"button__hug_12fau","fill":"button__fill_12fau","hint":"button__hint_12fau","allowBackdropBlur":"button__allowBackdropBlur_12fau","secondary":"button__secondary_12fau","accent":"button__accent_12fau","primary":"button__primary_12fau","focused":"button__focused_12fau","loading":"button__loading_12fau","label":"button__label_12fau","addons":"button__addons_12fau","stretchText":"button__stretchText_12fau","loader":"button__loader_12fau","size-32":"button__size-32_12fau","iconOnly":"button__iconOnly_12fau","size-40":"button__size-40_12fau","size-48":"button__size-48_12fau","size-56":"button__size-56_12fau","size-64":"button__size-64_12fau","size-72":"button__size-72_12fau","withRightAddons":"button__withRightAddons_12fau","ghost":"button__ghost_12fau","text":"button__text_12fau","withLeftAddons":"button__withLeftAddons_12fau","link":"button__link_12fau","transparent":"button__transparent_12fau","block":"button__block_12fau","nowrap":"button__nowrap_12fau","rounded":"button__rounded_12fau"};
+var commonStyles = {"component":"button__component_16nri","hug":"button__hug_16nri","fill":"button__fill_16nri","hint":"button__hint_16nri","allowBackdropBlur":"button__allowBackdropBlur_16nri","secondary":"button__secondary_16nri","accent":"button__accent_16nri","primary":"button__primary_16nri","focused":"button__focused_16nri","loading":"button__loading_16nri","label":"button__label_16nri","addons":"button__addons_16nri","stretchText":"button__stretchText_16nri","loader":"button__loader_16nri","size-32":"button__size-32_16nri","iconOnly":"button__iconOnly_16nri","size-40":"button__size-40_16nri","size-48":"button__size-48_16nri","size-56":"button__size-56_16nri","size-64":"button__size-64_16nri","size-72":"button__size-72_16nri","withRightAddons":"button__withRightAddons_16nri","ghost":"button__ghost_16nri","text":"button__text_16nri","withLeftAddons":"button__withLeftAddons_16nri","link":"button__link_16nri","transparent":"button__transparent_16nri","block":"button__block_16nri","nowrap":"button__nowrap_16nri","rounded":"button__rounded_16nri"};
 require('./index.css');
 
-var invertedColors = {"accent":"button__accent_29t7h","loader":"button__loader_29t7h","primary":"button__primary_29t7h","secondary":"button__secondary_29t7h","outlined":"button__outlined_29t7h","tertiary":"button__tertiary_29t7h","filled":"button__filled_29t7h","transparent":"button__transparent_29t7h","link":"button__link_29t7h","text":"button__text_29t7h","ghost":"button__ghost_29t7h","component":"button__component_29t7h","loading":"button__loading_29t7h"};
+var invertedColors = {"accent":"button__accent_1wflv","loader":"button__loader_1wflv","primary":"button__primary_1wflv","hint":"button__hint_1wflv","secondary":"button__secondary_1wflv","outlined":"button__outlined_1wflv","tertiary":"button__tertiary_1wflv","filled":"button__filled_1wflv","transparent":"button__transparent_1wflv","link":"button__link_1wflv","text":"button__text_1wflv","ghost":"button__ghost_1wflv","component":"button__component_1wflv","loading":"button__loading_1wflv"};
 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

@@ -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_5x0a7 {
+} .button__accent_11owe {
     color: var(--button-accent-color);
     background-color: var(--button-accent-base-bg-color);
     border: 1px solid transparent
 } @media (hover: hover) {
-        .button__accent_5x0a7:hover {
+        .button__accent_11owe:hover {
             background-color: var(--button-accent-hover-bg-color);
         }
-    } .button__accent_5x0a7:active {
+    } .button__accent_11owe:active {
         background-color: var(--button-accent-active-bg-color);
-    } .button__accent_5x0a7 > .button__loader_5x0a7 {
+    } .button__accent_11owe > .button__loader_11owe {
         color: var(--button-spinner-static-color);
-    } .button__primary_5x0a7 {
-    border: 1px solid transparent;
-} .button__secondary_5x0a7 {
+    } .button__primary_11owe {
+    border: 1px solid transparent
+} .button__primary_11owe .button__hint_11owe {
+        color: var(--button-primary-hint-color);
+    } .button__secondary_11owe {
     color: var(--button-secondary-color);
     border: 1px solid var(--button-secondary-base-border-color)
-} .button__secondary_5x0a7 > .button__loader_5x0a7 {
+} .button__secondary_11owe > .button__loader_11owe {
         color: var(--button-spinner-default-color);
-    } .button__outlined_5x0a7 {
+    } .button__secondary_11owe .button__hint_11owe {
+        color: var(--button-secondary-hint-color);
+    } .button__outlined_11owe {
     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_5x0a7:hover {
+        .button__outlined_11owe:hover {
             background-color: var(--button-outlined-hover-bg-color);
             border-color: var(--button-outlined-hover-border-color);
         }
-    } .button__outlined_5x0a7:active {
+    } .button__outlined_11owe:active {
         background-color: var(--button-outlined-active-bg-color);
-    } .button__outlined_5x0a7 > .button__loader_5x0a7 {
+    } .button__outlined_11owe > .button__loader_11owe {
         color: var(--button-spinner-default-color);
-    } .button__tertiary_5x0a7 {
+    } .button__outlined_11owe .button__hint_11owe {
+        color: var(--button-outlined-hint-color);
+    } .button__tertiary_11owe {
     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_5x0a7:hover {
+        .button__tertiary_11owe:hover {
             background-color: var(--button-tertiary-hover-bg-color);
             border-color: var(--button-tertiary-hover-border-color);
         }
-    } .button__tertiary_5x0a7:active {
+    } .button__tertiary_11owe:active {
         background-color: var(--button-tertiary-active-bg-color);
-    } .button__tertiary_5x0a7 > .button__loader_5x0a7 {
+    } .button__tertiary_11owe > .button__loader_11owe {
         color: var(--button-spinner-default-color);
-    } .button__filled_5x0a7 {
+    } .button__tertiary_11owe .button__hint_11owe {
+        color: var(--button-tertiary-hint-color);
+    } .button__filled_11owe {
     color: var(--color-light-text-primary);
     background-color: var(--color-light-neutral-translucent-300);
     border: 1px solid transparent
 } @media (hover: hover) {
-        .button__filled_5x0a7:hover {
+        .button__filled_11owe:hover {
             background-color: var(--color-light-neutral-translucent-300-hover);
         }
-    } .button__filled_5x0a7:active {
+    } .button__filled_11owe:active {
         background-color: var(--color-light-neutral-translucent-300-press);
-    } .button__filled_5x0a7 > .button__loader_5x0a7 {
+    } .button__filled_11owe > .button__loader_11owe {
         color: var(--button-spinner-default-color);
-    } .button__transparent_5x0a7 {
+    } .button__transparent_11owe {
     color: var(--button-transparent-base-color);
     background-color: transparent;
     border: 1px solid transparent
 } @media (hover: hover) {
-        .button__transparent_5x0a7:hover {
+        .button__transparent_11owe:hover {
             background-color: var(--button-transparent-hover-bg-color);
         }
-    } .button__transparent_5x0a7:active {
+    } .button__transparent_11owe:active {
         background-color: var(--button-transparent-active-bg-color);
-    } .button__transparent_5x0a7 > .button__loader_5x0a7 {
+    } .button__transparent_11owe > .button__loader_11owe {
         color: var(--button-spinner-default-color);
-    } .button__link_5x0a7 {
+    } .button__transparent_11owe .button__hint_11owe {
+        color: var(--button-transparent-base-hint-color);
+    } .button__link_11owe {
     color: var(--button-link-base-color);
     background-color: transparent;
     border: 1px solid transparent
 } @media (hover: hover) {
-        .button__link_5x0a7:hover {
+        .button__link_11owe:hover {
             background-color: var(--button-link-hover-bg-color);
         }
-    } .button__link_5x0a7:active {
+    } .button__link_11owe:active {
         background-color: var(--button-link-active-bg-color);
-    } .button__link_5x0a7 > .button__loader_5x0a7 {
+    } .button__link_11owe > .button__loader_11owe {
         color: var(--button-spinner-default-color);
-    } .button__text_5x0a7 {
+    } .button__text_11owe {
     background-color: transparent;
     color: var(--button-text-base-color)
 } @media (hover: hover) {
-        .button__text_5x0a7:hover {
+        .button__text_11owe:hover {
             color: var(--button-text-hover-color);
         }
-    } .button__text_5x0a7 > .button__loader_5x0a7 {
+    } .button__text_11owe > .button__loader_11owe {
         color: var(--button-spinner-default-color);
-    } .button__ghost_5x0a7 {
+    } .button__text_11owe .button__hint_11owe {
+        color: var(--button-text-base-hint-color);
+    } .button__ghost_11owe {
     background-color: transparent;
     color: var(--button-ghost-base-color)
 } @media (hover: hover) {
-        .button__ghost_5x0a7:hover {
+        .button__ghost_11owe:hover {
             color: var(--button-ghost-hover-color);
         }
-    } .button__ghost_5x0a7 > .button__loader_5x0a7 {
+    } .button__ghost_11owe > .button__loader_11owe {
         color: var(--button-spinner-default-color);
-    } /* Disabled */ .button__component_5x0a7[disabled].button__accent_5x0a7 {
+    } /* Disabled */ .button__component_11owe[disabled].button__accent_11owe {
         color: var(--button-accent-disabled-color);
         background-color: var(--button-accent-disabled-bg-color)
-    } .button__component_5x0a7[disabled].button__accent_5x0a7.button__loading_5x0a7 {
+    } .button__component_11owe[disabled].button__accent_11owe.button__loading_11owe {
             background-color: var(--button-accent-base-bg-color);
-        } .button__component_5x0a7[disabled].button__secondary_5x0a7 {
+        } .button__component_11owe[disabled].button__secondary_11owe {
         border-color: var(--button-secondary-disabled-border-color)
-    } .button__component_5x0a7[disabled].button__secondary_5x0a7.button__loading_5x0a7 {
+    } .button__component_11owe[disabled].button__secondary_11owe.button__loading_11owe {
             color: var(--button-secondary-color);
             background-color: var(--button-secondary-base-bg-color);
             border-color: var(--button-secondary-base-border-color);
-        } .button__component_5x0a7[disabled].button__outlined_5x0a7 {
+        } .button__component_11owe[disabled].button__outlined_11owe {
         background-color: var(--button-outlined-disabled-bg-color)
-    } .button__component_5x0a7[disabled].button__outlined_5x0a7.button__loading_5x0a7 {
+    } .button__component_11owe[disabled].button__outlined_11owe.button__loading_11owe {
             color: var(--button-outlined-color);
             border-color: var(--button-outlined-base-border-color);
-        } .button__component_5x0a7[disabled].button__tertiary_5x0a7 {
+        } .button__component_11owe[disabled].button__tertiary_11owe {
         background-color: var(--button-tertiary-disabled-bg-color)
-    } .button__component_5x0a7[disabled].button__tertiary_5x0a7.button__loading_5x0a7 {
+    } .button__component_11owe[disabled].button__tertiary_11owe.button__loading_11owe {
             color: var(--button-tertiary-color);
             border-color: var(--button-tertiary-base-border-color);
-        } .button__component_5x0a7[disabled].button__filled_5x0a7 {
+        } .button__component_11owe[disabled].button__filled_11owe {
         color: var(--color-light-text-tertiary);
         background-color: var(--color-light-neutral-translucent-100)
-    } .button__component_5x0a7[disabled].button__filled_5x0a7.button__loading_5x0a7 {
+    } .button__component_11owe[disabled].button__filled_11owe.button__loading_11owe {
             color: var(--color-light-text-primary);
             background-color: var(--color-light-neutral-translucent-300);
-        } .button__component_5x0a7[disabled].button__transparent_5x0a7 {
+        } .button__component_11owe[disabled].button__transparent_11owe {
         background-color: transparent
-    } .button__component_5x0a7[disabled].button__transparent_5x0a7.button__loading_5x0a7 {
+    } .button__component_11owe[disabled].button__transparent_11owe.button__loading_11owe {
             color: var(--button-transparent-base-color);
-        } .button__component_5x0a7[disabled].button__link_5x0a7 {
+        } .button__component_11owe[disabled].button__link_11owe {
         background-color: transparent
-    } .button__component_5x0a7[disabled].button__link_5x0a7.button__loading_5x0a7 {
+    } .button__component_11owe[disabled].button__link_11owe.button__loading_11owe {
             color: var(--button-link-base-color);
-        } .button__component_5x0a7[disabled].button__text_5x0a7.button__loading_5x0a7 {
+        } .button__component_11owe[disabled].button__text_11owe.button__loading_11owe {
             color: var(--button-text-base-color);
-        } .button__component_5x0a7[disabled].button__ghost_5x0a7.button__loading_5x0a7 {
+        } .button__component_11owe[disabled].button__ghost_11owe.button__loading_11owe {
             color: var(--button-ghost-base-color);
         }