@alfalab/core-components-universal-modal 3.0.2 → 3.0.3-alfasans

package/modern/Component.responsive.js.map

@@ -1 +1 @@
-{"version":3,"file":"Component.responsive.js","sources":["../src/Component.responsive.tsx"],"sourcesContent":["import React, { forwardRef } from 'react';\n\nimport { useIsDesktop } from '@alfalab/core-components-mq';\n\nimport { ContentResponsive } from './components/content';\nimport { FooterResponsive } from './components/footer';\nimport { HeaderResponsive } from './components/header';\nimport { UniversalModalDesktop } from './desktop';\nimport { UniversalModalMobile } from './mobile';\nimport { type UniversalModalResponsiveProps } from './typings';\n\nexport const UniversalModal = forwardRef<HTMLDivElement, UniversalModalResponsiveProps>(\n    ({ children, breakpoint, defaultMatchMediaValue, dataTestId, ...restProps }, ref) => {\n        const isDesktop = useIsDesktop(breakpoint, defaultMatchMediaValue);\n\n        const Component = isDesktop ? UniversalModalDesktop : UniversalModalMobile;\n\n        return (\n            <Component ref={ref} dataTestId={dataTestId} {...restProps}>\n                {children}\n            </Component>\n        );\n    },\n);\n\nexport const UniversalModalResponsive = Object.assign(UniversalModal, {\n    Header: HeaderResponsive,\n    Content: ContentResponsive,\n    Footer: FooterResponsive,\n});\n\nUniversalModalResponsive.displayName = 'UniversalModalResponsive';\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;MAWa,cAAc,GAAG,UAAU,CACpC,CAAC,EAAE,QAAQ,EAAE,UAAU,EAAE,sBAAsB,EAAE,UAAU,EAAE,GAAG,SAAS,EAAE,EAAE,GAAG,KAAI;IAChF,MAAM,SAAS,GAAG,YAAY,CAAC,UAAU,EAAE,sBAAsB,CAAC;IAElE,MAAM,SAAS,GAAG,SAAS,GAAG,qBAAqB,GAAG,oBAAoB;AAE1E,IAAA,QACI,KAAC,CAAA,aAAA,CAAA,SAAS,EAAC,EAAA,GAAG,EAAE,GAAG,EAAE,UAAU,EAAE,UAAU,EAAM,GAAA,SAAS,IACrD,QAAQ,CACD;AAEpB,CAAC;MAGQ,wBAAwB,GAAG,MAAM,CAAC,MAAM,CAAC,cAAc,EAAE;AAClE,IAAA,MAAM,EAAE,gBAAgB;AACxB,IAAA,OAAO,EAAE,iBAAiB;AAC1B,IAAA,MAAM,EAAE,gBAAgB;AAC3B,CAAA;AAED,wBAAwB,CAAC,WAAW,GAAG,0BAA0B;;;;"}
+{"version":3,"file":"Component.responsive.js","sources":["../src/Component.responsive.tsx"],"sourcesContent":["import React, { forwardRef } from 'react';\n\nimport { useIsDesktop } from '@alfalab/core-components-mq';\n\nimport { ContentResponsive } from './components/content';\nimport { FooterResponsive } from './components/footer';\nimport { HeaderResponsive } from './components/header';\nimport { UniversalModalDesktop } from './desktop';\nimport { UniversalModalMobile } from './mobile';\nimport { type UniversalModalResponsiveProps } from './typings';\n\nexport const UniversalModal = forwardRef<HTMLDivElement, UniversalModalResponsiveProps>(\n    ({ children, breakpoint, defaultMatchMediaValue, dataTestId, ...restProps }, ref) => {\n        const isDesktop = useIsDesktop(breakpoint, defaultMatchMediaValue);\n\n        const Component = isDesktop ? UniversalModalDesktop : UniversalModalMobile;\n\n        return (\n            <Component ref={ref} dataTestId={dataTestId} {...restProps}>\n                {children}\n            </Component>\n        );\n    },\n);\n\nexport const UniversalModalResponsive = Object.assign(UniversalModal, {\n    Header: HeaderResponsive,\n    Content: ContentResponsive,\n    Footer: FooterResponsive,\n});\n\nUniversalModalResponsive.displayName = 'UniversalModalResponsive';\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;MAWa,cAAc,GAAG,UAAU,CACpC,CAAC,EAAE,QAAQ,EAAE,UAAU,EAAE,sBAAsB,EAAE,UAAU,EAAE,GAAG,SAAS,EAAE,EAAE,GAAG,KAAI;IAChF,MAAM,SAAS,GAAG,YAAY,CAAC,UAAU,EAAE,sBAAsB,CAAC;IAElE,MAAM,SAAS,GAAG,SAAS,GAAG,qBAAqB,GAAG,oBAAoB;AAE1E,IAAA,QACI,KAAC,CAAA,aAAA,CAAA,SAAS,EAAC,EAAA,GAAG,EAAE,GAAG,EAAE,UAAU,EAAE,UAAU,EAAM,GAAA,SAAS,IACrD,QAAQ,CACD;AAEpB,CAAC;MAGQ,wBAAwB,GAAG,MAAM,CAAC,MAAM,CAAC,cAAc,EAAE;AAClE,IAAA,MAAM,EAAE,gBAAgB;AACxB,IAAA,OAAO,EAAE,iBAAiB;AAC1B,IAAA,MAAM,EAAE,gBAAgB;AAC3B,CAAA;AAED,wBAAwB,CAAC,WAAW,GAAG,0BAA0B;;;;"}

package/modern/Context.d.ts

@@ -1,3 +1,6 @@
 /// <reference types="react" />
 import { BaseModalContext } from '@alfalab/core-components-base-modal/modern';
+/**
+ * @deprecated Некоторые параметры могут не соответствовать реальным состояниям компонента
+ */
 export declare const ModalContext: import("react").Context<BaseModalContext>;

package/modern/Context.js

@@ -1,5 +1,8 @@
 import { BaseModalContext } from '@alfalab/core-components-base-modal/modern';
 
+/**
+ * @deprecated Некоторые параметры могут не соответствовать реальным состояниям компонента
+ */
 const ModalContext = BaseModalContext;
 
 export { ModalContext };

package/modern/Context.js.map

@@ -1 +1 @@
-{"version":3,"file":"Context.js","sources":["../src/Context.ts"],"sourcesContent":["import { BaseModalContext } from '@alfalab/core-components-base-modal';\n\nexport const ModalContext = BaseModalContext;\n"],"names":[],"mappings":";;AAEO,MAAM,YAAY,GAAG;;;;"}
+{"version":3,"file":"Context.js","sources":["../src/Context.ts"],"sourcesContent":["import { BaseModalContext } from '@alfalab/core-components-base-modal';\n\n/**\n * @deprecated Некоторые параметры могут не соответствовать реальным состояниям компонента\n */\nexport const ModalContext = BaseModalContext;\n"],"names":[],"mappings":";;AAEA;;AAEG;AACI,MAAM,YAAY,GAAG;;;;"}

package/modern/components/content/base-content/index.css

@@ -2,7 +2,7 @@
     --gap-2xl: 32px;
     --gap-32: var(--gap-2xl);
 }
-.universal-modal__content_18ivv {
+.universal-modal__content_7n7jd {
     position: relative;
     box-sizing: border-box;
     width: 100%;

package/modern/components/content/base-content/index.module.css.js

@@ -1,6 +1,6 @@
 import './index.css';
 
-const styles = {"content":"universal-modal__content_18ivv"};
+const styles = {"content":"universal-modal__content_7n7jd"};
 
 export { styles as default };
 //# sourceMappingURL=index.module.css.js.map

package/modern/components/content/desktop/Component.desktop.js

@@ -1,11 +1,11 @@
 import React, { useContext } from 'react';
 import cn from 'classnames';
-import { UniversalModalContext } from '../../../context/universal-modal-context.js';
+import { ModalContext } from '../../../Context.js';
 import { BaseContent } from '../base-content/base-content.js';
 import styles from './desktop.module.css.js';
 
 const ContentDesktop = ({ className, ...restProps }) => {
-    const { hasHeader, hasFooter } = useContext(UniversalModalContext);
+    const { hasHeader, hasFooter } = useContext(ModalContext);
     return (React.createElement(BaseContent, { className: cn(styles.content, className, {
             [styles.withHeader]: hasHeader,
             [styles.withFooter]: hasFooter,

package/modern/components/content/desktop/Component.desktop.js.map

@@ -1 +1 @@
-{"version":3,"file":"Component.desktop.js","sources":["../../../../src/components/content/desktop/Component.desktop.tsx"],"sourcesContent":["import React, { type FC, useContext } from 'react';\nimport cn from 'classnames';\n\nimport { UniversalModalContext } from '../../../context/universal-modal-context';\nimport { BaseContent, type ContentProps } from '../base-content/base-content';\n\nimport styles from './desktop.module.css';\n\nexport interface ContentDesktopProps extends ContentProps {\n    /**\n     * Размер (только для desktop версии компонента)\n     */\n    size?: 's' | 500;\n}\n\nexport const ContentDesktop: FC<ContentDesktopProps> = ({ className, ...restProps }) => {\n    const { hasHeader, hasFooter } = useContext(UniversalModalContext);\n\n    return (\n        <BaseContent\n            className={cn(styles.content, className, {\n                [styles.withHeader]: hasHeader,\n                [styles.withFooter]: hasFooter,\n            })}\n            {...restProps}\n        />\n    );\n};\n"],"names":[],"mappings":";;;;;;AAeO,MAAM,cAAc,GAA4B,CAAC,EAAE,SAAS,EAAE,GAAG,SAAS,EAAE,KAAI;IACnF,MAAM,EAAE,SAAS,EAAE,SAAS,EAAE,GAAG,UAAU,CAAC,qBAAqB,CAAC;AAElE,IAAA,QACI,KAAA,CAAA,aAAA,CAAC,WAAW,EAAA,EACR,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,OAAO,EAAE,SAAS,EAAE;AACrC,YAAA,CAAC,MAAM,CAAC,UAAU,GAAG,SAAS;AAC9B,YAAA,CAAC,MAAM,CAAC,UAAU,GAAG,SAAS;AACjC,SAAA,CAAC,EACE,GAAA,SAAS,EACf,CAAA;AAEV;;;;"}
+{"version":3,"file":"Component.desktop.js","sources":["../../../../src/components/content/desktop/Component.desktop.tsx"],"sourcesContent":["import React, { type FC, useContext } from 'react';\nimport cn from 'classnames';\n\nimport { ModalContext } from '../../../Context';\nimport { BaseContent, type ContentProps } from '../base-content/base-content';\n\nimport styles from './desktop.module.css';\n\nexport interface ContentDesktopProps extends ContentProps {\n    /**\n     * Размер (только для desktop версии компонента)\n     */\n    size?: 's' | 500;\n}\n\nexport const ContentDesktop: FC<ContentDesktopProps> = ({ className, ...restProps }) => {\n    const { hasHeader, hasFooter } = useContext(ModalContext);\n\n    return (\n        <BaseContent\n            className={cn(styles.content, className, {\n                [styles.withHeader]: hasHeader,\n                [styles.withFooter]: hasFooter,\n            })}\n            {...restProps}\n        />\n    );\n};\n"],"names":[],"mappings":";;;;;;AAeO,MAAM,cAAc,GAA4B,CAAC,EAAE,SAAS,EAAE,GAAG,SAAS,EAAE,KAAI;IACnF,MAAM,EAAE,SAAS,EAAE,SAAS,EAAE,GAAG,UAAU,CAAC,YAAY,CAAC;AAEzD,IAAA,QACI,KAAA,CAAA,aAAA,CAAC,WAAW,EAAA,EACR,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,OAAO,EAAE,SAAS,EAAE;AACrC,YAAA,CAAC,MAAM,CAAC,UAAU,GAAG,SAAS;AAC9B,YAAA,CAAC,MAAM,CAAC,UAAU,GAAG,SAAS;AACjC,SAAA,CAAC,EACE,GAAA,SAAS,EACf,CAAA;AAEV;;;;"}

package/modern/components/content/desktop/desktop.css

@@ -1,9 +1,9 @@
 :root {
     --gap-0: 0px;
 }
-.universal-modal__content_1hga6.universal-modal__withHeader_1hga6 {
+.universal-modal__content_1yhc9.universal-modal__withHeader_1yhc9 {
         padding-top: var(--gap-0);
     }
-.universal-modal__content_1hga6.universal-modal__withFooter_1hga6 {
+.universal-modal__content_1yhc9.universal-modal__withFooter_1yhc9 {
         padding-bottom: var(--gap-0);
     }

package/modern/components/content/desktop/desktop.module.css.js

@@ -1,6 +1,6 @@
 import './desktop.css';
 
-const styles = {"content":"universal-modal__content_1hga6","withHeader":"universal-modal__withHeader_1hga6","withFooter":"universal-modal__withFooter_1hga6"};
+const styles = {"content":"universal-modal__content_1yhc9","withHeader":"universal-modal__withHeader_1yhc9","withFooter":"universal-modal__withFooter_1yhc9"};
 
 export { styles as default };
 //# sourceMappingURL=desktop.module.css.js.map

package/modern/components/content/mobile/mobile.css

@@ -5,12 +5,12 @@
     --gap-16: var(--gap-m);
     --gap-20: var(--gap-l);
 }
-.universal-modal__content_6km1b {
+.universal-modal__content_zd9ai {
     padding: var(--gap-16);
 }
-.universal-modal__content_6km1b.universal-modal__withHeader_6km1b {
+.universal-modal__content_zd9ai.universal-modal__withHeader_zd9ai {
         padding-top: var(--gap-0);
     }
-.universal-modal__content_6km1b.universal-modal__withFooter_6km1b {
+.universal-modal__content_zd9ai.universal-modal__withFooter_zd9ai {
         padding-bottom: var(--gap-20);
     }

package/modern/components/content/mobile/mobile.module.css.js

@@ -1,6 +1,6 @@
 import './mobile.css';
 
-const styles = {"content":"universal-modal__content_6km1b","withHeader":"universal-modal__withHeader_6km1b","withFooter":"universal-modal__withFooter_6km1b"};
+const styles = {"content":"universal-modal__content_zd9ai","withHeader":"universal-modal__withHeader_zd9ai","withFooter":"universal-modal__withFooter_zd9ai"};
 
 export { styles as default };
 //# sourceMappingURL=mobile.module.css.js.map

package/modern/components/footer/base-footer/index.css

@@ -13,7 +13,7 @@
     --universal-modal-footer-highlight-background: var(--color-light-modal-bg-primary);
     --universal-modal-footer-highlight-box-shadow: 0 -1px 0 0 var(--color-light-neutral-300);
 }
-.universal-modal__footer_1drio {
+.universal-modal__footer_y8wvo {
     width: 100%;
     box-sizing: border-box;
     transition:
@@ -21,12 +21,12 @@
         background 0.2s ease;
     padding: var(--gap-16) var(--gap-32) var(--gap-32);
 }
-.universal-modal__sticky_1drio {
+.universal-modal__sticky_y8wvo {
     background: var(--universal-modal-footer-background);
     position: sticky;
     z-index: 1;
 }
-.universal-modal__highlighted_1drio {
+.universal-modal__highlighted_y8wvo {
     background: var(--universal-modal-footer-highlight-background);
     box-shadow: var(--universal-modal-footer-highlight-box-shadow);
 }

package/modern/components/footer/base-footer/index.module.css.js

@@ -1,6 +1,6 @@
 import './index.css';
 
-const styles = {"footer":"universal-modal__footer_1drio","sticky":"universal-modal__sticky_1drio","highlighted":"universal-modal__highlighted_1drio"};
+const styles = {"footer":"universal-modal__footer_y8wvo","sticky":"universal-modal__sticky_y8wvo","highlighted":"universal-modal__highlighted_y8wvo"};
 
 export { styles as default };
 //# sourceMappingURL=index.module.css.js.map

package/modern/components/footer/desktop/Component.desktop.js

@@ -1,14 +1,16 @@
 import React, { forwardRef, useContext } from 'react';
 import cn from 'classnames';
-import { UniversalModalContext } from '../../../context/universal-modal-context.js';
+import { ModalContext } from '../../../Context.js';
 import { FOOTER_MEDIUM_BREAKPOINT } from '../../../desktop/constants/index.js';
+import { UniversalModalContext } from '../../../desktop/context/index.js';
 import { BaseFooter } from '../base-footer/base-footer.js';
 import styles from './desktop.module.css.js';
 import layoutStyles from './layout.module.css.js';
 
 const FooterDesktop = forwardRef((props, ref) => {
     const { className, sticky, layout = 'start', ...restProps } = props;
-    const { modalWidth = 500, modalFooterHighlighted } = useContext(UniversalModalContext);
+    const { width: modalWidth } = useContext(UniversalModalContext);
+    const { footerHighlighted: modalFooterHighlighted } = useContext(ModalContext);
     const isMiddle = modalWidth === 'fullWidth' || modalWidth >= FOOTER_MEDIUM_BREAKPOINT;
     return (React.createElement(BaseFooter, { ref: ref, className: cn(layoutStyles[layout], className, {
             [styles.sticky]: sticky,

package/modern/components/footer/desktop/Component.desktop.js.map

@@ -1 +1 @@
-{"version":3,"file":"Component.desktop.js","sources":["../../../../src/components/footer/desktop/Component.desktop.tsx"],"sourcesContent":["import React, { forwardRef, useContext } from 'react';\nimport cn from 'classnames';\n\nimport { UniversalModalContext } from '../../../context/universal-modal-context';\nimport { FOOTER_MEDIUM_BREAKPOINT } from '../../../desktop/constants';\nimport { BaseFooter, type FooterProps } from '../base-footer/base-footer';\n\nimport styles from './desktop.module.css';\nimport layoutStyles from './layout.module.css';\n\nexport interface FooterDesktopProps extends FooterProps {\n    /**\n     * Размер (только для desktop версии компонента)\n     */\n    size?: 's' | 500;\n}\n\nexport const FooterDesktop = forwardRef<HTMLDivElement, FooterDesktopProps>((props, ref) => {\n    const { className, sticky, layout = 'start', ...restProps } = props;\n    const { modalWidth = 500, modalFooterHighlighted } = useContext(UniversalModalContext);\n\n    const isMiddle = modalWidth === 'fullWidth' || modalWidth >= FOOTER_MEDIUM_BREAKPOINT;\n\n    return (\n        <BaseFooter\n            ref={ref}\n            className={cn(layoutStyles[layout], className, {\n                [styles.sticky]: sticky,\n                [layoutStyles.middle]: isMiddle,\n            })}\n            sticky={sticky}\n            layout={layout}\n            isHighlighted={modalFooterHighlighted}\n            {...restProps}\n        />\n    );\n});\n\nFooterDesktop.displayName = 'FooterDesktop';\n"],"names":[],"mappings":";;;;;;;;AAiBa,MAAA,aAAa,GAAG,UAAU,CAAqC,CAAC,KAAK,EAAE,GAAG,KAAI;AACvF,IAAA,MAAM,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,GAAG,OAAO,EAAE,GAAG,SAAS,EAAE,GAAG,KAAK;AACnE,IAAA,MAAM,EAAE,UAAU,GAAG,GAAG,EAAE,sBAAsB,EAAE,GAAG,UAAU,CAAC,qBAAqB,CAAC;IAEtF,MAAM,QAAQ,GAAG,UAAU,KAAK,WAAW,IAAI,UAAU,IAAI,wBAAwB;AAErF,IAAA,QACI,KAAC,CAAA,aAAA,CAAA,UAAU,IACP,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,EAAE,CAAC,YAAY,CAAC,MAAM,CAAC,EAAE,SAAS,EAAE;AAC3C,YAAA,CAAC,MAAM,CAAC,MAAM,GAAG,MAAM;AACvB,YAAA,CAAC,YAAY,CAAC,MAAM,GAAG,QAAQ;AAClC,SAAA,CAAC,EACF,MAAM,EAAE,MAAM,EACd,MAAM,EAAE,MAAM,EACd,aAAa,EAAE,sBAAsB,EAAA,GACjC,SAAS,EAAA,CACf;AAEV,CAAC;AAED,aAAa,CAAC,WAAW,GAAG,eAAe;;;;"}
+{"version":3,"file":"Component.desktop.js","sources":["../../../../src/components/footer/desktop/Component.desktop.tsx"],"sourcesContent":["import React, { forwardRef, useContext } from 'react';\nimport cn from 'classnames';\n\nimport { ModalContext } from '../../../Context';\nimport { FOOTER_MEDIUM_BREAKPOINT } from '../../../desktop/constants';\nimport { UniversalModalContext } from '../../../desktop/context';\nimport { BaseFooter, type FooterProps } from '../base-footer/base-footer';\n\nimport styles from './desktop.module.css';\nimport layoutStyles from './layout.module.css';\n\nexport interface FooterDesktopProps extends FooterProps {\n    /**\n     * Размер (только для desktop версии компонента)\n     */\n    size?: 's' | 500;\n}\n\nexport const FooterDesktop = forwardRef<HTMLDivElement, FooterDesktopProps>((props, ref) => {\n    const { className, sticky, layout = 'start', ...restProps } = props;\n    const { width: modalWidth } = useContext(UniversalModalContext);\n    const { footerHighlighted: modalFooterHighlighted } = useContext(ModalContext);\n\n    const isMiddle = modalWidth === 'fullWidth' || modalWidth >= FOOTER_MEDIUM_BREAKPOINT;\n\n    return (\n        <BaseFooter\n            ref={ref}\n            className={cn(layoutStyles[layout], className, {\n                [styles.sticky]: sticky,\n                [layoutStyles.middle]: isMiddle,\n            })}\n            sticky={sticky}\n            layout={layout}\n            isHighlighted={modalFooterHighlighted}\n            {...restProps}\n        />\n    );\n});\n\nFooterDesktop.displayName = 'FooterDesktop';\n"],"names":[],"mappings":";;;;;;;;;AAkBa,MAAA,aAAa,GAAG,UAAU,CAAqC,CAAC,KAAK,EAAE,GAAG,KAAI;AACvF,IAAA,MAAM,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,GAAG,OAAO,EAAE,GAAG,SAAS,EAAE,GAAG,KAAK;IACnE,MAAM,EAAE,KAAK,EAAE,UAAU,EAAE,GAAG,UAAU,CAAC,qBAAqB,CAAC;IAC/D,MAAM,EAAE,iBAAiB,EAAE,sBAAsB,EAAE,GAAG,UAAU,CAAC,YAAY,CAAC;IAE9E,MAAM,QAAQ,GAAG,UAAU,KAAK,WAAW,IAAI,UAAU,IAAI,wBAAwB;AAErF,IAAA,QACI,KAAC,CAAA,aAAA,CAAA,UAAU,IACP,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,EAAE,CAAC,YAAY,CAAC,MAAM,CAAC,EAAE,SAAS,EAAE;AAC3C,YAAA,CAAC,MAAM,CAAC,MAAM,GAAG,MAAM;AACvB,YAAA,CAAC,YAAY,CAAC,MAAM,GAAG,QAAQ;AAClC,SAAA,CAAC,EACF,MAAM,EAAE,MAAM,EACd,MAAM,EAAE,MAAM,EACd,aAAa,EAAE,sBAAsB,EAAA,GACjC,SAAS,EAAA,CACf;AAEV,CAAC;AAED,aAAa,CAAC,WAAW,GAAG,eAAe;;;;"}

package/modern/components/footer/desktop/desktop.css

@@ -1,6 +1,6 @@
 :root {
     --gap-0: 0px;
 }
-.universal-modal__sticky_mpls5 {
+.universal-modal__sticky_kegr7 {
     bottom: var(--gap-0);
 }

package/modern/components/footer/desktop/desktop.module.css.js

@@ -1,6 +1,6 @@
 import './desktop.css';
 
-const styles = {"sticky":"universal-modal__sticky_mpls5"};
+const styles = {"sticky":"universal-modal__sticky_kegr7"};
 
 export { styles as default };
 //# sourceMappingURL=desktop.module.css.js.map

package/modern/components/footer/desktop/layout.css

@@ -6,29 +6,29 @@
     --gap-12: var(--gap-s);
     --gap-16: var(--gap-m);
 }
-.universal-modal__column_mfxnq {
+.universal-modal__column_1a0s7 {
     display: flex;
     flex-direction: column;
     gap: var(--gap-8);
 }
-.universal-modal__column_mfxnq.universal-modal__middle_mfxnq {
+.universal-modal__column_1a0s7.universal-modal__middle_1a0s7 {
         gap: var(--gap-12);
     }
-.universal-modal__start_mfxnq {
+.universal-modal__start_1a0s7 {
     justify-content: flex-start;
 }
-.universal-modal__center_mfxnq {
+.universal-modal__center_1a0s7 {
     justify-content: center;
 }
-.universal-modal__space-between_mfxnq {
+.universal-modal__space-between_1a0s7 {
     justify-content: space-between;
 }
-.universal-modal__space-between_mfxnq > * {
+.universal-modal__space-between_1a0s7 > * {
         flex: 1;
     }
-.universal-modal__start_mfxnq,
-.universal-modal__center_mfxnq,
-.universal-modal__space-between_mfxnq {
+.universal-modal__start_1a0s7,
+.universal-modal__center_1a0s7,
+.universal-modal__space-between_1a0s7 {
     display: flex;
     gap: var(--gap-16);
 }

package/modern/components/footer/desktop/layout.module.css.js

@@ -1,6 +1,6 @@
 import './layout.css';
 
-const layoutStyles = {"column":"universal-modal__column_mfxnq","middle":"universal-modal__middle_mfxnq","start":"universal-modal__start_mfxnq","center":"universal-modal__center_mfxnq","space-between":"universal-modal__space-between_mfxnq"};
+const layoutStyles = {"column":"universal-modal__column_1a0s7","middle":"universal-modal__middle_1a0s7","start":"universal-modal__start_1a0s7","center":"universal-modal__center_1a0s7","space-between":"universal-modal__space-between_1a0s7"};
 
 export { layoutStyles as default };
 //# sourceMappingURL=layout.module.css.js.map

package/modern/components/footer/mobile/layout.mobile.css

@@ -2,26 +2,26 @@
     --gap-m: 16px;
     --gap-16: var(--gap-m);
 }
-.universal-modal__column_1081g {
+.universal-modal__column_hbwst {
     display: flex;
     flex-direction: column;
     gap: var(--gap-16);
 }
-.universal-modal__start_1081g {
+.universal-modal__start_hbwst {
     justify-content: flex-start;
 }
-.universal-modal__center_1081g {
+.universal-modal__center_hbwst {
     justify-content: center;
 }
-.universal-modal__space-between_1081g {
+.universal-modal__space-between_hbwst {
     justify-content: space-between;
 }
-.universal-modal__space-between_1081g > * {
+.universal-modal__space-between_hbwst > * {
         flex: 1;
     }
-.universal-modal__start_1081g,
-.universal-modal__center_1081g,
-.universal-modal__space-between_1081g {
+.universal-modal__start_hbwst,
+.universal-modal__center_hbwst,
+.universal-modal__space-between_hbwst {
     display: flex;
     gap: var(--gap-16);
 }

package/modern/components/footer/mobile/layout.mobile.module.css.js

@@ -1,6 +1,6 @@
 import './layout.mobile.css';
 
-const layoutStylesMobile = {"column":"universal-modal__column_1081g","start":"universal-modal__start_1081g","center":"universal-modal__center_1081g","space-between":"universal-modal__space-between_1081g"};
+const layoutStylesMobile = {"column":"universal-modal__column_hbwst","start":"universal-modal__start_hbwst","center":"universal-modal__center_hbwst","space-between":"universal-modal__space-between_hbwst"};
 
 export { layoutStylesMobile as default };
 //# sourceMappingURL=layout.mobile.module.css.js.map

package/modern/components/footer/mobile/mobile.css

@@ -3,9 +3,9 @@
     --gap-0: 0px;
     --gap-16: var(--gap-m);
 }
-.universal-modal__footer_ufu28 {
+.universal-modal__footer_1edx8 {
     padding: var(--gap-16);
 }
-.universal-modal__sticky_ufu28 {
+.universal-modal__sticky_1edx8 {
     bottom: var(--gap-0);
 }

package/modern/components/footer/mobile/mobile.module.css.js

@@ -1,6 +1,6 @@
 import './mobile.css';
 
-const styles = {"footer":"universal-modal__footer_ufu28","sticky":"universal-modal__sticky_ufu28"};
+const styles = {"footer":"universal-modal__footer_1edx8","sticky":"universal-modal__sticky_1edx8"};
 
 export { styles as default };
 //# sourceMappingURL=mobile.module.css.js.map

package/modern/components/header/base-header/index.css

@@ -10,22 +10,22 @@
     --universal-modal-header-highlight-background: var(--color-light-modal-bg-primary);
     --universal-modal-header-highlight-box-shadow: 0 1px 0 0 var(--color-light-neutral-300);
 }
-.universal-modal__header_obf8e {
+.universal-modal__header_1tadi {
     width: 100%;
     box-sizing: border-box;
     transition:
         box-shadow 0.2s ease,
         background 0.2s ease;
 }
-.universal-modal__header_obf8e.universal-modal__highlighted_obf8e {
+.universal-modal__header_1tadi.universal-modal__highlighted_1tadi {
         background: var(--universal-modal-header-highlight-background);
         box-shadow: var(--universal-modal-header-highlight-box-shadow);
     }
-.universal-modal__header_obf8e.universal-modal__sticky_obf8e {
+.universal-modal__header_1tadi.universal-modal__sticky_1tadi {
         position: sticky;
         top: var(--gap-0);
         z-index: 1;
     }
-.universal-modal__header_obf8e.universal-modal__sticky_obf8e.universal-modal__hasContent_obf8e {
+.universal-modal__header_1tadi.universal-modal__sticky_1tadi.universal-modal__hasContent_1tadi {
             background: var(--universal-modal-header-background);
         }

package/modern/components/header/base-header/index.module.css.js

@@ -1,6 +1,6 @@
 import './index.css';
 
-const styles = {"header":"universal-modal__header_obf8e","highlighted":"universal-modal__highlighted_obf8e","sticky":"universal-modal__sticky_obf8e","hasContent":"universal-modal__hasContent_obf8e"};
+const styles = {"header":"universal-modal__header_1tadi","highlighted":"universal-modal__highlighted_1tadi","sticky":"universal-modal__sticky_1tadi","hasContent":"universal-modal__hasContent_1tadi"};
 
 export { styles as default };
 //# sourceMappingURL=index.module.css.js.map

package/modern/components/header/base-header/useBaseHeader.d.ts

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+import { type NavigationBarPrivateProps } from '@alfalab/core-components-navigation-bar-private/modern';
+declare type Params = Pick<NavigationBarPrivateProps, 'title' | 'children' | 'bottomAddons' | 'onClose'>;
+export declare const useBaseHeader: (params: Params) => {
+    headerHighlighted: boolean | undefined;
+    hasContent: boolean;
+    componentRef: import("react").RefObject<HTMLDivElement>;
+    titleRef: import("react").RefObject<HTMLDivElement>;
+    handleClose: (event: import("react").MouseEvent<HTMLElement, MouseEvent> | import("react").KeyboardEvent<HTMLElement>, reason?: "backdropClick" | "escapeKeyDown" | "closerClick" | undefined) => void;
+};
+export {};

package/modern/components/header/base-header/useBaseHeader.js

@@ -0,0 +1,25 @@
+import { useContext, useRef, useEffect } from 'react';
+import { ModalContext } from '../../../Context.js';
+
+const useBaseHeader = (params) => {
+    const { title, children, bottomAddons, onClose } = params;
+    const { componentRef, headerHighlighted, onClose: handleCloseByContext, setHasHeader, } = useContext(ModalContext);
+    const titleRef = useRef(null);
+    const hasContent = Boolean(title || children || bottomAddons);
+    const handleClose = (...args) => {
+        if (onClose) {
+            return onClose(...args);
+        }
+        return handleCloseByContext(...args);
+    };
+    useEffect(() => {
+        setHasHeader(true);
+        return () => {
+            setHasHeader(false);
+        };
+    }, [setHasHeader]);
+    return { headerHighlighted, hasContent, componentRef, titleRef, handleClose };
+};
+
+export { useBaseHeader };
+//# sourceMappingURL=useBaseHeader.js.map

package/modern/components/header/base-header/useBaseHeader.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useBaseHeader.js","sources":["../../../../src/components/header/base-header/useBaseHeader.ts"],"sourcesContent":["import { useContext, useEffect, useRef } from 'react';\n\nimport { type NavigationBarPrivateProps } from '@alfalab/core-components-navigation-bar-private';\n\nimport { ModalContext } from '../../../Context';\n\ntype Params = Pick<NavigationBarPrivateProps, 'title' | 'children' | 'bottomAddons' | 'onClose'>;\n\nexport const useBaseHeader = (params: Params) => {\n    const { title, children, bottomAddons, onClose } = params;\n\n    const {\n        componentRef,\n        headerHighlighted,\n        onClose: handleCloseByContext,\n        setHasHeader,\n    } = useContext(ModalContext);\n\n    const titleRef = useRef<HTMLDivElement>(null);\n\n    const hasContent = Boolean(title || children || bottomAddons);\n\n    const handleClose: NavigationBarPrivateProps['onClose'] = (...args) => {\n        if (onClose) {\n            return onClose(...args);\n        }\n\n        return handleCloseByContext(...args);\n    };\n\n    useEffect(() => {\n        setHasHeader(true);\n\n        return () => {\n            setHasHeader(false);\n        };\n    }, [setHasHeader]);\n\n    return { headerHighlighted, hasContent, componentRef, titleRef, handleClose };\n};\n"],"names":[],"mappings":";;;AAQa,MAAA,aAAa,GAAG,CAAC,MAAc,KAAI;IAC5C,MAAM,EAAE,KAAK,EAAE,QAAQ,EAAE,YAAY,EAAE,OAAO,EAAE,GAAG,MAAM;AAEzD,IAAA,MAAM,EACF,YAAY,EACZ,iBAAiB,EACjB,OAAO,EAAE,oBAAoB,EAC7B,YAAY,GACf,GAAG,UAAU,CAAC,YAAY,CAAC;AAE5B,IAAA,MAAM,QAAQ,GAAG,MAAM,CAAiB,IAAI,CAAC;IAE7C,MAAM,UAAU,GAAG,OAAO,CAAC,KAAK,IAAI,QAAQ,IAAI,YAAY,CAAC;AAE7D,IAAA,MAAM,WAAW,GAAyC,CAAC,GAAG,IAAI,KAAI;AAClE,QAAA,IAAI,OAAO,EAAE;AACT,YAAA,OAAO,OAAO,CAAC,GAAG,IAAI,CAAC;AAC1B;AAED,QAAA,OAAO,oBAAoB,CAAC,GAAG,IAAI,CAAC;AACxC,KAAC;IAED,SAAS,CAAC,MAAK;QACX,YAAY,CAAC,IAAI,CAAC;AAElB,QAAA,OAAO,MAAK;YACR,YAAY,CAAC,KAAK,CAAC;AACvB,SAAC;AACL,KAAC,EAAE,CAAC,YAAY,CAAC,CAAC;IAElB,OAAO,EAAE,iBAAiB,EAAE,UAAU,EAAE,YAAY,EAAE,QAAQ,EAAE,WAAW,EAAE;AACjF;;;;"}

package/modern/components/header/desktop/Component.desktop.js

@@ -1,26 +1,22 @@
-import React, { forwardRef, useContext, useRef } from 'react';
+import React, { forwardRef } from 'react';
 import cn from 'classnames';
 import { NavigationBarPrivate } from '@alfalab/core-components-navigation-bar-private/modern';
 import { getDataTestId } from '@alfalab/core-components-shared/modern';
-import { ModalContext } from '../../../Context.js';
-import { UniversalModalContext } from '../../../context/universal-modal-context.js';
+import { useBaseHeader } from '../base-header/useBaseHeader.js';
 import styles from '../base-header/index.module.css.js';
 import desktopStyles from './desktop.module.css.js';
 
 const HeaderDesktop = forwardRef((props, ref) => {
     const { className, children, title, sticky, bigTitle = false, titleClassName, dataTestId, bottomAddonsClassName, onClose, ...restProps } = props;
-    const { componentRef, onClose: handleCloseByContext } = useContext(ModalContext);
-    const { modalHeaderHighlighted } = useContext(UniversalModalContext);
-    const titleRef = useRef(null);
-    const hasContent = Boolean(title || children || restProps.bottomAddons);
-    const handleClose = (...args) => {
-        if (onClose) {
-            return onClose(...args);
-        }
-        return handleCloseByContext(...args);
-    };
+    const { bottomAddons } = restProps;
+    const { headerHighlighted, hasContent, componentRef, titleRef, handleClose } = useBaseHeader({
+        title,
+        children,
+        bottomAddons,
+        onClose,
+    });
     return (React.createElement(NavigationBarPrivate, { ...restProps, ref: ref, view: 'desktop', dataTestId: getDataTestId(dataTestId, 'header'), dataName: 'modalHeaderDesktop', sticky: sticky, title: title, className: cn(styles.header, desktopStyles.header, className, {
-            [styles.highlighted]: sticky && modalHeaderHighlighted && hasContent,
+            [styles.highlighted]: sticky && headerHighlighted && hasContent,
             [styles.sticky]: sticky,
             [styles.hasContent]: hasContent,
             [desktopStyles.medium]: bigTitle,

package/modern/components/header/desktop/Component.desktop.js.map

@@ -1 +1 @@
-{"version":3,"file":"Component.desktop.js","sources":["../../../../src/components/header/desktop/Component.desktop.tsx"],"sourcesContent":["import React, { forwardRef, useContext, useRef } from 'react';\nimport cn from 'classnames';\n\nimport {\n    NavigationBarPrivate,\n    type NavigationBarPrivateProps,\n} from '@alfalab/core-components-navigation-bar-private';\nimport { getDataTestId } from '@alfalab/core-components-shared';\n\nimport { ModalContext } from '../../../Context';\nimport { UniversalModalContext } from '../../../context/universal-modal-context';\n\nimport styles from '../base-header/index.module.css';\nimport desktopStyles from './desktop.module.css';\n\nexport interface HeaderDesktopProps\n    extends Omit<\n        NavigationBarPrivateProps,\n        'size' | 'view' | 'parentRef' | 'titleSize' | 'subtitle'\n    > {\n    /**\n     * Заголовок в шапке крупного размера\n     * @default false\n     */\n    bigTitle?: boolean;\n}\n\nexport const HeaderDesktop = forwardRef<HTMLDivElement, HeaderDesktopProps>((props, ref) => {\n    const {\n        className,\n        children,\n        title,\n        sticky,\n        bigTitle = false,\n        titleClassName,\n        dataTestId,\n        bottomAddonsClassName,\n        onClose,\n        ...restProps\n    } = props;\n\n    const { componentRef, onClose: handleCloseByContext } = useContext(ModalContext);\n    const { modalHeaderHighlighted } = useContext(UniversalModalContext);\n\n    const titleRef = useRef<HTMLDivElement>(null);\n\n    const hasContent = Boolean(title || children || restProps.bottomAddons);\n\n    const handleClose: NavigationBarPrivateProps['onClose'] = (...args) => {\n        if (onClose) {\n            return onClose(...args);\n        }\n\n        return handleCloseByContext(...args);\n    };\n\n    return (\n        <NavigationBarPrivate\n            {...restProps}\n            ref={ref}\n            view='desktop'\n            dataTestId={getDataTestId(dataTestId, 'header')}\n            dataName='modalHeaderDesktop'\n            sticky={sticky}\n            title={title}\n            className={cn(styles.header, desktopStyles.header, className, {\n                [styles.highlighted]: sticky && modalHeaderHighlighted && hasContent,\n                [styles.sticky]: sticky,\n                [styles.hasContent]: hasContent,\n                [desktopStyles.medium]: bigTitle,\n            })}\n            bottomAddonsClassName={cn(desktopStyles.bottomAddons, bottomAddonsClassName)}\n            scrollableParentRef={componentRef}\n            titleClassName={cn(desktopStyles.headerTitle, titleClassName)}\n            titleRef={titleRef}\n            onClose={handleClose}\n        >\n            {children}\n        </NavigationBarPrivate>\n    );\n});\n\nHeaderDesktop.displayName = 'HeaderDesktop';\n"],"names":[],"mappings":";;;;;;;;;AA2Ba,MAAA,aAAa,GAAG,UAAU,CAAqC,CAAC,KAAK,EAAE,GAAG,KAAI;IACvF,MAAM,EACF,SAAS,EACT,QAAQ,EACR,KAAK,EACL,MAAM,EACN,QAAQ,GAAG,KAAK,EAChB,cAAc,EACd,UAAU,EACV,qBAAqB,EACrB,OAAO,EACP,GAAG,SAAS,EACf,GAAG,KAAK;AAET,IAAA,MAAM,EAAE,YAAY,EAAE,OAAO,EAAE,oBAAoB,EAAE,GAAG,UAAU,CAAC,YAAY,CAAC;IAChF,MAAM,EAAE,sBAAsB,EAAE,GAAG,UAAU,CAAC,qBAAqB,CAAC;AAEpE,IAAA,MAAM,QAAQ,GAAG,MAAM,CAAiB,IAAI,CAAC;AAE7C,IAAA,MAAM,UAAU,GAAG,OAAO,CAAC,KAAK,IAAI,QAAQ,IAAI,SAAS,CAAC,YAAY,CAAC;AAEvE,IAAA,MAAM,WAAW,GAAyC,CAAC,GAAG,IAAI,KAAI;AAClE,QAAA,IAAI,OAAO,EAAE;AACT,YAAA,OAAO,OAAO,CAAC,GAAG,IAAI,CAAC;AAC1B;AAED,QAAA,OAAO,oBAAoB,CAAC,GAAG,IAAI,CAAC;AACxC,KAAC;IAED,QACI,oBAAC,oBAAoB,EAAA,EAAA,GACb,SAAS,EACb,GAAG,EAAE,GAAG,EACR,IAAI,EAAC,SAAS,EACd,UAAU,EAAE,aAAa,CAAC,UAAU,EAAE,QAAQ,CAAC,EAC/C,QAAQ,EAAC,oBAAoB,EAC7B,MAAM,EAAE,MAAM,EACd,KAAK,EAAE,KAAK,EACZ,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,MAAM,EAAE,aAAa,CAAC,MAAM,EAAE,SAAS,EAAE;YAC1D,CAAC,MAAM,CAAC,WAAW,GAAG,MAAM,IAAI,sBAAsB,IAAI,UAAU;AACpE,YAAA,CAAC,MAAM,CAAC,MAAM,GAAG,MAAM;AACvB,YAAA,CAAC,MAAM,CAAC,UAAU,GAAG,UAAU;AAC/B,YAAA,CAAC,aAAa,CAAC,MAAM,GAAG,QAAQ;AACnC,SAAA,CAAC,EACF,qBAAqB,EAAE,EAAE,CAAC,aAAa,CAAC,YAAY,EAAE,qBAAqB,CAAC,EAC5E,mBAAmB,EAAE,YAAY,EACjC,cAAc,EAAE,EAAE,CAAC,aAAa,CAAC,WAAW,EAAE,cAAc,CAAC,EAC7D,QAAQ,EAAE,QAAQ,EAClB,OAAO,EAAE,WAAW,IAEnB,QAAQ,CACU;AAE/B,CAAC;AAED,aAAa,CAAC,WAAW,GAAG,eAAe;;;;"}
+{"version":3,"file":"Component.desktop.js","sources":["../../../../src/components/header/desktop/Component.desktop.tsx"],"sourcesContent":["import React, { forwardRef } from 'react';\nimport cn from 'classnames';\n\nimport {\n    NavigationBarPrivate,\n    type NavigationBarPrivateProps,\n} from '@alfalab/core-components-navigation-bar-private';\nimport { getDataTestId } from '@alfalab/core-components-shared';\n\nimport { useBaseHeader } from '../base-header/useBaseHeader';\n\nimport styles from '../base-header/index.module.css';\nimport desktopStyles from './desktop.module.css';\n\nexport interface HeaderDesktopProps\n    extends Omit<\n        NavigationBarPrivateProps,\n        'size' | 'view' | 'parentRef' | 'titleSize' | 'subtitle'\n    > {\n    /**\n     * Заголовок в шапке крупного размера\n     * @default false\n     */\n    bigTitle?: boolean;\n}\n\nexport const HeaderDesktop = forwardRef<HTMLDivElement, HeaderDesktopProps>((props, ref) => {\n    const {\n        className,\n        children,\n        title,\n        sticky,\n        bigTitle = false,\n        titleClassName,\n        dataTestId,\n        bottomAddonsClassName,\n        onClose,\n        ...restProps\n    } = props;\n\n    const { bottomAddons } = restProps;\n\n    const { headerHighlighted, hasContent, componentRef, titleRef, handleClose } = useBaseHeader({\n        title,\n        children,\n        bottomAddons,\n        onClose,\n    });\n\n    return (\n        <NavigationBarPrivate\n            {...restProps}\n            ref={ref}\n            view='desktop'\n            dataTestId={getDataTestId(dataTestId, 'header')}\n            dataName='modalHeaderDesktop'\n            sticky={sticky}\n            title={title}\n            className={cn(styles.header, desktopStyles.header, className, {\n                [styles.highlighted]: sticky && headerHighlighted && hasContent,\n                [styles.sticky]: sticky,\n                [styles.hasContent]: hasContent,\n                [desktopStyles.medium]: bigTitle,\n            })}\n            bottomAddonsClassName={cn(desktopStyles.bottomAddons, bottomAddonsClassName)}\n            scrollableParentRef={componentRef}\n            titleClassName={cn(desktopStyles.headerTitle, titleClassName)}\n            titleRef={titleRef}\n            onClose={handleClose}\n        >\n            {children}\n        </NavigationBarPrivate>\n    );\n});\n\nHeaderDesktop.displayName = 'HeaderDesktop';\n"],"names":[],"mappings":";;;;;;;;AA0Ba,MAAA,aAAa,GAAG,UAAU,CAAqC,CAAC,KAAK,EAAE,GAAG,KAAI;IACvF,MAAM,EACF,SAAS,EACT,QAAQ,EACR,KAAK,EACL,MAAM,EACN,QAAQ,GAAG,KAAK,EAChB,cAAc,EACd,UAAU,EACV,qBAAqB,EACrB,OAAO,EACP,GAAG,SAAS,EACf,GAAG,KAAK;AAET,IAAA,MAAM,EAAE,YAAY,EAAE,GAAG,SAAS;AAElC,IAAA,MAAM,EAAE,iBAAiB,EAAE,UAAU,EAAE,YAAY,EAAE,QAAQ,EAAE,WAAW,EAAE,GAAG,aAAa,CAAC;QACzF,KAAK;QACL,QAAQ;QACR,YAAY;QACZ,OAAO;AACV,KAAA,CAAC;IAEF,QACI,oBAAC,oBAAoB,EAAA,EAAA,GACb,SAAS,EACb,GAAG,EAAE,GAAG,EACR,IAAI,EAAC,SAAS,EACd,UAAU,EAAE,aAAa,CAAC,UAAU,EAAE,QAAQ,CAAC,EAC/C,QAAQ,EAAC,oBAAoB,EAC7B,MAAM,EAAE,MAAM,EACd,KAAK,EAAE,KAAK,EACZ,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,MAAM,EAAE,aAAa,CAAC,MAAM,EAAE,SAAS,EAAE;YAC1D,CAAC,MAAM,CAAC,WAAW,GAAG,MAAM,IAAI,iBAAiB,IAAI,UAAU;AAC/D,YAAA,CAAC,MAAM,CAAC,MAAM,GAAG,MAAM;AACvB,YAAA,CAAC,MAAM,CAAC,UAAU,GAAG,UAAU;AAC/B,YAAA,CAAC,aAAa,CAAC,MAAM,GAAG,QAAQ;AACnC,SAAA,CAAC,EACF,qBAAqB,EAAE,EAAE,CAAC,aAAa,CAAC,YAAY,EAAE,qBAAqB,CAAC,EAC5E,mBAAmB,EAAE,YAAY,EACjC,cAAc,EAAE,EAAE,CAAC,aAAa,CAAC,WAAW,EAAE,cAAc,CAAC,EAC7D,QAAQ,EAAE,QAAQ,EAClB,OAAO,EAAE,WAAW,IAEnB,QAAQ,CACU;AAE/B,CAAC;AAED,aAAa,CAAC,WAAW,GAAG,eAAe;;;;"}

package/modern/components/header/desktop/desktop.css

@@ -8,36 +8,41 @@
     --gap-20: var(--gap-l);
 }
 :root {
-    --font-family-system:
-        system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Helvetica, sans-serif;
+    --font-family-alfasans:
+        'Alfa Interface Sans', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue',
+        Helvetica, sans-serif;
 }
-.universal-modal__header_39007 {
+.universal-modal__header_1bzqd {
     padding: var(--gap-20) var(--gap-20) 0;
 }
-.universal-modal__header_39007 .universal-modal__headerTitle_39007 {
+.universal-modal__header_1bzqd .universal-modal__headerTitle_1bzqd {
         font-size: 22px;
         line-height: 26px;
         font-weight: 700;
-        font-family: var(--font-family-system);
+        letter-spacing: 0.2px;
+        font-family: var(--font-family-alfasans);
         padding: 11px var(--gap-12);
     }
-.universal-modal__header_39007 .universal-modal__bottomAddons_39007 {
+.universal-modal__header_1bzqd .universal-modal__bottomAddons_1bzqd {
         font-size: 22px;
         line-height: 26px;
         font-weight: 700;
-        font-family: var(--font-family-system);
+        letter-spacing: 0.2px;
+        font-family: var(--font-family-alfasans);
         padding: var(--gap-6) var(--gap-12) var(--gap-16);
     }
-.universal-modal__header_39007.universal-modal__medium_39007 .universal-modal__headerTitle_39007 {
+.universal-modal__header_1bzqd.universal-modal__medium_1bzqd .universal-modal__headerTitle_1bzqd {
             font-size: 30px;
             line-height: 36px;
             font-weight: 700;
-            font-family: var(--font-family-system);
+            letter-spacing: 0.1px;
+            font-family: var(--font-family-alfasans);
             padding: var(--gap-6) var(--gap-12) var(--gap-16);
         }
-.universal-modal__header_39007.universal-modal__medium_39007 .universal-modal__bottomAddons_39007 {
+.universal-modal__header_1bzqd.universal-modal__medium_1bzqd .universal-modal__bottomAddons_1bzqd {
             font-size: 30px;
             line-height: 36px;
             font-weight: 700;
-            font-family: var(--font-family-system);
+            letter-spacing: 0.1px;
+            font-family: var(--font-family-alfasans);
         }

package/modern/components/header/desktop/desktop.module.css.js

@@ -1,6 +1,6 @@
 import './desktop.css';
 
-const desktopStyles = {"header":"universal-modal__header_39007","headerTitle":"universal-modal__headerTitle_39007","bottomAddons":"universal-modal__bottomAddons_39007","medium":"universal-modal__medium_39007"};
+const desktopStyles = {"header":"universal-modal__header_1bzqd","headerTitle":"universal-modal__headerTitle_1bzqd","bottomAddons":"universal-modal__bottomAddons_1bzqd","medium":"universal-modal__medium_1bzqd"};
 
 export { desktopStyles as default };
 //# sourceMappingURL=desktop.module.css.js.map

package/modern/components/header/mobile/Component.mobile.js

@@ -1,27 +1,20 @@
-import React, { useContext, useRef, useEffect } from 'react';
+import React from 'react';
 import cn from 'classnames';
 import { NavigationBarPrivate } from '@alfalab/core-components-navigation-bar-private/modern';
 import { getDataTestId } from '@alfalab/core-components-shared/modern';
-import { ModalContext } from '../../../Context.js';
+import { useBaseHeader } from '../base-header/useBaseHeader.js';
 import styles from '../base-header/index.module.css.js';
 import mobileStyles from './mobile.module.css.js';
 
-const HeaderMobile = ({ className, children, contentClassName, title, sticky, dataTestId, bottomAddonsClassName, onClose, ...restProps }) => {
-    const { setHasHeader, headerHighlighted, componentRef, onClose: handleCloseByContext, } = useContext(ModalContext);
-    const titleRef = useRef(null);
-    const hasContent = Boolean(title || children || restProps.bottomAddons);
-    const handleClose = (...args) => {
-        if (onClose) {
-            return onClose(...args);
-        }
-        return handleCloseByContext(...args);
-    };
-    useEffect(() => {
-        setHasHeader(true);
-        return () => {
-            setHasHeader(false);
-        };
-    }, [setHasHeader]);
+const HeaderMobile = (props) => {
+    const { className, children, contentClassName, title, sticky, dataTestId, bottomAddonsClassName, onClose, ...restProps } = props;
+    const { bottomAddons } = restProps;
+    const { headerHighlighted, hasContent, componentRef, titleRef, handleClose } = useBaseHeader({
+        title,
+        children,
+        bottomAddons,
+        onClose,
+    });
     return (React.createElement(NavigationBarPrivate, { ...restProps, view: 'mobile', dataTestId: getDataTestId(dataTestId, 'header'), sticky: sticky, title: title, className: cn(styles.header, mobileStyles.header, className, {
             [styles.highlighted]: sticky && headerHighlighted && hasContent,
             [styles.sticky]: sticky,

package/modern/components/header/mobile/Component.mobile.js.map

@@ -1 +1 @@
-{"version":3,"file":"Component.mobile.js","sources":["../../../../src/components/header/mobile/Component.mobile.tsx"],"sourcesContent":["import React, { type FC, useContext, useEffect, useRef } from 'react';\nimport cn from 'classnames';\n\nimport {\n    NavigationBarPrivate,\n    type NavigationBarPrivateProps,\n} from '@alfalab/core-components-navigation-bar-private';\nimport { getDataTestId } from '@alfalab/core-components-shared';\n\nimport { ModalContext } from '../../../Context';\n\nimport styles from '../base-header/index.module.css';\nimport mobileStyles from './mobile.module.css';\n\nexport type HeaderMobileProps = Omit<NavigationBarPrivateProps, 'size' | 'view' | 'parentRef'>;\n\nexport const HeaderMobile: FC<HeaderMobileProps> = ({\n    className,\n    children,\n    contentClassName,\n    title,\n    sticky,\n    dataTestId,\n    bottomAddonsClassName,\n    onClose,\n    ...restProps\n}) => {\n    const {\n        setHasHeader,\n        headerHighlighted,\n        componentRef,\n        onClose: handleCloseByContext,\n    } = useContext(ModalContext);\n\n    const titleRef = useRef<HTMLDivElement>(null);\n\n    const hasContent = Boolean(title || children || restProps.bottomAddons);\n\n    const handleClose: NavigationBarPrivateProps['onClose'] = (...args) => {\n        if (onClose) {\n            return onClose(...args);\n        }\n\n        return handleCloseByContext(...args);\n    };\n\n    useEffect(() => {\n        setHasHeader(true);\n\n        return () => {\n            setHasHeader(false);\n        };\n    }, [setHasHeader]);\n\n    return (\n        <NavigationBarPrivate\n            {...restProps}\n            view='mobile'\n            dataTestId={getDataTestId(dataTestId, 'header')}\n            sticky={sticky}\n            title={title}\n            className={cn(styles.header, mobileStyles.header, className, {\n                [styles.highlighted]: sticky && headerHighlighted && hasContent,\n                [styles.sticky]: sticky,\n                [styles.hasContent]: hasContent,\n            })}\n            contentClassName={cn(mobileStyles.content, contentClassName)}\n            bottomAddonsClassName={cn(mobileStyles.bottomAddons, bottomAddonsClassName)}\n            scrollableParentRef={componentRef}\n            titleRef={titleRef}\n            onClose={handleClose}\n        >\n            {children}\n        </NavigationBarPrivate>\n    );\n};\n"],"names":[],"mappings":";;;;;;;;AAgBa,MAAA,YAAY,GAA0B,CAAC,EAChD,SAAS,EACT,QAAQ,EACR,gBAAgB,EAChB,KAAK,EACL,MAAM,EACN,UAAU,EACV,qBAAqB,EACrB,OAAO,EACP,GAAG,SAAS,EACf,KAAI;AACD,IAAA,MAAM,EACF,YAAY,EACZ,iBAAiB,EACjB,YAAY,EACZ,OAAO,EAAE,oBAAoB,GAChC,GAAG,UAAU,CAAC,YAAY,CAAC;AAE5B,IAAA,MAAM,QAAQ,GAAG,MAAM,CAAiB,IAAI,CAAC;AAE7C,IAAA,MAAM,UAAU,GAAG,OAAO,CAAC,KAAK,IAAI,QAAQ,IAAI,SAAS,CAAC,YAAY,CAAC;AAEvE,IAAA,MAAM,WAAW,GAAyC,CAAC,GAAG,IAAI,KAAI;AAClE,QAAA,IAAI,OAAO,EAAE;AACT,YAAA,OAAO,OAAO,CAAC,GAAG,IAAI,CAAC;AAC1B;AAED,QAAA,OAAO,oBAAoB,CAAC,GAAG,IAAI,CAAC;AACxC,KAAC;IAED,SAAS,CAAC,MAAK;QACX,YAAY,CAAC,IAAI,CAAC;AAElB,QAAA,OAAO,MAAK;YACR,YAAY,CAAC,KAAK,CAAC;AACvB,SAAC;AACL,KAAC,EAAE,CAAC,YAAY,CAAC,CAAC;AAElB,IAAA,QACI,KAAC,CAAA,aAAA,CAAA,oBAAoB,OACb,SAAS,EACb,IAAI,EAAC,QAAQ,EACb,UAAU,EAAE,aAAa,CAAC,UAAU,EAAE,QAAQ,CAAC,EAC/C,MAAM,EAAE,MAAM,EACd,KAAK,EAAE,KAAK,EACZ,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,MAAM,EAAE,YAAY,CAAC,MAAM,EAAE,SAAS,EAAE;YACzD,CAAC,MAAM,CAAC,WAAW,GAAG,MAAM,IAAI,iBAAiB,IAAI,UAAU;AAC/D,YAAA,CAAC,MAAM,CAAC,MAAM,GAAG,MAAM;AACvB,YAAA,CAAC,MAAM,CAAC,UAAU,GAAG,UAAU;AAClC,SAAA,CAAC,EACF,gBAAgB,EAAE,EAAE,CAAC,YAAY,CAAC,OAAO,EAAE,gBAAgB,CAAC,EAC5D,qBAAqB,EAAE,EAAE,CAAC,YAAY,CAAC,YAAY,EAAE,qBAAqB,CAAC,EAC3E,mBAAmB,EAAE,YAAY,EACjC,QAAQ,EAAE,QAAQ,EAClB,OAAO,EAAE,WAAW,IAEnB,QAAQ,CACU;AAE/B;;;;"}
+{"version":3,"file":"Component.mobile.js","sources":["../../../../src/components/header/mobile/Component.mobile.tsx"],"sourcesContent":["import React, { type FC } from 'react';\nimport cn from 'classnames';\n\nimport {\n    NavigationBarPrivate,\n    type NavigationBarPrivateProps,\n} from '@alfalab/core-components-navigation-bar-private';\nimport { getDataTestId } from '@alfalab/core-components-shared';\n\nimport { useBaseHeader } from '../base-header/useBaseHeader';\n\nimport styles from '../base-header/index.module.css';\nimport mobileStyles from './mobile.module.css';\n\nexport type HeaderMobileProps = Omit<NavigationBarPrivateProps, 'size' | 'view' | 'parentRef'>;\n\nexport const HeaderMobile: FC<HeaderMobileProps> = (props) => {\n    const {\n        className,\n        children,\n        contentClassName,\n        title,\n        sticky,\n        dataTestId,\n        bottomAddonsClassName,\n        onClose,\n        ...restProps\n    } = props;\n\n    const { bottomAddons } = restProps;\n\n    const { headerHighlighted, hasContent, componentRef, titleRef, handleClose } = useBaseHeader({\n        title,\n        children,\n        bottomAddons,\n        onClose,\n    });\n\n    return (\n        <NavigationBarPrivate\n            {...restProps}\n            view='mobile'\n            dataTestId={getDataTestId(dataTestId, 'header')}\n            sticky={sticky}\n            title={title}\n            className={cn(styles.header, mobileStyles.header, className, {\n                [styles.highlighted]: sticky && headerHighlighted && hasContent,\n                [styles.sticky]: sticky,\n                [styles.hasContent]: hasContent,\n            })}\n            contentClassName={cn(mobileStyles.content, contentClassName)}\n            bottomAddonsClassName={cn(mobileStyles.bottomAddons, bottomAddonsClassName)}\n            scrollableParentRef={componentRef}\n            titleRef={titleRef}\n            onClose={handleClose}\n        >\n            {children}\n        </NavigationBarPrivate>\n    );\n};\n"],"names":[],"mappings":";;;;;;;;AAgBa,MAAA,YAAY,GAA0B,CAAC,KAAK,KAAI;IACzD,MAAM,EACF,SAAS,EACT,QAAQ,EACR,gBAAgB,EAChB,KAAK,EACL,MAAM,EACN,UAAU,EACV,qBAAqB,EACrB,OAAO,EACP,GAAG,SAAS,EACf,GAAG,KAAK;AAET,IAAA,MAAM,EAAE,YAAY,EAAE,GAAG,SAAS;AAElC,IAAA,MAAM,EAAE,iBAAiB,EAAE,UAAU,EAAE,YAAY,EAAE,QAAQ,EAAE,WAAW,EAAE,GAAG,aAAa,CAAC;QACzF,KAAK;QACL,QAAQ;QACR,YAAY;QACZ,OAAO;AACV,KAAA,CAAC;AAEF,IAAA,QACI,KAAC,CAAA,aAAA,CAAA,oBAAoB,OACb,SAAS,EACb,IAAI,EAAC,QAAQ,EACb,UAAU,EAAE,aAAa,CAAC,UAAU,EAAE,QAAQ,CAAC,EAC/C,MAAM,EAAE,MAAM,EACd,KAAK,EAAE,KAAK,EACZ,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,MAAM,EAAE,YAAY,CAAC,MAAM,EAAE,SAAS,EAAE;YACzD,CAAC,MAAM,CAAC,WAAW,GAAG,MAAM,IAAI,iBAAiB,IAAI,UAAU;AAC/D,YAAA,CAAC,MAAM,CAAC,MAAM,GAAG,MAAM;AACvB,YAAA,CAAC,MAAM,CAAC,UAAU,GAAG,UAAU;AAClC,SAAA,CAAC,EACF,gBAAgB,EAAE,EAAE,CAAC,YAAY,CAAC,OAAO,EAAE,gBAAgB,CAAC,EAC5D,qBAAqB,EAAE,EAAE,CAAC,YAAY,CAAC,YAAY,EAAE,qBAAqB,CAAC,EAC3E,mBAAmB,EAAE,YAAY,EACjC,QAAQ,EAAE,QAAQ,EAClB,OAAO,EAAE,WAAW,IAEnB,QAAQ,CACU;AAE/B;;;;"}