@telus-uds/components-web 4.19.0 → 5.0.0-alpha.0

package/lib/cjs/Video/ControlBar/ControlBar.js

@@ -3,16 +3,16 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.ControlBar = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _componentsBase = require("@telus-uds/components-base");
 var _styledComponents = _interopRequireDefault(require("styled-components"));
-var _VideoProgressBar = _interopRequireDefault(require("./Controls/VideoProgressBar/VideoProgressBar"));
-var _VolumeSlider = _interopRequireDefault(require("./Controls/VolumeSlider/VolumeSlider"));
-var _VideoButton = _interopRequireDefault(require("./Controls/VideoButton/VideoButton"));
-var _VideoMenu = _interopRequireDefault(require("./Controls/VideoMenu/VideoMenu"));
-var _videoText = _interopRequireDefault(require("../videoText"));
+var _VideoProgressBar = require("./Controls/VideoProgressBar/VideoProgressBar");
+var _VolumeSlider = require("./Controls/VolumeSlider/VolumeSlider");
+var _VideoButton = require("./Controls/VideoButton/VideoButton");
+var _VideoMenu = require("./Controls/VideoMenu/VideoMenu");
+var _videoText = require("../videoText");
 var _utils = require("../../utils");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
@@ -25,15 +25,15 @@ const ControlBarContainer = /*#__PURE__*/_styledComponents.default.div.withConfi
   componentId: "components-web__sc-13y61ky-0"
 })(_ref => {
   let {
-    isHidden,
-    isMobile
+    $isHidden,
+    $isMobile
   } = _ref;
   return {
     width: '100%',
     position: 'relative',
     transition: 'opacity 0.4s',
-    opacity: isHidden ? 0 : 1,
-    display: isMobile ? 'none' : undefined
+    opacity: $isHidden ? 0 : 1,
+    display: $isMobile ? 'none' : undefined
   };
 });
 const StyledControlBar = /*#__PURE__*/_styledComponents.default.div.withConfig({
@@ -41,15 +41,15 @@ const StyledControlBar = /*#__PURE__*/_styledComponents.default.div.withConfig({
   componentId: "components-web__sc-13y61ky-1"
 })(_ref2 => {
   let {
-    padding,
-    height
+    $padding,
+    $height
   } = _ref2;
   return {
     boxSizing: 'border-box',
     position: 'absolute',
     width: '100%',
-    height,
-    padding,
+    height: $height,
+    padding: $padding,
     bottom: 0,
     backgroundColor: 'rgba(42, 44, 46, 0.85)',
     // TODO: replace with opaque greyThunder
@@ -71,17 +71,17 @@ const MenuContainer = /*#__PURE__*/_styledComponents.default.div.withConfig({
   componentId: "components-web__sc-13y61ky-3"
 })(_ref3 => {
   let {
-    isOpen,
-    menuBottom,
-    menuRight,
-    menuMarginLeft
+    $isOpen,
+    $menuBottom,
+    $menuRight,
+    $menuMarginLeft
   } = _ref3;
   return {
     position: 'absolute',
-    bottom: menuBottom,
-    right: menuRight,
-    display: isOpen ? 'block' : 'none',
-    marginLeft: menuMarginLeft
+    bottom: $menuBottom,
+    right: $menuRight,
+    display: $isOpen ? 'block' : 'none',
+    marginLeft: $menuMarginLeft
   };
 });
 const ControlBar = _ref4 => {
@@ -154,30 +154,31 @@ const ControlBar = _ref4 => {
   const parseTracks = () => {
     const parsed = tracks.map((track, trackNumber) => {
       return {
-        name: _videoText.default[copy][track.language],
+        name: _videoText.videoText[copy][track.language],
         value: trackNumber
       };
     });
     parsed.unshift({
-      name: _videoText.default[copy].captionsNone,
+      name: _videoText.videoText[copy].captionsNone,
       value: -1
     });
     return parsed;
   };
   const menuContainerStyleProps = {
-    menuBottom,
-    menuRight,
-    menuMarginLeft
+    $isOpen: false,
+    $menuBottom: menuBottom,
+    $menuRight: menuRight,
+    $menuMarginLeft: menuMarginLeft
   };
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(ControlBarContainer, {
-    isHidden: isHidden,
-    isMobile: isMobile,
+    $isHidden: isHidden,
+    $isMobile: isMobile,
     ...selectProps(rest),
     children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(StyledControlBar, {
-      padding: `${paddingTop}px ${paddingRight}px ${paddingBottom}px ${paddingLeft}px`,
-      height: `${height}px`,
+      $padding: `${paddingTop}px ${paddingRight}px ${paddingBottom}px ${paddingLeft}px`,
+      $height: `${height}px`,
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(VideoProgressBarContainer, {
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_VideoProgressBar.default, {
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_VideoProgressBar.VideoProgressBar, {
           copy: copy,
           videoPlayer: videoPlayer,
           playing: videoPlaying,
@@ -187,7 +188,7 @@ const ControlBar = _ref4 => {
           setSeek: setSeek,
           resetInactivityTimer: resetInactivityTimer
         })
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_VolumeSlider.default, {
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_VolumeSlider.VolumeSlider, {
         videoPlayer: videoPlayer,
         videoCurrentVolume: videoCurrentVolume,
         setVolume: setVolume,
@@ -201,9 +202,9 @@ const ControlBar = _ref4 => {
       }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_componentsBase.StackView, {
         space: 3,
         direction: "row",
-        children: [tracksAvailable && /*#__PURE__*/(0, _jsxRuntime.jsx)(_VideoButton.default, {
+        children: [tracksAvailable && /*#__PURE__*/(0, _jsxRuntime.jsx)(_VideoButton.VideoButton, {
           disableFocus: videoUnplayed,
-          label: _videoText.default[copy].captionsToggle,
+          label: _videoText.videoText[copy].captionsToggle,
           icon: getIcon(captionsIcon),
           onClick: () => {
             setCaptionsMenuOpen(!captionsMenuOpen);
@@ -212,9 +213,9 @@ const ControlBar = _ref4 => {
           },
           onFocus: resetInactivityTimer,
           onBlur: resetInactivityTimer
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_VideoButton.default, {
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_VideoButton.VideoButton, {
           disableFocus: videoUnplayed,
-          label: _videoText.default[copy].qualityToggle,
+          label: _videoText.videoText[copy].qualityToggle,
           icon: getIcon(settingsIcon),
           onClick: () => {
             setQualityMenuOpen(!qualityMenuOpen);
@@ -223,29 +224,29 @@ const ControlBar = _ref4 => {
           },
           onFocus: resetInactivityTimer,
           onBlur: resetInactivityTimer
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_VideoButton.default, {
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_VideoButton.VideoButton, {
           disableFocus: videoUnplayed,
-          label: _videoText.default[copy].fullScreenToggle,
+          label: _videoText.videoText[copy].fullScreenToggle,
           icon: videoIsFullscreen ? getIcon(minimizeIcon) : getIcon(maximizeIcon),
           onClick: toggleFullscreen,
           onFocus: resetInactivityTimer,
           onBlur: resetInactivityTimer
         })]
       }), captionsMenuOpen && /*#__PURE__*/(0, _jsxRuntime.jsx)(MenuContainer, {
-        isOpen: captionsMenuOpen,
         ...menuContainerStyleProps,
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_VideoMenu.default, {
-          menuLabel: _videoText.default[copy].captionsDialogue,
+        $isOpen: captionsMenuOpen,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_VideoMenu.VideoMenu, {
+          menuLabel: _videoText.videoText[copy].captionsDialogue,
           menuOptions: parseTracks(),
           setSelection: setTextTracks,
           selectedItem: selectedTextTrack,
           copy: copy
         })
       }), qualityMenuOpen && /*#__PURE__*/(0, _jsxRuntime.jsx)(MenuContainer, {
-        isOpen: qualityMenuOpen,
         ...menuContainerStyleProps,
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_VideoMenu.default, {
-          menuLabel: _videoText.default[copy].qualityDialogue,
+        $isOpen: qualityMenuOpen,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_VideoMenu.VideoMenu, {
+          menuLabel: _videoText.videoText[copy].qualityDialogue,
           menuOptions: parseVideoQuality(),
           setSelection: setVideoQuality,
           selectedItem: videoQuality,
@@ -255,6 +256,7 @@ const ControlBar = _ref4 => {
     })
   });
 };
+exports.ControlBar = ControlBar;
 ControlBar.propTypes = {
   ...selectedSystemPropTypes,
   videoPlayer: _propTypes.default.object.isRequired,
@@ -290,5 +292,4 @@ ControlBar.propTypes = {
   copy: _propTypes.default.oneOf(['en', 'fr']).isRequired,
   compactModeThreshold: _propTypes.default.number.isRequired,
   videoPlayerWidth: _propTypes.default.number.isRequired
-};
-var _default = exports.default = ControlBar;
+};

package/lib/cjs/Video/ControlBar/Controls/VideoButton/VideoButton.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.VideoButton = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _componentsBase = require("@telus-uds/components-base");
@@ -17,7 +17,7 @@ const StyledButton = /*#__PURE__*/_styledComponents.default.button.withConfig({
   componentId: "components-web__sc-kfw0tr-0"
 })(_ref => {
   let {
-    color
+    $color
   } = _ref;
   return {
     background: 'none',
@@ -27,7 +27,7 @@ const StyledButton = /*#__PURE__*/_styledComponents.default.button.withConfig({
     display: 'inline-flex',
     alignItems: 'stretch',
     'svg path': {
-      fill: color
+      fill: $color
     }
   };
 });
@@ -60,17 +60,17 @@ const VideoButton = _ref2 => {
     "aria-label": label,
     onKeyDown: handleOnKeyDown,
     tabIndex: disableFocus ? '-1' : undefined,
-    color: color,
+    $color: color,
     ...selectProps(rest),
     onClick: handleClick,
     children: [icon, children]
   });
 };
+exports.VideoButton = VideoButton;
 VideoButton.propTypes = {
   ...selectedSystemPropTypes,
   icon: _propTypes.default.element.isRequired,
   label: _propTypes.default.string.isRequired,
   disableFocus: _propTypes.default.bool.isRequired,
   children: _propTypes.default.node
-};
-var _default = exports.default = VideoButton;
+};

package/lib/cjs/Video/ControlBar/Controls/VideoMenu/VideoMenu.js

@@ -3,12 +3,12 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.VideoMenu = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _componentsBase = require("@telus-uds/components-base");
 var _styledComponents = _interopRequireDefault(require("styled-components"));
-var _videoText = _interopRequireDefault(require("../../../videoText"));
+var _videoText = require("../../../videoText");
 var _utils = require("../../../../utils");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
@@ -18,13 +18,13 @@ const MenuContainer = /*#__PURE__*/_styledComponents.default.div.withConfig({
   componentId: "components-web__sc-nllbhw-0"
 })(_ref => {
   let {
-    padding,
-    background
+    $padding,
+    $background
   } = _ref;
   return {
     width: 114,
-    padding,
-    backgroundColor: background,
+    padding: $padding,
+    backgroundColor: $background,
     borderRadius: 5
   };
 });
@@ -46,27 +46,27 @@ const CheckmarkContainer = /*#__PURE__*/_styledComponents.default.div.withConfig
   componentId: "components-web__sc-nllbhw-2"
 })(_ref2 => {
   let {
-    isSelectedItem,
-    checkMarkWidth,
-    checkMarkHeight,
-    checkMarkSelectedColor,
-    checkMarkHoverColor,
-    checkMarkFocusColor,
-    checkMarkUnselectedColor
+    $isSelectedItem,
+    $checkMarkWidth,
+    $checkMarkHeight,
+    $checkMarkSelectedColor,
+    $checkMarkHoverColor,
+    $checkMarkFocusColor,
+    $checkMarkUnselectedColor
   } = _ref2;
   return {
-    width: checkMarkWidth,
-    height: checkMarkHeight,
+    width: $checkMarkWidth,
+    height: $checkMarkHeight,
     marginTop: 2,
     outline: 'none',
     [`${MenuButton} && svg`]: {
-      fill: isSelectedItem ? checkMarkSelectedColor : checkMarkUnselectedColor
+      fill: $isSelectedItem ? $checkMarkSelectedColor : $checkMarkUnselectedColor
     },
     [`${MenuButton}:hover && svg`]: {
-      fill: isSelectedItem ? checkMarkSelectedColor : checkMarkHoverColor
+      fill: $isSelectedItem ? $checkMarkSelectedColor : $checkMarkHoverColor
     },
     [`${MenuButton}:focus && svg`]: {
-      fill: isSelectedItem ? checkMarkSelectedColor : checkMarkFocusColor
+      fill: $isSelectedItem ? $checkMarkSelectedColor : $checkMarkFocusColor
     }
   };
 });
@@ -98,9 +98,7 @@ const VideoMenu = _ref3 => {
         return /*#__PURE__*/(0, _jsxRuntime.jsxs)(MenuButton, {
           "aria-haspopup": "true",
           role: "menuitem",
-          "aria-label": `${option.name} ${menuLabel}. ${selectedItem === option.value ? _videoText.default[copy].itemSelected : _videoText.default[copy].itemUnselected}`,
-          selectedItem: selectedItem,
-          itemValue: option.value,
+          "aria-label": `${option.name} ${menuLabel}. ${selectedItem === option.value ? _videoText.videoText[copy].itemSelected : _videoText.videoText[copy].itemUnselected}`,
           onClick: () => {
             if (selectedItem !== option.value) {
               setSelection(option.value);
@@ -113,13 +111,13 @@ const VideoMenu = _ref3 => {
             },
             children: option.name
           }), /*#__PURE__*/(0, _jsxRuntime.jsx)(CheckmarkContainer, {
-            isSelectedItem: option.value === selectedItem,
-            checkMarkWidth: checkMarkWidth,
-            checkMarkHeight: checkMarkHeight,
-            checkMarkSelectedColor: checkMarkSelectedColor,
-            checkMarkHoverColor: checkMarkHoverColor,
-            checkMarkFocusColor: checkMarkFocusColor,
-            checkMarkUnselectedColor: checkMarkUnselectedColor,
+            $isSelectedItem: option.value === selectedItem,
+            $checkMarkWidth: checkMarkWidth,
+            $checkMarkHeight: checkMarkHeight,
+            $checkMarkSelectedColor: checkMarkSelectedColor,
+            $checkMarkHoverColor: checkMarkHoverColor,
+            $checkMarkFocusColor: checkMarkFocusColor,
+            $checkMarkUnselectedColor: checkMarkUnselectedColor,
             children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.Icon, {
               icon: checkMarkIcon
             })
@@ -139,8 +137,8 @@ const VideoMenu = _ref3 => {
   };
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(MenuContainer, {
     onKeyDown: handleOnKeyDown,
-    padding: padding,
-    background: background,
+    $padding: padding,
+    $background: background,
     ...selectProps(rest),
     children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_componentsBase.StackView, {
       space: 2,
@@ -158,6 +156,7 @@ const VideoMenu = _ref3 => {
     })
   });
 };
+exports.VideoMenu = VideoMenu;
 VideoMenu.propTypes = {
   ...selectedSystemPropTypes,
   menuLabel: _propTypes.default.string.isRequired,
@@ -165,5 +164,4 @@ VideoMenu.propTypes = {
   setSelection: _propTypes.default.func.isRequired,
   selectedItem: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]).isRequired,
   copy: _propTypes.default.oneOf(['en', 'fr']).isRequired
-};
-var _default = exports.default = VideoMenu;
+};

package/lib/cjs/Video/ControlBar/Controls/VideoProgressBar/VideoProgressBar.js

@@ -3,12 +3,12 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.VideoProgressBar = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _componentsBase = require("@telus-uds/components-base");
 var _styledComponents = _interopRequireDefault(require("styled-components"));
-var _videoText = _interopRequireDefault(require("../../../videoText"));
+var _videoText = require("../../../videoText");
 var _utils = require("../../../../utils");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
@@ -23,19 +23,19 @@ const ProgressBarContainer = /*#__PURE__*/_styledComponents.default.div.withConf
 });
 const sharedStyles = _ref => {
   let {
-    thumbHeight,
-    thumbWidth,
-    thumbBackground,
-    trackGradientStart,
-    trackGradientEnd
+    $thumbHeight,
+    $thumbWidth,
+    $thumbBackground,
+    $trackGradientStart,
+    $trackGradientEnd
   } = _ref;
   return {
     thumb: {
       appearance: 'none',
-      height: thumbHeight,
-      width: thumbWidth,
+      height: $thumbHeight,
+      width: $thumbWidth,
       borderRadius: '50%',
-      background: thumbBackground,
+      background: $thumbBackground,
       cursor: 'pointer',
       marginTop: -3,
       '&:hover': {
@@ -47,24 +47,24 @@ const sharedStyles = _ref => {
       height: 2,
       cursor: 'pointer',
       borderRadius: 1.3,
-      background: `linear-gradient(to right, ${trackGradientStart} 0%,${trackGradientEnd} ${videoBufferDisplay - 0.01}% ,rgba(255,255,255,0.5) ${videoBufferDisplay}%)` // TODO: replace with opaque white from palette
+      background: `linear-gradient(to right, ${$trackGradientStart} 0%,${$trackGradientEnd} ${videoBufferDisplay - 0.01}% ,rgba(255,255,255,0.5) ${videoBufferDisplay}%)` // TODO: replace with opaque white from palette
     })
   };
 };
 const StyledProgressBar = /*#__PURE__*/_styledComponents.default.input.attrs(_ref2 => {
   let {
-    videoCurrentTime
+    $videoCurrentTime
   } = _ref2;
   return {
-    value: videoCurrentTime
+    value: $videoCurrentTime
   };
 }).withConfig({
   displayName: "VideoProgressBar__StyledProgressBar",
   componentId: "components-web__sc-d9tm07-1"
 })(_ref3 => {
   let {
-    videoBufferDisplay,
-    rangeBackground,
+    $videoBufferDisplay,
+    $rangeBackground,
     ...sharedProps
   } = _ref3;
   return {
@@ -74,7 +74,7 @@ const StyledProgressBar = /*#__PURE__*/_styledComponents.default.input.attrs(_re
     'input[type=range]&': {
       appearance: 'none',
       width: '100%',
-      background: rangeBackground
+      background: $rangeBackground
     },
     'input[type=range]&:focus': {
       outline: 'none'
@@ -89,15 +89,15 @@ const StyledProgressBar = /*#__PURE__*/_styledComponents.default.input.attrs(_re
       margin: 0,
       border: 'none'
     },
-    'input[type=range]&::-webkit-slider-runnable-track': sharedStyles(sharedProps).track(videoBufferDisplay),
-    'input[type=range]&::-moz-range-track': sharedStyles(sharedProps).track(videoBufferDisplay),
+    'input[type=range]&::-webkit-slider-runnable-track': sharedStyles(sharedProps).track($videoBufferDisplay),
+    'input[type=range]&::-moz-range-track': sharedStyles(sharedProps).track($videoBufferDisplay),
     'input[type=range]&::-ms-track': {
-      ...sharedStyles(sharedProps).track(videoBufferDisplay),
+      ...sharedStyles(sharedProps).track($videoBufferDisplay),
       margin: '6px 0',
       border: 'none'
     },
     'input[type=range]&::-ms-fill-lower': {
-      background: rangeBackground
+      background: $rangeBackground
     },
     'input[type=range]&::-ms-tooltip': {
       display: 'none'
@@ -109,10 +109,10 @@ const StyledTimestamp = /*#__PURE__*/_styledComponents.default.span.withConfig({
   componentId: "components-web__sc-d9tm07-2"
 })(_ref4 => {
   let {
-    margin
+    $margin
   } = _ref4;
   return {
-    margin
+    margin: $margin
   };
 });
 // TODO: unify with the helper from `VideoSplash`
@@ -159,17 +159,16 @@ const VideoProgressBar = _ref5 => {
   const currentTimestamp = getTimestamp(currentTime);
   const remainingTimestamp = getTimestamp(remainingTime);
   const sharedProps = {
-    thumbWidth,
-    thumbHeight,
-    thumbBackground,
-    trackGradientStart,
-    trackGradientEnd,
-    rangeBackground
+    $thumbWidth: thumbWidth,
+    $thumbHeight: thumbHeight,
+    $thumbBackground: thumbBackground,
+    $trackGradientStart: trackGradientStart,
+    $trackGradientEnd: trackGradientEnd
   };
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(ProgressBarContainer, {
     ...selectProps(rest),
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(StyledTimestamp, {
-      margin: `0 ${timestampMarginRight}px 0 ${timestampMarginLeft}px`,
+      $margin: `0 ${timestampMarginRight}px 0 ${timestampMarginLeft}px`,
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.Typography, {
         variant: {
           inverse: true
@@ -177,19 +176,20 @@ const VideoProgressBar = _ref5 => {
         children: currentTimestamp
       })
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledProgressBar, {
-      "aria-label": _videoText.default[copy].videoProgressBarLabel,
+      "aria-label": _videoText.videoText[copy].videoProgressBarLabel,
       type: "range",
       step: "any",
       max: videoLength,
-      videoCurrentTime: videoCurrentTime,
+      $videoCurrentTime: videoCurrentTime,
       onChange: handleVideoSkip,
       onFocus: resetInactivityTimer,
-      videoBufferDisplay: videoBufferDisplay,
+      $videoBufferDisplay: videoBufferDisplay,
+      $rangeBackground: rangeBackground,
       ref: videoProgressBar,
       tabIndex: "-1",
       ...sharedProps
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledTimestamp, {
-      margin: `0 ${remainingTimestampMarginRight}px 0 ${remainingTimestampMarginLeft}px`,
+      $margin: `0 ${remainingTimestampMarginRight}px 0 ${remainingTimestampMarginLeft}px`,
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.Typography, {
         variant: {
           inverse: true
@@ -199,6 +199,7 @@ const VideoProgressBar = _ref5 => {
     })]
   });
 };
+exports.VideoProgressBar = VideoProgressBar;
 VideoProgressBar.propTypes = {
   ...selectedSystemPropTypes,
   copy: _propTypes.default.oneOf(['en', 'fr']),
@@ -207,5 +208,4 @@ VideoProgressBar.propTypes = {
   videoBufferEnd: _propTypes.default.number.isRequired,
   setSeek: _propTypes.default.func.isRequired,
   resetInactivityTimer: _propTypes.default.func.isRequired
-};
-var _default = exports.default = VideoProgressBar;
+};