@redneckz/wildless-cms-uni-blocks 0.8.22 → 0.8.24

package/bundle/bundle.umd.js

@@ -365,17 +365,14 @@
         transparent: 'bg-transparent text-primary-text',
         '': '',
     };
-    const BlockWrapper = JSX(({ className = '', version = 'primary', block, tag = 'section', role, children }) => {
+    const BlockWrapper = JSX(({ className = '', version = 'primary', block, tag = 'section', role, isTheme = true, children, }) => {
         const Tag = tag;
         const ref = useBlockIntersectionObserver(block);
         const [isHidden, setHidden] = useState(false);
         useEffect(() => defaultEventBus.subscribe('tab', (event) => {
-            setHidden(Boolean(event.type === 'group' &&
-                event.label &&
-                block?.labels?.length &&
-                !block.labels.includes(event.label)));
+            setHidden(Boolean(event.label && block?.labels?.length && !block.labels.includes(event.label)));
         }), [block]);
-        return (jsx(Tag, { className: style('group', blockStyles[version], isHidden ? 'hidden' : '', className), ...(version ? { 'data-ver': version } : {}), ...(block?.anchor ? { id: block.anchor, ref } : {}), role: role, children: children }));
+        return (jsx(Tag, { className: style(isTheme ? 'group' : '', blockStyles[version], isHidden ? 'hidden' : '', className), ...(version && isTheme ? { 'data-ver': version } : {}), ...(block?.anchor ? { id: block.anchor, ref } : {}), role: role, children: children }));
     });
 
     const styles$4 = {
@@ -873,7 +870,7 @@
             handleSubmit &&
                 (await handleSubmit({
                     typeForm: 'acqr',
-                    region,
+                    region: regions.find((_) => _.code === selectedRegion)?.name || '',
                     PartnerComments,
                     fullName,
                     inn,
@@ -914,7 +911,7 @@
             handleSubmit &&
                 (await handleSubmit({
                     typeForm: 'bcrd',
-                    region,
+                    region: regions.find((_) => _.code === selectedRegion)?.name || '',
                     name,
                     phone,
                     inn,
@@ -930,15 +927,15 @@
     const renderDataOrganization$3 = ({ name, phone, mail, inn, handleChange, }) => (jsxs("div", { className: "flex justify-between gap-5", children: [jsxs("div", { className: "w-1/2", children: [jsx(Input, { className: "shrink-0 text-l w-full mb-5", type: "text", "aria-label": "\u041A\u043E\u043D\u0442\u0430\u043A\u0442\u043D\u043E\u0435 \u043B\u0438\u0446\u043E", label: "\u041A\u043E\u043D\u0442\u0430\u043A\u0442\u043D\u043E\u0435 \u043B\u0438\u0446\u043E", value: name, onChange: (value) => handleChange({ name: value }) }), jsx(Input, { className: "shrink-0 text-l w-full mb-5", type: "text", "aria-label": "\u0418\u041D\u041D", label: "\u0418\u041D\u041D", value: inn, onChange: (value) => handleChange({ inn: value }) })] }), jsxs("div", { className: "w-1/2", children: [jsx(Input, { className: "shrink-0 text-l w-full mb-5", type: "text", "aria-label": "\u0422\u0435\u043B\u0435\u0444\u043E\u043D", label: "\u0422\u0435\u043B\u0435\u0444\u043E\u043D", value: phone, onChange: (value) => handleChange({ phone: value }) }), jsx(Input, { className: "shrink-0 text-l w-full ", type: "text", "aria-label": "\u042D\u043B\u0435\u043A\u0442\u0440\u043E\u043D\u043D\u0430\u044F \u043F\u043E\u0447\u0442\u0430", label: "\u042D\u043B\u0435\u043A\u0442\u0440\u043E\u043D\u043D\u0430\u044F \u043F\u043E\u0447\u0442\u0430", value: mail, onChange: (value) => handleChange({ mail: value }) })] })] }));
     const renderRegion$1 = ({ regions, region, handleChange }) => (jsx("div", { className: "flex justify-between gap-5 mb-5", children: jsx("div", { className: "w-full", children: jsx(WrapperSelect$1, { data: regions, fieldValue: "code", fieldLabel: "name", selected: region, setSelected: (value) => handleChange({ region: value }), label: "\u0420\u0435\u0433\u0438\u043E\u043D", placeholder: "\u0412\u044B\u0431\u0435\u0440\u0438\u0442\u0435 \u0440\u0435\u0433\u0438\u043E\u043D" }) }) }));
 
-    const SAFEBOXES_URL = '/api/v1/safeboxes';
-    const EMPTY_VALUE = [];
-    function useSafeBoxes(regionCode) {
-        const { data } = useAsyncData(regionCode ? `${SAFEBOXES_URL}?regionCode=${regionCode}` : null, fetchSafeBoxes);
-        return data || EMPTY_VALUE;
+    const BRANCHES_URL = '/api/v1/branches';
+    const EMPTY_VALUE$1 = [];
+    function useBranches(regionCode) {
+        const { data } = useAsyncData(regionCode ? `${BRANCHES_URL}?regionCode=${regionCode}` : null, fetchSafeBoxes$1);
+        return data || EMPTY_VALUE$1;
     }
-    const fetchSafeBoxes = async (url) => {
+    const fetchSafeBoxes$1 = async (url) => {
         const result = await fetchJSON(url, { method: 'GET' });
-        return result || EMPTY_VALUE;
+        return result || EMPTY_VALUE$1;
     };
 
     const MIN_CREDIT_AMOUNT = 50000;
@@ -1013,8 +1010,8 @@
         const { handleChange } = useFormHandlers({
             setFormState,
         });
-        const selectedRegion = normalizeSelectedRegion$1(formState.region, regions);
-        const branches = useSafeBoxes(region);
+        const selectedRegion = normalizeSelectedRegion$1(region, regions);
+        const branches = useBranches(selectedRegion).filter((branch) => branch.address);
         useEffect(() => {
             handleChange({
                 department: '',
@@ -1031,8 +1028,8 @@
                     name,
                     phone,
                     mail,
-                    region,
-                    department,
+                    region: regions.find((_) => _.code === selectedRegion)?.name || '',
+                    department: branches.find((_) => _.branchCode === department)?.address || '',
                     PartnerComments,
                 }));
         };
@@ -1224,9 +1221,9 @@
         XS: 'text-xs-light',
     };
 
-    const Headline = JSX(({ className, title, description, headlineVersion = 'XL', align = 'text-center', as, version = '', ...rest }) => {
+    const Headline = JSX(({ className, title, description, headlineVersion = 'XL', align = 'text-center', as, ...rest }) => {
         const versionStyle = headlineVersionStyles[headlineVersion];
-        return (jsxs(BlockWrapper, { className: style('flex flex-col p-12', versionStyle.wrapper, className), version: version, ...rest, children: [title ? (jsx(Heading, { className: style('whitespace-pre-wrap', align), ...versionStyle?.title, as: as || versionStyle?.title.as, title: title })) : null, description ? (jsx(Paragraph, { color: "group-data-secondary:text-white/80", size: versionStyle.descriptionSize, align: align, children: description })) : null] }));
+        return (jsxs(BlockWrapper, { className: style('flex flex-col p-12 group-data-secondary:bg-primary-main group-data-secondary:text-white', versionStyle.wrapper, className), ...rest, children: [title ? (jsx(Heading, { className: style('whitespace-pre-wrap', align), ...versionStyle?.title, as: as || versionStyle?.title.as, title: title })) : null, description ? (jsx(Paragraph, { color: "group-data-secondary:text-white/80", size: versionStyle.descriptionSize, align: align, children: description })) : null] }));
     });
 
     const Bonus = JSX((props) => {
@@ -1244,8 +1241,8 @@
     const renderBonusImage = (_) => _.image ? jsx(ImgInner, { className: `w-12 h-12 min-w-12 p-3 rounded-full`, image: _.image }) : null;
 
     const BonusBenefitsBlock = JSX(({ bonusBenefits, cardTextAlign = 'center', className = '', columnsCount = '4', subtitle, title, ...rest }) => (jsxs(BlockWrapper, { className: `font-sans text-primary-text bg-white p-12 flex flex-col text-center ${className}`, ...rest, children: [jsx(Headline, { className: "!p-0 mb-8", title: title, description: subtitle, headlineVersion: "M" }), bonusBenefits?.length ? (jsx("div", { className: `grid gap-1 ${AlignText[cardTextAlign]} ${getElementsColsValue(columnsCount)}`, children: bonusBenefits.map(renderBonusBenefit) })) : null] })));
-    const renderBonusBenefit = ({ icon, label, description }, i) => {
-        return (jsxs("div", { className: "flex flex-col items-center text-h6", children: [description ? jsx("span", { children: description }) : null, icon ? jsx(ImgInner, { image: icon, height: "180", width: "auto", className: "h-[180px] w-auto" }) : null, jsx("div", { children: label ? jsx("span", { children: label }) : null })] }, String(i)));
+    const renderBonusBenefit = ({ icon, title, description }, i) => {
+        return (jsxs("div", { className: "flex flex-col items-center text-h6", children: [title ? jsx("span", { children: title }) : null, icon ? jsx(ImgInner, { image: icon, height: "180", width: "auto", className: "h-[180px] w-auto" }) : null, jsx("div", { children: description ? jsx("span", { children: description }) : null })] }, String(i)));
     };
     const getElementsColsValue = (colValue) => {
         switch (colValue) {
@@ -1616,7 +1613,10 @@
      */
     const getMonthlyPayment = (rate, params) => {
         const { isAnnuity, moneyValue, monthsValue } = params;
-        if (isAnnuity) {
+        if (rate === 0) {
+            return 0;
+        }
+        else if (isAnnuity) {
             const i = rate / MONTHLY_INTEREST_RATE; // Используется значение ставки в процентах
             return moneyValue * (i + i / (Math.pow(1 + i, monthsValue) - 1));
         }
@@ -2032,7 +2032,7 @@
             isCyclic,
         });
         const isBankHistoryCarousel = childBlocks && childBlocks[0]?.type === 'CarouselBankHistoryCard';
-        return (jsx(BlockWrapper, { className: style(getPaddingStyle(isPadding), 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
+        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: {
@@ -2059,7 +2059,7 @@
     ];
     const getPaddingStyle = (isPadding) => (isPadding ? 'p-12' : '');
 
-    const CarouselBankHistoryCard = JSX(({ title, description, blocksLength = 0, activeIndex, options, ...rest }) => {
+    const CarouselBankHistoryCard = JSX(({ title, description, blocksLength = 0, activeIndex, options }) => {
         const orderNumber = Number(options?.key?.split('-').slice(-1)[0]) || 0;
         const isActive = orderNumber === activeIndex;
         return (jsx(BlockWrapper, { className: "flex h-[485px]", children: isActive ? (jsx("div", { className: "relative flex items-center w-full", children: jsx(Headline, { headlineVersion: "S", title: title, description: description, align: "text-left", className: style('absolute z-10 h-[385px] w-[440px] text-white shadow-dark-blue', getActiveBlockPosition(orderNumber, blocksLength), getBackgroundColor(orderNumber)) }) })) : (jsx("div", { className: "flex w-full items-center justify-center", children: jsx("div", { className: style('flex justify-center items-center h-[300px] w-[340px] font-mohave text-title-large tracking-[-0.03em]', getBackgroundColor(orderNumber)), children: jsx("span", { className: getTextColor(orderNumber), children: title }) }) })) }));
@@ -2154,12 +2154,12 @@
     });
 
     const MAX_LINKS_COUNT = 10;
-    const CarouselLinks = JSX(({ className = '', additionalDescription, description, links, title, version = 'secondary', ...rest }) => {
-        return (jsxs(BlockWrapper, { className: `flex w-full p-10 overflow-hidden justify-between ${className}`, version: version, ...rest, children: [jsxs("div", { className: "flex flex-col max-w-96 pr-9 text-white text-xl-light", children: [jsx(Headline, { className: "p-0", title: title, description: description, as: "h1", align: "text-left" }), additionalDescription ? (jsx("div", { className: "pt-6", children: jsx(Paragraph, { children: additionalDescription }) })) : null] }), links?.length ? renderLinks(links) : null] }));
+    const CarouselLinks = JSX(({ className = '', additionalDescription, description, links, title, ...rest }) => {
+        return (jsxs(BlockWrapper, { className: `flex w-full p-10 overflow-hidden justify-between ${className}`, ...rest, children: [jsxs("div", { className: "flex flex-col max-w-96 pr-9 text-white text-xl-light", children: [jsx(Headline, { className: "p-0", title: title, description: description, as: "h1", align: "text-left" }), additionalDescription ? (jsx("div", { className: "pt-6", children: jsx(Paragraph, { children: additionalDescription }) })) : null] }), links?.length ? renderLinks(links) : null] }));
     });
     const renderLinks = (links) => {
         const itemCount = Math.ceil(links.length / MAX_LINKS_COUNT);
-        return (jsx(Carousel, { version: "", className: "min-w-[832px] w-[832px]", isBlur: false, isCyclic: true, itemCount: itemCount, children: new Array(itemCount).fill(null).map((_, groupIndex) => (jsx("div", { className: "w-[672px] min-w-[672px] ml-20 mr-20 flex flex-wrap self-start", children: links
+        return (jsx(Carousel, { className: "min-w-[832px] w-[832px]", isBlur: false, isCyclic: true, itemCount: itemCount, children: new Array(itemCount).fill(null).map((_, groupIndex) => (jsx("div", { className: "w-[672px] min-w-[672px] ml-20 mr-20 flex flex-wrap self-start", children: links
                     .slice(groupIndex * MAX_LINKS_COUNT, (groupIndex + 1) * MAX_LINKS_COUNT)
                     .map((link, index) => (jsx(LinkButton, { className: "m-1", ...link }, String(index)))) }, String(groupIndex)))) }));
     };
@@ -2842,7 +2842,11 @@
         const [isShowLocationModal, { setTrue: showLocationModal, setFalse: hideLocationModal }] = useBool();
         const [location, onChangeLocation] = useLocation(defaultLocation);
         const iconVersion = version === 'transparent' ? 'white' : 'black';
-        return (jsxs("div", { className: style('flex items-center', className), children: [jsx(TopItem, { className: "mr-5", flat: true, href: "#", text: location.name, onClick: showLocationModal }), officesLink ? (jsx(TopItem, { className: "mr-7", flat: true, href: officesLink, text: "\u041E\u0444\u0438\u0441\u044B \u0438 \u0431\u0430\u043D\u043A\u043E\u043C\u0430\u0442\u044B" })) : null, projectSettings.CHAT_BOT ? (jsx(HeaderChatBotButton, { className: "mr-5", iconVersion: iconVersion, chat: projectSettings.CHAT_BOT })) : null, isShowLocationModal ? (jsx(Location, { currentLocation: location, foreignOffices: foreignOffices, onChangeLocation: onChangeLocation, close: hideLocationModal })) : null] }));
+        const handleShowLocationModal = useCallback((ev) => {
+            ev?.preventDefault();
+            showLocationModal();
+        }, []);
+        return (jsxs("div", { className: style('flex items-center', className), children: [jsx(TopItem, { className: "mr-5", flat: true, href: "#", text: location.name, onClick: handleShowLocationModal }), officesLink ? (jsx(TopItem, { className: "mr-7", flat: true, href: officesLink, text: "\u041E\u0444\u0438\u0441\u044B \u0438 \u0431\u0430\u043D\u043A\u043E\u043C\u0430\u0442\u044B" })) : null, projectSettings.CHAT_BOT ? (jsx(HeaderChatBotButton, { className: "mr-5", iconVersion: iconVersion, chat: projectSettings.CHAT_BOT })) : null, isShowLocationModal ? (jsx(Location, { currentLocation: location, foreignOffices: foreignOffices, onChangeLocation: onChangeLocation, close: hideLocationModal })) : null] }));
     });
 
     const findActiveSubItem = (router) => (items = []) => {
@@ -3628,7 +3632,7 @@
     const ProductBlockInner = JSX(({ className = '', title, headlineVersion = 'L', description, benefitsCountOfRow = 3, benefits, benefitsVersion, buttons, footnote, image, __html, items, version = 'primary', isDotted = true, textBlockClassName = '', }) => {
         const benefitsCount = benefits?.filter((_) => _.label)?.length;
         const benefitsContainerStyles = getBenefitsContainerStyles(benefitsCountOfRow);
-        return (jsxs("div", { className: style('flex grow justify-between items-stretch h-full', className), children: [jsxs("div", { className: style('flex flex-col', textBlockClassName), children: [jsx(Headline, { className: "!p-0 max-w-[600px]", title: title, description: description, headlineVersion: headlineVersion, align: "text-left" }), jsxs("div", { className: "flex flex-col justify-between h-full", children: [jsxs(BaseTile, { buttons: renderButtonsSection(buttons), children: [benefitsCount ? (jsx("div", { className: benefitsContainerStyles, children: benefits?.map(renderBenefit$1(version, benefitsVersion)) })) : null, __html ? (jsx("div", { className: "mt-5", children: jsx(RichText, { __html: __html }) })) : null, items?.length ? (jsx(List, { className: "mt-5 text-h6", items: items, itemClassName: "mb-[7px]", isDotted: isDotted })) : null] }), footnote ? jsx("p", { className: "text-m-light pt-12", children: footnote }) : null] })] }), image?.src && jsx(ImgInner, { className: "mt-[-50px]", image: image })] }));
+        return (jsxs("div", { className: style('flex grow justify-between items-stretch h-full', className), children: [jsxs("div", { className: style('flex flex-col', textBlockClassName), children: [jsx(Headline, { className: "!p-0 max-w-[600px]", title: title, description: description, headlineVersion: headlineVersion, align: "text-left", version: version }), jsxs("div", { className: "flex flex-col justify-between h-full", children: [jsxs(BaseTile, { buttons: renderButtonsSection(buttons), children: [benefitsCount ? (jsx("div", { className: benefitsContainerStyles, children: benefits?.map(renderBenefit$1(version, benefitsVersion)) })) : null, __html ? (jsx("div", { className: "mt-5", children: jsx(RichText, { __html: __html }) })) : null, items?.length ? (jsx(List, { className: "mt-5 text-h6", items: items, itemClassName: "mb-[7px]", isDotted: isDotted })) : null] }), footnote ? jsx("p", { className: "text-m-light pt-12", children: footnote }) : null] })] }), image?.src && jsx(ImgInner, { className: "mt-[-50px]", image: image })] }));
     });
     const getBenefitsContainerStyles = (benefitsCountOfRow = 2) => `gap-6 mt-6 ${benefitsCountOfRow > 2
     ? 'inline-grid grid-cols-[auto_auto_auto]'
@@ -3650,12 +3654,12 @@
                     : null, breadcrumbs?.length ? (jsx("div", { className: "text-xs-light mb-6", children: joinList(jsx("span", { className: `mx-2 ${breadcrumbStyle}`, children: "/" }))(breadcrumbs.map((breadcrumb, i) => (jsx(Breadcrumb, { className: breadcrumbStyle, ...breadcrumb }, String(i))))) })) : null, jsx(ProductBlockInner, { version: version, ...rest })] }));
     });
 
-    const ProductGallery = JSX(({ className = '', slides = [], version = 'primary', ...rest }) => {
+    const ProductGallery = JSX(({ className = '', slides = [], ...rest }) => {
         const galleryNav = slides.map((s) => s.nav);
         const galleryBlocks = slides.map((s) => s.productBlock);
         const [activeSlideIndex, setActiveSlideIndex] = useState(0);
         const handleActiveSlideIndex = useCallback((_) => setActiveSlideIndex(_), []);
-        return (jsxs(BlockWrapper, { className: `box-border pt-12 overflow-hidden relative w-100 mb-6 ${className}`, version: version, ...rest, children: [jsx("div", { className: "flex duration-1000 pb-14", style: { transform: `translateX(-${activeSlideIndex}00%)` }, role: "list", children: galleryBlocks.map((_, i) => renderProductBlock({ ..._, ...rest, version }, i)) }), jsx("div", { className: "flex items-center absolute bottom-6 left-0 right-0 px-[26px] box-border h-28", children: galleryNav.map((slide, i) => renderNavButton({
+        return (jsxs(BlockWrapper, { className: `box-border pt-12 overflow-hidden relative w-100 mb-6 ${className}`, ...rest, children: [jsx("div", { className: "flex duration-1000 pb-14", style: { transform: `translateX(-${activeSlideIndex}00%)` }, role: "list", children: galleryBlocks.map((_, i) => renderProductBlock({ ..._, ...rest }, i)) }), jsx("div", { className: "flex items-center absolute bottom-6 left-0 right-0 px-[26px] box-border h-28", children: galleryNav.map((slide, i) => renderNavButton({
                         slide,
                         i,
                         isActive: Boolean(i === activeSlideIndex),
@@ -3775,6 +3779,17 @@
     };
     const renderPrimaryFoldButton = ({ label, icon, onToggle }) => (jsxs("button", { className: "border-none bg-transparent px-9 pt-5 pb-3.5 flex justify-between text-left w-full font-sans text-h6 cursor-pointer", onClick: onToggle, children: [jsx("span", { className: "text-xl font-medium pr-2.5", children: label }), icon ? jsx(ImgInner, { image: getIconWithVersion({ icon }), width: "24", height: "24", asSVG: true }) : null] }));
 
+    const SAFEBOXES_URL = '/api/v1/safeboxes';
+    const EMPTY_VALUE = [];
+    function useSafeBoxes(regionCode) {
+        const { data } = useAsyncData(regionCode ? `${SAFEBOXES_URL}?regionCode=${regionCode}` : null, fetchSafeBoxes);
+        return data || EMPTY_VALUE;
+    }
+    const fetchSafeBoxes = async (url) => {
+        const result = await fetchJSON(url, { method: 'GET' });
+        return result || EMPTY_VALUE;
+    };
+
     const WrapperSelect = JSX(({ data, fieldLabel, fieldValue, selected, placeholder = '', setSelected, label }) => {
         const dataFormat = data
             .filter(Boolean)
@@ -3946,9 +3961,9 @@
         'horizontal-list': 'w-6',
         'vertical-list': 'h-6',
     };
-    const dotStyle = 'cursor-pointer bg-primary-main rounded-full transition-width duration-300 group-data-secondary:bg-white group-data-transparent:bg-white';
+    const dotStyle = 'cursor-pointer rounded-full transition-width duration-300 bg-primary-main group-data-secondary:bg-white group-data-transparent:bg-white';
     const inactiveDotStyle = 'w-2 h-2 opacity-30';
-    const SwipeListControlDots = JSX(({ containerRef, activeIndex, dotCount = 0, listType = 'horizontal-list' }) => {
+    const SwipeListControlDots = JSX(({ containerRef, activeIndex, dotCount = 0, listType = 'horizontal-list', version }) => {
         const handleClick = (idx) => {
             if (idx !== activeIndex && containerRef?.current) {
                 containerRef.current.children[idx]?.scrollIntoView({
@@ -3957,7 +3972,7 @@
                 });
             }
         };
-        return dotCount ? (jsx("div", { className: `flex gap-2 ${containerStyles[listType]}`, children: new Array(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;
+        return dotCount ? (jsx("div", { className: style('flex gap-2', containerStyles[listType], version ? 'group' : ''), ...(version ? { 'data-ver': version } : {}), children: new Array(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 DEFAULT_GAP = 14;
@@ -3967,18 +3982,18 @@
       and get rid of a clipping effect caused by overflow: hidden.
      */
     const DEFAULT_PADDING = 16;
-    const SwipeListControl = JSX(({ className = '', gap = DEFAULT_GAP, padding = DEFAULT_PADDING, showDots = true, minHeight, children, onVisibleIndicesChange, listType = 'horizontal-list', }) => {
+    const SwipeListControl = JSX(({ className = '', gap = DEFAULT_GAP, padding = DEFAULT_PADDING, showDots = true, minHeight, children, onVisibleIndicesChange, listType = 'horizontal-list', version, }) => {
         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: 1, gap: gap, padding: padding, onVisibleIndicesChange: scroll.handleVisibleIndicesChange, listType: listType, minHeight: minHeight, children: children }), showDots ? (jsx(SwipeListControlDots, { containerRef: containerRef, activeIndex: activeIndex, dotCount: itemCount, listType: listType })) : null] }));
+        return (jsxs("div", { className: style(className, listType === 'vertical-list' ? 'relative h-full' : ''), children: [jsx(SwipeListContainer, { containerRef: containerRef, activeIndex: activeIndex, visibleItemCount: 1, gap: gap, padding: padding, onVisibleIndicesChange: scroll.handleVisibleIndicesChange, listType: listType, minHeight: minHeight, children: children }), showDots ? (jsx(SwipeListControlDots, { containerRef: containerRef, activeIndex: activeIndex, dotCount: itemCount, listType: listType, version: version })) : null] }));
     });
 
-    const SwipeListControlBlock = JSX(({ listType, showDots, options, ...rest }) => {
-        return (jsx(BlockWrapper, { ...rest, children: jsx(SwipeListControl, { listType: listType, showDots: showDots, children: renderChildren({ ...rest, options }) }) }));
+    const SwipeListControlBlock = JSX(({ listType, showDots, options, version, ...rest }) => {
+        return (jsx(BlockWrapper, { version: version, ...rest, children: jsx(SwipeListControl, { listType: listType, showDots: showDots, version: version, children: renderChildren({ ...rest, options }) }) }));
     });
     SwipeListControlBlock.childrenTypes = {
         exclude: ['SwipeListControlBlock'],
@@ -4048,11 +4063,15 @@
     };
 
     const LinkTab = JSX((props) => {
-        const { tab, currentTab, isScrollable = false } = props;
+        const { tab, currentTab, onClick, isScrollable = false } = props;
         const active = currentTab?.type === 'link' && currentTab.href === tab.href;
         const link = useLink();
         const adjustedProps = link(tab);
-        return (jsx("a", { role: "tab", className: getLinkTabClassName('link', active, isScrollable), target: tab.target, href: adjustedProps.href, onClick: adjustedProps.onClick, children: jsx("span", { className: getLinkTabClassName('text', active, isScrollable), children: tab.text }) }));
+        const handleClick = (ev) => {
+            adjustedProps.onClick(ev);
+            onClick(tab);
+        };
+        return (jsx("a", { role: "tab", className: getLinkTabClassName('link', active, isScrollable), target: tab.target, href: adjustedProps.href, onClick: handleClick, children: jsx("span", { className: getLinkTabClassName('text', active, isScrollable), children: tab.text }) }));
     });
 
     const BADGE_CLASSES = 'min-w-[22px] h-[22px] rounded-full text-xs ml-2 flex justify-center items-center';
@@ -4085,7 +4104,7 @@
             case 'group':
                 return renderGroupTab({ page, currentTab, showCounter, onClick, isScrollable })(tab, i);
             case 'link': {
-                return (jsx(LinkTab, { tab: tab, currentTab: currentTab, isScrollable: isScrollable }, String(i)));
+                return (jsx(LinkTab, { tab: tab, currentTab: currentTab, isScrollable: isScrollable, onClick: onClick }, String(i)));
             }
             default:
                 assertUnreachable(type);
@@ -4112,15 +4131,19 @@
     const Tabs = JSX((props) => {
         const { className = '', tabs, showCounter, isSticky, tabsMode, ...rest } = props;
         const [currentTab, setCurrentTab] = useState(tabs ? tabs[0] : undefined);
+        useEffect(() => {
+            if (!tabs || !tabs[0]) {
+                return;
+            }
+            fireTabEvent(tabs[0]);
+        }, []);
         useEffect(() => {
             if (currentTab?.type === 'group') {
                 defaultEventBus.subject('tab', { type: currentTab.type, label: currentTab.ref });
             }
         }, [currentTab]);
         const handleClick = useCallback((selectedTab) => {
-            if (selectedTab?.type === 'group') {
-                defaultEventBus.fire('tab', { type: selectedTab.type, label: selectedTab.ref });
-            }
+            fireTabEvent(selectedTab);
             setCurrentTab(selectedTab);
         }, []);
         return (jsx(BlockWrapper, { className: `relative box-border flex gap-x-1 w-full ${isSticky ? 'sticky top-1 z-20' : ''} ${className}`, role: "tablist", ...rest, children: tabsMode === 'scrollable' ? (jsx(ScrollableTabs, { tabs: tabs, onClick: handleClick, currentTab: currentTab, showCounter: showCounter, ...rest })) : (tabs?.map(renderTab({
@@ -4130,6 +4153,14 @@
                 ...rest,
             }))) }));
     });
+    const fireTabEvent = (tab) => {
+        if (tab.type === 'group') {
+            defaultEventBus.fire('tab', { type: tab.type, label: tab.ref });
+        }
+        if (tab.type === 'link') {
+            defaultEventBus.fire('tab', { type: tab.type, label: tab.href });
+        }
+    };
 
     const DIVIDER_CLASSES = 'border-main-divider border border-t-0 border-x-0';
     const FIRST_CELL_CLASSES = 'w-[354px] flex-shrink-0';
@@ -4312,19 +4343,13 @@
                         })] }), isScrollAvailable ? (jsx("div", { className: "absolute top-0 right-0 bottom-0 w-[84px] bg-opacity-to-white" })) : null] }));
     });
 
-    const textBlockBack = {
-        primary: 'bg-white',
-        secondary: 'bg-primary-main',
-        'secondary-light': 'bg-primary-main/10',
-    };
-    const TextBlock = JSX(({ className = '', title, description, blockVersion = 'primary', iconVersion, image, __html, ...rest }) => {
-        const isSecondaryBlock = blockVersion === 'secondary';
-        return (jsxs(BlockWrapper, { className: `px-9 py-4 flex gap-3 ${textBlockBack[blockVersion]} ${className}`, ...rest, children: [iconVersion === 'small' ? (jsx("div", { className: "mt-1", children: renderIcon(isSecondaryBlock) })) : null, iconVersion === 'big' ? renderImage(image) : null, jsxs("div", { children: [title ? renderTitle(title, isSecondaryBlock) : null, description ? (jsx("div", { className: "mt-1", children: renderDescription(description, isSecondaryBlock) })) : null, __html ? jsx(RichText, { __html: __html }) : null] })] }));
+    const TextBlock = JSX(({ className = '', title, description, iconVersion, image, __html, ...rest }) => {
+        return (jsxs(BlockWrapper, { className: `px-9 py-4 flex gap-3 bg-white group-data-secondary:bg-primary-main/10' ${className}`, ...rest, children: [iconVersion === 'small' ? jsx("div", { className: "mt-1", children: renderIcon() }) : null, iconVersion === 'big' ? renderImage(image) : null, jsxs("div", { children: [title ? renderTitle(title) : null, description ? jsx("div", { className: "mt-1", children: renderDescription(description) }) : null, __html ? jsx(RichText, { __html: __html }) : null] })] }));
     });
-    const renderIcon = (isSecondaryBlock) => (jsx("div", { className: `rounded-full h-4 w-4 text-center text-xs-light ${isSecondaryBlock ? 'bg-white text-primary-main' : 'bg-primary-main text-white'}`, children: "i" }));
+    const renderIcon = () => (jsx("div", { className: `rounded-full h-4 w-4 text-center text-xs-light bg-primary-main text-white group-data-secondary:bg-white group-data-secondary:text-primary-main`, children: "i" }));
     const renderImage = (image) => (image?.src ? jsx(ImgInner, { image: image }) : null);
-    const renderTitle = (title, isSecondaryBlock) => (jsx(Text, { size: "text-l", font: "font-medium", color: isSecondaryBlock ? 'text-white' : 'text-primary-text', children: title }));
-    const renderDescription = (description, isSecondaryBlock) => (jsx(Paragraph, { size: "text-s", color: isSecondaryBlock ? 'text-white' : 'text-secondary-text', children: description }));
+    const renderTitle = (title) => (jsx(Text, { size: "text-l", font: "font-medium", color: "text-primary-text group-data-secondary:text-white", children: title }));
+    const renderDescription = (description) => (jsx(Paragraph, { size: "text-s", color: "text-secondary-text group-data-secondary:text-white", children: description }));
 
     const Tags = JSX((props) => {
         const { tags, className = '' } = props;
@@ -4541,7 +4566,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.8.22";
+    const packageVersion = "0.8.24";
 
     exports.Blocks = Blocks;
     exports.ContentPage = ContentPage;