@hero-design/rn 8.27.1 → 8.27.3

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 29s
+created lib/index.js, es/index.js in 28.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
   };
 };
 
@@ -2327,8 +2327,7 @@ var getFABTheme = function getFABTheme(theme) {
     headerTextMarginRight: theme.space.large,
     headerTextMarginBottom: theme.space.large,
     containerPadding: theme.space.large - theme.space.xsmall,
-    titleMarginHorizontal: theme.space.small,
-    internalFABMarginBottom: theme.space.large
+    titleMarginHorizontal: theme.space.small
   };
   var radii = {
     actionItem: theme.radii.rounded
@@ -2868,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
@@ -2881,7 +2883,8 @@ var getTagTheme = function getTagTheme(theme) {
     fonts: fonts,
     fontSizes: fontSizes,
     space: space,
-    radii: radii
+    radii: radii,
+    lineHeights: lineHeights
   };
 };
 
@@ -6100,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]);
@@ -6115,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) {
@@ -12037,7 +12050,7 @@ var TextInput = /*#__PURE__*/forwardRef(function (_ref2, ref) {
     testID: "input-suffix",
     icon: actualSuffix,
     spin: actualSuffix === 'loading',
-    size: "xsmall"
+    size: "medium"
   }) : suffix), /*#__PURE__*/React.createElement(StyledErrorAndHelpTextContainer, null, /*#__PURE__*/React.createElement(StyledErrorAndMaxLengthContainer, null, error ? /*#__PURE__*/React.createElement(StyledErrorContainer$2, null, /*#__PURE__*/React.createElement(Icon, {
     testID: "input-error-icon",
     icon: "circle-info",
@@ -12219,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,
@@ -12236,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];
@@ -13085,11 +13107,10 @@ var StyledBackdrop = index$a(Animated.View)(function (_ref2) {
   var theme = _ref2.theme;
   return {
     position: 'absolute',
-    flex: 1,
-    height: '100%',
-    width: '100%',
-    bottom: 0,
+    left: 0,
     right: 0,
+    top: 0,
+    bottom: 0,
     backgroundColor: theme.__hd__.fab.colors.backdropBackground
   };
 });
@@ -13105,17 +13126,6 @@ var StyledHeaderText = index$a(Typography.Text)(function (_ref3) {
     textAlign: 'right'
   };
 });
-var StyledModalView = index$a(View)({
-  position: 'absolute',
-  flex: 1,
-  height: '100%',
-  width: '100%',
-  bottom: 0,
-  right: 0,
-  justifyContent: 'flex-end',
-  alignItems: 'flex-end',
-  backgroundColor: 'transparent'
-});
 
 var ActionItemsListComponent = function ActionItemsListComponent(_ref) {
   var style = _ref.style,
@@ -13138,43 +13148,15 @@ var ActionGroup = function ActionGroup(_ref2) {
     fabTitle = _ref2.fabTitle,
     _ref2$fabIcon = _ref2.fabIcon,
     fabIcon = _ref2$fabIcon === void 0 ? 'add' : _ref2$fabIcon;
-  var theme = useTheme();
-  // Internal state to control the animation of the action group
-  var _useState = useState(active),
-    _useState2 = _slicedToArray(_useState, 2),
-    visible = _useState2[0],
-    setVisibility = _useState2[1];
   var tranlateXAnimation = useRef(new Animated.Value(active ? 1 : 0));
   useEffect(function () {
-    if (active && !visible) {
-      setVisibility(true);
-    }
-  }, [active]);
-  useEffect(function () {
-    if (active) {
-      var animation = Animated.timing(tranlateXAnimation.current, {
-        toValue: 1,
-        useNativeDriver: Platform.OS === 'ios' || Platform.OS === 'android',
-        easing: Easing.inOut(Easing.cubic)
-      });
-      animation.start();
-    }
-  }, [active]);
-  //  Make sure the animation finishes running before closing the modal
-  var onInternalFABPress = useCallback(function () {
-    if (!onPress) {
-      return;
-    }
     var animation = Animated.timing(tranlateXAnimation.current, {
-      toValue: 0,
+      toValue: active ? 1 : 0,
       useNativeDriver: Platform.OS === 'ios' || Platform.OS === 'android',
       easing: Easing.inOut(Easing.cubic)
     });
-    animation.start(function () {
-      setVisibility(false);
-      onPress();
-    });
-  }, [visible]);
+    animation.start();
+  }, [active]);
   var interpolatedTranlateXAnimation = tranlateXAnimation.current.interpolate({
     inputRange: [0, 1],
     outputRange: [400, 0]
@@ -13191,18 +13173,13 @@ var ActionGroup = function ActionGroup(_ref2) {
     testID: testID,
     pointerEvents: "box-none",
     style: style
-  }, /*#__PURE__*/React.createElement(Modal, {
-    visible: visible,
-    transparent: true,
-    statusBarTranslucent: true,
-    animationType: "none"
   }, /*#__PURE__*/React.createElement(StyledBackdrop, {
+    pointerEvents: active ? 'auto' : 'box-none',
+    testID: "back-drop",
     style: {
       opacity: interpolatedBackdropOpacityAnimation
-    },
-    testID: "back-drop",
-    pointerEvents: active ? 'auto' : 'box-none'
-  }), /*#__PURE__*/React.createElement(StyledModalView, null, /*#__PURE__*/React.createElement(StyledActionGroupContainer, {
+    }
+  }), /*#__PURE__*/React.createElement(StyledActionGroupContainer, {
     pointerEvents: active ? 'auto' : 'none',
     testID: "action-group",
     style: {
@@ -13215,17 +13192,7 @@ var ActionGroup = function ActionGroup(_ref2) {
     testID: "header-text"
   }, headerTitle), /*#__PURE__*/React.createElement(ActionItemsListComponent, {
     items: items
-  })), active && /*#__PURE__*/React.createElement(StyledFAB, {
-    testID: "fab",
-    icon: fabIcon,
-    onPress: onInternalFABPress,
-    animated: true,
-    active: active,
-    title: fabTitle,
-    style: {
-      marginBottom: theme.__hd__.fab.space.internalFABMarginBottom
-    }
-  }))), !active && /*#__PURE__*/React.createElement(StyledFAB, {
+  })), /*#__PURE__*/React.createElement(StyledFAB, {
     testID: "fab",
     icon: fabIcon,
     onPress: onPress,
@@ -15976,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
   };
 };
 
@@ -2357,8 +2357,7 @@ var getFABTheme = function getFABTheme(theme) {
     headerTextMarginRight: theme.space.large,
     headerTextMarginBottom: theme.space.large,
     containerPadding: theme.space.large - theme.space.xsmall,
-    titleMarginHorizontal: theme.space.small,
-    internalFABMarginBottom: theme.space.large
+    titleMarginHorizontal: theme.space.small
   };
   var radii = {
     actionItem: theme.radii.rounded
@@ -2898,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
@@ -2911,7 +2913,8 @@ var getTagTheme = function getTagTheme(theme) {
     fonts: fonts,
     fontSizes: fontSizes,
     space: space,
-    radii: radii
+    radii: radii,
+    lineHeights: lineHeights
   };
 };
 
@@ -6130,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]);
@@ -6145,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) {
@@ -12067,7 +12080,7 @@ var TextInput = /*#__PURE__*/React.forwardRef(function (_ref2, ref) {
     testID: "input-suffix",
     icon: actualSuffix,
     spin: actualSuffix === 'loading',
-    size: "xsmall"
+    size: "medium"
   }) : suffix), /*#__PURE__*/React__default["default"].createElement(StyledErrorAndHelpTextContainer, null, /*#__PURE__*/React__default["default"].createElement(StyledErrorAndMaxLengthContainer, null, error ? /*#__PURE__*/React__default["default"].createElement(StyledErrorContainer$2, null, /*#__PURE__*/React__default["default"].createElement(Icon, {
     testID: "input-error-icon",
     icon: "circle-info",
@@ -12249,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,
@@ -12266,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];
@@ -13115,11 +13137,10 @@ var StyledBackdrop = index$a(reactNative.Animated.View)(function (_ref2) {
   var theme = _ref2.theme;
   return {
     position: 'absolute',
-    flex: 1,
-    height: '100%',
-    width: '100%',
-    bottom: 0,
+    left: 0,
     right: 0,
+    top: 0,
+    bottom: 0,
     backgroundColor: theme.__hd__.fab.colors.backdropBackground
   };
 });
@@ -13135,17 +13156,6 @@ var StyledHeaderText = index$a(Typography.Text)(function (_ref3) {
     textAlign: 'right'
   };
 });
-var StyledModalView = index$a(reactNative.View)({
-  position: 'absolute',
-  flex: 1,
-  height: '100%',
-  width: '100%',
-  bottom: 0,
-  right: 0,
-  justifyContent: 'flex-end',
-  alignItems: 'flex-end',
-  backgroundColor: 'transparent'
-});
 
 var ActionItemsListComponent = function ActionItemsListComponent(_ref) {
   var style = _ref.style,
@@ -13168,43 +13178,15 @@ var ActionGroup = function ActionGroup(_ref2) {
     fabTitle = _ref2.fabTitle,
     _ref2$fabIcon = _ref2.fabIcon,
     fabIcon = _ref2$fabIcon === void 0 ? 'add' : _ref2$fabIcon;
-  var theme = useTheme();
-  // Internal state to control the animation of the action group
-  var _useState = React.useState(active),
-    _useState2 = _slicedToArray(_useState, 2),
-    visible = _useState2[0],
-    setVisibility = _useState2[1];
   var tranlateXAnimation = React.useRef(new reactNative.Animated.Value(active ? 1 : 0));
   React.useEffect(function () {
-    if (active && !visible) {
-      setVisibility(true);
-    }
-  }, [active]);
-  React.useEffect(function () {
-    if (active) {
-      var animation = reactNative.Animated.timing(tranlateXAnimation.current, {
-        toValue: 1,
-        useNativeDriver: reactNative.Platform.OS === 'ios' || reactNative.Platform.OS === 'android',
-        easing: reactNative.Easing.inOut(reactNative.Easing.cubic)
-      });
-      animation.start();
-    }
-  }, [active]);
-  //  Make sure the animation finishes running before closing the modal
-  var onInternalFABPress = React.useCallback(function () {
-    if (!onPress) {
-      return;
-    }
     var animation = reactNative.Animated.timing(tranlateXAnimation.current, {
-      toValue: 0,
+      toValue: active ? 1 : 0,
       useNativeDriver: reactNative.Platform.OS === 'ios' || reactNative.Platform.OS === 'android',
       easing: reactNative.Easing.inOut(reactNative.Easing.cubic)
     });
-    animation.start(function () {
-      setVisibility(false);
-      onPress();
-    });
-  }, [visible]);
+    animation.start();
+  }, [active]);
   var interpolatedTranlateXAnimation = tranlateXAnimation.current.interpolate({
     inputRange: [0, 1],
     outputRange: [400, 0]
@@ -13221,18 +13203,13 @@ var ActionGroup = function ActionGroup(_ref2) {
     testID: testID,
     pointerEvents: "box-none",
     style: style
-  }, /*#__PURE__*/React__default["default"].createElement(reactNative.Modal, {
-    visible: visible,
-    transparent: true,
-    statusBarTranslucent: true,
-    animationType: "none"
   }, /*#__PURE__*/React__default["default"].createElement(StyledBackdrop, {
+    pointerEvents: active ? 'auto' : 'box-none',
+    testID: "back-drop",
     style: {
       opacity: interpolatedBackdropOpacityAnimation
-    },
-    testID: "back-drop",
-    pointerEvents: active ? 'auto' : 'box-none'
-  }), /*#__PURE__*/React__default["default"].createElement(StyledModalView, null, /*#__PURE__*/React__default["default"].createElement(StyledActionGroupContainer, {
+    }
+  }), /*#__PURE__*/React__default["default"].createElement(StyledActionGroupContainer, {
     pointerEvents: active ? 'auto' : 'none',
     testID: "action-group",
     style: {
@@ -13245,17 +13222,7 @@ var ActionGroup = function ActionGroup(_ref2) {
     testID: "header-text"
   }, headerTitle), /*#__PURE__*/React__default["default"].createElement(ActionItemsListComponent, {
     items: items
-  })), active && /*#__PURE__*/React__default["default"].createElement(StyledFAB, {
-    testID: "fab",
-    icon: fabIcon,
-    onPress: onInternalFABPress,
-    animated: true,
-    active: active,
-    title: fabTitle,
-    style: {
-      marginBottom: theme.__hd__.fab.space.internalFABMarginBottom
-    }
-  }))), !active && /*#__PURE__*/React__default["default"].createElement(StyledFAB, {
+  })), /*#__PURE__*/React__default["default"].createElement(StyledFAB, {
     testID: "fab",
     icon: fabIcon,
     onPress: onPress,
@@ -16006,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.1",
+  "version": "8.27.3",
   "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.1",
+    "@hero-design/colors": "8.27.3",
     "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.1",
+    "@hero-design/eslint-plugin": "8.27.3",
     "@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.1",
+    "eslint-config-hd": "8.27.3",
     "eslint-plugin-import": "^2.27.5",
     "jest": "^27.3.1",
-    "prettier-config-hd": "8.27.1",
+    "prettier-config-hd": "8.27.3",
     "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",
           },