@cloud-ru/ds-info-block 1.0.0

package/dist/cjs/style.css

@@ -0,0 +1,144 @@
+.contentLayout{
+  display:flex;
+  flex-direction:column;
+}
+
+.textWrap{
+  display:flex;
+  flex-direction:column;
+}
+
+.footer{
+  position:relative;
+  box-sizing:border-box;
+  width:100%;
+}
+
+.title{
+  color:var(--sn-theme-color-available-version-textMain, var(--sn-brand-color-text-version-main, #41424e));
+}
+
+.description{
+  color:var(--sn-theme-color-available-version-textSecondary, var(--sn-brand-color-text-version-secondary, rgba(65, 66, 78, 0.8)));
+}
+
+.infoBlock{
+  display:flex;
+  box-sizing:border-box;
+}
+.infoBlock[data-size=s]{
+  gap:var(--sn-infoBlock-anatomy-size-s-container-gap, var(--sn-density-spacing-interval-s, var(--sn-primitive-dimension-8, 8px)));
+  max-width:624px;
+}
+.infoBlock[data-size=m]{
+  gap:var(--sn-infoBlock-anatomy-size-m-container-gap, var(--sn-density-spacing-interval-m, var(--sn-primitive-dimension-16, 16px)));
+  max-width:624px;
+}
+.infoBlock[data-size=l]{
+  gap:var(--sn-infoBlock-anatomy-size-l-container-gap, var(--sn-density-spacing-interval-l, var(--sn-primitive-dimension-24, 24px)));
+  max-width:624px;
+}
+.infoBlock[data-align=vertical]{
+  flex-direction:column;
+  align-items:center;
+}
+.infoBlock[data-align=vertical] .contentLayout{
+  align-items:center;
+}
+.infoBlock[data-align=vertical] .textWrap{
+  align-items:center;
+}
+.infoBlock[data-align=vertical] .footer{
+  width:auto;
+  text-align:center;
+}
+.infoBlock[data-align=vertical] .description,
+.infoBlock[data-align=vertical] .title{
+  text-align:center;
+}
+.infoBlock[data-align=horizontal]{
+  flex-direction:row;
+  align-items:flex-start;
+}
+.infoBlock[data-align=horizontal] .contentLayout{
+  flex:1 0 0;
+  align-items:flex-start;
+  min-width:0;
+}
+.infoBlock[data-align=horizontal] .textWrap{
+  align-items:flex-start;
+}
+.infoBlock[data-align=horizontal] .footer{
+  display:flex;
+  justify-content:flex-start;
+}
+.infoBlock[data-align=horizontal] .description,
+.infoBlock[data-align=horizontal] .title{
+  text-align:left;
+}
+.infoBlock[data-size=s] .contentLayout{
+  gap:var(--sn-infoBlock-anatomy-size-s-container-content-gap, var(--sn-density-spacing-interval-m, var(--sn-primitive-dimension-16, 16px)));
+}
+.infoBlock[data-size=s] .textWrap{
+  gap:var(--sn-infoBlock-anatomy-size-s-container-content-text-gap, var(--sn-density-spacing-interval-xs, var(--sn-primitive-dimension-4, 4px)));
+}
+.infoBlock[data-size=s] .title{
+  font-family:var(--sn-regular-title-s-fontFamily, var(--sn-brand-font-fontFamily-regular-title, var(--sn-primitive-fontFamily-brandA-sans, SB Sans Interface)));
+  font-weight:var(--sn-regular-title-s-fontWeight, var(--sn-theme-typography-fontWeight-regular-title-s, var(--sn-brand-font-fontWeight-light-regular-title-s, var(--sn-primitive-font-fontWeightValue-600, 600))));
+  line-height:var(--sn-regular-title-s-lineHeight, var(--sn-density-typography-roleTitle-lineHeightS, var(--sn-primitive-font-lineHeight-by14, 20px)));
+  font-size:var(--sn-regular-title-s-fontSize, var(--sn-density-typography-roleTitle-fontSizeS, var(--sn-primitive-font-fontSize-14, 14px)));
+  letter-spacing:var(--sn-regular-title-s-letterSpacing, var(--sn-primitive-font-letterSpacing-l, 0.15px));
+  paragraph-spacing:var(--sn-regular-title-s-paragraphSpacing, var(--sn-primitive-font-paragraphSpacing-byFontSize14, 7px));
+}
+.infoBlock[data-size=s] .description{
+  font-family:var(--sn-regular-body-s-fontFamily, var(--sn-brand-font-fontFamily-regular-body, var(--sn-primitive-fontFamily-brandA-sans, SB Sans Interface)));
+  font-weight:var(--sn-regular-body-s-fontWeight, var(--sn-theme-typography-fontWeight-regular-body-s, var(--sn-brand-font-fontWeight-light-regular-body-s, var(--sn-primitive-font-fontWeightValue-400, 400))));
+  line-height:var(--sn-regular-body-s-lineHeight, var(--sn-density-typography-roleBody-lineHeightS, var(--sn-primitive-font-lineHeight-by14, 20px)));
+  font-size:var(--sn-regular-body-s-fontSize, var(--sn-density-typography-roleBody-fontSizeS, var(--sn-primitive-font-fontSize-14, 14px)));
+  letter-spacing:var(--sn-regular-body-s-letterSpacing, var(--sn-primitive-font-letterSpacing-m, 0.1px));
+  paragraph-spacing:var(--sn-regular-body-s-paragraphSpacing, var(--sn-primitive-font-paragraphSpacing-byFontSize12, 6px));
+}
+.infoBlock[data-size=m] .contentLayout{
+  gap:var(--sn-infoBlock-anatomy-size-m-container-content-gap, var(--sn-density-spacing-interval-l, var(--sn-primitive-dimension-24, 24px)));
+}
+.infoBlock[data-size=m] .textWrap{
+  gap:var(--sn-infoBlock-anatomy-size-m-container-content-text-gap, var(--sn-density-spacing-interval-s, var(--sn-primitive-dimension-8, 8px)));
+}
+.infoBlock[data-size=m] .title{
+  font-family:var(--sn-regular-title-m-fontFamily, var(--sn-brand-font-fontFamily-regular-title, var(--sn-primitive-fontFamily-brandA-sans, SB Sans Interface)));
+  font-weight:var(--sn-regular-title-m-fontWeight, var(--sn-theme-typography-fontWeight-regular-title-m, var(--sn-brand-font-fontWeight-light-regular-title-m, var(--sn-primitive-font-fontWeightValue-600, 600))));
+  line-height:var(--sn-regular-title-m-lineHeight, var(--sn-density-typography-roleTitle-lineHeightM, var(--sn-primitive-font-lineHeight-by16, 24px)));
+  font-size:var(--sn-regular-title-m-fontSize, var(--sn-density-typography-roleTitle-fontSizeM, var(--sn-primitive-font-fontSize-16, 16px)));
+  letter-spacing:var(--sn-regular-title-m-letterSpacing, var(--sn-primitive-font-letterSpacing-l, 0.15px));
+  paragraph-spacing:var(--sn-regular-title-m-paragraphSpacing, var(--sn-primitive-font-paragraphSpacing-byFontSize16, 8px));
+}
+.infoBlock[data-size=m] .description{
+  font-family:var(--sn-regular-body-m-fontFamily, var(--sn-brand-font-fontFamily-regular-body, var(--sn-primitive-fontFamily-brandA-sans, SB Sans Interface)));
+  font-weight:var(--sn-regular-body-m-fontWeight, var(--sn-theme-typography-fontWeight-regular-body-m, var(--sn-brand-font-fontWeight-light-regular-body-m, var(--sn-primitive-font-fontWeightValue-400, 400))));
+  line-height:var(--sn-regular-body-m-lineHeight, var(--sn-density-typography-roleBody-lineHeightM, var(--sn-primitive-font-lineHeight-by16, 24px)));
+  font-size:var(--sn-regular-body-m-fontSize, var(--sn-density-typography-roleBody-fontSizeM, var(--sn-primitive-font-fontSize-16, 16px)));
+  letter-spacing:var(--sn-regular-body-m-letterSpacing, var(--sn-primitive-font-letterSpacing-m, 0.1px));
+  paragraph-spacing:var(--sn-regular-body-m-paragraphSpacing, var(--sn-primitive-font-paragraphSpacing-byFontSize14, 7px));
+}
+.infoBlock[data-size=l] .contentLayout{
+  gap:var(--sn-infoBlock-anatomy-size-l-container-content-gap, var(--sn-density-spacing-interval-l, var(--sn-primitive-dimension-24, 24px)));
+}
+.infoBlock[data-size=l] .textWrap{
+  gap:var(--sn-infoBlock-anatomy-size-l-container-content-text-gap, var(--sn-density-spacing-interval-s, var(--sn-primitive-dimension-8, 8px)));
+}
+.infoBlock[data-size=l] .title{
+  font-family:var(--sn-regular-title-l-fontFamily, var(--sn-brand-font-fontFamily-regular-title, var(--sn-primitive-fontFamily-brandA-sans, SB Sans Interface)));
+  font-weight:var(--sn-regular-title-l-fontWeight, var(--sn-theme-typography-fontWeight-regular-title-l, var(--sn-brand-font-fontWeight-light-regular-title-l, var(--sn-primitive-font-fontWeightValue-600, 600))));
+  line-height:var(--sn-regular-title-l-lineHeight, var(--sn-density-typography-roleTitle-lineHeightL, var(--sn-primitive-font-lineHeight-by20, 28px)));
+  font-size:var(--sn-regular-title-l-fontSize, var(--sn-density-typography-roleTitle-fontSizeL, var(--sn-primitive-font-fontSize-20, 20px)));
+  letter-spacing:var(--sn-regular-title-l-letterSpacing, var(--sn-primitive-font-letterSpacing-l, 0.15px));
+  paragraph-spacing:var(--sn-regular-title-l-paragraphSpacing, var(--sn-primitive-font-paragraphSpacing-byFontSize20, 10px));
+}
+.infoBlock[data-size=l] .description{
+  font-family:var(--sn-regular-body-l-fontFamily, var(--sn-brand-font-fontFamily-regular-body, var(--sn-primitive-fontFamily-brandA-sans, SB Sans Interface)));
+  font-weight:var(--sn-regular-body-l-fontWeight, var(--sn-theme-typography-fontWeight-regular-body-l, var(--sn-brand-font-fontWeight-light-regular-body-l, var(--sn-primitive-font-fontWeightValue-400, 400))));
+  line-height:var(--sn-regular-body-l-lineHeight, var(--sn-density-typography-roleBody-lineHeightL, var(--sn-primitive-font-lineHeight-by20, 28px)));
+  font-size:var(--sn-regular-body-l-fontSize, var(--sn-density-typography-roleBody-fontSizeL, var(--sn-primitive-font-fontSize-20, 20px)));
+  letter-spacing:var(--sn-regular-body-l-letterSpacing, var(--sn-primitive-font-letterSpacing-m, 0.1px));
+  paragraph-spacing:var(--sn-regular-body-l-paragraphSpacing, var(--sn-primitive-font-paragraphSpacing-byFontSize16, 8px));
+}

package/dist/cjs/types.d.ts

@@ -0,0 +1,4 @@
+import { ValueOf } from '@cloud-ru/ds-utils';
+import { ALIGN, SIZE } from './constants';
+export type Size = ValueOf<typeof SIZE>;
+export type Align = ValueOf<typeof ALIGN>;

package/dist/cjs/types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/esm/components/InfoBlock/InfoBlock.d.ts

@@ -0,0 +1,21 @@
+import { IconPredefinedProps } from '@cloud-ru/ds-icon-predefined';
+import { WithSupportProps } from '@cloud-ru/ds-utils';
+import { ReactNode } from 'react';
+import { Align, Size } from '../../types.js';
+export type InfoBlockProps = WithSupportProps<{
+    /** Заголовок */
+    title?: string;
+    /** Подзаголовок */
+    content?: ReactNode;
+    /** Иконка */
+    icon?: IconPredefinedProps;
+    /** Размер */
+    size?: Size;
+    /** Расположение элементов */
+    align?: Align;
+    /** Вложенный контент (например ButtonGroup) */
+    footer?: ReactNode;
+    /** Дополнительный класс */
+    className?: string;
+}>;
+export declare function InfoBlock({ title, content, icon, size, footer, align, className, ...rest }: InfoBlockProps): import("react/jsx-runtime").JSX.Element;

package/dist/esm/components/InfoBlock/InfoBlock.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { IconPredefined } from '@cloud-ru/ds-icon-predefined';
+import { extractSupportProps } from '@cloud-ru/ds-utils';
+import cn from 'classnames';
+import { ALIGN, SIZE, SIZE_TO_ICON_SIZE, TEST_IDS } from '../../constants.js';
+import styles from './styles.module.css';
+export function InfoBlock({ title, content, icon, size = SIZE.M, footer, align = ALIGN.Vertical, className, ...rest }) {
+    const iconSize = SIZE_TO_ICON_SIZE[size];
+    // Пустые обёртки не рендерим: иначе их зазоры набегают там, где содержимого нет.
+    const hasText = Boolean(title || content);
+    return (_jsxs("div", { className: cn(styles.infoBlock, className), "data-size": size, "data-align": align, ...extractSupportProps(rest), children: [icon && (_jsx(IconPredefined, { icon: icon.icon, appearance: icon.appearance ?? 'primary', background: icon.background ?? true, size: iconSize, "data-test-id": TEST_IDS.icon })), (hasText || footer) && (_jsxs("div", { className: styles.contentLayout, children: [hasText && (_jsxs("div", { className: styles.textWrap, children: [title && (_jsx("div", { className: styles.title, "data-test-id": TEST_IDS.title, children: title })), content && (_jsx("div", { className: styles.description, "data-test-id": TEST_IDS.content, children: content }))] })), footer && (_jsx("div", { className: styles.footer, "data-test-id": TEST_IDS.footer, children: footer }))] }))] }));
+}

package/dist/esm/components/InfoBlock/index.d.ts

@@ -0,0 +1 @@
+export * from './InfoBlock.js';

package/dist/esm/components/InfoBlock/index.js

@@ -0,0 +1 @@
+export * from './InfoBlock.js';

package/dist/esm/components/InfoBlock/styles.module.css

@@ -0,0 +1,144 @@
+.contentLayout{
+  display:flex;
+  flex-direction:column;
+}
+
+.textWrap{
+  display:flex;
+  flex-direction:column;
+}
+
+.footer{
+  position:relative;
+  box-sizing:border-box;
+  width:100%;
+}
+
+.title{
+  color:var(--sn-theme-color-available-version-textMain, var(--sn-brand-color-text-version-main, #41424e));
+}
+
+.description{
+  color:var(--sn-theme-color-available-version-textSecondary, var(--sn-brand-color-text-version-secondary, rgba(65, 66, 78, 0.8)));
+}
+
+.infoBlock{
+  display:flex;
+  box-sizing:border-box;
+}
+.infoBlock[data-size=s]{
+  gap:var(--sn-infoBlock-anatomy-size-s-container-gap, var(--sn-density-spacing-interval-s, var(--sn-primitive-dimension-8, 8px)));
+  max-width:624px;
+}
+.infoBlock[data-size=m]{
+  gap:var(--sn-infoBlock-anatomy-size-m-container-gap, var(--sn-density-spacing-interval-m, var(--sn-primitive-dimension-16, 16px)));
+  max-width:624px;
+}
+.infoBlock[data-size=l]{
+  gap:var(--sn-infoBlock-anatomy-size-l-container-gap, var(--sn-density-spacing-interval-l, var(--sn-primitive-dimension-24, 24px)));
+  max-width:624px;
+}
+.infoBlock[data-align=vertical]{
+  flex-direction:column;
+  align-items:center;
+}
+.infoBlock[data-align=vertical] .contentLayout{
+  align-items:center;
+}
+.infoBlock[data-align=vertical] .textWrap{
+  align-items:center;
+}
+.infoBlock[data-align=vertical] .footer{
+  width:auto;
+  text-align:center;
+}
+.infoBlock[data-align=vertical] .description,
+.infoBlock[data-align=vertical] .title{
+  text-align:center;
+}
+.infoBlock[data-align=horizontal]{
+  flex-direction:row;
+  align-items:flex-start;
+}
+.infoBlock[data-align=horizontal] .contentLayout{
+  flex:1 0 0;
+  align-items:flex-start;
+  min-width:0;
+}
+.infoBlock[data-align=horizontal] .textWrap{
+  align-items:flex-start;
+}
+.infoBlock[data-align=horizontal] .footer{
+  display:flex;
+  justify-content:flex-start;
+}
+.infoBlock[data-align=horizontal] .description,
+.infoBlock[data-align=horizontal] .title{
+  text-align:left;
+}
+.infoBlock[data-size=s] .contentLayout{
+  gap:var(--sn-infoBlock-anatomy-size-s-container-content-gap, var(--sn-density-spacing-interval-m, var(--sn-primitive-dimension-16, 16px)));
+}
+.infoBlock[data-size=s] .textWrap{
+  gap:var(--sn-infoBlock-anatomy-size-s-container-content-text-gap, var(--sn-density-spacing-interval-xs, var(--sn-primitive-dimension-4, 4px)));
+}
+.infoBlock[data-size=s] .title{
+  font-family:var(--sn-regular-title-s-fontFamily, var(--sn-brand-font-fontFamily-regular-title, var(--sn-primitive-fontFamily-brandA-sans, SB Sans Interface)));
+  font-weight:var(--sn-regular-title-s-fontWeight, var(--sn-theme-typography-fontWeight-regular-title-s, var(--sn-brand-font-fontWeight-light-regular-title-s, var(--sn-primitive-font-fontWeightValue-600, 600))));
+  line-height:var(--sn-regular-title-s-lineHeight, var(--sn-density-typography-roleTitle-lineHeightS, var(--sn-primitive-font-lineHeight-by14, 20px)));
+  font-size:var(--sn-regular-title-s-fontSize, var(--sn-density-typography-roleTitle-fontSizeS, var(--sn-primitive-font-fontSize-14, 14px)));
+  letter-spacing:var(--sn-regular-title-s-letterSpacing, var(--sn-primitive-font-letterSpacing-l, 0.15px));
+  paragraph-spacing:var(--sn-regular-title-s-paragraphSpacing, var(--sn-primitive-font-paragraphSpacing-byFontSize14, 7px));
+}
+.infoBlock[data-size=s] .description{
+  font-family:var(--sn-regular-body-s-fontFamily, var(--sn-brand-font-fontFamily-regular-body, var(--sn-primitive-fontFamily-brandA-sans, SB Sans Interface)));
+  font-weight:var(--sn-regular-body-s-fontWeight, var(--sn-theme-typography-fontWeight-regular-body-s, var(--sn-brand-font-fontWeight-light-regular-body-s, var(--sn-primitive-font-fontWeightValue-400, 400))));
+  line-height:var(--sn-regular-body-s-lineHeight, var(--sn-density-typography-roleBody-lineHeightS, var(--sn-primitive-font-lineHeight-by14, 20px)));
+  font-size:var(--sn-regular-body-s-fontSize, var(--sn-density-typography-roleBody-fontSizeS, var(--sn-primitive-font-fontSize-14, 14px)));
+  letter-spacing:var(--sn-regular-body-s-letterSpacing, var(--sn-primitive-font-letterSpacing-m, 0.1px));
+  paragraph-spacing:var(--sn-regular-body-s-paragraphSpacing, var(--sn-primitive-font-paragraphSpacing-byFontSize12, 6px));
+}
+.infoBlock[data-size=m] .contentLayout{
+  gap:var(--sn-infoBlock-anatomy-size-m-container-content-gap, var(--sn-density-spacing-interval-l, var(--sn-primitive-dimension-24, 24px)));
+}
+.infoBlock[data-size=m] .textWrap{
+  gap:var(--sn-infoBlock-anatomy-size-m-container-content-text-gap, var(--sn-density-spacing-interval-s, var(--sn-primitive-dimension-8, 8px)));
+}
+.infoBlock[data-size=m] .title{
+  font-family:var(--sn-regular-title-m-fontFamily, var(--sn-brand-font-fontFamily-regular-title, var(--sn-primitive-fontFamily-brandA-sans, SB Sans Interface)));
+  font-weight:var(--sn-regular-title-m-fontWeight, var(--sn-theme-typography-fontWeight-regular-title-m, var(--sn-brand-font-fontWeight-light-regular-title-m, var(--sn-primitive-font-fontWeightValue-600, 600))));
+  line-height:var(--sn-regular-title-m-lineHeight, var(--sn-density-typography-roleTitle-lineHeightM, var(--sn-primitive-font-lineHeight-by16, 24px)));
+  font-size:var(--sn-regular-title-m-fontSize, var(--sn-density-typography-roleTitle-fontSizeM, var(--sn-primitive-font-fontSize-16, 16px)));
+  letter-spacing:var(--sn-regular-title-m-letterSpacing, var(--sn-primitive-font-letterSpacing-l, 0.15px));
+  paragraph-spacing:var(--sn-regular-title-m-paragraphSpacing, var(--sn-primitive-font-paragraphSpacing-byFontSize16, 8px));
+}
+.infoBlock[data-size=m] .description{
+  font-family:var(--sn-regular-body-m-fontFamily, var(--sn-brand-font-fontFamily-regular-body, var(--sn-primitive-fontFamily-brandA-sans, SB Sans Interface)));
+  font-weight:var(--sn-regular-body-m-fontWeight, var(--sn-theme-typography-fontWeight-regular-body-m, var(--sn-brand-font-fontWeight-light-regular-body-m, var(--sn-primitive-font-fontWeightValue-400, 400))));
+  line-height:var(--sn-regular-body-m-lineHeight, var(--sn-density-typography-roleBody-lineHeightM, var(--sn-primitive-font-lineHeight-by16, 24px)));
+  font-size:var(--sn-regular-body-m-fontSize, var(--sn-density-typography-roleBody-fontSizeM, var(--sn-primitive-font-fontSize-16, 16px)));
+  letter-spacing:var(--sn-regular-body-m-letterSpacing, var(--sn-primitive-font-letterSpacing-m, 0.1px));
+  paragraph-spacing:var(--sn-regular-body-m-paragraphSpacing, var(--sn-primitive-font-paragraphSpacing-byFontSize14, 7px));
+}
+.infoBlock[data-size=l] .contentLayout{
+  gap:var(--sn-infoBlock-anatomy-size-l-container-content-gap, var(--sn-density-spacing-interval-l, var(--sn-primitive-dimension-24, 24px)));
+}
+.infoBlock[data-size=l] .textWrap{
+  gap:var(--sn-infoBlock-anatomy-size-l-container-content-text-gap, var(--sn-density-spacing-interval-s, var(--sn-primitive-dimension-8, 8px)));
+}
+.infoBlock[data-size=l] .title{
+  font-family:var(--sn-regular-title-l-fontFamily, var(--sn-brand-font-fontFamily-regular-title, var(--sn-primitive-fontFamily-brandA-sans, SB Sans Interface)));
+  font-weight:var(--sn-regular-title-l-fontWeight, var(--sn-theme-typography-fontWeight-regular-title-l, var(--sn-brand-font-fontWeight-light-regular-title-l, var(--sn-primitive-font-fontWeightValue-600, 600))));
+  line-height:var(--sn-regular-title-l-lineHeight, var(--sn-density-typography-roleTitle-lineHeightL, var(--sn-primitive-font-lineHeight-by20, 28px)));
+  font-size:var(--sn-regular-title-l-fontSize, var(--sn-density-typography-roleTitle-fontSizeL, var(--sn-primitive-font-fontSize-20, 20px)));
+  letter-spacing:var(--sn-regular-title-l-letterSpacing, var(--sn-primitive-font-letterSpacing-l, 0.15px));
+  paragraph-spacing:var(--sn-regular-title-l-paragraphSpacing, var(--sn-primitive-font-paragraphSpacing-byFontSize20, 10px));
+}
+.infoBlock[data-size=l] .description{
+  font-family:var(--sn-regular-body-l-fontFamily, var(--sn-brand-font-fontFamily-regular-body, var(--sn-primitive-fontFamily-brandA-sans, SB Sans Interface)));
+  font-weight:var(--sn-regular-body-l-fontWeight, var(--sn-theme-typography-fontWeight-regular-body-l, var(--sn-brand-font-fontWeight-light-regular-body-l, var(--sn-primitive-font-fontWeightValue-400, 400))));
+  line-height:var(--sn-regular-body-l-lineHeight, var(--sn-density-typography-roleBody-lineHeightL, var(--sn-primitive-font-lineHeight-by20, 28px)));
+  font-size:var(--sn-regular-body-l-fontSize, var(--sn-density-typography-roleBody-fontSizeL, var(--sn-primitive-font-fontSize-20, 20px)));
+  letter-spacing:var(--sn-regular-body-l-letterSpacing, var(--sn-primitive-font-letterSpacing-m, 0.1px));
+  paragraph-spacing:var(--sn-regular-body-l-paragraphSpacing, var(--sn-primitive-font-paragraphSpacing-byFontSize16, 8px));
+}

package/dist/esm/components/index.d.ts

@@ -0,0 +1 @@
+export * from './InfoBlock/index.js';

package/dist/esm/components/index.js

@@ -0,0 +1 @@
+export * from './InfoBlock/index.js';

package/dist/esm/constants.d.ts

@@ -0,0 +1,21 @@
+export declare const SIZE: {
+    readonly S: "s";
+    readonly M: "m";
+    readonly L: "l";
+};
+export declare const ALIGN: {
+    readonly Vertical: "vertical";
+    readonly Horizontal: "horizontal";
+};
+export declare const TEST_IDS: {
+    root: string;
+    icon: string;
+    title: string;
+    content: string;
+    footer: string;
+};
+export declare const SIZE_TO_ICON_SIZE: {
+    s: "m";
+    m: "l";
+    l: "5xl";
+};

package/dist/esm/constants.js

@@ -0,0 +1,21 @@
+export const SIZE = {
+    S: 's',
+    M: 'm',
+    L: 'l',
+};
+export const ALIGN = {
+    Vertical: 'vertical',
+    Horizontal: 'horizontal',
+};
+export const TEST_IDS = {
+    root: 'info-block',
+    icon: 'info-block__icon',
+    title: 'info-block__title',
+    content: 'info-block__content',
+    footer: 'info-block__footer',
+};
+export const SIZE_TO_ICON_SIZE = {
+    s: 'm',
+    m: 'l',
+    l: '5xl',
+};

package/dist/esm/index.d.ts

@@ -0,0 +1,3 @@
+export * from './components/index.js';
+export * from './constants.js';
+export * from './types.js';

package/dist/esm/index.js

@@ -0,0 +1,3 @@
+export * from './components/index.js';
+export * from './constants.js';
+export * from './types.js';

package/dist/esm/style.css

@@ -0,0 +1,144 @@
+.contentLayout{
+  display:flex;
+  flex-direction:column;
+}
+
+.textWrap{
+  display:flex;
+  flex-direction:column;
+}
+
+.footer{
+  position:relative;
+  box-sizing:border-box;
+  width:100%;
+}
+
+.title{
+  color:var(--sn-theme-color-available-version-textMain, var(--sn-brand-color-text-version-main, #41424e));
+}
+
+.description{
+  color:var(--sn-theme-color-available-version-textSecondary, var(--sn-brand-color-text-version-secondary, rgba(65, 66, 78, 0.8)));
+}
+
+.infoBlock{
+  display:flex;
+  box-sizing:border-box;
+}
+.infoBlock[data-size=s]{
+  gap:var(--sn-infoBlock-anatomy-size-s-container-gap, var(--sn-density-spacing-interval-s, var(--sn-primitive-dimension-8, 8px)));
+  max-width:624px;
+}
+.infoBlock[data-size=m]{
+  gap:var(--sn-infoBlock-anatomy-size-m-container-gap, var(--sn-density-spacing-interval-m, var(--sn-primitive-dimension-16, 16px)));
+  max-width:624px;
+}
+.infoBlock[data-size=l]{
+  gap:var(--sn-infoBlock-anatomy-size-l-container-gap, var(--sn-density-spacing-interval-l, var(--sn-primitive-dimension-24, 24px)));
+  max-width:624px;
+}
+.infoBlock[data-align=vertical]{
+  flex-direction:column;
+  align-items:center;
+}
+.infoBlock[data-align=vertical] .contentLayout{
+  align-items:center;
+}
+.infoBlock[data-align=vertical] .textWrap{
+  align-items:center;
+}
+.infoBlock[data-align=vertical] .footer{
+  width:auto;
+  text-align:center;
+}
+.infoBlock[data-align=vertical] .description,
+.infoBlock[data-align=vertical] .title{
+  text-align:center;
+}
+.infoBlock[data-align=horizontal]{
+  flex-direction:row;
+  align-items:flex-start;
+}
+.infoBlock[data-align=horizontal] .contentLayout{
+  flex:1 0 0;
+  align-items:flex-start;
+  min-width:0;
+}
+.infoBlock[data-align=horizontal] .textWrap{
+  align-items:flex-start;
+}
+.infoBlock[data-align=horizontal] .footer{
+  display:flex;
+  justify-content:flex-start;
+}
+.infoBlock[data-align=horizontal] .description,
+.infoBlock[data-align=horizontal] .title{
+  text-align:left;
+}
+.infoBlock[data-size=s] .contentLayout{
+  gap:var(--sn-infoBlock-anatomy-size-s-container-content-gap, var(--sn-density-spacing-interval-m, var(--sn-primitive-dimension-16, 16px)));
+}
+.infoBlock[data-size=s] .textWrap{
+  gap:var(--sn-infoBlock-anatomy-size-s-container-content-text-gap, var(--sn-density-spacing-interval-xs, var(--sn-primitive-dimension-4, 4px)));
+}
+.infoBlock[data-size=s] .title{
+  font-family:var(--sn-regular-title-s-fontFamily, var(--sn-brand-font-fontFamily-regular-title, var(--sn-primitive-fontFamily-brandA-sans, SB Sans Interface)));
+  font-weight:var(--sn-regular-title-s-fontWeight, var(--sn-theme-typography-fontWeight-regular-title-s, var(--sn-brand-font-fontWeight-light-regular-title-s, var(--sn-primitive-font-fontWeightValue-600, 600))));
+  line-height:var(--sn-regular-title-s-lineHeight, var(--sn-density-typography-roleTitle-lineHeightS, var(--sn-primitive-font-lineHeight-by14, 20px)));
+  font-size:var(--sn-regular-title-s-fontSize, var(--sn-density-typography-roleTitle-fontSizeS, var(--sn-primitive-font-fontSize-14, 14px)));
+  letter-spacing:var(--sn-regular-title-s-letterSpacing, var(--sn-primitive-font-letterSpacing-l, 0.15px));
+  paragraph-spacing:var(--sn-regular-title-s-paragraphSpacing, var(--sn-primitive-font-paragraphSpacing-byFontSize14, 7px));
+}
+.infoBlock[data-size=s] .description{
+  font-family:var(--sn-regular-body-s-fontFamily, var(--sn-brand-font-fontFamily-regular-body, var(--sn-primitive-fontFamily-brandA-sans, SB Sans Interface)));
+  font-weight:var(--sn-regular-body-s-fontWeight, var(--sn-theme-typography-fontWeight-regular-body-s, var(--sn-brand-font-fontWeight-light-regular-body-s, var(--sn-primitive-font-fontWeightValue-400, 400))));
+  line-height:var(--sn-regular-body-s-lineHeight, var(--sn-density-typography-roleBody-lineHeightS, var(--sn-primitive-font-lineHeight-by14, 20px)));
+  font-size:var(--sn-regular-body-s-fontSize, var(--sn-density-typography-roleBody-fontSizeS, var(--sn-primitive-font-fontSize-14, 14px)));
+  letter-spacing:var(--sn-regular-body-s-letterSpacing, var(--sn-primitive-font-letterSpacing-m, 0.1px));
+  paragraph-spacing:var(--sn-regular-body-s-paragraphSpacing, var(--sn-primitive-font-paragraphSpacing-byFontSize12, 6px));
+}
+.infoBlock[data-size=m] .contentLayout{
+  gap:var(--sn-infoBlock-anatomy-size-m-container-content-gap, var(--sn-density-spacing-interval-l, var(--sn-primitive-dimension-24, 24px)));
+}
+.infoBlock[data-size=m] .textWrap{
+  gap:var(--sn-infoBlock-anatomy-size-m-container-content-text-gap, var(--sn-density-spacing-interval-s, var(--sn-primitive-dimension-8, 8px)));
+}
+.infoBlock[data-size=m] .title{
+  font-family:var(--sn-regular-title-m-fontFamily, var(--sn-brand-font-fontFamily-regular-title, var(--sn-primitive-fontFamily-brandA-sans, SB Sans Interface)));
+  font-weight:var(--sn-regular-title-m-fontWeight, var(--sn-theme-typography-fontWeight-regular-title-m, var(--sn-brand-font-fontWeight-light-regular-title-m, var(--sn-primitive-font-fontWeightValue-600, 600))));
+  line-height:var(--sn-regular-title-m-lineHeight, var(--sn-density-typography-roleTitle-lineHeightM, var(--sn-primitive-font-lineHeight-by16, 24px)));
+  font-size:var(--sn-regular-title-m-fontSize, var(--sn-density-typography-roleTitle-fontSizeM, var(--sn-primitive-font-fontSize-16, 16px)));
+  letter-spacing:var(--sn-regular-title-m-letterSpacing, var(--sn-primitive-font-letterSpacing-l, 0.15px));
+  paragraph-spacing:var(--sn-regular-title-m-paragraphSpacing, var(--sn-primitive-font-paragraphSpacing-byFontSize16, 8px));
+}
+.infoBlock[data-size=m] .description{
+  font-family:var(--sn-regular-body-m-fontFamily, var(--sn-brand-font-fontFamily-regular-body, var(--sn-primitive-fontFamily-brandA-sans, SB Sans Interface)));
+  font-weight:var(--sn-regular-body-m-fontWeight, var(--sn-theme-typography-fontWeight-regular-body-m, var(--sn-brand-font-fontWeight-light-regular-body-m, var(--sn-primitive-font-fontWeightValue-400, 400))));
+  line-height:var(--sn-regular-body-m-lineHeight, var(--sn-density-typography-roleBody-lineHeightM, var(--sn-primitive-font-lineHeight-by16, 24px)));
+  font-size:var(--sn-regular-body-m-fontSize, var(--sn-density-typography-roleBody-fontSizeM, var(--sn-primitive-font-fontSize-16, 16px)));
+  letter-spacing:var(--sn-regular-body-m-letterSpacing, var(--sn-primitive-font-letterSpacing-m, 0.1px));
+  paragraph-spacing:var(--sn-regular-body-m-paragraphSpacing, var(--sn-primitive-font-paragraphSpacing-byFontSize14, 7px));
+}
+.infoBlock[data-size=l] .contentLayout{
+  gap:var(--sn-infoBlock-anatomy-size-l-container-content-gap, var(--sn-density-spacing-interval-l, var(--sn-primitive-dimension-24, 24px)));
+}
+.infoBlock[data-size=l] .textWrap{
+  gap:var(--sn-infoBlock-anatomy-size-l-container-content-text-gap, var(--sn-density-spacing-interval-s, var(--sn-primitive-dimension-8, 8px)));
+}
+.infoBlock[data-size=l] .title{
+  font-family:var(--sn-regular-title-l-fontFamily, var(--sn-brand-font-fontFamily-regular-title, var(--sn-primitive-fontFamily-brandA-sans, SB Sans Interface)));
+  font-weight:var(--sn-regular-title-l-fontWeight, var(--sn-theme-typography-fontWeight-regular-title-l, var(--sn-brand-font-fontWeight-light-regular-title-l, var(--sn-primitive-font-fontWeightValue-600, 600))));
+  line-height:var(--sn-regular-title-l-lineHeight, var(--sn-density-typography-roleTitle-lineHeightL, var(--sn-primitive-font-lineHeight-by20, 28px)));
+  font-size:var(--sn-regular-title-l-fontSize, var(--sn-density-typography-roleTitle-fontSizeL, var(--sn-primitive-font-fontSize-20, 20px)));
+  letter-spacing:var(--sn-regular-title-l-letterSpacing, var(--sn-primitive-font-letterSpacing-l, 0.15px));
+  paragraph-spacing:var(--sn-regular-title-l-paragraphSpacing, var(--sn-primitive-font-paragraphSpacing-byFontSize20, 10px));
+}
+.infoBlock[data-size=l] .description{
+  font-family:var(--sn-regular-body-l-fontFamily, var(--sn-brand-font-fontFamily-regular-body, var(--sn-primitive-fontFamily-brandA-sans, SB Sans Interface)));
+  font-weight:var(--sn-regular-body-l-fontWeight, var(--sn-theme-typography-fontWeight-regular-body-l, var(--sn-brand-font-fontWeight-light-regular-body-l, var(--sn-primitive-font-fontWeightValue-400, 400))));
+  line-height:var(--sn-regular-body-l-lineHeight, var(--sn-density-typography-roleBody-lineHeightL, var(--sn-primitive-font-lineHeight-by20, 28px)));
+  font-size:var(--sn-regular-body-l-fontSize, var(--sn-density-typography-roleBody-fontSizeL, var(--sn-primitive-font-fontSize-20, 20px)));
+  letter-spacing:var(--sn-regular-body-l-letterSpacing, var(--sn-primitive-font-letterSpacing-m, 0.1px));
+  paragraph-spacing:var(--sn-regular-body-l-paragraphSpacing, var(--sn-primitive-font-paragraphSpacing-byFontSize16, 8px));
+}

package/dist/esm/types.d.ts

@@ -0,0 +1,4 @@
+import { ValueOf } from '@cloud-ru/ds-utils';
+import { ALIGN, SIZE } from './constants.js';
+export type Size = ValueOf<typeof SIZE>;
+export type Align = ValueOf<typeof ALIGN>;

package/dist/esm/types.js

@@ -0,0 +1 @@
+export {};