@zendeskgarden/react-typography 8.47.0 → 8.48.1

package/dist/index.cjs.js

@@ -79,9 +79,9 @@ function _objectWithoutProperties(source, excluded) {
 }
 
 var COMPONENT_ID$9 = 'typography.blockquote';
-var StyledBlockquote = styled__default['default'].blockquote.attrs({
+var StyledBlockquote = styled__default["default"].blockquote.attrs({
   'data-garden-id': COMPONENT_ID$9,
-  'data-garden-version': '8.47.0'
+  'data-garden-version': '8.48.1'
 }).withConfig({
   displayName: "StyledBlockquote",
   componentId: "sc-1tt3ye0-0"
@@ -139,9 +139,9 @@ var fontStyles = function fontStyles(props) {
   }
   return styled.css(["line-height:", ";color:", ";font-family:", ";font-size:", ";font-weight:", ";direction:", ";"], lineHeight, color, fontFamily, fontSize, fontWeight, direction);
 };
-var StyledFont = styled__default['default'].div.attrs({
+var StyledFont = styled__default["default"].div.attrs({
   'data-garden-id': COMPONENT_ID$8,
-  'data-garden-version': '8.47.0'
+  'data-garden-version': '8.48.1'
 }).withConfig({
   displayName: "StyledFont",
   componentId: "sc-1iildbo-0"
@@ -163,9 +163,9 @@ var colorStyles$3 = function colorStyles(props) {
   var foregroundColor = reactTheming.getColor(hue, shade, props.theme);
   return styled.css(["background-color:", ";color:", ";a &{color:inherit;}"], backgroundColor, foregroundColor);
 };
-var StyledCode = styled__default['default'](StyledFont).attrs({
+var StyledCode = styled__default["default"](StyledFont).attrs({
   'data-garden-id': COMPONENT_ID$7,
-  'data-garden-version': '8.47.0',
+  'data-garden-version': '8.48.1',
   as: 'code'
 }).withConfig({
   displayName: "StyledCode",
@@ -190,9 +190,9 @@ var colorStyles$2 = function colorStyles(props) {
   var foregroundColor = props.isLight ? props.theme.colors.foreground : reactTheming.getColor('neutralHue', 300, props.theme);
   return styled.css(["background-color:", ";color:", ";"], backgroundColor, foregroundColor);
 };
-var StyledCodeBlock = styled__default['default'].pre.attrs({
+var StyledCodeBlock = styled__default["default"].pre.attrs({
   'data-garden-id': COMPONENT_ID$6,
-  'data-garden-version': '8.47.0'
+  'data-garden-version': '8.48.1'
 }).withConfig({
   displayName: "StyledCodeBlock",
   componentId: "sc-5wky57-0"
@@ -208,9 +208,9 @@ StyledCodeBlock.defaultProps = {
 };
 
 var COMPONENT_ID$5 = 'typography.codeblock_container';
-var StyledCodeBlockContainer = styled__default['default'].div.attrs({
+var StyledCodeBlockContainer = styled__default["default"].div.attrs({
   'data-garden-id': COMPONENT_ID$5,
-  'data-garden-version': '8.47.0'
+  'data-garden-version': '8.48.1'
 }).withConfig({
   displayName: "StyledCodeBlockContainer",
   componentId: "sc-14zgbfw-0"
@@ -263,9 +263,9 @@ var lineNumberStyles = function lineNumberStyles(props) {
   }
   return "\n    &::before {\n      display: table-cell;\n      padding-right: ".concat(padding, "px;\n      width: 1px;\n      text-align: right;\n      color: ").concat(color, ";\n      content: counter(linenumber);\n      counter-increment: linenumber;\n    }\n  ");
 };
-var StyledCodeBlockLine = styled__default['default'](StyledFont).attrs({
+var StyledCodeBlockLine = styled__default["default"](StyledFont).attrs({
   'data-garden-id': COMPONENT_ID$4,
-  'data-garden-version': '8.47.0',
+  'data-garden-version': '8.48.1',
   as: 'code',
   isMonospace: true
 }).withConfig({
@@ -309,9 +309,9 @@ var colorStyles = function colorStyles(props) {
   };
   return styled.css(["&.builtin,&.class-name,&.tag:not(.punctuation):not(.attr-name):not(.attr-value):not(.script){color:", ";}&.doctype,&.prolog,&.tag.punctuation:not(.attr-value):not(.script):not(.spread){color:", ";}&.attribute.value,&.attr-value,&.atrule,&.cdata,&.string,&.url.content{color:", ";}&.constant,&.interpolation-punctuation{color:", ";}&.attr-name,&.attr-value.spread,&.environment,&.interpolation,&.parameter,&.property,&.property-access,&.variable{color:", ";}&.parameter.punctuation,&.attr-name + .attr-value.punctuation{color:inherit;}&.regex{color:", ";}&.boolean,&.bold:not(.diff),&.entity,&.important,&.tag:not(.punctuation):not(.attr-name):not(.attr-value):not(.script):not(.class-name){color:", ";}&.number,&.unit{color:", ";}&.assign-left,&.function,&.selector:not(.attribute){color:", ";}&.atrule.rule,&.keyword{color:", ";}&.blockquote,&.comment,&.shebang{color:", ";}", ".language-css &&.plain{color:", ";}", ".language-diff &&.coord{color:", ";}", ".language-diff &&.deleted{color:", ";}", ".language-diff &&.diff{color:", ";}", ".language-diff &&.inserted{color:", ";}"], colors.builtin, colors.punctuation, colors.value, colors.constant, colors.name, colors.regex, colors.boolean, colors.number, colors.function, colors.keyword, colors.comment, StyledCodeBlock, colors.value, StyledCodeBlock, colors.coord, StyledCodeBlock, colors.deleted, StyledCodeBlock, colors.diff, StyledCodeBlock, colors.inserted);
 };
-var StyledCodeBlockToken = styled__default['default'].span.attrs({
+var StyledCodeBlockToken = styled__default["default"].span.attrs({
   'data-garden-id': COMPONENT_ID$3,
-  'data-garden-version': '8.47.0'
+  'data-garden-version': '8.48.1'
 }).withConfig({
   displayName: "StyledCodeBlockToken",
   componentId: "sc-1hkshdq-0"
@@ -327,9 +327,9 @@ StyledCodeBlockToken.defaultProps = {
 };
 
 var COMPONENT_ID$2 = 'typography.ellipsis';
-var StyledEllipsis = styled__default['default'].div.attrs({
+var StyledEllipsis = styled__default["default"].div.attrs({
   'data-garden-id': COMPONENT_ID$2,
-  'data-garden-version': '8.47.0'
+  'data-garden-version': '8.48.1'
 }).withConfig({
   displayName: "StyledEllipsis",
   componentId: "sc-1u4uqmy-0"
@@ -349,14 +349,14 @@ var sizeStyles = function sizeStyles(props) {
   var size = props.theme.iconSizes.md;
   return styled.css(["margin-", ":", ";width:", ";height:", ";"], props.theme.rtl ? 'left' : 'right', margin, size, size);
 };
-var StyledIcon = styled__default['default'](function (_ref) {
+var StyledIcon = styled__default["default"](function (_ref) {
   var children = _ref.children;
       _ref.isStart;
       var props = _objectWithoutProperties(_ref, _excluded$e);
-  return React__default['default'].cloneElement(React.Children.only(children), props);
+  return React__default["default"].cloneElement(React.Children.only(children), props);
 }).attrs({
   'data-garden-id': COMPONENT_ID$1,
-  'data-garden-version': '8.47.0'
+  'data-garden-version': '8.48.1'
 }).withConfig({
   displayName: "StyledIcon",
   componentId: "sc-10rfb5b-0"
@@ -374,9 +374,9 @@ var listStyles = function listStyles(props) {
   return styled.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__default['default'].ol.attrs({
+var StyledOrderedList = styled__default["default"].ol.attrs({
   'data-garden-id': ORDERED_ID$1,
-  'data-garden-version': '8.47.0'
+  'data-garden-version': '8.48.1'
 }).withConfig({
   displayName: "StyledList__StyledOrderedList",
   componentId: "sc-jdbsfi-0"
@@ -389,9 +389,9 @@ StyledOrderedList.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
 var UNORDERED_ID$1 = 'typography.unordered_list';
-var StyledUnorderedList = styled__default['default'].ul.attrs({
+var StyledUnorderedList = styled__default["default"].ul.attrs({
   'data-garden-id': UNORDERED_ID$1,
-  'data-garden-version': '8.47.0'
+  'data-garden-version': '8.48.1'
 }).withConfig({
   displayName: "StyledList__StyledUnorderedList",
   componentId: "sc-jdbsfi-1"
@@ -413,9 +413,9 @@ var listItemStyles = function listItemStyles(props) {
   return styled.css(["line-height:", ";", ";"], reactTheming.getLineHeight(props.theme.lineHeights.md, props.theme.fontSizes.md), props.space !== 'small' && listItemPaddingStyles(props));
 };
 var ORDERED_ID = 'typography.ordered_list_item';
-var StyledOrderedListItem = styled__default['default'](StyledFont).attrs({
+var StyledOrderedListItem = styled__default["default"](StyledFont).attrs({
   'data-garden-id': ORDERED_ID,
-  'data-garden-version': '8.47.0',
+  'data-garden-version': '8.48.1',
   as: 'li'
 }).withConfig({
   displayName: "StyledListItem__StyledOrderedListItem",
@@ -438,9 +438,9 @@ StyledOrderedListItem.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
 var UNORDERED_ID = 'typography.unordered_list_item';
-var StyledUnorderedListItem = styled__default['default'](StyledFont).attrs({
+var StyledUnorderedListItem = styled__default["default"](StyledFont).attrs({
   'data-garden-id': UNORDERED_ID,
-  'data-garden-version': '8.47.0',
+  'data-garden-version': '8.48.1',
   as: 'li'
 }).withConfig({
   displayName: "StyledListItem__StyledUnorderedListItem",
@@ -456,9 +456,9 @@ StyledUnorderedListItem.defaultProps = {
 };
 
 var COMPONENT_ID = 'typography.paragraph';
-var StyledParagraph = styled__default['default'].p.attrs({
+var StyledParagraph = styled__default["default"].p.attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '8.47.0'
+  'data-garden-version': '8.48.1'
 }).withConfig({
   displayName: "StyledParagraph",
   componentId: "sc-zkuftz-0"
@@ -475,10 +475,10 @@ StyledParagraph.defaultProps = {
 };
 
 var _excluded$d = ["tag"];
-var SM = React__default['default'].forwardRef(function (_ref, ref) {
+var SM = React.forwardRef(function (_ref, ref) {
   var tag = _ref.tag,
       other = _objectWithoutProperties(_ref, _excluded$d);
-  return React__default['default'].createElement(StyledFont, _extends({
+  return React__default["default"].createElement(StyledFont, _extends({
     as: tag,
     ref: ref,
     size: "sm"
@@ -486,19 +486,19 @@ var SM = React__default['default'].forwardRef(function (_ref, ref) {
 });
 SM.displayName = 'SM';
 SM.propTypes = {
-  tag: PropTypes__default['default'].any,
-  isBold: PropTypes__default['default'].bool,
-  isMonospace: PropTypes__default['default'].bool
+  tag: PropTypes__default["default"].any,
+  isBold: PropTypes__default["default"].bool,
+  isMonospace: PropTypes__default["default"].bool
 };
 SM.defaultProps = {
   tag: 'div'
 };
 
 var _excluded$c = ["tag"];
-var MD = React__default['default'].forwardRef(function (_ref, ref) {
+var MD = React.forwardRef(function (_ref, ref) {
   var tag = _ref.tag,
       other = _objectWithoutProperties(_ref, _excluded$c);
-  return React__default['default'].createElement(StyledFont, _extends({
+  return React__default["default"].createElement(StyledFont, _extends({
     as: tag,
     ref: ref,
     size: "md"
@@ -506,19 +506,19 @@ var MD = React__default['default'].forwardRef(function (_ref, ref) {
 });
 MD.displayName = 'MD';
 MD.propTypes = {
-  tag: PropTypes__default['default'].any,
-  isBold: PropTypes__default['default'].bool,
-  isMonospace: PropTypes__default['default'].bool
+  tag: PropTypes__default["default"].any,
+  isBold: PropTypes__default["default"].bool,
+  isMonospace: PropTypes__default["default"].bool
 };
 MD.defaultProps = {
   tag: 'div'
 };
 
 var _excluded$b = ["tag"];
-var LG = React__default['default'].forwardRef(function (_ref, ref) {
+var LG = React.forwardRef(function (_ref, ref) {
   var tag = _ref.tag,
       other = _objectWithoutProperties(_ref, _excluded$b);
-  return React__default['default'].createElement(StyledFont, _extends({
+  return React__default["default"].createElement(StyledFont, _extends({
     as: tag,
     ref: ref,
     size: "lg"
@@ -526,19 +526,19 @@ var LG = React__default['default'].forwardRef(function (_ref, ref) {
 });
 LG.displayName = 'LG';
 LG.propTypes = {
-  tag: PropTypes__default['default'].any,
-  isBold: PropTypes__default['default'].bool,
-  isMonospace: PropTypes__default['default'].bool
+  tag: PropTypes__default["default"].any,
+  isBold: PropTypes__default["default"].bool,
+  isMonospace: PropTypes__default["default"].bool
 };
 LG.defaultProps = {
   tag: 'div'
 };
 
 var _excluded$a = ["tag"];
-var XL = React__default['default'].forwardRef(function (_ref, ref) {
+var XL = React.forwardRef(function (_ref, ref) {
   var tag = _ref.tag,
       other = _objectWithoutProperties(_ref, _excluded$a);
-  return React__default['default'].createElement(StyledFont, _extends({
+  return React__default["default"].createElement(StyledFont, _extends({
     as: tag,
     ref: ref,
     size: "xl"
@@ -546,18 +546,18 @@ var XL = React__default['default'].forwardRef(function (_ref, ref) {
 });
 XL.displayName = 'XL';
 XL.propTypes = {
-  tag: PropTypes__default['default'].any,
-  isBold: PropTypes__default['default'].bool
+  tag: PropTypes__default["default"].any,
+  isBold: PropTypes__default["default"].bool
 };
 XL.defaultProps = {
   tag: 'div'
 };
 
 var _excluded$9 = ["tag"];
-var XXL = React__default['default'].forwardRef(function (_ref, ref) {
+var XXL = React.forwardRef(function (_ref, ref) {
   var tag = _ref.tag,
       other = _objectWithoutProperties(_ref, _excluded$9);
-  return React__default['default'].createElement(StyledFont, _extends({
+  return React__default["default"].createElement(StyledFont, _extends({
     as: tag,
     ref: ref,
     size: "xxl"
@@ -565,18 +565,18 @@ var XXL = React__default['default'].forwardRef(function (_ref, ref) {
 });
 XXL.displayName = 'XXL';
 XXL.propTypes = {
-  tag: PropTypes__default['default'].any,
-  isBold: PropTypes__default['default'].bool
+  tag: PropTypes__default["default"].any,
+  isBold: PropTypes__default["default"].bool
 };
 XXL.defaultProps = {
   tag: 'div'
 };
 
 var _excluded$8 = ["tag"];
-var XXXL = React__default['default'].forwardRef(function (_ref, ref) {
+var XXXL = React.forwardRef(function (_ref, ref) {
   var tag = _ref.tag,
       other = _objectWithoutProperties(_ref, _excluded$8);
-  return React__default['default'].createElement(StyledFont, _extends({
+  return React__default["default"].createElement(StyledFont, _extends({
     as: tag,
     ref: ref,
     size: "xxxl"
@@ -584,72 +584,72 @@ var XXXL = React__default['default'].forwardRef(function (_ref, ref) {
 });
 XXXL.displayName = 'XXXL';
 XXXL.propTypes = {
-  tag: PropTypes__default['default'].any,
-  isBold: PropTypes__default['default'].bool
+  tag: PropTypes__default["default"].any,
+  isBold: PropTypes__default["default"].bool
 };
 XXXL.defaultProps = {
   tag: 'div'
 };
 
-var _excluded$7 = ["size", "hue"];
-var Code = React__default['default'].forwardRef(function (_ref, ref) {
+var _excluded$7 = ["size"];
+var Blockquote = React__default["default"].forwardRef(function (_ref, ref) {
   var size = _ref.size,
-      hue = _ref.hue,
       other = _objectWithoutProperties(_ref, _excluded$7);
   var _size;
   if (size === 'small') {
     _size = 'sm';
   } else if (size === 'medium') {
     _size = 'md';
-  } else if (size === 'large') {
-    _size = 'lg';
   } else {
-    _size = 'inherit';
+    _size = 'lg';
   }
-  return React__default['default'].createElement(StyledCode, _extends({
+  return React__default["default"].createElement(StyledBlockquote, _extends({
     ref: ref,
-    size: _size,
-    hue: hue
+    size: _size
   }, other));
 });
-Code.displayName = 'Code';
-Code.propTypes = {
-  hue: PropTypes__default['default'].oneOf(['grey', 'red', 'green', 'yellow']),
-  size: PropTypes__default['default'].oneOf(['small', 'medium', 'large', 'inherit'])
+Blockquote.displayName = 'Blockquote';
+Blockquote.propTypes = {
+  size: PropTypes__default["default"].oneOf(['small', 'medium', 'large'])
 };
-Code.defaultProps = {
-  hue: 'grey',
-  size: 'inherit'
+Blockquote.defaultProps = {
+  size: 'medium'
 };
 
-var _excluded$6 = ["size"];
-var Blockquote = React__default['default'].forwardRef(function (_ref, ref) {
+var _excluded$6 = ["size", "hue"];
+var Code = React.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 {
+  } else if (size === 'large') {
     _size = 'lg';
+  } else {
+    _size = 'inherit';
   }
-  return React__default['default'].createElement(StyledBlockquote, _extends({
+  return React__default["default"].createElement(StyledCode, _extends({
     ref: ref,
-    size: _size
+    size: _size,
+    hue: hue
   }, other));
 });
-Blockquote.displayName = 'Blockquote';
-Blockquote.propTypes = {
-  size: PropTypes__default['default'].oneOf(['small', 'medium', 'large'])
+Code.displayName = 'Code';
+Code.propTypes = {
+  hue: PropTypes__default["default"].oneOf(['grey', 'red', 'green', 'yellow']),
+  size: PropTypes__default["default"].oneOf(['small', 'medium', 'large', 'inherit'])
 };
-Blockquote.defaultProps = {
-  size: 'medium'
+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 CodeBlock = React__default['default'].forwardRef(function (_ref, ref) {
+var CodeBlock = React__default["default"].forwardRef(function (_ref, ref) {
   var children = _ref.children,
       containerProps = _ref.containerProps,
       highlightLines = _ref.highlightLines,
@@ -692,10 +692,10 @@ var CodeBlock = React__default['default'].forwardRef(function (_ref, ref) {
     }
     return retVal;
   };
-  return React__default['default'].createElement(StyledCodeBlockContainer, _extends({}, containerProps, {
+  return React__default["default"].createElement(StyledCodeBlockContainer, _extends({}, containerProps, {
     ref: containerRef,
     tabIndex: containerTabIndex
-  }), React__default['default'].createElement(Highlight__default['default'], {
+  }), React__default["default"].createElement(Highlight__default["default"], {
     Prism: Highlight.Prism,
     code: code ? code.trim() : '',
     language: LANGUAGES.includes(language) ? language : 'tsx'
@@ -704,12 +704,12 @@ var CodeBlock = React__default['default'].forwardRef(function (_ref, ref) {
         tokens = _ref2.tokens,
         getLineProps = _ref2.getLineProps,
         getTokenProps = _ref2.getTokenProps;
-    return React__default['default'].createElement(StyledCodeBlock, _extends({
+    return React__default["default"].createElement(StyledCodeBlock, _extends({
       className: className,
       ref: ref,
       isLight: isLight
     }, other), tokens.map(function (line, index) {
-      return React__default['default'].createElement(StyledCodeBlockLine, _extends({}, getLineProps({
+      return React__default["default"].createElement(StyledCodeBlockLine, _extends({}, getLineProps({
         line: line
       }), {
         key: index,
@@ -720,7 +720,7 @@ var CodeBlock = React__default['default'].forwardRef(function (_ref, ref) {
         diff: getDiff(line),
         size: size ? SIZES[size] : undefined
       }), line.map(function (token, tokenKey) {
-        return React__default['default'].createElement(StyledCodeBlockToken, _extends({}, getTokenProps({
+        return React__default["default"].createElement(StyledCodeBlockToken, _extends({}, getTokenProps({
           token: token
         }), {
           key: tokenKey,
@@ -736,50 +736,19 @@ CodeBlock.defaultProps = {
   size: 'medium'
 };
 
-var _excluded$4 = ["tag"];
-var Span = React__default['default'].forwardRef(function (_ref, ref) {
-  var tag = _ref.tag,
-      other = _objectWithoutProperties(_ref, _excluded$4);
-  return React__default['default'].createElement(StyledFont, _extends({
-    as: tag,
-    ref: ref,
-    size: "inherit"
-  }, other));
-});
-Span.displayName = 'Span';
-Span.propTypes = {
-  tag: PropTypes__default['default'].any,
-  isBold: PropTypes__default['default'].bool,
-  isMonospace: PropTypes__default['default'].bool,
-  hue: PropTypes__default['default'].string
-};
-Span.defaultProps = {
-  tag: 'span'
-};
-var StartIcon = function StartIcon(props) {
-  return React__default['default'].createElement(StyledIcon, _extends({
-    isStart: true
-  }, props));
-};
-var Icon = function Icon(props) {
-  return React__default['default'].createElement(StyledIcon, props);
-};
-Span.StartIcon = StartIcon;
-Span.Icon = Icon;
-
-var _excluded$3 = ["children", "title", "tag"];
-var Ellipsis = React__default['default'].forwardRef(function (_ref, ref) {
+var _excluded$4 = ["children", "title", "tag"];
+var Ellipsis = React.forwardRef(function (_ref, ref) {
   var children = _ref.children,
       title = _ref.title,
       tag = _ref.tag,
-      other = _objectWithoutProperties(_ref, _excluded$3);
+      other = _objectWithoutProperties(_ref, _excluded$4);
   var textContent = undefined;
   if (title !== undefined) {
     textContent = title;
   } else if (typeof children === 'string') {
     textContent = children;
   }
-  return React__default['default'].createElement(StyledEllipsis, _extends({
+  return React__default["default"].createElement(StyledEllipsis, _extends({
     as: tag,
     ref: ref,
     title: textContent
@@ -787,17 +756,17 @@ var Ellipsis = React__default['default'].forwardRef(function (_ref, ref) {
 });
 Ellipsis.displayName = 'Ellipsis';
 Ellipsis.propTypes = {
-  title: PropTypes__default['default'].string,
-  tag: PropTypes__default['default'].any
+  title: PropTypes__default["default"].string,
+  tag: PropTypes__default["default"].any
 };
 Ellipsis.defaultProps = {
   tag: 'div'
 };
 
-var _excluded$2 = ["size"];
-var Paragraph = React__default['default'].forwardRef(function (_ref, ref) {
+var _excluded$3 = ["size"];
+var Paragraph = React.forwardRef(function (_ref, ref) {
   var size = _ref.size,
-      other = _objectWithoutProperties(_ref, _excluded$2);
+      other = _objectWithoutProperties(_ref, _excluded$3);
   var _size;
   if (size === 'small') {
     _size = 'sm';
@@ -806,14 +775,14 @@ var Paragraph = React__default['default'].forwardRef(function (_ref, ref) {
   } else {
     _size = 'lg';
   }
-  return React__default['default'].createElement(StyledParagraph, _extends({
+  return React__default["default"].createElement(StyledParagraph, _extends({
     ref: ref,
     size: _size
   }, other));
 });
 Paragraph.displayName = 'Paragraph';
 Paragraph.propTypes = {
-  size: PropTypes__default['default'].oneOf(['small', 'medium', 'large'])
+  size: PropTypes__default["default"].oneOf(['small', 'medium', 'large'])
 };
 Paragraph.defaultProps = {
   size: 'medium'
@@ -828,43 +797,45 @@ var useOrderedListContext = function useOrderedListContext() {
   return listContext;
 };
 
-var OrderedListItem = React__default['default'].forwardRef(function (props, ref) {
+var OrderedListItem = React.forwardRef(function (props, ref) {
   var _useOrderedListContex = useOrderedListContext(),
       size = _useOrderedListContex.size;
-  return React__default['default'].createElement(StyledOrderedListItem, _extends({
+  return React__default["default"].createElement(StyledOrderedListItem, _extends({
     ref: ref,
     space: size
   }, props));
 });
-OrderedListItem.displayName = 'OrderedListItem';
+OrderedListItem.displayName = 'OrderedList.Item';
+var Item$1 = OrderedListItem;
 
-var _excluded$1 = ["size", "type"];
-var OrderedList = React__default['default'].forwardRef(function (_ref, ref) {
+var _excluded$2 = ["size", "type"];
+var OrderedListComponent = React__default["default"].forwardRef(function (_ref, ref) {
   var size = _ref.size,
       type = _ref.type,
-      other = _objectWithoutProperties(_ref, _excluded$1);
+      other = _objectWithoutProperties(_ref, _excluded$2);
   var value = React.useMemo(function () {
     return {
       size: size
     };
   }, [size]);
-  return React__default['default'].createElement(OrderedListContext.Provider, {
+  return React__default["default"].createElement(OrderedListContext.Provider, {
     value: value
-  }, React__default['default'].createElement(StyledOrderedList, _extends({
+  }, React__default["default"].createElement(StyledOrderedList, _extends({
     ref: ref,
     listType: type
   }, other)));
 });
-OrderedList.displayName = 'OrderedList';
-OrderedList.propTypes = {
-  size: PropTypes__default['default'].oneOf(['small', 'medium', 'large']),
-  type: PropTypes__default['default'].oneOf(['decimal', 'decimal-leading-zero', 'lower-alpha', 'lower-roman', 'upper-alpha', 'upper-roman'])
+OrderedListComponent.displayName = 'OrderedList';
+OrderedListComponent.propTypes = {
+  size: PropTypes__default["default"].oneOf(['small', 'medium', 'large']),
+  type: PropTypes__default["default"].oneOf(['decimal', 'decimal-leading-zero', 'lower-alpha', 'lower-roman', 'upper-alpha', 'upper-roman'])
 };
-OrderedList.defaultProps = {
+OrderedListComponent.defaultProps = {
   size: 'medium',
   type: 'decimal'
 };
-OrderedList.Item = OrderedListItem;
+var OrderedList = OrderedListComponent;
+OrderedList.Item = Item$1;
 
 var UnorderedListContext = React.createContext(undefined);
 var useUnorderedListContext = function useUnorderedListContext() {
@@ -875,43 +846,83 @@ var useUnorderedListContext = function useUnorderedListContext() {
   return listContext;
 };
 
-var UnorderedListItem = React__default['default'].forwardRef(function (props, ref) {
+var UnorderedListItem = React.forwardRef(function (props, ref) {
   var _useUnorderedListCont = useUnorderedListContext(),
       size = _useUnorderedListCont.size;
-  return React__default['default'].createElement(StyledUnorderedListItem, _extends({
+  return React__default["default"].createElement(StyledUnorderedListItem, _extends({
     ref: ref,
     space: size
   }, props));
 });
-UnorderedListItem.displayName = 'UnorderedListItem';
+UnorderedListItem.displayName = 'UnorderedList.Item';
+var Item = UnorderedListItem;
 
-var _excluded = ["size", "type"];
-var UnorderedList = React__default['default'].forwardRef(function (_ref, ref) {
+var _excluded$1 = ["size", "type"];
+var UnorderedListComponent = React.forwardRef(function (_ref, ref) {
   var size = _ref.size,
       type = _ref.type,
-      other = _objectWithoutProperties(_ref, _excluded);
+      other = _objectWithoutProperties(_ref, _excluded$1);
   var value = React.useMemo(function () {
     return {
       size: size
     };
   }, [size]);
-  return React__default['default'].createElement(UnorderedListContext.Provider, {
+  return React__default["default"].createElement(UnorderedListContext.Provider, {
     value: value
-  }, React__default['default'].createElement(StyledUnorderedList, _extends({
+  }, React__default["default"].createElement(StyledUnorderedList, _extends({
     ref: ref,
     listType: type
   }, other)));
 });
-UnorderedList.displayName = 'UnorderedList';
-UnorderedList.propTypes = {
-  size: PropTypes__default['default'].oneOf(['small', 'medium', 'large']),
-  type: PropTypes__default['default'].oneOf(['circle', 'disc', 'square'])
+UnorderedListComponent.displayName = 'UnorderedList';
+UnorderedListComponent.propTypes = {
+  size: PropTypes__default["default"].oneOf(['small', 'medium', 'large']),
+  type: PropTypes__default["default"].oneOf(['circle', 'disc', 'square'])
 };
-UnorderedList.defaultProps = {
+UnorderedListComponent.defaultProps = {
   size: 'medium',
   type: 'disc'
 };
-UnorderedList.Item = UnorderedListItem;
+var UnorderedList = UnorderedListComponent;
+UnorderedList.Item = Item;
+
+var StartIconComponent = function StartIconComponent(props) {
+  return React__default["default"].createElement(StyledIcon, _extends({
+    isStart: true
+  }, props));
+};
+StartIconComponent.displayName = 'Span.StartIcon';
+var StartIcon = StartIconComponent;
+
+var IconComponent = function IconComponent(props) {
+  return React__default["default"].createElement(StyledIcon, props);
+};
+IconComponent.displayName = 'Span.Icon';
+var Icon = IconComponent;
+
+var _excluded = ["tag"];
+var SpanComponent = React.forwardRef(function (_ref, ref) {
+  var tag = _ref.tag,
+      other = _objectWithoutProperties(_ref, _excluded);
+  return React__default["default"].createElement(StyledFont, _extends({
+    as: tag,
+    ref: ref,
+    size: "inherit"
+  }, other));
+});
+SpanComponent.displayName = 'Span';
+SpanComponent.propTypes = {
+  tag: PropTypes__default["default"].any,
+  isBold: PropTypes__default["default"].bool,
+  isMonospace: PropTypes__default["default"].bool,
+  hue: PropTypes__default["default"].string
+};
+SpanComponent.defaultProps = {
+  tag: 'span'
+};
+var Span = SpanComponent;
+Span.Icon = Icon;
+Span.StartIcon = StartIcon;
 
 exports.Blockquote = Blockquote;
 exports.Code = Code;