@@ -1,7 +1,6 @@
11import React from 'react';
22import cn from 'classnames';
33
4−import Flex from './Flex';
54import { useField } from 'react-final-form';
65import { Checkbox } from '@tlon/indigo-react';
76
@@ -24,9 +23,7 @@ export default function CheckboxInput({
2423 disabled = disabled || submitting || submitSucceeded;
2524
2625 return (
27− <Flex
28− row
29− align="center"
26+ <div
3027 className={cn(className, {
3128 mv2: !inline,
3229 black: !disabled,
@@ -39,22 +36,19 @@ export default function CheckboxInput({
3936 }),
4037 }}>
4138 {/* we totally hide the checkbox itself */}
42− <Flex.Item as="input" className="super-hidden" id={name} {...input} />
39+ <input checkbox className="super-hidden" id={name} {...input} />
4340 {/* and then display a prettier one in its stead */}
44− <Flex.Item
45− flex
46− as="label"
47− className={cn(
48− { mr3: !inline },
49− 'lh-tall us-none pointer flex-row align-center'
50− )}
51− style={{ fontSize: '14px' }}
41+ <label
42+ style={{
43+ display: 'flex',
44+ alignItems: 'center',
45+ cursor: 'pointer',
46+ fontSize: '14px',
47+ }}
5248 htmlFor={name}>
53− <Flex style={{ marginRight: '8px' }}>
54− <Checkbox selected={input.checked} />
55− </Flex>
49+ <Checkbox selected={input.checked} style={{ marginRight: '8px' }} />
5650 {label}
57− </Flex.Item>
58− </Flex>
51+ </label>
52+ </div>
5953 );
6054}