@redneckz/wildless-cms-uni-blocks 0.10.5 → 0.10.7

package/src/components/CarouselTariffsCard/CarouselTariffsCard.tsx

@@ -4,7 +4,6 @@ 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';
-import { renderButtonsSection } from '../../ui-kit/Button/renderButtonsSection';
 import { Foldable } from '../../ui-kit/Foldable/Foldable';
 import type { FoldablePartProps } from '../../ui-kit/Foldable/FoldablePartProps';
 import { FoldableSection } from '../../ui-kit/Foldable/FoldableSection';
@@ -13,17 +12,16 @@ import { Icon } from '../../ui-kit/Icon/Icon';
 import { Img } from '../../ui-kit/Img/Img';
 import { Paragraph } from '../../ui-kit/Paragraph/Paragraph';
 import { style } from '../../utils/style';
-import type {
-  CarouselTariffsCardContent,
-  TariffsCardCellProps,
-} from './CarouselTariffsCardContent';
+import type { CarouselTariffsCardContent } from './CarouselTariffsCardContent';
+import { getPaddingStyle } from './getPaddingStyle';
+import { renderCardInfo } from './renderCardInfo';
 
 export interface CarouselTariffsCardProps extends CarouselTariffsCardContent, UniBlockProps {}
 
 const VISIBLE_CELLS_COUNT = 1;
 
 export const CarouselTariffsCard = JSX<CarouselTariffsCardProps>(
-  ({ className = '', title, icon, isHighlighting, button, cardCells = [], ...rest }) => {
+  ({ className = '', title, icon, isHighlighting = false, button, cardCells = [], ...rest }) => {
     const cellsNode = cardCells.map(renderCardInfo);
     const visibleCells = cellsNode.slice(0, VISIBLE_CELLS_COUNT);
     const hiddenCells = cellsNode.slice(VISIBLE_CELLS_COUNT);
@@ -31,8 +29,8 @@ export const CarouselTariffsCard = JSX<CarouselTariffsCardProps>(
     return (
       <BlockWrapper
         className={style(
-          'relative border border-gray p-8 flex flex-col',
-          getHitStyle(isHighlighting),
+          'relative border border-gray flex flex-col',
+          getPaddingStyle(isHighlighting),
           className,
         )}
         {...rest}
@@ -59,14 +57,10 @@ export const CarouselTariffsCard = JSX<CarouselTariffsCardProps>(
 
 const renderIconBlock = (icon?: Picture) => (
   <div className="w-[267px] min-w-[267px] self-center">
-    {icon?.src ? <Img image={icon} /> : null}
-    {icon?.icon ? <Img image={icon} /> : null}
+    {icon?.src || icon?.icon ? <Img image={icon} /> : null}
   </div>
 );
 
-const getHitStyle = (isHighlighting?: boolean): string =>
-  isHighlighting ? 'mt-8 pt-20' : 'mt-20 pt-8';
-
 const renderFoldButton = ({ isUnfolded, onToggle }: FoldablePartProps): VNode => (
   <button
     className="w-full cursor-pointer text-primary-main pt-5 flex justify-between items-center"
@@ -82,24 +76,6 @@ const renderFoldButton = ({ isUnfolded, onToggle }: FoldablePartProps): VNode =>
   </button>
 );
 
-const renderCardInfo = (cell: TariffsCardCellProps, i: number): VNode => {
-  const { title, description, buttons } = cell;
-
-  return (
-    <div key={String(i)} className="py-5 border-b border-main-divider">
-      {title ? (
-        <div className="text-secondary-text text-m-light opacity-80">{cell.title}</div>
-      ) : null}
-      {description ? (
-        <div className="text-primary-text text-h6 mt-1">{cell.description}</div>
-      ) : null}
-      {buttons?.length ? (
-        <div className="text-primary-main">{renderButtonsSection(buttons)}</div>
-      ) : null}
-    </div>
-  );
-};
-
 const renderHitIcon = (): VNode => (
   <div className="absolute -top-7 -right-4 h-[60px] w-[60px] bg-white flex flex-col items-center justify-center rounded-md shadow-[0_4px_25px_rgba(0,0,0,0.07)]">
     <Icon iconVersion="black" name="HeartIcon" width="23" height="22" />

package/src/components/CarouselTariffsCard/descriptionSize.mobile.tsx

@@ -0,0 +1 @@
+export const descriptionSize = 'text-l';

package/src/components/CarouselTariffsCard/descriptionSize.tsx

@@ -0,0 +1 @@
+export const descriptionSize = 'text-h6';

package/src/components/CarouselTariffsCard/getPaddingStyle.mobile.tsx

@@ -0,0 +1,2 @@
+export const getPaddingStyle = (isHighlighting?: boolean): string =>
+  isHighlighting ? 'p-default mt-6' : 'p-default mt-6';

package/src/components/CarouselTariffsCard/getPaddingStyle.tsx

@@ -0,0 +1,2 @@
+export const getPaddingStyle = (isHighlighting?: boolean) =>
+  isHighlighting ? 'p-8 mt-8 pt-20' : 'p-8 mt-20';

package/src/components/CarouselTariffsCard/renderCardInfo.tsx

@@ -0,0 +1,31 @@
+import { VNode } from '../../model/VNode';
+import { renderButtonsSection } from '../../ui-kit/Button/renderButtonsSection';
+import { Text } from '../../ui-kit/Text/Text';
+import { TariffsCardCellProps } from './CarouselTariffsCardContent';
+import { descriptionSize } from './descriptionSize';
+
+export const renderCardInfo = (cell: TariffsCardCellProps, i: number): VNode => {
+  const { title, description, buttons } = cell;
+
+  return (
+    <div key={String(i)} className="py-5 border-b border-main-divider">
+      {title ? (
+        <div className="opacity-80">
+          <Text size="text-m" color="text-secondary-text">
+            {title}
+          </Text>
+        </div>
+      ) : null}
+      {description ? (
+        <div className="mt-1">
+          <Text size={descriptionSize} color="text-primary-text">
+            {description}
+          </Text>
+        </div>
+      ) : null}
+      {buttons?.length ? (
+        <div className="text-primary-main">{renderButtonsSection(buttons)}</div>
+      ) : null}
+    </div>
+  );
+};

package/src/components/ContactsBlock/ContactsBlock.tsx

@@ -17,7 +17,7 @@ interface RenderContactsColumnProps {
 
 export const ContactsBlock = JSX<ContactsBlockProps>(
   ({ className = '', contacts, info, version = 'secondary', ...rest }) => (
-    <BlockWrapper className={`flex p-12 ${className}`} version={version} {...rest}>
+    <BlockWrapper className={`flex p-default ${className}`} version={version} {...rest}>
       {info?.length ? renderBlocks(info) : null}
       {contacts?.length ? renderBlocks(contacts) : null}
     </BlockWrapper>

package/src/components/ExchangeRateTile/renderInput.tsx

@@ -1,5 +1,5 @@
 import { Input } from '../../ui-kit/Input/Input';
-import type { OptionProps } from '../../ui-kit/Select/Select';
+import type { Option } from '../../ui-kit/Select/Select';
 import { Select } from '../../ui-kit/Select/Select';
 import type { Currency } from './CurrencyProps';
 import type { ExchangeCurrencyItem } from './ExchangeCurrencyCalculator';
@@ -15,11 +15,11 @@ interface InputProps {
 
 export function renderInput(props: InputProps) {
   const { placeholder, rates, selected, value, setValue, setSelected } = props;
-  const ratesOptions: OptionProps[] = rates.map((_) => ({
+  const ratesOptions: Option[] = rates.map((_) => ({
     key: _?.currency?.currency ?? '',
     text: _?.currency?.currency ?? '',
   }));
-  const selectedValue: OptionProps = { key: selected, text: selected };
+  const selectedValue: Option = { key: selected, text: selected };
 
   return (
     <div className="relative flex">

package/src/components/Filtration/Filtration.tsx

@@ -10,23 +10,25 @@ import { renderFormItem } from './renderFormItem';
 
 interface FiltrationProps extends FiltrationContent, UniBlockProps {}
 
+const initialFiltrationState = {};
+
 export const Filtration: JSXBlock<FiltrationProps> = JSX<FiltrationProps>(
   ({ className, filtrationSchema = {}, resetButton, ...rest }) => {
-    const { formState, register, resetForm } = useForm();
+    const [filtrationState, { field, reset }] = useForm(initialFiltrationState);
 
     return (
       <BlockWrapper className={style(className)} version="transparent" {...rest}>
         <form className="flex justify-between bg-white p-9 mb-1">
           <div className="flex gap-11">
-            {Object.keys(filtrationSchema).map(renderFormItem(filtrationSchema, register))}
+            {Object.keys(filtrationSchema).map(renderFormItem(filtrationSchema, field))}
           </div>
           {resetButton ? (
             <div>
-              <Button className="w-72" onClick={resetForm} {...resetButton} />
+              <Button className="w-72" onClick={reset} {...resetButton} />
             </div>
           ) : null}
         </form>
-        <FiltrationInner filtrationState={formState} {...rest} />
+        <FiltrationInner filtrationState={filtrationState} {...rest} />
       </BlockWrapper>
     );
   },

package/src/components/Filtration/renderFormItem.tsx

@@ -1,22 +1,22 @@
-import type { FormElementRegisterer } from '../../hooks/useForm';
+import type { FormFieldRegisterer } from '../../hooks/useForm';
 import { SlideCheckboxGroup } from '../../ui-kit/SlideCheckboxGroup/SlideCheckboxGroup';
 import { Text } from '../../ui-kit/Text/Text';
 import type { FiltrationSchema, StringArray } from './FiltrationContent';
 
 export const renderFormItem =
-  (filtrationSchema: FiltrationSchema, register: FormElementRegisterer) => (key: string) => {
+  (filtrationSchema: FiltrationSchema, field: FormFieldRegisterer<any>) => (key: string) => {
     const item = filtrationSchema[key as keyof typeof filtrationSchema];
     const type = item?.type;
 
     switch (type) {
       case 'array':
-        return renderCheckboxes(key, register)(item);
+        return renderCheckboxes(key, field)(item);
       default:
         return null;
     }
   };
 
-const renderCheckboxes = (key: string, register: FormElementRegisterer) => (item?: StringArray) => {
+const renderCheckboxes = (key: string, field: FormFieldRegisterer<any>) => (item?: StringArray) => {
   const options =
     item?.items?.enum?.map((e, i) => ({ value: e, title: item?.items?.enumNames?.[i] || '' })) ||
     [];
@@ -30,7 +30,7 @@ const renderCheckboxes = (key: string, register: FormElementRegisterer) => (item
           </Text>
         </div>
       ) : null}
-      <SlideCheckboxGroup items={options} multiple {...register(key)} />
+      <SlideCheckboxGroup items={options} multiple {...field(key)} />
     </div>
   );
 };

package/src/components/GracePeriod/GracePeriod.tsx

@@ -13,7 +13,7 @@ export interface GracePeriodProps extends GracePeriodContent, UniBlockProps {}
 
 export const GracePeriod = JSX<GracePeriodProps>(
   ({ className = '', title, description, calendar, ...rest }) => (
-    <BlockWrapper className={`p-12 ${className}`} {...rest}>
+    <BlockWrapper className={`p-default ${className}`} {...rest}>
       <Headline className="!p-0 mb-4" title={title} description={description} headlineVersion="M" />
       {calendar ? renderCalendar(calendar) : null}
     </BlockWrapper>

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

@@ -0,0 +1,95 @@
+import type { FC } from 'react';
+import '../../setup-fixture';
+
+import { Headline } from './Headline';
+import type { HeadlineContent } from './HeadlineContent';
+
+export const HEADLINE: HeadlineContent = {
+  title: 'Своя кредитная карта мобильная версия',
+  description: 'Карта работает в 180 странах мира. Бесплатное снятие наличных в любых банкоматах.',
+  align: 'text-left',
+};
+
+const Wrapper: FC = ({ children }) => (
+  <div className="container grid grid-cols-12 group" data-ver="primary">
+    {children}
+  </div>
+);
+
+export default {
+  default: (
+    <Wrapper>
+      <Headline className="col-span-12" {...HEADLINE} version="primary" />
+    </Wrapper>
+  ),
+  'default left alignment': (
+    <Wrapper>
+      <Headline className="col-span-12" {...HEADLINE} version="primary" align="text-left" />
+    </Wrapper>
+  ),
+  'default right alignment': (
+    <Wrapper>
+      <Headline className="col-span-12" {...HEADLINE} version="primary" align="text-right" />
+    </Wrapper>
+  ),
+  'default difficult XXL': (
+    <Wrapper>
+      <Headline className="col-span-12" {...HEADLINE} version="primary" headlineVersion="XXL" />
+    </Wrapper>
+  ),
+  'default difficult XL': (
+    <Wrapper>
+      <Headline className="col-span-12" {...HEADLINE} version="primary" headlineVersion="XL" />
+    </Wrapper>
+  ),
+  'default difficult L': (
+    <Wrapper>
+      <Headline className="col-span-12" {...HEADLINE} version="primary" headlineVersion="L" />
+    </Wrapper>
+  ),
+  'default difficult M': (
+    <Wrapper>
+      <Headline className="col-span-12" {...HEADLINE} version="primary" headlineVersion="M" />
+    </Wrapper>
+  ),
+  'default difficult S': (
+    <Wrapper>
+      <Headline className="col-span-12" {...HEADLINE} version="primary" headlineVersion="S" />
+    </Wrapper>
+  ),
+  'default difficult XS': (
+    <Wrapper>
+      <Headline className="col-span-12" {...HEADLINE} version="primary" headlineVersion="XS" />
+    </Wrapper>
+  ),
+  'primary left alignment': (
+    <Wrapper>
+      <Headline className="col-span-12" {...HEADLINE} version="primary" align="text-left" />
+    </Wrapper>
+  ),
+  'primary center alignment': (
+    <Wrapper>
+      <Headline className="col-span-12" {...HEADLINE} version="primary" />
+    </Wrapper>
+  ),
+  'primary right alignment': (
+    <Wrapper>
+      <Headline className="col-span-12" {...HEADLINE} version="primary" align="text-right" />
+    </Wrapper>
+  ),
+  'secondary left alignment': (
+    <Wrapper>
+      <Headline className="col-span-12" version="secondary" {...HEADLINE} align="text-left" />
+    </Wrapper>
+  ),
+  'secondary center alignment': (
+    <Wrapper>
+      <Headline className="col-span-12" version="secondary" {...HEADLINE} />
+    </Wrapper>
+  ),
+  'secondary right alignment': (
+    <Wrapper>
+      <Headline className="col-span-12" version="secondary" {...HEADLINE} align="text-right" />
+    </Wrapper>
+  ),
+};

package/src/components/Headline/Headline.tsx

@@ -1,12 +1,12 @@
 import { JSX } from '@redneckz/uni-jsx';
-import type { UniBlockProps } from '../../model/JSXBlock';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
 import { Heading } from '../../ui-kit/Heading/Heading';
 import { Paragraph } from '../../ui-kit/Paragraph/Paragraph';
-import type { TextSize } from '../../ui-kit/Text/TextProps';
 import { style } from '../../utils/style';
-import type { HeadlineContent } from './HeadlineContent';
 import { headlineVersionStyles } from './headlineVersionStyles';
+import type { TextSize } from '../../ui-kit/Text/TextProps';
+import type { UniBlockProps } from '../../model/JSXBlock';
+import type { HeadlineContent } from './HeadlineContent';
 
 export interface HeadlineProps extends UniBlockProps, HeadlineContent {}
 
@@ -24,11 +24,12 @@ export const Headline = JSX<HeadlineProps>(
     ...rest
   }) => {
     const versionStyle = headlineVersionStyles[headlineVersion];
-    const paddingStyle = isPadding ? 'p-12' : '';
+    const paddingStyle = isPadding ? 'p-default' : '';
+    const descriptionStyle = { marginTop: versionStyle.descriptionStyle };
 
     return (
       <BlockWrapper
-        className={style('flex flex-col', paddingStyle, versionStyle.wrapper, className)}
+        className={style(paddingStyle, className)}
         version={version}
         isTheme={isTheme}
         {...rest}
@@ -42,7 +43,11 @@ export const Headline = JSX<HeadlineProps>(
           />
         ) : null}
         {description ? (
-          <Paragraph size={versionStyle.descriptionSize as TextSize} align={align}>
+          <Paragraph
+            size={versionStyle.descriptionSize as TextSize}
+            align={align}
+            {...descriptionStyle}
+          >
             {description}
           </Paragraph>
         ) : null}

package/src/components/Headline/headlineVersionStyles.ts

@@ -5,40 +5,40 @@ import type { TextSize, TitleSize } from '../../ui-kit/Text/TextProps';
 export const headlineVersionStyles: Record<
   HeadlineVersion,
   {
-    wrapper: string;
     title: HeadingCommonProps;
     descriptionSize: TextSize | TitleSize;
+    descriptionStyle: string;
   }
 > = {
   XXL: {
-    wrapper: 'gap-[18px]',
     title: { headingType: 'h0', as: 'h1' },
     descriptionSize: 'text-h5',
+    descriptionStyle: 'mt-5',
   },
   XL: {
-    wrapper: 'gap-4',
     title: { headingType: 'h1', as: 'h1' },
     descriptionSize: 'text-xl-light',
+    descriptionStyle: 'mt-4',
   },
   L: {
-    wrapper: 'gap-4',
     title: { headingType: 'h2', as: 'h2' },
     descriptionSize: 'text-xl-light',
+    descriptionStyle: 'mt-4',
   },
   M: {
-    wrapper: 'gap-3',
     title: { headingType: 'h3', as: 'h3' },
     descriptionSize: 'text-xl-light',
+    descriptionStyle: 'mt-3',
   },
   S: {
-    wrapper: 'gap-2',
     title: { headingType: 'h4', as: 'h4' },
     descriptionSize: 'text-xl-light',
+    descriptionStyle: 'mt-2',
   },
   XS: {
-    wrapper: 'gap-2',
     title: { headingType: 'h5', as: 'h5' },
     descriptionSize: 'text-l-light',
+    descriptionStyle: 'mt-2',
   },
 };
 

package/src/components/HorizontalLayout/HorizontalLayout.tsx

@@ -21,7 +21,7 @@ export const HorizontalLayout: JSXBlock<HorizontalLayoutProps> = JSX<HorizontalL
       className={style(
         'relative',
         'grid grid-cols-12',
-        isPadding ? 'p-12' : '',
+        isPadding ? 'p-default' : '',
         gapStyles[gap],
         className,
       )}

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

@@ -0,0 +1,21 @@
+import type { Picture } from '../../model/Picture';
+import '../../setup-fixture';
+import { ImgBlock } from './ImgBlock';
+
+const image: Picture = {
+  src: 'legal-support-business.png',
+  format: 'webp',
+  size: {
+    width: 200,
+    height: 200,
+  },
+  alt: 'Варианты потребительского кредита',
+};
+
+export default {
+  default: (
+    <div className="container grid grid-cols-12">
+      <ImgBlock className="col-span-12" image={image} />
+    </div>
+  ),
+};

package/src/components/LinkDocs/LinkDocs.mobile.tsx

@@ -19,7 +19,7 @@ export const LinkDocs = JSX<LinkDocsProps>(
     align,
     ...rest
   }) => (
-    <BlockWrapper className={style('py-6 px-4', className)} {...rest}>
+    <BlockWrapper className={style('p-default', className)} {...rest}>
       <Headline
         isPadding={false}
         title={title}

package/src/components/LinkDocs/LinkDocs.tsx

@@ -25,7 +25,7 @@ export const LinkDocs = JSX<LinkDocsProps>(
     columnsMode = 'double',
     ...rest
   }) => (
-    <BlockWrapper className={style('p-12', className)} {...rest}>
+    <BlockWrapper className={style('p-default', className)} {...rest}>
       <Headline
         className="!p-0"
         title={title}

package/src/components/MobileAppTile/MobileAppTile.tsx

@@ -30,7 +30,7 @@ export const MobileAppTile = JSX<MobileAppTileProps>(
 
     return (
       <BlockWrapper
-        className={`flex justify-between p-12 box-border relative min-h-80 ${getTileMinHeight(
+        className={`flex justify-between p-default box-border relative min-h-80 ${getTileMinHeight(
           className,
         )} ${className}`}
         version={version}

package/src/components/ProductBlock/ProductBlock.tsx

@@ -3,10 +3,10 @@ import type { UniBlockProps } from '../../model/JSXBlock';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
 import { Breadcrumb } from '../../ui-kit/Breadcrumb';
 import { joinList } from '../../utils/joinList';
+import { style } from '../../utils/style';
 import type { ProductBlockContent } from './ProductBlockContent';
 import { ProductBlockInner } from './ProductBlockInner';
 import { renderBackwardButton } from './renderBackwardButton';
-import { style } from '../../utils/style';
 
 export interface ProductBlockProps extends ProductBlockContent, UniBlockProps {}
 
@@ -18,7 +18,10 @@ export const ProductBlock = JSX<ProductBlockProps>((props) => {
 
   return (
     <BlockWrapper
-      className={style('overflow-hidden p-12 flex flex-col box-border min-h-[454px]', className)}
+      className={style(
+        'overflow-hidden p-default flex flex-col box-border min-h-[454px]',
+        className,
+      )}
       version={version}
       {...rest}
     >

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

@@ -0,0 +1,51 @@
+import '../../setup-fixture';
+import { RichTextBlock } from './RichTextBlock';
+import type { RichTextBlockContent } from './RichTextBlockContent';
+
+const HTML = `
+  <p class="h1">Заголовок 1</p>
+  <p class="h2">Заголовок 2</p>
+  <p class="h3">Заголовок 3</p>
+  <p class="h4">Заголовок 4</p>
+  <p class="h5">Заголовок 5</p>
+  <p class="h6">Заголовок 6</p>
+  <p>Параграф, в котором много текста и даже <a href="#">ссылка</a></p>
+  <p><strong>Жирный текст</strong>, <em>Наклонный текст</em></p>
+  <ul>
+    <li>Список с точками</li>
+    <li>Список с точками</li>
+  </ul>
+  <ol>
+    <li>Нумерованный список</li>
+    <li>Нумерованный список</li>
+  </ol>
+`;
+
+export const RICH_TEXT_SEPARATOR: RichTextBlockContent = {
+  __html:
+    '<table>' +
+    '<thead><tr><th><p>Полное наименование организации</p></th><th><p>Адрес (место нахождения)</p></th><th><p>Доля участия</p></th></tr></thead>' +
+    '<tbody>' +
+    '<tr><td><p><a href="rshb.ru">Акционерное общество «Национальное бюро кредитных историй»</p></a></td>' +
+    '<td><p>Россия, г. Москва, Скатертный пер., д. 20, стр.1</p></td><td><p>0,5%</p></td></tr>' +
+    '<tr><td><p><a href="rshb.ru">Акционерное общество\n' +
+    '«Негосударственный пенсионный фонд\n' +
+    '«Первый национальный пенсионный фонд»</p></td><td><p>Россия, г. Москва, ул. Большая Дмитровка,\n' +
+    'д. 23, стр.1</a></p></td><td><p>2,2%</p></td></tr>' +
+    '</tbody>' +
+    '</table>',
+  richVersion: 'horizontal-separator',
+};
+
+export default {
+  default: (
+    <div className="container grid grid-cols-12">
+      <RichTextBlock className="col-span-12" __html={HTML} />
+    </div>
+  ),
+  'horizontal-separator': (
+    <div className="container grid grid-cols-12">
+      <RichTextBlock className="col-span-12" {...RICH_TEXT_SEPARATOR} />
+    </div>
+  ),
+};

package/src/components/SafeDepositRental/WrapperSelect.tsx

@@ -1,5 +1,5 @@
 import { JSX } from '@redneckz/uni-jsx';
-import { OptionProps, Select } from '../../ui-kit/Select/Select';
+import { Option, Select } from '../../ui-kit/Select/Select';
 import { Currency } from '../ExchangeRateTile/CurrencyProps';
 
 interface WrapperSelectProps {
@@ -14,7 +14,7 @@ interface WrapperSelectProps {
 
 export const WrapperSelect = JSX<WrapperSelectProps>(
   ({ data, fieldLabel, fieldValue, selected, placeholder = '', setSelected, label }) => {
-    const dataFormat: OptionProps[] = data
+    const dataFormat: Option[] = data
       .filter(Boolean)
       .map((_) => ({ key: _?.[fieldValue || fieldLabel], text: _?.[fieldLabel] }));
     const selectedObj = dataFormat.find((_) => _.key === selected);

package/src/components/SafeDepositRental/useGetRegions.ts

@@ -9,8 +9,10 @@ export interface Region {
   name?: string;
 }
 
+const EMPTY_VALUE = [];
+
 export function useGetRegions(): Region[] {
   const { data } = useAsyncData<Region[]>(REGIONS_URL, fetchJSONUnsafe);
 
-  return data || [];
+  return data || EMPTY_VALUE;
 }

package/src/components/TariffsTable/TariffsTable.tsx

@@ -46,7 +46,7 @@ export const TariffsTable = JSX<TariffsTableProps>(
 
     return (
       <BlockWrapper
-        className={`p-12 overflow-hidden relative ${itemCount > 1 ? 'pr-0' : ''} ${className}`}
+        className={`p-default overflow-hidden relative ${itemCount > 1 ? 'pr-0' : ''} ${className}`}
         {...rest}
       >
         {renderTitle({ title, description })}

package/src/components/TariffsTable/TariffsTable.ui.json

@@ -11,6 +11,9 @@
               "image": {
                 "ui:field": "picture"
               },
+              "dataUrl": {
+                "ui:widget": "sourceBook"
+              },
               "buttons": {
                 "items": {
                   "icon": {