@redneckz/wildless-cms-uni-blocks 0.14.752 → 0.14.753

package/src/api/RetailAPI/getGenderFromName.ts

@@ -1,20 +1,17 @@
-import { type DaDataSuggestion } from '../dadataHints/dadataHintsType';
-import { fetchRetailJSON } from './doRequest';
+import { getDaDataHints } from '../dadataHints/dadataHints';
 
 const GENDERS = ['male', 'female'];
 
 export const getGenderFromName = async (name: string): Promise<string> => {
-  const res = await fetchRetailJSON<{ suggestions: Array<DaDataSuggestion> }>(
-    '/suggestions/suggest/fio',
-    'POST',
-    {
-      query: name,
-      count: 1,
+  const res = await getDaDataHints({
+    url: '/suggest/fio',
+    requestData: {
       parts: ['NAME'],
     },
-  );
+    query: name,
+  });
 
-  const gender = res?.suggestions[0]?.data?.gender?.toLowerCase() || '';
+  const gender = res[0]?.data?.gender?.toLowerCase() || '';
 
   return GENDERS.includes(gender) ? gender : '';
 };

package/src/api/RetailAPI/getTraceId.ts

@@ -0,0 +1,6 @@
+export const getTraceId = () => {
+  const result = new Uint8Array(8);
+  globalThis.crypto.getRandomValues(result);
+
+  return result.reduce((acc, _) => `${acc}${_.toString(16).padStart(2, '0')}`, '');
+};

package/src/components/ApplicationForm/renderAgreementSubmit.tsx

@@ -1,14 +1,15 @@
 import { type FieldProps } from '../../hooks/useForm/useForm';
 import { type LinkProps } from '../../model/LinkProps';
+import { SubmitButton } from '../../ui-kit/Button/SubmitButton';
 import { Checkbox } from '../../ui-kit/Checkbox/Checkbox';
 import { agreementValidator } from '../../ui-kit/FormField/validators';
 import { renderErrorText } from '../../ui-kit/Input/renderErrorText';
 import { withValidator } from '../../validation/withValidator';
 import { type SubmitButtonProps } from './ApplicationFormContent';
 import { Footnote } from './Footnote';
-import { renderSubmitButton } from './renderSubmitButton';
 
 const agreementText = 'Нажимая кнопку, вы подтверждаете согласие с ';
+
 export const renderAgreementSubmit = (
   consentDataProcessing?: FieldProps<boolean>,
   link?: LinkProps,
@@ -26,6 +27,8 @@ export const renderAgreementSubmit = (
     ) : (
       <Footnote text={agreementText} link={link} />
     )}
-    {renderSubmitButton(button)}
+    <SubmitButton className="w-full @xl:w-auto">
+      {button?.text ? button.text : 'Отправить заявку'}
+    </SubmitButton>
   </div>
 );

package/src/components/ApplicationLeadForm/GroupedConsents.tsx

@@ -5,12 +5,13 @@ import { type FormFieldRegisterer } from '../../services/retail/external/types';
 import { InputsConsentsMap } from '../../services/retail/inputs';
 import { type LeadFormState } from '../../services/retail/model/LeadFormState';
 import { type FieldRetailDef } from '../../services/retail/model/RetailFormContent';
-import { IconButton } from '../../ui-kit/Button/IconButton';
+import { Button } from '../../ui-kit/Button/Button';
 import { Checkbox } from '../../ui-kit/Checkbox/Checkbox';
 import { Foldable } from '../../ui-kit/Foldable/Foldable';
 import { FoldableSection } from '../../ui-kit/Foldable/FoldableSection';
 import { getField } from '../../ui-kit/FormField/getField';
 import { validatorObj } from '../../ui-kit/FormField/getObjectValidator';
+import { ToggleIcon } from '../../ui-kit/Icon/ToggleIcon';
 import { renderErrorText } from '../../ui-kit/Input/renderErrorText';
 import { withValidator } from '../../validation/withValidator';
 
@@ -65,7 +66,9 @@ export const GroupedConsents = JSX<GroupedConsentsProps>(({ inputs = [], field,
             />
             {renderErrorText(hasValidationErrors ? CONSENT_REQUIRED : '')}
           </div>
-          <IconButton name={isUnfolded ? 'ArrowUpIcon' : 'ArrowDownIcon'} onClick={toggle} />
+          <Button embedded onClick={toggle}>
+            <ToggleIcon className="p-2xs" iconVersion="color" isUnfolded={isUnfolded} />
+          </Button>
         </div>
         <FoldableSection className="flex flex-col pl-2xl" isUnfolded={isUnfolded}>
           {inputs.map(getField<FieldRetailDef>(field, {}, InputsConsentsMap))}

package/src/components/ApplicationLeadForm/renderSubmitButton.tsx

@@ -1,9 +1,8 @@
-import { Button } from '../../ui-kit/Button/Button';
-import { style } from '../../utils/style';
+import { SubmitButton } from '../../ui-kit/Button/SubmitButton';
 import { type SubmitButtonProps } from './ApplicationLeadFormContent';
 
 export const renderSubmitButton = (button?: SubmitButtonProps, isSending?: boolean) => (
-  <Button className={style('w-full @xl:w-auto')} type="submit" isLoading={isSending}>
+  <SubmitButton className="w-full @xl:w-auto" isLoading={isSending}>
     {button?.text ? button.text : 'Отправить заявку'}
-  </Button>
+  </SubmitButton>
 );

package/src/components/CardTransfer/CardTransfer.tsx

@@ -3,7 +3,7 @@ import { useEffect } from '@redneckz/uni-jsx/lib/hooks';
 import { useBool } from '@redneckz/uni-jsx/lib/hooks/useBool';
 import { useForm } from '../../hooks/useForm/useForm';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
-import { Button } from '../../ui-kit/Button/Button';
+import { SubmitButton } from '../../ui-kit/Button/SubmitButton';
 import { CurrencyInput } from '../../ui-kit/CurrencyInput/CurrencyInput';
 import { Heading } from '../../ui-kit/Heading/Heading';
 import { type UniBlockProps } from '../../UniBlock/UniBlockProps';
@@ -67,9 +67,9 @@ export const CardTransfer = JSX<CardTransferProps>(
           />
           <input type="hidden" name="amount" value={amount} />
           {button?.text ? (
-            <Button className="w-full mt-lg" type="submit" disabled={isDisabled}>
+            <SubmitButton className="w-full mt-lg" disabled={isDisabled}>
               {button.text}
-            </Button>
+            </SubmitButton>
           ) : null}
         </form>
       </BlockWrapper>

package/src/components/CarouselTariffsCard/CarouselTariffsCard.tsx

@@ -1,15 +1,13 @@
 import { JSX } from '@redneckz/uni-jsx';
-import { useCallback, useEffect, useState } from '@redneckz/uni-jsx/lib/hooks';
-import { type AspectsDef } from '../../model/AspectsProps';
+import { useCallback, useEffect, useMemo, useState } from '@redneckz/uni-jsx/lib/hooks';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
-import { IconButton } from '../../ui-kit/Button/IconButton';
+import { DefaultFoldButton } from '../../ui-kit/Foldable/DefaultFoldButton';
 import { Foldable } from '../../ui-kit/Foldable/Foldable';
 import { FoldableSection } from '../../ui-kit/Foldable/FoldableSection';
 import { Heading } from '../../ui-kit/Heading/Heading';
 import { Img } from '../../ui-kit/Img/Img';
 import { LinkButton } from '../../ui-kit/LinkButton/LinkButton';
 import { type UniBlockProps } from '../../UniBlock/UniBlockProps';
-import { isIcon } from '../../utils/isIcon';
 import { style } from '../../utils/style';
 import { type CarouselTariffsCardContent } from './CarouselTariffsCardContent';
 import { carouselTariffsCardEventBus } from './carouselTariffsCardEventBus';
@@ -30,12 +28,15 @@ export const CarouselTariffsCard = JSX<CarouselTariffsCardProps>(
     data,
     ...rest
   }) => {
-    const cellsNode = cardCells.map(renderCardInfo);
+    const cellsNode = useMemo(() => cardCells.map(renderCardInfo), [cardCells]);
+    const [visibleCells, hiddenCells] = useMemo(
+      () =>
+        visibleCellsCount > 0
+          ? [cellsNode.slice(0, visibleCellsCount), cellsNode.slice(visibleCellsCount)]
+          : [cellsNode, []],
+      [visibleCellsCount, cellsNode],
+    );
 
-    const [visibleCells, hiddenCells] =
-      visibleCellsCount > 0
-        ? [cellsNode.slice(0, visibleCellsCount), cellsNode.slice(visibleCellsCount)]
-        : [cellsNode, []];
     const [isVisible, setIsVisible] = useState(false);
 
     useEffect(
@@ -58,11 +59,7 @@ export const CarouselTariffsCard = JSX<CarouselTariffsCardProps>(
 
     return (
       <BlockWrapper className={style('flex flex-col', className)} defaultPadding="p-2xl" {...rest}>
-        {isIcon(icon) ? (
-          <div className="self-center">
-            <Img image={icon} />
-          </div>
-        ) : null}
+        <Img className="self-center" image={icon} />
         {title ? (
           <Heading className={style('pt-xs', align)} headingType="h5" title={title} />
         ) : null}
@@ -74,7 +71,14 @@ export const CarouselTariffsCard = JSX<CarouselTariffsCardProps>(
               <FoldableSection isUnfolded={isVisible}>{hiddenCells}</FoldableSection>
             </div>
             {cardCells.length >= visibleCellsCount ? (
-              <FoldButton isUnfolded={isVisible} data={data} onClick={handleFold} />
+              <DefaultFoldButton
+                className="w-full mt-m"
+                label={isVisible ? 'Скрыть' : 'Подробнее о тарифе'}
+                isUnfolded={isVisible}
+                embedded
+                data={data}
+                onClick={handleFold}
+              />
             ) : null}
           </Foldable>
         ) : (
@@ -84,15 +88,3 @@ export const CarouselTariffsCard = JSX<CarouselTariffsCardProps>(
     );
   },
 );
-
-const FoldButton = JSX<{ isUnfolded?: boolean; data?: AspectsDef[]; onClick?: () => void }>(
-  ({ data, isUnfolded, onClick }) => (
-    <IconButton
-      className="w-full"
-      {...(isUnfolded
-        ? { name: 'ArrowUpIcon', text: 'Скрыть', data }
-        : { name: 'ArrowDownIcon', text: 'Подробнее о тарифе' })}
-      onClick={onClick}
-    />
-  ),
-);

package/src/components/CreditCardForm/StepsNavigationButtons.tsx

@@ -1,5 +1,6 @@
 import { JSX } from '@redneckz/uni-jsx';
 import { Button } from '../../ui-kit/Button/Button';
+import { SubmitButton } from '../../ui-kit/Button/SubmitButton';
 
 export interface StepsNavigationButtonsProps {
   step: number;
@@ -17,9 +18,9 @@ export const StepsNavigationButtons = JSX<StepsNavigationButtonsProps>(
         <Button onClick={onPrevStep} type="button" version="secondary" disabled={isFirstStep}>
           Назад
         </Button>
-        <Button isLoading={isSending} type="submit">
+        <SubmitButton isLoading={isSending}>
           {isFinalStep ? 'Отправить заявку' : 'Далее'}
-        </Button>
+        </SubmitButton>
       </div>
     );
   },

package/src/components/CreditForm/StepsNavigationButtons.tsx

@@ -1,5 +1,6 @@
 import { JSX } from '@redneckz/uni-jsx';
 import { Button } from '../../ui-kit/Button/Button';
+import { SubmitButton } from '../../ui-kit/Button/SubmitButton';
 
 export interface StepsNavigationButtonsProps {
   step: number;
@@ -17,9 +18,9 @@ export const StepsNavigationButtons = JSX<StepsNavigationButtonsProps>(
         <Button onClick={onPrevStep} type="button" version="secondary" disabled={isFirstStep}>
           Назад
         </Button>
-        <Button type="submit" isLoading={isSending}>
+        <SubmitButton isLoading={isSending}>
           {isFinalStep ? 'Отправить заявку' : 'Далее'}
-        </Button>
+        </SubmitButton>
       </div>
     );
   },

package/src/components/Depository/DepositoryItem.tsx

@@ -1,9 +1,9 @@
 import { JSX } from '@redneckz/uni-jsx';
 import { API_BASE_URI } from '../../api/apiBaseUrl';
 import { useLink } from '../../hooks/useLink';
+import { RoundedIcon } from '../../ui-kit/Icon/RoundedIcon';
 import { Text } from '../../ui-kit/Text/Text';
 import { formatDate } from '../../utils/formatDate';
-import { renderRoundedIcon } from '../RollupItem/renderRoundedIcon';
 import { type DepositoryDataItem } from './useDepository';
 
 export const DepositoryItem = JSX(({ title, timestamp, publicId }: DepositoryDataItem) => {
@@ -15,7 +15,7 @@ export const DepositoryItem = JSX(({ title, timestamp, publicId }: DepositoryDat
       className="flex gap-3 items-center py-lg border-gray border-opacity-50 border-b"
       key={publicId}
     >
-      {renderRoundedIcon({ icon: 'DocDownloadIcon', iconVersion: 'black' })}
+      <RoundedIcon className="shrink-0" icon="DocDownloadIcon" iconVersion="black" />
       <div className="flex flex-col gap-x-6xl lg:flex-row lg:items-center">
         {timestamp ? (
           <Text size="text-m" font-weight="font-light">

package/src/components/OfficesAtmsMap/FiltrationForm.tsx

@@ -1,12 +1,13 @@
 import { JSX } from '@redneckz/uni-jsx';
 import { useBool } from '@redneckz/uni-jsx/lib/hooks/useBool';
 import { type FormFieldRegisterer } from '../../hooks/useForm/useForm';
+import { Button } from '../../ui-kit/Button/Button';
+import { ButtonTitle } from '../../ui-kit/Button/ButtonTitle';
 import { Checkbox } from '../../ui-kit/Checkbox/Checkbox';
+import { DefaultFoldButton } from '../../ui-kit/Foldable/DefaultFoldButton';
 import { Foldable } from '../../ui-kit/Foldable/Foldable';
-import { type FoldablePartProps } from '../../ui-kit/Foldable/FoldablePartProps';
 import { FoldableSection } from '../../ui-kit/Foldable/FoldableSection';
 import { Icon } from '../../ui-kit/Icon/Icon';
-import { LinkButton } from '../../ui-kit/LinkButton/LinkButton';
 
 const COMMON_FILTERS_STYLES = 'flex flex-col sm:flex-row sm:flex-wrap gap-3xl pb-2xl';
 
@@ -43,7 +44,20 @@ export const FiltrationForm = JSX<RenderFiltrationFormProps>(
                   {hiddenFilters}
                 </FoldableSection>
               </div>
-              {renderFoldButton(reset, onlyOffice)({ isUnfolded, onToggle: toggle })}
+              <div className="flex space-x-lg">
+                {onlyOffice ? (
+                  <DefaultFoldButton
+                    label={isUnfolded ? 'Меньше фильтров' : 'Больше фильтров'}
+                    isUnfolded={isUnfolded}
+                    embedded
+                    onClick={toggle}
+                  />
+                ) : null}
+                <Button embedded onClick={reset}>
+                  <ButtonTitle>Очистить фильтр</ButtonTitle>
+                  <Icon name="CloseIcon" size="small" />
+                </Button>
+              </div>
             </Foldable>
           </div>
         ) : null}
@@ -51,29 +65,3 @@ export const FiltrationForm = JSX<RenderFiltrationFormProps>(
     );
   },
 );
-
-// TODO Столько разных кнопок с иконками, но эта самая творчески-ударённая реализация))
-export const renderFoldButton =
-  (reset: () => void, onlyOffice = false) =>
-  ({ isUnfolded, onToggle }: FoldablePartProps) =>
-    (
-      <div className="flex space-x-lg">
-        {onlyOffice ? (
-          <LinkButton
-            version="transparent"
-            className="text-secondary-text [&>*]:p-0"
-            appendRight={
-              <Icon name={isUnfolded ? 'ArrowUpIcon' : 'ArrowDownIcon'} width="16" height="16" />
-            }
-            text={isUnfolded ? 'Меньше фильтров' : 'Больше фильтров'}
-            onClick={onToggle}
-          />
-        ) : null}
-        <LinkButton version="transparent" className="text-secondary-text [&>*]:p-0" onClick={reset}>
-          <div className="flex items-center">
-            Очистить фильтр
-            <Icon name="CloseIcon" width="16" height="16" className="ml-2xs" />
-          </div>
-        </LinkButton>
-      </div>
-    );

package/src/components/OfficesAtmsMap/FoldableCardContent.tsx

@@ -1,16 +1,25 @@
 import { JSX } from '@redneckz/uni-jsx';
 import { useBool } from '@redneckz/uni-jsx/lib/hooks/useBool';
+import { DefaultFoldButton } from '../../ui-kit/Foldable/DefaultFoldButton';
 import { Foldable } from '../../ui-kit/Foldable/Foldable';
 import { FoldableSection } from '../../ui-kit/Foldable/FoldableSection';
-import { renderFoldButton } from './renderFoldButton';
 
 export const FoldableCardContent = JSX(({ children }) => {
   const [isUnfolded, { toggle }] = useBool(false);
 
   return (
-    <Foldable className="block sm:hidden">
-      <FoldableSection isUnfolded={isUnfolded}>{children}</FoldableSection>
-      {renderFoldButton({ isUnfolded, onToggle: toggle })}
-    </Foldable>
+    <div>
+      <div className="hidden sm:block">{children}</div>
+      <Foldable className="block sm:hidden">
+        <FoldableSection isUnfolded={isUnfolded}>{children}</FoldableSection>
+        <DefaultFoldButton
+          className="w-full my-m mr-m border-b border-solid border-main-divider"
+          label={isUnfolded ? 'Скрыть' : 'Подробнее'}
+          isUnfolded={isUnfolded}
+          embedded
+          onClick={toggle}
+        />
+      </Foldable>
+    </div>
   );
 });

package/src/components/OfficesAtmsMap/renderAtmCard.tsx

@@ -53,11 +53,12 @@ export const renderAtmCard = (
           <Badge color="green">{capitalize(workTime)}</Badge>
         </div>
       </div>
-      <div className="hidden sm:block">
-        <CardRow className="flex-wrap">{additionalInfo?.map(renderInfo)}</CardRow>
-      </div>
       <FoldableCardContent>
-        <CardRow className="flex-wrap">{additionalInfo?.map(renderInfo)}</CardRow>
+        <CardRow className="flex-wrap">
+          {additionalInfo?.map((item, key) => (
+            <CardCell key={String(key)} {...item} />
+          ))}
+        </CardRow>
       </FoldableCardContent>
     </div>
   );
@@ -69,5 +70,3 @@ export const getAtmPoint = ({ address = '', terminalType, atmCode = '' }: Atm) =
 
   return { header, body };
 };
-
-const renderInfo = (item: CardCellProps, i: number) => <CardCell key={String(i)} {...item} />;

package/src/components/OfficesAtmsMap/renderOfficeCard.tsx

@@ -33,7 +33,6 @@ export const renderOfficeCard = (branch: Branch, i: number) => {
         </div>
         {renderCurrentDaySchedule(workScheduleWeek)}
       </div>
-      <div className="hidden sm:block">{renderCardContent(branch)}</div>
       <FoldableCardContent>{renderCardContent(branch)}</FoldableCardContent>
     </div>
   );

package/src/components/OfficesAtmsMap/renderRemoteWorkplaceCard.tsx

@@ -26,7 +26,6 @@ export const renderRemoteWorkplaceCard = (
           ) : null}
         </div>
       </div>
-      <div className="hidden sm:block">{renderCardContent(workScheduleDescription)}</div>
       <FoldableCardContent>{renderCardContent(workScheduleDescription)}</FoldableCardContent>
     </div>
   );

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

@@ -2,7 +2,6 @@ import '../../setup-fixture';
 
 import { type BlockRendererOptions } from '../../BlockRenderer/BlockRendererOptions';
 import { type BlockDef } from '../../model/ContentPageDef';
-import { type Picture } from '../../model/Picture';
 import { Blocks } from '../Blocks.mobile';
 import { TEXT_BLOCK } from '../TextBlock/TextBlock.fixture.mobile';
 import { RollupItem } from './RollupItem';
@@ -23,18 +22,10 @@ export const ROLLUP_ITEM: BlockDef = {
   ],
 };
 
-const labelIcon: Picture = { icon: 'BriefcaseIcon' };
-
 export default {
   default: (
     <div>
-      <RollupItem
-        {...ROLLUP_ITEM.content}
-        block={ROLLUP_ITEM}
-        labelIcon={labelIcon}
-        labelIconBgVersion="primary"
-        options={options}
-      />
+      <RollupItem {...ROLLUP_ITEM.content} block={ROLLUP_ITEM} options={options} />
       <RollupItem
         foldButtonVersion="accordion"
         {...ROLLUP_ITEM.content}
@@ -50,8 +41,6 @@ export default {
         isExpanded={true}
         foldButtonVersion="accordion"
         label="RollupItem label 1"
-        labelIcon={labelIcon}
-        labelIconBgVersion="primary"
         options={options}
       />
     </div>

package/src/components/RollupItem/RollupItem.tsx

@@ -1,24 +1,17 @@
 import { useBool } from '@redneckz/uni-jsx/lib/hooks/useBool';
 import { renderChildren } from '../../BlockRenderer/renderChildren';
 import { useMobileMode } from '../../hooks/useMobileMode';
-import { type Picture } from '../../model/Picture';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
 import { DefaultFoldButton } from '../../ui-kit/Foldable/DefaultFoldButton';
 import { Foldable } from '../../ui-kit/Foldable/Foldable';
-import { type FoldablePartProps } from '../../ui-kit/Foldable/FoldablePartProps';
 import { FoldableSection } from '../../ui-kit/Foldable/FoldableSection';
-import { type IconBgVersion, type IconProps } from '../../ui-kit/Icon/IconProps';
 import { UniBlock } from '../../UniBlock/UniBlock';
 import { type UniBlockProps } from '../../UniBlock/UniBlockProps';
 import { style } from '../../utils/style';
-import { AccordionFoldButton } from './AccordionFoldButton';
 import { getFoldableStyles } from './getFoldableStyles';
-import { getIconName } from './getIconName';
-import { type FoldButtonVersion, type RollupItemContent } from './RollupItemContent';
+import { type RollupItemContent } from './RollupItemContent';
 
 interface RollupItemProps extends RollupItemContent, UniBlockProps {
-  labelIcon?: Picture;
-  labelIconBgVersion?: IconBgVersion;
   role?: string;
 }
 
@@ -27,10 +20,8 @@ export const RollupItem = UniBlock<RollupItemProps>(
     className = '',
     isExpanded,
     isFoldButtonOnTop = true,
-    label = 'Развернуть',
-    labelIcon,
-    labelIconBgVersion,
     foldButtonVersion = 'default',
+    label,
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
     version,
     role,
@@ -51,15 +42,17 @@ export const RollupItem = UniBlock<RollupItemProps>(
         })}
       </FoldableSection>
     );
-    const foldButton = renderFoldButton({
-      foldButtonVersion,
-      label,
-      labelIcon,
-      labelIconBgVersion,
-      isMobile,
-      isUnfolded,
-      onToggle: toggle,
-    });
+
+    const isAccordion = foldButtonVersion === 'accordion';
+    const foldButton = (
+      <DefaultFoldButton
+        className={style('w-full', { 'text-h6 my-lg': isAccordion })}
+        label={label}
+        isUnfolded={isUnfolded}
+        embedded={isAccordion}
+        onClick={toggle}
+      />
+    );
 
     return (
       <BlockWrapper
@@ -80,45 +73,5 @@ export const RollupItem = UniBlock<RollupItemProps>(
       </BlockWrapper>
     );
   },
-  {
-    childrenTypes: { exclude: ['RollupItem'] },
-  },
+  { childrenTypes: { exclude: ['RollupItem'] } },
 );
-
-interface FoldButtonProps extends FoldablePartProps {
-  foldButtonVersion?: FoldButtonVersion;
-  label?: string;
-  labelIcon?: IconProps;
-  labelIconBgVersion?: IconBgVersion;
-  isPadding?: boolean;
-  isMobile?: boolean;
-}
-
-const renderFoldButton = ({
-  foldButtonVersion,
-  label: defaultLabel,
-  labelIcon,
-  labelIconBgVersion,
-  isUnfolded,
-  isMobile = false,
-  onToggle,
-}: FoldButtonProps) => {
-  const label = defaultLabel || (isUnfolded ? 'Скрыть' : 'Развернуть');
-  const icon = getIconName(isUnfolded, isMobile);
-
-  return foldButtonVersion === 'accordion' ? (
-    <AccordionFoldButton
-      label={label}
-      labelIcon={labelIcon}
-      labelIconBgVersion={labelIconBgVersion}
-      icon={icon}
-      onToggle={onToggle}
-    />
-  ) : (
-    <DefaultFoldButton
-      label={label}
-      icon={isUnfolded ? 'ArrowUpIcon' : 'ArrowDownIcon'}
-      onClick={onToggle}
-    />
-  );
-};

package/src/components/SafeDepositRental/SafeDepositRentalTotal.tsx

@@ -1,5 +1,5 @@
 import { JSX } from '@redneckz/uni-jsx';
-import { Img } from '../../ui-kit/Img/Img';
+import { Icon } from '../../ui-kit/Icon/Icon';
 import { Paragraph } from '../../ui-kit/Paragraph/Paragraph';
 import { Text } from '../../ui-kit/Text/Text';
 import { type Tariff } from './useSafeBoxes';
@@ -25,7 +25,7 @@ export const SafeDepositRentalTotal = JSX<SafeDepositRentalTotalProps>(({ days,
         </Paragraph>
       </div>
       <div className="flex flex-col items-center gap-s order-3 @xl:order-none mb-xl @xl:mb-0 bg-primary-main py-s @xl:p-3xl text-center">
-        <Img image={{ icon: 'PackA4Icon' }} className="@xl:h-60" />
+        <Icon className="@xl:h-60" name="PackA4Icon" />
         <div className="hidden @xl:inline opacity-80 whitespace-pre-line">
           <Paragraph size="text-s" font="font-light" color="text-white">
             {imageDescription}

package/src/components/TariffsTable/TariffsTable.tsx

@@ -2,7 +2,7 @@ import { JSX } from '@redneckz/uni-jsx';
 import { useBool } from '@redneckz/uni-jsx/lib/hooks/useBool';
 import { useCarouselControls } from '../../hooks/useCarouselControls';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
-import { renderDefaultFoldButton } from '../../ui-kit/Foldable/DefaultFoldButton';
+import { DefaultFoldButton } from '../../ui-kit/Foldable/DefaultFoldButton';
 import { Foldable } from '../../ui-kit/Foldable/Foldable';
 import { FoldableSection } from '../../ui-kit/Foldable/FoldableSection';
 import { type UniBlockProps } from '../../UniBlock/UniBlockProps';
@@ -63,7 +63,7 @@ export const TariffsTable = JSX<TariffsTableProps>(
                 {visibleRows}
                 <FoldableSection isUnfolded={isUnfolded}>{hiddenRows}</FoldableSection>
               </TariffsTableWrapper>
-              {renderDefaultFoldButton({ isUnfolded, onToggle: toggle })}
+              <DefaultFoldButton className="w-full" isUnfolded={isUnfolded} onClick={toggle} />
             </Foldable>
           ) : (
             <TariffsTableWrapper controls={controls}>{rows}</TariffsTableWrapper>

package/src/ui-kit/BaseFiltration/GridBlocks.tsx

@@ -18,7 +18,7 @@ interface GridBlocksProps extends GridSection, UniBlockProps {
 }
 
 export const GridBlocks = JSX<GridBlocksProps>(
-  ({ topItemsCount = 0, label = '', block, blocksToRender = [], ...rest }) => {
+  ({ topItemsCount = 0, label, block, blocksToRender = [], ...rest }) => {
     const [visibleBlocks, hiddenBlocks] =
       topItemsCount > 0
         ? [blocksToRender.slice(0, topItemsCount), blocksToRender.slice(topItemsCount)]
@@ -38,11 +38,11 @@ export const GridBlocks = JSX<GridBlocksProps>(
             {isOdd(hiddenBlocks.length) ? <AdTile className="col-span-6" {...rest} /> : null}
           </FoldableSection>
           <DefaultFoldButton
-            className={style({ hidden: topItemsCount < 1 })}
-            dataTheme={rest.options?.page?.colorPalette}
-            disabled={!hiddenBlocks?.length}
+            className={style('w-full', { hidden: topItemsCount < 1 })}
             label={label}
-            icon={isUnfolded ? 'ArrowUpIcon' : 'ArrowDownIcon'}
+            isUnfolded={isUnfolded}
+            disabled={!hiddenBlocks?.length}
+            dataTheme={rest.options?.page?.colorPalette}
             onClick={toggle}
           />
         </Foldable>