@zendeskgarden/react-typography 9.0.0-next.24 → 9.0.0-next.26

package/dist/esm/elements/CodeBlock.js

@@ -4,10 +4,10 @@
 * 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, { useRef, useMemo, useState, useCallback, useEffect } from 'react';
-import { Prism, Highlight } from 'prism-react-renderer';
+import React, { useRef, useMemo } from 'react';
+import Highlight, { Prism } from 'prism-react-renderer';
 import { useScrollRegion } from '@zendeskgarden/container-scrollregion';
-import { useWindow, ThemeProvider } from '@zendeskgarden/react-theming';
+import { ThemeProvider } from '@zendeskgarden/react-theming';
 import { LANGUAGES } from '../types/index.js';
 import '../styled/StyledBlockquote.js';
 import '../styled/StyledCode.js';
@@ -40,25 +40,6 @@ const CodeBlock = React.forwardRef((_ref, ref) => {
     containerRef,
     dependency
   });
-  const [isPrismImported, setIsPrismImported] = useState(false);
-  const win = useWindow();
-  const importPrism = useCallback(async () => {
-    if (win && !isPrismImported) {
-      win.Prism = Prism;
-      try {
-        await import('prismjs/components/prism-bash');
-        await import('prismjs/components/prism-diff');
-        await import('prismjs/components/prism-json');
-      } catch (error) {
-        console.error(error);
-      } finally {
-        setIsPrismImported(true);
-      }
-    }
-  }, [win, isPrismImported]);
-  useEffect(() => {
-    importPrism();
-  }, [importPrism]);
   const getDiff = line => {
     let retVal;
     if (language === 'diff') {
@@ -77,10 +58,11 @@ const CodeBlock = React.forwardRef((_ref, ref) => {
     }
     return retVal;
   };
-  return isPrismImported && React.createElement(StyledCodeBlockContainer, Object.assign({}, containerProps, {
+  return React.createElement(StyledCodeBlockContainer, Object.assign({}, containerProps, {
     ref: containerRef,
     tabIndex: containerTabIndex
   }), React.createElement(Highlight, {
+    Prism: Prism,
     code: code ? code.trim() : '',
     language: LANGUAGES.includes(language) ? language : 'tsx'
   }, _ref2 => {

package/dist/esm/styled/StyledBlockquote.js

@@ -5,13 +5,13 @@
 * found at http://www.apache.org/licenses/LICENSE-2.0.
 */
 import styled from 'styled-components';
-import { getColor, retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-theming';
+import { getColor, retrieveComponentStyles } from '@zendeskgarden/react-theming';
 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.0.0-next.24'
+  'data-garden-version': '9.0.0-next.26'
 }).withConfig({
   displayName: "StyledBlockquote",
   componentId: "sc-1tt3ye0-0"
@@ -19,8 +19,5 @@ const StyledBlockquote = styled.blockquote.attrs({
   theme: props.theme,
   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]], props => retrieveComponentStyles(COMPONENT_ID, props));
-StyledBlockquote.defaultProps = {
-  theme: DEFAULT_THEME
-};
 
 export { StyledBlockquote };

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.0.0-next.24',
+  'data-garden-version': '9.0.0-next.26',
   as: 'code',
   isMonospace: true
 }).withConfig({

package/dist/esm/styled/StyledCodeBlock.js

@@ -5,7 +5,7 @@
 * found at http://www.apache.org/licenses/LICENSE-2.0.
 */
 import styled, { css } from 'styled-components';
-import { retrieveComponentStyles, DEFAULT_THEME, getColor } from '@zendeskgarden/react-theming';
+import { retrieveComponentStyles, getColor } from '@zendeskgarden/react-theming';
 
 const COMPONENT_ID = 'typography.codeblock';
 const colorStyles = _ref => {
@@ -14,7 +14,7 @@ const colorStyles = _ref => {
   } = _ref;
   const backgroundColor = getColor({
     theme,
-    variable: theme.colors.base === 'light' ? 'background.subtle' : 'background.default'
+    variable: 'background.recessed'
   });
   const foregroundColor = getColor({
     theme,
@@ -24,13 +24,10 @@ const colorStyles = _ref => {
 };
 const StyledCodeBlock = styled.pre.attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.24'
+  'data-garden-version': '9.0.0-next.26'
 }).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, props => retrieveComponentStyles(COMPONENT_ID, props));
-StyledCodeBlock.defaultProps = {
-  theme: DEFAULT_THEME
-};
 
 export { StyledCodeBlock };

package/dist/esm/styled/StyledCodeBlockContainer.js

@@ -5,20 +5,17 @@
 * found at http://www.apache.org/licenses/LICENSE-2.0.
 */
 import styled from 'styled-components';
-import { focusStyles, retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-theming';
+import { focusStyles, retrieveComponentStyles } from '@zendeskgarden/react-theming';
 
 const COMPONENT_ID = 'typography.codeblock_container';
 const StyledCodeBlockContainer = styled.div.attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.24'
+  'data-garden-version': '9.0.0-next.26'
 }).withConfig({
   displayName: "StyledCodeBlockContainer",
   componentId: "sc-14zgbfw-0"
 })(["transition:box-shadow 0.1s ease-in-out;overflow:auto;", " ", ";"], props => focusStyles({
   theme: props.theme
 }), props => retrieveComponentStyles(COMPONENT_ID, props));
-StyledCodeBlockContainer.defaultProps = {
-  theme: DEFAULT_THEME
-};
 
 export { StyledCodeBlockContainer };

package/dist/esm/styled/StyledCodeBlockLine.js

@@ -5,7 +5,7 @@
 * found at http://www.apache.org/licenses/LICENSE-2.0.
 */
 import styled, { css } from 'styled-components';
-import { retrieveComponentStyles, DEFAULT_THEME, getColor } from '@zendeskgarden/react-theming';
+import { retrieveComponentStyles, getColor } from '@zendeskgarden/react-theming';
 import { StyledFont, THEME_SIZES } from './StyledFont.js';
 
 const COMPONENT_ID = 'typography.codeblock_code';
@@ -86,15 +86,12 @@ const lineNumberStyles = _ref2 => {
 };
 const StyledCodeBlockLine = styled(StyledFont).attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.24',
+  'data-garden-version': '9.0.0-next.26',
   as: 'code',
   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));
-StyledCodeBlockLine.defaultProps = {
-  theme: DEFAULT_THEME
-};
 
 export { StyledCodeBlockLine };

package/dist/esm/styled/StyledCodeBlockToken.js

@@ -5,7 +5,7 @@
 * found at http://www.apache.org/licenses/LICENSE-2.0.
 */
 import styled, { css } from 'styled-components';
-import { retrieveComponentStyles, DEFAULT_THEME, getColor } from '@zendeskgarden/react-theming';
+import { retrieveComponentStyles, getColor } from '@zendeskgarden/react-theming';
 import { StyledCodeBlock } from './StyledCodeBlock.js';
 
 const COMPONENT_ID = 'typography.codeblock_token';
@@ -171,13 +171,10 @@ const colorStyles = _ref => {
 };
 const StyledCodeBlockToken = styled.span.attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.24'
+  'data-garden-version': '9.0.0-next.26'
 }).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, props => retrieveComponentStyles(COMPONENT_ID, props));
-StyledCodeBlockToken.defaultProps = {
-  theme: DEFAULT_THEME
-};
 
 export { StyledCodeBlockToken };

package/dist/esm/styled/StyledEllipsis.js

@@ -5,18 +5,15 @@
 * found at http://www.apache.org/licenses/LICENSE-2.0.
 */
 import styled from 'styled-components';
-import { retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-theming';
+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.0.0-next.24'
+  'data-garden-version': '9.0.0-next.26'
 }).withConfig({
   displayName: "StyledEllipsis",
   componentId: "sc-1u4uqmy-0"
 })(["overflow:hidden;text-overflow:ellipsis;white-space:nowrap;direction:", ";", ";"], props => props.theme.rtl ? 'rtl' : 'ltr', props => retrieveComponentStyles(COMPONENT_ID, props));
-StyledEllipsis.defaultProps = {
-  theme: DEFAULT_THEME
-};
 
 export { StyledEllipsis };

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.0.0-next.24'
+  'data-garden-version': '9.0.0-next.26'
 }).withConfig({
   displayName: "StyledFont",
   componentId: "sc-1iildbo-0"

package/dist/esm/styled/StyledIcon.js

@@ -5,7 +5,7 @@
 * found at http://www.apache.org/licenses/LICENSE-2.0.
 */
 import styled, { css } from 'styled-components';
-import { StyledBaseIcon, retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-theming';
+import { StyledBaseIcon, retrieveComponentStyles } from '@zendeskgarden/react-theming';
 
 const COMPONENT_ID = 'typography.icon';
 const sizeStyles = props => {
@@ -15,13 +15,10 @@ const sizeStyles = props => {
 };
 const StyledIcon = styled(StyledBaseIcon).attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.24'
+  'data-garden-version': '9.0.0-next.26'
 }).withConfig({
   displayName: "StyledIcon",
   componentId: "sc-10rfb5b-0"
 })(["position:relative;top:-1px;vertical-align:middle;", ";", ";"], props => sizeStyles(props), props => retrieveComponentStyles(COMPONENT_ID, props));
-StyledIcon.defaultProps = {
-  theme: DEFAULT_THEME
-};
 
 export { StyledIcon };

package/dist/esm/styled/StyledList.js

@@ -5,7 +5,7 @@
 * found at http://www.apache.org/licenses/LICENSE-2.0.
 */
 import styled, { css } from 'styled-components';
-import { retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-theming';
+import { retrieveComponentStyles } from '@zendeskgarden/react-theming';
 
 const listStyles = props => {
   const rtl = props.theme.rtl;
@@ -14,24 +14,18 @@ const listStyles = props => {
 const ORDERED_ID = 'typography.ordered_list';
 const StyledOrderedList = styled.ol.attrs({
   'data-garden-id': ORDERED_ID,
-  'data-garden-version': '9.0.0-next.24'
+  'data-garden-version': '9.0.0-next.26'
 }).withConfig({
   displayName: "StyledList__StyledOrderedList",
   componentId: "sc-jdbsfi-0"
 })(["", ";", ";"], props => listStyles(props), props => retrieveComponentStyles(ORDERED_ID, props));
-StyledOrderedList.defaultProps = {
-  theme: DEFAULT_THEME
-};
 const UNORDERED_ID = 'typography.unordered_list';
 const StyledUnorderedList = styled.ul.attrs({
   'data-garden-id': UNORDERED_ID,
-  'data-garden-version': '9.0.0-next.24'
+  'data-garden-version': '9.0.0-next.26'
 }).withConfig({
   displayName: "StyledList__StyledUnorderedList",
   componentId: "sc-jdbsfi-1"
 })(["", ";", ";"], props => listStyles(props), props => retrieveComponentStyles(UNORDERED_ID, props));
-StyledUnorderedList.defaultProps = {
-  theme: DEFAULT_THEME
-};
 
 export { StyledOrderedList, StyledUnorderedList };

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.0.0-next.24',
+  'data-garden-version': '9.0.0-next.26',
   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.0.0-next.24',
+  'data-garden-version': '9.0.0-next.26',
   as: 'li'
 }).withConfig({
   displayName: "StyledListItem__StyledUnorderedListItem",

package/dist/esm/styled/StyledParagraph.js

@@ -5,19 +5,16 @@
 * found at http://www.apache.org/licenses/LICENSE-2.0.
 */
 import styled from 'styled-components';
-import { retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-theming';
+import { retrieveComponentStyles } from '@zendeskgarden/react-theming';
 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.0.0-next.24'
+  'data-garden-version': '9.0.0-next.26'
 }).withConfig({
   displayName: "StyledParagraph",
   componentId: "sc-zkuftz-0"
 })(["margin:0;padding:0;direction:", ";& + &,blockquote + &{margin-top:", ";}", ";"], props => props.theme.rtl ? 'rtl' : 'ltr', props => props.theme.lineHeights[THEME_SIZES[props.size]], props => retrieveComponentStyles(COMPONENT_ID, props));
-StyledParagraph.defaultProps = {
-  theme: DEFAULT_THEME
-};
 
 export { StyledParagraph };

package/dist/index.cjs.js

@@ -11,7 +11,7 @@ var PropTypes = require('prop-types');
 var styled = require('styled-components');
 var reactTheming = require('@zendeskgarden/react-theming');
 var polished = require('polished');
-var prismReactRenderer = require('prism-react-renderer');
+var Highlight = require('prism-react-renderer');
 var containerScrollregion = require('@zendeskgarden/container-scrollregion');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
@@ -19,6 +19,7 @@ function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 var React__default = /*#__PURE__*/_interopDefault(React);
 var PropTypes__default = /*#__PURE__*/_interopDefault(PropTypes);
 var styled__default = /*#__PURE__*/_interopDefault(styled);
+var Highlight__default = /*#__PURE__*/_interopDefault(Highlight);
 
 const HUE = ['grey', 'red', 'green', 'yellow'];
 const SIZE = ['small', 'medium', 'large'];
@@ -85,7 +86,7 @@ const fontStyles = _ref => {
 };
 const StyledFont = styled__default.default.div.attrs({
   'data-garden-id': COMPONENT_ID$9,
-  'data-garden-version': '9.0.0-next.24'
+  'data-garden-version': '9.0.0-next.26'
 }).withConfig({
   displayName: "StyledFont",
   componentId: "sc-1iildbo-0"
@@ -98,7 +99,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': '9.0.0-next.24'
+  'data-garden-version': '9.0.0-next.26'
 }).withConfig({
   displayName: "StyledBlockquote",
   componentId: "sc-1tt3ye0-0"
@@ -106,9 +107,6 @@ const StyledBlockquote = styled__default.default.blockquote.attrs({
   theme: props.theme,
   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]], props => reactTheming.retrieveComponentStyles(COMPONENT_ID$8, props));
-StyledBlockquote.defaultProps = {
-  theme: reactTheming.DEFAULT_THEME
-};
 
 const COMPONENT_ID$7 = 'typography.code';
 const colorStyles$3 = _ref => {
@@ -152,7 +150,7 @@ const colorStyles$3 = _ref => {
 };
 const StyledCode = styled__default.default(StyledFont).attrs({
   'data-garden-id': COMPONENT_ID$7,
-  'data-garden-version': '9.0.0-next.24',
+  'data-garden-version': '9.0.0-next.26',
   as: 'code',
   isMonospace: true
 }).withConfig({
@@ -172,7 +170,7 @@ const colorStyles$2 = _ref => {
   } = _ref;
   const backgroundColor = reactTheming.getColor({
     theme,
-    variable: theme.colors.base === 'light' ? 'background.subtle' : 'background.default'
+    variable: 'background.recessed'
   });
   const foregroundColor = reactTheming.getColor({
     theme,
@@ -182,28 +180,22 @@ const colorStyles$2 = _ref => {
 };
 const StyledCodeBlock = styled__default.default.pre.attrs({
   'data-garden-id': COMPONENT_ID$6,
-  'data-garden-version': '9.0.0-next.24'
+  'data-garden-version': '9.0.0-next.26'
 }).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, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$6, props));
-StyledCodeBlock.defaultProps = {
-  theme: reactTheming.DEFAULT_THEME
-};
 
 const COMPONENT_ID$5 = 'typography.codeblock_container';
 const StyledCodeBlockContainer = styled__default.default.div.attrs({
   'data-garden-id': COMPONENT_ID$5,
-  'data-garden-version': '9.0.0-next.24'
+  'data-garden-version': '9.0.0-next.26'
 }).withConfig({
   displayName: "StyledCodeBlockContainer",
   componentId: "sc-14zgbfw-0"
 })(["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
-};
 
 const COMPONENT_ID$4 = 'typography.codeblock_code';
 const colorStyles$1 = _ref => {
@@ -283,16 +275,13 @@ const lineNumberStyles = _ref2 => {
 };
 const StyledCodeBlockLine = styled__default.default(StyledFont).attrs({
   'data-garden-id': COMPONENT_ID$4,
-  'data-garden-version': '9.0.0-next.24',
+  'data-garden-version': '9.0.0-next.26',
   as: 'code',
   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));
-StyledCodeBlockLine.defaultProps = {
-  theme: reactTheming.DEFAULT_THEME
-};
 
 const COMPONENT_ID$3 = 'typography.codeblock_token';
 const colorStyles = _ref => {
@@ -457,26 +446,20 @@ const colorStyles = _ref => {
 };
 const StyledCodeBlockToken = styled__default.default.span.attrs({
   'data-garden-id': COMPONENT_ID$3,
-  'data-garden-version': '9.0.0-next.24'
+  'data-garden-version': '9.0.0-next.26'
 }).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, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$3, props));
-StyledCodeBlockToken.defaultProps = {
-  theme: reactTheming.DEFAULT_THEME
-};
 
 const COMPONENT_ID$2 = 'typography.ellipsis';
 const StyledEllipsis = styled__default.default.div.attrs({
   'data-garden-id': COMPONENT_ID$2,
-  'data-garden-version': '9.0.0-next.24'
+  'data-garden-version': '9.0.0-next.26'
 }).withConfig({
   displayName: "StyledEllipsis",
   componentId: "sc-1u4uqmy-0"
 })(["overflow:hidden;text-overflow:ellipsis;white-space:nowrap;direction:", ";", ";"], props => props.theme.rtl ? 'rtl' : 'ltr', props => reactTheming.retrieveComponentStyles(COMPONENT_ID$2, props));
-StyledEllipsis.defaultProps = {
-  theme: reactTheming.DEFAULT_THEME
-};
 
 const COMPONENT_ID$1 = 'typography.icon';
 const sizeStyles = props => {
@@ -486,14 +469,11 @@ const sizeStyles = props => {
 };
 const StyledIcon = styled__default.default(reactTheming.StyledBaseIcon).attrs({
   'data-garden-id': COMPONENT_ID$1,
-  'data-garden-version': '9.0.0-next.24'
+  'data-garden-version': '9.0.0-next.26'
 }).withConfig({
   displayName: "StyledIcon",
   componentId: "sc-10rfb5b-0"
 })(["position:relative;top:-1px;vertical-align:middle;", ";", ";"], props => sizeStyles(props), props => reactTheming.retrieveComponentStyles(COMPONENT_ID$1, props));
-StyledIcon.defaultProps = {
-  theme: reactTheming.DEFAULT_THEME
-};
 
 const listStyles = props => {
   const rtl = props.theme.rtl;
@@ -502,25 +482,19 @@ 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.0.0-next.24'
+  'data-garden-version': '9.0.0-next.26'
 }).withConfig({
   displayName: "StyledList__StyledOrderedList",
   componentId: "sc-jdbsfi-0"
 })(["", ";", ";"], props => listStyles(props), props => reactTheming.retrieveComponentStyles(ORDERED_ID$1, props));
-StyledOrderedList.defaultProps = {
-  theme: reactTheming.DEFAULT_THEME
-};
 const UNORDERED_ID$1 = 'typography.unordered_list';
 const StyledUnorderedList = styled__default.default.ul.attrs({
   'data-garden-id': UNORDERED_ID$1,
-  'data-garden-version': '9.0.0-next.24'
+  'data-garden-version': '9.0.0-next.26'
 }).withConfig({
   displayName: "StyledList__StyledUnorderedList",
   componentId: "sc-jdbsfi-1"
 })(["", ";", ";"], props => listStyles(props), props => reactTheming.retrieveComponentStyles(UNORDERED_ID$1, props));
-StyledUnorderedList.defaultProps = {
-  theme: reactTheming.DEFAULT_THEME
-};
 
 const listItemPaddingStyles = props => {
   const base = props.theme.space.base;
@@ -533,7 +507,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.0.0-next.24',
+  'data-garden-version': '9.0.0-next.26',
   as: 'li'
 }).withConfig({
   displayName: "StyledListItem__StyledOrderedListItem",
@@ -546,7 +520,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.0.0-next.24',
+  'data-garden-version': '9.0.0-next.26',
   as: 'li'
 }).withConfig({
   displayName: "StyledListItem__StyledUnorderedListItem",
@@ -560,14 +534,11 @@ StyledUnorderedListItem.defaultProps = {
 const COMPONENT_ID = 'typography.paragraph';
 const StyledParagraph = styled__default.default.p.attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.24'
+  'data-garden-version': '9.0.0-next.26'
 }).withConfig({
   displayName: "StyledParagraph",
   componentId: "sc-zkuftz-0"
 })(["margin:0;padding:0;direction:", ";& + &,blockquote + &{margin-top:", ";}", ";"], props => props.theme.rtl ? 'rtl' : 'ltr', props => props.theme.lineHeights[THEME_SIZES[props.size]], props => reactTheming.retrieveComponentStyles(COMPONENT_ID, props));
-StyledParagraph.defaultProps = {
-  theme: reactTheming.DEFAULT_THEME
-};
 
 const SM = React.forwardRef((_ref, ref) => {
   let {
@@ -741,25 +712,6 @@ const CodeBlock = React__default.default.forwardRef((_ref, ref) => {
     containerRef,
     dependency
   });
-  const [isPrismImported, setIsPrismImported] = React.useState(false);
-  const win = reactTheming.useWindow();
-  const importPrism = React.useCallback(async () => {
-    if (win && !isPrismImported) {
-      win.Prism = prismReactRenderer.Prism;
-      try {
-        await import('prismjs/components/prism-bash');
-        await import('prismjs/components/prism-diff');
-        await import('prismjs/components/prism-json');
-      } catch (error) {
-        console.error(error);
-      } finally {
-        setIsPrismImported(true);
-      }
-    }
-  }, [win, isPrismImported]);
-  React.useEffect(() => {
-    importPrism();
-  }, [importPrism]);
   const getDiff = line => {
     let retVal;
     if (language === 'diff') {
@@ -778,10 +730,11 @@ const CodeBlock = React__default.default.forwardRef((_ref, ref) => {
     }
     return retVal;
   };
-  return isPrismImported && React__default.default.createElement(StyledCodeBlockContainer, Object.assign({}, containerProps, {
+  return React__default.default.createElement(StyledCodeBlockContainer, Object.assign({}, containerProps, {
     ref: containerRef,
     tabIndex: containerTabIndex
-  }), React__default.default.createElement(prismReactRenderer.Highlight, {
+  }), React__default.default.createElement(Highlight__default.default, {
+    Prism: Highlight.Prism,
     code: code ? code.trim() : '',
     language: LANGUAGES.includes(language) ? language : 'tsx'
   }, _ref2 => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zendeskgarden/react-typography",
-  "version": "9.0.0-next.24",
+  "version": "9.0.0-next.26",
   "description": "Components relating to typography in the Garden Design System",
   "license": "Apache-2.0",
   "author": "Zendesk Garden <garden@zendesk.com>",
@@ -23,8 +23,7 @@
   "dependencies": {
     "@zendeskgarden/container-scrollregion": "^1.0.9",
     "polished": "^4.3.1",
-    "prism-react-renderer": "^2.3.1",
-    "prismjs": "^1.29.0",
+    "prism-react-renderer": "^1.3.5",
     "prop-types": "^15.5.7"
   },
   "peerDependencies": {
@@ -34,7 +33,7 @@
     "styled-components": "^5.3.1"
   },
   "devDependencies": {
-    "@zendeskgarden/react-theming": "^9.0.0-next.24"
+    "@zendeskgarden/react-theming": "^9.0.0-next.26"
   },
   "keywords": [
     "components",
@@ -46,5 +45,5 @@
     "access": "public"
   },
   "zendeskgarden:src": "src/index.ts",
-  "gitHead": "36ac3913276188edf8d187a9861be7ba765e487a"
+  "gitHead": "049dd7bd143029147de333f78bd879dc7d7251f2"
 }