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

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

@@ -1,15 +1,13 @@
-import { hasOwnProperty } from '@alfalab/core-components-shared/moderncssm';
-
 const getHugContentStyles = (params) => {
     const { margin, styles, height } = params;
     if (height !== 'hugContent') {
         return {};
     }
+    const topGap = margin?.top ?? 0;
+    const bottomGap = margin?.bottom ?? 0;
     return {
         [styles.hugContent]: true,
-        ...(margin && hasOwnProperty(margin, 'top') && { [styles[`topGap-${margin.top}`]]: true }),
-        ...(margin &&
-            hasOwnProperty(margin, 'bottom') && { [styles[`bottomGap-${margin.bottom}`]]: true }),
+        [styles[`hugGap-${topGap}-${bottomGap}`]]: true,
     };
 };
 

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

@@ -1 +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;;;;"}
+{"version":3,"file":"get-hug-content-styles.js","sources":["../../../src/desktop/utils/get-hug-content-styles.ts"],"sourcesContent":["import { 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    const topGap = margin?.top ?? 0;\n    const bottomGap = margin?.bottom ?? 0;\n\n    return {\n        [styles.hugContent]: true,\n        [styles[`hugGap-${topGap}-${bottomGap}`]]: true,\n    };\n};\n"],"names":[],"mappings":"AAQa,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;;AAGb,IAAA,MAAM,MAAM,GAAG,MAAM,EAAE,GAAG,IAAI,CAAC;AAC/B,IAAA,MAAM,SAAS,GAAG,MAAM,EAAE,MAAM,IAAI,CAAC;IAErC,OAAO;AACH,QAAA,CAAC,MAAM,CAAC,UAAU,GAAG,IAAI;QACzB,CAAC,MAAM,CAAC,CAAA,OAAA,EAAU,MAAM,CAAA,CAAA,EAAI,SAAS,CAAE,CAAA,CAAC,GAAG,IAAI;KAClD;AACL;;;;"}

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

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

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@alfalab/core-components-universal-modal",
-    "version": "3.2.2",
+    "version": "3.2.3-alfasans",
     "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",
-        "@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",
+        "@alfalab/core-components-backdrop": "5.0.2-alfasans",
+        "@alfalab/core-components-base-modal": "7.1.8-alfasans",
+        "@alfalab/core-components-mq": "6.0.7-alfasans",
+        "@alfalab/core-components-navigation-bar-private": "2.0.13-alfasans",
+        "@alfalab/core-components-scrollbar": "5.0.6-alfasans",
+        "@alfalab/core-components-shared": "2.2.3-alfasans",
         "@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.1",
-    "varsVersion": "11.2.1"
+    "themesVersion": "15.2.1-alfasans",
+    "varsVersion": "11.2.1-alfasans"
 }

package/src/desktop/styles/common.module.css

@@ -21,25 +21,15 @@
     }
 }
 
-:root {
-    /* stylelint-disable-next-line length-zero-no-unit */
-    --hug-content-top-gap: 0px;
-    /* stylelint-disable-next-line length-zero-no-unit */
-    --hug-content-bottom-gap: 0px;
-}
-
 .hugContent {
-    max-height: calc(100% - var(--hug-content-top-gap) - var(--hug-content-bottom-gap));
-    margin-top: var(--hug-content-top-gap);
-    margin-bottom: var(--hug-content-bottom-gap);
+    max-height: 100%;
 
     /* prettier-ignore */
-    @for $i from 0 to 128 {
-        &.topGap-$(i) {
-            --hug-content-top-gap: $(i)px;
-        }
-        &.bottomGap-$(i) {
-            --hug-content-bottom-gap: $(i)px;
+    @each $top in 0, 2, 4, 8, 12, 16, 20, 24, 32, 40, 48, 56, 64, 72, 80, 96, 128 {
+        @each $bottom in 0, 2, 4, 8, 12, 16, 20, 24, 32, 40, 48, 56, 64, 72, 80, 96, 128 {
+            &.hugGap-$(top)-$(bottom) {
+                max-height: calc(100% - $(top)px - $(bottom)px);
+            }
         }
     }
 }

package/src/desktop/utils/get-hug-content-styles.ts

@@ -1,5 +1,3 @@
-import { hasOwnProperty } from '@alfalab/core-components-shared';
-
 import { type UniversalModalDesktopProps } from '../types/props';
 
 interface Params {
@@ -15,10 +13,11 @@ export const getHugContentStyles = (params: Params): Record<string, boolean> =>
         return {};
     }
 
+    const topGap = margin?.top ?? 0;
+    const bottomGap = margin?.bottom ?? 0;
+
     return {
         [styles.hugContent]: true,
-        ...(margin && hasOwnProperty(margin, 'top') && { [styles[`topGap-${margin.top}`]]: true }),
-        ...(margin &&
-            hasOwnProperty(margin, 'bottom') && { [styles[`bottomGap-${margin.bottom}`]]: true }),
+        [styles[`hugGap-${topGap}-${bottomGap}`]]: true,
     };
 };