@redneckz/wildless-cms-uni-blocks 0.9.9 → 0.9.11

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

@@ -9,7 +9,9 @@
       "sources": [
         {
           "media": 1279,
-          "width": 84,
+          "size": {
+            "width": 84
+          },
           "format": "webp",
           "alignment": "center"
         }

package/mobile/src/components/CarouselProductCard/CarouselProductCard.tsx

@@ -26,6 +26,7 @@ export const CarouselProductCard = JSX<CarouselProductCardProps>(
     href,
     icon,
     isDotted = true,
+    isFullWidth = true,
     items = [],
     target,
     title,
@@ -50,7 +51,10 @@ export const CarouselProductCard = JSX<CarouselProductCardProps>(
           {renderItems(items, isDotted, version)}
           {renderAdditionalDescription(additionalDescription)}
         </LinkWrapper>
-        {renderButtonsSection([button], { className: 'p-6 pt-0', isVertical: true })}
+        {renderButtonsSection([button], {
+          className: style('p-6 pt-0', isFullWidth ? '' : 'justify-center'),
+          isVertical: isFullWidth ? true : false,
+        })}
       </BlockWrapper>
     );
   },

package/mobile/src/components/CarouselProductCard/CarouselProductCardContent.ts

@@ -27,4 +27,8 @@ export type CarouselProductCardContent = UniBlockContent &
     /** @title Список */
     items?: ListProps[];
     align?: TextAlign;
+    /**
+     * @title По всей ширине
+     */
+    isFullWidth?: boolean;
   };

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

@@ -9,8 +9,10 @@
       "sources": [
         {
           "media": 1279,
-          "width": 174,
-          "height": 174,
+          "size": {
+            "width": 174,
+            "height": 174
+          },
           "format": "webp",
           "alignment": "southeast"
         }

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

@@ -13,7 +13,9 @@
         "sources": [
           {
             "media": 1279,
-            "width": 276,
+            "size": {
+              "width": 276
+            },
             "format": "webp",
             "alignment": "center"
           }

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

@@ -3,35 +3,55 @@
     "filtrationSchema": {
       "propertyType": {
         "title": "Тип недвижимости",
-        "type": "string",
-        "enum": ["flat", "apartment", "house", "storeRoom", "parkingSpace"],
-        "enumNames": ["Квартира", "Апартаменты", "Жилой дом", "Кладовая", "Машино-место"]
+        "type": "array",
+        "items": {
+          "type": "string",
+          "enum": ["flat", "apartment", "house", "storeRoom", "parkingSpace"],
+          "enumNames": ["Квартира", "Апартаменты", "Жилой дом", "Кладовая", "Машино-место"]
+        }
       },
       "stage": {
         "title": "Этап строительства",
-        "type": "string",
-        "enum": ["built", "inProgress"],
-        "enumNames": ["Готовое жильё", "Строящиеся"]
+        "type": "array",
+        "items": {
+          "type": "string",
+          "enum": ["built", "inProgress"],
+          "enumNames": ["Готовое жильё", "Строящиеся"]
+        }
       },
       "categories": {
         "title": "Категории",
-        "type": "string",
-        "enum": ["salaryClient", "IT", "youngFamily", "military", "medicalWorker", "scientist"],
-        "enumNames": [
-          "Зарплатный клиент",
-          "IT-специалист",
-          "Молодая семья",
-          "Военнослужащий",
-          "Медицинский работник",
-          "Научный сотрудник"
-        ]
+        "type": "array",
+        "items": {
+          "type": "string",
+          "enum": ["salaryClient", "IT", "youngFamily", "military", "medicalWorker", "scientist"],
+          "enumNames": [
+            "Зарплатный клиент",
+            "IT-специалист",
+            "Молодая семья",
+            "Военнослужащий",
+            "Медицинский работник",
+            "Научный сотрудник"
+          ]
+        }
       },
       "extraOptions": {
         "title": "Дополнительно",
-        "type": "string",
-        "enum": ["preferentialMortgage", "children"],
-        "enumNames": ["Льготная ипотека", "Дети"]
+        "type": "array",
+        "items": {
+          "type": "string",
+          "enum": ["preferentialMortgage", "children"],
+          "enumNames": ["Льготная ипотека", "Дети"]
+        }
       }
+    },
+    "resetButton": {
+      "text": "Очистить фильтры",
+      "version": "secondary"
+    },
+    "notFound": {
+      "title": "Нет подходящей ипотечной программы",
+      "description": "Попробуйте очистить фильтры"
     }
   }
 }

package/mobile/src/components/Filtration/Filtration.tsx

@@ -15,19 +15,14 @@ export const Filtration: JSXBlock<FiltrationProps> = JSX<FiltrationProps>(
     const { formState, register, resetForm } = useForm();
 
     return (
-      <BlockWrapper className={style('p-9', className)} {...rest}>
-        <form className="flex justify-between">
+      <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))}
           </div>
           {resetButton ? (
             <div>
-              <Button
-                className="w-72"
-                text={resetButton.text}
-                version={resetButton.buttonVersion}
-                onClick={resetForm}
-              />
+              <Button className="w-72" onClick={resetForm} {...resetButton} />
             </div>
           ) : null}
         </form>

package/mobile/src/components/Filtration/FiltrationContent.ts

@@ -1,4 +1,5 @@
 import type { ButtonVersion } from '../../model/ButtonVersion';
+import type { DescriptionProps, TitleProps } from '../../model/HeadlineType';
 
 /**
  * @title Заголовок
@@ -33,6 +34,7 @@ export type StringArray = {
    * @hidden
    */
   type?: 'array';
+  /** @title */
   items?: {
     /**
      * @default string
@@ -47,13 +49,13 @@ export type StringArray = {
 // TODO: Make customizable to implement arbitrary filtration blocks
 export type FiltrationSchema = {
   /** @title Тип недвижимости */
-  propertyType?: StringEnum;
+  propertyType?: StringArray;
   /** @title Этап строительства */
-  stage?: StringEnum;
+  stage?: StringArray;
   /** @title Категории */
-  categories?: StringEnum;
+  categories?: StringArray;
   /** @title Дополнительно */
-  extraOptions?: StringEnum;
+  extraOptions?: StringArray;
 };
 
 /**
@@ -67,14 +69,24 @@ export type ResetButton = {
   /**
    * @title Цвет кнопки
    */
-  buttonVersion: ButtonVersion;
+  version: ButtonVersion;
 };
 
+/**
+ * @title Плитка "Не найдено"
+ */
+export type NotFound = TitleProps & DescriptionProps;
+
 export interface FiltrationInnerContent {
-  /** @title Название кнопки */
+  /** @title Название сворачивающейся кнопки */
   label?: string;
-  /** @title Количество отображаемых предметов */
+  /**
+   * @title Количество отображаемых предметов
+   * @minimum 1
+   */
   topItemsCount?: number;
+  resetButton?: ResetButton;
+  notFound?: NotFound;
 }
 
 /**
@@ -83,5 +95,4 @@ export interface FiltrationInnerContent {
 export interface FiltrationContent extends FiltrationInnerContent {
   /** @title Параметры фильтрации */
   filtrationSchema?: FiltrationSchema;
-  resetButton?: ResetButton;
 }

package/mobile/src/components/Filtration/FiltrationInner.tsx

@@ -5,10 +5,11 @@ import type { UniBlockProps } from '../../model/JSXBlock';
 import { DefaultFoldButton } from '../../ui-kit/Foldable/DefaultFoldButton';
 import { Foldable } from '../../ui-kit/Foldable/Foldable';
 import { FoldableSection } from '../../ui-kit/Foldable/FoldableSection';
+import { Paragraph } from '../../ui-kit/Paragraph/Paragraph';
+import { Text } from '../../ui-kit/Text/Text';
 import { style } from '../../utils/style';
-import { ErrorBlock } from '../ErrorBlock/ErrorBlock';
 import { checkShouldRenderBlock } from './checkShouldRenderBlock';
-import type { FiltrationInnerContent } from './FiltrationContent';
+import type { FiltrationInnerContent, NotFound } from './FiltrationContent';
 
 const ICONS: IconName[] = ['ArrowDownIcon', 'ArrowUpIcon'];
 
@@ -19,7 +20,7 @@ interface FiltrationInnerProps extends FiltrationInnerContent, UniBlockProps {
 }
 
 export const FiltrationInner = JSX<FiltrationInnerProps>(
-  ({ label = '', filtrationState = {}, topItemsCount = 0, block, ...rest }) => {
+  ({ label = '', filtrationState = {}, topItemsCount = 0, block, notFound, ...rest }) => {
     const blocksToRender =
       block?.blocks?.filter((b) => checkShouldRenderBlock(filtrationState, b.content || {})) || [];
 
@@ -30,28 +31,27 @@ export const FiltrationInner = JSX<FiltrationInnerProps>(
 
     return (
       <div>
-        <div className={style(blocksToRender.length ? 'hidden' : '')}>
-          <ErrorBlock
-            error={{ errorContentType: 'Image' }}
-            title="Нет подходящей ипотечной программы"
-            subtitle="Попробуйте очистить фильтры"
-          />
+        <div className={style(blocksToRender.length ? 'hidden' : 'block')}>
+          {notFound ? renderNotFound(notFound) : null}
         </div>
         <div className={style(blocksToRender.length ? '' : 'hidden')}>
-          <div className={resultsGridStyle}>
+          <div className={style('mb-1', resultsGridStyle)}>
             {renderBlocksList(visibleBlocks, { ...rest.options, parent: block })}
           </div>
           <Foldable
             renderFoldableSection={({ isUnfolded }) => {
               return (
-                <FoldableSection className={resultsGridStyle} isUnfolded={isUnfolded}>
+                <FoldableSection
+                  className={style(resultsGridStyle, isUnfolded ? 'mb-1' : '')}
+                  isUnfolded={isUnfolded}
+                >
                   {renderBlocksList(hiddenBlocks, { ...rest.options, parent: block })}
                 </FoldableSection>
               );
             }}
             renderFoldButton={({ isUnfolded, onToggle }) => (
               <DefaultFoldButton
-                className={style('mt-11', topItemsCount < 1 ? 'hidden' : '')}
+                className={style(topItemsCount < 1 ? 'hidden' : '')}
                 disabled={!hiddenBlocks?.length}
                 label={label}
                 icon={ICONS[Number(isUnfolded)]}
@@ -65,3 +65,22 @@ export const FiltrationInner = JSX<FiltrationInnerProps>(
     );
   },
 );
+
+function renderNotFound({ title, description }: NotFound) {
+  return (
+    <div className="bg-white py-20">
+      {title ? (
+        <div className="mb-2">
+          <Paragraph align="text-center">
+            <Text size="text-h4">{title}</Text>
+          </Paragraph>
+        </div>
+      ) : null}
+      {description ? (
+        <Paragraph size="text-xl" font="font-light" align="text-center">
+          {description}
+        </Paragraph>
+      ) : null}
+    </div>
+  );
+}

package/mobile/src/components/Filtration/renderFormItem.tsx

@@ -1,7 +1,7 @@
 import type { FormElementRegisterer } from '../../hooks/useForm';
 import { SlideCheckboxGroup } from '../../ui-kit/SlideCheckboxGroup/SlideCheckboxGroup';
 import { Text } from '../../ui-kit/Text/Text';
-import type { FiltrationSchema, StringEnum } from './FiltrationContent';
+import type { FiltrationSchema, StringArray } from './FiltrationContent';
 
 export const renderFormItem =
   (filtrationSchema: FiltrationSchema, register: FormElementRegisterer) => (key: string) => {
@@ -9,28 +9,28 @@ export const renderFormItem =
     const type = item?.type;
 
     switch (type) {
-      case 'string':
-        return renderRadioButtons(key, register)(item);
+      case 'array':
+        return renderCheckboxes(key, register)(item);
       default:
         return null;
     }
   };
 
-const renderRadioButtons =
-  (key: string, register: FormElementRegisterer) => (item?: StringEnum) => {
-    const options =
-      item?.enum?.map((e, i) => ({ value: e, title: item?.enumNames?.[i] || '' })) || [];
+const renderCheckboxes = (key: string, register: FormElementRegisterer) => (item?: StringArray) => {
+  const options =
+    item?.items?.enum?.map((e, i) => ({ value: e, title: item?.items?.enumNames?.[i] || '' })) ||
+    [];
 
-    return (
-      <div role="radiogroup" key={key}>
-        {item?.title ? (
-          <div className="mb-4">
-            <Text size="text-m" font="font-light" color="text-secondary-text">
-              {item.title}
-            </Text>
-          </div>
-        ) : null}
-        <SlideCheckboxGroup items={options} multiple={false} {...register(key)} />
-      </div>
-    );
-  };
+  return (
+    <div key={key}>
+      {item?.title ? (
+        <div className="mb-4">
+          <Text size="text-m" font="font-light" color="text-secondary-text">
+            {item.title}
+          </Text>
+        </div>
+      ) : null}
+      <SlideCheckboxGroup items={options} multiple {...register(key)} />
+    </div>
+  );
+};

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

@@ -62,17 +62,15 @@ const buttonStylesWithText = (text: string, buttonSize: string) =>
     : `group/media flex items-center justify-center box-border ${buttonSizeStyles[buttonSize]}`;
 
 export const MediaButton = JSX<MediaButtonProps>(
-  ({ iconVersion = 'color', buttonSize = 'default', rounded = false, icon, ...rest }) => {
-    const { href, version, text, appendLeft, appendRight, aboveText } = rest;
+  ({ buttonSize = 'default', rounded = false, icon, ...rest }) => {
+    const { href, version, text = '' } = rest;
 
     const { iconMapped, label } =
       ICONS_MAP.find(({ origins }) => origins.some((_) => href?.includes(_))) || {};
 
-    const iconCustom = icon ?? iconMapped;
+    const iconCustom = getFilteredIcon(icon) ?? iconMapped;
 
-    const iconWithVersion = iconCustom
-      ? { ...getIconWithVersion(iconCustom), iconVersion }
-      : undefined;
+    const iconWithVersion = iconCustom ? getIconWithVersion(iconCustom) : undefined;
 
     return (
       <Button
@@ -83,11 +81,8 @@ export const MediaButton = JSX<MediaButtonProps>(
           '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 as string, buttonSize),
+          buttonStylesWithText(text, buttonSize),
         )}
-        aboveText={aboveText}
-        appendLeft={appendLeft}
-        appendRight={appendRight}
         aria-label={label}
         rel="noopener noreferrer"
         target="_blank"
@@ -108,3 +103,5 @@ export const MediaButton = JSX<MediaButtonProps>(
     );
   },
 );
+
+const getFilteredIcon = (icon: Picture | undefined) => (icon?.src || icon?.icon ? icon : undefined);

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

@@ -10,7 +10,9 @@
       "sources": [
         {
           "media": 1279,
-          "width": 360,
+          "size": {
+            "width": 360
+          },
           "format": "webp",
           "alignment": "center"
         }

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

@@ -11,7 +11,9 @@
       "sources": [
         {
           "media": 1279,
-          "width": 240,
+          "size": {
+            "width": 240
+          },
           "format": "webp",
           "alignment": "center"
         }

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

@@ -16,7 +16,9 @@
       "sources": [
         {
           "media": 1279,
-          "width": 164,
+          "size": {
+            "width": 164
+          },
           "format": "webp",
           "alignment": "northeast"
         }

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

@@ -11,7 +11,9 @@
       "sources": [
         {
           "media": 1279,
-          "width": 145,
+          "size": {
+            "width": 145
+          },
           "format": "webp",
           "alignment": "southeast"
         }

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

@@ -1,5 +1,5 @@
 {
   "content": {
-    "__html": "<p class=\"h1\">Заголовок 1</p>\n<p class=\"h2\">Заголовок 2</p>\n<p class=\"h3\">Заголовок 3</p>\n<p class=\"h4\">Заголовок 4</p>\n<p class=\"h5\">Заголовок 5</p>\n<p class=\"h6\">Заголовок 6</p>\n<p>Параграф, в котором много текста и даже <a href=\"#\">ссылка</a></p>\n<p><strong>Жирный текст</strong>, <em>Наклонный текст</em></p>\n<ul>\n  <li>Список с точками</li>\n  <li>Список с точками</li>\n</ul>\n<ol>\n  <li>Нумерованный список</li>\n  <li>Нумерованный список</li>\n</ol>\n"
+    "__html": "<h1>Заголовок 1</h1>\n<h2>Заголовок 2</h2>\n<h3>Заголовок 3</h3>\n<h4>Заголовок 4</h4>\n<h5>Заголовок 5</h5>\n<h6>Заголовок 6</h6>\n<p>Параграф, в котором много текста и даже <a href=\"#\">ссылка</a></p>\n<p><strong>Жирный текст</strong>, <em>Наклонный текст</em></p>\n<ul>\n  <li>Список с точками</li>\n  <li>Список с точками</li>\n</ul>\n<ol>\n  <li>Нумерованный список</li>\n  <li>Нумерованный список</li>\n</ol>\n"
   }
 }

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

@@ -11,7 +11,9 @@
       "sources": [
         {
           "media": 1279,
-          "width": 276,
+          "size": {
+            "width": 276
+          },
           "format": "webp",
           "alignment": "southeast"
         }

package/mobile/src/components/VerticalLayout/VerticalLayoutContent.ts

@@ -1,5 +1,4 @@
 import type { AlignTypeWithStretch } from '../../model/AlignType';
-import type { ColorPalette } from '../../model/ContentPageDef';
 import type { UniBlockContent } from '../../model/JSXBlock';
 import type { GapVersion } from '../HorizontalLayout/HorizontalLayoutContent';
 
@@ -7,7 +6,6 @@ import type { GapVersion } from '../HorizontalLayout/HorizontalLayoutContent';
  * @title Вертикальный компоновщик
  */
 export type VerticalLayoutContent = UniBlockContent & {
-  colorPalette?: ColorPalette;
   align?: AlignTypeWithStretch;
   gap?: GapVersion;
   /** @title Внутренний отступ компоновщика */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@redneckz/wildless-cms-uni-blocks",
-  "version": "0.9.9",
+  "version": "0.9.11",
   "private": false,
   "license": "MIT",
   "author": "ЦК",

package/src/components/ApplicationForm/ApplicationFormCredit.tsx

@@ -87,7 +87,7 @@ export const ApplicationFormCredit = JSX<ApplicationFormsProps>((props) => {
       {renderCreditParameters({ amount, term, handleChange })}
       <Heading headingType="h6" title="Данные организации" className="text-center mb-4" />
       {renderDataOrganization({ fullName, inn, name, phone, mail, annualRevenue, handleChange })}
-      <Heading headingType="h6" title="Офис банка" className="text-center mb-4" />
+      <Heading headingType="h6" title="Офис Банка" className="text-center mb-4" />
       {renderBankOffices({
         regions,
         region: selectedRegion,

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

@@ -6,7 +6,10 @@ import { CARD, CARD_MINI, CARD_NEW } from '../CarouselCard/CarouselCard.fixture'
 import { CATALOG_CARD } from '../CarouselCatalogCard/CarouselCatalogCard.fixture';
 import { CAROUSEL_EVENT_CARD } from '../CarouselEventCard/CarouselEventCard.fixture';
 import { INVESTMENT_CARD_WITH_SINGLE_COLUMN } from '../CarouselInvestmentCard/CarouselInvestmentCard.fixture';
-import { PRODUCT_CARD } from '../CarouselProductCard/CarouselProductCard.fixture';
+import {
+  PRODUCT_CARD,
+  PRODUCT_CARD_SMALL,
+} from '../CarouselProductCard/CarouselProductCard.fixture';
 import { BUSINESS_CARD } from '../CarouselProgramsCard/CarouselProgramsCard.fixture';
 import {
   CAROUSEL_RECOMMENDATION_CARD_SECONDARY,
@@ -118,10 +121,20 @@ export default {
         isBlur={true}
         block={{
           type: 'Carousel',
-          blocks: new Array(6).fill({
-            type: 'CarouselProductCard',
-            content: PRODUCT_CARD,
-          }),
+          blocks: [
+            {
+              type: 'CarouselProductCard',
+              content: PRODUCT_CARD,
+            },
+            {
+              type: 'CarouselProductCard',
+              content: PRODUCT_CARD_SMALL,
+            },
+            {
+              type: 'CarouselProductCard',
+              content: PRODUCT_CARD_SMALL,
+            },
+          ],
         }}
         options={options}
       />

package/src/components/CarouselBankHistoryCard/CarouselBankHistoryCard.fixture.tsx

@@ -1,19 +1,12 @@
 import { CarouselBankHistoryCard } from './CarouselBankHistoryCard';
+import type { CarouselBankHistoryCardContent } from './CarouselBankHistoryCardContent';
 
-export const BANK_HISTORY_CARD = {
+export const BANK_HISTORY_CARD: CarouselBankHistoryCardContent = {
   title: '1796г.',
   description:
     "Россельхозбанк стал одним из ключевых участников Приоритетного национального проекта 'Развитие АПК' целью которого развитие агропромышленного сектора российской экономики",
 };
 
-export const ACTIVE_BANK_HISTORY_CARD = {
-  title: '1796г.',
-  description:
-    "Россельхозбанк стал одним из ключевых участников Приоритетного национального проекта 'Развитие АПК' целью которого развитие агропромышленного сектора российской экономики",
-  isActive: true,
-};
-
 export default {
   default: <CarouselBankHistoryCard {...BANK_HISTORY_CARD} />,
-  active: <CarouselBankHistoryCard {...ACTIVE_BANK_HISTORY_CARD} />,
 };

package/src/components/CarouselBankHistoryCard/CarouselBankHistoryCard.tsx

@@ -20,12 +20,12 @@ export const CarouselBankHistoryCard = JSX<CarouselBankHistoryCardProps>(
         {isActive ? (
           <div className="relative flex items-center w-full">
             <Headline
-              headlineVersion="S"
+              headlineVersion="M"
               title={title}
               description={description}
               align="text-left"
               className={style(
-                'absolute z-10 h-[385px] w-[440px] text-white shadow-dark-blue',
+                'absolute z-10 h-[385px] w-[440px] p-8 text-white shadow-dark-blue',
                 getActiveBlockPosition(orderNumber, blocksLength),
                 getBackgroundColor(orderNumber),
               )}
@@ -57,7 +57,6 @@ const getBackgroundColor = (orderNumber: number) => {
       return 'bg-green-light';
     case 2:
       return 'bg-yellow-light';
-
     default:
       return 'bg-primary-main';
   }
@@ -70,7 +69,6 @@ const getTextColor = (orderNumber: number) => {
       return 'gradient-color-text-on-yellow';
     case 2:
       return 'gradient-color-text-on-yellow';
-
     default:
       return 'gradient-color-text-on-green';
   }

package/src/components/CarouselEventCard/CarouselEventCard.tsx

@@ -19,11 +19,11 @@ export const CarouselEventCard = JSX<CarouselEventCardProps>(
           {icon?.icon ? <Img image={getIconWithVersion(icon)} asSVG /> : null}
           {icon?.src ? <Img image={icon} /> : null}
           {title ? (
-            <Heading headingType="h6" as="h4" className="text-left mb-2" title={title} />
+            <Heading headingType="h6" as="h4" className="text-left pt-3 mb-2" title={title} />
           ) : null}
           {description ? (
             <div className="mb-4">
-              <Text font="font-light" size="text-s" color="text-secondary-text">
+              <Text font="font-light" size="text-m" color="text-secondary-text">
                 {description}
               </Text>
             </div>

package/src/components/CarouselInvestmentCard/CarouselInvestmentCard.example.json

@@ -7,7 +7,9 @@
     "sources": [
       {
         "media": 1279,
-        "width": 174,
+        "size": {
+          "width": 174
+        },
         "format": "webp",
         "alignment": "southeast"
       }