Remove positive input and add frowardRef

src/components/input/Input.stories.mdx

@@ -44,9 +44,6 @@ export const Template = ({ value: baseValue, ...args }) => {
   <Story name="Error" args={{ placeholder: "Error Field", error: true, size: INPUT_SIZE.small }}>
     {Template.bind({})}
   </Story>
-  <Story name="Positive" args={{ placeholder: "Positive Field", positive: true, size: INPUT_SIZE.small }}>
-    {Template.bind({})}
-  </Story>
   <Story name="Password" args={{ placeholder: "Password Field", type: "password", size: INPUT_SIZE.small }}>
     {Template.bind({})}
   </Story>

src/components/input/Input.tsx

@@ -1,13 +1,13 @@
-import React from "react";
-import { Input as BaseInput, InputProps as BaseInputProps, SIZE } from "baseui/input";
+import { forwardRef } from "react";
+import { Input as BaseInput, InputProps as BaseInputProps, Input as InputType, SIZE } from "baseui/input";
 import { getInputOverrides } from "./overrides";
 import { INPUT_SIZE } from "./types";
 import { Spinner, SPINNER_SIZE } from "../spinner";
 import { useStyletron } from "baseui";
 import { spinnerStyles } from "./styles";
 import { getMergedOverrides } from "../../shared/utils/getMergedOverrides";
 
-export type InputProps = BaseInputProps & {
+export type InputProps = Omit<BaseInputProps, "size" | "positive"> & {
   size?: INPUT_SIZE;
   isLoading?: boolean;
 };
@@ -16,30 +16,28 @@ const spinnerSize = {
   [INPUT_SIZE.small]: SPINNER_SIZE.small,
   [INPUT_SIZE.medium]: SPINNER_SIZE.medium,
   [INPUT_SIZE.large]: SPINNER_SIZE.large,
-};
+} as const;
 
-const Input: React.FC<InputProps> = ({
-  isLoading,
-  endEnhancer,
-  size = INPUT_SIZE.medium,
-  overrides: baseOverrides,
-  ...props
-}) => {
-  const [css] = useStyletron();
-
-  const inputOverrides = getInputOverrides(size);
-  const overrides = getMergedOverrides(inputOverrides, baseOverrides);
-
-  const EndEnhancer =
-    endEnhancer || isLoading ? (
-      <>
-        {endEnhancer}
-        {isLoading && <Spinner animation className={css(spinnerStyles)} size={spinnerSize[size]} />}
-      </>
-    ) : null;
-
-  return <BaseInput {...props} overrides={overrides} endEnhancer={EndEnhancer} />;
-};
+const Input = forwardRef<InputType, InputProps>(
+  ({ isLoading, endEnhancer, size = INPUT_SIZE.medium, overrides: baseOverrides, ...props }, ref) => {
+    const [css] = useStyletron();
+
+    const inputOverrides = getInputOverrides(size);
+    const overrides = getMergedOverrides(inputOverrides, baseOverrides);
+
+    const EndEnhancer =
+      endEnhancer || isLoading ? (
+        <>
+          {endEnhancer}
+          {isLoading && <Spinner animation className={css(spinnerStyles)} size={spinnerSize[size]} />}
+        </>
+      ) : null;
+
+    return <BaseInput ref={ref} {...props} overrides={overrides} endEnhancer={EndEnhancer} />;
+  }
+);
+
+Input.displayName = "Input";
 
 export { SIZE };
 export default Input;

src/components/input/overrides.tsx

@@ -4,29 +4,23 @@ import { INPUT_SIZE } from "./types";
 import { PRIMITIVE_COLORS } from "../../shared";
 import { expandProperty } from "inline-style-expand-shorthand";
 
-const getInputColor = (isError: boolean, isPositive: boolean, isFocused: boolean): string => {
+const getInputColor = (isError: boolean, isFocused: boolean): string => {
   if (isFocused) {
     return PRIMITIVE_COLORS.white;
   }
   if (isError) {
     return PRIMITIVE_COLORS.red400;
   }
-  if (isPositive) {
-    return PRIMITIVE_COLORS.white;
-  }
   return PRIMITIVE_COLORS.gray500;
 };
 
-const getIconColor = (isError: boolean, isPositive: boolean, isFocused: boolean): string => {
+const getIconColor = (isError: boolean, isFocused: boolean): string => {
   if (isFocused) {
     return PRIMITIVE_COLORS.gray500;
   }
   if (isError) {
     return PRIMITIVE_COLORS.red400;
   }
-  if (isPositive) {
-    return PRIMITIVE_COLORS.green400;
-  }
   return PRIMITIVE_COLORS.gray500;
 };
 
@@ -44,26 +38,26 @@ export const getInputOverrides = (size: INPUT_SIZE): InputOverrides => {
       }),
     },
     Input: {
-      style: ({ $error, $positive, $isFocused }) => ({
+      style: ({ $error, $isFocused }) => ({
         ...inputModifiedStyles[size],
-        color: getInputColor($error, $positive, $isFocused),
+        color: getInputColor($error, $isFocused),
         "-webkit-text-fill-color": "unset",
 
         "::placeholder": {
-          color: getInputColor($error, $positive, $isFocused),
+          color: getInputColor($error, $isFocused),
         },
       }),
     },
     StartEnhancer: {
-      style: ({ $error, $positive, $isFocused }) => ({
-        color: getIconColor($error, $positive, $isFocused),
+      style: ({ $error, $isFocused }) => ({
+        color: getIconColor($error, $isFocused),
         ...expandProperty("padding", "0 12px 0 0"),
       }),
     },
     EndEnhancer: {
-      style: ({ $error, $positive, $isFocused }) => ({
+      style: ({ $error, $isFocused }) => ({
         ...expandProperty("padding", "0 0 0 12px"),
-        color: getIconColor($error, $positive, $isFocused),
+        color: getIconColor($error, $isFocused),
       }),
     },
     ClearIcon: {

src/components/input/styles.ts

@@ -23,13 +23,13 @@ export const inputContainerModifiedStyles = {
 
 export const inputModifiedStyles = {
   [INPUT_SIZE.small]: {
-    fontSize: "14px",
-    lineHeight: "20px",
+    fontSize: "12px",
+    lineHeight: "16px",
     ...expandProperty("padding", "8px 0"),
   },
   [INPUT_SIZE.medium]: {
     fontSize: "16px",
-    lineHeight: "24px",
+    lineHeight: "22px",
     ...expandProperty("padding", "12px 0"),
   },
   [INPUT_SIZE.large]: {