@coinbase/cds-mobile 8.41.0 → 8.43.0

package/esm/carousel/Carousel.js

@@ -1,15 +1,16 @@
-const _excluded = ["children", "title", "hideNavigation", "hidePagination", "drag", "snapMode", "NavigationComponent", "PaginationComponent", "style", "styles", "nextPageAccessibilityLabel", "previousPageAccessibilityLabel", "goToPageAccessibilityLabel", "onChangePage", "onDragStart", "onDragEnd", "loop"];
+const _excluded = ["children", "title", "hideNavigation", "hidePagination", "drag", "snapMode", "NavigationComponent", "PaginationComponent", "style", "styles", "nextPageAccessibilityLabel", "previousPageAccessibilityLabel", "startAutoplayAccessibilityLabel", "stopAutoplayAccessibilityLabel", "paginationAccessibilityLabel", "onChangePage", "onDragStart", "onDragEnd", "loop", "autoplay", "autoplayInterval", "paginationVariant"];
 function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
-import React, { forwardRef, memo, useCallback, useImperativeHandle, useMemo, useRef, useState } from 'react';
+import React, { forwardRef, memo, useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';
 import { View } from 'react-native';
 import { Gesture, GestureDetector } from 'react-native-gesture-handler';
+import { useCarouselAutoplay } from '@coinbase/cds-common/carousel/useCarouselAutoplay';
 import { animated, useSpring } from '@react-spring/native';
 import { useLayout } from '../hooks/useLayout';
 import { HStack } from '../layout/HStack';
 import { VStack } from '../layout/VStack';
 import { Text } from '../typography/Text';
-import { CarouselContext, useCarouselContext } from './CarouselContext';
+import { CarouselAutoplayContext, CarouselContext, useCarouselAutoplayContext, useCarouselContext } from './CarouselContext';
 import { CarouselItem } from './CarouselItem';
 import { DefaultCarouselNavigation } from './DefaultCarouselNavigation';
 import { DefaultCarouselPagination } from './DefaultCarouselPagination';
@@ -26,7 +27,7 @@ const wrap = (min, max, value) => {
   const range = max - min;
   return min + ((value - min) % range + range) % range;
 };
-export { CarouselContext, useCarouselContext };
+export { CarouselAutoplayContext, CarouselContext, useCarouselAutoplayContext, useCarouselContext };
 /**
  * Calculates the locations of each item in the carousel, offset from the first item.
  * @param itemRects - The items to get the offsets for.
@@ -250,8 +251,8 @@ const getVisibleItems = (itemRects, containerWidth, scrollOffset) => {
   return visibleItems;
 };
 const animationConfig = {
-  tension: 200,
-  friction: 25
+  stiffness: 900,
+  damping: 120
 };
 export const Carousel = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref4, ref) => {
   let {
@@ -267,11 +268,16 @@ export const Carousel = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref4, ref) =
       styles,
       nextPageAccessibilityLabel,
       previousPageAccessibilityLabel,
-      goToPageAccessibilityLabel,
+      startAutoplayAccessibilityLabel,
+      stopAutoplayAccessibilityLabel,
+      paginationAccessibilityLabel,
       onChangePage,
       onDragStart,
       onDragEnd,
-      loop
+      loop,
+      autoplay,
+      autoplayInterval = 3000,
+      paginationVariant
     } = _ref4,
     props = _objectWithoutPropertiesLoose(_ref4, _excluded);
   const carouselScrollX = useRef(0);
@@ -283,14 +289,11 @@ export const Carousel = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref4, ref) =
   const [containerSize, onLayout] = useLayout();
   const [carouselItemRects, setCarouselItemRects] = useState({});
   const [visibleCarouselItems, setVisibleCarouselItems] = useState(new Set());
-  const rootRef = useRef(null);
   const isDragEnabled = drag !== 'none';
   const updateActivePageIndex = useCallback(newPageIndexOrUpdater => {
     setActivePageIndex(prevIndex => {
       const newPageIndex = typeof newPageIndexOrUpdater === 'function' ? newPageIndexOrUpdater(prevIndex) : newPageIndexOrUpdater;
-      if (prevIndex !== newPageIndex && onChangePage) {
-        onChangePage(newPageIndex);
-      }
+      if (prevIndex !== newPageIndex) onChangePage == null || onChangePage(newPageIndex);
       return newPageIndex;
     });
   }, [onChangePage]);
@@ -398,6 +401,22 @@ export const Carousel = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref4, ref) =
     updateActivePageIndex(pageIndex => Math.min(pageIndex, pageOffsets.totalPages - 1));
     return pageOffsets;
   }, [hasCalculatedDimensions, carouselItemRects, snapMode, containerSize.width, maxScrollOffset, shouldLoop, updateActivePageIndex]);
+  const {
+    isPlaying,
+    isStopped,
+    isPaused,
+    start,
+    stop,
+    toggle,
+    reset,
+    pause,
+    resume,
+    getRemainingTime,
+    addCompletionListener
+  } = useCarouselAutoplay({
+    enabled: autoplay != null ? autoplay : false,
+    interval: autoplayInterval
+  });
   const goToPage = useCallback(page => {
     const newPage = Math.max(0, Math.min(totalPages - 1, page));
     updateActivePageIndex(newPage);
@@ -408,12 +427,22 @@ export const Carousel = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref4, ref) =
       to: targetOffset,
       config: animationConfig
     });
-  }, [isLoopingActive, loopLength, totalPages, pageOffsets, animationApi.x, updateVisibleCarouselItems, updateActivePageIndex]);
+    reset();
+  }, [totalPages, updateActivePageIndex, updateVisibleCarouselItems, pageOffsets, isLoopingActive, loopLength, animationApi.x, reset]);
   useImperativeHandle(ref, () => ({
     activePageIndex,
     totalPages,
     goToPage
   }), [activePageIndex, totalPages, goToPage]);
+  useEffect(() => {
+    if (!autoplay || totalPages === 0) return;
+    const unsubscribe = addCompletionListener(() => {
+      const nextPage = wrap(0, totalPages, activePageIndex + 1);
+      reset();
+      goToPage(nextPage);
+    });
+    return unsubscribe;
+  }, [autoplay, addCompletionListener, activePageIndex, totalPages, goToPage, reset]);
   const handleGoNext = useCallback(() => {
     const nextPage = shouldLoop ? wrap(0, totalPages, activePageIndex + 1) : activePageIndex + 1;
     goToPage(nextPage);
@@ -424,10 +453,12 @@ export const Carousel = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref4, ref) =
   }, [shouldLoop, totalPages, activePageIndex, goToPage]);
   const handleDragStart = useCallback(() => {
     onDragStart == null || onDragStart();
-  }, [onDragStart]);
+    pause();
+  }, [onDragStart, pause]);
   const handleDragEnd = useCallback(() => {
     onDragEnd == null || onDragEnd();
-  }, [onDragEnd]);
+    resume();
+  }, [onDragEnd, resume]);
   const handleDragTransition = useCallback(targetOffsetScroll => {
     if (drag === 'none') return targetOffsetScroll;
     if (isLoopingActive) {
@@ -435,6 +466,7 @@ export const Carousel = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref4, ref) =
         offset: nearestOffset,
         index: pageIndex
       } = findNearestLoopOffset(targetOffsetScroll, pageOffsets, loopLength);
+      if (pageIndex !== activePageIndex) reset();
       updateActivePageIndex(pageIndex);
       if (drag === 'snap') {
         updateVisibleCarouselItems(pageOffsets[pageIndex]);
@@ -448,6 +480,7 @@ export const Carousel = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref4, ref) =
       // Non-looping logic with clamping
       const clampedScrollOffset = clampWithElasticResistance(targetOffsetScroll, maxScrollOffset, 0);
       const closestPageIndex = getNearestPageIndexFromOffset(clampedScrollOffset, pageOffsets);
+      if (closestPageIndex !== activePageIndex) reset();
       updateActivePageIndex(closestPageIndex);
       if (drag === 'snap') {
         const snapOffset = pageOffsets[closestPageIndex];
@@ -457,7 +490,7 @@ export const Carousel = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref4, ref) =
       updateVisibleCarouselItems(clampedScrollOffset);
       return targetOffsetScroll;
     }
-  }, [drag, isLoopingActive, loopLength, maxScrollOffset, pageOffsets, updateVisibleCarouselItems, updateActivePageIndex]);
+  }, [drag, isLoopingActive, loopLength, maxScrollOffset, pageOffsets, activePageIndex, updateVisibleCarouselItems, updateActivePageIndex, reset]);
   const panGesture = useMemo(() => Gesture.Pan()
   // Only activate when horizontal movement exceeds threshold
   .activeOffsetX([-10, 10])
@@ -595,49 +628,73 @@ export const Carousel = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref4, ref) =
     unregisterItem,
     visibleCarouselItems
   }), [registerItem, unregisterItem, visibleCarouselItems]);
+  const autoplayContextValue = useMemo(() => {
+    return {
+      isEnabled: !!autoplay,
+      isStopped,
+      isPaused,
+      isPlaying,
+      interval: autoplayInterval,
+      getRemainingTime,
+      start,
+      stop,
+      toggle,
+      reset,
+      pause,
+      resume
+    };
+  }, [autoplay, isStopped, isPaused, isPlaying, autoplayInterval, getRemainingTime, start, stop, toggle, reset, pause, resume]);
   return /*#__PURE__*/_jsx(CarouselContext.Provider, {
     value: carouselContextValue,
-    children: /*#__PURE__*/_jsxs(VStack, _extends({
-      ref: rootRef,
-      "aria-live": "polite",
-      "aria-roledescription": "carousel",
-      gap: 2,
-      role: "group",
-      style: containerStyle
-    }, props, {
-      children: [(title || !hideNavigation) && /*#__PURE__*/_jsxs(HStack, {
-        alignItems: "center",
-        justifyContent: title ? 'space-between' : 'flex-end',
-        children: [typeof title === 'string' ? /*#__PURE__*/_jsx(Text, {
-          font: "title3",
-          style: styles == null ? void 0 : styles.title,
-          children: title
-        }) : title, !hideNavigation && /*#__PURE__*/_jsx(NavigationComponent, {
-          disableGoNext: totalPages <= 1 || !shouldLoop && activePageIndex >= totalPages - 1,
-          disableGoPrevious: totalPages <= 1 || !shouldLoop && activePageIndex <= 0,
-          nextPageAccessibilityLabel: nextPageAccessibilityLabel,
-          onGoNext: handleGoNext,
-          onGoPrevious: handleGoPrevious,
-          previousPageAccessibilityLabel: previousPageAccessibilityLabel,
-          style: styles == null ? void 0 : styles.navigation
-        })]
-      }), /*#__PURE__*/_jsx(GestureDetector, {
-        gesture: panGesture,
-        children: /*#__PURE__*/_jsx(View, {
-          onLayout: onLayout,
-          style: scrollViewStyle,
-          children: /*#__PURE__*/_jsx(animated.View, {
-            style: [animatedStyle, animatedTransform],
-            children: childrenWithClones
+    children: /*#__PURE__*/_jsx(CarouselAutoplayContext.Provider, {
+      value: autoplayContextValue,
+      children: /*#__PURE__*/_jsxs(VStack, _extends({
+        "aria-live": "polite",
+        "aria-roledescription": "carousel",
+        gap: 2,
+        role: "group",
+        style: containerStyle
+      }, props, {
+        children: [(title || !hideNavigation) && /*#__PURE__*/_jsxs(HStack, {
+          alignItems: "center",
+          justifyContent: title ? 'space-between' : 'flex-end',
+          children: [typeof title === 'string' ? /*#__PURE__*/_jsx(Text, {
+            font: "title3",
+            style: styles == null ? void 0 : styles.title,
+            children: title
+          }) : title, !hideNavigation && /*#__PURE__*/_jsx(NavigationComponent, {
+            autoplay: autoplay,
+            disableGoNext: totalPages <= 1 || !shouldLoop && activePageIndex >= totalPages - 1,
+            disableGoPrevious: totalPages <= 1 || !shouldLoop && activePageIndex <= 0,
+            isAutoplayStopped: isStopped,
+            nextPageAccessibilityLabel: nextPageAccessibilityLabel,
+            onGoNext: handleGoNext,
+            onGoPrevious: handleGoPrevious,
+            onToggleAutoplay: toggle,
+            previousPageAccessibilityLabel: previousPageAccessibilityLabel,
+            startAutoplayAccessibilityLabel: startAutoplayAccessibilityLabel,
+            stopAutoplayAccessibilityLabel: stopAutoplayAccessibilityLabel,
+            style: styles == null ? void 0 : styles.navigation
+          })]
+        }), /*#__PURE__*/_jsx(GestureDetector, {
+          gesture: panGesture,
+          children: /*#__PURE__*/_jsx(View, {
+            onLayout: onLayout,
+            style: scrollViewStyle,
+            children: /*#__PURE__*/_jsx(animated.View, {
+              style: [animatedStyle, animatedTransform],
+              children: childrenWithClones
+            })
           })
-        })
-      }), !hidePagination && /*#__PURE__*/_jsx(PaginationComponent, {
-        activePageIndex: activePageIndex,
-        onPressPage: goToPage,
-        paginationAccessibilityLabel: goToPageAccessibilityLabel,
-        style: styles == null ? void 0 : styles.pagination,
-        totalPages: totalPages
-      })]
-    }))
+        }), !hidePagination && /*#__PURE__*/_jsx(PaginationComponent, {
+          activePageIndex: activePageIndex,
+          onPressPage: goToPage,
+          paginationAccessibilityLabel: paginationAccessibilityLabel,
+          style: styles == null ? void 0 : styles.pagination,
+          totalPages: totalPages,
+          variant: paginationVariant
+        })]
+      }))
+    })
   });
 }));

package/esm/carousel/CarouselContext.js

@@ -6,4 +6,12 @@ export const useCarouselContext = () => {
     throw new Error('useCarouselContext must be used within a Carousel component');
   }
   return context;
+};
+export const CarouselAutoplayContext = /*#__PURE__*/React.createContext(undefined);
+export const useCarouselAutoplayContext = () => {
+  const context = useContext(CarouselAutoplayContext);
+  if (!context) {
+    throw new Error('useCarouselAutoplayContext must be used within a Carousel component');
+  }
+  return context;
 };

package/esm/carousel/DefaultCarouselNavigation.js

@@ -4,7 +4,7 @@ import { useTheme } from '../hooks/useTheme';
 import { HStack } from '../layout/HStack';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export const DefaultCarouselNavigation = /*#__PURE__*/memo(function DefaultCarouselNavigation(_ref) {
-  var _testIDMap$previousBu, _testIDMap$nextButton;
+  var _testIDMap$autoplayBu, _testIDMap$previousBu, _testIDMap$nextButton;
   let {
     onGoPrevious,
     onGoNext,
@@ -12,10 +12,17 @@ export const DefaultCarouselNavigation = /*#__PURE__*/memo(function DefaultCarou
     disableGoNext,
     previousPageAccessibilityLabel = 'Previous page',
     nextPageAccessibilityLabel = 'Next page',
+    autoplay,
+    isAutoplayStopped,
+    onToggleAutoplay,
+    startAutoplayAccessibilityLabel = 'Play Carousel',
+    stopAutoplayAccessibilityLabel = 'Pause Carousel',
     variant = 'secondary',
     compact,
     previousIcon = 'caretLeft',
     nextIcon = 'caretRight',
+    startIcon = 'play',
+    stopIcon = 'pause',
     style,
     styles,
     testIDMap
@@ -29,7 +36,15 @@ export const DefaultCarouselNavigation = /*#__PURE__*/memo(function DefaultCarou
   return /*#__PURE__*/_jsxs(HStack, {
     gap: 1,
     style: rootStyles,
-    children: [/*#__PURE__*/_jsx(IconButton, {
+    children: [autoplay && /*#__PURE__*/_jsx(IconButton, {
+      accessibilityLabel: isAutoplayStopped ? startAutoplayAccessibilityLabel : stopAutoplayAccessibilityLabel,
+      compact: compact,
+      name: isAutoplayStopped ? startIcon : stopIcon,
+      onPress: onToggleAutoplay,
+      style: styles == null ? void 0 : styles.autoplayButton,
+      testID: (_testIDMap$autoplayBu = testIDMap == null ? void 0 : testIDMap.autoplayButton) != null ? _testIDMap$autoplayBu : 'carousel-autoplay-button',
+      variant: variant
+    }), /*#__PURE__*/_jsx(IconButton, {
       accessibilityLabel: previousPageAccessibilityLabel,
       compact: compact,
       disabled: disableGoPrevious,

package/esm/carousel/DefaultCarouselPagination.js

@@ -1,49 +1,184 @@
-import React, { memo, useMemo } from 'react';
+import React, { memo, useEffect, useMemo, useRef, useState } from 'react';
+import { animated, useSpring } from '@react-spring/native';
 import { useTheme } from '../hooks/useTheme';
 import { HStack } from '../layout/HStack';
 import { Pressable } from '../system/Pressable';
+import { useCarouselAutoplayContext } from './CarouselContext';
 import { jsx as _jsx } from "react/jsx-runtime";
-export const DefaultCarouselPagination = /*#__PURE__*/memo(function DefaultCarouselPagination(_ref) {
+const INDICATOR_ACTIVE_WIDTH = 24;
+const INDICATOR_INACTIVE_WIDTH = 4;
+const INDICATOR_HEIGHT = 4;
+const PaginationPill = /*#__PURE__*/memo(function PaginationPill(_ref) {
+  let {
+    index,
+    isActive,
+    onPress,
+    accessibilityLabel,
+    style
+  } = _ref;
+  return /*#__PURE__*/_jsx(Pressable, {
+    accessibilityLabel: accessibilityLabel,
+    background: isActive ? 'bgPrimary' : 'bgLine',
+    borderColor: "transparent",
+    borderRadius: 100,
+    height: INDICATOR_HEIGHT,
+    onPress: onPress,
+    style: style,
+    testID: "carousel-page-" + index,
+    width: INDICATOR_ACTIVE_WIDTH
+  });
+});
+const animationConfig = {
+  stiffness: 900,
+  damping: 120,
+  clamp: true
+};
+const PaginationDot = /*#__PURE__*/memo(function PaginationDot(_ref2) {
+  let {
+    index,
+    isActive,
+    onPress,
+    accessibilityLabel,
+    style
+  } = _ref2;
+  const theme = useTheme();
+  const autoplayContext = useCarouselAutoplayContext();
+  const {
+    isPlaying,
+    isEnabled,
+    interval,
+    getRemainingTime
+  } = autoplayContext;
+  const showProgress = isActive && isEnabled;
+  const springProps = useSpring({
+    width: isActive ? INDICATOR_ACTIVE_WIDTH : INDICATOR_INACTIVE_WIDTH,
+    backgroundColor: isActive && !showProgress ? theme.color.bgPrimary : theme.color.bgLine,
+    config: animationConfig
+  });
+
+  // Track progress animation state
+  const [progressState, setProgressState] = useState({
+    width: 0,
+    duration: 0
+  });
+
+  // Use a ref to track the last paused progress so we can resume from it
+  const lastProgressRef = useRef(0);
+  useEffect(() => {
+    if (!showProgress) {
+      setProgressState({
+        width: 0,
+        duration: 0
+      });
+      lastProgressRef.current = 0;
+      return;
+    }
+    const remainingTime = getRemainingTime();
+    if (!interval || interval <= 0) {
+      return;
+    }
+    const currentProgress = 1 - remainingTime / interval;
+    if (isPlaying) {
+      lastProgressRef.current = currentProgress;
+      setProgressState({
+        width: INDICATOR_ACTIVE_WIDTH,
+        duration: remainingTime
+      });
+    } else {
+      setProgressState({
+        width: currentProgress * INDICATOR_ACTIVE_WIDTH,
+        duration: 0
+      });
+      lastProgressRef.current = currentProgress;
+    }
+  }, [isPlaying, showProgress, interval, getRemainingTime]);
+
+  // Use spring with duration config for linear timed animation
+  // immediate: true when duration is 0 to force instant snap (not animated)
+  const progressSpring = useSpring({
+    width: progressState.width,
+    config: progressState.duration > 0 ? {
+      duration: progressState.duration
+    } : {
+      duration: 0
+    },
+    immediate: progressState.duration === 0
+  });
+  return /*#__PURE__*/_jsx(Pressable, {
+    accessibilityLabel: accessibilityLabel,
+    borderColor: "transparent",
+    borderRadius: 100,
+    borderWidth: 0,
+    onPress: onPress,
+    overflow: "hidden",
+    style: style,
+    testID: "carousel-page-" + index,
+    children: /*#__PURE__*/_jsx(animated.View, {
+      style: {
+        width: springProps.width,
+        height: INDICATOR_HEIGHT,
+        backgroundColor: springProps.backgroundColor,
+        borderRadius: theme.borderRadius[100],
+        overflow: 'hidden'
+      },
+      children: showProgress && /*#__PURE__*/_jsx(animated.View, {
+        style: {
+          width: progressSpring.width,
+          height: '100%',
+          backgroundColor: theme.color.bgPrimary,
+          borderRadius: theme.borderRadius[100]
+        }
+      })
+    })
+  });
+});
+const defaultPaginationAccessibilityLabel = pageIndex => "Go to page " + (pageIndex + 1);
+export const DefaultCarouselPagination = /*#__PURE__*/memo(function DefaultCarouselPagination(_ref3) {
   let {
     totalPages,
     activePageIndex,
     onPressPage,
     style,
     styles,
-    paginationAccessibilityLabel = 'Go to page'
-  } = _ref;
+    paginationAccessibilityLabel = defaultPaginationAccessibilityLabel,
+    variant = 'pill'
+  } = _ref3;
   const theme = useTheme();
+  const isDot = variant === 'dot';
 
   // Using paddingVertical here instead of HStack prop so it can be overridden by custom styles
   const rootStyles = useMemo(() => [{
     paddingVertical: theme.space[0.5]
   }, style, styles == null ? void 0 : styles.root], [style, styles == null ? void 0 : styles.root, theme.space]);
+  const getAccessibilityLabel = index => typeof paginationAccessibilityLabel === 'function' ? paginationAccessibilityLabel(index) : paginationAccessibilityLabel;
   return /*#__PURE__*/_jsx(HStack, {
     gap: 0.5,
     justifyContent: "center",
     style: rootStyles,
     children: totalPages > 0 ? Array.from({
       length: totalPages
-    }, (_, index) => /*#__PURE__*/_jsx(Pressable, {
-      accessibilityLabel: typeof paginationAccessibilityLabel === 'function' ? paginationAccessibilityLabel(index) : paginationAccessibilityLabel + " " + (index + 1),
-      background: index === activePageIndex ? 'bgPrimary' : 'bgLine',
-      borderColor: "transparent",
-      borderRadius: 100,
-      height: 4,
+    }, (_, index) => isDot ? /*#__PURE__*/_jsx(PaginationDot, {
+      accessibilityLabel: getAccessibilityLabel(index),
+      index: index,
+      isActive: index === activePageIndex,
+      onPress: () => onPressPage(index),
+      style: styles == null ? void 0 : styles.dot
+    }, index) : /*#__PURE__*/_jsx(PaginationPill, {
+      accessibilityLabel: getAccessibilityLabel(index),
+      index: index,
+      isActive: index === activePageIndex,
       onPress: () => onPressPage(index),
-      style: styles == null ? void 0 : styles.dot,
-      testID: "carousel-page-" + index,
-      width: 24
+      style: styles == null ? void 0 : styles.dot
     }, index)) : /*#__PURE__*/_jsx(Pressable, {
       disabled: true,
       background: "bgLine",
       borderColor: "transparent",
       borderRadius: 100,
-      height: 4,
+      height: INDICATOR_HEIGHT,
       style: [{
         opacity: 0
       }, styles == null ? void 0 : styles.dot],
-      width: 24
+      width: isDot ? INDICATOR_INACTIVE_WIDTH : INDICATOR_ACTIVE_WIDTH
     })
   });
 });

package/esm/carousel/__figma__/Carousel.figma.js

@@ -0,0 +1,15 @@
+import { Carousel, CarouselItem } from '@coinbase/cds-mobile/carousel';
+import figma from '@figma/code-connect/react';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+figma.connect(Carousel, 'https://www.figma.com/design/k5CtyJccNQUGMI5bI4lJ2g/%E2%9C%A8-CDS-Components?node-id=48671-10433', {
+  imports: ["import { Carousel, CarouselItem } from '@coinbase/cds-mobile/carousel'"],
+  example: () => /*#__PURE__*/_jsxs(Carousel, {
+    children: [/*#__PURE__*/_jsx(CarouselItem, {
+      id: "1"
+    }), /*#__PURE__*/_jsx(CarouselItem, {
+      id: "2"
+    }), /*#__PURE__*/_jsx(CarouselItem, {
+      id: "3"
+    })]
+  })
+});