@hero-design/rn 8.73.0 → 8.73.1

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:2943) 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:2943) 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 50.4s

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @hero-design/rn
 
+## 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
@@ -3929,8 +3924,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
@@ -13009,7 +13003,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 +13083,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 +15742,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 +15836,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
@@ -3956,8 +3951,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
@@ -13036,7 +13030,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 +13110,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 +15769,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 +15863,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.73.1",
   "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/MapPin/StyledMapPin.tsx

@@ -15,11 +15,8 @@ export const StyledContainer = styled(View)(({ theme }) => ({
 
 export const StyledContent = styled(View)<{
   themeState: State;
-  themeIsIcon: boolean;
-}>(({ theme, themeState, themeIsIcon }) => ({
-  backgroundColor: themeIsIcon
-    ? theme.__hd__.mapPin.colors.iconBackground
-    : theme.__hd__.mapPin.colors.background,
+}>(({ theme, themeState }) => ({
+  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],

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

@@ -28,7 +28,7 @@ exports[`MapPin renders applied state correctly 1`] = `
         [
           {
             "alignItems": "center",
-            "backgroundColor": "#4d6265",
+            "backgroundColor": "#ffffff",
             "borderColor": "#795e90",
             "borderRadius": 12,
             "borderWidth": 4,
@@ -48,7 +48,6 @@ exports[`MapPin renders applied state correctly 1`] = `
           undefined,
         ]
       }
-      themeIsIcon={true}
       themeState="applied"
     >
       <HeroIcon
@@ -56,14 +55,14 @@ exports[`MapPin renders applied state correctly 1`] = `
         style={
           [
             {
-              "color": "#ffffff",
+              "color": "#001f23",
               "fontSize": 16,
             },
             undefined,
           ]
         }
         testID="map-pin-icon"
-        themeIntent="text-inverted"
+        themeIntent="text"
         themeSize="xsmall"
       />
     </View>
@@ -170,7 +169,7 @@ exports[`MapPin renders icon correctly 1`] = `
         [
           {
             "alignItems": "center",
-            "backgroundColor": "#4d6265",
+            "backgroundColor": "#ffffff",
             "borderColor": "#ffffff",
             "borderRadius": 12,
             "borderWidth": 4,
@@ -190,7 +189,6 @@ exports[`MapPin renders icon correctly 1`] = `
           undefined,
         ]
       }
-      themeIsIcon={true}
       themeState="idle"
     >
       <HeroIcon
@@ -198,14 +196,14 @@ exports[`MapPin renders icon correctly 1`] = `
         style={
           [
             {
-              "color": "#ffffff",
+              "color": "#001f23",
               "fontSize": 16,
             },
             undefined,
           ]
         }
         testID="map-pin-icon"
-        themeIntent="text-inverted"
+        themeIntent="text"
         themeSize="xsmall"
       />
     </View>
@@ -281,7 +279,6 @@ exports[`MapPin renders image correctly 1`] = `
           undefined,
         ]
       }
-      themeIsIcon={false}
       themeState="idle"
     >
       <Image
@@ -355,7 +352,7 @@ exports[`MapPin renders selected state correctly 1`] = `
         [
           {
             "alignItems": "center",
-            "backgroundColor": "#4d6265",
+            "backgroundColor": "#ffffff",
             "borderColor": "#795e90",
             "borderRadius": 12,
             "borderWidth": 4,
@@ -375,7 +372,6 @@ exports[`MapPin renders selected state correctly 1`] = `
           undefined,
         ]
       }
-      themeIsIcon={true}
       themeState="selected"
     >
       <HeroIcon
@@ -383,14 +379,14 @@ exports[`MapPin renders selected state correctly 1`] = `
         style={
           [
             {
-              "color": "#ffffff",
+              "color": "#001f23",
               "fontSize": 16,
             },
             undefined,
           ]
         }
         testID="map-pin-icon"
-        themeIntent="text-inverted"
+        themeIntent="text"
         themeSize="xsmall"
       />
     </View>

package/src/components/MapPin/index.tsx

@@ -32,7 +32,7 @@ const MapPin = ({
   const badgeIcon = getBadgeIconName(state);
   return (
     <StyledContainer {...nativeProps} style={style} testID={testID}>
-      <StyledContent themeState={state} themeIsIcon={!!icon}>
+      <StyledContent themeState={state}>
         {image && (
           <StyledImage
             testID={testID ? `${testID}-image` : undefined}
@@ -43,7 +43,7 @@ const MapPin = ({
           <Icon
             icon={icon}
             size="xsmall"
-            intent="text-inverted"
+            intent="text"
             testID={testID ? `${testID}-icon` : undefined}
           />
         )}

package/src/theme/__tests__/__snapshots__/index.spec.ts.snap

@@ -384,6 +384,7 @@ exports[`theme returns correct theme object 1`] = `
     "chip": {
       "borderWidths": {
         "icon": 2,
+        "outlinedDefaultBorder": 1,
         "wrapper": 1,
       },
       "colors": {
@@ -412,15 +413,10 @@ exports[`theme returns correct theme object 1`] = `
           "shadowRadius": 4,
         },
       },
-      "sizes": {
-        "outlinedDefaultBorder": 1,
-        "outlinedSelectedBorder": 2,
-      },
       "space": {
         "compactWrapperHorizontalPadding": 8,
         "compactWrapperVerticalPadding": 4,
         "iconWrapperHorizontalMargin": 8,
-        "outlinedSelectedMarginTop": -2,
         "wrapperHorizontalPadding": 12,
         "wrapperVerticalPadding": 8,
       },
@@ -676,7 +672,6 @@ exports[`theme returns correct theme object 1`] = `
           "idle": "#ffffff",
           "selected": "#795e90",
         },
-        "iconBackground": "#4d6265",
       },
       "fontSizes": {
         "icon": 42,

package/src/theme/components/chip.ts

@@ -19,12 +19,6 @@ const getChipTheme = (theme: GlobalTheme) => {
     compactWrapperHorizontalPadding: theme.space.small,
     compactWrapperVerticalPadding: theme.space.xsmall,
     iconWrapperHorizontalMargin: theme.space.small,
-    outlinedSelectedMarginTop: -theme.space.xxsmall,
-  };
-
-  const sizes = {
-    outlinedDefaultBorder: theme.borderWidths.base,
-    outlinedSelectedBorder: theme.borderWidths.medium,
   };
 
   const radii = {
@@ -34,6 +28,7 @@ const getChipTheme = (theme: GlobalTheme) => {
   const borderWidths = {
     wrapper: theme.borderWidths.base,
     icon: theme.borderWidths.medium,
+    outlinedDefaultBorder: theme.borderWidths.base,
   };
 
   const shadows = {
@@ -43,7 +38,6 @@ const getChipTheme = (theme: GlobalTheme) => {
   return {
     colors,
     space,
-    sizes,
     radii,
     borderWidths,
     shadows,

package/src/theme/components/mapPin.ts

@@ -21,7 +21,6 @@ const getMapPinTheme = (theme: GlobalTheme) => {
     },
     badge: theme.colors.secondary,
     background: theme.colors.defaultGlobalSurface,
-    iconBackground: theme.colors.mutedOnDefaultGlobalSurface,
   };
 
   const radii = {