hunk.code_window: const styles = cva(
   	[
   		'form-check-input float-left mr-2 mt-1 h-4 w-4 appearance-none rounded-sm border border-gray-300 bg-white bg-contain bg-center bg-no-repeat align-top transition duration-200',
   		'checked:border-blue-600 checked:bg-blue-600 focus:outline-none '
   	],
   	{ variants: {} }
   );
  
hunk.labels: keep keep keep replace keep keep keep keep
hunk.after_edit: 		'checked:border-accent checked:bg-accent focus:outline-none checked:hover:bg-accent/80'
  
hunk.file_path: packages/ui/src/CheckBox.tsx
hunk.type: replace
file: import { useLibraryMutation } from '@sd/client';
  import { Dialog, UseDialogProps, useDialog } from '@sd/ui';
  import { useZodForm } from '@sd/ui/src/forms';
  
  interface Propps extends UseDialogProps {
  	location_id: number;
  	path_id: number;
  }
  
  export default (props: Propps) => {
  	const deleteFile = useLibraryMutation('files.deleteFiles');
  
  	const form = useZodForm();
  
  	return (
  		<Dialog
  			form={form}
  			onSubmit={form.handleSubmit(() =>
  				deleteFile.mutateAsync({
  					location_id: props.location_id,
  					path_id: props.path_id
  				})
  			)}
  			dialog={useDialog(props)}
  			title="Delete a file"
  			description="Configure your deletion settings."
  			loading={deleteFile.isLoading}
  			ctaLabel="Delete"
  		>
  			<p>TODO: checkbox for "delete all matching files" (only if a file is selected)</p>
  		</Dialog>
  	);
  };
  