@zendeskgarden/react-typography 9.11.0 → 9.11.2

package/dist/esm/elements/Blockquote.js

@@ -21,15 +21,19 @@ import '../styled/StyledList.js';
 import '../styled/StyledListItem.js';
 import '../styled/StyledParagraph.js';
 
-const Blockquote = forwardRef((props, ref) => React.createElement(StyledBlockquote, Object.assign({
-  ref: ref
-}, props)));
+const Blockquote = forwardRef((_ref, ref) => {
+  let {
+    size = 'medium',
+    ...props
+  } = _ref;
+  return React.createElement(StyledBlockquote, Object.assign({
+    ref: ref,
+    size: size
+  }, props));
+});
 Blockquote.displayName = 'Blockquote';
 Blockquote.propTypes = {
   size: PropTypes.oneOf(SIZE)
 };
-Blockquote.defaultProps = {
-  size: 'medium'
-};
 
 export { Blockquote };

package/dist/esm/elements/Code.js

@@ -23,8 +23,8 @@ import '../styled/StyledParagraph.js';
 
 const Code = forwardRef((_ref, ref) => {
   let {
-    hue,
-    size,
+    hue = 'grey',
+    size = 'inherit',
     ...other
   } = _ref;
   return React.createElement(StyledCode, Object.assign({
@@ -38,9 +38,5 @@ Code.propTypes = {
   hue: PropTypes.oneOf(HUE),
   size: PropTypes.oneOf(INHERIT_SIZE)
 };
-Code.defaultProps = {
-  hue: 'grey',
-  size: 'inherit'
-};
 
 export { Code };

package/dist/esm/elements/Ellipsis.js

@@ -24,7 +24,7 @@ const Ellipsis = forwardRef((_ref, ref) => {
   let {
     children,
     title,
-    tag,
+    tag = 'div',
     ...other
   } = _ref;
   let textContent = undefined;
@@ -44,8 +44,5 @@ Ellipsis.propTypes = {
   title: PropTypes.string,
   tag: PropTypes.any
 };
-Ellipsis.defaultProps = {
-  tag: 'div'
-};
 
 export { Ellipsis };

package/dist/esm/elements/LG.js

@@ -24,7 +24,7 @@ const LG = forwardRef((_ref, ref) => {
   let {
     isBold,
     isMonospace,
-    tag,
+    tag = 'div',
     ...other
   } = _ref;
   return React.createElement(StyledFont, Object.assign({
@@ -41,8 +41,5 @@ LG.propTypes = {
   isBold: PropTypes.bool,
   isMonospace: PropTypes.bool
 };
-LG.defaultProps = {
-  tag: 'div'
-};
 
 export { LG };

package/dist/esm/elements/MD.js

@@ -24,7 +24,7 @@ const MD = forwardRef((_ref, ref) => {
   let {
     isBold,
     isMonospace,
-    tag,
+    tag = 'div',
     ...other
   } = _ref;
   return React.createElement(StyledFont, Object.assign({
@@ -41,8 +41,5 @@ MD.propTypes = {
   isBold: PropTypes.bool,
   isMonospace: PropTypes.bool
 };
-MD.defaultProps = {
-  tag: 'div'
-};
 
 export { MD };

package/dist/esm/elements/Paragraph.js

@@ -21,15 +21,19 @@ import '../styled/StyledList.js';
 import '../styled/StyledListItem.js';
 import { StyledParagraph } from '../styled/StyledParagraph.js';
 
-const Paragraph = forwardRef((props, ref) => React.createElement(StyledParagraph, Object.assign({
-  ref: ref
-}, props)));
+const Paragraph = forwardRef((_ref, ref) => {
+  let {
+    size = 'medium',
+    ...props
+  } = _ref;
+  return React.createElement(StyledParagraph, Object.assign({
+    ref: ref,
+    size: size
+  }, props));
+});
 Paragraph.displayName = 'Paragraph';
 Paragraph.propTypes = {
   size: PropTypes.oneOf(SIZE)
 };
-Paragraph.defaultProps = {
-  size: 'medium'
-};
 
 export { Paragraph };

package/dist/esm/elements/SM.js

@@ -24,7 +24,7 @@ const SM = forwardRef((_ref, ref) => {
   let {
     isBold,
     isMonospace,
-    tag,
+    tag = 'div',
     ...other
   } = _ref;
   return React.createElement(StyledFont, Object.assign({
@@ -41,8 +41,5 @@ SM.propTypes = {
   isBold: PropTypes.bool,
   isMonospace: PropTypes.bool
 };
-SM.defaultProps = {
-  tag: 'div'
-};
 
 export { SM };

package/dist/esm/elements/XL.js

@@ -23,7 +23,7 @@ import '../styled/StyledParagraph.js';
 const XL = forwardRef((_ref, ref) => {
   let {
     isBold,
-    tag,
+    tag = 'div',
     ...other
   } = _ref;
   return React.createElement(StyledFont, Object.assign({
@@ -38,8 +38,5 @@ XL.propTypes = {
   tag: PropTypes.any,
   isBold: PropTypes.bool
 };
-XL.defaultProps = {
-  tag: 'div'
-};
 
 export { XL };

package/dist/esm/elements/XXL.js

@@ -23,7 +23,7 @@ import '../styled/StyledParagraph.js';
 const XXL = forwardRef((_ref, ref) => {
   let {
     isBold,
-    tag,
+    tag = 'div',
     ...other
   } = _ref;
   return React.createElement(StyledFont, Object.assign({
@@ -38,8 +38,5 @@ XXL.propTypes = {
   tag: PropTypes.any,
   isBold: PropTypes.bool
 };
-XXL.defaultProps = {
-  tag: 'div'
-};
 
 export { XXL };

package/dist/esm/elements/XXXL.js

@@ -23,7 +23,7 @@ import '../styled/StyledParagraph.js';
 const XXXL = forwardRef((_ref, ref) => {
   let {
     isBold,
-    tag,
+    tag = 'div',
     ...other
   } = _ref;
   return React.createElement(StyledFont, Object.assign({
@@ -39,8 +39,5 @@ XXXL.propTypes = {
   tag: PropTypes.any,
   isBold: PropTypes.bool
 };
-XXXL.defaultProps = {
-  tag: 'div'
-};
 
 export { XXXL };

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

@@ -25,8 +25,8 @@ import '../../styled/StyledParagraph.js';
 
 const OrderedListComponent = React.forwardRef((_ref, ref) => {
   let {
-    size,
-    type,
+    size = 'medium',
+    type = 'decimal',
     ...other
   } = _ref;
   const value = useMemo(() => ({
@@ -44,10 +44,6 @@ OrderedListComponent.propTypes = {
   size: PropTypes.oneOf(SIZE),
   type: PropTypes.oneOf(TYPE_ORDERED_LIST)
 };
-OrderedListComponent.defaultProps = {
-  size: 'medium',
-  type: 'decimal'
-};
 const OrderedList = OrderedListComponent;
 OrderedList.Item = Item;
 

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

@@ -25,8 +25,8 @@ import '../../styled/StyledParagraph.js';
 
 const UnorderedListComponent = forwardRef((_ref, ref) => {
   let {
-    size,
-    type,
+    size = 'medium',
+    type = 'disc',
     ...other
   } = _ref;
   const value = useMemo(() => ({
@@ -44,10 +44,6 @@ UnorderedListComponent.propTypes = {
   size: PropTypes.oneOf(SIZE),
   type: PropTypes.oneOf(TYPE_UNORDERED_LIST)
 };
-UnorderedListComponent.defaultProps = {
-  size: 'medium',
-  type: 'disc'
-};
 const UnorderedList = UnorderedListComponent;
 UnorderedList.Item = Item;
 

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

@@ -27,7 +27,7 @@ const SpanComponent = forwardRef((_ref, ref) => {
     hue,
     isBold,
     isMonospace,
-    tag,
+    tag = 'span',
     ...other
   } = _ref;
   return React.createElement(StyledFont, Object.assign({
@@ -46,9 +46,6 @@ SpanComponent.propTypes = {
   isMonospace: PropTypes.bool,
   hue: PropTypes.string
 };
-SpanComponent.defaultProps = {
-  tag: 'span'
-};
 const Span = SpanComponent;
 Span.Icon = Icon;
 Span.StartIcon = StartIcon;

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.11.0'
+  'data-garden-version': '9.11.2'
 }).withConfig({
   displayName: "StyledBlockquote",
   componentId: "sc-1tt3ye0-0"

package/dist/esm/styled/StyledCode.js

@@ -5,7 +5,7 @@
 * found at http://www.apache.org/licenses/LICENSE-2.0.
 */
 import styled, { css } from 'styled-components';
-import { componentStyles, DEFAULT_THEME, getColor } from '@zendeskgarden/react-theming';
+import { componentStyles, getColor } from '@zendeskgarden/react-theming';
 import { StyledFont } from './StyledFont.js';
 
 const COMPONENT_ID = 'typography.code';
@@ -48,19 +48,16 @@ const colorStyles = _ref => {
   const foregroundColor = getColor(fgColorArgs);
   return css(["background-color:", ";color:", ";a &{color:inherit;}"], backgroundColor, foregroundColor);
 };
-const StyledCode = styled(StyledFont).attrs({
+const StyledCode = styled(StyledFont).attrs(props => ({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.11.0',
+  'data-garden-version': '9.11.2',
   as: 'code',
-  $isMonospace: true
-}).withConfig({
+  $isMonospace: true,
+  $hue: props.$hue ?? 'grey',
+  $size: props.$size ?? 'inherit'
+})).withConfig({
   displayName: "StyledCode",
   componentId: "sc-l8yvmf-0"
 })(["border-radius:", ";padding:1.5px;", ";", ";"], props => props.theme.borderRadii.sm, props => colorStyles(props), componentStyles);
-StyledCode.defaultProps = {
-  theme: DEFAULT_THEME,
-  $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.11.0'
+  'data-garden-version': '9.11.2'
 }).withConfig({
   displayName: "StyledCodeBlock",
   componentId: "sc-5wky57-0"

package/dist/esm/styled/StyledCodeBlockContainer.js

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

package/dist/esm/styled/StyledCodeBlockLine.js

@@ -86,7 +86,7 @@ const lineNumberStyles = _ref2 => {
 };
 const StyledCodeBlockLine = styled(StyledFont).attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.11.0',
+  'data-garden-version': '9.11.2',
   as: 'code',
   $isMonospace: true
 }).withConfig({

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.11.0'
+  'data-garden-version': '9.11.2'
 }).withConfig({
   displayName: "StyledCodeBlockToken",
   componentId: "sc-1hkshdq-0"

package/dist/esm/styled/StyledEllipsis.js

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

package/dist/esm/styled/StyledFont.js

@@ -65,15 +65,13 @@ const fontStyles = _ref => {
   }
   return css(["transition:color 0.1s ease-in-out;line-height:", ";color:", ";font-family:", ";font-size:", ";font-weight:", ";direction:", ";"], lineHeight, color, fontFamily, fontSize, fontWeight, direction);
 };
-const StyledFont = styled.div.attrs({
+const StyledFont = styled.div.attrs(props => ({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.11.0'
-}).withConfig({
+  'data-garden-version': '9.11.2',
+  $size: props.$size ?? 'inherit'
+})).withConfig({
   displayName: "StyledFont",
   componentId: "sc-1iildbo-0"
 })(["", ";&[hidden]{display:inline;", ";}", ";"], props => !props.hidden && fontStyles(props), hideVisually(), componentStyles);
-StyledFont.defaultProps = {
-  $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.11.0'
+  'data-garden-version': '9.11.2'
 }).withConfig({
   displayName: "StyledIcon",
   componentId: "sc-10rfb5b-0"

package/dist/esm/styled/StyledKbd.js

@@ -15,33 +15,38 @@ const sizeStyles = _ref => {
     theme,
     $size
   } = _ref;
+  let minWidth;
   let paddingHorizontal;
   let paddingVertical = '0';
   switch ($size) {
     case 'small':
+      minWidth = math(`${theme.lineHeights.sm} - 1px`);
       paddingHorizontal = `${theme.space.base}px`;
       break;
     case 'medium':
+      minWidth = math(`${theme.lineHeights.md} - 1px`);
       paddingHorizontal = `${theme.space.base * 1.5}px`;
       break;
     case 'large':
+      minWidth = math(`${theme.lineHeights.lg} - 1px`);
       paddingHorizontal = `${theme.space.base * 1.75}px`;
       break;
     default:
+      minWidth = 'calc(1.2em + 3px)';
       paddingHorizontal = `${stripUnit(math(`${theme.space.base * 1.5} / (${theme.fontSizes.md} - 1px)`))}em`;
       paddingVertical = '1.5px';
       break;
   }
   const padding = `${paddingVertical} ${paddingHorizontal}`;
-  return css(["&&{padding:", ";}"], padding);
+  return css(["&&{box-sizing:border-box;padding:", ";min-width:", ";}"], padding, minWidth);
 };
 const StyledKbd = styled(StyledCode).attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.11.0',
+  'data-garden-version': '9.11.2',
   as: 'kbd'
 }).withConfig({
   displayName: "StyledKbd",
   componentId: "sc-1gzk2wp-0"
-})(["display:inline-block;direction:ltr;", ";", ";"], sizeStyles, componentStyles);
+})(["display:inline-block;direction:ltr;text-align:center;font-family:sans-serif;", ";", ";"], sizeStyles, componentStyles);
 
 export { StyledKbd };

package/dist/esm/styled/StyledList.js

@@ -14,7 +14,7 @@ const listStyles = props => {
 const ORDERED_ID = 'typography.ordered_list';
 const StyledOrderedList = styled.ol.attrs({
   'data-garden-id': ORDERED_ID,
-  'data-garden-version': '9.11.0'
+  'data-garden-version': '9.11.2'
 }).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.11.0'
+  'data-garden-version': '9.11.2'
 }).withConfig({
   displayName: "StyledList__StyledUnorderedList",
   componentId: "sc-jdbsfi-1"

package/dist/esm/styled/StyledListItem.js

@@ -6,7 +6,7 @@
 */
 import styled, { css } from 'styled-components';
 import { math } from 'polished';
-import { componentStyles, DEFAULT_THEME, getLineHeight } from '@zendeskgarden/react-theming';
+import { componentStyles, getLineHeight } from '@zendeskgarden/react-theming';
 import { StyledOrderedList, StyledUnorderedList } from './StyledList.js';
 import { StyledFont } from './StyledFont.js';
 
@@ -19,30 +19,24 @@ const listItemStyles = 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({
+const StyledOrderedListItem = styled(StyledFont).attrs(props => ({
   'data-garden-id': ORDERED_ID,
-  'data-garden-version': '9.11.0',
-  as: 'li'
-}).withConfig({
+  'data-garden-version': '9.11.2',
+  as: 'li',
+  $space: props.$space ?? 'medium'
+})).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`), listItemStyles, componentStyles);
-StyledOrderedListItem.defaultProps = {
-  $space: 'medium',
-  theme: DEFAULT_THEME
-};
 const UNORDERED_ID = 'typography.unordered_list_item';
-const StyledUnorderedListItem = styled(StyledFont).attrs({
+const StyledUnorderedListItem = styled(StyledFont).attrs(props => ({
   'data-garden-id': UNORDERED_ID,
-  'data-garden-version': '9.11.0',
-  as: 'li'
-}).withConfig({
+  'data-garden-version': '9.11.2',
+  as: 'li',
+  $space: props.$space ?? 'medium'
+})).withConfig({
   displayName: "StyledListItem__StyledUnorderedListItem",
   componentId: "sc-9rsipg-1"
 })(["", ";", ";"], listItemStyles, componentStyles);
-StyledUnorderedListItem.defaultProps = {
-  $space: 'medium',
-  theme: DEFAULT_THEME
-};
 
 export { StyledOrderedListItem, StyledUnorderedListItem };

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.11.0'
+  'data-garden-version': '9.11.2'
 }).withConfig({
   displayName: "StyledParagraph",
   componentId: "sc-zkuftz-0"

package/dist/index.cjs.js

@@ -84,21 +84,19 @@ const fontStyles = _ref => {
   }
   return styled.css(["transition:color 0.1s ease-in-out;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(props => ({
   'data-garden-id': COMPONENT_ID$a,
-  'data-garden-version': '9.11.0'
-}).withConfig({
+  'data-garden-version': '9.11.2',
+  $size: props.$size ?? 'inherit'
+})).withConfig({
   displayName: "StyledFont",
   componentId: "sc-1iildbo-0"
 })(["", ";&[hidden]{display:inline;", ";}", ";"], props => !props.hidden && fontStyles(props), polished.hideVisually(), reactTheming.componentStyles);
-StyledFont.defaultProps = {
-  $size: 'inherit'
-};
 
 const COMPONENT_ID$9 = 'typography.blockquote';
 const StyledBlockquote = styled__default.default.blockquote.attrs({
   'data-garden-id': COMPONENT_ID$9,
-  'data-garden-version': '9.11.0'
+  'data-garden-version': '9.11.2'
 }).withConfig({
   displayName: "StyledBlockquote",
   componentId: "sc-1tt3ye0-0"
@@ -147,20 +145,17 @@ const colorStyles$3 = _ref => {
   const foregroundColor = reactTheming.getColor(fgColorArgs);
   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(props => ({
   'data-garden-id': COMPONENT_ID$8,
-  'data-garden-version': '9.11.0',
+  'data-garden-version': '9.11.2',
   as: 'code',
-  $isMonospace: true
-}).withConfig({
+  $isMonospace: true,
+  $hue: props.$hue ?? 'grey',
+  $size: props.$size ?? 'inherit'
+})).withConfig({
   displayName: "StyledCode",
   componentId: "sc-l8yvmf-0"
 })(["border-radius:", ";padding:1.5px;", ";", ";"], props => props.theme.borderRadii.sm, props => colorStyles$3(props), reactTheming.componentStyles);
-StyledCode.defaultProps = {
-  theme: reactTheming.DEFAULT_THEME,
-  $hue: 'grey',
-  $size: 'inherit'
-};
 
 const COMPONENT_ID$7 = 'typography.codeblock';
 const colorStyles$2 = _ref => {
@@ -179,7 +174,7 @@ const colorStyles$2 = _ref => {
 };
 const StyledCodeBlock = styled__default.default.pre.attrs({
   'data-garden-id': COMPONENT_ID$7,
-  'data-garden-version': '9.11.0'
+  'data-garden-version': '9.11.2'
 }).withConfig({
   displayName: "StyledCodeBlock",
   componentId: "sc-5wky57-0"
@@ -188,7 +183,7 @@ const StyledCodeBlock = styled__default.default.pre.attrs({
 const COMPONENT_ID$6 = 'typography.codeblock_container';
 const StyledCodeBlockContainer = styled__default.default.div.attrs({
   'data-garden-id': COMPONENT_ID$6,
-  'data-garden-version': '9.11.0'
+  'data-garden-version': '9.11.2'
 }).withConfig({
   displayName: "StyledCodeBlockContainer",
   componentId: "sc-14zgbfw-0"
@@ -274,7 +269,7 @@ const lineNumberStyles = _ref2 => {
 };
 const StyledCodeBlockLine = styled__default.default(StyledFont).attrs({
   'data-garden-id': COMPONENT_ID$5,
-  'data-garden-version': '9.11.0',
+  'data-garden-version': '9.11.2',
   as: 'code',
   $isMonospace: true
 }).withConfig({
@@ -445,7 +440,7 @@ const colorStyles = _ref => {
 };
 const StyledCodeBlockToken = styled__default.default.span.attrs({
   'data-garden-id': COMPONENT_ID$4,
-  'data-garden-version': '9.11.0'
+  'data-garden-version': '9.11.2'
 }).withConfig({
   displayName: "StyledCodeBlockToken",
   componentId: "sc-1hkshdq-0"
@@ -454,7 +449,7 @@ const StyledCodeBlockToken = styled__default.default.span.attrs({
 const COMPONENT_ID$3 = 'typography.ellipsis';
 const StyledEllipsis = styled__default.default.div.attrs({
   'data-garden-id': COMPONENT_ID$3,
-  'data-garden-version': '9.11.0'
+  'data-garden-version': '9.11.2'
 }).withConfig({
   displayName: "StyledEllipsis",
   componentId: "sc-1u4uqmy-0"
@@ -468,7 +463,7 @@ const sizeStyles$1 = props => {
 };
 const StyledIcon = styled__default.default(reactTheming.StyledBaseIcon).attrs({
   'data-garden-id': COMPONENT_ID$2,
-  'data-garden-version': '9.11.0'
+  'data-garden-version': '9.11.2'
 }).withConfig({
   displayName: "StyledIcon",
   componentId: "sc-10rfb5b-0"
@@ -480,34 +475,39 @@ const sizeStyles = _ref => {
     theme,
     $size
   } = _ref;
+  let minWidth;
   let paddingHorizontal;
   let paddingVertical = '0';
   switch ($size) {
     case 'small':
+      minWidth = polished.math(`${theme.lineHeights.sm} - 1px`);
       paddingHorizontal = `${theme.space.base}px`;
       break;
     case 'medium':
+      minWidth = polished.math(`${theme.lineHeights.md} - 1px`);
       paddingHorizontal = `${theme.space.base * 1.5}px`;
       break;
     case 'large':
+      minWidth = polished.math(`${theme.lineHeights.lg} - 1px`);
       paddingHorizontal = `${theme.space.base * 1.75}px`;
       break;
     default:
+      minWidth = 'calc(1.2em + 3px)';
       paddingHorizontal = `${polished.stripUnit(polished.math(`${theme.space.base * 1.5} / (${theme.fontSizes.md} - 1px)`))}em`;
       paddingVertical = '1.5px';
       break;
   }
   const padding = `${paddingVertical} ${paddingHorizontal}`;
-  return styled.css(["&&{padding:", ";}"], padding);
+  return styled.css(["&&{box-sizing:border-box;padding:", ";min-width:", ";}"], padding, minWidth);
 };
 const StyledKbd = styled__default.default(StyledCode).attrs({
   'data-garden-id': COMPONENT_ID$1,
-  'data-garden-version': '9.11.0',
+  'data-garden-version': '9.11.2',
   as: 'kbd'
 }).withConfig({
   displayName: "StyledKbd",
   componentId: "sc-1gzk2wp-0"
-})(["display:inline-block;direction:ltr;", ";", ";"], sizeStyles, reactTheming.componentStyles);
+})(["display:inline-block;direction:ltr;text-align:center;font-family:sans-serif;", ";", ";"], sizeStyles, reactTheming.componentStyles);
 
 const listStyles = props => {
   const rtl = props.theme.rtl;
@@ -516,7 +516,7 @@ const listStyles = props => {
 const ORDERED_ID$1 = 'typography.ordered_list';
 const StyledOrderedList = styled__default.default.ol.attrs({
   'data-garden-id': ORDERED_ID$1,
-  'data-garden-version': '9.11.0'
+  'data-garden-version': '9.11.2'
 }).withConfig({
   displayName: "StyledList__StyledOrderedList",
   componentId: "sc-jdbsfi-0"
@@ -524,7 +524,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.11.0'
+  'data-garden-version': '9.11.2'
 }).withConfig({
   displayName: "StyledList__StyledUnorderedList",
   componentId: "sc-jdbsfi-1"
@@ -539,36 +539,30 @@ 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(props => ({
   'data-garden-id': ORDERED_ID,
-  'data-garden-version': '9.11.0',
-  as: 'li'
-}).withConfig({
+  'data-garden-version': '9.11.2',
+  as: 'li',
+  $space: props.$space ?? 'medium'
+})).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`), listItemStyles, reactTheming.componentStyles);
-StyledOrderedListItem.defaultProps = {
-  $space: 'medium',
-  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(props => ({
   'data-garden-id': UNORDERED_ID,
-  'data-garden-version': '9.11.0',
-  as: 'li'
-}).withConfig({
+  'data-garden-version': '9.11.2',
+  as: 'li',
+  $space: props.$space ?? 'medium'
+})).withConfig({
   displayName: "StyledListItem__StyledUnorderedListItem",
   componentId: "sc-9rsipg-1"
 })(["", ";", ";"], listItemStyles, reactTheming.componentStyles);
-StyledUnorderedListItem.defaultProps = {
-  $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.11.0'
+  'data-garden-version': '9.11.2'
 }).withConfig({
   displayName: "StyledParagraph",
   componentId: "sc-zkuftz-0"
@@ -578,7 +572,7 @@ const SM = React.forwardRef((_ref, ref) => {
   let {
     isBold,
     isMonospace,
-    tag,
+    tag = 'div',
     ...other
   } = _ref;
   return React__default.default.createElement(StyledFont, Object.assign({
@@ -595,15 +589,12 @@ SM.propTypes = {
   isBold: PropTypes__default.default.bool,
   isMonospace: PropTypes__default.default.bool
 };
-SM.defaultProps = {
-  tag: 'div'
-};
 
 const MD = React.forwardRef((_ref, ref) => {
   let {
     isBold,
     isMonospace,
-    tag,
+    tag = 'div',
     ...other
   } = _ref;
   return React__default.default.createElement(StyledFont, Object.assign({
@@ -620,15 +611,12 @@ MD.propTypes = {
   isBold: PropTypes__default.default.bool,
   isMonospace: PropTypes__default.default.bool
 };
-MD.defaultProps = {
-  tag: 'div'
-};
 
 const LG = React.forwardRef((_ref, ref) => {
   let {
     isBold,
     isMonospace,
-    tag,
+    tag = 'div',
     ...other
   } = _ref;
   return React__default.default.createElement(StyledFont, Object.assign({
@@ -645,14 +633,11 @@ LG.propTypes = {
   isBold: PropTypes__default.default.bool,
   isMonospace: PropTypes__default.default.bool
 };
-LG.defaultProps = {
-  tag: 'div'
-};
 
 const XL = React.forwardRef((_ref, ref) => {
   let {
     isBold,
-    tag,
+    tag = 'div',
     ...other
   } = _ref;
   return React__default.default.createElement(StyledFont, Object.assign({
@@ -667,14 +652,11 @@ XL.propTypes = {
   tag: PropTypes__default.default.any,
   isBold: PropTypes__default.default.bool
 };
-XL.defaultProps = {
-  tag: 'div'
-};
 
 const XXL = React.forwardRef((_ref, ref) => {
   let {
     isBold,
-    tag,
+    tag = 'div',
     ...other
   } = _ref;
   return React__default.default.createElement(StyledFont, Object.assign({
@@ -689,14 +671,11 @@ XXL.propTypes = {
   tag: PropTypes__default.default.any,
   isBold: PropTypes__default.default.bool
 };
-XXL.defaultProps = {
-  tag: 'div'
-};
 
 const XXXL = React.forwardRef((_ref, ref) => {
   let {
     isBold,
-    tag,
+    tag = 'div',
     ...other
   } = _ref;
   return React__default.default.createElement(StyledFont, Object.assign({
@@ -712,25 +691,26 @@ XXXL.propTypes = {
   tag: PropTypes__default.default.any,
   isBold: PropTypes__default.default.bool
 };
-XXXL.defaultProps = {
-  tag: 'div'
-};
 
-const Blockquote = React.forwardRef((props, ref) => React__default.default.createElement(StyledBlockquote, Object.assign({
-  ref: ref
-}, props)));
+const Blockquote = React.forwardRef((_ref, ref) => {
+  let {
+    size = 'medium',
+    ...props
+  } = _ref;
+  return React__default.default.createElement(StyledBlockquote, Object.assign({
+    ref: ref,
+    size: size
+  }, props));
+});
 Blockquote.displayName = 'Blockquote';
 Blockquote.propTypes = {
   size: PropTypes__default.default.oneOf(SIZE)
 };
-Blockquote.defaultProps = {
-  size: 'medium'
-};
 
 const Code = React.forwardRef((_ref, ref) => {
   let {
-    hue,
-    size,
+    hue = 'grey',
+    size = 'inherit',
     ...other
   } = _ref;
   return React__default.default.createElement(StyledCode, Object.assign({
@@ -744,10 +724,6 @@ Code.propTypes = {
   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) => {
   let {
@@ -835,7 +811,7 @@ const Ellipsis = React.forwardRef((_ref, ref) => {
   let {
     children,
     title,
-    tag,
+    tag = 'div',
     ...other
   } = _ref;
   let textContent = undefined;
@@ -855,9 +831,6 @@ Ellipsis.propTypes = {
   title: PropTypes__default.default.string,
   tag: PropTypes__default.default.any
 };
-Ellipsis.defaultProps = {
-  tag: 'div'
-};
 
 const Kbd = React.forwardRef((_ref, ref) => {
   let {
@@ -875,16 +848,20 @@ Kbd.propTypes = {
   size: PropTypes__default.default.oneOf(INHERIT_SIZE)
 };
 
-const Paragraph = React.forwardRef((props, ref) => React__default.default.createElement(StyledParagraph, Object.assign({
-  ref: ref
-}, props)));
+const Paragraph = React.forwardRef((_ref, ref) => {
+  let {
+    size = 'medium',
+    ...props
+  } = _ref;
+  return React__default.default.createElement(StyledParagraph, Object.assign({
+    ref: ref,
+    size: size
+  }, props));
+});
 Paragraph.displayName = 'Paragraph';
 Paragraph.propTypes = {
   size: PropTypes__default.default.oneOf(SIZE)
 };
-Paragraph.defaultProps = {
-  size: 'medium'
-};
 
 const OrderedListContext = React.createContext(undefined);
 const useOrderedListContext = () => {
@@ -909,8 +886,8 @@ const Item$1 = OrderedListItem;
 
 const OrderedListComponent = React__default.default.forwardRef((_ref, ref) => {
   let {
-    size,
-    type,
+    size = 'medium',
+    type = 'decimal',
     ...other
   } = _ref;
   const value = React.useMemo(() => ({
@@ -928,10 +905,6 @@ OrderedListComponent.propTypes = {
   size: PropTypes__default.default.oneOf(SIZE),
   type: PropTypes__default.default.oneOf(TYPE_ORDERED_LIST)
 };
-OrderedListComponent.defaultProps = {
-  size: 'medium',
-  type: 'decimal'
-};
 const OrderedList = OrderedListComponent;
 OrderedList.Item = Item$1;
 
@@ -958,8 +931,8 @@ const Item = UnorderedListItem;
 
 const UnorderedListComponent = React.forwardRef((_ref, ref) => {
   let {
-    size,
-    type,
+    size = 'medium',
+    type = 'disc',
     ...other
   } = _ref;
   const value = React.useMemo(() => ({
@@ -977,10 +950,6 @@ UnorderedListComponent.propTypes = {
   size: PropTypes__default.default.oneOf(SIZE),
   type: PropTypes__default.default.oneOf(TYPE_UNORDERED_LIST)
 };
-UnorderedListComponent.defaultProps = {
-  size: 'medium',
-  type: 'disc'
-};
 const UnorderedList = UnorderedListComponent;
 UnorderedList.Item = Item;
 
@@ -999,7 +968,7 @@ const SpanComponent = React.forwardRef((_ref, ref) => {
     hue,
     isBold,
     isMonospace,
-    tag,
+    tag = 'span',
     ...other
   } = _ref;
   return React__default.default.createElement(StyledFont, Object.assign({
@@ -1018,9 +987,6 @@ SpanComponent.propTypes = {
   isMonospace: PropTypes__default.default.bool,
   hue: PropTypes__default.default.string
 };
-SpanComponent.defaultProps = {
-  tag: 'span'
-};
 const Span = SpanComponent;
 Span.Icon = Icon;
 Span.StartIcon = StartIcon;

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

@@ -10,9 +10,9 @@ interface IStyledCodeProps extends Omit<IStyledFontProps, 'size'> {
     $hue?: ICodeProps['hue'];
     $size?: ICodeProps['size'];
 }
-export declare const StyledCode: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("styled-components").FastOmit<import("styled-components/dist/types").Substitute<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, "ref"> & {
+export declare const StyledCode: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("styled-components/dist/types").Substitute<import("styled-components/dist/types").Substitute<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, "ref"> & {
     ref?: ((instance: HTMLElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLElement> | null | undefined;
 }, Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, "ref"> & {
     ref?: ((instance: HTMLElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLElement> | null | undefined;
-}>, never>, IStyledCodeProps>> & string;
+}>, IStyledCodeProps>, IStyledCodeProps>> & string;
 export {};

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

@@ -16,7 +16,7 @@ export interface IStyledFontProps {
     $size?: (typeof FONT_SIZE)[number];
     $hue?: string;
 }
-export declare const StyledFont: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("styled-components").FastOmit<import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+export declare const StyledFont: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("styled-components/dist/types").Substitute<import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
     ref?: ((instance: HTMLDivElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLDivElement> | null | undefined;
-}>, never>, IStyledFontProps>> & string;
+}>, IStyledFontProps>, IStyledFontProps>> & string;
 export {};

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

@@ -8,14 +8,14 @@ import { Size } from '../types';
 interface IStyledListItemProps {
     $space?: Size;
 }
-export declare const StyledOrderedListItem: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("styled-components").FastOmit<import("styled-components/dist/types").Substitute<Omit<import("react").DetailedHTMLProps<import("react").LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, "ref"> & {
+export declare const StyledOrderedListItem: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("styled-components/dist/types").Substitute<import("styled-components/dist/types").Substitute<Omit<import("react").DetailedHTMLProps<import("react").LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, "ref"> & {
     ref?: ((instance: HTMLLIElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLLIElement> | null | undefined;
 }, Omit<import("react").DetailedHTMLProps<import("react").LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, "ref"> & {
     ref?: ((instance: HTMLLIElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLLIElement> | null | undefined;
-}>, never>, IStyledListItemProps>> & string;
-export declare const StyledUnorderedListItem: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("styled-components").FastOmit<import("styled-components/dist/types").Substitute<Omit<import("react").DetailedHTMLProps<import("react").LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, "ref"> & {
+}>, IStyledListItemProps>, IStyledListItemProps>> & string;
+export declare const StyledUnorderedListItem: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("styled-components/dist/types").Substitute<import("styled-components/dist/types").Substitute<Omit<import("react").DetailedHTMLProps<import("react").LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, "ref"> & {
     ref?: ((instance: HTMLLIElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLLIElement> | null | undefined;
 }, Omit<import("react").DetailedHTMLProps<import("react").LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, "ref"> & {
     ref?: ((instance: HTMLLIElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLLIElement> | null | undefined;
-}>, never>, IStyledListItemProps>> & string;
+}>, IStyledListItemProps>, IStyledListItemProps>> & string;
 export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zendeskgarden/react-typography",
-  "version": "9.11.0",
+  "version": "9.11.2",
   "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 || ^6.0.0"
   },
   "devDependencies": {
-    "@zendeskgarden/react-theming": "^9.11.0"
+    "@zendeskgarden/react-theming": "^9.11.2"
   },
   "keywords": [
     "components",
@@ -45,5 +45,5 @@
     "access": "public"
   },
   "zendeskgarden:src": "src/index.ts",
-  "gitHead": "1bde0483c654e7fc3482c7b95741147a01073ef9"
+  "gitHead": "3adb38d25d0a3fa38ff21c7707950623f22b5db7"
 }