@redneckz/wildless-cms-uni-blocks 0.9.5 → 0.9.7

package/bundle/bundle.umd.js

@@ -336,14 +336,14 @@
         transparent: 'bg-transparent text-primary-text',
         '': '',
     };
-    const BlockWrapper = JSX(({ className = '', version = 'primary', block, tag = 'section', role, isTheme = true, extraProps = {}, children, }) => {
+    const BlockWrapper = JSX(({ className = '', version = 'primary', isTheme = true, block, tag = 'section', role, children, }) => {
         const Tag = tag;
         const ref = useBlockIntersectionObserver(block);
         const [isHidden, setHidden] = useState(false);
         useEffect(() => defaultEventBus.subscribe('tab', (event) => {
             setHidden(Boolean(event.label && block?.labels?.length && !block.labels.includes(event.label)));
         }), [block]);
-        return (jsx(Tag, { className: style(groupStyle(Boolean(version && isTheme)), blockStyles[version], isHidden ? 'hidden' : '', className), ...(version && isTheme ? { 'data-ver': version } : {}), ...(block?.anchor ? { id: block.anchor, ref } : {}), role: role, ...extraProps, children: children }));
+        return (jsx(Tag, { className: style(groupStyle(Boolean(version && isTheme)), blockStyles[version], isHidden ? 'hidden' : '', className), ...(version && isTheme ? { 'data-ver': version } : {}), ...(block?.anchor ? { id: block.anchor, ref } : {}), role: role, children: children }));
     });
     const groupStyle = (isGroup) => (isGroup ? 'group' : '');
 
@@ -1264,6 +1264,7 @@
         maxMonths: DEFAULT_MAX_MONTHS,
         rate: 0,
         isSalaryClient: true,
+        isPensionClient: false,
         isStateEmployee: true,
         isInsurance: true,
     };
@@ -1554,15 +1555,40 @@
         }
     };
 
-    const useCreditCalculatorParams = (userInputParams, sourceBookDir) => {
-        const { isInsurance, isSalaryClient, isStateEmployee, moneyValue, monthsValue } = userInputParams;
+    const useCreditCalculatorParams = (userInputParams, sourceBookDir, paramsViewSettings) => {
+        const { moneyValue, monthsValue } = userInputParams;
         const data = useCalculatorParams(sourceBookDir || CREDIT_CALC_DEFAULT_DIR);
-        const creditCalculatorSourceBookParams = data?.rows?.find((_) => {
-            return (isInsurance === _.isInsurance &&
-                isSalaryClient === _.isSalaryClient &&
-                isStateEmployee === _.isStateEmployee &&
-                checkRangeByKeys(moneyValue, ['minSum', 'maxSum'], _) &&
-                checkRangeByKeys(monthsValue, ['minMonths', 'maxMonths'], _));
+        const creditCalculatorSourceBookParams = data?.rows?.find((row) => {
+            const isExcludeSalaryClient = !paramsViewSettings?.isShowSalaryClient;
+            const isExcludeStateEmployee = !paramsViewSettings?.isShowStateEmployee;
+            const isExcludePensionClient = !paramsViewSettings?.isShowPensionClient;
+            const isExcludeInsurance = !paramsViewSettings?.isShowInsurance;
+            return (checkRowByParam({
+                row,
+                userInputParams,
+                paramKey: 'isSalaryClient',
+                isExclude: isExcludeSalaryClient,
+            }) &&
+                checkRowByParam({
+                    row,
+                    userInputParams,
+                    paramKey: 'isStateEmployee',
+                    isExclude: isExcludeStateEmployee,
+                }) &&
+                checkRowByParam({
+                    row,
+                    userInputParams,
+                    paramKey: 'isPensionClient',
+                    isExclude: isExcludePensionClient,
+                }) &&
+                checkRowByParam({
+                    row,
+                    userInputParams,
+                    paramKey: 'isInsurance',
+                    isExclude: isExcludeInsurance,
+                }) &&
+                checkRangeByKeys(moneyValue, ['minSum', 'maxSum'], row) &&
+                checkRangeByKeys(monthsValue, ['minMonths', 'maxMonths'], row));
         }) || DEFAULT_CREDIT_CALCULATOR_PARAMS;
         const { rate } = creditCalculatorSourceBookParams;
         const monthlyPayment = getMonthlyPayment(rate, userInputParams);
@@ -1575,12 +1601,18 @@
             monthlyPayment,
         };
     };
+    const checkRowByParam = ({ row, userInputParams, paramKey, isExclude }) => isExclude || userInputParams[paramKey] === row[paramKey];
 
-    const CreditCalculatorForm = JSX(({ className = '', sourceBookDir, buttons, footnote }) => {
+    const CreditCalculatorForm = JSX(({ className = '', sourceBookDir, buttons, footnote, paramsViewSettings }) => {
         const [isAnnuity, toggleIsAnnuity] = useState(false);
-        const [isInsurance, toggleIsInsurance] = useState(true);
         const [isSalaryClient, toggleIsSalaryClient] = useState(false);
+        const handleIsSalaryClient = useCallback((_) => toggleIsSalaryClient(_), []);
         const [isStateEmployee, toggleIsStateEmployee] = useState(false);
+        const handleIsStateEmployee = useCallback((_) => toggleIsStateEmployee(_), []);
+        const [isPensionClient, toggleIsPensionClient] = useState(false);
+        const handleIsPensionClient = useCallback((_) => toggleIsPensionClient(_), []);
+        const [isInsurance, toggleIsInsurance] = useState(true);
+        const handleIsInsurance = useCallback((_) => toggleIsInsurance(_), []);
         const [moneyValue, setMoneyValue] = useState(DEFAULT_SUM);
         const handleMoneyValue = useCallback((_) => setMoneyValue(_), []);
         const [monthsValue, setMonthsValue] = useState(DEFAULT_MONTHS);
@@ -1589,17 +1621,27 @@
             isAnnuity,
             isInsurance,
             isSalaryClient,
+            isPensionClient,
             isStateEmployee,
             moneyValue,
             monthsValue,
         };
-        const calculatorParams = useCreditCalculatorParams(userInputParams, sourceBookDir);
-        return (jsxs("section", { className: style('flex justify-between', className), children: [jsxs("div", { className: "w-[468px]", children: [renderWantedSumInput('Сумма кредита, ₽', { ...calculatorParams, step: 500 }, handleMoneyValue), renderMonthsInput('Срок кредита, месяцев', calculatorParams, handleMonthsValue), jsxs("div", { className: "mt-7", children: [jsx(Checkbox, { text: "\u041F\u043E\u043B\u0443\u0447\u0430\u044E \u0437\u0430\u0440\u043F\u043B\u0430\u0442\u0443 \u043D\u0430 \u0441\u0447\u0451\u0442 \u0432 \u0420\u043E\u0441\u0441\u0435\u043B\u044C\u0445\u043E\u0437\u0431\u0430\u043D\u043A\u0435", checked: isSalaryClient, onChange: toggleIsSalaryClient }), jsx(Checkbox, { className: "mt-3", 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", checked: isStateEmployee, onChange: toggleIsStateEmployee }), jsx(Checkbox, { className: "mt-3", 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", checked: isInsurance, onChange: toggleIsInsurance })] })] }), jsx(Rate, { title: "\u0421\u0442\u0430\u0432\u043A\u0430", rate: calculatorParams.rate, rateBlockClassName: "tracking-[-25px]", unit: "%" }), jsxs("div", { className: "w-full max-w-[350px]", children: [jsx(CalculatorValueBlock, { title: 'Ежемесячный платеж', value: calculatorParams.monthlyPayment, postfix: "\u20BD" }), renderPaymentType({
+        const calculatorParams = useCreditCalculatorParams(userInputParams, sourceBookDir, paramsViewSettings);
+        return (jsxs("section", { className: style('flex justify-between', className), children: [jsxs("div", { className: "w-[468px]", children: [renderWantedSumInput('Сумма кредита, ₽', { ...calculatorParams, step: 500 }, handleMoneyValue), renderMonthsInput('Срок кредита, месяцев', calculatorParams, handleMonthsValue), jsx("div", { className: "mt-7", children: renderCreditParamsForm({
+                                ...calculatorParams,
+                                ...paramsViewSettings,
+                                handleIsSalaryClient,
+                                handleIsStateEmployee,
+                                handleIsPensionClient,
+                                handleIsInsurance,
+                            }) })] }), renderRate(calculatorParams.rate), jsxs("div", { className: "w-full max-w-[350px]", children: [jsx(CalculatorValueBlock, { title: 'Ежемесячный платеж', value: calculatorParams.monthlyPayment, postfix: "\u20BD" }), renderPaymentType({
                             isAnnuity,
                             orientation: 'vertical',
                             callback: toggleIsAnnuity,
                         }), renderButtonsSection(buttons, { className: 'mt-7', isVertical: true }), renderFootnote(footnote)] })] }));
     });
+    const renderRate = (rate) => (jsx(Rate, { title: "\u0421\u0442\u0430\u0432\u043A\u0430", rate: rate, rateBlockClassName: "tracking-[-25px]", unit: "%" }));
+    const renderCreditParamsForm = ({ isSalaryClient, isStateEmployee, isPensionClient, isInsurance, isShowSalaryClient, isShowStateEmployee, isShowPensionClient, isShowInsurance, handleIsSalaryClient, handleIsStateEmployee, handleIsPensionClient, handleIsInsurance, }) => (jsxs("div", { children: [isShowSalaryClient ? (jsx(Checkbox, { text: "\u041F\u043E\u043B\u0443\u0447\u0430\u044E \u0437\u0430\u0440\u043F\u043B\u0430\u0442\u0443 \u043D\u0430 \u0441\u0447\u0451\u0442 \u0432 \u0420\u043E\u0441\u0441\u0435\u043B\u044C\u0445\u043E\u0437\u0431\u0430\u043D\u043A\u0435", checked: isSalaryClient, onChange: handleIsSalaryClient })) : null, isShowStateEmployee ? (jsx(Checkbox, { className: "mt-3", 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", checked: isStateEmployee, onChange: handleIsStateEmployee })) : null, isShowPensionClient ? (jsx(Checkbox, { className: "mt-3", 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", checked: isPensionClient, onChange: handleIsPensionClient })) : null, isShowInsurance ? (jsx(Checkbox, { className: "mt-3", 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", checked: isInsurance, onChange: handleIsInsurance })) : null] }));
 
     const REMOTE_REGISTRATION = 'remote';
     const OFFICE_REGISTRATION = 'office';
@@ -1796,14 +1838,12 @@
         return (jsxs(BlockWrapper, { className: `p-12 flex flex-col items-center ${className}`, ...rest, children: [title ? jsx(Heading, { className: "max-w-[684px] pb-9", headingType: "h2", title: title }) : null, jsxs("form", { className: "w-[468px]", method: "POST", action: FORM_URL, children: [jsx(CurrencyInput, { name: AMOUNT_KEY, value: value, onChange: handleChange, valid: value === '' || !isDisabled, placeholder: placeholder, label: label }), button?.text ? (jsx("button", { type: "submit", className: `w-full p-4 mt-6 ${buttonStyle} `, disabled: isDisabled, ...link(button), children: button.text })) : null] })] }));
     });
 
-    const DEFAULT_SLOT_NAME = null;
-
     const defaultBlockDecorator = ({ blockClassName, block, render }) => render({ blockClassName, block });
 
     const DEFAULT_ANCESTORS = [];
     const defaultStyle = 'col-span-12';
-    function renderBlock(block, options) {
-        const { key, blockDecorator = defaultBlockDecorator, blocksRegistry = {}, ancestors = DEFAULT_ANCESTORS, className = '', extraProps = {}, } = options;
+    function renderBlock(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`);
@@ -1822,6 +1862,8 @@
         }, key);
     }
 
+    const DEFAULT_SLOT_NAME = null;
+
     const EMPTY_ANCESTORS = [];
     const renderBlocksList = (blocks, { key, ancestors = EMPTY_ANCESTORS, slotName = DEFAULT_SLOT_NAME, renderProps = renderBlock, ...options }) => (blocks || []).map((_, j) => renderProps(_, {
         ...options,
@@ -1994,7 +2036,7 @@
     const renderBlur = (isBlur, scroll) => (scroll.canScrollLeft || scroll.canScrollRight) && isBlur ? (jsxs("div", { children: [jsx("div", { className: style(blurBaseStyle, 'left-0 bg-opacity-from-white') }), jsx("div", { className: style(blurBaseStyle, 'right-0 bg-opacity-to-white') })] })) : null;
 
     const ITEMS_GAP = 4;
-    const Carousel = JSX(({ className = '', itemCount, visibleItemCount, isBlur = true, isCyclic = false, arrowsPadded = true, isPadding = true, options, ...rest }) => {
+    const Carousel = JSX(({ className = '', itemCount, visibleItemCount, isBlur = true, isCyclic = false, arrowsPadded = true, isPadding = true, ...rest }) => {
         const { blocks: childBlocks } = rest.block || {};
         const count = itemCount || childBlocks?.length || 0;
         const [activeIndex, setActiveIndex] = useState(Math.floor((visibleItemCount || 0) / 2));
@@ -2005,18 +2047,15 @@
             isCyclic,
         });
         const isBankHistoryCarousel = childBlocks && childBlocks[0]?.type === 'CarouselBankHistoryCard';
-        return (jsx(BlockWrapper, { className: style(getPaddingStyle(isPadding), 'group-data-secondary:bg-primary-main group-data-secondary:text-white', className), ...rest, children: jsxs("div", { className: "relative max-w-full", children: [jsx(SwipeListContainer, { containerRef: containerRef, visibleItemCount: visibleItemCount, snapAlign: "snap-start", gap: ITEMS_GAP, onVisibleIndicesChange: scroll.handleVisibleIndicesChange, children: isBankHistoryCarousel
-                            ? renderChildren({
-                                ...rest,
-                                options: {
-                                    ...options,
-                                    extraProps: {
-                                        blocksLength: childBlocks?.length,
-                                        activeIndex: activeIndex,
-                                    },
-                                },
-                            })
-                            : renderChildren({ ...rest, options }) }), jsx(CarouselScrollButtons, { scroll: scroll, isBlur: isBlur, arrowsPadded: arrowsPadded, onScrollLeft: decreaseActiveIndex, onScrollRight: increaseActiveIndex, hasEdgeBlocks: isBankHistoryCarousel, activeIndex: activeIndex, itemCount: count })] }) }));
+        return (jsx(BlockWrapper, { className: style(getPaddingStyle(isPadding), 'group-data-secondary:bg-primary-main group-data-secondary:text-white', className), ...rest, children: jsxs("div", { className: "relative max-w-full", children: [jsx(SwipeListContainer, { containerRef: containerRef, visibleItemCount: visibleItemCount, snapAlign: "snap-start", gap: ITEMS_GAP, onVisibleIndicesChange: scroll.handleVisibleIndicesChange, children: renderChildren({
+                            ...rest,
+                            renderProps: isBankHistoryCarousel
+                                ? (block, options) => renderBlock(block, options, {
+                                    blocksLength: childBlocks?.length,
+                                    activeIndex: activeIndex,
+                                })
+                                : renderBlock,
+                        }) }), jsx(CarouselScrollButtons, { scroll: scroll, isBlur: isBlur, arrowsPadded: arrowsPadded, onScrollLeft: decreaseActiveIndex, onScrollRight: increaseActiveIndex, hasEdgeBlocks: isBankHistoryCarousel, activeIndex: activeIndex, itemCount: count })] }) }));
     });
     Carousel.childrenTypes = [
         'CarouselCard',
@@ -2085,7 +2124,14 @@
         white: 'bg-white',
     };
     const CarouselCatalogCard = JSX(({ className = '', title, description, image, price, button, colors, ...rest }) => (jsxs(BlockWrapper, { className: `border box-border border-gray p-7 min-w-[392px] h-full flex flex-col justify-left ${className}`, ...rest, children: [image?.src ? jsx(ImgInner, { className: "mb-5 flex justify-center", image: image }) : null, title ? (jsx(Heading, { headingType: "h6", as: "h4", className: "text-left mb-1.5", title: title })) : null, description ? (jsx("div", { className: "mb-4", children: jsx(Paragraph, { size: "text-m", align: "text-left", font: "font-light", children: description }) })) : null, colors?.length ? (jsxs("div", { className: "flex mb-4 text-s-light text-secondary-text", children: [jsx("div", { className: "mr-1.5", children: jsx(Text, { children: "\u0414\u043E\u0441\u0442\u0443\u043F\u043D\u044B\u0435 \u0446\u0432\u0435\u0442\u0430: " }) }), colors.map(renderColorOption)] })) : null, price ? (jsxs(Text, { size: "text-h3", align: "text-left", children: [price, "\u00A0\u20BD"] })) : null, renderButtonsSection([button], { buttonClassName: 'mt-5 w-full' })] })));
-    const renderColorOption = (color, i) => (jsx("span", { className: `w-6 h-6 ml-3 border border-solid border-main-divider rounded-full ${cardStyleMap[color]}` }, String(i)));
+    const renderColorOption = (color, i) => (jsx("div", { role: "figure", className: `w-6 h-6 ml-3 border border-solid border-main-divider rounded-full ${cardStyleMap[color]}` }, String(i)));
+
+    const LinkWrapper = JSX(({ className = '', href, target, children }) => {
+        const link = useLink();
+        const linkProps = link({ href, target });
+        const Tag = href ? 'a' : 'div';
+        return (jsx(Tag, { className: className, ...(href ? linkProps : {}), children: children }));
+    });
 
     const getIconWithVersion = (icon, version = 'primary') => ({
         ...icon,
@@ -2093,10 +2139,7 @@
     });
 
     const CarouselEventCard = JSX(({ className = '', icon, title, description, href, target, ...rest }) => {
-        const link = useLink();
-        const adjustedProps = link({ href, target });
-        const tagName = href ? 'a' : 'section';
-        return (jsxs(BlockWrapper, { className: style('flex flex-col w-[365px]', className), extraProps: adjustedProps, tag: tagName, ...rest, children: [icon?.icon ? jsx(ImgInner, { image: getIconWithVersion(icon), asSVG: true }) : null, icon?.src ? jsx(ImgInner, { image: icon }) : null, title ? (jsx(Heading, { headingType: "h6", as: "h4", className: "text-left mb-2", title: title })) : null, description ? (jsx("div", { className: "mb-4", children: jsx(Text, { font: "font-light", size: "text-s", color: "text-secondary-text", children: description }) })) : null] }));
+        return (jsx(BlockWrapper, { className: style('w-[365px]', className), ...rest, children: jsxs(LinkWrapper, { className: "flex flex-col", href: href, target: target, children: [icon?.icon ? jsx(ImgInner, { image: getIconWithVersion(icon), asSVG: true }) : null, icon?.src ? jsx(ImgInner, { image: icon }) : null, title ? (jsx(Heading, { headingType: "h6", as: "h4", className: "text-left mb-2", title: title })) : null, description ? (jsx("div", { className: "mb-4", children: jsx(Text, { font: "font-light", size: "text-s", color: "text-secondary-text", children: description }) })) : null] }) }));
     });
 
     const BaseTile = JSX(({ className = '', title = '', buttons, image, children }) => (jsxs("div", { className: `font-sans flex flex-col grow h-full items-start ${className}`, children: [title, jsxs("div", { className: "flex grow w-full justify-between", children: [jsxs("div", { className: "flex flex-col justify-between w-full", children: [jsx("div", { className: "h-full", children: children }), buttons ? jsx("div", { className: "mt-auto pt-8", children: buttons }) : null] }), image] })] })));
@@ -2162,22 +2205,16 @@
     const List = JSX(({ className = '', hasIndent, isDotted, itemClassName = '', items, listItemSize = 'M' }) => items?.length ? (jsx("section", { className: `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, { className: itemClassName, isDotted: isDotted, size: listItemSize, children: item }, String(i)))) })) : null);
 
     const CarouselProductCard = JSX(({ additionalDescription, align = 'text-center', button = {}, className = '', description, headlineSmallVersion = 'H6', href, icon, isDotted = true, items = [], target, title, version = 'primary', ...rest }) => {
-        const link = useLink();
-        const adjustedProps = link({ href, target });
-        const tagName = href ? 'a' : 'section';
-        return (jsxs(BlockWrapper, { className: style('flex flex-col justify-between items-stretch min-w-[260px] h-full w-full p-6', 'box-border border-solid border border-gray', align, className), extraProps: adjustedProps, tag: tagName, version: version, ...rest, children: [jsxs("div", { className: "flex flex-col h-full", children: [renderImage$3(icon), renderCardTitle(headlineSmallVersion, title), renderDescription$3(description, title), renderItems(items, isDotted, version), renderAdditionalDescription$1(additionalDescription)] }), renderButtonsSection([button], { buttonClassName: 'mt-6 w-full' })] }));
+        return (jsxs(BlockWrapper, { className: style('justify-between min-w-[260px]', 'box-border border-solid border border-gray', align, className), version: version, ...rest, children: [jsxs(LinkWrapper, { className: "p-6", href: href, target: target, children: [renderImage$3(icon), renderCardTitle(headlineSmallVersion, title), renderDescription$3(description, title), renderItems(items, isDotted, version), renderAdditionalDescription$1(additionalDescription)] }), renderButtonsSection([button], { className: 'p-6 pt-0', isVertical: true })] }));
     });
     const renderImage$3 = (image) => (jsxs("div", { className: "flex justify-center", children: [image?.src ? jsx(ImgInner, { className: "mb-5", image: image }) : null, image?.icon ? (jsx(ImgInner, { className: `w-[32px] h-[32px] min-w-[32px] mb-5 rounded-full`, image: image, asSVG: true })) : null] }));
-    const renderCardTitle = (headlineSmallVersion, title) => title ? jsx(Text, { size: HEADLINE_SMALL_VERSION[headlineSmallVersion], children: title }) : null;
+    const renderCardTitle = (headlineSmallVersion, title) => title ? (jsx("div", { children: jsx(Text, { size: HEADLINE_SMALL_VERSION[headlineSmallVersion], children: title }) })) : null;
     const renderDescription$3 = (description, title) => description ? (jsx("div", { className: title ? 'mt-2' : '', children: jsx(Paragraph, { size: "text-l", children: description }) })) : null;
     const renderAdditionalDescription$1 = (additionalDescription) => additionalDescription ? (jsx("div", { className: "mt-auto", children: jsx(Text, { size: "text-m", font: "font-light", color: "text-secondary-text group-data-secondary:text-white/80", children: additionalDescription }) })) : null;
     const renderItems = (items, isDotted, version = 'primary') => items?.length ? (jsx(List, { className: `max-w-[308px] mt-2 text-s ${version === 'primary' ? '!text-secondary-text' : ''}`, itemClassName: "text-left", items: items.filter((item) => item?.text).map((item) => item.text), isDotted: isDotted })) : null;
 
     const CarouselProgramsCard = JSX(({ className = '', title, icon, list = [], href, target, ...rest }) => {
-        const link = useLink();
-        const adjustedProps = link({ href, target });
-        const tagName = href ? 'a' : 'section';
-        return (jsxs(BlockWrapper, { tag: tagName, className: style('border border-gray flex min-w-[536px]', className), extraProps: adjustedProps, ...rest, children: [jsxs("div", { className: "w-[200px] min-w-[200px] self-center", children: [icon?.icon ? jsx(ImgInner, { image: getIconWithVersion(icon), asSVG: true }) : null, icon?.src ? jsx(ImgInner, { image: icon }) : null] }), jsxs("div", { className: "p-8 pl-3 w-full", children: [title ? jsx(Heading, { className: " mb-3.5", headingType: "h5", title: title }) : null, list.length ? jsx("div", { className: "flex flex-col gap-3", children: list?.map(renderList$1) }) : null] })] }));
+        return (jsx(BlockWrapper, { className: style('border border-gray min-w-[536px]', className), ...rest, children: jsxs(LinkWrapper, { className: "flex", href: href, target: target, children: [jsxs("div", { className: "w-[200px] min-w-[200px] self-center", children: [icon?.icon ? jsx(ImgInner, { image: getIconWithVersion(icon), asSVG: true }) : null, icon?.src ? jsx(ImgInner, { image: icon }) : null] }), jsxs("div", { className: "p-8 pl-3 w-full", children: [title ? jsx(Heading, { className: " mb-3.5", headingType: "h5", title: title }) : null, list.length ? (jsx("div", { className: "flex flex-col gap-3", children: list?.map(renderList$1) })) : null] })] }) }));
     });
     const renderList$1 = (_, i) => (jsxs("div", { className: "break-words", children: [_.title ? jsx("div", { className: `text-h6`, children: _.title }) : null, _.description ? jsx("span", { className: "text-l-light mt-1", children: _.description }) : null] }, String(i)));
 
@@ -2235,10 +2272,7 @@
     const BORDER_STYLE = 'border border-solid border-gray group-data-secondary:border-white/50 group-data-gray:border-main-divider';
     const setAdditionalIconStyles = (items) => items.length ? 'w-1/2 flex-1 justify-center' : 'w-full justify-end';
     const CarouselRecommendationCard = JSX(({ className = '', description, href, icon, items = [], socialMedia = [], target, title, version = 'primary', ...rest }) => {
-        const link = useLink();
-        const adjustedProps = link({ href, target });
-        const tagName = href ? 'a' : 'section';
-        return (jsxs(BlockWrapper, { className: style('relative p-12 min-w-[524px] h-full flex flex-col box-border group-data-gray:bg-main-divider/50', BORDER_STYLE, className), extraProps: adjustedProps, tag: tagName, version: version, ...rest, children: [jsx("div", { className: "self-center", children: title ? jsx(Heading, { headingType: "h3", as: "h3", className: "mb-8", title: title }) : null }), jsx("div", { className: "mb-5", children: description ? (jsx(Paragraph, { size: "text-xl", font: "font-light", color: "group-data-gray:text-secondary-text", children: description })) : null }), jsxs("div", { className: "flex align-center w-full", children: [jsxs("div", { className: "w-1/2 h-full flex flex-col flex-1 justify-end", children: [items.length ? (jsx(List, { className: "text-xl-light flex flex-col gap-2 pb-16 mb-3", items: items })) : null, socialMedia.length ? jsx(SocialMedia, { className: "pb-0", media: socialMedia }) : null] }), renderIconBlock$1(icon, items)] })] }));
+        return (jsx(BlockWrapper, { className: style('relative p-12 min-w-[524px] h-full flex flex-col box-border group-data-gray:bg-main-divider/50', BORDER_STYLE, className), version: version, ...rest, children: jsxs(LinkWrapper, { className: "flex flex-col", href: href, target: target, children: [jsx("div", { className: "self-center", children: title ? jsx(Heading, { headingType: "h3", as: "h3", className: "mb-8", title: title }) : null }), jsx("div", { className: "mb-5", children: description ? (jsx(Paragraph, { size: "text-xl", font: "font-light", color: "group-data-gray:text-secondary-text", children: description })) : null }), jsxs("div", { className: "flex align-center w-full", children: [jsxs("div", { className: "w-1/2 h-full flex flex-col flex-1 justify-end", children: [items.length ? (jsx(List, { className: "text-xl-light flex flex-col gap-2 pb-16 mb-3", items: items })) : null, socialMedia.length ? jsx(SocialMedia, { className: "pb-0", media: socialMedia }) : null] }), renderIconBlock$1(icon, items)] })] }) }));
     });
     const renderIconBlock$1 = (icon, items) => (jsxs("div", { className: style('flex', setAdditionalIconStyles(items)), children: [icon?.icon ? jsx(ImgInner, { image: getIconWithVersion(icon), asSVG: true }) : null, icon?.src ? jsx(ImgInner, { image: icon }) : null] }));
 
@@ -4669,9 +4703,12 @@
         center: 'items-center',
         right: 'items-end',
     };
-    const VerticalLayout = JSX(({ className = '', gap = '', align = 'stretch', isPadding = false, isInnerPadding = true, version = 'transparent', isTheme = false, options, ...rest }) => {
+    const VerticalLayout = JSX(({ className = '', gap = '', align = 'stretch', isPadding = false, isInnerPadding = true, version = 'transparent', isTheme = false, ...rest }) => {
         const innerPaddingStyle = isInnerPadding ? '' : '!p-0';
-        return (jsx(BlockWrapper, { className: style('flex flex-col [&>*]:max-w-full', isPadding ? 'p-12' : '', gapStyles[gap], align && alignStyle[align], className), version: version, isTheme: isTheme, ...rest, children: renderChildren({ ...rest, options: { ...options, className: innerPaddingStyle } }) }));
+        return (jsx(BlockWrapper, { className: style('flex flex-col [&>*]:max-w-full', isPadding ? 'p-12' : '', gapStyles[gap], align && alignStyle[align], className), version: version, isTheme: isTheme, ...rest, children: renderChildren({
+                ...rest,
+                renderProps: (block, options) => renderBlock(block, options, { className: innerPaddingStyle }),
+            }) }));
     });
     VerticalLayout.childrenTypes = [];
 
@@ -4869,7 +4906,7 @@
         return (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" }) }));
     }
 
-    const packageVersion = "0.9.5";
+    const packageVersion = "0.9.7";
 
     exports.Blocks = Blocks;
     exports.ContentPage = ContentPage;