@redneckz/wildless-cms-uni-blocks 0.2.109 → 0.2.113

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

@@ -0,0 +1,103 @@
+import type { Picture } from '../../model/Picture';
+import { context } from '../../setup-fixture';
+import { TextBlock } from './TextBlock';
+import { TextBlockContent } from './TextBlockContent';
+
+const image: Picture = {
+  src: 'bank-card.png',
+  format: 'webp',
+  size: {
+    width: 43,
+    height: 43,
+  },
+};
+
+export const TEXT_BLOCK: TextBlockContent = {
+  title: 'Все карты Россельхозбанка работают',
+  description:
+    "Если не планируете поездку за границу, продолжайте пользоваться картой Своя. Для поездок за границу можно заказать карту 'Кредитная карта Своя Union Pay' на сайте и в приложении Россельхозбанка",
+};
+
+export default (
+  <div className="container grid grid-cols-12">
+    <div className="col-span-12">
+      <div>
+        <p>Private clients</p>
+        <div className="flex flex-col gap-[6px]" data-theme="pc">
+          <TextBlock context={context} {...TEXT_BLOCK} blockVersion="primary" iconVersion="small" />
+          <TextBlock
+            context={context}
+            {...TEXT_BLOCK}
+            blockVersion="primary"
+            iconVersion="big"
+            image={image}
+          />
+          <TextBlock context={context} {...TEXT_BLOCK} blockVersion="primary" iconVersion="none" />
+          <TextBlock
+            context={context}
+            description="Если не планируете поездку за границу, продолжайте пользоваться картой Своя. Для поездок за границу"
+            blockVersion="primary"
+          />
+          <TextBlock
+            context={context}
+            title="Все карты Россельхозбанка работают"
+            blockVersion="primary"
+          />
+          <TextBlock
+            context={context}
+            title="Все карты Россельхозбанка работают"
+            blockVersion="primary"
+            iconVersion="small"
+            items={[
+              'Вклады до 1,4 млн застрахованы',
+              'Вклады до 1,4 млн застрахованы',
+              'Вклады до 1,4 млн застрахованы',
+            ]}
+          />
+        </div>
+      </div>
+      <div>
+        <p>Business clients</p>
+        <div className="flex flex-col gap-[6px]" data-theme="bc">
+          <TextBlock
+            className="flex flex-col"
+            context={context}
+            {...TEXT_BLOCK}
+            blockVersion="primary"
+            iconVersion="small"
+          />
+          <TextBlock
+            context={context}
+            {...TEXT_BLOCK}
+            iconVersion="small"
+            blockVersion="secondary"
+          />
+          <TextBlock
+            context={context}
+            {...TEXT_BLOCK}
+            iconVersion="small"
+            blockVersion="secondary-light"
+          />
+        </div>
+      </div>
+      <div>
+        <p>Ecosystem own</p>
+        <div className="flex flex-col gap-[6px]" data-theme="eo">
+          <TextBlock context={context} {...TEXT_BLOCK} iconVersion="small" blockVersion="primary" />
+          <TextBlock
+            context={context}
+            {...TEXT_BLOCK}
+            iconVersion="small"
+            blockVersion="secondary"
+          />
+          <TextBlock
+            context={context}
+            {...TEXT_BLOCK}
+            iconVersion="small"
+            blockVersion="secondary-light"
+          />
+        </div>
+      </div>
+    </div>
+  </div>
+);

package/src/components/TextBlock/TextBlock.mobile.tsx

@@ -0,0 +1,76 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { BlockItem } from '../../ui-kit/BlockItem/BlockItem';
+import { Img } from '../../ui-kit/Img';
+
+import type { BlockVersion } from '../../model/BlockVersion';
+import type { Picture } from '../../model/Picture';
+import type { UniBlockProps } from '../../types';
+import type { TextBlockContent, TextBlockVersion } from './TextBlockContent';
+
+export interface TextBlockProps extends TextBlockContent, UniBlockProps {}
+
+const textBlockStyleMaps: Record<TextBlockVersion, Record<string, string>> = {
+  primary: {
+    background: 'bg-white',
+    icon: 'bg-primary-main text-white',
+    title: 'text-primary-text',
+    description: 'text-secondary-text',
+  },
+  secondary: {
+    background: 'bg-primary-main',
+    icon: 'bg-white text-primary-main',
+    title: 'text-white',
+    description: 'text-white',
+  },
+  'secondary-light': {
+    background: 'bg-primary-main/10',
+    icon: 'bg-primary-main text-white',
+    title: 'text-primary-text',
+    description: 'text-secondary-text',
+  },
+};
+
+export const TextBlock = JSX<TextBlockProps>(
+  ({ title, description, blockVersion = 'primary', iconVersion, image, className = '', items }) => {
+    const textBlockStyleMap = textBlockStyleMaps[blockVersion];
+    return (
+      <section
+        className={`font-sans px-4 py-[18px] flex flex-col ${textBlockStyleMap.background} ${className}`}
+      >
+        {iconVersion === 'small' ? renderIcon(textBlockStyleMap.icon) : null}
+        {iconVersion === 'big' ? renderImage(image) : null}
+        <div className="py-0.5">
+          {title ? (
+            <div className={`font-medium text-base mb-1 ${textBlockStyleMap.title}`}>{title}</div>
+          ) : null}
+          {description ? (
+            <div className={`text-sm ${textBlockStyleMap.description}`}>{description}</div>
+          ) : null}
+          {items?.length ? renderItems(items) : null}
+        </div>
+      </section>
+    );
+  },
+);
+
+function renderItems(items: string[] = [], version?: BlockVersion) {
+  return (
+    <section className="mt-1" role="list">
+      {items.map((_, i) => (
+        <BlockItem key={String(i)} text={_} version={version} />
+      ))}
+    </section>
+  );
+}
+
+function renderIcon(className: string) {
+  return (
+    <div className="mb-3">
+      <div className={`rounded-full h-4 w-4 text-center text-xs ${className}`}>i</div>
+    </div>
+  );
+}
+
+function renderImage(image?: Picture) {
+  return image?.src ? <Img className="pb-3 mr-auto" image={image} /> : null;
+}

package/src/components/TextBlock/TextBlock.tsx

@@ -37,8 +37,8 @@ export const TextBlock = JSX<TextBlockProps>(
       <section
         className={`font-sans px-9 py-4 flex ${textBlockStyleMap.background} ${className || ''}`}
       >
-        {iconVersion && iconVersion === 'small' ? renderIcon(textBlockStyleMap.icon) : null}
-        {iconVersion && iconVersion === 'big' ? renderImage(image) : null}
+        {iconVersion === 'small' ? renderIcon(textBlockStyleMap.icon) : null}
+        {iconVersion === 'big' ? renderImage(image) : null}
         <div className="py-0.5">
           {title && (
             <div className={`font-medium text-base mb-1 ${textBlockStyleMap.title}`}>{title}</div>
@@ -54,7 +54,7 @@ export const TextBlock = JSX<TextBlockProps>(
 
 function renderIcon(className: string) {
   return (
-    <div className={`pt-1.5 pl-1 pr-4`}>
+    <div className="pt-1.5 pl-1 pr-4">
       <div className={`rounded-full h-4 w-4 text-center text-xs ${className}`}>i</div>
     </div>
   );

package/src/components/TextBlock/TextBlockContent.ts

@@ -23,4 +23,5 @@ export interface TextBlockContent {
   iconVersion?: TextBlockIconVersion;
   image?: Picture;
   blockVersion?: TextBlockVersion;
+  items?: string[]; // TODO: mobile content
 }

package/src/components/Tile/Tile.tsx

@@ -19,7 +19,7 @@ export const Tile = JSX<TileProps>((props) => {
 
   return (
     <section
-      className={`font-sans p-9 box-border ${className} ${
+      className={`font-sans p-9 box-border ${className || ''} ${
         tileStyleMap[version]
       } ${getContainerPaddingRight(className)} ${getContainerMinHeight(className)} `}
       role={role}

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

@@ -45,7 +45,12 @@ async function transformImg(
   )}`;
 
   await mkdir(path.dirname(transformedImgPath), { recursive: true });
-  await chain.toFile(transformedImgPath);
+
+  try {
+    await chain.toFile(transformedImgPath);
+  } catch (e) {
+    console.error(e);
+  }
 
   return transformedSrc;
 }

package/src/icons/AtmIcon.svg

@@ -0,0 +1,7 @@
+<svg id="icon" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M1.6665 10.441V12.916C1.6665 15.8327 3.33317 17.0827 5.83317 17.0827H14.1665C16.6665 17.0827 18.3332 15.8327 18.3332 12.916V7.08268C18.3332 4.16602 16.6665 2.91602 14.1665 2.91602H5.83317C3.33317 2.91602 1.6665 4.16602 1.6665 7.08268V7.49935H2.49984C4.99984 7.49935 5.83317 6.66602 5.83317 4.16602V3.33268" stroke="#42AB44" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M12.5 10C12.5 8.61667 11.3833 7.5 10 7.5C8.61667 7.5 7.5 8.61667 7.5 10C7.5 11.3833 8.61667 12.5 10 12.5" stroke="#42AB44" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M18.3332 7.50065H17.4998C14.9998 7.50065 14.1665 6.66732 14.1665 4.16732V3.33398" stroke="#42AB44" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M1.6665 12.5H2.49984C4.99984 12.5 5.83317 13.3333 5.83317 15.8333V16.6667" stroke="#42AB44" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M18.3332 12.5H17.4998C14.9998 12.5 14.1665 13.3333 14.1665 15.8333V16.6667" stroke="#42AB44" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/src/icons/BankIcon.svg

@@ -0,0 +1,11 @@
+<svg id="icon" viewBox="0 0 22 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M3.19151 4.79217C2.89984 4.90883 2.6665 5.25883 2.6665 5.56716V8.33383C2.6665 8.79217 3.0415 9.16717 3.49984 9.16717H18.4998C18.9582 9.16717 19.3332 8.79217 19.3332 8.33383V5.56716C19.3332 5.25883 19.0998 4.90883 18.8082 4.79217L11.3082 1.79219C11.1415 1.72552 10.8582 1.72552 10.6915 1.79219L6.65815 3.40886" stroke="#42AB44" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M19.3332 18.3333H2.6665V15.8333C2.6665 15.375 3.0415 15 3.49984 15H18.4998C18.9582 15 19.3332 15.375 19.3332 15.8333V18.3333Z" stroke="#42AB44" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M4.3335 14.9993V9.16602" stroke="#42AB44" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M7.6665 14.9993V9.16602" stroke="#42AB44" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M11 14.9993V9.16602" stroke="#42AB44" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M14.3335 14.9993V9.16602" stroke="#42AB44" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M17.6665 14.9993V9.16602" stroke="#42AB44" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M1.8335 18.334H20.1668" stroke="#42AB44" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M11 7.08398C11.6904 7.08398 12.25 6.52434 12.25 5.83398C12.25 5.14363 11.6904 4.58398 11 4.58398C10.3096 4.58398 9.75 5.14363 9.75 5.83398C9.75 6.52434 10.3096 7.08398 11 7.08398Z" stroke="#42AB44" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/src/icons/BurgerIcon.svg

@@ -0,0 +1,6 @@
+<svg id="icon" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M3 6H21" stroke="#1C1C1C" stroke-width="2" stroke-linecap="round"/>
+<path d="M9.49023 12H21.0002" stroke="#1C1C1C" stroke-width="2" stroke-linecap="round"/>
+<path d="M3 12H5.99" stroke="#1C1C1C" stroke-width="2" stroke-linecap="round"/>
+<path d="M3 18H21" stroke="#1C1C1C" stroke-width="2" stroke-linecap="round"/>
+</svg>

package/src/icons/BurgerIconWhite.svg

@@ -0,0 +1,6 @@
+<svg id="icon" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M3 6H21" stroke="#FFFFFF" stroke-width="2" stroke-linecap="round"/>
+<path d="M9.49023 12H21.0002" stroke="#FFFFFF" stroke-width="2" stroke-linecap="round"/>
+<path d="M3 12H5.99" stroke="#FFFFFF" stroke-width="2" stroke-linecap="round"/>
+<path d="M3 18H21" stroke="#FFFFFF" stroke-width="2" stroke-linecap="round"/>
+</svg>

package/src/icons/CloseIcon.svg

@@ -0,0 +1,6 @@
+<svg id="icon" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M3.70304 5.11173C3.31449 4.72318 3.31449 4.09322 3.70304 3.70468C4.09159 3.31613 4.72155 3.31613 5.1101 3.70467L11.3313 9.92584C11.7198 10.3144 11.7198 10.9444 11.3313 11.3329C10.9427 11.7214 10.3128 11.7214 9.92421 11.3329L3.70304 5.11173Z" fill="#1C1C1C"/>
+<path d="M12.6679 14.0766C12.2793 13.688 12.2793 13.0581 12.6679 12.6695C13.0564 12.281 13.6864 12.281 14.0749 12.6695L20.2961 18.8907C20.6847 19.2792 20.6847 19.9092 20.2961 20.2977C19.9076 20.6863 19.2776 20.6863 18.8891 20.2977L12.6679 14.0766Z" fill="#1C1C1C"/>
+<path d="M14.0746 11.3316C13.6861 11.7202 13.0561 11.7202 12.6676 11.3316C12.279 10.9431 12.279 10.3131 12.6676 9.92457L18.8887 3.70341C19.2773 3.31486 19.9072 3.31486 20.2958 3.70341C20.6843 4.09195 20.6843 4.72191 20.2958 5.11046L14.0746 11.3316Z" fill="#1C1C1C"/>
+<path d="M5.11027 20.2262C4.72172 20.6147 4.09176 20.6147 3.70321 20.2262C3.31466 19.8376 3.31466 19.2077 3.70321 18.8191L9.92438 12.5979C10.3129 12.2094 10.9429 12.2094 11.3314 12.5979C11.72 12.9865 11.72 13.6164 11.3314 14.005L5.11027 20.2262Z" fill="#1C1C1C"/>
+</svg>

package/src/icons/GeolocationIcon.svg

@@ -0,0 +1,4 @@
+<svg id="icon" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12.5999 8.59219C12.5999 10.0255 11.4416 11.1922 9.9999 11.1922C8.55824 11.1922 7.3999 10.0339 7.3999 8.59219C7.3999 7.15052 8.56657 5.99219 9.9999 5.99219C10.2832 5.99219 10.5582 6.03385 10.8082 6.11719" stroke="#42AB44" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M4.98314 3.58338C8.62481 0.158384 15.6831 1.33338 16.9831 7.09172C17.9415 11.3251 15.3081 14.9084 12.9998 17.1251C11.3248 18.7417 8.67481 18.7417 6.99147 17.1251C4.69147 14.9001 2.04981 11.3167 3.01647 7.08338" stroke="#42AB44" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/src/index.ts

@@ -17,7 +17,6 @@ export type {
 export { ContentPageHead } from './components/ContentPage/ContentPageHead';
 export { toMobilePage } from './components/ContentPage/toMobilePage';
 export { Header } from './components/Header/Header';
-export { MobileBlocks } from './components/MobileBlocks';
 export type { Img, ImgSource, Picture } from './model/Picture';
 export { projectSettings } from './ProjectSettings';
 export type { ProjectSettings } from './ProjectSettings';

package/src/model/Picture.ts

@@ -27,4 +27,5 @@ export interface ImgSource {
 export interface Picture extends Img, ImgSource {
   /** @title Другие форматы */
   sources?: ImgSource[];
+  className?: string;
 }

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

@@ -17,7 +17,7 @@ const LIST_STYLE_MAP: Record<BlockItemVersion, string> = {
 export const BlockItem = JSX<BlockItemProps>(
   ({ className = '', isDotted = true, text, children, version = 'primary', white }) => {
     return (
-      <div className={`font-sans inline-block flex ${className}`} role="listitem">
+      <div className={`font-sans flex items-baseline ${className}`} role="listitem">
         {isDotted && <div className={getListStyle(version, white)} />}
         <span className={white ? 'text-white' : TEXT_STYLE_MAP[version]}>{text || children}</span>
       </div>
@@ -29,7 +29,7 @@ const getListStyle = (version: BlockVersion, white?: boolean) => {
   const color = white ? 'bg-white' : LIST_STYLE_MAP[version];
   const size =
     version === 'primary'
-      ? 'w-[8px] h-[8px] min-w-[8px] min-h-[8px] mt-2'
+      ? 'w-2 h-2 min-w-2 min-h-2 mt-2'
       : 'w-[6px] h-[6px] min-w-[6px] min-h-[6px] mt-2.5';
 
   return `${LIST_STYLE_CLASSES} ${color} ${size}`;

package/src/ui-kit/Breadcrumb.tsx

@@ -7,20 +7,15 @@ export interface BreadcrumbProps extends LinkProps {
 }
 
 export const Breadcrumb = JSX<BreadcrumbProps>(
-  ({ text, href, target, onClick, className, children }) => {
+  ({ text, href, target, onClick, className = '', children }) => {
     if (href) {
       return (
-        <a
-          className={`no-underline ${className || ''}`}
-          href={href}
-          target={target}
-          onClick={onClick}
-        >
-          <span className={`${className || ''}`}>{text || children}</span>
+        <a className={`no-underline ${className}`} href={href} target={target} onClick={onClick}>
+          <span className={className}>{text || children}</span>
         </a>
       );
     } else {
-      return <span className={`${className || ''}`}>{text || children}</span>;
+      return <span className={className}>{text || children}</span>;
     }
   },
 );

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

@@ -0,0 +1,16 @@
+import '../../setup-fixture';
+
+import { Button } from './Button';
+
+export default {
+  primary: (
+    <div className="p-2">
+      <Button
+        href="https://www.rshb.ru/"
+        target="_blank"
+        text="Оформить кредит"
+        version="primary"
+      />
+    </div>
+  ),
+};

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

@@ -1,7 +1,7 @@
+import React from 'react';
 import '../../setup-fixture';
-
-import { Button } from './Button';
 import { Icon } from '../Icon/Icon';
+import { Button } from './Button';
 
 export default {
   all: (
@@ -114,39 +114,69 @@ export default {
   ),
   'primary (Private clients)': (
     <div data-theme="pc">
-      <Button href="https://www.rshb.ru/" target="_blank" text="Сайт РСХБ" version="primary" />
+      <Button
+        href="https://www.rshb.ru/"
+        target="_blank"
+        text="Оформить кредит"
+        version="primary"
+      />
     </div>
   ),
   'secondary (Private clients)': (
     <div data-theme="pc">
-      <Button href="https://www.rshb.ru/" target="_blank" text="Сайт РСХБ" version="secondary" />
+      <Button
+        href="https://www.rshb.ru/"
+        target="_blank"
+        text="Оформить кредит"
+        version="secondary"
+      />
     </div>
   ),
   'primary (Business clients)': (
     <div data-theme="bc">
-      <Button href="https://www.rshb.ru/" target="_blank" text="Сайт РСХБ" version="primary" />
+      <Button
+        href="https://www.rshb.ru/"
+        target="_blank"
+        text="Оформить кредит"
+        version="primary"
+      />
     </div>
   ),
   'secondary (Business clients)': (
     <div data-theme="bc">
-      <Button href="https://www.rshb.ru/" target="_blank" text="Сайт РСХБ" version="secondary" />
+      <Button
+        href="https://www.rshb.ru/"
+        target="_blank"
+        text="Оформить кредит"
+        version="secondary"
+      />
     </div>
   ),
   'primary (Ecosystem own)': (
     <div data-theme="eo">
-      <Button href="https://www.rshb.ru/" target="_blank" text="Сайт РСХБ" version="primary" />
+      <Button
+        href="https://www.rshb.ru/"
+        target="_blank"
+        text="Оформить кредит"
+        version="primary"
+      />
     </div>
   ),
   'secondary (Ecosystem own)': (
     <div data-theme="eo">
-      <Button href="https://www.rshb.ru/" target="_blank" text="Сайт РСХБ" version="secondary" />
+      <Button
+        href="https://www.rshb.ru/"
+        target="_blank"
+        text="Оформить кредит"
+        version="secondary"
+      />
     </div>
   ),
   'primary (disabled)': (
     <Button
       href="https://www.rshb.ru/"
       target="_blank"
-      text="Сайт РСХБ"
+      text="Оформить кредит"
       version="primary"
       disabled
     />
@@ -155,7 +185,7 @@ export default {
     <Button
       href="https://www.rshb.ru/"
       target="_blank"
-      text="Сайт РСХБ"
+      text="Оформить кредит"
       version="secondary"
       disabled
     />

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

@@ -0,0 +1,97 @@
+/* eslint-disable max-lines-per-function */
+/* eslint-disable complexity */
+
+import { JSX } from '@redneckz/uni-jsx';
+import type { ButtonVersion } from '../../model/ButtonVersion';
+import type { ButtonProps, ButtonWithIconProps } from './ButtonProps';
+
+const buttonStyleMap: Record<ButtonVersion, string> = {
+  primary: 'text-white bg-primary-main hover:bg-primary-hover active:bg-primary-active',
+  secondary:
+    'text-primary-main bg-secondary-light hover:bg-secondary-hover active:bg-secondary-active',
+};
+
+const buttonDisabledStyleMap: Record<ButtonVersion, string> = {
+  primary: 'bg-secondary-dark text-secondary-text',
+  secondary: 'bg-secondary-light text-secondary-text',
+};
+
+const styleButton = 'w-full text-center font-sans select-none';
+
+export interface ButtonCommonProps extends ButtonProps, ButtonWithIconProps {}
+
+export type ButtonInner = Pick<ButtonCommonProps, 'text' | 'aboveText' | 'appendLeft' | 'rounded'>;
+
+export const Button = JSX<ButtonCommonProps>(
+  ({
+    className,
+    text,
+    aboveText,
+    appendLeft,
+    href,
+    target,
+    onClick,
+    children,
+    disabled,
+    rounded,
+    version = 'none',
+    ariaLabel,
+    ...rest
+  }) => {
+    const buttonInner = children ?? (
+      <ButtonInner text={text} aboveText={aboveText} appendLeft={appendLeft} rounded={rounded} />
+    );
+
+    if (disabled) {
+      return (
+        <div
+          role="button"
+          aria-disabled="true"
+          aria-label={ariaLabel}
+          tabIndex="-1"
+          className={`inline-block ${styleButton} ${buttonDisabledStyleMap[version] || ''} ${
+            rounded ? 'rounded-full' : 'rounded-md'
+          } ${className || ''}`}
+        >
+          {buttonInner}
+        </div>
+      );
+    }
+
+    return (
+      <a
+        className={`${styleButton} inline-block cursor-pointer no-underline ${
+          buttonStyleMap[version] || ''
+        } ${rounded ? 'rounded-full' : 'rounded-md'} ${className || ''}`}
+        href={href}
+        target={target}
+        onClick={onClick}
+        aria-label={ariaLabel}
+        role={!href ? 'button' : 'link'}
+        {...rest}
+      >
+        {buttonInner}
+      </a>
+    );
+  },
+);
+
+export const ButtonInner = JSX<ButtonInner>(({ text, aboveText, appendLeft, rounded }) => {
+  const withoutText = !text && !aboveText && Boolean(appendLeft);
+
+  const buttonInnerClasses = `flex items-center justify-center ${
+    withoutText ? 'h-12 w-12' : `px-9 gap-2 ${aboveText ? 'py-2' : 'py-3.5'}`
+  } ${rounded ? 'rounded-full' : ''}`;
+
+  return (
+    <div className={buttonInnerClasses}>
+      {appendLeft ? appendLeft : null}
+      {withoutText ? null : (
+        <div>
+          <div className="text-m-2xs text-left">{aboveText}</div>
+          <div className="text-m-button font-medium text-left">{text}</div>
+        </div>
+      )}
+    </div>
+  );
+});

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

@@ -1,3 +1,6 @@
+/* eslint-disable max-lines-per-function */
+/* eslint-disable complexity */
+
 import { JSX } from '@redneckz/uni-jsx';
 import type { ButtonVersion } from '../../model/ButtonVersion';
 import type { ButtonProps, ButtonWithIconProps } from './ButtonProps';
@@ -13,7 +16,7 @@ const buttonDisabledStyleMap: Record<ButtonVersion, string> = {
   secondary: 'bg-secondary-light text-secondary-text',
 };
 
-const styleButton = 'inline-block text-center font-sans select-none';
+const styleButton = 'text-center font-sans select-none';
 
 export interface ButtonCommonProps extends ButtonProps, ButtonWithIconProps {}
 
@@ -46,7 +49,7 @@ export const Button = JSX<ButtonCommonProps>(
           aria-disabled="true"
           aria-label={ariaLabel}
           tabIndex="-1"
-          className={`${styleButton} ${buttonDisabledStyleMap[version] || ''} ${
+          className={`inline-block ${styleButton} ${buttonDisabledStyleMap[version] || ''} ${
             rounded ? 'rounded-full' : 'rounded-md'
           } ${className || ''}`}
         >
@@ -57,9 +60,9 @@ export const Button = JSX<ButtonCommonProps>(
 
     return (
       <a
-        className={`${styleButton} cursor-pointer no-underline ${buttonStyleMap[version] || ''} ${
-          rounded ? 'rounded-full' : 'rounded-md'
-        } ${className || ''}`}
+        className={`${styleButton} inline-block cursor-pointer no-underline ${
+          buttonStyleMap[version] || ''
+        } ${rounded ? 'rounded-full' : 'rounded-md'} ${className || ''}`}
         href={href}
         target={target}
         onClick={onClick}
@@ -77,18 +80,18 @@ export const ButtonInner = JSX<ButtonInner>(({ text, aboveText, appendLeft, roun
   const withoutText = !text && !aboveText && Boolean(appendLeft);
 
   const buttonInnerClasses = `flex items-center justify-center ${
-    withoutText ? 'h-12 w-12 min-h-12 min-w-12' : `px-8 gap-2 ${aboveText ? 'py-2' : 'py-[13px]'}`
+    withoutText ? 'h-12 w-12' : `px-9 gap-2 ${aboveText ? 'py-2' : 'py-3.5'}`
   } ${rounded ? 'rounded-full' : ''}`;
 
   return (
     <div className={buttonInnerClasses}>
       {appendLeft ? appendLeft : null}
-      {!withoutText ? (
+      {withoutText ? null : (
         <div>
           <div className="text-2xs text-left">{aboveText}</div>
-          <div className="text-sm font-medium text-left">{text}</div>
+          <div className="text-button font-medium text-left">{text}</div>
         </div>
-      ) : null}
+      )}
     </div>
   );
 });