@telus-uds/components-base 1.96.0 → 1.97.1

package/lib-module/Carousel/CarouselContext.js

@@ -1,51 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { getTokensPropType } from '../utils';
-import { jsx as _jsx } from "react/jsx-runtime";
-const CarouselContext = /*#__PURE__*/React.createContext();
-const CarouselProvider = _ref => {
-  let {
-    activeIndex,
-    children,
-    goTo,
-    getCopyWithPlaceholders,
-    itemLabel,
-    refocus = false,
-    themeTokens,
-    totalItems,
-    width
-  } = _ref;
-  const value = React.useMemo(() => ({
-    activeIndex,
-    goTo,
-    getCopyWithPlaceholders,
-    itemLabel,
-    refocus,
-    themeTokens,
-    totalItems,
-    width
-  }), [activeIndex, goTo, getCopyWithPlaceholders, itemLabel, refocus, totalItems, themeTokens, width]);
-  return /*#__PURE__*/_jsx(CarouselContext.Provider, {
-    value: value,
-    children: children
-  });
-};
-function useCarousel() {
-  const context = React.useContext(CarouselContext);
-  if (context === undefined) {
-    throw new Error(`'useCarousel' must be used within a 'CarouselProvider'`);
-  }
-  return context;
-}
-CarouselProvider.propTypes = {
-  children: PropTypes.arrayOf(PropTypes.element).isRequired,
-  activeIndex: PropTypes.number.isRequired,
-  goTo: PropTypes.func.isRequired,
-  getCopyWithPlaceholders: PropTypes.func.isRequired,
-  itemLabel: PropTypes.string.isRequired,
-  refocus: PropTypes.bool,
-  themeTokens: getTokensPropType('Carousel'),
-  totalItems: PropTypes.number.isRequired,
-  width: PropTypes.number.isRequired
-};
-export { CarouselProvider, useCarousel };

package/lib-module/Carousel/CarouselFirstFocus/CarouselFirstFocus.js

@@ -1,53 +0,0 @@
-import React from 'react';
-import Pressable from "react-native-web/dist/exports/Pressable";
-import Platform from "react-native-web/dist/exports/Platform";
-import StyleSheet from "react-native-web/dist/exports/StyleSheet";
-import { PropTypes } from 'prop-types';
-import { useCarousel } from '../CarouselContext';
-
-/**
- * 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.
- */
-import { jsx as _jsx } from "react/jsx-runtime";
-const CarouselFirstFocus = /*#__PURE__*/React.forwardRef((_ref, ref) => {
-  let {
-    title
-  } = _ref;
-  const {
-    getCopyWithPlaceholders
-  } = 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.select({
-    web: 'link',
-    // The focused item will ultimately be a skip link.
-    default: 'button' // 'link' role usually denotes opening browser on Native.
-  });
-
-  return /*#__PURE__*/_jsx(Pressable
-  // TODO: integrate skip link functionality, jump focus to after Carousel
-  , {
-    onPress: undefined,
-    ref: ref,
-    accessibilityLabel: accessibilityLabel,
-    accessibilityRole: accessibilityRole,
-    style: StyleSheet.absoluteFill,
-    focusable: true
-  });
-});
-CarouselFirstFocus.displayName = 'CarouselFirstFocus';
-CarouselFirstFocus.propTypes = {
-  /**
-   * Simple description of this carousel for screenreaders, to be read before
-   * "{itemLabel} {index} of {count}.
-   *
-   * For example, "Summer offers" in "Summer offers, offer 1 of 3"
-   */
-  title: PropTypes.string
-};
-export default CarouselFirstFocus;

package/lib-module/Carousel/CarouselItem/CarouselItem.js

@@ -1,150 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import View from "react-native-web/dist/exports/View";
-import Platform from "react-native-web/dist/exports/Platform";
-import { layoutTags, getA11yPropsFromHtmlTag, selectSystemProps, a11yProps, viewProps, variantProp } from '../../utils';
-import { useCarousel } from '../CarouselContext';
-import { jsx as _jsx } from "react/jsx-runtime";
-const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps]);
-const selectContainerStyle = _ref => {
-  let {
-    width,
-    activeIndex,
-    elementIndex,
-    totalItems,
-    enablePeeking,
-    peekingMarginLeft,
-    peekingMarginRight,
-    peekingFirstSpace,
-    peekingLastSpace,
-    peekingMiddleSpace,
-    peekingGap,
-    hidden
-  } = _ref;
-  const isFirst = elementIndex === 0;
-  const isLast = elementIndex === totalItems - 1;
-  const isMiddle = !isFirst && !isLast;
-  const isActive = activeIndex === elementIndex;
-  let adjustedWidth = width;
-  let marginLeft = 0;
-  let marginRight = 0;
-  if (enablePeeking) {
-    if (isActive) {
-      adjustedWidth = width - (peekingMarginLeft + peekingGap + peekingFirstSpace);
-    } else if (isMiddle) {
-      adjustedWidth = width - peekingGap;
-    }
-    if (isFirst) {
-      if (isActive) {
-        marginLeft = peekingMarginLeft;
-      } else if (activeIndex === totalItems - 1) {
-        marginLeft = peekingLastSpace;
-      } else {
-        marginLeft = peekingMiddleSpace;
-      }
-    }
-    if (isLast && isActive) {
-      marginRight = peekingMarginRight;
-    } else {
-      marginRight = peekingGap;
-    }
-  }
-  const style = {
-    width: adjustedWidth,
-    marginLeft,
-    marginRight
-  };
-  if (hidden && Platform.OS === 'web') {
-    style.visibility = 'hidden';
-  }
-  return style;
-};
-
-/**
- * `Carousel.Item` is used to wrap the content of an individual slide and is suppsoed to be the
- * only top-level component passed to the `Carousel`
- */
-const CarouselItem = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
-  let {
-    children,
-    elementIndex,
-    tag = 'li',
-    hidden,
-    enablePeeking,
-    peekingProps,
-    ...rest
-  } = _ref2;
-  const {
-    width,
-    activeIndex,
-    totalItems,
-    height
-  } = useCarousel();
-  const selectedProps = selectProps({
-    ...rest,
-    ...getA11yPropsFromHtmlTag(tag, rest.accessibilityRole)
-  });
-  const focusabilityProps = activeIndex === elementIndex ? {} : a11yProps.nonFocusableProps;
-  return /*#__PURE__*/_jsx(View, {
-    style: selectContainerStyle({
-      width,
-      activeIndex,
-      elementIndex,
-      totalItems,
-      hidden,
-      height,
-      enablePeeking,
-      ...peekingProps
-    }),
-    ...selectedProps,
-    ...focusabilityProps,
-    ref: ref,
-    children: children
-  });
-});
-CarouselItem.propTypes = {
-  ...selectedSystemPropTypes,
-  variant: variantProp.propType,
-  /**
-   * Index of the current slide
-   * Don't pass this prop when using `Carousel.Item` as it is already being passed by `Carousel` top-level component
-   */
-  elementIndex: PropTypes.number,
-  /**
-   * Provide custom accessibilityLabelledBy for Carousel slide
-   */
-  accessibilityLabelledBy: PropTypes.string,
-  /**
-   * Content of the slide
-   */
-  children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]).isRequired,
-  /**
-   * Sets the HTML tag of the outer container. By default `'li'` so that assistive technology sees
-   * the Carousel as a list of items.
-   *
-   * Carousel's innermost container defaults to `'ul'` which can be overridden. If the tag of either
-   * `Carousel` or `Carousel.Item` is overriden, the other should be too, to avoid producing invalid HTML.
-   */
-  tag: PropTypes.oneOf(layoutTags),
-  /**
-   * Function to set carousel content background color when slide is being display
-   */
-  setContentBackgroundColor: PropTypes.func,
-  /**
-   * Boolean to enable peeking effect on the first and last slide
-   */
-  enablePeeking: PropTypes.bool,
-  /**
-   * Object to configure the peeking effect
-   */
-  peekingProps: PropTypes.shape({
-    peekingMarginLeft: PropTypes.number,
-    peekingMarginRight: PropTypes.number,
-    peekingFirstSpace: PropTypes.number,
-    peekingLastSpace: PropTypes.number,
-    peekingMiddleSpace: PropTypes.number,
-    peekingGap: PropTypes.number
-  })
-};
-CarouselItem.displayName = 'Carousel.Item';
-export default CarouselItem;

package/lib-module/Carousel/CarouselItem/index.js

@@ -1,2 +0,0 @@
-import CarouselItem from './CarouselItem';
-export default CarouselItem;

package/lib-module/Carousel/CarouselStepTracker/CarouselStepTracker.js

@@ -1,54 +0,0 @@
-import React from 'react';
-import { useCarousel } from '../CarouselContext';
-import StepTracker from '../../StepTracker';
-import StackView from '../../StackView';
-import { variantProp } from '../../utils';
-import { jsx as _jsx } from "react/jsx-runtime";
-const CarouselStepTracker = /*#__PURE__*/React.forwardRef((_ref, ref) => {
-  let {
-    variant
-  } = _ref;
-  const {
-    activeIndex,
-    totalItems,
-    getCopyWithPlaceholders,
-    themeTokens: {
-      stepTrackerCurrentBackgroundColor,
-      ...themeTokens
-    }
-  } = useCarousel();
-  const stackViewTokens = {
-    justifyContent: 'center'
-  };
-  const stepTrackerTokens = {
-    showStepLabel: false,
-    showStepTrackerLabel: true,
-    // TODO: StepTracker 'isComplete'/'isCurrent' is incorrect, see line StepTracker/Step.jsx line 63, refactor incorrect values and remove this
-    knobCompletedBackgroundColor: stepTrackerCurrentBackgroundColor ?? 'none',
-    connectorCompletedColor: 'none',
-    connectorColor: 'none',
-    containerPaddingTop: themeTokens.spaceBetweenSlideAndPanelNavigation
-  };
-  const steps = Array.from(Array(totalItems)).map((_, index) => String(index));
-  return /*#__PURE__*/_jsx(StackView, {
-    direction: "row",
-    tokens: stackViewTokens,
-    ref: ref,
-    children: /*#__PURE__*/_jsx(StepTracker, {
-      current: activeIndex,
-      steps: steps,
-      copy: {
-        // Give StepTracker copy from Carousel's language and dictionary
-        stepLabel: getCopyWithPlaceholders('stepLabel'),
-        stepTrackerLabel: getCopyWithPlaceholders('stepTrackerLabel')
-      },
-      tokens: stepTrackerTokens,
-      variant: variant
-    })
-  });
-});
-CarouselStepTracker.displayName = 'CarouselStepTracker';
-CarouselStepTracker.propTypes = {
-  variant: variantProp.propType
-};
-export default CarouselStepTracker;

package/lib-module/Carousel/CarouselStepTracker/index.js

@@ -1,2 +0,0 @@
-import CarouselStepTracker from './CarouselStepTracker';
-export default CarouselStepTracker;

package/lib-module/Carousel/CarouselTabs/CarouselTabs.js

@@ -1,50 +0,0 @@
-var _CarouselTabs$propTyp, _CarouselTabs$propTyp2;
-import React from 'react';
-import PropTypes from 'prop-types';
-import { useResponsiveProp } from '../../utils';
-import Carousel from '../Carousel';
-
-/**
- * @deprecated Please use Carousel and pass the `tabs` prop.
- */
-import { jsx as _jsx } from "react/jsx-runtime";
-const CarouselTabs = /*#__PURE__*/React.forwardRef((_ref, ref) => {
-  let {
-    items,
-    refocus = true,
-    ...carouselProps
-  } = _ref;
-  const tabs = useResponsiveProp({
-    md: items
-  });
-  return /*#__PURE__*/_jsx(Carousel, {
-    refocus: refocus,
-    ...carouselProps,
-    ref: ref,
-    tabs: tabs,
-    children: items.map(_ref2 => {
-      let {
-        title,
-        content
-      } = _ref2;
-      return /*#__PURE__*/_jsx(React.Fragment, {
-        children: content
-      }, title);
-    })
-  });
-});
-CarouselTabs.displayName = 'CarouselTabs';
-CarouselTabs.propTypes = {
-  /**
-   * An array of objects where title is the string shown in the slide's tab and content is the JSX for the slide itself
-   */
-  items: PropTypes.arrayOf(PropTypes.shape({
-    title: PropTypes.string.isRequired,
-    content: PropTypes.node.isRequired
-  })),
-  ...Carousel.propTypes
-};
-// CarouselTabs doesn't require `children` prop, it uses `items` instead.
-// eslint-disable-next-line react/forbid-foreign-prop-types
-if ((_CarouselTabs$propTyp = CarouselTabs.propTypes) !== null && _CarouselTabs$propTyp !== void 0 && _CarouselTabs$propTyp.children) (_CarouselTabs$propTyp2 = CarouselTabs.propTypes) === null || _CarouselTabs$propTyp2 === void 0 ? true : delete _CarouselTabs$propTyp2.children;
-export default CarouselTabs;

package/lib-module/Carousel/CarouselTabs/CarouselTabsPanel.js

@@ -1,89 +0,0 @@
-import React from 'react';
-import View from "react-native-web/dist/exports/View";
-import PropTypes from 'prop-types';
-import StackView from '../../StackView';
-import { useCarousel } from '../CarouselContext';
-import CarouselTabsPanelItem from './CarouselTabsPanelItem';
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
-const selectTabPanelStyle = () => ({
-  backgroundColor: 'transparent'
-});
-const CarouselTabsPanel = /*#__PURE__*/React.forwardRef((_ref, ref) => {
-  let {
-    items
-  } = _ref;
-  const {
-    activeIndex,
-    goTo
-  } = useCarousel();
-  const nextFocusRef = React.useRef();
-  const firstTabRef = React.useRef();
-  const [isInverse, setIsInverse] = React.useState(false);
-  const lastTabSelected = activeIndex === items.length - 1;
-
-  // Get current select tab style
-  React.useEffect(() => {
-    const [selectedVariantIsInverse] = items.filter((_, index) => index === activeIndex);
-    setIsInverse(selectedVariantIsInverse === null || selectedVariantIsInverse === void 0 ? void 0 : selectedVariantIsInverse.inverse);
-  }, [items, activeIndex]);
-
-  // TODO: figure out a better cross-brand way to specify subcomponent variants.
-  // For now, this picks an Allium variant, and does nothing in brands that lack it.
-  // See similar comment in Carousel and https://github.com/telus/universal-design-system/issues/1549
-  const dividerVariant = {
-    decorative: true,
-    inverse: isInverse
-  };
-  return /*#__PURE__*/_jsxs(View, {
-    style: selectTabPanelStyle(),
-    children: [/*#__PURE__*/_jsx(StackView, {
-      direction: "row",
-      space: 3,
-      divider: {
-        variant: dividerVariant,
-        accessibilityRole: 'presentation',
-        accessibilityOrientation: null
-      },
-      ref: ref,
-      accessibilityRole: "tablist",
-      children: items.map((_ref2, index) => {
-        let {
-          title,
-          onPress,
-          inverse,
-          ...panelItemProps
-        } = _ref2;
-        const selected = index === activeIndex;
-        const isNext = index === activeIndex + 1;
-
-        // Selected item should be always unfocusable and unpressable
-        const handlePress = selected ? undefined : event => {
-          if (typeof onPress === 'function') onPress(event, index);
-          goTo(index);
-        };
-        return /*#__PURE__*/_jsx(CarouselTabsPanelItem, {
-          ref: isNext && nextFocusRef || index === 0 && firstTabRef || null,
-          title: title,
-          selected: selected,
-          onPress: handlePress,
-          variant: {
-            inverse: isInverse
-          },
-          ...panelItemProps
-        }, title);
-      })
-    }), /*#__PURE__*/_jsx(View, {
-      focusable: true,
-      accessible: true,
-      ref: lastTabSelected ? nextFocusRef : null
-    })]
-  });
-});
-CarouselTabsPanel.displayName = 'CarouselTabsPanel';
-CarouselTabsPanel.propTypes = {
-  items: PropTypes.arrayOf(PropTypes.shape(CarouselTabsPanelItem.propTypes || {})),
-  // Color defined by `Carousel.item` variant otherwise fallback to transparent
-  contentBackgroundColor: PropTypes.string
-};
-export default CarouselTabsPanel;

package/lib-module/Carousel/CarouselTabs/CarouselTabsPanelItem.js

@@ -1,118 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import Pressable from "react-native-web/dist/exports/Pressable";
-import Text from "react-native-web/dist/exports/Text";
-import Platform from "react-native-web/dist/exports/Platform";
-import { applyTextStyles, useThemeTokensCallback } from '../../ThemeProvider';
-import { selectSystemProps, a11yProps, pressProps, viewProps, textProps, getTokensPropType, variantProp, resolvePressableState } from '../../utils';
-import { jsx as _jsx } from "react/jsx-runtime";
-const [selectPressProps, pressPropTypes] = selectSystemProps([a11yProps, pressProps, viewProps]);
-const [selectTextProps, textPropTypes] = selectSystemProps([textProps]);
-const selectContainerStyles = _ref => {
-  let {
-    paddingLeft,
-    paddingRight,
-    paddingTop,
-    paddingBottom = 0,
-    borderBottomColor,
-    borderBottomWidth = 0,
-    borderBottomStyle,
-    flex,
-    alignItems,
-    justifyContent
-  } = _ref;
-  return {
-    paddingLeft,
-    paddingRight,
-    paddingTop,
-    paddingBottom: paddingBottom - borderBottomWidth,
-    borderBottomColor,
-    borderBottomWidth,
-    borderBottomStyle,
-    flex,
-    alignItems,
-    justifyContent,
-    ...Platform.select({
-      // Removes the default browser :focus outline
-      web: {
-        outline: 'none'
-      }
-    })
-  };
-};
-const selectTextStyles = _ref2 => {
-  let {
-    fontSize,
-    fontScaleCap,
-    lineHeight,
-    letterSpacing,
-    fontWeight,
-    fontName,
-    color
-  } = _ref2;
-  return applyTextStyles({
-    fontSize,
-    fontScaleCap,
-    lineHeight,
-    letterSpacing,
-    fontWeight,
-    fontName,
-    color
-  });
-};
-const CarouselTabsPanelItem = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
-  let {
-    title,
-    selected,
-    inactive,
-    variant,
-    tokens,
-    accessibilityRole = 'tab',
-    ...rest
-  } = _ref3;
-  // Workaround for React Native Web https://github.com/necolas/react-native-web/issues/2357
-  // Don't allow disabled to be set while focus is true else focus state gets locked `true`
-  // (must refocus _after_ calling `goTo`, else focus target content is not up to date)
-  const [isFocused, setIsFocused] = React.useState(false);
-  const disabled = (inactive || selected) && !isFocused;
-  const getTokens = useThemeTokensCallback('CarouselTabsPanelItem', tokens, variant);
-  const resolveTokens = pressState => getTokens(resolvePressableState(pressState, {
-    selected
-  }));
-  const getContainerStyle = pressState => selectContainerStyles(resolveTokens(pressState));
-  const getTextStyle = pressState => selectTextStyles(resolveTokens(pressState));
-  const {
-    onPress,
-    ...selectedPressProps
-  } = selectPressProps(rest);
-  const handleKeyDown = event => {
-    // Allow using the spacebar for navigation
-    if ((event === null || event === void 0 ? void 0 : event.key) === ' ') onPress(event);
-  };
-  return /*#__PURE__*/_jsx(Pressable, {
-    onPress: onPress,
-    style: getContainerStyle,
-    accessibilityRole: accessibilityRole,
-    ref: ref,
-    onKeyDown: handleKeyDown,
-    onFocus: () => setIsFocused(true),
-    onBlur: () => setIsFocused(false),
-    disabled: disabled,
-    ...selectedPressProps,
-    children: pressState => /*#__PURE__*/_jsx(Text, {
-      style: getTextStyle(pressState),
-      ...selectTextProps(rest),
-      children: title
-    })
-  });
-});
-CarouselTabsPanelItem.displayName = 'CarouselTabsPanelItem';
-CarouselTabsPanelItem.propTypes = {
-  ...pressPropTypes,
-  ...textPropTypes,
-  title: PropTypes.string.isRequired,
-  selected: PropTypes.bool,
-  tokens: getTokensPropType('CarouselTabsPanelItem'),
-  variant: variantProp.propType
-};
-export default CarouselTabsPanelItem;

package/lib-module/Carousel/CarouselTabs/index.js

@@ -1,2 +0,0 @@
-import CarouselTabs from './CarouselTabs';
-export default CarouselTabs;

package/lib-module/Carousel/CarouselThumbnail.js

@@ -1,113 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import Pressable from "react-native-web/dist/exports/Pressable";
-import Image from "react-native-web/dist/exports/Image";
-import { useCarousel } from './CarouselContext';
-import { useThemeTokensCallback } from '../ThemeProvider';
-import { useViewport } from '../ViewportProvider';
-import { jsx as _jsx } from "react/jsx-runtime";
-const selectPressableTokens = _ref => {
-  let {
-    borderColor,
-    borderRadius,
-    borderWidth,
-    margin,
-    padding
-  } = _ref;
-  return {
-    borderColor,
-    borderRadius,
-    borderWidth,
-    margin,
-    padding
-  };
-};
-
-/**
- * `Carousel.Thumbnail` is used to wrap the content of an individual slide and is suppsoed to be the
- * only top-level component passed to the `Carousel`
- */
-const CarouselThumbnail = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
-  let {
-    accessibilityLabel,
-    alt,
-    index,
-    src
-  } = _ref2;
-  const {
-    activeIndex,
-    itemLabel,
-    totalItems,
-    getCopyWithPlaceholders,
-    goTo
-  } = useCarousel();
-  const getThumbnailTokens = useThemeTokensCallback('CarouselThumbnail');
-  const viewport = useViewport();
-  const thumbnailTitle = alt ?? getCopyWithPlaceholders('stepTrackerLabel').replace(/%\{itemLabel\}/g, itemLabel).replace(/%\{stepNumber\}/g, index).replace(/%\{stepCount\}/g, totalItems);
-  const handlePress = () => goTo(index);
-  const handleKeyDown = event => {
-    // Allow using the spacebar for navigation
-    if ((event === null || event === void 0 ? void 0 : event.key) === ' ') goTo(index);
-  };
-  const {
-    borderWidth,
-    padding,
-    selectedBorderColor,
-    selectedBorderWidth,
-    size,
-    margin
-  } = getThumbnailTokens({
-    viewport
-  });
-  const styles = {
-    image: {
-      height: size,
-      width: size
-    },
-    selected: {
-      borderColor: selectedBorderColor,
-      borderWidth: selectedBorderWidth,
-      padding: padding - selectedBorderWidth,
-      marginBottom: margin + selectedBorderWidth
-    },
-    nonSelected: {
-      padding: padding - borderWidth,
-      marginBottom: margin + selectedBorderWidth
-    }
-  };
-  return /*#__PURE__*/_jsx(Pressable, {
-    onKeyDown: handleKeyDown,
-    onPress: handlePress,
-    style: _ref3 => {
-      let {
-        hovered,
-        pressed,
-        focused
-      } = _ref3;
-      const pressableStyles = selectPressableTokens(getThumbnailTokens({
-        hover: hovered,
-        pressed,
-        focus: focused
-      }));
-      return [pressableStyles, index === activeIndex ? [styles.selected, {
-        outline: 'none'
-      }] : styles.nonSelected];
-    },
-    ref: ref,
-    children: /*#__PURE__*/_jsx(Image, {
-      accessibilityIgnoresInvertColors: true,
-      accessibilityLabel: accessibilityLabel ?? alt,
-      source: src,
-      style: styles.image,
-      title: thumbnailTitle
-    })
-  }, src);
-});
-CarouselThumbnail.displayName = 'CarouselThumbnail';
-CarouselThumbnail.propTypes = {
-  accessibilityLabel: PropTypes.string,
-  alt: PropTypes.string,
-  index: PropTypes.number,
-  src: PropTypes.string
-};
-export default CarouselThumbnail;