@butternutbox/pawprint-native 0.13.0 → 0.13.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@butternutbox/pawprint-native",
-  "version": "0.13.0",
+  "version": "0.13.1",
   "type": "module",
   "description": "ButternutBox Pawprint Design System - React Native Components",
   "main": "./dist/index.cjs",

package/src/components/atoms/TextArea/TextAreaField.tsx

@@ -13,6 +13,7 @@ import {
   Error as ErrorIcon,
   CheckCircle as SuccessIcon
 } from "@butternutbox/pawprint-icons/core"
+import { resolveFont } from "../../../fonts"
 import { Icon } from "../Icon"
 import type { InputState } from "../Input/InputField"
 
@@ -50,13 +51,26 @@ const StyledTextAreaWrapper = styled(Animated.View)<{
 })
 
 const StyledTextArea = styled(TextInput)(({ theme }) => {
-  const { colour } = theme.tokens.components.inputs
+  const { colour, field } = theme.tokens.components.inputs
+  const typography = field.placeholder.default
+  const { fontFamily } = resolveFont(
+    typography.fontFamily,
+    typography.fontWeight
+  )
+  const fontSize = parseTokenValue(typography.fontSize)
+  const letterSpacing = typography.letterSpacing?.endsWith("%")
+    ? (parseFloat(typography.letterSpacing) / 100) * fontSize
+    : parseFloat(typography.letterSpacing ?? "0")
+
   return {
     flex: 1,
     minWidth: 0,
     minHeight: 0,
     padding: 0,
     color: colour.field.text.default,
+    fontFamily,
+    fontSize,
+    letterSpacing,
     textAlignVertical: "top",
     // Suppress the browser default focus outline on React Native Web —
     // the focus indicator is rendered on the wrapper instead.