refactor: move input and label to design system

correct variables according to design system spec

various cleanup

packages/design-system/lib/components/Input/input.module.css

@@ -0,0 +1,60 @@
+.container {
+  align-content: center;
+  background-color: var(--Surface-Primary-Default);
+  border: 1px solid var(--Border-Interactive-Default);
+  border-radius: var(--Corner-radius-md);
+  display: grid;
+  min-width: 0; /* allow shrinkage */
+  height: 60px;
+  padding: var(--Space-x1) var(--Space-x2);
+  box-sizing: border-box;
+  cursor: text;
+
+  &:has(.input:focus) {
+    outline-offset: -2px;
+    outline: 2px solid var(--Border-Interactive-Focus);
+  }
+
+  &:has(.input:disabled) {
+    background-color: var(--Surface-Primary-Disabled);
+    border: transparent;
+    cursor: unset;
+  }
+
+  &:has(.input[data-invalid='true'], .input[aria-invalid='true']) {
+    border-color: var(--Border-Interactive-Error);
+
+    &:focus-within {
+      outline-offset: -2px;
+      outline: 2px solid var(--Border-Interactive-Error);
+    }
+  }
+}
+
+.input {
+  background: none;
+  border: none;
+  color: var(--Text-Default);
+  height: 1px;
+  order: 2;
+  padding: 0;
+  transition: height 150ms ease;
+
+  &:focus,
+  &:placeholder-shown,
+  &[value]:not([value='']) {
+    height: 18px;
+    outline: none;
+  }
+
+  &:disabled {
+    color: var(--Text-Interactive-Disabled);
+  }
+}
+
+@media (hover: hover) {
+  .input:active:not(:disabled) {
+    height: 18px;
+    outline: none;
+  }
+}