@telus-uds/components-web 2.43.0 → 3.0.0

package/lib/Video/ControlBar/ControlBar.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 _componentsBase = require("@telus-uds/components-base");
-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 _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 getIcon = icon => /*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.Icon, {
+import React from 'react';
+import PropTypes from 'prop-types';
+import styled from 'styled-components';
+import { StackView, useThemeTokens, selectSystemProps, Icon, useViewport } from '@telus-uds/components-base';
+import VideoProgressBar from './Controls/VideoProgressBar/VideoProgressBar';
+import VolumeSlider from './Controls/VolumeSlider/VolumeSlider';
+import VideoButton from './Controls/VideoButton/VideoButton';
+import VideoMenu from './Controls/VideoMenu/VideoMenu';
+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 getIcon = icon => /*#__PURE__*/_jsx(Icon, {
   icon: icon
 });
-const ControlBarContainer = /*#__PURE__*/_styledComponents.default.div.withConfig({
+const ControlBarContainer = /*#__PURE__*/styled.div.withConfig({
   displayName: "ControlBar__ControlBarContainer",
   componentId: "components-web__sc-13y61ky-0"
 })(_ref => {
@@ -36,7 +29,7 @@ const ControlBarContainer = /*#__PURE__*/_styledComponents.default.div.withConfi
     display: isMobile ? 'none' : undefined
   };
 });
-const StyledControlBar = /*#__PURE__*/_styledComponents.default.div.withConfig({
+const StyledControlBar = /*#__PURE__*/styled.div.withConfig({
   displayName: "ControlBar__StyledControlBar",
   componentId: "components-web__sc-13y61ky-1"
 })(_ref2 => {
@@ -59,14 +52,14 @@ const StyledControlBar = /*#__PURE__*/_styledComponents.default.div.withConfig({
     zIndex: 9
   };
 });
-const VideoProgressBarContainer = /*#__PURE__*/_styledComponents.default.div.withConfig({
+const VideoProgressBarContainer = /*#__PURE__*/styled.div.withConfig({
   displayName: "ControlBar__VideoProgressBarContainer",
   componentId: "components-web__sc-13y61ky-2"
 })({
   display: 'flex',
   flexGrow: 1
 });
-const MenuContainer = /*#__PURE__*/_styledComponents.default.div.withConfig({
+const MenuContainer = /*#__PURE__*/styled.div.withConfig({
   displayName: "ControlBar__MenuContainer",
   componentId: "components-web__sc-13y61ky-3"
 })(_ref3 => {
@@ -123,7 +116,7 @@ const ControlBar = _ref4 => {
     variant,
     ...rest
   } = _ref4;
-  const viewport = (0, _componentsBase.useViewport)();
+  const viewport = useViewport();
   const {
     paddingTop,
     paddingBottom,
@@ -137,7 +130,7 @@ const ControlBar = _ref4 => {
     minimizeIcon,
     maximizeIcon,
     height
-  } = (0, _componentsBase.useThemeTokens)('VideoControlBar', tokens, variant, {
+  } = useThemeTokens('VideoControlBar', tokens, variant, {
     viewport
   });
   const parseVideoQuality = () => {
@@ -154,12 +147,12 @@ const ControlBar = _ref4 => {
   const parseTracks = () => {
     const parsed = tracks.map((track, trackNumber) => {
       return {
-        name: _videoText.default[copy][track.language],
+        name: videoText[copy][track.language],
         value: trackNumber
       };
     });
     parsed.unshift({
-      name: _videoText.default[copy].captionsNone,
+      name: videoText[copy].captionsNone,
       value: -1
     });
     return parsed;
@@ -169,15 +162,15 @@ const ControlBar = _ref4 => {
     menuRight,
     menuMarginLeft
   };
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(ControlBarContainer, {
+  return /*#__PURE__*/_jsx(ControlBarContainer, {
     isHidden: isHidden,
     isMobile: isMobile,
     ...selectProps(rest),
-    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(StyledControlBar, {
+    children: /*#__PURE__*/_jsxs(StyledControlBar, {
       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__*/_jsx(VideoProgressBarContainer, {
+        children: /*#__PURE__*/_jsx(VideoProgressBar, {
           copy: copy,
           videoPlayer: videoPlayer,
           playing: videoPlaying,
@@ -187,7 +180,7 @@ const ControlBar = _ref4 => {
           setSeek: setSeek,
           resetInactivityTimer: resetInactivityTimer
         })
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_VolumeSlider.default, {
+      }), /*#__PURE__*/_jsx(VolumeSlider, {
         videoPlayer: videoPlayer,
         videoCurrentVolume: videoCurrentVolume,
         setVolume: setVolume,
@@ -198,12 +191,12 @@ const ControlBar = _ref4 => {
         compactModeThreshold: compactModeThreshold,
         videoPlayerWidth: videoPlayerWidth,
         disableFocus: videoUnplayed
-      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_componentsBase.StackView, {
+      }), /*#__PURE__*/_jsxs(StackView, {
         space: 3,
         direction: "row",
-        children: [tracksAvailable && /*#__PURE__*/(0, _jsxRuntime.jsx)(_VideoButton.default, {
+        children: [tracksAvailable && /*#__PURE__*/_jsx(VideoButton, {
           disableFocus: videoUnplayed,
-          label: _videoText.default[copy].captionsToggle,
+          label: videoText[copy].captionsToggle,
           icon: getIcon(captionsIcon),
           onClick: () => {
             setCaptionsMenuOpen(!captionsMenuOpen);
@@ -212,9 +205,9 @@ const ControlBar = _ref4 => {
           },
           onFocus: resetInactivityTimer,
           onBlur: resetInactivityTimer
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_VideoButton.default, {
+        }), /*#__PURE__*/_jsx(VideoButton, {
           disableFocus: videoUnplayed,
-          label: _videoText.default[copy].qualityToggle,
+          label: videoText[copy].qualityToggle,
           icon: getIcon(settingsIcon),
           onClick: () => {
             setQualityMenuOpen(!qualityMenuOpen);
@@ -223,29 +216,29 @@ const ControlBar = _ref4 => {
           },
           onFocus: resetInactivityTimer,
           onBlur: resetInactivityTimer
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_VideoButton.default, {
+        }), /*#__PURE__*/_jsx(VideoButton, {
           disableFocus: videoUnplayed,
-          label: _videoText.default[copy].fullScreenToggle,
+          label: videoText[copy].fullScreenToggle,
           icon: videoIsFullscreen ? getIcon(minimizeIcon) : getIcon(maximizeIcon),
           onClick: toggleFullscreen,
           onFocus: resetInactivityTimer,
           onBlur: resetInactivityTimer
         })]
-      }), captionsMenuOpen && /*#__PURE__*/(0, _jsxRuntime.jsx)(MenuContainer, {
+      }), captionsMenuOpen && /*#__PURE__*/_jsx(MenuContainer, {
         isOpen: captionsMenuOpen,
         ...menuContainerStyleProps,
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_VideoMenu.default, {
-          menuLabel: _videoText.default[copy].captionsDialogue,
+        children: /*#__PURE__*/_jsx(VideoMenu, {
+          menuLabel: videoText[copy].captionsDialogue,
           menuOptions: parseTracks(),
           setSelection: setTextTracks,
           selectedItem: selectedTextTrack,
           copy: copy
         })
-      }), qualityMenuOpen && /*#__PURE__*/(0, _jsxRuntime.jsx)(MenuContainer, {
+      }), qualityMenuOpen && /*#__PURE__*/_jsx(MenuContainer, {
         isOpen: qualityMenuOpen,
         ...menuContainerStyleProps,
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_VideoMenu.default, {
-          menuLabel: _videoText.default[copy].qualityDialogue,
+        children: /*#__PURE__*/_jsx(VideoMenu, {
+          menuLabel: videoText[copy].qualityDialogue,
           menuOptions: parseVideoQuality(),
           setSelection: setVideoQuality,
           selectedItem: videoQuality,
@@ -257,39 +250,38 @@ const ControlBar = _ref4 => {
 };
 ControlBar.propTypes = {
   ...selectedSystemPropTypes,
-  videoPlayer: _propTypes.default.object.isRequired,
-  videoPlayerContainer: _propTypes.default.object.isRequired,
-  sources: _propTypes.default.array.isRequired,
-  tracks: _propTypes.default.array,
-  videoPlaying: _propTypes.default.bool.isRequired,
-  videoUnplayed: _propTypes.default.bool.isRequired,
-  videoBufferEnd: _propTypes.default.number.isRequired,
-  isHidden: _propTypes.default.bool,
-  videoLength: _propTypes.default.number.isRequired,
-  videoCurrentTime: _propTypes.default.number.isRequired,
-  videoCurrentVolume: _propTypes.default.number.isRequired,
-  videoIsMuted: _propTypes.default.bool.isRequired,
-  setVolume: _propTypes.default.func.isRequired,
-  isMobile: _propTypes.default.bool.isRequired,
-  tracksAvailable: _propTypes.default.bool.isRequired,
-  togglePlayPause: _propTypes.default.func.isRequired,
-  setSeek: _propTypes.default.func.isRequired,
-  toggleMute: _propTypes.default.func.isRequired,
-  toggleFullscreen: _propTypes.default.func.isRequired,
-  videoIsFullscreen: _propTypes.default.bool.isRequired,
-  setTextTracks: _propTypes.default.func.isRequired,
-  selectedTextTrack: _propTypes.default.number.isRequired,
-  resetInactivityTimer: _propTypes.default.func.isRequired,
-  videoQuality: _propTypes.default.number.isRequired,
-  setVideoQuality: _propTypes.default.func.isRequired,
-  captionsMenuOpen: _propTypes.default.bool.isRequired,
-  setCaptionsMenuOpen: _propTypes.default.func.isRequired,
-  qualityMenuOpen: _propTypes.default.bool.isRequired,
-  setQualityMenuOpen: _propTypes.default.func.isRequired,
-  clearInactivityTimer: _propTypes.default.func.isRequired,
-  copy: _propTypes.default.oneOf(['en', 'fr']).isRequired,
-  compactModeThreshold: _propTypes.default.number.isRequired,
-  videoPlayerWidth: _propTypes.default.number.isRequired
+  videoPlayer: PropTypes.object.isRequired,
+  videoPlayerContainer: PropTypes.object.isRequired,
+  sources: PropTypes.array.isRequired,
+  tracks: PropTypes.array,
+  videoPlaying: PropTypes.bool.isRequired,
+  videoUnplayed: PropTypes.bool.isRequired,
+  videoBufferEnd: PropTypes.number.isRequired,
+  isHidden: PropTypes.bool,
+  videoLength: PropTypes.number.isRequired,
+  videoCurrentTime: PropTypes.number.isRequired,
+  videoCurrentVolume: PropTypes.number.isRequired,
+  videoIsMuted: PropTypes.bool.isRequired,
+  setVolume: PropTypes.func.isRequired,
+  isMobile: PropTypes.bool.isRequired,
+  tracksAvailable: PropTypes.bool.isRequired,
+  togglePlayPause: PropTypes.func.isRequired,
+  setSeek: PropTypes.func.isRequired,
+  toggleMute: PropTypes.func.isRequired,
+  toggleFullscreen: PropTypes.func.isRequired,
+  videoIsFullscreen: PropTypes.bool.isRequired,
+  setTextTracks: PropTypes.func.isRequired,
+  selectedTextTrack: PropTypes.number.isRequired,
+  resetInactivityTimer: PropTypes.func.isRequired,
+  videoQuality: PropTypes.number.isRequired,
+  setVideoQuality: PropTypes.func.isRequired,
+  captionsMenuOpen: PropTypes.bool.isRequired,
+  setCaptionsMenuOpen: PropTypes.func.isRequired,
+  qualityMenuOpen: PropTypes.bool.isRequired,
+  setQualityMenuOpen: PropTypes.func.isRequired,
+  clearInactivityTimer: PropTypes.func.isRequired,
+  copy: PropTypes.oneOf(['en', 'fr']).isRequired,
+  compactModeThreshold: PropTypes.number.isRequired,
+  videoPlayerWidth: PropTypes.number.isRequired
 };
-var _default = ControlBar;
-exports.default = _default;
+export default ControlBar;

package/lib/Video/ControlBar/Controls/VideoButton/VideoButton.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 StyledButton = /*#__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 { jsxs as _jsxs } from "react/jsx-runtime";
+const [selectProps, selectedSystemPropTypes] = selectSystemProps([htmlAttrs]);
+const StyledButton = /*#__PURE__*/styled.button.withConfig({
   displayName: "VideoButton__StyledButton",
   componentId: "components-web__sc-kfw0tr-0"
 })(_ref => {
@@ -43,7 +36,7 @@ const VideoButton = _ref2 => {
   } = _ref2;
   const {
     color
-  } = (0, _componentsBase.useThemeTokens)('VideoButton', tokens, variant);
+  } = useThemeTokens('VideoButton', tokens, variant);
   const handleOnKeyDown = event => {
     const key = event.key || event.keyCode;
 
@@ -55,9 +48,9 @@ const VideoButton = _ref2 => {
   const handleClick = event => {
     var _rest$onClick;
     event.preventDefault();
-    (_rest$onClick = rest.onClick) === null || _rest$onClick === void 0 ? void 0 : _rest$onClick.call(rest, event);
+    (_rest$onClick = rest.onClick) === null || _rest$onClick === void 0 || _rest$onClick.call(rest, event);
   };
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(StyledButton, {
+  return /*#__PURE__*/_jsxs(StyledButton, {
     "aria-label": label,
     onKeyDown: handleOnKeyDown,
     tabIndex: disableFocus ? '-1' : undefined,
@@ -69,10 +62,9 @@ const VideoButton = _ref2 => {
 };
 VideoButton.propTypes = {
   ...selectedSystemPropTypes,
-  icon: _propTypes.default.element.isRequired,
-  label: _propTypes.default.string.isRequired,
-  disableFocus: _propTypes.default.bool.isRequired,
-  children: _propTypes.default.node
+  icon: PropTypes.element.isRequired,
+  label: PropTypes.string.isRequired,
+  disableFocus: PropTypes.bool.isRequired,
+  children: PropTypes.node
 };
-var _default = VideoButton;
-exports.default = _default;
+export default VideoButton;

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

@@ -1,19 +1,12 @@
-"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 _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 MenuContainer = /*#__PURE__*/_styledComponents.default.div.withConfig({
+import React from 'react';
+import PropTypes from 'prop-types';
+import styled from 'styled-components';
+import { StackView, Typography, useThemeTokens, selectSystemProps, Icon } from '@telus-uds/components-base';
+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 MenuContainer = /*#__PURE__*/styled.div.withConfig({
   displayName: "VideoMenu__MenuContainer",
   componentId: "components-web__sc-nllbhw-0"
 })(_ref => {
@@ -28,7 +21,7 @@ const MenuContainer = /*#__PURE__*/_styledComponents.default.div.withConfig({
     borderRadius: 5
   };
 });
-const MenuButton = /*#__PURE__*/_styledComponents.default.button.withConfig({
+const MenuButton = /*#__PURE__*/styled.button.withConfig({
   displayName: "VideoMenu__MenuButton",
   componentId: "components-web__sc-nllbhw-1"
 })({
@@ -41,7 +34,7 @@ const MenuButton = /*#__PURE__*/_styledComponents.default.button.withConfig({
   justifyContent: 'space-between',
   verticalAlign: 'middle'
 });
-const CheckmarkContainer = /*#__PURE__*/_styledComponents.default.div.withConfig({
+const CheckmarkContainer = /*#__PURE__*/styled.div.withConfig({
   displayName: "VideoMenu__CheckmarkContainer",
   componentId: "components-web__sc-nllbhw-2"
 })(_ref2 => {
@@ -91,14 +84,14 @@ const VideoMenu = _ref3 => {
     checkMarkFocusColor,
     checkMarkUnselectedColor,
     checkMarkIcon
-  } = (0, _componentsBase.useThemeTokens)('VideoMenu', tokens, variant);
+  } = useThemeTokens('VideoMenu', tokens, variant);
   const getMenuItems = () => {
     return menuOptions.map(option => {
       if (option.name) {
-        return /*#__PURE__*/(0, _jsxRuntime.jsxs)(MenuButton, {
+        return /*#__PURE__*/_jsxs(MenuButton, {
           "aria-haspopup": "true",
           role: "menuitem",
-          "aria-label": `${option.name} ${menuLabel}. ${selectedItem === option.value ? _videoText.default[copy].itemSelected : _videoText.default[copy].itemUnselected}`,
+          "aria-label": `${option.name} ${menuLabel}. ${selectedItem === option.value ? videoText[copy].itemSelected : videoText[copy].itemUnselected}`,
           selectedItem: selectedItem,
           itemValue: option.value,
           onClick: () => {
@@ -106,13 +99,13 @@ const VideoMenu = _ref3 => {
               setSelection(option.value);
             }
           },
-          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.Typography, {
+          children: [/*#__PURE__*/_jsx(Typography, {
             variant: {
               bold: true,
               inverse: true
             },
             children: option.name
-          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(CheckmarkContainer, {
+          }), /*#__PURE__*/_jsx(CheckmarkContainer, {
             isSelectedItem: option.value === selectedItem,
             checkMarkWidth: checkMarkWidth,
             checkMarkHeight: checkMarkHeight,
@@ -120,7 +113,7 @@ const VideoMenu = _ref3 => {
             checkMarkHoverColor: checkMarkHoverColor,
             checkMarkFocusColor: checkMarkFocusColor,
             checkMarkUnselectedColor: checkMarkUnselectedColor,
-            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.Icon, {
+            children: /*#__PURE__*/_jsx(Icon, {
               icon: checkMarkIcon
             })
           })]
@@ -137,21 +130,21 @@ const VideoMenu = _ref3 => {
       event.stopPropagation();
     }
   };
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(MenuContainer, {
+  return /*#__PURE__*/_jsx(MenuContainer, {
     onKeyDown: handleOnKeyDown,
     padding: padding,
     background: background,
     ...selectProps(rest),
-    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_componentsBase.StackView, {
+    children: /*#__PURE__*/_jsxs(StackView, {
       space: 2,
       divider: true,
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.Typography, {
+      children: [/*#__PURE__*/_jsx(Typography, {
         variant: {
           bold: true,
           inverse: true
         },
         children: menuLabel
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      }), /*#__PURE__*/_jsx("div", {
         role: "menu",
         children: getMenuItems()
       })]
@@ -160,11 +153,10 @@ const VideoMenu = _ref3 => {
 };
 VideoMenu.propTypes = {
   ...selectedSystemPropTypes,
-  menuLabel: _propTypes.default.string.isRequired,
-  menuOptions: _propTypes.default.array.isRequired,
-  setSelection: _propTypes.default.func.isRequired,
-  selectedItem: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]).isRequired,
-  copy: _propTypes.default.oneOf(['en', 'fr']).isRequired
+  menuLabel: PropTypes.string.isRequired,
+  menuOptions: PropTypes.array.isRequired,
+  setSelection: PropTypes.func.isRequired,
+  selectedItem: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
+  copy: PropTypes.oneOf(['en', 'fr']).isRequired
 };
-var _default = VideoMenu;
-exports.default = _default;
+export default VideoMenu;

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

@@ -1,19 +1,12 @@
-"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 _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 ProgressBarContainer = /*#__PURE__*/_styledComponents.default.div.withConfig({
+import React from 'react';
+import PropTypes from 'prop-types';
+import styled from 'styled-components';
+import { Typography, useThemeTokens, selectSystemProps } from '@telus-uds/components-base';
+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 ProgressBarContainer = /*#__PURE__*/styled.div.withConfig({
   displayName: "VideoProgressBar__ProgressBarContainer",
   componentId: "components-web__sc-d9tm07-0"
 })({
@@ -51,8 +44,7 @@ const sharedStyles = _ref => {
     })
   };
 };
-
-const StyledProgressBar = /*#__PURE__*/_styledComponents.default.input.attrs(_ref2 => {
+const StyledProgressBar = /*#__PURE__*/styled.input.attrs(_ref2 => {
   let {
     videoCurrentTime
   } = _ref2;
@@ -105,7 +97,7 @@ const StyledProgressBar = /*#__PURE__*/_styledComponents.default.input.attrs(_re
     }
   };
 });
-const StyledTimestamp = /*#__PURE__*/_styledComponents.default.span.withConfig({
+const StyledTimestamp = /*#__PURE__*/styled.span.withConfig({
   displayName: "VideoProgressBar__StyledTimestamp",
   componentId: "components-web__sc-d9tm07-2"
 })(_ref4 => {
@@ -144,10 +136,10 @@ const VideoProgressBar = _ref5 => {
     trackGradientStart,
     trackGradientEnd,
     rangeBackground
-  } = (0, _componentsBase.useThemeTokens)('VideoProgressBar', tokens, variant, {
+  } = useThemeTokens('VideoProgressBar', tokens, variant, {
     playing
   });
-  const videoProgressBar = /*#__PURE__*/_react.default.createRef();
+  const videoProgressBar = /*#__PURE__*/React.createRef();
   const handleVideoSkip = () => {
     setSeek(videoProgressBar.current.value);
   };
@@ -165,18 +157,18 @@ const VideoProgressBar = _ref5 => {
     trackGradientEnd,
     rangeBackground
   };
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(ProgressBarContainer, {
+  return /*#__PURE__*/_jsxs(ProgressBarContainer, {
     ...selectProps(rest),
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(StyledTimestamp, {
+    children: [/*#__PURE__*/_jsx(StyledTimestamp, {
       margin: `0 ${timestampMarginRight}px 0 ${timestampMarginLeft}px`,
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.Typography, {
+      children: /*#__PURE__*/_jsx(Typography, {
         variant: {
           inverse: true
         },
         children: currentTimestamp
       })
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledProgressBar, {
-      "aria-label": _videoText.default[copy].videoProgressBarLabel,
+    }), /*#__PURE__*/_jsx(StyledProgressBar, {
+      "aria-label": videoText[copy].videoProgressBarLabel,
       type: "range",
       step: "any",
       max: videoLength,
@@ -187,8 +179,8 @@ const VideoProgressBar = _ref5 => {
       ref: videoProgressBar,
       tabIndex: "-1",
       ...sharedProps
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledTimestamp, {
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.Typography, {
+    }), /*#__PURE__*/_jsx(StyledTimestamp, {
+      children: /*#__PURE__*/_jsx(Typography, {
         variant: {
           inverse: true
         },
@@ -199,12 +191,11 @@ const VideoProgressBar = _ref5 => {
 };
 VideoProgressBar.propTypes = {
   ...selectedSystemPropTypes,
-  copy: _propTypes.default.oneOf(['en', 'fr']),
-  videoLength: _propTypes.default.number.isRequired,
-  videoCurrentTime: _propTypes.default.number.isRequired,
-  videoBufferEnd: _propTypes.default.number.isRequired,
-  setSeek: _propTypes.default.func.isRequired,
-  resetInactivityTimer: _propTypes.default.func.isRequired
+  copy: PropTypes.oneOf(['en', 'fr']),
+  videoLength: PropTypes.number.isRequired,
+  videoCurrentTime: PropTypes.number.isRequired,
+  videoBufferEnd: PropTypes.number.isRequired,
+  setSeek: PropTypes.func.isRequired,
+  resetInactivityTimer: PropTypes.func.isRequired
 };
-var _default = VideoProgressBar;
-exports.default = _default;
+export default VideoProgressBar;