@redneckz/wildless-cms-uni-blocks 0.13.23 → 0.14.0

package/mobile/src/components/ErrorBlock/ErrorBlock.tsx

@@ -15,7 +15,11 @@ const renderErrorContent = (error: ErrorBlockContent['error']) => {
   }
 
   if (error?.contentType === 'Code' && error.code) {
-    return <div className="font-mohave text-title-extra gradient-color-text">{error.code}</div>;
+    return (
+      <div className="font-mohave text-title-large sm:text-title-extra gradient-color-text">
+        {error.code}
+      </div>
+    );
   }
 
   return null;
@@ -24,13 +28,19 @@ const renderErrorContent = (error: ErrorBlockContent['error']) => {
 export const ErrorBlock = JSX<ErrorBlockProps>(
   ({ className = '', title, description, error, button, ...rest }) => (
     <BlockWrapper
-      className={style('flex flex-col gap-2xl justify-center items-center', className)}
+      className={style('flex flex-col justify-center items-center', className)}
       defaultPadding={style('p-6xl')}
       version="transparent"
       {...rest}
     >
       <div className="flex justify-center">{renderErrorContent(error)}</div>
-      <Headline title={title} description={description} headlineVersion="XL" isEmbedded={true} />
+      <Headline
+        title={title}
+        description={description}
+        headlineVersion="XL"
+        isEmbedded={true}
+        className="mb-2xl last:mb-0"
+      />
       {button?.text ? <Button version={button?.version} text={button?.text} {...button} /> : null}
     </BlockWrapper>
   ),

package/mobile/src/components/ExchangeRateTile/renderInput.tsx

@@ -1,5 +1,5 @@
 import { Input } from '../../ui-kit/Input/Input';
-import type { Option } from '../../ui-kit/Select/Select';
+import type { Option } from '../../ui-kit/Select/Option';
 import { Select } from '../../ui-kit/Select/Select';
 import type { Currency } from './CurrencyProps';
 import type { ExchangeCurrencyItem } from './ExchangeCurrencyCalculator';

package/mobile/src/components/Footer/Footer.tsx

@@ -29,7 +29,7 @@ export const Footer = JSX<FooterProps>(({ className, ...rest }) => {
   } = useSWRResource<FooterDataProps>(projectSettings.FOOTER || 'footer', { fallback });
 
   return (
-    <BlockWrapper tag="footer" className={className} {...rest}>
+    <BlockWrapper tag="footer" className={className} defaultPadding="p-4xl" {...rest}>
       <div className="mb-lg pb-xs border-b border-main-divider">
         {topItems?.map((item, i) => (
           <RollupItem key={String(i)} label={item?.text} labelIcon={item?.icon}>

package/mobile/src/components/Footer/FooterContent.ts

@@ -1,7 +1,11 @@
 import type { DescriptionProps } from '../../model/HeadlineType';
 import type { UniBlockContent } from '../../model/JSXBlock';
 import type { LinkProps } from '../../model/LinkProps';
-import type { IconProps } from '../../model/Picture';
+import type { IconProps, Picture } from '../../model/Picture';
+
+export interface SocialMediaLink extends LinkProps {
+  icon?: Picture;
+}
 
 /**
  * @title Тип контакта

package/mobile/src/components/Footer/FooterDataProps.ts

@@ -1,18 +1,12 @@
-import type { LinkCommonProps, LinkProps } from '../../model/LinkProps';
-import type { Picture } from '../../model/Picture';
+import type { LinkProps } from '../../model/LinkProps';
 import type { SitemapData } from '../../services/sitemap/SitemapData';
-import type { ContactGroup, SubMenuItem } from './FooterContent';
+import type { ContactGroup, SocialMediaLink } from './FooterContent';
 
 export interface FooterDataProps extends SitemapData {
   documents?: LinkProps[];
   relatedEnterprises?: LinkProps[];
   contacts?: ContactGroup[];
-  socialMedia?: LinkCommonProps[];
-  mobileApps?: LinkCommonProps[];
+  socialMedia?: SocialMediaLink[];
+  mobileApps?: SocialMediaLink[];
   horizontalNavigationTitle?: string; // TODO: для мобильной версии
-  subMenu?: SubMenuItem[]; // TODO: для мобильной версии
-  logo?: {
-    image?: Picture;
-    title?: string;
-  };
 }

package/mobile/src/components/Footer/HorizontalNavigation.tsx

@@ -13,7 +13,7 @@ export const HorizontalNavigation = JSX<HorizontalNavigationProps>(
         {title}
       </Text>
       {links?.length ? (
-        <div className="flex flex-col gap-lg mt-lg">
+        <div className="flex flex-col gap-lg">
           {links.map((_, i) => (
             <HorizontalNavigationLink
               className="text-l font-light"

package/mobile/src/components/Footer/MediaButton.tsx

@@ -1,55 +1,50 @@
 import { JSX } from '@redneckz/uni-jsx';
-import type { IconProps, Picture } from '../../model/Picture';
+import type { Picture } from '../../model/Picture';
 import { Button } from '../../ui-kit/Button/Button';
-import type { ButtonProps } from '../../ui-kit/Button/ButtonProps';
+import { ButtonContent } from '../../ui-kit/Button/ButtonContent';
 import { Img } from '../../ui-kit/Img/Img';
 import { style } from '../../utils/style';
-import { buttonStylesWithText } from './buttonStylesWithText';
+import { buttonSizeStyle } from './buttonSizeStyle';
 import { findIconByHref } from './findIconByHref';
 
 export type ButtonSize = 'default' | 'stretched';
 
-interface MediaButtonProps extends ButtonProps, IconProps {
+interface MediaButtonProps extends ButtonContent {
   buttonSize?: ButtonSize;
 }
 
-export const MediaButton = JSX<MediaButtonProps>(
-  ({ buttonSize = 'default', rounded = false, icon, ...rest }) => {
-    const { href, version, text = '' } = rest;
+//TODO: Refactor this.
+export const MediaButton = JSX<MediaButtonProps>(({ buttonSize = 'default', icon, ...rest }) => {
+  const { href } = rest;
 
-    const { iconMapped, label } = findIconByHref(href);
+  const { iconMapped, label } = findIconByHref(href);
 
-    const iconCustom = getFilteredIcon(icon) ?? iconMapped;
+  const iconCustom = getFilteredIcon(icon) ?? iconMapped;
 
-    return (
-      <Button
-        className={style(
-          rounded ? 'rounded-full' : 'rounded-md',
-          'border border-solid hover:border-transparent',
-          'group-data-primary:border-main-divider',
-          'hover:bg-primary-main hover:text-black',
-          'group-data-secondary:bg-white border-main-divider group-data-secondary:hover:bg-secondary-hover',
-          'group-data-gray:border-green',
-          buttonStylesWithText(text, buttonSize),
-        )}
-        aria-label={label}
-        rel="noopener noreferrer"
-        target="_blank"
-        text={text}
-        version={version}
-        {...rest}
-      >
-        {iconCustom && !text ? (
-          <Img
-            image={iconCustom}
-            imageClassName="group-hover/media:text-white"
-            width="24"
-            height="24"
-          />
-        ) : null}
-      </Button>
-    );
-  },
-);
+  return (
+    <Button
+      className={style(
+        'border border-solid hover:border-transparent',
+        'group-data-primary:border-main-divider',
+        'hover:bg-primary-main hover:text-black',
+        'group-data-secondary:bg-white border-main-divider group-data-secondary:hover:bg-secondary-hover',
+        'group-data-gray:border-green',
+        'p-m min-h-14 group/media flex items-center justify-center box-border',
+        buttonSizeStyle[buttonSize],
+      )}
+      aria-label={label}
+      rel="noopener noreferrer"
+      target="_blank"
+      {...rest}
+    >
+      <Img
+        image={iconCustom}
+        imageClassName="group-hover/media:text-white"
+        width="24"
+        height="24"
+      />
+    </Button>
+  );
+});
 
 const getFilteredIcon = (icon: Picture | undefined) => (icon?.src || icon?.icon ? icon : undefined);

package/mobile/src/components/Footer/SocialMedia.tsx

@@ -1,9 +1,9 @@
 import { JSX } from '@redneckz/uni-jsx';
 import type { ButtonContent } from '../../ui-kit/Button/ButtonContent';
 import { Text } from '../../ui-kit/Text/Text';
-import { MediaButton } from './MediaButton';
-import type { ButtonSize } from './MediaButton';
 import { style } from '../../utils/style';
+import type { ButtonSize } from './MediaButton';
+import { MediaButton } from './MediaButton';
 
 export interface SocialMediaProps {
   className?: string;

package/mobile/src/components/Footer/{buttonSizeStyles.ts → buttonSizeStyle.ts}

@@ -1,6 +1,6 @@
 import { ButtonSize } from './MediaButton';
 
-export const buttonSizeStyles: { [key in ButtonSize]: string } = {
+export const buttonSizeStyle: { [key in ButtonSize]: string } = {
   default: 'w-14 h-14',
   stretched: 'flex-1 h-14',
 };

package/mobile/src/components/Header/DropdownMenu.tsx

@@ -1,9 +1,9 @@
 import { JSX } from '@redneckz/uni-jsx';
 import { useCallback, useState } from '@redneckz/uni-jsx/lib/hooks';
+import { useOutsideClick } from '@redneckz/uni-jsx/lib/hooks/useOutsideClick';
 import { useLink } from '../../hooks/useLink';
-import { useOutsideClick } from '../../hooks/useOutsideClick';
-import { style } from '../../utils/style';
 import type { LinkProps } from '../../model/LinkProps';
+import { style } from '../../utils/style';
 
 interface DropdownMenuProps {
   className?: string;

package/mobile/src/components/Header/HeaderChatBotButton.tsx

@@ -1,5 +1,5 @@
 import { JSX } from '@redneckz/uni-jsx';
-import { useBool } from '../../hooks/useBool';
+import { useBool } from '@redneckz/uni-jsx/lib/hooks/useBool';
 import type { IconVersion } from '../../model/IconVersion';
 import { style } from '../../utils/style';
 import { HeaderSecondaryMenuButton } from './HeaderSecondaryMenuButton';

package/mobile/src/components/MobileAppTile/MobileAppTile.example.json

@@ -8,7 +8,6 @@
         "height": 345
       }
     },
-    "alignTitle": "left",
     "qr": null,
     "buttons": [
       {

package/mobile/src/components/MobileAppTile/MobileAppTile.tsx

@@ -1,5 +1,4 @@
 import { JSX } from '@redneckz/uni-jsx';
-import { AlignText } from '../../model/AlignText';
 import type { UniBlockProps } from '../../model/JSXBlock';
 import { BaseTile } from '../../ui-kit/BaseTile/BaseTile';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
@@ -17,12 +16,13 @@ export const MobileAppTile = JSX<MobileAppTileProps>(
   ({
     className,
     padding,
-    alignTitle = 'left',
+    align = 'text-left',
     buttons = [],
     description,
     headingType = 'h4',
     image,
     items,
+    listItemSize,
     qr,
     title = 'Мобильное приложение',
     version = 'primary',
@@ -46,7 +46,7 @@ export const MobileAppTile = JSX<MobileAppTileProps>(
               <Heading
                 headingType={headingType}
                 title={title}
-                className={style('whitespace-pre-wrap', AlignText[alignTitle])}
+                className={style('whitespace-pre-wrap', align)}
               />
             ) : null
           }
@@ -60,7 +60,7 @@ export const MobileAppTile = JSX<MobileAppTileProps>(
                 <Img className="w-fit" image={qr} />
               </div>
             ) : null}
-            {renderList(items)}
+            {renderList(items, listItemSize)}
             {image?.src ? <Img className="lg:hidden" image={image} /> : null}
           </div>
         </BaseTile>

package/mobile/src/components/MobileAppTile/MobileAppTileContent.ts

@@ -1,4 +1,3 @@
-import type { AlignType } from '../../model/AlignType';
 import type { HeadlineCommonProps } from '../../model/HeadlineType';
 import type { UniBlockContent } from '../../model/JSXBlock';
 import type { Picture } from '../../model/Picture';
@@ -16,11 +15,7 @@ export type MobileAppTileContent = UniBlockContent &
   ButtonsSectionContent &
   ListContent &
   ImageContent & {
-    /** @title Выравнивание заголовка */
-    alignTitle?: AlignType;
     // TODO: description для мобильной версии
     /** @title QR-код */
     qr?: Picture;
-    /** @title Ссылка */
-    href?: string; // TODO: для мобильной версии
   };

package/mobile/src/components/MobileAppTile/renderDescription.tsx

@@ -3,7 +3,7 @@ import { Text } from '../../ui-kit/Text/Text';
 export const renderDescription = (description?: string) =>
   description ? (
     <div className="mb-lg pt-3xs">
-      <Text size="text-xl" font-weight="light">
+      <Text size="text-xl" font-weight="font-light">
         {description}
       </Text>
     </div>

package/mobile/src/components/MobileAppTile/renderList.tsx

@@ -1,8 +1,9 @@
 import { List } from '../../ui-kit/List/List';
+import type { ListItemSize } from '../../ui-kit/List/ListContent';
 
-export const renderList = (items?: string[]) => {
+export const renderList = (items?: string[], listItemSize?: ListItemSize) => {
   return items?.length ? (
-    <List items={items} className="text-l font-light" />
+    <List items={items} listItemSize={listItemSize} className="text-l font-light" />
   ) : (
     <span className="text-m font-light text-secondary-text">
       Наведите камеру телефона на QR-код и скачайте приложение

package/mobile/src/components/MortgageFiltration/MortgageFiltration.example.json

@@ -53,7 +53,9 @@
       }
     },
     "hotFilters": [
-      { "text": "Все программы" },
+      {
+        "text": "Все программы"
+      },
       {
         "text": "Льготные программы",
         "filter": {
@@ -74,7 +76,12 @@
       },
       {
         "text": "Готовое жилье",
-        "filter": { "stage": ["built"], "categories": [], "extraOptions": [], "propertyType": [] }
+        "filter": {
+          "stage": ["built"],
+          "categories": [],
+          "extraOptions": [],
+          "propertyType": []
+        }
       },
       {
         "text": "Загородная недвижимость",

package/mobile/src/components/MortgageFiltration/MortgageFiltration.tsx

@@ -1,13 +1,14 @@
 import { JSX } from '@redneckz/uni-jsx';
 import { useCallback } from '@redneckz/uni-jsx/lib/hooks';
 import { useForm } from '../../hooks/useForm';
-import type { JSXBlock, UniBlockProps } from '../../model/JSXBlock';
 import { BaseFiltrationInner } from '../../ui-kit/BaseFiltration/BaseFiltrationInner';
 import { renderFiltrationForm } from '../../ui-kit/BaseFiltration/renderFiltrationForm';
 import { useHotFilters } from '../../ui-kit/BaseFiltration/useHotFilters';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
 import { TabsControl } from '../../ui-kit/TabsControl/TabsControl';
 import { style } from '../../utils/style';
+import { getBlocksToRender } from '../../ui-kit/BaseFiltration/getBlocksToRender';
+import type { JSXBlock, UniBlockProps } from '../../model/JSXBlock';
 import type {
   MortgageFiltrationContent,
   MortgageFiltrationSchema,
@@ -29,6 +30,8 @@ export const MortgageFiltration: JSXBlock<MortgageFiltrationProps> = JSX<Mortgag
     const [filtrationState, { field, reset, update: replaceFiltrationState }] =
       useForm(initialFiltrationState);
 
+    const blocksToRender = getBlocksToRender(rest.block?.blocks, filtrationState)();
+
     const handleFiltrationStateChange = useCallback(
       (_: MortgageFiltrationState = initialFiltrationState) => replaceFiltrationState(_),
       [],
@@ -50,7 +53,7 @@ export const MortgageFiltration: JSXBlock<MortgageFiltrationProps> = JSX<Mortgag
       >
         <TabsControl {...tabsControlProps} />
         {renderFiltrationForm({ field, reset, filtrationSchema, resetButton })}
-        <BaseFiltrationInner filtrationState={filtrationState} {...rest} />
+        <BaseFiltrationInner blocksToRender={blocksToRender} {...rest} />
       </BlockWrapper>
     );
   },

package/mobile/src/components/ProductBlock/ProductBlock.tsx

@@ -32,7 +32,6 @@ export const ProductBlock = JSX<ProductBlockProps>(
               handleClick,
             )
           : null}
-
         <BaseProductTile className="grow h-full" {...rest} />
       </BlockWrapper>
     );

package/mobile/src/components/ProductBlock/ProductBlockContent.ts

@@ -6,6 +6,6 @@ import type { BaseProductTileContent } from '../../ui-kit/BaseProductTile/BasePr
  */
 export type ProductBlockContent = UniBlockContent &
   BaseProductTileContent & {
-    /** @title Отображать кнопку возврата */
+    /** @title Отображать кнопку возврата (только для десктопной версии) */
     backwardButton?: boolean;
   };

package/mobile/src/components/ProductBlock/renderBackwardButton.tsx

@@ -9,7 +9,7 @@ export function renderBackwardButton(version: ButtonVersion, handleClick: () =>
   const text = 'Вернуться назад';
 
   return (
-    <div className="flex items-center gap-s">
+    <div className="hidden sm:flex items-center gap-s">
       <div
         className={getRegularButtonClasses({ className, version, rounded: true })}
         onClick={handleClick}

package/mobile/src/components/RepresentativeOfficeInfo/RepresentativeOfficeInfo.example.json

@@ -1,6 +1,8 @@
 {
   "title": "Заголовок",
+  "description": "Описание",
   "__html": "<p>Описание</p>",
+  "richVersion": "",
   "button": {
     "text": "Информация о регионе",
     "version": "link",

package/mobile/src/components/RepresentativeOfficeInfo/RepresentativeOfficeInfo.tsx

@@ -11,6 +11,7 @@ import { RichText } from '../../ui-kit/RichText/RichText';
 import { Text } from '../../ui-kit/Text/Text';
 import { style } from '../../utils/style';
 import type { RepresentativeOfficeInfoContent } from './RepresentativeOfficeInfoContent';
+import type { TextColor } from '../../ui-kit/Text/TextProps';
 
 export interface RepresentativeOfficeInfoProps
   extends RepresentativeOfficeInfoContent,
@@ -36,13 +37,22 @@ export const RepresentativeOfficeInfo = JSX<RepresentativeOfficeInfoProps>(
     >
       <div className="w-full flex justify-between flex-row-reverse">
         {renderIconBlock(icon)}
-        {title ? <Heading headingType="h4" as="h3" title={title} /> : null}
+        {title ? <Heading headingType="h3" as="h3" title={title} /> : null}
       </div>
       <div className="w-full space-y-m">
         {__html ? renderDescriptionBlock(__html) : null}
-        {renderBlock('Адрес', address, 'GeolocationIcon')}
-        {renderBlock('Телефон', telephone, 'PhoneIcon')}
-        {renderBlock('E-mail', email, 'MailIcon')}
+        {renderBlock({
+          label: 'Адрес',
+          data: address,
+          iconName: 'GeolocationIcon',
+        })}
+        {renderBlock({ label: 'Телефон(факс)', data: telephone, iconName: 'PhoneIcon' })}
+        {renderBlock({
+          label: 'E-mail',
+          data: email,
+          iconName: 'MailIcon',
+          dataColor: 'text-primary-main',
+        })}
         {button?.text ? renderButtonsSection([button]) : null}
       </div>
     </BlockWrapper>
@@ -56,23 +66,29 @@ const renderIconBlock = (icon?: Picture) => (
 );
 
 const renderDescriptionBlock = (__html?: string) => (
-  <div className="border-b border-main-divider">
+  <div className="border-b border-main-divider pb-lg">
     <RichText __html={__html} />
   </div>
 );
 
-const renderBlock = (blockName: string, data?: string, iconName?: IconName | undefined) => (
-  <div className="flex gap-m">
-    <Icon iconVersion="black" name={iconName} width="24" height="24" />
-    <div className="flex flex-col">
-      <Text size="text-m" font="font-light">
-        {blockName}
-      </Text>
-      {data ? (
-        <Text size="text-h6" color="text-green">
+interface renderBlockProps {
+  label?: string;
+  data?: string;
+  iconName?: IconName | undefined;
+  dataColor?: TextColor;
+}
+
+const renderBlock = ({ label, data, iconName, dataColor = '' }: renderBlockProps) =>
+  data ? (
+    <div className="flex gap-s">
+      <Icon iconVersion="black" name={iconName} width="24" height="24" />
+      <div className="flex flex-col gap-2xs">
+        <Text size="text-m" font="font-light" color="text-secondary-text">
+          {label}
+        </Text>
+        <Text size="text-xl" color={dataColor}>
           {data}
         </Text>
-      ) : null}
+      </div>
     </div>
-  </div>
-);
+  ) : null;

package/mobile/src/components/RollupItem/PrimaryFoldButton.tsx

@@ -0,0 +1,44 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { style } from '../../utils/style';
+import type { IconName } from '../../icons/IconName';
+import type { Picture } from '../../model/Picture';
+import type { IconBgVersion } from '../../ui-kit/Icon/IconProps';
+import { renderRoundedIcon } from './renderRoundedIcon';
+import { Text } from '../../ui-kit/Text/Text';
+import { Icon } from '../../ui-kit/Icon/Icon';
+import { rollupIconVersion } from './rollupIconVersion';
+import { TextWithIcon } from '../../ui-kit/TextWithIcon/TextWithIcon';
+
+interface PrimaryFoldButtonProps {
+  label?: string;
+  labelIcon?: Picture;
+  labelIconBgVersion?: IconBgVersion;
+  icon?: IconName;
+  onToggle?: () => void;
+}
+
+export const PrimaryFoldButton = JSX<PrimaryFoldButtonProps>(
+  ({ label, labelIconBgVersion, icon, onToggle, labelIcon }) => (
+    <TextWithIcon
+      tag="button"
+      className={style(
+        'border-none bg-transparent items-center group/button',
+        labelIcon?.icon ? 'py-xs' : 'py-lg',
+      )}
+      onClick={onToggle}
+      textNode={
+        <div className="flex items-center text-start group-hover/button:text-primary-main gap-s">
+          {renderRoundedIcon(labelIcon, labelIconBgVersion)}
+          {label ? (
+            <Text size="text-h6" font="font-normal">
+              {label}
+            </Text>
+          ) : null}
+        </div>
+      }
+      iconNode={
+        icon ? <Icon name={icon} iconVersion={rollupIconVersion} width="24" height="24" /> : null
+      }
+    />
+  ),
+);

package/mobile/src/components/RollupItem/RollupItem.tsx

@@ -7,17 +7,14 @@ import { DefaultFoldButton } from '../../ui-kit/Foldable/DefaultFoldButton';
 import { Foldable } from '../../ui-kit/Foldable/Foldable';
 import type { FoldablePartProps } from '../../ui-kit/Foldable/FoldablePartProps';
 import { FoldableSection } from '../../ui-kit/Foldable/FoldableSection';
-import { Icon } from '../../ui-kit/Icon/Icon';
-import type { IconName, IconBgVersion, IconProps } from '../../ui-kit/Icon/IconProps';
-import { Text } from '../../ui-kit/Text/Text';
+import type { IconBgVersion, IconProps } from '../../ui-kit/Icon/IconProps';
 import { style } from '../../utils/style';
 import { foldableSectionStyles } from './foldableSectionStyles';
 import { getIconName } from './getIconName';
-import { rollupIconVersion } from './rollupIconVersion';
 import type { RollupItemContent } from './RollupItemContent';
 import { rollupItemStyles } from './rollupItemStyles';
 import type { Picture } from '../../model/Picture';
-import { renderRoundedIcon } from './renderRoundedIcon';
+import { PrimaryFoldButton } from './PrimaryFoldButton';
 
 interface RollupItemProps extends RollupItemContent, UniBlockProps {
   labelIcon?: Picture;
@@ -92,15 +89,16 @@ const renderFoldButton = ({
   onToggle,
 }: FoldButtonProps) => {
   const label = defaultLabel || (isUnfolded ? 'Скрыть' : 'Развернуть');
+  const icon = getIconName(isUnfolded);
 
   return version === 'primary' ? (
-    renderPrimaryFoldButton({
-      label,
-      labelIcon,
-      labelIconBgVersion,
-      icon: getIconName(isUnfolded),
-      onToggle,
-    })
+    <PrimaryFoldButton
+      label={label}
+      labelIcon={labelIcon}
+      labelIconBgVersion={labelIconBgVersion}
+      icon={icon}
+      onToggle={onToggle}
+    />
   ) : (
     <DefaultFoldButton
       label={label}
@@ -109,39 +107,3 @@ const renderFoldButton = ({
     />
   );
 };
-
-interface PrimaryFoldButtonProps {
-  label?: string;
-  labelIcon?: Picture;
-  labelIconBgVersion?: IconBgVersion;
-  icon?: IconName;
-  onToggle?: () => void;
-}
-
-const renderPrimaryFoldButton = ({
-  label,
-  labelIconBgVersion,
-  icon,
-  onToggle,
-  labelIcon,
-}: PrimaryFoldButtonProps) => {
-  return (
-    <button
-      className={style(
-        'border-none bg-transparent flex justify-between items-center w-full group/button',
-        labelIcon?.icon ? 'py-xs' : 'py-lg',
-      )}
-      onClick={onToggle}
-    >
-      <div className="flex items-center text-start group-hover/button:text-primary-main gap-s">
-        {renderRoundedIcon(labelIcon, labelIconBgVersion)}
-        {label ? (
-          <Text size="text-h6" font="font-normal">
-            {label}
-          </Text>
-        ) : null}
-      </div>
-      {icon ? <Icon name={icon} iconVersion={rollupIconVersion} width="24" height="24" /> : null}
-    </button>
-  );
-};

package/mobile/src/components/SafeDepositRental/RegionsAndBranches.tsx

@@ -21,7 +21,7 @@ export const RegionsAndBranches = JSX<RegionsAndBranchesProps>(
     selectedBranch,
     onSelectedBranch,
   }) => (
-    <div className="flex flex-col sm:flex-row gap-m order-1">
+    <div className="flex flex-col @xl:flex-row gap-m order-1">
       <div className="flex-1 min-w-0">
         <WrapperSelect
           data={regions}