@cloud-ru/uikit-product-site-hero 0.5.40 → 0.5.42

package/CHANGELOG.md

@@ -3,6 +3,33 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 0.5.42 (2025-11-13)
+
+### Only dependencies have been changed
+* [@cloud-ru/uikit-product-button-predefined@0.7.6](https://gitverse.ru/cloud-ru-tech/uikit-product/-/blob/master/packages/button-predefined/CHANGELOG.md)
+* [@cloud-ru/uikit-product-icons@15.1.3](https://gitverse.ru/cloud-ru-tech/uikit-product/-/blob/master/packages/icons/CHANGELOG.md)
+* [@cloud-ru/uikit-product-site-layout@0.2.4](https://gitverse.ru/cloud-ru-tech/uikit-product/-/blob/master/packages/site-layout/CHANGELOG.md)
+* [@cloud-ru/uikit-product-site-media@0.1.34](https://gitverse.ru/cloud-ru-tech/uikit-product/-/blob/master/packages/site-media/CHANGELOG.md)
+* [@cloud-ru/uikit-product-site-navbar@0.2.13](https://gitverse.ru/cloud-ru-tech/uikit-product/-/blob/master/packages/site-navbar/CHANGELOG.md)
+* [@cloud-ru/uikit-product-site-rich-text@0.2.12](https://gitverse.ru/cloud-ru-tech/uikit-product/-/blob/master/packages/site-rich-text/CHANGELOG.md)
+* [@cloud-ru/uikit-product-site-tag@0.3.12](https://gitverse.ru/cloud-ru-tech/uikit-product/-/blob/master/packages/site-tag/CHANGELOG.md)
+* [@cloud-ru/uikit-product-utils@7.0.2](https://gitverse.ru/cloud-ru-tech/uikit-product/-/blob/master/packages/utils/CHANGELOG.md)
+
+
+
+
+
+## 0.5.41 (2025-11-12)
+
+
+### Bug Fixes
+
+* **PD-3377:** contributors update to publish all packages ([719fd3e](https://gitverse.ru/cloud-ru-tech/uikit-product/commits/719fd3e1249e247443b125c47ea408d92c8395c3))
+
+
+
+
+
 ## 0.5.40 (2025-11-12)
 
 ### Only dependencies have been changed

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

@@ -0,0 +1,33 @@
+import { WithLayoutType, WithSupportProps } from '@sbercloud/uikit-product-utils';
+import { BreadcrumbsProps } from '@snack-uikit/breadcrumbs';
+import { PromoTagProps } from '@snack-uikit/promo-tag';
+import { HeroButtonProps, PlaceProps } from '../../helperComponents';
+import { HeroColor } from '../../types';
+import { Audience, Format } from './types';
+export type HeroEventProps = WithSupportProps<{
+    /** CSS - класснейм */
+    className?: string;
+    /** Заголовок события */
+    title: string;
+    /** Начало события события */
+    startsAt: string;
+    /** Место проведения события */
+    place: Omit<PlaceProps, 'title'> & {
+        title?: PlaceProps['title'];
+    };
+    /** Ссылка на изображение */
+    image: string;
+    /** Цвета фона */
+    backgroundColor?: HeroColor;
+    /** Категория события */
+    category?: PromoTagProps;
+    /** Формат проведения события */
+    format?: Format;
+    /** Аудитория, для которой проводится событие */
+    audience?: Audience;
+    /** Хлебные крошки для события */
+    breadcrumbs: BreadcrumbsProps['items'];
+    /** Настройки кнопки */
+    button: HeroButtonProps;
+}> & WithLayoutType;
+export declare function HeroEvent({ className, title, breadcrumbs, backgroundColor, category, format, audience, startsAt, place, image, button, layoutType, ...rest }: HeroEventProps): import("react/jsx-runtime").JSX.Element;

package/dist/cjs/components/HeroEvent/HeroEvent.js

@@ -0,0 +1,34 @@
+"use strict";
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.HeroEvent = HeroEvent;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const classnames_1 = __importDefault(require("classnames"));
+const uikit_product_site_layout_1 = require("@sbercloud/uikit-product-site-layout");
+const uikit_product_utils_1 = require("@sbercloud/uikit-product-utils");
+const breadcrumbs_1 = require("@snack-uikit/breadcrumbs");
+const promo_tag_1 = require("@snack-uikit/promo-tag");
+const constants_1 = require("../../constants");
+const helperComponents_1 = require("../../helperComponents");
+const constants_2 = require("./constants");
+const styles_module_scss_1 = __importDefault(require('./styles.module.css'));
+function HeroEvent(_a) {
+    var { className, title, breadcrumbs, backgroundColor = constants_1.HERO_COLORS.NeutralBackground, category, format, audience, startsAt, place, image, button, layoutType } = _a, rest = __rest(_a, ["className", "title", "breadcrumbs", "backgroundColor", "category", "format", "audience", "startsAt", "place", "image", "button", "layoutType"]);
+    const formatTitle = format ? constants_2.FORMAT_LABELS[format] : undefined;
+    const audienceTitle = audience ? constants_2.AUDIENCE_LABELS[audience] : undefined;
+    const showTagRow = Boolean(category || formatTitle || audienceTitle);
+    return ((0, jsx_runtime_1.jsx)(uikit_product_site_layout_1.Layout.SectionWrapper, { layoutType: layoutType, className: (0, classnames_1.default)(className, styles_module_scss_1.default.sectionWrapper), "data-section-background": backgroundColor, children: (0, jsx_runtime_1.jsx)("section", Object.assign({ className: styles_module_scss_1.default.wrapper, "data-layout-type": layoutType }, (0, uikit_product_utils_1.extractSupportProps)(rest), { children: (0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.heroEvent, "data-layout-type": layoutType, children: [(0, jsx_runtime_1.jsx)(breadcrumbs_1.Breadcrumbs, { size: 'xs', items: breadcrumbs, "data-test-id": 'hero-event__breadcrumbs' }), (0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.content, "data-layout-type": layoutType, children: [(0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.left, "data-layout-type": layoutType, children: [(0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.titleWrapper, "data-layout-type": layoutType, children: [showTagRow && ((0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.tagRow, children: [category && (0, jsx_runtime_1.jsx)(promo_tag_1.PromoTag, Object.assign({}, category, { color: 'decor', size: 'xs' })), formatTitle && (0, jsx_runtime_1.jsx)(promo_tag_1.PromoTag, { appearance: 'violet', text: formatTitle, color: 'decor', size: 'xs' }), audienceTitle && (0, jsx_runtime_1.jsx)(promo_tag_1.PromoTag, { appearance: 'violet', text: audienceTitle, color: 'decor', size: 'xs' })] })), (0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.textWrapper, "data-layout-type": layoutType, children: [(0, jsx_runtime_1.jsx)("h1", { className: styles_module_scss_1.default.title, "data-layout-type": layoutType, children: title }), (0, jsx_runtime_1.jsxs)("p", { className: styles_module_scss_1.default.coords, "data-color": backgroundColor, children: [(0, jsx_runtime_1.jsxs)("time", { className: styles_module_scss_1.default.time, children: [startsAt, place.title && ', '] }), place.title && (0, jsx_runtime_1.jsx)(helperComponents_1.Place, Object.assign({}, place, { title: place.title }))] })] })] }), (0, jsx_runtime_1.jsx)(helperComponents_1.HeroEventButton, Object.assign({}, button, { layoutType: layoutType }))] }), (0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.imageWrapper, "data-layout-type": layoutType, children: (0, jsx_runtime_1.jsx)("img", { className: styles_module_scss_1.default.image, alt: 'hero_img', src: image, "data-layout-type": layoutType }) })] })] }) })) }));
+}

package/dist/cjs/components/HeroEvent/constants.d.ts

@@ -0,0 +1,20 @@
+export declare const FORMATS: {
+    readonly Online: "online";
+    readonly Offline: "offline";
+    readonly Hybrid: "hybrid";
+};
+export declare const FORMAT_LABELS: {
+    online: string;
+    offline: string;
+    hybrid: string;
+};
+export declare const AUDIENCES: {
+    readonly It: "it";
+    readonly Students: "students";
+    readonly Business: "business";
+};
+export declare const AUDIENCE_LABELS: {
+    it: string;
+    students: string;
+    business: string;
+};

package/dist/cjs/components/HeroEvent/constants.js

@@ -0,0 +1,23 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AUDIENCE_LABELS = exports.AUDIENCES = exports.FORMAT_LABELS = exports.FORMATS = void 0;
+exports.FORMATS = {
+    Online: 'online',
+    Offline: 'offline',
+    Hybrid: 'hybrid',
+};
+exports.FORMAT_LABELS = {
+    [exports.FORMATS.Online]: 'Онлайн',
+    [exports.FORMATS.Offline]: 'Офлайн',
+    [exports.FORMATS.Hybrid]: 'Гибрид',
+};
+exports.AUDIENCES = {
+    It: 'it',
+    Students: 'students',
+    Business: 'business',
+};
+exports.AUDIENCE_LABELS = {
+    [exports.AUDIENCES.It]: 'Для IT',
+    [exports.AUDIENCES.Students]: 'Для студентов',
+    [exports.AUDIENCES.Business]: 'Для бизнеса',
+};

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

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

package/dist/cjs/components/HeroEvent/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("./HeroEvent"), exports);

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

@@ -0,0 +1,135 @@
+.sectionWrapper[data-section-background=neutral-background1-level]{
+  background-color:var(--sys-neutral-background1-level, #fdfdfd);
+}
+.sectionWrapper[data-section-background=neutral-background]{
+  background-color:var(--sys-neutral-background, #eeeff3);
+}
+
+.wrapper{
+  padding:var(--dimension-5m, 40px) 0;
+}
+.wrapper[data-layout-type=tablet]{
+  padding:var(--dimension-4m, 32px) 0;
+}
+.wrapper[data-layout-type=mobile]{
+  padding:var(--dimension-3m, 24px) 0;
+}
+
+.tagRow{
+  display:flex;
+  gap:var(--dimension-050m, 4px);
+}
+
+.heroEvent{
+  display:flex;
+  flex-direction:column;
+  gap:var(--dimension-4m, 32px);
+  overflow:hidden;
+}
+.heroEvent[data-layout-type=tablet], .heroEvent[data-layout-type=mobile]{
+  gap:var(--dimension-3m, 24px);
+}
+
+.content{
+  display:flex;
+  flex-direction:row;
+  justify-content:space-between;
+  gap:var(--dimension-8m, 64px);
+}
+.content[data-layout-type=tablet]{
+  flex-direction:column;
+  gap:var(--dimension-4m, 32px);
+}
+.content[data-layout-type=mobile]{
+  flex-direction:column;
+  gap:var(--dimension-3m, 24px);
+}
+
+.left{
+  display:flex;
+  flex-direction:column;
+  justify-content:space-between;
+  gap:var(--dimension-4m, 32px);
+}
+.left[data-layout-type=mobile]{
+  gap:var(--dimension-3m, 24px);
+}
+
+.titleWrapper{
+  display:flex;
+  flex-direction:column;
+  gap:var(--dimension-3m, 24px);
+}
+.titleWrapper[data-layout-type=tablet], .titleWrapper[data-layout-type=mobile]{
+  gap:var(--dimension-2m, 16px);
+}
+
+.textWrapper{
+  display:flex;
+  flex-direction:column;
+  gap:calc(var(--dimension-1m, 8px) + var(--dimension-050m, 4px));
+}
+.textWrapper[data-layout-type=tablet], .textWrapper[data-layout-type=mobile]{
+  gap:var(--dimension-1m, 8px);
+}
+
+.title{
+  font-family:var(--sans-headline-l-font-family, SB Sans Display);
+  font-weight:var(--sans-headline-l-font-weight, Semibold);
+  line-height:var(--sans-headline-l-line-height, 40px);
+  font-size:var(--sans-headline-l-font-size, 32px);
+  letter-spacing:var(--sans-headline-l-letter-spacing, 0px);
+  paragraph-spacing:var(--sans-headline-l-paragraph-spacing, 17.6px);
+  color:var(--sys-neutral-text-main, #41424e);
+  padding:0;
+  margin:0;
+}
+.title[data-layout-type=tablet], .title[data-layout-type=mobile]{
+  font-family:var(--sans-headline-m-font-family, SB Sans Display);
+  font-weight:var(--sans-headline-m-font-weight, Semibold);
+  line-height:var(--sans-headline-m-line-height, 36px);
+  font-size:var(--sans-headline-m-font-size, 28px);
+  letter-spacing:var(--sans-headline-m-letter-spacing, 0px);
+  paragraph-spacing:var(--sans-headline-m-paragraph-spacing, 15.4px);
+}
+
+.time{
+  display:block;
+}
+
+.coords{
+  font-family:var(--sans-body-l-font-family, SB Sans Text);
+  font-weight:var(--sans-body-l-font-weight, Regular);
+  line-height:var(--sans-body-l-line-height, 24px);
+  font-size:var(--sans-body-l-font-size, 16px);
+  letter-spacing:var(--sans-body-l-letter-spacing, 0px);
+  paragraph-spacing:var(--sans-body-l-paragraph-spacing, 8.8px);
+  color:var(--sys-neutral-text-support, #656774);
+  padding:0;
+  margin:0;
+}
+.coords[data-color=invert-neutral]{
+  color:var(--sys-invert-neutral-text-support, #bec2cf);
+}
+
+.imageWrapper{
+  position:relative;
+  width:488px;
+  flex-shrink:0;
+}
+.imageWrapper[data-layout-type=tablet], .imageWrapper[data-layout-type=mobile]{
+  display:flex;
+  flex-direction:column;
+  align-items:center;
+  width:100%;
+}
+
+.image{
+  -o-object-fit:contain;
+     object-fit:contain;
+  width:100%;
+  height:100%;
+}
+.image[data-layout-type=tablet], .image[data-layout-type=mobile]{
+  max-width:504px;
+}

package/dist/cjs/components/HeroEvent/types.d.ts

@@ -0,0 +1,4 @@
+import { ValueOf } from '@snack-uikit/utils';
+import { AUDIENCES, FORMATS } from './constants';
+export type Format = ValueOf<typeof FORMATS>;
+export type Audience = ValueOf<typeof AUDIENCES>;

package/dist/cjs/components/HeroEvent/types.js

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

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

@@ -0,0 +1,36 @@
+import { ButtonPromoOutlineProps } from '@sbercloud/uikit-product-button-predefined';
+import { SiteVideoProps } from '@sbercloud/uikit-product-site-media';
+import { SiteNavbarProps } from '@sbercloud/uikit-product-site-navbar';
+import { TagSpecialProps } from '@sbercloud/uikit-product-site-tag';
+import { WithLayoutType, WithSupportProps } from '@sbercloud/uikit-product-utils';
+import { BreadcrumbsProps } from '@snack-uikit/breadcrumbs';
+import { ButtonFilledProps } from '@snack-uikit/button';
+import { HeroColor } from '../../types';
+import { PlatformLinkProps } from './components';
+export type HeroMainProps = WithSupportProps<WithLayoutType<{
+    /** Заголовок продукта */
+    title: string;
+    /** Описание продукта */
+    description: string;
+    /** Ссылка на изображение */
+    image?: string;
+    /** Видео */
+    video?: SiteVideoProps['video'];
+    /** Хлебные крошки для продукта */
+    breadcrumbs: BreadcrumbsProps['items'];
+    /** Тэги */
+    tags?: Pick<TagSpecialProps, 'text' | 'appearance' | 'tip'>[];
+    /** Платформы */
+    platforms?: Array<PlatformLinkProps['platform']>;
+    /** Обработка клика по платформе */
+    handlePlatformClick?: PlatformLinkProps['handlePlatformClick'];
+    /** Цвета фона */
+    backgroundColor?: HeroColor;
+    /** Массив с настройками кнопок ButtonFilled */
+    buttons?: [Omit<ButtonFilledProps, 'size' | 'appearance'>, Omit<ButtonPromoOutlineProps, 'size' | 'appearance'>?];
+    /** CSS - класснейм */
+    className?: string;
+    /** Navbar */
+    navbar?: Pick<SiteNavbarProps, 'items' | 'active' | 'onItemClick' | 'topPosition'>;
+}>>;
+export declare function HeroMain({ title, description, image, video, breadcrumbs, tags, platforms, handlePlatformClick, backgroundColor, buttons, navbar, layoutType, className, ...rest }: HeroMainProps): import("react/jsx-runtime").JSX.Element;

package/dist/cjs/components/HeroMain/HeroMain.js

@@ -0,0 +1,40 @@
+"use strict";
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.HeroMain = HeroMain;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const classnames_1 = __importDefault(require("classnames"));
+const react_1 = require("react");
+const uikit_product_button_predefined_1 = require("@sbercloud/uikit-product-button-predefined");
+const uikit_product_locale_1 = require("@sbercloud/uikit-product-locale");
+const uikit_product_site_layout_1 = require("@sbercloud/uikit-product-site-layout");
+const uikit_product_site_media_1 = require("@sbercloud/uikit-product-site-media");
+const uikit_product_site_navbar_1 = require("@sbercloud/uikit-product-site-navbar");
+const uikit_product_site_rich_text_1 = require("@sbercloud/uikit-product-site-rich-text");
+const uikit_product_site_tag_1 = require("@sbercloud/uikit-product-site-tag");
+const uikit_product_utils_1 = require("@sbercloud/uikit-product-utils");
+const breadcrumbs_1 = require("@snack-uikit/breadcrumbs");
+const button_1 = require("@snack-uikit/button");
+const typography_1 = require("@snack-uikit/typography");
+const components_1 = require("./components");
+const styles_module_scss_1 = __importDefault(require('./styles.module.css'));
+const utils_1 = require("./utils");
+function HeroMain(_a) {
+    var { title, description, image, video, breadcrumbs, tags = [], platforms = [], handlePlatformClick, backgroundColor = 'neutral-background1-level', buttons, navbar, layoutType, className } = _a, rest = __rest(_a, ["title", "description", "image", "video", "breadcrumbs", "tags", "platforms", "handlePlatformClick", "backgroundColor", "buttons", "navbar", "layoutType", "className"]);
+    const { t } = (0, uikit_product_locale_1.useLocale)('SiteHero');
+    const isAdaptive = ['mobile', 'tablet'].includes(layoutType);
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(uikit_product_site_layout_1.Layout.SectionWrapper, { layoutType: layoutType, className: (0, classnames_1.default)(className, styles_module_scss_1.default.sectionWrapper), "data-section-background": backgroundColor, children: (0, jsx_runtime_1.jsx)("div", Object.assign({ className: styles_module_scss_1.default.contentWrapper }, (0, uikit_product_utils_1.extractSupportProps)(rest), { "data-layout-type": layoutType, children: (0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.content, "data-layout-type": layoutType, children: [(0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.left, "data-layout-type": layoutType, children: [(0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.leftContent, "data-layout-type": layoutType, children: [(0, jsx_runtime_1.jsx)(breadcrumbs_1.Breadcrumbs, { size: 'xs', items: breadcrumbs, "data-test-id": 'hero-main__breadcrumbs' }), tags.length > 0 && ((0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.tagRow, "data-layout-type": layoutType, children: tags.map(({ text, tip, appearance }) => ((0, jsx_runtime_1.jsx)(uikit_product_site_tag_1.TagSpecial, { text: text, tip: tip, appearance: appearance }, text))) })), (0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.textWrapper, children: [(0, jsx_runtime_1.jsx)(typography_1.Typography, Object.assign({ tag: 'h1', family: 'sans' }, (0, utils_1.getTitleTypographyProps)(layoutType), { className: styles_module_scss_1.default.title, children: (0, jsx_runtime_1.jsx)(uikit_product_site_rich_text_1.RichText, { richText: title }) })), (0, jsx_runtime_1.jsx)(typography_1.Typography.SansBodyL, { tag: 'div', className: styles_module_scss_1.default.description, children: (0, jsx_runtime_1.jsx)(uikit_product_site_rich_text_1.RichText, { richText: description }) }), platforms && platforms.length > 0 && handlePlatformClick && ((0, jsx_runtime_1.jsxs)(typography_1.Typography.SansBodyL, { tag: 'p', className: styles_module_scss_1.default.platforms, children: [t('Main.platforms'), ":", ' ', platforms.map((platform, index) => ((0, jsx_runtime_1.jsxs)(react_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(components_1.PlatformLink, { platform: platform, handlePlatformClick: handlePlatformClick }), platforms.length - 1 !== index && ', '] }, platform.id || platform.title)))] }))] })] }), buttons && buttons.length > 0 && ((0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.buttons, "data-layout-type": layoutType, children: [(0, jsx_runtime_1.jsx)(button_1.ButtonFilled, Object.assign({}, buttons[0], { "data-layout-type": layoutType, size: 'l', appearance: 'primary', fullWidth: isAdaptive })), buttons.length > 1 && ((0, jsx_runtime_1.jsx)(uikit_product_button_predefined_1.ButtonPromoOutline, Object.assign({}, buttons[1], { "data-layout-type": layoutType, size: 'l', appearance: 'secondary', fullWidth: isAdaptive })))] }))] }), (0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.imageWrapper, "data-layout-type": layoutType, children: (0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.media, "data-layout-type": layoutType, children: [image && (0, jsx_runtime_1.jsx)("img", { alt: 'hero_img', src: image }), !image && video && (0, jsx_runtime_1.jsx)(uikit_product_site_media_1.SiteVideo, { className: styles_module_scss_1.default.video, video: video, layoutType: layoutType })] }) })] }) })) }), navbar && navbar.items.length > 0 && ((0, jsx_runtime_1.jsx)(uikit_product_site_layout_1.Layout.SectionWrapper, { layoutType: layoutType, className: (0, classnames_1.default)(styles_module_scss_1.default.sectionWrapper, styles_module_scss_1.default.navbarWrapper), "data-sticky": true, "data-section-background": backgroundColor, children: (0, jsx_runtime_1.jsx)(uikit_product_site_navbar_1.SiteNavbar, Object.assign({}, navbar, { "data-test-id": 'hero-main__navbar' })) }))] }));
+}

package/dist/cjs/components/HeroMain/components/PlatformLink/PlatformLink.d.ts

@@ -0,0 +1,12 @@
+import { MouseEvent } from 'react';
+type Platform = {
+    id?: string;
+    title: string;
+    href: string;
+};
+export type PlatformLinkProps = {
+    platform: Platform;
+    handlePlatformClick(e: MouseEvent<HTMLAnchorElement>, platform: Platform): void;
+};
+export declare function PlatformLink({ platform, handlePlatformClick }: PlatformLinkProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/cjs/components/HeroMain/components/PlatformLink/PlatformLink.js

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PlatformLink = PlatformLink;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const link_1 = require("@snack-uikit/link");
+function PlatformLink({ platform, handlePlatformClick }) {
+    const handleClick = (e) => {
+        handlePlatformClick(e, platform);
+    };
+    return ((0, jsx_runtime_1.jsx)(link_1.Link, { text: platform.title, href: platform.href, onClick: handleClick, size: 'l', textMode: 'accent', appearance: 'neutral' }));
+}

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

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

package/dist/cjs/components/HeroMain/components/PlatformLink/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("./PlatformLink"), exports);

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

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

package/dist/cjs/components/HeroMain/components/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("./PlatformLink"), exports);

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

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

package/dist/cjs/components/HeroMain/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("./HeroMain"), exports);

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

@@ -0,0 +1,128 @@
+.sectionWrapper[data-section-background=neutral-background1-level]{
+  background-color:var(--sys-neutral-background1-level, #fdfdfd);
+}
+.sectionWrapper[data-section-background=neutral-background]{
+  background-color:var(--sys-neutral-background, #eeeff3);
+}
+.sectionWrapper[data-sticky]{
+  position:sticky;
+  top:0;
+}
+
+.contentWrapper{
+  padding:var(--dimension-5m, 40px) 0;
+}
+.contentWrapper[data-layout-type=tablet]{
+  padding:var(--dimension-4m, 32px) 0;
+}
+.contentWrapper[data-layout-type=mobile]{
+  padding:var(--dimension-3m, 24px) 0;
+}
+
+.content{
+  display:flex;
+  align-items:stretch;
+  gap:var(--dimension-4m, 32px);
+  flex-direction:row;
+}
+.content[data-layout-type=tablet]{
+  flex-direction:column;
+}
+.content[data-layout-type=mobile]{
+  flex-direction:column;
+  gap:var(--dimension-2m, 16px);
+}
+
+.left{
+  display:flex;
+  flex-direction:column;
+  justify-content:space-between;
+  flex-grow:1;
+  gap:var(--dimension-4m, 32px);
+}
+.left[data-layout-type=mobile]{
+  gap:var(--dimension-3m, 24px);
+}
+
+.leftContent{
+  display:flex;
+  flex-direction:column;
+  gap:var(--dimension-4m, 32px);
+}
+.leftContent[data-layout-type=mobile]{
+  gap:var(--dimension-3m, 24px);
+}
+
+.tagRow{
+  display:flex;
+  flex-wrap:wrap;
+  gap:var(--dimension-050m, 4px);
+}
+
+.textWrapper{
+  display:flex;
+  flex-direction:column;
+  gap:var(--dimension-2m, 16px);
+}
+
+.title{
+  color:var(--sys-neutral-text-main, #41424e);
+  word-break:break-word;
+  white-space:pre-line;
+  max-width:720px;
+}
+
+.description{
+  color:var(--sys-neutral-text-support, #656774);
+  word-break:break-word;
+  max-width:560px;
+}
+
+.platforms{
+  color:var(--sys-neutral-text-main, #41424e);
+}
+
+.imageWrapper{
+  display:flex;
+  flex-direction:column;
+  align-items:flex-end;
+  align-self:center;
+}
+.imageWrapper[data-layout-type=tablet], .imageWrapper[data-layout-type=mobile]{
+  align-items:center;
+}
+
+.video{
+  height:300px;
+  width:300px;
+}
+
+.media img{
+  max-height:300px;
+  max-width:300px;
+}
+.media[data-layout-type=mobile] img{
+  max-width:248px;
+  max-height:248px;
+}
+.media[data-layout-type=mobile] .video{
+  width:248px;
+  height:248px;
+}
+
+.buttons{
+  display:flex;
+  flex-direction:row;
+  gap:var(--dimension-2m, 16px);
+}
+.buttons[data-layout-type=tablet]{
+  flex-direction:column;
+}
+.buttons[data-layout-type=mobile]{
+  flex-direction:column;
+  gap:var(--dimension-1m, 8px);
+}
+
+.navbarWrapper{
+  z-index:5;
+}

package/dist/cjs/components/HeroMain/utils.d.ts

@@ -0,0 +1,3 @@
+import { LayoutType } from '@sbercloud/uikit-product-utils';
+import { TypographyProps } from '@snack-uikit/typography';
+export declare const getTitleTypographyProps: (layoutType: LayoutType) => Pick<TypographyProps, "size" | "purpose">;

package/dist/cjs/components/HeroMain/utils.js

@@ -0,0 +1,16 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getTitleTypographyProps = void 0;
+const getTitleTypographyProps = (layoutType) => {
+    switch (layoutType) {
+        case 'mobile':
+            return { purpose: 'headline', size: 'm' };
+        case 'tablet':
+            return { purpose: 'headline', size: 'l' };
+        case 'desktop':
+        case 'desktopSmall':
+        default:
+            return { purpose: 'display', size: 'm' };
+    }
+};
+exports.getTitleTypographyProps = getTitleTypographyProps;