feat(SW-1509): simplified date of birth component to work with new select

added animated labels to new select

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

@@ -7,8 +7,14 @@
   &[data-required] .label::after {
     content: ' *';
   }
-  &[data-open] .chevron {
-    rotate: -90deg;
+  &[data-open] {
+    .chevron {
+      rotate: -90deg;
+    }
+
+    .selectedText {
+      min-height: 18px;
+    }
   }
   &[data-focused] {
     border-color: var(--Border-Interactive-Focus);
@@ -18,7 +24,7 @@
       outline: none;
     }
     .input {
-      position: unset;
+      min-height: 18px;
     }
     .label {
       color: var(--Text-Interactive-Focus);
@@ -66,14 +72,25 @@
 }
 
 .input {
-  position: absolute;
+  height: 0;
   padding: 0;
+  width: 100%;
 
   &[value]:not([value='']) {
-    position: unset;
+    min-height: 18px;
   }
 }
 
+.input,
+.selectedText {
+  min-height: 0;
+  transition: min-height 150ms ease;
+}
+
+.selectedText:not(:empty) {
+  min-height: 18px;
+}
+
 .displayText {
   display: flex;
   flex-direction: column;
@@ -81,6 +98,7 @@
   flex: 1;
   justify-content: center;
   height: 100%;
+  position: relative;
 
   &:has(.input) {
     cursor: text;
@@ -94,6 +112,8 @@
 
 .label {
   color: var(--Text-Interactive-Placeholder);
+  white-space: nowrap;
+  transition: font-size 150ms ease;
 }
 
 .popover {
@@ -107,6 +127,8 @@
   padding: var(--Space-x2);
   outline: none;
   min-width: 280px;
+  scrollbar-color: var(--Icon-Interactive-Disabled);
+  scrollbar-width: thin;
 }
 
 .listBox {