@zendeskgarden/react-typography 8.46.0 → 8.48.0

package/dist/index.esm.js

@@ -5,7 +5,7 @@
  * found at http://www.apache.org/licenses/LICENSE-2.0.
  */
 
-import React, { Children, useRef, useMemo, createContext, useContext } from 'react';
+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';
@@ -70,7 +70,7 @@ function _objectWithoutProperties(source, excluded) {
 var COMPONENT_ID$9 = 'typography.blockquote';
 var StyledBlockquote = styled.blockquote.attrs({
   'data-garden-id': COMPONENT_ID$9,
-  'data-garden-version': '8.46.0'
+  'data-garden-version': '8.48.0'
 }).withConfig({
   displayName: "StyledBlockquote",
   componentId: "sc-1tt3ye0-0"
@@ -130,7 +130,7 @@ var fontStyles = function fontStyles(props) {
 };
 var StyledFont = styled.div.attrs({
   'data-garden-id': COMPONENT_ID$8,
-  'data-garden-version': '8.46.0'
+  'data-garden-version': '8.48.0'
 }).withConfig({
   displayName: "StyledFont",
   componentId: "sc-1iildbo-0"
@@ -154,7 +154,7 @@ var colorStyles$3 = function colorStyles(props) {
 };
 var StyledCode = styled(StyledFont).attrs({
   'data-garden-id': COMPONENT_ID$7,
-  'data-garden-version': '8.46.0',
+  'data-garden-version': '8.48.0',
   as: 'code'
 }).withConfig({
   displayName: "StyledCode",
@@ -181,7 +181,7 @@ var colorStyles$2 = function colorStyles(props) {
 };
 var StyledCodeBlock = styled.pre.attrs({
   'data-garden-id': COMPONENT_ID$6,
-  'data-garden-version': '8.46.0'
+  'data-garden-version': '8.48.0'
 }).withConfig({
   displayName: "StyledCodeBlock",
   componentId: "sc-5wky57-0"
@@ -199,7 +199,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.46.0'
+  'data-garden-version': '8.48.0'
 }).withConfig({
   displayName: "StyledCodeBlockContainer",
   componentId: "sc-14zgbfw-0"
@@ -254,7 +254,7 @@ var lineNumberStyles = function lineNumberStyles(props) {
 };
 var StyledCodeBlockLine = styled(StyledFont).attrs({
   'data-garden-id': COMPONENT_ID$4,
-  'data-garden-version': '8.46.0',
+  'data-garden-version': '8.48.0',
   as: 'code',
   isMonospace: true
 }).withConfig({
@@ -300,7 +300,7 @@ var colorStyles = function colorStyles(props) {
 };
 var StyledCodeBlockToken = styled.span.attrs({
   'data-garden-id': COMPONENT_ID$3,
-  'data-garden-version': '8.46.0'
+  'data-garden-version': '8.48.0'
 }).withConfig({
   displayName: "StyledCodeBlockToken",
   componentId: "sc-1hkshdq-0"
@@ -318,7 +318,7 @@ StyledCodeBlockToken.defaultProps = {
 var COMPONENT_ID$2 = 'typography.ellipsis';
 var StyledEllipsis = styled.div.attrs({
   'data-garden-id': COMPONENT_ID$2,
-  'data-garden-version': '8.46.0'
+  'data-garden-version': '8.48.0'
 }).withConfig({
   displayName: "StyledEllipsis",
   componentId: "sc-1u4uqmy-0"
@@ -345,7 +345,7 @@ var StyledIcon = styled(function (_ref) {
   return React.cloneElement(Children.only(children), props);
 }).attrs({
   'data-garden-id': COMPONENT_ID$1,
-  'data-garden-version': '8.46.0'
+  'data-garden-version': '8.48.0'
 }).withConfig({
   displayName: "StyledIcon",
   componentId: "sc-10rfb5b-0"
@@ -365,7 +365,7 @@ var listStyles = function listStyles(props) {
 var ORDERED_ID$1 = 'typography.ordered_list';
 var StyledOrderedList = styled.ol.attrs({
   'data-garden-id': ORDERED_ID$1,
-  'data-garden-version': '8.46.0'
+  'data-garden-version': '8.48.0'
 }).withConfig({
   displayName: "StyledList__StyledOrderedList",
   componentId: "sc-jdbsfi-0"
@@ -380,7 +380,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.46.0'
+  'data-garden-version': '8.48.0'
 }).withConfig({
   displayName: "StyledList__StyledUnorderedList",
   componentId: "sc-jdbsfi-1"
@@ -404,7 +404,7 @@ 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.46.0',
+  'data-garden-version': '8.48.0',
   as: 'li'
 }).withConfig({
   displayName: "StyledListItem__StyledOrderedListItem",
@@ -429,7 +429,7 @@ StyledOrderedListItem.defaultProps = {
 var UNORDERED_ID = 'typography.unordered_list_item';
 var StyledUnorderedListItem = styled(StyledFont).attrs({
   'data-garden-id': UNORDERED_ID,
-  'data-garden-version': '8.46.0',
+  'data-garden-version': '8.48.0',
   as: 'li'
 }).withConfig({
   displayName: "StyledListItem__StyledUnorderedListItem",
@@ -447,7 +447,7 @@ StyledUnorderedListItem.defaultProps = {
 var COMPONENT_ID = 'typography.paragraph';
 var StyledParagraph = styled.p.attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '8.46.0'
+  'data-garden-version': '8.48.0'
 }).withConfig({
   displayName: "StyledParagraph",
   componentId: "sc-zkuftz-0"
@@ -464,7 +464,7 @@ StyledParagraph.defaultProps = {
 };
 
 var _excluded$d = ["tag"];
-var SM = React.forwardRef(function (_ref, ref) {
+var SM = forwardRef(function (_ref, ref) {
   var tag = _ref.tag,
       other = _objectWithoutProperties(_ref, _excluded$d);
   return React.createElement(StyledFont, _extends({
@@ -484,7 +484,7 @@ SM.defaultProps = {
 };
 
 var _excluded$c = ["tag"];
-var MD = React.forwardRef(function (_ref, ref) {
+var MD = forwardRef(function (_ref, ref) {
   var tag = _ref.tag,
       other = _objectWithoutProperties(_ref, _excluded$c);
   return React.createElement(StyledFont, _extends({
@@ -504,7 +504,7 @@ MD.defaultProps = {
 };
 
 var _excluded$b = ["tag"];
-var LG = React.forwardRef(function (_ref, ref) {
+var LG = forwardRef(function (_ref, ref) {
   var tag = _ref.tag,
       other = _objectWithoutProperties(_ref, _excluded$b);
   return React.createElement(StyledFont, _extends({
@@ -524,7 +524,7 @@ LG.defaultProps = {
 };
 
 var _excluded$a = ["tag"];
-var XL = React.forwardRef(function (_ref, ref) {
+var XL = forwardRef(function (_ref, ref) {
   var tag = _ref.tag,
       other = _objectWithoutProperties(_ref, _excluded$a);
   return React.createElement(StyledFont, _extends({
@@ -543,7 +543,7 @@ XL.defaultProps = {
 };
 
 var _excluded$9 = ["tag"];
-var XXL = React.forwardRef(function (_ref, ref) {
+var XXL = forwardRef(function (_ref, ref) {
   var tag = _ref.tag,
       other = _objectWithoutProperties(_ref, _excluded$9);
   return React.createElement(StyledFont, _extends({
@@ -562,7 +562,7 @@ XXL.defaultProps = {
 };
 
 var _excluded$8 = ["tag"];
-var XXXL = React.forwardRef(function (_ref, ref) {
+var XXXL = forwardRef(function (_ref, ref) {
   var tag = _ref.tag,
       other = _objectWithoutProperties(_ref, _excluded$8);
   return React.createElement(StyledFont, _extends({
@@ -580,60 +580,60 @@ XXXL.defaultProps = {
   tag: 'div'
 };
 
-var _excluded$7 = ["size", "hue"];
-var Code = React.forwardRef(function (_ref, ref) {
+var _excluded$7 = ["size"];
+var Blockquote = React.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.createElement(StyledCode, _extends({
+  return React.createElement(StyledBlockquote, _extends({
     ref: ref,
-    size: _size,
-    hue: hue
+    size: _size
   }, other));
 });
-Code.displayName = 'Code';
-Code.propTypes = {
-  hue: PropTypes.oneOf(['grey', 'red', 'green', 'yellow']),
-  size: PropTypes.oneOf(['small', 'medium', 'large', 'inherit'])
+Blockquote.displayName = 'Blockquote';
+Blockquote.propTypes = {
+  size: PropTypes.oneOf(['small', 'medium', 'large'])
 };
-Code.defaultProps = {
-  hue: 'grey',
-  size: 'inherit'
+Blockquote.defaultProps = {
+  size: 'medium'
 };
 
-var _excluded$6 = ["size"];
-var Blockquote = React.forwardRef(function (_ref, ref) {
+var _excluded$6 = ["size", "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 {
+  } else if (size === 'large') {
     _size = 'lg';
+  } else {
+    _size = 'inherit';
   }
-  return React.createElement(StyledBlockquote, _extends({
+  return React.createElement(StyledCode, _extends({
     ref: ref,
-    size: _size
+    size: _size,
+    hue: hue
   }, other));
 });
-Blockquote.displayName = 'Blockquote';
-Blockquote.propTypes = {
-  size: PropTypes.oneOf(['small', 'medium', 'large'])
+Code.displayName = 'Code';
+Code.propTypes = {
+  hue: PropTypes.oneOf(['grey', 'red', 'green', 'yellow']),
+  size: PropTypes.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"];
@@ -725,43 +725,12 @@ CodeBlock.defaultProps = {
   size: 'medium'
 };
 
-var _excluded$4 = ["tag"];
-var Span = React.forwardRef(function (_ref, ref) {
-  var tag = _ref.tag,
-      other = _objectWithoutProperties(_ref, _excluded$4);
-  return React.createElement(StyledFont, _extends({
-    as: tag,
-    ref: ref,
-    size: "inherit"
-  }, other));
-});
-Span.displayName = 'Span';
-Span.propTypes = {
-  tag: PropTypes.any,
-  isBold: PropTypes.bool,
-  isMonospace: PropTypes.bool,
-  hue: PropTypes.string
-};
-Span.defaultProps = {
-  tag: 'span'
-};
-var StartIcon = function StartIcon(props) {
-  return React.createElement(StyledIcon, _extends({
-    isStart: true
-  }, props));
-};
-var Icon = function Icon(props) {
-  return React.createElement(StyledIcon, props);
-};
-Span.StartIcon = StartIcon;
-Span.Icon = Icon;
-
-var _excluded$3 = ["children", "title", "tag"];
-var Ellipsis = React.forwardRef(function (_ref, ref) {
+var _excluded$4 = ["children", "title", "tag"];
+var Ellipsis = 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;
@@ -783,10 +752,10 @@ Ellipsis.defaultProps = {
   tag: 'div'
 };
 
-var _excluded$2 = ["size"];
-var Paragraph = React.forwardRef(function (_ref, ref) {
+var _excluded$3 = ["size"];
+var Paragraph = 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';
@@ -817,7 +786,7 @@ var useOrderedListContext = function useOrderedListContext() {
   return listContext;
 };
 
-var OrderedListItem = React.forwardRef(function (props, ref) {
+var OrderedListItem = forwardRef(function (props, ref) {
   var _useOrderedListContex = useOrderedListContext(),
       size = _useOrderedListContex.size;
   return React.createElement(StyledOrderedListItem, _extends({
@@ -825,13 +794,14 @@ var OrderedListItem = React.forwardRef(function (props, ref) {
     space: size
   }, props));
 });
-OrderedListItem.displayName = 'OrderedListItem';
+OrderedListItem.displayName = 'OrderedList.Item';
+var Item$1 = OrderedListItem;
 
-var _excluded$1 = ["size", "type"];
-var OrderedList = React.forwardRef(function (_ref, ref) {
+var _excluded$2 = ["size", "type"];
+var OrderedListComponent = React.forwardRef(function (_ref, ref) {
   var size = _ref.size,
       type = _ref.type,
-      other = _objectWithoutProperties(_ref, _excluded$1);
+      other = _objectWithoutProperties(_ref, _excluded$2);
   var value = useMemo(function () {
     return {
       size: size
@@ -844,16 +814,17 @@ var OrderedList = React.forwardRef(function (_ref, ref) {
     listType: type
   }, other)));
 });
-OrderedList.displayName = 'OrderedList';
-OrderedList.propTypes = {
+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'])
 };
-OrderedList.defaultProps = {
+OrderedListComponent.defaultProps = {
   size: 'medium',
   type: 'decimal'
 };
-OrderedList.Item = OrderedListItem;
+var OrderedList = OrderedListComponent;
+OrderedList.Item = Item$1;
 
 var UnorderedListContext = createContext(undefined);
 var useUnorderedListContext = function useUnorderedListContext() {
@@ -864,7 +835,7 @@ var useUnorderedListContext = function useUnorderedListContext() {
   return listContext;
 };
 
-var UnorderedListItem = React.forwardRef(function (props, ref) {
+var UnorderedListItem = forwardRef(function (props, ref) {
   var _useUnorderedListCont = useUnorderedListContext(),
       size = _useUnorderedListCont.size;
   return React.createElement(StyledUnorderedListItem, _extends({
@@ -872,13 +843,14 @@ var UnorderedListItem = React.forwardRef(function (props, ref) {
     space: size
   }, props));
 });
-UnorderedListItem.displayName = 'UnorderedListItem';
+UnorderedListItem.displayName = 'UnorderedList.Item';
+var Item = UnorderedListItem;
 
-var _excluded = ["size", "type"];
-var UnorderedList = React.forwardRef(function (_ref, ref) {
+var _excluded$1 = ["size", "type"];
+var UnorderedListComponent = forwardRef(function (_ref, ref) {
   var size = _ref.size,
       type = _ref.type,
-      other = _objectWithoutProperties(_ref, _excluded);
+      other = _objectWithoutProperties(_ref, _excluded$1);
   var value = useMemo(function () {
     return {
       size: size
@@ -891,15 +863,54 @@ var UnorderedList = React.forwardRef(function (_ref, ref) {
     listType: type
   }, other)));
 });
-UnorderedList.displayName = 'UnorderedList';
-UnorderedList.propTypes = {
+UnorderedListComponent.displayName = 'UnorderedList';
+UnorderedListComponent.propTypes = {
   size: PropTypes.oneOf(['small', 'medium', 'large']),
   type: PropTypes.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.createElement(StyledIcon, _extends({
+    isStart: true
+  }, props));
+};
+StartIconComponent.displayName = 'Span.StartIcon';
+var StartIcon = StartIconComponent;
+
+var IconComponent = function IconComponent(props) {
+  return React.createElement(StyledIcon, props);
+};
+IconComponent.displayName = 'Span.Icon';
+var Icon = IconComponent;
+
+var _excluded = ["tag"];
+var SpanComponent = forwardRef(function (_ref, ref) {
+  var tag = _ref.tag,
+      other = _objectWithoutProperties(_ref, _excluded);
+  return React.createElement(StyledFont, _extends({
+    as: tag,
+    ref: ref,
+    size: "inherit"
+  }, other));
+});
+SpanComponent.displayName = 'Span';
+SpanComponent.propTypes = {
+  tag: PropTypes.any,
+  isBold: PropTypes.bool,
+  isMonospace: PropTypes.bool,
+  hue: PropTypes.string
+};
+SpanComponent.defaultProps = {
+  tag: 'span'
+};
+var Span = SpanComponent;
+Span.Icon = Icon;
+Span.StartIcon = StartIcon;
 
 export { Blockquote, Code, CodeBlock, Ellipsis, LG, MD, OrderedList, Paragraph, SM, Span, UnorderedList, XL, XXL, XXXL };

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

@@ -14,5 +14,4 @@ export interface ICodeProps extends HTMLAttributes<HTMLElement> {
 /**
  * @extends HTMLAttributes<HTMLElement>
  */
-declare const Code: React.FunctionComponent<ICodeProps & React.RefAttributes<HTMLElement>>;
-export default Code;
+export declare const Code: React.ForwardRefExoticComponent<ICodeProps & React.RefAttributes<HTMLElement>>;

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

@@ -5,7 +5,7 @@
  * found at http://www.apache.org/licenses/LICENSE-2.0.
  */
 import React, { HTMLAttributes } from 'react';
-interface IEllipsisProps extends HTMLAttributes<HTMLDivElement> {
+export interface IEllipsisProps extends HTMLAttributes<HTMLDivElement> {
     /** Overrides the auto-generated `title` attribute */
     title?: string;
     /** Updates the element's HTML tag */
@@ -14,5 +14,4 @@ interface IEllipsisProps extends HTMLAttributes<HTMLDivElement> {
 /**
  * @extends HTMLAttributes<HTMLDivElement>
  */
-declare const Ellipsis: React.FunctionComponent<IEllipsisProps & React.RefAttributes<HTMLDivElement>>;
-export default Ellipsis;
+export declare const Ellipsis: React.ForwardRefExoticComponent<IEllipsisProps & React.RefAttributes<HTMLDivElement>>;

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

@@ -5,7 +5,7 @@
  * found at http://www.apache.org/licenses/LICENSE-2.0.
  */
 import React, { HTMLAttributes } from 'react';
-interface ILGProps extends HTMLAttributes<HTMLDivElement> {
+export interface ILGProps extends HTMLAttributes<HTMLDivElement> {
     /** Updates the element's HTML tag */
     tag?: any;
     /** Applies bold font style */
@@ -16,5 +16,4 @@ interface ILGProps extends HTMLAttributes<HTMLDivElement> {
 /**
  * @extends HTMLAttributes<HTMLDivElement>
  */
-declare const LG: React.FunctionComponent<ILGProps & React.RefAttributes<HTMLDivElement>>;
-export default LG;
+export declare const LG: React.ForwardRefExoticComponent<ILGProps & React.RefAttributes<HTMLDivElement>>;

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

@@ -5,7 +5,7 @@
  * found at http://www.apache.org/licenses/LICENSE-2.0.
  */
 import React, { HTMLAttributes } from 'react';
-interface IMDProps extends HTMLAttributes<HTMLDivElement> {
+export interface IMDProps extends HTMLAttributes<HTMLDivElement> {
     /** Updates the element's HTML tag */
     tag?: any;
     /** Applies bold font style */
@@ -16,5 +16,4 @@ interface IMDProps extends HTMLAttributes<HTMLDivElement> {
 /**
  * @extends HTMLAttributes<HTMLDivElement>
  */
-declare const MD: React.FunctionComponent<IMDProps & React.RefAttributes<HTMLDivElement>>;
-export default MD;
+export declare const MD: React.ForwardRefExoticComponent<IMDProps & React.RefAttributes<HTMLDivElement>>;

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

@@ -12,5 +12,4 @@ export interface IParagraphProps extends HTMLAttributes<HTMLParagraphElement> {
 /**
  * @extends HTMLAttributes<HTMLParagraphElement>
  */
-declare const Paragraph: React.FunctionComponent<IParagraphProps & React.RefAttributes<HTMLParagraphElement>>;
-export default Paragraph;
+export declare const Paragraph: React.ForwardRefExoticComponent<IParagraphProps & React.RefAttributes<HTMLParagraphElement>>;

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

@@ -5,7 +5,7 @@
  * found at http://www.apache.org/licenses/LICENSE-2.0.
  */
 import React, { HTMLAttributes } from 'react';
-interface ISMProps extends HTMLAttributes<HTMLDivElement> {
+export interface ISMProps extends HTMLAttributes<HTMLDivElement> {
     /** Updates the element's HTML tag */
     tag?: any;
     /** Applies bold font style */
@@ -16,5 +16,4 @@ interface ISMProps extends HTMLAttributes<HTMLDivElement> {
 /**
  * @extends HTMLAttributes<HTMLDivElement>
  */
-declare const SM: React.FunctionComponent<ISMProps & React.RefAttributes<HTMLDivElement>>;
-export default SM;
+export declare const SM: React.ForwardRefExoticComponent<ISMProps & React.RefAttributes<HTMLDivElement>>;

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

@@ -5,7 +5,7 @@
  * found at http://www.apache.org/licenses/LICENSE-2.0.
  */
 import React, { HTMLAttributes } from 'react';
-interface IXLProps extends HTMLAttributes<HTMLDivElement> {
+export interface IXLProps extends HTMLAttributes<HTMLDivElement> {
     /** Updates the element's HTML tag */
     tag?: any;
     /** Applies bold font style */
@@ -14,5 +14,4 @@ interface IXLProps extends HTMLAttributes<HTMLDivElement> {
 /**
  * @extends HTMLAttributes<HTMLDivElement>
  */
-declare const XL: React.FunctionComponent<IXLProps & React.RefAttributes<HTMLDivElement>>;
-export default XL;
+export declare const XL: React.ForwardRefExoticComponent<IXLProps & React.RefAttributes<HTMLDivElement>>;

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

@@ -5,7 +5,7 @@
  * found at http://www.apache.org/licenses/LICENSE-2.0.
  */
 import React, { HTMLAttributes } from 'react';
-interface IXXLProps extends HTMLAttributes<HTMLDivElement> {
+export interface IXXLProps extends HTMLAttributes<HTMLDivElement> {
     /** Updates the element's HTML tag */
     tag?: any;
     /** Applies bold font style */
@@ -14,5 +14,4 @@ interface IXXLProps extends HTMLAttributes<HTMLDivElement> {
 /**
  * @extends HTMLAttributes<HTMLDivElement>
  */
-declare const XXL: React.FunctionComponent<IXXLProps & React.RefAttributes<HTMLDivElement>>;
-export default XXL;
+export declare const XXL: React.ForwardRefExoticComponent<IXXLProps & React.RefAttributes<HTMLDivElement>>;

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

@@ -5,7 +5,7 @@
  * found at http://www.apache.org/licenses/LICENSE-2.0.
  */
 import React, { HTMLAttributes } from 'react';
-interface IXXXLProps extends HTMLAttributes<HTMLDivElement> {
+export interface IXXXLProps extends HTMLAttributes<HTMLDivElement> {
     /** Updates the element's HTML tag */
     tag?: any;
     /** Applies bold font style */
@@ -14,5 +14,4 @@ interface IXXXLProps extends HTMLAttributes<HTMLDivElement> {
 /**
  * @extends HTMLAttributes<HTMLDivElement>
  */
-declare const XXXL: React.FunctionComponent<IXXXLProps & React.RefAttributes<HTMLDivElement>>;
-export default XXXL;
+export declare const XXXL: React.ForwardRefExoticComponent<IXXXLProps & React.RefAttributes<HTMLDivElement>>;

package/dist/typings/elements/lists/OrderedList.d.ts

@@ -4,18 +4,17 @@
  * 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';
-import OrderedListItem from './OrderedListItem';
-interface IOrderedListProps extends HTMLAttributes<HTMLOListElement> {
+import React, { OlHTMLAttributes } from 'react';
+import { Item } from './OrderedListItem';
+export interface IOrderedListProps extends Omit<OlHTMLAttributes<HTMLOListElement>, 'type'> {
     /** Adjusts the vertical spacing between list items */
     size?: 'small' | 'medium' | 'large';
     /** Sets the marker style */
     type?: 'decimal' | 'decimal-leading-zero' | 'lower-alpha' | 'lower-roman' | 'upper-alpha' | 'upper-roman';
 }
-declare const _default: React.FunctionComponent<IOrderedListProps & React.RefAttributes<HTMLOListElement>> & {
-    Item: typeof OrderedListItem;
-};
 /**
- * @extends HTMLAttributes<HTMLOListElement>
+ * @extends OlHTMLAttributes<HTMLOListElement>
  */
-export default _default;
+export declare const OrderedList: React.ForwardRefExoticComponent<IOrderedListProps & React.RefAttributes<HTMLOListElement>> & {
+    Item: typeof Item;
+};

package/dist/typings/elements/lists/OrderedListItem.d.ts

@@ -4,9 +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, { LiHTMLAttributes } from 'react';
-declare const OrderedListItem: React.FunctionComponent<LiHTMLAttributes<HTMLLIElement> & React.RefAttributes<HTMLLIElement>>;
+import React from 'react';
 /**
  * @extends LiHTMLAttributes<HTMLLIElement>
  */
-export default OrderedListItem;
+export declare const Item: React.ForwardRefExoticComponent<React.LiHTMLAttributes<HTMLLIElement> & React.RefAttributes<HTMLLIElement>>;

package/dist/typings/elements/lists/UnorderedList.d.ts

@@ -5,17 +5,16 @@
  * found at http://www.apache.org/licenses/LICENSE-2.0.
  */
 import React, { HTMLAttributes } from 'react';
-import UnorderedListItem from './UnorderedListItem';
-interface IUnorderedListProps extends HTMLAttributes<HTMLUListElement> {
+import { Item } from './UnorderedListItem';
+export interface IUnorderedListProps extends HTMLAttributes<HTMLUListElement> {
     /** Adjusts the vertical spacing between list items */
     size?: 'small' | 'medium' | 'large';
     /** Sets the marker style */
     type?: 'circle' | 'disc' | 'square';
 }
-declare const _default: React.FunctionComponent<IUnorderedListProps & React.RefAttributes<HTMLUListElement>> & {
-    Item: typeof UnorderedListItem;
-};
 /**
  * @extends HTMLAttributes<HTMLUListElement>
  */
-export default _default;
+export declare const UnorderedList: React.ForwardRefExoticComponent<IUnorderedListProps & React.RefAttributes<HTMLUListElement>> & {
+    Item: typeof Item;
+};