@alfalab/core-components 35.2.0 → 36.1.0

package/modal/esm/components/header/Component.d.ts

@@ -0,0 +1,49 @@
+import { FC, ReactNode } from 'react';
+type HeaderProps = {
+    /**
+     * Контент шапки
+     */
+    children?: ReactNode;
+    /**
+     * Слот слева
+     */
+    leftAddons?: ReactNode;
+    /**
+     * Наличие компонента крестика
+     */
+    hasCloser?: ReactNode;
+    /**
+     * Дополнительный класс
+     */
+    className?: string;
+    /**
+     * Дополнительный класс для аддонов
+     */
+    addonClassName?: string;
+    /**
+     * Дополнительный класс для контента
+     */
+    contentClassName?: string;
+    /**
+     * Заголовок шапки
+     */
+    title?: string;
+    /**
+     * Выравнивание заголовка
+     */
+    align?: 'left' | 'center';
+    /**
+     * Обрезать ли заголовок
+     */
+    trim?: boolean;
+    /**
+     * Фиксирует шапку
+     */
+    sticky?: boolean;
+    /**
+     * Идентификатор для систем автоматизированного тестирования
+     */
+    dataTestId?: string;
+};
+declare const Header: FC<HeaderProps>;
+export { HeaderProps, Header };

package/modal/esm/components/header/Component.js

@@ -1,5 +1,56 @@
-import 'react';
-import 'classnames';
+import '../../tslib.es6-270dfeed.js';
+import React, { useContext, useEffect } from 'react';
+import cn from 'classnames';
+import '../../../../icon-button/esm';
+import '@alfalab/icons-glyph/CrossHeavyMIcon';
 import '../../../../base-modal/esm';
-import '../../Context.js';
-export { H as Header } from '../../Component-feff0e2b.js';
+import { ModalContext } from '../../Context.js';
+import { Closer } from '../closer/Component.js';
+import { ResponsiveContext } from '../../ResponsiveContext.js';
+import { CrossMIcon } from '@alfalab/icons-glyph/CrossMIcon';
+
+var getDataTestId = function (dataTestId, element) {
+    var elementPart = element ? "-" + element.toLowerCase() : '';
+    return dataTestId ? "" + dataTestId + elementPart : undefined;
+};
+
+var desktopStyles = {"header":"modal__header_e81yg","content":"modal__content_e81yg","s":"modal__s_e81yg","m":"modal__m_e81yg","l":"modal__l_e81yg","xl":"modal__xl_e81yg","fullscreen":"modal__fullscreen_e81yg","hasContent":"modal__hasContent_e81yg","sticky":"modal__sticky_e81yg"};
+require('./desktop.css');
+
+var styles = {"header":"modal__header_1uxnt","hasContent":"modal__hasContent_1uxnt","highlighted":"modal__highlighted_1uxnt","sticky":"modal__sticky_1uxnt","content":"modal__content_1uxnt","title":"modal__title_1uxnt","addon":"modal__addon_1uxnt","closer":"modal__closer_1uxnt","left":"modal__left_1uxnt","center":"modal__center_1uxnt","right":"modal__right_1uxnt","trim":"modal__trim_1uxnt"};
+require('./index.css');
+
+var mobileStyles = {"sticky":"modal__sticky_trb8k","content":"modal__content_trb8k"};
+require('./mobile.css');
+
+var Header = function (_a) {
+    var _b, _c;
+    var className = _a.className, addonClassName = _a.addonClassName, contentClassName = _a.contentClassName, leftAddons = _a.leftAddons, children = _a.children, _d = _a.align, align = _d === void 0 ? 'left' : _d, _e = _a.trim, trim = _e === void 0 ? true : _e, title = _a.title, _f = _a.hasCloser, hasCloser = _f === void 0 ? true : _f, sticky = _a.sticky, dataTestId = _a.dataTestId;
+    var _g = useContext(ModalContext), headerHighlighted = _g.headerHighlighted, setHasHeader = _g.setHasHeader;
+    var _h = useContext(ResponsiveContext), size = _h.size, view = _h.view;
+    var hasContent = title || Boolean(children);
+    useEffect(function () {
+        setHasHeader(true);
+    }, [setHasHeader]);
+    return (React.createElement("div", { className: cn(styles.header, className, (_b = {},
+            _b[styles.highlighted] = hasContent && sticky && headerHighlighted,
+            _b[styles.sticky] = sticky,
+            _b[styles.hasContent] = hasContent,
+            _b[desktopStyles.header] = view === 'desktop',
+            _b[desktopStyles.hasContent] = view === 'desktop' && hasContent,
+            _b[desktopStyles.sticky] = view === 'desktop' && sticky,
+            _b[desktopStyles[size]] = view === 'desktop',
+            _b[mobileStyles.sticky] = view === 'mobile' && sticky,
+            _b)), "data-test-id": getDataTestId(dataTestId) },
+        (leftAddons || view === 'desktop') && (React.createElement("div", { className: cn(styles.addon, addonClassName) }, leftAddons)),
+        hasContent && (React.createElement("div", { className: cn(styles.content, contentClassName, styles[align], (_c = {},
+                _c[styles.trim] = trim,
+                _c[desktopStyles.content] = view === 'desktop',
+                _c[mobileStyles.content] = view === 'mobile',
+                _c)) },
+            children,
+            title && (React.createElement("div", { className: styles.title, "data-test-id": getDataTestId(dataTestId, 'title') }, title)))),
+        hasCloser && (React.createElement("div", { className: cn(styles.addon, styles.closer, addonClassName) }, view === 'desktop' ? (React.createElement(Closer, { dataTestId: getDataTestId(dataTestId, 'closer') })) : (React.createElement(Closer, { icon: CrossMIcon, size: 'xs', dataTestId: getDataTestId(dataTestId, 'closer') }))))));
+};
+
+export { Header };

package/modal/esm/components/header/desktop.css

@@ -1,4 +1,4 @@
-/* hash: 18ti8 */
+/* hash: 3gzzu */
 :root {
 
     /* Hard */
@@ -43,45 +43,45 @@
 
     /* mobile */
 }
-.modal__header_1jddb {
+.modal__header_e81yg {
     border-top-left-radius: var(--modal-border-radius);
     border-top-right-radius: var(--modal-border-radius);
 }
-.modal__content_1jddb {
+.modal__content_e81yg {
     font-weight: var(--modal-header-desktop-font-weight);
     font-family: var(--modal-header-desktop-font-family);
 }
-.modal__s_1jddb .modal__content_1jddb,
-.modal__m_1jddb .modal__content_1jddb {
+.modal__s_e81yg .modal__content_e81yg,
+.modal__m_e81yg .modal__content_e81yg {
     padding: var(--modal-s-header-desktop-content-paddings);
     font-size: var(--modal-s-header-desktop-font-size);
     line-height: var(--modal-s-header-desktop-line-height);
 }
-.modal__l_1jddb .modal__content_1jddb,
-.modal__xl_1jddb .modal__content_1jddb,
-.modal__fullscreen_1jddb .modal__content_1jddb {
+.modal__l_e81yg .modal__content_e81yg,
+.modal__xl_e81yg .modal__content_e81yg,
+.modal__fullscreen_e81yg .modal__content_e81yg {
     padding: var(--modal-l-header-desktop-content-paddings);
     font-size: var(--modal-l-header-desktop-font-size);
     line-height: var(--modal-l-header-desktop-line-height);
 }
-.modal__s_1jddb,
-.modal__m_1jddb {
+.modal__s_e81yg,
+.modal__m_e81yg {
     padding: var(--modal-s-header-paddings)
 }
-.modal__s_1jddb:not(.modal__hasContent_1jddb), .modal__m_1jddb:not(.modal__hasContent_1jddb) {
+.modal__s_e81yg:not(.modal__hasContent_e81yg), .modal__m_e81yg:not(.modal__hasContent_e81yg) {
         padding-bottom: 0;
     }
-.modal__l_1jddb,
-.modal__xl_1jddb,
-.modal__fullscreen_1jddb {
+.modal__l_e81yg,
+.modal__xl_e81yg,
+.modal__fullscreen_e81yg {
     padding: var(--gap-xl) var(--gap-xl) var(--gap-m)
 }
-.modal__l_1jddb:not(.modal__hasContent_1jddb), .modal__xl_1jddb:not(.modal__hasContent_1jddb), .modal__fullscreen_1jddb:not(.modal__hasContent_1jddb) {
+.modal__l_e81yg:not(.modal__hasContent_e81yg), .modal__xl_e81yg:not(.modal__hasContent_e81yg), .modal__fullscreen_e81yg:not(.modal__hasContent_e81yg) {
         padding-bottom: var(--gap-m);
     }
-.modal__sticky_1jddb {
+.modal__sticky_e81yg {
     top: calc(var(--modal-vertical-padding) * -1)
 }
-.modal__sticky_1jddb.modal__fullscreen_1jddb {
+.modal__sticky_e81yg.modal__fullscreen_e81yg {
         top: 0;
     }

package/modal/esm/components/header/index.css

@@ -1,4 +1,4 @@
-/* hash: 1hn7b */
+/* hash: cap39 */
 :root {
     --color-light-bg-primary: #fff;
 }
@@ -25,7 +25,7 @@
 
     /* mobile */
 }
-.modal__header_111v4 {
+.modal__header_1uxnt {
     width: 100%;
     box-sizing: border-box;
     display: flex;
@@ -33,26 +33,27 @@
     justify-content: space-between;
     transition: box-shadow 0.2s ease, background 0.2s ease
 }
-.modal__header_111v4:not(.modal__hasContent_111v4) {
+.modal__header_1uxnt:not(.modal__hasContent_1uxnt) {
         pointer-events: none;
     }
-.modal__highlighted_111v4 {
+.modal__highlighted_1uxnt {
     background: var(--modal-header-highlight-background);
     box-shadow: var(--modal-header-highlight-box-shadow);
 }
-.modal__sticky_111v4 {
-    position: sticky
+.modal__sticky_1uxnt {
+    position: sticky;
+    z-index: 1
 }
-.modal__sticky_111v4.modal__hasContent_111v4 {
+.modal__sticky_1uxnt.modal__hasContent_1uxnt {
         background: var(--modal-header-background);
     }
-.modal__content_111v4 {
+.modal__content_1uxnt {
     flex-grow: 1;
 }
-.modal__title_111v4 {
+.modal__title_1uxnt {
     word-break: break-word;
 }
-.modal__addon_111v4 {
+.modal__addon_1uxnt {
     min-width: 48px;
     height: 48px;
     display: flex;
@@ -60,25 +61,25 @@
     align-items: center;
     pointer-events: all;
 }
-.modal__closer_111v4 {
+.modal__closer_1uxnt {
     margin-left: auto;
 }
-.modal__left_111v4 {
+.modal__left_1uxnt {
     justify-content: flex-start;
     text-align: left;
 }
-.modal__center_111v4 {
+.modal__center_1uxnt {
     justify-content: center;
     text-align: center;
 }
-.modal__right_111v4 {
+.modal__right_1uxnt {
     justify-content: flex-end;
     text-align: right;
 }
-.modal__trim_111v4 {
+.modal__trim_1uxnt {
     overflow: hidden
 }
-.modal__trim_111v4 .modal__title_111v4 {
+.modal__trim_1uxnt .modal__title_1uxnt {
         overflow: hidden;
         white-space: nowrap;
         text-overflow: ellipsis;

package/modal/esm/components/header/mobile.css

@@ -1,4 +1,4 @@
-/* hash: 1f6lr */
+/* hash: v3fhy */
 :root {
 
     /* Hard */
@@ -33,10 +33,10 @@
     --modal-header-mobile-font-family: var(--font-family-system);
     --modal-header-mobile-font-weight: bold;
 }
-.modal__sticky_1c0o0 {
+.modal__sticky_trb8k {
     top: 0;
 }
-.modal__content_1c0o0 {
+.modal__content_trb8k {
     font-size: var(--modal-header-mobile-font-size);
     line-height: var(--modal-header-mobile-line-height);
     font-family: var(--modal-header-mobile-font-family);

package/modal/esm/desktop.css

@@ -1,4 +1,4 @@
-/* hash: xss4d */
+/* hash: g50x5 */
 :root {
 
     /* Hard */
@@ -31,32 +31,32 @@
 
     /* mobile */
 }
-.modal__wrapper_1ccql {
+.modal__wrapper_xnsi1 {
     padding-top: var(--modal-vertical-padding);
     padding-bottom: var(--modal-vertical-padding);
 }
-.modal__component_1ccql {
+.modal__component_xnsi1 {
     width: 100%;
     max-width: 100%;
     border-radius: var(--modal-border-radius);
 }
-.modal__fullscreen_1ccql {
+.modal__fullscreen_xnsi1 {
     padding-top: 0;
     padding-bottom: 0
 }
-.modal__fullscreen_1ccql .modal__component_1ccql {
+.modal__fullscreen_xnsi1 .modal__component_xnsi1 {
         flex: 1;
         border-radius: 0;
     }
-.modal__s_1ccql {
+.modal__s_xnsi1 {
     width: var(--modal-s-width);
 }
-.modal__m_1ccql {
+.modal__m_xnsi1 {
     width: var(--modal-m-width);
 }
-.modal__l_1ccql {
+.modal__l_xnsi1 {
     width: var(--modal-l-width);
 }
-.modal__xl_1ccql {
+.modal__xl_xnsi1 {
     width: var(--modal-xl-width);
 }

package/modal/esm/desktop.js

@@ -1,17 +1,16 @@
+import './tslib.es6-270dfeed.js';
 import 'react';
 import 'classnames';
-import '../../base-modal/esm';
-import './Context.js';
-import './Component-feff0e2b.js';
-import './tslib.es6-6ea2965d.js';
-import 'react-merge-refs';
 import '../../icon-button/esm';
 import '@alfalab/icons-glyph/CrossHeavyMIcon';
+import '../../base-modal/esm';
+import './Context.js';
 import './components/closer/Component.js';
+import './ResponsiveContext.js';
 import './components/content/Component.js';
-import './components/content/Component.desktop.js';
 import './components/footer/Component.js';
-import './components/footer/Component.desktop.js';
-import './components/header/Component.desktop.js';
-import './transitions.module-0ff60fa0.js';
+import '@alfalab/icons-glyph/CrossMIcon';
+import './components/header/Component.js';
+import 'react-merge-refs';
+import './Component.js';
 export { ModalDesktop } from './Component.desktop.js';

package/modal/esm/index.d.ts

@@ -1,2 +1,3 @@
 export * from "./responsive";
 export * from "./Context";
+export * from "./typings";

package/modal/esm/index.js

@@ -1,24 +1,17 @@
+import './tslib.es6-270dfeed.js';
 import 'react';
 import 'classnames';
-import '../../base-modal/esm';
-export { ModalContext } from './Context.js';
-import './Component-feff0e2b.js';
-import './tslib.es6-6ea2965d.js';
-import 'react-merge-refs';
 import '../../icon-button/esm';
 import '@alfalab/icons-glyph/CrossHeavyMIcon';
+import '../../base-modal/esm';
+export { ModalContext } from './Context.js';
 import './components/closer/Component.js';
+import './ResponsiveContext.js';
 import './components/content/Component.js';
-import './components/content/Component.desktop.js';
 import './components/footer/Component.js';
-import './components/footer/Component.desktop.js';
-import './components/header/Component.desktop.js';
-import './transitions.module-0ff60fa0.js';
-import './Component.desktop.js';
-import './components/content/Component.mobile.js';
-import './components/footer/Component.mobile.js';
 import '@alfalab/icons-glyph/CrossMIcon';
-import './components/header/Component.mobile.js';
-import './Component.mobile.js';
+import './components/header/Component.js';
+import 'react-merge-refs';
+import './Component.js';
 import '@alfalab/hooks';
 export { ModalResponsive } from './Component.responsive.js';

package/modal/esm/mobile.css

@@ -1,4 +1,4 @@
-/* hash: 8xuzy */
+/* hash: 1gb0w */
 :root {
 
     /* Hard */
@@ -19,7 +19,7 @@
 
     /* mobile */
 }
-.modal__component_5k3yd {
+.modal__component_8mm50 {
     flex: 1;
     width: 100%;
 }

package/modal/esm/mobile.js

@@ -1,17 +1,16 @@
+import './tslib.es6-270dfeed.js';
 import 'react';
 import 'classnames';
-import '../../base-modal/esm';
-import './Context.js';
-import './Component-feff0e2b.js';
-import './tslib.es6-6ea2965d.js';
 import '../../icon-button/esm';
 import '@alfalab/icons-glyph/CrossHeavyMIcon';
+import '../../base-modal/esm';
+import './Context.js';
 import './components/closer/Component.js';
+import './ResponsiveContext.js';
 import './components/content/Component.js';
 import './components/footer/Component.js';
-import './transitions.module-0ff60fa0.js';
-import './components/content/Component.mobile.js';
-import './components/footer/Component.mobile.js';
 import '@alfalab/icons-glyph/CrossMIcon';
-import './components/header/Component.mobile.js';
+import './components/header/Component.js';
+import 'react-merge-refs';
+import './Component.js';
 export { ModalMobile } from './Component.mobile.js';

package/modal/esm/responsive.js

@@ -1,24 +1,17 @@
+import './tslib.es6-270dfeed.js';
 import 'react';
 import 'classnames';
-import '../../base-modal/esm';
-import './Context.js';
-import './Component-feff0e2b.js';
-import './tslib.es6-6ea2965d.js';
-import 'react-merge-refs';
 import '../../icon-button/esm';
 import '@alfalab/icons-glyph/CrossHeavyMIcon';
+import '../../base-modal/esm';
+import './Context.js';
 import './components/closer/Component.js';
+import './ResponsiveContext.js';
 import './components/content/Component.js';
-import './components/content/Component.desktop.js';
 import './components/footer/Component.js';
-import './components/footer/Component.desktop.js';
-import './components/header/Component.desktop.js';
-import './transitions.module-0ff60fa0.js';
-import './Component.desktop.js';
-import './components/content/Component.mobile.js';
-import './components/footer/Component.mobile.js';
 import '@alfalab/icons-glyph/CrossMIcon';
-import './components/header/Component.mobile.js';
-import './Component.mobile.js';
+import './components/header/Component.js';
+import 'react-merge-refs';
+import './Component.js';
 import '@alfalab/hooks';
 export { ModalResponsive } from './Component.responsive.js';

package/modal/esm/transitions.css

@@ -1,24 +1,24 @@
-/* hash: 1dloq */
-.modal__appear_k7cnk,
-.modal__enter_k7cnk {
+/* hash: lxqks */
+.modal__appear_n9uu6,
+.modal__enter_n9uu6 {
     opacity: 0;
     transform: translateY(15px);
 }
 
-.modal__appearActive_k7cnk,
-.modal__enterActive_k7cnk {
+.modal__appearActive_n9uu6,
+.modal__enterActive_n9uu6 {
     opacity: 1;
     transform: translateY(0);
     transition: opacity 200ms ease-in, transform 200ms ease-in;
 }
 
-.modal__exit_k7cnk {
+.modal__exit_n9uu6 {
     opacity: 1;
     transform: translateY(0);
 }
 
-.modal__exitActive_k7cnk,
-.modal__exitDone_k7cnk {
+.modal__exitActive_n9uu6,
+.modal__exitDone_n9uu6 {
     opacity: 0;
     transform: translateY(15px);
     transition: opacity 200ms ease-out, transform 200ms ease-out;

package/modal/esm/tslib.es6-270dfeed.js

@@ -0,0 +1,40 @@
+/******************************************************************************
+Copyright (c) Microsoft Corporation.
+
+Permission to use, copy, modify, and/or distribute this software for any
+purpose with or without fee is hereby granted.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+PERFORMANCE OF THIS SOFTWARE.
+***************************************************************************** */
+var __assign = function () {
+    __assign = Object.assign || function __assign(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s)
+                if (Object.prototype.hasOwnProperty.call(s, p))
+                    t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+function __rest(s, e) {
+    var t = {};
+    for (var p in s)
+        if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+            t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+}
+
+export { __assign as _, __rest as a };

package/modal/esm/typings.d.ts

@@ -0,0 +1,52 @@
+import { ReactNode } from 'react';
+import { BaseModalProps } from "../../base-modal";
+type ModalDesktopProps = BaseModalProps & {
+    /**
+     * Ширина модального окна
+     * @default "m"
+     */
+    size?: 's' | 'm' | 'l' | 'xl' | 'fullscreen';
+    /**
+     * Растягивает модальное окно на весь экран
+     * @deprecated Используйте размер fullscreen
+     */
+    fullscreen?: boolean;
+    /**
+     * Фиксирует позицию модального окна после открытия,
+     * предотвращая скачки, если контент внутри будет меняться
+     */
+    fixedPosition?: boolean;
+    /**
+     * Управление наличием закрывающего крестика
+     * @default false
+     */
+    hasCloser?: boolean;
+};
+type ModalMobileProps = Omit<ModalDesktopProps, 'size' | 'fixedPosition' | 'fullscreen'>;
+type ModalResponsiveProps = ModalDesktopProps & {
+    /**
+     * Контрольная точка, с нее начинается desktop версия
+     * @default 1024
+     */
+    breakpoint?: number;
+};
+type View = 'desktop' | 'mobile';
+type TResponsiveModalContext = {
+    view: View;
+    size: NonNullable<ModalDesktopProps['size']>;
+};
+type ContentProps = {
+    /**
+     * Контент
+     */
+    children?: ReactNode;
+    /**
+     * Дополнительный класс
+     */
+    className?: string;
+    /**
+     * Растягивает контент на всю высоту
+     */
+    flex?: boolean;
+};
+export { ModalDesktopProps, ModalMobileProps, ModalResponsiveProps, View, TResponsiveModalContext, ContentProps };

package/modal/esm/typings.js

@@ -0,0 +1 @@
+

package/modal/index.d.ts

@@ -1,2 +1,3 @@
 export * from "./responsive";
 export * from "./Context";
+export * from "./typings";

package/modal/index.js

@@ -1,27 +1,20 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
-require('./tslib.es6-c3a0823f.js');
+require('./tslib.es6-c33750f3.js');
 require('react');
-require('react-merge-refs');
 require('classnames');
-require('../base-modal');
 require('../icon-button');
 require('@alfalab/icons-glyph/CrossHeavyMIcon');
+require('../base-modal');
 var Context = require('./Context.js');
 require('./components/closer/Component.js');
+require('./ResponsiveContext.js');
 require('./components/content/Component.js');
-require('./components/content/Component.desktop.js');
 require('./components/footer/Component.js');
-require('./components/footer/Component.desktop.js');
-require('./Component-c8d16513.js');
-require('./components/header/Component.desktop.js');
-require('./Component.desktop.js');
-require('./transitions.module-ff304bed.js');
-require('./components/content/Component.mobile.js');
-require('./components/footer/Component.mobile.js');
 require('@alfalab/icons-glyph/CrossMIcon');
-require('./components/header/Component.mobile.js');
-require('./Component.mobile.js');
+require('./components/header/Component.js');
+require('react-merge-refs');
+require('./Component.js');
 require('@alfalab/hooks');
 var Component_responsive = require('./Component.responsive.js');
 

package/modal/mobile.css

@@ -1,4 +1,4 @@
-/* hash: 8xuzy */
+/* hash: 1gb0w */
 :root {
 
     /* Hard */
@@ -19,7 +19,7 @@
 
     /* mobile */
 }
-.modal__component_5k3yd {
+.modal__component_8mm50 {
     flex: 1;
     width: 100%;
 }