@redneckz/wildless-cms-uni-blocks 0.3.58 → 0.3.60

package/bundle/bundle.umd.js

@@ -397,7 +397,7 @@
 
   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' : '';
+      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` })] }));
       }
@@ -513,9 +513,9 @@
       secondary: 'bg-primary-main text-white',
   };
   const PictureText = JSX(({ className = '', title, image, benefits, version = 'primary', directionRight = false, anchor = null, }) => {
-      return (jsxs("section", { className: `relative font-sans p-14 ${pictureTextStyleMap[version]} ${className}`, id: anchor, children: [jsx(Heading, { headingType: "h2", className: "text-center", title: title }), jsxs("div", { className: 'flex justify-center mt-9', children: [image?.src && jsx(Img, { className: directionRight ? 'order-2 ml-6' : 'mr-6', image: image }), benefits?.length ? (jsx("div", { className: "flex flex-col", children: benefits.map((_, i) => renderBenefit$1(_, i, version)) })) : null] })] }));
+      return (jsxs("section", { className: `relative font-sans p-14 ${pictureTextStyleMap[version]} ${className}`, id: anchor, children: [jsx(Heading, { headingType: "h2", className: "text-center", title: title }), jsxs("div", { className: 'flex justify-center mt-9', children: [image?.src && jsx(Img, { className: directionRight ? 'order-2 ml-6' : 'mr-6', image: image }), benefits?.length ? (jsx("div", { className: "flex flex-col", children: benefits.map((_, i) => renderBenefit$2(_, i, version)) })) : null] })] }));
   });
-  function renderBenefit$1(benefit, i, version) {
+  function renderBenefit$2(benefit, i, version) {
       return (jsxs("div", { className: "flex flex-row mb-8", children: [benefit.icon ? (jsx(Img, { className: "w-[48px] h-[48px] bg-main rounded-full box-border p-[12px]", image: benefit.icon, width: "48", height: "48", asSVG: true })) : null, jsxs("div", { className: "flex gap-1 flex-col h-full ml-5 max-w-[490px]", children: [benefit.label && (jsx("div", { className: `font-medium text-xl m-0 ${version === 'primary' ? 'text-primary-text' : ''}`, children: benefit.label })), benefit.description && (jsx("div", { className: `font-normal text-sm ${version === 'primary' ? 'text-secondary-text' : ''}`, children: benefit.description }))] })] }, String(i)));
   }
 
@@ -598,8 +598,8 @@
   }
 
   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 text-left", children: text })] })) : null] }));
+      const { text, aboveText, appendLeft, appendRight } = 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 text-left", children: text })] })) : null, appendRight ? appendRight : null] }));
   });
   const getButtonStyle = (props) => {
       const { version, aboveText, rounded } = props;
@@ -627,8 +627,8 @@
   };
   const buttonStyle = 'text-center font-sans select-none';
   const Button = JSX((props) => {
-      const { text, aboveText, appendLeft, children, disabled, rounded, ...rest } = props;
-      const buttonInner = children ?? (jsx(ButtonInner, { text: text, aboveText: aboveText, appendLeft: appendLeft, rounded: rounded }));
+      const { text, aboveText, appendLeft, appendRight, children, disabled, rounded, ...rest } = props;
+      const buttonInner = children ?? (jsx(ButtonInner, { text: text, aboveText: aboveText, appendLeft: appendLeft, appendRight: appendRight, rounded: rounded }));
       return disabled ? (jsx(DisabledButton, { rounded: rounded, ...rest, children: buttonInner })) : (jsx(RegularButton, { rounded: rounded, ...rest, children: buttonInner }));
   });
   const RegularButton = JSX(({ className = '', ariaLabel, version = 'none', rounded, href, target, children, onClick, ...rest }) => {
@@ -641,7 +641,7 @@
   const ButtonSection = JSX(({ context, className = '', buttons }) => {
       const { handlerDecorator } = context;
       const router = context.useRouter();
-      return buttons?.length ? (jsx("div", { className: `${className}`, children: buttons.map((button, index) => renderButton$2(useLink({ router, handlerDecorator }, button), index)) })) : null;
+      return buttons?.length ? (jsx("div", { className: className, children: buttons.map((button, index) => renderButton$2(useLink({ router, handlerDecorator }, button), index)) })) : null;
   });
   function renderButton$2({ icon, ...button }, i) {
       if (!button?.text)
@@ -708,7 +708,7 @@
       primary: 'text-secondary-text',
       secondary: 'text-white',
   };
-  function renderBenefit({ benefit, version = 'primary', benefitsVersion = 'normal' }, i) {
+  function renderBenefit$1({ 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)));
   }
@@ -725,7 +725,7 @@
 
   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((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-[-50px]", 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$1({ 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-[-50px]", image: image })] }));
   });
   const getTitle = (title, headingType) => {
       return (title && (jsx(Heading, { headingType: headingType, title: title, className: "whitespace-pre-wrap max-w-[600px]" })));
@@ -823,7 +823,7 @@
   const Tile = JSX((props) => {
       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)] }) }));
+              ${version === 'primary' ? 'text-primary-text' : ''}` })), buttons: buttons?.length ? (jsx(ButtonSection, { context: context, buttons: buttons.map((button) => ({ ...button, className: 'w-[158px]' })), 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) {
       return items?.length ? (jsx(List, { items: items, itemClassName: "text-title-2xs font-light mt-2", version: version === 'primary' ? 'tile' : 'tile-white' })) : null;
@@ -833,9 +833,14 @@
       primary: 'bg-white text-primary-text',
       secondary: 'bg-primary-main text-white',
   };
-  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 })) : null, 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, additionalDescription, 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 })) : null, renderBenefits(benefits, version), additionalDescription
+                      ? renderAdditionalDescription(additionalDescription, version)
+                      : null] }) }));
   });
+  function renderBenefits(benefits = [], version) {
+      return (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)));
   }
@@ -846,6 +851,13 @@
       };
       return (jsx("div", { className: `text-sm ${i ? 'mt-4' : ''} ${labelStyleMap[version]}`, children: benefit.description }, String(i)));
   }
+  function renderAdditionalDescription(additionalDescription, version = 'primary') {
+      const descStyleMap = {
+          primary: 'text-secondary-text',
+          secondary: 'text-white',
+      };
+      return jsx("div", { className: `text-sm mt-2.5 ${descStyleMap[version]}`, children: additionalDescription });
+  }
 
   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'
@@ -1966,6 +1978,10 @@
       });
   };
 
+  const DOT_BG_COLORS_MAP = {
+      'bg-white': 'bg-primary-text',
+      transparent: 'bg-white',
+  };
   const HeaderSubMenu = JSX(({ context, subItems, bgColor }) => {
       const [subMenuIsShow, setHiddenMenuIsShow] = context.useState(false);
       const router = context.useRouter();
@@ -1986,31 +2002,45 @@
                   subMenuIsShow,
                   toggleSubMenu,
                   subItems,
+                  bgColor,
                   router,
                   handlerDecorator,
               })] }));
   });
   // TODO: add types
-  const renderDotsSubMenu = ({ subMenuIsShow, toggleSubMenu, subItems, router, handlerDecorator, }) => (jsxs("div", { className: `absolute w-52 -top-4 right-0 pt-4 z-40 ${subMenuIsShow ? 'bg-white rounded-md shadow-blue-gray/24' : ''}`, "data-header-submenu-visible": "toggled", children: [jsx("button", { className: "flex justify-between items-center cursor-pointer h-6 ml-6", onClick: toggleSubMenu, "aria-label": `${subMenuIsShow ? 'Скрыть другие разделы' : 'Показать другие разделы'}`, children: Array(3)
-                  .fill(0)
-                  .map((_, i) => renderDot(i)) }), jsx("div", { className: `flex flex-col rounded-md bg-white p-6 pb-2 ${subMenuIsShow ? '' : 'hidden'}`, "aria-hidden": !subMenuIsShow, children: renderDotsSubMenuItems(subItems, router, handlerDecorator) })] }));
+  const renderDotsSubMenu = ({ subMenuIsShow, toggleSubMenu, subItems, bgColor, router, handlerDecorator, }) => (jsxs("div", { className: `absolute w-52 -top-4 right-0 pt-4 z-40 ${subMenuIsShow ? 'bg-white rounded-md shadow-blue-gray/24' : ''}`, "data-header-submenu-visible": "toggled", children: [jsx("button", { className: "flex justify-between items-center cursor-pointer h-6 ml-6", onClick: toggleSubMenu, "aria-label": `${subMenuIsShow ? 'Скрыть другие разделы' : 'Показать другие разделы'}`, children: Array(3).fill(bgColor).map(renderDot) }), jsx("div", { className: `flex flex-col rounded-md bg-white p-6 pb-2 ${subMenuIsShow ? '' : 'hidden'}`, "aria-hidden": !subMenuIsShow, children: renderDotsSubMenuItems(subItems, router, handlerDecorator) })] }));
   // TODO: add types
   const renderDotsSubMenuItems = (subItems, router, handlerDecorator) => subItems?.map((_) => (jsx("a", { ...useLink({ router, handlerDecorator }, _), "data-item-name": "dots-header-submenu", className: "text-base font-light pb-4 hover:text-primary-main", children: _.text }, _.href)));
-  const renderDot = (i) => (jsx("div", { className: "w-[3px] h-[3px] rounded bg-black mr-1" }, String(i)));
+  const renderDot = (bgColor, i) => (jsx("div", { className: `w-[3px] h-[3px] rounded mr-1 ${DOT_BG_COLORS_MAP[bgColor]}` }, String(i)));
 
   const BORDER_COLORS = {
       'bg-white': 'bg-main-divider',
       transparent: 'bg-main-divider opacity-30',
   };
-  const Header = JSX(({ className = '', defaultLocation = 'Москва', bgColor = 'bg-white', context, topItems, anchor = null, }) => {
+  const Header = JSX(({ className = '', defaultLocation = 'Москва', showSubMenu = true, bgColor = 'bg-white', context, topItems, anchor = null, }) => {
       const router = context.useRouter();
       const sitemap = useSitemap(context.useAsyncData);
       const { handlerDecorator } = context;
       const mergedItems = mergeTopItems(sitemap.topItems, topItems);
       const activeTopItem = mergedItems.find(isTopItemActive(router));
       const topMenu = mergedItems.map((_, i) => (jsx(TopItem, { active: _ === activeTopItem, ...useLink({ router, handlerDecorator }, _), "aria-label": _.text, bgColor: bgColor }, String(i))));
-      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 }), topMenu, jsx(HeaderSecondaryMenu, { context: context, className: "ml-auto", defaultLocation: defaultLocation, bgColor: bgColor })] }), jsx("div", { className: `mt-6 h-[1px] ${BORDER_COLORS[bgColor]}` }), jsx(HeaderSubMenu, { context: context, subItems: activeTopItem?.items, bgColor: bgColor })] }) }));
+      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 }), 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))
+                                              : 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)));
+  }
+  function renderValueBlock(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 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]` })), 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" })] }) }) }));
@@ -2249,16 +2279,16 @@
 
   const GroupBlockTabs = JSX((props) => {
       const { tabs, currentTag, onTabClick, className = '', isShowCounter = true } = props;
-      return (jsx("div", { className: `mb-2 box-border flex gap-x-1 h-12 ${className}`, role: "tablist", children: tabs?.map(renderTab(onTabClick, isShowCounter, currentTag)) }));
+      return (jsx("div", { className: `mb-2 box-border flex gap-x-1 ${className}`, role: "tablist", children: tabs?.map(renderTab(onTabClick, isShowCounter, currentTag)) }));
   });
-  const badgeStyle = 'w-[22px] h-[22px] rounded-full text-m-sm';
+  const badgeStyle = 'min-w-[22px] w-[22px] h-[22px] rounded-full text-m-sm';
   const renderTab = (onTabClick, isShowCounter, currentTag) => (tab, i) => {
       const isActive = currentTag === tab.tag;
       const tabBg = isActive ? 'bg-primary-main' : 'group bg-white';
       const tabText = isActive ? 'text-white' : 'text-secondary-text group-hover:text-primary-main';
       const counterBlockStyle = `${badgeStyle} 
-      ${isActive ? 'bg-white/30 text-white' : 'bg-secondary-text/10 text-secondary-text'}`;
-      return (jsx("div", { className: `flex h-full w-full flex-1 cursor-pointer mr-2 last:mr-0 box-content ${tabBg}`, role: "tab", onClick: () => onTabClick(tab.tag), "aria-selected": String(isActive), tag: tab?.tag, children: jsxs("div", { className: "flex flex-1 items-center justify-center", children: [tab?.title ? jsx("h3", { className: `mr-8 ${tabText}`, children: tab?.title }) : null, isShowCounter ? (jsx("div", { className: `flex items-center justify-center ${counterBlockStyle}`, children: jsx("span", { children: tab.count }) })) : null] }) }, String(i)));
+      ${isActive ? 'bg-white/30 text-white' : 'bg-secondary-light text-secondary-text'}`;
+      return (jsx("div", { className: `flex h-full w-full h-12 flex-1 cursor-pointer mr-2 last:mr-0 box-content ${tabBg}`, role: "tab", onClick: () => onTabClick(tab.tag), "aria-selected": String(isActive), tag: tab?.tag, children: jsxs("div", { className: "flex flex-1 items-center justify-center", children: [tab?.title ? jsx("h3", { className: `mr-8 ${tabText}`, children: tab?.title }) : null, isShowCounter ? (jsx("div", { className: `flex items-center justify-center ${counterBlockStyle}`, children: jsx("span", { children: tab.count }) })) : null] }) }, String(i)));
   };
 
   function style2className(style) {
@@ -2296,7 +2326,7 @@
               : groupBlocks.length;
           return { ...tab, count };
       });
-      return (jsxs("section", { id: anchor, className: `box-border gap-1 h-12 ${className}`, children: [tabsNewMap?.length ? (jsx(GroupBlockTabs, { currentTag: currentTag, onTabClick: setCurrentTag, tabs: tabsNewMap })) : null, groupBlocks.length ? (jsx("div", { className: "list-none", children: jsx(GroupBlocksItem, { context: context, groupBlocks: filteredBlocks }) })) : null] }));
+      return (jsxs("section", { id: anchor, className: `box-border gap-1 h-12 ${className}`, children: [tabsNewMap?.length ? (jsx(GroupBlockTabs, { currentTag: currentTag, onTabClick: setCurrentTag, tabs: tabsNewMap })) : null, groupBlocks.length ? (jsx(GroupBlocksItem, { context: context, groupBlocks: filteredBlocks })) : null] }));
   });
 
   const Blocks = {
@@ -2312,6 +2342,7 @@
       GracePeriod,
       Header,
       Headline,
+      Insurance,
       LinkDocs,
       MiniGallery,
       MobileAppTile,