@alfalab/core-components 48.21.0-beta.3 → 48.21.0-beta.5

package/tabs/modern/components/tabs/Component.collapsible.js

@@ -16,7 +16,7 @@ import '../../../../shared/modern';
 import '../../synthetic-events.js';
 import '../title/Component.js';
 import '../../../../skeleton/modern';
-import '../../index.module-d60c9f3f.js';
+import '../../index.module-b521f817.js';
 
 const TabsCollapsible = ({ ...restProps }) => (React.createElement(Tabs, { TabList: CollapsiblePrimaryTabList, ...restProps }));
 

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

@@ -19,10 +19,10 @@ import '@alfalab/icons-glyph/ChevronRightCompactSIcon';
 import '../scroll-controls/utils.js';
 import '../title/Component.js';
 import '../../../../skeleton/modern';
-import '../../index.module-d60c9f3f.js';
+import '../../index.module-b521f817.js';
 import '../../../../tag/modern/desktop';
 import '../secondary-tablist/Component.js';
-import '../../index.module-ced12814.js';
+import '../../index.module-97cf1c4a.js';
 
 const views = {
     primary: PrimaryTabListDesktop,

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

@@ -19,10 +19,10 @@ import '@alfalab/icons-glyph/ChevronRightCompactSIcon';
 import '../scroll-controls/utils.js';
 import '../title/Component.js';
 import '../../../../skeleton/modern';
-import '../../index.module-d60c9f3f.js';
+import '../../index.module-b521f817.js';
 import '../../../../tag/modern/mobile';
 import '../secondary-tablist/Component.js';
-import '../../index.module-ced12814.js';
+import '../../index.module-97cf1c4a.js';
 
 const views = {
     primary: PrimaryTabListMobile,

package/tabs/modern/components/tabs/Component.responsive.js

@@ -21,12 +21,12 @@ import '@alfalab/icons-glyph/ChevronRightCompactSIcon';
 import '../scroll-controls/utils.js';
 import '../title/Component.js';
 import '../../../../skeleton/modern';
-import '../../index.module-d60c9f3f.js';
+import '../../index.module-b521f817.js';
 import '../primary-tablist/Component.mobile.js';
 import '../secondary-tablist/Component.desktop.js';
 import '../../../../tag/modern/desktop';
 import '../secondary-tablist/Component.js';
-import '../../index.module-ced12814.js';
+import '../../index.module-97cf1c4a.js';
 import '../secondary-tablist/Component.mobile.js';
 import '../../../../tag/modern/mobile';
 

package/tabs/modern/desktop/index.js

@@ -20,8 +20,8 @@ import '@alfalab/icons-glyph/ChevronRightCompactSIcon';
 import '../components/scroll-controls/utils.js';
 import '../components/title/Component.js';
 import '../../../skeleton/modern';
-import '../index.module-d60c9f3f.js';
+import '../index.module-b521f817.js';
 import '../../../tag/modern/desktop';
 import '../components/secondary-tablist/Component.js';
-import '../index.module-ced12814.js';
+import '../index.module-97cf1c4a.js';
 import '../components/tabs/Component.js';

package/tabs/modern/index.js

@@ -22,12 +22,12 @@ import '@alfalab/icons-glyph/ChevronRightCompactSIcon';
 import './components/scroll-controls/utils.js';
 import './components/title/Component.js';
 import '../../skeleton/modern';
-import './index.module-d60c9f3f.js';
+import './index.module-b521f817.js';
 import './components/primary-tablist/Component.mobile.js';
 import './components/secondary-tablist/Component.desktop.js';
 import '../../tag/modern/desktop';
 import './components/secondary-tablist/Component.js';
-import './index.module-ced12814.js';
+import './index.module-97cf1c4a.js';
 import './components/secondary-tablist/Component.mobile.js';
 import '../../tag/modern/mobile';
 import './components/tabs/Component.js';

package/tabs/modern/mobile/index.js

@@ -20,8 +20,8 @@ import '@alfalab/icons-glyph/ChevronRightCompactSIcon';
 import '../components/scroll-controls/utils.js';
 import '../components/title/Component.js';
 import '../../../skeleton/modern';
-import '../index.module-d60c9f3f.js';
+import '../index.module-b521f817.js';
 import '../../../tag/modern/mobile';
 import '../components/secondary-tablist/Component.js';
-import '../index.module-ced12814.js';
+import '../index.module-97cf1c4a.js';
 import '../components/tabs/Component.js';

package/themes/compiled/mobile-dark-bluetint.css

@@ -15,6 +15,12 @@
     background-color: transparent;
 } .backdrop__transparent_69ik8.backdrop__transparent_69ik8 {
     background-color: transparent;
+}.card-image__cardImage_142ei {
+    background: #e7e8ea;
+} .card-image__loaded_142ei {
+    background: transparent
+}.divider__component_bynr8 {
+    border-bottom: 1px solid #353539;
 }.badge__component_l0m0e.badge__background-accent_l0m0e {
         background-color: #f83a2a;
         color: rgba(255, 255, 255, 0.94);
@@ -75,25 +81,6 @@
         background-color: rgba(255, 255, 255, 0.94);
     } .badge__dot_l0m0e.badge__outlineCount_l0m0e {
     border: 1px solid rgba(3, 3, 6, 0.88);
-}.divider__component_bynr8 {
-    border-bottom: 1px solid #353539;
-}.card-image__cardImage_142ei {
-    background: #e7e8ea;
-} .card-image__loaded_142ei {
-    background: transparent
-}.dropzone__component_10f1d {
-    border: 1px dashed rgba(255, 255, 255, 0.94);
-} .dropzone__component_10f1d:not(.dropzone__disabled_10f1d):hover {
-    background-color: transparent;
-} .dropzone__dragOver_10f1d {
-    background-color: transparent;
-} .dropzone__error_10f1d {
-    border-color: #ff4837;
-}
-.dropzone__overlay_1t8h9 {
-    background: rgba(214, 214, 229, 0.07);
-} .dropzone__text_1t8h9 {
-    color: rgba(255, 255, 255, 0.94);
 }.hatching-progress-bar__container_oz45l {
     background: rgba(222, 222, 238, 0.13);
 } .hatching-progress-bar__hatch_oz45l {
@@ -118,7 +105,20 @@
         background: rgba(255, 255, 255, 0.94);
     } .hatching-progress-bar__accent_oz45l {
         background: #f83a2a;
-    }@media (max-width: 599px) {
+    }.dropzone__component_10f1d {
+    border: 1px dashed rgba(255, 255, 255, 0.94);
+} .dropzone__component_10f1d:not(.dropzone__disabled_10f1d):hover {
+    background-color: transparent;
+} .dropzone__dragOver_10f1d {
+    background-color: transparent;
+} .dropzone__error_10f1d {
+    border-color: #ff4837;
+}
+.dropzone__overlay_1t8h9 {
+    background: rgba(214, 214, 229, 0.07);
+} .dropzone__text_1t8h9 {
+    color: rgba(255, 255, 255, 0.94);
+}@media (max-width: 599px) {
     }
 @media (min-width: 320px) {
     }
@@ -456,4 +456,143 @@
     } .status__muted_adfwn.status__purple_adfwn {
         background: #eeedff;
         color: #7a63f1;
+    }.underlay__background-accent_7lom9 {
+            background-color: #ef3124;
+        } .underlay__background-info_7lom9 {
+            background-color: #001c3c;
+        } .underlay__background-attention-muted_7lom9 {
+            background-color: #36291f;
+        } .underlay__background-positive-muted_7lom9 {
+            background-color: #232d25;
+        } .underlay__background-negative-muted_7lom9 {
+            background-color: #392523;
+        } .underlay__background-primary_7lom9 {
+            background-color: #121213;
+        } .underlay__background-primary-inverted_7lom9 {
+            background-color: #fff;
+        } .underlay__background-secondary_7lom9 {
+            background-color: #1c1c1e;
+        } .underlay__background-secondary-inverted_7lom9 {
+            background-color: #f2f3f5;
+        } .underlay__background-tertiary_7lom9 {
+            background-color: #27272a;
+        } .underlay__background-tertiary-inverted_7lom9 {
+            background-color: #e7e8ea;
+        } .underlay__background-quaternary_7lom9 {
+            background-color: #36363a;
+        } .underlay__background-quaternary-inverted_7lom9 {
+            background-color: #dcdee2;
+        } .underlay__background-specialbg-component_7lom9 {
+            background-color: rgba(255, 255, 255, 0.1);
+        } .underlay__background-specialbg-component-inverted_7lom9 {
+            background-color: rgba(11, 31, 53, 0.07);
+        } .underlay__background-specialbg-primary-grouped_7lom9 {
+            background-color: #1c1c1e;
+        } .underlay__background-specialbg-secondary-grouped_7lom9 {
+            background-color: #27272a;
+        } .underlay__background-specialbg-tertiary-grouped_7lom9 {
+            background-color: #36363a;
+        } .underlay__background-specialbg-secondary-transparent_7lom9 {
+            background-color: rgba(214, 214, 229, 0.07);
+        } .underlay__background-specialbg-secondary-transparent-inverted_7lom9 {
+            background-color: rgba(38, 55, 88, 0.06);
+        } .underlay__background-specialbg-tertiary-transparent_7lom9 {
+            background-color: rgba(222, 222, 240, 0.12);
+        } .underlay__background-specialbg-tertiary-transparent-inverted_7lom9 {
+            background-color: rgba(30, 43, 68, 0.08);
+        } .underlay__shadow-xs_7lom9 {
+        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.04), 0 0 1px rgba(0, 0, 0, 0.04);
+    } .underlay__shadow-s_7lom9 {
+        box-shadow: 0 12px 16px rgba(0, 0, 0, 0.04), 0 4px 8px rgba(0, 0, 0, 0.04),
+        0 0 1px rgba(0, 0, 0, 0.04);
+    } .underlay__shadow-m_7lom9 {
+        box-shadow: 0 20px 24px rgba(0, 0, 0, 0.08), 0 12px 16px rgba(0, 0, 0, 0.04),
+        0 4px 8px rgba(0, 0, 0, 0.04), 0 0 1px rgba(0, 0, 0, 0.04);
+    } .underlay__shadow-l_7lom9 {
+        box-shadow: 0 24px 32px rgba(0, 0, 0, 0.08), 0 20px 24px rgba(0, 0, 0, 0.08),
+        0 12px 16px rgba(0, 0, 0, 0.04), 0 4px 8px rgba(0, 0, 0, 0.04), 0 0 1px rgba(0, 0, 0, 0.04);
+    } .underlay__shadow-xl_7lom9 {
+        box-shadow: 0 32px 40px rgba(0, 0, 0, 0.08), 0 24px 32px rgba(0, 0, 0, 0.08),
+        0 20px 24px rgba(0, 0, 0, 0.08), 0 12px 16px rgba(0, 0, 0, 0.04),
+        0 4px 8px rgba(0, 0, 0, 0.04), 0 0 1px rgba(0, 0, 0, 0.04);
+    } .underlay__shadow-xs-hard_7lom9 {
+        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.16), 0 0 1px rgba(0, 0, 0, 0.16);
+    } .underlay__shadow-s-hard_7lom9 {
+        box-shadow: 0 12px 16px rgba(0, 0, 0, 0.16), 0 4px 8px rgba(0, 0, 0, 0.16),
+        0 0 1px rgba(0, 0, 0, 0.16);
+    } .underlay__shadow-m-hard_7lom9 {
+        box-shadow: 0 20px 24px rgba(0, 0, 0, 0.2), 0 12px 16px rgba(0, 0, 0, 0.16),
+        0 4px 8px rgba(0, 0, 0, 0.16), 0 0 1px rgba(0, 0, 0, 0.16);
+    } .underlay__shadow-l-hard_7lom9 {
+        box-shadow: 0 24px 32px rgba(0, 0, 0, 0.2), 0 20px 24px rgba(0, 0, 0, 0.2),
+        0 12px 16px rgba(0, 0, 0, 0.16), 0 4px 8px rgba(0, 0, 0, 0.16), 0 0 1px rgba(0, 0, 0, 0.16);
+    } .underlay__shadow-xl-hard_7lom9 {
+        box-shadow: 0 32px 40px rgba(0, 0, 0, 0.2), 0 24px 32px rgba(0, 0, 0, 0.2),
+        0 20px 24px rgba(0, 0, 0, 0.2), 0 12px 16px rgba(0, 0, 0, 0.16),
+        0 4px 8px rgba(0, 0, 0, 0.16), 0 0 1px rgba(0, 0, 0, 0.16);
+    } .underlay__shadow-xs-up_7lom9 {
+        box-shadow: 0 0 4px rgba(0, 0, 0, 0.02), 0 -2px 4px rgba(0, 0, 0, 0.04);
+    } .underlay__shadow-s-up_7lom9 {
+        box-shadow: 0 0 8px rgba(0, 0, 0, 0.04), 0 -4px 8px rgba(0, 0, 0, 0.08);
+    } .underlay__shadow-m-up_7lom9 {
+        box-shadow: 0 0 16px rgba(0, 0, 0, 0.08), 0 -8px 16px rgba(0, 0, 0, 0.16);
+    } .underlay__shadow-l-up_7lom9 {
+        box-shadow: 0 0 24px rgba(0, 0, 0, 0.12), 0 -12px 24px rgba(0, 0, 0, 0.24);
+    } .underlay__shadow-xl-up_7lom9 {
+        box-shadow: 0 0 32px rgba(0, 0, 0, 0.16), 0 -16px 32px rgba(0, 0, 0, 0.32);
+    } .underlay__shadow-xs-hard-up_7lom9 {
+        box-shadow: 0 0 4px rgba(0, 0, 0, 0.02), 0 -2px 4px rgba(0, 0, 0, 0.04),
+        0 -2px 4px rgba(0, 0, 0, 0.16);
+    } .underlay__shadow-s-hard-up_7lom9 {
+        box-shadow: 0 0 8px rgba(0, 0, 0, 0.04), 0 -4px 8px rgba(0, 0, 0, 0.08),
+        0 -4px 8px rgba(0, 0, 0, 0.16);
+    } .underlay__shadow-m-hard-up_7lom9 {
+        box-shadow: 0 0 16px rgba(0, 0, 0, 0.08), 0 -8px 16px rgba(0, 0, 0, 0.16),
+        0 -8px 16px rgba(0, 0, 0, 0.16);
+    } .underlay__shadow-l-hard-up_7lom9 {
+        box-shadow: 0 0 24px rgba(0, 0, 0, 0.12), 0 -12px 24px rgba(0, 0, 0, 0.24),
+        0 -12px 24px rgba(0, 0, 0, 0.16);
+    } .underlay__shadow-xl-hard-up_7lom9 {
+        box-shadow: 0 0 32px rgba(0, 0, 0, 0.16), 0 -16px 32px rgba(0, 0, 0, 0.32),
+        0 -16px 32px rgba(0, 0, 0, 0.16);
+    } .underlay__border-color-accent_7lom9 {
+        border-color: #f83a2a;
+    } .underlay__border-color-key_7lom9 {
+        border-color: rgba(255, 255, 255, 0.94);
+    } .underlay__border-color-key-inverted_7lom9 {
+        border-color: rgba(3, 3, 6, 0.88);
+    } .underlay__border-color-link_7lom9 {
+        border-color: #3193fc;
+    } .underlay__border-color-primary_7lom9 {
+        border-color: #353539;
+    } .underlay__border-color-primary-inverted_7lom9 {
+        border-color: #d2d3d9;
+    } .underlay__border-color-secondary_7lom9 {
+        border-color: #29292c;
+    } .underlay__border-color-secondary-inverted_7lom9 {
+        border-color: #e7e8eb;
+    } .underlay__border-color-tertiary_7lom9 {
+        border-color: #212124;
+    } .underlay__border-color-tertiary-inverted_7lom9 {
+        border-color: #edeef0;
+    } .underlay__border-color-underline_7lom9 {
+        border-color: #4a4a51;
+    } .underlay__border-color-underline-inverted_7lom9 {
+        border-color: #babbc2;
+    } .underlay__border-color-graphic-attention_7lom9 {
+        border-color: #fda136;
+    } .underlay__border-color-graphic-link_7lom9 {
+        border-color: #3193fc;
+    } .underlay__border-color-graphic-negative_7lom9 {
+        border-color: #ff4837;
+    } .underlay__border-color-graphic-positive_7lom9 {
+        border-color: #17d055;
+    } .underlay__border-color-specialbg-secondary-transparent_7lom9 {
+        border-color: rgba(225, 225, 248, 0.09);
+    } .underlay__border-color-specialbg-secondary-transparent-inverted_7lom9 {
+        border-color: rgba(30, 43, 68, 0.08);
+    } .underlay__border-color-specialbg-tertiary-transparent_7lom9 {
+        border-color: rgba(222, 222, 238, 0.13);
+    } .underlay__border-color-specialbg-tertiary-transparent-inverted_7lom9 {
+        border-color: rgba(15, 25, 55, 0.1);
     }

package/typography/cssm/text/alfasans-index.module.css

@@ -22,112 +22,94 @@
     --font-family-alfasans: 'Alfa Interface Sans', system-ui, -apple-system, 'Segoe UI', Roboto,
         'Helvetica Neue', Helvetica, sans-serif;
 } /* @deprecated */ /* @deprecated */ /* @deprecated */ /* @deprecated */ /* @deprecated */ :root {
-} /* сбрасывает синюю подсветку при нажатии */ .text.primary-large {
-        font-size: 18px;
-        line-height: 24px;
-        font-weight: 400;
-        letter-spacing: -0.36px;
-        font-family: var(--font-family-alfasans);
-    } .text.primary-medium {
-        font-size: 16px;
-        line-height: 24px;
-        font-weight: 400;
-        letter-spacing: -0.24px;
-        font-family: var(--font-family-alfasans);
-    } .text.primary-small {
-        font-size: 14px;
-        line-height: 20px;
-        font-weight: 400;
-        letter-spacing: -0.08px;
-        font-family: var(--font-family-alfasans);
-    } .text.secondary-large {
-        font-size: 13px;
-        line-height: 16px;
-        font-weight: 400;
-        letter-spacing: 0;
-        font-family: var(--font-family-alfasans);
-    } .text.secondary-medium {
-        font-size: 12px;
-        line-height: 16px;
-        font-weight: 400;
-        letter-spacing: 0.06px;
-        font-family: var(--font-family-alfasans);
-    } .text.secondary-small {
-        font-size: 11px;
-        line-height: 16px;
-        font-weight: 400;
-        letter-spacing: 0.15px;
-        font-family: var(--font-family-alfasans);
-    } .text.component {
-        font-size: 16px;
-        line-height: 20px;
-        font-weight: 400;
-        letter-spacing: -0.24px;
-        font-family: var(--font-family-alfasans);
-    } .text.component-primary {
-        font-size: 16px;
-        line-height: 20px;
-        font-weight: 400;
-        letter-spacing: -0.24px;
-        font-family: var(--font-family-alfasans);
-    } .text.component-secondary {
-        font-size: 14px;
-        line-height: 18px;
-        font-weight: 400;
-        letter-spacing: -0.08px;
-        font-family: var(--font-family-alfasans);
-    } .text.caps {
-        font-size: 12px;
-        line-height: 16px;
-        font-weight: 400;
-        letter-spacing: 1.25px;
-        text-transform: uppercase;
-        font-family: var(--font-family-alfasans);
-    } .text.tagline {
-        font-size: 12px;
-        line-height: 16px;
-        font-weight: 400;
-        letter-spacing: 1.25px;
-        text-transform: uppercase;
-        font-family: var(--font-family-alfasans);
-    } .text.bold {
-        font-weight: 700
-    } .text.bold.primary-large {
-            letter-spacing: 0.38px; /* @mixin accent_primary_large */
-        } .text.bold.primary-medium {
-            letter-spacing: 0.43px; /* @mixin accent_primary_medium */
-        } .text.bold.primary-small {
-            letter-spacing: 0.47px; /* @mixin accent_primary_small */
-        } .text.bold.secondary-large {
-            letter-spacing: 0.54px; /* @mixin accent_secondary_large */
-        } .text.bold.secondary-medium {
-            letter-spacing: 0.57px; /* @mixin accent_secondary_medium */
-        } .text.bold.secondary-small {
-            letter-spacing: 0.54px; /* @mixin accent_secondary_small */
-        } .text.bold.component {
-            letter-spacing: 0.43px; /* @mixin accent_component */
-        } .text.bold.component-primary {
-            letter-spacing: 0.43px; /* @mixin accent_component_primary */
-        } .text.bold.component-secondary {
-            letter-spacing: 0.47px; /* @mixin accent_component_secondary */
+} /* сбрасывает синюю подсветку при нажатии */ .text.component {
+            font-size: 16px;
+            line-height: 20px;
+            font-weight: 400;
+            letter-spacing: -0.24px;
+            font-family: var(--font-family-alfasans);
+        } .text.caps {
+            font-size: 12px;
+            line-height: 16px;
+            font-weight: 400;
+            letter-spacing: 1.25px;
+            text-transform: uppercase;
+            font-family: var(--font-family-alfasans);
+        } .text.tagline {
+            font-size: 12px;
+            line-height: 16px;
+            font-weight: 400;
+            letter-spacing: 1.25px;
+            text-transform: uppercase;
+            font-family: var(--font-family-alfasans);
+        } .text.primary-large {
+                font-size: 18px;
+                line-height: 24px;
+                font-weight: 400;
+                letter-spacing: -0.36px;
+                font-family: var(--font-family-alfasans)
+            } .text.primary-large.bold {
+                } .text.primary-large.medium {
+                } .text.primary-medium {
+                font-size: 16px;
+                line-height: 24px;
+                font-weight: 400;
+                letter-spacing: -0.24px;
+                font-family: var(--font-family-alfasans)
+            } .text.primary-medium.bold {
+                } .text.primary-medium.medium {
+                } .text.primary-small {
+                font-size: 14px;
+                line-height: 20px;
+                font-weight: 400;
+                letter-spacing: -0.08px;
+                font-family: var(--font-family-alfasans)
+            } .text.primary-small.bold {
+                } .text.primary-small.medium {
+                } .text.component-primary {
+            font-size: 16px;
+            line-height: 20px;
+            font-weight: 400;
+            letter-spacing: -0.24px;
+            font-family: var(--font-family-alfasans)
+        } .text.component-primary.bold {
+            } .text.component-primary.medium {
+
+            } .text.secondary-large {
+                font-size: 13px;
+                line-height: 16px;
+                font-weight: 400;
+                letter-spacing: 0;
+                font-family: var(--font-family-alfasans)
+            } .text.secondary-large.bold {
+                } .text.secondary-large.medium {
+                } .text.secondary-medium {
+                font-size: 12px;
+                line-height: 16px;
+                font-weight: 400;
+                letter-spacing: 0.06px;
+                font-family: var(--font-family-alfasans)
+            } .text.secondary-medium.bold {
+                } .text.secondary-medium.medium {
+                } .text.secondary-small {
+                font-size: 11px;
+                line-height: 16px;
+                font-weight: 400;
+                letter-spacing: 0.15px;
+                font-family: var(--font-family-alfasans)
+            } .text.secondary-small.bold {
+                } .text.secondary-small.medium {
+                } .text.component-secondary {
+            font-size: 14px;
+            line-height: 18px;
+            font-weight: 400;
+            letter-spacing: -0.08px;
+            font-family: var(--font-family-alfasans)
+        } .text.component-secondary.bold {
+            } .text.component-secondary.medium {
+
+            } .text.bold {
+            font-weight: 700;
         } .text.medium {
-        font-weight: 500
-    } .text.medium.primary-large {
-            letter-spacing: 0.17px; /* @mixin action_primary_large */
-        } .text.medium.primary-medium {
-            letter-spacing: 0.17px; /* @mixin action_primary_medium */
-        } .text.medium.primary-small {
-            letter-spacing: 0.27px; /* @mixin action_primary_small */
-        } .text.medium.secondary-large {
-            letter-spacing: 0.33px; /* @mixin action_secondary_large */
-        } .text.medium.secondary-medium {
-            letter-spacing: 0.38px; /* @mixin action_secondary_medium */
-        } .text.medium.secondary-small {
-            letter-spacing: 0.41px; /* @mixin action_secondary_small */
-        } .text.medium.component {
-            letter-spacing: 0.17px; /* @mixin action_component */
-        } .text.medium.component-primary {
-            letter-spacing: 0.17px; /* @mixin action_component_primary */
-        } .text.medium.component-secondary {
-            letter-spacing: 0.27px; /* @mixin action_component_secondary */
+            font-weight: 500;
         }

package/typography/cssm/title/alfasans-index.module.css

@@ -23,33 +23,38 @@
         'Helvetica Neue', Helvetica, sans-serif;
 } /* @deprecated */ /* @deprecated */ /* @deprecated */ /* @deprecated */ /* @deprecated */ :root {
 } /* сбрасывает синюю подсветку при нажатии */ .alfasans-xlarge {
-    font-size: 48px;
-    line-height: 64px;
-    font-weight: 700;
-    letter-spacing: 0.1px;
-    font-family: var(--font-family-alfasans);
-} .alfasans-large {
-    font-size: 40px;
-    line-height: 48px;
-    font-weight: 700;
-    letter-spacing: 0.1px;
-    font-family: var(--font-family-alfasans);
-} .alfasans-medium {
-    font-size: 32px;
-    line-height: 40px;
-    font-weight: 700;
-    letter-spacing: 0.3px;
-    font-family: var(--font-family-alfasans);
-} .alfasans-small {
-    font-size: 24px;
-    line-height: 32px;
-    font-weight: 700;
-    letter-spacing: 0.39px;
-    font-family: var(--font-family-alfasans);
-} .alfasans-xsmall {
-    font-size: 20px;
-    line-height: 24px;
-    font-weight: 700;
-    letter-spacing: 0.39px;
-    font-family: var(--font-family-alfasans);
-}
+        font-size: 48px;
+        line-height: 64px;
+        font-weight: 700;
+        letter-spacing: 0.1px;
+        font-family: var(--font-family-alfasans)
+    } .alfasans-xlarge.systemCompat {
+        } .alfasans-large {
+        font-size: 40px;
+        line-height: 48px;
+        font-weight: 700;
+        letter-spacing: 0.1px;
+        font-family: var(--font-family-alfasans)
+    } .alfasans-large.systemCompat {
+        } .alfasans-medium {
+        font-size: 32px;
+        line-height: 40px;
+        font-weight: 700;
+        letter-spacing: 0.3px;
+        font-family: var(--font-family-alfasans)
+    } .alfasans-medium.systemCompat {
+        } .alfasans-small {
+        font-size: 24px;
+        line-height: 32px;
+        font-weight: 700;
+        letter-spacing: 0.39px;
+        font-family: var(--font-family-alfasans)
+    } .alfasans-small.systemCompat {
+        } .alfasans-xsmall {
+        font-size: 20px;
+        line-height: 24px;
+        font-weight: 700;
+        letter-spacing: 0.39px;
+        font-family: var(--font-family-alfasans)
+    } .alfasans-xsmall.systemCompat {
+        }

package/typography/cssm/title/component.d.ts

@@ -24,7 +24,10 @@ type TitleProps = Omit<NativeProps, 'color'> & {
     /**
      * Шрифт текста
      */
-    font?: 'styrene' | 'system' | 'alfasans';
+    font?: 'styrene' | 'system' | 'alfasans' | {
+        font: 'alfasans';
+        systemCompat: boolean;
+    };
     /**
      * Добавляет отступы
      */
@@ -85,7 +88,10 @@ declare const TitleBase: React.ForwardRefExoticComponent<Omit<NativeProps, "colo
     /**
      * Шрифт текста
      */
-    font?: "alfasans" | "styrene" | "system" | undefined;
+    font?: "alfasans" | "styrene" | "system" | {
+        font: 'alfasans';
+        systemCompat: boolean;
+    } | undefined;
     /**
      * Добавляет отступы
      */

package/typography/cssm/title/component.js

@@ -4,6 +4,7 @@ var tslib = require('tslib');
 var React = require('react');
 var mergeRefs = require('react-merge-refs');
 var cn = require('classnames');
+var coreComponentsShared = require('../../../shared/cssm');
 var hooks_useSkeleton = require('../hooks/use-skeleton.js');
 var title_utils = require('./utils.js');
 var colors = require('../colors.module.css');
@@ -17,7 +18,7 @@ var colors__default = /*#__PURE__*/_interopDefaultCompat(colors);
 
 var TitleBase = React.forwardRef(function (_a, ref) {
     var _b;
-    var _c = _a.tag, Component = _c === void 0 ? 'div' : _c, _d = _a.view, view = _d === void 0 ? 'medium' : _d, _e = _a.font, font = _e === void 0 ? 'styrene' : _e, platform = _a.platform, _f = _a.weight, weight = _f === void 0 ? title_utils.getDefaultWeight(font, platform) : _f, _g = _a.defaultMargins, defaultMargins = _g === void 0 ? false : _g, color = _a.color, className = _a.className, dataTestId = _a.dataTestId, children = _a.children, rowLimit = _a.rowLimit, styles = _a.styles, skeletonProps = _a.skeletonProps, showSkeleton = _a.showSkeleton, restProps = tslib.__rest(_a, ["tag", "view", "font", "platform", "weight", "defaultMargins", "color", "className", "dataTestId", "children", "rowLimit", "styles", "skeletonProps", "showSkeleton"]);
+    var _c = _a.tag, Component = _c === void 0 ? 'div' : _c, _d = _a.view, view = _d === void 0 ? 'medium' : _d, _e = _a.font, fontProp = _e === void 0 ? 'styrene' : _e, platform = _a.platform, _f = _a.weight, weight = _f === void 0 ? title_utils.getDefaultWeight(coreComponentsShared.isObject(fontProp) ? fontProp.font : fontProp, platform) : _f, _g = _a.defaultMargins, defaultMargins = _g === void 0 ? false : _g, color = _a.color, className = _a.className, dataTestId = _a.dataTestId, children = _a.children, rowLimit = _a.rowLimit, styles = _a.styles, skeletonProps = _a.skeletonProps, showSkeleton = _a.showSkeleton, restProps = tslib.__rest(_a, ["tag", "view", "font", "platform", "weight", "defaultMargins", "color", "className", "dataTestId", "children", "rowLimit", "styles", "skeletonProps", "showSkeleton"]);
     var _h = hooks_useSkeleton.useSkeleton(showSkeleton, skeletonProps), renderSkeleton = _h.renderSkeleton, textRef = _h.textRef;
     var skeleton = renderSkeleton({
         wrapperClassName: cn__default.default(defaultMargins && styles["margins-".concat(view)]),
@@ -26,9 +27,19 @@ var TitleBase = React.forwardRef(function (_a, ref) {
     if (skeleton) {
         return skeleton;
     }
+    var font;
+    var systemCompat;
+    if (coreComponentsShared.isObject(fontProp)) {
+        font = fontProp.font;
+        systemCompat = fontProp.systemCompat;
+    }
+    else {
+        font = fontProp;
+    }
     return (React__default.default.createElement(Component, tslib.__assign({ className: cn__default.default(styles.component, className, styles["".concat(font, "-").concat(view)], defaultMargins && styles["margins-".concat(view)], styles[weight], color && colors__default.default[color], (_b = {},
             _b[styles["rowLimit".concat(rowLimit)]] = rowLimit,
             _b[styles.transparent] = showSkeleton,
+            _b[styles.systemCompat] = systemCompat,
             _b)), "data-test-id": dataTestId, ref: mergeRefs__default.default([ref, textRef]) }, restProps), children));
 });