@redneckz/wildless-cms-uni-blocks 0.3.68 → 0.3.70

package/bundle/bundle.umd.js

@@ -212,17 +212,14 @@
       IconMap["AppleIcon"] = "AppleIcon";
       IconMap["ArrowDownIcon"] = "ArrowDownIcon";
       IconMap["ArrowLeftIcon"] = "ArrowLeftIcon";
-      IconMap["ArrowsRewindRight"] = "ArrowsRewindRight";
       IconMap["ArrowUpIcon"] = "ArrowUpIcon";
       IconMap["AtmIcon"] = "AtmIcon";
       IconMap["BankIcon"] = "BankIcon";
       IconMap["BurgerIcon"] = "BurgerIcon";
-      IconMap["BurgerIconWhite"] = "BurgerIconWhite";
       IconMap["Calendar2Icon"] = "Calendar2Icon";
       IconMap["CalendarCircleIcon"] = "CalendarCircleIcon";
       IconMap["CalendarIcon"] = "CalendarIcon";
       IconMap["CalendarTickIcon"] = "CalendarTickIcon";
-      IconMap["CalendarWhiteIcon"] = "CalendarWhiteIcon";
       IconMap["CardIcon"] = "CardIcon";
       IconMap["CardPosIcon"] = "CardPosIcon";
       IconMap["CardTickIcon"] = "CardTickIcon";
@@ -240,17 +237,16 @@
       IconMap["DocsIcon"] = "DocsIcon";
       IconMap["DocumentTextIcon"] = "DocumentTextIcon";
       IconMap["DollarIcon"] = "DollarIcon";
+      IconMap["DoneIcon"] = "DoneIcon";
       IconMap["EarthIcon"] = "EarthIcon";
       IconMap["EmptyWalletChangeIcon"] = "EmptyWalletChangeIcon";
       IconMap["EmptyWalletIcon"] = "EmptyWalletIcon";
-      IconMap["EmptyWalletWhiteIcon"] = "EmptyWalletWhiteIcon";
       IconMap["EuroIcon"] = "EuroIcon";
       IconMap["GeolocationIcon"] = "GeolocationIcon";
       IconMap["GlassIcon"] = "GlassIcon";
       IconMap["GlobalIcon"] = "GlobalIcon";
       IconMap["GpsIcon"] = "GpsIcon";
       IconMap["GridIcon"] = "GridIcon";
-      IconMap["GridIconWhite"] = "GridIconWhite";
       IconMap["InterestGrowthIcon"] = "InterestGrowthIcon";
       IconMap["InterestIcon"] = "InterestIcon";
       IconMap["JCBIcon"] = "JCBIcon";
@@ -267,7 +263,6 @@
       IconMap["PassSendIcon"] = "PassSendIcon";
       IconMap["PercentageRoundIcon"] = "PercentageRoundIcon";
       IconMap["PercentageSquareIcon"] = "PercentageSquareIcon";
-      IconMap["PercentageSquareWhiteIcon"] = "PercentageSquareWhiteIcon";
       IconMap["PersonalCardIcon"] = "PersonalCardIcon";
       IconMap["PlayMarketIcon"] = "PlayMarketIcon";
       IconMap["PlusIcon"] = "PlusIcon";
@@ -299,17 +294,14 @@
       IconTitleMap["AppleIcon"] = "\u041B\u043E\u0433\u043E \u00ABApple\u00BB";
       IconTitleMap["ArrowDownIcon"] = "\u0421\u0442\u0440\u0435\u043B\u043A\u0430 '\u0412\u043D\u0438\u0437'";
       IconTitleMap["ArrowLeftIcon"] = "\u0421\u0442\u0440\u0435\u043B\u043A\u0430";
-      IconTitleMap["ArrowsRewindRight"] = "\u0421\u0442\u0440\u0435\u043B\u043A\u0430";
       IconTitleMap["ArrowUpIcon"] = "\u0421\u0442\u0440\u0435\u043B\u043A\u0430 \u0432\u0432\u0435\u0440\u0445";
       IconTitleMap["AtmIcon"] = "\u0411\u0430\u043D\u043A\u043E\u043C\u0430\u0442";
       IconTitleMap["BankIcon"] = "\u0411\u0430\u043D\u043A";
       IconTitleMap["BurgerIcon"] = "\u0411\u0443\u0440\u0433\u0435\u0440";
-      IconTitleMap["BurgerIconWhite"] = "\u0411\u0443\u0440\u0433\u0435\u0440 (\u0431\u0435\u043B\u044B\u0439)";
       IconTitleMap["Calendar2Icon"] = "\u041A\u0430\u043B\u0435\u043D\u0434\u0430\u0440\u044C 2";
       IconTitleMap["CalendarCircleIcon"] = "\u0421\u043A\u0440\u0443\u0433\u043B\u0451\u043D\u043D\u044B\u0439 \u043A\u0430\u043B\u0435\u043D\u0434\u0430\u0440\u044C";
       IconTitleMap["CalendarIcon"] = "\u041A\u0430\u043B\u0435\u043D\u0434\u0430\u0440\u044C";
       IconTitleMap["CalendarTickIcon"] = "\u041A\u0430\u043B\u0435\u043D\u0434\u0430\u0440\u044C \u0441 \u0433\u0430\u043B\u043E\u0447\u043A\u043E\u0439";
-      IconTitleMap["CalendarWhiteIcon"] = "\u041A\u0430\u043B\u0435\u043D\u0434\u0430\u0440\u044C \u0431\u0435\u043B\u044B\u0439";
       IconTitleMap["CardIcon"] = "\u041A\u0440\u0435\u0434. \u043A\u0430\u0440\u0442\u0430";
       IconTitleMap["CardPosIcon"] = "\u041A\u0440\u0435\u0434. \u043A\u0430\u0440\u0442\u0430 \u043F\u043E\u0434 \u043D\u0430\u043A\u043B\u043E\u043D\u043E\u043C";
       IconTitleMap["CardTickIcon"] = "\u041A\u0440\u0435\u0434. \u043A\u0430\u0440\u0442\u0430 \u0441 \u0433\u0430\u043B\u043E\u0447\u043A\u043E\u0439";
@@ -327,17 +319,16 @@
       IconTitleMap["DocsIcon"] = "\u0414\u043E\u043A\u0443\u043C\u0435\u043D\u0442\u044B";
       IconTitleMap["DocumentTextIcon"] = "\u0414\u043E\u043A\u0443\u043C\u0435\u043D\u0442 \u0441 \u0442\u0435\u043A\u0441\u0442\u043E\u043C";
       IconTitleMap["DollarIcon"] = "\u0414\u043E\u043B\u043B\u0430\u0440";
+      IconTitleMap["DoneIcon"] = "\u0417\u0435\u043B\u0451\u043D\u0430\u044F '\u0433\u0430\u043B\u043E\u0447\u043A\u0430'";
       IconTitleMap["EarthIcon"] = "\u0417\u0435\u043C\u043B\u044F";
       IconTitleMap["EmptyWalletChangeIcon"] = "\u041F\u0443\u0441\u0442\u043E\u0439 \u043A\u043E\u0448\u0435\u043B\u0451\u043A \u0441 \u0432\u043E\u0437\u0432\u0440\u0430\u0442\u043E\u043C";
       IconTitleMap["EmptyWalletIcon"] = "\u041F\u0443\u0441\u0442\u043E\u0439 \u043A\u043E\u0448\u0435\u043B\u0451\u043A";
-      IconTitleMap["EmptyWalletWhiteIcon"] = "\u041F\u0443\u0441\u0442\u043E\u0439 \u043A\u043E\u0448\u0435\u043B\u0451\u043A (\u0431\u0435\u043B\u044B\u0439)";
       IconTitleMap["EuroIcon"] = "\u0415\u0432\u0440\u043E";
       IconTitleMap["GeolocationIcon"] = "\u0413\u0435\u043E\u043B\u043E\u043A\u0430\u0446\u0438\u044F";
       IconTitleMap["GlassIcon"] = "\u0417\u0435\u0440\u043A\u0430\u043B\u043E";
       IconTitleMap["GlobalIcon"] = "\u0413\u043B\u043E\u0431\u0443\u0441";
       IconTitleMap["GpsIcon"] = "Gps";
-      IconTitleMap["GridIcon"] = "\u0421\u0435\u0442\u043A\u0430";
-      IconTitleMap["GridIconWhite"] = "\u0421\u0435\u0442\u043A\u0430 (\u0431\u0435\u043B\u0430\u044F)";
+      IconTitleMap["GridIcon"] = "\u0421\u0435\u0442\u043A\u0430 (\u0431\u0435\u043B\u0430\u044F)";
       IconTitleMap["InterestGrowthIcon"] = "\u0414\u0438\u0430\u0433\u0440\u0430\u043C\u043C\u0430 \u0440\u043E\u0441\u0442\u0430";
       IconTitleMap["InterestIcon"] = "\u0421\u043A\u0438\u0434\u043A\u0430";
       IconTitleMap["JCBIcon"] = "JCB";
@@ -354,7 +345,6 @@
       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";
-      IconTitleMap["PercentageSquareWhiteIcon"] = "\u041F\u0440\u043E\u0446\u0435\u043D\u0442\u044B \u0431\u0435\u043B\u044B\u0435";
       IconTitleMap["PersonalCardIcon"] = "\u041F\u0435\u0440\u0441\u043E\u043D\u0430\u043B\u044C\u043D\u0430\u044F \u043A\u0430\u0440\u0442\u0430";
       IconTitleMap["PlayMarketIcon"] = "\u041B\u043E\u0433\u043E \u00ABPlayMarket\u00BB";
       IconTitleMap["PlusIcon"] = "\u041F\u043B\u044E\u0441";
@@ -411,11 +401,15 @@
       }
   })();
 
-  const Icon = JSX(({ className = '', name = '', alt = `Иконка ${IconTitleMap[name] || name}`, title = alt, iconVersion, asSVG, ...imgProps }) => {
+  const svgUseStyleMap = {
+      normal: 'text-primary-main',
+      black: 'text-black',
+      white: 'text-black invert',
+  };
+  const Icon = JSX(({ className = '', imageClassName = '', name = '', alt = `Иконка ${IconTitleMap[name] || name}`, title = alt, iconVersion = 'normal', asSVG, ...imgProps }) => {
       const href = `${projectSettings.CDN || ''}icons/${name}.svg`;
-      const svgUseStyle = iconVersion === 'white' ? 'text-black invert' : 'text-primary-main';
       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", { className: svgUseStyle, 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: `${svgUseStyleMap[iconVersion]} ${imageClassName}`, href: `${href}#icon`, xlinkHref: `${href}#icon` })] }));
       }
       return (jsx("img", { className: className, src: href, alt: alt, title: title, ...imgProps, "aria-hidden": "true" }));
   });
@@ -431,7 +425,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, iconVersion: getIconVersion(image), name: icon, ...iconProps })) : null;
+          return icon.length ? (jsx(Icon, { className: className, imageClassName: imageClassName, iconVersion: getIconVersion(image), name: icon, ...iconProps })) : null;
       }
       return (jsx(ImgAsPicture, { className: className, imageClassName: imageClassName, image: image }));
   });
@@ -751,7 +745,9 @@
   };
 
   function renderBackwardButton(button, version, className) {
-      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: button?.text, href: button?.href, children: jsx(Img, { className: "w-4 h-4", image: button?.icon || { icon: 'ArrowLeftIcon' }, asSVG: true }) }), button?.text ? jsx("span", { className: "text-m-md font-light", children: button.text }) : null] }));
+      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: button?.text, href: button?.href, children: jsx(Img, { className: "w-4 h-4", image: { ...backwardIcon, iconVersion }, asSVG: true }) }), button?.text ? jsx("span", { className: "text-m-md font-light", children: button.text }) : null] }));
   }
 
   const productBlockStyleMap$1 = {
@@ -877,7 +873,7 @@
 
   const ArrowButton = JSX(({ className, disabled, ...rest }) => (jsx(Button, { rounded: true, className: `shadow-[0_4px_25px_rgba(0,0,0,0.07)] w-12 h-12 min-h-12 max-h-12 flex items-center justify-center ${disabled
         ? 'bg-secondary-light text-secondary-text'
-        : 'bg-white text-primary-text hover:text-primary-main'} ${className || ''}`, disabled: disabled, ...rest, children: jsx(Img, { className: "w-4 h-4 min-w-4 min-h-4 rounded-full box-border", image: { icon: 'ArrowLeftIcon' }, width: "16", height: "16", asSVG: true }) })));
+        : 'bg-white text-primary-text hover:text-primary-main'} ${className || ''}`, disabled: disabled, ...rest, children: jsx(Img, { className: "w-4 h-4 min-w-4 min-h-4 rounded-full box-border", image: { icon: 'ArrowLeftIcon', iconVersion: 'black' }, width: "16", height: "16", asSVG: true }) })));
 
   const cardVersionMap = {
       primary: 'bg-white text-secondary-text',
@@ -1410,7 +1406,7 @@
       return (jsx("section", { className: `box-border relative flex shrink-0 basis-full ${className}`, role: "listitem", children: jsx("div", { className: "box-border p-9 w-full", children: jsx(EmbeddedBlock, { context: context, ...blockCalcTabs, className: "flex justify-between" }) }) }, String(i)));
   };
 
-  const arrowBtnStyle = 'absolute w-[56px] h-[56px] min-h-[56px] max-h-[56px] top-1 z-10 mt-[25px] bg-white rounded-full';
+  const arrowBtnStyle$1 = 'absolute w-[56px] h-[56px] min-h-[56px] max-h-[56px] top-1 z-10 mt-[25px] bg-white rounded-full';
   const Calculator = JSX(({ className = '', context, calcTabs = [], anchor = null }) => {
       const tabsNav = calcTabs.map((_) => _.nav || {});
       const blockCalcTabs = calcTabs.map(({ calculatorBlock }) => calculatorBlock || {});
@@ -1423,11 +1419,11 @@
       const showPrevButton = tabsShift > 0;
       return (jsxs("section", { id: anchor, className: `box-border overflow-hidden relative font-sans w-100 bg-white text-primary-text ${className}`, children: [jsxs("div", { children: [tabsNav.length > 1
                           ? renderTabs({ tabsShift, tabsNav, activeSlideIndex, setActiveSlideIndex })
-                          : null, showPrevButton ? (jsx(ArrowButton, { className: `${arrowBtnStyle} left-3 top-3`, onClick: handlePrevClick, ariaLabel: "\u041F\u0440\u043E\u043B\u0438\u0441\u0442\u0430\u0442\u044C \u0432\u043B\u0435\u0432\u043E", "data-block-control": "scroll-left" })) : null, showNextButton ? (jsx(ArrowButton, { className: `${arrowBtnStyle} right-3 top-3 rotate-180`, onClick: handleNextClick, ariaLabel: "\u041F\u0440\u043E\u043B\u0438\u0441\u0442\u0430\u0442\u044C \u0432\u043F\u0440\u0430\u0432\u043E", "data-block-control": "scroll-right" })) : null] }), jsx("div", { className: "flex", style: { transform: `translateX(-${activeSlideIndex}00%)` }, role: "list", children: blockCalcTabs?.length
+                          : null, showPrevButton ? (jsx(ArrowButton, { className: `${arrowBtnStyle$1} left-3 top-3`, onClick: handlePrevClick, ariaLabel: "\u041F\u0440\u043E\u043B\u0438\u0441\u0442\u0430\u0442\u044C \u0432\u043B\u0435\u0432\u043E", "data-block-control": "scroll-left" })) : null, showNextButton ? (jsx(ArrowButton, { className: `${arrowBtnStyle$1} right-3 top-3 rotate-180`, onClick: handleNextClick, ariaLabel: "\u041F\u0440\u043E\u043B\u0438\u0441\u0442\u0430\u0442\u044C \u0432\u043F\u0440\u0430\u0432\u043E", "data-block-control": "scroll-right" })) : null] }), jsx("div", { className: "flex", style: { transform: `translateX(-${activeSlideIndex}00%)` }, role: "list", children: blockCalcTabs?.length
                       ? blockCalcTabs.map(renderCalculatorBlock({ context, className }))
                       : null })] }));
   });
-  function renderNavButton$1({ tab, i, activeSlideIndex, onClick }) {
+  function renderNavButton$2({ tab, i, activeSlideIndex, onClick }) {
       const isActiveBtn = i === activeSlideIndex;
       const btnClassName = isActiveBtn
           ? 'h-[88px] w-[387px] min-w-[387px] p-5 border-none bg-primary-main text-white'
@@ -1439,7 +1435,7 @@
       ${btnClassName}`, children: [jsx(Img, { className: `h-[24px] w-[24px] min-w-[24px] min-h-[24px] mr-4 ${iconClassName}`, image: { ...tab?.icon, iconVersion: isActiveBtn ? 'white' : 'normal' }, width: "24", height: "24", asSVG: true }), jsxs("div", { className: "border-0", children: [jsx("div", { className: `font-medium ${btnTitleClassName}`, children: tab?.title }), jsx("div", { className: `text-secondary-text ${btnDescClassName}`, children: tab.description })] })] }, String(i)));
   }
   function renderTabs({ tabsShift, tabsNav, activeSlideIndex, setActiveSlideIndex }) {
-      return (jsxs("div", { children: [jsx("div", { style: { transform: `translateX(-${tabsShift * 388}px)` }, className: "flex flex-col justify-end items-center h-[126px] pt-[38px] box-border duration-1000", children: jsx("div", { className: "w-full flex flex-nowrap items-end gap-2", children: tabsNav.map((tab, i) => renderNavButton$1({
+      return (jsxs("div", { children: [jsx("div", { style: { transform: `translateX(-${tabsShift * 388}px)` }, className: "flex flex-col justify-end items-center h-[126px] pt-[38px] box-border duration-1000", children: jsx("div", { className: "w-full flex flex-nowrap items-end gap-2", children: tabsNav.map((tab, i) => renderNavButton$2({
                           tab,
                           i,
                           activeSlideIndex,
@@ -1840,14 +1836,15 @@
           height: '21px',
       },
   ];
-  const MediaButton = JSX(({ href, version }) => {
+  const MediaButton = JSX(({ href, version = 'primary' }) => {
       const { icon, width, height, label } = ICONS_MAP.find(({ origins }) => origins.some((_) => href?.includes(_))) || {};
       if (!icon)
           return null;
       const classes = version === 'secondary'
-          ? 'text-white hover:text-primary-main hover:bg-white'
-          : 'text-primary-main hover:text-white hover:bg-primary-main hover:border-primary-main';
-      return (jsx("a", { className: ` flex items-center justify-center border border-solid rounded-md border-main-divider no-underline outline-none w-14 h-14 box-border ${classes}`, href: href, "aria-label": label, target: "_blank", rel: "noopener noreferrer", children: icon ? jsx(Img, { image: icon, width: width, height: height, asSVG: true, className: "block" }) : null }));
+          ? 'bg-secondary-light hover:bg-secondary-hover'
+          : 'border-main-divider border-solid border-[1px] 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, iconVersion: 'normal' }, imageClassName: isPrimary ? 'group-hover:text-white' : '', width: width, height: height, asSVG: true })) : null }));
   });
 
   const SocialMedia = JSX(({ className = '', media, version, context, children }) => {
@@ -1927,13 +1924,13 @@
       'bg-white': 'text-secondary-light hover:text-secondary-hover',
       transparent: 'text-white',
   };
-  const LINKS_ICON_NAME_MAP = {
-      'bg-white': 'GridIcon',
-      transparent: 'GridIconWhite',
+  const LINKS_ICON_VERSION_MAP = {
+      'bg-white': 'black',
+      transparent: 'white',
   };
   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: "LoupeIcon", 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: LINKS_ICON_NAME_MAP[bgColor], className: "h-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 ${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 }) })] }));
   });
 
   const maxBy = (discriminator) => (list) => list.reduceRight((a, b) => (discriminator(a) > discriminator(b) ? a : b));
@@ -2047,21 +2044,90 @@
       return (jsx("header", { className: `pt-6 pb-8 px-20 ${bgColor} ${className}`, id: anchor, 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] }) }));
   });
 
-  const Insurance = JSX(({ className = '', title, description, image, benefits, insuranceSum, monthLimit }) => {
-      return (jsxs("section", { className: `px-[100px] py-[50px] bg-white text-primary-text ${className}`, children: [title ? jsx(Heading, { headingType: "h3", title: title, className: "text-center" }) : null, description ? jsx("div", { className: "text-center text-md mt-3", children: description }) : null, jsx("div", { children: jsxs("div", { className: "mt-5 mx-auto flex justify-center gap-[120px] mt-[30px]", children: [image?.src ? jsx(Img, { image: image }) : null, jsxs("div", { className: "w-[558px] m-auto", children: [benefits ? (jsx("div", { className: "flex flex-col gap-4", children: benefits.map(renderBenefit) })) : null, jsxs("div", { className: "bg-secondary-light h-15 flex mt-7 gap-6 px-5 py-4", children: [insuranceSum
-                                              ? renderValueBlock('Страховая сумма:', insuranceSum, Boolean(monthLimit))
-                                              : null, monthLimit
-                                              ? renderValueBlock('Ежемесячный лимит:', monthLimit, Boolean(insuranceSum))
+  const Insurance = JSX(({ className = '', title, description, image, benefits, sum, monthLimit }) => {
+      return (jsxs("section", { className: `px-[100px] py-[50px] bg-white text-primary-text ${className}`, children: [title ? jsx(Heading, { headingType: "h3", title: title, className: "text-center" }) : null, description ? jsx("div", { className: "text-center text-md mt-3", children: description }) : null, jsx("div", { children: jsxs("div", { className: "mt-5 mx-auto flex justify-center gap-[120px] mt-[30px]", children: [image?.src ? jsx(Img, { image: image }) : null, jsxs("div", { className: "w-[558px] m-auto", children: [benefits ? (jsx("div", { className: "flex flex-col gap-4", children: benefits.map(renderBenefit) })) : null, jsxs("div", { className: "bg-secondary-light h-15 flex mt-7 gap-6 px-5 py-4", children: [sum ? renderValueBlock$1('Страховая сумма:', sum, Boolean(monthLimit)) : null, monthLimit
+                                              ? renderValueBlock$1('Ежемесячный лимит:', monthLimit, Boolean(sum))
                                               : null] })] })] }) })] }));
   });
   function renderBenefit(benefit, i) {
-      return (jsxs("div", { className: "flex items-center gap-5", children: [benefit?.icon ? (jsx(Img, { className: "w-[50px] h-[50px] min-w-[50px] p-3 rounded-full bg-secondary-light", image: benefit.icon, width: "24", height: "24", asSVG: true })) : null, jsx("div", { className: "flex", children: jsx("div", { className: "text-title-2xs", children: benefit.label }) })] }, String(i)));
+      return (jsxs("div", { className: "flex items-center gap-5", children: [benefit?.icon ? (jsx(Img, { className: "w-[50px] h-[50px] min-w-[50px] p-3 rounded-full bg-secondary-light", image: benefit.icon, width: "24", height: "24", asSVG: true })) : null, jsxs("div", { children: [benefit?.label ? jsx("div", { className: "text-title-2xs", children: benefit.label }) : null, benefit?.description ? (jsx("div", { className: "mt-2 font-light text-secondary-text", children: benefit.description })) : null] })] }, String(i)));
   }
-  function renderValueBlock(title, sum, isAnotherBlock) {
+  function renderValueBlock$1(title, sum, isAnotherBlock) {
       const widthStyle = isAnotherBlock ? 'w-fit' : 'w-full';
       return (jsxs("div", { className: `flex justify-between items-center gap-2 w-full ${widthStyle}`, children: [jsx("span", { className: "text-secondary-text text-base", children: title }), jsxs("span", { className: "text-primary-main text-title-2xs", children: [addSpacesBetweenNumbers(sum), " \u20BD"] })] }));
   }
 
+  const arrowBtnStyle = 'absolute w-12 h-12 min-h-12 max-h-12 top-1 z-10 mt-[25px] bg-white rounded-full text-primary-text';
+  const InsuranceAmountBlockInner = JSX(({ className = '', context, cards = [], anchor = null }) => {
+      const [activeSlideIndex, setActiveSlideIndex] = context.useState(0);
+      const [tabsShift, setTabsShift] = context.useState(0);
+      const handleNextClick = () => setTabsShift(tabsShift + 1);
+      const handlePrevClick = () => setTabsShift(tabsShift - 1);
+      const galleryLength = cards?.length;
+      const isGalleryScrollAvailable = cards?.length > 2;
+      const showNextButton = isGalleryScrollAvailable && galleryLength > tabsShift + 2;
+      const isLastShift = galleryLength === tabsShift + 2;
+      const showPrevButton = tabsShift > 0;
+      return (jsx("section", { id: anchor, className: `min-w-full ${className}`, children: jsxs("div", { className: "relative mt-7 overflow-hidden", children: [galleryLength > 1
+                      ? renderGallery({
+                          tabsShift,
+                          cards,
+                          activeSlideIndex,
+                          isLastShift,
+                          setActiveSlideIndex,
+                      })
+                      : null, showPrevButton ? (jsxs("div", { children: [jsx(ArrowButton, { className: `${arrowBtnStyle} left-0 top-9`, onClick: handlePrevClick, ariaLabel: "\u041F\u0440\u043E\u043B\u0438\u0441\u0442\u0430\u0442\u044C \u0432\u043B\u0435\u0432\u043E", "data-block-control": "scroll-left" }), jsx("div", { className: "absolute top-0 left-0 h-[168px] w-[84px] bg-opacity-from-white" })] })) : null, showNextButton ? (jsxs("div", { children: [jsx(ArrowButton, { className: `${arrowBtnStyle} right-0 top-9 rotate-180`, onClick: handleNextClick, ariaLabel: "\u041F\u0440\u043E\u043B\u0438\u0441\u0442\u0430\u0442\u044C \u0432\u043F\u0440\u0430\u0432\u043E", "data-block-control": "scroll-right" }), jsx("div", { className: "absolute top-0 right-0 h-[168px] w-[100px] bg-opacity-to-white" })] })) : null] }) }));
+  });
+  function renderGallery({ tabsShift, cards, activeSlideIndex, isLastShift, setActiveSlideIndex, }) {
+      const tabsShiftWidth = isLastShift ? tabsShift * 460 - 240 : tabsShift * 460;
+      return (jsx("div", { style: { transform: `translateX(-${tabsShiftWidth}px)` }, className: "duration-1000", children: jsx("div", { className: "w-full flex flex-nowrap gap-3.5 pb-[38px] px-[50px]", children: cards.map((slide, i) => renderSlide({
+                  slide,
+                  i,
+                  activeSlideIndex,
+                  onClick: () => setActiveSlideIndex(i),
+              })) }) }));
+  }
+  function renderSlide({ slide, i, activeSlideIndex, onClick }) {
+      const isActiveBtn = i === activeSlideIndex;
+      const btnClassName = isActiveBtn
+          ? 'shadow-dark-blue/42 border-primary-main'
+          : `ease-in duration-300 border-main-stroke`;
+      return (jsxs("button", { type: "button", onClick: onClick, className: `p-[30px] min-w-[460px] flex items-center bg-white border-solid border relative ${btnClassName}`, children: [slide?.icon ? (jsx(Img, { className: `h-[108px] w-[108px] p-3 rounded-full bg-secondary-light mr-[30px]`, image: slide.icon, width: "24", height: "24" })) : null, jsxs("div", { className: "flex gap-3.5", children: [slide?.sum ? renderValueBlock('страховая сумма', slide.sum) : null, slide?.fee ? renderValueBlock('страховой взнос', slide.fee) : null] }), renderDoneIcon(isActiveBtn)] }, String(i)));
+  }
+  function renderValueBlock(title, sum) {
+      return (jsxs("div", { className: "flex flex-col text-left", children: [jsxs("span", { className: "whitespace-pre text-title-2xs", children: [addSpacesBetweenNumbers(sum), " \u20BD"] }), jsx("span", { className: "whitespace-pre text-secondary-text font-light text-base mt-1", children: title })] }));
+  }
+  function renderDoneIcon(isActive) {
+      return isActive ? (jsx(Img, { className: `h-[24px] w-[24px] min-w-[24px] min-h-[24px] absolute right-4 top-4`, image: "DoneIcon", width: "24", height: "24" })) : null;
+  }
+
+  const InsuranceAmountBlock = JSX(({ className = '', context, title, insuranceTabs = [], button, anchor = null }) => {
+      const insuranceGalleries = insuranceTabs.map((_) => _.cards);
+      const [activeSlideIndex, setActiveSlideIndex] = context.useState(0);
+      return (jsxs("section", { id: anchor, className: `box-border py-[50px] overflow-hidden relative font-sans w-100 bg-white ${className}`, children: [title ? jsx(Heading, { className: "text-center", title: title, headingType: "h3" }) : null, jsx("div", { className: "p-1.5 bg-secondary-light w-fit m-auto rounded-md mt-[34px]", children: insuranceTabs.map((item, i) => renderNavButton$1({
+                      title: item?.title,
+                      i,
+                      activeSlideIndex,
+                      onClick: () => setActiveSlideIndex(i),
+                  })) }), jsx("div", { className: "flex", style: { transform: `translateX(-${activeSlideIndex}00%)` }, role: "list", children: renderInsuranceGalleries({
+                      context,
+                      className,
+                      insuranceGalleries,
+                  }) }), button?.text ? (jsx("div", { className: "flex justify-center", children: jsx(Button, { className: "box-border p-4 h-14 w-full max-w-[240px]", version: button?.version || 'primary', href: button.href, children: button.text }) })) : null] }));
+  });
+  const renderInsuranceGalleries = ({ insuranceGalleries, context, className }) => {
+      return insuranceGalleries?.length
+          ? insuranceGalleries.map((cards) => (jsx(InsuranceAmountBlockInner, { context: context, className: className, cards: cards })))
+          : null;
+  };
+  function renderNavButton$1({ title, i, activeSlideIndex, onClick }) {
+      const isActiveBtn = i === activeSlideIndex;
+      const btnClassName = isActiveBtn
+          ? 'bg-primary-main text-white rounded-md'
+          : `text-secondary-text`;
+      return (jsx("button", { type: "button", onClick: onClick, "aria-label": title, className: `box-border px-4 py-3 text-m-md ${btnClassName}`, children: title }, String(i)));
+  }
+
   const MobileAppTile = JSX(({ className = '', context, title = 'Мобильное приложение', qr, buttons = [], anchor = null, }) => {
       return (jsx("section", { className: `bg-white text-primary-text font-sans p-9 box-border ${className}  ${getTileRightPadding(className)} ${getTileMinHeight(className)} `, id: anchor, children: jsx(BaseTile, { context: context, title: title ? (jsx(Heading, { headingType: "h3", title: title, className: `whitespace-pre-wrap max-w-[600px] mb-[30px]` })) : null, buttons: buttons?.length ? (jsx(ButtonSection, { context: context, buttons: buttons, className: "flex mt-[30px] gap-4" })) : null, children: jsxs("div", { className: "flex items-center", children: [qr?.src && qr?.href && (jsx("a", { href: qr.href, target: "_blank", "aria-label": title, children: jsx("img", { src: qr.src, alt: title, title: title, width: "164", height: "164", className: "w-[92px] h-[92px] min-w-[92px] min-h-[92px] bg-secondary-light" }) })), jsx("span", { className: "font-light text-secondary-text ml-4", children: "\u041D\u0430\u0432\u0435\u0434\u0438\u0442\u0435 \u043A\u0430\u043C\u0435\u0440\u0443 \u0442\u0435\u043B\u0435\u0444\u043E\u043D\u0430 \u043D\u0430 QR-\u043A\u043E\u0434 \u0438 \u0441\u043A\u0430\u0447\u0430\u0439\u0442\u0435 \u043F\u0440\u0438\u043B\u043E\u0436\u0435\u043D\u0438\u0435" })] }) }) }));
   });
@@ -2127,7 +2193,7 @@
           initialState: isUnfolded,
       });
       return blocks ? (jsxs("div", { children: [renderBlocks(blocks, render, { blocksToHide, isActive }), hiddenBlocksNum ? (jsxs("button", { className: foldButtonClasses ||
-                      'border-none bg-primary-main px-0 py-[26px] mb-[1px] w-full font-sans text-white text-base flex justify-center cursor-pointer', "data-theme": foldButtonDataTheme, onClick: handleToggle, children: [jsx("span", { className: "pr-3", children: isActive ? 'Скрыть' : foldButtonLabel }), jsx(Icon, { name: icon, width: "20", height: "20", asSVG: true })] })) : null] })) : null;
+                      'border-none bg-primary-main px-0 py-[26px] mb-[1px] w-full font-sans text-white text-base flex justify-center cursor-pointer', "data-theme": foldButtonDataTheme, onClick: handleToggle, children: [jsx("span", { className: "pr-3", children: isActive ? 'Скрыть' : foldButtonLabel }), jsx(Icon, { name: icon, iconVersion: "white", width: "20", height: "20", asSVG: true })] })) : null] })) : null;
   });
   const renderBlocks = (blocks, render, { blocksToHide, isActive }) => {
       const visibleBlocks = blocks.slice(0, blocks.length - blocksToHide);
@@ -2228,7 +2294,7 @@
   }
 
   const RecommendationCard = JSX(({ context, className = '', title, description, items, image, version, socialMedia }) => {
-      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 })] }) }));
+      return (jsx("section", { className: `border border-solid box-border p-[30px] min-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]';
@@ -2271,7 +2337,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-8 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: step.button?.href, children: step.button.text })) : null] }, String(i)));
   };
 
   const DIVIDER_CLASSES = 'border-main-divider border border-t-0 border-x-0';
@@ -2402,6 +2468,7 @@
       Header,
       Headline,
       Insurance,
+      InsuranceAmountBlock,
       LinkDocs,
       MiniGallery,
       MobileAppTile,