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

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/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/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/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/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/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/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/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/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/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/Img/Img.mobile.tsx

@@ -1,6 +1,5 @@
 import { JSX } from '@redneckz/uni-jsx';
 import { ImgInner } from './ImgInner';
+import type { ImageProps } from './ImgProps';
 
-import type { Image, ImageProps } from './ImgProps';
-
-export const Img = JSX<ImageProps<Image>>((props) => <ImgInner {...props} isMobile={true} />);
+export const Img = JSX<ImageProps>((props) => <ImgInner {...props} isMobile={true} />);

package/src/ui-kit/Img/ImgAsPicture.tsx

@@ -10,14 +10,13 @@ const sourcesComparator = (a: Picture, b: Picture) => {
   return 0;
 };
 
-export const ImgAsPicture = JSX<ImageProps<Picture>>(
-  ({ className = '', image, imageClassName = '', isMobile = false, pathPrefix = '' }) => {
+export const ImgAsPicture = JSX<ImageProps>(
+  ({ className = '', image, imageClassName = '', isMobile = false, pathPrefix }) => {
     if (!image || (!image?.sources && !image?.src)) {
       return null;
     }
 
     const pictureStyles = isMobile ? 'flex' : 'flex-none';
-    const normalizedPathPrefix = normalizePathPrefix(pathPrefix);
 
     return (
       <picture className={`${pictureStyles} ${className}`}>
@@ -27,7 +26,7 @@ export const ImgAsPicture = JSX<ImageProps<Picture>>(
               .map(({ src, format, media }, index) => (
                 <source
                   key={`${index}_${src}`}
-                  srcSet={addPathPrefixToSrcSet(src, normalizedPathPrefix)}
+                  srcSet={addPathPrefixToSrcSet(src, pathPrefix)}
                   type={formatToMimeType(format)}
                   media={media ? `(max-width: ${media}px)` : ''}
                   {...image.size}
@@ -35,7 +34,7 @@ export const ImgAsPicture = JSX<ImageProps<Picture>>(
               ))
           : null}
         {renderImg(
-          { ...image, src: `${normalizedPathPrefix}${image.src}` },
+          { ...image, src: addPathPrefixToSrc(image.src, pathPrefix) },
           imageClassName,
           isMobile,
         )}
@@ -69,10 +68,13 @@ const renderImg = (image: Picture, imageClassName = '', isMobile = false) => {
 const normalizePathPrefix = (pathPrefix = '') =>
   pathPrefix && !pathPrefix.endsWith('/') ? `${pathPrefix}/` : pathPrefix;
 
-const addPathPrefixToSrcSet = (srcset = '', pathPrefix = '') =>
+const addPathPrefixToSrc = (src?: string, pathPrefix?: string) =>
+  !src || src?.startsWith('data:image') ? src : `${normalizePathPrefix(pathPrefix)}${src}`;
+
+const addPathPrefixToSrcSet = (srcset?: string, pathPrefix?: string) =>
   srcset
-    .split(',')
-    .map((src) => `${pathPrefix}${src.trim()}`)
+    ?.split(',')
+    .map((src) => addPathPrefixToSrc(src.trim(), pathPrefix))
     .join(', ');
 
 export function formatToMimeType(format: ImgSource['format']): string | undefined {

package/src/ui-kit/Img/ImgInner.tsx

@@ -1,35 +1,27 @@
 import { JSX } from '@redneckz/uni-jsx';
-import type { Picture } from '../../model/Picture';
 import { Icon } from '../Icon/Icon';
-import { getIconVersion } from './getIconVersion';
 import { ImgAsPicture } from './ImgAsPicture';
-import type { Image, ImageProps } from './ImgProps';
+import type { ImageProps } from './ImgProps';
 
-export const ImgInner = JSX<ImageProps<Image>>(
+export const ImgInner = JSX<ImageProps>(
   ({ className = '', image, imageClassName = '', isMobile, pathPrefix, ...iconProps }) => {
-    if (!image) {
+    if (!image?.src && !image?.icon) {
       return null;
     }
 
-    // backwards compatibility with existing icons in usage
-    const icon = typeof image === 'string' ? image : image.icon;
-    if (icon || icon === '') {
-      return icon.length ? (
-        <Icon
-          className={className}
-          imageClassName={imageClassName}
-          iconVersion={getIconVersion(image)}
-          name={icon}
-          {...iconProps}
-        />
-      ) : null;
-    }
-
-    return (
+    return image.icon ? (
+      <Icon
+        className={className}
+        imageClassName={imageClassName}
+        iconVersion={image?.iconVersion || 'normal'}
+        name={image.icon}
+        {...iconProps}
+      />
+    ) : (
       <ImgAsPicture
         className={className}
         imageClassName={imageClassName}
-        image={image as Picture}
+        image={image}
         isMobile={isMobile}
         pathPrefix={pathPrefix}
       />

package/src/ui-kit/Img/ImgProps.ts

@@ -1,12 +1,10 @@
 import type { Picture } from '../../model/Picture';
-import type { IconCompatibilityFields, IconName } from '../Icon/IconProps';
+import type { IconCompatibilityFields } from '../Icon/IconProps';
 
-export type Image = Picture | IconName;
-
-export interface ImageContent<T = Picture> {
-  image?: T;
+export interface ImageContent {
+  image?: Picture;
 }
-export interface ImageProps<T> extends ImageContent<T>, IconCompatibilityFields {
+export interface ImageProps extends ImageContent, IconCompatibilityFields {
   className?: string;
   imageClassName?: string;
   isMobile?: boolean;

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

@@ -25,12 +25,12 @@ 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}
               <Img
-                image={hiddenTables[key] ? 'PlusIcon' : 'MinusIcon'}
+                image={{ icon: hiddenTables[key] ? 'PlusIcon' : 'MinusIcon' }}
                 className="absolute right-[22px]"
                 width="24"
                 height="24"

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/Location.tsx

@@ -103,7 +103,7 @@ const CloseButton = JSX<CloseButtonProps>(({ close }) => (
       close && close();
     }}
   >
-    <Img image="CloseIcon" width="24" height="24" />
+    <Img image={{ icon: 'CloseIcon' }} width="24" height="24" />
   </button>
 ));
 

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/Logo/renderImage.tsx

@@ -1,4 +1,4 @@
-import { BgColorVersion } from '../../model/BgColorVersion';
+import type { BgColorVersion } from '../../model/BgColorVersion';
 import type { Picture } from '../../model/Picture';
 import { Img } from '../Img/Img';
 
@@ -23,6 +23,7 @@ export const renderImage = (
       className={SVG_COLOR[bgColor]}
       width={size?.width}
       height={size?.height}
+      pathPrefix="/wcms-resources/"
       asSVG
     />
   ) : (

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/RichText/RichText.fixture.tsx

@@ -0,0 +1,28 @@
+import { RichText } from './RichText';
+
+const HTML = `
+  <p class="h1">Заголовок 1</p>
+  <p class="h2">Заголовок 2</p>
+  <p class="h3">Заголовок 3</p>
+  <p class="h4">Заголовок 4</p>
+  <p class="h5">Заголовок 5</p>
+  <p class="h6">Заголовок 6</p>
+  <p>Параграф, в котором много текста и даже <a href="#">ссылка</a></p>
+  <p><strong>Жирный текст</strong>, <em>Наклонный текст</em></p>
+  <ul>
+    <li>Список с точками</li>
+    <li>Список с точками</li>
+  </ul>
+  <ol>
+    <li>Нумерованный список</li>
+    <li>Нумерованный список</li>
+  </ol>
+`;
+
+export default {
+  default: (
+    <section className="p-12">
+      <RichText __html={HTML} />
+    </section>
+  ),
+};

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

@@ -0,0 +1,8 @@
+import { JSX } from '@redneckz/uni-jsx';
+import type { RichTextProps } from './RichTextProps';
+
+export const RichText = JSX<RichTextProps>((props) => {
+  const { __html = '' } = props;
+
+  return <div className="md-container" dangerouslySetInnerHTML={{ __html }} />;
+});

package/src/ui-kit/RichText/RichTextProps.ts

@@ -0,0 +1,6 @@
+type HTML = string;
+
+export interface RichTextProps {
+  /** @title Текст */
+  __html?: HTML;
+}

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

@@ -20,7 +20,7 @@ export const SearchBarInner = JSX<SearchBarInnerProps>(({ className, isMobile =
     <form className={`font-sans relative ${className}`}>
       <div className="absolute rounded h-full flex items-center justify-center pl-4 max-w-[170px] gap-3.5 pointer-events-none">
         <div className={LoupeIconClassName}>
-          <Img image="LoupeIcon" width="24" height="24" />
+          <Img image={{ icon: 'LoupeIcon' }} width="24" height="24" />
         </div>
         {term ? null : (
           <label
@@ -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"
@@ -49,7 +49,7 @@ export const SearchBarInner = JSX<SearchBarInnerProps>(({ className, isMobile =
             setTerm('');
           }}
         >
-          <Img image="CloseIcon" width="24" height="24" />
+          <Img image={{ icon: 'CloseIcon' }} width="24" height="24" />
         </button>
       ) : (
         <Button

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>