@hero-design/rn 8.29.4 → 8.30.0

package/lib/index.js

@@ -1114,14 +1114,16 @@ Object.assign(Object.assign({}, palette$b), {
   violetDark50: violet$1.darken50
 });
 var apple$4 = colorScales.apple,
-  hitPink$1 = colorScales.hitPink;
+  hitPink$1 = colorScales.hitPink,
+  maasstrichtBlue$4 = colorScales.maasstrichtBlue;
 Object.assign(Object.assign({}, palette$b), {
   apple: apple$4.base,
   appleDark20: apple$4.darken20,
   appleDark50: apple$4.darken50,
   appleLight90: apple$4.lighten90,
   hitPink: hitPink$1.base,
-  hitPinkLight80: hitPink$1.lighten80
+  hitPinkLight80: hitPink$1.lighten80,
+  maasstrichtBlueLight30: maasstrichtBlue$4.lighten30
 });
 var aliceBlue$1 = colorScales.aliceBlue,
   antiFlashWhite$1 = colorScales.antiFlashWhite,
@@ -2603,6 +2605,20 @@ var getRadioTheme = function getRadioTheme(theme) {
   };
 };
 
+var getRateTheme = function getRateTheme(theme) {
+  var colors = {
+    iconStroke: theme.colors.primary
+  };
+  var spaces = {
+    iconWrapperPadding: theme.space.small,
+    iconWrapperMarginRight: theme.space.xsmall
+  };
+  return {
+    colors: colors,
+    spaces: spaces
+  };
+};
+
 var getRefreshControlTheme = function getRefreshControlTheme(theme) {
   var colors = {
     indicator: theme.colors.primary
@@ -3186,6 +3202,7 @@ var getTheme$1 = function getTheme() {
       pinInput: getPinInputTheme(globalTheme),
       progress: getProgressTheme(globalTheme),
       radio: getRadioTheme(globalTheme),
+      rate: getRateTheme(globalTheme),
       refreshControl: getRefreshControlTheme(globalTheme),
       richTextEditor: getRichTextEditorTheme(globalTheme),
       sectionHeading: getSectionHeadingTheme(globalTheme),
@@ -6103,7 +6120,7 @@ var useDeprecation = function useDeprecation(message) {
   }, [message, cond]);
 };
 
-var StyledWrapper$c = index$a(reactNative.Animated.View)({
+var StyledWrapper$d = index$a(reactNative.Animated.View)({
   margin: 0,
   padding: 0,
   overflow: 'hidden'
@@ -6157,7 +6174,7 @@ var Collapse = function Collapse(_ref) {
     setComponentMounted(true);
     onLayout === null || onLayout === void 0 ? void 0 : onLayout(e);
   }, []);
-  return /*#__PURE__*/React__default["default"].createElement(StyledWrapper$c, {
+  return /*#__PURE__*/React__default["default"].createElement(StyledWrapper$d, {
     style: {
       height: open ? contentHeight : 0
     },
@@ -6171,7 +6188,7 @@ var Collapse = function Collapse(_ref) {
   }, children)));
 };
 
-var StyledWrapper$b = index$a(reactNative.View)(function () {
+var StyledWrapper$c = index$a(reactNative.View)(function () {
   return {};
 });
 var StyledItemWrapper$1 = index$a(reactNative.View)(function (_ref) {
@@ -6224,7 +6241,7 @@ var StyledText$3 = index$a(reactNative.Text)(function (_ref) {
   });
 });
 
-var _excluded$t = ["children", "fontSize", "fontWeight", "intent", "typeface", "allowFontScaling"];
+var _excluded$u = ["children", "fontSize", "fontWeight", "intent", "typeface", "allowFontScaling"];
 var Text = function Text(_ref) {
   var children = _ref.children,
     _ref$fontSize = _ref.fontSize,
@@ -6237,7 +6254,7 @@ var Text = function Text(_ref) {
     typeface = _ref$typeface === void 0 ? 'neutral' : _ref$typeface,
     _ref$allowFontScaling = _ref.allowFontScaling,
     allowFontScaling = _ref$allowFontScaling === void 0 ? false : _ref$allowFontScaling,
-    nativeProps = _objectWithoutProperties(_ref, _excluded$t);
+    nativeProps = _objectWithoutProperties(_ref, _excluded$u);
   return /*#__PURE__*/React__default["default"].createElement(StyledText$3, _extends$1({}, nativeProps, {
     themeFontSize: fontSize,
     themeFontWeight: fontWeight,
@@ -6762,10 +6779,10 @@ var StyledHeroIcon = index$a(HeroIcon)(function (_ref) {
   };
 });
 
-var _excluded$s = ["style"];
+var _excluded$t = ["style"];
 var AnimatedIcon = function AnimatedIcon(_ref) {
   var style = _ref.style,
-    otherProps = _objectWithoutProperties(_ref, _excluded$s);
+    otherProps = _objectWithoutProperties(_ref, _excluded$t);
   var rotateAnimation = React.useRef(new reactNative.Animated.Value(0));
   React.useEffect(function () {
     var animation = reactNative.Animated.loop(reactNative.Animated.timing(rotateAnimation.current, {
@@ -6871,7 +6888,7 @@ var AccordionItem = function AccordionItem(_ref) {
   }, content));
 };
 
-var _excluded$r = ["key"];
+var _excluded$s = ["key"];
 var Accordion = function Accordion(_ref) {
   var items = _ref.items,
     activeItemKey = _ref.activeItemKey,
@@ -6887,12 +6904,12 @@ var Accordion = function Accordion(_ref) {
     _usePropsOrInternalSt2 = _slicedToArray(_usePropsOrInternalSt, 2),
     _activeItemKey = _usePropsOrInternalSt2[0],
     _onItemPress = _usePropsOrInternalSt2[1];
-  return /*#__PURE__*/React__default["default"].createElement(StyledWrapper$b, {
+  return /*#__PURE__*/React__default["default"].createElement(StyledWrapper$c, {
     style: style,
     testID: testID
   }, items.map(function (_ref2, index) {
     var key = _ref2.key,
-      props = _objectWithoutProperties(_ref2, _excluded$r);
+      props = _objectWithoutProperties(_ref2, _excluded$s);
     var open = _activeItemKey === key;
     return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, {
       key: key
@@ -7075,7 +7092,7 @@ var Attachment = function Attachment(_ref) {
   })) : null);
 };
 
-var StyledWrapper$a = index$a(reactNative.TouchableOpacity)(function (_ref) {
+var StyledWrapper$b = index$a(reactNative.TouchableOpacity)(function (_ref) {
   var themeSize = _ref.themeSize,
     themeIntent = _ref.themeIntent,
     theme = _ref.theme;
@@ -7144,7 +7161,7 @@ var Avatar = function Avatar(_ref) {
     hasImageError = _useState2[0],
     setHasImageError = _useState2[1];
   if (title === undefined && source === undefined) return null;
-  return /*#__PURE__*/React__default["default"].createElement(StyledWrapper$a, {
+  return /*#__PURE__*/React__default["default"].createElement(StyledWrapper$b, {
     testID: testID,
     onPress: onPress,
     disabled: onPress === undefined,
@@ -7168,7 +7185,7 @@ var Avatar = function Avatar(_ref) {
 };
 
 var VISIBLE_RATIO = 0.7;
-var StyledWrapper$9 = index$a(reactNative.View)(function (_ref) {
+var StyledWrapper$a = index$a(reactNative.View)(function (_ref) {
   var theme = _ref.theme,
     themeSize = _ref.themeSize,
     themeAvatarCount = _ref.themeAvatarCount;
@@ -7230,7 +7247,7 @@ var AvatarStack = function AvatarStack(_ref) {
     });
     avatars.push(remainingAvatar);
   }
-  return /*#__PURE__*/React__default["default"].createElement(StyledWrapper$9, {
+  return /*#__PURE__*/React__default["default"].createElement(StyledWrapper$a, {
     themeSize: size,
     themeAvatarCount: avatars.length,
     style: style,
@@ -7290,7 +7307,7 @@ var StyledStatus = index$a(reactNative.Animated.View)(function (_ref3) {
   };
 });
 
-var _excluded$q = ["children", "visible", "intent", "style", "testID"];
+var _excluded$r = ["children", "visible", "intent", "style", "testID"];
 var Status = function Status(_ref) {
   var children = _ref.children,
     _ref$visible = _ref.visible,
@@ -7299,7 +7316,7 @@ var Status = function Status(_ref) {
     intent = _ref$intent === void 0 ? 'danger' : _ref$intent,
     style = _ref.style,
     testID = _ref.testID,
-    nativeProps = _objectWithoutProperties(_ref, _excluded$q);
+    nativeProps = _objectWithoutProperties(_ref, _excluded$r);
   var _React$useRef = React__default["default"].useRef(new reactNative.Animated.Value(visible ? 1 : 0)),
     opacity = _React$useRef.current;
   var isFirstRendering = React__default["default"].useRef(true);
@@ -7332,7 +7349,7 @@ var Status = function Status(_ref) {
   }));
 };
 
-var _excluded$p = ["content", "visible", "max", "intent", "style", "testID"];
+var _excluded$q = ["content", "visible", "max", "intent", "style", "testID"];
 var DEFAULT_MAX_NUMBER = 99;
 var getPaddingState = function getPaddingState(content) {
   return content.length > 1 ? 'wideContent' : 'narrowContent';
@@ -7347,7 +7364,7 @@ var Badge = function Badge(_ref) {
     intent = _ref$intent === void 0 ? 'danger' : _ref$intent,
     style = _ref.style,
     testID = _ref.testID,
-    nativeProps = _objectWithoutProperties(_ref, _excluded$p);
+    nativeProps = _objectWithoutProperties(_ref, _excluded$q);
   var _React$useRef = React__default["default"].useRef(new reactNative.Animated.Value(visible ? 1 : 0)),
     opacity = _React$useRef.current;
   var isFirstRendering = React__default["default"].useRef(true);
@@ -7451,7 +7468,7 @@ function omit(keys, obj) {
   return result;
 }
 
-var _excluded$o = ["onTabPress", "renderActiveTabOnly", "selectedTabKey", "tabs"];
+var _excluded$p = ["onTabPress", "renderActiveTabOnly", "selectedTabKey", "tabs"];
 var getInactiveIcon = function getInactiveIcon(icon) {
   var inactiveIcon = "".concat(icon, "-outlined");
   return isHeroIcon(inactiveIcon) ? inactiveIcon : icon;
@@ -7462,7 +7479,7 @@ var BottomNavigation = function BottomNavigation(_ref) {
     renderActiveTabOnly = _ref$renderActiveTabO === void 0 ? false : _ref$renderActiveTabO,
     selectedTabKey = _ref.selectedTabKey,
     tabs = _ref.tabs,
-    nativeProps = _objectWithoutProperties(_ref, _excluded$o);
+    nativeProps = _objectWithoutProperties(_ref, _excluded$p);
   var insets = reactNativeSafeAreaContext.useSafeAreaInsets();
   /**
    * List of loaded tabs, tabs will be loaded when navigated to.
@@ -7549,13 +7566,13 @@ var StyledDivider = index$a(reactNative.View)(function (_ref) {
   }, horizontalMargin), verticalMargin);
 });
 
-var _excluded$n = ["marginHorizontal", "marginVertical", "style", "testID"];
+var _excluded$o = ["marginHorizontal", "marginVertical", "style", "testID"];
 var Divider = function Divider(_ref) {
   var marginHorizontal = _ref.marginHorizontal,
     marginVertical = _ref.marginVertical,
     style = _ref.style,
     testID = _ref.testID,
-    nativeProps = _objectWithoutProperties(_ref, _excluded$n);
+    nativeProps = _objectWithoutProperties(_ref, _excluded$o);
   return /*#__PURE__*/React__default["default"].createElement(StyledDivider, _extends$1({}, nativeProps, {
     themeMarginHorizontal: marginHorizontal,
     themeMarginVertical: marginVertical,
@@ -7566,7 +7583,7 @@ var Divider = function Divider(_ref) {
 
 var AnimatedPressable$1 = reactNative.Animated.createAnimatedComponent(reactNative.Pressable);
 var AnimatedSafeAreaView = reactNative.Animated.createAnimatedComponent(reactNative.SafeAreaView);
-var StyledWrapper$8 = index$a(reactNative.View)(_objectSpread2(_objectSpread2({}, reactNative.StyleSheet.absoluteFillObject), {}, {
+var StyledWrapper$9 = index$a(reactNative.View)(_objectSpread2(_objectSpread2({}, reactNative.StyleSheet.absoluteFillObject), {}, {
   flexDirection: 'column-reverse'
 }));
 var StyledKeyboardAvoidingView = index$a(reactNative.KeyboardAvoidingView)(function () {
@@ -7619,7 +7636,7 @@ var StyledFooter = index$a(reactNative.View)(function (_ref4) {
     flexDirection: 'row'
   };
 });
-var StyledIconWrapper$2 = index$a(reactNative.View)(function (_ref5) {
+var StyledIconWrapper$3 = index$a(reactNative.View)(function (_ref5) {
   var theme = _ref5.theme;
   return {
     alignItems: 'center',
@@ -7685,7 +7702,7 @@ var StyledLoadingDot = index$a(reactNative.View)(function (_ref2) {
   }, themeStyling());
 });
 
-var _excluded$m = ["count", "size", "testID", "themeVariant"];
+var _excluded$n = ["count", "size", "testID", "themeVariant"];
 var AnimatedLoadingIndicatorWrapper = reactNative.Animated.createAnimatedComponent(StyledLoadingIndicatorWrapper);
 var AnimatedLoadingDot = reactNative.Animated.createAnimatedComponent(StyledLoadingDot);
 var renderDotComponent = function renderDotComponent(_ref) {
@@ -7717,7 +7734,7 @@ var LoadingIndicator = function LoadingIndicator(_ref2) {
     size = _ref2$size === void 0 ? 12 : _ref2$size,
     testID = _ref2.testID,
     themeVariant = _ref2.themeVariant,
-    nativeProps = _objectWithoutProperties(_ref2, _excluded$m);
+    nativeProps = _objectWithoutProperties(_ref2, _excluded$n);
   var progressAnimation = React.useRef(new reactNative.Animated.Value(0));
   React.useEffect(function () {
     var animation = reactNative.Animated.loop(reactNative.Animated.timing(progressAnimation.current, {
@@ -8135,7 +8152,7 @@ var Header = function Header(_ref) {
     style: {
       flex: 1
     }
-  }, content), showCloseButton ? /*#__PURE__*/React__default["default"].createElement(StyledIconWrapper$2, null, /*#__PURE__*/React__default["default"].createElement(CompoundButton.Icon, {
+  }, content), showCloseButton ? /*#__PURE__*/React__default["default"].createElement(StyledIconWrapper$3, null, /*#__PURE__*/React__default["default"].createElement(CompoundButton.Icon, {
     icon: "cancel",
     onPress: onRequestClose,
     intent: "text",
@@ -8144,11 +8161,11 @@ var Header = function Header(_ref) {
   })) : null), showDivider ? /*#__PURE__*/React__default["default"].createElement(Divider, null) : null);
 };
 
-var _excluded$l = ["scrollEventThrottle"];
+var _excluded$m = ["scrollEventThrottle"];
 var BottomSheetScrollView = function BottomSheetScrollView(_ref) {
   var _ref$scrollEventThrot = _ref.scrollEventThrottle,
     scrollEventThrottle = _ref$scrollEventThrot === void 0 ? 100 : _ref$scrollEventThrot,
-    props = _objectWithoutProperties(_ref, _excluded$l);
+    props = _objectWithoutProperties(_ref, _excluded$m);
   var _useContext = React.useContext(BottomSheetContext),
     setInternalShowDivider = _useContext.setInternalShowDivider;
   var onScrollBeginDrag = React.useCallback(function (e) {
@@ -8256,7 +8273,7 @@ var BottomSheet = function BottomSheet(_ref) {
     transparent: true,
     testID: testID,
     onShow: onOpen
-  }, /*#__PURE__*/React__default["default"].createElement(StyledWrapper$8, {
+  }, /*#__PURE__*/React__default["default"].createElement(StyledWrapper$9, {
     pointerEvents: "box-none"
   }, /*#__PURE__*/React__default["default"].createElement(StyledKeyboardAvoidingView, _extends$1({
     behavior: reactNative.Platform.OS === 'ios' ? 'padding' : 'height'
@@ -8463,7 +8480,7 @@ var borderWidths = {
 var config = _objectSpread2(_objectSpread2(_objectSpread2(_objectSpread2({}, colors), space), radii), borderWidths);
 var flexPropsKey = ['alignContent', 'alignItems', 'alignSelf', 'display', 'flex', 'flexBasis', 'flexDirection', 'flexGrow', 'flexShrink', 'flexWrap', 'justifyContent'];
 
-var _excluded$k = ["theme"];
+var _excluded$l = ["theme"];
 var getThemeValue = function getThemeValue(theme, key, props) {
   var propConfig = config[key];
   var propValue = props[key];
@@ -8490,18 +8507,18 @@ var mapStylePropToThemeValue = function mapStylePropToThemeValue(theme, props) {
 var configKeys = Object.keys(config);
 var StyledBox = index$a(reactNative.View)(function (_ref5) {
   var theme = _ref5.theme,
-    otherProps = _objectWithoutProperties(_ref5, _excluded$k);
+    otherProps = _objectWithoutProperties(_ref5, _excluded$l);
   var styleProps = pick(configKeys, otherProps);
   var flexProps = pick(_toConsumableArray(flexPropsKey), otherProps);
   return _objectSpread2(_objectSpread2({}, mapStylePropToThemeValue(theme, styleProps)), flexProps);
 });
 
-var _excluded$j = ["children", "style", "testID"];
+var _excluded$k = ["children", "style", "testID"];
 var Box = function Box(_ref) {
   var children = _ref.children,
     style = _ref.style,
     testID = _ref.testID,
-    otherProps = _objectWithoutProperties(_ref, _excluded$j);
+    otherProps = _objectWithoutProperties(_ref, _excluded$k);
   return /*#__PURE__*/React__default["default"].createElement(StyledBox, _extends$1({}, otherProps, {
     style: style,
     testID: testID
@@ -11069,7 +11086,7 @@ var Calendar = function Calendar(_ref) {
   })));
 };
 
-var _excluded$i = ["rounded", "size", "testID", "style"];
+var _excluded$j = ["rounded", "size", "testID", "style"];
 var Image = function Image(_ref) {
   var _ref$rounded = _ref.rounded,
     rounded = _ref$rounded === void 0 ? false : _ref$rounded,
@@ -11077,7 +11094,7 @@ var Image = function Image(_ref) {
     size = _ref$size === void 0 ? '6xlarge' : _ref$size,
     testID = _ref.testID,
     style = _ref.style,
-    imageNativeProps = _objectWithoutProperties(_ref, _excluded$i);
+    imageNativeProps = _objectWithoutProperties(_ref, _excluded$j);
   var theme = useTheme();
   var imageSize = theme.__hd__.image.sizes[size];
   return /*#__PURE__*/React__default["default"].createElement(reactNative.Image, _extends$1({
@@ -11281,12 +11298,12 @@ var Indicator = index$a(reactNative.View)(function (_ref2) {
   };
 });
 
-var _excluded$h = ["intent", "children"];
+var _excluded$i = ["intent", "children"];
 var DataCard = function DataCard(_ref) {
   var _ref$intent = _ref.intent,
     intent = _ref$intent === void 0 ? 'info' : _ref$intent,
     children = _ref.children,
-    nativeProps = _objectWithoutProperties(_ref, _excluded$h);
+    nativeProps = _objectWithoutProperties(_ref, _excluded$i);
   return /*#__PURE__*/React__default["default"].createElement(StyledDataCard, nativeProps, /*#__PURE__*/React__default["default"].createElement(Indicator, {
     themeIntent: intent,
     testID: "data-card-indicator"
@@ -11304,11 +11321,11 @@ var StyledCard$1 = index$a(reactNative.View)(function (_ref) {
   });
 });
 
-var _excluded$g = ["intent", "children"];
+var _excluded$h = ["intent", "children"];
 var Card = function Card(_ref) {
   var intent = _ref.intent,
     children = _ref.children,
-    nativeProps = _objectWithoutProperties(_ref, _excluded$g);
+    nativeProps = _objectWithoutProperties(_ref, _excluded$h);
   return /*#__PURE__*/React__default["default"].createElement(StyledCard$1, _extends$1({}, nativeProps, {
     themeIntent: intent
   }), children);
@@ -11324,7 +11341,7 @@ var StyledPageControl = index$a(PageControl)(function (_ref) {
     marginTop: theme.__hd__.cardCarousel.space.pageControlMarginTop
   };
 });
-var StyledWrapper$7 = index$a(reactNative.View)({});
+var StyledWrapper$8 = index$a(reactNative.View)({});
 var StyledCard = index$a(Card$1)(function (_ref2) {
   var theme = _ref2.theme;
   return {
@@ -11460,7 +11477,7 @@ var CardCarousel = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     }, /*#__PURE__*/React__default["default"].createElement(StyledShadow, null, /*#__PURE__*/React__default["default"].createElement(StyledCard, null, item)));
   }, [itemWidth]);
   var contentContainerPaddingHorizontal = theme.__hd__.cardCarousel.space.contentContainerPaddingHorizontal;
-  return /*#__PURE__*/React__default["default"].createElement(StyledWrapper$7, {
+  return /*#__PURE__*/React__default["default"].createElement(StyledWrapper$8, {
     style: style,
     testID: testID
   }, /*#__PURE__*/React__default["default"].createElement(reactNative.FlatList, {
@@ -11514,7 +11531,7 @@ var CardCarousel = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   }));
 });
 
-var _excluded$f = ["items", "onItemIndexChange", "renderActions", "selectedItemIndex", "style", "shouldShowPagination", "pageControlPosition"];
+var _excluded$g = ["items", "onItemIndexChange", "renderActions", "selectedItemIndex", "style", "shouldShowPagination", "pageControlPosition"];
 function useStateFromProp(initialValue) {
   var _useState = React.useState(initialValue),
     _useState2 = _slicedToArray(_useState, 2),
@@ -11539,7 +11556,7 @@ var Carousel = function Carousel(_ref) {
     shouldShowPagination = _ref$shouldShowPagina === void 0 ? noop : _ref$shouldShowPagina,
     _ref$pageControlPosit = _ref.pageControlPosition,
     pageControlPosition = _ref$pageControlPosit === void 0 ? 'bottom' : _ref$pageControlPosit,
-    nativeProps = _objectWithoutProperties(_ref, _excluded$f);
+    nativeProps = _objectWithoutProperties(_ref, _excluded$g);
   useDeprecation("shouldShowPagination prop has been deprecated", shouldShowPagination !== noop);
   useDeprecation("The use of 'pageControlPosition == bottom' has been deprecated", pageControlPosition === 'bottom');
   var carouselRef = React.useRef(null);
@@ -11629,7 +11646,7 @@ var index$8 = Object.assign(Carousel, {
   Card: CardCarousel
 });
 
-var StyledWrapper$6 = index$a(reactNative.TouchableOpacity)(function (_ref) {
+var StyledWrapper$7 = index$a(reactNative.TouchableOpacity)(function (_ref) {
   var theme = _ref.theme,
     themeWithBorder = _ref.themeWithBorder,
     themeDisabled = _ref.themeDisabled;
@@ -11686,7 +11703,7 @@ var Checkbox = function Checkbox(_ref) {
     onPress = _ref.onPress,
     style = _ref.style,
     testID = _ref.testID;
-  return /*#__PURE__*/React__default["default"].createElement(StyledWrapper$6, {
+  return /*#__PURE__*/React__default["default"].createElement(StyledWrapper$7, {
     onPress: onPress,
     disabled: disabled,
     themeDisabled: disabled,
@@ -11865,7 +11882,7 @@ var StyledErrorAndMaxLengthContainer = index$a(reactNative.View)(function () {
   };
 });
 
-var _excluded$e = ["label", "prefix", "suffix", "style", "textStyle", "testID", "accessibilityLabelledBy", "error", "required", "editable", "disabled", "loading", "maxLength", "hideCharacterCount", "helpText", "value", "defaultValue", "renderInputValue", "allowFontScaling", "variant"];
+var _excluded$f = ["label", "prefix", "suffix", "style", "textStyle", "testID", "accessibilityLabelledBy", "error", "required", "editable", "disabled", "loading", "maxLength", "hideCharacterCount", "helpText", "value", "defaultValue", "renderInputValue", "allowFontScaling", "variant"];
 var getState$1 = function getState(_ref) {
   var disabled = _ref.disabled,
     error = _ref.error,
@@ -11917,7 +11934,7 @@ var TextInput = /*#__PURE__*/React.forwardRef(function (_ref2, ref) {
     allowFontScaling = _ref2$allowFontScalin === void 0 ? false : _ref2$allowFontScalin,
     _ref2$variant = _ref2.variant,
     variant = _ref2$variant === void 0 ? 'text' : _ref2$variant,
-    nativeProps = _objectWithoutProperties(_ref2, _excluded$e);
+    nativeProps = _objectWithoutProperties(_ref2, _excluded$f);
   var displayText = (_ref3 = value !== undefined ? value : defaultValue) !== null && _ref3 !== void 0 ? _ref3 : '';
   var isEmptyValue = displayText.length === 0;
   var actualSuffix = loading ? 'loading' : suffix;
@@ -12352,11 +12369,11 @@ var DatePickerIOS = function DatePickerIOS(_ref) {
   }))));
 };
 
-var _excluded$d = ["variant"];
+var _excluded$e = ["variant"];
 var DatePicker = function DatePicker(_ref) {
   var _ref$variant = _ref.variant,
     variant = _ref$variant === void 0 ? 'default' : _ref$variant,
-    props = _objectWithoutProperties(_ref, _excluded$d);
+    props = _objectWithoutProperties(_ref, _excluded$e);
   if (variant === 'calendar') {
     return /*#__PURE__*/React__default["default"].createElement(DatePickerCalendar, props);
   }
@@ -12653,7 +12670,7 @@ var index$7 = Object.assign(Drawer, {
   Dragable: DragableDrawer
 });
 
-var StyledWrapper$5 = index$a(reactNative.View)(function (_ref) {
+var StyledWrapper$6 = index$a(reactNative.View)(function (_ref) {
   var theme = _ref.theme;
   return {
     display: 'flex',
@@ -12695,7 +12712,7 @@ var Empty = function Empty(_ref) {
     _ref$variant = _ref.variant,
     variant = _ref$variant === void 0 ? 'light' : _ref$variant;
   var theme = useTheme();
-  return /*#__PURE__*/React__default["default"].createElement(StyledWrapper$5, {
+  return /*#__PURE__*/React__default["default"].createElement(StyledWrapper$6, {
     style: style,
     testID: testID
   }, image !== undefined && /*#__PURE__*/React__default["default"].cloneElement(image, _objectSpread2(_objectSpread2({}, image.props), {}, {
@@ -12797,7 +12814,7 @@ var StyledErrorDescription = index$a(Typography.Text)(function (_ref9) {
   };
 });
 
-var _excluded$c = ["variant", "title", "description", "image", "testID", "ctaText", "onCtaPress", "secondaryCtaText", "onSecondaryCtaPress"],
+var _excluded$d = ["variant", "title", "description", "image", "testID", "ctaText", "onCtaPress", "secondaryCtaText", "onSecondaryCtaPress"],
   _excluded2 = ["visible", "variant", "title", "description", "image", "testID", "ctaText", "onCtaPress", "secondaryCtaText", "onSecondaryCtaPress"];
 var renderImage$1 = function renderImage(image) {
   if ( /*#__PURE__*/React.isValidElement(image)) {
@@ -12823,7 +12840,7 @@ var ErrorPage = function ErrorPage(_ref) {
     onCtaPress = _ref.onCtaPress,
     secondaryCtaText = _ref.secondaryCtaText,
     onSecondaryCtaPress = _ref.onSecondaryCtaPress,
-    nativeProps = _objectWithoutProperties(_ref, _excluded$c);
+    nativeProps = _objectWithoutProperties(_ref, _excluded$d);
   var showCta = ctaText && onCtaPress !== undefined;
   var showSecondaryCta = secondaryCtaText && onSecondaryCtaPress !== undefined;
   var showButtonContainer = showCta || showSecondaryCta;
@@ -12979,11 +12996,11 @@ var StyledIconContainer = index$a(Box)(function (_ref4) {
   };
 });
 
-var _excluded$b = ["active"];
+var _excluded$c = ["active"];
 var AnimatedIcons = reactNative.Animated.createAnimatedComponent(StyledFABIcon);
 var AnimatedFABIcon = function AnimatedFABIcon(_ref) {
   var active = _ref.active,
-    iconProps = _objectWithoutProperties(_ref, _excluded$b);
+    iconProps = _objectWithoutProperties(_ref, _excluded$c);
   var rotateAnimation = React.useRef(new reactNative.Animated.Value(active ? 1 : 0));
   React.useEffect(function () {
     var animation = reactNative.Animated.timing(rotateAnimation.current, {
@@ -13428,7 +13445,7 @@ var List = {
   BasicItem: BasicListItem
 };
 
-var StyledWrapper$4 = index$a(reactNative.View)(function () {
+var StyledWrapper$5 = index$a(reactNative.View)(function () {
   return {
     alignContent: 'flex-start'
   };
@@ -13612,7 +13629,7 @@ var PinInput = /*#__PURE__*/React.forwardRef(function (_ref2, ref) {
       blur: blur
     };
   });
-  return /*#__PURE__*/React__default["default"].createElement(StyledWrapper$4, {
+  return /*#__PURE__*/React__default["default"].createElement(StyledWrapper$5, {
     style: style,
     testID: testID
   }, /*#__PURE__*/React__default["default"].createElement(StyledPinWrapper, null, _toConsumableArray(Array(length).keys()).map(function (index) {
@@ -13729,7 +13746,7 @@ var StyledStrokeEnd = index$a(reactNative.View)(function (_ref6) {
   };
 });
 
-var _excluded$a = ["value", "renderValue", "intent", "style", "testID"];
+var _excluded$b = ["value", "renderValue", "intent", "style", "testID"];
 var HalfCircle = function HalfCircle(_ref) {
   var type = _ref.type,
     themeIntent = _ref.themeIntent;
@@ -13750,7 +13767,7 @@ var ProgressCircle = function ProgressCircle(_ref2) {
     intent = _ref2$intent === void 0 ? 'primary' : _ref2$intent,
     style = _ref2.style,
     testID = _ref2.testID,
-    nativeProps = _objectWithoutProperties(_ref2, _excluded$a);
+    nativeProps = _objectWithoutProperties(_ref2, _excluded$b);
   var theme = useTheme$1();
   var radius = theme.__hd__.progress.sizes.circleDiameter / 2;
   var progressAnimatedValue = React.useRef(new reactNative.Animated.Value(0));
@@ -13847,7 +13864,7 @@ var ProgressCircle = function ProgressCircle(_ref2) {
   }, renderValue(value)))));
 };
 
-var StyledWrapper$3 = index$a(reactNative.View)(function (_ref) {
+var StyledWrapper$4 = index$a(reactNative.View)(function (_ref) {
   var theme = _ref.theme,
     themeIntent = _ref.themeIntent;
   return {
@@ -13867,14 +13884,14 @@ var StyledInner = index$a(reactNative.Animated.View)(function (_ref2) {
   };
 });
 
-var _excluded$9 = ["value", "intent", "style", "testID"];
+var _excluded$a = ["value", "intent", "style", "testID"];
 var ProgressBar = function ProgressBar(_ref) {
   var value = _ref.value,
     _ref$intent = _ref.intent,
     intent = _ref$intent === void 0 ? 'primary' : _ref$intent,
     style = _ref.style,
     testID = _ref.testID,
-    nativeProps = _objectWithoutProperties(_ref, _excluded$9);
+    nativeProps = _objectWithoutProperties(_ref, _excluded$a);
   var _useState = React.useState(0),
     _useState2 = _slicedToArray(_useState, 2),
     width = _useState2[0],
@@ -13900,7 +13917,7 @@ var ProgressBar = function ProgressBar(_ref) {
     outputRange: [999, 0],
     extrapolate: 'clamp'
   });
-  return /*#__PURE__*/React__default["default"].createElement(StyledWrapper$3, _extends$1({}, nativeProps, {
+  return /*#__PURE__*/React__default["default"].createElement(StyledWrapper$4, _extends$1({}, nativeProps, {
     testID: testID,
     style: style,
     themeIntent: intent
@@ -14065,14 +14082,14 @@ var AnimatedSpinner = function AnimatedSpinner(_ref) {
   }, dotProps))));
 };
 
-var _excluded$8 = ["testID", "size", "intent"];
+var _excluded$9 = ["testID", "size", "intent"];
 var Spinner = function Spinner(_ref) {
   var testID = _ref.testID,
     _ref$size = _ref.size,
     size = _ref$size === void 0 ? 'medium' : _ref$size,
     _ref$intent = _ref.intent,
     intent = _ref$intent === void 0 ? 'primary' : _ref$intent,
-    nativeProps = _objectWithoutProperties(_ref, _excluded$8);
+    nativeProps = _objectWithoutProperties(_ref, _excluded$9);
   return /*#__PURE__*/React__default["default"].createElement(StyledView$1, nativeProps, /*#__PURE__*/React__default["default"].createElement(StyledSpinnerContainer, {
     testID: testID
   }, /*#__PURE__*/React__default["default"].createElement(AnimatedSpinner, {
@@ -14105,7 +14122,7 @@ var SwipeableAction = function SwipeableAction(_ref) {
   }, children);
 };
 
-var _excluded$7 = ["children", "state", "onStateChange", "leftActions", "leftActionsWidth", "rightActions", "rightActionsWidth"];
+var _excluded$8 = ["children", "state", "onStateChange", "leftActions", "leftActionsWidth", "rightActions", "rightActionsWidth"];
 var renderActions = function renderActions(actions, width, progress, direction) {
   var trans = progress.interpolate({
     inputRange: [0, 1],
@@ -14130,7 +14147,7 @@ var Swipeable = function Swipeable(_ref) {
     leftActionsWidth = _ref.leftActionsWidth,
     rightActions = _ref.rightActions,
     rightActionsWidth = _ref.rightActionsWidth,
-    swipeableProps = _objectWithoutProperties(_ref, _excluded$7);
+    swipeableProps = _objectWithoutProperties(_ref, _excluded$8);
   var _useWindowDimensions = reactNative.useWindowDimensions(),
     width = _useWindowDimensions.width;
   var swipeableRef = React.useRef(null);
@@ -14283,13 +14300,13 @@ var StyledHeading = index$a(reactNative.View)(function (_ref) {
     justifyContent: 'space-between'
   };
 });
-var StyledIconWrapper$1 = index$a(reactNative.View)(function (_ref2) {
+var StyledIconWrapper$2 = index$a(reactNative.View)(function (_ref2) {
   var theme = _ref2.theme;
   return {
     marginRight: theme.__hd__.sectionHeading.space.iconMarginRight
   };
 });
-var StyledWrapper$2 = index$a(reactNative.View)(function () {
+var StyledWrapper$3 = index$a(reactNative.View)(function () {
   return {
     display: 'flex',
     flexDirection: 'row'
@@ -14322,7 +14339,7 @@ var SectionHeading = function SectionHeading(_ref) {
   return /*#__PURE__*/React__default["default"].createElement(StyledHeading, {
     style: style,
     testID: testID
-  }, /*#__PURE__*/React__default["default"].createElement(StyledWrapper$2, null, /*#__PURE__*/React__default["default"].createElement(StyledIconWrapper$1, null, icon !== undefined && (typeof icon === 'string' ? /*#__PURE__*/React__default["default"].createElement(Icon, {
+  }, /*#__PURE__*/React__default["default"].createElement(StyledWrapper$3, null, /*#__PURE__*/React__default["default"].createElement(StyledIconWrapper$2, null, icon !== undefined && (typeof icon === 'string' ? /*#__PURE__*/React__default["default"].createElement(Icon, {
     icon: icon,
     size: ICON_SIZE_MAP[fontSize],
     intent: ICON_INTENT_MAP[intent]
@@ -14435,7 +14452,7 @@ var StyledSectionList = index$a(reactNative.SectionList)(function (_ref4) {
   };
 });
 
-var _excluded$6 = ["keyExtractor", "loading", "onEndReached", "onQueryChange", "sections", "renderItem", "sectionListRef"];
+var _excluded$7 = ["keyExtractor", "loading", "onEndReached", "onQueryChange", "sections", "renderItem", "sectionListRef"];
 var BaseOptionList = function BaseOptionList(_ref) {
   var keyExtractor = _ref.keyExtractor,
     loading = _ref.loading,
@@ -14444,7 +14461,7 @@ var BaseOptionList = function BaseOptionList(_ref) {
     sections = _ref.sections,
     renderItem = _ref.renderItem,
     sectionListRef = _ref.sectionListRef,
-    rest = _objectWithoutProperties(_ref, _excluded$6);
+    rest = _objectWithoutProperties(_ref, _excluded$7);
   var theme = useTheme$1();
   var _useState = React.useState(false),
     _useState2 = _slicedToArray(_useState, 2),
@@ -14513,7 +14530,7 @@ var Option$2 = function Option(_ref) {
   return highlighted === true ? /*#__PURE__*/React__default["default"].createElement(List.Item, props) : /*#__PURE__*/React__default["default"].createElement(List.BasicItem, props);
 };
 
-var _excluded$5 = ["keyExtractor", "loading", "onEndReached", "onPress", "onQueryChange", "sections", "renderOption", "value", "sectionListRef"];
+var _excluded$6 = ["keyExtractor", "loading", "onEndReached", "onPress", "onQueryChange", "sections", "renderOption", "value", "sectionListRef"];
 var OptionList$1 = function OptionList(_ref) {
   var keyExtractor = _ref.keyExtractor,
     loading = _ref.loading,
@@ -14524,7 +14541,7 @@ var OptionList$1 = function OptionList(_ref) {
     renderOption = _ref.renderOption,
     value = _ref.value,
     sectionListRef = _ref.sectionListRef,
-    rest = _objectWithoutProperties(_ref, _excluded$5);
+    rest = _objectWithoutProperties(_ref, _excluded$6);
   var renderItem = function renderItem(info) {
     var item = info.item;
     var selected = value.includes(info.item.value);
@@ -14712,7 +14729,7 @@ var StyledOptionList = index$a(BaseOptionList)(function (_ref) {
   };
 });
 
-var _excluded$4 = ["keyExtractor", "loading", "onEndReached", "onPress", "onQueryChange", "sections", "renderOption", "value", "sectionListRef"];
+var _excluded$5 = ["keyExtractor", "loading", "onEndReached", "onPress", "onQueryChange", "sections", "renderOption", "value", "sectionListRef"];
 var OptionList = function OptionList(_ref) {
   var keyExtractor = _ref.keyExtractor,
     loading = _ref.loading,
@@ -14723,7 +14740,7 @@ var OptionList = function OptionList(_ref) {
     renderOption = _ref.renderOption,
     value = _ref.value,
     sectionListRef = _ref.sectionListRef,
-    rest = _objectWithoutProperties(_ref, _excluded$4);
+    rest = _objectWithoutProperties(_ref, _excluded$5);
   var renderItem = function renderItem(info) {
     var item = info.item;
     var selected = item.value === value;
@@ -14888,7 +14905,7 @@ var StyledGradientContainer = index$a(Box)(function (_ref2) {
   };
 });
 
-var _excluded$3 = ["intent", "variant", "style", "onLayout"];
+var _excluded$4 = ["intent", "variant", "style", "onLayout"];
 var AnimatedLinearGradient = reactNative.Animated.createAnimatedComponent(LinearGradient__default["default"]);
 var gradientPositions = {
   start: {
@@ -14920,7 +14937,7 @@ var Skeleton = function Skeleton(_ref) {
     variant = _ref$variant === void 0 ? 'rounded' : _ref$variant,
     style = _ref.style,
     onLayout = _ref.onLayout,
-    props = _objectWithoutProperties(_ref, _excluded$3);
+    props = _objectWithoutProperties(_ref, _excluded$4);
   var theme = useTheme();
   var colors = React.useMemo(function () {
     return getGradientColors(theme, intent);
@@ -15063,7 +15080,7 @@ var StyledSuccessModal = index$a(reactNative.Modal)({
   width: '100%'
 });
 
-var _excluded$2 = ["variant", "title", "description", "image", "testID", "ctaText", "onCtaPress", "secondaryCtaText", "onSecondaryCtaPress"];
+var _excluded$3 = ["variant", "title", "description", "image", "testID", "ctaText", "onCtaPress", "secondaryCtaText", "onSecondaryCtaPress"];
 var renderImage = function renderImage(image) {
   if ( /*#__PURE__*/React.isValidElement(image)) {
     return /*#__PURE__*/React__default["default"].cloneElement(image, {
@@ -15089,7 +15106,7 @@ var SuccessPage = function SuccessPage(_ref) {
     onCtaPress = _ref$onCtaPress === void 0 ? noop$1 : _ref$onCtaPress,
     secondaryCtaText = _ref.secondaryCtaText,
     onSecondaryCtaPress = _ref.onSecondaryCtaPress,
-    nativeProps = _objectWithoutProperties(_ref, _excluded$2);
+    nativeProps = _objectWithoutProperties(_ref, _excluded$3);
   var showSecondaryButton = secondaryCtaText && onSecondaryCtaPress;
   return /*#__PURE__*/React__default["default"].createElement(StyledSuccessContainer, _extends$1({
     testID: testID,
@@ -15120,7 +15137,7 @@ var Success = function Success(props) {
 };
 
 var AnimatedView = reactNative.Animated.createAnimatedComponent(reactNative.View);
-var StyledWrapper$1 = index$a(reactNative.View)(function (_ref) {
+var StyledWrapper$2 = index$a(reactNative.View)(function (_ref) {
   var theme = _ref.theme;
   return {
     flexDirection: 'row',
@@ -15142,7 +15159,7 @@ var StyledTextWrapper = index$a(AnimatedView)(function (_ref2) {
     zIndex: 1
   };
 });
-var StyledIconWrapper = index$a(AnimatedView)(function (_ref3) {
+var StyledIconWrapper$1 = index$a(AnimatedView)(function (_ref3) {
   var theme = _ref3.theme;
   return {
     paddingHorizontal: theme.__hd__["switch"].spaces.selector.iconPadding,
@@ -15218,7 +15235,7 @@ var Option = function Option(_ref2) {
       badge: badge
     }));
   }
-  return /*#__PURE__*/React__default["default"].createElement(StyledIconWrapper, {
+  return /*#__PURE__*/React__default["default"].createElement(StyledIconWrapper$1, {
     style: {
       transform: [{
         translateX: translateX
@@ -15274,7 +15291,7 @@ var SelectorSwitch = function SelectorSwitch(_ref) {
       return _onPress === null || _onPress === void 0 ? void 0 : _onPress(value);
     },
     testID: testID
-  }, /*#__PURE__*/React__default["default"].createElement(StyledWrapper$1, {
+  }, /*#__PURE__*/React__default["default"].createElement(StyledWrapper$2, {
     onLayout: onContainerLayout,
     style: style
   }, options.map(function (opt, index) {
@@ -15298,7 +15315,7 @@ var SelectorSwitch = function SelectorSwitch(_ref) {
   })));
 };
 
-var StyledWrapper = index$a(reactNative.View)(function (_ref) {
+var StyledWrapper$1 = index$a(reactNative.View)(function (_ref) {
   var theme = _ref.theme,
     themeVariant = _ref.themeVariant;
   return {
@@ -15360,7 +15377,7 @@ var Switch = function Switch(_ref2) {
     testID: testID,
     onPress: onPress,
     disabled: disabled
-  }, /*#__PURE__*/React__default["default"].createElement(StyledWrapper, {
+  }, /*#__PURE__*/React__default["default"].createElement(StyledWrapper$1, {
     themeVariant: variant,
     style: style
   }, /*#__PURE__*/React__default["default"].createElement(StyledKnot, {
@@ -15981,7 +15998,7 @@ var StyledText = index$a(Typography.Text)(function (_ref3) {
   };
 });
 
-var _excluded$1 = ["content", "variant", "intent", "style", "testID"];
+var _excluded$2 = ["content", "variant", "intent", "style", "testID"];
 var Tag = function Tag(_ref) {
   var content = _ref.content,
     _ref$variant = _ref.variant,
@@ -15990,7 +16007,7 @@ var Tag = function Tag(_ref) {
     intent = _ref$intent === void 0 ? 'primary' : _ref$intent,
     style = _ref.style,
     testID = _ref.testID,
-    nativeProps = _objectWithoutProperties(_ref, _excluded$1);
+    nativeProps = _objectWithoutProperties(_ref, _excluded$2);
   return /*#__PURE__*/React__default["default"].createElement(StyledView, _extends$1({}, nativeProps, {
     themeIntent: intent,
     themeVariant: variant,
@@ -16606,16 +16623,76 @@ var ToolbarGroup = function ToolbarGroup(_ref) {
   }));
 };
 
-var _excluded = ["children"];
+var _excluded$1 = ["children"];
 var Toolbar = function Toolbar(_ref) {
   var children = _ref.children,
-    rest = _objectWithoutProperties(_ref, _excluded);
+    rest = _objectWithoutProperties(_ref, _excluded$1);
   return /*#__PURE__*/React__default["default"].createElement(ToolbarWrapper, rest, children);
 };
 var index$1 = Object.assign(Toolbar, {
   Group: ToolbarGroup
 });
 
+var AnimatedBox = reactNative.Animated.createAnimatedComponent(reactNative.View);
+var StyledWrapper = index$a(Box)({
+  flexDirection: 'row'
+});
+var StyledIconWrapper = index$a(AnimatedBox)(function (_ref) {
+  var theme = _ref.theme;
+  return {
+    padding: theme.__hd__.rate.spaces.iconWrapperPadding,
+    marginRight: theme.__hd__.rate.spaces.iconWrapperMarginRight
+  };
+});
+
+var _excluded = ["options", "value", "onChange", "readonly", "disabled"];
+var Rate = function Rate(_ref) {
+  var options = _ref.options,
+    value = _ref.value,
+    onChange = _ref.onChange,
+    _ref$readonly = _ref.readonly,
+    readonly = _ref$readonly === void 0 ? false : _ref$readonly,
+    _ref$disabled = _ref.disabled,
+    disabled = _ref$disabled === void 0 ? false : _ref$disabled,
+    otherProps = _objectWithoutProperties(_ref, _excluded);
+  var valueIndex = React.useMemo(function () {
+    return options.findIndex(function (item) {
+      return item.value === value;
+    });
+  }, [value, options]);
+  var animatedValue = React.useRef(new reactNative.Animated.Value(0)).current;
+  var scale = animatedValue.interpolate({
+    inputRange: [0, 1],
+    outputRange: [0.8, 1]
+  });
+  React.useEffect(function () {
+    animatedValue.setValue(0);
+    reactNative.Animated.spring(animatedValue, {
+      toValue: 1,
+      useNativeDriver: reactNative.Platform.OS !== 'web'
+    }).start();
+  }, [value, animatedValue]);
+  return /*#__PURE__*/React__default["default"].createElement(StyledWrapper, otherProps, options.length > 0 && options.map(function (item, index) {
+    return /*#__PURE__*/React__default["default"].createElement(reactNative.Pressable, {
+      key: item.value,
+      disabled: disabled || readonly,
+      onPress: function onPress() {
+        return onChange === null || onChange === void 0 ? void 0 : onChange(item.value);
+      },
+      testID: item.value.toString()
+    }, /*#__PURE__*/React__default["default"].createElement(StyledIconWrapper, {
+      style: valueIndex === index && {
+        transform: [{
+          scale: scale
+        }]
+      }
+    }, /*#__PURE__*/React__default["default"].createElement(Icon, {
+      icon: index <= valueIndex ? 'star' : 'star-outlined',
+      intent: disabled ? 'disabled-text' : 'primary'
+    })));
+  }));
+};
+
 var RefreshControl = function RefreshControl(_ref) {
   var props = _extends$1({}, _ref);
   var theme = useTheme();
@@ -33030,6 +33107,7 @@ exports.PageControl = PageControl;
 exports.PinInput = PinInput;
 exports.Progress = Progress;
 exports.Radio = CompoundRadio;
+exports.Rate = Rate;
 exports.RefreshControl = RefreshControl;
 exports.RichTextEditor = index;
 exports.SectionHeading = SectionHeading;