@zendeskgarden/react-breadcrumbs 9.0.0-next.9 → 9.1.0

package/dist/esm/elements/Breadcrumb.js

@@ -22,7 +22,7 @@ const Breadcrumb = forwardRef((props, ref) => {
     const isLastItem = index === totalChildren - 1;
     if (isLastItem) {
       return React__default.createElement(StyledBreadcrumbItem, {
-        isCurrent: true
+        $isCurrent: true
       }, cloneElement(child, getCurrentPageProps()));
     }
     return React__default.createElement(React__default.Fragment, null, React__default.createElement(StyledBreadcrumbItem, null, child), React__default.createElement(StyledCenteredBreadcrumbItem, null, React__default.createElement(StyledChevronIcon, null)));

package/dist/esm/node_modules/@zendeskgarden/svg-icons/src/12/chevron-right-stroke.svg.js

@@ -7,7 +7,7 @@
 import * as React from 'react';
 
 var _path;
-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); }
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 var SvgChevronRightStroke = function SvgChevronRightStroke(props) {
   return /*#__PURE__*/React.createElement("svg", _extends({
     xmlns: "http://www.w3.org/2000/svg",

package/dist/esm/styled/StyledBreadcrumb.js

@@ -5,18 +5,15 @@
 * found at http://www.apache.org/licenses/LICENSE-2.0.
 */
 import styled from 'styled-components';
-import { retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-theming';
+import { retrieveComponentStyles } from '@zendeskgarden/react-theming';
 
 const COMPONENT_ID = 'breadcrumbs.list';
 const StyledBreadcrumb = styled.ol.attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.9'
+  'data-garden-version': '9.1.0'
 }).withConfig({
   displayName: "StyledBreadcrumb",
   componentId: "sc-11jrinn-0"
 })(["display:flex;margin:0;padding:0;list-style:none;font-size:", ";direction:", ";", ";"], props => props.theme.fontSizes.md, props => props.theme.rtl && 'rtl', props => retrieveComponentStyles(COMPONENT_ID, props));
-StyledBreadcrumb.defaultProps = {
-  theme: DEFAULT_THEME
-};
 
 export { StyledBreadcrumb };

package/dist/esm/styled/StyledBreadcrumbItem.js

@@ -5,33 +5,40 @@
 * found at http://www.apache.org/licenses/LICENSE-2.0.
 */
 import styled, { css } from 'styled-components';
-import { getLineHeight, getColorV8, retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-theming';
+import { retrieveComponentStyles, getLineHeight, getColor } from '@zendeskgarden/react-theming';
 
 const COMPONENT_ID = 'breadcrumbs.item';
-const linkStyles = _ref => {
+const sizeStyles = _ref => {
   let {
-    isCurrent
+    theme
   } = _ref;
-  return css(["& > :link,& > :visited{white-space:inherit;}", ""], isCurrent && `
+  return css(["line-height:", ";white-space:nowrap;& > :link,& > :visited{white-space:inherit;}"], getLineHeight(theme.space.base * 5, theme.fontSizes.md));
+};
+const colorStyles = _ref2 => {
+  let {
+    $isCurrent,
+    theme
+  } = _ref2;
+  return css(["color:", ";", ""], $isCurrent ? getColor({
+    variable: 'foreground.subtle',
+    theme
+  }) : 'inherit', $isCurrent && `
       & > :link,
       & > :visited,
       & > :link:hover,
       & > :visited:hover,
       & > :link:focus,
       & > :visited:focus {
-        color: inherit;
+        color: inherit; /* [1] */
       }
     `);
 };
 const StyledBreadcrumbItem = styled.li.attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.9'
+  'data-garden-version': '9.1.0'
 }).withConfig({
   displayName: "StyledBreadcrumbItem",
   componentId: "sc-r0suq7-0"
-})(["line-height:", ";white-space:nowrap;color:", ";font-size:inherit;", ";", ";"], props => getLineHeight(props.theme.space.base * 5, props.theme.fontSizes.md), props => props.isCurrent ? getColorV8(props.theme.colors.neutralHue, 600) : 'inherit', linkStyles, props => retrieveComponentStyles(COMPONENT_ID, props));
-StyledBreadcrumbItem.defaultProps = {
-  theme: DEFAULT_THEME
-};
+})(["font-size:inherit;", " ", ";", ";"], sizeStyles, colorStyles, props => retrieveComponentStyles(COMPONENT_ID, props));
 
 export { StyledBreadcrumbItem };

package/dist/esm/styled/StyledCenteredBreadcrumbItem.js

@@ -5,7 +5,6 @@
 * found at http://www.apache.org/licenses/LICENSE-2.0.
 */
 import styled from 'styled-components';
-import { DEFAULT_THEME } from '@zendeskgarden/react-theming';
 import { StyledBreadcrumbItem } from './StyledBreadcrumbItem.js';
 
 const StyledCenteredBreadcrumbItem = styled(StyledBreadcrumbItem).attrs({
@@ -14,8 +13,5 @@ const StyledCenteredBreadcrumbItem = styled(StyledBreadcrumbItem).attrs({
   displayName: "StyledCenteredBreadcrumbItem",
   componentId: "sc-1ces9y2-0"
 })(["display:flex;align-items:center;"]);
-StyledCenteredBreadcrumbItem.defaultProps = {
-  theme: DEFAULT_THEME
-};
 
 export { StyledCenteredBreadcrumbItem };

package/dist/esm/styled/StyledChevronIcon.js

@@ -7,7 +7,7 @@
 import React__default from 'react';
 import styled from 'styled-components';
 import { em } from 'polished';
-import { getColorV8, DEFAULT_THEME } from '@zendeskgarden/react-theming';
+import { getColor } from '@zendeskgarden/react-theming';
 import SvgChevronRightStroke from '../node_modules/@zendeskgarden/svg-icons/src/12/chevron-right-stroke.svg.js';
 
 const StyledChevronIcon = styled(_ref => {
@@ -23,9 +23,9 @@ const StyledChevronIcon = styled(_ref => {
 }).withConfig({
   displayName: "StyledChevronIcon",
   componentId: "sc-9r9qrm-0"
-})(["transform:", ";margin:0 ", ";color:", ";"], props => props.theme.rtl && `rotate(180deg);`, props => em(props.theme.space.base, props.theme.fontSizes.md), props => getColorV8('neutralHue', 600, props.theme));
-StyledChevronIcon.defaultProps = {
-  theme: DEFAULT_THEME
-};
+})(["transform:", ";margin:0 ", ";color:", ";"], p => p.theme.rtl && `rotate(180deg);`, p => em(p.theme.space.base, p.theme.fontSizes.md), p => getColor({
+  variable: 'foreground.subtle',
+  theme: p.theme
+}));
 
 export { StyledChevronIcon };

package/dist/index.cjs.js

@@ -38,17 +38,14 @@ var styled__default = /*#__PURE__*/_interopDefault(styled);
 const COMPONENT_ID$1 = 'breadcrumbs.list';
 const StyledBreadcrumb = styled__default.default.ol.attrs({
   'data-garden-id': COMPONENT_ID$1,
-  'data-garden-version': '9.0.0-next.9'
+  'data-garden-version': '9.1.0'
 }).withConfig({
   displayName: "StyledBreadcrumb",
   componentId: "sc-11jrinn-0"
 })(["display:flex;margin:0;padding:0;list-style:none;font-size:", ";direction:", ";", ";"], props => props.theme.fontSizes.md, props => props.theme.rtl && 'rtl', props => reactTheming.retrieveComponentStyles(COMPONENT_ID$1, props));
-StyledBreadcrumb.defaultProps = {
-  theme: reactTheming.DEFAULT_THEME
-};
 
 var _path;
-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); }
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 var SvgChevronRightStroke = function SvgChevronRightStroke(props) {
   return /*#__PURE__*/React__namespace.createElement("svg", _extends({
     xmlns: "http://www.w3.org/2000/svg",
@@ -76,37 +73,44 @@ const StyledChevronIcon = styled__default.default(_ref => {
 }).withConfig({
   displayName: "StyledChevronIcon",
   componentId: "sc-9r9qrm-0"
-})(["transform:", ";margin:0 ", ";color:", ";"], props => props.theme.rtl && `rotate(180deg);`, props => polished.em(props.theme.space.base, props.theme.fontSizes.md), props => reactTheming.getColorV8('neutralHue', 600, props.theme));
-StyledChevronIcon.defaultProps = {
-  theme: reactTheming.DEFAULT_THEME
-};
+})(["transform:", ";margin:0 ", ";color:", ";"], p => p.theme.rtl && `rotate(180deg);`, p => polished.em(p.theme.space.base, p.theme.fontSizes.md), p => reactTheming.getColor({
+  variable: 'foreground.subtle',
+  theme: p.theme
+}));
 
 const COMPONENT_ID = 'breadcrumbs.item';
-const linkStyles = _ref => {
+const sizeStyles = _ref => {
   let {
-    isCurrent
+    theme
   } = _ref;
-  return styled.css(["& > :link,& > :visited{white-space:inherit;}", ""], isCurrent && `
+  return styled.css(["line-height:", ";white-space:nowrap;& > :link,& > :visited{white-space:inherit;}"], reactTheming.getLineHeight(theme.space.base * 5, theme.fontSizes.md));
+};
+const colorStyles = _ref2 => {
+  let {
+    $isCurrent,
+    theme
+  } = _ref2;
+  return styled.css(["color:", ";", ""], $isCurrent ? reactTheming.getColor({
+    variable: 'foreground.subtle',
+    theme
+  }) : 'inherit', $isCurrent && `
       & > :link,
       & > :visited,
       & > :link:hover,
       & > :visited:hover,
       & > :link:focus,
       & > :visited:focus {
-        color: inherit;
+        color: inherit; /* [1] */
       }
     `);
 };
 const StyledBreadcrumbItem = styled__default.default.li.attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.9'
+  'data-garden-version': '9.1.0'
 }).withConfig({
   displayName: "StyledBreadcrumbItem",
   componentId: "sc-r0suq7-0"
-})(["line-height:", ";white-space:nowrap;color:", ";font-size:inherit;", ";", ";"], props => reactTheming.getLineHeight(props.theme.space.base * 5, props.theme.fontSizes.md), props => props.isCurrent ? reactTheming.getColorV8(props.theme.colors.neutralHue, 600) : 'inherit', linkStyles, props => reactTheming.retrieveComponentStyles(COMPONENT_ID, props));
-StyledBreadcrumbItem.defaultProps = {
-  theme: reactTheming.DEFAULT_THEME
-};
+})(["font-size:inherit;", " ", ";", ";"], sizeStyles, colorStyles, props => reactTheming.retrieveComponentStyles(COMPONENT_ID, props));
 
 const StyledCenteredBreadcrumbItem = styled__default.default(StyledBreadcrumbItem).attrs({
   'aria-hidden': true
@@ -114,9 +118,6 @@ const StyledCenteredBreadcrumbItem = styled__default.default(StyledBreadcrumbIte
   displayName: "StyledCenteredBreadcrumbItem",
   componentId: "sc-1ces9y2-0"
 })(["display:flex;align-items:center;"]);
-StyledCenteredBreadcrumbItem.defaultProps = {
-  theme: reactTheming.DEFAULT_THEME
-};
 
 const Breadcrumb = React.forwardRef((props, ref) => {
   const {
@@ -128,7 +129,7 @@ const Breadcrumb = React.forwardRef((props, ref) => {
     const isLastItem = index === totalChildren - 1;
     if (isLastItem) {
       return React__namespace.default.createElement(StyledBreadcrumbItem, {
-        isCurrent: true
+        $isCurrent: true
       }, React.cloneElement(child, getCurrentPageProps()));
     }
     return React__namespace.default.createElement(React__namespace.default.Fragment, null, React__namespace.default.createElement(StyledBreadcrumbItem, null, child), React__namespace.default.createElement(StyledCenteredBreadcrumbItem, null, React__namespace.default.createElement(StyledChevronIcon, null)));

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

@@ -4,10 +4,11 @@
  * 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 { DefaultTheme } from 'styled-components';
 export interface IStyledBreadcrumbItemProps {
-    isCurrent?: boolean;
+    $isCurrent?: boolean;
 }
-export declare const StyledBreadcrumbItem: import("styled-components").StyledComponent<"li", import("styled-components").DefaultTheme, {
+export declare const StyledBreadcrumbItem: import("styled-components").StyledComponent<"li", DefaultTheme, {
     'data-garden-id': string;
     'data-garden-version': string;
 } & IStyledBreadcrumbItemProps, "data-garden-id" | "data-garden-version">;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zendeskgarden/react-breadcrumbs",
-  "version": "9.0.0-next.9",
+  "version": "9.1.0",
   "description": "Components relating to breadcrumbs in the Garden Design System",
   "license": "Apache-2.0",
   "author": "Zendesk Garden <garden@zendesk.com>",
@@ -21,19 +21,19 @@
   "sideEffects": false,
   "types": "dist/typings/index.d.ts",
   "dependencies": {
-    "@zendeskgarden/container-breadcrumb": "^1.0.0",
-    "polished": "^4.0.0",
+    "@zendeskgarden/container-breadcrumb": "^1.0.8",
+    "polished": "^4.3.1",
     "prop-types": "^15.5.7"
   },
   "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.9",
-    "@zendeskgarden/svg-icons": "7.0.0"
+    "@zendeskgarden/react-theming": "^9.1.0",
+    "@zendeskgarden/svg-icons": "7.3.0"
   },
   "keywords": [
     "components",
@@ -45,5 +45,5 @@
     "access": "public"
   },
   "zendeskgarden:src": "src/index.ts",
-  "gitHead": "771281b562d376a6aee04b0cd71dd888b3ae4a1d"
+  "gitHead": "a2842d18615ad057d75988fde4df5a0c79d2714e"
 }