optimize package/ui/elements imports

optimize antd/link imports

ui/elements/text: use antd component

ui/element: optimize input, input-number, switch, checkbox imports

fix Number typename

ui/elements: optimize Radio, Segmented, Select

move type Status to store types

fix TableInsurance builders

packages/ui: remove antd dir

Output/Results: fix elements margin

revert Loading status to elements

packages/ui: remove value from props

remove unnecessary loading prop

apps/web/Components/Calculation/Form/ELT/Components/PolicyTable.tsx

@@ -2,7 +2,7 @@ import type { columns } from '../lib/config';
 import type { Row, StoreSelector } from '../types';
 import { useStore } from '@/stores/hooks';
 import { observer } from 'mobx-react-lite';
-import { message, Table } from 'ui/antd';
+import { message, Table } from 'ui/elements';
 
 export const PolicyTable = observer(
   ({

apps/web/Components/Calculation/Form/ELT/Components/ReloadButton.tsx

@@ -1,7 +1,7 @@
 import type { StoreSelector } from '../types';
 import { useStore } from '@/stores/hooks';
 import { observer } from 'mobx-react-lite';
-import { Button } from 'ui/antd';
+import { Button } from 'ui/elements';
 import { ReloadOutlined } from 'ui/elements/icons';
 import { Flex } from 'ui/grid';
 
@@ -16,7 +16,8 @@ export const ReloadButton = observer(
       <Flex justifyContent="center">
         <Button
           onClick={onClick}
-          disabled={hasErrors || rows.some((x) => x.status === 'fetching')}
+          disabled={hasErrors}
+          loading={rows.some((x) => x.status === 'fetching')}
           shape="circle"
           icon={<ReloadOutlined />}
         />

apps/web/Components/Calculation/Form/ELT/Components/Validation.tsx

@@ -1,7 +1,7 @@
 import type { StoreSelector } from '../types';
 import { useStore } from '@/stores/hooks';
 import { observer } from 'mobx-react-lite';
-import { Alert } from 'ui/antd';
+import { Alert } from 'ui/elements';
 
 export const Validation = observer(({ storeSelector }: { storeSelector: StoreSelector }) => {
   const { $tables, $process } = useStore();

apps/web/Components/Calculation/Form/Insurance/InsuranceTable/builders.tsx

@@ -13,10 +13,17 @@ export function buildOptionComponent<T>(
     const [value, setValue] = useInsuranceValue(key, valueName);
     const { getOptions, getStatus } = useRow(key);
     const options = getOptions(valueName);
-    const statuses = getStatus(valueName);
+    const status = getStatus(valueName);
 
     return (
-      <Component options={options} setValue={setValue} status={statuses} value={value} {...props} />
+      <Component
+        options={options}
+        onChange={setValue}
+        disabled={status === 'Disabled'}
+        loading={status === 'Loading'}
+        value={value}
+        {...props}
+      />
     );
   });
 }
@@ -29,8 +36,10 @@ export function buildValueComponent<T>(
   return observer((props: T) => {
     const [value, setValue] = useInsuranceValue(key, valueName);
     const { getStatus } = useRow(key);
-    const statuses = getStatus(valueName);
+    const status = getStatus(valueName);
 
-    return <Component setValue={setValue} status={statuses} value={value} {...props} />;
+    return (
+      <Component onChange={setValue} disabled={status === 'Disabled'} value={value} {...props} />
+    );
   });
 }

apps/web/Components/Calculation/Form/Insurance/InsuranceTable/types.ts

@@ -1,5 +1,6 @@
 import type { KeysSchema, RowSchema } from '@/config/schema/insurance';
-import type { BaseOption, Status } from 'ui/elements/types';
+import type { Status } from '@/stores/calculation/statuses/types';
+import type { BaseOption } from 'ui/elements/types';
 import type { z } from 'zod';
 
 export type Keys = z.infer<typeof KeysSchema>;

apps/web/Components/Calculation/Form/Payments/PaymentsTable/index.jsx

@@ -5,8 +5,7 @@ import { computed } from 'mobx';
 import { observer } from 'mobx-react-lite';
 import { createContext, useContext, useMemo, useState } from 'react';
 import styled from 'styled-components';
-import { Segmented } from 'ui/antd';
-import { Alert, Table } from 'ui/elements';
+import { Alert, Segmented, Table } from 'ui/elements';
 import { Box, Flex } from 'ui/grid';
 import { useDebouncedCallback } from 'use-debounce';
 

apps/web/Components/Calculation/builders/build-action.tsx

@@ -3,6 +3,7 @@ import { useProcessContext } from '@/process/hooks/common';
 import { useStatus } from '@/stores/calculation/statuses/hooks';
 import { observer } from 'mobx-react-lite';
 import type { ComponentType } from 'react';
+import { useThrottledCallback } from 'use-debounce';
 
 type BuilderProps = {
   elementName: Elements;
@@ -17,13 +18,23 @@ export default function buildAction<T>(
     const status = useStatus(elementName);
 
     const context = useProcessContext();
+    const throttledAction = useThrottledCallback(
+      () => {
+        import(`process/${processName}/action`).then((module) => module.action(context));
+      },
+      1200,
+      {
+        trailing: false,
+      }
+    );
 
     return (
       <Component
-        action={() =>
-          import(`process/${processName}/action`).then((module) => module.action(context))}
+        onClick={throttledAction}
         status={status}
         {...props}
+        disabled={status === 'Disabled'}
+        loading={status === 'Loading'}
       />
     );
   });

apps/web/Components/Calculation/builders/build-check.tsx

@@ -0,0 +1,38 @@
+import type { Elements } from '../config/map/values';
+import { useStoreValue } from './hooks';
+import { useStatus } from '@/stores/calculation/statuses/hooks';
+import { useValidation } from '@/stores/calculation/validation/hooks';
+import type { Values } from '@/stores/calculation/values/types';
+import type { CheckboxChangeEvent } from 'antd/lib/checkbox';
+import { observer } from 'mobx-react-lite';
+import type { ComponentType } from 'react';
+import { Form } from 'ui/elements';
+
+type BuilderProps = {
+  elementName: Elements;
+  valueName: Values;
+};
+
+export function buildCheck<T>(
+  Component: ComponentType<T>,
+  { elementName, valueName }: BuilderProps
+) {
+  return observer((props: T) => {
+    const [value, setValue] = useStoreValue(valueName);
+    const status = useStatus(elementName);
+    const { validateStatus, help } = useValidation(elementName);
+
+    return (
+      <Form.Item help={help} validateStatus={validateStatus}>
+        <Component
+          onChange={(event: CheckboxChangeEvent) => {
+            setValue(event.target.checked);
+          }}
+          disabled={status === 'Disabled'}
+          checked={value}
+          {...props}
+        />
+      </Form.Item>
+    );
+  });
+}

apps/web/Components/Calculation/builders/build-link.tsx

@@ -0,0 +1,31 @@
+import type { Elements } from '../config/map/values';
+import { useStoreValue } from './hooks';
+import { useStatus } from '@/stores/calculation/statuses/hooks';
+import type { Values } from '@/stores/calculation/values/types';
+import { observer } from 'mobx-react-lite';
+import type { ComponentType } from 'react';
+
+export type BuilderProps = {
+  elementName: Elements;
+  valueName: Values;
+};
+
+export default function buildLink<T>(
+  Component: ComponentType<T>,
+  { elementName, valueName }: BuilderProps
+) {
+  return observer((props: T) => {
+    const [value] = useStoreValue(valueName);
+    const status = useStatus(elementName);
+
+    return (
+      <Component
+        status={status}
+        href={value}
+        disabled={!value}
+        loading={status === 'Loading'}
+        {...props}
+      />
+    );
+  });
+}

apps/web/Components/Calculation/builders/build-options.tsx

@@ -6,6 +6,7 @@ import { useValidation } from '@/stores/calculation/validation/hooks';
 import type { Values } from '@/stores/calculation/values/types';
 import { observer } from 'mobx-react-lite';
 import type { ComponentType } from 'react';
+import { Form } from 'ui/elements';
 
 type BuilderProps = {
   elementName: Elements;
@@ -23,15 +24,16 @@ export default function buildOptions<T>(
     const options = useOptions(elementName);
 
     return (
+      <Form.Item help={help} validateStatus={validateStatus}>
         <Component
-        help={help}
-        validateStatus={validateStatus}
+          disabled={status === 'Disabled'}
+          loading={status === 'Loading'}
           options={options}
-        setValue={setValue}
-        status={status}
+          onChange={setValue}
           value={value}
           {...props}
         />
+      </Form.Item>
     );
   });
 }

apps/web/Components/Calculation/builders/build-value.tsx

@@ -4,14 +4,15 @@ import { useStatus } from '@/stores/calculation/statuses/hooks';
 import { useValidation } from '@/stores/calculation/validation/hooks';
 import type { Values } from '@/stores/calculation/values/types';
 import { observer } from 'mobx-react-lite';
-import type { ComponentType } from 'react';
+import type { ChangeEvent, ComponentType } from 'react';
+import { Form } from 'ui/elements';
 
-export type BuilderProps = {
+type BuilderProps = {
   elementName: Elements;
   valueName: Values;
 };
 
-export default function buildValue<T>(
+export function buildValue<T>(
   Component: ComponentType<T>,
   { elementName, valueName }: BuilderProps
 ) {
@@ -21,14 +22,40 @@ export default function buildValue<T>(
     const { validateStatus, help } = useValidation(elementName);
 
     return (
+      <Form.Item help={help} validateStatus={validateStatus}>
         <Component
-        help={help}
-        validateStatus={validateStatus}
-        setValue={setValue}
-        status={status}
+          onChange={(e: ChangeEvent<HTMLInputElement>) => {
+            setValue(e.target.value);
+          }}
+          disabled={status === 'Disabled'}
           value={value}
           {...props}
         />
+      </Form.Item>
+    );
+  });
+}
+
+export function buildNumberValue<T>(
+  Component: ComponentType<T>,
+  { elementName, valueName }: BuilderProps
+) {
+  return observer((props: T) => {
+    const [value, setValue] = useStoreValue(valueName);
+    const status = useStatus(elementName);
+    const { validateStatus, help } = useValidation(elementName);
+
+    return (
+      <Form.Item help={help} validateStatus={validateStatus}>
+        <Component
+          onChange={(v = 0) => {
+            setValue(v);
+          }}
+          disabled={status === 'Disabled'}
+          value={value}
+          {...props}
+        />
+      </Form.Item>
     );
   });
 }

apps/web/Components/Calculation/builders/index.js

@@ -1,4 +1,6 @@
 export { default as buildAction } from './build-action';
+export * from './build-check';
+export { default as buildLink } from './build-link';
 export { default as buildOptions } from './build-options';
 export { default as buildReadonly } from './build-readonly';
-export { default as buildValue } from './build-value';
+export * from './build-value';

apps/web/Components/Calculation/config/elements-props.tsx

@@ -19,6 +19,9 @@ const props: Partial<ElementsProps> = {
     parser,
     formatter,
     addonAfter: CurrencyAddon,
+    style: {
+      width: '100%',
+    },
   },
   tbxLeaseObjectPriceWthtVAT: {
     min: 0,
@@ -28,6 +31,9 @@ const props: Partial<ElementsProps> = {
     parser,
     formatter,
     addonAfter: CurrencyAddon,
+    style: {
+      width: '100%',
+    },
   },
   tbxVATInLeaseObjectPrice: {
     min: 0,
@@ -37,12 +43,18 @@ const props: Partial<ElementsProps> = {
     parser,
     formatter,
     addonAfter: CurrencyAddon,
+    style: {
+      width: '100%',
+    },
   },
   tbxEngineHours: {
     min: 0,
     step: 10,
     precision: 2,
     addonAfter: 'ч.',
+    style: {
+      width: '100%',
+    },
   },
   tbxSupplierDiscountRub: {
     min: 0,
@@ -52,6 +64,9 @@ const props: Partial<ElementsProps> = {
     parser,
     formatter,
     addonAfter: CurrencyAddon,
+    style: {
+      width: '100%',
+    },
   },
   tbxSupplierDiscountPerc: {
     min: 0,
@@ -59,6 +74,9 @@ const props: Partial<ElementsProps> = {
     precision: 2,
 
     addonAfter: '%',
+    style: {
+      width: '100%',
+    },
   },
   radioBalanceHolder: {
     optionType: 'button',
@@ -71,6 +89,9 @@ const props: Partial<ElementsProps> = {
     precision: 2,
 
     addonAfter: '%',
+    style: {
+      width: '100%',
+    },
   },
   radioLastPaymentRule: {
     block: true,
@@ -82,6 +103,9 @@ const props: Partial<ElementsProps> = {
     parser,
     formatter: createFormatter({ minimumFractionDigits: 4, maximumFractionDigits: 4 }),
     addonAfter: '%',
+    style: {
+      width: '100%',
+    },
   },
   tbxFirstPaymentRub: {
     min: 0,
@@ -91,6 +115,9 @@ const props: Partial<ElementsProps> = {
     parser,
     formatter,
     addonAfter: '₽',
+    style: {
+      width: '100%',
+    },
   },
   tbxLastPaymentPerc: {
     min: 0,
@@ -100,6 +127,9 @@ const props: Partial<ElementsProps> = {
     parser,
     formatter: createFormatter({ minimumFractionDigits: 6, maximumFractionDigits: 6 }),
     addonAfter: '%',
+    style: {
+      width: '100%',
+    },
   },
   tbxLastPaymentRub: {
     min: 0,
@@ -109,6 +139,9 @@ const props: Partial<ElementsProps> = {
     parser,
     formatter,
     addonAfter: '₽',
+    style: {
+      width: '100%',
+    },
   },
   tbxRedemptionPaymentSum: {
     min: 1000,
@@ -118,34 +151,55 @@ const props: Partial<ElementsProps> = {
     parser,
     formatter,
     addonAfter: '₽',
+    style: {
+      width: '100%',
+    },
   },
   tbxLeasingPeriod: {
     min: 13,
     max: MAX_LEASING_PERIOD,
     addonAfter: 'мес.',
+    style: {
+      width: '100%',
+    },
   },
   tbxSubsidySum: {
     min: 0,
     precision: 2,
     addonAfter: '₽',
+    style: {
+      width: '100%',
+    },
   },
   tbxImportProgramSum: {
     min: 0,
     precision: 2,
     addonAfter: '₽',
+    style: {
+      width: '100%',
+    },
   },
   tbxAddEquipmentPrice: {
     min: 0,
     precision: 2,
     addonAfter: '₽',
+    style: {
+      width: '100%',
+    },
   },
   tbxParmentsDecreasePercent: {
     min: 50,
     max: 99,
+    style: {
+      width: '100%',
+    },
   },
   tbxComissionPerc: {
     min: 0,
     max: 100,
+    style: {
+      width: '100%',
+    },
   },
   tbxComissionRub: {
     min: 0,
@@ -154,6 +208,9 @@ const props: Partial<ElementsProps> = {
     parser,
     formatter,
     addonAfter: '₽',
+    style: {
+      width: '100%',
+    },
   },
   selectLeaseObjectType: {
     showSearch: true,
@@ -175,6 +232,9 @@ const props: Partial<ElementsProps> = {
     min: 1,
     max: 1000,
     addonAfter: 'шт.',
+    style: {
+      width: '100%',
+    },
   },
   selectLeaseObjectUseFor: {
     showSearch: true,
@@ -183,6 +243,9 @@ const props: Partial<ElementsProps> = {
   tbxLeaseObjectYear: {
     min: 1994,
     max: dayjs().year(),
+    style: {
+      width: '100%',
+    },
   },
   selectLeaseObjectCategory: {
     showSearch: false,
@@ -199,6 +262,9 @@ const props: Partial<ElementsProps> = {
     parser,
     formatter,
     addonAfter: 'л.с.',
+    style: {
+      width: '100%',
+    },
   },
   tbxEngineVolume: {
     min: 0,
@@ -208,6 +274,9 @@ const props: Partial<ElementsProps> = {
     parser,
     formatter: createFormatter({ minimumFractionDigits: 4, maximumFractionDigits: 4 }),
     addonAfter: 'л',
+    style: {
+      width: '100%',
+    },
   },
   tbxMaxMass: {
     min: 0,
@@ -216,12 +285,18 @@ const props: Partial<ElementsProps> = {
     parser,
     formatter,
     addonAfter: 'кг',
+    style: {
+      width: '100%',
+    },
   },
   tbxCountSeats: {
     min: 0,
     max: 2000,
     precision: 0,
     parser,
+    style: {
+      width: '100%',
+    },
   },
   tbxMaxSpeed: {
     min: 0,
@@ -229,6 +304,9 @@ const props: Partial<ElementsProps> = {
     parser,
     formatter,
     addonAfter: 'км/ч',
+    style: {
+      width: '100%',
+    },
   },
   selectDealer: {
     showSearch: true,
@@ -239,36 +317,54 @@ const props: Partial<ElementsProps> = {
     max: 20,
     step: 0.1,
     precision: 2,
+    style: {
+      width: '100%',
+    },
   },
   tbxDealerBrokerRewardSumm: {
     min: 0,
     max: 20,
     step: 0.1,
     precision: 2,
+    style: {
+      width: '100%',
+    },
   },
   tbxIndAgentRewardSumm: {
     min: 0,
     max: 20,
     step: 0.1,
     precision: 2,
+    style: {
+      width: '100%',
+    },
   },
   tbxCalcDoubleAgentRewardSumm: {
     min: 0,
     max: 20,
     step: 0.1,
     precision: 2,
+    style: {
+      width: '100%',
+    },
   },
   tbxCalcBrokerRewardSum: {
     min: 0,
     max: 20,
     step: 0.1,
     precision: 2,
+    style: {
+      width: '100%',
+    },
   },
   tbxFinDepartmentRewardSumm: {
     min: 0,
     max: 20,
     step: 0.1,
     precision: 2,
+    style: {
+      width: '100%',
+    },
   },
   tbxInsFranchise: {
     min: 0,
@@ -278,14 +374,23 @@ const props: Partial<ElementsProps> = {
     parser,
     formatter,
     addonAfter: '₽',
+    style: {
+      width: '100%',
+    },
   },
   tbxInsAgeDrivers: {
     // min: 18,
     // max: 99,
+    style: {
+      width: '100%',
+    },
   },
   tbxInsExpDrivers: {
     // min: 0,
     // max: 99,
+    style: {
+      width: '100%',
+    },
   },
   selectRegionRegistration: {
     showSearch: true,
@@ -300,17 +405,17 @@ const props: Partial<ElementsProps> = {
     buttonStyle: 'solid',
   },
   btnCalculate: {
-    text: 'Рассчитать график',
+    children: 'Рассчитать график',
     type: 'primary',
     block: true,
   },
   btnCreateKP: {
     type: 'primary',
-    text: 'Создать КП',
+    children: 'Создать КП',
     icon: <PlusOutlined />,
   },
   btnCreateKPMini: {
-    text: '',
+    children: '',
     type: 'primary',
     icon: <PlusOutlined />,
     block: true,
@@ -319,6 +424,9 @@ const props: Partial<ElementsProps> = {
     min: 0,
     max: 99.99,
     step: 0.1,
+    style: {
+      width: '100%',
+    },
   },
   tbxMaxPriceChange: {
     min: 0,
@@ -326,6 +434,9 @@ const props: Partial<ElementsProps> = {
     step: 10_000,
     parser,
     formatter,
+    style: {
+      width: '100%',
+    },
   },
   tbxMinPriceChange: {
     min: 0,
@@ -333,12 +444,18 @@ const props: Partial<ElementsProps> = {
     step: 10_000,
     parser,
     formatter,
+    style: {
+      width: '100%',
+    },
   },
   tbxImporterRewardPerc: {
     min: 0,
     max: 99.99,
     step: 0.1,
     precision: 2,
+    style: {
+      width: '100%',
+    },
   },
   tbxImporterRewardRub: {
     min: 0,
@@ -347,6 +464,9 @@ const props: Partial<ElementsProps> = {
     precision: 2,
     parser,
     formatter,
+    style: {
+      width: '100%',
+    },
   },
   selectLead: {
     showSearch: true,
@@ -368,23 +488,22 @@ const props: Partial<ElementsProps> = {
     parser,
     formatter: createFormatter({ minimumFractionDigits: 6, maximumFractionDigits: 6 }),
     addonAfter: '%',
+    style: {
+      width: '100%',
     },
-  linkDownloadKp: {
-    type: 'primary',
-    text: 'Скачать КП',
-    icon: <DownloadOutlined />,
   },
+  linkDownloadKp: { children: 'Скачать КП', icon: <DownloadOutlined />, target: '_blank' },
   tbxMileage: {
     min: 0,
     step: 100,
     precision: 2,
     addonAfter: 'км',
+    style: {
+      width: '100%',
+    },
   },
   cbxRecalcWithRevision: {
-    text: 'Пересчет без пересмотра',
-    style: {
-      marginBottom: '8px',
-    },
+    children: 'Пересчет без пересмотра',
   },
   tbxTotalPayments: {
     min: 0,
@@ -393,6 +512,9 @@ const props: Partial<ElementsProps> = {
     parser,
     formatter,
     addonAfter: '₽',
+    style: {
+      width: '100%',
+    },
   },
   tbxVehicleTaxInYear: {
     min: 0,
@@ -402,6 +524,9 @@ const props: Partial<ElementsProps> = {
     parser,
     formatter,
     addonAfter: '₽',
+    style: {
+      width: '100%',
+    },
   },
   tbxVehicleTaxInLeasingPeriod: {
     min: 0,
@@ -411,6 +536,9 @@ const props: Partial<ElementsProps> = {
     parser,
     formatter,
     addonAfter: '₽',
+    style: {
+      width: '100%',
+    },
   },
   selectObjectRegionRegistration: {
     showSearch: true,
@@ -423,6 +551,9 @@ const props: Partial<ElementsProps> = {
     formatter,
     readOnly: true,
     controls: false,
+    style: {
+      width: '100%',
+    },
   },
   selectLegalClientRegion: {
     showSearch: true,
@@ -457,6 +588,9 @@ const props: Partial<ElementsProps> = {
     step: 0.1,
     precision: 4,
     formatter: createFormatter({ minimumFractionDigits: 4, maximumFractionDigits: 4 }),
+    style: {
+      width: '100%',
+    },
   },
   tbxVIN: {
     onInput: (e) => {

apps/web/Components/Calculation/config/elements-render/override.tsx

@@ -1,4 +1,4 @@
-import buildReadonly from '../../builders/build-readonly';
+import { buildLink } from '../../builders';
 import components from '../elements-components';
 import elementsProps from '../elements-props';
 import titles from '../elements-titles';
@@ -14,7 +14,7 @@ import { Link, Tooltip } from 'ui/elements';
 import { LoadingOutlined } from 'ui/elements/icons';
 
 const defaultLinkProps: ComponentProps<typeof Link> = {
-  text: 'Открыть в CRM',
+  children: 'Открыть в CRM',
   type: 'link',
 };
 
@@ -58,7 +58,7 @@ const overrideRender: Partial<Record<keyof typeof map, RenderProps>> = {
         valueName,
       });
 
-      const LinkComponent = buildReadonly(Link, {
+      const LinkComponent = buildLink(Link, {
         elementName: 'linkLeadUrl',
         valueName: 'leadUrl',
       });
@@ -90,7 +90,7 @@ const overrideRender: Partial<Record<keyof typeof map, RenderProps>> = {
         valueName,
       });
 
-      const LinkComponent = buildReadonly(Link, {
+      const LinkComponent = buildLink(Link, {
         elementName: 'linkOpportunityUrl',
         valueName: 'opportunityUrl',
       });
@@ -122,7 +122,7 @@ const overrideRender: Partial<Record<keyof typeof map, RenderProps>> = {
         valueName,
       });
 
-      const LinkComponent = buildReadonly(Link, {
+      const LinkComponent = buildLink(Link, {
         elementName: 'linkQuoteUrl',
         valueName: 'quoteUrl',
       });

apps/web/Components/Calculation/config/elements-types.ts

@@ -1,11 +1,15 @@
 /* eslint-disable jsdoc/multiline-blocks */
 /* eslint-disable canonical/sort-keys */
-import { buildAction, buildOptions, buildReadonly, buildValue } from '../builders';
+import * as b from '../builders';
 import type { Elements as ActionElements } from './map/actions';
 import type { Elements as ValuesElements } from './map/values';
 
-type ElementTypes = 'Action' | 'Options' | 'Readonly' | 'Value';
-type Builders = typeof buildAction | typeof buildOptions | typeof buildReadonly | typeof buildValue;
+type ElementTypes = 'Action' | 'Check' | 'Link' | 'Options' | 'Readonly' | 'Value';
+type Builders =
+  | typeof b.buildAction
+  | typeof b.buildOptions
+  | typeof b.buildReadonly
+  | typeof b.buildValue;
 
 type GetType = () => {
   builder: Builders;
@@ -19,19 +23,31 @@ function wrapTypeGetters<G extends GetType, E extends Record<ElementTypes, G>>(a
 const t = wrapTypeGetters({
   Value: () => ({
     typeName: 'Value',
-    builder: buildValue,
+    builder: b.buildValue,
+  }),
+  Number: () => ({
+    typeName: 'Number',
+    builder: b.buildNumberValue,
   }),
   Readonly: () => ({
     typeName: 'Readonly',
-    builder: buildReadonly,
+    builder: b.buildReadonly,
   }),
   Options: () => ({
     typeName: 'Options',
-    builder: buildOptions,
+    builder: b.buildOptions,
   }),
   Action: () => ({
     typeName: 'Action',
-    builder: buildAction,
+    builder: b.buildAction,
+  }),
+  Link: () => ({
+    typeName: 'Link',
+    builder: b.buildLink,
+  }),
+  Check: () => ({
+    typeName: 'Check',
+    builder: b.buildCheck,
   }),
 });
 
@@ -40,68 +56,68 @@ function wrapElementsTypes<T, E extends Record<ActionElements | ValuesElements,
 }
 
 const types = wrapElementsTypes({
-  cbxRecalcWithRevision: t.Value,
-  tbxLeaseObjectPrice: t.Value,
-  tbxLeaseObjectPriceWthtVAT: t.Value,
-  tbxVATInLeaseObjectPrice: t.Value,
-  tbxEngineHours: t.Value,
-  tbxSupplierDiscountRub: t.Value,
-  tbxSupplierDiscountPerc: t.Value,
-  tbxLeasingPeriod: t.Value,
-  tbxFirstPaymentPerc: t.Value,
-  tbxFirstPaymentRub: t.Value,
-  tbxLastPaymentPerc: t.Value,
-  tbxLastPaymentRub: t.Value,
+  cbxRecalcWithRevision: t.Check,
+  tbxLeaseObjectPrice: t.Number,
+  tbxLeaseObjectPriceWthtVAT: t.Number,
+  tbxVATInLeaseObjectPrice: t.Number,
+  tbxEngineHours: t.Number,
+  tbxSupplierDiscountRub: t.Number,
+  tbxSupplierDiscountPerc: t.Number,
+  tbxLeasingPeriod: t.Number,
+  tbxFirstPaymentPerc: t.Number,
+  tbxFirstPaymentRub: t.Number,
+  tbxLastPaymentPerc: t.Number,
+  tbxLastPaymentRub: t.Number,
   selectImportProgram: t.Options,
   tbxImportProgramSum: t.Readonly,
-  tbxAddEquipmentPrice: t.Value,
-  tbxRedemptionPaymentSum: t.Value,
-  tbxParmentsDecreasePercent: t.Value,
-  tbxComissionPerc: t.Value,
-  tbxComissionRub: t.Value,
-  tbxSaleBonus: t.Value,
-  tbxIRR_Perc: t.Value,
-  tbxLeaseObjectCount: t.Value,
-  cbxWithTrailer: t.Value,
-  cbxLeaseObjectUsed: t.Value,
-  tbxMaxMass: t.Value,
-  tbxCountSeats: t.Value,
-  tbxMaxSpeed: t.Value,
-  tbxLeaseObjectYear: t.Value,
-  tbxLeaseObjectMotorPower: t.Value,
-  tbxEngineVolume: t.Value,
-  tbxDealerRewardSumm: t.Value,
-  tbxDealerBrokerRewardSumm: t.Value,
-  tbxIndAgentRewardSumm: t.Value,
-  tbxCalcDoubleAgentRewardSumm: t.Value,
-  tbxCalcBrokerRewardSum: t.Value,
-  tbxFinDepartmentRewardSumm: t.Value,
-  cbxInsDecentral: t.Value,
-  tbxInsFranchise: t.Value,
-  cbxInsUnlimitDrivers: t.Value,
-  tbxInsAgeDrivers: t.Value,
-  tbxInsExpDrivers: t.Value,
-  cbxLastPaymentRedemption: t.Value,
-  cbxPriceWithDiscount: t.Value,
-  cbxFullPriceWithDiscount: t.Value,
-  cbxCostIncrease: t.Value,
-  cbxInsurance: t.Value,
-  cbxRegistrationQuote: t.Value,
-  cbxTechnicalCardQuote: t.Value,
-  cbxNSIB: t.Value,
+  tbxAddEquipmentPrice: t.Number,
+  tbxRedemptionPaymentSum: t.Number,
+  tbxParmentsDecreasePercent: t.Number,
+  tbxComissionPerc: t.Number,
+  tbxComissionRub: t.Number,
+  tbxSaleBonus: t.Number,
+  tbxIRR_Perc: t.Number,
+  tbxLeaseObjectCount: t.Number,
+  cbxWithTrailer: t.Check,
+  cbxLeaseObjectUsed: t.Check,
+  tbxMaxMass: t.Number,
+  tbxCountSeats: t.Number,
+  tbxMaxSpeed: t.Number,
+  tbxLeaseObjectYear: t.Number,
+  tbxLeaseObjectMotorPower: t.Number,
+  tbxEngineVolume: t.Number,
+  tbxDealerRewardSumm: t.Number,
+  tbxDealerBrokerRewardSumm: t.Number,
+  tbxIndAgentRewardSumm: t.Number,
+  tbxCalcDoubleAgentRewardSumm: t.Number,
+  tbxCalcBrokerRewardSum: t.Number,
+  tbxFinDepartmentRewardSumm: t.Number,
+  cbxInsDecentral: t.Check,
+  tbxInsFranchise: t.Number,
+  cbxInsUnlimitDrivers: t.Check,
+  tbxInsAgeDrivers: t.Number,
+  tbxInsExpDrivers: t.Number,
+  cbxLastPaymentRedemption: t.Check,
+  cbxPriceWithDiscount: t.Check,
+  cbxFullPriceWithDiscount: t.Check,
+  cbxCostIncrease: t.Check,
+  cbxInsurance: t.Check,
+  cbxRegistrationQuote: t.Check,
+  cbxTechnicalCardQuote: t.Check,
+  cbxNSIB: t.Check,
   tbxQuoteName: t.Value,
-  cbxQuoteRedemptionGraph: t.Value,
-  cbxShowFinGAP: t.Value,
-  tbxCreditRate: t.Value,
-  tbxMaxPriceChange: t.Value,
-  tbxImporterRewardPerc: t.Value,
-  tbxImporterRewardRub: t.Value,
-  cbxDisableChecks: t.Value,
-  tbxMileage: t.Value,
-  tbxTotalPayments: t.Value,
-  tbxVehicleTaxInYear: t.Value,
-  tbxVehicleTaxInLeasingPeriod: t.Value,
-  tbxMinPriceChange: t.Value,
+  cbxQuoteRedemptionGraph: t.Check,
+  cbxShowFinGAP: t.Check,
+  tbxCreditRate: t.Number,
+  tbxMaxPriceChange: t.Number,
+  tbxImporterRewardPerc: t.Number,
+  tbxImporterRewardRub: t.Number,
+  cbxDisableChecks: t.Check,
+  tbxMileage: t.Number,
+  tbxTotalPayments: t.Number,
+  tbxVehicleTaxInYear: t.Number,
+  tbxVehicleTaxInLeasingPeriod: t.Number,
+  tbxMinPriceChange: t.Number,
 
   selectProduct: t.Options,
   selectClientRisk: t.Options,
@@ -163,7 +179,7 @@ const types = wrapElementsTypes({
   selectLeasingWithoutKasko: t.Options,
   tbxVIN: t.Value,
   selectUser: t.Options,
-  cbxSupplierFinancing: t.Value,
+  cbxSupplierFinancing: t.Check,
 
   labelLeaseObjectRisk: t.Readonly,
   tbxInsKaskoPriceLeasePeriod: t.Readonly,
@@ -176,10 +192,10 @@ const types = wrapElementsTypes({
   btnCreateKPMini: t.Action,
   btnCalculate: t.Action,
 
-  linkDownloadKp: t.Readonly,
-  linkLeadUrl: t.Readonly,
-  linkOpportunityUrl: t.Readonly,
-  linkQuoteUrl: t.Readonly,
+  linkDownloadKp: t.Link,
+  linkLeadUrl: t.Link,
+  linkOpportunityUrl: t.Link,
+  linkQuoteUrl: t.Link,
 });
 
 export default types;

apps/web/Components/Output/Results/index.jsx

@@ -18,6 +18,10 @@ const Grid = styled(Box)`
   }
 `;
 
+const Wrapper = styled.div`
+  margin-bottom: 18px;
+`;
+
 const Results = observer(() => {
   const { $results, $process } = useStore();
 
@@ -38,10 +42,12 @@ const Results = observer(() => {
         const value = formatter(storeValue);
 
         return (
+          <Wrapper key={valueName}>
             <Container key={valueName}>
               <Head title={titles[valueName]} />
               <Text>{value}</Text>
             </Container>
+          </Wrapper>
         );
       })}
     </Grid>

apps/web/stores/calculation/statuses/index.ts

@@ -1,10 +1,9 @@
-import type { CalculationStatuses } from './types';
+import type { CalculationStatuses, Status } from './types';
 import type { Elements as ElementsActions } from '@/Components/Calculation/config/map/actions';
 import type { Elements as ElementsValues } from '@/Components/Calculation/config/map/values';
 import defaultStatuses from '@/config/default-statuses';
 import type RootStore from '@/stores/root';
 import { makeAutoObservable } from 'mobx';
-import type { Status } from 'ui/elements/types';
 
 export default class StatusStore {
   private root: RootStore;

apps/web/stores/calculation/statuses/types.ts

@@ -1,5 +1,6 @@
 import type { Elements as ElementsActions } from '@/Components/Calculation/config/map/actions';
 import type { Elements as ElementsValues } from '@/Components/Calculation/config/map/values';
-import type { Status } from 'ui/elements/types';
+
+export type Status = 'Default' | 'Disabled' | 'Hidden' | 'Loading';
 
 export type CalculationStatuses = Record<ElementsActions | ElementsValues, Status>;

apps/web/stores/calculation/validation/hooks.ts

@@ -1,6 +1,12 @@
+import type { Elements } from '@/Components/Calculation/config/map/values';
 import { useStore } from '@/stores/hooks';
+import type { ComponentProps, ReactNode } from 'react';
+import type { Form } from 'ui/elements';
 
-export function useValidation(elementName) {
+export function useValidation(elementName: Elements): {
+  help: ReactNode;
+  validateStatus: ComponentProps<(typeof Form)['Item']>['validateStatus'];
+} {
   const { $calculation, $process } = useStore();
   const hasErrors = $calculation.$validation?.[elementName]?.hasErrors;
   if (hasErrors) {
@@ -11,6 +17,7 @@ export function useValidation(elementName) {
   }
 
   return {
+    help: '',
     validateStatus: '',
   };
 }

apps/web/stores/tables/payments/index.ts

@@ -1,10 +1,10 @@
 import Validation from '../../validation';
 import type { ValidationParams } from '../../validation/types';
 import type { Row } from './types';
+import type { Status } from '@/stores/calculation/statuses/types';
 import type RootStore from '@/stores/root';
 import type { IObservableArray, IObservableValue } from 'mobx';
 import { makeAutoObservable, observable, reaction } from 'mobx';
-import type { Status } from 'ui/elements/types';
 
 export default class PaymentsTable {
   private root: RootStore;

apps/web/stores/tables/payments/types.ts

@@ -1,4 +1,4 @@
-import type { Status } from 'ui/elements/types';
+import type { Status } from '@/stores/calculation/statuses/types';
 
 export type Row = {
   status: Status;

packages/ui/antd/index.ts

@@ -1 +0,0 @@
-export * from 'antd';

packages/ui/elements/Button.tsx

@@ -1,31 +0,0 @@
-import type { BaseElementProps } from './types';
-import { Button as AntButton } from 'antd';
-import type { BaseButtonProps } from 'antd/lib/button/button';
-import type { FC } from 'react';
-import { useThrottledCallback } from 'use-debounce';
-
-type ElementProps = {
-  action: () => void;
-  text: string;
-};
-
-type ButtonProps = BaseButtonProps & Pick<ElementProps, 'text'>;
-
-function Button({ status, action, text, ...props }: BaseElementProps<never> & ElementProps) {
-  const throttledAction = useThrottledCallback(action, 1200, {
-    trailing: false,
-  });
-
-  return (
-    <AntButton
-      disabled={status === 'Disabled'}
-      loading={status === 'Loading'}
-      onClick={throttledAction}
-      {...props}
-    >
-      {text}
-    </AntButton>
-  );
-}
-
-export default Button as FC<ButtonProps>;

packages/ui/elements/Checkbox.tsx

@@ -1,42 +0,0 @@
-import type { BaseElementProps } from './types';
-import type { CheckboxProps as AntCheckboxProps } from 'antd';
-import { Checkbox as AntCheckbox, Form } from 'antd';
-import type { CheckboxChangeEvent } from 'antd/lib/checkbox';
-import type { FC } from 'react';
-
-const { Item: FormItem } = Form;
-
-type ElementProps = {
-  text: string;
-};
-
-type CheckboxProps = AntCheckboxProps & ElementProps;
-
-function Checkbox({
-  value,
-  setValue,
-  status,
-  validateStatus,
-  help,
-  text,
-  ...props
-}: BaseElementProps<boolean> & ElementProps) {
-  function handleChange(event: CheckboxChangeEvent) {
-    setValue(event.target.checked);
-  }
-
-  return (
-    <FormItem help={help} validateStatus={validateStatus}>
-      <AntCheckbox
-        checked={value}
-        disabled={status === 'Disabled'}
-        onChange={handleChange}
-        {...props}
-      >
-        {text}
-      </AntCheckbox>
-    </FormItem>
-  );
-}
-
-export default Checkbox as FC<CheckboxProps>;

packages/ui/elements/Input.tsx

@@ -1,27 +0,0 @@
-import type { BaseElementProps } from './types';
-import type { InputProps } from 'antd';
-import { Form, Input as AntInput } from 'antd';
-import type { ChangeEvent, FC } from 'react';
-
-const { Item: FormItem } = Form;
-
-function Input({
-  value,
-  setValue,
-  status,
-  validateStatus,
-  help,
-  ...props
-}: BaseElementProps<string>) {
-  function handleChange(event: ChangeEvent<HTMLInputElement>) {
-    setValue(event.target.value);
-  }
-
-  return (
-    <FormItem hasFeedback help={help} validateStatus={validateStatus}>
-      <AntInput disabled={status === 'Disabled'} onChange={handleChange} value={value} {...props} />
-    </FormItem>
-  );
-}
-
-export default Input as FC<InputProps>;

packages/ui/elements/InputNumber.tsx

@@ -1,43 +1,6 @@
-import type { BaseElementProps } from './types';
-import type { InputNumberProps as AntInputNumberProps } from 'antd';
-import { Form, InputNumber as AntInputNumber } from 'antd';
-import type { FC } from 'react';
+import type { InputNumberProps } from 'antd';
 
-const { Item: FormItem } = Form;
-
-type InputNumberProps = AntInputNumberProps<number>;
-
-function InputNumber({
-  setValue,
-  status,
-  validateStatus,
-  help,
-  ...props
-}: BaseElementProps<number>) {
-  function handleChange(value: number | null) {
-    if (value) {
-      setValue(value);
-    } else {
-      setValue(0);
-    }
-  }
-
-  return (
-    <FormItem help={help} validateStatus={validateStatus}>
-      <AntInputNumber
-        disabled={status === 'Disabled'}
-        onChange={handleChange}
-        // eslint-disable-next-line react/forbid-component-props
-        style={{
-          width: '100%',
-        }}
-        {...props}
-      />
-    </FormItem>
-  );
-}
-
-export default InputNumber as FC<InputNumberProps>;
+type Formatter = NonNullable<InputNumberProps['formatter']>;
 
 export function createFormatter(options: Intl.NumberFormatOptions) {
   const format = Intl.NumberFormat('ru', options).format;
@@ -46,12 +9,12 @@ export function createFormatter(options: Intl.NumberFormatOptions) {
   return ((value, { userTyping }) => {
     if (userTyping) {
       if (options.minimumFractionDigits && options.minimumFractionDigits <= 2) {
-        return defaultFormat(value || 0);
+        return defaultFormat((value || 0) as number);
       }
 
       return value || 0;
     }
 
-    return format(value || 0);
-  }) as NonNullable<InputNumberProps['formatter']>;
+    return format((value || 0) as number);
+  }) as Formatter;
 }

packages/ui/elements/Link.tsx

@@ -1,31 +1,18 @@
-import type { BaseElementProps } from './types';
+import type { ButtonProps } from 'antd';
 import { Button as AntButton } from 'antd';
-import type { BaseButtonProps } from 'antd/lib/button/button';
-import type { FC } from 'react';
 
-type ElementProps = {
-  text: string;
-};
-
-type LinkProps = BaseButtonProps & ElementProps;
-
-function Link({ value, status, text, ...props }: BaseElementProps<string> & ElementProps) {
+export default function Link({ href, ...props }: ButtonProps) {
   return (
     <AntButton
-      disabled={status === 'Disabled' || !value}
-      // href={value}
-      loading={status === 'Loading'}
       rel="noopener"
       target="_blank"
       type="link"
       onClick={() => {
-        window.open(value, '_blank')?.focus();
+        window.open(href, '_blank')?.focus();
       }}
       {...props}
     >
-      {text}
+      {props.children}
     </AntButton>
   );
 }
-
-export default Link as FC<LinkProps>;

packages/ui/elements/Radio.tsx

@@ -1,51 +1,34 @@
-import type { BaseElementProps, BaseOption } from './types';
 import type { RadioChangeEvent, RadioGroupProps, SpaceProps } from 'antd';
-import { Form, Radio as AntRadio, Space } from 'antd';
-import type { FC } from 'react';
+import { Radio as AntRadio, Space } from 'antd';
+import type { CheckboxOptionType } from 'antd/lib/checkbox';
+import type { Key } from 'react';
 
-const { Item: FormItem } = Form;
-
-type ElementProps = BaseElementProps<string | null> & {
-  options: BaseOption[];
+type RadioProps = Omit<RadioGroupProps, 'onChange' | 'options'> & {
+  onChange?: (value: unknown) => void;
+  options?: CheckboxOptionType[];
   spaceProps?: SpaceProps;
 };
 
-type RadioProps = RadioGroupProps & {
-  spaceProps?: SpaceProps;
-};
-
-function Radio({
+export default function Radio({
   value = null,
-  setValue,
   options,
-  status,
-  validateStatus,
-  help,
   spaceProps,
+  onChange,
   ...props
-}: ElementProps) {
+}: RadioProps) {
   function handleChange(event: RadioChangeEvent) {
-    setValue(event.target.value);
+    if (onChange) onChange(event.target.value);
   }
 
   return (
-    <FormItem help={help} validateStatus={validateStatus}>
-      <AntRadio.Group
-        disabled={status === 'Disabled'}
-        onChange={handleChange}
-        value={value}
-        {...props}
-      >
+    <AntRadio.Group onChange={handleChange} value={value} {...props}>
       <Space {...spaceProps}>
-          {options.map((option) => (
-            <AntRadio key={option.value} value={option.value}>
+        {options?.map((option) => (
+          <AntRadio key={option.value as Key} value={option.value}>
             {option.label}
           </AntRadio>
         ))}
       </Space>
     </AntRadio.Group>
-    </FormItem>
   );
 }
-
-export default Radio as FC<RadioProps>;

packages/ui/elements/Segmented.tsx

@@ -1,36 +1,10 @@
-import type { BaseElementProps, BaseOption } from './types';
 import type { SegmentedProps } from 'antd';
-import { Form, Segmented as AntSegmented } from 'antd';
-import type { FC } from 'react';
+import { Segmented as AntSegmented } from 'antd';
 
-const { Item: FormItem } = Form;
-
-type ElementProps = BaseElementProps<number | string> & {
-  options: BaseOption[];
+type ElementProps = Omit<SegmentedProps, 'options' | 'ref'> & {
+  options?: SegmentedProps['options'];
 };
 
-function Segmented({
-  value,
-  setValue,
-  options,
-  status,
-  validateStatus,
-  help,
-  ...props
-}: ElementProps) {
-  return (
-    <FormItem help={help} validateStatus={validateStatus}>
-      <AntSegmented
-        disabled={status === 'Disabled'}
-        onChange={setValue}
-        onResize={undefined}
-        onResizeCapture={undefined}
-        options={options}
-        value={value}
-        {...props}
-      />
-    </FormItem>
-  );
+export default function Segmented({ options = [], ...props }: ElementProps) {
+  return <AntSegmented {...props} options={options} />;
 }
-
-export default Segmented as FC<Partial<SegmentedProps>>;

packages/ui/elements/Select.tsx

@@ -1,24 +1,8 @@
-import type { BaseElementProps, BaseOption } from './types';
 import type { SelectProps } from 'antd';
-import { Form, Select as AntSelect } from 'antd';
-import type { FC } from 'react';
+import { Select as AntSelect } from 'antd';
 import { useMemo } from 'react';
 
-const { Item: FormItem } = Form;
-
-type ElementProps = {
-  options: BaseOption[];
-};
-
-function Select({
-  value = null,
-  setValue,
-  options = [],
-  status,
-  validateStatus,
-  help,
-  ...props
-}: BaseElementProps<string | null> & ElementProps) {
+export default function Select({ options = [], ...props }: SelectProps<string | null>) {
   const optionsWithNull = useMemo(
     () => [
       {
@@ -30,19 +14,5 @@ function Select({
     [options]
   );
 
-  return (
-    <FormItem help={help} validateStatus={validateStatus}>
-      <AntSelect
-        disabled={status === 'Disabled'}
-        loading={status === 'Loading'}
-        onChange={setValue}
-        optionFilterProp="children"
-        options={optionsWithNull}
-        value={value}
-        {...props}
-      />
-    </FormItem>
-  );
+  return <AntSelect options={optionsWithNull} {...props} />;
 }
-
-export default Select as FC<SelectProps>;

packages/ui/elements/Switch.tsx

@@ -1,23 +0,0 @@
-import type { BaseElementProps } from './types';
-import type { SwitchProps } from 'antd';
-import { Form, Switch as AntSwitch } from 'antd';
-import type { FC } from 'react';
-
-const { Item: FormItem } = Form;
-
-function Switch({
-  value,
-  setValue,
-  status,
-  validateStatus,
-  help,
-  ...props
-}: BaseElementProps<boolean>) {
-  return (
-    <FormItem help={help} validateStatus={validateStatus}>
-      <AntSwitch checked={value} disabled={status === 'Disabled'} onChange={setValue} {...props} />
-    </FormItem>
-  );
-}
-
-export default Switch as FC<SwitchProps>;

packages/ui/elements/Text.tsx

@@ -1,19 +1,9 @@
-import type { FC, ReactNode } from 'react';
-import styled from 'styled-components';
+import { Typography } from 'antd';
+import type { ComponentProps, ReactNode } from 'react';
 
-const Span = styled.span`
-  margin-bottom: 18px;
-  font-size: 0.85rem;
-`;
-
-type TextProps = {
-  children: ReactNode;
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  value: any;
-};
-
-function Text({ value, ...props }: TextProps) {
-  return <Span {...props}>{value || props.children}</Span>;
+export default function Text({
+  value = '',
+  ...props
+}: ComponentProps<(typeof Typography)['Text']> & { value: ReactNode }) {
+  return <Typography.Text>{value || props.children}</Typography.Text>;
 }
-
-export default Text as FC<TextProps>;

packages/ui/elements/index.ts

@@ -10,24 +10,25 @@ notification.config({
   style: { borderRadius: 2 },
 });
 
-export { default as Button } from './Button';
-export { default as Checkbox } from './Checkbox';
 export { default as AntdConfig } from './Config';
-export { default as Input } from './Input';
-export { default as InputNumber } from './InputNumber';
 export { default as Link } from './Link';
 export { default as Radio } from './Radio';
 export { default as Segmented } from './Segmented';
 export { default as Select } from './Select';
-export { default as Switch } from './Switch';
 export { default as Text } from './Text';
 export {
   Alert,
   Badge,
+  Button,
+  Checkbox,
   Divider,
+  Form,
+  Input,
+  InputNumber,
   message,
   notification,
   Result,
+  Switch,
   Table,
   Tabs,
   Tag,

packages/ui/elements/types.ts

@@ -1,15 +1,3 @@
-import type { ValidateStatus } from 'antd/es/form/FormItem';
-
-export type Status = 'Default' | 'Disabled' | 'Hidden' | 'Loading';
-
-export type BaseElementProps<Value> = {
-  help?: string;
-  setValue: (value: Value) => void;
-  status?: Status;
-  validateStatus?: ValidateStatus;
-  value: Value;
-};
-
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 export type BaseOption<Value = any> = {
   label: string;