@hero-design/rn 8.24.0 → 8.25.1

package/.turbo/turbo-build.log

@@ -1,9 +1,9 @@
-@hero-design/rn:build: cache hit, replaying output 5e28173315c89cb6
-@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.7s
-@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';
@@ -981,9 +981,9 @@ var blue$1 = colorScales.blue,
   purple$1 = colorScales.purple,
   vermilion$3 = colorScales.vermilion,
   smalt = colorScales.smalt,
-  violet$1 = colorScales.violet,
+  violet$2 = colorScales.violet,
   yellow$1 = colorScales.yellow;
-({
+var palette$b = {
   black: '#000000',
   white: '#ffffff',
   blue: blue$1.base,
@@ -1058,21 +1058,40 @@ var blue$1 = colorScales.blue,
   smaltLight45: smalt.lighten45,
   smaltLight75: smalt.lighten75,
   smaltLight90: smalt.lighten90,
-  violet: violet$1.base,
-  violetDark15: violet$1.darken15,
-  violetDark30: violet$1.darken30,
-  violetDark45: violet$1.darken45,
-  violetDark60: violet$1.darken60,
-  violetDark75: violet$1.darken75,
-  violetLight30: violet$1.lighten30,
-  violetLight60: violet$1.lighten60,
-  violetLight75: violet$1.lighten75,
-  violetLight90: violet$1.lighten90,
+  violet: violet$2.base,
+  violetDark15: violet$2.darken15,
+  violetDark30: violet$2.darken30,
+  violetDark45: violet$2.darken45,
+  violetDark60: violet$2.darken60,
+  violetDark75: violet$2.darken75,
+  violetLight30: violet$2.lighten30,
+  violetLight60: violet$2.lighten60,
+  violetLight75: violet$2.lighten75,
+  violetLight90: violet$2.lighten90,
   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,
+  violet$1 = colorScales.violet;
+Object.assign(Object.assign({}, palette$b), {
+  mauve: mauve$4.base,
+  mauveLight80: mauve$4.lighten80,
+  violetDark50: violet$1.darken50
+});
+var apple$4 = colorScales.apple,
+  hitPink$1 = colorScales.hitPink;
+Object.assign(Object.assign({}, palette$b), {
+  apple: apple$4.base,
+  appleDark20: apple$4.darken20,
+  appleDark50: apple$4.darken50,
+  appleLight90: apple$4.lighten90,
+  hitPink: hitPink$1.base,
+  hitPinkLight80: hitPink$1.lighten80
 });
 var aliceBlue$1 = colorScales.aliceBlue,
   antiFlashWhite$1 = colorScales.antiFlashWhite,
@@ -1239,7 +1258,7 @@ var currant$1 = colorScales.currant,
   vermilion = colorScales.vermilion,
   mauve$3 = colorScales.mauve,
   violet1$3 = colorScales.violet1,
-  violet$2 = colorScales.violet,
+  violet$3 = colorScales.violet,
   scarletGum$2 = colorScales.scarletGum;
 var palette$6 = {
   currant: currant$1.base,
@@ -1258,9 +1277,9 @@ var palette$6 = {
   pastelRed: pastelRed.base,
   vermilion: vermilion.base,
   mauve: mauve$3.base,
-  violetLight30: violet$2.lighten30,
+  violetLight30: violet$3.lighten30,
   violet1: violet1$3.base,
-  violet: violet$2.base,
+  violet: violet$3.base,
   scarletGum: scarletGum$2.base
 };
 var violet1$2 = colorScales.violet1,
@@ -2240,12 +2259,17 @@ var getErrorTheme = function getErrorTheme(theme) {
     title: theme.fonts.playful.semiBold,
     description: theme.fonts.playful.regular
   };
+  var lineHeight = {
+    title: theme.lineHeights.xxxlarge,
+    description: theme.lineHeights.xlarge
+  };
   return {
     fontSizes: fontSizes,
     colors: colors,
     sizes: sizes,
     space: space,
-    fonts: fonts
+    fonts: fonts,
+    lineHeight: lineHeight
   };
 };
 
@@ -2907,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,
@@ -2926,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: {
@@ -2942,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,
@@ -2949,7 +2977,8 @@ var getTextInputTheme = function getTextInputTheme(theme) {
     fontSizes: fontSizes,
     borderWidths: borderWidths,
     radii: radii,
-    sizes: sizes
+    sizes: sizes,
+    lineHeights: lineHeights
   };
 };
 
@@ -6005,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();
@@ -6050,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],
@@ -6064,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) {
@@ -6077,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, {
@@ -11289,6 +11318,7 @@ var CardCarousel = /*#__PURE__*/forwardRef(function (_ref, ref) {
     setFlatListWidth = _useState4[1];
   var itemWidth = flatListWidth * ITEM_WIDTH_RATE;
   var carouselRef = useRef(null);
+  var viewPosition = Platform.OS === 'ios' ? VIEW_POSITION_CENTER : undefined;
   var _snapToIndex = useCallback(function (index) {
     var _carouselRef$current;
     var validIndex = 0;
@@ -11302,7 +11332,7 @@ var CardCarousel = /*#__PURE__*/forwardRef(function (_ref, ref) {
     (_carouselRef$current = carouselRef.current) === null || _carouselRef$current === void 0 ? void 0 : _carouselRef$current.scrollToIndex({
       index: validIndex,
       animated: true,
-      viewPosition: VIEW_POSITION_CENTER
+      viewPosition: viewPosition
     });
   }, [carouselRef, itemWidth]);
   /*
@@ -11317,7 +11347,7 @@ var CardCarousel = /*#__PURE__*/forwardRef(function (_ref, ref) {
     (_carouselRef$current2 = carouselRef.current) === null || _carouselRef$current2 === void 0 ? void 0 : _carouselRef$current2.scrollToIndex({
       index: nextIndex,
       animated: true,
-      viewPosition: VIEW_POSITION_CENTER
+      viewPosition: viewPosition
     });
   }, [carouselRef, currentIndex, itemWidth, items.length]);
   React.useImperativeHandle(ref, function () {
@@ -11372,16 +11402,31 @@ var CardCarousel = /*#__PURE__*/forwardRef(function (_ref, ref) {
       }
     }, /*#__PURE__*/React.createElement(StyledShadow, null, /*#__PURE__*/React.createElement(StyledCard, null, item)));
   }, [itemWidth]);
+  var contentContainerPaddingHorizontal = theme.__hd__.cardCarousel.space.contentContainerPaddingHorizontal;
   return /*#__PURE__*/React.createElement(StyledWrapper$7, {
     style: style,
     testID: testID
   }, /*#__PURE__*/React.createElement(FlatList, {
     contentInset: {
       top: 0,
-      left: theme.__hd__.cardCarousel.space.contentContainerPaddingHorizontal,
+      left: contentContainerPaddingHorizontal,
       bottom: 0,
-      right: theme.__hd__.cardCarousel.space.contentContainerPaddingHorizontal
+      right: contentContainerPaddingHorizontal
     },
+    ListHeaderComponent: Platform.select({
+      android: /*#__PURE__*/React.createElement(View, {
+        style: {
+          width: contentContainerPaddingHorizontal
+        }
+      })
+    }),
+    ListFooterComponent: Platform.select({
+      android: /*#__PURE__*/React.createElement(View, {
+        style: {
+          width: contentContainerPaddingHorizontal
+        }
+      })
+    }),
     onLayout: flatListOnLayout,
     data: items,
     horizontal: true,
@@ -11398,7 +11443,9 @@ var CardCarousel = /*#__PURE__*/forwardRef(function (_ref, ref) {
     },
     decelerationRate: "fast",
     renderToHardwareTextureAndroid: true,
-    snapToInterval: itemWidth,
+    snapToInterval: Platform.select({
+      ios: itemWidth
+    }),
     onViewableItemsChanged: visibleSlideChanged,
     viewabilityConfig: {
       itemVisiblePercentThreshold: 80
@@ -11623,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) {
@@ -11938,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
@@ -12667,7 +12716,8 @@ var StyledErrorTitle = index$a(Typography.Text)(function (_ref8) {
     fontSize: theme.__hd__.error.fontSizes.title,
     textAlign: 'center',
     marginBottom: theme.__hd__.error.space.titleMarginBottom,
-    color: theme.__hd__.error.colors.title
+    color: theme.__hd__.error.colors.title,
+    lineHeight: theme.__hd__.error.lineHeight.title
   };
 });
 var StyledErrorDescription = index$a(Typography.Text)(function (_ref9) {
@@ -12676,7 +12726,8 @@ var StyledErrorDescription = index$a(Typography.Text)(function (_ref9) {
     fontFamily: theme.__hd__.error.fonts.description,
     fontSize: theme.__hd__.error.fontSizes.description,
     textAlign: 'center',
-    color: theme.__hd__.error.colors.description
+    color: theme.__hd__.error.colors.description,
+    lineHeight: theme.__hd__.error.lineHeight.description
   };
 });
 
@@ -13901,7 +13952,7 @@ var AnimatedSpinner = function AnimatedSpinner(_ref) {
       toValue: 1,
       duration: 1200,
       easing: Easing.linear,
-      useNativeDriver: true
+      useNativeDriver: Platform.OS !== 'web'
     }));
     animation.start();
     return function () {