@hero-design/rn 7.28.0 → 8.0.0-rc.0

package/lib/index.js

@@ -105,7 +105,7 @@ function _defineProperty(obj, key, value) {
   return obj;
 }
 function _extends$1() {
-  _extends$1 = Object.assign ? Object.assign.bind() : function (target) {
+  _extends$1 = Object.assign || function (target) {
     for (var i = 1; i < arguments.length; i++) {
       var source = arguments[i];
       for (var key in source) {
@@ -1260,6 +1260,7 @@ var globalPalette = {
   disabledOnDefaultGlobalSurface: palette$6.greyLight30,
   darkGlobalSurface: palette$6.maasstrichtBlue,
   onDarkGlobalSurface: palette$6.white,
+  overlayGlobalSurface: palette$6.black,
   // Outlines
   primaryOutline: palette$6.maasstrichtBlue,
   secondaryOutline: palette$6.greyLight75,
@@ -1445,7 +1446,7 @@ var getFonts = function getFonts(_ref) {
   };
 };
 var getFontSizes = function getFontSizes(baseFontSize) {
-  var fontSizes = Array.from(new Array(9));
+  var fontSizes = Array.from(new Array(11));
   fontSizes.forEach(function (_, index) {
     if (index === 0) {
       fontSizes[0] = baseFontSize;
@@ -1455,6 +1456,7 @@ var getFontSizes = function getFontSizes(baseFontSize) {
     return undefined;
   });
   return {
+    '7xlarge': scale(fontSizes[10]),
     xxxxxlarge: scale(fontSizes[8]),
     xxxxlarge: scale(fontSizes[7]),
     xxxlarge: scale(fontSizes[6]),
@@ -1470,6 +1472,7 @@ var getFontSizes = function getFontSizes(baseFontSize) {
 var getLineHeights = function getLineHeights(fontSizes) {
   var additionalSpace = 8;
   return {
+    '7xlarge': fontSizes['7xlarge'] + additionalSpace,
     xxxxxlarge: fontSizes.xxxxxlarge + additionalSpace,
     xxxxlarge: fontSizes.xxxxlarge + additionalSpace,
     xxxlarge: fontSizes.xxxlarge + additionalSpace,
@@ -1735,7 +1738,7 @@ var getBottomSheetTheme = function getBottomSheetTheme(theme) {
   var colors = {
     shadow: theme.colors.primaryOutline,
     background: theme.colors.defaultGlobalSurface,
-    backdrop: theme.colors.darkGlobalSurface
+    backdrop: theme.colors.overlayGlobalSurface
   };
   var sizes = {
     sectionHeight: theme.sizes.xxxxxlarge,
@@ -1745,16 +1748,16 @@ var getBottomSheetTheme = function getBottomSheetTheme(theme) {
     headerWrapperVerticalPadding: theme.space.small,
     headerWrapperHorizontalPadding: theme.space.medium,
     closeIconMargin: theme.space.smallMedium,
-    footerVerticalPadding: theme.space.small,
-    footerHorizontalPadding: theme.space.smallMedium
+    footerVerticalPadding: theme.space.medium,
+    footerHorizontalPadding: theme.space.large
   };
   var shadows = {
     offset: {
       width: 0,
       height: 3
     },
-    opacity: 0.27,
-    radius: 4.65,
+    opacity: 0.4,
+    radius: theme.radii.xlarge,
     elevation: 10
   };
   var radii = {
@@ -1993,15 +1996,16 @@ var getEmptyTheme = function getEmptyTheme(theme) {
   var colors = {
     text: theme.colors.onDefaultGlobalSurface,
     invertedText: theme.colors.onDarkGlobalSurface,
-    subduedText: theme.colors.disabledOnDefaultGlobalSurface
+    subduedText: theme.colors.mutedOnDefaultGlobalSurface,
+    invertedSubduedText: theme.colors.onDarkGlobalSurface
   };
   var fontSizes = {
-    title: theme.fontSizes.xxxxlarge,
-    description: theme.fontSizes.large
+    title: theme.fontSizes.xxxlarge,
+    description: theme.fontSizes.xlarge
   };
   var fonts = {
-    title: theme.fonts.neutral.semiBold,
-    description: theme.fonts.neutral.light
+    title: theme.fonts.playful.semiBold,
+    description: theme.fonts.playful.regular
   };
   return {
     fontSizes: fontSizes,
@@ -2018,7 +2022,7 @@ var getFABTheme = function getFABTheme(theme) {
     icon: theme.colors.onPrimary,
     headerText: theme.colors.onDarkGlobalSurface,
     actionItemBackground: theme.colors.primary,
-    backdropBackground: theme.colors.darkGlobalSurface,
+    backdropBackground: theme.colors.overlayGlobalSurface,
     titleText: theme.colors.onDarkGlobalSurface,
     actionItemText: theme.colors.onPrimary
   };
@@ -2339,10 +2343,12 @@ var getSelectTheme = function getSelectTheme(theme) {
     minimumOptionListHeight: theme.space.xxxxlarge * 5,
     sectionSpacing: theme.space.smallMedium,
     optionSpacing: theme.space.xsmall,
-    optionHorizontalMargin: theme.space.smallMedium,
+    optionListHorizontalPadding: theme.space.smallMedium,
     searchBarMarginTopSpacing: theme.space.small,
     searchBarHorizontalSpacing: theme.space.medium,
-    searchBarBottomSpacing: theme.space.small
+    searchBarBottomSpacing: theme.space.small,
+    singleSelectContentPaddingBottom: theme.space.medium,
+    suffixMarginRight: theme.space.smallMedium
   };
   var radii = {
     option: theme.radii.base
@@ -2718,7 +2724,8 @@ var getTypographyTheme = function getTypographyTheme(theme) {
     large: theme.fontSizes.large,
     xlarge: theme.fontSizes.xlarge,
     xxxlarge: theme.fontSizes.xxxlarge,
-    xxxxxlarge: theme.fontSizes.xxxxxlarge
+    xxxxxlarge: theme.fontSizes.xxxxxlarge,
+    '7xlarge': theme.fontSizes['7xlarge']
   };
   var lineHeights = {
     small: theme.lineHeights.small,
@@ -2726,7 +2733,8 @@ var getTypographyTheme = function getTypographyTheme(theme) {
     large: theme.lineHeights.large,
     xlarge: theme.lineHeights.xlarge,
     xxxlarge: theme.lineHeights.xxxlarge,
-    xxxxxlarge: theme.lineHeights.xxxxxlarge
+    xxxxxlarge: theme.lineHeights.xxxxxlarge,
+    '7xlarge': theme.lineHeights['7xlarge']
   };
   return {
     colors: colors,
@@ -7073,7 +7081,7 @@ var StyledBackdrop$2 = index$a(AnimatedPressable$1)(function (_ref2) {
   var theme = _ref2.theme;
   return _objectSpread2(_objectSpread2({}, reactNative.StyleSheet.absoluteFillObject), {}, {
     backgroundColor: theme.__hd__.bottomSheet.colors.backdrop,
-    opacity: 0.48
+    opacity: 0.4
   });
 });
 var StyledHeaderWrapper = index$a(reactNative.View)(function (_ref3) {
@@ -7626,7 +7634,7 @@ var Header = function Header(_ref) {
     onPress: onRequestClose,
     intent: "text",
     testID: "bottom-sheet-close-icon",
-    size: "small"
+    size: "xsmall"
   })) : null), showDivider ? /*#__PURE__*/React__default["default"].createElement(Divider, null) : null);
 };
 
@@ -11196,7 +11204,7 @@ var calculateSnapPointsData = function calculateSnapPointsData(minimumHeight, he
   var uniqSnapPointOffsetValues = Array.from(new Set([].concat(_toConsumableArray(snapPointsOffsetValues), [0])));
   return {
     list: uniqSnapPointOffsetValues,
-    minHeightOffset: Math.max.apply(Math, uniqSnapPointOffsetValues),
+    minHeightOffset: Math.max.apply(Math, _toConsumableArray(uniqSnapPointOffsetValues)),
     maxHeightOffset: 0 // Max height
   };
 };
@@ -11422,7 +11430,7 @@ var StyledDescription = index$a(reactNative.Text)(function (_ref3) {
     fontFamily: theme.__hd__.empty.fonts.description,
     fontSize: theme.__hd__.empty.fontSizes.description,
     textAlign: 'center',
-    color: themeVariant === 'dark' ? theme.__hd__.empty.colors.invertedText : theme.__hd__.empty.colors.subduedText
+    color: themeVariant === 'dark' ? theme.__hd__.empty.colors.invertedSubduedText : theme.__hd__.empty.colors.subduedText
   };
 });
 
@@ -11693,7 +11701,7 @@ var ActionGroup = function ActionGroup(_ref2) {
   });
   var interpolatedBackdropOpacityAnimation = tranlateXAnimation.current.interpolate({
     inputRange: [0, 1],
-    outputRange: [0, 0.9]
+    outputRange: [0, 0.4]
   });
   var interpolatedActionGroupOpacityAnimation = tranlateXAnimation.current.interpolate({
     inputRange: [0, 1],
@@ -12873,6 +12881,12 @@ var StyledSearchBar = index$a(reactNative.View)(function (_ref4) {
     paddingBottom: theme.__hd__.select.space.searchBarBottomSpacing
   };
 });
+var StyledSectionList = index$a(reactNative.SectionList)(function (_ref5) {
+  var theme = _ref5.theme;
+  return {
+    paddingHorizontal: theme.__hd__.select.space.optionListHorizontalPadding
+  };
+});
 
 var Footer = function Footer(_ref) {
   var label = _ref.label,
@@ -12947,7 +12961,7 @@ var useKeyboard = function useKeyboard() {
   };
 };
 
-var StyledOptionList = function StyledOptionList(_ref) {
+var BaseOptionList = function BaseOptionList(_ref) {
   var keyExtractor = _ref.keyExtractor,
     loading = _ref.loading,
     onEndReached = _ref.onEndReached,
@@ -12960,7 +12974,7 @@ var StyledOptionList = function StyledOptionList(_ref) {
     _useState2 = _slicedToArray(_useState, 2),
     onEndReachedCalled = _useState2[0],
     setOnEndReachedCalled = _useState2[1];
-  return /*#__PURE__*/React__default["default"].createElement(reactNative.SectionList, {
+  return /*#__PURE__*/React__default["default"].createElement(StyledSectionList, {
     ref: sectionListRef,
     style: _objectSpread2({}, onQueryChange ? {
       height: reactNative.Dimensions.get('screen').height
@@ -13002,18 +13016,25 @@ var Option$2 = function Option(_ref) {
     _ref$disabled = _ref.disabled,
     disabled = _ref$disabled === void 0 ? false : _ref$disabled,
     selected = _ref.selected,
-    onPress = _ref.onPress;
+    onPress = _ref.onPress,
+    _ref$highlighted = _ref.highlighted,
+    highlighted = _ref$highlighted === void 0 ? false : _ref$highlighted;
   var theme = useTheme();
-  return /*#__PURE__*/React__default["default"].createElement(List.BasicItem, {
+  var props = {
     selected: selected,
     disabled: disabled,
     onPress: onPress,
     title: text,
-    suffix: selected ? 'checkmark' : undefined,
-    style: {
-      marginHorizontal: theme.__hd__.select.space.optionHorizontalMargin
-    }
-  });
+    suffix: selected === true ? /*#__PURE__*/React__default["default"].createElement(Icon, {
+      icon: "checkmark",
+      intent: disabled ? 'disabled-text' : 'primary',
+      size: "small",
+      style: {
+        marginRight: theme.__hd__.select.space.suffixMarginRight
+      }
+    }) : undefined
+  };
+  return highlighted === true ? /*#__PURE__*/React__default["default"].createElement(List.Item, props) : /*#__PURE__*/React__default["default"].createElement(List.BasicItem, props);
 };
 
 var OptionList$1 = function OptionList(_ref) {
@@ -13045,10 +13066,11 @@ var OptionList$1 = function OptionList(_ref) {
       selected: selected,
       text: item.text,
       disabled: item.disabled,
-      onPress: onItemPress
+      onPress: onItemPress,
+      highlighted: item.highlighted
     });
   };
-  return /*#__PURE__*/React__default["default"].createElement(StyledOptionList, {
+  return /*#__PURE__*/React__default["default"].createElement(BaseOptionList, {
     keyExtractor: keyExtractor,
     loading: loading,
     onEndReached: onEndReached,
@@ -13103,6 +13125,9 @@ function MultiSelect(_ref) {
   }).map(function (opt) {
     return opt.text;
   }).join(', ');
+  useDeprecation("Select's onDimiss is deprecated and will be removed in the next major release. Please use onDismiss instead.", onDimiss !== undefined);
+  useDeprecation("Select's numberOfLines is deprecated and will be removed in the next major release. Please use inputProps.numberOfLines instead.", numberOfLines !== undefined);
+  useDeprecation("Select's inputProps.required is deprecated and will be removed in the next major release. Please use Select's required prop instead.", (inputProps === null || inputProps === void 0 ? void 0 : inputProps.required) !== undefined);
   React.useEffect(function () {
     setSelectingValue(value);
   }, [open]);
@@ -13187,19 +13212,25 @@ var Option$1 = function Option(_ref) {
     _ref$disabled = _ref.disabled,
     disabled = _ref$disabled === void 0 ? false : _ref$disabled,
     selected = _ref.selected,
-    onPress = _ref.onPress;
-  var theme = useTheme();
-  return /*#__PURE__*/React__default["default"].createElement(List.BasicItem, {
+    onPress = _ref.onPress,
+    _ref$highlighted = _ref.highlighted,
+    highlighted = _ref$highlighted === void 0 ? false : _ref$highlighted;
+  var props = {
     selected: selected,
     disabled: disabled,
     onPress: onPress,
-    title: text,
-    style: {
-      marginHorizontal: theme.__hd__.select.space.optionHorizontalMargin
-    }
-  });
+    title: text
+  };
+  return highlighted === true ? /*#__PURE__*/React__default["default"].createElement(List.Item, props) : /*#__PURE__*/React__default["default"].createElement(List.BasicItem, props);
 };
 
+var StyledOptionList = index$a(BaseOptionList)(function (_ref) {
+  var theme = _ref.theme;
+  return {
+    paddingBottom: theme.__hd__.select.space.singleSelectContentPaddingBottom
+  };
+});
+
 var OptionList = function OptionList(_ref) {
   var keyExtractor = _ref.keyExtractor,
     loading = _ref.loading,
@@ -13227,7 +13258,8 @@ var OptionList = function OptionList(_ref) {
       selected: selected,
       text: item.text,
       disabled: item.disabled,
-      onPress: onItemPress
+      onPress: onItemPress,
+      highlighted: item.highlighted
     });
   };
   return /*#__PURE__*/React__default["default"].createElement(StyledOptionList, {
@@ -13279,6 +13311,9 @@ var SingleSelect = function SingleSelect(_ref) {
   var displayedValue = (_flatOptions$find = flatOptions.find(function (opt) {
     return value === opt.value;
   })) === null || _flatOptions$find === void 0 ? void 0 : _flatOptions$find.text;
+  useDeprecation("Select's onDimiss is deprecated and will be removed in the next major release. Please use onDismiss instead.", onDimiss !== undefined);
+  useDeprecation("Select's numberOfLines is deprecated and will be removed in the next major release. Please use inputProps.numberOfLines instead.", numberOfLines !== undefined);
+  useDeprecation("Select's inputProps.required is deprecated and will be removed in the next major release. Please use Select's required prop instead.", (inputProps === null || inputProps === void 0 ? void 0 : inputProps.required) !== undefined);
   return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(reactNative.View, {
     pointerEvents: !editable || disabled || inputProps !== null && inputProps !== void 0 && inputProps.loading ? 'none' : 'auto'
   }, /*#__PURE__*/React__default["default"].createElement(reactNative.TouchableOpacity, {
@@ -13694,7 +13729,9 @@ var getTabItem$1 = function getTabItem(_ref) {
       icon: item,
       testID: "hero-icon-".concat(item),
       size: "small",
-      intent: active ? 'info' : 'text'
+      style: {
+        color: color
+      }
     });
   }
   if (typeof item === 'string') {
@@ -14043,7 +14080,7 @@ var Tag = function Tag(_ref) {
     style = _ref.style,
     testID = _ref.testID,
     nativeProps = _objectWithoutProperties(_ref, _excluded);
-  useDeprecation("Tag's default intent is deprecated and will be removed in the next major release.\nPlease use other intents instead.", intent !== 'default');
+  useDeprecation("Tag's default intent is deprecated and will be removed in the next major release.\nPlease use primary intent instead.", intent !== 'default');
   return /*#__PURE__*/React__default["default"].createElement(StyledView, _extends$1({}, nativeProps, {
     themeIntent: intent,
     themeVariant: variant,
@@ -14399,7 +14436,7 @@ var ToastContainer = /*#__PURE__*/React__default["default"].forwardRef(function
   var _ref2$displayType = _ref2.displayType,
     displayType = _ref2$displayType === void 0 ? 'single' : _ref2$displayType,
     _ref2$position = _ref2.position,
-    position = _ref2$position === void 0 ? 'top' : _ref2$position,
+    position = _ref2$position === void 0 ? 'bottom' : _ref2$position,
     style = _ref2.style;
   var theme = useTheme$1();
   var _useState = React.useState([]),
@@ -14462,8 +14499,9 @@ var ToastProvider = function ToastProvider(_ref) {
   var children = _ref.children,
     _ref$displayType = _ref.displayType,
     displayType = _ref$displayType === void 0 ? 'single' : _ref$displayType,
-    _ref$position = _ref.position,
-    position = _ref$position === void 0 ? 'top' : _ref$position;
+    _position = _ref.position;
+  var position = _position === undefined ? 'bottom' : _position;
+  useDeprecation("Toast's position prop is deprecated and will be removed in the next major release.\nPlease remove it.", _position !== undefined);
   var toastRef = React.useRef(null);
   // @ts-expect-error: TODO: @tungv Fix this type error
   var _useState = React.useState(null),
@@ -25649,7 +25687,8 @@ function checkDCE() {
                       voids: a
                     }));
                     if (v.length > 0) if ("continue" === function () {
-                      var r = v[0],
+                      var _v = _slicedToArray(v, 1),
+                        r = _v[0],
                         n = v[v.length - 1],
                         _r4 = _slicedToArray(r, 2),
                         o = _r4[1],

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hero-design/rn",
-  "version": "7.28.0",
+  "version": "8.0.0-rc.0",
   "license": "MIT",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -20,7 +20,7 @@
   "dependencies": {
     "@emotion/native": "^11.9.3",
     "@emotion/react": "^11.9.3",
-    "@hero-design/colors": "7.28.0",
+    "@hero-design/colors": "8.0.0-rc.0",
     "date-fns": "^2.16.1",
     "events": "^3.2.0",
     "hero-editor": "^1.9.12"
@@ -58,7 +58,7 @@
     "@types/react-native": "^0.67.7",
     "@types/react-native-vector-icons": "^6.4.10",
     "babel-plugin-inline-import": "^3.0.0",
-    "eslint-config-hd": "7.28.0",
+    "eslint-config-hd": "8.0.0-rc.0",
     "jest": "^27.3.1",
     "react": "17.0.2",
     "react-native": "0.65.1",
@@ -72,7 +72,7 @@
     "rollup-plugin-copy": "^3.4.0",
     "rollup-plugin-flow": "^1.1.1",
     "ts-jest": "^27.0.7",
-    "prettier-config-hd": "7.28.0",
+    "prettier-config-hd": "8.0.0-rc.0",
     "rn-7-23-0": "npm:@hero-design/rn@7.23.0"
   },
   "prettier": "prettier-config-hd"

package/src/components/Alert/index.tsx

@@ -62,6 +62,7 @@ interface AlertProps {
    */
   onClose?: () => void;
   /**
+   * @deprecated
    * Use rounded variant.
    */
   variant?: 'default' | 'round';

package/src/components/BottomSheet/Header.tsx

@@ -40,7 +40,7 @@ const Header = ({
             onPress={onRequestClose}
             intent="text"
             testID="bottom-sheet-close-icon"
-            size="small"
+            size="xsmall"
           />
         </StyledIconWrapper>
       ) : null}

package/src/components/BottomSheet/StyledBottomSheet.tsx

@@ -46,7 +46,7 @@ const StyledBackdrop = styled(AnimatedPressable)<
 >(({ theme }) => ({
   ...StyleSheet.absoluteFillObject,
   backgroundColor: theme.__hd__.bottomSheet.colors.backdrop,
-  opacity: 0.48,
+  opacity: 0.4,
 }));
 
 const StyledHeaderWrapper = styled(View)(({ theme }) => ({

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

@@ -56,7 +56,7 @@ exports[`BottomSheet renders correctly with close state 1`] = `
         onStartShouldSetResponder={[Function]}
         style={
           Object {
-            "backgroundColor": "#001f23",
+            "backgroundColor": "#000000",
             "bottom": 0,
             "left": 0,
             "opacity": 0.48,
@@ -82,8 +82,8 @@ exports[`BottomSheet renders correctly with close state 1`] = `
               "height": 3,
               "width": 0,
             },
-            "shadowOpacity": 0.27,
-            "shadowRadius": 4.65,
+            "shadowOpacity": 0.4,
+            "shadowRadius": 16,
             "transform": Array [
               Object {
                 "scaleY": 1,
@@ -179,13 +179,13 @@ exports[`BottomSheet renders correctly with close state 1`] = `
                   Array [
                     Object {
                       "color": "#001f23",
-                      "fontSize": 20,
+                      "fontSize": 16,
                     },
                     undefined,
                   ]
                 }
                 themeIntent="text"
-                themeSize="small"
+                themeSize="xsmall"
               />
             </View>
           </View>
@@ -226,8 +226,8 @@ exports[`BottomSheet renders correctly with close state 1`] = `
                   "flexDirection": "row",
                   "justifyContent": "flex-end",
                   "minHeight": 64,
-                  "paddingHorizontal": 12,
-                  "paddingVertical": 8,
+                  "paddingHorizontal": 24,
+                  "paddingVertical": 16,
                 },
                 undefined,
               ]
@@ -339,7 +339,7 @@ exports[`BottomSheet renders correctly with open state 1`] = `
         onStartShouldSetResponder={[Function]}
         style={
           Object {
-            "backgroundColor": "#001f23",
+            "backgroundColor": "#000000",
             "bottom": 0,
             "left": 0,
             "opacity": 0,
@@ -365,8 +365,8 @@ exports[`BottomSheet renders correctly with open state 1`] = `
               "height": 3,
               "width": 0,
             },
-            "shadowOpacity": 0.27,
-            "shadowRadius": 4.65,
+            "shadowOpacity": 0.4,
+            "shadowRadius": 16,
             "transform": Array [
               Object {
                 "scaleY": 1,
@@ -462,13 +462,13 @@ exports[`BottomSheet renders correctly with open state 1`] = `
                   Array [
                     Object {
                       "color": "#001f23",
-                      "fontSize": 20,
+                      "fontSize": 16,
                     },
                     undefined,
                   ]
                 }
                 themeIntent="text"
-                themeSize="small"
+                themeSize="xsmall"
               />
             </View>
           </View>
@@ -509,8 +509,8 @@ exports[`BottomSheet renders correctly with open state 1`] = `
                   "flexDirection": "row",
                   "justifyContent": "flex-end",
                   "minHeight": 64,
-                  "paddingHorizontal": 12,
-                  "paddingVertical": 8,
+                  "paddingHorizontal": 24,
+                  "paddingVertical": 16,
                 },
                 undefined,
               ]

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

@@ -287,7 +287,7 @@ exports[`DatePickerIOS renders correctly 1`] = `
                 onStartShouldSetResponder={[Function]}
                 style={
                   Object {
-                    "backgroundColor": "#001f23",
+                    "backgroundColor": "#000000",
                     "bottom": 0,
                     "left": 0,
                     "opacity": 0.48,
@@ -313,8 +313,8 @@ exports[`DatePickerIOS renders correctly 1`] = `
                       "height": 3,
                       "width": 0,
                     },
-                    "shadowOpacity": 0.27,
-                    "shadowRadius": 4.65,
+                    "shadowOpacity": 0.4,
+                    "shadowRadius": 16,
                     "transform": Array [
                       Object {
                         "scaleY": 1,
@@ -410,13 +410,13 @@ exports[`DatePickerIOS renders correctly 1`] = `
                           Array [
                             Object {
                               "color": "#001f23",
-                              "fontSize": 20,
+                              "fontSize": 16,
                             },
                             undefined,
                           ]
                         }
                         themeIntent="text"
-                        themeSize="small"
+                        themeSize="xsmall"
                       />
                     </View>
                   </View>
@@ -477,8 +477,8 @@ exports[`DatePickerIOS renders correctly 1`] = `
                           "flexDirection": "row",
                           "justifyContent": "flex-end",
                           "minHeight": 64,
-                          "paddingHorizontal": 12,
-                          "paddingVertical": 8,
+                          "paddingHorizontal": 24,
+                          "paddingVertical": 16,
                         },
                         undefined,
                       ]

package/src/components/Empty/StyledEmpty.tsx

@@ -32,7 +32,7 @@ const StyledDescription = styled(Text)<{ themeVariant: ThemeVariant }>(
     textAlign: 'center',
     color:
       themeVariant === 'dark'
-        ? theme.__hd__.empty.colors.invertedText
+        ? theme.__hd__.empty.colors.invertedSubduedText
         : theme.__hd__.empty.colors.subduedText,
   })
 );

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

@@ -21,8 +21,8 @@ exports[`Empty renders empty state content correctly 1`] = `
       Array [
         Object {
           "color": "#001f23",
-          "fontFamily": "BeVietnamPro-SemiBold",
-          "fontSize": 28,
+          "fontFamily": "RebondGrotesque-SemiBold",
+          "fontSize": 24,
           "marginBottom": 16,
           "textAlign": "center",
         },
@@ -37,9 +37,9 @@ exports[`Empty renders empty state content correctly 1`] = `
     style={
       Array [
         Object {
-          "color": "#bfc1c5",
-          "fontFamily": "BeVietnamPro-Light",
-          "fontSize": 16,
+          "color": "#4d6265",
+          "fontFamily": "RebondGrotesque-Regular",
+          "fontSize": 18,
           "textAlign": "center",
         },
         undefined,
@@ -88,8 +88,8 @@ exports[`Empty renders empty state with image correctly 1`] = `
       Array [
         Object {
           "color": "#001f23",
-          "fontFamily": "BeVietnamPro-SemiBold",
-          "fontSize": 28,
+          "fontFamily": "RebondGrotesque-SemiBold",
+          "fontSize": 24,
           "marginBottom": 16,
           "textAlign": "center",
         },
@@ -104,9 +104,9 @@ exports[`Empty renders empty state with image correctly 1`] = `
     style={
       Array [
         Object {
-          "color": "#bfc1c5",
-          "fontFamily": "BeVietnamPro-Light",
-          "fontSize": 16,
+          "color": "#4d6265",
+          "fontFamily": "RebondGrotesque-Regular",
+          "fontSize": 18,
           "textAlign": "center",
         },
         undefined,

package/src/components/FAB/ActionGroup/__tests__/__snapshots__/index.spec.tsx.snap

@@ -24,7 +24,7 @@ exports[`ActionGroup has active false 1`] = `
     pointerEvents="box-none"
     style={
       Object {
-        "backgroundColor": "#001f23",
+        "backgroundColor": "#000000",
         "bottom": 0,
         "left": 0,
         "opacity": 0,
@@ -593,10 +593,10 @@ exports[`ActionGroup has active true 1`] = `
     pointerEvents="auto"
     style={
       Object {
-        "backgroundColor": "#001f23",
+        "backgroundColor": "#000000",
         "bottom": 0,
         "left": 0,
-        "opacity": 0.9,
+        "opacity": 0.4,
         "position": "absolute",
         "right": 0,
         "top": 0,

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

@@ -100,7 +100,7 @@ const ActionGroup = ({
   const interpolatedBackdropOpacityAnimation =
     tranlateXAnimation.current.interpolate({
       inputRange: [0, 1],
-      outputRange: [0, 0.9],
+      outputRange: [0, 0.4],
     });
 
   const interpolatedActionGroupOpacityAnimation =