@telus-uds/components-web 3.4.0 → 4.1.0

package/lib/{Video → esm/Video}/ControlBar/Controls/VideoButton/VideoButton.js

@@ -1,13 +1,14 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { useThemeTokens, selectSystemProps } from '@telus-uds/components-base';
-import { htmlAttrs, styledComponents } from '../../../../utils';
+import styled from 'styled-components';
+import { htmlAttrs } from '../../../../utils';
 import { jsxs as _jsxs } from "react/jsx-runtime";
-const {
-  styled
-} = styledComponents;
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([htmlAttrs]);
-const StyledButton = styled.button(_ref => {
+const StyledButton = /*#__PURE__*/styled.button.withConfig({
+  displayName: "VideoButton__StyledButton",
+  componentId: "components-web__sc-kfw0tr-0"
+})(_ref => {
   let {
     color
   } = _ref;

package/lib/{Video → esm/Video}/ControlBar/Controls/VideoMenu/VideoMenu.js

@@ -1,14 +1,15 @@
 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 { htmlAttrs, styledComponents } from '../../../../utils';
+import { htmlAttrs } from '../../../../utils';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const {
-  styled
-} = styledComponents;
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([htmlAttrs]);
-const MenuContainer = styled.div(_ref => {
+const MenuContainer = /*#__PURE__*/styled.div.withConfig({
+  displayName: "VideoMenu__MenuContainer",
+  componentId: "components-web__sc-nllbhw-0"
+})(_ref => {
   let {
     padding,
     background
@@ -20,7 +21,10 @@ const MenuContainer = styled.div(_ref => {
     borderRadius: 5
   };
 });
-const MenuButton = styled.button({
+const MenuButton = /*#__PURE__*/styled.button.withConfig({
+  displayName: "VideoMenu__MenuButton",
+  componentId: "components-web__sc-nllbhw-1"
+})({
   background: 'none',
   border: 'none',
   padding: 0,
@@ -30,7 +34,10 @@ const MenuButton = styled.button({
   justifyContent: 'space-between',
   verticalAlign: 'middle'
 });
-const CheckmarkContainer = styled.div(_ref2 => {
+const CheckmarkContainer = /*#__PURE__*/styled.div.withConfig({
+  displayName: "VideoMenu__CheckmarkContainer",
+  componentId: "components-web__sc-nllbhw-2"
+})(_ref2 => {
   let {
     isSelectedItem,
     checkMarkWidth,

package/lib/{Video → esm/Video}/ControlBar/Controls/VideoProgressBar/VideoProgressBar.js

@@ -1,14 +1,15 @@
 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 { htmlAttrs, styledComponents } from '../../../../utils';
+import { htmlAttrs } from '../../../../utils';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const {
-  styled
-} = styledComponents;
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([htmlAttrs]);
-const ProgressBarContainer = styled.div({
+const ProgressBarContainer = /*#__PURE__*/styled.div.withConfig({
+  displayName: "VideoProgressBar__ProgressBarContainer",
+  componentId: "components-web__sc-d9tm07-0"
+})({
   display: 'flex',
   width: '100%',
   alignItems: 'center'
@@ -43,13 +44,16 @@ const sharedStyles = _ref => {
     })
   };
 };
-const StyledProgressBar = styled.input.attrs(_ref2 => {
+const StyledProgressBar = /*#__PURE__*/styled.input.attrs(_ref2 => {
   let {
     videoCurrentTime
   } = _ref2;
   return {
     value: videoCurrentTime
   };
+}).withConfig({
+  displayName: "VideoProgressBar__StyledProgressBar",
+  componentId: "components-web__sc-d9tm07-1"
 })(_ref3 => {
   let {
     videoBufferDisplay,
@@ -93,7 +97,10 @@ const StyledProgressBar = styled.input.attrs(_ref2 => {
     }
   };
 });
-const StyledTimestamp = styled.span(_ref4 => {
+const StyledTimestamp = /*#__PURE__*/styled.span.withConfig({
+  displayName: "VideoProgressBar__StyledTimestamp",
+  componentId: "components-web__sc-d9tm07-2"
+})(_ref4 => {
   let {
     margin
   } = _ref4;

package/lib/{Video → esm/Video}/ControlBar/Controls/VolumeSlider/VolumeSlider.js

@@ -1,15 +1,16 @@
 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 { htmlAttrs, styledComponents } from '../../../../utils';
+import { htmlAttrs } from '../../../../utils';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const {
-  styled
-} = styledComponents;
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([htmlAttrs]);
-const VolumeSliderContainer = styled.div(_ref => {
+const VolumeSliderContainer = /*#__PURE__*/styled.div.withConfig({
+  displayName: "VolumeSlider__VolumeSliderContainer",
+  componentId: "components-web__sc-apixz4-0"
+})(_ref => {
   let {
     videoPlayerWidth,
     compactModeThreshold,
@@ -53,13 +54,16 @@ const sharedStyles = _ref2 => {
     })
   };
 };
-const StyledVolumeSlider = styled.input.attrs(_ref3 => {
+const StyledVolumeSlider = /*#__PURE__*/styled.input.attrs(_ref3 => {
   let {
     videoCurrentVolume
   } = _ref3;
   return {
     value: videoCurrentVolume
   };
+}).withConfig({
+  displayName: "VolumeSlider__StyledVolumeSlider",
+  componentId: "components-web__sc-apixz4-1"
 })(_ref4 => {
   let {
     videoCurrentVolume,

package/lib/{Video → esm/Video}/MiddleControlButton/MiddleControlButton.js

@@ -1,13 +1,14 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { useThemeTokens, selectSystemProps } from '@telus-uds/components-base';
-import { htmlAttrs, styledComponents } from '../../utils';
+import styled from 'styled-components';
+import { htmlAttrs } from '../../utils';
 import { jsx as _jsx } from "react/jsx-runtime";
-const {
-  styled
-} = styledComponents;
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([htmlAttrs]);
-const StyledMiddleControlButton = styled.button(_ref => {
+const StyledMiddleControlButton = /*#__PURE__*/styled.button.withConfig({
+  displayName: "MiddleControlButton__StyledMiddleControlButton",
+  componentId: "components-web__sc-1um2s37-0"
+})(_ref => {
   let {
     isHidden,
     width,

package/lib/{Video → esm/Video}/Video.js

@@ -1,21 +1,22 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import fscreen from 'fscreen';
+import styled from 'styled-components';
 import { useThemeTokens, selectSystemProps, getTokensPropType, variantProp } from '@telus-uds/components-base';
 import Spinner from '../Spinner';
-import { warn, htmlAttrs, styledComponents } from '../utils';
+import { warn, htmlAttrs } from '../utils';
 import VideoSplash from '../shared/VideoSplash/VideoSplash';
 import MiddleControlButton from './MiddleControlButton/MiddleControlButton';
 import ControlBar from './ControlBar/ControlBar';
 import videoText from './videoText';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const {
-  styled
-} = styledComponents;
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([htmlAttrs]);
 
 // TODO: replace with the actual spinner component from UDS
-const VideoPlayerContainer = styled.div(_ref => {
+const VideoPlayerContainer = /*#__PURE__*/styled.div.withConfig({
+  displayName: "Video__VideoPlayerContainer",
+  componentId: "components-web__sc-12ltnuw-0"
+})(_ref => {
   let {
     videoBorder,
     borderColor
@@ -27,17 +28,26 @@ const VideoPlayerContainer = styled.div(_ref => {
     border: videoBorder ? `20px solid ${borderColor}` : undefined
   };
 });
-const VideoElementContainer = styled.div({
+const VideoElementContainer = /*#__PURE__*/styled.div.withConfig({
+  displayName: "Video__VideoElementContainer",
+  componentId: "components-web__sc-12ltnuw-1"
+})({
   outline: 'none',
   width: '100%',
   height: '100%',
   fontSize: 0
 });
-const VideoPlayer = styled.video({
+const VideoPlayer = /*#__PURE__*/styled.video.withConfig({
+  displayName: "Video__VideoPlayer",
+  componentId: "components-web__sc-12ltnuw-2"
+})({
   width: '100%',
   height: '100%'
 });
-const VideoOverlayContainer = styled.div(_ref2 => {
+const VideoOverlayContainer = /*#__PURE__*/styled.div.withConfig({
+  displayName: "Video__VideoOverlayContainer",
+  componentId: "components-web__sc-12ltnuw-3"
+})(_ref2 => {
   let {
     mouseInactive
   } = _ref2;
@@ -48,13 +58,19 @@ const VideoOverlayContainer = styled.div(_ref2 => {
     cursor: mouseInactive ? 'none' : 'pointer'
   };
 });
-const VideoSplashContainer = styled.div({
+const VideoSplashContainer = /*#__PURE__*/styled.div.withConfig({
+  displayName: "Video__VideoSplashContainer",
+  componentId: "components-web__sc-12ltnuw-4"
+})({
   position: 'absolute',
   width: '100%',
   height: '100%',
   zIndex: 5
 });
-const VideoOverlayElementContainer = styled.div({
+const VideoOverlayElementContainer = /*#__PURE__*/styled.div.withConfig({
+  displayName: "Video__VideoOverlayElementContainer",
+  componentId: "components-web__sc-12ltnuw-5"
+})({
   position: 'absolute',
   zIndex: 4,
   display: 'flex',

package/lib/{VideoPicker → esm/VideoPicker}/VideoPicker.js

@@ -2,16 +2,13 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { viewports } from '@telus-uds/system-constants';
 import { selectSystemProps, StackView, useThemeTokens, useViewport, getTokensPropType } from '@telus-uds/components-base';
+import styled, { css } from 'styled-components';
 import { VideoPropType } from './videoPropType';
 import VideoPickerThumbnail from './VideoPickerThumbnail';
 import VideoPickerPlayer from './VideoPickerPlayer';
 import VideoSlider from './VideoSlider';
-import { htmlAttrs, styledComponents } from '../utils';
+import { htmlAttrs } from '../utils';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const {
-  styled,
-  css
-} = styledComponents;
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([htmlAttrs]);
 const framedContainerStyles = _ref => {
   let {
@@ -21,66 +18,45 @@ const framedContainerStyles = _ref => {
     framedContainerBorderRadius,
     framedMaxHeight
   } = _ref;
-  return css`
-  background-color: ${framedContainerBackgroundColor};
-  border: ${framedContainerBorderWidth}px solid ${framedContainerBorderColor};
-  border-radius: ${framedContainerBorderRadius}px;
-
-  & > div {
-    max-height: ${framedMaxHeight}px;
-  }
-`;
+  return css(["background-color:", ";border:", "px solid ", ";border-radius:", "px;& > div{max-height:", "px;}"], framedContainerBackgroundColor, framedContainerBorderWidth, framedContainerBorderColor, framedContainerBorderRadius, framedMaxHeight);
 };
-const VideoPickerContainer = styled.div`
-  ${_ref2 => {
+const VideoPickerContainer = /*#__PURE__*/styled.div.withConfig({
+  displayName: "VideoPicker__VideoPickerContainer",
+  componentId: "components-web__sc-x6lxp0-0"
+})(["", ""], _ref2 => {
   let {
     isFramed,
     ...tokens
   } = _ref2;
   return isFramed && framedContainerStyles(tokens);
-}}
-`;
+});
 const framedPlayerContainerStyles = _ref3 => {
   let {
     framedMaxHeight,
     framedContainerPadding
   } = _ref3;
-  return css`
-  width: 66.67%;
-  padding: ${framedContainerPadding}px;
-  max-height: ${framedMaxHeight}px;
-  flex-shrink: 0;
-  box-sizing: border-box;
-`;
+  return css(["width:66.67%;padding:", "px;max-height:", "px;flex-shrink:0;box-sizing:border-box;"], framedContainerPadding, framedMaxHeight);
 };
-const VideoPlayerContainer = styled.div`
-  ${_ref4 => {
+const VideoPlayerContainer = /*#__PURE__*/styled.div.withConfig({
+  displayName: "VideoPicker__VideoPlayerContainer",
+  componentId: "components-web__sc-x6lxp0-1"
+})(["", " overflow:auto;"], _ref4 => {
   let {
     isFramed,
     ...tokens
   } = _ref4;
   return isFramed && framedPlayerContainerStyles(tokens);
-}}
-  overflow: auto;
-`;
-const framedVideoListContainerStyle = css`
-  max-height: ${_ref5 => {
+});
+const framedVideoListContainerStyle = /*#__PURE__*/css(["max-height:", "px;overflow:auto;flex-direction:column;"], _ref5 => {
   let {
     framedMaxHeight
   } = _ref5;
   return framedMaxHeight;
-}}px;
-  overflow: auto;
-  flex-direction: column;
-`;
-const VideoListContainer = styled.div`
-  display: flex;
-  justify-content: flex-start;
-  position: relative;
-  flex-grow: 1;
-  flex-direction: column;
-  ${props => props.isFramed && framedVideoListContainerStyle}
-`;
+});
+const VideoListContainer = /*#__PURE__*/styled.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.forwardRef((_ref6, ref) => {
   let {
     videoList = [],

package/lib/{VideoPicker → esm/VideoPicker}/VideoPickerThumbnail.js

@@ -4,14 +4,11 @@ import StyleSheet from "react-native-web/dist/exports/StyleSheet";
 import PropTypes from 'prop-types';
 import { viewports } from '@telus-uds/system-constants';
 import { StackView, Typography, useViewport, horizontalScrollUtils, useThemeTokensCallback } from '@telus-uds/components-base';
-import { styledComponents } from '../utils';
+import styled from 'styled-components';
 import { getTimestamp } from '../shared/VideoSplash/helpers';
 import { VideoPropType, RefPropType } from './videoPropType';
 import VideoSplash from '../shared/VideoSplash/VideoSplash';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const {
-  styled
-} = styledComponents;
 const {
   getItemPositionLayoutHandler,
   itemPositionsPropType
@@ -44,74 +41,43 @@ const createReactNativeStyles = _ref => {
     }
   });
 };
-const ImageContainer = styled.div`
-  padding: ${props => `${props.outerBorderGap}px`};
-  border: ${props => `${props.outerBorderWidth}px solid ${props.outerBorderColor}`};
-  border-radius: ${_ref2 => {
+const ImageContainer = /*#__PURE__*/styled.div.withConfig({
+  displayName: "VideoPickerThumbnail__ImageContainer",
+  componentId: "components-web__sc-1glxurq-0"
+})(["padding:", ";border:", ";border-radius:", "px;"], props => `${props.outerBorderGap}px`, props => `${props.outerBorderWidth}px solid ${props.outerBorderColor}`, _ref2 => {
   let {
     outerBorderRadius
   } = _ref2;
   return outerBorderRadius;
-}}px;
-`;
-const VideoThumbnail = styled.div`
-  position: relative;
-  width: ${props => props.layout === 'vertical' ? '100%' : '144px'};
-  flex-shrink: 0;
-
-  * button {
-    display: none;
-  }
-
-  // use a pseudo-element to ensure aspect ratio
-  &::before {
-    content: '';
-    display: block;
-    padding-bottom: 56.25%;
-  }
-
-  &::after {
-    content: '';
-    border: ${_ref3 => {
+});
+const VideoThumbnail = /*#__PURE__*/styled.div.withConfig({
+  displayName: "VideoPickerThumbnail__VideoThumbnail",
+  componentId: "components-web__sc-1glxurq-1"
+})(["position:relative;width:", ";flex-shrink:0;* button{display:none;}&::before{content:'';display:block;padding-bottom:56.25%;}&::after{content:'';border:", "px solid;border-color:", ";border-radius:", "px;position:absolute;top:0;left:0;right:0;bottom:0;}& > div{border-radius:", "px;}"], props => props.layout === 'vertical' ? '100%' : '144px', _ref3 => {
   let {
     borderWidth
   } = _ref3;
   return borderWidth;
-}}px solid;
-    border-color: ${_ref4 => {
+}, _ref4 => {
   let {
     borderColor
   } = _ref4;
   return borderColor;
-}};
-    border-radius: ${_ref5 => {
+}, _ref5 => {
   let {
     borderRadius
   } = _ref5;
   return borderRadius;
-}}px;
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-  }
-
-  & > div {
-    border-radius: ${_ref6 => {
+}, _ref6 => {
   let {
     borderRadius
   } = _ref6;
   return borderRadius;
-}}px;
-  }
-`;
-const ThumbnailTitleContainer = styled.div`
-  display: -webkit-box;
-  -webkit-line-clamp: 2;
-  -webkit-box-orient: vertical;
-  overflow: hidden;
-`;
+});
+const ThumbnailTitleContainer = /*#__PURE__*/styled.div.withConfig({
+  displayName: "VideoPickerThumbnail__ThumbnailTitleContainer",
+  componentId: "components-web__sc-1glxurq-2"
+})(["display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;"]);
 const VideoPickerThumbnail = /*#__PURE__*/React.forwardRef((_ref7, ref) => {
   let {
     videoPlayerRef,

package/lib/{WaffleGrid → esm/WaffleGrid}/WaffleGrid.js

@@ -1,14 +1,12 @@
 import React, { createElement as _createElement } from 'react';
 import PropTypes from 'prop-types';
 import { Link, responsiveProps, selectSystemProps, useResponsiveProp, useThemeTokens, withLinkRouter, useViewport, Typography, getTokensPropType } from '@telus-uds/components-base';
+import styled from 'styled-components';
 import OrderedListBase from '../OrderedList/OrderedListBase';
 import ItemBase from '../OrderedList/ItemBase';
 import Image from '../Image';
-import { htmlAttrs, styledComponents } from '../utils';
+import { htmlAttrs } from '../utils';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const {
-  styled
-} = styledComponents;
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([htmlAttrs]);
 const row = (rowSize, rowBorderWidth) => ({
   flexBasis: `calc(100% / ${rowSize})`,
@@ -19,13 +17,19 @@ const row = (rowSize, rowBorderWidth) => ({
     borderTopWidth: `${rowBorderWidth}px`
   }
 });
-const Container = styled(OrderedListBase)({
+const Container = /*#__PURE__*/styled(OrderedListBase).withConfig({
+  displayName: "WaffleGrid__Container",
+  componentId: "components-web__sc-ec8g0a-0"
+})({
   display: 'flex',
   flexDirection: 'row',
   flexWrap: 'wrap',
   justifyContent: 'flex-start'
 });
-const Item = styled(ItemBase)(_ref => {
+const Item = /*#__PURE__*/styled(ItemBase).withConfig({
+  displayName: "WaffleGrid__Item",
+  componentId: "components-web__sc-ec8g0a-1"
+})(_ref => {
   let {
     rowSize,
     itemPadding,
@@ -50,7 +54,10 @@ const Item = styled(ItemBase)(_ref => {
     ...row(rowSize, rowBorderWidth)
   };
 });
-const Center = styled('div')({
+const Center = /*#__PURE__*/styled('div').withConfig({
+  displayName: "WaffleGrid__Center",
+  componentId: "components-web__sc-ec8g0a-2"
+})({
   display: 'flex',
   flexDirection: 'column',
   alignItems: 'center',

package/lib/{WebVideo → esm/WebVideo}/WebVideo.js

@@ -2,22 +2,24 @@ import { selectSystemProps } from '@telus-uds/components-base';
 import PropTypes from 'prop-types';
 import React from 'react';
 import YouTube from 'react-youtube';
+import styled from 'styled-components';
 import VideoSplash from '../shared/VideoSplash/VideoSplash';
-import { htmlAttrs, styledComponents } from '../utils';
+import { htmlAttrs } from '../utils';
 import { triggerInProgressVideoIntervals, YoutubePlayerState } from './utils';
 import { jsx as _jsx } from "react/jsx-runtime";
-const {
-  styled
-} = styledComponents;
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([htmlAttrs]);
-const StyledPlayerContainer = styled.div({
+const StyledPlayerContainer = /*#__PURE__*/styled.div.withConfig({
+  displayName: "WebVideo__StyledPlayerContainer",
+  componentId: "components-web__sc-327a6k-0"
+})({
   width: '100%',
   minWidth: 288,
   outline: 'none'
 });
-const StyledYoutubePlayer = styled(props => /*#__PURE__*/_jsx(YouTube, {
-  ...props
-}))({
+const StyledYoutubePlayer = /*#__PURE__*/styled(YouTube).withConfig({
+  displayName: "WebVideo__StyledYoutubePlayer",
+  componentId: "components-web__sc-327a6k-1"
+})({
   position: 'absolute',
   top: 0,
   left: 0,
@@ -35,7 +37,10 @@ const aspectRatios = {
     paddingTop: '100%'
   }
 };
-const AspectLimiter = styled.div(props => ({
+const AspectLimiter = /*#__PURE__*/styled.div.withConfig({
+  displayName: "WebVideo__AspectLimiter",
+  componentId: "components-web__sc-327a6k-2"
+})(props => ({
   ...aspectRatios[props.aspectRatio],
   position: 'relative'
 }));

package/lib/{index.js → esm/index.js}

@@ -35,5 +35,5 @@ export { default as TermsAndConditions } from './TermsAndConditions';
 export { default as NavigationBar } from './NavigationBar';
 export { default as Progress } from './Progress';
 export { default as SkeletonProvider } from './SkeletonProvider';
-export { ssrStyles, styledComponents } from './utils';
+export { ssrStyles } from './utils';
 export * from './baseExports';

package/lib/{shared → esm/shared}/FullBleedContent/FullBleedContent.js

@@ -1,11 +1,8 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { styledComponents } from '../../utils';
+import styled from 'styled-components';
 import ResponsiveImage from '../../ResponsiveImage';
 import { jsx as _jsx } from "react/jsx-runtime";
-const {
-  styled
-} = styledComponents;
 const selectFullBleedContentProps = _ref => {
   let {
     alt,
@@ -34,7 +31,10 @@ const selectFullBleedContentProps = _ref => {
     xsSrc
   };
 };
-const FullBleedContentContainer = styled.div(_ref2 => {
+const FullBleedContentContainer = /*#__PURE__*/styled.div.withConfig({
+  displayName: "FullBleedContent__FullBleedContentContainer",
+  componentId: "components-web__sc-1130ea5-0"
+})(_ref2 => {
   let {
     borderBottomLeftRadius,
     borderBottomRightRadius,

package/lib/{shared → esm/shared}/VideoSplash/SplashButton/SplashButton.js

@@ -1,13 +1,13 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { useThemeTokens } from '@telus-uds/components-base';
-import { styledComponents } from '../../../utils';
+import styled from 'styled-components';
 import { getAriaLabel, getTimestamp } from '../helpers';
 import { jsx as _jsx } from "react/jsx-runtime";
-const {
-  styled
-} = styledComponents;
-const ButtonContainer = styled.button({
+const ButtonContainer = /*#__PURE__*/styled.button.withConfig({
+  displayName: "SplashButton__ButtonContainer",
+  componentId: "components-web__sc-1oe22fk-0"
+})({
   background: 'none',
   border: 0,
   padding: 0,
@@ -19,7 +19,10 @@ const ButtonContainer = styled.button({
   alignItems: 'center',
   cursor: 'pointer'
 });
-const ButtonContent = styled.div({
+const ButtonContent = /*#__PURE__*/styled.div.withConfig({
+  displayName: "SplashButton__ButtonContent",
+  componentId: "components-web__sc-1oe22fk-1"
+})({
   display: 'flex',
   justifyContent: 'center',
   alignItems: 'center',