@redneckz/wildless-cms-uni-blocks 0.4.3 → 0.4.5

package/src/content-page-repository/transformImg.ts

@@ -0,0 +1,157 @@
+import fs from 'fs';
+import path from 'path';
+import util from 'util';
+import sharp from 'sharp';
+import type { ResizeOptions, Sharp } from 'sharp';
+import type { ImageSize } from '../model/ImageSize';
+import type { TransformationOptions } from './TransformationOptions';
+import type { ImgAlignment, ImgSource, Picture } from '../model/Picture';
+import { transformSrc } from './transformSrc';
+import { isPictureSizeEmpty } from '../utils/isPictureSizeEmpty';
+
+const mkdir = util.promisify(fs.mkdir);
+
+type TransformImgParams = {
+  pagePath: string;
+  src: string;
+  containerSize?: ImageSize;
+  transformationOptions: TransformationOptions & ImgSource;
+};
+
+export async function transformImg({
+  pagePath,
+  src,
+  containerSize,
+  transformationOptions,
+}: TransformImgParams): Promise<string> {
+  if (!src) {
+    return '';
+  }
+
+  const { contentDir, publicDir, format, options, size, alignment } = transformationOptions;
+
+  const pageDir = path.dirname(pagePath);
+  const imgPath = `${pageDir}/${src}`;
+  let chain = sharp(imgPath);
+
+  const targetSize = getPictureSize(size, containerSize);
+
+  if (targetSize) {
+    chain = resizeImg(chain, targetSize, getResizeFit(targetSize));
+  }
+
+  if (containerSize) {
+    chain = resizeImg(chain, containerSize);
+
+    // Save intermediate transform result to modify further
+    const { data } = await chain.toBuffer({ resolveWithObject: true });
+
+    chain = resizeImg(
+      sharp(data),
+      getCompositionResizeSize(containerSize, targetSize),
+      getResizeFit(targetSize),
+    );
+
+    chain = await compositeImg({ chain, containerSize, alignment });
+  }
+
+  if (format) {
+    chain = chain.toFormat(format, options);
+  }
+
+  const transformedSrc = transformSrc(src, transformationOptions);
+  const transformedImgPath = `${publicDir}/${path.relative(
+    contentDir,
+    `${path.dirname(pagePath)}/${transformedSrc}`,
+  )}`;
+
+  await mkdir(path.dirname(transformedImgPath), { recursive: true });
+
+  try {
+    await chain.toFile(transformedImgPath);
+  } catch (e) {
+    console.error(e);
+  }
+
+  return transformedSrc;
+}
+
+function createBackgroundImageChain({ width, height }: ImageSize) {
+  const channels = 4;
+  const rgbaColor = 0x00000000;
+
+  const canvas = Buffer.alloc(width * height * channels, rgbaColor);
+
+  return sharp(canvas, { raw: { width, height, channels } });
+}
+
+function resizeImg(chain: Sharp, size: Picture['size'], options?: ResizeOptions) {
+  return chain.resize(size?.width, size?.height, {
+    fit: sharp.fit.fill,
+    background: { r: 0, g: 0, b: 0, alpha: 0 },
+    ...options,
+  });
+}
+
+type CompositeImgParams = {
+  chain: Sharp;
+  containerSize: ImageSize;
+  alignment?: ImgAlignment;
+};
+
+async function compositeImg({
+  chain,
+  containerSize,
+  alignment,
+}: CompositeImgParams): Promise<Sharp> {
+  const { data } = await chain.toBuffer({ resolveWithObject: true });
+
+  return createBackgroundImageChain(containerSize).composite([
+    {
+      input: data,
+      gravity: alignment,
+    },
+  ]);
+}
+
+function getPictureSize(size: Picture['size'], containerSize?: ImageSize) {
+  // If containerSize is undefined intrinsic dimensions of image will be used then.
+  return isPictureSizeEmpty(size) ? containerSize : size;
+}
+
+function getCompositionResizeSize(
+  containerSize: ImageSize,
+  size: Picture['size'] = {},
+): Picture['size'] {
+  const { width, height } = size;
+  const { width: containerWidth, height: containerHeight } = containerSize;
+
+  let widthRatio = 0;
+  let heightRatio = 0;
+
+  if (!(width || height)) {
+    return undefined;
+  }
+
+  if (width) {
+    widthRatio = containerWidth / width;
+  }
+
+  if (height) {
+    heightRatio = containerHeight / height;
+  }
+
+  return widthRatio > heightRatio
+    ? { width: Math.min(Number(width), containerWidth) }
+    : { height: Math.min(Number(height), containerHeight) };
+}
+
+function getResizeFit(size: Picture['size']): ResizeOptions {
+  /*
+    Editor behaviour with one dimension present: resize by given dimension maintaining aspect ratio. (fit: contain)
+    With two dimensions present: resize trying to fill given dimensions (fit: fill)
+   */
+  return {
+    fit: size?.width && size?.height ? sharp.fit.fill : sharp.fit.contain,
+  };
+}

package/src/content-page-repository/transformPicture.ts

@@ -1,11 +1,8 @@
-import fs from 'fs';
 import path from 'path';
 import sharp from 'sharp';
-import util from 'util';
-import type { ImgSource, Picture } from '../model/Picture';
+import type { Picture } from '../model/Picture';
 import type { TransformationOptions } from './TransformationOptions';
-
-const mkdir = util.promisify(fs.mkdir);
+import { transformImg } from './transformImg';
 
 export async function transformPicture(
   pagePath: string,
@@ -14,8 +11,27 @@ export async function transformPicture(
 ): Promise<Picture> {
   const sources = picture.sources || [];
   const src = picture?.src || '';
-  const [transformedPicture, ...transformedSources] = await Promise.all(
-    [picture].concat(sources).map((_) => transformImg(pagePath, src, { ...options, ..._ })),
+
+  const transformedPicture = await transformImg({
+    pagePath,
+    src,
+    transformationOptions: { ...options, ...picture },
+  });
+
+  const { width, height } = await sharp(
+    path.resolve(options.publicDir, transformedPicture),
+  ).metadata();
+  const containerSize = width && height ? { width, height } : undefined;
+
+  const transformedSources = await Promise.all(
+    sources.map((_) =>
+      transformImg({
+        pagePath,
+        src,
+        containerSize,
+        transformationOptions: { ...options, ..._ },
+      }),
+    ),
   );
 
   return {
@@ -24,57 +40,7 @@ export async function transformPicture(
     sources: transformedSources.map((_, i) => ({
       ...sources[i],
       src: _,
+      size: { width, height },
     })),
   };
 }
-
-async function transformImg(
-  pagePath: string,
-  src: string,
-  transformationOptions: TransformationOptions & ImgSource,
-): Promise<string> {
-  const { contentDir, publicDir, format, options, size } = transformationOptions;
-
-  const pageDir = path.dirname(pagePath);
-  const imgPath = `${pageDir}/${src}`;
-  let chain = sharp(imgPath);
-  if (size) {
-    chain = chain.resize(size?.width, size?.height, {
-      fit: sharp.fit.contain,
-      background: [0, 0, 0, 0],
-    });
-  }
-  if (format) {
-    chain = chain.toFormat(format, options);
-  }
-
-  const transformedSrc = transformSrc(src, transformationOptions);
-  const transformedImgPath = `${publicDir}/${path.relative(
-    contentDir,
-    `${path.dirname(pagePath)}/${transformedSrc}`,
-  )}`;
-
-  await mkdir(path.dirname(transformedImgPath), { recursive: true });
-
-  try {
-    await chain.toFile(transformedImgPath);
-  } catch (e) {
-    console.error(e);
-  }
-
-  return transformedSrc;
-}
-
-function transformSrc(src: string, { format, size }: TransformationOptions & ImgSource): string {
-  const noTransform = !format && !size;
-  if (noTransform) {
-    return src;
-  }
-
-  const fileName = path.basename(src, path.extname(src));
-  const fileSizes = [size?.width, size?.height].filter(Boolean);
-  const suffix = fileSizes.length ? `-${fileSizes.join('-')}` : '';
-  const ext = String(format) || path.extname(src);
-
-  return `${fileName}${suffix}.${ext}`;
-}

package/src/content-page-repository/transformSrc.ts

@@ -0,0 +1,21 @@
+import path from 'path';
+import type { ImgSource } from '../model/Picture';
+import type { TransformationOptions } from './TransformationOptions';
+import { isPictureSizeEmpty } from '../utils/isPictureSizeEmpty';
+
+export function transformSrc(
+  src: string,
+  { format, size }: TransformationOptions & ImgSource,
+): string {
+  const noTransform = isPictureSizeEmpty(size) && !format;
+  if (noTransform) {
+    return src;
+  }
+
+  const fileName = path.basename(src, path.extname(src));
+  const fileSizes = [size?.width, size?.height].filter(Boolean);
+  const suffix = fileSizes.length ? `-${fileSizes.join('-')}` : '';
+  const ext = format ? String(format) : 'webp';
+
+  return `${fileName}${suffix}.${ext}`;
+}

package/src/cosmos.decorator.tsx

@@ -10,7 +10,7 @@ export default ({ children }) => {
   return (
     <div
       style={{
-        backgroundColor: 'rgba(51, 51, 51, 0.07)',
+        backgroundColor: 'rgba(235, 237, 240, 1)',
         position: 'absolute',
         left: 0,
         right: 0,

package/src/hooks/useExchangeRates.ts

@@ -1,5 +1,7 @@
 import { useAsyncData } from '@redneckz/uni-jsx/lib/hooks/useAsyncData';
 import type { ExchangeCurrencyItem } from '../components/ExchangeRateTile/ExchangeCurrencyCalculator';
+import { fetchJSON } from '../utils/fetchJSON';
+import { roundTo } from '../utils/roundTo';
 
 interface RatesData {
   code: string;
@@ -15,22 +17,11 @@ export function useExchangeRates(): ExchangeCurrencyItem[] {
   return result.length ? getCurrencyListByRate(result as RatesData[]) : result;
 }
 
-async function fetchExchangeRates(): Promise<any | undefined> {
-  try {
-    const response = await fetch(EXCHANGE_RATES_URL, {
-      method: 'POST',
-      headers: {
-        'Content-Type': 'application/json',
-      },
-      body: JSON.stringify(EXCHANGE_RATES_BODY),
-    });
-
-    return await response.json();
-  } catch (err) {
-    console.error(err);
-
-    return Promise.resolve();
-  }
+function fetchExchangeRates(): Promise<any | undefined> {
+  return fetchJSON(EXCHANGE_RATES_URL, {
+    method: 'POST',
+    body: JSON.stringify(EXCHANGE_RATES_BODY),
+  });
 }
 
 const EXCHANGE_RATES_URL =
@@ -76,12 +67,10 @@ const getCurrencyListByRate = (currencyRates: RatesData[]) =>
     if (!result.some((i) => i.code === currencyCode)) {
       result.push({
         code: currencyCode,
-        buy: roundRate(Number(_.rate_buy)),
-        sell: roundRate(Number(_.rate_sell)),
+        buy: roundTo(Number(_.rate_buy), 3),
+        sell: roundTo(Number(_.rate_sell), 3),
       });
     }
 
     return result;
   }, []);
-
-const roundRate = (value) => Math.round(value * 1000) / 1000;

package/src/hooks/useTariffsInnerTableData.ts

@@ -0,0 +1,20 @@
+import { useAsyncData } from '@redneckz/uni-jsx/lib/hooks/useAsyncData';
+
+export function useTariffsInnerTableData(directoryName?: string): any {
+  const { data } = useAsyncData(
+    tariffsInnerTableDataUrl(directoryName),
+    fetchTariffsInnerTableData,
+  );
+
+  return data || {};
+}
+
+async function fetchTariffsInnerTableData(url: string): Promise<any> {
+  const response = await fetch(url);
+
+  return await response.json();
+}
+
+function tariffsInnerTableDataUrl(directoryName?: string) {
+  return `/wcms-resources/${directoryName || 'tariffs-inner-table-data'}.json`;
+}

package/src/icons/CardTickIcon.svg

@@ -1 +1,7 @@
-<svg title="Кред. карта с галочкой" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M2 8.5h11.5M6 16.5h2M10.5 16.5h4" stroke="#000000" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/><path d="M2 11.01V7.89c0-3.51.89-4.39 4.44-4.39h7.06M22 11.03v5.08c0 3.51-.89 4.39-4.44 4.39H6.44C2.89 20.5 2 19.62 2 16.11v-1.1" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><path d="M16.5 6 18 7.5l4-4" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>
+<svg title="Кред. карта с галочкой" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M6 10H22" stroke="#1C1C1C" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M11.5502 20.4998H6.44025C2.89025 20.4998 1.99023 19.6198 1.99023 16.1098V7.88977C1.99023 4.70977 2.73026 3.68977 5.52026 3.52977C5.80026 3.51977 6.11025 3.50977 6.44025 3.50977H17.5502C21.1002 3.50977 22.0002 4.38977 22.0002 7.89977V12.3098" stroke="#1C1C1C" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M6 16H10" stroke="#1C1C1C" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M22 18C22 18.75 21.79 19.46 21.42 20.06C20.73 21.22 19.46 22 18 22C16.54 22 15.27 21.22 14.58 20.06C14.21 19.46 14 18.75 14 18C14 15.79 15.79 14 18 14C20.21 14 22 15.79 22 18Z" stroke="#42AB44" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M16.4395 18L17.4294 18.99L19.5594 17.02" stroke="#42AB44" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/src/icons/DocDownload.svg

@@ -0,0 +1,8 @@
+<svg title="Скачать документ" width="21" height="20" viewBox="0 0 21 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M7.59766 11.959V14.1673L9.26432 12.5007" stroke="#42AB44" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M7.59766 9.16602V9.99935" stroke="#42AB44" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M7.59635 14.1667L5.92969 12.5" stroke="#42AB44" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M1.76562 7.49935C1.76562 3.33268 3.43229 1.66602 7.59896 1.66602H11.7656" stroke="#42AB44" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M18.4323 8.33398V12.5007C18.4323 16.6673 16.7656 18.334 12.599 18.334H7.59896C3.43229 18.334 1.76562 16.6673 1.76562 12.5007V10.8173" stroke="#42AB44" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M15.099 8.33268C12.599 8.33268 11.7656 7.49935 11.7656 4.99935V1.66602L18.4323 8.33268" stroke="#42AB44" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/src/icons/IconName.ts

@@ -26,6 +26,7 @@ export enum IconMap {
   ComfortableCompIcon = 'ComfortableCompIcon',
   CreditCardsIcon = 'CreditCardsIcon',
   DiscountShapeIcon = 'DiscountShapeIcon',
+  DocDownload = 'DocDownload',
   DocIcon = 'DocIcon',
   DocIconMonoColor = 'DocIconMonoColor',
   DocsIcon = 'DocsIcon',
@@ -111,6 +112,7 @@ export enum IconTitleMap {
   ComfortableCompIcon = 'Кресло',
   CreditCardsIcon = 'Кредитные карты',
   DiscountShapeIcon = 'Скидка',
+  DocDownload = 'Скачать документ',
   DocIcon = 'Документ',
   DocIconMonoColor = 'Документ (одноцветный)',
   DocsIcon = 'Документы',
@@ -175,7 +177,7 @@ export enum IconTitleMap {
  * @title Иконка
  * @enumNames [
  *   "",
- *   'Деньги', 'Самолет', 'Лого «Apple»', 'Стрелка \'Вниз\'', 'Стрелка', 'Стрелка вверх', 'Банкомат', 'Банк', 'Бургер', 'Календарь 2', 'Скруглённый календарь', 'Календарь', 'Календарь с галочкой', 'Кред. карта', 'Кред. карта под наклоном', 'Кред. карта с галочкой', 'Карта с драгоценностями', 'Машина', 'Деньги внутри кошелька', 'Кино', 'Часы', 'Крестик', 'Кресло', 'Кредитные карты', 'Скидка', 'Документ', 'Документ (одноцветный)', 'Документы', 'Документ с текстом', 'Доллар', 'Зелёная \'галочка\'', 'Земля', 'Пустой кошелёк с возвратом', 'Пустой кошелёк', 'Евро', 'Геолокация', 'Зеркало', 'Глобус', 'Gps', 'Сетка (белая)', 'Диаграмма роста', 'Скидка', 'JCB', 'Logo', 'Лупа', 'MasterCard', 'Минус', 'МИР', 'Деньги', 'Денежное страхование', 'Монитор и мобильный', 'Новый документ', 'Офис', 'Лого «Одноклассники»', 'PackA4', 'Бизнес', 'Проценты (круг.)', 'Проценты', 'Персональная карта', 'Лого «PlayMarket»', 'Плюс', 'Щит', 'Профиль, 2 персоны', 'Профиль', 'Тыква', 'Рубль (круг.)', 'Сейф', 'Безопасность', 'Подписанные документы', 'Маленькие часы', 'Звук', 'StateMortgageIcon', 'Лого «Telegram»', 'UnionPay', 'Пользователь', 'Visa', 'Лого «VK»', 'Пополнение карты', 'Кошелёк с плюсом', 'Кошелёк', 'Кошелёк с деньгами', 'Добавить продукт'
+ *   'Деньги', 'Самолет', 'Лого «Apple»', 'Стрелка \'Вниз\'', 'Стрелка', 'Стрелка вверх', 'Банкомат', 'Банк', 'Бургер', 'Календарь 2', 'Скруглённый календарь', 'Календарь', 'Календарь с галочкой', 'Кред. карта', 'Кред. карта под наклоном', 'Кред. карта с галочкой', 'Карта с драгоценностями', 'Машина', 'Деньги внутри кошелька', 'Кино', 'Часы', 'Крестик', 'Кресло', 'Кредитные карты', 'Скидка', 'Скачать документ', 'Документ', 'Документ (одноцветный)', 'Документы', 'Документ с текстом', 'Доллар', 'Зелёная \'галочка\'', 'Земля', 'Пустой кошелёк с возвратом', 'Пустой кошелёк', 'Евро', 'Геолокация', 'Зеркало', 'Глобус', 'Gps', 'Сетка (белая)', 'Диаграмма роста', 'Скидка', 'JCB', 'Logo', 'Лупа', 'MasterCard', 'Минус', 'МИР', 'Деньги', 'Денежное страхование', 'Монитор и мобильный', 'Новый документ', 'Офис', 'Лого «Одноклассники»', 'PackA4', 'Бизнес', 'Проценты (круг.)', 'Проценты', 'Персональная карта', 'Лого «PlayMarket»', 'Плюс', 'Щит', 'Профиль, 2 персоны', 'Профиль', 'Тыква', 'Рубль (круг.)', 'Сейф', 'Безопасность', 'Подписанные документы', 'Маленькие часы', 'Звук', 'StateMortgageIcon', 'Лого «Telegram»', 'UnionPay', 'Пользователь', 'Visa', 'Лого «VK»', 'Пополнение карты', 'Кошелёк с плюсом', 'Кошелёк', 'Кошелёк с деньгами', 'Добавить продукт'
  * ]
  */
 export type IconName =
@@ -205,6 +207,7 @@ export type IconName =
   | 'ComfortableCompIcon'
   | 'CreditCardsIcon'
   | 'DiscountShapeIcon'
+  | 'DocDownload'
   | 'DocIcon'
   | 'DocIconMonoColor'
   | 'DocsIcon'

package/src/model/BlockVersion.ts

@@ -9,3 +9,8 @@ export type BlockVersion = 'primary' | 'secondary';
  * @enumNames ["Прозрачная", "Основная", "Второстепенная"]
  */
 export type BlockVersionWithTransparent = 'transparent' | 'primary' | 'secondary';
+
+export const VersionStyleMap: Record<BlockVersion, string> = {
+  primary: 'bg-white text-primary-text',
+  secondary: 'bg-primary-main text-white',
+};

package/src/model/HeadlineType.ts

@@ -4,17 +4,17 @@
  */
 export type HeadlineVersion = 'XXL' | 'XL' | 'L' | 'M' | 'S';
 
-export type TitleProp = {
+export type TitleProps = {
   /** @title Заголовок */
   title?: string;
 };
 
-export type DescriptionProp = {
+export type DescriptionProps = {
   /** @title Описание */
   description?: string;
 };
 
-export type HeadlineCommonProps = TitleProp & DescriptionProp;
+export type HeadlineCommonProps = TitleProps & DescriptionProps;
 
 export type HeadlineProps = HeadlineCommonProps & {
   headlineVersion?: HeadlineVersion;

package/src/model/ImageSize.ts

@@ -0,0 +1,6 @@
+export type ImageSize = {
+  /** @title Ширина */
+  width: number;
+  /** @title Высота */
+  height: number;
+};

package/src/model/LinkProps.ts

@@ -10,14 +10,17 @@
  */
 export type Target = '' | '_self' | '_blank' | '_parent' | '_top';
 
+export interface LinkCommonProps {
+  /** @title URL (href) */
+  href?: string;
+  target?: Target;
+}
+
 /**
  * @title Ссылка
  * @required ["text", "href"]
  */
-export interface LinkProps {
+export interface LinkProps extends LinkCommonProps {
   /** @title Текст */
   text?: string;
-  /** @title URL (href) */
-  href?: string;
-  target?: Target;
 }

package/src/model/Picture.ts

@@ -1,8 +1,35 @@
 import type { IconName } from '../icons/IconName';
 import type { IconVersion } from './IconVersion';
+import { ImageSize } from './ImageSize';
 
 export type ImgFormats = 'jpeg' | 'jpg' | 'png' | 'gif' | 'webp' | 'heif' | 'avif';
 
+/**
+ * @title Позиционирование
+ * @enumNames [
+ *    "Сверху слева",
+ *    "Сверху по центру",
+ *    "Сверху справа",
+ *    "Посередине слева",
+ *    "Посередине по центру",
+ *    "Посередине справа",
+ *    "Снизу слева",
+ *    "Снизу по центру",
+ *    "Снизу справа"
+ *  ]
+ * @default "center"
+ */
+export type ImgAlignment =
+  | 'northwest'
+  | 'north'
+  | 'northeast'
+  | 'west'
+  | 'center'
+  | 'east'
+  | 'southwest'
+  | 'south'
+  | 'southeast';
+
 export interface Img {
   /** @title Картинка */
   src?: string;
@@ -19,6 +46,7 @@ export interface Img {
 export type MediaQuery = 1919 | 1439 | 1279;
 
 export interface ImgSource {
+  alignment?: ImgAlignment;
   /** @title Иконка */
   icon?: IconName;
   iconVersion?: IconVersion;
@@ -30,12 +58,7 @@ export interface ImgSource {
   options?: Record<string, any>;
   media?: MediaQuery;
   /** @title Размер изображения */
-  size?: {
-    /** @title Ширина */
-    width?: number;
-    /** @title Высота */
-    height?: number;
-  };
+  size?: Partial<ImageSize>;
 }
 
 /** @title Изображение */

package/src/services/sitemap/useSitemap.ts

@@ -1,19 +1,13 @@
 import { useAsyncData } from '@redneckz/uni-jsx/lib/hooks/useAsyncData';
 import type { HeaderContent } from '../../components/Header/HeaderContent';
 import { projectSettings } from '../../ProjectSettings';
+import { fetchJSONUnsafe } from '../../utils/fetchJSON';
 
 export function useSitemap(): HeaderContent {
-  const { data } = useAsyncData(sitemapURL(), fetchSitemap);
+  const { data } = useAsyncData<HeaderContent>(
+    `/wcms-resources/${projectSettings.SITEMAP || 'sitemap'}.json`,
+    fetchJSONUnsafe,
+  );
 
   return data || {};
 }
-
-async function fetchSitemap(): Promise<HeaderContent> {
-  const response = await fetch(sitemapURL());
-
-  return await response.json();
-}
-
-function sitemapURL() {
-  return `/wcms-resources/${projectSettings.SITEMAP || 'sitemap'}.json`;
-}

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

@@ -27,7 +27,7 @@ export const BenefitItem = JSX<BenefitGeneralProps>((props) => {
   const isIconWhite = benefitsVersion === 'white' || version === 'secondary';
 
   return (
-    <div className={`flex items-center gap-5 ${className}`}>
+    <div className={`flex items-start gap-5 ${className}`}>
       {icon ? (
         <Img
           className={renderBenefitIconBgStyle(version, benefitsVersion)}
@@ -54,5 +54,5 @@ function renderBenefitIconBgStyle(version, benefitsVersion) {
     bgColorStyle = 'bg-secondary-light text-primary-main';
   }
 
-  return `w-[50px] h-[50px] rounded-full p-[10px] box-border ${bgColorStyle}`;
+  return `w-[50px] h-[50px] min-w-[50px] rounded-full p-[10px] box-border ${bgColorStyle}`;
 }

package/src/ui-kit/BlocksList/renderBlocksList.tsx

@@ -5,7 +5,7 @@ import { style2className } from '../../utils/style2className';
 import type { BlockDef } from './BlocksListProps';
 import { EmbeddableBlocks } from './EmbeddableBlocks';
 
-type EmbeddableBlocksProps = {
+export type EmbeddableBlocksProps = {
   blocks?: BlockDef[];
   context: ContentPageContext;
   className?: string;

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

@@ -4,7 +4,7 @@
 import { JSX } from '@redneckz/uni-jsx';
 import type { ButtonVersion } from '../../model/ButtonVersion';
 import { ButtonInner } from './ButtonInner';
-import type { ButtonProps, ButtonWithIconProps } from './ButtonProps';
+import type { ButtonWithIconProps } from './ButtonProps';
 
 const buttonStyleMap: Record<ButtonVersion, string> = {
   primary: 'text-white bg-primary-main hover:bg-primary-hover active:bg-primary-active',
@@ -21,9 +21,7 @@ const buttonDisabledStyleMap: Record<ButtonVersion, string> = {
 
 const styleButton = 'w-full text-center font-sans select-none';
 
-export interface ButtonCommonProps extends ButtonProps, ButtonWithIconProps {}
-
-export const Button = JSX<ButtonCommonProps>(
+export const Button = JSX<ButtonWithIconProps>(
   ({
     className,
     text,

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

@@ -1,7 +1,7 @@
 import { JSX } from '@redneckz/uni-jsx';
 import type { ButtonVersion } from '../../model/ButtonVersion';
 import { ButtonInner } from './ButtonInner';
-import type { ButtonProps, ButtonWithIconProps } from './ButtonProps';
+import type { ButtonWithIconProps } from './ButtonProps';
 
 const buttonStyleMap: Record<ButtonVersion, string> = {
   primary: 'text-white bg-primary-main hover:bg-primary-hover active:bg-primary-active',
@@ -18,9 +18,7 @@ const buttonDisabledStyleMap: Record<ButtonVersion, string> = {
 
 const buttonStyle = 'text-center font-sans select-none';
 
-export interface ButtonCommonProps extends ButtonProps, ButtonWithIconProps {}
-
-export const Button = JSX<ButtonCommonProps>((props) => {
+export const Button = JSX<ButtonWithIconProps>((props) => {
   const { text, aboveText, appendLeft, appendRight, children, disabled, rounded, ...rest } = props;
 
   const buttonInner = children ?? (
@@ -44,7 +42,7 @@ export const Button = JSX<ButtonCommonProps>((props) => {
   );
 });
 
-const RegularButton = JSX<ButtonCommonProps>(
+const RegularButton = JSX<ButtonWithIconProps>(
   ({
     className = '',
     ariaLabel,
@@ -58,7 +56,7 @@ const RegularButton = JSX<ButtonCommonProps>(
   }) => {
     return (
       <a
-        className={`${buttonStyle} inline-block cursor-pointer no-underline focus:border-primary-focus focus:border ${
+        className={`${buttonStyle} border border-transparent inline-block cursor-pointer no-underline focus:border-primary-focus focus:border ${
           buttonStyleMap[version] || ''
         } ${rounded ? 'rounded-full' : 'rounded-md'} ${className}`}
         href={href}
@@ -74,7 +72,7 @@ const RegularButton = JSX<ButtonCommonProps>(
   },
 );
 
-const DisabledButton = JSX<ButtonCommonProps>(
+const DisabledButton = JSX<ButtonWithIconProps>(
   ({ className, children, ariaLabel, version = 'none', rounded }) => {
     return (
       <div