@alfalab/core-components-modal 6.1.12 → 7.0.1

package/cssm/components/header/desktop.module.css

@@ -12,9 +12,8 @@
 } :root {
     --border-radius-l: 12px;
 } :root {
-    --gap-xs: 8px;
+    --gap-s: 12px;
     --gap-m: 16px;
-    --gap-xl: 24px;
     --gap-3xl: 40px;
 } :root {
     --font-family-system: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Helvetica,
@@ -27,21 +26,23 @@
     /* sizes */
 
     /* paddings */
-    --modal-s-header-paddings: var(--gap-xs) var(--gap-xs) var(--gap-m);
+    --modal-s-header-paddings: 28px 28px 0;
 
     /* scroll */
 
     /* desktop */
-    --modal-s-header-desktop-content-paddings: var(--gap-3xl) var(--gap-m) 0 0;
-    --modal-s-header-desktop-font-size: 22px;
+    --modal-s-header-desktop-content-paddings: var(--gap-s);
+    --modal-s-header-desktop-font-size: 20px;
     --modal-s-header-desktop-line-height: 26px;
-    --modal-l-header-desktop-content-paddings: var(--gap-3xl) var(--gap-m) 0 0;
+    --modal-l-header-desktop-content-paddings: 6px var(--gap-s) var(--gap-m);
     --modal-l-header-desktop-font-size: 30px;
     --modal-l-header-desktop-line-height: 36px;
     --modal-header-desktop-font-weight: bold;
     --modal-header-desktop-font-family: var(--font-family-system);
 
     /* mobile */
+
+    /* paddings */
 } .header {
     border-top-left-radius: var(--modal-border-radius);
     border-top-right-radius: var(--modal-border-radius);
@@ -60,17 +61,12 @@
     font-size: var(--modal-l-header-desktop-font-size);
     line-height: var(--modal-l-header-desktop-line-height);
 } .s,
-.m {
-    padding: var(--modal-s-header-paddings)
-} .s:not(.hasContent), .m:not(.hasContent) {
-        padding-bottom: 0;
-    } .l,
+.m,
+.l,
 .xl,
 .fullscreen {
-    padding: var(--gap-xl) var(--gap-xl) var(--gap-m)
-} .l:not(.hasContent), .xl:not(.hasContent), .fullscreen:not(.hasContent) {
-        padding-bottom: var(--gap-m);
-    } .sticky {
+    padding: var(--modal-s-header-paddings);
+} .sticky {
     top: calc(var(--modal-vertical-padding) * -1)
 } .sticky.fullscreen {
         top: 0;

package/cssm/components/header/index.module.css

@@ -1,6 +1,7 @@
 :root {
 } /* deprecated */ :root {
     --color-light-bg-primary: #fff;
+    --color-light-border-secondary: #e7e9eb;
 } :root {
 } :root {
 } :root {
@@ -23,21 +24,14 @@
 
     /* scroll */
     --modal-header-highlight-background: var(--color-light-bg-primary);
-    --modal-header-highlight-box-shadow: none;
+    --modal-header-highlight-box-shadow: 0 1px 0 0 var(--color-light-border-secondary);
 
     /* desktop */
 
     /* mobile */
-} .header {
-    width: 100%;
-    box-sizing: border-box;
-    display: flex;
-    align-items: stretch;
-    justify-content: space-between;
-    transition: box-shadow 0.2s ease, background 0.2s ease
-} .header:not(.hasContent) {
-        pointer-events: none;
-    } .highlighted {
+
+    /* paddings */
+} .highlighted {
     background: var(--modal-header-highlight-background);
     box-shadow: var(--modal-header-highlight-box-shadow);
 } .sticky {
@@ -45,32 +39,4 @@
     z-index: 1
 } .sticky.hasContent {
         background: var(--modal-header-background);
-    } .content {
-    flex-grow: 1;
-} .title {
-    word-break: break-word;
-} .addon {
-    min-width: 48px;
-    height: 48px;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    pointer-events: all;
-} .closer {
-    margin-left: auto;
-} .left {
-    justify-content: flex-start;
-    text-align: left;
-} .center {
-    justify-content: center;
-    text-align: center;
-} .right {
-    justify-content: flex-end;
-    text-align: right;
-} .trim {
-    overflow: hidden
-} .trim .title {
-        overflow: hidden;
-        white-space: nowrap;
-        text-overflow: ellipsis;
     }

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

@@ -11,9 +11,9 @@
     /* Hard up */
 } :root {
 } :root {
+    --gap-2xs: 4px;
     --gap-xs: 8px;
     --gap-s: 12px;
-    --gap-m: 16px;
 } :root {
     --font-family-system: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Helvetica,
         sans-serif;
@@ -29,11 +29,16 @@
     /* desktop */
 
     /* mobile */
-    --modal-header-mobile-content-paddings: var(--gap-s) var(--gap-xs) var(--gap-s) var(--gap-m);
+    --modal-header-mobile-content-paddings: var(--gap-s) var(--gap-xs);
     --modal-header-mobile-font-size: 18px;
     --modal-header-mobile-line-height: 24px;
     --modal-header-mobile-font-family: var(--font-family-system);
     --modal-header-mobile-font-weight: bold;
+
+    /* paddings */
+    --modal-header-mobile-paddings: var(--gap-2xs) var(--gap-xs);
+} .header {
+    padding: var(--modal-header-mobile-paddings);
 } .sticky {
     top: 0;
 } .content {

package/cssm/desktop.js

@@ -3,14 +3,11 @@
 var Component_desktop = require('./Component.desktop.js');
 require('tslib');
 require('react');
-require('./components/closer/Component.js');
+require('@alfalab/core-components-navigation-bar/cssm');
+require('./components/content/Component.js');
 require('classnames');
-require('@alfalab/core-components-icon-button/cssm');
-require('@alfalab/icons-glyph/CrossHeavyMIcon');
 require('./Context.js');
 require('@alfalab/core-components-base-modal/cssm');
-require('./components/closer/index.module.css');
-require('./components/content/Component.js');
 require('./ResponsiveContext.js');
 require('./components/content/desktop.module.css');
 require('./components/content/index.module.css');
@@ -21,7 +18,6 @@ require('./components/footer/index.module.css');
 require('./components/footer/layout.module.css');
 require('./components/footer/mobile.module.css');
 require('./components/header/Component.js');
-require('@alfalab/icons-glyph/CrossMIcon');
 require('./components/header/desktop.module.css');
 require('./components/header/index.module.css');
 require('./components/header/mobile.module.css');

package/cssm/desktop.module.css

@@ -32,6 +32,8 @@
     /* desktop */
 
     /* mobile */
+
+    /* paddings */
 } .wrapper {
     padding-top: var(--modal-vertical-padding);
     padding-bottom: var(--modal-vertical-padding);

package/cssm/index.js

@@ -4,25 +4,21 @@ var Component_responsive = require('./Component.responsive.js');
 var Context = require('./Context.js');
 require('tslib');
 require('react');
+require('@alfalab/core-components-navigation-bar/cssm');
 require('@alfalab/hooks');
-require('./components/closer/Component.js');
-require('classnames');
-require('@alfalab/core-components-icon-button/cssm');
-require('@alfalab/icons-glyph/CrossHeavyMIcon');
-require('./components/closer/index.module.css');
-require('@alfalab/core-components-base-modal/cssm');
 require('./components/content/Component.js');
+require('classnames');
 require('./ResponsiveContext.js');
 require('./components/content/desktop.module.css');
 require('./components/content/index.module.css');
 require('./components/content/mobile.module.css');
+require('@alfalab/core-components-base-modal/cssm');
 require('./components/footer/Component.js');
 require('./components/footer/desktop.module.css');
 require('./components/footer/index.module.css');
 require('./components/footer/layout.module.css');
 require('./components/footer/mobile.module.css');
 require('./components/header/Component.js');
-require('@alfalab/icons-glyph/CrossMIcon');
 require('./components/header/desktop.module.css');
 require('./components/header/index.module.css');
 require('./components/header/mobile.module.css');

package/cssm/mobile.js

@@ -3,14 +3,11 @@
 var Component_mobile = require('./Component.mobile.js');
 require('tslib');
 require('react');
-require('./components/closer/Component.js');
+require('@alfalab/core-components-navigation-bar/cssm');
+require('./components/content/Component.js');
 require('classnames');
-require('@alfalab/core-components-icon-button/cssm');
-require('@alfalab/icons-glyph/CrossHeavyMIcon');
 require('./Context.js');
 require('@alfalab/core-components-base-modal/cssm');
-require('./components/closer/index.module.css');
-require('./components/content/Component.js');
 require('./ResponsiveContext.js');
 require('./components/content/desktop.module.css');
 require('./components/content/index.module.css');
@@ -21,7 +18,6 @@ require('./components/footer/index.module.css');
 require('./components/footer/layout.module.css');
 require('./components/footer/mobile.module.css');
 require('./components/header/Component.js');
-require('@alfalab/icons-glyph/CrossMIcon');
 require('./components/header/desktop.module.css');
 require('./components/header/index.module.css');
 require('./components/header/mobile.module.css');

package/cssm/mobile.module.css

@@ -24,6 +24,8 @@
     /* desktop */
 
     /* mobile */
+
+    /* paddings */
 } .component {
     flex: 1;
     width: 100%;

package/cssm/responsive.js

@@ -3,15 +3,12 @@
 var Component_responsive = require('./Component.responsive.js');
 require('tslib');
 require('react');
+require('@alfalab/core-components-navigation-bar/cssm');
 require('@alfalab/hooks');
-require('./components/closer/Component.js');
+require('./components/content/Component.js');
 require('classnames');
-require('@alfalab/core-components-icon-button/cssm');
-require('@alfalab/icons-glyph/CrossHeavyMIcon');
 require('./Context.js');
 require('@alfalab/core-components-base-modal/cssm');
-require('./components/closer/index.module.css');
-require('./components/content/Component.js');
 require('./ResponsiveContext.js');
 require('./components/content/desktop.module.css');
 require('./components/content/index.module.css');
@@ -22,7 +19,6 @@ require('./components/footer/index.module.css');
 require('./components/footer/layout.module.css');
 require('./components/footer/mobile.module.css');
 require('./components/header/Component.js');
-require('@alfalab/icons-glyph/CrossMIcon');
 require('./components/header/desktop.module.css');
 require('./components/header/index.module.css');
 require('./components/header/mobile.module.css');

package/cssm/vars.css

@@ -24,4 +24,6 @@
     /* desktop */
 
     /* mobile */
+
+    /* paddings */
 }

package/desktop.css

@@ -1,4 +1,4 @@
-/* hash: zfev5 */
+/* hash: xaf1o */
 :root {
 } /* deprecated */ :root {
 } :root {
@@ -33,25 +33,27 @@
     /* desktop */
 
     /* mobile */
-} .modal__wrapper_1qc7d {
+
+    /* paddings */
+} .modal__wrapper_rugaz {
     padding-top: var(--modal-vertical-padding);
     padding-bottom: var(--modal-vertical-padding);
-} .modal__component_1qc7d {
+} .modal__component_rugaz {
     width: 100%;
     max-width: 100%;
     border-radius: var(--modal-border-radius);
-} .modal__fullscreen_1qc7d {
+} .modal__fullscreen_rugaz {
     padding-top: 0;
     padding-bottom: 0
-} .modal__fullscreen_1qc7d .modal__component_1qc7d {
+} .modal__fullscreen_rugaz .modal__component_rugaz {
         flex: 1;
         border-radius: 0;
-    } .modal__s_1qc7d {
+    } .modal__s_rugaz {
     width: var(--modal-s-width);
-} .modal__m_1qc7d {
+} .modal__m_rugaz {
     width: var(--modal-m-width);
-} .modal__l_1qc7d {
+} .modal__l_rugaz {
     width: var(--modal-l-width);
-} .modal__xl_1qc7d {
+} .modal__xl_rugaz {
     width: var(--modal-xl-width);
 }

package/desktop.js

@@ -3,17 +3,14 @@
 var Component_desktop = require('./Component.desktop.js');
 require('tslib');
 require('react');
-require('./components/closer/Component.js');
+require('@alfalab/core-components-navigation-bar');
+require('./components/content/Component.js');
 require('classnames');
-require('@alfalab/core-components-icon-button');
-require('@alfalab/icons-glyph/CrossHeavyMIcon');
 require('./Context.js');
 require('@alfalab/core-components-base-modal');
-require('./components/content/Component.js');
 require('./ResponsiveContext.js');
 require('./components/footer/Component.js');
 require('./components/header/Component.js');
-require('@alfalab/icons-glyph/CrossMIcon');
 require('./Component.js');
 require('react-merge-refs');
 

package/esm/Component.desktop.d.ts

@@ -10,6 +10,6 @@ declare const ModalDesktop: React.ForwardRefExoticComponent<BaseModalProps & {
     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>;
+    Closer: React.FC<import("@alfalab/core-components-navigation-bar").CloserProps>;
 };
 export { ModalDesktop };

package/esm/Component.desktop.js

@@ -1,17 +1,14 @@
 import { __assign } from 'tslib';
 import React, { forwardRef } from 'react';
-import { Closer } from './components/closer/Component.js';
+import { Closer } from '@alfalab/core-components-navigation-bar/esm';
 import { Content } from './components/content/Component.js';
 import { Footer } from './components/footer/Component.js';
 import { Header } from './components/header/Component.js';
 import { Modal } from './Component.js';
 import 'classnames';
-import '@alfalab/core-components-icon-button/esm';
-import '@alfalab/icons-glyph/CrossHeavyMIcon';
 import './Context.js';
 import '@alfalab/core-components-base-modal/esm';
 import './ResponsiveContext.js';
-import '@alfalab/icons-glyph/CrossMIcon';
 import 'react-merge-refs';
 
 var ModalDesktopComponent = forwardRef(function (props, ref) { return (React.createElement(Modal, __assign({}, props, { ref: ref, view: 'desktop' }))); });

package/esm/Component.js

@@ -5,13 +5,13 @@ import cn from 'classnames';
 import { BaseModal } from '@alfalab/core-components-base-modal/esm';
 import { ResponsiveContext } from './ResponsiveContext.js';
 
-var desktopStyles = {"wrapper":"modal__wrapper_1qc7d","component":"modal__component_1qc7d","fullscreen":"modal__fullscreen_1qc7d","s":"modal__s_1qc7d","m":"modal__m_1qc7d","l":"modal__l_1qc7d","xl":"modal__xl_1qc7d"};
+var desktopStyles = {"wrapper":"modal__wrapper_rugaz","component":"modal__component_rugaz","fullscreen":"modal__fullscreen_rugaz","s":"modal__s_rugaz","m":"modal__m_rugaz","l":"modal__l_rugaz","xl":"modal__xl_rugaz"};
 require('./desktop.css')
 
-var mobileStyles = {"component":"modal__component_1ouph"};
+var mobileStyles = {"component":"modal__component_57gnx"};
 require('./mobile.css')
 
-var transitions = {"appear":"modal__appear_19gn2","enter":"modal__enter_19gn2","appearActive":"modal__appearActive_19gn2","enterActive":"modal__enterActive_19gn2","exit":"modal__exit_19gn2","exitActive":"modal__exitActive_19gn2","exitDone":"modal__exitDone_19gn2"};
+var transitions = {"appear":"modal__appear_1js93","enter":"modal__enter_1js93","appearActive":"modal__appearActive_1js93","enterActive":"modal__enterActive_1js93","exit":"modal__exit_1js93","exitActive":"modal__exitActive_1js93","exitDone":"modal__exitDone_1js93"};
 require('./transitions.css')
 
 var Modal = forwardRef(function (_a, ref) {

package/esm/Component.mobile.d.ts

@@ -5,6 +5,6 @@ declare const ModalMobile: React.ForwardRefExoticComponent<ModalMobileProps & Re
     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>;
+    Closer: React.FC<import("@alfalab/core-components-navigation-bar").CloserProps>;
 };
 export { ModalMobile };

package/esm/Component.mobile.js

@@ -1,17 +1,14 @@
 import { __assign } from 'tslib';
 import React, { forwardRef } from 'react';
-import { Closer } from './components/closer/Component.js';
+import { Closer } from '@alfalab/core-components-navigation-bar/esm';
 import { Content } from './components/content/Component.js';
 import { Footer } from './components/footer/Component.js';
 import { Header } from './components/header/Component.js';
 import { Modal } from './Component.js';
 import 'classnames';
-import '@alfalab/core-components-icon-button/esm';
-import '@alfalab/icons-glyph/CrossHeavyMIcon';
 import './Context.js';
 import '@alfalab/core-components-base-modal/esm';
 import './ResponsiveContext.js';
-import '@alfalab/icons-glyph/CrossMIcon';
 import 'react-merge-refs';
 
 var ModalMobileComponent = forwardRef(function (props, ref) { return (React.createElement(Modal, __assign({}, props, { ref: ref, view: 'mobile' }))); });

package/esm/Component.responsive.d.ts

@@ -12,6 +12,6 @@ declare const ModalResponsive: React.ForwardRefExoticComponent<BaseModalProps &
     Header: React.FC<import("./components/header/Component").HeaderProps>;
     Content: React.FC<import("./typings").ContentProps>;
     Footer: React.FC<import("./components/footer/Component").FooterProps>;
-    Closer: React.FC<import("./components/closer/Component").CloserProps>;
+    Closer: React.FC<import("@alfalab/core-components-navigation-bar").CloserProps>;
 };
 export { ModalResponsive };

package/esm/Component.responsive.js

@@ -1,18 +1,15 @@
 import { __rest, __assign } from 'tslib';
 import React, { forwardRef } from 'react';
+import { Closer } from '@alfalab/core-components-navigation-bar/esm';
 import { useMedia } from '@alfalab/hooks';
-import { Closer } from './components/closer/Component.js';
 import { Content } from './components/content/Component.js';
 import { Footer } from './components/footer/Component.js';
 import { Header } from './components/header/Component.js';
 import { Modal } from './Component.js';
 import 'classnames';
-import '@alfalab/core-components-icon-button/esm';
-import '@alfalab/icons-glyph/CrossHeavyMIcon';
 import './Context.js';
 import '@alfalab/core-components-base-modal/esm';
 import './ResponsiveContext.js';
-import '@alfalab/icons-glyph/CrossMIcon';
 import 'react-merge-refs';
 
 var ModalResponsiveComponent = forwardRef(function (_a, ref) {

package/esm/components/content/Component.js

@@ -4,22 +4,23 @@ import { ModalContext } from '../../Context.js';
 import { ResponsiveContext } from '../../ResponsiveContext.js';
 import '@alfalab/core-components-base-modal/esm';
 
-var desktopStyles = {"s":"modal__s_1rous","m":"modal__m_1rous","l":"modal__l_1rous","xl":"modal__xl_1rous","fullscreen":"modal__fullscreen_1rous"};
+var desktopStyles = {"s":"modal__s_1hd8r","m":"modal__m_1hd8r","l":"modal__l_1hd8r","xl":"modal__xl_1hd8r","fullscreen":"modal__fullscreen_1hd8r"};
 require('./desktop.css')
 
-var styles = {"content":"modal__content_4qg8n","flex":"modal__flex_4qg8n"};
+var styles = {"content":"modal__content_1tfy9","withHeader":"modal__withHeader_1tfy9","flex":"modal__flex_1tfy9"};
 require('./index.css')
 
-var mobileStyles = {"content":"modal__content_1ia6o"};
+var mobileStyles = {"content":"modal__content_hqto6"};
 require('./mobile.css')
 
 var Content = function (_a) {
     var _b;
     var children = _a.children, flex = _a.flex, className = _a.className;
-    var contentRef = useContext(ModalContext).contentRef;
-    var _c = useContext(ResponsiveContext), size = _c.size, view = _c.view;
+    var _c = useContext(ModalContext), contentRef = _c.contentRef, hasHeader = _c.hasHeader;
+    var _d = useContext(ResponsiveContext), size = _d.size, view = _d.view;
     return (React.createElement("div", { className: cn(styles.content, className, (_b = {},
             _b[styles.flex] = flex,
+            _b[styles.withHeader] = hasHeader,
             _b[desktopStyles[size]] = view === 'desktop' && size,
             _b[mobileStyles.content] = view === 'mobile',
             _b)), ref: contentRef }, children));

package/esm/components/content/desktop.css

@@ -1,4 +1,4 @@
-/* hash: 3fjyg */
+/* hash: 1sk1p */
 :root {
 } /* deprecated */ :root {
 } :root {
@@ -12,7 +12,7 @@
     /* Hard up */
 } :root {
 } :root {
-    --gap-6xl: 72px;
+    --gap-3xl: 40px;
 } :root {
 } :root {
 } :root {
@@ -20,23 +20,22 @@
     /* sizes */
 
     /* paddings */
-    --modal-s-content-paddings: 0 56px;
-    --modal-s-content-only-bottom-padding: 56px;
+    --modal-s-content-paddings: var(--gap-3xl) var(--gap-3xl) 0;
+    --modal-s-content-only-bottom-padding: var(--gap-3xl);
 
     /* scroll */
 
     /* desktop */
 
     /* mobile */
-} .modal__s_1rous,
-.modal__m_1rous {
+
+    /* paddings */
+} .modal__s_1hd8r,
+.modal__m_1hd8r,
+.modal__l_1hd8r,
+.modal__xl_1hd8r,
+.modal__fullscreen_1hd8r {
     padding: var(--modal-s-content-paddings)
-} .modal__s_1rous:last-child, .modal__m_1rous:last-child {
+} .modal__s_1hd8r:last-child, .modal__m_1hd8r:last-child, .modal__l_1hd8r:last-child, .modal__xl_1hd8r:last-child, .modal__fullscreen_1hd8r:last-child {
         padding-bottom: var(--modal-s-content-only-bottom-padding);
-    } .modal__l_1rous,
-.modal__xl_1rous,
-.modal__fullscreen_1rous {
-    padding: 0 var(--gap-6xl)
-} .modal__l_1rous:last-child, .modal__xl_1rous:last-child, .modal__fullscreen_1rous:last-child {
-        padding-bottom: var(--gap-6xl);
     }

package/esm/components/content/index.css

@@ -1,4 +1,4 @@
-/* hash: 8dl35 */
+/* hash: 1lszs */
 :root {
 } /* deprecated */ :root {
 } :root {
@@ -25,9 +25,13 @@
     /* desktop */
 
     /* mobile */
-} .modal__content_4qg8n {
+
+    /* paddings */
+} .modal__content_1tfy9 {
     box-sizing: border-box;
-    width: 100%;
-} .modal__flex_4qg8n {
+    width: 100%
+} .modal__content_1tfy9.modal__withHeader_1tfy9 {
+        padding-top: 0;
+    } .modal__flex_1tfy9 {
     flex: 1;
 }

package/esm/components/content/mobile.css

@@ -1,4 +1,4 @@
-/* hash: uxhv9 */
+/* hash: 1qwyb */
 :root {
 } /* deprecated */ :root {
 } :root {
@@ -26,8 +26,10 @@
     /* desktop */
 
     /* mobile */
-} .modal__content_1ia6o {
-    padding: 0 var(--gap-m)
-} .modal__content_1ia6o:last-child {
+
+    /* paddings */
+} .modal__content_hqto6 {
+    padding: var(--gap-m) var(--gap-m) 0
+} .modal__content_hqto6:last-child {
         padding-bottom: var(--gap-m);
     }

package/esm/components/footer/Component.js

@@ -4,16 +4,16 @@ import { ModalContext } from '../../Context.js';
 import { ResponsiveContext } from '../../ResponsiveContext.js';
 import '@alfalab/core-components-base-modal/esm';
 
-var desktopStyles = {"footer":"modal__footer_1sboe","sticky":"modal__sticky_1sboe","fullscreen":"modal__fullscreen_1sboe","s":"modal__s_1sboe","m":"modal__m_1sboe","l":"modal__l_1sboe","xl":"modal__xl_1sboe"};
+var desktopStyles = {"footer":"modal__footer_15gd9","sticky":"modal__sticky_15gd9","fullscreen":"modal__fullscreen_15gd9","s":"modal__s_15gd9","m":"modal__m_15gd9","l":"modal__l_15gd9","xl":"modal__xl_15gd9"};
 require('./desktop.css')
 
-var styles = {"footer":"modal__footer_1de14","sticky":"modal__sticky_1de14","highlighted":"modal__highlighted_1de14"};
+var styles = {"footer":"modal__footer_qipz1","sticky":"modal__sticky_qipz1","highlighted":"modal__highlighted_qipz1"};
 require('./index.css')
 
-var layoutStyles = {"column":"modal__column_ecmie","gap-16":"modal__gap-16_ecmie","gap-24":"modal__gap-24_ecmie","gap-32":"modal__gap-32_ecmie","start":"modal__start_ecmie","center":"modal__center_ecmie","space-between":"modal__space-between_ecmie"};
+var layoutStyles = {"column":"modal__column_1qife","gap-16":"modal__gap-16_1qife","gap-24":"modal__gap-24_1qife","gap-32":"modal__gap-32_1qife","start":"modal__start_1qife","center":"modal__center_1qife","space-between":"modal__space-between_1qife"};
 require('./layout.css')
 
-var mobileStyles = {"footer":"modal__footer_1paqu","sticky":"modal__sticky_1paqu"};
+var mobileStyles = {"footer":"modal__footer_a1sci","sticky":"modal__sticky_a1sci"};
 require('./mobile.css')
 
 var Footer = function (_a) {