@alfalab/core-components 48.9.0-beta.1 → 48.9.1

package/universal-modal/moderncssm/components/header/mobile/mobile.module.css

@@ -1,31 +0,0 @@
-/* */
-:root {
-    --universal-modal-header-mobile-font-size: 20px;
-    --universal-modal-header-mobile-line-height: 28px;
-    --universal-modal-header-mobile-font-family: var(--font-family-system);
-    --universal-modal-header-mobile-font-weight: 600;
-}
-.header {
-    padding: var(--gap-8) var(--gap-4);
-}
-.sticky {
-    top: var(--gap-0);
-}
-.content {
-    font-size: var(--universal-modal-header-mobile-font-size);
-    line-height: var(--universal-modal-header-mobile-line-height);
-    font-family: var(--universal-modal-header-mobile-font-family);
-    font-weight: var(--universal-modal-header-mobile-font-weight);
-    padding: 0 var(--gap-12);
-    min-height: 40px;
-    justify-content: center;
-}
-.bottomAddons {
-    font-size: 20px;
-    line-height: 28px;
-    font-weight: 600;
-    padding: 6px var(--gap-16);
-}
-.addon {
-    height: 40px;
-}

package/universal-modal/moderncssm/components/header/responsive/Component.responsive.d.ts

@@ -1,5 +0,0 @@
-import { FC } from 'react';
-import { HeaderDesktopProps, HeaderMobileProps } from "../index";
-type HeaderResponsiveProps = HeaderDesktopProps | HeaderMobileProps;
-declare const HeaderResponsive: FC<HeaderResponsiveProps>;
-export { HeaderResponsiveProps, HeaderResponsive };

package/universal-modal/moderncssm/components/header/responsive/Component.responsive.js

@@ -1,22 +0,0 @@
-import React from 'react';
-import { useIsDesktop } from '../../../../../mq/moderncssm';
-import { HeaderDesktop } from '../desktop/Component.desktop.js';
-import { HeaderMobile } from '../mobile/Component.mobile.js';
-import 'classnames';
-import '../../../../../navigation-bar-private/moderncssm';
-import '../../../Context.js';
-import '../../../../../base-modal/moderncssm';
-import '../../../ResponsiveContext.js';
-import '../base-header/index.module.css';
-import '../desktop/desktop.module.css';
-import '../mobile/mobile.module.css';
-
-const HeaderResponsive = ({ ...restProps }) => {
-    const isDesktop = useIsDesktop();
-    if (isDesktop) {
-        return React.createElement(HeaderDesktop, { ...restProps });
-    }
-    return React.createElement(HeaderMobile, { ...restProps });
-};
-
-export { HeaderResponsive };

package/universal-modal/moderncssm/desktop/Component.desktop.d.ts

@@ -1,10 +0,0 @@
-/// <reference types="react" />
-import React from 'react';
-declare const UniversalModalDesktopComponent: React.ForwardRefExoticComponent<import("./types/props").BaseUniversalModalProps & Pick<import("../../../base-modal").BaseModalProps, "children" | "className" | "dataTestId" | "open"> & React.RefAttributes<HTMLDivElement>>;
-declare const UniversalModalDesktop: React.ForwardRefExoticComponent<import("./types/props").BaseUniversalModalProps & Pick<import("../../../base-modal").BaseModalProps, "children" | "className" | "dataTestId" | "open"> & React.RefAttributes<HTMLDivElement>> & {
-    Header: React.FC<import("../components/header/index").HeaderDesktopProps>;
-    Content: React.FC<import("../components/content/index").ContentDesktopProps>;
-    Footer: React.FC<import("../components/footer/index").FooterDesktopProps>;
-    Controls: React.FC<import("../components/controls/index").ControlsDesktopProps>;
-};
-export { UniversalModalDesktopComponent, UniversalModalDesktop };

package/universal-modal/moderncssm/desktop/Component.desktop.js

@@ -1,69 +0,0 @@
-import React, { forwardRef, useState, useMemo } from 'react';
-import '../../../mq/moderncssm';
-import { ContentDesktop } from '../components/content/desktop/Component.desktop.js';
-import 'classnames';
-import '../../../base-modal/moderncssm';
-import '../components/content/base-content/index.module.css';
-import '../components/content/mobile/mobile.module.css';
-import { ControlsDesktop } from '../components/controls/desktop/Component.desktop.js';
-import '../components/footer/desktop/layout.module.css';
-import '../components/controls/base-controls/index.module.css';
-import { FooterDesktop } from '../components/footer/desktop/Component.desktop.js';
-import '../components/footer/base-footer/index.module.css';
-import '../components/footer/mobile/layout.mobile.module.css';
-import '../components/footer/mobile/mobile.module.css';
-import { HeaderDesktop } from '../components/header/desktop/Component.desktop.js';
-import '../../../navigation-bar-private/moderncssm';
-import '../components/header/base-header/index.module.css';
-import '../components/header/mobile/mobile.module.css';
-import { ResponsiveContext } from '../ResponsiveContext.js';
-import { CenterModal } from './components/center-modal/center-modal.js';
-import { SideModal } from './components/side-modal/side-modal.js';
-import '../components/content/base-content/base-content.js';
-import '../Context.js';
-import './const/index.js';
-import '../components/footer/base-footer/base-footer.js';
-import '../components/footer/desktop/desktop.module.css';
-import '../components/header/desktop/desktop.module.css';
-import '../../../shared/moderncssm';
-import './hooks/useModalHeight.js';
-import './hooks/useModalMargin.js';
-import './hooks/useModalWheel.js';
-import './hooks/useModalWidth.js';
-import './components/base-universal-modal-content/base-universal-modal-content.js';
-import '../../../scrollbar/moderncssm';
-import './components/base-universal-modal-content/base-universal-modal-content.module.css';
-import './components/center-modal/center-modal.module.css';
-import './components/center-modal/safari-transitions.module.css';
-import './components/center-modal/transitions.module.css';
-import '../utils/getMarginValues.js';
-import './components/side-modal/side-modal.module.css';
-
-const UniversalModalDesktopComponent = forwardRef(({ children, horizontalAlign = 'center', ...restProps }, ref) => {
-    const [modalWidth, setModalWidth] = useState(0);
-    const [modalHeaderHighlighted, setModalHeaderHighlighted] = useState(false);
-    const [modalFooterHighlighted, setModalFooterHighlighted] = useState(false);
-    const contextValue = useMemo(() => ({
-        modalWidth,
-        modalHeaderHighlighted,
-        modalFooterHighlighted,
-        setModalWidth,
-        setModalHeaderHighlighted,
-        setModalFooterHighlighted,
-    }), [modalWidth, modalHeaderHighlighted, modalFooterHighlighted]);
-    const renderModal = () => {
-        if (horizontalAlign === 'center') {
-            return (React.createElement(CenterModal, { ...restProps, ref: ref, horizontalAlign: horizontalAlign }, children));
-        }
-        return (React.createElement(SideModal, { ...restProps, ref: ref, horizontalAlign: horizontalAlign }, children));
-    };
-    return (React.createElement(ResponsiveContext.Provider, { value: contextValue }, renderModal()));
-});
-const UniversalModalDesktop = Object.assign(UniversalModalDesktopComponent, {
-    Header: HeaderDesktop,
-    Content: ContentDesktop,
-    Footer: FooterDesktop,
-    Controls: ControlsDesktop,
-});
-
-export { UniversalModalDesktop, UniversalModalDesktopComponent };

package/universal-modal/moderncssm/desktop/components/base-universal-modal-content/base-universal-modal-content.d.ts

@@ -1,7 +0,0 @@
-import { FC } from 'react';
-import { BaseModalProps } from "../../../../../base-modal";
-type Props = {
-    wheelDeltaY: number;
-} & Pick<BaseModalProps, 'children'>;
-declare const BaseUniversalModalContent: FC<Props>;
-export { BaseUniversalModalContent };

package/universal-modal/moderncssm/desktop/components/base-universal-modal-content/base-universal-modal-content.js

@@ -1,111 +0,0 @@
-import React, { useContext, useRef, useEffect } from 'react';
-import { Scrollbar } from '../../../../../scrollbar/moderncssm';
-import { ResponsiveContext } from '../../../ResponsiveContext.js';
-import { SCROLLBAR_DEFAULT_GAP } from '../../const/index.js';
-import styles from './base-universal-modal-content.module.css';
-
-const BaseUniversalModalContent = (props) => {
-    const { children, wheelDeltaY } = props;
-    const { setModalHeaderHighlighted, setModalFooterHighlighted } = useContext(ResponsiveContext) || {};
-    const scrollableNodeRef = useRef(null);
-    const scrollbarContentNodeRef = useRef(null);
-    const scrollbarRef = useRef(null);
-    const headerElementRef = useRef(null);
-    const footerElementRef = useRef(null);
-    // расчет overlap состояния
-    const handleScroll = (e) => {
-        const target = e.target;
-        const { scrollTop, scrollHeight, clientHeight } = target;
-        const isElementFullScrolled = scrollHeight - scrollTop === clientHeight;
-        if (setModalHeaderHighlighted) {
-            setModalHeaderHighlighted(scrollTop > 0);
-        }
-        if (setModalFooterHighlighted) {
-            setModalFooterHighlighted(!isElementFullScrolled);
-        }
-    };
-    useEffect(() => {
-        if (scrollableNodeRef.current) {
-            scrollableNodeRef.current.scrollBy({
-                top: wheelDeltaY,
-            });
-        }
-    }, [wheelDeltaY]);
-    // получаем ссылки на элементы хэдера и футера при первом рендере
-    useEffect(() => {
-        if (scrollbarContentNodeRef.current) {
-            headerElementRef.current =
-                scrollbarContentNodeRef.current.querySelector('div[data-name="modalHeaderDesktop"]');
-            footerElementRef.current =
-                scrollbarContentNodeRef.current.querySelector('div[data-name="modalFooterDesktop"]');
-        }
-    }, []);
-    // очищаем overlap значения в контексте
-    useEffect(() => () => {
-        if (setModalHeaderHighlighted) {
-            setModalHeaderHighlighted(false);
-        }
-        if (setModalFooterHighlighted) {
-            setModalFooterHighlighted(false);
-        }
-    }, [setModalHeaderHighlighted, setModalFooterHighlighted]);
-    // расчет размера полосы прокрутки
-    useEffect(() => {
-        if (scrollbarRef.current) {
-            const verticalBar = scrollbarRef.current.querySelector(`.${styles.verticalBarContainer}`);
-            if (verticalBar) {
-                const headerHeight = headerElementRef?.current?.offsetHeight || 0;
-                const footerHeight = footerElementRef?.current?.offsetHeight || 0;
-                let topGap;
-                let topOffset;
-                let bottomGap;
-                if (headerHeight) {
-                    // если есть header уменьшаем размер скролла на величину хедера и добавляем отступ сверху
-                    topGap = headerHeight;
-                    topOffset = headerHeight;
-                    // console.warn(headerHeight);
-                }
-                else {
-                    // иначе уменьшаем размер скролла и увеличиваем отступ на величину скругления
-                    topGap = SCROLLBAR_DEFAULT_GAP;
-                    topOffset = SCROLLBAR_DEFAULT_GAP;
-                }
-                if (footerHeight) {
-                    // если есть footer уменьшаем размер скролла на величину футера
-                    bottomGap = footerHeight;
-                }
-                else {
-                    // иначе уменьшаем размер на величину скругления
-                    bottomGap = SCROLLBAR_DEFAULT_GAP;
-                }
-                verticalBar.style.height = `calc(100% - ${topGap}px - ${bottomGap}px)`;
-                verticalBar.style.top = `${topOffset}px`;
-            }
-        }
-    });
-    // расчет overlap футера при resize событии
-    useEffect(() => {
-        const resizeObserver = new ResizeObserver(() => {
-            const contentHeight = scrollbarContentNodeRef.current?.clientHeight || 0;
-            const wrapperHeight = scrollableNodeRef.current?.clientHeight || 0;
-            if (setModalFooterHighlighted) {
-                setModalFooterHighlighted(contentHeight > wrapperHeight);
-            }
-        });
-        if (scrollbarContentNodeRef.current) {
-            resizeObserver.observe(scrollbarContentNodeRef.current);
-        }
-        return () => {
-            resizeObserver.disconnect();
-        };
-    }, [setModalFooterHighlighted]);
-    return (React.createElement(Scrollbar, { className: styles.scrollbarWrapper, verticalBarClassName: styles.verticalBarContainer, ref: scrollbarRef, scrollableNodeProps: {
-            ref: scrollableNodeRef,
-            className: styles.scrollContentWrapper,
-        }, contentNodeProps: {
-            ref: scrollbarContentNodeRef,
-            className: styles.scrollbarContainer,
-        }, onContentScroll: handleScroll }, children));
-};
-
-export { BaseUniversalModalContent };

package/universal-modal/moderncssm/desktop/components/base-universal-modal-content/base-universal-modal-content.module.css

@@ -1,20 +0,0 @@
-/* */
-
-.scrollbarWrapper.scrollbarWrapper {
-    height: 100%
-}
-
-.scrollbarWrapper.scrollbarWrapper .verticalBarContainer {
-        box-sizing: border-box;
-    }
-
-.scrollbarWrapper.scrollbarWrapper .scrollContentWrapper {
-        display: flex;
-        flex-direction: column
-    }
-
-.scrollbarWrapper.scrollbarWrapper .scrollContentWrapper .scrollbarContainer {
-            display: flex;
-            flex-direction: column;
-            flex: 1;
-        }

package/universal-modal/moderncssm/desktop/components/buttons/arrow-button/arrow-button.d.ts

@@ -1,6 +0,0 @@
-import { FC, MouseEvent } from 'react';
-type ArrowButtonDesktopProps = {
-    onClick?: (e: MouseEvent) => void;
-};
-declare const ArrowButtonDesktop: FC<ArrowButtonDesktopProps>;
-export { ArrowButtonDesktop };

package/universal-modal/moderncssm/desktop/components/buttons/arrow-button/arrow-button.js

@@ -1,13 +0,0 @@
-import React from 'react';
-import { ButtonDesktop } from '../../../../../../button/moderncssm/desktop';
-import { Typography } from '../../../../../../typography/moderncssm';
-import { ArrowLeftMediumMIcon } from '@alfalab/icons-glyph/ArrowLeftMediumMIcon';
-import styles from './arrow-button.module.css';
-
-const ArrowButtonDesktop = (props) => {
-    const { onClick } = props;
-    return (React.createElement(ButtonDesktop, { shape: 'rounded', size: 48, leftAddons: React.createElement(ArrowLeftMediumMIcon, null), className: styles.button, onClick: onClick },
-        React.createElement(Typography.Text, { view: 'primary-large', weight: 'medium' }, "\u041D\u0430\u0437\u0430\u0434")));
-};
-
-export { ArrowButtonDesktop };

package/universal-modal/moderncssm/desktop/components/buttons/arrow-button/arrow-button.module.css

@@ -1,8 +0,0 @@
-/* */
-
-.button.button {
-    padding: 0 var(--gap-12);
-    background-color: var(--color-light-bg-primary-alpha-40);
-    -webkit-backdrop-filter: blur(10px);
-            backdrop-filter: blur(10px);
-}

package/universal-modal/moderncssm/desktop/components/buttons/arrow-button/index.d.ts

@@ -1 +0,0 @@
-export { ArrowButtonDesktop } from "./arrow-button";

package/universal-modal/moderncssm/desktop/components/buttons/arrow-button/index.js

@@ -1,6 +0,0 @@
-export { ArrowButtonDesktop } from './arrow-button.js';
-import 'react';
-import '../../../../../../button/moderncssm/desktop';
-import '../../../../../../typography/moderncssm';
-import '@alfalab/icons-glyph/ArrowLeftMediumMIcon';
-import './arrow-button.module.css';

package/universal-modal/moderncssm/desktop/components/buttons/cross-button/cross-button.d.ts

@@ -1,6 +0,0 @@
-import { FC } from 'react';
-type CrossButtonProps = {
-    onClick?: () => void;
-};
-declare const CrossButtonDesktop: FC<CrossButtonProps>;
-export { CrossButtonDesktop };

package/universal-modal/moderncssm/desktop/components/buttons/cross-button/cross-button.js

@@ -1,11 +0,0 @@
-import React from 'react';
-import { ButtonDesktop } from '../../../../../../button/moderncssm/desktop';
-import { CrossMediumMIcon } from '@alfalab/icons-glyph/CrossMediumMIcon';
-import styles from './cross-button.module.css';
-
-const CrossButtonDesktop = (props) => {
-    const { onClick } = props;
-    return (React.createElement(ButtonDesktop, { leftAddons: React.createElement(CrossMediumMIcon, null), size: 48, shape: 'rounded', className: styles.button, onClick: onClick }));
-};
-
-export { CrossButtonDesktop };

package/universal-modal/moderncssm/desktop/components/buttons/cross-button/cross-button.module.css

@@ -1,7 +0,0 @@
-/* */
-
-.button.button {
-    background-color: var(--color-light-bg-primary-alpha-40);
-    -webkit-backdrop-filter: blur(10px);
-            backdrop-filter: blur(10px);
-}

package/universal-modal/moderncssm/desktop/components/buttons/cross-button/index.d.ts

@@ -1 +0,0 @@
-export { CrossButtonDesktop } from "./cross-button";

package/universal-modal/moderncssm/desktop/components/buttons/cross-button/index.js

@@ -1,5 +0,0 @@
-export { CrossButtonDesktop } from './cross-button.js';
-import 'react';
-import '../../../../../../button/moderncssm/desktop';
-import '@alfalab/icons-glyph/CrossMediumMIcon';
-import './cross-button.module.css';

package/universal-modal/moderncssm/desktop/components/center-modal/center-modal.d.ts

@@ -1,4 +0,0 @@
-/// <reference types="react" />
-import React from 'react';
-declare const CenterModal: React.ForwardRefExoticComponent<import("../../types/props").BaseUniversalModalProps & Pick<import("../../../../../base-modal").BaseModalProps, "children" | "className" | "dataTestId" | "open"> & React.RefAttributes<HTMLDivElement>>;
-export { CenterModal };

package/universal-modal/moderncssm/desktop/components/center-modal/center-modal.js

@@ -1,43 +0,0 @@
-import React, { forwardRef, useRef } from 'react';
-import cn from 'classnames';
-import { BaseModal } from '../../../../../base-modal/moderncssm';
-import { os, browser } from '../../../../../shared/moderncssm';
-import { useModalHeight } from '../../hooks/useModalHeight.js';
-import { useModalMargin } from '../../hooks/useModalMargin.js';
-import { useModalWheel } from '../../hooks/useModalWheel.js';
-import { useModalWidth } from '../../hooks/useModalWidth.js';
-import { BaseUniversalModalContent } from '../base-universal-modal-content/base-universal-modal-content.js';
-import styles from './center-modal.module.css';
-import safariTransitions from './safari-transitions.module.css';
-import transitions from './transitions.module.css';
-import '../../../ResponsiveContext.js';
-import '../../../../../scrollbar/moderncssm';
-import '../../const/index.js';
-import '../base-universal-modal-content/base-universal-modal-content.module.css';
-
-const transitionProps = os.isMacOS() && browser.isSafari() ? safariTransitions : transitions;
-const CenterModal = forwardRef((props, ref) => {
-    const { dataTestId, className, open, children, width = 500, height = 'fullHeight', verticalAlign = 'center', overlay = true, margin = ['auto'], onClose, ...restProps } = props;
-    const componentRef = useRef(null);
-    useModalMargin({
-        margin,
-        open,
-        componentRef,
-        verticalAlign,
-        horizontalAlign: restProps.horizontalAlign,
-    });
-    useModalWidth(width, open, componentRef);
-    useModalHeight(height, open, componentRef);
-    const { wheelDeltaY, handleWheel } = useModalWheel(overlay);
-    return (React.createElement(BaseModal, { ...restProps, dataTestId: dataTestId, ref: ref, componentRef: componentRef, transitionProps: {
-            classNames: transitionProps,
-        }, className: cn(className, styles.component, {
-            [styles.overlayHidden]: !overlay,
-        }), scrollHandler: 'content', open: open, backdropProps: {
-            transparent: !overlay,
-        }, disableBlockingScroll: !overlay, onWheel: handleWheel, onClose: onClose },
-        React.createElement("div", { className: styles.container },
-            React.createElement(BaseUniversalModalContent, { wheelDeltaY: wheelDeltaY }, children))));
-});
-
-export { CenterModal };

package/universal-modal/moderncssm/desktop/components/center-modal/center-modal.module.css

@@ -1,24 +0,0 @@
-/* */
-
-:root {
-
-    /* scroll */
-}
-
-.component {
-    min-width: 500px;
-    width: 500px;
-    min-height: 264px;
-    height: 100%;
-    border-radius: var(--border-radius-24);
-    overflow-x: hidden;
-    will-change: transform
-}
-
-.component.overlayHidden {
-        box-shadow: var(--shadow-m);
-    }
-
-.component .container {
-        height: 100%;
-    }

package/universal-modal/moderncssm/desktop/components/center-modal/index.d.ts

@@ -1 +0,0 @@
-export { CenterModal } from "./center-modal";

package/universal-modal/moderncssm/desktop/components/center-modal/index.js

@@ -1,17 +0,0 @@
-export { CenterModal } from './center-modal.js';
-import 'react';
-import 'classnames';
-import '../../../../../base-modal/moderncssm';
-import '../../../../../shared/moderncssm';
-import '../../hooks/useModalHeight.js';
-import '../../hooks/useModalMargin.js';
-import '../../hooks/useModalWheel.js';
-import '../../hooks/useModalWidth.js';
-import '../../../ResponsiveContext.js';
-import '../base-universal-modal-content/base-universal-modal-content.js';
-import '../../../../../scrollbar/moderncssm';
-import '../../const/index.js';
-import '../base-universal-modal-content/base-universal-modal-content.module.css';
-import './center-modal.module.css';
-import './safari-transitions.module.css';
-import './transitions.module.css';

package/universal-modal/moderncssm/desktop/components/center-modal/safari-transitions.module.css

@@ -1,23 +0,0 @@
-.appear,
-.enter {
-    opacity: 0;
-    transform: translateY(15px);
-}
-
-.appearActive,
-.enterActive {
-    opacity: 1;
-    transform: translateY(0);
-    transition: opacity 200ms ease-in, transform 200ms ease-in;
-}
-
-.exit {
-    opacity: 1;
-}
-
-.exitActive,
-.exitDone {
-    opacity: 0;
-    transform: translateY(15px);
-    transition: opacity 200ms ease-out, transform 200ms ease-out;
-}

package/universal-modal/moderncssm/desktop/components/center-modal/transitions.module.css

@@ -1,23 +0,0 @@
-.appear,
-.enter {
-    opacity: 0;
-    transform: scale(0.9);
-}
-
-.appearActive,
-.enterActive {
-    opacity: 1;
-    transform: translateX(0);
-    transition: opacity 200ms ease-in, transform 200ms ease-in;
-}
-
-.exit {
-    opacity: 1;
-}
-
-.exitActive,
-.exitDone {
-    opacity: 0;
-    transform: scale(0.9);
-    transition: opacity 200ms ease-out, transform 200ms ease-out;
-}

package/universal-modal/moderncssm/desktop/components/side-modal/index.d.ts

@@ -1 +0,0 @@
-export { SideModal } from "./side-modal";

package/universal-modal/moderncssm/desktop/components/side-modal/index.js

@@ -1,16 +0,0 @@
-export { SideModal } from './side-modal.js';
-import 'react';
-import 'classnames';
-import '../../../../../base-modal/moderncssm';
-import '../../../utils/getMarginValues.js';
-import '../../hooks/useModalHeight.js';
-import '../../../../../shared/moderncssm';
-import '../../hooks/useModalMargin.js';
-import '../../hooks/useModalWheel.js';
-import '../../hooks/useModalWidth.js';
-import '../../../ResponsiveContext.js';
-import '../base-universal-modal-content/base-universal-modal-content.js';
-import '../../../../../scrollbar/moderncssm';
-import '../../const/index.js';
-import '../base-universal-modal-content/base-universal-modal-content.module.css';
-import './side-modal.module.css';

package/universal-modal/moderncssm/desktop/components/side-modal/side-modal.d.ts

@@ -1,4 +0,0 @@
-/// <reference types="react" />
-import React from 'react';
-declare const SideModal: React.ForwardRefExoticComponent<import("../../types/props").BaseUniversalModalProps & Pick<import("../../../../../base-modal").BaseModalProps, "children" | "className" | "dataTestId" | "open"> & React.RefAttributes<HTMLDivElement>>;
-export { SideModal };

package/universal-modal/moderncssm/desktop/components/side-modal/side-modal.js

@@ -1,84 +0,0 @@
-import React, { forwardRef, useRef } from 'react';
-import cn from 'classnames';
-import { BaseModal } from '../../../../../base-modal/moderncssm';
-import { getMarginValues } from '../../../utils/getMarginValues.js';
-import { useModalHeight } from '../../hooks/useModalHeight.js';
-import { useModalMargin } from '../../hooks/useModalMargin.js';
-import { useModalWheel } from '../../hooks/useModalWheel.js';
-import { useModalWidth } from '../../hooks/useModalWidth.js';
-import { BaseUniversalModalContent } from '../base-universal-modal-content/base-universal-modal-content.js';
-import styles from './side-modal.module.css';
-import '../../../../../shared/moderncssm';
-import '../../../ResponsiveContext.js';
-import '../../../../../scrollbar/moderncssm';
-import '../../const/index.js';
-import '../base-universal-modal-content/base-universal-modal-content.module.css';
-
-const SideModal = forwardRef((props, ref) => {
-    const { width = 500, height = 'fullHeight', horizontalAlign = 'center', verticalAlign = 'center', overlay = true, open, dataTestId, className, children, margin = [0], onClose, ...restProps } = props;
-    const componentRef = useRef(null);
-    const contentRef = useRef(null);
-    useModalMargin({ margin, open, componentRef, horizontalAlign, verticalAlign });
-    useModalWidth(width, open, componentRef);
-    useModalHeight(height, open, componentRef);
-    const { wheelDeltaY, handleWheel } = useModalWheel(overlay);
-    const isHorizontalStart = horizontalAlign === 'start';
-    const isHorizontalEnd = horizontalAlign === 'end';
-    const isVerticalCenter = verticalAlign === 'center';
-    const isVerticalBottom = verticalAlign === 'bottom';
-    const { right, left } = getMarginValues(margin);
-    return (React.createElement(BaseModal, { ...restProps, open: open, dataTestId: dataTestId, ref: ref, componentRef: componentRef, contentElementRef: contentRef, scrollHandler: 'content', disableBlockingScroll: !overlay, wrapperClassName: cn({
-            [styles.wrapperAlignStart]: isHorizontalStart,
-            [styles.wrapperAlignEnd]: isHorizontalEnd,
-            [styles.wrapperJustifyCenter]: isVerticalCenter,
-            [styles.wrapperJustifyEnd]: isVerticalBottom,
-        }), className: cn(className, styles.component, {
-            [styles.overlayHidden]: !overlay,
-        }), contentClassName: styles.content, transitionProps: {
-            classNames: {},
-            timeout: 200,
-            onEnter: () => {
-                if (componentRef.current) {
-                    if (isHorizontalStart) {
-                        componentRef.current.style.transform = `translateX(calc(-100% - ${left}px))`;
-                    }
-                    if (isHorizontalEnd) {
-                        componentRef.current.style.transform = `translateX(calc(100% + ${right}px))`;
-                    }
-                }
-            },
-            onEntering: () => {
-                if (componentRef.current) {
-                    componentRef.current.style.transform = 'translateX(0)';
-                    componentRef.current.style.transition = 'transform 200ms ease-in';
-                }
-            },
-            onEntered: () => {
-                if (componentRef.current) {
-                    componentRef.current.style.transform = 'translateX(0)';
-                }
-            },
-            onExit: () => {
-                if (componentRef.current) {
-                    componentRef.current.style.transform = 'translateX(0)';
-                }
-            },
-            onExiting: () => {
-                if (componentRef.current) {
-                    componentRef.current.style.transition = 'transform 200ms ease-out';
-                    if (isHorizontalStart) {
-                        componentRef.current.style.transform = `translateX(calc(-100% - ${left}px))`;
-                    }
-                    if (isHorizontalEnd) {
-                        componentRef.current.style.transform = `translateX(calc(100% + ${right}px))`;
-                    }
-                }
-            },
-        }, backdropProps: {
-            transparent: !overlay,
-        }, onWheel: handleWheel, onClose: onClose },
-        React.createElement("div", { className: styles.container },
-            React.createElement(BaseUniversalModalContent, { wheelDeltaY: wheelDeltaY }, children))));
-});
-
-export { SideModal };