@zendeskgarden/react-typography 9.0.0-next.6 → 9.0.0-next.8

package/dist/index.esm.js

@@ -1,769 +0,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.
- */
-
-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, getColorV8, focusStyles, getLineHeight } from '@zendeskgarden/react-theming';
-import { hideVisually, math } from 'polished';
-import Highlight, { Prism } from 'prism-react-renderer';
-import { useScrollRegion } from '@zendeskgarden/container-scrollregion';
-
-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 COMPONENT_ID$9 = 'typography.font';
-[...SIZE, 'extralarge', '2xlarge', '3xlarge'];
-const THEME_SIZES = {
-  small: 'sm',
-  medium: 'md',
-  large: 'lg',
-  extralarge: 'xl',
-  '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';
-  let fontSize;
-  let fontWeight;
-  let lineHeight;
-  let color;
-  if (monospace) {
-    if (props.size === 'inherit') {
-      fontSize = 'calc(1em - 1px)';
-      lineHeight = 'normal';
-    } else {
-      const themeSize = THEME_SIZES[props.size];
-      fontSize = math(`${props.theme.fontSizes[themeSize]} - 1px`);
-      lineHeight = math(`${props.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];
-  }
-  if (props.isBold === true) {
-    fontWeight = props.theme.fontWeights.semibold;
-  } else if (props.isBold === false || props.size !== 'inherit') {
-    fontWeight = props.theme.fontWeights.regular;
-  }
-  if (props.hue) {
-    const shade = props.hue === 'yellow' ? 700 : 600;
-    color = getColorV8(props.hue, shade, props.theme);
-  }
-  return css(["line-height:", ";color:", ";font-family:", ";font-size:", ";font-weight:", ";direction:", ";"], lineHeight, color, fontFamily, fontSize, fontWeight, direction);
-};
-const StyledFont = styled.div.attrs({
-  'data-garden-id': COMPONENT_ID$9,
-  'data-garden-version': '9.0.0-next.6'
-}).withConfig({
-  displayName: "StyledFont",
-  componentId: "sc-1iildbo-0"
-})(["", ";&[hidden]{display:inline;", ";}", ";"], props => !props.hidden && fontStyles(props), hideVisually(), props => retrieveComponentStyles(COMPONENT_ID$9, props));
-StyledFont.defaultProps = {
-  theme: DEFAULT_THEME,
-  size: 'inherit'
-};
-
-const COMPONENT_ID$8 = 'typography.blockquote';
-const StyledBlockquote = styled.blockquote.attrs({
-  'data-garden-id': COMPONENT_ID$8,
-  'data-garden-version': '9.0.0-next.6'
-}).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 => getColorV8('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 => retrieveComponentStyles(COMPONENT_ID$8, props));
-StyledBlockquote.defaultProps = {
-  theme: DEFAULT_THEME
-};
-
-const COMPONENT_ID$7 = 'typography.code';
-const colorStyles$3 = props => {
-  const hue = props.hue || 'neutralHue';
-  const backgroundColor = getColorV8(hue, 200, props.theme);
-  const shade = hue === 'yellow' ? 800 : 700;
-  const foregroundColor = getColorV8(hue, shade, props.theme);
-  return css(["background-color:", ";color:", ";a &{color:inherit;}"], backgroundColor, foregroundColor);
-};
-const StyledCode = styled(StyledFont).attrs({
-  'data-garden-id': COMPONENT_ID$7,
-  'data-garden-version': '9.0.0-next.6',
-  as: 'code'
-}).withConfig({
-  displayName: "StyledCode",
-  componentId: "sc-l8yvmf-0"
-})(["border-radius:", ";padding:1.5px;", ";", ";"], props => props.theme.borderRadii.sm, props => colorStyles$3(props), props => retrieveComponentStyles(COMPONENT_ID$7, props));
-StyledCode.defaultProps = {
-  theme: DEFAULT_THEME,
-  isMonospace: true,
-  hue: 'neutralHue',
-  size: 'inherit'
-};
-
-const COMPONENT_ID$6 = 'typography.codeblock';
-const colorStyles$2 = props => {
-  const backgroundColor = getColorV8('neutralHue', props.isLight ? 100 : 1000, props.theme);
-  const foregroundColor = props.isLight ? getColorV8('foreground', 600 , props.theme) : getColorV8('neutralHue', 300, props.theme);
-  return css(["background-color:", ";color:", ";"], backgroundColor, foregroundColor);
-};
-const StyledCodeBlock = styled.pre.attrs({
-  'data-garden-id': COMPONENT_ID$6,
-  'data-garden-version': '9.0.0-next.6'
-}).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 => retrieveComponentStyles(COMPONENT_ID$6, props));
-StyledCodeBlock.defaultProps = {
-  theme: DEFAULT_THEME
-};
-
-const COMPONENT_ID$5 = 'typography.codeblock_container';
-const StyledCodeBlockContainer = styled.div.attrs({
-  'data-garden-id': COMPONENT_ID$5,
-  'data-garden-version': '9.0.0-next.6'
-}).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$5, props));
-StyledCodeBlockContainer.defaultProps = {
-  theme: DEFAULT_THEME
-};
-
-const COMPONENT_ID$4 = 'typography.codeblock_code';
-const colorStyles$1 = props => {
-  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 = getColorV8(hue, 400, props.theme, 0.2);
-  } else if (props.isHighlighted) {
-    const hue = props.isLight ? props.theme.palette.black : props.theme.palette.white;
-    backgroundColor = getColorV8(hue, 600, props.theme, 0.1);
-  }
-  return css(["background-color:", ";"], backgroundColor);
-};
-const lineNumberStyles = props => {
-  const color = getColorV8('neutralHue', props.isLight ? 600 : 500, props.theme);
-  let padding;
-  if (props.language && props.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 {
-    padding = props.theme.space.base * 6;
-  }
-  return `
-    &::before {
-      display: table-cell;
-      padding-right: ${padding}px;
-      width: 1px;
-      text-align: right;
-      color: ${color};
-      content: counter(linenumber);
-      counter-increment: linenumber;
-    }
-  `;
-};
-const StyledCodeBlockLine = styled(StyledFont).attrs({
-  'data-garden-id': COMPONENT_ID$4,
-  'data-garden-version': '9.0.0-next.6',
-  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 => retrieveComponentStyles(COMPONENT_ID$4, props));
-StyledCodeBlockLine.defaultProps = {
-  theme: DEFAULT_THEME
-};
-
-const COMPONENT_ID$3 = 'typography.codeblock_token';
-const colorStyles = props => {
-  const palette = props.theme.palette;
-  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']
-  };
-  return 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.span.attrs({
-  'data-garden-id': COMPONENT_ID$3,
-  'data-garden-version': '9.0.0-next.6'
-}).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 => retrieveComponentStyles(COMPONENT_ID$3, props));
-StyledCodeBlockToken.defaultProps = {
-  theme: DEFAULT_THEME
-};
-
-const COMPONENT_ID$2 = 'typography.ellipsis';
-const StyledEllipsis = styled.div.attrs({
-  'data-garden-id': COMPONENT_ID$2,
-  'data-garden-version': '9.0.0-next.6'
-}).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$2, props));
-StyledEllipsis.defaultProps = {
-  theme: DEFAULT_THEME
-};
-
-const COMPONENT_ID$1 = 'typography.icon';
-const sizeStyles = props => {
-  const margin = props.isStart && `${props.theme.space.base * 2}px`;
-  const size = props.theme.iconSizes.md;
-  return css(["margin-", ":", ";width:", ";height:", ";"], props.theme.rtl ? 'left' : 'right', margin, size, size);
-};
-const StyledIcon = styled(_ref => {
-  let {
-    children,
-    isStart,
-    ...props
-  } = _ref;
-  return React.cloneElement(Children.only(children), props);
-}).attrs({
-  'data-garden-id': COMPONENT_ID$1,
-  'data-garden-version': '9.0.0-next.6'
-}).withConfig({
-  displayName: "StyledIcon",
-  componentId: "sc-10rfb5b-0"
-})(["position:relative;top:-1px;vertical-align:middle;", ";", ";"], props => sizeStyles(props), props => retrieveComponentStyles(COMPONENT_ID$1, props));
-StyledIcon.defaultProps = {
-  theme: DEFAULT_THEME
-};
-
-const listStyles = props => {
-  const rtl = props.theme.rtl;
-  return css(["direction:", ";margin:0;margin-", ":24px;padding:0;list-style-position:outside;list-style-type:", ";"], rtl ? 'rtl' : 'ltr', rtl ? 'right' : 'left', props.listType);
-};
-const ORDERED_ID$1 = 'typography.ordered_list';
-const StyledOrderedList = styled.ol.attrs({
-  'data-garden-id': ORDERED_ID$1,
-  'data-garden-version': '9.0.0-next.6'
-}).withConfig({
-  displayName: "StyledList__StyledOrderedList",
-  componentId: "sc-jdbsfi-0"
-})(["", ";", ";"], props => listStyles(props), props => retrieveComponentStyles(ORDERED_ID$1, props));
-StyledOrderedList.defaultProps = {
-  theme: DEFAULT_THEME
-};
-const UNORDERED_ID$1 = 'typography.unordered_list';
-const StyledUnorderedList = styled.ul.attrs({
-  'data-garden-id': UNORDERED_ID$1,
-  'data-garden-version': '9.0.0-next.6'
-}).withConfig({
-  displayName: "StyledList__StyledUnorderedList",
-  componentId: "sc-jdbsfi-1"
-})(["", ";", ";"], props => listStyles(props), props => retrieveComponentStyles(UNORDERED_ID$1, props));
-StyledUnorderedList.defaultProps = {
-  theme: DEFAULT_THEME
-};
-
-const listItemPaddingStyles = props => {
-  const base = props.theme.space.base;
-  const paddingTop = props.space === 'large' ? `${base * 2}px` : `${base}px`;
-  return css(["padding-top:", ";", " > &:first-child,", " > &:first-child{padding-top:0;}", " ", " > &:first-child,", " ", " > &:first-child,", " ", " > &:first-child,", " ", " > &:first-child{padding-top:", ";}"], paddingTop, StyledOrderedList, StyledUnorderedList, StyledOrderedList, StyledOrderedList, StyledOrderedList, StyledUnorderedList, StyledUnorderedList, StyledUnorderedList, StyledUnorderedList, StyledUnorderedList, paddingTop);
-};
-const listItemStyles = props => {
-  return css(["line-height:", ";", ";"], getLineHeight(props.theme.lineHeights.md, props.theme.fontSizes.md), props.space !== 'small' && listItemPaddingStyles(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.6',
-  as: 'li'
-}).withConfig({
-  displayName: "StyledListItem__StyledOrderedListItem",
-  componentId: "sc-9rsipg-0"
-})(["margin-", ":", ";padding-", ":", ";", ";", ";"], props => props.theme.rtl ? 'right' : 'left', props => math(`${props.theme.space.base} * -1px`), props => props.theme.rtl ? 'right' : 'left', props => math(`${props.theme.space.base} * 1px`), props => listItemStyles(props), props => retrieveComponentStyles(ORDERED_ID, props));
-StyledOrderedListItem.defaultProps = {
-  space: 'medium',
-  theme: DEFAULT_THEME
-};
-const UNORDERED_ID = 'typography.unordered_list_item';
-const StyledUnorderedListItem = styled(StyledFont).attrs({
-  'data-garden-id': UNORDERED_ID,
-  'data-garden-version': '9.0.0-next.6',
-  as: 'li'
-}).withConfig({
-  displayName: "StyledListItem__StyledUnorderedListItem",
-  componentId: "sc-9rsipg-1"
-})(["", ";", ";"], props => listItemStyles(props), props => retrieveComponentStyles(UNORDERED_ID, props));
-StyledUnorderedListItem.defaultProps = {
-  space: 'medium',
-  theme: DEFAULT_THEME
-};
-
-const COMPONENT_ID = 'typography.paragraph';
-const StyledParagraph = styled.p.attrs({
-  'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.6'
-}).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
-};
-
-const SM = forwardRef((_ref, ref) => {
-  let {
-    tag,
-    ...other
-  } = _ref;
-  return React.createElement(StyledFont, _extends({
-    as: tag,
-    ref: ref,
-    size: "small"
-  }, other));
-});
-SM.displayName = 'SM';
-SM.propTypes = {
-  tag: PropTypes.any,
-  isBold: PropTypes.bool,
-  isMonospace: PropTypes.bool
-};
-SM.defaultProps = {
-  tag: 'div'
-};
-
-const MD = forwardRef((_ref, ref) => {
-  let {
-    tag,
-    ...other
-  } = _ref;
-  return React.createElement(StyledFont, _extends({
-    as: tag,
-    ref: ref,
-    size: "medium"
-  }, other));
-});
-MD.displayName = 'MD';
-MD.propTypes = {
-  tag: PropTypes.any,
-  isBold: PropTypes.bool,
-  isMonospace: PropTypes.bool
-};
-MD.defaultProps = {
-  tag: 'div'
-};
-
-const LG = forwardRef((_ref, ref) => {
-  let {
-    tag,
-    ...other
-  } = _ref;
-  return React.createElement(StyledFont, _extends({
-    as: tag,
-    ref: ref,
-    size: "large"
-  }, other));
-});
-LG.displayName = 'LG';
-LG.propTypes = {
-  tag: PropTypes.any,
-  isBold: PropTypes.bool,
-  isMonospace: PropTypes.bool
-};
-LG.defaultProps = {
-  tag: 'div'
-};
-
-const XL = forwardRef((_ref, ref) => {
-  let {
-    tag,
-    ...other
-  } = _ref;
-  return React.createElement(StyledFont, _extends({
-    as: tag,
-    ref: ref,
-    size: "extralarge"
-  }, other));
-});
-XL.displayName = 'XL';
-XL.propTypes = {
-  tag: PropTypes.any,
-  isBold: PropTypes.bool
-};
-XL.defaultProps = {
-  tag: 'div'
-};
-
-const XXL = forwardRef((_ref, ref) => {
-  let {
-    tag,
-    ...other
-  } = _ref;
-  return React.createElement(StyledFont, _extends({
-    as: tag,
-    ref: ref,
-    size: "2xlarge"
-  }, other));
-});
-XXL.displayName = 'XXL';
-XXL.propTypes = {
-  tag: PropTypes.any,
-  isBold: PropTypes.bool
-};
-XXL.defaultProps = {
-  tag: 'div'
-};
-
-const XXXL = forwardRef((_ref, ref) => {
-  let {
-    tag,
-    ...other
-  } = _ref;
-  return React.createElement(StyledFont, _extends({
-    as: tag,
-    ref: ref,
-    size: "3xlarge"
-  }, other));
-});
-XXXL.displayName = 'XXXL';
-XXXL.propTypes = {
-  tag: PropTypes.any,
-  isBold: PropTypes.bool
-};
-XXXL.defaultProps = {
-  tag: 'div'
-};
-
-const Blockquote = forwardRef((props, ref) => React.createElement(StyledBlockquote, _extends({
-  ref: ref
-}, props)));
-Blockquote.displayName = 'Blockquote';
-Blockquote.propTypes = {
-  size: PropTypes.oneOf(SIZE)
-};
-Blockquote.defaultProps = {
-  size: 'medium'
-};
-
-const Code = forwardRef((_ref, ref) => {
-  let {
-    hue,
-    ...other
-  } = _ref;
-  return React.createElement(StyledCode, _extends({
-    ref: ref,
-    hue: hue
-  }, other));
-});
-Code.displayName = 'Code';
-Code.propTypes = {
-  hue: PropTypes.oneOf(HUE),
-  size: PropTypes.oneOf(INHERIT_SIZE)
-};
-Code.defaultProps = {
-  hue: 'grey',
-  size: 'inherit'
-};
-
-const CodeBlock = React.forwardRef((_ref, ref) => {
-  let {
-    children,
-    containerProps,
-    highlightLines,
-    isLight,
-    isNumbered,
-    language,
-    size,
-    ...other
-  } = _ref;
-  const containerRef = useRef(null);
-  const code = Array.isArray(children) ? children[0] : children;
-  const dependency = useMemo(() => [size, children], [size, children]);
-  const containerTabIndex = useScrollRegion({
-    containerRef,
-    dependency
-  });
-  const getDiff = line => {
-    let retVal;
-    if (language === 'diff') {
-      const token = line.find(value => !(value.empty || value.content === ''));
-      if (token) {
-        if (token.types.includes('deleted')) {
-          retVal = 'delete';
-        } else if (token.types.includes('inserted')) {
-          retVal = 'add';
-        } else if (token.types.includes('coord')) {
-          retVal = 'hunk';
-        } else if (token.types.includes('diff')) {
-          retVal = 'change';
-        }
-      }
-    }
-    return retVal;
-  };
-  return React.createElement(StyledCodeBlockContainer, _extends({}, containerProps, {
-    ref: containerRef,
-    tabIndex: containerTabIndex
-  }), React.createElement(Highlight, {
-    Prism: Prism,
-    code: code ? code.trim() : '',
-    language: LANGUAGES.includes(language) ? language : 'tsx'
-  }, _ref2 => {
-    let {
-      className,
-      tokens,
-      getLineProps,
-      getTokenProps
-    } = _ref2;
-    return React.createElement(StyledCodeBlock, _extends({
-      className: className,
-      ref: ref,
-      isLight: isLight
-    }, other), tokens.map((line, index) => React.createElement(StyledCodeBlockLine, _extends({}, 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.createElement(StyledCodeBlockToken, _extends({}, getTokenProps({
-      token
-    }), {
-      key: tokenKey,
-      isLight: isLight
-    }), token.empty ? '\n' : token.content)))));
-  }));
-});
-CodeBlock.displayName = 'CodeBlock';
-CodeBlock.defaultProps = {
-  language: 'tsx',
-  size: 'medium'
-};
-
-const Ellipsis = forwardRef((_ref, ref) => {
-  let {
-    children,
-    title,
-    tag,
-    ...other
-  } = _ref;
-  let textContent = undefined;
-  if (title !== undefined) {
-    textContent = title;
-  } else if (typeof children === 'string') {
-    textContent = children;
-  }
-  return React.createElement(StyledEllipsis, _extends({
-    as: tag,
-    ref: ref,
-    title: textContent
-  }, other), children);
-});
-Ellipsis.displayName = 'Ellipsis';
-Ellipsis.propTypes = {
-  title: PropTypes.string,
-  tag: PropTypes.any
-};
-Ellipsis.defaultProps = {
-  tag: 'div'
-};
-
-const Paragraph = forwardRef((props, ref) => React.createElement(StyledParagraph, _extends({
-  ref: ref
-}, props)));
-Paragraph.displayName = 'Paragraph';
-Paragraph.propTypes = {
-  size: PropTypes.oneOf(SIZE)
-};
-Paragraph.defaultProps = {
-  size: 'medium'
-};
-
-const OrderedListContext = createContext(undefined);
-const useOrderedListContext = () => {
-  const listContext = useContext(OrderedListContext);
-  if (!listContext) {
-    throw new Error('This component must be rendered within an `OrderedList` component.');
-  }
-  return listContext;
-};
-
-const OrderedListItem = forwardRef((props, ref) => {
-  const {
-    size
-  } = useOrderedListContext();
-  return React.createElement(StyledOrderedListItem, _extends({
-    ref: ref,
-    space: size
-  }, props));
-});
-OrderedListItem.displayName = 'OrderedList.Item';
-const Item$1 = OrderedListItem;
-
-const OrderedListComponent = React.forwardRef((_ref, ref) => {
-  let {
-    size,
-    type,
-    ...other
-  } = _ref;
-  const value = useMemo(() => ({
-    size: size
-  }), [size]);
-  return React.createElement(OrderedListContext.Provider, {
-    value: value
-  }, React.createElement(StyledOrderedList, _extends({
-    ref: ref,
-    listType: type
-  }, other)));
-});
-OrderedListComponent.displayName = 'OrderedList';
-OrderedListComponent.propTypes = {
-  size: PropTypes.oneOf(SIZE),
-  type: PropTypes.oneOf(TYPE_ORDERED_LIST)
-};
-OrderedListComponent.defaultProps = {
-  size: 'medium',
-  type: 'decimal'
-};
-const OrderedList = OrderedListComponent;
-OrderedList.Item = Item$1;
-
-const UnorderedListContext = createContext(undefined);
-const useUnorderedListContext = () => {
-  const listContext = useContext(UnorderedListContext);
-  if (!listContext) {
-    throw new Error('This component must be rendered within an `UnorderedList` component.');
-  }
-  return listContext;
-};
-
-const UnorderedListItem = forwardRef((props, ref) => {
-  const {
-    size
-  } = useUnorderedListContext();
-  return React.createElement(StyledUnorderedListItem, _extends({
-    ref: ref,
-    space: size
-  }, props));
-});
-UnorderedListItem.displayName = 'UnorderedList.Item';
-const Item = UnorderedListItem;
-
-const UnorderedListComponent = forwardRef((_ref, ref) => {
-  let {
-    size,
-    type,
-    ...other
-  } = _ref;
-  const value = useMemo(() => ({
-    size: size
-  }), [size]);
-  return React.createElement(UnorderedListContext.Provider, {
-    value: value
-  }, React.createElement(StyledUnorderedList, _extends({
-    ref: ref,
-    listType: type
-  }, other)));
-});
-UnorderedListComponent.displayName = 'UnorderedList';
-UnorderedListComponent.propTypes = {
-  size: PropTypes.oneOf(SIZE),
-  type: PropTypes.oneOf(TYPE_UNORDERED_LIST)
-};
-UnorderedListComponent.defaultProps = {
-  size: 'medium',
-  type: 'disc'
-};
-const UnorderedList = UnorderedListComponent;
-UnorderedList.Item = Item;
-
-const StartIconComponent = props => React.createElement(StyledIcon, _extends({
-  isStart: true
-}, props));
-StartIconComponent.displayName = 'Span.StartIcon';
-const StartIcon = StartIconComponent;
-
-const IconComponent = props => React.createElement(StyledIcon, props);
-IconComponent.displayName = 'Span.Icon';
-const Icon = IconComponent;
-
-const SpanComponent = forwardRef((_ref, ref) => {
-  let {
-    tag,
-    ...other
-  } = _ref;
-  return React.createElement(StyledFont, _extends({
-    as: tag,
-    ref: ref,
-    size: "inherit"
-  }, other));
-});
-SpanComponent.displayName = 'Span';
-SpanComponent.propTypes = {
-  tag: PropTypes.any,
-  isBold: PropTypes.bool,
-  isMonospace: PropTypes.bool,
-  hue: PropTypes.string
-};
-SpanComponent.defaultProps = {
-  tag: 'span'
-};
-const Span = SpanComponent;
-Span.Icon = Icon;
-Span.StartIcon = StartIcon;
-
-export { Blockquote, Code, CodeBlock, Ellipsis, LG, MD, OrderedList, Paragraph, SM, Span, UnorderedList, XL, XXL, XXXL };