@alfalab/core-components-modal 4.0.7 → 5.0.0

package/dist/cssm/desktop.js

@@ -8,15 +8,19 @@ require('classnames');
 require('@alfalab/core-components-base-modal/dist/cssm');
 require('react-merge-refs');
 require('./Context.js');
-require('@alfalab/core-components-button/dist/cssm');
+require('./components/header/index.module.css');
+require('./components/header/Component.js');
+require('@alfalab/core-components-icon-button/dist/cssm');
+require('@alfalab/icons-glyph/CrossHeavyMIcon');
 require('./components/closer/index.module.css');
 require('./components/closer/Component.js');
-require('./components/header/Component.js');
 require('./components/header/desktop.module.css');
 require('./components/header/Component.desktop.js');
+require('./components/content/index.module.css');
 require('./components/content/Component.js');
 require('./components/content/desktop.module.css');
 require('./components/content/Component.desktop.js');
+require('./components/footer/index.module.css');
 require('./components/footer/layout.module.css');
 require('./components/footer/Component.js');
 require('./components/footer/desktop.module.css');

package/dist/cssm/desktop.module.css

@@ -10,24 +10,25 @@
     --gap-3xl: 40px;
 }
 :root {
-    --border-radius-m: 8px;
+    --border-radius-l: 12px;
 }
 :root {
-    --modal-border-radius: var(--border-radius-m);
+    --modal-border-radius: var(--border-radius-l);
     --modal-vertical-padding: var(--gap-3xl);
 
     /* sizes */
-    --modal-s-width: 476px;
+    --modal-s-width: 500px;
     --modal-m-width: 600px;
     --modal-l-width: 800px;
+    --modal-xl-width: 1140px;
 
     /* paddings */
 
-    /* closer */
+    /* scroll */
 
-    /* sticky */
+    /* desktop */
 
-    /* scroll */
+    /* mobile */
 }
 .wrapper {
     padding-top: var(--modal-vertical-padding);
@@ -55,3 +56,6 @@
 .l {
     width: var(--modal-l-width);
 }
+.xl {
+    width: var(--modal-xl-width);
+}

package/dist/cssm/index.js

@@ -8,15 +8,19 @@ require('classnames');
 require('@alfalab/core-components-base-modal/dist/cssm');
 require('react-merge-refs');
 var Context = require('./Context.js');
-require('@alfalab/core-components-button/dist/cssm');
+require('./components/header/index.module.css');
+require('./components/header/Component.js');
+require('@alfalab/core-components-icon-button/dist/cssm');
+require('@alfalab/icons-glyph/CrossHeavyMIcon');
 require('./components/closer/index.module.css');
 require('./components/closer/Component.js');
-require('./components/header/Component.js');
 require('./components/header/desktop.module.css');
 require('./components/header/Component.desktop.js');
+require('./components/content/index.module.css');
 require('./components/content/Component.js');
 require('./components/content/desktop.module.css');
 require('./components/content/Component.desktop.js');
+require('./components/footer/index.module.css');
 require('./components/footer/layout.module.css');
 require('./components/footer/Component.js');
 require('./components/footer/desktop.module.css');
@@ -24,7 +28,7 @@ require('./components/footer/Component.desktop.js');
 require('./desktop.module.css');
 require('./transitions.module.css');
 require('./Component.desktop.js');
-require('@alfalab/hooks');
+require('@alfalab/icons-glyph/CrossMIcon');
 require('./components/header/mobile.module.css');
 require('./components/header/Component.mobile.js');
 require('./components/content/mobile.module.css');
@@ -33,6 +37,7 @@ require('./components/footer/mobile.module.css');
 require('./components/footer/Component.mobile.js');
 require('./mobile.module.css');
 require('./Component.mobile.js');
+require('@alfalab/hooks');
 var Component_responsive = require('./Component.responsive.js');
 
 

package/dist/cssm/mobile.js

@@ -7,15 +7,19 @@ require('react');
 require('classnames');
 require('@alfalab/core-components-base-modal/dist/cssm');
 require('./Context.js');
-require('@alfalab/core-components-button/dist/cssm');
+require('./components/header/index.module.css');
+require('./components/header/Component.js');
+require('@alfalab/core-components-icon-button/dist/cssm');
+require('@alfalab/icons-glyph/CrossHeavyMIcon');
 require('./components/closer/index.module.css');
 require('./components/closer/Component.js');
-require('./components/header/Component.js');
+require('./components/content/index.module.css');
 require('./components/content/Component.js');
+require('./components/footer/index.module.css');
 require('./components/footer/layout.module.css');
 require('./components/footer/Component.js');
 require('./transitions.module.css');
-require('@alfalab/hooks');
+require('@alfalab/icons-glyph/CrossMIcon');
 require('./components/header/mobile.module.css');
 require('./components/header/Component.mobile.js');
 require('./components/content/mobile.module.css');

package/dist/cssm/mobile.module.css

@@ -12,11 +12,11 @@
 
     /* paddings */
 
-    /* closer */
+    /* scroll */
 
-    /* sticky */
+    /* desktop */
 
-    /* scroll */
+    /* mobile */
 }
 .component {
     flex: 1;

package/dist/cssm/responsive.js

@@ -8,15 +8,19 @@ require('classnames');
 require('@alfalab/core-components-base-modal/dist/cssm');
 require('react-merge-refs');
 require('./Context.js');
-require('@alfalab/core-components-button/dist/cssm');
+require('./components/header/index.module.css');
+require('./components/header/Component.js');
+require('@alfalab/core-components-icon-button/dist/cssm');
+require('@alfalab/icons-glyph/CrossHeavyMIcon');
 require('./components/closer/index.module.css');
 require('./components/closer/Component.js');
-require('./components/header/Component.js');
 require('./components/header/desktop.module.css');
 require('./components/header/Component.desktop.js');
+require('./components/content/index.module.css');
 require('./components/content/Component.js');
 require('./components/content/desktop.module.css');
 require('./components/content/Component.desktop.js');
+require('./components/footer/index.module.css');
 require('./components/footer/layout.module.css');
 require('./components/footer/Component.js');
 require('./components/footer/desktop.module.css');
@@ -24,7 +28,7 @@ require('./components/footer/Component.desktop.js');
 require('./desktop.module.css');
 require('./transitions.module.css');
 require('./Component.desktop.js');
-require('@alfalab/hooks');
+require('@alfalab/icons-glyph/CrossMIcon');
 require('./components/header/mobile.module.css');
 require('./components/header/Component.mobile.js');
 require('./components/content/mobile.module.css');
@@ -33,6 +37,7 @@ require('./components/footer/mobile.module.css');
 require('./components/footer/Component.mobile.js');
 require('./mobile.module.css');
 require('./Component.mobile.js');
+require('@alfalab/hooks');
 var Component_responsive = require('./Component.responsive.js');
 
 

package/dist/cssm/vars.css

@@ -12,9 +12,9 @@
 
     /* paddings */
 
-    /* closer */
+    /* scroll */
 
-    /* sticky */
+    /* desktop */
 
-    /* scroll */
+    /* mobile */
 }

package/dist/desktop.css

@@ -1,4 +1,4 @@
-/* hash: 5ot05 */
+/* hash: 1i8ps */
 :root {
 
     /* Hard */
@@ -11,48 +11,52 @@
     --gap-3xl: 40px;
 }
 :root {
-    --border-radius-m: 8px;
+    --border-radius-l: 12px;
 }
 :root {
-    --modal-border-radius: var(--border-radius-m);
+    --modal-border-radius: var(--border-radius-l);
     --modal-vertical-padding: var(--gap-3xl);
 
     /* sizes */
-    --modal-s-width: 476px;
+    --modal-s-width: 500px;
     --modal-m-width: 600px;
     --modal-l-width: 800px;
+    --modal-xl-width: 1140px;
 
     /* paddings */
 
-    /* closer */
+    /* scroll */
 
-    /* sticky */
+    /* desktop */
 
-    /* scroll */
+    /* mobile */
 }
-.modal__wrapper_1tg9k {
+.modal__wrapper_1jm5f {
     padding-top: var(--modal-vertical-padding);
     padding-bottom: var(--modal-vertical-padding);
 }
-.modal__component_1tg9k {
+.modal__component_1jm5f {
     width: 100%;
     max-width: 100%;
     border-radius: var(--modal-border-radius);
 }
-.modal__fullscreen_1tg9k {
+.modal__fullscreen_1jm5f {
     padding-top: 0;
     padding-bottom: 0
 }
-.modal__fullscreen_1tg9k .modal__component_1tg9k {
+.modal__fullscreen_1jm5f .modal__component_1jm5f {
         flex: 1;
         border-radius: 0;
     }
-.modal__s_1tg9k {
+.modal__s_1jm5f {
     width: var(--modal-s-width);
 }
-.modal__m_1tg9k {
+.modal__m_1jm5f {
     width: var(--modal-m-width);
 }
-.modal__l_1tg9k {
+.modal__l_1jm5f {
     width: var(--modal-l-width);
 }
+.modal__xl_1jm5f {
+    width: var(--modal-xl-width);
+}

package/dist/desktop.js

@@ -2,22 +2,23 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-require('./tslib.es6-d1b7fb9e.js');
+require('./tslib.es6-e71a96bd.js');
 require('react');
 require('classnames');
 require('@alfalab/core-components-base-modal');
 require('react-merge-refs');
 require('./Context.js');
-require('@alfalab/core-components-button');
-require('./components/closer/Component.js');
 require('./components/header/Component.js');
+require('@alfalab/core-components-icon-button');
+require('@alfalab/icons-glyph/CrossHeavyMIcon');
+require('./components/closer/Component.js');
 require('./components/header/Component.desktop.js');
 require('./components/content/Component.js');
 require('./components/content/Component.desktop.js');
 require('./components/footer/Component.js');
 require('./components/footer/Component.desktop.js');
 var Component_desktop = require('./Component.desktop.js');
-require('./transitions.module-9c7cb980.js');
+require('./transitions.module-0cb336a7.js');
 
 
 

package/dist/esm/Component.desktop.d.ts

@@ -6,9 +6,10 @@ type ModalDesktopProps = BaseModalProps & {
      * Ширина модального окна
      * @default "m"
      */
-    size?: 's' | 'm' | 'l';
+    size?: 's' | 'm' | 'l' | 'xl' | 'fullscreen';
     /**
      * Растягивает модальное окно на весь экран
+     * @deprecated Используйте размер fullscreen
      */
     fullscreen?: boolean;
     /**
@@ -27,9 +28,10 @@ declare const ModalDesktop: React.ForwardRefExoticComponent<BaseModalProps & {
      * Ширина модального окна
      * @default "m"
      */
-    size?: "s" | "m" | "l" | undefined;
+    size?: "s" | "m" | "l" | "xl" | "fullscreen" | undefined;
     /**
      * Растягивает модальное окно на весь экран
+     * @deprecated Используйте размер fullscreen
      */
     fullscreen?: boolean | undefined;
     /**

package/dist/esm/Component.desktop.js

@@ -1,25 +1,28 @@
-import { _ as __rest, a as __assign } from './tslib.es6-327e6722.js';
+import { _ as __rest, a as __assign } from './tslib.es6-c25aba00.js';
 import React, { forwardRef, useRef, useCallback, isValidElement, cloneElement } from 'react';
 import cn from 'classnames';
 import { BaseModal } from '@alfalab/core-components-base-modal/dist/esm';
 import mergeRefs from 'react-merge-refs';
 import './Context.js';
-import '@alfalab/core-components-button/dist/esm';
-import { Closer } from './components/closer/Component.js';
 import './components/header/Component.js';
+import '@alfalab/core-components-icon-button/dist/esm';
+import '@alfalab/icons-glyph/CrossHeavyMIcon';
+import { Closer } from './components/closer/Component.js';
 import { HeaderDesktop } from './components/header/Component.desktop.js';
 import './components/content/Component.js';
 import { ContentDesktop } from './components/content/Component.desktop.js';
 import './components/footer/Component.js';
 import { FooterDesktop } from './components/footer/Component.desktop.js';
-import { t as transitions } from './transitions.module-c8dac06a.js';
+import { t as transitions } from './transitions.module-b6b7149e.js';
 
-var styles = {"wrapper":"modal__wrapper_1tg9k","component":"modal__component_1tg9k","fullscreen":"modal__fullscreen_1tg9k","s":"modal__s_1tg9k","m":"modal__m_1tg9k","l":"modal__l_1tg9k"};
+var styles = {"wrapper":"modal__wrapper_1jm5f","component":"modal__component_1jm5f","fullscreen":"modal__fullscreen_1jm5f","s":"modal__s_1jm5f","m":"modal__m_1jm5f","l":"modal__l_1jm5f","xl":"modal__xl_1jm5f"};
 require('./desktop.css')
 
 var ModalDesktopComponent = forwardRef(function (_a, ref) {
     var _b;
     var _c = _a.size, size = _c === void 0 ? 's' : _c, fixedPosition = _a.fixedPosition, fullscreen = _a.fullscreen, children = _a.children, className = _a.className, wrapperClassName = _a.wrapperClassName, _d = _a.transitionProps, transitionProps = _d === void 0 ? {} : _d, restProps = __rest(_a, ["size", "fixedPosition", "fullscreen", "children", "className", "wrapperClassName", "transitionProps"]);
+    // TODO: удалить, после удаления пропсы fullscreen
+    var componentSize = fullscreen ? 'fullscreen' : size;
     var modalRef = useRef(null);
     var handleEntered = useCallback(function (node, isAppearing) {
         if (fixedPosition && modalRef.current) {
@@ -34,11 +37,9 @@ var ModalDesktopComponent = forwardRef(function (_a, ref) {
         }
     }, [fixedPosition, transitionProps]);
     return (React.createElement(BaseModal, __assign({}, restProps, { ref: mergeRefs([ref, modalRef]), wrapperClassName: cn(styles.wrapper, wrapperClassName, (_b = {},
-            _b[styles.fullscreen] = fullscreen,
-            _b)), className: cn(styles.component, className, !fullscreen && styles[size]), backdropProps: __assign(__assign({}, restProps.backdropProps), { invisible: fullscreen }), transitionProps: __assign(__assign({ classNames: transitions }, transitionProps), { onEntered: handleEntered }) }), React.Children.map(children, function (child) {
-        return isValidElement(child)
-            ? cloneElement(child, { size: child.props.size || size, fullscreen: fullscreen })
-            : child;
+            _b[styles.fullscreen] = componentSize === 'fullscreen',
+            _b)), className: cn(styles.component, className, styles[componentSize]), backdropProps: __assign(__assign({}, restProps.backdropProps), { invisible: componentSize === 'fullscreen' }), transitionProps: __assign(__assign({ classNames: transitions }, transitionProps), { onEntered: handleEntered }) }), React.Children.map(children, function (child) {
+        return isValidElement(child) ? cloneElement(child, { size: componentSize }) : child;
     })));
 });
 var ModalDesktop = Object.assign(ModalDesktopComponent, {

package/dist/esm/Component.mobile.d.ts

@@ -16,7 +16,7 @@ declare const ModalMobile: React.ForwardRefExoticComponent<BaseModalProps & {
     hasCloser?: boolean | undefined;
 } & React.RefAttributes<HTMLDivElement>> & {
     Content: React.FC<import("./components/content/Component").ContentProps>;
-    Header: React.FC<import("./components/header/Component").HeaderProps>;
+    Header: React.FC<import("./components/header/Component.mobile").HeaderMobileProps>;
     Footer: React.FC<import("./components/footer/Component").FooterProps>;
     Closer: React.FC<import("./components/closer/Component").CloserProps>;
 };

package/dist/esm/Component.mobile.js

@@ -1,33 +1,26 @@
-import { _ as __rest, a as __assign } from './tslib.es6-327e6722.js';
-import React, { forwardRef, isValidElement, cloneElement } from 'react';
+import { _ as __rest, a as __assign } from './tslib.es6-c25aba00.js';
+import React, { forwardRef } from 'react';
 import cn from 'classnames';
 import { BaseModal } from '@alfalab/core-components-base-modal/dist/esm';
 import './Context.js';
-import '@alfalab/core-components-button/dist/esm';
-import { Closer } from './components/closer/Component.js';
 import './components/header/Component.js';
+import '@alfalab/core-components-icon-button/dist/esm';
+import '@alfalab/icons-glyph/CrossHeavyMIcon';
+import { Closer } from './components/closer/Component.js';
 import './components/content/Component.js';
 import './components/footer/Component.js';
-import { t as transitions } from './transitions.module-c8dac06a.js';
-import { useMedia } from '@alfalab/hooks';
+import { t as transitions } from './transitions.module-b6b7149e.js';
+import '@alfalab/icons-glyph/CrossMIcon';
 import { HeaderMobile } from './components/header/Component.mobile.js';
 import { ContentMobile } from './components/content/Component.mobile.js';
 import { FooterMobile } from './components/footer/Component.mobile.js';
 
-var styles = {"component":"modal__component_1vhr3"};
+var styles = {"component":"modal__component_odvv0"};
 require('./mobile.css')
 
 var ModalMobileComponent = forwardRef(function (_a, ref) {
     var children = _a.children, className = _a.className, restProps = __rest(_a, ["children", "className"]);
-    var size = useMedia([
-        ['s', '(max-width: 375px)'],
-        ['m', '(min-width: 376px)'],
-    ], 's')[0];
-    return (React.createElement(BaseModal, __assign({}, restProps, { ref: ref, transitionProps: __assign({ classNames: transitions }, restProps.transitionProps), className: cn(className, styles.component), backdropProps: __assign(__assign({}, restProps.backdropProps), { invisible: true }) }), React.Children.map(children, function (child) {
-        return isValidElement(child)
-            ? cloneElement(child, { size: child.props.size || size, fullscreen: true })
-            : child;
-    })));
+    return (React.createElement(BaseModal, __assign({}, restProps, { ref: ref, transitionProps: __assign({ classNames: transitions }, restProps.transitionProps), className: cn(className, styles.component) }), children));
 });
 var ModalMobile = Object.assign(ModalMobileComponent, {
     Content: ContentMobile,

package/dist/esm/Component.responsive.d.ts

@@ -6,14 +6,14 @@ type ModalResponsiveProps = ModalMobileProps & ModalDesktopProps;
 declare const ModalResponsive: React.ForwardRefExoticComponent<import("packages/base-modal/src").BaseModalProps & {
     hasCloser?: boolean | undefined;
 } & {
-    size?: "s" | "m" | "l" | undefined;
+    size?: "s" | "m" | "l" | "xl" | "fullscreen" | undefined;
     fullscreen?: boolean | undefined;
     fixedPosition?: boolean | undefined;
     hasCloser?: boolean | undefined;
 } & React.RefAttributes<HTMLDivElement>> & {
-    Header: React.FC<import("./components/header/Component.desktop").HeaderDesktopProps> | React.FC<import("./components/header/Component").HeaderProps>;
-    Content: React.FC<import("./components/content/Component.desktop").ContentDesktopProps> | React.FC<import("./components/content/Component").ContentProps>;
-    Footer: React.FC<import("./components/footer/Component.desktop").FooterDesktopProps> | React.FC<import("./components/footer/Component").FooterProps>;
+    Header: React.FC<import("./components/header/Component.desktop").HeaderDesktopProps> | React.FC<import("./components/header/Component.mobile").HeaderMobileProps>;
+    Content: React.FC<import("./components/content/Component").ContentProps> | React.FC<import("./components/content/Component.desktop").ContentDesktopProps>;
+    Footer: React.FC<import("./components/footer/Component").FooterProps> | React.FC<import("./components/footer/Component.desktop").FooterDesktopProps>;
     Closer: React.FC<import("./components/closer/Component").CloserProps>;
 };
 export { ModalResponsiveProps, ModalResponsive };

package/dist/esm/Component.responsive.js

@@ -1,24 +1,26 @@
-import { _ as __rest, a as __assign } from './tslib.es6-327e6722.js';
+import { _ as __rest, a as __assign } from './tslib.es6-c25aba00.js';
 import React, { forwardRef, useMemo, useContext } from 'react';
 import 'classnames';
 import '@alfalab/core-components-base-modal/dist/esm';
 import 'react-merge-refs';
 import './Context.js';
-import '@alfalab/core-components-button/dist/esm';
-import { Closer } from './components/closer/Component.js';
 import './components/header/Component.js';
+import '@alfalab/core-components-icon-button/dist/esm';
+import '@alfalab/icons-glyph/CrossHeavyMIcon';
+import { Closer } from './components/closer/Component.js';
 import './components/header/Component.desktop.js';
 import './components/content/Component.js';
 import './components/content/Component.desktop.js';
 import './components/footer/Component.js';
 import './components/footer/Component.desktop.js';
 import { ModalDesktop } from './Component.desktop.js';
-import './transitions.module-c8dac06a.js';
-import { useMedia } from '@alfalab/hooks';
+import './transitions.module-b6b7149e.js';
+import '@alfalab/icons-glyph/CrossMIcon';
 import './components/header/Component.mobile.js';
 import './components/content/Component.mobile.js';
 import './components/footer/Component.mobile.js';
 import { ModalMobile } from './Component.mobile.js';
+import { useMedia } from '@alfalab/hooks';
 
 var ResponsiveContext = React.createContext({
     view: 'desktop',
@@ -34,8 +36,8 @@ function createResponsive(desktop, mobile) {
 var ModalResponsiveComponent = forwardRef(function (_a, ref) {
     var children = _a.children, restProps = __rest(_a, ["children"]);
     var view = useMedia([
-        ['mobile', '(max-width: 767px)'],
-        ['desktop', '(min-width: 768px)'],
+        ['mobile', '(max-width: 1023px)'],
+        ['desktop', '(min-width: 1024px)'],
     ], 'desktop')[0];
     var contextValue = useMemo(function () { return ({ view: view }); }, [view]);
     var Component = view === 'desktop' ? ModalDesktop : ModalMobile;

package/dist/esm/components/closer/Component.d.ts

@@ -1,4 +1,5 @@
-import { ButtonHTMLAttributes, FC } from 'react';
+import { ButtonHTMLAttributes, ElementType, FC } from 'react';
+import { IconButtonProps } from "@alfalab/core-components-icon-button";
 type CloserProps = ButtonHTMLAttributes<HTMLButtonElement> & {
     /**
      * Дополнительный класс
@@ -9,9 +10,20 @@ type CloserProps = ButtonHTMLAttributes<HTMLButtonElement> & {
      */
     align?: 'left' | 'right';
     /**
-     * Флаг, что модальное окно открыто на весь экран
+     * Размер кнопки
      */
-    fullscreen?: boolean;
+    size?: IconButtonProps['size'];
+    /**
+     * Фиксирует крестик
+     */
+    sticky?: boolean;
+    /**
+     * Иконка
+     */
+    icon?: ElementType;
 };
+/**
+ * @deprecated Компонент только для внутреннего использования. Используйте <Header />
+ */
 declare const Closer: FC<CloserProps>;
 export { CloserProps, Closer };

package/dist/esm/components/closer/Component.js

@@ -1,20 +1,28 @@
-import { _ as __rest, a as __assign } from '../../tslib.es6-327e6722.js';
+import { _ as __rest, a as __assign } from '../../tslib.es6-c25aba00.js';
 import React, { useContext, useCallback } from 'react';
 import cn from 'classnames';
 import '@alfalab/core-components-base-modal/dist/esm';
 import { ModalContext } from '../../Context.js';
-import { Button } from '@alfalab/core-components-button/dist/esm';
+import { IconButton } from '@alfalab/core-components-icon-button/dist/esm';
+import { CrossHeavyMIcon } from '@alfalab/icons-glyph/CrossHeavyMIcon';
 
-var styles = {"closer":"modal__closer_1sswy","left":"modal__left_1sswy","right":"modal__right_1sswy","fullscreen":"modal__fullscreen_1sswy"};
+var styles = {"closer":"modal__closer_13ibv","button":"modal__button_13ibv","sticky":"modal__sticky_13ibv"};
 require('./index.css')
 
+/**
+ * @deprecated Компонент только для внутреннего использования. Используйте <Header />
+ */
 var Closer = function (_a) {
-    var className = _a.className, fullscreen = _a.fullscreen, align = _a.align, restProps = __rest(_a, ["className", "fullscreen", "align"]);
+    var _b;
+    var className = _a.className, _c = _a.size, size = _c === void 0 ? 's' : _c, sticky = _a.sticky, _d = _a.icon, icon = _d === void 0 ? CrossHeavyMIcon : _d, restProps = __rest(_a, ["className", "size", "sticky", "icon"]);
     var onClose = useContext(ModalContext).onClose;
     var handleClick = useCallback(function (event) {
         onClose(event, 'closerClick');
     }, [onClose]);
-    return (React.createElement(Button, __assign({ type: 'button', view: 'ghost', className: cn(styles.closer, className, fullscreen && styles.fullscreen, align && styles[align]), "aria-label": '\u0437\u0430\u043A\u0440\u044B\u0442\u044C', onClick: handleClick }, restProps)));
+    return (React.createElement("div", { className: cn(styles.closer, className, (_b = {},
+            _b[styles.sticky] = sticky,
+            _b)) },
+        React.createElement(IconButton, __assign({ size: size, className: styles.button, "aria-label": '\u0437\u0430\u043A\u0440\u044B\u0442\u044C', onClick: handleClick, icon: icon }, restProps))));
 };
 
 export { Closer };

package/dist/esm/components/closer/index.css

@@ -1,4 +1,4 @@
-/* hash: 1rgy3 */
+/* hash: 1wu1k */
 :root {
 
     /* Hard */
@@ -17,36 +17,28 @@
 
     /* paddings */
 
-    /* closer */
-    --modal-closer-icon: url('https://alfabank.gcdn.co/icons/glyph_cross_m.svg');
+    /* scroll */
 
-    /* sticky */
+    /* desktop */
 
-    /* scroll */
+    /* mobile */
 }
-.modal__closer_1sswy {
+.modal__closer_13ibv {
+    flex-shrink: 0;
     width: 48px;
     height: 48px;
-    background-image: var(--modal-closer-icon);
-    background-position: center;
-    background-repeat: no-repeat;
-    flex-shrink: 0;
-    transition: opacity 0.2s ease-out
+    margin-left: auto;
+    display: flex;
+    align-items: center;
+    justify-content: center;
 }
-.modal__closer_1sswy:hover {
-        opacity: 0.7;
-    }
-.modal__closer_1sswy:active {
-        opacity: 0.5;
-    }
-.modal__left_1sswy,
-.modal__right_1sswy {
+.modal__button_13ibv {
+    background: rgba(255, 255, 255, 0.4);
+    -webkit-backdrop-filter: blur(10px);
+            backdrop-filter: blur(10px);
+    border-radius: 50px;
+}
+.modal__sticky_13ibv {
     position: sticky;
     top: calc(var(--modal-vertical-padding) * -1);
 }
-.modal__right_1sswy {
-    margin-left: auto;
-}
-.modal__fullscreen_1sswy {
-    top: 0;
-}

package/dist/esm/components/content/Component.d.ts

@@ -13,7 +13,5 @@ type ContentProps = {
      */
     flex?: boolean;
 };
-declare const Content: FC<ContentProps & {
-    styles: Record<string, string>;
-}>;
+declare const Content: FC<ContentProps>;
 export { ContentProps, Content };

package/dist/esm/components/content/Component.desktop.d.ts

@@ -1,14 +1,11 @@
 import { FC } from 'react';
 import { ContentProps } from "./Component";
+import { ModalDesktopProps } from "../../Component.desktop";
 type ContentDesktopProps = ContentProps & {
     /**
      * Размер
      */
-    size?: 's' | 'm' | 'l';
-    /**
-     * Флаг, что модальное окно открыто на весь экран
-     */
-    fullscreen?: boolean;
+    size?: ModalDesktopProps['size'];
 };
 declare const ContentDesktop: FC<ContentDesktopProps>;
 export { ContentDesktopProps, ContentDesktop };