@redneckz/wildless-cms-uni-blocks 0.4.1 → 0.4.2

package/bundle/bundle.umd.js

@@ -618,15 +618,48 @@
         return (jsxs(BlockWrapper, { className: `font-sans text-primary-text p-[50px] bg-white ${className}`, context: context, ...rest, children: [jsx(Headline, { className: "!p-0", title: title, description: description, context: context, align: align, headlineVersion: "M", as: "h2" }), jsx(LinkDocsList, { className: `mt-8 ${linkColumnsModeStyleMap[columnsMode]}`, columnsMode: columnsMode, documents: documents, icon: icon })] }));
     });
 
+    const titleStyleMap = {
+        primary: 'text-primary-text',
+        secondary: 'text-white',
+    };
+    const descStyleMap = {
+        primary: 'text-secondary-text',
+        secondary: 'text-white',
+    };
+    const BenefitItem = JSX((props) => {
+        const { className = '', icon, label, description, version = 'primary', benefitsVersion = 'normal', } = props;
+        const isIconWhite = benefitsVersion === 'white' || version === 'secondary';
+        return (jsxs("div", { className: `flex items-center gap-5 ${className}`, children: [icon ? (jsx(Img, { className: renderBenefitIconBgStyle(version, benefitsVersion), image: { ...icon, iconVersion: isIconWhite ? 'white' : 'normal' }, asSVG: true })) : null, jsxs("div", { className: "gap-0.5", children: [label ? jsx("div", { className: `text-h6 ${titleStyleMap[version]}`, children: label }) : null, description ? (jsx("div", { className: `text-m-light ${descStyleMap[version]}`, children: description })) : null] })] }));
+    });
+    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] rounded-full p-[10px] box-border ${bgColorStyle}`;
+    }
+
+    const addSpacesBetweenNumbers = (number) => new Intl.NumberFormat('ru-RU', { maximumSignificantDigits: 3 }).format(number);
+
     const pictureTextStyleMap = {
         primary: 'bg-white text-primary-text',
         secondary: 'bg-primary-main text-white',
     };
-    const PictureText = JSX(({ className = '', title, image, benefits, version = 'primary', directionRight = false, ...rest }) => {
-        return (jsxs(BlockWrapper, { className: `relative font-sans p-14 ${pictureTextStyleMap[version]} ${className}`, ...rest, 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] })] }));
+    const PictureText = JSX(({ className = '', context, title, description, image, benefits, version = 'primary', sum, monthLimit, directionRight = false, ...rest }) => {
+        return (jsxs(BlockWrapper, { className: `relative font-sans p-14 ${pictureTextStyleMap[version]} ${className}`, context: context, ...rest, children: [jsx(Headline, { context: context, className: "!p-0", title: title, description: description, headlineVersion: "M", bgColorHeadline: version, align: "center" }), jsxs("div", { className: 'flex justify-center gap-[122px] mt-[30px]', children: [image?.src && jsx(Img, { className: directionRight ? 'order-2 ml-6' : 'mr-6', image: image }), jsxs("div", { className: "w-[558px] m-auto", children: [benefits?.length ? (jsx("div", { className: "flex flex-col gap-4", children: benefits.map(renderBenefit$1(version)) })) : null, renderInsuranceSumMonth(sum, monthLimit)] })] })] }));
     });
-    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: `text-xl m-0 ${version === 'primary' ? 'text-primary-text' : ''}`, children: benefit.label })) : null, benefit?.description ? (jsx("div", { className: `text-s ${version === 'primary' ? 'text-secondary-text' : ''}`, children: benefit.description })) : null] })] }, String(i)));
+    const renderBenefit$1 = (version) => (benefit, i) => (jsx(BenefitItem, { icon: benefit.icon, label: benefit.label, description: benefit.description, version: version }, String(i)));
+    function renderInsuranceSumMonth(sum, monthLimit) {
+        return sum || monthLimit ? (jsxs("div", { className: "bg-main-divider rounded-md flex mt-7 gap-6 px-5 py-4", children: [Number.isFinite(sum) ? renderValueBlock$1('Страховая сумма:', sum, Boolean(monthLimit)) : null, Number.isFinite(monthLimit)
+                    ? renderValueBlock$1('Ежемесячный лимит:', monthLimit, Boolean(sum))
+                    : null] })) : null;
+    }
+    function renderValueBlock$1(title, sum = 0, isAnotherBlock = false) {
+        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-l-light", children: title }), jsxs("span", { className: "text-primary-main text-h6", children: [addSpacesBetweenNumbers(sum), " \u20BD"] })] }));
     }
 
     const isURL = (href) => href?.includes('//');
@@ -805,34 +838,15 @@
     });
 
     const BaseTile = JSX(({ className = '', title = '', children, buttons, image }) => {
-        return (jsxs("div", { className: `font-sans flex flex-col grow h-full items-start ${className}`, 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] })] }));
+        return (jsxs("div", { className: `font-sans flex flex-col grow h-full items-start ${className}`, children: [title, jsxs("div", { className: "flex grow w-full justify-between", children: [jsxs("div", { className: "flex flex-col w-full", children: [jsx("div", { children: children }), buttons ? jsx("div", { className: "mt-9", children: buttons }) : null] }), image] })] }));
     });
 
-    const benefitTitleStyleMap = {
-        primary: 'text-primary-text',
-        secondary: 'text-white',
-    };
-    const benefitDescStyleMap = {
-        primary: 'text-secondary-text',
-        secondary: 'text-white',
+    const renderBenefit = (version = 'primary', benefitsVersion = 'normal') => ({ icon, label, description }, i) => {
+        return (jsx(BenefitItem, { icon: icon, label: label, description: description, version: version, benefitsVersion: benefitsVersion }, String(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-h6 m-0 ${benefitTitleStyleMap[version]}`, children: benefit.label }), benefit.description ? (jsx("div", { className: `text-m-light ${benefitDescStyleMap[version]}`, children: benefit.description })) : null] })] }, 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, headlineVersion = 'L', description, benefits, benefitsVersion = 'normal', buttons, image, items, version = 'primary', isDotted = true, textBlockClassName = '', }) => {
-        return (jsxs("div", { className: `flex grow justify-between items-stretch h-full ${className}`, children: [jsxs("div", { className: `flex flex-col ${textBlockClassName}`, children: [jsx(Headline, { context: context, title: title, description: description, className: `!p-0 max-w-[600px]`, bgColorHeadline: version, headlineVersion: headlineVersion, align: "left" }), jsxs(BaseTile, { context: context, buttons: getButtons(context, buttons), children: [benefits?.filter((_) => _.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-h6", 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 h-full ${className}`, children: [jsxs("div", { className: `flex flex-col ${textBlockClassName}`, children: [jsx(Headline, { context: context, title: title, description: description, className: `!p-0 max-w-[600px]`, bgColorHeadline: version, headlineVersion: headlineVersion, align: "left" }), jsxs(BaseTile, { context: context, buttons: getButtons(context, buttons), children: [benefits?.filter((_) => _.label)?.length ? (jsx("div", { className: "flex gap-6 mt-6", children: benefits.map(renderBenefit(version, benefitsVersion)) })) : null, items?.length ? (jsx(List, { className: "mt-5 text-h6", items: items, itemClassName: "mb-[7px]", version: version, isDotted: isDotted })) : null] })] }), image?.src && jsx(Img, { className: "mt-[-50px]", image: image })] }));
     });
     const getButtons = (context, buttons) => {
         return buttons?.length ? (jsx(ButtonSection, { context: context, buttons: buttons, className: "flex gap-4" })) : null;
@@ -949,7 +963,7 @@
                             : null] }), buttons?.length ? (jsx(ButtonSection, { context: context, buttons: buttons, className: "flex self-end mt-5 gap-4 z-[1] text-l" })) : null, image?.src ? jsx(Img, { className: "absolute right-0 bottom-0", image: image }) : null] }));
     });
     function renderBenefits$1(benefits, version) {
-        return (jsxs("div", { className: "flex mt-4", children: [benefits.length ? (jsx("div", { className: "mr-6 gap-2.5 text-h6", children: benefits.map(renderBenefitLabel) })) : null, benefits.length ? (jsx("div", { className: "pt-1 text-m", children: benefits.map((_, i) => renderBenefitDescription(_, i, version)) })) : null] }));
+        return (jsxs("div", { className: "flex mt-3.5", children: [benefits.length ? (jsx("div", { className: "mr-6 gap-2.5 text-h6", children: benefits.map(renderBenefitLabel) })) : null, benefits.length ? (jsx("div", { className: "pt-1 text-m", children: benefits.map((_, i) => renderBenefitDescription(_, i, version)) })) : null] }));
     }
     function renderBenefitLabel(benefit, i) {
         return (jsx("div", { className: `${i ? 'mt-2.5' : ''}`, children: benefit.label }, String(i)));
@@ -1173,8 +1187,6 @@
         return (jsxs("div", { className: "flex flex-col items-center max-w-[292px]", children: [bonusBenefit?.icon ? (jsx(Img, { className: "h-[180px] w-[160px] min-w-[160px] min-h-[160px]", image: bonusBenefit.icon, width: "160", height: "180" })) : null, jsx("div", { children: bonusBenefit?.label ? jsx("span", { className: "text-h6 m-0", children: bonusBenefit.label }) : null })] }, String(i)));
     };
 
-    const addSpacesBetweenNumbers = (number) => new Intl.NumberFormat('ru-RU', { maximumSignificantDigits: 3 }).format(number);
-
     const CalculatorValueBlock = JSX(({ title, value, postfix = '', prefix, className = '' }) => {
         return (jsxs("div", { className: `mb-5 ${className}`, children: [title ? jsx("div", { className: "text-l-light", children: title }) : null, value ? (jsxs("div", { className: "text-h3", children: [prefix, " ", addSpacesBetweenNumbers(Math.round(value)), " ", postfix] })) : null] }));
     });
@@ -2352,22 +2364,6 @@
         return (jsx(BlockWrapper, { tag: "header", context: context, className: `pt-6 pb-5 px-20 ${bgColor} ${className}`, ...rest, children: jsxs("div", { className: "container", children: [jsxs("div", { className: "flex items-center", children: [jsx(Logo, { className: "mr-8", bgColor: bgColor, logo: logo }), topMenu, jsx(HeaderSecondaryMenu, { 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(({ context, className = '', title, description, image, benefits, sum, monthLimit, ...rest }) => {
-        return (jsxs(BlockWrapper, { className: `px-[100px] py-[50px] bg-white text-primary-text font-sans ${className}`, context: context, ...rest, children: [jsx(Headline, { context: context, className: "!p-0", title: title, description: description, headlineVersion: "M", align: "center" }), jsx("div", { children: jsxs("div", { className: "mx-auto flex justify-center gap-[122px] 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, renderInsuranceSumMonth(sum, monthLimit)] })] }) })] }));
-    });
-    function renderBenefit(benefit, i) {
-        return (jsxs("div", { className: "flex items-center gap-4", children: [benefit?.icon ? (jsx(Img, { className: "w-12 h-12 min-w-12 p-3 rounded-full bg-secondary-light", image: benefit.icon, asSVG: true })) : null, jsxs("div", { children: [benefit?.label ? jsx("div", { className: "text-h6", children: benefit.label }) : null, benefit?.description ? (jsx("div", { className: "mt-0.5 text-secondary-text text-m", children: benefit.description })) : null] })] }, String(i)));
-    }
-    function renderInsuranceSumMonth(sum, monthLimit) {
-        return sum || monthLimit ? (jsxs("div", { className: "bg-secondary-light h-15 flex mt-7 gap-6 px-5 py-4", children: [Number.isFinite(sum) ? renderValueBlock$1('Страховая сумма:', sum, Boolean(monthLimit)) : null, Number.isFinite(monthLimit)
-                    ? renderValueBlock$1('Ежемесячный лимит:', monthLimit, Boolean(sum))
-                    : null] })) : null;
-    }
-    function renderValueBlock$1(title, sum = 0, isAnotherBlock = false) {
-        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-l-light", children: title }), jsxs("span", { className: "text-primary-main text-h6", children: [addSpacesBetweenNumbers(sum), " \u20BD"] })] }));
-    }
-
     const InsuranceAmountBlockInner = JSX(({ className = '', cards = [], button }) => {
         const [activeSlideIndex, setActiveSlideIndex] = useState(0);
         const [tabsShift, setTabsShift] = useState(0);
@@ -2521,7 +2517,7 @@
             initialState: isUnfolded,
         });
         const buttonClassName = foldButtonClasses ||
-            'border-none bg-primary-main px-0 py-[26px] mb-[1px] w-full font-sans text-white text-l flex justify-center cursor-pointer';
+            'border-none bg-primary-main hover:bg-primary-hover px-0 py-[26px] mb-[1px] w-full font-sans text-white text-h4 flex justify-center cursor-pointer';
         const getFoldButtonLabel = isActive ? 'Скрыть' : foldButtonLabel;
         return blocks ? (jsxs("div", { children: [renderBlocks(blocks, render, { blocksToHide, isActive, containerClasses }), hiddenBlocksNum ? (jsxs("button", { className: buttonClassName, "data-theme": foldButtonDataTheme, onClick: handleToggle, children: [jsx("span", { className: "pr-3", children: getFoldButtonLabel }), icon ? jsx(Icon, { name: icon, iconVersion: "white", width: "20", height: "20", asSVG: true }) : null] })) : null] })) : null;
     });
@@ -2586,7 +2582,7 @@
         const galleryBlocks = slides.map((s) => s.productBlock);
         const [activeSlideIndex, setActiveSlideIndex] = useState(0);
         return (jsxs(BlockWrapper, { context: context, className: `box-border pt-[50px] overflow-hidden relative font-sans w-100 ${className}
-        ${productGalleryStyleMap[version]}`, ...rest, children: [jsx("div", { className: "flex duration-1000 pb-14", style: { transform: `translateX(-${activeSlideIndex}00%)` }, role: "list", children: galleryBlocks.map((_, i) => renderProductBlock({ ..._, version }, i, context)) }), jsx("div", { className: "flex items-center absolute bottom-6 left-0 right-0 px-[26px] box-border", children: galleryNav.map((slide, i) => renderNavButton({
+        ${productGalleryStyleMap[version]}`, ...rest, children: [jsx("div", { className: "flex duration-1000 pb-14", style: { transform: `translateX(-${activeSlideIndex}00%)` }, role: "list", children: galleryBlocks.map((_, i) => renderProductBlock({ ..._, version }, i, context)) }), jsx("div", { className: "flex items-center absolute bottom-6 left-0 right-0 px-[26px] box-border h-28", children: galleryNav.map((slide, i) => renderNavButton({
                         slide,
                         i,
                         activeSlideIndex,
@@ -2597,13 +2593,13 @@
     function renderProductBlock(block, i, context) {
         const { version } = block;
         const additionalClass = version ? productBlockStyleMap[version].title : '';
-        return (jsx("section", { className: "box-border relative flex grow-0 shrink-0 basis-full", role: "listitem", children: jsx("div", { className: "flex grow", children: jsx(ProductBlockInner, { className: `pl-[50px] z-[1] ${additionalClass}`, context: context, textBlockClassName: "mb-[154px]", ...block }) }) }, String(i)));
+        return (jsx("section", { className: "box-border relative flex grow-0 shrink-0 basis-full", role: "listitem", children: jsx("div", { className: "flex grow", children: jsx(ProductBlockInner, { className: `pl-[50px] z-[1] ${additionalClass}`, context: context, textBlockClassName: "mb-[154px]", ...block, headlineVersion: "XXL" }) }) }, String(i)));
     }
     function renderNavButton({ slide, i, activeSlideIndex, onClick, version }) {
         const isActiveBtn = i === activeSlideIndex;
         const btnClassName = isActiveBtn
-            ? 'bg-white shadow-dark-blue/42 h-[102px] w-[354px] min-w-[354px] p-0 border-none'
-            : `min-w-[277px] px-0 pt-4 pb-[23px] hover:py-[26px] hover:py-[26px] ease-in duration-300 bg-white/10
+            ? 'bg-white shadow-dark-blue/42 w-[354px] min-w-[354px] border-none'
+            : `min-w-[277px] hover:py-[26px] hover:py-[26px] ease-in duration-300 bg-white/10
       ${productSlideStyleMap[version]}`;
         const btnTitleClassName = isActiveBtn
             ? 'text-primary-text text-h6'
@@ -2612,7 +2608,7 @@
             ? 'text-secondary-text text-m-title-xs mt-2.5'
             : `text-m mt-1.5 ${productBlockStyleMap[version].text}`;
         const additionalBorder = version === 'secondary' ? 'border-white/50' : 'border-black/50';
-        return (jsx("button", { type: "button", onClick: onClick, "aria-label": slide?.title, className: `box-border font-sans relative overflow-hidden border border-white/50 cursor-pointer text-left mx-1 grow basis-0
+        return (jsx("button", { type: "button", onClick: onClick, "aria-label": slide?.title, className: `box-border font-sans relative overflow-hidden border border-white/50 cursor-pointer text-left mx-1 grow basis-0 pt-5 pb-[23px]
         ${btnClassName} ${additionalBorder}
       `, children: jsxs("div", { className: "border-0 px-6", children: [jsx("div", { className: `font-medium ${btnTitleClassName}`, children: slide?.title }), jsx("div", { className: `text-secondary-text ${btnDescClassName}`, children: slide.description })] }) }, String(i)));
     }
@@ -2622,7 +2618,7 @@
         secondary: 'bg-primary-main text-white',
     };
     const PromoTile = JSX(({ className = '', context, title = 'Акции и спецпредложения', date, description, buttons = [], version = 'primary', ...rest }) => {
-        return (jsx(BlockWrapper, { context: context, className: `bg-white text-primary-text font-sans p-9 box-border ${className} ${promoTileStyleMap[version]} ${getTileRightPadding(className)} ${getTileMinHeight(className)} `, ...rest, children: jsx(BaseTile, { context: context, title: title ? (jsx("div", { children: jsx(Headline, { context: context, title: title, className: `!p-0 max-w-[600px]`, headlineVersion: getTileHeadingType(className), bgColorHeadline: version, align: "left", as: "h2" }) })) : null, buttons: buttons?.length ? (jsx(ButtonSection, { context: context, buttons: buttons, className: "flex mt-9 gap-3" })) : null, children: jsxs("div", { className: "mt-1.5", children: [date ? jsx("div", { className: "text-s mb-2", children: formatDate(date) }) : null, jsx("div", { className: "text-l", children: description })] }) }) }));
+        return (jsx(BlockWrapper, { context: context, className: `bg-white text-primary-text font-sans p-9 box-border ${className} ${promoTileStyleMap[version]} ${getTileRightPadding(className)} ${getTileMinHeight(className)} `, ...rest, children: jsx(BaseTile, { context: context, title: title ? (jsx("div", { children: jsx(Headline, { context: context, title: title, className: `!p-0 max-w-[600px]`, headlineVersion: getTileHeadingType(className), bgColorHeadline: version, align: "left", as: "h2" }) })) : null, buttons: buttons?.length ? (jsx(ButtonSection, { context: context, buttons: buttons, className: "flex gap-3" })) : null, children: jsxs("div", { className: "mt-1.5", children: [date ? jsx("div", { className: "text-s mb-2", children: formatDate(date) }) : null, jsx("div", { className: "text-l", children: description })] }) }) }));
     });
     function formatDate(date) {
         const dateObj = new Date(date);
@@ -2961,7 +2957,6 @@
         GracePeriod,
         Header,
         Headline,
-        Insurance,
         InsuranceAmountBlock,
         LinkDocs,
         MiniGallery,