@alfalab/core-components-universal-modal 3.2.1-alfasans → 3.2.2

package/modern/desktop/utils/get-margin-styles.d.ts

@@ -2,7 +2,6 @@ import { type UniversalModalDesktopProps } from '../types/props';
 interface Params {
     styles: Record<string, string>;
     margin: UniversalModalDesktopProps['margin'];
-    height: NonNullable<UniversalModalDesktopProps['height']>;
 }
 export declare const getMarginStyles: (params: Params) => Record<string, boolean>;
 export {};

package/modern/desktop/utils/get-margin-styles.js

@@ -1,20 +1,18 @@
 import { hasOwnProperty } from '@alfalab/core-components-shared/modern';
 
 const getMarginStyles = (params) => {
-    const { margin, styles, height } = params;
-    if (margin) {
-        const isHugContent = height === 'hugContent';
-        return {
-            [styles[`marginTop-${margin.top}`]]: hasOwnProperty(margin, 'top'),
-            [styles[`marginRight-${margin.right}`]]: hasOwnProperty(margin, 'right'),
-            [styles[`marginBottom-${margin.bottom}`]]: hasOwnProperty(margin, 'bottom'),
-            [styles[`marginLeft-${margin.left}`]]: hasOwnProperty(margin, 'left'),
-            [styles.hugContent]: isHugContent,
-            [styles[`topGap-${margin.top}`]]: isHugContent && hasOwnProperty(margin, 'top'),
-            [styles[`bottomGap-${margin.bottom}`]]: isHugContent && hasOwnProperty(margin, 'bottom'),
-        };
+    const { margin, styles } = params;
+    if (!margin) {
+        return {};
     }
-    return {};
+    return {
+        ...(hasOwnProperty(margin, 'top') && { [styles[`marginTop-${margin.top}`]]: true }),
+        ...(hasOwnProperty(margin, 'right') && { [styles[`marginRight-${margin.right}`]]: true }),
+        ...(hasOwnProperty(margin, 'bottom') && {
+            [styles[`marginBottom-${margin.bottom}`]]: true,
+        }),
+        ...(hasOwnProperty(margin, 'left') && { [styles[`marginLeft-${margin.left}`]]: true }),
+    };
 };
 
 export { getMarginStyles };

package/modern/desktop/utils/get-margin-styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"get-margin-styles.js","sources":["../../../src/desktop/utils/get-margin-styles.ts"],"sourcesContent":["import { hasOwnProperty } from '@alfalab/core-components-shared';\n\nimport { type UniversalModalDesktopProps } from '../types/props';\n\ninterface Params {\n    styles: Record<string, string>;\n    margin: UniversalModalDesktopProps['margin'];\n    height: NonNullable<UniversalModalDesktopProps['height']>;\n}\n\nexport const getMarginStyles = (params: Params): Record<string, boolean> => {\n    const { margin, styles, height } = params;\n\n    if (margin) {\n        const isHugContent = height === 'hugContent';\n\n        return {\n            [styles[`marginTop-${margin.top}`]]: hasOwnProperty(margin, 'top'),\n            [styles[`marginRight-${margin.right}`]]: hasOwnProperty(margin, 'right'),\n            [styles[`marginBottom-${margin.bottom}`]]: hasOwnProperty(margin, 'bottom'),\n            [styles[`marginLeft-${margin.left}`]]: hasOwnProperty(margin, 'left'),\n            [styles.hugContent]: isHugContent,\n            [styles[`topGap-${margin.top}`]]: isHugContent && hasOwnProperty(margin, 'top'),\n            [styles[`bottomGap-${margin.bottom}`]]:\n                isHugContent && hasOwnProperty(margin, 'bottom'),\n        };\n    }\n\n    return {};\n};\n"],"names":[],"mappings":";;AAUa,MAAA,eAAe,GAAG,CAAC,MAAc,KAA6B;IACvE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,GAAG,MAAM;IAEzC,IAAI,MAAM,EAAE;AACR,QAAA,MAAM,YAAY,GAAG,MAAM,KAAK,YAAY;QAE5C,OAAO;AACH,YAAA,CAAC,MAAM,CAAC,CAAa,UAAA,EAAA,MAAM,CAAC,GAAG,CAAA,CAAE,CAAC,GAAG,cAAc,CAAC,MAAM,EAAE,KAAK,CAAC;AAClE,YAAA,CAAC,MAAM,CAAC,CAAe,YAAA,EAAA,MAAM,CAAC,KAAK,CAAA,CAAE,CAAC,GAAG,cAAc,CAAC,MAAM,EAAE,OAAO,CAAC;AACxE,YAAA,CAAC,MAAM,CAAC,CAAgB,aAAA,EAAA,MAAM,CAAC,MAAM,CAAA,CAAE,CAAC,GAAG,cAAc,CAAC,MAAM,EAAE,QAAQ,CAAC;AAC3E,YAAA,CAAC,MAAM,CAAC,CAAc,WAAA,EAAA,MAAM,CAAC,IAAI,CAAA,CAAE,CAAC,GAAG,cAAc,CAAC,MAAM,EAAE,MAAM,CAAC;AACrE,YAAA,CAAC,MAAM,CAAC,UAAU,GAAG,YAAY;AACjC,YAAA,CAAC,MAAM,CAAC,CAAA,OAAA,EAAU,MAAM,CAAC,GAAG,CAAE,CAAA,CAAC,GAAG,YAAY,IAAI,cAAc,CAAC,MAAM,EAAE,KAAK,CAAC;AAC/E,YAAA,CAAC,MAAM,CAAC,CAAA,UAAA,EAAa,MAAM,CAAC,MAAM,CAAE,CAAA,CAAC,GACjC,YAAY,IAAI,cAAc,CAAC,MAAM,EAAE,QAAQ,CAAC;SACvD;;AAGL,IAAA,OAAO,EAAE;AACb;;;;"}
+{"version":3,"file":"get-margin-styles.js","sources":["../../../src/desktop/utils/get-margin-styles.ts"],"sourcesContent":["import { hasOwnProperty } from '@alfalab/core-components-shared';\n\nimport { type UniversalModalDesktopProps } from '../types/props';\n\ninterface Params {\n    styles: Record<string, string>;\n    margin: UniversalModalDesktopProps['margin'];\n}\n\nexport const getMarginStyles = (params: Params): Record<string, boolean> => {\n    const { margin, styles } = params;\n\n    if (!margin) {\n        return {};\n    }\n\n    return {\n        ...(hasOwnProperty(margin, 'top') && { [styles[`marginTop-${margin.top}`]]: true }),\n        ...(hasOwnProperty(margin, 'right') && { [styles[`marginRight-${margin.right}`]]: true }),\n        ...(hasOwnProperty(margin, 'bottom') && {\n            [styles[`marginBottom-${margin.bottom}`]]: true,\n        }),\n        ...(hasOwnProperty(margin, 'left') && { [styles[`marginLeft-${margin.left}`]]: true }),\n    };\n};\n"],"names":[],"mappings":";;AASa,MAAA,eAAe,GAAG,CAAC,MAAc,KAA6B;AACvE,IAAA,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,GAAG,MAAM;IAEjC,IAAI,CAAC,MAAM,EAAE;AACT,QAAA,OAAO,EAAE;;IAGb,OAAO;QACH,IAAI,cAAc,CAAC,MAAM,EAAE,KAAK,CAAC,IAAI,EAAE,CAAC,MAAM,CAAC,CAAa,UAAA,EAAA,MAAM,CAAC,GAAG,CAAA,CAAE,CAAC,GAAG,IAAI,EAAE,CAAC;QACnF,IAAI,cAAc,CAAC,MAAM,EAAE,OAAO,CAAC,IAAI,EAAE,CAAC,MAAM,CAAC,CAAe,YAAA,EAAA,MAAM,CAAC,KAAK,CAAA,CAAE,CAAC,GAAG,IAAI,EAAE,CAAC;AACzF,QAAA,IAAI,cAAc,CAAC,MAAM,EAAE,QAAQ,CAAC,IAAI;YACpC,CAAC,MAAM,CAAC,CAAA,aAAA,EAAgB,MAAM,CAAC,MAAM,CAAE,CAAA,CAAC,GAAG,IAAI;SAClD,CAAC;QACF,IAAI,cAAc,CAAC,MAAM,EAAE,MAAM,CAAC,IAAI,EAAE,CAAC,MAAM,CAAC,CAAc,WAAA,EAAA,MAAM,CAAC,IAAI,CAAA,CAAE,CAAC,GAAG,IAAI,EAAE,CAAC;KACzF;AACL;;;;"}

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

@@ -1,14 +1,13 @@
 :root {
-    --gap-l: 20px;
     --gap-0: 0px;
-    --gap-20: var(--gap-l);
+    --gap-20: 20px;
 }
-.universal-modal__content_d9bui {
+.universal-modal__content_92r7v {
     padding: var(--gap-20);
 }
-.universal-modal__content_d9bui.universal-modal__withHeader_d9bui {
+.universal-modal__content_92r7v.universal-modal__withHeader_92r7v {
         padding-top: var(--gap-0);
     }
-.universal-modal__content_d9bui.universal-modal__withFooter_d9bui {
+.universal-modal__content_92r7v.universal-modal__withFooter_92r7v {
         padding-bottom: var(--gap-0);
     }

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

@@ -1,6 +1,6 @@
 import './index.css';
 
-const styles = {"content":"universal-modal__content_d9bui","withHeader":"universal-modal__withHeader_d9bui","withFooter":"universal-modal__withFooter_d9bui"};
+const styles = {"content":"universal-modal__content_92r7v","withHeader":"universal-modal__withHeader_92r7v","withFooter":"universal-modal__withFooter_92r7v"};
 
 export { styles as default };
 //# sourceMappingURL=index.module.css.js.map

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

@@ -1,11 +1,10 @@
 :root {
-    --gap-l: 20px;
     --gap-0: 0px;
-    --gap-20: var(--gap-l);
+    --gap-20: 20px;
 }
-.universal-modal__footer_1jc3v {
+.universal-modal__footer_sk6o6 {
     padding: var(--gap-20);
 }
-.universal-modal__sticky_1jc3v {
+.universal-modal__sticky_sk6o6 {
     bottom: var(--gap-0);
 }

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

@@ -1,6 +1,6 @@
 import './index.css';
 
-const styles = {"footer":"universal-modal__footer_1jc3v","sticky":"universal-modal__sticky_1jc3v"};
+const styles = {"footer":"universal-modal__footer_sk6o6","sticky":"universal-modal__sticky_sk6o6"};
 
 export { styles as default };
 //# sourceMappingURL=index.module.css.js.map

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

@@ -1,26 +1,25 @@
 :root {
-    --gap-xs: 8px;
-    --gap-8: var(--gap-xs);
+    --gap-8: 8px;
 }
-.universal-modal__column_1dihm {
+.universal-modal__column_18lpj {
     flex-direction: column;
 }
-.universal-modal__start_1dihm {
+.universal-modal__start_18lpj {
     justify-content: flex-start;
 }
-.universal-modal__center_1dihm {
+.universal-modal__center_18lpj {
     justify-content: center;
 }
-.universal-modal__space-between_1dihm {
+.universal-modal__space-between_18lpj {
     justify-content: space-between;
 }
-.universal-modal__space-between_1dihm > * {
+.universal-modal__space-between_18lpj > * {
         flex: 1;
     }
-.universal-modal__start_1dihm,
-.universal-modal__center_1dihm,
-.universal-modal__space-between_1dihm,
-.universal-modal__column_1dihm {
+.universal-modal__start_18lpj,
+.universal-modal__center_18lpj,
+.universal-modal__space-between_18lpj,
+.universal-modal__column_18lpj {
     display: flex;
     gap: var(--gap-8);
 }

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

@@ -1,6 +1,6 @@
 import './layout.mobile.css';
 
-const layoutStylesMobile = {"column":"universal-modal__column_1dihm","start":"universal-modal__start_1dihm","center":"universal-modal__center_1dihm","space-between":"universal-modal__space-between_1dihm"};
+const layoutStylesMobile = {"column":"universal-modal__column_18lpj","start":"universal-modal__start_18lpj","center":"universal-modal__center_18lpj","space-between":"universal-modal__space-between_18lpj"};
 
 export { layoutStylesMobile as default };
 //# sourceMappingURL=layout.mobile.module.css.js.map

package/modern/mobile/components/header/index.css

@@ -1,37 +1,30 @@
 :root {
-    --gap-2xs: 4px;
-    --gap-xs: 8px;
-    --gap-s: 12px;
-    --gap-m: 16px;
-    --gap-4: var(--gap-2xs);
+    --gap-4: 4px;
     --gap-6: 6px;
-    --gap-8: var(--gap-xs);
-    --gap-12: var(--gap-s);
-    --gap-16: var(--gap-m);
+    --gap-8: 8px;
+    --gap-12: 12px;
+    --gap-16: 16px;
 }
 :root {
-    --font-family-alfasans:
-        'Alfa Interface Sans', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue',
-        Helvetica, sans-serif;
+    --font-family-system:
+        system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Helvetica, sans-serif;
 }
-.universal-modal__header_161ze {
+.universal-modal__header_ruz9p {
     padding: var(--gap-8) var(--gap-4);
 }
-.universal-modal__content_161ze {
+.universal-modal__content_ruz9p {
     font-size: 20px;
     line-height: 28px;
-    font-weight: 500;
-    letter-spacing: -0.15px;
-    font-family: var(--font-family-alfasans);
+    font-weight: 600;
+    font-family: var(--font-family-system);
     padding: 0 var(--gap-12);
     min-height: 40px;
     justify-content: center;
 }
-.universal-modal__bottomAddons_161ze {
+.universal-modal__bottomAddons_ruz9p {
     font-size: 20px;
     line-height: 28px;
-    font-weight: 500;
-    letter-spacing: -0.15px;
-    font-family: var(--font-family-alfasans);
+    font-weight: 600;
+    font-family: var(--font-family-system);
     padding: var(--gap-6) var(--gap-16);
 }

package/modern/mobile/components/header/index.module.css.js

@@ -1,6 +1,6 @@
 import './index.css';
 
-const mobileStyles = {"header":"universal-modal__header_161ze","content":"universal-modal__content_161ze","bottomAddons":"universal-modal__bottomAddons_161ze"};
+const mobileStyles = {"header":"universal-modal__header_ruz9p","content":"universal-modal__content_ruz9p","bottomAddons":"universal-modal__bottomAddons_ruz9p"};
 
 export { mobileStyles as default };
 //# sourceMappingURL=index.module.css.js.map

package/modern/mobile/mobile.css

@@ -1,7 +1,7 @@
 :root {
     --gap-0: 0px;
 }
-.universal-modal__component_bg7j4 {
+.universal-modal__component_kzifs {
     top: var(--gap-0);
     height: 100%;
     width: 100%;
@@ -11,10 +11,10 @@
     display: flex;
     flex-direction: column;
 }
-.universal-modal__component_bg7j4 .universal-modal__content_bg7j4 {
+.universal-modal__component_kzifs .universal-modal__content_kzifs {
         height: auto;
     }
-.universal-modal__component_bg7j4.universal-modal__component_bg7j4 {
+.universal-modal__component_kzifs.universal-modal__component_kzifs {
     position: fixed;
     flex: 1;
 }

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

@@ -1,6 +1,6 @@
 import './mobile.css';
 
-const styles = {"component":"universal-modal__component_bg7j4","content":"universal-modal__content_bg7j4"};
+const styles = {"component":"universal-modal__component_kzifs","content":"universal-modal__content_kzifs"};
 
 export { styles as default };
 //# sourceMappingURL=mobile.module.css.js.map

package/modern/mobile/transitions/right-side-transitions.mobile.css

@@ -1,18 +1,18 @@
-.universal-modal__appear_1sgu6,
-.universal-modal__enter_1sgu6 {
+.universal-modal__appear_1yodc,
+.universal-modal__enter_1yodc {
     transform: translateX(100%);
 }
-.universal-modal__appearActive_1sgu6,
-.universal-modal__enterActive_1sgu6 {
+.universal-modal__appearActive_1yodc,
+.universal-modal__enterActive_1yodc {
     transform: translateX(0);
     transition: transform 280ms ease-in-out;
     transition-delay: 80ms;
 }
-.universal-modal__exit_1sgu6 {
+.universal-modal__exit_1yodc {
     transform: translateX(0);
 }
-.universal-modal__exitActive_1sgu6,
-.universal-modal__exitDone_1sgu6 {
+.universal-modal__exitActive_1yodc,
+.universal-modal__exitDone_1yodc {
     transform: translateX(100%);
     transition: transform 280ms ease-in-out;
 }

package/modern/mobile/transitions/right-side-transitions.mobile.module.css.js

@@ -1,6 +1,6 @@
 import './right-side-transitions.mobile.css';
 
-const rightSideTransitions = {"appear":"universal-modal__appear_1sgu6","enter":"universal-modal__enter_1sgu6","appearActive":"universal-modal__appearActive_1sgu6","enterActive":"universal-modal__enterActive_1sgu6","exit":"universal-modal__exit_1sgu6","exitActive":"universal-modal__exitActive_1sgu6","exitDone":"universal-modal__exitDone_1sgu6"};
+const rightSideTransitions = {"appear":"universal-modal__appear_1yodc","enter":"universal-modal__enter_1yodc","appearActive":"universal-modal__appearActive_1yodc","enterActive":"universal-modal__enterActive_1yodc","exit":"universal-modal__exit_1yodc","exitActive":"universal-modal__exitActive_1yodc","exitDone":"universal-modal__exitDone_1yodc"};
 
 export { rightSideTransitions as default };
 //# sourceMappingURL=right-side-transitions.mobile.module.css.js.map

package/modern/mobile/transitions/transitions.mobile.css

@@ -1,11 +1,11 @@
-.universal-modal__appear_h15rs,
-.universal-modal__enter_h15rs {
+.universal-modal__appear_ava34,
+.universal-modal__enter_ava34 {
     opacity: 0;
     transform: translateY(15px);
 }
 
-.universal-modal__appearActive_h15rs,
-.universal-modal__enterActive_h15rs {
+.universal-modal__appearActive_ava34,
+.universal-modal__enterActive_ava34 {
     opacity: 1;
     transform: translateY(0);
     transition:
@@ -13,13 +13,13 @@
         transform 200ms ease-in;
 }
 
-.universal-modal__exit_h15rs {
+.universal-modal__exit_ava34 {
     opacity: 1;
     transform: translateY(0);
 }
 
-.universal-modal__exitActive_h15rs,
-.universal-modal__exitDone_h15rs {
+.universal-modal__exitActive_ava34,
+.universal-modal__exitDone_ava34 {
     opacity: 0;
     transform: translateY(15px);
     transition:

package/modern/mobile/transitions/transitions.mobile.module.css.js

@@ -1,6 +1,6 @@
 import './transitions.mobile.css';
 
-const transitions = {"appear":"universal-modal__appear_h15rs","enter":"universal-modal__enter_h15rs","appearActive":"universal-modal__appearActive_h15rs","enterActive":"universal-modal__enterActive_h15rs","exit":"universal-modal__exit_h15rs","exitActive":"universal-modal__exitActive_h15rs","exitDone":"universal-modal__exitDone_h15rs"};
+const transitions = {"appear":"universal-modal__appear_ava34","enter":"universal-modal__enter_ava34","appearActive":"universal-modal__appearActive_ava34","enterActive":"universal-modal__enterActive_ava34","exit":"universal-modal__exit_ava34","exitActive":"universal-modal__exitActive_ava34","exitDone":"universal-modal__exitDone_ava34"};
 
 export { transitions as default };
 //# sourceMappingURL=transitions.mobile.module.css.js.map

package/moderncssm/desktop/components/center-modal/center-modal.js

@@ -5,6 +5,7 @@ import { isMacOS, isSafari } from '@alfalab/core-components-shared/moderncssm';
 import { useScrollableContainerRef } from '../../hooks/use-scrollable-container-ref.js';
 import { getFullSizeModalTransitions } from '../../utils/get-full-size-modal-transitions.js';
 import { getHeightStyle } from '../../utils/get-height-style.js';
+import { getHugContentStyles } from '../../utils/get-hug-content-styles.js';
 import { getMarginStyles } from '../../utils/get-margin-styles.js';
 import { getWidthStyle } from '../../utils/get-width-style.js';
 import { ModalContent } from '../modal-content/modal-content.js';
@@ -29,7 +30,8 @@ const CenterModal = forwardRef((props, ref) => {
             [styles.wrapperJustifyEnd]: verticalAlign === 'bottom',
             [styles.withoutOverlay]: withoutOverlay,
         }), className: cn(styles.component, className, styles.baseModalComponent, {
-            ...getMarginStyles({ styles, margin, height }),
+            ...getMarginStyles({ styles, margin }),
+            ...getHugContentStyles({ styles, margin, height }),
         }), transitionProps: {
             classNames: transitionProps,
             ...(isFullSizeModal && fullSizeModalContentTransitions),

package/moderncssm/desktop/components/center-modal/center-modal.js.map

@@ -1 +1 @@
-{"version":3,"file":"center-modal.js","sources":["../../../../src/desktop/components/center-modal/center-modal.tsx"],"sourcesContent":["import React, { forwardRef, useRef } from 'react';\nimport cn from 'classnames';\n\nimport { BaseModal } from '@alfalab/core-components-base-modal';\nimport { isMacOS, isSafari } from '@alfalab/core-components-shared';\n\nimport { useScrollableContainerRef } from '../../hooks/use-scrollable-container-ref';\nimport { type UniversalModalDesktopProps } from '../../types/props';\nimport { getFullSizeModalTransitions } from '../../utils/get-full-size-modal-transitions';\nimport { getHeightStyle } from '../../utils/get-height-style';\nimport { getMarginStyles } from '../../utils/get-margin-styles';\nimport { getWidthStyle } from '../../utils/get-width-style';\nimport { ModalContent } from '../modal-content/modal-content';\n\nimport styles from './index.module.css';\nimport safariTransitions from './transitions/safari-transitions.module.css';\nimport transitions from './transitions/transitions.module.css';\n\n// в safari некорректно отрабатывает transform:scale (???), поэтому применяем немного другую анимацию\nconst transitionProps = isMacOS() && isSafari() ? safariTransitions : transitions;\n\nexport const CenterModal = forwardRef<HTMLDivElement, UniversalModalDesktopProps>((props, ref) => {\n    const {\n        dataTestId,\n        className,\n        open,\n        children,\n        width = 500,\n        height = 'hugContent',\n        verticalAlign = 'center',\n        overlay = true,\n        margin,\n        scrollableContainerRef: scrollableContainerRefProp,\n        onClose,\n        ...restProps\n    } = props;\n\n    const componentRef = useRef<HTMLDivElement>(null);\n    const { handleWheel, scrollableContainerRef } = useScrollableContainerRef({\n        overlay,\n        refObject: scrollableContainerRefProp,\n    });\n\n    const {\n        isFullSizeModal,\n        componentTransitions: fullSizeModalContentTransitions,\n        backdropTransitions: fullSizeModalBackdropTransitions,\n    } = getFullSizeModalTransitions({ verticalAlign, width, height });\n\n    const withoutOverlay = !overlay;\n\n    return (\n        <BaseModal\n            {...restProps}\n            open={open}\n            dataTestId={dataTestId}\n            ref={ref}\n            componentRef={componentRef}\n            scrollHandler='content'\n            scrollLock={overlay}\n            wrapperClassName={cn(styles.baseModalContainer, {\n                [styles.wrapperJustifyStart]: verticalAlign === 'top',\n                [styles.wrapperJustifyCenter]: verticalAlign === 'center',\n                [styles.wrapperJustifyEnd]: verticalAlign === 'bottom',\n                [styles.withoutOverlay]: withoutOverlay,\n            })}\n            className={cn(styles.component, className, styles.baseModalComponent, {\n                ...getMarginStyles({ styles, margin, height }),\n            })}\n            transitionProps={{\n                classNames: transitionProps,\n                ...(isFullSizeModal && fullSizeModalContentTransitions),\n                ...restProps.transitionProps,\n            }}\n            backdropProps={{\n                shouldRender: overlay,\n                ...(isFullSizeModal && fullSizeModalBackdropTransitions),\n                ...restProps.backdropProps,\n            }}\n            componentDivProps={{\n                style: {\n                    width: getWidthStyle(width, margin),\n                    ...getHeightStyle(height, margin),\n                },\n            }}\n            onWheel={handleWheel}\n            onClose={onClose}\n        >\n            <ModalContent height={height} scrollableContainerRef={scrollableContainerRef}>\n                {children}\n            </ModalContent>\n        </BaseModal>\n    );\n});\n"],"names":[],"mappings":";;;;;;;;;;;;;;AAkBA;AACA,MAAM,eAAe,GAAG,OAAO,EAAE,IAAI,QAAQ,EAAE,GAAG,iBAAiB,GAAG,WAAW;AAEpE,MAAA,WAAW,GAAG,UAAU,CAA6C,CAAC,KAAK,EAAE,GAAG,KAAI;AAC7F,IAAA,MAAM,EACF,UAAU,EACV,SAAS,EACT,IAAI,EACJ,QAAQ,EACR,KAAK,GAAG,GAAG,EACX,MAAM,GAAG,YAAY,EACrB,aAAa,GAAG,QAAQ,EACxB,OAAO,GAAG,IAAI,EACd,MAAM,EACN,sBAAsB,EAAE,0BAA0B,EAClD,OAAO,EACP,GAAG,SAAS,EACf,GAAG,KAAK;AAET,IAAA,MAAM,YAAY,GAAG,MAAM,CAAiB,IAAI,CAAC;AACjD,IAAA,MAAM,EAAE,WAAW,EAAE,sBAAsB,EAAE,GAAG,yBAAyB,CAAC;QACtE,OAAO;AACP,QAAA,SAAS,EAAE,0BAA0B;AACxC,KAAA,CAAC;IAEF,MAAM,EACF,eAAe,EACf,oBAAoB,EAAE,+BAA+B,EACrD,mBAAmB,EAAE,gCAAgC,GACxD,GAAG,2BAA2B,CAAC,EAAE,aAAa,EAAE,KAAK,EAAE,MAAM,EAAE,CAAC;AAEjE,IAAA,MAAM,cAAc,GAAG,CAAC,OAAO;AAE/B,IAAA,QACI,KAAC,CAAA,aAAA,CAAA,SAAS,EACF,EAAA,GAAA,SAAS,EACb,IAAI,EAAE,IAAI,EACV,UAAU,EAAE,UAAU,EACtB,GAAG,EAAE,GAAG,EACR,YAAY,EAAE,YAAY,EAC1B,aAAa,EAAC,SAAS,EACvB,UAAU,EAAE,OAAO,EACnB,gBAAgB,EAAE,EAAE,CAAC,MAAM,CAAC,kBAAkB,EAAE;AAC5C,YAAA,CAAC,MAAM,CAAC,mBAAmB,GAAG,aAAa,KAAK,KAAK;AACrD,YAAA,CAAC,MAAM,CAAC,oBAAoB,GAAG,aAAa,KAAK,QAAQ;AACzD,YAAA,CAAC,MAAM,CAAC,iBAAiB,GAAG,aAAa,KAAK,QAAQ;AACtD,YAAA,CAAC,MAAM,CAAC,cAAc,GAAG,cAAc;AAC1C,SAAA,CAAC,EACF,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,SAAS,EAAE,SAAS,EAAE,MAAM,CAAC,kBAAkB,EAAE;YAClE,GAAG,eAAe,CAAC,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,CAAC;SACjD,CAAC,EACF,eAAe,EAAE;AACb,YAAA,UAAU,EAAE,eAAe;AAC3B,YAAA,IAAI,eAAe,IAAI,+BAA+B,CAAC;YACvD,GAAG,SAAS,CAAC,eAAe;AAC/B,SAAA,EACD,aAAa,EAAE;AACX,YAAA,YAAY,EAAE,OAAO;AACrB,YAAA,IAAI,eAAe,IAAI,gCAAgC,CAAC;YACxD,GAAG,SAAS,CAAC,aAAa;AAC7B,SAAA,EACD,iBAAiB,EAAE;AACf,YAAA,KAAK,EAAE;AACH,gBAAA,KAAK,EAAE,aAAa,CAAC,KAAK,EAAE,MAAM,CAAC;AACnC,gBAAA,GAAG,cAAc,CAAC,MAAM,EAAE,MAAM,CAAC;AACpC,aAAA;AACJ,SAAA,EACD,OAAO,EAAE,WAAW,EACpB,OAAO,EAAE,OAAO,EAAA;AAEhB,QAAA,KAAA,CAAA,aAAA,CAAC,YAAY,EAAA,EAAC,MAAM,EAAE,MAAM,EAAE,sBAAsB,EAAE,sBAAsB,EACvE,EAAA,QAAQ,CACE,CACP;AAEpB,CAAC;;;;"}
+{"version":3,"file":"center-modal.js","sources":["../../../../src/desktop/components/center-modal/center-modal.tsx"],"sourcesContent":["import React, { forwardRef, useRef } from 'react';\nimport cn from 'classnames';\n\nimport { BaseModal } from '@alfalab/core-components-base-modal';\nimport { isMacOS, isSafari } from '@alfalab/core-components-shared';\n\nimport { useScrollableContainerRef } from '../../hooks/use-scrollable-container-ref';\nimport { type UniversalModalDesktopProps } from '../../types/props';\nimport { getFullSizeModalTransitions } from '../../utils/get-full-size-modal-transitions';\nimport { getHeightStyle } from '../../utils/get-height-style';\nimport { getHugContentStyles } from '../../utils/get-hug-content-styles';\nimport { getMarginStyles } from '../../utils/get-margin-styles';\nimport { getWidthStyle } from '../../utils/get-width-style';\nimport { ModalContent } from '../modal-content/modal-content';\n\nimport styles from './index.module.css';\nimport safariTransitions from './transitions/safari-transitions.module.css';\nimport transitions from './transitions/transitions.module.css';\n\n// в safari некорректно отрабатывает transform:scale (???), поэтому применяем немного другую анимацию\nconst transitionProps = isMacOS() && isSafari() ? safariTransitions : transitions;\n\nexport const CenterModal = forwardRef<HTMLDivElement, UniversalModalDesktopProps>((props, ref) => {\n    const {\n        dataTestId,\n        className,\n        open,\n        children,\n        width = 500,\n        height = 'hugContent',\n        verticalAlign = 'center',\n        overlay = true,\n        margin,\n        scrollableContainerRef: scrollableContainerRefProp,\n        onClose,\n        ...restProps\n    } = props;\n\n    const componentRef = useRef<HTMLDivElement>(null);\n    const { handleWheel, scrollableContainerRef } = useScrollableContainerRef({\n        overlay,\n        refObject: scrollableContainerRefProp,\n    });\n\n    const {\n        isFullSizeModal,\n        componentTransitions: fullSizeModalContentTransitions,\n        backdropTransitions: fullSizeModalBackdropTransitions,\n    } = getFullSizeModalTransitions({ verticalAlign, width, height });\n\n    const withoutOverlay = !overlay;\n\n    return (\n        <BaseModal\n            {...restProps}\n            open={open}\n            dataTestId={dataTestId}\n            ref={ref}\n            componentRef={componentRef}\n            scrollHandler='content'\n            scrollLock={overlay}\n            wrapperClassName={cn(styles.baseModalContainer, {\n                [styles.wrapperJustifyStart]: verticalAlign === 'top',\n                [styles.wrapperJustifyCenter]: verticalAlign === 'center',\n                [styles.wrapperJustifyEnd]: verticalAlign === 'bottom',\n                [styles.withoutOverlay]: withoutOverlay,\n            })}\n            className={cn(styles.component, className, styles.baseModalComponent, {\n                ...getMarginStyles({ styles, margin }),\n                ...getHugContentStyles({ styles, margin, height }),\n            })}\n            transitionProps={{\n                classNames: transitionProps,\n                ...(isFullSizeModal && fullSizeModalContentTransitions),\n                ...restProps.transitionProps,\n            }}\n            backdropProps={{\n                shouldRender: overlay,\n                ...(isFullSizeModal && fullSizeModalBackdropTransitions),\n                ...restProps.backdropProps,\n            }}\n            componentDivProps={{\n                style: {\n                    width: getWidthStyle(width, margin),\n                    ...getHeightStyle(height, margin),\n                },\n            }}\n            onWheel={handleWheel}\n            onClose={onClose}\n        >\n            <ModalContent height={height} scrollableContainerRef={scrollableContainerRef}>\n                {children}\n            </ModalContent>\n        </BaseModal>\n    );\n});\n"],"names":[],"mappings":";;;;;;;;;;;;;;;AAmBA;AACA,MAAM,eAAe,GAAG,OAAO,EAAE,IAAI,QAAQ,EAAE,GAAG,iBAAiB,GAAG,WAAW;AAEpE,MAAA,WAAW,GAAG,UAAU,CAA6C,CAAC,KAAK,EAAE,GAAG,KAAI;AAC7F,IAAA,MAAM,EACF,UAAU,EACV,SAAS,EACT,IAAI,EACJ,QAAQ,EACR,KAAK,GAAG,GAAG,EACX,MAAM,GAAG,YAAY,EACrB,aAAa,GAAG,QAAQ,EACxB,OAAO,GAAG,IAAI,EACd,MAAM,EACN,sBAAsB,EAAE,0BAA0B,EAClD,OAAO,EACP,GAAG,SAAS,EACf,GAAG,KAAK;AAET,IAAA,MAAM,YAAY,GAAG,MAAM,CAAiB,IAAI,CAAC;AACjD,IAAA,MAAM,EAAE,WAAW,EAAE,sBAAsB,EAAE,GAAG,yBAAyB,CAAC;QACtE,OAAO;AACP,QAAA,SAAS,EAAE,0BAA0B;AACxC,KAAA,CAAC;IAEF,MAAM,EACF,eAAe,EACf,oBAAoB,EAAE,+BAA+B,EACrD,mBAAmB,EAAE,gCAAgC,GACxD,GAAG,2BAA2B,CAAC,EAAE,aAAa,EAAE,KAAK,EAAE,MAAM,EAAE,CAAC;AAEjE,IAAA,MAAM,cAAc,GAAG,CAAC,OAAO;AAE/B,IAAA,QACI,KAAC,CAAA,aAAA,CAAA,SAAS,EACF,EAAA,GAAA,SAAS,EACb,IAAI,EAAE,IAAI,EACV,UAAU,EAAE,UAAU,EACtB,GAAG,EAAE,GAAG,EACR,YAAY,EAAE,YAAY,EAC1B,aAAa,EAAC,SAAS,EACvB,UAAU,EAAE,OAAO,EACnB,gBAAgB,EAAE,EAAE,CAAC,MAAM,CAAC,kBAAkB,EAAE;AAC5C,YAAA,CAAC,MAAM,CAAC,mBAAmB,GAAG,aAAa,KAAK,KAAK;AACrD,YAAA,CAAC,MAAM,CAAC,oBAAoB,GAAG,aAAa,KAAK,QAAQ;AACzD,YAAA,CAAC,MAAM,CAAC,iBAAiB,GAAG,aAAa,KAAK,QAAQ;AACtD,YAAA,CAAC,MAAM,CAAC,cAAc,GAAG,cAAc;AAC1C,SAAA,CAAC,EACF,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,SAAS,EAAE,SAAS,EAAE,MAAM,CAAC,kBAAkB,EAAE;AAClE,YAAA,GAAG,eAAe,CAAC,EAAE,MAAM,EAAE,MAAM,EAAE,CAAC;YACtC,GAAG,mBAAmB,CAAC,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,CAAC;SACrD,CAAC,EACF,eAAe,EAAE;AACb,YAAA,UAAU,EAAE,eAAe;AAC3B,YAAA,IAAI,eAAe,IAAI,+BAA+B,CAAC;YACvD,GAAG,SAAS,CAAC,eAAe;AAC/B,SAAA,EACD,aAAa,EAAE;AACX,YAAA,YAAY,EAAE,OAAO;AACrB,YAAA,IAAI,eAAe,IAAI,gCAAgC,CAAC;YACxD,GAAG,SAAS,CAAC,aAAa;AAC7B,SAAA,EACD,iBAAiB,EAAE;AACf,YAAA,KAAK,EAAE;AACH,gBAAA,KAAK,EAAE,aAAa,CAAC,KAAK,EAAE,MAAM,CAAC;AACnC,gBAAA,GAAG,cAAc,CAAC,MAAM,EAAE,MAAM,CAAC;AACpC,aAAA;AACJ,SAAA,EACD,OAAO,EAAE,WAAW,EACpB,OAAO,EAAE,OAAO,EAAA;AAEhB,QAAA,KAAA,CAAA,aAAA,CAAC,YAAY,EAAA,EAAC,MAAM,EAAE,MAAM,EAAE,sBAAsB,EAAE,sBAAsB,EACvE,EAAA,QAAQ,CACE,CACP;AAEpB,CAAC;;;;"}

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

@@ -8,8 +8,7 @@
         font-size: 22px;
         line-height: 26px;
         font-weight: 700;
-        letter-spacing: 0.2px;
-        font-family: var(--font-family-alfasans);
+        font-family: var(--font-family-system);
         padding: 11px var(--gap-12);
     }
 
@@ -17,8 +16,7 @@
         font-size: 22px;
         line-height: 26px;
         font-weight: 700;
-        letter-spacing: 0.2px;
-        font-family: var(--font-family-alfasans);
+        font-family: var(--font-family-system);
         padding: var(--gap-6) var(--gap-12) var(--gap-16);
     }
 
@@ -26,8 +24,7 @@
             font-size: 30px;
             line-height: 36px;
             font-weight: 700;
-            letter-spacing: 0.1px;
-            font-family: var(--font-family-alfasans);
+            font-family: var(--font-family-system);
             padding: var(--gap-6) var(--gap-12) var(--gap-16);
         }
 
@@ -35,6 +32,5 @@
             font-size: 30px;
             line-height: 36px;
             font-weight: 700;
-            letter-spacing: 0.1px;
-            font-family: var(--font-family-alfasans);
+            font-family: var(--font-family-system);
         }

package/moderncssm/desktop/components/side-modal/side-modal.js

@@ -4,6 +4,7 @@ import { BaseModal } from '@alfalab/core-components-base-modal/moderncssm';
 import { useScrollableContainerRef } from '../../hooks/use-scrollable-container-ref.js';
 import { getFullSizeModalTransitions } from '../../utils/get-full-size-modal-transitions.js';
 import { getHeightStyle } from '../../utils/get-height-style.js';
+import { getHugContentStyles } from '../../utils/get-hug-content-styles.js';
 import { getMarginStyles } from '../../utils/get-margin-styles.js';
 import { getWidthStyle } from '../../utils/get-width-style.js';
 import { ModalContent } from '../modal-content/modal-content.js';
@@ -27,7 +28,8 @@ const SideModal = forwardRef((props, ref) => {
             [styles.wrapperJustifyEnd]: verticalAlign === 'bottom',
             [styles.withoutOverlay]: withoutOverlay,
         }), className: cn(styles.component, className, styles.baseModalComponent, {
-            ...getMarginStyles({ styles, margin, height }),
+            ...getMarginStyles({ styles, margin }),
+            ...getHugContentStyles({ styles, margin, height }),
         }), contentClassName: styles.content, transitionProps: {
             ...getDefaultTransitionProps({
                 horizontalAlign,

package/moderncssm/desktop/components/side-modal/side-modal.js.map

@@ -1 +1 @@
-{"version":3,"file":"side-modal.js","sources":["../../../../src/desktop/components/side-modal/side-modal.tsx"],"sourcesContent":["import React, { forwardRef, useRef } from 'react';\nimport cn from 'classnames';\n\nimport { BaseModal } from '@alfalab/core-components-base-modal';\n\nimport { useScrollableContainerRef } from '../../hooks/use-scrollable-container-ref';\nimport { type UniversalModalDesktopProps } from '../../types/props';\nimport { getFullSizeModalTransitions } from '../../utils/get-full-size-modal-transitions';\nimport { getHeightStyle } from '../../utils/get-height-style';\nimport { getMarginStyles } from '../../utils/get-margin-styles';\nimport { getWidthStyle } from '../../utils/get-width-style';\nimport { ModalContent } from '../modal-content/modal-content';\n\nimport { getDefaultTransitionProps } from './get-default-transition-props';\n\nimport styles from './index.module.css';\n\nexport const SideModal = forwardRef<HTMLDivElement, UniversalModalDesktopProps>((props, ref) => {\n    const {\n        width = 500,\n        height = 'fullHeight',\n        horizontalAlign = 'center',\n        verticalAlign = 'center',\n        overlay = true,\n        open,\n        dataTestId,\n        className,\n        children,\n        margin,\n        scrollableContainerRef: scrollableContainerRefProp,\n        onClose,\n        ...restProps\n    } = props;\n    const componentRef = useRef<HTMLDivElement>(null);\n    const contentRef = useRef<HTMLDivElement>(null);\n    const { handleWheel, scrollableContainerRef } = useScrollableContainerRef({\n        overlay,\n        refObject: scrollableContainerRefProp,\n    });\n\n    const {\n        isFullSizeModal,\n        componentTransitions: fullSizeModalContentTransitions,\n        backdropTransitions: fullSizeModalBackdropTransitions,\n    } = getFullSizeModalTransitions({ verticalAlign, width, height });\n\n    const withoutOverlay = !overlay;\n\n    return (\n        <BaseModal\n            {...restProps}\n            open={open}\n            dataTestId={dataTestId}\n            ref={ref}\n            componentRef={componentRef}\n            contentElementRef={contentRef}\n            scrollHandler='content'\n            scrollLock={overlay}\n            wrapperClassName={cn(styles.wrapper, styles.baseModalContainer, {\n                [styles.wrapperAlignStart]: horizontalAlign === 'start',\n                [styles.wrapperAlignEnd]: horizontalAlign === 'end',\n                [styles.wrapperJustifyCenter]: verticalAlign === 'center',\n                [styles.wrapperJustifyEnd]: verticalAlign === 'bottom',\n                [styles.withoutOverlay]: withoutOverlay,\n            })}\n            className={cn(styles.component, className, styles.baseModalComponent, {\n                ...getMarginStyles({ styles, margin, height }),\n            })}\n            contentClassName={styles.content}\n            transitionProps={{\n                ...getDefaultTransitionProps({\n                    horizontalAlign,\n                    margin,\n                }),\n                ...(isFullSizeModal && fullSizeModalContentTransitions),\n                ...restProps.transitionProps,\n            }}\n            backdropProps={{\n                shouldRender: overlay,\n                ...(isFullSizeModal && fullSizeModalBackdropTransitions),\n                ...restProps.backdropProps,\n            }}\n            componentDivProps={{\n                style: {\n                    width: getWidthStyle(width, margin),\n                    ...getHeightStyle(height, margin),\n                },\n            }}\n            onWheel={handleWheel}\n            onClose={onClose}\n        >\n            <ModalContent height={height} scrollableContainerRef={scrollableContainerRef}>\n                {children}\n            </ModalContent>\n        </BaseModal>\n    );\n});\n"],"names":[],"mappings":";;;;;;;;;;;;AAiBa,MAAA,SAAS,GAAG,UAAU,CAA6C,CAAC,KAAK,EAAE,GAAG,KAAI;AAC3F,IAAA,MAAM,EACF,KAAK,GAAG,GAAG,EACX,MAAM,GAAG,YAAY,EACrB,eAAe,GAAG,QAAQ,EAC1B,aAAa,GAAG,QAAQ,EACxB,OAAO,GAAG,IAAI,EACd,IAAI,EACJ,UAAU,EACV,SAAS,EACT,QAAQ,EACR,MAAM,EACN,sBAAsB,EAAE,0BAA0B,EAClD,OAAO,EACP,GAAG,SAAS,EACf,GAAG,KAAK;AACT,IAAA,MAAM,YAAY,GAAG,MAAM,CAAiB,IAAI,CAAC;AACjD,IAAA,MAAM,UAAU,GAAG,MAAM,CAAiB,IAAI,CAAC;AAC/C,IAAA,MAAM,EAAE,WAAW,EAAE,sBAAsB,EAAE,GAAG,yBAAyB,CAAC;QACtE,OAAO;AACP,QAAA,SAAS,EAAE,0BAA0B;AACxC,KAAA,CAAC;IAEF,MAAM,EACF,eAAe,EACf,oBAAoB,EAAE,+BAA+B,EACrD,mBAAmB,EAAE,gCAAgC,GACxD,GAAG,2BAA2B,CAAC,EAAE,aAAa,EAAE,KAAK,EAAE,MAAM,EAAE,CAAC;AAEjE,IAAA,MAAM,cAAc,GAAG,CAAC,OAAO;IAE/B,QACI,oBAAC,SAAS,EAAA,EAAA,GACF,SAAS,EACb,IAAI,EAAE,IAAI,EACV,UAAU,EAAE,UAAU,EACtB,GAAG,EAAE,GAAG,EACR,YAAY,EAAE,YAAY,EAC1B,iBAAiB,EAAE,UAAU,EAC7B,aAAa,EAAC,SAAS,EACvB,UAAU,EAAE,OAAO,EACnB,gBAAgB,EAAE,EAAE,CAAC,MAAM,CAAC,OAAO,EAAE,MAAM,CAAC,kBAAkB,EAAE;AAC5D,YAAA,CAAC,MAAM,CAAC,iBAAiB,GAAG,eAAe,KAAK,OAAO;AACvD,YAAA,CAAC,MAAM,CAAC,eAAe,GAAG,eAAe,KAAK,KAAK;AACnD,YAAA,CAAC,MAAM,CAAC,oBAAoB,GAAG,aAAa,KAAK,QAAQ;AACzD,YAAA,CAAC,MAAM,CAAC,iBAAiB,GAAG,aAAa,KAAK,QAAQ;AACtD,YAAA,CAAC,MAAM,CAAC,cAAc,GAAG,cAAc;AAC1C,SAAA,CAAC,EACF,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,SAAS,EAAE,SAAS,EAAE,MAAM,CAAC,kBAAkB,EAAE;YAClE,GAAG,eAAe,CAAC,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,CAAC;SACjD,CAAC,EACF,gBAAgB,EAAE,MAAM,CAAC,OAAO,EAChC,eAAe,EAAE;AACb,YAAA,GAAG,yBAAyB,CAAC;gBACzB,eAAe;gBACf,MAAM;aACT,CAAC;AACF,YAAA,IAAI,eAAe,IAAI,+BAA+B,CAAC;YACvD,GAAG,SAAS,CAAC,eAAe;AAC/B,SAAA,EACD,aAAa,EAAE;AACX,YAAA,YAAY,EAAE,OAAO;AACrB,YAAA,IAAI,eAAe,IAAI,gCAAgC,CAAC;YACxD,GAAG,SAAS,CAAC,aAAa;AAC7B,SAAA,EACD,iBAAiB,EAAE;AACf,YAAA,KAAK,EAAE;AACH,gBAAA,KAAK,EAAE,aAAa,CAAC,KAAK,EAAE,MAAM,CAAC;AACnC,gBAAA,GAAG,cAAc,CAAC,MAAM,EAAE,MAAM,CAAC;AACpC,aAAA;AACJ,SAAA,EACD,OAAO,EAAE,WAAW,EACpB,OAAO,EAAE,OAAO,EAAA;AAEhB,QAAA,KAAA,CAAA,aAAA,CAAC,YAAY,EAAA,EAAC,MAAM,EAAE,MAAM,EAAE,sBAAsB,EAAE,sBAAsB,EACvE,EAAA,QAAQ,CACE,CACP;AAEpB,CAAC;;;;"}
+{"version":3,"file":"side-modal.js","sources":["../../../../src/desktop/components/side-modal/side-modal.tsx"],"sourcesContent":["import React, { forwardRef, useRef } from 'react';\nimport cn from 'classnames';\n\nimport { BaseModal } from '@alfalab/core-components-base-modal';\n\nimport { useScrollableContainerRef } from '../../hooks/use-scrollable-container-ref';\nimport { type UniversalModalDesktopProps } from '../../types/props';\nimport { getFullSizeModalTransitions } from '../../utils/get-full-size-modal-transitions';\nimport { getHeightStyle } from '../../utils/get-height-style';\nimport { getHugContentStyles } from '../../utils/get-hug-content-styles';\nimport { getMarginStyles } from '../../utils/get-margin-styles';\nimport { getWidthStyle } from '../../utils/get-width-style';\nimport { ModalContent } from '../modal-content/modal-content';\n\nimport { getDefaultTransitionProps } from './get-default-transition-props';\n\nimport styles from './index.module.css';\n\nexport const SideModal = forwardRef<HTMLDivElement, UniversalModalDesktopProps>((props, ref) => {\n    const {\n        width = 500,\n        height = 'fullHeight',\n        horizontalAlign = 'center',\n        verticalAlign = 'center',\n        overlay = true,\n        open,\n        dataTestId,\n        className,\n        children,\n        margin,\n        scrollableContainerRef: scrollableContainerRefProp,\n        onClose,\n        ...restProps\n    } = props;\n    const componentRef = useRef<HTMLDivElement>(null);\n    const contentRef = useRef<HTMLDivElement>(null);\n    const { handleWheel, scrollableContainerRef } = useScrollableContainerRef({\n        overlay,\n        refObject: scrollableContainerRefProp,\n    });\n\n    const {\n        isFullSizeModal,\n        componentTransitions: fullSizeModalContentTransitions,\n        backdropTransitions: fullSizeModalBackdropTransitions,\n    } = getFullSizeModalTransitions({ verticalAlign, width, height });\n\n    const withoutOverlay = !overlay;\n\n    return (\n        <BaseModal\n            {...restProps}\n            open={open}\n            dataTestId={dataTestId}\n            ref={ref}\n            componentRef={componentRef}\n            contentElementRef={contentRef}\n            scrollHandler='content'\n            scrollLock={overlay}\n            wrapperClassName={cn(styles.wrapper, styles.baseModalContainer, {\n                [styles.wrapperAlignStart]: horizontalAlign === 'start',\n                [styles.wrapperAlignEnd]: horizontalAlign === 'end',\n                [styles.wrapperJustifyCenter]: verticalAlign === 'center',\n                [styles.wrapperJustifyEnd]: verticalAlign === 'bottom',\n                [styles.withoutOverlay]: withoutOverlay,\n            })}\n            className={cn(styles.component, className, styles.baseModalComponent, {\n                ...getMarginStyles({ styles, margin }),\n                ...getHugContentStyles({ styles, margin, height }),\n            })}\n            contentClassName={styles.content}\n            transitionProps={{\n                ...getDefaultTransitionProps({\n                    horizontalAlign,\n                    margin,\n                }),\n                ...(isFullSizeModal && fullSizeModalContentTransitions),\n                ...restProps.transitionProps,\n            }}\n            backdropProps={{\n                shouldRender: overlay,\n                ...(isFullSizeModal && fullSizeModalBackdropTransitions),\n                ...restProps.backdropProps,\n            }}\n            componentDivProps={{\n                style: {\n                    width: getWidthStyle(width, margin),\n                    ...getHeightStyle(height, margin),\n                },\n            }}\n            onWheel={handleWheel}\n            onClose={onClose}\n        >\n            <ModalContent height={height} scrollableContainerRef={scrollableContainerRef}>\n                {children}\n            </ModalContent>\n        </BaseModal>\n    );\n});\n"],"names":[],"mappings":";;;;;;;;;;;;;AAkBa,MAAA,SAAS,GAAG,UAAU,CAA6C,CAAC,KAAK,EAAE,GAAG,KAAI;AAC3F,IAAA,MAAM,EACF,KAAK,GAAG,GAAG,EACX,MAAM,GAAG,YAAY,EACrB,eAAe,GAAG,QAAQ,EAC1B,aAAa,GAAG,QAAQ,EACxB,OAAO,GAAG,IAAI,EACd,IAAI,EACJ,UAAU,EACV,SAAS,EACT,QAAQ,EACR,MAAM,EACN,sBAAsB,EAAE,0BAA0B,EAClD,OAAO,EACP,GAAG,SAAS,EACf,GAAG,KAAK;AACT,IAAA,MAAM,YAAY,GAAG,MAAM,CAAiB,IAAI,CAAC;AACjD,IAAA,MAAM,UAAU,GAAG,MAAM,CAAiB,IAAI,CAAC;AAC/C,IAAA,MAAM,EAAE,WAAW,EAAE,sBAAsB,EAAE,GAAG,yBAAyB,CAAC;QACtE,OAAO;AACP,QAAA,SAAS,EAAE,0BAA0B;AACxC,KAAA,CAAC;IAEF,MAAM,EACF,eAAe,EACf,oBAAoB,EAAE,+BAA+B,EACrD,mBAAmB,EAAE,gCAAgC,GACxD,GAAG,2BAA2B,CAAC,EAAE,aAAa,EAAE,KAAK,EAAE,MAAM,EAAE,CAAC;AAEjE,IAAA,MAAM,cAAc,GAAG,CAAC,OAAO;IAE/B,QACI,oBAAC,SAAS,EAAA,EAAA,GACF,SAAS,EACb,IAAI,EAAE,IAAI,EACV,UAAU,EAAE,UAAU,EACtB,GAAG,EAAE,GAAG,EACR,YAAY,EAAE,YAAY,EAC1B,iBAAiB,EAAE,UAAU,EAC7B,aAAa,EAAC,SAAS,EACvB,UAAU,EAAE,OAAO,EACnB,gBAAgB,EAAE,EAAE,CAAC,MAAM,CAAC,OAAO,EAAE,MAAM,CAAC,kBAAkB,EAAE;AAC5D,YAAA,CAAC,MAAM,CAAC,iBAAiB,GAAG,eAAe,KAAK,OAAO;AACvD,YAAA,CAAC,MAAM,CAAC,eAAe,GAAG,eAAe,KAAK,KAAK;AACnD,YAAA,CAAC,MAAM,CAAC,oBAAoB,GAAG,aAAa,KAAK,QAAQ;AACzD,YAAA,CAAC,MAAM,CAAC,iBAAiB,GAAG,aAAa,KAAK,QAAQ;AACtD,YAAA,CAAC,MAAM,CAAC,cAAc,GAAG,cAAc;AAC1C,SAAA,CAAC,EACF,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,SAAS,EAAE,SAAS,EAAE,MAAM,CAAC,kBAAkB,EAAE;AAClE,YAAA,GAAG,eAAe,CAAC,EAAE,MAAM,EAAE,MAAM,EAAE,CAAC;YACtC,GAAG,mBAAmB,CAAC,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,CAAC;SACrD,CAAC,EACF,gBAAgB,EAAE,MAAM,CAAC,OAAO,EAChC,eAAe,EAAE;AACb,YAAA,GAAG,yBAAyB,CAAC;gBACzB,eAAe;gBACf,MAAM;aACT,CAAC;AACF,YAAA,IAAI,eAAe,IAAI,+BAA+B,CAAC;YACvD,GAAG,SAAS,CAAC,eAAe;AAC/B,SAAA,EACD,aAAa,EAAE;AACX,YAAA,YAAY,EAAE,OAAO;AACrB,YAAA,IAAI,eAAe,IAAI,gCAAgC,CAAC;YACxD,GAAG,SAAS,CAAC,aAAa;AAC7B,SAAA,EACD,iBAAiB,EAAE;AACf,YAAA,KAAK,EAAE;AACH,gBAAA,KAAK,EAAE,aAAa,CAAC,KAAK,EAAE,MAAM,CAAC;AACnC,gBAAA,GAAG,cAAc,CAAC,MAAM,EAAE,MAAM,CAAC;AACpC,aAAA;AACJ,SAAA,EACD,OAAO,EAAE,WAAW,EACpB,OAAO,EAAE,OAAO,EAAA;AAEhB,QAAA,KAAA,CAAA,aAAA,CAAC,YAAY,EAAA,EAAC,MAAM,EAAE,MAAM,EAAE,sBAAsB,EAAE,sBAAsB,EACvE,EAAA,QAAQ,CACE,CACP;AAEpB,CAAC;;;;"}

package/moderncssm/desktop/utils/get-hug-content-styles.d.ts

@@ -0,0 +1,8 @@
+import { type UniversalModalDesktopProps } from '../types/props';
+interface Params {
+    styles: Record<string, string>;
+    margin: UniversalModalDesktopProps['margin'];
+    height: NonNullable<UniversalModalDesktopProps['height']>;
+}
+export declare const getHugContentStyles: (params: Params) => Record<string, boolean>;
+export {};

package/moderncssm/desktop/utils/get-hug-content-styles.js

@@ -0,0 +1,17 @@
+import { hasOwnProperty } from '@alfalab/core-components-shared/moderncssm';
+
+const getHugContentStyles = (params) => {
+    const { margin, styles, height } = params;
+    if (height !== 'hugContent') {
+        return {};
+    }
+    return {
+        [styles.hugContent]: true,
+        ...(margin && hasOwnProperty(margin, 'top') && { [styles[`topGap-${margin.top}`]]: true }),
+        ...(margin &&
+            hasOwnProperty(margin, 'bottom') && { [styles[`bottomGap-${margin.bottom}`]]: true }),
+    };
+};
+
+export { getHugContentStyles };
+//# sourceMappingURL=get-hug-content-styles.js.map

package/moderncssm/desktop/utils/get-hug-content-styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"get-hug-content-styles.js","sources":["../../../src/desktop/utils/get-hug-content-styles.ts"],"sourcesContent":["import { hasOwnProperty } from '@alfalab/core-components-shared';\n\nimport { type UniversalModalDesktopProps } from '../types/props';\n\ninterface Params {\n    styles: Record<string, string>;\n    margin: UniversalModalDesktopProps['margin'];\n    height: NonNullable<UniversalModalDesktopProps['height']>;\n}\n\nexport const getHugContentStyles = (params: Params): Record<string, boolean> => {\n    const { margin, styles, height } = params;\n\n    if (height !== 'hugContent') {\n        return {};\n    }\n\n    return {\n        [styles.hugContent]: true,\n        ...(margin && hasOwnProperty(margin, 'top') && { [styles[`topGap-${margin.top}`]]: true }),\n        ...(margin &&\n            hasOwnProperty(margin, 'bottom') && { [styles[`bottomGap-${margin.bottom}`]]: true }),\n    };\n};\n"],"names":[],"mappings":";;AAUa,MAAA,mBAAmB,GAAG,CAAC,MAAc,KAA6B;IAC3E,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,GAAG,MAAM;AAEzC,IAAA,IAAI,MAAM,KAAK,YAAY,EAAE;AACzB,QAAA,OAAO,EAAE;;IAGb,OAAO;AACH,QAAA,CAAC,MAAM,CAAC,UAAU,GAAG,IAAI;QACzB,IAAI,MAAM,IAAI,cAAc,CAAC,MAAM,EAAE,KAAK,CAAC,IAAI,EAAE,CAAC,MAAM,CAAC,CAAA,OAAA,EAAU,MAAM,CAAC,GAAG,CAAA,CAAE,CAAC,GAAG,IAAI,EAAE,CAAC;AAC1F,QAAA,IAAI,MAAM;YACN,cAAc,CAAC,MAAM,EAAE,QAAQ,CAAC,IAAI,EAAE,CAAC,MAAM,CAAC,aAAa,MAAM,CAAC,MAAM,CAAE,CAAA,CAAC,GAAG,IAAI,EAAE,CAAC;KAC5F;AACL;;;;"}

package/moderncssm/desktop/utils/get-margin-styles.d.ts

@@ -2,7 +2,6 @@ import { type UniversalModalDesktopProps } from '../types/props';
 interface Params {
     styles: Record<string, string>;
     margin: UniversalModalDesktopProps['margin'];
-    height: NonNullable<UniversalModalDesktopProps['height']>;
 }
 export declare const getMarginStyles: (params: Params) => Record<string, boolean>;
 export {};

package/moderncssm/desktop/utils/get-margin-styles.js

@@ -1,20 +1,18 @@
 import { hasOwnProperty } from '@alfalab/core-components-shared/moderncssm';
 
 const getMarginStyles = (params) => {
-    const { margin, styles, height } = params;
-    if (margin) {
-        const isHugContent = height === 'hugContent';
-        return {
-            [styles[`marginTop-${margin.top}`]]: hasOwnProperty(margin, 'top'),
-            [styles[`marginRight-${margin.right}`]]: hasOwnProperty(margin, 'right'),
-            [styles[`marginBottom-${margin.bottom}`]]: hasOwnProperty(margin, 'bottom'),
-            [styles[`marginLeft-${margin.left}`]]: hasOwnProperty(margin, 'left'),
-            [styles.hugContent]: isHugContent,
-            [styles[`topGap-${margin.top}`]]: isHugContent && hasOwnProperty(margin, 'top'),
-            [styles[`bottomGap-${margin.bottom}`]]: isHugContent && hasOwnProperty(margin, 'bottom'),
-        };
+    const { margin, styles } = params;
+    if (!margin) {
+        return {};
     }
-    return {};
+    return {
+        ...(hasOwnProperty(margin, 'top') && { [styles[`marginTop-${margin.top}`]]: true }),
+        ...(hasOwnProperty(margin, 'right') && { [styles[`marginRight-${margin.right}`]]: true }),
+        ...(hasOwnProperty(margin, 'bottom') && {
+            [styles[`marginBottom-${margin.bottom}`]]: true,
+        }),
+        ...(hasOwnProperty(margin, 'left') && { [styles[`marginLeft-${margin.left}`]]: true }),
+    };
 };
 
 export { getMarginStyles };

package/moderncssm/desktop/utils/get-margin-styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"get-margin-styles.js","sources":["../../../src/desktop/utils/get-margin-styles.ts"],"sourcesContent":["import { hasOwnProperty } from '@alfalab/core-components-shared';\n\nimport { type UniversalModalDesktopProps } from '../types/props';\n\ninterface Params {\n    styles: Record<string, string>;\n    margin: UniversalModalDesktopProps['margin'];\n    height: NonNullable<UniversalModalDesktopProps['height']>;\n}\n\nexport const getMarginStyles = (params: Params): Record<string, boolean> => {\n    const { margin, styles, height } = params;\n\n    if (margin) {\n        const isHugContent = height === 'hugContent';\n\n        return {\n            [styles[`marginTop-${margin.top}`]]: hasOwnProperty(margin, 'top'),\n            [styles[`marginRight-${margin.right}`]]: hasOwnProperty(margin, 'right'),\n            [styles[`marginBottom-${margin.bottom}`]]: hasOwnProperty(margin, 'bottom'),\n            [styles[`marginLeft-${margin.left}`]]: hasOwnProperty(margin, 'left'),\n            [styles.hugContent]: isHugContent,\n            [styles[`topGap-${margin.top}`]]: isHugContent && hasOwnProperty(margin, 'top'),\n            [styles[`bottomGap-${margin.bottom}`]]:\n                isHugContent && hasOwnProperty(margin, 'bottom'),\n        };\n    }\n\n    return {};\n};\n"],"names":[],"mappings":";;AAUa,MAAA,eAAe,GAAG,CAAC,MAAc,KAA6B;IACvE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,GAAG,MAAM;IAEzC,IAAI,MAAM,EAAE;AACR,QAAA,MAAM,YAAY,GAAG,MAAM,KAAK,YAAY;QAE5C,OAAO;AACH,YAAA,CAAC,MAAM,CAAC,CAAa,UAAA,EAAA,MAAM,CAAC,GAAG,CAAA,CAAE,CAAC,GAAG,cAAc,CAAC,MAAM,EAAE,KAAK,CAAC;AAClE,YAAA,CAAC,MAAM,CAAC,CAAe,YAAA,EAAA,MAAM,CAAC,KAAK,CAAA,CAAE,CAAC,GAAG,cAAc,CAAC,MAAM,EAAE,OAAO,CAAC;AACxE,YAAA,CAAC,MAAM,CAAC,CAAgB,aAAA,EAAA,MAAM,CAAC,MAAM,CAAA,CAAE,CAAC,GAAG,cAAc,CAAC,MAAM,EAAE,QAAQ,CAAC;AAC3E,YAAA,CAAC,MAAM,CAAC,CAAc,WAAA,EAAA,MAAM,CAAC,IAAI,CAAA,CAAE,CAAC,GAAG,cAAc,CAAC,MAAM,EAAE,MAAM,CAAC;AACrE,YAAA,CAAC,MAAM,CAAC,UAAU,GAAG,YAAY;AACjC,YAAA,CAAC,MAAM,CAAC,CAAA,OAAA,EAAU,MAAM,CAAC,GAAG,CAAE,CAAA,CAAC,GAAG,YAAY,IAAI,cAAc,CAAC,MAAM,EAAE,KAAK,CAAC;AAC/E,YAAA,CAAC,MAAM,CAAC,CAAA,UAAA,EAAa,MAAM,CAAC,MAAM,CAAE,CAAA,CAAC,GACjC,YAAY,IAAI,cAAc,CAAC,MAAM,EAAE,QAAQ,CAAC;SACvD;;AAGL,IAAA,OAAO,EAAE;AACb;;;;"}
+{"version":3,"file":"get-margin-styles.js","sources":["../../../src/desktop/utils/get-margin-styles.ts"],"sourcesContent":["import { hasOwnProperty } from '@alfalab/core-components-shared';\n\nimport { type UniversalModalDesktopProps } from '../types/props';\n\ninterface Params {\n    styles: Record<string, string>;\n    margin: UniversalModalDesktopProps['margin'];\n}\n\nexport const getMarginStyles = (params: Params): Record<string, boolean> => {\n    const { margin, styles } = params;\n\n    if (!margin) {\n        return {};\n    }\n\n    return {\n        ...(hasOwnProperty(margin, 'top') && { [styles[`marginTop-${margin.top}`]]: true }),\n        ...(hasOwnProperty(margin, 'right') && { [styles[`marginRight-${margin.right}`]]: true }),\n        ...(hasOwnProperty(margin, 'bottom') && {\n            [styles[`marginBottom-${margin.bottom}`]]: true,\n        }),\n        ...(hasOwnProperty(margin, 'left') && { [styles[`marginLeft-${margin.left}`]]: true }),\n    };\n};\n"],"names":[],"mappings":";;AASa,MAAA,eAAe,GAAG,CAAC,MAAc,KAA6B;AACvE,IAAA,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,GAAG,MAAM;IAEjC,IAAI,CAAC,MAAM,EAAE;AACT,QAAA,OAAO,EAAE;;IAGb,OAAO;QACH,IAAI,cAAc,CAAC,MAAM,EAAE,KAAK,CAAC,IAAI,EAAE,CAAC,MAAM,CAAC,CAAa,UAAA,EAAA,MAAM,CAAC,GAAG,CAAA,CAAE,CAAC,GAAG,IAAI,EAAE,CAAC;QACnF,IAAI,cAAc,CAAC,MAAM,EAAE,OAAO,CAAC,IAAI,EAAE,CAAC,MAAM,CAAC,CAAe,YAAA,EAAA,MAAM,CAAC,KAAK,CAAA,CAAE,CAAC,GAAG,IAAI,EAAE,CAAC;AACzF,QAAA,IAAI,cAAc,CAAC,MAAM,EAAE,QAAQ,CAAC,IAAI;YACpC,CAAC,MAAM,CAAC,CAAA,aAAA,EAAgB,MAAM,CAAC,MAAM,CAAE,CAAA,CAAC,GAAG,IAAI;SAClD,CAAC;QACF,IAAI,cAAc,CAAC,MAAM,EAAE,MAAM,CAAC,IAAI,EAAE,CAAC,MAAM,CAAC,CAAc,WAAA,EAAA,MAAM,CAAC,IAAI,CAAA,CAAE,CAAC,GAAG,IAAI,EAAE,CAAC;KACzF;AACL;;;;"}

package/moderncssm/mobile/components/header/index.module.css

@@ -7,9 +7,8 @@
 .content {
     font-size: 20px;
     line-height: 28px;
-    font-weight: 500;
-    letter-spacing: -0.15px;
-    font-family: var(--font-family-alfasans);
+    font-weight: 600;
+    font-family: var(--font-family-system);
     padding: 0 var(--gap-12);
     min-height: 40px;
     justify-content: center;
@@ -18,8 +17,7 @@
 .bottomAddons {
     font-size: 20px;
     line-height: 28px;
-    font-weight: 500;
-    letter-spacing: -0.15px;
-    font-family: var(--font-family-alfasans);
+    font-weight: 600;
+    font-family: var(--font-family-system);
     padding: var(--gap-6) var(--gap-16);
 }

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@alfalab/core-components-universal-modal",
-    "version": "3.2.1-alfasans",
+    "version": "3.2.2",
     "description": "UniversalModal component",
     "keywords": [],
     "license": "MIT",
@@ -13,12 +13,12 @@
         "build": "rollup -c ../../tools/rollup/rollup.config.mjs --silent"
     },
     "dependencies": {
-        "@alfalab/core-components-backdrop": "5.0.2-alfasans",
-        "@alfalab/core-components-base-modal": "7.1.7-alfasans",
-        "@alfalab/core-components-mq": "6.0.6-alfasans",
-        "@alfalab/core-components-navigation-bar-private": "2.0.12-alfasans",
-        "@alfalab/core-components-scrollbar": "5.0.5-alfasans",
-        "@alfalab/core-components-shared": "2.2.2-alfasans",
+        "@alfalab/core-components-backdrop": "^5.0.2",
+        "@alfalab/core-components-base-modal": "^7.1.8",
+        "@alfalab/core-components-mq": "^6.0.7",
+        "@alfalab/core-components-navigation-bar-private": "^2.0.13",
+        "@alfalab/core-components-scrollbar": "^5.0.6",
+        "@alfalab/core-components-shared": "^2.2.3",
         "@types/react-transition-group": "^4.4.12",
         "classnames": "^2.5.1",
         "react-merge-refs": "^1.1.0",
@@ -33,6 +33,6 @@
         "access": "public",
         "directory": "dist"
     },
-    "themesVersion": "15.2.0-alfasans",
-    "varsVersion": "11.2.0-alfasans"
+    "themesVersion": "15.2.1",
+    "varsVersion": "11.2.1"
 }