@zendeskgarden/react-typography 8.62.1 → 8.63.0

package/dist/index.cjs.js

@@ -7,8 +7,6 @@
 
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
-
 var React = require('react');
 var PropTypes = require('prop-types');
 var styled = require('styled-components');
@@ -17,12 +15,12 @@ var polished = require('polished');
 var Highlight = require('prism-react-renderer');
 var containerScrollregion = require('@zendeskgarden/container-scrollregion');
 
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
-var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
-var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
-var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
-var Highlight__default = /*#__PURE__*/_interopDefaultLegacy(Highlight);
+var React__default = /*#__PURE__*/_interopDefault(React);
+var PropTypes__default = /*#__PURE__*/_interopDefault(PropTypes);
+var styled__default = /*#__PURE__*/_interopDefault(styled);
+var Highlight__default = /*#__PURE__*/_interopDefault(Highlight);
 
 function _extends() {
   _extends = Object.assign ? Object.assign.bind() : function (target) {
@@ -89,9 +87,9 @@ const fontStyles = props => {
   }
   return styled.css(["line-height:", ";color:", ";font-family:", ";font-size:", ";font-weight:", ";direction:", ";"], lineHeight, color, fontFamily, fontSize, fontWeight, direction);
 };
-const StyledFont = styled__default["default"].div.attrs({
+const StyledFont = styled__default.default.div.attrs({
   'data-garden-id': COMPONENT_ID$9,
-  'data-garden-version': '8.62.1'
+  'data-garden-version': '8.63.0'
 }).withConfig({
   displayName: "StyledFont",
   componentId: "sc-1iildbo-0"
@@ -102,9 +100,9 @@ StyledFont.defaultProps = {
 };
 
 const COMPONENT_ID$8 = 'typography.blockquote';
-const StyledBlockquote = styled__default["default"].blockquote.attrs({
+const StyledBlockquote = styled__default.default.blockquote.attrs({
   'data-garden-id': COMPONENT_ID$8,
-  'data-garden-version': '8.62.1'
+  'data-garden-version': '8.63.0'
 }).withConfig({
   displayName: "StyledBlockquote",
   componentId: "sc-1tt3ye0-0"
@@ -121,9 +119,9 @@ const colorStyles$3 = props => {
   const foregroundColor = reactTheming.getColor(hue, shade, props.theme);
   return styled.css(["background-color:", ";color:", ";a &{color:inherit;}"], backgroundColor, foregroundColor);
 };
-const StyledCode = styled__default["default"](StyledFont).attrs({
+const StyledCode = styled__default.default(StyledFont).attrs({
   'data-garden-id': COMPONENT_ID$7,
-  'data-garden-version': '8.62.1',
+  'data-garden-version': '8.63.0',
   as: 'code'
 }).withConfig({
   displayName: "StyledCode",
@@ -142,9 +140,9 @@ const colorStyles$2 = props => {
   const foregroundColor = props.isLight ? props.theme.colors.foreground : reactTheming.getColor('neutralHue', 300, props.theme);
   return styled.css(["background-color:", ";color:", ";"], backgroundColor, foregroundColor);
 };
-const StyledCodeBlock = styled__default["default"].pre.attrs({
+const StyledCodeBlock = styled__default.default.pre.attrs({
   'data-garden-id': COMPONENT_ID$6,
-  'data-garden-version': '8.62.1'
+  'data-garden-version': '8.63.0'
 }).withConfig({
   displayName: "StyledCodeBlock",
   componentId: "sc-5wky57-0"
@@ -154,9 +152,9 @@ StyledCodeBlock.defaultProps = {
 };
 
 const COMPONENT_ID$5 = 'typography.codeblock_container';
-const StyledCodeBlockContainer = styled__default["default"].div.attrs({
+const StyledCodeBlockContainer = styled__default.default.div.attrs({
   'data-garden-id': COMPONENT_ID$5,
-  'data-garden-version': '8.62.1'
+  'data-garden-version': '8.63.0'
 }).withConfig({
   displayName: "StyledCodeBlockContainer",
   componentId: "sc-14zgbfw-0"
@@ -215,9 +213,9 @@ const lineNumberStyles = props => {
     }
   `;
 };
-const StyledCodeBlockLine = styled__default["default"](StyledFont).attrs({
+const StyledCodeBlockLine = styled__default.default(StyledFont).attrs({
   'data-garden-id': COMPONENT_ID$4,
-  'data-garden-version': '8.62.1',
+  'data-garden-version': '8.63.0',
   as: 'code',
   isMonospace: true
 }).withConfig({
@@ -250,9 +248,9 @@ const 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);
 };
-const StyledCodeBlockToken = styled__default["default"].span.attrs({
+const StyledCodeBlockToken = styled__default.default.span.attrs({
   'data-garden-id': COMPONENT_ID$3,
-  'data-garden-version': '8.62.1'
+  'data-garden-version': '8.63.0'
 }).withConfig({
   displayName: "StyledCodeBlockToken",
   componentId: "sc-1hkshdq-0"
@@ -262,9 +260,9 @@ StyledCodeBlockToken.defaultProps = {
 };
 
 const COMPONENT_ID$2 = 'typography.ellipsis';
-const StyledEllipsis = styled__default["default"].div.attrs({
+const StyledEllipsis = styled__default.default.div.attrs({
   'data-garden-id': COMPONENT_ID$2,
-  'data-garden-version': '8.62.1'
+  'data-garden-version': '8.63.0'
 }).withConfig({
   displayName: "StyledEllipsis",
   componentId: "sc-1u4uqmy-0"
@@ -279,16 +277,16 @@ const sizeStyles = props => {
   const size = props.theme.iconSizes.md;
   return styled.css(["margin-", ":", ";width:", ";height:", ";"], props.theme.rtl ? 'left' : 'right', margin, size, size);
 };
-const StyledIcon = styled__default["default"](_ref => {
+const StyledIcon = styled__default.default(_ref => {
   let {
     children,
     isStart,
     ...props
   } = _ref;
-  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.62.1'
+  'data-garden-version': '8.63.0'
 }).withConfig({
   displayName: "StyledIcon",
   componentId: "sc-10rfb5b-0"
@@ -302,9 +300,9 @@ const 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);
 };
 const ORDERED_ID$1 = 'typography.ordered_list';
-const StyledOrderedList = styled__default["default"].ol.attrs({
+const StyledOrderedList = styled__default.default.ol.attrs({
   'data-garden-id': ORDERED_ID$1,
-  'data-garden-version': '8.62.1'
+  'data-garden-version': '8.63.0'
 }).withConfig({
   displayName: "StyledList__StyledOrderedList",
   componentId: "sc-jdbsfi-0"
@@ -313,9 +311,9 @@ StyledOrderedList.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
 const UNORDERED_ID$1 = 'typography.unordered_list';
-const StyledUnorderedList = styled__default["default"].ul.attrs({
+const StyledUnorderedList = styled__default.default.ul.attrs({
   'data-garden-id': UNORDERED_ID$1,
-  'data-garden-version': '8.62.1'
+  'data-garden-version': '8.63.0'
 }).withConfig({
   displayName: "StyledList__StyledUnorderedList",
   componentId: "sc-jdbsfi-1"
@@ -333,9 +331,9 @@ const listItemStyles = props => {
   return styled.css(["line-height:", ";", ";"], reactTheming.getLineHeight(props.theme.lineHeights.md, props.theme.fontSizes.md), props.space !== 'small' && listItemPaddingStyles(props));
 };
 const ORDERED_ID = 'typography.ordered_list_item';
-const StyledOrderedListItem = styled__default["default"](StyledFont).attrs({
+const StyledOrderedListItem = styled__default.default(StyledFont).attrs({
   'data-garden-id': ORDERED_ID,
-  'data-garden-version': '8.62.1',
+  'data-garden-version': '8.63.0',
   as: 'li'
 }).withConfig({
   displayName: "StyledListItem__StyledOrderedListItem",
@@ -346,9 +344,9 @@ StyledOrderedListItem.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
 const UNORDERED_ID = 'typography.unordered_list_item';
-const StyledUnorderedListItem = styled__default["default"](StyledFont).attrs({
+const StyledUnorderedListItem = styled__default.default(StyledFont).attrs({
   'data-garden-id': UNORDERED_ID,
-  'data-garden-version': '8.62.1',
+  'data-garden-version': '8.63.0',
   as: 'li'
 }).withConfig({
   displayName: "StyledListItem__StyledUnorderedListItem",
@@ -360,9 +358,9 @@ StyledUnorderedListItem.defaultProps = {
 };
 
 const COMPONENT_ID = 'typography.paragraph';
-const StyledParagraph = styled__default["default"].p.attrs({
+const StyledParagraph = styled__default.default.p.attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '8.62.1'
+  'data-garden-version': '8.63.0'
 }).withConfig({
   displayName: "StyledParagraph",
   componentId: "sc-zkuftz-0"
@@ -376,7 +374,7 @@ const SM = React.forwardRef((_ref, ref) => {
     tag,
     ...other
   } = _ref;
-  return React__default["default"].createElement(StyledFont, _extends({
+  return React__default.default.createElement(StyledFont, _extends({
     as: tag,
     ref: ref,
     size: "small"
@@ -384,9 +382,9 @@ const SM = React.forwardRef((_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'
@@ -397,7 +395,7 @@ const MD = React.forwardRef((_ref, ref) => {
     tag,
     ...other
   } = _ref;
-  return React__default["default"].createElement(StyledFont, _extends({
+  return React__default.default.createElement(StyledFont, _extends({
     as: tag,
     ref: ref,
     size: "medium"
@@ -405,9 +403,9 @@ const MD = React.forwardRef((_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'
@@ -418,7 +416,7 @@ const LG = React.forwardRef((_ref, ref) => {
     tag,
     ...other
   } = _ref;
-  return React__default["default"].createElement(StyledFont, _extends({
+  return React__default.default.createElement(StyledFont, _extends({
     as: tag,
     ref: ref,
     size: "large"
@@ -426,9 +424,9 @@ const LG = React.forwardRef((_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'
@@ -439,7 +437,7 @@ const XL = React.forwardRef((_ref, ref) => {
     tag,
     ...other
   } = _ref;
-  return React__default["default"].createElement(StyledFont, _extends({
+  return React__default.default.createElement(StyledFont, _extends({
     as: tag,
     ref: ref,
     size: "extralarge"
@@ -447,8 +445,8 @@ const XL = React.forwardRef((_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'
@@ -459,7 +457,7 @@ const XXL = React.forwardRef((_ref, ref) => {
     tag,
     ...other
   } = _ref;
-  return React__default["default"].createElement(StyledFont, _extends({
+  return React__default.default.createElement(StyledFont, _extends({
     as: tag,
     ref: ref,
     size: "2xlarge"
@@ -467,8 +465,8 @@ const XXL = React.forwardRef((_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'
@@ -479,7 +477,7 @@ const XXXL = React.forwardRef((_ref, ref) => {
     tag,
     ...other
   } = _ref;
-  return React__default["default"].createElement(StyledFont, _extends({
+  return React__default.default.createElement(StyledFont, _extends({
     as: tag,
     ref: ref,
     size: "3xlarge"
@@ -487,19 +485,19 @@ const XXXL = React.forwardRef((_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'
 };
 
-const Blockquote = React__default["default"].forwardRef((props, ref) => React__default["default"].createElement(StyledBlockquote, _extends({
+const Blockquote = React__default.default.forwardRef((props, ref) => React__default.default.createElement(StyledBlockquote, _extends({
   ref: ref
 }, props)));
 Blockquote.displayName = 'Blockquote';
 Blockquote.propTypes = {
-  size: PropTypes__default["default"].oneOf(SIZE)
+  size: PropTypes__default.default.oneOf(SIZE)
 };
 Blockquote.defaultProps = {
   size: 'medium'
@@ -510,22 +508,22 @@ const Code = React.forwardRef((_ref, ref) => {
     hue,
     ...other
   } = _ref;
-  return React__default["default"].createElement(StyledCode, _extends({
+  return React__default.default.createElement(StyledCode, _extends({
     ref: ref,
     hue: hue
   }, other));
 });
 Code.displayName = 'Code';
 Code.propTypes = {
-  hue: PropTypes__default["default"].oneOf(HUE),
-  size: PropTypes__default["default"].oneOf(INHERIT_SIZE)
+  hue: PropTypes__default.default.oneOf(HUE),
+  size: PropTypes__default.default.oneOf(INHERIT_SIZE)
 };
 Code.defaultProps = {
   hue: 'grey',
   size: 'inherit'
 };
 
-const CodeBlock = React__default["default"].forwardRef((_ref, ref) => {
+const CodeBlock = React__default.default.forwardRef((_ref, ref) => {
   let {
     children,
     containerProps,
@@ -561,10 +559,10 @@ const CodeBlock = React__default["default"].forwardRef((_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'
@@ -575,11 +573,11 @@ const CodeBlock = React__default["default"].forwardRef((_ref, ref) => {
       getLineProps,
       getTokenProps
     } = _ref2;
-    return React__default["default"].createElement(StyledCodeBlock, _extends({
+    return React__default.default.createElement(StyledCodeBlock, _extends({
       className: className,
       ref: ref,
       isLight: isLight
-    }, other), tokens.map((line, index) => React__default["default"].createElement(StyledCodeBlockLine, _extends({}, getLineProps({
+    }, other), tokens.map((line, index) => React__default.default.createElement(StyledCodeBlockLine, _extends({}, getLineProps({
       line
     }), {
       key: index,
@@ -589,7 +587,7 @@ const CodeBlock = React__default["default"].forwardRef((_ref, ref) => {
       isNumbered: isNumbered,
       diff: getDiff(line),
       size: size
-    }), line.map((token, tokenKey) => React__default["default"].createElement(StyledCodeBlockToken, _extends({}, getTokenProps({
+    }), line.map((token, tokenKey) => React__default.default.createElement(StyledCodeBlockToken, _extends({}, getTokenProps({
       token
     }), {
       key: tokenKey,
@@ -616,7 +614,7 @@ const Ellipsis = React.forwardRef((_ref, ref) => {
   } 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
@@ -624,19 +622,19 @@ const Ellipsis = React.forwardRef((_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'
 };
 
-const Paragraph = React.forwardRef((props, ref) => React__default["default"].createElement(StyledParagraph, _extends({
+const Paragraph = React.forwardRef((props, ref) => React__default.default.createElement(StyledParagraph, _extends({
   ref: ref
 }, props)));
 Paragraph.displayName = 'Paragraph';
 Paragraph.propTypes = {
-  size: PropTypes__default["default"].oneOf(SIZE)
+  size: PropTypes__default.default.oneOf(SIZE)
 };
 Paragraph.defaultProps = {
   size: 'medium'
@@ -655,7 +653,7 @@ const OrderedListItem = React.forwardRef((props, ref) => {
   const {
     size
   } = useOrderedListContext();
-  return React__default["default"].createElement(StyledOrderedListItem, _extends({
+  return React__default.default.createElement(StyledOrderedListItem, _extends({
     ref: ref,
     space: size
   }, props));
@@ -663,7 +661,7 @@ const OrderedListItem = React.forwardRef((props, ref) => {
 OrderedListItem.displayName = 'OrderedList.Item';
 const Item$1 = OrderedListItem;
 
-const OrderedListComponent = React__default["default"].forwardRef((_ref, ref) => {
+const OrderedListComponent = React__default.default.forwardRef((_ref, ref) => {
   let {
     size,
     type,
@@ -672,17 +670,17 @@ const OrderedListComponent = React__default["default"].forwardRef((_ref, ref) =>
   const value = React.useMemo(() => ({
     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)));
 });
 OrderedListComponent.displayName = 'OrderedList';
 OrderedListComponent.propTypes = {
-  size: PropTypes__default["default"].oneOf(SIZE),
-  type: PropTypes__default["default"].oneOf(TYPE_ORDERED_LIST)
+  size: PropTypes__default.default.oneOf(SIZE),
+  type: PropTypes__default.default.oneOf(TYPE_ORDERED_LIST)
 };
 OrderedListComponent.defaultProps = {
   size: 'medium',
@@ -704,7 +702,7 @@ const UnorderedListItem = React.forwardRef((props, ref) => {
   const {
     size
   } = useUnorderedListContext();
-  return React__default["default"].createElement(StyledUnorderedListItem, _extends({
+  return React__default.default.createElement(StyledUnorderedListItem, _extends({
     ref: ref,
     space: size
   }, props));
@@ -721,17 +719,17 @@ const UnorderedListComponent = React.forwardRef((_ref, ref) => {
   const value = React.useMemo(() => ({
     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)));
 });
 UnorderedListComponent.displayName = 'UnorderedList';
 UnorderedListComponent.propTypes = {
-  size: PropTypes__default["default"].oneOf(SIZE),
-  type: PropTypes__default["default"].oneOf(TYPE_UNORDERED_LIST)
+  size: PropTypes__default.default.oneOf(SIZE),
+  type: PropTypes__default.default.oneOf(TYPE_UNORDERED_LIST)
 };
 UnorderedListComponent.defaultProps = {
   size: 'medium',
@@ -740,13 +738,13 @@ UnorderedListComponent.defaultProps = {
 const UnorderedList = UnorderedListComponent;
 UnorderedList.Item = Item;
 
-const StartIconComponent = props => React__default["default"].createElement(StyledIcon, _extends({
+const StartIconComponent = props => React__default.default.createElement(StyledIcon, _extends({
   isStart: true
 }, props));
 StartIconComponent.displayName = 'Span.StartIcon';
 const StartIcon = StartIconComponent;
 
-const IconComponent = props => React__default["default"].createElement(StyledIcon, props);
+const IconComponent = props => React__default.default.createElement(StyledIcon, props);
 IconComponent.displayName = 'Span.Icon';
 const Icon = IconComponent;
 
@@ -755,7 +753,7 @@ const SpanComponent = React.forwardRef((_ref, ref) => {
     tag,
     ...other
   } = _ref;
-  return React__default["default"].createElement(StyledFont, _extends({
+  return React__default.default.createElement(StyledFont, _extends({
     as: tag,
     ref: ref,
     size: "inherit"
@@ -763,10 +761,10 @@ const SpanComponent = React.forwardRef((_ref, ref) => {
 });
 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
+  tag: PropTypes__default.default.any,
+  isBold: PropTypes__default.default.bool,
+  isMonospace: PropTypes__default.default.bool,
+  hue: PropTypes__default.default.string
 };
 SpanComponent.defaultProps = {
   tag: 'span'

package/dist/index.esm.js

@@ -80,7 +80,7 @@ const fontStyles = props => {
 };
 const StyledFont = styled.div.attrs({
   'data-garden-id': COMPONENT_ID$9,
-  'data-garden-version': '8.62.1'
+  'data-garden-version': '8.63.0'
 }).withConfig({
   displayName: "StyledFont",
   componentId: "sc-1iildbo-0"
@@ -93,7 +93,7 @@ StyledFont.defaultProps = {
 const COMPONENT_ID$8 = 'typography.blockquote';
 const StyledBlockquote = styled.blockquote.attrs({
   'data-garden-id': COMPONENT_ID$8,
-  'data-garden-version': '8.62.1'
+  'data-garden-version': '8.63.0'
 }).withConfig({
   displayName: "StyledBlockquote",
   componentId: "sc-1tt3ye0-0"
@@ -112,7 +112,7 @@ const colorStyles$3 = props => {
 };
 const StyledCode = styled(StyledFont).attrs({
   'data-garden-id': COMPONENT_ID$7,
-  'data-garden-version': '8.62.1',
+  'data-garden-version': '8.63.0',
   as: 'code'
 }).withConfig({
   displayName: "StyledCode",
@@ -133,7 +133,7 @@ const colorStyles$2 = props => {
 };
 const StyledCodeBlock = styled.pre.attrs({
   'data-garden-id': COMPONENT_ID$6,
-  'data-garden-version': '8.62.1'
+  'data-garden-version': '8.63.0'
 }).withConfig({
   displayName: "StyledCodeBlock",
   componentId: "sc-5wky57-0"
@@ -145,7 +145,7 @@ StyledCodeBlock.defaultProps = {
 const COMPONENT_ID$5 = 'typography.codeblock_container';
 const StyledCodeBlockContainer = styled.div.attrs({
   'data-garden-id': COMPONENT_ID$5,
-  'data-garden-version': '8.62.1'
+  'data-garden-version': '8.63.0'
 }).withConfig({
   displayName: "StyledCodeBlockContainer",
   componentId: "sc-14zgbfw-0"
@@ -206,7 +206,7 @@ const lineNumberStyles = props => {
 };
 const StyledCodeBlockLine = styled(StyledFont).attrs({
   'data-garden-id': COMPONENT_ID$4,
-  'data-garden-version': '8.62.1',
+  'data-garden-version': '8.63.0',
   as: 'code',
   isMonospace: true
 }).withConfig({
@@ -241,7 +241,7 @@ const colorStyles = props => {
 };
 const StyledCodeBlockToken = styled.span.attrs({
   'data-garden-id': COMPONENT_ID$3,
-  'data-garden-version': '8.62.1'
+  'data-garden-version': '8.63.0'
 }).withConfig({
   displayName: "StyledCodeBlockToken",
   componentId: "sc-1hkshdq-0"
@@ -253,7 +253,7 @@ StyledCodeBlockToken.defaultProps = {
 const COMPONENT_ID$2 = 'typography.ellipsis';
 const StyledEllipsis = styled.div.attrs({
   'data-garden-id': COMPONENT_ID$2,
-  'data-garden-version': '8.62.1'
+  'data-garden-version': '8.63.0'
 }).withConfig({
   displayName: "StyledEllipsis",
   componentId: "sc-1u4uqmy-0"
@@ -277,7 +277,7 @@ const StyledIcon = styled(_ref => {
   return React.cloneElement(Children.only(children), props);
 }).attrs({
   'data-garden-id': COMPONENT_ID$1,
-  'data-garden-version': '8.62.1'
+  'data-garden-version': '8.63.0'
 }).withConfig({
   displayName: "StyledIcon",
   componentId: "sc-10rfb5b-0"
@@ -293,7 +293,7 @@ const listStyles = props => {
 const ORDERED_ID$1 = 'typography.ordered_list';
 const StyledOrderedList = styled.ol.attrs({
   'data-garden-id': ORDERED_ID$1,
-  'data-garden-version': '8.62.1'
+  'data-garden-version': '8.63.0'
 }).withConfig({
   displayName: "StyledList__StyledOrderedList",
   componentId: "sc-jdbsfi-0"
@@ -304,7 +304,7 @@ StyledOrderedList.defaultProps = {
 const UNORDERED_ID$1 = 'typography.unordered_list';
 const StyledUnorderedList = styled.ul.attrs({
   'data-garden-id': UNORDERED_ID$1,
-  'data-garden-version': '8.62.1'
+  'data-garden-version': '8.63.0'
 }).withConfig({
   displayName: "StyledList__StyledUnorderedList",
   componentId: "sc-jdbsfi-1"
@@ -324,7 +324,7 @@ const listItemStyles = props => {
 const ORDERED_ID = 'typography.ordered_list_item';
 const StyledOrderedListItem = styled(StyledFont).attrs({
   'data-garden-id': ORDERED_ID,
-  'data-garden-version': '8.62.1',
+  'data-garden-version': '8.63.0',
   as: 'li'
 }).withConfig({
   displayName: "StyledListItem__StyledOrderedListItem",
@@ -337,7 +337,7 @@ StyledOrderedListItem.defaultProps = {
 const UNORDERED_ID = 'typography.unordered_list_item';
 const StyledUnorderedListItem = styled(StyledFont).attrs({
   'data-garden-id': UNORDERED_ID,
-  'data-garden-version': '8.62.1',
+  'data-garden-version': '8.63.0',
   as: 'li'
 }).withConfig({
   displayName: "StyledListItem__StyledUnorderedListItem",
@@ -351,7 +351,7 @@ StyledUnorderedListItem.defaultProps = {
 const COMPONENT_ID = 'typography.paragraph';
 const StyledParagraph = styled.p.attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '8.62.1'
+  'data-garden-version': '8.63.0'
 }).withConfig({
   displayName: "StyledParagraph",
   componentId: "sc-zkuftz-0"

package/dist/typings/styled/StyledFont.d.ts

@@ -7,13 +7,13 @@
 import { DefaultTheme } from 'styled-components';
 declare const TYPOGRAPHY_SIZE: readonly ["small", "medium", "large", "extralarge", "2xlarge", "3xlarge"];
 declare const FONT_SIZE: readonly ["inherit", "small", "medium", "large", "extralarge", "2xlarge", "3xlarge"];
-declare type TypographySize = typeof TYPOGRAPHY_SIZE[number];
-declare type ThemeSize = keyof DefaultTheme['lineHeights'];
+type TypographySize = (typeof TYPOGRAPHY_SIZE)[number];
+type ThemeSize = keyof DefaultTheme['lineHeights'];
 export declare const THEME_SIZES: Record<TypographySize, ThemeSize>;
 export interface IStyledFontProps {
     isBold?: boolean;
     isMonospace?: boolean;
-    size?: typeof FONT_SIZE[number];
+    size?: (typeof FONT_SIZE)[number];
     hue?: string;
 }
 export declare const StyledFont: import("styled-components").StyledComponent<"div", DefaultTheme, {

package/dist/typings/types/index.d.ts

@@ -11,8 +11,8 @@ export declare const INHERIT_SIZE: readonly ["inherit", "small", "medium", "larg
 export declare const TYPE_ORDERED_LIST: readonly ["decimal", "decimal-leading-zero", "lower-alpha", "lower-roman", "upper-alpha", "upper-roman"];
 export declare const TYPE_UNORDERED_LIST: readonly ["circle", "disc", "square"];
 export declare const LANGUAGES: readonly ["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"];
-export declare type Diff = 'hunk' | 'add' | 'delete' | 'change';
-export declare type Size = typeof SIZE[number];
+export type Diff = 'hunk' | 'add' | 'delete' | 'change';
+export type Size = (typeof SIZE)[number];
 export interface ITypescaleProps extends HTMLAttributes<HTMLDivElement> {
     /** Updates the element's HTML tag */
     tag?: any;
@@ -29,13 +29,13 @@ export interface IBlockquoteProps extends BlockquoteHTMLAttributes<HTMLElement>
 }
 export interface ICodeProps extends HTMLAttributes<HTMLElement> {
     /** Applies color to the background and the text */
-    hue?: typeof HUE[number];
+    hue?: (typeof HUE)[number];
     /** Adjusts the font size. By default font size is inherited from the surrounding text. */
-    size?: typeof INHERIT_SIZE[number];
+    size?: (typeof INHERIT_SIZE)[number];
 }
 export interface ICodeBlockProps extends HTMLAttributes<HTMLPreElement> {
     /** Selects the language used by the [Prism](https://prismjs.com/) tokenizer */
-    language?: typeof LANGUAGES[number];
+    language?: (typeof LANGUAGES)[number];
     /** Specifies the font size */
     size?: Size;
     /** Applies light mode styling */
@@ -61,13 +61,13 @@ export interface IOrderedListProps extends Omit<OlHTMLAttributes<HTMLOListElemen
     /** Adjusts the vertical spacing between list items */
     size?: Size;
     /** Sets the marker style */
-    type?: typeof TYPE_ORDERED_LIST[number];
+    type?: (typeof TYPE_ORDERED_LIST)[number];
 }
 export interface IUnorderedListProps extends HTMLAttributes<HTMLUListElement> {
     /** Adjusts the vertical spacing between list items */
     size?: Size;
     /** Sets the marker style */
-    type?: typeof TYPE_UNORDERED_LIST[number];
+    type?: (typeof TYPE_UNORDERED_LIST)[number];
 }
 export interface ISpanProps extends HTMLAttributes<HTMLSpanElement> {
     /** Updates the element's HTML tag */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zendeskgarden/react-typography",
-  "version": "8.62.1",
+  "version": "8.63.0",
   "description": "Components relating to typography in the Garden Design System",
   "license": "Apache-2.0",
   "author": "Zendesk Garden <garden@zendesk.com>",
@@ -33,7 +33,7 @@
     "styled-components": "^4.2.0 || ^5.0.0"
   },
   "devDependencies": {
-    "@zendeskgarden/react-theming": "^8.62.1"
+    "@zendeskgarden/react-theming": "^8.63.0"
   },
   "keywords": [
     "components",
@@ -45,5 +45,5 @@
     "access": "public"
   },
   "zendeskgarden:src": "src/index.ts",
-  "gitHead": "e84b3603c69975dc0ef30029364da15fc1e4fc03"
+  "gitHead": "4b8715305a769881b143c7195c5b31e687422926"
 }