@telus-uds/components-web 4.19.0 → 5.0.0-alpha.0

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,17 +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 _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 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]);
@@ -25,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({
@@ -37,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 = {
@@ -63,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
@@ -156,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
             })
@@ -170,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'),
@@ -194,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,49 +97,49 @@ 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;}"], _ref10 => {
+})(["display:flex;position:relative;align-items:center;&::before{content:'';width:100%;top:", ";height:", ";background:", ";position:absolute;}"], _ref0 => {
   let {
-    strikeThroughPosition
-  } = _ref10;
-  return `${strikeThroughPosition}px`;
-}, _ref11 => {
+    $strikeThroughPosition
+  } = _ref0;
+  return `${$strikeThroughPosition}px`;
+}, _ref1 => {
   let {
-    strikeThroughHeight
-  } = _ref11;
-  return `${strikeThroughHeight}px`;
-}, _ref12 => {
+    $strikeThroughHeight
+  } = _ref1;
+  return `${$strikeThroughHeight}px`;
+}, _ref10 => {
   let {
-    strikeThroughColor
-  } = _ref12;
-  return strikeThroughColor;
+    $strikeThroughColor
+  } = _ref10;
+  return $strikeThroughColor;
 });
 const TypographyContainer = /*#__PURE__*/_styledComponents.default.div.withConfig({
   displayName: "PriceLockup__TypographyContainer",
   componentId: "components-web__sc-1x6duay-10"
-})(["display:flex;padding-top:", ";"], _ref13 => {
+})(["display:flex;padding-top:", ";"], _ref11 => {
   let {
-    paddingTop
-  } = _ref13;
-  return `${paddingTop || 0}px`;
+    $paddingTop
+  } = _ref11;
+  return `${$paddingTop || 0}px`;
 });
 const InlineTextWithFootnote = /*#__PURE__*/_styledComponents.default.div.withConfig({
   displayName: "PriceLockup__InlineTextWithFootnote",
   componentId: "components-web__sc-1x6duay-11"
 })(["display:inline;position:relative;> *:first-child{display:inline;}> *:last-child{display:inline-block;position:relative;top:-0.5em;font-size:0.75em;margin-left:2px;line-height:0;vertical-align:bottom;}"]);
-const selectFootnoteLinkStyles = _ref14 => {
+const selectFootnoteLinkStyles = _ref12 => {
   let {
     footnoteLinkColor,
     footnoteLinkFontName,
     footnoteLinkFontWeight,
     footnoteLinkLineHeight
-  } = _ref14;
+  } = _ref12;
   return {
     color: footnoteLinkColor,
     fontName: footnoteLinkFontName,
@@ -147,19 +147,19 @@ const selectFootnoteLinkStyles = _ref14 => {
     lineHeight: footnoteLinkLineHeight
   };
 };
-const selectStrikeThroughTokens = _ref15 => {
+const selectStrikeThroughTokens = _ref13 => {
   let {
     strikeThroughPosition,
     strikeThroughHeight,
     strikeThroughColor
-  } = _ref15;
+  } = _ref13;
   return {
     strikeThroughHeight,
     strikeThroughPosition,
     strikeThroughColor
   };
 };
-const PriceLockup = /*#__PURE__*/_react.default.forwardRef((_ref16, ref) => {
+const PriceLockup = exports.PriceLockup = /*#__PURE__*/_react.default.forwardRef((_ref14, ref) => {
   let {
     size = 'medium',
     signDirection = 'left',
@@ -177,9 +177,9 @@ const PriceLockup = /*#__PURE__*/_react.default.forwardRef((_ref16, ref) => {
     tokens: priceLockupTokens,
     variant = {},
     copy = 'en',
-    dictionary = _dictionary.default,
+    dictionary = _dictionary.dictionary,
     ...rest
-  } = _ref16;
+  } = _ref14;
   const viewport = (0, _componentsBase.useViewport)();
   const {
     footnoteMarginTop,
@@ -201,7 +201,7 @@ const PriceLockup = /*#__PURE__*/_react.default.forwardRef((_ref16, 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((_ref16, 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((_ref16, 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((_ref16, 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((_ref16, 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((_ref16, 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((_ref16, 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;
+};