@alfalab/core-components-universal-modal 2.0.1 → 2.0.3

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@alfalab/core-components-universal-modal",
-    "version": "2.0.1",
+    "version": "2.0.3",
     "description": "UniversalModal component",
     "keywords": [],
     "license": "MIT",
@@ -14,10 +14,10 @@
         "@alfalab/core-components-base-modal": "^6.0.1",
         "@alfalab/core-components-button": "^12.0.1",
         "@alfalab/core-components-mq": "^5.0.1",
-        "@alfalab/core-components-navigation-bar-private": "^1.0.1",
+        "@alfalab/core-components-navigation-bar-private": "^1.0.2",
         "@alfalab/core-components-scrollbar": "^4.0.0",
         "@alfalab/core-components-shared": "^1.1.0",
-        "@alfalab/core-components-typography": "^5.0.1",
+        "@alfalab/core-components-typography": "^5.0.2",
         "@alfalab/icons-glyph": "^2.247.0",
         "@types/react-transition-group": "^4.4.5",
         "classnames": "^2.5.1",
@@ -33,6 +33,6 @@
         "access": "public",
         "directory": "dist"
     },
-    "themesVersion": "14.1.0",
+    "themesVersion": "14.1.2",
     "varsVersion": "10.1.0"
 }

package/src/Component.responsive.tsx

@@ -7,7 +7,7 @@ import { FooterResponsive } from './components/footer';
 import { HeaderResponsive } from './components/header';
 import { UniversalModalDesktop } from './desktop';
 import { UniversalModalMobile } from './mobile';
-import { UniversalModalResponsiveProps } from './typings';
+import { type UniversalModalResponsiveProps } from './typings';
 
 export const UniversalModal = forwardRef<HTMLDivElement, UniversalModalResponsiveProps>(
     ({ children, breakpoint, defaultMatchMediaValue, dataTestId, ...restProps }, ref) => {

package/src/components/content/base-content/base-content.tsx

@@ -1,4 +1,4 @@
-import React, { FC, ReactNode, Ref, useContext } from 'react';
+import React, { type FC, type ReactNode, type Ref, useContext } from 'react';
 import cn from 'classnames';
 
 import { getDataTestId } from '@alfalab/core-components-shared';
@@ -7,7 +7,7 @@ import { ModalContext } from '../../../Context';
 
 import styles from './index.module.css';
 
-export type ContentProps = {
+export interface ContentProps {
     /**
      * Контент
      */
@@ -22,7 +22,7 @@ export type ContentProps = {
      * Идентификатор для систем автоматизированного тестирования
      */
     dataTestId?: string;
-};
+}
 
 export const BaseContent: FC<ContentProps> = ({ children, className, dataTestId }) => {
     const { contentRef } = useContext(ModalContext);

package/src/components/content/desktop/Component.desktop.tsx

@@ -1,17 +1,17 @@
-import React, { FC, useContext } from 'react';
+import React, { type FC, useContext } from 'react';
 import cn from 'classnames';
 
 import { UniversalModalContext } from '../../../context/universal-modal-context';
-import { BaseContent, ContentProps } from '../base-content/base-content';
+import { BaseContent, type ContentProps } from '../base-content/base-content';
 
 import styles from './desktop.module.css';
 
-export type ContentDesktopProps = ContentProps & {
+export interface ContentDesktopProps extends ContentProps {
     /**
      * Размер (только для desktop версии компонента)
      */
     size?: 's' | 500;
-};
+}
 
 export const ContentDesktop: FC<ContentDesktopProps> = ({ className, ...restProps }) => {
     const { hasHeader, hasFooter } = useContext(UniversalModalContext);

package/src/components/content/mobile/Component.mobile.tsx

@@ -1,8 +1,8 @@
-import React, { FC, useContext } from 'react';
+import React, { type FC, useContext } from 'react';
 import cn from 'classnames';
 
 import { ModalContext } from '../../../Context';
-import { BaseContent, ContentProps } from '../base-content/base-content';
+import { BaseContent, type ContentProps } from '../base-content/base-content';
 
 import styles from './mobile.module.css';
 

package/src/components/content/responsive/Component.responsive.tsx

@@ -1,11 +1,11 @@
-import React, { FC } from 'react';
+import React, { type FC } from 'react';
 
 import { useIsDesktop } from '@alfalab/core-components-mq';
 
-import { ContentDesktop, ContentDesktopProps } from '../desktop/Component.desktop';
-import { ContentMobile, ContentMobileProps } from '../mobile/Component.mobile';
+import { ContentDesktop, type ContentDesktopProps } from '../desktop/Component.desktop';
+import { ContentMobile, type ContentMobileProps } from '../mobile/Component.mobile';
 
-export type ContentResponsiveProps = ContentDesktopProps | ContentMobileProps;
+export interface ContentResponsiveProps extends ContentDesktopProps, ContentMobileProps {}
 
 export const ContentResponsive: FC<ContentResponsiveProps> = ({ ...restProps }) => {
     const isDesktop = useIsDesktop();

package/src/components/footer/base-footer/base-footer.tsx

@@ -1,4 +1,4 @@
-import React, { forwardRef, ReactNode, useContext, useEffect } from 'react';
+import React, { forwardRef, type ReactNode, useContext, useEffect } from 'react';
 import cn from 'classnames';
 
 import { getDataTestId } from '@alfalab/core-components-shared';
@@ -7,7 +7,7 @@ import { ModalContext } from '../../../Context';
 
 import styles from './index.module.css';
 
-export type FooterProps = {
+export interface FooterProps {
     /**
      * Контент футера
      */
@@ -37,7 +37,7 @@ export type FooterProps = {
      * Отбивка бордером
      */
     isHighlighted?: boolean;
-};
+}
 
 export const BaseFooter = forwardRef<HTMLDivElement, FooterProps>((props, ref) => {
     const { children, className, sticky, dataTestId, isHighlighted } = props;

package/src/components/footer/base-footer/index.module.css

@@ -1,10 +1,12 @@
-@import '@alfalab/core-components-vars/src/index.css';
+@import '@alfalab/core-components-vars/src/no-typography-index.css';
 @import '../../../vars.css';
 
 .footer {
     width: 100%;
     box-sizing: border-box;
-    transition: box-shadow 0.2s ease, background 0.2s ease;
+    transition:
+        box-shadow 0.2s ease,
+        background 0.2s ease;
     padding: var(--gap-16) var(--gap-32) var(--gap-32);
 }
 

package/src/components/footer/desktop/Component.desktop.tsx

@@ -3,17 +3,17 @@ import cn from 'classnames';
 
 import { UniversalModalContext } from '../../../context/universal-modal-context';
 import { FOOTER_MEDIUM_BREAKPOINT } from '../../../desktop/constants';
-import { BaseFooter, FooterProps } from '../base-footer/base-footer';
+import { BaseFooter, type FooterProps } from '../base-footer/base-footer';
 
 import styles from './desktop.module.css';
 import layoutStyles from './layout.module.css';
 
-export type FooterDesktopProps = FooterProps & {
+export interface FooterDesktopProps extends FooterProps {
     /**
      * Размер (только для desktop версии компонента)
      */
     size?: 's' | 500;
-};
+}
 
 export const FooterDesktop = forwardRef<HTMLDivElement, FooterDesktopProps>((props, ref) => {
     const { className, sticky, layout = 'start', ...restProps } = props;

package/src/components/footer/mobile/Component.mobile.tsx

@@ -1,8 +1,8 @@
-import React, { FC, useContext } from 'react';
+import React, { type FC, useContext } from 'react';
 import cn from 'classnames';
 
 import { ModalContext } from '../../../Context';
-import { BaseFooter, FooterProps } from '../base-footer/base-footer';
+import { BaseFooter, type FooterProps } from '../base-footer/base-footer';
 
 import layoutStylesMobile from './layout.mobile.module.css';
 import styles from './mobile.module.css';

package/src/components/footer/responsive/Component.responsive.tsx

@@ -2,10 +2,10 @@ import React, { forwardRef } from 'react';
 
 import { useIsDesktop } from '@alfalab/core-components-mq';
 
-import { FooterDesktop, FooterDesktopProps } from '../desktop/Component.desktop';
-import { FooterMobile, FooterMobileProps } from '../mobile/Component.mobile';
+import { FooterDesktop, type FooterDesktopProps } from '../desktop/Component.desktop';
+import { FooterMobile, type FooterMobileProps } from '../mobile/Component.mobile';
 
-export type FooterResponsiveProps = FooterDesktopProps | FooterMobileProps;
+export interface FooterResponsiveProps extends FooterDesktopProps, FooterMobileProps {}
 
 export const FooterResponsive = forwardRef<HTMLDivElement, FooterResponsiveProps>((props, ref) => {
     const isDesktop = useIsDesktop();

package/src/components/header/base-header/index.module.css

@@ -1,10 +1,12 @@
 @import '../../../vars.css';
-@import '@alfalab/core-components-vars/src/index.css';
+@import '@alfalab/core-components-vars/src/no-typography-index.css';
 
 .header {
     width: 100%;
     box-sizing: border-box;
-    transition: box-shadow 0.2s ease, background 0.2s ease;
+    transition:
+        box-shadow 0.2s ease,
+        background 0.2s ease;
     padding: var(--gap-20) var(--gap-20) 0;
 }
 

package/src/components/header/desktop/Component.desktop.tsx

@@ -3,7 +3,7 @@ import cn from 'classnames';
 
 import {
     NavigationBarPrivate,
-    NavigationBarPrivateProps,
+    type NavigationBarPrivateProps,
 } from '@alfalab/core-components-navigation-bar-private';
 import { getDataTestId } from '@alfalab/core-components-shared';
 
@@ -13,16 +13,17 @@ import { UniversalModalContext } from '../../../context/universal-modal-context'
 import styles from '../base-header/index.module.css';
 import desktopStyles from './desktop.module.css';
 
-export type HeaderDesktopProps = Omit<
-    NavigationBarPrivateProps,
-    'size' | 'view' | 'parentRef' | 'titleSize' | 'subtitle'
-> & {
+export interface HeaderDesktopProps
+    extends Omit<
+        NavigationBarPrivateProps,
+        'size' | 'view' | 'parentRef' | 'titleSize' | 'subtitle'
+    > {
     /**
      * Заголовок в шапке крупного размера
      * @default false
      */
     bigTitle?: boolean;
-};
+}
 
 export const HeaderDesktop = forwardRef<HTMLDivElement, HeaderDesktopProps>((props, ref) => {
     const {

package/src/components/header/mobile/Component.mobile.tsx

@@ -1,9 +1,9 @@
-import React, { FC, useContext, useEffect, useRef } from 'react';
+import React, { type FC, useContext, useEffect, useRef } from 'react';
 import cn from 'classnames';
 
 import {
     NavigationBarPrivate,
-    NavigationBarPrivateProps,
+    type NavigationBarPrivateProps,
 } from '@alfalab/core-components-navigation-bar-private';
 import { getDataTestId } from '@alfalab/core-components-shared';
 

package/src/components/header/mobile/mobile.module.css

@@ -1,4 +1,4 @@
-@import '@alfalab/core-components-vars/src/index.css';
+@import '@alfalab/core-components-vars/src/no-typography-index.css';
 @import '../../../mobile/vars.css';
 
 .header {

package/src/components/header/responsive/Component.responsive.tsx

@@ -2,10 +2,10 @@ import React, { forwardRef } from 'react';
 
 import { useIsDesktop } from '@alfalab/core-components-mq';
 
-import { HeaderDesktop, HeaderDesktopProps } from '../desktop/Component.desktop';
-import { HeaderMobile, HeaderMobileProps } from '../mobile/Component.mobile';
+import { HeaderDesktop, type HeaderDesktopProps } from '../desktop/Component.desktop';
+import { HeaderMobile, type HeaderMobileProps } from '../mobile/Component.mobile';
 
-export type HeaderResponsiveProps = HeaderDesktopProps | HeaderMobileProps;
+export interface HeaderResponsiveProps extends HeaderDesktopProps, HeaderMobileProps {}
 
 export const HeaderResponsive = forwardRef<HTMLDivElement, HeaderResponsiveProps>((props, ref) => {
     const isDesktop = useIsDesktop();

package/src/context/universal-modal-context.ts

@@ -1,6 +1,6 @@
 import { createContext } from 'react';
 
-import type { UniversalModalContextType } from '../typings';
+import { type UniversalModalContextType } from '../typings';
 
 export const UniversalModalContext = createContext<UniversalModalContextType>({
     modalWidth: 500,

package/src/desktop/Component.desktop.tsx

@@ -4,11 +4,11 @@ import { ContentDesktop } from '../components/content';
 import { FooterDesktop } from '../components/footer';
 import { HeaderDesktop } from '../components/header';
 import { UniversalModalContext } from '../context/universal-modal-context';
-import { UniversalModalContextType } from '../typings';
+import { type UniversalModalContextType } from '../typings';
 
 import { CenterModal } from './components/center-modal';
 import { SideModal } from './components/side-modal';
-import { UniversalModalDesktopProps } from './types/props';
+import { type UniversalModalDesktopProps } from './types/props';
 import { checkHeaderAndFooter } from './utils/check-header-and-footer';
 
 export const UniversalModalDesktopComponent = forwardRef<

package/src/desktop/components/buttons/arrow-button/arrow-button.module.css

@@ -1,4 +1,4 @@
-@import '@alfalab/core-components-vars/src/index.css';
+@import '@alfalab/core-components-vars/src/no-typography-index.css';
 
 .button.button {
     padding: 0 var(--gap-12);

package/src/desktop/components/buttons/arrow-button/arrow-button.tsx

@@ -1,4 +1,4 @@
-import React, { FC, MouseEvent } from 'react';
+import React, { type FC, type MouseEvent } from 'react';
 
 import { ButtonDesktop } from '@alfalab/core-components-button/desktop';
 import { Typography } from '@alfalab/core-components-typography';
@@ -6,9 +6,9 @@ import { ArrowLeftMediumMIcon } from '@alfalab/icons-glyph/ArrowLeftMediumMIcon'
 
 import styles from './arrow-button.module.css';
 
-type ArrowButtonDesktopProps = {
+interface ArrowButtonDesktopProps {
     onClick?: (e: MouseEvent) => void;
-};
+}
 
 export const ArrowButtonDesktop: FC<ArrowButtonDesktopProps> = (props) => {
     const { onClick } = props;

package/src/desktop/components/buttons/cross-button/cross-button.module.css

@@ -1,4 +1,4 @@
-@import '@alfalab/core-components-vars/src/index.css';
+@import '@alfalab/core-components-vars/src/no-typography-index.css';
 @import '@alfalab/core-components-vars/src/colors-monochrome.css';
 
 .button.button {

package/src/desktop/components/buttons/cross-button/cross-button.tsx

@@ -1,13 +1,13 @@
-import React, { FC } from 'react';
+import React, { type FC } from 'react';
 
 import { ButtonDesktop } from '@alfalab/core-components-button/desktop';
 import { CrossMediumMIcon } from '@alfalab/icons-glyph/CrossMediumMIcon';
 
 import styles from './cross-button.module.css';
 
-type CrossButtonProps = {
+interface CrossButtonProps {
     onClick?: () => void;
-};
+}
 
 export const CrossButtonDesktop: FC<CrossButtonProps> = (props) => {
     const { onClick } = props;

package/src/desktop/components/center-modal/center-modal.tsx

@@ -5,7 +5,7 @@ import { BaseModal } from '@alfalab/core-components-base-modal';
 import { browser, os } from '@alfalab/core-components-shared';
 
 import { useModalWheel } from '../../hooks/useModalWheel';
-import { UniversalModalDesktopProps } from '../../types/props';
+import { type UniversalModalDesktopProps } from '../../types/props';
 import { getFullSizeModalTransitions } from '../../utils/get-full-size-modal-transitions';
 import { getHeightStyle } from '../../utils/get-height-style';
 import { getMarginStyles } from '../../utils/get-margin-styles';

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

@@ -8,7 +8,9 @@
 .enterActive {
     opacity: 1;
     transform: translateY(0) translateZ(0);
-    transition: opacity 200ms ease-in, transform 200ms ease-in;
+    transition:
+        opacity 200ms ease-in,
+        transform 200ms ease-in;
 }
 
 .exit {
@@ -19,5 +21,7 @@
 .exitDone {
     opacity: 0;
     transform: translateY(15px) translateZ(0);
-    transition: opacity 200ms ease-out, transform 200ms ease-out;
+    transition:
+        opacity 200ms ease-out,
+        transform 200ms ease-out;
 }

package/src/desktop/components/center-modal/transitions/transitions.module.css

@@ -8,7 +8,9 @@
 .enterActive {
     opacity: 1;
     transform: translateX(0) translateZ(0);
-    transition: opacity 200ms ease-in, transform 200ms ease-in;
+    transition:
+        opacity 200ms ease-in,
+        transform 200ms ease-in;
 }
 
 .exit {
@@ -19,5 +21,7 @@
 .exitDone {
     opacity: 0;
     transform: scale(0.9) translateZ(0);
-    transition: opacity 200ms ease-out, transform 200ms ease-out;
+    transition:
+        opacity 200ms ease-out,
+        transform 200ms ease-out;
 }

package/src/desktop/components/modal-content/modal-content.module.css

@@ -1,4 +1,4 @@
-@import '@alfalab/core-components-vars/src/index.css';
+@import '@alfalab/core-components-vars/src/no-typography-index.css';
 
 .scrollable {
     height: 100%;

package/src/desktop/components/modal-content/modal-content.tsx

@@ -1,22 +1,23 @@
-import React, { FC, useRef } from 'react';
+import React, { type FC, useRef } from 'react';
 import mergeRefs from 'react-merge-refs';
 import cn from 'classnames';
 
-import { BaseModalProps } from '@alfalab/core-components-base-modal';
+import { type BaseModalProps } from '@alfalab/core-components-base-modal';
 import { Scrollbar } from '@alfalab/core-components-scrollbar';
 
 import { useModalHighlighted } from '../../hooks/use-modal-highlighted';
 import { useOutsideScroll } from '../../hooks/use-outside-scroll';
 import { useSetScrollbarHeight } from '../../hooks/use-set-scrollbar-height';
-import { UniversalModalDesktopProps } from '../../types/props';
+import { type UniversalModalDesktopProps } from '../../types/props';
 import { setFooterAndHeaderRefs } from '../../utils/set-footer-and-header-refs';
 
 import styles from './modal-content.module.css';
 
-type Props = Pick<BaseModalProps, 'children'> &
-    Pick<UniversalModalDesktopProps, 'height' | 'scrollableContainerRef'> & {
-        wheelDeltaY: number;
-    };
+interface Props
+    extends Pick<BaseModalProps, 'children'>,
+        Pick<UniversalModalDesktopProps, 'height' | 'scrollableContainerRef'> {
+    wheelDeltaY: number;
+}
 
 export const ModalContent: FC<Props> = (props) => {
     const { children, wheelDeltaY, height, scrollableContainerRef = null } = props;

package/src/desktop/components/side-modal/get-default-transition-props.ts

@@ -1,13 +1,13 @@
 import cn from 'classnames';
 
-import { UniversalModalDesktopProps } from '../../types/props';
+import { type UniversalModalDesktopProps } from '../../types/props';
 
 import transitions from './transitions/transitions.module.css';
 
-type Params = {
+interface Params {
     horizontalAlign: UniversalModalDesktopProps['horizontalAlign'];
     margin: UniversalModalDesktopProps['margin'];
-};
+}
 
 export const getDefaultTransitionProps = (params: Params) => {
     const { horizontalAlign, margin } = params;

package/src/desktop/components/side-modal/side-modal.module.css

@@ -1,4 +1,4 @@
-@import '@alfalab/core-components-vars/src/index.css';
+@import '@alfalab/core-components-vars/src/no-typography-index.css';
 
 .wrapper {
     overflow-x: hidden;

package/src/desktop/components/side-modal/side-modal.tsx

@@ -4,7 +4,7 @@ import cn from 'classnames';
 import { BaseModal } from '@alfalab/core-components-base-modal';
 
 import { useModalWheel } from '../../hooks/useModalWheel';
-import { UniversalModalDesktopProps } from '../../types/props';
+import { type UniversalModalDesktopProps } from '../../types/props';
 import { getFullSizeModalTransitions } from '../../utils/get-full-size-modal-transitions';
 import { getHeightStyle } from '../../utils/get-height-style';
 import { getMarginStyles } from '../../utils/get-margin-styles';

package/src/desktop/hooks/{use-modal-highlighted.tsx → use-modal-highlighted.ts}

@@ -1,13 +1,13 @@
-import { RefObject, useContext, useEffect } from 'react';
+import { type RefObject, useContext, useEffect } from 'react';
 
-import { ScrollbarProps } from '@alfalab/core-components-scrollbar';
+import { type ScrollbarProps } from '@alfalab/core-components-scrollbar';
 
 import { UniversalModalContext } from '../../context/universal-modal-context';
 
-type Params = {
+interface Params {
     scrollbarContentNodeRef: RefObject<HTMLDivElement>;
     scrollableNodeRef: RefObject<HTMLDivElement>;
-};
+}
 
 /**
  * Расчет overlap состояния

package/src/desktop/hooks/{use-outside-scroll.tsx → use-outside-scroll.ts}

@@ -1,9 +1,9 @@
-import { RefObject, useEffect } from 'react';
+import { type RefObject, useEffect } from 'react';
 
-type Params = {
+interface Params {
     scrollableNodeRef: RefObject<HTMLDivElement>;
     wheelDeltaY: number;
-};
+}
 
 /** Изменение позиции скролла */
 export const useOutsideScroll = (params: Params) => {

package/src/desktop/hooks/{use-set-scrollbar-height.tsx → use-set-scrollbar-height.ts}

@@ -1,13 +1,13 @@
-import { RefObject, useEffect } from 'react';
+import { type RefObject, useEffect } from 'react';
 
 import { SCROLLBAR_DEFAULT_GAP } from '../constants';
 
-type Params = {
+interface Params {
     scrollbarRef: RefObject<HTMLDivElement>;
     verticalBarRef: RefObject<HTMLDivElement>;
     headerElementRef: RefObject<HTMLDivElement>;
     footerElementRef: RefObject<HTMLDivElement>;
-};
+}
 
 /** Устанавливает размер полосы прокрутки в зависимости от наличия хедера и футера */
 export const useSetScrollbarHeight = (params: Params) => {

package/src/desktop/hooks/{useModalWheel.tsx → useModalWheel.ts}

@@ -1,4 +1,4 @@
-import { useState, WheelEvent } from 'react';
+import { useState, type WheelEvent } from 'react';
 
 export const useModalWheel = (overlay: boolean) => {
     const [wheelDeltaY, setWheelDeltaY] = useState<number>(0);

package/src/desktop/styles/transitions/full-size-backdrop-transitions.module.css

@@ -1,4 +1,4 @@
-@import '@alfalab/core-components-vars/src/index.css';
+@import '@alfalab/core-components-vars/src/no-typography-index.css';
 
 :root {
     --universal-modal-backdrop-visible-background: var(--color-light-overlay-default);
@@ -42,7 +42,8 @@
 
 .exitActive {
     opacity: 1;
-    animation: step_1 200ms cubic-bezier(0, 0, 1, 0),
+    animation:
+        step_1 200ms cubic-bezier(0, 0, 1, 0),
         step_2 200ms cubic-bezier(0, 0, 0, 1) 200ms forwards;
 }
 

package/src/desktop/styles/transitions/full-size-vertical-bottom-transitions.module.css

@@ -8,7 +8,9 @@
 .enterActive {
     opacity: 1;
     transform: translateY(0);
-    transition: opacity 200ms cubic-bezier(0, 0, 0, 1), transform 200ms cubic-bezier(0, 0, 0, 1);
+    transition:
+        opacity 200ms cubic-bezier(0, 0, 0, 1),
+        transform 200ms cubic-bezier(0, 0, 0, 1);
 }
 
 .exit {
@@ -20,5 +22,7 @@
 .exitDone {
     opacity: 0;
     transform: translateY(40px);
-    transition: opacity 200ms cubic-bezier(0, 0, 1, 0), transform 200ms cubic-bezier(0, 0, 1, 0);
+    transition:
+        opacity 200ms cubic-bezier(0, 0, 1, 0),
+        transform 200ms cubic-bezier(0, 0, 1, 0);
 }

package/src/desktop/styles/transitions/full-size-vertical-top-transitions.module.css

@@ -8,7 +8,9 @@
 .enterActive {
     opacity: 1;
     transform: translateY(0);
-    transition: opacity 200ms cubic-bezier(0, 0, 0, 1), transform 200ms cubic-bezier(0, 0, 0, 1);
+    transition:
+        opacity 200ms cubic-bezier(0, 0, 0, 1),
+        transform 200ms cubic-bezier(0, 0, 0, 1);
 }
 
 .exit {
@@ -20,5 +22,7 @@
 .exitDone {
     opacity: 0;
     transform: translateY(-40px);
-    transition: opacity 200ms cubic-bezier(0, 0, 1, 0), transform 200ms cubic-bezier(0, 0, 1, 0);
+    transition:
+        opacity 200ms cubic-bezier(0, 0, 1, 0),
+        transform 200ms cubic-bezier(0, 0, 1, 0);
 }