@telus-uds/components-base 1.96.0 → 1.97.1

package/lib/Carousel/Carousel.js

@@ -1,39 +1,32 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _react = _interopRequireDefault(require("react"));
-var _View = _interopRequireDefault(require("react-native-web/dist/cjs/exports/View"));
-var _Animated = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Animated"));
-var _PanResponder = _interopRequireDefault(require("react-native-web/dist/cjs/exports/PanResponder"));
-var _StyleSheet = _interopRequireDefault(require("react-native-web/dist/cjs/exports/StyleSheet"));
-var _Platform = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Platform"));
-var _Dimensions = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Dimensions"));
-var _propTypes = _interopRequireDefault(require("prop-types"));
-var _ThemeProvider = require("../ThemeProvider");
-var _ViewportProvider = require("../ViewportProvider");
-var _utils = require("../utils");
-var _A11yInfoProvider = require("../A11yInfoProvider");
-var _CarouselContext = require("./CarouselContext");
-var _CarouselItem = _interopRequireDefault(require("./CarouselItem"));
-var _IconButton = _interopRequireDefault(require("../IconButton"));
-var _SkipLink = _interopRequireDefault(require("../SkipLink"));
-var _A11yText = _interopRequireDefault(require("../A11yText"));
-var _CarouselStepTracker = _interopRequireDefault(require("./CarouselStepTracker"));
-var _CarouselThumbnailNavigation = _interopRequireDefault(require("./CarouselThumbnailNavigation"));
-var _CarouselTabsPanel = _interopRequireDefault(require("./CarouselTabs/CarouselTabsPanel"));
-var _CarouselTabsPanelItem = _interopRequireDefault(require("./CarouselTabs/CarouselTabsPanelItem"));
-var _dictionary = _interopRequireDefault(require("./dictionary"));
-var _jsxRuntime = require("react/jsx-runtime");
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+import React from 'react';
+import View from "react-native-web/dist/exports/View";
+import Animated from "react-native-web/dist/exports/Animated";
+import PanResponder from "react-native-web/dist/exports/PanResponder";
+import StyleSheet from "react-native-web/dist/exports/StyleSheet";
+import Platform from "react-native-web/dist/exports/Platform";
+import Dimensions from "react-native-web/dist/exports/Dimensions";
+import PropTypes from 'prop-types';
+import { useThemeTokens } from '../ThemeProvider';
+import { useViewport } from '../ViewportProvider';
+import { getTokensPropType, getA11yPropsFromHtmlTag, layoutTags, variantProp, selectSystemProps, a11yProps, viewProps, useCopy, unpackFragment } from '../utils';
+import { useA11yInfo } from '../A11yInfoProvider';
+import { CarouselProvider } from './CarouselContext';
+import CarouselItem from './CarouselItem';
+import IconButton from '../IconButton';
+import SkipLink from '../SkipLink';
+import A11yText from '../A11yText';
+import CarouselStepTracker from './CarouselStepTracker';
+import CarouselThumbnailNavigation from './CarouselThumbnailNavigation';
+import CarouselTabsPanel from './CarouselTabs/CarouselTabsPanel';
+import CarouselTabsPanelItem from './CarouselTabs/CarouselTabsPanelItem';
+import dictionary from './dictionary';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const TRANSITION_MODES = {
   MANUAL: 'manual',
   AUTOMATIC: 'automatic',
   SWIPE: 'swipe'
 };
-const staticStyles = _StyleSheet.default.create({
+const staticStyles = StyleSheet.create({
   root: {
     backgroundColor: 'transparent',
     justifyContent: 'center',
@@ -45,7 +38,7 @@ const staticStyles = _StyleSheet.default.create({
   animationControlButton: {
     position: 'absolute',
     zIndex: 1,
-    right: _Platform.default.OS === 'web' ? undefined : 40,
+    right: Platform.OS === 'web' ? undefined : 40,
     top: 40
   }
 });
@@ -106,7 +99,7 @@ const selectPreviousNextNavigationButtonStyles = (previousNextNavigationButtonWi
   };
 };
 const getPeekingProps = viewport => {
-  if (viewport === 'xs' || viewport === 'sm') {
+  if (viewport === 'xs' || viewport === 'sm' || viewport === 'md') {
     return {
       peekingFirstSpace: 48,
       peekingGap: 16,
@@ -133,7 +126,7 @@ const selectIconStyles = _ref2 => {
     backgroundColor: iconBackgroundColor
   };
 };
-const [selectProps, selectedSystemPropTypes] = (0, _utils.selectSystemProps)([_utils.a11yProps, _utils.viewProps]);
+const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps]);
 
 /**
  * Carousel is a general-purpose content slider that can be used to render content in terms of slides.
@@ -189,7 +182,7 @@ const [selectProps, selectedSystemPropTypes] = (0, _utils.selectSystemProps)([_u
   - `spaceBetweenSlideAndPreviousNextNavigation` - Horizontal space between slide and previous/next navigational buttons
   - `spaceBetweenSlideAndPanelNavigation` - Vertical space between slide area and panel navigation area
  */
-const Carousel = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) => {
+const Carousel = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
   let {
     tokens,
     variant,
@@ -209,9 +202,9 @@ const Carousel = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) => {
     title = 'carousel',
     springConfig = undefined,
     thumbnails = undefined,
-    panelNavigation = thumbnails ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_CarouselThumbnailNavigation.default, {
+    panelNavigation = thumbnails ? /*#__PURE__*/_jsx(CarouselThumbnailNavigation, {
       thumbnails: thumbnails
-    }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_CarouselStepTracker.default, {
+    }) : /*#__PURE__*/_jsx(CarouselStepTracker, {
       variant: stepTrackerVariant
     }),
     tag = 'ul',
@@ -225,18 +218,18 @@ const Carousel = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) => {
     enablePeeking = false,
     ...rest
   } = _ref3;
-  let childrenArray = (0, _utils.unpackFragment)(children);
+  let childrenArray = unpackFragment(children);
   const autoPlayFeatureEnabled = autoPlay && slideDuration > 0 && transitionDuration > 0 && childrenArray.length > 1;
   // if `Carousel` only has one `Carousel.Item`, convert this to a single-item array
   if (!Array.isArray(childrenArray)) {
     childrenArray = [childrenArray];
   }
-  const getCopy = (0, _utils.useCopy)({
-    dictionary: _dictionary.default,
+  const getCopy = useCopy({
+    dictionary,
     copy
   });
-  const viewport = (0, _ViewportProvider.useViewport)();
-  const themeTokens = (0, _ThemeProvider.useThemeTokens)('Carousel', tokens, variant, {
+  const viewport = useViewport();
+  const themeTokens = useThemeTokens('Carousel', tokens, variant, {
     viewport
   });
   const {
@@ -249,45 +242,45 @@ const Carousel = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) => {
     showPanelTabs,
     spaceBetweenSlideAndPreviousNextNavigation
   } = themeTokens;
-  const [activeIndex, setActiveIndex] = _react.default.useState(0);
-  const activeIndexRef = _react.default.useRef(activeIndex);
+  const [activeIndex, setActiveIndex] = React.useState(0);
+  const activeIndexRef = React.useRef(activeIndex);
   const {
     reduceMotionEnabled
-  } = (0, _A11yInfoProvider.useA11yInfo)();
-  const reduceMotionRef = _react.default.useRef(reduceMotionEnabled);
-  const [containerLayout, setContainerLayout] = _react.default.useState({
+  } = useA11yInfo();
+  const reduceMotionRef = React.useRef(reduceMotionEnabled);
+  const [containerLayout, setContainerLayout] = React.useState({
     x: 0,
     y: 0,
     width: 0
   });
-  const containerLayoutRef = _react.default.useRef(containerLayout);
-  const [previousNextNavigationButtonWidth, setPreviousNextNavigationButtonWidth] = _react.default.useState(0);
-  const firstFocusRef = _react.default.useRef(null);
-  const pan = _react.default.useRef(new _Animated.default.ValueXY()).current;
-  const animatedX = _react.default.useRef(0);
-  const animatedY = _react.default.useRef(0);
-  const [isAnimating, setIsAnimating] = _react.default.useState(false);
+  const containerLayoutRef = React.useRef(containerLayout);
+  const [previousNextNavigationButtonWidth, setPreviousNextNavigationButtonWidth] = React.useState(0);
+  const firstFocusRef = React.useRef(null);
+  const pan = React.useRef(new Animated.ValueXY()).current;
+  const animatedX = React.useRef(0);
+  const animatedY = React.useRef(0);
+  const [isAnimating, setIsAnimating] = React.useState(false);
   /**
    * While having the same starting point, `isAutoPlayEnabled` and `isCarouselPlaying` are different states
    *
    * `isAutoPlayEnabled` is a state to determine if the autoplay feature is enabled or disabled
    * `isCarouselPlaying` is a state to determine if the carousel is currently playing or paused
    */
-  const [isAutoPlayEnabled, setIsAutoPlayEnabled] = _react.default.useState(autoPlayFeatureEnabled);
-  const [isCarouselPlaying, setisCarouselPlaying] = _react.default.useState(autoPlayFeatureEnabled);
-  const isSwiping = _react.default.useRef(false);
-  const autoPlayRef = _react.default.useRef(null);
+  const [isAutoPlayEnabled, setIsAutoPlayEnabled] = React.useState(autoPlayFeatureEnabled);
+  const [isCarouselPlaying, setisCarouselPlaying] = React.useState(autoPlayFeatureEnabled);
+  const isSwiping = React.useRef(false);
+  const autoPlayRef = React.useRef(null);
   const isFirstSlide = !activeIndex;
   const isLastSlide = activeIndex + 1 >= childrenArray.length;
-  const handleAnimationStart = _react.default.useCallback(function () {
+  const handleAnimationStart = React.useCallback(function () {
     if (typeof onAnimationStart === 'function') onAnimationStart(...arguments);
     setIsAnimating(true);
   }, [onAnimationStart]);
-  const handleAnimationEnd = _react.default.useCallback(function () {
+  const handleAnimationEnd = React.useCallback(function () {
     if (typeof onAnimationEnd === 'function') onAnimationEnd(...arguments);
     setIsAnimating(false);
   }, [onAnimationEnd]);
-  const updateOffset = _react.default.useCallback(() => {
+  const updateOffset = React.useCallback(() => {
     animatedX.current = containerLayoutRef.current.width * activeIndexRef.current * -1;
     animatedY.current = 0;
     pan.setOffset({
@@ -299,7 +292,7 @@ const Carousel = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) => {
       y: 0
     });
   }, [pan, animatedX]);
-  const animate = _react.default.useCallback((toValue, toIndex) => {
+  const animate = React.useCallback((toValue, toIndex) => {
     const handleAnimationEndToIndex = function () {
       for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
         args[_key] = arguments[_key];
@@ -307,48 +300,48 @@ const Carousel = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) => {
       return handleAnimationEnd(toIndex, ...args);
     };
     if (reduceMotionRef.current || isSwiping.current) {
-      _Animated.default.timing(pan, {
+      Animated.timing(pan, {
         toValue,
         duration: 1,
         useNativeDriver: false
       }).start(handleAnimationEndToIndex);
     } else if (isAutoPlayEnabled) {
-      _Animated.default.timing(pan, {
+      Animated.timing(pan, {
         ...springConfig,
         toValue,
         useNativeDriver: false,
         duration: transitionDuration * 1000
       }).start(handleAnimationEndToIndex);
     } else if (enablePeeking) {
-      _Animated.default.timing(pan, {
+      Animated.timing(pan, {
         ...springConfig,
         toValue,
         useNativeDriver: false,
         duration: transitionDuration ? transitionDuration * 1000 : 1000
       }).start(handleAnimationEndToIndex);
     } else {
-      _Animated.default.spring(pan, {
+      Animated.spring(pan, {
         ...springConfig,
         toValue,
         useNativeDriver: false
       }).start(handleAnimationEndToIndex);
     }
   }, [pan, springConfig, handleAnimationEnd, transitionDuration, isAutoPlayEnabled, enablePeeking]);
-  const stopAutoplay = _react.default.useCallback(() => {
+  const stopAutoplay = React.useCallback(() => {
     if (autoPlayRef !== null && autoPlayRef !== void 0 && autoPlayRef.current) {
       clearTimeout(autoPlayRef === null || autoPlayRef === void 0 ? void 0 : autoPlayRef.current);
     }
   }, []);
-  const triggerRefocus = _react.default.useCallback(() => {
-    if (refocus && _Platform.default.OS === 'web') {
+  const triggerRefocus = React.useCallback(() => {
+    if (refocus && Platform.OS === 'web') {
       var _firstFocusRef$curren;
-      (_firstFocusRef$curren = firstFocusRef.current) === null || _firstFocusRef$curren === void 0 ? void 0 : _firstFocusRef$curren.focus({
+      (_firstFocusRef$curren = firstFocusRef.current) === null || _firstFocusRef$curren === void 0 || _firstFocusRef$curren.focus({
         preventScroll: true,
         focusVisible: false
       });
     }
   }, [refocus, firstFocusRef]);
-  const updateIndex = _react.default.useCallback(function () {
+  const updateIndex = React.useCallback(function () {
     let delta = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 1;
     let transitionMode = arguments.length > 1 ? arguments[1] : undefined;
     const toValue = {
@@ -389,7 +382,7 @@ const Carousel = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) => {
     if (onIndexChanged) onIndexChanged(calcDelta, index);
     return calcDelta;
   }, [handleAnimationStart, triggerRefocus, slideDuration, updateOffset, animate, childrenArray.length, onIndexChanged, isCarouselPlaying, stopAutoplay, isAutoPlayEnabled]);
-  const startAutoplay = _react.default.useCallback(() => {
+  const startAutoplay = React.useCallback(() => {
     stopAutoplay();
     if (isAutoPlayEnabled) {
       autoPlayRef.current = setTimeout(() => {
@@ -400,27 +393,27 @@ const Carousel = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) => {
       }, Math.abs(slideDuration) * 1000);
     }
   }, [handleAnimationStart, triggerRefocus, updateIndex, updateOffset, slideDuration, stopAutoplay, isAutoPlayEnabled]);
-  const fixOffsetAndGo = _react.default.useCallback((delta, transitionMode) => {
+  const fixOffsetAndGo = React.useCallback((delta, transitionMode) => {
     updateOffset();
     handleAnimationStart(activeIndexRef.current);
     updateIndex(delta, transitionMode);
     triggerRefocus();
   }, [updateIndex, updateOffset, handleAnimationStart, triggerRefocus]);
-  const goToNeighboring = _react.default.useCallback(function () {
+  const goToNeighboring = React.useCallback(function () {
     let toPrev = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
     let transitionMode = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : TRANSITION_MODES.MANUAL;
     fixOffsetAndGo(toPrev ? -1 : 1, transitionMode);
   }, [fixOffsetAndGo]);
-  _react.default.useEffect(() => {
+  React.useEffect(() => {
     activeIndexRef.current = activeIndex;
   }, [activeIndex]);
-  _react.default.useEffect(() => {
+  React.useEffect(() => {
     reduceMotionRef.current = reduceMotionEnabled;
   }, [reduceMotionEnabled]);
-  _react.default.useEffect(() => {
+  React.useEffect(() => {
     containerLayoutRef.current = containerLayout;
   }, [containerLayout]);
-  _react.default.useEffect(() => {
+  React.useEffect(() => {
     pan.x.addListener(_ref4 => {
       let {
         value
@@ -442,22 +435,22 @@ const Carousel = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) => {
       pan.y.removeAllListeners();
     };
   }, [pan.x, pan.y, startAutoplay, stopAutoplay, isCarouselPlaying]);
-  _react.default.useEffect(() => {
-    const subscription = _Dimensions.default.addEventListener('change', () => {
+  React.useEffect(() => {
+    const subscription = Dimensions.addEventListener('change', () => {
       updateOffset();
     });
     return () => {
       if (subscription.remove) {
         subscription.remove();
       } else {
-        _Dimensions.default.removeEventListener('change', updateOffset);
+        Dimensions.removeEventListener('change', updateOffset);
       }
     };
   }, [updateOffset]);
-  _react.default.useEffect(() => {
+  React.useEffect(() => {
     setIsAutoPlayEnabled(autoPlay && slideDuration > 0 && transitionDuration > 0 && childrenArray.length > 1);
   }, [autoPlay, slideDuration, transitionDuration, childrenArray.length]);
-  _react.default.useEffect(() => {
+  React.useEffect(() => {
     return () => {
       stopAutoplay();
     };
@@ -489,16 +482,16 @@ const Carousel = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) => {
     } = _ref7;
     return setPreviousNextNavigationButtonWidth(width);
   };
-  const isSwipeAllowed = _react.default.useCallback(() => {
+  const isSwipeAllowed = React.useCallback(() => {
     if (childrenArray.length === 1) {
       return false;
     }
-    if (_Platform.default.OS === 'web') {
+    if (Platform.OS === 'web') {
       return !!(viewport === 'xs' || viewport === 'sm');
     }
     return true;
   }, [viewport, childrenArray.length]);
-  const panResponder = _react.default.useMemo(() => _PanResponder.default.create({
+  const panResponder = React.useMemo(() => PanResponder.create({
     onPanResponderTerminationRequest: () => false,
     onMoveShouldSetResponderCapture: () => true,
     onMoveShouldSetPanResponderCapture: (_, gestureState) => {
@@ -516,7 +509,7 @@ const Carousel = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) => {
     onPanResponderGrant: () => {
       updateOffset();
     },
-    onPanResponderMove: _Animated.default.event([null, {
+    onPanResponderMove: Animated.event([null, {
       dx: pan.x
     }], {
       useNativeDriver: false
@@ -538,13 +531,13 @@ const Carousel = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) => {
       isSwiping.current = false;
     }
   }), [updateIndex, updateOffset, animate, isSwipeAllowed, minDistanceForAction, handleAnimationStart, minDistanceToCapture, pan.x, startAutoplay, stopAutoplay, isCarouselPlaying]);
-  const goToNext = _react.default.useCallback(() => {
+  const goToNext = React.useCallback(() => {
     goToNeighboring();
   }, [goToNeighboring]);
-  const goToPrev = _react.default.useCallback(() => {
+  const goToPrev = React.useCallback(() => {
     goToNeighboring(true);
   }, [goToNeighboring]);
-  const goTo = _react.default.useCallback(function () {
+  const goTo = React.useCallback(function () {
     let index = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
     const delta = index - activeIndexRef.current;
     if (delta) {
@@ -560,13 +553,13 @@ const Carousel = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) => {
     raised: !(variant !== null && variant !== void 0 && variant.inverse) && true,
     inverse: variant === null || variant === void 0 ? void 0 : variant.inverse
   };
-  const getCopyWithPlaceholders = _react.default.useCallback(copyKey => {
+  const getCopyWithPlaceholders = React.useCallback(copyKey => {
     const copyText = getCopy(copyKey).replace(/%\{title\}/g, title).replace(/%\{itemLabel\}/g, itemLabel).replace(/%\{stepNumber\}/g, activeIndex + 1).replace(/%\{stepCount\}/g, childrenArray.length);
 
     // First word might be a lowercase placeholder: capitalize the first letter
     return `${copyText[0].toUpperCase()}${copyText.slice(1)}`;
   }, [activeIndex, childrenArray.length, itemLabel, getCopy, title]);
-  const activePanelNavigation = tabs && showPanelTabs ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_CarouselTabsPanel.default, {
+  const activePanelNavigation = tabs && showPanelTabs ? /*#__PURE__*/_jsx(CarouselTabsPanel, {
     items: tabs
   }) : panelNavigation;
   const isFirstFocusContainer = Boolean(refocus && !skipLinkHref);
@@ -600,7 +593,7 @@ const Carousel = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) => {
       focusable: true
     })
   };
-  const onAnimationControlButtonPress = _react.default.useCallback(() => {
+  const onAnimationControlButtonPress = React.useCallback(() => {
     if (isCarouselPlaying) {
       stopAutoplay();
     } else {
@@ -608,7 +601,7 @@ const Carousel = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) => {
     }
     setisCarouselPlaying(prevState => !prevState);
   }, [isCarouselPlaying, stopAutoplay, startAutoplay]);
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_CarouselContext.CarouselProvider, {
+  return /*#__PURE__*/_jsxs(CarouselProvider, {
     activeIndex: activeIndex,
     goTo: goTo,
     getCopyWithPlaceholders: getCopyWithPlaceholders,
@@ -618,9 +611,9 @@ const Carousel = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) => {
     firstFocusRef: firstFocusRef,
     refocus: refocus,
     width: containerLayout.width,
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_View.default, {
+    children: [/*#__PURE__*/_jsxs(View, {
       style: [staticStyles.root, {
-        ..._Platform.default.select({
+        ...Platform.select({
           web: {
             outline: 'none'
           }
@@ -630,7 +623,7 @@ const Carousel = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) => {
       ref: ref,
       ...systemProps,
       ...containerProps,
-      children: [isAutoPlayEnabled ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+      children: [isAutoPlayEnabled ? /*#__PURE__*/_jsx(View, {
         style: [staticStyles.animationControlButton, selectControlButtonPositionStyles({
           positionVariant: previousNextNavigationPosition,
           buttonWidth: previousNextNavigationButtonWidth,
@@ -638,16 +631,16 @@ const Carousel = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) => {
           spaceBetweenSlideAndButton: spaceBetweenSlideAndPreviousNextNavigation,
           enablePeeking
         })],
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_IconButton.default, {
+        children: /*#__PURE__*/_jsx(IconButton, {
           icon: isCarouselPlaying ? pauseIcon : playIcon,
           accessibilityLabel: isCarouselPlaying ? getCopy('pauseButtonLabel') : getCopy('playButtonLabel'),
           variant: previousNextIconButtonVariants,
           onPress: onAnimationControlButtonPress
         })
-      }) : null, showPreviousNextNavigation && childrenArray.length > 1 ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+      }) : null, showPreviousNextNavigation && childrenArray.length > 1 ? /*#__PURE__*/_jsx(View, {
         style: selectPreviousNextNavigationButtonStyles(previousNextNavigationButtonWidth, previousNextNavigationPosition, spaceBetweenSlideAndPreviousNextNavigation, isFirstSlide, isLastSlide, true, enablePeeking),
         testID: "previous-button-container",
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_IconButton.default, {
+        children: /*#__PURE__*/_jsx(IconButton, {
           onLayout: onPreviousNextNavigationButtonLayout,
           icon: previousIcon,
           onPress: goToPrev,
@@ -655,20 +648,20 @@ const Carousel = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) => {
           accessibilityLabel: getCopyWithPlaceholders('iconButtonLabel').replace('%{targetStep}', activeIndex),
           tokens: selectIconStyles(themeTokens)
         })
-      }) : null, Boolean(skipLinkHref) && /*#__PURE__*/(0, _jsxRuntime.jsx)(_SkipLink.default, {
+      }) : null, Boolean(skipLinkHref) && /*#__PURE__*/_jsx(SkipLink, {
         ref: firstFocusRef,
         href: skipLinkHref,
         children: getCopyWithPlaceholders('skipLink')
-      }), !isFirstFocusContainer && /*#__PURE__*/(0, _jsxRuntime.jsx)(_A11yText.default
+      }), !isFirstFocusContainer && /*#__PURE__*/_jsx(A11yText
       // Read the current slide position to screen readers on slide.
       // If it's set to refocus and doesn't have a SkipLink to focus to, focus this.
       , {
         accessibilityLiveRegion: !skipLinkHref && refocus ? undefined : 'polite',
         text: getCopyWithPlaceholders('stepTrackerLabel')
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+      }), /*#__PURE__*/_jsx(View, {
         style: selectContainerStyles(containerLayout.width),
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Animated.default.View, {
-          style: _StyleSheet.default.flatten([selectSwipeAreaStyles(childrenArray.length, containerLayout.width, enablePeeking), {
+        children: /*#__PURE__*/_jsx(Animated.View, {
+          style: StyleSheet.flatten([selectSwipeAreaStyles(childrenArray.length, containerLayout.width, enablePeeking), {
             transform: [{
               translateX: pan.x
             }, {
@@ -676,27 +669,27 @@ const Carousel = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) => {
             }]
           }]),
           ...panResponder.panHandlers,
-          ...(0, _utils.getA11yPropsFromHtmlTag)(tag),
+          ...getA11yPropsFromHtmlTag(tag),
           // In iframes on Mac (e.g. in Storybook), this content may be misread or read twice.
           // This is a known Voiceover bug: https://github.com/phetsims/a11y-research/issues/132
           accessibilityLiveRegion: accessibilityLiveRegion,
           children: childrenArray.map((element, index) => {
             const hidden = !isAnimating && index !== activeIndex;
-            const clonedElement = /*#__PURE__*/_react.default.cloneElement(element, {
+            const clonedElement = /*#__PURE__*/React.cloneElement(element, {
               elementIndex: index,
               hidden: enablePeeking ? false : hidden,
               enablePeeking,
               peekingProps: getPeekingProps(viewport)
             });
-            return /*#__PURE__*/(0, _jsxRuntime.jsx)(_react.default.Fragment, {
+            return /*#__PURE__*/_jsx(React.Fragment, {
               children: clonedElement
             }, index.toFixed(2));
           })
         })
-      }), showPreviousNextNavigation && childrenArray.length > 1 ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+      }), showPreviousNextNavigation && childrenArray.length > 1 ? /*#__PURE__*/_jsx(View, {
         style: selectPreviousNextNavigationButtonStyles(previousNextNavigationButtonWidth, previousNextNavigationPosition, spaceBetweenSlideAndPreviousNextNavigation, isFirstSlide, isLastSlide, false, enablePeeking),
         testID: "next-button-container",
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_IconButton.default, {
+        children: /*#__PURE__*/_jsx(IconButton, {
           onLayout: onPreviousNextNavigationButtonLayout,
           icon: nextIcon,
           onPress: goToNext,
@@ -710,54 +703,54 @@ const Carousel = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) => {
 });
 Carousel.propTypes = {
   ...selectedSystemPropTypes,
-  tokens: (0, _utils.getTokensPropType)('Carousel'),
-  variant: _utils.variantProp.propType,
+  tokens: getTokensPropType('Carousel'),
+  variant: variantProp.propType,
   /**
    * Prop related to StepTracker Variants
    */
-  stepTrackerVariant: _utils.variantProp.propType,
+  stepTrackerVariant: variantProp.propType,
   /**
    * Slides to render in Carousel. Wrap individual slides in `Carousel.Item`
    */
-  children: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.node), _propTypes.default.node]).isRequired,
+  children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]).isRequired,
   /**
    * Lowercase language-appropriate user-facing description of what each Carousel slide represents.
    * This is used when generating item labels. For example, if a carousel contains offers,
    * pass itemLabel="summer offer" (or copy="fr" and an appropriate French translation) to genereate
    * accessible labels such as "Summer offer 1 of 3" and "Show summer offer 2 of 3".
    */
-  itemLabel: _propTypes.default.string,
+  itemLabel: PropTypes.string,
   /**
    * `inside` renders the previous and next buttons inside the slide
    * `outside` renders the previous and next buttons outside the slide
    * `edge` renders the previous and next buttons at the edge of the slide
    */
-  previousNextNavigationPosition: _propTypes.default.oneOf(['inside', 'outside', 'edge']),
+  previousNextNavigationPosition: PropTypes.oneOf(['inside', 'outside', 'edge']),
   /**
    * Defines the size of the `IconButton` which is being used to render next and previous buttons
    */
-  previousNextIconSize: _propTypes.default.oneOf(['default', 'small', 'large']),
+  previousNextIconSize: PropTypes.oneOf(['default', 'small', 'large']),
   /**
    * Carousel uses `Animated.spring` to animate slide changes, use this option to pass custom animation configuration
    */
-  springConfig: _propTypes.default.object,
+  springConfig: PropTypes.object,
   /**
    * An array of objects containing information on the thumbnails to be rendered as navigation panel
    */
-  thumbnails: _propTypes.default.arrayOf(_propTypes.default.shape({
-    accessibilityLabel: _propTypes.default.string,
-    alt: _propTypes.default.string,
-    src: _propTypes.default.string
+  thumbnails: PropTypes.arrayOf(PropTypes.shape({
+    accessibilityLabel: PropTypes.string,
+    alt: PropTypes.string,
+    src: PropTypes.string
   })),
   /**
    * Minimal part of slide width must be swiped for changing index.
    * Otherwise animation restore current slide. Default value 0.2 means that 20% must be swiped for change index
    */
-  minDistanceForAction: _propTypes.default.number,
+  minDistanceForAction: PropTypes.number,
   /**
    * Initiate animation after swipe this distance.
    */
-  minDistanceToCapture: _propTypes.default.number,
+  minDistanceToCapture: PropTypes.number,
   /**
    * Called when active index changed
    * This function is also provided with a parameter indicating changed index (either 1, or -1)
@@ -774,18 +767,18 @@ Carousel.propTypes = {
    * ```
    * Caution: Always consider wrapping your callback for `onIndexChanged` in `React.useCallback` in order to avoid bugs and performance issues
    */
-  onIndexChanged: _propTypes.default.func,
+  onIndexChanged: PropTypes.func,
   /**
    * If this is a complex carousel with a lot of focusable content, pass a href for a skip link. Typically, this will be an anchor link
    * with the ID of a focusable element immediately after the Carousel, e.g. `'#section-2-heading'`.
    */
-  skipLinkHref: _propTypes.default.string,
+  skipLinkHref: PropTypes.string,
   /**
    * If provided, defaults the navigation panel to a CarouselTabsPanel element passing each item as props for one tab.
    *
    * Be careful to ensure that the order of each element in the items array matches the order of each child in the Carousel.
    */
-  tabs: _propTypes.default.arrayOf(_propTypes.default.shape(_CarouselTabsPanelItem.default.propTypes || {})),
+  tabs: PropTypes.arrayOf(PropTypes.shape(CarouselTabsPanelItem.propTypes || {})),
   /**
    * If true, whenever a new slide comes into view, the focus of the Carousel switches to the start.
    *
@@ -793,7 +786,7 @@ Carousel.propTypes = {
    *
    * If skipLinkHref is passed, the focus target will be the SkipLink; if not, it'll be an empty element before the slide content.
    */
-  refocus: _propTypes.default.bool,
+  refocus: PropTypes.bool,
   /**
    * Use this to render a custom panel navigation element instead of the default StepTracker's based navigation
    * You can make use of `useCarousel` within your custom panel navigation component to hook into various Carousel states such as:
@@ -808,7 +801,7 @@ Carousel.propTypes = {
    *    </Carousel>
    * ```
    */
-  panelNavigation: _propTypes.default.element,
+  panelNavigation: PropTypes.element,
   /**
    * When slide animation start
    * This function is also provided with a parameter indicating the current slide index before animation starts
@@ -825,7 +818,7 @@ Carousel.propTypes = {
    * ```
    * Caution: Always consider wrapping your callback for `onAnimationStart` in `React.useCallback` in order to avoid bugs and performance issues
    */
-  onAnimationStart: _propTypes.default.func,
+  onAnimationStart: PropTypes.func,
   /**
    * When slide animation end with parameter of current index (after animation ends)
    * This function is also provided with a parameter indicating the updated slide index after animation ends
@@ -842,26 +835,26 @@ Carousel.propTypes = {
    * ```
    * Caution: Always consider wrapping your callback for `onAnimationEnd` in `React.useCallback` in order to avoid bugs and performance issues
    */
-  onAnimationEnd: _propTypes.default.func,
+  onAnimationEnd: PropTypes.func,
   /**
    * Use this to override the default text for panel navigation
    */
-  panelNavigationTextDictionary: _propTypes.default.shape({
-    en: _propTypes.default.shape({
-      stepTrackerLabel: _propTypes.default.string.isRequired
+  panelNavigationTextDictionary: PropTypes.shape({
+    en: PropTypes.shape({
+      stepTrackerLabel: PropTypes.string.isRequired
     }),
-    fr: _propTypes.default.shape({
-      stepTrackerLabel: _propTypes.default.string.isRequired
+    fr: PropTypes.shape({
+      stepTrackerLabel: PropTypes.string.isRequired
     })
   }),
   /**
    * Provide custom accessibilityRole for Carousel container
    */
-  accessibilityRole: _propTypes.default.string,
+  accessibilityRole: PropTypes.string,
   /**
    * Provide custom accessibilityLabel for Carousel container
    */
-  accessibilityLabel: _propTypes.default.string,
+  accessibilityLabel: PropTypes.string,
   /**
    * HTML tag to use for the Carousel item's immediate parent. Defaults to `'ul'` so that
    * assistive technology tools know to intepret the carousel as a list.
@@ -869,33 +862,32 @@ Carousel.propTypes = {
    * Note that if the immediate Carousel children do not all render as `'li'` elements,
    * this should be changed (e.g. pass tag="div") because only 'li' is a valid child of 'ul'.
    */
-  tag: _propTypes.default.oneOf(_utils.layoutTags),
+  tag: PropTypes.oneOf(layoutTags),
   /**
    * If set to `true`, the Carousel will automatically transition between slides
    * and show the play/pause button
    * - Default value is `false`
    * - `slideDuration` and `transitionDuration` are required to be set for this to work
    */
-  autoPlay: _propTypes.default.bool,
+  autoPlay: PropTypes.bool,
   /**
    * Duration of the time in seconds spent on each slide
    * - Default value is `0`
    * - `autoPlay` and `transitionDuration` are required to be set for this to work
    */
-  slideDuration: _propTypes.default.number,
+  slideDuration: PropTypes.number,
   /**
    * Duration of the time in seconds between each slide transition
    * - Default value is `0`
    * - `autoPlay` and `slideDuration` are required to be set for this to work
    */
-  transitionDuration: _propTypes.default.number,
+  transitionDuration: PropTypes.number,
   /**
    * If set to `true`, the Carousel will show the previous and next slides
    * - Default value is `false`
    */
-  enablePeeking: _propTypes.default.bool
+  enablePeeking: PropTypes.bool
 };
-Carousel.Item = _CarouselItem.default;
+Carousel.Item = CarouselItem;
 Carousel.displayName = 'Carousel';
-var _default = Carousel;
-exports.default = _default;
+export default Carousel;