@telus-uds/components-web 3.1.0 → 3.2.1

package/lib/Table/Table.js

@@ -1,25 +1,29 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import styled from 'styled-components';
 import { selectSystemProps, useSafeLayoutEffect, useThemeTokens, getTokensPropType } from '@telus-uds/components-base';
 import throttle from 'lodash.throttle';
-import { htmlAttrs } from '../utils';
+import { htmlAttrs, styledComponents } from '../utils';
 import { jsx as _jsx } from "react/jsx-runtime";
+const {
+  styled
+} = styledComponents;
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([htmlAttrs]);
-const StyledContainer = /*#__PURE__*/styled.div.withConfig({
-  displayName: "Table__StyledContainer",
-  componentId: "components-web__sc-10d9q3m-0"
-})(["overflow:auto;padding-bottom:", ";"], props => props.isScrollable ? `${props.tablePaddingBottom}px` : 0);
-const StyledTable = /*#__PURE__*/styled.table.withConfig({
-  displayName: "Table__StyledTable",
-  componentId: "components-web__sc-10d9q3m-1"
-})(["margin:0;padding:0;width:", ";border:", ";"], _ref => {
+const StyledContainer = styled.div`
+  overflow: auto;
+  padding-bottom: ${props => props.isScrollable ? `${props.tablePaddingBottom}px` : 0};
+`;
+const StyledTable = styled.table`
+  margin: 0;
+  padding: 0;
+  width: ${_ref => {
   let {
     fullWidth,
     tableWidth
   } = _ref;
   return fullWidth ? '100%' : `${tableWidth}px`;
-}, props => `${props.borderWidth}px solid ${props.borderColor}`);
+}};
+  border: ${props => `${props.borderWidth}px solid ${props.borderColor}`};
+`;
 const TableContext = /*#__PURE__*/React.createContext({});
 export const useTableContext = () => React.useContext(TableContext);
 

package/lib/TermsAndConditions/ExpandCollapse.js

@@ -1,22 +1,19 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { ExpandCollapse as ExpandCollapseBase, IconButton, useThemeTokensCallback } from '@telus-uds/components-base';
-import styled from 'styled-components';
+import { styledComponents } from '../utils';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const ExpandCollapseControl = /*#__PURE__*/styled.div.withConfig({
-  displayName: "ExpandCollapse__ExpandCollapseControl",
-  componentId: "components-web__sc-1l2mmq7-0"
-})({
+const {
+  styled
+} = styledComponents;
+const ExpandCollapseControl = styled.div({
   alignItems: 'center',
   cursor: 'pointer',
   display: 'flex',
   flex: 1,
   justifyContent: 'flex-start'
 });
-const ExpandCollapseIconContainer = /*#__PURE__*/styled.div.withConfig({
-  displayName: "ExpandCollapse__ExpandCollapseIconContainer",
-  componentId: "components-web__sc-1l2mmq7-1"
-})(_ref => {
+const ExpandCollapseIconContainer = styled.div(_ref => {
   let {
     tokens
   } = _ref;
@@ -28,10 +25,7 @@ const ExpandCollapseIconContainer = /*#__PURE__*/styled.div.withConfig({
     width: tokens.expandIconContainerWidth
   };
 });
-const ExpandCollapseTitle = /*#__PURE__*/styled.h4.withConfig({
-  displayName: "ExpandCollapse__ExpandCollapseTitle",
-  componentId: "components-web__sc-1l2mmq7-2"
-})(_ref2 => {
+const ExpandCollapseTitle = styled.h4(_ref2 => {
   let {
     tokens
   } = _ref2;

package/lib/TermsAndConditions/TermsAndConditions.js

@@ -1,17 +1,16 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import styled from 'styled-components';
 import { Box, Divider, selectSystemProps, Typography, useCopy, useThemeTokens, useViewport, getTokensPropType, useTheme, useResponsiveThemeTokens, createMediaQueryStyles, StyleSheet } from '@telus-uds/components-base';
 import ExpandCollapse from './ExpandCollapse';
 import OrderedListBase from '../OrderedList/OrderedListBase';
-import { htmlAttrs, media, renderStructuredContent } from '../utils';
+import { htmlAttrs, media, renderStructuredContent, styledComponents } from '../utils';
 import defaultDictionary from './dictionary';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const {
+  styled
+} = styledComponents;
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([htmlAttrs]);
-const ContentContainer = /*#__PURE__*/styled.div.withConfig({
-  displayName: "TermsAndConditions__ContentContainer",
-  componentId: "components-web__sc-1199epn-0"
-})(_ref => {
+const ContentContainer = styled.div(_ref => {
   let {
     tokens
   } = _ref;
@@ -24,10 +23,7 @@ const ContentContainer = /*#__PURE__*/styled.div.withConfig({
     })
   };
 });
-const Ordered = /*#__PURE__*/styled(OrderedListBase).withConfig({
-  displayName: "TermsAndConditions__Ordered",
-  componentId: "components-web__sc-1199epn-1"
-})(_ref2 => {
+const Ordered = styled(OrderedListBase)(_ref2 => {
   let {
     tokens
   } = _ref2;
@@ -36,10 +32,7 @@ const Ordered = /*#__PURE__*/styled(OrderedListBase).withConfig({
     padding: tokens.orderedPadding
   };
 });
-const Unordered = /*#__PURE__*/styled.ul.withConfig({
-  displayName: "TermsAndConditions__Unordered",
-  componentId: "components-web__sc-1199epn-2"
-})(_ref3 => {
+const Unordered = styled.ul(_ref3 => {
   let {
     tokens
   } = _ref3;
@@ -50,10 +43,7 @@ const Unordered = /*#__PURE__*/styled.ul.withConfig({
     paddingTop: tokens.unorderedPadding
   };
 });
-const ListItem = /*#__PURE__*/styled(OrderedListBase.Item).withConfig({
-  displayName: "TermsAndConditions__ListItem",
-  componentId: "components-web__sc-1199epn-3"
-})(_ref4 => {
+const ListItem = styled(OrderedListBase.Item)(_ref4 => {
   let {
     tokens
   } = _ref4;
@@ -74,10 +64,7 @@ const ListItem = /*#__PURE__*/styled(OrderedListBase.Item).withConfig({
     wordBreak: 'break-word'
   };
 });
-const NonIndexedContentTitle = /*#__PURE__*/styled.div.withConfig({
-  displayName: "TermsAndConditions__NonIndexedContentTitle",
-  componentId: "components-web__sc-1199epn-4"
-})(_ref5 => {
+const NonIndexedContentTitle = styled.div(_ref5 => {
   let {
     tokens
   } = _ref5;

package/lib/Testimonial/Testimonial.js

@@ -1,15 +1,14 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import styled from 'styled-components';
 import { Icon, selectSystemProps, Typography, useThemeTokens, useViewport, getTokensPropType } from '@telus-uds/components-base';
 import Image from '../Image';
-import { htmlAttrs } from '../utils';
+import { htmlAttrs, styledComponents } from '../utils';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const {
+  styled
+} = styledComponents;
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([htmlAttrs]);
-const TestimonialContainer = /*#__PURE__*/styled.figure.withConfig({
-  displayName: "Testimonial__TestimonialContainer",
-  componentId: "components-web__sc-1az53gr-0"
-})(_ref => {
+const TestimonialContainer = styled.figure(_ref => {
   let {
     testimonialContainerGap
   } = _ref;
@@ -20,10 +19,7 @@ const TestimonialContainer = /*#__PURE__*/styled.figure.withConfig({
     margin: 0
   };
 });
-const QuoteContainer = /*#__PURE__*/styled.div.withConfig({
-  displayName: "Testimonial__QuoteContainer",
-  componentId: "components-web__sc-1az53gr-1"
-})(_ref2 => {
+const QuoteContainer = styled.div(_ref2 => {
   let {
     quoteContainerGap
   } = _ref2;
@@ -33,10 +29,7 @@ const QuoteContainer = /*#__PURE__*/styled.div.withConfig({
     gap: quoteContainerGap
   };
 });
-const Divider = /*#__PURE__*/styled.div.withConfig({
-  displayName: "Testimonial__Divider",
-  componentId: "components-web__sc-1az53gr-2"
-})(_ref3 => {
+const Divider = styled.div(_ref3 => {
   let {
     dividerBorder,
     dividerBackgroundColor
@@ -47,23 +40,14 @@ const Divider = /*#__PURE__*/styled.div.withConfig({
     width: '100%'
   };
 });
-const BlockQuote = /*#__PURE__*/styled.blockquote.withConfig({
-  displayName: "Testimonial__BlockQuote",
-  componentId: "components-web__sc-1az53gr-3"
-})({
+const BlockQuote = styled.blockquote({
   margin: 0
 });
-const AuthorInfoContainer = /*#__PURE__*/styled.div.withConfig({
-  displayName: "Testimonial__AuthorInfoContainer",
-  componentId: "components-web__sc-1az53gr-4"
-})({
+const AuthorInfoContainer = styled.div({
   display: 'flex',
   flexDirection: 'column'
 });
-const Figcaption = /*#__PURE__*/styled.figcaption.withConfig({
-  displayName: "Testimonial__Figcaption",
-  componentId: "components-web__sc-1az53gr-5"
-})(_ref4 => {
+const Figcaption = styled.figcaption(_ref4 => {
   let {
     figcaptionGap
   } = _ref4;

package/lib/Toast/Toast.js

@@ -2,40 +2,91 @@ var _withLinkRouter$propT, _withLinkRouter$propT2;
 import React from 'react';
 import PropTypes from 'prop-types';
 import { ChevronLink, selectSystemProps, useThemeTokens, Typography, withLinkRouter, Spacer, useViewport, getTokensPropType } from '@telus-uds/components-base';
-import styled, { keyframes, css } from 'styled-components';
-import { htmlAttrs } from '../utils';
+import { htmlAttrs, styledComponents } from '../utils';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const {
+  styled,
+  css,
+  keyframes
+} = styledComponents;
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([htmlAttrs]);
-const transform = property => (from, to) => keyframes(["from{", ":", ";}to{", ":", ";}"], property, from, property, to);
+const transform = property => (from, to) => keyframes`
+  from {
+    ${property}: ${from};
+  }
+  to {
+    ${property}: ${to};
+  }
+`;
 const slideDown = property => function (from, to) {
   let end = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : to;
-  return keyframes(["0%{", ":", ";}99%{", ":", ";}100%{", ":", ";}"], property, from, property, to, property, end);
+  return keyframes`
+  0% {
+    ${property}: ${from};
+  }
+  99% {
+    ${property}: ${to};
+  }
+  100% {
+    ${property}: ${end};
+  }
+`;
 };
-const animation = props => css(["", " 1s ease-in-out 2s forwards,", " 1s ease-in-out 2s forwards,", " 1s ease-in-out 2s forwards,", " 1s ease-in-out 3.2s forwards;& *{animation:", " 1s ease-in-out 3s forwards;}& > a div{animation:", " 1s ease-in-out 3s forwards;}& > a svg{animation:", " 1s ease-in-out 3s forwards;}& > a div{animation:", " 1s ease-in-out 3s forwards;}"], slideDown('height')(`${props.animationHeightBefore}px`, `${props.animationHeightAfter}px`, 'auto'), transform('padding-bottom')(`${props.animationPaddingBottomBefore}px`, `${props.animationPaddingBottomAfter}px`), transform('padding-top')(`${props.animationPaddingTopBefore}px`, `${props.animationPaddingTopAfter}px`), transform('background')(props.animationBackgroundColorBefore, props.animationBackgroundColorAfter), transform('color')(props.animationColorBefore, props.animationColorAfter), transform('color')(props.animationDivColorBefore, props.animationDivColorAfter), transform('fill')(props.animationFillColorBefore, props.animationFillColorAfter), transform('color')(props.animationFillColorBefore, props.animationFillColorAfter));
-const ToastContainer = /*#__PURE__*/styled.div.withConfig({
-  displayName: "Toast__ToastContainer",
-  componentId: "components-web__sc-p78jdh-0"
-})(["display:flex;justify-content:center;align-items:center;flex-wrap:wrap;padding-left:", "px;padding-right:", "px;background:", ";gap:", ";height:0;overflow:hidden;animation:", ";"], _ref => {
+const animation = props => css`
+  ${slideDown('height')(`${props.animationHeightBefore}px`, `${props.animationHeightAfter}px`, 'auto')} 1s ease-in-out 2s forwards,
+    ${transform('padding-bottom')(`${props.animationPaddingBottomBefore}px`, `${props.animationPaddingBottomAfter}px`)} 1s ease-in-out 2s forwards,
+    ${transform('padding-top')(`${props.animationPaddingTopBefore}px`, `${props.animationPaddingTopAfter}px`)} 1s ease-in-out 2s forwards,
+    ${transform('background')(props.animationBackgroundColorBefore, props.animationBackgroundColorAfter)} 1s ease-in-out 3.2s forwards;
+  & * {
+    animation: ${transform('color')(props.animationColorBefore, props.animationColorAfter)} 1s
+      ease-in-out 3s forwards;
+  }
+  & > a div {
+    animation: ${transform('color')(props.animationDivColorBefore, props.animationDivColorAfter)} 1s
+      ease-in-out 3s forwards;
+  }
+  & > a svg {
+    animation: ${transform('fill')(props.animationFillColorBefore, props.animationFillColorAfter)}
+      1s ease-in-out 3s forwards;
+  }
+  & > a div {
+    animation: ${transform('color')(props.animationFillColorBefore, props.animationFillColorAfter)}
+      1s ease-in-out 3s forwards;
+  }
+`;
+const ToastContainer = styled.div`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-wrap: wrap;
+  padding-left: ${_ref => {
   let {
     padding
   } = _ref;
   return padding;
-}, _ref2 => {
+}}px;
+  padding-right: ${_ref2 => {
   let {
     padding
   } = _ref2;
   return padding;
-}, _ref3 => {
+}}px;
+  background: ${_ref3 => {
   let {
     containerBackgroundColor
   } = _ref3;
   return containerBackgroundColor;
-}, _ref4 => {
+}};
+  gap: ${_ref4 => {
   let {
     containerGap
   } = _ref4;
   return containerGap;
-}, animation);
+}};
+  height: 0;
+  overflow: hidden;
+  animation: ${animation};
+`;
 const Toast = /*#__PURE__*/React.forwardRef((_ref5, ref) => {
   let {
     toast,

package/lib/Video/ControlBar/ControlBar.js

@@ -1,22 +1,21 @@
 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 { htmlAttrs, styledComponents } from '../../utils';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const {
+  styled
+} = styledComponents;
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([htmlAttrs]);
 const getIcon = icon => /*#__PURE__*/_jsx(Icon, {
   icon: icon
 });
-const ControlBarContainer = /*#__PURE__*/styled.div.withConfig({
-  displayName: "ControlBar__ControlBarContainer",
-  componentId: "components-web__sc-13y61ky-0"
-})(_ref => {
+const ControlBarContainer = styled.div(_ref => {
   let {
     isHidden,
     isMobile
@@ -29,10 +28,7 @@ const ControlBarContainer = /*#__PURE__*/styled.div.withConfig({
     display: isMobile ? 'none' : undefined
   };
 });
-const StyledControlBar = /*#__PURE__*/styled.div.withConfig({
-  displayName: "ControlBar__StyledControlBar",
-  componentId: "components-web__sc-13y61ky-1"
-})(_ref2 => {
+const StyledControlBar = styled.div(_ref2 => {
   let {
     padding,
     height
@@ -52,17 +48,11 @@ const StyledControlBar = /*#__PURE__*/styled.div.withConfig({
     zIndex: 9
   };
 });
-const VideoProgressBarContainer = /*#__PURE__*/styled.div.withConfig({
-  displayName: "ControlBar__VideoProgressBarContainer",
-  componentId: "components-web__sc-13y61ky-2"
-})({
+const VideoProgressBarContainer = styled.div({
   display: 'flex',
   flexGrow: 1
 });
-const MenuContainer = /*#__PURE__*/styled.div.withConfig({
-  displayName: "ControlBar__MenuContainer",
-  componentId: "components-web__sc-13y61ky-3"
-})(_ref3 => {
+const MenuContainer = styled.div(_ref3 => {
   let {
     isOpen,
     menuBottom,

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

@@ -1,14 +1,13 @@
 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 { htmlAttrs, styledComponents } from '../../../../utils';
 import { jsxs as _jsxs } from "react/jsx-runtime";
+const {
+  styled
+} = styledComponents;
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([htmlAttrs]);
-const StyledButton = /*#__PURE__*/styled.button.withConfig({
-  displayName: "VideoButton__StyledButton",
-  componentId: "components-web__sc-kfw0tr-0"
-})(_ref => {
+const StyledButton = styled.button(_ref => {
   let {
     color
   } = _ref;

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

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

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

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

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

@@ -1,16 +1,15 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import styled from 'styled-components';
 import { Icon, useThemeTokens, selectSystemProps } from '@telus-uds/components-base';
 import VideoButton from '../VideoButton/VideoButton';
 import videoText from '../../../videoText';
-import { htmlAttrs } from '../../../../utils';
+import { htmlAttrs, styledComponents } from '../../../../utils';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const {
+  styled
+} = styledComponents;
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([htmlAttrs]);
-const VolumeSliderContainer = /*#__PURE__*/styled.div.withConfig({
-  displayName: "VolumeSlider__VolumeSliderContainer",
-  componentId: "components-web__sc-apixz4-0"
-})(_ref => {
+const VolumeSliderContainer = styled.div(_ref => {
   let {
     videoPlayerWidth,
     compactModeThreshold,
@@ -54,16 +53,13 @@ const sharedStyles = _ref2 => {
     })
   };
 };
-const StyledVolumeSlider = /*#__PURE__*/styled.input.attrs(_ref3 => {
+const StyledVolumeSlider = 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/MiddleControlButton/MiddleControlButton.js

@@ -1,14 +1,13 @@
 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 { htmlAttrs, styledComponents } from '../../utils';
 import { jsx as _jsx } from "react/jsx-runtime";
+const {
+  styled
+} = styledComponents;
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([htmlAttrs]);
-const StyledMiddleControlButton = /*#__PURE__*/styled.button.withConfig({
-  displayName: "MiddleControlButton__StyledMiddleControlButton",
-  componentId: "components-web__sc-1um2s37-0"
-})(_ref => {
+const StyledMiddleControlButton = styled.button(_ref => {
   let {
     isHidden,
     width,

package/lib/Video/Video.js

@@ -1,22 +1,21 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import styled from 'styled-components';
 import fscreen from 'fscreen';
 import { useThemeTokens, selectSystemProps, getTokensPropType, variantProp } from '@telus-uds/components-base';
 import Spinner from '../Spinner';
-import { warn, htmlAttrs } from '../utils';
+import { warn, htmlAttrs, styledComponents } 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 = /*#__PURE__*/styled.div.withConfig({
-  displayName: "Video__VideoPlayerContainer",
-  componentId: "components-web__sc-12ltnuw-0"
-})(_ref => {
+const VideoPlayerContainer = styled.div(_ref => {
   let {
     videoBorder,
     borderColor
@@ -28,26 +27,17 @@ const VideoPlayerContainer = /*#__PURE__*/styled.div.withConfig({
     border: videoBorder ? `20px solid ${borderColor}` : undefined
   };
 });
-const VideoElementContainer = /*#__PURE__*/styled.div.withConfig({
-  displayName: "Video__VideoElementContainer",
-  componentId: "components-web__sc-12ltnuw-1"
-})({
+const VideoElementContainer = styled.div({
   outline: 'none',
   width: '100%',
   height: '100%',
   fontSize: 0
 });
-const VideoPlayer = /*#__PURE__*/styled.video.withConfig({
-  displayName: "Video__VideoPlayer",
-  componentId: "components-web__sc-12ltnuw-2"
-})({
+const VideoPlayer = styled.video({
   width: '100%',
   height: '100%'
 });
-const VideoOverlayContainer = /*#__PURE__*/styled.div.withConfig({
-  displayName: "Video__VideoOverlayContainer",
-  componentId: "components-web__sc-12ltnuw-3"
-})(_ref2 => {
+const VideoOverlayContainer = styled.div(_ref2 => {
   let {
     mouseInactive
   } = _ref2;
@@ -58,19 +48,13 @@ const VideoOverlayContainer = /*#__PURE__*/styled.div.withConfig({
     cursor: mouseInactive ? 'none' : 'pointer'
   };
 });
-const VideoSplashContainer = /*#__PURE__*/styled.div.withConfig({
-  displayName: "Video__VideoSplashContainer",
-  componentId: "components-web__sc-12ltnuw-4"
-})({
+const VideoSplashContainer = styled.div({
   position: 'absolute',
   width: '100%',
   height: '100%',
   zIndex: 5
 });
-const VideoOverlayElementContainer = /*#__PURE__*/styled.div.withConfig({
-  displayName: "Video__VideoOverlayElementContainer",
-  componentId: "components-web__sc-12ltnuw-5"
-})({
+const VideoOverlayElementContainer = styled.div({
   position: 'absolute',
   zIndex: 4,
   display: 'flex',