@telus-uds/components-base 1.75.0 → 1.77.0

package/lib/PriceLockup/PriceLockup.js

@@ -0,0 +1,220 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _StyleSheet = _interopRequireDefault(require("react-native-web/dist/cjs/exports/StyleSheet"));
+var _View = _interopRequireDefault(require("react-native-web/dist/cjs/exports/View"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _Divider = _interopRequireDefault(require("../Divider"));
+var _ViewportProvider = require("../ViewportProvider");
+var _ThemeProvider = require("../ThemeProvider");
+var _utils = require("../utils");
+var _renderFootnoteContent = _interopRequireDefault(require("./utils/renderFootnoteContent"));
+var _renderPrice = _interopRequireDefault(require("./utils/renderPrice"));
+var _renderTypography = _interopRequireDefault(require("./utils/renderTypography"));
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+const [selectProps, selectedSystemPropTypes] = (0, _utils.selectSystemProps)([_utils.htmlAttrs, _utils.viewProps]);
+const selectTopTextTypographyTokens = _ref => {
+  let {
+    topTextFontSize,
+    topTextLineHeight
+  } = _ref;
+  return {
+    fontSize: topTextFontSize,
+    lineHeight: topTextLineHeight
+  };
+};
+const selectCurrencySymbolTypographyTokens = _ref2 => {
+  let {
+    currencySymbolFontSize,
+    currencySymbolLineHeight,
+    currencySymbolFontWeight
+  } = _ref2;
+  return {
+    fontSize: currencySymbolFontSize,
+    lineHeight: currencySymbolLineHeight,
+    fontWeight: currencySymbolFontWeight
+  };
+};
+const selectAmountTypographyTokens = _ref3 => {
+  let {
+    amountFontSize,
+    amountLineHeight,
+    amountLetterSpacing,
+    amountFontWeight,
+    fontColor
+  } = _ref3;
+  // This is used to apply the proper line height to the amount
+  const lineHeightMultiplier = 1.18;
+  return {
+    color: fontColor,
+    fontSize: amountFontSize,
+    lineHeight: amountLineHeight * lineHeightMultiplier,
+    letterSpacing: amountLetterSpacing,
+    fontWeight: amountFontWeight
+  };
+};
+const selectCentsTypographyTokens = _ref4 => {
+  let {
+    centsFontSize,
+    centsLineHeight,
+    centsFontWeight
+  } = _ref4;
+  return {
+    fontSize: centsFontSize,
+    lineHeight: centsLineHeight,
+    fontWeight: centsFontWeight
+  };
+};
+const selectRateTypographyTokens = _ref5 => {
+  let {
+    rateFontSize,
+    rateLineHeight,
+    rateFontWeight
+  } = _ref5;
+  return {
+    fontSize: rateFontSize,
+    lineHeight: rateLineHeight,
+    fontWeight: rateFontWeight
+  };
+};
+const selectBottomTextTypographyTokens = _ref6 => {
+  let {
+    bottomTextFontSize,
+    bottomTextLineHeight
+  } = _ref6;
+  return {
+    fontSize: bottomTextFontSize,
+    lineHeight: bottomTextLineHeight
+  };
+};
+const PriceLockup = _ref7 => {
+  let {
+    size = 'medium',
+    signDirection = 'left',
+    footnoteLinks,
+    topText,
+    price,
+    currencySymbol = '$',
+    rateText,
+    ratePosition = 'right',
+    bottomText,
+    onClickFootnote,
+    strikeThrough,
+    a11yText,
+    tokens: priceLockupTokens,
+    variant = {},
+    ...rest
+  } = _ref7;
+  const viewport = (0, _ViewportProvider.useViewport)();
+  const {
+    footnoteMarginTop,
+    footnoteGap,
+    bottomTextMarginTop,
+    priceMarginBottom,
+    bottomLinksMarginLeft,
+    topTextMarginBottom,
+    fontColor,
+    dividerColor,
+    ...themeTokens
+  } = (0, _ThemeProvider.useThemeTokens)('PriceLockup', priceLockupTokens, {
+    ...variant,
+    size
+  }, {
+    viewport,
+    strikeThrough
+  });
+  const currencySymbolTypographyTokens = selectCurrencySymbolTypographyTokens(themeTokens);
+  const amountTypographyTokens = selectAmountTypographyTokens(themeTokens);
+  const centsTypographyTokens = selectCentsTypographyTokens(themeTokens);
+  const rateTypographyTokens = selectRateTypographyTokens(themeTokens);
+  const topTextTypographyTokens = selectTopTextTypographyTokens(themeTokens);
+  const bottomTextTypographyTokens = selectBottomTextTypographyTokens(themeTokens);
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_View.default, {
+    style: [staticStyles.priceLockupContainer, {
+      ...selectProps(rest)
+    }],
+    children: [topText ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+      children: (0, _renderTypography.default)(topText, topTextTypographyTokens)
+    }) : null, (0, _renderPrice.default)(price, rateText, ratePosition, signDirection, currencySymbol, currencySymbolTypographyTokens, amountTypographyTokens, centsTypographyTokens, rateTypographyTokens, fontColor, strikeThrough, a11yText, bottomText, bottomLinksMarginLeft, footnoteLinks, onClickFootnote, themeTokens), bottomText ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Divider.default, {
+        testID: "price-lockup-divider",
+        role: "separator",
+        tokens: {
+          color: dividerColor
+        }
+      }), (0, _renderFootnoteContent.default)(footnoteMarginTop, bottomTextMarginTop, bottomText, bottomTextTypographyTokens, fontColor, footnoteLinks, bottomLinksMarginLeft, onClickFootnote, themeTokens)]
+    }) : null]
+  });
+};
+PriceLockup.displayName = 'PriceLockup';
+PriceLockup.propTypes = {
+  ...selectedSystemPropTypes,
+  /**
+   * Size of the component
+   *
+   * Small for pricing in product catalogue pages, medium for pricing in product comparison cards.
+   */
+  size: _propTypes.default.oneOf(['small', 'medium']),
+  /**
+   * If currency symbol other than `$` to be used
+   */
+  currencySymbol: _propTypes.default.string,
+  /**
+   * Shows additional info above the price
+   */
+  topText: _propTypes.default.string,
+  /**
+   * Monetary value (including decimals separated by ".")
+   */
+  price: _propTypes.default.string.isRequired,
+  /**
+   * Shows month/year unit
+   */
+  rateText: _propTypes.default.string,
+  /**
+   * Shows additional info below the price with a `Divider`
+   */
+  bottomText: _propTypes.default.string,
+  /**
+   * Displays which side the currency should appear (left, right)
+   */
+  signDirection: _propTypes.default.oneOf(['right', 'left']),
+  /**
+   * Displays where the rate should appear (bottom, right)
+   */
+  ratePosition: _propTypes.default.oneOf(['right', 'bottom']),
+  /**
+   * Shows additional link for context
+   */
+  footnoteLinks: _propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string])),
+  /**
+   * Function to be called when a footnote link is clicked
+   */
+  onClickFootnote: _propTypes.default.func,
+  /**
+   * To show price savings comparison
+   */
+  strikeThrough: _propTypes.default.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,
+  /**
+   * `PriceLockup` tokens
+   */
+  tokens: (0, _utils.getTokensPropType)('PriceLockup')
+};
+var _default = PriceLockup;
+exports.default = _default;
+const staticStyles = _StyleSheet.default.create({
+  priceLockupContainer: {
+    alignSelf: 'flex-start'
+  }
+});

package/lib/PriceLockup/index.js

@@ -0,0 +1,10 @@
+"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;

package/lib/PriceLockup/utils/renderFootnoteContent.js

@@ -0,0 +1,93 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _StyleSheet = _interopRequireDefault(require("react-native-web/dist/cjs/exports/StyleSheet"));
+var _View = _interopRequireDefault(require("react-native-web/dist/cjs/exports/View"));
+var _Text = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Text"));
+var _Platform = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Platform"));
+var _renderTypography = _interopRequireDefault(require("./renderTypography"));
+var _renderFootnoteLinks = _interopRequireDefault(require("./renderFootnoteLinks"));
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+const selectFootnoteContainer = _ref => {
+  let {
+    footnoteMarginTop
+  } = _ref;
+  return {
+    marginTop: footnoteMarginTop
+  };
+};
+const selectFootnoteBottomTextContainer = _ref2 => {
+  let {
+    bottomTextMarginTop
+  } = _ref2;
+  return {
+    marginTop: bottomTextMarginTop
+  };
+};
+const selectFootnoteLinksStyles = _ref3 => {
+  let {
+    bottomLinksMarginLeft
+  } = _ref3;
+  return {
+    marginLeft: bottomLinksMarginLeft
+  };
+};
+const renderFootnoteContent = (footnoteMarginTop, bottomTextMarginTop, bottomText, bottomTextTypographyTokens, fontColor, footnoteLinks, bottomLinksMarginLeft, onClickFootnote, themeTokens) => {
+  const MAX_FOOTNOTE_LINKS_ALLOWED = 3;
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_View.default, {
+      style: [staticStyles.footnoteContainer, selectFootnoteContainer({
+        footnoteMarginTop
+      })],
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_Text.default, {
+        style: selectFootnoteBottomTextContainer({
+          bottomTextMarginTop
+        }),
+        children: [(0, _renderTypography.default)(bottomText, bottomTextTypographyTokens, undefined, fontColor), ' ']
+      }), footnoteLinks.length <= MAX_FOOTNOTE_LINKS_ALLOWED ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+        style: [staticStyles.footnoteLinkContainer, selectFootnoteLinksStyles({
+          bottomLinksMarginLeft
+        })],
+        children: (0, _renderFootnoteLinks.default)(footnoteLinks, themeTokens, onClickFootnote)
+      }) : null]
+    }), footnoteLinks.length > MAX_FOOTNOTE_LINKS_ALLOWED ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+      style: staticStyles.verticalFootnoteLinkContainer,
+      children: (0, _renderFootnoteLinks.default)(footnoteLinks, themeTokens, onClickFootnote)
+    }) : null]
+  });
+};
+var _default = renderFootnoteContent;
+exports.default = _default;
+const staticStyles = _StyleSheet.default.create({
+  footnoteContainer: {
+    flexDirection: 'row'
+  },
+  footnoteLinkContainer: {
+    flexDirection: 'row',
+    ..._Platform.default.select({
+      ios: {
+        alignSelf: 'flex-end',
+        top: 2
+      },
+      android: {
+        alignSelf: 'center',
+        top: -8
+      }
+    })
+  },
+  verticalFootnoteLinkContainer: {
+    ..._Platform.default.select({
+      ios: {
+        top: 10
+      },
+      android: {
+        top: -2
+      }
+    })
+  }
+});

package/lib/PriceLockup/utils/renderFootnoteLinks.js

@@ -0,0 +1,36 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _FootnoteLink = _interopRequireDefault(require("../../Footnote/FootnoteLink"));
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+const selectFootnoteLinkStyles = (_ref, footnoteLinks) => {
+  let {
+    footnoteLinkColor,
+    footnoteLinkFontName,
+    footnoteLinkFontWeight,
+    footnoteLinkLineHeight,
+    footnoteLinkFontSize
+  } = _ref;
+  // This is used to apply the proper line height when there is 4 or more footnote links
+  const MAX_FOOTNOTE_LINKS_ALLOWED = 3;
+  const lineHeight = footnoteLinks.length > MAX_FOOTNOTE_LINKS_ALLOWED ? footnoteLinkFontSize * footnoteLinkLineHeight : undefined;
+  return {
+    color: footnoteLinkColor,
+    fontName: footnoteLinkFontName,
+    fontWeight: footnoteLinkFontWeight,
+    lineHeight,
+    fontSize: footnoteLinkFontSize
+  };
+};
+const renderFootnoteLinks = (footnoteLinks, themeTokens, onClickFootnote) => footnoteLinks && footnoteLinks.length > 0 ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_FootnoteLink.default, {
+  tokens: selectFootnoteLinkStyles(themeTokens, footnoteLinks),
+  content: footnoteLinks,
+  onClick: onClickFootnote
+}) : null;
+var _default = renderFootnoteLinks;
+exports.default = _default;

package/lib/PriceLockup/utils/renderPrice.js

@@ -0,0 +1,147 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _StyleSheet = _interopRequireDefault(require("react-native-web/dist/cjs/exports/StyleSheet"));
+var _View = _interopRequireDefault(require("react-native-web/dist/cjs/exports/View"));
+var _Text = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Text"));
+var _Platform = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Platform"));
+var _A11yText = _interopRequireDefault(require("../../A11yText"));
+var _renderTypography = _interopRequireDefault(require("./renderTypography"));
+var _renderFootnoteLinks = _interopRequireDefault(require("./renderFootnoteLinks"));
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+const selectStrikeThroughStyles = _ref => {
+  let {
+    strikeThroughColor
+  } = _ref;
+  return {
+    textDecorationColor: strikeThroughColor
+  };
+};
+const selectFootnoteLinksStyles = _ref2 => {
+  let {
+    bottomLinksMarginLeft
+  } = _ref2;
+  return {
+    marginLeft: bottomLinksMarginLeft
+  };
+};
+const renderCurrencySymbol = (currencySymbol, currencySymbolTypographyTokens, ratePosition, fontColor) => (0, _renderTypography.default)(`${currencySymbol}`, currencySymbolTypographyTokens, ratePosition, fontColor);
+const renderAmount = (amount, amountTypographyTokens, strikeThrough, a11yText, fontColor, themeTokens) => {
+  const amountText = (0, _renderTypography.default)(amount, amountTypographyTokens, undefined, fontColor); // undefined is ratePosition
+  if (strikeThrough) {
+    return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_A11yText.default, {
+        text: a11yText
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Text.default, {
+        style: [staticStyles.strikeThroughContainer, selectStrikeThroughStyles(themeTokens)],
+        children: amountText
+      })]
+    });
+  }
+  return amountText;
+};
+const renderPrice = (price, rateText, ratePosition, signDirection, currencySymbol, currencySymbolTypographyTokens, amountTypographyTokens, centsTypographyTokens, rateTypographyTokens, fontColor, strikeThrough, a11yText, bottomText, bottomLinksMarginLeft, footnoteLinks, onClickFootnote, themeTokens) => {
+  const priceString = price;
+  const lastDotPosition = priceString.lastIndexOf('.');
+  const lastCommaPosition = priceString.lastIndexOf(',');
+  const [separator, separatorPosition] = lastDotPosition > lastCommaPosition ? ['.', lastDotPosition] : [',', lastCommaPosition];
+
+  // If the separator is at the fourth character from the end of the string or more, it's most probably
+  // a part of the amount, and the cents are not included in the price string
+  const EXCLUDE_CENTS = 3;
+  const hasCents = separatorPosition !== -1 && separatorPosition >= priceString.length - EXCLUDE_CENTS;
+  const amount = hasCents ? priceString.substring(0, separatorPosition) : priceString;
+  const cents = hasCents ? priceString.substring(separatorPosition + 1) : null;
+  const footnoteLinkPositionStyles = rateText ? staticStyles.footnoteLinksWithoutBottomText : staticStyles.footnoteLinksWithoutBottomTextAndRateText;
+  const MAX_FOOTNOTE_LINKS_ALLOWED = 3;
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_View.default, {
+      style: ratePosition === 'bottom' ? staticStyles.priceContainerColumn : staticStyles.priceContainerRow,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_View.default, {
+        style: staticStyles.priceContainer,
+        children: [signDirection === 'left' ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Text.default, {
+          children: renderCurrencySymbol(currencySymbol, currencySymbolTypographyTokens, ratePosition, fontColor)
+        }) : null, renderAmount(amount, amountTypographyTokens, strikeThrough, a11yText, fontColor, themeTokens), cents ? (0, _renderTypography.default)(`${separator}${cents}`, centsTypographyTokens, undefined, fontColor) : null, signDirection === 'right' ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Text.default, {
+          style: staticStyles.currencySymbol,
+          children: renderCurrencySymbol(currencySymbol, currencySymbolTypographyTokens, ratePosition, fontColor)
+        }) : null]
+      }), rateText ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Text.default, {
+        style: ratePosition === 'bottom' ? staticStyles.rateTextVerticalPosition : [staticStyles.rateTextPosition, staticStyles.rateTextVerticalPosition],
+        children: (0, _renderTypography.default)(rateText, rateTypographyTokens, ratePosition, fontColor)
+      }) : null, !bottomText && footnoteLinks.length <= MAX_FOOTNOTE_LINKS_ALLOWED ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Text.default, {
+        style: [footnoteLinkPositionStyles, selectFootnoteLinksStyles({
+          bottomLinksMarginLeft
+        })],
+        children: (0, _renderFootnoteLinks.default)(footnoteLinks, themeTokens, onClickFootnote)
+      }) : null]
+    }), !bottomText && footnoteLinks.length > MAX_FOOTNOTE_LINKS_ALLOWED ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+      style: staticStyles.verticalFootnoteLinkContainer,
+      children: (0, _renderFootnoteLinks.default)(footnoteLinks, themeTokens, onClickFootnote)
+    }) : null]
+  });
+};
+var _default = renderPrice;
+exports.default = _default;
+const staticStyles = _StyleSheet.default.create({
+  priceContainerRow: {
+    flexDirection: 'row'
+  },
+  priceContainerColumn: {
+    flexDirection: 'column'
+  },
+  priceContainer: {
+    flexDirection: 'row',
+    alignSelf: 'flex-start',
+    marginTop: 4
+  },
+  currencySymbol: {
+    paddingLeft: 4
+  },
+  verticalFootnoteLinkContainer: {
+    ..._Platform.default.select({
+      ios: {
+        top: 10
+      },
+      android: {
+        top: -2
+      }
+    })
+  },
+  footnoteLinksWithoutBottomText: {
+    ..._Platform.default.select({
+      ios: {
+        alignSelf: 'flex-end',
+        top: -10
+      },
+      android: {
+        alignSelf: 'center',
+        top: -14
+      }
+    })
+  },
+  footnoteLinksWithoutBottomTextAndRateText: {
+    ..._Platform.default.select({
+      ios: {
+        alignSelf: 'center'
+      },
+      android: {
+        alignSelf: 'flex-start'
+      }
+    })
+  },
+  strikeThroughContainer: {
+    textDecorationLine: 'line-through',
+    textDecorationThickness: '1px'
+  },
+  rateTextPosition: {
+    alignSelf: 'flex-end'
+  },
+  rateTextVerticalPosition: {
+    top: -8
+  }
+});

package/lib/PriceLockup/utils/renderTypography.js

@@ -0,0 +1,31 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _Typography = _interopRequireDefault(require("../../Typography"));
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+const renderTypography = (value, themeTokens, ratePosition, fontColor) => {
+  const customProps = ratePosition === 'bottom' ? {
+    variant: {
+      size: 'micro'
+    },
+    tokens: {
+      color: fontColor
+    }
+  } : {
+    tokens: {
+      ...themeTokens,
+      color: fontColor
+    }
+  };
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, {
+    ...customProps,
+    children: value
+  });
+};
+var _default = renderTypography;
+exports.default = _default;

package/lib/Skeleton/Skeleton.js

@@ -34,11 +34,13 @@ const selectSkeletonStyles = _ref => {
 const selectLineStyles = _ref2 => {
   let {
     skeletonHeight,
-    lineWidth
+    lineWidth,
+    radius
   } = _ref2;
   return {
     width: lineWidth,
-    height: skeletonHeight
+    height: skeletonHeight,
+    borderRadius: radius
   };
 };
 const selectShapeStyles = _ref3 => {
@@ -121,7 +123,8 @@ const Skeleton = /*#__PURE__*/(0, _react.forwardRef)((_ref5, ref) => {
     }
     return selectLineStyles({
       skeletonHeight,
-      lineWidth: getLineWidth()
+      lineWidth: getLineWidth(),
+      radius: themeTokens.lineRadius
     });
   };
   const renderSkeleton = function () {

package/lib/index.js

@@ -36,6 +36,7 @@ var _exportNames = {
   Notification: true,
   OrderedList: true,
   Pagination: true,
+  PriceLockup: true,
   Progress: true,
   QuickLinks: true,
   QuickLinksFeature: true,
@@ -285,6 +286,12 @@ Object.defineProperty(exports, "PressableCardBase", {
     return _Card.PressableCardBase;
   }
 });
+Object.defineProperty(exports, "PriceLockup", {
+  enumerable: true,
+  get: function () {
+    return _PriceLockup.default;
+  }
+});
 Object.defineProperty(exports, "Progress", {
   enumerable: true,
   get: function () {
@@ -592,6 +599,7 @@ var _MultiSelectFilter = _interopRequireDefault(require("./MultiSelectFilter"));
 var _Notification = _interopRequireDefault(require("./Notification"));
 var _OrderedList = _interopRequireDefault(require("./OrderedList"));
 var _Pagination = _interopRequireDefault(require("./Pagination"));
+var _PriceLockup = _interopRequireDefault(require("./PriceLockup"));
 var _Progress = _interopRequireDefault(require("./Progress"));
 var _QuickLinks = _interopRequireDefault(require("./QuickLinks"));
 var _QuickLinksFeature = _interopRequireDefault(require("./QuickLinksFeature"));