@telus-uds/components-web 3.4.0 → 4.1.0

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

@@ -1,19 +1,19 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { Box, Divider, PressableCardBase, selectSystemProps, Spacer, StackView, StackWrap, Typography, hrefAttrsProp, a11yProps, focusHandlerProps, viewProps, withLinkRouter, useThemeTokens, useThemeTokensCallback, getTokensPropType } from '@telus-uds/components-base';
-import { styledComponents } from '../utils';
+import styled from 'styled-components';
 import FullBleedContent, { getFullBleedBorderRadius, useFullBleedContentProps } from '../shared/FullBleedContent';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const {
-  styled
-} = styledComponents;
 
 // Passes React Native-oriented system props through UDS PressableCardBase
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, focusHandlerProps, viewProps]);
 
 // Stop changes to the card's inner border width causing the size and
 // apparent position of the full bleed image to change.
-const FullBleedOffsetOuter = styled.div(_ref => {
+const FullBleedOffsetOuter = /*#__PURE__*/styled.div.withConfig({
+  displayName: "StoryCard__FullBleedOffsetOuter",
+  componentId: "components-web__sc-yhvivu-0"
+})(_ref => {
   let {
     borderOffset
   } = _ref;
@@ -22,7 +22,10 @@ const FullBleedOffsetOuter = styled.div(_ref => {
     marginTop: borderOffset * 2
   };
 });
-const FullBleedOffsetInner = styled.div(_ref2 => {
+const FullBleedOffsetInner = /*#__PURE__*/styled.div.withConfig({
+  displayName: "StoryCard__FullBleedOffsetInner",
+  componentId: "components-web__sc-yhvivu-1"
+})(_ref2 => {
   let {
     borderOffset
   } = _ref2;

package/lib/{Table → esm/Table}/Cell.js

@@ -1,13 +1,9 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { Typography, useThemeTokens, applyShadowToken } from '@telus-uds/components-base';
-import { styledComponents } from '../utils';
+import styled, { css } from 'styled-components';
 import { useTableContext } from './Table';
 import { jsx as _jsx } from "react/jsx-runtime";
-const {
-  styled,
-  css
-} = styledComponents;
 const HEADER_TYPE = {
   HEADING: 'heading',
   SUBHEADING: 'subHeading',
@@ -19,28 +15,9 @@ const stickyStyles = _ref => {
     stickyBackgroundColor,
     type
   } = _ref;
-  return css`
-  position: sticky;
-  left: 0; // needed for sticky to work
-  z-index: 2;
-  clip-path: inset(0 -8px 0 0); // use clip path to cut off the shadow rendered below
-  // Override default cell background with stickyBackgroundColor with an exception to subheading and heading
-  ${type !== HEADER_TYPE.SUBHEADING && type !== HEADER_TYPE.HEADING ? `background-color: ${stickyBackgroundColor};` : undefined}
-  &::before {
-    // use a pseudo element for the sticky shadow, since we already use shadows for inner cells border
-    content: '';
-    box-shadow: ${cellStickyShadow};
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    pointer-events: none;
-  }
-`;
+  return css(["position:sticky;left:0;z-index:2;clip-path:inset(0 -8px 0 0);", " &::before{content:'';box-shadow:", ";position:absolute;top:0;left:0;right:0;bottom:0;pointer-events:none;}"], type !== HEADER_TYPE.SUBHEADING && type !== HEADER_TYPE.HEADING ? `background-color: ${stickyBackgroundColor};` : undefined, cellStickyShadow);
 };
-const sharedStyles = css`
-  ${_ref2 => {
+const sharedStyles = /*#__PURE__*/css(["", ""], _ref2 => {
   let {
     isSticky,
     align,
@@ -48,43 +25,38 @@ const sharedStyles = css`
     cellPaddingRight,
     cellPaddingBottom,
     cellPaddingLeft,
+    cellBorderWidth,
+    cellBorderColor,
+    cellBorderTopWidth,
     cellMinWidth,
     cellBackground,
     cellStickyShadow,
     stickyBackgroundColor,
     type
   } = _ref2;
-  return css`
-    text-align: ${align};
-    min-width: ${cellMinWidth}px;
-    padding: ${cellPaddingTop}px ${cellPaddingRight}px ${cellPaddingBottom}px ${cellPaddingLeft}px;
-    background-color: ${cellBackground};
-    ${isSticky && stickyStyles({
+  return css(["text-align:", ";min-width:", "px;padding:", "px ", "px ", "px ", "px;background-color:", ";", ";border-style:", ";border-color:", ";border-width:", ";border-top-width:", ";"], align, cellMinWidth, cellPaddingTop, cellPaddingRight, cellPaddingBottom, cellPaddingLeft, cellBackground, isSticky && stickyStyles({
     type,
     cellStickyShadow,
     stickyBackgroundColor
-  })};
-  `;
-}}
-`;
-const createStyledCell = htmlElement => styled[htmlElement]`
-  ${sharedStyles};
-  box-shadow: ${_ref3 => {
+  }), cellBorderWidth || cellBorderTopWidth ? 'solid' : 'none', cellBorderColor, cellBorderWidth, cellBorderTopWidth || cellBorderWidth);
+});
+const createStyledCell = htmlElement => styled[htmlElement].withConfig({
+  displayName: "Cell__createStyledCell",
+  componentId: "components-web__sc-ltgfic-0"
+})(["", ";box-shadow:", ";", ""], sharedStyles, _ref3 => {
   let {
     cellBoxShadowColor,
     type
   } = _ref3;
   return type === HEADER_TYPE.HEADING ? `inset 0 1px 0 ${cellBoxShadowColor}, inset 0 -1px 0 ${cellBoxShadowColor}` : `inset 0 1px 0 ${cellBoxShadowColor}`;
-}};
-  ${_ref4 => {
+}, _ref4 => {
   let {
     display
   } = _ref4;
   return display && `*:not(:empty) {
     display: ${display};
   }`;
-}}
-`;
+});
 const StyledHeaderCell = createStyledCell('th');
 const StyledDataCell = createStyledCell('td');
 const Cell = /*#__PURE__*/React.forwardRef((_ref5, ref) => {
@@ -99,7 +71,8 @@ const Cell = /*#__PURE__*/React.forwardRef((_ref5, ref) => {
     text,
     isScrollable: isTableScrollable,
     tokens: tableTokens,
-    spacing
+    spacing,
+    variant
   } = useTableContext();
   const themeTokens = {
     ...tableTokens,
@@ -114,6 +87,9 @@ const Cell = /*#__PURE__*/React.forwardRef((_ref5, ref) => {
     cellPaddingRight,
     cellPaddingLeft,
     cellPaddingBottom,
+    cellBorderWidth,
+    cellBorderColor,
+    cellBorderTopWidth,
     fontName,
     fontWeight,
     fontSize,
@@ -124,7 +100,8 @@ const Cell = /*#__PURE__*/React.forwardRef((_ref5, ref) => {
   } = useThemeTokens('Table', themeTokens, {
     spacing,
     type,
-    text
+    text,
+    ...variant
   });
   const sharedProps = {
     align,
@@ -136,6 +113,9 @@ const Cell = /*#__PURE__*/React.forwardRef((_ref5, ref) => {
     cellPaddingRight,
     cellPaddingLeft,
     cellPaddingBottom,
+    cellBorderWidth,
+    cellBorderColor,
+    cellBorderTopWidth,
     stickyBackgroundColor,
     cellBoxShadowColor,
     display,

package/lib/esm/Table/Row.js

@@ -0,0 +1,67 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import styled from 'styled-components';
+import { useTableContext } from './Table';
+import { jsx as _jsx } from "react/jsx-runtime";
+const StyledTR = /*#__PURE__*/styled.tr.withConfig({
+  displayName: "Row__StyledTR",
+  componentId: "components-web__sc-6pbb9a-0"
+})(["&:hover{background-color:", " !important;}border-style:", ";border-color:", ";border-width:", ";border-top-width:", ";"], _ref => {
+  let {
+    tokens
+  } = _ref;
+  return tokens?.rowHoverBackgroundColor;
+}, _ref2 => {
+  let {
+    tokens
+  } = _ref2;
+  return tokens?.rowBorderWidth || tokens?.rowBorderTopWidth ? 'solid' : 'none';
+}, _ref3 => {
+  let {
+    tokens
+  } = _ref3;
+  return tokens?.rowBorderColor;
+}, _ref4 => {
+  let {
+    tokens
+  } = _ref4;
+  return tokens?.rowBorderWidth || '0px';
+}, _ref5 => {
+  let {
+    tokens
+  } = _ref5;
+  return tokens?.rowBorderTopWidth || tokens?.rowBorderWidth;
+});
+const Row = /*#__PURE__*/React.forwardRef((_ref6, ref) => {
+  let {
+    children,
+    tokens: rowTokens
+  } = _ref6;
+  const {
+    themeTokens
+  } = useTableContext();
+  const mergedTokens = {
+    ...themeTokens,
+    ...rowTokens
+  };
+  return /*#__PURE__*/_jsx(StyledTR, {
+    ref: ref,
+    tokens: mergedTokens,
+    children: React.Children.map(children, (child, index) => /*#__PURE__*/React.cloneElement(child, {
+      isFirstInRow: index === 0
+    }))
+  });
+});
+Row.displayName = 'Row';
+Row.propTypes = {
+  tokens: PropTypes.shape({
+    borderColor: PropTypes.string,
+    topBorderWidth: PropTypes.string,
+    bottomBorderWidth: PropTypes.string,
+    leftBorderWidth: PropTypes.string,
+    rightBorderWidth: PropTypes.string,
+    rowHoverBackgroundColor: PropTypes.string
+  }),
+  children: PropTypes.node
+};
+export default Row;

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

@@ -2,28 +2,24 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { selectSystemProps, useSafeLayoutEffect, useThemeTokens, getTokensPropType } from '@telus-uds/components-base';
 import throttle from 'lodash.throttle';
-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 StyledContainer = styled.div`
-  overflow: auto;
-  padding-bottom: ${props => props.isScrollable ? `${props.tablePaddingBottom}px` : 0};
-`;
-const StyledTable = styled.table`
-  margin: 0;
-  padding: 0;
-  width: ${_ref => {
+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 => {
   let {
     fullWidth,
     tableWidth
   } = _ref;
   return fullWidth ? '100%' : `${tableWidth}px`;
-}};
-  border: ${props => `${props.borderWidth}px solid ${props.borderColor}`};
-`;
+}, props => `${props.borderWidth}px solid ${props.borderColor}`);
 const TableContext = /*#__PURE__*/React.createContext({});
 export const useTableContext = () => React.useContext(TableContext);
 
@@ -51,11 +47,12 @@ const Table = _ref2 => {
     variant,
     ...rest
   } = _ref2;
+  const themeTokens = useThemeTokens('Table', tokens, variant);
   const {
     tablePaddingBottom,
     borderColor,
     borderWidth
-  } = useThemeTokens('Table', tokens, variant);
+  } = themeTokens;
   const containerRef = React.useRef();
   const tableRef = React.useRef();
   const [containerWidth, setContainerWidth] = React.useState(0);
@@ -90,7 +87,9 @@ const Table = _ref2 => {
         text,
         isScrollable,
         tokens,
-        spacing
+        spacing,
+        variant,
+        themeTokens
       },
       children: /*#__PURE__*/_jsx(StyledTable, {
         borderColor: borderColor,

package/lib/{TermsAndConditions → esm/TermsAndConditions}/ExpandCollapse.js

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

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

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

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

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

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

@@ -1,91 +1,40 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { ChevronLink, selectSystemProps, useThemeTokens, Typography, withLinkRouter, Spacer, useViewport, getTokensPropType } from '@telus-uds/components-base';
-import { htmlAttrs, styledComponents } from '../utils';
+import styled, { css, keyframes } from 'styled-components';
+import { htmlAttrs } 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 {
-    ${property}: ${from};
-  }
-  to {
-    ${property}: ${to};
-  }
-`;
+const transform = property => (from, to) => keyframes(["from{", ":", ";}to{", ":", ";}"], property, from, property, to);
 const slideDown = property => function (from, to) {
   let end = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : to;
-  return keyframes`
-  0% {
-    ${property}: ${from};
-  }
-  99% {
-    ${property}: ${to};
-  }
-  100% {
-    ${property}: ${end};
-  }
-`;
+  return keyframes(["0%{", ":", ";}99%{", ":", ";}100%{", ":", ";}"], property, from, property, to, property, end);
 };
-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 => {
+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 => {
   let {
     padding
   } = _ref;
   return padding;
-}}px;
-  padding-right: ${_ref2 => {
+}, _ref2 => {
   let {
     padding
   } = _ref2;
   return padding;
-}}px;
-  background: ${_ref3 => {
+}, _ref3 => {
   let {
     containerBackgroundColor
   } = _ref3;
   return containerBackgroundColor;
-}};
-  gap: ${_ref4 => {
+}, _ref4 => {
   let {
     containerGap
   } = _ref4;
   return containerGap;
-}};
-  height: 0;
-  overflow: hidden;
-  animation: ${animation};
-`;
+}, animation);
 const Toast = /*#__PURE__*/React.forwardRef((_ref5, ref) => {
   let {
     toast,

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

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