@zendeskgarden/react-typography 8.67.0 → 8.69.0

package/dist/index.cjs.js

@@ -89,7 +89,7 @@ const fontStyles = props => {
 };
 const StyledFont = styled__default.default.div.attrs({
   'data-garden-id': COMPONENT_ID$9,
-  'data-garden-version': '8.67.0'
+  'data-garden-version': '8.69.0'
 }).withConfig({
   displayName: "StyledFont",
   componentId: "sc-1iildbo-0"
@@ -102,7 +102,7 @@ StyledFont.defaultProps = {
 const COMPONENT_ID$8 = 'typography.blockquote';
 const StyledBlockquote = styled__default.default.blockquote.attrs({
   'data-garden-id': COMPONENT_ID$8,
-  'data-garden-version': '8.67.0'
+  'data-garden-version': '8.69.0'
 }).withConfig({
   displayName: "StyledBlockquote",
   componentId: "sc-1tt3ye0-0"
@@ -121,7 +121,7 @@ const colorStyles$3 = props => {
 };
 const StyledCode = styled__default.default(StyledFont).attrs({
   'data-garden-id': COMPONENT_ID$7,
-  'data-garden-version': '8.67.0',
+  'data-garden-version': '8.69.0',
   as: 'code'
 }).withConfig({
   displayName: "StyledCode",
@@ -142,7 +142,7 @@ const colorStyles$2 = props => {
 };
 const StyledCodeBlock = styled__default.default.pre.attrs({
   'data-garden-id': COMPONENT_ID$6,
-  'data-garden-version': '8.67.0'
+  'data-garden-version': '8.69.0'
 }).withConfig({
   displayName: "StyledCodeBlock",
   componentId: "sc-5wky57-0"
@@ -154,11 +154,13 @@ StyledCodeBlock.defaultProps = {
 const COMPONENT_ID$5 = 'typography.codeblock_container';
 const StyledCodeBlockContainer = styled__default.default.div.attrs({
   'data-garden-id': COMPONENT_ID$5,
-  'data-garden-version': '8.67.0'
+  'data-garden-version': '8.69.0'
 }).withConfig({
   displayName: "StyledCodeBlockContainer",
   componentId: "sc-14zgbfw-0"
-})(["overflow:auto;&:focus{outline:none;}&[data-garden-focus-visible]{box-shadow:", ";}", ";"], props => props.theme.shadows.md(reactTheming.getColor('primaryHue', 600, props.theme, 0.35)), props => reactTheming.retrieveComponentStyles(COMPONENT_ID$5, props));
+})(["transition:box-shadow 0.1s ease-in-out;overflow:auto;", " ", ";"], props => reactTheming.focusStyles({
+  theme: props.theme
+}), props => reactTheming.retrieveComponentStyles(COMPONENT_ID$5, props));
 StyledCodeBlockContainer.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
@@ -215,7 +217,7 @@ const lineNumberStyles = props => {
 };
 const StyledCodeBlockLine = styled__default.default(StyledFont).attrs({
   'data-garden-id': COMPONENT_ID$4,
-  'data-garden-version': '8.67.0',
+  'data-garden-version': '8.69.0',
   as: 'code',
   isMonospace: true
 }).withConfig({
@@ -250,7 +252,7 @@ const colorStyles = props => {
 };
 const StyledCodeBlockToken = styled__default.default.span.attrs({
   'data-garden-id': COMPONENT_ID$3,
-  'data-garden-version': '8.67.0'
+  'data-garden-version': '8.69.0'
 }).withConfig({
   displayName: "StyledCodeBlockToken",
   componentId: "sc-1hkshdq-0"
@@ -262,7 +264,7 @@ StyledCodeBlockToken.defaultProps = {
 const COMPONENT_ID$2 = 'typography.ellipsis';
 const StyledEllipsis = styled__default.default.div.attrs({
   'data-garden-id': COMPONENT_ID$2,
-  'data-garden-version': '8.67.0'
+  'data-garden-version': '8.69.0'
 }).withConfig({
   displayName: "StyledEllipsis",
   componentId: "sc-1u4uqmy-0"
@@ -286,7 +288,7 @@ const StyledIcon = styled__default.default(_ref => {
   return React__default.default.cloneElement(React.Children.only(children), props);
 }).attrs({
   'data-garden-id': COMPONENT_ID$1,
-  'data-garden-version': '8.67.0'
+  'data-garden-version': '8.69.0'
 }).withConfig({
   displayName: "StyledIcon",
   componentId: "sc-10rfb5b-0"
@@ -302,7 +304,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': '8.67.0'
+  'data-garden-version': '8.69.0'
 }).withConfig({
   displayName: "StyledList__StyledOrderedList",
   componentId: "sc-jdbsfi-0"
@@ -313,7 +315,7 @@ StyledOrderedList.defaultProps = {
 const UNORDERED_ID$1 = 'typography.unordered_list';
 const StyledUnorderedList = styled__default.default.ul.attrs({
   'data-garden-id': UNORDERED_ID$1,
-  'data-garden-version': '8.67.0'
+  'data-garden-version': '8.69.0'
 }).withConfig({
   displayName: "StyledList__StyledUnorderedList",
   componentId: "sc-jdbsfi-1"
@@ -333,7 +335,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': '8.67.0',
+  'data-garden-version': '8.69.0',
   as: 'li'
 }).withConfig({
   displayName: "StyledListItem__StyledOrderedListItem",
@@ -346,7 +348,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': '8.67.0',
+  'data-garden-version': '8.69.0',
   as: 'li'
 }).withConfig({
   displayName: "StyledListItem__StyledUnorderedListItem",
@@ -360,7 +362,7 @@ StyledUnorderedListItem.defaultProps = {
 const COMPONENT_ID = 'typography.paragraph';
 const StyledParagraph = styled__default.default.p.attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '8.67.0'
+  'data-garden-version': '8.69.0'
 }).withConfig({
   displayName: "StyledParagraph",
   componentId: "sc-zkuftz-0"
@@ -492,7 +494,7 @@ XXXL.defaultProps = {
   tag: 'div'
 };
 
-const Blockquote = React__default.default.forwardRef((props, ref) => React__default.default.createElement(StyledBlockquote, _extends({
+const Blockquote = React.forwardRef((props, ref) => React__default.default.createElement(StyledBlockquote, _extends({
   ref: ref
 }, props)));
 Blockquote.displayName = 'Blockquote';

package/dist/index.esm.js

@@ -8,7 +8,7 @@
 import React, { Children, forwardRef, useRef, useMemo, createContext, useContext } from 'react';
 import PropTypes from 'prop-types';
 import styled, { css } from 'styled-components';
-import { retrieveComponentStyles, DEFAULT_THEME, getColor, getLineHeight } from '@zendeskgarden/react-theming';
+import { retrieveComponentStyles, DEFAULT_THEME, getColor, focusStyles, getLineHeight } from '@zendeskgarden/react-theming';
 import { math } from 'polished';
 import Highlight, { Prism } from 'prism-react-renderer';
 import { useScrollRegion } from '@zendeskgarden/container-scrollregion';
@@ -80,7 +80,7 @@ const fontStyles = props => {
 };
 const StyledFont = styled.div.attrs({
   'data-garden-id': COMPONENT_ID$9,
-  'data-garden-version': '8.67.0'
+  'data-garden-version': '8.69.0'
 }).withConfig({
   displayName: "StyledFont",
   componentId: "sc-1iildbo-0"
@@ -93,7 +93,7 @@ StyledFont.defaultProps = {
 const COMPONENT_ID$8 = 'typography.blockquote';
 const StyledBlockquote = styled.blockquote.attrs({
   'data-garden-id': COMPONENT_ID$8,
-  'data-garden-version': '8.67.0'
+  'data-garden-version': '8.69.0'
 }).withConfig({
   displayName: "StyledBlockquote",
   componentId: "sc-1tt3ye0-0"
@@ -112,7 +112,7 @@ const colorStyles$3 = props => {
 };
 const StyledCode = styled(StyledFont).attrs({
   'data-garden-id': COMPONENT_ID$7,
-  'data-garden-version': '8.67.0',
+  'data-garden-version': '8.69.0',
   as: 'code'
 }).withConfig({
   displayName: "StyledCode",
@@ -133,7 +133,7 @@ const colorStyles$2 = props => {
 };
 const StyledCodeBlock = styled.pre.attrs({
   'data-garden-id': COMPONENT_ID$6,
-  'data-garden-version': '8.67.0'
+  'data-garden-version': '8.69.0'
 }).withConfig({
   displayName: "StyledCodeBlock",
   componentId: "sc-5wky57-0"
@@ -145,11 +145,13 @@ StyledCodeBlock.defaultProps = {
 const COMPONENT_ID$5 = 'typography.codeblock_container';
 const StyledCodeBlockContainer = styled.div.attrs({
   'data-garden-id': COMPONENT_ID$5,
-  'data-garden-version': '8.67.0'
+  'data-garden-version': '8.69.0'
 }).withConfig({
   displayName: "StyledCodeBlockContainer",
   componentId: "sc-14zgbfw-0"
-})(["overflow:auto;&:focus{outline:none;}&[data-garden-focus-visible]{box-shadow:", ";}", ";"], props => props.theme.shadows.md(getColor('primaryHue', 600, props.theme, 0.35)), props => retrieveComponentStyles(COMPONENT_ID$5, props));
+})(["transition:box-shadow 0.1s ease-in-out;overflow:auto;", " ", ";"], props => focusStyles({
+  theme: props.theme
+}), props => retrieveComponentStyles(COMPONENT_ID$5, props));
 StyledCodeBlockContainer.defaultProps = {
   theme: DEFAULT_THEME
 };
@@ -206,7 +208,7 @@ const lineNumberStyles = props => {
 };
 const StyledCodeBlockLine = styled(StyledFont).attrs({
   'data-garden-id': COMPONENT_ID$4,
-  'data-garden-version': '8.67.0',
+  'data-garden-version': '8.69.0',
   as: 'code',
   isMonospace: true
 }).withConfig({
@@ -241,7 +243,7 @@ const colorStyles = props => {
 };
 const StyledCodeBlockToken = styled.span.attrs({
   'data-garden-id': COMPONENT_ID$3,
-  'data-garden-version': '8.67.0'
+  'data-garden-version': '8.69.0'
 }).withConfig({
   displayName: "StyledCodeBlockToken",
   componentId: "sc-1hkshdq-0"
@@ -253,7 +255,7 @@ StyledCodeBlockToken.defaultProps = {
 const COMPONENT_ID$2 = 'typography.ellipsis';
 const StyledEllipsis = styled.div.attrs({
   'data-garden-id': COMPONENT_ID$2,
-  'data-garden-version': '8.67.0'
+  'data-garden-version': '8.69.0'
 }).withConfig({
   displayName: "StyledEllipsis",
   componentId: "sc-1u4uqmy-0"
@@ -277,7 +279,7 @@ const StyledIcon = styled(_ref => {
   return React.cloneElement(Children.only(children), props);
 }).attrs({
   'data-garden-id': COMPONENT_ID$1,
-  'data-garden-version': '8.67.0'
+  'data-garden-version': '8.69.0'
 }).withConfig({
   displayName: "StyledIcon",
   componentId: "sc-10rfb5b-0"
@@ -293,7 +295,7 @@ const listStyles = props => {
 const ORDERED_ID$1 = 'typography.ordered_list';
 const StyledOrderedList = styled.ol.attrs({
   'data-garden-id': ORDERED_ID$1,
-  'data-garden-version': '8.67.0'
+  'data-garden-version': '8.69.0'
 }).withConfig({
   displayName: "StyledList__StyledOrderedList",
   componentId: "sc-jdbsfi-0"
@@ -304,7 +306,7 @@ StyledOrderedList.defaultProps = {
 const UNORDERED_ID$1 = 'typography.unordered_list';
 const StyledUnorderedList = styled.ul.attrs({
   'data-garden-id': UNORDERED_ID$1,
-  'data-garden-version': '8.67.0'
+  'data-garden-version': '8.69.0'
 }).withConfig({
   displayName: "StyledList__StyledUnorderedList",
   componentId: "sc-jdbsfi-1"
@@ -324,7 +326,7 @@ const listItemStyles = props => {
 const ORDERED_ID = 'typography.ordered_list_item';
 const StyledOrderedListItem = styled(StyledFont).attrs({
   'data-garden-id': ORDERED_ID,
-  'data-garden-version': '8.67.0',
+  'data-garden-version': '8.69.0',
   as: 'li'
 }).withConfig({
   displayName: "StyledListItem__StyledOrderedListItem",
@@ -337,7 +339,7 @@ StyledOrderedListItem.defaultProps = {
 const UNORDERED_ID = 'typography.unordered_list_item';
 const StyledUnorderedListItem = styled(StyledFont).attrs({
   'data-garden-id': UNORDERED_ID,
-  'data-garden-version': '8.67.0',
+  'data-garden-version': '8.69.0',
   as: 'li'
 }).withConfig({
   displayName: "StyledListItem__StyledUnorderedListItem",
@@ -351,7 +353,7 @@ StyledUnorderedListItem.defaultProps = {
 const COMPONENT_ID = 'typography.paragraph';
 const StyledParagraph = styled.p.attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '8.67.0'
+  'data-garden-version': '8.69.0'
 }).withConfig({
   displayName: "StyledParagraph",
   componentId: "sc-zkuftz-0"
@@ -483,7 +485,7 @@ XXXL.defaultProps = {
   tag: 'div'
 };
 
-const Blockquote = React.forwardRef((props, ref) => React.createElement(StyledBlockquote, _extends({
+const Blockquote = forwardRef((props, ref) => React.createElement(StyledBlockquote, _extends({
   ref: ref
 }, props)));
 Blockquote.displayName = 'Blockquote';

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

@@ -7,6 +7,6 @@
 import React from 'react';
 import { IBlockquoteProps } from '../types';
 /**
- * @extends BlockquoteHTMLAttributes<HTMLElement>
+ * @extends BlockquoteHTMLAttributes<HTMLQuoteElement>
  */
-export declare const Blockquote: React.ForwardRefExoticComponent<IBlockquoteProps & React.RefAttributes<HTMLElement>>;
+export declare const Blockquote: React.ForwardRefExoticComponent<IBlockquoteProps & React.RefAttributes<HTMLQuoteElement>>;

package/dist/typings/elements/span/Icon.d.ts

@@ -4,11 +4,11 @@
  * 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 { HTMLAttributes } from 'react';
+import React, { HTMLAttributes } from 'react';
 /**
  * @extends HTMLAttributes<HTMLElement>
  */
 export declare const Icon: {
-    (props: HTMLAttributes<HTMLElement>): JSX.Element;
+    (props: HTMLAttributes<HTMLElement>): React.JSX.Element;
     displayName: string;
 };

package/dist/typings/elements/span/StartIcon.d.ts

@@ -4,11 +4,11 @@
  * 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 { HTMLAttributes } from 'react';
+import React, { HTMLAttributes } from 'react';
 /**
  * @extends HTMLAttributes<HTMLElement>
  */
 export declare const StartIcon: {
-    (props: HTMLAttributes<HTMLElement>): JSX.Element;
+    (props: HTMLAttributes<HTMLElement>): React.JSX.Element;
     displayName: string;
 };

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

@@ -23,7 +23,7 @@ export interface ITypescaleMonospaceProps extends ITypescaleProps {
     /** Renders with monospace font */
     isMonospace?: boolean;
 }
-export interface IBlockquoteProps extends BlockquoteHTMLAttributes<HTMLElement> {
+export interface IBlockquoteProps extends BlockquoteHTMLAttributes<HTMLQuoteElement> {
     /** Controls the spacing between sibling blockquotes and paragraphs */
     size?: Size;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zendeskgarden/react-typography",
-  "version": "8.67.0",
+  "version": "8.69.0",
   "description": "Components relating to typography in the Garden Design System",
   "license": "Apache-2.0",
   "author": "Zendesk Garden <garden@zendesk.com>",
@@ -27,13 +27,13 @@
     "prop-types": "^15.5.7"
   },
   "peerDependencies": {
-    "@zendeskgarden/react-theming": "^8.1.0",
+    "@zendeskgarden/react-theming": "^8.67.0",
     "react": ">=16.8.0",
     "react-dom": ">=16.8.0",
     "styled-components": "^4.2.0 || ^5.0.0"
   },
   "devDependencies": {
-    "@zendeskgarden/react-theming": "^8.67.0"
+    "@zendeskgarden/react-theming": "^8.69.0"
   },
   "keywords": [
     "components",
@@ -45,5 +45,5 @@
     "access": "public"
   },
   "zendeskgarden:src": "src/index.ts",
-  "gitHead": "50a98b0cd7c85bed2ed88ad869e6f2cd3fc68f62"
+  "gitHead": "0af9ddcc0516d455cd359ae4229c7121edf23060"
 }