@hero-design/rn 8.89.0-alpha.4 → 8.90.1

package/.turbo/turbo-build.log

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

package/CHANGELOG.md

@@ -1,5 +1,41 @@
 # @hero-design/rn
 
+## 8.90.1
+
+### Patch Changes
+
+- [#3677](https://github.com/Thinkei/hero-design/pull/3677) [`ac973b40ec94c3fa7e83a6cfc9d781a3ccb68f5b`](https://github.com/Thinkei/hero-design/commit/ac973b40ec94c3fa7e83a6cfc9d781a3ccb68f5b) Thanks [@ttkien](https://github.com/ttkien)! - [Theme] add themeMode to specify dark or light mode
+  [MonthYearPicker] change themeVariant base on theme mode
+- Updated dependencies [[`ac973b40ec94c3fa7e83a6cfc9d781a3ccb68f5b`](https://github.com/Thinkei/hero-design/commit/ac973b40ec94c3fa7e83a6cfc9d781a3ccb68f5b)]:
+  - @hero-design/react-native-month-year-picker@8.43.1
+
+## 8.90.0
+
+### Minor Changes
+
+- [#3682](https://github.com/Thinkei/hero-design/pull/3682) [`9cc1860a717736c1116affb45f44f381c1e0b616`](https://github.com/Thinkei/hero-design/commit/9cc1860a717736c1116affb45f44f381c1e0b616) Thanks [@ttkien](https://github.com/ttkien)! - [Icon] Add xxxsmall size
+
+- [#3682](https://github.com/Thinkei/hero-design/pull/3682) [`9cc1860a717736c1116affb45f44f381c1e0b616`](https://github.com/Thinkei/hero-design/commit/9cc1860a717736c1116affb45f44f381c1e0b616) Thanks [@ttkien](https://github.com/ttkien)! - [Card] Add secondary intent and update Card.Data background color
+
+### Patch Changes
+
+- [#3682](https://github.com/Thinkei/hero-design/pull/3682) [`9cc1860a717736c1116affb45f44f381c1e0b616`](https://github.com/Thinkei/hero-design/commit/9cc1860a717736c1116affb45f44f381c1e0b616) Thanks [@ttkien](https://github.com/ttkien)! - [Image] Deprecate component
+
+- [#3682](https://github.com/Thinkei/hero-design/pull/3682) [`9cc1860a717736c1116affb45f44f381c1e0b616`](https://github.com/Thinkei/hero-design/commit/9cc1860a717736c1116affb45f44f381c1e0b616) Thanks [@ttkien](https://github.com/ttkien)! - [iOS] support text color for react-native-month-year-picker
+
+- Updated dependencies [[`9cc1860a717736c1116affb45f44f381c1e0b616`](https://github.com/Thinkei/hero-design/commit/9cc1860a717736c1116affb45f44f381c1e0b616)]:
+  - @hero-design/react-native-month-year-picker@8.43.0
+
+## 8.89.0
+
+### Minor Changes
+
+- [#3662](https://github.com/Thinkei/hero-design/pull/3662) [`b2f1ffecacb90bd35d5ceadadee1030e6efbafe4`](https://github.com/Thinkei/hero-design/commit/b2f1ffecacb90bd35d5ceadadee1030e6efbafe4) Thanks [@vinhphan-eh](https://github.com/vinhphan-eh)! - [Calendar.Range] Add component
+
+### Patch Changes
+
+- [#3670](https://github.com/Thinkei/hero-design/pull/3670) [`a3bfcaf3b8f603925e66152d95fc30cc68b1c018`](https://github.com/Thinkei/hero-design/commit/a3bfcaf3b8f603925e66152d95fc30cc68b1c018) Thanks [@luanlai2201](https://github.com/luanlai2201)! - [RichTextEditor] Fix label at wrong position
+
 ## 8.88.0
 
 ### Minor Changes

package/es/index.js

@@ -1979,7 +1979,10 @@ var swagDarkBrandSystemPalette = {
   decorativePrimary: palette$2.maasstrichtBlue,
   decorativePrimarySurface: palette$2.maasstrichtBlueLight10
 };
-var swagDarkSystemPalette = _objectSpread2(_objectSpread2({}, globalPalette), swagDarkBrandSystemPalette);
+var swagDarkSystemPalette = _objectSpread2(_objectSpread2(_objectSpread2({}, globalPalette), swagDarkBrandSystemPalette), {}, {
+  // Theme Mode
+  themeMode: 'dark'
+});
 
 var swagLightGlobalPalette = _objectSpread2(_objectSpread2({}, globalPalette$1), {}, {
   onDefaultGlobalSurface: palette$3.offBlack,
@@ -2062,64 +2065,6 @@ var eBensBrandSystemPallete = {
 };
 var eBensSystemPalette = _objectSpread2(_objectSpread2({}, swagSystemPalette$1), eBensBrandSystemPallete);
 
-var ehWorkDarkSystemPalette = {
-  black: '#000000',
-  white: '#ffffff',
-  // Surface
-  defaultGlobalSurface: '#27272A',
-  neutralGlobalSurface: '#121214',
-  darkGlobalSurface: '#fcfbff',
-  overlayGlobalSurface: '#ffffff',
-  // On Surface
-  onDefaultGlobalSurface: '#ffffff',
-  mutedOnDefaultGlobalSurface: '#a9a9b2',
-  inactiveOnDefaultGlobalSurface: '#71717a',
-  disabledOnDefaultGlobalSurface: '#52525b',
-  onDarkGlobalSurface: '#121214',
-  // Outline:
-  primaryOutline: '#a9a9b2',
-  secondaryOutline: '#3f3f46',
-  inactiveOutline: '#71717a',
-  disabledOutline: '#52525b',
-  // Archived:
-  archivedSurface: '#52525b',
-  mutedArchived: '#3f3f46',
-  archived: '#71717a',
-  onArchivedSurface: '#a9a9b2',
-  // Error:
-  errorSurface: '#7a1d06',
-  mutedError: '#9b2508',
-  error: '#bd2d09',
-  onErrorSurface: '#fecfca',
-  // Warning:
-  warningSurface: '#963e03',
-  mutedWarning: '#c35004',
-  warning: '#dc6204',
-  onWarningSurface: '#fff0d5',
-  // Success:
-  successSurface: '#00483e',
-  mutedSuccess: '#016256',
-  success: '#017d6d',
-  onSuccessSurface: '#a7f3e9',
-  // Info:
-  infoSurface: '#004a61',
-  mutedInfo: '#006585',
-  info: '#007da3',
-  onInfoSurface: '#a0e8ff',
-  // Brand:
-  primary: '#cdacfe',
-  onPrimary: '#fdfbff',
-  secondary: '#7622d7',
-  onSecondary: '#ffffff',
-  defaultSurface: '#fdfbff',
-  highlightedSurface: '#460078',
-  pressedSurface: '#9a58fc',
-  decorativePrimary: '#fdfbff',
-  decorativePrimarySurface: '#74409a',
-  decorativeSecondary: '#fdfbff',
-  decorativeSecondarySurface: '#f0e6ff'
-};
-
 var BASE_WIDTH = 390; // Based on iPhone 13's viewport size
 var horizontalScale = function horizontalScale(size) {
   if (Platform.OS === 'web') {
@@ -2725,12 +2670,14 @@ var getCardTheme = function getCardTheme(theme) {
   var colors = {
     dataCardIndicator: theme.colors.primary,
     primary: theme.colors.primary,
+    secondary: theme.colors.highlightedSurface,
     info: theme.colors.info,
     success: theme.colors.success,
     warning: theme.colors.warning,
     danger: theme.colors.error,
     archived: theme.colors.archived,
-    neutral: theme.colors.neutralGlobalSurface
+    neutral: theme.colors.neutralGlobalSurface,
+    dataCardBackground: theme.colors.neutralGlobalSurface
   };
   var sizes = {
     indicatorWidth: theme.sizes.medium
@@ -3099,6 +3046,7 @@ var getIconTheme = function getIconTheme(theme) {
     muted: theme.colors.mutedOnDefaultGlobalSurface
   };
   var sizes = {
+    xxxsmall: theme.fontSizes.small,
     xsmall: theme.fontSizes.large,
     small: theme.fontSizes.xxlarge,
     medium: theme.fontSizes.xxxlarge,
@@ -4245,9 +4193,11 @@ var getAppCueTheme = function getAppCueTheme(theme) {
 
 var getTheme$1 = function getTheme() {
   var scale = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : scale$1;
-  var systemPallete = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : ehWorkDarkSystemPalette;
+  var systemPallete = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : swagSystemPalette$1;
   var globalTheme = getGlobalTheme(scale, systemPallete);
-  return _objectSpread2(_objectSpread2({}, globalTheme), {}, {
+  return _objectSpread2(_objectSpread2({
+    themeMode: systemPallete.themeMode
+  }, globalTheme), {}, {
     __hd__: {
       accordion: getAccordionTheme(globalTheme),
       alert: getAlertTheme(globalTheme),
@@ -5485,9 +5435,7 @@ var ThemeSwitcher = function ThemeSwitcher(_ref) {
       case 'swagDark':
         return getTheme$1(scale$1, swagDarkSystemPalette);
       case 'swagLight':
-        return getTheme$1(scale$1, ehWorkDarkSystemPalette);
-      case 'ehWorkDark':
-        return getTheme$1(scale$1, ehWorkDarkSystemPalette);
+        return getTheme$1(scale$1, swagSystemPalette);
     }
   }, [name]);
   return /*#__PURE__*/React__default.createElement(ThemeProvider, {
@@ -13332,6 +13280,7 @@ var CalendarRange = function CalendarRange(_ref) {
       isCurrentMonth: false
     });
   })), Platform.OS === 'android' && monthPickerVisible && /*#__PURE__*/React__default.createElement(MonthYearPickerDialogueAndroid, {
+    themeVariant: theme.themeMode === 'dark' ? 'dark' : 'light',
     doneButtonLabel: monthPickerConfirmLabel,
     cancelButtonLabel: monthPickerCancelLabel,
     value: value === null || value === void 0 ? void 0 : value.startDate,
@@ -13467,6 +13416,7 @@ var Calendar = function Calendar(_ref) {
     minimumDate: minDate,
     maximumDate: maxDate,
     onChange: onMonthChange,
+    textColor: theme.colors.onDefaultGlobalSurface,
     style: {
       height: contentHeight + theme.__hd__.calendar.space.iosPickerMarginVertical * 2,
       marginVertical: -theme.__hd__.calendar.space.iosPickerMarginVertical,
@@ -13530,6 +13480,7 @@ var Calendar = function Calendar(_ref) {
       testID: "calendar-disabled-cell"
     });
   })), Platform.OS === 'android' && monthPickerVisible && /*#__PURE__*/React__default.createElement(MonthYearPickerDialogueAndroid, {
+    themeVariant: theme.themeMode === 'dark' ? 'dark' : 'light',
     doneButtonLabel: monthPickerConfirmLabel,
     cancelButtonLabel: monthPickerCancelLabel,
     value: value,
@@ -13553,7 +13504,8 @@ var StyledDataCard = index$a(View)(function (_ref) {
   return {
     borderRadius: theme.__hd__.card.radii["default"],
     overflow: 'hidden',
-    flexDirection: 'row'
+    flexDirection: 'row',
+    backgroundColor: theme.__hd__.card.colors.dataCardBackground
   };
 });
 var Indicator = index$a(View)(function (_ref2) {
@@ -13871,6 +13823,7 @@ var Image = function Image(_ref) {
     testID = _ref.testID,
     style = _ref.style,
     imageNativeProps = _objectWithoutProperties(_ref, _excluded$u);
+  useDeprecation('Image component will soon be deprecated. Please use `Image` from `react-native` instead.');
   var theme = useTheme();
   var imageSize = theme.__hd__.image.sizes[size];
   return /*#__PURE__*/React__default.createElement(Image$1, _extends$1({
@@ -14901,6 +14854,7 @@ var DatePickerAndroid = function DatePickerAndroid(_ref) {
     onChange: _onChange,
     value: value
   });
+  var theme = useTheme();
   return /*#__PURE__*/React__default.createElement(TouchableOpacity, {
     onPress: function onPress() {
       return setOpen(true);
@@ -14921,6 +14875,7 @@ var DatePickerAndroid = function DatePickerAndroid(_ref) {
     style: style,
     testID: testID
   })), open && variant === 'month-year' ? /*#__PURE__*/React__default.createElement(MonthYearPickerDialogueAndroid, {
+    themeVariant: theme.themeMode === 'dark' ? 'dark' : 'light',
     value: value,
     minimumDate: minDate,
     maximumDate: maxDate,
@@ -15165,6 +15120,7 @@ var DatePickerIOS = function DatePickerIOS(_ref) {
     value: value,
     locale: locale,
     minimumDate: minDate,
+    textColor: theme.colors.onDefaultGlobalSurface,
     maximumDate: maxDate,
     onChange: function onChange(date) {
       if (date) {
@@ -40404,4 +40360,4 @@ var FloatingIsland = function FloatingIsland(_ref2) {
   }));
 };
 
-export { Accordion, Alert, AppCue, Attachment, index$9 as Avatar, Badge$1 as Badge, BottomNavigation, BottomSheet$1 as BottomSheet, Box, CompoundButton as Button, Calendar$1 as Calendar, Card$1 as Card, index$8 as Carousel, Checkbox, Chip, Collapse, ContentNavigator, DatePicker, Divider, index$7 as Drawer, Empty, ErrorComponent as Error, FAB, FlatListWithFAB, FloatingIsland, HeroDesignProvider, Icon, Image, List, index$6 as MapPin, PageControl, PinInput, Portal$1 as Portal, Progress, CompoundRadio as Radio, Rate, RefreshControl, index as RichTextEditor, ScrollViewWithFAB, Search, SectionHeading, SectionListWithFAB, index$4 as Select, Skeleton, Slider, Spinner, Success, index$5 as Swipeable, index$3 as Switch, index$2 as Tabs, Tag, TextInput, ThemeProvider, ThemeSwitcher, TimePicker, Toast, index$1 as Toolbar, Typography, eBensSystemPalette, ehWorkDarkSystemPalette, getTheme$1 as getTheme, jobsSystemPalette, scale, swagDarkSystemPalette, swagLightJobsSystemPalette, swagSystemPalette as swagLightSystemPalette, swagSystemPalette$1 as swagSystemPalette, defaultTheme as theme, useAvatarColors, useTheme, walletSystemPalette, withTheme, workSystemPalette };
+export { Accordion, Alert, AppCue, Attachment, index$9 as Avatar, Badge$1 as Badge, BottomNavigation, BottomSheet$1 as BottomSheet, Box, CompoundButton as Button, Calendar$1 as Calendar, Card$1 as Card, index$8 as Carousel, Checkbox, Chip, Collapse, ContentNavigator, DatePicker, Divider, index$7 as Drawer, Empty, ErrorComponent as Error, FAB, FlatListWithFAB, FloatingIsland, HeroDesignProvider, Icon, Image, List, index$6 as MapPin, PageControl, PinInput, Portal$1 as Portal, Progress, CompoundRadio as Radio, Rate, RefreshControl, index as RichTextEditor, ScrollViewWithFAB, Search, SectionHeading, SectionListWithFAB, index$4 as Select, Skeleton, Slider, Spinner, Success, index$5 as Swipeable, index$3 as Switch, index$2 as Tabs, Tag, TextInput, ThemeProvider, ThemeSwitcher, TimePicker, Toast, index$1 as Toolbar, Typography, eBensSystemPalette, getTheme$1 as getTheme, jobsSystemPalette, scale, swagDarkSystemPalette, swagLightJobsSystemPalette, swagSystemPalette as swagLightSystemPalette, swagSystemPalette$1 as swagSystemPalette, defaultTheme as theme, useAvatarColors, useTheme, walletSystemPalette, withTheme, workSystemPalette };

package/lib/index.js

@@ -2007,7 +2007,10 @@ var swagDarkBrandSystemPalette = {
   decorativePrimary: palette$2.maasstrichtBlue,
   decorativePrimarySurface: palette$2.maasstrichtBlueLight10
 };
-var swagDarkSystemPalette = _objectSpread2(_objectSpread2({}, globalPalette), swagDarkBrandSystemPalette);
+var swagDarkSystemPalette = _objectSpread2(_objectSpread2(_objectSpread2({}, globalPalette), swagDarkBrandSystemPalette), {}, {
+  // Theme Mode
+  themeMode: 'dark'
+});
 
 var swagLightGlobalPalette = _objectSpread2(_objectSpread2({}, globalPalette$1), {}, {
   onDefaultGlobalSurface: palette$3.offBlack,
@@ -2090,64 +2093,6 @@ var eBensBrandSystemPallete = {
 };
 var eBensSystemPalette = _objectSpread2(_objectSpread2({}, swagSystemPalette$1), eBensBrandSystemPallete);
 
-var ehWorkDarkSystemPalette = {
-  black: '#000000',
-  white: '#ffffff',
-  // Surface
-  defaultGlobalSurface: '#27272A',
-  neutralGlobalSurface: '#121214',
-  darkGlobalSurface: '#fcfbff',
-  overlayGlobalSurface: '#ffffff',
-  // On Surface
-  onDefaultGlobalSurface: '#ffffff',
-  mutedOnDefaultGlobalSurface: '#a9a9b2',
-  inactiveOnDefaultGlobalSurface: '#71717a',
-  disabledOnDefaultGlobalSurface: '#52525b',
-  onDarkGlobalSurface: '#121214',
-  // Outline:
-  primaryOutline: '#a9a9b2',
-  secondaryOutline: '#3f3f46',
-  inactiveOutline: '#71717a',
-  disabledOutline: '#52525b',
-  // Archived:
-  archivedSurface: '#52525b',
-  mutedArchived: '#3f3f46',
-  archived: '#71717a',
-  onArchivedSurface: '#a9a9b2',
-  // Error:
-  errorSurface: '#7a1d06',
-  mutedError: '#9b2508',
-  error: '#bd2d09',
-  onErrorSurface: '#fecfca',
-  // Warning:
-  warningSurface: '#963e03',
-  mutedWarning: '#c35004',
-  warning: '#dc6204',
-  onWarningSurface: '#fff0d5',
-  // Success:
-  successSurface: '#00483e',
-  mutedSuccess: '#016256',
-  success: '#017d6d',
-  onSuccessSurface: '#a7f3e9',
-  // Info:
-  infoSurface: '#004a61',
-  mutedInfo: '#006585',
-  info: '#007da3',
-  onInfoSurface: '#a0e8ff',
-  // Brand:
-  primary: '#cdacfe',
-  onPrimary: '#fdfbff',
-  secondary: '#7622d7',
-  onSecondary: '#ffffff',
-  defaultSurface: '#fdfbff',
-  highlightedSurface: '#460078',
-  pressedSurface: '#9a58fc',
-  decorativePrimary: '#fdfbff',
-  decorativePrimarySurface: '#74409a',
-  decorativeSecondary: '#fdfbff',
-  decorativeSecondarySurface: '#f0e6ff'
-};
-
 var BASE_WIDTH = 390; // Based on iPhone 13's viewport size
 var horizontalScale = function horizontalScale(size) {
   if (reactNative.Platform.OS === 'web') {
@@ -2753,12 +2698,14 @@ var getCardTheme = function getCardTheme(theme) {
   var colors = {
     dataCardIndicator: theme.colors.primary,
     primary: theme.colors.primary,
+    secondary: theme.colors.highlightedSurface,
     info: theme.colors.info,
     success: theme.colors.success,
     warning: theme.colors.warning,
     danger: theme.colors.error,
     archived: theme.colors.archived,
-    neutral: theme.colors.neutralGlobalSurface
+    neutral: theme.colors.neutralGlobalSurface,
+    dataCardBackground: theme.colors.neutralGlobalSurface
   };
   var sizes = {
     indicatorWidth: theme.sizes.medium
@@ -3127,6 +3074,7 @@ var getIconTheme = function getIconTheme(theme) {
     muted: theme.colors.mutedOnDefaultGlobalSurface
   };
   var sizes = {
+    xxxsmall: theme.fontSizes.small,
     xsmall: theme.fontSizes.large,
     small: theme.fontSizes.xxlarge,
     medium: theme.fontSizes.xxxlarge,
@@ -4273,9 +4221,11 @@ var getAppCueTheme = function getAppCueTheme(theme) {
 
 var getTheme$1 = function getTheme() {
   var scale = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : scale$1;
-  var systemPallete = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : ehWorkDarkSystemPalette;
+  var systemPallete = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : swagSystemPalette$1;
   var globalTheme = getGlobalTheme(scale, systemPallete);
-  return _objectSpread2(_objectSpread2({}, globalTheme), {}, {
+  return _objectSpread2(_objectSpread2({
+    themeMode: systemPallete.themeMode
+  }, globalTheme), {}, {
     __hd__: {
       accordion: getAccordionTheme(globalTheme),
       alert: getAlertTheme(globalTheme),
@@ -5513,9 +5463,7 @@ var ThemeSwitcher = function ThemeSwitcher(_ref) {
       case 'swagDark':
         return getTheme$1(scale$1, swagDarkSystemPalette);
       case 'swagLight':
-        return getTheme$1(scale$1, ehWorkDarkSystemPalette);
-      case 'ehWorkDark':
-        return getTheme$1(scale$1, ehWorkDarkSystemPalette);
+        return getTheme$1(scale$1, swagSystemPalette);
     }
   }, [name]);
   return /*#__PURE__*/React__namespace.default.createElement(ThemeProvider, {
@@ -13360,6 +13308,7 @@ var CalendarRange = function CalendarRange(_ref) {
       isCurrentMonth: false
     });
   })), reactNative.Platform.OS === 'android' && monthPickerVisible && /*#__PURE__*/React__namespace.default.createElement(reactNativeMonthYearPicker.MonthYearPickerDialogueAndroid, {
+    themeVariant: theme.themeMode === 'dark' ? 'dark' : 'light',
     doneButtonLabel: monthPickerConfirmLabel,
     cancelButtonLabel: monthPickerCancelLabel,
     value: value === null || value === void 0 ? void 0 : value.startDate,
@@ -13495,6 +13444,7 @@ var Calendar = function Calendar(_ref) {
     minimumDate: minDate,
     maximumDate: maxDate,
     onChange: onMonthChange,
+    textColor: theme.colors.onDefaultGlobalSurface,
     style: {
       height: contentHeight + theme.__hd__.calendar.space.iosPickerMarginVertical * 2,
       marginVertical: -theme.__hd__.calendar.space.iosPickerMarginVertical,
@@ -13558,6 +13508,7 @@ var Calendar = function Calendar(_ref) {
       testID: "calendar-disabled-cell"
     });
   })), reactNative.Platform.OS === 'android' && monthPickerVisible && /*#__PURE__*/React__namespace.default.createElement(reactNativeMonthYearPicker.MonthYearPickerDialogueAndroid, {
+    themeVariant: theme.themeMode === 'dark' ? 'dark' : 'light',
     doneButtonLabel: monthPickerConfirmLabel,
     cancelButtonLabel: monthPickerCancelLabel,
     value: value,
@@ -13581,7 +13532,8 @@ var StyledDataCard = index$a(reactNative.View)(function (_ref) {
   return {
     borderRadius: theme.__hd__.card.radii["default"],
     overflow: 'hidden',
-    flexDirection: 'row'
+    flexDirection: 'row',
+    backgroundColor: theme.__hd__.card.colors.dataCardBackground
   };
 });
 var Indicator = index$a(reactNative.View)(function (_ref2) {
@@ -13899,6 +13851,7 @@ var Image = function Image(_ref) {
     testID = _ref.testID,
     style = _ref.style,
     imageNativeProps = _objectWithoutProperties(_ref, _excluded$u);
+  useDeprecation('Image component will soon be deprecated. Please use `Image` from `react-native` instead.');
   var theme = useTheme();
   var imageSize = theme.__hd__.image.sizes[size];
   return /*#__PURE__*/React__namespace.default.createElement(reactNative.Image, _extends$1({
@@ -14929,6 +14882,7 @@ var DatePickerAndroid = function DatePickerAndroid(_ref) {
     onChange: _onChange,
     value: value
   });
+  var theme = useTheme();
   return /*#__PURE__*/React__namespace.default.createElement(reactNative.TouchableOpacity, {
     onPress: function onPress() {
       return setOpen(true);
@@ -14949,6 +14903,7 @@ var DatePickerAndroid = function DatePickerAndroid(_ref) {
     style: style,
     testID: testID
   })), open && variant === 'month-year' ? /*#__PURE__*/React__namespace.default.createElement(reactNativeMonthYearPicker.MonthYearPickerDialogueAndroid, {
+    themeVariant: theme.themeMode === 'dark' ? 'dark' : 'light',
     value: value,
     minimumDate: minDate,
     maximumDate: maxDate,
@@ -15193,6 +15148,7 @@ var DatePickerIOS = function DatePickerIOS(_ref) {
     value: value,
     locale: locale,
     minimumDate: minDate,
+    textColor: theme.colors.onDefaultGlobalSurface,
     maximumDate: maxDate,
     onChange: function onChange(date) {
       if (date) {
@@ -40491,7 +40447,6 @@ exports.Toast = Toast;
 exports.Toolbar = index$1;
 exports.Typography = Typography;
 exports.eBensSystemPalette = eBensSystemPalette;
-exports.ehWorkDarkSystemPalette = ehWorkDarkSystemPalette;
 exports.getTheme = getTheme$1;
 exports.jobsSystemPalette = jobsSystemPalette;
 exports.scale = scale;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hero-design/rn",
-  "version": "8.89.0-alpha.4",
+  "version": "8.90.1",
   "license": "MIT",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -28,7 +28,7 @@
     "nanoid": "^5.0.9"
   },
   "peerDependencies": {
-    "@hero-design/react-native-month-year-picker": "^8.42.11",
+    "@hero-design/react-native-month-year-picker": "^8.43.1",
     "@ptomasroos/react-native-multi-slider": "^2.2.2",
     "@react-native-community/datetimepicker": "^3.5.2 || ^7.6.1",
     "@react-native-community/slider": "^4.5.1",
@@ -52,7 +52,7 @@
     "@eslint/eslintrc": "^3.1.0",
     "@eslint/js": "^9.8.0",
     "@hero-design/eslint-plugin": "9.2.0",
-    "@hero-design/react-native-month-year-picker": "^8.42.11",
+    "@hero-design/react-native-month-year-picker": "^8.43.1",
     "@ptomasroos/react-native-multi-slider": "^2.2.2",
     "@react-native-community/datetimepicker": "7.6.1",
     "@react-native-community/slider": "^4.5.1",

package/src/components/Calendar/CalendarRange.tsx

@@ -313,6 +313,7 @@ const CalendarRange = ({
 
           {Platform.OS === 'android' && monthPickerVisible && (
             <MonthYearPickerDialogueAndroid
+              themeVariant={theme.themeMode === 'dark' ? 'dark' : 'light'}
               doneButtonLabel={monthPickerConfirmLabel}
               cancelButtonLabel={monthPickerCancelLabel}
               value={value?.startDate}

package/src/components/Calendar/index.tsx

@@ -252,6 +252,7 @@ const Calendar = ({
             minimumDate={minDate}
             maximumDate={maxDate}
             onChange={onMonthChange}
+            textColor={theme.colors.onDefaultGlobalSurface}
             style={{
               height:
                 contentHeight +
@@ -334,6 +335,7 @@ const Calendar = ({
 
           {Platform.OS === 'android' && monthPickerVisible && (
             <MonthYearPickerDialogueAndroid
+              themeVariant={theme.themeMode === 'dark' ? 'dark' : 'light'}
               doneButtonLabel={monthPickerConfirmLabel}
               cancelButtonLabel={monthPickerCancelLabel}
               value={value}

package/src/components/Card/DataCard/StyledDataCard.tsx

@@ -5,6 +5,7 @@ const StyledDataCard = styled(View)(({ theme }) => ({
   borderRadius: theme.__hd__.card.radii.default,
   overflow: 'hidden',
   flexDirection: 'row',
+  backgroundColor: theme.__hd__.card.colors.dataCardBackground,
 }));
 
 const Indicator = styled(View)<{

package/src/components/Card/DataCard/__tests__/__snapshots__/StyledDataCard.spec.tsx.snap

@@ -276,6 +276,7 @@ exports[`StyledDataCard renders correctly 1`] = `
     style={
       [
         {
+          "backgroundColor": "#f6f6f7",
           "borderRadius": 12,
           "flexDirection": "row",
           "overflow": "hidden",

package/src/components/Card/DataCard/__tests__/__snapshots__/index.spec.tsx.snap

@@ -12,6 +12,7 @@ exports[`DataCard renders correctly when intent is archived 1`] = `
     style={
       [
         {
+          "backgroundColor": "#f6f6f7",
           "borderRadius": 12,
           "flexDirection": "row",
           "overflow": "hidden",
@@ -70,6 +71,7 @@ exports[`DataCard renders correctly when intent is danger 1`] = `
     style={
       [
         {
+          "backgroundColor": "#f6f6f7",
           "borderRadius": 12,
           "flexDirection": "row",
           "overflow": "hidden",
@@ -128,6 +130,7 @@ exports[`DataCard renders correctly when intent is info 1`] = `
     style={
       [
         {
+          "backgroundColor": "#f6f6f7",
           "borderRadius": 12,
           "flexDirection": "row",
           "overflow": "hidden",
@@ -186,6 +189,7 @@ exports[`DataCard renders correctly when intent is success 1`] = `
     style={
       [
         {
+          "backgroundColor": "#f6f6f7",
           "borderRadius": 12,
           "flexDirection": "row",
           "overflow": "hidden",
@@ -244,6 +248,7 @@ exports[`DataCard renders correctly when intent is warning 1`] = `
     style={
       [
         {
+          "backgroundColor": "#f6f6f7",
           "borderRadius": 12,
           "flexDirection": "row",
           "overflow": "hidden",

package/src/components/Card/StyledCard.tsx

@@ -4,6 +4,7 @@ import styled from '@emotion/native';
 const StyledCard = styled(View)<{
   themeIntent?:
     | 'primary'
+    | 'secondary'
     | 'success'
     | 'warning'
     | 'danger'