docs: fix file upload

README.md

@@ -21,32 +21,11 @@ npm install jotai jotai-effect form-atoms @form-atoms/field zod
 - [x] **Well-typed fields** required & validated by default
 - [x] **Initialized field values**, commonly with `undefined` empty value
 - [x] **Optional fields** with schema defaulting to `z.optional()`
-- [x] **Conditionally required fields** - the required state can depend on other jotai atoms.
+- [x] **Conditionally required fields** - the required state can depend on other jotai atoms
+- [x] **Generic Single-choice Components** [RadioGroup](https://form-atoms.github.io/field/?path=/docs/components-radiogroup--docs) and [Select](https://form-atoms.github.io/field/?path=/docs/components-select--docs)
+- [x] **Generic Multi-choice Components** [CheckboxGroup](https://form-atoms.github.io/field/?path=/docs/components-checkboxgroup--docs) and [MultiSelect](https://form-atoms.github.io/field/?path=/docs/components-multiselect--docs)
 
-The fields are integrated with the following components:
-
-#### Atomic Components
-
-When implementing forms, there are subtle details which you must likely implement yourself. For example you might need to implement a placeholder for a select,
-a clickable label which focuses the respective input, or a custom indicator whether the input is required or optional.
-
-We take care of these details in atomic 'low-level' components like `PlaceholderOption`, `FieldLabel` and `RequirementIndicator` respectively.
-
-#### Generic Components
-
-With other form libraries you might find yourself repeatedly wiring them into recurring scenarios like checkbox multi select or radio group.
-We've created highly reusable generic components which integrate the native components.
-For example to select a value of generic type you can use the generic [RadioGroup](https://form-atoms.github.io/field/?path=/docs/components-radiogroup--docs) or [Select](https://form-atoms.github.io/field/?path=/docs/components-select--docs).
-
-To select multiple values (array of values) you can use the generic [CheckboxGroup](https://form-atoms.github.io/field/?path=/docs/components-checkboxgroup--docs) or [MultiSelect](https://form-atoms.github.io/field/?path=/docs/components-multiselect--docs)
-
-Lastly to capture a list of objects, you will find the [ListField](https://form-atoms.github.io/field/?path=/docs/components-listfield--docs) handy.
-
-## Docs
-
-See [Storybook docs](https://form-atoms.github.io/field/)
-
-### Quick start
+### Quick Start
 
 ```tsx
 import { textField, numberField, stringField, Select } from "@form-atoms/field";
@@ -78,6 +57,8 @@ export const Form = () => {
 };
 ```
 
+See [Storybook docs](https://form-atoms.github.io/field/) for more.
+
 ## Integrations
 
 `@form-atoms/field` comes pre-wired to popular UI libraries:

src/components/file-upload/FileUploadList.stories.tsx

@@ -1,3 +1,4 @@
+import { List, type RemoveButtonProps } from "@form-atoms/list-atom";
 import { FieldAtom, fieldAtom, useFieldValue } from "form-atoms";
 
 import { FileUpload } from "./FileUpload";
@@ -6,7 +7,6 @@ import { uploadAtom } from "../../atoms";
 import { StringField, listField, stringField } from "../../fields";
 import { PicoFieldErrors } from "../../scenarios/PicoFieldErrors";
 import { formStory, meta } from "../../scenarios/StoryForm";
-import { List, RemoveButtonProps } from "../list";
 
 export default {
   ...meta,
@@ -39,7 +39,7 @@ const fileList = listField({
       url: "https://picsum.photos/id/2/100/100",
     },
   ],
-  builder: ({ url, id }) => ({
+  fields: ({ url, id }) => ({
     // the ID must be optional, to permit submit newly uploaded files to the server
     id: stringField({ value: id }).optional(),
     // the URL is only a fieldAtom, not zodField, as the uploadAtom extends only the fieldAtom
@@ -82,7 +82,7 @@ export const FileUploadList = formStory({
     },
     children: ({ fields }) => (
       <List
-        field={fields.fileList}
+        atom={fields.fileList}
         AddButton={({ add }) => (
           <input
             type="file"