@hero-design/rn 8.83.0 → 8.84.0

package/.turbo/turbo-build.log

@@ -1,7 +1,7 @@
-(node:3017) ExperimentalWarning: Importing JSON modules is an experimental feature and might change at any time
+(node:2999) 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 54.7s
+created lib/index.js, es/index.js in 52.3s

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @hero-design/rn
 
+## 8.84.0
+
+### Minor Changes
+
+- [#3571](https://github.com/Thinkei/hero-design/pull/3571) [`8326368063b84b3279fdabd6af1de088abed1deb`](https://github.com/Thinkei/hero-design/commit/8326368063b84b3279fdabd6af1de088abed1deb) Thanks [@phucdph](https://github.com/phucdph)! - [Button] Support compact variant
+
 ## 8.83.0
 
 ### Minor Changes

package/es/index.js

@@ -2484,13 +2484,23 @@ var getButtonTheme = function getButtonTheme(theme) {
     "default": theme.space.xxsmall
   };
   var space = {
-    buttonPadding: theme.space.medium,
-    textButtonPadding: theme.space.smallMedium,
-    iconPadding: theme.space.smallMedium,
+    "default": {
+      buttonPadding: theme.space.medium,
+      iconPadding: theme.space.smallMedium,
+      textButtonPadding: theme.space.smallMedium
+    },
+    compact: {
+      buttonPaddingVertical: theme.space.small,
+      buttonPaddingHorizontal: theme.space.medium,
+      iconPadding: theme.space.small
+    },
     utilityPadding: theme.space.small
   };
   var sizes = {
-    iconSize: theme.fontSizes.xxlarge
+    iconSize: {
+      "default": theme.fontSizes.xxlarge,
+      compact: theme.fontSizes.small
+    }
   };
   var radii = {
     "default": theme.radii['5xlarge'],
@@ -9634,7 +9644,15 @@ var LoadingIndicator = function LoadingIndicator(_ref2) {
   }, nativeProps), Array.from(new Array(count), renderLoadingDot, themeVariant));
 };
 
-var genFilledContainerStyles = function genFilledContainerStyles(theme, intent, disabled, loading) {
+var getButtonHeight = function getButtonHeight(themeIsCompact) {
+  switch (themeIsCompact) {
+    case true:
+      return scale(36);
+    default:
+      return scale(60);
+  }
+};
+var genFilledContainerStyles = function genFilledContainerStyles(theme, intent, disabled, loading, compact) {
   var backgroundColorStyling = function backgroundColorStyling() {
     if (!loading && disabled) {
       return {
@@ -9645,17 +9663,23 @@ var genFilledContainerStyles = function genFilledContainerStyles(theme, intent,
       backgroundColor: theme.__hd__.button.colors[intent]
     };
   };
-  return _objectSpread2({
-    height: scale(60),
+  return _objectSpread2(_objectSpread2({
+    height: getButtonHeight(compact),
     flexDirection: 'row',
     justifyContent: 'center',
-    alignItems: 'center',
+    alignItems: 'center'
+  }, compact ? {
+    alignSelf: 'flex-start',
+    paddingVertical: theme.__hd__.button.space.compact.buttonPaddingVertical,
+    paddingHorizontal: theme.__hd__.button.space["default"].buttonPadding
+  } : {
     alignSelf: 'stretch',
-    padding: theme.__hd__.button.space.buttonPadding,
+    padding: theme.__hd__.button.space["default"].buttonPadding
+  }), {}, {
     borderRadius: theme.__hd__.button.radii["default"]
   }, backgroundColorStyling());
 };
-var genOutlineContainerStyles = function genOutlineContainerStyles(theme, intent, disabled, loading) {
+var genOutlineContainerStyles = function genOutlineContainerStyles(theme, intent, disabled, loading, compact) {
   var borderColorStyling = function borderColorStyling() {
     if (!loading && disabled) {
       return {
@@ -9666,13 +9690,19 @@ var genOutlineContainerStyles = function genOutlineContainerStyles(theme, intent
       borderColor: theme.__hd__.button.colors[intent]
     };
   };
-  return _objectSpread2({
-    height: scale(60),
+  return _objectSpread2(_objectSpread2({
+    height: getButtonHeight(compact),
     flexDirection: 'row',
     justifyContent: 'center',
-    alignItems: 'center',
+    alignItems: 'center'
+  }, compact ? {
+    alignSelf: 'flex-start',
+    paddingVertical: theme.__hd__.button.space.compact.buttonPaddingVertical - theme.__hd__.button.borderWidth["default"],
+    paddingHorizontal: theme.__hd__.button.space["default"].buttonPadding - theme.__hd__.button.borderWidth["default"]
+  } : {
     alignSelf: 'stretch',
-    padding: theme.__hd__.button.space.buttonPadding - theme.__hd__.button.borderWidth["default"],
+    padding: theme.__hd__.button.space["default"].buttonPadding - theme.__hd__.button.borderWidth["default"]
+  }), {}, {
     borderWidth: theme.__hd__.button.borderWidth["default"],
     borderRadius: theme.__hd__.button.radii["default"],
     backgroundColor: 'transparent'
@@ -9699,31 +9729,34 @@ var StyledButtonContainer = index$a(TouchableHighlight)(function (_ref) {
     _ref$loading = _ref.loading,
     loading = _ref$loading === void 0 ? false : _ref$loading,
     themeButtonVariant = _ref.themeButtonVariant,
-    themeInlineText = _ref.themeInlineText,
-    theme = _ref.theme;
+    _ref$themeInlineText = _ref.themeInlineText,
+    themeInlineText = _ref$themeInlineText === void 0 ? false : _ref$themeInlineText,
+    theme = _ref.theme,
+    _ref$themeIsCompact = _ref.themeIsCompact,
+    themeIsCompact = _ref$themeIsCompact === void 0 ? false : _ref$themeIsCompact;
   switch (themeButtonVariant) {
     case 'filled-primary':
-      return genFilledContainerStyles(theme, 'primary', disabled, loading);
+      return genFilledContainerStyles(theme, 'primary', disabled, loading, themeIsCompact);
     case 'filled-secondary':
-      return genFilledContainerStyles(theme, 'secondary', disabled, loading);
+      return genFilledContainerStyles(theme, 'secondary', disabled, loading, themeIsCompact);
     case 'filled-danger':
-      return genFilledContainerStyles(theme, 'danger', disabled, loading);
+      return genFilledContainerStyles(theme, 'danger', disabled, loading, themeIsCompact);
     case 'outlined-primary':
-      return genOutlineContainerStyles(theme, 'primary', disabled, loading);
+      return genOutlineContainerStyles(theme, 'primary', disabled, loading, themeIsCompact);
     case 'outlined-secondary':
-      return genOutlineContainerStyles(theme, 'secondary', disabled, loading);
+      return genOutlineContainerStyles(theme, 'secondary', disabled, loading, themeIsCompact);
     case 'outlined-danger':
-      return genOutlineContainerStyles(theme, 'danger', disabled, loading);
+      return genOutlineContainerStyles(theme, 'danger', disabled, loading, themeIsCompact);
     case 'text-primary':
     case 'text-secondary':
     case 'text-danger':
       return {
-        height: themeInlineText ? undefined : scale(60),
+        height: themeInlineText ? undefined : getButtonHeight(themeIsCompact),
         borderRadius: theme.__hd__.button.radii.text,
         flexDirection: 'row',
         justifyContent: 'center',
         alignItems: 'center',
-        padding: themeInlineText ? 0 : theme.__hd__.button.space.textButtonPadding,
+        padding: themeInlineText ? 0 : theme.__hd__.button.space["default"].textButtonPadding,
         borderWidth: 0,
         backgroundColor: loading && !themeInlineText ? theme.__hd__.button.colors.textLoadingBackground : 'transparent'
       };
@@ -9760,6 +9793,7 @@ var StyledButtonText = index$a(Typography.Title)(function (_ref2) {
     textAlign: 'center'
   }, themeStyling());
 });
+var StyledSmallButtonText = StyledButtonText.withComponent(Typography.Body);
 var StyledButtonTitleOfVariantText = index$a(Typography.Body)(function (_ref3) {
   var disabled = _ref3.disabled,
     themeButtonVariant = _ref3.themeButtonVariant,
@@ -9784,15 +9818,16 @@ var StyledButtonTitleOfVariantText = index$a(Typography.Body)(function (_ref3) {
 });
 var StyledButtonIconWrapper = index$a(View)(function (_ref4) {
   var themePosition = _ref4.themePosition,
-    theme = _ref4.theme;
+    theme = _ref4.theme,
+    themeIsCompact = _ref4.themeIsCompact;
   switch (themePosition) {
     case 'left':
       return {
-        paddingRight: theme.__hd__.button.space.iconPadding
+        paddingRight: themeIsCompact ? theme.__hd__.button.space.compact.iconPadding : theme.__hd__.button.space["default"].iconPadding
       };
     case 'right':
       return {
-        paddingLeft: theme.__hd__.button.space.iconPadding
+        paddingLeft: themeIsCompact ? theme.__hd__.button.space.compact.iconPadding : theme.__hd__.button.space["default"].iconPadding
       };
   }
 });
@@ -9800,7 +9835,8 @@ var StyledButtonIcon = index$a(Icon)(function (_ref5) {
   var disabled = _ref5.disabled,
     themeButtonVariant = _ref5.themeButtonVariant,
     themeIsPressed = _ref5.themeIsPressed,
-    theme = _ref5.theme;
+    theme = _ref5.theme,
+    themeIsCompact = _ref5.themeIsCompact;
   var themeStyling = function themeStyling() {
     switch (themeButtonVariant) {
       case 'filled-primary':
@@ -9824,7 +9860,7 @@ var StyledButtonIcon = index$a(Icon)(function (_ref5) {
     }
   };
   return _objectSpread2({
-    fontSize: theme.__hd__.button.sizes.iconSize
+    fontSize: themeIsCompact ? theme.__hd__.button.sizes.iconSize.compact : theme.__hd__.button.sizes.iconSize["default"]
   }, themeStyling());
 });
 
@@ -9849,8 +9885,10 @@ var TEXT_VARIANTS = {
 var getThemeVariant = function getThemeVariant(variant, intent) {
   switch (variant) {
     case 'filled':
+    case 'filled-compact':
       return FILLED_VARIANTS[intent];
     case 'outlined':
+    case 'outlined-compact':
       return OUTLINED_VARIANTS[intent];
     case 'text':
       return TEXT_VARIANTS[intent];
@@ -9910,6 +9948,34 @@ var Button = function Button(_ref) {
     isPressed = _useState2[0],
     setIsPressed = _useState2[1];
   useDeprecation("Button variant ".concat(deprecatedVariants.join(', '), " are deprecated."), deprecatedVariants.includes(themeVariant));
+  var isCompactVariant = ['filled-compact', 'outlined-compact'].includes(variant);
+  var isRenderTextVariant = isTextVariant(themeVariant);
+  var renderTextVariantTitle = function renderTextVariantTitle() {
+    if (!isRenderTextVariant) return null;
+    return /*#__PURE__*/React__default.createElement(StyledButtonTitleOfVariantText, {
+      variant: isCompactVariant ? 'small-bold' : 'regular-bold',
+      ellipsizeMode: "tail",
+      numberOfLines: 1,
+      disabled: disabled,
+      themeButtonVariant: themeVariant,
+      themeIsPressed: isPressed
+    }, text);
+  };
+  var renderTitle = function renderTitle() {
+    return isCompactVariant ? /*#__PURE__*/React__default.createElement(StyledSmallButtonText, {
+      variant: "small",
+      ellipsizeMode: "tail",
+      numberOfLines: 1,
+      disabled: disabled,
+      themeButtonVariant: themeVariant
+    }, text) : /*#__PURE__*/React__default.createElement(StyledButtonText, {
+      level: "h5",
+      ellipsizeMode: "tail",
+      numberOfLines: 1,
+      disabled: disabled,
+      themeButtonVariant: themeVariant
+    }, text);
+  };
   return /*#__PURE__*/React__default.createElement(StyledButtonContainer, {
     accessibilityHint: accessibilityHint,
     accessibilityLabel: accessibilityLabel,
@@ -9926,39 +9992,31 @@ var Button = function Button(_ref) {
     },
     onPressOut: function onPressOut() {
       return isInlineText && setIsPressed(false);
-    }
+    },
+    themeIsCompact: isCompactVariant
   }, loading === true ? /*#__PURE__*/React__default.createElement(LoadingIndicator, {
     testID: "".concat(testID, "-loading-indicator"),
     themeVariant: themeVariant
   }) : /*#__PURE__*/React__default.createElement(React__default.Fragment, null, icon !== undefined && /*#__PURE__*/React__default.createElement(StyledButtonIconWrapper, {
-    themePosition: "left"
+    themePosition: "left",
+    themeIsCompact: isCompactVariant
   }, isIconName(icon) ? /*#__PURE__*/React__default.createElement(StyledButtonIcon, {
     disabled: disabled,
     icon: icon,
     testID: "".concat(testID, "-left-icon"),
     themeButtonVariant: themeVariant,
-    themeIsPressed: isPressed
-  }) : icon), isTextVariant(themeVariant) ? /*#__PURE__*/React__default.createElement(StyledButtonTitleOfVariantText, {
-    variant: "regular-bold",
-    ellipsizeMode: "tail",
-    numberOfLines: 1,
-    disabled: disabled,
-    themeButtonVariant: themeVariant,
-    themeIsPressed: isPressed
-  }, text) : /*#__PURE__*/React__default.createElement(StyledButtonText, {
-    level: "h5",
-    ellipsizeMode: "tail",
-    numberOfLines: 1,
-    disabled: disabled,
-    themeButtonVariant: themeVariant
-  }, text), rightIcon !== undefined && /*#__PURE__*/React__default.createElement(StyledButtonIconWrapper, {
-    themePosition: "right"
+    themeIsPressed: isPressed,
+    themeIsCompact: isCompactVariant
+  }) : icon), isRenderTextVariant ? renderTextVariantTitle() : renderTitle(), rightIcon !== undefined && /*#__PURE__*/React__default.createElement(StyledButtonIconWrapper, {
+    themePosition: "right",
+    themeIsCompact: isCompactVariant
   }, isIconName(rightIcon) ? /*#__PURE__*/React__default.createElement(StyledButtonIcon, {
     disabled: disabled,
     icon: rightIcon,
     testID: "".concat(testID, "-right-icon"),
     themeButtonVariant: themeVariant,
-    themeIsPressed: isPressed
+    themeIsPressed: isPressed,
+    themeIsCompact: isCompactVariant
   }) : rightIcon)));
 };
 
@@ -9999,7 +10057,7 @@ var ButtonContainer = index$a(TouchableOpacity)(function (_ref) {
 var IconWrapper = index$a(View)(function (_ref2) {
   var theme = _ref2.theme;
   return {
-    paddingRight: theme.__hd__.button.space.iconPadding
+    paddingRight: theme.__hd__.button.space["default"].iconPadding
   };
 });
 var ButtonText = index$a(Typography.Body)({

package/lib/index.js

@@ -2512,13 +2512,23 @@ var getButtonTheme = function getButtonTheme(theme) {
     "default": theme.space.xxsmall
   };
   var space = {
-    buttonPadding: theme.space.medium,
-    textButtonPadding: theme.space.smallMedium,
-    iconPadding: theme.space.smallMedium,
+    "default": {
+      buttonPadding: theme.space.medium,
+      iconPadding: theme.space.smallMedium,
+      textButtonPadding: theme.space.smallMedium
+    },
+    compact: {
+      buttonPaddingVertical: theme.space.small,
+      buttonPaddingHorizontal: theme.space.medium,
+      iconPadding: theme.space.small
+    },
     utilityPadding: theme.space.small
   };
   var sizes = {
-    iconSize: theme.fontSizes.xxlarge
+    iconSize: {
+      "default": theme.fontSizes.xxlarge,
+      compact: theme.fontSizes.small
+    }
   };
   var radii = {
     "default": theme.radii['5xlarge'],
@@ -9662,7 +9672,15 @@ var LoadingIndicator = function LoadingIndicator(_ref2) {
   }, nativeProps), Array.from(new Array(count), renderLoadingDot, themeVariant));
 };
 
-var genFilledContainerStyles = function genFilledContainerStyles(theme, intent, disabled, loading) {
+var getButtonHeight = function getButtonHeight(themeIsCompact) {
+  switch (themeIsCompact) {
+    case true:
+      return scale(36);
+    default:
+      return scale(60);
+  }
+};
+var genFilledContainerStyles = function genFilledContainerStyles(theme, intent, disabled, loading, compact) {
   var backgroundColorStyling = function backgroundColorStyling() {
     if (!loading && disabled) {
       return {
@@ -9673,17 +9691,23 @@ var genFilledContainerStyles = function genFilledContainerStyles(theme, intent,
       backgroundColor: theme.__hd__.button.colors[intent]
     };
   };
-  return _objectSpread2({
-    height: scale(60),
+  return _objectSpread2(_objectSpread2({
+    height: getButtonHeight(compact),
     flexDirection: 'row',
     justifyContent: 'center',
-    alignItems: 'center',
+    alignItems: 'center'
+  }, compact ? {
+    alignSelf: 'flex-start',
+    paddingVertical: theme.__hd__.button.space.compact.buttonPaddingVertical,
+    paddingHorizontal: theme.__hd__.button.space["default"].buttonPadding
+  } : {
     alignSelf: 'stretch',
-    padding: theme.__hd__.button.space.buttonPadding,
+    padding: theme.__hd__.button.space["default"].buttonPadding
+  }), {}, {
     borderRadius: theme.__hd__.button.radii["default"]
   }, backgroundColorStyling());
 };
-var genOutlineContainerStyles = function genOutlineContainerStyles(theme, intent, disabled, loading) {
+var genOutlineContainerStyles = function genOutlineContainerStyles(theme, intent, disabled, loading, compact) {
   var borderColorStyling = function borderColorStyling() {
     if (!loading && disabled) {
       return {
@@ -9694,13 +9718,19 @@ var genOutlineContainerStyles = function genOutlineContainerStyles(theme, intent
       borderColor: theme.__hd__.button.colors[intent]
     };
   };
-  return _objectSpread2({
-    height: scale(60),
+  return _objectSpread2(_objectSpread2({
+    height: getButtonHeight(compact),
     flexDirection: 'row',
     justifyContent: 'center',
-    alignItems: 'center',
+    alignItems: 'center'
+  }, compact ? {
+    alignSelf: 'flex-start',
+    paddingVertical: theme.__hd__.button.space.compact.buttonPaddingVertical - theme.__hd__.button.borderWidth["default"],
+    paddingHorizontal: theme.__hd__.button.space["default"].buttonPadding - theme.__hd__.button.borderWidth["default"]
+  } : {
     alignSelf: 'stretch',
-    padding: theme.__hd__.button.space.buttonPadding - theme.__hd__.button.borderWidth["default"],
+    padding: theme.__hd__.button.space["default"].buttonPadding - theme.__hd__.button.borderWidth["default"]
+  }), {}, {
     borderWidth: theme.__hd__.button.borderWidth["default"],
     borderRadius: theme.__hd__.button.radii["default"],
     backgroundColor: 'transparent'
@@ -9727,31 +9757,34 @@ var StyledButtonContainer = index$a(reactNative.TouchableHighlight)(function (_r
     _ref$loading = _ref.loading,
     loading = _ref$loading === void 0 ? false : _ref$loading,
     themeButtonVariant = _ref.themeButtonVariant,
-    themeInlineText = _ref.themeInlineText,
-    theme = _ref.theme;
+    _ref$themeInlineText = _ref.themeInlineText,
+    themeInlineText = _ref$themeInlineText === void 0 ? false : _ref$themeInlineText,
+    theme = _ref.theme,
+    _ref$themeIsCompact = _ref.themeIsCompact,
+    themeIsCompact = _ref$themeIsCompact === void 0 ? false : _ref$themeIsCompact;
   switch (themeButtonVariant) {
     case 'filled-primary':
-      return genFilledContainerStyles(theme, 'primary', disabled, loading);
+      return genFilledContainerStyles(theme, 'primary', disabled, loading, themeIsCompact);
     case 'filled-secondary':
-      return genFilledContainerStyles(theme, 'secondary', disabled, loading);
+      return genFilledContainerStyles(theme, 'secondary', disabled, loading, themeIsCompact);
     case 'filled-danger':
-      return genFilledContainerStyles(theme, 'danger', disabled, loading);
+      return genFilledContainerStyles(theme, 'danger', disabled, loading, themeIsCompact);
     case 'outlined-primary':
-      return genOutlineContainerStyles(theme, 'primary', disabled, loading);
+      return genOutlineContainerStyles(theme, 'primary', disabled, loading, themeIsCompact);
     case 'outlined-secondary':
-      return genOutlineContainerStyles(theme, 'secondary', disabled, loading);
+      return genOutlineContainerStyles(theme, 'secondary', disabled, loading, themeIsCompact);
     case 'outlined-danger':
-      return genOutlineContainerStyles(theme, 'danger', disabled, loading);
+      return genOutlineContainerStyles(theme, 'danger', disabled, loading, themeIsCompact);
     case 'text-primary':
     case 'text-secondary':
     case 'text-danger':
       return {
-        height: themeInlineText ? undefined : scale(60),
+        height: themeInlineText ? undefined : getButtonHeight(themeIsCompact),
         borderRadius: theme.__hd__.button.radii.text,
         flexDirection: 'row',
         justifyContent: 'center',
         alignItems: 'center',
-        padding: themeInlineText ? 0 : theme.__hd__.button.space.textButtonPadding,
+        padding: themeInlineText ? 0 : theme.__hd__.button.space["default"].textButtonPadding,
         borderWidth: 0,
         backgroundColor: loading && !themeInlineText ? theme.__hd__.button.colors.textLoadingBackground : 'transparent'
       };
@@ -9788,6 +9821,7 @@ var StyledButtonText = index$a(Typography.Title)(function (_ref2) {
     textAlign: 'center'
   }, themeStyling());
 });
+var StyledSmallButtonText = StyledButtonText.withComponent(Typography.Body);
 var StyledButtonTitleOfVariantText = index$a(Typography.Body)(function (_ref3) {
   var disabled = _ref3.disabled,
     themeButtonVariant = _ref3.themeButtonVariant,
@@ -9812,15 +9846,16 @@ var StyledButtonTitleOfVariantText = index$a(Typography.Body)(function (_ref3) {
 });
 var StyledButtonIconWrapper = index$a(reactNative.View)(function (_ref4) {
   var themePosition = _ref4.themePosition,
-    theme = _ref4.theme;
+    theme = _ref4.theme,
+    themeIsCompact = _ref4.themeIsCompact;
   switch (themePosition) {
     case 'left':
       return {
-        paddingRight: theme.__hd__.button.space.iconPadding
+        paddingRight: themeIsCompact ? theme.__hd__.button.space.compact.iconPadding : theme.__hd__.button.space["default"].iconPadding
       };
     case 'right':
       return {
-        paddingLeft: theme.__hd__.button.space.iconPadding
+        paddingLeft: themeIsCompact ? theme.__hd__.button.space.compact.iconPadding : theme.__hd__.button.space["default"].iconPadding
       };
   }
 });
@@ -9828,7 +9863,8 @@ var StyledButtonIcon = index$a(Icon)(function (_ref5) {
   var disabled = _ref5.disabled,
     themeButtonVariant = _ref5.themeButtonVariant,
     themeIsPressed = _ref5.themeIsPressed,
-    theme = _ref5.theme;
+    theme = _ref5.theme,
+    themeIsCompact = _ref5.themeIsCompact;
   var themeStyling = function themeStyling() {
     switch (themeButtonVariant) {
       case 'filled-primary':
@@ -9852,7 +9888,7 @@ var StyledButtonIcon = index$a(Icon)(function (_ref5) {
     }
   };
   return _objectSpread2({
-    fontSize: theme.__hd__.button.sizes.iconSize
+    fontSize: themeIsCompact ? theme.__hd__.button.sizes.iconSize.compact : theme.__hd__.button.sizes.iconSize["default"]
   }, themeStyling());
 });
 
@@ -9877,8 +9913,10 @@ var TEXT_VARIANTS = {
 var getThemeVariant = function getThemeVariant(variant, intent) {
   switch (variant) {
     case 'filled':
+    case 'filled-compact':
       return FILLED_VARIANTS[intent];
     case 'outlined':
+    case 'outlined-compact':
       return OUTLINED_VARIANTS[intent];
     case 'text':
       return TEXT_VARIANTS[intent];
@@ -9938,6 +9976,34 @@ var Button = function Button(_ref) {
     isPressed = _useState2[0],
     setIsPressed = _useState2[1];
   useDeprecation("Button variant ".concat(deprecatedVariants.join(', '), " are deprecated."), deprecatedVariants.includes(themeVariant));
+  var isCompactVariant = ['filled-compact', 'outlined-compact'].includes(variant);
+  var isRenderTextVariant = isTextVariant(themeVariant);
+  var renderTextVariantTitle = function renderTextVariantTitle() {
+    if (!isRenderTextVariant) return null;
+    return /*#__PURE__*/React__namespace.default.createElement(StyledButtonTitleOfVariantText, {
+      variant: isCompactVariant ? 'small-bold' : 'regular-bold',
+      ellipsizeMode: "tail",
+      numberOfLines: 1,
+      disabled: disabled,
+      themeButtonVariant: themeVariant,
+      themeIsPressed: isPressed
+    }, text);
+  };
+  var renderTitle = function renderTitle() {
+    return isCompactVariant ? /*#__PURE__*/React__namespace.default.createElement(StyledSmallButtonText, {
+      variant: "small",
+      ellipsizeMode: "tail",
+      numberOfLines: 1,
+      disabled: disabled,
+      themeButtonVariant: themeVariant
+    }, text) : /*#__PURE__*/React__namespace.default.createElement(StyledButtonText, {
+      level: "h5",
+      ellipsizeMode: "tail",
+      numberOfLines: 1,
+      disabled: disabled,
+      themeButtonVariant: themeVariant
+    }, text);
+  };
   return /*#__PURE__*/React__namespace.default.createElement(StyledButtonContainer, {
     accessibilityHint: accessibilityHint,
     accessibilityLabel: accessibilityLabel,
@@ -9954,39 +10020,31 @@ var Button = function Button(_ref) {
     },
     onPressOut: function onPressOut() {
       return isInlineText && setIsPressed(false);
-    }
+    },
+    themeIsCompact: isCompactVariant
   }, loading === true ? /*#__PURE__*/React__namespace.default.createElement(LoadingIndicator, {
     testID: "".concat(testID, "-loading-indicator"),
     themeVariant: themeVariant
   }) : /*#__PURE__*/React__namespace.default.createElement(React__namespace.default.Fragment, null, icon !== undefined && /*#__PURE__*/React__namespace.default.createElement(StyledButtonIconWrapper, {
-    themePosition: "left"
+    themePosition: "left",
+    themeIsCompact: isCompactVariant
   }, isIconName(icon) ? /*#__PURE__*/React__namespace.default.createElement(StyledButtonIcon, {
     disabled: disabled,
     icon: icon,
     testID: "".concat(testID, "-left-icon"),
     themeButtonVariant: themeVariant,
-    themeIsPressed: isPressed
-  }) : icon), isTextVariant(themeVariant) ? /*#__PURE__*/React__namespace.default.createElement(StyledButtonTitleOfVariantText, {
-    variant: "regular-bold",
-    ellipsizeMode: "tail",
-    numberOfLines: 1,
-    disabled: disabled,
-    themeButtonVariant: themeVariant,
-    themeIsPressed: isPressed
-  }, text) : /*#__PURE__*/React__namespace.default.createElement(StyledButtonText, {
-    level: "h5",
-    ellipsizeMode: "tail",
-    numberOfLines: 1,
-    disabled: disabled,
-    themeButtonVariant: themeVariant
-  }, text), rightIcon !== undefined && /*#__PURE__*/React__namespace.default.createElement(StyledButtonIconWrapper, {
-    themePosition: "right"
+    themeIsPressed: isPressed,
+    themeIsCompact: isCompactVariant
+  }) : icon), isRenderTextVariant ? renderTextVariantTitle() : renderTitle(), rightIcon !== undefined && /*#__PURE__*/React__namespace.default.createElement(StyledButtonIconWrapper, {
+    themePosition: "right",
+    themeIsCompact: isCompactVariant
   }, isIconName(rightIcon) ? /*#__PURE__*/React__namespace.default.createElement(StyledButtonIcon, {
     disabled: disabled,
     icon: rightIcon,
     testID: "".concat(testID, "-right-icon"),
     themeButtonVariant: themeVariant,
-    themeIsPressed: isPressed
+    themeIsPressed: isPressed,
+    themeIsCompact: isCompactVariant
   }) : rightIcon)));
 };
 
@@ -10027,7 +10085,7 @@ var ButtonContainer = index$a(reactNative.TouchableOpacity)(function (_ref) {
 var IconWrapper = index$a(reactNative.View)(function (_ref2) {
   var theme = _ref2.theme;
   return {
-    paddingRight: theme.__hd__.button.space.iconPadding
+    paddingRight: theme.__hd__.button.space["default"].iconPadding
   };
 });
 var ButtonText = index$a(Typography.Body)({

package/package.json

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