@alfalab/core-components 47.26.0-beta.2 → 47.26.1-52bd94585023d817e098c7c90c7ee9a926580424

package/bottom-sheet/modern/component.js

@@ -15,27 +15,35 @@ import '../../navigation-bar-private/modern';
 import '../../backdrop/modern';
 import './enums/swipeEnums.js';
 
-const styles = {"modal":"bottom-sheet__modal_1a8gx","wrapper":"bottom-sheet__wrapper_1a8gx","fullscreen":"bottom-sheet__fullscreen_1a8gx","component":"bottom-sheet__component_1a8gx","withTransition":"bottom-sheet__withTransition_1a8gx","scrollableContainer":"bottom-sheet__scrollableContainer_1a8gx","marker":"bottom-sheet__marker_1a8gx","defaultMarker":"bottom-sheet__defaultMarker_1a8gx","content":"bottom-sheet__content_1a8gx","noHeader":"bottom-sheet__noHeader_1a8gx","noFooter":"bottom-sheet__noFooter_1a8gx","scrollLocked":"bottom-sheet__scrollLocked_1a8gx","hiddenScrollbar":"bottom-sheet__hiddenScrollbar_1a8gx","disabledPointerEvents":"bottom-sheet__disabledPointerEvents_1a8gx","appear":"bottom-sheet__appear_1a8gx","enter":"bottom-sheet__enter_1a8gx","appearActive":"bottom-sheet__appearActive_1a8gx","enterActive":"bottom-sheet__enterActive_1a8gx","enterDone":"bottom-sheet__enterDone_1a8gx","appearDone":"bottom-sheet__appearDone_1a8gx","exit":"bottom-sheet__exit_1a8gx","exitActive":"bottom-sheet__exitActive_1a8gx","safeAreaBottom":"bottom-sheet__safeAreaBottom_1a8gx","background-accent":"bottom-sheet__background-accent_1a8gx","background-info":"bottom-sheet__background-info_1a8gx","background-attention-muted":"bottom-sheet__background-attention-muted_1a8gx","background-positive-muted":"bottom-sheet__background-positive-muted_1a8gx","background-negative-muted":"bottom-sheet__background-negative-muted_1a8gx","background-primary":"bottom-sheet__background-primary_1a8gx","background-primary-inverted":"bottom-sheet__background-primary-inverted_1a8gx","background-secondary":"bottom-sheet__background-secondary_1a8gx","background-secondary-inverted":"bottom-sheet__background-secondary-inverted_1a8gx","background-tertiary":"bottom-sheet__background-tertiary_1a8gx","background-tertiary-inverted":"bottom-sheet__background-tertiary-inverted_1a8gx","background-quaternary":"bottom-sheet__background-quaternary_1a8gx","background-quaternary-inverted":"bottom-sheet__background-quaternary-inverted_1a8gx","background-specialbg-component":"bottom-sheet__background-specialbg-component_1a8gx","background-specialbg-component-inverted":"bottom-sheet__background-specialbg-component-inverted_1a8gx","background-specialbg-primary-grouped":"bottom-sheet__background-specialbg-primary-grouped_1a8gx","background-specialbg-secondary-grouped":"bottom-sheet__background-specialbg-secondary-grouped_1a8gx","background-specialbg-tertiary-grouped":"bottom-sheet__background-specialbg-tertiary-grouped_1a8gx","background-specialbg-secondary-transparent":"bottom-sheet__background-specialbg-secondary-transparent_1a8gx","background-specialbg-secondary-transparent-inverted":"bottom-sheet__background-specialbg-secondary-transparent-inverted_1a8gx","background-specialbg-tertiary-transparent":"bottom-sheet__background-specialbg-tertiary-transparent_1a8gx","background-specialbg-tertiary-transparent-inverted":"bottom-sheet__background-specialbg-tertiary-transparent-inverted_1a8gx"};
+const styles = {"modal":"bottom-sheet__modal_1qmas","wrapper":"bottom-sheet__wrapper_1qmas","fullscreen":"bottom-sheet__fullscreen_1qmas","component":"bottom-sheet__component_1qmas","withTransition":"bottom-sheet__withTransition_1qmas","scrollableContainer":"bottom-sheet__scrollableContainer_1qmas","marker":"bottom-sheet__marker_1qmas","defaultMarker":"bottom-sheet__defaultMarker_1qmas","content":"bottom-sheet__content_1qmas","noHeader":"bottom-sheet__noHeader_1qmas","noFooter":"bottom-sheet__noFooter_1qmas","scrollLocked":"bottom-sheet__scrollLocked_1qmas","hiddenScrollbar":"bottom-sheet__hiddenScrollbar_1qmas","disabledPointerEvents":"bottom-sheet__disabledPointerEvents_1qmas","appear":"bottom-sheet__appear_1qmas","enter":"bottom-sheet__enter_1qmas","appearActive":"bottom-sheet__appearActive_1qmas","enterActive":"bottom-sheet__enterActive_1qmas","enterDone":"bottom-sheet__enterDone_1qmas","appearDone":"bottom-sheet__appearDone_1qmas","exit":"bottom-sheet__exit_1qmas","exitActive":"bottom-sheet__exitActive_1qmas","safeAreaBottom":"bottom-sheet__safeAreaBottom_1qmas","background-accent":"bottom-sheet__background-accent_1qmas","background-info":"bottom-sheet__background-info_1qmas","background-attention-muted":"bottom-sheet__background-attention-muted_1qmas","background-positive-muted":"bottom-sheet__background-positive-muted_1qmas","background-negative-muted":"bottom-sheet__background-negative-muted_1qmas","background-primary":"bottom-sheet__background-primary_1qmas","background-primary-inverted":"bottom-sheet__background-primary-inverted_1qmas","background-secondary":"bottom-sheet__background-secondary_1qmas","background-secondary-inverted":"bottom-sheet__background-secondary-inverted_1qmas","background-tertiary":"bottom-sheet__background-tertiary_1qmas","background-tertiary-inverted":"bottom-sheet__background-tertiary-inverted_1qmas","background-quaternary":"bottom-sheet__background-quaternary_1qmas","background-quaternary-inverted":"bottom-sheet__background-quaternary-inverted_1qmas","background-specialbg-component":"bottom-sheet__background-specialbg-component_1qmas","background-specialbg-component-inverted":"bottom-sheet__background-specialbg-component-inverted_1qmas","background-specialbg-primary-grouped":"bottom-sheet__background-specialbg-primary-grouped_1qmas","background-specialbg-secondary-grouped":"bottom-sheet__background-specialbg-secondary-grouped_1qmas","background-specialbg-tertiary-grouped":"bottom-sheet__background-specialbg-tertiary-grouped_1qmas","background-specialbg-secondary-transparent":"bottom-sheet__background-specialbg-secondary-transparent_1qmas","background-specialbg-secondary-transparent-inverted":"bottom-sheet__background-specialbg-secondary-transparent-inverted_1qmas","background-specialbg-tertiary-transparent":"bottom-sheet__background-specialbg-tertiary-transparent_1qmas","background-specialbg-tertiary-transparent-inverted":"bottom-sheet__background-specialbg-tertiary-transparent-inverted_1qmas"};
 require('./index.css');
 
 const { isNil } = fnUtils;
-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, onClose, onBack, onMagnetize, onSwipeStart, onSwipeEnd, disableRestoreFocus, disableAutoFocus, disableEscapeKeyDown, keepMounted, onMagnetizeEnd, onOffsetChange, swipeableMarker, swipeableMarkerClassName, backButtonProps, iOSLock = false, virtualKeyboard = false, }, ref) => {
+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);
-    const fullHeight = virtualKeyboard ? visibleViewportSize?.height ?? 0 : windowHeight;
+    let fullHeight = virtualKeyboard ? visibleViewportSize?.height ?? 0 : windowHeight;
     // Хук use100vh рассчитывает высоту вьюпорта в useEffect, поэтому на первый рендер всегда возвращает null.
     const isFirstRender = fullHeight === 0;
+    fullHeight = adjustContainerHeight(fullHeight);
     const initialIndexRef = useRef(initialActiveAreaIndex);
     const magneticAreas = useMemo(() => {
         if (magneticAreasProp) {
             return magneticAreasProp.map((area) => convertPercentToNumber(area, fullHeight, headerOffset));
         }
-        const iOSViewHeight = isClient()
-            ? document?.documentElement?.clientHeight || window?.innerHeight
-            : 0;
+        let iOSViewHeight = 0;
+        if (isClient()) {
+            if (document?.documentElement?.clientHeight) {
+                iOSViewHeight = adjustContainerHeight(document.documentElement.clientHeight);
+            }
+            else {
+                iOSViewHeight = window?.innerHeight;
+            }
+        }
         const viewHeight = os.isIOS() && !virtualKeyboard ? iOSViewHeight : fullHeight;
         return [0, viewHeight - headerOffset];
-    }, [fullHeight, headerOffset, magneticAreasProp, virtualKeyboard]);
+    }, [fullHeight, headerOffset, magneticAreasProp, virtualKeyboard, adjustContainerHeight]);
     const lastMagneticArea = magneticAreas[magneticAreas.length - 1];
     const [sheetOffset, setSheetOffset] = useState(0);
     const [backdropOpacity, setBackdropOpacity] = useState(1);

package/bottom-sheet/modern/components/footer/Component.js

@@ -2,7 +2,7 @@ import React, { useContext, useEffect } from 'react';
 import cn from 'classnames';
 import { BaseModalContext } from '../../../../base-modal/modern';
 
-const styles = {"footer":"bottom-sheet__footer_7ofhd","sticky":"bottom-sheet__sticky_7ofhd","highlighted":"bottom-sheet__highlighted_7ofhd","background-accent":"bottom-sheet__background-accent_7ofhd","background-info":"bottom-sheet__background-info_7ofhd","background-attention-muted":"bottom-sheet__background-attention-muted_7ofhd","background-positive-muted":"bottom-sheet__background-positive-muted_7ofhd","background-negative-muted":"bottom-sheet__background-negative-muted_7ofhd","background-primary":"bottom-sheet__background-primary_7ofhd","background-primary-inverted":"bottom-sheet__background-primary-inverted_7ofhd","background-secondary":"bottom-sheet__background-secondary_7ofhd","background-secondary-inverted":"bottom-sheet__background-secondary-inverted_7ofhd","background-tertiary":"bottom-sheet__background-tertiary_7ofhd","background-tertiary-inverted":"bottom-sheet__background-tertiary-inverted_7ofhd","background-quaternary":"bottom-sheet__background-quaternary_7ofhd","background-quaternary-inverted":"bottom-sheet__background-quaternary-inverted_7ofhd","background-specialbg-component":"bottom-sheet__background-specialbg-component_7ofhd","background-specialbg-component-inverted":"bottom-sheet__background-specialbg-component-inverted_7ofhd","background-specialbg-primary-grouped":"bottom-sheet__background-specialbg-primary-grouped_7ofhd","background-specialbg-secondary-grouped":"bottom-sheet__background-specialbg-secondary-grouped_7ofhd","background-specialbg-tertiary-grouped":"bottom-sheet__background-specialbg-tertiary-grouped_7ofhd","background-specialbg-secondary-transparent":"bottom-sheet__background-specialbg-secondary-transparent_7ofhd","background-specialbg-secondary-transparent-inverted":"bottom-sheet__background-specialbg-secondary-transparent-inverted_7ofhd","background-specialbg-tertiary-transparent":"bottom-sheet__background-specialbg-tertiary-transparent_7ofhd","background-specialbg-tertiary-transparent-inverted":"bottom-sheet__background-specialbg-tertiary-transparent-inverted_7ofhd"};
+const styles = {"footer":"bottom-sheet__footer_150yn","sticky":"bottom-sheet__sticky_150yn","highlighted":"bottom-sheet__highlighted_150yn","background-accent":"bottom-sheet__background-accent_150yn","background-info":"bottom-sheet__background-info_150yn","background-attention-muted":"bottom-sheet__background-attention-muted_150yn","background-positive-muted":"bottom-sheet__background-positive-muted_150yn","background-negative-muted":"bottom-sheet__background-negative-muted_150yn","background-primary":"bottom-sheet__background-primary_150yn","background-primary-inverted":"bottom-sheet__background-primary-inverted_150yn","background-secondary":"bottom-sheet__background-secondary_150yn","background-secondary-inverted":"bottom-sheet__background-secondary-inverted_150yn","background-tertiary":"bottom-sheet__background-tertiary_150yn","background-tertiary-inverted":"bottom-sheet__background-tertiary-inverted_150yn","background-quaternary":"bottom-sheet__background-quaternary_150yn","background-quaternary-inverted":"bottom-sheet__background-quaternary-inverted_150yn","background-specialbg-component":"bottom-sheet__background-specialbg-component_150yn","background-specialbg-component-inverted":"bottom-sheet__background-specialbg-component-inverted_150yn","background-specialbg-primary-grouped":"bottom-sheet__background-specialbg-primary-grouped_150yn","background-specialbg-secondary-grouped":"bottom-sheet__background-specialbg-secondary-grouped_150yn","background-specialbg-tertiary-grouped":"bottom-sheet__background-specialbg-tertiary-grouped_150yn","background-specialbg-secondary-transparent":"bottom-sheet__background-specialbg-secondary-transparent_150yn","background-specialbg-secondary-transparent-inverted":"bottom-sheet__background-specialbg-secondary-transparent-inverted_150yn","background-specialbg-tertiary-transparent":"bottom-sheet__background-specialbg-tertiary-transparent_150yn","background-specialbg-tertiary-transparent-inverted":"bottom-sheet__background-specialbg-tertiary-transparent-inverted_150yn"};
 require('./index.css');
 
 const Footer = ({ children, className, sticky, dataTestId }) => {

package/bottom-sheet/modern/components/footer/index.css

@@ -41,7 +41,10 @@
     --gap-m: 16px; /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
 
     /* новые значения, используйте их */
-    --gap-0: 0;
+
+    /* no-unit может приводить к проблемам в calc (#1559) */
+    /* stylelint-disable-next-line length-zero-no-unit */
+    --gap-0: 0px;
     --gap-16: var(--gap-m);
 } :root {
 } :root {
@@ -52,58 +55,58 @@
     /* footer */
     --bottom-sheet-footer-border-top: 1px solid var(--color-light-neutral-300);
     --bottom-sheet-footer-background-color: var(--color-light-modal-bg-primary);
-} .bottom-sheet__footer_7ofhd {
+} .bottom-sheet__footer_150yn {
     padding: var(--gap-16) var(--gap-16);
     background-color: var(--color-light-modal-bg-primary);
-} .bottom-sheet__sticky_7ofhd {
+} .bottom-sheet__sticky_150yn {
     position: sticky;
     bottom: var(--gap-0);
     z-index: 1;
-} .bottom-sheet__highlighted_7ofhd {
+} .bottom-sheet__highlighted_150yn {
     border-top: var(--bottom-sheet-footer-border-top);
     background-color: var(--bottom-sheet-footer-background-color);
-} .bottom-sheet__background-accent_7ofhd {
+} .bottom-sheet__background-accent_150yn {
             background-color: var(--color-light-bg-accent);
-        } .bottom-sheet__background-info_7ofhd {
+        } .bottom-sheet__background-info_150yn {
             background-color: var(--color-light-bg-info);
-        } .bottom-sheet__background-attention-muted_7ofhd {
+        } .bottom-sheet__background-attention-muted_150yn {
             background-color: var(--color-light-bg-attention-muted);
-        } .bottom-sheet__background-positive-muted_7ofhd {
+        } .bottom-sheet__background-positive-muted_150yn {
             background-color: var(--color-light-bg-positive-muted);
-        } .bottom-sheet__background-negative-muted_7ofhd {
+        } .bottom-sheet__background-negative-muted_150yn {
             background-color: var(--color-light-bg-negative-muted);
-        } .bottom-sheet__background-primary_7ofhd {
+        } .bottom-sheet__background-primary_150yn {
             background-color: var(--color-light-bg-primary);
-        } .bottom-sheet__background-primary-inverted_7ofhd {
+        } .bottom-sheet__background-primary-inverted_150yn {
             background-color: var(--color-light-bg-primary-inverted);
-        } .bottom-sheet__background-secondary_7ofhd {
+        } .bottom-sheet__background-secondary_150yn {
             background-color: var(--color-light-bg-secondary);
-        } .bottom-sheet__background-secondary-inverted_7ofhd {
+        } .bottom-sheet__background-secondary-inverted_150yn {
             background-color: var(--color-light-bg-secondary-inverted);
-        } .bottom-sheet__background-tertiary_7ofhd {
+        } .bottom-sheet__background-tertiary_150yn {
             background-color: var(--color-light-bg-tertiary);
-        } .bottom-sheet__background-tertiary-inverted_7ofhd {
+        } .bottom-sheet__background-tertiary-inverted_150yn {
             background-color: var(--color-light-bg-tertiary-inverted);
-        } .bottom-sheet__background-quaternary_7ofhd {
+        } .bottom-sheet__background-quaternary_150yn {
             background-color: var(--color-light-bg-quaternary);
-        } .bottom-sheet__background-quaternary-inverted_7ofhd {
+        } .bottom-sheet__background-quaternary-inverted_150yn {
             background-color: var(--color-light-bg-quaternary-inverted);
-        } .bottom-sheet__background-specialbg-component_7ofhd {
+        } .bottom-sheet__background-specialbg-component_150yn {
             background-color: var(--color-light-specialbg-component);
-        } .bottom-sheet__background-specialbg-component-inverted_7ofhd {
+        } .bottom-sheet__background-specialbg-component-inverted_150yn {
             background-color: var(--color-light-specialbg-component-inverted);
-        } .bottom-sheet__background-specialbg-primary-grouped_7ofhd {
+        } .bottom-sheet__background-specialbg-primary-grouped_150yn {
             background-color: var(--color-light-specialbg-primary-grouped);
-        } .bottom-sheet__background-specialbg-secondary-grouped_7ofhd {
+        } .bottom-sheet__background-specialbg-secondary-grouped_150yn {
             background-color: var(--color-light-specialbg-secondary-grouped);
-        } .bottom-sheet__background-specialbg-tertiary-grouped_7ofhd {
+        } .bottom-sheet__background-specialbg-tertiary-grouped_150yn {
             background-color: var(--color-light-specialbg-tertiary-grouped);
-        } .bottom-sheet__background-specialbg-secondary-transparent_7ofhd {
+        } .bottom-sheet__background-specialbg-secondary-transparent_150yn {
             background-color: var(--color-light-specialbg-secondary-transparent);
-        } .bottom-sheet__background-specialbg-secondary-transparent-inverted_7ofhd {
+        } .bottom-sheet__background-specialbg-secondary-transparent-inverted_150yn {
             background-color: var(--color-light-specialbg-secondary-transparent-inverted);
-        } .bottom-sheet__background-specialbg-tertiary-transparent_7ofhd {
+        } .bottom-sheet__background-specialbg-tertiary-transparent_150yn {
             background-color: var(--color-light-specialbg-tertiary-transparent);
-        } .bottom-sheet__background-specialbg-tertiary-transparent-inverted_7ofhd {
+        } .bottom-sheet__background-specialbg-tertiary-transparent-inverted_150yn {
             background-color: var(--color-light-specialbg-tertiary-transparent-inverted);
         }

package/bottom-sheet/modern/components/header/Component.js

@@ -3,7 +3,7 @@ import cn from 'classnames';
 import { BaseModalContext } from '../../../../base-modal/modern';
 import { NavigationBarPrivate } from '../../../../navigation-bar-private/modern';
 
-const styles = {"headerWrapper":"bottom-sheet__headerWrapper_1etp2","hasContent":"bottom-sheet__hasContent_1etp2","header":"bottom-sheet__header_1etp2","sticky":"bottom-sheet__sticky_1etp2","highlighted":"bottom-sheet__highlighted_1etp2","justifyEnd":"bottom-sheet__justifyEnd_1etp2","addon":"bottom-sheet__addon_1etp2","addonFixed":"bottom-sheet__addonFixed_1etp2","title":"bottom-sheet__title_1etp2","titleCenter":"bottom-sheet__titleCenter_1etp2","titleLeft":"bottom-sheet__titleLeft_1etp2","trimTitle":"bottom-sheet__trimTitle_1etp2"};
+const styles = {"headerWrapper":"bottom-sheet__headerWrapper_190v6","hasContent":"bottom-sheet__hasContent_190v6","header":"bottom-sheet__header_190v6","sticky":"bottom-sheet__sticky_190v6","highlighted":"bottom-sheet__highlighted_190v6","justifyEnd":"bottom-sheet__justifyEnd_190v6","addon":"bottom-sheet__addon_190v6","addonFixed":"bottom-sheet__addonFixed_190v6","title":"bottom-sheet__title_190v6","titleCenter":"bottom-sheet__titleCenter_190v6","titleLeft":"bottom-sheet__titleLeft_190v6","trimTitle":"bottom-sheet__trimTitle_190v6"};
 require('./index.css');
 
 const Header = ({ className, sticky, headerRef, headerOffset, title, children, ...restProps }) => {

package/bottom-sheet/modern/components/header/index.css

@@ -20,7 +20,10 @@
     --gap-s: 12px; /* 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 */
 
     /* новые значения, используйте их */
-    --gap-0: 0;
+
+    /* no-unit может приводить к проблемам в calc (#1559) */
+    /* stylelint-disable-next-line length-zero-no-unit */
+    --gap-0: 0px;
     --gap-4: var(--gap-2xs);
     --gap-8: var(--gap-xs);
     --gap-12: var(--gap-s);
@@ -38,42 +41,42 @@
     --bottom-sheet-title-font-family: var(--font-family-system);
 
     /* footer */
-} .bottom-sheet__headerWrapper_1etp2 {
+} .bottom-sheet__headerWrapper_190v6 {
     padding: var(--gap-12) var(--gap-8) var(--gap-4);
     border-top-left-radius: inherit;
     border-top-right-radius: inherit;
     z-index: 1;
-} .bottom-sheet__hasContent_1etp2 {
+} .bottom-sheet__hasContent_190v6 {
     background-color: inherit;
-} .bottom-sheet__header_1etp2 {
+} .bottom-sheet__header_190v6 {
     display: flex;
-} .bottom-sheet__sticky_1etp2 {
+} .bottom-sheet__sticky_190v6 {
     position: sticky;
     top: var(--gap-0);
-} .bottom-sheet__highlighted_1etp2 {
+} .bottom-sheet__highlighted_190v6 {
     border-bottom: var(--bottom-sheet-header-border-bottom);
-} .bottom-sheet__justifyEnd_1etp2 {
+} .bottom-sheet__justifyEnd_190v6 {
     justify-content: flex-end;
-} .bottom-sheet__addon_1etp2 {
+} .bottom-sheet__addon_190v6 {
     display: flex;
     justify-content: center;
     align-items: center;
     min-width: 48px;
     height: 48px;
-} .bottom-sheet__addonFixed_1etp2 {
+} .bottom-sheet__addonFixed_190v6 {
     position: fixed;
-} .bottom-sheet__title_1etp2 {
+} .bottom-sheet__title_190v6 {
     padding: 10px var(--gap-8);
     width: 100%;
     font-size: var(--bottom-sheet-title-font-size);
     font-weight: var(--bottom-sheet-title-font-weight);
     line-height: var(--bottom-sheet-title-line-height);
     font-family: var(--bottom-sheet-title-font-family);
-} .bottom-sheet__titleCenter_1etp2 {
+} .bottom-sheet__titleCenter_190v6 {
     text-align: center;
-} .bottom-sheet__titleLeft_1etp2 {
+} .bottom-sheet__titleLeft_190v6 {
     text-align: left;
-} .bottom-sheet__trimTitle_1etp2 {
+} .bottom-sheet__trimTitle_190v6 {
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;

package/bottom-sheet/modern/index.css

@@ -47,12 +47,17 @@
     --gap-m: 16px; /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
 
     /* новые значения, используйте их */
-    --gap-0: 0;
+
+    /* no-unit может приводить к проблемам в calc (#1559) */
+    /* stylelint-disable-next-line length-zero-no-unit */
+    --gap-0: 0px;
     --gap-4: var(--gap-2xs);
     --gap-16: var(--gap-m);
 } :root {
 } :root {
 } /* сбрасывает синюю подсветку при нажатии */ :root {
+    --sab: env(safe-area-inset-bottom, var(--gap-0));
+} :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-top-radius: var(--border-radius-16);
@@ -61,25 +66,25 @@
     /* header */
 
     /* footer */
-} .bottom-sheet__modal_1a8gx {
+} .bottom-sheet__modal_1qmas {
     bottom: var(--gap-0);
     width: 100%;
     max-width: 600px;
     pointer-events: none;
     touch-action: none;
-} .bottom-sheet__modal_1a8gx.bottom-sheet__modal_1a8gx {
+} .bottom-sheet__modal_1qmas.bottom-sheet__modal_1qmas {
     background-color: transparent;
     position: fixed;
-} .bottom-sheet__wrapper_1a8gx {
+} .bottom-sheet__wrapper_1qmas {
     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_1a8gx {
+} .bottom-sheet__fullscreen_1qmas {
     border-radius: 0;
-} .bottom-sheet__component_1a8gx {
+} .bottom-sheet__component_1qmas {
     position: relative;
     display: flex;
     flex-direction: column;
@@ -87,9 +92,9 @@
     background-color: var(--color-light-modal-bg-primary);
     pointer-events: all;
     box-shadow: var(--bottom-sheet-shadow);
-} .bottom-sheet__withTransition_1a8gx {
+} .bottom-sheet__withTransition_1qmas {
     transition: var(--bottom-sheet-out-transition);
-} .bottom-sheet__scrollableContainer_1a8gx {
+} .bottom-sheet__scrollableContainer_1qmas {
     overflow: auto;
     display: flex;
     flex-direction: column;
@@ -98,7 +103,7 @@
     background-color: inherit;
     border-radius: inherit;
     overscroll-behavior: contain;
-} .bottom-sheet__marker_1a8gx {
+} .bottom-sheet__marker_1qmas {
     position: fixed;
     top: var(--gap-4);
     right: var(--gap-0);
@@ -106,11 +111,11 @@
     z-index: 1000;
     width: 36px;
     margin: var(--gap-0) auto;
-} .bottom-sheet__defaultMarker_1a8gx {
+} .bottom-sheet__defaultMarker_1qmas {
     height: 4px;
     border-radius: var(--border-radius-20);
     background-color: var(--color-light-neutral-translucent-300);
-} .bottom-sheet__content_1a8gx {
+} .bottom-sheet__content_1qmas {
     position: relative;
     z-index: 0;
     display: flex;
@@ -120,75 +125,75 @@
     color: var(--color-light-text-primary);
     background-color: inherit;
     border-radius: inherit;
-} .bottom-sheet__noHeader_1a8gx {
+} .bottom-sheet__noHeader_1qmas {
     padding-top: var(--gap-16);
-} .bottom-sheet__noFooter_1a8gx {
+} .bottom-sheet__noFooter_1qmas {
     padding-bottom: var(--gap-16);
-} .bottom-sheet__scrollLocked_1a8gx {
+} .bottom-sheet__scrollLocked_1qmas {
     overflow: hidden;
-} .bottom-sheet__hiddenScrollbar_1a8gx {
+} .bottom-sheet__hiddenScrollbar_1qmas {
     scrollbar-width: none
-} .bottom-sheet__hiddenScrollbar_1a8gx::-webkit-scrollbar {
+} .bottom-sheet__hiddenScrollbar_1qmas::-webkit-scrollbar {
         width: 0;
         height: 0;
-    } .bottom-sheet__disabledPointerEvents_1a8gx {
+    } .bottom-sheet__disabledPointerEvents_1qmas {
     pointer-events: none;
-} .bottom-sheet__appear_1a8gx .bottom-sheet__wrapper_1a8gx, .bottom-sheet__enter_1a8gx .bottom-sheet__wrapper_1a8gx {
+} .bottom-sheet__appear_1qmas .bottom-sheet__wrapper_1qmas, .bottom-sheet__enter_1qmas .bottom-sheet__wrapper_1qmas {
         transition: none;
-    } .bottom-sheet__appearActive_1a8gx .bottom-sheet__wrapper_1a8gx, .bottom-sheet__enterActive_1a8gx .bottom-sheet__wrapper_1a8gx {
+    } .bottom-sheet__appearActive_1qmas .bottom-sheet__wrapper_1qmas, .bottom-sheet__enterActive_1qmas .bottom-sheet__wrapper_1qmas {
         transition: var(--bottom-sheet-in-transition);
         transform: translateY(0);
-    } .bottom-sheet__enterDone_1a8gx .bottom-sheet__wrapper_1a8gx, .bottom-sheet__appearDone_1a8gx .bottom-sheet__wrapper_1a8gx {
+    } .bottom-sheet__enterDone_1qmas .bottom-sheet__wrapper_1qmas, .bottom-sheet__appearDone_1qmas .bottom-sheet__wrapper_1qmas {
         transform: translateY(0);
-    } .bottom-sheet__exit_1a8gx .bottom-sheet__wrapper_1a8gx {
+    } .bottom-sheet__exit_1qmas .bottom-sheet__wrapper_1qmas {
         transform: translateY(0);
-    } .bottom-sheet__exitActive_1a8gx .bottom-sheet__wrapper_1a8gx {
+    } .bottom-sheet__exitActive_1qmas .bottom-sheet__wrapper_1qmas {
         transition: var(--bottom-sheet-out-transition);
         transform: translateY(100%);
-    } .bottom-sheet__safeAreaBottom_1a8gx {
-    padding-bottom: env(safe-area-inset-bottom);
-} .bottom-sheet__background-accent_1a8gx {
+    } .bottom-sheet__safeAreaBottom_1qmas {
+    padding-bottom: var(--sab);
+} .bottom-sheet__background-accent_1qmas {
             background-color: var(--color-light-bg-accent);
-        } .bottom-sheet__background-info_1a8gx {
+        } .bottom-sheet__background-info_1qmas {
             background-color: var(--color-light-bg-info);
-        } .bottom-sheet__background-attention-muted_1a8gx {
+        } .bottom-sheet__background-attention-muted_1qmas {
             background-color: var(--color-light-bg-attention-muted);
-        } .bottom-sheet__background-positive-muted_1a8gx {
+        } .bottom-sheet__background-positive-muted_1qmas {
             background-color: var(--color-light-bg-positive-muted);
-        } .bottom-sheet__background-negative-muted_1a8gx {
+        } .bottom-sheet__background-negative-muted_1qmas {
             background-color: var(--color-light-bg-negative-muted);
-        } .bottom-sheet__background-primary_1a8gx {
+        } .bottom-sheet__background-primary_1qmas {
             background-color: var(--color-light-bg-primary);
-        } .bottom-sheet__background-primary-inverted_1a8gx {
+        } .bottom-sheet__background-primary-inverted_1qmas {
             background-color: var(--color-light-bg-primary-inverted);
-        } .bottom-sheet__background-secondary_1a8gx {
+        } .bottom-sheet__background-secondary_1qmas {
             background-color: var(--color-light-bg-secondary);
-        } .bottom-sheet__background-secondary-inverted_1a8gx {
+        } .bottom-sheet__background-secondary-inverted_1qmas {
             background-color: var(--color-light-bg-secondary-inverted);
-        } .bottom-sheet__background-tertiary_1a8gx {
+        } .bottom-sheet__background-tertiary_1qmas {
             background-color: var(--color-light-bg-tertiary);
-        } .bottom-sheet__background-tertiary-inverted_1a8gx {
+        } .bottom-sheet__background-tertiary-inverted_1qmas {
             background-color: var(--color-light-bg-tertiary-inverted);
-        } .bottom-sheet__background-quaternary_1a8gx {
+        } .bottom-sheet__background-quaternary_1qmas {
             background-color: var(--color-light-bg-quaternary);
-        } .bottom-sheet__background-quaternary-inverted_1a8gx {
+        } .bottom-sheet__background-quaternary-inverted_1qmas {
             background-color: var(--color-light-bg-quaternary-inverted);
-        } .bottom-sheet__background-specialbg-component_1a8gx {
+        } .bottom-sheet__background-specialbg-component_1qmas {
             background-color: var(--color-light-specialbg-component);
-        } .bottom-sheet__background-specialbg-component-inverted_1a8gx {
+        } .bottom-sheet__background-specialbg-component-inverted_1qmas {
             background-color: var(--color-light-specialbg-component-inverted);
-        } .bottom-sheet__background-specialbg-primary-grouped_1a8gx {
+        } .bottom-sheet__background-specialbg-primary-grouped_1qmas {
             background-color: var(--color-light-specialbg-primary-grouped);
-        } .bottom-sheet__background-specialbg-secondary-grouped_1a8gx {
+        } .bottom-sheet__background-specialbg-secondary-grouped_1qmas {
             background-color: var(--color-light-specialbg-secondary-grouped);
-        } .bottom-sheet__background-specialbg-tertiary-grouped_1a8gx {
+        } .bottom-sheet__background-specialbg-tertiary-grouped_1qmas {
             background-color: var(--color-light-specialbg-tertiary-grouped);
-        } .bottom-sheet__background-specialbg-secondary-transparent_1a8gx {
+        } .bottom-sheet__background-specialbg-secondary-transparent_1qmas {
             background-color: var(--color-light-specialbg-secondary-transparent);
-        } .bottom-sheet__background-specialbg-secondary-transparent-inverted_1a8gx {
+        } .bottom-sheet__background-specialbg-secondary-transparent-inverted_1qmas {
             background-color: var(--color-light-specialbg-secondary-transparent-inverted);
-        } .bottom-sheet__background-specialbg-tertiary-transparent_1a8gx {
+        } .bottom-sheet__background-specialbg-tertiary-transparent_1qmas {
             background-color: var(--color-light-specialbg-tertiary-transparent);
-        } .bottom-sheet__background-specialbg-tertiary-transparent-inverted_1a8gx {
+        } .bottom-sheet__background-specialbg-tertiary-transparent-inverted_1qmas {
             background-color: var(--color-light-specialbg-tertiary-transparent-inverted);
         }

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

@@ -7,6 +7,10 @@ import { NavigationBarPrivateProps as NavigationBarProps } from "../../navigatio
 type BackgroundColorType = "accent" | "info" | "attention-muted" | "positive-muted" | "negative-muted" | "primary" | "primary-inverted" | "secondary" | "secondary-inverted" | "tertiary" | "tertiary-inverted" | "quaternary" | "quaternary-inverted" | "specialbg-component" | "specialbg-component-inverted" | "specialbg-primary-grouped" | "specialbg-secondary-grouped" | "specialbg-tertiary-grouped" | "specialbg-secondary-transparent" | "specialbg-secondary-transparent-inverted" | "specialbg-tertiary-transparent" | "specialbg-tertiary-transparent-inverted";
 type BottomSheetTitleAlign = 'center' | 'left';
 type BottomSheetProps = {
+    /**
+     * Метод, позволяющий донастраивать высоту контейнера для BottomSheet, например с учётом safe-area
+     */
+    adjustContainerHeight?: (height: number) => number;
     /**
      * Контент
      */

package/bottom-sheet/moderncssm/component.js

@@ -19,23 +19,31 @@ import '../../backdrop/moderncssm';
 import './enums/swipeEnums.js';
 
 const { isNil } = fnUtils;
-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, onClose, onBack, onMagnetize, onSwipeStart, onSwipeEnd, disableRestoreFocus, disableAutoFocus, disableEscapeKeyDown, keepMounted, onMagnetizeEnd, onOffsetChange, swipeableMarker, swipeableMarkerClassName, backButtonProps, iOSLock = false, virtualKeyboard = false, }, ref) => {
+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);
-    const fullHeight = virtualKeyboard ? visibleViewportSize?.height ?? 0 : windowHeight;
+    let fullHeight = virtualKeyboard ? visibleViewportSize?.height ?? 0 : windowHeight;
     // Хук use100vh рассчитывает высоту вьюпорта в useEffect, поэтому на первый рендер всегда возвращает null.
     const isFirstRender = fullHeight === 0;
+    fullHeight = adjustContainerHeight(fullHeight);
     const initialIndexRef = useRef(initialActiveAreaIndex);
     const magneticAreas = useMemo(() => {
         if (magneticAreasProp) {
             return magneticAreasProp.map((area) => convertPercentToNumber(area, fullHeight, headerOffset));
         }
-        const iOSViewHeight = isClient()
-            ? document?.documentElement?.clientHeight || window?.innerHeight
-            : 0;
+        let iOSViewHeight = 0;
+        if (isClient()) {
+            if (document?.documentElement?.clientHeight) {
+                iOSViewHeight = adjustContainerHeight(document.documentElement.clientHeight);
+            }
+            else {
+                iOSViewHeight = window?.innerHeight;
+            }
+        }
         const viewHeight = os.isIOS() && !virtualKeyboard ? iOSViewHeight : fullHeight;
         return [0, viewHeight - headerOffset];
-    }, [fullHeight, headerOffset, magneticAreasProp, virtualKeyboard]);
+    }, [fullHeight, headerOffset, magneticAreasProp, virtualKeyboard, adjustContainerHeight]);
     const lastMagneticArea = magneticAreas[magneticAreas.length - 1];
     const [sheetOffset, setSheetOffset] = useState(0);
     const [backdropOpacity, setBackdropOpacity] = useState(1);

package/bottom-sheet/moderncssm/index.module.css

@@ -1,4 +1,7 @@
 /* */
+:root {
+    --sab: env(safe-area-inset-bottom, var(--gap-0));
+}
 :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;
@@ -115,7 +118,7 @@
         transform: translateY(100%);
     }
 .safeAreaBottom {
-    padding-bottom: env(safe-area-inset-bottom);
+    padding-bottom: var(--sab);
 }
 .background-accent {
             background-color: var(--color-light-bg-accent);

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

@@ -7,6 +7,10 @@ import { NavigationBarPrivateProps as NavigationBarProps } from "../../navigatio
 type BackgroundColorType = "accent" | "info" | "attention-muted" | "positive-muted" | "negative-muted" | "primary" | "primary-inverted" | "secondary" | "secondary-inverted" | "tertiary" | "tertiary-inverted" | "quaternary" | "quaternary-inverted" | "specialbg-component" | "specialbg-component-inverted" | "specialbg-primary-grouped" | "specialbg-secondary-grouped" | "specialbg-tertiary-grouped" | "specialbg-secondary-transparent" | "specialbg-secondary-transparent-inverted" | "specialbg-tertiary-transparent" | "specialbg-tertiary-transparent-inverted";
 type BottomSheetTitleAlign = 'center' | 'left';
 type BottomSheetProps = {
+    /**
+     * Метод, позволяющий донастраивать высоту контейнера для BottomSheet, например с учётом safe-area
+     */
+    adjustContainerHeight?: (height: number) => number;
     /**
      * Контент
      */

package/bottom-sheet/types.d.ts

@@ -7,6 +7,10 @@ import { NavigationBarPrivateProps as NavigationBarProps } from "../navigation-b
 type BackgroundColorType = "accent" | "info" | "attention-muted" | "positive-muted" | "negative-muted" | "primary" | "primary-inverted" | "secondary" | "secondary-inverted" | "tertiary" | "tertiary-inverted" | "quaternary" | "quaternary-inverted" | "specialbg-component" | "specialbg-component-inverted" | "specialbg-primary-grouped" | "specialbg-secondary-grouped" | "specialbg-tertiary-grouped" | "specialbg-secondary-transparent" | "specialbg-secondary-transparent-inverted" | "specialbg-tertiary-transparent" | "specialbg-tertiary-transparent-inverted";
 type BottomSheetTitleAlign = 'center' | 'left';
 type BottomSheetProps = {
+    /**
+     * Метод, позволяющий донастраивать высоту контейнера для BottomSheet, например с учётом safe-area
+     */
+    adjustContainerHeight?: (height: number) => number;
     /**
      * Контент
      */

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_pw9x2","loader":"button__loader_pw9x2","primary":"button__primary_pw9x2","secondary":"button__secondary_pw9x2","outlined":"button__outlined_pw9x2","tertiary":"button__tertiary_pw9x2","filled":"button__filled_pw9x2","transparent":"button__transparent_pw9x2","link":"button__link_pw9x2","text":"button__text_pw9x2","ghost":"button__ghost_pw9x2","component":"button__component_pw9x2","loading":"button__loading_pw9x2"};
+var defaultColors = {"accent":"button__accent_lkyq8","loader":"button__loader_lkyq8","primary":"button__primary_lkyq8","secondary":"button__secondary_lkyq8","outlined":"button__outlined_lkyq8","tertiary":"button__tertiary_lkyq8","filled":"button__filled_lkyq8","transparent":"button__transparent_lkyq8","link":"button__link_lkyq8","text":"button__text_lkyq8","ghost":"button__ghost_lkyq8","component":"button__component_lkyq8","loading":"button__loading_lkyq8"};
 require('./default.css');
 
-var commonStyles = {"component":"button__component_74kac","hug":"button__hug_74kac","fill":"button__fill_74kac","hint":"button__hint_74kac","allowBackdropBlur":"button__allowBackdropBlur_74kac","secondary":"button__secondary_74kac","accent":"button__accent_74kac","primary":"button__primary_74kac","focused":"button__focused_74kac","loading":"button__loading_74kac","label":"button__label_74kac","addons":"button__addons_74kac","stretchText":"button__stretchText_74kac","loader":"button__loader_74kac","size-32":"button__size-32_74kac","iconOnly":"button__iconOnly_74kac","size-40":"button__size-40_74kac","size-48":"button__size-48_74kac","size-56":"button__size-56_74kac","size-64":"button__size-64_74kac","size-72":"button__size-72_74kac","withRightAddons":"button__withRightAddons_74kac","ghost":"button__ghost_74kac","text":"button__text_74kac","withLeftAddons":"button__withLeftAddons_74kac","link":"button__link_74kac","transparent":"button__transparent_74kac","block":"button__block_74kac","nowrap":"button__nowrap_74kac","rounded":"button__rounded_74kac"};
+var commonStyles = {"component":"button__component_1xyyb","hug":"button__hug_1xyyb","fill":"button__fill_1xyyb","hint":"button__hint_1xyyb","allowBackdropBlur":"button__allowBackdropBlur_1xyyb","secondary":"button__secondary_1xyyb","accent":"button__accent_1xyyb","primary":"button__primary_1xyyb","focused":"button__focused_1xyyb","loading":"button__loading_1xyyb","label":"button__label_1xyyb","addons":"button__addons_1xyyb","stretchText":"button__stretchText_1xyyb","loader":"button__loader_1xyyb","size-32":"button__size-32_1xyyb","iconOnly":"button__iconOnly_1xyyb","size-40":"button__size-40_1xyyb","size-48":"button__size-48_1xyyb","size-56":"button__size-56_1xyyb","size-64":"button__size-64_1xyyb","size-72":"button__size-72_1xyyb","withRightAddons":"button__withRightAddons_1xyyb","ghost":"button__ghost_1xyyb","text":"button__text_1xyyb","withLeftAddons":"button__withLeftAddons_1xyyb","link":"button__link_1xyyb","transparent":"button__transparent_1xyyb","block":"button__block_1xyyb","nowrap":"button__nowrap_1xyyb","rounded":"button__rounded_1xyyb"};
 require('./index.css');
 
-var invertedColors = {"accent":"button__accent_yfw2m","loader":"button__loader_yfw2m","primary":"button__primary_yfw2m","secondary":"button__secondary_yfw2m","outlined":"button__outlined_yfw2m","tertiary":"button__tertiary_yfw2m","filled":"button__filled_yfw2m","transparent":"button__transparent_yfw2m","link":"button__link_yfw2m","text":"button__text_yfw2m","ghost":"button__ghost_yfw2m","component":"button__component_yfw2m","loading":"button__loading_yfw2m"};
+var invertedColors = {"accent":"button__accent_emjim","loader":"button__loader_emjim","primary":"button__primary_emjim","secondary":"button__secondary_emjim","outlined":"button__outlined_emjim","tertiary":"button__tertiary_emjim","filled":"button__filled_emjim","transparent":"button__transparent_emjim","link":"button__link_emjim","text":"button__text_emjim","ghost":"button__ghost_emjim","component":"button__component_emjim","loading":"button__loading_emjim"};
 require('./inverted.css');
 
 var colorStyles = {