@alfalab/core-components 47.11.0 → 47.12.1-beta.0

package/base-modal/moderncssm/Component.js

@@ -0,0 +1,265 @@
+import React, { forwardRef, useState, useRef, useCallback, useEffect, useMemo } from 'react';
+import FocusLock from 'react-focus-lock';
+import mergeRefs from 'react-merge-refs';
+import { CSSTransition } from 'react-transition-group';
+import { ResizeObserver } from '@juggle/resize-observer';
+import cn from 'classnames';
+import { Backdrop } from '../../backdrop/moderncssm';
+import { Portal } from '../../portal/moderncssm';
+import { os, browser } from '../../shared/moderncssm';
+import { Stack } from '../../stack/moderncssm';
+import { stackingOrder } from '@alfalab/stack-context';
+import { unlockScroll, syncHeight, lockScroll } from './helpers/lockScroll.js';
+import { isScrolledToTop, isScrolledToBottom, handleContainer, restoreContainerStyles, hasScrollbar } from './utils.js';
+import styles from './index.module.css';
+import './matches-polyfill.js';
+import '../../global-store/moderncssm';
+
+/* eslint-disable jsx-a11y/no-noninteractive-element-interactions */
+// eslint-disable-next-line @typescript-eslint/no-redeclare
+const BaseModalContext = React.createContext({
+    parentRef: { current: null },
+    componentRef: { current: null },
+    hasFooter: false,
+    hasHeader: false,
+    hasScroll: false,
+    headerHighlighted: false,
+    footerHighlighted: false,
+    headerOffset: 0,
+    setHeaderOffset: () => null,
+    contentRef: () => null,
+    setHasHeader: () => null,
+    setHasFooter: () => null,
+    onClose: () => null,
+});
+const BaseModal = forwardRef(({ open, container, children, scrollHandler = 'wrapper', Backdrop: Backdrop$1 = Backdrop, backdropProps = {}, transitionProps = {}, disableBackdropClick, disableAutoFocus = false, disableFocusLock = false, disableEscapeKeyDown = false, disableRestoreFocus = false, disableBlockingScroll = false, keepMounted = false, className, contentClassName, wrapperProps, contentProps, componentDivProps, wrapperClassName, onBackdropClick, onClose, onEscapeKeyDown, onMount, onUnmount, dataTestId, zIndex = stackingOrder.MODAL, componentRef = null, usePortal = true, iOSLock = false, }, ref) => {
+    const [exited, setExited] = useState(null);
+    const [hasScroll, setHasScroll] = useState(false);
+    const [hasHeader, setHasHeader] = useState(false);
+    const [hasFooter, setHasFooter] = useState(false);
+    const [headerHighlighted, setHeaderHighlighted] = useState(false);
+    const [footerHighlighted, setFooterHighlighted] = useState(false);
+    const [headerOffset, setHeaderOffset] = useState(0);
+    const componentNodeRef = useRef(null);
+    const wrapperRef = useRef(null);
+    const scrollableNodeRef = useRef(null);
+    const contentNodeRef = useRef(null);
+    const restoreContainerStylesRef = useRef(null);
+    const mouseDownTarget = useRef();
+    const resizeObserverRef = useRef();
+    const checkToHasScrollBar = () => {
+        if (scrollableNodeRef.current) {
+            const scrollExists = hasScrollbar(scrollableNodeRef.current);
+            setFooterHighlighted(scrollExists);
+            setHasScroll(scrollExists);
+        }
+    };
+    const isExited = exited || exited === null;
+    const shouldRender = keepMounted || open || !isExited;
+    const getContainer = useCallback(() => (container ? container() : document.body), [container]);
+    const addResizeHandle = useCallback(() => {
+        if (!resizeObserverRef.current)
+            return;
+        if (scrollableNodeRef.current) {
+            resizeObserverRef.current.observe(scrollableNodeRef.current);
+        }
+        if (contentNodeRef.current) {
+            resizeObserverRef.current.observe(contentNodeRef.current);
+        }
+    }, []);
+    const removeResizeHandle = useCallback(() => resizeObserverRef.current?.disconnect(), []);
+    const contentRef = useCallback((node) => {
+        if (node !== null) {
+            contentNodeRef.current = node;
+            if (resizeObserverRef.current) {
+                resizeObserverRef.current.observe(node);
+            }
+            checkToHasScrollBar();
+        }
+    }, []);
+    const handleScroll = useCallback(() => {
+        if (!scrollableNodeRef.current || !componentNodeRef.current)
+            return;
+        if (hasHeader) {
+            setHeaderHighlighted(!isScrolledToTop(scrollableNodeRef.current) &&
+                componentNodeRef.current.getBoundingClientRect().top - headerOffset <= 1);
+        }
+        if (hasFooter) {
+            setFooterHighlighted(!isScrolledToBottom(scrollableNodeRef.current) &&
+                componentNodeRef.current.getBoundingClientRect().bottom >=
+                    window.innerHeight - 1);
+        }
+    }, [hasFooter, hasHeader, headerOffset]);
+    const handleClose = useCallback((event, reason) => {
+        if (iOSLock && os.isIOS()) {
+            unlockScroll();
+        }
+        if (onClose) {
+            onClose(event, reason);
+        }
+        if (reason === 'backdropClick' && onBackdropClick) {
+            onBackdropClick(event);
+        }
+        if (reason === 'escapeKeyDown' && onEscapeKeyDown) {
+            onEscapeKeyDown(event);
+        }
+        return null;
+    }, [onBackdropClick, onClose, onEscapeKeyDown, iOSLock]);
+    const handleBackdropMouseDown = (event) => {
+        let clickedOnScrollbar = false;
+        const clientWidth = event.target?.clientWidth;
+        if (event.clientX && clientWidth) {
+            // Устанавливаем смещение для абсолютно спозиционированного скроллбара в OSX в 17px.
+            const offset = browser.getScrollbarSize() === 0 ? 17 : 0;
+            clickedOnScrollbar = event.clientX + offset > clientWidth;
+        }
+        if (!disableBackdropClick && !clickedOnScrollbar) {
+            mouseDownTarget.current = event.target;
+        }
+    };
+    const handleBackdropMouseUp = (event) => {
+        if (!disableBackdropClick &&
+            event.target === wrapperRef.current &&
+            mouseDownTarget.current === wrapperRef.current) {
+            handleClose(event, 'backdropClick');
+        }
+        mouseDownTarget.current = undefined;
+    };
+    const handleKeyDown = useCallback((event) => {
+        /*
+         * Чтобы сохранить дефолтное поведение элементов и событий форм,
+         * обработчик не устанавливает event.preventDefault()
+         */
+        if (event.key !== 'Escape') {
+            return;
+        }
+        // Если есть обработчик escape на body
+        event.stopPropagation();
+        if (!disableEscapeKeyDown && handleClose) {
+            handleClose(event, 'escapeKeyDown');
+        }
+    }, [disableEscapeKeyDown, handleClose]);
+    const getScrollHandler = useCallback(() => {
+        if (scrollHandler === 'wrapper')
+            return wrapperRef.current;
+        if (scrollHandler === 'content')
+            return componentNodeRef.current;
+        return scrollHandler.current || wrapperRef.current;
+    }, [scrollHandler]);
+    const handleEntered = useCallback((node, isAppearing) => {
+        scrollableNodeRef.current = getScrollHandler();
+        addResizeHandle();
+        if (scrollableNodeRef.current) {
+            scrollableNodeRef.current.addEventListener('scroll', handleScroll);
+            handleScroll();
+        }
+        if (transitionProps.onEntered) {
+            transitionProps.onEntered(node, isAppearing);
+        }
+        if (onMount)
+            onMount();
+    }, [addResizeHandle, getScrollHandler, handleScroll, onMount, transitionProps]);
+    const handleExited = useCallback((node) => {
+        removeResizeHandle();
+        setExited(true);
+        if (scrollableNodeRef.current) {
+            scrollableNodeRef.current.removeEventListener('scroll', handleScroll);
+        }
+        if (transitionProps.onExited) {
+            transitionProps.onExited(node);
+        }
+        if (onUnmount)
+            onUnmount();
+        if (restoreContainerStylesRef.current) {
+            restoreContainerStylesRef.current();
+        }
+    }, [handleScroll, onUnmount, removeResizeHandle, transitionProps]);
+    useEffect(() => {
+        if (open && isExited) {
+            if (!disableBlockingScroll) {
+                const el = getContainer();
+                const shouldIOSLock = iOSLock && os.isIOS();
+                handleContainer(el, shouldIOSLock);
+                if (shouldIOSLock) {
+                    syncHeight();
+                    lockScroll();
+                }
+                restoreContainerStylesRef.current = () => {
+                    restoreContainerStylesRef.current = null;
+                    restoreContainerStyles(el);
+                };
+            }
+            setExited(false);
+        }
+    }, [getContainer, open, disableBlockingScroll, isExited, iOSLock]);
+    useEffect(() => {
+        const ResizeObserver$1 = window.ResizeObserver || ResizeObserver;
+        resizeObserverRef.current = new ResizeObserver$1(checkToHasScrollBar);
+        return () => {
+            if (restoreContainerStylesRef.current) {
+                restoreContainerStylesRef.current();
+            }
+            if (resizeObserverRef.current) {
+                resizeObserverRef.current.disconnect();
+            }
+        };
+    }, []);
+    useEffect(() => {
+        if (disableAutoFocus || !open)
+            return;
+        wrapperRef.current?.focus();
+    }, [open, disableAutoFocus]);
+    const contextValue = useMemo(() => ({
+        parentRef: wrapperRef,
+        componentRef: componentNodeRef,
+        hasHeader,
+        hasFooter,
+        hasScroll,
+        headerHighlighted,
+        footerHighlighted,
+        headerOffset,
+        setHeaderOffset,
+        contentRef,
+        setHasHeader,
+        setHasFooter,
+        onClose: handleClose,
+    }), [
+        contentRef,
+        hasHeader,
+        hasFooter,
+        hasScroll,
+        headerHighlighted,
+        footerHighlighted,
+        headerOffset,
+        setHeaderOffset,
+        handleClose,
+    ]);
+    const renderContent = () => (React.createElement(Stack, { value: zIndex }, (computedZIndex) => (React.createElement(BaseModalContext.Provider, { value: contextValue },
+        React.createElement(FocusLock, { disabled: disableFocusLock || !open, returnFocus: !disableRestoreFocus },
+            Backdrop$1 && (React.createElement(Backdrop$1, { ...backdropProps, className: cn(backdropProps.className, styles.backdrop), open: open, style: {
+                    zIndex: computedZIndex,
+                } })),
+            React.createElement("div", { ...wrapperProps, role: 'dialog', className: cn(styles.wrapper, wrapperClassName, wrapperProps?.className, {
+                    [styles.hidden]: !open && isExited,
+                }), ref: mergeRefs([
+                    ref,
+                    wrapperRef,
+                    wrapperProps?.ref,
+                ]), onKeyDown: handleKeyDown, onMouseDown: handleBackdropMouseDown, onMouseUp: handleBackdropMouseUp, tabIndex: -1, "data-test-id": dataTestId, style: {
+                    zIndex: computedZIndex,
+                } },
+                React.createElement(CSSTransition, { appear: true, timeout: 200, classNames: styles, nodeRef: componentNodeRef, ...transitionProps, in: open, onEntered: handleEntered, onExited: handleExited },
+                    React.createElement("div", { ...componentDivProps, className: cn(styles.component, className, componentDivProps?.className), ref: mergeRefs([
+                            componentRef,
+                            componentNodeRef,
+                            componentDivProps?.ref || null,
+                        ]) },
+                        React.createElement("div", { ...contentProps, className: cn(styles.content, contentClassName, contentProps?.className) }, children)))))))));
+    if (!shouldRender)
+        return null;
+    return usePortal ? (React.createElement(Portal, { getPortalContainer: container, immediateMount: true }, renderContent())) : (renderContent());
+});
+BaseModal.displayName = 'BaseModal';
+BaseModalContext.displayName = 'BaseModalContext';
+
+export { BaseModal, BaseModalContext };

package/base-modal/moderncssm/helpers/lockScroll.d.ts

@@ -0,0 +1,4 @@
+declare const lockScroll: () => void;
+declare const unlockScroll: () => void;
+declare const syncHeight: () => void;
+export { lockScroll, unlockScroll, syncHeight };

package/base-modal/moderncssm/helpers/lockScroll.js

@@ -0,0 +1,18 @@
+/**
+ * Хелпер для блокирования скроллинга в iOS
+ * В проекте используется overflow: hidden для блокировки, но в некоторых случаях этого недостаточно. Данный хелпер призван решать эту проблему
+ */
+let scrollY;
+const lockScroll = () => {
+    scrollY = window.scrollY;
+    document.body.classList.add('is-locked');
+};
+const unlockScroll = () => {
+    document.body.classList.remove('is-locked');
+    window.scrollTo(0, scrollY);
+};
+const syncHeight = () => {
+    document.body.style.setProperty('--window-inner-scrollY', `${window.scrollY}px`);
+};
+
+export { lockScroll, syncHeight, unlockScroll };

package/base-modal/moderncssm/index.d.ts

@@ -0,0 +1,3 @@
+export * from "./Component";
+export * from "./utils";
+export * from "./helpers/lockScroll";

package/base-modal/moderncssm/index.js

@@ -0,0 +1,17 @@
+export { BaseModal, BaseModalContext } from './Component.js';
+export { handleContainer, hasScrollbar, isScrolledToBottom, isScrolledToTop, restoreContainerStyles } from './utils.js';
+export { lockScroll, syncHeight, unlockScroll } from './helpers/lockScroll.js';
+import 'react';
+import 'react-focus-lock';
+import 'react-merge-refs';
+import 'react-transition-group';
+import '@juggle/resize-observer';
+import 'classnames';
+import '../../backdrop/moderncssm';
+import '../../portal/moderncssm';
+import '../../shared/moderncssm';
+import '../../stack/moderncssm';
+import '@alfalab/stack-context';
+import './index.module.css';
+import './matches-polyfill.js';
+import '../../global-store/moderncssm';

package/base-modal/moderncssm/index.module.css

@@ -0,0 +1,71 @@
+/* */
+
+:root {
+    --window-inner-scrollY: 10px; /* fallback value to prevent ci error */
+}
+
+body:global(.is-locked) {
+    margin-top: calc(var(--window-inner-scrollY) * -1);
+    position: fixed;
+    overflow: hidden;
+}
+
+.component {
+    position: relative;
+    box-sizing: border-box;
+    background: var(--color-light-modal-bg-primary);
+    margin: auto;
+    flex-shrink: 0;
+}
+
+.wrapper {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+
+    overflow: auto;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    outline: 0;
+    overscroll-behavior: none;
+}
+
+.content {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    flex: 1;
+}
+
+.hidden {
+    display: none;
+}
+
+.backdrop {
+    z-index: 0;
+}
+
+.appear,
+.enter {
+    opacity: 0;
+}
+
+.appearActive,
+.enterActive {
+    opacity: 1;
+    transition: opacity 200ms ease-in;
+}
+
+.exit {
+    opacity: 1;
+}
+
+.exitActive,
+.exitDone {
+    opacity: 0;
+    transition: opacity 200ms ease-out;
+}

package/base-modal/moderncssm/matches-polyfill.d.ts

@@ -0,0 +1 @@
+export {};

package/base-modal/moderncssm/matches-polyfill.js

@@ -0,0 +1,18 @@
+/* eslint-disable */
+// @ts-nocheck
+if (typeof window !== 'undefined') {
+    if (Element && !Element.prototype.matches) {
+        Element.prototype.matches =
+            Element.prototype.matchesSelector ||
+                Element.prototype.mozMatchesSelector ||
+                Element.prototype.msMatchesSelector ||
+                Element.prototype.oMatchesSelector ||
+                Element.prototype.webkitMatchesSelector ||
+                function (s) {
+                    const matches = (this.document || this.ownerDocument).querySelectorAll(s);
+                    let i = matches.length;
+                    while (--i >= 0 && matches.item(i) !== this) { }
+                    return i > -1;
+                };
+    }
+}

package/base-modal/moderncssm/utils.d.ts

@@ -0,0 +1,6 @@
+declare function isScrolledToTop(target: HTMLElement): boolean;
+declare function isScrolledToBottom(target: HTMLElement): boolean;
+declare function hasScrollbar(target: HTMLElement): boolean;
+declare const restoreContainerStyles: (container: HTMLElement) => void;
+declare const handleContainer: (container?: HTMLElement, shouldIOSLock?: boolean) => void;
+export { isScrolledToTop, isScrolledToBottom, hasScrollbar, restoreContainerStyles, handleContainer };

package/base-modal/moderncssm/utils.js

@@ -0,0 +1,87 @@
+import { getModalStore } from '../../global-store/moderncssm';
+import { browser } from '../../shared/moderncssm';
+
+function isScrolledToTop(target) {
+    return target.scrollTop <= 0;
+}
+function isScrolledToBottom(target) {
+    return target.scrollHeight - target.offsetHeight <= target.scrollTop;
+}
+function hasScrollbar(target) {
+    return target.scrollHeight > target.clientHeight;
+}
+const isOverflowing = (container) => {
+    if (document.body === container) {
+        return window.innerWidth > document.documentElement.clientWidth;
+    }
+    return container.scrollHeight > container.clientHeight;
+};
+const getPaddingRight = (node) => parseInt(window.getComputedStyle(node).paddingRight, 10) || 0;
+const restoreContainerStyles = (container) => {
+    const modalRestoreStyles = getModalStore().getRestoreStyles();
+    const index = modalRestoreStyles.findIndex((s) => s.container === container);
+    const existingStyles = modalRestoreStyles[index];
+    if (!existingStyles)
+        return;
+    existingStyles.modals -= 1;
+    if (existingStyles.modals <= 0) {
+        modalRestoreStyles.splice(index, 1);
+        existingStyles.styles.forEach(({ value, el, key }) => {
+            if (value) {
+                el.style.setProperty(key, value);
+            }
+            else {
+                el.style.removeProperty(key);
+            }
+        });
+    }
+};
+const handleContainer = (container, shouldIOSLock = false) => {
+    if (!container)
+        return;
+    const modalRestoreStyles = getModalStore().getRestoreStyles();
+    const existingStyles = modalRestoreStyles.find((s) => s.container === container);
+    if (existingStyles) {
+        existingStyles.modals += 1;
+        return;
+    }
+    const containerStyles = [];
+    if (isOverflowing(container)) {
+        // Вычисляет размер до применения `overflow hidden` для избежания скачков
+        const scrollbarSize = browser.getScrollbarSize();
+        containerStyles.push({
+            value: container.style.paddingRight,
+            key: 'padding-right',
+            el: container,
+        });
+        // Вычисляем стили, чтобы получить реальный `padding` c шириной сколлбара
+        // eslint-disable-next-line no-param-reassign
+        container.style.paddingRight = `${getPaddingRight(container) + scrollbarSize}px`;
+    }
+    const parent = container.parentElement;
+    const scrollContainer = 
+    // TODO: заменить на optional chaining
+    parent &&
+        parent.nodeName === 'HTML' &&
+        window.getComputedStyle(parent).overflowY === 'scroll'
+        ? parent
+        : container;
+    // Блокируем скролл даже если отсутствует скроллбар
+    if (scrollContainer.style.overflow !== 'hidden') {
+        containerStyles.push({
+            value: scrollContainer.style.overflow,
+            key: 'overflow',
+            el: scrollContainer,
+        });
+    }
+    if (!shouldIOSLock) {
+        scrollContainer.style.overflow = 'hidden';
+    }
+    modalRestoreStyles.push({
+        container,
+        modals: 1,
+        styles: containerStyles,
+    });
+};
+
+export { handleContainer, hasScrollbar, isScrolledToBottom, isScrolledToTop, restoreContainerStyles };

package/bottom-sheet/component.js

@@ -21,7 +21,7 @@ var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 var mergeRefs__default = /*#__PURE__*/_interopDefaultCompat(mergeRefs);
 var cn__default = /*#__PURE__*/_interopDefaultCompat(cn);
 
-var styles = {"modal":"bottom-sheet__modal_1o7rf","wrapper":"bottom-sheet__wrapper_1o7rf","fullscreen":"bottom-sheet__fullscreen_1o7rf","component":"bottom-sheet__component_1o7rf","withTransition":"bottom-sheet__withTransition_1o7rf","scrollableContainer":"bottom-sheet__scrollableContainer_1o7rf","marker":"bottom-sheet__marker_1o7rf","defaultMarker":"bottom-sheet__defaultMarker_1o7rf","content":"bottom-sheet__content_1o7rf","noHeader":"bottom-sheet__noHeader_1o7rf","noFooter":"bottom-sheet__noFooter_1o7rf","scrollLocked":"bottom-sheet__scrollLocked_1o7rf","hiddenScrollbar":"bottom-sheet__hiddenScrollbar_1o7rf","disabledPointerEvents":"bottom-sheet__disabledPointerEvents_1o7rf","appear":"bottom-sheet__appear_1o7rf","enter":"bottom-sheet__enter_1o7rf","appearActive":"bottom-sheet__appearActive_1o7rf","enterActive":"bottom-sheet__enterActive_1o7rf","enterDone":"bottom-sheet__enterDone_1o7rf","appearDone":"bottom-sheet__appearDone_1o7rf","exit":"bottom-sheet__exit_1o7rf","exitActive":"bottom-sheet__exitActive_1o7rf","safeAreaBottom":"bottom-sheet__safeAreaBottom_1o7rf","background-accent":"bottom-sheet__background-accent_1o7rf","background-info":"bottom-sheet__background-info_1o7rf","background-attention-muted":"bottom-sheet__background-attention-muted_1o7rf","background-positive-muted":"bottom-sheet__background-positive-muted_1o7rf","background-negative-muted":"bottom-sheet__background-negative-muted_1o7rf","background-primary":"bottom-sheet__background-primary_1o7rf","background-primary-inverted":"bottom-sheet__background-primary-inverted_1o7rf","background-secondary":"bottom-sheet__background-secondary_1o7rf","background-secondary-inverted":"bottom-sheet__background-secondary-inverted_1o7rf","background-tertiary":"bottom-sheet__background-tertiary_1o7rf","background-tertiary-inverted":"bottom-sheet__background-tertiary-inverted_1o7rf","background-quaternary":"bottom-sheet__background-quaternary_1o7rf","background-quaternary-inverted":"bottom-sheet__background-quaternary-inverted_1o7rf","background-specialbg-component":"bottom-sheet__background-specialbg-component_1o7rf","background-specialbg-component-inverted":"bottom-sheet__background-specialbg-component-inverted_1o7rf","background-specialbg-primary-grouped":"bottom-sheet__background-specialbg-primary-grouped_1o7rf","background-specialbg-secondary-grouped":"bottom-sheet__background-specialbg-secondary-grouped_1o7rf","background-specialbg-tertiary-grouped":"bottom-sheet__background-specialbg-tertiary-grouped_1o7rf","background-specialbg-secondary-transparent":"bottom-sheet__background-specialbg-secondary-transparent_1o7rf","background-specialbg-secondary-transparent-inverted":"bottom-sheet__background-specialbg-secondary-transparent-inverted_1o7rf","background-specialbg-tertiary-transparent":"bottom-sheet__background-specialbg-tertiary-transparent_1o7rf","background-specialbg-tertiary-transparent-inverted":"bottom-sheet__background-specialbg-tertiary-transparent-inverted_1o7rf"};
+var styles = {"modal":"bottom-sheet__modal_sd5is","wrapper":"bottom-sheet__wrapper_sd5is","fullscreen":"bottom-sheet__fullscreen_sd5is","component":"bottom-sheet__component_sd5is","withTransition":"bottom-sheet__withTransition_sd5is","scrollableContainer":"bottom-sheet__scrollableContainer_sd5is","marker":"bottom-sheet__marker_sd5is","defaultMarker":"bottom-sheet__defaultMarker_sd5is","content":"bottom-sheet__content_sd5is","noHeader":"bottom-sheet__noHeader_sd5is","noFooter":"bottom-sheet__noFooter_sd5is","scrollLocked":"bottom-sheet__scrollLocked_sd5is","hiddenScrollbar":"bottom-sheet__hiddenScrollbar_sd5is","disabledPointerEvents":"bottom-sheet__disabledPointerEvents_sd5is","appear":"bottom-sheet__appear_sd5is","enter":"bottom-sheet__enter_sd5is","appearActive":"bottom-sheet__appearActive_sd5is","enterActive":"bottom-sheet__enterActive_sd5is","enterDone":"bottom-sheet__enterDone_sd5is","appearDone":"bottom-sheet__appearDone_sd5is","exit":"bottom-sheet__exit_sd5is","exitActive":"bottom-sheet__exitActive_sd5is","safeAreaBottom":"bottom-sheet__safeAreaBottom_sd5is","background-accent":"bottom-sheet__background-accent_sd5is","background-info":"bottom-sheet__background-info_sd5is","background-attention-muted":"bottom-sheet__background-attention-muted_sd5is","background-positive-muted":"bottom-sheet__background-positive-muted_sd5is","background-negative-muted":"bottom-sheet__background-negative-muted_sd5is","background-primary":"bottom-sheet__background-primary_sd5is","background-primary-inverted":"bottom-sheet__background-primary-inverted_sd5is","background-secondary":"bottom-sheet__background-secondary_sd5is","background-secondary-inverted":"bottom-sheet__background-secondary-inverted_sd5is","background-tertiary":"bottom-sheet__background-tertiary_sd5is","background-tertiary-inverted":"bottom-sheet__background-tertiary-inverted_sd5is","background-quaternary":"bottom-sheet__background-quaternary_sd5is","background-quaternary-inverted":"bottom-sheet__background-quaternary-inverted_sd5is","background-specialbg-component":"bottom-sheet__background-specialbg-component_sd5is","background-specialbg-component-inverted":"bottom-sheet__background-specialbg-component-inverted_sd5is","background-specialbg-primary-grouped":"bottom-sheet__background-specialbg-primary-grouped_sd5is","background-specialbg-secondary-grouped":"bottom-sheet__background-specialbg-secondary-grouped_sd5is","background-specialbg-tertiary-grouped":"bottom-sheet__background-specialbg-tertiary-grouped_sd5is","background-specialbg-secondary-transparent":"bottom-sheet__background-specialbg-secondary-transparent_sd5is","background-specialbg-secondary-transparent-inverted":"bottom-sheet__background-specialbg-secondary-transparent-inverted_sd5is","background-specialbg-tertiary-transparent":"bottom-sheet__background-specialbg-tertiary-transparent_sd5is","background-specialbg-tertiary-transparent-inverted":"bottom-sheet__background-specialbg-tertiary-transparent-inverted_sd5is"};
 require('./index.css');
 
 var isNil = coreComponentsShared.fnUtils.isNil;

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

@@ -9,7 +9,7 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
 var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 var cn__default = /*#__PURE__*/_interopDefaultCompat(cn);
 
-var styles = {"footer":"bottom-sheet__footer_1fukf","sticky":"bottom-sheet__sticky_1fukf","highlighted":"bottom-sheet__highlighted_1fukf","background-accent":"bottom-sheet__background-accent_1fukf","background-info":"bottom-sheet__background-info_1fukf","background-attention-muted":"bottom-sheet__background-attention-muted_1fukf","background-positive-muted":"bottom-sheet__background-positive-muted_1fukf","background-negative-muted":"bottom-sheet__background-negative-muted_1fukf","background-primary":"bottom-sheet__background-primary_1fukf","background-primary-inverted":"bottom-sheet__background-primary-inverted_1fukf","background-secondary":"bottom-sheet__background-secondary_1fukf","background-secondary-inverted":"bottom-sheet__background-secondary-inverted_1fukf","background-tertiary":"bottom-sheet__background-tertiary_1fukf","background-tertiary-inverted":"bottom-sheet__background-tertiary-inverted_1fukf","background-quaternary":"bottom-sheet__background-quaternary_1fukf","background-quaternary-inverted":"bottom-sheet__background-quaternary-inverted_1fukf","background-specialbg-component":"bottom-sheet__background-specialbg-component_1fukf","background-specialbg-component-inverted":"bottom-sheet__background-specialbg-component-inverted_1fukf","background-specialbg-primary-grouped":"bottom-sheet__background-specialbg-primary-grouped_1fukf","background-specialbg-secondary-grouped":"bottom-sheet__background-specialbg-secondary-grouped_1fukf","background-specialbg-tertiary-grouped":"bottom-sheet__background-specialbg-tertiary-grouped_1fukf","background-specialbg-secondary-transparent":"bottom-sheet__background-specialbg-secondary-transparent_1fukf","background-specialbg-secondary-transparent-inverted":"bottom-sheet__background-specialbg-secondary-transparent-inverted_1fukf","background-specialbg-tertiary-transparent":"bottom-sheet__background-specialbg-tertiary-transparent_1fukf","background-specialbg-tertiary-transparent-inverted":"bottom-sheet__background-specialbg-tertiary-transparent-inverted_1fukf"};
+var styles = {"footer":"bottom-sheet__footer_wrdjq","sticky":"bottom-sheet__sticky_wrdjq","highlighted":"bottom-sheet__highlighted_wrdjq","background-accent":"bottom-sheet__background-accent_wrdjq","background-info":"bottom-sheet__background-info_wrdjq","background-attention-muted":"bottom-sheet__background-attention-muted_wrdjq","background-positive-muted":"bottom-sheet__background-positive-muted_wrdjq","background-negative-muted":"bottom-sheet__background-negative-muted_wrdjq","background-primary":"bottom-sheet__background-primary_wrdjq","background-primary-inverted":"bottom-sheet__background-primary-inverted_wrdjq","background-secondary":"bottom-sheet__background-secondary_wrdjq","background-secondary-inverted":"bottom-sheet__background-secondary-inverted_wrdjq","background-tertiary":"bottom-sheet__background-tertiary_wrdjq","background-tertiary-inverted":"bottom-sheet__background-tertiary-inverted_wrdjq","background-quaternary":"bottom-sheet__background-quaternary_wrdjq","background-quaternary-inverted":"bottom-sheet__background-quaternary-inverted_wrdjq","background-specialbg-component":"bottom-sheet__background-specialbg-component_wrdjq","background-specialbg-component-inverted":"bottom-sheet__background-specialbg-component-inverted_wrdjq","background-specialbg-primary-grouped":"bottom-sheet__background-specialbg-primary-grouped_wrdjq","background-specialbg-secondary-grouped":"bottom-sheet__background-specialbg-secondary-grouped_wrdjq","background-specialbg-tertiary-grouped":"bottom-sheet__background-specialbg-tertiary-grouped_wrdjq","background-specialbg-secondary-transparent":"bottom-sheet__background-specialbg-secondary-transparent_wrdjq","background-specialbg-secondary-transparent-inverted":"bottom-sheet__background-specialbg-secondary-transparent-inverted_wrdjq","background-specialbg-tertiary-transparent":"bottom-sheet__background-specialbg-tertiary-transparent_wrdjq","background-specialbg-tertiary-transparent-inverted":"bottom-sheet__background-specialbg-tertiary-transparent-inverted_wrdjq"};
 require('./index.css');
 
 var Footer = function (_a) {

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

@@ -50,58 +50,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_1fukf {
+} .bottom-sheet__footer_wrdjq {
     padding: var(--gap-m) var(--gap-m);
     background-color: var(--color-light-modal-bg-primary);
-} .bottom-sheet__sticky_1fukf {
+} .bottom-sheet__sticky_wrdjq {
     position: sticky;
     bottom: 0;
     z-index: 1;
-} .bottom-sheet__highlighted_1fukf {
+} .bottom-sheet__highlighted_wrdjq {
     border-top: var(--bottom-sheet-footer-border-top);
     background-color: var(--bottom-sheet-footer-background-color);
-} .bottom-sheet__background-accent_1fukf {
+} .bottom-sheet__background-accent_wrdjq {
             background-color: var(--color-light-bg-accent);
-        } .bottom-sheet__background-info_1fukf {
+        } .bottom-sheet__background-info_wrdjq {
             background-color: var(--color-light-bg-info);
-        } .bottom-sheet__background-attention-muted_1fukf {
+        } .bottom-sheet__background-attention-muted_wrdjq {
             background-color: var(--color-light-bg-attention-muted);
-        } .bottom-sheet__background-positive-muted_1fukf {
+        } .bottom-sheet__background-positive-muted_wrdjq {
             background-color: var(--color-light-bg-positive-muted);
-        } .bottom-sheet__background-negative-muted_1fukf {
+        } .bottom-sheet__background-negative-muted_wrdjq {
             background-color: var(--color-light-bg-negative-muted);
-        } .bottom-sheet__background-primary_1fukf {
+        } .bottom-sheet__background-primary_wrdjq {
             background-color: var(--color-light-bg-primary);
-        } .bottom-sheet__background-primary-inverted_1fukf {
+        } .bottom-sheet__background-primary-inverted_wrdjq {
             background-color: var(--color-light-bg-primary-inverted);
-        } .bottom-sheet__background-secondary_1fukf {
+        } .bottom-sheet__background-secondary_wrdjq {
             background-color: var(--color-light-bg-secondary);
-        } .bottom-sheet__background-secondary-inverted_1fukf {
+        } .bottom-sheet__background-secondary-inverted_wrdjq {
             background-color: var(--color-light-bg-secondary-inverted);
-        } .bottom-sheet__background-tertiary_1fukf {
+        } .bottom-sheet__background-tertiary_wrdjq {
             background-color: var(--color-light-bg-tertiary);
-        } .bottom-sheet__background-tertiary-inverted_1fukf {
+        } .bottom-sheet__background-tertiary-inverted_wrdjq {
             background-color: var(--color-light-bg-tertiary-inverted);
-        } .bottom-sheet__background-quaternary_1fukf {
+        } .bottom-sheet__background-quaternary_wrdjq {
             background-color: var(--color-light-bg-quaternary);
-        } .bottom-sheet__background-quaternary-inverted_1fukf {
+        } .bottom-sheet__background-quaternary-inverted_wrdjq {
             background-color: var(--color-light-bg-quaternary-inverted);
-        } .bottom-sheet__background-specialbg-component_1fukf {
+        } .bottom-sheet__background-specialbg-component_wrdjq {
             background-color: var(--color-light-specialbg-component);
-        } .bottom-sheet__background-specialbg-component-inverted_1fukf {
+        } .bottom-sheet__background-specialbg-component-inverted_wrdjq {
             background-color: var(--color-light-specialbg-component-inverted);
-        } .bottom-sheet__background-specialbg-primary-grouped_1fukf {
+        } .bottom-sheet__background-specialbg-primary-grouped_wrdjq {
             background-color: var(--color-light-specialbg-primary-grouped);
-        } .bottom-sheet__background-specialbg-secondary-grouped_1fukf {
+        } .bottom-sheet__background-specialbg-secondary-grouped_wrdjq {
             background-color: var(--color-light-specialbg-secondary-grouped);
-        } .bottom-sheet__background-specialbg-tertiary-grouped_1fukf {
+        } .bottom-sheet__background-specialbg-tertiary-grouped_wrdjq {
             background-color: var(--color-light-specialbg-tertiary-grouped);
-        } .bottom-sheet__background-specialbg-secondary-transparent_1fukf {
+        } .bottom-sheet__background-specialbg-secondary-transparent_wrdjq {
             background-color: var(--color-light-specialbg-secondary-transparent);
-        } .bottom-sheet__background-specialbg-secondary-transparent-inverted_1fukf {
+        } .bottom-sheet__background-specialbg-secondary-transparent-inverted_wrdjq {
             background-color: var(--color-light-specialbg-secondary-transparent-inverted);
-        } .bottom-sheet__background-specialbg-tertiary-transparent_1fukf {
+        } .bottom-sheet__background-specialbg-tertiary-transparent_wrdjq {
             background-color: var(--color-light-specialbg-tertiary-transparent);
-        } .bottom-sheet__background-specialbg-tertiary-transparent-inverted_1fukf {
+        } .bottom-sheet__background-specialbg-tertiary-transparent-inverted_wrdjq {
             background-color: var(--color-light-specialbg-tertiary-transparent-inverted);
         }

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

@@ -11,7 +11,7 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
 var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 var cn__default = /*#__PURE__*/_interopDefaultCompat(cn);
 
-var styles = {"headerWrapper":"bottom-sheet__headerWrapper_vwfsu","hasContent":"bottom-sheet__hasContent_vwfsu","header":"bottom-sheet__header_vwfsu","sticky":"bottom-sheet__sticky_vwfsu","highlighted":"bottom-sheet__highlighted_vwfsu","justifyEnd":"bottom-sheet__justifyEnd_vwfsu","addon":"bottom-sheet__addon_vwfsu","addonFixed":"bottom-sheet__addonFixed_vwfsu","title":"bottom-sheet__title_vwfsu","titleCenter":"bottom-sheet__titleCenter_vwfsu","titleLeft":"bottom-sheet__titleLeft_vwfsu","trimTitle":"bottom-sheet__trimTitle_vwfsu"};
+var styles = {"headerWrapper":"bottom-sheet__headerWrapper_tbk9t","hasContent":"bottom-sheet__hasContent_tbk9t","header":"bottom-sheet__header_tbk9t","sticky":"bottom-sheet__sticky_tbk9t","highlighted":"bottom-sheet__highlighted_tbk9t","justifyEnd":"bottom-sheet__justifyEnd_tbk9t","addon":"bottom-sheet__addon_tbk9t","addonFixed":"bottom-sheet__addonFixed_tbk9t","title":"bottom-sheet__title_tbk9t","titleCenter":"bottom-sheet__titleCenter_tbk9t","titleLeft":"bottom-sheet__titleLeft_tbk9t","trimTitle":"bottom-sheet__trimTitle_tbk9t"};
 require('./index.css');
 
 var Header = function (_a) {