@hero-design/rn 8.89.0 → 8.91.0-alpha.0

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,
@@ -1998,7 +2001,9 @@ var swagBrandSystemPallete = {
   highlightedSurface: palette$3.violetLight90,
   pressedSurface: '#380060',
   decorativePrimary: '#fdfbff',
-  decorativePrimarySurface: '#dacce4'
+  decorativePrimarySurface: '#dacce4',
+  decorativeSecondary: '#fdfbff',
+  decorativeSecondarySurface: '#f0e6ff'
 };
 var swagSystemPalette = _objectSpread2(_objectSpread2({}, swagLightGlobalPalette), swagBrandSystemPallete);
 
@@ -2062,6 +2067,66 @@ 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: '#d4d4d8',
+  // Error:
+  errorSurface: '#7a1d06',
+  mutedError: '#9b2508',
+  error: '#bd2d09',
+  onErrorSurface: '#fcaea5',
+  // Warning:
+  warningSurface: '#963e03',
+  mutedWarning: '#c35004',
+  warning: '#dc6204',
+  onWarningSurface: '#ffe7bf',
+  // Success:
+  successSurface: '#00483e',
+  mutedSuccess: '#016256',
+  success: '#017d6d',
+  onSuccessSurface: '#6ee7d7',
+  // Info:
+  infoSurface: '#004a61',
+  mutedInfo: '#006585',
+  info: '#007da3',
+  onInfoSurface: '#70ddff',
+  // Brand:
+  primary: '#cdacfe',
+  onPrimary: '#280541',
+  secondary: '#7622d7',
+  onSecondary: '#ffffff',
+  defaultSurface: '#280541',
+  highlightedSurface: '#460078',
+  pressedSurface: '#9a58fc',
+  decorativePrimary: '#280541',
+  decorativePrimarySurface: '#74409a',
+  decorativeSecondary: '#280541',
+  decorativeSecondarySurface: '#4c1d95',
+  // Theme Mode
+  themeMode: 'dark'
+};
+
 var BASE_WIDTH = 390; // Based on iPhone 13's viewport size
 var horizontalScale = function horizontalScale(size) {
   if (Platform.OS === 'web') {
@@ -2322,7 +2387,7 @@ var getAlertTheme = function getAlertTheme(theme) {
 
 var getAttachmentTheme = function getAttachmentTheme(theme) {
   var colors = {
-    highlightedBackground: theme.colors.highlightedSurface
+    highlightedBackground: theme.colors.decorativeSecondarySurface
   };
   var sizes = {
     imageHeight: theme.sizes.xxxlarge,
@@ -2667,12 +2732,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
@@ -2936,7 +3003,7 @@ var getErrorTheme = function getErrorTheme(theme) {
   var colors = {
     title: theme.colors.onDefaultGlobalSurface,
     description: theme.colors.mutedOnDefaultGlobalSurface,
-    fullScreenBackground: theme.colors.decorativePrimarySurface,
+    fullScreenBackground: theme.colors.defaultGlobalSurface,
     inPageBackground: theme.colors.neutralGlobalSurface
   };
   var fontSizes = {
@@ -3041,6 +3108,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,
@@ -3065,7 +3133,7 @@ var getImageTheme = function getImageTheme(theme) {
 
 var getListTheme = function getListTheme(theme) {
   var colors = {
-    checkedListItemContainerBackground: theme.colors.highlightedSurface,
+    checkedListItemContainerBackground: theme.colors.decorativeSecondarySurface,
     listItemContainerBackground: theme.colors.defaultGlobalSurface,
     leadingStatus: {
       danger: theme.colors.error,
@@ -3471,7 +3539,7 @@ var getSuccessTheme = function getSuccessTheme(theme) {
   var colors = {
     title: theme.colors.onDefaultGlobalSurface,
     description: theme.colors.mutedOnDefaultGlobalSurface,
-    fullScreenBackground: theme.colors.decorativePrimarySurface,
+    fullScreenBackground: theme.colors.defaultGlobalSurface,
     inPageBackground: theme.colors.neutralGlobalSurface
   };
   var fontSizes = {
@@ -3804,8 +3872,7 @@ var getToolbarTheme = function getToolbarTheme(theme) {
     secondary: theme.colors.mutedOnDefaultGlobalSurface,
     info: theme.colors.info,
     success: theme.colors.success,
-    danger: theme.colors.warning,
-    error: theme.colors.error,
+    danger: theme.colors.onErrorSurface,
     disabled: theme.colors.disabledOnDefaultGlobalSurface,
     iconButtonBackground: theme.colors.highlightedSurface,
     inputContainerBackground: theme.colors.neutralGlobalSurface
@@ -4189,7 +4256,9 @@ 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] : 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),
@@ -5428,6 +5497,8 @@ var ThemeSwitcher = function ThemeSwitcher(_ref) {
         return getTheme$1(scale$1, swagDarkSystemPalette);
       case 'swagLight':
         return getTheme$1(scale$1, swagSystemPalette);
+      case 'ehWorkDark':
+        return getTheme$1(scale$1, ehWorkDarkSystemPalette);
     }
   }, [name]);
   return /*#__PURE__*/React__default.createElement(ThemeProvider, {
@@ -13272,6 +13343,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,
@@ -13407,6 +13479,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,
@@ -13470,6 +13543,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,
@@ -13493,7 +13567,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) {
@@ -13811,6 +13886,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({
@@ -14767,7 +14843,7 @@ var TextInput = /*#__PURE__*/forwardRef(function (_ref8, ref) {
     },
     themeState: state,
     testID: "input-label-asterisk"
-  }, "*"), label)), /*#__PURE__*/React__default.createElement(StyledTextInputAndLabelContainer, null, renderInput$1({
+  }, "*"), /*#__PURE__*/React__default.createElement(Typography.Body, null, label))), /*#__PURE__*/React__default.createElement(StyledTextInputAndLabelContainer, null, renderInput$1({
     variant: variant,
     nativeInputProps: nativeInputProps,
     renderInputValue: renderInputValue,
@@ -14841,6 +14917,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);
@@ -14861,6 +14938,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,
@@ -15105,6 +15183,7 @@ var DatePickerIOS = function DatePickerIOS(_ref) {
     value: value,
     locale: locale,
     minimumDate: minDate,
+    textColor: theme.colors.onDefaultGlobalSurface,
     maximumDate: maxDate,
     onChange: function onChange(date) {
       if (date) {
@@ -39735,7 +39814,7 @@ var RichTextEditor = function RichTextEditor(_ref) {
       backgroundColor: theme.__hd__.textInput.colors.labelBackground
     },
     themeState: state
-  }, "*"), label)), /*#__PURE__*/React__default.createElement(StyledTextInputContainer, {
+  }, "*"), /*#__PURE__*/React__default.createElement(Typography.Body, null, label))), /*#__PURE__*/React__default.createElement(StyledTextInputContainer, {
     onLayout: onLayout
   }, /*#__PURE__*/React__default.createElement(StyledBorderBackDrop, {
     themeState: state,
@@ -40344,4 +40423,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, 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, ehWorkDarkSystemPalette, 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,
@@ -2026,7 +2029,9 @@ var swagBrandSystemPallete = {
   highlightedSurface: palette$3.violetLight90,
   pressedSurface: '#380060',
   decorativePrimary: '#fdfbff',
-  decorativePrimarySurface: '#dacce4'
+  decorativePrimarySurface: '#dacce4',
+  decorativeSecondary: '#fdfbff',
+  decorativeSecondarySurface: '#f0e6ff'
 };
 var swagSystemPalette = _objectSpread2(_objectSpread2({}, swagLightGlobalPalette), swagBrandSystemPallete);
 
@@ -2090,6 +2095,66 @@ 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: '#d4d4d8',
+  // Error:
+  errorSurface: '#7a1d06',
+  mutedError: '#9b2508',
+  error: '#bd2d09',
+  onErrorSurface: '#fcaea5',
+  // Warning:
+  warningSurface: '#963e03',
+  mutedWarning: '#c35004',
+  warning: '#dc6204',
+  onWarningSurface: '#ffe7bf',
+  // Success:
+  successSurface: '#00483e',
+  mutedSuccess: '#016256',
+  success: '#017d6d',
+  onSuccessSurface: '#6ee7d7',
+  // Info:
+  infoSurface: '#004a61',
+  mutedInfo: '#006585',
+  info: '#007da3',
+  onInfoSurface: '#70ddff',
+  // Brand:
+  primary: '#cdacfe',
+  onPrimary: '#280541',
+  secondary: '#7622d7',
+  onSecondary: '#ffffff',
+  defaultSurface: '#280541',
+  highlightedSurface: '#460078',
+  pressedSurface: '#9a58fc',
+  decorativePrimary: '#280541',
+  decorativePrimarySurface: '#74409a',
+  decorativeSecondary: '#280541',
+  decorativeSecondarySurface: '#4c1d95',
+  // Theme Mode
+  themeMode: 'dark'
+};
+
 var BASE_WIDTH = 390; // Based on iPhone 13's viewport size
 var horizontalScale = function horizontalScale(size) {
   if (reactNative.Platform.OS === 'web') {
@@ -2350,7 +2415,7 @@ var getAlertTheme = function getAlertTheme(theme) {
 
 var getAttachmentTheme = function getAttachmentTheme(theme) {
   var colors = {
-    highlightedBackground: theme.colors.highlightedSurface
+    highlightedBackground: theme.colors.decorativeSecondarySurface
   };
   var sizes = {
     imageHeight: theme.sizes.xxxlarge,
@@ -2695,12 +2760,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
@@ -2964,7 +3031,7 @@ var getErrorTheme = function getErrorTheme(theme) {
   var colors = {
     title: theme.colors.onDefaultGlobalSurface,
     description: theme.colors.mutedOnDefaultGlobalSurface,
-    fullScreenBackground: theme.colors.decorativePrimarySurface,
+    fullScreenBackground: theme.colors.defaultGlobalSurface,
     inPageBackground: theme.colors.neutralGlobalSurface
   };
   var fontSizes = {
@@ -3069,6 +3136,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,
@@ -3093,7 +3161,7 @@ var getImageTheme = function getImageTheme(theme) {
 
 var getListTheme = function getListTheme(theme) {
   var colors = {
-    checkedListItemContainerBackground: theme.colors.highlightedSurface,
+    checkedListItemContainerBackground: theme.colors.decorativeSecondarySurface,
     listItemContainerBackground: theme.colors.defaultGlobalSurface,
     leadingStatus: {
       danger: theme.colors.error,
@@ -3499,7 +3567,7 @@ var getSuccessTheme = function getSuccessTheme(theme) {
   var colors = {
     title: theme.colors.onDefaultGlobalSurface,
     description: theme.colors.mutedOnDefaultGlobalSurface,
-    fullScreenBackground: theme.colors.decorativePrimarySurface,
+    fullScreenBackground: theme.colors.defaultGlobalSurface,
     inPageBackground: theme.colors.neutralGlobalSurface
   };
   var fontSizes = {
@@ -3832,8 +3900,7 @@ var getToolbarTheme = function getToolbarTheme(theme) {
     secondary: theme.colors.mutedOnDefaultGlobalSurface,
     info: theme.colors.info,
     success: theme.colors.success,
-    danger: theme.colors.warning,
-    error: theme.colors.error,
+    danger: theme.colors.onErrorSurface,
     disabled: theme.colors.disabledOnDefaultGlobalSurface,
     iconButtonBackground: theme.colors.highlightedSurface,
     inputContainerBackground: theme.colors.neutralGlobalSurface
@@ -4217,7 +4284,9 @@ 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] : 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),
@@ -5456,6 +5525,8 @@ var ThemeSwitcher = function ThemeSwitcher(_ref) {
         return getTheme$1(scale$1, swagDarkSystemPalette);
       case 'swagLight':
         return getTheme$1(scale$1, swagSystemPalette);
+      case 'ehWorkDark':
+        return getTheme$1(scale$1, ehWorkDarkSystemPalette);
     }
   }, [name]);
   return /*#__PURE__*/React__namespace.default.createElement(ThemeProvider, {
@@ -13300,6 +13371,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,
@@ -13435,6 +13507,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,
@@ -13498,6 +13571,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,
@@ -13521,7 +13595,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) {
@@ -13839,6 +13914,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({
@@ -14795,7 +14871,7 @@ var TextInput = /*#__PURE__*/React.forwardRef(function (_ref8, ref) {
     },
     themeState: state,
     testID: "input-label-asterisk"
-  }, "*"), label)), /*#__PURE__*/React__namespace.default.createElement(StyledTextInputAndLabelContainer, null, renderInput$1({
+  }, "*"), /*#__PURE__*/React__namespace.default.createElement(Typography.Body, null, label))), /*#__PURE__*/React__namespace.default.createElement(StyledTextInputAndLabelContainer, null, renderInput$1({
     variant: variant,
     nativeInputProps: nativeInputProps,
     renderInputValue: renderInputValue,
@@ -14869,6 +14945,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);
@@ -14889,6 +14966,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,
@@ -15133,6 +15211,7 @@ var DatePickerIOS = function DatePickerIOS(_ref) {
     value: value,
     locale: locale,
     minimumDate: minDate,
+    textColor: theme.colors.onDefaultGlobalSurface,
     maximumDate: maxDate,
     onChange: function onChange(date) {
       if (date) {
@@ -39763,7 +39842,7 @@ var RichTextEditor = function RichTextEditor(_ref) {
       backgroundColor: theme.__hd__.textInput.colors.labelBackground
     },
     themeState: state
-  }, "*"), label)), /*#__PURE__*/React__namespace.default.createElement(StyledTextInputContainer, {
+  }, "*"), /*#__PURE__*/React__namespace.default.createElement(Typography.Body, null, label))), /*#__PURE__*/React__namespace.default.createElement(StyledTextInputContainer, {
     onLayout: onLayout
   }, /*#__PURE__*/React__namespace.default.createElement(StyledBorderBackDrop, {
     themeState: state,
@@ -40431,6 +40510,7 @@ 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",
+  "version": "8.91.0-alpha.0",
   "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'