@telus-uds/components-web 3.4.0 → 4.0.0

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

@@ -1,20 +1,19 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { getTokensPropType, selectSystemProps } from '@telus-uds/components-base';
-import { htmlAttrs, useTypographyTheme, styledComponents } from '../utils';
+import styled from 'styled-components';
+import { htmlAttrs, useTypographyTheme } from '../utils';
 import { jsx as _jsx } from "react/jsx-runtime";
-const {
-  styled
-} = styledComponents;
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([htmlAttrs]);
-const StyledParagraph = styled.p`
-  ${_ref => {
+const StyledParagraph = /*#__PURE__*/styled.p.withConfig({
+  displayName: "Paragraph__StyledParagraph",
+  componentId: "components-web__sc-1bg9r8p-0"
+})(["", " ", " &:first-child{margin-block-start:0em;}&:last-child{margin-block-end:0em;}"], _ref => {
   let {
     align
   } = _ref;
   return align ? `text-align: ${align};` : '';
-}}
-  ${_ref2 => {
+}, _ref2 => {
   let {
     linesBetween
   } = _ref2;
@@ -22,14 +21,7 @@ const StyledParagraph = styled.p`
     margin-block-start: ${linesBetween}em;
     margin-block-end: ${linesBetween}em;
   `;
-}}
-  &:first-child {
-    margin-block-start: 0em;
-  }
-  &:last-child {
-    margin-block-end: 0em;
-  }
-`;
+});
 
 /**
 * Block text as an HTML ```<p>``` element.

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

@@ -2,20 +2,20 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import omit from 'lodash.omit';
 import { Box, getThemeTokens, hrefAttrsProp, PressableCardBase, selectSystemProps, Spacer, StackView, Typography, a11yProps, focusHandlerProps, viewProps, withLinkRouter, useTheme, getTokensPropType } from '@telus-uds/components-base';
-import { styledComponents } from '../utils';
+import styled from 'styled-components';
 import FullBleedContent, { getFullBleedBorderRadius, useFullBleedContentProps } from '../shared/FullBleedContent';
 import AuthorDate from './AuthorDate';
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-const {
-  styled
-} = styledComponents;
 
 // Passes React Native-oriented system props through UDS PressableCardBase
+import { jsx as _jsx, Fragment as _Fragment, 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: "PreviewCard__FullBleedOffsetOuter",
+  componentId: "components-web__sc-1yfz4de-0"
+})(_ref => {
   let {
     borderOffset
   } = _ref;
@@ -24,7 +24,10 @@ const FullBleedOffsetOuter = styled.div(_ref => {
     marginTop: borderOffset * 2
   };
 });
-const FullBleedOffsetInner = styled.div(_ref2 => {
+const FullBleedOffsetInner = /*#__PURE__*/styled.div.withConfig({
+  displayName: "PreviewCard__FullBleedOffsetInner",
+  componentId: "components-web__sc-1yfz4de-1"
+})(_ref2 => {
   let {
     borderOffset
   } = _ref2;

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

@@ -1,131 +1,121 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { A11yText, Divider, selectSystemProps, Typography, useThemeTokens, useViewport, getTokensPropType } from '@telus-uds/components-base';
+import styled from 'styled-components';
 import FootnoteLink from '../Footnote/FootnoteLink';
 import getTypographyTokens from './tokens';
-import { htmlAttrs, warn, styledComponents } from '../utils';
+import { htmlAttrs, warn } from '../utils';
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-const {
-  styled
-} = styledComponents;
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([htmlAttrs]);
-const PriceLockupContainer = styled.div`
-  align-items: ${_ref => {
+const PriceLockupContainer = /*#__PURE__*/styled.div.withConfig({
+  displayName: "PriceLockup__PriceLockupContainer",
+  componentId: "components-web__sc-1x6duay-0"
+})(["align-items:", ";display:flex;flex-direction:column;width:fit-content;"], _ref => {
   let {
     alignItemsText
   } = _ref;
   return alignItemsText;
-}};
-  display: flex;
-  flex-direction: column;
-  width: fit-content;
-`;
-const PriceContainer = styled.div`
-  display: flex;
-  margin-bottom: ${_ref2 => {
+});
+const PriceContainer = /*#__PURE__*/styled.div.withConfig({
+  displayName: "PriceLockup__PriceContainer",
+  componentId: "components-web__sc-1x6duay-1"
+})(["display:flex;margin-bottom:", ";"], _ref2 => {
   let {
     priceMarginBottom
   } = _ref2;
   return priceMarginBottom;
-}};
-`;
-const FootnoteContainer = styled.div`
-  display: flex;
-  margin-top: ${_ref3 => {
+});
+const FootnoteContainer = /*#__PURE__*/styled.div.withConfig({
+  displayName: "PriceLockup__FootnoteContainer",
+  componentId: "components-web__sc-1x6duay-2"
+})(["display:flex;margin-top:", ";gap:", ";"], _ref3 => {
   let {
     footnoteMarginTop
   } = _ref3;
   return footnoteMarginTop;
-}};
-  gap: ${_ref4 => {
+}, _ref4 => {
   let {
     footnoteGap
   } = _ref4;
   return footnoteGap;
-}};
-`;
-const BottomTextContainer = styled.div`
-  margin-top: ${_ref5 => {
+});
+const BottomTextContainer = /*#__PURE__*/styled.div.withConfig({
+  displayName: "PriceLockup__BottomTextContainer",
+  componentId: "components-web__sc-1x6duay-3"
+})(["margin-top:", ";"], _ref5 => {
   let {
     bottomTextMarginTop
   } = _ref5;
   return bottomTextMarginTop;
-}};
-`;
-const BottomLinksContainer = styled.div`
-  align-self: center;
-  margin-left: ${_ref6 => {
+});
+const BottomLinksContainer = /*#__PURE__*/styled.div.withConfig({
+  displayName: "PriceLockup__BottomLinksContainer",
+  componentId: "components-web__sc-1x6duay-4"
+})(["align-self:center;margin-left:", ";"], _ref6 => {
   let {
     bottomLinksMarginLeft
   } = _ref6;
   return bottomLinksMarginLeft;
-}};
-`;
-const TopTextContainer = styled.div`
-  margin-bottom: ${_ref7 => {
+});
+const TopTextContainer = /*#__PURE__*/styled.div.withConfig({
+  displayName: "PriceLockup__TopTextContainer",
+  componentId: "components-web__sc-1x6duay-5"
+})(["margin-bottom:", ";"], _ref7 => {
   let {
     topTextMarginBottom
   } = _ref7;
   return topTextMarginBottom;
-}};
-`;
-const PriceTextContainer = styled.div`
-  display: flex;
-  flex-direction: ${_ref8 => {
+});
+const PriceTextContainer = /*#__PURE__*/styled.div.withConfig({
+  displayName: "PriceLockup__PriceTextContainer",
+  componentId: "components-web__sc-1x6duay-6"
+})(["display:flex;flex-direction:", ";"], _ref8 => {
   let {
     ratePosition
   } = _ref8;
   return ratePosition === 'bottom' ? 'column' : 'row';
-}};
-`;
-const RateContainer = styled.div`
-  display: flex;
-`;
-const RateTextContainer = styled.div`
-  align-self: ${_ref9 => {
+});
+const RateContainer = /*#__PURE__*/styled.div.withConfig({
+  displayName: "PriceLockup__RateContainer",
+  componentId: "components-web__sc-1x6duay-7"
+})(["display:flex;"]);
+const RateTextContainer = /*#__PURE__*/styled.div.withConfig({
+  displayName: "PriceLockup__RateTextContainer",
+  componentId: "components-web__sc-1x6duay-8"
+})(["align-self:", ";"], _ref9 => {
   let {
     ratePosition
   } = _ref9;
   return ratePosition === 'bottom' ? 'flex-start' : 'flex-end';
-}};
-`;
-const StrikeThroughContainer = styled.div`
-  display: flex;
-  position: relative;
-  align-items: center;
-  ::before {
-    content: '';
-    width: 100%;
-    top: ${_ref10 => {
+});
+const StrikeThroughContainer = /*#__PURE__*/styled.div.withConfig({
+  displayName: "PriceLockup__StrikeThroughContainer",
+  componentId: "components-web__sc-1x6duay-9"
+})(["display:flex;position:relative;align-items:center;::before{content:'';width:100%;top:", ";height:", ";background:", ";position:absolute;}"], _ref10 => {
   let {
     strikeThroughPosition
   } = _ref10;
   return `${strikeThroughPosition}px`;
-}};
-    height: ${_ref11 => {
+}, _ref11 => {
   let {
     strikeThroughHeight
   } = _ref11;
   return `${strikeThroughHeight}px`;
-}};
-    background: ${_ref12 => {
+}, _ref12 => {
   let {
     strikeThroughColor
   } = _ref12;
   return strikeThroughColor;
-}};
-    position: absolute;
-  }
-`;
-const TypographyContainer = styled.div`
-  display: flex;
-  padding-top: ${_ref13 => {
+});
+const TypographyContainer = /*#__PURE__*/styled.div.withConfig({
+  displayName: "PriceLockup__TypographyContainer",
+  componentId: "components-web__sc-1x6duay-10"
+})(["display:flex;padding-top:", ";"], _ref13 => {
   let {
     paddingTop
   } = _ref13;
   return `${paddingTop || 0}px`;
-}};
-`;
+});
 const selectFootnoteLinkStyles = _ref14 => {
   let {
     footnoteLinkColor,

package/lib/{Progress → esm/Progress}/ProgressBar.js

@@ -1,19 +1,19 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { getTokensPropType, Progress, selectSystemProps, useThemeTokens, a11yProps, viewProps, variantProp, applyShadowToken } from '@telus-uds/components-base';
-import { styledComponents } from '../utils';
-import { jsx as _jsx } from "react/jsx-runtime";
-const {
-  styled
-} = styledComponents;
+import styled from 'styled-components';
 
 // Passes React Native-oriented system props through UDS Progress
+import { jsx as _jsx } from "react/jsx-runtime";
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps]);
 const {
   Bar: ProgressBarBase
 } = Progress;
-const Gradient = styled.div.attrs({
+const Gradient = /*#__PURE__*/styled.div.attrs({
   'data-testid': 'ProgressBar-Gradient'
+}).withConfig({
+  displayName: "ProgressBar__Gradient",
+  componentId: "components-web__sc-1vmzyq5-0"
 })(_ref => {
   let {
     gradient: {

package/lib/esm/QuantitySelector/styles.js

@@ -0,0 +1,9 @@
+import styled from 'styled-components';
+export const InputField = /*#__PURE__*/styled.div.withConfig({
+  displayName: "styles__InputField",
+  componentId: "components-web__sc-1lrz1xk-0"
+})(["order:1;text-align:center;z-index:10;input{text-align:center;}"]);
+export const InputWrapper = /*#__PURE__*/styled.div.withConfig({
+  displayName: "styles__InputWrapper",
+  componentId: "components-web__sc-1lrz1xk-1"
+})(["text-align:start;display:flex;flex-direction:row;flex-wrap:nowrap;"]);

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

@@ -1,135 +1,109 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { selectSystemProps, Typography, useThemeTokens, getTokensPropType } from '@telus-uds/components-base';
-import { htmlAttrs, styledComponents } from '../utils';
+import styled from 'styled-components';
+import { htmlAttrs } from '../utils';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const {
-  styled
-} = styledComponents;
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([htmlAttrs]);
-const RibbonWrapper = styled.div`
-  width: fit-content;
-  position: ${_ref => {
+const RibbonWrapper = /*#__PURE__*/styled.div.withConfig({
+  displayName: "Ribbon__RibbonWrapper",
+  componentId: "components-web__sc-186270k-0"
+})(["width:fit-content;position:", ";z-index:1;left:", ";top:", ";"], _ref => {
   let {
     left,
     top
   } = _ref;
   return left ?? top ? 'absolute' : 'relative';
-}};
-  z-index: 1;
-  left: ${_ref2 => {
+}, _ref2 => {
   let {
     left
   } = _ref2;
   return left && `${left}px`;
-}};
-  top: ${_ref3 => {
+}, _ref3 => {
   let {
     top
   } = _ref3;
   return top && `${top}px`;
-}};
-`;
-const RibbonContainer = styled.div`
-  display: flex;
-  justify-content: center;
-  background: ${_ref4 => {
+});
+const RibbonContainer = /*#__PURE__*/styled.div.withConfig({
+  displayName: "Ribbon__RibbonContainer",
+  componentId: "components-web__sc-186270k-1"
+})(["display:flex;justify-content:center;background:", ";padding:", ";border-radius:", ";width:fit-content;box-shadow:", ";border-bottom-right-radius:", ";border-bottom-left-radius:", ";"], _ref4 => {
   let {
     backgroundColor
   } = _ref4;
   return backgroundColor;
-}};
-  padding: ${_ref5 => {
+}, _ref5 => {
   let {
     padding
   } = _ref5;
   return `${padding}`;
-}};
-  border-radius: ${_ref6 => {
+}, _ref6 => {
   let {
     borderRadius
   } = _ref6;
   return borderRadius;
-}};
-  width: fit-content;
-  box-shadow: ${_ref7 => {
+}, _ref7 => {
   let {
     boxShadow,
     shouldWrap
   } = _ref7;
   return shouldWrap && boxShadow;
-}};
-  border-bottom-right-radius: ${_ref8 => {
+}, _ref8 => {
   let {
     borderRadiusBottomLeft
   } = _ref8;
   return borderRadiusBottomLeft;
-}};
-  border-bottom-left-radius: ${_ref9 => {
+}, _ref9 => {
   let {
     borderRadiusBottomRight
   } = _ref9;
   return borderRadiusBottomRight;
-}};
-`;
-const RibbonCurve = styled.div`
-  background: ${_ref10 => {
+});
+const RibbonCurve = /*#__PURE__*/styled.div.withConfig({
+  displayName: "Ribbon__RibbonCurve",
+  componentId: "components-web__sc-186270k-2"
+})(["background:", ";width:", ";height:", ";margin-top:-", ";border-radius:0 0 0 100%;position:relative;z-index:-1;overflow:hidden;&::after{content:'';border-bottom-left-radius:", ";position:absolute;height:", ";background:", ";width:", ";}"], _ref10 => {
   let {
     curveBackgroundColor
   } = _ref10;
   return curveBackgroundColor;
-}};
-  width: ${_ref11 => {
+}, _ref11 => {
   let {
     curveWidth
   } = _ref11;
   return curveWidth;
-}};
-  height: ${_ref12 => {
+}, _ref12 => {
   let {
     curveHeight
   } = _ref12;
   return curveHeight;
-}};
-  margin-top: -${_ref13 => {
+}, _ref13 => {
   let {
     curveMarginTop
   } = _ref13;
   return curveMarginTop;
-}};
-  border-radius: 0 0 0 100%;
-  position: relative;
-  z-index: -1;
-  overflow: hidden;
-  &::after {
-    content: '';
-    border-bottom-left-radius: ${_ref14 => {
+}, _ref14 => {
   let {
     curveAfterRadius
   } = _ref14;
   return curveAfterRadius;
-}};
-    position: absolute;
-    height: ${_ref15 => {
+}, _ref15 => {
   let {
     curveAfterHeight
   } = _ref15;
   return curveAfterHeight;
-}};
-    background: ${_ref16 => {
+}, _ref16 => {
   let {
     curveAfterBackgroundColor
   } = _ref16;
   return curveAfterBackgroundColor;
-}};
-    width: ${_ref17 => {
+}, _ref17 => {
   let {
     curveAfterWidth
   } = _ref17;
   return curveAfterWidth;
-}};
-  }
-`;
+});
 const Ribbon = /*#__PURE__*/React.forwardRef((_ref18, ref) => {
   let {
     children,

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

@@ -1,18 +1,19 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { getTokensPropType, selectSystemProps } from '@telus-uds/components-base';
-import { htmlAttrs, useTypographyTheme, styledComponents } from '../utils';
+import styled from 'styled-components';
+import { htmlAttrs, useTypographyTheme } from '../utils';
 import { jsx as _jsx } from "react/jsx-runtime";
-const {
-  styled
-} = styledComponents;
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([htmlAttrs]);
-const StyledSpan = styled.span`${_ref => {
+const StyledSpan = /*#__PURE__*/styled.span.withConfig({
+  displayName: "Span__StyledSpan",
+  componentId: "components-web__sc-o7sihn-0"
+})(["", "};"], _ref => {
   let {
     flex
   } = _ref;
   return flex ? 'display: inline-flex' : '';
-}}};`;
+});
 
 /**
  * Text as an HTML ```<span>``` element.

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

@@ -2,15 +2,16 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { selectSystemProps, useScrollBlocking, useThemeTokens, getTokensPropType } from '@telus-uds/components-base';
 import { Portal } from '@gorhom/portal';
+import styled from 'styled-components';
 import SpinnerContent from './SpinnerContent';
-import { htmlAttrs, media, styledComponents } from '../utils';
+import { htmlAttrs, media } from '../utils';
 import { BACKDROP_OPACITY, BACKDROP_Z_INDEX } from './constants';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const {
-  styled
-} = styledComponents;
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([htmlAttrs]);
-const SpinnerContainer = styled.div(_ref => {
+const SpinnerContainer = /*#__PURE__*/styled.div.withConfig({
+  displayName: "Spinner__SpinnerContainer",
+  componentId: "components-web__sc-116rqck-0"
+})(_ref => {
   let {
     inline,
     fullScreen
@@ -29,13 +30,19 @@ const SpinnerContainer = styled.div(_ref => {
     })
   };
 });
-const ContentOverlay = styled.div({
+const ContentOverlay = /*#__PURE__*/styled.div.withConfig({
+  displayName: "Spinner__ContentOverlay",
+  componentId: "components-web__sc-116rqck-1"
+})({
   position: 'absolute',
   width: '100%',
   height: '100%',
   zIndex: BACKDROP_Z_INDEX
 });
-const FullscreenOverlay = styled.div(_ref2 => {
+const FullscreenOverlay = /*#__PURE__*/styled.div.withConfig({
+  displayName: "Spinner__FullscreenOverlay",
+  componentId: "components-web__sc-116rqck-2"
+})(_ref2 => {
   let {
     fullScreenOverLayBackground
   } = _ref2;
@@ -49,7 +56,10 @@ const FullscreenOverlay = styled.div(_ref2 => {
     backgroundColor: fullScreenOverLayBackground
   };
 });
-const OpaqueContainer = styled.div({
+const OpaqueContainer = /*#__PURE__*/styled.div.withConfig({
+  displayName: "Spinner__OpaqueContainer",
+  componentId: "components-web__sc-116rqck-3"
+})({
   opacity: BACKDROP_OPACITY
 });
 const recursiveMap = (children, fn) => React.Children.map(children, child => {

package/lib/{Spinner → esm/Spinner}/SpinnerContent.js

@@ -1,14 +1,15 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { ActivityIndicator, StackView, Typography, selectSystemProps } from '@telus-uds/components-base';
-import { htmlAttrs, styledComponents } from '../utils';
+import styled from 'styled-components';
+import { htmlAttrs } from '../utils';
 import { BACKDROP_Z_INDEX, LARGE } from './constants';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const {
-  styled
-} = styledComponents;
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([htmlAttrs]);
-const Container = styled.div(_ref => {
+const Container = /*#__PURE__*/styled.div.withConfig({
+  displayName: "SpinnerContent__Container",
+  componentId: "components-web__sc-1c8bd8e-0"
+})(_ref => {
   let {
     overlay
   } = _ref;

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;