feat(SW-1509): enable filtering select

packages/design-system/lib/components/Select/select.module.css

@@ -1,5 +1,8 @@
 .select {
   position: relative;
+  background-color: var(--Surface-UI-Fill-Default);
+  border: 1px solid var(--Border-Default);
+  border-radius: var(--Corner-radius-md);
   max-width: 300px;
 
   &[data-required] .label::after {
@@ -9,48 +12,81 @@
     rotate: -90deg;
   }
   &[data-focused] {
-    .button {
-      border: 1px solid var(--Border-Interactive-Focus);
+    border: 1px solid var(--Border-Interactive-Focus);
+
+    .button,
+    .input {
       outline: none;
     }
-    .selectValue {
+    .input {
+      position: unset;
+    }
+    .label {
       color: var(--Text-Interactive-Focus);
     }
   }
+  &[data-disabled] {
+    .inner {
+      background-color: var(--Surface-Primary-Disabled);
+      color: var(--Text-Interactive-Disabled);
+    }
+    .button,
+    .input,
+    .label,
+    .selectValue {
+      color: var(--Text-Interactive-Disabled);
+    }
+  }
 }
 
 .chevron {
   rotate: 90deg;
 }
 
-.button {
-  background-color: var(--Surface-UI-Fill-Default);
-  border: 1px solid var(--Border-Default);
-  border-radius: var(--Corner-radius-md);
-  padding: var(--Space-x1);
+.inner {
   display: flex;
   align-items: center;
   gap: var(--Space-x1);
   width: 100%;
   height: 56px;
+  padding: var(--Space-x1);
+  box-sizing: border-box;
 
-  &[disabled] {
-    color: var(--Text-Interactive-Disabled);
-    background-color: var(--Surface-Primary-Disabled);
+  .button {
+    padding: 0;
+  }
+}
 
-    .label,
-    .selectValue {
-      color: var(--Text-Interactive-Disabled);
-    }
+.button,
+.input {
+  background: none;
+  border: 0;
+}
+
+.input {
+  position: absolute;
+  padding: 0;
+
+  &.hasValue {
+    position: unset;
+  }
+}
+
+.displayText {
+  display: flex;
+  flex-direction: column;
+  gap: calc(var(--Space-x05) / 2);
+  flex: 1;
+  justify-content: center;
+  height: 100%;
+
+  &:has(.input) {
+    cursor: text;
   }
 }
 
 .selectValue {
-  display: flex;
-  flex-direction: column;
-  gap: calc(var(--Space-x05) / 2);
   align-items: flex-start;
-  flex: 1;
   color: var(--Text-Default);
 }