@zendeskgarden/react-typography 8.49.2 → 8.50.0

package/dist/index.esm.js

@@ -8,7 +8,7 @@
 import React, { Children, forwardRef, useRef, useMemo, createContext, useContext } from 'react';
 import PropTypes from 'prop-types';
 import styled, { css } from 'styled-components';
-import { getColor, retrieveComponentStyles, DEFAULT_THEME, isRtl, getLineHeight } from '@zendeskgarden/react-theming';
+import { retrieveComponentStyles, DEFAULT_THEME, getColor, getLineHeight } from '@zendeskgarden/react-theming';
 import { math } from 'polished';
 import Highlight, { Prism } from 'prism-react-renderer';
 import { useScrollRegion } from '@zendeskgarden/container-scrollregion';
@@ -67,40 +67,61 @@ function _objectWithoutProperties(source, excluded) {
   return target;
 }
 
-var COMPONENT_ID$9 = 'typography.blockquote';
-var StyledBlockquote = styled.blockquote.attrs({
-  'data-garden-id': COMPONENT_ID$9,
-  'data-garden-version': '8.49.2'
-}).withConfig({
-  displayName: "StyledBlockquote",
-  componentId: "sc-1tt3ye0-0"
-})(["margin:0;border-", ":", " solid;border-color:", ";padding:0;padding-", ":", "px;direction:", ";p + &,& + &{margin-top:", ";}", ";"], function (props) {
-  return props.theme.rtl ? 'right' : 'left';
-}, function (props) {
-  return props.theme.shadowWidths.sm;
-}, function (props) {
-  return getColor('neutralHue', 400, props.theme);
-}, function (props) {
-  return props.theme.rtl ? 'right' : 'left';
-}, function (props) {
-  return props.theme.space.base * 4;
-}, function (props) {
-  return props.theme.rtl ? 'rtl' : 'ltr';
-}, function (props) {
-  return props.theme.lineHeights[props.size];
-}, function (props) {
-  return retrieveComponentStyles(COMPONENT_ID$9, props);
-});
-StyledBlockquote.defaultProps = {
-  theme: DEFAULT_THEME,
-  size: 'md'
-};
+function _toConsumableArray(arr) {
+  return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread();
+}
+
+function _arrayWithoutHoles(arr) {
+  if (Array.isArray(arr)) return _arrayLikeToArray(arr);
+}
 
-var COMPONENT_ID$8 = 'typography.font';
+function _iterableToArray(iter) {
+  if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter);
+}
+
+function _unsupportedIterableToArray(o, minLen) {
+  if (!o) return;
+  if (typeof o === "string") return _arrayLikeToArray(o, minLen);
+  var n = Object.prototype.toString.call(o).slice(8, -1);
+  if (n === "Object" && o.constructor) n = o.constructor.name;
+  if (n === "Map" || n === "Set") return Array.from(o);
+  if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen);
+}
+
+function _arrayLikeToArray(arr, len) {
+  if (len == null || len > arr.length) len = arr.length;
+
+  for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i];
+
+  return arr2;
+}
+
+function _nonIterableSpread() {
+  throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
+}
+
+var HUE = ['grey', 'red', 'green', 'yellow'];
+var SIZE = ['small', 'medium', 'large'];
+var INHERIT_SIZE = ['inherit'].concat(SIZE);
+var TYPE_ORDERED_LIST = ['decimal', 'decimal-leading-zero', 'lower-alpha', 'lower-roman', 'upper-alpha', 'upper-roman'];
+var TYPE_UNORDERED_LIST = ['circle', 'disc', 'square'];
+var LANGUAGES = ['markup', 'bash', 'clike', 'c', 'cpp', 'css', 'javascript', 'jsx', 'coffeescript', 'actionscript', 'css-extr', 'diff', 'git', 'go', 'graphql', 'handlebars', 'json', 'less', 'makefile', 'markdown', 'objectivec', 'ocaml', 'python', 'reason', 'sass', 'scss', 'sql', 'stylus', 'tsx', 'typescript', 'wasm', 'yaml'];
+
+var COMPONENT_ID$9 = 'typography.font';
+var TYPOGRAPHY_SIZE = [].concat(_toConsumableArray(SIZE), ['extralarge', '2xlarge', '3xlarge']);
+['inherit'].concat(_toConsumableArray(TYPOGRAPHY_SIZE));
+var THEME_SIZES = {
+  small: 'sm',
+  medium: 'md',
+  large: 'lg',
+  extralarge: 'xl',
+  '2xlarge': 'xxl',
+  '3xlarge': 'xxxl'
+};
 var fontStyles = function fontStyles(props) {
-  var monospace = props.isMonospace && ['sm', 'md', 'lg', 'inherit'].indexOf(props.size) !== -1;
+  var monospace = props.isMonospace && ['inherit', 'small', 'medium', 'large'].indexOf(props.size) !== -1;
   var fontFamily = monospace && props.theme.fonts.mono;
-  var direction = isRtl(props) ? 'rtl' : 'ltr';
+  var direction = props.theme.rtl ? 'rtl' : 'ltr';
   var fontSize;
   var fontWeight;
   var lineHeight;
@@ -110,12 +131,14 @@ var fontStyles = function fontStyles(props) {
       fontSize = 'calc(1em - 1px)';
       lineHeight = 'normal';
     } else {
-      fontSize = math("".concat(props.theme.fontSizes[props.size], " - 1px"));
-      lineHeight = math("".concat(props.theme.lineHeights[props.size], " - 1px"));
+      var themeSize = THEME_SIZES[props.size];
+      fontSize = math("".concat(props.theme.fontSizes[themeSize], " - 1px"));
+      lineHeight = math("".concat(props.theme.lineHeights[themeSize], " - 1px"));
     }
   } else if (props.size !== 'inherit') {
-    fontSize = props.theme.fontSizes[props.size];
-    lineHeight = props.theme.lineHeights[props.size];
+    var _themeSize = THEME_SIZES[props.size];
+    fontSize = props.theme.fontSizes[_themeSize];
+    lineHeight = props.theme.lineHeights[_themeSize];
   }
   if (props.isBold === true) {
     fontWeight = props.theme.fontWeights.semibold;
@@ -129,21 +152,49 @@ var fontStyles = function fontStyles(props) {
   return css(["line-height:", ";color:", ";font-family:", ";font-size:", ";font-weight:", ";direction:", ";"], lineHeight, color, fontFamily, fontSize, fontWeight, direction);
 };
 var StyledFont = styled.div.attrs({
-  'data-garden-id': COMPONENT_ID$8,
-  'data-garden-version': '8.49.2'
+  'data-garden-id': COMPONENT_ID$9,
+  'data-garden-version': '8.50.0'
 }).withConfig({
   displayName: "StyledFont",
   componentId: "sc-1iildbo-0"
 })(["", ";", ";"], function (props) {
   return fontStyles(props);
 }, function (props) {
-  return retrieveComponentStyles(COMPONENT_ID$8, props);
+  return retrieveComponentStyles(COMPONENT_ID$9, props);
 });
 StyledFont.defaultProps = {
   theme: DEFAULT_THEME,
   size: 'inherit'
 };
 
+var COMPONENT_ID$8 = 'typography.blockquote';
+var StyledBlockquote = styled.blockquote.attrs({
+  'data-garden-id': COMPONENT_ID$8,
+  'data-garden-version': '8.50.0'
+}).withConfig({
+  displayName: "StyledBlockquote",
+  componentId: "sc-1tt3ye0-0"
+})(["margin:0;border-", ":", " solid;border-color:", ";padding:0;padding-", ":", "px;direction:", ";p + &,& + &{margin-top:", ";}", ";"], function (props) {
+  return props.theme.rtl ? 'right' : 'left';
+}, function (props) {
+  return props.theme.shadowWidths.sm;
+}, function (props) {
+  return getColor('neutralHue', 400, props.theme);
+}, function (props) {
+  return props.theme.rtl ? 'right' : 'left';
+}, function (props) {
+  return props.theme.space.base * 4;
+}, function (props) {
+  return props.theme.rtl ? 'rtl' : 'ltr';
+}, function (props) {
+  return props.theme.lineHeights[THEME_SIZES[props.size]];
+}, function (props) {
+  return retrieveComponentStyles(COMPONENT_ID$8, props);
+});
+StyledBlockquote.defaultProps = {
+  theme: DEFAULT_THEME
+};
+
 var COMPONENT_ID$7 = 'typography.code';
 var colorStyles$3 = function colorStyles(props) {
   var hue = props.hue || 'neutralHue';
@@ -154,7 +205,7 @@ var colorStyles$3 = function colorStyles(props) {
 };
 var StyledCode = styled(StyledFont).attrs({
   'data-garden-id': COMPONENT_ID$7,
-  'data-garden-version': '8.49.2',
+  'data-garden-version': '8.50.0',
   as: 'code'
 }).withConfig({
   displayName: "StyledCode",
@@ -181,7 +232,7 @@ var colorStyles$2 = function colorStyles(props) {
 };
 var StyledCodeBlock = styled.pre.attrs({
   'data-garden-id': COMPONENT_ID$6,
-  'data-garden-version': '8.49.2'
+  'data-garden-version': '8.50.0'
 }).withConfig({
   displayName: "StyledCodeBlock",
   componentId: "sc-5wky57-0"
@@ -199,7 +250,7 @@ StyledCodeBlock.defaultProps = {
 var COMPONENT_ID$5 = 'typography.codeblock_container';
 var StyledCodeBlockContainer = styled.div.attrs({
   'data-garden-id': COMPONENT_ID$5,
-  'data-garden-version': '8.49.2'
+  'data-garden-version': '8.50.0'
 }).withConfig({
   displayName: "StyledCodeBlockContainer",
   componentId: "sc-14zgbfw-0"
@@ -243,9 +294,9 @@ var lineNumberStyles = function lineNumberStyles(props) {
   var padding;
   if (props.language && props.language === 'diff') {
     padding = 0;
-  } else if (props.size === 'sm') {
+  } else if (props.size === 'small') {
     padding = props.theme.space.base * 4;
-  } else if (props.size === 'lg') {
+  } else if (props.size === 'large') {
     padding = props.theme.space.base * 7;
   } else {
     padding = props.theme.space.base * 6;
@@ -254,14 +305,14 @@ var lineNumberStyles = function lineNumberStyles(props) {
 };
 var StyledCodeBlockLine = styled(StyledFont).attrs({
   'data-garden-id': COMPONENT_ID$4,
-  'data-garden-version': '8.49.2',
+  'data-garden-version': '8.50.0',
   as: 'code',
   isMonospace: true
 }).withConfig({
   displayName: "StyledCodeBlockLine",
   componentId: "sc-1goay17-0"
 })(["display:table-row;height:", ";direction:ltr;", ";", ";&::after{display:inline-block;width:", "px;content:'';}", ";"], function (props) {
-  return props.theme.lineHeights[props.size];
+  return props.theme.lineHeights[THEME_SIZES[props.size]];
 }, function (props) {
   return colorStyles$1(props);
 }, function (props) {
@@ -272,7 +323,6 @@ var StyledCodeBlockLine = styled(StyledFont).attrs({
   return retrieveComponentStyles(COMPONENT_ID$4, props);
 });
 StyledCodeBlockLine.defaultProps = {
-  size: 'md',
   theme: DEFAULT_THEME
 };
 
@@ -300,7 +350,7 @@ var colorStyles = function colorStyles(props) {
 };
 var StyledCodeBlockToken = styled.span.attrs({
   'data-garden-id': COMPONENT_ID$3,
-  'data-garden-version': '8.49.2'
+  'data-garden-version': '8.50.0'
 }).withConfig({
   displayName: "StyledCodeBlockToken",
   componentId: "sc-1hkshdq-0"
@@ -318,12 +368,12 @@ StyledCodeBlockToken.defaultProps = {
 var COMPONENT_ID$2 = 'typography.ellipsis';
 var StyledEllipsis = styled.div.attrs({
   'data-garden-id': COMPONENT_ID$2,
-  'data-garden-version': '8.49.2'
+  'data-garden-version': '8.50.0'
 }).withConfig({
   displayName: "StyledEllipsis",
   componentId: "sc-1u4uqmy-0"
 })(["overflow:hidden;text-overflow:ellipsis;white-space:nowrap;direction:", ";", ";"], function (props) {
-  return isRtl(props) ? 'rtl' : 'ltr';
+  return props.theme.rtl ? 'rtl' : 'ltr';
 }, function (props) {
   return retrieveComponentStyles(COMPONENT_ID$2, props);
 });
@@ -331,7 +381,7 @@ StyledEllipsis.defaultProps = {
   theme: DEFAULT_THEME
 };
 
-var _excluded$e = ["children", "isStart"];
+var _excluded$c = ["children", "isStart"];
 var COMPONENT_ID$1 = 'typography.icon';
 var sizeStyles = function sizeStyles(props) {
   var margin = props.isStart && "".concat(props.theme.space.base * 2, "px");
@@ -341,11 +391,11 @@ var sizeStyles = function sizeStyles(props) {
 var StyledIcon = styled(function (_ref) {
   var children = _ref.children;
       _ref.isStart;
-      var props = _objectWithoutProperties(_ref, _excluded$e);
+      var props = _objectWithoutProperties(_ref, _excluded$c);
   return React.cloneElement(Children.only(children), props);
 }).attrs({
   'data-garden-id': COMPONENT_ID$1,
-  'data-garden-version': '8.49.2'
+  'data-garden-version': '8.50.0'
 }).withConfig({
   displayName: "StyledIcon",
   componentId: "sc-10rfb5b-0"
@@ -359,13 +409,13 @@ StyledIcon.defaultProps = {
 };
 
 var listStyles = function listStyles(props) {
-  var rtl = isRtl(props);
+  var rtl = props.theme.rtl;
   return css(["direction:", ";margin:0;margin-", ":24px;padding:0;list-style-position:outside;list-style-type:", ";"], rtl ? 'rtl' : 'ltr', rtl ? 'right' : 'left', props.listType);
 };
 var ORDERED_ID$1 = 'typography.ordered_list';
 var StyledOrderedList = styled.ol.attrs({
   'data-garden-id': ORDERED_ID$1,
-  'data-garden-version': '8.49.2'
+  'data-garden-version': '8.50.0'
 }).withConfig({
   displayName: "StyledList__StyledOrderedList",
   componentId: "sc-jdbsfi-0"
@@ -380,7 +430,7 @@ StyledOrderedList.defaultProps = {
 var UNORDERED_ID$1 = 'typography.unordered_list';
 var StyledUnorderedList = styled.ul.attrs({
   'data-garden-id': UNORDERED_ID$1,
-  'data-garden-version': '8.49.2'
+  'data-garden-version': '8.50.0'
 }).withConfig({
   displayName: "StyledList__StyledUnorderedList",
   componentId: "sc-jdbsfi-1"
@@ -404,17 +454,17 @@ var listItemStyles = function listItemStyles(props) {
 var ORDERED_ID = 'typography.ordered_list_item';
 var StyledOrderedListItem = styled(StyledFont).attrs({
   'data-garden-id': ORDERED_ID,
-  'data-garden-version': '8.49.2',
+  'data-garden-version': '8.50.0',
   as: 'li'
 }).withConfig({
   displayName: "StyledListItem__StyledOrderedListItem",
   componentId: "sc-9rsipg-0"
 })(["margin-", ":", ";padding-", ":", ";", ";", ";"], function (props) {
-  return isRtl(props) ? 'right' : 'left';
+  return props.theme.rtl ? 'right' : 'left';
 }, function (props) {
   return math("".concat(props.theme.space.base, " * -1px"));
 }, function (props) {
-  return isRtl(props) ? 'right' : 'left';
+  return props.theme.rtl ? 'right' : 'left';
 }, function (props) {
   return math("".concat(props.theme.space.base, " * 1px"));
 }, function (props) {
@@ -429,7 +479,7 @@ StyledOrderedListItem.defaultProps = {
 var UNORDERED_ID = 'typography.unordered_list_item';
 var StyledUnorderedListItem = styled(StyledFont).attrs({
   'data-garden-id': UNORDERED_ID,
-  'data-garden-version': '8.49.2',
+  'data-garden-version': '8.50.0',
   as: 'li'
 }).withConfig({
   displayName: "StyledListItem__StyledUnorderedListItem",
@@ -447,30 +497,29 @@ StyledUnorderedListItem.defaultProps = {
 var COMPONENT_ID = 'typography.paragraph';
 var StyledParagraph = styled.p.attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '8.49.2'
+  'data-garden-version': '8.50.0'
 }).withConfig({
   displayName: "StyledParagraph",
   componentId: "sc-zkuftz-0"
 })(["margin:0;padding:0;direction:", ";blockquote + &,& + &{margin-top:", ";}", ";"], function (props) {
   return props.theme.rtl ? 'rtl' : 'ltr';
 }, function (props) {
-  return props.theme.lineHeights[props.size];
+  return props.theme.lineHeights[THEME_SIZES[props.size]];
 }, function (props) {
   return retrieveComponentStyles(COMPONENT_ID, props);
 });
 StyledParagraph.defaultProps = {
-  theme: DEFAULT_THEME,
-  size: 'md'
+  theme: DEFAULT_THEME
 };
 
-var _excluded$d = ["tag"];
+var _excluded$b = ["tag"];
 var SM = forwardRef(function (_ref, ref) {
   var tag = _ref.tag,
-      other = _objectWithoutProperties(_ref, _excluded$d);
+      other = _objectWithoutProperties(_ref, _excluded$b);
   return React.createElement(StyledFont, _extends({
     as: tag,
     ref: ref,
-    size: "sm"
+    size: "small"
   }, other));
 });
 SM.displayName = 'SM';
@@ -483,14 +532,14 @@ SM.defaultProps = {
   tag: 'div'
 };
 
-var _excluded$c = ["tag"];
+var _excluded$a = ["tag"];
 var MD = forwardRef(function (_ref, ref) {
   var tag = _ref.tag,
-      other = _objectWithoutProperties(_ref, _excluded$c);
+      other = _objectWithoutProperties(_ref, _excluded$a);
   return React.createElement(StyledFont, _extends({
     as: tag,
     ref: ref,
-    size: "md"
+    size: "medium"
   }, other));
 });
 MD.displayName = 'MD';
@@ -503,14 +552,14 @@ MD.defaultProps = {
   tag: 'div'
 };
 
-var _excluded$b = ["tag"];
+var _excluded$9 = ["tag"];
 var LG = forwardRef(function (_ref, ref) {
   var tag = _ref.tag,
-      other = _objectWithoutProperties(_ref, _excluded$b);
+      other = _objectWithoutProperties(_ref, _excluded$9);
   return React.createElement(StyledFont, _extends({
     as: tag,
     ref: ref,
-    size: "lg"
+    size: "large"
   }, other));
 });
 LG.displayName = 'LG';
@@ -523,14 +572,14 @@ LG.defaultProps = {
   tag: 'div'
 };
 
-var _excluded$a = ["tag"];
+var _excluded$8 = ["tag"];
 var XL = forwardRef(function (_ref, ref) {
   var tag = _ref.tag,
-      other = _objectWithoutProperties(_ref, _excluded$a);
+      other = _objectWithoutProperties(_ref, _excluded$8);
   return React.createElement(StyledFont, _extends({
     as: tag,
     ref: ref,
-    size: "xl"
+    size: "extralarge"
   }, other));
 });
 XL.displayName = 'XL';
@@ -542,14 +591,14 @@ XL.defaultProps = {
   tag: 'div'
 };
 
-var _excluded$9 = ["tag"];
+var _excluded$7 = ["tag"];
 var XXL = forwardRef(function (_ref, ref) {
   var tag = _ref.tag,
-      other = _objectWithoutProperties(_ref, _excluded$9);
+      other = _objectWithoutProperties(_ref, _excluded$7);
   return React.createElement(StyledFont, _extends({
     as: tag,
     ref: ref,
-    size: "xxl"
+    size: "2xlarge"
   }, other));
 });
 XXL.displayName = 'XXL';
@@ -561,14 +610,14 @@ XXL.defaultProps = {
   tag: 'div'
 };
 
-var _excluded$8 = ["tag"];
+var _excluded$6 = ["tag"];
 var XXXL = forwardRef(function (_ref, ref) {
   var tag = _ref.tag,
-      other = _objectWithoutProperties(_ref, _excluded$8);
+      other = _objectWithoutProperties(_ref, _excluded$6);
   return React.createElement(StyledFont, _extends({
     as: tag,
     ref: ref,
-    size: "xxxl"
+    size: "3xlarge"
   }, other));
 });
 XXXL.displayName = 'XXXL';
@@ -580,64 +629,39 @@ XXXL.defaultProps = {
   tag: 'div'
 };
 
-var _excluded$7 = ["size"];
-var Blockquote = React.forwardRef(function (_ref, ref) {
-  var size = _ref.size,
-      other = _objectWithoutProperties(_ref, _excluded$7);
-  var _size;
-  if (size === 'small') {
-    _size = 'sm';
-  } else if (size === 'medium') {
-    _size = 'md';
-  } else {
-    _size = 'lg';
-  }
+var Blockquote = React.forwardRef(function (props, ref) {
   return React.createElement(StyledBlockquote, _extends({
-    ref: ref,
-    size: _size
-  }, other));
+    ref: ref
+  }, props));
 });
 Blockquote.displayName = 'Blockquote';
 Blockquote.propTypes = {
-  size: PropTypes.oneOf(['small', 'medium', 'large'])
+  size: PropTypes.oneOf(SIZE)
 };
 Blockquote.defaultProps = {
   size: 'medium'
 };
 
-var _excluded$6 = ["size", "hue"];
+var _excluded$5 = ["hue"];
 var Code = forwardRef(function (_ref, ref) {
-  var size = _ref.size,
-      hue = _ref.hue,
-      other = _objectWithoutProperties(_ref, _excluded$6);
-  var _size;
-  if (size === 'small') {
-    _size = 'sm';
-  } else if (size === 'medium') {
-    _size = 'md';
-  } else if (size === 'large') {
-    _size = 'lg';
-  } else {
-    _size = 'inherit';
-  }
+  var hue = _ref.hue,
+      other = _objectWithoutProperties(_ref, _excluded$5);
   return React.createElement(StyledCode, _extends({
     ref: ref,
-    size: _size,
     hue: hue
   }, other));
 });
 Code.displayName = 'Code';
 Code.propTypes = {
-  hue: PropTypes.oneOf(['grey', 'red', 'green', 'yellow']),
-  size: PropTypes.oneOf(['small', 'medium', 'large', 'inherit'])
+  hue: PropTypes.oneOf(HUE),
+  size: PropTypes.oneOf(INHERIT_SIZE)
 };
 Code.defaultProps = {
   hue: 'grey',
   size: 'inherit'
 };
 
-var _excluded$5 = ["children", "containerProps", "highlightLines", "isLight", "isNumbered", "language", "size"];
-var LANGUAGES = ['markup', 'bash', 'clike', 'c', 'cpp', 'css', 'javascript', 'jsx', 'coffeescript', 'actionscript', 'css-extr', 'diff', 'git', 'go', 'graphql', 'handlebars', 'json', 'less', 'makefile', 'markdown', 'objectivec', 'ocaml', 'python', 'reason', 'sass', 'scss', 'sql', 'stylus', 'tsx', 'typescript', 'wasm', 'yaml'];
+var _excluded$4 = ["children", "containerProps", "highlightLines", "isLight", "isNumbered", "language", "size"];
 var CodeBlock = React.forwardRef(function (_ref, ref) {
   var children = _ref.children,
       containerProps = _ref.containerProps,
@@ -646,14 +670,9 @@ var CodeBlock = React.forwardRef(function (_ref, ref) {
       isNumbered = _ref.isNumbered,
       language = _ref.language,
       size = _ref.size,
-      other = _objectWithoutProperties(_ref, _excluded$5);
+      other = _objectWithoutProperties(_ref, _excluded$4);
   var containerRef = useRef(null);
   var code = Array.isArray(children) ? children[0] : children;
-  var SIZES = {
-    small: 'sm',
-    medium: 'md',
-    large: 'lg'
-  };
   var dependency = useMemo(function () {
     return [size, children];
   }, [size, children]);
@@ -707,7 +726,7 @@ var CodeBlock = React.forwardRef(function (_ref, ref) {
         isLight: isLight,
         isNumbered: isNumbered,
         diff: getDiff(line),
-        size: size ? SIZES[size] : undefined
+        size: size
       }), line.map(function (token, tokenKey) {
         return React.createElement(StyledCodeBlockToken, _extends({}, getTokenProps({
           token: token
@@ -725,12 +744,12 @@ CodeBlock.defaultProps = {
   size: 'medium'
 };
 
-var _excluded$4 = ["children", "title", "tag"];
+var _excluded$3 = ["children", "title", "tag"];
 var Ellipsis = forwardRef(function (_ref, ref) {
   var children = _ref.children,
       title = _ref.title,
       tag = _ref.tag,
-      other = _objectWithoutProperties(_ref, _excluded$4);
+      other = _objectWithoutProperties(_ref, _excluded$3);
   var textContent = undefined;
   if (title !== undefined) {
     textContent = title;
@@ -752,26 +771,14 @@ Ellipsis.defaultProps = {
   tag: 'div'
 };
 
-var _excluded$3 = ["size"];
-var Paragraph = forwardRef(function (_ref, ref) {
-  var size = _ref.size,
-      other = _objectWithoutProperties(_ref, _excluded$3);
-  var _size;
-  if (size === 'small') {
-    _size = 'sm';
-  } else if (size === 'medium') {
-    _size = 'md';
-  } else {
-    _size = 'lg';
-  }
+var Paragraph = forwardRef(function (props, ref) {
   return React.createElement(StyledParagraph, _extends({
-    ref: ref,
-    size: _size
-  }, other));
+    ref: ref
+  }, props));
 });
 Paragraph.displayName = 'Paragraph';
 Paragraph.propTypes = {
-  size: PropTypes.oneOf(['small', 'medium', 'large'])
+  size: PropTypes.oneOf(SIZE)
 };
 Paragraph.defaultProps = {
   size: 'medium'
@@ -816,8 +823,8 @@ var OrderedListComponent = React.forwardRef(function (_ref, ref) {
 });
 OrderedListComponent.displayName = 'OrderedList';
 OrderedListComponent.propTypes = {
-  size: PropTypes.oneOf(['small', 'medium', 'large']),
-  type: PropTypes.oneOf(['decimal', 'decimal-leading-zero', 'lower-alpha', 'lower-roman', 'upper-alpha', 'upper-roman'])
+  size: PropTypes.oneOf(SIZE),
+  type: PropTypes.oneOf(TYPE_ORDERED_LIST)
 };
 OrderedListComponent.defaultProps = {
   size: 'medium',
@@ -865,8 +872,8 @@ var UnorderedListComponent = forwardRef(function (_ref, ref) {
 });
 UnorderedListComponent.displayName = 'UnorderedList';
 UnorderedListComponent.propTypes = {
-  size: PropTypes.oneOf(['small', 'medium', 'large']),
-  type: PropTypes.oneOf(['circle', 'disc', 'square'])
+  size: PropTypes.oneOf(SIZE),
+  type: PropTypes.oneOf(TYPE_UNORDERED_LIST)
 };
 UnorderedListComponent.defaultProps = {
   size: 'medium',

package/dist/typings/elements/Blockquote.d.ts

@@ -4,11 +4,8 @@
  * Use of this source code is governed under the Apache License, Version 2.0
  * found at http://www.apache.org/licenses/LICENSE-2.0.
  */
-import React, { BlockquoteHTMLAttributes } from 'react';
-export interface IBlockquoteProps extends BlockquoteHTMLAttributes<HTMLElement> {
-    /** Controls the spacing between sibling blockquotes */
-    size?: 'small' | 'medium' | 'large';
-}
+import React from 'react';
+import { IBlockquoteProps } from '../types';
 /**
  * @extends BlockquoteHTMLAttributes<HTMLElement>
  */

package/dist/typings/elements/Code.d.ts

@@ -4,13 +4,8 @@
  * Use of this source code is governed under the Apache License, Version 2.0
  * found at http://www.apache.org/licenses/LICENSE-2.0.
  */
-import React, { HTMLAttributes } from 'react';
-export interface ICodeProps extends HTMLAttributes<HTMLElement> {
-    /** Applies color to the background and the text */
-    hue?: 'grey' | 'red' | 'green' | 'yellow';
-    /** Adjusts the font size. By default font size is inherited from the surrounding text. */
-    size?: 'small' | 'medium' | 'large' | 'inherit';
-}
+import React from 'react';
+import { ICodeProps } from '../types';
 /**
  * @extends HTMLAttributes<HTMLElement>
  */