@redneckz/wildless-cms-uni-blocks 0.6.47 → 0.6.49

package/src/components/ComparisonTable/TableColumn.tsx

@@ -28,10 +28,7 @@ export const TableColumn = JSX<TableColumnProps>(
     const buttonVersion: ButtonVersion = isFillGradient ? 'secondary' : 'primary';
 
     return (
-      <div
-        className={`border border-main-stroke rounded-md p-4 mb-3.5 ${gradientClassName}`}
-        role="row"
-      >
+      <div className={`border border-gray rounded-md p-4 mb-3.5 ${gradientClassName}`} role="row">
         <HeaderCell {...header} isFillGradient={isFillGradient} />
         {columnDataView?.length
           ? columnDataView.map(({ rowHeader, cell }, i) => (

package/src/components/ComparisonTable/constants.ts

@@ -1,5 +1,5 @@
 export const GRADIENT = 'bg-gradient-to-r from-main-gradient-start to-main-gradient-end';
-export const BORDER_CLASSES = 'border-main-stroke border-solid border';
+export const BORDER_CLASSES = 'border-gray border-solid border';
 export const DIVIDER_CLASSES = 'border-main-divider border border-t-0 border-x-0';
 export const FIRST_CELL_CLASSES = 'w-[200px] mr-6';
 export const COLS_LENGTH_FOR_SCROLL = 3;

package/src/components/Footer/MediaButton.tsx

@@ -37,49 +37,59 @@ const ICONS_MAP: Array<{
   },
 ];
 
+export type ButtonSize = 'default' | 'small';
+
 interface MediaButtonProps {
   href?: string;
   version?: BlockVersion;
+  isRounded?: boolean;
+  buttonSize?: ButtonSize;
 }
 
-export const MediaButton = JSX<MediaButtonProps>(({ version = 'primary', ...rest }) => {
-  const link = useLink();
-  const { href, onClick } = link(rest);
+const BUTTON_SIZE = {
+  default: ' w-14 h-14',
+  small: ' w-12 h-12',
+};
+
+export const MediaButton = JSX<MediaButtonProps>(
+  ({ version = 'primary', isRounded = false, buttonSize = 'default', ...rest }) => {
+    const link = useLink();
+    const { href, onClick } = link(rest);
 
-  const { icon, label } =
-    ICONS_MAP.find(({ origins }) => origins.some((_) => href?.includes(_))) || {};
+    const { icon, label } =
+      ICONS_MAP.find(({ origins }) => origins.some((_) => href?.includes(_))) || {};
 
-  if (!icon) {
-    return null;
-  }
+    if (!icon) {
+      return null;
+    }
 
-  const classes =
-    version === 'secondary'
-      ? 'bg-white hover:bg-secondary-hover'
-      : 'border-solid border border-main-divider hover:border-transparent hover:bg-primary-main';
+    const classes =
+      version === 'secondary'
+        ? 'bg-white hover:bg-secondary-hover'
+        : 'border-solid border border-main-divider hover:border-transparent hover:bg-primary-main';
 
-  const isPrimary = version === 'primary';
+    const isPrimary = version === 'primary' ? 'hover:text-black' : '';
+    const rounded = isRounded ? 'rounded-full' : 'rounded-md';
 
-  return (
-    <a
-      className={`flex items-center justify-center rounded-md w-14 h-14 group box-border ${classes} ${
-        isPrimary ? 'hover:text-black' : ''
-      }`}
-      href={href}
-      aria-label={label}
-      target="_blank"
-      rel="noopener noreferrer"
-      onClick={onClick}
-    >
-      {icon ? (
-        <Img
-          image={getIconWithVersion(icon)}
-          imageClassName="group-hover:text-white"
-          width="24"
-          height="24"
-          asSVG
-        />
-      ) : null}
-    </a>
-  );
-});
+    return (
+      <a
+        className={`flex items-center justify-center group box-border ${classes} ${rounded} ${isPrimary} ${BUTTON_SIZE[buttonSize]}`}
+        href={href}
+        aria-label={label}
+        target="_blank"
+        rel="noopener noreferrer"
+        onClick={onClick}
+      >
+        {icon ? (
+          <Img
+            image={getIconWithVersion(icon)}
+            imageClassName="group-hover:text-white"
+            width="24"
+            height="24"
+            asSVG
+          />
+        ) : null}
+      </a>
+    );
+  },
+);

package/src/components/Footer/SocialMedia.tsx

@@ -1,21 +1,31 @@
 import { JSX } from '@redneckz/uni-jsx';
 import type { BlockVersion } from '../../model/BlockVersion';
 import type { LinkProps } from '../../model/LinkProps';
-import { MediaButton } from './MediaButton';
+import { type ButtonSize, MediaButton } from './MediaButton';
 
 export interface SocialMediaProps {
   className?: string;
   media?: Omit<LinkProps, 'text'>[];
   version?: BlockVersion;
+  isRounded?: boolean;
+  buttonSize?: ButtonSize;
 }
 
-export const SocialMedia = JSX<SocialMediaProps>(({ className = '', media, version, children }) => (
-  <div className="font-sans">
-    <div className={`flex gap-2.5 ${className}`}>
-      {media?.map((_, index) => (
-        <MediaButton key={String(index)} version={version} {..._} />
-      ))}
+export const SocialMedia = JSX<SocialMediaProps>(
+  ({ className = '', media, version, isRounded = false, buttonSize, children }) => (
+    <div className="font-sans">
+      <div className={`flex gap-2.5 ${className}`}>
+        {media?.map((_, index) => (
+          <MediaButton
+            key={String(index)}
+            version={version}
+            isRounded={isRounded}
+            buttonSize={buttonSize}
+            {..._}
+          />
+        ))}
+      </div>
+      <span className="text-s-light text-secondary-text">{children}</span>
     </div>
-    <span className="text-s-light text-secondary-text">{children}</span>
-  </div>
-));
+  ),
+);

package/src/components/Gallery/Gallery.mobile.tsx

@@ -45,7 +45,7 @@ function renderCardsLayout(orientation: ListOrientation, cards: GalleryCardProps
 function renderCard(card: GalleryCardProps, key: number) {
   return (
     <div
-      className={`w-full h-full flex flex-col justify-between shrink-0 box-border snap-start snap-always border-solid border rounded-md border-main-stroke p-4
+      className={`w-full h-full flex flex-col justify-between shrink-0 box-border snap-start snap-always border-solid border rounded-md border-gray p-4
       ${VersionStyleMap[card.version ?? 'primary']}`}
       key={key}
     >

package/src/components/Gallery/GalleryContainer.tsx

@@ -36,7 +36,7 @@ export const GalleryContainer = JSX<GalleryContainerProps>(
 function renderCard({ card, version }: GalleryCardData, i: number) {
   return (
     <section
-      className={`box-border border-solid border border-main-stroke p-6 mx-2 flex flex-col justify-between
+      className={`box-border border-solid border border-gray p-6 mx-2 flex flex-col justify-between
         items-stretch ${cardStyleMap[version]} ${
         VersionStyleMap[card.version ?? 'primary']
       } w-full col-span-4`}

package/src/components/GracePeriod/GracePeriodContent.ts

@@ -9,7 +9,7 @@ export interface Month {
    * @default {
    *   "format": "webp",
    *   "size": {
-   *       "width": 210
+   *       "width": 210,
    *       "height": 190
    *   }
    * }

package/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/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

package/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/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/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/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/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/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/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/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/src/content-page-repository/transformHTML.ts

@@ -1,4 +1,4 @@
-import rehypeParse from 'rehype-parse/lib';
+import rehypeParse from 'rehype-parse';
 import rehypeSanitize from 'rehype-sanitize';
 import rehypeStringify from 'rehype-stringify';
 import { unified } from 'unified';

package/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/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,

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

@@ -16,9 +16,9 @@ export const Checkbox = JSX<CheckboxProps>(({ className, text, checked, isRadio,
     <div className={className}>
       <label className="flex items-center relative cursor-pointer group">
         <input
-          className={`peer appearance-none w-5 h-5 border-solid cursor-pointer group-hover:border-checkbox-hover
+          className={`peer appearance-none w-5 h-5 border-solid cursor-pointer group-hover:border-primary-hover
         ${isRadio ? 'rounded-full border-2' : 'rounded checked:bg-primary-main border'}
-        ${checked ? 'border-black' : 'border-main-stroke'}
+        ${checked ? 'border-black' : 'border-gray'}
         checked:border-primary-main m-0`}
           type="checkbox"
           onChange={(e) => onChange && onChange(e.target.checked as boolean)}

package/src/ui-kit/InnerTable/InnerTableBody.tsx

@@ -25,7 +25,7 @@ export const InnerTableBody = JSX<InnerTableBodyProps>(({ activeTabIndex, items
         return (
           <div key={key} className="w-full">
             <div
-              className="flex p-4 bg-main-stroke text-xl-light text-center justify-center cursor-pointer relative"
+              className="flex p-4 bg-gray text-xl-light text-center justify-center cursor-pointer relative"
               onClick={() => toggleTables(key)}
             >
               {_.title}

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

@@ -38,7 +38,7 @@ export const Input = JSX<InputProps>(
 
     const paddingStyle = children ? 'pr-8' : '';
     const validStyle = valid
-      ? 'border-main-stroke hover:border-primary-hover active:border-primary-text focus:border-primary-text'
+      ? 'border-gray hover:border-primary-hover active:border-primary-text focus:border-primary-text'
       : 'border-error';
 
     return (

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

@@ -4,7 +4,7 @@ import { clamp } from '../../utils/clamp';
 import { getSanitizedValue } from '../../utils/getSanitizedValue';
 import type { InputRangeProps } from './InputRangeProps';
 
-const DISABLED_INPUT_CLASSES = 'disabled:border-main-stroke disabled:bg-main-divider';
+const DISABLED_INPUT_CLASSES = 'disabled:border-gray disabled:bg-main-divider';
 
 export const InputRange = JSX<InputRangeProps>(
   ({
@@ -35,8 +35,8 @@ export const InputRange = JSX<InputRangeProps>(
         <label className="block relative">
           {title ? <span className="text-m-light text-primary-text">{title}</span> : null}
           <input
-            className={`m-0 mt-2 font-sans text-h3 w-full h-14 border border-solid border-main-stroke rounded-md
-            outline-none p-0 pl-4 box-border text-primary-text hover:border-primary-hover focus:border-primary-focus ${DISABLED_INPUT_CLASSES}`}
+            className={`m-0 mt-2 font-sans text-h3 w-full h-14 border border-solid border-gray rounded-md
+            outline-none p-0 pl-4 box-border text-primary-text hover:border-primary-hover focus:border-primary-text ${DISABLED_INPUT_CLASSES}`}
             value={addSpacesBetweenNumbers(value)}
             disabled={disabled}
             onChange={handleChange}

package/src/ui-kit/Location/SearchBar.tsx

@@ -19,7 +19,7 @@ export const SearchBar = JSX<SearchBarInnerProps>(({ className, searchTerm, onSe
       <input
         id="search-bar-input"
         className={`h-12 pl-4 w-full peer text-l text-black border border-solid rounded-md box-border
-              outline-none border-main-stroke hover:border-primary-hover active:border-primary-text focus:border-primary-text`}
+              outline-none border-gray hover:border-primary-hover active:border-primary-text focus:border-primary-text`}
         value={searchTerm}
         onChange={(e) => onSearch(e.target.value as string)}
         type="text"

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

@@ -5,7 +5,7 @@ export const Radio = JSX<RadioProps>(({ name, text, value, checked, onChange, cl
   <div className={className}>
     <label className="font-sans flex items-center relative cursor-pointer">
       <input
-        className="appearance-none flex justify-center items-center shrink-0 w-5 h-5 border border-gray hover:border-checkbox-hover
+        className="appearance-none flex justify-center items-center shrink-0 w-5 h-5 border border-gray hover:border-primary-hover
         checked:border-2 checked:!border-primary-main focus:checked:border-primary-main focus:border-primary-text active:border-primary-text
         after:block after:w-2.5 after:h-2.5 after:rounded-full checked:after:bg-primary-main outline-none rounded-full cursor-pointer"
         type="radio"

package/src/ui-kit/SearchBar/SearchBarInner.tsx

@@ -34,7 +34,7 @@ export const SearchBarInner = JSX<SearchBarInnerProps>(({ className, isMobile =
       <input
         id="search-bar-input"
         className={`h-12 pl-12 w-full peer text-l text-black border border-solid rounded-md box-border
-              outline-none pr-[6%] border-main-stroke hover:border-primary-hover active:border-primary-text focus:border-primary-text ${SearchBarInputClassName}`}
+              outline-none pr-[6%] border-gray hover:border-primary-hover active:border-primary-text focus:border-primary-text ${SearchBarInputClassName}`}
         value={term}
         onChange={(e) => setTerm(e.target.value as string)}
         type="text"

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

@@ -102,4 +102,4 @@ const renderOption =
   };
 
 const getBorderStyle = (isBorder: boolean) =>
-  isBorder ? 'border border-main-stroke rounded-md hover:border-primary-hover' : '';
+  isBorder ? 'border border-gray rounded-md hover:border-primary-hover' : '';

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

@@ -1,9 +1,9 @@
+import type { VNode } from '../../model/VNode';
 import '../../setup-fixture';
 import { SwipeListControl } from './SwipeListControl';
-import type { VNode } from '../../model/VNode';
 
 const renderElement = (_: any, i: number): VNode => (
-  <div key={String(i)} className="border border-main-stroke rounded-md text-center h-12">
+  <div key={String(i)} className="border border-gray rounded-md text-center h-12">
     {`Element #${i}`}
   </div>
 );
@@ -24,7 +24,7 @@ export default {
   '1 element': (
     <div className="px-4 py-5 bg-white">
       <SwipeListControl>
-        <div className="border border-main-stroke rounded-md text-center h-12">
+        <div className="border border-gray rounded-md text-center h-12">
           Single element, not inside an array
         </div>
       </SwipeListControl>

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

@@ -17,7 +17,7 @@ export const Tags = JSX<TagsProps>((props) => {
 const renderTag = (tag: string, key: number) => (
   <span
     key={String(key)}
-    className="text-m-light py-2 px-2.5 border-solid border rounded-md border-color-stroke"
+    className="text-m-light py-2 px-2.5 border-solid border rounded-md border-gray"
   >
     {tag}
   </span>

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

@@ -3,14 +3,14 @@
 import { JSX } from '@redneckz/uni-jsx';
 import { useEffect, useRef, useState } from '@redneckz/uni-jsx/lib/hooks';
 import ymaps from 'yandex-maps';
+import { Icon } from '../Icon/Icon';
+import { MockPoints, mockPoints } from './mockPoints';
 import { renderClusterer } from './renderClusterer';
 import { renderOpenMap } from './renderOpenMap';
 import { renderSearchField } from './renderSearchField';
 import { renderUserGeolocation } from './renderUserGeolocation';
 import { useYandexMaps } from './useYandexMaps';
-import { Icon } from '../Icon/Icon';
 import { ZoomButton } from './ZoomButton';
-import { MockPoints, mockPoints } from './mockPoints';
 
 interface YandexMapProps {
   points: number[][];
@@ -23,7 +23,7 @@ const FULLSCREEN_STYLES = {
   border: 'border border-transparent rounded-md ',
   position: 'absolute flex items-center justify-center',
   size: 'w-12 h-12',
-  focus: 'focus:border-primary-focus focus:border',
+  focus: 'focus:border-primary-text focus:border',
   font: 'text-center font-sans',
   active: 'active:bg-primary-active',
   hover: 'hover:bg-primary-hover',

package/src/ui-kit/YandexMap/ZoomButton.tsx

@@ -10,7 +10,7 @@ interface ZoomButtonProps {
 }
 
 const styles = {
-  focus: 'focus:border-primary-focus focus:border',
+  focus: 'focus:border-primary-text focus:border',
   hover: 'hover:bg-primary-hover',
   active: 'active:bg-primary-active',
   border: 'border-b border-b-2 border-gray last:border-0',

package/src/ui-kit/YandexMap/renderOpenMap.tsx

@@ -1,5 +1,5 @@
 const styles = {
-  focus: 'focus:border-primary-focus focus:border',
+  focus: 'focus:border-primary-text focus:border',
   hover: 'hover:bg-primary-hover',
   active: 'active:bg-primary-active',
   border: 'border border-transparent rounded-md',
@@ -14,7 +14,7 @@ export const renderOpenMap = (pointsCenter: number[]) => {
 
   return (
     <a
-      className={`select-none cursor-pointer px-9 h-12 bg-white bg-primary-main text-white ${Object.values(
+      className={`select-none cursor-pointer px-9 h-12 bg-primary-main text-white ${Object.values(
         styles,
       ).join(' ')}`}
       href={getYandexMapUrl()}

package/src/ui-kit/YandexMap/renderUserGeolocation.tsx

@@ -1,9 +1,9 @@
 /* eslint-disable @typescript-eslint/no-unsafe-argument */
-import { Icon } from '../Icon/Icon';
 import ymaps from 'yandex-maps';
+import { Icon } from '../Icon/Icon';
 
 const styles = {
-  focus: 'focus:border-primary-focus focus:border',
+  focus: 'focus:border-primary-text focus:border',
   hover: 'hover:bg-primary-hover',
   active: 'active:bg-primary-active',
   border: 'border border-transparent rounded-md',