@zendeskgarden/react-typography 9.10.0 → 9.11.0

package/dist/esm/elements/Blockquote.js

@@ -16,6 +16,7 @@ import '../styled/StyledCodeBlockToken.js';
 import '../styled/StyledEllipsis.js';
 import '../styled/StyledFont.js';
 import '../styled/StyledIcon.js';
+import '../styled/StyledKbd.js';
 import '../styled/StyledList.js';
 import '../styled/StyledListItem.js';
 import '../styled/StyledParagraph.js';

package/dist/esm/elements/Code.js

@@ -16,6 +16,7 @@ import '../styled/StyledCodeBlockToken.js';
 import '../styled/StyledEllipsis.js';
 import '../styled/StyledFont.js';
 import '../styled/StyledIcon.js';
+import '../styled/StyledKbd.js';
 import '../styled/StyledList.js';
 import '../styled/StyledListItem.js';
 import '../styled/StyledParagraph.js';

package/dist/esm/elements/CodeBlock.js

@@ -18,6 +18,7 @@ import { StyledCodeBlockToken } from '../styled/StyledCodeBlockToken.js';
 import '../styled/StyledEllipsis.js';
 import '../styled/StyledFont.js';
 import '../styled/StyledIcon.js';
+import '../styled/StyledKbd.js';
 import '../styled/StyledList.js';
 import '../styled/StyledListItem.js';
 import '../styled/StyledParagraph.js';

package/dist/esm/elements/Ellipsis.js

@@ -15,6 +15,7 @@ import '../styled/StyledCodeBlockToken.js';
 import { StyledEllipsis } from '../styled/StyledEllipsis.js';
 import '../styled/StyledFont.js';
 import '../styled/StyledIcon.js';
+import '../styled/StyledKbd.js';
 import '../styled/StyledList.js';
 import '../styled/StyledListItem.js';
 import '../styled/StyledParagraph.js';

package/dist/esm/elements/Kbd.js

@@ -0,0 +1,40 @@
+/**
+* Copyright Zendesk, Inc.
+*
+* Use of this source code is governed under the Apache License, Version 2.0
+* found at http://www.apache.org/licenses/LICENSE-2.0.
+*/
+import React, { forwardRef } from 'react';
+import PropTypes from 'prop-types';
+import '../styled/StyledBlockquote.js';
+import '../styled/StyledCode.js';
+import '../styled/StyledCodeBlock.js';
+import '../styled/StyledCodeBlockContainer.js';
+import '../styled/StyledCodeBlockLine.js';
+import '../styled/StyledCodeBlockToken.js';
+import '../styled/StyledEllipsis.js';
+import '../styled/StyledFont.js';
+import '../styled/StyledIcon.js';
+import { StyledKbd } from '../styled/StyledKbd.js';
+import '../styled/StyledList.js';
+import '../styled/StyledListItem.js';
+import '../styled/StyledParagraph.js';
+import { INHERIT_SIZE } from '../types/index.js';
+
+const Kbd = forwardRef((_ref, ref) => {
+  let {
+    size = 'inherit',
+    ...other
+  } = _ref;
+  return React.createElement(StyledKbd, Object.assign({
+    $size: size
+  }, other, {
+    ref: ref
+  }));
+});
+Kbd.displayName = 'Kbd';
+Kbd.propTypes = {
+  size: PropTypes.oneOf(INHERIT_SIZE)
+};
+
+export { Kbd };

package/dist/esm/elements/LG.js

@@ -15,6 +15,7 @@ import '../styled/StyledCodeBlockToken.js';
 import '../styled/StyledEllipsis.js';
 import { StyledFont } from '../styled/StyledFont.js';
 import '../styled/StyledIcon.js';
+import '../styled/StyledKbd.js';
 import '../styled/StyledList.js';
 import '../styled/StyledListItem.js';
 import '../styled/StyledParagraph.js';

package/dist/esm/elements/MD.js

@@ -15,6 +15,7 @@ import '../styled/StyledCodeBlockToken.js';
 import '../styled/StyledEllipsis.js';
 import { StyledFont } from '../styled/StyledFont.js';
 import '../styled/StyledIcon.js';
+import '../styled/StyledKbd.js';
 import '../styled/StyledList.js';
 import '../styled/StyledListItem.js';
 import '../styled/StyledParagraph.js';

package/dist/esm/elements/Paragraph.js

@@ -16,6 +16,7 @@ import '../styled/StyledCodeBlockToken.js';
 import '../styled/StyledEllipsis.js';
 import '../styled/StyledFont.js';
 import '../styled/StyledIcon.js';
+import '../styled/StyledKbd.js';
 import '../styled/StyledList.js';
 import '../styled/StyledListItem.js';
 import { StyledParagraph } from '../styled/StyledParagraph.js';

package/dist/esm/elements/SM.js

@@ -15,6 +15,7 @@ import '../styled/StyledCodeBlockToken.js';
 import '../styled/StyledEllipsis.js';
 import { StyledFont } from '../styled/StyledFont.js';
 import '../styled/StyledIcon.js';
+import '../styled/StyledKbd.js';
 import '../styled/StyledList.js';
 import '../styled/StyledListItem.js';
 import '../styled/StyledParagraph.js';

package/dist/esm/elements/XL.js

@@ -15,6 +15,7 @@ import '../styled/StyledCodeBlockToken.js';
 import '../styled/StyledEllipsis.js';
 import { StyledFont } from '../styled/StyledFont.js';
 import '../styled/StyledIcon.js';
+import '../styled/StyledKbd.js';
 import '../styled/StyledList.js';
 import '../styled/StyledListItem.js';
 import '../styled/StyledParagraph.js';

package/dist/esm/elements/XXL.js

@@ -15,6 +15,7 @@ import '../styled/StyledCodeBlockToken.js';
 import '../styled/StyledEllipsis.js';
 import { StyledFont } from '../styled/StyledFont.js';
 import '../styled/StyledIcon.js';
+import '../styled/StyledKbd.js';
 import '../styled/StyledList.js';
 import '../styled/StyledListItem.js';
 import '../styled/StyledParagraph.js';

package/dist/esm/elements/XXXL.js

@@ -15,6 +15,7 @@ import '../styled/StyledCodeBlockToken.js';
 import '../styled/StyledEllipsis.js';
 import { StyledFont } from '../styled/StyledFont.js';
 import '../styled/StyledIcon.js';
+import '../styled/StyledKbd.js';
 import '../styled/StyledList.js';
 import '../styled/StyledListItem.js';
 import '../styled/StyledParagraph.js';

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

@@ -18,6 +18,7 @@ import '../../styled/StyledCodeBlockToken.js';
 import '../../styled/StyledEllipsis.js';
 import '../../styled/StyledFont.js';
 import '../../styled/StyledIcon.js';
+import '../../styled/StyledKbd.js';
 import { StyledOrderedList } from '../../styled/StyledList.js';
 import '../../styled/StyledListItem.js';
 import '../../styled/StyledParagraph.js';

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

@@ -15,6 +15,7 @@ import '../../styled/StyledCodeBlockToken.js';
 import '../../styled/StyledEllipsis.js';
 import '../../styled/StyledFont.js';
 import '../../styled/StyledIcon.js';
+import '../../styled/StyledKbd.js';
 import '../../styled/StyledList.js';
 import { StyledOrderedListItem } from '../../styled/StyledListItem.js';
 import '../../styled/StyledParagraph.js';

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

@@ -18,6 +18,7 @@ import '../../styled/StyledCodeBlockToken.js';
 import '../../styled/StyledEllipsis.js';
 import '../../styled/StyledFont.js';
 import '../../styled/StyledIcon.js';
+import '../../styled/StyledKbd.js';
 import { StyledUnorderedList } from '../../styled/StyledList.js';
 import '../../styled/StyledListItem.js';
 import '../../styled/StyledParagraph.js';

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

@@ -15,6 +15,7 @@ import '../../styled/StyledCodeBlockToken.js';
 import '../../styled/StyledEllipsis.js';
 import '../../styled/StyledFont.js';
 import '../../styled/StyledIcon.js';
+import '../../styled/StyledKbd.js';
 import '../../styled/StyledList.js';
 import { StyledUnorderedListItem } from '../../styled/StyledListItem.js';
 import '../../styled/StyledParagraph.js';

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

@@ -14,6 +14,7 @@ import '../../styled/StyledCodeBlockToken.js';
 import '../../styled/StyledEllipsis.js';
 import '../../styled/StyledFont.js';
 import { StyledIcon } from '../../styled/StyledIcon.js';
+import '../../styled/StyledKbd.js';
 import '../../styled/StyledList.js';
 import '../../styled/StyledListItem.js';
 import '../../styled/StyledParagraph.js';

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

@@ -15,6 +15,7 @@ import '../../styled/StyledCodeBlockToken.js';
 import '../../styled/StyledEllipsis.js';
 import { StyledFont } from '../../styled/StyledFont.js';
 import '../../styled/StyledIcon.js';
+import '../../styled/StyledKbd.js';
 import '../../styled/StyledList.js';
 import '../../styled/StyledListItem.js';
 import '../../styled/StyledParagraph.js';

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

@@ -14,6 +14,7 @@ import '../../styled/StyledCodeBlockToken.js';
 import '../../styled/StyledEllipsis.js';
 import '../../styled/StyledFont.js';
 import { StyledIcon } from '../../styled/StyledIcon.js';
+import '../../styled/StyledKbd.js';
 import '../../styled/StyledList.js';
 import '../../styled/StyledListItem.js';
 import '../../styled/StyledParagraph.js';

package/dist/esm/index.js

@@ -14,6 +14,7 @@ export { Blockquote } from './elements/Blockquote.js';
 export { Code } from './elements/Code.js';
 export { CodeBlock } from './elements/CodeBlock.js';
 export { Ellipsis } from './elements/Ellipsis.js';
+export { Kbd } from './elements/Kbd.js';
 export { Paragraph } from './elements/Paragraph.js';
 export { OrderedList } from './elements/lists/OrderedList.js';
 export { UnorderedList } from './elements/lists/UnorderedList.js';

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

package/dist/esm/styled/StyledCode.js

@@ -50,7 +50,7 @@ const colorStyles = _ref => {
 };
 const StyledCode = styled(StyledFont).attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.10.0',
+  'data-garden-version': '9.11.0',
   as: 'code',
   $isMonospace: true
 }).withConfig({

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.10.0'
+  'data-garden-version': '9.11.0'
 }).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.10.0'
+  'data-garden-version': '9.11.0'
 }).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.10.0',
+  'data-garden-version': '9.11.0',
   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.10.0'
+  'data-garden-version': '9.11.0'
 }).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.10.0'
+  'data-garden-version': '9.11.0'
 }).withConfig({
   displayName: "StyledEllipsis",
   componentId: "sc-1u4uqmy-0"

package/dist/esm/styled/StyledFont.js

@@ -67,7 +67,7 @@ const fontStyles = _ref => {
 };
 const StyledFont = styled.div.attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.10.0'
+  'data-garden-version': '9.11.0'
 }).withConfig({
   displayName: "StyledFont",
   componentId: "sc-1iildbo-0"

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.10.0'
+  'data-garden-version': '9.11.0'
 }).withConfig({
   displayName: "StyledIcon",
   componentId: "sc-10rfb5b-0"

package/dist/esm/styled/StyledKbd.js

@@ -0,0 +1,47 @@
+/**
+* Copyright Zendesk, Inc.
+*
+* Use of this source code is governed under the Apache License, Version 2.0
+* found at http://www.apache.org/licenses/LICENSE-2.0.
+*/
+import styled, { css } from 'styled-components';
+import { stripUnit, math } from 'polished';
+import { componentStyles } from '@zendeskgarden/react-theming';
+import { StyledCode } from './StyledCode.js';
+
+const COMPONENT_ID = 'typography.kbd';
+const sizeStyles = _ref => {
+  let {
+    theme,
+    $size
+  } = _ref;
+  let paddingHorizontal;
+  let paddingVertical = '0';
+  switch ($size) {
+    case 'small':
+      paddingHorizontal = `${theme.space.base}px`;
+      break;
+    case 'medium':
+      paddingHorizontal = `${theme.space.base * 1.5}px`;
+      break;
+    case 'large':
+      paddingHorizontal = `${theme.space.base * 1.75}px`;
+      break;
+    default:
+      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);
+};
+const StyledKbd = styled(StyledCode).attrs({
+  'data-garden-id': COMPONENT_ID,
+  'data-garden-version': '9.11.0',
+  as: 'kbd'
+}).withConfig({
+  displayName: "StyledKbd",
+  componentId: "sc-1gzk2wp-0"
+})(["display:inline-block;direction:ltr;", ";", ";"], 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.10.0'
+  'data-garden-version': '9.11.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.10.0'
+  'data-garden-version': '9.11.0'
 }).withConfig({
   displayName: "StyledList__StyledUnorderedList",
   componentId: "sc-jdbsfi-1"

package/dist/esm/styled/StyledListItem.js

@@ -21,7 +21,7 @@ const listItemStyles = props => {
 const ORDERED_ID = 'typography.ordered_list_item';
 const StyledOrderedListItem = styled(StyledFont).attrs({
   'data-garden-id': ORDERED_ID,
-  'data-garden-version': '9.10.0',
+  'data-garden-version': '9.11.0',
   as: 'li'
 }).withConfig({
   displayName: "StyledListItem__StyledOrderedListItem",
@@ -34,7 +34,7 @@ StyledOrderedListItem.defaultProps = {
 const UNORDERED_ID = 'typography.unordered_list_item';
 const StyledUnorderedListItem = styled(StyledFont).attrs({
   'data-garden-id': UNORDERED_ID,
-  'data-garden-version': '9.10.0',
+  'data-garden-version': '9.11.0',
   as: 'li'
 }).withConfig({
   displayName: "StyledListItem__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.10.0'
+  'data-garden-version': '9.11.0'
 }).withConfig({
   displayName: "StyledParagraph",
   componentId: "sc-zkuftz-0"

package/dist/index.cjs.js

@@ -28,7 +28,7 @@ const TYPE_ORDERED_LIST = ['decimal', 'decimal-leading-zero', 'lower-alpha', 'lo
 const TYPE_UNORDERED_LIST = ['circle', 'disc', 'square'];
 const LANGUAGES = ['bash', 'css', 'diff', 'graphql', 'javascript', 'json', 'jsx', 'markdown', 'markup', 'python', 'typescript', 'tsx', 'yaml'];
 
-const COMPONENT_ID$9 = 'typography.font';
+const COMPONENT_ID$a = 'typography.font';
 [...SIZE, 'extralarge', '2xlarge', '3xlarge'];
 const THEME_SIZES = {
   small: 'sm',
@@ -85,8 +85,8 @@ 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({
-  'data-garden-id': COMPONENT_ID$9,
-  'data-garden-version': '9.10.0'
+  'data-garden-id': COMPONENT_ID$a,
+  'data-garden-version': '9.11.0'
 }).withConfig({
   displayName: "StyledFont",
   componentId: "sc-1iildbo-0"
@@ -95,10 +95,10 @@ StyledFont.defaultProps = {
   $size: 'inherit'
 };
 
-const COMPONENT_ID$8 = 'typography.blockquote';
+const COMPONENT_ID$9 = 'typography.blockquote';
 const StyledBlockquote = styled__default.default.blockquote.attrs({
-  'data-garden-id': COMPONENT_ID$8,
-  'data-garden-version': '9.10.0'
+  'data-garden-id': COMPONENT_ID$9,
+  'data-garden-version': '9.11.0'
 }).withConfig({
   displayName: "StyledBlockquote",
   componentId: "sc-1tt3ye0-0"
@@ -107,7 +107,7 @@ const StyledBlockquote = styled__default.default.blockquote.attrs({
   variable: 'border.default'
 }), props => props.theme.rtl ? 'right' : 'left', props => props.theme.space.base * 4, props => props.theme.rtl ? 'rtl' : 'ltr', props => props.theme.lineHeights[THEME_SIZES[props.size]], reactTheming.componentStyles);
 
-const COMPONENT_ID$7 = 'typography.code';
+const COMPONENT_ID$8 = 'typography.code';
 const colorStyles$3 = _ref => {
   let {
     $hue,
@@ -148,8 +148,8 @@ const colorStyles$3 = _ref => {
   return styled.css(["background-color:", ";color:", ";a &{color:inherit;}"], backgroundColor, foregroundColor);
 };
 const StyledCode = styled__default.default(StyledFont).attrs({
-  'data-garden-id': COMPONENT_ID$7,
-  'data-garden-version': '9.10.0',
+  'data-garden-id': COMPONENT_ID$8,
+  'data-garden-version': '9.11.0',
   as: 'code',
   $isMonospace: true
 }).withConfig({
@@ -162,7 +162,7 @@ StyledCode.defaultProps = {
   $size: 'inherit'
 };
 
-const COMPONENT_ID$6 = 'typography.codeblock';
+const COMPONENT_ID$7 = 'typography.codeblock';
 const colorStyles$2 = _ref => {
   let {
     theme
@@ -178,17 +178,17 @@ const colorStyles$2 = _ref => {
   return styled.css(["background-color:", ";color:", ";"], backgroundColor, foregroundColor);
 };
 const StyledCodeBlock = styled__default.default.pre.attrs({
-  'data-garden-id': COMPONENT_ID$6,
-  'data-garden-version': '9.10.0'
+  'data-garden-id': COMPONENT_ID$7,
+  'data-garden-version': '9.11.0'
 }).withConfig({
   displayName: "StyledCodeBlock",
   componentId: "sc-5wky57-0"
 })(["display:table;margin:0;padding:", "px;box-sizing:border-box;width:100%;direction:ltr;white-space:pre;counter-reset:linenumber;", ";", ";"], props => props.theme.space.base * 3, colorStyles$2, reactTheming.componentStyles);
 
-const COMPONENT_ID$5 = 'typography.codeblock_container';
+const COMPONENT_ID$6 = 'typography.codeblock_container';
 const StyledCodeBlockContainer = styled__default.default.div.attrs({
-  'data-garden-id': COMPONENT_ID$5,
-  'data-garden-version': '9.10.0'
+  'data-garden-id': COMPONENT_ID$6,
+  'data-garden-version': '9.11.0'
 }).withConfig({
   displayName: "StyledCodeBlockContainer",
   componentId: "sc-14zgbfw-0"
@@ -196,7 +196,7 @@ const StyledCodeBlockContainer = styled__default.default.div.attrs({
   theme: props.theme
 }), reactTheming.componentStyles);
 
-const COMPONENT_ID$4 = 'typography.codeblock_code';
+const COMPONENT_ID$5 = 'typography.codeblock_code';
 const colorStyles$1 = _ref => {
   let {
     theme,
@@ -273,8 +273,8 @@ const lineNumberStyles = _ref2 => {
   `;
 };
 const StyledCodeBlockLine = styled__default.default(StyledFont).attrs({
-  'data-garden-id': COMPONENT_ID$4,
-  'data-garden-version': '9.10.0',
+  'data-garden-id': COMPONENT_ID$5,
+  'data-garden-version': '9.11.0',
   as: 'code',
   $isMonospace: true
 }).withConfig({
@@ -282,7 +282,7 @@ const StyledCodeBlockLine = styled__default.default(StyledFont).attrs({
   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, reactTheming.componentStyles);
 
-const COMPONENT_ID$3 = 'typography.codeblock_token';
+const COMPONENT_ID$4 = 'typography.codeblock_token';
 const colorStyles = _ref => {
   let {
     theme
@@ -444,35 +444,70 @@ const colorStyles = _ref => {
   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({
-  'data-garden-id': COMPONENT_ID$3,
-  'data-garden-version': '9.10.0'
+  'data-garden-id': COMPONENT_ID$4,
+  'data-garden-version': '9.11.0'
 }).withConfig({
   displayName: "StyledCodeBlockToken",
   componentId: "sc-1hkshdq-0"
 })(["display:inline-block;&.bold:not(.diff){font-weight:", ";}&.coord{padding-left:0.75em;}&.italic{font-style:italic;}&.prefix{width:2em;text-align:center;}", ";", ";"], props => props.theme.fontWeights.semibold, colorStyles, reactTheming.componentStyles);
 
-const COMPONENT_ID$2 = 'typography.ellipsis';
+const COMPONENT_ID$3 = 'typography.ellipsis';
 const StyledEllipsis = styled__default.default.div.attrs({
-  'data-garden-id': COMPONENT_ID$2,
-  'data-garden-version': '9.10.0'
+  'data-garden-id': COMPONENT_ID$3,
+  'data-garden-version': '9.11.0'
 }).withConfig({
   displayName: "StyledEllipsis",
   componentId: "sc-1u4uqmy-0"
 })(["overflow:hidden;text-overflow:ellipsis;white-space:nowrap;direction:", ";", ";"], props => props.theme.rtl ? 'rtl' : 'ltr', reactTheming.componentStyles);
 
-const COMPONENT_ID$1 = 'typography.icon';
-const sizeStyles = props => {
+const COMPONENT_ID$2 = 'typography.icon';
+const sizeStyles$1 = props => {
   const margin = props.$isStart && `${props.theme.space.base * 2}px`;
   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(reactTheming.StyledBaseIcon).attrs({
-  'data-garden-id': COMPONENT_ID$1,
-  'data-garden-version': '9.10.0'
+  'data-garden-id': COMPONENT_ID$2,
+  'data-garden-version': '9.11.0'
 }).withConfig({
   displayName: "StyledIcon",
   componentId: "sc-10rfb5b-0"
-})(["position:relative;top:-1px;vertical-align:middle;", ";", ";"], props => sizeStyles(props), reactTheming.componentStyles);
+})(["position:relative;top:-1px;vertical-align:middle;", ";", ";"], props => sizeStyles$1(props), reactTheming.componentStyles);
+
+const COMPONENT_ID$1 = 'typography.kbd';
+const sizeStyles = _ref => {
+  let {
+    theme,
+    $size
+  } = _ref;
+  let paddingHorizontal;
+  let paddingVertical = '0';
+  switch ($size) {
+    case 'small':
+      paddingHorizontal = `${theme.space.base}px`;
+      break;
+    case 'medium':
+      paddingHorizontal = `${theme.space.base * 1.5}px`;
+      break;
+    case 'large':
+      paddingHorizontal = `${theme.space.base * 1.75}px`;
+      break;
+    default:
+      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);
+};
+const StyledKbd = styled__default.default(StyledCode).attrs({
+  'data-garden-id': COMPONENT_ID$1,
+  'data-garden-version': '9.11.0',
+  as: 'kbd'
+}).withConfig({
+  displayName: "StyledKbd",
+  componentId: "sc-1gzk2wp-0"
+})(["display:inline-block;direction:ltr;", ";", ";"], sizeStyles, reactTheming.componentStyles);
 
 const listStyles = props => {
   const rtl = props.theme.rtl;
@@ -481,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.10.0'
+  'data-garden-version': '9.11.0'
 }).withConfig({
   displayName: "StyledList__StyledOrderedList",
   componentId: "sc-jdbsfi-0"
@@ -489,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.10.0'
+  'data-garden-version': '9.11.0'
 }).withConfig({
   displayName: "StyledList__StyledUnorderedList",
   componentId: "sc-jdbsfi-1"
@@ -506,7 +541,7 @@ const listItemStyles = props => {
 const ORDERED_ID = 'typography.ordered_list_item';
 const StyledOrderedListItem = styled__default.default(StyledFont).attrs({
   'data-garden-id': ORDERED_ID,
-  'data-garden-version': '9.10.0',
+  'data-garden-version': '9.11.0',
   as: 'li'
 }).withConfig({
   displayName: "StyledListItem__StyledOrderedListItem",
@@ -519,7 +554,7 @@ StyledOrderedListItem.defaultProps = {
 const UNORDERED_ID = 'typography.unordered_list_item';
 const StyledUnorderedListItem = styled__default.default(StyledFont).attrs({
   'data-garden-id': UNORDERED_ID,
-  'data-garden-version': '9.10.0',
+  'data-garden-version': '9.11.0',
   as: 'li'
 }).withConfig({
   displayName: "StyledListItem__StyledUnorderedListItem",
@@ -533,7 +568,7 @@ StyledUnorderedListItem.defaultProps = {
 const COMPONENT_ID = 'typography.paragraph';
 const StyledParagraph = styled__default.default.p.attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.10.0'
+  'data-garden-version': '9.11.0'
 }).withConfig({
   displayName: "StyledParagraph",
   componentId: "sc-zkuftz-0"
@@ -824,6 +859,22 @@ Ellipsis.defaultProps = {
   tag: 'div'
 };
 
+const Kbd = React.forwardRef((_ref, ref) => {
+  let {
+    size = 'inherit',
+    ...other
+  } = _ref;
+  return React__default.default.createElement(StyledKbd, Object.assign({
+    $size: size
+  }, other, {
+    ref: ref
+  }));
+});
+Kbd.displayName = 'Kbd';
+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)));
@@ -978,6 +1029,7 @@ exports.Blockquote = Blockquote;
 exports.Code = Code;
 exports.CodeBlock = CodeBlock;
 exports.Ellipsis = Ellipsis;
+exports.Kbd = Kbd;
 exports.LG = LG;
 exports.MD = MD;
 exports.OrderedList = OrderedList;

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

@@ -0,0 +1,12 @@
+/**
+ * Copyright Zendesk, Inc.
+ *
+ * Use of this source code is governed under the Apache License, Version 2.0
+ * found at http://www.apache.org/licenses/LICENSE-2.0.
+ */
+import React from 'react';
+import { IKbdProps } from '../types';
+/**
+ * @extends HTMLAttributes<HTMLElement>
+ */
+export declare const Kbd: React.ForwardRefExoticComponent<IKbdProps & React.RefAttributes<HTMLElement>>;

package/dist/typings/index.d.ts

@@ -14,8 +14,9 @@ export { Blockquote } from './elements/Blockquote';
 export { Code } from './elements/Code';
 export { CodeBlock } from './elements/CodeBlock';
 export { Ellipsis } from './elements/Ellipsis';
+export { Kbd } from './elements/Kbd';
 export { Paragraph } from './elements/Paragraph';
 export { OrderedList } from './elements/lists/OrderedList';
 export { UnorderedList } from './elements/lists/UnorderedList';
 export { Span } from './elements/span/Span';
-export type { ITypescaleMonospaceProps as ISMProps, ITypescaleMonospaceProps as IMDProps, ITypescaleMonospaceProps as ILGProps, ITypescaleProps as IXLProps, ITypescaleProps as IXXLProps, ITypescaleProps as IXXXLProps, IBlockquoteProps, ICodeProps, ICodeBlockProps, IEllipsisProps, IParagraphProps, IOrderedListProps, IUnorderedListProps, ISpanProps } from './types';
+export type { ITypescaleMonospaceProps as ISMProps, ITypescaleMonospaceProps as IMDProps, ITypescaleMonospaceProps as ILGProps, ITypescaleProps as IXLProps, ITypescaleProps as IXXLProps, ITypescaleProps as IXXXLProps, IBlockquoteProps, ICodeProps, ICodeBlockProps, IEllipsisProps, IKbdProps, IParagraphProps, IOrderedListProps, IUnorderedListProps, ISpanProps } from './types';

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

@@ -0,0 +1,17 @@
+/**
+ * Copyright Zendesk, Inc.
+ *
+ * Use of this source code is governed under the Apache License, Version 2.0
+ * found at http://www.apache.org/licenses/LICENSE-2.0.
+ */
+import { DefaultTheme, ThemeProps } from 'styled-components';
+import { IKbdProps } from '../types';
+interface IStyledKbdProps extends ThemeProps<DefaultTheme> {
+    $size?: IKbdProps['size'];
+}
+export declare const StyledKbd: 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"> & {
+    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>, IStyledKbdProps>> & string;
+export {};

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

@@ -13,6 +13,7 @@ export * from './StyledCodeBlockToken';
 export * from './StyledEllipsis';
 export * from './StyledFont';
 export * from './StyledIcon';
+export * from './StyledKbd';
 export * from './StyledList';
 export * from './StyledListItem';
 export * from './StyledParagraph';

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

@@ -53,6 +53,10 @@ export interface IEllipsisProps extends HTMLAttributes<HTMLDivElement> {
     /** Updates the element's HTML tag */
     tag?: any;
 }
+export interface IKbdProps extends HTMLAttributes<HTMLElement> {
+    /** Adjusts the font size. By default font size is inherited from the surrounding text. */
+    size?: (typeof INHERIT_SIZE)[number];
+}
 export interface IParagraphProps extends HTMLAttributes<HTMLParagraphElement> {
     /** Controls the spacing between sibling paragraphs */
     size?: Size;

package/package.json

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