@alfalab/core-components-typography 4.2.1 → 4.4.0

package/colors.css

@@ -1,4 +1,4 @@
-/* hash: 1plsv */
+/* hash: 1l8lq */
 :root {
 } /* deprecated */ :root {
     --color-light-text-accent: #ef3124;
@@ -33,42 +33,42 @@
 } :root {
 } :root {
 } :root {
-} /* colors */ .typography__tertiary_1ds77 {
+} /* colors */ .typography__tertiary_y12u3 {
     color: var(--color-light-text-tertiary);
-} .typography__disabled_1ds77 {
+} .typography__disabled_y12u3 {
     color: var(--color-light-text-disabled);
-} .typography__accent_1ds77 {
+} .typography__accent_y12u3 {
     color: var(--color-light-text-accent);
-} .typography__primary_1ds77 {
+} .typography__primary_y12u3 {
     color: var(--color-light-text-primary);
-} .typography__attention_1ds77 {
+} .typography__attention_y12u3 {
     color: var(--color-light-text-attention);
-} .typography__positive_1ds77 {
+} .typography__positive_y12u3 {
     color: var(--color-light-text-positive);
-} .typography__secondary_1ds77 {
+} .typography__secondary_y12u3 {
     color: var(--color-light-text-secondary);
-} .typography__tertiary-inverted_1ds77 {
+} .typography__tertiary-inverted_y12u3 {
     color: var(--color-light-text-tertiary-inverted);
-} .typography__primary-inverted_1ds77 {
+} .typography__primary-inverted_y12u3 {
     color: var(--color-light-text-primary-inverted);
-} .typography__secondary-inverted_1ds77 {
+} .typography__secondary-inverted_y12u3 {
     color: var(--color-light-text-secondary-inverted);
-} .typography__link_1ds77 {
+} .typography__link_y12u3 {
     color: var(--color-light-text-link);
-} .typography__negative_1ds77 {
+} .typography__negative_y12u3 {
     color: var(--color-light-text-negative);
-} .typography__static-primary-light_1ds77 {
+} .typography__static-primary-light_y12u3 {
     color: var(--color-static-text-primary-light);
-} .typography__static-secondary-light_1ds77 {
+} .typography__static-secondary-light_y12u3 {
     color: var(--color-static-text-secondary-light);
-} .typography__static-tertiary-light_1ds77 {
+} .typography__static-tertiary-light_y12u3 {
     color: var(--color-static-text-tertiary-light);
-} .typography__static-primary-dark_1ds77 {
+} .typography__static-primary-dark_y12u3 {
     color: var(--color-static-text-primary-dark);
-} .typography__static-secondary-dark_1ds77 {
+} .typography__static-secondary-dark_y12u3 {
     color: var(--color-static-text-secondary-dark);
-} .typography__static-tertiary-dark_1ds77 {
+} .typography__static-tertiary-dark_y12u3 {
     color: var(--color-static-text-tertiary-dark);
-} .typography__static-accent_1ds77 {
+} .typography__static-accent_y12u3 {
     color: var(--color-static-text-accent);
 }

package/colors.module-120e4dd7.js

@@ -0,0 +1,6 @@
+'use strict';
+
+var colors = {"tertiary":"typography__tertiary_y12u3","disabled":"typography__disabled_y12u3","accent":"typography__accent_y12u3","primary":"typography__primary_y12u3","attention":"typography__attention_y12u3","positive":"typography__positive_y12u3","secondary":"typography__secondary_y12u3","tertiary-inverted":"typography__tertiary-inverted_y12u3","primary-inverted":"typography__primary-inverted_y12u3","secondary-inverted":"typography__secondary-inverted_y12u3","link":"typography__link_y12u3","negative":"typography__negative_y12u3","static-primary-light":"typography__static-primary-light_y12u3","static-secondary-light":"typography__static-secondary-light_y12u3","static-tertiary-light":"typography__static-tertiary-light_y12u3","static-primary-dark":"typography__static-primary-dark_y12u3","static-secondary-dark":"typography__static-secondary-dark_y12u3","static-tertiary-dark":"typography__static-tertiary-dark_y12u3","static-accent":"typography__static-accent_y12u3"};
+require('./colors.css')
+
+exports.colors = colors;

package/common.module-4389487a.js

@@ -0,0 +1,6 @@
+'use strict';
+
+var commonStyles = {"component":"typography__component_vlv7e","bold":"typography__bold_vlv7e","medium":"typography__medium_vlv7e","regular":"typography__regular_vlv7e"};
+require('./title/common.css')
+
+exports.commonStyles = commonStyles;

package/component.js

@@ -10,12 +10,12 @@ require('tslib');
 require('react');
 require('react-merge-refs');
 require('classnames');
-require('./hooks/useSkeleton.js');
+require('./hooks/use-skeleton.js');
 require('@alfalab/core-components-skeleton');
 require('@alfalab/hooks');
-require('./colors.module-4e4b7d12.js');
+require('./colors.module-120e4dd7.js');
 require('./title/component.js');
-require('./common.module-b3f0cfca.js');
+require('./common.module-4389487a.js');
 
 var Typography = {
     Title: title_index.Title,

package/cssm/component.js

@@ -10,7 +10,7 @@ require('tslib');
 require('react');
 require('react-merge-refs');
 require('classnames');
-require('./hooks/useSkeleton.js');
+require('./hooks/use-skeleton.js');
 require('@alfalab/core-components-skeleton/cssm');
 require('@alfalab/hooks');
 require('./hooks/use-skeleton.module.css');

package/cssm/hooks/index.d.ts

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

package/cssm/hooks/index.js

@@ -2,9 +2,10 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var hooks_useSkeleton = require('./useSkeleton.js');
+var hooks_useSkeleton = require('./use-skeleton.js');
 require('tslib');
 require('react');
+require('classnames');
 require('@alfalab/core-components-skeleton/cssm');
 require('@alfalab/hooks');
 require('./use-skeleton.module.css');

package/cssm/hooks/{useSkeleton.js → use-skeleton.js}

@@ -4,6 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var tslib = require('tslib');
 var React = require('react');
+var cn = require('classnames');
 var coreComponentsSkeleton = require('@alfalab/core-components-skeleton/cssm');
 var hooks = require('@alfalab/hooks');
 var styles = require('./use-skeleton.module.css');
@@ -11,6 +12,7 @@ var styles = require('./use-skeleton.module.css');
 function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
 
 var React__default = /*#__PURE__*/_interopDefaultCompat(React);
+var cn__default = /*#__PURE__*/_interopDefaultCompat(cn);
 var styles__default = /*#__PURE__*/_interopDefaultCompat(styles);
 
 function useSkeleton(showSkeleton, skeletonProps) {
@@ -40,7 +42,7 @@ function useSkeleton(showSkeleton, skeletonProps) {
     }, [showSkeleton, skeletonProps === null || skeletonProps === void 0 ? void 0 : skeletonProps.rows]);
     var renderSkeleton = function (props) {
         if (showSkeleton && skeletonParams) {
-            return (React__default.default.createElement("div", { className: props.wrapperClassName, "data-test-id": props.dataTestId }, tslib.__spreadArray([], Array(skeletonParams.rows), true).map(function (_, idx) {
+            return (React__default.default.createElement("div", { className: cn__default.default(skeletonProps === null || skeletonProps === void 0 ? void 0 : skeletonProps.wrapperClassName, props.wrapperClassName, (skeletonProps === null || skeletonProps === void 0 ? void 0 : skeletonProps.align) && styles__default.default[skeletonProps.align]), "data-test-id": props.dataTestId }, tslib.__spreadArray([], Array(skeletonParams.rows), true).map(function (_, idx) {
                 var width = Array.isArray(skeletonProps === null || skeletonProps === void 0 ? void 0 : skeletonProps.width)
                     ? skeletonProps === null || skeletonProps === void 0 ? void 0 : skeletonProps.width[idx]
                     : skeletonProps === null || skeletonProps === void 0 ? void 0 : skeletonProps.width;

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

@@ -16,4 +16,10 @@
 } :root {
 } .skeletonText.skeletonText {
     border-radius: var(--border-radius-pill);
+} .left > div {
+    margin-right: auto;
+} .center > div {
+    margin: 0 auto;
+} .right > div {
+    margin-left: auto;
 }

package/cssm/index.js

@@ -9,7 +9,7 @@ require('tslib');
 require('react');
 require('react-merge-refs');
 require('classnames');
-require('./hooks/useSkeleton.js');
+require('./hooks/use-skeleton.js');
 require('@alfalab/core-components-skeleton/cssm');
 require('@alfalab/hooks');
 require('./hooks/use-skeleton.module.css');

package/cssm/text/component.js

@@ -6,7 +6,7 @@ var tslib = require('tslib');
 var React = require('react');
 var mergeRefs = require('react-merge-refs');
 var cn = require('classnames');
-var hooks_useSkeleton = require('../hooks/useSkeleton.js');
+var hooks_useSkeleton = require('../hooks/use-skeleton.js');
 var colors = require('../colors.module.css');
 var styles = require('./index.module.css');
 require('@alfalab/core-components-skeleton/cssm');

package/cssm/text/index.js

@@ -7,7 +7,7 @@ require('tslib');
 require('react');
 require('react-merge-refs');
 require('classnames');
-require('../hooks/useSkeleton.js');
+require('../hooks/use-skeleton.js');
 require('@alfalab/core-components-skeleton/cssm');
 require('@alfalab/hooks');
 require('../hooks/use-skeleton.module.css');

package/cssm/title/component.js

@@ -6,7 +6,7 @@ var tslib = require('tslib');
 var React = require('react');
 var mergeRefs = require('react-merge-refs');
 var cn = require('classnames');
-var hooks_useSkeleton = require('../hooks/useSkeleton.js');
+var hooks_useSkeleton = require('../hooks/use-skeleton.js');
 var colors = require('../colors.module.css');
 require('@alfalab/core-components-skeleton/cssm');
 require('@alfalab/hooks');

package/cssm/title/index.d.ts

@@ -1,5 +1,19 @@
-import { FC } from 'react';
+/// <reference types="react" />
+import React from 'react';
 import { TitleProps } from "./component";
-declare const Title: FC<TitleProps>;
+declare const Title: React.ForwardRefExoticComponent<Omit<React.HTMLAttributes<HTMLHeadingElement>, "color"> & {
+    tag: "div" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
+    view?: "small" | "medium" | "xlarge" | "large" | "xsmall" | undefined;
+    color?: "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" | undefined;
+    weight?: "bold" | "regular" | "medium" | undefined;
+    font?: "styrene" | "system" | undefined;
+    defaultMargins?: boolean | undefined;
+    className?: string | undefined;
+    dataTestId?: string | undefined;
+    children?: React.ReactNode;
+    rowLimit?: 1 | 2 | 3 | undefined;
+    showSkeleton?: boolean | undefined;
+    skeletonProps?: import("../types").TextSkeletonProps | undefined;
+} & React.RefAttributes<HTMLDivElement | HTMLHeadingElement>>;
 export { Title };
 export type { TitleProps };

package/cssm/title/index.js

@@ -9,7 +9,7 @@ var commonStyles = require('./common.module.css');
 var styles = require('./index.module.css');
 require('react-merge-refs');
 require('classnames');
-require('../hooks/useSkeleton.js');
+require('../hooks/use-skeleton.js');
 require('@alfalab/core-components-skeleton/cssm');
 require('@alfalab/hooks');
 require('../hooks/use-skeleton.module.css');
@@ -21,11 +21,6 @@ var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 var commonStyles__default = /*#__PURE__*/_interopDefaultCompat(commonStyles);
 var styles__default = /*#__PURE__*/_interopDefaultCompat(styles);
 
-var Title = function (props) { return (
-/**
- * Если поменять Object.assign на деструктуризацию, то упадут тесты.
- * Видимо, это особенность работы jest и css-modules.
- */
-React__default.default.createElement(title_component.Title, tslib.__assign({}, props, { styles: Object.assign(commonStyles__default.default, styles__default.default) }))); };
+var Title = React.forwardRef(function (props, ref) { return (React__default.default.createElement(title_component.Title, tslib.__assign({}, props, { styles: Object.assign(commonStyles__default.default, styles__default.default), ref: ref }))); });
 
 exports.Title = Title;

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

@@ -1,5 +1,19 @@
-import { FC } from 'react';
+/// <reference types="react" />
+import React from 'react';
 import { TitleProps } from "../title/component";
 type TitleMobileProps = Omit<TitleProps, 'defaultMargins'>;
-declare const TitleMobile: FC<TitleMobileProps>;
+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;
+    color?: "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" | undefined;
+    weight?: "bold" | "regular" | "medium" | undefined;
+    font?: "styrene" | "system" | undefined;
+    defaultMargins?: boolean | undefined;
+    className?: string | undefined;
+    dataTestId?: string | undefined;
+    children?: React.ReactNode;
+    rowLimit?: 1 | 2 | 3 | undefined;
+    showSkeleton?: boolean | undefined;
+    skeletonProps?: import("../types").TextSkeletonProps | undefined;
+} & React.RefAttributes<HTMLDivElement | HTMLHeadingElement>>;
 export { TitleMobileProps, TitleMobile };

package/cssm/title-mobile/component.js

@@ -9,7 +9,7 @@ var commonStyles = require('../title/common.module.css');
 var styles = require('./index.module.css');
 require('react-merge-refs');
 require('classnames');
-require('../hooks/useSkeleton.js');
+require('../hooks/use-skeleton.js');
 require('@alfalab/core-components-skeleton/cssm');
 require('@alfalab/hooks');
 require('../hooks/use-skeleton.module.css');
@@ -21,11 +21,6 @@ var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 var commonStyles__default = /*#__PURE__*/_interopDefaultCompat(commonStyles);
 var styles__default = /*#__PURE__*/_interopDefaultCompat(styles);
 
-var TitleMobile = function (props) { return (
-/**
- * Если поменять Object.assign на деструктуризацию, то упадут тесты.
- * Видимо, это особенность работы jest и css-modules.
- */
-React__default.default.createElement(title_component.Title, tslib.__assign({}, props, { styles: Object.assign(commonStyles__default.default, styles__default.default) }))); };
+var TitleMobile = React.forwardRef(function (props, ref) { return React__default.default.createElement(title_component.Title, tslib.__assign({}, props, { styles: Object.assign(commonStyles__default.default, styles__default.default), ref: ref })); });
 
 exports.TitleMobile = TitleMobile;

package/cssm/title-mobile/index.js

@@ -8,7 +8,7 @@ require('react');
 require('../title/component.js');
 require('react-merge-refs');
 require('classnames');
-require('../hooks/useSkeleton.js');
+require('../hooks/use-skeleton.js');
 require('@alfalab/core-components-skeleton/cssm');
 require('@alfalab/hooks');
 require('../hooks/use-skeleton.module.css');

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

@@ -1,4 +1,17 @@
-import { FC } from 'react';
-import { TitleProps } from "../title/component";
-declare const TitleResponsive: FC<TitleProps>;
+/// <reference types="react" />
+import React from 'react';
+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;
+    color?: "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" | undefined;
+    weight?: "bold" | "regular" | "medium" | undefined;
+    font?: "styrene" | "system" | undefined;
+    defaultMargins?: boolean | undefined;
+    className?: string | undefined;
+    dataTestId?: string | undefined;
+    children?: React.ReactNode;
+    rowLimit?: 1 | 2 | 3 | undefined;
+    showSkeleton?: boolean | undefined;
+    skeletonProps?: import("../types").TextSkeletonProps | undefined;
+} & React.RefAttributes<HTMLDivElement | HTMLHeadingElement>>;
 export { TitleResponsive };

package/cssm/title-responsive/component.js

@@ -9,7 +9,7 @@ var commonStyles = require('../title/common.module.css');
 var styles = require('./index.module.css');
 require('react-merge-refs');
 require('classnames');
-require('../hooks/useSkeleton.js');
+require('../hooks/use-skeleton.js');
 require('@alfalab/core-components-skeleton/cssm');
 require('@alfalab/hooks');
 require('../hooks/use-skeleton.module.css');
@@ -21,11 +21,6 @@ var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 var commonStyles__default = /*#__PURE__*/_interopDefaultCompat(commonStyles);
 var styles__default = /*#__PURE__*/_interopDefaultCompat(styles);
 
-var TitleResponsive = function (props) { return (
-/**
- * Если поменять Object.assign на деструктуризацию, то упадут тесты.
- * Видимо, это особенность работы jest и css-modules.
- */
-React__default.default.createElement(title_component.Title, tslib.__assign({}, props, { styles: Object.assign(commonStyles__default.default, styles__default.default) }))); };
+var TitleResponsive = React.forwardRef(function (props, ref) { return React__default.default.createElement(title_component.Title, tslib.__assign({}, props, { styles: Object.assign(commonStyles__default.default, styles__default.default), ref: ref })); });
 
 exports.TitleResponsive = TitleResponsive;

package/cssm/title-responsive/index.js

@@ -8,7 +8,7 @@ require('react');
 require('../title/component.js');
 require('react-merge-refs');
 require('classnames');
-require('../hooks/useSkeleton.js');
+require('../hooks/use-skeleton.js');
 require('@alfalab/core-components-skeleton/cssm');
 require('@alfalab/hooks');
 require('../hooks/use-skeleton.module.css');

package/cssm/types.d.ts

@@ -9,5 +9,13 @@ type TextSkeletonProps = {
      * Ширина строки
      */
     width?: WidthUnit | WidthUnit[];
+    /**
+     * Выравнивание элементов по горизонтали
+     */
+    align?: 'left' | 'center' | 'right';
+    /**
+     * Класс для обертки скелетона
+     */
+    wrapperClassName?: string;
 };
 export { TextElementType, TextSkeletonProps };

package/esm/colors.css

@@ -1,4 +1,4 @@
-/* hash: 1plsv */
+/* hash: 1l8lq */
 :root {
 } /* deprecated */ :root {
     --color-light-text-accent: #ef3124;
@@ -33,42 +33,42 @@
 } :root {
 } :root {
 } :root {
-} /* colors */ .typography__tertiary_1ds77 {
+} /* colors */ .typography__tertiary_y12u3 {
     color: var(--color-light-text-tertiary);
-} .typography__disabled_1ds77 {
+} .typography__disabled_y12u3 {
     color: var(--color-light-text-disabled);
-} .typography__accent_1ds77 {
+} .typography__accent_y12u3 {
     color: var(--color-light-text-accent);
-} .typography__primary_1ds77 {
+} .typography__primary_y12u3 {
     color: var(--color-light-text-primary);
-} .typography__attention_1ds77 {
+} .typography__attention_y12u3 {
     color: var(--color-light-text-attention);
-} .typography__positive_1ds77 {
+} .typography__positive_y12u3 {
     color: var(--color-light-text-positive);
-} .typography__secondary_1ds77 {
+} .typography__secondary_y12u3 {
     color: var(--color-light-text-secondary);
-} .typography__tertiary-inverted_1ds77 {
+} .typography__tertiary-inverted_y12u3 {
     color: var(--color-light-text-tertiary-inverted);
-} .typography__primary-inverted_1ds77 {
+} .typography__primary-inverted_y12u3 {
     color: var(--color-light-text-primary-inverted);
-} .typography__secondary-inverted_1ds77 {
+} .typography__secondary-inverted_y12u3 {
     color: var(--color-light-text-secondary-inverted);
-} .typography__link_1ds77 {
+} .typography__link_y12u3 {
     color: var(--color-light-text-link);
-} .typography__negative_1ds77 {
+} .typography__negative_y12u3 {
     color: var(--color-light-text-negative);
-} .typography__static-primary-light_1ds77 {
+} .typography__static-primary-light_y12u3 {
     color: var(--color-static-text-primary-light);
-} .typography__static-secondary-light_1ds77 {
+} .typography__static-secondary-light_y12u3 {
     color: var(--color-static-text-secondary-light);
-} .typography__static-tertiary-light_1ds77 {
+} .typography__static-tertiary-light_y12u3 {
     color: var(--color-static-text-tertiary-light);
-} .typography__static-primary-dark_1ds77 {
+} .typography__static-primary-dark_y12u3 {
     color: var(--color-static-text-primary-dark);
-} .typography__static-secondary-dark_1ds77 {
+} .typography__static-secondary-dark_y12u3 {
     color: var(--color-static-text-secondary-dark);
-} .typography__static-tertiary-dark_1ds77 {
+} .typography__static-tertiary-dark_y12u3 {
     color: var(--color-static-text-tertiary-dark);
-} .typography__static-accent_1ds77 {
+} .typography__static-accent_y12u3 {
     color: var(--color-static-text-accent);
 }

package/esm/colors.module-3119b191.js

@@ -0,0 +1,4 @@
+var colors = {"tertiary":"typography__tertiary_y12u3","disabled":"typography__disabled_y12u3","accent":"typography__accent_y12u3","primary":"typography__primary_y12u3","attention":"typography__attention_y12u3","positive":"typography__positive_y12u3","secondary":"typography__secondary_y12u3","tertiary-inverted":"typography__tertiary-inverted_y12u3","primary-inverted":"typography__primary-inverted_y12u3","secondary-inverted":"typography__secondary-inverted_y12u3","link":"typography__link_y12u3","negative":"typography__negative_y12u3","static-primary-light":"typography__static-primary-light_y12u3","static-secondary-light":"typography__static-secondary-light_y12u3","static-tertiary-light":"typography__static-tertiary-light_y12u3","static-primary-dark":"typography__static-primary-dark_y12u3","static-secondary-dark":"typography__static-secondary-dark_y12u3","static-tertiary-dark":"typography__static-tertiary-dark_y12u3","static-accent":"typography__static-accent_y12u3"};
+require('./colors.css')
+
+export { colors as c };

package/esm/common.module-ec992380.js

@@ -0,0 +1,4 @@
+var commonStyles = {"component":"typography__component_vlv7e","bold":"typography__bold_vlv7e","medium":"typography__medium_vlv7e","regular":"typography__regular_vlv7e"};
+require('./title/common.css')
+
+export { commonStyles as c };

package/esm/component.js

@@ -6,12 +6,12 @@ import 'tslib';
 import 'react';
 import 'react-merge-refs';
 import 'classnames';
-import './hooks/useSkeleton.js';
+import './hooks/use-skeleton.js';
 import '@alfalab/core-components-skeleton/esm';
 import '@alfalab/hooks';
-import './colors.module-ca4c7711.js';
+import './colors.module-3119b191.js';
 import './title/component.js';
-import './common.module-936e59c9.js';
+import './common.module-ec992380.js';
 
 var Typography = {
     Title: Title,

package/esm/hooks/index.d.ts

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

package/esm/hooks/index.js

@@ -1,5 +1,6 @@
-export { useSkeleton } from './useSkeleton.js';
+export { useSkeleton } from './use-skeleton.js';
 import 'tslib';
 import 'react';
+import 'classnames';
 import '@alfalab/core-components-skeleton/esm';
 import '@alfalab/hooks';

package/esm/hooks/use-skeleton.css

@@ -1,4 +1,4 @@
-/* hash: 7pfjn */
+/* hash: xr1vg */
 :root {
 } /* 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 */
 } :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 */
@@ -15,6 +15,12 @@
 } :root {
 } :root {
 } :root {
-} .typography__skeletonText_395pe.typography__skeletonText_395pe {
+} .typography__skeletonText_1d750.typography__skeletonText_1d750 {
     border-radius: var(--border-radius-pill);
+} .typography__left_1d750 > div {
+    margin-right: auto;
+} .typography__center_1d750 > div {
+    margin: 0 auto;
+} .typography__right_1d750 > div {
+    margin-left: auto;
 }

package/esm/hooks/{useSkeleton.js → use-skeleton.js}

@@ -1,9 +1,10 @@
 import { __spreadArray } from 'tslib';
 import React, { useState, useRef } from 'react';
+import cn from 'classnames';
 import { Skeleton } from '@alfalab/core-components-skeleton/esm';
 import { useLayoutEffect_SAFE_FOR_SSR } from '@alfalab/hooks';
 
-var styles = {"skeletonText":"typography__skeletonText_395pe"};
+var styles = {"skeletonText":"typography__skeletonText_1d750","left":"typography__left_1d750","center":"typography__center_1d750","right":"typography__right_1d750"};
 require('./use-skeleton.css')
 
 function useSkeleton(showSkeleton, skeletonProps) {
@@ -33,7 +34,7 @@ function useSkeleton(showSkeleton, skeletonProps) {
     }, [showSkeleton, skeletonProps === null || skeletonProps === void 0 ? void 0 : skeletonProps.rows]);
     var renderSkeleton = function (props) {
         if (showSkeleton && skeletonParams) {
-            return (React.createElement("div", { className: props.wrapperClassName, "data-test-id": props.dataTestId }, __spreadArray([], Array(skeletonParams.rows), true).map(function (_, idx) {
+            return (React.createElement("div", { className: cn(skeletonProps === null || skeletonProps === void 0 ? void 0 : skeletonProps.wrapperClassName, props.wrapperClassName, (skeletonProps === null || skeletonProps === void 0 ? void 0 : skeletonProps.align) && styles[skeletonProps.align]), "data-test-id": props.dataTestId }, __spreadArray([], Array(skeletonParams.rows), true).map(function (_, idx) {
                 var width = Array.isArray(skeletonProps === null || skeletonProps === void 0 ? void 0 : skeletonProps.width)
                     ? skeletonProps === null || skeletonProps === void 0 ? void 0 : skeletonProps.width[idx]
                     : skeletonProps === null || skeletonProps === void 0 ? void 0 : skeletonProps.width;

package/esm/index.js

@@ -5,12 +5,12 @@ import 'tslib';
 import 'react';
 import 'react-merge-refs';
 import 'classnames';
-import './hooks/useSkeleton.js';
+import './hooks/use-skeleton.js';
 import '@alfalab/core-components-skeleton/esm';
 import '@alfalab/hooks';
-import './colors.module-ca4c7711.js';
+import './colors.module-3119b191.js';
 import './title/index.js';
 import './title/component.js';
-import './common.module-936e59c9.js';
+import './common.module-ec992380.js';
 import './title-mobile/component.js';
 import './title-responsive/component.js';

package/esm/text/component.js

@@ -2,12 +2,12 @@ import { __rest, __assign } from 'tslib';
 import React, { forwardRef } from 'react';
 import mergeRefs from 'react-merge-refs';
 import cn from 'classnames';
-import { useSkeleton } from '../hooks/useSkeleton.js';
-import { c as colors } from '../colors.module-ca4c7711.js';
+import { useSkeleton } from '../hooks/use-skeleton.js';
+import { c as colors } from '../colors.module-3119b191.js';
 import '@alfalab/core-components-skeleton/esm';
 import '@alfalab/hooks';
 
-var styles = {"paragraph":"typography__paragraph_1v3aj","paragraphWithMargins":"typography__paragraphWithMargins_1v3aj","primary-large":"typography__primary-large_1v3aj","primary-medium":"typography__primary-medium_1v3aj","primary-small":"typography__primary-small_1v3aj","secondary-large":"typography__secondary-large_1v3aj","secondary-medium":"typography__secondary-medium_1v3aj","secondary-small":"typography__secondary-small_1v3aj","component":"typography__component_1v3aj","component-primary":"typography__component-primary_1v3aj","component-secondary":"typography__component-secondary_1v3aj","caps":"typography__caps_1v3aj","bold":"typography__bold_1v3aj","medium":"typography__medium_1v3aj","regular":"typography__regular_1v3aj","monospace":"typography__monospace_1v3aj","rowLimit1":"typography__rowLimit1_1v3aj","rowLimit2":"typography__rowLimit2_1v3aj","rowLimit3":"typography__rowLimit3_1v3aj"};
+var styles = {"paragraph":"typography__paragraph_10zie","paragraphWithMargins":"typography__paragraphWithMargins_10zie","primary-large":"typography__primary-large_10zie","primary-medium":"typography__primary-medium_10zie","primary-small":"typography__primary-small_10zie","secondary-large":"typography__secondary-large_10zie","secondary-medium":"typography__secondary-medium_10zie","secondary-small":"typography__secondary-small_10zie","component":"typography__component_10zie","component-primary":"typography__component-primary_10zie","component-secondary":"typography__component-secondary_10zie","caps":"typography__caps_10zie","bold":"typography__bold_10zie","medium":"typography__medium_10zie","regular":"typography__regular_10zie","monospace":"typography__monospace_10zie","rowLimit1":"typography__rowLimit1_10zie","rowLimit2":"typography__rowLimit2_10zie","rowLimit3":"typography__rowLimit3_10zie"};
 require('./index.css')
 
 var logWarning = function (view) {