@alfalab/core-components-typography 4.8.0 → 4.10.0

package/modern/title/index.css

@@ -1,4 +1,4 @@
-/* hash: 4uby2 */
+/* hash: 1f822 */
 :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
 } /* deprecated */ :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
 } :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
@@ -10,7 +10,9 @@
     /* Up */
 
     /* Hard up */
-} :root {
+} :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
+
+    /* новые значения, используйте их */
 } :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
     --gap-m: 16px; /* deprecated */ /* deprecated */
     --gap-xl: 24px; /* deprecated */ /* deprecated */
@@ -18,68 +20,72 @@
     --gap-4xl: 48px; /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
 
     /* новые значения, используйте их */
+    --gap-16: var(--gap-m);
+    --gap-24: var(--gap-xl);
+    --gap-40: var(--gap-3xl);
+    --gap-48: var(--gap-4xl);
 } :root {
     --font-family-styrene: 'Styrene UI', system-ui, -apple-system, 'Segoe UI', Roboto,
         'Helvetica Neue', Helvetica, sans-serif;
 } :root {
-} .typography__styrene-xlarge_16vxq {
+} .typography__styrene-xlarge_1pe64 {
     font-size: 48px;
     line-height: 64px;
     font-weight: 500;
     font-feature-settings: 'ss01';
     font-family: var(--font-family-styrene);
-} .typography__styrene-large_16vxq {
+} .typography__styrene-large_1pe64 {
     font-size: 40px;
     line-height: 48px;
     font-weight: 500;
     font-feature-settings: 'ss01';
     font-family: var(--font-family-styrene);
-} .typography__styrene-medium_16vxq {
+} .typography__styrene-medium_1pe64 {
     font-size: 32px;
     line-height: 40px;
     font-weight: 500;
     font-feature-settings: 'ss01';
     font-family: var(--font-family-styrene);
-} .typography__styrene-small_16vxq {
+} .typography__styrene-small_1pe64 {
     font-size: 24px;
     line-height: 32px;
     font-weight: 500;
     font-feature-settings: 'ss01';
     font-family: var(--font-family-styrene);
-} .typography__styrene-xsmall_16vxq {
+} .typography__styrene-xsmall_1pe64 {
     font-size: 20px;
     line-height: 24px;
     font-weight: 500;
     font-feature-settings: 'ss01';
     font-family: var(--font-family-styrene);
-} .typography__system-xlarge_16vxq {
+} .typography__system-xlarge_1pe64 {
     font-size: 48px;
     line-height: 52px;
     font-weight: 700;
-} .typography__system-large_16vxq {
+} .typography__system-large_1pe64 {
     font-size: 40px;
     line-height: 48px;
     font-weight: 700;
-} .typography__system-medium_16vxq {
+} .typography__system-medium_1pe64 {
     font-size: 30px;
     line-height: 36px;
     font-weight: 700;
-} .typography__system-small_16vxq {
+} .typography__system-small_1pe64 {
     font-size: 22px;
     line-height: 26px;
     font-weight: 700;
-} .typography__system-xsmall_16vxq {
+} .typography__system-xsmall_1pe64 {
     font-size: 18px;
     line-height: 22px;
     font-weight: 700;
-} .typography__margins-xlarge_16vxq {
-    margin: 0 0 var(--gap-xl);
-} .typography__margins-large_16vxq {
-    margin: var(--gap-4xl) 0 var(--gap-xl);
-} .typography__margins-medium_16vxq {
-    margin: var(--gap-4xl) 0 var(--gap-xl);
-} .typography__margins-small_16vxq {
-    margin: var(--gap-3xl) 0 var(--gap-m);
-} .typography__margins-xsmall_16vxq {
-    margin: var(--gap-3xl) 0 var(--gap-m);
+} .typography__margins-xlarge_1pe64 {
+    margin: 0 0 var(--gap-24);
+} .typography__margins-large_1pe64 {
+    margin: var(--gap-48) 0 var(--gap-24);
+} .typography__margins-medium_1pe64 {
+    margin: var(--gap-48) 0 var(--gap-24);
+} .typography__margins-small_1pe64 {
+    margin: var(--gap-40) 0 var(--gap-16);
+} .typography__margins-xsmall_1pe64 {
+    margin: var(--gap-40) 0 var(--gap-16);
 }

package/modern/title/index.js

@@ -1,8 +1,8 @@
 import React, { forwardRef } from 'react';
 import { TitleBase } from './component.js';
-import { c as commonStyles } from '../common.module-38c9e9b8.js';
+import { c as commonStyles } from '../common.module-67cdcc8d.js';
 
-const styles = {"styrene-xlarge":"typography__styrene-xlarge_16vxq","styrene-large":"typography__styrene-large_16vxq","styrene-medium":"typography__styrene-medium_16vxq","styrene-small":"typography__styrene-small_16vxq","styrene-xsmall":"typography__styrene-xsmall_16vxq","system-xlarge":"typography__system-xlarge_16vxq","system-large":"typography__system-large_16vxq","system-medium":"typography__system-medium_16vxq","system-small":"typography__system-small_16vxq","system-xsmall":"typography__system-xsmall_16vxq","margins-xlarge":"typography__margins-xlarge_16vxq","margins-large":"typography__margins-large_16vxq","margins-medium":"typography__margins-medium_16vxq","margins-small":"typography__margins-small_16vxq","margins-xsmall":"typography__margins-xsmall_16vxq"};
+const styles = {"styrene-xlarge":"typography__styrene-xlarge_1pe64","styrene-large":"typography__styrene-large_1pe64","styrene-medium":"typography__styrene-medium_1pe64","styrene-small":"typography__styrene-small_1pe64","styrene-xsmall":"typography__styrene-xsmall_1pe64","system-xlarge":"typography__system-xlarge_1pe64","system-large":"typography__system-large_1pe64","system-medium":"typography__system-medium_1pe64","system-small":"typography__system-small_1pe64","system-xsmall":"typography__system-xsmall_1pe64","margins-xlarge":"typography__margins-xlarge_1pe64","margins-large":"typography__margins-large_1pe64","margins-medium":"typography__margins-medium_1pe64","margins-small":"typography__margins-small_1pe64","margins-xsmall":"typography__margins-xsmall_1pe64"};
 require('./index.css')
 
 const Title = forwardRef((props, ref) => (React.createElement(TitleBase, { ...props, styles: Object.assign(commonStyles, styles), ref: ref, platform: 'desktop' })));

package/modern/title-mobile/component.d.ts

@@ -1,7 +1,5 @@
 /// <reference types="react" />
 import React from 'react';
-import { TitleProps } from "../title/component";
-type TitleMobileProps = Omit<TitleProps, 'defaultMargins'>;
 declare const TitleMobile: React.ForwardRefExoticComponent<Omit<React.HTMLAttributes<HTMLHeadingElement>, "color"> & {
     tag: "div" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
     view?: "small" | "medium" | "xlarge" | "large" | "xsmall" | undefined;
@@ -17,4 +15,4 @@ declare const TitleMobile: React.ForwardRefExoticComponent<Omit<React.HTMLAttrib
     skeletonProps?: import("../types").TextSkeletonProps | undefined;
     defaultMatchMediaValue?: boolean | (() => boolean) | undefined;
 } & React.RefAttributes<HTMLDivElement | HTMLHeadingElement>>;
-export { TitleMobileProps, TitleMobile };
+export { TitleMobile };

package/modern/title-mobile/component.js

@@ -1,8 +1,8 @@
 import React, { forwardRef } from 'react';
 import { TitleBase } from '../title/component.js';
-import { c as commonStyles } from '../common.module-38c9e9b8.js';
+import { c as commonStyles } from '../common.module-67cdcc8d.js';
 
-const styles = {"styrene-xlarge":"typography__styrene-xlarge_suif4","styrene-large":"typography__styrene-large_suif4","styrene-medium":"typography__styrene-medium_suif4","styrene-small":"typography__styrene-small_suif4","styrene-xsmall":"typography__styrene-xsmall_suif4","system-xlarge":"typography__system-xlarge_suif4","system-large":"typography__system-large_suif4","system-medium":"typography__system-medium_suif4","system-small":"typography__system-small_suif4","system-xsmall":"typography__system-xsmall_suif4"};
+const styles = {"styrene-xlarge":"typography__styrene-xlarge_6dq2l","styrene-large":"typography__styrene-large_6dq2l","styrene-medium":"typography__styrene-medium_6dq2l","styrene-small":"typography__styrene-small_6dq2l","styrene-xsmall":"typography__styrene-xsmall_6dq2l","system-xlarge":"typography__system-xlarge_6dq2l","system-large":"typography__system-large_6dq2l","system-medium":"typography__system-medium_6dq2l","system-small":"typography__system-small_6dq2l","system-xsmall":"typography__system-xsmall_6dq2l","margins-xlarge":"typography__margins-xlarge_6dq2l","margins-large":"typography__margins-large_6dq2l","margins-medium":"typography__margins-medium_6dq2l","margins-small":"typography__margins-small_6dq2l","margins-xsmall":"typography__margins-xsmall_6dq2l"};
 require('./index.css')
 
 const TitleMobile = forwardRef((props, ref) => (React.createElement(TitleBase, { ...props, styles: Object.assign(commonStyles, styles), ref: ref, platform: 'mobile' })));

package/modern/title-mobile/index.css

@@ -1,4 +1,4 @@
-/* hash: wl9na */
+/* hash: sk9na */
 :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
 } /* deprecated */ :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
 } :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
@@ -10,62 +10,80 @@
     /* Up */
 
     /* Hard up */
-} :root {
-} :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
+} :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
+
+    /* новые значения, используйте их */
+} :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
+    --gap-m: 16px; /* deprecated */ /* deprecated */
+    --gap-xl: 24px; /* deprecated */ /* deprecated */
+    --gap-3xl: 40px; /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
 
     /* новые значения, используйте их */
+    --gap-16: var(--gap-m);
+    --gap-24: var(--gap-xl);
+    --gap-40: var(--gap-3xl);
 } :root {
     --font-family-styrene: 'Styrene UI', system-ui, -apple-system, 'Segoe UI', Roboto,
         'Helvetica Neue', Helvetica, sans-serif;
 } :root {
-} .typography__styrene-xlarge_suif4 {
+} .typography__styrene-xlarge_6dq2l {
     font-size: 34px;
     line-height: 40px;
     font-weight: 500;
     font-feature-settings: 'ss01';
     font-family: var(--font-family-styrene);
-} .typography__styrene-large_suif4 {
+} .typography__styrene-large_6dq2l {
     font-size: 30px;
     line-height: 36px;
     font-weight: 500;
     font-feature-settings: 'ss01';
     font-family: var(--font-family-styrene);
-} .typography__styrene-medium_suif4 {
+} .typography__styrene-medium_6dq2l {
     font-size: 26px;
     line-height: 32px;
     font-weight: 500;
     font-feature-settings: 'ss01';
     font-family: var(--font-family-styrene);
-} .typography__styrene-small_suif4 {
+} .typography__styrene-small_6dq2l {
     font-size: 20px;
     line-height: 28px;
     font-weight: 500;
     font-feature-settings: 'ss01';
     font-family: var(--font-family-styrene);
-} .typography__styrene-xsmall_suif4 {
+} .typography__styrene-xsmall_6dq2l {
     font-size: 16px;
     line-height: 20px;
     font-weight: 500;
     font-feature-settings: 'ss01';
     font-family: var(--font-family-styrene);
-} .typography__system-xlarge_suif4 {
+} .typography__system-xlarge_6dq2l {
     font-size: 34px;
     line-height: 40px;
     font-weight: 600;
-} .typography__system-large_suif4 {
+} .typography__system-large_6dq2l {
     font-size: 30px;
     line-height: 36px;
     font-weight: 600;
-} .typography__system-medium_suif4 {
+} .typography__system-medium_6dq2l {
     font-size: 26px;
     line-height: 32px;
     font-weight: 600;
-} .typography__system-small_suif4 {
+} .typography__system-small_6dq2l {
     font-size: 20px;
     line-height: 28px;
     font-weight: 600;
-} .typography__system-xsmall_suif4 {
+} .typography__system-xsmall_6dq2l {
     font-size: 16px;
     line-height: 20px;
     font-weight: 600;
+} .typography__margins-xlarge_6dq2l {
+    margin: 0 0 var(--gap-24);
+} .typography__margins-large_6dq2l {
+    margin: var(--gap-40) 0 var(--gap-16);
+} .typography__margins-medium_6dq2l {
+    margin: var(--gap-40) 0 var(--gap-16);
+} .typography__margins-small_6dq2l {
+    margin: var(--gap-40) 0 var(--gap-16);
+} .typography__margins-xsmall_6dq2l {
+    margin: var(--gap-40) 0 var(--gap-16);
 }

package/modern/title-mobile/index.d.ts

@@ -1 +1,2 @@
-export * from "./component";
+export { TitleMobile } from "./component";
+export type { TitleProps as TitleMobileProps } from "../title/component";

package/modern/title-responsive/component.d.ts

@@ -1,5 +1,13 @@
 /// <reference types="react" />
 import React from 'react';
+import { TitleProps } from "../title/index";
+type TitleResponsiveProps = TitleProps & {
+    /**
+     * Контрольная точка, с нее начинается desktop версия
+     * @default 1024
+     */
+    breakpoint?: number;
+};
 declare const TitleResponsive: React.ForwardRefExoticComponent<Omit<React.HTMLAttributes<HTMLHeadingElement>, "color"> & {
     tag: "div" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
     view?: "small" | "medium" | "xlarge" | "large" | "xsmall" | undefined;
@@ -14,5 +22,11 @@ declare const TitleResponsive: React.ForwardRefExoticComponent<Omit<React.HTMLAt
     showSkeleton?: boolean | undefined;
     skeletonProps?: import("../types").TextSkeletonProps | undefined;
     defaultMatchMediaValue?: boolean | (() => boolean) | undefined;
+} & {
+    /**
+     * Контрольная точка, с нее начинается desktop версия
+     * @default 1024
+     */
+    breakpoint?: number | undefined;
 } & React.RefAttributes<HTMLDivElement | HTMLHeadingElement>>;
-export { TitleResponsive };
+export { TitleResponsiveProps, TitleResponsive };

package/modern/title-responsive/component.js

@@ -1,15 +1,13 @@
 import React, { forwardRef } from 'react';
 import { useMatchMedia } from '@alfalab/core-components-mq/modern';
-import { TitleBase } from '../title/component.js';
-import { c as commonStyles } from '../common.module-38c9e9b8.js';
+import { Title } from '../title/index.js';
+import { TitleMobile } from '../title-mobile/component.js';
 
-const styles = {"styrene-xlarge":"typography__styrene-xlarge_1ck99","styrene-large":"typography__styrene-large_1ck99","styrene-medium":"typography__styrene-medium_1ck99","styrene-small":"typography__styrene-small_1ck99","styrene-xsmall":"typography__styrene-xsmall_1ck99","system-xlarge":"typography__system-xlarge_1ck99","system-large":"typography__system-large_1ck99","system-medium":"typography__system-medium_1ck99","system-small":"typography__system-small_1ck99","system-xsmall":"typography__system-xsmall_1ck99","margins-xlarge":"typography__margins-xlarge_1ck99","margins-large":"typography__margins-large_1ck99","margins-medium":"typography__margins-medium_1ck99","margins-small":"typography__margins-small_1ck99","margins-xsmall":"typography__margins-xsmall_1ck99"};
-require('./index.css')
-
-const TitleResponsive = forwardRef((props, ref) => {
-    const { defaultMatchMediaValue } = props;
-    const [isDesktop] = useMatchMedia('(min-width: 1024px)', defaultMatchMediaValue);
-    return (React.createElement(TitleBase, { ...props, styles: Object.assign(commonStyles, styles), ref: ref, platform: isDesktop ? 'desktop' : 'mobile' }));
+const TitleResponsive = forwardRef(({ defaultMatchMediaValue, breakpoint = 1024, ...restProps }, ref) => {
+    const query = `(min-width: ${breakpoint}px)`;
+    const [isDesktop] = useMatchMedia(query, defaultMatchMediaValue);
+    const Component = isDesktop ? Title : TitleMobile;
+    return React.createElement(Component, { ...restProps, ref: ref });
 });
 
 export { TitleResponsive };

package/moderncssm/colors.d.ts

@@ -0,0 +1,3 @@
+declare const colors: readonly ["tertiary", "disabled", "accent", "primary", "attention", "positive", "secondary", "tertiary-inverted", "primary-inverted", "secondary-inverted", "link", "negative", "static-primary-light", "static-secondary-light", "static-tertiary-light", "static-primary-dark", "static-secondary-dark", "static-tertiary-dark", "static-accent"];
+type Color = typeof colors[number];
+export { colors, Color };

package/moderncssm/colors.js

@@ -0,0 +1,23 @@
+const colors = [
+    'tertiary',
+    'disabled',
+    'accent',
+    'primary',
+    'attention',
+    'positive',
+    'secondary',
+    'tertiary-inverted',
+    'primary-inverted',
+    'secondary-inverted',
+    'link',
+    'negative',
+    'static-primary-light',
+    'static-secondary-light',
+    'static-tertiary-light',
+    'static-primary-dark',
+    'static-secondary-dark',
+    'static-tertiary-dark',
+    'static-accent',
+];
+
+export { colors };

package/moderncssm/colors.module.css

@@ -0,0 +1,79 @@
+/* */
+
+/* colors */
+
+.tertiary {
+    color: var(--color-light-text-tertiary);
+}
+
+.disabled {
+    color: var(--color-light-text-quaternary);
+}
+
+.accent {
+    color: var(--color-light-accent-primary);
+}
+
+.primary {
+    color: var(--color-light-text-primary);
+}
+
+.attention {
+    color: var(--color-light-text-attention);
+}
+
+.positive {
+    color: var(--color-light-text-positive);
+}
+
+.secondary {
+    color: var(--color-light-text-secondary);
+}
+
+.tertiary-inverted {
+    color: var(--color-light-text-tertiary-inverted);
+}
+
+.primary-inverted {
+    color: var(--color-light-text-primary-inverted);
+}
+
+.secondary-inverted {
+    color: var(--color-light-text-secondary-inverted);
+}
+
+.link {
+    color: var(--color-light-text-info);
+}
+
+.negative {
+    color: var(--color-light-text-negative);
+}
+
+.static-primary-light {
+    color: var(--color-static-text-primary-light);
+}
+
+.static-secondary-light {
+    color: var(--color-static-text-secondary-light);
+}
+
+.static-tertiary-light {
+    color: var(--color-static-text-tertiary-light);
+}
+
+.static-primary-dark {
+    color: var(--color-static-text-primary-dark);
+}
+
+.static-secondary-dark {
+    color: var(--color-static-text-secondary-dark);
+}
+
+.static-tertiary-dark {
+    color: var(--color-static-text-tertiary-dark);
+}
+
+.static-accent {
+    color: var(--color-static-accent-primary);
+}

package/moderncssm/component.d.ts

@@ -0,0 +1,13 @@
+import { FC, ForwardRefExoticComponent, RefAttributes } from 'react';
+import { TextProps } from "./text/index";
+import { TitleProps } from "./title/index";
+import { TitleMobileProps } from "./title-mobile/index";
+import { TitleResponsiveProps } from "./title-responsive/index";
+import { TextElementType } from "./types";
+declare const Typography: {
+    Title: FC<TitleProps>;
+    Text: ForwardRefExoticComponent<TextProps & RefAttributes<TextElementType>>;
+    TitleResponsive: FC<TitleResponsiveProps>;
+    TitleMobile: FC<TitleMobileProps>;
+};
+export { Typography };

package/moderncssm/component.js

@@ -0,0 +1,13 @@
+import { Text } from './text/component.js';
+import { Title } from './title/index.js';
+import { TitleMobile } from './title-mobile/component.js';
+import { TitleResponsive } from './title-responsive/component.js';
+
+const Typography = {
+    Title,
+    Text,
+    TitleResponsive,
+    TitleMobile,
+};
+
+export { Typography };

package/moderncssm/hooks/index.d.ts

@@ -0,0 +1 @@
+export * from "./use-skeleton";

package/moderncssm/hooks/index.js

@@ -0,0 +1 @@
+export { useSkeleton } from './use-skeleton.js';

package/moderncssm/hooks/use-skeleton.d.ts

@@ -0,0 +1,12 @@
+/// <reference types="react" />
+import React from 'react';
+import { TextSkeletonProps } from "../types";
+type SkeletonProps = {
+    wrapperClassName?: string;
+    dataTestId?: string;
+};
+declare function useSkeleton(showSkeleton?: boolean, skeletonProps?: TextSkeletonProps): {
+    renderSkeleton: (props: SkeletonProps) => React.JSX.Element | null;
+    textRef: React.RefObject<HTMLElement>;
+};
+export { useSkeleton };

package/moderncssm/hooks/use-skeleton.js

@@ -0,0 +1,50 @@
+import React, { useState, useRef } from 'react';
+import cn from 'classnames';
+import { Skeleton } from '@alfalab/core-components-skeleton/moderncssm';
+import { useLayoutEffect_SAFE_FOR_SSR } from '@alfalab/hooks';
+import styles from './use-skeleton.module.css';
+
+function useSkeleton(showSkeleton, skeletonProps) {
+    const [skeletonParams, setSkeletonParams] = useState();
+    const textRef = useRef(null);
+    useLayoutEffect_SAFE_FOR_SSR(() => {
+        if (showSkeleton && textRef.current) {
+            const style = getComputedStyle(textRef.current);
+            const textHeight = textRef.current.offsetHeight;
+            const fontSize = parseInt(style.fontSize, 10);
+            const lineHeight = parseInt(style.lineHeight, 10);
+            const padding = (lineHeight - fontSize) % 2 === 0
+                ? (lineHeight - fontSize) / 2
+                : (lineHeight - fontSize - 1) / 2;
+            const rows = skeletonProps?.rows
+                ? skeletonProps?.rows
+                : Math.ceil(textHeight / lineHeight);
+            setSkeletonParams({
+                height: lineHeight - padding * 2,
+                padding: `${padding}px 0`,
+                rows,
+            });
+        }
+        else {
+            setSkeletonParams(undefined);
+        }
+    }, [showSkeleton, skeletonProps?.rows]);
+    const renderSkeleton = (props) => {
+        if (showSkeleton && skeletonParams) {
+            return (React.createElement("div", { className: cn(skeletonProps?.wrapperClassName, props.wrapperClassName, skeletonProps?.align && styles[skeletonProps.align]), "data-test-id": props.dataTestId }, [...Array(skeletonParams.rows)].map((_, idx) => {
+                const width = Array.isArray(skeletonProps?.width)
+                    ? skeletonProps?.width[idx]
+                    : skeletonProps?.width;
+                return (
+                // eslint-disable-next-line react/no-array-index-key
+                React.createElement("div", { key: idx, style: { width, padding: skeletonParams.padding } },
+                    React.createElement(Skeleton, { visible: true, className: styles.skeletonText },
+                        React.createElement("div", { style: { height: skeletonParams.height } }))));
+            })));
+        }
+        return null;
+    };
+    return { renderSkeleton, textRef };
+}
+
+export { useSkeleton };

package/moderncssm/hooks/use-skeleton.module.css

@@ -0,0 +1,17 @@
+/* */
+
+.skeletonText.skeletonText {
+    border-radius: var(--border-radius-pill);
+}
+
+.left > div {
+    margin-right: auto;
+}
+
+.center > div {
+    margin: 0 auto;
+}
+
+.right > div {
+    margin-left: auto;
+}

package/moderncssm/index.d.ts

@@ -0,0 +1,5 @@
+export * from "./component";
+export * from "./presets";
+export type { TitleProps } from "./title/index";
+export type { TextProps } from "./text/index";
+export type { Color } from "./colors";

package/moderncssm/index.js

@@ -0,0 +1,2 @@
+export { Typography } from './component.js';
+export { typographyPresets } from './presets.js';

package/moderncssm/margins.module.css

@@ -0,0 +1 @@
+