@hero-design/rn 7.17.0 → 7.17.1

package/.turbo/turbo-build.log

@@ -1,9 +1,9 @@
-@hero-design/rn:build: cache hit, replaying output 2ecd9e66e6262003
+@hero-design/rn:build: cache hit, replaying output b1fa1f4b1fd2532b
 @hero-design/rn:build: $ yarn build:js && yarn build:types
 @hero-design/rn:build: $ rollup -c
 @hero-design/rn:build: 
 @hero-design/rn:build: src/index.ts → lib/index.js, es/index.js...
 @hero-design/rn:build: (!) 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`.
 @hero-design/rn:build: (!) Plugin node-resolve: preferring built-in module 'events' over local alternative at '/root/hero-design/node_modules/events/events.js', pass 'preferBuiltins: false' to disable this behavior or 'preferBuiltins: true' to disable this warning
-@hero-design/rn:build: created lib/index.js, es/index.js in 21.6s
+@hero-design/rn:build: created lib/index.js, es/index.js in 22.6s
 @hero-design/rn:build: $ tsc --noEmit false --emitDeclarationOnly

package/es/index.js

@@ -2360,7 +2360,7 @@ var blue$1 = colorScales.blue,
     smalt = colorScales.smalt,
     violet$1 = colorScales.violet,
     yellow$1 = colorScales.yellow;
-var palette$6 = {
+({
   black: '#000000',
   white: '#ffffff',
   blue: blue$1.base,
@@ -2445,7 +2445,7 @@ var palette$6 = {
   yellowDark75: yellow$1.darken75,
   yellowLight60: yellow$1.lighten60,
   yellowLight90: yellow$1.lighten90
-};
+});
 var maasstrichtBlue = colorScales.maasstrichtBlue,
     grey$1 = colorScales.grey,
     pastelRed$1 = colorScales.pastelRed,
@@ -2535,7 +2535,7 @@ _objectSpread2(_objectSpread2({}, palette$5), {}, {
 var scarletGum = colorScales.scarletGum,
     violet1 = colorScales.violet1;
 
-_objectSpread2(_objectSpread2({}, palette$5), {}, {
+var palette$2 = _objectSpread2(_objectSpread2({}, palette$5), {}, {
   scarletGumLight30: scarletGum.lighten30,
   scarletGumLight50: scarletGum.lighten50,
   scarletGumLight80: scarletGum.lighten80,
@@ -2573,46 +2573,47 @@ _objectSpread2(_objectSpread2({}, palette$5), {}, {
 });
 
 var systemPalette = {
-  primary: palette$6.violet,
-  primaryLight: palette$6.violetLight60,
-  primaryDark: palette$6.purpleDark15,
-  primaryBackground: palette$6.violetLight90,
+  primary: palette$2.violet,
+  primaryLight: palette$2.violetLight50,
+  primaryDark: palette$2.scarletGumLight30,
+  primaryBackground: palette$2.violetLight90,
   primaryBackgroundDark: palette$5.maasstrichtBlueLight30,
-  secondary: palette$6.dodgerBlue,
-  secondaryLight: palette$6.dodgerBlueLight75,
-  secondaryBackground: palette$6.dodgerBlueLight90,
-  info: palette$6.dodgerBlue,
+  secondary: palette$2.ultramarineBlue,
+  secondaryLight: palette$2.vodka,
+  secondaryBackground: palette$2.aliceBlue,
+  info: palette$5.ultramarineBlue,
   infoMediumLight: palette$5.vodka,
-  infoLight: palette$6.dodgerBlueLight75,
-  infoBackground: palette$6.dodgerBlueLight90,
-  success: palette$6.green,
+  infoLight: palette$5.vodka,
+  infoBackground: palette$5.aliceBlue,
+  success: palette$5.emerald,
   successLight: palette$5.emerald,
-  successDark: palette$6.greenDark30,
-  successBackground: palette$6.grotesqueGreenLight90,
-  danger: palette$6.red,
+  successDark: palette$5.pineGreen,
+  successBackground: palette$5.honeydew,
+  danger: palette$5.vermilion,
   dangerMediumLight: palette$5.apple,
-  dangerLight: palette$6.redLight60,
-  dangerBackground: palette$6.redLight90,
-  warning: palette$6.orange,
+  dangerLight: palette$5.pastelRed,
+  dangerBackground: palette$5.linen,
+  warning: palette$5.mellowApricot,
   warningLight: palette$5.mellowApricot,
-  warningDark: palette$6.orangeDark15,
-  warningBackground: palette$6.orangeLight90,
-  platformBackground: palette$6.white,
-  backgroundLight: palette$6.greyLight95,
-  backgroundDark: palette$6.greyDark75,
-  text: palette$6.greyDark75,
-  subduedText: palette$6.greyDark30,
-  disabledText: palette$6.greyDark15,
-  disabledLightText: palette$6.greyLight45,
-  invertedText: palette$6.white,
-  outline: palette$6.greyLight60,
-  archived: palette$6.greyLight45,
+  warningDark: palette$5.deepSaffron,
+  warningBackground: palette$5.seashell,
+  platformBackground: palette$5.white,
+  backgroundLight: palette$5.greyLight90,
+  backgroundDark: palette$5.maasstrichtBlue,
+  text: palette$5.maasstrichtBlue,
+  subduedText: palette$5.maasstrichtBlueLight30,
+  disabledText: palette$5.maasstrichtBlueLight50,
+  disabledLightText: palette$5.greyLight30,
+  invertedText: palette$5.white,
+  outline: palette$5.greyLight75,
+  archived: palette$5.greyLight45,
   archivedLight: palette$5.greyLight30,
   archivedDark: palette$5.sonicSilver,
   archivedBackground: palette$5.antiFlashWhite,
-  black: palette$6.black,
-  inactiveBackground: palette$6.greyDark30,
-  shadow: palette$6.greyLight60
+  black: palette$5.black,
+  inactiveBackground: palette$5.maasstrichtBlueLight50,
+  shadow: palette$5.greyLight45 // waiting for new color
+
 };
 
 var BASE_WIDTH = 390; // Based on iPhone 13's viewport size
@@ -2758,9 +2759,9 @@ var getAlertTheme = function getAlertTheme(theme) {
   var colors = {
     success: theme.colors.success,
     warning: theme.colors.warning,
-    error: theme.colors.danger,
-    info: theme.colors.infoMediumLight,
-    divider: theme.colors.backgroundLight
+    error: theme.colors.dangerLight,
+    info: theme.colors.infoLight,
+    divider: theme.colors.outline
   };
   var sizes = {
     height: scale(48)
@@ -2830,7 +2831,7 @@ var getBadgeTheme = function getBadgeTheme(theme) {
     info: theme.colors.info,
     success: theme.colors.successDark,
     warning: theme.colors.warningDark,
-    archived: theme.colors.archived,
+    archived: theme.colors.archivedDark,
     text: theme.colors.invertedText
   };
   var fonts = {
@@ -3024,12 +3025,12 @@ var getCalendarTheme = function getCalendarTheme(theme) {
 
 var getCardTheme = function getCardTheme(theme) {
   var colors = {
-    dataCardIndicator: theme.colors.primaryDark,
+    dataCardIndicator: theme.colors.primary,
     indicator: {
       archived: theme.colors.archivedLight,
-      info: theme.colors.infoMediumLight,
-      success: theme.colors.successLight,
-      warning: theme.colors.warningLight,
+      info: theme.colors.infoLight,
+      success: theme.colors.success,
+      warning: theme.colors.warning,
       danger: theme.colors.dangerMediumLight
     }
   };
@@ -3264,11 +3265,11 @@ var getListTheme = function getListTheme(theme) {
     highlightedListItemContainerBackground: theme.colors.primaryBackground,
     listItemContainerBackground: theme.colors.platformBackground,
     leadingStatus: {
-      danger: theme.colors.danger,
+      danger: theme.colors.dangerMediumLight,
       info: theme.colors.infoLight,
-      success: theme.colors.successDark,
-      warning: theme.colors.warningLight,
-      archived: theme.colors.archived
+      success: theme.colors.success,
+      warning: theme.colors.warning,
+      archived: theme.colors.archivedLight
     }
   };
   var space = {
@@ -3353,16 +3354,15 @@ var getProgressTheme = function getProgressTheme(theme) {
   var colors = {
     primary: theme.colors.primary,
     success: theme.colors.success,
-    warning: theme.colors.warning,
+    warning: theme.colors.warningDark,
     danger: theme.colors.danger,
     info: theme.colors.info,
     background: theme.colors.outline,
     innerBackground: theme.colors.platformBackground
   };
   var sizes = {
-    radius: theme.space.xxxlarge,
-    strokeWidth: theme.space.small,
-    barHeight: theme.space.xsmall
+    circleWidth: scale(76),
+    barHeight: scale(4)
   };
   var radii = {
     "default": theme.radii.rounded
@@ -3713,9 +3713,9 @@ var getToastTheme = function getToastTheme(theme) {
   var colors = {
     success: theme.colors.success,
     warning: theme.colors.warning,
-    error: theme.colors.danger,
-    info: theme.colors.infoMediumLight,
-    divider: theme.colors.backgroundLight
+    error: theme.colors.dangerLight,
+    info: theme.colors.infoLight,
+    divider: theme.colors.outline
   };
   var sizes = {
     height: scale(48)
@@ -18330,7 +18330,7 @@ function ContentNavigator(_ref) {
   }));
 }
 
-var StyledContainer$3 = index$6(View)(function (_ref) {
+var StyledContainer$4 = index$6(View)(function (_ref) {
   var theme = _ref.theme;
   return {
     backgroundColor: theme.__hd__.calendar.colors.background
@@ -18519,7 +18519,7 @@ var Calendar = function Calendar(_ref) {
   var disableNextButton = maxDate === undefined ? false : !daysOfNextMonth.some(function (date) {
     return date !== undefined;
   }) || maxDate <= lastDateOfMonth;
-  return /*#__PURE__*/React.createElement(StyledContainer$3, null, /*#__PURE__*/React.createElement(StyledCalendarHeader, null, /*#__PURE__*/React.createElement(ContentNavigator, {
+  return /*#__PURE__*/React.createElement(StyledContainer$4, null, /*#__PURE__*/React.createElement(StyledCalendarHeader, null, /*#__PURE__*/React.createElement(ContentNavigator, {
     value: formatTime('MMMM yyyy', visibleDate),
     onPreviousPress: onPreviousPress,
     onNextPress: onNextPress,
@@ -18694,7 +18694,7 @@ var CheckBox = function CheckBox(_ref) {
   }));
 };
 
-var StyledContainer$2 = index$6(View)(function (_ref) {
+var StyledContainer$3 = index$6(View)(function (_ref) {
   var theme = _ref.theme;
   return {
     width: '100%',
@@ -18916,7 +18916,7 @@ var TextInput = function TextInput(_ref2) {
   });
   var shouldShowMaxLength = maxLength !== undefined;
   var theme = useTheme();
-  return /*#__PURE__*/React.createElement(StyledContainer$2, {
+  return /*#__PURE__*/React.createElement(StyledContainer$3, {
     style: style,
     pointerEvents: variant === 'disabled' || variant === 'readonly' ? 'none' : 'auto',
     testID: testID
@@ -19154,7 +19154,7 @@ var DatePicker = function DatePicker(props) {
 };
 
 var AnimatedPressable = Animated.createAnimatedComponent(Pressable);
-var StyledContainer$1 = index$6(View)(function (_ref) {
+var StyledContainer$2 = index$6(View)(function (_ref) {
   var theme = _ref.theme,
       enableShadow = _ref.enableShadow;
   return _objectSpread2(_objectSpread2({}, StyleSheet$1.absoluteFillObject), {}, {
@@ -19219,7 +19219,7 @@ var Drawer = function Drawer(_ref) {
       return animation.stop();
     };
   }, [visible]);
-  return /*#__PURE__*/React.createElement(StyledContainer$1, {
+  return /*#__PURE__*/React.createElement(StyledContainer$2, {
     testID: testID,
     enableShadow: enableShadow,
     pointerEvents: "box-none"
@@ -19470,7 +19470,7 @@ var ActionItem = function ActionItem(_ref) {
   }), /*#__PURE__*/React.createElement(StyledActionItemText, null, title));
 };
 
-var StyledContainer = index$6(View)({
+var StyledContainer$1 = index$6(View)({
   position: 'absolute',
   left: 0,
   right: 0,
@@ -19558,7 +19558,7 @@ var ActionGroup = function ActionGroup(_ref2) {
     inputRange: [0, 1],
     outputRange: [0, 1]
   });
-  return /*#__PURE__*/React.createElement(StyledContainer, {
+  return /*#__PURE__*/React.createElement(StyledContainer$1, {
     testID: testID,
     pointerEvents: "box-none",
     style: style
@@ -20008,41 +20008,52 @@ function PinInput(_ref2) {
   }));
 }
 
-var HalfCircleWrapper = index$6(View)(function (_ref) {
+var INNER_CIRCLE_PERCENTAGE = 0.85; // 85% width according to design
+
+var STROKE_WIDTH_PERCENTAGE = 0.075; // 7.5% width  according to design
+
+var StyledContainer = index$6(View)(function (_ref) {
   var theme = _ref.theme;
   return {
-    width: theme.__hd__.progress.sizes.radius,
-    height: theme.__hd__.progress.sizes.radius * 2,
+    flexDirection: 'row',
+    borderRadius: theme.__hd__.progress.radii["default"]
+  };
+});
+var StyledHalfCircleWrapper = index$6(View)(function (_ref2) {
+  var theme = _ref2.theme;
+  return {
+    width: theme.__hd__.progress.sizes.circleWidth / 2,
+    height: theme.__hd__.progress.sizes.circleWidth,
     overflow: 'hidden'
   };
 });
-var HalfCircleInnerFG = index$6(View)(function (_ref2) {
-  var theme = _ref2.theme,
-      themeIntent = _ref2.themeIntent;
+var StyledHalfCircleInnerFG = index$6(View)(function (_ref3) {
+  var theme = _ref3.theme,
+      themeIntent = _ref3.themeIntent;
   return {
-    width: theme.__hd__.progress.sizes.radius * 2,
-    height: theme.__hd__.progress.sizes.radius * 2,
+    width: theme.__hd__.progress.sizes.circleWidth,
+    height: theme.__hd__.progress.sizes.circleWidth,
     backgroundColor: theme.__hd__.progress.colors[themeIntent],
     borderRadius: theme.__hd__.progress.radii["default"]
   };
 });
-var HalfCircleInnerBG = index$6(View)(function (_ref3) {
-  var theme = _ref3.theme;
+var StyledHalfCircleInnerBG = index$6(View)(function (_ref4) {
+  var theme = _ref4.theme;
   return {
-    width: theme.__hd__.progress.sizes.radius * 2,
-    height: theme.__hd__.progress.sizes.radius * 2,
+    width: theme.__hd__.progress.sizes.circleWidth,
+    height: theme.__hd__.progress.sizes.circleWidth,
     backgroundColor: theme.__hd__.progress.colors.background,
     borderRadius: theme.__hd__.progress.radii["default"]
   };
 });
-var DonutCircle = index$6(View)(function (_ref4) {
-  var theme = _ref4.theme;
+var StyledDonutCircle = index$6(View)(function (_ref5) {
+  var theme = _ref5.theme;
   return {
     position: 'absolute',
-    top: theme.__hd__.progress.sizes.strokeWidth,
-    left: theme.__hd__.progress.sizes.strokeWidth,
-    width: theme.__hd__.progress.sizes.radius * 2 - theme.__hd__.progress.sizes.strokeWidth * 2,
-    height: theme.__hd__.progress.sizes.radius * 2 - theme.__hd__.progress.sizes.strokeWidth * 2,
+    top: theme.__hd__.progress.sizes.circleWidth * STROKE_WIDTH_PERCENTAGE,
+    left: theme.__hd__.progress.sizes.circleWidth * STROKE_WIDTH_PERCENTAGE,
+    width: theme.__hd__.progress.sizes.circleWidth * INNER_CIRCLE_PERCENTAGE,
+    height: theme.__hd__.progress.sizes.circleWidth * INNER_CIRCLE_PERCENTAGE,
     zIndex: 3,
     backgroundColor: theme.__hd__.progress.colors.innerBackground,
     borderRadius: theme.__hd__.progress.radii["default"],
@@ -20050,15 +20061,15 @@ var DonutCircle = index$6(View)(function (_ref4) {
     justifyContent: 'center'
   };
 });
-var StrokeEnd = index$6(View)(function (_ref5) {
-  var theme = _ref5.theme,
-      themeIntent = _ref5.themeIntent;
+var StyledStrokeEnd = index$6(View)(function (_ref6) {
+  var theme = _ref6.theme,
+      themeIntent = _ref6.themeIntent;
   return {
     position: 'absolute',
     top: 0,
-    left: theme.__hd__.progress.sizes.radius - theme.__hd__.progress.sizes.strokeWidth / 2,
-    width: theme.__hd__.progress.sizes.strokeWidth,
-    height: theme.__hd__.progress.sizes.strokeWidth,
+    left: theme.__hd__.progress.sizes.circleWidth / 2 - theme.__hd__.progress.sizes.circleWidth * STROKE_WIDTH_PERCENTAGE / 2,
+    width: theme.__hd__.progress.sizes.circleWidth * STROKE_WIDTH_PERCENTAGE,
+    height: theme.__hd__.progress.sizes.circleWidth * STROKE_WIDTH_PERCENTAGE,
     borderRadius: theme.__hd__.progress.radii["default"],
     backgroundColor: theme.__hd__.progress.colors[themeIntent],
     zIndex: 2
@@ -20071,7 +20082,7 @@ var HalfCircle = function HalfCircle(_ref) {
   var type = _ref.type,
       _ref$themeIntent = _ref.themeIntent,
       themeIntent = _ref$themeIntent === void 0 ? 'primary' : _ref$themeIntent;
-  return /*#__PURE__*/React.createElement(HalfCircleWrapper, null, type === 'background' ? /*#__PURE__*/React.createElement(HalfCircleInnerBG, null) : /*#__PURE__*/React.createElement(HalfCircleInnerFG, {
+  return /*#__PURE__*/React.createElement(StyledHalfCircleWrapper, null, type === 'background' ? /*#__PURE__*/React.createElement(StyledHalfCircleInnerBG, null) : /*#__PURE__*/React.createElement(StyledHalfCircleInnerFG, {
     themeIntent: themeIntent
   }));
 };
@@ -20085,7 +20096,7 @@ var ProgressCircle = function ProgressCircle(_ref2) {
       nativeProps = _objectWithoutProperties(_ref2, _excluded$3);
 
   var theme = useTheme$1();
-  var radius = theme.__hd__.progress.sizes.radius;
+  var radius = theme.__hd__.progress.sizes.circleWidth / 2;
   var progressAnimatedValue = useRef(new Animated.Value(0));
   useEffect(function () {
     var animation = Animated.timing(progressAnimatedValue.current, {
@@ -20123,11 +20134,7 @@ var ProgressCircle = function ProgressCircle(_ref2) {
   return /*#__PURE__*/React.createElement(View, _extends$1({}, nativeProps, {
     testID: testID,
     style: style
-  }), /*#__PURE__*/React.createElement(View, {
-    style: {
-      flexDirection: 'row'
-    }
-  }, /*#__PURE__*/React.createElement(View, null, /*#__PURE__*/React.createElement(HalfCircle, {
+  }), /*#__PURE__*/React.createElement(StyledContainer, null, /*#__PURE__*/React.createElement(View, null, /*#__PURE__*/React.createElement(HalfCircle, {
     type: "foreground",
     themeIntent: intent
   }), /*#__PURE__*/React.createElement(Animated.View, {
@@ -20147,7 +20154,8 @@ var ProgressCircle = function ProgressCircle(_ref2) {
       transform: [{
         rotate: '180deg'
       }],
-      zIndex: 1
+      zIndex: 1,
+      marginLeft: -0.1
     }
   }, /*#__PURE__*/React.createElement(HalfCircle, {
     type: "foreground",
@@ -20165,7 +20173,7 @@ var ProgressCircle = function ProgressCircle(_ref2) {
     })
   }, /*#__PURE__*/React.createElement(HalfCircle, {
     type: "background"
-  }))), /*#__PURE__*/React.createElement(StrokeEnd, {
+  }))), /*#__PURE__*/React.createElement(StyledStrokeEnd, {
     themeIntent: intent
   }), /*#__PURE__*/React.createElement(Animated.View, {
     style: _objectSpread2(_objectSpread2({}, StyleSheet$1.absoluteFillObject), {}, {
@@ -20174,10 +20182,10 @@ var ProgressCircle = function ProgressCircle(_ref2) {
         rotate: interpolateDotRotate
       }]
     })
-  }, /*#__PURE__*/React.createElement(StrokeEnd, {
+  }, /*#__PURE__*/React.createElement(StyledStrokeEnd, {
     themeIntent: intent
-  })), /*#__PURE__*/React.createElement(DonutCircle, null, /*#__PURE__*/React.createElement(Typography.Text, {
-    fontSize: "xlarge"
+  })), /*#__PURE__*/React.createElement(StyledDonutCircle, null, /*#__PURE__*/React.createElement(Typography.Text, {
+    fontSize: "large"
   }, "".concat(value, "%")))));
 };
 
@@ -40355,7 +40363,7 @@ var RichTextEditor = function RichTextEditor(_ref) {
         break;
     }
   }, []);
-  return /*#__PURE__*/React.createElement(StyledContainer$2, {
+  return /*#__PURE__*/React.createElement(StyledContainer$3, {
     style: style,
     testID: testID
   }, /*#__PURE__*/React.createElement(StyledTextInputContainer, null, /*#__PURE__*/React.createElement(StyledBorderBackDrop, {