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

package/dist/esm/elements/lists/UnorderedListItem.js

@@ -0,0 +1,34 @@
+/**
+* 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, { forwardRef } from 'react';
+import useUnorderedListContext from '../../utils/useUnorderedListContext.js';
+import '../../styled/StyledBlockquote.js';
+import '../../styled/StyledCode.js';
+import '../../styled/StyledCodeBlock.js';
+import '../../styled/StyledCodeBlockContainer.js';
+import '../../styled/StyledCodeBlockLine.js';
+import '../../styled/StyledCodeBlockToken.js';
+import '../../styled/StyledEllipsis.js';
+import '../../styled/StyledFont.js';
+import '../../styled/StyledIcon.js';
+import '../../styled/StyledList.js';
+import { StyledUnorderedListItem } from '../../styled/StyledListItem.js';
+import '../../styled/StyledParagraph.js';
+
+const UnorderedListItem = forwardRef((props, ref) => {
+  const {
+    size
+  } = useUnorderedListContext();
+  return React.createElement(StyledUnorderedListItem, Object.assign({
+    ref: ref,
+    space: size
+  }, props));
+});
+UnorderedListItem.displayName = 'UnorderedList.Item';
+const Item = UnorderedListItem;
+
+export { Item };

package/dist/esm/elements/span/Icon.js

@@ -0,0 +1,25 @@
+/**
+* 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 from 'react';
+import '../../styled/StyledBlockquote.js';
+import '../../styled/StyledCode.js';
+import '../../styled/StyledCodeBlock.js';
+import '../../styled/StyledCodeBlockContainer.js';
+import '../../styled/StyledCodeBlockLine.js';
+import '../../styled/StyledCodeBlockToken.js';
+import '../../styled/StyledEllipsis.js';
+import '../../styled/StyledFont.js';
+import { StyledIcon } from '../../styled/StyledIcon.js';
+import '../../styled/StyledList.js';
+import '../../styled/StyledListItem.js';
+import '../../styled/StyledParagraph.js';
+
+const IconComponent = props => React.createElement(StyledIcon, props);
+IconComponent.displayName = 'Span.Icon';
+const Icon = IconComponent;
+
+export { Icon };

package/dist/esm/elements/span/Span.js

@@ -0,0 +1,49 @@
+/**
+* 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, { forwardRef } from 'react';
+import PropTypes from 'prop-types';
+import '../../styled/StyledBlockquote.js';
+import '../../styled/StyledCode.js';
+import '../../styled/StyledCodeBlock.js';
+import '../../styled/StyledCodeBlockContainer.js';
+import '../../styled/StyledCodeBlockLine.js';
+import '../../styled/StyledCodeBlockToken.js';
+import '../../styled/StyledEllipsis.js';
+import { StyledFont } from '../../styled/StyledFont.js';
+import '../../styled/StyledIcon.js';
+import '../../styled/StyledList.js';
+import '../../styled/StyledListItem.js';
+import '../../styled/StyledParagraph.js';
+import { StartIcon } from './StartIcon.js';
+import { Icon } from './Icon.js';
+
+const SpanComponent = forwardRef((_ref, ref) => {
+  let {
+    tag,
+    ...other
+  } = _ref;
+  return React.createElement(StyledFont, Object.assign({
+    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 { Span };

package/dist/esm/elements/span/StartIcon.js

@@ -0,0 +1,27 @@
+/**
+* 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 from 'react';
+import '../../styled/StyledBlockquote.js';
+import '../../styled/StyledCode.js';
+import '../../styled/StyledCodeBlock.js';
+import '../../styled/StyledCodeBlockContainer.js';
+import '../../styled/StyledCodeBlockLine.js';
+import '../../styled/StyledCodeBlockToken.js';
+import '../../styled/StyledEllipsis.js';
+import '../../styled/StyledFont.js';
+import { StyledIcon } from '../../styled/StyledIcon.js';
+import '../../styled/StyledList.js';
+import '../../styled/StyledListItem.js';
+import '../../styled/StyledParagraph.js';
+
+const StartIconComponent = props => React.createElement(StyledIcon, Object.assign({
+  isStart: true
+}, props));
+StartIconComponent.displayName = 'Span.StartIcon';
+const StartIcon = StartIconComponent;
+
+export { StartIcon };

package/dist/esm/index.js

@@ -0,0 +1,20 @@
+/**
+* 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.
+*/
+export { SM } from './elements/SM.js';
+export { MD } from './elements/MD.js';
+export { LG } from './elements/LG.js';
+export { XL } from './elements/XL.js';
+export { XXL } from './elements/XXL.js';
+export { XXXL } from './elements/XXXL.js';
+export { Blockquote } from './elements/Blockquote.js';
+export { Code } from './elements/Code.js';
+export { CodeBlock } from './elements/CodeBlock.js';
+export { Ellipsis } from './elements/Ellipsis.js';
+export { Paragraph } from './elements/Paragraph.js';
+export { OrderedList } from './elements/lists/OrderedList.js';
+export { UnorderedList } from './elements/lists/UnorderedList.js';
+export { Span } from './elements/span/Span.js';

package/dist/esm/styled/StyledBlockquote.js

@@ -0,0 +1,23 @@
+/**
+* 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 styled from 'styled-components';
+import { getColorV8, retrieveComponentStyles, DEFAULT_THEME } 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.8'
+}).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, props));
+StyledBlockquote.defaultProps = {
+  theme: DEFAULT_THEME
+};
+
+export { StyledBlockquote };

package/dist/esm/styled/StyledCode.js

@@ -0,0 +1,34 @@
+/**
+* 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 styled, { css } from 'styled-components';
+import { retrieveComponentStyles, DEFAULT_THEME, getColorV8 } from '@zendeskgarden/react-theming';
+import { StyledFont } from './StyledFont.js';
+
+const COMPONENT_ID = 'typography.code';
+const colorStyles = 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,
+  'data-garden-version': '9.0.0-next.8',
+  as: 'code'
+}).withConfig({
+  displayName: "StyledCode",
+  componentId: "sc-l8yvmf-0"
+})(["border-radius:", ";padding:1.5px;", ";", ";"], props => props.theme.borderRadii.sm, props => colorStyles(props), props => retrieveComponentStyles(COMPONENT_ID, props));
+StyledCode.defaultProps = {
+  theme: DEFAULT_THEME,
+  isMonospace: true,
+  hue: 'neutralHue',
+  size: 'inherit'
+};
+
+export { StyledCode };

package/dist/esm/styled/StyledCodeBlock.js

@@ -0,0 +1,27 @@
+/**
+* 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 styled, { css } from 'styled-components';
+import { retrieveComponentStyles, DEFAULT_THEME, getColorV8 } from '@zendeskgarden/react-theming';
+
+const COMPONENT_ID = 'typography.codeblock';
+const colorStyles = 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,
+  'data-garden-version': '9.0.0-next.8'
+}).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(props), props => retrieveComponentStyles(COMPONENT_ID, props));
+StyledCodeBlock.defaultProps = {
+  theme: DEFAULT_THEME
+};
+
+export { StyledCodeBlock };

package/dist/esm/styled/StyledCodeBlockContainer.js

@@ -0,0 +1,24 @@
+/**
+* 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 styled from 'styled-components';
+import { focusStyles, retrieveComponentStyles, DEFAULT_THEME } 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.8'
+}).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

@@ -0,0 +1,74 @@
+/**
+* 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 styled, { css } from 'styled-components';
+import { retrieveComponentStyles, DEFAULT_THEME, getColorV8 } from '@zendeskgarden/react-theming';
+import { StyledFont, THEME_SIZES } from './StyledFont.js';
+
+const COMPONENT_ID = 'typography.codeblock_code';
+const colorStyles = 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,
+  'data-garden-version': '9.0.0-next.8',
+  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(props), 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

@@ -0,0 +1,44 @@
+/**
+* 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 styled, { css } from 'styled-components';
+import { retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-theming';
+import { StyledCodeBlock } from './StyledCodeBlock.js';
+
+const COMPONENT_ID = '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,
+  'data-garden-version': '9.0.0-next.8'
+}).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, props));
+StyledCodeBlockToken.defaultProps = {
+  theme: DEFAULT_THEME
+};
+
+export { StyledCodeBlockToken };

package/dist/esm/styled/StyledEllipsis.js

@@ -0,0 +1,22 @@
+/**
+* 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 styled from 'styled-components';
+import { retrieveComponentStyles, DEFAULT_THEME } 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.8'
+}).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

@@ -0,0 +1,67 @@
+/**
+* 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 styled, { css } from 'styled-components';
+import { hideVisually, math } from 'polished';
+import { retrieveComponentStyles, DEFAULT_THEME, getColorV8 } from '@zendeskgarden/react-theming';
+import { SIZE } from '../types/index.js';
+
+const COMPONENT_ID = '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,
+  'data-garden-version': '9.0.0-next.8'
+}).withConfig({
+  displayName: "StyledFont",
+  componentId: "sc-1iildbo-0"
+})(["", ";&[hidden]{display:inline;", ";}", ";"], props => !props.hidden && fontStyles(props), hideVisually(), props => retrieveComponentStyles(COMPONENT_ID, props));
+StyledFont.defaultProps = {
+  theme: DEFAULT_THEME,
+  size: 'inherit'
+};
+
+export { StyledFont, THEME_SIZES };

package/dist/esm/styled/StyledIcon.js

@@ -0,0 +1,35 @@
+/**
+* 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 styled, { css } from 'styled-components';
+import React, { Children } from 'react';
+import { retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-theming';
+
+const COMPONENT_ID = '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,
+  'data-garden-version': '9.0.0-next.8'
+}).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

@@ -0,0 +1,37 @@
+/**
+* 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 styled, { css } from 'styled-components';
+import { retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-theming';
+
+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 = 'typography.ordered_list';
+const StyledOrderedList = styled.ol.attrs({
+  'data-garden-id': ORDERED_ID,
+  'data-garden-version': '9.0.0-next.8'
+}).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.8'
+}).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

@@ -0,0 +1,48 @@
+/**
+* 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 styled, { css } from 'styled-components';
+import { math } from 'polished';
+import { retrieveComponentStyles, DEFAULT_THEME, getLineHeight } from '@zendeskgarden/react-theming';
+import { StyledOrderedList, StyledUnorderedList } from './StyledList.js';
+import { StyledFont } from './StyledFont.js';
+
+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.8',
+  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.8',
+  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
+};
+
+export { StyledOrderedListItem, StyledUnorderedListItem };

package/dist/esm/styled/StyledParagraph.js

@@ -0,0 +1,23 @@
+/**
+* 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 styled from 'styled-components';
+import { retrieveComponentStyles, DEFAULT_THEME } 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.8'
+}).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/esm/types/index.js

@@ -0,0 +1,14 @@
+/**
+* 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.
+*/
+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'];
+
+export { HUE, INHERIT_SIZE, LANGUAGES, SIZE, TYPE_ORDERED_LIST, TYPE_UNORDERED_LIST };