@redneckz/wildless-cms-uni-blocks 0.14.63 → 0.14.64

package/bundle/bundle.umd.js

@@ -646,7 +646,7 @@
         center: '@xl:self-center',
         end: '@xl:self-end',
     };
-    const BaseTile = JSX(({ className, version = 'primary', defaultPadding, padding, title = '', insetTitle = '', buttons, leftImage, rightImage, imageAlign, isImageAlwaysOnRight = false, isImageSecondary = false, backwardButton, children, }) => {
+    const BaseTile = JSX(({ className, version = 'primary', defaultPadding, padding = '', title = '', insetTitle = '', buttons, leftImage, rightImage, imageAlign, isImageAlwaysOnRight = false, isImageSecondary = false, backwardButton, children, }) => {
         const router = useRouter();
         const handleClick = useCallback((ev) => {
             ev?.preventDefault();
@@ -726,27 +726,29 @@
     };
     const renderButtonIcon = (icon) => isIcon(icon) ? (jsx(Img, { image: icon, width: String(icon?.size?.width || DEFAULT_ICON_W), height: String(DEFAULT_ICON_W) })) : null;
 
-    const DOT_SIZE_MAP = {
-        L: 'w-1.5 h-1.5 mr-m',
-        M: 'w-1.5 h-1.5 mr-s',
-        S: 'w-1 h-1 mr-xs',
-        XS: 'w-1 h-1 mr-xs',
-    };
-    const ListItem = JSX(({ className, isDotted, children, size = 'M' }) => (jsxs("div", { className: style('font-sans flex', className), role: "listitem", children: [isDotted ? (jsx("div", { className: "shrink-0", children: jsx("div", { className: style('align-middle inline-block rounded-full bg-primary-text group-data-secondary:bg-white', DOT_SIZE_MAP[size]) }) })) : null, jsx("span", { children: children })] })));
+    const ListItem = JSX(({ className, isDotted, dotClassName, children }) => (jsxs("div", { className: style('font-sans flex', className), role: "listitem", children: [isDotted ? (jsx("div", { className: "shrink-0", children: jsx("div", { className: style('align-middle inline-block rounded-full bg-primary-text group-data-secondary:bg-white', dotClassName) }) })) : null, jsx("span", { children: children })] })));
 
-    const TEXT_SIZE_MAP = {
-        XS: 'text-m font-light',
-        S: 'text-l font-light',
-        M: 'text-h6',
-        L: 'text-h5',
-    };
-    const ITEM_INDENT_MAP = {
-        XS: 'ml-2xs',
-        S: 'ml-xs',
-        M: 'ml-s',
-        L: 'ml-m',
+    const LIST_VERSION_STYLE = {
+        S: {
+            textSize: 'text-l font-light',
+            indentStyle: 'ml-xs',
+            dotStyle: 'w-1 h-1 mr-xs',
+        },
+        M: {
+            textSize: 'text-h6',
+            indentStyle: 'ml-s',
+            dotStyle: 'w-1.5 h-1.5 mr-s',
+        },
+        L: {
+            textSize: 'text-h5',
+            indentStyle: 'ml-m',
+            dotStyle: 'w-1.5 h-1.5 mr-m',
+        },
     };
-    const List = JSX(({ className, hasIndent, isDotted = true, items = [], listItemSize = 'M' }) => items?.length ? (jsx("section", { className: style('flex flex-col gap-xs text-left text-primary-text group-data-secondary:text-white group-data-gray:text-secondary-text', TEXT_SIZE_MAP[listItemSize], hasIndent ? ITEM_INDENT_MAP[listItemSize] : '', className), role: "list", children: items.map((item, i) => (jsx(ListItem, { isDotted: isDotted, size: listItemSize, children: item }, String(i)))) })) : null);
+    const List = JSX(({ className, isDotted = true, items = [], listItemSize = 'M' }) => {
+        const versionStyle = LIST_VERSION_STYLE[listItemSize];
+        return items?.length ? (jsx("section", { className: style('flex flex-col gap-xs text-left text-primary-text group-data-secondary:text-white group-data-gray:text-secondary-text', versionStyle.textSize, className), role: "list", children: items.map((item, i) => (jsx(ListItem, { isDotted: isDotted, dotClassName: versionStyle.dotStyle, children: item }, String(i)))) })) : null;
+    });
 
     const toLocalNumberFormat = (fractionDigits = 0) => (_ = 0) => new Intl.NumberFormat('ru-RU', {
         minimumFractionDigits: 0,
@@ -759,13 +761,21 @@
     const Tags = JSX(({ className, tags }) => tags?.length ? (jsx("div", { className: style('flex flex-wrap gap-xs', className), role: "list", children: tags.map(renderTag) })) : null);
     const renderTag = (tag, key) => (jsx("div", { className: "p-xs border-solid border rounded-md border-gray", role: "listitem", children: jsx(Text, { size: "text-m", font: "font-light", children: tag }) }, String(key)));
 
+    const LIST_SIZE = {
+        XXL: 'L',
+        XL: 'L',
+        L: 'M',
+        M: 'M',
+        S: 'S',
+        XS: 'S',
+    };
     const BaseProductTile = JSX(
     // eslint-disable-next-line max-lines-per-function
-    ({ className, padding, defaultPadding, title, description, headlineVersion = 'L', align = 'text-left', benefitsVersion, isTabularBenefits, benefits, __html, isFullWidthTitle, items, isDotted = true, priceList = [], listItemSize, tags = [], buttons, image, imageOptions: { imageAlign = 'center', directionRight = true, isImageAlwaysOnRight, isImageSecondary = false, } = {}, backwardButton, children, ...rest }) => {
+    ({ className, padding, defaultPadding, title, description, headlineVersion = 'L', align = 'text-left', benefitsVersion, isTabularBenefits, benefits, __html, isFullWidthTitle, items, isDotted = true, priceList = [], tags = [], buttons, image, imageOptions: { imageAlign = 'center', directionRight = true, isImageAlwaysOnRight, isImageSecondary = false, } = {}, backwardButton, children, ...rest }) => {
         const img = image?.src ? jsx(Img, { image: image }) : null;
         const headline = (jsx(Headline, { title: title, description: description, headlineVersion: headlineVersion, align: align, isEmbedded: true }));
         const filteredBenefits = benefits?.filter((_) => _?.type === 'rte' || 'label' in _ || 'description' in _);
-        return (jsx(BaseTile, { className: className, padding: padding, defaultPadding: defaultPadding, ...(isFullWidthTitle ? { title: headline } : { insetTitle: headline }), ...leftOrRightImage(img, directionRight), isImageSecondary: isImageSecondary, imageAlign: imageAlign, isImageAlwaysOnRight: isImageAlwaysOnRight, buttons: renderButtonsSection(buttons), backwardButton: backwardButton, ...rest, children: jsxs("div", { className: "flex flex-col sm:gap-xl gap-4xl", children: [filteredBenefits?.length ? (jsx(BenefitsList, { benefitsVersion: benefitsVersion, isTabularBenefits: isTabularBenefits, benefits: filteredBenefits })) : null, __html ? jsx(RichText, { __html: __html }) : null, items?.length ? (jsx(List, { items: items, isDotted: isDotted, listItemSize: listItemSize })) : null, children, priceList?.length ? jsx(PriceList, { priceList: priceList }) : null, renderTags(tags)] }) }));
+        return (jsx(BaseTile, { className: className, padding: padding, defaultPadding: defaultPadding, ...(isFullWidthTitle ? { title: headline } : { insetTitle: headline }), ...leftOrRightImage(img, directionRight), isImageSecondary: isImageSecondary, imageAlign: imageAlign, isImageAlwaysOnRight: isImageAlwaysOnRight, buttons: renderButtonsSection(buttons), backwardButton: backwardButton, ...rest, children: jsxs("div", { className: "flex flex-col sm:gap-xl gap-4xl", children: [filteredBenefits?.length ? (jsx(BenefitsList, { benefitsVersion: benefitsVersion, isTabularBenefits: isTabularBenefits, benefits: filteredBenefits })) : null, __html ? jsx(RichText, { __html: __html }) : null, items?.length ? (jsx(List, { items: items, isDotted: isDotted, listItemSize: LIST_SIZE[headlineVersion] })) : null, children, priceList?.length ? jsx(PriceList, { priceList: priceList }) : null, renderTags(tags)] }) }));
     });
     const leftOrRightImage = (img, directionRight) => directionRight ? { rightImage: img } : { leftImage: img };
     const renderTags = (tags) => (tags?.length ? jsx(Tags, { tags: tags }) : null);
@@ -1755,18 +1765,7 @@
     const defaultIconSize = 44;
 
     const BenefitsBlock = JSX(({ className = '', title, benefitList, ...rest }) => (jsxs(BlockWrapper, { className: className, defaultPadding: "p-6xl", ...rest, children: [title ? jsx(Heading, { headingType: "h3", as: "h2", className: AlignStyles, title: title }) : null, benefitList?.length ? (jsx("div", { className: "flex flex-col @md:flex-row flex-wrap w-full @md:justify-center mt-xl gap-5xl", role: "list", children: benefitList.map(renderBenefit) })) : null] })));
-    const renderBenefit = (benefit, i) => (jsxs("div", { className: "flex gap-m items-center @md:basis-1/2 @md:max-w-[500px]", role: "listitem", children: [benefit?.icon?.icon ? (jsx(RoundedIcon, { className: "shrink-0", defaultIconSize: defaultIconSize, iconBgVersion: benefit?.iconBgVersion || '', ...benefit?.icon })) : null, benefit?.icon?.src ? jsx(Img, { className: "shrink-0", image: benefit.icon }) : null, benefit?.label ? (jsxs("div", { className: "@sm:h-full", children: [jsx(Heading, { headingType: "h6", children: benefit.label }), renderDescription$1(benefit.description)] })) : null] }, String(i)));
-    const renderDescription$1 = (description) => {
-        const benefitType = description?.benefitType || null;
-        return description && benefitType ? (jsx("div", { className: "mt-xs text-l font-light text-secondary-text group-data-secondary:text-white/80", children: benefitType === 'list'
-                ? renderListBenefit(description)
-                : renderTextBenefit(description) })) : null;
-    };
-    const renderTextBenefit = (description) => description?.name ? (jsx(Text, { size: "text-l", color: "text-secondary-text group-data-secondary:text-white/80", font: "font-light", children: description.name })) : null;
-    const renderListBenefit = (description) => {
-        const listStyleType = description?.bullets ? 'list-disc pl-3xl' : '';
-        return description?.items && description.items.length > 0 ? (jsx("ul", { className: style(listStyleType, description.listItemSize ? TEXT_SIZE_MAP[description.listItemSize] : ''), children: description.items.map((_, i) => (jsx("li", { children: jsx(Text, { color: "text-secondary-text group-data-secondary:text-white/80", font: "font-light", children: _ }) }, `benefitListItem-${i}`))) })) : null;
-    };
+    const renderBenefit = ({ label, description, items, icon, iconBgVersion, isDotted = false }, i) => (jsxs("div", { className: "flex gap-m items-center @md:basis-1/2 @md:max-w-[500px]", role: "listitem", children: [icon?.icon ? (jsx(RoundedIcon, { className: "shrink-0", defaultIconSize: defaultIconSize, iconBgVersion: iconBgVersion || '', ...icon })) : null, icon?.src ? jsx(Img, { className: "shrink-0", image: icon }) : null, label ? (jsxs("div", { className: "@sm:h-full space-y-xs", children: [jsx(Heading, { headingType: "h6", children: label }), jsx(Text, { size: "text-l", color: "text-secondary-text group-data-secondary:text-white/80", font: "font-light", children: description }), jsx(List, { className: "text-secondary-text", listItemSize: "S", items: items, isDotted: isDotted })] })) : null] }, String(i)));
 
     const Bonus = JSX(({ className = '', title, description, bonusItems = [], align = AlignStyles, ...rest }) => (jsx(BlockWrapper, { className: className, defaultPadding: "p-6xl", ...rest, children: jsxs("div", { className: "container", children: [jsx(Headline, { className: "mb-xl", isEmbedded: true, title: title, description: description, headlineVersion: "M", align: align }), jsx("div", { className: "flex flex-wrap gap-3xl gap-x-m w-full", children: bonusItems.length > 0
                         ? bonusItems.map((_, i) => (jsxs("div", { className: "w-full @xl:w-[48%] sm:space-y-xs flex flex-col grow p-xl sm:p-m border border-gray", children: [jsx("div", { className: "grow", children: jsx(Headline, { title: _?.title, description: _?.description, headlineVersion: "S", isEmbedded: true, align: "text-left" }) }), jsxs("div", { className: "flex justify-center sm:justify-between sm:items-end", children: [jsx("div", { className: "hidden sm:block", children: renderButtonsSection(_?.buttons) }), _.bonusItemContent?.bonusType
@@ -3085,8 +3084,8 @@
     const ImageAlwaysOnRight = true;
 
     //TODO: replace SocialMedia with renderButtonSection
-    const CarouselRecommendationCard = JSX(({ className, padding, description, additionalDescription, href, icon, items = [], isDotted, listItemSize = 'S', socialMedia = [], target, title, align = 'text-left', benefits, imageOptions: { directionRight = true, isImageAlwaysOnRight = ImageAlwaysOnRight, isImageSecondary = false, } = {}, ...rest }) => {
-        return (jsx(BlockWrapper, { className: style('relative min-h-28 group-data-gray:bg-main-divider/50', className), defaultPadding: "p-0", ...rest, children: jsx(LinkWrapper, { href: href, target: target, className: "h-full", children: jsxs(BaseTile, { className: "h-full", defaultPadding: "p-2xl", padding: padding, insetTitle: jsx(Headline, { title: title, description: description, headlineVersion: "XS", isEmbedded: true, align: align }), ...leftOrRightImage(isIcon(icon) ? jsx(Img, { image: icon }) : null, directionRight), buttons: socialMedia.length ? (jsx(SocialMedia, { media: socialMedia, showButtonText: true, version: rest?.version })) : null, isImageAlwaysOnRight: isImageAlwaysOnRight, isImageSecondary: isImageSecondary, imageAlign: "center", children: [jsx(BenefitsList, { benefits: benefits }), jsx(List, { items: items, listItemSize: listItemSize, isDotted: isDotted }), renderAdditionalDescription(additionalDescription, align)] }) }) }));
+    const CarouselRecommendationCard = JSX(({ className, padding, description, additionalDescription, href, icon, items = [], isDotted, socialMedia = [], target, title, align = 'text-left', benefits, imageOptions: { directionRight = true, isImageAlwaysOnRight = ImageAlwaysOnRight, isImageSecondary = false, } = {}, ...rest }) => {
+        return (jsx(BlockWrapper, { className: style('relative min-h-28 group-data-gray:bg-main-divider/50', className), defaultPadding: "p-0", ...rest, children: jsx(LinkWrapper, { href: href, target: target, className: "h-full", children: jsxs(BaseTile, { className: "h-full", defaultPadding: "p-2xl", padding: padding, insetTitle: jsx(Headline, { title: title, description: description, headlineVersion: "XS", isEmbedded: true, align: align }), ...leftOrRightImage(isIcon(icon) ? jsx(Img, { image: icon }) : null, directionRight), buttons: socialMedia.length ? (jsx(SocialMedia, { media: socialMedia, showButtonText: true, version: rest?.version })) : null, isImageAlwaysOnRight: isImageAlwaysOnRight, isImageSecondary: isImageSecondary, imageAlign: "center", children: [jsx(BenefitsList, { benefits: benefits }), jsx(List, { items: items, isDotted: isDotted, listItemSize: "S" }), renderAdditionalDescription(additionalDescription, align)] }) }) }));
     });
     const renderAdditionalDescription = (additionalDescription, align) => additionalDescription ? (jsx(Paragraph, { size: "text-m", font: "font-light", color: "text-secondary-text group-data-secondary:text-white/80", align: align, children: additionalDescription })) : null;
 
@@ -4430,14 +4429,10 @@
         return (jsx("div", { role: "listitem", children: jsx(LinkDocItem, { text: docBlockDef?.text, target: docBlockDef?.target, href: href, fileFormat: fileFormat, fileSize: fileSize, icon: icon ? jsx(Img, { className: linkIconStyle, image: icon, width: "24", height: "24" }) : null }) }, String(i)));
     };
 
-    const renderList$1 = (items, listItemSize, additionalDescription) => {
-        return items?.length ? (jsx(List, { items: items, listItemSize: listItemSize, className: "text-l font-light" })) : (jsx(Text, { size: "text-m", "font-weight": "font-light", color: "text-secondary-text", children: additionalDescription }));
-    };
-
-    const MobileAppTile = JSX(({ className, padding, align = 'text-left', buttons = [], description, headingType = 'h4', image, items, listItemSize, qr, additionalDescription = '', title = 'Мобильное приложение', version = 'primary', ...rest }) => {
+    const MobileAppTile = JSX(({ className, padding, align = 'text-left', buttons = [], description, image, items, qr, additionalDescription = '', title = 'Мобильное приложение', version = 'primary', ...rest }) => {
         const containerStyle = version === 'secondary' ? 'p-m min-w-32' : 'min-w-24';
         const img = image?.src ? jsx(Img, { className: "hidden lg:block", image: image }) : null;
-        return (jsx(BlockWrapper, { className: style('min-h-80', className), padding: "p-0", version: version, ...rest, children: jsxs(BaseTile, { className: "h-full", padding: padding, defaultPadding: "p-6xl", title: title ? (jsx(Heading, { headingType: headingType, title: title, className: style('whitespace-pre-wrap', align) })) : null, rightImage: img, buttons: renderButtonsSection(buttons, { className: 'flex-wrap' }), children: [description ? (jsx(Text, { size: "text-xl", "font-weight": "font-light", children: description })) : null, jsxs("div", { className: style('gap-m', 'flex flex-1 flex-col', 'flex-col items-start @xl:flex-row @xl:items-center'), children: [renderList$1(items, listItemSize, additionalDescription), qr?.src ? (jsx("div", { className: style('flex justify-center bg-white rounded-md @xl:-order-1', containerStyle), children: jsx(Img, { className: "w-fit", image: qr }) })) : null, image?.src ? jsx(Img, { className: "lg:hidden", image: image }) : null] })] }) }));
+        return (jsx(BlockWrapper, { className: style('min-h-80', className), padding: "p-0", version: version, ...rest, children: jsxs(BaseTile, { className: "h-full", padding: padding, defaultPadding: "p-6xl", title: jsx(Heading, { headingType: "h3", title: title, className: style('whitespace-pre-wrap', align) }), rightImage: img, buttons: renderButtonsSection(buttons, { className: 'flex-wrap' }), children: [description ? (jsx(Text, { size: "text-xl", "font-weight": "font-light", children: description })) : null, jsxs("div", { className: style('gap-m', 'flex flex-1 flex-col', 'flex-col items-start @xl:flex-row @xl:items-center'), children: [jsx(List, { items: items, listItemSize: "M" }), jsx(Text, { size: "text-m", "font-weight": "font-light", color: "text-secondary-text", children: additionalDescription }), qr?.src ? (jsx("div", { className: style('flex justify-center bg-white rounded-md @xl:-order-1', containerStyle), children: jsx(Img, { className: "w-fit", image: qr }) })) : null, image?.src ? jsx(Img, { className: "lg:hidden", image: image }) : null] })] }) }));
     });
 
     const badgeBgStyleMap = {
@@ -5801,7 +5796,7 @@
         return (jsx("div", { className: "flex items-end absolute bottom-0 right-0 h-full pointer-events-none", children: jsx(LikeControl, { className: "rounded-tl-3xl sticky bottom-0 pointer-events-auto" }) }));
     }
 
-    const packageVersion = "0.14.62";
+    const packageVersion = "0.14.63";
 
     exports.Blocks = Blocks;
     exports.ContentPage = ContentPage;