@hero-design/rn 8.27.2 → 8.29.0

package/.turbo/turbo-build.log

@@ -4,5 +4,5 @@ $ rollup -c
 src/index.ts → lib/index.js, es/index.js...
 (!) 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`.
 (!) 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
-created lib/index.js, es/index.js in 25.6s
+created lib/index.js, es/index.js in 29.8s
 $ tsc --noEmit false --emitDeclarationOnly --project tsconfig.prod.json

package/es/index.js

@@ -1608,8 +1608,8 @@ var getLineHeights = function getLineHeights(fontSizes) {
     xlarge: fontSizes.xlarge + additionalSpace,
     large: fontSizes.large + additionalSpace,
     medium: fontSizes.medium + additionalSpace,
-    small: fontSizes.small + additionalSpace,
-    xsmall: fontSizes.xsmall + additionalSpace
+    small: fontSizes.small + additionalSpace / 2,
+    xsmall: fontSizes.xsmall + additionalSpace / 2
   };
 };
 
@@ -2867,9 +2867,12 @@ var getTagTheme = function getTagTheme(theme) {
   var fontSizes = {
     "default": theme.fontSizes.small
   };
+  var lineHeights = {
+    "default": theme.lineHeights.small
+  };
   var space = {
     horizontalPadding: theme.space.small,
-    verticalPadding: theme.space.xxsmall
+    verticalPadding: theme.space.xsmall
   };
   var radii = {
     "default": theme.radii.base
@@ -2880,7 +2883,8 @@ var getTagTheme = function getTagTheme(theme) {
     fonts: fonts,
     fontSizes: fontSizes,
     space: space,
-    radii: radii
+    radii: radii,
+    lineHeights: lineHeights
   };
 };
 
@@ -6099,14 +6103,19 @@ var Collapse = function Collapse(_ref) {
     open = _ref$open === void 0 ? false : _ref$open,
     children = _ref.children,
     testID = _ref.testID,
-    style = _ref.style;
+    style = _ref.style,
+    onLayout = _ref.onLayout;
   var _React$useState = React.useState(0),
     _React$useState2 = _slicedToArray(_React$useState, 2),
     contentHeight = _React$useState2[0],
     setContentHeight = _React$useState2[1];
+  var _React$useState3 = React.useState(false),
+    _React$useState4 = _slicedToArray(_React$useState3, 2),
+    componentMounted = _React$useState4[0],
+    setComponentMounted = _React$useState4[1];
   var previousOpenState = usePrevious(open);
   useEffect(function () {
-    if (open !== previousOpenState && previousOpenState !== undefined || open) {
+    if ((open !== previousOpenState && previousOpenState !== undefined || open) && componentMounted) {
       LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut);
     }
   }, [open, previousOpenState, contentHeight]);
@@ -6114,10 +6123,15 @@ var Collapse = function Collapse(_ref) {
     var height = _ref2.height;
     setContentHeight(height);
   }, []);
+  var onCollapseLayout = useCallback(function (e) {
+    setComponentMounted(true);
+    onLayout === null || onLayout === void 0 ? void 0 : onLayout(e);
+  }, []);
   return /*#__PURE__*/React.createElement(StyledWrapper$c, {
     style: {
       height: open ? contentHeight : 0
     },
+    onLayout: onCollapseLayout,
     testID: testID
   }, /*#__PURE__*/React.createElement(StyledHiddenWrapper, null, /*#__PURE__*/React.createElement(StyledChildWrapper, {
     onLayout: function onLayout(event) {
@@ -12218,6 +12232,15 @@ var StyledPickerWrapper$1 = index$a(View)(function (_ref) {
   };
 });
 
+var getInitialDateValue = function getInitialDateValue(value, minDate, maxDate) {
+  if (minDate && value < minDate) {
+    return minDate;
+  }
+  if (maxDate && value > maxDate) {
+    return maxDate;
+  }
+  return value;
+};
 var DatePickerIOS = function DatePickerIOS(_ref) {
   var value = _ref.value,
     minDate = _ref.minDate,
@@ -12235,7 +12258,7 @@ var DatePickerIOS = function DatePickerIOS(_ref) {
     helpText = _ref.helpText,
     style = _ref.style,
     testID = _ref.testID;
-  var _useState = useState(value || new Date()),
+  var _useState = useState(getInitialDateValue(value || new Date(), minDate, maxDate)),
     _useState2 = _slicedToArray(_useState, 2),
     selectingDate = _useState2[0],
     setSelectingDate = _useState2[1];
@@ -15920,6 +15943,7 @@ var StyledText = index$a(Typography.Text)(function (_ref3) {
   return {
     fontFamily: theme.__hd__.tag.fonts["default"],
     fontSize: theme.__hd__.tag.fontSizes["default"],
+    lineHeight: theme.__hd__.tag.lineHeights["default"],
     color: textColor,
     includeFontPadding: false,
     textAlignVertical: 'center',

package/lib/index.js

@@ -1638,8 +1638,8 @@ var getLineHeights = function getLineHeights(fontSizes) {
     xlarge: fontSizes.xlarge + additionalSpace,
     large: fontSizes.large + additionalSpace,
     medium: fontSizes.medium + additionalSpace,
-    small: fontSizes.small + additionalSpace,
-    xsmall: fontSizes.xsmall + additionalSpace
+    small: fontSizes.small + additionalSpace / 2,
+    xsmall: fontSizes.xsmall + additionalSpace / 2
   };
 };
 
@@ -2897,9 +2897,12 @@ var getTagTheme = function getTagTheme(theme) {
   var fontSizes = {
     "default": theme.fontSizes.small
   };
+  var lineHeights = {
+    "default": theme.lineHeights.small
+  };
   var space = {
     horizontalPadding: theme.space.small,
-    verticalPadding: theme.space.xxsmall
+    verticalPadding: theme.space.xsmall
   };
   var radii = {
     "default": theme.radii.base
@@ -2910,7 +2913,8 @@ var getTagTheme = function getTagTheme(theme) {
     fonts: fonts,
     fontSizes: fontSizes,
     space: space,
-    radii: radii
+    radii: radii,
+    lineHeights: lineHeights
   };
 };
 
@@ -6129,14 +6133,19 @@ var Collapse = function Collapse(_ref) {
     open = _ref$open === void 0 ? false : _ref$open,
     children = _ref.children,
     testID = _ref.testID,
-    style = _ref.style;
+    style = _ref.style,
+    onLayout = _ref.onLayout;
   var _React$useState = React__default["default"].useState(0),
     _React$useState2 = _slicedToArray(_React$useState, 2),
     contentHeight = _React$useState2[0],
     setContentHeight = _React$useState2[1];
+  var _React$useState3 = React__default["default"].useState(false),
+    _React$useState4 = _slicedToArray(_React$useState3, 2),
+    componentMounted = _React$useState4[0],
+    setComponentMounted = _React$useState4[1];
   var previousOpenState = usePrevious(open);
   React.useEffect(function () {
-    if (open !== previousOpenState && previousOpenState !== undefined || open) {
+    if ((open !== previousOpenState && previousOpenState !== undefined || open) && componentMounted) {
       reactNative.LayoutAnimation.configureNext(reactNative.LayoutAnimation.Presets.easeInEaseOut);
     }
   }, [open, previousOpenState, contentHeight]);
@@ -6144,10 +6153,15 @@ var Collapse = function Collapse(_ref) {
     var height = _ref2.height;
     setContentHeight(height);
   }, []);
+  var onCollapseLayout = React.useCallback(function (e) {
+    setComponentMounted(true);
+    onLayout === null || onLayout === void 0 ? void 0 : onLayout(e);
+  }, []);
   return /*#__PURE__*/React__default["default"].createElement(StyledWrapper$c, {
     style: {
       height: open ? contentHeight : 0
     },
+    onLayout: onCollapseLayout,
     testID: testID
   }, /*#__PURE__*/React__default["default"].createElement(StyledHiddenWrapper, null, /*#__PURE__*/React__default["default"].createElement(StyledChildWrapper, {
     onLayout: function onLayout(event) {
@@ -12248,6 +12262,15 @@ var StyledPickerWrapper$1 = index$a(reactNative.View)(function (_ref) {
   };
 });
 
+var getInitialDateValue = function getInitialDateValue(value, minDate, maxDate) {
+  if (minDate && value < minDate) {
+    return minDate;
+  }
+  if (maxDate && value > maxDate) {
+    return maxDate;
+  }
+  return value;
+};
 var DatePickerIOS = function DatePickerIOS(_ref) {
   var value = _ref.value,
     minDate = _ref.minDate,
@@ -12265,7 +12288,7 @@ var DatePickerIOS = function DatePickerIOS(_ref) {
     helpText = _ref.helpText,
     style = _ref.style,
     testID = _ref.testID;
-  var _useState = React.useState(value || new Date()),
+  var _useState = React.useState(getInitialDateValue(value || new Date(), minDate, maxDate)),
     _useState2 = _slicedToArray(_useState, 2),
     selectingDate = _useState2[0],
     setSelectingDate = _useState2[1];
@@ -15950,6 +15973,7 @@ var StyledText = index$a(Typography.Text)(function (_ref3) {
   return {
     fontFamily: theme.__hd__.tag.fonts["default"],
     fontSize: theme.__hd__.tag.fontSizes["default"],
+    lineHeight: theme.__hd__.tag.lineHeights["default"],
     color: textColor,
     includeFontPadding: false,
     textAlignVertical: 'center',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hero-design/rn",
-  "version": "8.27.2",
+  "version": "8.29.0",
   "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.27.2",
+    "@hero-design/colors": "8.29.0",
     "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.27.2",
+    "@hero-design/eslint-plugin": "8.29.0",
     "@react-native-community/datetimepicker": "^3.5.2",
     "@react-native-community/slider": "4.1.12",
     "@rollup/plugin-babel": "^5.3.1",
@@ -61,10 +61,10 @@
     "@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.27.2",
+    "eslint-config-hd": "8.29.0",
     "eslint-plugin-import": "^2.27.5",
     "jest": "^27.3.1",
-    "prettier-config-hd": "8.27.2",
+    "prettier-config-hd": "8.29.0",
     "react": "18.0.0",
     "react-native": "0.69.7",
     "react-native-gesture-handler": "~2.1.0",

package/src/components/Accordion/__tests__/__snapshots__/AccordionItem.spec.tsx.snap

@@ -71,6 +71,7 @@ exports[`AccordionItem renders correctly when header is an element 1`] = `
   </View>
   <View
     collapsable={false}
+    onLayout={[Function]}
     style={
       Object {
         "height": 0,
@@ -205,6 +206,7 @@ exports[`AccordionItem renders correctly when header is string 1`] = `
   </View>
   <View
     collapsable={false}
+    onLayout={[Function]}
     style={
       Object {
         "height": 0,
@@ -339,6 +341,7 @@ exports[`AccordionItem renders correctly when open 1`] = `
   </View>
   <View
     collapsable={false}
+    onLayout={[Function]}
     style={
       Object {
         "height": 0,
@@ -473,6 +476,7 @@ exports[`AccordionItem renders correctly when variant is card 1`] = `
   </View>
   <View
     collapsable={false}
+    onLayout={[Function]}
     style={
       Object {
         "height": 0,

package/src/components/Accordion/__tests__/__snapshots__/index.spec.tsx.snap

@@ -79,6 +79,7 @@ exports[`Accordion allows fully controlled 1`] = `
     </View>
     <View
       collapsable={false}
+      onLayout={[Function]}
       style={
         Object {
           "height": 0,
@@ -210,6 +211,7 @@ exports[`Accordion allows fully controlled 1`] = `
     </View>
     <View
       collapsable={false}
+      onLayout={[Function]}
       style={
         Object {
           "height": 0,
@@ -353,6 +355,7 @@ exports[`Accordion renders correctly 1`] = `
     </View>
     <View
       collapsable={false}
+      onLayout={[Function]}
       style={
         Object {
           "height": 0,
@@ -484,6 +487,7 @@ exports[`Accordion renders correctly 1`] = `
     </View>
     <View
       collapsable={false}
+      onLayout={[Function]}
       style={
         Object {
           "height": 0,
@@ -627,6 +631,7 @@ exports[`Accordion renders correctly when variant is card 1`] = `
     </View>
     <View
       collapsable={false}
+      onLayout={[Function]}
       style={
         Object {
           "height": 0,
@@ -769,6 +774,7 @@ exports[`Accordion renders correctly when variant is card 1`] = `
     </View>
     <View
       collapsable={false}
+      onLayout={[Function]}
       style={
         Object {
           "height": 0,

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

@@ -40,7 +40,7 @@ exports[`Badge has danger style when intent is danger 1`] = `
             "fontFamily": "BeVietnamPro-SemiBold",
             "fontSize": 12,
             "includeFontPadding": false,
-            "lineHeight": 20,
+            "lineHeight": 16,
             "textAlign": "center",
             "textAlignVertical": "center",
           },
@@ -98,7 +98,7 @@ exports[`Badge has info style when intent is info 1`] = `
             "fontFamily": "BeVietnamPro-SemiBold",
             "fontSize": 12,
             "includeFontPadding": false,
-            "lineHeight": 20,
+            "lineHeight": 16,
             "textAlign": "center",
             "textAlignVertical": "center",
           },
@@ -156,7 +156,7 @@ exports[`Badge has info style when intent is primary 1`] = `
             "fontFamily": "BeVietnamPro-SemiBold",
             "fontSize": 12,
             "includeFontPadding": false,
-            "lineHeight": 20,
+            "lineHeight": 16,
             "textAlign": "center",
             "textAlignVertical": "center",
           },
@@ -214,7 +214,7 @@ exports[`Badge has success style when intent is success 1`] = `
             "fontFamily": "BeVietnamPro-SemiBold",
             "fontSize": 12,
             "includeFontPadding": false,
-            "lineHeight": 20,
+            "lineHeight": 16,
             "textAlign": "center",
             "textAlignVertical": "center",
           },
@@ -272,7 +272,7 @@ exports[`Badge has warning style when intent is warning 1`] = `
             "fontFamily": "BeVietnamPro-SemiBold",
             "fontSize": 12,
             "includeFontPadding": false,
-            "lineHeight": 20,
+            "lineHeight": 16,
             "textAlign": "center",
             "textAlignVertical": "center",
           },
@@ -331,7 +331,7 @@ exports[`Badge renders correctly with custom props 1`] = `
             "fontFamily": "BeVietnamPro-SemiBold",
             "fontSize": 12,
             "includeFontPadding": false,
-            "lineHeight": 20,
+            "lineHeight": 16,
             "textAlign": "center",
             "textAlignVertical": "center",
           },

package/src/components/BottomNavigation/__tests__/__snapshots__/index.spec.tsx.snap

@@ -143,7 +143,7 @@ exports[`BottomNavigation renders correctly 1`] = `
                   "fontFamily": "BeVietnamPro-SemiBold",
                   "fontSize": 12,
                   "letterSpacing": 0.36,
-                  "lineHeight": 20,
+                  "lineHeight": 16,
                 },
                 Array [
                   Object {
@@ -206,7 +206,7 @@ exports[`BottomNavigation renders correctly 1`] = `
                   "fontFamily": "BeVietnamPro-SemiBold",
                   "fontSize": 12,
                   "letterSpacing": 0.36,
-                  "lineHeight": 20,
+                  "lineHeight": 16,
                 },
                 Array [
                   Object {
@@ -269,7 +269,7 @@ exports[`BottomNavigation renders correctly 1`] = `
                   "fontFamily": "BeVietnamPro-SemiBold",
                   "fontSize": 12,
                   "letterSpacing": 0.36,
-                  "lineHeight": 20,
+                  "lineHeight": 16,
                 },
                 Array [
                   Object {
@@ -332,7 +332,7 @@ exports[`BottomNavigation renders correctly 1`] = `
                   "fontFamily": "BeVietnamPro-SemiBold",
                   "fontSize": 12,
                   "letterSpacing": 0.36,
-                  "lineHeight": 20,
+                  "lineHeight": 16,
                 },
                 Array [
                   Object {

package/src/components/Collapse/__tests__/__snapshots__/index.spec.tsx.snap

@@ -3,6 +3,7 @@
 exports[`Collapse renders correctly 1`] = `
 <View
   collapsable={false}
+  onLayout={[Function]}
   style={
     Object {
       "height": 0,
@@ -46,6 +47,7 @@ exports[`Collapse renders correctly 1`] = `
 exports[`Collapse should render Sample Text but not visible 1`] = `
 <View
   collapsable={false}
+  onLayout={[Function]}
   style={
     Object {
       "height": 0,

package/src/components/Collapse/index.tsx

@@ -1,6 +1,11 @@
 import type { ReactNode } from 'react';
 import React, { useCallback, useEffect } from 'react';
-import type { StyleProp, ViewProps, ViewStyle } from 'react-native';
+import type {
+  LayoutChangeEvent,
+  StyleProp,
+  ViewProps,
+  ViewStyle,
+} from 'react-native';
 import { LayoutAnimation, Platform, UIManager } from 'react-native';
 import { usePrevious } from '../../utils/hooks';
 import {
@@ -34,15 +39,24 @@ if (Platform.OS === 'android') {
   }
 }
 
-const Collapse = ({ open = false, children, testID, style }: CollapseProps) => {
+const Collapse = ({
+  open = false,
+  children,
+  testID,
+  style,
+  onLayout,
+}: CollapseProps) => {
   const [contentHeight, setContentHeight] = React.useState<number>(0);
+  const [componentMounted, setComponentMounted] =
+    React.useState<boolean>(false);
 
   const previousOpenState = usePrevious(open);
 
   useEffect(() => {
     if (
-      (open !== previousOpenState && previousOpenState !== undefined) ||
-      open
+      ((open !== previousOpenState && previousOpenState !== undefined) ||
+        open) &&
+      componentMounted
     ) {
       LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut);
     }
@@ -52,11 +66,18 @@ const Collapse = ({ open = false, children, testID, style }: CollapseProps) => {
     setContentHeight(height);
   }, []);
 
+  const onCollapseLayout = useCallback((e: LayoutChangeEvent) => {
+    setComponentMounted(true);
+
+    onLayout?.(e);
+  }, []);
+
   return (
     <StyledWrapper
       style={{
         height: open ? contentHeight : 0,
       }}
+      onLayout={onCollapseLayout}
       testID={testID}
     >
       <StyledHiddenWrapper>

package/src/components/DatePicker/DatePickerIOS.tsx

@@ -10,6 +10,22 @@ import { StyledPickerWrapper } from './StyledDatePicker';
 import type { DatePickerProps } from './types';
 import { useTheme } from '../../theme';
 
+export const getInitialDateValue = (
+  value: Date,
+  minDate?: Date | undefined,
+  maxDate?: Date | undefined
+) => {
+  if (minDate && value < minDate) {
+    return minDate;
+  }
+
+  if (maxDate && value > maxDate) {
+    return maxDate;
+  }
+
+  return value;
+};
+
 const DatePickerIOS = ({
   value,
   minDate,
@@ -26,7 +42,9 @@ const DatePickerIOS = ({
   style,
   testID,
 }: Omit<DatePickerProps, 'variant'>) => {
-  const [selectingDate, setSelectingDate] = useState<Date>(value || new Date());
+  const [selectingDate, setSelectingDate] = useState<Date>(
+    getInitialDateValue(value || new Date(), minDate, maxDate)
+  );
   const [open, setOpen] = useState(false);
 
   const displayValue = value ? formatDate(displayFormat, value) : '';

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

@@ -2,13 +2,37 @@ import { fireEvent } from '@testing-library/react-native';
 import React from 'react';
 import type { ModalProps } from 'react-native';
 import renderWithTheme from '../../../testHelpers/renderWithTheme';
-import DatePickerIOS from '../DatePickerIOS';
+import DatePickerIOS, { getInitialDateValue } from '../DatePickerIOS';
 
 jest.mock('react-native/Libraries/Modal/Modal', () => {
   const Modal = jest.requireActual('react-native/Libraries/Modal/Modal');
   return (props: ModalProps) => <Modal {...props} />;
 });
 
+describe('getInitialDateValue', () => {
+  describe('when value is less than minDate', () => {
+    it('should return minDate', () => {
+      const value = new Date('2022-01-01T00:00:00.000Z');
+      const minDate = new Date('2025-01-01T00:00:00.000Z');
+      expect(getInitialDateValue(value, minDate)).toBe(minDate);
+    });
+  });
+  describe('when value is greater than maxDate', () => {
+    it('should return maxDate', () => {
+      const value = new Date('2025-01-01T00:00:00.000Z');
+      const maxDate = new Date('2022-01-01T00:00:00.000Z');
+      expect(getInitialDateValue(value, undefined, maxDate)).toBe(maxDate);
+    });
+  });
+  describe('when minDate < value < maxDate', () => {
+    it('should return value', () => {
+      const minDate = new Date('2022-01-01T00:00:00.000Z');
+      const value = new Date('2023-01-01T00:00:00.000Z');
+      const maxDate = new Date('2025-01-01T00:00:00.000Z');
+      expect(getInitialDateValue(value, minDate, maxDate)).toBe(value);
+    });
+  });
+});
 describe('DatePickerIOS', () => {
   it('renders correctly', () => {
     const onChange = jest.fn();

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": -5,
+                "top": -4,
                 "zIndex": 1,
               },
               Object {
@@ -313,7 +313,7 @@ exports[`DatePicker renders DatePickerIOS when OS is iOS 1`] = `
                 "left": 16,
                 "paddingHorizontal": 4,
                 "position": "absolute",
-                "top": -5,
+                "top": -4,
                 "zIndex": 1,
               },
               Object {
@@ -544,7 +544,7 @@ exports[`DatePicker renders variant Calendar 1`] = `
                 "left": 16,
                 "paddingHorizontal": 4,
                 "position": "absolute",
-                "top": -5,
+                "top": -4,
                 "zIndex": 1,
               },
               Object {

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": -5,
+                "top": -4,
                 "zIndex": 1,
               },
               Object {

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": -5,
+                "top": -4,
                 "zIndex": 1,
               },
               Object {

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": -5,
+                "top": -4,
                 "zIndex": 1,
               },
               Object {

package/src/components/List/__tests__/__snapshots__/BasicListItem.spec.tsx.snap

@@ -96,7 +96,7 @@ exports[`BasicListItem when suffix and prefix are icon name renders correctly 1`
             "fontFamily": "BeVietnamPro-Regular",
             "fontSize": 12,
             "letterSpacing": 0.36,
-            "lineHeight": 20,
+            "lineHeight": 16,
           },
           undefined,
         ]
@@ -234,7 +234,7 @@ exports[`BasicListItem when suffix and prefix are react element renders correctl
             "fontFamily": "BeVietnamPro-Regular",
             "fontSize": 12,
             "letterSpacing": 0.36,
-            "lineHeight": 20,
+            "lineHeight": 16,
           },
           undefined,
         ]