/**
* > This depends on `react`, `@oslojs/crypto`, and `@oslojs/encoding`.
*
* The Honeypot middleware allows you to add a honeypot mechanism to your routes, providing a simple yet effective way to protect public forms from spam bots.
*
* To use the Honeypot middleware, first import and configure it:
*
* ```ts
* import { createHoneypotMiddleware } from "remix-utils/middleware/honeypot";
*
* export const [honeypotMiddleware, getHoneypotInputProps] =
* createHoneypotMiddleware({
* // Randomize the honeypot field name
* randomizeNameFieldName: false,
* // Default honeypot field name
* nameFieldName: "name__confirm",
* // Optional timestamp field for validation
* validFromFieldName: "from__confirm",
* // Unique seed for encryption (recommended for extra security)
* encryptionSeed: undefined,
*
* onSpam(error) {
* // Handle SpamError here and return a Response
* return new Response("Spam detected", { status: 400 });
* },
* });
* ```
*
* Add the `honeypotMiddleware` to the `middleware` array in the route where you want to enable spam protection, use it in your `app/root.tsx` file to apply it globally:
*
* ```ts
* import { honeypotMiddleware } from "~/middleware/honeypot";
*
* export const middleware: Route.MiddlewareFunction[] = [honeypotMiddleware];
* ```
*
* Use the `getHoneypotInputProps` function in your root loader to retrieve the honeypot input properties:
*
* ```ts
* import { getHoneypotInputProps } from "~/middleware/honeypot";
*
* export async function loader({ request }: Route.LoaderArgs) {
* let honeypotInputProps = await getHoneypotInputProps();
* return json({ honeypotInputProps });
* }
* ```
*
* Wrap your application in the `HoneypotProvider` component to make the honeypot input properties available throughout your app:
*
* ```tsx
* import { HoneypotProvider } from "remix-utils/honeypot/react";
*
* export default function RootComponent() {
* return (
*