Just a test release

web/src/components/InputFile.astro

@@ -10,15 +10,27 @@ type Props = Omit<ComponentProps<typeof InputWrapper>, 'children' | 'inputId'> &
   accept?: string
   disabled?: boolean
   multiple?: boolean
+  removeCheckbox?: {
+    name: string
+    label: string
+  }
 }
 
-const { accept, disabled, multiple, ...wrapperProps } = Astro.props
+const { accept, disabled, multiple, removeCheckbox, ...wrapperProps } = Astro.props
 
 const inputId = Astro.locals.makeId(`input-${wrapperProps.name}`)
 const hasError = !!wrapperProps.error && wrapperProps.error.length > 0
 ---
 
 <InputWrapper inputId={inputId} {...wrapperProps}>
+  {
+    !!removeCheckbox && (
+      <label class="flex cursor-pointer items-center gap-2 py-1 pl-1 text-sm leading-none">
+        <input transition:persist type="checkbox" name={removeCheckbox.name} data-remove-checkbox />
+        {removeCheckbox.label || 'Remove'}
+      </label>
+    )
+  }
   <input
     transition:persist
     type="file"
@@ -27,7 +39,8 @@ const hasError = !!wrapperProps.error && wrapperProps.error.length > 0
       baseInputClassNames.input,
       baseInputClassNames.file,
       hasError && baseInputClassNames.error,
-      disabled && baseInputClassNames.disabled
+      disabled && baseInputClassNames.disabled,
+      '[&:is(:has([data-remove-checkbox]:checked)_~_*)]:hidden'
     )}
     required={wrapperProps.required}
     disabled={disabled}

web/src/components/InputImageFile.astro

@@ -8,20 +8,26 @@ import type { ComponentProps } from 'astro/types'
 
 type Props = Omit<ComponentProps<typeof InputFile>, 'accept'> & {
   square?: boolean
+  value?: string | null
 }
 
-const { class: className, square, ...inputFileProps } = Astro.props
+const { class: className, square, value, ...inputFileProps } = Astro.props
 ---
 
 <div class={cn('flex flex-wrap items-center justify-center gap-4', className)} data-preview-image>
-  <InputFile accept={ACCEPTED_IMAGE_TYPES.join(',')} class="min-w-0 flex-1 basis-2xs" {...inputFileProps} />
+  <InputFile
+    accept={ACCEPTED_IMAGE_TYPES.join(',')}
+    class="min-w-0 flex-1 basis-[calc(var(--spacing)*32)]"
+    {...inputFileProps}
+  />
   <img
-    src="#"
+    src={value}
     alt="Preview"
     class={cn(
-      'block w-26.5 rounded object-cover',
-      'no-js:hidden not-[[src]]:hidden [&[src=""]]:hidden [&[src="#"]]:hidden',
-      square && 'aspect-square'
+      'block h-24 rounded object-cover',
+      square && 'aspect-square',
+      'no-js:hidden not-[[src]]:hidden [&[src=""]]:hidden',
+      '[&:is(:has([data-remove-checkbox]:checked)_~_*)]:hidden'
     )}
   />
 </div>

web/src/components/InputWrapper.astro

@@ -66,7 +66,7 @@ const hasError = !!error && error.length > 0
 
   {
     !!description && (
-      <div class="prose prose-sm prose-invert text-day-400 text-xs text-pretty">
+      <div class="prose prose-sm prose-invert prose-a:text-current prose-a:font-normal hover:prose-a:text-day-300 prose-a:transition-colors text-day-400 text-xs text-pretty">
         <Markdown content={description} />
       </div>
     )