@telus-uds/components-web 3.4.0 → 4.0.0

package/lib/cjs/Video/index.js

@@ -0,0 +1,9 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _Video = _interopRequireDefault(require("./Video"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+var _default = exports.default = _Video.default;

package/lib/cjs/Video/videoText.js

@@ -0,0 +1,61 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+const videoText = {
+  en: {
+    videoPlayer: 'Press the space bar or K to toggle play and pause. Use the left and right arrow keys or the comma and period keys to scrub through the video. Use the up and down arrow keys, the dash and equal keys, or the add and subtract number pad keys to increase and decrease volume. Press M to toggle mute. Press F to toggle fullscreen. Press escape to exit instructions and return to video.',
+    videoSelected: 'Video selected. Press Q to listen to controls.',
+    videoSelectedSimple: 'Video selected. Press the space bar or K to toggle play and pause.',
+    mute: 'Mute',
+    unmute: 'Unmute',
+    watch: 'Watch the video',
+    replay: 'Replay the video',
+    itemSelected: 'This is the currently selected option.',
+    itemUnselected: 'Select to switch to this option.',
+    captionsToggle: 'Select captions',
+    captionsDialogue: 'Captions',
+    captionsNone: 'None',
+    qualityToggle: 'Change video quality',
+    qualityDialogue: 'Quality',
+    fullScreenToggle: 'Toggle fullscreen',
+    minute: 'minute',
+    minutes: 'minutes',
+    second: 'second',
+    seconds: 'seconds',
+    ariaLabel: 'Play video. Video length is {minutes} and {seconds}.',
+    volumeSliderLabel: 'Adjust the volume',
+    videoProgressBarLabel: 'Progress bar',
+    en: 'English',
+    fr: 'French'
+  },
+  fr: {
+    videoPlayer: 'Appuyer sur K pour basculer entre lecture et pause. Utiliser les flèches gauche et droite ou les touches virgule et point pour reculer ou faire une avance rapide dans la vidéo. Utiliser les flèches ascendante et descendante, les touches tiret et égal ou les touches plus et moins du clavier numérique pour contrôler le volume. Appuyer sur la touche M pour désactiver le son. Appuyer sur F pour basculer en mode plein écran. Appuyer sur la touche d’échappement pour quitter les instructions et retourner à la vidéo.',
+    videoSelected: 'Vidéo sélectionnée. Appuyer sur Q pour écouter les contrôles',
+    videoSelectedSimple: 'Vidéo sélectionnée. Appuyer sur K pour basculer entre lecture et pause.',
+    mute: 'Désactiver le son',
+    unmute: 'Activer le son',
+    watch: 'Voir la vidéo',
+    replay: 'Relire la vidéo',
+    itemSelected: 'Cette option est déjà sélectionnée.',
+    itemUnselected: 'Sélectionner pour basculer à cette option.',
+    captionsToggle: 'Sélectionner les sous-titres',
+    captionsDialogue: 'Sous-titres',
+    captionsNone: 'Aucun',
+    qualityToggle: 'Modifier la qualité de la vidéo',
+    qualityDialogue: 'Qualité',
+    fullScreenToggle: 'Basculer en mode plein écran',
+    minute: 'minute',
+    minutes: 'minutes',
+    second: 'seconde',
+    seconds: 'secondes',
+    ariaLabel: 'Lire la vidéo. La durée de la vidéo est de {minutes} et {seconds}.',
+    volumeSliderLabel: 'Réglez le volume',
+    videoProgressBarLabel: 'Barre de progression',
+    en: 'Anglais',
+    fr: 'Français'
+  }
+};
+var _default = exports.default = videoText;

package/lib/cjs/VideoPicker/VideoPicker.js

@@ -0,0 +1,197 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _systemConstants = require("@telus-uds/system-constants");
+var _componentsBase = require("@telus-uds/components-base");
+var _styledComponents = _interopRequireWildcard(require("styled-components"));
+var _videoPropType = require("./videoPropType");
+var _VideoPickerThumbnail = _interopRequireDefault(require("./VideoPickerThumbnail"));
+var _VideoPickerPlayer = _interopRequireDefault(require("./VideoPickerPlayer"));
+var _VideoSlider = _interopRequireDefault(require("./VideoSlider"));
+var _utils = require("../utils");
+var _jsxRuntime = require("react/jsx-runtime");
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const [selectProps, selectedSystemPropTypes] = (0, _componentsBase.selectSystemProps)([_utils.htmlAttrs]);
+const framedContainerStyles = _ref => {
+  let {
+    framedContainerBackgroundColor,
+    framedContainerBorderWidth,
+    framedContainerBorderColor,
+    framedContainerBorderRadius,
+    framedMaxHeight
+  } = _ref;
+  return (0, _styledComponents.css)(["background-color:", ";border:", "px solid ", ";border-radius:", "px;& > div{max-height:", "px;}"], framedContainerBackgroundColor, framedContainerBorderWidth, framedContainerBorderColor, framedContainerBorderRadius, framedMaxHeight);
+};
+const VideoPickerContainer = /*#__PURE__*/_styledComponents.default.div.withConfig({
+  displayName: "VideoPicker__VideoPickerContainer",
+  componentId: "components-web__sc-x6lxp0-0"
+})(["", ""], _ref2 => {
+  let {
+    isFramed,
+    ...tokens
+  } = _ref2;
+  return isFramed && framedContainerStyles(tokens);
+});
+const framedPlayerContainerStyles = _ref3 => {
+  let {
+    framedMaxHeight,
+    framedContainerPadding
+  } = _ref3;
+  return (0, _styledComponents.css)(["width:66.67%;padding:", "px;max-height:", "px;flex-shrink:0;box-sizing:border-box;"], framedContainerPadding, framedMaxHeight);
+};
+const VideoPlayerContainer = /*#__PURE__*/_styledComponents.default.div.withConfig({
+  displayName: "VideoPicker__VideoPlayerContainer",
+  componentId: "components-web__sc-x6lxp0-1"
+})(["", " overflow:auto;"], _ref4 => {
+  let {
+    isFramed,
+    ...tokens
+  } = _ref4;
+  return isFramed && framedPlayerContainerStyles(tokens);
+});
+const framedVideoListContainerStyle = /*#__PURE__*/(0, _styledComponents.css)(["max-height:", "px;overflow:auto;flex-direction:column;"], _ref5 => {
+  let {
+    framedMaxHeight
+  } = _ref5;
+  return framedMaxHeight;
+});
+const VideoListContainer = /*#__PURE__*/_styledComponents.default.div.withConfig({
+  displayName: "VideoPicker__VideoListContainer",
+  componentId: "components-web__sc-x6lxp0-2"
+})(["display:flex;justify-content:flex-start;position:relative;flex-grow:1;flex-direction:column;", ""], props => props.isFramed && framedVideoListContainerStyle);
+const VideoPicker = /*#__PURE__*/_react.default.forwardRef((_ref6, ref) => {
+  let {
+    videoList = [],
+    selectedVideo = videoList[0]?.videoId,
+    frame,
+    onStartVideo = () => {},
+    onSelectVideo = () => {},
+    onPlay = () => {},
+    onPause = () => {},
+    onProgress = () => {},
+    ...rest
+  } = _ref6;
+  const viewport = (0, _componentsBase.useViewport)();
+  const {
+    stackViewDividerColor,
+    ...themeTokens
+  } = (0, _componentsBase.useThemeTokens)('VideoPicker');
+  const [currentVideoId, setCurrentVideoId] = _react.default.useState(selectedVideo);
+  const videoPlayerRef = _react.default.useRef(null);
+  const currentVideo = videoList.find(video => video.videoId === currentVideoId);
+  _react.default.useEffect(() => {
+    // Update current video if parent changes which video id it passes down
+    setCurrentVideoId(selectedVideo);
+  }, [selectedVideo]);
+  const addVideoEventHandlers = video => {
+    if (!video) return {};
+    return {
+      ...video,
+      onPlay: video.onPlay || onPlay,
+      onPause: video.onPause || onPause,
+      onProgress: video.onProgress || onProgress
+    };
+  };
+
+  // `frame` variant should only work on larger screens
+  const isFramed = frame && [_systemConstants.viewports.lg, _systemConstants.viewports.xl].includes(viewport);
+  const hasSlider = !frame && [_systemConstants.viewports.md, _systemConstants.viewports.lg, _systemConstants.viewports.xl].includes(viewport);
+  const listElements = videoList.map((video, index) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_VideoPickerThumbnail.default, {
+    video: video,
+    videoPlayerRef: videoPlayerRef,
+    selectedVideoId: currentVideoId,
+    onSelectVideo: current => {
+      setCurrentVideoId(current.videoId);
+      onSelectVideo(current);
+    },
+    layout: !hasSlider ? 'horizontal' : 'vertical',
+    index: index,
+    isFramed: isFramed
+  }, video.videoId));
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(VideoPickerContainer, {
+    ref: ref,
+    isFramed: isFramed,
+    ...selectProps(rest),
+    ...themeTokens,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_componentsBase.StackView, {
+      divider: isFramed ? {
+        tokens: {
+          color: stackViewDividerColor
+        }
+      } : {
+        variant: {
+          decorative: true
+        }
+      },
+      space: isFramed ? 0 : 4 // everything has internal padding in `frame` variant
+      ,
+      direction: isFramed ? 'row' : 'column',
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(VideoPlayerContainer, {
+        ...themeTokens,
+        isFramed: isFramed,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_VideoPickerPlayer.default, {
+          video: addVideoEventHandlers(currentVideo, onPlay, onPause, onProgress),
+          videoPlayerRef: videoPlayerRef,
+          onStartVideo: onStartVideo
+        })
+      }), hasSlider ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_VideoSlider.default, {
+        children: listElements
+      }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(VideoListContainer, {
+        viewport: viewport,
+        "data-testid": "video-list-container",
+        isFramed: isFramed,
+        children: listElements
+      })]
+    })
+  });
+});
+VideoPicker.displayName = 'VideoPicker';
+VideoPicker.propTypes = {
+  ...selectedSystemPropTypes,
+  tokens: (0, _componentsBase.getTokensPropType)('VideoPicker'),
+  /**
+   * Id of the currently selected video (defaults to the first video if not set).
+   */
+  selectedVideo: _propTypes.default.string,
+  /**
+   * An array of Video objects.
+   */
+  videoList: _propTypes.default.arrayOf(_videoPropType.VideoPropType),
+  /**
+   * Use to display the picker in a container and the playlist as a sidebar (only available for breakpoints LG and larger)
+   */
+  frame: _propTypes.default.bool,
+  /**
+   * Callback function trigerred when the video player starts playing video.
+   * @param {object} video - The video object that is playing.
+   */
+  onStartVideo: _propTypes.default.func,
+  /**
+   * Callback function trigerred when a video is selected from the thumbnail list.
+   * @param {object} video - The video object that is selected.
+   */
+  onSelectVideo: _propTypes.default.func,
+  /**
+   * Callback function trigerred during progress milestones 10% 25% 50% 75% 100%.
+   * @param {object} event - The event object.
+   */
+  onProgress: _propTypes.default.func,
+  /**
+   * Callback function trigerred when the video player starts playing video.
+   * @param {object} event - The event object.
+   */
+  onPlay: _propTypes.default.func,
+  /**
+   * Callback function trigerred when the video gets paused.
+   * @param {object} event - The event object.
+   */
+  onPause: _propTypes.default.func
+};
+var _default = exports.default = VideoPicker;

package/lib/cjs/VideoPicker/VideoPickerPlayer.js

@@ -0,0 +1,54 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _componentsBase = require("@telus-uds/components-base");
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _WebVideo = _interopRequireDefault(require("../WebVideo/WebVideo"));
+var _videoPropType = require("./videoPropType");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const VideoPickerPlayer = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
+  let {
+    video = {},
+    videoPlayerRef,
+    onStartVideo = () => {}
+  } = _ref;
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_componentsBase.StackView, {
+    space: 3,
+    tokens: {
+      flexShrink: 1
+    },
+    ref: ref,
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      ref: videoPlayerRef,
+      children: video.videoId && /*#__PURE__*/(0, _jsxRuntime.jsx)(_WebVideo.default, {
+        ...video,
+        onStart: () => onStartVideo(video)
+      })
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_componentsBase.StackView, {
+      space: 2,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.Typography, {
+        variant: {
+          size: 'h3'
+        },
+        children: video.title
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.Typography, {
+        variant: {
+          colour: 'default'
+        },
+        children: video.description
+      })]
+    })]
+  });
+});
+VideoPickerPlayer.displayName = 'VideoPickerPlayer';
+VideoPickerPlayer.propTypes = {
+  video: _videoPropType.VideoPropType,
+  videoPlayerRef: _videoPropType.RefPropType,
+  onStartVideo: _propTypes.default.func
+};
+var _default = exports.default = VideoPickerPlayer;

package/lib/cjs/VideoPicker/VideoPickerThumbnail.js

@@ -0,0 +1,223 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _Pressable = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Pressable"));
+var _StyleSheet = _interopRequireDefault(require("react-native-web/dist/cjs/exports/StyleSheet"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _systemConstants = require("@telus-uds/system-constants");
+var _componentsBase = require("@telus-uds/components-base");
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _helpers = require("../shared/VideoSplash/helpers");
+var _videoPropType = require("./videoPropType");
+var _VideoSplash = _interopRequireDefault(require("../shared/VideoSplash/VideoSplash"));
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const {
+  getItemPositionLayoutHandler,
+  itemPositionsPropType
+} = _componentsBase.horizontalScrollUtils;
+
+// Use a React Native (web) outer container so it can take an onLayout callback, to
+// access position in VideoSlider's UDS HorizontalScroll and update its itemPositions
+const createReactNativeStyles = _ref => {
+  let {
+    pressablePaddingBottom,
+    pressablePaddingVertical,
+    pressablePaddingHorizontal,
+    pressableBorderTopWidth,
+    pressableBorderTopColor
+  } = _ref;
+  return _StyleSheet.default.create({
+    container: {
+      cursor: 'pointer'
+    },
+    horizontal: {
+      paddingBottom: pressablePaddingBottom
+    },
+    framed: {
+      paddingVertical: pressablePaddingVertical,
+      paddingHorizontal: pressablePaddingHorizontal
+    },
+    framedLine: {
+      borderTopWidth: pressableBorderTopWidth,
+      borderTopColor: pressableBorderTopColor
+    }
+  });
+};
+const ImageContainer = /*#__PURE__*/_styledComponents.default.div.withConfig({
+  displayName: "VideoPickerThumbnail__ImageContainer",
+  componentId: "components-web__sc-1glxurq-0"
+})(["padding:", ";border:", ";border-radius:", "px;"], props => `${props.outerBorderGap}px`, props => `${props.outerBorderWidth}px solid ${props.outerBorderColor}`, _ref2 => {
+  let {
+    outerBorderRadius
+  } = _ref2;
+  return outerBorderRadius;
+});
+const VideoThumbnail = /*#__PURE__*/_styledComponents.default.div.withConfig({
+  displayName: "VideoPickerThumbnail__VideoThumbnail",
+  componentId: "components-web__sc-1glxurq-1"
+})(["position:relative;width:", ";flex-shrink:0;* button{display:none;}&::before{content:'';display:block;padding-bottom:56.25%;}&::after{content:'';border:", "px solid;border-color:", ";border-radius:", "px;position:absolute;top:0;left:0;right:0;bottom:0;}& > div{border-radius:", "px;}"], props => props.layout === 'vertical' ? '100%' : '144px', _ref3 => {
+  let {
+    borderWidth
+  } = _ref3;
+  return borderWidth;
+}, _ref4 => {
+  let {
+    borderColor
+  } = _ref4;
+  return borderColor;
+}, _ref5 => {
+  let {
+    borderRadius
+  } = _ref5;
+  return borderRadius;
+}, _ref6 => {
+  let {
+    borderRadius
+  } = _ref6;
+  return borderRadius;
+});
+const ThumbnailTitleContainer = /*#__PURE__*/_styledComponents.default.div.withConfig({
+  displayName: "VideoPickerThumbnail__ThumbnailTitleContainer",
+  componentId: "components-web__sc-1glxurq-2"
+})(["display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;"]);
+const VideoPickerThumbnail = /*#__PURE__*/_react.default.forwardRef((_ref7, ref) => {
+  let {
+    videoPlayerRef,
+    selectedVideoId,
+    video,
+    onSelectVideo,
+    layout = 'vertical',
+    isFramed,
+    itemPositions,
+    index,
+    width = '100%'
+  } = _ref7;
+  const viewport = (0, _componentsBase.useViewport)();
+  const getTokens = (0, _componentsBase.useThemeTokensCallback)('VideoPickerThumbnail', {}, {});
+  const {
+    timestamp
+  } = (0, _helpers.getTimestamp)(video.videoLength, video.copy);
+  const isPlaying = selectedVideoId === video.videoId;
+  const renderThumbnailImage = themeTokens => {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(VideoThumbnail, {
+      ...themeTokens,
+      isPlaying: isPlaying,
+      layout: layout,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_VideoSplash.default, {
+        simpleMode: true,
+        poster: video.posterSrc || `https://img.youtube.com/vi/${video.videoId}/maxresdefault.jpg`,
+        videoLength: video.videoLength,
+        copy: video.copy
+      })
+    });
+  };
+  const renderThumbnailInfo = _ref8 => {
+    let {
+      titleColor,
+      subTitleColor
+    } = _ref8;
+    return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_componentsBase.StackView, {
+      space: 2,
+      tokens: {
+        flexShrink: 1
+      },
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(ThumbnailTitleContainer, {
+        viewport: viewport,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.Typography, {
+          variant: {
+            bold: true
+          },
+          tokens: {
+            color: titleColor
+          },
+          children: video.title
+        })
+      }), viewport !== _systemConstants.viewports.xs && /*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.Typography, {
+        variant: {
+          size: 'micro'
+        },
+        tokens: {
+          color: subTitleColor
+        },
+        children: timestamp
+      })]
+    });
+  };
+  const handleLayout = itemPositions !== undefined ? getItemPositionLayoutHandler(itemPositions.positions, index) : undefined;
+  const onKeyPress = event => {
+    if (['Space', 'Enter'].includes(event.key)) {
+      onSelectVideo(video);
+      const splashButton = videoPlayerRef.current?.querySelector('button');
+      if (splashButton) splashButton.focus();
+    }
+  };
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Pressable.default, {
+    onLayout: handleLayout,
+    onPress: () => onSelectVideo(video),
+    testID: `thumbnail-container-${video.videoId}`,
+    onKeyPress: onKeyPress,
+    accessibilityRole: "radio",
+    accessibilityState: {
+      checked: isPlaying
+    },
+    style: _ref9 => {
+      let {
+        hovered: hover,
+        focused: focus,
+        pressed
+      } = _ref9;
+      const themeTokens = getTokens({
+        hover,
+        focus,
+        pressed,
+        selected: isPlaying
+      });
+      const rnStyles = createReactNativeStyles(themeTokens);
+      return [rnStyles.container, layout === 'horizontal' && rnStyles.horizontal, isFramed && rnStyles.framed, isFramed && index > 0 && rnStyles.framedLine, {
+        width
+      }, {
+        outline: 'none'
+      }];
+    },
+    ref: ref,
+    children: _ref10 => {
+      let {
+        hovered: hover,
+        focused: focus,
+        pressed
+      } = _ref10;
+      const themeTokens = getTokens({
+        hover,
+        focus,
+        pressed,
+        selected: isPlaying
+      });
+      return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_componentsBase.StackView, {
+        space: layout === 'vertical' ? 2 : 3,
+        direction: layout === 'vertical' ? 'column' : 'row',
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(ImageContainer, {
+          ...themeTokens,
+          children: renderThumbnailImage(themeTokens)
+        }), renderThumbnailInfo(themeTokens)]
+      });
+    }
+  }, video.videoId);
+});
+VideoPickerThumbnail.displayName = 'VideoPickerThumbnail';
+VideoPickerThumbnail.propTypes = {
+  selectedVideoId: _propTypes.default.string,
+  onSelectVideo: _propTypes.default.func,
+  video: _videoPropType.VideoPropType,
+  videoPlayerRef: _videoPropType.RefPropType,
+  layout: _propTypes.default.oneOf(['vertical', 'horizontal']),
+  isFramed: _propTypes.default.bool,
+  itemPositions: itemPositionsPropType,
+  index: _propTypes.default.number,
+  width: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string])
+};
+var _default = exports.default = VideoPickerThumbnail;

package/lib/cjs/VideoPicker/VideoSlider.js

@@ -0,0 +1,88 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _componentsBase = require("@telus-uds/components-base");
+var _View = _interopRequireDefault(require("react-native-web/dist/cjs/exports/View"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const {
+  useItemPositions
+} = _componentsBase.horizontalScrollUtils;
+const VideoSlider = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
+  let {
+    children
+  } = _ref;
+  const viewport = (0, _componentsBase.useViewport)();
+  const [itemPositions] = useItemPositions();
+  const [containerWidth, setContainerWidth] = _react.default.useState(null);
+  const {
+    previousIcon: PreviousIcon,
+    nextIcon: NextIcon
+  } = (0, _componentsBase.useThemeTokens)('VideoPickerSlider');
+  const onLayout = _ref2 => {
+    let {
+      nativeEvent: {
+        layout: {
+          width
+        }
+      }
+    } = _ref2;
+    setContainerWidth(width);
+  };
+  const itemsGap = 32; // '5' on spacing scale
+  const itemsCount = viewport === 'lg' || viewport === 'xl' ? 4 : 3;
+  const itemGapPortioned = (itemsCount - 1) * itemsGap / itemsCount;
+  const itemWidth = containerWidth === null ?
+  // For first render, we don't know container width, so avoid flicker with static % width
+  `calc(${Math.round(100 / itemsCount)}% - ${Math.round(itemGapPortioned)}px)` :
+  // After first render, can't use % widths because parent is > 100% width horizontal scroll area
+  Math.max(containerWidth / itemsCount - itemGapPortioned, 0 // Prevent negative width breaking layout on very narrow containers
+  );
+  const content = /*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.StackView, {
+    space: 5,
+    direction: "row",
+    accessibilityRole: "radiogroup",
+    tokens: {
+      flexGrow: 1
+    },
+    children: _react.default.Children.map(children, (child, index) => /*#__PURE__*/_react.default.cloneElement(child, {
+      index,
+      itemPositions,
+      width: itemWidth
+    }))
+  });
+  const overflow = containerWidth === null && {
+    overflow: 'hidden'
+  };
+  const horizontalScrollTokens = {
+    nextIcon: NextIcon,
+    previousIcon: PreviousIcon,
+    gutter: 0,
+    borderBottomWidth: 0,
+    borderBottomColor: 'transparent',
+    buttonClearance: 0
+  };
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+    onLayout: onLayout,
+    style: overflow,
+    ref: ref,
+    children: containerWidth === null ?
+    // Use a 100% width non-scrollable parent until containerWidth is known, to avoid flicker
+    content : /*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.HorizontalScroll, {
+      ScrollButton: _componentsBase.HorizontalScrollButton,
+      itemPositions: itemPositions,
+      tokens: horizontalScrollTokens,
+      children: content
+    })
+  });
+});
+VideoSlider.displayName = 'VideoSlider';
+VideoSlider.propTypes = {
+  children: _propTypes.default.node
+};
+var _default = exports.default = VideoSlider;

package/lib/cjs/VideoPicker/index.js

@@ -0,0 +1,9 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _VideoPicker = _interopRequireDefault(require("./VideoPicker"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+var _default = exports.default = _VideoPicker.default;

package/lib/cjs/VideoPicker/videoPropType.js

@@ -0,0 +1,17 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.VideoPropType = exports.RefPropType = void 0;
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _WebVideo = require("../WebVideo/WebVideo");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const VideoPropType = exports.VideoPropType = _propTypes.default.shape({
+  ..._WebVideo.VideoProps,
+  title: _propTypes.default.string,
+  description: _propTypes.default.string
+});
+const RefPropType = exports.RefPropType = _propTypes.default.shape({
+  current: _propTypes.default.object
+});