@telus-uds/components-web 2.44.0 → 3.0.0

package/lib/PreviewCard/PreviewCard.js

@@ -1,26 +1,18 @@
-"use strict";
+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 styled from 'styled-components';
+import FullBleedContent, { getFullBleedBorderRadius, useFullBleedContentProps } from '../shared/FullBleedContent';
+import AuthorDate from './AuthorDate';
 
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = 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 _jsxRuntime = require("react/jsx-runtime");
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 // Passes React Native-oriented system props through UDS PressableCardBase
-const [selectProps, selectedSystemPropTypes] = (0, _componentsBase.selectSystemProps)([_componentsBase.a11yProps, _componentsBase.focusHandlerProps, _componentsBase.viewProps]);
+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 = /*#__PURE__*/_styledComponents.default.div.withConfig({
+const FullBleedOffsetOuter = /*#__PURE__*/styled.div.withConfig({
   displayName: "PreviewCard__FullBleedOffsetOuter",
   componentId: "components-web__sc-1yfz4de-0"
 })(_ref => {
@@ -32,7 +24,7 @@ const FullBleedOffsetOuter = /*#__PURE__*/_styledComponents.default.div.withConf
     marginTop: borderOffset * 2
   };
 });
-const FullBleedOffsetInner = /*#__PURE__*/_styledComponents.default.div.withConfig({
+const FullBleedOffsetInner = /*#__PURE__*/styled.div.withConfig({
   displayName: "PreviewCard__FullBleedOffsetInner",
   componentId: "components-web__sc-1yfz4de-1"
 })(_ref2 => {
@@ -63,7 +55,7 @@ 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 = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
   let {
     tag,
     title,
@@ -78,7 +70,7 @@ const PreviewCard = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) => {
     fullBleedContentPosition,
     contentStackDirection,
     fullBleedContentProps
-  } = (0, _FullBleedContent.useFullBleedContentProps)({
+  } = useFullBleedContentProps({
     ...fullBleedContent,
     position: 'bottom'
   });
@@ -86,16 +78,16 @@ const PreviewCard = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) => {
     components: {
       PreviewCard: theme
     }
-  } = (0, _componentsBase.useTheme)();
+  } = useTheme();
   const getPressableCardTokens = cardState => ({
-    ...(0, _lodash.default)((0, _componentsBase.getThemeTokens)(theme, {}, {}, cardState), 'separatorColor'),
+    ...omit(getThemeTokens(theme, {}, {}, cardState), 'separatorColor'),
     ...defaultTokens
   });
   const {
     hrefAttrs,
     rest: unusedRest
-  } = _componentsBase.hrefAttrsProp.bundle(rest);
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.PressableCardBase, {
+  } = hrefAttrsProp.bundle(rest);
+  return /*#__PURE__*/_jsx(PressableCardBase, {
     onPress: onPress,
     href: href,
     hrefAttrs: hrefAttrs,
@@ -109,14 +101,14 @@ const PreviewCard = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) => {
       } = getPressableCardTokens(cardState);
       // Stop content jumping around as border size changes
       const borderOffset = borderWidth - theme.tokens.borderWidth;
-      const fullBleedBorderRadius = (0, _FullBleedContent.getFullBleedBorderRadius)(borderRadius + borderOffset, fullBleedContentPosition);
-      return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_componentsBase.StackView, {
+      const fullBleedBorderRadius = getFullBleedBorderRadius(borderRadius + borderOffset, fullBleedContentPosition);
+      return /*#__PURE__*/_jsxs(StackView, {
         direction: contentStackDirection,
         tokens: {
           justifyContent: 'space-between',
           flexGrow: 1
         },
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_componentsBase.Box, {
+        children: [/*#__PURE__*/_jsxs(Box, {
           horizontal: {
             xs: 4,
             lg: 5,
@@ -131,35 +123,35 @@ const PreviewCard = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) => {
               subtract: borderOffset
             }
           },
-          children: [Boolean(tag) && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.Typography, {
+          children: [Boolean(tag) && /*#__PURE__*/_jsxs(_Fragment, {
+            children: [/*#__PURE__*/_jsx(Typography, {
               variant: {
                 size: 'eyebrow'
               },
               children: tag
-            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.Spacer, {
+            }), /*#__PURE__*/_jsx(Spacer, {
               space: 2
             })]
-          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.Typography, {
+          }), /*#__PURE__*/_jsx(Typography, {
             variant: {
               size: 'h4'
             },
             children: title
-          }), Boolean(footer) && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.Spacer, {
+          }), Boolean(footer) && /*#__PURE__*/_jsxs(_Fragment, {
+            children: [/*#__PURE__*/_jsx(Spacer, {
               space: 2
-            }), typeof footer === 'string' ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.Typography, {
+            }), typeof footer === 'string' ? /*#__PURE__*/_jsx(Typography, {
               variant: {
                 size: 'small'
               },
               children: footer
             }) : footer]
           })]
-        }), Boolean(fullBleedContentProps.src || fullBleedContentProps.content) && /*#__PURE__*/(0, _jsxRuntime.jsx)(FullBleedOffsetOuter, {
+        }), Boolean(fullBleedContentProps.src || fullBleedContentProps.content) && /*#__PURE__*/_jsx(FullBleedOffsetOuter, {
           borderOffset: borderOffset,
-          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(FullBleedOffsetInner, {
+          children: /*#__PURE__*/_jsx(FullBleedOffsetInner, {
             borderOffset: borderOffset,
-            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_FullBleedContent.default, {
+            children: /*#__PURE__*/_jsx(FullBleedContent, {
               borderRadius: fullBleedBorderRadius,
               ...fullBleedContentProps
             })
@@ -172,10 +164,10 @@ 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.AuthorDate = AuthorDate;
 PreviewCard.propTypes = {
   ...selectedSystemPropTypes,
-  tokens: (0, _componentsBase.getTokensPropType)('PreviewCard'),
+  tokens: getTokensPropType('PreviewCard'),
   /**
    * The URL of the story to be navigated to. Note that `Video` component does not play well when used within
    * a `PreviewCard` with `href` prop set (the volume and progress sliders can be clicked but are not draggable).
@@ -183,34 +175,33 @@ PreviewCard.propTypes = {
    *
    * @see https://github.com/telus/allium-design-system/issues/6
    */
-  href: _propTypes.default.string,
+  href: PropTypes.string,
   /**
    * Optional function to be called on press e.g. for within-page navigation.
    */
-  onPress: _propTypes.default.func,
+  onPress: PropTypes.func,
   /**
    * Text stating the category of the content.
    */
-  tag: _propTypes.default.string,
+  tag: PropTypes.string,
   /**
    * Section containing additional information, such as author and date.
    * Use `<PreviewCard.AuthorDate author={...} date={...} />` here for author and date.
    */
-  footer: _propTypes.default.oneOfType([_propTypes.default.node, _propTypes.default.string]),
+  footer: PropTypes.oneOfType([PropTypes.node, PropTypes.string]),
   /**
    * Text stating the title or headline of the story.
    */
-  title: _propTypes.default.string.isRequired,
+  title: PropTypes.string.isRequired,
   /**
    * Full bleed image to be placed on the card, deprecated in favor of `fullBleedContent`.
    *
    * @deprecated
    */
-  fullBleedImage: _propTypes.default.exact(_FullBleedContent.default.propTypes || {}),
+  fullBleedImage: PropTypes.exact(FullBleedContent.propTypes || {}),
   /**
    * Full bleed content to be placed on the card.
    */
-  fullBleedContent: _propTypes.default.exact(_FullBleedContent.default.propTypes || {})
+  fullBleedContent: PropTypes.exact(FullBleedContent.propTypes || {})
 };
-var _default = (0, _componentsBase.withLinkRouter)(PreviewCard);
-exports.default = _default;
+export default withLinkRouter(PreviewCard);

package/lib/PreviewCard/index.js

@@ -1,10 +1,2 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _PreviewCard = _interopRequireDefault(require("./PreviewCard"));
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-var _default = _PreviewCard.default;
-exports.default = _default;
+import PreviewCard from './PreviewCard';
+export default PreviewCard;

package/lib/PriceLockup/PriceLockup.js

@@ -1,20 +1,13 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = 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 _utils = require("../utils");
-var _jsxRuntime = require("react/jsx-runtime");
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-const [selectProps, selectedSystemPropTypes] = (0, _componentsBase.selectSystemProps)([_utils.htmlAttrs]);
-const PriceLockupContainer = /*#__PURE__*/_styledComponents.default.div.withConfig({
+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 } from '../utils';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+const [selectProps, selectedSystemPropTypes] = selectSystemProps([htmlAttrs]);
+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 => {
@@ -23,7 +16,7 @@ const PriceLockupContainer = /*#__PURE__*/_styledComponents.default.div.withConf
   } = _ref;
   return alignItemsText;
 });
-const PriceContainer = /*#__PURE__*/_styledComponents.default.div.withConfig({
+const PriceContainer = /*#__PURE__*/styled.div.withConfig({
   displayName: "PriceLockup__PriceContainer",
   componentId: "components-web__sc-1x6duay-1"
 })(["display:flex;margin-bottom:", ";"], _ref2 => {
@@ -32,7 +25,7 @@ const PriceContainer = /*#__PURE__*/_styledComponents.default.div.withConfig({
   } = _ref2;
   return priceMarginBottom;
 });
-const FootnoteContainer = /*#__PURE__*/_styledComponents.default.div.withConfig({
+const FootnoteContainer = /*#__PURE__*/styled.div.withConfig({
   displayName: "PriceLockup__FootnoteContainer",
   componentId: "components-web__sc-1x6duay-2"
 })(["display:flex;margin-top:", ";gap:", ";"], _ref3 => {
@@ -46,7 +39,7 @@ const FootnoteContainer = /*#__PURE__*/_styledComponents.default.div.withConfig(
   } = _ref4;
   return footnoteGap;
 });
-const BottomTextContainer = /*#__PURE__*/_styledComponents.default.div.withConfig({
+const BottomTextContainer = /*#__PURE__*/styled.div.withConfig({
   displayName: "PriceLockup__BottomTextContainer",
   componentId: "components-web__sc-1x6duay-3"
 })(["margin-top:", ";"], _ref5 => {
@@ -55,7 +48,7 @@ const BottomTextContainer = /*#__PURE__*/_styledComponents.default.div.withConfi
   } = _ref5;
   return bottomTextMarginTop;
 });
-const BottomLinksContainer = /*#__PURE__*/_styledComponents.default.div.withConfig({
+const BottomLinksContainer = /*#__PURE__*/styled.div.withConfig({
   displayName: "PriceLockup__BottomLinksContainer",
   componentId: "components-web__sc-1x6duay-4"
 })(["align-self:center;margin-left:", ";"], _ref6 => {
@@ -64,7 +57,7 @@ const BottomLinksContainer = /*#__PURE__*/_styledComponents.default.div.withConf
   } = _ref6;
   return bottomLinksMarginLeft;
 });
-const TopTextContainer = /*#__PURE__*/_styledComponents.default.div.withConfig({
+const TopTextContainer = /*#__PURE__*/styled.div.withConfig({
   displayName: "PriceLockup__TopTextContainer",
   componentId: "components-web__sc-1x6duay-5"
 })(["margin-bottom:", ";"], _ref7 => {
@@ -73,7 +66,7 @@ const TopTextContainer = /*#__PURE__*/_styledComponents.default.div.withConfig({
   } = _ref7;
   return topTextMarginBottom;
 });
-const PriceTextContainer = /*#__PURE__*/_styledComponents.default.div.withConfig({
+const PriceTextContainer = /*#__PURE__*/styled.div.withConfig({
   displayName: "PriceLockup__PriceTextContainer",
   componentId: "components-web__sc-1x6duay-6"
 })(["display:flex;flex-direction:", ";"], _ref8 => {
@@ -82,11 +75,11 @@ const PriceTextContainer = /*#__PURE__*/_styledComponents.default.div.withConfig
   } = _ref8;
   return ratePosition === 'bottom' ? 'column' : 'row';
 });
-const RateContainer = /*#__PURE__*/_styledComponents.default.div.withConfig({
+const RateContainer = /*#__PURE__*/styled.div.withConfig({
   displayName: "PriceLockup__RateContainer",
   componentId: "components-web__sc-1x6duay-7"
 })(["display:flex;"]);
-const RateTextContainer = /*#__PURE__*/_styledComponents.default.div.withConfig({
+const RateTextContainer = /*#__PURE__*/styled.div.withConfig({
   displayName: "PriceLockup__RateTextContainer",
   componentId: "components-web__sc-1x6duay-8"
 })(["align-self:", ";"], _ref9 => {
@@ -95,7 +88,7 @@ const RateTextContainer = /*#__PURE__*/_styledComponents.default.div.withConfig(
   } = _ref9;
   return ratePosition === 'bottom' ? 'flex-start' : 'flex-end';
 });
-const StrikeThroughContainer = /*#__PURE__*/_styledComponents.default.div.withConfig({
+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 => {
@@ -140,7 +133,7 @@ const selectStrikeThroughTokens = _ref14 => {
     strikeThroughColor
   };
 };
-const PriceLockup = /*#__PURE__*/_react.default.forwardRef((_ref15, ref) => {
+const PriceLockup = /*#__PURE__*/React.forwardRef((_ref15, ref) => {
   let {
     size = 'medium',
     signDirection = 'left',
@@ -158,7 +151,7 @@ const PriceLockup = /*#__PURE__*/_react.default.forwardRef((_ref15, ref) => {
     variant = {},
     ...rest
   } = _ref15;
-  const viewport = (0, _componentsBase.useViewport)();
+  const viewport = useViewport();
   const {
     footnoteMarginTop,
     footnoteGap,
@@ -171,14 +164,14 @@ const PriceLockup = /*#__PURE__*/_react.default.forwardRef((_ref15, ref) => {
     footnoteLinkFontSize,
     alignItemsText,
     ...themeTokens
-  } = (0, _componentsBase.useThemeTokens)('PriceLockup', priceLockupTokens, {
+  } = useThemeTokens('PriceLockup', priceLockupTokens, {
     ...variant,
     size
   }, {
     viewport,
     strikeThrough
   });
-  const typographyTokens = (0, _tokens.default)(themeTokens);
+  const typographyTokens = getTypographyTokens(themeTokens);
   const priceString = String(price);
   const lastDotPosition = priceString.lastIndexOf('.');
   const lastCommaPosition = priceString.lastIndexOf(',');
@@ -203,13 +196,13 @@ const PriceLockup = /*#__PURE__*/_react.default.forwardRef((_ref15, ref) => {
         color: fontColor
       }
     };
-    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.Typography, {
+    return /*#__PURE__*/_jsx(Typography, {
       ...customProps,
       children: value
     });
   };
   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__*/_jsx(FootnoteLink, {
     fontSize: footnoteLinkFontSize,
     tokens: selectFootnoteLinkStyles(themeTokens),
     number: footnoteLinks,
@@ -218,10 +211,10 @@ const PriceLockup = /*#__PURE__*/_react.default.forwardRef((_ref15, ref) => {
   const renderAmount = () => {
     const amountComponent = renderTypography(amount, typographyTokens.amount);
     if (strikeThrough) {
-      return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.A11yText, {
+      return /*#__PURE__*/_jsxs(_Fragment, {
+        children: [/*#__PURE__*/_jsx(A11yText, {
           text: a11yText
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(StrikeThroughContainer, {
+        }), /*#__PURE__*/_jsx(StrikeThroughContainer, {
           ...selectStrikeThroughTokens(themeTokens),
           children: amountComponent
         })]
@@ -229,46 +222,46 @@ const PriceLockup = /*#__PURE__*/_react.default.forwardRef((_ref15, ref) => {
     }
     return amountComponent;
   };
-  const renderPrice = () => /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(PriceContainer, {
+  const renderPrice = () => /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsxs(PriceContainer, {
       priceMarginBottom: `${priceMarginBottom}px`,
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(PriceTextContainer, {
+      children: [/*#__PURE__*/_jsxs(PriceTextContainer, {
         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: [/*#__PURE__*/_jsxs(RateContainer, {
+          children: [signDirection === 'left' && renderCurrencySymbol(), renderAmount(), cents && renderTypography(`${separator}${cents}`, typographyTokens.cents), signDirection === 'right' && /*#__PURE__*/_jsxs(_Fragment, {
             children: ["\xA0", renderCurrencySymbol()]
           })]
-        }), rateText && /*#__PURE__*/(0, _jsxRuntime.jsx)(RateTextContainer, {
+        }), rateText && /*#__PURE__*/_jsx(RateTextContainer, {
           ratePosition: ratePosition,
           children: renderTypography(rateText, typographyTokens.rate, ratePosition)
         })]
-      }), !bottomText && footnoteLinks.length <= 3 && /*#__PURE__*/(0, _jsxRuntime.jsx)(BottomLinksContainer, {
+      }), !bottomText && footnoteLinks.length <= 3 && /*#__PURE__*/_jsx(BottomLinksContainer, {
         bottomLinksMarginLeft: `${bottomLinksMarginLeft}px`,
         children: renderFootnoteLinks()
       })]
     }), !bottomText && footnoteLinks.length > 3 && renderFootnoteLinks()]
   });
-  const renderFootnoteContent = () => /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(FootnoteContainer, {
+  const renderFootnoteContent = () => /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsxs(FootnoteContainer, {
       footnoteMarginTop: `${footnoteMarginTop}px`,
       footnoteGap: `${footnoteGap}px`,
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(BottomTextContainer, {
+      children: [/*#__PURE__*/_jsx(BottomTextContainer, {
         bottomTextMarginTop: `${bottomTextMarginTop}px`,
         children: renderTypography(bottomText, typographyTokens.bottomText)
       }), footnoteLinks.length <= 3 && renderFootnoteLinks()]
     }), footnoteLinks.length > 3 && renderFootnoteLinks()]
   });
   if (strikeThrough && !a11yText) {
-    (0, _utils.warn)('PriceLockup', 'a11yText must be provided with strikethrough pricing');
+    warn('PriceLockup', 'a11yText must be provided with strikethrough pricing');
   }
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(PriceLockupContainer, {
+  return /*#__PURE__*/_jsxs(PriceLockupContainer, {
     ...selectProps(rest),
     alignItemsText: alignItemsText,
     ref: ref,
-    children: [topText && /*#__PURE__*/(0, _jsxRuntime.jsx)(TopTextContainer, {
+    children: [topText && /*#__PURE__*/_jsx(TopTextContainer, {
       topTextMarginBottom: `${topTextMarginBottom}px`,
       children: renderTypography(topText, typographyTokens.topText)
-    }), renderPrice(), bottomText && /*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.Divider, {
+    }), renderPrice(), bottomText && /*#__PURE__*/_jsx(Divider, {
       testID: "price-lockup-divider",
       role: "separator",
       tokens: {
@@ -285,57 +278,56 @@ PriceLockup.propTypes = {
    *
    * Micro for mini cart pricing, small for pricing in product catalogue pages, medium for pricing in product comparison cards and large for pricing in banners and promo cards
    */
-  size: _propTypes.default.oneOf(['micro', 'small', 'medium', 'large']),
+  size: PropTypes.oneOf(['micro', 'small', 'medium', 'large']),
   /**
    * If currency symbol other than `$` to be used
    */
-  currencySymbol: _propTypes.default.string,
+  currencySymbol: PropTypes.string,
   /**
    * Shows additional info above the price
    */
-  topText: _propTypes.default.string,
+  topText: PropTypes.string,
   /**
    * Monetary value (including decimals separated by ".")
    */
-  price: _propTypes.default.string.isRequired,
+  price: PropTypes.string.isRequired,
   /**
    * Shows month/year unit
    */
-  rateText: _propTypes.default.string,
+  rateText: PropTypes.string,
   /**
    * Shows additional info below the price with a `Divider`
    */
-  bottomText: _propTypes.default.string,
+  bottomText: PropTypes.string,
   /**
    * Displays which side the currency should apperar (left, right)
    */
-  signDirection: _propTypes.default.oneOf(['right', 'left']),
+  signDirection: PropTypes.oneOf(['right', 'left']),
   /**
    * Displays where the rate should apperar (bottom, right)
    */
-  ratePosition: _propTypes.default.oneOf(['right', 'bottom']),
+  ratePosition: PropTypes.oneOf(['right', 'bottom']),
   /**
    * Shows additional link for context
    */
-  footnoteLinks: _propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string])),
+  footnoteLinks: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.number, PropTypes.string])),
   /**
    * Function to be called when a footnote link is clicked
    */
-  onClickFootnote: _propTypes.default.func,
+  onClickFootnote: PropTypes.func,
   /**
    * To show price savings comparison
    */
-  strikeThrough: _propTypes.default.bool,
+  strikeThrough: PropTypes.bool,
   /**
    * To provide a11y text for `PriceLockup` component
    *
    * **Note:** a11yText will override strikethrough price, so it must include price (ie. "was 50 dollars per month")
    */
-  a11yText: _propTypes.default.string,
+  a11yText: PropTypes.string,
   /**
    * `PriceLockup` tokens
    */
-  tokens: (0, _componentsBase.getTokensPropType)('PriceLockup')
+  tokens: getTokensPropType('PriceLockup')
 };
-var _default = PriceLockup;
-exports.default = _default;
+export default PriceLockup;

package/lib/PriceLockup/index.js

@@ -1,10 +1,2 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _PriceLockup = _interopRequireDefault(require("./PriceLockup"));
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-var _default = _PriceLockup.default;
-exports.default = _default;
+import PriceLockup from './PriceLockup';
+export default PriceLockup;

package/lib/PriceLockup/tokens.js

@@ -1,11 +1,5 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
 // map typography tokens accordenly
-var _default = _ref => {
+export default _ref => {
   let {
     topTextFontSize,
     fontColor,
@@ -58,5 +52,4 @@ var _default = _ref => {
       lineHeight: bottomTextLineHeight
     }
   };
-};
-exports.default = _default;
+};

package/lib/Progress/ProgressBar.js

@@ -1,21 +1,15 @@
-"use strict";
+import React from 'react';
+import PropTypes from 'prop-types';
+import { getTokensPropType, Progress, selectSystemProps, useThemeTokens, a11yProps, viewProps, variantProp, applyShadowToken } from '@telus-uds/components-base';
+import styled from 'styled-components';
 
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = 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 _jsxRuntime = require("react/jsx-runtime");
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 // Passes React Native-oriented system props through UDS Progress
-const [selectProps, selectedSystemPropTypes] = (0, _componentsBase.selectSystemProps)([_componentsBase.a11yProps, _componentsBase.viewProps]);
+import { jsx as _jsx } from "react/jsx-runtime";
+const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps]);
 const {
   Bar: ProgressBarBase
-} = _componentsBase.Progress;
-const Gradient = /*#__PURE__*/_styledComponents.default.div.attrs({
+} = Progress;
+const Gradient = /*#__PURE__*/styled.div.attrs({
   'data-testid': 'ProgressBar-Gradient'
 }).withConfig({
   displayName: "ProgressBar__Gradient",
@@ -35,7 +29,7 @@ const Gradient = /*#__PURE__*/_styledComponents.default.div.attrs({
     width: '100%',
     background: `${type}-gradient(${angle}deg, ${stops[0].color}, ${stops[1].color})`,
     borderRadius,
-    ...(0, _componentsBase.applyShadowToken)(shadow)
+    ...applyShadowToken(shadow)
   };
 });
 
@@ -50,22 +44,22 @@ const Gradient = /*#__PURE__*/_styledComponents.default.div.attrs({
  * `gradient` is being used here to provide gradient filling.
  *
  */
-const ProgressBar = /*#__PURE__*/_react.default.forwardRef((_ref2, ref) => {
+const ProgressBar = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
   let {
     percentage,
     tokens,
     variant,
     ...rest
   } = _ref2;
-  const themeTokens = (0, _componentsBase.useThemeTokens)('ProgressBar', tokens, variant);
+  const themeTokens = useThemeTokens('ProgressBar', tokens, variant);
   const selectedProps = selectProps(rest);
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(ProgressBarBase, {
+  return /*#__PURE__*/_jsx(ProgressBarBase, {
     percentage: percentage,
     tokens: tokens,
     variant: variant,
     ref: ref,
     ...selectedProps,
-    children: themeTokens.gradient && /*#__PURE__*/(0, _jsxRuntime.jsx)(Gradient, {
+    children: themeTokens.gradient && /*#__PURE__*/_jsx(Gradient, {
       ...themeTokens
     })
   });
@@ -76,15 +70,14 @@ ProgressBar.propTypes = {
   /**
    * Percentage of completion.
    */
-  percentage: _propTypes.default.number,
+  percentage: PropTypes.number,
   /**
    * ProgressBar tokens.
    */
-  tokens: (0, _componentsBase.getTokensPropType)('ProgressBar'),
+  tokens: getTokensPropType('ProgressBar'),
   /**
    * ProgressBar variant.
    */
-  variant: _componentsBase.variantProp.propType
+  variant: variantProp.propType
 };
-var _default = ProgressBar;
-exports.default = _default;
+export default ProgressBar;