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

package/lib/esm/Video/ControlBar/ControlBar.js

@@ -2,11 +2,11 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { StackView, useThemeTokens, selectSystemProps, Icon, useViewport } from '@telus-uds/components-base';
 import styled from 'styled-components';
-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 { 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]);
@@ -18,15 +18,15 @@ const ControlBarContainer = /*#__PURE__*/styled.div.withConfig({
   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__*/styled.div.withConfig({
@@ -34,15 +34,15 @@ const StyledControlBar = /*#__PURE__*/styled.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
@@ -64,20 +64,20 @@ const MenuContainer = /*#__PURE__*/styled.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 => {
+export const ControlBar = _ref4 => {
   let {
     videoPlayer,
     videoPlayerContainer,
@@ -158,17 +158,18 @@ const ControlBar = _ref4 => {
     return parsed;
   };
   const menuContainerStyleProps = {
-    menuBottom,
-    menuRight,
-    menuMarginLeft
+    $isOpen: false,
+    $menuBottom: menuBottom,
+    $menuRight: menuRight,
+    $menuMarginLeft: menuMarginLeft
   };
   return /*#__PURE__*/_jsx(ControlBarContainer, {
-    isHidden: isHidden,
-    isMobile: isMobile,
+    $isHidden: isHidden,
+    $isMobile: isMobile,
     ...selectProps(rest),
     children: /*#__PURE__*/_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__*/_jsx(VideoProgressBarContainer, {
         children: /*#__PURE__*/_jsx(VideoProgressBar, {
           copy: copy,
@@ -225,8 +226,8 @@ const ControlBar = _ref4 => {
           onBlur: resetInactivityTimer
         })]
       }), captionsMenuOpen && /*#__PURE__*/_jsx(MenuContainer, {
-        isOpen: captionsMenuOpen,
         ...menuContainerStyleProps,
+        $isOpen: captionsMenuOpen,
         children: /*#__PURE__*/_jsx(VideoMenu, {
           menuLabel: videoText[copy].captionsDialogue,
           menuOptions: parseTracks(),
@@ -235,8 +236,8 @@ const ControlBar = _ref4 => {
           copy: copy
         })
       }), qualityMenuOpen && /*#__PURE__*/_jsx(MenuContainer, {
-        isOpen: qualityMenuOpen,
         ...menuContainerStyleProps,
+        $isOpen: qualityMenuOpen,
         children: /*#__PURE__*/_jsx(VideoMenu, {
           menuLabel: videoText[copy].qualityDialogue,
           menuOptions: parseVideoQuality(),
@@ -283,5 +284,4 @@ ControlBar.propTypes = {
   copy: PropTypes.oneOf(['en', 'fr']).isRequired,
   compactModeThreshold: PropTypes.number.isRequired,
   videoPlayerWidth: PropTypes.number.isRequired
-};
-export default ControlBar;
+};

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

@@ -10,7 +10,7 @@ const StyledButton = /*#__PURE__*/styled.button.withConfig({
   componentId: "components-web__sc-kfw0tr-0"
 })(_ref => {
   let {
-    color
+    $color
   } = _ref;
   return {
     background: 'none',
@@ -20,11 +20,11 @@ const StyledButton = /*#__PURE__*/styled.button.withConfig({
     display: 'inline-flex',
     alignItems: 'stretch',
     'svg path': {
-      fill: color
+      fill: $color
     }
   };
 });
-const VideoButton = _ref2 => {
+export const VideoButton = _ref2 => {
   let {
     icon,
     label,
@@ -53,7 +53,7 @@ const VideoButton = _ref2 => {
     "aria-label": label,
     onKeyDown: handleOnKeyDown,
     tabIndex: disableFocus ? '-1' : undefined,
-    color: color,
+    $color: color,
     ...selectProps(rest),
     onClick: handleClick,
     children: [icon, children]
@@ -65,5 +65,4 @@ VideoButton.propTypes = {
   label: PropTypes.string.isRequired,
   disableFocus: PropTypes.bool.isRequired,
   children: PropTypes.node
-};
-export default VideoButton;
+};

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

@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { StackView, Typography, useThemeTokens, selectSystemProps, Icon } from '@telus-uds/components-base';
 import styled from 'styled-components';
-import videoText from '../../../videoText';
+import { videoText } from '../../../videoText';
 import { htmlAttrs } from '../../../../utils';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([htmlAttrs]);
@@ -11,13 +11,13 @@ const MenuContainer = /*#__PURE__*/styled.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
   };
 });
@@ -39,31 +39,31 @@ const CheckmarkContainer = /*#__PURE__*/styled.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
     }
   };
 });
-const VideoMenu = _ref3 => {
+export const VideoMenu = _ref3 => {
   let {
     menuLabel,
     menuOptions,
@@ -92,8 +92,6 @@ const VideoMenu = _ref3 => {
           "aria-haspopup": "true",
           role: "menuitem",
           "aria-label": `${option.name} ${menuLabel}. ${selectedItem === option.value ? videoText[copy].itemSelected : videoText[copy].itemUnselected}`,
-          selectedItem: selectedItem,
-          itemValue: option.value,
           onClick: () => {
             if (selectedItem !== option.value) {
               setSelection(option.value);
@@ -106,13 +104,13 @@ const VideoMenu = _ref3 => {
             },
             children: option.name
           }), /*#__PURE__*/_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__*/_jsx(Icon, {
               icon: checkMarkIcon
             })
@@ -132,8 +130,8 @@ const VideoMenu = _ref3 => {
   };
   return /*#__PURE__*/_jsx(MenuContainer, {
     onKeyDown: handleOnKeyDown,
-    padding: padding,
-    background: background,
+    $padding: padding,
+    $background: background,
     ...selectProps(rest),
     children: /*#__PURE__*/_jsxs(StackView, {
       space: 2,
@@ -158,5 +156,4 @@ VideoMenu.propTypes = {
   setSelection: PropTypes.func.isRequired,
   selectedItem: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
   copy: PropTypes.oneOf(['en', 'fr']).isRequired
-};
-export default VideoMenu;
+};

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

@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { Typography, useThemeTokens, selectSystemProps } from '@telus-uds/components-base';
 import styled from 'styled-components';
-import videoText from '../../../videoText';
+import { videoText } from '../../../videoText';
 import { htmlAttrs } from '../../../../utils';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([htmlAttrs]);
@@ -16,19 +16,19 @@ const ProgressBarContainer = /*#__PURE__*/styled.div.withConfig({
 });
 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': {
@@ -40,24 +40,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__*/styled.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 {
@@ -67,7 +67,7 @@ const StyledProgressBar = /*#__PURE__*/styled.input.attrs(_ref2 => {
     'input[type=range]&': {
       appearance: 'none',
       width: '100%',
-      background: rangeBackground
+      background: $rangeBackground
     },
     'input[type=range]&:focus': {
       outline: 'none'
@@ -82,15 +82,15 @@ const StyledProgressBar = /*#__PURE__*/styled.input.attrs(_ref2 => {
       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'
@@ -102,10 +102,10 @@ const StyledTimestamp = /*#__PURE__*/styled.span.withConfig({
   componentId: "components-web__sc-d9tm07-2"
 })(_ref4 => {
   let {
-    margin
+    $margin
   } = _ref4;
   return {
-    margin
+    margin: $margin
   };
 });
 // TODO: unify with the helper from `VideoSplash`
@@ -114,7 +114,7 @@ function getTimestamp(duration) {
   const seconds = Math.floor(duration - 60 * minutes);
   return `${minutes}:${seconds < 10 ? 0 : ''}${seconds}`;
 }
-const VideoProgressBar = _ref5 => {
+export const VideoProgressBar = _ref5 => {
   let {
     copy = 'en',
     videoLength,
@@ -152,17 +152,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__*/_jsxs(ProgressBarContainer, {
     ...selectProps(rest),
     children: [/*#__PURE__*/_jsx(StyledTimestamp, {
-      margin: `0 ${timestampMarginRight}px 0 ${timestampMarginLeft}px`,
+      $margin: `0 ${timestampMarginRight}px 0 ${timestampMarginLeft}px`,
       children: /*#__PURE__*/_jsx(Typography, {
         variant: {
           inverse: true
@@ -174,15 +173,16 @@ const VideoProgressBar = _ref5 => {
       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__*/_jsx(StyledTimestamp, {
-      margin: `0 ${remainingTimestampMarginRight}px 0 ${remainingTimestampMarginLeft}px`,
+      $margin: `0 ${remainingTimestampMarginRight}px 0 ${remainingTimestampMarginLeft}px`,
       children: /*#__PURE__*/_jsx(Typography, {
         variant: {
           inverse: true
@@ -200,5 +200,4 @@ VideoProgressBar.propTypes = {
   videoBufferEnd: PropTypes.number.isRequired,
   setSeek: PropTypes.func.isRequired,
   resetInactivityTimer: PropTypes.func.isRequired
-};
-export default VideoProgressBar;
+};

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

@@ -2,8 +2,8 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { Icon, useThemeTokens, selectSystemProps } from '@telus-uds/components-base';
 import styled from 'styled-components';
-import VideoButton from '../VideoButton/VideoButton';
-import videoText from '../../../videoText';
+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]);
@@ -12,33 +12,33 @@ const VolumeSliderContainer = /*#__PURE__*/styled.div.withConfig({
   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': {
@@ -50,24 +50,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__*/styled.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 {
@@ -77,25 +77,25 @@ const StyledVolumeSlider = /*#__PURE__*/styled.input.attrs(_ref3 => {
     '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'
     },
@@ -107,7 +107,7 @@ const StyledVolumeSlider = /*#__PURE__*/styled.input.attrs(_ref3 => {
     }
   };
 });
-const VolumeSlider = _ref5 => {
+export const VolumeSlider = _ref5 => {
   let {
     setVolume,
     compactModeThreshold,
@@ -136,18 +136,17 @@ const VolumeSlider = _ref5 => {
     unmutedIcon
   } = 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__*/_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__*/_jsx(VideoButton, {
       icon: videoIsMuted ? /*#__PURE__*/_jsx(Icon, {
@@ -165,7 +164,8 @@ const VolumeSlider = _ref5 => {
       max: "1",
       step: "any",
       value: videoCurrentVolume,
-      videoCurrentVolume: videoCurrentVolume,
+      $videoCurrentVolume: videoCurrentVolume,
+      $rangeBackground: rangeBackground,
       ref: refVolumeSlider,
       onChange: handleVolumeChange,
       onFocus: resetInactivityTimer,
@@ -186,5 +186,4 @@ VolumeSlider.propTypes = {
   compactModeThreshold: PropTypes.number.isRequired,
   videoPlayerWidth: PropTypes.number.isRequired,
   disableFocus: PropTypes.bool.isRequired
-};
-export default VolumeSlider;
+};