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

package/es/index.js

@@ -2001,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);
 
@@ -2065,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') {
@@ -2325,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,
@@ -2941,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 = {
@@ -3071,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,
@@ -3477,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 = {
@@ -3810,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
@@ -5436,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, {
@@ -14780,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,
@@ -39751,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,
@@ -40360,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

@@ -2029,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);
 
@@ -2093,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') {
@@ -2353,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,
@@ -2969,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 = {
@@ -3099,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,
@@ -3505,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 = {
@@ -3838,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
@@ -5464,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, {
@@ -14808,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,
@@ -39779,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,
@@ -40447,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.90.1",
+  "version": "8.91.0-alpha.0",
   "license": "MIT",
   "main": "lib/index.js",
   "module": "es/index.js",

package/src/components/DatePicker/__tests__/__snapshots__/DatePicker.spec.tsx.snap

@@ -162,7 +162,26 @@ exports[`DatePicker renders DatePickerAndroid when OS is android 1`] = `
               themeTypeface="neutral"
               themeVariant="regular"
             >
-              Start date
+              <Text
+                allowFontScaling={false}
+                style={
+                  [
+                    {
+                      "color": "#001f23",
+                      "fontFamily": "BeVietnamPro-Regular",
+                      "fontSize": 16,
+                      "letterSpacing": 0.48,
+                      "lineHeight": 24,
+                    },
+                    undefined,
+                  ]
+                }
+                themeIntent="body"
+                themeTypeface="neutral"
+                themeVariant="regular"
+              >
+                Start date
+              </Text>
             </Text>
           </View>
           <View
@@ -444,7 +463,26 @@ exports[`DatePicker renders DatePickerIOS when OS is iOS 1`] = `
               themeTypeface="neutral"
               themeVariant="regular"
             >
-              Start date
+              <Text
+                allowFontScaling={false}
+                style={
+                  [
+                    {
+                      "color": "#001f23",
+                      "fontFamily": "BeVietnamPro-Regular",
+                      "fontSize": 16,
+                      "letterSpacing": 0.48,
+                      "lineHeight": 24,
+                    },
+                    undefined,
+                  ]
+                }
+                themeIntent="body"
+                themeTypeface="neutral"
+                themeVariant="regular"
+              >
+                Start date
+              </Text>
             </Text>
           </View>
           <View
@@ -726,7 +764,26 @@ exports[`DatePicker renders variant Calendar 1`] = `
               themeTypeface="neutral"
               themeVariant="regular"
             >
-              Start date
+              <Text
+                allowFontScaling={false}
+                style={
+                  [
+                    {
+                      "color": "#001f23",
+                      "fontFamily": "BeVietnamPro-Regular",
+                      "fontSize": 16,
+                      "letterSpacing": 0.48,
+                      "lineHeight": 24,
+                    },
+                    undefined,
+                  ]
+                }
+                themeIntent="body"
+                themeTypeface="neutral"
+                themeVariant="regular"
+              >
+                Start date
+              </Text>
             </Text>
           </View>
           <View

package/src/components/DatePicker/__tests__/__snapshots__/DatePickerAndroid.spec.tsx.snap

@@ -162,7 +162,26 @@ exports[`DatePickerAndroid renders correctly 1`] = `
               themeTypeface="neutral"
               themeVariant="regular"
             >
-              Start date
+              <Text
+                allowFontScaling={false}
+                style={
+                  [
+                    {
+                      "color": "#001f23",
+                      "fontFamily": "BeVietnamPro-Regular",
+                      "fontSize": 16,
+                      "letterSpacing": 0.48,
+                      "lineHeight": 24,
+                    },
+                    undefined,
+                  ]
+                }
+                themeIntent="body"
+                themeTypeface="neutral"
+                themeVariant="regular"
+              >
+                Start date
+              </Text>
             </Text>
           </View>
           <View

package/src/components/DatePicker/__tests__/__snapshots__/DatePickerCalendar.spec.tsx.snap

@@ -162,7 +162,26 @@ exports[`DatePickerCalendar renders correctly 1`] = `
               themeTypeface="neutral"
               themeVariant="regular"
             >
-              Start date
+              <Text
+                allowFontScaling={false}
+                style={
+                  [
+                    {
+                      "color": "#001f23",
+                      "fontFamily": "BeVietnamPro-Regular",
+                      "fontSize": 16,
+                      "letterSpacing": 0.48,
+                      "lineHeight": 24,
+                    },
+                    undefined,
+                  ]
+                }
+                themeIntent="body"
+                themeTypeface="neutral"
+                themeVariant="regular"
+              >
+                Start date
+              </Text>
             </Text>
           </View>
           <View

package/src/components/DatePicker/__tests__/__snapshots__/DatePickerIOS.spec.tsx.snap

@@ -162,7 +162,26 @@ exports[`DatePickerIOS renders correctly 1`] = `
               themeTypeface="neutral"
               themeVariant="regular"
             >
-              Start date
+              <Text
+                allowFontScaling={false}
+                style={
+                  [
+                    {
+                      "color": "#001f23",
+                      "fontFamily": "BeVietnamPro-Regular",
+                      "fontSize": 16,
+                      "letterSpacing": 0.48,
+                      "lineHeight": 24,
+                    },
+                    undefined,
+                  ]
+                }
+                themeIntent="body"
+                themeTypeface="neutral"
+                themeVariant="regular"
+              >
+                Start date
+              </Text>
             </Text>
           </View>
           <View
@@ -831,7 +850,26 @@ exports[`DatePickerIOS renders correctly with custom locale 1`] = `
               themeTypeface="neutral"
               themeVariant="regular"
             >
-              Start date
+              <Text
+                allowFontScaling={false}
+                style={
+                  [
+                    {
+                      "color": "#001f23",
+                      "fontFamily": "BeVietnamPro-Regular",
+                      "fontSize": 16,
+                      "letterSpacing": 0.48,
+                      "lineHeight": 24,
+                    },
+                    undefined,
+                  ]
+                }
+                themeIntent="body"
+                themeTypeface="neutral"
+                themeVariant="regular"
+              >
+                Start date
+              </Text>
             </Text>
           </View>
           <View

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

@@ -344,7 +344,7 @@ exports[`Error renders full screen error page correctly 1`] = `
       style={
         [
           {
-            "backgroundColor": "#ccd2d3",
+            "backgroundColor": "#ffffff",
             "display": "flex",
             "flex": 1,
             "flexDirection": "column",

package/src/components/List/__tests__/__snapshots__/StyledBasicListItem.spec.tsx.snap

@@ -198,7 +198,7 @@ exports[`StyledListItemContainer renders correctly themeSelected true themeDisab
       [
         {
           "alignItems": "center",
-          "backgroundColor": "#ece8ef",
+          "backgroundColor": undefined,
           "borderRadius": 4,
           "flexDirection": "row",
           "opacity": 1,
@@ -282,7 +282,7 @@ exports[`StyledListItemContainer renders correctly themeSelected true themeDisab
       [
         {
           "alignItems": "center",
-          "backgroundColor": "#ece8ef",
+          "backgroundColor": undefined,
           "borderRadius": 4,
           "flexDirection": "row",
           "opacity": 0.38,

package/src/components/List/__tests__/__snapshots__/StyledListItem.spec.tsx.snap

@@ -428,7 +428,7 @@ exports[`ListItemContainer renders correctly themeSelected true themeVariant car
       [
         {
           "alignItems": "center",
-          "backgroundColor": "#ece8ef",
+          "backgroundColor": undefined,
           "borderRadius": 8,
           "elevation": 3,
           "flexDirection": "row",
@@ -518,7 +518,7 @@ exports[`ListItemContainer renders correctly themeSelected true themeVariant ful
     style={
       [
         {
-          "backgroundColor": "#ece8ef",
+          "backgroundColor": undefined,
           "borderRadius": 8,
           "flexDirection": "row",
           "padding": 16,

package/src/components/Radio/__tests__/__snapshots__/Radio.spec.tsx.snap

@@ -34,7 +34,7 @@ exports[`rendering renders correctly when checked with inactiveIntent=dark 1`] =
     style={
       [
         {
-          "backgroundColor": "#ece8ef",
+          "backgroundColor": undefined,
           "borderRadius": 8,
           "flexDirection": "row",
           "padding": 16,
@@ -201,7 +201,7 @@ exports[`rendering renders correctly when checked with inactiveIntent=light 1`]
     style={
       [
         {
-          "backgroundColor": "#ece8ef",
+          "backgroundColor": undefined,
           "borderRadius": 8,
           "flexDirection": "row",
           "padding": 16,

package/src/components/Radio/__tests__/__snapshots__/RadioGroup.spec.tsx.snap

@@ -299,7 +299,7 @@ exports[`rendering renders correctly with inactiveIntent=dark 1`] = `
       style={
         [
           {
-            "backgroundColor": "#ece8ef",
+            "backgroundColor": undefined,
             "borderRadius": 8,
             "flexDirection": "row",
             "padding": 16,
@@ -732,7 +732,7 @@ exports[`rendering renders correctly with inactiveIntent=light 1`] = `
       style={
         [
           {
-            "backgroundColor": "#ece8ef",
+            "backgroundColor": undefined,
             "borderRadius": 8,
             "flexDirection": "row",
             "padding": 16,

package/src/components/RichTextEditor/RichTextEditor.tsx

@@ -39,6 +39,7 @@ import { postMessage, requestBlurEditor } from './utils/rnWebView';
 import type { WebViewEventMessage } from './utils/rnWebView';
 import { LABEL_ANIMATION_DURATION } from '../TextInput';
 import { TextUnit } from './types';
+import Typography from '../Typography';
 
 export interface RichTextEditorRef {
   requestBlur: VoidFunction;
@@ -408,7 +409,7 @@ const RichTextEditor: ComponentType<RichTextEditorProps> = ({
                 *
               </StyledAsteriskLabelInsideTextInput>
             )}
-            {label}
+            <Typography.Body>{label}</Typography.Body>
           </StyledLabelInsideTextInput>
         )}
       </StyledLabelContainerInsideTextInput>

package/src/components/RichTextEditor/__tests__/__snapshots__/RichTextEditor.spec.tsx.snap

@@ -83,7 +83,26 @@ exports[`RichTextEditor onMessage recevied event editor-layout should update hei
         themeTypeface="neutral"
         themeVariant="regular"
       >
-        Rich Text Editor
+        <Text
+          allowFontScaling={false}
+          style={
+            [
+              {
+                "color": "#001f23",
+                "fontFamily": "BeVietnamPro-Regular",
+                "fontSize": 16,
+                "letterSpacing": 0.48,
+                "lineHeight": 24,
+              },
+              undefined,
+            ]
+          }
+          themeIntent="body"
+          themeTypeface="neutral"
+          themeVariant="regular"
+        >
+          Rich Text Editor
+        </Text>
       </Text>
     </View>
     <View
@@ -405,7 +424,26 @@ exports[`RichTextEditor should render correctly 1`] = `
         themeTypeface="neutral"
         themeVariant="regular"
       >
-        Rich Text Editor
+        <Text
+          allowFontScaling={false}
+          style={
+            [
+              {
+                "color": "#001f23",
+                "fontFamily": "BeVietnamPro-Regular",
+                "fontSize": 16,
+                "letterSpacing": 0.48,
+                "lineHeight": 24,
+              },
+              undefined,
+            ]
+          }
+          themeIntent="body"
+          themeTypeface="neutral"
+          themeVariant="regular"
+        >
+          Rich Text Editor
+        </Text>
       </Text>
     </View>
     <View