hunk.code_window: .tooltip {
     background-color: var(--bg-tooltip-color) !important;
     color: var(--text-tooltip-color) !important;
     border-radius: 10px !important;
     box-shadow: 0 2px 4px 0 rgba(34, 36, 38, 0.12), 0 2px 10px 0 rgba(34, 36, 38, 0.15) !important;
     min-width: 300px;
     font-size: 1rem !important;
     text-align: left;
     font-weight: 400;
  
hunk.labels: keep keep keep keep keep replace keep keep keep
hunk.after_edit:   min-width: 50px;
  
hunk.file_path: app/react/components/Tip/TooltipWithChildren/TooltipWithChildren.module.css
hunk.type: replace
file: import { PropsWithChildren, ReactNode } from 'react';
  import clsx from 'clsx';
  
  import { Tooltip } from '@@/Tip/Tooltip';
  
  import { FormError } from '../FormError';
  
  export type Size = 'xsmall' | 'small' | 'medium' | 'large' | 'vertical';
  
  export interface Props {
    inputId?: string;
    label: ReactNode;
    size?: Size;
    tooltip?: string;
    children: ReactNode;
    errors?: ReactNode;
    required?: boolean;
  }
  
  export function FormControl({
    inputId,
    label,
    size = 'small',
    tooltip = '',
    children,
    errors,
    required,
  }: PropsWithChildren<Props>) {
    return (
      <div
        className={clsx(
          'form-group',
          'after:content-[""] after:clear-both after:table' // to fix issues with float
        )}
      >
        <label
          htmlFor={inputId}
          className={clsx(sizeClassLabel(size), 'control-label', 'text-left')}
        >
          {label}
  
          {required && <span className="text-danger">*</span>}
  
          {tooltip && <Tooltip message={tooltip} />}
        </label>
  
        <div className={sizeClassChildren(size)}>
          {children}
  
          {errors && (
            <span className="help-block">
              <FormError>{errors}</FormError>
            </span>
          )}
        </div>
      </div>
    );
  }
  
  function sizeClassLabel(size?: Size) {
    switch (size) {
      case 'large':
        return 'col-sm-5 col-lg-4';
      case 'medium':
        return 'col-sm-4 col-lg-3';
      case 'xsmall':
        return 'col-sm-2';
      case 'vertical':
        return '';
      default:
        return 'col-sm-3 col-lg-2';
    }
  }
  
  function sizeClassChildren(size?: Size) {
    switch (size) {
      case 'large':
        return 'col-sm-7 col-lg-8';
      case 'medium':
        return 'col-sm-8 col-lg-9';
      case 'xsmall':
        return 'col-sm-8';
      case 'vertical':
        return '';
      default:
        return 'col-sm-9 col-lg-10';
    }
  }
  