import styled , { css } from 'reshadow' ; import { useStyles } from '@cloudbeaver/core-theming' ; import { baseFormControlStyles } from '../baseFormControlStyles' ; import { isControlPresented } from '../isControlPresented' ; import { Checkbox , CheckboxBaseProps , CheckboxType , ICheckboxControlledProps , ICheckboxObjectProps } from './Checkbox' ; const style = css `
  Checkbox {
    margin: -10px;
  }
  field {
    display: flex;
    align-items: flex-end;
    white-space: pre-wrap;
  }
  field-label {
    composes: theme-typography--body2 from global;
    cursor: pointer;
    user-select: none;
    padding-left: 10px;
    line-height: 16px;
  }
  Checkbox[disabled] + field-label {
    cursor: auto;
  }
` ; export const FieldCheckbox = function FieldCheckbox ( { children , className , ... rest } ) { const styles = useStyles ( baseFormControlStyles , style ) ; if ( rest . autoHide && ! isControlPresented ( rest . name , rest . state ) ) { return null ; } return styled ( styles ) ( < field className = { className } > < Checkbox { ... ( rest as CheckboxBaseProps & ICheckboxControlledProps ) } / > < field - label htmlFor = { rest . id || rest . name } title = { rest . title } as = "label" > { children } < /field-label> < /field>); } ;