carbon-react 117.1.2 → 117.2.1

package/esm/components/advanced-color-picker/advanced-color-picker.component.js

@@ -2,10 +2,13 @@ function _extends() { _extends = Object.assign || function (target) { for (var i
 
 import React, { useState, useEffect, useCallback, useRef } from "react";
 import PropTypes from "prop-types";
-import { StyledAdvancedColorPickerWrapper, StyledAdvancedColorPickerCell, StyledAdvancedColorPickerPreview, DialogStyle } from "./advanced-color-picker.style";
+import { StyledAdvancedColorPickerWrapper, HiddenCurrentColorList, StyledAdvancedColorPickerCell, StyledAdvancedColorPickerPreview, DialogStyle } from "./advanced-color-picker.style";
 import { SimpleColorPicker, SimpleColor } from "../simple-color-picker";
 import Events from "../../__internal__/utils/helpers/events";
 import { filterStyledSystemMarginProps } from "../../style/utils";
+import guid from "../../__internal__/utils/helpers/guid";
+import useLocale from "../../hooks/__internal__/useLocale";
+import { Dt, Dd } from "../definition-list";
 
 const AdvancedColorPicker = ({
   "aria-describedby": ariaDescribedBy,
@@ -26,6 +29,8 @@ const AdvancedColorPicker = ({
   const [dialogOpen, setDialogOpen] = useState();
   const currentColor = selectedColor || defaultColor;
   const [selectedColorRef, setSelectedColorRef] = useState(null);
+  const descriptionId = useRef(guid());
+  const l = useLocale();
   const simpleColorPickerData = useRef(null);
   const colors = availableColors.map(({
     value,
@@ -41,6 +46,14 @@ const AdvancedColorPicker = ({
       simpleColorPickerData.current ? simpleColorPickerData.current.gridItemRefs[index] : null
     };
   });
+
+  const currentSelectedColor = () => {
+    var _availableColors$find;
+
+    const returnedColor = (_availableColors$find = availableColors.find(color => color.value === currentColor)) === null || _availableColors$find === void 0 ? void 0 : _availableColors$find.label;
+    return returnedColor || currentColor;
+  };
+
   useEffect(() => {
     if (dialogOpen || open) {
       const newColor = colors === null || colors === void 0 ? void 0 : colors.find(c => currentColor === c.value);
@@ -114,11 +127,16 @@ const AdvancedColorPicker = ({
     m: "15px auto auto 15px"
   }, filterStyledSystemMarginProps(props)), /*#__PURE__*/React.createElement(StyledAdvancedColorPickerCell, {
     "data-element": "color-picker-cell",
+    "aria-label": l.advancedColorPicker.ariaLabel(),
+    "aria-describedby": descriptionId.current,
     onClick: handleOnOpen,
     onKeyDown: handleOnKeyDown,
     color: currentColor,
     tabIndex: 0
-  }), /*#__PURE__*/React.createElement(DialogStyle, {
+  }), /*#__PURE__*/React.createElement(HiddenCurrentColorList, {
+    id: descriptionId.current,
+    "data-element": "current-color-description"
+  }, /*#__PURE__*/React.createElement(Dt, null, l.advancedColorPicker.currentColorDescriptionTerm(currentSelectedColor())), /*#__PURE__*/React.createElement(Dd, null, l.advancedColorPicker.currentColorAssigned(currentSelectedColor()))), /*#__PURE__*/React.createElement(DialogStyle, {
     "aria-describedby": ariaDescribedBy,
     "aria-label": ariaLabel,
     "aria-labelledby": ariaLabelledBy,

package/esm/components/advanced-color-picker/advanced-color-picker.style.d.ts

@@ -1,6 +1,11 @@
 /// <reference types="react" />
 import StyledAdvancedColorPickerCell from "./advanced-color-picker-cell.style";
 declare const StyledAdvancedColorPickerWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
+/** To be replaced by accessibly hidden class added in FE-5503 */
+declare const HiddenCurrentColorList: import("styled-components").StyledComponent<{
+    ({ children, w, dtTextAlign, ddTextAlign, asSingleColumn, ...rest }: import("../definition-list").DlProps): JSX.Element;
+    displayName: string;
+}, any, {}, never>;
 declare const StyledAdvancedColorPickerPreview: import("styled-components").StyledComponent<"div", any, {}, never>;
 declare const DialogStyle: import("styled-components").StyledComponent<({ className, children, open, height, size, title, disableEscKey, subtitle, disableAutoFocus, focusFirstElement, focusableSelectors, onCancel, showCloseIcon, bespokeFocusTrap, disableClose, help, role, contentPadding, focusableContainers, ...rest }: import("../dialog/dialog.component").DialogProps) => JSX.Element, any, {}, never>;
-export { StyledAdvancedColorPickerWrapper, StyledAdvancedColorPickerCell, StyledAdvancedColorPickerPreview, DialogStyle, };
+export { StyledAdvancedColorPickerWrapper, HiddenCurrentColorList, StyledAdvancedColorPickerCell, StyledAdvancedColorPickerPreview, DialogStyle, };

package/esm/components/advanced-color-picker/advanced-color-picker.style.js

@@ -8,10 +8,17 @@ import Dialog from "../dialog/dialog.component";
 import StyledIconButton from "../icon-button/icon-button.style";
 import checkerBoardSvg from "../simple-color-picker/simple-color/checker-board.svg";
 import baseTheme from "../../style/themes/base";
+import visuallyHiddenStyles from "../../style/utils/visually-hidden";
+import { Dl } from "../definition-list";
 const StyledAdvancedColorPickerWrapper = styled.div`
   ${margin}
   display: inline-block;
 `;
+/** To be replaced by accessibly hidden class added in FE-5503 */
+
+const HiddenCurrentColorList = styled(Dl)`
+  ${visuallyHiddenStyles}
+`;
 StyledAdvancedColorPickerWrapper.defaultProps = {
   theme: baseTheme
 };
@@ -75,4 +82,4 @@ const DialogStyle = styled(Dialog)`
     color: var(--colorsActionMinor500);
   }
 `;
-export { StyledAdvancedColorPickerWrapper, StyledAdvancedColorPickerCell, StyledAdvancedColorPickerPreview, DialogStyle };
+export { StyledAdvancedColorPickerWrapper, HiddenCurrentColorList, StyledAdvancedColorPickerCell, StyledAdvancedColorPickerPreview, DialogStyle };

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

@@ -0,0 +1,8 @@
+import React from "react";
+import { TagProps } from "../../__internal__/utils/helpers/tags";
+export interface BreadcrumbsProps extends TagProps {
+    /** Child crumbs to display */
+    children: React.ReactNode;
+}
+export declare const Breadcrumbs: React.ForwardRefExoticComponent<BreadcrumbsProps & React.RefAttributes<HTMLElement>>;
+export default Breadcrumbs;

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

@@ -0,0 +1,28 @@
+function _extends() { _extends = Object.assign || 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); }
+
+import React from "react";
+import PropTypes from "prop-types";
+import tagComponent from "../../__internal__/utils/helpers/tags";
+import StyledBreadcrumbs from "./breadcrumbs.style";
+import useLocale from "../../hooks/__internal__/useLocale";
+const Breadcrumbs = /*#__PURE__*/React.forwardRef(({
+  children,
+  ...rest
+}, ref) => {
+  const l = useLocale();
+  return /*#__PURE__*/React.createElement(StyledBreadcrumbs, _extends({
+    ref: ref,
+    role: "navigation"
+  }, tagComponent("breadcrumbs", rest), {
+    "aria-label": l.breadcrumbs.ariaLabel()
+  }), /*#__PURE__*/React.createElement("ol", null, children));
+});
+Breadcrumbs.propTypes = {
+  "children": PropTypes.node,
+  "data-component": PropTypes.string,
+  "data-element": PropTypes.string,
+  "data-role": PropTypes.string
+};
+export { Breadcrumbs };
+Breadcrumbs.displayName = "Breadcrumbs";
+export default Breadcrumbs;

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

@@ -0,0 +1,2 @@
+declare const StyledBreadcrumbs: import("styled-components").StyledComponent<"nav", any, {}, never>;
+export default StyledBreadcrumbs;

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

@@ -0,0 +1,9 @@
+import styled from "styled-components";
+const StyledBreadcrumbs = styled.nav`
+  ol {
+    list-style: none;
+    display: flex;
+    flex-wrap: wrap;
+  }
+`;
+export default StyledBreadcrumbs;

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

@@ -0,0 +1,11 @@
+import { LinkProps } from "components/link/link.component";
+import React from "react";
+import { TagProps } from "../../../__internal__/utils/helpers/tags";
+export interface CrumbProps extends Omit<LinkProps, "tooltipMessage" | "tooltipPosition" | "iconType" | "iconAlign" | "isSkipLink" | "isDarkBackground" | "ariaLabel" | "className" | "variant" | "target" | "rel" | "icon" | "disabled">, TagProps {
+    /** This sets the Crumb to current, does not render Link */
+    isCurrent?: boolean;
+    /** The href string for Crumb Link */
+    href: string;
+}
+declare const Crumb: React.ForwardRefExoticComponent<CrumbProps & React.RefAttributes<HTMLLinkElement>>;
+export default Crumb;

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

@@ -0,0 +1,80 @@
+function _extends() { _extends = Object.assign || 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); }
+
+import React from "react";
+import PropTypes from "prop-types";
+import tagComponent from "../../../__internal__/utils/helpers/tags";
+import { StyledCrumb, Divider } from "./crumb.style";
+const Crumb = /*#__PURE__*/React.forwardRef(({
+  href,
+  isCurrent,
+  children,
+  ...rest
+}, ref) => /*#__PURE__*/React.createElement("li", null, /*#__PURE__*/React.createElement(StyledCrumb, _extends({
+  ref: ref,
+  isCurrent: isCurrent,
+  "aria-current": isCurrent ? "page" : undefined
+}, tagComponent("crumb", rest), !isCurrent && {
+  href
+}), children), !isCurrent && /*#__PURE__*/React.createElement(Divider, null)));
+Crumb.propTypes = {
+  "aria-activedescendant": PropTypes.string,
+  "aria-atomic": PropTypes.oneOfType([PropTypes.oneOf(["false", "true"]), PropTypes.bool]),
+  "aria-autocomplete": PropTypes.oneOf(["both", "inline", "list", "none"]),
+  "aria-busy": PropTypes.oneOfType([PropTypes.oneOf(["false", "true"]), PropTypes.bool]),
+  "aria-checked": PropTypes.oneOfType([PropTypes.oneOf(["false", "mixed", "true"]), PropTypes.bool]),
+  "aria-colcount": PropTypes.number,
+  "aria-colindex": PropTypes.number,
+  "aria-colspan": PropTypes.number,
+  "aria-controls": PropTypes.string,
+  "aria-current": PropTypes.oneOfType([PropTypes.oneOf(["date", "false", "location", "page", "step", "time", "true"]), PropTypes.bool]),
+  "aria-describedby": PropTypes.string,
+  "aria-details": PropTypes.string,
+  "aria-disabled": PropTypes.oneOfType([PropTypes.oneOf(["false", "true"]), PropTypes.bool]),
+  "aria-dropeffect": PropTypes.oneOf(["copy", "execute", "link", "move", "none", "popup"]),
+  "aria-errormessage": PropTypes.string,
+  "aria-expanded": PropTypes.oneOfType([PropTypes.oneOf(["false", "true"]), PropTypes.bool]),
+  "aria-flowto": PropTypes.string,
+  "aria-grabbed": PropTypes.oneOfType([PropTypes.oneOf(["false", "true"]), PropTypes.bool]),
+  "aria-haspopup": PropTypes.oneOfType([PropTypes.oneOf(["dialog", "false", "grid", "listbox", "menu", "tree", "true"]), PropTypes.bool]),
+  "aria-hidden": PropTypes.oneOfType([PropTypes.oneOf(["false", "true"]), PropTypes.bool]),
+  "aria-invalid": PropTypes.oneOfType([PropTypes.oneOf(["false", "grammar", "spelling", "true"]), PropTypes.bool]),
+  "aria-keyshortcuts": PropTypes.string,
+  "aria-label": PropTypes.string,
+  "aria-labelledby": PropTypes.string,
+  "aria-level": PropTypes.number,
+  "aria-live": PropTypes.oneOf(["assertive", "off", "polite"]),
+  "aria-modal": PropTypes.oneOfType([PropTypes.oneOf(["false", "true"]), PropTypes.bool]),
+  "aria-multiline": PropTypes.oneOfType([PropTypes.oneOf(["false", "true"]), PropTypes.bool]),
+  "aria-multiselectable": PropTypes.oneOfType([PropTypes.oneOf(["false", "true"]), PropTypes.bool]),
+  "aria-orientation": PropTypes.oneOf(["horizontal", "vertical"]),
+  "aria-owns": PropTypes.string,
+  "aria-placeholder": PropTypes.string,
+  "aria-posinset": PropTypes.number,
+  "aria-pressed": PropTypes.oneOfType([PropTypes.oneOf(["false", "mixed", "true"]), PropTypes.bool]),
+  "aria-readonly": PropTypes.oneOfType([PropTypes.oneOf(["false", "true"]), PropTypes.bool]),
+  "aria-relevant": PropTypes.oneOf(["additions removals", "additions text", "additions", "all", "removals additions", "removals text", "removals", "text additions", "text removals", "text"]),
+  "aria-required": PropTypes.oneOfType([PropTypes.oneOf(["false", "true"]), PropTypes.bool]),
+  "aria-roledescription": PropTypes.string,
+  "aria-rowcount": PropTypes.number,
+  "aria-rowindex": PropTypes.number,
+  "aria-rowspan": PropTypes.number,
+  "aria-selected": PropTypes.oneOfType([PropTypes.oneOf(["false", "true"]), PropTypes.bool]),
+  "aria-setsize": PropTypes.number,
+  "aria-sort": PropTypes.oneOf(["ascending", "descending", "none", "other"]),
+  "aria-valuemax": PropTypes.number,
+  "aria-valuemin": PropTypes.number,
+  "aria-valuenow": PropTypes.number,
+  "aria-valuetext": PropTypes.string,
+  "children": PropTypes.node,
+  "data-component": PropTypes.string,
+  "data-element": PropTypes.string,
+  "data-role": PropTypes.string,
+  "href": PropTypes.string.isRequired,
+  "isCurrent": PropTypes.bool,
+  "onClick": PropTypes.func,
+  "onKeyDown": PropTypes.func,
+  "onMouseDown": PropTypes.func,
+  "placeholderTabIndex": PropTypes.bool
+};
+Crumb.displayName = "Crumb";
+export default Crumb;

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

@@ -0,0 +1,18 @@
+/// <reference types="react" />
+import { LinkProps } from "../../link";
+interface StyleCrumbProps extends LinkProps {
+    isCurrent?: 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">;
+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">;
+};
+export default _default;

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

@@ -0,0 +1,33 @@
+import styled, { css } from "styled-components";
+import Link from "../../link";
+export const StyledCrumb = styled(Link)`
+  font: var(--typographyLinkTextM);
+  ${({
+  isCurrent
+}) => isCurrent && css`
+      a {
+        color: var(--colorsUtilityYin090);
+        text-decoration: none;
+        font: var(--typographyBreadcrumbCurrentPageM);
+        cursor: text;
+        :hover {
+          color: var(--colorsUtilityYin090);
+          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 default {
+  StyledCrumb,
+  Divider
+};

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

@@ -0,0 +1,2 @@
+export { default as Crumb } from "./crumb.component";
+export type { CrumbProps } from "./crumb.component";

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

@@ -0,0 +1 @@
+export { default as Crumb } from "./crumb.component";

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

@@ -0,0 +1,4 @@
+export { default as Breadcrumbs } from "./breadcrumbs.component";
+export { Crumb } from "./crumb";
+export type { BreadcrumbsProps } from "./breadcrumbs.component";
+export type { CrumbProps } from "./crumb";

package/esm/components/breadcrumbs/index.js

@@ -0,0 +1,2 @@
+export { default as Breadcrumbs } from "./breadcrumbs.component";
+export { Crumb } from "./crumb";

package/esm/components/definition-list/dl.component.d.ts

@@ -2,6 +2,8 @@ import React from "react";
 import { SpaceProps } from "styled-system";
 import { StyledDtDivProps, StyledDdDivProps, StyledDlProps } from "./definition-list.style";
 export interface DlProps extends SpaceProps, StyledDlProps, StyledDtDivProps, StyledDdDivProps {
+    /** HTML id attribute of the input */
+    id?: string;
     /** prop to render children. */
     children: React.ReactNode;
 }

package/esm/components/definition-list/dl.component.js

@@ -75,6 +75,7 @@ Dl.propTypes = {
   "children": PropTypes.node,
   "ddTextAlign": PropTypes.oneOf(["center", "left", "right"]),
   "dtTextAlign": PropTypes.oneOf(["center", "left", "right"]),
+  "id": PropTypes.string,
   "m": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
     "__@toStringTag": PropTypes.string.isRequired,
     "description": PropTypes.string,

package/esm/components/i18n-provider/i18n-provider.component.js

@@ -21,9 +21,17 @@ I18nProvider.propTypes = {
       "delete": PropTypes.func.isRequired,
       "edit": PropTypes.func.isRequired
     }),
+    "advancedColorPicker": PropTypes.shape({
+      "ariaLabel": PropTypes.func.isRequired,
+      "currentColorAssigned": PropTypes.func.isRequired,
+      "currentColorDescriptionTerm": PropTypes.func.isRequired
+    }),
     "batchSelection": PropTypes.shape({
       "selected": PropTypes.func.isRequired
     }),
+    "breadcrumbs": PropTypes.shape({
+      "ariaLabel": PropTypes.func.isRequired
+    }),
     "characterCount": PropTypes.shape({
       "charactersLeft": PropTypes.func.isRequired,
       "hintString": PropTypes.func.isRequired,

package/esm/components/show-edit-pod/show-edit-pod.component.js

@@ -9,7 +9,9 @@ import Events from "../../__internal__/utils/helpers/events";
 import tagComponent from "../../__internal__/utils/helpers/tags/tags";
 import LocaleContext from "../../__internal__/i18n-context";
 import StyledPod from "./show-edit-pod.style";
+import Logger from "../../__internal__/utils/logger";
 const marginPropTypes = filterStyledSystemMarginProps(styledSystemPropTypes.space);
+let deprecateWarnTriggered = false;
 
 const ShowEditPod = ({
   border = false,
@@ -35,6 +37,11 @@ const ShowEditPod = ({
   variant = "transparent",
   ...rest
 }) => {
+  if (!deprecateWarnTriggered) {
+    deprecateWarnTriggered = true;
+    Logger.deprecate("The ShowEditPod component is deprecated and will soon be removed. Please use alternatives such as the Fieldset, Form or Pod components instead.");
+  }
+
   const locale = useContext(LocaleContext);
   const ref = useRef();
   const editModeNodeRef = useRef();

package/esm/locales/en-gb.js

@@ -11,9 +11,17 @@ const enGB = {
   actionPopover: {
     ariaLabel: () => "actions"
   },
+  advancedColorPicker: {
+    ariaLabel: () => "Change colour",
+    currentColorDescriptionTerm: () => "Current color assigned: ",
+    currentColorAssigned: currentColor => currentColor
+  },
   batchSelection: {
     selected: count => `${count} selected`
   },
+  breadcrumbs: {
+    ariaLabel: () => "breadcrumbs"
+  },
   confirm: {
     no: () => "No",
     yes: () => "Yes"

package/esm/locales/locale.d.ts

@@ -8,9 +8,17 @@ interface Locale {
     actionPopover: {
         ariaLabel: () => string;
     };
+    advancedColorPicker: {
+        ariaLabel: () => string;
+        currentColorDescriptionTerm: (currentColor: string) => string;
+        currentColorAssigned: (currentColor: string) => string;
+    };
     batchSelection: {
         selected: (count: number | string) => string;
     };
+    breadcrumbs: {
+        ariaLabel: () => string;
+    };
     characterCount: {
         hintString: () => string;
         tooManyCharacters: (count: number, formattedCount: string) => string;

package/esm/locales/pl-pl.js

@@ -13,6 +13,47 @@ export const PolishPlural = (singularNominativ, pluralNominativ, pluralGenitive,
 
   return pluralGenitive;
 };
+
+const translateColor = color => {
+  switch (color.toLowerCase()) {
+    case "white":
+      return "biały";
+
+    case "transparent":
+      return "przezroczysty";
+
+    case "black":
+      return "czarny";
+
+    case "blue":
+      return "niebieski";
+
+    case "pink":
+      return "różowy";
+
+    case "purple":
+      return "fioletowy";
+
+    case "goldenrod":
+      return "złoty";
+
+    case "orchid":
+      return "ciemny róż";
+
+    case "desert":
+      return "pustynny";
+
+    case "turquoise":
+      return "turkusowy";
+
+    case "mint":
+      return "miętowy";
+
+    default:
+      return color;
+  }
+};
+
 const plPL = {
   locale: () => "pl-PL",
   actions: {
@@ -22,9 +63,17 @@ const plPL = {
   actionPopover: {
     ariaLabel: () => "akcje"
   },
+  advancedColorPicker: {
+    ariaLabel: () => "Zmień kolor",
+    currentColorDescriptionTerm: currentColor => translateColor(currentColor) === "biały" ? "Aktualny przypisany kolor: " : "Aktualnie przypisany kolor: ",
+    currentColorAssigned: currentColor => translateColor(currentColor)
+  },
   batchSelection: {
     selected: count => `${count} wybrano`
   },
+  breadcrumbs: {
+    ariaLabel: () => "okruszki"
+  },
   confirm: {
     no: () => "Nie",
     yes: () => "Tak"

package/esm/style/utils/visually-hidden.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("styled-components").FlattenSimpleInterpolation;
+export default _default;

package/esm/style/utils/visually-hidden.js

@@ -0,0 +1,10 @@
+import { css } from "styled-components";
+export default css`
+  border: 0;
+  height: 1px;
+  margin: -1px;
+  overflow: hidden;
+  padding: 0;
+  position: absolute;
+  width: 1px;
+`;

package/lib/components/advanced-color-picker/advanced-color-picker.component.js

@@ -17,6 +17,12 @@ var _events = _interopRequireDefault(require("../../__internal__/utils/helpers/e
 
 var _utils = require("../../style/utils");
 
+var _guid = _interopRequireDefault(require("../../__internal__/utils/helpers/guid"));
+
+var _useLocale = _interopRequireDefault(require("../../hooks/__internal__/useLocale"));
+
+var _definitionList = require("../definition-list");
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function () { return cache; }; return cache; }
@@ -44,6 +50,8 @@ const AdvancedColorPicker = ({
   const [dialogOpen, setDialogOpen] = (0, _react.useState)();
   const currentColor = selectedColor || defaultColor;
   const [selectedColorRef, setSelectedColorRef] = (0, _react.useState)(null);
+  const descriptionId = (0, _react.useRef)((0, _guid.default)());
+  const l = (0, _useLocale.default)();
   const simpleColorPickerData = (0, _react.useRef)(null);
   const colors = availableColors.map(({
     value,
@@ -59,6 +67,14 @@ const AdvancedColorPicker = ({
       simpleColorPickerData.current ? simpleColorPickerData.current.gridItemRefs[index] : null
     };
   });
+
+  const currentSelectedColor = () => {
+    var _availableColors$find;
+
+    const returnedColor = (_availableColors$find = availableColors.find(color => color.value === currentColor)) === null || _availableColors$find === void 0 ? void 0 : _availableColors$find.label;
+    return returnedColor || currentColor;
+  };
+
   (0, _react.useEffect)(() => {
     if (dialogOpen || open) {
       const newColor = colors === null || colors === void 0 ? void 0 : colors.find(c => currentColor === c.value);
@@ -132,11 +148,16 @@ const AdvancedColorPicker = ({
     m: "15px auto auto 15px"
   }, (0, _utils.filterStyledSystemMarginProps)(props)), /*#__PURE__*/_react.default.createElement(_advancedColorPicker.StyledAdvancedColorPickerCell, {
     "data-element": "color-picker-cell",
+    "aria-label": l.advancedColorPicker.ariaLabel(),
+    "aria-describedby": descriptionId.current,
     onClick: handleOnOpen,
     onKeyDown: handleOnKeyDown,
     color: currentColor,
     tabIndex: 0
-  }), /*#__PURE__*/_react.default.createElement(_advancedColorPicker.DialogStyle, {
+  }), /*#__PURE__*/_react.default.createElement(_advancedColorPicker.HiddenCurrentColorList, {
+    id: descriptionId.current,
+    "data-element": "current-color-description"
+  }, /*#__PURE__*/_react.default.createElement(_definitionList.Dt, null, l.advancedColorPicker.currentColorDescriptionTerm(currentSelectedColor())), /*#__PURE__*/_react.default.createElement(_definitionList.Dd, null, l.advancedColorPicker.currentColorAssigned(currentSelectedColor()))), /*#__PURE__*/_react.default.createElement(_advancedColorPicker.DialogStyle, {
     "aria-describedby": ariaDescribedBy,
     "aria-label": ariaLabel,
     "aria-labelledby": ariaLabelledBy,

package/lib/components/advanced-color-picker/advanced-color-picker.style.d.ts

@@ -1,6 +1,11 @@
 /// <reference types="react" />
 import StyledAdvancedColorPickerCell from "./advanced-color-picker-cell.style";
 declare const StyledAdvancedColorPickerWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
+/** To be replaced by accessibly hidden class added in FE-5503 */
+declare const HiddenCurrentColorList: import("styled-components").StyledComponent<{
+    ({ children, w, dtTextAlign, ddTextAlign, asSingleColumn, ...rest }: import("../definition-list").DlProps): JSX.Element;
+    displayName: string;
+}, any, {}, never>;
 declare const StyledAdvancedColorPickerPreview: import("styled-components").StyledComponent<"div", any, {}, never>;
 declare const DialogStyle: import("styled-components").StyledComponent<({ className, children, open, height, size, title, disableEscKey, subtitle, disableAutoFocus, focusFirstElement, focusableSelectors, onCancel, showCloseIcon, bespokeFocusTrap, disableClose, help, role, contentPadding, focusableContainers, ...rest }: import("../dialog/dialog.component").DialogProps) => JSX.Element, any, {}, never>;
-export { StyledAdvancedColorPickerWrapper, StyledAdvancedColorPickerCell, StyledAdvancedColorPickerPreview, DialogStyle, };
+export { StyledAdvancedColorPickerWrapper, HiddenCurrentColorList, StyledAdvancedColorPickerCell, StyledAdvancedColorPickerPreview, DialogStyle, };

package/lib/components/advanced-color-picker/advanced-color-picker.style.js

@@ -9,7 +9,7 @@ Object.defineProperty(exports, "StyledAdvancedColorPickerCell", {
     return _advancedColorPickerCell.default;
   }
 });
-exports.DialogStyle = exports.StyledAdvancedColorPickerPreview = exports.StyledAdvancedColorPickerWrapper = void 0;
+exports.DialogStyle = exports.StyledAdvancedColorPickerPreview = exports.HiddenCurrentColorList = exports.StyledAdvancedColorPickerWrapper = void 0;
 
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
 
@@ -31,6 +31,10 @@ var _checkerBoard = _interopRequireDefault(require("../simple-color-picker/simpl
 
 var _base = _interopRequireDefault(require("../../style/themes/base"));
 
+var _visuallyHidden = _interopRequireDefault(require("../../style/utils/visually-hidden"));
+
+var _definitionList = require("../definition-list");
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function () { return cache; }; return cache; }
@@ -41,7 +45,13 @@ const StyledAdvancedColorPickerWrapper = _styledComponents.default.div`
   ${_styledSystem.margin}
   display: inline-block;
 `;
+/** To be replaced by accessibly hidden class added in FE-5503 */
+
 exports.StyledAdvancedColorPickerWrapper = StyledAdvancedColorPickerWrapper;
+const HiddenCurrentColorList = (0, _styledComponents.default)(_definitionList.Dl)`
+  ${_visuallyHidden.default}
+`;
+exports.HiddenCurrentColorList = HiddenCurrentColorList;
 StyledAdvancedColorPickerWrapper.defaultProps = {
   theme: _base.default
 };

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

@@ -0,0 +1,8 @@
+import React from "react";
+import { TagProps } from "../../__internal__/utils/helpers/tags";
+export interface BreadcrumbsProps extends TagProps {
+    /** Child crumbs to display */
+    children: React.ReactNode;
+}
+export declare const Breadcrumbs: React.ForwardRefExoticComponent<BreadcrumbsProps & React.RefAttributes<HTMLElement>>;
+export default Breadcrumbs;

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

@@ -0,0 +1,44 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.Breadcrumbs = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+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"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _extends() { _extends = Object.assign || 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 Breadcrumbs = /*#__PURE__*/_react.default.forwardRef(({
+  children,
+  ...rest
+}, ref) => {
+  const l = (0, _useLocale.default)();
+  return /*#__PURE__*/_react.default.createElement(_breadcrumbs.default, _extends({
+    ref: ref,
+    role: "navigation"
+  }, (0, _tags.default)("breadcrumbs", rest), {
+    "aria-label": l.breadcrumbs.ariaLabel()
+  }), /*#__PURE__*/_react.default.createElement("ol", null, children));
+});
+
+exports.Breadcrumbs = Breadcrumbs;
+Breadcrumbs.propTypes = {
+  "children": _propTypes.default.node,
+  "data-component": _propTypes.default.string,
+  "data-element": _propTypes.default.string,
+  "data-role": _propTypes.default.string
+};
+Breadcrumbs.displayName = "Breadcrumbs";
+var _default = Breadcrumbs;
+exports.default = _default;

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

@@ -0,0 +1,2 @@
+declare const StyledBreadcrumbs: import("styled-components").StyledComponent<"nav", any, {}, never>;
+export default StyledBreadcrumbs;

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

@@ -0,0 +1,20 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+const StyledBreadcrumbs = _styledComponents.default.nav`
+  ol {
+    list-style: none;
+    display: flex;
+    flex-wrap: wrap;
+  }
+`;
+var _default = StyledBreadcrumbs;
+exports.default = _default;

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

@@ -0,0 +1,11 @@
+import { LinkProps } from "components/link/link.component";
+import React from "react";
+import { TagProps } from "../../../__internal__/utils/helpers/tags";
+export interface CrumbProps extends Omit<LinkProps, "tooltipMessage" | "tooltipPosition" | "iconType" | "iconAlign" | "isSkipLink" | "isDarkBackground" | "ariaLabel" | "className" | "variant" | "target" | "rel" | "icon" | "disabled">, TagProps {
+    /** This sets the Crumb to current, does not render Link */
+    isCurrent?: boolean;
+    /** The href string for Crumb Link */
+    href: string;
+}
+declare const Crumb: React.ForwardRefExoticComponent<CrumbProps & React.RefAttributes<HTMLLinkElement>>;
+export default Crumb;

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

@@ -0,0 +1,95 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _tags = _interopRequireDefault(require("../../../__internal__/utils/helpers/tags"));
+
+var _crumb = require("./crumb.style");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _extends() { _extends = Object.assign || 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 Crumb = /*#__PURE__*/_react.default.forwardRef(({
+  href,
+  isCurrent,
+  children,
+  ...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), !isCurrent && {
+  href
+}), children), !isCurrent && /*#__PURE__*/_react.default.createElement(_crumb.Divider, null)));
+
+Crumb.propTypes = {
+  "aria-activedescendant": _propTypes.default.string,
+  "aria-atomic": _propTypes.default.oneOfType([_propTypes.default.oneOf(["false", "true"]), _propTypes.default.bool]),
+  "aria-autocomplete": _propTypes.default.oneOf(["both", "inline", "list", "none"]),
+  "aria-busy": _propTypes.default.oneOfType([_propTypes.default.oneOf(["false", "true"]), _propTypes.default.bool]),
+  "aria-checked": _propTypes.default.oneOfType([_propTypes.default.oneOf(["false", "mixed", "true"]), _propTypes.default.bool]),
+  "aria-colcount": _propTypes.default.number,
+  "aria-colindex": _propTypes.default.number,
+  "aria-colspan": _propTypes.default.number,
+  "aria-controls": _propTypes.default.string,
+  "aria-current": _propTypes.default.oneOfType([_propTypes.default.oneOf(["date", "false", "location", "page", "step", "time", "true"]), _propTypes.default.bool]),
+  "aria-describedby": _propTypes.default.string,
+  "aria-details": _propTypes.default.string,
+  "aria-disabled": _propTypes.default.oneOfType([_propTypes.default.oneOf(["false", "true"]), _propTypes.default.bool]),
+  "aria-dropeffect": _propTypes.default.oneOf(["copy", "execute", "link", "move", "none", "popup"]),
+  "aria-errormessage": _propTypes.default.string,
+  "aria-expanded": _propTypes.default.oneOfType([_propTypes.default.oneOf(["false", "true"]), _propTypes.default.bool]),
+  "aria-flowto": _propTypes.default.string,
+  "aria-grabbed": _propTypes.default.oneOfType([_propTypes.default.oneOf(["false", "true"]), _propTypes.default.bool]),
+  "aria-haspopup": _propTypes.default.oneOfType([_propTypes.default.oneOf(["dialog", "false", "grid", "listbox", "menu", "tree", "true"]), _propTypes.default.bool]),
+  "aria-hidden": _propTypes.default.oneOfType([_propTypes.default.oneOf(["false", "true"]), _propTypes.default.bool]),
+  "aria-invalid": _propTypes.default.oneOfType([_propTypes.default.oneOf(["false", "grammar", "spelling", "true"]), _propTypes.default.bool]),
+  "aria-keyshortcuts": _propTypes.default.string,
+  "aria-label": _propTypes.default.string,
+  "aria-labelledby": _propTypes.default.string,
+  "aria-level": _propTypes.default.number,
+  "aria-live": _propTypes.default.oneOf(["assertive", "off", "polite"]),
+  "aria-modal": _propTypes.default.oneOfType([_propTypes.default.oneOf(["false", "true"]), _propTypes.default.bool]),
+  "aria-multiline": _propTypes.default.oneOfType([_propTypes.default.oneOf(["false", "true"]), _propTypes.default.bool]),
+  "aria-multiselectable": _propTypes.default.oneOfType([_propTypes.default.oneOf(["false", "true"]), _propTypes.default.bool]),
+  "aria-orientation": _propTypes.default.oneOf(["horizontal", "vertical"]),
+  "aria-owns": _propTypes.default.string,
+  "aria-placeholder": _propTypes.default.string,
+  "aria-posinset": _propTypes.default.number,
+  "aria-pressed": _propTypes.default.oneOfType([_propTypes.default.oneOf(["false", "mixed", "true"]), _propTypes.default.bool]),
+  "aria-readonly": _propTypes.default.oneOfType([_propTypes.default.oneOf(["false", "true"]), _propTypes.default.bool]),
+  "aria-relevant": _propTypes.default.oneOf(["additions removals", "additions text", "additions", "all", "removals additions", "removals text", "removals", "text additions", "text removals", "text"]),
+  "aria-required": _propTypes.default.oneOfType([_propTypes.default.oneOf(["false", "true"]), _propTypes.default.bool]),
+  "aria-roledescription": _propTypes.default.string,
+  "aria-rowcount": _propTypes.default.number,
+  "aria-rowindex": _propTypes.default.number,
+  "aria-rowspan": _propTypes.default.number,
+  "aria-selected": _propTypes.default.oneOfType([_propTypes.default.oneOf(["false", "true"]), _propTypes.default.bool]),
+  "aria-setsize": _propTypes.default.number,
+  "aria-sort": _propTypes.default.oneOf(["ascending", "descending", "none", "other"]),
+  "aria-valuemax": _propTypes.default.number,
+  "aria-valuemin": _propTypes.default.number,
+  "aria-valuenow": _propTypes.default.number,
+  "aria-valuetext": _propTypes.default.string,
+  "children": _propTypes.default.node,
+  "data-component": _propTypes.default.string,
+  "data-element": _propTypes.default.string,
+  "data-role": _propTypes.default.string,
+  "href": _propTypes.default.string.isRequired,
+  "isCurrent": _propTypes.default.bool,
+  "onClick": _propTypes.default.func,
+  "onKeyDown": _propTypes.default.func,
+  "onMouseDown": _propTypes.default.func,
+  "placeholderTabIndex": _propTypes.default.bool
+};
+Crumb.displayName = "Crumb";
+var _default = Crumb;
+exports.default = _default;

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

@@ -0,0 +1,18 @@
+/// <reference types="react" />
+import { LinkProps } from "../../link";
+interface StyleCrumbProps extends LinkProps {
+    isCurrent?: 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">;
+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">;
+};
+export default _default;

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

@@ -0,0 +1,51 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.Divider = exports.StyledCrumb = void 0;
+
+var _styledComponents = _interopRequireWildcard(require("styled-components"));
+
+var _link = _interopRequireDefault(require("../../link"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function () { return cache; }; return cache; }
+
+function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+const StyledCrumb = (0, _styledComponents.default)(_link.default)`
+  font: var(--typographyLinkTextM);
+  ${({
+  isCurrent
+}) => isCurrent && (0, _styledComponents.css)`
+      a {
+        color: var(--colorsUtilityYin090);
+        text-decoration: none;
+        font: var(--typographyBreadcrumbCurrentPageM);
+        cursor: text;
+        :hover {
+          color: var(--colorsUtilityYin090);
+          text-decoration: none;
+          cursor: text;
+        }
+      }
+    `}
+`;
+exports.StyledCrumb = StyledCrumb;
+const 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);
+`;
+exports.Divider = Divider;
+var _default = {
+  StyledCrumb,
+  Divider
+};
+exports.default = _default;

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

@@ -0,0 +1,2 @@
+export { default as Crumb } from "./crumb.component";
+export type { CrumbProps } from "./crumb.component";

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

@@ -0,0 +1,15 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "Crumb", {
+  enumerable: true,
+  get: function () {
+    return _crumb.default;
+  }
+});
+
+var _crumb = _interopRequireDefault(require("./crumb.component"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

package/lib/components/breadcrumbs/crumb/package.json

@@ -0,0 +1,6 @@
+{
+  "sideEffects": false,
+  "module": "../../../../esm/components/breadcrumbs/crumb/index.js",
+  "main": "./index.js",
+  "types": "./index.d.ts"
+}

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

@@ -0,0 +1,4 @@
+export { default as Breadcrumbs } from "./breadcrumbs.component";
+export { Crumb } from "./crumb";
+export type { BreadcrumbsProps } from "./breadcrumbs.component";
+export type { CrumbProps } from "./crumb";

package/lib/components/breadcrumbs/index.js

@@ -0,0 +1,23 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "Breadcrumbs", {
+  enumerable: true,
+  get: function () {
+    return _breadcrumbs.default;
+  }
+});
+Object.defineProperty(exports, "Crumb", {
+  enumerable: true,
+  get: function () {
+    return _crumb.Crumb;
+  }
+});
+
+var _breadcrumbs = _interopRequireDefault(require("./breadcrumbs.component"));
+
+var _crumb = require("./crumb");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

package/lib/components/breadcrumbs/package.json

@@ -0,0 +1,6 @@
+{
+  "sideEffects": false,
+  "module": "../../../esm/components/breadcrumbs/index.js",
+  "main": "./index.js",
+  "types": "./index.d.ts"
+}

package/lib/components/definition-list/dl.component.d.ts

@@ -2,6 +2,8 @@ import React from "react";
 import { SpaceProps } from "styled-system";
 import { StyledDtDivProps, StyledDdDivProps, StyledDlProps } from "./definition-list.style";
 export interface DlProps extends SpaceProps, StyledDlProps, StyledDtDivProps, StyledDdDivProps {
+    /** HTML id attribute of the input */
+    id?: string;
     /** prop to render children. */
     children: React.ReactNode;
 }

package/lib/components/definition-list/dl.component.js

@@ -94,6 +94,7 @@ Dl.propTypes = {
   "children": _propTypes.default.node,
   "ddTextAlign": _propTypes.default.oneOf(["center", "left", "right"]),
   "dtTextAlign": _propTypes.default.oneOf(["center", "left", "right"]),
+  "id": _propTypes.default.string,
   "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/i18n-provider/i18n-provider.component.js

@@ -35,9 +35,17 @@ I18nProvider.propTypes = {
       "delete": _propTypes.default.func.isRequired,
       "edit": _propTypes.default.func.isRequired
     }),
+    "advancedColorPicker": _propTypes.default.shape({
+      "ariaLabel": _propTypes.default.func.isRequired,
+      "currentColorAssigned": _propTypes.default.func.isRequired,
+      "currentColorDescriptionTerm": _propTypes.default.func.isRequired
+    }),
     "batchSelection": _propTypes.default.shape({
       "selected": _propTypes.default.func.isRequired
     }),
+    "breadcrumbs": _propTypes.default.shape({
+      "ariaLabel": _propTypes.default.func.isRequired
+    }),
     "characterCount": _propTypes.default.shape({
       "charactersLeft": _propTypes.default.func.isRequired,
       "hintString": _propTypes.default.func.isRequired,

package/lib/components/show-edit-pod/show-edit-pod.component.js

@@ -27,6 +27,8 @@ var _i18nContext = _interopRequireDefault(require("../../__internal__/i18n-conte
 
 var _showEditPod = _interopRequireDefault(require("./show-edit-pod.style"));
 
+var _logger = _interopRequireDefault(require("../../__internal__/utils/logger"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function () { return cache; }; return cache; }
@@ -34,6 +36,7 @@ function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return
 function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
 const marginPropTypes = (0, _utils.filterStyledSystemMarginProps)(_propTypes2.default.space);
+let deprecateWarnTriggered = false;
 
 const ShowEditPod = ({
   border = false,
@@ -59,6 +62,12 @@ const ShowEditPod = ({
   variant = "transparent",
   ...rest
 }) => {
+  if (!deprecateWarnTriggered) {
+    deprecateWarnTriggered = true;
+
+    _logger.default.deprecate("The ShowEditPod component is deprecated and will soon be removed. Please use alternatives such as the Fieldset, Form or Pod components instead.");
+  }
+
   const locale = (0, _react.useContext)(_i18nContext.default);
   const ref = (0, _react.useRef)();
   const editModeNodeRef = (0, _react.useRef)();

package/lib/locales/en-gb.js

@@ -18,9 +18,17 @@ const enGB = {
   actionPopover: {
     ariaLabel: () => "actions"
   },
+  advancedColorPicker: {
+    ariaLabel: () => "Change colour",
+    currentColorDescriptionTerm: () => "Current color assigned: ",
+    currentColorAssigned: currentColor => currentColor
+  },
   batchSelection: {
     selected: count => `${count} selected`
   },
+  breadcrumbs: {
+    ariaLabel: () => "breadcrumbs"
+  },
   confirm: {
     no: () => "No",
     yes: () => "Yes"

package/lib/locales/locale.d.ts

@@ -8,9 +8,17 @@ interface Locale {
     actionPopover: {
         ariaLabel: () => string;
     };
+    advancedColorPicker: {
+        ariaLabel: () => string;
+        currentColorDescriptionTerm: (currentColor: string) => string;
+        currentColorAssigned: (currentColor: string) => string;
+    };
     batchSelection: {
         selected: (count: number | string) => string;
     };
+    breadcrumbs: {
+        ariaLabel: () => string;
+    };
     characterCount: {
         hintString: () => string;
         tooManyCharacters: (count: number, formattedCount: string) => string;

package/lib/locales/pl-pl.js

@@ -22,6 +22,47 @@ const PolishPlural = (singularNominativ, pluralNominativ, pluralGenitive, value)
 };
 
 exports.PolishPlurals = exports.PolishPlural = PolishPlural;
+
+const translateColor = color => {
+  switch (color.toLowerCase()) {
+    case "white":
+      return "biały";
+
+    case "transparent":
+      return "przezroczysty";
+
+    case "black":
+      return "czarny";
+
+    case "blue":
+      return "niebieski";
+
+    case "pink":
+      return "różowy";
+
+    case "purple":
+      return "fioletowy";
+
+    case "goldenrod":
+      return "złoty";
+
+    case "orchid":
+      return "ciemny róż";
+
+    case "desert":
+      return "pustynny";
+
+    case "turquoise":
+      return "turkusowy";
+
+    case "mint":
+      return "miętowy";
+
+    default:
+      return color;
+  }
+};
+
 const plPL = {
   locale: () => "pl-PL",
   actions: {
@@ -31,9 +72,17 @@ const plPL = {
   actionPopover: {
     ariaLabel: () => "akcje"
   },
+  advancedColorPicker: {
+    ariaLabel: () => "Zmień kolor",
+    currentColorDescriptionTerm: currentColor => translateColor(currentColor) === "biały" ? "Aktualny przypisany kolor: " : "Aktualnie przypisany kolor: ",
+    currentColorAssigned: currentColor => translateColor(currentColor)
+  },
   batchSelection: {
     selected: count => `${count} wybrano`
   },
+  breadcrumbs: {
+    ariaLabel: () => "okruszki"
+  },
   confirm: {
     no: () => "Nie",
     yes: () => "Tak"

package/lib/style/utils/visually-hidden.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("styled-components").FlattenSimpleInterpolation;
+export default _default;

package/lib/style/utils/visually-hidden.js

@@ -0,0 +1,20 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _styledComponents = require("styled-components");
+
+var _default = (0, _styledComponents.css)`
+  border: 0;
+  height: 1px;
+  margin: -1px;
+  overflow: hidden;
+  padding: 0;
+  position: absolute;
+  width: 1px;
+`;
+
+exports.default = _default;

package/package.json

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