@redneckz/wildless-cms-uni-blocks 0.14.25 → 0.14.26

package/src/components/Carousel/Carousel.fixture.tsx

@@ -1,7 +1,6 @@
-import '../../setup-fixture';
-
 import { type BlockRendererOptions } from '../../BlockRenderer/BlockRendererOptions';
 import { type Picture } from '../../model/Picture';
+import '../../setup-fixture';
 import { Blocks } from '../Blocks';
 import { BANK_HISTORY_CARD } from '../CarouselBankHistoryCard/CarouselBankHistoryCard.fixture';
 import { CARD, CARD_MINI, CARD_NEW } from '../CarouselCard/CarouselCard.fixture';
@@ -11,8 +10,8 @@ import {
   PRODUCT_CARD,
   PRODUCT_CARD_SMALL,
 } from '../CarouselProductCard/CarouselProductCard.fixture';
-import { BUSINESS_CARD } from '../CarouselProgramsCard/CarouselProgramsCard.fixture';
 import {
+  CAROUSEL_RECOMMENDATION_CARD_BENEFITS,
   CAROUSEL_RECOMMENDATION_CARD_SECONDARY,
   CAROUSEL_RECOMMENDATION_CARD_WITHOUT_LIST,
 } from '../CarouselRecommendationCard/CarouselRecommendationCard.fixture';
@@ -161,39 +160,40 @@ export default {
       />
     </div>
   ),
-  program: (
+  investment: (
     <div className="container grid grid-cols-12">
       <Carousel
         className="col-span-12"
-        visibleItemCount={2}
+        visibleItemCount={0}
         block={{
           type: 'Carousel',
           blocks: new Array(6).fill({
-            type: 'CarouselProgramsCard',
-            content: BUSINESS_CARD,
+            type: 'CarouselInvestmentCard',
+            content: INVESTMENT_CARD_WITH_SINGLE_COLUMN,
           }),
         }}
         options={options}
       />
     </div>
   ),
-  investment: (
+  recommendations: (
     <div className="container grid grid-cols-12">
       <Carousel
         className="col-span-12"
         visibleItemCount={0}
+        cardSize="big"
         block={{
           type: 'Carousel',
           blocks: new Array(6).fill({
-            type: 'CarouselInvestmentCard',
-            content: INVESTMENT_CARD_WITH_SINGLE_COLUMN,
+            type: 'CarouselRecommendationCard',
+            content: CAROUSEL_RECOMMENDATION_CARD_WITHOUT_LIST,
           }),
         }}
         options={options}
       />
     </div>
   ),
-  recommendations: (
+  recommendationsSecondary: (
     <div className="container grid grid-cols-12">
       <Carousel
         className="col-span-12"
@@ -203,14 +203,14 @@ export default {
           type: 'Carousel',
           blocks: new Array(6).fill({
             type: 'CarouselRecommendationCard',
-            content: CAROUSEL_RECOMMENDATION_CARD_WITHOUT_LIST,
+            content: CAROUSEL_RECOMMENDATION_CARD_SECONDARY,
           }),
         }}
         options={options}
       />
     </div>
   ),
-  recommendationsSecondary: (
+  recommendationsBenefits: (
     <div className="container grid grid-cols-12">
       <Carousel
         className="col-span-12"
@@ -220,13 +220,14 @@ export default {
           type: 'Carousel',
           blocks: new Array(6).fill({
             type: 'CarouselRecommendationCard',
-            content: CAROUSEL_RECOMMENDATION_CARD_SECONDARY,
+            content: CAROUSEL_RECOMMENDATION_CARD_BENEFITS,
           }),
         }}
         options={options}
       />
     </div>
   ),
+
   'bank-history': (
     <div className="container grid grid-cols-12">
       <Carousel

package/src/components/Carousel/Carousel.tsx

@@ -68,7 +68,7 @@ export const Carousel: JSXBlock<CarouselProps> = JSX<CarouselProps>(
           />
         </div>
         <SwipeListControlDots
-          className="@lg:hidden"
+          className="@5xl:hidden"
           containerRef={containerRef}
           activeIndex={dotsActiveIndex}
           dotCount={count}

package/src/components/CarouselCatalogCard/CarouselCatalogCard.tsx

@@ -39,7 +39,7 @@ export const CarouselCatalogCard = JSX<CarouselCatalogCardProps>(
         className="h-full"
         padding={padding}
         title={
-          title ? (
+          title || description ? (
             <Headline
               title={title}
               description={description}

package/src/components/CarouselRecommendationCard/CarouselRecommendationCard.fixture.mobile.tsx

@@ -1,6 +1,6 @@
-import '../../setup-fixture';
-
 import { type Picture } from '../../model/Picture';
+import '../../setup-fixture';
+import { type ComplexBenefitContent } from '../../ui-kit/BenefitItem/BenefitItemContent';
 import { type ButtonContent } from '../../ui-kit/Button/ButtonContent';
 import { CarouselRecommendationCard } from './CarouselRecommendationCard';
 import { type CarouselRecommendationCardContent } from './CarouselRecommendationCardContent';
@@ -15,6 +15,28 @@ const icon: Picture = {
   title: 'product-basket',
 };
 
+const iconCoin: Picture = {
+  src: 'coin.png',
+  format: 'webp',
+  size: {
+    width: 130,
+  },
+  title: 'money',
+};
+
+const benefits: ComplexBenefitContent[] = [
+  {
+    type: 'default',
+    label: 'От 16 до 81',
+    description: 'платежей',
+  },
+  {
+    type: 'default',
+    label: 'От 3 до 7,5 млн руб.',
+    description: 'остаток по счёту',
+  },
+];
+
 const socialMediaWithText: ButtonContent[] = [
   {
     href: 'https://t.me',
@@ -80,6 +102,15 @@ export const CAROUSEL_RECOMMENDATION_CARD_SECONDARY: CarouselRecommendationCardC
   socialMedia: socialMediaWithoutText,
 };
 
+export const CAROUSEL_RECOMMENDATION_CARD_BENEFITS: CarouselRecommendationCardContent = {
+  title: 'Продвинутый',
+  imageOptions: {
+    directionRight: false,
+  },
+  icon: iconCoin,
+  benefits: benefits,
+};
+
 export default {
   default: (
     <div className="container grid grid-cols-12">
@@ -132,4 +163,12 @@ export default {
       />
     </div>
   ),
+  benefits: (
+    <div className="container grid grid-cols-12">
+      <CarouselRecommendationCard
+        className="col-span-12"
+        {...CAROUSEL_RECOMMENDATION_CARD_BENEFITS}
+      />
+    </div>
+  ),
 };

package/src/components/CarouselRecommendationCard/CarouselRecommendationCard.fixture.tsx

@@ -1,6 +1,6 @@
-import '../../setup-fixture';
-
 import { type Picture } from '../../model/Picture';
+import '../../setup-fixture';
+import { type ComplexBenefitContent } from '../../ui-kit/BenefitItem/BenefitItemContent';
 import { type ButtonContent } from '../../ui-kit/Button/ButtonContent';
 import { CarouselRecommendationCard } from './CarouselRecommendationCard';
 import { type CarouselRecommendationCardContent } from './CarouselRecommendationCardContent';
@@ -15,6 +15,28 @@ const icon: Picture = {
   title: 'product-basket',
 };
 
+const iconCoin: Picture = {
+  src: 'coin.png',
+  format: 'webp',
+  size: {
+    width: 130,
+  },
+  title: 'money',
+};
+
+const benefits: ComplexBenefitContent[] = [
+  {
+    type: 'default',
+    label: 'От 16 до 81',
+    description: 'платежей',
+  },
+  {
+    type: 'default',
+    label: 'От 3 до 7,5 млн руб.',
+    description: 'остаток по счёту',
+  },
+];
+
 const socialMediaWithText: ButtonContent[] = [
   {
     href: 'https://t.me',
@@ -87,6 +109,15 @@ export const CAROUSEL_RECOMMENDATION_CARD_SECONDARY: CarouselRecommendationCardC
   socialMedia: socialMediaWithoutText,
 };
 
+export const CAROUSEL_RECOMMENDATION_CARD_BENEFITS: CarouselRecommendationCardContent = {
+  title: 'Продвинутый',
+  imageOptions: {
+    directionRight: false,
+  },
+  icon: iconCoin,
+  benefits: benefits,
+};
+
 export default {
   default: (
     <div className="container grid grid-cols-12">
@@ -139,4 +170,12 @@ export default {
       />
     </div>
   ),
+  benefits: (
+    <div className="container grid grid-cols-12">
+      <CarouselRecommendationCard
+        className="col-span-12"
+        {...CAROUSEL_RECOMMENDATION_CARD_BENEFITS}
+      />
+    </div>
+  ),
 };

package/src/components/CarouselRecommendationCard/CarouselRecommendationCard.tsx

@@ -1,10 +1,13 @@
 import { JSX } from '@redneckz/uni-jsx';
 import { type UniBlockProps } from '../../model/JSXBlock';
+import { leftOrRightImage } from '../../ui-kit/BaseProductTile/BaseProductTile';
 import { BaseTile } from '../../ui-kit/BaseTile/BaseTile';
+import { BenefitsList } from '../../ui-kit/BenefitsList/BenefitsList';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
 import { Img } from '../../ui-kit/Img/Img';
 import { LinkWrapper } from '../../ui-kit/LinkWrapper/LinkWrapper';
 import { List } from '../../ui-kit/List/List';
+import { isIcon } from '../../utils/isIcon';
 import { style } from '../../utils/style';
 import { SocialMedia } from '../Footer/SocialMedia';
 import { Headline } from '../Headline/Headline';
@@ -27,7 +30,12 @@ export const CarouselRecommendationCard = JSX<RecommendationCardProps>(
     target,
     title,
     align = 'text-left',
-    isImageAlwaysOnRight = ImageAlwaysOnRight,
+    benefits,
+    imageOptions: {
+      directionRight = true,
+      isImageAlwaysOnRight = ImageAlwaysOnRight,
+      isImageSecondary = false,
+    } = {},
     ...rest
   }) => {
     return (
@@ -39,7 +47,7 @@ export const CarouselRecommendationCard = JSX<RecommendationCardProps>(
         <LinkWrapper href={href} target={target} className="h-full">
           <BaseTile
             className="h-full"
-            defaultPadding="p-m"
+            defaultPadding="p-2xl"
             padding={padding}
             insetTitle={
               title ? (
@@ -52,15 +60,17 @@ export const CarouselRecommendationCard = JSX<RecommendationCardProps>(
                 />
               ) : null
             }
-            rightImage={icon?.icon || icon?.src ? <Img image={icon} /> : null}
+            {...leftOrRightImage(isIcon(icon) ? <Img image={icon} /> : null, directionRight)}
             buttons={
               socialMedia.length ? (
-                <SocialMedia media={socialMedia} showButtonText={true} version={rest.version} />
+                <SocialMedia media={socialMedia} showButtonText={true} version={rest?.version} />
               ) : null
             }
             isImageAlwaysOnRight={isImageAlwaysOnRight}
+            isImageSecondary={isImageSecondary}
           >
-            {items.length ? <List items={items} listItemSize={listItemSize} /> : null}
+            <BenefitsList benefits={benefits} />
+            <List items={items} listItemSize={listItemSize} />
           </BaseTile>
         </LinkWrapper>
       </BlockWrapper>

package/src/components/CarouselRecommendationCard/CarouselRecommendationCardContent.ts

@@ -2,6 +2,8 @@ import { type AlignProps, type HeadlineCommonProps } from '../../model/HeadlineT
 import { type UniBlockContent } from '../../model/JSXBlock';
 import { type LinkCommonProps } from '../../model/LinkProps';
 import { type IconProps } from '../../model/Picture';
+import { type TileImageOptions } from '../../ui-kit/BaseProductTile/BaseProductTileContent';
+import { type BenefitsListContent } from '../../ui-kit/BenefitsList/BenefitsListContent';
 import { type ButtonContent } from '../../ui-kit/Button/ButtonContent';
 import { type ListContent } from '../../ui-kit/List/ListContent';
 
@@ -13,9 +15,9 @@ export type CarouselRecommendationCardContent = UniBlockContent &
   ListContent &
   IconProps &
   LinkCommonProps &
-  AlignProps & {
+  AlignProps &
+  BenefitsListContent & {
     /** @title Соц сети */
     socialMedia?: ButtonContent[];
-    /** @title Изображение всегда справа */
-    isImageAlwaysOnRight?: boolean;
+    imageOptions?: TileImageOptions;
   };

package/src/components/CarouselTariffsCard/CarouselTariffsCard.tsx

@@ -1,6 +1,5 @@
 import { JSX } from '@redneckz/uni-jsx';
 import { type UniBlockProps } from '../../model/JSXBlock';
-import { type Picture } from '../../model/Picture';
 import { type VNode } from '../../model/VNode';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
 import { Button } from '../../ui-kit/Button/Button';
@@ -10,6 +9,7 @@ import { FoldableSection } from '../../ui-kit/Foldable/FoldableSection';
 import { Heading } from '../../ui-kit/Heading/Heading';
 import { Icon } from '../../ui-kit/Icon/Icon';
 import { Img } from '../../ui-kit/Img/Img';
+import { isIcon } from '../../utils/isIcon';
 import { style } from '../../utils/style';
 import { type CarouselTariffsCardContent } from './CarouselTariffsCardContent';
 import { renderCardInfo } from './renderCardInfo';
@@ -26,7 +26,11 @@ export const CarouselTariffsCard = JSX<CarouselTariffsCardProps>(
 
     return (
       <BlockWrapper className={style('flex flex-col', className)} defaultPadding="p-3xl" {...rest}>
-        {renderIconBlock(icon)}
+        {isIcon(icon) ? (
+          <div className="self-center">
+            <Img image={icon} />
+          </div>
+        ) : null}
         {title ? (
           <Heading className={style('pt-xs', align)} headingType="h5" title={title} />
         ) : null}
@@ -47,10 +51,6 @@ export const CarouselTariffsCard = JSX<CarouselTariffsCardProps>(
   },
 );
 
-const renderIconBlock = (icon?: Picture) => (
-  <div className="self-center">{icon?.src || icon?.icon ? <Img image={icon} /> : null}</div>
-);
-
 const renderFoldButton = ({ isUnfolded, onToggle }: FoldablePartProps): VNode => (
   <button
     className="w-full cursor-pointer text-primary-main pt-lg flex justify-between items-center"

package/src/components/ContentPage/ContentPage.tsx

@@ -42,7 +42,7 @@ export const ContentPage: JSXBlock<ContentPageProps> = JSX<ContentPageProps>(
               {renderBlocksList(slots?.header, { ...options, slotName: 'header' })}
             </div>
           ) : null}
-          <div className="container space-y-px @lg:space-y-0 @lg:grid @lg:grid-cols-12 @lg:gap-2xs">
+          <div className="container space-y-px @5xl:space-y-0 @5xl:grid @5xl:grid-cols-12 @5xl:gap-2xs">
             {renderChildren({ block: data, options, extraProps: { className: 'scroll-mt-12' } })}
             {renderBlocksList(slots?.footer, { ...options, slotName: 'footer' })}
           </div>

package/src/components/Footer/SocialMedia.tsx

@@ -1,10 +1,10 @@
 import { JSX } from '@redneckz/uni-jsx';
 import { useState } from '@redneckz/uni-jsx/lib/hooks';
 import type { ButtonVersion } from '../../model/ButtonVersion';
-import type { Picture } from '../../model/Picture';
 import type { ButtonContent } from '../../ui-kit/Button/ButtonContent';
 import { renderButtonsSection } from '../../ui-kit/Button/renderButtonsSection';
 import { Text } from '../../ui-kit/Text/Text';
+import { isIcon } from '../../utils/isIcon';
 import { style } from '../../utils/style';
 import { findIconByHref } from './findIconByHref';
 
@@ -22,7 +22,7 @@ export const SocialMedia = JSX<SocialMediaProps>(
     const buttons: ButtonContent[] | undefined = media?.map((_) => {
       const { href, icon, text } = _;
       const { iconMapped } = findIconByHref(href);
-      const iconCustom = getFilteredIcon(icon) ?? iconMapped;
+      const iconCustom = isIcon(icon) ? icon : iconMapped;
       const buttonText = showButtonText ? { text } : { text: '' };
 
       if (!hasText && text) {
@@ -60,5 +60,3 @@ export const SocialMedia = JSX<SocialMediaProps>(
     );
   },
 );
-
-const getFilteredIcon = (icon: Picture | undefined) => (icon?.src || icon?.icon ? icon : undefined);

package/src/components/Footer/TextInformation.tsx

@@ -12,7 +12,7 @@ export const TextInformation = JSX<FooterLink>(({ className = '', links }) => (
       </Text>
     </div>
     {links?.length ? (
-      <div className="flex flex-col @lg:flex-row justify-start items-start gap-x-lg gap-y-xs pt-lg">
+      <div className="flex flex-col @5xl:flex-row justify-start items-start gap-x-lg gap-y-xs pt-lg">
         {links.map((_, i) => (
           <TextInformationLink key={String(i)} index={i} {..._} />
         ))}

package/src/components/ProductBlock/renderBackwardButton.tsx

@@ -22,7 +22,13 @@ export function renderBackwardButton(version: ButtonVersion, handleClick: () =>
           }}
         />
       </div>
-      <Button version="link" text={text} ariaLabel={text} onClick={handleClick} />
+      <Button
+        version="link"
+        className="group-data-secondary:text-white/80"
+        text={text}
+        ariaLabel={text}
+        onClick={handleClick}
+      />
     </div>
   );
 }

package/src/components/RepresentativeOfficeInfo/RepresentativeOfficeInfo.tsx

@@ -1,7 +1,6 @@
 import { JSX } from '@redneckz/uni-jsx';
 import { type IconName } from '../../icons/IconName';
 import { type UniBlockProps } from '../../model/JSXBlock';
-import { type Picture } from '../../model/Picture';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
 import { renderButtonsSection } from '../../ui-kit/Button/renderButtonsSection';
 import { Heading } from '../../ui-kit/Heading/Heading';
@@ -10,6 +9,7 @@ import { Img } from '../../ui-kit/Img/Img';
 import { RichText } from '../../ui-kit/RichText/RichText';
 import { Text } from '../../ui-kit/Text/Text';
 import { type TextColor } from '../../ui-kit/Text/TextProps';
+import { isIcon } from '../../utils/isIcon';
 import { style } from '../../utils/style';
 import { type RepresentativeOfficeInfoContent } from './RepresentativeOfficeInfoContent';
 
@@ -36,7 +36,11 @@ export const RepresentativeOfficeInfo = JSX<RepresentativeOfficeInfoProps>(
       {...rest}
     >
       <div className="w-full flex justify-between flex-row-reverse">
-        {renderIconBlock(icon)}
+        {isIcon(icon) ? (
+          <div className={'w-10 h-7 sm:w-24 sm:h-16'}>
+            <Img image={icon} />
+          </div>
+        ) : null}
         {title ? <Heading headingType="h3" as="h3" title={title} /> : null}
       </div>
       <div className="w-full space-y-m">
@@ -59,12 +63,6 @@ export const RepresentativeOfficeInfo = JSX<RepresentativeOfficeInfoProps>(
   ),
 );
 
-const renderIconBlock = (icon?: Picture) => (
-  <div className={'w-10 h-7 sm:w-24 sm:h-16'}>
-    {icon?.src || icon?.icon ? <Img image={icon} /> : null}
-  </div>
-);
-
 const renderDescriptionBlock = (__html?: string) => (
   <div className="border-b border-main-divider pb-lg">
     <RichText __html={__html} />

package/src/components/StepsBlock/StepsBlock.mobile.tsx

@@ -7,9 +7,9 @@ import { renderButtonsSection } from '../../ui-kit/Button/renderButtonsSection';
 import { Img } from '../../ui-kit/Img/Img';
 import { RichText } from '../../ui-kit/RichText/RichText';
 import { assertUnreachable } from '../../utils/assertUnreachable';
+import { isIcon } from '../../utils/isIcon';
 import { style } from '../../utils/style';
 import { Headline } from '../Headline/Headline';
-import { checkCanRenderIcon } from './checkCanRenderIcon';
 import { type DefaultStep, type Step, type StepsBlockContent } from './StepsBlockContent';
 import { STEPS_BLOCK_STYLE } from './StepsBlockStyleMaps';
 
@@ -128,7 +128,7 @@ const renderIconArea = (size: SizeVersion, version: BlockVersion) => (step: Step
       )}
     >
       <span className="flex max-w-full max-h-full self-center text-h4 text-secondary-text group-data-secondary:text-white">
-        {checkCanRenderIcon(step?.icon) ? (
+        {isIcon(step?.icon) ? (
           <Img
             image={{ ...step.icon, iconVersion: step.icon?.iconVersion || iconVersion }}
             imageClassName="max-w-full max-h-full"

package/src/components/StepsBlock/StepsBlock.tsx

@@ -4,10 +4,10 @@ import { type UniBlockProps } from '../../model/JSXBlock';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
 import { renderButtonsSection } from '../../ui-kit/Button/renderButtonsSection';
 import { Img } from '../../ui-kit/Img/Img';
+import { isIcon } from '../../utils/isIcon';
 import { joinList } from '../../utils/joinList';
 import { style } from '../../utils/style';
 import { Headline } from '../Headline/Headline';
-import { checkCanRenderIcon } from './checkCanRenderIcon';
 import { renderStep } from './renderStep';
 import { type Step, type StepsBlockContent } from './StepsBlockContent';
 import { STEPS_BLOCK_STYLE, type StyleType } from './StepsBlockStyleMaps';
@@ -89,9 +89,9 @@ const renderStepIcon =
         )} flex justify-center items-center text-center rounded-full box-border z-10`}
         version={stepVersion}
       >
-        {checkCanRenderIcon(icon) ? (
+        {isIcon(icon) ? (
           <Img
-            image={{ ...icon, iconVersion: icon.iconVersion || iconVersion }}
+            image={{ ...icon, iconVersion: icon?.iconVersion || iconVersion }}
             width="48"
             height="48"
           />

package/src/components/Tabs/Tabs.tsx

@@ -31,9 +31,9 @@ export const Tabs = JSX<TabsBlockProps>(
             (_) => _.type === 'group' && _.ref === router.query[TAB_QUERY_PARAM_KEY],
           ) || 0
         : 0;
-
+      const defaultTab = tabs[defaultTabIndex] || tabs[0];
       setActiveTabIndex(defaultTabIndex);
-      fireTabEvent(tabs[defaultTabIndex]);
+      fireTabEvent(defaultTab);
     }, [isReady]);
 
     useEffect(() => {
@@ -57,10 +57,14 @@ export const Tabs = JSX<TabsBlockProps>(
     const handleChange = useCallback(
       (_: TabItemBase) => {
         const index = tabsControlItems.indexOf(_);
+        const tab = tabs[index];
 
         setActiveTabIndex(index);
-        fireTabEvent(tabs[index]);
-        updateUrlSearchTabParam(_);
+        fireTabEvent(tab);
+
+        if (tab.type === 'group') {
+          updateUrlSearchTabParam(_);
+        }
       },
       [tabs, tabsControlItems],
     );

package/src/components/Tile/Tile.fixture.tsx

@@ -1,6 +1,5 @@
-import '../../setup-fixture';
-
 import { type Picture } from '../../model/Picture';
+import '../../setup-fixture';
 import { Tile } from './Tile';
 import { type TileContent } from './TileContent';
 

package/src/ui-kit/BaseProductTile/BaseProductTile.tsx

@@ -81,7 +81,7 @@ export const BaseProductTile = JSX<BaseProductTileProps>(
   },
 );
 
-const leftOrRightImage = (img: VNode, directionRight: boolean) =>
+export const leftOrRightImage = (img: VNode, directionRight: boolean) =>
   directionRight ? { rightImage: img } : { leftImage: img };
 
 const renderTags = (tags: string[]) => (tags?.length ? <Tags tags={tags} /> : null);

package/src/ui-kit/BaseTile/BaseTile.tsx

@@ -38,7 +38,7 @@ export const BaseTile = JSX<BaseTileProps>(
   }) => (
     <div
       className={style(
-        'relative flex flex-col gap-3xl font-sans overflow-hidden',
+        'relative flex flex-col gap-3xl overflow-hidden',
         padding || defaultPadding,
         className,
       )}
@@ -46,10 +46,11 @@ export const BaseTile = JSX<BaseTileProps>(
       {title ? <div className="relative">{title}</div> : null}
       <div
         className={style(
-          'grow relative flex flex-col-reverse @xl:flex-row justify-around @xl:justify-between items-stretch gap-3xl',
+          'grow relative flex flex-col @md:flex-row gap-3xl',
+          leftImage ? 'self-start' : '',
         )}
       >
-        {renderImageContainer(leftImage, { imageAlign })}
+        {renderImageContainer(leftImage, { imageAlign, className: 'm-auto' })}
         <div
           className={style(
             'grid gap-3xl',
@@ -66,7 +67,7 @@ export const BaseTile = JSX<BaseTileProps>(
               '@xl:justify-self-end @xl:col-start-2',
               buttons ? rowSpanStyle(isImageAlwaysOnRight) : '',
               positionStyle(isImageAlwaysOnRight),
-              isImageSecondary ? 'hidden @xl:block' : '',
+              imageSecondaryStyle(isImageSecondary),
             ),
             imageAlign,
           })}
@@ -101,3 +102,6 @@ const renderImageContainer = (
       {image}
     </div>
   ) : null;
+
+const imageSecondaryStyle = (isImageSecondary: boolean) =>
+  isImageSecondary ? 'hidden @md:block' : '';

package/src/ui-kit/Button/ButtonInner.tsx

@@ -6,17 +6,22 @@ import { type ButtonProps } from './ButtonProps';
 
 export const ButtonInner = JSX<ButtonProps>((props) => {
   const { text, aboveText, appendLeft, appendRight, version = 'primary' } = props;
+  const iconHideStyle = isWithText(props) ? 'hidden lg:block' : '';
 
   return (
     <div className={style(getButtonStyle(props), 'flex gap-xs')}>
-      {appendLeft ? <div className={iconStyleMap[version]}>{appendLeft}</div> : null}
+      {appendLeft ? (
+        <div className={style(iconHideStyle, iconStyleMap[version])}>{appendLeft}</div>
+      ) : null}
       {isWithText(props) ? (
         <div className="whitespace-pre">
           {aboveText ? <div className="text-xs font-light text-left">{aboveText}</div> : null}
           <div className={`text-left ${aboveText ? 'text-s -mt-3xs' : 'text-l'}`}>{text}</div>
         </div>
       ) : null}
-      {appendRight ? <div className={iconStyleMap[version]}>{appendRight}</div> : null}
+      {appendRight ? (
+        <div className={style(iconHideStyle, iconStyleMap[version])}>{appendRight}</div>
+      ) : null}
     </div>
   );
 });

package/src/ui-kit/Button/renderButtonsSection.tsx

@@ -1,4 +1,5 @@
 import { type Picture } from '../../model/Picture';
+import { isIcon } from '../../utils/isIcon';
 import { style } from '../../utils/style';
 import { Img } from '../Img/Img';
 import { Button } from './Button';
@@ -57,7 +58,7 @@ const getIconVersion = (icon: Picture | undefined, version = 'secondary') => {
 };
 
 const renderButtonIcon = (icon: Picture) =>
-  icon?.icon || icon?.src ? (
+  isIcon(icon) ? (
     <Img
       image={icon}
       width={String(icon?.size?.width || DEFAULT_ICON_W)}