@redneckz/wildless-cms-uni-blocks 0.3.83 → 0.3.85

package/mobile/src/icons/Logo.svg

@@ -0,0 +1,7 @@
+<svg title="Logo" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 40 45">
+  <path fill="currentColor" d="m13.72 25.51 4.42-4.33v-2.95l-4.42 4.32v2.96Zm0-10.98 4.42-4.35V7.41l-4.42 4.31v2.8Zm0 3.63 4.42-4.33v-2.78l-4.42 4.32v2.8ZM12.46 7.44l-.6-.56V0h-.66v6.22l-.58-.57V0h-.67v5l-.59-.58V0H8.7v6.56l4.44 4.33V0h-.67v7.44Zm1.26 14.35 4.42-4.33v-2.78L13.72 19v2.8Zm-5.03-.61 4.44 4.33v-2.96l-4.44-4.32v2.95Zm8.79-16.76-.59.58V0h-.66v5.66l-.6.56V0h-.66v6.87l-.58.57V0h-.67v10.9l4.42-4.34V0h-.66v4.42Zm-8.79 5.76 4.44 4.35v-2.8L8.69 7.4v2.77Zm0 3.65 4.44 4.33v-2.8l-4.44-4.3v2.77Zm0 3.63 4.44 4.33V19l-4.44-4.31v2.78Zm26.37 2.29H24.3a2.25 2.25 0 0 0 .36-1.22 2.32 2.32 0 0 0-2.33-2.31 2.32 2.32 0 0 0-2.31 2.31c0 .5.16.96.43 1.34a.74.74 0 0 0-.33.61c0 .26.14.49.33.62a2.32 2.32 0 0 0-.43 1.34 2.31 2.31 0 0 0 2.31 2.31 2.32 2.32 0 0 0 2.33-2.31c0-.45-.13-.87-.36-1.22h8.01v.49h-.8v.68h.8v.7h-.8v1.3h.8v-.58h1.17v.58h.79v-1.3h-.79v-.7h.79v-.68h-.79v-.5h1.58a.56.56 0 0 0 .56-.56v-.34a.57.57 0 0 0-.56-.56Zm-11.53 2.7a1.2 1.2 0 0 1-2.4 0c0-.24.08-.47.2-.66l.34-.56a.97.97 0 0 1-.34-.75c0-.3.13-.56.33-.74l-.32-.56a1.13 1.13 0 0 1-.2-.66 1.2 1.2 0 0 1 2.4 0c0 .49-.56 1.65-.56 1.65v.62c-.01.01.55 1.17.55 1.66ZM4.67 18.34v2.89c0 2.75 1.2 4.53 1.9 5.21l4.58 4.5c1.28 1.25 1.5 1.66 1.79 2.37v-3.2c0-2.84-1.44-3.94-2.19-4.67-1.73-1.68-2.89-2.8-3.82-3.73a8.98 8.98 0 0 1-2.26-3.37Zm6.08 14.24c-1.73-1.7-2.89-2.8-3.82-3.73a10 10 0 0 1-2.25-2.98v2.49a7.87 7.87 0 0 0 1.89 5.24l4.58 4.47c1.28 1.25 1.5 1.85 1.79 2.55v-3.37c0-2.85-1.45-3.95-2.19-4.67Z"/>,
+  <path fill="currentColor" d="M19.88 5.34c-.32 0-.64 0-.96.02V6.7a18.5 18.5 0 1 1 .95 36.94A18.5 18.5 0 0 1 1.35 25.17c0-5.67 2.55-10.73 6.58-14.13V9.32A19.78 19.78 0 0 0 0 25.17C0 36.12 8.9 45 19.88 45a19.85 19.85 0 0 0 19.86-19.83c0-10.95-8.9-19.83-19.87-19.83Z"/>,
+  <path fill="currentColor" d="M33.93 35.53c.3-.41.6-.85.87-1.3v-2.66h-.87v3.96Zm2.54-4.92c.12-.4.24-.78.34-1.16h-2.88v.7h.43c.77-.02 1.63-.03 2.11.46Zm-19.19-1.27h-.78v7.91h.78v-7.9Z"/>,
+  <path fill="currentColor" d="M14.7 27.83h2.58c.67 0 1.14.14 1.4.4.27.25.4.72.4 1.38v7.4c0 .66-.12 1.12-.4 1.38-.4.41-1.16.41-1.78.41l-.4-.01v3.5l.78.14v-2.88c1.2 0 1.97-.4 2.34-1.22v4.29h.26l.5-.01V29.74c0-.68.13-1.16.4-1.43.25-.27.72-.4 1.37-.4.67 0 1.65-.1 2.16.4.26.27.38.76.38 1.43v3.8h-1.77v-4.06h-.77v12.99c.26-.03.5-.07.77-.12V34.3h1.77v7.64c.36-.1.72-.21 1.08-.34v-7c0-.8.19-1.4 1-1.67l-.9-4.87h1.8l.3 5.31h.22l.3-5.31h1.88l-1.01 4.87c.84.3 1.01.81 1.01 1.66v4.53a16.63 16.63 0 0 0 1.5-1.27v-9.83h5.25l.1-.72H24.93l.17.89c-.38-.72-1.12-1.08-2.2-1.08h-.77c-1.3 0-2.1.52-2.4 1.55-.27-1.08-1.1-1.62-2.46-1.62h-3.36v14.52c.26.09.52.18.78.25V27.84Zm16.29 5.58-.85-.8.85-4.37v5.17Z"/>,
+  <path fill="currentColor" d="M27.66 40.79c.27-.14.55-.28.8-.43v-5.98h-.8v6.4Z"/>
+</svg>

package/mobile/src/model/Picture.ts

@@ -1,6 +1,8 @@
 import type { IconName } from '../icons/IconName';
 import type { IconVersion } from './IconVersion';
 
+export type ImgFormats = 'jpeg' | 'jpg' | 'png' | 'gif' | 'webp' | 'heif' | 'avif';
+
 export interface Img {
   /** @title Картинка */
   src?: string;
@@ -12,9 +14,9 @@ export interface Img {
 
 /**
  * @title Брейкпоинт
- * @enumNames ["1919px и меньше", "1439px и меньше", "1279px и меньше"]
+ * @enumNames ["Меньше 1920px", "Меньше 1440px", "Меньше 1280px"]
  */
-export type MediaQuery = '(max-width: 1919px)' | '(max-width: 1439px)' | '(max-width: 1279px)';
+export type MediaQuery = 1919 | 1439 | 1279;
 
 export interface ImgSource {
   /** @title Иконка */
@@ -23,7 +25,7 @@ export interface ImgSource {
   /** @title Картинка */
   src?: string;
   /** @title Формат */
-  format?: 'jpeg' | 'jpg' | 'png' | 'gif' | 'webp' | 'heif' | 'avif';
+  format?: ImgFormats;
   /** @hidden */
   options?: Record<string, any>;
   media?: MediaQuery;

package/mobile/src/services/sitemap/findActiveSubItem.ts

@@ -7,9 +7,8 @@ export const findActiveSubItem =
   (router: Router) =>
   <T extends LinkProps>(items: T[] = []): T | null => {
     const possibleActiveSubItems = items?.filter(isSubItemActive(router));
-    const activeSubItem = possibleActiveSubItems?.length
+
+    return possibleActiveSubItems?.length
       ? maxBy((_: T) => _.href?.length || 0)(possibleActiveSubItems) // More specific item with max length
       : null;
-
-    return activeSubItem;
   };

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

@@ -10,7 +10,7 @@ interface BlockWrapperProps {
 }
 
 export const BlockWrapper = JSX<BlockWrapperProps>(
-  ({ anchor, className, context, children, Tag = 'section', ...rest }) => {
+  ({ anchor, className, context, children, Tag = 'section' }) => {
     const { IntersectionObserverTag } = context;
 
     return anchor ? (
@@ -20,14 +20,11 @@ export const BlockWrapper = JSX<BlockWrapperProps>(
         observerCallback={changeHashOnObserve}
         observerOptions={{ threshold: 1 }} // Lower threshold when hash change needed
         anchor={anchor}
-        {...rest}
       >
         {children}
       </IntersectionObserverTag>
     ) : (
-      <Tag className={className} {...rest}>
-        {children}
-      </Tag>
+      <Tag className={className}>{children}</Tag>
     );
   },
 );

package/mobile/src/ui-kit/BlocksList/renderBlocksList.tsx

@@ -17,12 +17,15 @@ export const renderBlocksList = ({ blocks, context, className = '' }: Embeddable
 const renderBlock =
   ({ context, className }: UniBlockProps) =>
   (block: BlockDef, i: number) => {
-    const type = block?.blockListType;
-    if (!type || !(type in EmbeddableBlocks)) {
+    if (!block) {
       return null;
     }
 
-    const { style, ...rest } = block;
+    const { style, blockListType: type, ...rest } = block;
+
+    if (!type || !(type in EmbeddableBlocks)) {
+      return null;
+    }
 
     const classNameBlock = style2className(style);
     const EmbeddedBlock: JSXBlock = EmbeddableBlocks[type];

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

@@ -22,7 +22,7 @@ export const ButtonSection = JSX<ButtonSectionProps>(({ context, className = '',
 
 function renderButton({ icon, iconRight, ...button }: ButtonWithIconProps, i: number) {
   if (!button?.text) {
-    return;
+    return null;
   }
 
   return icon ? (

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

@@ -1,6 +1,6 @@
 import { JSX } from '@redneckz/uni-jsx';
-import type { CheckboxProps } from './CheckboxProps';
 import { SVG } from '../SVG';
+import type { CheckboxProps } from './CheckboxProps';
 
 const CHECK_PATHS = [
   {
@@ -11,27 +11,32 @@ const CHECK_PATHS = [
   },
 ];
 
-export const Checkbox = JSX<CheckboxProps>(({ text, checked, onChange, className }) => (
+export const Checkbox = JSX<CheckboxProps>(({ className, text, checked, isRadio, onChange }) => (
   <div className={className}>
     <label className="flex items-center cursor-pointer relative">
       <input
-        className={`peer appearance-none w-5 h-5 border-solid border ${
-          checked ? 'border-black' : 'border-main-stroke'
-        } rounded checked:bg-primary-main checked:border-primary-main m-0`}
+        className={`peer appearance-none w-5 h-5 border-solid
+        ${isRadio ? 'rounded-full border-2' : 'rounded checked:bg-primary-main border'}
+        ${checked ? 'border-black' : 'border-main-stroke'}
+        checked:border-primary-main m-0`}
         type="checkbox"
         onChange={(e) => {
           onChange(e.target.checked);
         }}
         checked={checked}
       />
-      <SVG
-        paths={CHECK_PATHS}
-        className="hidden absolute left-1 ml-px peer-checked:block"
-        width="11"
-        height="9"
-        fill="white"
-        viewBox="0 0 11 9"
-      />
+      {isRadio ? (
+        <div className="left-1 w-3 h-3 rounded-full bg-primary-main hidden absolute peer-checked:block"></div>
+      ) : (
+        <SVG
+          paths={CHECK_PATHS}
+          className="hidden absolute left-1 ml-px peer-checked:block"
+          width="11"
+          height="9"
+          fill="white"
+          viewBox="0 0 11 9"
+        />
+      )}
       {text ? <span className="font-sans ml-3 text-m-base cursor-pointer">{text}</span> : null}
     </label>
   </div>

package/mobile/src/ui-kit/Checkbox/CheckboxProps.ts

@@ -1,6 +1,7 @@
 export interface CheckboxProps {
   text?: string;
   checked: boolean;
-  onChange: (value: boolean) => void;
   className?: string;
+  isRadio?: boolean;
+  onChange: (value: boolean) => void;
 }

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

@@ -46,19 +46,21 @@ export const Foldable = JSX<FoldableProps>(
       initialState: isUnfolded,
     });
 
+    const buttonClassName =
+      foldButtonClasses ||
+      'border-none bg-primary-main px-0 py-[26px] mb-[1px] w-full font-sans text-white text-base flex justify-center cursor-pointer';
+    const getFoldButtonLabel = isActive ? 'Скрыть' : foldButtonLabel;
+
     return blocks ? (
       <div>
         {renderBlocks(blocks, render, { blocksToHide, isActive, containerClasses })}
         {hiddenBlocksNum ? (
           <button
-            className={
-              foldButtonClasses ||
-              'border-none bg-primary-main px-0 py-[26px] mb-[1px] w-full font-sans text-white text-base flex justify-center cursor-pointer'
-            }
+            className={buttonClassName}
             data-theme={foldButtonDataTheme}
             onClick={handleToggle}
           >
-            <span className="pr-3">{isActive ? 'Скрыть' : foldButtonLabel}</span>
+            <span className="pr-3">{getFoldButtonLabel}</span>
             {icon ? <Icon name={icon} iconVersion="white" width="20" height="20" asSVG /> : null}
           </button>
         ) : null}

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

@@ -8,12 +8,10 @@ const TEXT_CLASSES = 'font-sans font-normal text-sm';
 const BORDER_CLASSES = 'absolute left-0 -bottom-3 w-full h-[2px]';
 
 export const HeaderItem = JSX<HeaderItemProps>(
-  ({ className, text, href, target, active, onClick, children, bgColor = 'bg-white' }) => {
+  ({ className = '', text, href, target, active, onClick, children, bgColor = 'bg-white' }) => {
     return (
       <a
-        className={`relative inline-block bg-transparent text-center no-underline ${
-          className || ''
-        }`}
+        className={`relative inline-block bg-transparent text-center no-underline ${className}`}
         href={href}
         target={target}
         onClick={onClick}
@@ -25,7 +23,7 @@ export const HeaderItem = JSX<HeaderItemProps>(
   },
 );
 
-const getTextClasses = (bgColor: BgColorVersion, active?: boolean) => {
+const getTextClasses = (bgColor: BgColorVersion, active = false) => {
   let classes = 'text-white';
   if (bgColor === 'bg-white') {
     classes = active ? 'text-primary-main' : 'text-secondary-text hover:text-primary-main';
@@ -34,7 +32,7 @@ const getTextClasses = (bgColor: BgColorVersion, active?: boolean) => {
   return `${classes} ${TEXT_CLASSES}`;
 };
 
-const getBorderClasses = (bgColor: BgColorVersion, active?: boolean) => {
+const getBorderClasses = (bgColor: BgColorVersion, active = false) => {
   if (!active) {
     return BORDER_CLASSES;
   }

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

@@ -19,7 +19,7 @@ export const Heading = JSX<HeadingProps>((props) => {
   const { className, headingType, title, as } = props;
 
   if (!headingType) {
-    return;
+    return null;
   }
 
   const Tag = as || headingType;

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

@@ -1,75 +1,8 @@
 import { JSX } from '@redneckz/uni-jsx';
-import { Icon } from '../Icon/Icon';
-import { getIconVersion } from './getIconVersion';
-import type { ImgSource, Picture } from '../../model/Picture';
+import { ImgInner } from './ImgInner';
 
 import type { Image, ImageProps } from './ImgProps';
 
-export const Img = JSX<ImageProps<Image>>(
-  ({ className = '', image, imageClassName = '', ...iconProps }) => {
-    // backwards compatibility with existing icons in usage
-    const icon = typeof image === 'string' ? image : image?.icon;
-    if (icon || icon === '') {
-      return (
-        <Icon
-          className={className}
-          imageClassName={imageClassName}
-          iconVersion={getIconVersion(image)}
-          name={icon}
-          {...iconProps}
-        />
-      );
-    }
-
-    return (
-      <ImgAsPicture
-        className={className}
-        imageClassName={imageClassName}
-        image={image as Picture}
-      />
-    );
-  },
-);
-
-export const ImgAsPicture = JSX<ImageProps<Picture>>(
-  ({ className = '', image, imageClassName = '' }) => {
-    if (!image) {
-      return null;
-    }
-
-    return (
-      <picture className={className}>
-        {image?.sources?.length
-          ? image.sources.map(({ src, format }, index) => (
-              <source key={`${index}_${src}`} srcSet={src} type={formatToMimeType(format)} />
-            ))
-          : null}
-        {renderImg(image, imageClassName)}
-      </picture>
-    );
-  },
-);
-
-const renderImg = (image: Picture, imageClassName = '') => {
-  const style = {
-    width: image.size?.width ? `${image.size?.width}px` : '100%',
-    height: image.size?.height ? `${image.size?.height}px` : '100%',
-  };
-  const title = image.title || '';
-  const alt = image.alt || image.title;
-
-  return (
-    <img
-      src={image.src}
-      className={`m-auto ${imageClassName}`}
-      alt={alt}
-      title={title}
-      style={style}
-      {...image.size}
-    />
-  );
-};
-
-export function formatToMimeType(format: ImgSource['format']): string | undefined {
-  return format ? `image/${String(format)}` : undefined;
-}
+export const Img = JSX<ImageProps<Image>>(({ className = '', image }) => {
+  return <ImgInner className={className} image={image} isMobile={true} />;
+});

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

@@ -0,0 +1,60 @@
+import { JSX } from '@redneckz/uni-jsx';
+import type { ImgSource, Picture } from '../../model/Picture';
+import type { ImageProps } from './ImgProps';
+
+const sourcesComparator = (a: Picture, b: Picture) => {
+  if (a.media && b.media) {
+    return a.media - b.media;
+  }
+
+  return 0;
+};
+
+export const ImgAsPicture = JSX<ImageProps<Picture>>(
+  ({ className = '', image, imageClassName = '', isMobile = false }) => {
+    if (!image) {
+      return null;
+    }
+
+    const pictureStyles = isMobile ? 'flex' : 'flex-none';
+
+    return (
+      <picture className={`${pictureStyles} ${className}`}>
+        {image?.sources?.length
+          ? image.sources
+              .sort(sourcesComparator)
+              .map(({ src, format, media, size }, index) => (
+                <source
+                  key={`${index}_${src}`}
+                  srcSet={src}
+                  type={formatToMimeType(format)}
+                  media={media ? `(max-width: ${media}px)` : ''}
+                  {...size}
+                />
+              ))
+          : null}
+        {renderImg(image, imageClassName, isMobile)}
+      </picture>
+    );
+  },
+);
+
+const renderImg = (image: Picture, imageClassName = '', isMobile = false) => {
+  const title = image.title || '';
+  const alt = image.alt || image.title;
+  const imgStyle = isMobile ? 'm-auto' : 'm-0';
+
+  return (
+    <img
+      src={image.src}
+      className={`${imgStyle} ${imageClassName}`}
+      alt={alt}
+      title={title}
+      {...image.size}
+    />
+  );
+};
+
+export function formatToMimeType(format: ImgSource['format']): string | undefined {
+  return format ? `image/${String(format)}` : undefined;
+}

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

@@ -0,0 +1,37 @@
+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';
+
+export const ImgInner = JSX<ImageProps<Image>>(
+  ({ className = '', image, imageClassName = '', isMobile, ...iconProps }) => {
+    if (!image) {
+      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 (
+      <ImgAsPicture
+        className={className}
+        imageClassName={imageClassName}
+        image={image as Picture}
+        isMobile={isMobile}
+      />
+    );
+  },
+);

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

@@ -9,4 +9,5 @@ export interface ImageContent<T = Picture> {
 export interface ImageProps<T> extends ImageContent<T>, IconCompatibilityFields {
   className?: string;
   imageClassName?: string;
+  isMobile?: boolean;
 }

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

@@ -1,6 +1,6 @@
 import { JSX } from '@redneckz/uni-jsx';
 import { BgColorVersion } from '../../model/BgColorVersion';
-import { SVG } from '../SVG';
+import { Img } from '../Img/Img';
 
 export interface LogoProps {
   className: string;
@@ -10,13 +10,6 @@ export interface LogoProps {
   hideTitle?: boolean;
 }
 
-const LOGO_PATHS = [
-  'm13.72 25.51 4.42-4.33v-2.95l-4.42 4.32v2.96Zm0-10.98 4.42-4.35V7.41l-4.42 4.31v2.8Zm0 3.63 4.42-4.33v-2.78l-4.42 4.32v2.8ZM12.46 7.44l-.6-.56V0h-.66v6.22l-.58-.57V0h-.67v5l-.59-.58V0H8.7v6.56l4.44 4.33V0h-.67v7.44Zm1.26 14.35 4.42-4.33v-2.78L13.72 19v2.8Zm-5.03-.61 4.44 4.33v-2.96l-4.44-4.32v2.95Zm8.79-16.76-.59.58V0h-.66v5.66l-.6.56V0h-.66v6.87l-.58.57V0h-.67v10.9l4.42-4.34V0h-.66v4.42Zm-8.79 5.76 4.44 4.35v-2.8L8.69 7.4v2.77Zm0 3.65 4.44 4.33v-2.8l-4.44-4.3v2.77Zm0 3.63 4.44 4.33V19l-4.44-4.31v2.78Zm26.37 2.29H24.3a2.25 2.25 0 0 0 .36-1.22 2.32 2.32 0 0 0-2.33-2.31 2.32 2.32 0 0 0-2.31 2.31c0 .5.16.96.43 1.34a.74.74 0 0 0-.33.61c0 .26.14.49.33.62a2.32 2.32 0 0 0-.43 1.34 2.31 2.31 0 0 0 2.31 2.31 2.32 2.32 0 0 0 2.33-2.31c0-.45-.13-.87-.36-1.22h8.01v.49h-.8v.68h.8v.7h-.8v1.3h.8v-.58h1.17v.58h.79v-1.3h-.79v-.7h.79v-.68h-.79v-.5h1.58a.56.56 0 0 0 .56-.56v-.34a.57.57 0 0 0-.56-.56Zm-11.53 2.7a1.2 1.2 0 0 1-2.4 0c0-.24.08-.47.2-.66l.34-.56a.97.97 0 0 1-.34-.75c0-.3.13-.56.33-.74l-.32-.56a1.13 1.13 0 0 1-.2-.66 1.2 1.2 0 0 1 2.4 0c0 .49-.56 1.65-.56 1.65v.62c-.01.01.55 1.17.55 1.66ZM4.67 18.34v2.89c0 2.75 1.2 4.53 1.9 5.21l4.58 4.5c1.28 1.25 1.5 1.66 1.79 2.37v-3.2c0-2.84-1.44-3.94-2.19-4.67-1.73-1.68-2.89-2.8-3.82-3.73a8.98 8.98 0 0 1-2.26-3.37Zm6.08 14.24c-1.73-1.7-2.89-2.8-3.82-3.73a10 10 0 0 1-2.25-2.98v2.49a7.87 7.87 0 0 0 1.89 5.24l4.58 4.47c1.28 1.25 1.5 1.85 1.79 2.55v-3.37c0-2.85-1.45-3.95-2.19-4.67Z',
-  'M19.88 5.34c-.32 0-.64 0-.96.02V6.7a18.5 18.5 0 1 1 .95 36.94A18.5 18.5 0 0 1 1.35 25.17c0-5.67 2.55-10.73 6.58-14.13V9.32A19.78 19.78 0 0 0 0 25.17C0 36.12 8.9 45 19.88 45a19.85 19.85 0 0 0 19.86-19.83c0-10.95-8.9-19.83-19.87-19.83Z',
-  'M33.93 35.53c.3-.41.6-.85.87-1.3v-2.66h-.87v3.96Zm2.54-4.92c.12-.4.24-.78.34-1.16h-2.88v.7h.43c.77-.02 1.63-.03 2.11.46Zm-19.19-1.27h-.78v7.91h.78v-7.9Z',
-  'M14.7 27.83h2.58c.67 0 1.14.14 1.4.4.27.25.4.72.4 1.38v7.4c0 .66-.12 1.12-.4 1.38-.4.41-1.16.41-1.78.41l-.4-.01v3.5l.78.14v-2.88c1.2 0 1.97-.4 2.34-1.22v4.29h.26l.5-.01V29.74c0-.68.13-1.16.4-1.43.25-.27.72-.4 1.37-.4.67 0 1.65-.1 2.16.4.26.27.38.76.38 1.43v3.8h-1.77v-4.06h-.77v12.99c.26-.03.5-.07.77-.12V34.3h1.77v7.64c.36-.1.72-.21 1.08-.34v-7c0-.8.19-1.4 1-1.67l-.9-4.87h1.8l.3 5.31h.22l.3-5.31h1.88l-1.01 4.87c.84.3 1.01.81 1.01 1.66v4.53a16.63 16.63 0 0 0 1.5-1.27v-9.83h5.25l.1-.72H24.93l.17.89c-.38-.72-1.12-1.08-2.2-1.08h-.77c-1.3 0-2.1.52-2.4 1.55-.27-1.08-1.1-1.62-2.46-1.62h-3.36v14.52c.26.09.52.18.78.25V27.84Zm16.29 5.58-.85-.8.85-4.37v5.17Z',
-  'M27.66 40.79c.27-.14.55-.28.8-.43v-5.98h-.8v6.4Z',
-];
 const SVG_COLOR: Record<BgColorVersion, string> = {
   'bg-white': 'text-primary-main',
   transparent: 'text-white',
@@ -35,11 +28,7 @@ export const Logo = JSX<Partial<LogoProps>>(
         target={targetBlank ? '_blank' : '_self'}
         aria-label="Россельхозбанк"
       >
-        <SVG
-          className={`${SVG_COLOR[bgColor]} w-10 h-[38px]`}
-          viewBox="0 0 40 45"
-          paths={LOGO_PATHS.map((d) => ({ d }))}
-        />
+        <Img image={{ icon: 'Logo' }} className={`${SVG_COLOR[bgColor]} w-10 h-[38px]`} asSVG />
         {hideTitle ? null : (
           <span className={`${TEXT_COLOR[bgColor]} text-sm font-medium ml-2.5`}>
             {children || 'Россельхозбанк'}

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

@@ -0,0 +1,32 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { UniBlockProps } from '../../types';
+import { Checkbox } from '../Checkbox/Checkbox';
+
+interface RadioButtonItem {
+  id: string;
+  text: string;
+}
+
+interface RadioButtonGroupProps extends UniBlockProps {
+  items: RadioButtonItem[];
+  checkedItem?: string;
+  onChangeCheckedItem: (id: string) => void;
+}
+
+export const RadioButtonGroup = JSX<RadioButtonGroupProps>(
+  ({ items, checkedItem, onChangeCheckedItem }) => {
+    return (
+      <div>
+        {items?.map(({ id, text }) => (
+          <Checkbox
+            key={id}
+            isRadio
+            text={text}
+            checked={checkedItem === id}
+            onChange={() => onChangeCheckedItem(id)}
+          />
+        ))}
+      </div>
+    );
+  },
+);

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

@@ -1,45 +1,7 @@
 import { JSX } from '@redneckz/uni-jsx';
 import type { UniBlockProps } from '../../types';
-import { Img } from '../Img/Img';
+import { SearchBarInner } from './SearchBarInner';
 
-export const SearchBar = JSX<UniBlockProps>(({ className, context }) => {
-  const { term, setTerm } = context.useSearch();
-
-  return (
-    <form className={`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="w-[20px] h-[20px]">
-          <Img image="LoupeIcon" width="24" height="24" />
-        </div>
-        {term ? null : (
-          <label
-            htmlFor="search-bar-input"
-            className="font-sans font-normal text-sm text-secondary-text"
-          >
-            Поиск по сайту
-          </label>
-        )}
-      </div>
-      <input
-        id="search-bar-input"
-        className={
-          'h-12 pl-12 w-full peer placeholder-transparent font-sans font-normal text-base text-black border border-solid rounded box-border outline-none pr-[6%] border-main-divider focus:border-primary-text'
-        }
-        value={term}
-        onChange={(e) => setTerm(e.target.value)}
-        type="text"
-        name="search-bar-input"
-        placeholder="some search"
-      />
-      <button
-        className="visible peer-placeholder-shown:invisible absolute top-2 right-3 w-6 h-6 p-1 bg-transparent cursor-pointer border-none"
-        onClick={(e) => {
-          e.preventDefault();
-          setTerm('');
-        }}
-      >
-        <Img image="CloseIcon" width="24" height="24" />
-      </button>
-    </form>
-  );
+export const SearchBar = JSX<UniBlockProps>(({ className = '', context }) => {
+  return <SearchBarInner context={context} className={className} isMobile={true} />;
 });

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

@@ -0,0 +1,72 @@
+import { JSX } from '@redneckz/uni-jsx';
+import type { UniBlockProps } from '../../types';
+import { Button } from '../Button/Button';
+import { Img } from '../Img/Img';
+
+export interface SearchBarInnerProps extends UniBlockProps {
+  isMobile?: boolean;
+}
+
+export const SearchBarInner = JSX<SearchBarInnerProps>(
+  ({ className, context, isMobile = false }) => {
+    const { term, setTerm } = context.useSearch();
+
+    const LoupeIconClassName = isMobile ? 'w-[20px] h-[20px]' : 'w-[24px] h-[24px]';
+    const SearchBarLabelClassName = isMobile ? 'font-normal text-sm' : 'font-light text-base';
+    const SearchBarInputClassName = isMobile
+      ? ' placeholder-transparent font-normal'
+      : 'font-light h-full';
+    const inputPlaceholder = isMobile ? 'some search' : null;
+
+    return (
+      <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" />
+          </div>
+          {term ? null : (
+            <label
+              htmlFor="search-bar-input"
+              className={`text-secondary-text ${SearchBarLabelClassName}`}
+            >
+              Поиск по сайту
+            </label>
+          )}
+        </div>
+        <input
+          id="search-bar-input"
+          className={`h-12 pl-12 w-full peer text-base text-black border border-solid rounded box-border
+              outline-none pr-[6%] border-main-divider focus:border-primary-text ${SearchBarInputClassName}`}
+          value={term}
+          onChange={(e) => setTerm(e.target.value)}
+          type="text"
+          name="search-bar-input"
+          placeholder={inputPlaceholder}
+        />
+        {isMobile ? (
+          <button
+            className="visible peer-placeholder-shown:invisible absolute top-2 right-3 w-6 h-6 p-1 bg-transparent cursor-pointer border-none"
+            onClick={(e) => {
+              e.preventDefault();
+              setTerm('');
+            }}
+          >
+            <Img image="CloseIcon" width="24" height="24" />
+          </button>
+        ) : (
+          <Button
+            version="primary"
+            text="Найти"
+            className="invisible peer-focus:visible absolute top-1 right-1"
+            onClick={(e) => {
+              e.preventDefault();
+              console.log('click');
+            }}
+          >
+            <div className="font-normal text-sm px-9 py-[9px]">Найти</div>
+          </Button>
+        )}
+      </form>
+    );
+  },
+);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@redneckz/wildless-cms-uni-blocks",
-  "version": "0.3.83",
+  "version": "0.3.85",
   "private": false,
   "license": "MIT",
   "author": "ЦК",
@@ -133,6 +133,7 @@
     "eslint-plugin-import": "^2.26.0",
     "eslint-plugin-local-eslint-rules": "./eslint-rules",
     "eslint-plugin-react": "^7.30.1",
+    "eslint-plugin-sonarjs": "^0.15.0",
     "html-webpack-plugin": "^5.5.0",
     "husky": "^8.0.1",
     "jest": "^28.1.3",