@redneckz/wildless-cms-uni-blocks 0.3.61 → 0.3.62

package/bundle/bundle.umd.js

@@ -465,7 +465,7 @@
 
   const Headline = JSX(({ bgColorHeadline = 'transparent', align = 'left', className = '', title, description, anchor = null, }) => {
       const STYLE_MAPS = HEADLINE_BLOCK_STYLE_MAPS[bgColorHeadline];
-      return (jsxs("section", { className: `p-[50px] ${STYLE_MAPS.background} ${className}`, id: anchor, children: [title && (jsx(Heading, { headingType: "h2", className: `text-primary-text ${STYLE_MAPS.text} ${ALIGN_TEXT[align]}`, title: title })), description && (jsx("p", { className: `font-normal text-base mt-4 ${STYLE_MAPS.text} ${ALIGN_TEXT[align]}`, children: description }))] }));
+      return (jsxs("section", { className: `p-[50px] ${STYLE_MAPS.background} ${className}`, id: anchor, children: [title ? (jsx(Heading, { headingType: "h2", className: `text-primary-text ${STYLE_MAPS.text} ${ALIGN_TEXT[align]}`, title: title })) : null, description ? (jsx("p", { className: `font-normal text-base mt-4 ${STYLE_MAPS.text} ${ALIGN_TEXT[align]}`, children: description })) : null] }));
   });
 
   const LinkDocsListItemBase = JSX(({ className, iconClassName, textClassName, suffixClassName, doc, icon }) => {
@@ -725,10 +725,10 @@
 
   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$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 })] }));
+      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 })) : null, 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]" })));
+      return title ? (jsx(Heading, { headingType: headingType, title: title, className: "whitespace-pre-wrap max-w-[600px]" })) : null;
   };
   const getButtons = (context, buttons) => {
       return buttons?.length ? (jsx(ButtonSection, { context: context, buttons: buttons, className: "flex mt-9 gap-4" })) : null;
@@ -775,7 +775,7 @@
   };
   const TextBlock = JSX(({ title, description, blockVersion = 'primary', iconVersion, image, className, anchor = null, }) => {
       const textBlockStyleMap = textBlockStyleMaps[blockVersion];
-      return (jsxs("section", { className: `font-sans px-9 py-4 flex ${textBlockStyleMap.background} ${className || ''}`, id: anchor, children: [iconVersion === 'small' ? renderIcon$1(textBlockStyleMap.icon) : null, iconVersion === 'big' ? renderImage(image) : null, jsxs("div", { className: "py-0.5", children: [title && (jsx("div", { className: `font-medium text-base mb-1 ${textBlockStyleMap.title}`, children: title })), description && (jsx("div", { className: `text-sm ${textBlockStyleMap.description}`, children: description }))] })] }));
+      return (jsxs("section", { className: `font-sans px-9 py-4 flex ${textBlockStyleMap.background} ${className || ''}`, id: anchor, children: [iconVersion === 'small' ? renderIcon$1(textBlockStyleMap.icon) : null, iconVersion === 'big' ? renderImage(image) : null, jsxs("div", { className: "py-0.5", children: [title ? (jsx("div", { className: `font-medium text-base mb-1 ${textBlockStyleMap.title}`, children: title })) : null, description ? (jsx("div", { className: `text-sm ${textBlockStyleMap.description}`, children: description })) : null] })] }));
   });
   function renderIcon$1(className) {
       return (jsx("div", { className: "pt-1.5 pl-1 pr-4", children: jsx("div", { className: `rounded-full h-4 w-4 text-center text-xs ${className}`, children: "i" }) }));
@@ -822,8 +822,8 @@
   };
   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.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)] }) }));
+      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' : ''}` })) : null, 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 })) : null, 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;
@@ -834,7 +834,7 @@
       secondary: 'bg-primary-main text-white',
   };
   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
+      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]` })) : null, 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] }) }));
   });
@@ -915,7 +915,7 @@
       const showNextButton = isGalleryScrollAvailable &&
           cards?.length - activeCardIndex > galleryLengthForScrollMap[version];
       const showPrevButton = isGalleryScrollAvailable && activeCardIndex > 0;
-      return (jsxs("section", { className: `relative font-sans text-primary-text bg-white p-[42px] overflow-hidden ${className}`, id: anchor, children: [jsx(GalleryContainer, { context: context, cards: cards, version: version, activeCardIndex: activeCardIndex, ...rest }), showPrevButton && (jsx(ArrowButton, { className: "absolute top-1/2 left-8 z-10 mt-[25px]", onClick: handlePrevClick, ariaLabel: "\u041F\u0440\u043E\u043B\u0438\u0441\u0442\u0430\u0442\u044C \u0432\u043B\u0435\u0432\u043E", "data-block-control": "scroll-left" })), showNextButton && (jsx(ArrowButton, { className: "absolute top-1/2 right-8 z-10 mt-[25px] 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 left-0 bottom-0 w-[84px] bg-opacity-from-white" }), jsx("div", { className: "absolute top-0 right-0 bottom-0 w-[100px] bg-opacity-to-white" })] }));
+      return (jsxs("section", { className: `relative font-sans text-primary-text bg-white p-[42px] overflow-hidden ${className}`, id: anchor, children: [jsx(GalleryContainer, { context: context, cards: cards, version: version, activeCardIndex: activeCardIndex, ...rest }), showPrevButton ? (jsx(ArrowButton, { className: "absolute top-1/2 left-8 z-10 mt-[25px]", 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: "absolute top-1/2 right-8 z-10 mt-[25px] 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: "absolute top-0 left-0 bottom-0 w-[84px] bg-opacity-from-white" }), jsx("div", { className: "absolute top-0 right-0 bottom-0 w-[100px] bg-opacity-to-white" })] }));
   });
 
   const Gallery = JSX((props) => jsx(GalleryInner, { ...props, version: "normal" }));
@@ -1036,7 +1036,7 @@
       const cellClasses = `mx-7 h-full ${DIVIDER_CLASSES$1} ${isFillGradient && isFirstRow ? 'border-t' : ''} ${!isLastRow ? 'border-solid' : 'border-b-0'}`;
       return (jsx("div", { className: cellWrapperClasses, role: "cell", children: jsx("div", { className: cellClasses, children: cell.map((item, i) => renderCellInner$1(item, i, isFillGradient)) }) }));
   });
-  const renderCellInner$1 = ({ label, description }, i, isFillGradient) => (jsxs("div", { className: "first:pt-7 pt-6 last:pb-7", children: [label && (jsx("h4", { className: `text-xl font-medium m-0 ${isFillGradient ? 'text-white' : ''}`, children: label })), description && (jsx("div", { className: `text-sm opacity-80 ${isFillGradient ? 'text-white' : 'text-secondary-text'}`, children: description }))] }, String(i)));
+  const renderCellInner$1 = ({ label, description }, i, isFillGradient) => (jsxs("div", { className: "first:pt-7 pt-6 last:pb-7", children: [label ? (jsx("h4", { className: `text-xl font-medium m-0 ${isFillGradient ? 'text-white' : ''}`, children: label })) : null, description ? (jsx("div", { className: `text-sm opacity-80 ${isFillGradient ? 'text-white' : 'text-secondary-text'}`, children: description })) : null] }, String(i)));
 
   const TableRow = JSX(({ row: { header, data }, activeCardIndex, isColoredFirstColumn, isFirstRow, isLastRow }) => (jsxs(TableRowContainer, { children: [header?.title ? (jsx("div", { className: `text-sm py-7 ${DIVIDER_CLASSES$1} ${FIRST_CELL_CLASSES$1} ${!isLastRow ? 'border-solid' : 'border-b-0'}`, children: header.title })) : null, data?.length ? (jsx(TableCarouselContainer, { activeCardIndex: activeCardIndex, columnWidth: COLUMN_WIDTH$1, children: data.map((cell, i) => (jsx(TableCell, { cell: cell, isFirstRow: isFirstRow, isLastRow: isLastRow, isFillGradient: isColoredFirstColumn && i === 0 }, String(i)))) })) : null] })));
 
@@ -1717,7 +1717,7 @@
 
   const SearchBar = JSX(({ className, context }) => {
       const { term, setTerm } = context.useSearch();
-      return (jsxs("form", { className: `relative ${className || ''}`, children: [jsxs("div", { className: "absolute rounded h-full flex items-center justify-center pl-4 max-w-[170px] gap-3.5 pointer-events-none", children: [jsx("div", { className: "w-[24px] h-[24px]", children: jsx(Img, { image: "LoupeIcon", width: "24", height: "24" }) }), !term && (jsx("label", { htmlFor: "search-bar-input", className: "font-sans font-light text-base text-secondary-text", children: "\u041F\u043E\u0438\u0441\u043A \u043F\u043E \u0441\u0430\u0439\u0442\u0443" }))] }), jsx("input", { id: "search-bar-input", className: 'h-12 pl-12 w-full peer font-sans font-light text-base text-black border border-solid rounded h-full box-border outline-none pr-[6%] border-main-divider focus:border-primary-text', value: term, onChange: (e) => setTerm(e.target.value), type: "text", name: "search-bar-input" }), jsx(Button, { version: "primary", text: "\u041D\u0430\u0439\u0442\u0438", className: "invisible peer-focus:visible absolute top-1 right-1", onClick: (e) => {
+      return (jsxs("form", { className: `relative ${className || ''}`, children: [jsxs("div", { className: "absolute rounded h-full flex items-center justify-center pl-4 max-w-[170px] gap-3.5 pointer-events-none", children: [jsx("div", { className: "w-[24px] h-[24px]", children: jsx(Img, { image: "LoupeIcon", width: "24", height: "24" }) }), term ? null : (jsx("label", { htmlFor: "search-bar-input", className: "font-sans font-light text-base text-secondary-text", children: "\u041F\u043E\u0438\u0441\u043A \u043F\u043E \u0441\u0430\u0439\u0442\u0443" }))] }), jsx("input", { id: "search-bar-input", className: 'h-12 pl-12 w-full peer font-sans font-light text-base text-black border border-solid rounded h-full box-border outline-none pr-[6%] border-main-divider focus:border-primary-text', value: term, onChange: (e) => setTerm(e.target.value), type: "text", name: "search-bar-input" }), jsx(Button, { version: "primary", text: "\u041D\u0430\u0439\u0442\u0438", className: "invisible peer-focus:visible absolute top-1 right-1", onClick: (e) => {
                       e.preventDefault();
                       console.log('click');
                   }, children: jsx("div", { className: "font-normal text-sm px-9 py-[9px]", children: "\u041D\u0430\u0439\u0442\u0438" }) })] }));
@@ -2047,7 +2047,7 @@
   }
 
   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" })] }) }) }));
+      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" })] }) }) }));
   });
 
   const NavigationItem = JSX(({ className, text, onClick, href, target, isActive }) => (jsx("a", { className: `bg-inherit no-underline px-4 py-2.5 cursor-pointer rounded text-sm border border-solid hover:text-primary-main ${className || ''} ${isActive ? 'border-primary-main text-primary-main' : 'border-white text-secondary-text'}`, onClick: onClick, href: href, target: target, children: text })));
@@ -2224,7 +2224,7 @@
       const isUseSlider = cardsCount > CARD_FULL_VIEW_COUNT;
       const showNextButton = isUseSlider && cardsCount - activeCardIndex > CARD_FULL_VIEW_COUNT;
       const showPrevButton = isUseSlider && activeCardIndex > 0;
-      return (jsxs("div", { children: [showPrevButton && (jsx(ArrowButton, { className: "absolute top-1/2 left-8 z-10 mt-6", onClick: handlePrevClick, ariaLabel: "\u041F\u0440\u043E\u043B\u0438\u0441\u0442\u0430\u0442\u044C \u0432\u043B\u0435\u0432\u043E" })), showNextButton && (jsx(ArrowButton, { className: "absolute top-1/2 right-8 z-10 mt-6 rotate-180", onClick: handleNextClick, ariaLabel: "\u041F\u0440\u043E\u043B\u0438\u0441\u0442\u0430\u0442\u044C \u0432\u043F\u0440\u0430\u0432\u043E" }))] }));
+      return (jsxs("div", { children: [showPrevButton ? (jsx(ArrowButton, { className: "absolute top-1/2 left-8 z-10 mt-6", onClick: handlePrevClick, ariaLabel: "\u041F\u0440\u043E\u043B\u0438\u0441\u0442\u0430\u0442\u044C \u0432\u043B\u0435\u0432\u043E" })) : null, showNextButton ? (jsx(ArrowButton, { className: "absolute top-1/2 right-8 z-10 mt-6 rotate-180", onClick: handleNextClick, ariaLabel: "\u041F\u0440\u043E\u043B\u0438\u0441\u0442\u0430\u0442\u044C \u0432\u043F\u0440\u0430\u0432\u043E" })) : null] }));
   };
 
   const StepsBlock = JSX(({ className = '', title, showLines = true, steps = [], button, anchor = null }) => {
@@ -2407,7 +2407,7 @@
               const sectionsWithAnchors = globalThis.document.querySelectorAll('section[id]');
               globalThis.document.addEventListener('scroll', () => changeHashOnScroll(router, sectionsWithAnchors));
           });
-      return (jsxs("section", { className: `relative ${style2className(pageStyle)} ${className}`, "data-theme": colorPalette, children: [header?.blocks?.length ? (jsx("div", { className: `${style2className(header?.style)}`, children: header.blocks.map((block, i) => renderBlock({ block, blockDecorator, blocksRegistry, context }, i)) })) : null, blocks?.length ? (jsx("div", { className: "container grid grid-cols-12 gap-1", children: blocks.map((block, i) => renderBlock({ block, blockDecorator, blocksRegistry, context }, i)) })) : null, likeControl && (jsx("div", { className: "flex items-end absolute bottom-0 right-0 h-full pointer-events-none", children: jsx(LikeControl, { className: "rounded-tl-lg sticky bottom-0 pointer-events-auto", context: context }, "LikeControl") }))] }));
+      return (jsxs("section", { className: `relative ${style2className(pageStyle)} ${className}`, "data-theme": colorPalette, children: [header?.blocks?.length ? (jsx("div", { className: `${style2className(header?.style)}`, children: header.blocks.map((block, i) => renderBlock({ block, blockDecorator, blocksRegistry, context }, i)) })) : null, blocks?.length ? (jsx("div", { className: "container grid grid-cols-12 gap-1", children: blocks.map((block, i) => renderBlock({ block, blockDecorator, blocksRegistry, context }, i)) })) : null, likeControl ? (jsx("div", { className: "flex items-end absolute bottom-0 right-0 h-full pointer-events-none", children: jsx(LikeControl, { className: "rounded-tl-lg sticky bottom-0 pointer-events-auto", context: context }, "LikeControl") })) : null] }));
   });
   function renderBlock({ block, blockDecorator, blocksRegistry, context }, i) {
       const { type } = block;