@telus-uds/components-web 2.43.0 → 3.0.0

package/lib/VideoPicker/VideoPicker.js

@@ -1,24 +1,15 @@
-"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(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; }
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-const [selectProps, selectedSystemPropTypes] = (0, _componentsBase.selectSystemProps)([_utils.htmlAttrs]);
+import React from 'react';
+import PropTypes from 'prop-types';
+import { viewports } from '@telus-uds/system-constants';
+import { selectSystemProps, StackView, useThemeTokens, useViewport, getTokensPropType } from '@telus-uds/components-base';
+import styled, { css } from 'styled-components';
+import { VideoPropType } from './videoPropType';
+import VideoPickerThumbnail from './VideoPickerThumbnail';
+import VideoPickerPlayer from './VideoPickerPlayer';
+import VideoSlider from './VideoSlider';
+import { htmlAttrs } from '../utils';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const [selectProps, selectedSystemPropTypes] = selectSystemProps([htmlAttrs]);
 const framedContainerStyles = _ref => {
   let {
     framedContainerBackgroundColor,
@@ -27,9 +18,9 @@ const framedContainerStyles = _ref => {
     framedContainerBorderRadius,
     framedMaxHeight
   } = _ref;
-  return (0, _styledComponents.css)(["background-color:", ";border:", "px solid ", ";border-radius:", "px;& > div{max-height:", "px;}"], framedContainerBackgroundColor, framedContainerBorderWidth, framedContainerBorderColor, framedContainerBorderRadius, framedMaxHeight);
+  return 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({
+const VideoPickerContainer = /*#__PURE__*/styled.div.withConfig({
   displayName: "VideoPicker__VideoPickerContainer",
   componentId: "components-web__sc-x6lxp0-0"
 })(["", ""], _ref2 => {
@@ -44,9 +35,9 @@ const framedPlayerContainerStyles = _ref3 => {
     framedMaxHeight,
     framedContainerPadding
   } = _ref3;
-  return (0, _styledComponents.css)(["width:66.67%;padding:", "px;max-height:", "px;flex-shrink:0;box-sizing:border-box;"], framedContainerPadding, framedMaxHeight);
+  return 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({
+const VideoPlayerContainer = /*#__PURE__*/styled.div.withConfig({
   displayName: "VideoPicker__VideoPlayerContainer",
   componentId: "components-web__sc-x6lxp0-1"
 })(["", " overflow:auto;"], _ref4 => {
@@ -56,17 +47,17 @@ const VideoPlayerContainer = /*#__PURE__*/_styledComponents.default.div.withConf
   } = _ref4;
   return isFramed && framedPlayerContainerStyles(tokens);
 });
-const framedVideoListContainerStyle = /*#__PURE__*/(0, _styledComponents.css)(["max-height:", "px;overflow:auto;flex-direction:column;"], _ref5 => {
+const framedVideoListContainerStyle = /*#__PURE__*/css(["max-height:", "px;overflow:auto;flex-direction:column;"], _ref5 => {
   let {
     framedMaxHeight
   } = _ref5;
   return framedMaxHeight;
 });
-const VideoListContainer = /*#__PURE__*/_styledComponents.default.div.withConfig({
+const VideoListContainer = /*#__PURE__*/styled.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) => {
+const VideoPicker = /*#__PURE__*/React.forwardRef((_ref6, ref) => {
   var _videoList$;
   let {
     videoList = [],
@@ -79,15 +70,15 @@ const VideoPicker = /*#__PURE__*/_react.default.forwardRef((_ref6, ref) => {
     onProgress = () => {},
     ...rest
   } = _ref6;
-  const viewport = (0, _componentsBase.useViewport)();
+  const viewport = useViewport();
   const {
     stackViewDividerColor,
     ...themeTokens
-  } = (0, _componentsBase.useThemeTokens)('VideoPicker');
-  const [currentVideoId, setCurrentVideoId] = _react.default.useState(selectedVideo);
-  const videoPlayerRef = _react.default.useRef(null);
+  } = useThemeTokens('VideoPicker');
+  const [currentVideoId, setCurrentVideoId] = React.useState(selectedVideo);
+  const videoPlayerRef = React.useRef(null);
   const currentVideo = videoList.find(video => video.videoId === currentVideoId);
-  _react.default.useEffect(() => {
+  React.useEffect(() => {
     // Update current video if parent changes which video id it passes down
     setCurrentVideoId(selectedVideo);
   }, [selectedVideo]);
@@ -102,9 +93,9 @@ const VideoPicker = /*#__PURE__*/_react.default.forwardRef((_ref6, ref) => {
   };
 
   // `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, {
+  const isFramed = frame && [viewports.lg, viewports.xl].includes(viewport);
+  const hasSlider = !frame && [viewports.md, viewports.lg, viewports.xl].includes(viewport);
+  const listElements = videoList.map((video, index) => /*#__PURE__*/_jsx(VideoPickerThumbnail, {
     video: video,
     videoPlayerRef: videoPlayerRef,
     selectedVideoId: currentVideoId,
@@ -116,12 +107,12 @@ const VideoPicker = /*#__PURE__*/_react.default.forwardRef((_ref6, ref) => {
     index: index,
     isFramed: isFramed
   }, video.videoId));
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(VideoPickerContainer, {
+  return /*#__PURE__*/_jsx(VideoPickerContainer, {
     ref: ref,
     isFramed: isFramed,
     ...selectProps(rest),
     ...themeTokens,
-    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_componentsBase.StackView, {
+    children: /*#__PURE__*/_jsxs(StackView, {
       divider: isFramed ? {
         tokens: {
           color: stackViewDividerColor
@@ -134,17 +125,17 @@ const VideoPicker = /*#__PURE__*/_react.default.forwardRef((_ref6, ref) => {
       space: isFramed ? 0 : 4 // everything has internal padding in `frame` variant
       ,
       direction: isFramed ? 'row' : 'column',
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(VideoPlayerContainer, {
+      children: [/*#__PURE__*/_jsx(VideoPlayerContainer, {
         ...themeTokens,
         isFramed: isFramed,
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_VideoPickerPlayer.default, {
+        children: /*#__PURE__*/_jsx(VideoPickerPlayer, {
           video: addVideoEventHandlers(currentVideo, onPlay, onPause, onProgress),
           videoPlayerRef: videoPlayerRef,
           onStartVideo: onStartVideo
         })
-      }), hasSlider ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_VideoSlider.default, {
+      }), hasSlider ? /*#__PURE__*/_jsx(VideoSlider, {
         children: listElements
-      }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(VideoListContainer, {
+      }) : /*#__PURE__*/_jsx(VideoListContainer, {
         viewport: viewport,
         "data-testid": "video-list-container",
         isFramed: isFramed,
@@ -156,44 +147,43 @@ const VideoPicker = /*#__PURE__*/_react.default.forwardRef((_ref6, ref) => {
 VideoPicker.displayName = 'VideoPicker';
 VideoPicker.propTypes = {
   ...selectedSystemPropTypes,
-  tokens: (0, _componentsBase.getTokensPropType)('VideoPicker'),
+  tokens: getTokensPropType('VideoPicker'),
   /**
    * Id of the currently selected video (defaults to the first video if not set).
    */
-  selectedVideo: _propTypes.default.string,
+  selectedVideo: PropTypes.string,
   /**
    * An array of Video objects.
    */
-  videoList: _propTypes.default.arrayOf(_videoPropType.VideoPropType),
+  videoList: PropTypes.arrayOf(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,
+  frame: PropTypes.bool,
   /**
    * Callback function trigerred when the video player starts playing video.
    * @param {object} video - The video object that is playing.
    */
-  onStartVideo: _propTypes.default.func,
+  onStartVideo: PropTypes.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,
+  onSelectVideo: PropTypes.func,
   /**
    * Callback function trigerred during progress milestones 10% 25% 50% 75% 100%.
    * @param {object} event - The event object.
    */
-  onProgress: _propTypes.default.func,
+  onProgress: PropTypes.func,
   /**
    * Callback function trigerred when the video player starts playing video.
    * @param {object} event - The event object.
    */
-  onPlay: _propTypes.default.func,
+  onPlay: PropTypes.func,
   /**
    * Callback function trigerred when the video gets paused.
    * @param {object} event - The event object.
    */
-  onPause: _propTypes.default.func
+  onPause: PropTypes.func
 };
-var _default = VideoPicker;
-exports.default = _default;
+export default VideoPicker;

package/lib/VideoPicker/VideoPickerPlayer.js

@@ -1,42 +1,35 @@
-"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(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-const VideoPickerPlayer = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
+import React from 'react';
+import { StackView, Typography } from '@telus-uds/components-base';
+import PropTypes from 'prop-types';
+import WebVideo from '../WebVideo/WebVideo';
+import { VideoPropType, RefPropType } from './videoPropType';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const VideoPickerPlayer = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   let {
     video = {},
     videoPlayerRef,
     onStartVideo = () => {}
   } = _ref;
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_componentsBase.StackView, {
+  return /*#__PURE__*/_jsxs(StackView, {
     space: 3,
     tokens: {
       flexShrink: 1
     },
     ref: ref,
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    children: [/*#__PURE__*/_jsx("div", {
       ref: videoPlayerRef,
-      children: video.videoId && /*#__PURE__*/(0, _jsxRuntime.jsx)(_WebVideo.default, {
+      children: video.videoId && /*#__PURE__*/_jsx(WebVideo, {
         ...video,
         onStart: () => onStartVideo(video)
       })
-    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_componentsBase.StackView, {
+    }), /*#__PURE__*/_jsxs(StackView, {
       space: 2,
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.Typography, {
+      children: [/*#__PURE__*/_jsx(Typography, {
         variant: {
           size: 'h3'
         },
         children: video.title
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.Typography, {
+      }), /*#__PURE__*/_jsx(Typography, {
         variant: {
           colour: 'default'
         },
@@ -47,9 +40,8 @@ const VideoPickerPlayer = /*#__PURE__*/_react.default.forwardRef((_ref, ref) =>
 });
 VideoPickerPlayer.displayName = 'VideoPickerPlayer';
 VideoPickerPlayer.propTypes = {
-  video: _videoPropType.VideoPropType,
-  videoPlayerRef: _videoPropType.RefPropType,
-  onStartVideo: _propTypes.default.func
+  video: VideoPropType,
+  videoPlayerRef: RefPropType,
+  onStartVideo: PropTypes.func
 };
-var _default = VideoPickerPlayer;
-exports.default = _default;
+export default VideoPickerPlayer;

package/lib/VideoPicker/VideoPickerThumbnail.js

@@ -1,25 +1,18 @@
-"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 _styledComponents = _interopRequireDefault(require("styled-components"));
-var _componentsBase = require("@telus-uds/components-base");
-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(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+import React from 'react';
+import Pressable from "react-native-web/dist/exports/Pressable";
+import StyleSheet from "react-native-web/dist/exports/StyleSheet";
+import PropTypes from 'prop-types';
+import { viewports } from '@telus-uds/system-constants';
+import styled from 'styled-components';
+import { StackView, Typography, useViewport, horizontalScrollUtils, useThemeTokensCallback } from '@telus-uds/components-base';
+import { getTimestamp } from '../shared/VideoSplash/helpers';
+import { VideoPropType, RefPropType } from './videoPropType';
+import VideoSplash from '../shared/VideoSplash/VideoSplash';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const {
   getItemPositionLayoutHandler,
   itemPositionsPropType
-} = _componentsBase.horizontalScrollUtils;
+} = 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
@@ -31,7 +24,7 @@ const createReactNativeStyles = _ref => {
     pressableBorderTopWidth,
     pressableBorderTopColor
   } = _ref;
-  return _StyleSheet.default.create({
+  return StyleSheet.create({
     container: {
       cursor: 'pointer'
     },
@@ -48,7 +41,7 @@ const createReactNativeStyles = _ref => {
     }
   });
 };
-const ImageContainer = /*#__PURE__*/_styledComponents.default.div.withConfig({
+const ImageContainer = /*#__PURE__*/styled.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 => {
@@ -57,7 +50,7 @@ const ImageContainer = /*#__PURE__*/_styledComponents.default.div.withConfig({
   } = _ref2;
   return outerBorderRadius;
 });
-const VideoThumbnail = /*#__PURE__*/_styledComponents.default.div.withConfig({
+const VideoThumbnail = /*#__PURE__*/styled.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 => {
@@ -81,11 +74,11 @@ const VideoThumbnail = /*#__PURE__*/_styledComponents.default.div.withConfig({
   } = _ref6;
   return borderRadius;
 });
-const ThumbnailTitleContainer = /*#__PURE__*/_styledComponents.default.div.withConfig({
+const ThumbnailTitleContainer = /*#__PURE__*/styled.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) => {
+const VideoPickerThumbnail = /*#__PURE__*/React.forwardRef((_ref7, ref) => {
   let {
     videoPlayerRef,
     selectedVideoId,
@@ -97,18 +90,18 @@ const VideoPickerThumbnail = /*#__PURE__*/_react.default.forwardRef((_ref7, ref)
     index,
     width = '100%'
   } = _ref7;
-  const viewport = (0, _componentsBase.useViewport)();
-  const getTokens = (0, _componentsBase.useThemeTokensCallback)('VideoPickerThumbnail', {}, {});
+  const viewport = useViewport();
+  const getTokens = useThemeTokensCallback('VideoPickerThumbnail', {}, {});
   const {
     timestamp
-  } = (0, _helpers.getTimestamp)(video.videoLength, video.copy);
+  } = getTimestamp(video.videoLength, video.copy);
   const isPlaying = selectedVideoId === video.videoId;
   const renderThumbnailImage = themeTokens => {
-    return /*#__PURE__*/(0, _jsxRuntime.jsx)(VideoThumbnail, {
+    return /*#__PURE__*/_jsx(VideoThumbnail, {
       ...themeTokens,
       isPlaying: isPlaying,
       layout: layout,
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_VideoSplash.default, {
+      children: /*#__PURE__*/_jsx(VideoSplash, {
         simpleMode: true,
         poster: video.posterSrc || `https://img.youtube.com/vi/${video.videoId}/maxresdefault.jpg`,
         videoLength: video.videoLength,
@@ -121,14 +114,14 @@ const VideoPickerThumbnail = /*#__PURE__*/_react.default.forwardRef((_ref7, ref)
       titleColor,
       subTitleColor
     } = _ref8;
-    return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_componentsBase.StackView, {
+    return /*#__PURE__*/_jsxs(StackView, {
       space: 2,
       tokens: {
         flexShrink: 1
       },
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(ThumbnailTitleContainer, {
+      children: [/*#__PURE__*/_jsx(ThumbnailTitleContainer, {
         viewport: viewport,
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.Typography, {
+        children: /*#__PURE__*/_jsx(Typography, {
           variant: {
             bold: true
           },
@@ -137,7 +130,7 @@ const VideoPickerThumbnail = /*#__PURE__*/_react.default.forwardRef((_ref7, ref)
           },
           children: video.title
         })
-      }), viewport !== _systemConstants.viewports.xs && /*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.Typography, {
+      }), viewport !== viewports.xs && /*#__PURE__*/_jsx(Typography, {
         variant: {
           size: 'micro'
         },
@@ -157,7 +150,7 @@ const VideoPickerThumbnail = /*#__PURE__*/_react.default.forwardRef((_ref7, ref)
       if (splashButton) splashButton.focus();
     }
   };
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Pressable.default, {
+  return /*#__PURE__*/_jsx(Pressable, {
     onLayout: handleLayout,
     onPress: () => onSelectVideo(video),
     testID: `thumbnail-container-${video.videoId}`,
@@ -198,10 +191,10 @@ const VideoPickerThumbnail = /*#__PURE__*/_react.default.forwardRef((_ref7, ref)
         pressed,
         selected: isPlaying
       });
-      return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_componentsBase.StackView, {
+      return /*#__PURE__*/_jsxs(StackView, {
         space: layout === 'vertical' ? 2 : 3,
         direction: layout === 'vertical' ? 'column' : 'row',
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(ImageContainer, {
+        children: [/*#__PURE__*/_jsx(ImageContainer, {
           ...themeTokens,
           children: renderThumbnailImage(themeTokens)
         }), renderThumbnailInfo(themeTokens)]
@@ -211,15 +204,14 @@ const VideoPickerThumbnail = /*#__PURE__*/_react.default.forwardRef((_ref7, ref)
 });
 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,
+  selectedVideoId: PropTypes.string,
+  onSelectVideo: PropTypes.func,
+  video: VideoPropType,
+  videoPlayerRef: RefPropType,
+  layout: PropTypes.oneOf(['vertical', 'horizontal']),
+  isFramed: PropTypes.bool,
   itemPositions: itemPositionsPropType,
-  index: _propTypes.default.number,
-  width: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string])
+  index: PropTypes.number,
+  width: PropTypes.oneOfType([PropTypes.number, PropTypes.string])
 };
-var _default = VideoPickerThumbnail;
-exports.default = _default;
+export default VideoPickerThumbnail;

package/lib/VideoPicker/VideoSlider.js

@@ -1,29 +1,22 @@
-"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(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+import React from 'react';
+import { HorizontalScroll, HorizontalScrollButton, horizontalScrollUtils, StackView, useThemeTokens, useViewport } from '@telus-uds/components-base';
+import View from "react-native-web/dist/exports/View";
+import PropTypes from 'prop-types';
+import { jsx as _jsx } from "react/jsx-runtime";
 const {
   useItemPositions
-} = _componentsBase.horizontalScrollUtils;
-const VideoSlider = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
+} = horizontalScrollUtils;
+const VideoSlider = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   let {
     children
   } = _ref;
-  const viewport = (0, _componentsBase.useViewport)();
+  const viewport = useViewport();
   const [itemPositions] = useItemPositions();
-  const [containerWidth, setContainerWidth] = _react.default.useState(null);
+  const [containerWidth, setContainerWidth] = React.useState(null);
   const {
     previousIcon: PreviousIcon,
     nextIcon: NextIcon
-  } = (0, _componentsBase.useThemeTokens)('VideoPickerSlider');
+  } = useThemeTokens('VideoPickerSlider');
   const onLayout = _ref2 => {
     let {
       nativeEvent: {
@@ -43,15 +36,14 @@ const VideoSlider = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
   // 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, {
+  const content = /*#__PURE__*/_jsx(StackView, {
     space: 5,
     direction: "row",
     accessibilityRole: "radiogroup",
     tokens: {
       flexGrow: 1
     },
-    children: _react.default.Children.map(children, (child, index) => /*#__PURE__*/_react.default.cloneElement(child, {
+    children: React.Children.map(children, (child, index) => /*#__PURE__*/React.cloneElement(child, {
       index,
       itemPositions,
       width: itemWidth
@@ -68,14 +60,14 @@ const VideoSlider = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
     borderBottomColor: 'transparent',
     buttonClearance: 0
   };
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+  return /*#__PURE__*/_jsx(View, {
     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,
+    content : /*#__PURE__*/_jsx(HorizontalScroll, {
+      ScrollButton: HorizontalScrollButton,
       itemPositions: itemPositions,
       tokens: horizontalScrollTokens,
       children: content
@@ -84,7 +76,6 @@ const VideoSlider = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
 });
 VideoSlider.displayName = 'VideoSlider';
 VideoSlider.propTypes = {
-  children: _propTypes.default.node
+  children: PropTypes.node
 };
-var _default = VideoSlider;
-exports.default = _default;
+export default VideoSlider;

package/lib/VideoPicker/index.js

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

package/lib/VideoPicker/videoPropType.js

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