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

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

@@ -3,13 +3,13 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.VolumeSlider = 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 _VideoButton = _interopRequireDefault(require("../VideoButton/VideoButton"));
-var _videoText = _interopRequireDefault(require("../../../videoText"));
+var _VideoButton = require("../VideoButton/VideoButton");
+var _videoText = require("../../../videoText");
 var _utils = require("../../../../utils");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
@@ -19,33 +19,33 @@ const VolumeSliderContainer = /*#__PURE__*/_styledComponents.default.div.withCon
   componentId: "components-web__sc-apixz4-0"
 })(_ref => {
   let {
-    videoPlayerWidth,
-    compactModeThreshold,
-    margin
+    $videoPlayerWidth,
+    $compactModeThreshold,
+    $margin
   } = _ref;
   return {
     display: 'flex',
-    width: videoPlayerWidth > compactModeThreshold ? '12%' : '20%',
+    width: $videoPlayerWidth > $compactModeThreshold ? '12%' : '20%',
     maxWidth: 120,
-    margin,
+    margin: $margin,
     alignItems: 'center'
   };
 });
 const sharedStyles = _ref2 => {
   let {
-    thumbHeight,
-    thumbWidth,
-    thumbBackground,
-    trackGradientStart,
-    trackGradientEnd
+    $thumbHeight,
+    $thumbWidth,
+    $thumbBackground,
+    $trackGradientStart,
+    $trackGradientEnd
   } = _ref2;
   return {
     thumb: {
       appearance: 'none',
-      height: thumbHeight,
-      width: thumbWidth,
+      height: $thumbHeight,
+      width: $thumbWidth,
       borderRadius: '50%',
-      background: thumbBackground,
+      background: $thumbBackground,
       cursor: 'pointer',
       marginTop: -3,
       '&:hover': {
@@ -57,24 +57,24 @@ const sharedStyles = _ref2 => {
       height: 2,
       cursor: 'pointer',
       borderRadius: 1.3,
-      background: `linear-gradient(to right, ${trackGradientStart} 0%, ${trackGradientEnd} ${videoCurrentVolume * 100 - 0.01}%, rgba(255,255,255,0.5) ${videoCurrentVolume * 100}%)`
+      background: `linear-gradient(to right, ${$trackGradientStart} 0%, ${$trackGradientEnd} ${videoCurrentVolume * 100 - 0.01}%, rgba(255,255,255,0.5) ${videoCurrentVolume * 100}%)`
     })
   };
 };
 const StyledVolumeSlider = /*#__PURE__*/_styledComponents.default.input.attrs(_ref3 => {
   let {
-    videoCurrentVolume
+    $videoCurrentVolume
   } = _ref3;
   return {
-    value: videoCurrentVolume
+    value: $videoCurrentVolume
   };
 }).withConfig({
   displayName: "VolumeSlider__StyledVolumeSlider",
   componentId: "components-web__sc-apixz4-1"
 })(_ref4 => {
   let {
-    videoCurrentVolume,
-    rangeBackground,
+    $videoCurrentVolume,
+    $rangeBackground,
     ...sharedProps
   } = _ref4;
   return {
@@ -84,25 +84,25 @@ const StyledVolumeSlider = /*#__PURE__*/_styledComponents.default.input.attrs(_r
     'input[type=range]&': {
       appearance: 'none',
       width: '100%',
-      background: rangeBackground
+      background: $rangeBackground
     },
     'input[type=range]&:focus': {
       outline: 'none'
     },
     'input[type=range]&::-webkit-slider-thumb': sharedStyles(sharedProps).thumb,
     'input[type=range]&::-moz-range-thumb': {
-      ...sharedStyles.thumb,
+      ...sharedStyles(sharedProps).thumb,
       border: 'none'
     },
     'input[type=range]&::-ms-thumb': {
-      ...sharedStyles.thumb,
+      ...sharedStyles(sharedProps).thumb,
       margin: 0,
       border: 'none'
     },
-    'input[type=range]&::-webkit-slider-runnable-track': sharedStyles(sharedProps).track(videoCurrentVolume),
-    'input[type=range]&::-moz-range-track': sharedStyles(sharedProps).track(videoCurrentVolume),
+    'input[type=range]&::-webkit-slider-runnable-track': sharedStyles(sharedProps).track($videoCurrentVolume),
+    'input[type=range]&::-moz-range-track': sharedStyles(sharedProps).track($videoCurrentVolume),
     'input[type=range]&::-ms-track': {
-      ...sharedStyles(sharedProps).track(videoCurrentVolume),
+      ...sharedStyles(sharedProps).track($videoCurrentVolume),
       margin: '6px 0',
       border: 'none'
     },
@@ -143,26 +143,25 @@ const VolumeSlider = _ref5 => {
     unmutedIcon
   } = (0, _componentsBase.useThemeTokens)('VideoVolumeSlider', tokens, variant);
   const sharedProps = {
-    thumbHeight,
-    thumbWidth,
-    thumbBackground,
-    trackGradientStart,
-    trackGradientEnd,
-    rangeBackground
+    $thumbHeight: thumbHeight,
+    $thumbWidth: thumbWidth,
+    $thumbBackground: thumbBackground,
+    $trackGradientStart: trackGradientStart,
+    $trackGradientEnd: trackGradientEnd
   };
   const handleVolumeChange = () => setVolume(refVolumeSlider.current.value);
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(VolumeSliderContainer, {
-    compactModeThreshold: compactModeThreshold,
-    videoPlayerWidth: videoPlayerWidth,
-    margin: `0 ${marginRight}px 0 ${marginLeft}px`,
+    $compactModeThreshold: compactModeThreshold,
+    $videoPlayerWidth: videoPlayerWidth,
+    $margin: `0 ${marginRight}px 0 ${marginLeft}px`,
     ...selectProps(rest),
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_VideoButton.default, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_VideoButton.VideoButton, {
       icon: videoIsMuted ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.Icon, {
         icon: mutedIcon
       }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.Icon, {
         icon: unmutedIcon
       }),
-      label: videoIsMuted ? _videoText.default[copy].unmute : _videoText.default[copy].mute,
+      label: videoIsMuted ? _videoText.videoText[copy].unmute : _videoText.videoText[copy].mute,
       disableFocus: disableFocus,
       onClick: toggleMute,
       onFocus: resetInactivityTimer
@@ -172,16 +171,18 @@ const VolumeSlider = _ref5 => {
       max: "1",
       step: "any",
       value: videoCurrentVolume,
-      videoCurrentVolume: videoCurrentVolume,
+      $videoCurrentVolume: videoCurrentVolume,
+      $rangeBackground: rangeBackground,
       ref: refVolumeSlider,
       onChange: handleVolumeChange,
       onFocus: resetInactivityTimer,
       tabIndex: "-1",
-      "aria-label": _videoText.default[copy].volumeSliderLabel,
+      "aria-label": _videoText.videoText[copy].volumeSliderLabel,
       ...sharedProps
     })]
   });
 };
+exports.VolumeSlider = VolumeSlider;
 VolumeSlider.propTypes = {
   ...selectedSystemPropTypes,
   videoCurrentVolume: _propTypes.default.number.isRequired,
@@ -193,5 +194,4 @@ VolumeSlider.propTypes = {
   compactModeThreshold: _propTypes.default.number.isRequired,
   videoPlayerWidth: _propTypes.default.number.isRequired,
   disableFocus: _propTypes.default.bool.isRequired
-};
-var _default = exports.default = VolumeSlider;
+};

package/lib/cjs/Video/MiddleControlButton/MiddleControlButton.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.MiddleControlButton = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _componentsBase = require("@telus-uds/components-base");
@@ -17,18 +17,18 @@ const StyledMiddleControlButton = /*#__PURE__*/_styledComponents.default.button.
   componentId: "components-web__sc-1um2s37-0"
 })(_ref => {
   let {
-    isHidden,
-    width,
-    height,
-    background
+    $isHidden,
+    $width,
+    $height,
+    $background
   } = _ref;
   return {
-    width,
-    height,
+    width: $width,
+    height: $height,
     borderRadius: '50%',
     transition: 'opacity 0.4s',
-    opacity: isHidden ? 0 : 1,
-    background,
+    opacity: $isHidden ? 0 : 1,
+    background: $background,
     display: 'flex',
     justifyContent: 'center',
     border: 'none',
@@ -55,12 +55,12 @@ const MiddleControlButton = _ref2 => {
     iconColor
   } = (0, _componentsBase.useThemeTokens)('VideoMiddleControlButton', tokens, variant);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledMiddleControlButton, {
-    isHidden: isHidden,
+    $isHidden: isHidden,
     onClick: onClick,
     onFocus: onFocus,
-    width: width,
-    height: height,
-    background: background,
+    $width: width,
+    $height: height,
+    $background: background,
     ...selectProps(rest),
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)(Icon, {
       color: iconColor,
@@ -68,11 +68,11 @@ const MiddleControlButton = _ref2 => {
     })
   });
 };
+exports.MiddleControlButton = MiddleControlButton;
 MiddleControlButton.propTypes = {
   ...selectedSystemPropTypes,
   icon: _propTypes.default.elementType.isRequired,
   isHidden: _propTypes.default.bool,
   onClick: _propTypes.default.func,
   onFocus: _propTypes.default.func
-};
-var _default = exports.default = MiddleControlButton;
+};

package/lib/cjs/Video/Video.js

@@ -3,18 +3,18 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.Video = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _fscreen = _interopRequireDefault(require("fscreen"));
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 var _componentsBase = require("@telus-uds/components-base");
-var _Spinner = _interopRequireDefault(require("../Spinner"));
+var _Spinner = require("../Spinner/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 _VideoSplash = require("../shared/VideoSplash/VideoSplash");
+var _MiddleControlButton = require("./MiddleControlButton/MiddleControlButton");
+var _ControlBar = require("./ControlBar/ControlBar");
+var _videoText = require("./videoText");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const [selectProps, selectedSystemPropTypes] = (0, _componentsBase.selectSystemProps)([_utils.htmlAttrs]);
@@ -25,14 +25,14 @@ const VideoPlayerContainer = /*#__PURE__*/_styledComponents.default.div.withConf
   componentId: "components-web__sc-12ltnuw-0"
 })(_ref => {
   let {
-    videoBorder,
-    borderColor
+    $videoBorder,
+    $borderColor
   } = _ref;
   return {
     width: '100%',
     outline: 'none',
     position: 'relative',
-    border: videoBorder ? `20px solid ${borderColor}` : undefined
+    border: $videoBorder ? `20px solid ${$borderColor}` : undefined
   };
 });
 const VideoElementContainer = /*#__PURE__*/_styledComponents.default.div.withConfig({
@@ -56,13 +56,13 @@ const VideoOverlayContainer = /*#__PURE__*/_styledComponents.default.div.withCon
   componentId: "components-web__sc-12ltnuw-3"
 })(_ref2 => {
   let {
-    mouseInactive
+    $mouseInactive
   } = _ref2;
   return {
     width: '100%',
     height: '100%',
     position: 'absolute',
-    cursor: mouseInactive ? 'none' : 'pointer'
+    cursor: $mouseInactive ? 'none' : 'pointer'
   };
 });
 const VideoSplashContainer = /*#__PURE__*/_styledComponents.default.div.withConfig({
@@ -86,7 +86,7 @@ const VideoOverlayElementContainer = /*#__PURE__*/_styledComponents.default.div.
   width: '100%',
   height: '100%'
 });
-const Video = _ref3 => {
+const Video = exports.Video = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) => {
   let {
     analyticsTracking,
     videoTitle,
@@ -776,23 +776,23 @@ const Video = _ref3 => {
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(VideoPlayerContainer, {
     ...safeRest,
     ref: refVideoPlayerContainer,
-    videoBorder: videoBorder,
-    borderColor: borderColor,
+    $videoBorder: videoBorder,
+    $borderColor: borderColor,
     onMouseMove: resetInactivityTimer,
     onClick: handleClick,
     onKeyDown: handleKeyboard,
     tabIndex: "0",
-    "aria-label": simpleMode ? _videoText.default[copy].videoSelectedSimple : _videoText.default[copy].videoSelected,
+    "aria-label": simpleMode ? _videoText.videoText[copy].videoSelectedSimple : _videoText.videoText[copy].videoSelected,
     "data-testid": "videoPlayer",
     ...selectProps(rest),
     children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(VideoOverlayContainer, {
-      mouseInactive: mouseInactive,
+      $mouseInactive: mouseInactive,
       onClick: () => {
         closeSubMenus();
         togglePlayPause();
       },
       children: [videoUnplayed && !videoQualityChanged && /*#__PURE__*/(0, _jsxRuntime.jsx)(VideoSplashContainer, {
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_VideoSplash.default, {
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_VideoSplash.VideoSplash, {
           poster: posterSrc,
           copy: copy,
           videoLength: videoLength,
@@ -801,30 +801,28 @@ const Video = _ref3 => {
           onClick: beginVideo
         })
       }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(VideoOverlayElementContainer, {
-        children: [videoEnded && /*#__PURE__*/(0, _jsxRuntime.jsx)(_MiddleControlButton.default, {
+        children: [videoEnded && /*#__PURE__*/(0, _jsxRuntime.jsx)(_MiddleControlButton.MiddleControlButton, {
           icon: replayIcon,
           onClick: replayVideo
-        }), !videoUnplayed && !videoIsBuffering && !videoEnded && !isMobile && /*#__PURE__*/(0, _jsxRuntime.jsx)(_MiddleControlButton.default, {
+        }), !videoUnplayed && !videoIsBuffering && !videoEnded && !isMobile && /*#__PURE__*/(0, _jsxRuntime.jsx)(_MiddleControlButton.MiddleControlButton, {
           icon: videoIsPlaying ? pauseIcon : playIcon,
           isHidden: mouseInactive,
           onClick: togglePlayPause,
           onFocus: resetInactivityTimer
-        }), videoIsBuffering && !isMobile && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Spinner.default, {
+        }), videoIsBuffering && !isMobile && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Spinner.Spinner, {
           show: true
         })]
       })]
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)(VideoElementContainer, {
-      videoIsFullscreen: videoIsFullscreen,
-      mouseInactive: mouseInactive,
+      ref: ref,
       children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(VideoPlayer, {
         ref: refVideoPlayer,
         controls: isMobile,
-        videoIsFullscreen: videoIsFullscreen,
         crossOrigin: crossOrigin,
-        playsinline: true,
+        playsInline: true,
         children: [loadedSources, loadedTracks, "Your browser does not support the video tag."]
       })
-    }), !simpleMode && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ControlBar.default, {
+    }), !simpleMode && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ControlBar.ControlBar, {
       videoPlayer: refVideoPlayer,
       videoPlayerContainer: refVideoPlayerContainer,
       sources: sources,
@@ -865,11 +863,12 @@ const Video = _ref3 => {
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
       tabIndex: "-1",
       ref: refKeyboardInstructions,
-      "aria-label": _videoText.default[copy].videoPlayer,
+      "aria-label": _videoText.videoText[copy].videoPlayer,
       role: "note"
     })]
   });
-};
+});
+Video.displayName = 'Video';
 Video.propTypes = {
   ...selectedSystemPropTypes,
   /**
@@ -960,5 +959,4 @@ Video.propTypes = {
   videoTitle: _propTypes.default.string,
   tokens: (0, _componentsBase.getTokensPropType)('Video'),
   variant: _componentsBase.variantProp.propType
-};
-var _default = exports.default = Video;
+};

package/lib/cjs/Video/videoText.js

@@ -3,8 +3,8 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
-const videoText = {
+exports.videoText = void 0;
+const videoText = exports.videoText = {
   en: {
     videoPlayer: 'Press the space bar or K to toggle play and pause. Use the left and right arrow keys or the comma and period keys to scrub through the video. Use the up and down arrow keys, the dash and equal keys, or the add and subtract number pad keys to increase and decrease volume. Press M to toggle mute. Press F to toggle fullscreen. Press escape to exit instructions and return to video.',
     videoSelected: 'Video selected. Press Q to listen to controls.',
@@ -57,5 +57,4 @@ const videoText = {
     en: 'Anglais',
     fr: 'Français'
   }
-};
-var _default = exports.default = videoText;
+};

package/lib/cjs/VideoPicker/VideoPicker.js

@@ -3,70 +3,69 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.VideoPicker = 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 _VideoPickerThumbnail = require("./VideoPickerThumbnail");
+var _VideoPickerPlayer = require("./VideoPickerPlayer");
+var _VideoSlider = require("./VideoSlider");
 var _utils = require("../utils");
 var _jsxRuntime = require("react/jsx-runtime");
-function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const [selectProps, selectedSystemPropTypes] = (0, _componentsBase.selectSystemProps)([_utils.htmlAttrs]);
 const framedContainerStyles = _ref => {
   let {
-    framedContainerBackgroundColor,
-    framedContainerBorderWidth,
-    framedContainerBorderColor,
-    framedContainerBorderRadius,
-    framedMaxHeight
+    $framedContainerBackgroundColor,
+    $framedContainerBorderWidth,
+    $framedContainerBorderColor,
+    $framedContainerBorderRadius,
+    $framedMaxHeight
   } = _ref;
-  return (0, _styledComponents.css)(["background-color:", ";border:", "px solid ", ";border-radius:", "px;& > div{max-height:", "px;}"], framedContainerBackgroundColor, framedContainerBorderWidth, framedContainerBorderColor, framedContainerBorderRadius, framedMaxHeight);
+  return (0, _styledComponents.css)(["background-color:", ";border:", "px solid ", ";border-radius:", "px;& > div{max-height:", "px;}"], $framedContainerBackgroundColor, $framedContainerBorderWidth, $framedContainerBorderColor, $framedContainerBorderRadius, $framedMaxHeight);
 };
 const VideoPickerContainer = /*#__PURE__*/_styledComponents.default.div.withConfig({
   displayName: "VideoPicker__VideoPickerContainer",
   componentId: "components-web__sc-x6lxp0-0"
 })(["", ""], _ref2 => {
   let {
-    isFramed,
+    $isFramed,
     ...tokens
   } = _ref2;
-  return isFramed && framedContainerStyles(tokens);
+  return $isFramed && framedContainerStyles(tokens);
 });
 const framedPlayerContainerStyles = _ref3 => {
   let {
-    framedMaxHeight,
-    framedContainerPadding
+    $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 (0, _styledComponents.css)(["width:66.67%;padding:", "px;max-height:", "px;flex-shrink:0;box-sizing:border-box;"], $framedContainerPadding, $framedMaxHeight);
 };
 const VideoPlayerContainer = /*#__PURE__*/_styledComponents.default.div.withConfig({
   displayName: "VideoPicker__VideoPlayerContainer",
   componentId: "components-web__sc-x6lxp0-1"
 })(["", " overflow:auto;"], _ref4 => {
   let {
-    isFramed,
+    $isFramed,
     ...tokens
   } = _ref4;
-  return isFramed && framedPlayerContainerStyles(tokens);
+  return $isFramed && framedPlayerContainerStyles(tokens);
 });
 const framedVideoListContainerStyle = /*#__PURE__*/(0, _styledComponents.css)(["max-height:", "px;overflow:auto;flex-direction:column;"], _ref5 => {
   let {
-    framedMaxHeight
+    $framedMaxHeight
   } = _ref5;
-  return framedMaxHeight;
+  return $framedMaxHeight;
 });
 const VideoListContainer = /*#__PURE__*/_styledComponents.default.div.withConfig({
   displayName: "VideoPicker__VideoListContainer",
   componentId: "components-web__sc-x6lxp0-2"
-})(["display:flex;justify-content:flex-start;position:relative;flex-grow:1;flex-direction:column;", ""], props => props.isFramed && framedVideoListContainerStyle);
-const VideoPicker = /*#__PURE__*/_react.default.forwardRef((_ref6, ref) => {
+})(["display:flex;justify-content:flex-start;position:relative;flex-grow:1;flex-direction:column;", ""], props => props.$isFramed && framedVideoListContainerStyle);
+const VideoPicker = exports.VideoPicker = /*#__PURE__*/_react.default.forwardRef((_ref6, ref) => {
   let {
     videoList = [],
     selectedVideo = videoList[0]?.videoId,
@@ -103,7 +102,7 @@ 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 listElements = videoList.map((video, index) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_VideoPickerThumbnail.VideoPickerThumbnail, {
     video: video,
     videoPlayerRef: videoPlayerRef,
     selectedVideoId: currentVideoId,
@@ -117,9 +116,13 @@ const VideoPicker = /*#__PURE__*/_react.default.forwardRef((_ref6, ref) => {
   }, video.videoId));
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(VideoPickerContainer, {
     ref: ref,
-    isFramed: isFramed,
+    $isFramed: isFramed,
+    $framedContainerBackgroundColor: themeTokens.framedContainerBackgroundColor,
+    $framedContainerBorderWidth: themeTokens.framedContainerBorderWidth,
+    $framedContainerBorderColor: themeTokens.framedContainerBorderColor,
+    $framedContainerBorderRadius: themeTokens.framedContainerBorderRadius,
+    $framedMaxHeight: themeTokens.framedMaxHeight,
     ...selectProps(rest),
-    ...themeTokens,
     children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_componentsBase.StackView, {
       divider: isFramed ? {
         tokens: {
@@ -134,19 +137,21 @@ const VideoPicker = /*#__PURE__*/_react.default.forwardRef((_ref6, ref) => {
       ,
       direction: isFramed ? 'row' : 'column',
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(VideoPlayerContainer, {
-        ...themeTokens,
-        isFramed: isFramed,
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_VideoPickerPlayer.default, {
+        $isFramed: isFramed,
+        $framedMaxHeight: themeTokens.framedMaxHeight,
+        $framedContainerPadding: themeTokens.framedContainerPadding,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_VideoPickerPlayer.VideoPickerPlayer, {
           video: addVideoEventHandlers(currentVideo),
           videoPlayerRef: videoPlayerRef,
           onStartVideo: onStartVideo
         })
-      }), hasSlider ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_VideoSlider.default, {
+      }), hasSlider ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_VideoSlider.VideoSlider, {
         children: listElements
       }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(VideoListContainer, {
         viewport: viewport,
         "data-testid": "video-list-container",
-        isFramed: isFramed,
+        $isFramed: isFramed,
+        $framedMaxHeight: themeTokens.framedMaxHeight,
         children: listElements
       })]
     })
@@ -193,5 +198,4 @@ VideoPicker.propTypes = {
    * @param {object} event - The event object.
    */
   onPause: _propTypes.default.func
-};
-var _default = exports.default = VideoPicker;
+};

package/lib/cjs/VideoPicker/VideoPickerPlayer.js

@@ -3,15 +3,15 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.VideoPickerPlayer = 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 _WebVideo = require("../WebVideo/WebVideo");
 var _videoPropType = require("./videoPropType");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-const VideoPickerPlayer = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
+const VideoPickerPlayer = exports.VideoPickerPlayer = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
   let {
     video = {},
     videoPlayerRef,
@@ -25,7 +25,7 @@ const VideoPickerPlayer = /*#__PURE__*/_react.default.forwardRef((_ref, ref) =>
     ref: ref,
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
       ref: videoPlayerRef,
-      children: video.videoId && /*#__PURE__*/(0, _jsxRuntime.jsx)(_WebVideo.default, {
+      children: video.videoId && /*#__PURE__*/(0, _jsxRuntime.jsx)(_WebVideo.WebVideo, {
         ...video,
         onStart: () => onStartVideo(video)
       })
@@ -50,5 +50,4 @@ VideoPickerPlayer.propTypes = {
   video: _videoPropType.VideoPropType,
   videoPlayerRef: _videoPropType.RefPropType,
   onStartVideo: _propTypes.default.func
-};
-var _default = exports.default = VideoPickerPlayer;
+};