Refactor input to follow atomic design approach

[MSzalowski]

As part of the Governance action submission feature preparation - we should refactor Input component to follow atomic design methodology.

That would allow us to reuse the input component in the TextArea component required for Governance action submission form functionality.

ToDo:

1. In the atoms directory - create Input directory (that will keep implementation of Input and Test of the component)
2. Inside Input directory - leave just atom part of the component which is:

export const Input = ({
   ...props,
}) => {
    const id = useId();
    return (
        <InputBase
            inputProps={{ "data-testid": dataTestId }}
            onChange={onChange}
            disabled={disabled}
            id={id}
            placeholder={placeholder}
            type={type}
            sx={{
              border: 1,
              bgcolor: "white",
              padding: "8px 16px",
              backgroundColor: errorMessage ? "inputRed" : "transparent",
              borderColor: errorMessage ? "red" : "secondaryBlue",
              borderRadius: 50,
              width: "100%",
            }}
            {...rest}
        />
    )
}

2. As part of requirements:
   a) Update storie to handle newly created Input component.
   b) Write test to atom Input component using vitest - TO BE DONE AFTER [#81] configure unit tests with vitest #58
3. In the molecules directory put Input with label and error message:

export const Input = ({
   ...props,
}) => {
   return (
      <Box
          width={width}
          display="flex"
          flexDirection="column"
          sx={{ marginTop, marginBottom }}
        >
          {label && (
            <Typography
              variant="caption"
              sx={{ height: "20px", marginBottom: "5px", fontSize: "16px" }}
            >
              {label}
            </Typography>
          )}
          <Input {...props />
          <Box sx={{ height: "20px" }}>
            {errorMessage && (
              <Typography
                variant="caption"
                color="red"
                sx={{ height: "20px", marginTop: "2px" }}
                data-testid={`${errorMessage
                  .replace(/\s+/g, "-")
                  .toLowerCase()}-error`}
              >
                {errorMessage}
              </Typography>
            )}
          </Box>
        </Box>
     )
   }

4. In the organisms directory put Controller and into the render property Input molecule.

[pmbinapps]

No new issues with inputs detected.

Ready for stage.