@hero-design/rn 8.25.0 → 8.25.1

package/.turbo/turbo-build.log

@@ -1,9 +1,9 @@
-@hero-design/rn:build: cache hit, replaying output b28cdc306082cd71
-@hero-design/rn:build: $ yarn build:js && yarn build:types
-@hero-design/rn:build: $ rollup -c
-@hero-design/rn:build: 
-@hero-design/rn:build: src/index.ts → lib/index.js, es/index.js...
-@hero-design/rn:build: (!) Plugin replace: @rollup/plugin-replace: 'preventAssignment' currently defaults to false. It is recommended to set this option to `true`, as the next major version will default this option to `true`.
-@hero-design/rn:build: (!) Plugin node-resolve: preferring built-in module 'events' over local alternative at '/root/hero-design/node_modules/events/events.js', pass 'preferBuiltins: false' to disable this behavior or 'preferBuiltins: true' to disable this warning
-@hero-design/rn:build: created lib/index.js, es/index.js in 27.2s
-@hero-design/rn:build: $ tsc --noEmit false --emitDeclarationOnly --project tsconfig.prod.json
+@hero-design/rn:build: cache hit, replaying output 8b413e97d24bd32c
+@hero-design/rn:build: $ yarn build:js && yarn build:types
+@hero-design/rn:build: $ rollup -c
+@hero-design/rn:build: 
+@hero-design/rn:build: src/index.ts → lib/index.js, es/index.js...
+@hero-design/rn:build: (!) Plugin replace: @rollup/plugin-replace: 'preventAssignment' currently defaults to false. It is recommended to set this option to `true`, as the next major version will default this option to `true`.
+@hero-design/rn:build: (!) Plugin node-resolve: preferring built-in module 'events' over local alternative at '/root/hero-design/node_modules/events/events.js', pass 'preferBuiltins: false' to disable this behavior or 'preferBuiltins: true' to disable this warning
+@hero-design/rn:build: created lib/index.js, es/index.js in 37.5s
+@hero-design/rn:build: $ tsc --noEmit false --emitDeclarationOnly --project tsconfig.prod.json

package/es/index.js

@@ -1,5 +1,5 @@
 import * as reactNative from 'react-native';
-import { Platform, Dimensions, StyleSheet as StyleSheet$1, Animated, View, Easing, TouchableOpacity, Text as Text$1, Image as Image$1, TouchableWithoutFeedback, Pressable, SafeAreaView, KeyboardAvoidingView, TouchableHighlight, ScrollView, Modal, FlatList, useWindowDimensions, TextInput as TextInput$1, PanResponder, InteractionManager, Keyboard, SectionList, LayoutAnimation, RefreshControl as RefreshControl$1 } from 'react-native';
+import { Platform, Dimensions, StyleSheet as StyleSheet$1, Animated, View, UIManager, LayoutAnimation, TouchableOpacity, Text as Text$1, Easing, Image as Image$1, TouchableWithoutFeedback, Pressable, SafeAreaView, KeyboardAvoidingView, TouchableHighlight, ScrollView, Modal, FlatList, useWindowDimensions, TextInput as TextInput$1, PanResponder, InteractionManager, Keyboard, SectionList, RefreshControl as RefreshControl$1 } from 'react-native';
 import React, { useContext, createContext, createElement, useMemo, forwardRef, useEffect, useCallback, useRef, useState, isValidElement, useLayoutEffect, useImperativeHandle } from 'react';
 import { createIconSet } from 'react-native-vector-icons';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
@@ -1071,7 +1071,9 @@ var palette$b = {
   yellow: yellow$1.base,
   yellowDark15: yellow$1.darken15,
   yellowDark75: yellow$1.darken75,
+  yellowLight45: yellow$1.lighten45,
   yellowLight60: yellow$1.lighten60,
+  yellowLight75: yellow$1.lighten75,
   yellowLight90: yellow$1.lighten90
 };
 var mauve$4 = colorScales.mauve,
@@ -2929,7 +2931,7 @@ var getTextInputTheme = function getTextInputTheme(theme) {
   var space = {
     containerPadding: theme.space.medium,
     labelLeft: theme.space.medium,
-    labelTop: theme.lineHeights.small / -2,
+    labelTop: theme.lineHeights.small / -4,
     labelPaddingBottom: theme.space.small,
     labelHorizontalPadding: theme.space.xsmall,
     inputHorizontalMargin: theme.space.small,
@@ -2948,7 +2950,8 @@ var getTextInputTheme = function getTextInputTheme(theme) {
     labelInsideTextInput: theme.fontSizes.large,
     error: theme.fontSizes.small,
     maxLength: theme.fontSizes.small,
-    asteriskLabel: theme.fontSizes.large
+    asteriskLabel: theme.fontSizes.large,
+    topLabel: theme.fontSizes.small
   };
   var borderWidths = {
     container: {
@@ -2964,6 +2967,9 @@ var getTextInputTheme = function getTextInputTheme(theme) {
     textareaHeight: theme.sizes['15xlarge'],
     textInputMaxHeight: theme.sizes['15xlarge']
   };
+  var lineHeights = {
+    topLabel: theme.lineHeights.large / 2
+  };
   return {
     colors: colors,
     space: space,
@@ -2971,7 +2977,8 @@ var getTextInputTheme = function getTextInputTheme(theme) {
     fontSizes: fontSizes,
     borderWidths: borderWidths,
     radii: radii,
-    sizes: sizes
+    sizes: sizes,
+    lineHeights: lineHeights
   };
 };
 
@@ -6027,26 +6034,6 @@ var index$a = components.reduce(function (acc, comp) {
   });
 }, styled);
 
-var StyledWrapper$c = index$a(Animated.View)({
-  margin: 0,
-  padding: 0,
-  overflow: 'hidden'
-});
-/**
- * Height need to be high enough to cover most scenario
- * This container's purpose is only to help get correct children height and returns it
- * to use with Animated.timing
- */
-var StyledHiddenWrapper = index$a(View)(function () {
-  return {
-    height: Dimensions.get('window').height
-  };
-});
-var StyledChildWrapper = index$a(View)({
-  margin: 0,
-  padding: 0
-});
-
 // Get previous state value
 var usePrevious = function usePrevious(value) {
   var ref = React.useRef();
@@ -6072,13 +6059,37 @@ var useDeprecation = function useDeprecation(message) {
   }, [message, cond]);
 };
 
+var StyledWrapper$c = index$a(Animated.View)({
+  margin: 0,
+  padding: 0,
+  overflow: 'hidden'
+});
+/**
+ * Height need to be high enough to cover most scenario
+ * This container's purpose is only to help get correct children height and returns it
+ * to use with Animated.timing
+ */
+var StyledHiddenWrapper = index$a(View)(function () {
+  return {
+    height: Dimensions.get('window').height
+  };
+});
+var StyledChildWrapper = index$a(View)({
+  margin: 0,
+  padding: 0
+});
+
+if (Platform.OS === 'android') {
+  if (UIManager.setLayoutAnimationEnabledExperimental) {
+    UIManager.setLayoutAnimationEnabledExperimental(true);
+  }
+}
 var Collapse = function Collapse(_ref) {
   var _ref$open = _ref.open,
     open = _ref$open === void 0 ? false : _ref$open,
     children = _ref.children,
     testID = _ref.testID,
     style = _ref.style;
-  var collapseAnim = React.useRef(new Animated.Value(0)).current;
   var _React$useState = React.useState(0),
     _React$useState2 = _slicedToArray(_React$useState, 2),
     contentHeight = _React$useState2[0],
@@ -6086,11 +6097,7 @@ var Collapse = function Collapse(_ref) {
   var previousOpenState = usePrevious(open);
   useEffect(function () {
     if (open !== previousOpenState && previousOpenState !== undefined || open) {
-      Animated.timing(collapseAnim, {
-        toValue: open ? contentHeight : 0,
-        easing: Easing.inOut(Easing.cubic),
-        useNativeDriver: false
-      }).start();
+      LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut);
     }
   }, [open, previousOpenState, contentHeight]);
   var fetchMaxHeight = useCallback(function (_ref2) {
@@ -6099,7 +6106,7 @@ var Collapse = function Collapse(_ref) {
   }, []);
   return /*#__PURE__*/React.createElement(StyledWrapper$c, {
     style: {
-      height: collapseAnim
+      height: open ? contentHeight : 0
     },
     testID: testID
   }, /*#__PURE__*/React.createElement(StyledHiddenWrapper, null, /*#__PURE__*/React.createElement(StyledChildWrapper, {
@@ -11663,14 +11670,18 @@ var StyledLabel = index$a(Typography.Text)(function (_ref3) {
   var theme = _ref3.theme,
     themeState = _ref3.themeState;
   return {
-    color: theme.__hd__.textInput.colors.labels[themeState]
+    color: theme.__hd__.textInput.colors.labels[themeState],
+    fontSize: theme.__hd__.textInput.fontSizes.topLabel,
+    lineHeight: theme.__hd__.textInput.lineHeights.topLabel
   };
 });
 var StyledAsteriskLabel = index$a(Typography.Text)(function (_ref4) {
   var theme = _ref4.theme,
     themeState = _ref4.themeState;
   return {
-    color: theme.__hd__.textInput.colors.asterisks[themeState]
+    color: theme.__hd__.textInput.colors.asterisks[themeState],
+    fontSize: theme.__hd__.textInput.fontSizes.topLabel,
+    lineHeight: theme.__hd__.textInput.lineHeights.topLabel
   };
 });
 var StyledLabelContainerInsideTextInput = index$a(View)(function (_ref5) {
@@ -11978,12 +11989,10 @@ var TextInput = /*#__PURE__*/forwardRef(function (_ref2, ref) {
       backgroundColor: backgroundColor
     }
   }, required && /*#__PURE__*/React.createElement(StyledAsteriskLabel, {
-    themeState: state,
-    fontSize: "small"
+    themeState: state
   }, "*"), !!label && /*#__PURE__*/React.createElement(StyledLabel, {
     nativeID: accessibilityLabelledBy,
     testID: "input-label",
-    fontSize: "small",
     themeState: state,
     style: {
       backgroundColor: backgroundColor

package/lib/index.js

@@ -1101,7 +1101,9 @@ var palette$b = {
   yellow: yellow$1.base,
   yellowDark15: yellow$1.darken15,
   yellowDark75: yellow$1.darken75,
+  yellowLight45: yellow$1.lighten45,
   yellowLight60: yellow$1.lighten60,
+  yellowLight75: yellow$1.lighten75,
   yellowLight90: yellow$1.lighten90
 };
 var mauve$4 = colorScales.mauve,
@@ -2959,7 +2961,7 @@ var getTextInputTheme = function getTextInputTheme(theme) {
   var space = {
     containerPadding: theme.space.medium,
     labelLeft: theme.space.medium,
-    labelTop: theme.lineHeights.small / -2,
+    labelTop: theme.lineHeights.small / -4,
     labelPaddingBottom: theme.space.small,
     labelHorizontalPadding: theme.space.xsmall,
     inputHorizontalMargin: theme.space.small,
@@ -2978,7 +2980,8 @@ var getTextInputTheme = function getTextInputTheme(theme) {
     labelInsideTextInput: theme.fontSizes.large,
     error: theme.fontSizes.small,
     maxLength: theme.fontSizes.small,
-    asteriskLabel: theme.fontSizes.large
+    asteriskLabel: theme.fontSizes.large,
+    topLabel: theme.fontSizes.small
   };
   var borderWidths = {
     container: {
@@ -2994,6 +2997,9 @@ var getTextInputTheme = function getTextInputTheme(theme) {
     textareaHeight: theme.sizes['15xlarge'],
     textInputMaxHeight: theme.sizes['15xlarge']
   };
+  var lineHeights = {
+    topLabel: theme.lineHeights.large / 2
+  };
   return {
     colors: colors,
     space: space,
@@ -3001,7 +3007,8 @@ var getTextInputTheme = function getTextInputTheme(theme) {
     fontSizes: fontSizes,
     borderWidths: borderWidths,
     radii: radii,
-    sizes: sizes
+    sizes: sizes,
+    lineHeights: lineHeights
   };
 };
 
@@ -6057,26 +6064,6 @@ var index$a = components.reduce(function (acc, comp) {
   });
 }, styled);
 
-var StyledWrapper$c = index$a(reactNative.Animated.View)({
-  margin: 0,
-  padding: 0,
-  overflow: 'hidden'
-});
-/**
- * Height need to be high enough to cover most scenario
- * This container's purpose is only to help get correct children height and returns it
- * to use with Animated.timing
- */
-var StyledHiddenWrapper = index$a(reactNative.View)(function () {
-  return {
-    height: reactNative.Dimensions.get('window').height
-  };
-});
-var StyledChildWrapper = index$a(reactNative.View)({
-  margin: 0,
-  padding: 0
-});
-
 // Get previous state value
 var usePrevious = function usePrevious(value) {
   var ref = React__default["default"].useRef();
@@ -6102,13 +6089,37 @@ var useDeprecation = function useDeprecation(message) {
   }, [message, cond]);
 };
 
+var StyledWrapper$c = index$a(reactNative.Animated.View)({
+  margin: 0,
+  padding: 0,
+  overflow: 'hidden'
+});
+/**
+ * Height need to be high enough to cover most scenario
+ * This container's purpose is only to help get correct children height and returns it
+ * to use with Animated.timing
+ */
+var StyledHiddenWrapper = index$a(reactNative.View)(function () {
+  return {
+    height: reactNative.Dimensions.get('window').height
+  };
+});
+var StyledChildWrapper = index$a(reactNative.View)({
+  margin: 0,
+  padding: 0
+});
+
+if (reactNative.Platform.OS === 'android') {
+  if (reactNative.UIManager.setLayoutAnimationEnabledExperimental) {
+    reactNative.UIManager.setLayoutAnimationEnabledExperimental(true);
+  }
+}
 var Collapse = function Collapse(_ref) {
   var _ref$open = _ref.open,
     open = _ref$open === void 0 ? false : _ref$open,
     children = _ref.children,
     testID = _ref.testID,
     style = _ref.style;
-  var collapseAnim = React__default["default"].useRef(new reactNative.Animated.Value(0)).current;
   var _React$useState = React__default["default"].useState(0),
     _React$useState2 = _slicedToArray(_React$useState, 2),
     contentHeight = _React$useState2[0],
@@ -6116,11 +6127,7 @@ var Collapse = function Collapse(_ref) {
   var previousOpenState = usePrevious(open);
   React.useEffect(function () {
     if (open !== previousOpenState && previousOpenState !== undefined || open) {
-      reactNative.Animated.timing(collapseAnim, {
-        toValue: open ? contentHeight : 0,
-        easing: reactNative.Easing.inOut(reactNative.Easing.cubic),
-        useNativeDriver: false
-      }).start();
+      reactNative.LayoutAnimation.configureNext(reactNative.LayoutAnimation.Presets.easeInEaseOut);
     }
   }, [open, previousOpenState, contentHeight]);
   var fetchMaxHeight = React.useCallback(function (_ref2) {
@@ -6129,7 +6136,7 @@ var Collapse = function Collapse(_ref) {
   }, []);
   return /*#__PURE__*/React__default["default"].createElement(StyledWrapper$c, {
     style: {
-      height: collapseAnim
+      height: open ? contentHeight : 0
     },
     testID: testID
   }, /*#__PURE__*/React__default["default"].createElement(StyledHiddenWrapper, null, /*#__PURE__*/React__default["default"].createElement(StyledChildWrapper, {
@@ -11693,14 +11700,18 @@ var StyledLabel = index$a(Typography.Text)(function (_ref3) {
   var theme = _ref3.theme,
     themeState = _ref3.themeState;
   return {
-    color: theme.__hd__.textInput.colors.labels[themeState]
+    color: theme.__hd__.textInput.colors.labels[themeState],
+    fontSize: theme.__hd__.textInput.fontSizes.topLabel,
+    lineHeight: theme.__hd__.textInput.lineHeights.topLabel
   };
 });
 var StyledAsteriskLabel = index$a(Typography.Text)(function (_ref4) {
   var theme = _ref4.theme,
     themeState = _ref4.themeState;
   return {
-    color: theme.__hd__.textInput.colors.asterisks[themeState]
+    color: theme.__hd__.textInput.colors.asterisks[themeState],
+    fontSize: theme.__hd__.textInput.fontSizes.topLabel,
+    lineHeight: theme.__hd__.textInput.lineHeights.topLabel
   };
 });
 var StyledLabelContainerInsideTextInput = index$a(reactNative.View)(function (_ref5) {
@@ -12008,12 +12019,10 @@ var TextInput = /*#__PURE__*/React.forwardRef(function (_ref2, ref) {
       backgroundColor: backgroundColor
     }
   }, required && /*#__PURE__*/React__default["default"].createElement(StyledAsteriskLabel, {
-    themeState: state,
-    fontSize: "small"
+    themeState: state
   }, "*"), !!label && /*#__PURE__*/React__default["default"].createElement(StyledLabel, {
     nativeID: accessibilityLabelledBy,
     testID: "input-label",
-    fontSize: "small",
     themeState: state,
     style: {
       backgroundColor: backgroundColor

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hero-design/rn",
-  "version": "8.25.0",
+  "version": "8.25.1",
   "license": "MIT",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -21,7 +21,7 @@
   "dependencies": {
     "@emotion/native": "^11.9.3",
     "@emotion/react": "^11.9.3",
-    "@hero-design/colors": "8.25.0",
+    "@hero-design/colors": "8.25.1",
     "date-fns": "^2.16.1",
     "events": "^3.2.0",
     "hero-editor": "^1.9.21"
@@ -45,7 +45,7 @@
     "@babel/preset-typescript": "^7.17.12",
     "@babel/runtime": "^7.18.9",
     "@emotion/jest": "^11.9.3",
-    "@hero-design/eslint-plugin": "8.25.0",
+    "@hero-design/eslint-plugin": "8.25.1",
     "@react-native-community/datetimepicker": "^3.5.2",
     "@react-native-community/slider": "4.1.12",
     "@rollup/plugin-babel": "^5.3.1",
@@ -61,9 +61,9 @@
     "@types/react-native": "^0.67.7",
     "@types/react-native-vector-icons": "^6.4.10",
     "babel-plugin-inline-import": "^3.0.0",
-    "eslint-config-hd": "8.25.0",
+    "eslint-config-hd": "8.25.1",
     "jest": "^27.3.1",
-    "prettier-config-hd": "8.25.0",
+    "prettier-config-hd": "8.25.1",
     "react": "18.0.0",
     "react-native": "0.69.7",
     "react-native-gesture-handler": "~2.1.0",

package/src/components/Collapse/index.tsx

@@ -1,13 +1,13 @@
-import { Animated, Easing } from 'react-native';
+import type { ReactNode } from 'react';
 import React, { useCallback, useEffect } from 'react';
 import type { StyleProp, ViewProps, ViewStyle } from 'react-native';
-import type { ReactNode } from 'react';
+import { LayoutAnimation, Platform, UIManager } from 'react-native';
+import { usePrevious } from '../../utils/hooks';
 import {
   StyledChildWrapper,
   StyledHiddenWrapper,
   StyledWrapper,
 } from './StyledCollapse';
-import { usePrevious } from '../../utils/hooks';
 
 export interface CollapseProps extends ViewProps {
   /*
@@ -28,8 +28,13 @@ export interface CollapseProps extends ViewProps {
   testID?: string;
 }
 
+if (Platform.OS === 'android') {
+  if (UIManager.setLayoutAnimationEnabledExperimental) {
+    UIManager.setLayoutAnimationEnabledExperimental(true);
+  }
+}
+
 const Collapse = ({ open = false, children, testID, style }: CollapseProps) => {
-  const collapseAnim = React.useRef(new Animated.Value(0)).current;
   const [contentHeight, setContentHeight] = React.useState<number>(0);
 
   const previousOpenState = usePrevious(open);
@@ -39,11 +44,7 @@ const Collapse = ({ open = false, children, testID, style }: CollapseProps) => {
       (open !== previousOpenState && previousOpenState !== undefined) ||
       open
     ) {
-      Animated.timing(collapseAnim, {
-        toValue: open ? contentHeight : 0,
-        easing: Easing.inOut(Easing.cubic),
-        useNativeDriver: false,
-      }).start();
+      LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut);
     }
   }, [open, previousOpenState, contentHeight]);
 
@@ -54,7 +55,7 @@ const Collapse = ({ open = false, children, testID, style }: CollapseProps) => {
   return (
     <StyledWrapper
       style={{
-        height: collapseAnim,
+        height: open ? contentHeight : 0,
       }}
       testID={testID}
     >

package/src/components/DatePicker/__tests__/__snapshots__/DatePicker.spec.tsx.snap

@@ -88,7 +88,7 @@ exports[`DatePicker renders DatePickerAndroid when OS is android 1`] = `
                 "left": 16,
                 "paddingHorizontal": 4,
                 "position": "absolute",
-                "top": -10,
+                "top": -5,
                 "zIndex": 1,
               },
               Object {
@@ -105,13 +105,15 @@ exports[`DatePicker renders DatePickerAndroid when OS is android 1`] = `
                 Object {
                   "color": "#001f23",
                   "fontFamily": "BeVietnamPro-Regular",
-                  "fontSize": 12,
-                  "letterSpacing": 0.36,
-                  "lineHeight": 20,
+                  "fontSize": 14,
+                  "letterSpacing": 0.42,
+                  "lineHeight": 22,
                 },
                 Array [
                   Object {
                     "color": "#001f23",
+                    "fontSize": 12,
+                    "lineHeight": 12,
                   },
                   Object {
                     "backgroundColor": "#ffffff",
@@ -120,7 +122,7 @@ exports[`DatePicker renders DatePickerAndroid when OS is android 1`] = `
               ]
             }
             testID="input-label"
-            themeFontSize="small"
+            themeFontSize="medium"
             themeFontWeight="regular"
             themeIntent="body"
             themeState="filled"
@@ -311,7 +313,7 @@ exports[`DatePicker renders DatePickerIOS when OS is iOS 1`] = `
                 "left": 16,
                 "paddingHorizontal": 4,
                 "position": "absolute",
-                "top": -10,
+                "top": -5,
                 "zIndex": 1,
               },
               Object {
@@ -328,13 +330,15 @@ exports[`DatePicker renders DatePickerIOS when OS is iOS 1`] = `
                 Object {
                   "color": "#001f23",
                   "fontFamily": "BeVietnamPro-Regular",
-                  "fontSize": 12,
-                  "letterSpacing": 0.36,
-                  "lineHeight": 20,
+                  "fontSize": 14,
+                  "letterSpacing": 0.42,
+                  "lineHeight": 22,
                 },
                 Array [
                   Object {
                     "color": "#001f23",
+                    "fontSize": 12,
+                    "lineHeight": 12,
                   },
                   Object {
                     "backgroundColor": "#ffffff",
@@ -343,7 +347,7 @@ exports[`DatePicker renders DatePickerIOS when OS is iOS 1`] = `
               ]
             }
             testID="input-label"
-            themeFontSize="small"
+            themeFontSize="medium"
             themeFontWeight="regular"
             themeIntent="body"
             themeState="filled"
@@ -540,7 +544,7 @@ exports[`DatePicker renders variant Calendar 1`] = `
                 "left": 16,
                 "paddingHorizontal": 4,
                 "position": "absolute",
-                "top": -10,
+                "top": -5,
                 "zIndex": 1,
               },
               Object {
@@ -557,13 +561,15 @@ exports[`DatePicker renders variant Calendar 1`] = `
                 Object {
                   "color": "#001f23",
                   "fontFamily": "BeVietnamPro-Regular",
-                  "fontSize": 12,
-                  "letterSpacing": 0.36,
-                  "lineHeight": 20,
+                  "fontSize": 14,
+                  "letterSpacing": 0.42,
+                  "lineHeight": 22,
                 },
                 Array [
                   Object {
                     "color": "#001f23",
+                    "fontSize": 12,
+                    "lineHeight": 12,
                   },
                   Object {
                     "backgroundColor": "#ffffff",
@@ -572,7 +578,7 @@ exports[`DatePicker renders variant Calendar 1`] = `
               ]
             }
             testID="input-label"
-            themeFontSize="small"
+            themeFontSize="medium"
             themeFontWeight="regular"
             themeIntent="body"
             themeState="filled"

package/src/components/DatePicker/__tests__/__snapshots__/DatePickerAndroid.spec.tsx.snap

@@ -88,7 +88,7 @@ exports[`DatePickerAndroid renders correctly 1`] = `
                 "left": 16,
                 "paddingHorizontal": 4,
                 "position": "absolute",
-                "top": -10,
+                "top": -5,
                 "zIndex": 1,
               },
               Object {
@@ -105,13 +105,15 @@ exports[`DatePickerAndroid renders correctly 1`] = `
                 Object {
                   "color": "#001f23",
                   "fontFamily": "BeVietnamPro-Regular",
-                  "fontSize": 12,
-                  "letterSpacing": 0.36,
-                  "lineHeight": 20,
+                  "fontSize": 14,
+                  "letterSpacing": 0.42,
+                  "lineHeight": 22,
                 },
                 Array [
                   Object {
                     "color": "#001f23",
+                    "fontSize": 12,
+                    "lineHeight": 12,
                   },
                   Object {
                     "backgroundColor": "#ffffff",
@@ -120,7 +122,7 @@ exports[`DatePickerAndroid renders correctly 1`] = `
               ]
             }
             testID="input-label"
-            themeFontSize="small"
+            themeFontSize="medium"
             themeFontWeight="regular"
             themeIntent="body"
             themeState="filled"

package/src/components/DatePicker/__tests__/__snapshots__/DatePickerCalendar.spec.tsx.snap

@@ -88,7 +88,7 @@ exports[`DatePickerCalendar renders correctly 1`] = `
                 "left": 16,
                 "paddingHorizontal": 4,
                 "position": "absolute",
-                "top": -10,
+                "top": -5,
                 "zIndex": 1,
               },
               Object {
@@ -105,13 +105,15 @@ exports[`DatePickerCalendar renders correctly 1`] = `
                 Object {
                   "color": "#001f23",
                   "fontFamily": "BeVietnamPro-Regular",
-                  "fontSize": 12,
-                  "letterSpacing": 0.36,
-                  "lineHeight": 20,
+                  "fontSize": 14,
+                  "letterSpacing": 0.42,
+                  "lineHeight": 22,
                 },
                 Array [
                   Object {
                     "color": "#001f23",
+                    "fontSize": 12,
+                    "lineHeight": 12,
                   },
                   Object {
                     "backgroundColor": "#ffffff",
@@ -120,7 +122,7 @@ exports[`DatePickerCalendar renders correctly 1`] = `
               ]
             }
             testID="input-label"
-            themeFontSize="small"
+            themeFontSize="medium"
             themeFontWeight="regular"
             themeIntent="body"
             themeState="filled"

package/src/components/DatePicker/__tests__/__snapshots__/DatePickerIOS.spec.tsx.snap

@@ -88,7 +88,7 @@ exports[`DatePickerIOS renders correctly 1`] = `
                 "left": 16,
                 "paddingHorizontal": 4,
                 "position": "absolute",
-                "top": -10,
+                "top": -5,
                 "zIndex": 1,
               },
               Object {
@@ -105,13 +105,15 @@ exports[`DatePickerIOS renders correctly 1`] = `
                 Object {
                   "color": "#001f23",
                   "fontFamily": "BeVietnamPro-Regular",
-                  "fontSize": 12,
-                  "letterSpacing": 0.36,
-                  "lineHeight": 20,
+                  "fontSize": 14,
+                  "letterSpacing": 0.42,
+                  "lineHeight": 22,
                 },
                 Array [
                   Object {
                     "color": "#001f23",
+                    "fontSize": 12,
+                    "lineHeight": 12,
                   },
                   Object {
                     "backgroundColor": "#ffffff",
@@ -120,7 +122,7 @@ exports[`DatePickerIOS renders correctly 1`] = `
               ]
             }
             testID="input-label"
-            themeFontSize="small"
+            themeFontSize="medium"
             themeFontWeight="regular"
             themeIntent="body"
             themeState="filled"