@redneckz/wildless-cms-uni-blocks 0.3.47 → 0.3.50

package/bundle/bundle.umd.js

@@ -395,14 +395,19 @@
       }
   })();
 
-  const Icon = JSX(({ className = '', name = '', alt = `Иконка ${IconTitleMap[name] || name}`, title = alt, asSVG, ...imgProps }) => {
+  const Icon = JSX(({ className = '', name = '', alt = `Иконка ${IconTitleMap[name] || name}`, title = alt, iconVersion, asSVG, ...imgProps }) => {
       const href = `${projectSettings.CDN || ''}icons/${name}.svg`;
+      const svgUseStyle = iconVersion === 'white' ? 'text-black invert' : '';
       if (asSVG) {
-          return (jsxs("svg", { className: className, ...imgProps, "aria-hidden": "true", children: [title ? jsx("title", { children: title }) : null, alt ? jsx("desc", { children: alt }) : null, jsx("use", { href: `${href}#icon`, xlinkHref: `${href}#icon` })] }));
+          return (jsxs("svg", { className: className, ...imgProps, "aria-hidden": "true", children: [title ? jsx("title", { children: title }) : null, alt ? jsx("desc", { children: alt }) : null, jsx("use", { className: svgUseStyle, href: `${href}#icon`, xlinkHref: `${href}#icon` })] }));
       }
       return (jsx("img", { className: className, src: href, alt: alt, title: title, ...imgProps, "aria-hidden": "true" }));
   });
 
+  function getIconVersion(image) {
+      return typeof image === 'string' ? 'normal' : image.iconVersion || 'normal';
+  }
+
   const Img = JSX(({ className = '', image, imageClassName = '', ...iconProps }) => {
       if (!image) {
           return null;
@@ -410,7 +415,7 @@
       // backwards compatibility with existing icons in usage
       const icon = typeof image === 'string' ? image : image.icon;
       if (icon || icon === '') {
-          return icon.length ? jsx(Icon, { className: className, name: icon, ...iconProps }) : null;
+          return icon.length ? (jsx(Icon, { className: className, iconVersion: getIconVersion(image), name: icon, ...iconProps })) : null;
       }
       return (jsx(ImgAsPicture, { className: className, imageClassName: imageClassName, image: image }));
   });
@@ -594,7 +599,7 @@
 
   const ButtonInner = JSX((props) => {
       const { text, aboveText, appendLeft } = props;
-      return (jsxs("div", { className: getButtonStyle(props), children: [appendLeft ? appendLeft : null, isWithText(props) ? (jsxs("div", { children: [jsx("div", { className: "text-m-2xs font-light text-left", children: aboveText }), jsx("div", { className: "text-button-sm text-left", children: text })] })) : null] }));
+      return (jsxs("div", { className: getButtonStyle(props), children: [appendLeft ? appendLeft : null, isWithText(props) ? (jsxs("div", { children: [jsx("div", { className: "text-m-2xs font-light text-left", children: aboveText }), jsx("div", { className: "text-button text-left", children: text })] })) : null] }));
   });
   const getButtonStyle = (props) => {
       const { version, aboveText, rounded } = props;
@@ -693,10 +698,6 @@
       return (jsxs("div", { className: `font-sans flex flex-col grow h-full items-start ${className}`, id: anchor, children: [title, jsxs("div", { className: "flex grow w-full justify-between", children: [jsxs("div", { className: "flex flex-col justify-between w-full", children: [jsx("div", { children: children }), buttons ? jsx("div", { children: buttons }) : null] }), image] })] }));
   });
 
-  const benefitIconBgStyleMap = {
-      primary: 'bg-primary-main',
-      secondary: 'bg-white/30',
-  };
   const benefitTitleStyleMap = {
       primary: 'text-primary-text',
       secondary: 'text-white',
@@ -705,13 +706,24 @@
       primary: 'text-secondary-text',
       secondary: 'text-white',
   };
-  function renderBenefit(benefit, i, version) {
-      return (jsxs("div", { className: "flex gap-4 items-center", children: [benefit.icon ? (jsx(Img, { className: `w-[50px] h-[50px] min-w-[50px] min-h-[50px] rounded-full p-[10px] box-border text-primary-text ${benefitIconBgStyleMap[version]}`, image: benefit.icon, width: "24", height: "24", asSVG: true })) : null, jsxs("div", { className: "flex gap-0.5 flex-col h-full max-w-[149px]  min-w-[149px]", children: [jsx("div", { className: `text-xl m-0 ${benefitTitleStyleMap[version]}`, children: benefit.label }), benefit.description && (jsx("div", { className: `font-light text-m-md ${benefitDescStyleMap[version]}`, children: benefit.description }))] })] }, String(i)));
+  function renderBenefit({ benefit, version = 'primary', benefitsVersion = 'normal' }, i) {
+      const isIconWhite = benefitsVersion === 'white' || version === 'secondary';
+      return (jsxs("div", { className: "flex gap-4 items-center", children: [benefit.icon ? (jsx(Img, { className: renderBenefitIconBgStyle(version, benefitsVersion), image: { ...benefit?.icon, iconVersion: isIconWhite ? 'white' : 'normal' }, width: "24", height: "24", asSVG: true })) : null, jsxs("div", { className: "flex gap-0.5 flex-col h-full max-w-[149px]  min-w-[149px]", children: [jsx("div", { className: `text-xl m-0 ${benefitTitleStyleMap[version]}`, children: benefit.label }), benefit.description && (jsx("div", { className: `font-light text-m-md ${benefitDescStyleMap[version]}`, children: benefit.description }))] })] }, String(i)));
+  }
+  function renderBenefitIconBgStyle(version, benefitsVersion) {
+      let bgColorStyle = 'bg-primary-main text-black';
+      if (version === 'secondary') {
+          bgColorStyle = 'bg-white/30 text-black';
+      }
+      else if (benefitsVersion === 'normal') {
+          bgColorStyle = 'bg-secondary-light text-primary-main';
+      }
+      return `w-[50px] h-[50px] min-w-[50px] min-h-[50px] rounded-full p-[10px] box-border ${bgColorStyle}`;
   }
 
-  const ProductBlockInner = JSX(({ className = '', context, title, headingType = 'h2', description, benefits, buttons, image, items, version = 'primary', isDotted = true, textBlockClassName = '', }) => {
+  const ProductBlockInner = JSX(({ className = '', context, title, headingType = 'h2', description, benefits, benefitsVersion = 'normal', buttons, image, items, version = 'primary', isDotted = true, textBlockClassName = '', }) => {
       const textColor = version === 'secondary' ? 'text-white' : 'text-primary-text';
-      return (jsxs("div", { className: `flex grow justify-between items-stretch ${className}`, children: [jsx("div", { className: `flex flex-col ${textBlockClassName}`, children: jsxs(BaseTile, { context: context, title: getTitle(title, headingType), buttons: getButtons(context, buttons), children: [description && (jsx(Description, { className: `mt-4 max-w-[600px] text-md font-light ${textColor}`, description: description })), benefits?.filter((items) => items.label)?.length ? (jsx("div", { className: "flex gap-6 mt-6", children: benefits.map((_, i) => renderBenefit(_, i, version)) })) : null, items?.length ? (jsx(List, { className: "mt-5 text-title-2xs font-light", items: items, itemClassName: "mb-[7px]", version: version, isDotted: isDotted })) : null] }) }), image?.src && jsx(Img, { className: "mt-auto", image: image })] }));
+      return (jsxs("div", { className: `flex grow justify-between items-stretch ${className}`, children: [jsx("div", { className: `flex flex-col ${textBlockClassName}`, children: jsxs(BaseTile, { context: context, title: getTitle(title, headingType), buttons: getButtons(context, buttons), children: [description && (jsx(Description, { className: `mt-4 max-w-[600px] text-md font-light ${textColor}`, description: description })), benefits?.filter((items) => items.label)?.length ? (jsx("div", { className: "flex gap-6 mt-6", children: benefits.map((benefit, i) => renderBenefit({ benefit, version, benefitsVersion }, i)) })) : null, items?.length ? (jsx(List, { className: "mt-5 text-title-2xs font-light", items: items, itemClassName: "mb-[7px]", version: version, isDotted: isDotted })) : null] }) }), image?.src && jsx(Img, { className: "mt-auto", image: image })] }));
   });
   const getTitle = (title, headingType) => {
       return (title && (jsx(Heading, { headingType: headingType, title: title, className: "whitespace-pre-wrap max-w-[600px]" })));
@@ -776,19 +788,6 @@
       return colSpanStr ? parseInt(colSpanStr.substring(colSpanPrefix.length), 10) : 12;
   };
 
-  function getTileHeadingType(className = '') {
-      const colSpan = getColSpan(className);
-      if (colSpan <= 4) {
-          return 'h4';
-      }
-      else if (colSpan <= 8) {
-          return 'h3';
-      }
-      else {
-          return 'h2';
-      }
-  }
-
   function getTileMinHeight(className = '') {
       const colSpan = getColSpan(className);
       if (colSpan <= 6) {
@@ -820,8 +819,8 @@
       secondary: 'bg-primary-main text-white',
   };
   const Tile = JSX((props) => {
-      const { context, title, description, items, children, buttons, image, className = '', version = 'primary', role, anchor = null, } = props;
-      return (jsx("section", { className: `overflow-hidden font-sans p-9 pr-3 box-border ${className} ${tileStyleMap[version]} ${getTileRightPadding(className)} ${getTileMinHeight(className)} `, role: role, id: anchor, children: jsxs(BaseTile, { context: context, title: title && (jsx(Heading, { headingType: getTileHeadingType(className), as: "h3", title: title, className: `whitespace-pre-wrap max-w-[600px] ${title ? 'mb-3' : ''}
+      const { context, title, headingType = 'h3', description, items, children, buttons, image, className = '', version = 'primary', role, anchor = null, } = props;
+      return (jsx("section", { className: `overflow-hidden font-sans p-9 pr-3 box-border ${className} ${tileStyleMap[version]} ${getTileRightPadding(className)} ${getTileMinHeight(className)} `, role: role, id: anchor, children: jsxs(BaseTile, { context: context, title: title && (jsx(Heading, { headingType: headingType, as: "h3", title: title, className: `whitespace-pre-wrap max-w-[600px] ${title ? 'mb-3' : ''}
               ${version === 'primary' ? 'text-primary-text' : ''}` })), buttons: buttons?.length ? (jsx(ButtonSection, { context: context, buttons: buttons, className: "flex mt-9 gap-3" })) : null, image: image?.src && jsx(Img, { className: "mt-auto ml-7", image: image }), children: [description && (jsx(Description, { className: "max-w-[600px] text-title-new-sm font-light", description: description })), children, renderList$1(items, version)] }) }));
   });
   function renderList$1(items, version) {
@@ -832,8 +831,8 @@
       primary: 'bg-white text-primary-text',
       secondary: 'bg-primary-main text-white',
   };
-  const ProductTile = JSX(({ context, className = '', title, description, benefits, buttons, image, version = 'primary', anchor = null, }) => {
-      return (jsx("section", { className: `bg-white overflow-hidden text-primary-text font-sans p-9 box-border ${className} ${productTileStyleMap[version]} ${getTileRightPadding(className)} ${getTileMinHeight(className)} `, id: anchor, children: jsxs(BaseTile, { context: context, title: title && (jsx(Heading, { headingType: getTileHeadingType(className), title: title, className: `whitespace-pre-wrap max-w-[600px]` })), buttons: buttons?.length ? (jsx(ButtonSection, { context: context, buttons: buttons, className: "flex mt-9 gap-3" })) : null, image: image?.src && jsx(Img, { className: "mt-auto ml-7", image: image }), children: [description && jsx(Description, { className: "mt-4 max-w-[600px]", description: description }), jsxs("div", { className: "flex mt-5 mb-1", children: [benefits?.length ? (jsx("div", { className: "mr-8", children: benefits.map(renderBenefitLabel) })) : null, benefits?.length ? (jsx("div", { className: "pt-1", children: benefits.map((_, i) => renderBenefitDescription(_, i, version)) })) : null] })] }) }));
+  const ProductTile = JSX(({ context, className = '', title, headingType = 'h3', description, benefits, buttons, image, version = 'primary', anchor = null, }) => {
+      return (jsx("section", { className: `bg-white overflow-hidden text-primary-text font-sans p-9 box-border ${className} ${productTileStyleMap[version]} ${getTileRightPadding(className)} ${getTileMinHeight(className)} `, id: anchor, children: jsxs(BaseTile, { context: context, title: title && (jsx(Heading, { headingType: headingType, as: "h3", title: title, className: `whitespace-pre-wrap max-w-[600px]` })), buttons: buttons?.length ? (jsx(ButtonSection, { context: context, buttons: buttons, className: "flex mt-9 gap-3" })) : null, image: image?.src && jsx(Img, { className: "mt-auto ml-7", image: image }), children: [description && jsx(Description, { className: "mt-4 max-w-[600px]", description: description }), jsxs("div", { className: "flex mt-5 mb-1", children: [benefits?.length ? (jsx("div", { className: "mr-8", children: benefits.map(renderBenefitLabel) })) : null, benefits?.length ? (jsx("div", { className: "pt-1", children: benefits.map((_, i) => renderBenefitDescription(_, i, version)) })) : null] })] }) }));
   });
   function renderBenefitLabel(benefit, i) {
       return (jsx("div", { className: `text-xl font-medium ${i ? 'mt-2.5' : ''}`, children: benefit.label }, String(i)));
@@ -990,9 +989,9 @@
 
   const Bonus = JSX((props) => {
       const { className = '', title, description, bonusItems, anchor = null } = props;
-      return (jsx("section", { className: `bg-white p-12 ${className}`, id: anchor, children: jsxs("div", { className: "container", children: [title ? jsx(Heading, { headingType: "h2", className: "text-center", title: title }) : null, description ? (jsx("div", { className: "text-md font-light text-center mt-2", children: description })) : null, jsx("div", { className: "flex flex-wrap w-full mt-9", children: bonusItems
+      return (jsx("section", { className: `font-sans bg-white p-[50px] pb-9 ${className}`, id: anchor, children: jsxs("div", { className: "container", children: [title ? jsx(Heading, { headingType: "h3", className: "text-center", title: title }) : null, description ? (jsx("div", { className: "text-md font-light text-center mt-[10px]", children: description })) : null, jsx("div", { className: "flex flex-wrap w-full mt-9", children: bonusItems
                           ? bonusItems.map((_, i) => {
-                              return (jsx("div", { className: "flex-grow w-[49%] border border-gray pl-9 pt-9 pr-6 pb-6 mb-4 mx-2 even:mr-0 odd:ml-0 last:odd:w-full last:odd:mx-0", children: jsxs("div", { className: "flex justify-between w-full", children: [jsxs("div", { className: "mr-4", children: [jsx("div", { className: "text-title-sm", children: _.name }), jsx("div", { className: "text-md font-light mt-3 max-w-[488px]", children: _.description })] }), _.bonusCount ? (jsxs("div", { className: "relative -bottom-3 h-auto flex items-end mt-14 shrink-0", children: [jsx("span", { className: "font-mohave -tracking-wider text-title-extra bg-clip-text text-transparent bg-green-to-yellow -mb-7", children: _.bonusCount }), jsx("span", { className: "text-[44px] bg-clip-text text-transparent bg-green-to-yellow", children: _.bonusName })] })) : null] }) }, String(i)));
+                              return (jsx("div", { className: "flex-grow w-[49%] border border-gray pl-9 pt-9 pr-6 pb-6 mb-[14px] mx-[7px] even:mr-0 odd:ml-0 last:odd:mx-0", children: jsxs("div", { className: "flex justify-between w-full", children: [jsxs("div", { className: "mr-4", children: [jsx("div", { className: "text-title-sm", children: _.name }), jsx("div", { className: "text-md font-light mt-[14px] max-w-[488px]", children: _.description })] }), _.bonusCount ? (jsxs("div", { className: "relative -bottom-3 h-auto flex items-end mt-14 shrink-0", children: [jsx("span", { className: "font-mohave -tracking-[5px] text-title-extra bg-clip-text text-transparent bg-green-to-yellow -mb-7", children: _.bonusCount }), jsx("span", { className: "text-[44px] bg-clip-text text-transparent bg-green-to-yellow", children: _.bonusName })] })) : null] }) }, String(i)));
                           })
                           : null })] }) }));
   });
@@ -1086,7 +1085,20 @@
       const isActive = currentTabIndex === index;
       return (jsxs("div", { className: `flex h-full flex-1 cursor-pointer mr-2 last:mr-0 box-content ${isActive ? ACTIVE_TAB_STYLE : TAB_STYLE}`, role: "tab", onClick: () => onTabClick(index), "aria-selected": String(isActive), children: [tab?.icon ? renderIcon(tab, isActive) : null, jsxs("div", { children: [tab?.title ? jsx("h3", { className: "font-medium m-0 text-base", children: tab?.title }) : null, tab?.description ? (jsx("span", { className: `font-light text-xs ${isActive ? '' : 'text-secondary-text'}`, children: tab?.description })) : null] })] }, String(index)));
   };
-  const renderIcon = (tab, isActive) => (jsx("div", { className: "h-full mt-1", children: jsx(Img, { className: `w-5 h-5 mr-3 ${isActive ? 'invert-full' : ''}`, image: tab?.icon || 'CardIcon', asSVG: !isActive }) }));
+  const renderIcon = (tab, isActive) => (jsx("div", { className: "h-full mt-1", children: jsx(Img, { className: `w-5 h-5 mr-3 ${isActive ? 'invert' : ''}`, image: tab?.icon || 'CardIcon', asSVG: !isActive }) }));
+
+  function getTileHeadingType(className = '') {
+      const colSpan = getColSpan(className);
+      if (colSpan <= 4) {
+          return 'h4';
+      }
+      else if (colSpan <= 8) {
+          return 'h3';
+      }
+      else {
+          return 'h2';
+      }
+  }
 
   function useCreditCalculatorData(useAsyncData, directoryName) {
       const { data } = useAsyncData(creditCalculatorUrl(directoryName), fetchCreditCalculatorData);
@@ -1332,7 +1344,7 @@
       return (jsxs("tr", { className: "pb-1", children: [jsx("td", { className: "pt-4", children: jsxs("div", { className: "flex items-center", children: [code ? jsx(Img, { image: { icon: CURRENCY_ICONS_MAP[code] }, width: "24", height: "24" }) : null, jsx("span", { className: "text-m-title-md ml-2", children: code })] }) }), jsx("td", { className: "pt-4 pl-11 m-title-md font-light", children: formatCurrency(exchangeCurrencyItem.buyExchangeRate) }), jsx("td", { className: "pt-4 pl-11 m-title-md font-light", children: formatCurrency(exchangeCurrencyItem.saleExchangeRate) })] }, code));
   };
 
-  const CurrentLocation = JSX(({ className = '', address, distance }) => (jsxs("div", { className: `flex text-sm ${className}`, children: [jsx(Img, { className: "min-w-fit", image: { icon: 'GpsIcon' }, width: "24", height: "24", asSVG: true }), jsxs("div", { className: "ml-3 font-light", children: [address ? jsx("p", { className: "m-0 mb-[3px]", children: address }) : null, distance ? (jsxs("p", { className: "text-secondary-text m-0", children: ["\u041A\u0443\u0440\u0441 \u0443\u043A\u0430\u0437\u0430\u043D \u0434\u043B\u044F \u0431\u043B\u0438\u0436\u0430\u0439\u0448\u0435\u0433\u043E \u043E\u0444\u0438\u0441\u0430 - ", distance] })) : null] })] })));
+  const CurrentLocation = JSX(({ className = '', address, distance }) => (jsxs("div", { className: `flex text-sm ${className}`, children: [jsx(Img, { image: { icon: 'GpsIcon' }, width: "24", height: "24", asSVG: true }), jsxs("div", { className: "ml-3 font-light", children: [address ? jsx("p", { className: "m-0 mb-[3px]", children: address }) : null, distance ? (jsxs("p", { className: "text-secondary-text m-0", children: ["\u041A\u0443\u0440\u0441 \u0443\u043A\u0430\u0437\u0430\u043D \u0434\u043B\u044F \u0431\u043B\u0438\u0436\u0430\u0439\u0448\u0435\u0433\u043E \u043E\u0444\u0438\u0441\u0430 - ", distance] })) : null] })] })));
 
   const Input = JSX(({ className = '', id, name, type = 'text', placeholder }) => {
       return (jsx("input", { className: className, id: id, name: name || id, type: type, placeholder: placeholder }));
@@ -1342,15 +1354,15 @@
       return (jsx("select", { className: className, id: id, name: name || id, children: children }));
   });
 
-  const SelectOption = JSX(({ className = '', value, children }) => {
-      return (jsx("option", { className: className, value: `${value}`, children: children }));
+  const SelectOption = JSX(({ className = '', value, selected, children }) => {
+      return (jsx("option", { className: className, value: `${value}`, selected: selected, children: children }));
   });
 
   const ExchangeCurrencyCalculator = JSX(({ codes, className = '' }) => {
-      return (jsxs("div", { className: `grid gap-3.5 ${className}`, children: [renderInput('Хочу продать', codes), renderInput('Получу', codes), jsx(Button, { className: "box-border mt-3.5 py-3 h-12 w-full", version: "primary", href: "#", children: "\u041A\u0443\u043F\u0438\u0442\u044C \u0432\u0430\u043B\u044E\u0442\u0443" })] }));
+      return (jsxs("div", { className: `grid gap-3.5 ${className}`, children: [renderInput('Хочу продать', codes), renderInput('Получу', codes, 'USD'), jsx(Button, { className: "box-border mt-3.5 py-3 h-12 w-full", version: "primary", href: "#", children: "\u041A\u0443\u043F\u0438\u0442\u044C \u0432\u0430\u043B\u044E\u0442\u0443" })] }));
   });
-  function renderInput(placeholder, codes) {
-      return (jsxs("div", { className: "relative flex items-center", children: [jsx(Input, { className: "h-10 border pl-4 pt-[7px] pb-[7px] rounded-md text-m-sm w-full appearance-none -mr-12", type: "number", placeholder: `${placeholder}` }), codes.length ? (jsx(Select, { className: "h-9 -translate-x-4", children: codes.map((code, i) => (jsx(SelectOption, { value: code, children: code }, String(i)))) })) : null] }));
+  function renderInput(placeholder, codes, selected) {
+      return (jsxs("div", { className: "relative flex items-center", children: [jsx(Input, { className: "h-10 border pl-4 pt-[7px] pb-[7px] rounded-md text-m-sm w-full appearance-none -mr-12", type: "number", placeholder: `${placeholder}` }), codes.length ? (jsx(Select, { className: "h-9 -translate-x-4", children: codes.map((code, i) => (jsx(SelectOption, { value: code, selected: code === selected, children: code }, String(i)))) })) : null] }));
   }
 
   const CURRENCY_CODES = ['USD', 'EUR'];
@@ -1520,7 +1532,7 @@
   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 mb-1.5 ${className}`, children: media?.map((_, index) => (jsx(MediaButton, { version: version, ...useLink({ router, handlerDecorator }, _) }, String(index)))) }), jsx("span", { className: "font-light text-sm text-secondary-text", children: children })] }));
+      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: "font-light text-sm text-secondary-text", children: children })] }));
   });
 
   const TextInformation = JSX(({ className, links, context }) => {
@@ -1536,19 +1548,21 @@
   });
 
   const GracePeriod = JSX(({ className = '', title, description, calendar, anchor = null }) => {
-      return (jsxs("section", { className: `bg-white p-16 pt-12 ${className}`, id: anchor, children: [jsx(Heading, { headingType: "h2", className: "text-center", title: title }), jsx("div", { className: "font-light text-base-md text-center mt-3", children: description }), calendar ? renderCalendar(calendar) : null] }));
+      return (jsxs("section", { className: `font-sans bg-white p-[50px] ${className}`, id: anchor, children: [jsx(Heading, { headingType: "h3", className: "text-center", title: title }), jsx("div", { className: "font-light text-base-md text-center mt-3", children: description }), calendar ? renderCalendar(calendar) : null] }));
   });
   const renderCalendar = (calendar) => {
-      const colCount = calendar.reduce((accumulator, currentValue) => accumulator + currentValue.month.length, 0) || 1;
+      const colCount = calendar.reduce((accumulator, currentValue) => currentValue?.month?.length ? accumulator + currentValue.month.length : accumulator, 0) || 1;
       const colSize = 100 / colCount;
-      const mappedCalendar = calendar.map((_) => ({
+      const mappedCalendar = calendar
+          .filter((_) => _?.month?.length)
+          .map((_) => ({
           ..._,
           flexBasis: `${_.month.length * colSize}%`,
       }));
-      return (jsxs("div", { className: "w-full flex flex-col justify-center mt-14", children: [jsx("div", { className: "flex w-full mb-3 font-light text-m-title-md mb-3 text-center", children: mappedCalendar.map((_) => renderMonthNames(_, colSize)) }), jsx("div", { className: "flex w-full", children: mappedCalendar.map((_, ind) => (jsxs("div", { className: "pr-3 mr-3 border-r border-r-gray/100 last:border-r-0 last:pr-0 last:mr-0", style: { flexBasis: _.flexBasis }, children: [jsx("div", { className: "flex", children: renderMonthImages(_) }), jsxs("div", { className: "font-light text-sm text-primary-text mt-3", children: [jsx("span", { children: _.blackText }), "\u2009", jsx("span", { className: "text-primary-main", children: _.greenText })] })] }, `monthItem-${ind}`))) })] }));
+      return (jsxs("div", { className: "w-full flex flex-col justify-center mt-[54px]", children: [jsx("div", { className: "flex w-full mb-3 font-light text-m-title-md text-center", children: mappedCalendar.map((_) => renderMonthNames(_, colSize)) }), jsx("div", { className: "flex w-full", children: mappedCalendar.map((_, ind) => (jsxs("div", { className: "pr-[11px] mr-3 border-r border-main-divider last:border-r-0 last:pr-0 last:mr-0", style: { flexBasis: _.flexBasis }, children: [jsx("div", { className: "flex", children: renderMonthImages(_) }), jsxs("div", { className: "font-light text-sm text-primary-text mt-3", children: [jsx("span", { children: _.blackText }), "\u2009", jsx("span", { className: "text-primary-main", children: _.greenText })] })] }, `monthItem-${ind}`))) })] }));
   };
   const renderMonthNames = (item, colSize) => item.month.map((_) => (jsx("div", { style: { flexBasis: `${colSize}%` }, children: _.name }, `monthName-${_.name}`)));
-  const renderMonthImages = (item) => item.month.map((_) => _.image?.src ? (jsx("div", { className: "max-h-[207px] border-r-[1px] pr-3 mr-3 border-r-gray/100 last:border-r-0 last:pr-0 last:mr-0", children: jsx(Img, { image: _.image, className: "flex" }) }, `monthImage-${_.image.src}`)) : null);
+  const renderMonthImages = (item) => item.month.map((_) => _.image?.src ? (jsx("div", { className: "h-[207px] border-r-[1px] pr-3 mr-3 border-main-divider last:border-r-0 last:pr-0 last:mr-0", children: jsx(Img, { image: _.image, className: "flex" }) }, `monthImage-${_.image.src}`)) : null);
 
   const checkIsHrefSameOrigin = (href, router) => getOrigin(href) === getOrigin(router.href);
 
@@ -1724,9 +1738,9 @@
                       .map((button, i) => (jsx(NavigationItem, { className: "first:rounded-tl-md first:rounded-bl-md last:rounded-tr-md last:rounded-br-md", isActive: button === activeButton, ...useLink({ router, handlerDecorator }, button) }, String(i)))) })) : null] }));
   });
 
-  const TEXT_CLASSES = 'font-sans font-normal text-sm';
+  const TEXT_CLASSES = 'font-sans font-normal text-m-md';
   const LINK_CLASSES = 'flex-1 flex items-center justify-center cursor-pointer';
-  const NavigatorTabItem = JSX(({ className = '', label, active, children, onClick, href, target = '_self' }) => (jsx("a", { className: getLinkClasses(className, active), target: target, href: href, onClick: onClick, children: jsx("span", { className: getTextClasses(active), children: label || children }) })));
+  const NavigatorTabItem = JSX(({ className = '', text, active, children, onClick, href, target = '_self' }) => (jsx("a", { className: getLinkClasses(className, active), target: target, href: href, onClick: onClick, children: jsx("span", { className: getTextClasses(active), children: text || children }) })));
   const getLinkClasses = (className, active) => {
       const classes = active ? 'bg-primary-main' : 'group bg-white';
       return `${classes} ${LINK_CLASSES} ${className}`;
@@ -1737,19 +1751,15 @@
   };
 
   const NavigatorTabs = JSX(({ className = '', navigatorTabs, context, anchor = null }) => {
-      const router = context.useRouter();
       const href = globalThis.location?.href; // TODO: remove globalThis, use href from router
-      return (jsx("section", { className: `sticky top-0 z-20 box-border flex gap-x-1 h-12 ${className}`, id: anchor, children: navigatorTabs ? navigatorTabs.map(renderTab(href, router)) : null }));
+      return (jsx("section", { className: `sticky top-0 z-20 box-border flex gap-x-1 h-14 ${className}`, id: anchor, children: navigatorTabs ? navigatorTabs.map(renderTab(context, href)) : null }));
   });
-  const renderTab = (href, router) => (tab, i) => {
+  const renderTab = (context, href) => (tab, i) => {
+      const { useRouter, handlerDecorator } = context;
+      const router = useRouter();
       const hash = getHash(href);
       const active = hash ? tab.href === hash : i === 0;
-      return (jsx(NavigatorTabItem, { active: active, onClick: () => handleRoute(router, tab.href), ...tab }, tab.href));
-  };
-  const handleRoute = (router, href) => {
-      if (isURL(href))
-          return; // if href if full URL - move to HTML href action, do not touch router
-      router?.replace(href || '');
+      return (jsx(NavigatorTabItem, { active: active, ...useLink({ router, handlerDecorator }, tab) }, tab.href));
   };
 
   const useActiveHandler = ({ context, blocks, initialState = false }) => {
@@ -1894,7 +1904,7 @@
   }
 
   const RecommendationCard = JSX(({ context, className = '', title, description, items, image, version, socialMedia }) => {
-      return (jsx("section", { className: `border border-solid box-border py-[30px] px-9 min-w-[515px] max-w-[515px] ${className}`, role: "listitem", children: jsxs(BaseTile, { context: context, className: "flex justify-between", title: title ? (jsx(Heading, { headingType: "h4", as: "h3", className: "font-normal mb-3.5", title: title })) : null, image: image?.src && jsx(Img, { className: "mt-auto ml-7", image: image }), children: [description ? jsx(Description, { className: "text-left", description: description }) : null, items?.length ? (jsx(List, { className: "text-md font-light flex flex-col gap-2", items: items, version: version })) : null, jsx(SocialMedia, { className: "pt-[42px] pb-0", media: socialMedia, version: version, context: context })] }) }));
+      return (jsx("section", { className: `border border-solid box-border p-[30px] w-[524px] ${className}`, role: "listitem", children: jsxs(BaseTile, { context: context, className: "flex justify-between", title: title ? (jsx(Heading, { headingType: "h4", as: "h3", className: "font-normal mb-3.5", title: title })) : null, image: image?.src && jsx(Img, { className: "mt-auto ml-7", image: image }), children: [description ? jsx(Description, { className: "text-left", description: description }) : null, items?.length ? (jsx(List, { className: "text-md text-left font-light flex flex-col flex-1 gap-2", items: items, version: version })) : null, jsx(SocialMedia, { className: "pt-[42px] pb-0", media: socialMedia, version: version, context: context })] }) }));
   });
 
   const BLUR_BLOCK_CLASSES = 'absolute top-0 bottom-0 w-[84px]';
@@ -1937,7 +1947,7 @@
       return (jsx("div", { className: "flex flex-col items-center text-center relative", children: jsx("div", { className: "h-[100px] w-[100px] min-w-[100px] min-h-[100px] bg-secondary-light rounded-full p-[26px] box-border z-10", children: (step.icon?.icon && jsx(Img, { image: step.icon, width: "48", height: "48" })) || (jsx("span", { className: "font-normal text-title-sm text-secondary-text", children: i + 1 })) }) }, String(i)));
   };
   const renderStepTitle = (step, i, isMainButton) => {
-      return (jsxs("div", { className: "flex flex-col items-center justify-between text-center relative w-[276px] whitespace-pre-line overflow-hidden", children: [jsxs("div", { children: [step.label && jsx("div", { className: "font-normal text-xl m-0 mt-4", children: step.label }), step.description && (jsx("div", { className: `font-light text-base text-secondary-text ${step.label ? 'mt-2' : 'mt-4'}`, children: step.description }))] }), step?.button?.text && !isMainButton ? (jsx(Button, { className: "box-border mt-[38px] py-3 h-12 w-full max-w-[240px]", version: "primary", href: "#", children: step.button.text })) : null] }, String(i)));
+      return (jsxs("div", { className: "flex flex-col items-center justify-between text-center relative w-[276px] whitespace-pre-line overflow-hidden", children: [jsxs("div", { children: [step.label && jsx("div", { className: "font-normal text-xl m-0 mt-4", children: step.label }), step.description && (jsx("div", { className: `font-light text-base text-secondary-text ${step.label ? 'mt-2' : 'mt-4'}`, children: step.description }))] }), step?.button?.text && !isMainButton ? (jsx(Button, { className: "box-border mt-8 py-3 h-12 w-full max-w-[240px]", version: "primary", href: "#", children: step.button.text })) : null] }, String(i)));
   };
 
   const DIVIDER_CLASSES = 'border-main-divider border border-t-0 border-x-0';