@zendeskgarden/react-typography 9.0.0-next.25 → 9.0.0-next.27

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

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

package/dist/esm/styled/StyledCodeBlock.js

@@ -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,7 +24,7 @@ const colorStyles = _ref => {
 };
 const StyledCodeBlock = styled.pre.attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.25'
+  'data-garden-version': '9.0.0-next.27'
 }).withConfig({
   displayName: "StyledCodeBlock",
   componentId: "sc-5wky57-0"

package/dist/esm/styled/StyledCodeBlockContainer.js

@@ -10,7 +10,7 @@ import { focusStyles, retrieveComponentStyles } from '@zendeskgarden/react-themi
 const COMPONENT_ID = 'typography.codeblock_container';
 const StyledCodeBlockContainer = styled.div.attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.25'
+  'data-garden-version': '9.0.0-next.27'
 }).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.0.0-next.25',
+  'data-garden-version': '9.0.0-next.27',
   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.0.0-next.25'
+  'data-garden-version': '9.0.0-next.27'
 }).withConfig({
   displayName: "StyledCodeBlockToken",
   componentId: "sc-1hkshdq-0"

package/dist/esm/styled/StyledEllipsis.js

@@ -10,7 +10,7 @@ import { retrieveComponentStyles } from '@zendeskgarden/react-theming';
 const COMPONENT_ID = 'typography.ellipsis';
 const StyledEllipsis = styled.div.attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.25'
+  'data-garden-version': '9.0.0-next.27'
 }).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.0.0-next.25'
+  'data-garden-version': '9.0.0-next.27'
 }).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.0.0-next.25'
+  'data-garden-version': '9.0.0-next.27'
 }).withConfig({
   displayName: "StyledIcon",
   componentId: "sc-10rfb5b-0"

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

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.25'
+  'data-garden-version': '9.0.0-next.27'
 }).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.25'
+  'data-garden-version': '9.0.0-next.27'
 }).withConfig({
   displayName: "StyledBlockquote",
   componentId: "sc-1tt3ye0-0"
@@ -149,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.25',
+  'data-garden-version': '9.0.0-next.27',
   as: 'code',
   isMonospace: true
 }).withConfig({
@@ -169,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,
@@ -179,7 +180,7 @@ const colorStyles$2 = _ref => {
 };
 const StyledCodeBlock = styled__default.default.pre.attrs({
   'data-garden-id': COMPONENT_ID$6,
-  'data-garden-version': '9.0.0-next.25'
+  'data-garden-version': '9.0.0-next.27'
 }).withConfig({
   displayName: "StyledCodeBlock",
   componentId: "sc-5wky57-0"
@@ -188,7 +189,7 @@ const StyledCodeBlock = styled__default.default.pre.attrs({
 const COMPONENT_ID$5 = 'typography.codeblock_container';
 const StyledCodeBlockContainer = styled__default.default.div.attrs({
   'data-garden-id': COMPONENT_ID$5,
-  'data-garden-version': '9.0.0-next.25'
+  'data-garden-version': '9.0.0-next.27'
 }).withConfig({
   displayName: "StyledCodeBlockContainer",
   componentId: "sc-14zgbfw-0"
@@ -274,7 +275,7 @@ const lineNumberStyles = _ref2 => {
 };
 const StyledCodeBlockLine = styled__default.default(StyledFont).attrs({
   'data-garden-id': COMPONENT_ID$4,
-  'data-garden-version': '9.0.0-next.25',
+  'data-garden-version': '9.0.0-next.27',
   as: 'code',
   isMonospace: true
 }).withConfig({
@@ -445,7 +446,7 @@ const colorStyles = _ref => {
 };
 const StyledCodeBlockToken = styled__default.default.span.attrs({
   'data-garden-id': COMPONENT_ID$3,
-  'data-garden-version': '9.0.0-next.25'
+  'data-garden-version': '9.0.0-next.27'
 }).withConfig({
   displayName: "StyledCodeBlockToken",
   componentId: "sc-1hkshdq-0"
@@ -454,7 +455,7 @@ const StyledCodeBlockToken = styled__default.default.span.attrs({
 const COMPONENT_ID$2 = 'typography.ellipsis';
 const StyledEllipsis = styled__default.default.div.attrs({
   'data-garden-id': COMPONENT_ID$2,
-  'data-garden-version': '9.0.0-next.25'
+  'data-garden-version': '9.0.0-next.27'
 }).withConfig({
   displayName: "StyledEllipsis",
   componentId: "sc-1u4uqmy-0"
@@ -468,7 +469,7 @@ const sizeStyles = props => {
 };
 const StyledIcon = styled__default.default(reactTheming.StyledBaseIcon).attrs({
   'data-garden-id': COMPONENT_ID$1,
-  'data-garden-version': '9.0.0-next.25'
+  'data-garden-version': '9.0.0-next.27'
 }).withConfig({
   displayName: "StyledIcon",
   componentId: "sc-10rfb5b-0"
@@ -481,7 +482,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.0.0-next.25'
+  'data-garden-version': '9.0.0-next.27'
 }).withConfig({
   displayName: "StyledList__StyledOrderedList",
   componentId: "sc-jdbsfi-0"
@@ -489,7 +490,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.0.0-next.25'
+  'data-garden-version': '9.0.0-next.27'
 }).withConfig({
   displayName: "StyledList__StyledUnorderedList",
   componentId: "sc-jdbsfi-1"
@@ -506,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.25',
+  'data-garden-version': '9.0.0-next.27',
   as: 'li'
 }).withConfig({
   displayName: "StyledListItem__StyledOrderedListItem",
@@ -519,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.25',
+  'data-garden-version': '9.0.0-next.27',
   as: 'li'
 }).withConfig({
   displayName: "StyledListItem__StyledUnorderedListItem",
@@ -533,7 +534,7 @@ 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.25'
+  'data-garden-version': '9.0.0-next.27'
 }).withConfig({
   displayName: "StyledParagraph",
   componentId: "sc-zkuftz-0"
@@ -711,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') {
@@ -748,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.25",
+  "version": "9.0.0-next.27",
   "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.25"
+    "@zendeskgarden/react-theming": "^9.0.0-next.27"
   },
   "keywords": [
     "components",
@@ -46,5 +45,5 @@
     "access": "public"
   },
   "zendeskgarden:src": "src/index.ts",
-  "gitHead": "460751d630ab1c46e11810d60e4d7701b9d30b8f"
+  "gitHead": "1e33779f9a7a284af3eda1405fa624c00e739a6a"
 }