@hero-design/rn 7.16.2 → 7.17.1

package/es/index.js

@@ -1,5 +1,5 @@
 import * as reactNative from 'react-native';
-import { Dimensions, StyleSheet as StyleSheet$1, Animated, View, Easing, TouchableOpacity, Text as Text$1, Image, Platform, TouchableWithoutFeedback, Pressable, SafeAreaView, TouchableHighlight, Modal, TextInput as TextInput$1, InteractionManager, FlatList, Keyboard, LayoutAnimation } from 'react-native';
+import { Dimensions, StyleSheet as StyleSheet$1, Animated, View, Easing, TouchableOpacity, Text as Text$1, Image, Platform, TouchableWithoutFeedback, Pressable, SafeAreaView, TouchableHighlight, Modal, TextInput as TextInput$1, InteractionManager, Keyboard, SectionList, FlatList, LayoutAnimation } from 'react-native';
 import React, { useContext, createContext, createElement, forwardRef, useEffect, useCallback, useRef, useMemo, useState, useLayoutEffect, useImperativeHandle } from 'react';
 import { createIconSetFromIcoMoon } from 'react-native-vector-icons';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
@@ -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
@@ -3459,9 +3459,9 @@ var getSelectTheme = function getSelectTheme(theme) {
   };
   var space = {
     minimumOptionListHeight: theme.space.xxxxlarge * 5,
-    optionPadding: theme.space.medium,
-    optionListPadding: theme.space.medium,
-    optionListSpacing: theme.space.xsmall,
+    sectionSpacing: theme.space.smallMedium,
+    optionSpacing: theme.space.xsmall,
+    optionHorizontalMargin: theme.space.smallMedium,
     searchBarMarginTopSpacing: theme.space.small,
     searchBarHorizontalSpacing: theme.space.medium,
     searchBarBottomSpacing: theme.space.small
@@ -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%',
@@ -18840,11 +18840,12 @@ var StyledErrorAndMaxLengthContainer = index$6(View)(function () {
   };
 });
 
-var _excluded$5 = ["label", "prefix", "suffix", "style", "textStyle", "testID", "accessibilityLabelledBy", "error", "required", "editable", "disabled", "maxLength", "helpText", "value", "defaultValue"];
+var _excluded$5 = ["label", "prefix", "suffix", "style", "textStyle", "testID", "accessibilityLabelledBy", "error", "required", "editable", "disabled", "loading", "maxLength", "helpText", "value", "defaultValue"];
 var getVariant = function getVariant(_ref) {
   var disabled = _ref.disabled,
       error = _ref.error,
       editable = _ref.editable,
+      loading = _ref.loading,
       isFocused = _ref.isFocused,
       isEmptyValue = _ref.isEmptyValue;
 
@@ -18856,7 +18857,7 @@ var getVariant = function getVariant(_ref) {
     return 'error';
   }
 
-  if (!editable) {
+  if (!editable || loading) {
     return 'readonly';
   }
 
@@ -18887,6 +18888,8 @@ var TextInput = function TextInput(_ref2) {
       editable = _ref2$editable === void 0 ? true : _ref2$editable,
       _ref2$disabled = _ref2.disabled,
       disabled = _ref2$disabled === void 0 ? false : _ref2$disabled,
+      _ref2$loading = _ref2.loading,
+      loading = _ref2$loading === void 0 ? false : _ref2$loading,
       maxLength = _ref2.maxLength,
       helpText = _ref2.helpText,
       value = _ref2.value,
@@ -18896,6 +18899,7 @@ var TextInput = function TextInput(_ref2) {
   var textInputReference = useRef(null);
   var displayText = (_ref3 = value !== undefined ? value : defaultValue) !== null && _ref3 !== void 0 ? _ref3 : '';
   var isEmptyValue = displayText.length === 0;
+  var actualSuffix = loading ? 'loading' : suffix;
 
   var _React$useState = React.useState(false),
       _React$useState2 = _slicedToArray(_React$useState, 2),
@@ -18906,12 +18910,13 @@ var TextInput = function TextInput(_ref2) {
     disabled: disabled,
     error: error,
     editable: editable,
+    loading: loading,
     isFocused: isFocused,
     isEmptyValue: isEmptyValue
   });
   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
@@ -18928,7 +18933,7 @@ var TextInput = function TextInput(_ref2) {
     fontSize: "small",
     themeVariant: variant
   }, label)), typeof prefix === 'string' ? /*#__PURE__*/React.createElement(Icon, {
-    intent: disabled ? 'disabled-text' : 'text',
+    intent: variant === 'disabled' ? 'disabled-text' : 'text',
     testID: "input-prefix",
     icon: prefix,
     size: "xsmall"
@@ -18949,7 +18954,7 @@ var TextInput = function TextInput(_ref2) {
     }, textStyle]),
     testID: "text-input",
     accessibilityState: {
-      disabled: disabled
+      disabled: variant === 'disabled' || variant === 'readonly'
     } // @ts-ignore
     ,
     accessibilityLabelledBy: accessibilityLabelledBy
@@ -18977,10 +18982,11 @@ var TextInput = function TextInput(_ref2) {
     },
     defaultValue: defaultValue,
     placeholder: variant === 'focused' ? nativeProps.placeholder : undefined
-  }))), typeof suffix === 'string' ? /*#__PURE__*/React.createElement(Icon, {
-    intent: disabled ? 'disabled-text' : 'text',
+  }))), typeof actualSuffix === 'string' ? /*#__PURE__*/React.createElement(Icon, {
+    intent: variant === 'disabled' ? 'disabled-text' : 'text',
     testID: "input-suffix",
-    icon: suffix,
+    icon: actualSuffix,
+    spin: actualSuffix === 'loading',
     size: "xsmall"
   }) : suffix), /*#__PURE__*/React.createElement(StyledErrorAndHelpTextContainer, null, /*#__PURE__*/React.createElement(StyledErrorAndMaxLengthContainer, null, error && /*#__PURE__*/React.createElement(StyledErrorContainer$1, null, /*#__PURE__*/React.createElement(Icon, {
     testID: "input-error-icon",
@@ -19148,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), {}, {
@@ -19213,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"
@@ -19464,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,
@@ -19552,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
@@ -19763,10 +19769,10 @@ var BasicListItem = function BasicListItem(_ref) {
     underlayColor: theme.__hd__.list.colors.highlightedListItemContainerBackground
   }, /*#__PURE__*/React.createElement(React.Fragment, null, prefix && /*#__PURE__*/React.createElement(StyledPrefixContainer, null, typeof prefix === 'string' ? /*#__PURE__*/React.createElement(Icon, {
     icon: prefix
-  }) : prefix), /*#__PURE__*/React.createElement(StyledTitleContainer, null, /*#__PURE__*/React.createElement(Typography.Text, {
+  }) : prefix), /*#__PURE__*/React.createElement(StyledTitleContainer, null, typeof title === 'string' ? /*#__PURE__*/React.createElement(Typography.Text, {
     intent: "body",
     fontSize: "large"
-  }, title), subtitle && /*#__PURE__*/React.createElement(Typography.Text, {
+  }, title) : title, subtitle && /*#__PURE__*/React.createElement(Typography.Text, {
     intent: "subdued",
     fontSize: "small"
   }, subtitle)), suffix && /*#__PURE__*/React.createElement(StyledSuffixContainer, null, typeof suffix === 'string' ? /*#__PURE__*/React.createElement(Icon, {
@@ -20002,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"],
@@ -20044,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
@@ -20065,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
   }));
 };
@@ -20079,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, {
@@ -20117,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, {
@@ -20141,7 +20154,8 @@ var ProgressCircle = function ProgressCircle(_ref2) {
       transform: [{
         rotate: '180deg'
       }],
-      zIndex: 1
+      zIndex: 1,
+      marginLeft: -0.1
     }
   }, /*#__PURE__*/React.createElement(HalfCircle, {
     type: "foreground",
@@ -20159,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), {}, {
@@ -20168,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, "%")))));
 };
 
@@ -20425,7 +20439,7 @@ var Radio = function Radio(_ref) {
   })));
 };
 
-function getKey$1(option, index, keyExtractor) {
+function getKey(option, index, keyExtractor) {
   var key = '';
 
   if (keyExtractor !== undefined) {
@@ -20451,7 +20465,7 @@ var RadioGroup = function RadioGroup(_ref) {
     testID: testID
   }, options.map(function (option, index) {
     return /*#__PURE__*/React.createElement(React.Fragment, {
-      key: getKey$1(option, index, keyExtractor)
+      key: getKey(option, index, keyExtractor)
     }, index !== 0 && /*#__PURE__*/React.createElement(Spacer, null), /*#__PURE__*/React.createElement(Radio, {
       text: option.text,
       checked: option.value === value,
@@ -20533,20 +20547,26 @@ var SectionHeading = function SectionHeading(_ref) {
   }, text)), rightChildren);
 };
 
-index$6(View)(function (_ref) {
+var SectionSpacer = index$6(View)(function (_ref) {
   var theme = _ref.theme;
   return {
-    marginTop: theme.__hd__.select.space.optionListSpacing
+    marginTop: theme.__hd__.select.space.sectionSpacing
   };
 });
-var FooterText = index$6(Typography.Text)(function (_ref2) {
+var OptionSpacer = index$6(View)(function (_ref2) {
   var theme = _ref2.theme;
   return {
-    color: theme.__hd__.select.colors.footerText
+    marginTop: theme.__hd__.select.space.optionSpacing
   };
 });
-var StyledSearchBar = index$6(View)(function (_ref3) {
+var FooterText = index$6(Typography.Text)(function (_ref3) {
   var theme = _ref3.theme;
+  return {
+    color: theme.__hd__.select.colors.footerText
+  };
+});
+var StyledSearchBar = index$6(View)(function (_ref4) {
+  var theme = _ref4.theme;
   return {
     marginTop: theme.__hd__.select.space.searchBarMarginTopSpacing,
     paddingHorizontal: theme.__hd__.select.space.searchBarHorizontalSpacing,
@@ -20565,18 +20585,70 @@ var Footer = function Footer(_ref) {
   }, label));
 };
 
-var getKey = function getKey(option, index, keyExtractor) {
-  var key = '';
+var isSections = function isSections(options) {
+  var firstOption = options[0];
+  return firstOption !== undefined && firstOption.category !== undefined;
+};
+var toSections = function toSections(options) {
+  if (isSections(options)) {
+    return options;
+  }
 
-  if (keyExtractor !== undefined) {
-    key = keyExtractor(option, index);
-  } else if (option.key !== undefined) {
-    key = option.key;
-  } else {
-    key = index;
+  return [{
+    category: '',
+    data: options
+  }];
+};
+var toFlatOptions = function toFlatOptions(options) {
+  if (isSections(options)) {
+    return options.flatMap(function (opt) {
+      return opt.data;
+    });
   }
 
-  return key;
+  return options;
+};
+var getScrollParams = function getScrollParams(value, sections) {
+  var itemIndex = -1;
+  var sectionIndex = sections.findIndex(function (section) {
+    itemIndex = section.data.findIndex(function (opt) {
+      return opt.value === value;
+    });
+    return itemIndex !== -1;
+  });
+  return {
+    sectionIndex: sectionIndex < 0 ? 0 : sectionIndex,
+    itemIndex: itemIndex < 0 ? 0 : itemIndex
+  };
+};
+var useKeyboard = function useKeyboard() {
+  var _useState = useState(false),
+      _useState2 = _slicedToArray(_useState, 2),
+      isKeyboardVisible = _useState2[0],
+      setKeyboardVisible = _useState2[1];
+
+  var _useState3 = useState(0),
+      _useState4 = _slicedToArray(_useState3, 2),
+      keyboardHeight = _useState4[0],
+      setKeyboardHeight = _useState4[1];
+
+  useEffect(function () {
+    var keyboardWillShowListener = Keyboard.addListener('keyboardWillShow', function (e) {
+      setKeyboardVisible(true);
+      setKeyboardHeight(e.endCoordinates.height);
+    });
+    var keyboardWillHideListener = Keyboard.addListener('keyboardWillHide', function () {
+      setKeyboardVisible(false);
+    });
+    return function () {
+      keyboardWillShowListener.remove();
+      keyboardWillHideListener.remove();
+    };
+  }, []);
+  return {
+    isKeyboardVisible: isKeyboardVisible,
+    keyboardHeight: keyboardHeight
+  };
 };
 
 var StyledOptionList = function StyledOptionList(_ref) {
@@ -20584,26 +20656,23 @@ var StyledOptionList = function StyledOptionList(_ref) {
       loading = _ref.loading,
       onEndReached = _ref.onEndReached,
       onQueryChange = _ref.onQueryChange,
-      options = _ref.options,
-      RenderItem = _ref.RenderItem,
-      _ref$scrollIndex = _ref.scrollIndex,
-      scrollIndex = _ref$scrollIndex === void 0 ? 0 : _ref$scrollIndex;
+      sections = _ref.sections,
+      renderItem = _ref.renderItem,
+      scrollParams = _ref.scrollParams;
   var theme = useTheme$1();
-  var flatListRef = useRef(null);
+  var sectionListRef = useRef(null);
 
   var _useState = useState(false),
       _useState2 = _slicedToArray(_useState, 2),
       onEndReachedCalled = _useState2[0],
       setOnEndReachedCalled = _useState2[1];
 
-  return /*#__PURE__*/React.createElement(FlatList, {
-    ref: flatListRef,
-    style: _objectSpread2({
-      paddingHorizontal: theme.__hd__.select.space.optionListPadding
-    }, onQueryChange ? {
+  return /*#__PURE__*/React.createElement(SectionList, {
+    ref: sectionListRef,
+    style: _objectSpread2({}, onQueryChange ? {
       height: Dimensions.get('screen').height
     } : {}),
-    data: options,
+    sections: sections,
     keyExtractor: keyExtractor,
     onEndReachedThreshold: 0.1,
     onEndReached: function onEndReached() {
@@ -20611,11 +20680,9 @@ var StyledOptionList = function StyledOptionList(_ref) {
     },
     onScrollToIndexFailed: function onScrollToIndexFailed() {},
     onContentSizeChange: function onContentSizeChange() {
-      var _flatListRef$current;
+      var _sectionListRef$curre;
 
-      return options.length && ((_flatListRef$current = flatListRef.current) === null || _flatListRef$current === void 0 ? void 0 : _flatListRef$current.scrollToIndex({
-        index: scrollIndex
-      }));
+      return sections.length && ((_sectionListRef$curre = sectionListRef.current) === null || _sectionListRef$curre === void 0 ? void 0 : _sectionListRef$curre.scrollToLocation(scrollParams));
     },
     onMomentumScrollBegin: function onMomentumScrollBegin() {
       if (onEndReached && onEndReachedCalled && !loading) onEndReached();
@@ -20628,30 +20695,37 @@ var StyledOptionList = function StyledOptionList(_ref) {
         height: theme.space.xxxxlarge
       }
     }, /*#__PURE__*/React.createElement(Spinner, null)) : null,
-    renderItem: function renderItem(_ref2) {
-      var item = _ref2.item,
-          index = _ref2.index;
-      return /*#__PURE__*/React.createElement(View, {
-        key: getKey(item, index, keyExtractor)
-      }, /*#__PURE__*/React.createElement(RenderItem, {
-        item: item
-      }));
-    }
+    renderSectionHeader: function renderSectionHeader(_ref2) {
+      var category = _ref2.section.category;
+      return category !== '' ? /*#__PURE__*/React.createElement(SectionHeading, {
+        text: category,
+        style: {
+          marginBottom: 0
+        }
+      }) : null;
+    },
+    renderItem: renderItem,
+    ItemSeparatorComponent: OptionSpacer,
+    SectionSeparatorComponent: SectionSpacer
   });
 };
 
 var Option$1 = function Option(_ref) {
   var text = _ref.text,
+      _ref$disabled = _ref.disabled,
+      disabled = _ref$disabled === void 0 ? false : _ref$disabled,
       selected = _ref.selected,
       onPress = _ref.onPress;
+  var theme = useTheme();
   return /*#__PURE__*/React.createElement(List.BasicItem, {
     selected: selected,
+    disabled: disabled,
     onPress: onPress,
     title: text,
-    suffix: selected ? /*#__PURE__*/React.createElement(Icon, {
-      icon: "checkmark",
-      size: "small"
-    }) : undefined
+    suffix: selected ? 'checkmark' : undefined,
+    style: {
+      marginHorizontal: theme.__hd__.select.space.optionHorizontalMargin
+    }
   });
 };
 
@@ -20659,51 +20733,62 @@ var OptionList$1 = function OptionList(_ref) {
   var keyExtractor = _ref.keyExtractor,
       loading = _ref.loading,
       onEndReached = _ref.onEndReached,
-      _onPress = _ref.onPress,
+      onPress = _ref.onPress,
       onQueryChange = _ref.onQueryChange,
-      options = _ref.options,
+      sections = _ref.sections,
+      renderOption = _ref.renderOption,
       value = _ref.value;
   var firstValue = value === null || value === void 0 ? void 0 : value[0];
-  var rawScrollIndex = firstValue ? options.findIndex(function (option) {
-    return option.value === firstValue;
-  }) : 0;
-  var scrollIndex = rawScrollIndex - 2 >= 0 ? rawScrollIndex - 2 : 0;
-  var RenderItem = /*#__PURE__*/React.memo(function (_ref2) {
-    var item = _ref2.item;
-    return /*#__PURE__*/React.createElement(Option$1, {
-      text: item.text,
-      selected: value.includes(item.value),
-      onPress: function onPress() {
-        if (value.includes(item.value)) {
-          _onPress(value.filter(function (val) {
-            return val !== item.value;
-          }));
-        } else {
-          _onPress([].concat(_toConsumableArray(value), [item.value]));
-        }
+  var scrollParams = getScrollParams(firstValue, sections);
+
+  var renderItem = function renderItem(info) {
+    var item = info.item;
+    var selected = value.includes(info.item.value);
+
+    var onItemPress = function onItemPress() {
+      if (value.includes(info.item.value)) {
+        onPress(value.filter(function (val) {
+          return val !== info.item.value;
+        }));
+      } else {
+        onPress([].concat(_toConsumableArray(value), [info.item.value]));
       }
+    };
+
+    return renderOption ? renderOption(_objectSpread2(_objectSpread2({}, info), {}, {
+      selected: selected,
+      onPress: onItemPress
+    })) : /*#__PURE__*/React.createElement(Option$1, {
+      selected: selected,
+      text: item.text,
+      disabled: item.disabled,
+      onPress: onItemPress
     });
-  });
+  };
+
   return /*#__PURE__*/React.createElement(StyledOptionList, {
     keyExtractor: keyExtractor,
     loading: loading,
     onEndReached: onEndReached,
     onQueryChange: onQueryChange,
-    options: options,
-    RenderItem: RenderItem,
-    scrollIndex: scrollIndex
+    sections: sections,
+    renderItem: renderItem,
+    scrollParams: scrollParams
   });
 };
 
 function MultiSelect(_ref) {
   var footerLabel = _ref.footerLabel,
       label = _ref.label,
-      loading = _ref.loading,
+      _ref$loading = _ref.loading,
+      loading = _ref$loading === void 0 ? false : _ref$loading,
+      inputProps = _ref.inputProps,
       onConfirm = _ref.onConfirm,
       onDimiss = _ref.onDimiss,
       onEndReached = _ref.onEndReached,
       onQueryChange = _ref.onQueryChange,
       options = _ref.options,
+      renderOption = _ref.renderOption,
       query = _ref.query,
       error = _ref.error,
       _ref$editable = _ref.editable,
@@ -20715,6 +20800,10 @@ function MultiSelect(_ref) {
       testID = _ref.testID,
       value = _ref.value;
 
+  var _useKeyboard = useKeyboard(),
+      isKeyboardVisible = _useKeyboard.isKeyboardVisible,
+      keyboardHeight = _useKeyboard.keyboardHeight;
+
   var _useState = useState(false),
       _useState2 = _slicedToArray(_useState, 2),
       open = _useState2[0],
@@ -20725,37 +20814,15 @@ function MultiSelect(_ref) {
       selectingValue = _useState4[0],
       setSelectingValue = _useState4[1];
 
-  var displayedValue = options.filter(function (opt) {
+  var sections = toSections(options);
+  var flatOptions = toFlatOptions(options);
+  var displayedValue = flatOptions.filter(function (opt) {
     return value.includes(opt.value);
   }).map(function (opt) {
     return opt.text;
   }).join(', ');
-
-  var _useState5 = useState(false),
-      _useState6 = _slicedToArray(_useState5, 2),
-      isKeyboardVisible = _useState6[0],
-      setKeyboardVisible = _useState6[1];
-
-  var _useState7 = useState(0),
-      _useState8 = _slicedToArray(_useState7, 2),
-      keyboardHeight = _useState8[0],
-      setKeyboardHeight = _useState8[1];
-
-  useEffect(function () {
-    var keyboardDidShowListener = Keyboard.addListener('keyboardDidShow', function (e) {
-      setKeyboardVisible(true);
-      setKeyboardHeight(e.endCoordinates.height);
-    });
-    var keyboardDidHideListener = Keyboard.addListener('keyboardDidHide', function () {
-      setKeyboardVisible(false);
-    });
-    return function () {
-      keyboardDidHideListener.remove();
-      keyboardDidShowListener.remove();
-    };
-  }, []);
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(View, {
-    pointerEvents: !editable || disabled ? 'none' : 'auto'
+    pointerEvents: !editable || disabled || inputProps !== null && inputProps !== void 0 && inputProps.loading ? 'none' : 'auto'
   }, /*#__PURE__*/React.createElement(TouchableOpacity, {
     onPress: function onPress() {
       return setOpen(true);
@@ -20768,6 +20835,7 @@ function MultiSelect(_ref) {
     error: error,
     editable: editable,
     disabled: disabled,
+    loading: inputProps === null || inputProps === void 0 ? void 0 : inputProps.loading,
     numberOfLines: numberOfLines,
     pointerEvents: "none",
     style: style,
@@ -20799,9 +20867,11 @@ function MultiSelect(_ref) {
     onChangeText: onQueryChange,
     value: query
   })), /*#__PURE__*/React.createElement(OptionList$1, {
+    onQueryChange: onQueryChange,
     onEndReached: onEndReached,
     loading: loading,
-    options: options,
+    sections: sections,
+    renderOption: renderOption,
     value: selectingValue,
     onPress: setSelectingValue
   })));
@@ -20809,12 +20879,19 @@ function MultiSelect(_ref) {
 
 var Option = function Option(_ref) {
   var text = _ref.text,
+      _ref$disabled = _ref.disabled,
+      disabled = _ref$disabled === void 0 ? false : _ref$disabled,
       selected = _ref.selected,
       onPress = _ref.onPress;
+  var theme = useTheme();
   return /*#__PURE__*/React.createElement(List.BasicItem, {
     selected: selected,
+    disabled: disabled,
     onPress: onPress,
-    title: text
+    title: text,
+    style: {
+      marginHorizontal: theme.__hd__.select.space.optionHorizontalMargin
+    }
   });
 };
 
@@ -20822,49 +20899,60 @@ var OptionList = function OptionList(_ref) {
   var keyExtractor = _ref.keyExtractor,
       loading = _ref.loading,
       onEndReached = _ref.onEndReached,
-      _onPress = _ref.onPress,
+      onPress = _ref.onPress,
       onQueryChange = _ref.onQueryChange,
-      options = _ref.options,
+      sections = _ref.sections,
+      renderOption = _ref.renderOption,
       value = _ref.value;
-  var rawScrollIndex = options.findIndex(function (option) {
-    return option.value === value;
-  });
-  var scrollIndex = rawScrollIndex - 2 >= 0 ? rawScrollIndex - 2 : 0;
-  var RenderItem = /*#__PURE__*/React.memo(function (_ref2) {
-    var item = _ref2.item;
-    return /*#__PURE__*/React.createElement(Option, {
-      selected: value === item.value,
-      text: item.text,
-      onPress: function onPress() {
-        if (value === item.value) {
-          _onPress(null);
-        } else {
-          _onPress(item.value);
-        }
+  var scrollParams = getScrollParams(value, sections);
+
+  var renderItem = function renderItem(info) {
+    var item = info.item;
+    var selected = item.value === value;
+
+    var onItemPress = function onItemPress() {
+      if (value === item.value) {
+        onPress(null);
+      } else {
+        onPress(item.value);
       }
+    };
+
+    return renderOption ? renderOption(_objectSpread2(_objectSpread2({}, info), {}, {
+      selected: selected,
+      onPress: onItemPress
+    })) : /*#__PURE__*/React.createElement(Option, {
+      selected: selected,
+      text: item.text,
+      disabled: item.disabled,
+      onPress: onItemPress
     });
-  });
+  };
+
   return /*#__PURE__*/React.createElement(StyledOptionList, {
     keyExtractor: keyExtractor,
     loading: loading,
     onEndReached: onEndReached,
     onQueryChange: onQueryChange,
-    options: options,
-    RenderItem: RenderItem,
-    scrollIndex: scrollIndex
+    sections: sections,
+    renderItem: renderItem,
+    scrollParams: scrollParams
   });
 };
 
 var SingleSelect = function SingleSelect(_ref) {
-  var _options$find;
+  var _flatOptions$find;
 
   var label = _ref.label,
-      loading = _ref.loading,
+      _ref$loading = _ref.loading,
+      loading = _ref$loading === void 0 ? false : _ref$loading,
+      inputProps = _ref.inputProps,
       onConfirm = _ref.onConfirm,
       onDimiss = _ref.onDimiss,
       onEndReached = _ref.onEndReached,
       onQueryChange = _ref.onQueryChange,
       options = _ref.options,
+      renderOption = _ref.renderOption,
       query = _ref.query,
       error = _ref.error,
       _ref$editable = _ref.editable,
@@ -20876,6 +20964,10 @@ var SingleSelect = function SingleSelect(_ref) {
       testID = _ref.testID,
       value = _ref.value;
 
+  var _useKeyboard = useKeyboard(),
+      isKeyboardVisible = _useKeyboard.isKeyboardVisible,
+      keyboardHeight = _useKeyboard.keyboardHeight;
+
   var _useState = useState(false),
       _useState2 = _slicedToArray(_useState, 2),
       open = _useState2[0],
@@ -20886,35 +20978,13 @@ var SingleSelect = function SingleSelect(_ref) {
       selectingValue = _useState4[0],
       setSelectingValue = _useState4[1];
 
-  var displayedValue = (_options$find = options.find(function (opt) {
+  var sections = toSections(options);
+  var flatOptions = toFlatOptions(options);
+  var displayedValue = (_flatOptions$find = flatOptions.find(function (opt) {
     return value === opt.value;
-  })) === null || _options$find === void 0 ? void 0 : _options$find.text;
-
-  var _useState5 = useState(false),
-      _useState6 = _slicedToArray(_useState5, 2),
-      isKeyboardVisible = _useState6[0],
-      setKeyboardVisible = _useState6[1];
-
-  var _useState7 = useState(0),
-      _useState8 = _slicedToArray(_useState7, 2),
-      keyboardHeight = _useState8[0],
-      setKeyboardHeight = _useState8[1];
-
-  useEffect(function () {
-    var keyboardDidShowListener = Keyboard.addListener('keyboardWillShow', function (e) {
-      setKeyboardVisible(true);
-      setKeyboardHeight(e.endCoordinates.height);
-    });
-    var keyboardDidHideListener = Keyboard.addListener('keyboardWillHide', function () {
-      setKeyboardVisible(false);
-    });
-    return function () {
-      keyboardDidHideListener.remove();
-      keyboardDidShowListener.remove();
-    };
-  }, []);
+  })) === null || _flatOptions$find === void 0 ? void 0 : _flatOptions$find.text;
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(View, {
-    pointerEvents: !editable || disabled ? 'none' : 'auto'
+    pointerEvents: !editable || disabled || inputProps !== null && inputProps !== void 0 && inputProps.loading ? 'none' : 'auto'
   }, /*#__PURE__*/React.createElement(TouchableOpacity, {
     onPress: function onPress() {
       return setOpen(true);
@@ -20927,6 +20997,7 @@ var SingleSelect = function SingleSelect(_ref) {
     error: error,
     editable: editable,
     disabled: disabled,
+    loading: inputProps === null || inputProps === void 0 ? void 0 : inputProps.loading,
     numberOfLines: numberOfLines,
     pointerEvents: "none",
     style: style,
@@ -20954,7 +21025,8 @@ var SingleSelect = function SingleSelect(_ref) {
     onQueryChange: onQueryChange,
     onEndReached: onEndReached,
     loading: loading,
-    options: options,
+    sections: sections,
+    renderOption: renderOption,
     value: selectingValue,
     onPress: function onPress(selectedValue) {
       setOpen(false);
@@ -40291,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, {