WIP

src/components/generic/form/Input.tsx

@@ -1,4 +1,5 @@
-import React from 'react';
+import type React from 'react';
+import { forwardRef } from 'react';
 
 import { InputWrapper } from '@components/generic/form/InputWrapper';
 import { Label } from '@components/generic/form/Label';
@@ -13,25 +14,26 @@ export interface InputProps extends DefaultInputProps {
   suffix?: string;
 }
 
-export const Input = React.forwardRef<HTMLInputElement, InputProps>(
-  function Input({ label, error, action, suffix, ...props }: InputProps, ref) {
-    return (
-      <div className="w-full">
-        {label && <Label label={label} error={error} />}
-        <InputWrapper error={error} disabled={props.disabled}>
-          <input
-            ref={ref}
-            className="h-10 w-full bg-transparent px-3 py-2 focus:outline-none disabled:cursor-not-allowed dark:text-white"
-            {...props}
-          />
-          {suffix && (
-            <span className="my-auto mr-3 text-sm font-medium text-gray-500 dark:text-gray-400">
-              {suffix}
-            </span>
-          )}
-          {action && <div className="mr-1 flex">{action}</div>}
-        </InputWrapper>
-      </div>
-    );
-  },
-);
+export const Input = forwardRef<HTMLInputElement, InputProps>(function Input(
+  { label, error, action, suffix, ...props }: InputProps,
+  ref,
+) {
+  return (
+    <div className="w-full">
+      {label && <Label label={label} error={error} />}
+      <InputWrapper error={error} disabled={props.disabled}>
+        <input
+          ref={ref}
+          className="h-10 w-full bg-transparent px-3 py-2 focus:outline-none disabled:cursor-not-allowed dark:text-white"
+          {...props}
+        />
+        {suffix && (
+          <span className="my-auto mr-3 text-sm font-medium text-gray-500 dark:text-gray-400">
+            {suffix}
+          </span>
+        )}
+        {action && <div className="mr-1 flex">{action}</div>}
+      </InputWrapper>
+    </div>
+  );
+});