diff --git a/webapp/packages/core-app/src/AppScreen/Main.tsx b/webapp/packages/core-app/src/AppScreen/Main.tsx
index 5f7f3dff4be..9d1fab6a3b3 100644
--- a/webapp/packages/core-app/src/AppScreen/Main.tsx
+++ b/webapp/packages/core-app/src/AppScreen/Main.tsx
@@ -8,7 +8,21 @@
 import { observer } from 'mobx-react-lite';
 import styled, { css } from 'reshadow';
 
-import { getComputed, Loader, Pane, ResizerControls, Split, splitStyles, useSplitUserState, useStyles } from '@cloudbeaver/core-blocks';
+import {
+  Combobox,
+  getComputed,
+  InputField,
+  InputFiles,
+  Loader,
+  Pane,
+  Radio,
+  ResizerControls,
+  Split,
+  splitStyles,
+  Textarea,
+  useSplitUserState,
+  useStyles,
+} from '@cloudbeaver/core-blocks';
 import { useService } from '@cloudbeaver/core-di';
 import { LeftBarPanelService, SideBarPanel, SideBarPanelService } from '@cloudbeaver/core-ui';
 
@@ -42,29 +56,7 @@ export const Main = observer(function Main() {
 
   return styled(styles)(
     <Loader suspense>
-      <space as="main">
-        <Split {...splitMainState} sticky={30} mode={leftBarDisabled ? 'minimize' : splitMainState.mode} disable={leftBarDisabled}>
-          <Pane basis="250px" main>
-            <Loader suspense>
-              <SideBarPanel container={leftBarPanelService.tabsContainer} />
-            </Loader>
-          </Pane>
-          <ResizerControls />
-          <Pane>
-            <Split {...splitRightState} mode={sideBarDisabled ? 'minimize' : splitRightState.mode} disable={sideBarDisabled} sticky={30}>
-              <Pane>
-                <RightArea />
-              </Pane>
-              <ResizerControls />
-              <Pane basis="250px" main>
-                <Loader suspense>
-                  <SideBarPanel container={sideBarPanelService.tabsContainer} />
-                </Loader>
-              </Pane>
-            </Split>
-          </Pane>
-        </Split>
-      </space>
+      <Combobox description="desc" items={[]}>Label</Combobox>
     </Loader>,
   );
 });
diff --git a/webapp/packages/core-blocks/src/FormControls/Checkboxes/Switch.tsx b/webapp/packages/core-blocks/src/FormControls/Checkboxes/Switch.tsx
index 661cbae450e..aa2204ac91f 100644
--- a/webapp/packages/core-blocks/src/FormControls/Checkboxes/Switch.tsx
+++ b/webapp/packages/core-blocks/src/FormControls/Checkboxes/Switch.tsx
@@ -8,10 +8,11 @@
 import { observer } from 'mobx-react-lite';
 
 import { filterLayoutFakeProps } from '../../Containers/filterLayoutFakeProps';
-import elementsSizeStyles from '../../Containers/shared/ElementsSize.m.css';
 import { s } from '../../s';
 import { useS } from '../../useS';
-import formControlStyles from '../FormControl.m.css';
+import { Field } from '../Field';
+import { FieldDescription } from '../FieldDescription';
+import { FieldLabel } from '../FieldLabel';
 import { isControlPresented } from '../isControlPresented';
 import type { ICheckboxControlledProps, ICheckboxObjectProps } from './Checkbox';
 import switchStyles from './Switch.m.css';
@@ -64,19 +65,19 @@ export const Switch: SwitchType = observer(function Switch({
     onChange,
   });
   rest = filterLayoutFakeProps(rest);
-  const styles = useS(elementsSizeStyles, formControlStyles, switchStyles, ...mod.map(mod => switchMod[mod]));
+  const styles = useS(switchStyles, ...mod.map(mod => switchMod[mod]));
 
   if (autoHide && !isControlPresented(name, state)) {
     return null;
   }
 
   return (
-    <div data-testid="field" className={s(styles, { field: true }, className)} title={rest.title}>
-      <div data-testid="switch-body" className={styles.switchBody}>
-        <div data-testid="switch-control" className={s(styles, { switchControl: true, disabled: disabled, checked: checkboxState.checked })}>
-          <div data-testid="switch-control-track" className={styles.switchControlTrack} />
-          <div data-testid="switch-control-underlay" className={styles.switchControlUnderlay}>
-            <div data-testid="switch-control-thumb" className={styles.switchControlThumb} />
+    <Field className={className} title={rest.title}>
+      <div className={styles.switchBody}>
+        <div className={s(styles, { switchControl: true, disabled: disabled, checked: checkboxState.checked })}>
+          <div className={styles.switchControlTrack} />
+          <div className={styles.switchControlUnderlay}>
+            <div className={styles.switchControlThumb} />
             <input
               {...rest}
               type="checkbox"
@@ -91,15 +92,11 @@ export const Switch: SwitchType = observer(function Switch({
             />
           </div>
         </div>
-        <label htmlFor={id || value || name} data-testid="field-label" className={styles.fieldLabel}>
+        <FieldLabel htmlFor={id || value || name} className={styles.fieldLabel}>
           {children}
-        </label>
+        </FieldLabel>
       </div>
-      {description && (
-        <div data-testid="field-description" className={styles.fieldDescription}>
-          {description}
-        </div>
-      )}
-    </div>
+      {description && <FieldDescription>{description}</FieldDescription>}
+    </Field>
   );
 });
diff --git a/webapp/packages/core-blocks/src/FormControls/Combobox.m.css b/webapp/packages/core-blocks/src/FormControls/Combobox.m.css
index 939d725a5b2..1ef3de0a0b8 100644
--- a/webapp/packages/core-blocks/src/FormControls/Combobox.m.css
+++ b/webapp/packages/core-blocks/src/FormControls/Combobox.m.css
@@ -12,15 +12,17 @@
   margin: 0;
 }
 
-.fieldLabel {
-  display: block;
-  padding-bottom: 10px;
-  composes: theme-typography--body1 from global;
-  font-weight: 500;
+.input {
+  padding-right: 24px !important;
 }
 
 .input {
-  padding-right: 24px !important;
+  font-size: 12px;
+
+  &.select {
+    cursor: pointer;
+    user-select: none;
+  }
 }
 
 .menuButton {
diff --git a/webapp/packages/core-blocks/src/FormControls/Combobox.tsx b/webapp/packages/core-blocks/src/FormControls/Combobox.tsx
index a47c0ad08e4..67c2010fb4c 100644
--- a/webapp/packages/core-blocks/src/FormControls/Combobox.tsx
+++ b/webapp/packages/core-blocks/src/FormControls/Combobox.tsx
@@ -11,7 +11,6 @@ import { Menu, MenuButton, MenuItem, useMenuState } from 'reakit/Menu';
 
 import { filterLayoutFakeProps, getLayoutProps } from '../Containers/filterLayoutFakeProps';
 import type { ILayoutSizeProps } from '../Containers/ILayoutSizeProps';
-import elementsSizeStyles from '../Containers/shared/ElementsSize.m.css';
 import { getComputed } from '../getComputed';
 import { Icon } from '../Icon';
 import { IconOrImage } from '../IconOrImage';
@@ -20,8 +19,10 @@ import { useTranslate } from '../localization/useTranslate';
 import { s } from '../s';
 import { useS } from '../useS';
 import comboboxStyles from './Combobox.m.css';
+import { Field } from './Field';
+import { FieldDescription } from './FieldDescription';
+import { FieldLabel } from './FieldLabel';
 import { FormContext } from './FormContext';
-import formControlStyles from './FormControl.m.css';
 
 type BaseProps<TKey, TValue> = Omit<React.InputHTMLAttributes<HTMLInputElement>, 'onChange' | 'onSelect' | 'name' | 'value' | 'defaultValue'> &
   ILayoutSizeProps & {
@@ -93,7 +94,7 @@ export const Combobox: ComboboxType = observer(function Combobox({
   const context = useContext(FormContext);
   const menuRef = useRef<HTMLDivElement>(null);
   const [inputRef, setInputRef] = useState<HTMLInputElement | null>(null);
-  const styles = useS(elementsSizeStyles, formControlStyles, comboboxStyles);
+  const styles = useS(comboboxStyles);
 
   const menu = useMenuState({
     placement: 'bottom-end',
@@ -255,12 +256,12 @@ export const Combobox: ComboboxType = observer(function Combobox({
   }
 
   return (
-    <div data-testid="field" className={s(styles, { field: true, inline, ...layoutProps }, className)}>
+    <Field {...layoutProps} className={s(styles, { field: true, inline }, className)}>
       {children && (
-        <div title={title} data-testid="field-label" className={styles.fieldLabel}>
+        <FieldLabel title={title} className={styles.fieldLabel}>
           {children}
           {rest.required && ' *'}
-        </div>
+        </FieldLabel>
       )}
       <div data-testid="input-box" className={styles.inputBox}>
         {(icon || loading) && (
@@ -322,20 +323,14 @@ export const Combobox: ComboboxType = observer(function Combobox({
                       {icon && typeof icon === 'string' ? <IconOrImage icon={icon} className={styles.iconOrImage} /> : icon}
                     </div>
                   )}
-                  <div data-testid="item-value" className={styles.itemValue}>
-                    {valueSelector(item)}
-                  </div>
+                  <div>{valueSelector(item)}</div>
                 </MenuItem>
               );
             })
           )}
         </Menu>
       </div>
-      {description && (
-        <div data-testid="field-description" className={styles.fieldDescription}>
-          {description}
-        </div>
-      )}
-    </div>
+      {description && <FieldDescription>{description}</FieldDescription>}
+    </Field>
   );
 });
diff --git a/webapp/packages/core-blocks/src/FormControls/Field.m.css b/webapp/packages/core-blocks/src/FormControls/Field.m.css
new file mode 100644
index 00000000000..61015ed6ff0
--- /dev/null
+++ b/webapp/packages/core-blocks/src/FormControls/Field.m.css
@@ -0,0 +1,8 @@
+.field {
+  box-sizing: border-box;
+
+  & .field {
+    height: 32px;
+    padding: 0;
+  }
+}
diff --git a/webapp/packages/core-blocks/src/FormControls/Field.tsx b/webapp/packages/core-blocks/src/FormControls/Field.tsx
new file mode 100644
index 00000000000..f6ba8ca2471
--- /dev/null
+++ b/webapp/packages/core-blocks/src/FormControls/Field.tsx
@@ -0,0 +1,25 @@
+import { observer } from 'mobx-react-lite';
+import type { HTMLAttributes, PropsWithChildren } from 'react';
+
+import { getLayoutProps } from '../Containers/filterLayoutFakeProps';
+import type { ILayoutSizeProps } from '../Containers/ILayoutSizeProps';
+import elementsSizeStyles from '../Containers/shared/ElementsSize.m.css';
+import { s } from '../s';
+import { useS } from '../useS';
+import fieldStyles from './Field.m.css';
+
+type Props = ILayoutSizeProps &
+  HTMLAttributes<HTMLDivElement> & {
+    className?: string;
+  };
+export const Field: React.FC<PropsWithChildren<Props>> = observer(function Field({ children, className, ...rest }) {
+  const styles = useS(fieldStyles, elementsSizeStyles);
+
+  const layoutProps = getLayoutProps(rest);
+
+  return (
+    <div {...rest} className={s(styles, { ...layoutProps, field: true }, className)}>
+      {children}
+    </div>
+  );
+});
diff --git a/webapp/packages/core-blocks/src/FormControls/FieldDescription.m.css b/webapp/packages/core-blocks/src/FormControls/FieldDescription.m.css
new file mode 100644
index 00000000000..8cca77f4871
--- /dev/null
+++ b/webapp/packages/core-blocks/src/FormControls/FieldDescription.m.css
@@ -0,0 +1,11 @@
+.fieldDescription {
+  composes: theme-typography--caption from global;
+  color: var(--theme-text-hint-on-background);
+  box-sizing: border-box;
+  padding-top: 4px;
+  min-height: 24px;
+
+  &.invalid {
+    color: var(--theme-negative);
+  }
+}
diff --git a/webapp/packages/core-blocks/src/FormControls/FieldDescription.tsx b/webapp/packages/core-blocks/src/FormControls/FieldDescription.tsx
new file mode 100644
index 00000000000..8ad2c2534d4
--- /dev/null
+++ b/webapp/packages/core-blocks/src/FormControls/FieldDescription.tsx
@@ -0,0 +1,16 @@
+import { observer } from 'mobx-react-lite';
+import type { PropsWithChildren } from 'react';
+
+import { s } from '../s';
+import { useS } from '../useS';
+import fieldDescriptionStyles from './FieldDescription.m.css';
+
+interface Props {
+  className?: string;
+  invalid?: boolean;
+}
+export const FieldDescription: React.FC<PropsWithChildren<Props>> = observer(function FieldDescription({ children, className, invalid }) {
+  const styles = useS(fieldDescriptionStyles);
+
+  return <div className={s(styles, { fieldDescription: true, invalid }, className)}>{children}</div>;
+});
diff --git a/webapp/packages/core-blocks/src/FormControls/FieldLabel.m.css b/webapp/packages/core-blocks/src/FormControls/FieldLabel.m.css
new file mode 100644
index 00000000000..41d6c5a8da2
--- /dev/null
+++ b/webapp/packages/core-blocks/src/FormControls/FieldLabel.m.css
@@ -0,0 +1,16 @@
+.fieldLabel {
+  composes: theme-typography--body1 from global;
+  display: block;
+  box-sizing: border-box;
+  overflow: hidden;
+  white-space: initial;
+  text-overflow: ellipsis;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  font-weight: 500;
+}
+
+.fieldLabel:not(:empty) {
+  padding-bottom: 10px;
+}
diff --git a/webapp/packages/core-blocks/src/FormControls/FieldLabel.tsx b/webapp/packages/core-blocks/src/FormControls/FieldLabel.tsx
new file mode 100644
index 00000000000..e45ed179a96
--- /dev/null
+++ b/webapp/packages/core-blocks/src/FormControls/FieldLabel.tsx
@@ -0,0 +1,29 @@
+import { observer } from 'mobx-react-lite';
+import type { LabelHTMLAttributes, PropsWithChildren } from 'react';
+
+import { s } from '../s';
+import { useS } from '../useS';
+import fieldLabelStyles from './FieldLabel.m.css';
+
+type Props = LabelHTMLAttributes<HTMLLabelElement> & {
+  className?: string;
+  title?: string;
+  required?: boolean;
+};
+export const FieldLabel: React.FC<PropsWithChildren<Props>> = observer(function FieldLabel({
+  children,
+  className,
+  htmlFor,
+  title,
+  required,
+  ...rest
+}) {
+  const styles = useS(fieldLabelStyles);
+
+  return (
+    <label {...rest} className={s(styles, { fieldLabel: true }, className)}>
+      {children}
+      {required && ' *'}
+    </label>
+  );
+});
diff --git a/webapp/packages/core-blocks/src/FormControls/Filter.m.css b/webapp/packages/core-blocks/src/FormControls/Filter.m.css
index 61e7a471a99..071cc78a318 100644
--- a/webapp/packages/core-blocks/src/FormControls/Filter.m.css
+++ b/webapp/packages/core-blocks/src/FormControls/Filter.m.css
@@ -40,9 +40,6 @@
   }
 }
 
-.innerInputStyle {
-}
-
 .toggleMode {
   composes: theme-background-primary theme-text-on-primary from global;
   cursor: pointer;
diff --git a/webapp/packages/core-blocks/src/FormControls/Filter.tsx b/webapp/packages/core-blocks/src/FormControls/Filter.tsx
index 49fd6ab54b9..fb7c1d7a680 100644
--- a/webapp/packages/core-blocks/src/FormControls/Filter.tsx
+++ b/webapp/packages/core-blocks/src/FormControls/Filter.tsx
@@ -107,8 +107,8 @@ export const Filter = observer<ControlledProps | ObjectsProps<any, any>>(functio
   return (
     <div className={s(styles, { filterContainer: true })} onClick={onClick}>
       <InputField
-        className={s(styles, { inputField: true, max, toggled }, className)}
         ref={inputRef}
+        className={s(styles, { inputField: true, max, toggled }, className)}
         placeholder={placeholder}
         disabled={disabled}
         name={name}
diff --git a/webapp/packages/core-blocks/src/FormControls/FormFieldDescription.tsx b/webapp/packages/core-blocks/src/FormControls/FormFieldDescription.tsx
index df42329dc3f..3d9cf2f15c4 100644
--- a/webapp/packages/core-blocks/src/FormControls/FormFieldDescription.tsx
+++ b/webapp/packages/core-blocks/src/FormControls/FormFieldDescription.tsx
@@ -21,7 +21,13 @@ interface Props extends ILayoutSizeProps {
   className?: string;
 }
 
-export const FormFieldDescription: React.FC<React.PropsWithChildren<Props>> = observer(function FormFieldDescription({ label, title, children, className, ...rest }) {
+export const FormFieldDescription: React.FC<React.PropsWithChildren<Props>> = observer(function FormFieldDescription({
+  label,
+  title,
+  children,
+  className,
+  ...rest
+}) {
   const styles = useS(formControlStyles, elementsSizeStyles, style);
   const layoutProps = getLayoutProps(rest);
   rest = filterLayoutFakeProps(rest);
diff --git a/webapp/packages/core-blocks/src/FormControls/InputField.m.css b/webapp/packages/core-blocks/src/FormControls/InputField.m.css
index 3531611b5b6..1ac0b2448a9 100644
--- a/webapp/packages/core-blocks/src/FormControls/InputField.m.css
+++ b/webapp/packages/core-blocks/src/FormControls/InputField.m.css
@@ -1,14 +1,6 @@
 .icon {
   composes: theme-text-on-secondary from global;
 }
-.fieldLabel {
-  display: block;
-  composes: theme-typography--body1 from global;
-  font-weight: 500;
-}
-.fieldLabel:not(:empty) {
-  margin-bottom: 10px;
-}
 .inputContainer {
   position: relative;
 }
@@ -38,6 +30,10 @@
   cursor: auto;
 }
 
+.input {
+  font-size: 12px;
+}
+
 .input[disabled] + .iconContainer {
   cursor: auto;
   opacity: 0.8;
diff --git a/webapp/packages/core-blocks/src/FormControls/InputField.tsx b/webapp/packages/core-blocks/src/FormControls/InputField.tsx
index b1630e53b04..5e4f7c9762d 100644
--- a/webapp/packages/core-blocks/src/FormControls/InputField.tsx
+++ b/webapp/packages/core-blocks/src/FormControls/InputField.tsx
@@ -8,12 +8,10 @@
 import { observer } from 'mobx-react-lite';
 import React, { forwardRef, useCallback, useContext, useLayoutEffect, useRef, useState } from 'react';
 
-import type { ComponentStyle } from '@cloudbeaver/core-theming';
 import { isNotNullDefined } from '@cloudbeaver/core-utils';
 
 import { filterLayoutFakeProps, getLayoutProps } from '../Containers/filterLayoutFakeProps';
 import type { ILayoutSizeProps } from '../Containers/ILayoutSizeProps';
-import elementsSizeStyles from '../Containers/shared/ElementsSize.m.css';
 import { Icon } from '../Icon';
 import { Loader } from '../Loader/Loader';
 import { useTranslate } from '../localization/useTranslate';
@@ -22,9 +20,10 @@ import { useCombinedHandler } from '../useCombinedHandler';
 import { useMergeRefs } from '../useMergeRefs';
 import { useS } from '../useS';
 import { useStateDelay } from '../useStateDelay';
-import { useStyles } from '../useStyles';
+import { Field } from './Field';
+import { FieldDescription } from './FieldDescription';
+import { FieldLabel } from './FieldLabel';
 import { FormContext } from './FormContext';
-import formControlStyles from './FormControl.m.css';
 import inputFieldStyle from './InputField.m.css';
 import { isControlPresented } from './isControlPresented';
 import { useCapsLockTracker } from './useCapsLockTracker';
@@ -35,9 +34,7 @@ type BaseProps = Omit<React.InputHTMLAttributes<HTMLInputElement>, 'onChange' |
     loading?: boolean;
     description?: string;
     labelTooltip?: string;
-    mod?: 'surface';
     ref?: React.ForwardedRef<HTMLInputElement>;
-    style?: ComponentStyle;
     canShowPassword?: boolean;
     onCustomCopy?: () => void;
     icon?: React.ReactElement;
@@ -72,7 +69,6 @@ export const InputField: InputFieldType = observer(
   forwardRef<HTMLInputElement>(function InputField(
     {
       name,
-      style,
       value: valueControlled,
       defaultValue,
       required,
@@ -85,7 +81,6 @@ export const InputField: InputFieldType = observer(
       loading,
       description,
       labelTooltip,
-      mod,
       autoHide,
       canShowPassword = true,
       onChange,
@@ -102,8 +97,7 @@ export const InputField: InputFieldType = observer(
     const translate = useTranslate();
     const layoutProps = getLayoutProps(rest);
     rest = filterLayoutFakeProps(rest);
-    const propStyles = useStyles(style);
-    const styles = useS(inputFieldStyle, formControlStyles, elementsSizeStyles);
+    const styles = useS(inputFieldStyle);
     const context = useContext(FormContext);
     loading = useStateDelay(loading ?? false, 300);
 
@@ -163,47 +157,42 @@ export const InputField: InputFieldType = observer(
     }
 
     return (
-      <div data-testid="field" className={s(styles, { ...layoutProps, field: true }, className)}>
-        <div data-testid="field-label" title={labelTooltip || rest.title} className={styles.fieldLabel}>
+      <Field {...layoutProps} className={className}>
+        <FieldLabel title={labelTooltip || rest.title} required={required}>
           {children}
-          {required && ' *'}
-        </div>
-        <div data-testid="input-container" className={styles.inputContainer}>
+        </FieldLabel>
+        <div className={s(styles, { inputContainer: true })}>
           <input
             ref={mergedRef}
             {...rest}
             type={passwordRevealed ? 'text' : rest.type}
             name={name}
             value={uncontrolled ? undefined : value ?? ''}
-            className={styles.input}
+            className={s(styles, { input: true })}
+            required={required}
             onChange={handleChange}
             onBlur={handleBlur}
             onKeyDown={handleKeyDown}
-            required={required}
           />
           {loading && (
-            <div data-testid="loader-container" title={translate('ui_processing_loading')} className={styles.loaderContainer}>
+            <div title={translate('ui_processing_loading')} className={styles.loaderContainer}>
               <Loader small />
             </div>
           )}
           {passwordType && canShowPassword && (
-            <div data-testid="icon-container" title={translate('ui_reveal_password')} className={styles.iconContainer} onClick={revealPassword}>
+            <div title={translate('ui_reveal_password')} className={styles.iconContainer} onClick={revealPassword}>
               <Icon name={passwordRevealed ? 'password-hide' : 'password-show'} viewBox="0 0 16 16" className={styles.icon} />
             </div>
           )}
           {onCustomCopy && (
-            <div data-testid="icon-container" title={translate('ui_copy_to_clipboard')} className={styles.iconContainer} onClick={onCustomCopy}>
+            <div title={translate('ui_copy_to_clipboard')} className={styles.iconContainer} onClick={onCustomCopy}>
               <Icon name="copy" viewBox="0 0 32 32" className={styles.icon} />
             </div>
           )}
-          {icon && <div data-testid="icon-container" className={styles.customIconContainer}>{icon}</div>}
+          {icon && <div className={styles.customIconContainer}>{icon}</div>}
         </div>
-        {(description || passwordType) && (
-          <div data-testid="field-description" className={s(styles, { fieldDescription: true, invalid: error })}>
-            {description}
-          </div>
-        )}
-      </div>
+        {(description || passwordType) && <FieldDescription invalid={error}>{description}</FieldDescription>}
+      </Field>
     );
   }),
 );
diff --git a/webapp/packages/core-blocks/src/FormControls/InputFileTextContent.m.css b/webapp/packages/core-blocks/src/FormControls/InputFileTextContent.m.css
index 99bd8dee984..d47001b99ae 100644
--- a/webapp/packages/core-blocks/src/FormControls/InputFileTextContent.m.css
+++ b/webapp/packages/core-blocks/src/FormControls/InputFileTextContent.m.css
@@ -1,11 +1,3 @@
-.fieldLabel {
-  display: block;
-  composes: theme-typography--body1 from global;
-  font-weight: 500;
-}
-.fieldLabel:not(:empty) {
-  padding-bottom: 10px;
-}
 .fieldDescription {
   display: flex;
   align-items: center;
diff --git a/webapp/packages/core-blocks/src/FormControls/InputFileTextContent.tsx b/webapp/packages/core-blocks/src/FormControls/InputFileTextContent.tsx
index d891f761caa..5a2b3b639c3 100644
--- a/webapp/packages/core-blocks/src/FormControls/InputFileTextContent.tsx
+++ b/webapp/packages/core-blocks/src/FormControls/InputFileTextContent.tsx
@@ -7,23 +7,21 @@
  */
 import { observer } from 'mobx-react-lite';
 import { ReactNode, useContext, useState } from 'react';
-import styled from 'reshadow';
 
 import type { ComponentStyle } from '@cloudbeaver/core-theming';
 import { blobToData, bytesToSize } from '@cloudbeaver/core-utils';
 
 import { Button } from '../Button';
-import { filterLayoutFakeProps, getLayoutProps } from '../Containers/filterLayoutFakeProps';
 import type { ILayoutSizeProps } from '../Containers/ILayoutSizeProps';
-import elementsSizeStyles from '../Containers/shared/ElementsSize.m.css';
 import { IconButton } from '../IconButton';
 import { useTranslate } from '../localization/useTranslate';
 import { s } from '../s';
 import { UploadArea } from '../UploadArea';
 import { useS } from '../useS';
-import { useStyles } from '../useStyles';
+import { Field } from './Field';
+import { FieldDescription } from './FieldDescription';
+import { FieldLabel } from './FieldLabel';
 import { FormContext } from './FormContext';
-import formControlStyles from './FormControl.m.css';
 import inputFileTextContentStyles from './InputFileTextContent.m.css';
 
 const DEFAULT_MAX_FILE_SIZE = 2048;
@@ -56,14 +54,12 @@ export const InputFileTextContent: InputFileTextContentType = observer(function
   tooltip,
   required,
   fileName,
-  style: styleProp,
   maxFileSize = DEFAULT_MAX_FILE_SIZE,
   disabled,
   className,
   children,
   onChange,
   mapValue,
-  ...rest
 }: Props<Record<any, any>>) {
   const translate = useTranslate();
   const context = useContext(FormContext);
@@ -71,9 +67,7 @@ export const InputFileTextContent: InputFileTextContentType = observer(function
   const [selected, setSelected] = useState<File | null>(null);
   const [error, setError] = useState<Error | null>(null);
 
-  const layoutProps = getLayoutProps(rest);
-  rest = filterLayoutFakeProps(rest);
-  const styles = useS(formControlStyles, elementsSizeStyles, inputFileTextContentStyles);
+  const styles = useS(inputFileTextContentStyles);
 
   const savedExternally = !!fileName && state[name] !== '';
   const saved = savedExternally || !!state[name];
@@ -141,28 +135,20 @@ export const InputFileTextContent: InputFileTextContentType = observer(function
     }
   }
 
-  return styled(useStyles(styleProp))(
-    <div className={s(styles, { ...layoutProps, field: true }, className)}>
-      <div className={s(styles, { fieldLabel: true })} title={labelTooltip}>
+  return (
+    <Field className={className}>
+      <FieldLabel title={labelTooltip} required={required}>
         {children}
-        {required && ' *'}
-      </div>
+      </FieldLabel>
       <UploadArea title={tooltip} disabled={disabled} accept={accept} reset onChange={handleChange}>
         <Button icon="/icons/import.svg" tag="div" mod={['outlined']} disabled={disabled}>
           {translate('ui_upload_file')}
         </Button>
       </UploadArea>
-      <div className={s(styles, { fieldDescription: true })}>
+      <FieldDescription className={s(styles, { fieldDescription: true })}>
         {description}
-        {(selected || saved) && (
-          <IconButton
-            className={s(styles, { iconButton: true, valid: !error, invalid: !!error })}
-            disabled={disabled}
-            name="cross"
-            onClick={removeFile}
-          />
-        )}
-      </div>
-    </div>,
+        {(selected || saved) && <IconButton className={s(styles, { iconButton: true })} disabled={disabled} name="cross" onClick={removeFile} />}
+      </FieldDescription>
+    </Field>
   );
 });
diff --git a/webapp/packages/core-blocks/src/FormControls/InputFiles.m.css b/webapp/packages/core-blocks/src/FormControls/InputFiles.m.css
index e1e4cde4f4d..9367d0ba33a 100644
--- a/webapp/packages/core-blocks/src/FormControls/InputFiles.m.css
+++ b/webapp/packages/core-blocks/src/FormControls/InputFiles.m.css
@@ -1,11 +1,3 @@
-.fieldLabel {
-  display: block;
-  composes: theme-typography--body1 from global;
-  font-weight: 500;
-}
-.fieldLabel:not(:empty) {
-  padding-bottom: 10px;
-}
 .inputContainer {
   position: relative;
 }
diff --git a/webapp/packages/core-blocks/src/FormControls/InputFiles.tsx b/webapp/packages/core-blocks/src/FormControls/InputFiles.tsx
index 65822f928be..197e584ad6d 100644
--- a/webapp/packages/core-blocks/src/FormControls/InputFiles.tsx
+++ b/webapp/packages/core-blocks/src/FormControls/InputFiles.tsx
@@ -13,7 +13,6 @@ import type { ComponentStyle } from '@cloudbeaver/core-theming';
 import { Button } from '../Button';
 import { filterLayoutFakeProps, getLayoutProps } from '../Containers/filterLayoutFakeProps';
 import type { ILayoutSizeProps } from '../Containers/ILayoutSizeProps';
-import elementsSizeStyles from '../Containers/shared/ElementsSize.m.css';
 import { useTranslate } from '../localization/useTranslate';
 import { s } from '../s';
 import { Tag } from '../Tags/Tag';
@@ -23,8 +22,10 @@ import { useCombinedHandler } from '../useCombinedHandler';
 import { useRefInherit } from '../useRefInherit';
 import { useS } from '../useS';
 import { useStateDelay } from '../useStateDelay';
+import { Field } from './Field';
+import { FieldDescription } from './FieldDescription';
+import { FieldLabel } from './FieldLabel';
 import { FormContext } from './FormContext';
-import formControlStyles from './FormControl.m.css';
 import InputFilesStyles from './InputFiles.m.css';
 import { isControlPresented } from './isControlPresented';
 
@@ -35,7 +36,6 @@ type BaseProps = Omit<React.InputHTMLAttributes<HTMLInputElement>, 'onChange' |
     description?: string;
     labelTooltip?: string;
     hideTags?: boolean;
-    mod?: 'surface';
     ref?: React.Ref<HTMLInputElement>;
     style?: ComponentStyle;
     aggregate?: boolean;
@@ -78,7 +78,6 @@ export const InputFiles: InputFilesType = observer(
       description,
       labelTooltip,
       hideTags,
-      mod,
       autoHide,
       aggregate,
       onChange,
@@ -92,7 +91,7 @@ export const InputFiles: InputFilesType = observer(
     const ref = useRefInherit<HTMLInputElement>(refInherit);
     const [innerState, setInnerState] = useState<FileList | null>(null);
     const translate = useTranslate();
-    const styles = useS(formControlStyles, elementsSizeStyles, InputFilesStyles);
+    const styles = useS(InputFilesStyles);
     const context = useContext(FormContext);
     loading = useStateDelay(loading ?? false, 300);
 
@@ -173,11 +172,10 @@ export const InputFiles: InputFilesType = observer(
     const files = Array.from(value ?? []);
 
     return (
-      <div className={s(styles, { ...layoutProps, field: true }, className)}>
-        <label title={labelTooltip || rest.title} className={s(styles, { fieldLabel: true })}>
+      <Field {...layoutProps} className={className}>
+        <FieldLabel title={labelTooltip || rest.title} required={required}>
           {children}
-          {required && ' *'}
-        </label>
+        </FieldLabel>
         <div className={s(styles, { inputContainer: true })}>
           <UploadArea ref={ref} {...rest} name={name} value={value} required={required} onChange={handleChange}>
             <Button icon="/icons/import.svg" tag="div" loading={loading} mod={['outlined']}>
@@ -192,8 +190,8 @@ export const InputFiles: InputFilesType = observer(
             </Tags>
           )}
         </div>
-        {description && <div className={s(styles, { fieldDescription: true, invalid: error })}>{description}</div>}
-      </div>
+        {description && <FieldDescription invalid={error}>{description}</FieldDescription>}
+      </Field>
     );
   }),
 );
diff --git a/webapp/packages/core-blocks/src/FormControls/Radio.tsx b/webapp/packages/core-blocks/src/FormControls/Radio.tsx
index 1ac6c27a363..18aaea36f1a 100644
--- a/webapp/packages/core-blocks/src/FormControls/Radio.tsx
+++ b/webapp/packages/core-blocks/src/FormControls/Radio.tsx
@@ -7,15 +7,13 @@
  */
 import { observer } from 'mobx-react-lite';
 import { useCallback, useContext } from 'react';
-import styled from 'reshadow';
 
 import { filterLayoutFakeProps, getLayoutProps } from '../Containers/filterLayoutFakeProps';
 import type { ILayoutSizeProps } from '../Containers/ILayoutSizeProps';
 import elementsSizeStyles from '../Containers/shared/ElementsSize.m.css';
 import { s } from '../s';
 import { useS } from '../useS';
-import { useStyles } from '../useStyles';
-import { baseFormControlStyles } from './baseFormControlStyles';
+import { Field } from './Field';
 import { FormContext } from './FormContext';
 import formControlStyles from './FormControl.m.css';
 import style from './Radio.m.css';
@@ -104,7 +102,7 @@ export const Radio: RadioType = observer(function Radio({
   }
 
   return (
-    <div className={s(styles, { ...layoutProps, field: true, menu: mod?.includes('menu') }, className)}>
+    <Field {...layoutProps} className={s(styles, { field: true, menu: mod?.includes('menu') }, className)}>
       <div
         className={s(styles, {
           radio: true,
@@ -133,6 +131,6 @@ export const Radio: RadioType = observer(function Radio({
       <label className={s(styles, { label: true, disabled: rest.disabled })} htmlFor={id}>
         {children}
       </label>
-    </div>
+    </Field>
   );
 });
diff --git a/webapp/packages/core-blocks/src/FormControls/Textarea.m.css b/webapp/packages/core-blocks/src/FormControls/Textarea.m.css
index 1a5fc05fc44..1f3d3c2d416 100644
--- a/webapp/packages/core-blocks/src/FormControls/Textarea.m.css
+++ b/webapp/packages/core-blocks/src/FormControls/Textarea.m.css
@@ -1,5 +1,6 @@
 .textarea {
   line-height: 19px;
+  font-size: 12px;
 }
 .field.embedded {
   height: 100%;
@@ -12,13 +13,3 @@
     resize: none !important;
   }
 }
-.fieldLabel {
-  display: block;
-  padding-bottom: 10px;
-  composes: theme-typography--body1 from global;
-  font-weight: 500;
-
-  &:empty {
-    display: none;
-  }
-}
diff --git a/webapp/packages/core-blocks/src/FormControls/Textarea.tsx b/webapp/packages/core-blocks/src/FormControls/Textarea.tsx
index 00f806f1ece..10b609f5ae5 100644
--- a/webapp/packages/core-blocks/src/FormControls/Textarea.tsx
+++ b/webapp/packages/core-blocks/src/FormControls/Textarea.tsx
@@ -10,11 +10,12 @@ import { useCallback, useContext } from 'react';
 
 import { filterLayoutFakeProps, getLayoutProps } from '../Containers/filterLayoutFakeProps';
 import type { ILayoutSizeProps } from '../Containers/ILayoutSizeProps';
-import elementsSizeStyles from '../Containers/shared/ElementsSize.m.css';
 import { s } from '../s';
 import { useS } from '../useS';
+import { Field } from './Field';
+import { FieldDescription } from './FieldDescription';
+import { FieldLabel } from './FieldLabel';
 import { FormContext } from './FormContext';
-import formControlStyles from './FormControl.m.css';
 import textareaStyle from './Textarea.m.css';
 
 type BaseProps = Omit<React.TextareaHTMLAttributes<HTMLTextAreaElement>, 'onChange' | 'style'> &
@@ -58,7 +59,7 @@ export const Textarea: TextareaType = observer(function Textarea({
 }: ControlledProps | ObjectProps<any, any>) {
   const layoutProps = getLayoutProps(rest);
   rest = filterLayoutFakeProps(rest);
-  const styles = useS(formControlStyles, elementsSizeStyles, textareaStyle);
+  const styles = useS(textareaStyle);
   const context = useContext(FormContext);
 
   const handleChange = useCallback(
@@ -79,11 +80,10 @@ export const Textarea: TextareaType = observer(function Textarea({
   const value = state ? state[name] : controlledValue;
 
   return (
-    <div className={s(styles, { ...layoutProps, field: true, embedded }, className)}>
-      <label className={s(styles, { fieldLabel: true })} title={labelTooltip || rest.title}>
+    <Field {...layoutProps} className={s(styles, { embedded }, className)}>
+      <FieldLabel title={labelTooltip || rest.title} required={required}>
         {children}
-        {required && ' *'}
-      </label>
+      </FieldLabel>
       <textarea
         {...rest}
         className={s(styles, { textarea: true })}
@@ -92,7 +92,7 @@ export const Textarea: TextareaType = observer(function Textarea({
         data-embedded={embedded}
         onChange={handleChange}
       />
-      {description && <div className={s(styles, { fieldDescription: true })}>{description}</div>}
-    </div>
+      {description && <FieldDescription>{description}</FieldDescription>}
+    </Field>
   );
 });
diff --git a/webapp/packages/core-blocks/src/FormControls/baseFormControlStyles.ts b/webapp/packages/core-blocks/src/FormControls/baseFormControlStyles.ts
deleted file mode 100644
index a65de06f0c3..00000000000
--- a/webapp/packages/core-blocks/src/FormControls/baseFormControlStyles.ts
+++ /dev/null
@@ -1,57 +0,0 @@
-/*
- * CloudBeaver - Cloud Database Manager
- * Copyright (C) 2020-2023 DBeaver Corp and others
- *
- * Licensed under the Apache License, Version 2.0.
- * you may not use this file except in compliance with the License.
- */
-import { css } from 'reshadow';
-
-export const baseFormControlStyles = css`
-  field {
-    box-sizing: border-box;
-    max-width: 100%;
-
-    & field {
-      height: 32px;
-      padding: 0;
-    }
-  }
-
-  field-label {
-    composes: theme-typography--body1 from global;
-    box-sizing: border-box;
-    overflow: hidden;
-    white-space: nowrap;
-    text-overflow: ellipsis;
-  }
-
-  field-description {
-    composes: theme-typography--caption from global;
-    box-sizing: border-box;
-    padding-top: 4px;
-    min-height: 24px;
-  }
-
-  input,
-  textarea {
-    font-size: 12px;
-
-    &[|select] {
-      cursor: pointer;
-      user-select: none;
-    }
-  }
-`;
-
-export const baseValidFormControlStyles = css`
-  field-description {
-    composes: theme-text-text-hint-on-light from global;
-  }
-`;
-
-export const baseInvalidFormControlStyles = css`
-  field-description {
-    composes: theme-text-negative from global;
-  }
-`;