import React from "react";

export function Field({ className = "", children, ...props }) {
  return <div className={["o-field", className].filter(Boolean).join(" ")} data-slot="field" {...props}>{children}</div>;
}
export function FieldLabel({ className = "", children, ...props }) {
  return <label className={["o-label", className].filter(Boolean).join(" ")} data-slot="field-label" {...props}>{children}</label>;
}
export function FieldDescription({ className = "", children, ...props }) {
  return <p className={["o-field__description", className].filter(Boolean).join(" ")} data-slot="field-description" {...props}>{children}</p>;
}
export function FieldError({ className = "", children, ...props }) {
  return <p className={["o-field__error", className].filter(Boolean).join(" ")} data-slot="field-error" {...props}>{children}</p>;
}
