@hero-design/rn 8.134.0 → 8.135.0

package/es/index.js

@@ -1,5 +1,5 @@
 import * as reactNative from 'react-native';
-import { StyleSheet as StyleSheet$1, Platform, Dimensions, Keyboard, Animated, View, UIManager, LayoutAnimation, TouchableOpacity, Text as Text$1, Easing, useWindowDimensions, TouchableWithoutFeedback, Modal as Modal$1, Image as Image$1, Pressable, KeyboardAvoidingView, TouchableHighlight, ScrollView, FlatList, TextInput as TextInput$1, PanResponder, BackHandler, InteractionManager, SectionList, PixelRatio, RefreshControl as RefreshControl$1 } from 'react-native';
+import { StyleSheet as StyleSheet$1, Platform, Dimensions, Keyboard, Animated, View, UIManager, LayoutAnimation, TouchableOpacity, Text as Text$1, Easing, useWindowDimensions, TouchableWithoutFeedback, Modal as Modal$1, Image as Image$1, Pressable, KeyboardAvoidingView, TouchableHighlight, ScrollView, FlatList, TextInput as TextInput$1, PanResponder, BackHandler, InteractionManager, SectionList as SectionList$1, PixelRatio, RefreshControl as RefreshControl$1 } from 'react-native';
 import * as React from 'react';
 import React__default, { useState, useEffect, useMemo, useCallback, useRef, useLayoutEffect, createContext, forwardRef, useContext, memo, useReducer, isValidElement, useImperativeHandle } from 'react';
 import MaskedView from '@react-native-masked-view/masked-view';
@@ -6753,6 +6753,34 @@ var getSectionHeadingTheme = function getSectionHeadingTheme(theme) {
   };
 };
 
+var getSectionListTheme = function getSectionListTheme(theme) {
+  var colors = {
+    groupBackground: theme.colors.defaultGlobalSurface
+  };
+  var radii = {
+    group: theme.radii.xlarge
+  };
+  var marginHorizontalValues = {
+    none: 0,
+    xsmall: theme.space.xsmall,
+    small: theme.space.small,
+    medium: theme.space.medium,
+    large: theme.space.large,
+    xlarge: theme.space.xlarge
+  };
+  var space = {
+    marginHorizontal: marginHorizontalValues,
+    sectionSpacing: theme.space.medium,
+    sectionSpacingCompact: theme.space.small,
+    headingPaddingLeft: theme.space.small
+  };
+  return {
+    colors: colors,
+    radii: radii,
+    space: space
+  };
+};
+
 var getSelectTheme = function getSelectTheme(theme) {
   var space = {
     minimumOptionListHeight: theme.space.xxxxlarge * 5,
@@ -7975,6 +8003,7 @@ var getTheme = function getTheme() {
       richTextEditor: getRichTextEditorTheme(globalTheme),
       search: getSearchTheme(globalTheme),
       sectionHeading: getSectionHeadingTheme(globalTheme),
+      sectionList: getSectionListTheme(globalTheme),
       select: getSelectTheme(globalTheme),
       skeleton: getSkeletonTheme(globalTheme),
       slider: getSliderTheme(globalTheme),
@@ -8186,7 +8215,7 @@ var StyledText$4 = index$c(Text$1)(function (_ref) {
   });
 });
 
-var _excluded$P = ["children", "fontSize", "fontWeight", "intent", "typeface", "allowFontScaling"];
+var _excluded$Q = ["children", "fontSize", "fontWeight", "intent", "typeface", "allowFontScaling"];
 /**
  * @deprecated Typography.Text is deprecated and will be removed in the next major release, please refer to https://design.employmenthero.com/mobile/Components/typography for the appropriate alternatives.
  */
@@ -8202,7 +8231,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$P);
+    nativeProps = _objectWithoutProperties(_ref, _excluded$Q);
   useDeprecation('Typography.Text is deprecated and will be removed in the next major release, please refer to https://design.employmenthero.com/mobile/Components/typography for the appropriate alternatives.');
   return /*#__PURE__*/React__default.createElement(StyledText$4, _extends$1({}, nativeProps, {
     themeFontSize: fontSize,
@@ -8255,10 +8284,10 @@ var pickAccessibilityProps = function pickAccessibilityProps(props) {
   }, {});
 };
 
-var _excluded$O = ["children"];
+var _excluded$P = ["children"];
 var GradientText = function GradientText(_ref) {
   var children = _ref.children,
-    accessibilityProps = _objectWithoutProperties(_ref, _excluded$O);
+    accessibilityProps = _objectWithoutProperties(_ref, _excluded$P);
   var theme = useTheme();
   var gradient = theme.colors.gradients.aiDiagonal;
   var _useState = useState(null),
@@ -8314,7 +8343,7 @@ var GradientText = function GradientText(_ref) {
   }, children));
 };
 
-var _excluded$N = ["children", "fontWeight", "intent", "allowFontScaling", "fontStyle", "style", "testID"];
+var _excluded$O = ["children", "fontWeight", "intent", "allowFontScaling", "fontStyle", "style", "testID"];
 var Caption = function Caption(_ref) {
   var children = _ref.children,
     _ref$fontWeight = _ref.fontWeight,
@@ -8327,7 +8356,7 @@ var Caption = function Caption(_ref) {
     fontStyle = _ref$fontStyle === void 0 ? 'normal' : _ref$fontStyle,
     style = _ref.style,
     testID = _ref.testID,
-    nativeProps = _objectWithoutProperties(_ref, _excluded$N);
+    nativeProps = _objectWithoutProperties(_ref, _excluded$O);
   var isAi = intent === 'ai';
   var styledText = /*#__PURE__*/React__default.createElement(StyledCaption, _extends$1({}, nativeProps, {
     themeFontWeight: fontWeight,
@@ -8359,7 +8388,7 @@ var StyledLabel$1 = index$c(Text$1)(function (_ref) {
   };
 });
 
-var _excluded$M = ["children", "intent", "allowFontScaling", "fontStyle", "fontWeight", "style", "testID"];
+var _excluded$N = ["children", "intent", "allowFontScaling", "fontStyle", "fontWeight", "style", "testID"];
 var Label = function Label(_ref) {
   var children = _ref.children,
     _ref$intent = _ref.intent,
@@ -8372,7 +8401,7 @@ var Label = function Label(_ref) {
     fontWeight = _ref$fontWeight === void 0 ? 'regular' : _ref$fontWeight,
     style = _ref.style,
     testID = _ref.testID,
-    nativeProps = _objectWithoutProperties(_ref, _excluded$M);
+    nativeProps = _objectWithoutProperties(_ref, _excluded$N);
   var isAi = intent === 'ai';
   var styledText = /*#__PURE__*/React__default.createElement(StyledLabel$1, _extends$1({}, nativeProps, {
     themeIntent: isAi ? 'body' : intent,
@@ -8403,7 +8432,7 @@ var StyledTitle$1 = index$c(Text$1)(function (_ref) {
   };
 });
 
-var _excluded$L = ["children", "intent", "allowFontScaling", "level", "typeface", "fontStyle", "style", "testID"];
+var _excluded$M = ["children", "intent", "allowFontScaling", "level", "typeface", "fontStyle", "style", "testID"];
 var Title = function Title(_ref) {
   var children = _ref.children,
     _ref$intent = _ref.intent,
@@ -8418,7 +8447,7 @@ var Title = function Title(_ref) {
     fontStyle = _ref$fontStyle === void 0 ? 'normal' : _ref$fontStyle,
     style = _ref.style,
     testID = _ref.testID,
-    nativeProps = _objectWithoutProperties(_ref, _excluded$L);
+    nativeProps = _objectWithoutProperties(_ref, _excluded$M);
   var isAi = intent === 'ai';
   var styledText = /*#__PURE__*/React__default.createElement(StyledTitle$1, _extends$1({}, nativeProps, {
     themeLevel: level,
@@ -8468,7 +8497,7 @@ var StyledBody$2 = index$c(Text$1)(function (_ref) {
   };
 });
 
-var _excluded$K = ["children", "intent", "allowFontScaling", "typeface", "variant", "fontStyle", "style", "testID"];
+var _excluded$L = ["children", "intent", "allowFontScaling", "typeface", "variant", "fontStyle", "style", "testID"];
 var Body = function Body(_ref) {
   var children = _ref.children,
     _ref$intent = _ref.intent,
@@ -8483,7 +8512,7 @@ var Body = function Body(_ref) {
     fontStyle = _ref$fontStyle === void 0 ? 'normal' : _ref$fontStyle,
     style = _ref.style,
     testID = _ref.testID,
-    nativeProps = _objectWithoutProperties(_ref, _excluded$K);
+    nativeProps = _objectWithoutProperties(_ref, _excluded$L);
   var isAi = intent === 'ai';
   var styledText = /*#__PURE__*/React__default.createElement(StyledBody$2, _extends$1({}, nativeProps, {
     themeTypeface: typeface,
@@ -9165,22 +9194,22 @@ var SpinWrapper = function SpinWrapper(_ref) {
   }, children);
 };
 
-var _excluded$J = ["style"];
+var _excluded$K = ["style"];
 var AnimatedIcon = function AnimatedIcon(_ref) {
   var style = _ref.style,
-    otherProps = _objectWithoutProperties(_ref, _excluded$J);
+    otherProps = _objectWithoutProperties(_ref, _excluded$K);
   return /*#__PURE__*/React__default.createElement(SpinWrapper, {
     style: style
   }, /*#__PURE__*/React__default.createElement(StyledHeroIcon, otherProps));
 };
 
-var _excluded$I = ["name", "themeSize", "testID", "style"];
+var _excluded$J = ["name", "themeSize", "testID", "style"];
 var GradientIcon = function GradientIcon(_ref) {
   var name = _ref.name,
     themeSize = _ref.themeSize,
     testID = _ref.testID,
     style = _ref.style,
-    accessibilityProps = _objectWithoutProperties(_ref, _excluded$I);
+    accessibilityProps = _objectWithoutProperties(_ref, _excluded$J);
   var theme = useTheme();
   var gradient = theme.colors.gradients.aiDiagonal;
   var size = theme.__hd__.icon.sizes[themeSize];
@@ -9308,7 +9337,7 @@ var AccordionItem = function AccordionItem(_ref) {
   }, content));
 };
 
-var _excluded$H = ["key"];
+var _excluded$I = ["key"];
 var Accordion = function Accordion(_ref) {
   var items = _ref.items,
     activeItemKey = _ref.activeItemKey,
@@ -9331,7 +9360,7 @@ var Accordion = function Accordion(_ref) {
     accessible: accessible
   }, items.map(function (_ref2, index) {
     var key = _ref2.key,
-      props = _objectWithoutProperties(_ref2, _excluded$H);
+      props = _objectWithoutProperties(_ref2, _excluded$I);
     var open = _activeItemKey === key;
     return /*#__PURE__*/React__default.createElement(React__default.Fragment, {
       key: key
@@ -10172,7 +10201,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$G = ["theme"];
+var _excluded$H = ["theme"];
 var getThemeValue = function getThemeValue(theme, key, props) {
   var propConfig = config[key];
   var propValue = props[key];
@@ -10199,18 +10228,18 @@ var mapStylePropToThemeValue = function mapStylePropToThemeValue(theme, props) {
 var configKeys = Object.keys(config);
 var StyledBox = index$c(View)(function (_ref5) {
   var theme = _ref5.theme,
-    otherProps = _objectWithoutProperties(_ref5, _excluded$G);
+    otherProps = _objectWithoutProperties(_ref5, _excluded$H);
   var styleProps = pick(configKeys, otherProps);
   var flexProps = pick(_toConsumableArray(flexPropsKey), otherProps);
   return _objectSpread2(_objectSpread2({}, mapStylePropToThemeValue(theme, styleProps)), flexProps);
 });
 
-var _excluded$F = ["children", "style", "testID"];
+var _excluded$G = ["children", "style", "testID"];
 var Box = function Box(_ref) {
   var children = _ref.children,
     style = _ref.style,
     testID = _ref.testID,
-    otherProps = _objectWithoutProperties(_ref, _excluded$F);
+    otherProps = _objectWithoutProperties(_ref, _excluded$G);
   return /*#__PURE__*/React__default.createElement(StyledBox, _extends$1({}, otherProps, {
     style: style,
     testID: testID
@@ -10481,7 +10510,7 @@ var StyledIcon$4 = index$c(Icon)(function (_ref6) {
   };
 });
 
-var _excluded$E = ["children", "visible", "intent", "style", "testID"];
+var _excluded$F = ["children", "visible", "intent", "style", "testID"];
 var Status$1 = function Status(_ref) {
   var children = _ref.children,
     _ref$visible = _ref.visible,
@@ -10490,7 +10519,7 @@ var Status$1 = function Status(_ref) {
     intent = _ref$intent === void 0 ? 'danger' : _ref$intent,
     style = _ref.style,
     testID = _ref.testID,
-    nativeProps = _objectWithoutProperties(_ref, _excluded$E);
+    nativeProps = _objectWithoutProperties(_ref, _excluded$F);
   var _React$useRef = React__default.useRef(new Animated.Value(visible ? 1 : 0)),
     opacity = _React$useRef.current;
   var isFirstRendering = React__default.useRef(true);
@@ -10526,7 +10555,7 @@ var Status$1 = function Status(_ref) {
 
 var DEFAULT_MAX_NUMBER = 99;
 
-var _excluded$D = ["children", "visible", "style", "max", "testID", "content"];
+var _excluded$E = ["children", "visible", "style", "max", "testID", "content"];
 var Status = function Status(_ref) {
   var children = _ref.children,
     _ref$visible = _ref.visible,
@@ -10536,7 +10565,7 @@ var Status = function Status(_ref) {
     max = _ref$max === void 0 ? DEFAULT_MAX_NUMBER : _ref$max,
     testID = _ref.testID,
     originalContent = _ref.content,
-    nativeProps = _objectWithoutProperties(_ref, _excluded$D);
+    nativeProps = _objectWithoutProperties(_ref, _excluded$E);
   var content = useMemo(function () {
     return originalContent > max ? "".concat(max, "+") : String(originalContent);
   }, [originalContent, max]);
@@ -10548,7 +10577,7 @@ var Status = function Status(_ref) {
   }, /*#__PURE__*/React__default.createElement(StyledCountText, null, content)));
 };
 
-var _excluded$C = ["content", "visible", "max", "intent", "style", "testID", "size", "variant", "icon"];
+var _excluded$D = ["content", "visible", "max", "intent", "style", "testID", "size", "variant", "icon"];
 var getPaddingState = function getPaddingState(content) {
   return content.length > 1 ? 'wideContent' : 'narrowContent';
 };
@@ -10567,7 +10596,7 @@ var Badge$1 = function Badge(_ref) {
     _ref$variant = _ref.variant,
     variant = _ref$variant === void 0 ? 'filled' : _ref$variant,
     icon = _ref.icon,
-    nativeProps = _objectWithoutProperties(_ref, _excluded$C);
+    nativeProps = _objectWithoutProperties(_ref, _excluded$D);
   var _React$useRef = React__default.useRef(new Animated.Value(visible ? 1 : 0)),
     opacity = _React$useRef.current;
   var isFirstRendering = React__default.useRef(true);
@@ -10685,7 +10714,7 @@ var StyledBottomBarText = index$c(Typography.Label)(function (_ref4) {
   };
 });
 
-var _excluded$B = ["onTabPress", "renderActiveTabOnly", "selectedTabKey", "tabs"];
+var _excluded$C = ["onTabPress", "renderActiveTabOnly", "selectedTabKey", "tabs"];
 var getInactiveIcon = function getInactiveIcon(icon) {
   var inactiveIcon = "".concat(icon, "-outlined");
   return isHeroIcon(inactiveIcon) ? inactiveIcon : icon;
@@ -10696,7 +10725,7 @@ var BottomNavigation = function BottomNavigation(_ref) {
     renderActiveTabOnly = _ref$renderActiveTabO === void 0 ? false : _ref$renderActiveTabO,
     selectedTabKey = _ref.selectedTabKey,
     tabs = _ref.tabs,
-    nativeProps = _objectWithoutProperties(_ref, _excluded$B);
+    nativeProps = _objectWithoutProperties(_ref, _excluded$C);
   var insets = useSafeAreaInsets();
   /**
    * List of loaded tabs, tabs will be loaded when navigated to.
@@ -10788,13 +10817,13 @@ var StyledDivider = index$c(View)(function (_ref) {
   }, horizontalMargin), verticalMargin);
 });
 
-var _excluded$A = ["marginHorizontal", "marginVertical", "style", "testID"];
+var _excluded$B = ["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$A);
+    nativeProps = _objectWithoutProperties(_ref, _excluded$B);
   return /*#__PURE__*/React__default.createElement(StyledDivider, _extends$1({}, nativeProps, {
     themeMarginHorizontal: marginHorizontal,
     themeMarginVertical: marginVertical,
@@ -10925,7 +10954,7 @@ var StyledLoadingDot = index$c(View)(function (_ref) {
   }, themeStyling());
 });
 
-var _excluded$z = ["count", "size", "testID", "themeVariant"];
+var _excluded$A = ["count", "size", "testID", "themeVariant"];
 var AnimatedLoadingIndicatorWrapper = Animated.createAnimatedComponent(StyledLoadingIndicatorWrapper);
 var AnimatedLoadingDot = Animated.createAnimatedComponent(StyledLoadingDot);
 var renderDotComponent = function renderDotComponent(_ref) {
@@ -10957,7 +10986,7 @@ var LoadingIndicator = function LoadingIndicator(_ref2) {
     size = _ref2$size === void 0 ? 12 : _ref2$size,
     testID = _ref2.testID,
     themeVariant = _ref2.themeVariant,
-    nativeProps = _objectWithoutProperties(_ref2, _excluded$z);
+    nativeProps = _objectWithoutProperties(_ref2, _excluded$A);
   var progressAnimation = useRef(new Animated.Value(0));
   useEffect(function () {
     var animation = Animated.loop(Animated.timing(progressAnimation.current, {
@@ -11589,11 +11618,11 @@ var Header = function Header(_ref) {
   }))) : null), showDivider ? /*#__PURE__*/React__default.createElement(Divider, null) : null);
 };
 
-var _excluded$y = ["scrollEventThrottle"];
+var _excluded$z = ["scrollEventThrottle"];
 var BottomSheetScrollView = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var _ref$scrollEventThrot = _ref.scrollEventThrottle,
     scrollEventThrottle = _ref$scrollEventThrot === void 0 ? 100 : _ref$scrollEventThrot,
-    props = _objectWithoutProperties(_ref, _excluded$y);
+    props = _objectWithoutProperties(_ref, _excluded$z);
   var _useContext = useContext(BottomSheetContext),
     setInternalShowDivider = _useContext.setInternalShowDivider;
   var onScrollBeginDrag = useCallback(function (e) {
@@ -14715,12 +14744,12 @@ var Indicator = index$c(View)(function (_ref3) {
   };
 });
 
-var _excluded$x = ["intent", "children"];
+var _excluded$y = ["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$x);
+    nativeProps = _objectWithoutProperties(_ref, _excluded$y);
   return /*#__PURE__*/React__default.createElement(StyledDataCard, nativeProps, /*#__PURE__*/React__default.createElement(Indicator, {
     themeIntent: intent,
     testID: "data-card-indicator"
@@ -14739,13 +14768,13 @@ var StyledCard$1 = index$c(View)(function (_ref) {
   });
 });
 
-var _excluded$w = ["intent", "children", "variant"];
+var _excluded$x = ["intent", "children", "variant"];
 var Card$1 = function Card(_ref) {
   var intent = _ref.intent,
     children = _ref.children,
     _ref$variant = _ref.variant,
     variant = _ref$variant === void 0 ? 'basic' : _ref$variant,
-    nativeProps = _objectWithoutProperties(_ref, _excluded$w);
+    nativeProps = _objectWithoutProperties(_ref, _excluded$x);
   return /*#__PURE__*/React__default.createElement(StyledCard$1, _extends$1({}, nativeProps, {
     themeIntent: intent,
     themeVariant: variant
@@ -15012,7 +15041,7 @@ var CardCarousel = /*#__PURE__*/forwardRef(function (_ref, ref) {
 });
 CardCarousel.displayName = 'CardCarousel';
 
-var _excluded$v = ["rounded", "size", "testID", "style"];
+var _excluded$w = ["rounded", "size", "testID", "style"];
 /**
  * @deprecated Image component will soon be deprecated. Please use `Image` from `react-native` instead.
  */
@@ -15023,7 +15052,7 @@ var Image = function Image(_ref) {
     size = _ref$size === void 0 ? '6xlarge' : _ref$size,
     testID = _ref.testID,
     style = _ref.style,
-    imageNativeProps = _objectWithoutProperties(_ref, _excluded$v);
+    imageNativeProps = _objectWithoutProperties(_ref, _excluded$w);
   useDeprecation('Image component will soon be deprecated. Please use `Image` from `react-native` instead.');
   var theme = useTheme();
   var imageSize = theme.__hd__.image.sizes[size];
@@ -15158,7 +15187,7 @@ var CarouselItem = function CarouselItem(_ref) {
   }, heading), !!body && /*#__PURE__*/React__default.createElement(Typography.Body, null, body)));
 };
 
-var _excluded$u = ["items", "onItemIndexChange", "renderActions", "selectedItemIndex", "style", "shouldShowPagination", "testID", "pageControlPosition"];
+var _excluded$v = ["items", "onItemIndexChange", "renderActions", "selectedItemIndex", "style", "shouldShowPagination", "testID", "pageControlPosition"];
 function useStateFromProp(initialValue) {
   var _useState = useState(initialValue),
     _useState2 = _slicedToArray(_useState, 2),
@@ -15185,7 +15214,7 @@ var Carousel = function Carousel(_ref) {
     testID = _ref.testID,
     _ref$pageControlPosit = _ref.pageControlPosition,
     pageControlPosition = _ref$pageControlPosit === void 0 ? 'top' : _ref$pageControlPosit,
-    nativeProps = _objectWithoutProperties(_ref, _excluded$u);
+    nativeProps = _objectWithoutProperties(_ref, _excluded$v);
   useDeprecation("shouldShowPagination prop has been deprecated", shouldShowPagination !== noop$2);
   useDeprecation("The use of 'pageControlPosition == bottom' has been deprecated", pageControlPosition === 'bottom');
   var theme = useTheme();
@@ -20456,7 +20485,7 @@ var StyledChipIcon = index$c(Icon)(function (_ref2) {
   };
 });
 
-var _excluded$t = ["label", "variant", "selected", "icon", "onPress", "showSelectedIcon", "accessible", "onBlur", "onFocus"];
+var _excluded$u = ["label", "variant", "selected", "icon", "onPress", "showSelectedIcon", "accessible", "onBlur", "onFocus"];
 var getChipLabel = function getChipLabel(label) {
   if (typeof label === 'string') {
     return /*#__PURE__*/React__default.createElement(Typography.Body, {
@@ -20492,7 +20521,7 @@ var Chip = function Chip(_ref) {
     accessible = _ref.accessible,
     onBlur = _ref.onBlur,
     onFocus = _ref.onFocus,
-    otherProps = _objectWithoutProperties(_ref, _excluded$t);
+    otherProps = _objectWithoutProperties(_ref, _excluded$u);
   useDeprecation('Chip variant `outlined` and `filled` are deprecated.', variant === 'outlined' || variant === 'filled');
   var renamedVariant = getChipVariant(variant);
   var shouldShowSelectedIcon = (renamedVariant === 'selection' || renamedVariant === 'compact-outlined') && selected && showSelectedIcon;
@@ -20883,7 +20912,7 @@ var StyledErrorAndMaxLengthContainer = index$c(View)(function (_ref14) {
   };
 });
 
-var _excluded$s = ["label", "prefix", "suffix", "style", "textStyle", "testID", "accessibilityLabelledBy", "error", "required", "editable", "disabled", "loading", "maxLength", "hideCharacterCount", "helpText", "value", "defaultValue", "renderInputValue", "allowFontScaling", "variant"];
+var _excluded$t = ["label", "prefix", "suffix", "style", "textStyle", "testID", "accessibilityLabelledBy", "error", "required", "editable", "disabled", "loading", "maxLength", "hideCharacterCount", "helpText", "value", "defaultValue", "renderInputValue", "allowFontScaling", "variant"];
 var getState$3 = function getState(_ref) {
   var disabled = _ref.disabled,
     error = _ref.error,
@@ -20999,7 +21028,7 @@ var TextInput = /*#__PURE__*/forwardRef(function (_ref8, ref) {
     allowFontScaling = _ref8$allowFontScalin === void 0 ? false : _ref8$allowFontScalin,
     _ref8$variant = _ref8.variant,
     variant = _ref8$variant === void 0 ? 'text' : _ref8$variant,
-    nativeProps = _objectWithoutProperties(_ref8, _excluded$s);
+    nativeProps = _objectWithoutProperties(_ref8, _excluded$t);
   var displayText = getDisplayText(value, defaultValue);
   var isEmptyValue = displayText.length === 0;
   var _React$useState = React__default.useState(0),
@@ -21746,11 +21775,11 @@ var DatePickerIOS = function DatePickerIOS(_ref) {
   }));
 };
 
-var _excluded$r = ["variant"];
+var _excluded$s = ["variant"];
 var DatePicker = function DatePicker(_ref) {
   var _ref$variant = _ref.variant,
     variant = _ref$variant === void 0 ? 'default' : _ref$variant,
-    props = _objectWithoutProperties(_ref, _excluded$r);
+    props = _objectWithoutProperties(_ref, _excluded$s);
   if (variant === 'calendar') {
     return /*#__PURE__*/React__default.createElement(DatePickerCalendar, props);
   }
@@ -22122,7 +22151,7 @@ var DragableDrawer = function DragableDrawer(_ref) {
   }, /*#__PURE__*/React__default.createElement(StyledHandlerContainer$1, panHandlers, /*#__PURE__*/React__default.createElement(StyledHandler, null)), children)));
 };
 
-var _excluded$q = ["onScroll", "onScrollEndDrag", "onMomentumScrollEnd", "scrollEventThrottle", "children"];
+var _excluded$r = ["onScroll", "onScrollEndDrag", "onMomentumScrollEnd", "scrollEventThrottle", "children"];
 // scrollY tolerance: treat anything within this many pixels of the top as
 // "at scroll top" to handle fractional pixels and throttled scroll events.
 var SCROLL_TOP_THRESHOLD_PX = 5;
@@ -22149,7 +22178,7 @@ var DragableScrollView = function DragableScrollView(_ref) {
     _ref$scrollEventThrot = _ref.scrollEventThrottle,
     scrollEventThrottle = _ref$scrollEventThrot === void 0 ? DEFAULT_SCROLL_EVENT_THROTTLE : _ref$scrollEventThrot,
     children = _ref.children,
-    props = _objectWithoutProperties(_ref, _excluded$q);
+    props = _objectWithoutProperties(_ref, _excluded$r);
   var _useDragableDrawerCon = useDragableDrawerContext(),
     isAtMaxHeight = _useDragableDrawerCon.isAtMaxHeight,
     scrollYRef = _useDragableDrawerCon.scrollYRef,
@@ -24013,7 +24042,7 @@ var StyledErrorDescription = index$c(Typography.Body)(function (_ref9) {
   };
 });
 
-var _excluded$p = ["variant", "title", "description", "image", "testID", "ctaText", "onCtaPress", "secondaryCtaText", "onSecondaryCtaPress", "icon"],
+var _excluded$q = ["variant", "title", "description", "image", "testID", "ctaText", "onCtaPress", "secondaryCtaText", "onSecondaryCtaPress", "icon"],
   _excluded2 = ["visible", "variant", "title", "description", "image", "testID", "ctaText", "onCtaPress", "secondaryCtaText", "onSecondaryCtaPress"];
 var renderImage$1 = function renderImage(image) {
   if (/*#__PURE__*/isValidElement(image)) {
@@ -24054,7 +24083,7 @@ var ErrorPage = function ErrorPage(_ref2) {
     secondaryCtaText = _ref2.secondaryCtaText,
     onSecondaryCtaPress = _ref2.onSecondaryCtaPress,
     icon = _ref2.icon,
-    nativeProps = _objectWithoutProperties(_ref2, _excluded$p);
+    nativeProps = _objectWithoutProperties(_ref2, _excluded$q);
   var showCta = ctaText && onCtaPress !== undefined;
   var showSecondaryCta = secondaryCtaText && onSecondaryCtaPress !== undefined;
   var showButtonContainer = showCta || showSecondaryCta;
@@ -24283,13 +24312,13 @@ var ActionItem = function ActionItem(_ref) {
   })), /*#__PURE__*/React__default.createElement(StyledActionItemText, null, title))));
 };
 
-var _excluded$o = ["active"];
+var _excluded$p = ["active"];
 var AnimatedIcons = Animated.createAnimatedComponent(/*#__PURE__*/React__default.forwardRef(function (props, _) {
   return /*#__PURE__*/React__default.createElement(StyledFABIcon, props);
 }));
 var AnimatedFABIcon = function AnimatedFABIcon(_ref) {
   var active = _ref.active,
-    iconProps = _objectWithoutProperties(_ref, _excluded$o);
+    iconProps = _objectWithoutProperties(_ref, _excluded$p);
   var rotateAnimation = useRef(new Animated.Value(active ? 1 : 0));
   useEffect(function () {
     var animation = Animated.spring(rotateAnimation.current, {
@@ -24695,11 +24724,11 @@ var StyledFAB = index$c(FABWithTitleStyle)(function (_ref) {
   };
 });
 
-var _excluded$n = ["fabConfig", "onCancel"];
+var _excluded$o = ["fabConfig", "onCancel"];
 var Pair = function Pair(_ref) {
   var fabConfig = _ref.fabConfig,
     onCancel = _ref.onCancel,
-    props = _objectWithoutProperties(_ref, _excluded$n);
+    props = _objectWithoutProperties(_ref, _excluded$o);
   var icon = fabConfig.icon,
     title = fabConfig.title,
     onPress = fabConfig.onPress,
@@ -25434,11 +25463,11 @@ var StyledFocusIcon = index$c(Icon)(function (_ref7) {
   };
 });
 
-var _excluded$m = ["style", "testID"];
+var _excluded$n = ["style", "testID"];
 var MapPinFocussed = function MapPinFocussed(_ref) {
   var style = _ref.style,
     testID = _ref.testID,
-    nativeProps = _objectWithoutProperties(_ref, _excluded$m);
+    nativeProps = _objectWithoutProperties(_ref, _excluded$n);
   return /*#__PURE__*/React__default.createElement(StyledContainer$4, _extends$1({}, nativeProps, {
     style: style,
     testID: testID
@@ -25448,7 +25477,7 @@ var MapPinFocussed = function MapPinFocussed(_ref) {
   }));
 };
 
-var _excluded$l = ["style", "testID", "state", "image", "icon"];
+var _excluded$m = ["style", "testID", "state", "image", "icon"];
 var getBadgeIconName = function getBadgeIconName(state) {
   var iconMap = {
     idle: undefined,
@@ -25464,7 +25493,7 @@ var MapPin = function MapPin(_ref) {
     state = _ref$state === void 0 ? 'idle' : _ref$state,
     image = _ref.image,
     icon = _ref.icon,
-    nativeProps = _objectWithoutProperties(_ref, _excluded$l);
+    nativeProps = _objectWithoutProperties(_ref, _excluded$m);
   var badgeIcon = getBadgeIconName(state);
   return /*#__PURE__*/React__default.createElement(StyledContainer$4, _extends$1({}, nativeProps, {
     style: style,
@@ -25785,7 +25814,7 @@ var THEME_INTENT_MAP = {
   'archived-inverted': 'archivedInverted'
 };
 
-var _excluded$k = ["value", "renderValue", "intent", "style", "testID"];
+var _excluded$l = ["value", "renderValue", "intent", "style", "testID"];
 var defaultRenderValue = function defaultRenderValue(value) {
   return "".concat(value, "%");
 };
@@ -25798,7 +25827,7 @@ var ProgressCircle = function ProgressCircle(_ref) {
     intent = _ref$intent === void 0 ? 'primary' : _ref$intent,
     style = _ref.style,
     testID = _ref.testID,
-    nativeProps = _objectWithoutProperties(_ref, _excluded$k);
+    nativeProps = _objectWithoutProperties(_ref, _excluded$l);
   var theme = useTheme$1();
   var size = theme.__hd__.progress.sizes.circleDiameter;
   var strokeWidth = theme.__hd__.progress.sizes.circleCompletenessHeight;
@@ -25868,14 +25897,14 @@ var StyledInner = index$c(Animated.View)(function (_ref2) {
   };
 });
 
-var _excluded$j = ["value", "intent", "style", "testID"];
+var _excluded$k = ["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$j);
+    nativeProps = _objectWithoutProperties(_ref, _excluded$k);
   var _useState = useState(0),
     _useState2 = _slicedToArray(_useState, 2),
     width = _useState2[0],
@@ -25965,7 +25994,7 @@ var StyledSingleStep = index$c(Box)(function (_ref3) {
   };
 });
 
-var _excluded$i = ["steps", "current", "onLayout"];
+var _excluded$j = ["steps", "current", "onLayout"];
 var getStepState = function getStepState(current, index) {
   if (index < current) {
     return 'complete';
@@ -25979,7 +26008,7 @@ var ProgressStep = function ProgressStep(_ref) {
   var steps = _ref.steps,
     current = _ref.current,
     onLayout = _ref.onLayout,
-    props = _objectWithoutProperties(_ref, _excluded$i);
+    props = _objectWithoutProperties(_ref, _excluded$j);
   var theme = useTheme$1();
   var _React$useState = React__default.useState(0),
     _React$useState2 = _slicedToArray(_React$useState, 2),
@@ -26276,7 +26305,7 @@ var StyledEmptyText = index$c(Typography.Caption)(function (_ref4) {
   };
 });
 
-var _excluded$h = ["data", "headerConfig", "emptyText", "legendConfig", "styleConfig", "style", "testID", "collapsable"];
+var _excluded$i = ["data", "headerConfig", "emptyText", "legendConfig", "styleConfig", "style", "testID", "collapsable"];
 var ProgressSegmentedBar = function ProgressSegmentedBar(_ref) {
   var data = _ref.data,
     headerConfig = _ref.headerConfig,
@@ -26286,7 +26315,7 @@ var ProgressSegmentedBar = function ProgressSegmentedBar(_ref) {
     style = _ref.style,
     testID = _ref.testID,
     collapsable = _ref.collapsable,
-    nativeProps = _objectWithoutProperties(_ref, _excluded$h);
+    nativeProps = _objectWithoutProperties(_ref, _excluded$i);
   var values = React__default.useMemo(function () {
     return data.map(function (s) {
       return s.data;
@@ -26656,14 +26685,14 @@ var AnimatedSpinner = function AnimatedSpinner(_ref) {
   }, dotProps))));
 };
 
-var _excluded$g = ["testID", "size", "intent"];
+var _excluded$h = ["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$g);
+    nativeProps = _objectWithoutProperties(_ref, _excluded$h);
   return /*#__PURE__*/React__default.createElement(StyledView$1, nativeProps, /*#__PURE__*/React__default.createElement(StyledSpinnerContainer, {
     testID: testID
   }, /*#__PURE__*/React__default.createElement(AnimatedSpinner, {
@@ -26696,7 +26725,7 @@ var SwipeableAction = function SwipeableAction(_ref) {
   }, children);
 };
 
-var _excluded$f = ["children", "state", "onStateChange", "leftActions", "leftActionsWidth", "rightActions", "rightActionsWidth", "variant"];
+var _excluded$g = ["children", "state", "onStateChange", "leftActions", "leftActionsWidth", "rightActions", "rightActionsWidth", "variant"];
 var renderActions = function renderActions(actions, width, progress, direction) {
   var trans = progress.interpolate({
     inputRange: [0, 1],
@@ -26725,7 +26754,7 @@ var Swipeable = function Swipeable(_ref) {
     rightActionsWidth = _ref.rightActionsWidth,
     _ref$variant = _ref.variant,
     variant = _ref$variant === void 0 ? 'card' : _ref$variant,
-    swipeableProps = _objectWithoutProperties(_ref, _excluded$f);
+    swipeableProps = _objectWithoutProperties(_ref, _excluded$g);
   var theme = useTheme();
   var _useWindowDimensions = useWindowDimensions(),
     width = _useWindowDimensions.width;
@@ -26982,6 +27011,134 @@ var SectionHeading = function SectionHeading(_ref) {
   }, text)), rightChildren);
 };
 
+var isTop = function isTop(position) {
+  return position === 'top' || position === 'single';
+};
+var isBottom = function isBottom(position) {
+  return position === 'bottom' || position === 'single';
+};
+var StyledRow = index$c(View)(function (_ref) {
+  var theme = _ref.theme,
+    themePosition = _ref.themePosition,
+    _ref$themeMarginHoriz = _ref.themeMarginHorizontal,
+    themeMarginHorizontal = _ref$themeMarginHoriz === void 0 ? 'medium' : _ref$themeMarginHoriz;
+  var radius = theme.__hd__.sectionList.radii.group;
+  var marginHorizontal = theme.__hd__.sectionList.space.marginHorizontal[themeMarginHorizontal];
+  return {
+    marginHorizontal: marginHorizontal,
+    backgroundColor: theme.__hd__.sectionList.colors.groupBackground,
+    borderTopLeftRadius: isTop(themePosition) ? radius : 0,
+    borderTopRightRadius: isTop(themePosition) ? radius : 0,
+    borderBottomLeftRadius: isBottom(themePosition) ? radius : 0,
+    borderBottomRightRadius: isBottom(themePosition) ? radius : 0,
+    overflow: 'hidden'
+  };
+});
+var StyledDividerWrapper = index$c(View)(function (_ref2) {
+  var theme = _ref2.theme,
+    _ref2$themeMarginHori = _ref2.themeMarginHorizontal,
+    themeMarginHorizontal = _ref2$themeMarginHori === void 0 ? 'medium' : _ref2$themeMarginHori;
+  return {
+    marginHorizontal: theme.__hd__.sectionList.space.marginHorizontal[themeMarginHorizontal],
+    backgroundColor: theme.__hd__.sectionList.colors.groupBackground
+  };
+});
+var StyledSectionSpacer = index$c(View)(function (_ref3) {
+  var theme = _ref3.theme,
+    themeCompact = _ref3.themeCompact;
+  return {
+    height: themeCompact ? theme.__hd__.sectionList.space.sectionSpacingCompact : theme.__hd__.sectionList.space.sectionSpacing
+  };
+});
+var StyledSectionHeading = index$c(SectionHeading)(function (_ref4) {
+  var theme = _ref4.theme;
+  return {
+    paddingLeft: theme.__hd__.sectionList.space.headingPaddingLeft,
+    marginBottom: 0
+  };
+});
+
+var _excluded$f = ["sections", "marginHorizontal", "style", "testID"];
+var positionOf = function positionOf(index, count) {
+  if (count === 1) return 'single';
+  if (index === 0) return 'top';
+  if (index === count - 1) return 'bottom';
+  return 'middle';
+};
+// StyledRow already clips corners via overflow:hidden + its own borderRadius, so the
+// inner list items must not add their own rounding on top of it.
+var NO_RADIUS = {
+  borderRadius: 0
+};
+var renderRow = function renderRow(row) {
+  return row.type === 'basic-item' ? /*#__PURE__*/React__default.createElement(List$1.BasicItem, _extends$1({}, row, {
+    style: [NO_RADIUS, row.style]
+  })) : /*#__PURE__*/React__default.createElement(List$1.Item, _extends$1({}, row, {
+    style: [NO_RADIUS, row.style]
+  }));
+};
+// Factory lives at module scope — satisfies react/no-unstable-nested-components.
+// RN only renders ItemSeparatorComponent between adjacent items (never after the
+// last), which is exactly the desired divider placement for a bounded group.
+var createRowDivider = function createRowDivider(margin) {
+  return function () {
+    return /*#__PURE__*/React__default.createElement(StyledDividerWrapper, {
+      testID: "section-list-divider-wrapper",
+      themeMarginHorizontal: margin
+    }, /*#__PURE__*/React__default.createElement(Divider, {
+      testID: "section-list-divider"
+    }));
+  };
+};
+var SectionSpacer$1 = function SectionSpacer(_ref) {
+  var leadingItem = _ref.leadingItem,
+    trailingSection = _ref.trailingSection;
+  return leadingItem && trailingSection ? /*#__PURE__*/React__default.createElement(StyledSectionSpacer, {
+    themeCompact: !!trailingSection.hideHeading,
+    testID: "section-list-spacer"
+  }) : null;
+};
+function SectionList(_ref2) {
+  var sections = _ref2.sections,
+    _ref2$marginHorizonta = _ref2.marginHorizontal,
+    marginHorizontal = _ref2$marginHorizonta === void 0 ? 'medium' : _ref2$marginHorizonta,
+    style = _ref2.style,
+    testID = _ref2.testID,
+    rest = _objectWithoutProperties(_ref2, _excluded$f);
+  var RowDivider = useMemo(function () {
+    return createRowDivider(marginHorizontal);
+  }, [marginHorizontal]);
+  return /*#__PURE__*/React__default.createElement(SectionList$1, _extends$1({}, rest, {
+    style: style,
+    testID: testID,
+    sections: sections,
+    stickySectionHeadersEnabled: false,
+    ItemSeparatorComponent: RowDivider,
+    renderSectionHeader: function renderSectionHeader(_ref3) {
+      var _section$text;
+      var section = _ref3.section;
+      return section.hideHeading ? null : /*#__PURE__*/React__default.createElement(StyledSectionHeading, {
+        text: (_section$text = section.text) !== null && _section$text !== void 0 ? _section$text : '',
+        icon: section.icon,
+        rightChildren: section.rightChildren,
+        intent: section.intent,
+        size: section.size
+      });
+    },
+    renderItem: function renderItem(_ref4) {
+      var item = _ref4.item,
+        index = _ref4.index,
+        section = _ref4.section;
+      return /*#__PURE__*/React__default.createElement(StyledRow, {
+        testID: "section-list-row",
+        themePosition: positionOf(index, section.data.length),
+        themeMarginHorizontal: marginHorizontal
+      }, renderRow(item));
+    },
+    SectionSeparatorComponent: SectionSpacer$1
+  }));
+}
+
 var Footer = function Footer(_ref) {
   var label = _ref.label,
     onPress = _ref.onPress;
@@ -27047,7 +27204,7 @@ var StyledSearchBar = index$c(View)(function (_ref3) {
     paddingBottom: theme.__hd__.select.space.searchBarBottomSpacing
   };
 });
-var StyledSectionList = index$c(SectionList)(function (_ref4) {
+var StyledSectionList = index$c(SectionList$1)(function (_ref4) {
   var theme = _ref4.theme;
   return {
     paddingHorizontal: theme.__hd__.select.space.optionListHorizontalPadding
@@ -41968,7 +42125,7 @@ function SectionListWithFAB(_ref) {
   var fabProps = _ref.fabProps,
     props = _objectWithoutProperties(_ref, _excluded$3);
   return /*#__PURE__*/React__default.createElement(AnimatedScroller, {
-    ScrollComponent: /*#__PURE__*/React__default.createElement(SectionList, props),
+    ScrollComponent: /*#__PURE__*/React__default.createElement(SectionList$1, props),
     fabProps: fabProps
   });
 }
@@ -42883,4 +43040,4 @@ var InlineLoader = function InlineLoader(_ref) {
   }, text));
 };
 
-export { Accordion, Alert, AppCue, Attachment, index$b as Avatar, Badge, BottomNavigation, BottomSheet, Box, CompoundButton as Button, Calendar, Card, index$a as Carousel, Chart, index$9 as Checkbox, Chip, Collapse, ContentNavigator, index$8 as DatePicker, Divider, index$7 as Drawer, Empty, ErrorComponent as Error, FAB, FilterTrigger, FlatListWithFAB, FloatingIsland, HeroDesignProvider, Icon, Illustration, IllustrationList, Image, InlineLoader, List$1 as List, LocaleProvider, index$6 as MapPin, PageControl, PinInput, Portal, Progress, CompoundRadio as Radio, Rate, RefreshControl, index as RichTextEditor, ScrollViewWithFAB, Search, SectionHeading, SectionListWithFAB, SegmentedControl, index$4 as Select, Skeleton, Slider, Spinner, Success, index$5 as Swipeable, index$3 as Switch, index$2 as Tabs, Tag, TextInput, ThemeProvider, ThemeSwitcher, PublicTimePicker as TimePicker, Toast, index$1 as Toolbar, Typography, eBensSystemPalette, ehJobsShadowPalette, ehJobsSystemPalette, ehWorkDarkShadowPalette, ehWorkDarkSystemPalette, ehWorkShadowPalette, ehWorkSystemPalette, getTheme, jobsSystemPalette, scale, index$c as styled, swagDarkSystemPalette, swagLightJobsSystemPalette, swagSystemPalette$1 as swagLightSystemPalette, swagSystemPalette$2 as swagSystemPalette, defaultTheme as theme, useAvatarColors, useTheme, walletSystemPalette, withTheme, workSystemPalette };
+export { Accordion, Alert, AppCue, Attachment, index$b as Avatar, Badge, BottomNavigation, BottomSheet, Box, CompoundButton as Button, Calendar, Card, index$a as Carousel, Chart, index$9 as Checkbox, Chip, Collapse, ContentNavigator, index$8 as DatePicker, Divider, index$7 as Drawer, Empty, ErrorComponent as Error, FAB, FilterTrigger, FlatListWithFAB, FloatingIsland, HeroDesignProvider, Icon, Illustration, IllustrationList, Image, InlineLoader, List$1 as List, LocaleProvider, index$6 as MapPin, PageControl, PinInput, Portal, Progress, CompoundRadio as Radio, Rate, RefreshControl, index as RichTextEditor, ScrollViewWithFAB, Search, SectionHeading, SectionList, SectionListWithFAB, SegmentedControl, index$4 as Select, Skeleton, Slider, Spinner, Success, index$5 as Swipeable, index$3 as Switch, index$2 as Tabs, Tag, TextInput, ThemeProvider, ThemeSwitcher, PublicTimePicker as TimePicker, Toast, index$1 as Toolbar, Typography, eBensSystemPalette, ehJobsShadowPalette, ehJobsSystemPalette, ehWorkDarkShadowPalette, ehWorkDarkSystemPalette, ehWorkShadowPalette, ehWorkSystemPalette, getTheme, jobsSystemPalette, scale, index$c as styled, swagDarkSystemPalette, swagLightJobsSystemPalette, swagSystemPalette$1 as swagLightSystemPalette, swagSystemPalette$2 as swagSystemPalette, defaultTheme as theme, useAvatarColors, useTheme, walletSystemPalette, withTheme, workSystemPalette };