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

package/dist/esm/utils/useOrderedListContext.js

@@ -0,0 +1,18 @@
+/**
+* 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 { createContext, useContext } from 'react';
+
+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;
+};
+
+export { OrderedListContext, useOrderedListContext as default };

package/dist/esm/utils/useUnorderedListContext.js

@@ -0,0 +1,18 @@
+/**
+* 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 { createContext, useContext } from 'react';
+
+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;
+};
+
+export { UnorderedListContext, useUnorderedListContext as default };

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');
@@ -22,21 +21,6 @@ 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];
@@ -89,7 +73,7 @@ const fontStyles = props => {
 };
 const StyledFont = styled__default.default.div.attrs({
   'data-garden-id': COMPONENT_ID$9,
-  'data-garden-version': '9.0.0-next.7'
+  'data-garden-version': '9.0.0-next.9'
 }).withConfig({
   displayName: "StyledFont",
   componentId: "sc-1iildbo-0"
@@ -102,7 +86,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.7'
+  'data-garden-version': '9.0.0-next.9'
 }).withConfig({
   displayName: "StyledBlockquote",
   componentId: "sc-1tt3ye0-0"
@@ -121,7 +105,7 @@ const colorStyles$3 = props => {
 };
 const StyledCode = styled__default.default(StyledFont).attrs({
   'data-garden-id': COMPONENT_ID$7,
-  'data-garden-version': '9.0.0-next.7',
+  'data-garden-version': '9.0.0-next.9',
   as: 'code'
 }).withConfig({
   displayName: "StyledCode",
@@ -142,7 +126,7 @@ const colorStyles$2 = props => {
 };
 const StyledCodeBlock = styled__default.default.pre.attrs({
   'data-garden-id': COMPONENT_ID$6,
-  'data-garden-version': '9.0.0-next.7'
+  'data-garden-version': '9.0.0-next.9'
 }).withConfig({
   displayName: "StyledCodeBlock",
   componentId: "sc-5wky57-0"
@@ -154,7 +138,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.7'
+  'data-garden-version': '9.0.0-next.9'
 }).withConfig({
   displayName: "StyledCodeBlockContainer",
   componentId: "sc-14zgbfw-0"
@@ -217,7 +201,7 @@ const lineNumberStyles = props => {
 };
 const StyledCodeBlockLine = styled__default.default(StyledFont).attrs({
   'data-garden-id': COMPONENT_ID$4,
-  'data-garden-version': '9.0.0-next.7',
+  'data-garden-version': '9.0.0-next.9',
   as: 'code',
   isMonospace: true
 }).withConfig({
@@ -252,7 +236,7 @@ const colorStyles = props => {
 };
 const StyledCodeBlockToken = styled__default.default.span.attrs({
   'data-garden-id': COMPONENT_ID$3,
-  'data-garden-version': '9.0.0-next.7'
+  'data-garden-version': '9.0.0-next.9'
 }).withConfig({
   displayName: "StyledCodeBlockToken",
   componentId: "sc-1hkshdq-0"
@@ -264,7 +248,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.7'
+  'data-garden-version': '9.0.0-next.9'
 }).withConfig({
   displayName: "StyledEllipsis",
   componentId: "sc-1u4uqmy-0"
@@ -275,20 +259,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.7'
+  'data-garden-version': '9.0.0-next.9'
 }).withConfig({
   displayName: "StyledIcon",
   componentId: "sc-10rfb5b-0"
@@ -304,7 +281,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.7'
+  'data-garden-version': '9.0.0-next.9'
 }).withConfig({
   displayName: "StyledList__StyledOrderedList",
   componentId: "sc-jdbsfi-0"
@@ -315,7 +292,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.7'
+  'data-garden-version': '9.0.0-next.9'
 }).withConfig({
   displayName: "StyledList__StyledUnorderedList",
   componentId: "sc-jdbsfi-1"
@@ -335,7 +312,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.7',
+  'data-garden-version': '9.0.0-next.9',
   as: 'li'
 }).withConfig({
   displayName: "StyledListItem__StyledOrderedListItem",
@@ -348,7 +325,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.7',
+  'data-garden-version': '9.0.0-next.9',
   as: 'li'
 }).withConfig({
   displayName: "StyledListItem__StyledUnorderedListItem",
@@ -362,7 +339,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.7'
+  'data-garden-version': '9.0.0-next.9'
 }).withConfig({
   displayName: "StyledParagraph",
   componentId: "sc-zkuftz-0"
@@ -376,7 +353,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 +374,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 +395,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 +416,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 +436,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 +456,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 +471,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 +487,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));
@@ -561,7 +538,7 @@ const CodeBlock = React__default.default.forwardRef((_ref, ref) => {
     }
     return retVal;
   };
-  return React__default.default.createElement(StyledCodeBlockContainer, _extends({}, containerProps, {
+  return React__default.default.createElement(StyledCodeBlockContainer, Object.assign({}, containerProps, {
     ref: containerRef,
     tabIndex: containerTabIndex
   }), React__default.default.createElement(Highlight__default.default, {
@@ -575,11 +552,11 @@ const CodeBlock = React__default.default.forwardRef((_ref, ref) => {
       getLineProps,
       getTokenProps
     } = _ref2;
-    return React__default.default.createElement(StyledCodeBlock, _extends({
+    return 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({
+    }, other), tokens.map((line, index) => React__default.default.createElement(StyledCodeBlockLine, Object.assign({}, getLineProps({
       line
     }), {
       key: index,
@@ -589,7 +566,7 @@ const CodeBlock = React__default.default.forwardRef((_ref, ref) => {
       isNumbered: isNumbered,
       diff: getDiff(line),
       size: size
-    }), line.map((token, tokenKey) => React__default.default.createElement(StyledCodeBlockToken, _extends({}, getTokenProps({
+    }), line.map((token, tokenKey) => React__default.default.createElement(StyledCodeBlockToken, Object.assign({}, getTokenProps({
       token
     }), {
       key: tokenKey,
@@ -616,7 +593,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 +608,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 +632,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 +651,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 +681,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 +700,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 +717,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 +732,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"

package/dist/typings/styled/StyledIcon.d.ts

@@ -4,12 +4,12 @@
  * Use of this source code is governed under the Apache License, Version 2.0
  * found at http://www.apache.org/licenses/LICENSE-2.0.
  */
+/// <reference types="react" />
 import { DefaultTheme } from 'styled-components';
-import React from 'react';
 interface IStyledIconProps {
-    isStart?: boolean;
+    $isStart?: boolean;
 }
-export declare const StyledIcon: import("styled-components").StyledComponent<({ children, isStart, ...props }: any) => React.DetailedReactHTMLElement<any, HTMLElement>, DefaultTheme, {
+export declare const StyledIcon: import("styled-components").StyledComponent<({ children, theme, ...props }: any) => import("react").DetailedReactHTMLElement<any, HTMLElement>, DefaultTheme, {
     'data-garden-id': string;
     'data-garden-version': string;
 } & IStyledIconProps, "data-garden-id" | "data-garden-version">;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zendeskgarden/react-typography",
-  "version": "9.0.0-next.7",
+  "version": "9.0.0-next.9",
   "description": "Components relating to typography in the Garden Design System",
   "license": "Apache-2.0",
   "author": "Zendesk Garden <garden@zendesk.com>",
@@ -10,7 +10,7 @@
     "url": "https://github.com/zendeskgarden/react-components/issues"
   },
   "main": "dist/index.cjs.js",
-  "module": "dist/index.esm.js",
+  "module": "dist/esm/index.js",
   "files": [
     "dist"
   ],
@@ -27,13 +27,13 @@
     "prop-types": "^15.5.7"
   },
   "peerDependencies": {
-    "@zendeskgarden/react-theming": "^9.0.0",
+    "@zendeskgarden/react-theming": ">=9.0.0-next",
     "react": ">=16.8.0",
     "react-dom": ">=16.8.0",
     "styled-components": "^5.3.1"
   },
   "devDependencies": {
-    "@zendeskgarden/react-theming": "^9.0.0-next.7"
+    "@zendeskgarden/react-theming": "^9.0.0-next.9"
   },
   "keywords": [
     "components",
@@ -45,5 +45,5 @@
     "access": "public"
   },
   "zendeskgarden:src": "src/index.ts",
-  "gitHead": "50a2b45b2e237a490a6d460818d33498b92479ec"
+  "gitHead": "771281b562d376a6aee04b0cd71dd888b3ae4a1d"
 }