@redneckz/wildless-cms-uni-blocks 0.13.3 → 0.13.4

package/bundle/bundle.umd.js

@@ -1300,15 +1300,17 @@
         return (jsxs(BlockWrapper, { className: style(isEmbedded ? '@container-normal' : '', className), defaultPadding: isEmbedded ? '' : 'p-6xl', version: version, isTheme: isTheme, ...rest, children: [title ? (jsx(Heading, { className: style('whitespace-pre-wrap', align), ...versionStyle?.title, as: as || versionStyle?.title.as, title: title })) : null, description ? (jsx(Paragraph, { size: versionStyle.descriptionSize, font: versionStyle.descriptionWeight, align: align, ...descriptionStyle, children: description })) : null] }));
     });
 
-    const Bonus = JSX(({ className = '', title, description, bonusItems = [], ...rest }) => (jsx(BlockWrapper, { className: className, defaultPadding: "p-default", ...rest, children: jsxs("div", { className: "container", children: [jsx(Headline, { className: "mb-xl", isEmbedded: true, title: title, description: description, headlineVersion: "M" }), jsx("div", { className: "flex flex-wrap w-full", children: bonusItems.length > 0
-                        ? bonusItems.map((_, i) => (jsxs("div", { className: "space-y-xs flex-grow w-full sm:w-[49%] border border-gray p-m", children: [_?.title ? (jsx("div", { children: jsx(Text, { size: "text-h4", children: _.title }) })) : null, _?.description ? (jsx(Paragraph, { size: "text-xl", font: "font-light", children: _.description })) : null, jsxs("div", { className: "flex justify-between items-end", children: [jsx("div", { className: "hidden sm:block", children: renderButtonsSection(_?.buttons) }), _.bonusItemContent?.bonusType
+    const Bonus = JSX(({ className = '', title, description, bonusItems = [], ...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" }), jsx("div", { className: "flex flex-wrap w-full", children: bonusItems.length > 0
+                        ? bonusItems.map((_, i) => (jsxs("div", { className: "space-y-xs flex flex-col grow w-full sm:w-[49%] border border-gray p-m", children: [jsxs("div", { className: "grow", children: [_?.title ? (jsx("div", { className: "mb-xs last:mb-0", children: jsx(Text, { size: "text-h4", children: _.title }) })) : null, _?.description ? (jsx("div", { className: "mb-text last:mb-0", children: jsx(Paragraph, { size: "text-xl", font: "font-light", children: _.description }) })) : null] }), jsxs("div", { className: "flex justify-center sm:justify-between sm:items-end", children: [jsx("div", { className: "hidden sm:block", children: renderButtonsSection(_?.buttons) }), _.bonusItemContent?.bonusType
                                             ? renderBonusItemContent(_.bonusItemContent)
                                             : null] })] }, String(i))))
                         : null })] }) })));
     const renderBonusItemContent = (bonusItemContent) => bonusItemContent.bonusType === 'count'
         ? renderBonusCount(bonusItemContent)
         : renderBonusImage(bonusItemContent);
-    const renderBonusCount = (_) => (jsxs("div", { className: "w-full pt-default mt-s flex items-end", children: [_.bonusCount ? (jsx("span", { className: "shrink-0 w-1/2 sm:w-auto font-mohave text-title-extra -tracking-[5px] bg-clip-text text-transparent bg-green-to-yellow mt-lg", children: _.bonusCount })) : null, _.bonusName ? (jsx("div", { className: "w-1/2 sm:w-auto bg-clip-text text-transparent bg-green-to-yellow", children: jsx(Text, { size: "text-h2", children: _.bonusName }) })) : null] }));
+    const renderBonusCount = (_) => (jsxs("div", { className: "w-full pt-default mt-s flex justify-center sm:justify-end items-end", children: [_.bonusCount ? (
+            // -mb-10 добавлен для выравнивания bonusCount относительно bonusName, тк шрифт font-mohave неправильно высчитывает line-height
+            jsx("div", { className: "shrink-0 -mb-10", children: jsx("span", { className: "font-mohave text-title-extra gradient-color-text", children: _.bonusCount }) })) : null, _.bonusName ? (jsx("div", { className: "shrink-0 gradient-color-text", children: jsx(Text, { size: "text-h2", children: _.bonusName }) })) : null] }));
     const renderBonusImage = (_) => _.image ? jsx(Img, { className: "min-w-12 p-xs rounded-icon shrink-0", image: _.image }) : null;
 
     /**
@@ -1340,7 +1342,7 @@
         }
     };
 
-    const BonusBenefitsBlock = JSX(({ bonusBenefits, cardTextAlign = 'center', className = '', columnsCount = '4', subtitle, title, ...rest }) => (jsxs(BlockWrapper, { className: className, defaultPadding: "p-6xl", ...rest, children: [jsx(Headline, { className: "mb-m sm:mb-3xl", isEmbedded: true, title: title, description: subtitle, headlineVersion: "M" }), bonusBenefits?.length
+    const BonusBenefitsBlock = JSX(({ bonusBenefits, cardTextAlign = 'center', className = '', columnsCount = '4', subtitle, title, ...rest }) => (jsxs(BlockWrapper, { className: className, defaultPadding: "p-6xl", ...rest, children: [jsx(Headline, { className: "mb-4xl sm:mb-3xl", title: title, description: subtitle, headlineVersion: "M" }), bonusBenefits?.length
                 ? renderBonusBenefits(bonusBenefits, columnsCount, cardTextAlign)
                 : null] })));
 
@@ -1704,7 +1706,7 @@
                     depositeName,
                     isShowDepositeName,
                     isShowUnknownRate,
-                }), jsxs("div", { className: "flex flex-col gap-2xl sm:w-96", children: [renderDepositResults(finalSum, income), renderButtonsSection(buttons, { isVertical: true }), renderFootnote(footnote)] })] }));
+                }), jsxs("div", { className: "flex flex-col gap-2xl sm:w-96", children: [renderDepositResults(finalSum, income), renderButtonsSection(buttons, { isVertical: true }), renderFootnote(footnote), renderFootnote(bottomFootnote)] })] }));
     });
     const renderBusinessDepositParamsForm = (calculatorParams, field) => (jsxs("div", { className: "flex flex-col gap-y-xl sm:gap-y-s", children: [jsx(Checkbox, { text: "\u041F\u043E\u043F\u043E\u043B\u043D\u0435\u043D\u0438\u0435", disabled: calculatorParams.isDisabledOperatingDeposit, ...field('isReplenished'), value: calculatorParams.isReplenished }), jsx(Checkbox, { disabled: calculatorParams.isDisabledOperatingDeposit, text: "\u0427\u0430\u0441\u0442\u0438\u0447\u043D\u043E\u0435 \u0441\u043D\u044F\u0442\u0438\u0435", ...field('isPartialWithdrawal'), value: calculatorParams.isPartialWithdrawal }), jsx(Checkbox, { text: "\u0418\u041F / \u043C\u0430\u043B\u043E\u0435 \u043F\u0440\u0435\u0434\u043F\u0440\u0438\u044F\u0442\u0438\u0435", ...field('isSmallBusiness'), value: calculatorParams.isSmallBusiness })] }));
     const renderDepositResults = (finalSum, income) => (jsxs("div", { className: "flex flex-col gap-2xl sm:gap-0", children: [jsx(CalculatorValueBlock, { title: "\u0414\u043E\u0445\u043E\u0434 \u0432 \u043A\u043E\u043D\u0446\u0435 \u0441\u0440\u043E\u043A\u0430", value: income, postfix: "\u20BD", prefix: "+" }), jsx(CalculatorValueBlock, { title: "\u0421\u0443\u043C\u043C\u0430 \u0432 \u043A\u043E\u043D\u0446\u0435 \u0441\u0440\u043E\u043A\u0430", value: finalSum, postfix: "\u20BD" })] }));
@@ -2168,69 +2170,24 @@
     const DEFAULT_TITLE = 'Укажите сумму перевода';
     const DEFAULT_LABEL = 'Сумма перевода';
     const DEFAULT_PLACEHOLDER = '1500';
-    const FORM_URL = 'https://www.rshb.ru/p2p/';
-    const AMOUNT_KEY = 'amount';
+    const FORM_URL_MAP = {
+        private: 'https://old.rshb.ru/p2p/',
+        business: 'https://old.rshb.ru/smallbusiness/p2p/',
+    };
     const INITIAL_FORM_STATE = {
-        [AMOUNT_KEY]: 1500,
+        amount: 1500,
+        _amount: 1500,
     };
-    const CardTransfer = JSX(({ className = '', title = DEFAULT_TITLE, label = DEFAULT_LABEL, placeholder = DEFAULT_PLACEHOLDER, button, ...rest }) => {
-        const [{ amount }, { field }] = useForm(INITIAL_FORM_STATE);
+    const CardTransfer = JSX(({ className = '', title = DEFAULT_TITLE, label = DEFAULT_LABEL, placeholder = DEFAULT_PLACEHOLDER, button, formType = 'private', ...rest }) => {
+        const [{ amount, _amount }, { field }] = useForm(INITIAL_FORM_STATE);
         const isDisabled = amount <= 0;
         const buttonStyle = isDisabled
             ? getDisabledButtonClasses({ version: button?.version })
             : getRegularButtonClasses({ className: 'text-white', version: button?.version });
         const link = useLink();
-        return (jsxs(BlockWrapper, { className: style('flex flex-col items-center', className), defaultPadding: "p-6xl", ...rest, children: [title ? (jsx(Heading, { className: "pb-lg xl:pb-4xl self-start xl:self-center", headingType: "h2", title: title })) : null, jsxs("form", { className: "w-full xl:max-w-[468px]", method: "POST", action: FORM_URL, children: [jsx(CurrencyInput, { name: AMOUNT_KEY, valid: !isDisabled, placeholder: placeholder, label: label, ...field(AMOUNT_KEY, { parse: Number, format: String }) }), button?.text ? (jsx("button", { type: "submit", className: style('w-full p-m mt-lg', buttonStyle), disabled: isDisabled, ...link(button), children: button.text })) : null] })] }));
+        return (jsxs(BlockWrapper, { className: style('flex flex-col items-center', className), defaultPadding: "p-6xl", ...rest, children: [title ? (jsx(Heading, { className: "pb-lg xl:pb-4xl self-start xl:self-center", headingType: "h2", title: title })) : null, jsxs("form", { className: "w-full xl:max-w-[468px]", method: "POST", action: FORM_URL_MAP[formType], children: [jsx(CurrencyInput, { name: "_amount", valid: !isDisabled, placeholder: placeholder, label: label, ...field('_amount', { parse: Number, format: String }) }), jsx("input", { type: "hidden", name: "amount", value: _amount }), button?.text ? (jsx("button", { type: "submit", className: style('w-full p-m mt-lg', buttonStyle), disabled: isDisabled, ...link(button), children: button.text })) : null] })] }));
     });
 
-    const defaultBlockDecorator = ({ blockClassName, block, render }) => render({ blockClassName, block });
-
-    const DEFAULT_ANCESTORS = [];
-    const defaultStyle = 'col-span-12';
-    function renderBlock$1(block, options, { className, ...extraProps } = {}) {
-        const { key, blockDecorator = defaultBlockDecorator, blocksRegistry = {}, ancestors = DEFAULT_ANCESTORS, } = options;
-        const { type } = block;
-        if (!(type && type in blocksRegistry)) {
-            console.warn(`No block with "${type}" is registered`);
-        }
-        const BlockComponent = type && blocksRegistry[type];
-        return blockDecorator({
-            blockClassName: style(block.style?.length ? block.style : defaultStyle, className),
-            block,
-            ancestors,
-            // Adjusted by decorator block and blockClassName
-            render: ({ block: adjustedBlock, blockClassName: adjustedBlockClassName }) => {
-                const { content } = adjustedBlock;
-                return BlockComponent ? (jsx(BlockComponent, { className: adjustedBlockClassName, block: block, options: options, ...content, ...extraProps }, key)) : null;
-            },
-        }, key);
-    }
-
-    const DEFAULT_SLOT_NAME = null;
-
-    const EMPTY_ANCESTORS = [];
-    const renderBlocksList = (blocks, { key, ancestors = EMPTY_ANCESTORS, slotName = DEFAULT_SLOT_NAME, extraProps, renderProps = renderBlock$1, ...options }) => {
-        const renderChildBlock = extraProps
-            ? (childBlock, childOptions) => renderBlock$1(childBlock, childOptions, extraProps)
-            : renderProps;
-        return (blocks || []).map((_, i) => renderChildBlock(_, {
-            ...options,
-            key: `${key ? key : _.type}-${i}`,
-            ancestors: options.parent
-                ? [...(ancestors || EMPTY_ANCESTORS), [options.parent, slotName]]
-                : ancestors,
-        }, i));
-    };
-
-    function renderChildren({ block, options, children, extraProps, renderProps, }) {
-        if (children) {
-            return children;
-        }
-        return block && options
-            ? renderBlocksList(block.blocks, { ...options, parent: block, extraProps, renderProps })
-            : null;
-    }
-
     const mapChildren = (mapper) => (children) => {
         if (children === null || children === undefined) {
             return children;
@@ -2408,6 +2365,76 @@
 
     const ITEMS_GAP = 16;
 
+    const defaultBlockDecorator = ({ blockClassName, block, render }) => render({ blockClassName, block });
+
+    const DEFAULT_ANCESTORS = [];
+    const defaultStyle = 'col-span-12';
+    function renderBlock$1(block, options, { className, ...extraProps } = {}) {
+        const { key, blockDecorator = defaultBlockDecorator, blocksRegistry = {}, ancestors = DEFAULT_ANCESTORS, } = options;
+        const { type } = block;
+        if (!(type && type in blocksRegistry)) {
+            console.warn(`No block with "${type}" is registered`);
+        }
+        const BlockComponent = type && blocksRegistry[type];
+        return blockDecorator({
+            blockClassName: style(block.style?.length ? block.style : defaultStyle, className),
+            block,
+            ancestors,
+            // Adjusted by decorator block and blockClassName
+            render: ({ block: adjustedBlock, blockClassName: adjustedBlockClassName }) => {
+                const { content } = adjustedBlock;
+                return BlockComponent ? (jsx(BlockComponent, { className: adjustedBlockClassName, block: block, options: options, ...content, ...extraProps }, key)) : null;
+            },
+        }, key);
+    }
+
+    const DEFAULT_SLOT_NAME = null;
+
+    const EMPTY_ANCESTORS = [];
+    const renderBlocksList = (blocks, { key, ancestors = EMPTY_ANCESTORS, slotName = DEFAULT_SLOT_NAME, extraProps, renderProps = renderBlock$1, ...options }) => {
+        const renderChildBlock = extraProps
+            ? (childBlock, childOptions) => renderBlock$1(childBlock, childOptions, extraProps)
+            : renderProps;
+        return (blocks || []).map((_, i) => renderChildBlock(_, {
+            ...options,
+            key: `${key ? key : _.type}-${i}`,
+            ancestors: options.parent
+                ? [...(ancestors || EMPTY_ANCESTORS), [options.parent, slotName]]
+                : ancestors,
+        }, i));
+    };
+
+    function renderChildren({ block, options, children, extraProps, renderProps, }) {
+        if (children) {
+            return children;
+        }
+        return block && options
+            ? renderBlocksList(block.blocks, { ...options, parent: block, extraProps, renderProps })
+            : null;
+    }
+
+    const renderCardHighlight = ({ className, text = 'ХИТ' } = {}) => (jsxs("div", { className: style('w-14 h-14 bg-white flex flex-col items-center justify-center rounded-md shadow-[0_4px_25px_rgba(0,0,0,0.07)]', className), children: [jsx(Icon, { iconVersion: "black", name: "HeartIcon", width: "24", height: "24" }), jsx(Paragraph, { size: "text-s", font: "font-normal", align: "text-center", color: "text-primary-text", children: text })] }));
+
+    const cardBaseStyle = 'relative h-full';
+    const renderCarouselCards = ({ noCardBorder, activeIndex, ...rest }) => {
+        const { blocks: childBlocks } = rest.block || {};
+        const someCardsHighlighted = childBlocks?.some(isCardHighlighted);
+        return renderChildren({
+            ...rest,
+            renderProps: (block, options, blockIndex) => (jsxs("div", { className: cardWrapperStyle(block, { someCardsHighlighted }), children: [renderBlock$1(block, options, {
+                        className: cardStyle(block, { someCardsHighlighted, showBorder: !noCardBorder }),
+                        blockIndex,
+                        isActive: blockIndex === activeIndex,
+                    }), isCardHighlighted(block)
+                        ? renderCardHighlight({ className: 'absolute top-0 -right-4 z-40' })
+                        : null] })),
+        });
+    };
+    const cardWrapperStyle = (_, { someCardsHighlighted }) => style(cardBaseStyle, someCardsHighlighted && (isCardHighlighted(_) ? 'pt-3xl' : 'pt-3xl sm:pt-16'));
+    const cardStyle = (_, { someCardsHighlighted, showBorder }) => style(cardBaseStyle, 'min-w-80 sm:min-w-96', someCardsHighlighted && (isCardHighlighted(_) ? 'pt-3xl sm:pt-16' : 'pt-3xl'), showBorder &&
+        'border border-solid border-gray group-data-secondary:border-white/50 group-data-gray:border-main-divider');
+    const isCardHighlighted = (_) => _?.content && 'isHighlighting' in _.content && _.content.isHighlighting;
+
     const Carousel = JSX(({ className, itemCount, visibleItemCount = 0, noCardBorder, isAlignCenter, showDots, arrowsPadded = true, isGap = true, ...rest }) => {
         const { blocks: childBlocks = [] } = rest.block || {};
         const count = itemCount || childBlocks?.length;
@@ -2419,16 +2446,7 @@
         const [dotsActiveIndex] = scroll.visibleIndicesRange;
         // TODO Remove
         const isBankHistoryCarousel = childBlocks && childBlocks[0]?.type === 'CarouselBankHistoryCard';
-        return (jsx(BlockWrapper, { className: className, defaultPadding: "p-6xl", ...rest, children: jsxs("div", { className: style(isAlignCenter ? 'flex justify-center' : '', 'relative max-w-full'), children: [jsx(SwipeListContainer, { containerRef: containerRef, visibleItemCount: visibleItemCount, snapAlign: "snap-start", gap: isGap ? ITEMS_GAP : undefined, onVisibleIndicesChange: scroll.handleVisibleIndicesChange, children: renderChildren({
-                            ...rest,
-                            renderProps: (block, options, blockIndex) => renderBlock$1(block, options, {
-                                className: style('h-full min-w-80 sm:min-w-96', noCardBorder
-                                    ? ''
-                                    : 'border border-solid border-gray group-data-secondary:border-white/50 group-data-gray:border-main-divider'),
-                                blockIndex,
-                                isActive: activeIndex === blockIndex,
-                            }),
-                        }) }), jsx(CarouselScrollButtons, { scroll: scroll, arrowsPadded: arrowsPadded, onScrollLeft: decreaseActiveIndex, onScrollRight: increaseActiveIndex, hasEdgeBlocks: isBankHistoryCarousel, activeIndex: activeIndex, itemCount: count }), showDots ? (jsx(SwipeListControlDots, { containerRef: containerRef, activeIndex: dotsActiveIndex, dotCount: count, listType: "horizontal-list" })) : null] }) }));
+        return (jsx(BlockWrapper, { className: className, defaultPadding: "p-6xl", ...rest, children: jsxs("div", { className: style(isAlignCenter ? 'flex justify-center' : '', 'relative max-w-full'), children: [jsx(SwipeListContainer, { containerRef: containerRef, visibleItemCount: visibleItemCount, snapAlign: "snap-start", gap: isGap ? ITEMS_GAP : undefined, onVisibleIndicesChange: scroll.handleVisibleIndicesChange, children: renderCarouselCards({ noCardBorder, activeIndex, ...rest }) }), jsx(CarouselScrollButtons, { scroll: scroll, arrowsPadded: arrowsPadded, onScrollLeft: decreaseActiveIndex, onScrollRight: increaseActiveIndex, hasEdgeBlocks: isBankHistoryCarousel, activeIndex: activeIndex, itemCount: count }), showDots ? (jsx(SwipeListControlDots, { containerRef: containerRef, activeIndex: dotsActiveIndex, dotCount: count, listType: "horizontal-list" })) : null] }) }));
     });
     Carousel.childrenTypes = [
         'CarouselCard',
@@ -2443,6 +2461,12 @@
         'CarouselInvestmentCard',
         'CarouselEventCard',
     ];
+    Carousel.childSchema = () => ({
+        isHighlighting: {
+            title: 'Выделить карточку',
+            type: 'boolean',
+        },
+    });
 
     const CarouselBankHistoryCard = JSX(({ className, title, description, blockIndex = 0, isActive, ...rest }) => (jsx(BlockWrapper, { className: style('relative flex h-[485px]', isActive ? 'w-[440px] z-10' : 'w-[340px]', className), defaultPadding: "p-0", ...rest, children: jsx("div", { className: style('basis-full self-center', getBackColor(blockIndex)), children: isActive ? (jsx(Headline, { headlineVersion: "M", title: title, description: description, padding: "p-3xl", align: "text-left", className: "h-96 text-white shadow-dark-blue" })) : (jsx("div", { className: "h-[300px] flex justify-center items-center font-mohave text-title-large", children: jsx("span", { className: getTextColor(blockIndex), children: title }) })) }) })));
     const getBackColor = (blockIndex) => ['bg-primary-main', 'bg-green-light', 'bg-yellow-light'][blockIndex % 3];
@@ -2456,8 +2480,8 @@
 
     const layerBaseStyle = 'z-10 border border-solid w-full h-full';
     const layerStyle = style(layerBaseStyle, 'absolute hidden sm:block border-transparent');
-    const CarouselCard = JSX(({ className, title, description, button, ...rest }) => (jsx(BlockWrapper, { className: style('sm:pl-6xl sm:pb-4xl', className), defaultPadding: "p-0", ...rest, children: jsxs("div", { className: "relative", children: [jsx("div", { className: style(layerStyle, 'top-9 right-12 bg-green-dark') }), jsx("div", { className: style(layerStyle, 'top-6 right-8 bg-green') }), jsx("div", { className: style(layerStyle, 'top-3 right-4 bg-green-light') }), jsxs("div", { className: style(layerBaseStyle, 'relative p-5xl bg-white border-green-light'), children: [jsx(Headline, { title: title, description: description, headlineVersion: titleSize, align: "text-left", isEmbedded: true }), renderButtonsSection([button], {
-                            className: 'mt-6xl sm:justify-center',
+    const CarouselCard = JSX(({ className, title, description, button, ...rest }) => (jsx(BlockWrapper, { className: style('sm:pl-6xl sm:pb-4xl', className), defaultPadding: "p-0", ...rest, children: jsxs("div", { className: "relative", children: [jsx("div", { className: style(layerStyle, 'top-9 right-12 bg-green-dark') }), jsx("div", { className: style(layerStyle, 'top-6 right-8 bg-green') }), jsx("div", { className: style(layerStyle, 'top-3 right-4 bg-green-light') }), jsxs("div", { className: style(layerBaseStyle, 'relative p-xl sm:p-5xl bg-white border-green-light'), children: [jsx(Headline, { title: title, description: description, headlineVersion: titleSize, align: "text-left", isEmbedded: true }), renderButtonsSection([button], {
+                            className: 'mt-m sm:mt-6xl sm:justify-center',
                             isVertical: true,
                         })] })] }) })));
 
@@ -2484,8 +2508,12 @@
         center: 'self-center',
         end: 'self-end',
     };
-    const BaseTile = JSX(({ className, defaultPadding, padding, title = '', insetTitle = '', buttons, leftImage, rightImage, imageAlign, backImage, children, }) => (jsxs("div", { className: style('relative flex flex-col gap-3xl font-sans overflow-hidden', padding || defaultPadding, className), children: [title ? jsx("div", { className: "relative", children: title }) : null, jsxs("div", { className: "grow relative flex flex-wrap @xl:flex-nowrap justify-around @xl:justify-between items-stretch gap-3xl", children: [renderImageContainer(leftImage, { imageAlign }), jsxs("div", { className: style('flex flex-col gap-3xl max-w-[600px] xl:max-w-[728px]', leftImage ? '' : 'grow'), children: [insetTitle, jsx("div", { className: "grow", children: children }), backImage ? (jsx("div", { className: "mx-auto sm:absolute sm:-z-10 sm:-bottom-4 sm:-right-4", children: backImage })) : null, buttons] }), renderImageContainer(rightImage, { className: '-order-1 @xl:order-1', imageAlign })] })] })));
-    const renderImageContainer = (image, { className, imageAlign }) => image ? (jsx("div", { className: style('flex-shrink-0', imageAlign && imageAlignmentMap[imageAlign], className), children: image })) : null;
+    const BaseTile = JSX(({ className, defaultPadding, padding, title = '', insetTitle = '', buttons, leftImage, rightImage, imageAlign, backImage, children, }) => (jsxs("div", { className: style('relative flex flex-col gap-3xl font-sans overflow-hidden', padding || defaultPadding, className), children: [title ? jsx("div", { className: "relative", children: title }) : null, jsxs("div", { className: "grow relative flex flex-wrap @xl:flex-nowrap justify-around @xl:justify-between items-stretch gap-3xl", children: [renderImageContainer(leftImage, { imageAlign }), jsxs("div", { className: style('flex flex-col gap-3xl max-w-[600px] @xl:max-w-[728px]', leftImage ? '' : 'grow'), children: [insetTitle, jsx("div", { className: "grow", children: children }), backImage ? (jsx("div", { className: "mx-auto sm:absolute sm:-z-10 sm:-bottom-4 sm:-right-4", children: backImage })) : null, buttons] }), renderImageContainer(rightImage, { className: '-order-1 @xl:order-1', imageAlign })] })] })));
+    const renderImageContainer = (image, { className, imageAlign }) => {
+        //TODO Спорное решение
+        const fullWidth = image?.props?.image.size?.width > 400;
+        return image ? (jsx("div", { className: style('flex-shrink-0', fullWidth ? 'w-full @xl:w-auto' : '', imageAlign && imageAlignmentMap[imageAlign], className), children: image })) : null;
+    };
 
     const cardColumnsModeStyleMap = {
         1: 'grid-cols-1',
@@ -2507,7 +2535,7 @@
     const CarouselLinks = JSX(({ className, additionalDescription, description, links, title, maxLinksCount = 10, ...rest }) => (jsxs(BlockWrapper, { className: style('flex flex-col sm:flex-row w-full overflow-hidden', className), ...rest, children: [jsxs("div", { className: "mr-xl flex-auto", children: [jsx(Headline, { isEmbedded: true, title: title, description: description, as: "h1", align: "text-left" }), additionalDescription ? (jsx(Headline, { className: "pt-m", description: additionalDescription, align: "text-left", isEmbedded: true })) : null] }), links?.length ? renderLinks(links, maxLinksCount) : null] })));
     const renderLinks = (links, maxLinksCount) => {
         const itemCount = Math.ceil(links.length / maxLinksCount);
-        return (jsx(Carousel, { className: "@container-normal sm:w-2/3 w-full p-0 sm:p-2xl", version: "secondary", itemCount: itemCount, arrowsPadded: false, showDots: true, children: new Array(itemCount).fill(null).map((_, groupIndex) => (jsx("div", { className: style('flex flex-wrap self-start sm:w-[672px] w-full sm:mx-5xl'), children: links
+        return (jsx(Carousel, { className: "sm:w-2/3 w-full p-0 sm:p-xs", version: "secondary", itemCount: itemCount, arrowsPadded: false, showDots: false, children: new Array(itemCount).fill(null).map((_, groupIndex) => (jsx("div", { className: style('flex flex-wrap self-start w-full sm:w-[672px]'), children: links
                     .slice(groupIndex * maxLinksCount, (groupIndex + 1) * maxLinksCount)
                     .map((link, index) => (jsx(CarouselLinkButton, { className: "sm:m-2xs", ...link }, String(index)))) }, String(groupIndex)))) }));
     };
@@ -2682,23 +2710,20 @@
         return (jsx("div", { ref: containerRef, className: `transition-max-h duration-300 overflow-hidden ${containerRef.current || !isUnfolded ? 'max-h-0' : ''} ${className}`, children: children }));
     });
 
-    const getPaddingStyle = (isHighlighting = false) => isHighlighting ? 'p-3xl mt-3xl pt-20' : 'p-3xl mt-20';
-
     const renderCardInfo = (cell, i) => {
         const { title, description, buttons } = cell;
         return (jsxs("div", { className: "py-lg border-b border-main-divider", children: [title ? (jsx("div", { className: "opacity-80", children: jsx(Text, { size: "text-m", color: "text-secondary-text", children: title }) })) : null, description ? (jsx("div", { className: "mt-2xs", children: jsx(Text, { size: "text-xl", color: "text-primary-text", children: description }) })) : null, buttons?.length ? (jsx("div", { className: "text-primary-main", children: renderButtonsSection(buttons) })) : null] }, String(i)));
     };
 
     const VISIBLE_CELLS_COUNT = 1;
-    const CarouselTariffsCard = JSX(({ className = '', title, align = 'text-center', icon, isHighlighting = false, button, cardCells = [], ...rest }) => {
+    const CarouselTariffsCard = JSX(({ className = '', title, align = 'text-center', icon, button, cardCells = [], ...rest }) => {
         const cellsNode = cardCells.map(renderCardInfo);
         const visibleCells = cellsNode.slice(0, VISIBLE_CELLS_COUNT);
         const hiddenCells = cellsNode.slice(VISIBLE_CELLS_COUNT);
-        return (jsxs(BlockWrapper, { className: style('relative flex flex-col', className), defaultPadding: getPaddingStyle(isHighlighting), ...rest, children: [isHighlighting ? renderHitIcon() : null, renderIconBlock$1(icon), title ? (jsx(Heading, { className: style('pt-xs', align), headingType: "h5", title: title })) : null, button ? jsx(Button, { className: "w-full mt-m", ...button }) : null, cardCells.length ? (jsx(Foldable, { renderFoldableSection: ({ isUnfolded }) => (jsxs("div", { children: [visibleCells, jsx(FoldableSection, { isUnfolded: isUnfolded, children: hiddenCells })] })), renderFoldButton: cardCells.length > 1 ? renderFoldButton$1 : null })) : null] }));
+        return (jsxs(BlockWrapper, { className: style('flex flex-col', className), defaultPadding: "p-3xl", ...rest, children: [renderIconBlock$1(icon), title ? (jsx(Heading, { className: style('pt-xs', align), headingType: "h5", title: title })) : null, button ? jsx(Button, { className: "w-full mt-m", ...button }) : null, cardCells.length ? (jsx(Foldable, { renderFoldableSection: ({ isUnfolded }) => (jsxs("div", { children: [visibleCells, jsx(FoldableSection, { isUnfolded: isUnfolded, children: hiddenCells })] })), renderFoldButton: cardCells.length > 1 ? renderFoldButton$1 : null })) : null] }));
     });
-    const renderIconBlock$1 = (icon) => (jsx("div", { className: "basis-full self-center", children: icon?.src || icon?.icon ? jsx(Img, { image: icon }) : null }));
+    const renderIconBlock$1 = (icon) => (jsx("div", { className: "self-center", children: icon?.src || icon?.icon ? jsx(Img, { image: icon }) : null }));
     const renderFoldButton$1 = ({ isUnfolded, onToggle }) => (jsxs("button", { className: "w-full cursor-pointer text-primary-main pt-lg flex justify-between items-center", onClick: onToggle, children: [jsx("div", { children: isUnfolded ? 'Скрыть' : 'Подробнее о тарифе' }), jsx(Icon, { className: "text-primary-text", name: isUnfolded ? 'ArrowUpIcon' : 'ArrowDownIcon', width: "16", height: "16" })] }));
-    const renderHitIcon = () => (jsxs("div", { className: "absolute -top-6 -right-4 h-14 w-14 bg-white flex flex-col items-center justify-center rounded-md shadow-[0_4px_25px_rgba(0,0,0,0.07)]", children: [jsx(Icon, { iconVersion: "black", name: "HeartIcon", width: "24", height: "24" }), jsx(Paragraph, { size: "text-s", font: "font-normal", align: "text-center", color: "text-primary-text", children: "\u0425\u0418\u0422" })] }));
 
     const GRADIENT = 'bg-gradient-to-r from-main-gradient-start to-main-gradient-end';
     const BORDER_CLASSES = 'border-gray border-solid border';
@@ -3892,9 +3917,11 @@
         return items?.length ? (jsx(List, { items: items, className: "text-l font-light" })) : (jsx("span", { className: "text-m font-light text-secondary-text", 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 buttonsConditionStyle = (buttons) => renderButtonsSection(buttons, { isVertical: false });
+
     const MobileAppTile = JSX(({ className, padding, alignTitle = 'left', buttons = [], description, headingType = 'h4', image, items, qr, title = 'Мобильное приложение', version = 'primary', ...rest }) => {
         const containerStyle = version === 'secondary' ? 'p-m min-w-32' : 'min-w-24';
-        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', AlignText[alignTitle]) })) : null, rightImage: image?.src ? jsx(Img, { className: "hidden lg:block", image: image }) : null, buttons: renderButtonsSection(buttons, { isVertical: buttons.length > 4 }), children: [renderDescription$1(description), jsxs("div", { className: "flex flex-1 flex-wrap gap-m items-center", children: [qr?.src ? (jsx("div", { className: style('flex justify-center bg-white rounded-md', containerStyle), children: jsx(Img, { className: "w-fit", image: qr }) })) : null, renderList$1(items), 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: title ? (jsx(Heading, { headingType: headingType, title: title, className: style('whitespace-pre-wrap', AlignText[alignTitle]) })) : null, rightImage: image?.src ? jsx(Img, { className: "hidden lg:block", image: image }) : null, buttons: buttonsConditionStyle(buttons), children: [renderDescription$1(description), jsxs("div", { className: "flex flex-1 flex-wrap gap-m items-center", children: [qr?.src ? (jsx("div", { className: style('flex justify-center bg-white rounded-md', containerStyle), children: jsx(Img, { className: "w-fit", image: qr }) })) : null, renderList$1(items), image?.src ? jsx(Img, { className: "lg:hidden", image: image }) : null] })] }) }));
     });
 
     const tabPaddingStyleMap = {
@@ -4413,14 +4440,14 @@
 
     const getIconName = (isUnfolded) => (isUnfolded ? 'MinusIcon' : 'PlusIcon');
 
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    const renderRoundedIcon = (_icon, _iconBgVersion) => null;
-
     const rollupIconVersion = 'color';
 
     const rollupItemStyles = 'border-0 border-b border-solid border-main-divider last:border-b-0';
 
-    const RollupItem = JSX(({ className = '', label = 'Развернуть', labelIcon, labelIconBgVersion, isExpanded, isFoldButtonOnTop = true, version = 'primary', ...rest }) => {
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    const renderRoundedIcon = (_icon, _iconBgVersion) => null;
+
+    const RollupItem = JSX(({ className = '', isExpanded, isFoldButtonOnTop = true, label = 'Развернуть', labelIcon, labelIconBgVersion, version = 'primary', ...rest }) => {
         return (jsx(BlockWrapper, { className: style('w-full', rollupItemStyles, className), defaultPadding: "p-0", tag: "div", version: "transparent", ...rest, children: jsx(Foldable, { isFoldButtonOnTop: isFoldButtonOnTop, unfoldedByDefault: isExpanded, renderFoldableSection: ({ isUnfolded }) => (jsx(FoldableSection, { className: style('gap-lg', foldableSectionStyles), isUnfolded: isUnfolded, children: renderChildren({
                         ...rest,
                         extraProps: { className: 'w-full', padding: 'p-0' },
@@ -4490,7 +4517,7 @@
     const SafeDepositRentalTotal = JSX(({ days, tariffs = [] }) => {
         const price = calculatePrice(days, tariffs);
         const imageDescription = 'На рисунке изображена пачка листов\nформата А4';
-        return (jsxs("div", { className: "contents sm:flex flex-col justify-between order-2", children: [jsxs("div", { className: "flex flex-col sm:flex-row gap-x-6xl gap-y-2xl order-5 sm:order-none py-2xl sm:py-0 border-t border-main-divider sm:border-none", children: [renderTotal('Аренда за', days), renderTotal('Цена', price + ' ₽')] }), jsx("span", { className: "sm:hidden order-3 mb-xs text-s-light text-secondary-text", children: imageDescription }), jsxs("div", { className: "flex flex-col items-center gap-s order-3 sm:order-none mb-xl sm:mb-0 bg-primary-main py-s sm:p-3xl text-center", children: [jsx(Img, { image: { icon: 'PackA4Icon' }, className: "sm:h-60" }), jsx("span", { className: "hidden sm:inline text-s font-light text-white opacity-80 whitespace-pre-line", children: imageDescription })] })] }));
+        return (jsxs("div", { className: "contents sm:flex flex-col justify-between order-2", children: [jsxs("div", { className: "flex flex-col sm:flex-row gap-x-6xl gap-y-2xl order-5 sm:order-none py-2xl sm:py-0 border-t border-main-divider sm:border-none", children: [renderTotal('Аренда за', days), renderTotal('Цена', price + ' ₽')] }), jsx("span", { className: "sm:hidden order-3 mb-xs text-s font-light text-secondary-text", children: imageDescription }), jsxs("div", { className: "flex flex-col items-center gap-s order-3 sm:order-none mb-xl sm:mb-0 bg-primary-main py-s sm:p-3xl text-center", children: [jsx(Img, { image: { icon: 'PackA4Icon' }, className: "sm:h-60" }), jsx("span", { className: "hidden sm:inline text-s font-light text-white opacity-80 whitespace-pre-line", children: imageDescription })] })] }));
     });
     const renderTotal = (label, total) => {
         return (jsxs("div", { className: "flex justify-between items-center gap-y-xs sm:flex-col sm:items-start", children: [jsx("div", { className: "text-l font-light text-secondary-text", children: label }), jsx("span", { className: "text-l sm:text-h3 text-primary-text", children: total })] }));
@@ -5163,7 +5190,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.13.3";
+    const packageVersion = "0.13.4";
 
     exports.Blocks = Blocks;
     exports.ContentPage = ContentPage;