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

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/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/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/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/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/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/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/mobile/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/mobile/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/mobile/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/mobile/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/mobile/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/mobile/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/mobile/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/mobile/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/mobile/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/mobile/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/mobile/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/mobile/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/mobile/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',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@redneckz/wildless-cms-uni-blocks",
-  "version": "0.6.47",
+  "version": "0.6.49",
   "private": false,
   "license": "MIT",
   "author": "ЦК",

package/src/common.css

@@ -11,6 +11,7 @@ html {
   --color-green-dark: 66, 171, 68;
   --color-green-more-dark: 39, 148, 41;
   --color-yellow: 221, 182, 61;
+  --color-gray: 201, 202, 204;
 }
 
 /* Private clients | Green */
@@ -121,21 +122,21 @@ html {
   }
 
   input[type='range'].slider:disabled {
-    background-image: linear-gradient(rgb(201, 202, 204), rgb(201, 202, 204));
+    background-image: linear-gradient(rgb(var(--color-gray)), rgb(var(--color-gray)));
     pointer-events: none;
     cursor: default;
   }
 
   input[type='range'].slider:disabled::-webkit-slider-thumb {
-    background: rgb(201, 202, 204);
+    background: rgb(var(--color-gray));
   }
 
   input[type='range'].slider:disabled::-moz-range-thumb {
-    background: rgb(201, 202, 204);
+    background: rgb(var(--color-gray));
   }
 
   input[type='range'].slider:disabled::-ms-thumb {
-    background: rgb(201, 202, 204);
+    background: rgb(var(--color-gray));
   }
 
   /* Hide arrows */

package/src/components/BusinessBlock/BusinessBlock.example.json

@@ -26,9 +26,8 @@
       ],
       "button": {
         "href": "#",
-        "text": "Подробнее",
-        "target": "_blank",
-        "version": "secondary"
+        "text": "Кнопка",
+        "version": "primary"
       }
     },
     {
@@ -56,9 +55,8 @@
       ],
       "button": {
         "href": "#",
-        "text": "Подробнее",
-        "target": "_blank",
-        "version": "secondary"
+        "text": "Кнопка",
+        "version": "primary"
       }
     }
   ]

package/src/components/BusinessBlock/BusinessBlockContent.ts

@@ -1,6 +1,7 @@
 import type { IconProps, Picture } from '../../model/Picture';
 import type { ButtonWithIconProps } from '../../ui-kit/Button/ButtonProps';
 
+/** @default {"icon": {"format": "webp", "size": { "width": 24, "height": 24 }}} */
 export type BusinessCardItemProps = IconProps & {
   /** @title Текст */
   text?: string;
@@ -12,7 +13,11 @@ export interface BusinessCardProps {
   image?: Picture;
   /** @title Список */
   cardItems?: BusinessCardItemProps[];
-  /** @title Кнопка */
+  /**
+   * @title Кнопка
+   * @default {"icon": {"format": "webp", "size": { "width": 24, "height": 24 }},
+   * "iconRight": {"format": "webp", "size": { "width": 24, "height": 24 }}, "text": "Кнопка"}
+   */
   button?: ButtonWithIconProps;
 }
 

package/src/components/BusinessBlock/BusinessCard.tsx

@@ -8,7 +8,7 @@ export const BusinessCard = JSX<BusinessCardProps>((props) => {
   const { title, image, cardItems, button } = props;
 
   return (
-    <div className="border-color-stroke border p-9 w-1/2">
+    <div className="border-gray border p-9 w-1/2">
       {image ? (
         <div className="flex justify-center">
           {image?.src ? <Img className="mb-5" image={image} /> : null}

package/src/components/Calculator/Calculator.tsx

@@ -84,7 +84,7 @@ function renderNavButton({ tab, i, isActive, onClick }: NavButtonProps) {
       key={String(i)}
       onClick={onClick}
       aria-label={tab?.title}
-      className={`box-border relative border border-main-stroke cursor-pointer text-left border-b-0 flex hover:h-[88px]
+      className={`box-border relative border border-gray cursor-pointer text-left border-b-0 flex hover:h-[88px]
       ${btnClassName}`}
     >
       <Img

package/src/components/CarouselCard/CarouselCard.tsx

@@ -7,7 +7,7 @@ import type { CarouselCardContent } from './CarouselCardContent';
 
 export interface CarouselCardProps extends CarouselCardContent, UniBlockProps {}
 
-const BLOCK_CLASSES = 'absolute border border-solid border-main-stroke w-full h-full';
+const BLOCK_CLASSES = 'absolute border border-solid border-gray w-full h-full';
 
 const CARD_WIDTH_MAP: Record<CarouselCardVersion, string> = {
   normal: 'min-w-[1007px]',

package/src/components/CarouselCard/CarouselCardContent.ts

@@ -3,7 +3,7 @@ import type { HeadlineCommonProps } from '../../model/HeadlineType';
 import type { ButtonWithIconProps } from '../../ui-kit/Button/ButtonProps';
 
 /**
- * @title Карточка какусели
+ * @title Карточка карусели
  */
 export interface CarouselCardContent extends HeadlineCommonProps {
   /**

package/src/components/CarouselCatalogCard/CarouselCatalogCard.tsx

@@ -22,7 +22,7 @@ const cardStyleMap: Record<ProductColorVersion, string> = {
 export const CarouselCatalogCard = JSX<CarouselCatalogCardProps>(
   ({ className = '', title, description, image, price, button, colors, version = 'primary' }) => (
     <section
-      className={`border box-border border-main-stroke p-7 min-w-[392px] flex flex-col justify-left ${VersionStyleMap[version]} ${className}`}
+      className={`border box-border border-gray p-7 min-w-[392px] flex flex-col justify-left ${VersionStyleMap[version]} ${className}`}
       role="listitem"
     >
       {image?.src ? <Img className="mb-5 flex justify-center" image={image} /> : null}

package/src/components/CarouselProductCard/CarouselProductCard.tsx

@@ -20,7 +20,7 @@ const descriptionStyleMap: Record<BlockVersion, string> = {
   secondary: 'text-white/80',
 };
 
-const BORDER_STYLE = 'box-border border-solid border border-main-stroke ';
+const BORDER_STYLE = 'box-border border-solid border border-gray ';
 
 export const CarouselProductCard = JSX<CarouselProductCardProps>(
   ({

package/src/components/CarouselProgramsCard/CarouselProgramsCard.tsx

@@ -13,7 +13,7 @@ export interface CarouselTariffsCardProps extends CarouselProgramsCardContent, U
 export const CarouselProgramsCard = JSX<CarouselTariffsCardProps>(
   ({ className = '', title, icon, list = [], version = 'primary', ...rest }) => (
     <BlockWrapper
-      className={`font-sans border border-main-stroke flex min-w-[536px] ${VersionStyleMap[version]} ${className}`}
+      className={`font-sans border border-gray flex min-w-[536px] ${VersionStyleMap[version]} ${className}`}
       {...rest}
     >
       <div className="w-[200px] min-w-[200px] self-end">

package/src/components/CarouselTariffsCard/CarouselTariffsCard.tsx

@@ -1,3 +1,7 @@
+import { JSX } from '@redneckz/uni-jsx';
+import type { HeadlineCommonProps } from '../../model/HeadlineType';
+import type { UniBlockProps } from '../../model/JSXBlock';
+import { VNode } from '../../model/VNode';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
 import { Button } from '../../ui-kit/Button/Button';
 import { Foldable } from '../../ui-kit/Foldable/Foldable';
@@ -6,11 +10,7 @@ import { FoldableSection } from '../../ui-kit/Foldable/FoldableSection';
 import { Heading } from '../../ui-kit/Heading/Heading';
 import { Icon } from '../../ui-kit/Icon/Icon';
 import { Img } from '../../ui-kit/Img/Img';
-import { JSX } from '@redneckz/uni-jsx';
-import { VNode } from '../../model/VNode';
 import type { CarouselTariffsCardContent } from './CarouselTariffsCardContent';
-import type { HeadlineCommonProps } from '../../model/HeadlineType';
-import type { UniBlockProps } from '../../model/JSXBlock';
 
 export interface CarouselTariffsCardProps extends CarouselTariffsCardContent, UniBlockProps {}
 
@@ -24,7 +24,7 @@ export const CarouselTariffsCard = JSX<CarouselTariffsCardProps>(
 
     return (
       <BlockWrapper
-        className={`font-sans relative bg-white border border-main-stroke min-w-[322px] p-8 
+        className={`font-sans relative bg-white border border-gray min-w-[322px] p-8
         ${getHitStyle(isHighlighting)}
         ${className}`}
         {...rest}

package/src/components/Catalog/CatalogCard.tsx

@@ -19,7 +19,7 @@ const cardStyleMap: Record<ProductColorVersion, string> = {
 export const CatalogCard = JSX<CatalogCardProps>(
   ({ className = '', title, description, image, price, button, colors }) => (
     <section
-      className={`border border-solid box-border border-main-stroke p-[30px] min-w-[402px] flex flex-col justify-left ${className}`}
+      className={`border border-solid box-border border-gray p-[30px] min-w-[402px] flex flex-col justify-left ${className}`}
       role="listitem"
     >
       {image?.src ? <Img className="mb-5 flex justify-center" image={image} /> : null}

package/src/components/ComparisonTable/ComparisonTable.tsx

@@ -59,7 +59,7 @@ const renderShowMoreToggleButton = ({
       <div className={FIRST_CELL_CLASSES} />
       <button
         onClick={onClick}
-        className="mt-5 flex-1 border-main-stroke border-solid border text-primary-text bg-white hover:border-primary-main hover:text-primary-main"
+        className="mt-5 flex-1 border-gray border-solid border text-primary-text bg-white hover:border-primary-main hover:text-primary-main"
       >
         <div className="font-sans text-xs-light font-medium py-3">
           {!isShowAllRow ? 'Показать все параметры' : 'Скрыть'}