@doyourjob/gravity-ui-page-constructor-addons 2.1.8

package/build/cjs/components/Navigation/components/popups/MediumPopupWithCategories/MediumPopupWithCategories.js

@@ -0,0 +1,54 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MediumPopupWithCategories = void 0;
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importStar(require("react"));
+const gravity_ui_page_constructor_1 = require("@doyourjob/gravity-ui-page-constructor");
+const cn_1 = require("../../../../../utils/cn");
+const NavigationPopupItem_1 = require("../../Navigation/NavigationPopupItem/NavigationPopupItem");
+const b = (0, cn_1.block)('medium-popup-with-categories');
+const MediumPopupWithCategories = ({ data }) => {
+    const breakpoint = (0, gravity_ui_page_constructor_1.useWindowBreakpoint)();
+    const itemsArrays = data.groups.map((dataItem) => dataItem.items.map((item) => (Object.assign(Object.assign({}, item), { imageSize: dataItem.imageSize }))));
+    const isDesktop = breakpoint > gravity_ui_page_constructor_1.BREAKPOINTS.lg;
+    const maxLength = Math.max(...itemsArrays.map((item) => item.length));
+    const desktopItemsArray = (0, react_1.useMemo)(() => {
+        const itemsArray = [];
+        for (let i = 0; i < maxLength; i += 2) {
+            for (let j = 0; j < 2; j++) {
+                itemsArray.push(itemsArrays[j][i]);
+                itemsArray.push(itemsArrays[j][i + 1]);
+            }
+        }
+        return itemsArray;
+    }, [itemsArrays, maxLength]);
+    return (react_1.default.createElement(gravity_ui_page_constructor_1.Row, { className: b() },
+        data.groups.map(({ title, items, imageSize }) => (react_1.default.createElement(gravity_ui_page_constructor_1.Col, { key: title, className: b('col'), sizes: {
+                [gravity_ui_page_constructor_1.GridColumnSize.Xl]: 6,
+                [gravity_ui_page_constructor_1.GridColumnSize.Lg]: 12,
+                [gravity_ui_page_constructor_1.GridColumnSize.All]: 12,
+            } },
+            title && (react_1.default.createElement(gravity_ui_page_constructor_1.Row, null,
+                react_1.default.createElement(gravity_ui_page_constructor_1.Col, { className: b('title') },
+                    react_1.default.createElement(gravity_ui_page_constructor_1.Title, { title: { text: title, textSize: 'xs' } })))),
+            !isDesktop && (react_1.default.createElement("div", null,
+                react_1.default.createElement(gravity_ui_page_constructor_1.Row, null, items.map((item) => (react_1.default.createElement(NavigationPopupItem_1.NavigationPopupItem, Object.assign({}, item, { hover: true, imageSize: imageSize, sizes: {
+                        [gravity_ui_page_constructor_1.GridColumnSize.Lg]: 6,
+                        [gravity_ui_page_constructor_1.GridColumnSize.Md]: 4,
+                        [gravity_ui_page_constructor_1.GridColumnSize.All]: 4,
+                    }, key: item.title })))))))))),
+        isDesktop && (react_1.default.createElement(gravity_ui_page_constructor_1.Col, { className: b('items') },
+            react_1.default.createElement("div", null,
+                react_1.default.createElement(gravity_ui_page_constructor_1.Row, null, desktopItemsArray.map((item, index) => {
+                    return typeof item === 'undefined' ? (react_1.default.createElement(gravity_ui_page_constructor_1.Col, { sizes: {
+                            [gravity_ui_page_constructor_1.GridColumnSize.Xl]: 3,
+                            [gravity_ui_page_constructor_1.GridColumnSize.Md]: 4,
+                            [gravity_ui_page_constructor_1.GridColumnSize.All]: 12,
+                        }, key: index })) : (react_1.default.createElement(NavigationPopupItem_1.NavigationPopupItem, Object.assign({}, item, { key: item.title, hover: true, sizes: {
+                            [gravity_ui_page_constructor_1.GridColumnSize.Xl]: 3,
+                            [gravity_ui_page_constructor_1.GridColumnSize.Md]: 4,
+                            [gravity_ui_page_constructor_1.GridColumnSize.All]: 12,
+                        } })));
+                })))))));
+};
+exports.MediumPopupWithCategories = MediumPopupWithCategories;

package/build/cjs/components/Navigation/components/popups/MediumPopupWithFloors/MediumPopupWithFloors.css

@@ -0,0 +1,7 @@
+.pc-addons-medium-popup-with-floors {
+  max-height: calc(100vh - var(--pc-addons-navigation-header-height) - 64px);
+  overflow: auto;
+  overflow-y: auto;
+  padding-left: 12px;
+  margin-right: -12px;
+}

package/build/cjs/components/Navigation/components/popups/MediumPopupWithFloors/MediumPopupWithFloors.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+import { PopupData } from '../../../models';
+interface MediumPopupWithFloorsProps {
+    data: PopupData;
+}
+export declare const MediumPopupWithFloors: ({ data }: MediumPopupWithFloorsProps) => React.JSX.Element;
+export {};

package/build/cjs/components/Navigation/components/popups/MediumPopupWithFloors/MediumPopupWithFloors.js

@@ -0,0 +1,18 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MediumPopupWithFloors = void 0;
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importDefault(require("react"));
+const gravity_ui_page_constructor_1 = require("@doyourjob/gravity-ui-page-constructor");
+const cn_1 = require("../../../../../utils/cn");
+const PopupGroup_1 = require("../components/PopupGroup/PopupGroup");
+const b = (0, cn_1.block)('medium-popup-with-floors');
+const DefaultItemSizes = {
+    [gravity_ui_page_constructor_1.GridColumnSize.Lg]: 3,
+    [gravity_ui_page_constructor_1.GridColumnSize.Sm]: 4,
+    [gravity_ui_page_constructor_1.GridColumnSize.All]: 12,
+};
+const MediumPopupWithFloors = ({ data }) => {
+    return (react_1.default.createElement("div", { className: b() }, data.groups.map((group, index) => (react_1.default.createElement(PopupGroup_1.PopupGroup, Object.assign({}, group, { key: group.title || group.url || index, sizes: DefaultItemSizes, withFixItems: true, withPadding: true }))))));
+};
+exports.MediumPopupWithFloors = MediumPopupWithFloors;

package/build/cjs/components/Navigation/components/popups/components/PopupCategory/PopupCategory.css

@@ -0,0 +1,43 @@
+/* use this for style redefinitions to awoid problems with
+unpredictable css rules order in build */
+.pc-addons-popup-category {
+  margin-bottom: 4px;
+}
+
+.pc-addons-popup-category__button {
+  display: inline-block;
+  margin: 0;
+  padding: 0;
+  font: inherit;
+  border: none;
+  outline: none;
+  color: inherit;
+  background: none;
+  cursor: pointer;
+  padding: 8px 12px;
+  width: 100%;
+  text-align: initial;
+  cursor: pointer;
+  border-radius: var(--g-border-radius-l);
+}
+
+.pc-addons-popup-category__button:focus {
+  outline: 2px solid var(--g-color-line-focus);
+  outline-offset: -2px;
+}
+
+.pc-addons-popup-category__button:focus:not(:focus-visible) {
+  outline: 0;
+}
+
+.pc-addons-popup-category__button:hover {
+  background-color: var(--g-color-base-simple-hover);
+}
+
+.pc-addons-popup-category__button_active {
+  background-color: var(--g-color-base-selection);
+}
+
+.pc-addons-popup-category__button_active:hover {
+  background-color: var(--g-color-base-selection-hover);
+}

package/build/cjs/components/Navigation/components/popups/components/PopupCategory/PopupCategory.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import { CategoryData } from '../../../../models';
+interface ExtraPopupCategoryProps {
+    data: CategoryData;
+    onClick: (category: CategoryData) => void;
+    isActive: boolean;
+}
+export declare const PopupCategory: ({ data, onClick, isActive }: ExtraPopupCategoryProps) => React.JSX.Element;
+export {};

package/build/cjs/components/Navigation/components/popups/components/PopupCategory/PopupCategory.js

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PopupCategory = void 0;
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importDefault(require("react"));
+const cn_1 = require("../../../../../../utils/cn");
+const b = (0, cn_1.block)('popup-category');
+const PopupCategory = ({ data, onClick, isActive }) => {
+    const { title } = data;
+    return (react_1.default.createElement("li", { className: b(), key: title, "aria-current": isActive || undefined },
+        react_1.default.createElement("button", { className: b('button', { active: isActive }), onClick: () => onClick(data) }, title)));
+};
+exports.PopupCategory = PopupCategory;

package/build/cjs/components/Navigation/components/popups/components/PopupGroup/PopupGroup.css

@@ -0,0 +1,27 @@
+.pc-addons-popup-group {
+  margin-left: -12px;
+  padding-left: 12px;
+  border-radius: var(--g-border-radius-xl);
+}
+
+.pc-addons-popup-group + .pc-addons-popup-group {
+  margin-top: 12px;
+}
+
+.pc-addons-popup-group__title {
+  margin-bottom: 8px;
+  padding: var(--pc-addons-navigation-popup-padding) 12px;
+}
+
+.pc-addons-popup-group__items.row.row.row {
+  margin-left: -16px;
+}
+
+.pc-addons-popup-group__items_fix.row.row.row {
+  margin-left: -12px;
+}
+
+.pc-addons-popup-group__padding {
+  padding-top: 8px;
+  padding-bottom: 8px;
+}

package/build/cjs/components/Navigation/components/popups/components/PopupGroup/PopupGroup.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+import { GridColumnSizesType } from '@doyourjob/gravity-ui-page-constructor';
+import { CategoryGroupData } from '../../../../models';
+type PopupGroupProps = CategoryGroupData & {
+    section?: string;
+    sizes?: GridColumnSizesType;
+    withFixItems?: boolean;
+    withPadding?: boolean;
+};
+export declare const PopupGroup: ({ sizes, section, withFixItems, withPadding, ...group }: PopupGroupProps) => React.JSX.Element;
+export {};

package/build/cjs/components/Navigation/components/popups/components/PopupGroup/PopupGroup.js

@@ -0,0 +1,21 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PopupGroup = void 0;
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importStar(require("react"));
+const gravity_ui_page_constructor_1 = require("@doyourjob/gravity-ui-page-constructor");
+const cn_1 = require("../../../../../../utils/cn");
+const NavigationItemsList_1 = require("../../../Navigation/NavigationItemsList/NavigationItemsList");
+const PopupTitle_1 = require("../PopupTitle/PopupTitle");
+const b = (0, cn_1.block)('popup-group');
+const PopupGroup = (_a) => {
+    var { sizes, section, withFixItems, withPadding } = _a, group = tslib_1.__rest(_a, ["sizes", "section", "withFixItems", "withPadding"]);
+    const items = (0, react_1.useMemo)(() => group.items.map((item) => (Object.assign(Object.assign({}, item), { description: group.showItemDescriptions === 'no' ? undefined : item.description, icon: group.showItemIcons === 'no' ? undefined : item.icon, image: group.showItemIcons === 'no' ? undefined : item.image }))), [group.items, group.showItemDescriptions, group.showItemIcons]);
+    return (react_1.default.createElement("div", { className: withPadding ? [b(), b('padding')].join(' ') : b(), style: { backgroundColor: group.backgroundColor } },
+        group.title && (react_1.default.createElement(gravity_ui_page_constructor_1.Row, null,
+            react_1.default.createElement(gravity_ui_page_constructor_1.Col, { className: b('title') },
+                react_1.default.createElement(PopupTitle_1.PopupTitle, Object.assign({}, group))))),
+        react_1.default.createElement("div", null,
+            react_1.default.createElement(NavigationItemsList_1.NavigationItemsList, { items: items, section: section, sizes: sizes, className: withFixItems ? [b('items'), b('items_fix')].join(' ') : b('items') }))));
+};
+exports.PopupGroup = PopupGroup;

package/build/cjs/components/Navigation/components/popups/components/PopupSecondaryGroup/PopupSecondaryGroup.css

@@ -0,0 +1,17 @@
+.pc-addons-popup-secondary-group {
+  width: calc(100% + 12px);
+  margin-top: 32px;
+  margin-left: -12px;
+  padding-top: 14px;
+  padding-bottom: 16px;
+  border-radius: var(--g-border-radius-xl);
+  background-color: var(--g-color-base-generic-ultralight);
+}
+
+.pc-addons-popup-secondary-group__title {
+  margin: 0 0 15px 16px;
+}
+
+.pc-addons-popup-secondary-group__items.row.row {
+  margin-left: -4px;
+}

package/build/cjs/components/Navigation/components/popups/components/PopupSecondaryGroup/PopupSecondaryGroup.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import { GridColumnSizesType } from '@doyourjob/gravity-ui-page-constructor';
+import { CategoryGroupData } from '../../../../models';
+type PopupSecondaryGroupProps = CategoryGroupData & {
+    sizes?: GridColumnSizesType;
+};
+export declare const PopupSecondaryGroup: ({ sizes, ...props }: PopupSecondaryGroupProps) => React.JSX.Element;
+export {};

package/build/cjs/components/Navigation/components/popups/components/PopupSecondaryGroup/PopupSecondaryGroup.js

@@ -0,0 +1,20 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PopupSecondaryGroup = void 0;
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importDefault(require("react"));
+const gravity_ui_page_constructor_1 = require("@doyourjob/gravity-ui-page-constructor");
+const cn_1 = require("../../../../../../utils/cn");
+const NavigationPopupItem_1 = require("../../../Navigation/NavigationPopupItem/NavigationPopupItem");
+const PopupTitle_1 = require("../PopupTitle/PopupTitle");
+const b = (0, cn_1.block)('popup-secondary-group');
+const PopupSecondaryGroup = (_a) => {
+    var { sizes } = _a, props = tslib_1.__rest(_a, ["sizes"]);
+    return (react_1.default.createElement("div", { className: b() },
+        react_1.default.createElement(PopupTitle_1.PopupTitle, Object.assign({}, props, { className: b('title') })),
+        react_1.default.createElement("div", null,
+            react_1.default.createElement(gravity_ui_page_constructor_1.Row, { className: b('items') }, Object.values(props.items).map(({ title: popupTitle, icon, url: itemUrl }) => {
+                return (react_1.default.createElement(NavigationPopupItem_1.NavigationPopupItem, { key: popupTitle, url: itemUrl, image: icon, title: popupTitle, padding: "s", imageSize: "s", sizes: sizes }));
+            })))));
+};
+exports.PopupSecondaryGroup = PopupSecondaryGroup;

package/build/cjs/components/Navigation/components/popups/components/PopupTitle/PopupTitle.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import type { ClassNameProps } from '@doyourjob/gravity-ui-page-constructor';
+import { CategoryGroupData } from '../../../../models';
+export declare const PopupTitle: ({ title, url, className }: CategoryGroupData & ClassNameProps) => React.JSX.Element;

package/build/cjs/components/Navigation/components/popups/components/PopupTitle/PopupTitle.js

@@ -0,0 +1,19 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PopupTitle = void 0;
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importStar(require("react"));
+const gravity_ui_page_constructor_1 = require("@doyourjob/gravity-ui-page-constructor");
+const PopupTitle = ({ title, url, className }) => {
+    const titleProps = (0, react_1.useMemo)(() => {
+        return title
+            ? {
+                text: title,
+                textSize: 'xs',
+                url: url,
+            }
+            : undefined;
+    }, [title, url]);
+    return react_1.default.createElement(gravity_ui_page_constructor_1.Title, { title: titleProps, className: className });
+};
+exports.PopupTitle = PopupTitle;

package/build/cjs/components/Navigation/components/popups/components/Search/Search.css

@@ -0,0 +1,38 @@
+/* use this for style redefinitions to awoid problems with
+unpredictable css rules order in build */
+.pc-addons-popup-search {
+  font-size: var(--g-text-body-1-font-size, var(--pc-text-body-1-font-size));
+  line-height: var(--g-text-body-1-line-height, var(--pc-text-body-1-line-height));
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  max-width: 376px;
+  height: 44px;
+  transition: width 0.3s;
+}
+
+.pc-addons-popup-search__close-button, .pc-addons-popup-search__search-button {
+  position: absolute;
+  z-index: 2;
+  right: 10px;
+  color: var(--g-color-text-hint);
+}
+
+.pc-addons-popup-search__search-button:hover {
+  color: var(--g-color-text-secondary);
+}
+
+.pc-addons-popup-search__search-suggest-container {
+  width: 100%;
+}
+
+.pc-addons-popup-search__search-suggest .yc-text-input__control {
+  padding-right: 32px;
+}
+
+.pc-addons-popup-search_size_s {
+  height: 36px;
+  width: 352px;
+  max-width: 100%;
+}

package/build/cjs/components/Navigation/components/popups/components/Search/Search.d.ts

@@ -0,0 +1,17 @@
+import React from 'react';
+import type { IconData } from '@gravity-ui/uikit';
+import { ClassNameProps } from '../../../../../../models';
+export type SearchSize = 's' | 'm';
+interface SearchProps extends ClassNameProps {
+    value?: string;
+    initialValue: string;
+    onSubmit: (value: string) => void;
+    debounce?: number;
+    placeholder?: string;
+    size?: SearchSize;
+    autoFocus?: boolean;
+    className?: string;
+    customSearchIcon?: IconData;
+}
+declare const Search: (props: SearchProps) => React.JSX.Element;
+export default Search;

package/build/cjs/components/Navigation/components/popups/components/Search/Search.js

@@ -0,0 +1,47 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importStar(require("react"));
+const icons_1 = require("@gravity-ui/icons");
+const uikit_1 = require("@gravity-ui/uikit");
+const debounce_1 = tslib_1.__importDefault(require("lodash/debounce"));
+const useIsIPhone_1 = require("../../../../../../hooks/useIsIPhone");
+const cn_1 = require("../../../../../../utils/cn");
+const i18n_1 = tslib_1.__importDefault(require("./i18n"));
+const b = (0, cn_1.block)('popup-search');
+const Search = (props) => {
+    const { className, initialValue, onSubmit, debounce: debounceTime = 300, placeholder = (0, i18n_1.default)('search'), size = 'm', autoFocus = false, value: externalValue, customSearchIcon, } = props;
+    const [value, setValue] = (0, react_1.useState)(initialValue);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    const onChangeDebounce = (0, react_1.useCallback)((0, debounce_1.default)(onSubmit, debounceTime), []);
+    const inputRef = (0, react_1.useRef)(null);
+    const isIPhone = (0, useIsIPhone_1.useIsIPhone)();
+    (0, react_1.useEffect)(() => {
+        if (externalValue !== undefined) {
+            setValue(externalValue);
+        }
+    }, [externalValue]);
+    (0, react_1.useEffect)(() => {
+        if (autoFocus && !isIPhone) {
+            setTimeout(() => { var _a; return (_a = inputRef === null || inputRef === void 0 ? void 0 : inputRef.current) === null || _a === void 0 ? void 0 : _a.focus({ preventScroll: true }); }, 0);
+        }
+    }, [autoFocus, inputRef, isIPhone]);
+    return (react_1.default.createElement("div", { className: b({ size }, className) },
+        react_1.default.createElement("div", { className: b('search-suggest-container'), "data-qa": "search-suggest-container" },
+            react_1.default.createElement(uikit_1.TextInput, { value: value, onUpdate: (query) => {
+                    setValue(query);
+                    onChangeDebounce(query);
+                }, placeholder: placeholder, className: b('search-suggest'), size: size === 'm' ? 'xl' : 'l', controlRef: inputRef })),
+        value ? (react_1.default.createElement(uikit_1.Button, { className: b('close-button'), size: "xs", onClick: () => {
+                onChangeDebounce.cancel();
+                setValue('');
+                onSubmit('');
+            }, view: "flat", extraProps: { 'aria-label': (0, i18n_1.default)('clear-button-label') } },
+            react_1.default.createElement(uikit_1.Icon, { data: icons_1.Xmark, size: 18 }))) : (react_1.default.createElement(uikit_1.Button, { className: b('search-button'), size: "xs", disabled: true, onClick: () => {
+                onChangeDebounce.cancel();
+                setValue('');
+                onSubmit('');
+            }, view: "flat", extraProps: { 'aria-label': (0, i18n_1.default)('search-button-label') } },
+            react_1.default.createElement(uikit_1.Icon, { data: customSearchIcon || icons_1.Magnifier, size: 16 })))));
+};
+exports.default = Search;

package/build/cjs/components/Navigation/components/popups/components/Search/i18n/en.json

@@ -0,0 +1,5 @@
+{
+  "placeholder": "Search",
+  "clear-button-label": "Clear",
+  "search-button-label": "Search"
+}

package/build/cjs/components/Navigation/components/popups/components/Search/i18n/index.d.ts

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

package/build/cjs/components/Navigation/components/popups/components/Search/i18n/index.js

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const registerKeyset_1 = require("../../../../../../../utils/registerKeyset");
+const en_json_1 = tslib_1.__importDefault(require("./en.json"));
+const ru_json_1 = tslib_1.__importDefault(require("./ru.json"));
+const COMPONENT = 'Search';
+exports.default = (0, registerKeyset_1.registerKeyset)({ en: en_json_1.default, ru: ru_json_1.default }, COMPONENT);

package/build/cjs/components/Navigation/components/popups/components/Search/i18n/ru.json

@@ -0,0 +1,5 @@
+{
+  "placeholder": "Поиск",
+  "clear-button-label": "Очистить",
+  "search-button-label": "Поиск"
+}

package/build/cjs/components/Navigation/constants.d.ts

@@ -0,0 +1,7 @@
+export declare const SWITCH_MENU_TAB_TIMEOUT = 200;
+export declare const NO_MENU_TAB_SELECTED = -1;
+export declare const DefaultCategorizedItemSizes: {
+    lg: number;
+    sm: number;
+    all: number;
+};

package/build/cjs/components/Navigation/constants.js

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DefaultCategorizedItemSizes = exports.NO_MENU_TAB_SELECTED = exports.SWITCH_MENU_TAB_TIMEOUT = void 0;
+const gravity_ui_page_constructor_1 = require("@doyourjob/gravity-ui-page-constructor");
+exports.SWITCH_MENU_TAB_TIMEOUT = 200;
+exports.NO_MENU_TAB_SELECTED = -1;
+exports.DefaultCategorizedItemSizes = {
+    [gravity_ui_page_constructor_1.GridColumnSize.Lg]: 4,
+    [gravity_ui_page_constructor_1.GridColumnSize.Sm]: 6,
+    [gravity_ui_page_constructor_1.GridColumnSize.All]: 12,
+};

package/build/cjs/components/Navigation/containers/Footer/Footer.css

@@ -0,0 +1,104 @@
+/* use this for style redefinitions to awoid problems with
+unpredictable css rules order in build */
+:root {
+  --footer-margin-xs: 12px;
+  --footer-margin-s: 16px;
+  --footer-margin-m: 24px;
+  --footer-margin-l: 32px;
+  --footer-margin-xl: 48px;
+}
+
+.pc-addons-footer {
+  font-size: var(--g-text-body-2-font-size, var(--pc-text-body-2-font-size));
+  line-height: var(--g-text-body-2-line-height, var(--pc-text-body-2-line-height));
+}
+
+.pc-addons-footer_type_default .pc-addons-footer__container-fluid {
+  padding-top: var(--footer-margin-xl);
+}
+
+.pc-addons-footer_type_simple {
+  margin: 0 40px;
+}
+
+.pc-addons-footer__group-wrapper + .pc-addons-footer__group-wrapper {
+  margin-top: var(--footer-margin-xl);
+}
+
+.pc-addons-footer__underline {
+  border-top: 1px solid var(--g-color-line-generic);
+  display: flex;
+  justify-content: space-between;
+  width: 100%;
+  padding: var(--footer-margin-l) 0;
+}
+
+.pc-addons-footer__column_underline:not(:only-child) {
+  margin-top: var(--footer-margin-xl);
+}
+
+.pc-addons-footer__underline-links {
+  display: flex;
+  color: var(--g-color-text-primary);
+}
+
+.pc-addons-footer__item:focus {
+  outline: 2px solid var(--g-color-line-focus);
+  outline-offset: 0;
+}
+
+.pc-addons-footer__item:focus:not(:focus-visible) {
+  outline: 0;
+}
+
+.pc-addons-footer__item_underline:not(:last-child) {
+  margin-right: var(--footer-margin-m);
+}
+
+.pc-addons-footer__item_lang-switch {
+  top: -3px;
+}
+
+.pc-addons-footer__copyright {
+  font-size: var(--g-text-body-2-font-size, var(--pc-text-body-2-font-size));
+  line-height: var(--g-text-body-2-line-height, var(--pc-text-body-2-line-height));
+  color: var(--g-color-text-primary);
+}
+
+.mobile .pc-addons-footer_type_simple {
+  margin: 0 20px;
+}
+
+@media (max-width: 1081px) {
+  .pc-addons-footer__underline {
+    flex-direction: column;
+  }
+  .pc-addons-footer__underline-links:not(:last-child) {
+    margin-bottom: var(--footer-margin-s);
+  }
+  .pc-addons-footer__project {
+    margin: 0 var(--footer-margin-m) 0 0;
+  }
+}
+@media (max-width: 769px) {
+  .pc-addons-footer__underline-links {
+    flex-direction: column;
+  }
+  .pc-addons-footer__item_underline:not(:last-child) {
+    margin-bottom: var(--footer-margin-s);
+  }
+  .pc-addons-footer__project {
+    margin: 0 0 var(--footer-margin-s) 0;
+  }
+  .pc-addons-footer__column {
+    margin-top: var(--footer-margin-xl);
+  }
+  .pc-addons-footer_type_simple {
+    margin: 0 20px;
+  }
+}
+@media (min-width: 577px) and (max-width: 769px) {
+  .pc-addons-footer__column_underline {
+    padding: 0 8px;
+  }
+}

package/build/cjs/components/Navigation/containers/Footer/Footer.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import { FooterProps } from './models';
+export declare const Footer: (props: FooterProps) => React.JSX.Element;

package/build/cjs/components/Navigation/containers/Footer/Footer.js

@@ -0,0 +1,58 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Footer = void 0;
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importStar(require("react"));
+const gravity_ui_page_constructor_1 = require("@doyourjob/gravity-ui-page-constructor");
+const uikit_1 = require("@gravity-ui/uikit");
+const cn_1 = require("../../../../utils/cn");
+const EnrichedLink_1 = require("../../../EnrichedLink/EnrichedLink");
+const LangSwitch_1 = require("../../components/LangSwitch");
+const GroupLinks_1 = tslib_1.__importDefault(require("./GroupLinks/GroupLinks"));
+const b = (0, cn_1.block)('footer');
+const columnSize = {
+    all: 6,
+    sm: 3,
+    md: 2,
+};
+const Footer = (props) => {
+    const { type = 'default', underline, columns, media, customItems } = props;
+    const isMobile = (0, uikit_1.useMobile)();
+    const mediaContent = (0, react_1.useMemo)(() => {
+        if (!media) {
+            return null;
+        }
+        return react_1.default.createElement(gravity_ui_page_constructor_1.Col, { sizes: { all: 12, md: media.md || 6 } }, media.item);
+    }, [media]);
+    const groupLinks = (0, react_1.useMemo)(() => {
+        if (!(columns === null || columns === void 0 ? void 0 : columns.length)) {
+            return null;
+        }
+        return (react_1.default.createElement(react_1.default.Fragment, null, columns.map((groups, index) => (react_1.default.createElement(gravity_ui_page_constructor_1.Col, { key: index, className: b('column'), sizes: columnSize }, groups.map((group, groupIndex) => (react_1.default.createElement(GroupLinks_1.default, { key: groupIndex, columnGroup: group, className: b('group-wrapper') }))))))));
+    }, [columns]);
+    const isSimple = type === 'simple';
+    const underlineBlock = (0, react_1.useMemo)(() => {
+        var _a, _b;
+        if (!underline) {
+            return null;
+        }
+        const itemClass = b('item', { underline: true });
+        return (react_1.default.createElement("div", { className: b('underline') },
+            react_1.default.createElement("div", { className: b('underline-links') },
+                underline.langSwitch && (react_1.default.createElement(LangSwitch_1.LangSwitch, Object.assign({}, underline.langSwitch, { className: b('item', { underline: true, 'lang-switch': true }), direction: ['top-start', 'top', 'top-end'], size: "m", iconSize: 16, isMobile: isMobile }))),
+                !isSimple &&
+                    ((_a = underline.leftItems) === null || _a === void 0 ? void 0 : _a.map((item) => (react_1.default.createElement(EnrichedLink_1.EnrichedLink, Object.assign({ key: item.title, className: itemClass }, item)))))),
+            react_1.default.createElement("div", { className: b('underline-links') }, (_b = underline.rightItems) === null || _b === void 0 ? void 0 :
+                _b.map((item) => (react_1.default.createElement(EnrichedLink_1.EnrichedLink, Object.assign({ key: item.title, className: itemClass }, item)))),
+                underline.copyright && (react_1.default.createElement("div", { className: b('copyright') }, underline.copyright)))));
+    }, [underline, isSimple, isMobile]);
+    const isRightMedia = (media === null || media === void 0 ? void 0 : media.position) === 'right';
+    return (react_1.default.createElement("footer", { className: b({ type }) }, isSimple ? (underlineBlock) : (react_1.default.createElement(gravity_ui_page_constructor_1.Grid, { containerClass: b('container-fluid') },
+        react_1.default.createElement(gravity_ui_page_constructor_1.Row, { className: b('wrapper') },
+            !isRightMedia && mediaContent,
+            groupLinks,
+            isRightMedia && mediaContent,
+            customItems,
+            react_1.default.createElement(gravity_ui_page_constructor_1.Col, { className: b('column', { underline: true }), sizes: { all: 12 } }, underlineBlock))))));
+};
+exports.Footer = Footer;