@alfalab/core-components 48.24.0 → 48.25.0

package/bottom-sheet/modern/index.css

@@ -1,4 +1,4 @@
-/* hash: 1sbua */
+/* hash: 1oo2k */
 :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;
@@ -66,25 +66,25 @@
     /* header */
 
     /* footer */
-} .bottom-sheet__modal_1cs3s {
+} .bottom-sheet__modal_1xixh {
     bottom: var(--gap-0);
     width: 100%;
     max-width: 600px;
     pointer-events: none;
     touch-action: none;
-} .bottom-sheet__modal_1cs3s.bottom-sheet__modal_1cs3s {
+} .bottom-sheet__modal_1xixh.bottom-sheet__modal_1xixh {
     background-color: transparent;
     position: fixed;
-} .bottom-sheet__wrapper_1cs3s {
+} .bottom-sheet__wrapper_1xixh {
     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_1cs3s {
+} .bottom-sheet__fullscreen_1xixh {
     border-radius: 0;
-} .bottom-sheet__component_1cs3s {
+} .bottom-sheet__component_1xixh {
     position: relative;
     display: flex;
     flex-direction: column;
@@ -92,9 +92,9 @@
     background-color: var(--color-light-modal-bg-primary);
     pointer-events: all;
     box-shadow: var(--bottom-sheet-shadow);
-} .bottom-sheet__withTransition_1cs3s {
+} .bottom-sheet__withTransition_1xixh {
     transition: var(--bottom-sheet-out-transition);
-} .bottom-sheet__scrollableContainer_1cs3s {
+} .bottom-sheet__scrollableContainer_1xixh {
     overflow: auto;
     display: flex;
     flex-direction: column;
@@ -103,7 +103,7 @@
     background-color: inherit;
     border-radius: inherit;
     overscroll-behavior: contain;
-} .bottom-sheet__marker_1cs3s {
+} .bottom-sheet__marker_1xixh {
     position: fixed;
     top: var(--gap-4);
     right: var(--gap-0);
@@ -111,11 +111,11 @@
     z-index: 1000;
     width: 36px;
     margin: var(--gap-0) auto;
-} .bottom-sheet__defaultMarker_1cs3s {
+} .bottom-sheet__defaultMarker_1xixh {
     height: 4px;
     border-radius: var(--border-radius-20);
     background-color: var(--color-light-neutral-translucent-300);
-} .bottom-sheet__content_1cs3s {
+} .bottom-sheet__content_1xixh {
     position: relative;
     z-index: 0;
     display: flex;
@@ -125,75 +125,75 @@
     color: var(--color-light-text-primary);
     background-color: inherit;
     border-radius: inherit;
-} .bottom-sheet__noHeader_1cs3s {
+} .bottom-sheet__noHeader_1xixh {
     padding-top: var(--gap-16);
-} .bottom-sheet__noFooter_1cs3s {
+} .bottom-sheet__noFooter_1xixh {
     padding-bottom: var(--gap-16);
-} .bottom-sheet__scrollLocked_1cs3s {
+} .bottom-sheet__scrollLocked_1xixh {
     overflow: hidden;
-} .bottom-sheet__hiddenScrollbar_1cs3s {
+} .bottom-sheet__hiddenScrollbar_1xixh {
     scrollbar-width: none
-} .bottom-sheet__hiddenScrollbar_1cs3s::-webkit-scrollbar {
+} .bottom-sheet__hiddenScrollbar_1xixh::-webkit-scrollbar {
         width: 0;
         height: 0;
-    } .bottom-sheet__disabledPointerEvents_1cs3s {
+    } .bottom-sheet__disabledPointerEvents_1xixh {
     pointer-events: none;
-} .bottom-sheet__appear_1cs3s .bottom-sheet__wrapper_1cs3s, .bottom-sheet__enter_1cs3s .bottom-sheet__wrapper_1cs3s {
+} .bottom-sheet__appear_1xixh .bottom-sheet__wrapper_1xixh, .bottom-sheet__enter_1xixh .bottom-sheet__wrapper_1xixh {
         transition: none;
-    } .bottom-sheet__appearActive_1cs3s .bottom-sheet__wrapper_1cs3s, .bottom-sheet__enterActive_1cs3s .bottom-sheet__wrapper_1cs3s {
+    } .bottom-sheet__appearActive_1xixh .bottom-sheet__wrapper_1xixh, .bottom-sheet__enterActive_1xixh .bottom-sheet__wrapper_1xixh {
         transition: var(--bottom-sheet-in-transition);
         transform: translateY(0);
-    } .bottom-sheet__enterDone_1cs3s .bottom-sheet__wrapper_1cs3s, .bottom-sheet__appearDone_1cs3s .bottom-sheet__wrapper_1cs3s {
+    } .bottom-sheet__enterDone_1xixh .bottom-sheet__wrapper_1xixh, .bottom-sheet__appearDone_1xixh .bottom-sheet__wrapper_1xixh {
         transform: translateY(0);
-    } .bottom-sheet__exit_1cs3s .bottom-sheet__wrapper_1cs3s {
+    } .bottom-sheet__exit_1xixh .bottom-sheet__wrapper_1xixh {
         transform: translateY(0);
-    } .bottom-sheet__exitActive_1cs3s .bottom-sheet__wrapper_1cs3s {
+    } .bottom-sheet__exitActive_1xixh .bottom-sheet__wrapper_1xixh {
         transition: var(--bottom-sheet-out-transition);
         transform: translateY(100%);
-    } .bottom-sheet__safeAreaBottom_1cs3s {
+    } .bottom-sheet__safeAreaBottom_1xixh {
     padding-bottom: var(--sab);
-} .bottom-sheet__background-accent_1cs3s {
+} .bottom-sheet__background-accent_1xixh {
             background-color: var(--color-light-bg-accent);
-        } .bottom-sheet__background-info_1cs3s {
+        } .bottom-sheet__background-info_1xixh {
             background-color: var(--color-light-bg-info);
-        } .bottom-sheet__background-attention-muted_1cs3s {
+        } .bottom-sheet__background-attention-muted_1xixh {
             background-color: var(--color-light-bg-attention-muted);
-        } .bottom-sheet__background-positive-muted_1cs3s {
+        } .bottom-sheet__background-positive-muted_1xixh {
             background-color: var(--color-light-bg-positive-muted);
-        } .bottom-sheet__background-negative-muted_1cs3s {
+        } .bottom-sheet__background-negative-muted_1xixh {
             background-color: var(--color-light-bg-negative-muted);
-        } .bottom-sheet__background-primary_1cs3s {
+        } .bottom-sheet__background-primary_1xixh {
             background-color: var(--color-light-bg-primary);
-        } .bottom-sheet__background-primary-inverted_1cs3s {
+        } .bottom-sheet__background-primary-inverted_1xixh {
             background-color: var(--color-light-bg-primary-inverted);
-        } .bottom-sheet__background-secondary_1cs3s {
+        } .bottom-sheet__background-secondary_1xixh {
             background-color: var(--color-light-bg-secondary);
-        } .bottom-sheet__background-secondary-inverted_1cs3s {
+        } .bottom-sheet__background-secondary-inverted_1xixh {
             background-color: var(--color-light-bg-secondary-inverted);
-        } .bottom-sheet__background-tertiary_1cs3s {
+        } .bottom-sheet__background-tertiary_1xixh {
             background-color: var(--color-light-bg-tertiary);
-        } .bottom-sheet__background-tertiary-inverted_1cs3s {
+        } .bottom-sheet__background-tertiary-inverted_1xixh {
             background-color: var(--color-light-bg-tertiary-inverted);
-        } .bottom-sheet__background-quaternary_1cs3s {
+        } .bottom-sheet__background-quaternary_1xixh {
             background-color: var(--color-light-bg-quaternary);
-        } .bottom-sheet__background-quaternary-inverted_1cs3s {
+        } .bottom-sheet__background-quaternary-inverted_1xixh {
             background-color: var(--color-light-bg-quaternary-inverted);
-        } .bottom-sheet__background-specialbg-component_1cs3s {
+        } .bottom-sheet__background-specialbg-component_1xixh {
             background-color: var(--color-light-specialbg-component);
-        } .bottom-sheet__background-specialbg-component-inverted_1cs3s {
+        } .bottom-sheet__background-specialbg-component-inverted_1xixh {
             background-color: var(--color-light-specialbg-component-inverted);
-        } .bottom-sheet__background-specialbg-primary-grouped_1cs3s {
+        } .bottom-sheet__background-specialbg-primary-grouped_1xixh {
             background-color: var(--color-light-specialbg-primary-grouped);
-        } .bottom-sheet__background-specialbg-secondary-grouped_1cs3s {
+        } .bottom-sheet__background-specialbg-secondary-grouped_1xixh {
             background-color: var(--color-light-specialbg-secondary-grouped);
-        } .bottom-sheet__background-specialbg-tertiary-grouped_1cs3s {
+        } .bottom-sheet__background-specialbg-tertiary-grouped_1xixh {
             background-color: var(--color-light-specialbg-tertiary-grouped);
-        } .bottom-sheet__background-specialbg-secondary-transparent_1cs3s {
+        } .bottom-sheet__background-specialbg-secondary-transparent_1xixh {
             background-color: var(--color-light-specialbg-secondary-transparent);
-        } .bottom-sheet__background-specialbg-secondary-transparent-inverted_1cs3s {
+        } .bottom-sheet__background-specialbg-secondary-transparent-inverted_1xixh {
             background-color: var(--color-light-specialbg-secondary-transparent-inverted);
-        } .bottom-sheet__background-specialbg-tertiary-transparent_1cs3s {
+        } .bottom-sheet__background-specialbg-tertiary-transparent_1xixh {
             background-color: var(--color-light-specialbg-tertiary-transparent);
-        } .bottom-sheet__background-specialbg-tertiary-transparent-inverted_1cs3s {
+        } .bottom-sheet__background-specialbg-tertiary-transparent-inverted_1xixh {
             background-color: var(--color-light-specialbg-tertiary-transparent-inverted);
         }

package/bottom-sheet/modern/index.js

@@ -15,3 +15,4 @@ import '../../backdrop/modern';
 import './consts/swipeConsts.js';
 import './enums/swipeEnums.js';
 import './hooks/use-visualviewport-size.js';
+import 'use-sync-external-store/shim';

package/bottom-sheet/moderncssm/component.js

@@ -9,7 +9,7 @@ import { Footer } from './components/footer/Component.js';
 import { Header } from './components/header/Component.js';
 import { SwipeableBackdrop } from './components/swipeable-backdrop/Component.js';
 import { horizontalDirections } from './consts/swipeConsts.js';
-import { useVisibleViewportSize } from './hooks/use-visualviewport-size.js';
+import { useVisualViewportSize } from './hooks/use-visualviewport-size.js';
 import { convertPercentToNumber, TIMEOUT, MARKER_HEIGHT, SCROLL_OFFSET, SWIPE_VELOCITY, CLOSE_OFFSET } from './utils.js';
 import styles from './index.module.css';
 import './components/footer/index.module.css';
@@ -17,13 +17,14 @@ import '../../navigation-bar-private/moderncssm';
 import './components/header/index.module.css';
 import '../../backdrop/moderncssm';
 import './enums/swipeEnums.js';
+import 'use-sync-external-store/shim';
 
 const { isNil } = fnUtils;
 const adjustContainerHeightDefault = (value) => value;
 const BottomSheet = forwardRef(({ open, title, container, usePortal, backgroundColor, titleSize = 'default', subtitle, actionButton, contentClassName, containerClassName, containerProps, headerClassName, footerClassName, addonClassName, closerClassName, backerClassName, modalClassName, modalWrapperClassName, className, leftAddons, rightAddons, bottomAddons, hasCloser, hasBacker, titleAlign = 'left', trimTitle, stickyHeader, stickyFooter = true, initialHeight = 'default', hideOverlay, hideScrollbar, hideHeader, disableOverlayClick, disableBlockingScroll, disableFocusLock, children, zIndex, transitionProps = {}, magneticAreas: magneticAreasProp, initialActiveAreaIndex, dataTestId, swipeable = true, swipeableContent = true, swipeThreshold = 5, scrollLocked: scrollLockedProp, backdropProps, scrollableContainerRef = () => null, bottomSheetInstanceRef, sheetContainerRef = () => null, headerOffset = 24, adjustContainerHeight = adjustContainerHeightDefault, onClose, onBack, onMagnetize, onSwipeStart, onSwipeEnd, disableRestoreFocus, disableAutoFocus, disableEscapeKeyDown, keepMounted, onMagnetizeEnd, onOffsetChange, swipeableMarker, swipeableMarkerClassName, backButtonProps, iOSLock = false, virtualKeyboard = false, }, ref) => {
     const windowHeight = use100vh() ?? 0;
-    const visibleViewportSize = useVisibleViewportSize(virtualKeyboard);
-    let fullHeight = virtualKeyboard ? visibleViewportSize?.height ?? 0 : windowHeight;
+    const visualViewportSize = useVisualViewportSize();
+    let fullHeight = virtualKeyboard ? visualViewportSize?.height ?? 0 : windowHeight;
     // Хук use100vh рассчитывает высоту вьюпорта в useEffect, поэтому на первый рендер всегда возвращает null.
     const isFirstRender = fullHeight === 0;
     fullHeight = adjustContainerHeight(fullHeight);
@@ -367,8 +368,8 @@ const BottomSheet = forwardRef(({ open, title, container, usePortal, backgroundC
             ? `${lastMagneticArea}px`
             : 'unset',
         maxHeight: isFirstRender ? 0 : `${lastMagneticArea}px`,
-        marginBottom: virtualKeyboard && visibleViewportSize && windowHeight > visibleViewportSize.height
-            ? windowHeight - visibleViewportSize.height - visibleViewportSize.offsetTop
+        marginBottom: virtualKeyboard && visualViewportSize && windowHeight > visualViewportSize.height
+            ? windowHeight - visualViewportSize.height - visualViewportSize.offsetTop
             : undefined,
     });
     const renderMarker = () => {

package/bottom-sheet/moderncssm/hooks/index.d.ts

@@ -1 +1 @@
-export { useVisibleViewportSize } from "./use-visualviewport-size";
+export { useVisualViewportSize, useVisibleViewportSize } from "./use-visualviewport-size";

package/bottom-sheet/moderncssm/hooks/index.js

@@ -1,3 +1,3 @@
-export { useVisibleViewportSize } from './use-visualviewport-size.js';
-import 'react';
+export { useVisibleViewportSize, useVisualViewportSize } from './use-visualviewport-size.js';
+import 'use-sync-external-store/shim';
 import '../../../shared/moderncssm';

package/bottom-sheet/moderncssm/hooks/use-visualviewport-size.d.ts

@@ -1,3 +1,7 @@
-type VisualViewportSize = Pick<VisualViewport, 'height' | 'offsetTop'>;
+type VisualViewportSize = Pick<VisualViewport, 'height' | 'offsetLeft' | 'offsetTop' | 'pageLeft' | 'pageTop' | 'scale' | 'width'>;
+declare function useVisualViewportSize(): VisualViewportSize | null;
+/**
+ * @deprecated use {@link useVisualViewportSize}
+ */
 declare function useVisibleViewportSize(enabled?: boolean): VisualViewportSize | null;
-export { useVisibleViewportSize };
+export { useVisualViewportSize, useVisibleViewportSize };

package/bottom-sheet/moderncssm/hooks/use-visualviewport-size.js

@@ -1,27 +1,55 @@
-import { useState, useEffect } from 'react';
-import { isClient, fnUtils } from '../../../shared/moderncssm';
+import { useSyncExternalStore } from 'use-sync-external-store/shim';
+import { isClient, isNullable, noop } from '../../../shared/moderncssm';
 
-const measureVisualViewport = (visualViewport) => {
-    if (!visualViewport)
+let visualViewportSize = isClient() ? getVisualViewportSize() : null;
+let listeners = [];
+function getVisualViewportSize() {
+    const { visualViewport } = window;
+    if (isNullable(visualViewport)) {
         return null;
-    const { height, offsetTop } = visualViewport;
-    return { height, offsetTop };
-};
+    }
+    const { height, offsetLeft, offsetTop, pageLeft, pageTop, scale, width } = visualViewport;
+    return { height, offsetLeft, offsetTop, pageLeft, pageTop, scale, width };
+}
+function callback() {
+    visualViewportSize = getVisualViewportSize();
+    listeners.forEach((listener) => {
+        listener();
+    });
+}
+function subscribe(listener) {
+    const { visualViewport } = window;
+    if (isNullable(visualViewport)) {
+        return noop;
+    }
+    if (listeners.length === 0) {
+        visualViewport.addEventListener('resize', callback);
+        visualViewport.addEventListener('scroll', callback);
+    }
+    listeners = [...listeners, listener];
+    return () => {
+        listeners = listeners.filter((l) => l !== listener);
+        if (listeners.length === 0) {
+            visualViewport.removeEventListener('resize', callback);
+            visualViewport.removeEventListener('scroll', callback);
+        }
+    };
+}
+function getSnapshot() {
+    return visualViewportSize;
+}
+function getServerSnapshot() {
+    return null;
+}
+function useVisualViewportSize() {
+    return useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot);
+}
+/**
+ * @deprecated use {@link useVisualViewportSize}
+ */
 function useVisibleViewportSize(enabled = false) {
-    const [size, setSize] = useState(() => isClient() ? measureVisualViewport(window.visualViewport) : null);
-    useEffect(() => {
-        const { visualViewport } = window;
-        if (!isClient() || !enabled || !visualViewport)
-            return fnUtils.noop;
-        const listener = (event) => setSize(measureVisualViewport(event.target));
-        visualViewport.addEventListener('resize', listener);
-        visualViewport.addEventListener('scroll', listener);
-        return () => {
-            visualViewport.removeEventListener('resize', listener);
-            visualViewport.removeEventListener('scroll', listener);
-        };
-    }, [enabled]);
-    return size;
+    const size = useVisualViewportSize();
+    return enabled ? size : null;
 }
 
-export { useVisibleViewportSize };
+export { useVisibleViewportSize, useVisualViewportSize };

package/bottom-sheet/moderncssm/index.js

@@ -17,4 +17,5 @@ import '../../backdrop/moderncssm';
 import './consts/swipeConsts.js';
 import './enums/swipeEnums.js';
 import './hooks/use-visualviewport-size.js';
+import 'use-sync-external-store/shim';
 import './index.module.css';

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_13njj","loader":"button__loader_13njj","primary":"button__primary_13njj","hint":"button__hint_13njj","secondary":"button__secondary_13njj","outlined":"button__outlined_13njj","tertiary":"button__tertiary_13njj","filled":"button__filled_13njj","transparent":"button__transparent_13njj","link":"button__link_13njj","text":"button__text_13njj","ghost":"button__ghost_13njj","component":"button__component_13njj","loading":"button__loading_13njj"};
+var defaultColors = {"accent":"button__accent_1pr6m","loader":"button__loader_1pr6m","primary":"button__primary_1pr6m","hint":"button__hint_1pr6m","secondary":"button__secondary_1pr6m","outlined":"button__outlined_1pr6m","tertiary":"button__tertiary_1pr6m","filled":"button__filled_1pr6m","transparent":"button__transparent_1pr6m","link":"button__link_1pr6m","text":"button__text_1pr6m","ghost":"button__ghost_1pr6m","component":"button__component_1pr6m","loading":"button__loading_1pr6m"};
 require('./default.css');
 
-var commonStyles = {"component":"button__component_mgk0r","hug":"button__hug_mgk0r","fill":"button__fill_mgk0r","hint":"button__hint_mgk0r","allowBackdropBlur":"button__allowBackdropBlur_mgk0r","secondary":"button__secondary_mgk0r","accent":"button__accent_mgk0r","primary":"button__primary_mgk0r","focused":"button__focused_mgk0r","loading":"button__loading_mgk0r","label":"button__label_mgk0r","addons":"button__addons_mgk0r","stretchText":"button__stretchText_mgk0r","loader":"button__loader_mgk0r","size-32":"button__size-32_mgk0r","iconOnly":"button__iconOnly_mgk0r","size-40":"button__size-40_mgk0r","size-48":"button__size-48_mgk0r","size-56":"button__size-56_mgk0r","size-64":"button__size-64_mgk0r","size-72":"button__size-72_mgk0r","withRightAddons":"button__withRightAddons_mgk0r","ghost":"button__ghost_mgk0r","text":"button__text_mgk0r","withLeftAddons":"button__withLeftAddons_mgk0r","link":"button__link_mgk0r","transparent":"button__transparent_mgk0r","block":"button__block_mgk0r","nowrap":"button__nowrap_mgk0r","rounded":"button__rounded_mgk0r"};
+var commonStyles = {"component":"button__component_1dpt6","hug":"button__hug_1dpt6","fill":"button__fill_1dpt6","hint":"button__hint_1dpt6","allowBackdropBlur":"button__allowBackdropBlur_1dpt6","secondary":"button__secondary_1dpt6","accent":"button__accent_1dpt6","primary":"button__primary_1dpt6","focused":"button__focused_1dpt6","loading":"button__loading_1dpt6","label":"button__label_1dpt6","addons":"button__addons_1dpt6","stretchText":"button__stretchText_1dpt6","loader":"button__loader_1dpt6","size-32":"button__size-32_1dpt6","iconOnly":"button__iconOnly_1dpt6","size-40":"button__size-40_1dpt6","size-48":"button__size-48_1dpt6","size-56":"button__size-56_1dpt6","size-64":"button__size-64_1dpt6","size-72":"button__size-72_1dpt6","withRightAddons":"button__withRightAddons_1dpt6","ghost":"button__ghost_1dpt6","text":"button__text_1dpt6","withLeftAddons":"button__withLeftAddons_1dpt6","link":"button__link_1dpt6","transparent":"button__transparent_1dpt6","block":"button__block_1dpt6","nowrap":"button__nowrap_1dpt6","rounded":"button__rounded_1dpt6"};
 require('./index.css');
 
-var invertedColors = {"accent":"button__accent_q5g38","loader":"button__loader_q5g38","primary":"button__primary_q5g38","hint":"button__hint_q5g38","secondary":"button__secondary_q5g38","outlined":"button__outlined_q5g38","tertiary":"button__tertiary_q5g38","filled":"button__filled_q5g38","transparent":"button__transparent_q5g38","link":"button__link_q5g38","text":"button__text_q5g38","ghost":"button__ghost_q5g38","component":"button__component_q5g38","loading":"button__loading_q5g38"};
+var invertedColors = {"accent":"button__accent_1c935","loader":"button__loader_1c935","primary":"button__primary_1c935","hint":"button__hint_1c935","secondary":"button__secondary_1c935","outlined":"button__outlined_1c935","tertiary":"button__tertiary_1c935","filled":"button__filled_1c935","transparent":"button__transparent_1c935","link":"button__link_1c935","text":"button__text_1c935","ghost":"button__ghost_1c935","component":"button__component_1c935","loading":"button__loading_1c935"};
 require('./inverted.css');
 
 var colorStyles = {

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

@@ -161,155 +161,155 @@
     /* text mobile inverted */
 
     /* loader mobile */
-} .button__accent_13njj {
+} .button__accent_1pr6m {
     color: var(--button-accent-color);
     background-color: var(--button-accent-base-bg-color);
     border: 1px solid transparent
 } @media (hover: hover) {
-        .button__accent_13njj:hover {
+        .button__accent_1pr6m:hover {
             background-color: var(--button-accent-hover-bg-color);
         }
-    } .button__accent_13njj:active {
+    } .button__accent_1pr6m:active {
         background-color: var(--button-accent-active-bg-color);
-    } .button__accent_13njj > .button__loader_13njj {
+    } .button__accent_1pr6m > .button__loader_1pr6m {
         color: var(--button-spinner-static-color);
-    } .button__primary_13njj {
+    } .button__primary_1pr6m {
     border: 1px solid transparent
-} .button__primary_13njj .button__hint_13njj {
+} .button__primary_1pr6m .button__hint_1pr6m {
         color: var(--button-primary-hint-color);
-    } .button__secondary_13njj {
+    } .button__secondary_1pr6m {
     color: var(--button-secondary-color);
     border: 1px solid var(--button-secondary-base-border-color)
-} .button__secondary_13njj > .button__loader_13njj {
+} .button__secondary_1pr6m > .button__loader_1pr6m {
         color: var(--button-spinner-default-color);
-    } .button__secondary_13njj .button__hint_13njj {
+    } .button__secondary_1pr6m .button__hint_1pr6m {
         color: var(--button-secondary-hint-color);
-    } .button__outlined_13njj {
+    } .button__outlined_1pr6m {
     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_13njj:hover {
+        .button__outlined_1pr6m:hover {
             background-color: var(--button-outlined-hover-bg-color);
             border-color: var(--button-outlined-hover-border-color);
         }
-    } .button__outlined_13njj:active {
+    } .button__outlined_1pr6m:active {
         background-color: var(--button-outlined-active-bg-color);
-    } .button__outlined_13njj > .button__loader_13njj {
+    } .button__outlined_1pr6m > .button__loader_1pr6m {
         color: var(--button-spinner-default-color);
-    } .button__outlined_13njj .button__hint_13njj {
+    } .button__outlined_1pr6m .button__hint_1pr6m {
         color: var(--button-outlined-hint-color);
-    } .button__tertiary_13njj {
+    } .button__tertiary_1pr6m {
     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_13njj:hover {
+        .button__tertiary_1pr6m:hover {
             background-color: var(--button-tertiary-hover-bg-color);
             border-color: var(--button-tertiary-hover-border-color);
         }
-    } .button__tertiary_13njj:active {
+    } .button__tertiary_1pr6m:active {
         background-color: var(--button-tertiary-active-bg-color);
-    } .button__tertiary_13njj > .button__loader_13njj {
+    } .button__tertiary_1pr6m > .button__loader_1pr6m {
         color: var(--button-spinner-default-color);
-    } .button__tertiary_13njj .button__hint_13njj {
+    } .button__tertiary_1pr6m .button__hint_1pr6m {
         color: var(--button-tertiary-hint-color);
-    } .button__filled_13njj {
+    } .button__filled_1pr6m {
     color: var(--color-light-text-primary);
     background-color: var(--color-light-neutral-translucent-300);
     border: 1px solid transparent
 } @media (hover: hover) {
-        .button__filled_13njj:hover {
+        .button__filled_1pr6m:hover {
             background-color: var(--color-light-neutral-translucent-300-hover);
         }
-    } .button__filled_13njj:active {
+    } .button__filled_1pr6m:active {
         background-color: var(--color-light-neutral-translucent-300-press);
-    } .button__filled_13njj > .button__loader_13njj {
+    } .button__filled_1pr6m > .button__loader_1pr6m {
         color: var(--button-spinner-default-color);
-    } .button__transparent_13njj {
+    } .button__transparent_1pr6m {
     color: var(--button-transparent-base-color);
     background-color: transparent;
     border: 1px solid transparent
 } @media (hover: hover) {
-        .button__transparent_13njj:hover {
+        .button__transparent_1pr6m:hover {
             background-color: var(--button-transparent-hover-bg-color);
         }
-    } .button__transparent_13njj:active {
+    } .button__transparent_1pr6m:active {
         background-color: var(--button-transparent-active-bg-color);
-    } .button__transparent_13njj > .button__loader_13njj {
+    } .button__transparent_1pr6m > .button__loader_1pr6m {
         color: var(--button-spinner-default-color);
-    } .button__transparent_13njj .button__hint_13njj {
+    } .button__transparent_1pr6m .button__hint_1pr6m {
         color: var(--button-transparent-base-hint-color);
-    } .button__link_13njj {
+    } .button__link_1pr6m {
     color: var(--button-link-base-color);
     background-color: transparent;
     border: 1px solid transparent
 } @media (hover: hover) {
-        .button__link_13njj:hover {
+        .button__link_1pr6m:hover {
             background-color: var(--button-link-hover-bg-color);
         }
-    } .button__link_13njj:active {
+    } .button__link_1pr6m:active {
         background-color: var(--button-link-active-bg-color);
-    } .button__link_13njj > .button__loader_13njj {
+    } .button__link_1pr6m > .button__loader_1pr6m {
         color: var(--button-spinner-default-color);
-    } .button__text_13njj {
+    } .button__text_1pr6m {
     background-color: transparent;
     color: var(--button-text-base-color)
 } @media (hover: hover) {
-        .button__text_13njj:hover {
+        .button__text_1pr6m:hover {
             color: var(--button-text-hover-color);
         }
-    } .button__text_13njj > .button__loader_13njj {
+    } .button__text_1pr6m > .button__loader_1pr6m {
         color: var(--button-spinner-default-color);
-    } .button__text_13njj .button__hint_13njj {
+    } .button__text_1pr6m .button__hint_1pr6m {
         color: var(--button-text-base-hint-color);
-    } .button__ghost_13njj {
+    } .button__ghost_1pr6m {
     background-color: transparent;
     color: var(--button-ghost-base-color)
 } @media (hover: hover) {
-        .button__ghost_13njj:hover {
+        .button__ghost_1pr6m:hover {
             color: var(--button-ghost-hover-color);
         }
-    } .button__ghost_13njj > .button__loader_13njj {
+    } .button__ghost_1pr6m > .button__loader_1pr6m {
         color: var(--button-spinner-default-color);
-    } /* Disabled */ .button__component_13njj[disabled].button__accent_13njj {
+    } /* Disabled */ .button__component_1pr6m[disabled].button__accent_1pr6m {
         color: var(--button-accent-disabled-color);
         background-color: var(--button-accent-disabled-bg-color)
-    } .button__component_13njj[disabled].button__accent_13njj.button__loading_13njj {
+    } .button__component_1pr6m[disabled].button__accent_1pr6m.button__loading_1pr6m {
             color: var(--button-accent-color);
             background-color: var(--button-accent-base-bg-color);
-        } .button__component_13njj[disabled].button__secondary_13njj {
+        } .button__component_1pr6m[disabled].button__secondary_1pr6m {
         border-color: var(--button-secondary-disabled-border-color)
-    } .button__component_13njj[disabled].button__secondary_13njj.button__loading_13njj {
+    } .button__component_1pr6m[disabled].button__secondary_1pr6m.button__loading_1pr6m {
             color: var(--button-secondary-color);
             background-color: var(--button-secondary-base-bg-color);
             border-color: var(--button-secondary-base-border-color);
-        } .button__component_13njj[disabled].button__outlined_13njj {
+        } .button__component_1pr6m[disabled].button__outlined_1pr6m {
         background-color: var(--button-outlined-disabled-bg-color)
-    } .button__component_13njj[disabled].button__outlined_13njj.button__loading_13njj {
+    } .button__component_1pr6m[disabled].button__outlined_1pr6m.button__loading_1pr6m {
             color: var(--button-outlined-color);
             border-color: var(--button-outlined-base-border-color);
-        } .button__component_13njj[disabled].button__tertiary_13njj {
+        } .button__component_1pr6m[disabled].button__tertiary_1pr6m {
         background-color: var(--button-tertiary-disabled-bg-color)
-    } .button__component_13njj[disabled].button__tertiary_13njj.button__loading_13njj {
+    } .button__component_1pr6m[disabled].button__tertiary_1pr6m.button__loading_1pr6m {
             color: var(--button-tertiary-color);
             border-color: var(--button-tertiary-base-border-color);
-        } .button__component_13njj[disabled].button__filled_13njj {
+        } .button__component_1pr6m[disabled].button__filled_1pr6m {
         color: var(--color-light-text-tertiary);
         background-color: var(--color-light-neutral-translucent-100)
-    } .button__component_13njj[disabled].button__filled_13njj.button__loading_13njj {
+    } .button__component_1pr6m[disabled].button__filled_1pr6m.button__loading_1pr6m {
             color: var(--color-light-text-primary);
             background-color: var(--color-light-neutral-translucent-300);
-        } .button__component_13njj[disabled].button__transparent_13njj {
+        } .button__component_1pr6m[disabled].button__transparent_1pr6m {
         background-color: transparent
-    } .button__component_13njj[disabled].button__transparent_13njj.button__loading_13njj {
+    } .button__component_1pr6m[disabled].button__transparent_1pr6m.button__loading_1pr6m {
             color: var(--button-transparent-base-color);
-        } .button__component_13njj[disabled].button__link_13njj {
+        } .button__component_1pr6m[disabled].button__link_1pr6m {
         background-color: transparent
-    } .button__component_13njj[disabled].button__link_13njj.button__loading_13njj {
+    } .button__component_1pr6m[disabled].button__link_1pr6m.button__loading_1pr6m {
             color: var(--button-link-base-color);
-        } .button__component_13njj[disabled].button__text_13njj.button__loading_13njj {
+        } .button__component_1pr6m[disabled].button__text_1pr6m.button__loading_1pr6m {
             color: var(--button-text-base-color);
-        } .button__component_13njj[disabled].button__ghost_13njj.button__loading_13njj {
+        } .button__component_1pr6m[disabled].button__ghost_1pr6m.button__loading_1pr6m {
             color: var(--button-ghost-base-color);
         }