@hero-design/rn 8.73.0 → 8.74.0

package/.turbo/turbo-build.log

@@ -1,8 +1,8 @@
-(node:2948) ExperimentalWarning: Import assertions are not a stable feature of the JavaScript language. Avoid relying on their current behavior and syntax as those might change in a future version of Node.js.
+(node:3037) ExperimentalWarning: Import assertions are not a stable feature of the JavaScript language. Avoid relying on their current behavior and syntax as those might change in a future version of Node.js.
 (Use `node --trace-warnings ...` to show where the warning was created)
-(node:2948) ExperimentalWarning: Importing JSON modules is an experimental feature and might change at any time
+(node:3037) ExperimentalWarning: Importing JSON modules is an experimental feature and might change at any time
 
 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 52.5s
+created lib/index.js, es/index.js in 52.2s

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # @hero-design/rn
 
+## 8.74.0
+
+### Minor Changes
+
+- [#3449](https://github.com/Thinkei/hero-design/pull/3449) [`b3029bb02497703734c5fab90aff67d20b94940b`](https://github.com/Thinkei/hero-design/commit/b3029bb02497703734c5fab90aff67d20b94940b) Thanks [@vinhphan-eh](https://github.com/vinhphan-eh)! - [Icon][typography] Add muted intent
+
+## 8.73.1
+
+### Patch Changes
+
+- [#3447](https://github.com/Thinkei/hero-design/pull/3447) [`c64c609d963c33c72ad416c3833696a8c20f039c`](https://github.com/Thinkei/hero-design/commit/c64c609d963c33c72ad416c3833696a8c20f039c) Thanks [@phucdph](https://github.com/phucdph)! - [MapPin] Update Icon color
+
+- [#3445](https://github.com/Thinkei/hero-design/pull/3445) [`7deae3d675374b98dc1d056a21a4e623db963bef`](https://github.com/Thinkei/hero-design/commit/7deae3d675374b98dc1d056a21a4e623db963bef) Thanks [@vinhphan-eh](https://github.com/vinhphan-eh)! - [Chip] Reduce outlined border width
+
 ## 8.73.0
 
 ### Minor Changes

package/es/index.js

@@ -2654,19 +2654,15 @@ var getChipTheme = function getChipTheme(theme) {
     wrapperVerticalPadding: theme.space.small,
     compactWrapperHorizontalPadding: theme.space.small,
     compactWrapperVerticalPadding: theme.space.xsmall,
-    iconWrapperHorizontalMargin: theme.space.small,
-    outlinedSelectedMarginTop: -theme.space.xxsmall
-  };
-  var sizes = {
-    outlinedDefaultBorder: theme.borderWidths.base,
-    outlinedSelectedBorder: theme.borderWidths.medium
+    iconWrapperHorizontalMargin: theme.space.small
   };
   var radii = {
     wrapper: theme.radii.rounded
   };
   var borderWidths = {
     wrapper: theme.borderWidths.base,
-    icon: theme.borderWidths.medium
+    icon: theme.borderWidths.medium,
+    outlinedDefaultBorder: theme.borderWidths.base
   };
   var shadows = {
     filledWrapper: theme.shadows["default"]
@@ -2674,7 +2670,6 @@ var getChipTheme = function getChipTheme(theme) {
   return {
     colors: colors,
     space: space,
-    sizes: sizes,
     radii: radii,
     borderWidths: borderWidths,
     shadows: shadows
@@ -2907,7 +2902,8 @@ var getIconTheme = function getIconTheme(theme) {
     success: theme.colors.success,
     warning: theme.colors.warning,
     disabledText: theme.colors.disabledOnDefaultGlobalSurface,
-    invertedText: theme.colors.onDarkGlobalSurface
+    invertedText: theme.colors.onDarkGlobalSurface,
+    muted: theme.colors.mutedOnDefaultGlobalSurface
   };
   var sizes = {
     xsmall: theme.fontSizes.large,
@@ -3684,7 +3680,8 @@ var getTypographyTheme = function getTypographyTheme(theme) {
     success: theme.colors.success,
     inverted: theme.colors.onDarkGlobalSurface,
     archived: theme.colors.onArchivedSurface,
-    disabled: theme.colors.disabledOnDefaultGlobalSurface
+    disabled: theme.colors.disabledOnDefaultGlobalSurface,
+    muted: theme.colors.mutedOnDefaultGlobalSurface
   };
   var fontSizes = {
     xsmall: theme.fontSizes.xsmall,
@@ -3929,8 +3926,7 @@ var getMapPinTheme = function getMapPinTheme(theme) {
       applied: theme.colors.secondary
     },
     badge: theme.colors.secondary,
-    background: theme.colors.defaultGlobalSurface,
-    iconBackground: theme.colors.mutedOnDefaultGlobalSurface
+    background: theme.colors.defaultGlobalSurface
   };
   var radii = {
     "default": theme.radii.large
@@ -7798,7 +7794,8 @@ var COLOR_INTENTS = {
   success: 'success',
   warning: 'warning',
   'disabled-text': 'disabledText',
-  'text-inverted': 'invertedText'
+  'text-inverted': 'invertedText',
+  muted: 'muted'
 };
 var StyledHeroIcon = index$a(HeroIcon)(function (_ref) {
   var themeIntent = _ref.themeIntent,
@@ -13009,7 +13006,7 @@ var StyledChipWrapper = index$a(TouchableOpacity)(function (_ref) {
         {
           return {
             borderColor: themeSelected ? theme.__hd__.chip.colors.outlinedSelectedBorder : theme.__hd__.chip.colors.outlinedDefaultBorder,
-            borderWidth: themeSelected ? theme.__hd__.chip.sizes.outlinedSelectedBorder : theme.__hd__.chip.sizes.outlinedDefaultBorder
+            borderWidth: theme.__hd__.chip.borderWidths.outlinedDefaultBorder
           };
         }
       case 'compact':
@@ -13089,8 +13086,7 @@ var StyledChipWrapper = index$a(TouchableOpacity)(function (_ref) {
     flexDirection: 'row',
     alignItems: 'center',
     justifyContent: 'center',
-    borderRadius: theme.__hd__.chip.radii.wrapper,
-    marginTop: themeSelected && themeVariant === 'outlined' ? theme.__hd__.chip.space.outlinedSelectedMarginTop : undefined
+    borderRadius: theme.__hd__.chip.radii.wrapper
   }, getShadowStyles()), getBorderStyles()), getPaddingStyles()), getBackgroundStyles());
 });
 
@@ -15749,10 +15745,9 @@ var StyledContainer$3 = index$a(View)(function (_ref) {
 });
 var StyledContent = index$a(View)(function (_ref2) {
   var theme = _ref2.theme,
-    themeState = _ref2.themeState,
-    themeIsIcon = _ref2.themeIsIcon;
+    themeState = _ref2.themeState;
   return {
-    backgroundColor: themeIsIcon ? theme.__hd__.mapPin.colors.iconBackground : theme.__hd__.mapPin.colors.background,
+    backgroundColor: theme.__hd__.mapPin.colors.background,
     borderRadius: theme.__hd__.mapPin.radii["default"],
     borderWidth: theme.__hd__.mapPin.borderWidths["default"],
     borderColor: theme.__hd__.mapPin.colors.border[themeState],
@@ -15844,14 +15839,13 @@ var MapPin = function MapPin(_ref) {
     style: style,
     testID: testID
   }), /*#__PURE__*/React__default.createElement(StyledContent, {
-    themeState: state,
-    themeIsIcon: !!icon
+    themeState: state
   }, image && /*#__PURE__*/React__default.createElement(StyledImage, _extends$1({
     testID: testID ? "".concat(testID, "-image") : undefined
   }, image)), icon && /*#__PURE__*/React__default.createElement(Icon, {
     icon: icon,
     size: "xsmall",
-    intent: "text-inverted",
+    intent: "text",
     testID: testID ? "".concat(testID, "-icon") : undefined
   })), badgeIcon && /*#__PURE__*/React__default.createElement(StyledBadge$1, {
     icon: badgeIcon,

package/lib/index.js

@@ -2681,19 +2681,15 @@ var getChipTheme = function getChipTheme(theme) {
     wrapperVerticalPadding: theme.space.small,
     compactWrapperHorizontalPadding: theme.space.small,
     compactWrapperVerticalPadding: theme.space.xsmall,
-    iconWrapperHorizontalMargin: theme.space.small,
-    outlinedSelectedMarginTop: -theme.space.xxsmall
-  };
-  var sizes = {
-    outlinedDefaultBorder: theme.borderWidths.base,
-    outlinedSelectedBorder: theme.borderWidths.medium
+    iconWrapperHorizontalMargin: theme.space.small
   };
   var radii = {
     wrapper: theme.radii.rounded
   };
   var borderWidths = {
     wrapper: theme.borderWidths.base,
-    icon: theme.borderWidths.medium
+    icon: theme.borderWidths.medium,
+    outlinedDefaultBorder: theme.borderWidths.base
   };
   var shadows = {
     filledWrapper: theme.shadows["default"]
@@ -2701,7 +2697,6 @@ var getChipTheme = function getChipTheme(theme) {
   return {
     colors: colors,
     space: space,
-    sizes: sizes,
     radii: radii,
     borderWidths: borderWidths,
     shadows: shadows
@@ -2934,7 +2929,8 @@ var getIconTheme = function getIconTheme(theme) {
     success: theme.colors.success,
     warning: theme.colors.warning,
     disabledText: theme.colors.disabledOnDefaultGlobalSurface,
-    invertedText: theme.colors.onDarkGlobalSurface
+    invertedText: theme.colors.onDarkGlobalSurface,
+    muted: theme.colors.mutedOnDefaultGlobalSurface
   };
   var sizes = {
     xsmall: theme.fontSizes.large,
@@ -3711,7 +3707,8 @@ var getTypographyTheme = function getTypographyTheme(theme) {
     success: theme.colors.success,
     inverted: theme.colors.onDarkGlobalSurface,
     archived: theme.colors.onArchivedSurface,
-    disabled: theme.colors.disabledOnDefaultGlobalSurface
+    disabled: theme.colors.disabledOnDefaultGlobalSurface,
+    muted: theme.colors.mutedOnDefaultGlobalSurface
   };
   var fontSizes = {
     xsmall: theme.fontSizes.xsmall,
@@ -3956,8 +3953,7 @@ var getMapPinTheme = function getMapPinTheme(theme) {
       applied: theme.colors.secondary
     },
     badge: theme.colors.secondary,
-    background: theme.colors.defaultGlobalSurface,
-    iconBackground: theme.colors.mutedOnDefaultGlobalSurface
+    background: theme.colors.defaultGlobalSurface
   };
   var radii = {
     "default": theme.radii.large
@@ -7825,7 +7821,8 @@ var COLOR_INTENTS = {
   success: 'success',
   warning: 'warning',
   'disabled-text': 'disabledText',
-  'text-inverted': 'invertedText'
+  'text-inverted': 'invertedText',
+  muted: 'muted'
 };
 var StyledHeroIcon = index$a(HeroIcon)(function (_ref) {
   var themeIntent = _ref.themeIntent,
@@ -13036,7 +13033,7 @@ var StyledChipWrapper = index$a(reactNative.TouchableOpacity)(function (_ref) {
         {
           return {
             borderColor: themeSelected ? theme.__hd__.chip.colors.outlinedSelectedBorder : theme.__hd__.chip.colors.outlinedDefaultBorder,
-            borderWidth: themeSelected ? theme.__hd__.chip.sizes.outlinedSelectedBorder : theme.__hd__.chip.sizes.outlinedDefaultBorder
+            borderWidth: theme.__hd__.chip.borderWidths.outlinedDefaultBorder
           };
         }
       case 'compact':
@@ -13116,8 +13113,7 @@ var StyledChipWrapper = index$a(reactNative.TouchableOpacity)(function (_ref) {
     flexDirection: 'row',
     alignItems: 'center',
     justifyContent: 'center',
-    borderRadius: theme.__hd__.chip.radii.wrapper,
-    marginTop: themeSelected && themeVariant === 'outlined' ? theme.__hd__.chip.space.outlinedSelectedMarginTop : undefined
+    borderRadius: theme.__hd__.chip.radii.wrapper
   }, getShadowStyles()), getBorderStyles()), getPaddingStyles()), getBackgroundStyles());
 });
 
@@ -15776,10 +15772,9 @@ var StyledContainer$3 = index$a(reactNative.View)(function (_ref) {
 });
 var StyledContent = index$a(reactNative.View)(function (_ref2) {
   var theme = _ref2.theme,
-    themeState = _ref2.themeState,
-    themeIsIcon = _ref2.themeIsIcon;
+    themeState = _ref2.themeState;
   return {
-    backgroundColor: themeIsIcon ? theme.__hd__.mapPin.colors.iconBackground : theme.__hd__.mapPin.colors.background,
+    backgroundColor: theme.__hd__.mapPin.colors.background,
     borderRadius: theme.__hd__.mapPin.radii["default"],
     borderWidth: theme.__hd__.mapPin.borderWidths["default"],
     borderColor: theme.__hd__.mapPin.colors.border[themeState],
@@ -15871,14 +15866,13 @@ var MapPin = function MapPin(_ref) {
     style: style,
     testID: testID
   }), /*#__PURE__*/React__namespace.default.createElement(StyledContent, {
-    themeState: state,
-    themeIsIcon: !!icon
+    themeState: state
   }, image && /*#__PURE__*/React__namespace.default.createElement(StyledImage, _extends$1({
     testID: testID ? "".concat(testID, "-image") : undefined
   }, image)), icon && /*#__PURE__*/React__namespace.default.createElement(Icon, {
     icon: icon,
     size: "xsmall",
-    intent: "text-inverted",
+    intent: "text",
     testID: testID ? "".concat(testID, "-icon") : undefined
   })), badgeIcon && /*#__PURE__*/React__namespace.default.createElement(StyledBadge$1, {
     icon: badgeIcon,

package/package.json

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

package/src/components/Chip/StyledChip.tsx

@@ -27,9 +27,7 @@ const StyledChipWrapper = styled(TouchableOpacity)<StyledChipWrapperProps>(
             borderColor: themeSelected
               ? theme.__hd__.chip.colors.outlinedSelectedBorder
               : theme.__hd__.chip.colors.outlinedDefaultBorder,
-            borderWidth: themeSelected
-              ? theme.__hd__.chip.sizes.outlinedSelectedBorder
-              : theme.__hd__.chip.sizes.outlinedDefaultBorder,
+            borderWidth: theme.__hd__.chip.borderWidths.outlinedDefaultBorder,
           };
         }
         case 'compact':
@@ -112,10 +110,6 @@ const StyledChipWrapper = styled(TouchableOpacity)<StyledChipWrapperProps>(
       alignItems: 'center',
       justifyContent: 'center',
       borderRadius: theme.__hd__.chip.radii.wrapper,
-      marginTop:
-        themeSelected && themeVariant === 'outlined'
-          ? theme.__hd__.chip.space.outlinedSelectedMarginTop
-          : undefined,
       ...getShadowStyles(),
       ...getBorderStyles(),
       ...getPaddingStyles(),

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

@@ -43,10 +43,9 @@ exports[`Chip does not render selected icon when showSelectedIcon is false 1`] =
         "backgroundColor": "#e8e9ea",
         "borderColor": "#001f23",
         "borderRadius": 999,
-        "borderWidth": 2,
+        "borderWidth": 1,
         "flexDirection": "row",
         "justifyContent": "center",
-        "marginTop": -2,
         "opacity": 1,
         "paddingHorizontal": 12,
         "paddingVertical": 8,
@@ -143,7 +142,6 @@ exports[`Chip renders correctly when selected is false 1`] = `
         "borderWidth": 1,
         "flexDirection": "row",
         "justifyContent": "center",
-        "marginTop": undefined,
         "opacity": 1,
         "paddingHorizontal": 12,
         "paddingVertical": 8,
@@ -237,10 +235,9 @@ exports[`Chip renders correctly when selected is true 1`] = `
         "backgroundColor": "#e8e9ea",
         "borderColor": "#001f23",
         "borderRadius": 999,
-        "borderWidth": 2,
+        "borderWidth": 1,
         "flexDirection": "row",
         "justifyContent": "center",
-        "marginTop": -2,
         "opacity": 1,
         "paddingHorizontal": 12,
         "paddingVertical": 8,
@@ -364,7 +361,6 @@ exports[`Chip renders correctly with custom icon 1`] = `
         "elevation": 3,
         "flexDirection": "row",
         "justifyContent": "center",
-        "marginTop": undefined,
         "opacity": 1,
         "paddingHorizontal": 12,
         "paddingVertical": 8,
@@ -496,7 +492,6 @@ exports[`Chip renders correctly with custom icon 2`] = `
         "elevation": 3,
         "flexDirection": "row",
         "justifyContent": "center",
-        "marginTop": undefined,
         "opacity": 1,
         "paddingHorizontal": 12,
         "paddingVertical": 8,
@@ -628,7 +623,6 @@ exports[`Chip renders correctly with default icon 1`] = `
         "borderWidth": 1,
         "flexDirection": "row",
         "justifyContent": "center",
-        "marginTop": undefined,
         "opacity": 1,
         "paddingHorizontal": 12,
         "paddingVertical": 8,
@@ -723,10 +717,9 @@ exports[`Chip renders correctly with default icon 2`] = `
         "backgroundColor": "#e8e9ea",
         "borderColor": "#001f23",
         "borderRadius": 999,
-        "borderWidth": 2,
+        "borderWidth": 1,
         "flexDirection": "row",
         "justifyContent": "center",
-        "marginTop": -2,
         "opacity": 1,
         "paddingHorizontal": 12,
         "paddingVertical": 8,
@@ -851,7 +844,6 @@ exports[`Chip renders correctly with variant compact and selected false 1`] = `
         "elevation": 3,
         "flexDirection": "row",
         "justifyContent": "center",
-        "marginTop": undefined,
         "opacity": 1,
         "paddingHorizontal": 8,
         "paddingVertical": 4,
@@ -956,7 +948,6 @@ exports[`Chip renders correctly with variant compact and selected true 1`] = `
         "elevation": 3,
         "flexDirection": "row",
         "justifyContent": "center",
-        "marginTop": undefined,
         "opacity": 1,
         "paddingHorizontal": 8,
         "paddingVertical": 4,
@@ -1061,7 +1052,6 @@ exports[`Chip renders correctly with variant filled and selected false 1`] = `
         "elevation": 3,
         "flexDirection": "row",
         "justifyContent": "center",
-        "marginTop": undefined,
         "opacity": 1,
         "paddingHorizontal": 12,
         "paddingVertical": 8,
@@ -1166,7 +1156,6 @@ exports[`Chip renders correctly with variant filled and selected true 1`] = `
         "elevation": 3,
         "flexDirection": "row",
         "justifyContent": "center",
-        "marginTop": undefined,
         "opacity": 1,
         "paddingHorizontal": 12,
         "paddingVertical": 8,
@@ -1271,7 +1260,6 @@ exports[`Chip renders correctly with variant outlined and selected false 1`] = `
         "borderWidth": 1,
         "flexDirection": "row",
         "justifyContent": "center",
-        "marginTop": undefined,
         "opacity": 1,
         "paddingHorizontal": 12,
         "paddingVertical": 8,
@@ -1366,10 +1354,9 @@ exports[`Chip renders correctly with variant outlined and selected true 1`] = `
         "backgroundColor": "#e8e9ea",
         "borderColor": "#001f23",
         "borderRadius": 999,
-        "borderWidth": 2,
+        "borderWidth": 1,
         "flexDirection": "row",
         "justifyContent": "center",
-        "marginTop": -2,
         "opacity": 1,
         "paddingHorizontal": 12,
         "paddingVertical": 8,

package/src/components/Icon/HeroIcon/index.tsx

@@ -12,7 +12,8 @@ type ThemeIntent =
   | 'success'
   | 'warning'
   | 'disabled-text'
-  | 'text-inverted';
+  | 'text-inverted'
+  | 'muted';
 
 const HeroIcon = createIconSet(
   glyphMap,
@@ -30,6 +31,7 @@ const COLOR_INTENTS = {
   warning: 'warning',
   'disabled-text': 'disabledText',
   'text-inverted': 'invertedText',
+  muted: 'muted',
 } as const;
 
 const StyledHeroIcon = styled(HeroIcon)<{