@redneckz/wildless-cms-uni-blocks 0.15.341 → 0.16.1

package/mobile/src/ui-kit/FormField/getObjectValidator.tsx

@@ -0,0 +1,54 @@
+import { type FieldDef } from '../../components/ApplicationForm/ApplicationFormContent';
+import { type Validator } from '../../validation/validator';
+import { getNamesFromInput } from './getNamesFromInput';
+import {
+  agreementValidator,
+  defaultSelectValidator,
+  defaultValidator,
+  innValidator,
+  nameValidator,
+  phoneValidator,
+} from './validators';
+
+export const validatorObj: Record<string, Validator> = {
+  typeForm: defaultValidator,
+  surname: nameValidator,
+  name: nameValidator,
+  region: defaultSelectValidator,
+  addressBranch: defaultSelectValidator,
+  phone: phoneValidator,
+  secondaryPhone: phoneValidator,
+  birthday: defaultValidator,
+  email: defaultValidator,
+  fullName: nameValidator,
+  inn: innValidator,
+  partnerComments: defaultValidator,
+  collectionCount: defaultValidator,
+  comment: defaultValidator,
+  acquiringType: defaultSelectValidator,
+  feedbackType: defaultSelectValidator,
+  feedbackMethod: defaultSelectValidator,
+  serviceType: defaultSelectValidator,
+  serviceDirection: defaultSelectValidator,
+  meetingDay: defaultValidator,
+  product: defaultValidator,
+  localities: defaultValidator,
+  consentDataProcessing: agreementValidator,
+  annualRevenue: defaultValidator,
+  consentToReceiveMaterials: agreementValidator,
+  processPersonalDataLeadFlg: agreementValidator,
+  consentProviderFlg: agreementValidator,
+  consentPhotoFlg: agreementValidator,
+  consentPfrFlg: agreementValidator,
+  consentAssignmentClaimsFlg: agreementValidator,
+  consentCollectionFlg: agreementValidator,
+  consentInformFlg: agreementValidator,
+};
+
+export const getObjectValidator = (inputs: FieldDef[]): Record<string, Validator> => {
+  const requiredInputs = getNamesFromInput(
+    inputs.filter((_: FieldDef) => ('required' in _ ? _.required : false)),
+  );
+
+  return Object.fromEntries(requiredInputs.map((_) => [_, validatorObj?.[_]]));
+};

package/mobile/src/ui-kit/FormField/inputColumnStyle.tsx

@@ -0,0 +1,4 @@
+import type { FormColumnsCount } from '../../components/ApplicationLeadForm/ApplicationLeadFormContent';
+
+export const inputColumnStyles = (column: FormColumnsCount | undefined) =>
+  column === 2 ? '@xl:grid-cols-2' : '';

package/mobile/src/ui-kit/FormField/isRenderField.tsx

@@ -0,0 +1,15 @@
+import { type FieldDef } from '../../components/ApplicationForm/ApplicationFormContent';
+import { type FormFieldRegisterer } from '../../hooks/useForm';
+
+export function isRenderField({
+  input,
+  field,
+}: {
+  input: FieldDef;
+  field: FormFieldRegisterer<any>;
+}) {
+  const { condition } = input;
+  const { value } = field(condition?.name || '');
+
+  return !condition || condition?.values?.find((_) => _ === (value?.key ?? value));
+}

package/mobile/src/ui-kit/FormField/renderTitle.tsx

@@ -0,0 +1,8 @@
+import { Text } from '../Text/Text';
+
+export const renderTitle = (title?: string) =>
+  title ? (
+    <div className="@xl:text-center @xl:col-span-2 mb-m">
+      <Text size="text-h6">{title}</Text>
+    </div>
+  ) : null;

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

@@ -1,12 +1,11 @@
 import { JSX } from '@redneckz/uni-jsx';
 import { useLink } from '../../hooks/useLink';
+import { getAspectsAttributes } from '../../utils/dataAttributes';
 import { style } from '../../utils/style';
 import { type TopItemProps } from '../TopItem/TopItem';
 
-export type HeaderItemProps = TopItemProps;
-
 export const HeaderItem = JSX<TopItemProps>(
-  ({ className = '', active, dataItemName, children, ...rest }) => {
+  ({ className = '', active, dataItemName, children, data, ...rest }) => {
     const link = useLink();
     const { href, target, text, onClick } = link(rest);
 
@@ -20,10 +19,12 @@ export const HeaderItem = JSX<TopItemProps>(
         target={target}
         data-item-name={dataItemName}
         onClick={onClick}
+        // eslint-disable-next-line react/jsx-props-no-spreading
+        {...getAspectsAttributes(data)}
       >
         <span className={getTextStyle(active)}>{text || children}</span>
         {active ? (
-          <div className="absolute left-0 -bottom-3 w-full h-0.5 bg-primary-main group-data-transparent:bg-transparent" />
+          <div className="absolute left-0 right-0 -bottom-3 h-0.5 bg-primary-main group-data-transparent:bg-white" />
         ) : null}
       </a>
     );
@@ -32,7 +33,7 @@ export const HeaderItem = JSX<TopItemProps>(
 
 const getTextStyle = (active = false) =>
   style(
-    'font-sans text-s',
-    active ? 'text-primary-main' : 'text-secondary-text hover:text-primary-main',
+    'font-sans text-l lg:font-light',
+    active ? 'text-primary-main' : 'text-primary-text hover:text-primary-main',
     'group-data-transparent:text-white group-data-transparent:hover:text-primary-hover',
   );

package/mobile/src/ui-kit/Heading/HeadingProps.ts

@@ -18,8 +18,6 @@ export interface HeadingCommonProps extends TitleProps {
 }
 
 export interface HeadingProps extends HeadingCommonProps {
-  /**
-   * @hidden
-   */
+  /** @hidden */
   className?: string;
 }

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

@@ -9,10 +9,12 @@ import { joinPath } from '../../utils/url';
 import { type IconProps } from './IconProps';
 
 const svgUseStyleMap: Record<IconVersion, string> = {
+  '': '',
   normal: '',
   color: 'text-primary-main',
   black: 'text-black',
   white: 'text-black',
+  gray: 'text-gray',
 };
 
 export const Icon = JSX<IconProps>(
@@ -51,7 +53,9 @@ export const Icon = JSX<IconProps>(
           className={style(
             getSvgSize(width),
             svgUseStyleMap[iconVersion],
-            iconVersion === 'white' ? 'invert' : '',
+            {
+              invert: iconVersion === 'white',
+            },
             imageClassName,
           )}
           width={width}

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

@@ -4,7 +4,7 @@ import { ImgAsPicture } from './ImgAsPicture';
 import { type ImageProps } from './ImgProps';
 
 export const Img = JSX<ImageProps>(
-  ({ className = '', image, imageClassName = '', pathPrefix, ...iconProps }) => {
+  ({ className = '', image, imageClassName = '', ...iconProps }) => {
     if (!image?.src && !image?.icon) {
       return null;
     }
@@ -18,12 +18,7 @@ export const Img = JSX<ImageProps>(
         {...iconProps}
       />
     ) : (
-      <ImgAsPicture
-        className={className}
-        imageClassName={imageClassName}
-        image={image}
-        pathPrefix={pathPrefix}
-      />
+      <ImgAsPicture className={className} imageClassName={imageClassName} image={image} />
     );
   },
 );

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

@@ -8,34 +8,32 @@ import { type ImageProps } from './ImgProps';
 const sourcesComparator = (a: Picture, b: Picture) =>
   a?.media && b?.media ? a.media - b.media : 0;
 
-export const ImgAsPicture = JSX<ImageProps>(
-  ({ className = '', image, imageClassName = '', pathPrefix }) => {
-    const router = useRouter();
+export const ImgAsPicture = JSX<ImageProps>(({ className = '', image, imageClassName = '' }) => {
+  const router = useRouter();
 
-    return (
-      <picture className={className}>
-        {image?.sources?.length
-          ? image.sources
-              .filter((_) => _?.src)
-              .sort(sourcesComparator)
-              .map(({ src, format, media }, index) => (
-                <source
-                  key={`${index}_${src}`}
-                  srcSet={adjustSrc(router, pathPrefix)(src)}
-                  type={formatToMimeType(format)}
-                  media={media ? `(max-width: ${media}px)` : ''}
-                  width={image?.size?.width}
-                  height={image?.size?.height}
-                />
-              ))
-          : null}
-        {image?.src
-          ? renderImg({ ...image, src: adjustSrc(router, pathPrefix)(image.src) }, imageClassName)
-          : null}
-      </picture>
-    );
-  },
-);
+  return (
+    <picture className={className}>
+      {image?.sources?.length
+        ? image.sources
+            .filter((_) => _?.src)
+            .sort(sourcesComparator)
+            .map(({ src, format, media }, index) => (
+              <source
+                key={`${index}_${src}`}
+                srcSet={adjustSrc(router)(src)}
+                type={formatToMimeType(format)}
+                media={media ? `(max-width: ${media}px)` : ''}
+                width={image?.size?.width}
+                height={image?.size?.height}
+              />
+            ))
+        : null}
+      {image?.src
+        ? renderImg({ ...image, src: adjustSrc(router)(image.src) }, imageClassName)
+        : null}
+    </picture>
+  );
+});
 
 const renderImg = (image: Picture, imageClassName = '') => (
   <img

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

@@ -8,5 +8,4 @@ export interface ImageContent {
 export interface ImageProps extends ImageContent, IconCompatibilityFields {
   className?: string;
   imageClassName?: string;
-  pathPrefix?: string;
 }

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

@@ -1,20 +1,22 @@
-import { JSX } from '@redneckz/uni-jsx';
 import { useCallback, useState } from '@redneckz/uni-jsx/lib/hooks';
+import { type JSONRefObject } from '../../data/JSONRefObject';
+import { UniBlock } from '../../UniBlock/UniBlock';
+import { type UniBlockProps } from '../../UniBlock/UniBlockProps';
 import { Text } from '../Text/Text';
 import { InnerTableBody } from './InnerTableBody';
 import { TableInnerButton } from './InnerTableButton';
 import { InnerTableHeader } from './InnerTableHeader';
 import { type TableFetchData, type TariffsTableInnerContent } from './InnerTableProps';
-import { useTariffsInnerTableData } from './useTariffsInnerTableData';
 
-export interface InnerTableProps extends TariffsTableInnerContent {
+export interface InnerTableProps extends TariffsTableInnerContent, UniBlockProps {
   onClick?: () => void;
+  tableSource?: JSONRefObject & TableFetchData;
 }
 
 const EMPTY_DATA = 'Данных нет';
 
-export const InnerTable = JSX<InnerTableProps>(({ dataUrl, pdfUrl, onClick }) => {
-  const { tableData }: TableFetchData = useTariffsInnerTableData(dataUrl);
+export const InnerTable = UniBlock<InnerTableProps>(({ tableSource, pdfUrl, onClick }) => {
+  const tableData = tableSource?.tableData;
   const [activeTabIndex, setActiveTabIndex] = useState(0);
   const handleActiveTabIndex = useCallback((_: number) => setActiveTabIndex(_), []);
   const items = tableData?.[activeTabIndex]?.items ?? [];

package/mobile/src/ui-kit/InnerTable/InnerTableButton.tsx

@@ -17,7 +17,7 @@ export const TableInnerButton = JSX<InnerTableButtonProps>(
     <LinkButton
       className={className}
       appendRight={
-        <Img image={{ icon: isOpen ? 'ArrowUpIcon' : 'ArrowDownIcon' }} width="20" height="20" />
+        <Img image={{ icon: isOpen ? 'ArrowUpIcon' : 'ArrowDownIcon' }} width="24" height="24" />
       }
       text={isOpen ? 'Скрыть' : 'Показать'}
       version="gray"

package/mobile/src/ui-kit/InnerTable/InnerTableHeader.tsx

@@ -3,7 +3,7 @@ import { style } from '../../utils/style';
 import { Icon } from '../Icon/Icon';
 import { LinkButton } from '../LinkButton/LinkButton';
 import { Text } from '../Text/Text';
-import type { TextColor } from '../Text/TextProps';
+import { type TextColor } from '../Text/TextProps';
 import { linkButtonVersion } from './linkButtonVersion';
 
 export interface InnerTableHeaderProps {
@@ -24,10 +24,9 @@ export const InnerTableHeader = JSX<InnerTableHeaderProps>(
           {currencies.map((currency, idx) => (
             <div
               key={currency}
-              className={style(
-                'rounded-md px-4 py-3 cursor-pointer',
-                idx === activeTabIndex ? 'bg-primary-main' : '',
-              )}
+              className={style('rounded-md px-4 py-3 cursor-pointer', {
+                'bg-primary-main': idx === activeTabIndex,
+              })}
               onClick={() => setActiveTabIndex(idx)}
             >
               <Text size="text-xl" font="font-light" color={TableColor(idx === activeTabIndex)}>

package/mobile/src/ui-kit/InnerTable/InnerTableProps.ts

@@ -1,3 +1,4 @@
+import { type JSONRefObject } from '../../data/JSONRefObject';
 import { type TitleProps } from '../../model/HeadlineType';
 
 export type RowsData = {
@@ -20,7 +21,7 @@ export type TableFetchData = {
 
 export interface TariffsTableInnerContent {
   /** @title Справочник */
-  dataUrl?: string; // TODO: JSON Ref
+  tableSource?: JSONRefObject;
   /** @title Ссылка PDF-файл */
   pdfUrl?: string;
 }

package/mobile/src/ui-kit/InnerTable/renderInnerTableRow.tsx

@@ -47,7 +47,7 @@ export const renderInnerTableRow =
 
 const renderCols = (cols: string[], rowIndex: number) =>
   cols?.length > 0 ? (
-    <div className={style('flex', rowIndex === 0 ? 'text-secondary-text' : '')}>
+    <div className={style('flex', { 'text-secondary-text': rowIndex === 0 })}>
       {cols.map((data, i) => (
         <div key={String(i)} className="w-20 mx-lg">
           <Text size="text-h6" font="font-light">

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

@@ -2,6 +2,7 @@ import { JSX } from '@redneckz/uni-jsx';
 import { useCallback, useEffect, useRef } from '@redneckz/uni-jsx/lib/hooks';
 import { style } from '../../utils/style';
 import { type InputProps } from './InputProps';
+import { inputValidStyle } from './inputValidStyle';
 import { renderLabel } from './renderLabel';
 
 export const Input = JSX<InputProps>(
@@ -52,7 +53,7 @@ export const Input = JSX<InputProps>(
               name={name || id}
               placeholder={placeholder}
               value={value}
-              onInput={handleChange as any}
+              onChange={handleChange}
               onFocus={onFocus}
               onBlur={onBlur}
             />
@@ -66,7 +67,7 @@ export const Input = JSX<InputProps>(
               name={name || id}
               placeholder={placeholder}
               value={value}
-              onInput={handleChange as any}
+              onChange={handleChange}
               onFocus={onFocus}
               onBlur={onBlur}
               pattern={pattern}
@@ -79,7 +80,4 @@ export const Input = JSX<InputProps>(
   },
 );
 
-const getValidStyle = (valid: boolean) =>
-  valid
-    ? 'border-gray hover:border-primary-hover active:border-primary-text focus:border-primary-text'
-    : 'border-error';
+const getValidStyle = (valid: boolean) => (valid ? inputValidStyle : 'border-error');

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

@@ -0,0 +1,2 @@
+export const inputValidStyle =
+  'border border-solid outline-none border-gray hover:border-primary-hover active:border-primary-text focus:border-primary-text rounded';

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

@@ -4,12 +4,13 @@ import { useNormalizedInput } from '../../hooks/useNormalizedInput';
 import { clamp } from '../../utils/clamp';
 import { style } from '../../utils/style';
 import { toLocalNumberFormat } from '../../utils/toLocalNumberFormat';
+import { inputValidStyle } from '../Input/inputValidStyle';
 import { Text } from '../Text/Text';
 import { type InputRangeProps } from './InputRangeProps';
 import { parseDecimal } from './parseDecimal';
 import { renderRangeWithTicks } from './renderRangeWithTicks';
 
-const DISABLED_INPUT_CLASSES = 'disabled:border-gray disabled:bg-main-divider';
+const inputDisabledStyle = 'disabled:border-gray disabled:bg-main-divider';
 
 const DEFAULT_MIN = 1;
 const DEFAULT_MAX = 100;
@@ -51,14 +52,14 @@ export const InputRange = JSX<InputRangeProps>((props) => {
         ) : null}
         <input
           className={style(
-            'mt-xs font-sans text-h3 w-full h-14',
-            'border border-solid border-gray rounded-md outline-none',
-            'pl-m box-border',
-            'text-primary-text hover:border-primary-hover focus:border-primary-text',
-            DISABLED_INPUT_CLASSES,
+            'text-h3 w-full h-14',
+            'pl-m mt-xs box-border',
+            'text-primary-text',
+            inputValidStyle,
+            inputDisabledStyle,
           )}
           disabled={disabled}
-          onInput={handleChange as any}
+          onChange={handleChange}
           {...normalizedProps}
         />
         {renderRangeWithTicks({ list, min, max, step, disabled, value, onChange })}

package/mobile/src/ui-kit/InputRange/InputRangeProps.ts

@@ -1,7 +1,6 @@
 import { type InputProps } from '../Input/InputProps';
-import { type ListContent } from '../List/ListContent';
 
-export interface InputRangeProps extends ListContent, InputProps<number> {
+export interface InputRangeProps extends InputProps<number> {
   items?: string[];
   min?: number;
   max?: number;

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

@@ -52,7 +52,7 @@ export function renderRangeWithTicks({
           step={step}
           value={rangeValue}
           disabled={disabled}
-          onInput={
+          onChange={
             ((ev: { target?: { value?: string } }) => {
               const rawValue = parseDecimal(ev.target?.value);
               const newValue = list.length ? list[rawValue] : rawValue;

package/mobile/src/ui-kit/LinkButton/ArrowButton.tsx

@@ -13,7 +13,7 @@ export const ArrowButton = JSX<LinkButtonProps>(({ className, disabled, ...rest
       disabled
         ? 'bg-secondary-light text-secondary-text'
         : 'bg-white text-primary-text hover:text-primary-main',
-      className || '',
+      className,
     )}
     disabled={disabled}
     {...rest}

package/mobile/src/ui-kit/LinkButton/ButtonInner.tsx

@@ -7,10 +7,10 @@ import { type LinkButtonProps } from './LinkButtonProps';
 /** @deprecated */
 export const ButtonInner = JSX<LinkButtonProps>((props) => {
   const { text, aboveText, appendLeft, appendRight, version = 'primary' } = props;
-  const iconHideStyle = isWithText(props) ? 'hidden lg:block' : '';
+  const iconHideStyle = isWithText(props) && 'hidden lg:block';
 
   return (
-    <div className={style(getButtonStyle(props), 'flex gap-xs')}>
+    <div className={style(buttonStyle(props), 'flex gap-xs')}>
       {appendLeft ? (
         <div className={style(iconHideStyle, iconStyleMap[version])}>{appendLeft}</div>
       ) : null}
@@ -27,7 +27,7 @@ export const ButtonInner = JSX<LinkButtonProps>((props) => {
   );
 });
 
-const getButtonStyle = (props: LinkButtonContent) => {
+const buttonStyle = (props: LinkButtonContent) => {
   const { version, aboveText, rounded } = props;
 
   if (version === 'link') {
@@ -39,7 +39,9 @@ const getButtonStyle = (props: LinkButtonContent) => {
   return style(
     'group/btn items-center justify-center',
     isWithText(props) ? withTextStyle : 'h-12 w-12 m-auto',
-    rounded ? 'rounded-full' : '',
+    {
+      'rounded-full': rounded,
+    },
   );
 };
 

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

@@ -37,13 +37,14 @@ const RegularButton = JSX<LinkButtonProps>(
     type,
     data,
     children,
+    text,
   }) => (
     <a
       className={getRegularButtonClasses({ className, version, rounded })}
       href={href}
       rel={rel}
       target={target}
-      aria-label={ariaLabel}
+      aria-label={ariaLabel || `Ссылка на ${text}`}
       role={href ? 'link' : 'button'}
       onClick={onClick}
       type={type}

package/mobile/src/ui-kit/LinkButton/renderButtonsSection.tsx

@@ -22,7 +22,7 @@ export const renderButtonsSection = (
         'flex',
         isVertical
           ? 'flex-col gap-xs justify-items-stretch'
-          : 'flex-wrap @xl:flex-nowrap gap-lg sm:gap-m',
+          : 'flex-wrap @xl:flex-nowrap gap-lg sm:gap-m w-full @lg:w-auto',
         className,
       )}
       role="group"
@@ -56,14 +56,14 @@ const DEFAULT_ICON_W = 24;
 const getIconVersion = (icon: Picture | undefined, version = 'secondary') => {
   const iconVersionDefault = version === 'secondary' ? 'color' : 'white';
 
-  return icon?.iconVersion ? icon?.iconVersion : iconVersionDefault;
+  return icon?.iconVersion || iconVersionDefault;
 };
 
 const renderButtonIcon = (icon: Picture) =>
-  isIcon(icon) ? (
+  isIcon(icon) && (
     <Img
       image={icon}
       width={String(icon?.size?.width || DEFAULT_ICON_W)}
       height={String(DEFAULT_ICON_W)}
     />
-  ) : null;
+  );

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

@@ -9,13 +9,12 @@ interface LinkWrapperProps extends AspectsProps {
   className?: string;
   href?: string;
   target?: Target;
-  isRemote?: boolean;
   onClick?: () => void;
 }
 
 export const LinkWrapper = JSX<LinkWrapperProps>(
-  ({ className = '', href, target, isRemote = false, onClick, data, children }) => {
-    const link = useLink({ isRemote });
+  ({ className = '', href, target, onClick, data, children }) => {
+    const link = useLink();
     const linkProps = link({ href, target, onClick });
     const Tag = href ? 'a' : 'div';
 

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

@@ -0,0 +1,30 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { type TextColor } from '../../ui-kit/Text/TextProps';
+import { style } from '../../utils/style';
+
+interface LoaderProps {
+  color?: TextColor;
+  position?: 'static' | 'absolute';
+  blur?: boolean;
+}
+
+export const Loader = JSX<LoaderProps>(
+  ({ color = 'text-primary-main', position = 'absolute', blur = true }) => (
+    <div
+      className={style('flex justify-center items-center h-full w-full z-50', position, {
+        'backdrop-blur': blur,
+      })}
+    >
+      <div
+        className={style(
+          'inline-block h-28 w-28',
+          'animate-spin rounded-full',
+          'border-8 border-solid border-current',
+          'border-r-transparent',
+          color,
+        )}
+        role="status"
+      />
+    </div>
+  ),
+);

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

@@ -1,6 +1,6 @@
 import { JSX } from '@redneckz/uni-jsx';
 import { useCallback, useState } from '@redneckz/uni-jsx/lib/hooks';
-import { type BranchesSitemap, type ForeignOfficeProps } from '../../data/SitemapData';
+import { type BranchesHeader, type ForeignOfficeProps } from '../../data/HeaderData';
 import { useLink } from '../../hooks/useLink';
 import { useLocation } from '../../hooks/useLocation';
 import { useRegions, type Region } from '../../hooks/useRegions';
@@ -20,13 +20,13 @@ const SEARCH_TERM_MIN_LENGTH = 3;
 
 export interface LocationDialogProps {
   foreignOffices?: ForeignOfficeProps[];
-  branches?: BranchesSitemap;
+  branches?: BranchesHeader;
 }
 
 export const LocationDialog = JSX<LocationDialogProps>(({ foreignOffices, branches }) => {
   const [currentLocation, selectCurrentLocation] = useLocation(branches?.default);
 
-  const link = useLink({ isRemote: true });
+  const link = useLink();
   const { href } = link({ href: `/branches/${currentLocation.slug}` });
 
   const [query, setQuery] = useState('');
@@ -55,7 +55,7 @@ export const LocationDialog = JSX<LocationDialogProps>(({ foreignOffices, branch
             <div className="mb-s">
               <Paragraph size="text-l" color="text-primary-text">
                 Сейчас выбран:
-                <LinkWrapper isRemote href={href} className="inline mx-2xs text-primary-main">
+                <LinkWrapper href={href} className="inline mx-2xs text-primary-main">
                   {currentLocation.name}
                 </LinkWrapper>
               </Paragraph>
@@ -75,7 +75,7 @@ export const LocationDialog = JSX<LocationDialogProps>(({ foreignOffices, branch
             .map(renderRegion(branches?.dataSelect, handleChangeLocation))}
         </div>
       ) : (
-        <div className="columns-1 sm:columns-5">
+        <div className="columns-1 sm:columns-3 md:columns-4 lg:columns-5">
           {Array.from(regionsGroupByLetter.entries()).map(
             renderRegionGroup(handleChangeLocation, branches?.dataSelect),
           )}

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

@@ -1,4 +1,6 @@
 import { JSX } from '@redneckz/uni-jsx';
+import { style } from '../../utils/style';
+import { inputValidStyle } from '../Input/inputValidStyle';
 
 export interface SearchBarInnerProps {
   className?: string;
@@ -18,10 +20,12 @@ export const SearchBar = JSX<SearchBarInnerProps>(({ className, searchTerm, onSe
       </div>
       <input
         id="search-bar-input"
-        className={`h-12 pl-m w-full peer text-l text-black border border-solid rounded-md box-border
-              outline-none border-gray hover:border-primary-hover active:border-primary-text focus:border-primary-text`}
+        className={style(
+          inputValidStyle,
+          `h-12 pl-m w-full peer text-l text-black rounded-md box-border`,
+        )}
         value={searchTerm}
-        onChange={(e) => onSearch(e.target.value.toLowerCase() as string)}
+        onChange={(e) => onSearch(e.target.value.toLowerCase())}
         type="text"
         name="location-search-bar-input"
       />