From 3068c2fab8cb020e7fec424597e032da6ee8df13 Mon Sep 17 00:00:00 2001
From: Justus Onuoha <valzey87@gmail.com>
Date: Fri, 17 Jun 2022 14:06:51 +0100
Subject: [PATCH] chore: Extend input component

---
 src/__tests__/components/input.test.tsx |  4 +-
 src/components/Input/Input.tsx          | 63 +++++++++++++------------
 src/theme/Apeswap/index.ts              |  3 --
 3 files changed, 35 insertions(+), 35 deletions(-)

diff --git a/src/__tests__/components/input.test.tsx b/src/__tests__/components/input.test.tsx
index bd9c13ab..2cfaefb3 100644
--- a/src/__tests__/components/input.test.tsx
+++ b/src/__tests__/components/input.test.tsx
@@ -9,10 +9,10 @@ it("renders correctly", () => {
   expect(asFragment()).toMatchInlineSnapshot(`
     <DocumentFragment>
       <div
-        class="css-1u137ur"
+        class="css-1hhsago"
       >
         <input
-          class="css-1spk4n4"
+          class="css-vn1042"
           type="text"
           value="input"
         />
diff --git a/src/components/Input/Input.tsx b/src/components/Input/Input.tsx
index ae3d687d..bd87fcab 100644
--- a/src/components/Input/Input.tsx
+++ b/src/components/Input/Input.tsx
@@ -3,39 +3,42 @@ import { Input as ThemeUIInput, Box } from "theme-ui";
 import { InputProps, sizes, iconSizes } from "./types";
 import { Svg } from "../Svg";
 
-const Input: React.FC<InputProps> = ({ size = sizes.MD, icon, width, sx, ...props }) => {
-  return (
-    <Box
-      sx={{
-        position: "relative",
-        width: "fit-content",
-      }}
-    >
-      <ThemeUIInput
-        {...props}
+const Input = React.forwardRef<HTMLInputElement, InputProps>(
+  ({ size = sizes.MD, icon, width = "200px", ...props }, ref) => {
+    return (
+      <Box
         sx={{
-          width,
-          pl: "15px",
-          pr: icon ? "40px" : "15px",
-          variant: `forms.input.${size}`,
-          color: "text",
-          outline: "none",
+          position: "relative",
+          display: "inline-block",
         }}
-      />
-      {icon && (
-        <Box
+      >
+        <ThemeUIInput
+          {...props}
+          ref={ref}
           sx={{
-            position: "absolute",
-            top: "50%",
-            transform: "translateY(-50%)",
-            right: "15px",
+            pl: "15px",
+            pr: icon ? "40px" : "15px",
+            variant: `forms.input.${size}`,
+            color: "text",
+            outline: "none",
+            width,
           }}
-        >
-          <Svg icon={icon} width={iconSizes[size]} />
-        </Box>
-      )}
-    </Box>
-  );
-};
+        />
+        {icon && (
+          <Box
+            sx={{
+              position: "absolute",
+              top: "50%",
+              transform: "translateY(-50%)",
+              right: "15px",
+            }}
+          >
+            <Svg icon={icon} width={iconSizes[size]} />
+          </Box>
+        )}
+      </Box>
+    );
+  }
+);
 
 export default Input;
diff --git a/src/theme/Apeswap/index.ts b/src/theme/Apeswap/index.ts
index fc961245..daadd338 100644
--- a/src/theme/Apeswap/index.ts
+++ b/src/theme/Apeswap/index.ts
@@ -92,19 +92,16 @@ const Apeswap: Theme = {
         background: "white3",
         borderRadius: 10,
         height: "32px",
-        width: "200px",
       },
       md: {
         background: "white3",
         borderRadius: 10,
         height: "36px",
-        width: "200px",
       },
       lg: {
         background: "white3",
         borderRadius: 14,
         height: "48px",
-        width: "200px",
       },
     },
     textarea: {