@redneckz/wildless-cms-uni-blocks 0.12.4 → 0.12.5

package/bin/migration-scripts/0.12.3.js

@@ -18,5 +18,7 @@ function adjustImageOptions(block) {
       ...block.content.imageOptions,
       directionRight: block.content.directionRight,
     };
+
+    Reflect.deleteProperty(block?.content, 'directionRight');
   }
 }

package/bin/migration-scripts/0.9.10.js

@@ -24,7 +24,7 @@ function adjustProductTileBlock(block) {
   if (block.type === 'ProductTile') {
     const blockContent = block?.content;
     if (blockContent?.isImageOnRightSide) {
-      renameProp(ProductTile, 'isImageOnRightSide', 'directionRight');
+      renameProp(blockContent, 'isImageOnRightSide', 'directionRight');
     }
   }
 }

package/bundle/bundle.umd.js

@@ -705,7 +705,7 @@
 
     const PhoneInput = JSX(({ children, onChange, ...inputProps }) => {
         const handleChange = useCallback((value) => onChange && onChange(normalizePhone(value)), [onChange]);
-        return (jsx(Input, { onChange: handleChange, onFocus: handleChange, ...inputProps, children: children }));
+        return (jsx(Input, { onChange: handleChange, onFocus: (event) => handleChange(event?.target?.value || ''), ...inputProps, children: children }));
     });
 
     const PhoneInputControl = JSX(({ className, label, value, error, onChange, onBlur }) => (jsxs("div", { className: className, children: [jsx(PhoneInput, { "aria-label": label, label: label, valid: Boolean(!error), value: value, onChange: onChange, onBlur: onBlur }), jsx("div", { className: "h-2", children: error ? (jsx(Text, { size: "text-xs-light", color: "text-error", children: error })) : null })] })));
@@ -1162,11 +1162,10 @@
         return (jsx(BlockWrapper, { className: className, defaultPadding: "p-default", ...rest, children: jsxs("div", { className: "container max-w-[978px]", children: [title ? jsx(Heading, { headingType: "h3", title: title, className: "text-center mb-8" }) : null, COMPONENTS_MAP[typeForm]({ button, link, onSubmit: handleSubmit }), responseType ? jsx(ResponseNotification, { responseType: responseType }) : null] }) }));
     });
 
-    const BenefitsBlock = JSX(({ className = '', title, benefitList, ...rest }) => (jsxs(BlockWrapper, { className: style('flex flex-col items-center', className), defaultPadding: "p-default", ...rest, children: [title ? (jsx(Heading, { headingType: "h3", as: "h2", className: "max-w-[47rem] text-center", title: title })) : null, benefitList?.length ? (jsx("div", { className: "flex flex-wrap w-full justify-center gap-x-20 mt-8", children: benefitList.map(renderStep$1) })) : null] })));
-    const renderStep$1 = (benefit, i) => {
-        const description = benefit.description;
-        return (jsxs("div", { className: "flex items-center basis-1/2 max-w-[500px] mb-14", children: [benefit?.icon?.icon ? (jsx(Img, { className: "w-12 h-12 min-w-12 p-3 rounded-icon bg-main-divider text-primary-main group-data-secondary:bg-white/30 group-data-secondary:text-black", image: benefit.icon })) : null, benefit?.icon?.src ? jsx(Img, { image: benefit.icon }) : null, jsxs("div", { className: "ml-5 h-full", children: [benefit?.label ? jsx(Heading, { headingType: "h6", children: benefit.label }) : null, renderDescription$4(description)] })] }, String(i)));
-    };
+    const benefitImageStyles = 'w-12 h-12 min-w-12 rounded-full';
+
+    const BenefitsBlock = JSX(({ className = '', title, benefitList, ...rest }) => (jsxs(BlockWrapper, { className: className, defaultPadding: "p-default", ...rest, children: [title ? jsx(Heading, { headingType: "h3", as: "h2", className: "text-center", title: title }) : null, benefitList?.length ? (jsx("div", { className: "sm:flex sm:flex-wrap w-full sm:justify-center sm:gap-x-m gap-y-lg sm:gap-y-0 mt-8", role: "list", children: benefitList.map(renderBenefit$2) })) : null] })));
+    const renderBenefit$2 = (benefit, i) => (jsxs("div", { className: "flex items-center sm:basis-1/2 sm:max-w-[400px] mb-14", role: "listitem", children: [benefit?.icon?.icon ? (jsx(Img, { className: style('p-3 mr-5 shrink-0 bg-main-divider text-primary-main group-data-secondary:bg-white/30 group-data-secondary:text-black', benefitImageStyles), image: benefit.icon })) : null, benefit?.icon?.src ? jsx(Img, { className: "mr-5 shrink-0", image: benefit.icon }) : null, benefit?.label ? (jsxs("div", { className: "sm:h-full", children: [jsx(Heading, { headingType: "h6", children: benefit.label }), renderDescription$4(benefit.description)] })) : null] }, String(i)));
     const renderDescription$4 = (description) => {
         const benefitType = description?.benefitType || null;
         return description && benefitType ? (jsx("div", { className: "mt-2 text-l-light text-secondary-text group-data-secondary:text-white/80", children: benefitType === 'list'
@@ -1262,10 +1261,13 @@
         right: 'text-right',
     };
 
-    const BonusBenefitsBlock = JSX(({ bonusBenefits, cardTextAlign = 'center', className = '', columnsCount = '4', subtitle, title, ...rest }) => (jsxs(BlockWrapper, { className: style('flex flex-col text-center', className), defaultPadding: "p-default", ...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, title, description }, i) => {
-        return (jsxs("div", { className: style('flex flex-col items-center text-h6', !description && !title ? 'justify-center' : ''), children: [title ? jsx("span", { children: title }) : null, icon ? jsx(Img, { image: icon, height: "180", className: "w-auto" }) : null, description ? jsx("span", { children: description }) : null] }, String(i)));
-    };
+    const bonusBenefitAlign = 'text-center';
+
+    const bonusBenefitStyles = 'items-center';
+
+    const renderBonusBenefit = ({ icon, title, description }, i) => (jsxs("div", { className: style('flex flex-col', bonusBenefitStyles, !description && !title ? 'justify-center' : ''), children: [title ? (jsx(Text, { size: "text-h6", font: "font-normal", align: bonusBenefitAlign, children: title })) : null, icon ? jsx(Img, { image: icon, height: "180", className: "w-auto" }) : null, description ? (jsx(Text, { size: "text-h6", font: "font-normal", align: bonusBenefitAlign, children: description })) : null] }, String(i)));
+
+    const renderBonusBenefits = (bonusBenefits, columnsCount, cardTextAlign) => (jsx("div", { className: `grid gap-1 ${AlignText[cardTextAlign]} ${getElementsColsValue(columnsCount)}`, children: bonusBenefits.map(renderBonusBenefit) }));
     const getElementsColsValue = (colValue) => {
         switch (colValue) {
             case '3':
@@ -1279,6 +1281,10 @@
         }
     };
 
+    const BonusBenefitsBlock = JSX(({ bonusBenefits, cardTextAlign = 'center', className = '', columnsCount = '4', subtitle, title, ...rest }) => (jsxs(BlockWrapper, { className: style('p-default', className), defaultPadding: "p-default", ...rest, children: [jsx(Headline, { className: "mb-4 sm:mb-8", isPadding: false, title: title, description: subtitle, headlineVersion: "M" }), bonusBenefits?.length
+                ? renderBonusBenefits(bonusBenefits, columnsCount, cardTextAlign)
+                : null] })));
+
     const BusinessCard = JSX((props) => {
         const { title, image, cardItems, button } = props;
         return (jsxs("div", { className: "border-gray border p-9 w-1/2", children: [image ? (jsxs("div", { className: "flex justify-center", children: [image?.src ? jsx(Img, { className: "mb-5", image: image }) : null, image?.icon ? jsx(Img, { image: image }) : null] })) : null, title ? jsx(Heading, { headingType: "h4", title: title, className: "mb-6" }) : null, cardItems?.length ? jsx("ul", { children: cardItems.map((_, i) => renderItem(_, String(i))) }) : null, renderButtonsSection([button], { buttonClassName: 'mt-6' })] }));
@@ -2264,8 +2270,8 @@
         black: 'bg-black',
         white: 'bg-white',
     };
-    const CarouselCatalogCard = JSX(({ className = '', title, description, image, price, button, colors, ...rest }) => (jsxs(BlockWrapper, { className: style('border box-border border-gray min-w-[392px] h-full flex flex-col justify-left', className), ...rest, children: [image?.src ? jsx(Img, { 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-secondary-text", children: [jsx("div", { className: "mr-1.5", children: jsx(Text, { size: "text-s", align: "text-left", font: "font-light", 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("div", { role: "figure", className: `w-6 h-6 ml-3 border border-solid border-main-divider rounded-full ${cardStyleMap[color]}` }, String(i)));
+    const CarouselCatalogCard = JSX(({ className = '', title, description, image, price, button, colors, ...rest }) => (jsxs(BlockWrapper, { className: style('border box-border border-gray p-default sm:p-7 h-full flex flex-col justify-left', className), ...rest, children: [image?.src ? jsx(Img, { 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-secondary-text", children: [jsx("div", { className: "mr-1.5", 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, renderButtonsSection([button], { buttonClassName: 'mt-5 w-full' })] })));
+    const renderColorOption = (color, i) => (jsx("div", { role: "figure", className: `w-6 h-6 ml-1 sm:ml-3 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 });
@@ -2348,10 +2354,13 @@
     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: style('max-w-[308px] mt-2 text-s', version === 'primary' ? '!text-secondary-text' : ''), items: items.filter((item) => item?.text).map((item) => item.text), isDotted: isDotted })) : null;
 
+    const cardTitleFont = 'font-normal';
+    const cardDescriptionColor = 'text-secondary-text';
+
     const CarouselProgramsCard = JSX(({ className = '', title, icon, list = [], href, target, ...rest }) => {
-        return (jsx(BlockWrapper, { className: style('border border-gray', className), defaultPadding: "p-0", ...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(Img, { image: icon }) : null, icon?.src ? jsx(Img, { 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$2) })) : null] })] }) }));
+        return (jsx(BlockWrapper, { className: style('border border-gray', className), defaultPadding: "p-lg sm:p-0", ...rest, children: jsxs(LinkWrapper, { className: "sm:flex sm:items-center", href: href, target: target, children: [jsx("div", { className: "min-w-[200px] flex justify-center", children: icon?.src || icon?.icon ? jsx(Img, { image: icon }) : null }), jsxs("div", { className: "sm:px-3 py-xl", children: [title ? jsx(Heading, { className: "mb-2 sm:mb-3.5", headingType: "h6", title: title }) : null, list.length ? (jsx("div", { className: "flex flex-col gap-2 sm:gap-3", children: list?.map(renderList$2) })) : null] })] }) }));
     });
-    const renderList$2 = (_, 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)));
+    const renderList$2 = (_, i) => (jsxs("div", { className: "flex flex-row-reverse justify-between gap-y-1 sm:flex-col", children: [_.title ? (jsx(Text, { size: "text-l", font: cardTitleFont, children: _.title })) : null, _.description ? (jsx(Paragraph, { size: "text-l", font: "font-light", color: cardDescriptionColor, children: _.description })) : null] }, String(i)));
 
     const buttonSizeStyles = {
         default: 'w-14 h-14',
@@ -2906,12 +2915,12 @@
         'bg-white': 'text-primary-text',
         transparent: 'text-white',
     };
-    const renderTitle$2 = (title, bgColor, className) => {
+    const renderTitle$1 = (title, bgColor, className) => {
         return (jsx("span", { className: `${TEXT_COLOR[bgColor]} ml-2.5 font-medium ${className || ''}`, children: title || 'Россельхозбанк' }));
     };
 
     const Logo = JSX(({ className = '', href, logo, children = logo?.title, targetBlank, bgColor = 'bg-white', showTitle = true, }) => {
-        return (jsxs("a", { className: `inline-flex items-center font-sans no-underline ${className}`, href: href || '/', target: targetBlank ? '_blank' : '_self', "aria-label": logo?.title || 'Россельхозбанк', children: [renderImage$2(bgColor, logo?.image, { width: '40', height: '45' }), showTitle ? renderTitle$2(children || logo?.title, bgColor) : null] }));
+        return (jsxs("a", { className: `inline-flex items-center font-sans no-underline ${className}`, href: href || '/', target: targetBlank ? '_blank' : '_self', "aria-label": logo?.title || 'Россельхозбанк', children: [renderImage$2(bgColor, logo?.image, { width: '40', height: '45' }), showTitle ? renderTitle$1(children || logo?.title, bgColor) : null] }));
     });
 
     const CloseButton = JSX(({ className, onClick }) => (jsx("button", { className: style('flex justify-center items-center w-12 h-12 p-1 bg-transparent border-none', className), onClick: onClick, title: "\u0417\u0430\u043A\u0440\u044B\u0442\u044C", children: jsx(Img, { image: { icon: 'CloseIcon' }, width: "24", height: "24" }) })));
@@ -4460,10 +4469,9 @@
     const WIDESCREEN_ACTIVE_LINK_CLASSES = 'bg-primary-main text-white';
     const TEXT_CLASSES = 'font-sans text-m text-center';
     const ACTIVE_TEXT_CLASSES = 'text-white';
-    const INACTIVE_TEXT_CLASSES = 'text-secondary-text group-hover/btn:text-primary-main';
-    const WHITE_ACTIVE_TEXT_CLASSES = 'text-primary-main';
-    const GROUP_TAB_CLASSES = {
-        div: {
+    const INACTIVE_TEXT_CLASSES = 'text-secondary-text sm:group-hover/btn:text-primary-main';
+    const TAB_CLASSES = {
+        block: {
             scrollable: {
                 active: `inline-flex px-4 grow whitespace-nowrap ${LINK_CLASSES} ${SCROLLABLE_ACTIVE_LINK_CLASSES}`,
                 default: `inline-flex px-4 grow whitespace-nowrap ${LINK_CLASSES} ${INACTIVE_LINK_CLASSES}`,
@@ -4479,37 +4487,7 @@
         },
         text: {
             scrollable: {
-                active: `h-full border-0 border-b-2`,
-                default: ``,
-            },
-            centered: {
-                active: '',
-                default: '',
-            },
-            wideScreen: {
-                active: '',
-                default: '',
-            },
-        },
-    };
-    const LINK_TAB_CLASSES = {
-        link: {
-            scrollable: {
-                active: `inline-flex px-4 grow whitespace-nowrap ${LINK_CLASSES} ${SCROLLABLE_ACTIVE_LINK_CLASSES}`,
-                default: `inline-flex px-4 grow whitespace-nowrap ${LINK_CLASSES} ${INACTIVE_LINK_CLASSES}`,
-            },
-            centered: {
-                active: `px-4 rounded-md ${LINK_CLASSES} ${WIDESCREEN_ACTIVE_LINK_CLASSES} whitespace-nowrap`,
-                default: `px-4 rounded-md ${LINK_CLASSES} group/btn bg-transparent whitespace-nowrap`,
-            },
-            wideScreen: {
-                active: `${LINK_CLASSES} ${WIDESCREEN_ACTIVE_LINK_CLASSES}`,
-                default: `${LINK_CLASSES} ${INACTIVE_LINK_CLASSES}`,
-            },
-        },
-        text: {
-            scrollable: {
-                active: `${TEXT_CLASSES} flex items-center h-full border-0 border-b-2 ${WHITE_ACTIVE_TEXT_CLASSES}`,
+                active: `${TEXT_CLASSES} flex items-center h-full border-0 border-b-2`,
                 default: `${TEXT_CLASSES} ${INACTIVE_TEXT_CLASSES}`,
             },
             centered: {
@@ -4517,20 +4495,15 @@
                 default: `${TEXT_CLASSES} ${INACTIVE_TEXT_CLASSES}`,
             },
             wideScreen: {
-                active: `${TEXT_CLASSES} ${ACTIVE_TEXT_CLASSES}`,
-                default: `${TEXT_CLASSES} ${INACTIVE_TEXT_CLASSES}`,
+                active: `${TEXT_CLASSES} ${ACTIVE_TEXT_CLASSES} text-black px-2.5 bg-white sm:bg-primary-main sm:text-white`,
+                default: `${TEXT_CLASSES} ${INACTIVE_TEXT_CLASSES} px-2.5 bg-white`,
             },
         },
     };
-    const getGroupTabClassName = (type, active, tabsMode) => {
+    const getTabClassName = (type, active, tabsMode) => {
         const styleActive = active ? 'active' : 'default';
         const mode = tabsMode || 'wideScreen';
-        return GROUP_TAB_CLASSES[type][mode][styleActive];
-    };
-    const getLinkTabClassName = (type, active, tabsMode) => {
-        const styleActive = active ? 'active' : 'default';
-        const mode = tabsMode || 'wideScreen';
-        return LINK_TAB_CLASSES[type][mode][styleActive];
+        return TAB_CLASSES[type][mode][styleActive];
     };
 
     const LinkTab = JSX((props) => {
@@ -4542,28 +4515,21 @@
             adjustedProps.onClick(ev);
             onClick(tab);
         };
-        return (jsx("a", { role: "tab", className: getLinkTabClassName('link', active, tabsMode), target: tab.target, href: adjustedProps.href, onClick: handleClick, children: jsx("span", { className: getLinkTabClassName('text', active, tabsMode), children: tab.text }) }));
+        return (jsx("div", { className: getTabClassName('block', active, tabsMode), role: "tab", "aria-selected": active, onClick: () => onClick(tab), children: jsx("a", { role: "tab", className: style('flex flex-1 items-center justify-center h-full', getTabClassName('text', active, tabsMode)), target: tab.target, href: adjustedProps.href, onClick: handleClick, children: jsx("span", { children: tab.text }) }) }));
     });
 
-    const BADGE_CLASSES = 'min-w-[22px] h-[22px] rounded-full text-xs ml-2 flex justify-center items-center';
-    const ACTIVE_BADGE_CLASSES = 'bg-white/30 text-white';
-    const INACTIVE_BADGE_CLASSES = 'bg-main-divider text-secondary-text group-hover/btn:text-primary-main';
+    const BADGE_CLASSES = 'bg-main-divider min-w-[22px] h-[22px] rounded-full text-xs ml-2 flex justify-center items-center';
+    const LIGHT_BADGE_CLASSES = 'bg-white/30 text-white';
+    const DARK_BADGE_CLASSES = 'text-secondary-text group-hover/btn:text-primary-main';
     const renderGroupTab = ({ page, currentTab, showCounter, onClick, tabsMode }) => (tab, i) => {
         const active = currentTab === tab;
         const count = tab.ref && page?.blocks
             ? page.blocks.filter((block) => block?.labels?.includes(tab.ref)).length
             : 0;
-        return (jsx("div", { className: getGroupTabClassName('div', active, tabsMode), role: "tab", "aria-selected": active, onClick: () => onClick(tab), children: jsxs("div", { className: `flex flex-1 items-center justify-center ${getGroupTabClassName('text', active, tabsMode)}`, children: [renderTitle$1(tab.title, active, tabsMode), renderCount(showCounter, count, active)] }) }, `group-${String(i)}`));
-    };
-    const renderTitle$1 = (title, active, tabsMode) => {
-        const activeClassName = active ? WHITE_ACTIVE_TEXT_CLASSES : INACTIVE_TEXT_CLASSES;
-        const titleClassName = tabsMode === 'scrollable'
-            ? `${TEXT_CLASSES} ${activeClassName}`
-            : `${TEXT_CLASSES} ${active ? ACTIVE_TEXT_CLASSES : INACTIVE_TEXT_CLASSES}`;
-        return title ? jsx("h3", { className: titleClassName, children: title }) : null;
+        return (jsx("div", { className: getTabClassName('block', active, tabsMode), role: "tab", "aria-selected": active, onClick: () => onClick(tab), children: jsxs("div", { className: style('flex flex-1 items-center justify-center h-full', getTabClassName('text', active, tabsMode)), children: [jsx("span", { children: tab.title }), showCounter && count ? renderCount(tabsMode, count, active) : null] }) }, `group-${String(i)}`));
     };
-    const renderCount = (showCounter, count, active) => {
-        return showCounter && count ? (jsx("div", { className: `${BADGE_CLASSES} ${active ? ACTIVE_BADGE_CLASSES : INACTIVE_BADGE_CLASSES}`, children: count })) : null;
+    const renderCount = (tabsMode, count, active) => {
+        return (jsx("div", { className: style(BADGE_CLASSES, active && tabsMode !== 'scrollable' ? LIGHT_BADGE_CLASSES : DARK_BADGE_CLASSES), children: count }));
     };
 
     const renderTab = ({ page, showCounter, ...rest }) => (tab, i) => {
@@ -4596,7 +4562,7 @@
     });
 
     const Tabs = JSX((props) => {
-        const { className = '', tabs, isSticky, ...rest } = props;
+        const { className = '', isSticky, tabs, ...rest } = props;
         const [currentTab, setCurrentTab] = useState(tabs ? tabs[0] : undefined);
         useEffect(() => {
             if (!tabs || !tabs[0]) {
@@ -4613,7 +4579,7 @@
             fireTabEvent(selectedTab);
             setCurrentTab(selectedTab);
         }, []);
-        return (jsx(BlockWrapper, { className: `relative box-border flex gap-x-1 w-full ${isSticky ? 'sticky top-1 z-20' : ''} ${className}`, defaultPadding: "p-0", role: "tablist", ...rest, children: renderTabs({ tabs, onClick: handleClick, currentTab, ...rest }) }));
+        return (jsx(BlockWrapper, { className: style('relative box-border flex gap-x-1 w-full overflow-x-auto no-scrollbar', isSticky ? 'sticky top-1 z-20' : '', className), defaultPadding: "p-0", role: "tablist", ...rest, children: renderTabs({ tabs, onClick: handleClick, currentTab, ...rest }) }));
     });
     const renderTabs = ({ tabsMode, tabs, ...rest }) => {
         switch (tabsMode) {
@@ -5049,7 +5015,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.12.4";
+    const packageVersion = "0.12.5";
 
     exports.Blocks = Blocks;
     exports.ContentPage = ContentPage;