@alfalab/core-components-modal 6.0.10 → 6.0.12

package/components/footer/Component.js

@@ -6,28 +6,41 @@ var React = require('react');
 var cn = require('classnames');
 require('@alfalab/core-components-base-modal');
 var Context = require('../../Context.js');
+var ResponsiveContext = require('../../ResponsiveContext.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var cn__default = /*#__PURE__*/_interopDefaultLegacy(cn);
 
-var styles = {"footer":"modal__footer_1fmjo","sticky":"modal__sticky_1fmjo","highlighted":"modal__highlighted_1fmjo"};
+var desktopStyles = {"footer":"modal__footer_mf0hw","sticky":"modal__sticky_mf0hw","fullscreen":"modal__fullscreen_mf0hw","s":"modal__s_mf0hw","m":"modal__m_mf0hw","l":"modal__l_mf0hw","xl":"modal__xl_mf0hw"};
+require('./desktop.css')
+
+var styles = {"footer":"modal__footer_1nmkm","sticky":"modal__sticky_1nmkm","highlighted":"modal__highlighted_1nmkm"};
 require('./index.css')
 
-var layoutStyles = {"column":"modal__column_1aizv","gap-16":"modal__gap-16_1aizv","gap-24":"modal__gap-24_1aizv","gap-32":"modal__gap-32_1aizv","start":"modal__start_1aizv","center":"modal__center_1aizv","space-between":"modal__space-between_1aizv"};
+var layoutStyles = {"column":"modal__column_1ij0s","gap-16":"modal__gap-16_1ij0s","gap-24":"modal__gap-24_1ij0s","gap-32":"modal__gap-32_1ij0s","start":"modal__start_1ij0s","center":"modal__center_1ij0s","space-between":"modal__space-between_1ij0s"};
 require('./layout.css')
 
+var mobileStyles = {"footer":"modal__footer_q351w","sticky":"modal__sticky_q351w"};
+require('./mobile.css')
+
 var Footer = function (_a) {
     var _b;
     var children = _a.children, className = _a.className, sticky = _a.sticky, _c = _a.layout, layout = _c === void 0 ? 'start' : _c, gap = _a.gap;
     var _d = React.useContext(Context.ModalContext), footerHighlighted = _d.footerHighlighted, setHasFooter = _d.setHasFooter;
+    var _e = React.useContext(ResponsiveContext.ResponsiveContext), size = _e.size, view = _e.view;
     React.useEffect(function () {
         setHasFooter(true);
     }, [setHasFooter]);
     return (React__default['default'].createElement("div", { className: cn__default['default'](styles.footer, className, layoutStyles[layout], gap && layoutStyles["gap-" + gap], (_b = {},
             _b[styles.highlighted] = sticky && footerHighlighted,
             _b[styles.sticky] = sticky,
+            _b[desktopStyles.footer] = view === 'desktop',
+            _b[desktopStyles.sticky] = view === 'desktop' && sticky,
+            _b[desktopStyles[size]] = view === 'desktop',
+            _b[mobileStyles.footer] = view === 'mobile',
+            _b[mobileStyles.sticky] = view === 'mobile' && sticky,
             _b)) }, children));
 };
 

package/components/footer/desktop.css

@@ -1,4 +1,4 @@
-/* hash: 1dm8g */
+/* hash: 1l1qv */
 :root {
 
     /* Hard */
@@ -31,22 +31,22 @@
 
     /* mobile */
 }
-.modal__footer_eezkd {
+.modal__footer_mf0hw {
     border-bottom-left-radius: var(--modal-border-radius);
     border-bottom-right-radius: var(--modal-border-radius);
 }
-.modal__sticky_eezkd {
+.modal__sticky_mf0hw {
     bottom: calc(var(--modal-vertical-padding) * -1)
 }
-.modal__sticky_eezkd.modal__fullscreen_eezkd {
+.modal__sticky_mf0hw.modal__fullscreen_mf0hw {
         bottom: 0;
     }
-.modal__s_eezkd,
-.modal__m_eezkd {
+.modal__s_mf0hw,
+.modal__m_mf0hw {
     padding: var(--modal-s-footer-paddings);
 }
-.modal__l_eezkd,
-.modal__xl_eezkd,
-.modal__fullscreen_eezkd {
+.modal__l_mf0hw,
+.modal__xl_mf0hw,
+.modal__fullscreen_mf0hw {
     padding: var(--gap-2xl) var(--gap-6xl) var(--gap-6xl);
 }

package/components/footer/index.css

@@ -1,4 +1,4 @@
-/* hash: l5s7l */
+/* hash: 1d8ry */
 :root {
     --color-light-bg-primary: #fff;
     --color-light-border-primary: #dbdee1;
@@ -26,16 +26,16 @@
 
     /* mobile */
 }
-.modal__footer_1fmjo {
+.modal__footer_1nmkm {
     width: 100%;
     box-sizing: border-box;
     transition: box-shadow 0.2s ease, background 0.2s ease;
 }
-.modal__sticky_1fmjo {
+.modal__sticky_1nmkm {
     background: var(--modal-footer-background);
     position: sticky;
 }
-.modal__highlighted_1fmjo {
+.modal__highlighted_1nmkm {
     background: var(--modal-footer-highlight-background);
     box-shadow: var(--modal-footer-highlight-box-shadow);
 }

package/components/footer/layout.css

@@ -1,4 +1,4 @@
-/* hash: gzq7l */
+/* hash: hkbzt */
 :root {
 
     /* Hard */
@@ -25,60 +25,60 @@
 
     /* mobile */
 }
-.modal__column_1aizv {
+.modal__column_1ij0s {
     display: flex;
     flex-direction: column
 }
-.modal__column_1aizv > * {
+.modal__column_1ij0s > * {
         margin-bottom: var(--modal-footer-default-gap);
     }
-.modal__column_1aizv > *:last-child,
-    .modal__column_1aizv > *:only-child {
+.modal__column_1ij0s > *:last-child,
+    .modal__column_1ij0s > *:only-child {
         margin-bottom: 0;
     }
-.modal__column_1aizv.modal__gap-16_1aizv > * {
+.modal__column_1ij0s.modal__gap-16_1ij0s > * {
         margin-bottom: var(--gap-m);
     }
-.modal__column_1aizv.modal__gap-24_1aizv > * {
+.modal__column_1ij0s.modal__gap-24_1ij0s > * {
         margin-bottom: var(--gap-xl);
     }
-.modal__column_1aizv.modal__gap-32_1aizv > * {
+.modal__column_1ij0s.modal__gap-32_1ij0s > * {
         margin-bottom: var(--gap-2xl);
     }
-.modal__start_1aizv {
+.modal__start_1ij0s {
     justify-content: flex-start;
 }
-.modal__center_1aizv {
+.modal__center_1ij0s {
     justify-content: center;
 }
-.modal__space-between_1aizv {
+.modal__space-between_1ij0s {
     justify-content: space-between
 }
-.modal__space-between_1aizv > * {
+.modal__space-between_1ij0s > * {
         flex: 1;
     }
-.modal__start_1aizv,
-.modal__center_1aizv,
-.modal__space-between_1aizv {
+.modal__start_1ij0s,
+.modal__center_1ij0s,
+.modal__space-between_1ij0s {
     display: flex
 }
-.modal__start_1aizv > *, .modal__center_1aizv > *, .modal__space-between_1aizv > * {
+.modal__start_1ij0s > *, .modal__center_1ij0s > *, .modal__space-between_1ij0s > * {
         margin-right: var(--modal-footer-default-gap);
     }
-.modal__start_1aizv > *:last-child,
-    .modal__start_1aizv > *:only-child,
-    .modal__center_1aizv > *:last-child,
-    .modal__center_1aizv > *:only-child,
-    .modal__space-between_1aizv > *:last-child,
-    .modal__space-between_1aizv > *:only-child {
+.modal__start_1ij0s > *:last-child,
+    .modal__start_1ij0s > *:only-child,
+    .modal__center_1ij0s > *:last-child,
+    .modal__center_1ij0s > *:only-child,
+    .modal__space-between_1ij0s > *:last-child,
+    .modal__space-between_1ij0s > *:only-child {
         margin-right: 0;
     }
-.modal__start_1aizv.modal__gap-16_1aizv > *, .modal__center_1aizv.modal__gap-16_1aizv > *, .modal__space-between_1aizv.modal__gap-16_1aizv > * {
+.modal__start_1ij0s.modal__gap-16_1ij0s > *, .modal__center_1ij0s.modal__gap-16_1ij0s > *, .modal__space-between_1ij0s.modal__gap-16_1ij0s > * {
         margin-right: var(--gap-m);
     }
-.modal__start_1aizv.modal__gap-24_1aizv > *, .modal__center_1aizv.modal__gap-24_1aizv > *, .modal__space-between_1aizv.modal__gap-24_1aizv > * {
+.modal__start_1ij0s.modal__gap-24_1ij0s > *, .modal__center_1ij0s.modal__gap-24_1ij0s > *, .modal__space-between_1ij0s.modal__gap-24_1ij0s > * {
         margin-right: var(--gap-xl);
     }
-.modal__start_1aizv.modal__gap-32_1aizv > *, .modal__center_1aizv.modal__gap-32_1aizv > *, .modal__space-between_1aizv.modal__gap-32_1aizv > * {
+.modal__start_1ij0s.modal__gap-32_1ij0s > *, .modal__center_1ij0s.modal__gap-32_1ij0s > *, .modal__space-between_1ij0s.modal__gap-32_1ij0s > * {
         margin-right: var(--gap-2xl);
     }

package/components/footer/mobile.css

@@ -1,4 +1,4 @@
-/* hash: 12q0j */
+/* hash: 1lggp */
 :root {
 
     /* Hard */
@@ -22,9 +22,9 @@
 
     /* mobile */
 }
-.modal__footer_p1y9m {
+.modal__footer_q351w {
     padding: var(--gap-m);
 }
-.modal__sticky_p1y9m {
+.modal__sticky_q351w {
     bottom: 0;
 }

package/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/components/header/Component.js

@@ -2,12 +2,64 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-require('react');
-require('classnames');
+require('../../tslib.es6-0c9325d7.js');
+var React = require('react');
+var cn = require('classnames');
+require('@alfalab/core-components-icon-button');
+require('@alfalab/icons-glyph/CrossHeavyMIcon');
 require('@alfalab/core-components-base-modal');
-require('../../Context.js');
-var components_header_Component = require('../../Component-cacd0e72.js');
+var Context = require('../../Context.js');
+var components_closer_Component = require('../closer/Component.js');
+var ResponsiveContext = require('../../ResponsiveContext.js');
+var CrossMIcon = require('@alfalab/icons-glyph/CrossMIcon');
 
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var cn__default = /*#__PURE__*/_interopDefaultLegacy(cn);
 
-exports.Header = components_header_Component.Header;
+var getDataTestId = function (dataTestId, element) {
+    var elementPart = element ? "-" + element.toLowerCase() : '';
+    return dataTestId ? "" + dataTestId + elementPart : undefined;
+};
+
+var desktopStyles = {"header":"modal__header_xgu5m","content":"modal__content_xgu5m","s":"modal__s_xgu5m","m":"modal__m_xgu5m","l":"modal__l_xgu5m","xl":"modal__xl_xgu5m","fullscreen":"modal__fullscreen_xgu5m","hasContent":"modal__hasContent_xgu5m","sticky":"modal__sticky_xgu5m"};
+require('./desktop.css')
+
+var styles = {"header":"modal__header_f5byq","hasContent":"modal__hasContent_f5byq","highlighted":"modal__highlighted_f5byq","sticky":"modal__sticky_f5byq","content":"modal__content_f5byq","title":"modal__title_f5byq","addon":"modal__addon_f5byq","closer":"modal__closer_f5byq","left":"modal__left_f5byq","center":"modal__center_f5byq","right":"modal__right_f5byq","trim":"modal__trim_f5byq"};
+require('./index.css')
+
+var mobileStyles = {"sticky":"modal__sticky_15fng","content":"modal__content_15fng"};
+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 = React.useContext(Context.ModalContext), headerHighlighted = _g.headerHighlighted, setHasHeader = _g.setHasHeader;
+    var _h = React.useContext(ResponsiveContext.ResponsiveContext), size = _h.size, view = _h.view;
+    var hasContent = title || Boolean(children);
+    React.useEffect(function () {
+        setHasHeader(true);
+    }, [setHasHeader]);
+    return (React__default['default'].createElement("div", { className: cn__default['default'](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__default['default'].createElement("div", { className: cn__default['default'](styles.addon, addonClassName) }, leftAddons)),
+        hasContent && (React__default['default'].createElement("div", { className: cn__default['default'](styles.content, contentClassName, styles[align], (_c = {},
+                _c[styles.trim] = trim,
+                _c[desktopStyles.content] = view === 'desktop',
+                _c[mobileStyles.content] = view === 'mobile',
+                _c)) },
+            children,
+            title && (React__default['default'].createElement("div", { className: styles.title, "data-test-id": getDataTestId(dataTestId, 'title') }, title)))),
+        hasCloser && (React__default['default'].createElement("div", { className: cn__default['default'](styles.addon, styles.closer, addonClassName) }, view === 'desktop' ? (React__default['default'].createElement(components_closer_Component.Closer, { dataTestId: getDataTestId(dataTestId, 'closer') })) : (React__default['default'].createElement(components_closer_Component.Closer, { icon: CrossMIcon.CrossMIcon, size: 'xs', dataTestId: getDataTestId(dataTestId, 'closer') }))))));
+};
+
+exports.Header = Header;

package/components/header/desktop.css

@@ -1,4 +1,4 @@
-/* hash: 1kwlp */
+/* hash: 18ti8 */
 :root {
 
     /* Hard */
@@ -43,45 +43,45 @@
 
     /* mobile */
 }
-.modal__header_13jb3 {
+.modal__header_xgu5m {
     border-top-left-radius: var(--modal-border-radius);
     border-top-right-radius: var(--modal-border-radius);
 }
-.modal__content_13jb3 {
+.modal__content_xgu5m {
     font-weight: var(--modal-header-desktop-font-weight);
     font-family: var(--modal-header-desktop-font-family);
 }
-.modal__s_13jb3 .modal__content_13jb3,
-.modal__m_13jb3 .modal__content_13jb3 {
+.modal__s_xgu5m .modal__content_xgu5m,
+.modal__m_xgu5m .modal__content_xgu5m {
     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_13jb3 .modal__content_13jb3,
-.modal__xl_13jb3 .modal__content_13jb3,
-.modal__fullscreen_13jb3 .modal__content_13jb3 {
+.modal__l_xgu5m .modal__content_xgu5m,
+.modal__xl_xgu5m .modal__content_xgu5m,
+.modal__fullscreen_xgu5m .modal__content_xgu5m {
     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_13jb3,
-.modal__m_13jb3 {
+.modal__s_xgu5m,
+.modal__m_xgu5m {
     padding: var(--modal-s-header-paddings)
 }
-.modal__s_13jb3:not(.modal__hasContent_13jb3), .modal__m_13jb3:not(.modal__hasContent_13jb3) {
+.modal__s_xgu5m:not(.modal__hasContent_xgu5m), .modal__m_xgu5m:not(.modal__hasContent_xgu5m) {
         padding-bottom: 0;
     }
-.modal__l_13jb3,
-.modal__xl_13jb3,
-.modal__fullscreen_13jb3 {
+.modal__l_xgu5m,
+.modal__xl_xgu5m,
+.modal__fullscreen_xgu5m {
     padding: var(--gap-xl) var(--gap-xl) var(--gap-m)
 }
-.modal__l_13jb3:not(.modal__hasContent_13jb3), .modal__xl_13jb3:not(.modal__hasContent_13jb3), .modal__fullscreen_13jb3:not(.modal__hasContent_13jb3) {
+.modal__l_xgu5m:not(.modal__hasContent_xgu5m), .modal__xl_xgu5m:not(.modal__hasContent_xgu5m), .modal__fullscreen_xgu5m:not(.modal__hasContent_xgu5m) {
         padding-bottom: var(--gap-m);
     }
-.modal__sticky_13jb3 {
+.modal__sticky_xgu5m {
     top: calc(var(--modal-vertical-padding) * -1)
 }
-.modal__sticky_13jb3.modal__fullscreen_13jb3 {
+.modal__sticky_xgu5m.modal__fullscreen_xgu5m {
         top: 0;
     }

package/components/header/index.css

@@ -1,4 +1,4 @@
-/* hash: 1ewvt */
+/* hash: 1hn7b */
 :root {
     --color-light-bg-primary: #fff;
 }
@@ -25,7 +25,7 @@
 
     /* mobile */
 }
-.modal__header_l7swy {
+.modal__header_f5byq {
     width: 100%;
     box-sizing: border-box;
     display: flex;
@@ -33,26 +33,26 @@
     justify-content: space-between;
     transition: box-shadow 0.2s ease, background 0.2s ease
 }
-.modal__header_l7swy:not(.modal__hasContent_l7swy) {
+.modal__header_f5byq:not(.modal__hasContent_f5byq) {
         pointer-events: none;
     }
-.modal__highlighted_l7swy {
+.modal__highlighted_f5byq {
     background: var(--modal-header-highlight-background);
     box-shadow: var(--modal-header-highlight-box-shadow);
 }
-.modal__sticky_l7swy {
+.modal__sticky_f5byq {
     position: sticky
 }
-.modal__sticky_l7swy.modal__hasContent_l7swy {
+.modal__sticky_f5byq.modal__hasContent_f5byq {
         background: var(--modal-header-background);
     }
-.modal__content_l7swy {
+.modal__content_f5byq {
     flex-grow: 1;
 }
-.modal__title_l7swy {
+.modal__title_f5byq {
     word-break: break-word;
 }
-.modal__addon_l7swy {
+.modal__addon_f5byq {
     min-width: 48px;
     height: 48px;
     display: flex;
@@ -60,25 +60,25 @@
     align-items: center;
     pointer-events: all;
 }
-.modal__closer_l7swy {
+.modal__closer_f5byq {
     margin-left: auto;
 }
-.modal__left_l7swy {
+.modal__left_f5byq {
     justify-content: flex-start;
     text-align: left;
 }
-.modal__center_l7swy {
+.modal__center_f5byq {
     justify-content: center;
     text-align: center;
 }
-.modal__right_l7swy {
+.modal__right_f5byq {
     justify-content: flex-end;
     text-align: right;
 }
-.modal__trim_l7swy {
+.modal__trim_f5byq {
     overflow: hidden
 }
-.modal__trim_l7swy .modal__title_l7swy {
+.modal__trim_f5byq .modal__title_f5byq {
         overflow: hidden;
         white-space: nowrap;
         text-overflow: ellipsis;

package/components/header/mobile.css

@@ -1,4 +1,4 @@
-/* hash: 1k2gl */
+/* hash: 1f6lr */
 :root {
 
     /* Hard */
@@ -33,10 +33,10 @@
     --modal-header-mobile-font-family: var(--font-family-system);
     --modal-header-mobile-font-weight: bold;
 }
-.modal__sticky_12vnx {
+.modal__sticky_15fng {
     top: 0;
 }
-.modal__content_12vnx {
+.modal__content_15fng {
     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/cssm/Component.d.ts

@@ -0,0 +1,12 @@
+/// <reference types="react" />
+import React from 'react';
+import { View } from "./typings";
+declare const Modal: React.ForwardRefExoticComponent<import("@alfalab/core-components-base-modal").BaseModalProps & {
+    size?: "s" | "m" | "l" | "xl" | "fullscreen" | undefined;
+    fullscreen?: boolean | undefined;
+    fixedPosition?: boolean | undefined;
+    hasCloser?: boolean | undefined;
+} & {
+    view: View;
+} & React.RefAttributes<HTMLDivElement>>;
+export { Modal };

package/cssm/Component.desktop.d.ts

@@ -1,53 +1,14 @@
 /// <reference types="react" />
 import React from 'react';
-import { BaseModalProps } from "@alfalab/core-components-base-modal";
-type ModalDesktopProps = BaseModalProps & {
-    /**
-     * Ширина модального окна
-     * @default "m"
-     */
-    size?: 's' | 'm' | 'l' | 'xl' | 'fullscreen';
-    /**
-     * Растягивает модальное окно на весь экран
-     * @deprecated Используйте размер fullscreen
-     */
-    fullscreen?: boolean;
-    /**
-     * Фиксирует позицию модального окна после открытия,
-     * предотвращая скачки, если контент внутри будет меняться
-     */
-    fixedPosition?: boolean;
-    /**
-     * Управление наличием закрывающего крестика
-     * @default false
-     */
-    hasCloser?: boolean;
-};
-declare const ModalDesktop: React.ForwardRefExoticComponent<BaseModalProps & {
-    /**
-     * Ширина модального окна
-     * @default "m"
-     */
+declare const ModalDesktop: React.ForwardRefExoticComponent<import("packages/base-modal/src").BaseModalProps & {
     size?: "s" | "m" | "l" | "xl" | "fullscreen" | undefined;
-    /**
-     * Растягивает модальное окно на весь экран
-     * @deprecated Используйте размер fullscreen
-     */
     fullscreen?: boolean | undefined;
-    /**
-     * Фиксирует позицию модального окна после открытия,
-     * предотвращая скачки, если контент внутри будет меняться
-     */
     fixedPosition?: boolean | undefined;
-    /**
-     * Управление наличием закрывающего крестика
-     * @default false
-     */
     hasCloser?: boolean | undefined;
 } & React.RefAttributes<HTMLDivElement>> & {
-    Content: React.FC<import("./components/content/Component.desktop").ContentDesktopProps>;
-    Header: React.FC<import("./components/header/Component.desktop").HeaderDesktopProps>;
-    Footer: React.FC<import("./components/footer/Component.desktop").FooterDesktopProps>;
+    Content: React.FC<import("./typings").ContentProps>;
+    Header: React.FC<import("./components/header/Component").HeaderProps>;
+    Footer: React.FC<import("./components/footer/Component").FooterProps>;
     Closer: React.FC<import("./components/closer/Component").CloserProps>;
 };
-export { ModalDesktopProps, ModalDesktop };
+export { ModalDesktop };