@gravity-ui/page-constructor 5.30.1 → 5.31.0

package/README.md

@@ -36,11 +36,12 @@ const Page: React.PropsWithChildren<PageProps> = ({content}) => (
 
 ```typescript
 interface PageConstructorProps {
-  content: PageContent; //Blocks data in JSON format.
+  content: PageContent; // Blocks data in JSON format.
   shouldRenderBlock?: ShouldRenderBlock; // A function that is invoked when rendering each block and  lets you set conditions for its display.
-  custom?: Custom; //Custom blocks (see `Customization`).
-  renderMenu?: () => React.ReactNode; //A function that renders the page menu with navigation (we plan to add rendering for the default menu version).
+  custom?: Custom; // Custom blocks (see `Customization`).
+  renderMenu?: () => React.ReactNode; // A function that renders the page menu with navigation (we plan to add rendering for the default menu version).
   navigation?: NavigationData; // Navigation data for using navigation component in JSON format
+  isBranded?: boolean; // If true, adds a footer that links to https://gravity-ui.com/. Try BrandFooter component for more customization.
 }
 
 interface PageConstructorProviderProps {

package/build/cjs/components/BrandFooter/BrandFooter.css

@@ -0,0 +1,94 @@
+/* use this for style redefinitions to awoid problems with
+unpredictable css rules order in build */
+.pc-brand-footer {
+  font-family: var(--g-text-body-font-family);
+  font-weight: var(--g-text-body-font-weight);
+  font-size: var(--g-text-body-2-font-size);
+  line-height: var(--g-text-body-2-line-height);
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 72px;
+  margin-top: var(--header-height);
+  color: var(--g-color-text-secondary);
+  border-top: 1px solid var(--g-color-line-generic);
+  transition: color 0.5s ease-out, border-color 0.5s ease-out;
+}
+.pc-brand-footer::after {
+  position: absolute;
+  top: -1px;
+  right: 0;
+  left: 0;
+  height: 1px;
+  opacity: 0;
+  transition: opacity 0.5s ease-out;
+  content: "";
+}
+.pc-brand-footer:hover {
+  color: var(--g-color-text-primary);
+  border-color: transparent;
+}
+.pc-brand-footer:hover::after {
+  opacity: 1;
+}
+.pc-brand-footer_theme_light::after {
+  background: linear-gradient(270deg, rgb(228, 106, 68) 0%, rgb(242, 159, 85) 46.62%, rgb(255, 212, 102) 100%);
+}
+.pc-brand-footer_theme_dark::after {
+  background: linear-gradient(270deg, rgba(228, 106, 68, 0.6) 0%, rgba(242, 159, 85, 0.6) 46.62%, rgba(255, 212, 102, 0.6) 100%);
+}
+.pc-brand-footer__content {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  padding-top: 1px;
+}
+.pc-brand-footer__text {
+  align-self: flex-end;
+}
+.pc-brand-footer__brand-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+}
+.pc-brand-footer__brand-icon > svg {
+  width: 100%;
+  height: 100%;
+}
+.pc-brand-footer__brand-name {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 90px;
+  height: 20px;
+}
+.pc-brand-footer__brand-name > svg {
+  width: 100%;
+  height: 100%;
+}
+@media (max-width: 769px) {
+  .pc-brand-footer {
+    font-family: var(--g-text-body-font-family);
+    font-weight: var(--g-text-body-font-weight);
+    font-size: var(--g-text-body-1-font-size);
+    line-height: var(--g-text-body-1-line-height);
+    height: 52px;
+  }
+  .pc-brand-footer__content {
+    padding: 0;
+  }
+  .pc-brand-footer__brand-icon {
+    width: 20px;
+    height: 20px;
+  }
+  .pc-brand-footer__brand-name {
+    width: 72px;
+    height: 16px;
+    margin-top: 0;
+  }
+}

package/build/cjs/components/BrandFooter/BrandFooter.d.ts

@@ -0,0 +1,3 @@
+import type { ClassNameProps } from '../../models';
+declare const BrandFooter: ({ className }: ClassNameProps) => JSX.Element;
+export default BrandFooter;

package/build/cjs/components/BrandFooter/BrandFooter.js

@@ -0,0 +1,23 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importDefault(require("react"));
+const uikit_1 = require("@gravity-ui/uikit");
+const theme_1 = require("../../context/theme");
+const BrandIconDark_1 = require("../../icons/BrandIconDark");
+const BrandIconLight_1 = require("../../icons/BrandIconLight");
+const BrandName_1 = require("../../icons/BrandName");
+const models_1 = require("../../models");
+const utils_1 = require("../../utils");
+const i18n_1 = require("./i18n");
+const b = (0, utils_1.block)('brand-footer');
+const BrandFooter = ({ className }) => {
+    const theme = (0, theme_1.useTheme)();
+    return (react_1.default.createElement(uikit_1.Link, { className: b({ theme }, className), href: "https://gravity-ui.com" },
+        react_1.default.createElement("div", { className: b('content') },
+            react_1.default.createElement("span", { className: b('text') }, (0, i18n_1.i18n)('created-on')),
+            react_1.default.createElement("div", { className: b('brand-icon') }, theme === models_1.Theme.Light ? react_1.default.createElement(BrandIconLight_1.BrandIconLight, null) : react_1.default.createElement(BrandIconDark_1.BrandIconDark, null)),
+            react_1.default.createElement("div", { className: b('brand-name') },
+                react_1.default.createElement(BrandName_1.BrandName, null)))));
+};
+exports.default = BrandFooter;

package/build/cjs/components/BrandFooter/i18n/en.json

@@ -0,0 +1,3 @@
+{
+  "created-on": "Created on"
+}

package/build/cjs/components/BrandFooter/i18n/index.d.ts

@@ -0,0 +1 @@
+export declare const i18n: (key: "created-on", params?: import("@gravity-ui/i18n").Params | undefined) => string;

package/build/cjs/components/BrandFooter/i18n/index.js

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.i18n = void 0;
+const tslib_1 = require("tslib");
+const i18n_1 = require("@gravity-ui/uikit/i18n");
+const cn_1 = require("../../../utils/cn");
+const en_json_1 = tslib_1.__importDefault(require("./en.json"));
+const ru_json_1 = tslib_1.__importDefault(require("./ru.json"));
+exports.i18n = (0, i18n_1.addComponentKeysets)({ en: en_json_1.default, ru: ru_json_1.default }, `${cn_1.NAMESPACE}BrandFooter`);

package/build/cjs/components/BrandFooter/i18n/ru.json

@@ -0,0 +1,3 @@
+{
+  "created-on": "Создано на"
+}

package/build/cjs/components/Title/TitleItem.d.ts

@@ -1,5 +1,5 @@
 import { QAProps, TextSize, TitleItemProps } from '../../models';
-export declare function getArrowSize(size: TextSize, isMobile: boolean): 20 | 24 | 16 | 13 | 22 | 26 | 38;
+export declare function getArrowSize(size: TextSize, isMobile: boolean): 16 | 20 | 24 | 13 | 22 | 26 | 38;
 export interface TitleItemFullProps extends TitleItemProps, QAProps {
     className?: string;
     onClick?: () => void;

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

@@ -1,5 +1,6 @@
 export { default as Anchor } from './Anchor/Anchor';
 export { default as AnimateBlock } from './AnimateBlock/AnimateBlock';
+export { default as Author } from './Author/Author';
 export { default as BackgroundImage } from './BackgroundImage/BackgroundImage';
 export { default as BackgroundMedia } from './BackgroundMedia/BackgroundMedia';
 export { default as BackLink } from './BackLink/BackLink';
@@ -7,20 +8,30 @@ export { default as BalancedMasonry } from './BalancedMasonry/BalancedMasonry';
 export { default as BlockBase } from './BlockBase/BlockBase';
 export { default as Button } from './Button/Button';
 export { default as Buttons } from './Buttons/Buttons';
+export { default as BrandFooter } from './BrandFooter/BrandFooter';
 export { default as CardBase } from './CardBase/CardBase';
+export { default as ContentList } from './ContentList/ContentList';
+export { default as Control } from './Control/Control';
 export { default as ErrorWrapper } from './ErrorWrapper/ErrorWrapper';
 export { default as FileLink } from './FileLink/FileLink';
 export { default as Foldable } from './Foldable/Foldable';
 export { default as FullscreenImage } from './FullscreenImage/FullscreenImage';
+export { default as FullscreenMedia } from './FullscreenMedia/FullscreenMedia';
 export { default as FullWidthBackground } from './FullWidthBackground/FullWidthBackground';
 export { default as HeaderBreadcrumbs } from './HeaderBreadcrumbs/HeaderBreadcrumbs';
+export { default as HTML } from './HTML/HTML';
+export { default as IconWrapper } from './IconWrapper/IconWrapper';
 export { default as Image } from './Image/Image';
 export { default as ImageBase } from './ImageBase/ImageBase';
+export { default as InnerForm } from './InnerForm/InnerForm';
 export { default as Link } from './Link/Link';
 export { default as Links } from './Links/Links';
 export { default as Media } from './Media/Media';
+export { default as MetaInfo } from './MetaInfo/MetaInfo';
 export { default as OutsideClick } from './OutsideClick/OutsideClick';
+export { default as OverflowScroller } from './OverflowScroller/OverflowScroller';
 export { default as ReactPlayer } from './ReactPlayer/ReactPlayer';
+export { default as RouterLink } from './RouterLink/RouterLink';
 export { default as Table } from './Table/Table';
 export { default as Title } from './Title/Title';
 export { default as ToggleArrow } from './ToggleArrow/ToggleArrow';
@@ -28,15 +39,5 @@ export { default as UnpublishedLabel } from './UnpublishedLabel/UnpublishedLabel
 export { default as VideoBlock } from './VideoBlock/VideoBlock';
 export { default as YFMWrapper } from './YFMWrapper/YFMWrapper';
 export { default as YandexForm } from './YandexForm/YandexForm';
-export { default as Control } from './Control/Control';
-export { default as OverflowScroller } from './OverflowScroller/OverflowScroller';
-export { default as Author } from './Author/Author';
-export { default as RouterLink } from './RouterLink/RouterLink';
-export { default as HTML } from './HTML/HTML';
-export { default as MetaInfo } from './MetaInfo/MetaInfo';
-export { default as FullscreenMedia } from './FullscreenMedia/FullscreenMedia';
-export { default as ContentList } from './ContentList/ContentList';
-export { default as InnerForm } from './InnerForm/InnerForm';
-export { default as IconWrapper } from './IconWrapper/IconWrapper';
 export type { RouterLinkProps } from './RouterLink/RouterLink';
 export type { ImageBaseProps } from './ImageBase/ImageBase';

package/build/cjs/components/index.js

@@ -3,11 +3,13 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.IconWrapper = exports.InnerForm = exports.ContentList = exports.FullscreenMedia = exports.MetaInfo = exports.HTML = exports.RouterLink = exports.Author = exports.OverflowScroller = exports.Control = exports.YandexForm = exports.YFMWrapper = exports.VideoBlock = exports.UnpublishedLabel = exports.ToggleArrow = exports.Title = exports.Table = exports.ReactPlayer = exports.OutsideClick = exports.Media = exports.Links = exports.Link = exports.ImageBase = exports.Image = exports.HeaderBreadcrumbs = exports.FullWidthBackground = exports.FullscreenImage = exports.Foldable = exports.FileLink = exports.ErrorWrapper = exports.CardBase = exports.Buttons = exports.Button = exports.BlockBase = exports.BalancedMasonry = exports.BackLink = exports.BackgroundMedia = exports.BackgroundImage = exports.AnimateBlock = exports.Anchor = void 0;
+exports.YandexForm = exports.YFMWrapper = exports.VideoBlock = exports.UnpublishedLabel = exports.ToggleArrow = exports.Title = exports.Table = exports.RouterLink = exports.ReactPlayer = exports.OverflowScroller = exports.OutsideClick = exports.MetaInfo = exports.Media = exports.Links = exports.Link = exports.InnerForm = exports.ImageBase = exports.Image = exports.IconWrapper = exports.HTML = exports.HeaderBreadcrumbs = exports.FullWidthBackground = exports.FullscreenMedia = exports.FullscreenImage = exports.Foldable = exports.FileLink = exports.ErrorWrapper = exports.Control = exports.ContentList = exports.CardBase = exports.BrandFooter = exports.Buttons = exports.Button = exports.BlockBase = exports.BalancedMasonry = exports.BackLink = exports.BackgroundMedia = exports.BackgroundImage = exports.Author = exports.AnimateBlock = exports.Anchor = void 0;
 var Anchor_1 = require("./Anchor/Anchor");
 Object.defineProperty(exports, "Anchor", { enumerable: true, get: function () { return __importDefault(Anchor_1).default; } });
 var AnimateBlock_1 = require("./AnimateBlock/AnimateBlock");
 Object.defineProperty(exports, "AnimateBlock", { enumerable: true, get: function () { return __importDefault(AnimateBlock_1).default; } });
+var Author_1 = require("./Author/Author");
+Object.defineProperty(exports, "Author", { enumerable: true, get: function () { return __importDefault(Author_1).default; } });
 var BackgroundImage_1 = require("./BackgroundImage/BackgroundImage");
 Object.defineProperty(exports, "BackgroundImage", { enumerable: true, get: function () { return __importDefault(BackgroundImage_1).default; } });
 var BackgroundMedia_1 = require("./BackgroundMedia/BackgroundMedia");
@@ -22,8 +24,14 @@ var Button_1 = require("./Button/Button");
 Object.defineProperty(exports, "Button", { enumerable: true, get: function () { return __importDefault(Button_1).default; } });
 var Buttons_1 = require("./Buttons/Buttons");
 Object.defineProperty(exports, "Buttons", { enumerable: true, get: function () { return __importDefault(Buttons_1).default; } });
+var BrandFooter_1 = require("./BrandFooter/BrandFooter");
+Object.defineProperty(exports, "BrandFooter", { enumerable: true, get: function () { return __importDefault(BrandFooter_1).default; } });
 var CardBase_1 = require("./CardBase/CardBase");
 Object.defineProperty(exports, "CardBase", { enumerable: true, get: function () { return __importDefault(CardBase_1).default; } });
+var ContentList_1 = require("./ContentList/ContentList");
+Object.defineProperty(exports, "ContentList", { enumerable: true, get: function () { return __importDefault(ContentList_1).default; } });
+var Control_1 = require("./Control/Control");
+Object.defineProperty(exports, "Control", { enumerable: true, get: function () { return __importDefault(Control_1).default; } });
 var ErrorWrapper_1 = require("./ErrorWrapper/ErrorWrapper");
 Object.defineProperty(exports, "ErrorWrapper", { enumerable: true, get: function () { return __importDefault(ErrorWrapper_1).default; } });
 var FileLink_1 = require("./FileLink/FileLink");
@@ -32,24 +40,38 @@ var Foldable_1 = require("./Foldable/Foldable");
 Object.defineProperty(exports, "Foldable", { enumerable: true, get: function () { return __importDefault(Foldable_1).default; } });
 var FullscreenImage_1 = require("./FullscreenImage/FullscreenImage");
 Object.defineProperty(exports, "FullscreenImage", { enumerable: true, get: function () { return __importDefault(FullscreenImage_1).default; } });
+var FullscreenMedia_1 = require("./FullscreenMedia/FullscreenMedia");
+Object.defineProperty(exports, "FullscreenMedia", { enumerable: true, get: function () { return __importDefault(FullscreenMedia_1).default; } });
 var FullWidthBackground_1 = require("./FullWidthBackground/FullWidthBackground");
 Object.defineProperty(exports, "FullWidthBackground", { enumerable: true, get: function () { return __importDefault(FullWidthBackground_1).default; } });
 var HeaderBreadcrumbs_1 = require("./HeaderBreadcrumbs/HeaderBreadcrumbs");
 Object.defineProperty(exports, "HeaderBreadcrumbs", { enumerable: true, get: function () { return __importDefault(HeaderBreadcrumbs_1).default; } });
+var HTML_1 = require("./HTML/HTML");
+Object.defineProperty(exports, "HTML", { enumerable: true, get: function () { return __importDefault(HTML_1).default; } });
+var IconWrapper_1 = require("./IconWrapper/IconWrapper");
+Object.defineProperty(exports, "IconWrapper", { enumerable: true, get: function () { return __importDefault(IconWrapper_1).default; } });
 var Image_1 = require("./Image/Image");
 Object.defineProperty(exports, "Image", { enumerable: true, get: function () { return __importDefault(Image_1).default; } });
 var ImageBase_1 = require("./ImageBase/ImageBase");
 Object.defineProperty(exports, "ImageBase", { enumerable: true, get: function () { return __importDefault(ImageBase_1).default; } });
+var InnerForm_1 = require("./InnerForm/InnerForm");
+Object.defineProperty(exports, "InnerForm", { enumerable: true, get: function () { return __importDefault(InnerForm_1).default; } });
 var Link_1 = require("./Link/Link");
 Object.defineProperty(exports, "Link", { enumerable: true, get: function () { return __importDefault(Link_1).default; } });
 var Links_1 = require("./Links/Links");
 Object.defineProperty(exports, "Links", { enumerable: true, get: function () { return __importDefault(Links_1).default; } });
 var Media_1 = require("./Media/Media");
 Object.defineProperty(exports, "Media", { enumerable: true, get: function () { return __importDefault(Media_1).default; } });
+var MetaInfo_1 = require("./MetaInfo/MetaInfo");
+Object.defineProperty(exports, "MetaInfo", { enumerable: true, get: function () { return __importDefault(MetaInfo_1).default; } });
 var OutsideClick_1 = require("./OutsideClick/OutsideClick");
 Object.defineProperty(exports, "OutsideClick", { enumerable: true, get: function () { return __importDefault(OutsideClick_1).default; } });
+var OverflowScroller_1 = require("./OverflowScroller/OverflowScroller");
+Object.defineProperty(exports, "OverflowScroller", { enumerable: true, get: function () { return __importDefault(OverflowScroller_1).default; } });
 var ReactPlayer_1 = require("./ReactPlayer/ReactPlayer");
 Object.defineProperty(exports, "ReactPlayer", { enumerable: true, get: function () { return __importDefault(ReactPlayer_1).default; } });
+var RouterLink_1 = require("./RouterLink/RouterLink");
+Object.defineProperty(exports, "RouterLink", { enumerable: true, get: function () { return __importDefault(RouterLink_1).default; } });
 var Table_1 = require("./Table/Table");
 Object.defineProperty(exports, "Table", { enumerable: true, get: function () { return __importDefault(Table_1).default; } });
 var Title_1 = require("./Title/Title");
@@ -64,23 +86,3 @@ var YFMWrapper_1 = require("./YFMWrapper/YFMWrapper");
 Object.defineProperty(exports, "YFMWrapper", { enumerable: true, get: function () { return __importDefault(YFMWrapper_1).default; } });
 var YandexForm_1 = require("./YandexForm/YandexForm");
 Object.defineProperty(exports, "YandexForm", { enumerable: true, get: function () { return __importDefault(YandexForm_1).default; } });
-var Control_1 = require("./Control/Control");
-Object.defineProperty(exports, "Control", { enumerable: true, get: function () { return __importDefault(Control_1).default; } });
-var OverflowScroller_1 = require("./OverflowScroller/OverflowScroller");
-Object.defineProperty(exports, "OverflowScroller", { enumerable: true, get: function () { return __importDefault(OverflowScroller_1).default; } });
-var Author_1 = require("./Author/Author");
-Object.defineProperty(exports, "Author", { enumerable: true, get: function () { return __importDefault(Author_1).default; } });
-var RouterLink_1 = require("./RouterLink/RouterLink");
-Object.defineProperty(exports, "RouterLink", { enumerable: true, get: function () { return __importDefault(RouterLink_1).default; } });
-var HTML_1 = require("./HTML/HTML");
-Object.defineProperty(exports, "HTML", { enumerable: true, get: function () { return __importDefault(HTML_1).default; } });
-var MetaInfo_1 = require("./MetaInfo/MetaInfo");
-Object.defineProperty(exports, "MetaInfo", { enumerable: true, get: function () { return __importDefault(MetaInfo_1).default; } });
-var FullscreenMedia_1 = require("./FullscreenMedia/FullscreenMedia");
-Object.defineProperty(exports, "FullscreenMedia", { enumerable: true, get: function () { return __importDefault(FullscreenMedia_1).default; } });
-var ContentList_1 = require("./ContentList/ContentList");
-Object.defineProperty(exports, "ContentList", { enumerable: true, get: function () { return __importDefault(ContentList_1).default; } });
-var InnerForm_1 = require("./InnerForm/InnerForm");
-Object.defineProperty(exports, "InnerForm", { enumerable: true, get: function () { return __importDefault(InnerForm_1).default; } });
-var IconWrapper_1 = require("./IconWrapper/IconWrapper");
-Object.defineProperty(exports, "IconWrapper", { enumerable: true, get: function () { return __importDefault(IconWrapper_1).default; } });

package/build/cjs/containers/PageConstructor/PageConstructor.d.ts

@@ -10,6 +10,7 @@ export interface PageConstructorProps {
     custom?: CustomConfig;
     renderMenu?: () => React.ReactNode;
     navigation?: NavigationData;
+    isBranded?: boolean;
     microdata?: {
         contentUpdatedDate?: string;
     };

package/build/cjs/containers/PageConstructor/PageConstructor.js

@@ -5,6 +5,7 @@ const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importStar(require("react"));
 require("@diplodoc/transform/dist/js/yfm");
 const BackgroundMedia_1 = tslib_1.__importDefault(require("../../components/BackgroundMedia/BackgroundMedia"));
+const BrandFooter_1 = tslib_1.__importDefault(require("../../components/BrandFooter/BrandFooter"));
 const RootCn_1 = tslib_1.__importDefault(require("../../components/RootCn"));
 const constructor_items_1 = require("../../constructor-items");
 const animateContext_1 = require("../../context/animateContext");
@@ -20,7 +21,7 @@ const ConstructorItem_1 = require("./components/ConstructorItem");
 const ConstructorRow_1 = require("./components/ConstructorRow");
 const b = (0, utils_1.block)('page-constructor');
 const Constructor = (props) => {
-    const { content: { blocks = [], background } = {}, renderMenu, shouldRenderBlock, navigation, custom, microdata, } = props;
+    const { content: { blocks = [], background } = {}, renderMenu, shouldRenderBlock, navigation, custom, isBranded, microdata, } = props;
     const { context } = (0, react_1.useMemo)(() => ({
         context: {
             blockTypes: [...models_1.BlockTypes, ...(0, utils_1.getCustomTypes)(['blocks', 'headers'], custom)],
@@ -52,7 +53,8 @@ const Constructor = (props) => {
                     renderMenu && renderMenu(),
                     header && (react_1.default.createElement(ConstructorItem_1.ConstructorHeader, { data: header, blockKey: models_1.BlockType.HeaderBlock })),
                     react_1.default.createElement(grid_1.Grid, null, restBlocks && (react_1.default.createElement(ConstructorRow_1.ConstructorRow, null,
-                        react_1.default.createElement(ConstructorBlocks_1.ConstructorBlocks, { items: restBlocks })))))))));
+                        react_1.default.createElement(ConstructorBlocks_1.ConstructorBlocks, { items: restBlocks }))))),
+                isBranded && react_1.default.createElement(BrandFooter_1.default, null)))));
 };
 exports.Constructor = Constructor;
 const PageConstructor = (props) => {

package/build/cjs/icons/BrandIconDark.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const BrandIconDark: React.FC<React.SVGProps<SVGSVGElement>>;

package/build/cjs/icons/BrandIconDark.js

@@ -0,0 +1,23 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.BrandIconDark = void 0;
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importDefault(require("react"));
+const svg_1 = require("../utils/svg");
+const BrandIconDark = (props) => (react_1.default.createElement("svg", Object.assign({ xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none" }, svg_1.a11yHiddenSvgProps, props),
+    react_1.default.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M19.8424 19.8433C24.3958 15.2896 24.3958 7.90683 19.8424 3.35327L16.5682 6.6277C19.244 9.40598 19.2329 13.8068 16.5192 16.5207C13.8055 19.2345 9.4048 19.2457 6.62664 16.5697L3.35327 19.8433C7.90663 24.3967 15.2891 24.3967 19.8424 19.8433Z", fill: "url(#paint0_radial_6_104)" }),
+    react_1.default.createElement("mask", { id: "mask0_6_104", style: { maskType: 'alpha' }, maskUnits: "userSpaceOnUse", x: "0", y: "0", width: "24", height: "24" },
+        react_1.default.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M3.41502 3.41517C-0.555167 7.38553 -1.06365 13.5068 1.88957 18.0282L1.88935 18.0284C2.09935 18.3619 2.20437 18.5286 2.26492 18.6847C2.40503 19.0457 2.42515 19.3437 2.33483 19.7203C2.2958 19.883 2.19607 20.1022 1.9966 20.5404C1.33086 22.003 1.18697 23.0905 1.69269 23.5962C3.11985 25.0235 7.69004 22.767 15.2286 15.2282C22.7671 7.68935 25.0235 3.11896 23.5962 1.69173C23.0906 1.18604 22.0033 1.32985 20.5409 1.99546C20.1008 2.19578 19.8807 2.29593 19.7171 2.33502C19.3426 2.42443 19.0465 2.40464 18.6872 2.26616C18.532 2.20637 18.3665 2.10288 18.039 1.8973C13.5168 -1.06457 7.38862 -0.558613 3.41502 3.41517ZM13.0738 13.0737C15.8196 10.3278 17.6712 7.72746 16.3976 6.45378C13.6259 3.68193 9.15304 3.66091 6.40726 6.4068C3.66149 9.1527 3.68251 13.6257 6.45424 16.3976C7.72786 17.6712 10.3281 15.8196 13.0738 13.0737Z", fill: "#FF3377" })),
+    react_1.default.createElement("g", { mask: "url(#mask0_6_104)" },
+        react_1.default.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M3.41502 3.41517C-0.555167 7.38553 -1.06365 13.5068 1.88957 18.0282L1.88935 18.0284C2.09935 18.3619 2.20437 18.5286 2.26492 18.6847C2.40503 19.0457 2.42515 19.3437 2.33483 19.7203C2.2958 19.883 2.19607 20.1022 1.9966 20.5404C1.33086 22.003 1.18697 23.0905 1.69269 23.5962C3.11985 25.0235 7.69004 22.767 15.2286 15.2282C22.7671 7.68935 25.0235 3.11896 23.5962 1.69173C23.0906 1.18604 22.0033 1.32985 20.5409 1.99546C20.1008 2.19578 19.8807 2.29593 19.7171 2.33502C19.3426 2.42443 19.0465 2.40464 18.6872 2.26616C18.532 2.20637 18.3665 2.10288 18.039 1.8973C13.5168 -1.06457 7.38862 -0.558613 3.41502 3.41517ZM13.0738 13.0737C15.8196 10.3278 17.6712 7.72746 16.3976 6.45378C13.6259 3.68193 9.15304 3.66091 6.40726 6.4068C3.66149 9.1527 3.68251 13.6257 6.45424 16.3976C7.72786 17.6712 10.3281 15.8196 13.0738 13.0737Z", fill: "#FF3377" }),
+        react_1.default.createElement("g", { filter: "url(#filter0_f_6_104)" },
+            react_1.default.createElement("path", { d: "M3.66425 16.9431C1.23717 13.223 1.65507 8.18643 4.91797 4.91963C8.18443 1.64924 13.2224 1.2335 16.9393 3.67239C17.2067 3.84045 17.3423 3.92521 17.4693 3.97423C17.7646 4.08818 18.008 4.10447 18.3158 4.03088C18.4503 3.99874 18.6311 3.91633 18.9928 3.75149C20.1947 3.20385 21.8808 2.02762 22.4725 2.62002C23.3813 3.52987 20.6464 8.26011 14.4508 14.4631C8.25521 20.666 3.53061 23.5804 2.62184 22.6706C2.03011 22.0781 3.20502 20.2137 3.75214 19.0102C3.91609 18.6497 3.99806 18.4693 4.03013 18.3355C4.10438 18.0256 4.08784 17.7804 3.97268 17.4833C3.92291 17.355 3.83661 17.2178 3.66402 16.9433L3.66425 16.9431Z", fill: "#FFFF00" }))),
+    react_1.default.createElement("defs", null,
+        react_1.default.createElement("filter", { id: "filter0_f_6_104", x: "-1.54024", y: "-1.54195", width: "27.8346", height: "28.0273", filterUnits: "userSpaceOnUse", colorInterpolationFilters: "sRGB" },
+            react_1.default.createElement("feFlood", { floodOpacity: "0", result: "BackgroundImageFix" }),
+            react_1.default.createElement("feBlend", { mode: "normal", in: "SourceGraphic", in2: "BackgroundImageFix", result: "shape" }),
+            react_1.default.createElement("feGaussianBlur", { stdDeviation: "1.82578", result: "effect1_foregroundBlur_6_104" })),
+        react_1.default.createElement("radialGradient", { id: "paint0_radial_6_104", cx: "0", cy: "0", r: "1", gradientUnits: "userSpaceOnUse", gradientTransform: "translate(11.5717 11.7474) rotate(45.0013) scale(11.5058)" },
+            react_1.default.createElement("stop", { offset: "0.646153", stopColor: "#FFFF00" }),
+            react_1.default.createElement("stop", { offset: "1", stopColor: "#FF3377" })))));
+exports.BrandIconDark = BrandIconDark;

package/build/cjs/icons/BrandIconLight.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const BrandIconLight: React.FC<React.SVGProps<SVGSVGElement>>;

package/build/cjs/icons/BrandIconLight.js

@@ -0,0 +1,23 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.BrandIconLight = void 0;
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importDefault(require("react"));
+const svg_1 = require("../utils/svg");
+const BrandIconLight = (props) => (react_1.default.createElement("svg", Object.assign({ xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none" }, svg_1.a11yHiddenSvgProps, props),
+    react_1.default.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M19.7891 19.7868C24.3297 15.2461 24.3297 7.88434 19.7891 3.34375L16.524 6.60884C19.1924 9.37921 19.1813 13.7675 16.4752 16.4736C13.7691 19.1797 9.38075 19.1909 6.61038 16.5225L3.34619 19.7868C7.88678 24.3272 15.2485 24.3272 19.7891 19.7868Z", fill: "url(#paint0_radial_1904_306060)" }),
+    react_1.default.createElement("mask", { id: "mask0_1904_306060", style: { maskType: 'alpha' }, maskUnits: "userSpaceOnUse", x: "0", y: "0", width: "24", height: "24" },
+        react_1.default.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M3.40641 3.40544C-0.552633 7.36448 -1.05969 13.4683 1.88525 17.9768L1.88503 17.977C2.09444 18.3096 2.19916 18.4758 2.25954 18.6314C2.39926 18.9914 2.41932 19.2886 2.32926 19.6642C2.29034 19.8264 2.19088 20.0449 1.99197 20.4819C1.3281 21.9403 1.18462 23.0247 1.68892 23.5289C3.11208 24.9522 7.66944 22.7022 15.1868 15.1848C22.7042 7.66744 24.9542 3.11007 23.531 1.68691C23.0268 1.18266 21.9425 1.32606 20.4843 1.98977C20.0454 2.18953 19.8259 2.28939 19.6627 2.32836C19.2893 2.41753 18.994 2.39779 18.6357 2.2597C18.481 2.20009 18.3159 2.09689 17.9894 1.89189C13.4798 -1.06154 7.36887 -0.557021 3.40641 3.40544ZM13.0381 13.0364C15.7762 10.2983 17.6226 7.70544 16.3526 6.4354C13.5886 3.67144 9.12834 3.65047 6.39026 6.38855C3.65219 9.12662 3.67316 13.5869 6.43711 16.3509C7.70715 17.6209 10.3001 15.7745 13.0381 13.0364Z", fill: "#FF3377" })),
+    react_1.default.createElement("g", { mask: "url(#mask0_1904_306060)" },
+        react_1.default.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M3.40641 3.40544C-0.552633 7.36448 -1.05969 13.4683 1.88525 17.9768L1.88503 17.977C2.09444 18.3096 2.19916 18.4758 2.25954 18.6314C2.39926 18.9914 2.41932 19.2886 2.32926 19.6642C2.29034 19.8264 2.19088 20.0449 1.99197 20.4819C1.3281 21.9403 1.18462 23.0247 1.68892 23.5289C3.11208 24.9522 7.66944 22.7022 15.1868 15.1848C22.7042 7.66744 24.9542 3.11007 23.531 1.68691C23.0268 1.18266 21.9425 1.32606 20.4843 1.98977C20.0454 2.18953 19.8259 2.28939 19.6627 2.32836C19.2893 2.41753 18.994 2.39779 18.6357 2.2597C18.481 2.20009 18.3159 2.09689 17.9894 1.89189C13.4798 -1.06154 7.36887 -0.557021 3.40641 3.40544ZM13.0381 13.0364C15.7762 10.2983 17.6226 7.70544 16.3526 6.4354C13.5886 3.67144 9.12834 3.65047 6.39026 6.38855C3.65219 9.12662 3.67316 13.5869 6.43711 16.3509C7.70715 17.6209 10.3001 15.7745 13.0381 13.0364Z", fill: "#FF3377" }),
+        react_1.default.createElement("g", { filter: "url(#filter0_f_1904_306060)" },
+            react_1.default.createElement("path", { d: "M3.65471 16.8928C1.23443 13.1833 1.65116 8.16106 4.90491 4.90356C8.16221 1.6425 13.1861 1.22794 16.8925 3.65988C17.1591 3.82746 17.2943 3.91198 17.4211 3.96086C17.7155 4.07449 17.9582 4.09073 18.2651 4.01735C18.3993 3.9853 18.5796 3.90313 18.9403 3.73876C20.1388 3.19267 21.8201 2.0198 22.4102 2.61051C23.3164 3.51777 20.5892 8.23453 14.411 14.4198C8.23279 20.6051 3.52144 23.5112 2.61522 22.604C2.02515 22.0132 3.19677 20.1541 3.74235 18.954C3.90584 18.5945 3.98758 18.4147 4.01956 18.2812C4.0936 17.9722 4.07711 17.7277 3.96227 17.4315C3.91264 17.3035 3.82681 17.1664 3.65471 16.8928Z", fill: "#FFFF00" }))),
+    react_1.default.createElement("defs", null,
+        react_1.default.createElement("filter", { id: "filter0_f_1904_306060", x: "-7.02277", y: "-7.02734", width: "38.7317", height: "38.9219", filterUnits: "userSpaceOnUse", colorInterpolationFilters: "sRGB" },
+            react_1.default.createElement("feFlood", { floodOpacity: "0", result: "BackgroundImageFix" }),
+            react_1.default.createElement("feBlend", { mode: "normal", in: "SourceGraphic", in2: "BackgroundImageFix", result: "shape" }),
+            react_1.default.createElement("feGaussianBlur", { stdDeviation: "4.56445", result: "effect1_foregroundBlur_1904_306060" })),
+        react_1.default.createElement("radialGradient", { id: "paint0_radial_1904_306060", cx: "0", cy: "0", r: "1", gradientUnits: "userSpaceOnUse", gradientTransform: "translate(11.5415 11.714) rotate(45) scale(11.4732)" },
+            react_1.default.createElement("stop", { offset: "0.646153", stopColor: "#FFFF00" }),
+            react_1.default.createElement("stop", { offset: "1", stopColor: "#FF3377" })))));
+exports.BrandIconLight = BrandIconLight;

package/build/cjs/icons/BrandName.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+export declare const BRAND_NAME_RATIO: number;
+export declare const BrandName: React.FC<React.SVGProps<SVGSVGElement>>;

package/build/cjs/icons/BrandName.js

@@ -0,0 +1,19 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.BrandName = exports.BRAND_NAME_RATIO = void 0;
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importDefault(require("react"));
+const svg_1 = require("../utils/svg");
+exports.BRAND_NAME_RATIO = 72 / 16;
+const BrandName = (props) => (react_1.default.createElement("svg", Object.assign({ xmlns: "http://www.w3.org/2000/svg", width: "72", height: "16", viewBox: "0 0 72 16", fill: "none" }, svg_1.a11yHiddenSvgProps, props),
+    react_1.default.createElement("path", { d: "M44.5735 4.8708V10.0416C44.5735 10.8586 44.8356 11.1333 45.6361 11.1333H47.1703V12.443H45.5499C43.8471 12.443 43.117 11.6006 43.117 10.0416V4.8708H42.1166V3.69447H43.117V2.91773C43.117 2.63676 43.117 2.49628 43.1413 2.37965C43.235 1.9302 43.5862 1.57903 44.0355 1.48527C44.1521 1.46094 44.2926 1.46094 44.5735 1.46094V3.69447H47.1703V4.8708H44.5735Z", fill: "currentColor" }),
+    react_1.default.createElement("path", { d: "M39.7865 2.07806C39.4913 2.07806 39.2415 1.97751 39.0371 1.77641C38.8328 1.5753 38.7306 1.32951 38.7306 1.03903C38.7306 0.748549 38.8328 0.502757 39.0371 0.301654C39.2415 0.100551 39.4913 0 39.7865 0C40.0703 0 40.3088 0.100551 40.5018 0.301654C40.7062 0.502757 40.8083 0.748549 40.8083 1.03903C40.8083 1.32951 40.7062 1.5753 40.5018 1.77641C40.3088 1.97751 40.0703 2.07806 39.7865 2.07806Z", fill: "currentColor" }),
+    react_1.default.createElement("path", { d: "M40.4687 3.69531V12.4681H39.0121V3.69531H40.4687Z", fill: "currentColor" }),
+    react_1.default.createElement("path", { d: "M33.3053 10.8155L36.0264 3.69531H37.579L34.1377 12.4681H32.441L28.9996 3.69531H30.5683L33.3053 10.8155Z", fill: "currentColor" }),
+    react_1.default.createElement("path", { d: "M0 6.90674C0 3.78236 2.53196 1.25 5.65735 1.25C7.89546 1.25 9.83088 2.55273 10.7467 4.44036H9.00843C8.24879 3.41155 7.0294 2.74186 5.65589 2.74186C3.3594 2.74186 1.49164 4.6099 1.49164 6.90674C1.49164 9.20358 3.3594 11.0716 5.65589 11.0716C7.67558 11.0716 9.36205 9.62632 9.74061 7.71703L9.75337 7.65267H5.3328V6.44507H11.2924C11.3051 6.59728 11.3118 6.75107 11.3118 6.90674C11.3118 10.0311 8.77982 12.5635 5.65589 12.5635C2.53197 12.5635 0 10.0311 0 6.90674Z", fill: "currentColor" }),
+    react_1.default.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M59.7007 8.0199V1.30469H61.1628V7.86597C61.1628 9.6411 61.74 11.1178 63.9139 11.1178C66.0878 11.1178 66.665 9.5142 66.665 7.71204V1.30469H68.1271V7.86597C68.1271 9.40341 67.6979 10.6037 66.899 11.4213C66.1003 12.2385 65.023 12.5801 63.9139 12.5801C62.8056 12.5801 61.7334 12.2393 60.9366 11.4484C60.1364 10.6539 59.7007 9.4915 59.7007 8.0199Z", fill: "currentColor" }),
+    react_1.default.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M72 1.30469V12.4646H70.5378V1.30469H72Z", fill: "currentColor" }),
+    react_1.default.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M51.8192 12.0142L47.8882 3.69531H49.5053L52.6061 10.2569L55.5448 3.69531H57.1468L52.2483 14.6339C51.9515 15.2967 51.8032 15.628 51.5168 15.8136C51.2304 15.9992 50.8674 15.9992 50.1413 15.9992H50.0121L51.8192 12.0142Z", fill: "currentColor" }),
+    react_1.default.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M19.9062 8.08001C19.9062 6.35326 21.3058 4.95346 23.0323 4.95346C24.7588 4.95346 26.1584 6.35326 26.1584 8.08001C26.1584 9.80676 24.7588 11.2066 23.0323 11.2066C21.3058 11.2066 19.9062 9.80676 19.9062 8.08001ZM23.0323 3.53906C20.5248 3.53906 18.4921 5.57211 18.4921 8.08001C18.4921 10.5879 20.5248 12.621 23.0323 12.621C24.3932 12.621 25.4536 12.0874 26.1643 11.2298V12.4676H27.6264V3.69352L26.1643 3.69352V4.93026C25.4536 4.07263 24.3932 3.53906 23.0323 3.53906Z", fill: "currentColor" }),
+    react_1.default.createElement("path", { d: "M14.5617 4.88814C15.2983 3.77122 16.4374 3.61719 17.7993 3.61719V4.96808H17.0304C15.3977 4.96808 14.5814 5.93086 14.5814 7.7025L14.5617 12.4671H13.1051V3.69426H14.5617V4.88814Z", fill: "currentColor" })));
+exports.BrandName = BrandName;

package/build/esm/components/BrandFooter/BrandFooter.css

@@ -0,0 +1,94 @@
+/* use this for style redefinitions to awoid problems with
+unpredictable css rules order in build */
+.pc-brand-footer {
+  font-family: var(--g-text-body-font-family);
+  font-weight: var(--g-text-body-font-weight);
+  font-size: var(--g-text-body-2-font-size);
+  line-height: var(--g-text-body-2-line-height);
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 72px;
+  margin-top: var(--header-height);
+  color: var(--g-color-text-secondary);
+  border-top: 1px solid var(--g-color-line-generic);
+  transition: color 0.5s ease-out, border-color 0.5s ease-out;
+}
+.pc-brand-footer::after {
+  position: absolute;
+  top: -1px;
+  right: 0;
+  left: 0;
+  height: 1px;
+  opacity: 0;
+  transition: opacity 0.5s ease-out;
+  content: "";
+}
+.pc-brand-footer:hover {
+  color: var(--g-color-text-primary);
+  border-color: transparent;
+}
+.pc-brand-footer:hover::after {
+  opacity: 1;
+}
+.pc-brand-footer_theme_light::after {
+  background: linear-gradient(270deg, rgb(228, 106, 68) 0%, rgb(242, 159, 85) 46.62%, rgb(255, 212, 102) 100%);
+}
+.pc-brand-footer_theme_dark::after {
+  background: linear-gradient(270deg, rgba(228, 106, 68, 0.6) 0%, rgba(242, 159, 85, 0.6) 46.62%, rgba(255, 212, 102, 0.6) 100%);
+}
+.pc-brand-footer__content {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  padding-top: 1px;
+}
+.pc-brand-footer__text {
+  align-self: flex-end;
+}
+.pc-brand-footer__brand-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+}
+.pc-brand-footer__brand-icon > svg {
+  width: 100%;
+  height: 100%;
+}
+.pc-brand-footer__brand-name {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 90px;
+  height: 20px;
+}
+.pc-brand-footer__brand-name > svg {
+  width: 100%;
+  height: 100%;
+}
+@media (max-width: 769px) {
+  .pc-brand-footer {
+    font-family: var(--g-text-body-font-family);
+    font-weight: var(--g-text-body-font-weight);
+    font-size: var(--g-text-body-1-font-size);
+    line-height: var(--g-text-body-1-line-height);
+    height: 52px;
+  }
+  .pc-brand-footer__content {
+    padding: 0;
+  }
+  .pc-brand-footer__brand-icon {
+    width: 20px;
+    height: 20px;
+  }
+  .pc-brand-footer__brand-name {
+    width: 72px;
+    height: 16px;
+    margin-top: 0;
+  }
+}

package/build/esm/components/BrandFooter/BrandFooter.d.ts

@@ -0,0 +1,4 @@
+import type { ClassNameProps } from '../../models';
+import './BrandFooter.css';
+declare const BrandFooter: ({ className }: ClassNameProps) => JSX.Element;
+export default BrandFooter;

package/build/esm/components/BrandFooter/BrandFooter.js

@@ -0,0 +1,21 @@
+import React from 'react';
+import { Link } from '@gravity-ui/uikit';
+import { useTheme } from '../../context/theme';
+import { BrandIconDark } from '../../icons/BrandIconDark';
+import { BrandIconLight } from '../../icons/BrandIconLight';
+import { BrandName } from '../../icons/BrandName';
+import { Theme } from '../../models';
+import { block } from '../../utils';
+import { i18n } from './i18n';
+import './BrandFooter.css';
+const b = block('brand-footer');
+const BrandFooter = ({ className }) => {
+    const theme = useTheme();
+    return (React.createElement(Link, { className: b({ theme }, className), href: "https://gravity-ui.com" },
+        React.createElement("div", { className: b('content') },
+            React.createElement("span", { className: b('text') }, i18n('created-on')),
+            React.createElement("div", { className: b('brand-icon') }, theme === Theme.Light ? React.createElement(BrandIconLight, null) : React.createElement(BrandIconDark, null)),
+            React.createElement("div", { className: b('brand-name') },
+                React.createElement(BrandName, null)))));
+};
+export default BrandFooter;

package/build/esm/components/BrandFooter/i18n/en.json

@@ -0,0 +1,3 @@
+{
+  "created-on": "Created on"
+}

package/build/esm/components/BrandFooter/i18n/index.d.ts

@@ -0,0 +1 @@
+export declare const i18n: (key: "created-on", params?: import("@gravity-ui/i18n").Params | undefined) => string;

package/build/esm/components/BrandFooter/i18n/index.js

@@ -0,0 +1,5 @@
+import { addComponentKeysets } from '@gravity-ui/uikit/i18n';
+import { NAMESPACE } from '../../../utils/cn';
+import en from './en.json';
+import ru from './ru.json';
+export const i18n = addComponentKeysets({ en, ru }, `${NAMESPACE}BrandFooter`);

package/build/esm/components/BrandFooter/i18n/ru.json

@@ -0,0 +1,3 @@
+{
+  "created-on": "Создано на"
+}

package/build/esm/components/Title/TitleItem.d.ts

@@ -1,6 +1,6 @@
 import { QAProps, TextSize, TitleItemProps } from '../../models';
 import './TitleItem.css';
-export declare function getArrowSize(size: TextSize, isMobile: boolean): 20 | 24 | 16 | 13 | 22 | 26 | 38;
+export declare function getArrowSize(size: TextSize, isMobile: boolean): 16 | 20 | 24 | 13 | 22 | 26 | 38;
 export interface TitleItemFullProps extends TitleItemProps, QAProps {
     className?: string;
     onClick?: () => void;