@redneckz/wildless-cms-uni-blocks 0.14.534 → 0.14.536

package/bundle/bundle.umd.js

@@ -412,7 +412,7 @@
         '': '',
     };
     /** @deprecated */
-    const buttonStyle = 'text-center font-sans select-none';
+    const buttonStyle$2 = 'text-center font-sans select-none';
     /** @deprecated */
     const iconStyleMap = {
         primary: 'group-hover/btn:brightness-0 group-hover/btn:invert',
@@ -426,7 +426,7 @@
 
     /** @deprecated */
     const getRegularButtonClasses = ({ className, rounded, version, }) => [
-        buttonStyle,
+        buttonStyle$2,
         'border border-transparent inline-block cursor-pointer no-underline focus:border-primary-text focus:border h-fit',
         version ? buttonStyleMap$1[version] : '',
         rounded ? 'rounded-full' : 'rounded-md',
@@ -527,9 +527,9 @@
     const ButtonInner = JSX((props) => {
         const { text, aboveText, appendLeft, appendRight, version = 'primary' } = props;
         const iconHideStyle = isWithText(props) ? 'hidden lg:block' : '';
-        return (jsxs("div", { className: style(getButtonStyle(props), 'flex gap-xs'), children: [appendLeft ? (jsx("div", { className: style(iconHideStyle, iconStyleMap[version]), children: appendLeft })) : null, isWithText(props) ? (jsxs("div", { className: "whitespace-pre", children: [aboveText ? jsx("div", { className: "text-xs font-light text-left", children: aboveText }) : null, jsx("div", { className: `text-left ${aboveText ? 'text-s -mt-3xs' : 'text-l'}`, children: text })] })) : null, appendRight ? (jsx("div", { className: style(iconHideStyle, iconStyleMap[version]), children: appendRight })) : null] }));
+        return (jsxs("div", { className: style(buttonStyle$1(props), 'flex gap-xs'), children: [appendLeft ? (jsx("div", { className: style(iconHideStyle, iconStyleMap[version]), children: appendLeft })) : null, isWithText(props) ? (jsxs("div", { className: "whitespace-pre", children: [aboveText ? jsx("div", { className: "text-xs font-light text-left", children: aboveText }) : null, jsx("div", { className: `text-left ${aboveText ? 'text-s -mt-3xs' : 'text-l'}`, children: text })] })) : null, appendRight ? (jsx("div", { className: style(iconHideStyle, iconStyleMap[version]), children: appendRight })) : null] }));
     });
-    const getButtonStyle = (props) => {
+    const buttonStyle$1 = (props) => {
         const { version, aboveText, rounded } = props;
         if (version === 'link') {
             return '';
@@ -544,7 +544,7 @@
     /** @deprecated */
     const getDisabledButtonClasses = ({ className, rounded, version, }) => [
         'inline-block',
-        buttonStyle,
+        buttonStyle$2,
         version ? buttonDisabledStyleMap[version] : '',
         rounded ? 'rounded-full' : 'rounded-md',
         className,
@@ -873,7 +873,7 @@
         return OutputComponent;
     }
 
-    const ProductBlock = UniBlock(({ className, padding, ...rest }) => (jsx(BlockWrapper, { className: style('overflow-hidden flex flex-col gap-3xl box-border', className), padding: "p-0", ...rest, children: jsx(BaseProductTile, { defaultPadding: "p-6xl", padding: padding, className: "grow h-full", ...rest }) })), { childrenTypes: ['UnitBlock'] });
+    const ProductBlock = UniBlock(({ className, padding, defaultPadding, ...rest }) => (jsx(BlockWrapper, { className: style('overflow-hidden flex flex-col gap-3xl box-border', className), padding: "p-0", ...rest, children: jsx(BaseProductTile, { defaultPadding: defaultPadding || 'p-6xl', padding: padding, className: "grow h-full", ...rest }) })), { childrenTypes: ['UnitBlock'] });
 
     const AdTile = JSX((props) => {
         const { items } = (props.options?.page?.adSourceBook ?? {});
@@ -1150,14 +1150,19 @@
         return (jsxs("div", { onClick: onClick, className: style('relative min-h-full bg-white pt-0 p-lg', className), role: "dialog", children: [jsxs("div", { className: "sticky py-xl top-0 bg-white z-10", children: [jsx(CloseButton, { className: "absolute top-0 right-0", onClose: handleClose }), jsx("div", { className: "container", children: head })] }), jsx("div", { className: "container pb-6xl", children: children })] }));
     });
 
-    const ResponseTypeDialog = JSX(function ({ responseType }) {
+    const ResponseTypeDialog = JSX(function ({ responseType, typeForm, }) {
         const responseOK = responseType === 'OK';
         const statusIcon = responseOK ? 'ResponseOKIcon' : 'ResponseFailIcon';
         const { close } = useDialogManager();
         const handleClose = useCallback(() => {
             close();
         }, []);
-        return (jsx(Dialog, { className: "my-6xl max-w-lg w-full min-h-fit mx-auto ", children: jsxs("div", { className: "flex flex-col gap-lg items-center rounded-md space-x-m", children: [jsx(Img, { image: { icon: statusIcon, iconVersion: 'normal' }, width: "136", height: "136" }), jsx(Headline, { className: "w-full", title: responseOK ? 'Ваша заявка отправлена' : 'Не удалось отправить заявку', description: responseOK ? 'Совсем скоро мы с вами свяжемся' : 'Пожалуйста, повторите позднее', headlineVersion: "XS", isEmbedded: true }), jsx(Button, { type: "button", onClick: handleClose, children: "\u0425\u043E\u0440\u043E\u0448\u043E" })] }) }));
+        const responseOKDescription = typeForm === 'ANTIFRAUD'
+            ? `Сообщение отправлено. Для уточнения информации с Вами могут связаться работники Банка либо Вы
+  можете самостоятельно позвонить по номеру контакт-центра +78001000100. Будьте внимательны, работники Банка
+   не звонят с использованием мессенджеров.`
+            : 'Совсем скоро мы с вами свяжемся';
+        return (jsx(Dialog, { className: "my-6xl max-w-lg w-full min-h-fit mx-auto ", children: jsxs("div", { className: "flex flex-col gap-lg items-center rounded-md space-x-m", children: [jsx(Img, { image: { icon: statusIcon, iconVersion: 'normal' }, width: "136", height: "136" }), jsx(Headline, { className: "w-full", title: responseOK ? 'Ваша заявка отправлена' : 'Не удалось отправить заявку', description: responseOK ? responseOKDescription : 'Пожалуйста, повторите позднее', headlineVersion: "XS", isEmbedded: true }), jsx(Button, { type: "button", onClick: handleClose, children: "\u0425\u043E\u0440\u043E\u0448\u043E" })] }) }));
     });
 
     const useResponseTypeDialog = (props) => {
@@ -1862,7 +1867,7 @@
             name: (jsx(InputControl, { label: "\u0418\u043C\u044F", ...getValidation(field('name'), validatorObj.name, required), ...rest })),
             middleName: (jsx(InputControl, { label: "\u041E\u0442\u0447\u0435\u0441\u0442\u0432\u043E (\u041E\u0431\u044F\u0437\u0430\u0442\u0435\u043B\u044C\u043D\u043E, \u043F\u0440\u0438 \u043D\u0430\u043B\u0438\u0447\u0438\u0438)", ...field('middleName') })),
             phone: (jsx(InputPhoneControl, { label: "\u0422\u0435\u043B\u0435\u0444\u043E\u043D", ...getValidation(field('phone'), validatorObj.phone, required) })),
-            email: (jsx(InputControl, { label: "\u042D\u043B\u0435\u043A\u0442\u0440\u043E\u043D\u043D\u0430\u044F \u043F\u043E\u0447\u0442\u0430", ...getValidation(field('email'), validatorObj.email, required) })),
+            email: (jsx(InputControl, { label: "\u042D\u043B\u0435\u043A\u0442\u0440\u043E\u043D\u043D\u0430\u044F \u043F\u043E\u0447\u0442\u0430", ...getValidation(field('email'), validatorObj.email, required), ...rest })),
             fullName: (jsx(InputControl, { label: "\u0424\u0418\u041E", ...getValidation(field('fullName'), validatorObj.fullName, required), ...rest })),
             inn: (jsx(InputControl, { label: "\u0418\u041D\u041D", type: "number", ...getValidation(field('inn'), validatorObj.inn, required) })),
             comment: jsx(CommentField, { field: field, input: input }),
@@ -1993,7 +1998,7 @@
             const status = (await API.send(formatData, endpoint === 'lead')) ? 'OK' : 'Fail';
             setResponseType(status);
             if (status) {
-                const responseTypeDialog = useResponseTypeDialog({ responseType: status });
+                const responseTypeDialog = useResponseTypeDialog({ responseType: status, typeForm });
                 responseTypeDialog.open();
             }
             if (status === 'OK' && data) {
@@ -2123,46 +2128,25 @@
         .filter(([_]) => _ && _.intersectionRatio >= 0.9)
         .map(([, i]) => i);
 
-    const containerStyles = {
-        'horizontal-list': 'mx-auto mt-lg w-fit',
-        'vertical-list': 'absolute flex-col justify-center h-full top-0 left-4',
-    };
     const activeDotStyles = {
         'horizontal-list': 'w-6',
         'vertical-list': 'h-6',
     };
     const dotStyle = 'cursor-pointer rounded-full transition-width duration-300 bg-primary-main group-data-secondary:bg-white';
     const inactiveDotStyle = 'w-2 h-2 opacity-30';
-    const SwipeListDots = JSX(({ className = '', containerRef, activeIndex, dotCount = 0, listType = 'horizontal-list', version, }) => {
-        const handleClick = (idx) => {
-            if (idx !== activeIndex && containerRef?.current) {
-                containerRef.current.children[idx]?.scrollIntoView({
-                    behavior: 'smooth',
-                    block: 'nearest',
-                });
-            }
-        };
-        return dotCount ? (jsx("div", { className: style('flex gap-xs', containerStyles[listType], version ? 'group' : '', className), "data-ver": version, children: Array.from({ length: dotCount })
-                .fill(null)
-                .map((_, idx) => (jsx("div", { className: `${dotStyle} ${idx === activeIndex ? activeDotStyles[listType] : inactiveDotStyle}`, role: "button", "aria-hidden": true, onClick: () => handleClick(idx) }, String(idx)))) })) : null;
-    });
+    const renderDotButton = ({ activeIndex, onClick, listType = 'horizontal-list' }) => (_, idx) => (jsx("div", { className: style(dotStyle, idx === activeIndex ? activeDotStyles[listType] : inactiveDotStyle), role: "button", "aria-hidden": true, onClick: () => onClick(idx) }, String(idx)));
 
-    /** @deprecated */
-    const ArrowButton = JSX(({ className, disabled, ...rest }) => (jsx(LinkButton, { rounded: true, className: style('group/btn w-12 h-12 min-h-12 max-h-12 flex items-center justify-center shadow-main-black', disabled
-            ? 'bg-secondary-light text-secondary-text'
-            : 'bg-white text-primary-text hover:text-primary-main', className || ''), disabled: disabled, ...rest, children: jsx(Img, { className: "w-4 h-4 min-w-4 min-h-4 rounded-full box-border", image: { icon: 'ArrowLeftIcon', iconVersion: 'black' }, imageClassName: "group-hover/btn:text-primary-main", width: "16", height: "16" }) })));
-    /** @deprecated */
-    const ScrollLeftButton = JSX((props) => (jsx(ArrowButton, { ...props, ariaLabel: "\u041F\u0440\u043E\u043B\u0438\u0441\u0442\u0430\u0442\u044C \u0432\u043B\u0435\u0432\u043E", "data-block-control": "scroll-left" })));
-    /** @deprecated */
-    const ScrollRightButton = JSX((props) => (jsx(ArrowButton, { ...props, className: `${props.className || ''} rotate-180`, ariaLabel: "\u041F\u0440\u043E\u043B\u0438\u0441\u0442\u0430\u0442\u044C \u0432\u043F\u0440\u0430\u0432\u043E", "data-block-control": "scroll-right" })));
-
-    const scrollButtonStyle$2 = 'absolute top-[calc(50%-24px)] z-40';
-    const blurBaseStyle = 'absolute top-0 bottom-0 z-40 hidden @lg:block w-20 pointer-events-none';
-    const SwipeListScrollButtons = JSX(({ className, scroll, hasBlur, arrowsPadded }) => {
-        const { canScrollLeft, canScrollRight, scrollLeft, scrollRight } = scroll;
-        return (jsxs("div", { className: style(className), children: [hasBlur ? renderBlur(scroll) : null, canScrollLeft ? (jsx(ScrollLeftButton, { className: style(scrollButtonStyle$2, arrowsPadded ? 'left-1' : 'left-0'), onClick: scrollLeft })) : null, canScrollRight ? (jsx(ScrollRightButton, { className: style(scrollButtonStyle$2, arrowsPadded ? 'right-1' : 'right-0'), onClick: scrollRight })) : null] }));
-    });
-    const renderBlur = (scroll) => (jsxs("div", { children: [scroll.canScrollLeft ? (jsx("div", { className: style(blurBaseStyle, 'left-0 bg-opacity-from-white group-data-secondary:bg-none') })) : null, scroll.canScrollRight ? (jsx("div", { className: style(blurBaseStyle, 'right-0 bg-opacity-to-white group-data-secondary:bg-none') })) : null] }));
+    const renderNavButton$3 = ({ activeIndex, onClick }) => (nav, i) => {
+        const isActive = i === activeIndex;
+        const btnClassName = isActive
+            ? 'min-w-[350px] bg-white shadow-dark-blue border-none p-6'
+            : 'min-w-72 ease-in duration-300 bg-white/10 px-xl py-lg hover:backdrop-blur';
+        const btnTitleClassName = isActive
+            ? 'text-primary-text text-h6 py-xs'
+            : 'text-l pb-2xs text-secondary-text group-data-secondary:text-white';
+        const btnDescClassName = isActive ? 'text-l' : 'text-m group-data-secondary:text-white/80';
+        return (jsxs("button", { type: "button", onClick: () => onClick(i), "aria-label": nav?.title, className: style('max-h-28 mt-xs ml-xs relative px-xl box-border overflow-hidden text-left grow basis-0 border border-gray group-data-secondary:border-white/50 whitespace-nowrap', btnClassName), children: [jsx("div", { className: btnTitleClassName, children: nav?.title }), jsx("div", { className: style('text-secondary-text font-light', btnDescClassName), children: nav?.description })] }, String(i)));
+    };
 
     const areArraysEqual = (as, bs) => as === bs || Boolean(as && bs && as?.length === bs?.length && as.every((_, i) => _ === bs[i]));
 
@@ -2192,7 +2176,7 @@
         const handleVisibleIndicesChange = useCallback((indices) => {
             setVisibleIndices((prevIndices) => areArraysEqual(prevIndices, indices) ? prevIndices : indices);
             onVisibleIndicesChange && onVisibleIndicesChange(indices);
-        }, [itemCount]);
+        }, [onVisibleIndicesChange]);
         const [minIndex, maxIndex] = visibleIndices.length
             ? [minBy()(visibleIndices), maxBy()(visibleIndices)]
             : [-1, -1];
@@ -2243,6 +2227,58 @@
         ];
     };
 
+    const containerStyles = {
+        'horizontal-list': 'mx-auto mt-lg w-fit',
+        'vertical-list': 'absolute flex-col justify-center h-full top-0 left-4',
+    };
+    const SwipeListDots = JSX(({ className = '', activeIndex = 0, dotCount = 0, listType = 'horizontal-list', version, navButtons = [], containerRef, containerScroll, }) => {
+        const isMobileMode = useMobileMode();
+        const [navRef, navScroll] = useSwipeListScroll({
+            itemCount: navButtons.length,
+        });
+        const scrollOption = getOptions(Boolean(navButtons?.length));
+        useEffect(() => {
+            if (navButtons?.length && activeIndex >= 0 && navRef?.current) {
+                navScroll.scrollTo(activeIndex, scrollOption);
+            }
+        }, [activeIndex]);
+        const onChangeActiveIndex = useCallback((idx) => {
+            if (idx !== activeIndex && containerRef?.current) {
+                containerScroll?.scrollTo(idx, scrollOption);
+            }
+        }, [containerRef?.current]);
+        if (navButtons?.length && !isMobileMode) {
+            return (jsx(SwipeListContainer, { containerRef: navRef, snapAlign: "snap-start", itemClassName: "h-36 flex items-stretch w-screen", gap: 8, children: navButtons.map(renderNavButton$3({ activeIndex, onClick: onChangeActiveIndex })) }));
+        }
+        else if (dotCount) {
+            return (jsx("div", { className: style('flex gap-xs', containerStyles[listType], version ? 'group' : '', className, { 'pb-xl': navButtons?.length && isMobileMode }), "data-ver": version, children: Array.from({ length: dotCount })
+                    .fill(null)
+                    .map(renderDotButton({ activeIndex, onClick: onChangeActiveIndex, listType })) }));
+        }
+        return null;
+    });
+    const getOptions = (isAuto = false) => ({
+        behavior: isAuto ? 'auto' : 'smooth',
+    });
+
+    /** @deprecated */
+    const ArrowButton = JSX(({ className, disabled, ...rest }) => (jsx(LinkButton, { rounded: true, className: style('group/btn w-12 h-12 min-h-12 max-h-12 flex items-center justify-center shadow-main-black', disabled
+            ? 'bg-secondary-light text-secondary-text'
+            : 'bg-white text-primary-text hover:text-primary-main', className || ''), disabled: disabled, ...rest, children: jsx(Img, { className: "w-4 h-4 min-w-4 min-h-4 rounded-full box-border", image: { icon: 'ArrowLeftIcon', iconVersion: 'black' }, imageClassName: "group-hover/btn:text-primary-main", width: "16", height: "16" }) })));
+    /** @deprecated */
+    const ScrollLeftButton = JSX((props) => (jsx(ArrowButton, { ...props, ariaLabel: "\u041F\u0440\u043E\u043B\u0438\u0441\u0442\u0430\u0442\u044C \u0432\u043B\u0435\u0432\u043E", "data-block-control": "scroll-left" })));
+    /** @deprecated */
+    const ScrollRightButton = JSX((props) => (jsx(ArrowButton, { ...props, className: `${props.className || ''} rotate-180`, ariaLabel: "\u041F\u0440\u043E\u043B\u0438\u0441\u0442\u0430\u0442\u044C \u0432\u043F\u0440\u0430\u0432\u043E", "data-block-control": "scroll-right" })));
+
+    const blurBaseStyle = 'absolute top-0 bottom-0 z-40 hidden @lg:block w-20 pointer-events-none';
+    const SwipeListScrollButtons = JSX(({ className, scroll, hasBlur, arrowsPadded, isBottom }) => {
+        const { canScrollLeft, canScrollRight, scrollLeft, scrollRight } = scroll;
+        const isArrowPadded = arrowsPadded && !isBottom;
+        return (jsxs("div", { className: className, children: [hasBlur ? renderBlur(scroll) : null, canScrollLeft ? (jsx(ScrollLeftButton, { className: style(buttonStyle(isBottom), isArrowPadded ? 'left-1' : 'left-0'), onClick: scrollLeft })) : null, canScrollRight ? (jsx(ScrollRightButton, { className: style(buttonStyle(isBottom), isArrowPadded ? 'right-1' : 'right-0'), onClick: scrollRight })) : null] }));
+    });
+    const renderBlur = (scroll) => (jsxs("div", { children: [scroll.canScrollLeft ? (jsx("div", { className: style(blurBaseStyle, 'left-0 bg-opacity-from-white group-data-secondary:bg-none') })) : null, scroll.canScrollRight ? (jsx("div", { className: style(blurBaseStyle, 'right-0 bg-opacity-to-white group-data-secondary:bg-none') })) : null] }));
+    const buttonStyle = (isBottom = false) => style('absolute z-40', isBottom ? 'bottom-[56px]' : 'top-[calc(50%-24px)]');
+
     const DEFAULT_GAP = 14;
     /*
       Horizontal padding used on a container above SwipeListControl.
@@ -2250,14 +2286,14 @@
       and get rid of a clipping effect caused by overflow: hidden.
      */
     const DEFAULT_PADDING = 16;
-    const SwipeListControl = JSX(({ className, version, gap = DEFAULT_GAP, padding = DEFAULT_PADDING, visibleItemCount = 1, listType = 'horizontal-list', snapAlign, minHeight, showArrows, hasBlur, arrowsPadded, showDots, children, onVisibleIndicesChange, }) => {
+    const SwipeListControl = JSX(({ className, version, gap = DEFAULT_GAP, padding = DEFAULT_PADDING, visibleItemCount = 1, listType = 'horizontal-list', snapAlign, minHeight, showArrows, hasBlur, arrowsPadded, showDots, children, onVisibleIndicesChange, navButtons, }) => {
         const itemCount = Array.isArray(children) ? children.length : 0;
         const [containerRef, scroll] = useSwipeListScroll({
             itemCount,
             onVisibleIndicesChange,
         });
         const [activeIndex] = scroll.visibleIndicesRange;
-        return (jsxs("div", { className: style(className, listType === 'vertical-list' ? 'relative h-full' : ''), children: [jsx(SwipeListContainer, { containerRef: containerRef, activeIndex: activeIndex, visibleItemCount: visibleItemCount, gap: gap, padding: padding, listType: listType, snapAlign: snapAlign, minHeight: minHeight, onVisibleIndicesChange: scroll.handleVisibleIndicesChange, children: children }), jsx(SwipeListScrollButtons, { className: style(!showArrows && 'hidden lg:block'), scroll: scroll, hasBlur: hasBlur, arrowsPadded: arrowsPadded }), jsx(SwipeListDots, { className: style(!showDots && 'lg:hidden'), containerRef: containerRef, activeIndex: activeIndex, dotCount: itemCount, listType: listType, version: version })] }));
+        return (jsxs("div", { className: style(className, listType === 'vertical-list' ? 'relative h-full' : ''), children: [jsx(SwipeListContainer, { containerRef: containerRef, activeIndex: activeIndex, visibleItemCount: visibleItemCount, gap: gap, padding: padding, listType: listType, snapAlign: snapAlign, minHeight: minHeight, onVisibleIndicesChange: scroll.handleVisibleIndicesChange, children: children }), jsx(SwipeListScrollButtons, { className: style(!showArrows && 'hidden lg:block'), scroll: scroll, hasBlur: hasBlur, arrowsPadded: arrowsPadded, isBottom: Boolean(navButtons?.length) }), jsx(SwipeListDots, { className: style(!showDots && 'lg:hidden'), activeIndex: activeIndex, dotCount: itemCount, listType: listType, version: version, navButtons: navButtons, containerRef: containerRef, containerScroll: scroll })] }));
     });
 
     const renderCarouselBlocks = ({ blocksToRender, ...rest }) => (jsx(SwipeListControl, { visibleItemCount: 0, gap: 0, arrowsPadded: true, children: renderBlocksList(blocksToRender, {
@@ -3456,9 +3492,10 @@
         normal: 'lg:min-w-80 xl:min-w-96',
         big: 'lg:min-w-[515px]',
     };
-    const renderCarouselCards = ({ noCardBorder, cardSize = 'normal', ...rest }) => {
+    const renderCarouselCards = ({ noCardBorder, cardSize = 'normal', isNavButtons = false, ...rest }) => {
         const { blocks: childBlocks } = rest.block || {};
         const someCardsHighlighted = childBlocks?.some(isCardHighlighted);
+        const defaultPadding = isNavButtons ? { defaultPadding: 'p-6xl pb-m' } : {};
         return renderChildren({
             ...rest,
             renderProps: (block, options, blockIndex) => (jsxs("div", { className: cardWrapperStyle(block, { someCardsHighlighted }), children: [renderBlock$1(block, options, {
@@ -3467,6 +3504,7 @@
                             showBorder: !noCardBorder,
                             cardSize,
                         }),
+                        ...defaultPadding,
                         blockIndex,
                     }), isCardHighlighted(block)
                         ? renderCardHighlight({ className: 'absolute top-0 -right-4 z-40' })
@@ -3480,9 +3518,7 @@
 
     const VISIBLE_ITEM_COUNT = 1;
 
-    const Carousel = UniBlock(({ className, visibleItemCount = VISIBLE_ITEM_COUNT, noCardBorder, arrowsPadded = true, isGap = true, cardSize = 'normal', ...rest }) => {
-        return (jsx(BlockWrapper, { className: style(className), defaultPadding: "p-6xl", ...rest, children: jsx(SwipeListControl, { className: style('relative max-w-full'), visibleItemCount: visibleItemCount, snapAlign: "snap-start", gap: isGap ? ITEMS_GAP : 0, padding: 0, arrowsPadded: arrowsPadded, hasBlur: true, children: renderCarouselCards({ noCardBorder, cardSize, ...rest }) }) }));
-    }, {
+    const Carousel = UniBlock(({ className, visibleItemCount = VISIBLE_ITEM_COUNT, noCardBorder, arrowsPadded = true, isGap = true, cardSize = 'normal', isNavButtons = false, ...rest }) => (jsx(BlockWrapper, { className: style(className), defaultPadding: "p-6xl", ...rest, children: jsx(SwipeListControl, { className: style('relative max-w-full'), visibleItemCount: visibleItemCount, snapAlign: "snap-start", gap: isGap ? ITEMS_GAP : 0, padding: 0, arrowsPadded: arrowsPadded, navButtons: isNavButtons ? getNavButton(rest?.block?.blocks) : [], hasBlur: true, children: renderCarouselCards({ noCardBorder, cardSize, isNavButtons, ...rest }) }) })), {
         childrenTypes: [
             'CarouselCard',
             'CarouselCatalogCard',
@@ -3498,6 +3534,13 @@
             },
         }),
     });
+    const getNavButton = (blocks) => blocks?.map((_) => {
+        const content = _?.content;
+        return {
+            title: content?.title,
+            description: content?.additionalDescription || content?.description,
+        };
+    }) ?? [];
 
     const titleSize = 'XS';
 
@@ -6461,7 +6504,7 @@
         slots: () => [HEADER_SLOT, FOOTER_SLOT, STICKY_FOOTER_SLOT],
     });
 
-    const packageVersion = "0.14.533";
+    const packageVersion = "0.14.535";
 
     exports.Blocks = Blocks;
     exports.ContentPage = ContentPage;