@alfalab/core-components 39.2.1 → 39.4.0

package/system-message/modern/Component.js

@@ -0,0 +1,47 @@
+import React, { useMemo, isValidElement } from 'react';
+import cn from 'classnames';
+import { SystemMessageContext } from './Context.js';
+
+const desktopStyles = {"component":"system-message__component_1tgm3"};
+require('./desktop.css');
+
+const styles = {"component":"system-message__component_ia5jt","fullHeight":"system-message__fullHeight_ia5jt","first":"system-message__first_ia5jt","last":"system-message__last_ia5jt","controls":"system-message__controls_ia5jt","both":"system-message__both_ia5jt"};
+require('./index.css');
+
+const mobileStyles = {"component":"system-message__component_1iwji"};
+require('./mobile.css');
+
+const isControlsElement = (obj) => typeof obj === 'object' && obj.type.displayName === 'Controls';
+const SystemMessage = ({ view, dataTestId, children, fullHeight, className, }) => {
+    const contextValue = useMemo(() => ({ dataTestId, view, fullHeight }), [view, dataTestId, fullHeight]);
+    const renderChildrenWithFullHeight = () => {
+        const renderCloned = (child, extraClassName) => React.cloneElement(child, {
+            ...child.props,
+            className: cn(child.props.className, extraClassName),
+        });
+        const childrenArray = React.Children.toArray(children);
+        const childrenCount = childrenArray.length;
+        return childrenArray.map((child, idx) => {
+            const isFirstElement = idx === 0;
+            const isLastElement = idx + 1 === childrenCount;
+            if (isFirstElement && isValidElement(child)) {
+                if (isLastElement) {
+                    return renderCloned(child, styles.both);
+                }
+                return renderCloned(child, styles.first);
+            }
+            if (isLastElement && isValidElement(child)) {
+                return renderCloned(child, isControlsElement(child) ? styles.controls : styles.last);
+            }
+            return child;
+        });
+    };
+    return (React.createElement(SystemMessageContext.Provider, { value: contextValue },
+        React.createElement("div", { "data-test-id": dataTestId, className: cn(styles.component, className, {
+                [mobileStyles.component]: view === 'mobile',
+                [desktopStyles.component]: view === 'desktop',
+                [styles.fullHeight]: fullHeight,
+            }) }, fullHeight ? renderChildrenWithFullHeight() : children)));
+};
+
+export { SystemMessage };

package/system-message/modern/Component.mobile.d.ts

@@ -0,0 +1,28 @@
+/// <reference types="react" />
+import React from 'react';
+import { SystemMessageMobileProps } from "./types";
+declare const SystemMessageMobile: React.FC<SystemMessageMobileProps> & {
+    Graphic: React.FC<{
+        className?: string | undefined;
+        children: React.ReactNode;
+    }>;
+    Title: React.FC<{
+        className?: string | undefined;
+        tag?: "div" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | undefined;
+        children: React.ReactNode;
+    }>;
+    Subtitle: React.FC<{
+        className?: string | undefined;
+        children: React.ReactNode;
+    }>;
+    Caption: React.FC<{
+        className?: string | undefined;
+        children: React.ReactNode;
+    }>;
+    Controls: React.FC<{
+        direction?: "column" | "row" | undefined;
+        className?: string | undefined;
+        children: React.ReactNode;
+    }>;
+};
+export { SystemMessageMobile };

package/system-message/modern/Component.mobile.js

@@ -0,0 +1,16 @@
+import React from 'react';
+import { SystemMessage } from './Component.js';
+import { createCompound } from './utils.js';
+import 'classnames';
+import './Context.js';
+import './components/caption/Component.js';
+import './components/controls/Component.js';
+import './components/graphic/Component.js';
+import './components/subtitle/Component.js';
+import './components/title/Component.js';
+import './getDataTestId-db5a8e6a.js';
+
+const SystemMessageMobileComponent = ({ children, ...restProps }) => (React.createElement(SystemMessage, { ...restProps, view: 'mobile' }, children));
+const SystemMessageMobile = createCompound(SystemMessageMobileComponent);
+
+export { SystemMessageMobile };

package/system-message/modern/Components.responsive.d.ts

@@ -0,0 +1,28 @@
+/// <reference types="react" />
+import React from 'react';
+import { SystemMessageResponsiveProps } from "./types";
+declare const SystemMessageResponsive: React.FC<SystemMessageResponsiveProps> & {
+    Graphic: React.FC<{
+        className?: string | undefined;
+        children: React.ReactNode;
+    }>;
+    Title: React.FC<{
+        className?: string | undefined;
+        tag?: "div" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | undefined;
+        children: React.ReactNode;
+    }>;
+    Subtitle: React.FC<{
+        className?: string | undefined;
+        children: React.ReactNode;
+    }>;
+    Caption: React.FC<{
+        className?: string | undefined;
+        children: React.ReactNode;
+    }>;
+    Controls: React.FC<{
+        direction?: "column" | "row" | undefined;
+        className?: string | undefined;
+        children: React.ReactNode;
+    }>;
+};
+export { SystemMessageResponsive };

package/system-message/modern/Components.responsive.js

@@ -0,0 +1,24 @@
+import React from 'react';
+import { useMatchMedia } from '../../mq/modern';
+import { SystemMessage } from './Component.js';
+import { createCompound } from './utils.js';
+import 'classnames';
+import './Context.js';
+import './components/caption/Component.js';
+import './components/controls/Component.js';
+import './components/graphic/Component.js';
+import './components/subtitle/Component.js';
+import './components/title/Component.js';
+import './getDataTestId-db5a8e6a.js';
+
+const isClient = () => typeof window !== 'undefined';
+
+const SystemMessageResponsiveComponent = ({ breakpoint = 1024, defaultMatchMediaValue, children, ...restProps }) => {
+    const query = `(min-width: ${breakpoint}px)`;
+    const getDefaultValue = () => (isClient() ? window.matchMedia(query).matches : false);
+    const [isDesktop] = useMatchMedia(query, defaultMatchMediaValue ?? getDefaultValue);
+    return (React.createElement(SystemMessage, { ...restProps, view: isDesktop ? 'desktop' : 'mobile' }, children));
+};
+const SystemMessageResponsive = createCompound(SystemMessageResponsiveComponent);
+
+export { SystemMessageResponsive };

package/system-message/modern/Context.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+import React from 'react';
+import { TSystemMessageContext } from "./types";
+declare const SystemMessageContext: React.Context<TSystemMessageContext>;
+export { SystemMessageContext };

package/system-message/modern/Context.js

@@ -0,0 +1,7 @@
+import React from 'react';
+
+const SystemMessageContext = React.createContext({
+    view: 'desktop',
+});
+
+export { SystemMessageContext };

package/system-message/modern/components/caption/Component.d.ts

@@ -0,0 +1,14 @@
+/// <reference types="react" />
+import React from 'react';
+type CaptionProps = {
+    /**
+     * Дополнительно имя класса
+     */
+    className?: string;
+    /**
+     * Дочерние элементы
+     */
+    children: React.ReactNode;
+};
+declare const Caption: React.FC<CaptionProps>;
+export { Caption };

package/system-message/modern/components/caption/Component.js

@@ -0,0 +1,14 @@
+import React, { useContext } from 'react';
+import cn from 'classnames';
+import { g as getDataTestId } from '../../getDataTestId-db5a8e6a.js';
+import { SystemMessageContext } from '../../Context.js';
+
+const styles = {"component":"system-message__component_1hvlb"};
+require('./index.css');
+
+const Caption = ({ className, children }) => {
+    const { dataTestId } = useContext(SystemMessageContext);
+    return (React.createElement("span", { className: cn(styles.component, className), "data-test-id": getDataTestId(dataTestId, 'caption') }, children));
+};
+
+export { Caption };

package/system-message/modern/components/caption/index.css

@@ -0,0 +1,27 @@
+/* hash: qtg3j */
+:root {
+} /* deprecated */ :root {
+    --color-light-text-secondary: rgba(11, 31, 53, 0.7); /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* 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 */
+} :root {
+} :root {
+
+    /* Hard */
+
+    /* Up */
+
+    /* Hard up */
+} :root {
+} :root {
+    --gap-s: 12px;
+} :root {
+} :root {
+} .system-message__component_1hvlb {
+    font-size: 14px;
+    line-height: 20px;
+    font-weight: 400;
+
+    text-align: center;
+    color: var(--color-light-text-secondary);
+    padding-bottom: var(--gap-s);
+}

package/system-message/modern/components/caption/index.d.ts

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

package/system-message/modern/components/caption/index.js

@@ -0,0 +1,5 @@
+export { Caption } from './Component.js';
+import 'react';
+import 'classnames';
+import '../../Context.js';
+import '../../getDataTestId-db5a8e6a.js';

package/system-message/modern/components/controls/Component.d.ts

@@ -0,0 +1,18 @@
+/// <reference types="react" />
+import React from 'react';
+type ControlsProps = {
+    /**
+     * Расположение элементов футера
+     */
+    direction?: 'column' | 'row';
+    /**
+     * Дополнительный класс
+     */
+    className?: string;
+    /**
+     * Дочерние элементы
+     */
+    children: React.ReactNode;
+};
+declare const Controls: React.FC<ControlsProps>;
+export { Controls };

package/system-message/modern/components/controls/Component.js

@@ -0,0 +1,31 @@
+import React, { useContext } from 'react';
+import cn from 'classnames';
+import { g as getDataTestId } from '../../getDataTestId-db5a8e6a.js';
+import { SystemMessageContext } from '../../Context.js';
+
+const desktopStyles = {"component":"system-message__component_lyah3","multiple":"system-message__multiple_lyah3"};
+require('./desktop.css');
+
+const styles = {"component":"system-message__component_1kjpk","column":"system-message__column_1kjpk","row":"system-message__row_1kjpk"};
+require('./index.css');
+
+const mobileStyles = {"component":"system-message__component_p21co"};
+require('./mobile.css');
+
+const Controls = ({ direction: directionProp, children, className, }) => {
+    const { dataTestId, view } = useContext(SystemMessageContext);
+    const defaultDirection = view === 'mobile' ? 'column' : 'row';
+    const direction = directionProp || defaultDirection;
+    const isMultipleElements = React.Children.toArray(children).length > 1;
+    const isColumn = isMultipleElements && direction === 'column' && view === 'mobile';
+    return (React.createElement("div", { className: cn(styles.component, className, {
+            [styles.row]: !isColumn,
+            [styles.column]: isColumn,
+            [desktopStyles.component]: view === 'desktop',
+            [desktopStyles.multiple]: isMultipleElements,
+            [mobileStyles.component]: view === 'mobile',
+        }), "data-test-id": getDataTestId(dataTestId, 'controls') }, children));
+};
+Controls.displayName = 'Controls';
+
+export { Controls };

package/system-message/modern/components/controls/desktop.css

@@ -0,0 +1,22 @@
+/* hash: keycd */
+: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 */
+} :root {
+} :root {
+
+    /* Hard */
+
+    /* Up */
+
+    /* Hard up */
+} :root {
+} :root {
+    --gap-xl: 24px;
+} :root {
+} :root {
+} .system-message__component_lyah3 {
+    padding: var(--gap-xl) 0;
+} .system-message__multiple_lyah3 > * {
+    flex: 1;
+}

package/system-message/modern/components/controls/index.css

@@ -0,0 +1,36 @@
+/* hash: 1hr8s */
+: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 */
+} :root {
+} :root {
+
+    /* Hard */
+
+    /* Up */
+
+    /* Hard up */
+} :root {
+} :root {
+    --gap-m: 16px;
+} :root {
+} :root {
+} .system-message__component_1kjpk {
+    display: flex;
+    justify-content: center;
+    width: 100%;
+} .system-message__column_1kjpk {
+    flex-flow: column nowrap
+} .system-message__column_1kjpk > * {
+        margin-bottom: var(--gap-m);
+    } .system-message__column_1kjpk > *:last-child,
+    .system-message__column_1kjpk > *:only-child {
+        margin-bottom: 0;
+    } .system-message__row_1kjpk {
+    flex-flow: row nowrap
+} .system-message__row_1kjpk > * {
+        margin-right: var(--gap-m);
+    } .system-message__row_1kjpk > *:last-child,
+    .system-message__row_1kjpk > *:only-child {
+        margin-right: 0;
+    }

package/system-message/modern/components/controls/index.d.ts

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

package/system-message/modern/components/controls/index.js

@@ -0,0 +1,5 @@
+export { Controls } from './Component.js';
+import 'react';
+import 'classnames';
+import '../../Context.js';
+import '../../getDataTestId-db5a8e6a.js';

package/system-message/modern/components/controls/mobile.css

@@ -0,0 +1,22 @@
+/* hash: 3ej1i */
+: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 */
+} :root {
+} :root {
+
+    /* Hard */
+
+    /* Up */
+
+    /* Hard up */
+} :root {
+} :root {
+    --gap-m: 16px;
+} :root {
+} :root {
+} .system-message__component_p21co {
+    padding-top: var(--gap-m)
+} .system-message__component_p21co > * {
+        flex: 1;
+    }

package/system-message/modern/components/graphic/Component.d.ts

@@ -0,0 +1,14 @@
+/// <reference types="react" />
+import React from 'react';
+type GraphicProps = {
+    /**
+     * Дополнительный класс
+     */
+    className?: string;
+    /**
+     * Элемент с иконкой
+     */
+    children: React.ReactNode;
+};
+declare const Graphic: React.FC<GraphicProps>;
+export { Graphic };

package/system-message/modern/components/graphic/Component.js

@@ -0,0 +1,14 @@
+import React, { useContext } from 'react';
+import cn from 'classnames';
+import { g as getDataTestId } from '../../getDataTestId-db5a8e6a.js';
+import { SystemMessageContext } from '../../Context.js';
+
+const styles = {"component":"system-message__component_1p94c"};
+require('./index.css');
+
+const Graphic = ({ children, className }) => {
+    const { dataTestId } = useContext(SystemMessageContext);
+    return (React.createElement("div", { className: cn(styles.component, className), "data-test-id": getDataTestId(dataTestId, 'graphic') }, children));
+};
+
+export { Graphic };

package/system-message/modern/components/graphic/index.css

@@ -0,0 +1,23 @@
+/* hash: 7fjzi */
+: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 */
+} :root {
+} :root {
+
+    /* Hard */
+
+    /* Up */
+
+    /* Hard up */
+} :root {
+} :root {
+    --gap-xl: 24px;
+} :root {
+} :root {
+} .system-message__component_1p94c {
+    display: flex;
+    justify-content: center;
+    align-self: stretch;
+    padding-bottom: var(--gap-xl);
+}

package/system-message/modern/components/graphic/index.d.ts

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

package/system-message/modern/components/graphic/index.js

@@ -0,0 +1,5 @@
+export { Graphic } from './Component.js';
+import 'react';
+import 'classnames';
+import '../../Context.js';
+import '../../getDataTestId-db5a8e6a.js';

package/system-message/modern/components/subtitle/Component.d.ts

@@ -0,0 +1,14 @@
+/// <reference types="react" />
+import React from 'react';
+type SubtitleProps = {
+    /**
+     * Дополнительно имя класса
+     */
+    className?: string;
+    /**
+     * Заголовок
+     */
+    children: React.ReactNode;
+};
+declare const Subtitle: React.FC<SubtitleProps>;
+export { Subtitle };

package/system-message/modern/components/subtitle/Component.js

@@ -0,0 +1,14 @@
+import React, { useContext } from 'react';
+import cn from 'classnames';
+import { g as getDataTestId } from '../../getDataTestId-db5a8e6a.js';
+import { SystemMessageContext } from '../../Context.js';
+
+const styles = {"component":"system-message__component_87grs"};
+require('./index.css');
+
+const Subtitle = ({ className, children }) => {
+    const { dataTestId } = useContext(SystemMessageContext);
+    return (React.createElement("span", { className: cn(styles.component, className), "data-test-id": getDataTestId(dataTestId, 'subtitle') }, children));
+};
+
+export { Subtitle };

package/system-message/modern/components/subtitle/index.css

@@ -0,0 +1,27 @@
+/* hash: 1aoiq */
+:root {
+} /* deprecated */ :root {
+    --color-light-text-primary: #0b1f35; /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* 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 */
+} :root {
+} :root {
+
+    /* Hard */
+
+    /* Up */
+
+    /* Hard up */
+} :root {
+} :root {
+    --gap-s: 12px;
+} :root {
+} :root {
+} .system-message__component_87grs {
+    font-size: 16px;
+    line-height: 24px;
+    font-weight: 400;
+
+    text-align: center;
+    color: var(--color-light-text-primary);
+    padding-bottom: var(--gap-s);
+}

package/system-message/modern/components/subtitle/index.d.ts

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

package/system-message/modern/components/subtitle/index.js

@@ -0,0 +1,5 @@
+export { Subtitle } from './Component.js';
+import 'react';
+import 'classnames';
+import '../../Context.js';
+import '../../getDataTestId-db5a8e6a.js';

package/system-message/modern/components/title/Component.d.ts

@@ -0,0 +1,19 @@
+/// <reference types="react" />
+import React from 'react';
+type TitleProps = {
+    /**
+     * Дополнительно имя класса
+     */
+    className?: string;
+    /**
+     * HTML тег
+     * @default h3
+     */
+    tag?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'div';
+    /**
+     * Заголовок
+     */
+    children: React.ReactNode;
+};
+declare const Title: React.FC<TitleProps>;
+export { Title };

package/system-message/modern/components/title/Component.js

@@ -0,0 +1,24 @@
+import React, { useContext } from 'react';
+import cn from 'classnames';
+import { g as getDataTestId } from '../../getDataTestId-db5a8e6a.js';
+import { SystemMessageContext } from '../../Context.js';
+
+const desktopStyles = {"component":"system-message__component_1sday"};
+require('./desktop.css');
+
+const styles = {"component":"system-message__component_no6x7"};
+require('./index.css');
+
+const mobileStyles = {"component":"system-message__component_1cf1t"};
+require('./mobile.css');
+
+const Title = ({ tag = 'h3', className, children }) => {
+    const { dataTestId, view } = useContext(SystemMessageContext);
+    const Component = tag;
+    return (React.createElement(Component, { className: cn(styles.component, className, {
+            [desktopStyles.component]: view === 'desktop',
+            [mobileStyles.component]: view === 'mobile',
+        }), "data-test-id": getDataTestId(dataTestId, 'title') }, children));
+};
+
+export { Title };

package/system-message/modern/components/title/desktop.css

@@ -0,0 +1,24 @@
+/* hash: 1fix6 */
+: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 */
+} :root {
+} :root {
+
+    /* Hard */
+
+    /* Up */
+
+    /* Hard up */
+} :root {
+} :root {
+    --gap-m: 16px;
+} :root {
+} :root {
+} .system-message__component_1sday {
+    font-size: 22px;
+    line-height: 26px;
+    font-weight: 700;
+
+    padding-bottom: var(--gap-m);
+}

package/system-message/modern/components/title/index.css

@@ -0,0 +1,25 @@
+/* hash: 1ef1t */
+:root {
+} /* deprecated */ :root {
+    --color-light-text-primary: #0b1f35; /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* 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 */
+} :root {
+} :root {
+
+    /* Hard */
+
+    /* Up */
+
+    /* Hard up */
+} :root {
+} :root {
+} :root {
+    --font-family-system: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Helvetica,
+        sans-serif;
+} :root {
+} .system-message__component_no6x7 {
+    margin: 0;
+    text-align: center;
+    color: var(--color-light-text-primary);
+    font-family: var(--font-family-system);
+}

package/system-message/modern/components/title/index.d.ts

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

package/system-message/modern/components/title/index.js

@@ -0,0 +1,5 @@
+export { Title } from './Component.js';
+import 'react';
+import 'classnames';
+import '../../Context.js';
+import '../../getDataTestId-db5a8e6a.js';