@redneckz/wildless-cms-uni-blocks 0.5.11 → 0.5.13

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

@@ -6,42 +6,53 @@ const TEXT_STYLE_MAP: Record<ListItemVersion, string> = {
   primary: 'text-primary-text',
   secondary: 'text-white',
   gray: 'text-secondary-text',
-  tile: 'text-primary-text',
-  'tile-white': 'text-white',
 };
 
 const TEXT_SIZE_MAP: Record<ListItemSize, string> = {
-  M: 'text-xl-light',
-  L: 'text-h5-light',
+  S: 'text-l-light',
+  M: 'text-h6',
+  L: 'text-h5',
+};
+
+const ITEM_INDENT_MAP = {
+  S: 'ml-2',
+  M: 'ml-3',
+  L: 'ml-4',
 };
 
 export const List = JSX<ListProps>((props) => {
   const {
     className = '',
-    itemClassName,
+    hasIndent,
     isDotted,
+    itemClassName = '',
     items,
     listItemSize = 'M',
     version = 'primary',
   } = props;
 
+  if (!items?.length) {
+    return null;
+  }
+
   return (
     <section
-      className={`${TEXT_STYLE_MAP[version]} ${TEXT_SIZE_MAP[listItemSize]} ${className}`}
+      className={`${TEXT_STYLE_MAP[version]} ${TEXT_SIZE_MAP[listItemSize]} ${className} ${
+        hasIndent ? ITEM_INDENT_MAP[listItemSize] : ''
+      }`}
       role="list"
     >
-      {items?.length
-        ? items.map((_, i) => (
-            <ListItem
-              key={String(i)}
-              className={itemClassName}
-              isDotted={isDotted}
-              version={version}
-            >
-              {_}
-            </ListItem>
-          ))
-        : null}
+      {items.map((item, i) => (
+        <ListItem
+          key={String(i)}
+          className={`${itemClassName} mb-1.5`}
+          isDotted={isDotted}
+          version={version}
+          size={listItemSize}
+        >
+          {item}
+        </ListItem>
+      ))}
     </section>
   );
 });

package/mobile/src/ui-kit/List/ListItem.tsx

@@ -1,6 +1,5 @@
 import { JSX } from '@redneckz/uni-jsx';
-import type { ListItemVersion } from './ListProps';
-
+import type { ListItemSize, ListItemVersion } from './ListProps';
 /**
  * @title Параметры элемента списка
  */
@@ -9,43 +8,32 @@ export interface ListItemProps {
   version?: ListItemVersion;
   text?: string;
   isDotted?: boolean;
+  size?: ListItemSize;
 }
 
-const LIST_STYLE_CLASSES = {
-  primary: 'rounded-full inline-block mr-3 mt-2',
-  secondary: 'rounded-full inline-block mr-3 mt-2',
-  gray: 'rounded-full inline-block mr-3 mt-2',
-  tile: 'rounded-full inline-block mr-4 mt-3',
-  'tile-white': 'rounded-full inline-block mr-4 mt-3',
-};
-
 const LIST_DOT_STYLE_MAP: Record<ListItemVersion, string> = {
   primary: 'bg-primary-text',
   secondary: 'bg-white',
   gray: 'bg-secondary-text',
-  tile: 'bg-black',
-  'tile-white': 'bg-white',
+};
+
+const DOT_SIZE_MAP = {
+  L: 'w-1.5 h-1.5 min-w-1.5 min-h-1.5 mr-4 mt-3',
+  M: 'w-1.5 h-1.5 min-w-1.5 min-h-1.5 mr-3 mt-3',
+  S: 'w-1 h-1 min-w-1 min-h-1 mr-2 mt-2.5',
 };
 
 export const ListItem = JSX<ListItemProps>(
-  ({ className = '', isDotted = true, children, version = 'primary' }) => {
+  ({ className = '', isDotted = true, children, version = 'primary', size = 'M' }) => {
     return (
       <div className={`font-sans flex items-start ${className}`} role="listitem">
-        {isDotted ? <div className={getListStyle(version)} /> : null}
+        {isDotted ? (
+          <div
+            className={`rounded-full inline-block ${LIST_DOT_STYLE_MAP[version]} ${DOT_SIZE_MAP[size]}`}
+          />
+        ) : null}
         <span>{children}</span>
       </div>
     );
   },
 );
-
-export const getListStyle = (version: ListItemVersion) => {
-  const size = {
-    primary: 'w-2 h-2 min-w-2 min-h-2',
-    secondary: 'w-2 h-2 min-w-2 min-h-2',
-    gray: 'w-1.5 h-1.5 min-w-1.5 min-h-1.5',
-    tile: 'w-[7px] h-[7px] min-w-[7px] min-h-[7px]',
-    'tile-white': 'w-[7px] h-[7px] min-w-[7px] min-h-[7px]',
-  };
-
-  return `${LIST_STYLE_CLASSES[version]} ${LIST_DOT_STYLE_MAP[version]} ${size[version]}`;
-};

package/mobile/src/ui-kit/List/ListProps.ts

@@ -2,15 +2,15 @@ import type { ListContent } from './ListContent';
 
 /**
  * @title Размер пунктов списка
- * @enumNames ["Средний", "Большой"]
+ * @enumNames ["Маленький", "Средний", "Большой"]
  */
-export type ListItemSize = 'M' | 'L';
+export type ListItemSize = 'S' | 'M' | 'L';
 
 /**
  * @title Версия списка
  * @enumNames ["Основной", "Второстепенный", "Серый"]
  */
-export type ListItemVersion = 'primary' | 'secondary' | 'gray' | 'tile' | 'tile-white';
+export type ListItemVersion = 'primary' | 'secondary' | 'gray';
 
 /**
  * @title Содержимое списка
@@ -18,6 +18,8 @@ export type ListItemVersion = 'primary' | 'secondary' | 'gray' | 'tile' | 'tile-
 export interface ListProps extends ListContent {
   /** @hidden */
   className?: string;
+  /** @title Отступ */
+  hasIndent?: boolean;
   /** @hidden */
   itemClassName?: string;
   /** @title Буллиты */

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

@@ -5,8 +5,9 @@ export const Radio = JSX<RadioProps>(({ name, text, value, checked, onChange, cl
   <div className={className}>
     <label className="flex items-center relative cursor-pointer">
       <input
-        className="appearance-none flex justify-center items-center shrink-0 w-5 h-5 border-2 border-primary-main
-        rounded-full cursor-pointer after:block after:w-2.5 after:h-2.5 after:rounded-full checked:after:bg-primary-main"
+        className="appearance-none flex justify-center items-center shrink-0 w-5 h-5 border border-gray hover:border-checkbox-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"
         value={value}
         name={name}

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

@@ -1,6 +1,7 @@
 import { JSX } from '@redneckz/uni-jsx';
 import { Icon } from '../Icon/Icon';
-import { useState, useEffect } from '@redneckz/uni-jsx/lib/hooks';
+import { useState, useEffect, useRef } from '@redneckz/uni-jsx/lib/hooks';
+import { useOutsideClick } from '../../hooks/useOutsideClick';
 
 export interface OptionProps {
   key: string;
@@ -22,6 +23,10 @@ export const Select = JSX<SelectProps>(
     const [selectedItem, setSelectedItem] = useState(options[0] || { key: '', text: '' });
     const [isOpen, setIsOpen] = useState(false);
 
+    const wrapperRef = useRef<HTMLInputElement | null>(null);
+
+    useOutsideClick(wrapperRef, setIsOpen);
+
     const choiceOption = (option: OptionProps) => {
       setSelectedItem(option);
       setIsOpen(false);
@@ -35,11 +40,11 @@ export const Select = JSX<SelectProps>(
     }, [value]);
 
     return (
-      <div className={`${className}`}>
+      <div className={`${className}`} ref={wrapperRef}>
         {label ? <span className="mb-2 flex">{label}</span> : null}
         <div className={`relative ${isOpen ? 'z-20' : 'z-10'}`}>
           <div
-            className={`text-m-light flex justify-between items-center mb-0.5 text-primary-text cursor-pointer
+            className={`text-l flex justify-between items-center mb-0.5 text-primary-text cursor-pointer
             ${getBorderStyle(isBorder)}`}
             onClick={() => setIsOpen(!isOpen)}
           >

package/mobile/src/utils/getSanitizedValue.ts

@@ -0,0 +1 @@
+export const getSanitizedValue = (_: string): string => _.split(/\s+/).join('');

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@redneckz/wildless-cms-uni-blocks",
-  "version": "0.5.11",
+  "version": "0.5.13",
   "private": false,
   "license": "MIT",
   "author": "ЦК",
@@ -119,7 +119,7 @@
     "react-dom": ">=16.8.0"
   },
   "dependencies": {
-    "@redneckz/uni-jsx": "^2.1.6",
+    "@redneckz/uni-jsx": "^2.1.7",
     "glob": "^8.0.3",
     "remark-html": "^15.0.1",
     "remark-parse": "^10.0.1",
@@ -182,7 +182,7 @@
       "path": "lib/common.css"
     },
     {
-      "limit": "40 kB",
+      "limit": "37 kB",
       "path": "bundle/bundle.umd.min.js"
     }
   ],

package/src/common.css

@@ -5,9 +5,17 @@ html {
   scroll-behavior: smooth;
 }
 
+* {
+  --color-green: 78, 190, 81;
+  --color-green-light: 131, 184, 62;
+  --color-green-dark: 66, 171, 68;
+  --color-green-more-dark: 39, 148, 41;
+  --color-yellow: 221, 182, 61;
+}
+
 /* Private clients | Green */
 [data-theme='pc'] {
-  --color-primary-main: 66, 171, 68;
+  --color-primary-main: var(--color-green-dark);
   --color-primary-hover: 36, 131, 65;
   --color-primary-active: 36, 95, 52;
   --color-secondary-hover: 36, 131, 65;
@@ -17,7 +25,7 @@ html {
 }
 /* Business clients | Light-Green */
 [data-theme='bc'] {
-  --color-primary-main: 131, 184, 62;
+  --color-primary-main: var(--color-green-light);
   --color-primary-hover: 92, 146, 29;
   --color-primary-active: 60, 94, 16;
   --color-secondary-hover: 92, 146, 29;
@@ -27,7 +35,7 @@ html {
 }
 /* Ecosystem own | Yellow */
 [data-theme='eo'] {
-  --color-primary-main: 221, 182, 61;
+  --color-primary-main: var(--color-yellow);
   --color-primary-hover: 187, 151, 39;
   --color-primary-active: 126, 99, 12;
   --color-secondary-hover: 187, 151, 39;

package/src/components/Accordion/Accordion.mobile.tsx

@@ -1,30 +1,40 @@
 import { JSX } from '@redneckz/uni-jsx';
 import type { UniBlockProps } from '../../model/ContentPageDef';
+import { renderBlocksList } from '../../ui-kit/BlocksList/renderBlocksList';
+import { BlockWrapper } from '../../ui-kit/BlockWrapper';
 import { Heading } from '../../ui-kit/Heading/Heading';
 import type { AccordionContent } from './AccordionContent';
 import { AccordionItem } from './AccordionItem';
+import { AccordionItemsList } from './AccordionItemsList';
 
 export interface AccordionProps extends AccordionContent, UniBlockProps {}
 
 export const Accordion = JSX<AccordionProps>(
-  ({ title, description, accordionItems, context, className = '', bordered }) => {
+  ({ title, description, accordionItems, context, className = '', bordered, ...rest }) => {
     return (
-      <section className={`py-6 px-4 font-sans bg-white text-primary-text ${className}`}>
+      <BlockWrapper
+        context={context}
+        className={`py-6 px-4 font-sans bg-white text-primary-text ${className}`}
+        {...rest}
+      >
         {title ? <Heading headingType="h3" className="mb-2 text-center" title={title} /> : null}
         {description ? <div className="mb-5 text-m-light text-center">{description}</div> : null}
         {accordionItems?.length ? (
-          <ul className="list-none m-0 p-0">
+          <AccordionItemsList>
             {accordionItems.map((item, i) => (
               <AccordionItem
                 key={`AccordionItem_${i}`}
-                {...item}
                 context={context}
                 bordered={bordered}
-              />
+                hasContent={Boolean(item.blocks?.length)}
+                {...item}
+              >
+                {renderBlocksList({ blocks: item.blocks, context, className: '!p-0 mb-5' })}
+              </AccordionItem>
             ))}
-          </ul>
+          </AccordionItemsList>
         ) : null}
-      </section>
+      </BlockWrapper>
     );
   },
 );

package/src/components/Accordion/Accordion.tsx

@@ -1,10 +1,12 @@
 import { JSX } from '@redneckz/uni-jsx';
 import { AlignType } from '../../model/AlignType';
 import type { UniBlockProps } from '../../model/ContentPageDef';
+import { renderBlocksList } from '../../ui-kit/BlocksList/renderBlocksList';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
 import { Heading } from '../../ui-kit/Heading/Heading';
 import type { AccordionContent } from './AccordionContent';
 import { AccordionItem } from './AccordionItem';
+import { AccordionItemsList } from './AccordionItemsList';
 
 const ALIGN_TITLE: Record<AlignType, string> = {
   left: 'text-left',
@@ -40,11 +42,18 @@ export const Accordion = JSX<AccordionProps>(
         ) : null}
         {description ? <div className="mb-2.5 text-l">{description}</div> : null}
         {accordionItems?.length ? (
-          <ul className="list-none m-0 p-0">
+          <AccordionItemsList>
             {accordionItems.map((item, i) => (
-              <AccordionItem key={`AccordionItem${i}`} {...item} context={context} />
+              <AccordionItem
+                key={`AccordionItem${i}`}
+                context={context}
+                hasContent={Boolean(item.blocks?.length)}
+                {...item}
+              >
+                {renderBlocksList({ blocks: item.blocks, context, className: '!p-0 mb-5' })}
+              </AccordionItem>
             ))}
-          </ul>
+          </AccordionItemsList>
         ) : null}
       </BlockWrapper>
     );

package/src/components/Accordion/AccordionContent.ts

@@ -1,12 +1,9 @@
 import type { AlignType } from '../../model/AlignType';
 import type { BlockVersion } from '../../model/BlockVersion';
+import type { HeadlineCommonProps } from '../../model/HeadlineType';
 import type { Picture } from '../../model/Picture';
 import type { BlockDef } from '../../ui-kit/BlocksList/BlocksListProps';
-import type { HeadlineCommonProps } from '../../model/HeadlineType';
 
-/**
- * @title Элемент списка
- */
 export interface AccordionItemCommonProps {
   /**
    * @title Название
@@ -15,8 +12,6 @@ export interface AccordionItemCommonProps {
   label?: string;
   /** @title Отображать в раскрытом виде */
   isExpanded?: boolean;
-  /** @title Блоки */
-  blocks?: BlockDef[];
   /**
    * @title Отображать/скрывать обводку элемента
    * @default false
@@ -25,6 +20,14 @@ export interface AccordionItemCommonProps {
   labelIcon?: Picture; // TODO: только для мобильной версии
 }
 
+/**
+ * @title Элемент списка
+ */
+export interface AccordionItem extends AccordionItemCommonProps {
+  /** @title Блоки */
+  blocks?: BlockDef[];
+}
+
 /**
  * @title Аккордеон
  */
@@ -36,7 +39,7 @@ export type AccordionContent = HeadlineCommonProps & {
   accordionAlignTitle?: AlignType;
   version?: BlockVersion;
   /** @title Список */
-  accordionItems?: AccordionItemCommonProps[];
+  accordionItems?: AccordionItem[];
   /**
    * @title Отображать/скрывать обводку у элемента списка
    * @default false

package/src/components/Accordion/AccordionItem.mobile.tsx

@@ -1,42 +1,70 @@
 import { JSX } from '@redneckz/uni-jsx';
-import type { UniBlockProps } from '../../model/ContentPageDef';
+import type { Picture } from '../../model/Picture';
+import { Foldable } from '../../ui-kit/Foldable/Foldable';
+import { FoldableSection } from '../../ui-kit/Foldable/FoldableSection';
+import type { IconName } from '../../ui-kit/Icon/IconProps';
 import { Img } from '../../ui-kit/Img/Img';
-import type { AccordionItemCommonProps } from './AccordionContent';
-import { AccordionItemInner } from './AccordionItemInner';
-import { useActiveHandler } from './useActiveHandler';
+import type { AccordionItemProps } from './AccordionItemProps';
 
-export interface AccordionItemProps extends AccordionItemCommonProps, UniBlockProps {}
+const icons: IconName[] = ['PlusIcon', 'MinusIcon'];
 
 export const AccordionItem = JSX<AccordionItemProps>(
-  ({ label, labelIcon, blocks, bordered, context }) => {
-    const { hasContent, icon, handleToggle } = useActiveHandler({ blocks });
+  ({ label = '', labelIcon, bordered, children, hasContent = true }) => (
+    <li className={`${borderedLiClass(bordered)} border-solid border-main-divider`}>
+      <Foldable
+        isFoldButtonOnTop={true}
+        renderFoldableSection={({ isUnfolded }) => (
+          <FoldableSection className="flex flex-wrap group-last:last:pb-0" isUnfolded={isUnfolded}>
+            {children}
+          </FoldableSection>
+        )}
+        renderFoldButton={({ isUnfolded, onToggle }) => (
+          <FoldButton
+            className={bordered ? '' : 'py-[14px] px-0'}
+            label={label}
+            icon={icons[Number(isUnfolded)]}
+            primaryIcon={labelIcon}
+            hasContent={hasContent}
+            onClick={onToggle}
+          />
+        )}
+      />
+    </li>
+  ),
+);
+
+interface FoldButtonProps {
+  className?: string;
+  label: string;
+  icon: IconName;
+  primaryIcon?: Picture;
+  hasContent: boolean;
+  onClick?: () => void;
+}
 
-    return (
-      <li className={`${borderedLiClass(bordered)} border-solid border-main-divider`}>
-        <button
-          className={`border-none bg-transparent flex justify-between text-left w-full font-sans text-primary-text
-          ${bordered ? '' : 'py-[14px] px-0'}
-          ${hasContent ? 'group cursor-pointer' : ''}`}
-          onClick={handleToggle}
-        >
-          <span
-            className={`text-m-title-xs font-medium pr-2.5 flex ${
-              hasContent ? 'group-hover:text-primary-main' : ''
-            }`}
-          >
-            {labelIcon ? (
-              <Img image={labelIcon} className="mr-3 flex-shrink-0" width="24" height="24" asSVG />
-            ) : null}
-            {label}
-          </span>
-          {hasContent ? (
-            <Img className="flex-shrink-0" image={icon} width="24" height="24" asSVG />
-          ) : null}
-        </button>
-        {hasContent ? <AccordionItemInner blocks={blocks} context={context} /> : null}
-      </li>
-    );
-  },
+const FoldButton = JSX<FoldButtonProps>(
+  ({ className, hasContent, icon, label, primaryIcon, onClick }) => (
+    <button
+      className={`border-none bg-transparent flex justify-between text-left w-full font-sans text-primary-text
+  ${className}
+  ${hasContent ? 'group cursor-pointer' : ''}`}
+      onClick={onClick}
+    >
+      <span
+        className={`text-m-title-xs font-medium pr-2.5 flex ${
+          hasContent ? 'group-hover:text-primary-main' : ''
+        }`}
+      >
+        {primaryIcon ? (
+          <Img image={primaryIcon} className="mr-3 flex-shrink-0" width="24" height="24" asSVG />
+        ) : null}
+        {label}
+      </span>
+      {hasContent ? (
+        <Img className="flex-shrink-0" image={icon} width="24" height="24" asSVG />
+      ) : null}
+    </button>
+  ),
 );
 
 function borderedLiClass(bordered?: boolean) {

package/src/components/Accordion/AccordionItem.tsx

@@ -1,40 +1,52 @@
 import { JSX } from '@redneckz/uni-jsx';
-import type { UniBlockProps } from '../../model/ContentPageDef';
+import { Foldable } from '../../ui-kit/Foldable/Foldable';
+import { FoldableSection } from '../../ui-kit/Foldable/FoldableSection';
+import type { IconName } from '../../ui-kit/Icon/IconProps';
 import { Img } from '../../ui-kit/Img/Img';
-import type { AccordionItemCommonProps } from './AccordionContent';
-import { AccordionItemInner } from './AccordionItemInner';
-import { useActiveHandler } from './useActiveHandler';
+import type { AccordionItemProps } from './AccordionItemProps';
 
-export interface AccordionItemProps extends AccordionItemCommonProps, UniBlockProps {}
+const icons: IconName[] = ['PlusIcon', 'MinusIcon'];
 
-export const AccordionItem = JSX<AccordionItemProps>(({ label, isExpanded, blocks, context }) => {
-  const { isActive, hasContent, icon, handleToggle } = useActiveHandler({
-    blocks,
-    initialState: isExpanded,
-  });
-
-  return (
+export const AccordionItem = JSX<AccordionItemProps>(
+  ({ label = '', children, hasContent = true }) => (
     <li className="border-0 border-b border-solid border-main-divider last:border-b-0">
-      <button
-        className={`border-none bg-transparent px-0 pt-5 pb-3.5 flex justify-between text-left w-full
-            font-sans text-h6 ${hasContent ? 'group cursor-pointer' : ''}
-          `}
-        onClick={handleToggle}
-      >
-        <span className={`text-xl font-medium pr-2.5`}>{label}</span>
-        {hasContent ? (
-          <Img
-            image={icon}
-            className="text-primary-main flex-shrink-0"
-            width="24"
-            height="24"
-            asSVG
+      <Foldable
+        isFoldButtonOnTop={true}
+        renderFoldableSection={({ isUnfolded }) => (
+          <FoldableSection className="grid grid-cols-12" isUnfolded={isUnfolded}>
+            {children}
+          </FoldableSection>
+        )}
+        renderFoldButton={({ isUnfolded, onToggle }) => (
+          <FoldButton
+            label={label}
+            icon={icons[Number(isUnfolded)]}
+            hasContent={hasContent}
+            onClick={onToggle}
           />
-        ) : null}
-      </button>
-      {hasContent ? (
-        <AccordionItemInner isExpanded={isActive} blocks={blocks} context={context} />
-      ) : null}
+        )}
+      />
     </li>
-  );
-});
+  ),
+);
+
+interface FoldButtonProps {
+  label: string;
+  icon: IconName;
+  hasContent: boolean;
+  onClick?: () => void;
+}
+
+const FoldButton = JSX<FoldButtonProps>(({ label, icon, hasContent, onClick }) => (
+  <button
+    className={`border-none bg-transparent px-0 pt-5 pb-3.5 flex justify-between text-left w-full font-sans text-h6 group cursor-pointer ${
+      hasContent ? 'group cursor-pointer' : ''
+    }`}
+    onClick={onClick}
+  >
+    <span className={`text-xl font-medium pr-2.5`}>{label}</span>
+    {hasContent ? (
+      <Img image={icon} className="text-primary-main flex-shrink-0" width="24" height="24" asSVG />
+    ) : null}
+  </button>
+));

package/src/components/Accordion/AccordionItemProps.ts

@@ -0,0 +1,6 @@
+import type { UniBlockProps } from '../../model/ContentPageDef';
+import type { AccordionItemCommonProps } from './AccordionContent';
+
+export interface AccordionItemProps extends AccordionItemCommonProps, UniBlockProps {
+  hasContent?: boolean;
+}

package/src/components/Accordion/AccordionItemsList.tsx

@@ -0,0 +1,5 @@
+import { JSX } from '@redneckz/uni-jsx';
+
+export const AccordionItemsList = JSX(({ children }) => (
+  <ul className="list-none m-0 p-0">{children}</ul>
+));

package/src/components/BenefitsBlock/BenefitsBlock.fixture.tsx

@@ -165,7 +165,7 @@ export default {
         benefitList={[
           {
             label: 'Без комиссии',
-            icon: { icon: 'ClockIcon' },
+            icon: { icon: 'ClockIcon', iconVersion: 'normal' },
             description: {
               bullets: true,
               items: itemsList,
@@ -179,7 +179,7 @@ export default {
               items: itemsList,
               benefitType: 'list',
             },
-            icon: { icon: 'SignDocsIcon' },
+            icon: { icon: 'SignDocsIcon', iconVersion: 'normal' },
           },
           {
             label: 'Без залога и поручительства',
@@ -233,7 +233,7 @@ export default {
               name: 'Единовременное перечисление ',
               benefitType: 'text',
             },
-            icon: { icon: 'CalendarTickIcon' },
+            icon: { icon: 'CalendarTickIcon', iconVersion: 'normal' },
           },
           {
             label: 'Деньги за 3 дня',
@@ -241,7 +241,7 @@ export default {
               name: 'Рассмотрение  ',
               benefitType: 'text',
             },
-            icon: { icon: 'GlobalIcon' },
+            icon: { icon: 'GlobalIcon', iconVersion: 'black' },
           },
         ]}
         benefitsBlockVersion="secondary"

package/src/components/BenefitsBlock/BenefitsBlock.tsx

@@ -63,7 +63,7 @@ const renderBenefits = (
 };
 
 const setIconVersion = (benefitIcon: Picture, benefitsBlockVersion: BlockVersion) => {
-  if (!benefitIcon.icon) {
+  if (!benefitIcon.icon || benefitIcon?.iconVersion) {
     return benefitIcon;
   }
   benefitIcon.iconVersion = benefitsBlockVersion === 'secondary' ? 'white' : 'normal';