@alfalab/core-components 42.0.0-beta.2 → 42.0.0

package/bottom-sheet/modern/index.css

@@ -1,4 +1,4 @@
-/* hash: 7p4il */
+/* hash: 1fqan */
 :root {
 } /* deprecated */ :root {
     --color-light-bg-accent: #ef3124;
@@ -45,20 +45,23 @@
 } :root {
     --bottom-sheet-in-transition: transform 0.5s cubic-bezier(0.09, 0.91, 0.18, 0.99);
     --bottom-sheet-out-transition: transform 0.3s ease;
-} .bottom-sheet__modal_x9ovx {
+} .bottom-sheet__modal_1vjtp {
     background-color: transparent;
     position: fixed;
     bottom: 0;
     width: 100%;
     max-width: 600px;
     pointer-events: none;
-} .bottom-sheet__wrapper_x9ovx {
+} .bottom-sheet__wrapper_1vjtp {
     transform: translateY(100%);
     overflow: hidden;
     pointer-events: none;
     border-top-right-radius: var(--border-radius-xl);
     border-top-left-radius: var(--border-radius-xl);
-} .bottom-sheet__component_x9ovx {
+    transition: border-radius 0.3s ease;
+} .bottom-sheet__fullscreen_1vjtp {
+    border-radius: 0;
+} .bottom-sheet__component_1vjtp {
     overflow: hidden;
     position: relative;
     display: flex;
@@ -66,16 +69,16 @@
     border-radius: inherit;
     background-color: var(--color-light-bg-primary);
     pointer-events: all;
-} .bottom-sheet__withTransition_x9ovx {
+} .bottom-sheet__withTransition_1vjtp {
     transition: var(--bottom-sheet-out-transition);
-} .bottom-sheet__scrollableContainer_x9ovx {
+} .bottom-sheet__scrollableContainer_1vjtp {
     overflow: auto;
     display: flex;
     flex-direction: column;
     position: relative;
     height: 100%;
     background-color: inherit;
-} .bottom-sheet__marker_x9ovx {
+} .bottom-sheet__marker_1vjtp {
     position: fixed;
     top: var(--gap-2xs);
     left: 50%;
@@ -85,7 +88,7 @@
     transform: translateX(-50%);
     background-color: var(--color-light-graphic-quaternary);
     z-index: 1000;
-} .bottom-sheet__content_x9ovx {
+} .bottom-sheet__content_1vjtp {
     position: relative;
     z-index: 0;
     display: flex;
@@ -94,73 +97,73 @@
     padding: 0 var(--gap-m);
     color: var(--color-light-text-primary);
     background-color: inherit;
-} .bottom-sheet__noHeader_x9ovx {
+} .bottom-sheet__noHeader_1vjtp {
     padding-top: var(--gap-m);
-} .bottom-sheet__noFooter_x9ovx {
+} .bottom-sheet__noFooter_1vjtp {
     padding-bottom: var(--gap-m);
-} .bottom-sheet__scrollLocked_x9ovx {
+} .bottom-sheet__scrollLocked_1vjtp {
     overflow: hidden;
-} .bottom-sheet__hiddenScrollbar_x9ovx {
+} .bottom-sheet__hiddenScrollbar_1vjtp {
     scrollbar-width: none
-} .bottom-sheet__hiddenScrollbar_x9ovx::-webkit-scrollbar {
+} .bottom-sheet__hiddenScrollbar_1vjtp::-webkit-scrollbar {
         width: 0;
         height: 0;
-    } .bottom-sheet__disabledPointerEvents_x9ovx {
+    } .bottom-sheet__disabledPointerEvents_1vjtp {
     pointer-events: none;
-} .bottom-sheet__appear_x9ovx .bottom-sheet__wrapper_x9ovx, .bottom-sheet__enter_x9ovx .bottom-sheet__wrapper_x9ovx {
+} .bottom-sheet__appear_1vjtp .bottom-sheet__wrapper_1vjtp, .bottom-sheet__enter_1vjtp .bottom-sheet__wrapper_1vjtp {
         transition: none;
-    } .bottom-sheet__appearActive_x9ovx .bottom-sheet__wrapper_x9ovx, .bottom-sheet__enterActive_x9ovx .bottom-sheet__wrapper_x9ovx {
+    } .bottom-sheet__appearActive_1vjtp .bottom-sheet__wrapper_1vjtp, .bottom-sheet__enterActive_1vjtp .bottom-sheet__wrapper_1vjtp {
         transition: var(--bottom-sheet-in-transition);
         transform: translateY(0);
-    } .bottom-sheet__enterDone_x9ovx .bottom-sheet__wrapper_x9ovx, .bottom-sheet__appearDone_x9ovx .bottom-sheet__wrapper_x9ovx {
+    } .bottom-sheet__enterDone_1vjtp .bottom-sheet__wrapper_1vjtp, .bottom-sheet__appearDone_1vjtp .bottom-sheet__wrapper_1vjtp {
         transform: translateY(0);
-    } .bottom-sheet__exit_x9ovx .bottom-sheet__wrapper_x9ovx {
+    } .bottom-sheet__exit_1vjtp .bottom-sheet__wrapper_1vjtp {
         transform: translateY(0);
-    } .bottom-sheet__exitActive_x9ovx .bottom-sheet__wrapper_x9ovx {
+    } .bottom-sheet__exitActive_1vjtp .bottom-sheet__wrapper_1vjtp {
         transition: var(--bottom-sheet-out-transition);
         transform: translateY(100%);
-    } .bottom-sheet__background-accent_x9ovx {
+    } .bottom-sheet__background-accent_1vjtp {
             background-color: var(--color-light-bg-accent);
-        } .bottom-sheet__background-info_x9ovx {
+        } .bottom-sheet__background-info_1vjtp {
             background-color: var(--color-light-bg-info);
-        } .bottom-sheet__background-attention-muted_x9ovx {
+        } .bottom-sheet__background-attention-muted_1vjtp {
             background-color: var(--color-light-bg-attention-muted);
-        } .bottom-sheet__background-positive-muted_x9ovx {
+        } .bottom-sheet__background-positive-muted_1vjtp {
             background-color: var(--color-light-bg-positive-muted);
-        } .bottom-sheet__background-negative-muted_x9ovx {
+        } .bottom-sheet__background-negative-muted_1vjtp {
             background-color: var(--color-light-bg-negative-muted);
-        } .bottom-sheet__background-primary_x9ovx {
+        } .bottom-sheet__background-primary_1vjtp {
             background-color: var(--color-light-bg-primary);
-        } .bottom-sheet__background-primary-inverted_x9ovx {
+        } .bottom-sheet__background-primary-inverted_1vjtp {
             background-color: var(--color-light-bg-primary-inverted);
-        } .bottom-sheet__background-secondary_x9ovx {
+        } .bottom-sheet__background-secondary_1vjtp {
             background-color: var(--color-light-bg-secondary);
-        } .bottom-sheet__background-secondary-inverted_x9ovx {
+        } .bottom-sheet__background-secondary-inverted_1vjtp {
             background-color: var(--color-light-bg-secondary-inverted);
-        } .bottom-sheet__background-tertiary_x9ovx {
+        } .bottom-sheet__background-tertiary_1vjtp {
             background-color: var(--color-light-bg-tertiary);
-        } .bottom-sheet__background-tertiary-inverted_x9ovx {
+        } .bottom-sheet__background-tertiary-inverted_1vjtp {
             background-color: var(--color-light-bg-tertiary-inverted);
-        } .bottom-sheet__background-quaternary_x9ovx {
+        } .bottom-sheet__background-quaternary_1vjtp {
             background-color: var(--color-light-bg-quaternary);
-        } .bottom-sheet__background-quaternary-inverted_x9ovx {
+        } .bottom-sheet__background-quaternary-inverted_1vjtp {
             background-color: var(--color-light-bg-quaternary-inverted);
-        } .bottom-sheet__background-specialbg-component_x9ovx {
+        } .bottom-sheet__background-specialbg-component_1vjtp {
             background-color: var(--color-light-specialbg-component);
-        } .bottom-sheet__background-specialbg-component-inverted_x9ovx {
+        } .bottom-sheet__background-specialbg-component-inverted_1vjtp {
             background-color: var(--color-light-specialbg-component-inverted);
-        } .bottom-sheet__background-specialbg-primary-grouped_x9ovx {
+        } .bottom-sheet__background-specialbg-primary-grouped_1vjtp {
             background-color: var(--color-light-specialbg-primary-grouped);
-        } .bottom-sheet__background-specialbg-secondary-grouped_x9ovx {
+        } .bottom-sheet__background-specialbg-secondary-grouped_1vjtp {
             background-color: var(--color-light-specialbg-secondary-grouped);
-        } .bottom-sheet__background-specialbg-tertiary-grouped_x9ovx {
+        } .bottom-sheet__background-specialbg-tertiary-grouped_1vjtp {
             background-color: var(--color-light-specialbg-tertiary-grouped);
-        } .bottom-sheet__background-specialbg-secondary-transparent_x9ovx {
+        } .bottom-sheet__background-specialbg-secondary-transparent_1vjtp {
             background-color: var(--color-light-specialbg-secondary-transparent);
-        } .bottom-sheet__background-specialbg-secondary-transparent-inverted_x9ovx {
+        } .bottom-sheet__background-specialbg-secondary-transparent-inverted_1vjtp {
             background-color: var(--color-light-specialbg-secondary-transparent-inverted);
-        } .bottom-sheet__background-specialbg-tertiary-transparent_x9ovx {
+        } .bottom-sheet__background-specialbg-tertiary-transparent_1vjtp {
             background-color: var(--color-light-specialbg-tertiary-transparent);
-        } .bottom-sheet__background-specialbg-tertiary-transparent-inverted_x9ovx {
+        } .bottom-sheet__background-specialbg-tertiary-transparent-inverted_1vjtp {
             background-color: var(--color-light-specialbg-tertiary-transparent-inverted);
         }

package/bottom-sheet/modern/types.d.ts

@@ -105,6 +105,14 @@ type BottomSheetProps = {
      * @default true
      */
     swipeable?: boolean;
+    /**
+     * Будет ли свайпаться контент
+     */
+    swipeableContent?: boolean;
+    /**
+     * Порог свайпа
+     */
+    swipeThreshold?: number;
     /**
      * Слот слева
      */
@@ -207,6 +215,26 @@ type BottomSheetProps = {
      * Скрыть скроллбар внутри шторки
      */
     hideScrollbar?: boolean;
+    /**
+     * Верхний отступ шторки, если она открыта на максимальную высоту
+     */
+    headerOffset?: number;
+    /**
+     * Содержимое bottom-sheet всегда в DOM
+     */
+    keepMounted?: boolean;
+    /**
+     * Отключает автоматический перевод фокуса на bottom-sheet при открытии
+     */
+    disableAutoFocus?: boolean;
+    /**
+     * Отключает восстановление фокуса на предыдущем элементе после закрытия bottom-sheet
+     */
+    disableRestoreFocus?: boolean;
+    /**
+     * Отключает вызов `onClose` при нажатии Escape
+     */
+    disableEscapeKeyDown?: boolean;
     /**
      * Обработчик закрытия
      */
@@ -216,8 +244,16 @@ type BottomSheetProps = {
      */
     onBack?: () => void;
     /**
-     * Вызывается после притягивания к одной из `magneticAreas`
+     * Вызывается в начале анимации притягивания к одной из `magneticAreas`
      */
     onMagnetize?: (index: number) => void;
+    /**
+     * Вызывается после окончания анимации притягивания
+     */
+    onMagnetizeEnd?: () => void;
+    /**
+     * Вызывается при изменении положения шторки
+     */
+    onOffsetChange?: (offset: number, percent: number) => void;
 };
 export { BottomSheetTitleAlign, BottomSheetProps };

package/bottom-sheet/modern/utils.d.ts

@@ -1,8 +1,8 @@
 declare const TIMEOUT = 500;
 declare const SWIPE_VELOCITY = 0.4;
 declare const MARKER_HEIGHT = 24;
-declare const HEADER_OFFSET = 24;
 declare const CLOSE_OFFSET = 0.2;
 declare const SCROLL_OFFSET = 1;
-declare const convertPercentToNumber: (value: string | number, fullHeight: number) => number;
-export { TIMEOUT, SWIPE_VELOCITY, MARKER_HEIGHT, HEADER_OFFSET, CLOSE_OFFSET, SCROLL_OFFSET, convertPercentToNumber };
+declare const HEADER_OFFSET = 24;
+declare const convertPercentToNumber: (value: string | number, fullHeight: number, headerOffset?: number) => number;
+export { TIMEOUT, SWIPE_VELOCITY, MARKER_HEIGHT, CLOSE_OFFSET, SCROLL_OFFSET, HEADER_OFFSET, convertPercentToNumber };

package/bottom-sheet/modern/utils.js

@@ -1,12 +1,11 @@
 const TIMEOUT = 500;
 const SWIPE_VELOCITY = 0.4;
 const MARKER_HEIGHT = 24;
-/* Верхний отступ шторки, если она открыта на максимальную высоту */
-const HEADER_OFFSET = 24;
 const CLOSE_OFFSET = 0.2;
 const SCROLL_OFFSET = 1;
-const convertPercentToNumber = (value, fullHeight) => {
-    const maxHeight = fullHeight - HEADER_OFFSET;
+const HEADER_OFFSET = 24;
+const convertPercentToNumber = (value, fullHeight, headerOffset = HEADER_OFFSET) => {
+    const maxHeight = fullHeight - headerOffset;
     if (typeof value === 'string') {
         const percent = parseFloat(value) / 100;
         if (percent < 0) {

package/bottom-sheet/types.d.ts

@@ -105,6 +105,14 @@ type BottomSheetProps = {
      * @default true
      */
     swipeable?: boolean;
+    /**
+     * Будет ли свайпаться контент
+     */
+    swipeableContent?: boolean;
+    /**
+     * Порог свайпа
+     */
+    swipeThreshold?: number;
     /**
      * Слот слева
      */
@@ -207,6 +215,26 @@ type BottomSheetProps = {
      * Скрыть скроллбар внутри шторки
      */
     hideScrollbar?: boolean;
+    /**
+     * Верхний отступ шторки, если она открыта на максимальную высоту
+     */
+    headerOffset?: number;
+    /**
+     * Содержимое bottom-sheet всегда в DOM
+     */
+    keepMounted?: boolean;
+    /**
+     * Отключает автоматический перевод фокуса на bottom-sheet при открытии
+     */
+    disableAutoFocus?: boolean;
+    /**
+     * Отключает восстановление фокуса на предыдущем элементе после закрытия bottom-sheet
+     */
+    disableRestoreFocus?: boolean;
+    /**
+     * Отключает вызов `onClose` при нажатии Escape
+     */
+    disableEscapeKeyDown?: boolean;
     /**
      * Обработчик закрытия
      */
@@ -216,8 +244,16 @@ type BottomSheetProps = {
      */
     onBack?: () => void;
     /**
-     * Вызывается после притягивания к одной из `magneticAreas`
+     * Вызывается в начале анимации притягивания к одной из `magneticAreas`
      */
     onMagnetize?: (index: number) => void;
+    /**
+     * Вызывается после окончания анимации притягивания
+     */
+    onMagnetizeEnd?: () => void;
+    /**
+     * Вызывается при изменении положения шторки
+     */
+    onOffsetChange?: (offset: number, percent: number) => void;
 };
 export { BottomSheetTitleAlign, BottomSheetProps };

package/bottom-sheet/utils.d.ts

@@ -1,8 +1,8 @@
 declare const TIMEOUT = 500;
 declare const SWIPE_VELOCITY = 0.4;
 declare const MARKER_HEIGHT = 24;
-declare const HEADER_OFFSET = 24;
 declare const CLOSE_OFFSET = 0.2;
 declare const SCROLL_OFFSET = 1;
-declare const convertPercentToNumber: (value: string | number, fullHeight: number) => number;
-export { TIMEOUT, SWIPE_VELOCITY, MARKER_HEIGHT, HEADER_OFFSET, CLOSE_OFFSET, SCROLL_OFFSET, convertPercentToNumber };
+declare const HEADER_OFFSET = 24;
+declare const convertPercentToNumber: (value: string | number, fullHeight: number, headerOffset?: number) => number;
+export { TIMEOUT, SWIPE_VELOCITY, MARKER_HEIGHT, CLOSE_OFFSET, SCROLL_OFFSET, HEADER_OFFSET, convertPercentToNumber };

package/bottom-sheet/utils.js

@@ -3,12 +3,12 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var TIMEOUT = 500;
 var SWIPE_VELOCITY = 0.4;
 var MARKER_HEIGHT = 24;
-/* Верхний отступ шторки, если она открыта на максимальную высоту */
-var HEADER_OFFSET = 24;
 var CLOSE_OFFSET = 0.2;
 var SCROLL_OFFSET = 1;
-var convertPercentToNumber = function (value, fullHeight) {
-    var maxHeight = fullHeight - HEADER_OFFSET;
+var HEADER_OFFSET = 24;
+var convertPercentToNumber = function (value, fullHeight, headerOffset) {
+    if (headerOffset === void 0) { headerOffset = HEADER_OFFSET; }
+    var maxHeight = fullHeight - headerOffset;
     if (typeof value === 'string') {
         var percent = parseFloat(value) / 100;
         if (percent < 0) {

package/button/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_1uya4","ghost":"button__ghost_1uya4","component":"button__component_1uya4","primary":"button__primary_1uya4","tertiary":"button__tertiary_1uya4","link":"button__link_1uya4"};
+var defaultColors = {"secondary":"button__secondary_ah9i9","ghost":"button__ghost_ah9i9","component":"button__component_ah9i9","primary":"button__primary_ah9i9","tertiary":"button__tertiary_ah9i9","link":"button__link_ah9i9"};
 require('./default.desktop.css');
 
-var styles = {"xxs":"button__xxs_7biea","xs":"button__xs_7biea","s":"button__s_7biea","m":"button__m_7biea","l":"button__l_7biea","xl":"button__xl_7biea"};
+var styles = {"xxs":"button__xxs_fgx6b","xs":"button__xs_fgx6b","s":"button__s_fgx6b","m":"button__m_fgx6b","l":"button__l_fgx6b","xl":"button__xl_fgx6b"};
 require('./desktop.css');
 
-var invertedColors = {"secondary":"button__secondary_15s8z","ghost":"button__ghost_15s8z","component":"button__component_15s8z","primary":"button__primary_15s8z","tertiary":"button__tertiary_15s8z","link":"button__link_15s8z"};
+var invertedColors = {"secondary":"button__secondary_ux57g","ghost":"button__ghost_ux57g","component":"button__component_ux57g","primary":"button__primary_ux57g","tertiary":"button__tertiary_ux57g","link":"button__link_ux57g"};
 require('./inverted.desktop.css');
 
 var colorStyles = {

package/button/Component.mobile.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_1s4s8","ghost":"button__ghost_1s4s8","component":"button__component_1s4s8","primary":"button__primary_1s4s8","tertiary":"button__tertiary_1s4s8","link":"button__link_1s4s8"};
+var defaultColors = {"secondary":"button__secondary_1ii79","ghost":"button__ghost_1ii79","component":"button__component_1ii79","primary":"button__primary_1ii79","tertiary":"button__tertiary_1ii79","link":"button__link_1ii79"};
 require('./default.mobile.css');
 
-var invertedColors = {"secondary":"button__secondary_rdffo","ghost":"button__ghost_rdffo","component":"button__component_rdffo","primary":"button__primary_rdffo","tertiary":"button__tertiary_rdffo","link":"button__link_rdffo"};
+var invertedColors = {"secondary":"button__secondary_1sw37","ghost":"button__ghost_1sw37","component":"button__component_1sw37","primary":"button__primary_1sw37","tertiary":"button__tertiary_1sw37","link":"button__link_1sw37"};
 require('./inverted.mobile.css');
 
-var styles = {"xxs":"button__xxs_17axd","xs":"button__xs_17axd","s":"button__s_17axd","m":"button__m_17axd","l":"button__l_17axd","xl":"button__xl_17axd"};
+var styles = {"xxs":"button__xxs_sucuq","xs":"button__xs_sucuq","s":"button__s_sucuq","m":"button__m_sucuq","l":"button__l_sucuq","xl":"button__xl_sucuq"};
 require('./mobile.css');
 
 var colorStyles = {

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 commonStyles = {"component":"button__component_hbc50","focused":"button__focused_hbc50","loading":"button__loading_hbc50","text":"button__text_hbc50","addons":"button__addons_hbc50","stretchText":"button__stretchText_hbc50","loader":"button__loader_hbc50","xxs":"button__xxs_hbc50","iconOnly":"button__iconOnly_hbc50","xs":"button__xs_hbc50","s":"button__s_hbc50","m":"button__m_hbc50","l":"button__l_hbc50","xl":"button__xl_hbc50","withRightAddons":"button__withRightAddons_hbc50","ghost":"button__ghost_hbc50","withLeftAddons":"button__withLeftAddons_hbc50","link":"button__link_hbc50","block":"button__block_hbc50","nowrap":"button__nowrap_hbc50"};
+var commonStyles = {"component":"button__component_gtf7z","focused":"button__focused_gtf7z","loading":"button__loading_gtf7z","text":"button__text_gtf7z","addons":"button__addons_gtf7z","stretchText":"button__stretchText_gtf7z","loader":"button__loader_gtf7z","xxs":"button__xxs_gtf7z","iconOnly":"button__iconOnly_gtf7z","xs":"button__xs_gtf7z","s":"button__s_gtf7z","m":"button__m_gtf7z","l":"button__l_gtf7z","xl":"button__xl_gtf7z","withRightAddons":"button__withRightAddons_gtf7z","ghost":"button__ghost_gtf7z","withLeftAddons":"button__withLeftAddons_gtf7z","link":"button__link_gtf7z","block":"button__block_gtf7z","nowrap":"button__nowrap_gtf7z"};
 require('./index.css');
 
-var defaultColors = {"accent":"button__accent_6goz0","loader":"button__loader_6goz0","primary":"button__primary_6goz0","secondary":"button__secondary_6goz0","outlined":"button__outlined_6goz0","tertiary":"button__tertiary_6goz0","filled":"button__filled_6goz0","transparent":"button__transparent_6goz0","link":"button__link_6goz0","ghost":"button__ghost_6goz0","component":"button__component_6goz0","loading":"button__loading_6goz0"};
+var defaultColors = {"accent":"button__accent_98dgt","loader":"button__loader_98dgt","primary":"button__primary_98dgt","secondary":"button__secondary_98dgt","outlined":"button__outlined_98dgt","tertiary":"button__tertiary_98dgt","filled":"button__filled_98dgt","transparent":"button__transparent_98dgt","link":"button__link_98dgt","ghost":"button__ghost_98dgt","component":"button__component_98dgt","loading":"button__loading_98dgt"};
 require('./default.css');
 
-var invertedColors = {"accent":"button__accent_f0b4k","loader":"button__loader_f0b4k","primary":"button__primary_f0b4k","secondary":"button__secondary_f0b4k","outlined":"button__outlined_f0b4k","tertiary":"button__tertiary_f0b4k","filled":"button__filled_f0b4k","transparent":"button__transparent_f0b4k","link":"button__link_f0b4k","ghost":"button__ghost_f0b4k","component":"button__component_f0b4k","loading":"button__loading_f0b4k"};
+var invertedColors = {"accent":"button__accent_hrzmd","loader":"button__loader_hrzmd","primary":"button__primary_hrzmd","secondary":"button__secondary_hrzmd","outlined":"button__outlined_hrzmd","tertiary":"button__tertiary_hrzmd","filled":"button__filled_hrzmd","transparent":"button__transparent_hrzmd","link":"button__link_hrzmd","ghost":"button__ghost_hrzmd","component":"button__component_hrzmd","loading":"button__loading_hrzmd"};
 require('./inverted.css');
 
 var colorStyles = {

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

@@ -1,4 +1,4 @@
-/* hash: 1bubw */
+/* hash: 1jupq */
 :root {
 } /* deprecated */ :root {
     --color-light-bg-accent: #ef3124;
@@ -140,136 +140,136 @@
     /* ghost mobile */
 
     /* ghost mobile inverted */
-} .button__accent_6goz0 {
+} .button__accent_98dgt {
     color: var(--button-accent-color);
     background-color: var(--button-accent-base-bg-color);
     border: 1px solid transparent
 } @media (hover: hover) {
-        .button__accent_6goz0:hover {
+        .button__accent_98dgt:hover {
             background-color: var(--button-accent-hover-bg-color);
         }
-    } .button__accent_6goz0:active {
+    } .button__accent_98dgt:active {
         background-color: var(--button-accent-active-bg-color);
-    } .button__accent_6goz0 > .button__loader_6goz0 {
+    } .button__accent_98dgt > .button__loader_98dgt {
         color: var(--button-spinner-static-color);
-    } .button__primary_6goz0 {
+    } .button__primary_98dgt {
     color: var(--button-primary-color);
     background-color: var(--button-primary-base-bg-color);
     border: 1px solid transparent
 } @media (hover: hover) {
-        .button__primary_6goz0:hover {
+        .button__primary_98dgt:hover {
             background-color: var(--button-primary-hover-bg-color);
         }
-    } .button__primary_6goz0:active {
+    } .button__primary_98dgt:active {
         background-color: var(--button-primary-active-bg-color);
-    } .button__primary_6goz0 > .button__loader_6goz0 {
+    } .button__primary_98dgt > .button__loader_98dgt {
         color: var(--button-spinner-primary-color);
-    } .button__secondary_6goz0 {
+    } .button__secondary_98dgt {
     color: var(--button-secondary-color);
     border: 1px solid var(--button-secondary-base-border-color)
-} .button__secondary_6goz0 > .button__loader_6goz0 {
+} .button__secondary_98dgt > .button__loader_98dgt {
         color: var(--button-spinner-default-color);
-    } .button__outlined_6goz0 {
+    } .button__outlined_98dgt {
     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_6goz0:hover {
+        .button__outlined_98dgt:hover {
             background-color: var(--button-outlined-hover-bg-color);
         }
-    } .button__outlined_6goz0:active {
+    } .button__outlined_98dgt:active {
         background-color: var(--button-outlined-active-bg-color);
-    } .button__tertiary_6goz0 {
+    } .button__tertiary_98dgt {
     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_6goz0:hover {
+        .button__tertiary_98dgt:hover {
             background-color: var(--button-tertiary-hover-bg-color);
             border-color: var(--button-tertiary-hover-border-color);
         }
-    } .button__tertiary_6goz0:active {
+    } .button__tertiary_98dgt:active {
         background-color: var(--button-tertiary-active-bg-color);
-    } .button__tertiary_6goz0 > .button__loader_6goz0 {
+    } .button__tertiary_98dgt > .button__loader_98dgt {
         color: var(--button-spinner-default-color);
-    } .button__filled_6goz0 {
+    } .button__filled_98dgt {
     color: var(--color-light-text-primary);
     background-color: var(--color-light-bg-quaternary)
 } @media (hover: hover) {
-        .button__filled_6goz0:hover {
+        .button__filled_98dgt:hover {
             background-color: var(--color-light-bg-quaternary-shade-7);
         }
-    } .button__filled_6goz0:active {
+    } .button__filled_98dgt:active {
         background-color: var(--color-light-bg-quaternary-shade-15);
-    } .button__transparent_6goz0 {
+    } .button__transparent_98dgt {
     color: var(--color-light-text-primary);
     background-color: var(--color-light-bg-primary-inverted-alpha-10)
 } @media (hover: hover) {
-        .button__transparent_6goz0:hover {
+        .button__transparent_98dgt:hover {
             background-color: var(--color-light-bg-primary-inverted-alpha-20);
         }
-    } .button__transparent_6goz0:active {
+    } .button__transparent_98dgt:active {
         background-color: var(--color-light-bg-primary-inverted-alpha-40);
-    } .button__link_6goz0 {
+    } .button__link_98dgt {
     color: var(--button-link-base-color);
     background-color: transparent;
     border: 1px solid transparent
 } @media (hover: hover) {
-        .button__link_6goz0:hover {
+        .button__link_98dgt:hover {
             background-color: var(--button-link-hover-bg-color);
         }
-    } .button__link_6goz0:active {
+    } .button__link_98dgt:active {
         background-color: var(--button-link-active-bg-color);
-    } .button__link_6goz0 > .button__loader_6goz0 {
+    } .button__link_98dgt > .button__loader_98dgt {
         color: var(--button-spinner-default-color);
-    } .button__ghost_6goz0 {
+    } .button__ghost_98dgt {
     color: var(--button-ghost-base-color)
 } @media (hover: hover) {
-        .button__ghost_6goz0:hover {
+        .button__ghost_98dgt:hover {
             color: var(--button-ghost-hover-color);
         }
-    } .button__ghost_6goz0 > .button__loader_6goz0 {
+    } .button__ghost_98dgt > .button__loader_98dgt {
         color: var(--button-spinner-default-color);
-    } /* Disabled */ .button__component_6goz0[disabled].button__accent_6goz0 {
+    } /* Disabled */ .button__component_98dgt[disabled].button__accent_98dgt {
         color: var(--button-accent-disabled-color);
         background-color: var(--button-accent-disabled-bg-color)
-    } .button__component_6goz0[disabled].button__accent_6goz0.button__loading_6goz0 {
+    } .button__component_98dgt[disabled].button__accent_98dgt.button__loading_98dgt {
             background-color: var(--button-accent-base-bg-color);
-        } .button__component_6goz0[disabled].button__primary_6goz0.button__loading_6goz0 {
+        } .button__component_98dgt[disabled].button__primary_98dgt.button__loading_98dgt {
             background-color: var(--button-primary-base-bg-color);
-        } .button__component_6goz0[disabled].button__secondary_6goz0 {
+        } .button__component_98dgt[disabled].button__secondary_98dgt {
         border-color: var(--button-secondary-disabled-border-color)
-    } .button__component_6goz0[disabled].button__secondary_6goz0.button__loading_6goz0 {
+    } .button__component_98dgt[disabled].button__secondary_98dgt.button__loading_98dgt {
             color: var(--button-secondary-color);
             background-color: var(--button-secondary-base-bg-color);
             border-color: var(--button-secondary-base-border-color);
-        } .button__component_6goz0[disabled].button__outlined_6goz0 {
+        } .button__component_98dgt[disabled].button__outlined_98dgt {
         color: var(--button-outlined-disabled-color);
         background-color: var(--button-outlined-disabled-bg-color);
         border-color: var(--button-outlined-disabled-border-color)
-    } .button__component_6goz0[disabled].button__outlined_6goz0.button__loading_6goz0 {
+    } .button__component_98dgt[disabled].button__outlined_98dgt.button__loading_98dgt {
             color: var(--button-outlined-color);
-        } .button__component_6goz0[disabled].button__tertiary_6goz0 {
+        } .button__component_98dgt[disabled].button__tertiary_98dgt {
         background-color: var(--button-tertiary-disabled-bg-color)
-    } .button__component_6goz0[disabled].button__tertiary_6goz0.button__loading_6goz0 {
+    } .button__component_98dgt[disabled].button__tertiary_98dgt.button__loading_98dgt {
             color: var(--button-tertiary-color);
             border-color: var(--button-tertiary-base-border-color);
-        } .button__component_6goz0[disabled].button__filled_6goz0 {
+        } .button__component_98dgt[disabled].button__filled_98dgt {
         color: var(--color-light-text-primary-alpha-30);
         background-color: var(--color-light-bg-quaternary-alpha-30)
-    } .button__component_6goz0[disabled].button__filled_6goz0.button__loading_6goz0 {
+    } .button__component_98dgt[disabled].button__filled_98dgt.button__loading_98dgt {
             color: var(--color-light-text-primary);
             background-color: var(--color-light-bg-quaternary);
-        } .button__component_6goz0[disabled].button__transparent_6goz0 {
+        } .button__component_98dgt[disabled].button__transparent_98dgt {
         color: var(--color-light-text-primary-alpha-30);
         background-color: var(--color-light-bg-primary-inverted-alpha-3)
-    } .button__component_6goz0[disabled].button__transparent_6goz0.button__loading_6goz0 {
+    } .button__component_98dgt[disabled].button__transparent_98dgt.button__loading_98dgt {
             color: var(--color-light-text-primary);
             background-color: var(--color-light-bg-primary-inverted-alpha-10);
-        } .button__component_6goz0[disabled].button__link_6goz0 {
+        } .button__component_98dgt[disabled].button__link_98dgt {
         background-color: transparent
-    } .button__component_6goz0[disabled].button__link_6goz0.button__loading_6goz0 {
+    } .button__component_98dgt[disabled].button__link_98dgt.button__loading_98dgt {
             color: var(--button-link-base-color);
-        } .button__component_6goz0[disabled].button__ghost_6goz0.button__loading_6goz0 {
+        } .button__component_98dgt[disabled].button__ghost_98dgt.button__loading_98dgt {
             color: var(--button-ghost-base-color);
         }