@redneckz/wildless-cms-uni-blocks 0.3.91 → 0.3.93

package/bundle/bundle.umd.js

@@ -306,6 +306,7 @@
       IconMap["NewDocIcon"] = "NewDocIcon";
       IconMap["OfficeIcon"] = "OfficeIcon";
       IconMap["OkIcon"] = "OkIcon";
+      IconMap["PackA4"] = "PackA4";
       IconMap["PassSendIcon"] = "PassSendIcon";
       IconMap["PercentageRoundIcon"] = "PercentageRoundIcon";
       IconMap["PercentageSquareIcon"] = "PercentageSquareIcon";
@@ -389,6 +390,7 @@
       IconTitleMap["NewDocIcon"] = "\u041D\u043E\u0432\u044B\u0439 \u0434\u043E\u043A\u0443\u043C\u0435\u043D\u0442";
       IconTitleMap["OfficeIcon"] = "\u041E\u0444\u0438\u0441";
       IconTitleMap["OkIcon"] = "\u041B\u043E\u0433\u043E \u00AB\u041E\u0434\u043D\u043E\u043A\u043B\u0430\u0441\u0441\u043D\u0438\u043A\u0438\u00BB";
+      IconTitleMap["PackA4"] = "PackA4";
       IconTitleMap["PassSendIcon"] = "\u0411\u0438\u0437\u043D\u0435\u0441";
       IconTitleMap["PercentageRoundIcon"] = "\u041F\u0440\u043E\u0446\u0435\u043D\u0442\u044B (\u043A\u0440\u0443\u0433.)";
       IconTitleMap["PercentageSquareIcon"] = "\u041F\u0440\u043E\u0446\u0435\u043D\u0442\u044B";
@@ -834,7 +836,7 @@
       const { text, href, target, onClick } = button;
       const iconVersion = version === 'primary' ? 'white' : 'black';
       const backwardIcon = button?.icon || { icon: 'ArrowLeftIcon' };
-      return (jsxs("div", { className: `flex items-center ${className}`, children: [jsx(Button, { version: version, rounded: true, className: "w-12 h-12 min-h-12 min-w-12 flex items-center justify-center mr-3", ariaLabel: text, href: href, target: target, onClick: onClick, children: jsx(Img, { className: "w-4 h-4", image: { ...backwardIcon, iconVersion }, asSVG: true }) }), text ? jsx("span", { className: "text-m", children: text }) : null] }));
+      return (jsxs("div", { className: `flex items-center cursor-pointer ${className}`, onClick: onClick, children: [jsx(Button, { version: version, rounded: true, className: "w-12 h-12 min-h-12 min-w-12 flex items-center justify-center mr-3", ariaLabel: text, href: href, target: target, children: jsx(Img, { className: "w-4 h-4", image: { ...backwardIcon, iconVersion }, asSVG: true }) }), text ? jsx("span", { className: "text-m", children: text }) : null] }));
   }
 
   const productBlockStyleMap$1 = {
@@ -849,10 +851,9 @@
       const { context, className = '', breadcrumbs, backwardButton, version = 'primary', ...otherProps } = props;
       const router = context.useRouter();
       const { handlerDecorator } = context;
-      return (jsxs(BlockWrapper, { context: context, className: `font-sans overflow-hidden pt-[50px] pl-[50px] pb-[50px] pr-[7.5rem] box-border
-      ${backwardButton?.text ? 'min-h-[542px] max-h-[542]' : 'min-h-[454px] max-h-[454px]'} ${productBlockStyleMap$1[version]} ${className}`, ...otherProps, children: [backwardButton?.text
+      return (jsxs(BlockWrapper, { context: context, className: `font-sans overflow-hidden p-[50px] flex flex-col box-border min-h-[528px] ${productBlockStyleMap$1[version]} ${className}`, ...otherProps, children: [backwardButton?.text
                   ? renderBackwardButton(useLink({ router, handlerDecorator }, backwardButton), version, 'mb-10 -mt-2.5')
-                  : null, breadcrumbs?.length ? (jsx("div", { className: "text-xs mb-6", children: joinList(jsx("span", { className: `mx-2 ${breadcrumbsStyleMap[version]}`, children: "/" }))(breadcrumbs.map((breadcrumb, i) => (jsx(Breadcrumb, { ...useLink({ router, handlerDecorator }, { className: breadcrumbsStyleMap[version], ...breadcrumb }) }, String(i))))) })) : null, jsx(ProductBlockInner, { context: context, version: version, ...otherProps, className: backwardButton?.text ? 'pb-[88px]' : '' })] }));
+                  : null, breadcrumbs?.length ? (jsx("div", { className: "text-xs mb-6", children: joinList(jsx("span", { className: `mx-2 ${breadcrumbsStyleMap[version]}`, children: "/" }))(breadcrumbs.map((breadcrumb, i) => (jsx(Breadcrumb, { ...useLink({ router, handlerDecorator }, { className: breadcrumbsStyleMap[version], ...breadcrumb }) }, String(i))))) })) : null, jsx(ProductBlockInner, { context: context, version: version, ...otherProps })] }));
   });
 
   const textBlockStyleMaps = {
@@ -939,7 +940,7 @@
   const ProductTile = JSX(({ context, className = '', title, headlineVersion = 'S', description, additionalDescription, benefits, buttons, image, version = 'primary', ...rest }) => {
       return (jsxs(BlockWrapper, { context: context, className: `bg-white overflow-hidden text-primary-text font-sans p-9 box-border min-h-[364px] relative justify-between grid ${className} ${productTileStyleMap[version]} ${getTileRightPadding(className)} ${getTileMinHeight(className)} `, ...rest, children: [jsxs("div", { className: "z-[1]", children: [jsx(Headline, { context: context, className: "!p-0", title: title, description: description, headlineVersion: headlineVersion, bgColorHeadline: version, align: "left" }), renderBenefits$1(benefits || [], version), additionalDescription
                           ? renderAdditionalDescription(additionalDescription, version)
-                          : null] }), buttons?.length ? (jsx(ButtonSection, { context: context, buttons: buttons, className: "flex self-end mt-5 gap-4 z-[1]" })) : null, image?.src ? jsx(Img, { className: "absolute right-0 bottom-0", image: image }) : null] }));
+                          : null] }), buttons?.length ? (jsx(ButtonSection, { context: context, buttons: buttons, className: "flex self-end mt-5 gap-4 z-[1] text-l" })) : null, image?.src ? jsx(Img, { className: "absolute right-0 bottom-0", image: image }) : null] }));
   });
   function renderBenefits$1(benefits, version) {
       return (jsxs("div", { className: "flex mt-4", children: [benefits.length ? (jsx("div", { className: "mr-6 gap-2.5 text-h6", children: benefits.map(renderBenefitLabel) })) : null, benefits.length ? (jsx("div", { className: "pt-1 text-m", children: benefits.map((_, i) => renderBenefitDescription(_, i, version)) })) : null] }));
@@ -952,7 +953,7 @@
           primary: 'text-secondary-text',
           secondary: 'text-white',
       };
-      return (jsx("div", { className: `${i ? 'mt-4' : ''} ${labelStyleMap[version]}`, children: benefit.description }, String(i)));
+      return (jsx("div", { className: `text-m ${i ? 'mt-4' : ''} ${labelStyleMap[version]}`, children: benefit.description }, String(i)));
   }
   function renderAdditionalDescription(additionalDescription, version = 'primary') {
       const descStyleMap = {
@@ -1550,9 +1551,25 @@
       white: 'bg-white',
   };
   const CatalogCard = JSX(({ className = '', title, description, image, price, button, colors }) => {
-      return (jsxs("section", { className: `border border-solid box-border p-[30px] min-w-[402px] flex flex-col justify-left ${className}`, role: "listitem", children: [image?.src ? jsx(Img, { className: "mb-5 flex justify-center", image: image }) : null, title ? (jsx(Heading, { headingType: "h6", as: "h4", className: "text-left mb-1.5", title: title })) : null, description ? (jsx("div", { className: "text-m-md text-left mb-4 font-light", children: description })) : null, colors?.length ? (jsxs("div", { className: "flex mb-4 text-m-md text-secondary-text font-light", children: [jsx("div", { className: "mr-1.5", children: "\u0414\u043E\u0441\u0442\u0443\u043F\u043D\u044B\u0435 \u0446\u0432\u0435\u0442\u0430: " }), colors.map(renderColorOption)] })) : null, price ? jsxs("div", { className: "text-h3 text-left", children: [price, "\u00A0\u20BD"] }) : null, button?.text ? jsx(Button, { className: "mt-5 w-full", ...button }) : null] }));
+      return (jsxs("section", { className: `border border-solid box-border p-[30px] min-w-[402px] flex flex-col justify-left ${className}`, role: "listitem", children: [image?.src ? jsx(Img, { className: "mb-5 flex justify-center", image: image }) : null, title ? (jsx(Heading, { headingType: "h6", as: "h4", className: "text-left mb-1.5", title: title })) : null, description ? (jsx("div", { className: "text-m-md text-left mb-4 font-light", children: description })) : null, colors?.length ? (jsxs("div", { className: "flex mb-4 text-m-md text-secondary-text font-light", children: [jsx("div", { className: "mr-1.5", children: "\u0414\u043E\u0441\u0442\u0443\u043F\u043D\u044B\u0435 \u0446\u0432\u0435\u0442\u0430: " }), colors.map(renderColorOption)] })) : null, price ? jsxs("div", { className: "text-h3 text-left", children: [price, "\u00A0\u20BD"] }) : null, button ? renderButton(button) : null] }));
   });
   const renderColorOption = (color, i) => (jsx("span", { className: `w-6 h-6 ml-3 border border-solid border-main-divider rounded-full ${cardStyleMap[color]}` }, String(i)));
+  const renderButton = (button) => {
+      const { icon, iconRight, text } = button;
+      if (!text) {
+          return null;
+      }
+      const leftIcon = renderButtonIcon(icon);
+      const rightIcon = renderButtonIcon(iconRight);
+      return (jsx(Button, { className: "mt-5 w-full", appendLeft: leftIcon, appendRight: rightIcon, ...button }));
+  };
+  const renderButtonIcon = (buttonIcon) => {
+      if (!buttonIcon || !buttonIcon.icon) {
+          return null;
+      }
+      const iconWidth = buttonIcon?.size?.width ? `${buttonIcon.size.width}` : '24';
+      return jsx(Img, { image: buttonIcon, width: iconWidth, height: "24", asSVG: true });
+  };
 
   const BLUR_BLOCK_CLASSES$1 = 'absolute top-0 bottom-0 w-[84px]';
   const CARD_FULL_VIEW_COUNT$1 = 3;
@@ -1789,10 +1806,6 @@
       [() => true, () => props.handleConvert(props.value)],
   ])(props)?.();
 
-  function renderButton(button) {
-      return (jsx(Button, { className: "py-4 mr-1", version: button?.version, href: button?.href, target: "_blank", children: button?.text }));
-  }
-
   const Input = JSX(({ className = '', id, name, type = 'text', placeholder, pattern, value, onChange }) => {
       const handleChange = (e) => {
           const validInputValue = e.target.validity.valid ? e.target.value : value;
@@ -1801,8 +1814,11 @@
       return (jsx("input", { className: className, id: id, name: name || id, type: type, pattern: pattern, placeholder: placeholder, value: value, onChange: handleChange }));
   });
 
+  const selectStyle = {
+      background: `url('/icons/ArrowDownIcon.svg') no-repeat right 16px top 50%`,
+  };
   const Select = JSX(({ className = '', id, name, children, value, onChange }) => {
-      return (jsx("select", { className: className, id: id, name: name || id, value: value, onChange: (e) => onChange(e.target.value), children: children }));
+      return (jsx("select", { className: `appearance-none ${className}`, style: selectStyle, id: id, name: name || id, value: value, onChange: (e) => onChange(e.target.value), children: children }));
   });
 
   const SelectOption = JSX(({ className = '', value, selected, children }) => {
@@ -1815,6 +1831,8 @@
   }
 
   const ExchangeCurrencyCalculator = JSX(({ context, className = '', currencyRatesBuy, currencyRatesSell, button }) => {
+      const { useRouter, handlerDecorator } = context;
+      const router = useRouter();
       const [calcState, setCalcState] = context.useState({
           inputSell: '',
           inputBuy: '',
@@ -1838,7 +1856,7 @@
                   setSelected: handleSelectBuy(calcState, handleSetCalcState, currencyRatesBuy),
                   value: calcState.inputBuy,
                   setValue: (value) => handleInputBuy(handleSetCalcState, currencyRatesBuy)(value, calcState.selectBuy, calcState.selectSell),
-              }), button?.text ? renderButton(button) : null] }));
+              }), button?.text ? (jsx(Button, { className: "py-4 mr-1", version: button?.version, ...useLink({ router, handlerDecorator }, button), children: button.text })) : null] }));
   });
   const handleSelectSell = (calcState, setCalcState, currencyRatesSell) => (value) => {
       setCalcState({ selectSell: value });
@@ -1916,7 +1934,7 @@
           ? ' placeholder-transparent font-normal'
           : 'font-light h-full';
       const inputPlaceholder = isMobile ? 'some search' : undefined;
-      return (jsxs("form", { className: `font-sans relative ${className}`, children: [jsxs("div", { className: "absolute rounded h-full flex items-center justify-center pl-4 max-w-[170px] gap-3.5 pointer-events-none", children: [jsx("div", { className: LoupeIconClassName, children: jsx(Img, { image: "LoupeIcon", width: "24", height: "24" }) }), term ? null : (jsx("label", { htmlFor: "search-bar-input", className: `text-secondary-text ${SearchBarLabelClassName}`, children: "\u041F\u043E\u0438\u0441\u043A \u043F\u043E \u0441\u0430\u0439\u0442\u0443" }))] }), jsx("input", { id: "search-bar-input", className: `h-12 pl-12 w-full peer text-l text-black border border-solid rounded box-border
+      return (jsxs("form", { className: `font-sans relative ${className}`, children: [jsxs("div", { className: "absolute rounded h-full flex items-center justify-center pl-4 max-w-[170px] gap-3.5 pointer-events-none", children: [jsx("div", { className: LoupeIconClassName, children: jsx(Img, { image: "LoupeIcon", width: "24", height: "24" }) }), term ? null : (jsx("label", { htmlFor: "search-bar-input", className: `text-secondary-text ${SearchBarLabelClassName}`, children: "\u041F\u043E\u0438\u0441\u043A \u043F\u043E \u0441\u0430\u0439\u0442\u0443" }))] }), jsx("input", { id: "search-bar-input", className: `h-12 pl-12 w-full peer text-l text-black border border-solid rounded-md box-border
               outline-none pr-[6%] border-main-divider focus:border-primary-text ${SearchBarInputClassName}`, value: term, onChange: (e) => setTerm(e.target.value), type: "text", name: "search-bar-input", placeholder: inputPlaceholder }), isMobile ? (jsx("button", { className: "visible peer-placeholder-shown:invisible absolute top-2 right-3 w-6 h-6 p-1 bg-transparent cursor-pointer border-none", onClick: (e) => {
                       e.preventDefault();
                       setTerm('');
@@ -1941,26 +1959,26 @@
   });
   const renderContact = (item, index) => {
       const { type, text, description } = item;
-      return (jsxs("div", { className: "mb-4", children: [jsx("div", { children: renderText(type, text) }), jsx("div", { className: "mt-1 font-sans text-s-light text-secondary-text", children: description })] }, String(index)));
+      return (jsxs("div", { className: "mb-4", children: [jsx("div", { children: renderText(type, text) }), jsx("div", { className: "mt-1 text-s-light text-secondary-text", children: description })] }, String(index)));
   };
   const renderText = (type, text = '') => {
       switch (type) {
           case 'tel':
-              return (jsx("a", { className: "font-sans text-xl-light text-primary-text no-underline", href: `tel:${formatTel(text)}`, children: text }));
+              return (jsx("a", { className: "text-h6 text-primary-text hover:text-primary-main no-underline", href: `tel:${formatTel(text)}`, children: text }));
           case 'email':
-              return (jsx("a", { className: "font-sans text-xl-light text-primary-text no-underline", href: `mailto:${text}`, children: text }));
+              return (jsx("a", { className: "text-xl-light text-primary-text no-underline", href: `mailto:${text}`, children: text }));
           default:
               return jsx("span", { children: text });
       }
   };
   const formatTel = (s) => s.replaceAll(/\D/g, '');
 
-  const HorizontalNavigationLink = JSX(({ className = '', index, text, href, target, onClick }) => (jsx("a", { className: `font-sans text-secondary-text hover:text-primary-main inline-block no-underline ${className}`, href: href, target: target, onClick: onClick, children: text || `Документ ${index}` })));
+  const HorizontalNavigationLink = JSX(({ className = '', index, text, href, target, onClick }) => (jsx("a", { className: `text-secondary-text hover:text-primary-main inline-block no-underline ${className}`, href: href, target: target, onClick: onClick, children: text || `Документ ${index}` })));
 
   const HorizontalNavigation = JSX(({ links, className = '', context }) => {
       const router = context.useRouter();
       const { handlerDecorator } = context;
-      return (jsx("div", { className: className, children: links?.length ? (jsx("div", { className: "flex justify-between items-center gap-5 py-5 border-solid border-x-0 border-y border-y-main-divider", children: links.map((_, i) => (jsx(HorizontalNavigationLink, { index: i, className: "font-light max-w-[292px]", ...useLink({ router, handlerDecorator }, _) }, String(i)))) })) : null }));
+      return (jsx("div", { className: className, children: links?.length ? (jsx("div", { className: "flex justify-between items-center gap-5 py-5 border-solid border-x-0 border-y border-y-main-divider", children: links.map((_, i) => (jsx(HorizontalNavigationLink, { index: i, className: "font-l-light max-w-[292px]", ...useLink({ router, handlerDecorator }, _) }, String(i)))) })) : null }));
   });
 
   const cmp = (a) => (b) => a?.href === b?.href;
@@ -1987,13 +2005,13 @@
           router: context.useRouter(),
           handlerDecorator: context.handlerDecorator,
       };
-      return (jsx("div", { className: `flex items-start justify-between gap-11 xl:gap-5 ${className}`, children: mergedItems?.map((_, i) => renderColumn(_, i, linkParams)) }));
+      return (jsx("div", { className: `flex items-start justify-between gap-[54px] xl:gap-5 ${className}`, children: mergedItems?.map((_, i) => renderColumn(_, i, linkParams)) }));
   });
   const renderColumn = (c, index, { router, handlerDecorator }) => {
       const { text, href, items, target } = c;
-      return (jsxs("div", { className: "flex flex-col w-1/5 last:w-1/4 gap-[14px]", children: [jsx("a", { className: "block font-sans leading-5 text-l text-primary-text no-underline", href: href, target: target || '_self', children: text || `Раздел ${index}` }), items?.map((_, i) => (jsx(ColumnItem, { ...useLink({ router, handlerDecorator }, _), index: i }, String(i))))] }, String(index)));
+      return (jsxs("div", { className: "flex flex-col w-1/5 last:w-1/4 gap-3.5", children: [jsx("a", { className: "block leading-5 text-l text-primary-text hover:text-primary-main no-underline", href: href, target: target || '_self', children: text || `Раздел ${index}` }), items?.map((_, i) => (jsx(ColumnItem, { ...useLink({ router, handlerDecorator }, _), index: i }, String(i))))] }, String(index)));
   };
-  const ColumnItem = JSX(({ text, href, target, index }) => (jsx("a", { className: "block font-sans text-l-light text-secondary-text hover:text-primary-main no-underline", href: href, target: target || '_self', children: text || `Раздел ${index}` })));
+  const ColumnItem = JSX(({ text, href, target, index }) => (jsx("a", { className: "block text-l-light text-secondary-text hover:text-primary-main no-underline", href: href, target: target || '_self', children: text || `Раздел ${index}` })));
 
   const ICONS_MAP = [
       {
@@ -2029,7 +2047,7 @@
       }
       const classes = version === 'secondary'
           ? 'bg-secondary-light hover:bg-secondary-hover'
-          : 'border-main-divider border-solid border-[1px] hover:bg-primary-main';
+          : 'border-solid border-[1px] border-main-divider hover:border-transparent hover:bg-primary-main';
       const isPrimary = version === 'primary';
       return (jsx("a", { className: `flex items-center justify-center rounded-md w-14 h-14 group box-border ${classes} ${isPrimary ? 'hover:text-black' : ''}`, href: href, "aria-label": label, target: "_blank", rel: "noopener noreferrer", children: icon ? (jsx(Img, { image: icon, imageClassName: "group-hover:text-white", width: "24", height: "24", asSVG: true })) : null }));
   });
@@ -2037,20 +2055,20 @@
   const SocialMedia = JSX(({ className = '', media, version, context, children }) => {
       const router = context.useRouter();
       const { handlerDecorator } = context;
-      return (jsxs("div", { children: [jsx("div", { className: `flex gap-2.5 ${className}`, children: media?.map((_, index) => (jsx(MediaButton, { version: version, ...useLink({ router, handlerDecorator }, _) }, String(index)))) }), jsx("span", { className: "text-s-light text-secondary-text", children: children })] }));
+      return (jsxs("div", { className: "font-sans", children: [jsx("div", { className: `flex gap-2.5 ${className}`, children: media?.map((_, index) => (jsx(MediaButton, { version: version, ...useLink({ router, handlerDecorator }, _) }, String(index)))) }), jsx("span", { className: "text-s-light text-secondary-text", children: children })] }));
   });
 
-  const TextInformationLink = JSX(({ className = '', index, text, href, target, onClick }) => (jsx("a", { className: `font-sans text-xs text-secondary-text visited:text-secondary-text hover:text-primary-text inline-block no-underline max-w-[292px] ${className}`, href: href, target: target, onClick: onClick, children: text || `Документ ${index}` })));
+  const TextInformationLink = JSX(({ className = '', index, text, href, target, onClick }) => (jsx("a", { className: `text-xs text-secondary-text visited:text-secondary-text hover:text-primary-main inline-block no-underline max-w-[292px] ${className}`, href: href, target: target, onClick: onClick, children: text || `Документ ${index}` })));
 
   const TextInformation = JSX(({ className, links, context }) => {
       const router = context.useRouter();
       const { handlerDecorator } = context;
-      return (jsxs("div", { className: `${className || ''}`, children: [jsx("div", { className: "pt-5", children: jsx("span", { className: "font-sans font-light text-xs text-secondary-text", children: `\u00a9\u00A02000-${new Date().getFullYear()}\u00A0АО \u00ABРоссельхозбанк\u00BB Генеральная лицензия Банка России \u2116\u00A03349 от\u00A012.08.2015\u00A0г.` }) }), links?.length ? (jsx("div", { className: "flex justify-start items-start gap-5 pt-2.5", children: links.map((_, i) => (jsx(TextInformationLink, { index: i, className: "font-light", ...useLink({ router, handlerDecorator }, _) }, String(i)))) })) : null] }));
+      return (jsxs("div", { className: `${className || ''}`, children: [jsx("div", { className: "pt-5", children: jsx("span", { className: "font-light text-xs text-secondary-text", children: `\u00a9\u00A02000-${new Date().getFullYear()}\u00A0АО \u00ABРоссельхозбанк\u00BB Генеральная лицензия Банка России \u2116\u00A03349 от\u00A012.08.2015\u00A0г.` }) }), links?.length ? (jsx("div", { className: "flex justify-start items-start gap-5 pt-2.5", children: links.map((_, i) => (jsx(TextInformationLink, { index: i, className: "font-light", ...useLink({ router, handlerDecorator }, _) }, String(i)))) })) : null] }));
   });
 
   const LEFT_COL_WIDTH_FULL_HD = 'w-[204px]';
   const Footer = JSX(({ className, documents, relatedEnterprises, contacts, socialMedia, mobileApps, topItems, context, ...rest }) => {
-      return (jsxs(BlockWrapper, { tag: "footer", context: context, className: `p-9 bg-white ${className || ''}`, ...rest, children: [jsxs("div", { className: "flex items-stretch gap-[54px] pb-[30px] xl:gap-8", children: [jsx(Logo, { className: LEFT_COL_WIDTH_FULL_HD }), jsx(SearchBar, { context: context, className: "grow" })] }), jsxs("div", { className: "flex items-stretch gap-[54px] xl:gap-8", children: [jsxs("div", { className: `${LEFT_COL_WIDTH_FULL_HD} flex flex-col shrink-0 overflow-hidden`, children: [jsx(Contacts, { items: contacts, context: context, hasButton: true }), jsx(SocialMedia, { media: socialMedia, context: context, children: "\u0421\u043E\u0446\u0441\u0435\u0442\u0438" }), jsx(SocialMedia, { className: "mt-6", media: mobileApps, context: context, children: "\u041C\u043E\u0431\u0438\u043B\u044C\u043D\u043E\u0435 \u043F\u0440\u0438\u043B\u043E\u0436\u0435\u043D\u0438\u0435" })] }), jsx(Sitemap, { className: "pt-[3px]", context: context, items: topItems })] }), jsx(HorizontalNavigation, { className: "mt-[98px]", links: relatedEnterprises, context: context }), jsx(TextInformation, { links: documents, context: context })] }));
+      return (jsxs(BlockWrapper, { tag: "footer", context: context, className: `p-9 bg-white font-sans ${className || ''}`, ...rest, children: [jsxs("div", { className: "flex items-stretch gap-[54px] pb-[30px] xl:gap-8", children: [jsx(Logo, { className: LEFT_COL_WIDTH_FULL_HD }), jsx(SearchBar, { context: context, className: "grow" })] }), jsxs("div", { className: "flex items-stretch gap-[54px] xl:gap-8", children: [jsxs("div", { className: `${LEFT_COL_WIDTH_FULL_HD} flex flex-col shrink-0 overflow-hidden`, children: [jsx(Contacts, { items: contacts, context: context, hasButton: true }), jsx(SocialMedia, { media: socialMedia, context: context, children: "\u0421\u043E\u0446\u0441\u0435\u0442\u0438" }), jsx(SocialMedia, { className: "mt-6", media: mobileApps, context: context, children: "\u041C\u043E\u0431\u0438\u043B\u044C\u043D\u043E\u0435 \u043F\u0440\u0438\u043B\u043E\u0436\u0435\u043D\u0438\u0435" })] }), jsx(Sitemap, { className: "pt-[3px]", context: context, items: topItems })] }), jsx(HorizontalNavigation, { className: "mt-[98px]", links: relatedEnterprises, context: context }), jsx(TextInformation, { links: documents, context: context })] }));
   });
 
   const GracePeriod = JSX(({ className = '', title, description, calendar, ...rest }) => {
@@ -2166,7 +2184,7 @@
   };
   const HeaderSecondaryMenu = JSX(({ context, className, defaultLocation = '', bgColor = 'bg-white' }) => {
       const [city, getCity] = context.useGeolocation(defaultLocation);
-      return (jsxs("div", { className: `flex items-center ${className || ''}`, children: [jsx(TopItem, { className: "mr-5", flat: true, href: "#", text: city, ariaLabel: "\u041C\u0435\u0441\u0442\u043E\u043F\u043E\u043B\u043E\u0436\u0435\u043D\u0438\u0435", onClick: getCity, bgColor: bgColor }), jsx(TopItem, { className: "mr-7", flat: true, href: "#", text: "\u041E\u0444\u0438\u0441\u044B \u0438 \u0431\u0430\u043D\u043A\u043E\u043C\u0430\u0442\u044B", ariaLabel: "\u0421\u043F\u0438\u0441\u043E\u043A \u0432\u0441\u0435\u0445 \u0434\u043E\u0441\u0442\u0443\u043F\u043D\u044B\u0445 \u043E\u0444\u0438\u0441\u043E\u0432 \u0438 \u0431\u0430\u043D\u043A\u043E\u043C\u0430\u0442\u043E\u0432", bgColor: bgColor }), jsx(HeaderSecondaryMenuButton, { className: `mr-5 ${COLORS_MAP[bgColor]}`, ariaLabel: "\u041F\u043E\u0438\u0441\u043A \u043F\u043E \u0441\u0430\u0439\u0442\u0443", children: jsx(Img, { image: { icon: 'LoupeIcon', iconVersion: LINKS_ICON_VERSION_MAP[bgColor] }, className: "h-full", asSVG: true }) }), jsx(HeaderSecondaryMenuButton, { className: `${LINKS_COLORS_MAP[bgColor]} min-w-[32px] min-h-[32px]`, ariaLabel: "\u0414\u043E\u043F\u043E\u043B\u043D\u0438\u0442\u0435\u043B\u044C\u043D\u044B\u0435 \u0441\u0441\u044B\u043B\u043A\u0438", children: jsx(Img, { image: { icon: 'GridIcon', iconVersion: LINKS_ICON_VERSION_MAP[bgColor] }, className: "h-full bg-secondary-light rounded-full", asSVG: true }) })] }));
+      return (jsxs("div", { className: `flex items-center ${className || ''}`, children: [jsx(TopItem, { className: "mr-5", flat: true, href: "#", text: city, ariaLabel: "\u041C\u0435\u0441\u0442\u043E\u043F\u043E\u043B\u043E\u0436\u0435\u043D\u0438\u0435", onClick: getCity, bgColor: bgColor }), jsx(TopItem, { className: "mr-7", flat: true, href: "#", text: "\u041E\u0444\u0438\u0441\u044B \u0438 \u0431\u0430\u043D\u043A\u043E\u043C\u0430\u0442\u044B", ariaLabel: "\u0421\u043F\u0438\u0441\u043E\u043A \u0432\u0441\u0435\u0445 \u0434\u043E\u0441\u0442\u0443\u043F\u043D\u044B\u0445 \u043E\u0444\u0438\u0441\u043E\u0432 \u0438 \u0431\u0430\u043D\u043A\u043E\u043C\u0430\u0442\u043E\u0432", bgColor: bgColor }), jsx(HeaderSecondaryMenuButton, { className: `mr-5 group ${COLORS_MAP[bgColor]}`, ariaLabel: "\u041F\u043E\u0438\u0441\u043A \u043F\u043E \u0441\u0430\u0439\u0442\u0443", children: jsx(Img, { image: { icon: 'LoupeIcon', iconVersion: LINKS_ICON_VERSION_MAP[bgColor] }, className: "h-full pointer-events-none", imageClassName: "group-hover:text-primary-main pointer-events-none", asSVG: true }) }), jsx(HeaderSecondaryMenuButton, { className: `${LINKS_COLORS_MAP[bgColor]} group min-w-[32px] min-h-[32px]`, ariaLabel: "\u0414\u043E\u043F\u043E\u043B\u043D\u0438\u0442\u0435\u043B\u044C\u043D\u044B\u0435 \u0441\u0441\u044B\u043B\u043A\u0438", children: jsx(Img, { image: { icon: 'GridIcon', iconVersion: LINKS_ICON_VERSION_MAP[bgColor] }, className: "h-full bg-main-divider rounded-full pointer-events-none", imageClassName: "group-hover:text-primary-main", asSVG: true }) })] }));
   });
 
   const maxBy = (discriminator) => (list) => list.reduceRight((a, b) => (discriminator(a) > discriminator(b) ? a : b));
@@ -2231,7 +2249,7 @@
               setVisibleItemsCount((prev) => Math.max(prev, itemIndex + 1));
           }
       };
-      return (jsxs("nav", { className: "relative mt-5", children: [jsx("div", { className: "overflow-hidden whitespace-nowrap mr-52 pb-3", children: subItems.map((_, i) => (jsx(IntersectionObserverTag, { tag: "span", observerCallback: observerCallback(i), observerOptions: { threshold: 1 }, children: jsx(HeaderItem, { className: `mr-8 ${visibleItemsCount - 1 < i ? 'invisible' : ''}`, active: _ === activeSubItem, ...useLink({ router, handlerDecorator }, _), bgColor: bgColor }) }, String(i)))) }), dropDownMenuItems.length ? (jsx(DropdownMenu, { context: context, activeSubItem: activeSubItem, menuVisible: menuVisible, toggleMenu: toggleMenu, menuItems: dropDownMenuItems, bgColor: bgColor })) : null] }));
+      return (jsxs("nav", { className: "relative mt-6", children: [jsx("div", { className: "overflow-hidden whitespace-nowrap mr-52 pb-3", children: subItems.map((_, i) => (jsx(IntersectionObserverTag, { tag: "span", observerCallback: observerCallback(i), observerOptions: { threshold: 1 }, children: jsx(HeaderItem, { className: `mr-8 ${visibleItemsCount - 1 < i ? 'invisible' : ''}`, active: _ === activeSubItem, ...useLink({ router, handlerDecorator }, _), bgColor: bgColor }) }, String(i)))) }), dropDownMenuItems.length ? (jsx(DropdownMenu, { context: context, activeSubItem: activeSubItem, menuVisible: menuVisible, toggleMenu: toggleMenu, menuItems: dropDownMenuItems, bgColor: bgColor })) : null] }));
   });
 
   const BORDER_COLORS = {
@@ -2243,7 +2261,9 @@
       const sitemap = useSitemap(context.useAsyncData);
       const { handlerDecorator } = context;
       const mergedItems = mergeTopItems(sitemap.topItems, topItems);
-      const activeTopItem = mergedItems.find(isTopItemActive(router));
+      const [firstPortal] = mergedItems;
+      // Если по слагу невозможно понять к какому подпорталу этот слаг относиться, то выбираем первый подпортал.
+      const activeTopItem = mergedItems.find(isTopItemActive(router)) || firstPortal;
       const topMenu = mergedItems.map((_, i) => (jsx(TopItem, { active: _ === activeTopItem, ...useLink({ router, handlerDecorator }, _), "aria-label": _.text, bgColor: bgColor }, String(i))));
       return (jsx(BlockWrapper, { tag: "header", context: context, className: `pt-6 pb-5 px-20 ${bgColor} ${className}`, ...rest, children: jsxs("div", { className: "container", children: [jsxs("div", { className: "flex items-center", children: [jsx(Logo, { className: "mr-8", bgColor: bgColor, logo: logo }), topMenu, jsx(HeaderSecondaryMenu, { context: context, className: "ml-auto", defaultLocation: defaultLocation, bgColor: bgColor })] }), jsx("div", { className: `mt-6 h-[1px] ${BORDER_COLORS[bgColor]}` }), showSubMenu && activeTopItem?.items?.length ? (jsx(HeaderSubMenu, { context: context, subItems: activeTopItem.items, bgColor: bgColor })) : null] }) }));
   });
@@ -2567,6 +2587,116 @@
           }) }));
   };
 
+  const SAFE_DEPOSIT_RENTAL_URL = '/api/v1/safe-deposit-rental.json';
+  function useSafeDepositRental(useAsyncData) {
+      const { data } = useAsyncData(SAFE_DEPOSIT_RENTAL_URL, fetchSafeDepositRental);
+      const result = data || [];
+      return result;
+  }
+  async function fetchSafeDepositRental() {
+      try {
+          const response = await fetch(SAFE_DEPOSIT_RENTAL_URL);
+          return await response.json();
+      }
+      catch (err) {
+          console.error(err);
+      }
+  }
+
+  const Radio = JSX(({ name, text, value, checked, onChange, className }) => (jsx("div", { className: className, children: jsxs("label", { className: "flex items-center relative cursor-pointer", children: [jsx("input", { className: "appearance-none flex justify-center items-center w-5 h-5 border-2 border-primary-main rounded-full cursor-pointer after:block after:w-2.5 after:h-2.5 after:rounded-full checked:after:bg-primary-main", type: "radio", value: value, name: name, checked: checked, onChange: onChange }), text ? jsx("span", { className: "font-sans ml-3 text-m-base cursor-pointer", children: text }) : null] }) })));
+
+  const SafeDepositRentalForm = ({ cities, cellDimensions, cellOptions, days, setDays, context, }) => {
+      return (jsxs("div", { className: "flex-1 mr-9", children: [cities.length ? renderCitiesOffices(cities, context) : null, renderRentalPeriod(days, setDays), cellDimensions.length && cellOptions.length
+                  ? renderDimensionsOptions(cellDimensions, cellOptions, context)
+                  : null, jsx("span", { className: "text-secondary-text font-light", children: "\u0422\u0438\u043F \u0434\u043E\u0433\u043E\u0432\u043E\u0440\u0430" }), jsxs("div", { className: "flex justify-between items-center mt-5", children: [renderRadioButtons(context), jsx(Button, { text: "\u041E\u0444\u0438\u0441\u044B \u043D\u0430 \u043A\u0430\u0440\u0442\u0435", version: "primary" })] })] }));
+  };
+  const renderCitiesOffices = (cities, context) => {
+      const [selectedCity, setSelectedCity] = context.useState(cities[0].city);
+      const setSelected = (_) => setSelectedCity(_);
+      const offices = cities.find((_) => _.city === selectedCity).offices;
+      return (jsxs("div", { className: "flex justify-between mb-6", children: [jsx("div", { className: "w-full mr-4", children: cities.length
+                      ? renderSelect({
+                          data: cities,
+                          field: 'city',
+                          selected: selectedCity,
+                          setSelected,
+                          label: 'Город',
+                      })
+                      : null }), jsx("div", { className: "w-full", children: offices.length
+                      ? renderSelect({
+                          data: offices,
+                          field: 'office',
+                          selected: offices[0],
+                          setSelected,
+                          label: 'Отделение',
+                      })
+                      : null })] }));
+  };
+  const renderDimensionsOptions = (cellDimensions, cellOptions, context) => {
+      const [selectedDimension, setSelectedDimension] = context.useState(cellDimensions[0].dimension);
+      const [selectedOption, setSelectedOption] = context.useState(cellOptions[0].option);
+      return (jsxs("div", { className: "flex justify-between mb-6", children: [jsx("div", { className: "mr-4 w-full", children: cellDimensions.length
+                      ? renderSelect({
+                          data: cellDimensions,
+                          field: 'dimension',
+                          selected: selectedDimension,
+                          setSelected: setSelectedDimension,
+                          label: 'Размер ячейки',
+                      })
+                      : null }), jsx("div", { className: "w-full", children: cellOptions.length
+                      ? renderSelect({
+                          data: cellOptions,
+                          field: 'option',
+                          selected: selectedOption,
+                          setSelected: setSelectedOption,
+                          label: 'Параметры ячейки, мм (ВхШхД)',
+                      })
+                      : null })] }));
+  };
+  const renderSelect = (props) => {
+      const { data, field, selected, setSelected, label } = props;
+      return (jsxs("div", { children: [jsx("span", { className: "block font-light text-m mb-2", children: label }), jsx(Select, { className: "h-14 border border-gray p-4 rounded-md text-m-sm w-full cursor-pointer", value: selected, onChange: (_) => setSelected(_), children: data.map((_, i) => (jsx(SelectOption, { value: _?.[field], children: _?.[field] }, String(i)))) })] }));
+  };
+  const renderRentalPeriod = (days, setDays) => {
+      const items = ['От 1 дня', 'До 365 дней'];
+      return (jsxs("div", { className: "mb-6", children: [jsx("span", { className: "block font-light text-m mb-[3px]", children: "\u0421\u0440\u043E\u043A \u0430\u0440\u0435\u043D\u0434\u044B" }), jsx(InputRange, { min: 1, max: 365, value: days, items: items, onChange: setDays })] }));
+  };
+  const renderRadioButtons = (context) => {
+      const [selected, setSelected] = context.useState('option1');
+      const onChange = (_) => setSelected(_.target.value);
+      return (jsxs("div", { children: [jsx(Radio, { className: "mb-2", name: "contractType", text: "\u041F\u0440\u043E\u0441\u0442\u043E\u0435 \u0445\u0440\u0430\u043D\u0435\u043D\u0438\u0435", value: "option1", checked: selected === 'option1', onChange: onChange }), jsx(Radio, { name: "contractType", text: "\u0421\u0434\u0435\u043B\u043A\u0430 \u0441 \u043D\u0435\u0434\u0432\u0438\u0436\u0438\u043C\u043E\u0441\u0442\u044C\u044E", value: "option2", checked: selected === 'option2', onChange: onChange })] }));
+  };
+
+  const SafeDepositRentalTotal = ({ days }) => {
+      const price = calculatePrice(days);
+      return (jsxs("div", { className: "flex flex-col justify-between", children: [jsxs("div", { className: "flex", children: [renderTotal('Аренда за', days, 'mr-11'), renderTotal('Цена', price + ' ₽')] }), jsxs("div", { className: "bg-primary-main px-10 pt-10 pb-4 text-center", children: [jsx(Img, { image: { icon: 'PackA4' }, width: "290", height: "257", asSVG: true }), jsxs("span", { className: "font-light text-white opacity-80 mt-2 inline-block", children: ["\u041D\u0430 \u0440\u0438\u0441\u0443\u043D\u043A\u0438 \u0438\u0437\u043E\u0431\u0440\u0430\u0436\u0435\u043D\u0430 \u043F\u0430\u0447\u043A\u0430", jsx("br", {}), " \u043B\u0438\u0441\u0442\u043E\u0432 \u0444\u043E\u0440\u043C\u0430\u0442\u0430 \u04104"] })] })] }));
+  };
+  const renderTotal = (label, total, className = '') => {
+      return (jsxs("div", { className: className, children: [jsx("span", { className: "block font-light text-m mb-1", children: label }), jsx("span", { className: "text-h3", children: total })] }));
+  };
+  const calculatePrice = (days) => {
+      let TariffType = 1;
+      switch (true) {
+          case days > 30 && days <= 90:
+              TariffType = 2;
+              break;
+          case days > 90 && days <= 180:
+              TariffType = 3;
+              break;
+          case days > 180 && days <= 365:
+              TariffType = 4;
+              break;
+      }
+      return days * TariffType;
+  };
+
+  const DEFAULT_DAYS = 26;
+  const SafeDepositRental = JSX(({ context, className = '', ...rest }) => {
+      const [days, setDays] = context.useState(DEFAULT_DAYS);
+      const data = useSafeDepositRental(context.useAsyncData);
+      return (jsxs(BlockWrapper, { context: context, className: `bg-white px-8 py-12 ${className}`, ...rest, children: [jsxs("div", { className: "flex justify-between align-top mb-6", children: [data?.cities?.length ? (jsx(SafeDepositRentalForm, { ...data, days: days, setDays: setDays, context: context })) : null, jsx(SafeDepositRentalTotal, { days: days })] }), jsx("p", { className: "text-button font-light text-secondary-text", children: "\u0410\u0440\u0435\u043D\u0434\u0430 \u0421\u042F, \u0432 \u0441\u043B\u0443\u0447\u0430\u0435 \u043F\u0440\u043E\u0432\u0435\u0434\u0435\u043D\u0438\u044F \u043F\u0440\u043E\u0446\u0435\u0434\u0443\u0440\u044B \u043A\u0443\u043F\u043B\u0438-\u043F\u0440\u043E\u0434\u0430\u0436\u0438, \u0441 \u0438\u0441\u043F\u043E\u043B\u044C\u0437\u043E\u0432\u0430\u043D\u0438\u0435\u043C \u043D\u0430\u043B\u0438\u0447\u043D\u044B\u0445 \u0434\u0435\u043D\u0435\u0433 \u0438\u043B\u0438 \u043F\u0440\u043E\u0446\u0435\u0434\u0443\u0440\u044B \u0438\u043F\u043E\u0442\u0435\u0447\u043D\u043E\u0439 \u0441\u0434\u0435\u043B\u043A\u0438" })] }));
+  });
+
   const checkIsIconRenderable = (icon) => Boolean(icon?.icon || icon?.src);
 
   const STEPS_BLOCK_STYLE_MAPS = {
@@ -2587,13 +2717,16 @@
           iconConnector: 'bg-white',
       },
   };
-  const getStyleMap = (version) => STEPS_BLOCK_STYLE_MAPS[version];
 
-  const StepsBlock = JSX(({ className = '', title, showLines = true, steps = [], button, version = 'primary', ...rest }) => {
-      const styleMap = getStyleMap(version);
+  const getLineOpacity = (showLines) => (showLines ? '' : 'opacity-0');
+  const StepsBlock = JSX(({ className = '', showLines = true, steps = [], button, version = 'primary', context, ...rest }) => {
+      const router = context.useRouter();
+      const { handlerDecorator } = context;
+      const { title } = rest;
+      const styleMap = STEPS_BLOCK_STYLE_MAPS[version];
       const shortGaps = steps.length > 3;
-      const stepGap = shortGaps ? 'gap-x-3' : 'gap-x-[101px]';
-      const lineOpacity = showLines ? '' : 'opacity-0';
+      const lineOpacity = getLineOpacity(showLines);
+      const titleMargin = title ? 'mt-9' : '';
       return (jsxs(BlockWrapper, { className: [
               'box-border font-sans text-primary-text bg-white',
               shortGaps ? 'px-20' : 'px-[70px]',
@@ -2601,13 +2734,21 @@
               styleMap.background,
               styleMap.title,
               className,
-          ].join(' '), ...rest, children: [title ? (jsx(Heading, { headingType: "h3", as: "h2", className: "max-w-[47rem] text-center mb-9", title: title })) : null, steps?.length ? (jsxs("div", { className: "box-border", children: [jsx("div", { className: "flex items-center px-[88px]", children: joinList(jsx("div", { className: `h-0.5 w-full bg-secondary-light ${lineOpacity}` }))(steps.map(renderStepIcon(styleMap))) }), jsx("div", { className: `flex justify-between whitespace-pre-line ${stepGap}`, children: steps.map(renderStepTitle(styleMap, Boolean(button?.text))) })] })) : null, button?.text ? (jsx(Button, { className: "mt-8 w-full max-w-[240px]", version: "primary", ...button })) : null] }));
+          ].join(' '), context: context, ...rest, children: [title ? (jsx(Heading, { headingType: "h2", className: "max-w-[752px] text-center", title: title })) : null, steps?.length ? (jsxs("div", { className: `box-border ${titleMargin}`, children: [jsx("div", { className: "flex items-center px-[88px]", children: joinList(jsx("div", { className: `h-0.5 w-full bg-secondary-light ${lineOpacity}` }))(steps.map(renderStepIcon(styleMap))) }), jsx("div", { className: `flex justify-between ${shortGaps ? 'gap-x-3' : 'gap-x-[101px]'}`, children: steps.map(renderStepTitle({
+                              styleMap,
+                              isMainButton: Boolean(button?.text),
+                              version,
+                              router,
+                              handlerDecorator,
+                          })) })] })) : null, button?.text ? (jsx(Button, { className: "mt-8 w-full max-w-[240px]", version: "primary", ...useLink({ router, handlerDecorator }, button) })) : null] }));
   });
   const renderStepIcon = (styleMap) => ({ icon }, i) => {
-      return (jsx("div", { className: "flex flex-col items-center text-center", children: jsx("div", { className: `h-[100px] w-[100px] min-w-[100px] min-h-[100px] rounded-full p-[26px] box-border z-10 flex justify-center items-center ${styleMap.iconBackground}`, children: checkIsIconRenderable(icon) ? (jsx(Img, { image: icon, width: "48", height: "48", asSVG: true })) : (jsx("span", { className: `text-h4 ${styleMap.iconText}`, children: i + 1 })) }) }, String(i)));
+      return (jsx("div", { className: "flex flex-col items-center text-center", children: jsx("div", { className: `h-[100px] w-[100px] min-w-[100px] min-h-[100px] rounded-full p-[26px] box-border z-10 
+            ${styleMap.iconBackground} ${styleMap.title}`, children: checkIsIconRenderable(icon) ? (jsx(Img, { image: icon, width: "48", height: "48", asSVG: true })) : (jsx("span", { className: `text-h4 ${styleMap.iconText}`, children: i + 1 })) }) }, String(i)));
   };
-  const renderStepTitle = (styleMap, isMainButton) => (step, i) => {
-      return (jsxs("div", { className: "flex flex-col items-center justify-between text-center w-[276px] overflow-hidden", children: [jsxs("div", { children: [step.label ? jsx("div", { className: "text-xl m-0 mt-4", children: step.label }) : null, step.description ? (jsx("div", { className: `text-l ${styleMap.description} ${step.label ? 'mt-2' : 'mt-4'}`, children: step.description })) : null] }), step?.button?.text && !isMainButton ? (jsx(Button, { className: "mt-8 py-4 w-full max-w-[240px]", version: "primary", href: step?.button?.href, children: step.button.text })) : null] }, String(i)));
+  const renderStepTitle = ({ styleMap, isMainButton, version, router, handlerDecorator, }) => (step, i) => {
+      const additionalMarginClass = step?.label ? 'mt-2' : 'mt-4';
+      return (jsxs("div", { className: "flex flex-col items-center justify-between text-center relative w-[276px] \n        whitespace-pre-line overflow-hidden", children: [step?.label ? (jsx("div", { className: "font-normal text-xl-light m-0 mt-4", children: step.label })) : null, step?.description ? (jsx("div", { className: `font-light text-base ${styleMap.description} ${additionalMarginClass}`, children: step.description })) : null, step.button?.text && !isMainButton ? (jsx(Button, { className: "box-border mt-8 py-3 h-12 w-full max-w-[240px]", ...useLink({ router, handlerDecorator }, step.button), version: version, children: step.button.text })) : null] }, String(i)));
   };
 
   const badgeStyle = 'min-w-[22px] w-[22px] h-[22px] rounded-full text-xs ml-2';
@@ -2712,6 +2853,7 @@
       Placeholder,
       GroupBlock,
       BonusBenefitsBlock,
+      SafeDepositRental,
       Tabs,
   };