@hero-design/rn 8.131.1 → 8.131.3

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @hero-design/rn
 
+## 8.131.3
+
+### Patch Changes
+
+- [#5158](https://github.com/Thinkei/hero-design/pull/5158) [`83dc767c00d8ba69eb03fbb50335b04e126ad4cd`](https://github.com/Thinkei/hero-design/commit/83dc767c00d8ba69eb03fbb50335b04e126ad4cd) Thanks [@vinhphan-eh](https://github.com/vinhphan-eh)! - Export all component Props types from the package root.
+
+## 8.131.2
+
+### Patch Changes
+
+- [#5161](https://github.com/Thinkei/hero-design/pull/5161) [`f9dd6c0a09ca33eac8455c8d03bbbf420f9b6d27`](https://github.com/Thinkei/hero-design/commit/f9dd6c0a09ca33eac8455c8d03bbbf420f9b6d27) Thanks [@ttkien](https://github.com/ttkien)! - [Tabs] Fix white space in Tab.Scroll header
+
 ## 8.131.1
 
 ### Patch Changes

package/es/index.js

@@ -1,5 +1,5 @@
 import * as reactNative from 'react-native';
-import { StyleSheet as StyleSheet$1, Platform, Dimensions, Keyboard, Animated, View, UIManager, LayoutAnimation, TouchableOpacity, Text as Text$1, Easing, useWindowDimensions, TouchableWithoutFeedback, Modal as Modal$1, Image as Image$1, Pressable, KeyboardAvoidingView, TouchableHighlight, ScrollView, FlatList, TextInput as TextInput$1, PanResponder, BackHandler, InteractionManager, SectionList, RefreshControl as RefreshControl$1 } from 'react-native';
+import { StyleSheet as StyleSheet$1, Platform, Dimensions, Keyboard, Animated, View, UIManager, LayoutAnimation, TouchableOpacity, Text as Text$1, Easing, useWindowDimensions, TouchableWithoutFeedback, Modal as Modal$1, Image as Image$1, Pressable, KeyboardAvoidingView, TouchableHighlight, ScrollView, FlatList, TextInput as TextInput$1, PanResponder, BackHandler, InteractionManager, SectionList, PixelRatio, RefreshControl as RefreshControl$1 } from 'react-native';
 import * as React from 'react';
 import React__default, { useState, useEffect, useMemo, useCallback, useRef, useLayoutEffect, createContext, forwardRef, useContext, memo, useReducer, isValidElement, useImperativeHandle } from 'react';
 import MaskedView from '@react-native-masked-view/masked-view';
@@ -28157,7 +28157,7 @@ var HeaderTabPillBody = index$c(Animated.View)(function (_ref4) {
     top: 0,
     bottom: 0,
     left: 0,
-    width: 1,
+    width: 1 / PixelRatio.get(),
     backgroundColor: theme.__hd__.tabs.colors.highlightedActiveBackground
   };
 });
@@ -28178,7 +28178,7 @@ var HeaderTabItemActiveBorder = index$c(Animated.View)(function (_ref6) {
   return {
     position: 'absolute',
     bottom: 0,
-    width: 1,
+    width: 1 / PixelRatio.get(),
     height: theme.__hd__.tabs.borderWidths.highlightedActiveBorder,
     backgroundColor: theme.__hd__.tabs.colors.highlightedActiveBorder
   };
@@ -28196,7 +28196,7 @@ var HeaderTabItemWrapper = index$c(View)(function (_ref7) {
 var HeaderTabItemIndicator = index$c(Animated.View)(function (_ref8) {
   var theme = _ref8.theme;
   return {
-    width: 1,
+    width: 1 / PixelRatio.get(),
     height: theme.__hd__.tabs.sizes.indicator,
     position: 'absolute',
     bottom: theme.__hd__.tabs.space.tabIndicatorBottom,
@@ -28277,44 +28277,17 @@ var TabWithBadge = function TabWithBadge(_ref) {
   return /*#__PURE__*/React__default.createElement(View, null, tabItem);
 };
 
-/**
- * Drives two visual layers that slide to the selected tab on every press:
- *
- *  Layer 1 — bottom border / underline  (indicatorStyle)
- *  ─────────────────────────────────────────────────────
- *  Uses the "width:1 + scaleX" trick: the element has a fixed stylesheet
- *  width of 1px and scaleX is set to the target pixel width, giving a visual
- *  width of 1 × scaleX pixels without touching any layout property.
- *  Both translateX and scaleX are transform properties → native driver.
- *  Caveat: scaleX also scales border-radius, so this layer has no border-radius.
- *
- *  Layer 2 — pill background  (pillLeftStyle / pillBodyStyle / pillRightStyle)
- *  ─────────────────────────────────────────────────────────────────────────────
- *  The pill is split into three absolutely-positioned children so that
- *  border-radius is never distorted by scale:
- *
- *    ┌──────────────────────────────────────────────────────┐
- *    │  [cap-left 8px]  [body width-1 + scaleX]  [cap-right 8px]  │
- *    └──────────────────────────────────────────────────────┘
- *
- *    cap-left  — fixed 8px wide, borderTopLeftRadius:8,  translateX = pillX
- *    body      — width:1 + scaleX trick (scaleX = tabWidth - 16),
- *                transformOrigin 'left center',
- *                translateX = pillX + 8  (via Animated.add)
- *    cap-right — fixed 8px wide, borderTopRightRadius:8,
- *                translateX = pillX + tabWidth - 8  (via Animated.add)
- *
- *  All four animated values use the native driver (translateX and scaleX are
- *  transform properties). `width` is never animated, so no JS driver needed.
- *
- *  Driver summary:
- *    indicatorX        native  translateX — slides the bottom border
- *    indicatorScaleX   native  scaleX     — stretches the bottom border
- *    pillX             native  translateX — slides all three pill pieces
- *    pillBodyScaleX    native  scaleX     — stretches the pill body
- *    pillRightOffsetX  native  translateX — positions the right cap
- *                                          (Animated.add: pillX + tabWidth - 8)
- */
+/** Centralised calculation for all animated values given a tab layout. */
+var computeValues = function computeValues(layout, pillCapWidth) {
+  var pr = PixelRatio.get();
+  return {
+    indicatorX: layout.x,
+    indicatorScaleX: layout.width * pr,
+    pillX: layout.x,
+    pillBodyScaleX: Math.max(layout.width - pillCapWidth * 2, 0) * pr,
+    pillRightOffset: Math.max(layout.width - pillCapWidth, 0)
+  };
+};
 var useIndicatorAnimation = function useIndicatorAnimation(_ref) {
   var selectedIndex = _ref.selectedIndex,
     tabsLength = _ref.tabsLength,
@@ -28323,9 +28296,6 @@ var useIndicatorAnimation = function useIndicatorAnimation(_ref) {
   var indicatorX = React__default.useRef(new Animated.Value(0)).current;
   var indicatorScaleX = React__default.useRef(new Animated.Value(1)).current;
   // Layer 2 — native driver (pill background, three-piece split).
-  // pillX: left edge of the pill (shared by all three pieces as base).
-  // pillBodyScaleX: scaleX for the body piece (tabWidth - 2 * CAP_WIDTH).
-  // pillRightOffset: additional x offset for the right cap (tabWidth - CAP_WIDTH).
   var pillX = React__default.useRef(new Animated.Value(0)).current;
   var pillBodyScaleX = React__default.useRef(new Animated.Value(1)).current;
   var pillRightOffset = React__default.useRef(new Animated.Value(0)).current;
@@ -28348,44 +28318,30 @@ var useIndicatorAnimation = function useIndicatorAnimation(_ref) {
     if (!layout) return;
     (_runningAnimRef$curre = runningAnimRef.current) === null || _runningAnimRef$curre === void 0 || _runningAnimRef$curre.stop();
     runningAnimRef.current = null;
-    // Layer 1: bottom-border element has width:1, so scaleX = pixel width.
-    var indicatorScaleXValue = layout.width;
-    // Layer 2 body: width:1 element, scaleX fills space between the two caps.
-    var bodyScaleX = Math.max(layout.width - pillCapWidth * 2, 0);
-    // Layer 2 right cap: offset from pillX to reach the right edge.
-    // Clamped to 0 so the right cap never slides left of the pill's origin
-    // when the tab is narrower than one cap width.
-    var rightOffset = Math.max(layout.width - pillCapWidth, 0);
+    var values = computeValues(layout, pillCapWidth);
     if (!animate || !initializedRef.current) {
-      // First render — snap all values immediately without animation.
-      indicatorX.setValue(layout.x);
-      indicatorScaleX.setValue(indicatorScaleXValue);
-      pillX.setValue(layout.x);
-      pillBodyScaleX.setValue(bodyScaleX);
-      pillRightOffset.setValue(rightOffset);
+      indicatorX.setValue(values.indicatorX);
+      indicatorScaleX.setValue(values.indicatorScaleX);
+      pillX.setValue(values.pillX);
+      pillBodyScaleX.setValue(values.pillBodyScaleX);
+      pillRightOffset.setValue(values.pillRightOffset);
       initializedRef.current = true;
       return;
     }
-    // All five animations run on the native driver (UI thread):
-    //   indicatorX        — slides the bottom border
-    //   indicatorScaleX   — stretches the bottom border
-    //   pillX             — slides all three pill pieces together
-    //   pillBodyScaleX    — resizes the body piece to fill between caps
-    //   pillRightOffset   — keeps the right cap at the pill's right edge
     var anim = Animated.parallel([Animated.timing(indicatorX, {
-      toValue: layout.x,
+      toValue: values.indicatorX,
       useNativeDriver: true
     }), Animated.timing(indicatorScaleX, {
-      toValue: indicatorScaleXValue,
+      toValue: values.indicatorScaleX,
       useNativeDriver: true
     }), Animated.timing(pillX, {
-      toValue: layout.x,
+      toValue: values.pillX,
       useNativeDriver: true
     }), Animated.timing(pillBodyScaleX, {
-      toValue: bodyScaleX,
+      toValue: values.pillBodyScaleX,
       useNativeDriver: true
     }), Animated.timing(pillRightOffset, {
-      toValue: rightOffset,
+      toValue: values.pillRightOffset,
       useNativeDriver: true
     })]);
     runningAnimRef.current = anim;
@@ -28400,7 +28356,6 @@ var useIndicatorAnimation = function useIndicatorAnimation(_ref) {
     if (layoutsRef.current[selectedIndex]) {
       animateTo(selectedIndex, initializedRef.current);
     } else {
-      // Layout not yet measured — store as pending and resolve in onTabLayout.
       pendingIndexRef.current = selectedIndex;
     }
   }, [selectedIndex, animateTo]);
@@ -28412,9 +28367,8 @@ var useIndicatorAnimation = function useIndicatorAnimation(_ref) {
     };
   }, []);
   var onTabLayout = React__default.useCallback(function (index, event) {
-    var _event$nativeEvent$la = event.nativeEvent.layout,
-      x = _event$nativeEvent$la.x,
-      width = _event$nativeEvent$la.width;
+    var x = PixelRatio.roundToNearestPixel(event.nativeEvent.layout.x);
+    var width = PixelRatio.roundToNearestPixel(event.nativeEvent.layout.width);
     var prev = layoutsRef.current[index];
     // Skip if layout hasn't meaningfully changed (sub-pixel tolerance).
     if (prev && Math.abs(prev.x - x) < 0.5 && Math.abs(prev.width - width) < 0.5) {
@@ -28424,23 +28378,24 @@ var useIndicatorAnimation = function useIndicatorAnimation(_ref) {
       x: x,
       width: width
     };
-    // Animate if this tab is the selected one (covers the pending case where
-    // selectedIndex was set before the layout was measured).
     if (index === selectedIndex || index === pendingIndexRef.current) {
       if (index === pendingIndexRef.current) pendingIndexRef.current = undefined;
       animateTo(index, initializedRef.current);
     }
-    // If no tab is selected yet, snap indicators to tab 0 on its first
-    // layout so they appear at a sensible default position.
+    // If no tab is selected yet, snap indicators to tab 0 on its first layout.
     if (!initializedRef.current && index === 0 && selectedIndex === undefined) {
-      indicatorScaleX.setValue(width);
-      pillX.setValue(x);
-      pillBodyScaleX.setValue(Math.max(width - pillCapWidth * 2, 0));
-      pillRightOffset.setValue(Math.max(width - pillCapWidth, 0));
+      var values = computeValues({
+        x: x,
+        width: width
+      }, pillCapWidth);
+      indicatorX.setValue(values.indicatorX);
+      indicatorScaleX.setValue(values.indicatorScaleX);
+      pillX.setValue(values.pillX);
+      pillBodyScaleX.setValue(values.pillBodyScaleX);
+      pillRightOffset.setValue(values.pillRightOffset);
       initializedRef.current = true;
     }
-  }, [animateTo, selectedIndex, pillCapWidth]);
-  // Layer 1: transformOrigin 'left center' pins scaleX expansion to left edge.
+  }, [selectedIndex, animateTo, pillCapWidth, indicatorX, indicatorScaleX, pillX, pillBodyScaleX, pillRightOffset]);
   var indicatorStyle = {
     transformOrigin: 'left center',
     transform: [{
@@ -28449,8 +28404,6 @@ var useIndicatorAnimation = function useIndicatorAnimation(_ref) {
       scaleX: indicatorScaleX
     }]
   };
-  // Layer 2: three pieces, all absolutely positioned, all native driver.
-  // Animated.add computes derived positions without creating JS-driver nodes.
   var pillLeftStyle = {
     transform: [{
       translateX: pillX

package/lib/index.js

@@ -28186,7 +28186,7 @@ var HeaderTabPillBody = index$c(reactNative.Animated.View)(function (_ref4) {
     top: 0,
     bottom: 0,
     left: 0,
-    width: 1,
+    width: 1 / reactNative.PixelRatio.get(),
     backgroundColor: theme.__hd__.tabs.colors.highlightedActiveBackground
   };
 });
@@ -28207,7 +28207,7 @@ var HeaderTabItemActiveBorder = index$c(reactNative.Animated.View)(function (_re
   return {
     position: 'absolute',
     bottom: 0,
-    width: 1,
+    width: 1 / reactNative.PixelRatio.get(),
     height: theme.__hd__.tabs.borderWidths.highlightedActiveBorder,
     backgroundColor: theme.__hd__.tabs.colors.highlightedActiveBorder
   };
@@ -28225,7 +28225,7 @@ var HeaderTabItemWrapper = index$c(reactNative.View)(function (_ref7) {
 var HeaderTabItemIndicator = index$c(reactNative.Animated.View)(function (_ref8) {
   var theme = _ref8.theme;
   return {
-    width: 1,
+    width: 1 / reactNative.PixelRatio.get(),
     height: theme.__hd__.tabs.sizes.indicator,
     position: 'absolute',
     bottom: theme.__hd__.tabs.space.tabIndicatorBottom,
@@ -28306,44 +28306,17 @@ var TabWithBadge = function TabWithBadge(_ref) {
   return /*#__PURE__*/React__namespace.default.createElement(reactNative.View, null, tabItem);
 };
 
-/**
- * Drives two visual layers that slide to the selected tab on every press:
- *
- *  Layer 1 — bottom border / underline  (indicatorStyle)
- *  ─────────────────────────────────────────────────────
- *  Uses the "width:1 + scaleX" trick: the element has a fixed stylesheet
- *  width of 1px and scaleX is set to the target pixel width, giving a visual
- *  width of 1 × scaleX pixels without touching any layout property.
- *  Both translateX and scaleX are transform properties → native driver.
- *  Caveat: scaleX also scales border-radius, so this layer has no border-radius.
- *
- *  Layer 2 — pill background  (pillLeftStyle / pillBodyStyle / pillRightStyle)
- *  ─────────────────────────────────────────────────────────────────────────────
- *  The pill is split into three absolutely-positioned children so that
- *  border-radius is never distorted by scale:
- *
- *    ┌──────────────────────────────────────────────────────┐
- *    │  [cap-left 8px]  [body width-1 + scaleX]  [cap-right 8px]  │
- *    └──────────────────────────────────────────────────────┘
- *
- *    cap-left  — fixed 8px wide, borderTopLeftRadius:8,  translateX = pillX
- *    body      — width:1 + scaleX trick (scaleX = tabWidth - 16),
- *                transformOrigin 'left center',
- *                translateX = pillX + 8  (via Animated.add)
- *    cap-right — fixed 8px wide, borderTopRightRadius:8,
- *                translateX = pillX + tabWidth - 8  (via Animated.add)
- *
- *  All four animated values use the native driver (translateX and scaleX are
- *  transform properties). `width` is never animated, so no JS driver needed.
- *
- *  Driver summary:
- *    indicatorX        native  translateX — slides the bottom border
- *    indicatorScaleX   native  scaleX     — stretches the bottom border
- *    pillX             native  translateX — slides all three pill pieces
- *    pillBodyScaleX    native  scaleX     — stretches the pill body
- *    pillRightOffsetX  native  translateX — positions the right cap
- *                                          (Animated.add: pillX + tabWidth - 8)
- */
+/** Centralised calculation for all animated values given a tab layout. */
+var computeValues = function computeValues(layout, pillCapWidth) {
+  var pr = reactNative.PixelRatio.get();
+  return {
+    indicatorX: layout.x,
+    indicatorScaleX: layout.width * pr,
+    pillX: layout.x,
+    pillBodyScaleX: Math.max(layout.width - pillCapWidth * 2, 0) * pr,
+    pillRightOffset: Math.max(layout.width - pillCapWidth, 0)
+  };
+};
 var useIndicatorAnimation = function useIndicatorAnimation(_ref) {
   var selectedIndex = _ref.selectedIndex,
     tabsLength = _ref.tabsLength,
@@ -28352,9 +28325,6 @@ var useIndicatorAnimation = function useIndicatorAnimation(_ref) {
   var indicatorX = React__namespace.default.useRef(new reactNative.Animated.Value(0)).current;
   var indicatorScaleX = React__namespace.default.useRef(new reactNative.Animated.Value(1)).current;
   // Layer 2 — native driver (pill background, three-piece split).
-  // pillX: left edge of the pill (shared by all three pieces as base).
-  // pillBodyScaleX: scaleX for the body piece (tabWidth - 2 * CAP_WIDTH).
-  // pillRightOffset: additional x offset for the right cap (tabWidth - CAP_WIDTH).
   var pillX = React__namespace.default.useRef(new reactNative.Animated.Value(0)).current;
   var pillBodyScaleX = React__namespace.default.useRef(new reactNative.Animated.Value(1)).current;
   var pillRightOffset = React__namespace.default.useRef(new reactNative.Animated.Value(0)).current;
@@ -28377,44 +28347,30 @@ var useIndicatorAnimation = function useIndicatorAnimation(_ref) {
     if (!layout) return;
     (_runningAnimRef$curre = runningAnimRef.current) === null || _runningAnimRef$curre === void 0 || _runningAnimRef$curre.stop();
     runningAnimRef.current = null;
-    // Layer 1: bottom-border element has width:1, so scaleX = pixel width.
-    var indicatorScaleXValue = layout.width;
-    // Layer 2 body: width:1 element, scaleX fills space between the two caps.
-    var bodyScaleX = Math.max(layout.width - pillCapWidth * 2, 0);
-    // Layer 2 right cap: offset from pillX to reach the right edge.
-    // Clamped to 0 so the right cap never slides left of the pill's origin
-    // when the tab is narrower than one cap width.
-    var rightOffset = Math.max(layout.width - pillCapWidth, 0);
+    var values = computeValues(layout, pillCapWidth);
     if (!animate || !initializedRef.current) {
-      // First render — snap all values immediately without animation.
-      indicatorX.setValue(layout.x);
-      indicatorScaleX.setValue(indicatorScaleXValue);
-      pillX.setValue(layout.x);
-      pillBodyScaleX.setValue(bodyScaleX);
-      pillRightOffset.setValue(rightOffset);
+      indicatorX.setValue(values.indicatorX);
+      indicatorScaleX.setValue(values.indicatorScaleX);
+      pillX.setValue(values.pillX);
+      pillBodyScaleX.setValue(values.pillBodyScaleX);
+      pillRightOffset.setValue(values.pillRightOffset);
       initializedRef.current = true;
       return;
     }
-    // All five animations run on the native driver (UI thread):
-    //   indicatorX        — slides the bottom border
-    //   indicatorScaleX   — stretches the bottom border
-    //   pillX             — slides all three pill pieces together
-    //   pillBodyScaleX    — resizes the body piece to fill between caps
-    //   pillRightOffset   — keeps the right cap at the pill's right edge
     var anim = reactNative.Animated.parallel([reactNative.Animated.timing(indicatorX, {
-      toValue: layout.x,
+      toValue: values.indicatorX,
       useNativeDriver: true
     }), reactNative.Animated.timing(indicatorScaleX, {
-      toValue: indicatorScaleXValue,
+      toValue: values.indicatorScaleX,
       useNativeDriver: true
     }), reactNative.Animated.timing(pillX, {
-      toValue: layout.x,
+      toValue: values.pillX,
       useNativeDriver: true
     }), reactNative.Animated.timing(pillBodyScaleX, {
-      toValue: bodyScaleX,
+      toValue: values.pillBodyScaleX,
       useNativeDriver: true
     }), reactNative.Animated.timing(pillRightOffset, {
-      toValue: rightOffset,
+      toValue: values.pillRightOffset,
       useNativeDriver: true
     })]);
     runningAnimRef.current = anim;
@@ -28429,7 +28385,6 @@ var useIndicatorAnimation = function useIndicatorAnimation(_ref) {
     if (layoutsRef.current[selectedIndex]) {
       animateTo(selectedIndex, initializedRef.current);
     } else {
-      // Layout not yet measured — store as pending and resolve in onTabLayout.
       pendingIndexRef.current = selectedIndex;
     }
   }, [selectedIndex, animateTo]);
@@ -28441,9 +28396,8 @@ var useIndicatorAnimation = function useIndicatorAnimation(_ref) {
     };
   }, []);
   var onTabLayout = React__namespace.default.useCallback(function (index, event) {
-    var _event$nativeEvent$la = event.nativeEvent.layout,
-      x = _event$nativeEvent$la.x,
-      width = _event$nativeEvent$la.width;
+    var x = reactNative.PixelRatio.roundToNearestPixel(event.nativeEvent.layout.x);
+    var width = reactNative.PixelRatio.roundToNearestPixel(event.nativeEvent.layout.width);
     var prev = layoutsRef.current[index];
     // Skip if layout hasn't meaningfully changed (sub-pixel tolerance).
     if (prev && Math.abs(prev.x - x) < 0.5 && Math.abs(prev.width - width) < 0.5) {
@@ -28453,23 +28407,24 @@ var useIndicatorAnimation = function useIndicatorAnimation(_ref) {
       x: x,
       width: width
     };
-    // Animate if this tab is the selected one (covers the pending case where
-    // selectedIndex was set before the layout was measured).
     if (index === selectedIndex || index === pendingIndexRef.current) {
       if (index === pendingIndexRef.current) pendingIndexRef.current = undefined;
       animateTo(index, initializedRef.current);
     }
-    // If no tab is selected yet, snap indicators to tab 0 on its first
-    // layout so they appear at a sensible default position.
+    // If no tab is selected yet, snap indicators to tab 0 on its first layout.
     if (!initializedRef.current && index === 0 && selectedIndex === undefined) {
-      indicatorScaleX.setValue(width);
-      pillX.setValue(x);
-      pillBodyScaleX.setValue(Math.max(width - pillCapWidth * 2, 0));
-      pillRightOffset.setValue(Math.max(width - pillCapWidth, 0));
+      var values = computeValues({
+        x: x,
+        width: width
+      }, pillCapWidth);
+      indicatorX.setValue(values.indicatorX);
+      indicatorScaleX.setValue(values.indicatorScaleX);
+      pillX.setValue(values.pillX);
+      pillBodyScaleX.setValue(values.pillBodyScaleX);
+      pillRightOffset.setValue(values.pillRightOffset);
       initializedRef.current = true;
     }
-  }, [animateTo, selectedIndex, pillCapWidth]);
-  // Layer 1: transformOrigin 'left center' pins scaleX expansion to left edge.
+  }, [selectedIndex, animateTo, pillCapWidth, indicatorX, indicatorScaleX, pillX, pillBodyScaleX, pillRightOffset]);
   var indicatorStyle = {
     transformOrigin: 'left center',
     transform: [{
@@ -28478,8 +28433,6 @@ var useIndicatorAnimation = function useIndicatorAnimation(_ref) {
       scaleX: indicatorScaleX
     }]
   };
-  // Layer 2: three pieces, all absolutely positioned, all native driver.
-  // Animated.add computes derived positions without creating JS-driver nodes.
   var pillLeftStyle = {
     transform: [{
       translateX: pillX

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hero-design/rn",
-  "version": "8.131.1",
+  "version": "8.131.3",
   "license": "MIT",
   "main": "lib/index.js",
   "module": "es/index.js",

package/src/components/Alert/index.tsx

@@ -92,7 +92,7 @@ interface BasicAlertProps {
   actionLabel?: string;
 }
 
-type AlertProps =
+export type AlertProps =
   | (BasicAlertProps & {
       actionLabel?: undefined;
     })

package/src/components/AppCue/index.tsx

@@ -18,7 +18,7 @@ import Icon from '../Icon';
 import { useTheme } from '../../theme';
 import { calculatePosition, calulateContentMaxWidth } from './utils';
 
-interface AppCueProps {
+export interface AppCueProps {
   /*
    * The content of the App Cue.
    */

package/src/components/Attachment/index.tsx

@@ -12,7 +12,7 @@ import Icon from '../Icon';
 import Typography from '../Typography';
 import type { ImageProps } from '../Image';
 
-interface AttachmentProps {
+export interface AttachmentProps {
   /**
    * Attachment filename.
    */

package/src/components/BottomNavigation/index.tsx

@@ -36,7 +36,7 @@ export type BottomNavigationTabType = {
     testID?: string;
   };
 };
-interface BottomNavigationProps extends ViewProps {
+export interface BottomNavigationProps extends ViewProps {
   /**
    * Callback which is called on tab press, receiving key of upcoming active Tab.
    */

package/src/components/Carousel/index.tsx

@@ -22,7 +22,7 @@ import {
 } from './StyledCarousel';
 import type { CarouselData } from './types';
 
-interface CarouselProps extends ViewProps {
+export interface CarouselProps extends ViewProps {
   /**
    * Additional style.
    */

package/src/components/Chip/index.tsx

@@ -14,7 +14,7 @@ type DeprecatedVariant = 'outlined' | 'filled';
 
 type ValidVariant = 'selection' | 'filter' | 'compact' | 'compact-outlined';
 
-interface ChipProps extends ViewProps {
+export interface ChipProps extends ViewProps {
   /**
    * The label of the chip.
    */

package/src/components/ContentNavigator/index.tsx

@@ -6,7 +6,7 @@ import Button from '../Button';
 import Typography from '../Typography';
 import { useTheme } from '../../theme';
 
-interface ContentNavigatorProps {
+export interface ContentNavigatorProps {
   /**
    * The navigator's content value.
    */

package/src/components/Divider/index.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import type { StyleProp, ViewStyle, ViewProps } from 'react-native';
 import { StyledDivider } from './StyledDivider';
 
-interface DividerProps extends ViewProps {
+export interface DividerProps extends ViewProps {
   /**
    * Horizontal margin size. There is no margin by default.
    */

package/src/components/Drawer/index.tsx

@@ -12,7 +12,7 @@ import {
 
 const BACKDROP_OPACITY = 0.56;
 
-interface DrawerProps {
+export interface DrawerProps {
   /**
    * Drawer's visibility.
    */

package/src/components/FloatingIsland/index.tsx

@@ -9,7 +9,7 @@ import {
 } from './StyledFloatingIsland';
 import type { IconName } from '../Icon';
 
-interface FloatingIslandProps extends TouchableOpacityProps {
+export interface FloatingIslandProps extends TouchableOpacityProps {
   /**
    * Callback that is called when the floating island is pressed.
    */

package/src/components/HeroDesignProvider/index.tsx

@@ -7,7 +7,7 @@ import LocaleProvider from '../LocaleProvider';
 import type { LocaleValues } from '../../locales/types';
 import enAULocale from '../../locales/en_AU';
 
-interface HeroDesignProviderProps extends ThemeProviderProps {
+export interface HeroDesignProviderProps extends ThemeProviderProps {
   locale?: LocaleValues;
 }
 

package/src/components/Icon/index.tsx

@@ -12,8 +12,6 @@ export type IconName = typeof IconList[number];
 export interface IconProps extends AccessibilityProps {
   /**
    * Name of the Icon.
-   *
-   * icon['carat-*'] - @deprecated Icons starting with 'carat' are deprecated and will be removed in the next major release, please use 'caret' instead.
    */
   icon: IconName;
   /**

package/src/components/LocaleProvider/index.tsx

@@ -4,7 +4,7 @@ import { LocaleContext } from './context';
 import { getDateFnsLocale } from './utils';
 import type { LocaleValues } from '../../locales/types';
 
-interface LocaleProviderProps {
+export interface LocaleProviderProps {
   locale: LocaleValues;
 }
 

package/src/components/PinInput/index.tsx

@@ -22,7 +22,7 @@ import {
 } from './StyledPinInput';
 import type { State } from './StyledPinInput';
 
-interface PinInputProps {
+export interface PinInputProps {
   /**
    * The value to show for the input.
    */

package/src/components/Rate/index.tsx

@@ -8,7 +8,7 @@ interface RateOption<T extends string | number> {
   value: T;
 }
 
-interface RateProps<T extends string | number> extends ViewProps {
+export interface RateProps<T extends string | number> extends ViewProps {
   /**
    * Options for rate component.
    */

package/src/components/RefreshControl/index.tsx

@@ -3,7 +3,7 @@ import type { RefreshControlProps as NativeRefreshControlProps } from 'react-nat
 import { RefreshControl as NativeRefreshControl } from 'react-native';
 import { useTheme } from '../../theme';
 
-type RefreshControlProps = Omit<
+export type RefreshControlProps = Omit<
   NativeRefreshControlProps,
   'colors' | 'tintColor'
 >;

package/src/components/SectionHeading/index.tsx

@@ -11,7 +11,7 @@ import {
 import type { IconName, IconProps } from '../Icon';
 import { useDeprecation } from '../../utils/hooks';
 
-interface SectionHeadingProps extends ViewProps {
+export interface SectionHeadingProps extends ViewProps {
   /**
    * Heading text.
    */

package/src/components/Skeleton/index.tsx

@@ -12,7 +12,7 @@ import type { Theme } from '../../theme';
 import { useTheme } from '../../theme';
 import { StyledContainer, StyledGradientContainer } from './StyledSkeleton';
 
-interface SkeletonProps extends ViewProps {
+export interface SkeletonProps extends ViewProps {
   /**
    * Intent of the component.
    */