refactor: move input and label to design system

correct variables according to design system spec

various cleanup

packages/design-system/lib/components/Input/Input.tsx

@@ -0,0 +1,46 @@
+import { cx } from 'class-variance-authority'
+import {
+  type ForwardedRef,
+  forwardRef,
+  useId,
+  useImperativeHandle,
+  useRef,
+} from 'react'
+import { Input as AriaInput, Label as AriaLabel } from 'react-aria-components'
+
+import { Label } from '../Label'
+
+import styles from './input.module.css'
+
+import type { InputProps } from './types'
+import { Typography } from '../Typography'
+
+export const Input = forwardRef(function AriaInputWithLabelComponent(
+  { label, ...props }: InputProps,
+  forwardedRef: ForwardedRef<HTMLInputElement>
+) {
+  const ref = useRef<HTMLInputElement>(null)
+
+  // Unique id is required for multiple inputs of same name appearing multiple times
+  // on same page. This will inherited by parent label element.
+  // Shouldn't really be needed if we don't set id though.
+  const uniqueId = useId()
+  const inputId = `${uniqueId}-${props.name}`
+
+  useImperativeHandle(forwardedRef, () => ref.current as HTMLInputElement)
+
+  return (
+    <AriaLabel className={styles.container}>
+      <Typography variant="Body/Paragraph/mdRegular">
+        <AriaInput
+          {...props}
+          placeholder={props.placeholder}
+          className={cx(styles.input, props.className)}
+          ref={ref}
+          id={inputId}
+        />
+      </Typography>
+      <Label required={props.required}>{label}</Label>
+    </AriaLabel>
+  )
+})