@telus-uds/components-base 3.29.1 → 4.0.0-alpha.1

package/lib/cjs/Carousel/CarouselContext.js

@@ -7,7 +7,7 @@ exports.CarouselProvider = void 0;
 exports.useCarousel = useCarousel;
 var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
-var _utils = require("../utils");
+var _tokens = require("../utils/props/tokens");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const CarouselContext = /*#__PURE__*/_react.default.createContext();
@@ -59,7 +59,7 @@ CarouselProvider.propTypes = {
   getCopyWithPlaceholders: _propTypes.default.func.isRequired,
   itemLabel: _propTypes.default.string.isRequired,
   refocus: _propTypes.default.bool,
-  themeTokens: (0, _utils.getTokensPropType)('Carousel'),
+  themeTokens: (0, _tokens.getTokensPropType)('Carousel'),
   totalItems: _propTypes.default.number.isRequired,
   width: _propTypes.default.number.isRequired,
   maximumItemsForSlide: _propTypes.default.number,

package/lib/cjs/Carousel/CarouselFirstFocus/CarouselFirstFocus.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.CarouselFirstFocus = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _Pressable = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Pressable"));
 var _Platform = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Platform"));
@@ -17,7 +17,8 @@ function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e
  * its content using the keyboard.
  *
  * @TODO rework this after integrating with SkipLink when available.
- */const CarouselFirstFocus = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
+ */
+const CarouselFirstFocus = exports.CarouselFirstFocus = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
   let {
     title
   } = _ref;
@@ -53,5 +54,4 @@ CarouselFirstFocus.propTypes = {
    * For example, "Summer offers" in "Summer offers, offer 1 of 3"
    */
   title: _propTypes.PropTypes.string
-};
-var _default = exports.default = CarouselFirstFocus;
+};

package/lib/cjs/Carousel/CarouselItem/CarouselItem.js

@@ -3,17 +3,21 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.CarouselItem = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _View = _interopRequireDefault(require("react-native-web/dist/cjs/exports/View"));
 var _Platform = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Platform"));
-var _utils = require("../../utils");
+var _semantics = require("../../utils/a11y/semantics");
+var _selectSystemProps = require("../../utils/props/selectSystemProps");
+var _a11yProps = require("../../utils/props/a11yProps");
+var _viewProps = require("../../utils/props/viewProps");
+var _variantProp = require("../../utils/props/variantProp");
 var _CarouselContext = require("../CarouselContext");
 var _Constants = require("../Constants");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-const [selectProps, selectedSystemPropTypes] = (0, _utils.selectSystemProps)([_utils.a11yProps, _utils.viewProps]);
+const [selectProps, selectedSystemPropTypes] = (0, _selectSystemProps.selectSystemProps)([_a11yProps.a11yProps, _viewProps.viewProps]);
 const selectContainerStyle = _ref => {
   let {
     width,
@@ -76,10 +80,10 @@ const selectContainerStyle = _ref => {
 };
 
 /**
- * `Carousel.Item` is used to wrap the content of an individual slide and is suppsoed to be the
+ * `CarouselItem` 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.default.forwardRef((_ref2, ref) => {
+const CarouselItem = exports.CarouselItem = /*#__PURE__*/_react.default.forwardRef((_ref2, ref) => {
   let {
     children,
     elementIndex,
@@ -102,9 +106,9 @@ const CarouselItem = /*#__PURE__*/_react.default.forwardRef((_ref2, ref) => {
   } = (0, _CarouselContext.useCarousel)();
   const selectedProps = selectProps({
     ...rest,
-    ...(0, _utils.getA11yPropsFromHtmlTag)(tag, rest.accessibilityRole)
+    ...(0, _semantics.getA11yPropsFromHtmlTag)(tag, rest.accessibilityRole)
   });
-  const focusabilityProps = activeIndex === elementIndex || enablePeeking ? {} : _utils.a11yProps.nonFocusableProps;
+  const focusabilityProps = activeIndex === elementIndex || enablePeeking ? {} : _a11yProps.a11yProps.nonFocusableProps;
   const handleFocus = _react.default.useCallback(event => {
     if (_Platform.default.OS === 'web') {
       if (enablePeeking) {
@@ -154,10 +158,10 @@ const CarouselItem = /*#__PURE__*/_react.default.forwardRef((_ref2, ref) => {
 });
 CarouselItem.propTypes = {
   ...selectedSystemPropTypes,
-  variant: _utils.variantProp.propType,
+  variant: _variantProp.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
+   * Don't pass this prop when using `CarouselItem` as it is already being passed by `Carousel` top-level component
    */
   elementIndex: _propTypes.default.number,
   /**
@@ -173,9 +177,9 @@ CarouselItem.propTypes = {
    * 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.
+   * `Carousel` or `CarouselItem` is overriden, the other should be too, to avoid producing invalid HTML.
    */
-  tag: _propTypes.default.oneOf(_utils.layoutTags),
+  tag: _propTypes.default.oneOf(_semantics.layoutTags),
   /**
    * Function to set carousel content background color when slide is being display
    */
@@ -200,5 +204,4 @@ CarouselItem.propTypes = {
    */
   backgroundColor: _propTypes.default.string
 };
-CarouselItem.displayName = 'Carousel.Item';
-var _default = exports.default = CarouselItem;
+CarouselItem.displayName = 'CarouselItem';

package/lib/cjs/Carousel/CarouselStepTracker/CarouselStepTracker.js

@@ -3,20 +3,21 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.CarouselStepTracker = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _StyleSheet = _interopRequireDefault(require("react-native-web/dist/cjs/exports/StyleSheet"));
 var _View = _interopRequireDefault(require("react-native-web/dist/cjs/exports/View"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _CarouselContext = require("../CarouselContext");
-var _StepTracker = _interopRequireDefault(require("../../StepTracker"));
-var _StackView = _interopRequireDefault(require("../../StackView"));
-var _Spacer = _interopRequireDefault(require("../../Spacer"));
-var _Progress = _interopRequireDefault(require("../../Progress"));
-var _utils = require("../../utils");
+var _StepTracker = require("../../StepTracker/StepTracker");
+var _StackView = require("../../StackView/StackView");
+var _Spacer = require("../../Spacer/Spacer");
+var _Progress = require("../../Progress/Progress");
+var _ProgressBar = require("../../Progress/ProgressBar");
+var _variantProp = require("../../utils/props/variantProp");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-const CarouselStepTracker = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
+const CarouselStepTracker = exports.CarouselStepTracker = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
   let {
     stepTrackerVariant,
     progressBarVariant,
@@ -50,16 +51,16 @@ const CarouselStepTracker = /*#__PURE__*/_react.default.forwardRef((_ref, ref) =
       return null;
     }
     return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Spacer.default, {
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Spacer.Spacer, {
         space: 4
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_StackView.default, {
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_StackView.StackView, {
         direction: "row",
         tokens: stackViewTokens,
         ref: ref,
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
           style: staticStyles.progress,
-          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Progress.default, {
-            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Progress.default.Bar, {
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Progress.Progress, {
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ProgressBar.ProgressBar, {
               offset: {
                 items: totalItems,
                 current: activeIndex + 1
@@ -75,11 +76,11 @@ const CarouselStepTracker = /*#__PURE__*/_react.default.forwardRef((_ref, ref) =
   if (enableDisplayMultipleItemsPerSlide && totalItems === 1) {
     return null;
   }
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_StackView.default, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_StackView.StackView, {
     direction: "row",
     tokens: stackViewTokens,
     ref: ref,
-    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_StepTracker.default, {
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_StepTracker.StepTracker, {
       current: activeIndex,
       steps: steps,
       copy: {
@@ -93,13 +94,12 @@ const CarouselStepTracker = /*#__PURE__*/_react.default.forwardRef((_ref, ref) =
 });
 CarouselStepTracker.displayName = 'CarouselStepTracker';
 CarouselStepTracker.propTypes = {
-  stepTrackerVariant: _utils.variantProp.propType,
-  progressBarVariant: _utils.variantProp.propType,
+  stepTrackerVariant: _variantProp.variantProp.propType,
+  progressBarVariant: _variantProp.variantProp.propType,
   enableDisplayMultipleItemsPerSlide: _propTypes.default.bool
 };
 const staticStyles = _StyleSheet.default.create({
   progress: {
     width: 288
   }
-});
-var _default = exports.default = CarouselStepTracker;
+});

package/lib/cjs/Carousel/CarouselTabs/CarouselTabsPanel.js

@@ -3,19 +3,19 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.CarouselTabsPanel = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _View = _interopRequireDefault(require("react-native-web/dist/cjs/exports/View"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
-var _StackView = _interopRequireDefault(require("../../StackView"));
+var _StackView = require("../../StackView/StackView");
 var _CarouselContext = require("../CarouselContext");
-var _CarouselTabsPanelItem = _interopRequireDefault(require("./CarouselTabsPanelItem"));
+var _CarouselTabsPanelItem = require("./CarouselTabsPanelItem");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const selectTabPanelStyle = () => ({
   backgroundColor: 'transparent'
 });
-const CarouselTabsPanel = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
+const CarouselTabsPanel = exports.CarouselTabsPanel = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
   let {
     items
   } = _ref;
@@ -43,7 +43,7 @@ const CarouselTabsPanel = /*#__PURE__*/_react.default.forwardRef((_ref, ref) =>
   };
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_View.default, {
     style: selectTabPanelStyle(),
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_StackView.default, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_StackView.StackView, {
       direction: "row",
       space: 3,
       divider: {
@@ -68,7 +68,7 @@ const CarouselTabsPanel = /*#__PURE__*/_react.default.forwardRef((_ref, ref) =>
           if (typeof onPress === 'function') onPress(event, index);
           goTo(index);
         };
-        return /*#__PURE__*/(0, _jsxRuntime.jsx)(_CarouselTabsPanelItem.default, {
+        return /*#__PURE__*/(0, _jsxRuntime.jsx)(_CarouselTabsPanelItem.CarouselTabsPanelItem, {
           ref: isNext && nextFocusRef || index === 0 && firstTabRef || null,
           title: title,
           selected: selected,
@@ -88,8 +88,7 @@ const CarouselTabsPanel = /*#__PURE__*/_react.default.forwardRef((_ref, ref) =>
 });
 CarouselTabsPanel.displayName = 'CarouselTabsPanel';
 CarouselTabsPanel.propTypes = {
-  items: _propTypes.default.arrayOf(_propTypes.default.shape(_CarouselTabsPanelItem.default.propTypes || {})),
-  // Color defined by `Carousel.item` variant otherwise fallback to transparent
+  items: _propTypes.default.arrayOf(_propTypes.default.shape(_CarouselTabsPanelItem.CarouselTabsPanelItem.propTypes || {})),
+  // Color defined by `CarouselItem` variant otherwise fallback to transparent
   contentBackgroundColor: _propTypes.default.string
-};
-var _default = exports.default = CarouselTabsPanel;
+};

package/lib/cjs/Carousel/CarouselTabs/CarouselTabsPanelItem.js

@@ -3,18 +3,26 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.CarouselTabsPanelItem = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _Pressable = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Pressable"));
 var _Text = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Text"));
 var _Platform = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Platform"));
-var _ThemeProvider = require("../../ThemeProvider");
-var _utils = require("../../utils");
+var _styles = require("../../ThemeProvider/utils/styles");
+var _useThemeTokens = require("../../ThemeProvider/useThemeTokens");
+var _selectSystemProps = require("../../utils/props/selectSystemProps");
+var _a11yProps = require("../../utils/props/a11yProps");
+var _pressProps = require("../../utils/props/pressProps");
+var _viewProps = require("../../utils/props/viewProps");
+var _textProps = require("../../utils/props/textProps");
+var _tokens = require("../../utils/props/tokens");
+var _variantProp = require("../../utils/props/variantProp");
+var _pressability = require("../../utils/pressability");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-const [selectPressProps, pressPropTypes] = (0, _utils.selectSystemProps)([_utils.a11yProps, _utils.pressProps, _utils.viewProps]);
-const [selectTextProps, textPropTypes] = (0, _utils.selectSystemProps)([_utils.textProps]);
+const [selectPressProps, pressPropTypes] = (0, _selectSystemProps.selectSystemProps)([_a11yProps.a11yProps, _pressProps.pressProps, _viewProps.viewProps]);
+const [selectTextProps, textPropTypes] = (0, _selectSystemProps.selectSystemProps)([_textProps.textProps]);
 const selectContainerStyles = _ref => {
   let {
     paddingLeft,
@@ -57,7 +65,7 @@ const selectTextStyles = _ref2 => {
     fontName,
     color
   } = _ref2;
-  return (0, _ThemeProvider.applyTextStyles)({
+  return (0, _styles.applyTextStyles)({
     fontSize,
     fontScaleCap,
     lineHeight,
@@ -67,7 +75,7 @@ const selectTextStyles = _ref2 => {
     color
   });
 };
-const CarouselTabsPanelItem = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) => {
+const CarouselTabsPanelItem = exports.CarouselTabsPanelItem = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) => {
   let {
     title,
     selected,
@@ -82,8 +90,8 @@ const CarouselTabsPanelItem = /*#__PURE__*/_react.default.forwardRef((_ref3, ref
   // (must refocus _after_ calling `goTo`, else focus target content is not up to date)
   const [isFocused, setIsFocused] = _react.default.useState(false);
   const disabled = (inactive || selected) && !isFocused;
-  const getTokens = (0, _ThemeProvider.useThemeTokensCallback)('CarouselTabsPanelItem', tokens, variant);
-  const resolveTokens = pressState => getTokens((0, _utils.resolvePressableState)(pressState, {
+  const getTokens = (0, _useThemeTokens.useThemeTokensCallback)('CarouselTabsPanelItem', tokens, variant);
+  const resolveTokens = pressState => getTokens((0, _pressability.resolvePressableState)(pressState, {
     selected
   }));
   const getContainerStyle = pressState => selectContainerStyles(resolveTokens(pressState));
@@ -119,7 +127,6 @@ CarouselTabsPanelItem.propTypes = {
   ...textPropTypes,
   title: _propTypes.default.string.isRequired,
   selected: _propTypes.default.bool,
-  tokens: (0, _utils.getTokensPropType)('CarouselTabsPanelItem'),
-  variant: _utils.variantProp.propType
-};
-var _default = exports.default = CarouselTabsPanelItem;
+  tokens: (0, _tokens.getTokensPropType)('CarouselTabsPanelItem'),
+  variant: _variantProp.variantProp.propType
+};

package/lib/cjs/Carousel/CarouselThumbnail.js

@@ -3,14 +3,17 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.CarouselThumbnail = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
+var _StyleSheet = _interopRequireDefault(require("react-native-web/dist/cjs/exports/StyleSheet"));
 var _Pressable = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Pressable"));
 var _Image = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Image"));
+var _View = _interopRequireDefault(require("react-native-web/dist/cjs/exports/View"));
 var _CarouselContext = require("./CarouselContext");
-var _ThemeProvider = require("../ThemeProvider");
-var _ViewportProvider = require("../ViewportProvider");
+var _useThemeTokens = require("../ThemeProvider/useThemeTokens");
+var _useViewport = require("../ViewportProvider/useViewport");
+var _Icon = require("../Icon/Icon");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const selectPressableTokens = _ref => {
@@ -30,17 +33,64 @@ const selectPressableTokens = _ref => {
   };
 };
 
+// Play icon overlay appearance is consistent across all brands and is not theme-configurable.
+// The circle occupies 55% of the thumbnail size, and the icon occupies 55% of the circle diameter.
+const PLAY_ICON_RATIO = 0.55;
+const PLAY_ICON_BORDER_RADIUS_DIVISOR = 2;
+const selectImageStyles = size => ({
+  width: size,
+  height: size
+});
+const selectSelectedStyles = _ref2 => {
+  let {
+    selectedBorderColor,
+    selectedBorderWidth,
+    padding,
+    margin
+  } = _ref2;
+  return {
+    borderColor: selectedBorderColor,
+    borderWidth: selectedBorderWidth,
+    padding: padding - selectedBorderWidth,
+    marginBottom: margin + selectedBorderWidth
+  };
+};
+const selectNonSelectedStyles = _ref3 => {
+  let {
+    borderWidth,
+    padding,
+    margin,
+    selectedBorderWidth
+  } = _ref3;
+  return {
+    padding: padding - borderWidth,
+    marginBottom: margin + selectedBorderWidth
+  };
+};
+const selectPlayIconCircleStyles = thumbnailSize => {
+  const diameter = thumbnailSize * PLAY_ICON_RATIO;
+  return {
+    width: diameter,
+    height: diameter,
+    borderRadius: diameter / PLAY_ICON_BORDER_RADIUS_DIVISOR
+  };
+};
+const selectPlayIconTokens = thumbnailSize => ({
+  size: thumbnailSize * PLAY_ICON_RATIO * PLAY_ICON_RATIO
+});
+
 /**
- * `Carousel.Thumbnail` is used to wrap the content of an individual slide and is suppsoed to be the
+ * `CarouselThumbnail` 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.default.forwardRef((_ref2, ref) => {
+const CarouselThumbnail = exports.CarouselThumbnail = /*#__PURE__*/_react.default.forwardRef((_ref4, ref) => {
   let {
     accessibilityLabel,
     alt,
     index,
+    isVideo,
     src
-  } = _ref2;
+  } = _ref4;
   const {
     activeIndex,
     itemLabel,
@@ -48,8 +98,8 @@ const CarouselThumbnail = /*#__PURE__*/_react.default.forwardRef((_ref2, ref) =>
     getCopyWithPlaceholders,
     goTo
   } = (0, _CarouselContext.useCarousel)();
-  const getThumbnailTokens = (0, _ThemeProvider.useThemeTokensCallback)('CarouselThumbnail');
-  const viewport = (0, _ViewportProvider.useViewport)();
+  const getThumbnailTokens = (0, _useThemeTokens.useThemeTokensCallback)('CarouselThumbnail');
+  const viewport = (0, _useViewport.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 => {
@@ -62,59 +112,100 @@ const CarouselThumbnail = /*#__PURE__*/_react.default.forwardRef((_ref2, ref) =>
     selectedBorderColor,
     selectedBorderWidth,
     size,
-    margin
+    margin,
+    playIcon
   } = 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__*/(0, _jsxRuntime.jsx)(_Pressable.default, {
     onKeyDown: handleKeyDown,
     onPress: handlePress,
-    style: _ref3 => {
+    style: _ref5 => {
       let {
         hovered,
         pressed,
         focused
-      } = _ref3;
+      } = _ref5;
       const pressableStyles = selectPressableTokens(getThumbnailTokens({
         hover: hovered,
         pressed,
         focus: focused
       }));
-      return [pressableStyles, index === activeIndex ? [styles.selected, {
-        outline: 'none'
-      }] : styles.nonSelected];
+      return [pressableStyles, index === activeIndex ? [selectSelectedStyles({
+        selectedBorderColor,
+        selectedBorderWidth,
+        padding,
+        margin
+      }), staticStyles.selectedPressableOutline] : selectNonSelectedStyles({
+        borderWidth,
+        padding,
+        margin,
+        selectedBorderWidth
+      })];
     },
     ref: ref,
-    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Image.default, {
-      accessibilityIgnoresInvertColors: true,
-      accessibilityLabel: accessibilityLabel ?? alt,
-      source: src,
-      style: styles.image,
-      title: thumbnailTitle
+    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_View.default, {
+      style: [staticStyles.imageContainer, selectImageStyles(size)],
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Image.default, {
+        accessibilityIgnoresInvertColors: true,
+        accessibilityLabel: accessibilityLabel ?? alt,
+        source: src,
+        style: selectImageStyles(size),
+        title: thumbnailTitle
+      }), isVideo && playIcon && /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+        style: staticStyles.playIconOverlayContainer,
+        testID: `play-icon-overlay-${index}`,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+          style: [selectPlayIconCircleStyles(size), staticStyles.playIconCircleBackground],
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.Icon, {
+            icon: playIcon,
+            tokens: {
+              ...selectPlayIconTokens(size),
+              color: staticStyles.playIconSymbol.color
+            }
+          })
+        })
+      })]
     })
   }, src);
 });
 CarouselThumbnail.displayName = 'CarouselThumbnail';
 CarouselThumbnail.propTypes = {
+  /** Accessibility label for screen readers, overrides the alt text */
   accessibilityLabel: _propTypes.default.string,
+  /** Alt text for the thumbnail image */
   alt: _propTypes.default.string,
+  /** Zero-based index of this thumbnail within the carousel */
   index: _propTypes.default.number,
-  src: _propTypes.default.string
+  /**
+   * When true, renders a play icon overlay on the thumbnail to indicate that the slide contains a video.
+   */
+  isVideo: _propTypes.default.bool,
+  /** Image source URI (web) or local asset require() (native) */
+  src: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number])
 };
-var _default = exports.default = CarouselThumbnail;
+const staticStyles = _StyleSheet.default.create({
+  imageContainer: {
+    position: 'relative'
+  },
+  playIconOverlayContainer: {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+    justifyContent: 'center',
+    alignItems: 'center'
+  },
+  selectedPressableOutline: {
+    outlineStyle: 'none'
+  },
+  playIconCircleBackground: {
+    backgroundColor: 'rgba(0, 0, 0, 0.6)',
+    justifyContent: 'center',
+    alignItems: 'center'
+  },
+  playIconSymbol: {
+    color: 'rgb(255, 255, 255)'
+  }
+});

package/lib/cjs/Carousel/CarouselThumbnailNavigation.js

@@ -3,25 +3,25 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.CarouselThumbnailNavigation = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _View = _interopRequireDefault(require("react-native-web/dist/cjs/exports/View"));
 var _CarouselContext = require("./CarouselContext");
-var _CarouselThumbnail = _interopRequireDefault(require("./CarouselThumbnail"));
-var _StackView = require("../StackView");
-var _ThemeProvider = require("../ThemeProvider");
-var _ViewportProvider = require("../ViewportProvider");
+var _CarouselThumbnail = require("./CarouselThumbnail");
+var _StackWrap = require("../StackView/StackWrap");
+var _useThemeTokens = require("../ThemeProvider/useThemeTokens");
+var _useViewport = require("../ViewportProvider/useViewport");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-const CarouselThumbnailNavigation = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
+const CarouselThumbnailNavigation = exports.CarouselThumbnailNavigation = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
   let {
     thumbnails = []
   } = _ref;
-  const viewport = (0, _ViewportProvider.useViewport)();
+  const viewport = (0, _useViewport.useViewport)();
   const {
     alignItems
-  } = (0, _ThemeProvider.useThemeTokens)('CarouselThumbnail', {}, {
+  } = (0, _useThemeTokens.useThemeTokens)('CarouselThumbnail', {}, {
     viewport
   });
   const {
@@ -32,7 +32,7 @@ const CarouselThumbnailNavigation = /*#__PURE__*/_react.default.forwardRef((_ref
   }
   const {
     containerPaddingTop: thumbnailContainerPaddingTop
-  } = (0, _ThemeProvider.useThemeTokens)('CarouselThumbnail');
+  } = (0, _useThemeTokens.useThemeTokens)('CarouselThumbnail');
   const stackWrapTokens = {
     justifyContent: 'flex-start'
   };
@@ -43,7 +43,7 @@ const CarouselThumbnailNavigation = /*#__PURE__*/_react.default.forwardRef((_ref
   };
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
     style: containerStyles,
-    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_StackView.StackWrap, {
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_StackWrap.StackWrap, {
       direction: "row",
       tokens: stackWrapTokens,
       space: 2,
@@ -52,12 +52,14 @@ const CarouselThumbnailNavigation = /*#__PURE__*/_react.default.forwardRef((_ref
         let {
           accessibilityLabel,
           alt,
+          isVideo,
           src
         } = _ref2;
-        return /*#__PURE__*/(0, _jsxRuntime.jsx)(_CarouselThumbnail.default, {
+        return /*#__PURE__*/(0, _jsxRuntime.jsx)(_CarouselThumbnail.CarouselThumbnail, {
           accessibilityLabel: accessibilityLabel,
           alt: alt,
           index: index,
+          isVideo: isVideo,
           src: src
         }, src);
       })
@@ -70,9 +72,13 @@ CarouselThumbnailNavigation.propTypes = {
    * An array of objects containing information on the thumbnail images.
    */
   thumbnails: _propTypes.default.arrayOf(_propTypes.default.shape({
+    /** Accessibility label for the thumbnail image, used by assistive technologies. */
     accessibilityLabel: _propTypes.default.string,
+    /** Alternative text for the thumbnail image, displayed when the image cannot be rendered. */
     alt: _propTypes.default.string,
-    src: _propTypes.default.string
+    /** When true, renders a play icon overlay on the thumbnail to indicate that the slide contains a video. */
+    isVideo: _propTypes.default.bool,
+    /** URL or path of the thumbnail image. When used with `isVideo`, this should be the video's poster/preview image. */
+    src: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number])
   })).isRequired
-};
-var _default = exports.default = CarouselThumbnailNavigation;
+};

package/lib/cjs/Carousel/dictionary.js

@@ -3,9 +3,9 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.dictionary = void 0;
 // 'stepLabel' and 'stepTrackerLabel' are passed down to StepTracker
-var _default = exports.default = {
+const dictionary = exports.dictionary = {
   en: {
     carouselLabel: '%{stepCount} items',
     iconButtonLabel: 'Show %{itemLabel} %{targetStep} of %{stepCount}',