@zendeskgarden/react-typography 9.0.0-next.21 → 9.0.0-next.23

package/dist/esm/elements/CodeBlock.js

@@ -101,12 +101,13 @@ const CodeBlock = React.forwardRef((_ref, ref) => {
     }, React.createElement(StyledCodeBlock, Object.assign({
       className: className,
       ref: ref
-    }, other), tokens.map((line, index) => React.createElement(StyledCodeBlockLine, Object.assign({}, getLineProps({
+    }, other), tokens.map((line, index) =>
+    React.createElement(StyledCodeBlockLine, Object.assign({}, getLineProps({
       line
     }), {
       key: index,
       language: language,
-      isHighlighted: highlightLines && highlightLines.includes(index + 1),
+      isHighlighted: highlightLines?.includes(index + 1),
       isNumbered: isNumbered,
       diff: getDiff(line),
       size: size,

package/dist/esm/styled/StyledBlockquote.js

@@ -11,7 +11,7 @@ import { THEME_SIZES } from './StyledFont.js';
 const COMPONENT_ID = 'typography.blockquote';
 const StyledBlockquote = styled.blockquote.attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.21'
+  'data-garden-version': '9.0.0-next.23'
 }).withConfig({
   displayName: "StyledBlockquote",
   componentId: "sc-1tt3ye0-0"

package/dist/esm/styled/StyledCode.js

@@ -50,7 +50,7 @@ const colorStyles = _ref => {
 };
 const StyledCode = styled(StyledFont).attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.21',
+  'data-garden-version': '9.0.0-next.23',
   as: 'code',
   isMonospace: true
 }).withConfig({

package/dist/esm/styled/StyledCodeBlock.js

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

package/dist/esm/styled/StyledCodeBlockContainer.js

@@ -10,7 +10,7 @@ import { focusStyles, retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgar
 const COMPONENT_ID = 'typography.codeblock_container';
 const StyledCodeBlockContainer = styled.div.attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.21'
+  'data-garden-version': '9.0.0-next.23'
 }).withConfig({
   displayName: "StyledCodeBlockContainer",
   componentId: "sc-14zgbfw-0"

package/dist/esm/styled/StyledCodeBlockLine.js

@@ -86,7 +86,7 @@ const lineNumberStyles = _ref2 => {
 };
 const StyledCodeBlockLine = styled(StyledFont).attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.21',
+  'data-garden-version': '9.0.0-next.23',
   as: 'code',
   isMonospace: true
 }).withConfig({

package/dist/esm/styled/StyledCodeBlockToken.js

@@ -171,7 +171,7 @@ const colorStyles = _ref => {
 };
 const StyledCodeBlockToken = styled.span.attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.21'
+  'data-garden-version': '9.0.0-next.23'
 }).withConfig({
   displayName: "StyledCodeBlockToken",
   componentId: "sc-1hkshdq-0"

package/dist/esm/styled/StyledEllipsis.js

@@ -10,7 +10,7 @@ import { retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-the
 const COMPONENT_ID = 'typography.ellipsis';
 const StyledEllipsis = styled.div.attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.21'
+  'data-garden-version': '9.0.0-next.23'
 }).withConfig({
   displayName: "StyledEllipsis",
   componentId: "sc-1u4uqmy-0"

package/dist/esm/styled/StyledFont.js

@@ -54,16 +54,20 @@ const fontStyles = _ref => {
     fontWeight = theme.fontWeights.regular;
   }
   if (hue) {
-    color = getColor({
+    const options = hue.includes('.') ? {
+      variable: hue,
+      theme
+    } : {
       hue,
       theme
-    });
+    };
+    color = getColor(options);
   }
-  return css(["line-height:", ";color:", ";font-family:", ";font-size:", ";font-weight:", ";direction:", ";"], lineHeight, color, fontFamily, fontSize, fontWeight, direction);
+  return css(["transition:color 0.1s ease-in-out;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.21'
+  'data-garden-version': '9.0.0-next.23'
 }).withConfig({
   displayName: "StyledFont",
   componentId: "sc-1iildbo-0"

package/dist/esm/styled/StyledIcon.js

@@ -15,7 +15,7 @@ const sizeStyles = props => {
 };
 const StyledIcon = styled(StyledBaseIcon).attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.21'
+  'data-garden-version': '9.0.0-next.23'
 }).withConfig({
   displayName: "StyledIcon",
   componentId: "sc-10rfb5b-0"

package/dist/esm/styled/StyledList.js

@@ -14,7 +14,7 @@ const listStyles = props => {
 const ORDERED_ID = 'typography.ordered_list';
 const StyledOrderedList = styled.ol.attrs({
   'data-garden-id': ORDERED_ID,
-  'data-garden-version': '9.0.0-next.21'
+  'data-garden-version': '9.0.0-next.23'
 }).withConfig({
   displayName: "StyledList__StyledOrderedList",
   componentId: "sc-jdbsfi-0"
@@ -25,7 +25,7 @@ StyledOrderedList.defaultProps = {
 const UNORDERED_ID = 'typography.unordered_list';
 const StyledUnorderedList = styled.ul.attrs({
   'data-garden-id': UNORDERED_ID,
-  'data-garden-version': '9.0.0-next.21'
+  'data-garden-version': '9.0.0-next.23'
 }).withConfig({
   displayName: "StyledList__StyledUnorderedList",
   componentId: "sc-jdbsfi-1"

package/dist/esm/styled/StyledListItem.js

@@ -13,7 +13,7 @@ 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);
+  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, StyledOrderedList, paddingTop);
 };
 const listItemStyles = props => {
   return css(["line-height:", ";", ";"], getLineHeight(props.theme.lineHeights.md, props.theme.fontSizes.md), props.space !== 'small' && listItemPaddingStyles(props));
@@ -21,7 +21,7 @@ const listItemStyles = props => {
 const ORDERED_ID = 'typography.ordered_list_item';
 const StyledOrderedListItem = styled(StyledFont).attrs({
   'data-garden-id': ORDERED_ID,
-  'data-garden-version': '9.0.0-next.21',
+  'data-garden-version': '9.0.0-next.23',
   as: 'li'
 }).withConfig({
   displayName: "StyledListItem__StyledOrderedListItem",
@@ -34,7 +34,7 @@ StyledOrderedListItem.defaultProps = {
 const UNORDERED_ID = 'typography.unordered_list_item';
 const StyledUnorderedListItem = styled(StyledFont).attrs({
   'data-garden-id': UNORDERED_ID,
-  'data-garden-version': '9.0.0-next.21',
+  'data-garden-version': '9.0.0-next.23',
   as: 'li'
 }).withConfig({
   displayName: "StyledListItem__StyledUnorderedListItem",

package/dist/esm/styled/StyledParagraph.js

@@ -11,7 +11,7 @@ import { THEME_SIZES } from './StyledFont.js';
 const COMPONENT_ID = 'typography.paragraph';
 const StyledParagraph = styled.p.attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.21'
+  'data-garden-version': '9.0.0-next.23'
 }).withConfig({
   displayName: "StyledParagraph",
   componentId: "sc-zkuftz-0"

package/dist/index.cjs.js

@@ -72,16 +72,20 @@ const fontStyles = _ref => {
     fontWeight = theme.fontWeights.regular;
   }
   if (hue) {
-    color = reactTheming.getColor({
+    const options = hue.includes('.') ? {
+      variable: hue,
+      theme
+    } : {
       hue,
       theme
-    });
+    };
+    color = reactTheming.getColor(options);
   }
-  return styled.css(["line-height:", ";color:", ";font-family:", ";font-size:", ";font-weight:", ";direction:", ";"], lineHeight, color, fontFamily, fontSize, fontWeight, direction);
+  return styled.css(["transition:color 0.1s ease-in-out;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.21'
+  'data-garden-version': '9.0.0-next.23'
 }).withConfig({
   displayName: "StyledFont",
   componentId: "sc-1iildbo-0"
@@ -94,7 +98,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.21'
+  'data-garden-version': '9.0.0-next.23'
 }).withConfig({
   displayName: "StyledBlockquote",
   componentId: "sc-1tt3ye0-0"
@@ -148,7 +152,7 @@ const colorStyles$3 = _ref => {
 };
 const StyledCode = styled__default.default(StyledFont).attrs({
   'data-garden-id': COMPONENT_ID$7,
-  'data-garden-version': '9.0.0-next.21',
+  'data-garden-version': '9.0.0-next.23',
   as: 'code',
   isMonospace: true
 }).withConfig({
@@ -178,7 +182,7 @@ const colorStyles$2 = _ref => {
 };
 const StyledCodeBlock = styled__default.default.pre.attrs({
   'data-garden-id': COMPONENT_ID$6,
-  'data-garden-version': '9.0.0-next.21'
+  'data-garden-version': '9.0.0-next.23'
 }).withConfig({
   displayName: "StyledCodeBlock",
   componentId: "sc-5wky57-0"
@@ -190,7 +194,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.21'
+  'data-garden-version': '9.0.0-next.23'
 }).withConfig({
   displayName: "StyledCodeBlockContainer",
   componentId: "sc-14zgbfw-0"
@@ -279,7 +283,7 @@ const lineNumberStyles = _ref2 => {
 };
 const StyledCodeBlockLine = styled__default.default(StyledFont).attrs({
   'data-garden-id': COMPONENT_ID$4,
-  'data-garden-version': '9.0.0-next.21',
+  'data-garden-version': '9.0.0-next.23',
   as: 'code',
   isMonospace: true
 }).withConfig({
@@ -453,7 +457,7 @@ const colorStyles = _ref => {
 };
 const StyledCodeBlockToken = styled__default.default.span.attrs({
   'data-garden-id': COMPONENT_ID$3,
-  'data-garden-version': '9.0.0-next.21'
+  'data-garden-version': '9.0.0-next.23'
 }).withConfig({
   displayName: "StyledCodeBlockToken",
   componentId: "sc-1hkshdq-0"
@@ -465,7 +469,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.21'
+  'data-garden-version': '9.0.0-next.23'
 }).withConfig({
   displayName: "StyledEllipsis",
   componentId: "sc-1u4uqmy-0"
@@ -482,7 +486,7 @@ const sizeStyles = props => {
 };
 const StyledIcon = styled__default.default(reactTheming.StyledBaseIcon).attrs({
   'data-garden-id': COMPONENT_ID$1,
-  'data-garden-version': '9.0.0-next.21'
+  'data-garden-version': '9.0.0-next.23'
 }).withConfig({
   displayName: "StyledIcon",
   componentId: "sc-10rfb5b-0"
@@ -498,7 +502,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.21'
+  'data-garden-version': '9.0.0-next.23'
 }).withConfig({
   displayName: "StyledList__StyledOrderedList",
   componentId: "sc-jdbsfi-0"
@@ -509,7 +513,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.21'
+  'data-garden-version': '9.0.0-next.23'
 }).withConfig({
   displayName: "StyledList__StyledUnorderedList",
   componentId: "sc-jdbsfi-1"
@@ -521,7 +525,7 @@ StyledUnorderedList.defaultProps = {
 const listItemPaddingStyles = props => {
   const base = props.theme.space.base;
   const paddingTop = props.space === 'large' ? `${base * 2}px` : `${base}px`;
-  return styled.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);
+  return styled.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, StyledOrderedList, paddingTop);
 };
 const listItemStyles = props => {
   return styled.css(["line-height:", ";", ";"], reactTheming.getLineHeight(props.theme.lineHeights.md, props.theme.fontSizes.md), props.space !== 'small' && listItemPaddingStyles(props));
@@ -529,7 +533,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.21',
+  'data-garden-version': '9.0.0-next.23',
   as: 'li'
 }).withConfig({
   displayName: "StyledListItem__StyledOrderedListItem",
@@ -542,7 +546,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.21',
+  'data-garden-version': '9.0.0-next.23',
   as: 'li'
 }).withConfig({
   displayName: "StyledListItem__StyledUnorderedListItem",
@@ -556,7 +560,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.21'
+  'data-garden-version': '9.0.0-next.23'
 }).withConfig({
   displayName: "StyledParagraph",
   componentId: "sc-zkuftz-0"
@@ -798,12 +802,13 @@ const CodeBlock = React__default.default.forwardRef((_ref, ref) => {
     }, React__default.default.createElement(StyledCodeBlock, Object.assign({
       className: className,
       ref: ref
-    }, other), tokens.map((line, index) => React__default.default.createElement(StyledCodeBlockLine, Object.assign({}, getLineProps({
+    }, other), tokens.map((line, index) =>
+    React__default.default.createElement(StyledCodeBlockLine, Object.assign({}, getLineProps({
       line
     }), {
       key: index,
       language: language,
-      isHighlighted: highlightLines && highlightLines.includes(index + 1),
+      isHighlighted: highlightLines?.includes(index + 1),
       isNumbered: isNumbered,
       diff: getDiff(line),
       size: size,

package/dist/typings/elements/lists/OrderedList.d.ts

@@ -7,9 +7,11 @@
 import React from 'react';
 import { Item } from './OrderedListItem';
 import { IOrderedListProps } from '../../types';
+declare const OrderedListComponent: React.ForwardRefExoticComponent<IOrderedListProps & React.RefAttributes<HTMLOListElement>>;
 /**
  * @extends OlHTMLAttributes<HTMLOListElement>
  */
-export declare const OrderedList: React.ForwardRefExoticComponent<IOrderedListProps & React.RefAttributes<HTMLOListElement>> & {
+export declare const OrderedList: typeof OrderedListComponent & {
     Item: typeof Item;
 };
+export {};

package/dist/typings/elements/lists/UnorderedList.d.ts

@@ -7,9 +7,11 @@
 import React from 'react';
 import { Item } from './UnorderedListItem';
 import { IUnorderedListProps } from '../../types';
+declare const UnorderedListComponent: React.ForwardRefExoticComponent<IUnorderedListProps & React.RefAttributes<HTMLUListElement>>;
 /**
  * @extends HTMLAttributes<HTMLUListElement>
  */
-export declare const UnorderedList: React.ForwardRefExoticComponent<IUnorderedListProps & React.RefAttributes<HTMLUListElement>> & {
+export declare const UnorderedList: typeof UnorderedListComponent & {
     Item: typeof Item;
 };
+export {};

package/dist/typings/elements/span/Span.d.ts

@@ -8,10 +8,12 @@ import React from 'react';
 import { ISpanProps } from '../../types';
 import { StartIcon } from './StartIcon';
 import { Icon } from './Icon';
+declare const SpanComponent: React.ForwardRefExoticComponent<ISpanProps & React.RefAttributes<HTMLSpanElement>>;
 /**
  * @extends HTMLAttributes<HTMLSpanElement>
  */
-export declare const Span: React.ForwardRefExoticComponent<ISpanProps & React.RefAttributes<HTMLSpanElement>> & {
+export declare const Span: typeof SpanComponent & {
     Icon: typeof Icon;
     StartIcon: typeof StartIcon;
 };
+export {};

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

@@ -4,7 +4,6 @@
  * 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';
 interface IStyledIconProps {
     $isStart?: boolean;

package/dist/typings/types/index.d.ts

@@ -77,8 +77,10 @@ export interface ISpanProps extends HTMLAttributes<HTMLSpanElement> {
     /** Renders with monospace font */
     isMonospace?: boolean;
     /**
-     * Applies a font color. Use [PALETTE](/components/palette#palette) colors
-     * when possible. Accepts all hex values.
+     * Applies a font color. Use a [color
+     * variable](/components/theme-object#colors) key (i.e. `foreground.subtle`)
+     * or [PALETTE](/components/palette#palette) colors when possible. Accepts all
+     * hex values.
      */
     hue?: string;
     /** Hides the span visually without hiding it from screen readers */

package/dist/typings/utils/useOrderedListContext.d.ts

@@ -4,7 +4,6 @@
  * 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 { Size } from '../types';
 interface IOrderedListContext {
     size: Size;

package/dist/typings/utils/useUnorderedListContext.d.ts

@@ -4,7 +4,6 @@
  * 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 { Size } from '../types';
 interface IUnorderedListContext {
     size: Size;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zendeskgarden/react-typography",
-  "version": "9.0.0-next.21",
+  "version": "9.0.0-next.23",
   "description": "Components relating to typography in the Garden Design System",
   "license": "Apache-2.0",
   "author": "Zendesk Garden <garden@zendesk.com>",
@@ -29,12 +29,12 @@
   },
   "peerDependencies": {
     "@zendeskgarden/react-theming": ">=9.0.0-next",
-    "react": ">=16.8.0",
-    "react-dom": ">=16.8.0",
+    "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
+    "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0",
     "styled-components": "^5.3.1"
   },
   "devDependencies": {
-    "@zendeskgarden/react-theming": "^9.0.0-next.21"
+    "@zendeskgarden/react-theming": "^9.0.0-next.23"
   },
   "keywords": [
     "components",
@@ -46,5 +46,5 @@
     "access": "public"
   },
   "zendeskgarden:src": "src/index.ts",
-  "gitHead": "a245ce2b794ea65142174a6a1f855a111b2677a2"
+  "gitHead": "5e7d2ed69a1615e09406a3f9285359346bb90cc7"
 }