carbon-react 142.5.1 → 142.7.0

package/esm/components/breadcrumbs/__internal__/breadcrumbs.context.d.ts

@@ -0,0 +1,6 @@
+import React from "react";
+export declare type BreadcrumbsContextType = {
+    isDarkBackground: boolean;
+};
+declare const BreadcrumbsContext: React.Context<BreadcrumbsContextType>;
+export default BreadcrumbsContext;

package/esm/components/breadcrumbs/__internal__/breadcrumbs.context.js

@@ -0,0 +1,5 @@
+import React from "react";
+const BreadcrumbsContext = /*#__PURE__*/React.createContext({
+  isDarkBackground: false
+});
+export default BreadcrumbsContext;

package/esm/components/breadcrumbs/breadcrumbs.component.d.ts

@@ -4,6 +4,8 @@ import { TagProps } from "../../__internal__/utils/helpers/tags";
 export interface BreadcrumbsProps extends TagProps, SpaceProps {
     /** Child crumbs to display */
     children: React.ReactNode;
+    /** Sets the colour styling when component is rendered on a dark background */
+    isDarkBackground?: boolean;
 }
 export declare const Breadcrumbs: React.ForwardRefExoticComponent<BreadcrumbsProps & React.RefAttributes<HTMLElement>>;
 export default Breadcrumbs;

package/esm/components/breadcrumbs/breadcrumbs.component.js

@@ -4,17 +4,23 @@ import PropTypes from "prop-types";
 import tagComponent from "../../__internal__/utils/helpers/tags";
 import StyledBreadcrumbs from "./breadcrumbs.style";
 import useLocale from "../../hooks/__internal__/useLocale";
+import BreadcrumbsContext from "./__internal__/breadcrumbs.context";
 const Breadcrumbs = /*#__PURE__*/React.forwardRef(({
   children,
+  isDarkBackground = false,
   ...rest
 }, ref) => {
   const l = useLocale();
-  return /*#__PURE__*/React.createElement(StyledBreadcrumbs, _extends({
+  return /*#__PURE__*/React.createElement(BreadcrumbsContext.Provider, {
+    value: {
+      isDarkBackground
+    }
+  }, /*#__PURE__*/React.createElement(StyledBreadcrumbs, _extends({
     ref: ref,
     role: "navigation"
   }, tagComponent("breadcrumbs", rest), {
     "aria-label": l.breadcrumbs.ariaLabel()
-  }, rest), /*#__PURE__*/React.createElement("ol", null, children));
+  }, rest), /*#__PURE__*/React.createElement("ol", null, children)));
 });
 if (process.env.NODE_ENV !== "production") {
   Breadcrumbs.propTypes = {
@@ -22,6 +28,7 @@ if (process.env.NODE_ENV !== "production") {
     "data-component": PropTypes.string,
     "data-element": PropTypes.string,
     "data-role": PropTypes.string,
+    "isDarkBackground": PropTypes.bool,
     "m": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
       "__@toStringTag": PropTypes.string.isRequired,
       "description": PropTypes.string,

package/esm/components/breadcrumbs/crumb/crumb.component.js

@@ -1,22 +1,33 @@
 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); }
-import React from "react";
+import React, { useContext } from "react";
 import PropTypes from "prop-types";
 import tagComponent from "../../../__internal__/utils/helpers/tags";
 import { StyledCrumb, Divider } from "./crumb.style";
+import BreadcrumbsContext from "../__internal__/breadcrumbs.context";
 const Crumb = /*#__PURE__*/React.forwardRef(({
   href,
   isCurrent,
   children,
   onClick,
   ...rest
-}, ref) => /*#__PURE__*/React.createElement("li", null, /*#__PURE__*/React.createElement(StyledCrumb, _extends({
-  ref: ref,
-  isCurrent: isCurrent,
-  "aria-current": isCurrent ? "page" : undefined
-}, tagComponent("crumb", rest), rest, !isCurrent && {
-  href,
-  onClick
-}), children), !isCurrent && /*#__PURE__*/React.createElement(Divider, null)));
+}, ref) => {
+  const {
+    isDarkBackground
+  } = useContext(BreadcrumbsContext);
+  return /*#__PURE__*/React.createElement("li", null, /*#__PURE__*/React.createElement(StyledCrumb, _extends({
+    ref: ref,
+    isCurrent: isCurrent,
+    "aria-current": isCurrent ? "page" : undefined,
+    isDarkBackground: isDarkBackground
+  }, tagComponent("crumb", rest), rest, !isCurrent && {
+    href,
+    onClick
+  }), children), !isCurrent && /*#__PURE__*/React.createElement(Divider, {
+    "data-role": "crumb-divider",
+    "aria-hidden": "true",
+    isDarkBackground: isDarkBackground
+  }));
+});
 if (process.env.NODE_ENV !== "production") {
   Crumb.propTypes = {
     "aria-activedescendant": PropTypes.string,

package/esm/components/breadcrumbs/crumb/crumb.style.d.ts

@@ -2,17 +2,15 @@
 import { LinkProps } from "../../link";
 interface StyleCrumbProps extends LinkProps {
     isCurrent?: boolean;
+    isDarkBackground: boolean;
 }
 export declare const StyledCrumb: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<LinkProps & import("react").RefAttributes<HTMLButtonElement | HTMLLinkElement>>, any, StyleCrumbProps, never>;
-export declare const Divider: import("styled-components").StyledComponent<"span", any, {
-    children: "/";
-    "aria-hidden": "true";
-}, "aria-hidden" | "children">;
+interface DividerProps {
+    isDarkBackground: boolean;
+}
+export declare const Divider: import("styled-components").StyledComponent<"span", any, DividerProps, never>;
 declare const _default: {
     StyledCrumb: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<LinkProps & import("react").RefAttributes<HTMLButtonElement | HTMLLinkElement>>, any, StyleCrumbProps, never>;
-    Divider: import("styled-components").StyledComponent<"span", any, {
-        children: "/";
-        "aria-hidden": "true";
-    }, "aria-hidden" | "children">;
+    Divider: import("styled-components").StyledComponent<"span", any, DividerProps, never>;
 };
 export default _default;

package/esm/components/breadcrumbs/crumb/crumb.style.js

@@ -1,31 +1,38 @@
 import styled, { css } from "styled-components";
 import Link from "../../link";
+const getCurrentCrumbColor = isDarkBackground => {
+  return isDarkBackground ? "var(--colorsUtilityYang100)" : "var(--colorsUtilityYin090)";
+};
 export const StyledCrumb = styled(Link)`
   font: var(--typographyLinkTextM);
   ${({
-  isCurrent
+  isCurrent,
+  isDarkBackground
 }) => isCurrent && css`
       a {
-        color: var(--colorsUtilityYin090);
+        color: ${getCurrentCrumbColor(isDarkBackground)};
         text-decoration: none;
         font: var(--typographyBreadcrumbCurrentPageM);
-        cursor: text;
         :hover {
-          color: var(--colorsUtilityYin090);
+          color: ${getCurrentCrumbColor(isDarkBackground)};
           text-decoration: none;
           cursor: text;
         }
       }
     `}
 `;
-export const Divider = styled.span.attrs({
-  children: "/",
-  "aria-hidden": "true"
-})`
-  margin: 0px var(--spacing050) 0px var(--spacing100);
-  line-height: 16px;
-  font: var(--typographyBreadcrumbSeparatorM);
-  color: var(--colorsUtilityYin055);
+export const Divider = styled.span`
+  ::after {
+    content: "/";
+    margin: 0px var(--spacing050) 0px var(--spacing100);
+    line-height: 16px;
+    font: var(--typographyBreadcrumbSeparatorM);
+    ${({
+  isDarkBackground
+}) => css`
+        color: ${isDarkBackground ? "var(--colorsUtilityYang100)" : "var(--colorsUtilityYin055)"};
+      `}
+  }
 `;
 export default {
   StyledCrumb,

package/esm/components/menu/__internal__/menu.context.d.ts

@@ -3,7 +3,7 @@ export declare type MenuType = "light" | "dark" | "white" | "black";
 export interface MenuContextProps {
     menuType: MenuType;
     openSubmenuId: string | null;
-    inMenu: boolean;
+    inMenu?: boolean;
     inFullscreenView?: boolean;
     setOpenSubmenuId: (id: string | null) => void;
     registerItem?: (id: string) => void;

package/esm/components/menu/__internal__/menu.context.js

@@ -1,7 +1,6 @@
 import React from "react";
 export default /*#__PURE__*/React.createContext({
   menuType: "light",
-  inMenu: false,
   openSubmenuId: null,
   setOpenSubmenuId: /* istanbul ignore next */() => {}
 });

package/esm/components/vertical-divider/vertical-divider.component.d.ts

@@ -12,9 +12,14 @@ export interface VerticalDividerProps extends SpaceProps {
     displayInline?: boolean;
     /** Custom tint of the divider, the supported rage is 1-100 */
     tint?: TintRange;
+    /**
+     * Set the divider to be hidden from screen readers.
+     * Please note that this cannot be overridden when inside a Menu.
+     * */
+    "aria-hidden"?: boolean;
 }
 export declare const VerticalDivider: {
-    ({ h, height, displayInline, tint, ...props }: VerticalDividerProps): JSX.Element;
+    ({ h, height, displayInline, tint, "aria-hidden": ariaHidden, ...props }: VerticalDividerProps): JSX.Element;
     displayName: string;
 };
 export default VerticalDivider;

package/esm/components/vertical-divider/vertical-divider.component.js

@@ -8,6 +8,7 @@ const VerticalDivider = ({
   height,
   displayInline = false,
   tint = 80,
+  "aria-hidden": ariaHidden,
   ...props
 }) => {
   const {
@@ -21,7 +22,7 @@ const VerticalDivider = ({
     displayInline: displayInline
   }, props, {
     as: inMenu ? "li" : "div",
-    "aria-hidden": !!inMenu
+    "aria-hidden": inMenu ?? ariaHidden
   }), /*#__PURE__*/React.createElement(StyledDivider, {
     "data-role": "divider",
     tint: tint
@@ -29,6 +30,7 @@ const VerticalDivider = ({
 };
 if (process.env.NODE_ENV !== "production") {
   VerticalDivider.propTypes = {
+    "aria-hidden": PropTypes.bool,
     "displayInline": PropTypes.bool,
     "h": PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
     "height": PropTypes.oneOfType([PropTypes.number, PropTypes.string]),

package/lib/components/breadcrumbs/__internal__/breadcrumbs.context.d.ts

@@ -0,0 +1,6 @@
+import React from "react";
+export declare type BreadcrumbsContextType = {
+    isDarkBackground: boolean;
+};
+declare const BreadcrumbsContext: React.Context<BreadcrumbsContextType>;
+export default BreadcrumbsContext;

package/lib/components/breadcrumbs/__internal__/breadcrumbs.context.js

@@ -0,0 +1,12 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const BreadcrumbsContext = /*#__PURE__*/_react.default.createContext({
+  isDarkBackground: false
+});
+var _default = exports.default = BreadcrumbsContext;

package/lib/components/breadcrumbs/breadcrumbs.component.d.ts

@@ -4,6 +4,8 @@ import { TagProps } from "../../__internal__/utils/helpers/tags";
 export interface BreadcrumbsProps extends TagProps, SpaceProps {
     /** Child crumbs to display */
     children: React.ReactNode;
+    /** Sets the colour styling when component is rendered on a dark background */
+    isDarkBackground?: boolean;
 }
 export declare const Breadcrumbs: React.ForwardRefExoticComponent<BreadcrumbsProps & React.RefAttributes<HTMLElement>>;
 export default Breadcrumbs;

package/lib/components/breadcrumbs/breadcrumbs.component.js

@@ -9,19 +9,25 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 var _tags = _interopRequireDefault(require("../../__internal__/utils/helpers/tags"));
 var _breadcrumbs = _interopRequireDefault(require("./breadcrumbs.style"));
 var _useLocale = _interopRequireDefault(require("../../hooks/__internal__/useLocale"));
+var _breadcrumbs2 = _interopRequireDefault(require("./__internal__/breadcrumbs.context"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 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); }
 const Breadcrumbs = exports.Breadcrumbs = /*#__PURE__*/_react.default.forwardRef(({
   children,
+  isDarkBackground = false,
   ...rest
 }, ref) => {
   const l = (0, _useLocale.default)();
-  return /*#__PURE__*/_react.default.createElement(_breadcrumbs.default, _extends({
+  return /*#__PURE__*/_react.default.createElement(_breadcrumbs2.default.Provider, {
+    value: {
+      isDarkBackground
+    }
+  }, /*#__PURE__*/_react.default.createElement(_breadcrumbs.default, _extends({
     ref: ref,
     role: "navigation"
   }, (0, _tags.default)("breadcrumbs", rest), {
     "aria-label": l.breadcrumbs.ariaLabel()
-  }, rest), /*#__PURE__*/_react.default.createElement("ol", null, children));
+  }, rest), /*#__PURE__*/_react.default.createElement("ol", null, children)));
 });
 if (process.env.NODE_ENV !== "production") {
   Breadcrumbs.propTypes = {
@@ -29,6 +35,7 @@ if (process.env.NODE_ENV !== "production") {
     "data-component": _propTypes.default.string,
     "data-element": _propTypes.default.string,
     "data-role": _propTypes.default.string,
+    "isDarkBackground": _propTypes.default.bool,
     "m": _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf([null]), _propTypes.default.number, _propTypes.default.shape({
       "__@toStringTag": _propTypes.default.string.isRequired,
       "description": _propTypes.default.string,

package/lib/components/breadcrumbs/crumb/crumb.component.js

@@ -4,11 +4,14 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _tags = _interopRequireDefault(require("../../../__internal__/utils/helpers/tags"));
 var _crumb = require("./crumb.style");
+var _breadcrumbs = _interopRequireDefault(require("../__internal__/breadcrumbs.context"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 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); }
 const Crumb = /*#__PURE__*/_react.default.forwardRef(({
   href,
@@ -16,14 +19,24 @@ const Crumb = /*#__PURE__*/_react.default.forwardRef(({
   children,
   onClick,
   ...rest
-}, ref) => /*#__PURE__*/_react.default.createElement("li", null, /*#__PURE__*/_react.default.createElement(_crumb.StyledCrumb, _extends({
-  ref: ref,
-  isCurrent: isCurrent,
-  "aria-current": isCurrent ? "page" : undefined
-}, (0, _tags.default)("crumb", rest), rest, !isCurrent && {
-  href,
-  onClick
-}), children), !isCurrent && /*#__PURE__*/_react.default.createElement(_crumb.Divider, null)));
+}, ref) => {
+  const {
+    isDarkBackground
+  } = (0, _react.useContext)(_breadcrumbs.default);
+  return /*#__PURE__*/_react.default.createElement("li", null, /*#__PURE__*/_react.default.createElement(_crumb.StyledCrumb, _extends({
+    ref: ref,
+    isCurrent: isCurrent,
+    "aria-current": isCurrent ? "page" : undefined,
+    isDarkBackground: isDarkBackground
+  }, (0, _tags.default)("crumb", rest), rest, !isCurrent && {
+    href,
+    onClick
+  }), children), !isCurrent && /*#__PURE__*/_react.default.createElement(_crumb.Divider, {
+    "data-role": "crumb-divider",
+    "aria-hidden": "true",
+    isDarkBackground: isDarkBackground
+  }));
+});
 if (process.env.NODE_ENV !== "production") {
   Crumb.propTypes = {
     "aria-activedescendant": _propTypes.default.string,

package/lib/components/breadcrumbs/crumb/crumb.style.d.ts

@@ -2,17 +2,15 @@
 import { LinkProps } from "../../link";
 interface StyleCrumbProps extends LinkProps {
     isCurrent?: boolean;
+    isDarkBackground: boolean;
 }
 export declare const StyledCrumb: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<LinkProps & import("react").RefAttributes<HTMLButtonElement | HTMLLinkElement>>, any, StyleCrumbProps, never>;
-export declare const Divider: import("styled-components").StyledComponent<"span", any, {
-    children: "/";
-    "aria-hidden": "true";
-}, "aria-hidden" | "children">;
+interface DividerProps {
+    isDarkBackground: boolean;
+}
+export declare const Divider: import("styled-components").StyledComponent<"span", any, DividerProps, never>;
 declare const _default: {
     StyledCrumb: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<LinkProps & import("react").RefAttributes<HTMLButtonElement | HTMLLinkElement>>, any, StyleCrumbProps, never>;
-    Divider: import("styled-components").StyledComponent<"span", any, {
-        children: "/";
-        "aria-hidden": "true";
-    }, "aria-hidden" | "children">;
+    Divider: import("styled-components").StyledComponent<"span", any, DividerProps, never>;
 };
 export default _default;

package/lib/components/breadcrumbs/crumb/crumb.style.js

@@ -9,32 +9,39 @@ var _link = _interopRequireDefault(require("../../link"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+const getCurrentCrumbColor = isDarkBackground => {
+  return isDarkBackground ? "var(--colorsUtilityYang100)" : "var(--colorsUtilityYin090)";
+};
 const StyledCrumb = exports.StyledCrumb = (0, _styledComponents.default)(_link.default)`
   font: var(--typographyLinkTextM);
   ${({
-  isCurrent
+  isCurrent,
+  isDarkBackground
 }) => isCurrent && (0, _styledComponents.css)`
       a {
-        color: var(--colorsUtilityYin090);
+        color: ${getCurrentCrumbColor(isDarkBackground)};
         text-decoration: none;
         font: var(--typographyBreadcrumbCurrentPageM);
-        cursor: text;
         :hover {
-          color: var(--colorsUtilityYin090);
+          color: ${getCurrentCrumbColor(isDarkBackground)};
           text-decoration: none;
           cursor: text;
         }
       }
     `}
 `;
-const Divider = exports.Divider = _styledComponents.default.span.attrs({
-  children: "/",
-  "aria-hidden": "true"
-})`
-  margin: 0px var(--spacing050) 0px var(--spacing100);
-  line-height: 16px;
-  font: var(--typographyBreadcrumbSeparatorM);
-  color: var(--colorsUtilityYin055);
+const Divider = exports.Divider = _styledComponents.default.span`
+  ::after {
+    content: "/";
+    margin: 0px var(--spacing050) 0px var(--spacing100);
+    line-height: 16px;
+    font: var(--typographyBreadcrumbSeparatorM);
+    ${({
+  isDarkBackground
+}) => (0, _styledComponents.css)`
+        color: ${isDarkBackground ? "var(--colorsUtilityYang100)" : "var(--colorsUtilityYin055)"};
+      `}
+  }
 `;
 var _default = exports.default = {
   StyledCrumb,

package/lib/components/menu/__internal__/menu.context.d.ts

@@ -3,7 +3,7 @@ export declare type MenuType = "light" | "dark" | "white" | "black";
 export interface MenuContextProps {
     menuType: MenuType;
     openSubmenuId: string | null;
-    inMenu: boolean;
+    inMenu?: boolean;
     inFullscreenView?: boolean;
     setOpenSubmenuId: (id: string | null) => void;
     registerItem?: (id: string) => void;

package/lib/components/menu/__internal__/menu.context.js

@@ -8,7 +8,6 @@ var _react = _interopRequireDefault(require("react"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 var _default = exports.default = /*#__PURE__*/_react.default.createContext({
   menuType: "light",
-  inMenu: false,
   openSubmenuId: null,
   setOpenSubmenuId: /* istanbul ignore next */() => {}
 });

package/lib/components/vertical-divider/vertical-divider.component.d.ts

@@ -12,9 +12,14 @@ export interface VerticalDividerProps extends SpaceProps {
     displayInline?: boolean;
     /** Custom tint of the divider, the supported rage is 1-100 */
     tint?: TintRange;
+    /**
+     * Set the divider to be hidden from screen readers.
+     * Please note that this cannot be overridden when inside a Menu.
+     * */
+    "aria-hidden"?: boolean;
 }
 export declare const VerticalDivider: {
-    ({ h, height, displayInline, tint, ...props }: VerticalDividerProps): JSX.Element;
+    ({ h, height, displayInline, tint, "aria-hidden": ariaHidden, ...props }: VerticalDividerProps): JSX.Element;
     displayName: string;
 };
 export default VerticalDivider;

package/lib/components/vertical-divider/vertical-divider.component.js

@@ -17,6 +17,7 @@ const VerticalDivider = ({
   height,
   displayInline = false,
   tint = 80,
+  "aria-hidden": ariaHidden,
   ...props
 }) => {
   const {
@@ -30,7 +31,7 @@ const VerticalDivider = ({
     displayInline: displayInline
   }, props, {
     as: inMenu ? "li" : "div",
-    "aria-hidden": !!inMenu
+    "aria-hidden": inMenu ?? ariaHidden
   }), /*#__PURE__*/_react.default.createElement(_verticalDivider.StyledDivider, {
     "data-role": "divider",
     tint: tint
@@ -39,6 +40,7 @@ const VerticalDivider = ({
 exports.VerticalDivider = VerticalDivider;
 if (process.env.NODE_ENV !== "production") {
   VerticalDivider.propTypes = {
+    "aria-hidden": _propTypes.default.bool,
     "displayInline": _propTypes.default.bool,
     "h": _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),
     "height": _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "carbon-react",
-  "version": "142.5.1",
+  "version": "142.7.0",
   "description": "A library of reusable React components for easily building user interfaces.",
   "files": [
     "lib",