@alfalab/core-components-typography 2.1.0 → 2.4.0

package/CHANGELOG.md

@@ -3,6 +3,40 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [2.4.0](https://github.com/alfa-laboratory/core-components/compare/@alfalab/core-components-typography@2.3.0...@alfalab/core-components-typography@2.4.0) (2022-03-01)
+
+
+### Features
+
+* **typography:** новый компонент  Typography.TitleMobile  ([#1003](https://github.com/alfa-laboratory/core-components/issues/1003)) ([9b03cf9](https://github.com/alfa-laboratory/core-components/commit/9b03cf90422b05cc927ed98959708430812d1a50))
+* Исправить импорты в сторях. ([#998](https://github.com/alfa-laboratory/core-components/issues/998)) ([e6a654a](https://github.com/alfa-laboratory/core-components/commit/e6a654a0599451c7d149484cb61d8067eed083b7))
+
+
+
+
+
+# [2.3.0](https://github.com/alfa-laboratory/core-components/compare/@alfalab/core-components-typography@2.2.0...@alfalab/core-components-typography@2.3.0) (2022-01-17)
+
+
+### Features
+
+* **typography:** export types ([#940](https://github.com/alfa-laboratory/core-components/issues/940)) ([498227c](https://github.com/alfa-laboratory/core-components/commit/498227c272659a1ebf890eee61c6fecdd110faee))
+
+
+
+
+
+# [2.2.0](https://github.com/alfa-laboratory/core-components/compare/@alfalab/core-components-typography@2.1.0...@alfalab/core-components-typography@2.2.0) (2021-09-14)
+
+
+### Features
+
+* **typography:** add ref ([#834](https://github.com/alfa-laboratory/core-components/issues/834)) ([976b16d](https://github.com/alfa-laboratory/core-components/commit/976b16dd9ae68c31999bffb3506623db05033ad4))
+
+
+
+
+
 # [2.1.0](https://github.com/alfa-laboratory/core-components/compare/@alfalab/core-components-typography@2.0.1...@alfalab/core-components-typography@2.1.0) (2021-07-19)
 
 

package/dist/colors.css

@@ -1,4 +1,4 @@
-/* hash: nyhvb */
+/* hash: 1yiw4 */
 :root {
     --color-light-text-accent: #ef3124;
     --color-light-text-attention: #de6a00;
@@ -22,39 +22,39 @@
     /* Hard up */
 }
 /* colors */
-.typography__tertiary_nyhvb {
+.typography__tertiary_zoxuj {
     color: var(--color-light-text-tertiary);
 }
-.typography__disabled_nyhvb {
+.typography__disabled_zoxuj {
     color: var(--color-light-text-disabled);
 }
-.typography__accent_nyhvb {
+.typography__accent_zoxuj {
     color: var(--color-light-text-accent);
 }
-.typography__primary_nyhvb {
+.typography__primary_zoxuj {
     color: var(--color-light-text-primary);
 }
-.typography__attention_nyhvb {
+.typography__attention_zoxuj {
     color: var(--color-light-text-attention);
 }
-.typography__positive_nyhvb {
+.typography__positive_zoxuj {
     color: var(--color-light-text-positive);
 }
-.typography__secondary_nyhvb {
+.typography__secondary_zoxuj {
     color: var(--color-light-text-secondary);
 }
-.typography__tertiary-inverted_nyhvb {
+.typography__tertiary-inverted_zoxuj {
     color: var(--color-light-text-tertiary-inverted);
 }
-.typography__primary-inverted_nyhvb {
+.typography__primary-inverted_zoxuj {
     color: var(--color-light-text-primary-inverted);
 }
-.typography__secondary-inverted_nyhvb {
+.typography__secondary-inverted_zoxuj {
     color: var(--color-light-text-secondary-inverted);
 }
-.typography__link_nyhvb {
+.typography__link_zoxuj {
     color: var(--color-light-text-link);
 }
-.typography__negative_nyhvb {
+.typography__negative_zoxuj {
     color: var(--color-light-text-negative);
 }

package/dist/{colors.module-2e934386.js → colors.module-b49595f3.js}

@@ -39,7 +39,7 @@ function __rest(s, e) {
     return t;
 }
 
-var colors = {"tertiary":"typography__tertiary_nyhvb","disabled":"typography__disabled_nyhvb","accent":"typography__accent_nyhvb","primary":"typography__primary_nyhvb","attention":"typography__attention_nyhvb","positive":"typography__positive_nyhvb","secondary":"typography__secondary_nyhvb","tertiary-inverted":"typography__tertiary-inverted_nyhvb","primary-inverted":"typography__primary-inverted_nyhvb","secondary-inverted":"typography__secondary-inverted_nyhvb","link":"typography__link_nyhvb","negative":"typography__negative_nyhvb"};
+var colors = {"tertiary":"typography__tertiary_zoxuj","disabled":"typography__disabled_zoxuj","accent":"typography__accent_zoxuj","primary":"typography__primary_zoxuj","attention":"typography__attention_zoxuj","positive":"typography__positive_zoxuj","secondary":"typography__secondary_zoxuj","tertiary-inverted":"typography__tertiary-inverted_zoxuj","primary-inverted":"typography__primary-inverted_zoxuj","secondary-inverted":"typography__secondary-inverted_zoxuj","link":"typography__link_zoxuj","negative":"typography__negative_zoxuj"};
 require('./colors.css')
 
 exports.__rest = __rest;

package/dist/common.module-f1e23ebf.js

@@ -0,0 +1,6 @@
+'use strict';
+
+var commonStyles = {"component":"typography__component_1fjjn","bold":"typography__bold_1fjjn","medium":"typography__medium_1fjjn","regular":"typography__regular_1fjjn"};
+require('./title/common.css')
+
+exports.commonStyles = commonStyles;

package/dist/component.d.ts

@@ -1,9 +1,11 @@
 import { FC } from 'react';
 import { TitleProps } from "./title/index";
 import { TextProps } from "./text/index";
+import { TitleMobileProps } from "./title-mobile/index";
 declare const Typography: {
     Title: FC<TitleProps>;
     Text: FC<TextProps>;
     TitleResponsive: FC<TitleProps>;
+    TitleMobile: FC<TitleMobileProps>;
 };
 export { Typography };

package/dist/component.js

@@ -2,19 +2,21 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-require('./colors.module-2e934386.js');
+require('./colors.module-b49595f3.js');
 require('react');
 require('classnames');
 require('./title/component.js');
-require('./common.module-f8ab3069.js');
+require('./common.module-f1e23ebf.js');
 var title_index = require('./title/index.js');
 var text_component = require('./text/component.js');
 var titleResponsive_component = require('./title-responsive/component.js');
+var titleMobile_component = require('./title-mobile/component.js');
 
 var Typography = {
     Title: title_index.Title,
     Text: text_component.Text,
     TitleResponsive: titleResponsive_component.TitleResponsive,
+    TitleMobile: titleMobile_component.TitleMobile,
 };
 
 exports.Typography = Typography;

package/dist/cssm/component.d.ts

@@ -1,9 +1,11 @@
 import { FC } from 'react';
 import { TitleProps } from "./title/index";
 import { TextProps } from "./text/index";
+import { TitleMobileProps } from "./title-mobile/index";
 declare const Typography: {
     Title: FC<TitleProps>;
     Text: FC<TextProps>;
     TitleResponsive: FC<TitleProps>;
+    TitleMobile: FC<TitleMobileProps>;
 };
 export { Typography };

package/dist/cssm/component.js

@@ -14,11 +14,14 @@ require('./text/index.module.css');
 var text_component = require('./text/component.js');
 require('./title-responsive/index.module.css');
 var titleResponsive_component = require('./title-responsive/component.js');
+require('./title-mobile/index.module.css');
+var titleMobile_component = require('./title-mobile/component.js');
 
 var Typography = {
     Title: title_index.Title,
     Text: text_component.Text,
     TitleResponsive: titleResponsive_component.TitleResponsive,
+    TitleMobile: titleMobile_component.TitleMobile,
 };
 
 exports.Typography = Typography;

package/dist/cssm/index.d.ts

@@ -1 +1,3 @@
 export * from "./component";
+export { TitleProps } from "./title/index";
+export { TextProps } from "./text/index";

package/dist/cssm/index.js

@@ -14,6 +14,8 @@ require('./text/index.module.css');
 require('./text/component.js');
 require('./title-responsive/index.module.css');
 require('./title-responsive/component.js');
+require('./title-mobile/index.module.css');
+require('./title-mobile/component.js');
 var component = require('./component.js');
 
 

package/dist/cssm/text/component.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import React from 'react';
-import { HTMLAttributes, FC } from "react";
+import { HTMLAttributes } from "react";
 import { Color } from "../colors";
 type NativeProps = HTMLAttributes<HTMLSpanElement>;
 type TextProps = Omit<NativeProps, 'color'> & {
@@ -37,5 +37,39 @@ type TextProps = Omit<NativeProps, 'color'> & {
      */
     children?: React.ReactNode;
 };
-declare const Text: FC<TextProps>;
+type TextElementType = HTMLParagraphElement | HTMLSpanElement | HTMLDivElement;
+declare const Text: React.ForwardRefExoticComponent<Pick<NativeProps, "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "placeholder" | "slot" | "spellCheck" | "style" | "tabIndex" | "title" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture"> & {
+    /**
+     * [Вариант начертания](https://alfa-laboratory.github.io/core-components/master/?path=/docs/гайдлайны-типографика--page)
+     */
+    view?: "primary-large" | "primary-medium" | "primary-small" | "secondary-large" | "secondary-medium" | "secondary-small" | "component" | "caps" | undefined;
+    /**
+     * Цвет текста
+     */
+    color?: "tertiary" | "disabled" | "accent" | "primary" | "attention" | "positive" | "secondary" | "tertiary-inverted" | "primary-inverted" | "secondary-inverted" | "link" | "negative" | undefined;
+    /**
+     * Толщина шрифта
+     */
+    weight?: "medium" | "regular" | "bold" | undefined;
+    /**
+     * Делает цифры моноширинными
+     */
+    monospaceNumbers?: boolean | undefined;
+    /**
+     * HTML тег
+     */
+    tag?: "div" | "p" | "span" | undefined;
+    /**
+     * Css-класс для стилизации (native prop)
+     */
+    className?: string | undefined;
+    /**
+     * Id компонента для тестов
+     */
+    dataTestId?: string | undefined;
+    /**
+     * Контент (native prop)
+     */
+    children?: React.ReactNode;
+} & React.RefAttributes<TextElementType>>;
 export { TextProps, Text };

package/dist/cssm/text/component.js

@@ -15,10 +15,10 @@ var cn__default = /*#__PURE__*/_interopDefaultLegacy(cn);
 var colors__default = /*#__PURE__*/_interopDefaultLegacy(colors);
 var styles__default = /*#__PURE__*/_interopDefaultLegacy(styles);
 
-var Text = function (_a) {
+var Text = React.forwardRef(function (_a, ref) {
     var _b;
     var _c = _a.view, view = _c === void 0 ? 'primary-medium' : _c, _d = _a.tag, Component = _d === void 0 ? 'span' : _d, _e = _a.weight, weight = _e === void 0 ? 'regular' : _e, _f = _a.monospaceNumbers, monospaceNumbers = _f === void 0 ? false : _f, color = _a.color, className = _a.className, dataTestId = _a.dataTestId, children = _a.children, restProps = tslib_es6.__rest(_a, ["view", "tag", "weight", "monospaceNumbers", "color", "className", "dataTestId", "children"]);
-    return (React__default['default'].createElement(Component, tslib_es6.__assign({ className: cn__default['default']((_b = {}, _b[styles__default['default'].paragraph] = Component === 'p', _b[styles__default['default'].monospace] = monospaceNumbers, _b), className, color && colors__default['default'][color], styles__default['default'][view], styles__default['default'][weight]), "data-test-id": dataTestId }, restProps), children));
-};
+    return (React__default['default'].createElement(Component, tslib_es6.__assign({ className: cn__default['default']((_b = {}, _b[styles__default['default'].paragraph] = Component === 'p', _b[styles__default['default'].monospace] = monospaceNumbers, _b), className, color && colors__default['default'][color], styles__default['default'][view], styles__default['default'][weight]), "data-test-id": dataTestId, ref: ref }, restProps), children));
+});
 
 exports.Text = Text;

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

@@ -46,5 +46,43 @@ type Styles = {
         [key: string]: string;
     };
 };
-declare const Title: React.FC<TitleProps & Styles>;
+type TitleElementType = HTMLHeadingElement | HTMLDivElement;
+declare const Title: React.ForwardRefExoticComponent<Pick<NativeProps, "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "placeholder" | "slot" | "spellCheck" | "style" | "tabIndex" | "title" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture"> & {
+    /**
+     * HTML тег
+     */
+    tag: "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "div";
+    /**
+     * [Вариант начертания](https://alfa-laboratory.github.io/core-components/master/?path=/docs/гайдлайны-типографика--page)
+     */
+    view?: "xlarge" | "large" | "medium" | "small" | "xsmall" | undefined;
+    /**
+     * Цвет текста
+     */
+    color?: "tertiary" | "disabled" | "accent" | "primary" | "attention" | "positive" | "secondary" | "tertiary-inverted" | "primary-inverted" | "secondary-inverted" | "link" | "negative" | undefined;
+    /**
+     * Толщина шрифта
+     */
+    weight?: "medium" | "regular" | "bold" | undefined;
+    /**
+     * Шрифт текста
+     */
+    font?: "styrene" | "system" | undefined;
+    /**
+     * Добавляет отступы
+     */
+    defaultMargins?: boolean | undefined;
+    /**
+     * Css-класс для стилизации (native prop)
+     */
+    className?: string | undefined;
+    /**
+     * Id компонента для тестов
+     */
+    dataTestId?: string | undefined;
+    /**
+     * Контент (native prop)
+     */
+    children?: React.ReactNode;
+} & Styles & React.RefAttributes<TitleElementType>>;
 export { TitleProps, Title };

package/dist/cssm/title/component.js

@@ -13,9 +13,9 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var cn__default = /*#__PURE__*/_interopDefaultLegacy(cn);
 var colors__default = /*#__PURE__*/_interopDefaultLegacy(colors);
 
-var Title = function (_a) {
+var Title = React.forwardRef(function (_a, ref) {
     var _b = _a.tag, Component = _b === void 0 ? 'div' : _b, _c = _a.view, view = _c === void 0 ? 'medium' : _c, _d = _a.font, font = _d === void 0 ? 'styrene' : _d, _e = _a.weight, weight = _e === void 0 ? font === 'styrene' ? 'medium' : 'bold' : _e, _f = _a.defaultMargins, defaultMargins = _f === void 0 ? false : _f, color = _a.color, className = _a.className, dataTestId = _a.dataTestId, children = _a.children, styles = _a.styles, restProps = tslib_es6.__rest(_a, ["tag", "view", "font", "weight", "defaultMargins", "color", "className", "dataTestId", "children", "styles"]);
-    return (React__default['default'].createElement(Component, tslib_es6.__assign({ className: cn__default['default'](styles.component, className, styles[font + "-" + view], defaultMargins && styles["margins-" + view], styles[weight], color && colors__default['default'][color]), "data-test-id": dataTestId }, restProps), children));
-};
+    return (React__default['default'].createElement(Component, tslib_es6.__assign({ className: cn__default['default'](styles.component, className, styles[font + "-" + view], defaultMargins && styles["margins-" + view], styles[weight], color && colors__default['default'][color]), "data-test-id": dataTestId, ref: ref }, restProps), children));
+});
 
 exports.Title = Title;

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

@@ -0,0 +1,5 @@
+import { FC } from 'react';
+import { TitleProps } from "../title/component";
+type TitleMobileProps = Omit<TitleProps, 'defaultMargins'>;
+declare const TitleMobile: FC<TitleMobileProps>;
+export { TitleMobileProps, TitleMobile };

package/dist/cssm/title-mobile/component.js

@@ -0,0 +1,27 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var tslib_es6 = require('../tslib.es6-ce870b46.js');
+var React = require('react');
+require('classnames');
+require('../colors.module.css');
+var title_component = require('../title/component.js');
+var commonStyles = require('../title/common.module.css');
+var styles = require('./index.module.css');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var commonStyles__default = /*#__PURE__*/_interopDefaultLegacy(commonStyles);
+var styles__default = /*#__PURE__*/_interopDefaultLegacy(styles);
+
+var TitleMobile = function (props) {
+    /**
+     * Если поменять Object.assign на деструктуризацию, то упадут тесты.
+     * Видимо, это особенность работы jest и css-modules.
+     */
+    return React__default['default'].createElement(title_component.Title, tslib_es6.__assign({}, props, { styles: Object.assign(commonStyles__default['default'], styles__default['default']) }));
+};
+
+exports.TitleMobile = TitleMobile;

package/dist/cssm/title-mobile/index.d.ts

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

package/dist/cssm/title-mobile/index.js

@@ -0,0 +1,16 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+require('../tslib.es6-ce870b46.js');
+require('react');
+require('classnames');
+require('../colors.module.css');
+require('../title/component.js');
+require('../title/common.module.css');
+require('./index.module.css');
+var titleMobile_component = require('./component.js');
+
+
+
+exports.TitleMobile = titleMobile_component.TitleMobile;

package/dist/cssm/title-mobile/index.module.css

@@ -0,0 +1,81 @@
+:root {
+
+    /* Hard */
+
+    /* Up */
+
+    /* Hard up */
+}
+:root {
+    --font-family-styrene: 'Styrene UI', system-ui, -apple-system, 'Segoe UI', Roboto,
+        'Helvetica Neue', Helvetica, sans-serif;
+}
+.styrene-xlarge {
+    font-size: 34px;
+    line-height: 40px;
+    font-weight: 500;
+    font-feature-settings: 'ss01';
+    font-family: var(--font-family-styrene);
+}
+.styrene-large {
+    font-size: 30px;
+    line-height: 36px;
+    font-weight: 500;
+    font-feature-settings: 'ss01';
+    font-family: var(--font-family-styrene);
+}
+.styrene-medium {
+    font-size: 26px;
+    line-height: 32px;
+    font-weight: 500;
+    font-feature-settings: 'ss01';
+    font-family: var(--font-family-styrene);
+}
+.styrene-small {
+    font-size: 20px;
+    line-height: 28px;
+    font-weight: 500;
+    font-feature-settings: 'ss01';
+    font-family: var(--font-family-styrene);
+}
+.styrene-xsmall {
+    font-size: 16px;
+    line-height: 24px;
+    font-weight: 500;
+    font-feature-settings: 'ss01';
+    font-family: var(--font-family-styrene);
+}
+.system-xlarge {
+    font-size: 34px;
+    line-height: 40px;
+    font-weight: 600;
+}
+.system-large {
+    font-size: 30px;
+    line-height: 36px;
+    font-weight: 600;
+}
+.system-medium {
+    font-size: 26px;
+    line-height: 32px;
+    font-weight: 600;
+}
+.system-small {
+    font-size: 20px;
+    line-height: 28px;
+    font-weight: 600;
+}
+.system-xsmall {
+    font-size: 16px;
+    line-height: 24px;
+    font-weight: 600;
+}
+.bold {
+    font-weight: bold;
+}
+.medium {
+    font-weight: 500;
+}
+.regular {
+    font-weight: normal;
+}

package/dist/esm/colors.css

@@ -1,4 +1,4 @@
-/* hash: nyhvb */
+/* hash: 1yiw4 */
 :root {
     --color-light-text-accent: #ef3124;
     --color-light-text-attention: #de6a00;
@@ -22,39 +22,39 @@
     /* Hard up */
 }
 /* colors */
-.typography__tertiary_nyhvb {
+.typography__tertiary_zoxuj {
     color: var(--color-light-text-tertiary);
 }
-.typography__disabled_nyhvb {
+.typography__disabled_zoxuj {
     color: var(--color-light-text-disabled);
 }
-.typography__accent_nyhvb {
+.typography__accent_zoxuj {
     color: var(--color-light-text-accent);
 }
-.typography__primary_nyhvb {
+.typography__primary_zoxuj {
     color: var(--color-light-text-primary);
 }
-.typography__attention_nyhvb {
+.typography__attention_zoxuj {
     color: var(--color-light-text-attention);
 }
-.typography__positive_nyhvb {
+.typography__positive_zoxuj {
     color: var(--color-light-text-positive);
 }
-.typography__secondary_nyhvb {
+.typography__secondary_zoxuj {
     color: var(--color-light-text-secondary);
 }
-.typography__tertiary-inverted_nyhvb {
+.typography__tertiary-inverted_zoxuj {
     color: var(--color-light-text-tertiary-inverted);
 }
-.typography__primary-inverted_nyhvb {
+.typography__primary-inverted_zoxuj {
     color: var(--color-light-text-primary-inverted);
 }
-.typography__secondary-inverted_nyhvb {
+.typography__secondary-inverted_zoxuj {
     color: var(--color-light-text-secondary-inverted);
 }
-.typography__link_nyhvb {
+.typography__link_zoxuj {
     color: var(--color-light-text-link);
 }
-.typography__negative_nyhvb {
+.typography__negative_zoxuj {
     color: var(--color-light-text-negative);
 }

package/dist/esm/{colors.module-e2ff93e4.js → colors.module-7fc54cb2.js}

@@ -37,7 +37,7 @@ function __rest(s, e) {
     return t;
 }
 
-var colors = {"tertiary":"typography__tertiary_nyhvb","disabled":"typography__disabled_nyhvb","accent":"typography__accent_nyhvb","primary":"typography__primary_nyhvb","attention":"typography__attention_nyhvb","positive":"typography__positive_nyhvb","secondary":"typography__secondary_nyhvb","tertiary-inverted":"typography__tertiary-inverted_nyhvb","primary-inverted":"typography__primary-inverted_nyhvb","secondary-inverted":"typography__secondary-inverted_nyhvb","link":"typography__link_nyhvb","negative":"typography__negative_nyhvb"};
+var colors = {"tertiary":"typography__tertiary_zoxuj","disabled":"typography__disabled_zoxuj","accent":"typography__accent_zoxuj","primary":"typography__primary_zoxuj","attention":"typography__attention_zoxuj","positive":"typography__positive_zoxuj","secondary":"typography__secondary_zoxuj","tertiary-inverted":"typography__tertiary-inverted_zoxuj","primary-inverted":"typography__primary-inverted_zoxuj","secondary-inverted":"typography__secondary-inverted_zoxuj","link":"typography__link_zoxuj","negative":"typography__negative_zoxuj"};
 require('./colors.css')
 
 export { __assign as _, __rest as a, colors as c };

package/dist/esm/common.module-6a3ec549.js

@@ -0,0 +1,4 @@
+var commonStyles = {"component":"typography__component_1fjjn","bold":"typography__bold_1fjjn","medium":"typography__medium_1fjjn","regular":"typography__regular_1fjjn"};
+require('./title/common.css')
+
+export { commonStyles as c };

package/dist/esm/component.d.ts

@@ -1,9 +1,11 @@
 import { FC } from 'react';
 import { TitleProps } from "./title/index";
 import { TextProps } from "./text/index";
+import { TitleMobileProps } from "./title-mobile/index";
 declare const Typography: {
     Title: FC<TitleProps>;
     Text: FC<TextProps>;
     TitleResponsive: FC<TitleProps>;
+    TitleMobile: FC<TitleMobileProps>;
 };
 export { Typography };

package/dist/esm/component.js

@@ -1,16 +1,18 @@
-import './colors.module-e2ff93e4.js';
+import './colors.module-7fc54cb2.js';
 import 'react';
 import 'classnames';
 import './title/component.js';
-import './common.module-0ea0b53f.js';
+import './common.module-6a3ec549.js';
 import { Title } from './title/index.js';
 import { Text } from './text/component.js';
 import { TitleResponsive } from './title-responsive/component.js';
+import { TitleMobile } from './title-mobile/component.js';
 
 var Typography = {
     Title: Title,
     Text: Text,
     TitleResponsive: TitleResponsive,
+    TitleMobile: TitleMobile,
 };
 
 export { Typography };

package/dist/esm/index.d.ts

@@ -1 +1,3 @@
 export * from "./component";
+export { TitleProps } from "./title/index";
+export { TextProps } from "./text/index";

package/dist/esm/index.js

@@ -1,9 +1,10 @@
-import './colors.module-e2ff93e4.js';
+import './colors.module-7fc54cb2.js';
 import 'react';
 import 'classnames';
 import './title/component.js';
-import './common.module-0ea0b53f.js';
+import './common.module-6a3ec549.js';
 import './title/index.js';
 import './text/component.js';
 import './title-responsive/component.js';
+import './title-mobile/component.js';
 export { Typography } from './component.js';