@telus-uds/components-web 3.4.0 → 4.0.0

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',

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

@@ -1,13 +1,13 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { Typography, useThemeTokens } from '@telus-uds/components-base';
-import { styledComponents } from '../../../utils';
+import styled from 'styled-components';
 import { getAriaLabel, getTimestamp } from '../helpers';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const {
-  styled
-} = styledComponents;
-const ButtonContainer = styled.button({
+const ButtonContainer = /*#__PURE__*/styled.button.withConfig({
+  displayName: "SplashButtonWithDetails__ButtonContainer",
+  componentId: "components-web__sc-1edwy9o-0"
+})({
   background: 'none',
   border: 0,
   position: 'absolute',
@@ -16,7 +16,10 @@ const ButtonContainer = styled.button({
   padding: 0,
   cursor: 'pointer'
 });
-const ButtonContent = styled.div({
+const ButtonContent = /*#__PURE__*/styled.div.withConfig({
+  displayName: "SplashButtonWithDetails__ButtonContent",
+  componentId: "components-web__sc-1edwy9o-1"
+})({
   background: _ref => {
     let {
       buttonBackground
@@ -79,7 +82,10 @@ const ButtonContent = styled.div({
     }
   }
 });
-const PlayIconContainer = styled.div({
+const PlayIconContainer = /*#__PURE__*/styled.div.withConfig({
+  displayName: "SplashButtonWithDetails__PlayIconContainer",
+  componentId: "components-web__sc-1edwy9o-2"
+})({
   display: 'flex',
   justifyContent: 'center',
   alignItems: 'center',
@@ -94,7 +100,10 @@ const PlayIconContainer = styled.div({
   borderRadius: '100%',
   transition: 'background 0.2s ease-in-out'
 });
-const DetailsContainer = styled.div({
+const DetailsContainer = /*#__PURE__*/styled.div.withConfig({
+  displayName: "SplashButtonWithDetails__DetailsContainer",
+  componentId: "components-web__sc-1edwy9o-3"
+})({
   display: 'flex',
   flexDirection: 'column',
   alignItems: 'flex-start',

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

@@ -1,17 +1,18 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { selectSystemProps, useViewport } from '@telus-uds/components-base';
+import styled from 'styled-components';
 import { viewports } from '@telus-uds/system-constants';
 import SplashButton from './SplashButton/SplashButton';
 import SplashButtonWithDetails from './SplashButtonWithDetails/SplashButtonWithDetails';
 import videoText from '../../Video/videoText';
-import { htmlAttrs, styledComponents } from '../../utils';
+import { htmlAttrs } from '../../utils';
 import { jsx as _jsx } from "react/jsx-runtime";
-const {
-  styled
-} = styledComponents;
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([htmlAttrs]);
-const SplashBackground = styled.div(_ref => {
+const SplashBackground = /*#__PURE__*/styled.div.withConfig({
+  displayName: "VideoSplash__SplashBackground",
+  componentId: "components-web__sc-1ejxt6-0"
+})(_ref => {
   let {
     videoPoster
   } = _ref;

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

@@ -8,5 +8,4 @@ import isElementFocusable from './isElementFocusable';
 import renderStructuredContent from './renderStructuredContent';
 import useOverlaidPosition from './useOverlaidPosition';
 import scrollToAnchor from './scrollToAnchor';
-import styledComponents from './theming/styled-components';
-export { deprecate, htmlAttrs, contentfulProps, transformGradient, useTypographyTheme, warn, media, renderStructuredContent, ssrStyles, isElementFocusable, useOverlaidPosition, scrollToAnchor, styledComponents };
+export { deprecate, htmlAttrs, contentfulProps, transformGradient, useTypographyTheme, warn, media, renderStructuredContent, ssrStyles, isElementFocusable, useOverlaidPosition, scrollToAnchor };

package/lib/{utils → esm/utils}/ssr.js

@@ -1,5 +1,5 @@
+import { ServerStyleSheet } from 'styled-components';
 import { ssrStyles as baseSsrStyles } from '@telus-uds/components-base';
-import styledComponents from './theming/styled-components';
 /**
  * Returns object with `renderApp` and `getStyles` functions.
  * Weave these into your app's server-side render process:
@@ -24,9 +24,6 @@ const ssrStyles = function () {
     collectStyles = renderedApp => renderedApp
   } = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
   let router = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 'pages';
-  const {
-    ServerStyleSheet
-  } = styledComponents;
   const sheet = new ServerStyleSheet();
   const getStyledComponentsStyles = () => {
     const styles = sheet.getStyleElement();