@telus-uds/components-web 2.43.0 → 3.0.0

package/lib/Video/ControlBar/Controls/VolumeSlider/VolumeSlider.js

@@ -1,20 +1,13 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _react = _interopRequireDefault(require("react"));
-var _propTypes = _interopRequireDefault(require("prop-types"));
-var _styledComponents = _interopRequireDefault(require("styled-components"));
-var _componentsBase = require("@telus-uds/components-base");
-var _VideoButton = _interopRequireDefault(require("../VideoButton/VideoButton"));
-var _videoText = _interopRequireDefault(require("../../../videoText"));
-var _utils = require("../../../../utils");
-var _jsxRuntime = require("react/jsx-runtime");
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-const [selectProps, selectedSystemPropTypes] = (0, _componentsBase.selectSystemProps)([_utils.htmlAttrs]);
-const VolumeSliderContainer = /*#__PURE__*/_styledComponents.default.div.withConfig({
+import React from 'react';
+import PropTypes from 'prop-types';
+import styled from 'styled-components';
+import { Icon, useThemeTokens, selectSystemProps } from '@telus-uds/components-base';
+import VideoButton from '../VideoButton/VideoButton';
+import videoText from '../../../videoText';
+import { htmlAttrs } from '../../../../utils';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const [selectProps, selectedSystemPropTypes] = selectSystemProps([htmlAttrs]);
+const VolumeSliderContainer = /*#__PURE__*/styled.div.withConfig({
   displayName: "VolumeSlider__VolumeSliderContainer",
   componentId: "components-web__sc-apixz4-0"
 })(_ref => {
@@ -61,7 +54,7 @@ const sharedStyles = _ref2 => {
     })
   };
 };
-const StyledVolumeSlider = /*#__PURE__*/_styledComponents.default.input.attrs(_ref3 => {
+const StyledVolumeSlider = /*#__PURE__*/styled.input.attrs(_ref3 => {
   let {
     videoCurrentVolume
   } = _ref3;
@@ -129,7 +122,7 @@ const VolumeSlider = _ref5 => {
     variant,
     ...rest
   } = _ref5;
-  const refVolumeSlider = _react.default.useRef();
+  const refVolumeSlider = React.useRef();
   const {
     marginLeft,
     marginRight,
@@ -141,7 +134,7 @@ const VolumeSlider = _ref5 => {
     rangeBackground,
     mutedIcon,
     unmutedIcon
-  } = (0, _componentsBase.useThemeTokens)('VideoVolumeSlider', tokens, variant);
+  } = useThemeTokens('VideoVolumeSlider', tokens, variant);
   const sharedProps = {
     thumbHeight,
     thumbWidth,
@@ -151,22 +144,22 @@ const VolumeSlider = _ref5 => {
     rangeBackground
   };
   const handleVolumeChange = () => setVolume(refVolumeSlider.current.value);
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(VolumeSliderContainer, {
+  return /*#__PURE__*/_jsxs(VolumeSliderContainer, {
     compactModeThreshold: compactModeThreshold,
     videoPlayerWidth: videoPlayerWidth,
     margin: `0 ${marginRight}px 0 ${marginLeft}px`,
     ...selectProps(rest),
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_VideoButton.default, {
-      icon: videoIsMuted ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.Icon, {
+    children: [/*#__PURE__*/_jsx(VideoButton, {
+      icon: videoIsMuted ? /*#__PURE__*/_jsx(Icon, {
         icon: mutedIcon
-      }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.Icon, {
+      }) : /*#__PURE__*/_jsx(Icon, {
         icon: unmutedIcon
       }),
-      label: videoIsMuted ? _videoText.default[copy].unmute : _videoText.default[copy].mute,
+      label: videoIsMuted ? videoText[copy].unmute : videoText[copy].mute,
       disableFocus: disableFocus,
       onClick: toggleMute,
       onFocus: resetInactivityTimer
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledVolumeSlider, {
+    }), /*#__PURE__*/_jsx(StyledVolumeSlider, {
       type: "range",
       min: "0",
       max: "1",
@@ -177,22 +170,21 @@ const VolumeSlider = _ref5 => {
       onChange: handleVolumeChange,
       onFocus: resetInactivityTimer,
       tabIndex: "-1",
-      "aria-label": _videoText.default[copy].volumeSliderLabel,
+      "aria-label": videoText[copy].volumeSliderLabel,
       ...sharedProps
     })]
   });
 };
 VolumeSlider.propTypes = {
   ...selectedSystemPropTypes,
-  videoCurrentVolume: _propTypes.default.number.isRequired,
-  setVolume: _propTypes.default.func.isRequired,
-  videoIsMuted: _propTypes.default.bool.isRequired,
-  toggleMute: _propTypes.default.func.isRequired,
-  resetInactivityTimer: _propTypes.default.func.isRequired,
-  copy: _propTypes.default.oneOf(['en', 'fr']).isRequired,
-  compactModeThreshold: _propTypes.default.number.isRequired,
-  videoPlayerWidth: _propTypes.default.number.isRequired,
-  disableFocus: _propTypes.default.bool.isRequired
+  videoCurrentVolume: PropTypes.number.isRequired,
+  setVolume: PropTypes.func.isRequired,
+  videoIsMuted: PropTypes.bool.isRequired,
+  toggleMute: PropTypes.func.isRequired,
+  resetInactivityTimer: PropTypes.func.isRequired,
+  copy: PropTypes.oneOf(['en', 'fr']).isRequired,
+  compactModeThreshold: PropTypes.number.isRequired,
+  videoPlayerWidth: PropTypes.number.isRequired,
+  disableFocus: PropTypes.bool.isRequired
 };
-var _default = VolumeSlider;
-exports.default = _default;
+export default VolumeSlider;

package/lib/Video/MiddleControlButton/MiddleControlButton.js

@@ -1,18 +1,11 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _react = _interopRequireDefault(require("react"));
-var _propTypes = _interopRequireDefault(require("prop-types"));
-var _styledComponents = _interopRequireDefault(require("styled-components"));
-var _componentsBase = require("@telus-uds/components-base");
-var _utils = require("../../utils");
-var _jsxRuntime = require("react/jsx-runtime");
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-const [selectProps, selectedSystemPropTypes] = (0, _componentsBase.selectSystemProps)([_utils.htmlAttrs]);
-const StyledMiddleControlButton = /*#__PURE__*/_styledComponents.default.button.withConfig({
+import React from 'react';
+import PropTypes from 'prop-types';
+import styled from 'styled-components';
+import { useThemeTokens, selectSystemProps } from '@telus-uds/components-base';
+import { htmlAttrs } from '../../utils';
+import { jsx as _jsx } from "react/jsx-runtime";
+const [selectProps, selectedSystemPropTypes] = selectSystemProps([htmlAttrs]);
+const StyledMiddleControlButton = /*#__PURE__*/styled.button.withConfig({
   displayName: "MiddleControlButton__StyledMiddleControlButton",
   componentId: "components-web__sc-1um2s37-0"
 })(_ref => {
@@ -53,8 +46,8 @@ const MiddleControlButton = _ref2 => {
     height,
     background,
     iconColor
-  } = (0, _componentsBase.useThemeTokens)('VideoMiddleControlButton', tokens, variant);
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledMiddleControlButton, {
+  } = useThemeTokens('VideoMiddleControlButton', tokens, variant);
+  return /*#__PURE__*/_jsx(StyledMiddleControlButton, {
     isHidden: isHidden,
     onClick: onClick,
     onFocus: onFocus,
@@ -62,7 +55,7 @@ const MiddleControlButton = _ref2 => {
     height: height,
     background: background,
     ...selectProps(rest),
-    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(Icon, {
+    children: /*#__PURE__*/_jsx(Icon, {
       color: iconColor,
       size: 24
     })
@@ -70,10 +63,9 @@ const MiddleControlButton = _ref2 => {
 };
 MiddleControlButton.propTypes = {
   ...selectedSystemPropTypes,
-  icon: _propTypes.default.elementType.isRequired,
-  isHidden: _propTypes.default.bool,
-  onClick: _propTypes.default.func,
-  onFocus: _propTypes.default.func
+  icon: PropTypes.elementType.isRequired,
+  isHidden: PropTypes.bool,
+  onClick: PropTypes.func,
+  onFocus: PropTypes.func
 };
-var _default = MiddleControlButton;
-exports.default = _default;
+export default MiddleControlButton;

package/lib/Video/Video.js

@@ -1,26 +1,19 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _react = _interopRequireDefault(require("react"));
-var _propTypes = _interopRequireDefault(require("prop-types"));
-var _styledComponents = _interopRequireDefault(require("styled-components"));
-var _fscreen = _interopRequireDefault(require("fscreen"));
-var _componentsBase = require("@telus-uds/components-base");
-var _Spinner = _interopRequireDefault(require("../Spinner"));
-var _utils = require("../utils");
-var _VideoSplash = _interopRequireDefault(require("../shared/VideoSplash/VideoSplash"));
-var _MiddleControlButton = _interopRequireDefault(require("./MiddleControlButton/MiddleControlButton"));
-var _ControlBar = _interopRequireDefault(require("./ControlBar/ControlBar"));
-var _videoText = _interopRequireDefault(require("./videoText"));
-var _jsxRuntime = require("react/jsx-runtime");
-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 styled from 'styled-components';
+import fscreen from 'fscreen';
+import { useThemeTokens, selectSystemProps, getTokensPropType, variantProp } from '@telus-uds/components-base';
+import Spinner from '../Spinner';
+import { warn, htmlAttrs } from '../utils';
+import VideoSplash from '../shared/VideoSplash/VideoSplash';
+import MiddleControlButton from './MiddleControlButton/MiddleControlButton';
+import ControlBar from './ControlBar/ControlBar';
+import videoText from './videoText';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const [selectProps, selectedSystemPropTypes] = selectSystemProps([htmlAttrs]);
 
 // TODO: replace with the actual spinner component from UDS
-const VideoPlayerContainer = /*#__PURE__*/_styledComponents.default.div.withConfig({
+const VideoPlayerContainer = /*#__PURE__*/styled.div.withConfig({
   displayName: "Video__VideoPlayerContainer",
   componentId: "components-web__sc-12ltnuw-0"
 })(_ref => {
@@ -35,7 +28,7 @@ const VideoPlayerContainer = /*#__PURE__*/_styledComponents.default.div.withConf
     border: videoBorder ? `20px solid ${borderColor}` : undefined
   };
 });
-const VideoElementContainer = /*#__PURE__*/_styledComponents.default.div.withConfig({
+const VideoElementContainer = /*#__PURE__*/styled.div.withConfig({
   displayName: "Video__VideoElementContainer",
   componentId: "components-web__sc-12ltnuw-1"
 })({
@@ -44,14 +37,14 @@ const VideoElementContainer = /*#__PURE__*/_styledComponents.default.div.withCon
   height: '100%',
   fontSize: 0
 });
-const VideoPlayer = /*#__PURE__*/_styledComponents.default.video.withConfig({
+const VideoPlayer = /*#__PURE__*/styled.video.withConfig({
   displayName: "Video__VideoPlayer",
   componentId: "components-web__sc-12ltnuw-2"
 })({
   width: '100%',
   height: '100%'
 });
-const VideoOverlayContainer = /*#__PURE__*/_styledComponents.default.div.withConfig({
+const VideoOverlayContainer = /*#__PURE__*/styled.div.withConfig({
   displayName: "Video__VideoOverlayContainer",
   componentId: "components-web__sc-12ltnuw-3"
 })(_ref2 => {
@@ -65,7 +58,7 @@ const VideoOverlayContainer = /*#__PURE__*/_styledComponents.default.div.withCon
     cursor: mouseInactive ? 'none' : 'pointer'
   };
 });
-const VideoSplashContainer = /*#__PURE__*/_styledComponents.default.div.withConfig({
+const VideoSplashContainer = /*#__PURE__*/styled.div.withConfig({
   displayName: "Video__VideoSplashContainer",
   componentId: "components-web__sc-12ltnuw-4"
 })({
@@ -74,7 +67,7 @@ const VideoSplashContainer = /*#__PURE__*/_styledComponents.default.div.withConf
   height: '100%',
   zIndex: 5
 });
-const VideoOverlayElementContainer = /*#__PURE__*/_styledComponents.default.div.withConfig({
+const VideoOverlayElementContainer = /*#__PURE__*/styled.div.withConfig({
   displayName: "Video__VideoOverlayElementContainer",
   componentId: "components-web__sc-12ltnuw-5"
 })({
@@ -105,16 +98,16 @@ const Video = _ref3 => {
     variant = {},
     ...rest
   } = _ref3;
-  const refVideoPlayer = _react.default.useRef({});
-  const refVideoPlayerContainer = _react.default.useRef({});
-  const refKeyboardInstructions = _react.default.useRef({});
+  const refVideoPlayer = React.useRef({});
+  const refVideoPlayerContainer = React.useRef({});
+  const refKeyboardInstructions = React.useRef({});
   let inactivityTimer = null;
   const {
     borderColor,
     pauseIcon,
     playIcon,
     replayIcon
-  } = (0, _componentsBase.useThemeTokens)('Video', tokens, variant);
+  } = useThemeTokens('Video', tokens, variant);
   const playerOptions = {
     mouseTimeout: simpleMode ? 750 : 1500,
     // defined in ms
@@ -124,8 +117,7 @@ const Video = _ref3 => {
     // from 0 to 1
     compactModeThreshold: 700 // in px
   };
-
-  const [videoPlayerState, setVideoPlayerState] = _react.default.useState({
+  const [videoPlayerState, setVideoPlayerState] = React.useState({
     loadedSources: null,
     loadedTracks: null,
     videoLength: 0,
@@ -152,7 +144,7 @@ const Video = _ref3 => {
   const generateSources = videoQuality => {
     return sources.map(source => {
       if (source.qualityRank === videoQuality) {
-        return /*#__PURE__*/_react.default.createElement('source', {
+        return /*#__PURE__*/React.createElement('source', {
           src: source.source,
           type: source.mediaType,
           key: source.source
@@ -163,7 +155,7 @@ const Video = _ref3 => {
   };
   const generateTracks = () => {
     return tracks.map(track => {
-      return /*#__PURE__*/_react.default.createElement('track', {
+      return /*#__PURE__*/React.createElement('track', {
         label: track.label,
         kind: track.kind,
         srcLang: track.language,
@@ -537,11 +529,11 @@ const Video = _ref3 => {
     }));
   };
   const toggleFullscreen = () => {
-    if (_fscreen.default.fullscreenEnabled) {
-      if (_fscreen.default.fullscreenElement === null) {
-        _fscreen.default.requestFullscreen(refVideoPlayerContainer.current);
+    if (fscreen.fullscreenEnabled) {
+      if (fscreen.fullscreenElement === null) {
+        fscreen.requestFullscreen(refVideoPlayerContainer.current);
       } else {
-        _fscreen.default.exitFullscreen();
+        fscreen.exitFullscreen();
       }
       setVideoPlayerState(prevState => {
         return {
@@ -577,8 +569,8 @@ const Video = _ref3 => {
 
     // This allows playing videos within components that act like
     // links, e.g. `PreviewCard`, `StoryCard`, etc.
-    event === null || event === void 0 ? void 0 : event.preventDefault();
-    event === null || event === void 0 ? void 0 : event.stopPropagation();
+    event === null || event === void 0 || event.preventDefault();
+    event === null || event === void 0 || event.stopPropagation();
   };
   const handleKeyboard = event => {
     const {
@@ -678,13 +670,13 @@ const Video = _ref3 => {
   };
 
   // Prepares video and caption files
-  _react.default.useEffect(() => {
+  React.useEffect(() => {
     refreshMedia();
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
   // Initial Setup after loading sources
-  _react.default.useEffect(() => {
+  React.useEffect(() => {
     const {
       loadedSources,
       loadedTracks
@@ -735,7 +727,7 @@ const Video = _ref3 => {
 
       // Video Analytics
       if (analyticsTracking !== undefined && videoTitle === undefined || analyticsTracking === undefined && videoTitle !== undefined) {
-        (0, _utils.warn)('Video', 'Both the `analyticsTracking` and `videoTitle` props must be defined in order to return a proper analytics object.');
+        warn('Video', 'Both the `analyticsTracking` and `videoTitle` props must be defined in order to return a proper analytics object.');
       }
       return () => {
         clearInactivityTimer();
@@ -774,7 +766,7 @@ const Video = _ref3 => {
     as,
     ...safeRest
   } = rest;
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(VideoPlayerContainer, {
+  return /*#__PURE__*/_jsxs(VideoPlayerContainer, {
     ...safeRest,
     ref: refVideoPlayerContainer,
     videoBorder: videoBorder,
@@ -783,17 +775,17 @@ const Video = _ref3 => {
     onClick: handleClick,
     onKeyDown: handleKeyboard,
     tabIndex: "0",
-    "aria-label": simpleMode ? _videoText.default[copy].videoSelectedSimple : _videoText.default[copy].videoSelected,
+    "aria-label": simpleMode ? videoText[copy].videoSelectedSimple : videoText[copy].videoSelected,
     "data-testid": "videoPlayer",
     ...selectProps(rest),
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(VideoOverlayContainer, {
+    children: [/*#__PURE__*/_jsxs(VideoOverlayContainer, {
       mouseInactive: mouseInactive,
       onClick: () => {
         closeSubMenus();
         togglePlayPause();
       },
-      children: [videoUnplayed && !videoQualityChanged && /*#__PURE__*/(0, _jsxRuntime.jsx)(VideoSplashContainer, {
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_VideoSplash.default, {
+      children: [videoUnplayed && !videoQualityChanged && /*#__PURE__*/_jsx(VideoSplashContainer, {
+        children: /*#__PURE__*/_jsx(VideoSplash, {
           poster: posterSrc,
           copy: copy,
           videoLength: videoLength,
@@ -801,23 +793,23 @@ const Video = _ref3 => {
           iconLeftOffsetPx: 2,
           onClick: beginVideo
         })
-      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(VideoOverlayElementContainer, {
-        children: [videoEnded && /*#__PURE__*/(0, _jsxRuntime.jsx)(_MiddleControlButton.default, {
+      }), /*#__PURE__*/_jsxs(VideoOverlayElementContainer, {
+        children: [videoEnded && /*#__PURE__*/_jsx(MiddleControlButton, {
           icon: replayIcon,
           onClick: replayVideo
-        }), !videoUnplayed && !videoIsBuffering && !videoEnded && !isMobile && /*#__PURE__*/(0, _jsxRuntime.jsx)(_MiddleControlButton.default, {
+        }), !videoUnplayed && !videoIsBuffering && !videoEnded && !isMobile && /*#__PURE__*/_jsx(MiddleControlButton, {
           icon: videoIsPlaying ? pauseIcon : playIcon,
           isHidden: mouseInactive,
           onClick: togglePlayPause,
           onFocus: resetInactivityTimer
-        }), videoIsBuffering && !isMobile && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Spinner.default, {
+        }), videoIsBuffering && !isMobile && /*#__PURE__*/_jsx(Spinner, {
           show: true
         })]
       })]
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(VideoElementContainer, {
+    }), /*#__PURE__*/_jsx(VideoElementContainer, {
       videoIsFullscreen: videoIsFullscreen,
       mouseInactive: mouseInactive,
-      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(VideoPlayer, {
+      children: /*#__PURE__*/_jsxs(VideoPlayer, {
         ref: refVideoPlayer,
         controls: isMobile,
         videoIsFullscreen: videoIsFullscreen,
@@ -825,7 +817,7 @@ const Video = _ref3 => {
         playsinline: true,
         children: [loadedSources, loadedTracks, "Your browser does not support the video tag."]
       })
-    }), !simpleMode && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ControlBar.default, {
+    }), !simpleMode && /*#__PURE__*/_jsx(ControlBar, {
       videoPlayer: refVideoPlayer,
       videoPlayerContainer: refVideoPlayerContainer,
       sources: sources,
@@ -863,10 +855,10 @@ const Video = _ref3 => {
       onMouseOut: () => setMouseOnControlBar(false),
       onFocus: () => {},
       onBlur: () => {}
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+    }), /*#__PURE__*/_jsx("span", {
       tabIndex: "-1",
       ref: refKeyboardInstructions,
-      "aria-label": _videoText.default[copy].videoPlayer,
+      "aria-label": videoText[copy].videoPlayer,
       role: "note"
     })]
   });
@@ -876,71 +868,71 @@ Video.propTypes = {
   /**
    * An array of objects that defines each video file. See the "Basic Usage" section for more information.
    */
-  sources: _propTypes.default.arrayOf(_propTypes.default.shape({
+  sources: PropTypes.arrayOf(PropTypes.shape({
     /** A path to a video file */
-    source: _propTypes.default.string.isRequired,
+    source: PropTypes.string.isRequired,
     /** The video's MIME type (example: `video/mp4`) */
-    mediaType: _propTypes.default.string.isRequired,
+    mediaType: PropTypes.string.isRequired,
     /** The label to be given to this file in the quality selector (example: `1080p`) */
-    qualityName: _propTypes.default.string.isRequired,
+    qualityName: PropTypes.string.isRequired,
     /** A number indicating the video's quality, with 1 being the best, and the number increasing from there as quality degrades */
-    qualityRank: _propTypes.default.number.isRequired,
+    qualityRank: PropTypes.number.isRequired,
     /** A boolean that defines its source as a fallback for another source with the same `qualityRank` */
-    isFallback: _propTypes.default.bool
+    isFallback: PropTypes.bool
   })).isRequired,
   /**
    * A path of the image that will be displayed on the video's splash screen.
    */
-  posterSrc: _propTypes.default.string.isRequired,
+  posterSrc: PropTypes.string.isRequired,
   /**
    * An array of objects that defines each caption file. See the "Basic Usage" section for more information.
    */
-  tracks: _propTypes.default.arrayOf(_propTypes.default.shape({
+  tracks: PropTypes.arrayOf(PropTypes.shape({
     /** A path to the track file */
-    source: _propTypes.default.string.isRequired,
+    source: PropTypes.string.isRequired,
     /** The name of the track file as it will appear in the "Captions" dialogue */
-    label: _propTypes.default.string.isRequired,
+    label: PropTypes.string.isRequired,
     /** The track's file type, typically one of "subtitles", "captions", or "descriptions". See [MDN's documentation](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/track#Attributes) for more information on these types */
-    kind: _propTypes.default.string.isRequired,
+    kind: PropTypes.string.isRequired,
     /** The language of the track file represented as a ISO 639-1 language code */
-    language: _propTypes.default.string.isRequired
+    language: PropTypes.string.isRequired
   })),
   /**
    * The video's default volume, defined from 1 to 100. Please use the `beginMuted` prop to have the video start silenced.
    */
-  defaultVolume: _propTypes.default.number,
+  defaultVolume: PropTypes.number,
   /**
    * Defines if the video should start muted.
    */
-  beginMuted: _propTypes.default.bool,
+  beginMuted: PropTypes.bool,
   /**
    * The default quality level if the user is on mobile. See the `sources` prop for available quality levels.
    */
-  defaultMobileQuality: _propTypes.default.number,
+  defaultMobileQuality: PropTypes.number,
   /**
    * The default quality level if the user is on desktop. See the `sources` prop for available quality levels.
    */
-  defaultDesktopQuality: _propTypes.default.number,
+  defaultDesktopQuality: PropTypes.number,
   /**
    * The video player UI's language as an ISO language code. It currently supports English and French.
    */
-  copy: _propTypes.default.oneOf(['en', 'fr']).isRequired,
+  copy: PropTypes.oneOf(['en', 'fr']).isRequired,
   /**
    * Sets the `video` tag's `crossorigin` mode. Please note that content loaded without CORS approval may be insecure.
    * @since 1.1.0
    */
-  crossOrigin: _propTypes.default.oneOf(['anonymous', 'use-credentials']),
+  crossOrigin: PropTypes.oneOf(['anonymous', 'use-credentials']),
   /**
    * Disables the control bar during playback and reduces the amount of time until the UI hides itself.
    * For special approved internal uses only.
    * @since 1.2.0
    */
-  simpleMode: _propTypes.default.bool,
+  simpleMode: PropTypes.bool,
   /**
    * Renders a gainsboro coloured border around the video. Used to seperate the video from the rest of the page if the video's background is the same colour as the container's.
    * @since 1.2.0
    */
-  videoBorder: _propTypes.default.bool,
+  videoBorder: PropTypes.bool,
   /**
    * A callback function that fires when a customer interacts with Video.
    * When using `analyticsTracking`, `videoTitle` must also be defined.
@@ -953,14 +945,13 @@ Video.propTypes = {
    * @param {string} analyticsObject.action Contains the latest customer action
    * @param {string} analyticsObject.details The name of the video based on the `videoTitle` prop
    */
-  analyticsTracking: _propTypes.default.func,
+  analyticsTracking: PropTypes.func,
   /**
    * The title of the video being rendered. This is used for analytics purposes in conjunction with `analyticsTracking`.
    * @since 1.3.0
    */
-  videoTitle: _propTypes.default.string,
-  tokens: (0, _componentsBase.getTokensPropType)('Video'),
-  variant: _componentsBase.variantProp.propType
+  videoTitle: PropTypes.string,
+  tokens: getTokensPropType('Video'),
+  variant: variantProp.propType
 };
-var _default = Video;
-exports.default = _default;
+export default Video;

package/lib/Video/index.js

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

package/lib/Video/videoText.js

@@ -1,9 +1,3 @@
-"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.',
@@ -58,5 +52,4 @@ const videoText = {
     fr: 'Français'
   }
 };
-var _default = videoText;
-exports.default = _default;
+export default videoText;