@telus-uds/components-web 4.19.2 → 5.0.0-alpha.1

package/lib/cjs/OrderedList/constants.js

@@ -4,5 +4,4 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.OL_COUNTER_NAME = void 0;
-// eslint-disable-next-line import/prefer-default-export
 const OL_COUNTER_NAME = exports.OL_COUNTER_NAME = 'allium-ordered-list-counter';

package/lib/cjs/Paragraph/Paragraph.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.Paragraph = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _componentsBase = require("@telus-uds/components-base");
@@ -17,16 +17,16 @@ const StyledParagraph = /*#__PURE__*/_styledComponents.default.p.withConfig({
   componentId: "components-web__sc-1bg9r8p-0"
 })(["", " ", " &:first-child{margin-block-start:0em;}&:last-child{margin-block-end:0em;}"], _ref => {
   let {
-    align
+    $align
   } = _ref;
-  return align ? `text-align: ${align};` : '';
+  return $align ? `text-align: ${$align};` : '';
 }, _ref2 => {
   let {
-    linesBetween
+    $linesBetween
   } = _ref2;
   return `
-    margin-block-start: ${linesBetween}em;
-    margin-block-end: ${linesBetween}em;
+    margin-block-start: ${$linesBetween}em;
+    margin-block-end: ${$linesBetween}em;
   `;
 });
 
@@ -40,7 +40,7 @@ const StyledParagraph = /*#__PURE__*/_styledComponents.default.p.withConfig({
 	contrast.
 	* - All Allium Typography variants other than header size variants are supported.
 	*/
-const Paragraph = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) => {
+const Paragraph = exports.Paragraph = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) => {
   let {
     children,
     variant,
@@ -53,9 +53,9 @@ const Paragraph = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) => {
   const style = (0, _utils.useTypographyTheme)(variant, tokens);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledParagraph, {
     ref: ref,
-    linesBetween: linesBetween,
+    $linesBetween: linesBetween,
     "data-testid": testID,
-    align: align,
+    $align: align,
     style: style,
     ...selectProps(rest),
     children: children
@@ -93,5 +93,4 @@ Paragraph.propTypes = {
     inverse: _propTypes.default.bool,
     size: _propTypes.default.oneOf(['micro', 'small', 'large'])
   })
-};
-var _default = exports.default = Paragraph;
+};

package/lib/cjs/PreviewCard/PreviewCard.js

@@ -3,16 +3,14 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.PreviewCardBase = exports.PreviewCard = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _lodash = _interopRequireDefault(require("lodash.omit"));
 var _componentsBase = require("@telus-uds/components-base");
 var _styledComponents = _interopRequireDefault(require("styled-components"));
-var _FullBleedContent = _interopRequireWildcard(require("../shared/FullBleedContent"));
-var _AuthorDate = _interopRequireDefault(require("./AuthorDate"));
+var _FullBleedContent = require("../shared/FullBleedContent");
 var _jsxRuntime = require("react/jsx-runtime");
-function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 // Passes React Native-oriented system props through UDS PressableCardBase
 const [selectProps, selectedSystemPropTypes] = (0, _componentsBase.selectSystemProps)([_componentsBase.a11yProps, _componentsBase.focusHandlerProps, _componentsBase.viewProps]);
@@ -24,11 +22,11 @@ const FullBleedOffsetOuter = /*#__PURE__*/_styledComponents.default.div.withConf
   componentId: "components-web__sc-1yfz4de-0"
 })(_ref => {
   let {
-    borderOffset
+    $borderOffset
   } = _ref;
   return {
     overflow: 'hidden',
-    marginTop: borderOffset * 2
+    marginTop: $borderOffset * 2
   };
 });
 const FullBleedOffsetInner = /*#__PURE__*/_styledComponents.default.div.withConfig({
@@ -36,11 +34,11 @@ const FullBleedOffsetInner = /*#__PURE__*/_styledComponents.default.div.withConf
   componentId: "components-web__sc-1yfz4de-1"
 })(_ref2 => {
   let {
-    borderOffset
+    $borderOffset
   } = _ref2;
   return {
     position: 'relative',
-    margin: 0 - borderOffset
+    margin: 0 - $borderOffset
   };
 });
 const defaultTokens = {
@@ -62,13 +60,12 @@ const defaultTokens = {
  * - Use `href` to set the target URL
  * - Use `fullBleedContent` to set the thumbnail image
  */
-const PreviewCard = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) => {
+const PreviewCard = exports.PreviewCardBase = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) => {
   let {
     tag,
     title,
     footer,
-    fullBleedImage,
-    fullBleedContent = fullBleedImage,
+    fullBleedContent,
     onPress,
     href,
     ...rest
@@ -155,10 +152,10 @@ const PreviewCard = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) => {
             }) : footer]
           })]
         }), Boolean(fullBleedContentProps.src || fullBleedContentProps.content) && /*#__PURE__*/(0, _jsxRuntime.jsx)(FullBleedOffsetOuter, {
-          borderOffset: borderOffset,
+          $borderOffset: borderOffset,
           children: /*#__PURE__*/(0, _jsxRuntime.jsx)(FullBleedOffsetInner, {
-            borderOffset: borderOffset,
-            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_FullBleedContent.default, {
+            $borderOffset: borderOffset,
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_FullBleedContent.FullBleedContent, {
               borderRadius: fullBleedBorderRadius,
               ...fullBleedContentProps
             })
@@ -169,9 +166,6 @@ const PreviewCard = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) => {
   });
 });
 PreviewCard.displayName = 'PreviewCard';
-
-// Provide standard author/date footer as a preset with the export
-PreviewCard.AuthorDate = _AuthorDate.default;
 PreviewCard.propTypes = {
   ...selectedSystemPropTypes,
   tokens: (0, _componentsBase.getTokensPropType)('PreviewCard'),
@@ -193,22 +187,20 @@ PreviewCard.propTypes = {
   tag: _propTypes.default.string,
   /**
    * Section containing additional information, such as author and date.
-   * Use `<PreviewCard.AuthorDate author={...} date={...} />` here for author and date.
+   * Use `<PreviewCardAuthorDate author={...} date={...} />` here for author and date.
    */
   footer: _propTypes.default.oneOfType([_propTypes.default.node, _propTypes.default.string]),
   /**
    * Text stating the title or headline of the story.
    */
   title: _propTypes.default.string.isRequired,
-  /**
-   * Full bleed image to be placed on the card, deprecated in favor of `fullBleedContent`.
-   *
-   * @deprecated
-   */
-  fullBleedImage: _propTypes.default.exact(_FullBleedContent.default.propTypes || {}),
   /**
    * Full bleed content to be placed on the card.
    */
-  fullBleedContent: _propTypes.default.exact(_FullBleedContent.default.propTypes || {})
+  fullBleedContent: _propTypes.default.exact(_FullBleedContent.FullBleedContent.propTypes || {})
 };
-var _default = exports.default = (0, _componentsBase.withLinkRouter)(PreviewCard);
+
+// Export unwrapped component for react-docgen to extract info for docsite
+
+// Export wrapped component as main PreviewCard export
+const PreviewCardWithRouter = exports.PreviewCard = (0, _componentsBase.withLinkRouter)(PreviewCard);

package/lib/cjs/PreviewCard/{AuthorDate.js → PreviewCardAuthorDate.js}

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.PreviewCardAuthorDate = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _componentsBase = require("@telus-uds/components-base");
@@ -15,7 +15,8 @@ function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e
  * @TODO
  * Add same locale-based date formatting as StoryCard when ready.
  * Get locale based on decision of https://github.com/telus/universal-design-system/issues/715
- */const AuthorDate = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
+ */
+const PreviewCardAuthorDate = exports.PreviewCardAuthorDate = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
   let {
     author,
     date
@@ -49,8 +50,8 @@ function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e
     })]
   });
 });
-AuthorDate.displayName = 'AuthorDate';
-AuthorDate.propTypes = {
+PreviewCardAuthorDate.displayName = 'PreviewCardAuthorDate';
+PreviewCardAuthorDate.propTypes = {
   /**
    * Name of the author
    */
@@ -59,5 +60,4 @@ AuthorDate.propTypes = {
    * Date of the post
    */
   date: _propTypes.default.string.isRequired
-};
-var _default = exports.default = AuthorDate;
+};

package/lib/cjs/PriceLockup/PriceLockup.js

@@ -3,15 +3,15 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.PriceLockup = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _componentsBase = require("@telus-uds/components-base");
 var _styledComponents = _interopRequireDefault(require("styled-components"));
-var _FootnoteLink = _interopRequireDefault(require("../Footnote/FootnoteLink"));
-var _tokens = _interopRequireDefault(require("./tokens"));
+var _FootnoteLink = require("../Footnote/FootnoteLink");
+var _tokens = require("./tokens");
 var _utils = require("../utils");
-var _dictionary = _interopRequireDefault(require("./dictionary"));
+var _dictionary = require("./dictionary");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const PRICE_BASELINE_VARIANT = 'baseline';
@@ -21,9 +21,9 @@ const PriceLockupContainer = /*#__PURE__*/_styledComponents.default.div.withConf
   componentId: "components-web__sc-1x6duay-0"
 })(["align-items:", ";display:flex;flex-direction:column;width:fit-content;"], _ref => {
   let {
-    alignItemsText
+    $alignItemsText
   } = _ref;
-  return alignItemsText;
+  return $alignItemsText;
 });
 const PriceContainer = /*#__PURE__*/_styledComponents.default.div.attrs({
   'aria-hidden': 'true'
@@ -32,41 +32,41 @@ const PriceContainer = /*#__PURE__*/_styledComponents.default.div.attrs({
   componentId: "components-web__sc-1x6duay-1"
 })(["display:flex;margin-bottom:", ";"], _ref2 => {
   let {
-    priceMarginBottom
+    $priceMarginBottom
   } = _ref2;
-  return priceMarginBottom;
+  return $priceMarginBottom;
 });
 const FootnoteContainer = /*#__PURE__*/_styledComponents.default.div.withConfig({
   displayName: "PriceLockup__FootnoteContainer",
   componentId: "components-web__sc-1x6duay-2"
 })(["display:flex;margin-top:", ";gap:", ";"], _ref3 => {
   let {
-    footnoteMarginTop
+    $footnoteMarginTop
   } = _ref3;
-  return footnoteMarginTop;
+  return $footnoteMarginTop;
 }, _ref4 => {
   let {
-    footnoteGap
+    $footnoteGap
   } = _ref4;
-  return footnoteGap;
+  return $footnoteGap;
 });
 const BottomTextContainer = /*#__PURE__*/_styledComponents.default.div.withConfig({
   displayName: "PriceLockup__BottomTextContainer",
   componentId: "components-web__sc-1x6duay-3"
 })(["margin-top:", ";"], _ref5 => {
   let {
-    bottomTextMarginTop
+    $bottomTextMarginTop
   } = _ref5;
-  return bottomTextMarginTop;
+  return $bottomTextMarginTop;
 });
 const BottomLinksContainer = /*#__PURE__*/_styledComponents.default.div.withConfig({
   displayName: "PriceLockup__BottomLinksContainer",
   componentId: "components-web__sc-1x6duay-4"
 })(["align-self:center;margin-left:", ";"], _ref6 => {
   let {
-    bottomLinksMarginLeft
+    $bottomLinksMarginLeft
   } = _ref6;
-  return bottomLinksMarginLeft;
+  return $bottomLinksMarginLeft;
 });
 const TopTextContainer = /*#__PURE__*/_styledComponents.default.div.attrs({
   'aria-hidden': 'true'
@@ -75,18 +75,18 @@ const TopTextContainer = /*#__PURE__*/_styledComponents.default.div.attrs({
   componentId: "components-web__sc-1x6duay-5"
 })(["margin-bottom:", ";"], _ref7 => {
   let {
-    topTextMarginBottom
+    $topTextMarginBottom
   } = _ref7;
-  return topTextMarginBottom;
+  return $topTextMarginBottom;
 });
 const PriceTextContainer = /*#__PURE__*/_styledComponents.default.div.withConfig({
   displayName: "PriceLockup__PriceTextContainer",
   componentId: "components-web__sc-1x6duay-6"
 })(["display:flex;flex-direction:", ";"], _ref8 => {
   let {
-    ratePosition
+    $ratePosition
   } = _ref8;
-  return ratePosition === 'bottom' ? 'column' : 'row';
+  return $ratePosition === 'bottom' ? 'column' : 'row';
 });
 const RateContainer = /*#__PURE__*/_styledComponents.default.div.withConfig({
   displayName: "PriceLockup__RateContainer",
@@ -97,37 +97,37 @@ const RateTextContainer = /*#__PURE__*/_styledComponents.default.div.withConfig(
   componentId: "components-web__sc-1x6duay-8"
 })(["align-self:", ";"], _ref9 => {
   let {
-    ratePosition
+    $ratePosition
   } = _ref9;
-  return ratePosition === 'bottom' ? 'flex-start' : 'flex-end';
+  return $ratePosition === 'bottom' ? 'flex-start' : 'flex-end';
 });
 const StrikeThroughContainer = /*#__PURE__*/_styledComponents.default.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;}"], _ref0 => {
+})(["display:flex;position:relative;align-items:center;&::before{content:'';width:100%;top:", ";height:", ";background:", ";position:absolute;}"], _ref0 => {
   let {
-    strikeThroughPosition
+    $strikeThroughPosition
   } = _ref0;
-  return `${strikeThroughPosition}px`;
+  return `${$strikeThroughPosition}px`;
 }, _ref1 => {
   let {
-    strikeThroughHeight
+    $strikeThroughHeight
   } = _ref1;
-  return `${strikeThroughHeight}px`;
+  return `${$strikeThroughHeight}px`;
 }, _ref10 => {
   let {
-    strikeThroughColor
+    $strikeThroughColor
   } = _ref10;
-  return strikeThroughColor;
+  return $strikeThroughColor;
 });
 const TypographyContainer = /*#__PURE__*/_styledComponents.default.div.withConfig({
   displayName: "PriceLockup__TypographyContainer",
   componentId: "components-web__sc-1x6duay-10"
 })(["display:flex;padding-top:", ";"], _ref11 => {
   let {
-    paddingTop
+    $paddingTop
   } = _ref11;
-  return `${paddingTop || 0}px`;
+  return `${$paddingTop || 0}px`;
 });
 const InlineTextWithFootnote = /*#__PURE__*/_styledComponents.default.div.withConfig({
   displayName: "PriceLockup__InlineTextWithFootnote",
@@ -159,7 +159,7 @@ const selectStrikeThroughTokens = _ref13 => {
     strikeThroughColor
   };
 };
-const PriceLockup = /*#__PURE__*/_react.default.forwardRef((_ref14, ref) => {
+const PriceLockup = exports.PriceLockup = /*#__PURE__*/_react.default.forwardRef((_ref14, ref) => {
   let {
     size = 'medium',
     signDirection = 'left',
@@ -177,7 +177,7 @@ const PriceLockup = /*#__PURE__*/_react.default.forwardRef((_ref14, ref) => {
     tokens: priceLockupTokens,
     variant = {},
     copy = 'en',
-    dictionary = _dictionary.default,
+    dictionary = _dictionary.dictionary,
     ...rest
   } = _ref14;
   const viewport = (0, _componentsBase.useViewport)();
@@ -201,7 +201,7 @@ const PriceLockup = /*#__PURE__*/_react.default.forwardRef((_ref14, ref) => {
     strikeThrough
   });
   const isPriceBaseline = variant?.price === PRICE_BASELINE_VARIANT;
-  const typographyTokens = (0, _tokens.default)(themeTokens);
+  const typographyTokens = (0, _tokens.tokens)(themeTokens);
   const priceString = String(price);
   const lastDotPosition = priceString.lastIndexOf('.');
   const lastCommaPosition = priceString.lastIndexOf(',');
@@ -231,7 +231,7 @@ const PriceLockup = /*#__PURE__*/_react.default.forwardRef((_ref14, ref) => {
       }
     };
     return /*#__PURE__*/(0, _jsxRuntime.jsx)(TypographyContainer, {
-      paddingTop: paddingTop,
+      $paddingTop: paddingTop,
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.Typography, {
         ...customProps,
         children: value
@@ -239,7 +239,7 @@ const PriceLockup = /*#__PURE__*/_react.default.forwardRef((_ref14, ref) => {
     });
   };
   const renderCurrencySymbol = () => renderTypography(`${currencySymbol}`, typographyTokens.dollarSign);
-  const renderFootnoteLinks = () => footnoteLinks && footnoteLinks.length > 0 ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_FootnoteLink.default, {
+  const renderFootnoteLinks = () => footnoteLinks && footnoteLinks.length > 0 ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_FootnoteLink.FootnoteLink, {
     fontSize: footnoteLinkFontSize,
     tokens: selectFootnoteLinkStyles(themeTokens),
     number: footnoteLinks,
@@ -252,7 +252,9 @@ const PriceLockup = /*#__PURE__*/_react.default.forwardRef((_ref14, ref) => {
         children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.A11yText, {
           text: a11yText
         }), /*#__PURE__*/(0, _jsxRuntime.jsx)(StrikeThroughContainer, {
-          ...selectStrikeThroughTokens(themeTokens),
+          $strikeThroughPosition: selectStrikeThroughTokens(themeTokens).strikeThroughPosition,
+          $strikeThroughHeight: selectStrikeThroughTokens(themeTokens).strikeThroughHeight,
+          $strikeThroughColor: selectStrikeThroughTokens(themeTokens).strikeThroughColor,
           children: amountComponent
         })]
       });
@@ -261,27 +263,27 @@ const PriceLockup = /*#__PURE__*/_react.default.forwardRef((_ref14, ref) => {
   };
   const renderPrice = () => /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
     children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(PriceContainer, {
-      priceMarginBottom: `${priceMarginBottom}px`,
+      $priceMarginBottom: `${priceMarginBottom}px`,
       children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(PriceTextContainer, {
-        ratePosition: ratePosition,
+        $ratePosition: ratePosition,
         children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(RateContainer, {
           children: [signDirection === 'left' && renderCurrencySymbol(), renderAmount(), cents && renderTypography(`${separator}${cents}`, typographyTokens.cents), signDirection === 'right' && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
             children: ["\xA0", renderCurrencySymbol()]
           })]
         }), rateText && /*#__PURE__*/(0, _jsxRuntime.jsx)(RateTextContainer, {
-          ratePosition: ratePosition,
+          $ratePosition: ratePosition,
           children: renderTypography(rateText, typographyTokens.rate, ratePosition)
         })]
       }), !bottomText && footnoteLinks.length <= 3 && /*#__PURE__*/(0, _jsxRuntime.jsx)(BottomLinksContainer, {
-        bottomLinksMarginLeft: `${bottomLinksMarginLeft}px`,
+        $bottomLinksMarginLeft: `${bottomLinksMarginLeft}px`,
         children: renderFootnoteLinks()
       })]
     }), !bottomText && footnoteLinks.length > 3 && renderFootnoteLinks()]
   });
   const renderFootnoteContent = () => {
     const containerProps = {
-      footnoteMarginTop: `${footnoteMarginTop}px`,
-      footnoteGap: `${footnoteGap}px`
+      $footnoteMarginTop: `${footnoteMarginTop}px`,
+      $footnoteGap: `${footnoteGap}px`
     };
     const shouldUseInline = linkPosition === 'inline';
     const bottomTextContent = shouldUseInline ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(InlineTextWithFootnote, {
@@ -297,7 +299,7 @@ const PriceLockup = /*#__PURE__*/_react.default.forwardRef((_ref14, ref) => {
       children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(FootnoteContainer, {
         ...containerProps,
         children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(BottomTextContainer, {
-          bottomTextMarginTop: `${bottomTextMarginTop}px`,
+          $bottomTextMarginTop: `${bottomTextMarginTop}px`,
           children: bottomTextContent
         }), showFootnotesInContainer && renderFootnoteLinks()]
       }), showFootnotesOutside && renderFootnoteLinks()]
@@ -353,12 +355,12 @@ const PriceLockup = /*#__PURE__*/_react.default.forwardRef((_ref14, ref) => {
   const ariaLabel = selectProps(rest)['aria-label'] ?? getAriaContent();
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(PriceLockupContainer, {
     ...selectProps(rest),
-    alignItemsText: alignItemsText,
+    $alignItemsText: alignItemsText,
     ref: ref,
     role: "group",
     "aria-label": ariaLabel,
     children: [topText && /*#__PURE__*/(0, _jsxRuntime.jsx)(TopTextContainer, {
-      topTextMarginBottom: `${topTextMarginBottom}px`,
+      $topTextMarginBottom: `${topTextMarginBottom}px`,
       children: renderTypography(topText, typographyTokens.topText)
     }), renderPrice(), bottomText && /*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.Divider, {
       testID: "price-lockup-divider",
@@ -455,5 +457,4 @@ PriceLockup.propTypes = {
    * `PriceLockup` tokens
    */
   tokens: (0, _componentsBase.getTokensPropType)('PriceLockup')
-};
-var _default = exports.default = PriceLockup;
+};

package/lib/cjs/PriceLockup/dictionary.js

@@ -3,8 +3,8 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
-var _default = exports.default = {
+exports.dictionary = void 0;
+const dictionary = exports.dictionary = {
   en: {
     price: '%{amount} %{currency}',
     priceWithCents: '%{amount} %{currency} and %{cents} cents',

package/lib/cjs/PriceLockup/tokens.js

@@ -3,9 +3,9 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.tokens = void 0;
 // map typography tokens accordenly
-var _default = _ref => {
+const tokens = _ref => {
   let {
     topTextFontSize,
     fontColor,
@@ -63,4 +63,4 @@ var _default = _ref => {
     }
   };
 };
-exports.default = _default;
+exports.tokens = tokens;

package/lib/cjs/Progress/ProgressBar.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.ProgressBar = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _componentsBase = require("@telus-uds/components-base");
@@ -12,30 +12,25 @@ var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 // Passes React Native-oriented system props through UDS Progress
 const [selectProps, selectedSystemPropTypes] = (0, _componentsBase.selectSystemProps)([_componentsBase.a11yProps, _componentsBase.viewProps]);
-const {
-  Bar: ProgressBarBase
-} = _componentsBase.Progress;
-const Gradient = /*#__PURE__*/_styledComponents.default.div.attrs({
-  'data-testid': 'ProgressBar-Gradient'
-}).withConfig({
+const Gradient = /*#__PURE__*/_styledComponents.default.div.withConfig({
   displayName: "ProgressBar__Gradient",
   componentId: "components-web__sc-1vmzyq5-0"
 })(_ref => {
   let {
-    gradient: {
+    $gradient: {
       angle,
       stops,
       type
     },
-    borderRadius,
-    shadow
+    $borderRadius,
+    $shadow
   } = _ref;
   return {
     height: '100%',
     width: '100%',
     background: `${type}-gradient(${angle}deg, ${stops[0].color}, ${stops[1].color})`,
-    borderRadius,
-    ...(0, _componentsBase.applyShadowToken)(shadow)
+    borderRadius: $borderRadius,
+    ...(0, _componentsBase.applyShadowToken)($shadow)
   };
 });
 
@@ -51,7 +46,7 @@ const Gradient = /*#__PURE__*/_styledComponents.default.div.attrs({
  *
  */
 
-const ProgressBar = /*#__PURE__*/_react.default.forwardRef((_ref2, ref) => {
+const ProgressBar = exports.ProgressBar = /*#__PURE__*/_react.default.forwardRef((_ref2, ref) => {
   let {
     percentage,
     tokens,
@@ -61,7 +56,7 @@ const ProgressBar = /*#__PURE__*/_react.default.forwardRef((_ref2, ref) => {
   } = _ref2;
   const themeTokens = (0, _componentsBase.useThemeTokens)('ProgressBar', tokens, variant);
   const selectedProps = selectProps(rest);
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(ProgressBarBase, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.ProgressBar, {
     percentage: percentage,
     tokens: tokens,
     variant: variant,
@@ -69,7 +64,10 @@ const ProgressBar = /*#__PURE__*/_react.default.forwardRef((_ref2, ref) => {
     offset: offset,
     ...selectedProps,
     children: themeTokens.gradient && /*#__PURE__*/(0, _jsxRuntime.jsx)(Gradient, {
-      ...themeTokens
+      "data-testid": "ProgressBar-Gradient",
+      $gradient: themeTokens.gradient,
+      $borderRadius: themeTokens.borderRadius,
+      $shadow: themeTokens.shadow
     })
   });
 });
@@ -95,5 +93,4 @@ ProgressBar.propTypes = {
     items: _propTypes.default.number,
     current: _propTypes.default.number
   })
-};
-var _default = exports.default = ProgressBar;
+};

package/lib/cjs/QuantitySelector/QuantitySelector.js

@@ -3,14 +3,14 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.QuantitySelector = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _componentsBase = require("@telus-uds/components-base");
 var _utils = require("../utils");
 var _styles = require("./styles");
-var _dictionary = _interopRequireDefault(require("./dictionary"));
-var _SideButton = _interopRequireDefault(require("./SideButton"));
+var _dictionary = require("./dictionary");
+var _QuantitySelectorSideButton = require("./QuantitySelectorSideButton");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const {
@@ -20,7 +20,7 @@ const isNumber = value => {
   return typeof value === 'number' && !isNaN(value);
 };
 const [selectProps, selectedSystemPropTypes] = (0, _componentsBase.selectSystemProps)([_componentsBase.a11yProps, _utils.htmlAttrs]);
-const QuantitySelector = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
+const QuantitySelector = exports.QuantitySelector = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
   let {
     id = 'quantity-selector',
     minNumber,
@@ -32,7 +32,7 @@ const QuantitySelector = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
     hintPosition = 'inline',
     tooltip,
     onChange,
-    dictionary = _dictionary.default,
+    dictionary = _dictionary.dictionary,
     accessibilityLabel,
     copy = 'en',
     variant = {
@@ -159,7 +159,7 @@ const QuantitySelector = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
         children: renderTextInput()
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
         style: flexOrder(0),
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_SideButton.default, {
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_QuantitySelectorSideButton.QuantitySelectorSideButton, {
           isEnabled: isDecreaseEnabled,
           onPress: () => updateNumber(number - 1),
           onDoubleClick: () => updateNumber(number - 1),
@@ -174,7 +174,7 @@ const QuantitySelector = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
         })
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
         style: flexOrder(2),
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_SideButton.default, {
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_QuantitySelectorSideButton.QuantitySelectorSideButton, {
           isEnabled: isIncreaseEnabled,
           onPress: () => updateNumber(number + 1),
           onDoubleClick: () => updateNumber(number + 1),
@@ -283,5 +283,4 @@ QuantitySelector.propTypes = {
    * If true, the quantity selector will be disabled
    */
   inactive: _propTypes.default.bool
-};
-var _default = exports.default = QuantitySelector;
+};