@diplodoc/client 2.2.0-beta.0 → 2.2.0

package/build/server/vendor.js

@@ -49,8 +49,8 @@ var lib = __webpack_require__(3614);
 var usePopupState = __webpack_require__(806);
 // EXTERNAL MODULE: ./node_modules/@diplodoc/components/build/esm/models/index.js
 var models = __webpack_require__(8184);
-// EXTERNAL MODULE: ./node_modules/@diplodoc/components/build/esm/utils/index.js + 59 modules
-var utils = __webpack_require__(2898);
+// EXTERNAL MODULE: ./node_modules/@diplodoc/components/build/esm/utils/index.js + 61 modules
+var utils = __webpack_require__(4957);
 ;// CONCATENATED MODULE: ./node_modules/@diplodoc/components/build/esm/components/Control/Control.css
 // extracted by mini-css-extract-plugin
 
@@ -191,8 +191,8 @@ var useDirection = __webpack_require__(315);
 var Popup = __webpack_require__(8234);
 // EXTERNAL MODULE: ./node_modules/@diplodoc/components/build/esm/hooks/usePopper.js
 var usePopper = __webpack_require__(6591);
-// EXTERNAL MODULE: ./node_modules/@diplodoc/components/build/esm/utils/index.js + 59 modules
-var utils = __webpack_require__(2898);
+// EXTERNAL MODULE: ./node_modules/@diplodoc/components/build/esm/utils/index.js + 61 modules
+var utils = __webpack_require__(4957);
 ;// CONCATENATED MODULE: ./node_modules/@diplodoc/components/build/esm/components/Subscribe/utils.js
 // src/components/Subscribe/utils.ts
 
@@ -11311,7 +11311,6 @@ class AutoSizer extends react.Component {
       defaultWidth,
       disableHeight = false,
       disableWidth = false,
-      doNotBailOutOnEmptyChildren = false,
       nonce,
       onResize,
       style = {},
@@ -11352,9 +11351,6 @@ class AutoSizer extends react.Component {
       childParams.width = width;
       childParams.scaledWidth = scaledWidth;
     }
-    if (doNotBailOutOnEmptyChildren) {
-      bailoutOnChildren = false;
-    }
     return (0,react.createElement)(tagName, {
       ref: this._setRef,
       style: {
@@ -15082,8 +15078,8 @@ var useDirection = __webpack_require__(315);
 var Popup = __webpack_require__(8234);
 // EXTERNAL MODULE: ./node_modules/@diplodoc/components/build/esm/hooks/usePopper.js
 var usePopper = __webpack_require__(6591);
-// EXTERNAL MODULE: ./node_modules/@diplodoc/components/build/esm/utils/index.js + 59 modules
-var utils = __webpack_require__(2898);
+// EXTERNAL MODULE: ./node_modules/@diplodoc/components/build/esm/utils/index.js + 61 modules
+var utils = __webpack_require__(4957);
 ;// CONCATENATED MODULE: ./node_modules/@diplodoc/components/build/esm/components/Feedback/controls/DislikeVariantsPopup.js
 var __defProp = Object.defineProperty;
 var __defProps = Object.defineProperties;
@@ -18544,7 +18540,7 @@ var DocumentType = /* @__PURE__ */ ((DocumentType2) => {
 
 /***/ }),
 
-/***/ 2898:
+/***/ 4957:
 /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
 
 "use strict";
@@ -18753,6 +18749,48 @@ var TocItem_default = TocItem;
 
 //# sourceMappingURL=TocItem.js.map
 
+// EXTERNAL MODULE: ./node_modules/@gravity-ui/uikit/build/esm/components/theme/useDirection.js + 1 modules
+var useDirection = __webpack_require__(315);
+// EXTERNAL MODULE: ./node_modules/@gravity-ui/uikit/build/esm/components/Label/Label.js + 1 modules
+var Label = __webpack_require__(2768);
+// EXTERNAL MODULE: ./node_modules/@gravity-ui/uikit/build/esm/components/Popover/Popover.js + 10 modules
+var Popover = __webpack_require__(7820);
+;// CONCATENATED MODULE: ./node_modules/@diplodoc/components/build/esm/components/TocLable/TocLabel.css
+// extracted by mini-css-extract-plugin
+
+;// CONCATENATED MODULE: ./node_modules/@diplodoc/components/build/esm/components/TocLable/TocLabel.js
+// src/components/TocLable/TocLabel.tsx
+
+
+
+
+var TocLabel_b = (0,lib/* default */.A)("dc-toc-label");
+var TocLabel = ({ label }) => {
+  const direction = (0,useDirection/* useDirection */.j)();
+  let labelElement = null;
+  if (label == null ? void 0 : label.title) {
+    const hasDescription = Boolean(label.description);
+    labelElement = /* @__PURE__ */ react.createElement(Label/* Label */.J, { size: "xs", theme: label.theme, className: TocLabel_b({ offset: !hasDescription }) }, label.title);
+    if (hasDescription) {
+      const placement = direction === "rtl" ? "left" : "right";
+      labelElement = /* @__PURE__ */ react.createElement(
+        Popover/* Popover */.A,
+        {
+          content: label.description,
+          placement,
+          size: "s",
+          className: TocLabel_b({ offset: true })
+        },
+        labelElement
+      );
+    }
+  }
+  return labelElement;
+};
+var TocLabel_default = TocLabel;
+
+//# sourceMappingURL=TocLabel.js.map
+
 ;// CONCATENATED MODULE: ./node_modules/@diplodoc/components/build/esm/components/Toc/TocItemRegistry.js
 var TocItemRegistry_defProp = Object.defineProperty;
 var TocItemRegistry_defNormalProp = (obj, key, value) => key in obj ? TocItemRegistry_defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
@@ -18861,6 +18899,7 @@ var Toc_publicField = (obj, key, value) => {
 
 
 
+
 var Toc_b = (0,lib/* default */.A)("dc-toc");
 var HEADER_DEFAULT_HEIGHT = 0;
 function zip(array, fill) {
@@ -19023,7 +19062,7 @@ var Toc = class extends react.Component {
     return /* @__PURE__ */ react.createElement("div", { className: Toc_b("empty") }, text);
   }
   renderTop() {
-    const { router, title, href, tocTitleIcon, hideTocHeader, singlePage } = this.props;
+    const { router, title, href, tocTitleIcon, hideTocHeader, singlePage, label } = this.props;
     const { contentScrolled } = this.state;
     let topHeader;
     if (hideTocHeader) {
@@ -19043,7 +19082,7 @@ var Toc = class extends react.Component {
     } else {
       topHeader = /* @__PURE__ */ react.createElement("div", { className: Toc_b("top-header") }, /* @__PURE__ */ react.createElement(HTML, null, title));
     }
-    return /* @__PURE__ */ react.createElement("div", { className: Toc_b("top", { scrolled: contentScrolled }), id: this.tocTopId }, tocTitleIcon ? /* @__PURE__ */ react.createElement("div", { className: Toc_b("top-header-icon"), "aria-hidden": "true" }, tocTitleIcon) : null, topHeader);
+    return /* @__PURE__ */ react.createElement("div", { className: Toc_b("top", { scrolled: contentScrolled }), id: this.tocTopId }, tocTitleIcon ? /* @__PURE__ */ react.createElement("div", { className: Toc_b("top-header-icon"), "aria-hidden": "true" }, tocTitleIcon) : null, topHeader, label ? /* @__PURE__ */ react.createElement(TocLabel_default, { label }) : null);
   }
   renderBottom() {
     const { singlePage, onChangeSinglePage, pdfLink } = this.props;
@@ -24705,8 +24744,6 @@ var cn = __webpack_require__(9445);
 var blocks = __webpack_require__(4174);
 // EXTERNAL MODULE: ./node_modules/@gravity-ui/page-constructor/build/esm/components/VideoBlock/VideoBlock.js + 4 modules
 var VideoBlock = __webpack_require__(1845);
-// EXTERNAL MODULE: ./node_modules/@gravity-ui/page-constructor/build/esm/context/localeContext/localeContext.js
-var localeContext = __webpack_require__(7599);
 // EXTERNAL MODULE: ./node_modules/@gravity-ui/uikit/build/esm/components/utils/addComponentKeysets.js + 8 modules
 var addComponentKeysets = __webpack_require__(892);
 ;// CONCATENATED MODULE: ./node_modules/@gravity-ui/page-constructor/build/esm/components/Media/DataLens/i18n/en.json
@@ -24734,14 +24771,12 @@ function unifyDataLensToObject(dataLens) {
 
 
 
-
 const b = (0,cn/* block */.om)('media-component-data-lens');
 const DataLens = (props) => {
     const { dataLens } = props;
     const dataLensData = unifyDataLensToObject(dataLens);
-    const locale = (0,react.useContext)(localeContext/* LocaleContext */.U);
     return dataLens ? (react.createElement("div", { className: b('wrap') },
-        react.createElement("iframe", { src: `https://datalens.yandex/${dataLensData.id}?_embedded=1&_theme=${dataLensData.theme}&_lang=${locale.lang}`, className: b('iframe'), loading: "lazy", title: i18n('iframe-title'), frameBorder: 0 }))) : null;
+        react.createElement("iframe", { src: `https://datalens.yandex/${dataLensData.id}?_embedded=1&_theme=${dataLensData.theme}`, className: b('iframe'), loading: "lazy", title: i18n('iframe-title'), frameBorder: 0 }))) : null;
 };
 /* harmony default export */ const DataLens_DataLens = (DataLens);
 
@@ -30310,7 +30345,7 @@ const BREAKPOINTS = {
 
 /***/ }),
 
-/***/ 155:
+/***/ 3233:
 /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
 
 "use strict";
@@ -30484,108 +30519,8 @@ function BackLink(props) {
         react.createElement("span", null, title)));
 }
 
-// EXTERNAL MODULE: ./node_modules/@gravity-ui/icons/esm/Xmark.js
-var Xmark = __webpack_require__(3168);
-// EXTERNAL MODULE: ./node_modules/@gravity-ui/uikit/build/esm/hooks/useActionHandlers/useActionHandlers.js
-var useActionHandlers = __webpack_require__(5926);
-// EXTERNAL MODULE: ./node_modules/@gravity-ui/uikit/build/esm/components/ClipboardIcon/ClipboardIcon.js + 3 modules
-var ClipboardIcon = __webpack_require__(9671);
-// EXTERNAL MODULE: ./node_modules/@gravity-ui/uikit/build/esm/components/CopyToClipboard/CopyToClipboard.js
-var CopyToClipboard = __webpack_require__(7732);
-// EXTERNAL MODULE: ./node_modules/@gravity-ui/uikit/build/esm/components/utils/cn.js
-var utils_cn = __webpack_require__(9356);
-;// CONCATENATED MODULE: ./node_modules/@gravity-ui/uikit/build/esm/components/Label/Label.css
-// extracted by mini-css-extract-plugin
-
-;// CONCATENATED MODULE: ./node_modules/@gravity-ui/uikit/build/esm/components/Label/Label.js
-
-
-
-
-
-
-
-
-
-const Label_b = (0,utils_cn/* block */.om)('label');
-const sizeMap = {
-    xs: { copyIconSize: 12, closeIconSize: 12, buttonSize: 'xs' },
-    s: { copyIconSize: 14, closeIconSize: 14, buttonSize: 's' },
-    m: { copyIconSize: 16, closeIconSize: 16, buttonSize: 'm' },
-};
-const commonActionButtonProps = {
-    pin: 'brick-round',
-    className: Label_b('addon', {
-        side: 'right',
-        interactive: true,
-    }),
-};
-const Label = react.forwardRef(function Label(props, ref) {
-    const { type = 'default', theme = 'normal', size = 'xs', icon, children, onCloseClick, className, disabled, copyText, closeButtonLabel, copyButtonLabel, interactive = false, value, onCopy, onClick, qa, } = props;
-    const actionButtonRef = react.useRef(null);
-    const hasContent = Boolean(children !== '' && react.Children.count(children) > 0);
-    const typeClose = type === 'close' && hasContent;
-    const typeCopy = type === 'copy' && hasContent;
-    const hasOnClick = Boolean(onClick);
-    const hasCopy = Boolean(typeCopy && copyText);
-    const isInteractive = (hasOnClick || hasCopy || interactive) && !disabled;
-    const { copyIconSize, closeIconSize, buttonSize } = sizeMap[size];
-    const leftIcon = icon && (react.createElement("div", { className: Label_b('addon', { side: hasContent ? 'left' : undefined }) }, icon));
-    const content = hasContent && (react.createElement("div", { className: Label_b('text') },
-        react.createElement("div", { className: Label_b('content') }, children),
-        Boolean(value) && (react.createElement("div", { className: Label_b('value') },
-            react.createElement("div", { className: Label_b('separator') }, ":"),
-            react.createElement("div", { className: Label_b('key') }, value)))));
-    const handleCloseClick = (event) => {
-        if (hasOnClick) {
-            /* preventing event from bubbling */
-            event.stopPropagation();
-        }
-        if (onCloseClick) {
-            onCloseClick(event);
-        }
-    };
-    const handleClick = (event) => {
-        var _a;
-        /**
-         * Triggered only if the handler was triggered on the element itself, and not on the actionButton
-         * It is necessary that keyboard navigation works correctly
-         */
-        if (!((_a = actionButtonRef.current) === null || _a === void 0 ? void 0 : _a.contains(event.target))) {
-            onClick === null || onClick === void 0 ? void 0 : onClick(event);
-        }
-    };
-    const { onKeyDown } = (0,useActionHandlers/* useActionHandlers */.N)(handleClick);
-    const renderLabel = (status) => {
-        let actionButton;
-        if (typeCopy) {
-            actionButton = (react.createElement(Button/* Button */.$, Object.assign({ ref: actionButtonRef, size: buttonSize, extraProps: { 'aria-label': copyButtonLabel || undefined } }, commonActionButtonProps),
-                react.createElement(Button/* Button */.$.Icon, null,
-                    react.createElement(ClipboardIcon/* ClipboardIcon */.u, { status: status || 'pending', size: copyIconSize }))));
-        }
-        else if (typeClose) {
-            actionButton = (react.createElement(Button/* Button */.$, Object.assign({ ref: actionButtonRef, onClick: onCloseClick ? handleCloseClick : undefined, size: buttonSize, extraProps: { 'aria-label': closeButtonLabel || undefined } }, commonActionButtonProps),
-                react.createElement(Icon/* Icon */.I, { size: closeIconSize, data: Xmark/* default */.A })));
-        }
-        return (react.createElement("div", { ref: ref, role: hasOnClick ? 'button' : undefined, tabIndex: hasOnClick ? 0 : undefined, onClick: hasOnClick ? handleClick : undefined, onKeyDown: hasOnClick ? onKeyDown : undefined, className: Label_b({
-                theme,
-                size,
-                type,
-                'is-interactive': isInteractive,
-                'has-right-addon': Boolean(actionButton),
-                'has-left-addon': Boolean(leftIcon),
-                disabled,
-            }, className), "data-qa": qa },
-            leftIcon,
-            content,
-            actionButton));
-    };
-    if (hasCopy && copyText && !hasOnClick) {
-        return (react.createElement(CopyToClipboard/* CopyToClipboard */.$, { text: copyText, onCopy: onCopy, timeout: 1000 }, (status) => renderLabel(status)));
-    }
-    return renderLabel();
-});
-
+// EXTERNAL MODULE: ./node_modules/@gravity-ui/uikit/build/esm/components/Label/Label.js + 1 modules
+var Label = __webpack_require__(2768);
 ;// CONCATENATED MODULE: ./node_modules/@gravity-ui/page-constructor/build/esm/components/FileLink/FileLink.css
 // extracted by mini-css-extract-plugin
 
@@ -30634,7 +30569,7 @@ const FileLink = (props) => {
     const labelTheme = (FileExtensionThemes[fileExt] || 'unknown');
     const labelSize = LabelSizeMap[textSize];
     return (react.createElement("div", { className: FileLink_b({ ext: fileExt, type, size: textSize, theme }, className) },
-        react.createElement(Label, { className: FileLink_b('file-label'), size: labelSize, theme: labelTheme }, fileExt),
+        react.createElement(Label/* Label */.J, { className: FileLink_b('file-label'), size: labelSize, theme: labelTheme }, fileExt),
         react.createElement("div", { className: FileLink_b('link') },
             react.createElement("a", Object.assign({ href: href, onClick: onClick, tabIndex: tabIndex, title: urlTitle }, (0,utils_url/* getLinkProps */.bI)(href, hostname), extraProps), text))));
 };
@@ -30892,7 +30827,7 @@ const themeMap = {
     'normal-dark': 'outlined-contrast',
     'pseudo-special': 'outlined-contrast',
 };
-const utils_sizeMap = {
+const sizeMap = {
     xs: 's',
     ns: 's',
     s: 'm',
@@ -30903,7 +30838,7 @@ const utils_sizeMap = {
     promo: 'xl',
 };
 const toCommonView = (theme) => { var _a; return (_a = themeMap[theme]) !== null && _a !== void 0 ? _a : theme; };
-const toCommonSize = (size) => { var _a; return (_a = utils_sizeMap[size]) !== null && _a !== void 0 ? _a : size; };
+const toCommonSize = (size) => { var _a; return (_a = sizeMap[size]) !== null && _a !== void 0 ? _a : size; };
 
 ;// CONCATENATED MODULE: ./node_modules/@gravity-ui/page-constructor/build/esm/components/Button/Button.css
 // extracted by mini-css-extract-plugin
@@ -31269,6 +31204,8 @@ const PromoFeaturesBlock = (props) => {
 };
 /* harmony default export */ const PromoFeaturesBlock_PromoFeaturesBlock = (PromoFeaturesBlock);
 
+// EXTERNAL MODULE: ./node_modules/@gravity-ui/uikit/build/esm/hooks/useActionHandlers/useActionHandlers.js
+var useActionHandlers = __webpack_require__(5926);
 // EXTERNAL MODULE: ./node_modules/@gravity-ui/page-constructor/build/esm/components/ToggleArrow/ToggleArrow.js + 3 modules
 var ToggleArrow = __webpack_require__(2789);
 ;// CONCATENATED MODULE: ./node_modules/@gravity-ui/page-constructor/build/esm/hooks/useHeightCalculator.js
@@ -31800,15 +31737,13 @@ const TabsBlock = ({ items, title, description, animated, tabsColSizes, centered
     }, [minImageHeight]);
     const onSelectTab = (0,react.useCallback)((id, e) => {
         setActiveTab(id);
+        handleImageHeight();
         e.currentTarget.scrollIntoView({
             inline: 'center',
             behavior: 'smooth',
             block: 'nearest',
         });
-    }, []);
-    (0,react.useEffect)(() => {
-        handleImageHeight();
-    }, [activeTab, handleImageHeight]);
+    }, [handleImageHeight]);
     if (activeTabData) {
         const themedImage = (0,utils_theme/* getThemedValue */.d)(activeTabData === null || activeTabData === void 0 ? void 0 : activeTabData.image, theme);
         imageProps = themedImage && (0,utils/* getMediaImage */.w)(themedImage);
@@ -31826,9 +31761,8 @@ const TabsBlock = ({ items, title, description, animated, tabsColSizes, centered
             all: types/* GridColumnOrderClasses */.lB.Last,
             md: types/* GridColumnOrderClasses */.lB.First,
         }, className: Tabs_b('col', { centered: centered }) },
-        (activeTabData === null || activeTabData === void 0 ? void 0 : activeTabData.media) && (react.createElement("div", { style: { minHeight: mediaVideoHeight || minImageHeight } },
-            react.createElement("div", { ref: ref },
-                react.createElement(Media/* default */.A, Object.assign({}, (0,utils_theme/* getThemedValue */.d)(activeTabData.media, theme), { key: activeTab, className: Tabs_b('media', { border }), playVideo: play, height: mediaVideoHeight || undefined, onImageLoad: handleImageHeight }))))),
+        react.createElement("div", { style: { minHeight: mediaVideoHeight || minImageHeight } }, (activeTabData === null || activeTabData === void 0 ? void 0 : activeTabData.media) && (react.createElement("div", { ref: ref },
+            react.createElement(Media/* default */.A, Object.assign({}, (0,utils_theme/* getThemedValue */.d)(activeTabData.media, theme), { key: activeTab, className: Tabs_b('media', { border }), playVideo: play, height: mediaVideoHeight || undefined, onImageLoad: handleImageHeight }))))),
         imageProps && (react.createElement(react.Fragment, null,
             react.createElement(FullscreenImage/* default */.A, Object.assign({}, imageProps, { imageClassName: Tabs_b('image', { border }) })))),
         (activeTabData === null || activeTabData === void 0 ? void 0 : activeTabData.caption) && (react.createElement("p", { className: Tabs_b('caption'), id: captionId },
@@ -32724,8 +32658,6 @@ const YandexForm = (props) => {
 };
 /* harmony default export */ const YandexForm_YandexForm = (YandexForm);
 
-// EXTERNAL MODULE: ./node_modules/@gravity-ui/page-constructor/build/esm/context/formsContext/FormsContext.js
-var FormsContext = __webpack_require__(9629);
 ;// CONCATENATED MODULE: ./node_modules/@gravity-ui/page-constructor/build/esm/models/guards.js
 
 function isBlock(block) {
@@ -32960,10 +32892,8 @@ HubspotForm.displayName = 'HubspotForm';
 
 
 
-
 const InnerForm = (props) => {
     const { formData, onContentLoad, className } = props;
-    const formsConfig = (0,react.useContext)(FormsContext/* FormsContext */.Z);
     (0,react.useEffect)(() => {
         if (isHubspotDataForm(formData)) {
             onContentLoad();
@@ -32972,13 +32902,13 @@ const InnerForm = (props) => {
     if (isYandexDataForm(formData)) {
         const _a = formData.yandex, { onLoad } = _a, rest = (0,tslib_es6/* __rest */.Tt)(_a, ["onLoad"]);
         return (react.createElement("div", { className: className },
-            react.createElement(YandexForm_YandexForm, Object.assign({}, formsConfig.yandex, rest, { onLoad: () => {
+            react.createElement(YandexForm_YandexForm, Object.assign({}, rest, { onLoad: () => {
                     onContentLoad();
                     onLoad === null || onLoad === void 0 ? void 0 : onLoad();
                 } }))));
     }
     if (isHubspotDataForm(formData)) {
-        return (react.createElement(sub_blocks_HubspotForm, Object.assign({ createDOMElement: true }, formsConfig.hubspot, formData.hubspot)));
+        return react.createElement(sub_blocks_HubspotForm, Object.assign({ createDOMElement: true }, formData.hubspot));
     }
     return null;
 };
@@ -33563,7 +33493,7 @@ const PriceDescription = (props) => {
         const labelTitle = label.text || (labelsDefaultText && labelsDefaultText[label.color]);
         const labelColor = (LabelColorsMapping[label.color] || 'unknown');
         const labelSize = PriceDescription_LabelSizeMap[label.size || descriptionSize];
-        return (react.createElement(Label, { className: PriceDescription_b('label', { size: labelSize }), theme: labelColor, size: labelSize }, labelTitle));
+        return (react.createElement(Label/* Label */.J, { className: PriceDescription_b('label', { size: labelSize }), theme: labelColor, size: labelSize }, labelTitle));
     }, [descriptionSize, label, labelsDefaultText]);
     const titleElement = (0,react.useMemo)(() => {
         return (react.createElement("div", { className: PriceDescription_b('title', { size: titleSize }) },
@@ -33793,24 +33723,21 @@ const showFullscreenIcon = ({ youtube }) => !youtube;
 
 
 
-
 const LayoutItem_b = (0,cn/* block */.om)('layout-item');
 const LayoutItem = (_a) => {
     var _b = _a.content, { links, buttons } = _b, content = (0,tslib_es6/* __rest */.Tt)(_b, ["links", "buttons"]), { metaInfo, media, border, fullscreen, icon, className, analyticsEvents, controlPosition = 'content' } = _a;
     const normalizedLinks = (0,react.useMemo)(() => getLayoutItemLinks(links), [links]);
     const areControlsInFooter = controlPosition === 'footer';
-    const theme = useTheme();
     const contentProps = Object.assign(Object.assign(Object.assign({}, content), (areControlsInFooter ? {} : { links: normalizedLinks, buttons })), { size: 's', colSizes: { all: 12, md: 12 } });
     const titleId = (0,useUniqId/* useUniqId */.u)();
     const renderMedia = () => {
         if (!media) {
             return null;
         }
-        const themedMedia = (0,utils_theme/* getThemedValue */.d)(media, theme);
-        return fullscreen && hasFullscreen(themedMedia) ? (react.createElement(FullscreenMedia/* default */.A, { showFullscreenIcon: showFullscreenIcon(themedMedia) }, (_a = {}) => {
+        return fullscreen && hasFullscreen(media) ? (react.createElement(FullscreenMedia/* default */.A, { showFullscreenIcon: showFullscreenIcon(media) }, (_a = {}) => {
             var { className: mediaClassName, fullscreen: _fullscreen } = _a, fullscreenMediaProps = (0,tslib_es6/* __rest */.Tt)(_a, ["className", "fullscreen"]);
-            return (react.createElement(Media/* default */.A, Object.assign({}, themedMedia, fullscreenMediaProps, { className: LayoutItem_b('media', { border }, mediaClassName), analyticsEvents: analyticsEvents })));
-        })) : (react.createElement(Media/* default */.A, Object.assign({}, themedMedia, { className: LayoutItem_b('media', { border }), analyticsEvents: analyticsEvents })));
+            return (react.createElement(Media/* default */.A, Object.assign({}, media, fullscreenMediaProps, { className: LayoutItem_b('media', { border }, mediaClassName), analyticsEvents: analyticsEvents })));
+        })) : (react.createElement(Media/* default */.A, Object.assign({}, media, { className: LayoutItem_b('media', { border }), analyticsEvents: analyticsEvents })));
     };
     return (react.createElement("div", { className: LayoutItem_b(null, className) },
         renderMedia(),
@@ -34222,6 +34149,8 @@ const Logo = (props) => {
 };
 /* harmony default export */ const Logo_Logo = (Logo);
 
+// EXTERNAL MODULE: ./node_modules/@gravity-ui/icons/esm/Xmark.js
+var Xmark = __webpack_require__(3168);
 ;// CONCATENATED MODULE: ./node_modules/@gravity-ui/icons/esm/Bars.js
 
 const Bars = (props) => (react.createElement("svg", Object.assign({ xmlns: "http://www.w3.org/2000/svg", width: 16, height: 16, fill: "none", viewBox: "0 0 16 16" }, props),
@@ -34372,7 +34301,7 @@ const MobileNavigation = (_a) => {
 
 const Navigation_b = (0,cn/* block */.om)('navigation');
 const Navigation = ({ data, logo, className }) => {
-    const { leftItems, rightItems, iconSize = 20, withBorder = false, withBorderOnScroll = true, } = data;
+    const { leftItems, rightItems, iconSize = 20, withBorder = false } = data;
     const [isSidebarOpened, setIsSidebarOpened] = (0,react.useState)(false);
     const [activeItemId, setActiveItemId] = (0,react.useState)(undefined);
     const [showBorder, setShowBorder] = (0,react.useState)(withBorder);
@@ -34384,8 +34313,6 @@ const Navigation = ({ data, logo, className }) => {
     };
     const onSidebarOpenedChange = (isOpen) => setIsSidebarOpened(isOpen);
     (0,react.useEffect)(() => {
-        if (!withBorderOnScroll)
-            return () => { };
         const showBorderOnScroll = () => {
             if (!showBorder) {
                 setShowBorder(window.scrollY > 0);
@@ -34507,17 +34434,15 @@ const PageConstructor = (props) => {
 /* harmony export */ });
 /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(6540);
 /* harmony import */ var _components_constants__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(8592);
-/* harmony import */ var _context_analyticsContext__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(5487);
-/* harmony import */ var _context_formsContext_FormsContext__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(9629);
-/* harmony import */ var _context_imageContext__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(9017);
-/* harmony import */ var _context_localeContext__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(7599);
-/* harmony import */ var _context_locationContext__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(8827);
+/* harmony import */ var _context_analyticsContext__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(5487);
+/* harmony import */ var _context_imageContext__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(9017);
+/* harmony import */ var _context_localeContext__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(7599);
+/* harmony import */ var _context_locationContext__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(8827);
 /* harmony import */ var _context_mapsContext_mapsContext__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(8095);
-/* harmony import */ var _context_mobileContext__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(2895);
-/* harmony import */ var _context_projectSettingsContext__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(5032);
-/* harmony import */ var _context_ssrContext__WEBPACK_IMPORTED_MODULE_11__ = __webpack_require__(3983);
-/* harmony import */ var _context_theme__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(9516);
-
+/* harmony import */ var _context_mobileContext__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(2895);
+/* harmony import */ var _context_projectSettingsContext__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(5032);
+/* harmony import */ var _context_ssrContext__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(3983);
+/* harmony import */ var _context_theme__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(9516);
 
 
 
@@ -34530,19 +34455,18 @@ const PageConstructor = (props) => {
 
 
 const PageConstructorProvider = (props) => {
-    const { isMobile, mapsContext = _context_mapsContext_mapsContext__WEBPACK_IMPORTED_MODULE_1__/* .initialMapValue */ .Ul, locale = {}, location = {}, analytics = {}, ssrConfig = {}, projectSettings = {}, theme = _components_constants__WEBPACK_IMPORTED_MODULE_2__/* .DEFAULT_THEME */ .SS, children, image = {}, forms = _context_formsContext_FormsContext__WEBPACK_IMPORTED_MODULE_3__/* .DEFAULT_FORMS_CONTEXT_VALUE */ .s, } = props;
+    const { isMobile, mapsContext = _context_mapsContext_mapsContext__WEBPACK_IMPORTED_MODULE_1__/* .initialMapValue */ .Ul, locale = {}, location = {}, analytics = {}, ssrConfig = {}, projectSettings = {}, theme = _components_constants__WEBPACK_IMPORTED_MODULE_2__/* .DEFAULT_THEME */ .SS, children, image = {}, } = props;
     /* eslint-disable react/jsx-key */
     const context = [
-        react__WEBPACK_IMPORTED_MODULE_0__.createElement(_context_theme__WEBPACK_IMPORTED_MODULE_4__/* .ThemeContext */ .D.Provider, { value: { theme } }),
-        react__WEBPACK_IMPORTED_MODULE_0__.createElement(_context_projectSettingsContext__WEBPACK_IMPORTED_MODULE_5__/* .ProjectSettingsContext */ .m.Provider, { value: projectSettings }),
-        react__WEBPACK_IMPORTED_MODULE_0__.createElement(_context_localeContext__WEBPACK_IMPORTED_MODULE_6__/* .LocaleContext */ .U.Provider, { value: locale }),
-        react__WEBPACK_IMPORTED_MODULE_0__.createElement(_context_imageContext__WEBPACK_IMPORTED_MODULE_7__/* .ImageContext */ .Z.Provider, { value: image }),
-        react__WEBPACK_IMPORTED_MODULE_0__.createElement(_context_locationContext__WEBPACK_IMPORTED_MODULE_8__/* .LocationContext */ .d.Provider, { value: location }),
-        react__WEBPACK_IMPORTED_MODULE_0__.createElement(_context_mobileContext__WEBPACK_IMPORTED_MODULE_9__/* .MobileContext */ .G.Provider, { value: Boolean(isMobile) }),
+        react__WEBPACK_IMPORTED_MODULE_0__.createElement(_context_theme__WEBPACK_IMPORTED_MODULE_3__/* .ThemeContext */ .D.Provider, { value: { theme } }),
+        react__WEBPACK_IMPORTED_MODULE_0__.createElement(_context_projectSettingsContext__WEBPACK_IMPORTED_MODULE_4__/* .ProjectSettingsContext */ .m.Provider, { value: projectSettings }),
+        react__WEBPACK_IMPORTED_MODULE_0__.createElement(_context_localeContext__WEBPACK_IMPORTED_MODULE_5__/* .LocaleContext */ .U.Provider, { value: locale }),
+        react__WEBPACK_IMPORTED_MODULE_0__.createElement(_context_imageContext__WEBPACK_IMPORTED_MODULE_6__/* .ImageContext */ .Z.Provider, { value: image }),
+        react__WEBPACK_IMPORTED_MODULE_0__.createElement(_context_locationContext__WEBPACK_IMPORTED_MODULE_7__/* .LocationContext */ .d.Provider, { value: location }),
+        react__WEBPACK_IMPORTED_MODULE_0__.createElement(_context_mobileContext__WEBPACK_IMPORTED_MODULE_8__/* .MobileContext */ .G.Provider, { value: Boolean(isMobile) }),
         react__WEBPACK_IMPORTED_MODULE_0__.createElement(_context_mapsContext_mapsContext__WEBPACK_IMPORTED_MODULE_1__/* .MapsContext */ .xQ.Provider, { value: mapsContext }),
-        react__WEBPACK_IMPORTED_MODULE_0__.createElement(_context_analyticsContext__WEBPACK_IMPORTED_MODULE_10__/* .AnalyticsContext */ .I.Provider, { value: analytics }),
-        react__WEBPACK_IMPORTED_MODULE_0__.createElement(_context_formsContext_FormsContext__WEBPACK_IMPORTED_MODULE_3__/* .FormsContext */ .Z.Provider, { value: forms }),
-        react__WEBPACK_IMPORTED_MODULE_0__.createElement(_context_ssrContext__WEBPACK_IMPORTED_MODULE_11__/* .SSRContext */ .Y.Provider, { value: { isServer: ssrConfig === null || ssrConfig === void 0 ? void 0 : ssrConfig.isServer } }),
+        react__WEBPACK_IMPORTED_MODULE_0__.createElement(_context_analyticsContext__WEBPACK_IMPORTED_MODULE_9__/* .AnalyticsContext */ .I.Provider, { value: analytics }),
+        react__WEBPACK_IMPORTED_MODULE_0__.createElement(_context_ssrContext__WEBPACK_IMPORTED_MODULE_10__/* .SSRContext */ .Y.Provider, { value: { isServer: ssrConfig === null || ssrConfig === void 0 ? void 0 : ssrConfig.isServer } }),
     ].reduceRight((prev, provider) => react__WEBPACK_IMPORTED_MODULE_0__.cloneElement(provider, {}, prev), children);
     /* eslint-enable react/jsx-key */
     return react__WEBPACK_IMPORTED_MODULE_0__.createElement(react__WEBPACK_IMPORTED_MODULE_0__.Fragment, null, context);
@@ -34821,22 +34745,6 @@ const AnimateContext = react__WEBPACK_IMPORTED_MODULE_0__.createContext({ animat
 const BlockIdContext = react__WEBPACK_IMPORTED_MODULE_0__.createContext('');
 
 
-/***/ }),
-
-/***/ 9629:
-/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
-
-"use strict";
-/* harmony export */ __webpack_require__.d(__webpack_exports__, {
-/* harmony export */   Z: () => (/* binding */ FormsContext),
-/* harmony export */   s: () => (/* binding */ DEFAULT_FORMS_CONTEXT_VALUE)
-/* harmony export */ });
-/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(6540);
-
-const DEFAULT_FORMS_CONTEXT_VALUE = {};
-const FormsContext = react__WEBPACK_IMPORTED_MODULE_0__.createContext(DEFAULT_FORMS_CONTEXT_VALUE);
-
-
 /***/ }),
 
 /***/ 9017:
@@ -36182,6 +36090,127 @@ Icon.displayName = 'Icon';
 Icon.prefix = '';
 
 
+/***/ }),
+
+/***/ 2768:
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+"use strict";
+
+// EXPORTS
+__webpack_require__.d(__webpack_exports__, {
+  J: () => (/* binding */ Label)
+});
+
+// EXTERNAL MODULE: ./node_modules/react/index.js
+var react = __webpack_require__(6540);
+// EXTERNAL MODULE: ./node_modules/@gravity-ui/icons/esm/Xmark.js
+var Xmark = __webpack_require__(3168);
+// EXTERNAL MODULE: ./node_modules/@gravity-ui/uikit/build/esm/hooks/useActionHandlers/useActionHandlers.js
+var useActionHandlers = __webpack_require__(5926);
+// EXTERNAL MODULE: ./node_modules/@gravity-ui/uikit/build/esm/components/Button/Button.js + 2 modules
+var Button = __webpack_require__(5767);
+// EXTERNAL MODULE: ./node_modules/@gravity-ui/uikit/build/esm/components/ClipboardIcon/ClipboardIcon.js + 3 modules
+var ClipboardIcon = __webpack_require__(9671);
+// EXTERNAL MODULE: ./node_modules/@gravity-ui/uikit/build/esm/components/CopyToClipboard/CopyToClipboard.js
+var CopyToClipboard = __webpack_require__(7732);
+// EXTERNAL MODULE: ./node_modules/@gravity-ui/uikit/build/esm/components/Icon/Icon.js + 3 modules
+var Icon = __webpack_require__(9504);
+// EXTERNAL MODULE: ./node_modules/@gravity-ui/uikit/build/esm/components/utils/cn.js
+var cn = __webpack_require__(9356);
+;// CONCATENATED MODULE: ./node_modules/@gravity-ui/uikit/build/esm/components/Label/Label.css
+// extracted by mini-css-extract-plugin
+
+;// CONCATENATED MODULE: ./node_modules/@gravity-ui/uikit/build/esm/components/Label/Label.js
+
+
+
+
+
+
+
+
+
+const b = (0,cn/* block */.om)('label');
+const sizeMap = {
+    xs: { copyIconSize: 12, closeIconSize: 12, buttonSize: 'xs' },
+    s: { copyIconSize: 14, closeIconSize: 14, buttonSize: 's' },
+    m: { copyIconSize: 16, closeIconSize: 16, buttonSize: 'm' },
+};
+const commonActionButtonProps = {
+    pin: 'brick-round',
+    className: b('addon', {
+        side: 'right',
+        interactive: true,
+    }),
+};
+const Label = react.forwardRef(function Label(props, ref) {
+    const { type = 'default', theme = 'normal', size = 'xs', icon, children, onCloseClick, className, disabled, copyText, closeButtonLabel, copyButtonLabel, interactive = false, value, onCopy, onClick, qa, } = props;
+    const actionButtonRef = react.useRef(null);
+    const hasContent = Boolean(children !== '' && react.Children.count(children) > 0);
+    const typeClose = type === 'close' && hasContent;
+    const typeCopy = type === 'copy' && hasContent;
+    const hasOnClick = Boolean(onClick);
+    const hasCopy = Boolean(typeCopy && copyText);
+    const isInteractive = (hasOnClick || hasCopy || interactive) && !disabled;
+    const { copyIconSize, closeIconSize, buttonSize } = sizeMap[size];
+    const leftIcon = icon && (react.createElement("div", { className: b('addon', { side: hasContent ? 'left' : undefined }) }, icon));
+    const content = hasContent && (react.createElement("div", { className: b('text') },
+        react.createElement("div", { className: b('content') }, children),
+        Boolean(value) && (react.createElement("div", { className: b('value') },
+            react.createElement("div", { className: b('separator') }, ":"),
+            react.createElement("div", { className: b('key') }, value)))));
+    const handleCloseClick = (event) => {
+        if (hasOnClick) {
+            /* preventing event from bubbling */
+            event.stopPropagation();
+        }
+        if (onCloseClick) {
+            onCloseClick(event);
+        }
+    };
+    const handleClick = (event) => {
+        var _a;
+        /**
+         * Triggered only if the handler was triggered on the element itself, and not on the actionButton
+         * It is necessary that keyboard navigation works correctly
+         */
+        if (!((_a = actionButtonRef.current) === null || _a === void 0 ? void 0 : _a.contains(event.target))) {
+            onClick === null || onClick === void 0 ? void 0 : onClick(event);
+        }
+    };
+    const { onKeyDown } = (0,useActionHandlers/* useActionHandlers */.N)(handleClick);
+    const renderLabel = (status) => {
+        let actionButton;
+        if (typeCopy) {
+            actionButton = (react.createElement(Button/* Button */.$, Object.assign({ ref: actionButtonRef, size: buttonSize, extraProps: { 'aria-label': copyButtonLabel || undefined } }, commonActionButtonProps),
+                react.createElement(Button/* Button */.$.Icon, null,
+                    react.createElement(ClipboardIcon/* ClipboardIcon */.u, { status: status || 'pending', size: copyIconSize }))));
+        }
+        else if (typeClose) {
+            actionButton = (react.createElement(Button/* Button */.$, Object.assign({ ref: actionButtonRef, onClick: onCloseClick ? handleCloseClick : undefined, size: buttonSize, extraProps: { 'aria-label': closeButtonLabel || undefined } }, commonActionButtonProps),
+                react.createElement(Icon/* Icon */.I, { size: closeIconSize, data: Xmark/* default */.A })));
+        }
+        return (react.createElement("div", { ref: ref, role: hasOnClick ? 'button' : undefined, tabIndex: hasOnClick ? 0 : undefined, onClick: hasOnClick ? handleClick : undefined, onKeyDown: hasOnClick ? onKeyDown : undefined, className: b({
+                theme,
+                size,
+                type,
+                'is-interactive': isInteractive,
+                'has-right-addon': Boolean(actionButton),
+                'has-left-addon': Boolean(leftIcon),
+                disabled,
+            }, className), "data-qa": qa },
+            leftIcon,
+            content,
+            actionButton));
+    };
+    if (hasCopy && copyText && !hasOnClick) {
+        return (react.createElement(CopyToClipboard/* CopyToClipboard */.$, { text: copyText, onCopy: onCopy, timeout: 1000 }, (status) => renderLabel(status)));
+    }
+    return renderLabel();
+});
+
+
 /***/ }),
 
 /***/ 4664:
@@ -58565,7 +58594,7 @@ var _typeof = (__webpack_require__(3738)["default"]);
 var toPrimitive = __webpack_require__(9045);
 function toPropertyKey(t) {
   var i = toPrimitive(t, "string");
-  return "symbol" == _typeof(i) ? i : i + "";
+  return "symbol" == _typeof(i) ? i : String(i);
 }
 module.exports = toPropertyKey, module.exports.__esModule = true, module.exports["default"] = module.exports;
 
@@ -58837,7 +58866,7 @@ function toPrimitive(t, r) {
 
 function toPropertyKey(t) {
   var i = toPrimitive(t, "string");
-  return "symbol" == (0,esm_typeof/* default */.A)(i) ? i : i + "";
+  return "symbol" == (0,esm_typeof/* default */.A)(i) ? i : String(i);
 }
 
 /***/ }),