@redneckz/wildless-cms-uni-blocks 0.14.608 → 0.14.616

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

@@ -10,9 +10,9 @@ import { type ControlProps } from '../ControlProps';
 import { Icon } from '../Icon/Icon';
 import { type IconName } from '../Icon/IconProps';
 import { renderLabel } from '../Input/renderLabel';
-import { Paragraph } from '../Paragraph/Paragraph';
 import { Select } from '../Select/Select';
 import { Calendar } from './Calendar';
+import { DatePickerInput } from './DatePickerInput';
 import { months } from './months';
 import { useDatePickerManager } from './useDatePickerManager';
 
@@ -30,7 +30,7 @@ const SELECT_PROPS: { className: string; iconVersion: IconVersion; isBorder: boo
 };
 
 const formStyle =
-  'flex justify-between items-center h-14 px-m py-s border rounded-md cursor-pointer ' +
+  'flex justify-between items-center h-14 py-s border rounded-md cursor-pointer ' +
   'hover:border-black active:border-black focus:border-black';
 
 interface DatePickerProps extends ControlProps<Date>, LabelProps {
@@ -41,6 +41,7 @@ interface DatePickerProps extends ControlProps<Date>, LabelProps {
 }
 
 export const DatePicker = JSX<DatePickerProps>(
+  // eslint-disable-next-line max-lines-per-function
   ({ className = '', label = '', value, valid = true, minDate, maxDate, onChange }) => {
     const [showCalendar, { setValue }] = useBool(false);
     const [selectedMonth, setSelectedMonth] = useState(value?.getMonth() || new Date().getMonth());
@@ -64,6 +65,8 @@ export const DatePicker = JSX<DatePickerProps>(
       selectedYear,
       selectedMonth,
       showCalendar,
+      onChange,
+      value,
     });
 
     const spaceAbove = useElementSpace(ref, 370);
@@ -72,7 +75,14 @@ export const DatePicker = JSX<DatePickerProps>(
       <div className={style('space-y-xs', className)} ref={ref}>
         {renderLabel(label)}
         <div className="relative">
-          {renderDatePickerForm(handleChangeVisibleCalendar, value, valid)}
+          {renderDatePickerForm({
+            handleChangeVisibleCalendar,
+            value,
+            valid,
+            onChange,
+            setSelectedMonth,
+            setSelectedYear,
+          })}
           {showCalendar ? (
             <div
               className={style('absolute bg-white z-20 select-none', {
@@ -116,16 +126,27 @@ export const DatePicker = JSX<DatePickerProps>(
   },
 );
 
-const renderDatePickerForm = (
-  handleChangeVisibleCalendar: () => void,
-  value: Date | undefined,
-  valid: boolean,
-) => (
-  <div
+const renderDatePickerForm = ({
+  handleChangeVisibleCalendar,
+  value,
+  valid,
+  onChange,
+  setSelectedMonth,
+  setSelectedYear,
+}: {
+  handleChangeVisibleCalendar: () => void;
+  value: Date | undefined;
+  valid: boolean;
+  setSelectedMonth: (selectedMonth: number) => void;
+  setSelectedYear: (selectedYear: number) => void;
+  onChange?: (value: Date) => void;
+}) => (
+  <DatePickerInput
+    onChange={onChange}
     onClick={handleChangeVisibleCalendar}
+    value={value && formatDate(value)}
+    setSelectedMonth={setSelectedMonth}
+    setSelectedYear={setSelectedYear}
     className={style(formStyle, valid ? 'border-gray' : 'border-error')}
-  >
-    <Paragraph>{value && formatDate(value)}</Paragraph>
-    <Icon {...ICON_PROPS} name="CalendarIcon" />
-  </div>
+  ></DatePickerInput>
 );

package/src/ui-kit/DatePicker/DatePickerInput.tsx

@@ -0,0 +1,100 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { useEffect, useRef, useState } from '@redneckz/uni-jsx/lib/hooks';
+import { type IconVersion } from '../../model/IconVersion';
+import { normalizeWithMask } from '../../utils/normalizeWithMask';
+import { style } from '../../utils/style';
+import { Icon } from '../Icon/Icon';
+import { type IconName } from '../Icon/IconProps';
+import { START_YEAR } from './getYears';
+
+const ICON_PROPS: { name: IconName; iconVersion: IconVersion; width: string; height: string } = {
+  name: 'CalendarIcon',
+  iconVersion: 'black',
+  width: '24',
+  height: '24',
+};
+
+interface DatePickerInputProps {
+  setSelectedMonth: (selectedMonth: number) => void;
+  setSelectedYear: (selectedYear: number) => void;
+  className?: string;
+  value?: string;
+  onChange?: (value: Date) => void;
+  onClick?: () => void;
+}
+
+export const DatePickerInput = JSX<DatePickerInputProps>(
+  ({ setSelectedMonth, setSelectedYear, className, value, onChange, onClick }) => {
+    const ref = useRef<HTMLInputElement | null>(null);
+    const [inputValue, setInputValue] = useState<string>(value || '');
+
+    const handleChange = (ev: { target?: { value?: string } }) => {
+      const val = ev.target?.value;
+      if (typeof val === 'string' && val?.length < 11) {
+        setInputValue(normalizeWithMask(val, '__.__.____'));
+      }
+    };
+
+    const onBlur = () => {
+      if (checkIsValidDate(inputValue)) {
+        const [day, month, year] = inputValue.split('.');
+        onChange?.(new Date(Number(year), Number(month) - 1, Number(day)));
+        setSelectedMonth(Number(month) - 1);
+        setSelectedYear(Number(year));
+      } else {
+        setInputValue(value || '');
+      }
+    };
+
+    const onInputClick = () => {
+      if (ref.current !== null) {
+        ref.current.focus();
+      }
+      onClick?.();
+    };
+
+    useEffect(() => {
+      setInputValue(value || '');
+    }, [value]);
+
+    return (
+      <div onClick={onInputClick} className={style('relative', className)}>
+        <input
+          ref={ref}
+          className="h-full w-full px-m text-l text-black focus-visible:outline-none"
+          value={inputValue}
+          type="text"
+          onChange={handleChange}
+          onBlur={onBlur}
+        />
+        <Icon className="mr-s" {...ICON_PROPS} />
+      </div>
+    );
+  },
+);
+
+const isValidYear = (year: string) =>
+  Number(year) >= START_YEAR && Number(year) <= new Date().getFullYear();
+
+const isValidMonth = (month: string) => Number(month) > 0 && Number(month) < 13;
+
+const checkIsValidDate = (date: string) => {
+  const [day, month, year] = date.split('.');
+
+  if (isValidYear(year)) {
+    if (isValidMonth(month)) {
+      const currentDate = new Date(Number(year), Number(month) - 1, 1);
+      let maxDateOfMonth = 0;
+      while (currentDate.getMonth() === Number(month) - 1) {
+        currentDate.setDate(currentDate.getDate() + 1);
+        maxDateOfMonth++;
+      }
+
+      if (Number(day) > 0 && Number(day) <= maxDateOfMonth) {
+        return true;
+      }
+    }
+  }
+
+  return false;
+};

package/src/ui-kit/DatePicker/getYears.ts

@@ -1,4 +1,4 @@
-const START_YEAR = 1940;
+export const START_YEAR = 1940;
 
 export const getYears = () =>
   Array.from({ length: new Date().getFullYear() - START_YEAR + 1 }, (_, i) => START_YEAR + i);

package/src/ui-kit/DatePicker/useDatePickerManager.ts

@@ -17,6 +17,8 @@ interface UseDatePickerManagerParams {
   onMonthSelect: (num: number) => void;
   selectedYear: number;
   onYearSelect: (num: number) => void;
+  onChange?: (date: Date) => void;
+  value?: Date;
 }
 
 export const useDatePickerManager = ({
@@ -26,6 +28,8 @@ export const useDatePickerManager = ({
   onMonthSelect,
   onYearSelect,
   selectedYear,
+  onChange,
+  value,
 }: UseDatePickerManagerParams) => {
   const close = useCallback(() => showCalendar && onShowCalendar(false), [showCalendar]);
   const ref = useOutsideClick<HTMLDivElement>(close);
@@ -54,10 +58,26 @@ export const useDatePickerManager = ({
   }, [selectedMonth]);
 
   const handleSelectMonth = useCallback(
-    ({ key }: Option) => onMonthSelect(months.indexOf(key)),
-    [],
+    ({ key }: Option) => {
+      onMonthSelect(months.indexOf(key));
+      const maxDateOfMonth = calculateMaxDaysOfMonth(selectedYear, months.indexOf(key));
+      handleChangeMonth({
+        maxDateOfMonth,
+        selectedYear,
+        selectedMonth: months.indexOf(key),
+        value,
+        onChange,
+      });
+    },
+    [value],
+  );
+  const handleSelectYear = useCallback(
+    ({ key }: Option) => {
+      onYearSelect(Number(key));
+      value && onChange?.(new Date(Number(key), selectedMonth, value?.getDate()));
+    },
+    [value],
   );
-  const handleSelectYear = useCallback(({ key }: Option) => onYearSelect(Number(key)), []);
 
   return {
     handleChangeVisibleCalendar,
@@ -70,3 +90,31 @@ export const useDatePickerManager = ({
     ref,
   };
 };
+
+const calculateMaxDaysOfMonth = (selectedYear: number, selectedMonth: number) => {
+  const date = new Date(selectedYear, selectedMonth, 1);
+  let maxDateOfMonth = 0;
+  while (date.getMonth() === selectedMonth) {
+    maxDateOfMonth++;
+    date.setDate(date.getDate() + 1);
+  }
+
+  return maxDateOfMonth;
+};
+
+const handleChangeMonth = ({
+  maxDateOfMonth,
+  selectedYear,
+  selectedMonth,
+  value,
+  onChange,
+}: {
+  maxDateOfMonth: number;
+  selectedYear: number;
+  selectedMonth: number;
+  value?: Date;
+  onChange?: (value: Date) => void;
+}) => {
+  value &&
+    onChange?.(new Date(selectedYear, selectedMonth, Math.min(maxDateOfMonth, value.getDate())));
+};

package/src/ui-kit/DialogManager/openDocument.tsx

@@ -0,0 +1,13 @@
+import { type VNode } from '../../model/VNode';
+import { getDocument } from '../Checkbox/getDocument';
+import { Dialog } from './Dialog';
+
+export const openDocument = async (id: number, open: (dialog: VNode) => void) => {
+  const document = await getDocument(id);
+
+  open(
+    <Dialog className="my-6xl max-w-4xl mx-auto px-0 min-h-0 pb-0">
+      <iframe src={`${document}#toolbar=0`} className="w-full h-[80vh]" id="iframe-dialog" />
+    </Dialog>,
+  );
+};

package/src/ui-kit/FormField/Fields/DependentsField.tsx

@@ -1,14 +1,14 @@
 import { JSX } from '@redneckz/uni-jsx';
-import { InputControl } from '../../Input/InputControl';
+import { InputNumberControl } from '../../Input/InputNumberControl';
 import { type CustomFieldProps } from '../CustomFieldProps';
 import { validatorObj } from '../getObjectValidator';
 import { getValidation } from '../getValidation';
 
 export const DependentsField = JSX<CustomFieldProps>(({ field, input }) => (
-  <InputControl
+  <InputNumberControl
     label="Количество иждивенцев"
     placeholder="За исключение детей до 18 лет"
-    type="number"
+    inputLength={2}
     {...getValidation(field('dependents'), validatorObj.dependents, input?.required)}
     {...input}
   />

package/src/ui-kit/FormField/Fields/DulNumberField.tsx

@@ -1,13 +1,13 @@
 import { JSX } from '@redneckz/uni-jsx';
-import { InputControl } from '../../Input/InputControl';
+import { InputNumberControl } from '../../Input/InputNumberControl';
 import { type CustomFieldProps } from '../CustomFieldProps';
 import { validatorObj } from '../getObjectValidator';
 import { getValidation } from '../getValidation';
 
 export const DulNumberField = JSX<CustomFieldProps>(({ field, input }) => (
-  <InputControl
+  <InputNumberControl
     label="Номер документа"
-    type="number"
+    inputLength={6}
     {...getValidation(field('dulNumber'), validatorObj.dulNumber, input?.required)}
   />
 ));

package/src/ui-kit/FormField/Fields/DulSerieField.tsx

@@ -1,13 +1,13 @@
 import { JSX } from '@redneckz/uni-jsx';
-import { InputControl } from '../../Input/InputControl';
+import { InputNumberControl } from '../../Input/InputNumberControl';
 import { type CustomFieldProps } from '../CustomFieldProps';
 import { validatorObj } from '../getObjectValidator';
 import { getValidation } from '../getValidation';
 
 export const DulSerieField = JSX<CustomFieldProps>(({ field, input }) => (
-  <InputControl
+  <InputNumberControl
     label="Серия документа"
-    type="number"
+    inputLength={4}
     {...getValidation(field('dulSerie'), validatorObj.dulSerie, input?.required)}
   />
 ));

package/src/ui-kit/FormField/Fields/DulSubdivisionCodeField.tsx

@@ -1,7 +1,7 @@
 import { JSX } from '@redneckz/uni-jsx';
 import { useCallback } from '@redneckz/uni-jsx/lib/hooks';
 import { type DaDataSuggestion } from '../../../api/dadataHints/dadataHintsType';
-import { InputControl } from '../../Input/InputControl';
+import { InputNumberControl } from '../../Input/InputNumberControl';
 import { type CustomFieldProps } from '../CustomFieldProps';
 import { validatorObj } from '../getObjectValidator';
 import { getValidation } from '../getValidation';
@@ -12,10 +12,10 @@ export const DulSubdivisionCodeField = JSX<CustomFieldProps>(({ field, input })
   }, []);
 
   return (
-    <InputControl
+    <InputNumberControl
       label="Код подразделения"
-      type="number"
       {...input}
+      inputLength={6}
       {...getValidation(
         field('dulSubdivisionCode'),
         validatorObj.dulSubdivisionCode,

package/src/ui-kit/FormField/Fields/Experience5YearsField.tsx

@@ -1,13 +1,14 @@
 import { JSX } from '@redneckz/uni-jsx';
-import { InputControl } from '../../Input/InputControl';
+import { InputNumberControl } from '../../Input/InputNumberControl';
 import { type CustomFieldProps } from '../CustomFieldProps';
 import { validatorObj } from '../getObjectValidator';
 import { getValidation } from '../getValidation';
 
 export const Experience5YearsField = JSX<CustomFieldProps>(({ field, input }) => (
-  <InputControl
+  <InputNumberControl
     label="Стаж"
     placeholder="За последние 5 лет"
+    inputLength={2}
     {...getValidation(field('experience5Years'), validatorObj.experience5Years, input?.required)}
     {...input}
   />

package/src/ui-kit/FormField/Fields/FamilyMembersField.tsx

@@ -1,14 +1,14 @@
 import { JSX } from '@redneckz/uni-jsx';
-import { InputControl } from '../../Input/InputControl';
+import { InputNumberControl } from '../../Input/InputNumberControl';
 import { type CustomFieldProps } from '../CustomFieldProps';
 import { validatorObj } from '../getObjectValidator';
 import { getValidation } from '../getValidation';
 
 export const FamilyMembersField = JSX<CustomFieldProps>(({ field, input }) => (
-  <InputControl
+  <InputNumberControl
     label="Количество членов семьи"
     placeholder="Введите значение"
-    type="number"
+    inputLength={2}
     {...getValidation(field('familyMembers'), validatorObj.familyMembers, input?.required)}
     {...input}
   />

package/src/ui-kit/FormField/Fields/GeneralSeniorityField.tsx

@@ -1,12 +1,13 @@
 import { JSX } from '@redneckz/uni-jsx';
-import { InputControl } from '../../Input/InputControl';
+import { InputNumberControl } from '../../Input/InputNumberControl';
 import { type CustomFieldProps } from '../CustomFieldProps';
 import { validatorObj } from '../getObjectValidator';
 import { getValidation } from '../getValidation';
 
 export const GeneralSeniorityField = JSX<CustomFieldProps>(({ field, input }) => (
-  <InputControl
+  <InputNumberControl
     label="Общий стаж"
+    inputLength={2}
     placeholder="Количество лет"
     {...getValidation(field('generalSeniority'), validatorObj.generalSeniority, input?.required)}
     {...input}

package/src/ui-kit/FormField/Fields/InnField.tsx

@@ -1,7 +1,7 @@
 import { JSX } from '@redneckz/uni-jsx';
 import { useCallback } from '@redneckz/uni-jsx/lib/hooks';
 import { type DaDataSuggestion } from '../../../api/dadataHints/dadataHintsType';
-import { InputControl } from '../../Input/InputControl';
+import { InputNumberControl } from '../../Input/InputNumberControl';
 import { type CustomFieldProps } from '../CustomFieldProps';
 import { validatorObj } from '../getObjectValidator';
 import { getValidation } from '../getValidation';
@@ -13,9 +13,9 @@ export const InnField = JSX<CustomFieldProps>(({ field, input }) => {
   }, []);
 
   return (
-    <InputControl
+    <InputNumberControl
       label="ИНН"
-      type="number"
+      inputLength={12}
       {...input}
       {...getValidation(field('inn'), validatorObj.inn, input?.required)}
       onDaDataChange={onDaDataChange}

package/src/ui-kit/FormField/Fields/JobsNumberField.tsx

@@ -1,14 +1,14 @@
 import { JSX } from '@redneckz/uni-jsx';
-import { InputControl } from '../../Input/InputControl';
+import { InputNumberControl } from '../../Input/InputNumberControl';
 import { type CustomFieldProps } from '../CustomFieldProps';
 import { validatorObj } from '../getObjectValidator';
 import { getValidation } from '../getValidation';
 
 export const JobsNumberField = JSX<CustomFieldProps>(({ field, input }) => (
-  <InputControl
-    label="Общий стаж"
-    placeholder="Количество лет"
-    type="number"
+  <InputNumberControl
+    label="Количество мест работы за последние 5 лет"
+    placeholder="Количество мест"
+    inputLength={2}
     {...getValidation(field('jobsNumber'), validatorObj.jobsNumber, input?.required)}
     {...input}
   />

package/src/ui-kit/FormField/Fields/LastJobExperienceField.tsx

@@ -1,13 +1,14 @@
 import { JSX } from '@redneckz/uni-jsx';
-import { InputControl } from '../../Input/InputControl';
+import { InputNumberControl } from '../../Input/InputNumberControl';
 import { type CustomFieldProps } from '../CustomFieldProps';
 import { validatorObj } from '../getObjectValidator';
 import { getValidation } from '../getValidation';
 
 export const LastJobExperienceField = JSX<CustomFieldProps>(({ field, input }) => (
-  <InputControl
+  <InputNumberControl
     label="Стаж на последнем рабочем месте"
     placeholder="Количество лет"
+    inputLength={2}
     {...getValidation(field('lastJobExperience'), validatorObj.lastJobExperience, input?.required)}
     {...input}
   />

package/src/ui-kit/FormField/Fields/PartInBusinessField.tsx

@@ -0,0 +1,15 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { InputNumberControl } from '../../Input/InputNumberControl';
+import { type CustomFieldProps } from '../CustomFieldProps';
+import { validatorObj } from '../getObjectValidator';
+import { getValidation } from '../getValidation';
+
+export const PartInBusinessField = JSX<CustomFieldProps>(({ field, input }) => (
+  <InputNumberControl
+    label="Доля участия в бизнесе"
+    placeholder="в %"
+    inputLength={2}
+    {...getValidation(field('partInBusiness'), validatorObj.partInBusiness, input?.required)}
+    {...input}
+  />
+));

package/src/ui-kit/FormField/NameFieldDef.ts

@@ -81,4 +81,5 @@ export type NameFieldDef =
   | 'bankruptcyFlg'
   | 'shareholderFlg'
   | 'legalEntityName'
-  | 'bankEmployeeCode';
+  | 'bankEmployeeCode'
+  | 'partInBusiness';

package/src/ui-kit/FormField/SelectField.tsx

@@ -1,5 +1,6 @@
 import { UniBlock } from '../../UniBlock/UniBlock';
 import { type UniBlockProps } from '../../UniBlock/UniBlockProps';
+import { type Option } from '../Select/Option';
 import { SelectControl } from '../Select/SelectControl';
 import { type CustomFieldProps } from './CustomFieldProps';
 import { validatorObj } from './getObjectValidator';
@@ -34,4 +35,5 @@ export const SelectField = UniBlock<SelectFieldProps>(
   },
 );
 
-const arrayToOptions = (array?: string[]) => (array ?? []).map((_) => ({ key: _, value: _ }));
+const arrayToOptions = (array?: string[]): Option[] =>
+  (array ?? []).map((_) => ({ key: _, text: _ }));

package/src/ui-kit/FormField/getField.tsx

@@ -60,6 +60,7 @@ import { OtherIncomeField } from './Fields/OtherIncomeField';
 import { OtherPaymentsField } from './Fields/OtherPayments';
 import { ParticipantAddressField } from './Fields/ParticipantAddressField';
 import { ParticipantDateRegistrationField } from './Fields/ParticipantDateRegistrationField';
+import { PartInBusinessField } from './Fields/PartInBusinessField';
 import { PartnerCommentsField } from './Fields/PartnerCommentsField';
 import { PhoneField } from './Fields/PhoneField';
 import { PositionOrganizationField } from './Fields/PositionOrganizationField';
@@ -178,6 +179,7 @@ export const getField =
       legalEntityName: <LegalEntityNameField field={field} input={input} />,
       creditInRshbCd: <CreditInRshbCdField field={field} input={input} />,
       bankEmployeeCode: <BankEmpoleeCodeField field={field} input={input} />,
+      partInBusiness: <PartInBusinessField field={field} input={input} />,
     };
 
     return isRenderField({ input, field }) ? (

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

@@ -7,6 +7,7 @@ import {
   defaultValidator,
   emailValidator,
   innValidator,
+  jobNumberValidator,
   lengthStringValidator,
   nameValidator,
   numberValidator,
@@ -44,10 +45,10 @@ export const validatorObj: Record<string, Validator> = {
   inn: innValidator('Укажите ИНН'),
   legalForm: defaultValidator('Укажите ОПФ'),
   organizationName: defaultValidator('Укажите наименование организации'),
-  generalSeniority: defaultValidator(),
-  lastJobExperience: defaultValidator('Укажите стаж на последнем месте работы'),
-  experience5Years: defaultValidator('Укажите общий стаж за последние 5 лет'),
-  jobsNumber: defaultValidator('Укажите количество лет стажа'),
+  generalSeniority: jobNumberValidator('Укажите количество лет стажа'),
+  lastJobExperience: jobNumberValidator('Укажите стаж на последнем месте работы'),
+  experience5Years: jobNumberValidator('Укажите общий стаж за последние 5 лет'),
+  jobsNumber: jobNumberValidator('Укажите количество мест работы за последние 5 лет'),
   beginDate: defaultValidator('Укажите дату заключения трудового договора'),
   fullAddress: defaultValidator(),
   partnerComments: defaultValidator(),
@@ -89,12 +90,11 @@ export const validatorObj: Record<string, Validator> = {
   shareholderFlg: defaultValidator(),
   legalEntityName: defaultValidator(),
   bankEmployeeCode: defaultValidator(),
+  partInBusiness: defaultValidator(),
 };
 
 export const getObjectValidator = (inputs: FieldDef[]): Record<string, Validator> => {
-  const requiredInputs = getNamesFromInput(
-    inputs.filter((_: FieldDef) => ('required' in _ ? _.required : false)),
-  );
+  const requiredInputs = getNamesFromInput(inputs.filter((_: FieldDef) => Boolean(_?.required)));
 
   return Object.fromEntries(requiredInputs.map((_) => [_, validatorObj?.[_]]));
 };

package/src/ui-kit/FormField/validators.ts

@@ -9,6 +9,11 @@ export const defaultValidator = (errorMsg?: string) =>
 
 export const defaultSelectValidator = validator((_) => _?.key && _?.key !== '')(ERROR_MESSAGE);
 
+export const jobNumberValidator = (errorMsg?: string) =>
+  validator((_) => typeof _ === 'string' && _.length > 0 && _.length <= 2)(
+    errorMsg ? errorMsg : ERROR_MESSAGE,
+  );
+
 export const nameValidator = (errorMsg?: string) =>
   validator((_) => typeof _ === 'string' && _.length > 1)(errorMsg ? errorMsg : ERROR_MESSAGE);
 

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

@@ -2,21 +2,27 @@ import { JSX } from '@redneckz/uni-jsx';
 import { type IconVersion } from '../../model/IconVersion';
 import { Icon } from '../Icon/Icon';
 import { type IconName } from '../Icon/IconProps';
+import { LinkButton } from '../LinkButton/LinkButton';
+import { type LinkButtonProps } from '../LinkButton/LinkButtonProps';
 import { RichText } from '../RichText/RichText';
 
-interface InfoCardProps {
+export interface InfoCardProps {
   __html?: string;
   icon?: IconName;
   iconVersion?: IconVersion;
+  link?: LinkButtonProps;
 }
 
 export const InfoCard = JSX<InfoCardProps>(
-  ({ __html, icon = 'InfoCircleIcon', iconVersion = 'black' }) => (
+  ({ __html, icon = 'InfoCircleIcon', iconVersion = 'black', link }) => (
     <div className="flex flex-row items-center w-full min-h-14 bg-main-gray rounded-lg gap-m p-m">
       <div className="rounded-full bg-white p-xs">
         <Icon name={icon} width="24" height="24" iconVersion={iconVersion} />
       </div>
-      <RichText __html={__html} />
+      <div className="">
+        <RichText __html={__html} />
+        {link?.text ? <LinkButton className="text-primary-main">{link.text}</LinkButton> : null}
+      </div>
     </div>
   ),
 );

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

@@ -0,0 +1,18 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { getRequiredLabel } from '../../utils/getRequiredLabel';
+import { style } from '../../utils/style';
+import { InputNumber } from '../InputNumber/InputNumber';
+import { type InputProps } from './InputProps';
+import { renderErrorText } from './renderErrorText';
+
+export const InputNumberControl = JSX<InputProps>(({ className, label, error, ...rest }) => (
+  <div className={style('shrink-0 w-full', className)}>
+    <InputNumber
+      aria-label={label}
+      label={getRequiredLabel({ label, errors: rest?.errors })}
+      valid={Boolean(!error)}
+      {...rest}
+    />
+    {renderErrorText(error)}
+  </div>
+));

package/src/ui-kit/Input/InputProps.ts

@@ -1,5 +1,5 @@
-import { type DefaultControlType } from '../../model/DefaultControlType';
 import { type DaDataSuggestion } from '../../api/dadataHints/dadataHintsType';
+import { type DefaultControlType } from '../../model/DefaultControlType';
 import { type InputTypes } from '../../model/InputTypes';
 import { type ControlProps } from '../ControlProps';
 import { type PreventableEventWithTarget } from '../PreventableEvent';
@@ -18,4 +18,5 @@ export interface InputProps<V = string> extends DefaultControlType, ControlProps
   autoFocus?: boolean;
   isTextarea?: boolean;
   dadata?: boolean;
+  inputLength?: number;
 }