@telus-uds/components-base 1.66.0 → 1.67.1

package/lib/Carousel/Carousel.js

@@ -4,55 +4,30 @@ 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 }; }
-
 const staticStyles = _StyleSheet.default.create({
   root: {
     backgroundColor: 'transparent',
@@ -63,26 +38,22 @@ const staticStyles = _StyleSheet.default.create({
     left: 0
   }
 });
-
 const selectContainerStyles = width => ({
   backgroundColor: 'transparent',
   overflow: 'hidden',
   width
 });
-
 const selectSwipeAreaStyles = (count, width) => ({
   width: width * count,
   justifyContent: 'space-between',
   flexDirection: 'row'
 });
-
 const selectPreviousNextNavigationButtonStyles = (previousNextNavigationButtonWidth, previousNextNavigationPosition, spaceBetweenSlideAndPreviousNextNavigation, isFirstSlide, isLastSlide, areStylesAppliedOnPreviousButton) => {
   const styles = {
     zIndex: 1,
     position: 'absolute'
   };
   const dynamicPositionProperty = areStylesAppliedOnPreviousButton ? 'left' : 'right';
-
   if (isFirstSlide) {
     styles.visibility = areStylesAppliedOnPreviousButton ? 'hidden' : 'visible';
   } else if (isLastSlide) {
@@ -90,7 +61,6 @@ const selectPreviousNextNavigationButtonStyles = (previousNextNavigationButtonWi
   } else {
     styles.visibility = 'visible';
   }
-
   if (previousNextNavigationPosition === 'edge') {
     styles[dynamicPositionProperty] = -1 * (previousNextNavigationButtonWidth / 2);
   } else if (previousNextNavigationPosition === 'inside') {
@@ -98,11 +68,10 @@ const selectPreviousNextNavigationButtonStyles = (previousNextNavigationButtonWi
   } else if (previousNextNavigationPosition === 'outside') {
     styles[dynamicPositionProperty] = -1 * (spaceBetweenSlideAndPreviousNextNavigation + previousNextNavigationButtonWidth);
   }
-
   return styles;
 };
-
 const [selectProps, selectedSystemPropTypes] = (0, _utils.selectSystemProps)([_utils.a11yProps, _utils.viewProps]);
+
 /**
  * Carousel is a general-purpose content slider that can be used to render content in terms of slides.
 
@@ -157,7 +126,6 @@ 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((_ref, ref) => {
   let {
     tokens,
@@ -202,32 +170,27 @@ const Carousel = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
     showPanelTabs,
     spaceBetweenSlideAndPreviousNextNavigation
   } = themeTokens;
-
   const [activeIndex, setActiveIndex] = _react.default.useState(0);
-
   const [isAnimating, setIsAnimating] = _react.default.useState(false);
-
   const handleAnimationStart = _react.default.useCallback(function () {
     if (typeof onAnimationStart === 'function') onAnimationStart(...arguments);
     setIsAnimating(true);
   }, [onAnimationStart]);
-
   const handleAnimationEnd = _react.default.useCallback(function () {
     if (typeof onAnimationEnd === 'function') onAnimationEnd(...arguments);
     setIsAnimating(false);
   }, [onAnimationEnd]);
-
   const getCopy = (0, _utils.useCopy)({
     dictionary: _dictionary.default,
     copy
   });
-  let childrenArray = (0, _utils.unpackFragment)(children); // if `Carousel` only has one `Carousel.Item`, convert this to a single-item array
-
+  let childrenArray = (0, _utils.unpackFragment)(children);
+  // if `Carousel` only has one `Carousel.Item`, convert this to a single-item array
   if (!Array.isArray(childrenArray)) {
     childrenArray = [childrenArray];
   }
-
-  const systemProps = selectProps({ ...rest,
+  const systemProps = selectProps({
+    ...rest,
     accessibilityRole,
     accessibilityLabel,
     accessibilityValue: {
@@ -239,26 +202,18 @@ const Carousel = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
   const {
     reduceMotionEnabled
   } = (0, _A11yInfoProvider.useA11yInfo)();
-
   const [containerLayout, setContainerLayout] = _react.default.useState({
     x: 0,
     y: 0,
     width: 0
   });
-
   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 isFirstSlide = !activeIndex;
   const isLastSlide = activeIndex + 1 >= children.length;
-
   const onContainerLayout = _ref2 => {
     let {
       nativeEvent: {
@@ -269,13 +224,13 @@ const Carousel = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
         }
       }
     } = _ref2;
-    return setContainerLayout(prevState => ({ ...prevState,
+    return setContainerLayout(prevState => ({
+      ...prevState,
       x,
       y,
       width
     }));
   };
-
   const onPreviousNextNavigationButtonLayout = _ref3 => {
     let {
       nativeEvent: {
@@ -286,7 +241,6 @@ const Carousel = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
     } = _ref3;
     return setPreviousNextNavigationButtonWidth(width);
   };
-
   const updateOffset = _react.default.useCallback(() => {
     animatedX.current = containerLayout.width * activeIndex * -1;
     animatedY.current = 0;
@@ -299,16 +253,13 @@ const Carousel = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
       y: 0
     });
   }, [activeIndex, containerLayout.width, pan, animatedX]);
-
   const animate = _react.default.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 (reduceMotionEnabled) {
       _Animated.default.timing(pan, {
         toValue,
@@ -316,13 +267,13 @@ const Carousel = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
         useNativeDriver: false
       }).start(handleAnimationEndToIndex);
     } else {
-      _Animated.default.spring(pan, { ...springConfig,
+      _Animated.default.spring(pan, {
+        ...springConfig,
         toValue,
         useNativeDriver: false
       }).start(handleAnimationEndToIndex);
     }
   }, [pan, springConfig, reduceMotionEnabled, handleAnimationEnd]);
-
   const updateIndex = _react.default.useCallback(function () {
     let delta = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 1;
     const toValue = {
@@ -331,7 +282,6 @@ const Carousel = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
     };
     let skipChanges = !delta;
     let calcDelta = delta;
-
     if (activeIndex <= 0 && delta < 0) {
       skipChanges = true;
       calcDelta = children.length + delta;
@@ -339,47 +289,37 @@ const Carousel = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
       skipChanges = true;
       calcDelta = -1 * activeIndex + delta - 1;
     }
-
     const index = activeIndex + calcDelta;
-
     if (skipChanges) {
       animate(toValue, index);
       return calcDelta;
     }
-
     setActiveIndex(index);
     toValue.x = containerLayout.width * -1 * calcDelta;
     animate(toValue, index);
     if (onIndexChanged) onIndexChanged(calcDelta, index);
     return calcDelta;
   }, [containerLayout.width, activeIndex, animate, children.length, onIndexChanged]);
-
   const fixOffsetAndGo = _react.default.useCallback(delta => {
     var _firstFocusRef$curren;
-
     updateOffset();
     handleAnimationStart(activeIndex);
     updateIndex(delta);
     if (refocus) (_firstFocusRef$curren = firstFocusRef.current) === null || _firstFocusRef$curren === void 0 ? void 0 : _firstFocusRef$curren.focus();
   }, [updateIndex, updateOffset, activeIndex, handleAnimationStart, refocus]);
-
   const goToNeighboring = _react.default.useCallback(function () {
     let toPrev = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
     fixOffsetAndGo(toPrev ? -1 : 1);
   }, [fixOffsetAndGo]);
-
   const isSwipeAllowed = _react.default.useCallback(() => {
     if (childrenArray.length === 1) {
       return false;
     }
-
     if (_Platform.default.OS === 'web') {
       return !!(viewport === 'xs' || viewport === 'sm');
     }
-
     return true;
   }, [viewport, childrenArray.length]);
-
   const panResponder = _react.default.useMemo(() => _PanResponder.default.create({
     onPanResponderTerminationRequest: () => false,
     onMoveShouldSetResponderCapture: () => true,
@@ -387,7 +327,6 @@ const Carousel = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
       if (!isSwipeAllowed()) {
         return false;
       }
-
       handleAnimationStart(activeIndex);
       return Math.abs(gestureState.dx) > minDistanceToCapture;
     },
@@ -399,7 +338,6 @@ const Carousel = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
     }),
     onPanResponderRelease: (_, gesture) => {
       const correction = gesture.moveX - gesture.x0;
-
       if (Math.abs(correction) < containerLayout.width * minDistanceForAction) {
         animate({
           x: 0,
@@ -411,7 +349,6 @@ const Carousel = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
       }
     }
   }), [containerLayout.width, updateIndex, updateOffset, animate, isSwipeAllowed, activeIndex, minDistanceForAction, handleAnimationStart, minDistanceToCapture, pan.x]);
-
   _react.default.useEffect(() => {
     pan.x.addListener(_ref4 => {
       let {
@@ -430,56 +367,48 @@ const Carousel = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
       pan.y.removeAllListeners();
     };
   }, [pan.x, pan.y]);
-
   _react.default.useEffect(() => {
     const subscription = _Dimensions.default.addEventListener('change', () => {
       updateOffset();
     });
-
     return () => subscription === null || subscription === void 0 ? void 0 : subscription.remove();
   });
-
   const goToNext = _react.default.useCallback(() => {
     goToNeighboring();
   }, [goToNeighboring]);
-
   const goToPrev = _react.default.useCallback(() => {
     goToNeighboring(true);
   }, [goToNeighboring]);
-
   const goTo = _react.default.useCallback(function () {
     let index = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
     const delta = index - activeIndex;
-
     if (delta) {
       fixOffsetAndGo(delta);
     }
-  }, [fixOffsetAndGo, activeIndex]); // @TODO: - these are Allium-theme variants and won't have any effect in themes that don't implement them.
+  }, [fixOffsetAndGo, activeIndex]);
+
+  // @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.default.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
+    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, {
     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)
-
+    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
@@ -488,10 +417,9 @@ const Carousel = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
         ref(element);
       }
     }
-  }; // If container isn't used for focus, give it a label of title if none is passed in,
+  };
+  // 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,
@@ -531,7 +459,8 @@ const Carousel = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
         ref: firstFocusRef,
         href: skipLinkHref,
         children: getCopyWithPlaceholders('skipLink')
-      }), !isFirstFocusContainer && /*#__PURE__*/(0, _jsxRuntime.jsx)(_A11yText.default // Read the current slide position to screen readers on slide.
+      }), !isFirstFocusContainer && /*#__PURE__*/(0, _jsxRuntime.jsx)(_A11yText.default
+      // 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',
@@ -553,12 +482,10 @@ const Carousel = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
           accessibilityLiveRegion: accessibilityLiveRegion,
           children: childrenArray.map((element, index) => {
             const hidden = !isAnimating && index !== activeIndex;
-
             const clonedElement = /*#__PURE__*/_react.default.cloneElement(element, {
               elementIndex: index,
               hidden
             });
-
             return /*#__PURE__*/(0, _jsxRuntime.jsx)(_react.default.Fragment, {
               children: clonedElement
             }, index.toFixed(2));
@@ -578,21 +505,18 @@ const Carousel = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
     }), showPanelNavigation ? activePanelNavigation : null]
   });
 });
-
-Carousel.propTypes = { ...selectedSystemPropTypes,
+Carousel.propTypes = {
+  ...selectedSystemPropTypes,
   tokens: (0, _utils.getTokensPropType)('Carousel'),
   variant: _utils.variantProp.propType,
-
   /**
    * Prop related to StepTracker Variants
    */
   stepTrackerVariant: _utils.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,
-
   /**
    * 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,
@@ -600,24 +524,20 @@ Carousel.propTypes = { ...selectedSystemPropTypes,
    * accessible labels such as "Summer offer 1 of 3" and "Show summer offer 2 of 3".
    */
   itemLabel: _propTypes.default.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']),
-
   /**
    * Defines the size of the `IconButton` which is being used to render next and previous buttons
    */
   previousNextIconSize: _propTypes.default.oneOf(['default', 'small', 'large']),
-
   /**
    * Carousel uses `Animated.spring` to animate slide changes, use this option to pass custom animation configuration
    */
   springConfig: _propTypes.default.object,
-
   /**
    * An array of objects containing information on the thumbnails to be rendered as navigation panel
    */
@@ -626,18 +546,15 @@ Carousel.propTypes = { ...selectedSystemPropTypes,
     alt: _propTypes.default.string,
     src: _propTypes.default.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,
-
   /**
    * Initiate animation after swipe this distance.
    */
   minDistanceToCapture: _propTypes.default.number,
-
   /**
    * Called when active index changed
    * This function is also provided with a parameter indicating changed index (either 1, or -1)
@@ -655,20 +572,17 @@ Carousel.propTypes = { ...selectedSystemPropTypes,
    * Caution: Always consider wrapping your callback for `onIndexChanged` in `useCallback` in order to avoid bugs and performance issues
    */
   onIndexChanged: _propTypes.default.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,
-
   /**
    * 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 || {})),
-
   /**
    * If true, whenever a new slide comes into view, the focus of the Carousel switches to the start.
    *
@@ -677,7 +591,6 @@ Carousel.propTypes = { ...selectedSystemPropTypes,
    * 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,
-
   /**
    * 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:
@@ -693,7 +606,6 @@ Carousel.propTypes = { ...selectedSystemPropTypes,
    * ```
    */
   panelNavigation: _propTypes.default.element,
-
   /**
    * When slide animation start
    * This function is also provided with a parameter indicating the current slide index before animation starts
@@ -711,7 +623,6 @@ Carousel.propTypes = { ...selectedSystemPropTypes,
    * Caution: Always consider wrapping your callback for `onAnimationStart` in `useCallback` in order to avoid bugs and performance issues
    */
   onAnimationStart: _propTypes.default.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
@@ -729,7 +640,6 @@ Carousel.propTypes = { ...selectedSystemPropTypes,
    * Caution: Always consider wrapping your callback for `onAnimationEnd` in `useCallback` in order to avoid bugs and performance issues
    */
   onAnimationEnd: _propTypes.default.func,
-
   /**
    * Use this to override the default text for panel navigation
    */
@@ -741,17 +651,14 @@ Carousel.propTypes = { ...selectedSystemPropTypes,
       stepTrackerLabel: _propTypes.default.string.isRequired
     })
   }),
-
   /**
    * Provide custom accessibilityRole for Carousel container
    */
   accessibilityRole: _propTypes.default.string,
-
   /**
    * Provide custom accessibilityLabel for Carousel container
    */
   accessibilityLabel: _propTypes.default.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.

package/lib/Carousel/CarouselContext.js

@@ -5,19 +5,12 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.CarouselProvider = void 0;
 exports.useCarousel = useCarousel;
-
 var _react = _interopRequireDefault(require("react"));
-
 var _propTypes = _interopRequireDefault(require("prop-types"));
-
 var _utils = require("../utils");
-
 var _jsxRuntime = require("react/jsx-runtime");
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
 const CarouselContext = /*#__PURE__*/_react.default.createContext();
-
 const CarouselProvider = _ref => {
   let {
     activeIndex,
@@ -30,7 +23,6 @@ const CarouselProvider = _ref => {
     totalItems,
     width
   } = _ref;
-
   const value = _react.default.useMemo(() => ({
     activeIndex,
     goTo,
@@ -41,25 +33,19 @@ const CarouselProvider = _ref => {
     totalItems,
     width
   }), [activeIndex, goTo, getCopyWithPlaceholders, itemLabel, refocus, totalItems, themeTokens, width]);
-
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(CarouselContext.Provider, {
     value: value,
     children: children
   });
 };
-
 exports.CarouselProvider = CarouselProvider;
-
 function useCarousel() {
   const context = _react.default.useContext(CarouselContext);
-
   if (context === undefined) {
     throw new Error(`'useCarousel' must be used within a 'CarouselProvider'`);
   }
-
   return context;
 }
-
 CarouselProvider.propTypes = {
   children: _propTypes.default.arrayOf(_propTypes.default.element).isRequired,
   activeIndex: _propTypes.default.number.isRequired,

package/lib/Carousel/CarouselFirstFocus/CarouselFirstFocus.js

@@ -4,52 +4,40 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-
 var _react = _interopRequireWildcard(require("react"));
-
 var _Pressable = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Pressable"));
-
 var _Platform = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Platform"));
-
 var _StyleSheet = _interopRequireDefault(require("react-native-web/dist/cjs/exports/StyleSheet"));
-
 var _propTypes = require("prop-types");
-
 var _CarouselContext = require("../CarouselContext");
-
 var _jsxRuntime = require("react/jsx-runtime");
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
 /**
  * Focus target so that when a new slide is shown, the user can tab into
  * its content using the keyboard.
  *
  * @TODO rework this after integrating with SkipLink when available.
- */
-const CarouselFirstFocus = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
+ */const CarouselFirstFocus = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
   let {
     title
   } = _ref;
   const {
     getCopyWithPlaceholders
-  } = (0, _CarouselContext.useCarousel)(); // TODO: integrate skip link description if behaving as skip link.
-  // Consider moving this content to aria-live area while only the skip link is focused.
+  } = (0, _CarouselContext.useCarousel)();
 
+  // TODO: integrate skip link description if behaving as skip link.
+  // Consider moving this content to aria-live area while only the skip link is focused.
   const accessibilityLabel = `${title}, ${getCopyWithPlaceholders('stepTrackerLabel')}`;
-
   const accessibilityRole = _Platform.default.select({
     web: 'link',
     // The focused item will ultimately be a skip link.
     default: 'button' // 'link' role usually denotes opening browser on Native.
-
   });
 
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Pressable.default // TODO: integrate skip link functionality, jump focus to after Carousel
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Pressable.default
+  // TODO: integrate skip link functionality, jump focus to after Carousel
   , {
     onPress: undefined,
     ref: ref,