How to use the preact-emotion.textarea function in preact-emotion

export const Input = styled.input`
  appearance: none;
  border: 1px solid #777;
  height: 40px;
  width: 100%;
  padding: 0.8rem 1em;
  font: inherit;

  ~ input,
  ~ button,
  ~ textarea {
    margin-top: 1em;
  }
`;

export const Textarea = styled.textarea`
  appearance: none;
  font: inherit;

  resize: none;
  border: 1px solid #777;
  width: 100%;
  font-size: 1em;
  padding: 0.8rem 1em;
`;

export const Button = styled.button`
  appearance: none;
  border: 0;
  background: #333;
  color: #fff;
  padding: 0.8em 1em;

display: flex;
    flex-grow: 1;
    margin-left: -1.5rem;
    margin-right: -1.5rem;

    @media all and (min-width: 1024px) {
        margin-left: 0;
        margin-right: 0;
    }

    @media all and (max-width: 500px) {
        flex-direction: column;
    }
`;

const Textarea = styled.textarea`
    ${sharedCss};
    background: ${rgba(COLOR_ACCENT, .05)};
    border: 0;
    position: sticky;
    top: 0;
    font-family: 'Source Code Pro', Consolas, Monaco, monospace;
    font-size: inherit;
    max-height: 100vh;

    @media all and (max-width: 500px) {
        height: 300px;
        position: relative;
    }
`;

const Compiled = styled.div`