@cloud-ru/uikit-product-site-article 0.2.2 → 0.2.3

package/dist/cjs/components/Products/helperComponents/index.js

@@ -0,0 +1,17 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./ServiceLight"), exports);

package/dist/cjs/components/Products/index.d.ts

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

package/dist/cjs/components/Products/index.js

@@ -0,0 +1,17 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./Products"), exports);

package/dist/cjs/components/Products/styles.module.css

@@ -0,0 +1,29 @@
+.products{
+  box-sizing:border-box;
+  display:flex;
+  flex-direction:column;
+  gap:24px;
+}
+.products[data-layout-type=tablet]{
+  gap:20px;
+}
+.products[data-layout-type=mobile]{
+  gap:12px;
+}
+
+.label{
+  display:block;
+  color:var(--sys-neutral-text-main, #41424e);
+  margin-bottom:8px;
+}
+
+.tags{
+  display:flex;
+  flex-wrap:wrap;
+  gap:16px;
+}
+.tags[data-layout-type=mobile]{
+  flex-wrap:nowrap;
+  flex-direction:column;
+  gap:12px;
+}

package/dist/cjs/components/Quote/Quote.d.ts

@@ -0,0 +1,8 @@
+import { WithLayoutType } from '@sbercloud/uikit-product-utils';
+export type QuoteProps = WithLayoutType<{
+    text: string;
+    image?: string;
+    name?: string;
+    position?: string;
+}>;
+export declare function Quote(props: QuoteProps): import("react/jsx-runtime").JSX.Element;

package/dist/cjs/components/Quote/Quote.js

@@ -0,0 +1,30 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Quote = Quote;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const typography_1 = require("@snack-uikit/typography");
+const ArticleTypography_1 = require("../ArticleTypography");
+const QuotesSVG_1 = require("./QuotesSVG");
+const styles_module_scss_1 = __importDefault(require('./styles.module.css'));
+function Quote(props) {
+    const { text, image, name, position, layoutType } = props;
+    const typographyProps = (0, react_1.useMemo)(() => {
+        if (layoutType === 'mobile') {
+            return {
+                family: 'sans',
+                purpose: 'body',
+                size: 'm',
+            };
+        }
+        return {
+            family: 'sans',
+            purpose: 'body',
+            size: 'l',
+        };
+    }, [layoutType]);
+    return ((0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.quote, "data-layout-type": layoutType, "data-test-id": 'quote', children: [(0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.iconWrapper, "data-layout-type": layoutType, children: (0, jsx_runtime_1.jsx)(QuotesSVG_1.QuotesSVG, { className: styles_module_scss_1.default.icon }) }), (0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.wrapper, children: [(0, jsx_runtime_1.jsx)(ArticleTypography_1.ArticleTypography, { className: styles_module_scss_1.default.text, layoutType: layoutType, tag: 'p', type: 'body', children: text }), (0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.author, "data-layout-type": layoutType, children: [image && (0, jsx_runtime_1.jsx)("img", { className: styles_module_scss_1.default.authorImage, src: image, alt: '\u0424\u043E\u0442\u043E \u0430\u0432\u0442\u043E\u0440\u0430 \u0446\u0438\u0442\u0430\u0442\u044B' }), (0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.authorNameWrapper, children: [name && ((0, jsx_runtime_1.jsx)(ArticleTypography_1.ArticleTypography, { className: styles_module_scss_1.default.authorName, layoutType: layoutType, tag: 'span', type: 'bodyBold', children: name })), position && ((0, jsx_runtime_1.jsx)(typography_1.Typography, Object.assign({}, typographyProps, { className: styles_module_scss_1.default.authorPosition, children: position })))] })] })] })] }));
+}

package/dist/cjs/components/Quote/QuotesSVG.d.ts

@@ -0,0 +1,3 @@
+export declare function QuotesSVG({ className }: {
+    className?: string;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/cjs/components/Quote/QuotesSVG.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.QuotesSVG = QuotesSVG;
+const jsx_runtime_1 = require("react/jsx-runtime");
+function QuotesSVG({ className }) {
+    return ((0, jsx_runtime_1.jsx)("svg", { width: '72', height: '64', viewBox: '0 0 72 64', fill: 'none', xmlns: 'http://www.w3.org/2000/svg', className: className, children: (0, jsx_runtime_1.jsx)("g", { id: 'Quotes', children: (0, jsx_runtime_1.jsxs)("g", { id: 'Vector', children: [(0, jsx_runtime_1.jsx)("path", { id: 'Vector 1', d: 'M0 51.7263L14.5187 12.2738H35.8522L27.5559 51.7263H0Z', fill: '#DDE0EA' }), (0, jsx_runtime_1.jsx)("path", { id: 'Vector 2', d: 'M36.1484 51.7263L50.6671 12.2738H72.0007L63.7043 51.7263H36.1484Z', fill: '#DDE0EA' })] }) }) }));
+}

package/dist/cjs/components/Quote/index.d.ts

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

package/dist/cjs/components/Quote/index.js

@@ -0,0 +1,17 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./Quote"), exports);

package/dist/cjs/components/Quote/styles.module.css

@@ -0,0 +1,51 @@
+.quote{
+  box-sizing:border-box;
+  display:flex;
+  gap:32px;
+}
+.quote[data-layout-type=mobile]{
+  gap:16px;
+}
+
+.iconWrapper[data-layout-type=mobile]{
+  width:48px;
+}
+
+.icon{
+  width:inherit;
+  height:inherit;
+}
+
+.wrapper{
+  display:flex;
+  flex-direction:column;
+  padding:16px 0;
+  gap:16px;
+}
+
+.text{
+  color:var(--sys-neutral-text-main, #41424e);
+}
+
+.author{
+  display:flex;
+  gap:12px;
+}
+.author[data-layout-type=mobile]{
+  flex-direction:column;
+}
+.author .authorImage{
+  border:var(--border-width-general-xs, 1px) solid var(--sys-neutral-decor-default, #dde0ea);
+  width:48px;
+  height:48px;
+}
+.author .authorNameWrapper{
+  display:flex;
+  flex-direction:column;
+}
+.author .authorNameWrapper .authorName{
+  color:var(--sys-neutral-text-main, #41424e);
+}
+.author .authorNameWrapper .authorPosition{
+  color:var(--sys-neutral-text-light, #8b8e9b);
+}

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

@@ -0,0 +1,9 @@
+export * from './Highlight';
+export * from './Quote';
+export * from './ImageArticle';
+export * from './ArticleLinks';
+export * from './Products';
+export * from './ArticleRichText';
+export * from './ArticleTypography';
+export * from './DropdownShare';
+export * from './FooterArticle';

package/dist/cjs/components/index.js

@@ -0,0 +1,25 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./Highlight"), exports);
+__exportStar(require("./Quote"), exports);
+__exportStar(require("./ImageArticle"), exports);
+__exportStar(require("./ArticleLinks"), exports);
+__exportStar(require("./Products"), exports);
+__exportStar(require("./ArticleRichText"), exports);
+__exportStar(require("./ArticleTypography"), exports);
+__exportStar(require("./DropdownShare"), exports);
+__exportStar(require("./FooterArticle"), exports);

package/dist/cjs/index.d.ts

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

package/dist/cjs/index.js

@@ -0,0 +1,17 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./components"), exports);

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

@@ -0,0 +1,11 @@
+import { MouseEvent } from 'react';
+import { WithLayoutType } from '@sbercloud/uikit-product-utils';
+export type ArticleLink = {
+    id: string;
+    text: string;
+    onClick?: (e: MouseEvent<HTMLAnchorElement>) => void;
+};
+export type ArticleLinksProps = WithLayoutType<{
+    links: ArticleLink[];
+}>;
+export declare function ArticleLinks(props: ArticleLinksProps): import("react/jsx-runtime").JSX.Element;

package/dist/esm/components/ArticleLinks/ArticleLinks.js

@@ -0,0 +1,22 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMemo } from 'react';
+import { Typography } from '@snack-uikit/typography';
+import styles from './styles.module.css';
+export function ArticleLinks(props) {
+    const { layoutType, links } = props;
+    const typographyProps = useMemo(() => {
+        if (layoutType === 'mobile') {
+            return {
+                family: 'sans',
+                purpose: 'title',
+                size: 'm',
+            };
+        }
+        return {
+            family: 'sans',
+            purpose: 'title',
+            size: 'l',
+        };
+    }, [layoutType]);
+    return (_jsxs("div", { className: styles.articleLinks, children: [_jsx(Typography, Object.assign({ className: styles.title }, typographyProps, { tag: 'div', children: "\u0421\u043E\u0434\u0435\u0440\u0436\u0430\u043D\u0438\u0435" })), _jsx("ul", { className: styles.list, "data-test-id": 'article-links', children: links.map(link => (_jsx("li", { className: styles.listItem, children: _jsx("a", { className: styles.link, href: `#${link.id}`, onClick: e => { var _a; return (_a = link.onClick) === null || _a === void 0 ? void 0 : _a.call(link, e); }, children: _jsx(Typography.SansBodyL, { children: link.text }) }) }, link.id))) })] }));
+}

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

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

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

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

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

@@ -0,0 +1,32 @@
+.articleLinks{
+  box-sizing:border-box;
+  padding:24px;
+  border:var(--border-width-general-xs, 1px) var(--border-styles-solid, solid) var(--sys-neutral-decor-default, #dde0ea);
+}
+
+.title{
+  color:var(--sys-neutral-text-main, #41424e);
+  margin-bottom:16px;
+}
+
+.list{
+  margin:0;
+  padding:0 0 0 20px;
+  display:flex;
+  flex-direction:column;
+  gap:16px;
+}
+
+.link{
+  color:var(--sys-primary-text-light, #0ea55b);
+  text-decoration:none;
+}
+.link:hover{
+  text-decoration-line:underline;
+  text-decoration-style:solid;
+  -webkit-text-decoration-skip:ink;
+          text-decoration-skip-ink:auto;
+  text-decoration-thickness:auto;
+  text-underline-offset:auto;
+  text-underline-position:from-font;
+}

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

@@ -0,0 +1,5 @@
+import { WithLayoutType } from '@sbercloud/uikit-product-utils';
+export type ArticleRichTextProps = WithLayoutType<{
+    richText: string;
+}>;
+export declare function ArticleRichText(props: ArticleRichTextProps): import("react/jsx-runtime").JSX.Element;

package/dist/esm/components/ArticleRichText/ArticleRichText.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { ArticleTypography } from '../ArticleTypography';
+import styles from './styles.module.css';
+export function ArticleRichText(props) {
+    const { layoutType, richText } = props;
+    return (_jsx(ArticleTypography, { layoutType: layoutType, tag: 'div', type: 'body', children: _jsx("div", { className: styles.richText, dangerouslySetInnerHTML: { __html: richText } }) }));
+}

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

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

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

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

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

@@ -0,0 +1,36 @@
+.richText{
+  display:flex;
+  flex-direction:column;
+  gap:24px;
+}
+.richText *{
+  color:var(--sys-neutral-text-main, #41424e);
+}
+.richText p{
+  margin:0;
+}
+.richText p:has(br){
+  line-height:24px;
+}
+.richText b,
+.richText strong{
+  font-weight:600;
+}
+.richText a{
+  color:var(--sys-primary-text-light, #0ea55b);
+  text-decoration:none;
+}
+.richText a:hover{
+  text-decoration-line:underline;
+  text-decoration-style:solid;
+  -webkit-text-decoration-skip:ink;
+          text-decoration-skip-ink:auto;
+  text-decoration-thickness:auto;
+  text-underline-offset:auto;
+  text-underline-position:from-font;
+}
+.richText ul,
+.richText ol{
+  margin:0;
+  padding:0 0 0 20px;
+}

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

@@ -0,0 +1,13 @@
+import { ReactNode } from 'react';
+import { WithLayoutType } from '@sbercloud/uikit-product-utils';
+export type ArticleTypographyProps = WithLayoutType<{
+    className?: string;
+    tag: 'span' | 'div' | 'p';
+    type: 'body' | 'bodyBold' | 'bodyLink';
+    children: ReactNode;
+}>;
+export declare function ArticleTypography(props: ArticleTypographyProps): import("react").DetailedReactHTMLElement<{
+    className: string;
+    'data-layout-type': import("@sbercloud/uikit-product-utils").LayoutType;
+    'data-type': "body" | "bodyBold" | "bodyLink";
+}, HTMLElement>;

package/dist/esm/components/ArticleTypography/ArticleTypography.js

@@ -0,0 +1,11 @@
+import cn from 'classnames';
+import { createElement } from 'react';
+import styles from './styles.module.css';
+export function ArticleTypography(props) {
+    const { tag, className, layoutType, type, children } = props;
+    return createElement(tag, {
+        className: cn(styles.typography, className),
+        'data-layout-type': layoutType,
+        'data-type': type,
+    }, children);
+}

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

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

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

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

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

@@ -0,0 +1,32 @@
+.typography{
+  box-sizing:border-box;
+  max-width:100%;
+  margin:0;
+  padding:0;
+  overflow-wrap:break-word;
+  font-family:"SB Sans Text";
+  font-size:18px;
+  font-style:normal;
+  font-weight:400;
+  line-height:26px;
+}
+.typography[data-type=bodyBold]{
+  font-weight:600;
+}
+.typography[data-type=bodyLink]{
+  color:var(--sys-primary-text-light, #0ea55b);
+  text-decoration:none;
+}
+.typography[data-type=bodyLink]:hover{
+  text-decoration-line:underline;
+  text-decoration-style:solid;
+  -webkit-text-decoration-skip:ink;
+          text-decoration-skip-ink:auto;
+  text-decoration-thickness:auto;
+  text-underline-offset:auto;
+  text-underline-position:from-font;
+}
+.typography[data-layout-type=mobile]{
+  font-size:16px;
+  line-height:24px;
+}

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

@@ -0,0 +1,16 @@
+import { ValueOf } from '@snack-uikit/utils';
+declare const SHARE_OPTIONS_TYPE: {
+    Telegram: string;
+    VK: string;
+    Copy: string;
+};
+export type DropdownShareOption = {
+    type: ValueOf<typeof SHARE_OPTIONS_TYPE>;
+    onClick: () => void;
+};
+export type DropdownShareProps = {
+    hideLabel?: boolean;
+    options: DropdownShareOption[];
+};
+export declare function DropdownShare(props: DropdownShareProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/esm/components/DropdownShare/DropdownShare.js

@@ -0,0 +1,40 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { LinkSVG, ShareSVG, TelegramSVG, VkSVG } from '@sbercloud/uikit-product-icons';
+import { ButtonFunction } from '@snack-uikit/button';
+import { Droplist } from '@snack-uikit/list';
+const SHARE_OPTIONS_TYPE = {
+    Telegram: 'telegram',
+    VK: 'vk',
+    Copy: 'copy',
+};
+export function DropdownShare(props) {
+    const { hideLabel, options } = props;
+    const items = options.map(({ type, onClick }) => {
+        switch (type) {
+            case SHARE_OPTIONS_TYPE.Telegram:
+                return {
+                    id: 'telegram',
+                    content: { option: 'Telegram' },
+                    beforeContent: _jsx(TelegramSVG, {}),
+                    onClick,
+                };
+            case SHARE_OPTIONS_TYPE.VK:
+                return {
+                    id: 'vk',
+                    content: { option: 'VK' },
+                    beforeContent: _jsx(VkSVG, {}),
+                    onClick,
+                };
+            case SHARE_OPTIONS_TYPE.Copy:
+                return {
+                    id: 'copy',
+                    content: { option: 'Копировать ссылку' },
+                    beforeContent: _jsx(LinkSVG, {}),
+                    onClick,
+                };
+            default:
+                return {};
+        }
+    });
+    return (_jsx(Droplist, { items: items, size: 'l', closeDroplistOnItemClick: true, children: _jsx(ButtonFunction, { size: 'm', label: !hideLabel ? 'Поделиться' : undefined, icon: _jsx(ShareSVG, {}), "data-test-id": 'dropdown-share-button' }) }));
+}

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

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

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

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

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

@@ -0,0 +1,7 @@
+import { WithLayoutType } from '@sbercloud/uikit-product-utils';
+import { DropdownShareOption } from '../DropdownShare';
+export type FooterArticleProps = WithLayoutType<{
+    releaseDate: string;
+    dropdownOptions: DropdownShareOption[];
+}>;
+export declare function FooterArticle(props: FooterArticleProps): import("react/jsx-runtime").JSX.Element;

package/dist/esm/components/FooterArticle/FooterArticle.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Typography } from '@snack-uikit/typography';
+import { DropdownShare } from '../DropdownShare';
+import styles from './styles.module.css';
+export function FooterArticle(props) {
+    const { layoutType, releaseDate, dropdownOptions } = props;
+    const isMobile = layoutType === 'mobile';
+    return (_jsxs("div", { className: styles.footerArticle, "data-test-id": 'footer-article', children: [_jsx(Typography.SansBodyL, { className: styles.releaseDate, children: releaseDate }), _jsx(DropdownShare, { hideLabel: isMobile, options: dropdownOptions })] }));
+}

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

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

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

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

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

@@ -0,0 +1,10 @@
+.footerArticle{
+  box-sizing:border-box;
+  display:flex;
+  align-items:center;
+  justify-content:space-between;
+}
+
+.releaseDate{
+  color:var(--sys-neutral-text-support, #656774);
+}

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

@@ -0,0 +1,5 @@
+import { WithLayoutType } from '@sbercloud/uikit-product-utils';
+export type HighlightProps = WithLayoutType<{
+    richText: string;
+}>;
+export declare function Highlight(props: HighlightProps): import("react/jsx-runtime").JSX.Element;

package/dist/esm/components/Highlight/Highlight.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { ArticleRichText } from '../ArticleRichText';
+import styles from './styles.module.css';
+export function Highlight(props) {
+    const { layoutType, richText } = props;
+    return (_jsx("div", { className: styles.highlight, "data-test-id": 'highlight', children: _jsx(ArticleRichText, { layoutType: layoutType, richText: richText }) }));
+}

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

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

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

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

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

@@ -0,0 +1,6 @@
+.highlight{
+  box-sizing:border-box;
+  background-color:var(--sys-neutral-background, #eeeff3);
+  padding:24px;
+  color:var(--sys-neutral-text-main, #41424e);
+}

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

@@ -0,0 +1,8 @@
+export type ImageArticleProps = {
+    image: {
+        src: string;
+        alt?: string;
+    };
+    description?: string;
+};
+export declare function ImageArticle(props: ImageArticleProps): import("react/jsx-runtime").JSX.Element;

package/dist/esm/components/ImageArticle/ImageArticle.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Typography } from '@snack-uikit/typography';
+import styles from './styles.module.css';
+const IMG_ALT = 'Blog image';
+export function ImageArticle(props) {
+    const { image, description } = props;
+    return (_jsxs("div", { className: styles.imageArticle, "data-test-id": 'image-article', children: [_jsx("img", { src: image.src, alt: image.alt || IMG_ALT }), _jsx(Typography.SansBodyL, { className: styles.description, children: description })] }));
+}

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

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

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

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

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

@@ -0,0 +1,10 @@
+.imageArticle{
+  box-sizing:border-box;
+  display:flex;
+  flex-direction:column;
+  gap:12px;
+}
+
+.description{
+  color:var(--sys-neutral-text-support, #656774);
+}