@hero-design/rn 8.91.6-alpha.0 → 8.91.6

package/.turbo/turbo-build.log

@@ -0,0 +1,13 @@
+(node:3010) ExperimentalWarning: Importing JSON modules is an experimental feature and might change at any time
+(Use `node --trace-warnings ...` to show where the warning was created)
+
+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 typescript] src/components/RichTextEditor/__tests__/RichTextEditor.spec.tsx (61:35): @rollup/plugin-typescript TS2307: Cannot find module '../../../../types' or its corresponding type declarations.
+/home/runner/work/hero-design/hero-design/packages/rn/src/components/RichTextEditor/__tests__/RichTextEditor.spec.tsx:61:35
+
+61 import { RichTextEditorRef } from "../../../../types";
+                                     ~~~~~~~~~~~~~~~~~~~
+
+(!) [plugin node-resolve] preferring built-in module 'events' over local alternative at '/home/runner/work/hero-design/hero-design/node_modules/events/events.js', pass 'preferBuiltins: false' to disable this behavior or 'preferBuiltins: true' to disable this warning.or passing a function to 'preferBuiltins' to provide more fine-grained control over which built-in modules to prefer.
+created lib/index.js, es/index.js in 53.8s

package/CHANGELOG.md

@@ -1,5 +1,14 @@
 # @hero-design/rn
 
+## 8.91.6
+
+### Patch Changes
+
+- [#3713](https://github.com/Thinkei/hero-design/pull/3713) [`b7507e15becc17873237f8fee829149399a0641b`](https://github.com/Thinkei/hero-design/commit/b7507e15becc17873237f8fee829149399a0641b) Thanks [@ttkien](https://github.com/ttkien)! - [Error] make image center
+
+- Updated dependencies [[`4f07a745f50ba5470df6a3b16eb57fcdf52f755c`](https://github.com/Thinkei/hero-design/commit/4f07a745f50ba5470df6a3b16eb57fcdf52f755c)]:
+  - @hero-design/colors@8.45.3
+
 ## 8.91.5
 
 ### Patch Changes

package/es/index.js

@@ -1530,6 +1530,7 @@ var palette$c = {
   purpleLight30: purple$1.lighten30,
   purpleLight45: purple$1.lighten45,
   purpleLight75: purple$1.lighten75,
+  purpleLight90: purple$1.lighten90,
   red: vermilion$2.base,
   redDark15: vermilion$2.darken15,
   redDark30: vermilion$2.darken30,
@@ -9775,7 +9776,7 @@ var Divider = function Divider(_ref) {
   }));
 };
 
-var AnimatedPressable$1 = Animated.createAnimatedComponent(Pressable);
+var AnimatedPressable$2 = Animated.createAnimatedComponent(Pressable);
 var AnimatedSafeAreaView = Animated.createAnimatedComponent(SafeAreaView);
 var StyledWrapper$a = index$a(View)(_objectSpread2(_objectSpread2({}, StyleSheet$1.absoluteFillObject), {}, {
   flexDirection: 'column-reverse'
@@ -9812,7 +9813,7 @@ var StyledBottomSheet = index$a(AnimatedSafeAreaView)(function (_ref3) {
     maxHeight: '94%'
   };
 });
-var StyledBackdrop$2 = index$a(AnimatedPressable$1)(function (_ref4) {
+var StyledBackdrop$2 = index$a(AnimatedPressable$2)(function (_ref4) {
   var theme = _ref4.theme;
   return _objectSpread2(_objectSpread2({}, StyleSheet$1.absoluteFillObject), {}, {
     backgroundColor: theme.__hd__.bottomSheet.colors.backdrop,
@@ -15335,7 +15336,7 @@ var DatePicker = function DatePicker(_ref) {
   }));
 };
 
-var AnimatedPressable = Animated.createAnimatedComponent(Pressable);
+var AnimatedPressable$1 = Animated.createAnimatedComponent(Pressable);
 var StyledContainer$5 = index$a(View)(function (_ref) {
   var theme = _ref.theme,
     enableShadow = _ref.enableShadow;
@@ -15363,7 +15364,7 @@ var StyledDragableContainer = index$a(View)(function (_ref2) {
     flexDirection: 'column-reverse'
   });
 });
-var StyledBackdrop$1 = index$a(AnimatedPressable)(function (_ref3) {
+var StyledBackdrop$1 = index$a(AnimatedPressable$1)(function (_ref3) {
   var theme = _ref3.theme;
   return _objectSpread2(_objectSpread2({}, StyleSheet$1.absoluteFillObject), {}, {
     backgroundColor: theme.__hd__.drawer.colors.backdrop
@@ -16058,7 +16059,8 @@ var StyledErrorImageContainer = index$a(View)(function (_ref6) {
   return {
     marginBottom: theme.__hd__.error.space.imageMarginBottom,
     width: theme.__hd__.error.sizes.image,
-    height: theme.__hd__.error.sizes.image
+    height: theme.__hd__.error.sizes.image,
+    alignItems: 'center'
   };
 });
 var StyledErrorImage = index$a(Image)(function (_ref7) {
@@ -16552,17 +16554,8 @@ var StyledFAB$1 = index$a(FAB$1)(function (_ref) {
     alignSelf: 'flex-end'
   };
 });
-var StyledBackdropPressable = index$a(Pressable)(function () {
-  return {
-    position: 'absolute',
-    left: 0,
-    right: 0,
-    top: 0,
-    bottom: 0,
-    backgroundColor: 'transparent'
-  };
-});
-var StyledBackdrop = index$a(Box)(function (_ref2) {
+var AnimatedPressable = Animated.createAnimatedComponent(Pressable);
+var StyledBackdrop = index$a(AnimatedPressable)(function (_ref2) {
   var theme = _ref2.theme;
   return {
     position: 'absolute',
@@ -16648,10 +16641,10 @@ var ActionGroup = /*#__PURE__*/forwardRef(function (_ref, ref) {
   }, /*#__PURE__*/React__default.createElement(StyledContainerInModal, {
     testID: testID,
     style: [style]
-  }, /*#__PURE__*/React__default.createElement(StyledBackdropPressable, {
+  }, /*#__PURE__*/React__default.createElement(StyledBackdrop, {
     testID: "back-drop",
     onPress: onBackdropPress
-  }, active && /*#__PURE__*/React__default.createElement(Portal$1, null, /*#__PURE__*/React__default.createElement(StyledBackdrop, null))), /*#__PURE__*/React__default.createElement(StyledActionGroupContainer, {
+  }), /*#__PURE__*/React__default.createElement(StyledActionGroupContainer, {
     testID: "action-group",
     pointerEvents: "box-none",
     style: {
@@ -19293,7 +19286,8 @@ var StyledSuccessImageContainer = index$a(View)(function (_ref4) {
   return {
     marginBottom: theme.__hd__.success.space.imageMarginBottom,
     width: theme.__hd__.success.sizes.image,
-    height: theme.__hd__.success.sizes.image
+    height: theme.__hd__.success.sizes.image,
+    alignItems: 'center'
   };
 });
 var StyledSuccessTitle = index$a(Typography.Title)(function (_ref5) {

package/lib/index.js

@@ -1558,6 +1558,7 @@ var palette$c = {
   purpleLight30: purple$1.lighten30,
   purpleLight45: purple$1.lighten45,
   purpleLight75: purple$1.lighten75,
+  purpleLight90: purple$1.lighten90,
   red: vermilion$2.base,
   redDark15: vermilion$2.darken15,
   redDark30: vermilion$2.darken30,
@@ -9803,7 +9804,7 @@ var Divider = function Divider(_ref) {
   }));
 };
 
-var AnimatedPressable$1 = reactNative.Animated.createAnimatedComponent(reactNative.Pressable);
+var AnimatedPressable$2 = reactNative.Animated.createAnimatedComponent(reactNative.Pressable);
 var AnimatedSafeAreaView = reactNative.Animated.createAnimatedComponent(reactNative.SafeAreaView);
 var StyledWrapper$a = index$a(reactNative.View)(_objectSpread2(_objectSpread2({}, reactNative.StyleSheet.absoluteFillObject), {}, {
   flexDirection: 'column-reverse'
@@ -9840,7 +9841,7 @@ var StyledBottomSheet = index$a(AnimatedSafeAreaView)(function (_ref3) {
     maxHeight: '94%'
   };
 });
-var StyledBackdrop$2 = index$a(AnimatedPressable$1)(function (_ref4) {
+var StyledBackdrop$2 = index$a(AnimatedPressable$2)(function (_ref4) {
   var theme = _ref4.theme;
   return _objectSpread2(_objectSpread2({}, reactNative.StyleSheet.absoluteFillObject), {}, {
     backgroundColor: theme.__hd__.bottomSheet.colors.backdrop,
@@ -15363,7 +15364,7 @@ var DatePicker = function DatePicker(_ref) {
   }));
 };
 
-var AnimatedPressable = reactNative.Animated.createAnimatedComponent(reactNative.Pressable);
+var AnimatedPressable$1 = reactNative.Animated.createAnimatedComponent(reactNative.Pressable);
 var StyledContainer$5 = index$a(reactNative.View)(function (_ref) {
   var theme = _ref.theme,
     enableShadow = _ref.enableShadow;
@@ -15391,7 +15392,7 @@ var StyledDragableContainer = index$a(reactNative.View)(function (_ref2) {
     flexDirection: 'column-reverse'
   });
 });
-var StyledBackdrop$1 = index$a(AnimatedPressable)(function (_ref3) {
+var StyledBackdrop$1 = index$a(AnimatedPressable$1)(function (_ref3) {
   var theme = _ref3.theme;
   return _objectSpread2(_objectSpread2({}, reactNative.StyleSheet.absoluteFillObject), {}, {
     backgroundColor: theme.__hd__.drawer.colors.backdrop
@@ -16086,7 +16087,8 @@ var StyledErrorImageContainer = index$a(reactNative.View)(function (_ref6) {
   return {
     marginBottom: theme.__hd__.error.space.imageMarginBottom,
     width: theme.__hd__.error.sizes.image,
-    height: theme.__hd__.error.sizes.image
+    height: theme.__hd__.error.sizes.image,
+    alignItems: 'center'
   };
 });
 var StyledErrorImage = index$a(Image)(function (_ref7) {
@@ -16580,17 +16582,8 @@ var StyledFAB$1 = index$a(FAB$1)(function (_ref) {
     alignSelf: 'flex-end'
   };
 });
-var StyledBackdropPressable = index$a(reactNative.Pressable)(function () {
-  return {
-    position: 'absolute',
-    left: 0,
-    right: 0,
-    top: 0,
-    bottom: 0,
-    backgroundColor: 'transparent'
-  };
-});
-var StyledBackdrop = index$a(Box)(function (_ref2) {
+var AnimatedPressable = reactNative.Animated.createAnimatedComponent(reactNative.Pressable);
+var StyledBackdrop = index$a(AnimatedPressable)(function (_ref2) {
   var theme = _ref2.theme;
   return {
     position: 'absolute',
@@ -16676,10 +16669,10 @@ var ActionGroup = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   }, /*#__PURE__*/React__namespace.default.createElement(StyledContainerInModal, {
     testID: testID,
     style: [style]
-  }, /*#__PURE__*/React__namespace.default.createElement(StyledBackdropPressable, {
+  }, /*#__PURE__*/React__namespace.default.createElement(StyledBackdrop, {
     testID: "back-drop",
     onPress: onBackdropPress
-  }, active && /*#__PURE__*/React__namespace.default.createElement(Portal$1, null, /*#__PURE__*/React__namespace.default.createElement(StyledBackdrop, null))), /*#__PURE__*/React__namespace.default.createElement(StyledActionGroupContainer, {
+  }), /*#__PURE__*/React__namespace.default.createElement(StyledActionGroupContainer, {
     testID: "action-group",
     pointerEvents: "box-none",
     style: {
@@ -19321,7 +19314,8 @@ var StyledSuccessImageContainer = index$a(reactNative.View)(function (_ref4) {
   return {
     marginBottom: theme.__hd__.success.space.imageMarginBottom,
     width: theme.__hd__.success.sizes.image,
-    height: theme.__hd__.success.sizes.image
+    height: theme.__hd__.success.sizes.image,
+    alignItems: 'center'
   };
 });
 var StyledSuccessTitle = index$a(Typography.Title)(function (_ref5) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hero-design/rn",
-  "version": "8.91.6-alpha.0",
+  "version": "8.91.6",
   "license": "MIT",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -22,7 +22,7 @@
     "@emotion/native": "^11.9.3",
     "@emotion/primitives-core": "11.0.0",
     "@emotion/react": "^11.9.3",
-    "@hero-design/colors": "8.45.2",
+    "@hero-design/colors": "8.45.3",
     "date-fns": "^2.16.1",
     "hero-editor": "^1.15.5",
     "nanoid": "^5.0.9"

package/src/components/Error/StyledError.tsx

@@ -55,6 +55,7 @@ const StyledErrorImageContainer = styled(View)(({ theme }) => ({
   marginBottom: theme.__hd__.error.space.imageMarginBottom,
   width: theme.__hd__.error.sizes.image,
   height: theme.__hd__.error.sizes.image,
+  alignItems: 'center',
 }));
 const StyledErrorImage = styled(Image)(({ theme }) => ({
   marginBottom: theme.__hd__.error.space.imageMarginBottom,

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

@@ -41,6 +41,7 @@ exports[`Error renders error screen with custom image element correctly 1`] = `
         style={
           [
             {
+              "alignItems": "center",
               "height": 176,
               "marginBottom": 24,
               "width": 176,
@@ -187,6 +188,7 @@ exports[`Error renders error screen with image correctly 1`] = `
         style={
           [
             {
+              "alignItems": "center",
               "height": 176,
               "marginBottom": 24,
               "width": 176,
@@ -373,6 +375,7 @@ exports[`Error renders full screen error page correctly 1`] = `
           style={
             [
               {
+                "alignItems": "center",
                 "height": 176,
                 "marginBottom": 24,
                 "width": 176,

package/src/components/FAB/ActionGroup/StyledActionGroup.tsx

@@ -3,7 +3,6 @@ import styled from '@emotion/native';
 import type { ComponentProps } from 'react';
 import type { ViewProps } from 'react-native';
 import FAB from '../FAB';
-import Box from '../../Box';
 
 const StyledContainer = styled(View)<ViewProps>({
   position: 'absolute',
@@ -39,16 +38,8 @@ const StyledFAB = styled(FAB)(({ theme }) => ({
   alignSelf: 'flex-end',
 }));
 
-const StyledBackdropPressable = styled(Pressable)(() => ({
-  position: 'absolute',
-  left: 0,
-  right: 0,
-  top: 0,
-  bottom: 0,
-  backgroundColor: 'transparent',
-}));
-
-const StyledBackdrop = styled(Box)(({ theme }) => ({
+const AnimatedPressable = Animated.createAnimatedComponent(Pressable);
+const StyledBackdrop = styled(AnimatedPressable)(({ theme }) => ({
   position: 'absolute',
   left: 0,
   right: 0,
@@ -61,7 +52,6 @@ const StyledBackdrop = styled(Box)(({ theme }) => ({
 export {
   StyledActionGroupContainer,
   StyledBackdrop,
-  StyledBackdropPressable,
   StyledContainer,
   StyledContainerInModal,
   StyledFAB,

package/src/components/FAB/ActionGroup/index.tsx

@@ -7,12 +7,11 @@ import ActionItem from './ActionItem';
 import {
   StyledActionGroupContainer,
   StyledBackdrop,
-  StyledBackdropPressable,
   StyledContainer,
   StyledContainerInModal,
   StyledFAB,
 } from './StyledActionGroup';
-import { Portal } from '../../../';
+
 import Box from '../../Box';
 import { FABHandles } from '../FAB';
 import { useDeprecation } from '../../../utils/hooks';
@@ -152,17 +151,7 @@ const ActionGroup = forwardRef<ActionGroupHandles, ActionGroupProps>(
           supportedOrientations={supportedOrientations}
         >
           <StyledContainerInModal testID={testID} style={[style]}>
-            <StyledBackdropPressable
-              testID="back-drop"
-              onPress={onBackdropPress}
-            >
-              {active && (
-                <Portal>
-                  <StyledBackdrop />
-                </Portal>
-              )}
-            </StyledBackdropPressable>
-
+            <StyledBackdrop testID="back-drop" onPress={onBackdropPress} />
             <StyledActionGroupContainer
               testID="action-group"
               pointerEvents="box-none"

package/src/components/Success/StyledSuccess.tsx

@@ -39,6 +39,7 @@ const StyledSuccessImageContainer = styled(View)(({ theme }) => ({
   marginBottom: theme.__hd__.success.space.imageMarginBottom,
   width: theme.__hd__.success.sizes.image,
   height: theme.__hd__.success.sizes.image,
+  alignItems: 'center',
 }));
 
 const StyledSuccessTitle = styled(Typography.Title)(({ theme }) => ({

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

@@ -73,6 +73,7 @@ exports[`Success renders full screen success page correctly 1`] = `
           style={
             [
               {
+                "alignItems": "center",
                 "height": 176,
                 "marginBottom": 32,
                 "width": 176,
@@ -228,6 +229,7 @@ exports[`Success renders success screen with custom image element correctly 1`]
         style={
           [
             {
+              "alignItems": "center",
               "height": 176,
               "marginBottom": 32,
               "width": 176,
@@ -374,6 +376,7 @@ exports[`Success renders success screen with image correctly 1`] = `
         style={
           [
             {
+              "alignItems": "center",
               "height": 176,
               "marginBottom": 32,
               "width": 176,