@redneckz/wildless-cms-uni-blocks 0.6.46 → 0.6.48

package/mobile/src/components/Header/DropdownMenu.tsx

@@ -17,46 +17,48 @@ interface DropdownMenuProps {
   bgColor?: BgColorVersion;
 }
 
-export const DropdownMenu = JSX<DropdownMenuProps>(({ className, items, activeItem, bgColor }) => {
-  const link = useLink();
+export const DropdownMenu = JSX<DropdownMenuProps>(
+  ({ className = '', items, activeItem, bgColor }) => {
+    const link = useLink();
 
-  const [visible, setVisible] = useState(false);
-  const handleToggle = useCallback(() => setVisible((_) => !_), []);
+    const [visible, setVisible] = useState(false);
+    const handleToggle = useCallback(() => setVisible((_) => !_), []);
 
-  const handleClickOutside = useCallback(() => setVisible(false), []);
-  const ref = useOutsideClick<HTMLDivElement>(handleClickOutside);
+    const handleClickOutside = useCallback(() => setVisible(false), []);
+    const ref = useOutsideClick<HTMLDivElement>(handleClickOutside);
 
-  return (
-    <div
-      className={`${visible ? 'bg-white rounded-md shadow-blue-gray/24' : ''} ${className || ''}`}
-      ref={ref}
-    >
-      <button
-        className="flex justify-between items-center cursor-pointer h-6 ml-6"
-        aria-label={`${visible ? 'Скрыть другие разделы' : 'Показать другие разделы'}`}
-        onClick={handleToggle}
-      >
-        {Array(3).fill(bgColor).map(renderDot)}
-      </button>
+    return (
       <div
-        className={`flex flex-col rounded-md bg-white p-6 pb-2 ${visible ? '' : 'hidden'}`}
-        aria-hidden={!visible}
+        className={`${visible ? 'bg-white rounded-md shadow-blue-gray' : ''} ${className}`}
+        ref={ref}
       >
-        {items?.map((item, i) => (
-          <a
-            key={item.href || String(i)}
-            className={`text-l-light pb-4 hover:text-primary-main ${
-              item === activeItem ? 'text-primary-main' : ''
-            }`}
-            {...link(item)}
-          >
-            {item.text}
-          </a>
-        ))}
+        <button
+          className="flex justify-between items-center cursor-pointer h-6 ml-6"
+          aria-label={`${visible ? 'Скрыть другие разделы' : 'Показать другие разделы'}`}
+          onClick={handleToggle}
+        >
+          {Array(3).fill(bgColor).map(renderDot)}
+        </button>
+        <div
+          className={`flex flex-col rounded-md bg-white p-6 pb-2 ${visible ? '' : 'hidden'}`}
+          aria-hidden={!visible}
+        >
+          {items?.map((item, i) => (
+            <a
+              key={item.href || String(i)}
+              className={`text-l-light pb-4 hover:text-primary-main ${
+                item === activeItem ? 'text-primary-main' : ''
+              }`}
+              {...link(item)}
+            >
+              {item.text}
+            </a>
+          ))}
+        </div>
       </div>
-    </div>
-  );
-});
+    );
+  },
+);
 
 const renderDot = (bgColor: BgColorVersion, i: number) => (
   <div key={String(i)} className={`w-[3px] h-[3px] rounded mr-1 ${DOT_BG_COLORS_MAP[bgColor]}`} />

package/mobile/src/components/Header/HeaderBurger.tsx

@@ -23,11 +23,11 @@ export const HeaderBurger = JSX<HeaderBurgerProps>(
           className="absolute top-4 right-4 border-none bg-transparent cursor-pointer"
           onClick={onClick}
         >
-          <Img image="CloseIcon" width="24" height="24" asSVG />
+          <Img image={{ icon: 'CloseIcon' }} width="24" height="24" asSVG />
         </button>
         <button className="flex items-center text-s p-0 mb-4 bg-transparent cursor-pointer">
           <Img
-            image="GeolocationIcon"
+            image={{ icon: 'GeolocationIcon' }}
             width="20"
             height="20"
             className="text-primary-main box-border mr-2"

package/mobile/src/components/InsuranceAmountBlock/InsuranceAmountBlockInner.tsx

@@ -91,8 +91,8 @@ function renderGallery({ activeIndex, cards, selectedCardIndex, onClick }: Insur
 
 function renderNavButton({ slide, i, isActive, onClick }: NavButtonProps) {
   const btnClassName = isActive
-    ? 'shadow-dark-blue/42 border-primary-main'
-    : `ease-in duration-300 border-main-stroke`;
+    ? 'shadow-dark-blue border-primary-main'
+    : `ease-in duration-300 border-gray`;
 
   return (
     <button
@@ -132,7 +132,7 @@ function renderDoneIcon(isActive: boolean) {
   return isActive ? (
     <Img
       className={`h-6 w-6 min-w-6 min-h-6 absolute right-4 top-4`}
-      image="DoneIcon"
+      image={{ icon: 'DoneIcon' }}
       width="24"
       height="24"
     />

package/mobile/src/components/InvestmentInfo/InvestmentInfo.tsx

@@ -49,12 +49,10 @@ export const InvestmentInfo = JSX<InvestmentInfoProps>((props) => {
         {colums?.length ? (
           <div>
             <div className="flex items-end relative pl-9 pr-5 text-white">
-              {joinList(<div className="w-px h-4 bg-main-stroke" />)(
-                colums.map(renderInvestmentColumn),
-              )}
-              <div className="absolute right-[30px] w-px h-4 bg-main-stroke" />
+              {joinList(<div className="w-px h-4 bg-gray" />)(colums.map(renderInvestmentColumn))}
+              <div className="absolute right-[30px] w-px h-4 bg-gray" />
             </div>
-            <div className="border-t border-main-stroke -mt-2 ml-9 mr-8" />
+            <div className="border-t border-gray -mt-2 ml-9 mr-8" />
             <div className="flex justify-between text-primary-text mt-3 -mx-10">
               {colums.map(renderInvestmentColumnTitle)}
             </div>

package/mobile/src/components/LinkDocs/LinkDocsHorizontalList.tsx

@@ -10,7 +10,7 @@ export const LinkDocsHorizontalList = JSX<LinkDocsVerticalListProps>(
         ? documents.map((doc, i) => (
             <LinkDocsListItem
               key={String(i)}
-              className={hasBorder ? 'rounded-md border-main-stroke border border-solid p-4' : ''}
+              className={hasBorder ? 'rounded-md border-gray border border-solid p-4' : ''}
               doc={doc}
               icon={icon}
             />

package/mobile/src/components/LinkDocs/LinkDocsVerticalList.tsx

@@ -1,6 +1,6 @@
 import { JSX } from '@redneckz/uni-jsx';
-import type { LinkDocsItem } from './LinkDocsContent';
 import type { Picture } from '../../model/Picture';
+import type { LinkDocsItem } from './LinkDocsContent';
 import { LinkDocsListItem } from './LinkDocsListItem';
 
 export interface LinkDocsVerticalListProps {
@@ -20,9 +20,7 @@ export const LinkDocsVerticalList = JSX<LinkDocsVerticalListProps>(
           ? documents.map((doc, i) => (
               <div key={String(i)} role="listitem">
                 <LinkDocsListItem
-                  className={
-                    hasBorder ? 'rounded-md border-main-stroke border border-solid p-4' : ''
-                  }
+                  className={hasBorder ? 'rounded-md border-gray border border-solid p-4' : ''}
                   doc={doc}
                   icon={icon}
                 />

package/mobile/src/components/OfficeMap/OfficeMap.tsx

@@ -3,17 +3,18 @@ import type { UniBlockProps } from '../../model/JSXBlock';
 import { Icon } from '../../ui-kit/Icon/Icon';
 import { YandexMap } from '../../ui-kit/YandexMap/YandexMap';
 import { nearbyOffices } from './nearbyOffices';
-import type { OfficeMapProps, WorkScheduleWeek } from './OfficeMapContent';
+import type { OfficeMapContent, WorkScheduleWeek } from './OfficeMapContent';
 import { renderCurrentDaySchedule, renderDay, renderNearbyOffice } from './renderFunctions';
 import { useOfficeMap } from './useOfficeMap';
 
+export interface OfficeMapProps extends OfficeMapContent, UniBlockProps {}
 export const OfficeMap = JSX<UniBlockProps>(({ className = '' }) => {
   // TODO: useOfficeMap endpoint had use /api/v1/branches. This endpoint now is`t correct/
   // TODO: useOfficeMap has return MOCK OBJECT!
   // TODO: Fix this when endpoint /api/v1/branches (or new endpoint) had returning right data
   const resultOfficeMap = useOfficeMap('000');
   const { name, address, gpsLatitude, gpsLongitude, workSchedule } =
-    resultOfficeMap as OfficeMapProps;
+    resultOfficeMap as OfficeMapContent;
   const {
     workingMonday,
     workingTuesday,

package/mobile/src/components/OfficeMap/OfficeMapContent.ts

@@ -14,7 +14,10 @@ export type WorkSchedule = {
   workingSunday: boolean;
 };
 
-export interface OfficeMapProps {
+/**
+ * @title Карта офиса
+ */
+export interface OfficeMapContent {
   name?: string;
   address: string;
   workSchedule: WorkSchedule;

package/mobile/src/components/OfficeMap/renderFunctions.tsx

@@ -1,5 +1,5 @@
-import { NearbyOffices, WorkScheduleWeek } from './OfficeMapContent';
 import { Icon } from '../../ui-kit/Icon/Icon';
+import { NearbyOffices, WorkScheduleWeek } from './OfficeMapContent';
 
 export const renderCurrentDaySchedule = ({ lunchHour, status, workTime }: WorkScheduleWeek) => {
   const hasTime = /\d+/gi.test(lunchHour as string);
@@ -10,7 +10,7 @@ export const renderCurrentDaySchedule = ({ lunchHour, status, workTime }: WorkSc
       <div className="p-3 border rounded-md text-m flex items-center cursor-pointer text-primary-main border-green-light mr-4">
         {workTime ? workTime : null}
       </div>
-      <div className="p-3 border rounded-md text-m flex items-center cursor-pointer text-golden border-golden">
+      <div className="p-3 border rounded-md text-m flex items-center cursor-pointer text-yellow border-golden">
         {lunchHour ? lunchHourText : null}
       </div>
     </div>

package/mobile/src/components/ProductGallery/ProductGallery.tsx

@@ -91,7 +91,7 @@ function renderProductBlock(block: ProductBlockInnerContent & UniBlockProps, i:
 
 function renderNavButton({ slide, i, isActive, onClick, version }: NavButtonProps) {
   const btnClassName = isActive
-    ? 'bg-white shadow-dark-blue/42 min-w-[350px] border-none p-6'
+    ? 'bg-white shadow-dark-blue min-w-[350px] border-none p-6'
     : `min-w-[290px] hover:py-[26px] hover:py-[26px] ease-in duration-300 bg-white/10 px-6 py-5 backdrop-blur
       ${VersionStyleMap[version]}`;
   const btnTitleClassName = isActive

package/mobile/src/components/ProductTile/ProductTile.ui.json

@@ -2,7 +2,7 @@
   "content": {
     "benefits": {
       "items": {
-        "md": {
+        "__html": {
           "ui:widget": "html"
         },
         "type": {

package/mobile/src/components/ProductTile/ProductTileContent.ts

@@ -2,7 +2,7 @@ import type { BlockVersion } from '../../model/BlockVersion';
 import type { DescriptionProps, HeadlineProps, LabelProps } from '../../model/HeadlineType';
 import type { Picture } from '../../model/Picture';
 import type { ButtonContent } from '../../ui-kit/Button/ButtonProps';
-import type { MarkdownTextProps } from '../../ui-kit/MarkdownText/MarkdownTextProps';
+import type { RichTextProps } from '../../ui-kit/RichText/RichTextProps';
 
 /**
  * @title Стандартный
@@ -16,9 +16,9 @@ type TextBenefit = DescriptionProps &
 /**
  * @title Форматированный текст
  */
-type MarkdownTextContent = MarkdownTextProps & {
-  /** @default md */
-  type: 'md';
+type RichText = RichTextProps & {
+  /** @default rte */
+  type: 'rte';
 };
 
 /**
@@ -27,7 +27,7 @@ type MarkdownTextContent = MarkdownTextProps & {
  *  "type": "default"
  * }
  */
-export type Benefit = TextBenefit | MarkdownTextContent;
+export type Benefit = TextBenefit | RichText;
 
 /**
  * @title Продуктовая плитка

package/mobile/src/components/ProductTile/renderBenefit.tsx

@@ -1,5 +1,5 @@
 import type { BlockVersion } from '../../model/BlockVersion';
-import { MarkdownText } from '../../ui-kit/MarkdownText/MarkdownText';
+import { RichText } from '../../ui-kit/RichText/RichText';
 import { Text } from '../../ui-kit/Text/Text';
 import type { TextColor } from '../../ui-kit/Text/TextProps';
 import { assertUnreachable } from '../../utils/assertUnreachable';
@@ -17,7 +17,7 @@ export const renderBenefit =
   (benefit: Benefit, i: number) => {
     const { type } = benefit;
 
-    if (!(type === 'default' || type === 'md')) {
+    if (!(type === 'default' || type === 'rte')) {
       return null;
     }
 
@@ -31,8 +31,8 @@ export const renderBenefit =
             {benefit.description}
           </Text>,
         ];
-      case 'md':
-        return <MarkdownText md={benefit.md} />;
+      case 'rte':
+        return <RichText __html={benefit.__html} />;
       default:
         assertUnreachable(benefit);
     }

package/mobile/src/components/RichTextBlock/RichTextBlock.example.json

@@ -0,0 +1,5 @@
+{
+  "content": {
+    "__html": "<p class=\"h1\">Заголовок 1</p>\n<p class=\"h2\">Заголовок 2</p>\n<p class=\"h3\">Заголовок 3</p>\n<p class=\"h4\">Заголовок 4</p>\n<p class=\"h5\">Заголовок 5</p>\n<p class=\"h6\">Заголовок 6</p>\n<p>Параграф, в котором много текста и даже <a href=\"#\">ссылка</a></p>\n<p><strong>Жирный текст</strong>, <em>Наклонный текст</em></p>\n<ul>\n  <li>Список с точками</li>\n  <li>Список с точками</li>\n</ul>\n<ol>\n  <li>Нумерованный список</li>\n  <li>Нумерованный список</li>\n</ol>\n"
+  }
+}

package/mobile/src/components/RichTextBlock/RichTextBlock.tsx

@@ -0,0 +1,17 @@
+import { JSX } from '@redneckz/uni-jsx';
+import type { UniBlockProps } from '../../model/JSXBlock';
+import { BlockWrapper } from '../../ui-kit/BlockWrapper';
+import { RichText } from '../../ui-kit/RichText/RichText';
+import type { RichTextBlockContent } from './RichTextBlockContent';
+
+interface RichTextBlockProps extends RichTextBlockContent, UniBlockProps {}
+
+export const RichTextBlock = JSX<RichTextBlockProps>((props) => {
+  const { __html, ...rest } = props;
+
+  return (
+    <BlockWrapper {...rest}>
+      <RichText __html={__html} />
+    </BlockWrapper>
+  );
+});

package/mobile/src/components/RichTextBlock/RichTextBlock.ui.json

@@ -0,0 +1,7 @@
+{
+  "content": {
+    "__html": {
+      "ui:widget": "html"
+    }
+  }
+}

package/mobile/src/components/RichTextBlock/RichTextBlockContent.ts

@@ -0,0 +1,6 @@
+import type { RichTextProps } from '../../ui-kit/RichText/RichTextProps';
+
+/**
+ * @title Форматированный текст
+ */
+export type RichTextBlockContent = RichTextProps;

package/mobile/src/components/TariffsTable/TariffsTableTileCell.tsx

@@ -10,7 +10,7 @@ export interface TariffsTableTileCellProps extends UniBlockProps {
 }
 
 export const TariffsTableTileCell = JSX<TariffsTableTileCellProps>(({ tile, ...rest }) => (
-  <div className="rounded-md border-main-stroke h-full box-border border p-4">
+  <div className="rounded-md border-gray h-full box-border border p-4">
     <TableTileHeader {...tile?.header} />
     {tile?.data?.length
       ? tile.data.map((cell, i) => (

package/mobile/src/components/VerticalLayout/VerticalLayout.example.json

@@ -1,20 +1,165 @@
 {
   "content": {
-    "version": "transparent",
+    "version": "primary",
     "isPadding": false,
     "isInnerPadding": true,
     "align": "left",
     "gap": ""
   },
+  "style": ["col-span-12"],
+  "type": "VerticalLayout",
   "blocks": [
     {
-      "type": "Headline",
       "content": {
-        "title": "Заголовок блока",
-        "description": "Описание блока",
-        "headlineVersion": "M"
+        "isBlur": false,
+        "visibleItemCount": 3,
+        "isCycle": false
       },
-      "style": ["col-span-12"]
+      "style": ["col-span-12"],
+      "type": "Carousel",
+      "blocks": [
+        {
+          "content": {
+            "image": {
+              "alignment": "center",
+              "size": {
+                "width": 230,
+                "height": 230
+              },
+              "alt": "",
+              "title": "",
+              "iconVersion": "normal",
+              "format": "webp"
+            },
+            "button": {
+              "text": "Подробнее",
+              "icon": {
+                "alignment": "center",
+                "format": "webp",
+                "size": {
+                  "width": 24,
+                  "height": 24
+                },
+                "alt": "",
+                "title": "",
+                "iconVersion": "normal"
+              },
+              "version": "primary",
+              "iconRight": {
+                "alignment": "center",
+                "format": "webp",
+                "size": {
+                  "width": 24,
+                  "height": 24
+                },
+                "alt": "",
+                "title": "",
+                "iconVersion": "normal"
+              },
+              "target": "_self",
+              "href": ""
+            },
+            "title": "Заголовок карточки 1",
+            "description": "Описание карточки 1"
+          },
+          "style": ["col-span-12"],
+          "type": "CarouselCatalogCard"
+        },
+        {
+          "content": {
+            "image": {
+              "alignment": "center",
+              "size": {
+                "width": 230,
+                "height": 230
+              },
+              "alt": "",
+              "title": "",
+              "iconVersion": "normal",
+              "format": "webp"
+            },
+            "button": {
+              "text": "Подробнее",
+              "icon": {
+                "alignment": "center",
+                "format": "webp",
+                "size": {
+                  "width": 24,
+                  "height": 24
+                },
+                "alt": "",
+                "title": "",
+                "iconVersion": "normal"
+              },
+              "version": "primary",
+              "iconRight": {
+                "alignment": "center",
+                "format": "webp",
+                "size": {
+                  "width": 24,
+                  "height": 24
+                },
+                "alt": "",
+                "title": "",
+                "iconVersion": "normal"
+              },
+              "target": "_self",
+              "href": ""
+            },
+            "title": "Заголовок карточки 2",
+            "description": "Описание карточки 2"
+          },
+          "style": ["col-span-12"],
+          "type": "CarouselCatalogCard"
+        },
+        {
+          "content": {
+            "image": {
+              "alignment": "center",
+              "size": {
+                "width": 230,
+                "height": 230
+              },
+              "alt": "",
+              "title": "",
+              "iconVersion": "normal",
+              "format": "webp"
+            },
+            "button": {
+              "text": "Подробнее",
+              "icon": {
+                "alignment": "center",
+                "format": "webp",
+                "size": {
+                  "width": 24,
+                  "height": 24
+                },
+                "alt": "",
+                "title": "",
+                "iconVersion": "normal"
+              },
+              "version": "primary",
+              "iconRight": {
+                "alignment": "center",
+                "format": "webp",
+                "size": {
+                  "width": 24,
+                  "height": 24
+                },
+                "alt": "",
+                "title": "",
+                "iconVersion": "normal"
+              },
+              "target": "_self",
+              "href": ""
+            },
+            "title": "Заголовок карточки 3",
+            "description": "Описание карточки 3"
+          },
+          "style": ["col-span-12"],
+          "type": "CarouselCatalogCard"
+        }
+      ]
     }
   ]
 }

package/mobile/src/content-page-repository/replaceHeadingTags.ts

@@ -0,0 +1,2 @@
+export const replaceHeadingTags = (html: string) =>
+  html.replaceAll(/<h(\d)>([^<]*)<\/h\d>/g, '<p class="h$1">$2</p>');

package/mobile/src/content-page-repository/transformContentPage.ts

@@ -4,6 +4,7 @@ import type { ContentPageDef } from '../model/ContentPageDef';
 import type { Picture } from '../model/Picture';
 import { mapJSON } from './mapJSON';
 import type { TransformationOptions } from './TransformationOptions';
+import { transformHTML } from './transformHTML';
 import { transformMarkdown } from './transformMarkdown';
 import { transformPicture } from './transformPicture';
 
@@ -18,9 +19,12 @@ export async function transformContentPage(
   // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
   return mapJSON<ContentPageDef>(JSON.parse(content), async (value: any, [key]) => {
     const isMarkdown = typeof value === 'string' && key?.endsWith('__md');
+    const isHTML = typeof value === 'string' && key?.endsWith('__html');
 
     if (isMarkdown) {
       return await transformMarkdown(value);
+    } else if (isHTML) {
+      return await transformHTML(value);
     } else if (isPicture(value)) {
       try {
         return await transformPicture(pagePath, value, options);

package/mobile/src/content-page-repository/transformHTML.ts

@@ -0,0 +1,19 @@
+import rehypeParse from 'rehype-parse';
+import rehypeSanitize from 'rehype-sanitize';
+import rehypeStringify from 'rehype-stringify';
+import { unified } from 'unified';
+import { replaceHeadingTags } from './replaceHeadingTags';
+
+export async function transformHTML(html: string | null | undefined): Promise<string> {
+  if (!html) {
+    return '';
+  }
+
+  const result = await unified()
+    .use(rehypeParse)
+    .use(rehypeSanitize)
+    .use(rehypeStringify)
+    .process(html);
+
+  return replaceHeadingTags(result.toString('utf-8'));
+}

package/mobile/src/content-page-repository/transformMarkdown.ts

@@ -1,6 +1,7 @@
 import remarkHtml from 'remark-html';
 import remarkParse from 'remark-parse';
 import { unified } from 'unified';
+import { replaceHeadingTags } from './replaceHeadingTags';
 
 export async function transformMarkdown(markdown: string | null | undefined): Promise<string> {
   if (!markdown) {
@@ -9,5 +10,5 @@ export async function transformMarkdown(markdown: string | null | undefined): Pr
 
   const result = await unified().use(remarkParse).use(remarkHtml).process(markdown);
 
-  return result.toString('utf-8').replaceAll(/<h(\d)>([^<]*)<\/h\d>/g, '<p class="h$1">$2</p>');
+  return replaceHeadingTags(result.toString('utf-8'));
 }

package/mobile/src/model/BlockVersion.ts

@@ -12,6 +12,12 @@ export type BlockVersion = 'primary' | 'secondary';
  */
 export type BlockVersionWithTransparent = 'transparent' | 'primary' | 'secondary';
 
+/**
+ * @title Цвет блока
+ * @enumNames [ "Основная", "Второстепенная", "Серая"]
+ */
+export type BlockVersionWithGray = 'primary' | 'secondary' | 'gray';
+
 export const VersionStyleMap: Record<BlockVersion, string> = {
   primary: 'bg-white text-primary-text',
   secondary: 'bg-primary-main text-white',
@@ -28,6 +34,12 @@ export const VersionWithTransparentStyleMap: Record<BlockVersionWithTransparent,
   secondary: 'bg-primary-main text-white',
 };
 
+export const VersionWithGrayStyleMap: Record<BlockVersionWithGray, string> = {
+  primary: 'bg-white text-primary-text',
+  secondary: 'bg-primary-main text-white',
+  gray: 'bg-main-divider text-primary-text',
+};
+
 export const GapStyleMap: Record<GapVersion, string> = {
   XXL: 'gap-12',
   XL: 'gap-10',

package/mobile/src/model/BorderVersion.ts

@@ -5,6 +5,6 @@
 export type BorderVersion = 'primary' | 'secondary';
 
 export const BorderVersionStyleMap: Record<BorderVersion, string> = {
-  primary: 'border-main-stroke',
+  primary: 'border-gray',
   secondary: 'border-white/50',
 };

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

@@ -47,5 +47,5 @@ const renderButtonIcon = (icon: Picture) => {
   }
   const iconWidth = icon?.size?.width ? `${icon.size.width}` : '24';
 
-  return <Img image={{ ...icon }} width={iconWidth} height="24" asSVG />;
+  return <Img image={icon} width={iconWidth} height="24" asSVG />;
 };

package/mobile/src/ui-kit/Button/getRegularButtonClasses.ts

@@ -1,5 +1,5 @@
-import type { GetButtonClassParams } from './GetButtonClassParams';
 import { buttonStyle, buttonStyleMap } from './buttonClassNameConstants';
+import type { GetButtonClassParams } from './GetButtonClassParams';
 
 export const getRegularButtonClasses = ({
   className,
@@ -8,7 +8,7 @@ export const getRegularButtonClasses = ({
 }: GetButtonClassParams): string =>
   [
     buttonStyle,
-    'border border-transparent inline-block cursor-pointer no-underline focus:border-primary-focus focus:border',
+    'border border-transparent inline-block cursor-pointer no-underline focus:border-primary-text focus:border',
     version ? buttonStyleMap[version] : '',
     rounded ? 'rounded-full' : 'rounded-md',
     className,