Port some stuff from sync PR

src-web/components/core/Checkbox.tsx

@@ -1,28 +1,27 @@
 import classNames from 'classnames';
+import type { ReactNode } from 'react';
 import { Icon } from './Icon';
 import { HStack } from './Stacks';
 
-interface Props {
-  checked: boolean;
-  title: string;
+export interface CheckboxProps {
+  checked: boolean | 'indeterminate';
+  title: ReactNode;
   onChange: (checked: boolean) => void;
-  disabled?: boolean;
   className?: string;
+  disabled?: boolean;
   inputWrapperClassName?: string;
-  indeterminate?: boolean;
   hideLabel?: boolean;
 }
 
 export function Checkbox({
   checked,
-  indeterminate,
   onChange,
   className,
   inputWrapperClassName,
   disabled,
   title,
   hideLabel,
-}: Props) {
+}: CheckboxProps) {
   return (
     <HStack
       as="label"
@@ -38,10 +37,13 @@ export function Checkbox({
           )}
           type="checkbox"
           disabled={disabled}
-          onChange={() => onChange(!checked)}
+          onChange={() => onChange(checked === 'indeterminate' ? true : !checked)}
         />
         <div className="absolute inset-0 flex items-center justify-center">
-          <Icon size="sm" icon={indeterminate ? 'minus' : checked ? 'check' : 'empty'} />
+          <Icon
+            size="sm"
+            icon={checked === 'indeterminate' ? 'minus' : checked ? 'check' : 'empty'}
+          />
         </div>
       </div>
       {!hideLabel && title}