@hero-design/rn 8.84.3 → 8.86.0

package/.turbo/turbo-build.log

@@ -1,7 +1,7 @@
-(node:3013) ExperimentalWarning: Importing JSON modules is an experimental feature and might change at any time
+(node:3022) 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 node-resolve] preferring built-in module 'events' over local alternative at '/home/runner/work/hero-design/hero-design/node_modules/events/events.js', pass 'preferBuiltins: false' to disable this behavior or 'preferBuiltins: true' to disable this warning.or passing a function to 'preferBuiltins' to provide more fine-grained control over which built-in modules to prefer.
-created lib/index.js, es/index.js in 51.4s
+created lib/index.js, es/index.js in 52.9s

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @hero-design/rn
 
+## 8.86.0
+
+### Minor Changes
+
+- [#3609](https://github.com/Thinkei/hero-design/pull/3609) [`6cb53946a493e6550c0bdd2b0c2c0fb683e4e77b`](https://github.com/Thinkei/hero-design/commit/6cb53946a493e6550c0bdd2b0c2c0fb683e4e77b) Thanks [@vinhphan-eh](https://github.com/vinhphan-eh)! - [Button] Add white intent
+
+## 8.85.0
+
+### Minor Changes
+
+- [#3605](https://github.com/Thinkei/hero-design/pull/3605) [`ab87bce2a285fbbe735eca30fa686f26eb2f2a97`](https://github.com/Thinkei/hero-design/commit/ab87bce2a285fbbe735eca30fa686f26eb2f2a97) Thanks [@vinhphan-eh](https://github.com/vinhphan-eh)! - [Box] Support gap property
+
 ## 8.84.3
 
 ### Patch Changes

package/es/index.js

@@ -2511,6 +2511,7 @@ var getButtonTheme = function getButtonTheme(theme) {
     primary: theme.colors.primary,
     secondary: theme.colors.mutedOnDefaultGlobalSurface,
     danger: theme.colors.onErrorSurface,
+    white: theme.colors.defaultGlobalSurface,
     defaultText: theme.colors.onDefaultGlobalSurface,
     disabledText: theme.colors.disabledOnDefaultGlobalSurface,
     disabledBorder: theme.colors.disabledOnDefaultGlobalSurface,
@@ -2522,17 +2523,21 @@ var getButtonTheme = function getButtonTheme(theme) {
       filledPrimary: theme.colors.pressedSurface,
       filledSecondary: theme.colors.pressedSurface,
       filledDanger: theme.colors.errorSurface,
+      filledWhite: theme.colors.highlightedSurface,
       outlinedPrimary: theme.colors.highlightedSurface,
       outlinedSecondary: theme.colors.highlightedSurface,
       outlineDanger: theme.colors.errorSurface,
+      outlineWhite: theme.colors.pressedSurface,
       textPrimary: theme.colors.highlightedSurface,
       textSecondary: theme.colors.neutralGlobalSurface,
-      textDanger: theme.colors.errorSurface
+      textDanger: theme.colors.errorSurface,
+      textWhite: theme.colors.pressedSurface
     },
     pressedText: {
       primary: theme.colors.pressedSurface,
       secondary: theme.colors.onDefaultGlobalSurface,
-      danger: theme.colors.mutedError
+      danger: theme.colors.mutedError,
+      white: theme.colors.pressedSurface
     }
   };
   var lineHeights = {
@@ -8831,6 +8836,10 @@ var space = {
   paddingVertical: {
     property: 'paddingVertical',
     scale: 'space'
+  },
+  gap: {
+    property: 'gap',
+    scale: 'space'
   }
 };
 var radii = {
@@ -9563,15 +9572,18 @@ var StyledLoadingDot = index$a(View)(function (_ref) {
       case 'filled-primary':
       case 'filled-secondary':
       case 'filled-danger':
+      case 'outlined-white':
+      case 'text-white':
         return {
           backgroundColor: theme.__hd__.button.colors.invertedText
         };
+      case 'filled-white':
       case 'outlined-primary':
         return genLoadingIndicatorStyles(theme, 'primary');
       case 'text-primary':
       case 'outlined-secondary':
-      case 'text-secondary':
         return genLoadingIndicatorStyles(theme, 'secondary');
+      case 'text-secondary':
       case 'outlined-danger':
       case 'text-danger':
         return genLoadingIndicatorStyles(theme, 'danger');
@@ -9745,15 +9757,20 @@ var StyledButtonContainer = index$a(TouchableHighlight)(function (_ref) {
       return genFilledContainerStyles(theme, 'secondary', disabled, loading, themeIsCompact);
     case 'filled-danger':
       return genFilledContainerStyles(theme, 'danger', disabled, loading, themeIsCompact);
+    case 'filled-white':
+      return genFilledContainerStyles(theme, 'white', disabled, loading, themeIsCompact);
     case 'outlined-primary':
       return genOutlineContainerStyles(theme, 'primary', disabled, loading, themeIsCompact);
     case 'outlined-secondary':
       return genOutlineContainerStyles(theme, 'secondary', disabled, loading, themeIsCompact);
     case 'outlined-danger':
       return genOutlineContainerStyles(theme, 'danger', disabled, loading, themeIsCompact);
+    case 'outlined-white':
+      return genOutlineContainerStyles(theme, 'white', disabled, loading, themeIsCompact);
     case 'text-primary':
     case 'text-secondary':
     case 'text-danger':
+    case 'text-white':
       return {
         height: themeInlineText ? undefined : getButtonHeight(themeIsCompact),
         borderRadius: theme.__hd__.button.radii.text,
@@ -9762,14 +9779,51 @@ var StyledButtonContainer = index$a(TouchableHighlight)(function (_ref) {
         alignItems: 'center',
         padding: themeInlineText ? 0 : theme.__hd__.button.space["default"].textButtonPadding,
         borderWidth: 0,
-        backgroundColor: loading && !themeInlineText ? theme.__hd__.button.colors.textLoadingBackground : 'transparent'
+        backgroundColor: loading && !themeInlineText && themeButtonVariant !== 'text-white' ? theme.__hd__.button.colors.textLoadingBackground : 'transparent'
       };
   }
 });
-var StyledButtonText = index$a(Typography.Title)(function (_ref2) {
-  var disabled = _ref2.disabled,
-    themeButtonVariant = _ref2.themeButtonVariant,
+var genWhiteTextStyles = function genWhiteTextStyles(_ref2) {
+  var variant = _ref2.variant,
+    disabled = _ref2.disabled,
     theme = _ref2.theme;
+  if (disabled) {
+    switch (variant) {
+      case 'filled-white':
+        {
+          return {
+            color: theme.__hd__.button.colors.invertedText
+          };
+        }
+      case 'outlined-white':
+      case 'text-white':
+        {
+          return {
+            color: theme.__hd__.button.colors.disabledText
+          };
+        }
+    }
+  }
+  switch (variant) {
+    case 'filled-white':
+      {
+        return {
+          color: theme.__hd__.button.colors.primary
+        };
+      }
+    case 'outlined-white':
+    case 'text-white':
+      {
+        return {
+          color: theme.__hd__.button.colors.invertedText
+        };
+      }
+  }
+};
+var StyledButtonText = index$a(Typography.Title)(function (_ref3) {
+  var disabled = _ref3.disabled,
+    themeButtonVariant = _ref3.themeButtonVariant,
+    theme = _ref3.theme;
   var themeStyling = function themeStyling() {
     switch (themeButtonVariant) {
       case 'filled-primary':
@@ -9790,6 +9844,14 @@ var StyledButtonText = index$a(Typography.Title)(function (_ref2) {
         return genTextStyles(theme, 'secondary', disabled);
       case 'text-danger':
         return genTextStyles(theme, 'danger', disabled);
+      case 'filled-white':
+      case 'outlined-white':
+      case 'text-white':
+        return genWhiteTextStyles({
+          variant: themeButtonVariant,
+          disabled: disabled,
+          theme: theme
+        });
     }
   };
   return _objectSpread2({
@@ -9798,11 +9860,11 @@ var StyledButtonText = index$a(Typography.Title)(function (_ref2) {
   }, themeStyling());
 });
 var StyledSmallButtonText = StyledButtonText.withComponent(Typography.Body);
-var StyledButtonTitleOfVariantText = index$a(Typography.Body)(function (_ref3) {
-  var disabled = _ref3.disabled,
-    themeButtonVariant = _ref3.themeButtonVariant,
-    themeIsPressed = _ref3.themeIsPressed,
-    theme = _ref3.theme;
+var StyledButtonTitleOfVariantText = index$a(Typography.Body)(function (_ref4) {
+  var disabled = _ref4.disabled,
+    themeButtonVariant = _ref4.themeButtonVariant,
+    themeIsPressed = _ref4.themeIsPressed,
+    theme = _ref4.theme;
   var themeStyling = function themeStyling() {
     switch (themeButtonVariant) {
       case 'text-primary':
@@ -9811,6 +9873,12 @@ var StyledButtonTitleOfVariantText = index$a(Typography.Body)(function (_ref3) {
         return genTextStyles(theme, 'secondary', disabled, themeIsPressed);
       case 'text-danger':
         return genTextStyles(theme, 'danger', disabled, themeIsPressed);
+      case 'text-white':
+        return genWhiteTextStyles({
+          variant: 'text-white',
+          disabled: disabled,
+          theme: theme
+        });
     }
   };
   return _objectSpread2({
@@ -9820,10 +9888,10 @@ var StyledButtonTitleOfVariantText = index$a(Typography.Body)(function (_ref3) {
     textAlign: 'center'
   }, themeStyling());
 });
-var StyledButtonIconWrapper = index$a(View)(function (_ref4) {
-  var themePosition = _ref4.themePosition,
-    theme = _ref4.theme,
-    themeIsCompact = _ref4.themeIsCompact;
+var StyledButtonIconWrapper = index$a(View)(function (_ref5) {
+  var themePosition = _ref5.themePosition,
+    theme = _ref5.theme,
+    themeIsCompact = _ref5.themeIsCompact;
   switch (themePosition) {
     case 'left':
       return {
@@ -9835,12 +9903,12 @@ var StyledButtonIconWrapper = index$a(View)(function (_ref4) {
       };
   }
 });
-var StyledButtonIcon = index$a(Icon)(function (_ref5) {
-  var disabled = _ref5.disabled,
-    themeButtonVariant = _ref5.themeButtonVariant,
-    themeIsPressed = _ref5.themeIsPressed,
-    theme = _ref5.theme,
-    themeIsCompact = _ref5.themeIsCompact;
+var StyledButtonIcon = index$a(Icon)(function (_ref6) {
+  var disabled = _ref6.disabled,
+    themeButtonVariant = _ref6.themeButtonVariant,
+    themeIsPressed = _ref6.themeIsPressed,
+    theme = _ref6.theme,
+    themeIsCompact = _ref6.themeIsCompact;
   var themeStyling = function themeStyling() {
     switch (themeButtonVariant) {
       case 'filled-primary':
@@ -9861,6 +9929,14 @@ var StyledButtonIcon = index$a(Icon)(function (_ref5) {
         return genTextStyles(theme, 'secondary', disabled, themeIsPressed);
       case 'text-danger':
         return genTextStyles(theme, 'danger', disabled, themeIsPressed);
+      case 'filled-white':
+      case 'outlined-white':
+      case 'text-white':
+        return genWhiteTextStyles({
+          variant: themeButtonVariant,
+          disabled: disabled,
+          theme: theme
+        });
     }
   };
   return _objectSpread2({
@@ -9874,17 +9950,20 @@ var isIconName = function isIconName(icon) {
 var FILLED_VARIANTS = {
   primary: 'filled-primary',
   secondary: 'filled-secondary',
-  danger: 'filled-danger'
+  danger: 'filled-danger',
+  white: 'filled-white'
 };
 var OUTLINED_VARIANTS = {
   primary: 'outlined-primary',
   secondary: 'outlined-secondary',
-  danger: 'outlined-danger'
+  danger: 'outlined-danger',
+  white: 'outlined-white'
 };
 var TEXT_VARIANTS = {
   primary: 'text-primary',
   secondary: 'text-secondary',
-  danger: 'text-danger'
+  danger: 'text-danger',
+  white: 'text-white'
 };
 var getThemeVariant = function getThemeVariant(variant, intent) {
   switch (variant) {
@@ -9906,23 +9985,29 @@ var getUnderlayColor = function getUnderlayColor(theme, themeVariant) {
       return theme.__hd__.button.colors.pressedBackground.filledSecondary;
     case 'filled-danger':
       return theme.__hd__.button.colors.pressedBackground.filledDanger;
+    case 'filled-white':
+      return theme.__hd__.button.colors.pressedBackground.filledWhite;
     case 'outlined-primary':
       return theme.__hd__.button.colors.pressedBackground.outlinedPrimary;
     case 'outlined-secondary':
       return theme.__hd__.button.colors.pressedBackground.outlinedSecondary;
     case 'outlined-danger':
       return theme.__hd__.button.colors.pressedBackground.outlineDanger;
+    case 'outlined-white':
+      return theme.__hd__.button.colors.pressedBackground.outlineWhite;
     case 'text-primary':
       return theme.__hd__.button.colors.pressedBackground.textPrimary;
     case 'text-secondary':
       return theme.__hd__.button.colors.pressedBackground.textSecondary;
     case 'text-danger':
       return theme.__hd__.button.colors.pressedBackground.textDanger;
+    case 'text-white':
+      return theme.__hd__.button.colors.pressedBackground.textWhite;
   }
 };
 var deprecatedVariants = ['filled-secondary', 'filled-danger', 'outlined-secondary', 'outlined-danger'];
 function isTextVariant(themeVariant) {
-  return ['text-primary', 'text-secondary', 'text-danger'].includes(themeVariant);
+  return ['text-primary', 'text-secondary', 'text-danger', 'text-white'].includes(themeVariant);
 }
 var Button = function Button(_ref) {
   var accessibilityHint = _ref.accessibilityHint,
@@ -9967,7 +10052,7 @@ var Button = function Button(_ref) {
   };
   var renderTitle = function renderTitle() {
     return isCompactVariant ? /*#__PURE__*/React__default.createElement(StyledSmallButtonText, {
-      variant: "small",
+      variant: "small-bold",
       ellipsizeMode: "tail",
       numberOfLines: 1,
       disabled: disabled,

package/lib/index.js

@@ -2539,6 +2539,7 @@ var getButtonTheme = function getButtonTheme(theme) {
     primary: theme.colors.primary,
     secondary: theme.colors.mutedOnDefaultGlobalSurface,
     danger: theme.colors.onErrorSurface,
+    white: theme.colors.defaultGlobalSurface,
     defaultText: theme.colors.onDefaultGlobalSurface,
     disabledText: theme.colors.disabledOnDefaultGlobalSurface,
     disabledBorder: theme.colors.disabledOnDefaultGlobalSurface,
@@ -2550,17 +2551,21 @@ var getButtonTheme = function getButtonTheme(theme) {
       filledPrimary: theme.colors.pressedSurface,
       filledSecondary: theme.colors.pressedSurface,
       filledDanger: theme.colors.errorSurface,
+      filledWhite: theme.colors.highlightedSurface,
       outlinedPrimary: theme.colors.highlightedSurface,
       outlinedSecondary: theme.colors.highlightedSurface,
       outlineDanger: theme.colors.errorSurface,
+      outlineWhite: theme.colors.pressedSurface,
       textPrimary: theme.colors.highlightedSurface,
       textSecondary: theme.colors.neutralGlobalSurface,
-      textDanger: theme.colors.errorSurface
+      textDanger: theme.colors.errorSurface,
+      textWhite: theme.colors.pressedSurface
     },
     pressedText: {
       primary: theme.colors.pressedSurface,
       secondary: theme.colors.onDefaultGlobalSurface,
-      danger: theme.colors.mutedError
+      danger: theme.colors.mutedError,
+      white: theme.colors.pressedSurface
     }
   };
   var lineHeights = {
@@ -8859,6 +8864,10 @@ var space = {
   paddingVertical: {
     property: 'paddingVertical',
     scale: 'space'
+  },
+  gap: {
+    property: 'gap',
+    scale: 'space'
   }
 };
 var radii = {
@@ -9591,15 +9600,18 @@ var StyledLoadingDot = index$a(reactNative.View)(function (_ref) {
       case 'filled-primary':
       case 'filled-secondary':
       case 'filled-danger':
+      case 'outlined-white':
+      case 'text-white':
         return {
           backgroundColor: theme.__hd__.button.colors.invertedText
         };
+      case 'filled-white':
       case 'outlined-primary':
         return genLoadingIndicatorStyles(theme, 'primary');
       case 'text-primary':
       case 'outlined-secondary':
-      case 'text-secondary':
         return genLoadingIndicatorStyles(theme, 'secondary');
+      case 'text-secondary':
       case 'outlined-danger':
       case 'text-danger':
         return genLoadingIndicatorStyles(theme, 'danger');
@@ -9773,15 +9785,20 @@ var StyledButtonContainer = index$a(reactNative.TouchableHighlight)(function (_r
       return genFilledContainerStyles(theme, 'secondary', disabled, loading, themeIsCompact);
     case 'filled-danger':
       return genFilledContainerStyles(theme, 'danger', disabled, loading, themeIsCompact);
+    case 'filled-white':
+      return genFilledContainerStyles(theme, 'white', disabled, loading, themeIsCompact);
     case 'outlined-primary':
       return genOutlineContainerStyles(theme, 'primary', disabled, loading, themeIsCompact);
     case 'outlined-secondary':
       return genOutlineContainerStyles(theme, 'secondary', disabled, loading, themeIsCompact);
     case 'outlined-danger':
       return genOutlineContainerStyles(theme, 'danger', disabled, loading, themeIsCompact);
+    case 'outlined-white':
+      return genOutlineContainerStyles(theme, 'white', disabled, loading, themeIsCompact);
     case 'text-primary':
     case 'text-secondary':
     case 'text-danger':
+    case 'text-white':
       return {
         height: themeInlineText ? undefined : getButtonHeight(themeIsCompact),
         borderRadius: theme.__hd__.button.radii.text,
@@ -9790,14 +9807,51 @@ var StyledButtonContainer = index$a(reactNative.TouchableHighlight)(function (_r
         alignItems: 'center',
         padding: themeInlineText ? 0 : theme.__hd__.button.space["default"].textButtonPadding,
         borderWidth: 0,
-        backgroundColor: loading && !themeInlineText ? theme.__hd__.button.colors.textLoadingBackground : 'transparent'
+        backgroundColor: loading && !themeInlineText && themeButtonVariant !== 'text-white' ? theme.__hd__.button.colors.textLoadingBackground : 'transparent'
       };
   }
 });
-var StyledButtonText = index$a(Typography.Title)(function (_ref2) {
-  var disabled = _ref2.disabled,
-    themeButtonVariant = _ref2.themeButtonVariant,
+var genWhiteTextStyles = function genWhiteTextStyles(_ref2) {
+  var variant = _ref2.variant,
+    disabled = _ref2.disabled,
     theme = _ref2.theme;
+  if (disabled) {
+    switch (variant) {
+      case 'filled-white':
+        {
+          return {
+            color: theme.__hd__.button.colors.invertedText
+          };
+        }
+      case 'outlined-white':
+      case 'text-white':
+        {
+          return {
+            color: theme.__hd__.button.colors.disabledText
+          };
+        }
+    }
+  }
+  switch (variant) {
+    case 'filled-white':
+      {
+        return {
+          color: theme.__hd__.button.colors.primary
+        };
+      }
+    case 'outlined-white':
+    case 'text-white':
+      {
+        return {
+          color: theme.__hd__.button.colors.invertedText
+        };
+      }
+  }
+};
+var StyledButtonText = index$a(Typography.Title)(function (_ref3) {
+  var disabled = _ref3.disabled,
+    themeButtonVariant = _ref3.themeButtonVariant,
+    theme = _ref3.theme;
   var themeStyling = function themeStyling() {
     switch (themeButtonVariant) {
       case 'filled-primary':
@@ -9818,6 +9872,14 @@ var StyledButtonText = index$a(Typography.Title)(function (_ref2) {
         return genTextStyles(theme, 'secondary', disabled);
       case 'text-danger':
         return genTextStyles(theme, 'danger', disabled);
+      case 'filled-white':
+      case 'outlined-white':
+      case 'text-white':
+        return genWhiteTextStyles({
+          variant: themeButtonVariant,
+          disabled: disabled,
+          theme: theme
+        });
     }
   };
   return _objectSpread2({
@@ -9826,11 +9888,11 @@ var StyledButtonText = index$a(Typography.Title)(function (_ref2) {
   }, themeStyling());
 });
 var StyledSmallButtonText = StyledButtonText.withComponent(Typography.Body);
-var StyledButtonTitleOfVariantText = index$a(Typography.Body)(function (_ref3) {
-  var disabled = _ref3.disabled,
-    themeButtonVariant = _ref3.themeButtonVariant,
-    themeIsPressed = _ref3.themeIsPressed,
-    theme = _ref3.theme;
+var StyledButtonTitleOfVariantText = index$a(Typography.Body)(function (_ref4) {
+  var disabled = _ref4.disabled,
+    themeButtonVariant = _ref4.themeButtonVariant,
+    themeIsPressed = _ref4.themeIsPressed,
+    theme = _ref4.theme;
   var themeStyling = function themeStyling() {
     switch (themeButtonVariant) {
       case 'text-primary':
@@ -9839,6 +9901,12 @@ var StyledButtonTitleOfVariantText = index$a(Typography.Body)(function (_ref3) {
         return genTextStyles(theme, 'secondary', disabled, themeIsPressed);
       case 'text-danger':
         return genTextStyles(theme, 'danger', disabled, themeIsPressed);
+      case 'text-white':
+        return genWhiteTextStyles({
+          variant: 'text-white',
+          disabled: disabled,
+          theme: theme
+        });
     }
   };
   return _objectSpread2({
@@ -9848,10 +9916,10 @@ var StyledButtonTitleOfVariantText = index$a(Typography.Body)(function (_ref3) {
     textAlign: 'center'
   }, themeStyling());
 });
-var StyledButtonIconWrapper = index$a(reactNative.View)(function (_ref4) {
-  var themePosition = _ref4.themePosition,
-    theme = _ref4.theme,
-    themeIsCompact = _ref4.themeIsCompact;
+var StyledButtonIconWrapper = index$a(reactNative.View)(function (_ref5) {
+  var themePosition = _ref5.themePosition,
+    theme = _ref5.theme,
+    themeIsCompact = _ref5.themeIsCompact;
   switch (themePosition) {
     case 'left':
       return {
@@ -9863,12 +9931,12 @@ var StyledButtonIconWrapper = index$a(reactNative.View)(function (_ref4) {
       };
   }
 });
-var StyledButtonIcon = index$a(Icon)(function (_ref5) {
-  var disabled = _ref5.disabled,
-    themeButtonVariant = _ref5.themeButtonVariant,
-    themeIsPressed = _ref5.themeIsPressed,
-    theme = _ref5.theme,
-    themeIsCompact = _ref5.themeIsCompact;
+var StyledButtonIcon = index$a(Icon)(function (_ref6) {
+  var disabled = _ref6.disabled,
+    themeButtonVariant = _ref6.themeButtonVariant,
+    themeIsPressed = _ref6.themeIsPressed,
+    theme = _ref6.theme,
+    themeIsCompact = _ref6.themeIsCompact;
   var themeStyling = function themeStyling() {
     switch (themeButtonVariant) {
       case 'filled-primary':
@@ -9889,6 +9957,14 @@ var StyledButtonIcon = index$a(Icon)(function (_ref5) {
         return genTextStyles(theme, 'secondary', disabled, themeIsPressed);
       case 'text-danger':
         return genTextStyles(theme, 'danger', disabled, themeIsPressed);
+      case 'filled-white':
+      case 'outlined-white':
+      case 'text-white':
+        return genWhiteTextStyles({
+          variant: themeButtonVariant,
+          disabled: disabled,
+          theme: theme
+        });
     }
   };
   return _objectSpread2({
@@ -9902,17 +9978,20 @@ var isIconName = function isIconName(icon) {
 var FILLED_VARIANTS = {
   primary: 'filled-primary',
   secondary: 'filled-secondary',
-  danger: 'filled-danger'
+  danger: 'filled-danger',
+  white: 'filled-white'
 };
 var OUTLINED_VARIANTS = {
   primary: 'outlined-primary',
   secondary: 'outlined-secondary',
-  danger: 'outlined-danger'
+  danger: 'outlined-danger',
+  white: 'outlined-white'
 };
 var TEXT_VARIANTS = {
   primary: 'text-primary',
   secondary: 'text-secondary',
-  danger: 'text-danger'
+  danger: 'text-danger',
+  white: 'text-white'
 };
 var getThemeVariant = function getThemeVariant(variant, intent) {
   switch (variant) {
@@ -9934,23 +10013,29 @@ var getUnderlayColor = function getUnderlayColor(theme, themeVariant) {
       return theme.__hd__.button.colors.pressedBackground.filledSecondary;
     case 'filled-danger':
       return theme.__hd__.button.colors.pressedBackground.filledDanger;
+    case 'filled-white':
+      return theme.__hd__.button.colors.pressedBackground.filledWhite;
     case 'outlined-primary':
       return theme.__hd__.button.colors.pressedBackground.outlinedPrimary;
     case 'outlined-secondary':
       return theme.__hd__.button.colors.pressedBackground.outlinedSecondary;
     case 'outlined-danger':
       return theme.__hd__.button.colors.pressedBackground.outlineDanger;
+    case 'outlined-white':
+      return theme.__hd__.button.colors.pressedBackground.outlineWhite;
     case 'text-primary':
       return theme.__hd__.button.colors.pressedBackground.textPrimary;
     case 'text-secondary':
       return theme.__hd__.button.colors.pressedBackground.textSecondary;
     case 'text-danger':
       return theme.__hd__.button.colors.pressedBackground.textDanger;
+    case 'text-white':
+      return theme.__hd__.button.colors.pressedBackground.textWhite;
   }
 };
 var deprecatedVariants = ['filled-secondary', 'filled-danger', 'outlined-secondary', 'outlined-danger'];
 function isTextVariant(themeVariant) {
-  return ['text-primary', 'text-secondary', 'text-danger'].includes(themeVariant);
+  return ['text-primary', 'text-secondary', 'text-danger', 'text-white'].includes(themeVariant);
 }
 var Button = function Button(_ref) {
   var accessibilityHint = _ref.accessibilityHint,
@@ -9995,7 +10080,7 @@ var Button = function Button(_ref) {
   };
   var renderTitle = function renderTitle() {
     return isCompactVariant ? /*#__PURE__*/React__namespace.default.createElement(StyledSmallButtonText, {
-      variant: "small",
+      variant: "small-bold",
       ellipsizeMode: "tail",
       numberOfLines: 1,
       disabled: disabled,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hero-design/rn",
-  "version": "8.84.3",
+  "version": "8.86.0",
   "license": "MIT",
   "main": "lib/index.js",
   "module": "es/index.js",