@zendeskgarden/react-typography 9.0.0-next.2 → 9.0.0-next.20

package/dist/index.cjs.js

@@ -1,10 +1,9 @@
 /**
- * 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.
- */
-
+* 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.
+*/
 'use strict';
 
 var React = require('react');
@@ -12,7 +11,7 @@ var PropTypes = require('prop-types');
 var styled = require('styled-components');
 var reactTheming = require('@zendeskgarden/react-theming');
 var polished = require('polished');
-var Highlight = require('prism-react-renderer');
+var prismReactRenderer = require('prism-react-renderer');
 var containerScrollregion = require('@zendeskgarden/container-scrollregion');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
@@ -20,29 +19,13 @@ 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);
-
-function _extends() {
-  _extends = Object.assign ? Object.assign.bind() : function (target) {
-    for (var i = 1; i < arguments.length; i++) {
-      var source = arguments[i];
-      for (var key in source) {
-        if (Object.prototype.hasOwnProperty.call(source, key)) {
-          target[key] = source[key];
-        }
-      }
-    }
-    return target;
-  };
-  return _extends.apply(this, arguments);
-}
 
 const HUE = ['grey', 'red', 'green', 'yellow'];
 const SIZE = ['small', 'medium', 'large'];
 const INHERIT_SIZE = ['inherit', ...SIZE];
 const TYPE_ORDERED_LIST = ['decimal', 'decimal-leading-zero', 'lower-alpha', 'lower-roman', 'upper-alpha', 'upper-roman'];
 const TYPE_UNORDERED_LIST = ['circle', 'disc', 'square'];
-const LANGUAGES = ['markup', 'bash', 'clike', 'c', 'cpp', 'css', 'javascript', 'jsx', 'coffeescript', 'actionscript', 'css-extr', 'diff', 'git', 'go', 'graphql', 'handlebars', 'json', 'less', 'makefile', 'markdown', 'objectivec', 'ocaml', 'python', 'reason', 'sass', 'scss', 'sql', 'stylus', 'tsx', 'typescript', 'wasm', 'yaml'];
+const LANGUAGES = ['bash', 'css', 'diff', 'graphql', 'javascript', 'json', 'jsx', 'markdown', 'markup', 'python', 'typescript', 'tsx', 'yaml'];
 
 const COMPONENT_ID$9 = 'typography.font';
 [...SIZE, 'extralarge', '2xlarge', '3xlarge'];
@@ -54,42 +37,51 @@ const THEME_SIZES = {
   '2xlarge': 'xxl',
   '3xlarge': 'xxxl'
 };
-const fontStyles = props => {
-  const monospace = props.isMonospace && ['inherit', 'small', 'medium', 'large'].indexOf(props.size) !== -1;
-  const fontFamily = monospace && props.theme.fonts.mono;
-  const direction = props.theme.rtl ? 'rtl' : 'ltr';
+const fontStyles = _ref => {
+  let {
+    hue,
+    isBold,
+    isMonospace,
+    size,
+    theme
+  } = _ref;
+  const monospace = isMonospace && ['inherit', 'small', 'medium', 'large'].indexOf(size) !== -1;
+  const fontFamily = monospace && theme.fonts.mono;
+  const direction = theme.rtl ? 'rtl' : 'ltr';
   let fontSize;
   let fontWeight;
   let lineHeight;
   let color;
   if (monospace) {
-    if (props.size === 'inherit') {
+    if (size === 'inherit') {
       fontSize = 'calc(1em - 1px)';
       lineHeight = 'normal';
     } else {
-      const themeSize = THEME_SIZES[props.size];
-      fontSize = polished.math(`${props.theme.fontSizes[themeSize]} - 1px`);
-      lineHeight = polished.math(`${props.theme.lineHeights[themeSize]} - 1px`);
+      const themeSize = THEME_SIZES[size];
+      fontSize = polished.math(`${theme.fontSizes[themeSize]} - 1px`);
+      lineHeight = polished.math(`${theme.lineHeights[themeSize]} - 1px`);
     }
-  } else if (props.size !== 'inherit') {
-    const themeSize = THEME_SIZES[props.size];
-    fontSize = props.theme.fontSizes[themeSize];
-    lineHeight = props.theme.lineHeights[themeSize];
+  } else if (size !== 'inherit') {
+    const themeSize = THEME_SIZES[size];
+    fontSize = theme.fontSizes[themeSize];
+    lineHeight = theme.lineHeights[themeSize];
   }
-  if (props.isBold === true) {
-    fontWeight = props.theme.fontWeights.semibold;
-  } else if (props.isBold === false || props.size !== 'inherit') {
-    fontWeight = props.theme.fontWeights.regular;
+  if (isBold === true) {
+    fontWeight = theme.fontWeights.semibold;
+  } else if (isBold === false || size !== 'inherit') {
+    fontWeight = theme.fontWeights.regular;
   }
-  if (props.hue) {
-    const shade = props.hue === 'yellow' ? 700 : 600;
-    color = reactTheming.getColor(props.hue, shade, props.theme);
+  if (hue) {
+    color = reactTheming.getColor({
+      hue,
+      theme
+    });
   }
   return styled.css(["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.0.0-next.2'
+  'data-garden-version': '9.0.0-next.20'
 }).withConfig({
   displayName: "StyledFont",
   componentId: "sc-1iildbo-0"
@@ -102,51 +94,95 @@ 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.2'
+  'data-garden-version': '9.0.0-next.20'
 }).withConfig({
   displayName: "StyledBlockquote",
   componentId: "sc-1tt3ye0-0"
-})(["margin:0;border-", ":", " solid;border-color:", ";padding:0;padding-", ":", "px;direction:", ";& + &,p + &{margin-top:", ";}", ";"], props => props.theme.rtl ? 'right' : 'left', props => props.theme.shadowWidths.sm, props => reactTheming.getColor('neutralHue', 400, props.theme), 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));
+})(["margin:0;border-", ":", " solid;border-color:", ";padding:0;padding-", ":", "px;direction:", ";& + &,p + &{margin-top:", ";}", ";"], props => props.theme.rtl ? 'right' : 'left', props => props.theme.shadowWidths.sm, props => reactTheming.getColor({
+  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 = props => {
-  const hue = props.hue || 'neutralHue';
-  const backgroundColor = reactTheming.getColor(hue, 200, props.theme);
-  const shade = hue === 'yellow' ? 800 : 700;
-  const foregroundColor = reactTheming.getColor(hue, shade, props.theme);
+const colorStyles$3 = _ref => {
+  let {
+    hue,
+    theme
+  } = _ref;
+  const bgColorArgs = {
+    theme,
+    light: {
+      offset: 100
+    },
+    dark: {
+      offset: -100
+    }
+  };
+  const fgColorArgs = {
+    theme
+  };
+  switch (hue) {
+    case 'green':
+      bgColorArgs.variable = 'background.success';
+      fgColorArgs.variable = 'foreground.successEmphasis';
+      break;
+    case 'red':
+      bgColorArgs.variable = 'background.danger';
+      fgColorArgs.variable = 'foreground.dangerEmphasis';
+      break;
+    case 'yellow':
+      bgColorArgs.variable = 'background.warning';
+      fgColorArgs.variable = 'foreground.warningEmphasis';
+      break;
+    default:
+      fgColorArgs.variable = 'foreground.default';
+      bgColorArgs.variable = 'background.subtle';
+      break;
+  }
+  const backgroundColor = reactTheming.getColor(bgColorArgs);
+  const foregroundColor = reactTheming.getColor(fgColorArgs);
   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.0.0-next.2',
-  as: 'code'
+  'data-garden-version': '9.0.0-next.20',
+  as: 'code',
+  isMonospace: true
 }).withConfig({
   displayName: "StyledCode",
   componentId: "sc-l8yvmf-0"
 })(["border-radius:", ";padding:1.5px;", ";", ";"], props => props.theme.borderRadii.sm, props => colorStyles$3(props), props => reactTheming.retrieveComponentStyles(COMPONENT_ID$7, props));
 StyledCode.defaultProps = {
   theme: reactTheming.DEFAULT_THEME,
-  isMonospace: true,
-  hue: 'neutralHue',
+  hue: 'grey',
   size: 'inherit'
 };
 
 const COMPONENT_ID$6 = 'typography.codeblock';
-const colorStyles$2 = props => {
-  const backgroundColor = reactTheming.getColor('neutralHue', props.isLight ? 100 : 1000, props.theme);
-  const foregroundColor = props.isLight ? props.theme.colors.foreground : reactTheming.getColor('neutralHue', 300, props.theme);
+const colorStyles$2 = _ref => {
+  let {
+    theme
+  } = _ref;
+  const backgroundColor = reactTheming.getColor({
+    theme,
+    variable: theme.colors.base === 'light' ? 'background.subtle' : 'background.default'
+  });
+  const foregroundColor = reactTheming.getColor({
+    theme,
+    variable: 'foreground.default'
+  });
   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.0.0-next.2'
+  'data-garden-version': '9.0.0-next.20'
 }).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, props => colorStyles$2(props), props => reactTheming.retrieveComponentStyles(COMPONENT_ID$6, props));
+})(["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
 };
@@ -154,7 +190,7 @@ 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': '9.0.0-next.2'
+  'data-garden-version': '9.0.0-next.20'
 }).withConfig({
   displayName: "StyledCodeBlockContainer",
   componentId: "sc-14zgbfw-0"
@@ -166,42 +202,68 @@ StyledCodeBlockContainer.defaultProps = {
 };
 
 const COMPONENT_ID$4 = 'typography.codeblock_code';
-const colorStyles$1 = props => {
+const colorStyles$1 = _ref => {
+  let {
+    theme,
+    diff,
+    isHighlighted
+  } = _ref;
   let backgroundColor;
-  if (props.diff) {
-    let hue;
-    switch (props.diff) {
-      case 'hunk':
-        hue = 'royal';
-        break;
-      case 'add':
-        hue = 'lime';
-        break;
-      case 'delete':
-        hue = 'crimson';
-        break;
-      case 'change':
-        hue = 'lemon';
-        break;
-    }
-    backgroundColor = reactTheming.getColor(hue, 400, props.theme, 0.2);
-  } else if (props.isHighlighted) {
-    const hue = props.isLight ? props.theme.palette.black : props.theme.palette.white;
-    backgroundColor = reactTheming.getColor(hue, 600, props.theme, 0.1);
+  if (diff) {
+    const hues = {
+      hunk: 'royal',
+      add: 'lime',
+      delete: 'crimson',
+      change: 'lemon'
+    };
+    backgroundColor = reactTheming.getColor({
+      theme,
+      hue: hues[diff],
+      dark: {
+        shade: 600
+      },
+      light: {
+        shade: 400
+      },
+      transparency: theme.opacity[300]
+    });
+  } else if (isHighlighted) {
+    backgroundColor = reactTheming.getColor({
+      theme,
+      dark: {
+        hue: 'white'
+      },
+      light: {
+        hue: 'neutralHue',
+        shade: 700
+      },
+      transparency: theme.opacity[100]
+    });
   }
   return styled.css(["background-color:", ";"], backgroundColor);
 };
-const lineNumberStyles = props => {
-  const color = reactTheming.getColor('neutralHue', props.isLight ? 600 : 500, props.theme);
+const lineNumberStyles = _ref2 => {
+  let {
+    theme,
+    language,
+    size
+  } = _ref2;
+  const color = reactTheming.getColor({
+    theme,
+    variable: 'foreground.subtle',
+    light: {
+      offset: -100
+    }
+  });
   let padding;
-  if (props.language && props.language === 'diff') {
+  if (language && language === 'diff') {
     padding = 0;
-  } else if (props.size === 'small') {
-    padding = props.theme.space.base * 4;
-  } else if (props.size === 'large') {
-    padding = props.theme.space.base * 7;
+  } else if (size === 'small') {
+    padding = theme.space.base * 4;
+  } else if (size === 'large') {
+    padding = theme.space.base * 7;
   } else {
-    padding = props.theme.space.base * 6;
+    padding = theme.space.base * 6;
   }
   return `
     &::before {
@@ -217,46 +279,185 @@ const lineNumberStyles = props => {
 };
 const StyledCodeBlockLine = styled__default.default(StyledFont).attrs({
   'data-garden-id': COMPONENT_ID$4,
-  'data-garden-version': '9.0.0-next.2',
+  'data-garden-version': '9.0.0-next.20',
   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]], props => colorStyles$1(props), props => props.isNumbered && lineNumberStyles(props), props => props.theme.space.base * 3, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$4, props));
+})(["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 = props => {
-  const palette = props.theme.palette;
+const colorStyles = _ref => {
+  let {
+    theme
+  } = _ref;
   const colors = {
-    boolean: props.isLight ? palette.royal[600] : palette.azure[400],
-    builtin: palette.teal[400],
-    comment: props.isLight ? palette.lime[600] : palette.mint[400],
-    constant: props.isLight ? palette.azure[400] : palette.blue[500],
-    coord: props.isLight ? palette.purple[600] : palette.blue[200],
-    deleted: props.isLight ? palette.red[700] : palette.red[200],
-    diff: props.isLight ? palette.yellow[800] : palette.yellow[200],
-    function: props.isLight ? palette.orange['M600'] : palette.yellow[300],
-    inserted: props.isLight ? palette.green[700] : palette.green[200],
-    keyword: palette.fuschia['M400'],
-    name: props.isLight ? palette.crimson[400] : palette.blue[300],
-    number: props.isLight ? palette.green[600] : palette.green[300],
-    punctuation: props.isLight ? palette.red[800] : palette.grey[600],
-    regex: palette.red[400],
-    value: props.isLight ? palette.red[700] : palette.crimson['M400']
+    boolean: reactTheming.getColor({
+      theme,
+      dark: {
+        hue: 'azure',
+        shade: 600
+      },
+      light: {
+        hue: 'royal',
+        shade: 700
+      }
+    }),
+    builtin: reactTheming.getColor({
+      theme,
+      hue: 'teal',
+      dark: {
+        shade: 600
+      },
+      light: {
+        shade: 700
+      }
+    }),
+    comment: reactTheming.getColor({
+      theme,
+      dark: {
+        hue: 'mint',
+        shade: 600
+      },
+      light: {
+        hue: 'lime',
+        shade: 700
+      }
+    }),
+    constant: reactTheming.getColor({
+      theme,
+      dark: {
+        hue: 'blue',
+        shade: 600
+      },
+      light: {
+        hue: 'azure',
+        shade: 700
+      }
+    }),
+    coord: reactTheming.getColor({
+      theme,
+      hue: 'blue',
+      dark: {
+        shade: 200
+      },
+      light: {
+        shade: 800
+      }
+    }),
+    deleted: reactTheming.getColor({
+      theme,
+      hue: 'red',
+      dark: {
+        shade: 200
+      },
+      light: {
+        shade: 800
+      }
+    }),
+    diff: reactTheming.getColor({
+      theme,
+      hue: 'yellow',
+      dark: {
+        shade: 200
+      },
+      light: {
+        shade: 800
+      }
+    }),
+    function: reactTheming.getColor({
+      theme,
+      dark: {
+        hue: 'yellow',
+        shade: 300
+      },
+      light: {
+        hue: 'orange',
+        shade: 700
+      }
+    }),
+    inserted: reactTheming.getColor({
+      theme,
+      hue: 'green',
+      dark: {
+        shade: 200
+      },
+      light: {
+        shade: 800
+      }
+    }),
+    keyword: reactTheming.getColor({
+      theme,
+      hue: 'fuschia',
+      dark: {
+        shade: 600
+      },
+      light: {
+        shade: 700
+      }
+    }),
+    name: reactTheming.getColor({
+      theme,
+      dark: {
+        hue: 'blue',
+        shade: 400
+      },
+      light: {
+        hue: 'crimson',
+        shade: 700
+      }
+    }),
+    number: reactTheming.getColor({
+      theme,
+      hue: 'green',
+      dark: {
+        shade: 400
+      },
+      light: {
+        shade: 700
+      }
+    }),
+    punctuation: reactTheming.getColor({
+      theme,
+      dark: {
+        hue: 'grey',
+        shade: 700
+      },
+      light: {
+        hue: 'red',
+        shade: 900
+      }
+    }),
+    regex: reactTheming.getColor({
+      theme,
+      hue: 'red',
+      shade: 600
+    }),
+    value: reactTheming.getColor({
+      theme,
+      dark: {
+        hue: 'crimson',
+        shade: 600
+      },
+      light: {
+        hue: 'red',
+        shade: 800
+      }
+    })
   };
   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.0.0-next.2'
+  'data-garden-version': '9.0.0-next.20'
 }).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, props => colorStyles(props), props => reactTheming.retrieveComponentStyles(COMPONENT_ID$3, props));
+})(["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
 };
@@ -264,7 +465,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': '9.0.0-next.2'
+  'data-garden-version': '9.0.0-next.20'
 }).withConfig({
   displayName: "StyledEllipsis",
   componentId: "sc-1u4uqmy-0"
@@ -275,20 +476,13 @@ StyledEllipsis.defaultProps = {
 
 const COMPONENT_ID$1 = 'typography.icon';
 const sizeStyles = props => {
-  const margin = props.isStart && `${props.theme.space.base * 2}px`;
+  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(_ref => {
-  let {
-    children,
-    isStart,
-    ...props
-  } = _ref;
-  return React__default.default.cloneElement(React.Children.only(children), props);
-}).attrs({
+const StyledIcon = styled__default.default(reactTheming.StyledBaseIcon).attrs({
   'data-garden-id': COMPONENT_ID$1,
-  'data-garden-version': '9.0.0-next.2'
+  'data-garden-version': '9.0.0-next.20'
 }).withConfig({
   displayName: "StyledIcon",
   componentId: "sc-10rfb5b-0"
@@ -304,7 +498,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.2'
+  'data-garden-version': '9.0.0-next.20'
 }).withConfig({
   displayName: "StyledList__StyledOrderedList",
   componentId: "sc-jdbsfi-0"
@@ -315,7 +509,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': '9.0.0-next.2'
+  'data-garden-version': '9.0.0-next.20'
 }).withConfig({
   displayName: "StyledList__StyledUnorderedList",
   componentId: "sc-jdbsfi-1"
@@ -335,7 +529,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.2',
+  'data-garden-version': '9.0.0-next.20',
   as: 'li'
 }).withConfig({
   displayName: "StyledListItem__StyledOrderedListItem",
@@ -348,7 +542,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.2',
+  'data-garden-version': '9.0.0-next.20',
   as: 'li'
 }).withConfig({
   displayName: "StyledListItem__StyledUnorderedListItem",
@@ -362,7 +556,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.2'
+  'data-garden-version': '9.0.0-next.20'
 }).withConfig({
   displayName: "StyledParagraph",
   componentId: "sc-zkuftz-0"
@@ -376,7 +570,7 @@ const SM = React.forwardRef((_ref, ref) => {
     tag,
     ...other
   } = _ref;
-  return React__default.default.createElement(StyledFont, _extends({
+  return React__default.default.createElement(StyledFont, Object.assign({
     as: tag,
     ref: ref,
     size: "small"
@@ -397,7 +591,7 @@ const MD = React.forwardRef((_ref, ref) => {
     tag,
     ...other
   } = _ref;
-  return React__default.default.createElement(StyledFont, _extends({
+  return React__default.default.createElement(StyledFont, Object.assign({
     as: tag,
     ref: ref,
     size: "medium"
@@ -418,7 +612,7 @@ const LG = React.forwardRef((_ref, ref) => {
     tag,
     ...other
   } = _ref;
-  return React__default.default.createElement(StyledFont, _extends({
+  return React__default.default.createElement(StyledFont, Object.assign({
     as: tag,
     ref: ref,
     size: "large"
@@ -439,7 +633,7 @@ const XL = React.forwardRef((_ref, ref) => {
     tag,
     ...other
   } = _ref;
-  return React__default.default.createElement(StyledFont, _extends({
+  return React__default.default.createElement(StyledFont, Object.assign({
     as: tag,
     ref: ref,
     size: "extralarge"
@@ -459,7 +653,7 @@ const XXL = React.forwardRef((_ref, ref) => {
     tag,
     ...other
   } = _ref;
-  return React__default.default.createElement(StyledFont, _extends({
+  return React__default.default.createElement(StyledFont, Object.assign({
     as: tag,
     ref: ref,
     size: "2xlarge"
@@ -479,7 +673,7 @@ const XXXL = React.forwardRef((_ref, ref) => {
     tag,
     ...other
   } = _ref;
-  return React__default.default.createElement(StyledFont, _extends({
+  return React__default.default.createElement(StyledFont, Object.assign({
     as: tag,
     ref: ref,
     size: "3xlarge"
@@ -494,7 +688,7 @@ XXXL.defaultProps = {
   tag: 'div'
 };
 
-const Blockquote = React.forwardRef((props, ref) => React__default.default.createElement(StyledBlockquote, _extends({
+const Blockquote = React.forwardRef((props, ref) => React__default.default.createElement(StyledBlockquote, Object.assign({
   ref: ref
 }, props)));
 Blockquote.displayName = 'Blockquote';
@@ -510,7 +704,7 @@ const Code = React.forwardRef((_ref, ref) => {
     hue,
     ...other
   } = _ref;
-  return React__default.default.createElement(StyledCode, _extends({
+  return React__default.default.createElement(StyledCode, Object.assign({
     ref: ref,
     hue: hue
   }, other));
@@ -532,8 +726,8 @@ const CodeBlock = React__default.default.forwardRef((_ref, ref) => {
     highlightLines,
     isLight,
     isNumbered,
-    language,
-    size,
+    language = 'tsx',
+    size = 'medium',
     ...other
   } = _ref;
   const containerRef = React.useRef(null);
@@ -543,6 +737,25 @@ 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') {
@@ -561,11 +774,10 @@ const CodeBlock = React__default.default.forwardRef((_ref, ref) => {
     }
     return retVal;
   };
-  return React__default.default.createElement(StyledCodeBlockContainer, _extends({}, containerProps, {
+  return isPrismImported && React__default.default.createElement(StyledCodeBlockContainer, Object.assign({}, containerProps, {
     ref: containerRef,
     tabIndex: containerTabIndex
-  }), React__default.default.createElement(Highlight__default.default, {
-    Prism: Highlight.Prism,
+  }), React__default.default.createElement(prismReactRenderer.Highlight, {
     code: code ? code.trim() : '',
     language: LANGUAGES.includes(language) ? language : 'tsx'
   }, _ref2 => {
@@ -575,33 +787,36 @@ const CodeBlock = React__default.default.forwardRef((_ref, ref) => {
       getLineProps,
       getTokenProps
     } = _ref2;
-    return React__default.default.createElement(StyledCodeBlock, _extends({
+    return React__default.default.createElement(reactTheming.ThemeProvider, {
+      theme: parentTheme => ({
+        ...parentTheme,
+        colors: {
+          ...parentTheme.colors,
+          base: isLight ? 'light' : 'dark'
+        }
+      })
+    }, React__default.default.createElement(StyledCodeBlock, Object.assign({
       className: className,
-      ref: ref,
-      isLight: isLight
-    }, other), tokens.map((line, index) => React__default.default.createElement(StyledCodeBlockLine, _extends({}, getLineProps({
+      ref: ref
+    }, other), tokens.map((line, index) => React__default.default.createElement(StyledCodeBlockLine, Object.assign({}, getLineProps({
       line
     }), {
       key: index,
       language: language,
       isHighlighted: highlightLines && highlightLines.includes(index + 1),
-      isLight: isLight,
       isNumbered: isNumbered,
       diff: getDiff(line),
-      size: size
-    }), line.map((token, tokenKey) => React__default.default.createElement(StyledCodeBlockToken, _extends({}, getTokenProps({
+      size: size,
+      style: undefined
+    }), line.map((token, tokenKey) => React__default.default.createElement(StyledCodeBlockToken, Object.assign({}, getTokenProps({
       token
     }), {
       key: tokenKey,
-      isLight: isLight
-    }), token.empty ? '\n' : token.content)))));
+      style: undefined
+    }), token.empty ? '\n' : token.content))))));
   }));
 });
 CodeBlock.displayName = 'CodeBlock';
-CodeBlock.defaultProps = {
-  language: 'tsx',
-  size: 'medium'
-};
 
 const Ellipsis = React.forwardRef((_ref, ref) => {
   let {
@@ -616,7 +831,7 @@ const Ellipsis = React.forwardRef((_ref, ref) => {
   } else if (typeof children === 'string') {
     textContent = children;
   }
-  return React__default.default.createElement(StyledEllipsis, _extends({
+  return React__default.default.createElement(StyledEllipsis, Object.assign({
     as: tag,
     ref: ref,
     title: textContent
@@ -631,7 +846,7 @@ Ellipsis.defaultProps = {
   tag: 'div'
 };
 
-const Paragraph = React.forwardRef((props, ref) => React__default.default.createElement(StyledParagraph, _extends({
+const Paragraph = React.forwardRef((props, ref) => React__default.default.createElement(StyledParagraph, Object.assign({
   ref: ref
 }, props)));
 Paragraph.displayName = 'Paragraph';
@@ -655,7 +870,7 @@ const OrderedListItem = React.forwardRef((props, ref) => {
   const {
     size
   } = useOrderedListContext();
-  return React__default.default.createElement(StyledOrderedListItem, _extends({
+  return React__default.default.createElement(StyledOrderedListItem, Object.assign({
     ref: ref,
     space: size
   }, props));
@@ -674,7 +889,7 @@ const OrderedListComponent = React__default.default.forwardRef((_ref, ref) => {
   }), [size]);
   return React__default.default.createElement(OrderedListContext.Provider, {
     value: value
-  }, React__default.default.createElement(StyledOrderedList, _extends({
+  }, React__default.default.createElement(StyledOrderedList, Object.assign({
     ref: ref,
     listType: type
   }, other)));
@@ -704,7 +919,7 @@ const UnorderedListItem = React.forwardRef((props, ref) => {
   const {
     size
   } = useUnorderedListContext();
-  return React__default.default.createElement(StyledUnorderedListItem, _extends({
+  return React__default.default.createElement(StyledUnorderedListItem, Object.assign({
     ref: ref,
     space: size
   }, props));
@@ -723,7 +938,7 @@ const UnorderedListComponent = React.forwardRef((_ref, ref) => {
   }), [size]);
   return React__default.default.createElement(UnorderedListContext.Provider, {
     value: value
-  }, React__default.default.createElement(StyledUnorderedList, _extends({
+  }, React__default.default.createElement(StyledUnorderedList, Object.assign({
     ref: ref,
     listType: type
   }, other)));
@@ -740,8 +955,8 @@ UnorderedListComponent.defaultProps = {
 const UnorderedList = UnorderedListComponent;
 UnorderedList.Item = Item;
 
-const StartIconComponent = props => React__default.default.createElement(StyledIcon, _extends({
-  isStart: true
+const StartIconComponent = props => React__default.default.createElement(StyledIcon, Object.assign({
+  $isStart: true
 }, props));
 StartIconComponent.displayName = 'Span.StartIcon';
 const StartIcon = StartIconComponent;
@@ -755,7 +970,7 @@ const SpanComponent = React.forwardRef((_ref, ref) => {
     tag,
     ...other
   } = _ref;
-  return React__default.default.createElement(StyledFont, _extends({
+  return React__default.default.createElement(StyledFont, Object.assign({
     as: tag,
     ref: ref,
     size: "inherit"