@hero-design/rn 8.41.2 → 8.41.3-alpha-0

package/.turbo/turbo-build.log

@@ -3,6 +3,6 @@ $ rollup -c
 
 src/index.ts → lib/index.js, es/index.js...
 (!) Plugin replace: @rollup/plugin-replace: 'preventAssignment' currently defaults to false. It is recommended to set this option to `true`, as the next major version will default this option to `true`.
-(!) Plugin node-resolve: preferring built-in module 'events' over local alternative at '/root/hero-design/node_modules/events/events.js', pass 'preferBuiltins: false' to disable this behavior or 'preferBuiltins: true' to disable this warning
-created lib/index.js, es/index.js in 28s
+(!) Plugin node-resolve: preferring built-in module 'events' over local alternative at '/Volumes/Data/Projects/hero-design/node_modules/events/events.js', pass 'preferBuiltins: false' to disable this behavior or 'preferBuiltins: true' to disable this warning
+created lib/index.js, es/index.js in 29.2s
 $ tsc --noEmit false --emitDeclarationOnly --project tsconfig.prod.json

package/.turbo/turbo-build:types.log

@@ -0,0 +1 @@
+$ tsc --noEmit false --emitDeclarationOnly --project tsconfig.prod.json

package/.turbo/turbo-lint.log

@@ -0,0 +1,172 @@
+$ eslint src --ext .js,.jsx,.ts,.tsx --ignore-path ../../.gitignore
+
+/Volumes/Data/Projects/hero-design/packages/rn/src/components/BottomSheet/ScrollView.tsx
+  25:5  warning  React Hook useCallback has missing dependencies: 'props' and 'setInternalShowDivider'. Either include them or remove the dependency array. However, 'props' will change when *any* prop changes, so the preferred fix is to destructure the 'props' object outside of the useCallback call and refer to those specific props inside useCallback  react-hooks/exhaustive-deps
+  34:5  warning  React Hook useCallback has missing dependencies: 'props' and 'setInternalShowDivider'. Either include them or remove the dependency array. However, 'props' will change when *any* prop changes, so the preferred fix is to destructure the 'props' object outside of the useCallback call and refer to those specific props inside useCallback  react-hooks/exhaustive-deps
+  43:5  warning  React Hook useCallback has missing dependencies: 'props' and 'setInternalShowDivider'. Either include them or remove the dependency array. However, 'props' will change when *any* prop changes, so the preferred fix is to destructure the 'props' object outside of the useCallback call and refer to those specific props inside useCallback  react-hooks/exhaustive-deps
+
+/Volumes/Data/Projects/hero-design/packages/rn/src/components/BottomSheet/index.tsx
+  123:32  warning  The ref value 'animatedValue.current' will likely have changed by the time this effect cleanup function runs. If this ref points to a node rendered by React, copy 'animatedValue.current' to a variable inside the effect, and use that variable in the cleanup function  react-hooks/exhaustive-deps
+  124:6   warning  React Hook useEffect has missing dependencies: 'onDismiss' and 'visible'. Either include them or remove the dependency array. If 'onDismiss' changes too often, find the parent component that defines it and wrap that definition in useCallback                          react-hooks/exhaustive-deps
+  137:6   warning  React Hook useEffect has a missing dependency: 'onAnimationEnd'. Either include it or remove the dependency array                                                                                                                                                          react-hooks/exhaustive-deps
+
+/Volumes/Data/Projects/hero-design/packages/rn/src/components/Button/LoadingIndicator/index.tsx
+  118:36  warning  Unexpected any. Specify a different type  @typescript-eslint/no-explicit-any
+
+/Volumes/Data/Projects/hero-design/packages/rn/src/components/Carousel/CardCarousel.tsx
+  109:7  warning  React Hook useCallback has missing dependencies: 'items.length' and 'viewPosition'. Either include them or remove the dependency array  react-hooks/exhaustive-deps
+  125:8  warning  React Hook useCallback has a missing dependency: 'viewPosition'. Either include it or remove the dependency array                       react-hooks/exhaustive-deps
+
+/Volumes/Data/Projects/hero-design/packages/rn/src/components/Carousel/__tests__/CardCarousel.spec.tsx
+   52:29  warning  Forbidden non-null assertion  @typescript-eslint/no-non-null-assertion
+   52:29  warning  Forbidden non-null assertion  @typescript-eslint/no-non-null-assertion
+   98:29  warning  Forbidden non-null assertion  @typescript-eslint/no-non-null-assertion
+   98:29  warning  Forbidden non-null assertion  @typescript-eslint/no-non-null-assertion
+  153:29  warning  Forbidden non-null assertion  @typescript-eslint/no-non-null-assertion
+  153:29  warning  Forbidden non-null assertion  @typescript-eslint/no-non-null-assertion
+  199:29  warning  Forbidden non-null assertion  @typescript-eslint/no-non-null-assertion
+  199:29  warning  Forbidden non-null assertion  @typescript-eslint/no-non-null-assertion
+
+/Volumes/Data/Projects/hero-design/packages/rn/src/components/Carousel/index.tsx
+  130:6  warning  React Hook useEffect has missing dependencies: 'scrollX' and 'width'. Either include them or remove the dependency array  react-hooks/exhaustive-deps
+
+/Volumes/Data/Projects/hero-design/packages/rn/src/components/Collapse/index.tsx
+  63:6  warning  React Hook useEffect has a missing dependency: 'componentMounted'. Either include it or remove the dependency array                                                                                                                react-hooks/exhaustive-deps
+  73:6  warning  React Hook useCallback has a missing dependency: 'onLayout'. Either include it or remove the dependency array. If 'onLayout' changes too often, find the parent component that defines it and wrap that definition in useCallback  react-hooks/exhaustive-deps
+
+/Volumes/Data/Projects/hero-design/packages/rn/src/components/DatePicker/DatePickerAndroid.tsx
+  56:25  warning  Unexpected any. Specify a different type  @typescript-eslint/no-explicit-any
+
+/Volumes/Data/Projects/hero-design/packages/rn/src/components/DatePicker/DatePickerIOS.tsx
+  96:27  warning  Unexpected any. Specify a different type  @typescript-eslint/no-explicit-any
+
+/Volumes/Data/Projects/hero-design/packages/rn/src/components/Drawer/DragableDrawer/index.tsx
+   78:6  warning  React Hook useEffect has a missing dependency: 'pan'. Either include it or remove the dependency array                                                                                                                                                                                                react-hooks/exhaustive-deps
+   88:6  warning  React Hook useEffect has missing dependencies: 'initialHeightPercentage' and 'minimumHeightPercentage'. Either include them or remove the dependency array                                                                                                                                            react-hooks/exhaustive-deps
+  104:6  warning  React Hook useEffect has missing dependencies: 'pan' and 'snapPoints'. Either include them or remove the dependency array                                                                                                                                                                             react-hooks/exhaustive-deps
+  127:6  warning  React Hook useEffect has missing dependencies: 'height', 'minimumHeightPercentage', 'onCollapsed', 'onExpanded', and 'pan'. Either include them or remove the dependency array. If 'onExpanded' changes too often, find the parent component that defines it and wrap that definition in useCallback  react-hooks/exhaustive-deps
+
+/Volumes/Data/Projects/hero-design/packages/rn/src/components/Drawer/index.tsx
+  69:6  warning  React Hook useEffect has a missing dependency: 'animatedValue'. Either include it or remove the dependency array  react-hooks/exhaustive-deps
+
+/Volumes/Data/Projects/hero-design/packages/rn/src/components/FAB/__tests__/index.spec.tsx
+  79:7  warning  Forbidden non-null assertion  @typescript-eslint/no-non-null-assertion
+  82:7  warning  Forbidden non-null assertion  @typescript-eslint/no-non-null-assertion
+  85:7  warning  Forbidden non-null assertion  @typescript-eslint/no-non-null-assertion
+
+/Volumes/Data/Projects/hero-design/packages/rn/src/components/Icon/utils.ts
+  3:24  warning  Unexpected any. Specify a different type  @typescript-eslint/no-explicit-any
+
+/Volumes/Data/Projects/hero-design/packages/rn/src/components/Modal/index.tsx
+  102:6  warning  React Hook React.useEffect has missing dependencies: 'animationType', 'modalHandler', 'onShow', and 'visible'. Either include them or remove the dependency array. If 'onShow' changes too often, find the parent component that defines it and wrap that definition in useCallback  react-hooks/exhaustive-deps
+
+/Volumes/Data/Projects/hero-design/packages/rn/src/components/PageControl/index.tsx
+  39:6  warning  React Hook React.useEffect has a missing dependency: 'animatedValue'. Either include it or remove the dependency array  react-hooks/exhaustive-deps
+
+/Volumes/Data/Projects/hero-design/packages/rn/src/components/PinInput/index.tsx
+  146:8  warning  React Hook useEffect has missing dependencies: 'autoFocus' and 'focus'. Either include them or remove the dependency array  react-hooks/exhaustive-deps
+
+/Volumes/Data/Projects/hero-design/packages/rn/src/components/Portal/PortalHost.tsx
+  18:6  warning  React Hook useEffect has missing dependencies: 'deregisterHost' and 'registerHost'. Either include them or remove the dependency array  react-hooks/exhaustive-deps
+
+/Volumes/Data/Projects/hero-design/packages/rn/src/components/Portal/__tests__/PortalHost.spec.tsx
+  16:26  warning  Forbidden non-null assertion  @typescript-eslint/no-non-null-assertion
+
+/Volumes/Data/Projects/hero-design/packages/rn/src/components/Portal/__tests__/PortalProvider.spec.tsx
+  10:26  warning  Forbidden non-null assertion  @typescript-eslint/no-non-null-assertion
+
+/Volumes/Data/Projects/hero-design/packages/rn/src/components/Portal/index.tsx
+  27:6  warning  React Hook useLayoutEffect has missing dependencies: 'children', 'nameOrRandom', and 'removePortal'. Either include them or remove the dependency array  react-hooks/exhaustive-deps
+  31:6  warning  React Hook useLayoutEffect has missing dependencies: 'addUpdatePortal' and 'nameOrRandom'. Either include them or remove the dependency array            react-hooks/exhaustive-deps
+
+/Volumes/Data/Projects/hero-design/packages/rn/src/components/Portal/usePortal.ts
+  17:6  warning  React Hook useCallback has missing dependencies: 'dispatch' and 'hostName'. Either include them or remove the dependency array  react-hooks/exhaustive-deps
+  24:6  warning  React Hook useCallback has missing dependencies: 'dispatch' and 'hostName'. Either include them or remove the dependency array  react-hooks/exhaustive-deps
+  33:6  warning  React Hook useCallback has missing dependencies: 'dispatch' and 'hostName'. Either include them or remove the dependency array  react-hooks/exhaustive-deps
+  41:6  warning  React Hook useCallback has missing dependencies: 'dispatch' and 'hostName'. Either include them or remove the dependency array  react-hooks/exhaustive-deps
+
+/Volumes/Data/Projects/hero-design/packages/rn/src/components/RichTextEditor/EditorToolbar.tsx
+  147:6  warning  React Hook useEffect has a missing dependency: 'normalizeEventName'. Either include it or remove the dependency array                            react-hooks/exhaustive-deps
+  208:5  warning  React Hook useMemo has missing dependencies: 'normalizeEventName' and 'toggleToolbarButton'. Either include them or remove the dependency array  react-hooks/exhaustive-deps
+
+/Volumes/Data/Projects/hero-design/packages/rn/src/components/RichTextEditor/MentionList.tsx
+  63:6  warning  React Hook useEffect has a missing dependency: 'normalizeEventName'. Either include it or remove the dependency array  react-hooks/exhaustive-deps
+
+/Volumes/Data/Projects/hero-design/packages/rn/src/components/RichTextEditor/RichTextEditor.tsx
+   50:13  warning  Unexpected any. Specify a different type                                                                                                                                                                                                                                                                          @typescript-eslint/no-explicit-any
+  145:6   warning  React Hook useMemo has an unnecessary dependency: 'isFocused'. Either exclude it or remove the dependency array                                                                                                                                                                                                   react-hooks/exhaustive-deps
+  171:6   warning  React Hook useEffect has a missing dependency: 'normalizeEventName'. Either include it or remove the dependency array                                                                                                                                                                                             react-hooks/exhaustive-deps
+  207:6   warning  React Hook useMemo has missing dependencies: 'autoFocus', 'placeholder', 'theme.__hd__.richTextEditor.colors.text', 'theme.__hd__.richTextEditor.fontSizes.editor', and 'value'. Either include them or remove the dependency array                                                                               react-hooks/exhaustive-deps
+  243:6   warning  React Hook useEffect has a missing dependency: 'normalizeEventName'. Either include it or remove the dependency array                                                                                                                                                                                             react-hooks/exhaustive-deps
+  245:61  warning  Unexpected any. Specify a different type                                                                                                                                                                                                                                                                          @typescript-eslint/no-explicit-any
+  305:5   warning  React Hook useCallback has missing dependencies: 'handleEditorLayoutEvent', 'normalizeEventName', 'onChange', and 'onCursorChange'. Either include them or remove the dependency array. If 'onCursorChange' changes too often, find the parent component that defines it and wrap that definition in useCallback  react-hooks/exhaustive-deps
+
+/Volumes/Data/Projects/hero-design/packages/rn/src/components/RichTextEditor/__tests__/MentionList.spec.tsx
+  93:20  warning  Unexpected any. Specify a different type  @typescript-eslint/no-explicit-any
+
+/Volumes/Data/Projects/hero-design/packages/rn/src/components/RichTextEditor/hero-editor.d.ts
+  7:43  warning  Unexpected any. Specify a different type  @typescript-eslint/no-explicit-any
+
+/Volumes/Data/Projects/hero-design/packages/rn/src/components/RichTextEditor/utils/rnWebView.ts
+  11:9  warning  Unexpected any. Specify a different type  @typescript-eslint/no-explicit-any
+
+/Volumes/Data/Projects/hero-design/packages/rn/src/components/Skeleton/index.tsx
+   88:6  warning  React Hook useEffect has a missing dependency: 'animatedValue'. Either include it or remove the dependency array                                                                                                                                                react-hooks/exhaustive-deps
+  104:6  warning  React Hook useCallback has missing dependencies: 'onLayout' and 'shouldStartAnimation'. Either include them or remove the dependency array. If 'onLayout' changes too often, find the parent component that defines it and wrap that definition in useCallback  react-hooks/exhaustive-deps
+
+/Volumes/Data/Projects/hero-design/packages/rn/src/components/Switch/SelectorSwitch/Option.tsx
+  63:6  warning  React Hook useEffect has a missing dependency: 'animatedValue'. Either include it or remove the dependency array  react-hooks/exhaustive-deps
+
+/Volumes/Data/Projects/hero-design/packages/rn/src/components/Switch/index.tsx
+  71:6  warning  React Hook useEffect has missing dependencies: 'animatedOffset' and 'offset'. Either include them or remove the dependency array  react-hooks/exhaustive-deps
+
+/Volumes/Data/Projects/hero-design/packages/rn/src/components/Tabs/ScrollableTabsHeader.tsx
+  131:6  warning  React Hook React.useEffect has missing dependencies: 'tabs' and 'tabsAnims'. Either include them or remove the dependency array  react-hooks/exhaustive-deps
+
+/Volumes/Data/Projects/hero-design/packages/rn/src/components/TextInput/__tests__/index.spec.tsx
+  465:34  warning  Forbidden non-null assertion  @typescript-eslint/no-non-null-assertion
+
+/Volumes/Data/Projects/hero-design/packages/rn/src/components/TimePicker/TimePickerAndroid.tsx
+  51:25  warning  Unexpected any. Specify a different type  @typescript-eslint/no-explicit-any
+
+/Volumes/Data/Projects/hero-design/packages/rn/src/components/TimePicker/TimePickerIOS.tsx
+  76:27  warning  Unexpected any. Specify a different type  @typescript-eslint/no-explicit-any
+
+/Volumes/Data/Projects/hero-design/packages/rn/src/components/Toast/Toast.tsx
+  70:6  warning  React Hook useEffect has missing dependencies: 'autoDismiss', 'duration', and 'onDismiss'. Either include them or remove the dependency array. If 'onDismiss' changes too often, find the parent component that defines it and wrap that definition in useCallback  react-hooks/exhaustive-deps
+  81:6  warning  React Hook useEffect has a missing dependency: 'animatedValue'. Either include it or remove the dependency array                                                                                                                                                    react-hooks/exhaustive-deps
+
+/Volumes/Data/Projects/hero-design/packages/rn/src/components/Toast/__tests__/index.spec.tsx
+  19:10  warning  React Hook useEffect has a missing dependency: 'toast'. Either include it or remove the dependency array  react-hooks/exhaustive-deps
+  82:10  warning  React Hook useEffect has a missing dependency: 'toast'. Either include it or remove the dependency array  react-hooks/exhaustive-deps
+
+/Volumes/Data/Projects/hero-design/packages/rn/src/theme/components/progress.ts
+  1:10  warning  Importing "mixColor" from "@hero-design/colors" is not recommended. Please use colors from useTheme hook instead  @hero-design/not-recommended-import
+
+/Volumes/Data/Projects/hero-design/packages/rn/src/theme/global/colors/eBens.ts
+  1:10  warning  Importing "eBensPalette" from "@hero-design/colors" is not recommended. Please use colors from useTheme hook instead  @hero-design/not-recommended-import
+
+/Volumes/Data/Projects/hero-design/packages/rn/src/theme/global/colors/global.ts
+  1:10  warning  Importing "defaultMobilePalette" from "@hero-design/colors" is not recommended. Please use colors from useTheme hook instead  @hero-design/not-recommended-import
+
+/Volumes/Data/Projects/hero-design/packages/rn/src/theme/global/colors/jobs.ts
+  1:10  warning  Importing "jobsPalette" from "@hero-design/colors" is not recommended. Please use colors from useTheme hook instead  @hero-design/not-recommended-import
+
+/Volumes/Data/Projects/hero-design/packages/rn/src/theme/global/colors/swag.ts
+  1:10  warning  Importing "swagPalette" from "@hero-design/colors" is not recommended. Please use colors from useTheme hook instead  @hero-design/not-recommended-import
+
+/Volumes/Data/Projects/hero-design/packages/rn/src/theme/global/colors/wallet.ts
+  1:10  warning  Importing "walletPalette" from "@hero-design/colors" is not recommended. Please use colors from useTheme hook instead  @hero-design/not-recommended-import
+
+/Volumes/Data/Projects/hero-design/packages/rn/src/theme/global/colors/work.ts
+  1:10  warning  Importing "workPalette" from "@hero-design/colors" is not recommended. Please use colors from useTheme hook instead  @hero-design/not-recommended-import
+
+/Volumes/Data/Projects/hero-design/packages/rn/src/utils/__tests__/helpers.spec.ts
+  15:18  warning  Unexpected any. Specify a different type  @typescript-eslint/no-explicit-any
+  37:18  warning  Unexpected any. Specify a different type  @typescript-eslint/no-explicit-any
+
+/Volumes/Data/Projects/hero-design/packages/rn/src/utils/hooks.ts
+  26:7  warning  Unexpected console statement  no-console
+
+✖ 78 problems (0 errors, 78 warnings)
+

package/.turbo/turbo-publish:npm.log

@@ -0,0 +1,9 @@
+@hero-design/rn:publish:npm: cache hit, replaying output 507c34f3e0a508f6
+@hero-design/rn:publish:npm: $ yarn publish --access public
+@hero-design/rn:publish:npm: [1/4] Bumping version...
+@hero-design/rn:publish:npm: info Current version: 8.12.0-rc.0
+@hero-design/rn:publish:npm: [2/4] Logging in...
+@hero-design/rn:publish:npm: [3/4] Publishing...
+@hero-design/rn:publish:npm: success Published.
+@hero-design/rn:publish:npm: [4/4] Revoking token...
+@hero-design/rn:publish:npm: info Not revoking login token, specified via config file.

package/.turbo/turbo-test.log

@@ -0,0 +1 @@
+$ jest --runInBand

package/.turbo/turbo-type-check.log

@@ -0,0 +1 @@
+$ tsc --noEmit

package/es/index.js

@@ -1029,7 +1029,6 @@ var palette$b = {
   grotesqueGreen: grotesqueGreen.base,
   grotesqueGreenDark30: grotesqueGreen.darken30,
   grotesqueGreenDark45: grotesqueGreen.darken45,
-  grotesqueGreenLight30: grotesqueGreen.lighten30,
   grotesqueGreenLight60: grotesqueGreen.lighten60,
   grotesqueGreenLight75: grotesqueGreen.lighten75,
   grotesqueGreenLight90: grotesqueGreen.lighten90,
@@ -1051,8 +1050,6 @@ var palette$b = {
   pinkLight90: pink$1.lighten90,
   purple: purple$1.base,
   purpleDark15: purple$1.darken15,
-  purpleDark30: purple$1.darken30,
-  purpleLight30: purple$1.lighten30,
   red: vermilion$2.base,
   redDark15: vermilion$2.darken15,
   redDark30: vermilion$2.darken30,
@@ -1063,7 +1060,6 @@ var palette$b = {
   redLight75: vermilion$2.lighten75,
   redLight90: vermilion$2.lighten90,
   smalt: smalt.base,
-  smaltDark30: smalt.darken30,
   smaltDark75: smalt.darken75,
   smaltLight30: smalt.lighten30,
   smaltLight45: smalt.lighten45,
@@ -1081,9 +1077,7 @@ var palette$b = {
   violetLight90: violet$1.lighten90,
   yellow: yellow$1.base,
   yellowDark15: yellow$1.darken15,
-  yellowDark30: yellow$1.darken30,
   yellowDark75: yellow$1.darken75,
-  yellowLight30: yellow$1.lighten30,
   yellowLight45: yellow$1.lighten45,
   yellowLight60: yellow$1.lighten60,
   yellowLight75: yellow$1.lighten75,
@@ -11937,21 +11931,14 @@ var Carousel = function Carousel(_ref) {
       clearTimeout(handle);
     };
   }, [currentSlideIndex, carouselRef]);
-  var handleMomentumScrollEnd = function handleMomentumScrollEnd(event) {
-    // Calculate the current index based on the scroll position and container width
-    var containerWidth = event.nativeEvent.layoutMeasurement.width;
-    var scrollPosition = event.nativeEvent.contentOffset.x;
-    /**
-     * By rounding down, we ensure that any partial visibility of the next item does not affect the index value
-     * This helps maintain consistent behavior and aligns with the desired functionality of considering the left-most visible item as the current item.
-     */
-    var index = Math.floor(scrollPosition / containerWidth);
-    // Call the callback function with the current index
-    internalOnItemIndexChange(index);
-  };
   var viewConfig = useRef({
     viewAreaCoveragePercentThreshold: 50
   }).current;
+  var onViewCallBack = React.useCallback(function (info) {
+    if (info.viewableItems.length > 0) {
+      internalOnItemIndexChange(info.viewableItems[0].index || 0);
+    }
+  }, []);
   return /*#__PURE__*/React.createElement(View, _extends$1({
     style: style
   }, nativeProps), /*#__PURE__*/React.createElement(StyledBackDrop, {
@@ -11965,7 +11952,7 @@ var Carousel = function Carousel(_ref) {
     pagingEnabled: true,
     bounces: false,
     data: items,
-    onMomentumScrollEnd: handleMomentumScrollEnd,
+    onViewableItemsChanged: onViewCallBack,
     viewabilityConfig: viewConfig,
     scrollEventThrottle: 32,
     ref: carouselRef,

package/lib/index.js

@@ -1059,7 +1059,6 @@ var palette$b = {
   grotesqueGreen: grotesqueGreen.base,
   grotesqueGreenDark30: grotesqueGreen.darken30,
   grotesqueGreenDark45: grotesqueGreen.darken45,
-  grotesqueGreenLight30: grotesqueGreen.lighten30,
   grotesqueGreenLight60: grotesqueGreen.lighten60,
   grotesqueGreenLight75: grotesqueGreen.lighten75,
   grotesqueGreenLight90: grotesqueGreen.lighten90,
@@ -1081,8 +1080,6 @@ var palette$b = {
   pinkLight90: pink$1.lighten90,
   purple: purple$1.base,
   purpleDark15: purple$1.darken15,
-  purpleDark30: purple$1.darken30,
-  purpleLight30: purple$1.lighten30,
   red: vermilion$2.base,
   redDark15: vermilion$2.darken15,
   redDark30: vermilion$2.darken30,
@@ -1093,7 +1090,6 @@ var palette$b = {
   redLight75: vermilion$2.lighten75,
   redLight90: vermilion$2.lighten90,
   smalt: smalt.base,
-  smaltDark30: smalt.darken30,
   smaltDark75: smalt.darken75,
   smaltLight30: smalt.lighten30,
   smaltLight45: smalt.lighten45,
@@ -1111,9 +1107,7 @@ var palette$b = {
   violetLight90: violet$1.lighten90,
   yellow: yellow$1.base,
   yellowDark15: yellow$1.darken15,
-  yellowDark30: yellow$1.darken30,
   yellowDark75: yellow$1.darken75,
-  yellowLight30: yellow$1.lighten30,
   yellowLight45: yellow$1.lighten45,
   yellowLight60: yellow$1.lighten60,
   yellowLight75: yellow$1.lighten75,
@@ -11967,21 +11961,14 @@ var Carousel = function Carousel(_ref) {
       clearTimeout(handle);
     };
   }, [currentSlideIndex, carouselRef]);
-  var handleMomentumScrollEnd = function handleMomentumScrollEnd(event) {
-    // Calculate the current index based on the scroll position and container width
-    var containerWidth = event.nativeEvent.layoutMeasurement.width;
-    var scrollPosition = event.nativeEvent.contentOffset.x;
-    /**
-     * By rounding down, we ensure that any partial visibility of the next item does not affect the index value
-     * This helps maintain consistent behavior and aligns with the desired functionality of considering the left-most visible item as the current item.
-     */
-    var index = Math.floor(scrollPosition / containerWidth);
-    // Call the callback function with the current index
-    internalOnItemIndexChange(index);
-  };
   var viewConfig = React.useRef({
     viewAreaCoveragePercentThreshold: 50
   }).current;
+  var onViewCallBack = React__default["default"].useCallback(function (info) {
+    if (info.viewableItems.length > 0) {
+      internalOnItemIndexChange(info.viewableItems[0].index || 0);
+    }
+  }, []);
   return /*#__PURE__*/React__default["default"].createElement(reactNative.View, _extends$1({
     style: style
   }, nativeProps), /*#__PURE__*/React__default["default"].createElement(StyledBackDrop, {
@@ -11995,7 +11982,7 @@ var Carousel = function Carousel(_ref) {
     pagingEnabled: true,
     bounces: false,
     data: items,
-    onMomentumScrollEnd: handleMomentumScrollEnd,
+    onViewableItemsChanged: onViewCallBack,
     viewabilityConfig: viewConfig,
     scrollEventThrottle: 32,
     ref: carouselRef,

package/package.json

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

package/src/components/BottomSheet/ScrollView.tsx

@@ -1,10 +1,5 @@
 import React, { useContext, useCallback } from 'react';
-import {
-  NativeScrollEvent,
-  NativeSyntheticEvent,
-  ScrollView,
-  ScrollViewProps,
-} from 'react-native';
+import { ScrollView, ScrollViewProps } from 'react-native';
 import BottomSheetContext, {
   BottomSheetContextType,
 } from './BottomSheetContext';
@@ -16,32 +11,23 @@ const BottomSheetScrollView = ({
   const { setInternalShowDivider } =
     useContext<BottomSheetContextType>(BottomSheetContext);
 
-  const onScrollBeginDrag = useCallback(
-    (e: NativeSyntheticEvent<NativeScrollEvent>) => {
-      setInternalShowDivider(true);
+  const onScrollBeginDrag = useCallback((e) => {
+    setInternalShowDivider(true);
 
-      props?.onScrollBeginDrag?.(e);
-    },
-    []
-  );
+    props?.onScrollBeginDrag?.(e);
+  }, []);
 
-  const onMomentumScrollBegin = useCallback(
-    (e: NativeSyntheticEvent<NativeScrollEvent>) => {
-      setInternalShowDivider(true);
+  const onMomentumScrollBegin = useCallback((e) => {
+    setInternalShowDivider(true);
 
-      props?.onMomentumScrollEnd?.(e);
-    },
-    []
-  );
+    props?.onMomentumScrollEnd?.(e);
+  }, []);
 
-  const onMomentumScrollEnd = useCallback(
-    (e: NativeSyntheticEvent<NativeScrollEvent>) => {
-      setInternalShowDivider(false);
+  const onMomentumScrollEnd = useCallback((e) => {
+    setInternalShowDivider(false);
 
-      props?.onMomentumScrollEnd?.(e);
-    },
-    []
-  );
+    props?.onMomentumScrollEnd?.(e);
+  }, []);
 
   return (
     <ScrollView

package/src/components/Carousel/index.tsx

@@ -9,13 +9,12 @@ import React, {
 import {
   Animated,
   FlatList,
-  NativeScrollEvent,
-  NativeSyntheticEvent,
   StyleProp,
   useWindowDimensions,
   View,
   ViewProps,
   ViewStyle,
+  ViewToken,
 } from 'react-native';
 
 import { CarouselData } from './types';
@@ -129,25 +128,15 @@ const Carousel = ({
     };
   }, [currentSlideIndex, carouselRef]);
 
-  const handleMomentumScrollEnd = (
-    event: NativeSyntheticEvent<NativeScrollEvent>
-  ) => {
-    // Calculate the current index based on the scroll position and container width
-    const containerWidth = event.nativeEvent.layoutMeasurement.width;
-    const scrollPosition = event.nativeEvent.contentOffset.x;
-
-    /**
-     * By rounding down, we ensure that any partial visibility of the next item does not affect the index value
-     * This helps maintain consistent behavior and aligns with the desired functionality of considering the left-most visible item as the current item.
-     */
-    const index = Math.floor(scrollPosition / containerWidth);
-
-    // Call the callback function with the current index
-    internalOnItemIndexChange(index);
-  };
-
   const viewConfig = useRef({ viewAreaCoveragePercentThreshold: 50 }).current;
-
+  const onViewCallBack = React.useCallback(
+    (info: { viewableItems: Array<ViewToken>; changed: Array<ViewToken> }) => {
+      if (info.viewableItems.length > 0) {
+        internalOnItemIndexChange(info.viewableItems[0].index || 0);
+      }
+    },
+    []
+  );
   return (
     <View style={style} {...nativeProps}>
       <StyledBackDrop
@@ -171,7 +160,7 @@ const Carousel = ({
           pagingEnabled
           bounces={false}
           data={items}
-          onMomentumScrollEnd={handleMomentumScrollEnd}
+          onViewableItemsChanged={onViewCallBack}
           viewabilityConfig={viewConfig}
           scrollEventThrottle={32}
           ref={carouselRef}