@redneckz/wildless-cms-uni-blocks 0.6.46 → 0.6.48

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

@@ -16,9 +16,9 @@ export const Checkbox = JSX<CheckboxProps>(({ className, text, checked, isRadio,
     <div className={className}>
       <label className="flex items-center relative cursor-pointer group">
         <input
-          className={`peer appearance-none w-5 h-5 border-solid cursor-pointer group-hover:border-checkbox-hover
+          className={`peer appearance-none w-5 h-5 border-solid cursor-pointer group-hover:border-primary-hover
         ${isRadio ? 'rounded-full border-2' : 'rounded checked:bg-primary-main border'}
-        ${checked ? 'border-black' : 'border-main-stroke'}
+        ${checked ? 'border-black' : 'border-gray'}
         checked:border-primary-main m-0`}
           type="checkbox"
           onChange={(e) => onChange && onChange(e.target.checked as boolean)}

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

@@ -1,6 +1,5 @@
 import { JSX } from '@redneckz/uni-jsx';
 import { ImgInner } from './ImgInner';
+import type { ImageProps } from './ImgProps';
 
-import type { Image, ImageProps } from './ImgProps';
-
-export const Img = JSX<ImageProps<Image>>((props) => <ImgInner {...props} isMobile={true} />);
+export const Img = JSX<ImageProps>((props) => <ImgInner {...props} isMobile={true} />);

package/mobile/src/ui-kit/Img/ImgAsPicture.tsx

@@ -10,14 +10,13 @@ const sourcesComparator = (a: Picture, b: Picture) => {
   return 0;
 };
 
-export const ImgAsPicture = JSX<ImageProps<Picture>>(
-  ({ className = '', image, imageClassName = '', isMobile = false, pathPrefix = '' }) => {
+export const ImgAsPicture = JSX<ImageProps>(
+  ({ className = '', image, imageClassName = '', isMobile = false, pathPrefix }) => {
     if (!image || (!image?.sources && !image?.src)) {
       return null;
     }
 
     const pictureStyles = isMobile ? 'flex' : 'flex-none';
-    const normalizedPathPrefix = normalizePathPrefix(pathPrefix);
 
     return (
       <picture className={`${pictureStyles} ${className}`}>
@@ -27,7 +26,7 @@ export const ImgAsPicture = JSX<ImageProps<Picture>>(
               .map(({ src, format, media }, index) => (
                 <source
                   key={`${index}_${src}`}
-                  srcSet={addPathPrefixToSrcSet(src, normalizedPathPrefix)}
+                  srcSet={addPathPrefixToSrcSet(src, pathPrefix)}
                   type={formatToMimeType(format)}
                   media={media ? `(max-width: ${media}px)` : ''}
                   {...image.size}
@@ -35,7 +34,7 @@ export const ImgAsPicture = JSX<ImageProps<Picture>>(
               ))
           : null}
         {renderImg(
-          { ...image, src: `${normalizedPathPrefix}${image.src}` },
+          { ...image, src: addPathPrefixToSrc(image.src, pathPrefix) },
           imageClassName,
           isMobile,
         )}
@@ -69,10 +68,13 @@ const renderImg = (image: Picture, imageClassName = '', isMobile = false) => {
 const normalizePathPrefix = (pathPrefix = '') =>
   pathPrefix && !pathPrefix.endsWith('/') ? `${pathPrefix}/` : pathPrefix;
 
-const addPathPrefixToSrcSet = (srcset = '', pathPrefix = '') =>
+const addPathPrefixToSrc = (src?: string, pathPrefix?: string) =>
+  !src || src?.startsWith('data:image') ? src : `${normalizePathPrefix(pathPrefix)}${src}`;
+
+const addPathPrefixToSrcSet = (srcset?: string, pathPrefix?: string) =>
   srcset
-    .split(',')
-    .map((src) => `${pathPrefix}${src.trim()}`)
+    ?.split(',')
+    .map((src) => addPathPrefixToSrc(src.trim(), pathPrefix))
     .join(', ');
 
 export function formatToMimeType(format: ImgSource['format']): string | undefined {

package/mobile/src/ui-kit/Img/ImgInner.tsx

@@ -1,35 +1,27 @@
 import { JSX } from '@redneckz/uni-jsx';
-import type { Picture } from '../../model/Picture';
 import { Icon } from '../Icon/Icon';
-import { getIconVersion } from './getIconVersion';
 import { ImgAsPicture } from './ImgAsPicture';
-import type { Image, ImageProps } from './ImgProps';
+import type { ImageProps } from './ImgProps';
 
-export const ImgInner = JSX<ImageProps<Image>>(
+export const ImgInner = JSX<ImageProps>(
   ({ className = '', image, imageClassName = '', isMobile, pathPrefix, ...iconProps }) => {
-    if (!image) {
+    if (!image?.src && !image?.icon) {
       return null;
     }
 
-    // backwards compatibility with existing icons in usage
-    const icon = typeof image === 'string' ? image : image.icon;
-    if (icon || icon === '') {
-      return icon.length ? (
-        <Icon
-          className={className}
-          imageClassName={imageClassName}
-          iconVersion={getIconVersion(image)}
-          name={icon}
-          {...iconProps}
-        />
-      ) : null;
-    }
-
-    return (
+    return image.icon ? (
+      <Icon
+        className={className}
+        imageClassName={imageClassName}
+        iconVersion={image?.iconVersion || 'normal'}
+        name={image.icon}
+        {...iconProps}
+      />
+    ) : (
       <ImgAsPicture
         className={className}
         imageClassName={imageClassName}
-        image={image as Picture}
+        image={image}
         isMobile={isMobile}
         pathPrefix={pathPrefix}
       />

package/mobile/src/ui-kit/Img/ImgProps.ts

@@ -1,12 +1,10 @@
 import type { Picture } from '../../model/Picture';
-import type { IconCompatibilityFields, IconName } from '../Icon/IconProps';
+import type { IconCompatibilityFields } from '../Icon/IconProps';
 
-export type Image = Picture | IconName;
-
-export interface ImageContent<T = Picture> {
-  image?: T;
+export interface ImageContent {
+  image?: Picture;
 }
-export interface ImageProps<T> extends ImageContent<T>, IconCompatibilityFields {
+export interface ImageProps extends ImageContent, IconCompatibilityFields {
   className?: string;
   imageClassName?: string;
   isMobile?: boolean;

package/mobile/src/ui-kit/InnerTable/InnerTableBody.tsx

@@ -25,12 +25,12 @@ export const InnerTableBody = JSX<InnerTableBodyProps>(({ activeTabIndex, items
         return (
           <div key={key} className="w-full">
             <div
-              className="flex p-4 bg-main-stroke text-xl-light text-center justify-center cursor-pointer relative"
+              className="flex p-4 bg-gray text-xl-light text-center justify-center cursor-pointer relative"
               onClick={() => toggleTables(key)}
             >
               {_.title}
               <Img
-                image={hiddenTables[key] ? 'PlusIcon' : 'MinusIcon'}
+                image={{ icon: hiddenTables[key] ? 'PlusIcon' : 'MinusIcon' }}
                 className="absolute right-[22px]"
                 width="24"
                 height="24"

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

@@ -38,7 +38,7 @@ export const Input = JSX<InputProps>(
 
     const paddingStyle = children ? 'pr-8' : '';
     const validStyle = valid
-      ? 'border-main-stroke hover:border-primary-hover active:border-primary-text focus:border-primary-text'
+      ? 'border-gray hover:border-primary-hover active:border-primary-text focus:border-primary-text'
       : 'border-error';
 
     return (

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

@@ -4,7 +4,7 @@ import { clamp } from '../../utils/clamp';
 import { getSanitizedValue } from '../../utils/getSanitizedValue';
 import type { InputRangeProps } from './InputRangeProps';
 
-const DISABLED_INPUT_CLASSES = 'disabled:border-main-stroke disabled:bg-main-divider';
+const DISABLED_INPUT_CLASSES = 'disabled:border-gray disabled:bg-main-divider';
 
 export const InputRange = JSX<InputRangeProps>(
   ({
@@ -35,8 +35,8 @@ export const InputRange = JSX<InputRangeProps>(
         <label className="block relative">
           {title ? <span className="text-m-light text-primary-text">{title}</span> : null}
           <input
-            className={`m-0 mt-2 font-sans text-h3 w-full h-14 border border-solid border-main-stroke rounded-md
-            outline-none p-0 pl-4 box-border text-primary-text hover:border-primary-hover focus:border-primary-focus ${DISABLED_INPUT_CLASSES}`}
+            className={`m-0 mt-2 font-sans text-h3 w-full h-14 border border-solid border-gray rounded-md
+            outline-none p-0 pl-4 box-border text-primary-text hover:border-primary-hover focus:border-primary-text ${DISABLED_INPUT_CLASSES}`}
             value={addSpacesBetweenNumbers(value)}
             disabled={disabled}
             onChange={handleChange}

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

@@ -103,7 +103,7 @@ const CloseButton = JSX<CloseButtonProps>(({ close }) => (
       close && close();
     }}
   >
-    <Img image="CloseIcon" width="24" height="24" />
+    <Img image={{ icon: 'CloseIcon' }} width="24" height="24" />
   </button>
 ));
 

package/mobile/src/ui-kit/Location/SearchBar.tsx

@@ -19,7 +19,7 @@ export const SearchBar = JSX<SearchBarInnerProps>(({ className, searchTerm, onSe
       <input
         id="search-bar-input"
         className={`h-12 pl-4 w-full peer text-l text-black border border-solid rounded-md box-border
-              outline-none border-main-stroke hover:border-primary-hover active:border-primary-text focus:border-primary-text`}
+              outline-none border-gray hover:border-primary-hover active:border-primary-text focus:border-primary-text`}
         value={searchTerm}
         onChange={(e) => onSearch(e.target.value as string)}
         type="text"

package/mobile/src/ui-kit/Logo/renderImage.tsx

@@ -1,4 +1,4 @@
-import { BgColorVersion } from '../../model/BgColorVersion';
+import type { BgColorVersion } from '../../model/BgColorVersion';
 import type { Picture } from '../../model/Picture';
 import { Img } from '../Img/Img';
 
@@ -23,6 +23,7 @@ export const renderImage = (
       className={SVG_COLOR[bgColor]}
       width={size?.width}
       height={size?.height}
+      pathPrefix="/wcms-resources/"
       asSVG
     />
   ) : (

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

@@ -5,7 +5,7 @@ export const Radio = JSX<RadioProps>(({ name, text, value, checked, onChange, cl
   <div className={className}>
     <label className="font-sans flex items-center relative cursor-pointer">
       <input
-        className="appearance-none flex justify-center items-center shrink-0 w-5 h-5 border border-gray hover:border-checkbox-hover
+        className="appearance-none flex justify-center items-center shrink-0 w-5 h-5 border border-gray hover:border-primary-hover
         checked:border-2 checked:!border-primary-main focus:checked:border-primary-main focus:border-primary-text active:border-primary-text
         after:block after:w-2.5 after:h-2.5 after:rounded-full checked:after:bg-primary-main outline-none rounded-full cursor-pointer"
         type="radio"

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

@@ -0,0 +1,8 @@
+import { JSX } from '@redneckz/uni-jsx';
+import type { RichTextProps } from './RichTextProps';
+
+export const RichText = JSX<RichTextProps>((props) => {
+  const { __html = '' } = props;
+
+  return <div className="md-container" dangerouslySetInnerHTML={{ __html }} />;
+});

package/mobile/src/ui-kit/RichText/RichTextProps.ts

@@ -0,0 +1,6 @@
+type HTML = string;
+
+export interface RichTextProps {
+  /** @title Текст */
+  __html?: HTML;
+}

package/mobile/src/ui-kit/SearchBar/SearchBarInner.tsx

@@ -20,7 +20,7 @@ export const SearchBarInner = JSX<SearchBarInnerProps>(({ className, isMobile =
     <form className={`font-sans relative ${className}`}>
       <div className="absolute rounded h-full flex items-center justify-center pl-4 max-w-[170px] gap-3.5 pointer-events-none">
         <div className={LoupeIconClassName}>
-          <Img image="LoupeIcon" width="24" height="24" />
+          <Img image={{ icon: 'LoupeIcon' }} width="24" height="24" />
         </div>
         {term ? null : (
           <label
@@ -34,7 +34,7 @@ export const SearchBarInner = JSX<SearchBarInnerProps>(({ className, isMobile =
       <input
         id="search-bar-input"
         className={`h-12 pl-12 w-full peer text-l text-black border border-solid rounded-md box-border
-              outline-none pr-[6%] border-main-stroke hover:border-primary-hover active:border-primary-text focus:border-primary-text ${SearchBarInputClassName}`}
+              outline-none pr-[6%] border-gray hover:border-primary-hover active:border-primary-text focus:border-primary-text ${SearchBarInputClassName}`}
         value={term}
         onChange={(e) => setTerm(e.target.value as string)}
         type="text"
@@ -49,7 +49,7 @@ export const SearchBarInner = JSX<SearchBarInnerProps>(({ className, isMobile =
             setTerm('');
           }}
         >
-          <Img image="CloseIcon" width="24" height="24" />
+          <Img image={{ icon: 'CloseIcon' }} width="24" height="24" />
         </button>
       ) : (
         <Button

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

@@ -102,4 +102,4 @@ const renderOption =
   };
 
 const getBorderStyle = (isBorder: boolean) =>
-  isBorder ? 'border border-main-stroke rounded-md hover:border-primary-hover' : '';
+  isBorder ? 'border border-gray rounded-md hover:border-primary-hover' : '';

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

@@ -17,7 +17,7 @@ export const Tags = JSX<TagsProps>((props) => {
 const renderTag = (tag: string, key: number) => (
   <span
     key={String(key)}
-    className="text-m-light py-2 px-2.5 border-solid border rounded-md border-color-stroke"
+    className="text-m-light py-2 px-2.5 border-solid border rounded-md border-gray"
   >
     {tag}
   </span>

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

@@ -3,14 +3,14 @@
 import { JSX } from '@redneckz/uni-jsx';
 import { useEffect, useRef, useState } from '@redneckz/uni-jsx/lib/hooks';
 import ymaps from 'yandex-maps';
+import { Icon } from '../Icon/Icon';
+import { MockPoints, mockPoints } from './mockPoints';
 import { renderClusterer } from './renderClusterer';
 import { renderOpenMap } from './renderOpenMap';
 import { renderSearchField } from './renderSearchField';
 import { renderUserGeolocation } from './renderUserGeolocation';
 import { useYandexMaps } from './useYandexMaps';
-import { Icon } from '../Icon/Icon';
 import { ZoomButton } from './ZoomButton';
-import { MockPoints, mockPoints } from './mockPoints';
 
 interface YandexMapProps {
   points: number[][];
@@ -23,7 +23,7 @@ const FULLSCREEN_STYLES = {
   border: 'border border-transparent rounded-md ',
   position: 'absolute flex items-center justify-center',
   size: 'w-12 h-12',
-  focus: 'focus:border-primary-focus focus:border',
+  focus: 'focus:border-primary-text focus:border',
   font: 'text-center font-sans',
   active: 'active:bg-primary-active',
   hover: 'hover:bg-primary-hover',

package/mobile/src/ui-kit/YandexMap/ZoomButton.tsx

@@ -10,7 +10,7 @@ interface ZoomButtonProps {
 }
 
 const styles = {
-  focus: 'focus:border-primary-focus focus:border',
+  focus: 'focus:border-primary-text focus:border',
   hover: 'hover:bg-primary-hover',
   active: 'active:bg-primary-active',
   border: 'border-b border-b-2 border-gray last:border-0',

package/mobile/src/ui-kit/YandexMap/renderOpenMap.tsx

@@ -1,5 +1,5 @@
 const styles = {
-  focus: 'focus:border-primary-focus focus:border',
+  focus: 'focus:border-primary-text focus:border',
   hover: 'hover:bg-primary-hover',
   active: 'active:bg-primary-active',
   border: 'border border-transparent rounded-md',
@@ -14,7 +14,7 @@ export const renderOpenMap = (pointsCenter: number[]) => {
 
   return (
     <a
-      className={`select-none cursor-pointer px-9 h-12 bg-white bg-primary-main text-white ${Object.values(
+      className={`select-none cursor-pointer px-9 h-12 bg-primary-main text-white ${Object.values(
         styles,
       ).join(' ')}`}
       href={getYandexMapUrl()}

package/mobile/src/ui-kit/YandexMap/renderUserGeolocation.tsx

@@ -1,9 +1,9 @@
 /* eslint-disable @typescript-eslint/no-unsafe-argument */
-import { Icon } from '../Icon/Icon';
 import ymaps from 'yandex-maps';
+import { Icon } from '../Icon/Icon';
 
 const styles = {
-  focus: 'focus:border-primary-focus focus:border',
+  focus: 'focus:border-primary-text focus:border',
   hover: 'hover:bg-primary-hover',
   active: 'active:bg-primary-active',
   border: 'border border-transparent rounded-md',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@redneckz/wildless-cms-uni-blocks",
-  "version": "0.6.46",
+  "version": "0.6.48",
   "private": false,
   "license": "MIT",
   "author": "ЦК",
@@ -121,6 +121,9 @@
   "dependencies": {
     "@redneckz/uni-jsx": "^2.1.7",
     "glob": "^8.0.3",
+    "rehype-parse": "^8.0.4",
+    "rehype-sanitize": "^5.0.1",
+    "rehype-stringify": "^9.0.3",
     "remark-html": "^15.0.1",
     "remark-parse": "^10.0.1",
     "sharp": "^0.30.6",

package/src/common.css

@@ -11,6 +11,7 @@ html {
   --color-green-dark: 66, 171, 68;
   --color-green-more-dark: 39, 148, 41;
   --color-yellow: 221, 182, 61;
+  --color-gray: 201, 202, 204;
 }
 
 /* Private clients | Green */
@@ -121,21 +122,21 @@ html {
   }
 
   input[type='range'].slider:disabled {
-    background-image: linear-gradient(rgb(201, 202, 204), rgb(201, 202, 204));
+    background-image: linear-gradient(rgb(var(--color-gray)), rgb(var(--color-gray)));
     pointer-events: none;
     cursor: default;
   }
 
   input[type='range'].slider:disabled::-webkit-slider-thumb {
-    background: rgb(201, 202, 204);
+    background: rgb(var(--color-gray));
   }
 
   input[type='range'].slider:disabled::-moz-range-thumb {
-    background: rgb(201, 202, 204);
+    background: rgb(var(--color-gray));
   }
 
   input[type='range'].slider:disabled::-ms-thumb {
-    background: rgb(201, 202, 204);
+    background: rgb(var(--color-gray));
   }
 
   /* Hide arrows */
@@ -152,30 +153,47 @@ html {
 }
 
 @layer components {
-  .md-container .h1 {
+  [data-theme='eo'] .md-container ul {
+    @apply list-none;
+  }
+
+  [data-theme='eo'] .md-container ul > li::before {
+    @apply text-primary-main mr-3 font-bold;
+    content: '🗸';
+  }
+
+  .md-container {
+    @apply text-l font-sans;
+  }
+
+  .md-container p.h1 {
     @apply text-h1;
   }
 
-  .md-container .h2 {
+  .md-container p.h2 {
     @apply text-h2;
   }
 
-  .md-container .h3 {
+  .md-container p.h3 {
     @apply text-h3;
   }
 
-  .md-container .h4 {
+  .md-container p.h4 {
     @apply text-h4;
   }
 
-  .md-container .h5 {
+  .md-container p.h5 {
     @apply text-h5;
   }
 
-  .md-container .h6 {
+  .md-container p.h6 {
     @apply text-h6;
   }
 
+  .md-container p {
+    @apply text-l font-light;
+  }
+
   .md-container ul {
     @apply list-inside list-disc;
   }
@@ -184,10 +202,6 @@ html {
     @apply list-inside list-decimal;
   }
 
-  .md-container p {
-    @apply text-l font-light;
-  }
-
   .md-container li {
     @apply text-l font-light;
   }
@@ -199,6 +213,10 @@ html {
   .md-container a {
     @apply text-primary-main;
   }
+
+  .md-container strong {
+    @apply font-bold;
+  }
 }
 
 /*

package/src/components/AccordionItem/AccordionItem.tsx

@@ -47,6 +47,12 @@ const FoldButton = JSX<FoldButtonProps>(({ label, icon, onClick }) => (
     <Text size="text-xl" font="font-medium">
       {label}
     </Text>
-    <Img image={icon} className="text-primary-main flex-shrink-0" width="24" height="24" asSVG />
+    <Img
+      image={{ icon }}
+      className="text-primary-main flex-shrink-0"
+      width="24"
+      height="24"
+      asSVG
+    />
   </button>
 ));

package/src/components/Blocks.ts

@@ -46,6 +46,7 @@ import { ProductGallery } from './ProductGallery/ProductGallery';
 import { ProductTile } from './ProductTile/ProductTile';
 import { PromoTile } from './PromoTile/PromoTile';
 import { Recommendation } from './Recommendation/Recommendation';
+import { RichTextBlock } from './RichTextBlock/RichTextBlock';
 import { RollupItem } from './RollupItem/RollupItem';
 import { SafeDepositRental } from './SafeDepositRental/SafeDepositRental';
 import { StepsBlock } from './StepsBlock/StepsBlock';
@@ -60,12 +61,12 @@ export const Blocks: BlocksRegistry = {
   Accordion,
   AccordionItem,
   BenefitsBlock,
-  BusinessBlock,
-  ButtonBlock,
   Bonus,
   BonusBenefitsBlock,
-  CardTransfer,
+  BusinessBlock,
+  ButtonBlock,
   Calculator,
+  CardTransfer,
   Carousel,
   CarouselCard,
   CarouselCatalogCard,
@@ -76,8 +77,8 @@ export const Blocks: BlocksRegistry = {
   CarouselRecommendationCard,
   CarouselTariffsCard,
   Catalog,
-  ContactsBlock,
   ComparisonTable,
+  ContactsBlock,
   ErrorBlock,
   ExchangeRateTile,
   Footer,
@@ -93,6 +94,9 @@ export const Blocks: BlocksRegistry = {
   MiniGallery,
   MobileAppTile,
   OfficeMap,
+  OfficeServicesBlock,
+  OtherProducts,
+  OtherProductsItem,
   ParagraphBlock,
   PictureText,
   Placeholder,
@@ -100,9 +104,8 @@ export const Blocks: BlocksRegistry = {
   ProductGallery,
   ProductTile,
   PromoTile,
-  OfficeServicesBlock,
-  OtherProducts,
-  OtherProductsItem,
+  Recommendation,
+  RichTextBlock,
   RollupItem,
   SafeDepositRental,
   StepsBlock,
@@ -112,5 +115,4 @@ export const Blocks: BlocksRegistry = {
   Tile,
   VerticalLayout,
   Video,
-  Recommendation,
 };

package/src/components/BusinessBlock/BusinessBlock.example.json

@@ -26,9 +26,8 @@
       ],
       "button": {
         "href": "#",
-        "text": "Подробнее",
-        "target": "_blank",
-        "version": "secondary"
+        "text": "Кнопка",
+        "version": "primary"
       }
     },
     {
@@ -56,9 +55,8 @@
       ],
       "button": {
         "href": "#",
-        "text": "Подробнее",
-        "target": "_blank",
-        "version": "secondary"
+        "text": "Кнопка",
+        "version": "primary"
       }
     }
   ]

package/src/components/BusinessBlock/BusinessBlockContent.ts

@@ -1,6 +1,7 @@
 import type { IconProps, Picture } from '../../model/Picture';
 import type { ButtonWithIconProps } from '../../ui-kit/Button/ButtonProps';
 
+/** @default {"icon": {"format": "webp", "size": { "width": 24, "height": 24 }}} */
 export type BusinessCardItemProps = IconProps & {
   /** @title Текст */
   text?: string;
@@ -12,7 +13,11 @@ export interface BusinessCardProps {
   image?: Picture;
   /** @title Список */
   cardItems?: BusinessCardItemProps[];
-  /** @title Кнопка */
+  /**
+   * @title Кнопка
+   * @default {"icon": {"format": "webp", "size": { "width": 24, "height": 24 }},
+   * "iconRight": {"format": "webp", "size": { "width": 24, "height": 24 }}, "text": "Кнопка"}
+   */
   button?: ButtonWithIconProps;
 }
 

package/src/components/BusinessBlock/BusinessCard.tsx

@@ -8,7 +8,7 @@ export const BusinessCard = JSX<BusinessCardProps>((props) => {
   const { title, image, cardItems, button } = props;
 
   return (
-    <div className="border-color-stroke border p-9 w-1/2">
+    <div className="border-gray border p-9 w-1/2">
       {image ? (
         <div className="flex justify-center">
           {image?.src ? <Img className="mb-5" image={image} /> : null}
@@ -28,13 +28,9 @@ const renderItem = (item: BusinessCardItemProps, key: string) => {
   return (
     <li key={key} className="flex items-center gap-3.5 mb-3 last:mb-0">
       {icon?.icon ? (
-        <Img
-          className={`w-12 h-12 min-w-12 p-3 rounded-full bg-main-divider`}
-          image={icon.icon}
-          asSVG
-        />
+        <Img image={icon} className="w-12 h-12 min-w-12 p-3 rounded-full bg-main-divider" asSVG />
       ) : null}
-      {icon?.src ? <Img image={icon.icon} /> : null}
+      {icon?.src ? <Img image={icon} /> : null}
       <span className="text-xl-light">{text}</span>
     </li>
   );

package/src/components/Calculator/Calculator.tsx

@@ -84,7 +84,7 @@ function renderNavButton({ tab, i, isActive, onClick }: NavButtonProps) {
       key={String(i)}
       onClick={onClick}
       aria-label={tab?.title}
-      className={`box-border relative border border-main-stroke cursor-pointer text-left border-b-0 flex hover:h-[88px]
+      className={`box-border relative border border-gray cursor-pointer text-left border-b-0 flex hover:h-[88px]
       ${btnClassName}`}
     >
       <Img