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

package/.turbo/turbo-build.log

@@ -0,0 +1,13 @@
+(node:3034) 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 51.9s

package/CHANGELOG.md

@@ -1,5 +1,20 @@
 # @hero-design/rn
 
+## 8.91.7
+
+### Patch Changes
+
+- [#3720](https://github.com/Thinkei/hero-design/pull/3720) [`c6acaedafaa8d246f2882a72234db93b3fff93d3`](https://github.com/Thinkei/hero-design/commit/c6acaedafaa8d246f2882a72234db93b3fff93d3) Thanks [@vinhphan-eh](https://github.com/vinhphan-eh)! - [Mobile] Update shadow naming
+
+## 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,
@@ -2315,16 +2316,6 @@ var getRadii = function getRadii(baseRadius) {
 
 var swagLightShadowPalette = {
   "default": {
-    shadowOffset: {
-      width: 0,
-      height: 2
-    },
-    shadowColor: swagSystemPalette.primaryOutline,
-    shadowOpacity: 0.12,
-    shadowRadius: 4,
-    elevation: 3
-  },
-  cardDrawer: {
     shadowOffset: {
       width: 0,
       height: 2
@@ -2334,7 +2325,7 @@ var swagLightShadowPalette = {
     shadowRadius: 2,
     elevation: 6
   },
-  tabBar: {
+  medium: {
     shadowOffset: {
       width: 0,
       height: -4
@@ -2343,6 +2334,16 @@ var swagLightShadowPalette = {
     shadowOpacity: 0.04,
     shadowRadius: 6,
     elevation: 10
+  },
+  deep: {
+    shadowOffset: {
+      width: 0,
+      height: 4
+    },
+    shadowColor: '#001f23',
+    shadowOpacity: 0.28,
+    shadowRadius: 8,
+    elevation: 10
   }
 };
 
@@ -2357,40 +2358,30 @@ var swagLightJobsShadowPalette = {
     shadowRadius: 4,
     elevation: 3
   },
-  cardDrawer: {
+  medium: {
     shadowOffset: {
       width: 0,
-      height: 2
+      height: -4
     },
     shadowColor: '#001f23',
-    shadowOpacity: 0.12,
-    shadowRadius: 2,
-    elevation: 6
+    shadowOpacity: 0.04,
+    shadowRadius: 6,
+    elevation: 10
   },
-  tabBar: {
+  deep: {
     shadowOffset: {
       width: 0,
-      height: -4
+      height: 4
     },
     shadowColor: '#001f23',
-    shadowOpacity: 0.04,
-    shadowRadius: 6,
+    shadowOpacity: 0.28,
+    shadowRadius: 8,
     elevation: 10
   }
 };
 
 var ehWorkDarkShadowPalette = {
   "default": {
-    shadowOffset: {
-      width: 0,
-      height: 2
-    },
-    shadowColor: ehWorkDarkSystemPalette.primaryOutline,
-    shadowOpacity: 0.12,
-    shadowRadius: 4,
-    elevation: 3
-  },
-  cardDrawer: {
     shadowOffset: {
       width: 0,
       height: 2
@@ -2400,7 +2391,7 @@ var ehWorkDarkShadowPalette = {
     shadowRadius: 2,
     elevation: 6
   },
-  tabBar: {
+  medium: {
     shadowOffset: {
       width: 0,
       height: -4
@@ -2409,6 +2400,16 @@ var ehWorkDarkShadowPalette = {
     shadowOpacity: 0.24,
     shadowRadius: 6,
     elevation: 10
+  },
+  deep: {
+    shadowOffset: {
+      width: 0,
+      height: 4
+    },
+    shadowColor: '#000000',
+    shadowOpacity: 0.64,
+    shadowRadius: 8,
+    elevation: 10
   }
 };
 
@@ -2498,7 +2499,7 @@ var getAlertTheme = function getAlertTheme(theme) {
     base: theme.borderWidths.base
   };
   var shadows = {
-    wrapper: theme.shadows.cardDrawer
+    wrapper: theme.shadows["default"]
   };
   return {
     colors: colors,
@@ -2669,7 +2670,7 @@ var getBottomNavigationTheme = function getBottomNavigationTheme(theme) {
     height: theme.sizes['6xlarge']
   };
   var shadows = {
-    wrapper: theme.shadows.tabBar
+    wrapper: theme.shadows.medium
   };
   var space = {
     titleMarginTop: theme.space.xsmall
@@ -2984,7 +2985,7 @@ var getChipTheme = function getChipTheme(theme) {
     outlinedDefaultBorder: theme.borderWidths.base
   };
   var shadows = {
-    filledWrapper: theme.shadows.cardDrawer
+    filledWrapper: theme.shadows["default"]
   };
   var fontSizes = {
     icon: theme.fontSizes.small
@@ -3183,7 +3184,7 @@ var getFABTheme = function getFABTheme(theme) {
     icon: theme.lineHeights.large
   };
   var shadows = {
-    "default": theme.shadows.cardDrawer
+    "default": theme.shadows["default"]
   };
   var space = {
     actionItemPadding: theme.space.smallMedium,
@@ -3273,7 +3274,7 @@ var getListTheme = function getListTheme(theme) {
     leadingStatus: theme.radii.rounded
   };
   var shadows = {
-    card: theme.shadows.cardDrawer
+    card: theme.shadows["default"]
   };
   var widths = {
     leadingStatus: 8
@@ -3960,7 +3961,7 @@ var getToastTheme = function getToastTheme(theme) {
     base: theme.borderWidths.base
   };
   var shadows = {
-    wrapper: theme.shadows.cardDrawer
+    wrapper: theme.shadows["default"]
   };
   return {
     colors: colors,
@@ -4214,7 +4215,7 @@ var getSearchTheme = function getSearchTheme(theme) {
     shadow: theme.colors.primaryOutline
   };
   var shadows = {
-    container: theme.shadows.cardDrawer
+    container: theme.shadows["default"]
   };
   var space = {
     containerHorizontalPadding: theme.space.small,
@@ -4294,11 +4295,11 @@ var getMapPinTheme = function getMapPinTheme(theme) {
     iconRight: -theme.space.small
   };
   var shadows = {
-    offset: theme.shadows["default"].shadowOffset,
-    opacity: theme.shadows["default"].shadowOpacity,
-    radius: theme.shadows["default"].shadowRadius,
-    elevation: theme.shadows["default"].elevation,
-    color: theme.shadows["default"].shadowColor
+    offset: theme.shadows.deep.shadowOffset,
+    opacity: theme.shadows.deep.shadowOpacity,
+    radius: theme.shadows.deep.shadowRadius,
+    elevation: theme.shadows.deep.elevation,
+    color: theme.shadows.deep.shadowColor
   };
   return {
     sizes: sizes,
@@ -4319,7 +4320,7 @@ var getFloatingIslandTheme = function getFloatingIslandTheme(theme) {
     wrapper: theme.radii.rounded
   };
   var shadows = {
-    wrapper: theme.shadows.cardDrawer
+    wrapper: theme.shadows["default"]
   };
   var space = {
     wrapperPadding: theme.space.small,
@@ -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,
@@ -2343,16 +2344,6 @@ var getRadii = function getRadii(baseRadius) {
 
 var swagLightShadowPalette = {
   "default": {
-    shadowOffset: {
-      width: 0,
-      height: 2
-    },
-    shadowColor: swagSystemPalette.primaryOutline,
-    shadowOpacity: 0.12,
-    shadowRadius: 4,
-    elevation: 3
-  },
-  cardDrawer: {
     shadowOffset: {
       width: 0,
       height: 2
@@ -2362,7 +2353,7 @@ var swagLightShadowPalette = {
     shadowRadius: 2,
     elevation: 6
   },
-  tabBar: {
+  medium: {
     shadowOffset: {
       width: 0,
       height: -4
@@ -2371,6 +2362,16 @@ var swagLightShadowPalette = {
     shadowOpacity: 0.04,
     shadowRadius: 6,
     elevation: 10
+  },
+  deep: {
+    shadowOffset: {
+      width: 0,
+      height: 4
+    },
+    shadowColor: '#001f23',
+    shadowOpacity: 0.28,
+    shadowRadius: 8,
+    elevation: 10
   }
 };
 
@@ -2385,40 +2386,30 @@ var swagLightJobsShadowPalette = {
     shadowRadius: 4,
     elevation: 3
   },
-  cardDrawer: {
+  medium: {
     shadowOffset: {
       width: 0,
-      height: 2
+      height: -4
     },
     shadowColor: '#001f23',
-    shadowOpacity: 0.12,
-    shadowRadius: 2,
-    elevation: 6
+    shadowOpacity: 0.04,
+    shadowRadius: 6,
+    elevation: 10
   },
-  tabBar: {
+  deep: {
     shadowOffset: {
       width: 0,
-      height: -4
+      height: 4
     },
     shadowColor: '#001f23',
-    shadowOpacity: 0.04,
-    shadowRadius: 6,
+    shadowOpacity: 0.28,
+    shadowRadius: 8,
     elevation: 10
   }
 };
 
 var ehWorkDarkShadowPalette = {
   "default": {
-    shadowOffset: {
-      width: 0,
-      height: 2
-    },
-    shadowColor: ehWorkDarkSystemPalette.primaryOutline,
-    shadowOpacity: 0.12,
-    shadowRadius: 4,
-    elevation: 3
-  },
-  cardDrawer: {
     shadowOffset: {
       width: 0,
       height: 2
@@ -2428,7 +2419,7 @@ var ehWorkDarkShadowPalette = {
     shadowRadius: 2,
     elevation: 6
   },
-  tabBar: {
+  medium: {
     shadowOffset: {
       width: 0,
       height: -4
@@ -2437,6 +2428,16 @@ var ehWorkDarkShadowPalette = {
     shadowOpacity: 0.24,
     shadowRadius: 6,
     elevation: 10
+  },
+  deep: {
+    shadowOffset: {
+      width: 0,
+      height: 4
+    },
+    shadowColor: '#000000',
+    shadowOpacity: 0.64,
+    shadowRadius: 8,
+    elevation: 10
   }
 };
 
@@ -2526,7 +2527,7 @@ var getAlertTheme = function getAlertTheme(theme) {
     base: theme.borderWidths.base
   };
   var shadows = {
-    wrapper: theme.shadows.cardDrawer
+    wrapper: theme.shadows["default"]
   };
   return {
     colors: colors,
@@ -2697,7 +2698,7 @@ var getBottomNavigationTheme = function getBottomNavigationTheme(theme) {
     height: theme.sizes['6xlarge']
   };
   var shadows = {
-    wrapper: theme.shadows.tabBar
+    wrapper: theme.shadows.medium
   };
   var space = {
     titleMarginTop: theme.space.xsmall
@@ -3012,7 +3013,7 @@ var getChipTheme = function getChipTheme(theme) {
     outlinedDefaultBorder: theme.borderWidths.base
   };
   var shadows = {
-    filledWrapper: theme.shadows.cardDrawer
+    filledWrapper: theme.shadows["default"]
   };
   var fontSizes = {
     icon: theme.fontSizes.small
@@ -3211,7 +3212,7 @@ var getFABTheme = function getFABTheme(theme) {
     icon: theme.lineHeights.large
   };
   var shadows = {
-    "default": theme.shadows.cardDrawer
+    "default": theme.shadows["default"]
   };
   var space = {
     actionItemPadding: theme.space.smallMedium,
@@ -3301,7 +3302,7 @@ var getListTheme = function getListTheme(theme) {
     leadingStatus: theme.radii.rounded
   };
   var shadows = {
-    card: theme.shadows.cardDrawer
+    card: theme.shadows["default"]
   };
   var widths = {
     leadingStatus: 8
@@ -3988,7 +3989,7 @@ var getToastTheme = function getToastTheme(theme) {
     base: theme.borderWidths.base
   };
   var shadows = {
-    wrapper: theme.shadows.cardDrawer
+    wrapper: theme.shadows["default"]
   };
   return {
     colors: colors,
@@ -4242,7 +4243,7 @@ var getSearchTheme = function getSearchTheme(theme) {
     shadow: theme.colors.primaryOutline
   };
   var shadows = {
-    container: theme.shadows.cardDrawer
+    container: theme.shadows["default"]
   };
   var space = {
     containerHorizontalPadding: theme.space.small,
@@ -4322,11 +4323,11 @@ var getMapPinTheme = function getMapPinTheme(theme) {
     iconRight: -theme.space.small
   };
   var shadows = {
-    offset: theme.shadows["default"].shadowOffset,
-    opacity: theme.shadows["default"].shadowOpacity,
-    radius: theme.shadows["default"].shadowRadius,
-    elevation: theme.shadows["default"].elevation,
-    color: theme.shadows["default"].shadowColor
+    offset: theme.shadows.deep.shadowOffset,
+    opacity: theme.shadows.deep.shadowOpacity,
+    radius: theme.shadows.deep.shadowRadius,
+    elevation: theme.shadows.deep.elevation,
+    color: theme.shadows.deep.shadowColor
   };
   return {
     sizes: sizes,
@@ -4347,7 +4348,7 @@ var getFloatingIslandTheme = function getFloatingIslandTheme(theme) {
     wrapper: theme.radii.rounded
   };
   var shadows = {
-    wrapper: theme.shadows.cardDrawer
+    wrapper: theme.shadows["default"]
   };
   var space = {
     wrapperPadding: theme.space.small,
@@ -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.7",
   "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,