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

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>

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

@@ -10,7 +10,6 @@ export default {
       <div className="bg-white p-xl flex flex-col gap-2">
         <p>Primary</p>
         <Button>{buttonText}</Button>
-        <Button active>{buttonText}</Button>
         <Button disabled>{buttonText}</Button>
         <Button>
           {icon}
@@ -20,9 +19,6 @@ export default {
       <div className="bg-white p-xl flex flex-col gap-2">
         <p>Secondary</p>
         <Button version="secondary">{buttonText}</Button>
-        <Button version="secondary" active>
-          {buttonText}
-        </Button>
         <Button version="secondary" disabled>
           {buttonText}
         </Button>
@@ -38,7 +34,6 @@ export default {
       <div className="bg-primary-main p-xl flex flex-col gap-2">
         <p className="text-white">Primary</p>
         <Button>{buttonText}</Button>
-        <Button active>{buttonText}</Button>
         <Button disabled>{buttonText}</Button>
         <Button>
           {icon}
@@ -48,9 +43,6 @@ export default {
       <div className="bg-primary-main p-xl flex flex-col gap-2">
         <p className="text-white">Secondary</p>
         <Button version="secondary">{buttonText}</Button>
-        <Button version="secondary" active>
-          {buttonText}
-        </Button>
         <Button version="secondary" disabled>
           {buttonText}
         </Button>

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

@@ -1,77 +1,93 @@
 import { JSX } from '@redneckz/uni-jsx';
+import { useCallback, useMemo } from '@redneckz/uni-jsx/lib/hooks';
+import { handlerDecorator } from '../../external/handlerDecorator';
+import { type AspectsDef } from '../../model/AspectsProps';
 import { type ButtonVersion } from '../../model/ButtonVersion';
+import { type ColorPalette } from '../../model/ContentPageBase';
+import { getAspectsAttributes } from '../../utils/dataAttributes';
 import { style } from '../../utils/style';
 import { type ARIAProps } from '../ARIAProps';
 import { type ControlStateProps } from '../ControlStateProps';
-import { Loader } from '../Loader/Loader';
 import { type PreventableEvent } from '../PreventableEvent';
-import { useButton } from './useButton';
 
 const buttonStyleMap: Record<ButtonVersion, string> = {
-  primary: 'text-white bg-primary-main hover:bg-primary-hover active:bg-primary-active',
-  secondary:
-    'text-primary-main bg-main-divider hover:text-white hover:bg-primary-hover active:bg-primary-active',
-};
-
-const secondaryButtonStyleMap: Record<ButtonVersion, string> = {
   primary: style(
+    'justify-center px-9 py-4',
+    'text-white bg-primary-main hover:bg-primary-hover active:bg-primary-active',
     'group-data-secondary:text-primary-main group-data-secondary:bg-white',
     'group-data-secondary:hover:text-white group-data-secondary:hover:bg-primary-hover',
     'group-data-secondary:active:bg-primary-active',
   ),
   secondary: style(
+    'justify-center px-9 py-4',
+    'text-primary-main bg-main-divider hover:text-white hover:bg-primary-hover active:bg-primary-active',
     'group-data-secondary:text-white group-data-secondary:bg-white/20',
     'group-data-secondary:hover:bg-primary-hover',
     'group-data-secondary:active:bg-primary-active',
   ),
 };
 
+const embeddedStyle = style(
+  'group/btn-embedded',
+  'justify-between p-0',
+  'bg-transparent border border-transparent outline-none',
+);
+
 export interface ButtonProps extends ControlStateProps, ARIAProps {
   className?: string;
-  version?: ButtonVersion;
   type?: 'button' | 'submit' | 'reset';
+  version?: ButtonVersion;
+  embedded?: boolean;
   rounded?: boolean;
-  isLoading?: boolean;
   role?: string;
-  onClick?: (ev?: PreventableEvent) => void;
+  data?: AspectsDef[];
+  dataTheme?: ColorPalette;
+  onClick?: (ev: PreventableEvent) => void;
 }
 
-export const Button = JSX<ButtonProps>(({ children, ...props }) => {
-  const button = useButton();
-
-  const {
+export const Button = JSX<ButtonProps>(
+  ({
     className,
-    version = 'primary',
-    active,
-    disabled,
-    isLoading,
     type = 'button',
+    version = 'primary',
+    embedded,
     rounded = true,
+    disabled,
     role,
+    data,
+    dataTheme,
+    children,
     onClick,
-  } = button(props);
+  }) => {
+    const handleClick = useCallback(
+      handlerDecorator((ev: PreventableEvent) => {
+        !disabled && onClick?.(ev);
+      }),
+      [disabled, onClick],
+    );
+    const aspectsAttrs = useMemo(() => getAspectsAttributes(data), [data]);
 
-  return (
-    <button
-      className={style(
-        'font-sans px-9 py-4',
-        'flex justify-center items-center gap-xs relative',
-        {
-          'text-white bg-primary-active': active,
-          'bg-main-gray text-main-disabled cursor-not-allowed': disabled || isLoading,
-          'rounded-md': rounded,
-        },
-        !active && !disabled && !isLoading
-          ? style(buttonStyleMap[version], secondaryButtonStyleMap[version])
-          : '',
-        className,
-      )}
-      type={type}
-      role={role}
-      onClick={onClick}
-    >
-      {isLoading ? <Loader blur={true} size="small" /> : null}
-      {children}
-    </button>
-  );
-});
+    return (
+      <button
+        className={style(
+          'font-sans flex items-center gap-xs relative',
+          !disabled && !embedded && buttonStyleMap[version],
+          {
+            [embeddedStyle]: embedded,
+            'rounded-md': rounded,
+            'bg-main-gray text-main-disabled cursor-not-allowed': disabled,
+          },
+          className,
+        )}
+        type={type}
+        role={role}
+        data-theme={dataTheme}
+        // eslint-disable-next-line react/jsx-props-no-spreading
+        {...aspectsAttrs}
+        onClick={handleClick}
+      >
+        {children}
+      </button>
+    );
+  },
+);

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

@@ -0,0 +1,17 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { style } from '../../utils/style';
+
+interface ButtonTitleProps {
+  className?: string;
+}
+
+export const ButtonTitle = JSX<ButtonTitleProps>(({ className, children }) => (
+  <span
+    className={style(
+      'inline-flex items-center text-start gap-s group-hover/btn-embedded:text-primary-main',
+      className,
+    )}
+  >
+    {children}
+  </span>
+));

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

@@ -0,0 +1,14 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { Loader } from '../Loader/Loader';
+import { Button, type ButtonProps } from './Button';
+
+export interface SubmitButtonProps extends ButtonProps {
+  isLoading?: boolean;
+}
+
+export const SubmitButton = JSX<SubmitButtonProps>(({ isLoading, disabled, children, ...rest }) => (
+  <Button type="submit" disabled={isLoading || disabled} {...rest}>
+    {isLoading ? <Loader blur={true} size="small" /> : null}
+    {children}
+  </Button>
+));

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

@@ -4,6 +4,7 @@ import { useBool } from '@redneckz/uni-jsx/lib/hooks/useBool';
 import { checkCaptcha } from '../../api/RetailAPI/checkCaptcha';
 import { createCaptcha } from '../../api/RetailAPI/createCaptcha';
 import { Button } from '../Button/Button';
+import { SubmitButton } from '../Button/SubmitButton';
 import { Dialog } from '../DialogManager/Dialog';
 import { Icon } from '../Icon/Icon';
 import { Input } from '../Input/Input';
@@ -50,12 +51,9 @@ export const CaptchaDialog = JSX<CaptchaDialogProps>(({ phoneNumber, sendCode, o
       <div className="flex flex-col gap-lg items-center rounded-md">
         <div className="flex h-36 w-72">
           <img className="grow" src={captcha}></img>
-          <div
-            onClick={handleCreateCaptcha}
-            className="flex w-8 items-center justify-center cursor-pointer"
-          >
+          <Button className="w-8" embedded onClick={handleCreateCaptcha}>
             <Icon iconVersion="normal" name="RefreshIcon" />
-          </div>
+          </Button>
         </div>
         <Input
           className="w-[300px]"
@@ -65,12 +63,12 @@ export const CaptchaDialog = JSX<CaptchaDialogProps>(({ phoneNumber, sendCode, o
         />
         {hasError ? <div className="text-error">Неверный код</div> : null}
         <div className="flex w-[310px] justify-between">
-          <Button onClick={close} version="secondary">
+          <Button version="secondary" onClick={close}>
             Вернуться
           </Button>
-          <Button type="submit" disabled={!code} onClick={handleCheckCaptcha} version="secondary">
+          <SubmitButton version="secondary" disabled={!code} onClick={handleCheckCaptcha}>
             Отправить
-          </Button>
+          </SubmitButton>
         </div>
         {isLoading ? <Loader blur={false} /> : null}
       </div>