@telus-uds/components-web 1.10.0 → 1.11.0

package/lib/NavigationBar/NavigationItem.js

@@ -0,0 +1,111 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _componentsBase = require("@telus-uds/components-base");
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _utils = require("../utils");
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+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; }
+
+const [selectProps, selectedSystemPropTypes] = (0, _componentsBase.selectSystemProps)([_utils.htmlAttrs]);
+const defaultMaxWidth = 192;
+
+const ItemContainer = /*#__PURE__*/_styledComponents.default.div.withConfig({
+  displayName: "NavigationItem__ItemContainer",
+  componentId: "components-web__sc-ql9x7c-0"
+})(_ref => {
+  let {
+    targetWidth
+  } = _ref;
+  return {
+    display: 'flex',
+    flexDirection: 'column',
+    justifyContent: 'center',
+    maxWidth: `${Math.max(defaultMaxWidth, targetWidth ?? 0)}px`,
+    flexGrow: targetWidth ? 1 : 0,
+    flexShrink: 1
+  };
+});
+/**
+ * NavigationItem within a NavigationBar component.
+ *
+ * This is rendered automatically by `NavigationBar` and isn't intended be used directly.
+ */
+
+
+const NavigationItem = /*#__PURE__*/(0, _react.forwardRef)((_ref2, ref) => {
+  let {
+    accessibilityRole = 'link',
+    // @todo switch to 'button' for dropdowns
+    children,
+    id,
+    onClick: handleClick = () => {},
+    selected,
+    accessibilityState = {
+      current: selected ? 'page' : false
+    },
+    href,
+    tokens,
+    variant = {},
+    ...rest
+  } = _ref2;
+  const selectedProps = selectProps(rest);
+  const targetWidth = (0, _componentsBase.useResponsiveProp)({
+    xs: 288,
+    lg: null
+  });
+  const viewport = (0, _componentsBase.useViewport)();
+  const getTokens = (0, _componentsBase.useThemeTokensCallback)('NavigationBar', tokens, variant);
+
+  const getStateTokens = state => getTokens({ ...state,
+    viewport
+  });
+
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(ItemContainer, {
+    targetWidth: targetWidth,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.Button, {
+      accessibilityRole: accessibilityRole,
+      accessibilityState: accessibilityState,
+      onPress: handleClick,
+      ref: ref,
+      tokens: getStateTokens,
+      variant: {
+        selected
+      },
+      href: href,
+      ...selectedProps,
+      children: children
+    })
+  });
+});
+NavigationItem.displayName = 'NavigationItem';
+NavigationItem.propTypes = { ...selectedSystemPropTypes,
+  ..._componentsBase.withLinkRouter.propTypes,
+  onClick: _propTypes.default.func,
+  selected: _propTypes.default.bool,
+  children: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.func]).isRequired
+};
+NavigationItem.defaultProps = {
+  onClick: () => {},
+  selected: false
+};
+
+var _default = (0, _componentsBase.withLinkRouter)(NavigationItem);
+
+exports.default = _default;

package/lib/NavigationBar/NavigationSubMenu.js

@@ -0,0 +1,179 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _componentsBase = require("@telus-uds/components-base");
+
+var _NavigationItem = _interopRequireDefault(require("./NavigationItem"));
+
+var _Listbox = _interopRequireDefault(require("../Listbox"));
+
+var _useOverlaidPosition = _interopRequireDefault(require("../utils/useOverlaidPosition"));
+
+var _resolveItemSelection = _interopRequireDefault(require("./resolveItemSelection"));
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+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; }
+
+/**
+ * A NavigationItem that opens or closes a Listbox of other NavigationItems.
+ *
+ * This is rendered automatically by `NavigationBar` and isn't intended be used directly.
+ */
+const NavigationSubMenu = _ref => {
+  let {
+    children,
+    id,
+    isOpen = false,
+    label,
+    onClick,
+    selectedId,
+    items = [],
+    openOverlayRef,
+    LinkRouter,
+    linkRouterProps
+  } = _ref;
+  const focusTrapRef = (0, _react.useRef)();
+  const maxWidth = 289; // Slightly over 288 of nav item to account for subpixel rounding
+
+  const {
+    align,
+    offsets,
+    minWidth
+  } = (0, _componentsBase.useResponsiveProp)({
+    xs: {
+      align: {
+        top: 'top',
+        left: 'left'
+      },
+      minWidth: maxWidth
+    },
+    sm: {
+      align: {
+        top: 'top',
+        right: 'right'
+      },
+      minWidth: maxWidth
+    },
+    lg: {
+      align: {
+        top: 'bottom',
+        center: 'center'
+      },
+      offsets: {
+        vertical: 4
+      },
+      minWidth: 192
+    }
+  });
+  const {
+    overlaidPosition,
+    sourceRef,
+    targetRef,
+    onTargetLayout,
+    isReady
+  } = (0, _useOverlaidPosition.default)({
+    isShown: isOpen,
+    offsets,
+    align
+  });
+  const {
+    selected
+  } = (0, _resolveItemSelection.default)({
+    id,
+    label,
+    items
+  }, selectedId);
+
+  const handleClick = event => {
+    if (typeof onClick === 'function') onClick(event);
+  };
+
+  const {
+    icoMenu
+  } = (0, _componentsBase.useThemeTokens)('NavigationBar', {}, {}, {
+    expanded: isOpen
+  });
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_NavigationItem.default, {
+      ref: sourceRef,
+      accessibilityRole: "button",
+      id: id,
+      selected: selected,
+      onClick: handleClick,
+      icon: icoMenu,
+      children: _ref2 => {
+        var _textStyles$, _textStyles$2;
+
+        let {
+          textStyles
+        } = _ref2;
+        return [children, /*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.Spacer, {
+          space: 1,
+          direction: "row"
+        }, `${id}_spacer`), /*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.Icon, {
+          icon: icoMenu,
+          variant: {
+            size: 'small'
+          },
+          tokens: {
+            color: (_textStyles$ = textStyles[0]) === null || _textStyles$ === void 0 ? void 0 : _textStyles$.color,
+            size: (_textStyles$2 = textStyles[0]) === null || _textStyles$2 === void 0 ? void 0 : _textStyles$2.fontSize
+          }
+        }, `${id}_icon`)];
+      }
+    }), isOpen && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Listbox.default.Overlay, {
+        overlaidPosition: overlaidPosition,
+        maxWidth: maxWidth,
+        minWidth: minWidth,
+        isReady: isReady,
+        onLayout: onTargetLayout,
+        ref: openOverlayRef,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Listbox.default, {
+          items: items,
+          firstItemRef: targetRef,
+          parentRef: sourceRef,
+          selectedId: selectedId,
+          LinkRouter: LinkRouter,
+          linkRouterProps: linkRouterProps
+        })
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        // This catches and shifts focus to other interactive elements.
+        // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
+        tabIndex: 0,
+        ref: focusTrapRef,
+        onFocus: () => targetRef.current.focus()
+      })]
+    })]
+  });
+};
+
+NavigationSubMenu.displayName = 'NavigationSubMenu'; // @TODO - proper prop types and comments
+
+NavigationSubMenu.propTypes = {
+  children: _propTypes.default.node,
+  id: _propTypes.default.string,
+  isOpen: _propTypes.default.bool,
+  label: _propTypes.default.string,
+  onClick: _propTypes.default.func,
+  selectedId: _propTypes.default.string,
+  items: _propTypes.default.array,
+  openOverlayRef: _propTypes.default.object,
+  LinkRouter: _propTypes.default.elementType,
+  linkRouterProps: _propTypes.default.object
+};
+var _default = NavigationSubMenu;
+exports.default = _default;

package/lib/NavigationBar/collapseItems.js

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

package/lib/NavigationBar/index.js

@@ -0,0 +1,13 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _NavigationBar = _interopRequireDefault(require("./NavigationBar"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var _default = _NavigationBar.default;
+exports.default = _default;

package/lib/PriceLockup/PriceLockup.js

@@ -100,12 +100,25 @@ const StrikeThroughContainer = /*#__PURE__*/_styledComponents.default.div.withCo
   return strikeThroughHeight;
 }, _ref8 => {
   let {
-    strikeThroughBackground
+    strikeThroughColor
   } = _ref8;
-  return strikeThroughBackground;
+  return strikeThroughColor;
 });
 
-const PriceLockup = _ref9 => {
+const selectFootnoteLinkStyles = _ref9 => {
+  let {
+    footnoteLinkColor,
+    footnoteLinkFontName,
+    footnoteLinkFontWeight
+  } = _ref9;
+  return {
+    color: footnoteLinkColor,
+    fontName: footnoteLinkFontName,
+    fontWeight: footnoteLinkFontWeight
+  };
+};
+
+const PriceLockup = _ref10 => {
   let {
     size = 'medium',
     signDirection = 'left',
@@ -121,7 +134,8 @@ const PriceLockup = _ref9 => {
     tokens: priceLockupTokens,
     variant = {},
     ...rest
-  } = _ref9;
+  } = _ref10;
+  const viewport = (0, _componentsBase.useViewport)();
   const {
     footnoteMarginTop,
     footnoteGap,
@@ -130,10 +144,18 @@ const PriceLockup = _ref9 => {
     bottomLinksMarginLeft,
     topTextMarginBottom,
     strikeThroughHeight,
-    strikeThroughBackground,
+    strikeThroughColor,
     fontColor,
-    dividerColor
-  } = (0, _componentsBase.useThemeTokens)('PriceLockup', priceLockupTokens, variant);
+    dividerColor,
+    footnoteLinkFontSize,
+    ...themeTokens
+  } = (0, _componentsBase.useThemeTokens)('PriceLockup', priceLockupTokens, { ...variant,
+    size
+  }, {
+    viewport,
+    strikeThrough
+  });
+  const typographyTokens = (0, _tokens.default)(themeTokens);
   const priceString = String(price);
   const lastDotPosition = priceString.lastIndexOf('.');
   const lastCommaPosition = priceString.lastIndexOf(',');
@@ -143,24 +165,25 @@ const PriceLockup = _ref9 => {
   const hasCents = separatorPosition !== -1 && separatorPosition >= priceString.length - 3;
   const amount = hasCents ? priceString.substring(0, separatorPosition) : priceString;
   const cents = hasCents ? priceString.substring(separatorPosition + 1) : null;
-  const color = strikeThrough ? strikeThroughBackground : fontColor;
 
   const renderTypography = (value, tokens) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.Typography, {
     tokens: { ...tokens,
-      color
+      color: fontColor
     },
     children: value
   });
 
-  const renderCurrencySymbol = () => renderTypography(`${currencySymbol}`, _tokens.default.dollarSign[size]);
+  const renderCurrencySymbol = () => renderTypography(`${currencySymbol}`, typographyTokens.dollarSign);
 
   const renderFootnoteLinks = () => footnoteLinks && footnoteLinks.length > 0 ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_FootnoteLink.default, {
+    fontSize: footnoteLinkFontSize,
+    tokens: selectFootnoteLinkStyles(themeTokens),
     number: footnoteLinks,
     onClick: onClickFootnote
   }) : null;
 
   const renderAmount = () => {
-    const amountComponent = renderTypography(amount, _tokens.default.amount[size]);
+    const amountComponent = renderTypography(amount, typographyTokens.amount);
 
     if (strikeThrough) {
       return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
@@ -168,7 +191,7 @@ const PriceLockup = _ref9 => {
           text: a11yText
         }), /*#__PURE__*/(0, _jsxRuntime.jsx)(StrikeThroughContainer, {
           strikeThroughHeight: `${strikeThroughHeight}px`,
-          strikeThroughBackground: strikeThroughBackground,
+          strikeThroughColor: strikeThroughColor,
           children: amountComponent
         })]
       });
@@ -180,10 +203,10 @@ const PriceLockup = _ref9 => {
   const renderPrice = () => /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
     children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(PriceContainer, {
       priceMarginBottom: `${priceMarginBottom}px`,
-      children: [signDirection === 'left' && renderCurrencySymbol(), renderAmount(), cents && renderTypography(`${separator}${cents}`, _tokens.default.cents[size]), signDirection === 'right' && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+      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, {
-        children: renderTypography(rateText, _tokens.default.rate[size])
+        children: renderTypography(rateText, typographyTokens.rate)
       }), !bottomText && footnoteLinks.length <= 3 && /*#__PURE__*/(0, _jsxRuntime.jsx)(BottomLinksContainer, {
         bottomLinksMarginLeft: `${bottomLinksMarginLeft}px`,
         children: renderFootnoteLinks()
@@ -197,7 +220,7 @@ const PriceLockup = _ref9 => {
       footnoteGap: `${footnoteGap}px`,
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(BottomTextContainer, {
         bottomTextMarginTop: `${bottomTextMarginTop}px`,
-        children: renderTypography(bottomText, _tokens.default.bottomText[size])
+        children: renderTypography(bottomText, typographyTokens.bottomText)
       }), footnoteLinks.length <= 3 && renderFootnoteLinks()]
     }), footnoteLinks.length > 3 && renderFootnoteLinks()]
   });
@@ -209,12 +232,12 @@ const PriceLockup = _ref9 => {
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(PriceLockupContainer, { ...selectProps(rest),
     children: [topText && /*#__PURE__*/(0, _jsxRuntime.jsx)(TopTextContainer, {
       topTextMarginBottom: `${topTextMarginBottom}px`,
-      children: renderTypography(topText, _tokens.default.topText[size])
+      children: renderTypography(topText, typographyTokens.topText)
     }), renderPrice(), bottomText && /*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.Divider, {
       testID: "price-lockup-divider",
       role: "separator",
       tokens: {
-        color: dividerColor
+        color: dividerColor ?? 'rgba(0, 0, 0, 0)'
       }
     }), bottomText && renderFootnoteContent()]
   });

package/lib/PriceLockup/tokens.js

@@ -5,127 +5,60 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 
-var _palette = _interopRequireDefault(require("@telus-uds/palette-allium/build/rn/palette"));
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-const {
-  fontSize: {
-    size14,
-    size16,
-    size20,
-    size28,
-    size36,
-    size40,
-    size64
-  },
-  lineHeight: {
-    ratio1to1,
-    ratio10to7,
-    ratio3to2,
-    ratio8to5,
-    ratio5to4,
-    ratio6to5,
-    ratio9to8,
-    ratio4to3,
-    ratio8to7
-  },
-  letterSpacing: {
-    condensed
-  }
-} = _palette.default;
-const typographyTokens = {
-  topText: {
-    small: {
-      fontSize: size14,
-      lineHeight: ratio10to7
-    },
-    medium: {
-      fontSize: size16,
-      lineHeight: ratio3to2
-    },
-    large: {
-      fontSize: size20,
-      lineHeight: ratio8to5
-    }
-  },
-  dollarSign: {
-    small: {
-      fontSize: size16,
-      lineHeight: ratio5to4
-    },
-    medium: {
-      fontSize: size20,
-      lineHeight: ratio6to5
+// map typography tokens accordenly
+var _default = _ref => {
+  let {
+    topTextFontSize,
+    fontColor,
+    topTextLineHeight,
+    currencySymbolFontSize,
+    currencySymbolLineHeight,
+    currencySymbolFontWeight,
+    amountFontSize,
+    amountLineHeight,
+    amountLetterSpacing,
+    amountFontWeight,
+    centsFontSize,
+    centsLineHeight,
+    rateFontSize,
+    rateLineHeight,
+    bottomTextFontSize,
+    bottomTextLineHeight,
+    rateFontWeight,
+    centsFontWeight
+  } = _ref;
+  return {
+    topText: {
+      fontSize: topTextFontSize,
+      lineHeight: topTextLineHeight
     },
-    large: {
-      fontSize: size36,
-      lineHeight: ratio9to8
-    }
-  },
-  // TODO - fontWeight should have its own const on palette
-  amount: {
-    small: {
-      fontSize: size28,
-      lineHeight: ratio1to1,
-      letterSpacing: condensed,
-      fontWeight: '300'
+    dollarSign: {
+      fontSize: currencySymbolFontSize,
+      lineHeight: currencySymbolLineHeight,
+      fontWeight: currencySymbolFontWeight
     },
-    medium: {
-      fontSize: size40,
-      lineHeight: ratio1to1,
-      letterSpacing: condensed,
-      fontWeight: '300'
+    amount: {
+      color: fontColor,
+      fontSize: amountFontSize,
+      lineHeight: amountLineHeight,
+      letterSpacing: amountLetterSpacing,
+      fontWeight: amountFontWeight
     },
-    large: {
-      fontSize: size64,
-      lineHeight: ratio1to1,
-      letterSpacing: condensed,
-      fontWeight: '300'
-    }
-  },
-  cents: {
-    small: {
-      fontSize: size16,
-      lineHeight: ratio4to3
+    cents: {
+      fontSize: centsFontSize,
+      lineHeight: centsLineHeight,
+      fontWeight: centsFontWeight
     },
-    medium: {
-      fontSize: size20,
-      lineHeight: ratio6to5
+    rate: {
+      fontSize: rateFontSize,
+      lineHeight: rateLineHeight,
+      fontWeight: rateFontWeight
     },
-    large: {
-      fontSize: size36,
-      lineHeight: ratio9to8
+    bottomText: {
+      fontSize: bottomTextFontSize,
+      lineHeight: bottomTextLineHeight
     }
-  },
-  rate: {
-    small: {
-      fontSize: size14,
-      lineHeight: ratio8to7
-    },
-    medium: {
-      fontSize: size16,
-      lineHeight: ratio5to4
-    },
-    large: {
-      fontSize: size20,
-      lineHeight: ratio8to5
-    }
-  },
-  bottomText: {
-    small: {
-      fontSize: size14,
-      lineHeight: ratio10to7
-    },
-    medium: {
-      fontSize: size16,
-      lineHeight: ratio3to2
-    },
-    large: {
-      fontSize: size20,
-      lineHeight: ratio8to5
-    }
-  }
+  };
 };
-var _default = typographyTokens;
+
 exports.default = _default;