@butternutbox/pawprint-native 0.8.0 → 0.10.0

package/src/components/molecules/SelectField/SelectFieldValue.tsx

@@ -1,29 +1,28 @@
 import React from "react"
-import { Text, TextProps } from "react-native"
-import styled from "@emotion/native"
+import { View, ViewProps } from "react-native"
+import { useTheme } from "@emotion/react"
 import * as SelectPrimitive from "@rn-primitives/select"
+import { Typography } from "../../atoms/Typography"
 
 type SelectFieldValueProps = {
   placeholder?: string
-} & Omit<TextProps, "children">
+} & Omit<ViewProps, "children">
 
-const StyledValue = styled(Text)(({ theme }) => {
-  const { colour } = theme.tokens.components.inputs
-
-  return {
-    flex: 1,
-    minWidth: 0,
-    textAlign: "left",
-    color: colour.field.text.default
-  }
-})
-
-export const SelectFieldValue = React.forwardRef<Text, SelectFieldValueProps>(
+export const SelectFieldValue = React.forwardRef<View, SelectFieldValueProps>(
   ({ placeholder, ...rest }, ref) => {
+    const theme = useTheme()
+    const { colour, field } = theme.tokens.components.inputs
+
     return (
-      <StyledValue ref={ref} {...rest}>
-        <SelectPrimitive.Value placeholder={placeholder ?? ""} />
-      </StyledValue>
+      <View ref={ref} style={{ flex: 1, minWidth: 0 }} {...rest}>
+        <Typography
+          token={field.placeholder.default}
+          color={colour.field.text.default}
+          align="left"
+        >
+          <SelectPrimitive.Value placeholder={placeholder ?? ""} />
+        </Typography>
+      </View>
     )
   }
 )