@hero-design/rn 0.0.0-integrate-basic-table-20251227121342 → 0.0.0-integrate-basic-table-20251229143430

package/es/index.js

@@ -6518,7 +6518,8 @@ var getProgressTheme = function getProgressTheme(theme) {
       complete: theme.colors.primary,
       incomplete: theme.colors.archivedSurface,
       current: theme.colors.decorativePrimarySurface
-    }
+    },
+    segmentedRemainderBackground: theme.colors.archivedSurface
   };
   var sizes = {
     circleDiameter: theme.sizes['6xlarge'],
@@ -6530,7 +6531,8 @@ var getProgressTheme = function getProgressTheme(theme) {
     "default": theme.radii.rounded
   };
   var space = {
-    stepGap: theme.space.xsmall
+    stepGap: theme.space.xsmall,
+    segmentedHeaderMarginBottom: theme.space.small
   };
   return {
     colors: colors,
@@ -6844,6 +6846,11 @@ var transformKebabCaseToCamelCase = function transformKebabCaseToCamelCase(strin
     return /[a-z]/.test(_char4) ? _char4.toUpperCase() : _char4;
   });
 };
+function assert(condition, message) {
+  if (!condition) {
+    throw new Error(message);
+  }
+}
 
 var getSliderTheme = function getSliderTheme(theme) {
   var colors = {
@@ -8033,7 +8040,7 @@ var StyledText$4 = index$c(Text$1)(function (_ref) {
   });
 });
 
-var _excluded$N = ["children", "fontSize", "fontWeight", "intent", "typeface", "allowFontScaling"];
+var _excluded$O = ["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.
  */
@@ -8049,7 +8056,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$N);
+    nativeProps = _objectWithoutProperties(_ref, _excluded$O);
   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,
@@ -8082,7 +8089,7 @@ var StyledCaption = index$c(Text$1)(function (_ref) {
   };
 });
 
-var _excluded$M = ["children", "fontWeight", "intent", "allowFontScaling", "fontStyle"];
+var _excluded$N = ["children", "fontWeight", "intent", "allowFontScaling", "fontStyle"];
 var Caption = function Caption(_ref) {
   var children = _ref.children,
     _ref$fontWeight = _ref.fontWeight,
@@ -8093,7 +8100,7 @@ var Caption = function Caption(_ref) {
     allowFontScaling = _ref$allowFontScaling === void 0 ? false : _ref$allowFontScaling,
     _ref$fontStyle = _ref.fontStyle,
     fontStyle = _ref$fontStyle === void 0 ? 'normal' : _ref$fontStyle,
-    nativeProps = _objectWithoutProperties(_ref, _excluded$M);
+    nativeProps = _objectWithoutProperties(_ref, _excluded$N);
   return /*#__PURE__*/React__default.createElement(StyledCaption, _extends$1({}, nativeProps, {
     themeFontWeight: fontWeight,
     themeIntent: intent,
@@ -8118,7 +8125,7 @@ var StyledLabel$1 = index$c(Text$1)(function (_ref) {
   };
 });
 
-var _excluded$L = ["children", "intent", "allowFontScaling", "fontStyle"];
+var _excluded$M = ["children", "intent", "allowFontScaling", "fontStyle"];
 var Label = function Label(_ref) {
   var children = _ref.children,
     _ref$intent = _ref.intent,
@@ -8127,7 +8134,7 @@ var Label = function Label(_ref) {
     allowFontScaling = _ref$allowFontScaling === void 0 ? false : _ref$allowFontScaling,
     _ref$fontStyle = _ref.fontStyle,
     fontStyle = _ref$fontStyle === void 0 ? 'normal' : _ref$fontStyle,
-    nativeProps = _objectWithoutProperties(_ref, _excluded$L);
+    nativeProps = _objectWithoutProperties(_ref, _excluded$M);
   return /*#__PURE__*/React__default.createElement(StyledLabel$1, _extends$1({}, nativeProps, {
     themeIntent: intent,
     themeIsItalic: fontStyle === 'italic',
@@ -8150,7 +8157,7 @@ var StyledTitle$1 = index$c(Text$1)(function (_ref) {
   };
 });
 
-var _excluded$K = ["children", "intent", "allowFontScaling", "level", "typeface", "fontStyle"];
+var _excluded$L = ["children", "intent", "allowFontScaling", "level", "typeface", "fontStyle"];
 var Title = function Title(_ref) {
   var children = _ref.children,
     _ref$intent = _ref.intent,
@@ -8163,7 +8170,7 @@ var Title = function Title(_ref) {
     typeface = _ref$typeface === void 0 ? 'neutral' : _ref$typeface,
     _ref$fontStyle = _ref.fontStyle,
     fontStyle = _ref$fontStyle === void 0 ? 'normal' : _ref$fontStyle,
-    nativeProps = _objectWithoutProperties(_ref, _excluded$K);
+    nativeProps = _objectWithoutProperties(_ref, _excluded$L);
   return /*#__PURE__*/React__default.createElement(StyledTitle$1, _extends$1({}, nativeProps, {
     themeLevel: level,
     themeTypeface: typeface,
@@ -8202,7 +8209,7 @@ var StyledBody$2 = index$c(Text$1)(function (_ref) {
   };
 });
 
-var _excluded$J = ["children", "intent", "allowFontScaling", "typeface", "variant", "fontStyle"];
+var _excluded$K = ["children", "intent", "allowFontScaling", "typeface", "variant", "fontStyle"];
 var Body = function Body(_ref) {
   var children = _ref.children,
     _ref$intent = _ref.intent,
@@ -8215,7 +8222,7 @@ var Body = function Body(_ref) {
     variant = _ref$variant === void 0 ? 'regular' : _ref$variant,
     _ref$fontStyle = _ref.fontStyle,
     fontStyle = _ref$fontStyle === void 0 ? 'normal' : _ref$fontStyle,
-    nativeProps = _objectWithoutProperties(_ref, _excluded$J);
+    nativeProps = _objectWithoutProperties(_ref, _excluded$K);
   return /*#__PURE__*/React__default.createElement(StyledBody$2, _extends$1({}, nativeProps, {
     themeTypeface: typeface,
     themeIntent: intent,
@@ -8832,10 +8839,10 @@ var StyledHeroIcon = index$c(HeroIcon)(function (_ref) {
   };
 });
 
-var _excluded$I = ["style"];
+var _excluded$J = ["style"];
 var AnimatedIcon = function AnimatedIcon(_ref) {
   var style = _ref.style,
-    otherProps = _objectWithoutProperties(_ref, _excluded$I);
+    otherProps = _objectWithoutProperties(_ref, _excluded$J);
   var rotateAnimation = useRef(new Animated.Value(0));
   useEffect(function () {
     var animation = Animated.loop(Animated.timing(rotateAnimation.current, {
@@ -8940,7 +8947,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,
@@ -8963,7 +8970,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
@@ -9799,7 +9806,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];
@@ -9826,18 +9833,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
@@ -10104,7 +10111,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,
@@ -10113,7 +10120,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);
@@ -10149,7 +10156,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,
@@ -10159,7 +10166,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]);
@@ -10171,7 +10178,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';
 };
@@ -10190,7 +10197,7 @@ var Badge = 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);
@@ -10289,7 +10296,7 @@ var StyledBottomBarText = index$c(Typography.Label)(function (_ref3) {
   };
 });
 
-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;
@@ -10300,7 +10307,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.
@@ -10385,13 +10392,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,
@@ -10452,7 +10459,7 @@ var StyledHeaderWrapper = index$c(View)(function (_ref5) {
     paddingHorizontal: theme.__hd__.bottomSheet.space.headerWrapperHorizontalPadding
   };
 });
-var StyledHeader = index$c(View)({
+var StyledHeader$1 = index$c(View)({
   flex: 1,
   justifyContent: 'center'
 });
@@ -10521,7 +10528,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) {
@@ -10553,7 +10560,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, {
@@ -11162,7 +11169,7 @@ var Header = function Header(_ref) {
     _ref$variant = _ref.variant,
     variant = _ref$variant === void 0 ? 'fixed' : _ref$variant;
   var theme = useTheme();
-  return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(StyledHeaderWrapper, null, typeof content === 'string' ? /*#__PURE__*/React__default.createElement(StyledHeader, null, /*#__PURE__*/React__default.createElement(Typography.Body, {
+  return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(StyledHeaderWrapper, null, typeof content === 'string' ? /*#__PURE__*/React__default.createElement(StyledHeader$1, null, /*#__PURE__*/React__default.createElement(Typography.Body, {
     variant: "regular-bold"
   }, content)) : /*#__PURE__*/React__default.createElement(View, {
     style: {
@@ -11185,11 +11192,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) {
@@ -14317,12 +14324,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"
@@ -14341,13 +14348,13 @@ var StyledCard$1 = index$c(View)(function (_ref) {
   });
 });
 
-var _excluded$w = ["intent", "children", "variant"];
+var _excluded$x = ["intent", "children", "variant"];
 var Card = 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
@@ -14614,7 +14621,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.
  */
@@ -14625,7 +14632,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];
@@ -14760,7 +14767,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),
@@ -14787,7 +14794,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$1);
   useDeprecation("The use of 'pageControlPosition == bottom' has been deprecated", pageControlPosition === 'bottom');
   var theme = useTheme();
@@ -20058,7 +20065,7 @@ var StyledChipIcon = index$c(Icon)(function (_ref2) {
   };
 });
 
-var _excluded$t = ["label", "variant", "selected", "icon", "onPress", "showSelectedIcon", "accessible"];
+var _excluded$u = ["label", "variant", "selected", "icon", "onPress", "showSelectedIcon", "accessible"];
 var getChipLabel = function getChipLabel(label) {
   if (typeof label === 'string') {
     return /*#__PURE__*/React__default.createElement(Typography.Body, {
@@ -20092,7 +20099,7 @@ var Chip = function Chip(_ref) {
     _ref$showSelectedIcon = _ref.showSelectedIcon,
     showSelectedIcon = _ref$showSelectedIcon === void 0 ? true : _ref$showSelectedIcon,
     accessible = _ref.accessible,
-    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;
@@ -20445,7 +20452,7 @@ var StyledErrorAndMaxLengthContainer = index$c(View)(function (_ref12) {
   };
 });
 
-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,
@@ -20564,7 +20571,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({
@@ -21343,13 +21350,13 @@ var DatePickerIOS = function DatePickerIOS(_ref) {
   }));
 };
 
-var _excluded$r = ["variant", "TextInputComponent"];
+var _excluded$s = ["variant", "TextInputComponent"];
 var DatePicker = function DatePicker(_ref) {
   var _ref$variant = _ref.variant,
     variant = _ref$variant === void 0 ? 'default' : _ref$variant,
     _ref$TextInputCompone = _ref.TextInputComponent,
     TextInputComponent = _ref$TextInputCompone === void 0 ? TextInput : _ref$TextInputCompone,
-    props = _objectWithoutProperties(_ref, _excluded$r);
+    props = _objectWithoutProperties(_ref, _excluded$s);
   if (variant === 'calendar') {
     return /*#__PURE__*/React__default.createElement(DatePickerCalendar, _extends$1({}, props, {
       TextInputComponent: TextInputComponent
@@ -23415,7 +23422,7 @@ var StyledErrorDescription = index$c(Typography.Body)(function (_ref10) {
   };
 });
 
-var _excluded$q = ["variant", "title", "description", "image", "testID", "ctaText", "onCtaPress", "secondaryCtaText", "onSecondaryCtaPress", "icon"],
+var _excluded$r = ["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)) {
@@ -23456,7 +23463,7 @@ var ErrorPage = function ErrorPage(_ref2) {
     secondaryCtaText = _ref2.secondaryCtaText,
     onSecondaryCtaPress = _ref2.onSecondaryCtaPress,
     icon = _ref2.icon,
-    nativeProps = _objectWithoutProperties(_ref2, _excluded$q);
+    nativeProps = _objectWithoutProperties(_ref2, _excluded$r);
   var showCta = ctaText && onCtaPress !== undefined;
   var showSecondaryCta = secondaryCtaText && onSecondaryCtaPress !== undefined;
   var showButtonContainer = showCta || showSecondaryCta;
@@ -23682,13 +23689,13 @@ var ActionItem = function ActionItem(_ref) {
   })), /*#__PURE__*/React__default.createElement(StyledActionItemText, null, title))));
 };
 
-var _excluded$p = ["active"];
+var _excluded$q = ["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$p);
+    iconProps = _objectWithoutProperties(_ref, _excluded$q);
   var rotateAnimation = useRef(new Animated.Value(active ? 1 : 0));
   useEffect(function () {
     var animation = Animated.spring(rotateAnimation.current, {
@@ -24046,11 +24053,11 @@ var StyledFAB = index$c(FAB$1)(function (_ref) {
   };
 });
 
-var _excluded$o = ["fabConfig", "onCancel"];
+var _excluded$p = ["fabConfig", "onCancel"];
 var Pair = function Pair(_ref) {
   var fabConfig = _ref.fabConfig,
     onCancel = _ref.onCancel,
-    props = _objectWithoutProperties(_ref, _excluded$o);
+    props = _objectWithoutProperties(_ref, _excluded$p);
   var icon = fabConfig.icon,
     title = fabConfig.title,
     onPress = fabConfig.onPress,
@@ -24780,11 +24787,11 @@ var StyledFocusIcon = index$c(Icon)(function (_ref7) {
   };
 });
 
-var _excluded$n = ["style", "testID"];
+var _excluded$o = ["style", "testID"];
 var MapPinFocussed = function MapPinFocussed(_ref) {
   var style = _ref.style,
     testID = _ref.testID,
-    nativeProps = _objectWithoutProperties(_ref, _excluded$n);
+    nativeProps = _objectWithoutProperties(_ref, _excluded$o);
   return /*#__PURE__*/React__default.createElement(StyledContainer$3, _extends$1({}, nativeProps, {
     style: style,
     testID: testID
@@ -24794,7 +24801,7 @@ var MapPinFocussed = function MapPinFocussed(_ref) {
   }));
 };
 
-var _excluded$m = ["style", "testID", "state", "image", "icon"];
+var _excluded$n = ["style", "testID", "state", "image", "icon"];
 var getBadgeIconName = function getBadgeIconName(state) {
   var iconMap = {
     idle: undefined,
@@ -24810,7 +24817,7 @@ var MapPin = function MapPin(_ref) {
     state = _ref$state === void 0 ? 'idle' : _ref$state,
     image = _ref.image,
     icon = _ref.icon,
-    nativeProps = _objectWithoutProperties(_ref, _excluded$m);
+    nativeProps = _objectWithoutProperties(_ref, _excluded$n);
   var badgeIcon = getBadgeIconName(state);
   return /*#__PURE__*/React__default.createElement(StyledContainer$3, _extends$1({}, nativeProps, {
     style: style,
@@ -25131,7 +25138,7 @@ var THEME_INTENT_MAP = {
   'archived-inverted': 'archivedInverted'
 };
 
-var _excluded$l = ["value", "renderValue", "intent", "style", "testID"];
+var _excluded$m = ["value", "renderValue", "intent", "style", "testID"];
 var defaultRenderValue = function defaultRenderValue(value) {
   return "".concat(value, "%");
 };
@@ -25144,7 +25151,7 @@ var ProgressCircle = function ProgressCircle(_ref) {
     intent = _ref$intent === void 0 ? 'primary' : _ref$intent,
     style = _ref.style,
     testID = _ref.testID,
-    nativeProps = _objectWithoutProperties(_ref, _excluded$l);
+    nativeProps = _objectWithoutProperties(_ref, _excluded$m);
   var theme = useTheme$1();
   var size = theme.__hd__.progress.sizes.circleDiameter;
   var strokeWidth = theme.__hd__.progress.sizes.circleCompletenessHeight;
@@ -25214,14 +25221,14 @@ var StyledInner = index$c(Animated.View)(function (_ref2) {
   };
 });
 
-var _excluded$k = ["value", "intent", "style", "testID"];
+var _excluded$l = ["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$k);
+    nativeProps = _objectWithoutProperties(_ref, _excluded$l);
   var _useState = useState(0),
     _useState2 = _slicedToArray(_useState, 2),
     width = _useState2[0],
@@ -25311,7 +25318,7 @@ var StyledSingleStep = index$c(Box)(function (_ref3) {
   };
 });
 
-var _excluded$j = ["steps", "current", "onLayout"];
+var _excluded$k = ["steps", "current", "onLayout"];
 var getStepState = function getStepState(current, index) {
   if (index < current) {
     return 'complete';
@@ -25325,7 +25332,7 @@ var ProgressStep = function ProgressStep(_ref) {
   var steps = _ref.steps,
     current = _ref.current,
     onLayout = _ref.onLayout,
-    props = _objectWithoutProperties(_ref, _excluded$j);
+    props = _objectWithoutProperties(_ref, _excluded$k);
   var theme = useTheme$1();
   var _React$useState = React__default.useState(0),
     _React$useState2 = _slicedToArray(_React$useState, 2),
@@ -25360,9 +25367,141 @@ var ProgressStep = function ProgressStep(_ref) {
   }));
 };
 
+var MIN_PROGRESS_VALUE = 0;
+var MAX_PROGRESS_VALUE = 100;
+var SEGMENTED_BAR_ERRORS = {
+  negativeValue: '[Progress.SegmentedBar] value:$value is less than 0'
+};
+
+var useValidateSegmentedBarData = function useValidateSegmentedBarData(_ref) {
+  var values = _ref.values,
+    dataLength = _ref.dataLength;
+  var _React$useMemo = React__default.useMemo(function () {
+      var foundNegativeValue = values.find(function (value) {
+        return value < 0;
+      });
+      return {
+        hasNegativeValue: foundNegativeValue !== undefined,
+        negativeValue: foundNegativeValue
+      };
+    }, [dataLength, values]),
+    hasNegativeValue = _React$useMemo.hasNegativeValue,
+    negativeValue = _React$useMemo.negativeValue;
+  assert(!hasNegativeValue, SEGMENTED_BAR_ERRORS.negativeValue.replace('$value', String(negativeValue)));
+};
+
+var StyledHeader = index$c(Box)(function (_ref) {
+  var theme = _ref.theme;
+  return {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'baseline',
+    marginBottom: theme.__hd__.progress.space.segmentedHeaderMarginBottom
+  };
+});
+var StyledTrack = index$c(Box)(function (_ref2) {
+  var theme = _ref2.theme;
+  return {
+    width: '100%',
+    height: theme.__hd__.progress.sizes.barHeight,
+    borderRadius: theme.__hd__.progress.radii["default"],
+    overflow: 'hidden',
+    flexDirection: 'row'
+  };
+});
+var StyledSegment = index$c(Box)(function (_ref3) {
+  var themeColor = _ref3.themeColor,
+    themeWidthPercent = _ref3.themeWidthPercent;
+  return {
+    backgroundColor: themeColor,
+    flexGrow: 0,
+    flexShrink: 0,
+    width: "".concat(themeWidthPercent, "%")
+  };
+});
+
+var getTextComponent = function getTextComponent(content, textElement) {
+  if (!content) {
+    return null;
+  }
+  if (typeof content === 'string' || typeof content === 'number') {
+    return textElement;
+  }
+  return content;
+};
+
+var _excluded$j = ["data", "headerConfig", "style", "testID"];
+var ProgressSegmentedBar = function ProgressSegmentedBar(_ref) {
+  var data = _ref.data,
+    headerConfig = _ref.headerConfig,
+    style = _ref.style,
+    testID = _ref.testID,
+    nativeProps = _objectWithoutProperties(_ref, _excluded$j);
+  var values = React__default.useMemo(function () {
+    return data.map(function (s) {
+      return s.data;
+    });
+  }, [data]);
+  useValidateSegmentedBarData({
+    dataLength: data.length,
+    values: values
+  });
+  var theme = useTheme$1();
+  var totalPercent = React__default.useMemo(function () {
+    return values.reduce(function (acc, value) {
+      return acc + value;
+    }, 0);
+  }, [values]);
+  var ariaValueMax = totalPercent > MAX_PROGRESS_VALUE ? totalPercent : MAX_PROGRESS_VALUE;
+  var remainderPercent = React__default.useMemo(function () {
+    return totalPercent >= MAX_PROGRESS_VALUE ? 0 : MAX_PROGRESS_VALUE - totalPercent;
+  }, [totalPercent]);
+  // Mock colors
+  var segmentColors = [theme.colors.primary, theme.colors.success, theme.colors.warning, theme.colors.error, theme.colors.info, theme.colors.archived];
+  var headerRight = React__default.useMemo(function () {
+    return getTextComponent(headerConfig === null || headerConfig === void 0 ? void 0 : headerConfig.right, /*#__PURE__*/React__default.createElement(Typography.Caption, {
+      intent: "muted"
+    }, headerConfig === null || headerConfig === void 0 ? void 0 : headerConfig.right));
+  }, [headerConfig === null || headerConfig === void 0 ? void 0 : headerConfig.right]);
+  var showHeader = Boolean((headerConfig === null || headerConfig === void 0 ? void 0 : headerConfig.left) || headerRight);
+  return /*#__PURE__*/React__default.createElement(Box, _extends$1({}, nativeProps, {
+    style: style,
+    testID: testID
+  }), showHeader ? /*#__PURE__*/React__default.createElement(StyledHeader, {
+    testID: testID ? "".concat(testID, "-header") : undefined
+  }, headerConfig !== null && headerConfig !== void 0 && headerConfig.left ? /*#__PURE__*/React__default.createElement(Typography.Body, {
+    variant: "regular-bold",
+    testID: testID ? "".concat(testID, "-header-left") : undefined
+  }, headerConfig.left) : null, headerRight ? /*#__PURE__*/React__default.createElement(Box, {
+    testID: testID ? "".concat(testID, "-header-right") : undefined
+  }, headerRight) : null) : null, /*#__PURE__*/React__default.createElement(StyledTrack, {
+    testID: testID ? "".concat(testID, "-track") : undefined,
+    accessibilityRole: "progressbar",
+    accessibilityValue: {
+      min: MIN_PROGRESS_VALUE,
+      max: ariaValueMax,
+      now: totalPercent
+    }
+  }, data.map(function (s, index) {
+    var segmentColor = segmentColors[index % segmentColors.length];
+    return /*#__PURE__*/React__default.createElement(StyledSegment, {
+      key: "".concat(s.label, "-").concat(segmentColor),
+      themeColor: segmentColor,
+      themeWidthPercent: s.data,
+      testID: testID ? "".concat(testID, "-segment-").concat(s.label) : undefined
+    });
+  }), remainderPercent > 0 ? /*#__PURE__*/React__default.createElement(StyledSegment, {
+    key: "remainder",
+    themeColor: theme.__hd__.progress.colors.segmentedRemainderBackground,
+    themeWidthPercent: remainderPercent,
+    testID: testID ? "".concat(testID, "-segment-remainder") : undefined
+  }) : null));
+};
+
 var Progress = {
   Circle: ProgressCircle,
   Bar: ProgressBar,
+  SegmentedBar: ProgressSegmentedBar,
   Step: ProgressStep
 };