@alfalab/core-components 44.3.0 → 44.4.0

package/bottom-sheet/modern/index.css

@@ -52,25 +52,25 @@
     /* header */
 
     /* footer */
-} .bottom-sheet__modal_uw730 {
+} .bottom-sheet__modal_1qlvo {
     bottom: 0;
     width: 100%;
     max-width: 600px;
     pointer-events: none;
     touch-action: none;
-} .bottom-sheet__modal_uw730.bottom-sheet__modal_uw730 {
+} .bottom-sheet__modal_1qlvo.bottom-sheet__modal_1qlvo {
     background-color: transparent;
     position: fixed;
-} .bottom-sheet__wrapper_uw730 {
+} .bottom-sheet__wrapper_1qlvo {
     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_uw730 {
+} .bottom-sheet__fullscreen_1qlvo {
     border-radius: 0;
-} .bottom-sheet__component_uw730 {
+} .bottom-sheet__component_1qlvo {
     position: relative;
     display: flex;
     flex-direction: column;
@@ -78,9 +78,9 @@
     background-color: var(--color-light-modal-bg-primary);
     pointer-events: all;
     box-shadow: var(--bottom-sheet-shadow);
-} .bottom-sheet__withTransition_uw730 {
+} .bottom-sheet__withTransition_1qlvo {
     transition: var(--bottom-sheet-out-transition);
-} .bottom-sheet__scrollableContainer_uw730 {
+} .bottom-sheet__scrollableContainer_1qlvo {
     overflow: auto;
     display: flex;
     flex-direction: column;
@@ -89,7 +89,7 @@
     background-color: inherit;
     border-radius: inherit;
     overscroll-behavior: contain;
-} .bottom-sheet__marker_uw730 {
+} .bottom-sheet__marker_1qlvo {
     position: fixed;
     top: var(--gap-2xs);
     right: 0;
@@ -97,11 +97,11 @@
     z-index: 1000;
     width: 36px;
     margin: 0 auto;
-} .bottom-sheet__defaultMarker_uw730 {
+} .bottom-sheet__defaultMarker_1qlvo {
     height: 4px;
     border-radius: var(--border-radius-xxl);
     background-color: var(--color-light-neutral-translucent-300);
-} .bottom-sheet__content_uw730 {
+} .bottom-sheet__content_1qlvo {
     position: relative;
     z-index: 0;
     display: flex;
@@ -111,73 +111,73 @@
     color: var(--color-light-text-primary);
     background-color: inherit;
     border-radius: inherit;
-} .bottom-sheet__noHeader_uw730 {
+} .bottom-sheet__noHeader_1qlvo {
     padding-top: var(--gap-m);
-} .bottom-sheet__noFooter_uw730 {
+} .bottom-sheet__noFooter_1qlvo {
     padding-bottom: var(--gap-m);
-} .bottom-sheet__scrollLocked_uw730 {
+} .bottom-sheet__scrollLocked_1qlvo {
     overflow: hidden;
-} .bottom-sheet__hiddenScrollbar_uw730 {
+} .bottom-sheet__hiddenScrollbar_1qlvo {
     scrollbar-width: none
-} .bottom-sheet__hiddenScrollbar_uw730::-webkit-scrollbar {
+} .bottom-sheet__hiddenScrollbar_1qlvo::-webkit-scrollbar {
         width: 0;
         height: 0;
-    } .bottom-sheet__disabledPointerEvents_uw730 {
+    } .bottom-sheet__disabledPointerEvents_1qlvo {
     pointer-events: none;
-} .bottom-sheet__appear_uw730 .bottom-sheet__wrapper_uw730, .bottom-sheet__enter_uw730 .bottom-sheet__wrapper_uw730 {
+} .bottom-sheet__appear_1qlvo .bottom-sheet__wrapper_1qlvo, .bottom-sheet__enter_1qlvo .bottom-sheet__wrapper_1qlvo {
         transition: none;
-    } .bottom-sheet__appearActive_uw730 .bottom-sheet__wrapper_uw730, .bottom-sheet__enterActive_uw730 .bottom-sheet__wrapper_uw730 {
+    } .bottom-sheet__appearActive_1qlvo .bottom-sheet__wrapper_1qlvo, .bottom-sheet__enterActive_1qlvo .bottom-sheet__wrapper_1qlvo {
         transition: var(--bottom-sheet-in-transition);
         transform: translateY(0);
-    } .bottom-sheet__enterDone_uw730 .bottom-sheet__wrapper_uw730, .bottom-sheet__appearDone_uw730 .bottom-sheet__wrapper_uw730 {
+    } .bottom-sheet__enterDone_1qlvo .bottom-sheet__wrapper_1qlvo, .bottom-sheet__appearDone_1qlvo .bottom-sheet__wrapper_1qlvo {
         transform: translateY(0);
-    } .bottom-sheet__exit_uw730 .bottom-sheet__wrapper_uw730 {
+    } .bottom-sheet__exit_1qlvo .bottom-sheet__wrapper_1qlvo {
         transform: translateY(0);
-    } .bottom-sheet__exitActive_uw730 .bottom-sheet__wrapper_uw730 {
+    } .bottom-sheet__exitActive_1qlvo .bottom-sheet__wrapper_1qlvo {
         transition: var(--bottom-sheet-out-transition);
         transform: translateY(100%);
-    } .bottom-sheet__background-accent_uw730 {
+    } .bottom-sheet__background-accent_1qlvo {
             background-color: var(--color-light-bg-accent);
-        } .bottom-sheet__background-info_uw730 {
+        } .bottom-sheet__background-info_1qlvo {
             background-color: var(--color-light-bg-info);
-        } .bottom-sheet__background-attention-muted_uw730 {
+        } .bottom-sheet__background-attention-muted_1qlvo {
             background-color: var(--color-light-bg-attention-muted);
-        } .bottom-sheet__background-positive-muted_uw730 {
+        } .bottom-sheet__background-positive-muted_1qlvo {
             background-color: var(--color-light-bg-positive-muted);
-        } .bottom-sheet__background-negative-muted_uw730 {
+        } .bottom-sheet__background-negative-muted_1qlvo {
             background-color: var(--color-light-bg-negative-muted);
-        } .bottom-sheet__background-primary_uw730 {
+        } .bottom-sheet__background-primary_1qlvo {
             background-color: var(--color-light-bg-primary);
-        } .bottom-sheet__background-primary-inverted_uw730 {
+        } .bottom-sheet__background-primary-inverted_1qlvo {
             background-color: var(--color-light-bg-primary-inverted);
-        } .bottom-sheet__background-secondary_uw730 {
+        } .bottom-sheet__background-secondary_1qlvo {
             background-color: var(--color-light-bg-secondary);
-        } .bottom-sheet__background-secondary-inverted_uw730 {
+        } .bottom-sheet__background-secondary-inverted_1qlvo {
             background-color: var(--color-light-bg-secondary-inverted);
-        } .bottom-sheet__background-tertiary_uw730 {
+        } .bottom-sheet__background-tertiary_1qlvo {
             background-color: var(--color-light-bg-tertiary);
-        } .bottom-sheet__background-tertiary-inverted_uw730 {
+        } .bottom-sheet__background-tertiary-inverted_1qlvo {
             background-color: var(--color-light-bg-tertiary-inverted);
-        } .bottom-sheet__background-quaternary_uw730 {
+        } .bottom-sheet__background-quaternary_1qlvo {
             background-color: var(--color-light-bg-quaternary);
-        } .bottom-sheet__background-quaternary-inverted_uw730 {
+        } .bottom-sheet__background-quaternary-inverted_1qlvo {
             background-color: var(--color-light-bg-quaternary-inverted);
-        } .bottom-sheet__background-specialbg-component_uw730 {
+        } .bottom-sheet__background-specialbg-component_1qlvo {
             background-color: var(--color-light-specialbg-component);
-        } .bottom-sheet__background-specialbg-component-inverted_uw730 {
+        } .bottom-sheet__background-specialbg-component-inverted_1qlvo {
             background-color: var(--color-light-specialbg-component-inverted);
-        } .bottom-sheet__background-specialbg-primary-grouped_uw730 {
+        } .bottom-sheet__background-specialbg-primary-grouped_1qlvo {
             background-color: var(--color-light-specialbg-primary-grouped);
-        } .bottom-sheet__background-specialbg-secondary-grouped_uw730 {
+        } .bottom-sheet__background-specialbg-secondary-grouped_1qlvo {
             background-color: var(--color-light-specialbg-secondary-grouped);
-        } .bottom-sheet__background-specialbg-tertiary-grouped_uw730 {
+        } .bottom-sheet__background-specialbg-tertiary-grouped_1qlvo {
             background-color: var(--color-light-specialbg-tertiary-grouped);
-        } .bottom-sheet__background-specialbg-secondary-transparent_uw730 {
+        } .bottom-sheet__background-specialbg-secondary-transparent_1qlvo {
             background-color: var(--color-light-specialbg-secondary-transparent);
-        } .bottom-sheet__background-specialbg-secondary-transparent-inverted_uw730 {
+        } .bottom-sheet__background-specialbg-secondary-transparent-inverted_1qlvo {
             background-color: var(--color-light-specialbg-secondary-transparent-inverted);
-        } .bottom-sheet__background-specialbg-tertiary-transparent_uw730 {
+        } .bottom-sheet__background-specialbg-tertiary-transparent_1qlvo {
             background-color: var(--color-light-specialbg-tertiary-transparent);
-        } .bottom-sheet__background-specialbg-tertiary-transparent-inverted_uw730 {
+        } .bottom-sheet__background-specialbg-tertiary-transparent-inverted_1qlvo {
             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_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_1eh12","loader":"button__loader_1eh12","primary":"button__primary_1eh12","secondary":"button__secondary_1eh12","outlined":"button__outlined_1eh12","tertiary":"button__tertiary_1eh12","filled":"button__filled_1eh12","transparent":"button__transparent_1eh12","link":"button__link_1eh12","ghost":"button__ghost_1eh12","component":"button__component_1eh12","loading":"button__loading_1eh12"};
 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_o1m6e","hug":"button__hug_o1m6e","fill":"button__fill_o1m6e","hint":"button__hint_o1m6e","secondary":"button__secondary_o1m6e","accent":"button__accent_o1m6e","primary":"button__primary_o1m6e","focused":"button__focused_o1m6e","loading":"button__loading_o1m6e","text":"button__text_o1m6e","addons":"button__addons_o1m6e","stretchText":"button__stretchText_o1m6e","loader":"button__loader_o1m6e","xxs":"button__xxs_o1m6e","iconOnly":"button__iconOnly_o1m6e","xs":"button__xs_o1m6e","s":"button__s_o1m6e","m":"button__m_o1m6e","l":"button__l_o1m6e","xl":"button__xl_o1m6e","withRightAddons":"button__withRightAddons_o1m6e","ghost":"button__ghost_o1m6e","withLeftAddons":"button__withLeftAddons_o1m6e","link":"button__link_o1m6e","block":"button__block_o1m6e","nowrap":"button__nowrap_o1m6e","rounded":"button__rounded_o1m6e"};
 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_1wvjm","loader":"button__loader_1wvjm","primary":"button__primary_1wvjm","secondary":"button__secondary_1wvjm","outlined":"button__outlined_1wvjm","tertiary":"button__tertiary_1wvjm","filled":"button__filled_1wvjm","transparent":"button__transparent_1wvjm","link":"button__link_1wvjm","ghost":"button__ghost_1wvjm","component":"button__component_1wvjm","loading":"button__loading_1wvjm"};
 require('./inverted.css');
 
 var colorStyles = {
@@ -50,18 +50,19 @@ var logWarning = function (view) {
 };
 var BaseButton = 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, 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 = tslib.__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 = tslib.__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 = React.useRef(null);
     var focused = hooks.useFocus(buttonRef, 'keyboard')[0];
-    var _p = React.useState(true), loaderTimePassed = _p[0], setLoaderTimePassed = _p[1];
+    var _r = React.useState(true), loaderTimePassed = _r[0], setLoaderTimePassed = _r[1];
     var timerId = React.useRef(0);
     var showLoader = loading || !loaderTimePassed;
+    var showHint = hint && ['m', 'l', 'xl'].includes(size);
     var iconOnly = !children;
     var componentProps = {
-        className: cn__default.default(commonStyles.component, commonStyles[view], commonStyles[size], styles[size], colorStyles[colors].component, colorStyles[colors][view], colorStylesMap[colors].component, (_b = {},
+        className: cn__default.default(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,
@@ -70,17 +71,20 @@ var BaseButton = React__default.default.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 = tslib.__rest(_q, ["disabled", "type"]);
+    var _s = restProps, disabled = _s.disabled, _t = _s.type, type = _t === void 0 ? 'button' : _t, restButtonProps = tslib.__rest(_s, ["disabled", "type"]);
     var buttonChildren = (React__default.default.createElement(React__default.default.Fragment, null,
         leftAddons && React__default.default.createElement("span", { className: commonStyles.addons }, leftAddons),
         children && (React__default.default.createElement("span", { className: cn__default.default(commonStyles.text, (_c = {},
                 _c[commonStyles.nowrap] = nowrap,
-                _c[commonStyles.stretchText] = !(leftAddons || rightAddons),
-                _c)) }, children)),
-        showLoader && (React__default.default.createElement(coreComponentsSpinner.Spinner, { dataTestId: coreComponentsShared.getDataTestId(dataTestId, 'loader'), visible: true, className: cn__default.default(commonStyles.loader, colorStyles[colors].loader, spinnerClassName) })),
+                _c[commonStyles.stretchText] = !(leftAddons || rightAddons) || textResizing === 'fill',
+                _c)) },
+            children,
+            showHint && React__default.default.createElement("span", { className: commonStyles.hint }, hint))),
+        showLoader && (React__default.default.createElement(coreComponentsSpinner.Spinner, { 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 () {
         if (loading) {

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

@@ -4,18 +4,13 @@
     --color-light-accent-primary: #ef3124;
     --color-light-accent-primary-hover: #e32a17;
     --color-light-accent-primary-press: #d72505;
-    --color-light-accent-secondary: #0e0e0e;
-    --color-light-accent-secondary-hover: #29292c;
-    --color-light-accent-secondary-press: #2f2f32;
     --color-light-bg-quaternary: #dcdee2;
     --color-light-border-underline-inverted: #49494f;
     --color-light-neutral-1500: #0e0e0e;
-    --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-text-primary: #0e0e0e;
     --color-light-text-primary-hover: #5f5f66;
-    --color-light-text-primary-inverted: #fff;
     --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);
@@ -50,10 +45,6 @@
     /* 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-color: var(--color-light-text-primary-inverted);
 
     /* accent */
     --button-accent-base-bg-color: var(--color-light-accent-primary);
@@ -99,7 +90,6 @@
 
     /* loader */
     --button-spinner-static-color: var(--color-static-neutral-1500-inverted);
-    --button-spinner-primary-color: var(--color-light-neutral-1500-inverted);
     --button-spinner-default-color: var(--color-light-neutral-1500);
 
     /* primary inverted */
@@ -139,137 +129,127 @@
     /* ghost mobile */
 
     /* ghost mobile inverted */
-} .button__accent_r1cnc {
+
+    /* loader mobile */
+} .button__accent_1eh12 {
     color: var(--button-accent-color);
     background-color: var(--button-accent-base-bg-color);
     border: 1px solid transparent
 } @media (hover: hover) {
-        .button__accent_r1cnc:hover {
+        .button__accent_1eh12:hover {
             background-color: var(--button-accent-hover-bg-color);
         }
-    } .button__accent_r1cnc:active {
+    } .button__accent_1eh12:active {
         background-color: var(--button-accent-active-bg-color);
-    } .button__accent_r1cnc > .button__loader_r1cnc {
+    } .button__accent_1eh12 > .button__loader_1eh12 {
         color: var(--button-spinner-static-color);
-    } .button__primary_r1cnc {
-    color: var(--button-primary-color);
-    background-color: var(--button-primary-base-bg-color);
-    border: 1px solid transparent
-} @media (hover: hover) {
-        .button__primary_r1cnc:hover {
-            background-color: var(--button-primary-hover-bg-color);
-        }
-    } .button__primary_r1cnc:active {
-        background-color: var(--button-primary-active-bg-color);
-    } .button__primary_r1cnc > .button__loader_r1cnc {
-        color: var(--button-spinner-primary-color);
-    } .button__secondary_r1cnc {
+    } .button__primary_1eh12 {
+    border: 1px solid transparent;
+} .button__secondary_1eh12 {
     color: var(--button-secondary-color);
     border: 1px solid var(--button-secondary-base-border-color)
-} .button__secondary_r1cnc > .button__loader_r1cnc {
+} .button__secondary_1eh12 > .button__loader_1eh12 {
         color: var(--button-spinner-default-color);
-    } .button__outlined_r1cnc {
+    } .button__outlined_1eh12 {
     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_r1cnc:hover {
+        .button__outlined_1eh12:hover {
             background-color: var(--button-outlined-hover-bg-color);
         }
-    } .button__outlined_r1cnc:active {
+    } .button__outlined_1eh12:active {
         background-color: var(--button-outlined-active-bg-color);
-    } .button__tertiary_r1cnc {
+    } .button__tertiary_1eh12 {
     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_r1cnc:hover {
+        .button__tertiary_1eh12:hover {
             background-color: var(--button-tertiary-hover-bg-color);
             border-color: var(--button-tertiary-hover-border-color);
         }
-    } .button__tertiary_r1cnc:active {
+    } .button__tertiary_1eh12:active {
         background-color: var(--button-tertiary-active-bg-color);
-    } .button__tertiary_r1cnc > .button__loader_r1cnc {
+    } .button__tertiary_1eh12 > .button__loader_1eh12 {
         color: var(--button-spinner-default-color);
-    } .button__filled_r1cnc {
+    } .button__filled_1eh12 {
     color: var(--color-light-text-primary);
     background-color: var(--color-light-bg-quaternary)
 } @media (hover: hover) {
-        .button__filled_r1cnc:hover {
+        .button__filled_1eh12:hover {
             background-color: var(--color-light-bg-quaternary-shade-7);
         }
-    } .button__filled_r1cnc:active {
+    } .button__filled_1eh12:active {
         background-color: var(--color-light-bg-quaternary-shade-15);
-    } .button__transparent_r1cnc {
+    } .button__transparent_1eh12 {
     color: var(--color-light-text-primary);
     background-color: var(--color-light-bg-primary-inverted-alpha-10)
 } @media (hover: hover) {
-        .button__transparent_r1cnc:hover {
+        .button__transparent_1eh12:hover {
             background-color: var(--color-light-bg-primary-inverted-alpha-20);
         }
-    } .button__transparent_r1cnc:active {
+    } .button__transparent_1eh12:active {
         background-color: var(--color-light-bg-primary-inverted-alpha-40);
-    } .button__link_r1cnc {
+    } .button__link_1eh12 {
     color: var(--button-link-base-color);
     background-color: transparent;
     border: 1px solid transparent
 } @media (hover: hover) {
-        .button__link_r1cnc:hover {
+        .button__link_1eh12:hover {
             background-color: var(--button-link-hover-bg-color);
         }
-    } .button__link_r1cnc:active {
+    } .button__link_1eh12:active {
         background-color: var(--button-link-active-bg-color);
-    } .button__link_r1cnc > .button__loader_r1cnc {
+    } .button__link_1eh12 > .button__loader_1eh12 {
         color: var(--button-spinner-default-color);
-    } .button__ghost_r1cnc {
+    } .button__ghost_1eh12 {
     background-color: transparent;
     color: var(--button-ghost-base-color)
 } @media (hover: hover) {
-        .button__ghost_r1cnc:hover {
+        .button__ghost_1eh12:hover {
             color: var(--button-ghost-hover-color);
         }
-    } .button__ghost_r1cnc > .button__loader_r1cnc {
+    } .button__ghost_1eh12 > .button__loader_1eh12 {
         color: var(--button-spinner-default-color);
-    } /* Disabled */ .button__component_r1cnc[disabled].button__accent_r1cnc {
+    } /* Disabled */ .button__component_1eh12[disabled].button__accent_1eh12 {
         color: var(--button-accent-disabled-color);
         background-color: var(--button-accent-disabled-bg-color)
-    } .button__component_r1cnc[disabled].button__accent_r1cnc.button__loading_r1cnc {
+    } .button__component_1eh12[disabled].button__accent_1eh12.button__loading_1eh12 {
             background-color: var(--button-accent-base-bg-color);
-        } .button__component_r1cnc[disabled].button__primary_r1cnc.button__loading_r1cnc {
-            background-color: var(--button-primary-base-bg-color);
-        } .button__component_r1cnc[disabled].button__secondary_r1cnc {
+        } .button__component_1eh12[disabled].button__secondary_1eh12 {
         border-color: var(--button-secondary-disabled-border-color)
-    } .button__component_r1cnc[disabled].button__secondary_r1cnc.button__loading_r1cnc {
+    } .button__component_1eh12[disabled].button__secondary_1eh12.button__loading_1eh12 {
             color: var(--button-secondary-color);
             background-color: var(--button-secondary-base-bg-color);
             border-color: var(--button-secondary-base-border-color);
-        } .button__component_r1cnc[disabled].button__outlined_r1cnc {
+        } .button__component_1eh12[disabled].button__outlined_1eh12 {
         color: var(--button-outlined-disabled-color);
         background-color: var(--button-outlined-disabled-bg-color);
         border-color: var(--button-outlined-disabled-border-color)
-    } .button__component_r1cnc[disabled].button__outlined_r1cnc.button__loading_r1cnc {
+    } .button__component_1eh12[disabled].button__outlined_1eh12.button__loading_1eh12 {
             color: var(--button-outlined-color);
-        } .button__component_r1cnc[disabled].button__tertiary_r1cnc {
+        } .button__component_1eh12[disabled].button__tertiary_1eh12 {
         background-color: var(--button-tertiary-disabled-bg-color)
-    } .button__component_r1cnc[disabled].button__tertiary_r1cnc.button__loading_r1cnc {
+    } .button__component_1eh12[disabled].button__tertiary_1eh12.button__loading_1eh12 {
             color: var(--button-tertiary-color);
             border-color: var(--button-tertiary-base-border-color);
-        } .button__component_r1cnc[disabled].button__filled_r1cnc {
+        } .button__component_1eh12[disabled].button__filled_1eh12 {
         color: var(--color-light-text-primary-alpha-30);
         background-color: var(--color-light-bg-quaternary-alpha-30)
-    } .button__component_r1cnc[disabled].button__filled_r1cnc.button__loading_r1cnc {
+    } .button__component_1eh12[disabled].button__filled_1eh12.button__loading_1eh12 {
             color: var(--color-light-text-primary);
             background-color: var(--color-light-bg-quaternary);
-        } .button__component_r1cnc[disabled].button__transparent_r1cnc {
+        } .button__component_1eh12[disabled].button__transparent_1eh12 {
         color: var(--color-light-text-primary-alpha-30);
         background-color: var(--color-light-bg-primary-inverted-alpha-3)
-    } .button__component_r1cnc[disabled].button__transparent_r1cnc.button__loading_r1cnc {
+    } .button__component_1eh12[disabled].button__transparent_1eh12.button__loading_1eh12 {
             color: var(--color-light-text-primary);
             background-color: var(--color-light-bg-primary-inverted-alpha-10);
-        } .button__component_r1cnc[disabled].button__link_r1cnc {
+        } .button__component_1eh12[disabled].button__link_1eh12 {
         background-color: transparent
-    } .button__component_r1cnc[disabled].button__link_r1cnc.button__loading_r1cnc {
+    } .button__component_1eh12[disabled].button__link_1eh12.button__loading_1eh12 {
             color: var(--button-link-base-color);
-        } .button__component_r1cnc[disabled].button__ghost_r1cnc.button__loading_r1cnc {
+        } .button__component_1eh12[disabled].button__ghost_1eh12.button__loading_1eh12 {
             color: var(--button-ghost-base-color);
         }