@telus-uds/components-base 2.4.0 → 3.0.0

package/lib/Carousel/Carousel.js

@@ -1,981 +0,0 @@
-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 { ITEMS_PER_VIEWPORT_MD, ITEMS_PER_VIEWPORT_LG_XL } from './Constants';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const TRANSITION_MODES = {
-  MANUAL: 'manual',
-  AUTOMATIC: 'automatic',
-  SWIPE: 'swipe'
-};
-const staticStyles = StyleSheet.create({
-  root: {
-    backgroundColor: 'transparent',
-    justifyContent: 'center',
-    alignItems: 'center',
-    position: 'relative',
-    top: 0,
-    left: 0
-  },
-  animationControlButton: {
-    position: 'absolute',
-    zIndex: 1,
-    right: Platform.OS === 'web' ? undefined : 40,
-    top: 40
-  }
-});
-const selectContainerStyles = width => ({
-  backgroundColor: 'transparent',
-  overflow: 'hidden',
-  width
-});
-const selectSwipeAreaStyles = (count, width, enablePeeking, enableDisplayMultipleItemsPerSlide) => ({
-  width: width * count,
-  justifyContent: enablePeeking || enableDisplayMultipleItemsPerSlide ? 'flex-start' : 'space-between',
-  flexDirection: 'row'
-});
-const getDynamicPositionProperty = areStylesAppliedOnPreviousButton => areStylesAppliedOnPreviousButton ? 'left' : 'right';
-const selectControlButtonPositionStyles = _ref => {
-  let {
-    positionVariant,
-    buttonWidth,
-    positionProperty = getDynamicPositionProperty(),
-    spaceBetweenSlideAndButton,
-    enablePeeking,
-    enableDisplayMultipleItemsPerSlide
-  } = _ref;
-  const styles = {};
-  if (positionVariant === 'edge') {
-    styles[positionProperty] = -1 * (buttonWidth / 2);
-  } else if (positionVariant === 'inside') {
-    styles[positionProperty] = 0;
-  } else if (positionVariant === 'outside') {
-    if (enablePeeking || enableDisplayMultipleItemsPerSlide) {
-      styles[positionProperty] = 0;
-    } else {
-      styles[positionProperty] = -1 * (spaceBetweenSlideAndButton + buttonWidth);
-    }
-  }
-  return styles;
-};
-const selectPreviousNextNavigationButtonStyles = (previousNextNavigationButtonWidth, previousNextNavigationPosition, spaceBetweenSlideAndPreviousNextNavigation, isFirstSlide, isLastSlide, areStylesAppliedOnPreviousButton, enablePeeking, enableDisplayMultipleItemsPerSlide) => {
-  const styles = {
-    zIndex: 1,
-    position: 'absolute'
-  };
-  if (isFirstSlide) {
-    styles.visibility = areStylesAppliedOnPreviousButton ? 'hidden' : 'visible';
-  } else if (isLastSlide) {
-    styles.visibility = areStylesAppliedOnPreviousButton ? 'visible' : 'hidden';
-  } else {
-    styles.visibility = 'visible';
-  }
-  return {
-    ...styles,
-    ...selectControlButtonPositionStyles({
-      positionVariant: previousNextNavigationPosition,
-      buttonWidth: previousNextNavigationButtonWidth,
-      positionProperty: getDynamicPositionProperty(areStylesAppliedOnPreviousButton),
-      spaceBetweenSlideAndButton: spaceBetweenSlideAndPreviousNextNavigation,
-      enablePeeking,
-      enableDisplayMultipleItemsPerSlide
-    })
-  };
-};
-const getPeekingProps = viewport => {
-  if (viewport === 'xs' || viewport === 'sm' || viewport === 'md') {
-    return {
-      peekingFirstSpace: 48,
-      peekingGap: 16,
-      peekingLastSpace: 48,
-      peekingMarginLeft: 24,
-      peekingMarginRight: 24,
-      peekingMiddleSpace: 28
-    };
-  }
-  return {
-    peekingFirstSpace: 48,
-    peekingGap: 16,
-    peekingLastSpace: 48,
-    peekingMarginLeft: 16,
-    peekingMarginRight: 16,
-    peekingMiddleSpace: 24
-  };
-};
-const getTotalItems = (enableDisplayMultipleItemsPerSlide, childrenArray, viewport) => {
-  if (enableDisplayMultipleItemsPerSlide) {
-    switch (viewport) {
-      case 'xs':
-      case 'sm':
-        return childrenArray.length;
-      case 'md':
-        return Math.ceil(childrenArray.length / ITEMS_PER_VIEWPORT_MD);
-      case 'lg':
-      case 'xl':
-        return Math.ceil(childrenArray.length / ITEMS_PER_VIEWPORT_LG_XL);
-      default:
-        break;
-    }
-  }
-  return childrenArray.length;
-};
-
-/**
- * Calculates the final width of the carousel container for displacement purposes based on various conditions.
- *
- * @param {number} containerWidth - The initial width of the container.
- * @param {boolean} enablePeeking - Flag indicating if peeking is enabled.
- * @param {object} viewport - The viewport properties.
- * @param {object} activeIndexRef - A ref object holding the current active index.
- * @param {number} totalItems - The total number of items in the carousel.
- * @param {number} calcDelta - The delta value used for calculations.
- * @returns {number} - The final calculated width of the container.
- *
- * The function adjusts the container width for displacement purposes based on the peeking properties and the position
- * of the active item (first, middle, or last). It considers different peeking spaces and gaps
- * to ensure the correct width is calculated for the carousel to display properly.
- */
-const calculateFinalWidth = (containerWidth, enablePeeking, viewport, activeIndexRef, totalItems, calcDelta) => {
-  let finalWidth = containerWidth;
-  if (enablePeeking) {
-    const {
-      peekingFirstSpace,
-      peekingGap,
-      peekingLastSpace,
-      peekingMiddleSpace
-    } = getPeekingProps(viewport);
-    const isFirst = activeIndexRef.current === 0;
-    const isLast = activeIndexRef.current + 1 >= totalItems;
-    const isMiddle = !isFirst && !isLast;
-    const basePeekingSpace = peekingFirstSpace + peekingGap + peekingMiddleSpace;
-    const middlePeekingSpace = peekingMiddleSpace * 2 + peekingGap;
-    if (isFirst) {
-      finalWidth -= basePeekingSpace;
-      if (activeIndexRef.current + 1 === totalItems - 1) {
-        finalWidth -= peekingLastSpace - peekingMiddleSpace;
-      }
-    } else if (isMiddle) {
-      if (calcDelta > 0) {
-        finalWidth -= basePeekingSpace + middlePeekingSpace * activeIndexRef.current;
-        if (activeIndexRef.current + 1 === totalItems - 1) {
-          finalWidth -= peekingLastSpace - peekingMiddleSpace;
-        }
-      } else {
-        finalWidth += basePeekingSpace + middlePeekingSpace * (activeIndexRef.current - 2);
-        if (activeIndexRef.current - 1 === 0) {
-          finalWidth -= peekingFirstSpace - peekingMiddleSpace;
-        }
-      }
-    } else if (isLast) {
-      finalWidth += basePeekingSpace + middlePeekingSpace * (activeIndexRef.current - 2);
-      if (activeIndexRef.current - 1 === 0) {
-        finalWidth -= peekingLastSpace - peekingMiddleSpace;
-      }
-    }
-  }
-  return finalWidth;
-};
-const selectIconStyles = _ref2 => {
-  let {
-    iconBackgroundColor
-  } = _ref2;
-  return {
-    backgroundColor: iconBackgroundColor
-  };
-};
-const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps]);
-
-/**
- * Carousel is a general-purpose content slider that can be used to render content in terms of slides.
-
-  ## Usage
-  - `Carousel` is a top-level export from `@telus-uds/components-base` which is used to render a Carousel
-  - Immediately within `Carousel`, individual slides are wrapped in `Carousel.Item` for the top-level `Carousel` to know how to identify an individual slide
-  - You can use any UDS component or other platform-specific component, (based on the platform you're rendering) to achieve any desired layout
-  - By default, Carousel takea all the `width` available to it and the `height` is determined based on the content in the slide with more content
-  - You may want to wrap Carousel in other layout components like `Box`, `FlexGrid` etc, to achieve a responsive layout of your need
-
-  ## `useCarousel` custom hook
-
-  ```jsx
-  import { useCarousel } from '@telus-uds/components-base'
-
-  const SomeComponentWithinCarouselItem = () => {
-    const {
-      activeIndex,
-      totalItems,
-      width,
-      goTo
-    } = useCarousel()
-    return <Text>Hi!</Text>
-  }
-  ```
-
-  You can use `useCarousel` to hook into internal state of the Carousel component like:
-  - `activeIndex`: Index of the current slide
-  - `totalItems`: Total number of items/slides passed to the Carousel
-  - `width`: Width of the individual carousel slide
-  - `goTo`: A function to go to a particular slide by passing the index of that slide, e.g: goTo(0) where `0` is the index of the first slide
-
-  ## Accessibility
-
-  - Top-level `Carousel` and `Carousel.Item` can take all possible React Native's `View` and `a11y` props
-  - If your slide contains input elements like buttons, you may want to configure them to be only focusable when `activeIndex` is equal to the current slide index in order to avoid tabbing going between slides
-
-  ## Platform considerations
-  The component is available on both native platforms and web.
-
-  ## Other considerations
-  - You may want to use the same kind of layout in all your slides to avoid visual and height differences
-  - `previous` and `next` navigation buttons are automatically removed in `sm` and `xs` viewports, as these smaller viewports offers swipe functionality
-
-  ## Tokens
-
-  You can override the following tokens in exceptional circumstances:
-  - `previousIcon` - Icon of the previous button
-  - `nextIcon` - Icon of the next button
-  - `showPreviousNextNavigation` - If you want to show/hide the previous/next navigation
-  - `showPanelNavigation` - If you want to show/hide the panel navigation
-  - `spaceBetweenSlideAndPreviousNextNavigation` - Horizontal space between slide and previous/next navigational buttons
-  - `spaceBetweenSlideAndPanelNavigation` - Vertical space between slide area and panel navigation area
- */
-const Carousel = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
-  let {
-    tokens,
-    variant,
-    children,
-    itemLabel = 'item',
-    previousNextNavigationPosition = 'inside',
-    stepTrackerVariant,
-    previousNextIconSize = 'default',
-    minDistanceToCapture = 5,
-    minDistanceForAction = 0.2,
-    onAnimationStart,
-    onAnimationEnd,
-    onIndexChanged,
-    skipLinkHref,
-    tabs,
-    refocus = Boolean(tabs),
-    title = 'carousel',
-    springConfig = undefined,
-    thumbnails = undefined,
-    enableDisplayMultipleItemsPerSlide = false,
-    panelNavigation = thumbnails ? /*#__PURE__*/_jsx(CarouselThumbnailNavigation, {
-      thumbnails: thumbnails
-    }) : /*#__PURE__*/_jsx(CarouselStepTracker, {
-      variant: stepTrackerVariant,
-      enableDisplayMultipleItemsPerSlide: enableDisplayMultipleItemsPerSlide
-    }),
-    tag = 'ul',
-    accessibilityRole,
-    accessibilityLabel,
-    accessibilityLiveRegion = 'polite',
-    copy,
-    slideDuration = 0,
-    transitionDuration = 0,
-    autoPlay = false,
-    enablePeeking = false,
-    ...rest
-  } = _ref3;
-  let childrenArray = unpackFragment(children);
-  const viewport = useViewport();
-  const totalItems = getTotalItems(enableDisplayMultipleItemsPerSlide, childrenArray, viewport);
-  const autoPlayFeatureEnabled = autoPlay && slideDuration > 0 && transitionDuration > 0 && totalItems > 1;
-  // if `Carousel` only has one `Carousel.Item`, convert this to a single-item array
-  if (!Array.isArray(childrenArray)) {
-    childrenArray = [childrenArray];
-  }
-  const getCopy = useCopy({
-    dictionary,
-    copy
-  });
-  const themeTokens = useThemeTokens('Carousel', tokens, variant, {
-    viewport
-  });
-  const {
-    previousIcon,
-    nextIcon,
-    playIcon,
-    pauseIcon,
-    showPreviousNextNavigation,
-    showPanelNavigation,
-    showPanelTabs,
-    spaceBetweenSlideAndPreviousNextNavigation
-  } = themeTokens;
-  const [activeIndex, setActiveIndex] = React.useState(0);
-  const activeIndexRef = React.useRef(activeIndex);
-  const {
-    reduceMotionEnabled
-  } = useA11yInfo();
-  const reduceMotionRef = React.useRef(reduceMotionEnabled);
-  const [containerLayout, setContainerLayout] = React.useState({
-    x: 0,
-    y: 0,
-    width: 0
-  });
-  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.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 >= totalItems;
-  const handleAnimationStart = React.useCallback(function () {
-    if (typeof onAnimationStart === 'function') onAnimationStart(...arguments);
-    setIsAnimating(true);
-  }, [onAnimationStart]);
-  const handleAnimationEnd = React.useCallback(function () {
-    if (typeof onAnimationEnd === 'function') onAnimationEnd(...arguments);
-    setIsAnimating(false);
-  }, [onAnimationEnd]);
-  const updateOffset = React.useCallback(() => {
-    animatedX.current = containerLayoutRef.current.width * activeIndexRef.current * -1;
-    animatedY.current = 0;
-    pan.setOffset({
-      x: animatedX.current,
-      y: animatedY.current
-    });
-    pan.setValue({
-      x: 0,
-      y: 0
-    });
-  }, [pan, animatedX]);
-  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];
-      }
-      return handleAnimationEnd(toIndex, ...args);
-    };
-    if (reduceMotionRef.current || isSwiping.current) {
-      Animated.timing(pan, {
-        toValue,
-        duration: 1,
-        useNativeDriver: false
-      }).start(handleAnimationEndToIndex);
-    } else if (isAutoPlayEnabled) {
-      Animated.timing(pan, {
-        ...springConfig,
-        toValue,
-        useNativeDriver: false,
-        duration: transitionDuration * 1000
-      }).start(handleAnimationEndToIndex);
-    } else if (enablePeeking || enableDisplayMultipleItemsPerSlide) {
-      Animated.timing(pan, {
-        ...springConfig,
-        toValue,
-        useNativeDriver: false,
-        duration: transitionDuration ? transitionDuration * 1000 : 1000
-      }).start(handleAnimationEndToIndex);
-    } else {
-      Animated.spring(pan, {
-        ...springConfig,
-        toValue,
-        useNativeDriver: false
-      }).start(handleAnimationEndToIndex);
-    }
-  }, [pan, springConfig, handleAnimationEnd, transitionDuration, isAutoPlayEnabled, enablePeeking, enableDisplayMultipleItemsPerSlide]);
-  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.useCallback(() => {
-    if (refocus && Platform.OS === 'web') {
-      var _firstFocusRef$curren;
-      (_firstFocusRef$curren = firstFocusRef.current) === null || _firstFocusRef$curren === void 0 || _firstFocusRef$curren.focus({
-        preventScroll: true,
-        focusVisible: false
-      });
-    }
-  }, [refocus, firstFocusRef]);
-  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 = {
-      x: 0,
-      y: 0
-    };
-    let skipChanges = !delta;
-    let calcDelta = delta;
-    if (activeIndexRef.current <= 0 && delta < 0) {
-      skipChanges = transitionMode !== TRANSITION_MODES.AUTOMATIC;
-      calcDelta = totalItems + delta;
-    } else if (activeIndexRef.current + 1 >= totalItems && delta > 0) {
-      skipChanges = transitionMode !== TRANSITION_MODES.AUTOMATIC;
-      calcDelta = -1 * activeIndexRef.current + delta - 1;
-    }
-    const index = activeIndexRef.current + calcDelta;
-    if (skipChanges) {
-      animate(toValue, index);
-      return calcDelta;
-    }
-    stopAutoplay();
-    setActiveIndex(index);
-    const finalWidth = calculateFinalWidth(containerLayoutRef.current.width, enablePeeking, viewport, activeIndexRef, totalItems, calcDelta);
-    toValue.x = finalWidth * -1 * calcDelta;
-    animate(toValue, index);
-    if (isCarouselPlaying) {
-      stopAutoplay();
-      if (index === 0 && activeIndexRef.current + 1 === totalItems && transitionMode === TRANSITION_MODES.AUTOMATIC) {
-        setisCarouselPlaying(false);
-      } else if (isAutoPlayEnabled) {
-        autoPlayRef.current = setTimeout(() => {
-          updateOffset();
-          handleAnimationStart(activeIndexRef.current);
-          updateIndex(slideDuration < 0 ? -1 : 1, TRANSITION_MODES.AUTOMATIC);
-          triggerRefocus();
-        }, Math.abs(slideDuration) * 1000);
-      }
-    }
-    if (onIndexChanged) onIndexChanged(calcDelta, index);
-    return calcDelta;
-  }, [handleAnimationStart, triggerRefocus, slideDuration, updateOffset, animate, totalItems, onIndexChanged, isCarouselPlaying, stopAutoplay, isAutoPlayEnabled, viewport, enablePeeking]);
-  const startAutoplay = React.useCallback(() => {
-    stopAutoplay();
-    if (isAutoPlayEnabled) {
-      autoPlayRef.current = setTimeout(() => {
-        updateOffset();
-        handleAnimationStart(activeIndexRef.current);
-        updateIndex(slideDuration < 0 ? -1 : 1, TRANSITION_MODES.AUTOMATIC);
-        triggerRefocus();
-      }, Math.abs(slideDuration) * 1000);
-    }
-  }, [handleAnimationStart, triggerRefocus, updateIndex, updateOffset, slideDuration, stopAutoplay, isAutoPlayEnabled]);
-  const fixOffsetAndGo = React.useCallback((delta, transitionMode) => {
-    updateOffset();
-    handleAnimationStart(activeIndexRef.current);
-    updateIndex(delta, transitionMode);
-    triggerRefocus();
-  }, [updateIndex, updateOffset, handleAnimationStart, triggerRefocus]);
-  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.useEffect(() => {
-    activeIndexRef.current = activeIndex;
-  }, [activeIndex]);
-  React.useEffect(() => {
-    reduceMotionRef.current = reduceMotionEnabled;
-  }, [reduceMotionEnabled]);
-  React.useEffect(() => {
-    containerLayoutRef.current = containerLayout;
-  }, [containerLayout]);
-  React.useEffect(() => {
-    pan.x.addListener(_ref4 => {
-      let {
-        value
-      } = _ref4;
-      animatedX.current = value;
-    });
-    pan.y.addListener(_ref5 => {
-      let {
-        value
-      } = _ref5;
-      animatedY.current = value;
-    });
-    if (isCarouselPlaying) {
-      startAutoplay();
-    }
-    return () => {
-      stopAutoplay();
-      pan.x.removeAllListeners();
-      pan.y.removeAllListeners();
-    };
-  }, [pan.x, pan.y, startAutoplay, stopAutoplay, isCarouselPlaying]);
-  React.useEffect(() => {
-    const subscription = Dimensions.addEventListener('change', () => {
-      updateOffset();
-    });
-    return () => {
-      if (subscription.remove) {
-        subscription.remove();
-      } else {
-        Dimensions.removeEventListener('change', updateOffset);
-      }
-    };
-  }, [updateOffset]);
-  React.useEffect(() => {
-    setIsAutoPlayEnabled(autoPlay && slideDuration > 0 && transitionDuration > 0 && totalItems > 1);
-  }, [autoPlay, slideDuration, transitionDuration, totalItems]);
-  React.useEffect(() => {
-    return () => {
-      stopAutoplay();
-    };
-  }, [stopAutoplay]);
-  const onContainerLayout = _ref6 => {
-    let {
-      nativeEvent: {
-        layout: {
-          x,
-          y,
-          width
-        }
-      }
-    } = _ref6;
-    return setContainerLayout(prevState => ({
-      ...prevState,
-      x,
-      y,
-      width
-    }));
-  };
-  const onPreviousNextNavigationButtonLayout = _ref7 => {
-    let {
-      nativeEvent: {
-        layout: {
-          width
-        }
-      }
-    } = _ref7;
-    return setPreviousNextNavigationButtonWidth(width);
-  };
-  const isSwipeAllowed = React.useCallback(() => {
-    if (totalItems === 1) {
-      return false;
-    }
-    if (Platform.OS === 'web') {
-      return !!(viewport === 'xs' || viewport === 'sm');
-    }
-    return true;
-  }, [viewport, totalItems]);
-  const panResponder = React.useMemo(() => PanResponder.create({
-    onPanResponderTerminationRequest: () => false,
-    onMoveShouldSetResponderCapture: () => true,
-    onMoveShouldSetPanResponderCapture: (_, gestureState) => {
-      if (!isSwipeAllowed()) {
-        return false;
-      }
-      handleAnimationStart(activeIndexRef.current);
-      const allow = Math.abs(gestureState.dx) > minDistanceToCapture;
-      if (allow) {
-        isSwiping.current = true;
-        stopAutoplay();
-      }
-      return allow;
-    },
-    onPanResponderGrant: () => {
-      updateOffset();
-    },
-    onPanResponderMove: Animated.event([null, {
-      dx: pan.x
-    }], {
-      useNativeDriver: false
-    }),
-    onPanResponderRelease: (_, gesture) => {
-      if (isCarouselPlaying) {
-        startAutoplay();
-      }
-      const correction = gesture.moveX - gesture.x0;
-      if (Math.abs(correction) < containerLayoutRef.current.width * minDistanceForAction) {
-        animate({
-          x: 0,
-          y: 0
-        }, 0);
-      } else {
-        const delta = correction > 0 ? -1 : 1;
-        updateIndex(delta, TRANSITION_MODES.SWIPE);
-      }
-      isSwiping.current = false;
-    }
-  }), [updateIndex, updateOffset, animate, isSwipeAllowed, minDistanceForAction, handleAnimationStart, minDistanceToCapture, pan.x, startAutoplay, stopAutoplay, isCarouselPlaying]);
-  const goToNext = React.useCallback(() => {
-    goToNeighboring();
-  }, [goToNeighboring]);
-  const goToPrev = React.useCallback(() => {
-    goToNeighboring(true);
-  }, [goToNeighboring]);
-  const goTo = React.useCallback(function () {
-    let index = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
-    const delta = index - activeIndexRef.current;
-    if (delta) {
-      fixOffsetAndGo(delta, TRANSITION_MODES.MANUAL);
-    }
-  }, [fixOffsetAndGo]);
-
-  // @TODO: - these are Allium-theme variants and won't have any effect in themes that don't implement them.
-  // Normally we avoid setting variants of subcomponents, however this could be re-considered.
-  // Related discussion - https://github.com/telus/universal-design-system/issues/1549
-  const previousNextIconButtonVariants = {
-    size: previousNextIconSize,
-    raised: !(variant !== null && variant !== void 0 && variant.inverse) && true,
-    inverse: variant === null || variant === void 0 ? void 0 : variant.inverse
-  };
-  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, totalItems);
-
-    // First word might be a lowercase placeholder: capitalize the first letter
-    return `${copyText[0].toUpperCase()}${copyText.slice(1)}`;
-  }, [activeIndex, itemLabel, getCopy, title, totalItems]);
-  const activePanelNavigation = tabs && showPanelTabs ? /*#__PURE__*/_jsx(CarouselTabsPanel, {
-    items: tabs
-  }) : panelNavigation;
-  const isFirstFocusContainer = Boolean(refocus && !skipLinkHref);
-  const containerRef = element => {
-    // Apply both firstFocusRef to the container
-    firstFocusRef.current = element;
-    // Also apply forwarded ref if there is one (which could be a function ref)
-    if (ref) {
-      if (typeof ref === 'object') {
-        // eslint-disable-next-line no-param-reassign
-        ref.current = element;
-      } else if (typeof ref === 'function') {
-        ref(element);
-      }
-    }
-  };
-  const systemProps = selectProps({
-    ...rest,
-    accessibilityRole,
-    accessibilityLabel
-  });
-
-  // If container isn't used for focus, give it a label of title if none is passed in,
-  // otherwise read the current position on focus
-  const containerAccessibilityLabel = systemProps.accessibilityLabel ?? isFirstFocusContainer ? `${title ? `${title} ` : ''}${getCopyWithPlaceholders('stepTrackerLabel')}` : title;
-  const containerProps = {
-    accessibilityLabel: containerAccessibilityLabel,
-    // If used for focus, attach the ref and draw a focus box around the whole carousel
-    ...(isFirstFocusContainer && {
-      ref: containerRef,
-      focusable: true
-    })
-  };
-  const onAnimationControlButtonPress = React.useCallback(() => {
-    if (isCarouselPlaying) {
-      stopAutoplay();
-    } else {
-      startAutoplay();
-    }
-    setisCarouselPlaying(prevState => !prevState);
-  }, [isCarouselPlaying, stopAutoplay, startAutoplay]);
-  return /*#__PURE__*/_jsxs(CarouselProvider, {
-    activeIndex: activeIndex,
-    goTo: goTo,
-    getCopyWithPlaceholders: getCopyWithPlaceholders,
-    itemLabel: itemLabel,
-    totalItems: totalItems,
-    themeTokens: themeTokens,
-    firstFocusRef: firstFocusRef,
-    refocus: refocus,
-    width: containerLayout.width,
-    children: [/*#__PURE__*/_jsxs(View, {
-      style: [staticStyles.root, {
-        ...Platform.select({
-          web: {
-            outline: 'none'
-          }
-        })
-      }],
-      onLayout: onContainerLayout,
-      ref: ref,
-      ...systemProps,
-      ...containerProps,
-      children: [isAutoPlayEnabled ? /*#__PURE__*/_jsx(View, {
-        style: [staticStyles.animationControlButton, selectControlButtonPositionStyles({
-          positionVariant: previousNextNavigationPosition,
-          buttonWidth: previousNextNavigationButtonWidth,
-          positionProperty: getDynamicPositionProperty(),
-          spaceBetweenSlideAndButton: spaceBetweenSlideAndPreviousNextNavigation,
-          enablePeeking,
-          enableDisplayMultipleItemsPerSlide
-        })],
-        children: /*#__PURE__*/_jsx(IconButton, {
-          icon: isCarouselPlaying ? pauseIcon : playIcon,
-          accessibilityLabel: isCarouselPlaying ? getCopy('pauseButtonLabel') : getCopy('playButtonLabel'),
-          variant: previousNextIconButtonVariants,
-          onPress: onAnimationControlButtonPress
-        })
-      }) : null, showPreviousNextNavigation && totalItems > 1 ? /*#__PURE__*/_jsx(View, {
-        style: selectPreviousNextNavigationButtonStyles(previousNextNavigationButtonWidth, previousNextNavigationPosition, spaceBetweenSlideAndPreviousNextNavigation, isFirstSlide, isLastSlide, true, enablePeeking, enableDisplayMultipleItemsPerSlide),
-        testID: "previous-button-container",
-        children: /*#__PURE__*/_jsx(IconButton, {
-          onLayout: onPreviousNextNavigationButtonLayout,
-          icon: previousIcon,
-          onPress: goToPrev,
-          variant: previousNextIconButtonVariants,
-          accessibilityLabel: getCopyWithPlaceholders('iconButtonLabel').replace('%{targetStep}', activeIndex),
-          tokens: selectIconStyles(themeTokens)
-        })
-      }) : null, Boolean(skipLinkHref) && /*#__PURE__*/_jsx(SkipLink, {
-        ref: firstFocusRef,
-        href: skipLinkHref,
-        children: getCopyWithPlaceholders('skipLink')
-      }), !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__*/_jsx(View, {
-        style: selectContainerStyles(containerLayout.width),
-        children: /*#__PURE__*/_jsx(Animated.View, {
-          style: StyleSheet.flatten([selectSwipeAreaStyles(totalItems, containerLayout.width, enablePeeking, enableDisplayMultipleItemsPerSlide), {
-            transform: [{
-              translateX: pan.x
-            }, {
-              translateY: pan.y
-            }]
-          }]),
-          ...panResponder.panHandlers,
-          ...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.cloneElement(element, {
-              elementIndex: index,
-              hidden: enablePeeking || enableDisplayMultipleItemsPerSlide ? false : hidden,
-              enablePeeking,
-              peekingProps: getPeekingProps(viewport),
-              enableDisplayMultipleItemsPerSlide,
-              viewport
-            });
-            return /*#__PURE__*/_jsx(React.Fragment, {
-              children: clonedElement
-            }, index.toFixed(2));
-          })
-        })
-      }), showPreviousNextNavigation && totalItems > 1 ? /*#__PURE__*/_jsx(View, {
-        style: selectPreviousNextNavigationButtonStyles(previousNextNavigationButtonWidth, previousNextNavigationPosition, spaceBetweenSlideAndPreviousNextNavigation, isFirstSlide, isLastSlide, false, enablePeeking, enableDisplayMultipleItemsPerSlide),
-        testID: "next-button-container",
-        children: /*#__PURE__*/_jsx(IconButton, {
-          onLayout: onPreviousNextNavigationButtonLayout,
-          icon: nextIcon,
-          onPress: goToNext,
-          variant: previousNextIconButtonVariants,
-          accessibilityLabel: getCopyWithPlaceholders('iconButtonLabel').replace('%{targetStep}', activeIndex + 2),
-          tokens: selectIconStyles(themeTokens)
-        })
-      }) : null]
-    }), showPanelNavigation ? activePanelNavigation : null]
-  });
-});
-Carousel.propTypes = {
-  ...selectedSystemPropTypes,
-  tokens: getTokensPropType('Carousel'),
-  variant: variantProp.propType,
-  /**
-   * Prop related to StepTracker Variants
-   */
-  stepTrackerVariant: variantProp.propType,
-  /**
-   * Slides to render in Carousel. Wrap individual slides in `Carousel.Item`
-   */
-  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.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.oneOf(['inside', 'outside', 'edge']),
-  /**
-   * Defines the size of the `IconButton` which is being used to render next and previous buttons
-   */
-  previousNextIconSize: PropTypes.oneOf(['default', 'small', 'large']),
-  /**
-   * Carousel uses `Animated.spring` to animate slide changes, use this option to pass custom animation configuration
-   */
-  springConfig: PropTypes.object,
-  /**
-   * An array of objects containing information on the thumbnails to be rendered as navigation panel
-   */
-  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.number,
-  /**
-   * Initiate animation after swipe this distance.
-   */
-  minDistanceToCapture: PropTypes.number,
-  /**
-   * Called when active index changed
-   * This function is also provided with a parameter indicating changed index (either 1, or -1)
-   * Use it as follows:
-   * ```js
-   *    const onIndexChangedCallback = React.useCallback((changedIndex, currentActiveIndex) => {
-   *      console.log(changedIndex)
-   *    }, [])  // pass local dependencies as per your component
-   *    <Carousel
-   *      onIndexChanged={onIndexChangedCallback}
-   *    >
-   *      <Carousel.Item>First Slide</Carousel.Item>
-   *    </Carousel>
-   * ```
-   * Caution: Always consider wrapping your callback for `onIndexChanged` in `React.useCallback` in order to avoid bugs and performance issues
-   */
-  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.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.arrayOf(PropTypes.shape(CarouselTabsPanelItem.propTypes || {})),
-  /**
-   * If true, whenever a new slide comes into view, the focus of the Carousel switches to the start.
-   *
-   * Pass this as true when using carousel items that contain interactive content, so a user can easily tab into that content.
-   *
-   * 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.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:
-   * - activeIndex: index of current slide
-   * - totalItems: total number of slides
-   * Use it as follows:
-   * ```js
-   *    <Carousel
-   *      panelNavigation={<CustomPanelNavigation />}
-   *    >
-   *      <Carousel.Item>First Slide</Carousel.Item>
-   *    </Carousel>
-   * ```
-   */
-  panelNavigation: PropTypes.element,
-  /**
-   * When slide animation start
-   * This function is also provided with a parameter indicating the current slide index before animation starts
-   * Use it as follows:
-   * ```js
-   *    const onAnimationStartCallback = React.useCallback((currentIndex) => {
-   *      console.log(currentIndex)
-   *    }, [])  // pass local dependencies as per your component
-   *    <Carousel
-   *      onAnimationStart={onAnimationStartCallback}
-   *    >
-   *      <Carousel.Item>First Slide</Carousel.Item>
-   *    </Carousel>
-   * ```
-   * Caution: Always consider wrapping your callback for `onAnimationStart` in `React.useCallback` in order to avoid bugs and performance issues
-   */
-  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
-   * Use it as follows:
-   * ```js
-   *    const onAnimationEndCallback = React.useCallback((changedIndex) => {
-   *      console.log(changedIndex)
-   *    }, [])  // pass local dependencies as per your component
-   *    <Carousel
-   *      onAnimationEnd={onAnimationEndCallback}
-   *    >
-   *      <Carousel.Item>First Slide</Carousel.Item>
-   *    </Carousel>
-   * ```
-   * Caution: Always consider wrapping your callback for `onAnimationEnd` in `React.useCallback` in order to avoid bugs and performance issues
-   */
-  onAnimationEnd: PropTypes.func,
-  /**
-   * Use this to override the default text for panel navigation
-   */
-  panelNavigationTextDictionary: PropTypes.shape({
-    en: PropTypes.shape({
-      stepTrackerLabel: PropTypes.string.isRequired
-    }),
-    fr: PropTypes.shape({
-      stepTrackerLabel: PropTypes.string.isRequired
-    })
-  }),
-  /**
-   * Provide custom accessibilityRole for Carousel container
-   */
-  accessibilityRole: PropTypes.string,
-  /**
-   * Provide custom accessibilityLabel for Carousel container
-   */
-  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.
-   *
-   * 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.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.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.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.number,
-  /**
-   * If set to `true`, the Carousel will show the previous and next slides
-   * - Default value is `false`
-   */
-  enablePeeking: PropTypes.bool,
-  /**
-   * If set to `true`, the Carousel will show multiple slides at once
-   * - Default value is `false`
-   */
-  enableDisplayMultipleItemsPerSlide: PropTypes.bool
-};
-Carousel.Item = CarouselItem;
-Carousel.displayName = 'Carousel';
-export default Carousel;