@hero-design/rn 8.128.0 → 8.128.2

package/es/index.js

@@ -4978,7 +4978,7 @@ var swagLightGlobalPalette = _objectSpread2(_objectSpread2({}, globalPalette$1),
 });
 
 var ehWorkBrandSystemPalette = {
-  primary: '#460078',
+  primary: '#7622d7',
   onPrimary: '#fdfbff',
   secondary: '#b382fd',
   onSecondary: palette$4.white,
@@ -5007,6 +5007,7 @@ var swagSystemPalette = _objectSpread2(_objectSpread2({}, ehWorkSystemPalette),
 
 var ehJobsSystemPalette = _objectSpread2(_objectSpread2({}, swagSystemPalette), {}, {
   name: 'ehJobs',
+  primary: '#7622d7',
   secondary: '#40d1ff',
   onSecondary: '#460078',
   secondaryHighlightedSurface: '#ecfaff',
@@ -6373,19 +6374,19 @@ var getErrorTheme = function getErrorTheme(theme) {
 
 var getFABTheme = function getFABTheme(theme) {
   var colors = {
-    buttonBackground: theme.colors.overlayGlobalSurface,
-    buttonPressedBackground: theme.colors.overlayGlobalSurface,
-    buttonActiveBackground: theme.colors.overlayGlobalSurface,
+    buttonBackground: theme.colors.primary,
+    buttonPressedBackground: theme.colors.primary,
+    buttonActiveBackground: theme.colors.primary,
     icon: theme.colors.onDarkGlobalSurface,
-    actionItemBackground: theme.colors.overlayGlobalSurface,
-    actionItemPressedBackground: theme.colors.overlayGlobalSurface,
+    actionItemBackground: theme.colors.defaultGlobalSurface,
+    actionItemPressedBackground: theme.colors.defaultGlobalSurface,
     backdropBackground: theme.colors.black,
     titleText: theme.colors.onDarkGlobalSurface,
-    actionItemText: theme.colors.onDarkGlobalSurface
+    actionItemText: theme.colors.onDefaultGlobalSurface
   };
   var sizes = {
-    width: theme.sizes.xxxxxlarge,
-    height: theme.sizes.xxxxxlarge,
+    width: theme.sizes.xxxlarge,
+    height: theme.sizes.xxxlarge,
     iconContainerWidth: theme.sizes.large,
     iconContainerHeight: theme.sizes.large,
     fabPairHeight: theme.sizes.xxxlarge,
@@ -6393,11 +6394,11 @@ var getFABTheme = function getFABTheme(theme) {
   };
   var fonts = {
     actionItemText: theme.fonts.neutral.regular,
-    title: theme.fonts.neutral.semiBold
+    title: theme.fonts.neutral.regular
   };
   var fontSizes = {
     actionItemText: theme.fontSizes.large,
-    title: theme.fontSizes.large
+    title: theme.fontSizes.medium
   };
   var lineHeights = {
     actionItemText: theme.lineHeights.medium,
@@ -6414,7 +6415,7 @@ var getFABTheme = function getFABTheme(theme) {
     actionItemTextPaddingLeft: theme.space.xsmall,
     buttonMarginTop: theme.space.large,
     buttonMarginRight: theme.space.large,
-    containerPadding: theme.space.large - theme.space.xsmall,
+    containerPadding: theme.space.smallMedium,
     titleMarginHorizontal: theme.space.small,
     fabPairMarginRight: theme.space.small
   };
@@ -8184,7 +8185,7 @@ var StyledText$4 = index$c(Text$1)(function (_ref) {
   });
 });
 
-var _excluded$Q = ["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.
  */
@@ -8200,7 +8201,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$Q);
+    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,
@@ -8253,10 +8254,10 @@ var pickAccessibilityProps = function pickAccessibilityProps(props) {
   }, {});
 };
 
-var _excluded$P = ["children"];
+var _excluded$N = ["children"];
 var GradientText = function GradientText(_ref) {
   var children = _ref.children,
-    accessibilityProps = _objectWithoutProperties(_ref, _excluded$P);
+    accessibilityProps = _objectWithoutProperties(_ref, _excluded$N);
   var theme = useTheme();
   var gradient = theme.colors.gradients.aiDiagonal;
   var _useState = useState(null),
@@ -8312,7 +8313,7 @@ var GradientText = function GradientText(_ref) {
   }, children));
 };
 
-var _excluded$O = ["children", "fontWeight", "intent", "allowFontScaling", "fontStyle", "style", "testID"];
+var _excluded$M = ["children", "fontWeight", "intent", "allowFontScaling", "fontStyle", "style", "testID"];
 var Caption = function Caption(_ref) {
   var children = _ref.children,
     _ref$fontWeight = _ref.fontWeight,
@@ -8325,7 +8326,7 @@ var Caption = function Caption(_ref) {
     fontStyle = _ref$fontStyle === void 0 ? 'normal' : _ref$fontStyle,
     style = _ref.style,
     testID = _ref.testID,
-    nativeProps = _objectWithoutProperties(_ref, _excluded$O);
+    nativeProps = _objectWithoutProperties(_ref, _excluded$M);
   var isAi = intent === 'ai';
   var styledText = /*#__PURE__*/React__default.createElement(StyledCaption, _extends$1({}, nativeProps, {
     themeFontWeight: fontWeight,
@@ -8357,7 +8358,7 @@ var StyledLabel$1 = index$c(Text$1)(function (_ref) {
   };
 });
 
-var _excluded$N = ["children", "intent", "allowFontScaling", "fontStyle", "fontWeight", "style", "testID"];
+var _excluded$L = ["children", "intent", "allowFontScaling", "fontStyle", "fontWeight", "style", "testID"];
 var Label = function Label(_ref) {
   var children = _ref.children,
     _ref$intent = _ref.intent,
@@ -8370,7 +8371,7 @@ var Label = function Label(_ref) {
     fontWeight = _ref$fontWeight === void 0 ? 'regular' : _ref$fontWeight,
     style = _ref.style,
     testID = _ref.testID,
-    nativeProps = _objectWithoutProperties(_ref, _excluded$N);
+    nativeProps = _objectWithoutProperties(_ref, _excluded$L);
   var isAi = intent === 'ai';
   var styledText = /*#__PURE__*/React__default.createElement(StyledLabel$1, _extends$1({}, nativeProps, {
     themeIntent: isAi ? 'body' : intent,
@@ -8401,7 +8402,7 @@ var StyledTitle$1 = index$c(Text$1)(function (_ref) {
   };
 });
 
-var _excluded$M = ["children", "intent", "allowFontScaling", "level", "typeface", "fontStyle", "style", "testID"];
+var _excluded$K = ["children", "intent", "allowFontScaling", "level", "typeface", "fontStyle", "style", "testID"];
 var Title = function Title(_ref) {
   var children = _ref.children,
     _ref$intent = _ref.intent,
@@ -8416,7 +8417,7 @@ var Title = function Title(_ref) {
     fontStyle = _ref$fontStyle === void 0 ? 'normal' : _ref$fontStyle,
     style = _ref.style,
     testID = _ref.testID,
-    nativeProps = _objectWithoutProperties(_ref, _excluded$M);
+    nativeProps = _objectWithoutProperties(_ref, _excluded$K);
   var isAi = intent === 'ai';
   var styledText = /*#__PURE__*/React__default.createElement(StyledTitle$1, _extends$1({}, nativeProps, {
     themeLevel: level,
@@ -8466,7 +8467,7 @@ var StyledBody$2 = index$c(Text$1)(function (_ref) {
   };
 });
 
-var _excluded$L = ["children", "intent", "allowFontScaling", "typeface", "variant", "fontStyle", "style", "testID"];
+var _excluded$J = ["children", "intent", "allowFontScaling", "typeface", "variant", "fontStyle", "style", "testID"];
 var Body = function Body(_ref) {
   var children = _ref.children,
     _ref$intent = _ref.intent,
@@ -8481,7 +8482,7 @@ var Body = function Body(_ref) {
     fontStyle = _ref$fontStyle === void 0 ? 'normal' : _ref$fontStyle,
     style = _ref.style,
     testID = _ref.testID,
-    nativeProps = _objectWithoutProperties(_ref, _excluded$L);
+    nativeProps = _objectWithoutProperties(_ref, _excluded$J);
   var isAi = intent === 'ai';
   var styledText = /*#__PURE__*/React__default.createElement(StyledBody$2, _extends$1({}, nativeProps, {
     themeTypeface: typeface,
@@ -9145,22 +9146,22 @@ var SpinWrapper = function SpinWrapper(_ref) {
   }, children);
 };
 
-var _excluded$K = ["style"];
+var _excluded$I = ["style"];
 var AnimatedIcon = function AnimatedIcon(_ref) {
   var style = _ref.style,
-    otherProps = _objectWithoutProperties(_ref, _excluded$K);
+    otherProps = _objectWithoutProperties(_ref, _excluded$I);
   return /*#__PURE__*/React__default.createElement(SpinWrapper, {
     style: style
   }, /*#__PURE__*/React__default.createElement(StyledHeroIcon, otherProps));
 };
 
-var _excluded$J = ["name", "themeSize", "testID", "style"];
+var _excluded$H = ["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$J);
+    accessibilityProps = _objectWithoutProperties(_ref, _excluded$H);
   var theme = useTheme();
   var gradient = theme.colors.gradients.aiDiagonal;
   var size = theme.__hd__.icon.sizes[themeSize];
@@ -9288,7 +9289,7 @@ var AccordionItem = function AccordionItem(_ref) {
   }, content));
 };
 
-var _excluded$I = ["key"];
+var _excluded$G = ["key"];
 var Accordion = function Accordion(_ref) {
   var items = _ref.items,
     activeItemKey = _ref.activeItemKey,
@@ -9311,7 +9312,7 @@ var Accordion = function Accordion(_ref) {
     accessible: accessible
   }, items.map(function (_ref2, index) {
     var key = _ref2.key,
-      props = _objectWithoutProperties(_ref2, _excluded$I);
+      props = _objectWithoutProperties(_ref2, _excluded$G);
     var open = _activeItemKey === key;
     return /*#__PURE__*/React__default.createElement(React__default.Fragment, {
       key: key
@@ -10147,7 +10148,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$H = ["theme"];
+var _excluded$F = ["theme"];
 var getThemeValue = function getThemeValue(theme, key, props) {
   var propConfig = config[key];
   var propValue = props[key];
@@ -10174,18 +10175,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$H);
+    otherProps = _objectWithoutProperties(_ref5, _excluded$F);
   var styleProps = pick(configKeys, otherProps);
   var flexProps = pick(_toConsumableArray(flexPropsKey), otherProps);
   return _objectSpread2(_objectSpread2({}, mapStylePropToThemeValue(theme, styleProps)), flexProps);
 });
 
-var _excluded$G = ["children", "style", "testID"];
+var _excluded$E = ["children", "style", "testID"];
 var Box = function Box(_ref) {
   var children = _ref.children,
     style = _ref.style,
     testID = _ref.testID,
-    otherProps = _objectWithoutProperties(_ref, _excluded$G);
+    otherProps = _objectWithoutProperties(_ref, _excluded$E);
   return /*#__PURE__*/React__default.createElement(StyledBox, _extends$1({}, otherProps, {
     style: style,
     testID: testID
@@ -10456,7 +10457,7 @@ var StyledIcon$4 = index$c(Icon)(function (_ref6) {
   };
 });
 
-var _excluded$F = ["children", "visible", "intent", "style", "testID"];
+var _excluded$D = ["children", "visible", "intent", "style", "testID"];
 var Status$1 = function Status(_ref) {
   var children = _ref.children,
     _ref$visible = _ref.visible,
@@ -10465,7 +10466,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$F);
+    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);
@@ -10501,7 +10502,7 @@ var Status$1 = function Status(_ref) {
 
 var DEFAULT_MAX_NUMBER = 99;
 
-var _excluded$E = ["children", "visible", "style", "max", "testID", "content"];
+var _excluded$C = ["children", "visible", "style", "max", "testID", "content"];
 var Status = function Status(_ref) {
   var children = _ref.children,
     _ref$visible = _ref.visible,
@@ -10511,7 +10512,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$E);
+    nativeProps = _objectWithoutProperties(_ref, _excluded$C);
   var content = useMemo(function () {
     return originalContent > max ? "".concat(max, "+") : String(originalContent);
   }, [originalContent, max]);
@@ -10523,7 +10524,7 @@ var Status = function Status(_ref) {
   }, /*#__PURE__*/React__default.createElement(StyledCountText, null, content)));
 };
 
-var _excluded$D = ["content", "visible", "max", "intent", "style", "testID", "size", "variant", "icon"];
+var _excluded$B = ["content", "visible", "max", "intent", "style", "testID", "size", "variant", "icon"];
 var getPaddingState = function getPaddingState(content) {
   return content.length > 1 ? 'wideContent' : 'narrowContent';
 };
@@ -10542,7 +10543,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$D);
+    nativeProps = _objectWithoutProperties(_ref, _excluded$B);
   var _React$useRef = React__default.useRef(new Animated.Value(visible ? 1 : 0)),
     opacity = _React$useRef.current;
   var isFirstRendering = React__default.useRef(true);
@@ -10660,7 +10661,7 @@ var StyledBottomBarText = index$c(Typography.Label)(function (_ref4) {
   };
 });
 
-var _excluded$C = ["onTabPress", "renderActiveTabOnly", "selectedTabKey", "tabs"];
+var _excluded$A = ["onTabPress", "renderActiveTabOnly", "selectedTabKey", "tabs"];
 var getInactiveIcon = function getInactiveIcon(icon) {
   var inactiveIcon = "".concat(icon, "-outlined");
   return isHeroIcon(inactiveIcon) ? inactiveIcon : icon;
@@ -10671,7 +10672,7 @@ var BottomNavigation = function BottomNavigation(_ref) {
     renderActiveTabOnly = _ref$renderActiveTabO === void 0 ? false : _ref$renderActiveTabO,
     selectedTabKey = _ref.selectedTabKey,
     tabs = _ref.tabs,
-    nativeProps = _objectWithoutProperties(_ref, _excluded$C);
+    nativeProps = _objectWithoutProperties(_ref, _excluded$A);
   var insets = useSafeAreaInsets();
   /**
    * List of loaded tabs, tabs will be loaded when navigated to.
@@ -10763,13 +10764,13 @@ var StyledDivider = index$c(View)(function (_ref) {
   }, horizontalMargin), verticalMargin);
 });
 
-var _excluded$B = ["marginHorizontal", "marginVertical", "style", "testID"];
+var _excluded$z = ["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$B);
+    nativeProps = _objectWithoutProperties(_ref, _excluded$z);
   return /*#__PURE__*/React__default.createElement(StyledDivider, _extends$1({}, nativeProps, {
     themeMarginHorizontal: marginHorizontal,
     themeMarginVertical: marginVertical,
@@ -10900,7 +10901,7 @@ var StyledLoadingDot = index$c(View)(function (_ref) {
   }, themeStyling());
 });
 
-var _excluded$A = ["count", "size", "testID", "themeVariant"];
+var _excluded$y = ["count", "size", "testID", "themeVariant"];
 var AnimatedLoadingIndicatorWrapper = Animated.createAnimatedComponent(StyledLoadingIndicatorWrapper);
 var AnimatedLoadingDot = Animated.createAnimatedComponent(StyledLoadingDot);
 var renderDotComponent = function renderDotComponent(_ref) {
@@ -10932,7 +10933,7 @@ var LoadingIndicator = function LoadingIndicator(_ref2) {
     size = _ref2$size === void 0 ? 12 : _ref2$size,
     testID = _ref2.testID,
     themeVariant = _ref2.themeVariant,
-    nativeProps = _objectWithoutProperties(_ref2, _excluded$A);
+    nativeProps = _objectWithoutProperties(_ref2, _excluded$y);
   var progressAnimation = useRef(new Animated.Value(0));
   useEffect(function () {
     var animation = Animated.loop(Animated.timing(progressAnimation.current, {
@@ -11564,11 +11565,11 @@ var Header = function Header(_ref) {
   }))) : null), showDivider ? /*#__PURE__*/React__default.createElement(Divider, null) : null);
 };
 
-var _excluded$z = ["scrollEventThrottle"];
+var _excluded$x = ["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$z);
+    props = _objectWithoutProperties(_ref, _excluded$x);
   var _useContext = useContext(BottomSheetContext),
     setInternalShowDivider = _useContext.setInternalShowDivider;
   var onScrollBeginDrag = useCallback(function (e) {
@@ -14690,12 +14691,12 @@ var Indicator = index$c(View)(function (_ref3) {
   };
 });
 
-var _excluded$y = ["intent", "children"];
+var _excluded$w = ["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$y);
+    nativeProps = _objectWithoutProperties(_ref, _excluded$w);
   return /*#__PURE__*/React__default.createElement(StyledDataCard, nativeProps, /*#__PURE__*/React__default.createElement(Indicator, {
     themeIntent: intent,
     testID: "data-card-indicator"
@@ -14714,13 +14715,13 @@ var StyledCard$1 = index$c(View)(function (_ref) {
   });
 });
 
-var _excluded$x = ["intent", "children", "variant"];
+var _excluded$v = ["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$x);
+    nativeProps = _objectWithoutProperties(_ref, _excluded$v);
   return /*#__PURE__*/React__default.createElement(StyledCard$1, _extends$1({}, nativeProps, {
     themeIntent: intent,
     themeVariant: variant
@@ -14987,7 +14988,7 @@ var CardCarousel = /*#__PURE__*/forwardRef(function (_ref, ref) {
 });
 CardCarousel.displayName = 'CardCarousel';
 
-var _excluded$w = ["rounded", "size", "testID", "style"];
+var _excluded$u = ["rounded", "size", "testID", "style"];
 /**
  * @deprecated Image component will soon be deprecated. Please use `Image` from `react-native` instead.
  */
@@ -14998,7 +14999,7 @@ var Image = function Image(_ref) {
     size = _ref$size === void 0 ? '6xlarge' : _ref$size,
     testID = _ref.testID,
     style = _ref.style,
-    imageNativeProps = _objectWithoutProperties(_ref, _excluded$w);
+    imageNativeProps = _objectWithoutProperties(_ref, _excluded$u);
   useDeprecation('Image component will soon be deprecated. Please use `Image` from `react-native` instead.');
   var theme = useTheme();
   var imageSize = theme.__hd__.image.sizes[size];
@@ -15133,7 +15134,7 @@ var CarouselItem = function CarouselItem(_ref) {
   }, heading), !!body && /*#__PURE__*/React__default.createElement(Typography.Body, null, body)));
 };
 
-var _excluded$v = ["items", "onItemIndexChange", "renderActions", "selectedItemIndex", "style", "shouldShowPagination", "testID", "pageControlPosition"];
+var _excluded$t = ["items", "onItemIndexChange", "renderActions", "selectedItemIndex", "style", "shouldShowPagination", "testID", "pageControlPosition"];
 function useStateFromProp(initialValue) {
   var _useState = useState(initialValue),
     _useState2 = _slicedToArray(_useState, 2),
@@ -15160,7 +15161,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$v);
+    nativeProps = _objectWithoutProperties(_ref, _excluded$t);
   useDeprecation("shouldShowPagination prop has been deprecated", shouldShowPagination !== noop$1);
   useDeprecation("The use of 'pageControlPosition == bottom' has been deprecated", pageControlPosition === 'bottom');
   var theme = useTheme();
@@ -20431,7 +20432,7 @@ var StyledChipIcon = index$c(Icon)(function (_ref2) {
   };
 });
 
-var _excluded$u = ["label", "variant", "selected", "icon", "onPress", "showSelectedIcon", "accessible", "onBlur", "onFocus"];
+var _excluded$s = ["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, {
@@ -20467,7 +20468,7 @@ var Chip = function Chip(_ref) {
     accessible = _ref.accessible,
     onBlur = _ref.onBlur,
     onFocus = _ref.onFocus,
-    otherProps = _objectWithoutProperties(_ref, _excluded$u);
+    otherProps = _objectWithoutProperties(_ref, _excluded$s);
   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;
@@ -20858,7 +20859,7 @@ var StyledErrorAndMaxLengthContainer = index$c(View)(function (_ref14) {
   };
 });
 
-var _excluded$t = ["label", "prefix", "suffix", "style", "textStyle", "testID", "accessibilityLabelledBy", "error", "required", "editable", "disabled", "loading", "maxLength", "hideCharacterCount", "helpText", "value", "defaultValue", "renderInputValue", "allowFontScaling", "variant"];
+var _excluded$r = ["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,
@@ -20974,7 +20975,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$t);
+    nativeProps = _objectWithoutProperties(_ref8, _excluded$r);
   var displayText = getDisplayText(value, defaultValue);
   var isEmptyValue = displayText.length === 0;
   var _React$useState = React__default.useState(0),
@@ -21333,30 +21334,6 @@ var useFormatDate = function useFormatDate(_ref) {
   };
 };
 
-var StyledPickerWrapper$1 = index$c(View)(function (_ref) {
-  var theme = _ref.theme;
-  return {
-    height: theme.__hd__.datePicker.sizes.height,
-    alignItems: 'center'
-  };
-});
-var getZIndexByState$2 = function getZIndexByState(_ref2) {
-  var themeHasError = _ref2.themeHasError;
-  if (themeHasError) {
-    return 1;
-  }
-  return 0;
-};
-var StyledTouchableOpacity$2 = index$c(TouchableOpacity)(function (_ref3) {
-  var themeGroupStyleEnabled = _ref3.themeGroupStyleEnabled,
-    themeHasError = _ref3.themeHasError;
-  return _objectSpread2({}, themeGroupStyleEnabled && {
-    zIndex: getZIndexByState$2({
-      themeHasError: themeHasError
-    })
-  });
-});
-
 var DatePickerAndroid = function DatePickerAndroid(_ref) {
   var value = _ref.value,
     minDate = _ref.minDate,
@@ -21375,11 +21352,7 @@ var DatePickerAndroid = function DatePickerAndroid(_ref) {
     _ref$variant = _ref.variant,
     variant = _ref$variant === void 0 ? 'default' : _ref$variant,
     renderSelectedValue = _ref.renderSelectedValue,
-    locale = _ref.locale,
-    TextInputComponent = _ref.TextInputComponent,
-    inputProps = _ref.inputProps,
-    _ref$groupStyleEnable = _ref.groupStyleEnabled,
-    groupStyleEnabled = _ref$groupStyleEnable === void 0 ? false : _ref$groupStyleEnable;
+    locale = _ref.locale;
   var _useState = useState(false),
     _useState2 = _slicedToArray(_useState, 2),
     open = _useState2[0],
@@ -21397,20 +21370,17 @@ var DatePickerAndroid = function DatePickerAndroid(_ref) {
     onChange: onChange,
     value: value
   });
-  var InputComponent = TextInputComponent || TextInput;
   var onPress = useCallback(function () {
     setOpen(true);
   }, []);
-  return /*#__PURE__*/React__default.createElement(StyledTouchableOpacity$2, {
+  return /*#__PURE__*/React__default.createElement(TouchableOpacity, {
     onPress: onPress,
     disabled: disabled,
-    themeGroupStyleEnabled: groupStyleEnabled,
-    themeHasError: !!error,
     testID: "date-picker-android-touchable-opacity"
   }, /*#__PURE__*/React__default.createElement(View, {
     pointerEvents: "none",
     testID: "datePickerInputAndroid"
-  }, /*#__PURE__*/React__default.createElement(InputComponent, _extends$1({}, inputProps, {
+  }, /*#__PURE__*/React__default.createElement(TextInput, {
     label: label,
     value: displayValue,
     suffix: "calendar-dates-outlined",
@@ -21421,13 +21391,13 @@ var DatePickerAndroid = function DatePickerAndroid(_ref) {
     helpText: helpText,
     style: style,
     testID: testID,
-    renderInputValue: renderSelectedValue !== undefined && !!value ? function (props) {
+    renderInputValue: renderSelectedValue !== undefined && !!value ? function (inputProps) {
       return renderSelectedValue({
         date: value,
         formattedDateString: displayValue
-      }, props);
+      }, inputProps);
     } : undefined
-  }))), /*#__PURE__*/React__default.createElement(AndroidDatePickerDialog, {
+  })), /*#__PURE__*/React__default.createElement(AndroidDatePickerDialog, {
     open: open,
     onClose: function onClose() {
       return setOpen(false);
@@ -21505,11 +21475,7 @@ var DatePickerCalendar = function DatePickerCalendar(_ref2) {
     _ref2$supportedOrient = _ref2.supportedOrientations,
     supportedOrientations = _ref2$supportedOrient === void 0 ? ['portrait'] : _ref2$supportedOrient,
     renderSelectedValue = _ref2.renderSelectedValue,
-    locale = _ref2.locale,
-    TextInputComponent = _ref2.TextInputComponent,
-    inputProps = _ref2.inputProps,
-    _ref2$groupStyleEnabl = _ref2.groupStyleEnabled,
-    groupStyleEnabled = _ref2$groupStyleEnabl === void 0 ? false : _ref2$groupStyleEnabl;
+    locale = _ref2.locale;
   var _useState5 = useState(false),
     _useState6 = _slicedToArray(_useState5, 2),
     open = _useState6[0],
@@ -21535,20 +21501,17 @@ var DatePickerCalendar = function DatePickerCalendar(_ref2) {
     onChange: onChange,
     value: value
   });
-  var InputComponent = TextInputComponent || TextInput;
   var onPress = useCallback(function () {
     setOpen(true);
   }, []);
-  return /*#__PURE__*/React__default.createElement(StyledTouchableOpacity$2, {
+  return /*#__PURE__*/React__default.createElement(TouchableOpacity, {
     onPress: onPress,
     disabled: disabled,
-    themeGroupStyleEnabled: groupStyleEnabled,
-    themeHasError: !!error,
     testID: "date-picker-calendar-touchable-opacity"
   }, /*#__PURE__*/React__default.createElement(View, {
     pointerEvents: "none",
     testID: "datePickerCalendar"
-  }, /*#__PURE__*/React__default.createElement(InputComponent, _extends$1({}, inputProps, {
+  }, /*#__PURE__*/React__default.createElement(TextInput, {
     label: label,
     value: displayValue,
     suffix: "calendar-dates-outlined",
@@ -21559,13 +21522,13 @@ var DatePickerCalendar = function DatePickerCalendar(_ref2) {
     helpText: helpText,
     testID: testID,
     style: style,
-    renderInputValue: renderSelectedValue !== undefined && !!value ? function (props) {
+    renderInputValue: renderSelectedValue !== undefined && !!value ? function (inputProps) {
       return renderSelectedValue({
         date: value,
         formattedDateString: displayValue
-      }, props);
+      }, inputProps);
     } : undefined
-  }))), /*#__PURE__*/React__default.createElement(BottomSheet, {
+  })), /*#__PURE__*/React__default.createElement(BottomSheet, {
     open: open,
     onRequestClose: function onRequestClose() {
       return setOpen(false);
@@ -21595,6 +21558,14 @@ var DatePickerCalendar = function DatePickerCalendar(_ref2) {
   }))));
 };
 
+var StyledPickerWrapper$1 = index$c(View)(function (_ref) {
+  var theme = _ref.theme;
+  return {
+    height: theme.__hd__.datePicker.sizes.height,
+    alignItems: 'center'
+  };
+});
+
 var IOSDatePickerDialog = function IOSDatePickerDialog(_ref) {
   var label = _ref.label,
     open = _ref.open,
@@ -21687,11 +21658,7 @@ var DatePickerIOS = function DatePickerIOS(_ref) {
     _ref$variant = _ref.variant,
     variant = _ref$variant === void 0 ? 'default' : _ref$variant,
     locale = _ref.locale,
-    renderSelectedValue = _ref.renderSelectedValue,
-    TextInputComponent = _ref.TextInputComponent,
-    inputProps = _ref.inputProps,
-    _ref$groupStyleEnable = _ref.groupStyleEnabled,
-    groupStyleEnabled = _ref$groupStyleEnable === void 0 ? false : _ref$groupStyleEnable;
+    renderSelectedValue = _ref.renderSelectedValue;
   var _useState = useState(false),
     _useState2 = _slicedToArray(_useState, 2),
     open = _useState2[0],
@@ -21711,20 +21678,17 @@ var DatePickerIOS = function DatePickerIOS(_ref) {
     onChange: onChange,
     value: value
   });
-  var InputComponent = TextInputComponent || TextInput;
   var onPress = useCallback(function () {
     setOpen(true);
   }, []);
-  return /*#__PURE__*/React__default.createElement(StyledTouchableOpacity$2, {
+  return /*#__PURE__*/React__default.createElement(TouchableOpacity, {
     onPress: onPress,
     disabled: disabled,
-    themeGroupStyleEnabled: groupStyleEnabled,
-    themeHasError: !!error,
     testID: "date-picker-ios-touchable-opacity"
   }, /*#__PURE__*/React__default.createElement(View, {
     pointerEvents: "none",
     testID: "datePickerInputIOS"
-  }, /*#__PURE__*/React__default.createElement(InputComponent, _extends$1({}, inputProps, {
+  }, /*#__PURE__*/React__default.createElement(TextInput, {
     label: label,
     value: displayValue,
     suffix: "calendar-dates-outlined",
@@ -21735,13 +21699,13 @@ var DatePickerIOS = function DatePickerIOS(_ref) {
     helpText: helpText,
     testID: testID,
     style: style,
-    renderInputValue: renderSelectedValue !== undefined && !!value ? function (props) {
+    renderInputValue: renderSelectedValue !== undefined && !!value ? function (inputProps) {
       return renderSelectedValue({
         date: value,
         formattedDateString: displayValue
-      }, props);
+      }, inputProps);
     } : undefined
-  }))), /*#__PURE__*/React__default.createElement(IOSDatePickerDialog, {
+  })), /*#__PURE__*/React__default.createElement(IOSDatePickerDialog, {
     value: value,
     onChange: onChange,
     open: open,
@@ -21758,27 +21722,21 @@ var DatePickerIOS = function DatePickerIOS(_ref) {
   }));
 };
 
-var _excluded$s = ["variant", "TextInputComponent"];
+var _excluded$q = ["variant"];
 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$s);
+    props = _objectWithoutProperties(_ref, _excluded$q);
   if (variant === 'calendar') {
-    return /*#__PURE__*/React__default.createElement(DatePickerCalendar, _extends$1({}, props, {
-      TextInputComponent: TextInputComponent
-    }));
+    return /*#__PURE__*/React__default.createElement(DatePickerCalendar, props);
   }
   if (Platform.OS === 'ios') {
     return /*#__PURE__*/React__default.createElement(DatePickerIOS, _extends$1({}, props, {
-      variant: variant,
-      TextInputComponent: TextInputComponent
+      variant: variant
     }));
   }
   return /*#__PURE__*/React__default.createElement(DatePickerAndroid, _extends$1({}, props, {
-    variant: variant,
-    TextInputComponent: TextInputComponent
+    variant: variant
   }));
 };
 
@@ -23774,21 +23732,14 @@ var StyledErrorButtonContainer = index$c(View)(function (_ref3) {
     paddingVertical: theme.__hd__.error.space.button.wrapperVerticalPadding
   };
 });
-var StyledErrorButtonPrimary = index$c(CompoundButton)(function (_ref4) {
+var StyledErrorButtonSecondary = index$c(CompoundButton)(function (_ref4) {
   var theme = _ref4.theme;
   return {
-    padding: theme.__hd__.error.space.button.padding
+    marginTop: theme.__hd__.error.space.button.margin
   };
 });
-var StyledErrorButtonSecondary = index$c(CompoundButton)(function (_ref5) {
+var StyledErrorImageContainer = index$c(View)(function (_ref5) {
   var theme = _ref5.theme;
-  return {
-    marginTop: theme.__hd__.error.space.button.margin,
-    padding: theme.__hd__.error.space.button.padding
-  };
-});
-var StyledErrorImageContainer = index$c(View)(function (_ref6) {
-  var theme = _ref6.theme;
   return {
     marginBottom: theme.__hd__.error.space.imageMarginBottom,
     width: theme.__hd__.error.sizes.image,
@@ -23796,8 +23747,8 @@ var StyledErrorImageContainer = index$c(View)(function (_ref6) {
     alignItems: 'center'
   };
 });
-var StyledErrorIconContainer = index$c(View)(function (_ref7) {
-  var theme = _ref7.theme;
+var StyledErrorIconContainer = index$c(View)(function (_ref6) {
+  var theme = _ref6.theme;
   return {
     marginBottom: theme.__hd__.error.space.imageMarginBottom,
     width: theme.__hd__.error.sizes.icon,
@@ -23805,8 +23756,8 @@ var StyledErrorIconContainer = index$c(View)(function (_ref7) {
     alignItems: 'center'
   };
 });
-var StyledErrorImage = index$c(Image)(function (_ref8) {
-  var theme = _ref8.theme;
+var StyledErrorImage = index$c(Image)(function (_ref7) {
+  var theme = _ref7.theme;
   return {
     marginBottom: theme.__hd__.error.space.imageMarginBottom,
     width: theme.__hd__.error.sizes.image,
@@ -23814,23 +23765,23 @@ var StyledErrorImage = index$c(Image)(function (_ref8) {
     resizeMode: 'contain'
   };
 });
-var StyledErrorTitle = index$c(Typography.Title)(function (_ref9) {
-  var theme = _ref9.theme;
+var StyledErrorTitle = index$c(Typography.Title)(function (_ref8) {
+  var theme = _ref8.theme;
   return {
     textAlign: 'center',
     marginBottom: theme.__hd__.error.space.titleMarginBottom,
     color: theme.__hd__.error.colors.title
   };
 });
-var StyledErrorDescription = index$c(Typography.Body)(function (_ref10) {
-  var theme = _ref10.theme;
+var StyledErrorDescription = index$c(Typography.Body)(function (_ref9) {
+  var theme = _ref9.theme;
   return {
     textAlign: 'center',
     color: theme.__hd__.error.colors.description
   };
 });
 
-var _excluded$r = ["variant", "title", "description", "image", "testID", "ctaText", "onCtaPress", "secondaryCtaText", "onSecondaryCtaPress", "icon"],
+var _excluded$p = ["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)) {
@@ -23871,7 +23822,7 @@ var ErrorPage = function ErrorPage(_ref2) {
     secondaryCtaText = _ref2.secondaryCtaText,
     onSecondaryCtaPress = _ref2.onSecondaryCtaPress,
     icon = _ref2.icon,
-    nativeProps = _objectWithoutProperties(_ref2, _excluded$r);
+    nativeProps = _objectWithoutProperties(_ref2, _excluded$p);
   var showCta = ctaText && onCtaPress !== undefined;
   var showSecondaryCta = secondaryCtaText && onSecondaryCtaPress !== undefined;
   var showButtonContainer = showCta || showSecondaryCta;
@@ -23886,7 +23837,7 @@ var ErrorPage = function ErrorPage(_ref2) {
     typeface: "playful"
   }, title), description && /*#__PURE__*/React__default.createElement(StyledErrorDescription, {
     typeface: "playful"
-  }, description)), showButtonContainer && /*#__PURE__*/React__default.createElement(StyledErrorButtonContainer, null, showCta && /*#__PURE__*/React__default.createElement(StyledErrorButtonPrimary, {
+  }, description)), showButtonContainer && /*#__PURE__*/React__default.createElement(StyledErrorButtonContainer, null, showCta && /*#__PURE__*/React__default.createElement(CompoundButton, {
     variant: "filled",
     text: ctaText,
     onPress: onCtaPress
@@ -24017,8 +23968,9 @@ var StyledIcon$3 = index$c(Icon)(function (_ref3) {
 var AnimatedTouchableHighlight = Animated.createAnimatedComponent(TouchableOpacity);
 var StyledFAB$2 = index$c(AnimatedTouchableHighlight)(function (_ref) {
   var theme = _ref.theme,
-    themeActive = _ref.themeActive;
-  return _objectSpread2({
+    themeActive = _ref.themeActive,
+    themeIconOnly = _ref.themeIconOnly;
+  return _objectSpread2(_objectSpread2({
     backgroundColor: themeActive ? theme.__hd__.fab.colors.buttonActiveBackground : theme.__hd__.fab.colors.buttonBackground,
     borderRadius: theme.radii.rounded,
     alignItems: 'center',
@@ -24027,7 +23979,9 @@ var StyledFAB$2 = index$c(AnimatedTouchableHighlight)(function (_ref) {
     padding: theme.__hd__.fab.space.containerPadding,
     flexDirection: 'row',
     height: theme.__hd__.fab.sizes.height
-  }, theme.__hd__.fab.shadows["default"]);
+  }, themeIconOnly && {
+    width: theme.__hd__.fab.sizes.width
+  }), theme.__hd__.fab.shadows["default"]);
 });
 var StyledFABIcon = index$c(Icon)(function (_ref2) {
   var theme = _ref2.theme;
@@ -24097,13 +24051,13 @@ var ActionItem = function ActionItem(_ref) {
   })), /*#__PURE__*/React__default.createElement(StyledActionItemText, null, title))));
 };
 
-var _excluded$q = ["active"];
+var _excluded$o = ["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$q);
+    iconProps = _objectWithoutProperties(_ref, _excluded$o);
   var rotateAnimation = useRef(new Animated.Value(active ? 1 : 0));
   useEffect(function () {
     var animation = Animated.spring(rotateAnimation.current, {
@@ -24155,12 +24109,15 @@ var IconOnlyContent = function IconOnlyContent(_ref) {
 };
 var IconWithTextContent = function IconWithTextContent(_ref2) {
   var icon = _ref2.icon,
-    title = _ref2.title;
+    title = _ref2.title,
+    titleStyle = _ref2.titleStyle;
   return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(StyledIconContainer$1, null, /*#__PURE__*/React__default.createElement(StyledFABIcon, {
     size: "xsmall",
     icon: icon,
     testID: "styled-fab-icon"
-  })), /*#__PURE__*/React__default.createElement(StyledFABText, null, title));
+  })), /*#__PURE__*/React__default.createElement(StyledFABText, {
+    style: titleStyle
+  }, title));
 };
 var animateWidth = function animateWidth() {
   LayoutAnimation.configureNext({
@@ -24171,7 +24128,9 @@ var animateWidth = function animateWidth() {
     }
   });
 };
-var FAB$1 = /*#__PURE__*/forwardRef(function (_ref3, ref) {
+// Full implementation — accepts InternalFABProps including titleStyle.
+// Exported as FABInternal for use by sibling HD components (e.g. FAB.Pair).
+var FABWithTitleStyle = /*#__PURE__*/forwardRef(function (_ref3, ref) {
   var _StyleSheet$flatten, _StyleSheet$flatten2;
   var onPress = _ref3.onPress,
     title = _ref3.title,
@@ -24179,7 +24138,8 @@ var FAB$1 = /*#__PURE__*/forwardRef(function (_ref3, ref) {
     iconAnimated = _ref3.animated,
     testID = _ref3.testID,
     active = _ref3.active,
-    style = _ref3.style;
+    style = _ref3.style,
+    titleStyle = _ref3.titleStyle;
   var theme = useTheme();
   var _React$useState = React__default.useState({
       hideTitle: false,
@@ -24284,6 +24244,7 @@ var FAB$1 = /*#__PURE__*/forwardRef(function (_ref3, ref) {
     },
     activeOpacity: 0.8,
     onPress: onPress,
+    themeIconOnly: isIconOnly,
     style: [style, {
       bottom: displayState.hideButton ? -(marginBottom + theme.__hd__.fab.sizes.height * 2) : (_StyleSheet$flatten2 = StyleSheet$1.flatten(style)) === null || _StyleSheet$flatten2 === void 0 ? void 0 : _StyleSheet$flatten2.bottom,
       transform: [{
@@ -24309,9 +24270,18 @@ var FAB$1 = /*#__PURE__*/forwardRef(function (_ref3, ref) {
     icon: active ? 'add' : icon
   }) : /*#__PURE__*/React__default.createElement(IconWithTextContent, {
     icon: icon,
-    title: title
+    title: title,
+    titleStyle: titleStyle
   })));
 });
+FABWithTitleStyle.displayName = 'FAB';
+// Public export — clean FABProps, no internal props exposed.
+// Docgen reads this component and sees only FABProps.
+var FAB$1 = /*#__PURE__*/forwardRef(function (props, ref) {
+  return /*#__PURE__*/React__default.createElement(FABWithTitleStyle, _extends$1({}, props, {
+    ref: ref
+  }));
+});
 FAB$1.displayName = 'FAB';
 
 var StyledContainer$5 = index$c(View)({
@@ -24480,7 +24450,7 @@ var StyledFABPairWrapper = index$c(Box)({
   justifyContent: 'center',
   alignItems: 'center'
 });
-var StyledFAB = index$c(FAB$1)(function (_ref) {
+var StyledFAB = index$c(FABWithTitleStyle)(function (_ref) {
   var theme = _ref.theme,
     _ref$iconOnly = _ref.iconOnly,
     iconOnly = _ref$iconOnly === void 0 ? false : _ref$iconOnly,
@@ -24493,15 +24463,16 @@ var StyledFAB = index$c(FAB$1)(function (_ref) {
   };
 });
 
-var _excluded$p = ["fabConfig", "onCancel"];
+var _excluded$n = ["fabConfig", "onCancel"];
 var Pair = function Pair(_ref) {
   var fabConfig = _ref.fabConfig,
     onCancel = _ref.onCancel,
-    props = _objectWithoutProperties(_ref, _excluded$p);
+    props = _objectWithoutProperties(_ref, _excluded$n);
   var icon = fabConfig.icon,
     title = fabConfig.title,
     onPress = fabConfig.onPress,
     testID = fabConfig.testID;
+  var theme = useTheme();
   return /*#__PURE__*/React__default.createElement(StyledFABPairWrapper, props, /*#__PURE__*/React__default.createElement(StyledFAB, {
     icon: "cancel",
     onPress: onCancel,
@@ -24513,7 +24484,11 @@ var Pair = function Pair(_ref) {
     onPress: onPress,
     testID: testID,
     iconOnly: !title,
-    isLast: true
+    isLast: true,
+    titleStyle: {
+      fontSize: theme.fontSizes.medium,
+      fontFamily: theme.fonts.neutral.regular
+    }
   }));
 };
 
@@ -25227,11 +25202,11 @@ var StyledFocusIcon = index$c(Icon)(function (_ref7) {
   };
 });
 
-var _excluded$o = ["style", "testID"];
+var _excluded$m = ["style", "testID"];
 var MapPinFocussed = function MapPinFocussed(_ref) {
   var style = _ref.style,
     testID = _ref.testID,
-    nativeProps = _objectWithoutProperties(_ref, _excluded$o);
+    nativeProps = _objectWithoutProperties(_ref, _excluded$m);
   return /*#__PURE__*/React__default.createElement(StyledContainer$4, _extends$1({}, nativeProps, {
     style: style,
     testID: testID
@@ -25241,7 +25216,7 @@ var MapPinFocussed = function MapPinFocussed(_ref) {
   }));
 };
 
-var _excluded$n = ["style", "testID", "state", "image", "icon"];
+var _excluded$l = ["style", "testID", "state", "image", "icon"];
 var getBadgeIconName = function getBadgeIconName(state) {
   var iconMap = {
     idle: undefined,
@@ -25257,7 +25232,7 @@ var MapPin = function MapPin(_ref) {
     state = _ref$state === void 0 ? 'idle' : _ref$state,
     image = _ref.image,
     icon = _ref.icon,
-    nativeProps = _objectWithoutProperties(_ref, _excluded$n);
+    nativeProps = _objectWithoutProperties(_ref, _excluded$l);
   var badgeIcon = getBadgeIconName(state);
   return /*#__PURE__*/React__default.createElement(StyledContainer$4, _extends$1({}, nativeProps, {
     style: style,
@@ -25578,7 +25553,7 @@ var THEME_INTENT_MAP = {
   'archived-inverted': 'archivedInverted'
 };
 
-var _excluded$m = ["value", "renderValue", "intent", "style", "testID"];
+var _excluded$k = ["value", "renderValue", "intent", "style", "testID"];
 var defaultRenderValue = function defaultRenderValue(value) {
   return "".concat(value, "%");
 };
@@ -25591,7 +25566,7 @@ var ProgressCircle = function ProgressCircle(_ref) {
     intent = _ref$intent === void 0 ? 'primary' : _ref$intent,
     style = _ref.style,
     testID = _ref.testID,
-    nativeProps = _objectWithoutProperties(_ref, _excluded$m);
+    nativeProps = _objectWithoutProperties(_ref, _excluded$k);
   var theme = useTheme$1();
   var size = theme.__hd__.progress.sizes.circleDiameter;
   var strokeWidth = theme.__hd__.progress.sizes.circleCompletenessHeight;
@@ -25661,14 +25636,14 @@ var StyledInner = index$c(Animated.View)(function (_ref2) {
   };
 });
 
-var _excluded$l = ["value", "intent", "style", "testID"];
+var _excluded$j = ["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$l);
+    nativeProps = _objectWithoutProperties(_ref, _excluded$j);
   var _useState = useState(0),
     _useState2 = _slicedToArray(_useState, 2),
     width = _useState2[0],
@@ -25758,7 +25733,7 @@ var StyledSingleStep = index$c(Box)(function (_ref3) {
   };
 });
 
-var _excluded$k = ["steps", "current", "onLayout"];
+var _excluded$i = ["steps", "current", "onLayout"];
 var getStepState = function getStepState(current, index) {
   if (index < current) {
     return 'complete';
@@ -25772,7 +25747,7 @@ var ProgressStep = function ProgressStep(_ref) {
   var steps = _ref.steps,
     current = _ref.current,
     onLayout = _ref.onLayout,
-    props = _objectWithoutProperties(_ref, _excluded$k);
+    props = _objectWithoutProperties(_ref, _excluded$i);
   var theme = useTheme$1();
   var _React$useState = React__default.useState(0),
     _React$useState2 = _slicedToArray(_React$useState, 2),
@@ -26069,7 +26044,7 @@ var StyledEmptyText = index$c(Typography.Caption)(function (_ref4) {
   };
 });
 
-var _excluded$j = ["data", "headerConfig", "emptyText", "legendConfig", "styleConfig", "style", "testID", "collapsable"];
+var _excluded$h = ["data", "headerConfig", "emptyText", "legendConfig", "styleConfig", "style", "testID", "collapsable"];
 var ProgressSegmentedBar = function ProgressSegmentedBar(_ref) {
   var data = _ref.data,
     headerConfig = _ref.headerConfig,
@@ -26079,7 +26054,7 @@ var ProgressSegmentedBar = function ProgressSegmentedBar(_ref) {
     style = _ref.style,
     testID = _ref.testID,
     collapsable = _ref.collapsable,
-    nativeProps = _objectWithoutProperties(_ref, _excluded$j);
+    nativeProps = _objectWithoutProperties(_ref, _excluded$h);
   var values = React__default.useMemo(function () {
     return data.map(function (s) {
       return s.data;
@@ -26449,14 +26424,14 @@ var AnimatedSpinner = function AnimatedSpinner(_ref) {
   }, dotProps))));
 };
 
-var _excluded$i = ["testID", "size", "intent"];
+var _excluded$g = ["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$i);
+    nativeProps = _objectWithoutProperties(_ref, _excluded$g);
   return /*#__PURE__*/React__default.createElement(StyledView$1, nativeProps, /*#__PURE__*/React__default.createElement(StyledSpinnerContainer, {
     testID: testID
   }, /*#__PURE__*/React__default.createElement(AnimatedSpinner, {
@@ -26489,7 +26464,7 @@ var SwipeableAction = function SwipeableAction(_ref) {
   }, children);
 };
 
-var _excluded$h = ["children", "state", "onStateChange", "leftActions", "leftActionsWidth", "rightActions", "rightActionsWidth", "variant"];
+var _excluded$f = ["children", "state", "onStateChange", "leftActions", "leftActionsWidth", "rightActions", "rightActionsWidth", "variant"];
 var renderActions = function renderActions(actions, width, progress, direction) {
   var trans = progress.interpolate({
     inputRange: [0, 1],
@@ -26518,7 +26493,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$h);
+    swipeableProps = _objectWithoutProperties(_ref, _excluded$f);
   var theme = useTheme();
   var _useWindowDimensions = useWindowDimensions(),
     width = _useWindowDimensions.width;
@@ -26846,24 +26821,8 @@ var StyledSectionList = index$c(SectionList)(function (_ref4) {
     paddingHorizontal: theme.__hd__.select.space.optionListHorizontalPadding
   };
 });
-var getZIndexByState$1 = function getZIndexByState(_ref5) {
-  var themeHasError = _ref5.themeHasError;
-  if (themeHasError) {
-    return 1;
-  }
-  return 0;
-};
-var StyledTouchableOpacity$1 = index$c(TouchableOpacity)(function (_ref6) {
-  var themeGroupStyleEnabled = _ref6.themeGroupStyleEnabled,
-    themeHasError = _ref6.themeHasError;
-  return _objectSpread2({}, themeGroupStyleEnabled && {
-    zIndex: getZIndexByState$1({
-      themeHasError: themeHasError
-    })
-  });
-});
 
-var _excluded$g = ["keyExtractor", "loading", "onEndReached", "onQueryChange", "sections", "renderItem", "sectionListRef"];
+var _excluded$e = ["keyExtractor", "loading", "onEndReached", "onQueryChange", "sections", "renderItem", "sectionListRef"];
 var BaseOptionList = function BaseOptionList(_ref) {
   var keyExtractor = _ref.keyExtractor,
     loading = _ref.loading,
@@ -26872,7 +26831,7 @@ var BaseOptionList = function BaseOptionList(_ref) {
     sections = _ref.sections,
     renderItem = _ref.renderItem,
     sectionListRef = _ref.sectionListRef,
-    rest = _objectWithoutProperties(_ref, _excluded$g);
+    rest = _objectWithoutProperties(_ref, _excluded$e);
   var theme = useTheme$1();
   var _useState = useState(false),
     _useState2 = _slicedToArray(_useState, 2),
@@ -26956,7 +26915,7 @@ var isOptionSelected = function isOptionSelected(value, option) {
   });
 };
 
-var _excluded$f = ["keyExtractor", "loading", "onEndReached", "onPress", "onQueryChange", "sections", "renderOption", "value", "sectionListRef"];
+var _excluded$d = ["keyExtractor", "loading", "onEndReached", "onPress", "onQueryChange", "sections", "renderOption", "value", "sectionListRef"];
 var OptionList$1 = function OptionList(_ref) {
   var keyExtractor = _ref.keyExtractor,
     loading = _ref.loading,
@@ -26967,7 +26926,7 @@ var OptionList$1 = function OptionList(_ref) {
     renderOption = _ref.renderOption,
     value = _ref.value,
     sectionListRef = _ref.sectionListRef,
-    rest = _objectWithoutProperties(_ref, _excluded$f);
+    rest = _objectWithoutProperties(_ref, _excluded$d);
   var renderItem = function renderItem(info) {
     var item = info.item;
     var selected = isOptionSelected(value, item);
@@ -27002,7 +26961,6 @@ var OptionList$1 = function OptionList(_ref) {
   }, rest));
 };
 
-var _excluded$e = ["footerLabel", "label", "loading", "inputProps", "onConfirm", "onDismiss", "onEndReached", "onQueryChange", "options", "renderOption", "renderSelectedValue", "query", "error", "editable", "disabled", "required", "style", "testID", "value", "supportedOrientations", "bottomSheetConfig", "groupStyleEnabled"];
 function MultiSelect(_ref) {
   var footerLabel = _ref.footerLabel,
     label = _ref.label,
@@ -27029,10 +26987,7 @@ function MultiSelect(_ref) {
     _ref$supportedOrienta = _ref.supportedOrientations,
     supportedOrientations = _ref$supportedOrienta === void 0 ? ['portrait'] : _ref$supportedOrienta,
     _ref$bottomSheetConfi = _ref.bottomSheetConfig,
-    bottomSheetConfig = _ref$bottomSheetConfi === void 0 ? {} : _ref$bottomSheetConfi,
-    _ref$groupStyleEnable = _ref.groupStyleEnabled,
-    groupStyleEnabled = _ref$groupStyleEnable === void 0 ? false : _ref$groupStyleEnable,
-    rest = _objectWithoutProperties(_ref, _excluded$e);
+    bottomSheetConfig = _ref$bottomSheetConfi === void 0 ? {} : _ref$bottomSheetConfi;
   var _useKeyboard = useKeyboard(),
     isKeyboardVisible = _useKeyboard.isKeyboardVisible,
     keyboardHeight = _useKeyboard.keyboardHeight;
@@ -27055,7 +27010,6 @@ function MultiSelect(_ref) {
   var rawValue = value.length > 0 ? value.join(', ') : '';
   var bottomSheetVariant = bottomSheetConfig.variant,
     bottomSheetHeader = bottomSheetConfig.header;
-  var TextInputComponent = rest.TextInputComponent || TextInput;
   var onPress = useCallback(function () {
     setOpen(true);
   }, []);
@@ -27068,14 +27022,12 @@ function MultiSelect(_ref) {
   }, [open, value]);
   return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(View, {
     pointerEvents: !editable || disabled || inputProps !== null && inputProps !== void 0 && inputProps.loading ? 'none' : 'auto'
-  }, /*#__PURE__*/React__default.createElement(StyledTouchableOpacity$1, {
+  }, /*#__PURE__*/React__default.createElement(TouchableOpacity, {
     onPress: onPress,
-    themeGroupStyleEnabled: groupStyleEnabled,
-    themeHasError: !!error,
     testID: "multi-select-touchable-opacity"
   }, /*#__PURE__*/React__default.createElement(View, {
     pointerEvents: "none"
-  }, /*#__PURE__*/React__default.createElement(TextInputComponent, _extends$1({}, inputProps, {
+  }, /*#__PURE__*/React__default.createElement(TextInput, _extends$1({}, inputProps, {
     label: label,
     value: renderSelectedValue ? rawValue : displayedValue,
     suffix: selectSuffix,
@@ -27087,8 +27039,8 @@ function MultiSelect(_ref) {
     pointerEvents: "none",
     style: style,
     testID: testID,
-    renderInputValue: renderSelectedValue !== undefined && (rawValue === null || rawValue === void 0 ? void 0 : rawValue.length) > 0 ? function (props) {
-      return renderSelectedValue(value, props);
+    renderInputValue: renderSelectedValue !== undefined && (rawValue === null || rawValue === void 0 ? void 0 : rawValue.length) > 0 ? function (nativeInputProps) {
+      return renderSelectedValue(value, nativeInputProps);
     } : undefined
   }))))), /*#__PURE__*/React__default.createElement(BottomSheet, {
     variant: bottomSheetVariant || 'fixed',
@@ -27125,7 +27077,7 @@ function MultiSelect(_ref) {
       }
     },
     supportedOrientations: supportedOrientations
-  }, onQueryChange && /*#__PURE__*/React__default.createElement(StyledSearchBar, null, /*#__PURE__*/React__default.createElement(TextInputComponent, {
+  }, onQueryChange && /*#__PURE__*/React__default.createElement(StyledSearchBar, null, /*#__PURE__*/React__default.createElement(TextInput, {
     editable: true,
     placeholder: "Search",
     suffix: "search-outlined",
@@ -27176,7 +27128,7 @@ var StyledOptionList = index$c(BaseOptionList)(function (_ref) {
   };
 });
 
-var _excluded$d = ["keyExtractor", "loading", "onEndReached", "onPress", "onQueryChange", "sections", "renderOption", "value", "sectionListRef"];
+var _excluded$c = ["keyExtractor", "loading", "onEndReached", "onPress", "onQueryChange", "sections", "renderOption", "value", "sectionListRef"];
 var OptionList = function OptionList(_ref) {
   var keyExtractor = _ref.keyExtractor,
     loading = _ref.loading,
@@ -27187,7 +27139,7 @@ var OptionList = function OptionList(_ref) {
     renderOption = _ref.renderOption,
     value = _ref.value,
     sectionListRef = _ref.sectionListRef,
-    rest = _objectWithoutProperties(_ref, _excluded$d);
+    rest = _objectWithoutProperties(_ref, _excluded$c);
   var renderItem = function renderItem(info) {
     var item = info.item;
     var selected = _deepCompareValue(item.value, value);
@@ -27223,7 +27175,6 @@ var OptionList = function OptionList(_ref) {
   }, rest));
 };
 
-var _excluded$c = ["label", "loading", "inputProps", "onConfirm", "onDismiss", "onEndReached", "onQueryChange", "options", "renderOption", "renderSelectedValue", "query", "error", "editable", "disabled", "required", "style", "testID", "value", "supportedOrientations", "bottomSheetConfig", "groupStyleEnabled"];
 var SingleSelect = function SingleSelect(_ref) {
   var _flatOptions$find;
   var label = _ref.label,
@@ -27250,10 +27201,7 @@ var SingleSelect = function SingleSelect(_ref) {
     _ref$supportedOrienta = _ref.supportedOrientations,
     supportedOrientations = _ref$supportedOrienta === void 0 ? ['portrait'] : _ref$supportedOrienta,
     _ref$bottomSheetConfi = _ref.bottomSheetConfig,
-    bottomSheetConfig = _ref$bottomSheetConfi === void 0 ? {} : _ref$bottomSheetConfi,
-    _ref$groupStyleEnable = _ref.groupStyleEnabled,
-    groupStyleEnabled = _ref$groupStyleEnable === void 0 ? false : _ref$groupStyleEnable,
-    rest = _objectWithoutProperties(_ref, _excluded$c);
+    bottomSheetConfig = _ref$bottomSheetConfi === void 0 ? {} : _ref$bottomSheetConfi;
   var _useKeyboard = useKeyboard(),
     isKeyboardVisible = _useKeyboard.isKeyboardVisible,
     keyboardHeight = _useKeyboard.keyboardHeight;
@@ -27270,7 +27218,6 @@ var SingleSelect = function SingleSelect(_ref) {
   var rawValue = value ? String(value) : undefined;
   var bottomSheetVariant = bottomSheetConfig.variant,
     bottomSheetHeader = bottomSheetConfig.header;
-  var TextInputComponent = rest.TextInputComponent || TextInput;
   var onPress = useCallback(function () {
     setOpen(true);
   }, []);
@@ -27282,14 +27229,12 @@ var SingleSelect = function SingleSelect(_ref) {
   }, [editable, disabled, open]);
   return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(View, {
     pointerEvents: !editable || disabled || inputProps !== null && inputProps !== void 0 && inputProps.loading ? 'none' : 'auto'
-  }, /*#__PURE__*/React__default.createElement(StyledTouchableOpacity$1, {
+  }, /*#__PURE__*/React__default.createElement(TouchableOpacity, {
     onPress: onPress,
-    themeGroupStyleEnabled: groupStyleEnabled,
-    themeHasError: !!error,
     testID: "single-select-touchable-opacity"
   }, /*#__PURE__*/React__default.createElement(View, {
     pointerEvents: "none"
-  }, /*#__PURE__*/React__default.createElement(TextInputComponent, _extends$1({}, inputProps, {
+  }, /*#__PURE__*/React__default.createElement(TextInput, _extends$1({}, inputProps, {
     label: label,
     value: renderSelectedValue ? rawValue : displayedValue,
     suffix: selectSuffix,
@@ -27301,8 +27246,8 @@ var SingleSelect = function SingleSelect(_ref) {
     pointerEvents: "none",
     style: style,
     testID: testID,
-    renderInputValue: renderSelectedValue !== undefined && !!rawValue ? function (props) {
-      return renderSelectedValue(value, props);
+    renderInputValue: renderSelectedValue !== undefined && !!rawValue ? function (nativeInputProps) {
+      return renderSelectedValue(value, nativeInputProps);
     } : undefined
   }))))), /*#__PURE__*/React__default.createElement(BottomSheet, {
     variant: bottomSheetVariant || 'fixed',
@@ -27323,7 +27268,7 @@ var SingleSelect = function SingleSelect(_ref) {
       }
     },
     supportedOrientations: supportedOrientations
-  }, onQueryChange && /*#__PURE__*/React__default.createElement(StyledSearchBar, null, /*#__PURE__*/React__default.createElement(TextInputComponent, {
+  }, onQueryChange && /*#__PURE__*/React__default.createElement(StyledSearchBar, null, /*#__PURE__*/React__default.createElement(TextInput, {
     editable: true,
     placeholder: "Search",
     suffix: "search-outlined",
@@ -27538,16 +27483,9 @@ var StyledSuccessButtonContainer = index$c(View)(function (_ref8) {
     paddingVertical: theme.__hd__.success.space.button.wrapperVerticalPadding
   };
 });
-var StyledSuccessButtonPrimary = index$c(CompoundButton)(function (_ref9) {
+var StyledSuccessButtonSecondary = index$c(CompoundButton)(function (_ref9) {
   var theme = _ref9.theme;
   return {
-    padding: theme.__hd__.success.space.button.padding
-  };
-});
-var StyledSuccessButtonSecondary = index$c(CompoundButton)(function (_ref10) {
-  var theme = _ref10.theme;
-  return {
-    padding: theme.__hd__.success.space.button.padding,
     marginTop: theme.__hd__.success.space.button.secondaryCTAMarginTop
   };
 });
@@ -27608,7 +27546,7 @@ var SuccessPage = function SuccessPage(_ref2) {
   }), /*#__PURE__*/React__default.createElement(StyledSuccessTitle, {
     level: "h4",
     typeface: "playful"
-  }, title), typeof description === 'string' ? /*#__PURE__*/React__default.createElement(StyledSuccessDescription, null, description) : description), !!ctaText && /*#__PURE__*/React__default.createElement(StyledSuccessButtonContainer, null, /*#__PURE__*/React__default.createElement(StyledSuccessButtonPrimary, {
+  }, title), typeof description === 'string' ? /*#__PURE__*/React__default.createElement(StyledSuccessDescription, null, description) : description), !!ctaText && /*#__PURE__*/React__default.createElement(StyledSuccessButtonContainer, null, /*#__PURE__*/React__default.createElement(CompoundButton, {
     text: ctaText,
     onPress: onCtaPress
   }), !!showSecondaryButton && /*#__PURE__*/React__default.createElement(StyledSuccessButtonSecondary, {
@@ -28703,30 +28641,6 @@ var Tag = function Tag(_ref) {
   }));
 };
 
-var StyledPickerWrapper = index$c(View)(function (_ref) {
-  var theme = _ref.theme;
-  return {
-    height: theme.__hd__.timePicker.sizes.height,
-    alignItems: 'center'
-  };
-});
-var getZIndexByState = function getZIndexByState(_ref2) {
-  var themeHasError = _ref2.themeHasError;
-  if (themeHasError) {
-    return 1;
-  }
-  return 0;
-};
-var StyledTouchableOpacity = index$c(TouchableOpacity)(function (_ref3) {
-  var themeGroupStyleEnabled = _ref3.themeGroupStyleEnabled,
-    themeHasError = _ref3.themeHasError;
-  return _objectSpread2({}, themeGroupStyleEnabled && {
-    zIndex: getZIndexByState({
-      themeHasError: themeHasError
-    })
-  });
-});
-
 var TimePickerAndroid = function TimePickerAndroid(_ref) {
   var value = _ref.value,
     label = _ref.label,
@@ -28742,11 +28656,7 @@ var TimePickerAndroid = function TimePickerAndroid(_ref) {
     style = _ref.style,
     testID = _ref.testID,
     _ref$showSuffix = _ref.showSuffix,
-    showSuffix = _ref$showSuffix === void 0 ? true : _ref$showSuffix,
-    TextInputComponent = _ref.TextInputComponent,
-    inputProps = _ref.inputProps,
-    _ref$groupStyleEnable = _ref.groupStyleEnabled,
-    groupStyleEnabled = _ref$groupStyleEnable === void 0 ? false : _ref$groupStyleEnable;
+    showSuffix = _ref$showSuffix === void 0 ? true : _ref$showSuffix;
   var _useState = useState(false),
     _useState2 = _slicedToArray(_useState, 2),
     open = _useState2[0],
@@ -28754,20 +28664,17 @@ var TimePickerAndroid = function TimePickerAndroid(_ref) {
   var is12Hour = displayFormat.includes('hh');
   var displayValue = value ? formatTime(displayFormat, value) : '';
   var pickerInitValue = value || new Date();
-  var InputComponent = TextInputComponent || TextInput;
   var onPress = useCallback(function () {
     setOpen(true);
   }, []);
-  return /*#__PURE__*/React__default.createElement(StyledTouchableOpacity, {
+  return /*#__PURE__*/React__default.createElement(TouchableOpacity, {
     onPress: onPress,
     disabled: disabled,
-    themeGroupStyleEnabled: groupStyleEnabled,
-    themeHasError: !!error,
     testID: "time-picker-android-touchable-opacity"
   }, /*#__PURE__*/React__default.createElement(View, {
     pointerEvents: "none",
     testID: "timePickerInputAndroid"
-  }, /*#__PURE__*/React__default.createElement(InputComponent, _extends$1({}, inputProps, {
+  }, /*#__PURE__*/React__default.createElement(TextInput, {
     label: label,
     value: displayValue,
     suffix: showSuffix ? 'clock-3' : undefined,
@@ -28778,7 +28685,7 @@ var TimePickerAndroid = function TimePickerAndroid(_ref) {
     helpText: helpText,
     style: style,
     testID: testID
-  }))), open ? /*#__PURE__*/React__default.createElement(DateTimePicker, {
+  })), open ? /*#__PURE__*/React__default.createElement(DateTimePicker, {
     testID: "timePickerAndroid",
     mode: "time",
     value: pickerInitValue,
@@ -28793,6 +28700,14 @@ var TimePickerAndroid = function TimePickerAndroid(_ref) {
   }) : null);
 };
 
+var StyledPickerWrapper = index$c(View)(function (_ref) {
+  var theme = _ref.theme;
+  return {
+    height: theme.__hd__.timePicker.sizes.height,
+    alignItems: 'center'
+  };
+});
+
 var TimePickerIOS = function TimePickerIOS(_ref) {
   var value = _ref.value,
     label = _ref.label,
@@ -28811,11 +28726,7 @@ var TimePickerIOS = function TimePickerIOS(_ref) {
     _ref$showSuffix = _ref.showSuffix,
     showSuffix = _ref$showSuffix === void 0 ? true : _ref$showSuffix,
     _ref$supportedOrienta = _ref.supportedOrientations,
-    supportedOrientations = _ref$supportedOrienta === void 0 ? ['portrait'] : _ref$supportedOrienta,
-    TextInputComponent = _ref.TextInputComponent,
-    inputProps = _ref.inputProps,
-    _ref$groupStyleEnable = _ref.groupStyleEnabled,
-    groupStyleEnabled = _ref$groupStyleEnable === void 0 ? false : _ref$groupStyleEnable;
+    supportedOrientations = _ref$supportedOrienta === void 0 ? ['portrait'] : _ref$supportedOrienta;
   var _useState = useState(value || new Date()),
     _useState2 = _slicedToArray(_useState, 2),
     selectingDate = _useState2[0],
@@ -28831,23 +28742,20 @@ var TimePickerIOS = function TimePickerIOS(_ref) {
   // For 12-hour format: use en-US locale to ensure 12-hour display regardless of device settings
   // For 24-hour format: use en-GB for consistent 24-hour display
   var pickerLocale = is12Hour ? 'en-US' : 'en-GB';
-  var InputComponent = TextInputComponent || TextInput;
   useEffect(function () {
     setSelectingDate(value || new Date());
   }, [value]);
   var onPress = useCallback(function () {
     setOpen(true);
   }, []);
-  return /*#__PURE__*/React__default.createElement(StyledTouchableOpacity, {
+  return /*#__PURE__*/React__default.createElement(TouchableOpacity, {
     onPress: onPress,
     disabled: disabled,
-    themeGroupStyleEnabled: groupStyleEnabled,
-    themeHasError: !!error,
     testID: "time-picker-ios-touchable-opacity"
   }, /*#__PURE__*/React__default.createElement(View, {
     pointerEvents: "none",
     testID: "timePickerInputIOS"
-  }, /*#__PURE__*/React__default.createElement(InputComponent, _extends$1({}, inputProps, {
+  }, /*#__PURE__*/React__default.createElement(TextInput, {
     label: label,
     value: displayValue,
     suffix: showSuffix ? 'clock-3' : undefined,
@@ -28858,7 +28766,7 @@ var TimePickerIOS = function TimePickerIOS(_ref) {
     helpText: helpText,
     testID: testID,
     style: style
-  }))), /*#__PURE__*/React__default.createElement(BottomSheet, {
+  })), /*#__PURE__*/React__default.createElement(BottomSheet, {
     open: open,
     onRequestClose: function onRequestClose() {
       return setOpen(false);