@paragrav/rhf-utils 0.0.70 → 0.0.71

package/dist/esm/client/index.mjs

@@ -1,32 +1,32 @@
-import { jsx as d } from "react/jsx-runtime";
-import u from "../form/FormWithProviders.mjs";
-import F from "../form/useForm.mjs";
-const p = (t) => (r) => {
-  const e = l(
+import { jsx as h } from "react/jsx-runtime";
+import l from "../form/FormWithProviders.mjs";
+import d from "../form/useForm.mjs";
+const v = (t) => (r) => {
+  const e = a(
     t,
     r
   );
   return {
-    useForm: (o, s) => F(
+    useForm: (o, s) => d(
       e(o, s)
     ),
-    FormWithProviders: P(t, r)
+    FormWithProviders: u(t, r)
   };
-}, P = (t, r) => function({
+}, u = (t, r) => function({
   schema: o,
   children: s,
   ...m
 }) {
-  const i = l(t, r);
-  return /* @__PURE__ */ d(
-    u,
+  const i = a(t, r);
+  return /* @__PURE__ */ h(
+    l,
     {
       ...i(o, m),
       children: s
     }
   );
-}, l = (t, r) => (e, o) => {
-  var s, m, i, n, f, a, h;
+}, a = (t, r) => (e, o) => {
+  var s, m, i, n, f;
   return {
     ...o,
     config: r,
@@ -35,19 +35,17 @@ const p = (t) => (r) => {
       ...o.rhf,
       resolver: t(e)
     },
-    form: {
-      ...o.form,
-      options: {
-        ...(m = r.defaultOptions) == null ? void 0 : m.form,
-        ...(i = o.form) == null ? void 0 : i.options,
-        classNames: [
-          ...((f = (n = r.defaultOptions) == null ? void 0 : n.form) == null ? void 0 : f.classNames) ?? [],
-          ...((h = (a = o.form) == null ? void 0 : a.options) == null ? void 0 : h.classNames) ?? []
-        ]
-      }
+    form: o.form,
+    options: {
+      ...(m = r.defaultOptions) == null ? void 0 : m.form,
+      ...o.options,
+      classNames: [
+        ...((n = (i = r.defaultOptions) == null ? void 0 : i.form) == null ? void 0 : n.classNames) ?? [],
+        ...((f = o.options) == null ? void 0 : f.classNames) ?? []
+      ]
     }
   };
 };
 export {
-  p as createRhfUtilsClient
+  v as createRhfUtilsClient
 };

package/dist/esm/form/_Form.mjs

@@ -1,90 +1,83 @@
-import { jsxs as B, jsx as p } from "react/jsx-runtime";
+import { jsxs as B, jsx as b } from "react/jsx-runtime";
 import "react";
-import { useFormContext as N } from "react-hook-form";
-import P from "../devtool/LazyDevTool.mjs";
-import { FormSubmitError as T } from "../submit/error/FormSubmitError.mjs";
-import V from "../submit/error/setCtxErrorsByFormSubmitError.mjs";
-import _ from "../submit/useResetFormOnSubmitError.mjs";
-import O from "./_FormBase.mjs";
-function G({
-  formId: c,
-  formRef: l,
+import { useFormContext as j } from "react-hook-form";
+import v from "../devtool/LazyDevTool.mjs";
+import { FormSubmitError as N } from "../submit/error/FormSubmitError.mjs";
+import P from "../submit/error/setCtxErrorsByFormSubmitError.mjs";
+import T from "./_FormBase.mjs";
+function L({
+  formId: E,
+  formRef: r,
   form: t,
-  config: n,
-  children: o
+  options: a,
+  config: l,
+  children: F
 }) {
-  var b, S, h, E, F;
-  const a = N();
-  _({
-    disabled: !((b = t == null ? void 0 : t.options) != null && b.resetValuesOnSubmitError)
-  });
-  const y = async (s) => {
-    var e;
-    (e = t == null ? void 0 : t.options) != null && e.stopSubmitPropagation && s.stopPropagation();
+  var h;
+  const s = j(), c = async (e) => {
+    a != null && a.stopSubmitPropagation && e.stopPropagation();
     try {
-      await a.handleSubmit(
-        j,
+      await s.handleSubmit(
+        y,
         t == null ? void 0 : t.onSubmitInvalid
-      )(s);
-    } catch (i) {
-      v(i, s);
+      )(e);
+    } catch (u) {
+      n(u, e);
     }
-  }, j = (s, e) => {
-    var i;
-    return (i = t == null ? void 0 : t.onSubmit) == null ? void 0 : i.call(
+  }, y = (e, u) => {
+    var d;
+    return (d = t == null ? void 0 : t.onSubmit) == null ? void 0 : d.call(
       t,
+      e,
       s,
-      a,
-      e
+      u
     );
-  }, v = (s, e) => {
+  }, n = (e, u) => {
     var x, C;
-    const i = s instanceof T ? (
+    const d = e instanceof N ? (
       // consumer can manually throw FormSubmitError (e.g., manual validation)
-      s
+      e
     ) : (
       // if error is not FormSubmitError, consumer can provide global handler
-      (x = n == null ? void 0 : n.onSubmitError) == null ? void 0 : x.call(n, s)
+      (x = l == null ? void 0 : l.onSubmitError) == null ? void 0 : x.call(l, e)
     );
-    i && V(a, i), (C = t == null ? void 0 : t.onSubmitError) == null || C.call(
+    d && P(s, d), (C = t == null ? void 0 : t.onSubmitError) == null || C.call(
       t,
+      e,
       s,
-      a,
-      e
+      u
     );
-  }, u = {
-    formId: c,
-    formRef: l,
-    ctx: a,
-    options: t == null ? void 0 : t.options
-  }, d = (s) => {
-    var i;
-    const e = (i = n == null ? void 0 : n.Children) == null ? void 0 : i[s];
-    return e && /* @__PURE__ */ p(e, { ...u });
+  }, S = {
+    formId: E,
+    formRef: r,
+    ctx: s,
+    options: a
+  }, i = (e) => {
+    var d;
+    const u = (d = l == null ? void 0 : l.Children) == null ? void 0 : d[e];
+    return u && /* @__PURE__ */ b(u, { ...S });
   };
   return /* @__PURE__ */ B(
-    O,
+    T,
     {
       noValidate: !0,
       style: {
         position: "relative"
       },
       ...t == null ? void 0 : t.props,
-      className: [(S = t == null ? void 0 : t.options) == null ? void 0 : S.classNames, ((h = t == null ? void 0 : t.props) == null ? void 0 : h.className) ?? ""].join(
-        " "
-      ),
-      onSubmit: y,
-      formRef: l,
+      className: [a == null ? void 0 : a.classNames, (h = t == null ? void 0 : t.props) == null ? void 0 : h.className].filter(Boolean).join(" "),
+      onSubmit: c,
+      formRef: r,
       children: [
-        d("top"),
-        ((E = t == null ? void 0 : t.options) == null ? void 0 : E.devTool) !== "disabled" && /* @__PURE__ */ p(P, { placement: "top-right", ...(F = t == null ? void 0 : t.options) == null ? void 0 : F.devTool }),
-        (t == null ? void 0 : t.Fields) && /* @__PURE__ */ p(t.Fields, { ...u }),
-        o,
-        d("bottom")
+        i("top"),
+        (a == null ? void 0 : a.devTool) !== "disabled" && /* @__PURE__ */ b(v, { placement: "top-right", ...a == null ? void 0 : a.devTool }),
+        (t == null ? void 0 : t.Fields) && /* @__PURE__ */ b(t.Fields, { ...S }),
+        F,
+        i("bottom")
       ]
     }
   );
 }
 export {
-  G as default
+  L as default
 };

package/dist/esm/form/_FormProviders.mjs

@@ -1,15 +1,24 @@
 import { jsx as r } from "react/jsx-runtime";
-import { FormProvider as m } from "react-hook-form";
-import d from "../errors/flat/context/FlatFieldErrorsContextProvider.mjs";
-import n from "./context/utils/FormUtilsContextProvider.mjs";
-function f({
+import { FormProvider as d } from "react-hook-form";
+import n from "../errors/flat/context/FlatFieldErrorsContextProvider.mjs";
+import l from "./context/utils/FormUtilsContextProvider.mjs";
+function v({
+  formId: t,
   formRef: o,
-  rhfForm: t,
-  utils: i,
-  children: e
+  rhfForm: i,
+  options: e,
+  children: m
 }) {
-  return /* @__PURE__ */ r(m, { ...t, children: /* @__PURE__ */ r(d, { formRef: o, children: /* @__PURE__ */ r(n, { formRef: o, ...i, children: e }) }) });
+  return /* @__PURE__ */ r(d, { ...i, children: /* @__PURE__ */ r(n, { formRef: o, children: /* @__PURE__ */ r(
+    l,
+    {
+      formId: t,
+      formRef: o,
+      options: e,
+      children: m
+    }
+  ) }) });
 }
 export {
-  f as default
+  v as default
 };

package/dist/esm/form/context/utils/FormUtilsContextProvider.mjs

@@ -1,28 +1,42 @@
-import { jsx as p } from "react/jsx-runtime";
-import { isDevelopment as s } from "../../../env-conditions/production.mjs";
-import F from "../../../errors/orphan/useOrphanFormErrorsToConsole.mjs";
-import l from "../../../errors/useFormErrorConsoleDebug.mjs";
-import a from "../../../errors/useFormRequestSubmit.mjs";
-import u from "../../../submit/useFormOnSubmitSuccessfulAndReset.mjs";
-import C from "../../../submit/useResetFormOnSubmitSuccessful.mjs";
-import { _FormUtilsContextProvider as f } from "./useFormUtilsContext.mjs";
-function P({
-  // options
-  disableFormErrorConsoleDebug: n,
-  disableOrphanFormErrorsToConsole: m,
-  resetFormAfterSubmitSuccessful: t,
-  // props
-  formRef: o,
-  onSubmitSuccessfulAndReset: r,
-  children: e
+import { jsx as l } from "react/jsx-runtime";
+import { isDevelopment as t } from "../../../env-conditions/production.mjs";
+import b from "../../../errors/orphan/useOrphanFormErrorsToConsole.mjs";
+import C from "../../../errors/useFormErrorConsoleDebug.mjs";
+import O from "../../../errors/useFormRequestSubmit.mjs";
+import f from "../../../submit/useFormOnSubmitSuccessfulAndReset.mjs";
+import E from "../../../submit/useResetFormOnSubmitError.mjs";
+import d from "../../../submit/useResetFormOnSubmitSuccessful.mjs";
+import h from "../../../submit/useSubmitFormOnChange.mjs";
+import { _FormUtilsContextProvider as o } from "./useFormUtilsContext.mjs";
+function s({
+  formId: u,
+  formRef: m,
+  onSubmitSuccessfulAndReset: e,
+  options: r,
+  children: a
 }) {
-  const i = a(o);
-  return l(s), F(o, !m), C({
-    enabled: t || !!r
-  }), u(() => {
-    r == null || r();
-  }), /* @__PURE__ */ p(f, { value: { formRef: o, requestSubmit: i }, children: e });
+  const F = O(m);
+  return C(
+    t
+  ), b(
+    m,
+    !(r != null && r.disableOrphanFormErrorsToConsole)
+  ), h(m, {
+    disabled: !(r != null && r.submitOnChange)
+  }), E({
+    disabled: !(r != null && r.resetValuesOnSubmitError)
+  }), d(
+    (r == null ? void 0 : r.resetFormAfterSubmitSuccessful) || !!e
+  ), f(() => {
+    e == null || e();
+  }), /* @__PURE__ */ l(
+    o,
+    {
+      value: { formId: u, formRef: m, requestSubmit: F, options: r },
+      children: a
+    }
+  );
 }
 export {
-  P as default
+  s as default
 };

package/dist/esm/form/useForm.mjs

@@ -1,33 +1,30 @@
-import n from "react";
-import { useForm as i } from "react-hook-form";
-import c from "../submit/useSubmitFormOnChange.mjs";
-const P = ({
-  config: m,
-  rhf: p,
-  form: o,
-  utils: u
+import e from "react";
+import { useForm as p } from "react-hook-form";
+const a = ({
+  config: t,
+  rhf: m,
+  form: f,
+  options: n
 }) => {
-  var t;
-  const s = n.useId(), e = i(p), r = n.useRef(null);
-  return c(r, {
-    disabled: !((t = o == null ? void 0 : o.options) != null && t.submitOnChange)
-  }), {
-    id: s,
+  const o = e.useId(), s = p(m), r = e.useRef(null);
+  return {
+    id: o,
     ref: r,
-    context: e,
+    context: s,
     providerProps: {
+      formId: o,
       formRef: r,
-      rhfForm: e,
-      utils: u
+      rhfForm: s,
+      options: n
     },
     formProps: {
-      formId: s,
+      formId: o,
       formRef: r,
-      config: m,
-      form: o
+      config: t,
+      form: f
     }
   };
 };
 export {
-  P as default
+  a as default
 };

package/dist/esm/submit/useResetFormOnSubmitError.mjs

@@ -9,8 +9,8 @@ const c = (t) => {
     u,
     s,
     i,
-    r,
-    m
+    m,
+    r
   ]);
 }, a = c;
 export {

package/dist/esm/submit/useResetFormOnSubmitSuccessful.mjs

@@ -1,14 +1,20 @@
-import { useFormContext as u } from "react-hook-form";
-import o from "./useFormOnSubmitSuccessful.mjs";
-const r = ({
-  enabled: e,
-  ...t
-}) => {
-  const { reset: s } = u();
-  o(() => {
-    e && s(void 0, t);
+import { useFormContext as c } from "react-hook-form";
+import m from "./useFormOnSubmitSuccessful.mjs";
+const a = (e) => {
+  const { reset: u, getValues: t } = c();
+  m(() => {
+    if (!e)
+      return;
+    const s = e === !0 || e.values === void 0 ? void 0 : e.values.resetToCurrentValues ? t() : e.values, r = e === !0 ? (
+      // default
+      void 0
+    ) : (
+      // custom settings
+      e.state
+    );
+    u(s, r);
   });
-}, f = r;
+}, o = a;
 export {
-  f as default
+  o as default
 };

package/dist/types/client/config.d.ts

@@ -1,7 +1,6 @@
 import { FormSubmitError } from '../submit/error/FormSubmitError';
 import { UseFormOptions } from '../form/useFormOptions';
 import { UseFormFieldsProps } from '../form/useForm';
-import { FormUtilsOptions } from '../form/context/utils/FormUtilsContextProvider';
 import { _FormSlots } from '../form/_Form';
 import { UseFormProps } from 'react-hook-form';
 
@@ -22,7 +21,6 @@ export type ClientConfig = {
          * Extend this type to inject custom options/functionality via `Children` component.
          */
         form?: UseFormOptions;
-        utils?: FormUtilsOptions;
     };
     /**
      * Components injected by slot across all forms.

package/dist/types/form/_Form.d.ts

@@ -3,9 +3,9 @@ import { SafeFieldValues } from './SafeFieldValues';
 import { default as React } from 'react';
 
 export type _FormSlots = 'top' | 'bottom';
-export type _FormProps<TFieldValues extends SafeFieldValues, TTransformedValues extends SafeFieldValues> = React.PropsWithChildren<Pick<UseFormProps<TFieldValues, TTransformedValues>, 'form' | 'config'> & {
+export type _FormProps<TFieldValues extends SafeFieldValues, TTransformedValues extends SafeFieldValues> = React.PropsWithChildren<Pick<UseFormProps<TFieldValues, TTransformedValues>, 'form' | 'options' | 'config'> & {
     formId: string;
     formRef: React.RefObject<HTMLFormElement>;
 }>;
-declare function _Form<TFieldValues extends SafeFieldValues, TTransformedValues extends SafeFieldValues>({ formId, formRef, form, config, children, }: _FormProps<TFieldValues, TTransformedValues>): import("react/jsx-runtime").JSX.Element;
+declare function _Form<TFieldValues extends SafeFieldValues, TTransformedValues extends SafeFieldValues>({ formId, formRef, form, options, config, children, }: _FormProps<TFieldValues, TTransformedValues>): import("react/jsx-runtime").JSX.Element;
 export default _Form;

package/dist/types/form/_FormProviders.d.ts

@@ -1,11 +1,12 @@
+import { UseFormOptions } from './useFormOptions';
 import { SafeFieldValues } from './SafeFieldValues';
-import { FormUtilsOptions } from './context/utils/FormUtilsContextProvider';
 import { UseFormReturn } from 'react-hook-form';
 
 export type _FormProvidersProps<TFieldValues extends SafeFieldValues, TTransformedValues extends SafeFieldValues> = React.PropsWithChildren<{
+    formId: string;
     formRef: React.RefObject<HTMLFormElement>;
     rhfForm: UseFormReturn<TFieldValues, unknown, TTransformedValues>;
-    utils?: FormUtilsOptions;
+    options?: UseFormOptions;
 }>;
-declare function _FormProviders<TFieldValues extends SafeFieldValues, TTransformedValues extends SafeFieldValues>({ formRef, rhfForm, utils, children, }: _FormProvidersProps<TFieldValues, TTransformedValues>): import("react/jsx-runtime").JSX.Element;
+declare function _FormProviders<TFieldValues extends SafeFieldValues, TTransformedValues extends SafeFieldValues>({ formId, formRef, rhfForm, options, children, }: _FormProvidersProps<TFieldValues, TTransformedValues>): import("react/jsx-runtime").JSX.Element;
 export default _FormProviders;

package/dist/types/form/context/utils/FormUtilsContextProvider.d.ts

@@ -1,16 +1,11 @@
-/// <reference types="react" />
-export type FormUtilsOptions = {
-    /** Disable `console.debug` of field errors in dev. */
-    disableFormErrorConsoleDebug?: boolean;
-    /** Disable `console.error` of orphan field errors. */
-    disableOrphanFormErrorsToConsole?: boolean;
-    /** Reset form after successful submit. */
-    resetFormAfterSubmitSuccessful?: boolean;
-};
+import { UseFormOptions } from '../../useFormOptions';
+
 type Props = React.PropsWithChildren<{
+    formId: string;
     formRef: React.RefObject<HTMLFormElement>;
     /** Callback after successful submit, and form reset. */
     onSubmitSuccessfulAndReset?: () => void;
-} & FormUtilsOptions>;
-declare function FormUtilsContextProvider({ disableFormErrorConsoleDebug, disableOrphanFormErrorsToConsole, resetFormAfterSubmitSuccessful, formRef, onSubmitSuccessfulAndReset, children, }: Props): import("react/jsx-runtime").JSX.Element;
+    options?: UseFormOptions;
+}>;
+declare function FormUtilsContextProvider({ formId, formRef, onSubmitSuccessfulAndReset, options, children, }: Props): import("react/jsx-runtime").JSX.Element;
 export default FormUtilsContextProvider;

package/dist/types/form/context/utils/useFormUtilsContext.d.ts

@@ -1,6 +1,9 @@
-/// <reference types="react" />
+import { UseFormOptions } from '../../useFormOptions';
+
 export type FormUtilsContext = {
+    formId: string;
     formRef: React.RefObject<HTMLFormElement>;
+    options: UseFormOptions | undefined;
     /** Callback to trigger submit manually -- e.g., on change. */
     requestSubmit: HTMLFormElement['requestSubmit'];
 };

package/dist/types/form/useForm.d.ts

@@ -1,6 +1,5 @@
 import { UseFormOptions } from './useFormOptions';
 import { SafeFieldValues } from './SafeFieldValues';
-import { FormUtilsOptions } from './context/utils/FormUtilsContextProvider';
 import { _FormProvidersProps } from './_FormProviders';
 import { _FormProps } from './_Form';
 import { ClientConfig } from '../client/config';
@@ -25,10 +24,9 @@ export type UseFormProps<TFieldValues extends SafeFieldValues, TTransformedValue
         onSubmitError?: (error: unknown, context: RhfUseFormReturn<TFieldValues, unknown, TTransformedValues>, event: React.BaseSyntheticEvent<SubmitEvent>) => void;
         /** Submit handler when form is invalid. */
         onSubmitInvalid?: SubmitErrorHandler<TFieldValues>;
-        options?: UseFormOptions;
         props?: React.PropsWithoutRef<JSX.IntrinsicElements['form']>;
     };
-    utils?: FormUtilsOptions;
+    options?: UseFormOptions;
 };
 /**
  * Core Rhf Form hook. Use `Form` in `index.ts` for most cases.
@@ -39,7 +37,7 @@ export type UseFormProps<TFieldValues extends SafeFieldValues, TTransformedValue
  * see https://caniuse.com/?search=form%20attribute
  * @returns Form provider and form.
  */
-declare const useForm: <TFieldValues extends SafeFieldValues, TTransformedValues extends SafeFieldValues>({ config, rhf, form, utils, }: UseFormProps<TFieldValues, TTransformedValues>) => {
+declare const useForm: <TFieldValues extends SafeFieldValues, TTransformedValues extends SafeFieldValues>({ config, rhf, form, options, }: UseFormProps<TFieldValues, TTransformedValues>) => {
     readonly id: string;
     readonly ref: React.RefObject<HTMLFormElement>;
     readonly context: RhfUseFormReturn<TFieldValues, unknown, TTransformedValues>;

package/dist/types/form/useFormOptions.d.ts

@@ -1,7 +1,8 @@
+import { default as useResetFormAfterSubmitSuccessful } from '../submit/useResetFormOnSubmitSuccessful';
 import { DevtoolUIProps } from '@hookform/devtools/dist/devToolUI';
 
 export type UseFormOptions = {
-    /** Control visibility of certain items via your own classes and styles. */
+    /** Control visibility of certain items via your own classes and styles. (Defaults merged with individual class names.) */
     classNames?: string[];
     /** Request submit via listener on form change. */
     submitOnChange?: boolean;
@@ -9,6 +10,12 @@ export type UseFormOptions = {
     resetValuesOnSubmitError?: boolean;
     /** Stop propagation of submit event. Useful for portals. */
     stopSubmitPropagation?: boolean;
+    /** Disable `console.debug` of field errors in dev. */
+    disableFormErrorConsoleDebug?: boolean;
+    /** Disable `console.error` of orphan field errors. */
+    disableOrphanFormErrorsToConsole?: boolean;
+    /** Reset form after successful submit. */
+    resetFormAfterSubmitSuccessful?: Parameters<typeof useResetFormAfterSubmitSuccessful>[0];
     /** Control dev tool options. */
     devTool?: DevtoolUIProps | 'disabled';
 };

package/dist/types/submit/useResetFormOnSubmitSuccessful.d.ts

@@ -1,12 +1,16 @@
+import { SafeFieldValues } from '../form/SafeFieldValues';
 import { KeepStateOptions } from 'react-hook-form';
 
-type Options = {
-    enabled?: boolean;
-} & KeepStateOptions;
+type Options = false | undefined | true | {
+    values?: undefined | SafeFieldValues | {
+        resetToCurrentValues: true;
+    };
+    state?: KeepStateOptions;
+};
 /**
  * Handle resetting after successful submit with no server validation errors.
  * See `Rules` section: https://react-hook-form.com/api/useform/reset/
  * Specifically: "- It's recommended to reset inside useEffect after submission."
  */
-declare const useResetFormAfterSubmitSuccessful: ({ enabled, ...options }: Options) => void;
+declare const useResetFormAfterSubmitSuccessful: (options: Options) => void;
 export default useResetFormAfterSubmitSuccessful;

package/package.json

@@ -2,7 +2,7 @@
   "name": "@paragrav/rhf-utils",
   "author": "paragrav.dev",
   "license": "MIT",
-  "version": "0.0.70",
+  "version": "0.0.71",
   "description": "Integration utilities for react-hook-form.",
   "type": "module",
   "sideEffects": false,
@@ -21,15 +21,15 @@
       "default": "./dist/esm/exports.mjs",
       "types": "./dist/types/exports.d.ts"
     },
-    "./createZodRhfUtilsClient": {
+    "./client/zod/createZodRhfUtilsClient": {
       "default": "./dist/esm/client/zod/createZodRhfUtilsClient.mjs",
       "types": "./dist/types/client/zod/createZodRhfUtilsClient.d.ts"
     },
-    "./useRhfUtilsZodContext": {
+    "./client/zod/useRhfUtilsZodContext": {
       "default": "./dist/esm/client/zod/useRhfUtilsZodContext.mjs",
       "types": "./dist/types/client/zod/useRhfUtilsZodContext.d.ts"
     },
-    "./RhfUtilsZodContextProvider": {
+    "./client/zod/RhfUtilsZodContextProvider": {
       "default": "./dist/esm/client/zod/RhfUtilsZodContextProvider.mjs",
       "types": "./dist/types/client/zod/RhfUtilsZodContextProvider.d.ts"
     },
@@ -202,7 +202,8 @@
   },
   "devDependencies": {
     "@hookform/resolvers": "^3.3.4",
-    "@playwright/experimental-ct-react": "^1.42.1",
+    "@playwright/experimental-ct-react": "^1.43.1",
+    "@playwright/test": "^1.43.1",
     "@rollup/plugin-typescript": "^11.1.6",
     "@types/node": "^20.12.7",
     "@types/react": "^18.2.69",
@@ -213,6 +214,7 @@
     "cross-env": "^7.0.3",
     "eslint": "^8.57.0",
     "eslint-config-prettier": "^9.1.0",
+    "eslint-import-resolver-typescript": "^3.6.1",
     "eslint-plugin-import": "^2.29.1",
     "eslint-plugin-react": "^7.34.1",
     "eslint-plugin-react-hooks": "^4.6.0",