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.tsx

@@ -15,6 +15,7 @@ import { SelectFilter } from './SelectFilter'
 import type { SelectProps, SelectFilterProps } from './types'
 
 import styles from './select.module.css'
+import { useState } from 'react'
 
 export function Select({
   name,
@@ -25,6 +26,8 @@ export function Select({
   itemIcon,
   ...props
 }: SelectProps | SelectFilterProps) {
+  const [isOpen, setIsOpen] = useState(false)
+
   if ('enableFiltering' in props) {
     return (
       <SelectFilter
@@ -45,6 +48,7 @@ export function Select({
       name={name}
       aria-label={label}
       isDisabled={isDisabled}
+      onOpenChange={setIsOpen}
       {...props}
     >
       <Button className={cx(styles.inner, styles.button)}>
@@ -62,18 +66,16 @@ export function Select({
               <>
                 <Typography
                   variant={
-                    selectedText
+                    selectedText || isOpen
                       ? 'Label/xsRegular'
                       : 'Body/Paragraph/mdRegular'
                   }
                 >
                   <span className={styles.label}>{label}</span>
                 </Typography>
-                {selectedText ? (
-                  <Typography variant="Body/Paragraph/mdRegular">
-                    <span>{selectedText}</span>
-                  </Typography>
-                ) : null}
+                <Typography variant="Body/Paragraph/mdRegular">
+                  <span className={styles.selectedText}>{selectedText}</span>
+                </Typography>
               </>
             )
           }}