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

package/mobile/src/ui-kit/Icon/IconProps.ts

@@ -1,154 +1,6 @@
-/**
- * Icons sorted by name
- */
-export enum IconMap {
-  'ActualBalanceIcon',
-  'AppleIcon',
-  'AtmIcon',
-  'BankIcon',
-  'BurgerIcon',
-  'BurgerIconWhite',
-  'Calendar2Icon',
-  'CalendarCircleIcon',
-  'CalendarIcon',
-  'CalendarTickIcon',
-  'CalendarWhiteIcon',
-  'CardIcon',
-  'CardPosIcon',
-  'CardTickIcon',
-  'CardWithGemIcon',
-  'ChartSquareIcon',
-  'ClockIcon',
-  'CloseIcon',
-  'ComfortableCompIcon',
-  'CreditCardsIcon',
-  'DocIcon',
-  'DocumentTextIcon',
-  'DollarIcon',
-  'EarthIcon',
-  'EmptyWalletChangeIcon',
-  'EmptyWalletIcon',
-  'EmptyWalletWhiteIcon',
-  'EuroIcon',
-  'GeolocationIcon',
-  'GlassIcon',
-  'GlobalIcon',
-  'GridIcon',
-  'GridIconWhite',
-  'InterestGrowthIcon',
-  'InterestIcon',
-  'JCBIcon',
-  'LoupeIcon',
-  'MasterCardIcon',
-  'MinusIcon',
-  'MirIcon',
-  'MoneyIcon',
-  'MoneyInsuranceIcon',
-  'MonitorMobileIcon',
-  'NewDocIcon',
-  'OfficeIcon',
-  'OkIcon',
-  'PassSendIcon',
-  'PercentageRoundIcon',
-  'PercentageSquareIcon',
-  'PercentageSquareWhiteIcon',
-  'PersonalCardIcon',
-  'PlayMarketIcon',
-  'PlusIcon',
-  'Profile2UserIcon',
-  'ProfileIcon',
-  'RoundRubleIcon',
-  'SafeIcon',
-  'ShieldTickIcon',
-  'SignDocsIcon',
-  'SmallClockIcon',
-  'TelegramIcon',
-  'UnionPayIcon',
-  'UserTickIcon',
-  'VisaIcon',
-  'VKIcon',
-  'WalletAddIcon',
-  'WalletAdd2Icon',
-  'WalletIcon',
-  'WalletWithMoneyIcon',
-}
+import type { IconName } from '../../icons/IconName';
 
-/**
- * @title Иконка
- * @enumNames [
- *    "Деньги",
- *    "Лого «Apple»",
- *    "Банкомат",
- *    "Банк",
- *    "Бургер",
- *    "Бургер (белый)",
- *    "Календарь 2",
- *    "Скруглённый календарь",
- *    "Календарь",
- *    "Календарь с галочкой",
- *    "Календарь белый",
- *    "Кред. карта",
- *    "Кред. карта под наклоном",
- *    "Кред. карта с галочкой",
- *    "Карта с драгоценностями",
- *    "Деньги внутри кошелька",
- *    "Часы",
- *    "Крестик",
- *    "Кресло",
- *    "Скидка",
- *    "Кредитные карты",
- *    "Огромная скидка",
- *    "Документ",
- *    "Документ с текстом",
- *    "Доллар",
- *    "Пустой кошелёк с возвратом",
- *    "Пустой кошелёк",
- *    "Пустой кошелёк (белый)",
- *    "Евро",
- *    "Геолокация",
- *    "Зеркало",
- *    "Глобус",
- *    "Сетка",
- *    "Сетка (белая)",
- *    "Диаграмма роста",
- *    "Скидка",
- *    "JCB",
- *    "Лупа",
- *    "MasterCard",
- *    "Минус",
- *    "МИР",
- *    "Деньги",
- *    "Денежное страхование",
- *    "Монитор и мобильный",
- *    "Новый документ",
- *    "Офис",
- *    "Лого «Одноклассники»",
- *    "Бизнес",
- *    "Проценты (круг.)",
- *    "Проценты",
- *    "Проценты белые",
- *    "Персональная карта",
- *    "Лого «PlayMarket»",
- *    "Плюс",
- *    "Профиль, 2 персоны",
- *    "Профиль",
- *    "Рубль (круг.)",
- *    "Сейф",
- *    "Безопасность",
- *    "Подписанные документы",
- *    "Маленькие часы",
- *    "Лого «Telegram»",
- *    "UnionPay",
- *    "Пользователь",
- *    "Visa",
- *    "Лого «VK»",
- *    "Пополнение карты",
- *    "Кошелёк с плюсом",
- *    "Кошелёк",
- *    "Кошелёк с деньгами",
- *  ]
- */
-export type IconName = keyof typeof IconMap;
+export type { IconName };
 
 export interface IconProps {
   className?: string;

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

@@ -33,6 +33,7 @@ export const Logo = JSX<Partial<LogoProps>>(
         className={`inline-flex items-center font-sans no-underline ${className}`}
         href={href || 'https://rshb.ru/'}
         target={targetBlank ? '_blank' : '_self'}
+        aria-label="Россельхозбанк"
       >
         <SVG
           className={`${SVG_COLOR[bgColor]} w-10 h-[38px]`}

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

@@ -0,0 +1,62 @@
+import { JSX } from '@redneckz/uni-jsx';
+import type { SwipeListControlProps } from './SwipeListControlProps';
+import { getScrollPoints } from './utils/getScrollPoints';
+import { getIndexParts } from './utils/getIndexParts';
+import { SwipeListControlList } from './SwipeListControlList';
+import { SwipeListControlDots } from './SwipeListControlDots';
+import { DEFAULT_GAP, DEFAULT_PADDING } from './constants';
+
+export const SwipeListControl = JSX<SwipeListControlProps>(
+  ({
+    className,
+    context,
+    children,
+    gap = DEFAULT_GAP,
+    padding = DEFAULT_PADDING,
+    showDots = true,
+  }) => {
+    const [activeIndex, setActiveIndex] = context.useState<number>(0);
+    const [indexFraction, setIndexFraction] = context.useState<number>(0);
+
+    const handleScroll = (e: UIEvent) => {
+      const { scrollLeft, clientWidth, childElementCount, scrollWidth, children } =
+        e.currentTarget as HTMLElement;
+
+      // horizontal PADDING / 2 to compensate padding-margin combo of child container
+      // without CSS calc function, as wrapper element gets bigger in the DOM, remaining same visually
+      const itemWidth = (children[0] as HTMLElement).offsetWidth - padding / 2;
+      const scrollPoints = getScrollPoints({
+        gap,
+        padding,
+        clientWidth,
+        scrollWidth,
+        childElementCount,
+        itemWidth,
+      });
+
+      const { index, fraction } = getIndexParts(scrollLeft, scrollPoints);
+      setActiveIndex(index);
+      setIndexFraction(fraction);
+    };
+
+    return (
+      <div className={className}>
+        <SwipeListControlList
+          gap={gap}
+          padding={padding}
+          activeIndex={activeIndex}
+          onScroll={handleScroll}
+        >
+          {children}
+        </SwipeListControlList>
+        <SwipeListControlDots
+          activeIndex={activeIndex}
+          indexFraction={indexFraction}
+          showDots={showDots}
+        >
+          {children}
+        </SwipeListControlDots>
+      </div>
+    );
+  },
+);

package/mobile/src/ui-kit/SwipeListControl/SwipeListControlDots.tsx

@@ -0,0 +1,51 @@
+import { JSX } from '@redneckz/uni-jsx';
+
+const DOT_STYLES = 'bg-primary-main opacity-30 w-1.5 h-1.5 min-w-1.5 min-h-1.5 rounded-full';
+const BASE_DOT_WIDTH = 6;
+const ACTIVE_DOT_WIDTH_CHANGE = 16;
+const BASE_DOT_OPACITY = 0.3;
+const ACTIVE_DOT_OPACITY_CHANGE = 0.7;
+
+export interface SwipeListControlDotsProps {
+  activeIndex: number;
+  indexFraction: number;
+  showDots?: boolean;
+}
+
+export const SwipeListControlDots = JSX<SwipeListControlDotsProps>(
+  ({ children, activeIndex, indexFraction, showDots }) => {
+    return showDots && children?.length ? (
+      <div className="flex gap-2 mx-auto mt-[22px] w-fit">
+        {children?.map((_, idx) => (
+          <div
+            key={String(idx)}
+            className={`${DOT_STYLES}`}
+            style={getDotStyles(idx, activeIndex, indexFraction)}
+            aria-hidden
+          />
+        ))}
+      </div>
+    ) : null;
+  },
+);
+
+const getDotStyles = (
+  currentIdx: number,
+  activeIndex: number,
+  indexFraction: number,
+): Record<string, string> | null => {
+  if (currentIdx < activeIndex || currentIdx > activeIndex + 1) return null;
+
+  const leftIndexMod = 1 - indexFraction;
+  const rightIndexMod = indexFraction;
+
+  return currentIdx === activeIndex
+    ? {
+        opacity: `${BASE_DOT_OPACITY + ACTIVE_DOT_OPACITY_CHANGE * leftIndexMod}`,
+        width: `${BASE_DOT_WIDTH + ACTIVE_DOT_WIDTH_CHANGE * leftIndexMod}px`,
+      }
+    : {
+        opacity: `${BASE_DOT_OPACITY + ACTIVE_DOT_OPACITY_CHANGE * rightIndexMod}`,
+        width: `${BASE_DOT_WIDTH + ACTIVE_DOT_WIDTH_CHANGE * rightIndexMod}px`,
+      };
+};

package/mobile/src/ui-kit/SwipeListControl/SwipeListControlItem.tsx

@@ -0,0 +1,20 @@
+import { JSX } from '@redneckz/uni-jsx';
+
+/**
+ * @title Элемент списка
+ */
+export interface SwipeListControlItemProps {
+  className?: string;
+  style?: Record<string, string>;
+  'aria-current'?: boolean;
+}
+
+export const SwipeListControlItem = JSX<SwipeListControlItemProps>(
+  ({ className = '', children, ...rest }) => {
+    return (
+      <div className={`snap-center snap-always min-w-full ${className}`} role="listitem" {...rest}>
+        {children}
+      </div>
+    );
+  },
+);

package/mobile/src/ui-kit/SwipeListControl/SwipeListControlList.tsx

@@ -0,0 +1,48 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { SwipeListControlItem } from './SwipeListControlItem';
+import { getContainerStyle } from './utils/getContainerStyle';
+import { DEFAULT_GAP, DEFAULT_PADDING } from './constants';
+import { SwipeContainer } from './SwipeListControlProps';
+
+/**
+ * @title Список
+ */
+export interface SwipeListControlListProps extends SwipeContainer {
+  className?: string;
+  activeIndex: number;
+  onScroll?: (e: UIEvent) => void;
+}
+
+export const SwipeListControlList = JSX<SwipeListControlListProps>(
+  ({
+    className = '',
+    children,
+    activeIndex,
+    onScroll,
+    gap = DEFAULT_GAP,
+    padding = DEFAULT_PADDING,
+  }) => {
+    return (
+      <div
+        className={`overflow-auto flex horizontal-list no-scrollbar ${className}`}
+        style={{ ...getContainerStyle(padding), gap: `${gap}px` }}
+        role="list"
+        onScroll={onScroll}
+      >
+        {children?.length ? (
+          children?.map((child, idx) => (
+            <SwipeListControlItem
+              key={String(idx)}
+              style={getContainerStyle(padding / 4)}
+              aria-current={Boolean(activeIndex === idx)}
+            >
+              {child}
+            </SwipeListControlItem>
+          ))
+        ) : (
+          <SwipeListControlItem>{children}</SwipeListControlItem>
+        )}
+      </div>
+    );
+  },
+);

package/mobile/src/ui-kit/SwipeListControl/SwipeListControlProps.ts

@@ -0,0 +1,19 @@
+import type { UniBlockProps } from '../../types';
+
+/**
+ * @title Контейнер
+ */
+export interface SwipeContainer {
+  /** @title Расстояние между элементами */
+  gap?: number;
+  /** @title Отступы */
+  padding?: number;
+}
+
+/**
+ * @title Swipe-контроллер
+ */
+export interface SwipeListControlProps extends SwipeContainer, UniBlockProps {
+  /** @title Точки-индикаторы */
+  showDots?: boolean;
+}

package/mobile/src/ui-kit/SwipeListControl/constants.ts

@@ -0,0 +1,10 @@
+// column-gap between children of SwipeListControl container
+export const DEFAULT_GAP = 14;
+/*
+  Horizontal padding used on a container above SwipeListControl.
+  Same value used on a SwipeListControlChildren container to compensate it
+  and get rid of a clipping effect caused by overflow: hidden.
+ */
+export const DEFAULT_PADDING = 16;
+
+// Classes used to compensate outer container padding, so that child elements won't be clipped

package/mobile/src/ui-kit/SwipeListControl/utils/getContainerStyle.ts

@@ -0,0 +1,9 @@
+// styles used to compensate outer container padding to get rid of clipping effect
+export const getContainerStyle = (padding: number): Record<string, string> => {
+  return {
+    marginLeft: `${-padding}px`,
+    marginRight: `${-padding}px`,
+    paddingLeft: `${padding}px`,
+    paddingRight: `${padding}px`,
+  };
+};

package/mobile/src/ui-kit/SwipeListControl/utils/getIndexParts.spec.ts

@@ -0,0 +1,19 @@
+import { getIndexParts } from './getIndexParts';
+
+// pre-baked array containing [start, end] boundary scrollLeft values for scrollableElements
+const scrollPoints: [number, number][] = [
+  [0, 100],
+  [100, 200],
+];
+
+describe('getIndexParts', () => {
+  it("should return index and it's decimal part if scrollLeft lies within given intervals, right boundary non-inclusive", () => {
+    expect(getIndexParts(0, scrollPoints)).toEqual({ index: 0, fraction: 0 });
+    expect(getIndexParts(199, scrollPoints)).toEqual({ index: 1, fraction: 0.99 });
+  });
+
+  it('should return index equal -1 and fraction equal 0 if scrollLeft is outside given intervals', () => {
+    expect(getIndexParts(-1, scrollPoints)).toEqual({ index: -1, fraction: 0 });
+    expect(getIndexParts(200, scrollPoints)).toEqual({ index: -1, fraction: 0 });
+  });
+});

package/mobile/src/ui-kit/SwipeListControl/utils/getIndexParts.ts

@@ -0,0 +1,20 @@
+/*
+  Returns object containing whole index part, and it's decimal part for a given
+  scrollLeft value of a container and an array of tuple containing values of a
+  start and end boundaries of a scrollable child, right boundary non-inclusive.
+  Returns object with index equal -1 and fraction equal 0 if scrollLeft is outside given scrollPoints
+ */
+export const getIndexParts = (
+  scrollLeft: number,
+  scrollPoints: [number, number][],
+): {
+  index: number;
+  fraction: number;
+} => {
+  const index = scrollPoints.findIndex(([start, end]) => start <= scrollLeft && scrollLeft < end);
+  if (index < 0) return { index, fraction: 0 };
+
+  const [start, end] = scrollPoints[index];
+  const fraction = (scrollLeft - start) / (end - start);
+  return { index, fraction };
+};

package/mobile/src/ui-kit/SwipeListControl/utils/getScrollPoints.spec.ts

@@ -0,0 +1,24 @@
+import { getScrollPoints } from './getScrollPoints';
+
+const props = {
+  gap: 14,
+  padding: 16,
+  clientWidth: 500,
+  scrollWidth: 1914,
+  childElementCount: 4,
+  itemWidth: 460, // clientWidth - 1 * padding - gap = visible 10px of adjacent element
+};
+
+// pre-baked array containing accurate [start, end] boundary scrollLeft values for scrollableElements
+const scrollPoints: [number, number][] = [
+  [0, 470],
+  [470, 944],
+  [944, 1414],
+  [1414, 1914],
+];
+
+describe('getScrollPoints', () => {
+  it('should return array containing scroll breakpoints delimiting each child', () => {
+    expect(getScrollPoints(props)).toEqual(scrollPoints);
+  });
+});

package/mobile/src/ui-kit/SwipeListControl/utils/getScrollPoints.ts

@@ -0,0 +1,41 @@
+/*
+ Calculates array of breakpoints for each scrollable element in container.
+ Returns array of tuples consisting of [start, end] boundary scrollLeft values.
+*/
+export const getScrollPoints = ({
+  gap,
+  padding,
+  clientWidth,
+  scrollWidth,
+  childElementCount,
+  itemWidth,
+}: {
+  gap: number;
+  padding: number;
+  clientWidth: number;
+  scrollWidth: number;
+  childElementCount: number;
+  itemWidth: number;
+}) => {
+  const scrollItemWidth = itemWidth + gap;
+  const scrollableDistance = scrollWidth - clientWidth;
+  const edgeScrollDistance = clientWidth - gap - padding;
+
+  const lastScrollableIdx = childElementCount - 2;
+  const scrollPoints: [number, number][] = new Array(childElementCount)
+    .fill(0)
+    .map((_, idx) =>
+      idx === 0 || idx === lastScrollableIdx
+        ? [
+            idx > 0 ? scrollableDistance - edgeScrollDistance : 0,
+            idx > 0 ? scrollableDistance : edgeScrollDistance,
+          ]
+        : [
+            (idx - 1) * scrollItemWidth + edgeScrollDistance,
+            idx * scrollItemWidth + edgeScrollDistance,
+          ],
+    );
+  scrollPoints[childElementCount - 1] = [scrollableDistance, scrollWidth];
+
+  return scrollPoints;
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@redneckz/wildless-cms-uni-blocks",
-  "version": "0.2.113",
+  "version": "0.2.116",
   "private": false,
   "license": "MIT",
   "author": "ЦК",
@@ -8,6 +8,10 @@
   "type": "module",
   "main": "./dist/index.js",
   "types": "./lib/index.d.ts",
+  "engines": {
+    "npm": ">=7.0.0",
+    "node": ">=16.0.0"
+  },
   "exports": {
     ".": {
       "import": "./lib/index.js",
@@ -73,27 +77,24 @@
     "start": "npm run cosmos",
     "start:mobile": "npm run cosmos:mobile",
     "prebuild": "rimraf ./mobile/src",
-    "build": "npm run build:lib && npm run build:commonjs && npm run bundle && npm run build:style && npm run build:design && npm run build:mobile",
+    "build": "npm run build:lib && npm run build:commonjs && npm run bundle && npm run build:style && npm run build:design && npm run size && npm run build:mobile",
     "prebuild:mobile": "rimraf ./mobile/src && node ./scripts/prebuild-mobile.js ./src ./mobile",
     "build:mobile": "npm run --prefix ./mobile build",
-    "postbuild": "npm run size",
     "build:design": "npm run cosmos:export || exit 0",
     "postbuild:design": "copyfiles --up 1 \"./docs/**/*\" ./build || exit 0",
     "build:lib": "rimraf ./lib && tsc --build --verbose",
-    "postbuild:lib": "replace-in-file --configFile=replace-config.lib.cjs --verbose",
+    "postbuild:lib": "replace-in-file --configFile=replace-config.lib.cjs",
     "build:commonjs": "rimraf ./dist && tsc --module commonjs --noImplicitUseStrict --outDir ./dist",
     "bundle": "rimraf ./bundle && rollup --config rollup.config.js && npm run build:schema",
-    "build:schema": "ts-json-schema-generator --path './src/**/*Content.ts' --additional-properties --unstable --validation-keywords enumNames --validation-keywords required --minify --no-type-check -o ./bundle/blocks.schema.json",
-    "postbuild:schema": "node ./scripts/sort-json-schema.js ./bundle/blocks.schema.json",
+    "prebuild:schema": "npm run build:icons",
+    "build:schema": "node ./scripts/build-schema.js ./bundle/blocks.schema.json",
     "build:style": "postcss ./src/**/*.css --env production --dir ./lib",
-    "build:icons": "svgo -f ./src/icons -o ./cosmos-static/icons",
+    "build:icons": "node ./scripts/prepare-icons.js ./src/icons ./cosmos-static/icons > ./src/icons/IconName.ts",
     "size": "size-limit",
     "lint": "eslint ./src",
     "pretest": "npm run lint",
     "test": "jest --coverage",
-    "precosmos": "npm run build:icons",
     "cosmos": "cosmos",
-    "precosmos:mobile": "npm run build:icons",
     "cosmos:mobile": "cosmos --config cosmos.config.mobile.json",
     "precosmos:export": "npm run build:icons",
     "cosmos:export": "rimraf ./build && cosmos-export && cosmos-export --config cosmos.config.mobile.json",
@@ -123,14 +124,14 @@
     "copyfiles": "^2.4.1",
     "css-loader": "^6.7.1",
     "cssnano": "^5.1.11",
-    "eslint": "^8.19.0",
+    "eslint": "^8.21.0",
     "eslint-plugin-import": "^2.26.0",
     "eslint-plugin-local-eslint-rules": "./eslint-rules",
+    "eslint-plugin-react": "^7.30.1",
     "html-webpack-plugin": "^5.5.0",
     "husky": "^8.0.1",
     "jest": "^28.1.3",
     "lint-staged": "^13.0.1",
-    "npm-watch": "^0.11.0",
     "postcss": "^8.4.14",
     "postcss-cli": "^9.1.0",
     "postcss-loader": "^7.0.0",
@@ -162,13 +163,11 @@
     }
   ],
   "lint-staged": {
-    "src/**/*.{js,jsx,ts,tsx,css}": [
-      "prettier --write"
-    ],
     "src/**/*.{js,jsx,ts,tsx}": [
       "eslint"
     ],
-    "*.{js,jsx,ts,tsx,css,json}": [
+    "src/**/*.{js,jsx,ts,tsx,css}": [
+      "prettier --write",
       "npm run cosmos:export",
       "git add ./docs"
     ]

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

@@ -1,6 +1,6 @@
 import { context } from '../../setup-fixture';
 import { HEADLINE } from '../Headline/Headline.fixture';
-import { LINK_DOCS } from '../LinkDocs/LinkDocs.fixture';
+import { linkDocsContentExample } from '../LinkDocs/linkDocsContentExample';
 import { PICTURE_TEXT } from '../PictureText/PictureText.fixture';
 import { TEXT_BLOCK } from '../TextBlock/TextBlock.fixture';
 import type { AccordionProps } from './Accordion';
@@ -29,7 +29,7 @@ const PICTURE_TEXT_ACCORDION_BLOCK: PictureTextAccordionBlock = {
 
 const LINK_DOCS_ACCORDION_BLOCK: LinkDocsAccordionBlock = {
   accordionBlockType: 'LinkDocs',
-  ...LINK_DOCS,
+  ...linkDocsContentExample,
   title: '',
 };
 

package/src/components/Accordion/Accordion.fixture.tsx

@@ -1,6 +1,6 @@
 import { context } from '../../setup-fixture';
 import { HEADLINE } from '../Headline/Headline.fixture';
-import { LINK_DOCS } from '../LinkDocs/LinkDocs.fixture';
+import { linkDocsContentExample } from '../LinkDocs/linkDocsContentExample';
 import { PICTURE_TEXT } from '../PictureText/PictureText.fixture';
 import { TEXT_BLOCK } from '../TextBlock/TextBlock.fixture';
 import type { AccordionProps } from './Accordion';
@@ -29,7 +29,7 @@ const PICTURE_TEXT_ACCORDION_BLOCK: PictureTextAccordionBlock = {
 
 const LINK_DOCS_ACCORDION_BLOCK: LinkDocsAccordionBlock = {
   accordionBlockType: 'LinkDocs',
-  ...LINK_DOCS,
+  ...linkDocsContentExample,
   title: '',
 };
 

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

@@ -1,6 +1,6 @@
 import { JSX } from '@redneckz/uni-jsx';
 import type { UniBlockProps } from '../../types';
-import { Title } from '../../ui-kit/Title/Title';
+import { Heading } from '../../ui-kit/Heading/Heading';
 import type { AccordionContent } from './AccordionContent';
 import { AccordionItem } from './AccordionItem';
 
@@ -14,11 +14,7 @@ export const Accordion = JSX<AccordionProps>(
           bordered ? 'px-4' : ''
         } ${className}`}
       >
-        {title ? (
-          <Title className="m-0 mb-2 font-medium text-center" size="M">
-            {title}
-          </Title>
-        ) : null}
+        {title ? <Heading type="h3" className="mb-2 text-center" text={title} /> : null}
         {description ? <div className="mb-5 text-m-md text-center">{description}</div> : null}
         {accordionItems?.length ? (
           <ul className="list-none m-0 p-0">

package/src/components/Accordion/Accordion.tsx

@@ -1,6 +1,6 @@
 import { JSX } from '@redneckz/uni-jsx';
 import type { UniBlockProps } from '../../types';
-import { Title } from '../../ui-kit/Title/Title';
+import { Heading } from '../../ui-kit/Heading/Heading';
 import type { AccordionContent } from './AccordionContent';
 import { AccordionItem } from './AccordionItem';
 
@@ -9,7 +9,7 @@ export interface AccordionProps extends AccordionContent, UniBlockProps {}
 export const Accordion = JSX<AccordionProps>(({ title, accordionItems, context, className }) => {
   return (
     <section className={`p-[50px] font-sans bg-white text-primary-text ${className || ''}`}>
-      {title ? <Title className="m-0 mb-2.5">{title}</Title> : null}
+      {title ? <Heading type="h4" className="mb-2.5" text={title} /> : null}
       {accordionItems?.length ? (
         <ul className="list-none m-0 p-0">
           {accordionItems.map((item, i) => (