@zendeskgarden/react-typography 9.1.1 → 9.2.0

package/dist/esm/elements/Code.js

@@ -23,11 +23,13 @@ import '../styled/StyledParagraph.js';
 const Code = forwardRef((_ref, ref) => {
   let {
     hue,
+    size,
     ...other
   } = _ref;
   return React.createElement(StyledCode, Object.assign({
     ref: ref,
-    hue: hue
+    $hue: hue,
+    $size: size
   }, other));
 });
 Code.displayName = 'Code';

package/dist/esm/elements/CodeBlock.js

@@ -88,11 +88,11 @@ const CodeBlock = React.forwardRef((_ref, ref) => {
       line
     }), {
       key: index,
-      language: language,
-      isHighlighted: highlightLines?.includes(index + 1),
-      isNumbered: isNumbered,
-      diff: getDiff(line),
-      size: size,
+      $language: language,
+      $isHighlighted: highlightLines?.includes(index + 1),
+      $isNumbered: isNumbered,
+      $diff: getDiff(line),
+      $size: size,
       style: undefined
     }), line.map((token, tokenKey) => React.createElement(StyledCodeBlockToken, Object.assign({}, getTokenProps({
       token

package/dist/esm/elements/LG.js

@@ -21,13 +21,17 @@ import '../styled/StyledParagraph.js';
 
 const LG = forwardRef((_ref, ref) => {
   let {
+    isBold,
+    isMonospace,
     tag,
     ...other
   } = _ref;
   return React.createElement(StyledFont, Object.assign({
+    $isBold: isBold,
+    $isMonospace: isMonospace,
+    $size: "large",
     as: tag,
-    ref: ref,
-    size: "large"
+    ref: ref
   }, other));
 });
 LG.displayName = 'LG';

package/dist/esm/elements/MD.js

@@ -21,13 +21,17 @@ import '../styled/StyledParagraph.js';
 
 const MD = forwardRef((_ref, ref) => {
   let {
+    isBold,
+    isMonospace,
     tag,
     ...other
   } = _ref;
   return React.createElement(StyledFont, Object.assign({
+    $isBold: isBold,
+    $isMonospace: isMonospace,
+    $size: "medium",
     as: tag,
-    ref: ref,
-    size: "medium"
+    ref: ref
   }, other));
 });
 MD.displayName = 'MD';

package/dist/esm/elements/SM.js

@@ -21,13 +21,17 @@ import '../styled/StyledParagraph.js';
 
 const SM = forwardRef((_ref, ref) => {
   let {
+    isBold,
+    isMonospace,
     tag,
     ...other
   } = _ref;
   return React.createElement(StyledFont, Object.assign({
+    $isBold: isBold,
+    $isMonospace: isMonospace,
     as: tag,
     ref: ref,
-    size: "small"
+    $size: "small"
   }, other));
 });
 SM.displayName = 'SM';

package/dist/esm/elements/XL.js

@@ -21,13 +21,15 @@ import '../styled/StyledParagraph.js';
 
 const XL = forwardRef((_ref, ref) => {
   let {
+    isBold,
     tag,
     ...other
   } = _ref;
   return React.createElement(StyledFont, Object.assign({
-    as: tag,
+    $size: "extralarge",
+    $isBold: isBold,
     ref: ref,
-    size: "extralarge"
+    as: tag
   }, other));
 });
 XL.displayName = 'XL';

package/dist/esm/elements/XXL.js

@@ -21,13 +21,15 @@ import '../styled/StyledParagraph.js';
 
 const XXL = forwardRef((_ref, ref) => {
   let {
+    isBold,
     tag,
     ...other
   } = _ref;
   return React.createElement(StyledFont, Object.assign({
-    as: tag,
+    $size: "2xlarge",
+    $isBold: isBold,
     ref: ref,
-    size: "2xlarge"
+    as: tag
   }, other));
 });
 XXL.displayName = 'XXL';

package/dist/esm/elements/XXXL.js

@@ -21,14 +21,17 @@ import '../styled/StyledParagraph.js';
 
 const XXXL = forwardRef((_ref, ref) => {
   let {
+    isBold,
     tag,
     ...other
   } = _ref;
   return React.createElement(StyledFont, Object.assign({
+    $isBold: isBold,
+    $size: "3xlarge"
+  }, other, {
     as: tag,
-    ref: ref,
-    size: "3xlarge"
-  }, other));
+    ref: ref
+  }));
 });
 XXXL.displayName = 'XXXL';
 XXXL.propTypes = {

package/dist/esm/elements/lists/OrderedList.js

@@ -35,7 +35,7 @@ const OrderedListComponent = React.forwardRef((_ref, ref) => {
     value: value
   }, React.createElement(StyledOrderedList, Object.assign({
     ref: ref,
-    listType: type
+    $listType: type
   }, other)));
 });
 OrderedListComponent.displayName = 'OrderedList';

package/dist/esm/elements/lists/OrderedListItem.js

@@ -25,7 +25,7 @@ const OrderedListItem = forwardRef((props, ref) => {
   } = useOrderedListContext();
   return React.createElement(StyledOrderedListItem, Object.assign({
     ref: ref,
-    space: size
+    $space: size
   }, props));
 });
 OrderedListItem.displayName = 'OrderedList.Item';

package/dist/esm/elements/lists/UnorderedList.js

@@ -35,7 +35,7 @@ const UnorderedListComponent = forwardRef((_ref, ref) => {
     value: value
   }, React.createElement(StyledUnorderedList, Object.assign({
     ref: ref,
-    listType: type
+    $listType: type
   }, other)));
 });
 UnorderedListComponent.displayName = 'UnorderedList';

package/dist/esm/elements/lists/UnorderedListItem.js

@@ -25,7 +25,7 @@ const UnorderedListItem = forwardRef((props, ref) => {
   } = useUnorderedListContext();
   return React.createElement(StyledUnorderedListItem, Object.assign({
     ref: ref,
-    space: size
+    $space: size
   }, props));
 });
 UnorderedListItem.displayName = 'UnorderedList.Item';

package/dist/esm/elements/span/Span.js

@@ -23,13 +23,19 @@ import { Icon } from './Icon.js';
 
 const SpanComponent = forwardRef((_ref, ref) => {
   let {
+    hue,
+    isBold,
+    isMonospace,
     tag,
     ...other
   } = _ref;
   return React.createElement(StyledFont, Object.assign({
+    $hue: hue,
+    $isBold: isBold,
+    $isMonospace: isMonospace,
+    $size: "inherit",
     as: tag,
-    ref: ref,
-    size: "inherit"
+    ref: ref
   }, other));
 });
 SpanComponent.displayName = 'Span';

package/dist/esm/styled/StyledBlockquote.js

@@ -11,7 +11,7 @@ import { THEME_SIZES } from './StyledFont.js';
 const COMPONENT_ID = 'typography.blockquote';
 const StyledBlockquote = styled.blockquote.attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.1.1'
+  'data-garden-version': '9.2.0'
 }).withConfig({
   displayName: "StyledBlockquote",
   componentId: "sc-1tt3ye0-0"

package/dist/esm/styled/StyledCode.js

@@ -11,7 +11,7 @@ import { StyledFont } from './StyledFont.js';
 const COMPONENT_ID = 'typography.code';
 const colorStyles = _ref => {
   let {
-    hue,
+    $hue,
     theme
   } = _ref;
   const bgColorArgs = {
@@ -26,7 +26,7 @@ const colorStyles = _ref => {
   const fgColorArgs = {
     theme
   };
-  switch (hue) {
+  switch ($hue) {
     case 'green':
       bgColorArgs.variable = 'background.success';
       fgColorArgs.variable = 'foreground.successEmphasis';
@@ -50,17 +50,17 @@ const colorStyles = _ref => {
 };
 const StyledCode = styled(StyledFont).attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.1.1',
+  'data-garden-version': '9.2.0',
   as: 'code',
-  isMonospace: true
+  $isMonospace: true
 }).withConfig({
   displayName: "StyledCode",
   componentId: "sc-l8yvmf-0"
 })(["border-radius:", ";padding:1.5px;", ";", ";"], props => props.theme.borderRadii.sm, props => colorStyles(props), props => retrieveComponentStyles(COMPONENT_ID, props));
 StyledCode.defaultProps = {
   theme: DEFAULT_THEME,
-  hue: 'grey',
-  size: 'inherit'
+  $hue: 'grey',
+  $size: 'inherit'
 };
 
 export { StyledCode };

package/dist/esm/styled/StyledCodeBlock.js

@@ -24,7 +24,7 @@ const colorStyles = _ref => {
 };
 const StyledCodeBlock = styled.pre.attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.1.1'
+  'data-garden-version': '9.2.0'
 }).withConfig({
   displayName: "StyledCodeBlock",
   componentId: "sc-5wky57-0"

package/dist/esm/styled/StyledCodeBlockContainer.js

@@ -10,7 +10,7 @@ import { focusStyles, retrieveComponentStyles } from '@zendeskgarden/react-themi
 const COMPONENT_ID = 'typography.codeblock_container';
 const StyledCodeBlockContainer = styled.div.attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.1.1'
+  'data-garden-version': '9.2.0'
 }).withConfig({
   displayName: "StyledCodeBlockContainer",
   componentId: "sc-14zgbfw-0"

package/dist/esm/styled/StyledCodeBlockLine.js

@@ -12,11 +12,11 @@ const COMPONENT_ID = 'typography.codeblock_code';
 const colorStyles = _ref => {
   let {
     theme,
-    diff,
-    isHighlighted
+    $diff,
+    $isHighlighted
   } = _ref;
   let backgroundColor;
-  if (diff) {
+  if ($diff) {
     const hues = {
       hunk: 'royal',
       add: 'lime',
@@ -25,7 +25,7 @@ const colorStyles = _ref => {
     };
     backgroundColor = getColor({
       theme,
-      hue: hues[diff],
+      hue: hues[$diff],
       dark: {
         shade: 600
       },
@@ -34,7 +34,7 @@ const colorStyles = _ref => {
       },
       transparency: theme.opacity[300]
     });
-  } else if (isHighlighted) {
+  } else if ($isHighlighted) {
     backgroundColor = getColor({
       theme,
       dark: {
@@ -52,8 +52,8 @@ const colorStyles = _ref => {
 const lineNumberStyles = _ref2 => {
   let {
     theme,
-    language,
-    size
+    $language,
+    $size
   } = _ref2;
   const color = getColor({
     theme,
@@ -63,11 +63,11 @@ const lineNumberStyles = _ref2 => {
     }
   });
   let padding;
-  if (language && language === 'diff') {
+  if ($language && $language === 'diff') {
     padding = 0;
-  } else if (size === 'small') {
+  } else if ($size === 'small') {
     padding = theme.space.base * 4;
-  } else if (size === 'large') {
+  } else if ($size === 'large') {
     padding = theme.space.base * 7;
   } else {
     padding = theme.space.base * 6;
@@ -86,12 +86,12 @@ const lineNumberStyles = _ref2 => {
 };
 const StyledCodeBlockLine = styled(StyledFont).attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.1.1',
+  'data-garden-version': '9.2.0',
   as: 'code',
-  isMonospace: true
+  $isMonospace: true
 }).withConfig({
   displayName: "StyledCodeBlockLine",
   componentId: "sc-1goay17-0"
-})(["display:table-row;height:", ";direction:ltr;", ";", ";&::after{display:inline-block;width:", "px;content:'';}", ";"], props => props.theme.lineHeights[THEME_SIZES[props.size]], colorStyles, props => props.isNumbered && lineNumberStyles(props), props => props.theme.space.base * 3, props => retrieveComponentStyles(COMPONENT_ID, props));
+})(["display:table-row;height:", ";direction:ltr;", ";", ";&::after{display:inline-block;width:", "px;content:'';}", ";"], props => props.theme.lineHeights[THEME_SIZES[props.$size]], colorStyles, props => props.$isNumbered && lineNumberStyles(props), props => props.theme.space.base * 3, props => retrieveComponentStyles(COMPONENT_ID, props));
 
 export { StyledCodeBlockLine };

package/dist/esm/styled/StyledCodeBlockToken.js

@@ -171,7 +171,7 @@ const colorStyles = _ref => {
 };
 const StyledCodeBlockToken = styled.span.attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.1.1'
+  'data-garden-version': '9.2.0'
 }).withConfig({
   displayName: "StyledCodeBlockToken",
   componentId: "sc-1hkshdq-0"

package/dist/esm/styled/StyledEllipsis.js

@@ -10,7 +10,7 @@ import { retrieveComponentStyles } from '@zendeskgarden/react-theming';
 const COMPONENT_ID = 'typography.ellipsis';
 const StyledEllipsis = styled.div.attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.1.1'
+  'data-garden-version': '9.2.0'
 }).withConfig({
   displayName: "StyledEllipsis",
   componentId: "sc-1u4uqmy-0"

package/dist/esm/styled/StyledFont.js

@@ -6,7 +6,7 @@
 */
 import styled, { css } from 'styled-components';
 import { hideVisually, math } from 'polished';
-import { retrieveComponentStyles, DEFAULT_THEME, getColor } from '@zendeskgarden/react-theming';
+import { retrieveComponentStyles, getColor } from '@zendeskgarden/react-theming';
 import { SIZE } from '../types/index.js';
 
 const COMPONENT_ID = 'typography.font';
@@ -21,13 +21,13 @@ const THEME_SIZES = {
 };
 const fontStyles = _ref => {
   let {
-    hue,
-    isBold,
-    isMonospace,
-    size,
+    $hue,
+    $isBold,
+    $isMonospace,
+    $size,
     theme
   } = _ref;
-  const monospace = isMonospace && ['inherit', 'small', 'medium', 'large'].indexOf(size) !== -1;
+  const monospace = $isMonospace && ['inherit', 'small', 'medium', 'large'].indexOf($size) !== -1;
   const fontFamily = monospace && theme.fonts.mono;
   const direction = theme.rtl ? 'rtl' : 'ltr';
   let fontSize;
@@ -35,30 +35,30 @@ const fontStyles = _ref => {
   let lineHeight;
   let color;
   if (monospace) {
-    if (size === 'inherit') {
+    if ($size === 'inherit') {
       fontSize = 'calc(1em - 1px)';
       lineHeight = 'normal';
     } else {
-      const themeSize = THEME_SIZES[size];
+      const themeSize = THEME_SIZES[$size];
       fontSize = math(`${theme.fontSizes[themeSize]} - 1px`);
       lineHeight = math(`${theme.lineHeights[themeSize]} - 1px`);
     }
-  } else if (size !== 'inherit') {
-    const themeSize = THEME_SIZES[size];
+  } else if ($size !== 'inherit') {
+    const themeSize = THEME_SIZES[$size];
     fontSize = theme.fontSizes[themeSize];
     lineHeight = theme.lineHeights[themeSize];
   }
-  if (isBold === true) {
+  if ($isBold === true) {
     fontWeight = theme.fontWeights.semibold;
-  } else if (isBold === false || size !== 'inherit') {
+  } else if ($isBold === false || $size !== 'inherit') {
     fontWeight = theme.fontWeights.regular;
   }
-  if (hue) {
-    const options = hue.includes('.') ? {
-      variable: hue,
+  if ($hue) {
+    const options = $hue.includes('.') ? {
+      variable: $hue,
       theme
     } : {
-      hue,
+      hue: $hue,
       theme
     };
     color = getColor(options);
@@ -67,14 +67,13 @@ const fontStyles = _ref => {
 };
 const StyledFont = styled.div.attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.1.1'
+  'data-garden-version': '9.2.0'
 }).withConfig({
   displayName: "StyledFont",
   componentId: "sc-1iildbo-0"
 })(["", ";&[hidden]{display:inline;", ";}", ";"], props => !props.hidden && fontStyles(props), hideVisually(), props => retrieveComponentStyles(COMPONENT_ID, props));
 StyledFont.defaultProps = {
-  theme: DEFAULT_THEME,
-  size: 'inherit'
+  $size: 'inherit'
 };
 
 export { StyledFont, THEME_SIZES };

package/dist/esm/styled/StyledIcon.js

@@ -15,7 +15,7 @@ const sizeStyles = props => {
 };
 const StyledIcon = styled(StyledBaseIcon).attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.1.1'
+  'data-garden-version': '9.2.0'
 }).withConfig({
   displayName: "StyledIcon",
   componentId: "sc-10rfb5b-0"

package/dist/esm/styled/StyledList.js

@@ -9,12 +9,12 @@ import { retrieveComponentStyles } from '@zendeskgarden/react-theming';
 
 const listStyles = props => {
   const 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);
+  return 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 = 'typography.ordered_list';
 const StyledOrderedList = styled.ol.attrs({
   'data-garden-id': ORDERED_ID,
-  'data-garden-version': '9.1.1'
+  'data-garden-version': '9.2.0'
 }).withConfig({
   displayName: "StyledList__StyledOrderedList",
   componentId: "sc-jdbsfi-0"
@@ -22,7 +22,7 @@ const StyledOrderedList = styled.ol.attrs({
 const UNORDERED_ID = 'typography.unordered_list';
 const StyledUnorderedList = styled.ul.attrs({
   'data-garden-id': UNORDERED_ID,
-  'data-garden-version': '9.1.1'
+  'data-garden-version': '9.2.0'
 }).withConfig({
   displayName: "StyledList__StyledUnorderedList",
   componentId: "sc-jdbsfi-1"

package/dist/esm/styled/StyledListItem.js

@@ -12,36 +12,36 @@ import { StyledFont } from './StyledFont.js';
 
 const listItemPaddingStyles = props => {
   const base = props.theme.space.base;
-  const paddingTop = props.space === 'large' ? `${base * 2}px` : `${base}px`;
+  const paddingTop = props.$space === 'large' ? `${base * 2}px` : `${base}px`;
   return css(["padding-top:", ";", " > &:first-child,", " > &:first-child{padding-top:0;}", " ", " > &:first-child,", " ", " > &:first-child,", " ", " > &:first-child,", " ", " > &:first-child{padding-top:", ";}"], paddingTop, StyledOrderedList, StyledUnorderedList, StyledOrderedList, StyledOrderedList, StyledOrderedList, StyledUnorderedList, StyledUnorderedList, StyledUnorderedList, StyledUnorderedList, StyledOrderedList, paddingTop);
 };
 const listItemStyles = props => {
-  return css(["line-height:", ";", ";"], getLineHeight(props.theme.lineHeights.md, props.theme.fontSizes.md), props.space !== 'small' && listItemPaddingStyles(props));
+  return css(["line-height:", ";", ";"], getLineHeight(props.theme.lineHeights.md, props.theme.fontSizes.md), props.$space !== 'small' && listItemPaddingStyles(props));
 };
 const ORDERED_ID = 'typography.ordered_list_item';
 const StyledOrderedListItem = styled(StyledFont).attrs({
   'data-garden-id': ORDERED_ID,
-  'data-garden-version': '9.1.1',
+  'data-garden-version': '9.2.0',
   as: 'li'
 }).withConfig({
   displayName: "StyledListItem__StyledOrderedListItem",
   componentId: "sc-9rsipg-0"
 })(["margin-", ":", ";padding-", ":", ";", ";", ";"], props => props.theme.rtl ? 'right' : 'left', props => math(`${props.theme.space.base} * -1px`), props => props.theme.rtl ? 'right' : 'left', props => math(`${props.theme.space.base} * 1px`), props => listItemStyles(props), props => retrieveComponentStyles(ORDERED_ID, props));
 StyledOrderedListItem.defaultProps = {
-  space: 'medium',
+  $space: 'medium',
   theme: DEFAULT_THEME
 };
 const UNORDERED_ID = 'typography.unordered_list_item';
 const StyledUnorderedListItem = styled(StyledFont).attrs({
   'data-garden-id': UNORDERED_ID,
-  'data-garden-version': '9.1.1',
+  'data-garden-version': '9.2.0',
   as: 'li'
 }).withConfig({
   displayName: "StyledListItem__StyledUnorderedListItem",
   componentId: "sc-9rsipg-1"
 })(["", ";", ";"], props => listItemStyles(props), props => retrieveComponentStyles(UNORDERED_ID, props));
 StyledUnorderedListItem.defaultProps = {
-  space: 'medium',
+  $space: 'medium',
   theme: DEFAULT_THEME
 };
 

package/dist/esm/styled/StyledParagraph.js

@@ -11,7 +11,7 @@ import { THEME_SIZES } from './StyledFont.js';
 const COMPONENT_ID = 'typography.paragraph';
 const StyledParagraph = styled.p.attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.1.1'
+  'data-garden-version': '9.2.0'
 }).withConfig({
   displayName: "StyledParagraph",
   componentId: "sc-zkuftz-0"

package/dist/index.cjs.js

@@ -40,13 +40,13 @@ const THEME_SIZES = {
 };
 const fontStyles = _ref => {
   let {
-    hue,
-    isBold,
-    isMonospace,
-    size,
+    $hue,
+    $isBold,
+    $isMonospace,
+    $size,
     theme
   } = _ref;
-  const monospace = isMonospace && ['inherit', 'small', 'medium', 'large'].indexOf(size) !== -1;
+  const monospace = $isMonospace && ['inherit', 'small', 'medium', 'large'].indexOf($size) !== -1;
   const fontFamily = monospace && theme.fonts.mono;
   const direction = theme.rtl ? 'rtl' : 'ltr';
   let fontSize;
@@ -54,30 +54,30 @@ const fontStyles = _ref => {
   let lineHeight;
   let color;
   if (monospace) {
-    if (size === 'inherit') {
+    if ($size === 'inherit') {
       fontSize = 'calc(1em - 1px)';
       lineHeight = 'normal';
     } else {
-      const themeSize = THEME_SIZES[size];
+      const themeSize = THEME_SIZES[$size];
       fontSize = polished.math(`${theme.fontSizes[themeSize]} - 1px`);
       lineHeight = polished.math(`${theme.lineHeights[themeSize]} - 1px`);
     }
-  } else if (size !== 'inherit') {
-    const themeSize = THEME_SIZES[size];
+  } else if ($size !== 'inherit') {
+    const themeSize = THEME_SIZES[$size];
     fontSize = theme.fontSizes[themeSize];
     lineHeight = theme.lineHeights[themeSize];
   }
-  if (isBold === true) {
+  if ($isBold === true) {
     fontWeight = theme.fontWeights.semibold;
-  } else if (isBold === false || size !== 'inherit') {
+  } else if ($isBold === false || $size !== 'inherit') {
     fontWeight = theme.fontWeights.regular;
   }
-  if (hue) {
-    const options = hue.includes('.') ? {
-      variable: hue,
+  if ($hue) {
+    const options = $hue.includes('.') ? {
+      variable: $hue,
       theme
     } : {
-      hue,
+      hue: $hue,
       theme
     };
     color = reactTheming.getColor(options);
@@ -86,20 +86,19 @@ const fontStyles = _ref => {
 };
 const StyledFont = styled__default.default.div.attrs({
   'data-garden-id': COMPONENT_ID$9,
-  'data-garden-version': '9.1.1'
+  'data-garden-version': '9.2.0'
 }).withConfig({
   displayName: "StyledFont",
   componentId: "sc-1iildbo-0"
 })(["", ";&[hidden]{display:inline;", ";}", ";"], props => !props.hidden && fontStyles(props), polished.hideVisually(), props => reactTheming.retrieveComponentStyles(COMPONENT_ID$9, props));
 StyledFont.defaultProps = {
-  theme: reactTheming.DEFAULT_THEME,
-  size: 'inherit'
+  $size: 'inherit'
 };
 
 const COMPONENT_ID$8 = 'typography.blockquote';
 const StyledBlockquote = styled__default.default.blockquote.attrs({
   'data-garden-id': COMPONENT_ID$8,
-  'data-garden-version': '9.1.1'
+  'data-garden-version': '9.2.0'
 }).withConfig({
   displayName: "StyledBlockquote",
   componentId: "sc-1tt3ye0-0"
@@ -111,7 +110,7 @@ const StyledBlockquote = styled__default.default.blockquote.attrs({
 const COMPONENT_ID$7 = 'typography.code';
 const colorStyles$3 = _ref => {
   let {
-    hue,
+    $hue,
     theme
   } = _ref;
   const bgColorArgs = {
@@ -126,7 +125,7 @@ const colorStyles$3 = _ref => {
   const fgColorArgs = {
     theme
   };
-  switch (hue) {
+  switch ($hue) {
     case 'green':
       bgColorArgs.variable = 'background.success';
       fgColorArgs.variable = 'foreground.successEmphasis';
@@ -150,17 +149,17 @@ const colorStyles$3 = _ref => {
 };
 const StyledCode = styled__default.default(StyledFont).attrs({
   'data-garden-id': COMPONENT_ID$7,
-  'data-garden-version': '9.1.1',
+  'data-garden-version': '9.2.0',
   as: 'code',
-  isMonospace: true
+  $isMonospace: true
 }).withConfig({
   displayName: "StyledCode",
   componentId: "sc-l8yvmf-0"
 })(["border-radius:", ";padding:1.5px;", ";", ";"], props => props.theme.borderRadii.sm, props => colorStyles$3(props), props => reactTheming.retrieveComponentStyles(COMPONENT_ID$7, props));
 StyledCode.defaultProps = {
   theme: reactTheming.DEFAULT_THEME,
-  hue: 'grey',
-  size: 'inherit'
+  $hue: 'grey',
+  $size: 'inherit'
 };
 
 const COMPONENT_ID$6 = 'typography.codeblock';
@@ -180,7 +179,7 @@ const colorStyles$2 = _ref => {
 };
 const StyledCodeBlock = styled__default.default.pre.attrs({
   'data-garden-id': COMPONENT_ID$6,
-  'data-garden-version': '9.1.1'
+  'data-garden-version': '9.2.0'
 }).withConfig({
   displayName: "StyledCodeBlock",
   componentId: "sc-5wky57-0"
@@ -189,7 +188,7 @@ const StyledCodeBlock = styled__default.default.pre.attrs({
 const COMPONENT_ID$5 = 'typography.codeblock_container';
 const StyledCodeBlockContainer = styled__default.default.div.attrs({
   'data-garden-id': COMPONENT_ID$5,
-  'data-garden-version': '9.1.1'
+  'data-garden-version': '9.2.0'
 }).withConfig({
   displayName: "StyledCodeBlockContainer",
   componentId: "sc-14zgbfw-0"
@@ -201,11 +200,11 @@ const COMPONENT_ID$4 = 'typography.codeblock_code';
 const colorStyles$1 = _ref => {
   let {
     theme,
-    diff,
-    isHighlighted
+    $diff,
+    $isHighlighted
   } = _ref;
   let backgroundColor;
-  if (diff) {
+  if ($diff) {
     const hues = {
       hunk: 'royal',
       add: 'lime',
@@ -214,7 +213,7 @@ const colorStyles$1 = _ref => {
     };
     backgroundColor = reactTheming.getColor({
       theme,
-      hue: hues[diff],
+      hue: hues[$diff],
       dark: {
         shade: 600
       },
@@ -223,7 +222,7 @@ const colorStyles$1 = _ref => {
       },
       transparency: theme.opacity[300]
     });
-  } else if (isHighlighted) {
+  } else if ($isHighlighted) {
     backgroundColor = reactTheming.getColor({
       theme,
       dark: {
@@ -241,8 +240,8 @@ const colorStyles$1 = _ref => {
 const lineNumberStyles = _ref2 => {
   let {
     theme,
-    language,
-    size
+    $language,
+    $size
   } = _ref2;
   const color = reactTheming.getColor({
     theme,
@@ -252,11 +251,11 @@ const lineNumberStyles = _ref2 => {
     }
   });
   let padding;
-  if (language && language === 'diff') {
+  if ($language && $language === 'diff') {
     padding = 0;
-  } else if (size === 'small') {
+  } else if ($size === 'small') {
     padding = theme.space.base * 4;
-  } else if (size === 'large') {
+  } else if ($size === 'large') {
     padding = theme.space.base * 7;
   } else {
     padding = theme.space.base * 6;
@@ -275,13 +274,13 @@ const lineNumberStyles = _ref2 => {
 };
 const StyledCodeBlockLine = styled__default.default(StyledFont).attrs({
   'data-garden-id': COMPONENT_ID$4,
-  'data-garden-version': '9.1.1',
+  'data-garden-version': '9.2.0',
   as: 'code',
-  isMonospace: true
+  $isMonospace: true
 }).withConfig({
   displayName: "StyledCodeBlockLine",
   componentId: "sc-1goay17-0"
-})(["display:table-row;height:", ";direction:ltr;", ";", ";&::after{display:inline-block;width:", "px;content:'';}", ";"], props => props.theme.lineHeights[THEME_SIZES[props.size]], colorStyles$1, props => props.isNumbered && lineNumberStyles(props), props => props.theme.space.base * 3, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$4, props));
+})(["display:table-row;height:", ";direction:ltr;", ";", ";&::after{display:inline-block;width:", "px;content:'';}", ";"], props => props.theme.lineHeights[THEME_SIZES[props.$size]], colorStyles$1, props => props.$isNumbered && lineNumberStyles(props), props => props.theme.space.base * 3, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$4, props));
 
 const COMPONENT_ID$3 = 'typography.codeblock_token';
 const colorStyles = _ref => {
@@ -446,7 +445,7 @@ const colorStyles = _ref => {
 };
 const StyledCodeBlockToken = styled__default.default.span.attrs({
   'data-garden-id': COMPONENT_ID$3,
-  'data-garden-version': '9.1.1'
+  'data-garden-version': '9.2.0'
 }).withConfig({
   displayName: "StyledCodeBlockToken",
   componentId: "sc-1hkshdq-0"
@@ -455,7 +454,7 @@ const StyledCodeBlockToken = styled__default.default.span.attrs({
 const COMPONENT_ID$2 = 'typography.ellipsis';
 const StyledEllipsis = styled__default.default.div.attrs({
   'data-garden-id': COMPONENT_ID$2,
-  'data-garden-version': '9.1.1'
+  'data-garden-version': '9.2.0'
 }).withConfig({
   displayName: "StyledEllipsis",
   componentId: "sc-1u4uqmy-0"
@@ -469,7 +468,7 @@ const sizeStyles = props => {
 };
 const StyledIcon = styled__default.default(reactTheming.StyledBaseIcon).attrs({
   'data-garden-id': COMPONENT_ID$1,
-  'data-garden-version': '9.1.1'
+  'data-garden-version': '9.2.0'
 }).withConfig({
   displayName: "StyledIcon",
   componentId: "sc-10rfb5b-0"
@@ -477,12 +476,12 @@ const StyledIcon = styled__default.default(reactTheming.StyledBaseIcon).attrs({
 
 const listStyles = props => {
   const rtl = props.theme.rtl;
-  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);
+  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({
   'data-garden-id': ORDERED_ID$1,
-  'data-garden-version': '9.1.1'
+  'data-garden-version': '9.2.0'
 }).withConfig({
   displayName: "StyledList__StyledOrderedList",
   componentId: "sc-jdbsfi-0"
@@ -490,7 +489,7 @@ const StyledOrderedList = styled__default.default.ol.attrs({
 const UNORDERED_ID$1 = 'typography.unordered_list';
 const StyledUnorderedList = styled__default.default.ul.attrs({
   'data-garden-id': UNORDERED_ID$1,
-  'data-garden-version': '9.1.1'
+  'data-garden-version': '9.2.0'
 }).withConfig({
   displayName: "StyledList__StyledUnorderedList",
   componentId: "sc-jdbsfi-1"
@@ -498,43 +497,43 @@ const StyledUnorderedList = styled__default.default.ul.attrs({
 
 const listItemPaddingStyles = props => {
   const base = props.theme.space.base;
-  const paddingTop = props.space === 'large' ? `${base * 2}px` : `${base}px`;
+  const paddingTop = props.$space === 'large' ? `${base * 2}px` : `${base}px`;
   return styled.css(["padding-top:", ";", " > &:first-child,", " > &:first-child{padding-top:0;}", " ", " > &:first-child,", " ", " > &:first-child,", " ", " > &:first-child,", " ", " > &:first-child{padding-top:", ";}"], paddingTop, StyledOrderedList, StyledUnorderedList, StyledOrderedList, StyledOrderedList, StyledOrderedList, StyledUnorderedList, StyledUnorderedList, StyledUnorderedList, StyledUnorderedList, StyledOrderedList, paddingTop);
 };
 const listItemStyles = props => {
-  return styled.css(["line-height:", ";", ";"], reactTheming.getLineHeight(props.theme.lineHeights.md, props.theme.fontSizes.md), props.space !== 'small' && listItemPaddingStyles(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({
   'data-garden-id': ORDERED_ID,
-  'data-garden-version': '9.1.1',
+  'data-garden-version': '9.2.0',
   as: 'li'
 }).withConfig({
   displayName: "StyledListItem__StyledOrderedListItem",
   componentId: "sc-9rsipg-0"
 })(["margin-", ":", ";padding-", ":", ";", ";", ";"], props => props.theme.rtl ? 'right' : 'left', props => polished.math(`${props.theme.space.base} * -1px`), props => props.theme.rtl ? 'right' : 'left', props => polished.math(`${props.theme.space.base} * 1px`), props => listItemStyles(props), props => reactTheming.retrieveComponentStyles(ORDERED_ID, props));
 StyledOrderedListItem.defaultProps = {
-  space: 'medium',
+  $space: 'medium',
   theme: reactTheming.DEFAULT_THEME
 };
 const UNORDERED_ID = 'typography.unordered_list_item';
 const StyledUnorderedListItem = styled__default.default(StyledFont).attrs({
   'data-garden-id': UNORDERED_ID,
-  'data-garden-version': '9.1.1',
+  'data-garden-version': '9.2.0',
   as: 'li'
 }).withConfig({
   displayName: "StyledListItem__StyledUnorderedListItem",
   componentId: "sc-9rsipg-1"
 })(["", ";", ";"], props => listItemStyles(props), props => reactTheming.retrieveComponentStyles(UNORDERED_ID, props));
 StyledUnorderedListItem.defaultProps = {
-  space: 'medium',
+  $space: 'medium',
   theme: reactTheming.DEFAULT_THEME
 };
 
 const COMPONENT_ID = 'typography.paragraph';
 const StyledParagraph = styled__default.default.p.attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.1.1'
+  'data-garden-version': '9.2.0'
 }).withConfig({
   displayName: "StyledParagraph",
   componentId: "sc-zkuftz-0"
@@ -542,13 +541,17 @@ const StyledParagraph = styled__default.default.p.attrs({
 
 const SM = React.forwardRef((_ref, ref) => {
   let {
+    isBold,
+    isMonospace,
     tag,
     ...other
   } = _ref;
   return React__default.default.createElement(StyledFont, Object.assign({
+    $isBold: isBold,
+    $isMonospace: isMonospace,
     as: tag,
     ref: ref,
-    size: "small"
+    $size: "small"
   }, other));
 });
 SM.displayName = 'SM';
@@ -563,13 +566,17 @@ SM.defaultProps = {
 
 const MD = React.forwardRef((_ref, ref) => {
   let {
+    isBold,
+    isMonospace,
     tag,
     ...other
   } = _ref;
   return React__default.default.createElement(StyledFont, Object.assign({
+    $isBold: isBold,
+    $isMonospace: isMonospace,
+    $size: "medium",
     as: tag,
-    ref: ref,
-    size: "medium"
+    ref: ref
   }, other));
 });
 MD.displayName = 'MD';
@@ -584,13 +591,17 @@ MD.defaultProps = {
 
 const LG = React.forwardRef((_ref, ref) => {
   let {
+    isBold,
+    isMonospace,
     tag,
     ...other
   } = _ref;
   return React__default.default.createElement(StyledFont, Object.assign({
+    $isBold: isBold,
+    $isMonospace: isMonospace,
+    $size: "large",
     as: tag,
-    ref: ref,
-    size: "large"
+    ref: ref
   }, other));
 });
 LG.displayName = 'LG';
@@ -605,13 +616,15 @@ LG.defaultProps = {
 
 const XL = React.forwardRef((_ref, ref) => {
   let {
+    isBold,
     tag,
     ...other
   } = _ref;
   return React__default.default.createElement(StyledFont, Object.assign({
-    as: tag,
+    $size: "extralarge",
+    $isBold: isBold,
     ref: ref,
-    size: "extralarge"
+    as: tag
   }, other));
 });
 XL.displayName = 'XL';
@@ -625,13 +638,15 @@ XL.defaultProps = {
 
 const XXL = React.forwardRef((_ref, ref) => {
   let {
+    isBold,
     tag,
     ...other
   } = _ref;
   return React__default.default.createElement(StyledFont, Object.assign({
-    as: tag,
+    $size: "2xlarge",
+    $isBold: isBold,
     ref: ref,
-    size: "2xlarge"
+    as: tag
   }, other));
 });
 XXL.displayName = 'XXL';
@@ -645,14 +660,17 @@ XXL.defaultProps = {
 
 const XXXL = React.forwardRef((_ref, ref) => {
   let {
+    isBold,
     tag,
     ...other
   } = _ref;
   return React__default.default.createElement(StyledFont, Object.assign({
+    $isBold: isBold,
+    $size: "3xlarge"
+  }, other, {
     as: tag,
-    ref: ref,
-    size: "3xlarge"
-  }, other));
+    ref: ref
+  }));
 });
 XXXL.displayName = 'XXXL';
 XXXL.propTypes = {
@@ -677,11 +695,13 @@ Blockquote.defaultProps = {
 const Code = React.forwardRef((_ref, ref) => {
   let {
     hue,
+    size,
     ...other
   } = _ref;
   return React__default.default.createElement(StyledCode, Object.assign({
     ref: ref,
-    hue: hue
+    $hue: hue,
+    $size: size
   }, other));
 });
 Code.displayName = 'Code';
@@ -760,11 +780,11 @@ const CodeBlock = React__default.default.forwardRef((_ref, ref) => {
       line
     }), {
       key: index,
-      language: language,
-      isHighlighted: highlightLines?.includes(index + 1),
-      isNumbered: isNumbered,
-      diff: getDiff(line),
-      size: size,
+      $language: language,
+      $isHighlighted: highlightLines?.includes(index + 1),
+      $isNumbered: isNumbered,
+      $diff: getDiff(line),
+      $size: size,
       style: undefined
     }), line.map((token, tokenKey) => React__default.default.createElement(StyledCodeBlockToken, Object.assign({}, getTokenProps({
       token
@@ -830,7 +850,7 @@ const OrderedListItem = React.forwardRef((props, ref) => {
   } = useOrderedListContext();
   return React__default.default.createElement(StyledOrderedListItem, Object.assign({
     ref: ref,
-    space: size
+    $space: size
   }, props));
 });
 OrderedListItem.displayName = 'OrderedList.Item';
@@ -849,7 +869,7 @@ const OrderedListComponent = React__default.default.forwardRef((_ref, ref) => {
     value: value
   }, React__default.default.createElement(StyledOrderedList, Object.assign({
     ref: ref,
-    listType: type
+    $listType: type
   }, other)));
 });
 OrderedListComponent.displayName = 'OrderedList';
@@ -879,7 +899,7 @@ const UnorderedListItem = React.forwardRef((props, ref) => {
   } = useUnorderedListContext();
   return React__default.default.createElement(StyledUnorderedListItem, Object.assign({
     ref: ref,
-    space: size
+    $space: size
   }, props));
 });
 UnorderedListItem.displayName = 'UnorderedList.Item';
@@ -898,7 +918,7 @@ const UnorderedListComponent = React.forwardRef((_ref, ref) => {
     value: value
   }, React__default.default.createElement(StyledUnorderedList, Object.assign({
     ref: ref,
-    listType: type
+    $listType: type
   }, other)));
 });
 UnorderedListComponent.displayName = 'UnorderedList';
@@ -925,13 +945,19 @@ const Icon = IconComponent;
 
 const SpanComponent = React.forwardRef((_ref, ref) => {
   let {
+    hue,
+    isBold,
+    isMonospace,
     tag,
     ...other
   } = _ref;
   return React__default.default.createElement(StyledFont, Object.assign({
+    $hue: hue,
+    $isBold: isBold,
+    $isMonospace: isMonospace,
+    $size: "inherit",
     as: tag,
-    ref: ref,
-    size: "inherit"
+    ref: ref
   }, other));
 });
 SpanComponent.displayName = 'Span';

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

@@ -8,13 +8,13 @@ import { DefaultTheme } from 'styled-components';
 import { IStyledFontProps } from './StyledFont';
 import { ICodeProps } from '../types';
 interface IStyledCodeProps extends Omit<IStyledFontProps, 'size'> {
-    hue?: ICodeProps['hue'];
-    size?: ICodeProps['size'];
+    $hue?: ICodeProps['hue'];
+    $size?: ICodeProps['size'];
 }
 export declare const StyledCode: import("styled-components").StyledComponent<"code", DefaultTheme, {
     'data-garden-id': string;
     'data-garden-version': string;
     as: string;
-    isMonospace: boolean;
-} & IStyledCodeProps, "isMonospace" | "as" | "data-garden-id" | "data-garden-version">;
+    $isMonospace: boolean;
+} & IStyledCodeProps, "$isMonospace" | "as" | "data-garden-id" | "data-garden-version">;
 export {};

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

@@ -8,15 +8,15 @@ import { DefaultTheme } from 'styled-components';
 import { Language } from 'prism-react-renderer';
 import { Diff, Size } from '../types';
 export interface IStyledCodeBlockLineProps {
-    language?: Language;
-    isHighlighted?: boolean;
-    isNumbered?: boolean;
-    diff?: Diff;
-    size?: Size;
+    $language?: Language;
+    $isHighlighted?: boolean;
+    $isNumbered?: boolean;
+    $diff?: Diff;
+    $size?: Size;
 }
 export declare const StyledCodeBlockLine: import("styled-components").StyledComponent<"code", DefaultTheme, {
     'data-garden-id': string;
     'data-garden-version': string;
     as: string;
-    isMonospace: boolean;
-} & IStyledCodeBlockLineProps, "as" | "data-garden-id" | "data-garden-version" | "isMonospace">;
+    $isMonospace: boolean;
+} & IStyledCodeBlockLineProps, "as" | "data-garden-id" | "data-garden-version" | "$isMonospace">;

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

@@ -11,10 +11,10 @@ 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];
-    hue?: string;
+    $isBold?: boolean;
+    $isMonospace?: boolean;
+    $size?: (typeof FONT_SIZE)[number];
+    $hue?: string;
 }
 export declare const StyledFont: import("styled-components").StyledComponent<"div", DefaultTheme, {
     'data-garden-id': string;

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

@@ -7,14 +7,14 @@
 import { DefaultTheme } from 'styled-components';
 import { IOrderedListProps, IUnorderedListProps } from '../types';
 interface IStyledListProps {
-    listType?: IOrderedListProps['type'];
+    $listType?: IOrderedListProps['type'];
 }
 export declare const StyledOrderedList: import("styled-components").StyledComponent<"ol", DefaultTheme, {
     'data-garden-id': string;
     'data-garden-version': string;
 } & IStyledListProps, "data-garden-id" | "data-garden-version">;
 interface IStyledUnorderedListProps {
-    listType?: IUnorderedListProps['type'];
+    $listType?: IUnorderedListProps['type'];
 }
 export declare const StyledUnorderedList: import("styled-components").StyledComponent<"ul", DefaultTheme, {
     'data-garden-id': string;

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

@@ -7,7 +7,7 @@
 import { DefaultTheme } from 'styled-components';
 import { Size } from '../types';
 interface IStyledListItemProps {
-    space?: Size;
+    $space?: Size;
 }
 export declare const StyledOrderedListItem: import("styled-components").StyledComponent<"li", DefaultTheme, {
     'data-garden-id': string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zendeskgarden/react-typography",
-  "version": "9.1.1",
+  "version": "9.2.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": "^5.3.1"
   },
   "devDependencies": {
-    "@zendeskgarden/react-theming": "^9.1.1"
+    "@zendeskgarden/react-theming": "^9.2.0"
   },
   "keywords": [
     "components",
@@ -45,5 +45,5 @@
     "access": "public"
   },
   "zendeskgarden:src": "src/index.ts",
-  "gitHead": "21eaf7b57f27f1a846ed332f1b8e655d6bc0a13b"
+  "gitHead": "23a86c9a1e830685e277544c089b44614c2261ac"
 }