@redneckz/wildless-cms-uni-blocks 0.14.3 → 0.14.5

package/bundle/bundle.umd.js

@@ -646,7 +646,7 @@
             return '';
         }
         const withTextStyle = `${aboveText ? 'py-2.5 px-9' : 'py-4 px-9'}`;
-        return style('group/btn items-center justify-center', isWithText(props) ? withTextStyle : 'h-12 w-12', rounded ? 'rounded-full' : '');
+        return style('group/btn items-center justify-center', isWithText(props) ? withTextStyle : 'h-12 w-12 m-auto', rounded ? 'rounded-full' : '');
     };
     const isWithText = ({ text, aboveText, appendLeft }) => Boolean(text || aboveText || !appendLeft);
 
@@ -1507,13 +1507,13 @@
 
     const BusinessBlock = JSX(({ className, title, cards, ...rest }) => (jsxs(BlockWrapper, { className: className, defaultPadding: "p-6xl space-y-3xl", ...rest, children: [jsx(Heading, { headingType: "h3", title: title, className: "text-center" }), jsx("div", { className: "flex gap-lg", children: cards?.length ? cards.map((_, i) => jsx(BusinessCard, { ..._ }, String(i))) : null })] })));
 
-    const alignStyleMap = {
+    const alignStyleMap$1 = {
         start: 'justify-start',
         center: 'justify-center',
         end: 'justify-end',
     };
     const ButtonsBlock = JSX(({ buttons, className = '', align, ...rest }) => {
-        const alignStyle = align ? style('flex', alignStyleMap[align]) : '';
+        const alignStyle = align ? style('flex', alignStyleMap$1[align]) : '';
         return (jsx(BlockWrapper, { className: style('!bg-transparent', alignStyle, className), defaultPadding: "p-0", ...rest, children: renderButtonsSection(buttons) }));
     });
 
@@ -1635,7 +1635,6 @@
         isMonthlyInterestPayment: true,
         isReplenished: false,
         isPartialWithdrawal: false,
-        isSmallBusiness: false,
         depositeName: "Депозит 'Стабильный'",
     };
     const CREDIT_CALC_DEFAULT_DIR = 'credit-calculator-data';
@@ -1687,7 +1686,7 @@
         };
     };
 
-    const BonusCalculatorForm = JSX(({ className = '', sourceBookDir = '', buttons, footnote }) => {
+    const BonusCalculatorForm = JSX(({ className = '', sourceBookDir, buttons, footnote }) => {
         const [userInputParams, { field }] = useForm({
             travelExpenseValue: DEFAULT_TRAVEL_MIN_SUM,
             restExpenseValue: DEFAULT_REST_MIN_SUM,
@@ -1807,7 +1806,7 @@
     const checkRangeByKeys = (value, [minKey, maxKey], sourceBookRow) => value >= sourceBookRow[minKey] && value <= sourceBookRow[maxKey];
 
     const useBusinessDepositCalculatorParams = (userInputParams, sourceBookDir) => {
-        const { daysValue, moneyValue, isPartialWithdrawal, isReplenished, isSmallBusiness, isMonthlyInterestPayment, } = userInputParams;
+        const { daysValue, moneyValue, isPartialWithdrawal, isReplenished, isMonthlyInterestPayment } = userInputParams;
         const data = useCalculatorParams(sourceBookDir || BUSINESS_DEPOSIT_CALC_DEFAULT_DIR);
         const isOperatingDeposit = isReplenished || isPartialWithdrawal;
         const isDisabledOperatingDeposit = daysValue < BUSINESS_OPERATING_MIN_DAYS || daysValue > BUSINESS_OPERATING_MAX_DAYS;
@@ -1821,7 +1820,6 @@
         }
         const businessDepositCalculatorSourceBookParams = data?.rateRows?.find((_) => {
             return (isMonthlyInterestPayment === _.isMonthlyInterestPayment &&
-                isSmallBusiness === _.isSmallBusiness &&
                 checkIsOperatingDeposit(isOperatingDeposit, _) &&
                 checkRangeByKeys(moneyValue, ['minSum', 'maxSum'], _) &&
                 checkRangeByKeys(daysValue, ['minDays', 'maxDays'], _));
@@ -1856,16 +1854,15 @@
         }
     };
 
-    const BusinessDepositCalculatorForm = JSX(({ className = '', sourceBookDir, buttons, footnote, bottomFootnote, isShowDepositeName }) => {
+    const BusinessDepositCalculatorForm = JSX(({ className = '', rateParams, buttons, footnote, bottomFootnote, isShowDepositeName }) => {
         const [userInputParams, { field }] = useForm({
             moneyValue: BUSINESS_DEFAULT_SUM,
             daysValue: BUSINESS_DEFAULT_DAYS,
             isReplenished: false,
             isPartialWithdrawal: false,
-            isSmallBusiness: false,
             isMonthlyInterestPayment: false,
         });
-        const calculatorParams = useBusinessDepositCalculatorParams(userInputParams, sourceBookDir);
+        const calculatorParams = useBusinessDepositCalculatorParams(userInputParams, rateParams?.sourceBookDir);
         const { income, finalSum, rate, isUnavailableByTerm, depositeName } = calculatorParams;
         return (jsxs("section", { className: style('flex flex-col justify-between @5xl:flex-row gap-m', className), children: [jsxs("div", { className: "flex flex-col gap-y-m sm:max-w-md gap-2xl", children: [renderWantedSumInput({
                             title: 'Сумма, ₽',
@@ -1879,25 +1876,34 @@
                             max: calculatorParams.maxDays,
                             ...field('daysValue'),
                             value: calculatorParams.daysValue,
-                        }), renderBusinessDepositParamsForm(calculatorParams, field), renderInterestPayment({
-                            title: 'Выплата процентов',
-                            orientation: 'vertical',
-                            ...field('isMonthlyInterestPayment'),
-                            radioGroupClassName: 'sm:flex-col',
-                        })] }), jsx("div", { className: "border-b border-main-divider md:hidden" }), renderRate({
+                        }), jsxs("div", { className: "flex flex-col sm:flex-row gap-y-4 gap-x-14", children: [renderBusinessDepositParamsForm(calculatorParams, field), renderInterestPayment({
+                                    title: 'Выплата процентов',
+                                    orientation: 'vertical',
+                                    ...field('isMonthlyInterestPayment'),
+                                    radioGroupClassName: 'sm:flex-col',
+                                })] })] }), jsx("div", { className: "border-b border-main-divider md:hidden" }), renderRate({
                     rate,
                     depositeName,
                     isShowDepositeName,
                     isUnavailableByTerm,
                 }), 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 renderBusinessDepositParamsForm = (calculatorParams, field) => (jsxs("div", { className: "space-y-s", children: [jsx(Text, { color: "text-secondary-text", font: "font-light", children: "\u041F\u0430\u0440\u0430\u043C\u0435\u0442\u0440\u044B" }), 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 })] })] }));
     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" })] }));
 
     const STEP_MONTHS = 1;
     const renderMonthsInput = ({ min = 0, max = 0, availableMonths, ...rest }) => (jsx(InputRange, { items: [`От ${monthText(min)}`, `До ${monthText(max)}`], step: STEP_MONTHS, ...(availableMonths?.length ? { list: availableMonths } : { min, max }), ...rest }));
     const monthText = (month) => `${month} ${Number(month) % 10 === 1 ? 'месяца' : 'месяцев'}`;
 
+    const renderPaymentType = (props) => renderBinaryRadioButtonGroup({
+        ...props,
+        radioGroupClassName: 'sm:flex-col',
+        items: [
+            { id: 'annuity', text: 'Аннуитетный' },
+            { id: 'differential', text: 'Дифференцированный' },
+        ],
+    });
+
     const checkCreditSourceBookRowCommonParams = (props) => checkRowParam$1({
         ...props,
         fieldKey: 'isSalaryClient',
@@ -1994,15 +2000,6 @@
         }), [userInputParams, data]);
     };
 
-    const renderPaymentType = (props) => renderBinaryRadioButtonGroup({
-        ...props,
-        radioGroupClassName: 'sm:flex-col',
-        items: [
-            { id: 'annuity', text: 'Аннуитетный' },
-            { id: 'differential', text: 'Дифференцированный' },
-        ],
-    });
-
     const CreditCalculatorForm = JSX(({ className, sourceBookDir, buttons, footnote, paramsViewSettings, isMobile }) => {
         const [userInputParams, { field }] = useForm({
             isAnnuity: true,
@@ -2038,6 +2035,14 @@
     });
     const renderCreditParamsForm$1 = (params, field) => (jsxs("div", { className: "flex flex-col gap-y-2xl", children: [params.isShowSalaryClient ? (jsx(Checkbox, { text: `Получаю зарплату на счёт\nв Россельхозбанке`, ...field('isSalaryClient'), value: params.isSalaryClient, className: "whitespace-pre-line sm:whitespace-normal" })) : null, params.isShowStateEmployee ? (jsx(Checkbox, { text: "\u0420\u0430\u0431\u043E\u0442\u0430\u044E \u0432 \u0431\u044E\u0434\u0436\u0435\u0442\u043D\u043E\u0439 \u043E\u0440\u0433\u0430\u043D\u0438\u0437\u0430\u0446\u0438\u0438", ...field('isStateEmployee'), value: params.isStateEmployee })) : null, params.isShowPensionClient ? (jsx(Checkbox, { text: "\u041F\u043E\u043B\u0443\u0447\u0430\u044E \u043F\u0435\u043D\u0441\u0438\u044E \u043D\u0430 \u043A\u0430\u0440\u0442\u0443 \u0420\u043E\u0441\u0441\u0435\u043B\u044C\u0445\u043E\u0437\u0431\u0430\u043D\u043A\u0430", ...field('isPensionClient'), value: params.isPensionClient })) : null, params.isShowInsurance ? (jsx(Checkbox, { text: "\u041A\u043E\u043C\u043F\u043B\u0435\u043A\u0441\u043D\u0430\u044F \u0441\u0442\u0440\u0430\u0445\u043E\u0432\u0430\u044F \u0437\u0430\u0449\u0438\u0442\u0430", ...field('isInsurance'), value: params.isInsurance })) : null] }));
 
+    const renderRegistrationType = (props) => renderBinaryRadioButtonGroup({
+        ...props,
+        items: [
+            { id: 'remote', text: 'Дистанционно' },
+            { id: 'office', text: 'Офис Банка' },
+        ],
+    });
+
     const arrayByRange = (start, stop, step = 1) => Array.from({ length: Math.abs(stop - start) / step + 1 }, (value, index) => stop >= start ? start + index * step : start - index * step);
 
     const useDepositCalculatorParams = (userInputParams, sourceBookDir, paramsViewSettings) => {
@@ -2092,14 +2097,6 @@
     const checkRowByParam = ({ row, userInputParams, paramKey, isExclude }) => isExclude || userInputParams[paramKey] === row[paramKey];
     const getMiddleMonth = (minMonths, maxMonths) => minMonths + Math.round((maxMonths - minMonths) / 2);
 
-    const renderRegistrationType = (props) => renderBinaryRadioButtonGroup({
-        ...props,
-        items: [
-            { id: 'remote', text: 'Дистанционно' },
-            { id: 'office', text: 'Офис Банка' },
-        ],
-    });
-
     const DepositCalculatorForm = JSX(({ className, sourceBookDir, buttons, footnote, paramsViewSettings }) => {
         const [userInputParams, { field }] = useForm({
             moneyValue: DEPOSIT_DEFAULT_SUM,
@@ -2280,7 +2277,12 @@
         return (jsx("section", { className: "box-border relative bg-white flex shrink-0 self-start basis-full", role: "listitem", children: jsxs("div", { className: "box-border p-4xl w-full space-y-xl", children: [block?.title ? jsx(Heading, { className: "text-center", title: block.title }) : null, jsx(EmbeddedBlock, { ...block })] }) }, String(i)));
     };
 
-    const Calculator = JSX(({ className = '', calculatorTabs = [], ...rest }) => {
+    const alignStyleMap = {
+        start: 'justify-start',
+        center: 'justify-center',
+        end: 'justify-end',
+    };
+    const Calculator = JSX(({ className = '', tabAlign, calculatorTabs = [], ...rest }) => {
         const tabsNav = calculatorTabs.map((_) => _.nav || {});
         const calculatorBlocks = calculatorTabs.map(({ calculatorBlock }) => calculatorBlock || {});
         const [slideIndexShift, setSlideIndexShift] = useState(0);
@@ -2291,7 +2293,13 @@
             visibleItemCount: COLUMNS_FOR_SCROLL,
         });
         return (jsxs(BlockWrapper, { className: style('box-border overflow-hidden relative', className), defaultPadding: "p-0", ...rest, children: [jsxs("div", { className: "bg-white", children: [tabsNav.length > 1
-                            ? renderTabs$1({ activeIndex, tabsNav, slideIndexShift, onClick: handleSlideIndexShift })
+                            ? renderTabs$1({
+                                activeIndex,
+                                tabsNav,
+                                tabAlign,
+                                slideIndexShift,
+                                onClick: handleSlideIndexShift,
+                            })
                             : null, renderArrows({
                             ...controls,
                             btnClass: ['left-3', 'right-3'],
@@ -2314,9 +2322,10 @@
                         iconVersion: iconVersion ?? activeIconStyle,
                     }, width: "24", height: "24" }), jsxs("div", { className: "border-0", children: [jsx("div", { className: btnTitleClassName, children: tab?.title }), jsx("div", { className: btnDescClassName, children: tab.description })] })] }, String(i)));
     }
-    function renderTabs$1({ activeIndex, tabsNav, slideIndexShift, onClick }) {
+    function renderTabs$1({ activeIndex, tabsNav, tabAlign, slideIndexShift, onClick }) {
         const CARD_SHIFT = 388;
-        return (jsxs("div", { children: [jsx("div", { style: { transform: `translateX(-${activeIndex * CARD_SHIFT}px)` }, className: "flex flex-col justify-end items-center h-32 pt-4xl box-border duration-1000", children: jsx("div", { className: "w-full flex flex-nowrap items-end gap-xs", children: tabsNav.map((tab, i) => renderNavButton$3({
+        const alignStyle = tabAlign ? alignStyleMap[tabAlign] : '';
+        return (jsxs("div", { children: [jsx("div", { style: { transform: `translateX(-${activeIndex * CARD_SHIFT}px)` }, className: "flex flex-col justify-end items-center h-32 pt-4xl box-border duration-1000", children: jsx("div", { className: style('w-full flex flex-nowrap items-end gap-xs', alignStyle), children: tabsNav.map((tab, i) => renderNavButton$3({
                             tab,
                             i,
                             isActive: Boolean(i === slideIndexShift),
@@ -2653,7 +2662,6 @@
         'CarouselTariffsCard',
         'CarouselRichTextCard',
         'CarouselInvestmentCard',
-        'CarouselEventCard',
         'ProductBlock',
     ];
     Carousel.childSchema = () => ({
@@ -2698,23 +2706,12 @@
     const CarouselCatalogCard = JSX(({ className = '', title, description, image, price, button, colors = [], align = 'text-left', padding, ...rest }) => (jsx(BlockWrapper, { className: style('flex flex-col justify-left', className), defaultPadding: "p-2xl", ...rest, children: jsxs(BaseTile, { className: "h-full", padding: padding, title: title ? (jsx(Headline, { title: title, description: description, headlineVersion: "XS", isEmbedded: true, align: align })) : null, rightImage: image?.src ? (jsx(Img, { className: "flex justify-center align-center mb-xl", image: image })) : null, buttons: renderButtonsSection([button], { buttonClassName: 'w-full mt-lg' }), children: [colors?.length ? (jsxs("div", { className: "flex text-secondary-text mb-m", children: [jsx("div", { className: "mr-xs", children: jsx(Text, { size: "text-s", align: "text-left", font: "font-light", children: "\u0426\u0432\u0435\u0442\u0430:" }) }), colors.map(renderColorOption)] })) : null, price ? (jsxs(Text, { size: "text-h3", align: "text-left", children: [price, "\u00A0\u20BD"] })) : null] }) })));
     const renderColorOption = (color, i) => (jsx("div", { role: "figure", className: `w-6 h-6 ml-s border border-solid border-main-divider rounded-full ${cardStyleMap[color]}` }, String(i)));
 
-    const LinkWrapper = JSX(({ className = '', href, target, isRemote = false, children }) => {
-        const link = useLink({ isRemote });
-        const linkProps = link({ href, target });
-        const Tag = href ? 'a' : 'div';
-        return (jsx(Tag, { className: style('block', className), ...(href ? linkProps : {}), children: children }));
-    });
-
-    const CarouselEventCard = JSX(({ className = '', icon, title, description, href, target, ...rest }) => {
-        return (jsx(BlockWrapper, { className: className, defaultPadding: "p-0", ...rest, children: jsxs(LinkWrapper, { className: "flex flex-col", href: href, target: target, children: [icon?.icon ? jsx(Img, { image: icon }) : null, icon?.src ? jsx(Img, { image: icon }) : null, jsx("div", { className: "p-s", children: jsx(Headline, { title: title, description: description, headlineVersion: "XS", isEmbedded: true, align: "text-left" }) })] }) }));
-    });
-
     const cardColumnsModeStyleMap = {
         1: 'grid-cols-1',
         2: 'grid-cols-2',
     };
     const CarouselInvestmentCard = JSX(({ className, padding, additionalDescription, cardsList = [], columnsMode = 1, description, image, title, ...rest }) => (jsx(BlockWrapper, { className: style('text-left', className), padding: "p-0", ...rest, children: jsxs(BaseTile, { className: "h-full", defaultPadding: "p-xl", padding: padding, title: title ? jsx(Heading, { headingType: "h4", as: "h3", className: "mb-m z-10", title: title }) : null, backImage: image?.src ? jsx(Img, { image: image }) : null, children: [jsxs("div", { className: "flex justify-between mb-m", children: [description ? (jsx("div", { className: "w-1/3", children: jsx(Text, { size: "text-h6", children: description }) })) : null, additionalDescription ? (jsx(Text, { size: "text-m", font: "font-light", color: "group-data-primary:text-secondary-text", children: additionalDescription })) : null] }), cardsList.length ? (jsx("ul", { className: style('list-none m-0 p-0 grid gap-xs', cardColumnsModeStyleMap[columnsMode]), children: renderCardList(cardsList) })) : null] }) })));
-    const renderCardList = (cardsList) => cardsList.map((item, i) => (jsxs("li", { children: [item?.parameter ? jsx(Text, { size: "text-h6", children: item.parameter }) : null, item?.parameterDescription ? (jsx(Text, { size: "text-m", font: "font-light", color: "text-secondary-text", children: item.parameterDescription })) : null] }, String(i))));
+    const renderCardList = (cardsList) => cardsList.map((item, i) => (jsxs("li", { children: [item?.parameter ? (jsx("div", { className: "inline pr-xs", children: jsx(Text, { size: "text-h6", children: item.parameter }) })) : null, item?.parameterDescription ? (jsx(Text, { size: "text-m", font: "font-light", color: "text-secondary-text", children: item.parameterDescription })) : null] }, String(i))));
 
     const LINK_CLASS_NAME = `absolute border
   bg-white flex justify-between group-hover/link:text-primary-main`;
@@ -2735,6 +2732,13 @@
                     .map((link, index) => (jsx(CarouselLinkButton, { ...link }, String(index)))) }, String(groupIndex)))) }));
     };
 
+    const LinkWrapper = JSX(({ className = '', href, target, isRemote = false, children }) => {
+        const link = useLink({ isRemote });
+        const linkProps = link({ href, target });
+        const Tag = href ? 'a' : 'div';
+        return (jsx(Tag, { className: style('block', className), ...(href ? linkProps : {}), children: children }));
+    });
+
     const DOT_SIZE_MAP = {
         L: 'w-1.5 h-1.5 mr-m',
         M: 'w-1.5 h-1.5 mr-s',
@@ -2758,15 +2762,15 @@
     const List = JSX(({ className, hasIndent, isDotted, 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 CarouselProductCard = JSX(({ additionalDescription, align = AlignStyles, button = {}, className = '', description, headlineSmallVersion = 'H6', href, icon, isDotted = true, isButtonFullWidth = true, isImageFullWidth = false, isTopPosition = false, items = [], target, title, version = 'primary', ...rest }) => {
-        return (jsxs(BlockWrapper, { className: style('flex flex-col justify-between', align, className), defaultPadding: "p-0", version: version, ...rest, children: [jsxs(LinkWrapper, { className: "p-m flex flex-col gap-xs", href: href, target: target, children: [renderCardTitle(headlineSmallVersion, title), renderDescription$2(description), renderItems(items, isDotted, version), renderAdditionalDescription(additionalDescription), renderImage$2(icon, isImageFullWidth, isTopPosition)] }), renderButtonsSection([button], {
+        return (jsxs(BlockWrapper, { className: style('flex flex-col justify-between', className), defaultPadding: "p-0", version: version, ...rest, children: [jsxs(LinkWrapper, { className: "p-m flex flex-col gap-xs", href: href, target: target, children: [renderCardTitle(headlineSmallVersion, title, align), renderDescription$2(description, align), renderItems(items, isDotted, version), renderAdditionalDescription(additionalDescription, align), renderImage$2(icon, isImageFullWidth, isTopPosition)] }), renderButtonsSection([button], {
                     className: style('p-m pt-0', isButtonFullWidth ? '' : 'self-center'),
                     isVertical: isButtonFullWidth,
                 })] }));
     });
-    const renderImage$2 = (image, isImageFullWidth, isTopPosition) => (jsxs("div", { className: style('flex gap-lg', isTopPosition ? 'order-first' : 'order-last', !isImageFullWidth ? 'justify-center' : ''), children: [image?.src ? jsx(Img, { className: "shrink-0", image: image }) : null, image?.icon ? (jsx(Img, { className: style('shrink-0', !isImageFullWidth ? 'w-8 h-8 min-w-8' : ''), image: image })) : null] }));
-    const renderCardTitle = (headlineSmallVersion, title) => title ? jsx(Text, { size: HEADLINE_SMALL_VERSION[headlineSmallVersion], children: title }) : null;
-    const renderDescription$2 = (description) => description ? jsx(Paragraph, { size: "text-l", children: description }) : null;
-    const renderAdditionalDescription = (additionalDescription) => additionalDescription ? (jsx(Text, { size: "text-m", font: "font-light", color: "text-secondary-text group-data-secondary:text-white/80", children: additionalDescription })) : null;
+    const renderImage$2 = (image, isImageFullWidth, isTopPosition) => (jsxs("div", { className: style('flex gap-y-lg justify-center', isImageFullWidth ? 'min-w-full h-full' : '', isTopPosition ? 'order-first' : 'order-last'), children: [image?.src ? jsx(Img, { image: image }) : null, image?.icon ? (jsx(Img, { className: style(!isImageFullWidth ? 'w-8 h-8 min-w-8' : 'w-full h-full'), image: image })) : null] }));
+    const renderCardTitle = (headlineSmallVersion, title, align) => title ? (jsx(Text, { align: align, size: HEADLINE_SMALL_VERSION[headlineSmallVersion], children: title })) : null;
+    const renderDescription$2 = (description, align) => description ? (jsx(Paragraph, { align: align, size: "text-l", children: description })) : null;
+    const renderAdditionalDescription = (additionalDescription, align) => additionalDescription ? (jsx(Text, { size: "text-m", font: "font-light", color: "text-secondary-text group-data-secondary:text-white/80", align: align, children: additionalDescription })) : null;
     const renderItems = (items, isDotted, version = 'primary') => items?.length ? (jsx(List, { className: style('text-s', version === 'primary' ? '!text-secondary-text' : ''), items: items.filter((item) => item?.text).map((item) => item.text), isDotted: isDotted, listItemSize: "S" })) : null;
 
     const sum = (list = []) => list.reduce((a, b) => a + b, 0);
@@ -2829,65 +2833,66 @@
                     description: _.description,
                 })) }) }) })));
 
-    const buttonSizeStyle = {
-        default: 'w-14 h-14',
-        stretched: 'flex-1 h-14',
-    };
-
     const ICONS_MAP = [
         {
             origins: ['t.me', 'telegram.org'],
             iconMapped: { icon: 'TelegramIcon' },
-            label: 'Телеграм',
         },
         {
             origins: ['vk.com'],
             iconMapped: { icon: 'VKIcon' },
-            label: 'ВКонтакте',
         },
         {
             origins: ['ok.ru'],
             iconMapped: { icon: 'OkIcon' },
-            label: 'Одноклассники',
         },
         {
             origins: ['apps.apple.com'],
             iconMapped: { icon: 'AppleIcon' },
-            label: 'App Store',
         },
         {
             origins: ['play.google.com'],
             iconMapped: { icon: 'PlayMarketIcon' },
-            label: 'Google Play',
         },
         {
             origins: ['youtube.com'],
             iconMapped: { icon: 'YoutubeIcon' },
-            label: 'Youtube',
         },
         {
             origins: ['rutube.ru'],
             iconMapped: { icon: 'RutubeIcon' },
-            label: 'Rutube',
         },
     ];
 
     const findIconByHref = (href) => ICONS_MAP.find(({ origins }) => origins?.some((_) => href?.includes(_))) || {};
 
-    //TODO: Refactor this.
-    const MediaButton = JSX(({ buttonSize = 'default', icon, ...rest }) => {
-        const { href } = rest;
-        const { iconMapped, label } = findIconByHref(href);
-        const iconCustom = getFilteredIcon(icon) ?? iconMapped;
-        return (jsx(Button, { className: style('border border-solid hover:border-transparent', 'group-data-primary:border-main-divider', 'hover:bg-primary-main hover:text-black', 'group-data-secondary:bg-white border-main-divider group-data-secondary:hover:bg-secondary-hover', 'group-data-gray:border-green', 'p-m min-h-14 group/media flex items-center justify-center box-border', buttonSizeStyle[buttonSize]), "aria-label": label, rel: "noopener noreferrer", target: "_blank", ...rest, children: jsx(Img, { image: iconCustom, imageClassName: "group-hover/media:text-white", width: "24", height: "24" }) }));
+    const SocialMedia = JSX(({ className = '', media, showButtonText, stretched, children }) => {
+        const [hasText, setHasText] = useState();
+        const buttons = media?.map((_) => {
+            const { href, icon, text } = _;
+            const { iconMapped } = findIconByHref(href);
+            const iconCustom = getFilteredIcon(icon) ?? iconMapped;
+            const buttonText = showButtonText ? { text } : {};
+            if (!hasText && text) {
+                setHasText(true);
+            }
+            return {
+                ...buttonText,
+                icon: { ...iconCustom, iconVersion: 'color' },
+                version: 'white',
+            };
+        });
+        const buttonClassName = style('border border-solid hover:border-transparent group-data-primary:border-main-divider border-main-divider group-data-gray:border-green group/media', showButtonText && hasText ? '' : ' basis-auto', stretched ? 'flex-1 justify-center' : '');
+        return (jsxs("div", { className: "flex flex-col sm:flex-col-reverse gap-xs", children: [children ? (jsx(Text, { size: "text-s", font: "font-light", color: "text-secondary-text", children: children })) : null, jsx("div", { className: style('flex gap-xs', className), children: renderButtonsSection(buttons, {
+                        className: stretched ? 'w-full' : '',
+                        buttonClassName,
+                    }) })] }));
     });
     const getFilteredIcon = (icon) => (icon?.src || icon?.icon ? icon : undefined);
 
-    const SocialMedia = JSX(({ className = '', media, children, buttonSize }) => (jsxs("div", { className: "flex flex-col sm:flex-col-reverse gap-xs", children: [children ? (jsx(Text, { size: "text-s", font: "font-light", color: "text-secondary-text", children: children })) : null, jsx("div", { className: style('flex gap-xs', className), children: media?.map((_, index) => (jsx(MediaButton, { buttonSize: buttonSize, ..._ }, String(index)))) })] })));
-
     //TODO: replace SocialMedia with renderButtonSection
     const CarouselRecommendationCard = JSX(({ className, padding, description, href, icon, items = [], listItemSize = 'S', socialMedia = [], target, title, align = 'text-left', ...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: jsx(BaseTile, { className: "h-full", defaultPadding: "p-m", padding: padding, title: title ? (jsx(Headline, { title: title, description: description, headlineVersion: "S", isEmbedded: true, align: align })) : null, backImage: icon?.icon || icon?.src ? jsx(Img, { image: icon }) : null, buttons: socialMedia.length ? jsx(SocialMedia, { media: socialMedia }) : null, children: items.length ? jsx(List, { items: items, listItemSize: listItemSize }) : null }) }) }));
+        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: jsx(BaseTile, { className: "h-full", defaultPadding: "p-m", padding: padding, title: title ? (jsx(Headline, { title: title, description: description, headlineVersion: "S", isEmbedded: true, align: align })) : null, backImage: icon?.icon || icon?.src ? jsx(Img, { image: icon }) : null, buttons: socialMedia.length ? jsx(SocialMedia, { media: socialMedia, showButtonText: true }) : null, children: items.length ? jsx(List, { items: items, listItemSize: listItemSize }) : null }) }) }));
     });
 
     const CarouselRichTextCard = JSX(({ className = '', __html, richVersion = 'striped', ...rest }) => (jsx(BlockWrapper, { className: className, ...rest, children: jsx(RichText, { __html: __html, richVersion: richVersion }) })));
@@ -5085,7 +5090,6 @@
         CarouselBankHistoryCard,
         CarouselCard,
         CarouselCatalogCard,
-        CarouselEventCard,
         CarouselInvestmentCard,
         CarouselLinks,
         CarouselProductCard,
@@ -5367,7 +5371,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.3";
+    const packageVersion = "0.14.5";
 
     exports.Blocks = Blocks;
     exports.ContentPage = ContentPage;