@telus-uds/components-web 3.3.0 → 4.0.0

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

@@ -1,17 +1,17 @@
-var _withLinkRouter$propT, _withLinkRouter$propT2, _withLinkRouter$propT3, _withLinkRouter$propT4;
 import React from 'react';
 import PropTypes from 'prop-types';
 import { selectSystemProps, StackView, Typography, useHash, useInputValue, useResponsiveProp, withLinkRouter } from '@telus-uds/components-base';
-import { htmlAttrs, scrollToAnchor, styledComponents } from '../utils';
+import styled from 'styled-components';
+import { htmlAttrs, scrollToAnchor } from '../utils';
 import NavigationItem from './NavigationItem';
 import NavigationSubMenu from './NavigationSubMenu';
 import collapseItems from './collapseItems';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const {
-  styled
-} = styledComponents;
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([htmlAttrs]);
-const Heading = styled.div({
+const Heading = /*#__PURE__*/styled.div.withConfig({
+  displayName: "NavigationBar__Heading",
+  componentId: "components-web__sc-1vis1gt-0"
+})({
   alignItems: 'center',
   display: 'flex',
   flex: 1,
@@ -59,14 +59,14 @@ const NavigationBar = /*#__PURE__*/React.forwardRef((_ref, ref) => {
         let {
           items: parentItems
         } = _ref3;
-        return parentItems === null || parentItems === void 0 ? void 0 : parentItems.some(_ref4 => {
+        return parentItems?.some(_ref4 => {
           let {
             href
           } = _ref4;
           return hash === href;
         });
       });
-      hashItem = parentItem === null || parentItem === void 0 ? void 0 : parentItem.items.find(_ref5 => {
+      hashItem = parentItem?.items.find(_ref5 => {
         let {
           href
         } = _ref5;
@@ -87,14 +87,13 @@ const NavigationBar = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   const openOverlayRef = React.useRef(null);
   const [openSubMenuId, setOpenSubMenuId] = React.useState(null);
   const handleSubMenuClose = event => {
-    var _openOverlayRef$curre, _openOverlayRef$curre2;
     if (event.type === 'keydown') {
       if (event.key === 'Escape' || event.key === 27) {
         setOpenSubMenuId(null);
       }
-    } else if (event.type === 'click' && openOverlayRef !== null && openOverlayRef !== void 0 && openOverlayRef.current && event.target && !(openOverlayRef !== null && openOverlayRef !== void 0 && (_openOverlayRef$curre = openOverlayRef.current) !== null && _openOverlayRef$curre !== void 0 && _openOverlayRef$curre.contains(event.target))) {
+    } else if (event.type === 'click' && openOverlayRef?.current && event.target && !openOverlayRef?.current?.contains(event.target)) {
       setOpenSubMenuId(null);
-    } else if (event.type === 'touchstart' && openOverlayRef !== null && openOverlayRef !== void 0 && openOverlayRef.current && event.touches[0].target && !(openOverlayRef !== null && openOverlayRef !== void 0 && (_openOverlayRef$curre2 = openOverlayRef.current) !== null && _openOverlayRef$curre2 !== void 0 && _openOverlayRef$curre2.contains(event.touches[0].target))) {
+    } else if (event.type === 'touchstart' && openOverlayRef?.current && event.touches[0].target && !openOverlayRef?.current?.contains(event.touches[0].target)) {
       setOpenSubMenuId(null);
     }
   };
@@ -155,7 +154,7 @@ const NavigationBar = /*#__PURE__*/React.forwardRef((_ref, ref) => {
         heading: headingLevel,
         children: heading
       })
-    }), itemsForViewport === null || itemsForViewport === void 0 ? void 0 : itemsForViewport.map((_ref6, index) => {
+    }), itemsForViewport?.map((_ref6, index) => {
       let {
         href,
         label,
@@ -173,22 +172,22 @@ const NavigationBar = /*#__PURE__*/React.forwardRef((_ref, ref) => {
           setOpenSubMenuId(openSubMenuId !== itemId ? itemId : null);
           return;
         }
-        if (href !== null && href !== void 0 && href.startsWith('#')) {
+        if (href?.startsWith('#')) {
           scrollToAnchor(href, event, () => setValue(itemId, event));
         } else {
           setValue(itemId, event);
         }
-        onClick === null || onClick === void 0 || onClick(event);
+        onClick?.(event);
       };
       const ItemComponent = nestedItems ? NavigationSubMenu : NavigationItem;
       const isOpen = itemId === openSubMenuId;
-      const scrollableNestedItems = (nestedItems === null || nestedItems === void 0 ? void 0 : nestedItems.map(item => ({
+      const scrollableNestedItems = nestedItems?.map(item => ({
         ...item,
         onPress: event => {
           const nestedItemId = item.id ?? item.label;
           scrollToAnchor(item.href, event, () => setValue(nestedItemId, event));
         }
-      }))) ?? nestedItems;
+      })) ?? nestedItems;
       return /*#__PURE__*/_jsx(ItemComponent, {
         ref: itemRef,
         href: href,
@@ -235,8 +234,8 @@ NavigationBar.propTypes = {
     id: PropTypes.string.isRequired,
     onClick: PropTypes.func,
     selected: PropTypes.bool,
-    LinkRouter: (_withLinkRouter$propT = withLinkRouter.propTypes) === null || _withLinkRouter$propT === void 0 ? void 0 : _withLinkRouter$propT.LinkRouter,
-    linkRouterProps: (_withLinkRouter$propT2 = withLinkRouter.propTypes) === null || _withLinkRouter$propT2 === void 0 ? void 0 : _withLinkRouter$propT2.linkRouterProps,
+    LinkRouter: withLinkRouter.propTypes?.LinkRouter,
+    linkRouterProps: withLinkRouter.propTypes?.linkRouterProps,
     // One layer of nested links is allowed
     items: PropTypes.arrayOf(PropTypes.shape({
       label: PropTypes.string.isRequired,
@@ -244,8 +243,8 @@ NavigationBar.propTypes = {
       id: PropTypes.string.isRequired,
       onClick: PropTypes.func,
       selected: PropTypes.bool,
-      LinkRouter: (_withLinkRouter$propT3 = withLinkRouter.propTypes) === null || _withLinkRouter$propT3 === void 0 ? void 0 : _withLinkRouter$propT3.LinkRouter,
-      linkRouterProps: (_withLinkRouter$propT4 = withLinkRouter.propTypes) === null || _withLinkRouter$propT4 === void 0 ? void 0 : _withLinkRouter$propT4.linkRouterProps
+      LinkRouter: withLinkRouter.propTypes?.LinkRouter,
+      linkRouterProps: withLinkRouter.propTypes?.linkRouterProps
     }))
   })).isRequired,
   /**

package/lib/{NavigationBar → esm/NavigationBar}/NavigationItem.js

@@ -1,14 +1,15 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { Button, selectSystemProps, useResponsiveProp, useViewport, useThemeTokensCallback, getTokensPropType } 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 defaultMaxWidth = 192;
-const ItemContainer = styled.div(_ref => {
+const ItemContainer = /*#__PURE__*/styled.div.withConfig({
+  displayName: "NavigationItem__ItemContainer",
+  componentId: "components-web__sc-ql9x7c-0"
+})(_ref => {
   let {
     targetWidth
   } = _ref;

package/lib/{NavigationBar → esm/NavigationBar}/NavigationSubMenu.js

@@ -99,7 +99,6 @@ const NavigationSubMenu = /*#__PURE__*/React.forwardRef((_ref, ref) => {
       icon: icoMenu,
       tokens: tokens,
       children: _ref2 => {
-        var _textStyles$;
         let {
           textStyles
         } = _ref2;
@@ -109,7 +108,7 @@ const NavigationSubMenu = /*#__PURE__*/React.forwardRef((_ref, ref) => {
             size: 'micro'
           },
           tokens: {
-            color: (_textStyles$ = textStyles[0]) === null || _textStyles$ === void 0 ? void 0 : _textStyles$.color
+            color: textStyles[0]?.color
           }
         }, `${id}_icon`)];
       }

package/lib/esm/NavigationBar/collapseItems.js

@@ -0,0 +1,37 @@
+/**
+ * Make a list of items into a one-item list where all items are nested under the first item
+ */
+const collapseItems = (items, selectedId) => {
+  if (!items?.length) return items;
+
+  // Give the root item the label of the current active link
+  // (or the first item if for some reason there's no match on the selectedId)
+  let rootLabel = items[0].label;
+  const isSelected = _ref => {
+    let {
+      label,
+      id
+    } = _ref;
+    return selectedId === id ?? label;
+  };
+
+  // Linter doesn't like for loops, simulate loop that breaks
+  items.some(item => {
+    if (isSelected(item)) {
+      rootLabel = item.label;
+      return true; // break
+    }
+    const nestedMatch = item.items?.find(isSelected);
+    if (nestedMatch) {
+      rootLabel = nestedMatch.label;
+      return true; // break
+    }
+    return false; // continue
+  });
+  return [{
+    id: 'navigation-bar-root',
+    label: rootLabel,
+    items
+  }];
+};
+export default collapseItems;

package/lib/{NavigationBar → esm/NavigationBar}/resolveItemSelection.js

@@ -7,7 +7,7 @@ const resolveItemSelection = (_ref, selectedId) => {
   const itemId = id ?? label;
 
   // Treat item as selected if it or any nested child matches the selected id
-  const selected = Boolean(selectedId === itemId || (items === null || items === void 0 ? void 0 : items.some(item => resolveItemSelection(item, selectedId).selected)));
+  const selected = Boolean(selectedId === itemId || items?.some(item => resolveItemSelection(item, selectedId).selected));
   return {
     itemId,
     selected

package/lib/{OrderedList → esm/OrderedList}/Item.js

@@ -1,13 +1,11 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { applyTextStyles, getTokensPropType, selectSystemProps, StackView, Typography, useTheme, useThemeTokens, wrapStringsInText } from '@telus-uds/components-base';
+import styled from 'styled-components';
 import ItemBase from './ItemBase';
-import { htmlAttrs, styledComponents } from '../utils';
+import { htmlAttrs } from '../utils';
 import { OL_COUNTER_NAME } from './constants';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const {
-  styled
-} = styledComponents;
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([htmlAttrs]);
 const selectItemTextStyles = (_ref, themeOptions) => {
   let {
@@ -27,7 +25,10 @@ const selectItemTextStyles = (_ref, themeOptions) => {
     lineHeight: itemLineHeight
   });
 };
-const StyledItemBase = styled(ItemBase)(_ref2 => {
+const StyledItemBase = /*#__PURE__*/styled(ItemBase).withConfig({
+  displayName: "Item__StyledItemBase",
+  componentId: "components-web__sc-7jzwcq-0"
+})(_ref2 => {
   let {
     interItemMargin,
     itemBulletContainerWidth,
@@ -66,7 +67,10 @@ const StyledItemBase = styled(ItemBase)(_ref2 => {
     }
   };
 });
-const ItemContent = styled.div({
+const ItemContent = /*#__PURE__*/styled.div.withConfig({
+  displayName: "Item__ItemContent",
+  componentId: "components-web__sc-7jzwcq-1"
+})({
   display: 'flex',
   flexDirection: 'column',
   gap: 0

package/lib/{OrderedList → esm/OrderedList}/ItemBase.js

@@ -1,11 +1,11 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { styledComponents } from '../utils';
+import styled from 'styled-components';
 import { jsx as _jsx } from "react/jsx-runtime";
-const {
-  styled
-} = styledComponents;
-const StyledItem = styled.li({
+const StyledItem = /*#__PURE__*/styled.li.withConfig({
+  displayName: "ItemBase__StyledItem",
+  componentId: "components-web__sc-o0oiv5-0"
+})({
   display: 'flex'
 });
 const Item = _ref => {

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

@@ -1,16 +1,17 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { getTokensPropType, selectSystemProps, variantProp } from '@telus-uds/components-base';
-import { htmlAttrs, styledComponents } from '../utils';
+import styled from 'styled-components';
+import { htmlAttrs } from '../utils';
 import OrderedListBase from './OrderedListBase';
 import Item from './Item';
 import { OL_COUNTER_NAME } from './constants';
 import { jsx as _jsx } from "react/jsx-runtime";
-const {
-  styled
-} = styledComponents;
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([htmlAttrs]);
-const StyledOrderedListBase = styled(OrderedListBase)(_ref => {
+const StyledOrderedListBase = /*#__PURE__*/styled(OrderedListBase).withConfig({
+  displayName: "OrderedList__StyledOrderedListBase",
+  componentId: "components-web__sc-t5az8z-0"
+})(_ref => {
   let {
     start
   } = _ref;
@@ -38,9 +39,8 @@ const OrderedList = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
   // Pass any variants and tokens "OrderedList" receives down to the individual list items.
   const childrenWithParentVariantsAndTokens = React.useMemo(() => {
     const addVariantAndTokensToProps = child => {
-      var _child$props, _child$props2;
-      const existingChildVariants = ((_child$props = child.props) === null || _child$props === void 0 ? void 0 : _child$props.variant) ?? {};
-      const existingChildTokens = ((_child$props2 = child.props) === null || _child$props2 === void 0 ? void 0 : _child$props2.tokens) ?? {};
+      const existingChildVariants = child.props?.variant ?? {};
+      const existingChildTokens = child.props?.tokens ?? {};
       return /*#__PURE__*/React.cloneElement(child, {
         variant: {
           ...existingChildVariants,

package/lib/{OrderedList → esm/OrderedList}/OrderedListBase.js

@@ -1,12 +1,12 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { styledComponents } from '../utils';
+import styled from 'styled-components';
 import ItemBase from './ItemBase';
 import { jsx as _jsx } from "react/jsx-runtime";
-const {
-  styled
-} = styledComponents;
-const StyledList = styled.ol({
+const StyledList = /*#__PURE__*/styled.ol.withConfig({
+  displayName: "OrderedListBase__StyledList",
+  componentId: "components-web__sc-4m9lgj-0"
+})({
   display: 'flex',
   flexDirection: 'column',
   listStylePosition: 'inside',

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;"]);