docs: add PicoFieldErrors

src/components/list/ListField.mock.tsx

@@ -1,7 +1,8 @@
 import { ReactNode } from "react";
 
-import { FieldErrors, FieldLabel } from "..";
+import { FieldLabel } from "..";
 import { ListAtomItems, ListAtomValue } from "../../atoms/list-atom";
+import { PicoFieldErrors } from "../../scenarios/PicoFieldErrors";
 
 import { List, ListProps } from ".";
 
@@ -16,9 +17,7 @@ export const ListField = <Fields extends ListAtomItems>({
     <>
       <FieldLabel field={field} label={label} />
       <List field={field} {...listProps} />
-      <div style={{ marginBottom: 16, color: "var(--del-color)" }}>
-        <FieldErrors field={field} />
-      </div>
+      <PicoFieldErrors field={field} />
     </>
   );
 };

src/scenarios/PicoFieldErrors.tsx

@@ -0,0 +1,17 @@
+import { FieldErrors, FieldErrorsProps } from "../components";
+
+const style = { color: "var(--del-color)" };
+
+export const PicoFieldErrors = (props: Omit<FieldErrorsProps, "children">) => (
+  <FieldErrors {...props}>
+    {({ errors }) => (
+      <>
+        {errors.map((error, index) => (
+          <p key={index} style={style}>
+            {error}
+          </p>
+        ))}
+      </>
+    )}
+  </FieldErrors>
+);