carbon-react 104.7.3 → 104.10.1

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

@@ -2,7 +2,7 @@ export const StyledAdvancedColorPickerWrapper: import("styled-components").Style
 import StyledAdvancedColorPickerCell from "./advanced-color-picker-cell.style";
 export const StyledAdvancedColorPickerPreview: import("styled-components").StyledComponent<"div", any, {}, never>;
 export const DialogStyle: import("styled-components").StyledComponent<{
-    ({ className, children, open, height, size, title, disableEscKey, subtitle, disableAutoFocus, focusFirstElement, onCancel, showCloseIcon, bespokeFocusTrap, disableClose, help, role, ...rest }: {
+    ({ className, children, open, height, size, title, disableEscKey, subtitle, disableAutoFocus, focusFirstElement, onCancel, showCloseIcon, bespokeFocusTrap, disableClose, help, role, contentPadding, ...rest }: {
         [x: string]: any;
         className: any;
         children: any;
@@ -20,6 +20,7 @@ export const DialogStyle: import("styled-components").StyledComponent<{
         disableClose: any;
         help: any;
         role?: string | undefined;
+        contentPadding?: {} | undefined;
     }): JSX.Element;
     propTypes: {
         "aria-describedby": import("prop-types").Requireable<string>;
@@ -43,6 +44,11 @@ export const DialogStyle: import("styled-components").StyledComponent<{
         disableAutoFocus: import("prop-types").Requireable<boolean>;
         bespokeFocusTrap: import("prop-types").Requireable<(...args: any[]) => any>;
         role: import("prop-types").Requireable<string>;
+        contentPadding: import("prop-types").Requireable<import("prop-types").InferProps<{
+            p: import("prop-types").Requireable<number>;
+            px: import("prop-types").Requireable<number>;
+            py: import("prop-types").Requireable<number>;
+        }>>;
     };
     defaultProps: {
         size: string;

package/lib/components/anchor-navigation/anchor-navigation-item/anchor-navigation-item.style.js

@@ -5,14 +5,16 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 
-var _styledComponents = _interopRequireWildcard(require("styled-components"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _themes = require("../../../style/themes");
+var _styledComponents = _interopRequireWildcard(require("styled-components"));
 
 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; }
 
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
 const StyledNavigationItem = _styledComponents.default.li`
   width: 100%;
 
@@ -20,52 +22,32 @@ const StyledNavigationItem = _styledComponents.default.li`
     cursor: pointer;
     display: block;
     text-decoration: none;
-    color: ${({
-  theme
-}) => theme.text.color};
+    color: var(--colorsUtilityYin090);
     background-color: transparent;
-    border-left: 3px solid ${({
-  theme
-}) => theme.disabled.background};
+    border-left: var(--sizing050) solid var(--colorsActionMinor100);
     font-weight: 700;
     padding: 12px 24px;
 
     &:focus {
-      outline: none;
-      position: relative;
-
-      &:before {
-        content: "";
-        position: absolute;
-        top: 0;
-        bottom: 0;
-        left: -3px;
-        right: 0;
-        z-index: 1;
-        box-shadow: 0 0 6px ${({
-  theme
-}) => theme.colors.focus};
-      }
+      outline: var(--borderWidth300) solid var(--colorsSemanticFocus500);
     }
 
     &:hover {
       background-color: ${({
-  isSelected,
-  theme
-}) => !isSelected && theme.anchorNavigation.navItemHoverBackground};
+  isSelected
+}) => !isSelected && "var(--colorsActionMinor100)"};
     }
 
     ${({
-  isSelected,
-  theme
+  isSelected
 }) => isSelected && (0, _styledComponents.css)`
-        background-color: ${theme.colors.white};
-        border-left-color: ${theme.colors.primary};
+        background-color: var(--colorsActionMinorYang100);
+        border-left-color: var(--colorsActionMajor500);
       `}
   }
 `;
-StyledNavigationItem.defaultProps = {
-  theme: _themes.baseTheme
+StyledNavigationItem.propTypes = {
+  isSelected: _propTypes.default.bool
 };
 var _default = StyledNavigationItem;
 exports.default = _default;

package/lib/components/anchor-navigation/anchor-navigation.style.js

@@ -7,8 +7,6 @@ exports.StyledContent = exports.StyledNavigation = exports.StyledAnchorNavigatio
 
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 
-var _themes = require("../../style/themes");
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 const StyledAnchorNavigation = _styledComponents.default.div`
@@ -20,9 +18,6 @@ exports.StyledAnchorNavigation = StyledAnchorNavigation;
 const StyledNavigation = _styledComponents.default.ul`
   position: sticky;
   top: 32px;
-  box-shadow: inset 3px 0px 0px 0px ${({
-  theme
-}) => theme.disabled.background};
   list-style: none;
   margin: 0;
   padding: 0;
@@ -33,13 +28,4 @@ const StyledContent = _styledComponents.default.div`
   flex: 1;
   margin-left: 32px;
 `;
-exports.StyledContent = StyledContent;
-StyledAnchorNavigation.defaultProps = {
-  theme: _themes.baseTheme
-};
-StyledNavigation.defaultProps = {
-  theme: _themes.baseTheme
-};
-StyledContent.defaultProps = {
-  theme: _themes.baseTheme
-};
+exports.StyledContent = StyledContent;

package/lib/components/anchor-navigation/anchor-section-divider/anchor-section-divider.style.js

@@ -7,20 +7,13 @@ exports.default = void 0;
 
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 
-var _themes = require("../../../style/themes");
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 const StyledAnchorDivider = _styledComponents.default.div.attrs({
   "data-element": "anchor-navigation-divider"
 })`
-  background-color: ${({
-  theme
-}) => theme.anchorNavigation.divider};
+  background-color: var(--colorsActionMinor200);
   height: 1px;
 `;
-StyledAnchorDivider.defaultProps = {
-  theme: _themes.baseTheme
-};
 var _default = StyledAnchorDivider;
 exports.default = _default;

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

@@ -1,5 +1,5 @@
 export default Dialog;
-declare function Dialog({ className, children, open, height, size, title, disableEscKey, subtitle, disableAutoFocus, focusFirstElement, onCancel, showCloseIcon, bespokeFocusTrap, disableClose, help, role, ...rest }: {
+declare function Dialog({ className, children, open, height, size, title, disableEscKey, subtitle, disableAutoFocus, focusFirstElement, onCancel, showCloseIcon, bespokeFocusTrap, disableClose, help, role, contentPadding, ...rest }: {
     [x: string]: any;
     className: any;
     children: any;
@@ -17,6 +17,7 @@ declare function Dialog({ className, children, open, height, size, title, disabl
     disableClose: any;
     help: any;
     role?: string | undefined;
+    contentPadding?: {} | undefined;
 }): JSX.Element;
 declare namespace Dialog {
     const propTypes: {
@@ -28,7 +29,7 @@ declare namespace Dialog {
          */
         "aria-label": PropTypes.Requireable<string>;
         /**
-         * Prop to specify the aria-labeledby property of the Dialog component
+         * Prop to specify the aria-labelledby property of the Dialog component
          * To be used when the title prop is a custom React Node,
          * or the component is labelled by an internal element other than the title.
          */
@@ -71,6 +72,12 @@ declare namespace Dialog {
         bespokeFocusTrap: PropTypes.Requireable<(...args: any[]) => any>;
         /** The ARIA role to be applied to the Dialog container */
         role: PropTypes.Requireable<string>;
+        /** Padding to be set on the Dialog content */
+        contentPadding: PropTypes.Requireable<PropTypes.InferProps<{
+            p: PropTypes.Requireable<number>;
+            px: PropTypes.Requireable<number>;
+            py: PropTypes.Requireable<number>;
+        }>>;
     };
     namespace defaultProps {
         const size: string;

package/lib/components/dialog/dialog.component.js

@@ -29,6 +29,8 @@ var _form = _interopRequireDefault(require("../form"));
 
 var _dialog2 = require("./dialog.config");
 
+var _useLocale = _interopRequireDefault(require("../../hooks/__internal__/useLocale"));
+
 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; }
@@ -54,8 +56,10 @@ const Dialog = ({
   disableClose,
   help,
   role = "dialog",
+  contentPadding = {},
   ...rest
 }) => {
+  const locale = (0, _useLocale.default)();
   const dialogRef = (0, _react.useRef)();
   const innerContentRef = (0, _react.useRef)();
   const titleRef = (0, _react.useRef)();
@@ -124,7 +128,7 @@ const Dialog = ({
     if (!showCloseIcon || !onCancel) return null;
     return /*#__PURE__*/_react.default.createElement(_iconButton.default, {
       "data-element": "close",
-      "aria-label": "Close button",
+      "aria-label": locale.dialog.ariaLabels.close(),
       onAction: onCancel,
       disabled: disableClose
     }, /*#__PURE__*/_react.default.createElement(_icon.default, {
@@ -187,9 +191,9 @@ const Dialog = ({
     "data-element": "dialog",
     "data-role": rest["data-role"],
     role: role
-  }), dialogTitle(), /*#__PURE__*/_react.default.createElement(_dialog.DialogContentStyle, null, /*#__PURE__*/_react.default.createElement(_dialog.DialogInnerContentStyle, {
+  }, contentPadding), dialogTitle(), /*#__PURE__*/_react.default.createElement(_dialog.DialogContentStyle, contentPadding, /*#__PURE__*/_react.default.createElement(_dialog.DialogInnerContentStyle, _extends({
     ref: innerContentRef
-  }, _react.default.Children.map(children, child => {
+  }, contentPadding), _react.default.Children.map(children, child => {
     if ((child === null || child === void 0 ? void 0 : child.type) === _form.default) {
       return /*#__PURE__*/_react.default.cloneElement(child, {
         dialogRef
@@ -211,7 +215,7 @@ Dialog.propTypes = {
   "aria-label": _propTypes.default.string,
 
   /**
-   * Prop to specify the aria-labeledby property of the Dialog component
+   * Prop to specify the aria-labelledby property of the Dialog component
    * To be used when the title prop is a custom React Node,
    * or the component is labelled by an internal element other than the title.
    */
@@ -269,7 +273,14 @@ Dialog.propTypes = {
   bespokeFocusTrap: _propTypes.default.func,
 
   /** The ARIA role to be applied to the Dialog container */
-  role: _propTypes.default.string
+  role: _propTypes.default.string,
+
+  /** Padding to be set on the Dialog content */
+  contentPadding: _propTypes.default.shape({
+    p: _propTypes.default.oneOf([0, 1, 2, 3, 4, 5, 6, 7, 8]),
+    px: _propTypes.default.oneOf([0, 1, 2, 3, 4, 5, 6, 7, 8]),
+    py: _propTypes.default.oneOf([0, 1, 2, 3, 4, 5, 6, 7, 8])
+  })
 };
 Dialog.defaultProps = {
   size: "medium",

package/lib/components/dialog/dialog.config.d.ts

@@ -1,2 +1,5 @@
 export const DIALOG_SIZES: string[];
 export const TOP_MARGIN: 20;
+export const CONTENT_TOP_PADDING: 24;
+export const HORIZONTAL_PADDING: 32;
+export const CONTENT_BOTTOM_PADDING: 30;

package/lib/components/dialog/dialog.config.js

@@ -3,8 +3,14 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.TOP_MARGIN = exports.DIALOG_SIZES = void 0;
+exports.CONTENT_BOTTOM_PADDING = exports.HORIZONTAL_PADDING = exports.CONTENT_TOP_PADDING = exports.TOP_MARGIN = exports.DIALOG_SIZES = void 0;
 const DIALOG_SIZES = ["extra-small", "small", "medium-small", "medium", "medium-large", "large", "extra-large"];
 exports.DIALOG_SIZES = DIALOG_SIZES;
 const TOP_MARGIN = 20;
-exports.TOP_MARGIN = TOP_MARGIN;
+exports.TOP_MARGIN = TOP_MARGIN;
+const CONTENT_TOP_PADDING = 24;
+exports.CONTENT_TOP_PADDING = CONTENT_TOP_PADDING;
+const HORIZONTAL_PADDING = 32;
+exports.HORIZONTAL_PADDING = HORIZONTAL_PADDING;
+const CONTENT_BOTTOM_PADDING = 30;
+exports.CONTENT_BOTTOM_PADDING = CONTENT_BOTTOM_PADDING;

package/lib/components/dialog/dialog.d.ts

@@ -1,6 +1,14 @@
 import * as React from "react";
 import { ModalProps } from "../modal/modal";
 
+type PaddingValues = 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8;
+
+interface ContentPaddingInterface {
+  p?: PaddingValues;
+  py?: PaddingValues;
+  px?: PaddingValues;
+}
+
 export type DialogSizes =
   | "auto"
   | "extra-small"
@@ -20,7 +28,7 @@ export interface DialogProps extends ModalProps {
    */
   "aria-label"?: string;
   /**
-   * Prop to specify the aria-labeledby property of the Dialog component
+   * Prop to specify the aria-labelledby property of the Dialog component
    * To be used when the title prop is a custom React Node,
    * or the component is labelled by an internal element other than the title.
    */
@@ -49,6 +57,8 @@ export interface DialogProps extends ModalProps {
   title?: React.ReactNode;
   /** The ARIA role to be applied to the Dialog container */
   role?: string;
+  /** Padding to be set on the Dialog content */
+  contentPadding?: ContentPaddingInterface;
 }
 
 declare function Dialog(props: DialogProps): JSX.Element;

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

@@ -1,4 +1,7 @@
 export const DialogStyle: import("styled-components").StyledComponent<"div", any, {}, never>;
 export const DialogTitleStyle: import("styled-components").StyledComponent<"div", any, {}, never>;
 export const DialogContentStyle: import("styled-components").StyledComponent<"div", any, {}, never>;
-export const DialogInnerContentStyle: import("styled-components").StyledComponent<"div", any, {}, never>;
+export const DialogInnerContentStyle: import("styled-components").StyledComponent<"div", any, {
+    py: any;
+    p: any;
+}, never>;

package/lib/components/dialog/dialog.style.js

@@ -7,12 +7,18 @@ exports.DialogInnerContentStyle = exports.DialogContentStyle = exports.DialogTit
 
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
 
+var _styledSystem = require("styled-system");
+
+var _base = _interopRequireDefault(require("../../style/themes/base"));
+
 var _form = require("../form/form.style");
 
 var _heading = require("../heading/heading.style");
 
 var _iconButton = _interopRequireDefault(require("../icon-button/icon-button.style"));
 
+var _dialog = require("./dialog.config");
+
 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; }
@@ -29,8 +35,51 @@ const dialogSizes = {
   large: "960px",
   "extra-large": "1080px"
 };
-const HORIZONTAL_PADDING = 35;
-const CONTENT_BOTTOM_PADDING = 30;
+
+const calculateWidthValue = props => {
+  const {
+    paddingLeft,
+    paddingRight,
+    padding
+  } = (0, _styledSystem.padding)(props);
+  const paddingValue = paddingLeft ?? paddingRight ?? padding;
+  return paddingValue === undefined ? _dialog.HORIZONTAL_PADDING * 2 : paddingValue * 2;
+};
+
+const calculateFormSpacingValues = (props, isFormContent) => {
+  const {
+    paddingTop,
+    paddingBottom,
+    paddingLeft,
+    paddingRight,
+    padding
+  } = (0, _styledSystem.padding)(props);
+  const spacingTopValue = paddingTop ?? padding ?? _dialog.CONTENT_TOP_PADDING;
+  const spacingRightValue = paddingRight ?? padding ?? _dialog.HORIZONTAL_PADDING;
+  const spacingBottomValue = paddingBottom ?? padding ?? _dialog.CONTENT_BOTTOM_PADDING;
+  const spacingLeftValue = paddingLeft ?? padding ?? _dialog.HORIZONTAL_PADDING;
+  return {
+    "margin-left": spacingLeftValue ? `-${spacingLeftValue}px` : spacingLeftValue,
+    "margin-right": spacingRightValue ? `-${spacingRightValue}px` : spacingRightValue,
+    ...(isFormContent && {
+      "margin-top": spacingTopValue ? `-${spacingTopValue}px` : spacingTopValue,
+      "padding-top": spacingTopValue,
+      "padding-bottom": spacingBottomValue,
+      "padding-left": spacingLeftValue,
+      "padding-right": spacingRightValue
+    }),
+    ...(!isFormContent && {
+      "margin-bottom": spacingBottomValue ? `-${spacingBottomValue}px` : spacingBottomValue,
+      bottom: spacingBottomValue ? `-${spacingBottomValue}px` : spacingBottomValue
+    })
+  };
+};
+
+const calculatePaddingTopInnerContent = ({
+  py,
+  p
+}) => [py, p].some(padding => padding !== undefined) ? 0 : `${_dialog.CONTENT_TOP_PADDING}px`;
+
 const DialogStyle = _styledComponents.default.div`
   background-color: var(--colorsUtilityMajor025);
   box-shadow: var(--boxShadow300);
@@ -62,7 +111,7 @@ const DialogStyle = _styledComponents.default.div`
   dialogHeight
 }) => dialogHeight && (0, _styledComponents.css)`
       height: ${dialogHeight}px;
-    `};
+    `}
 
   ${_form.StyledForm} {
     padding-bottom: 0px;
@@ -70,21 +119,12 @@ const DialogStyle = _styledComponents.default.div`
   }
 
   ${_form.StyledFormContent}.sticky {
-    padding-right: ${HORIZONTAL_PADDING}px;
-    padding-left: ${HORIZONTAL_PADDING}px;
-    padding-top: 20px;
-    margin-right: -${HORIZONTAL_PADDING}px;
-    margin-left: -${HORIZONTAL_PADDING}px;
-    margin-top: -20px;
+    ${props => calculateFormSpacingValues(props, true)}
   }
 
   ${_form.StyledFormFooter}.sticky {
-    margin-left: -${HORIZONTAL_PADDING}px;
-    bottom: -${CONTENT_BOTTOM_PADDING}px;
-    margin-bottom: -${CONTENT_BOTTOM_PADDING}px;
-    width: calc(100% + ${2 * HORIZONTAL_PADDING}px);
-    padding-left: ${HORIZONTAL_PADDING}px;
-    padding-right: ${HORIZONTAL_PADDING}px;
+    width: calc(100% + ${calculateWidthValue}px);
+    ${props => calculateFormSpacingValues(props, false)}
   }
 
   > ${_iconButton.default} {
@@ -101,7 +141,7 @@ const DialogStyle = _styledComponents.default.div`
 `;
 exports.DialogStyle = DialogStyle;
 const DialogTitleStyle = _styledComponents.default.div`
-  padding: 23px ${HORIZONTAL_PADDING}px 0;
+  padding: 23px ${_dialog.HORIZONTAL_PADDING}px 0;
   border-bottom: 1px solid #ccd6db;
   ${({
   showCloseIcon
@@ -133,12 +173,19 @@ const DialogContentStyle = _styledComponents.default.div`
   overflow-y: auto;
   width: 100%;
   flex: 1;
-  padding: 0px ${HORIZONTAL_PADDING}px ${CONTENT_BOTTOM_PADDING}px;
+  padding: 0px ${_dialog.HORIZONTAL_PADDING}px ${_dialog.CONTENT_BOTTOM_PADDING}px;
+  ${_styledSystem.padding}
 `;
 exports.DialogContentStyle = DialogContentStyle;
 const DialogInnerContentStyle = _styledComponents.default.div`
-  padding-top: 20px;
   position: relative;
   flex: 1;
+  padding-top: ${calculatePaddingTopInnerContent};
 `;
-exports.DialogInnerContentStyle = DialogInnerContentStyle;
+exports.DialogInnerContentStyle = DialogInnerContentStyle;
+DialogStyle.defaultProps = {
+  theme: _base.default
+};
+DialogContentStyle.defaultProps = {
+  theme: _base.default
+};

package/lib/components/dialog-full-screen/dialog-full-screen.component.js

@@ -27,6 +27,8 @@ var _iconButton = _interopRequireDefault(require("../icon-button"));
 
 var _icon = _interopRequireDefault(require("../icon"));
 
+var _useLocale = _interopRequireDefault(require("../../hooks/__internal__/useLocale"));
+
 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; }
@@ -56,6 +58,7 @@ const DialogFullScreen = ({
   role = "dialog",
   ...rest
 }) => {
+  const locale = (0, _useLocale.default)();
   const dialogRef = (0, _react.useRef)();
   const headingRef = (0, _react.useRef)();
   const {
@@ -69,7 +72,7 @@ const DialogFullScreen = ({
     if (!showCloseIcon || !onCancel) return null;
     return /*#__PURE__*/_react.default.createElement(_iconButton.default, {
       "data-element": "close",
-      "aria-label": "Close button",
+      "aria-label": locale.dialogFullScreen.ariaLabels.close(),
       onAction: onCancel
     }, /*#__PURE__*/_react.default.createElement(_icon.default, {
       type: "close"

package/lib/components/icon/icon.component.js

@@ -121,7 +121,7 @@ const Icon = /*#__PURE__*/_react.default.forwardRef(({
 
   if (tooltipMessage) {
     const showTooltip = tooltipVisibleFromContext !== undefined ? tooltipVisibleFromContext : tooltipVisible;
-    const visible = disabled ? false : showTooltip;
+    const visible = disabled ? undefined : showTooltip;
     return /*#__PURE__*/_react.default.createElement(_tooltip.default, {
       message: tooltipMessage,
       position: tooltipPositionFromContext || tooltipPosition,

package/lib/components/sidebar/sidebar.component.js

@@ -25,6 +25,8 @@ var _box = _interopRequireDefault(require("../box"));
 
 var _sidebar2 = require("./sidebar.config");
 
+var _useLocale = _interopRequireDefault(require("../../hooks/__internal__/useLocale"));
+
 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; }
@@ -52,13 +54,14 @@ const Sidebar = /*#__PURE__*/_react.default.forwardRef(({
   role = "dialog",
   ...rest
 }, ref) => {
+  const locale = (0, _useLocale.default)();
   let sidebarRef = (0, _react.useRef)();
   if (ref) sidebarRef = ref;
 
   const closeIcon = () => {
     if (!onCancel) return null;
     return /*#__PURE__*/_react.default.createElement(_iconButton.default, {
-      "aria-label": "close",
+      "aria-label": locale.sidebar.ariaLabels.close(),
       onAction: onCancel,
       "data-element": "close"
     }, /*#__PURE__*/_react.default.createElement(_icon.default, {

package/lib/components/toast/toast.component.js

@@ -25,6 +25,8 @@ var _modalManager = _interopRequireDefault(require("../modal/__internal__/modal-
 
 var _events = _interopRequireDefault(require("../../__internal__/utils/helpers/events"));
 
+var _useLocale = _interopRequireDefault(require("../../hooks/__internal__/useLocale"));
+
 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; }
@@ -47,6 +49,7 @@ const Toast = ({
   variant,
   ...restProps
 }) => {
+  const locale = (0, _useLocale.default)();
   const toastRef = (0, _react.useRef)();
   const timer = (0, _react.useRef)();
   const componentClasses = (0, _react.useMemo)(() => {
@@ -85,6 +88,7 @@ const Toast = ({
   function renderCloseIcon() {
     if (!onDismiss) return null;
     return /*#__PURE__*/_react.default.createElement(_iconButton.default, {
+      "aria-label": locale.toast.ariaLabels.close(),
       "data-element": "close",
       onAction: onDismiss
     }, /*#__PURE__*/_react.default.createElement(_icon.default, {

package/lib/locales/en-gb.js

@@ -28,6 +28,16 @@ var _default = {
   date: {
     dateFnsLocale: () => _dateFnsLocales.enGB
   },
+  dialog: {
+    ariaLabels: {
+      close: () => "Close"
+    }
+  },
+  dialogFullScreen: {
+    ariaLabels: {
+      close: () => "Close"
+    }
+  },
   errors: {
     messages: {
       formSummary:
@@ -85,6 +95,11 @@ var _default = {
   link: {
     skipLinkLabel: () => "Skip to main content"
   },
+  sidebar: {
+    ariaLabels: {
+      close: () => "Close"
+    }
+  },
   switch: {
     on: () => "ON",
     off: () => "OFF"
@@ -106,6 +121,11 @@ var _default = {
   tileSelect: {
     deselect: () => "Deselect"
   },
+  toast: {
+    ariaLabels: {
+      close: () => "Close"
+    }
+  },
   wizards: {
     multiStep: {
       buttons: {

package/lib/locales/locale.d.ts

@@ -19,6 +19,16 @@ interface Locale {
   date: {
     dateFnsLocale: () => DateFnsLocale;
   };
+  dialog: {
+    ariaLabels: {
+      close: () => string;
+    };
+  };
+  dialogFullScreen: {
+    ariaLabels: {
+      close: () => string;
+    };
+  };
   errors: {
     messages: {
       formSummary: (
@@ -53,6 +63,14 @@ interface Locale {
     placeholder: () => string;
     noResultsForTerm: (term: string) => string;
   };
+  link: {
+    skipLinkLabel: () => string;
+  };
+  sidebar: {
+    ariaLabels: {
+      close: () => string;
+    };
+  };
   switch: {
     on: () => string;
     off: () => string;
@@ -74,6 +92,11 @@ interface Locale {
   tileSelect: {
     deselect: () => string;
   };
+  toast: {
+    ariaLabels: {
+      close: () => string;
+    };
+  };
   wizards: {
     multiStep: {
       buttons: {

package/lib/locales/pl-pl.js

@@ -28,6 +28,16 @@ var _default = {
   date: {
     dateFnsLocale: () => _dateFnsLocales.pl
   },
+  dialog: {
+    ariaLabels: {
+      close: () => "Zamknij"
+    }
+  },
+  dialogFullScreen: {
+    ariaLabels: {
+      close: () => "Zamknij"
+    }
+  },
   errors: {
     messages: {
       formSummary:
@@ -83,6 +93,11 @@ var _default = {
   link: {
     skipLinkLabel: () => "Przejdź do treści"
   },
+  sidebar: {
+    ariaLabels: {
+      close: () => "Zamknij"
+    }
+  },
   switch: {
     on: () => "WŁ",
     off: () => "WYŁ"
@@ -104,6 +119,11 @@ var _default = {
   tileSelect: {
     deselect: () => "Odznacz"
   },
+  toast: {
+    ariaLabels: {
+      close: () => "Zamknij"
+    }
+  },
   wizards: {
     multiStep: {
       buttons: {

package/lib/style/themes/base/base-theme.config.d.ts

@@ -471,6 +471,7 @@ declare function _default(palette: any): {
         colorsUtilityMajor500: string;
         colorsUtilityMajor800: string;
         colorsUtilityMajor025: string;
+        colorsUtilityMajor010: string;
         colorsUtilityMajor040: string;
         colorsUtilityMajor050: string;
         colorsUtilityMajor075: string;
@@ -570,6 +571,7 @@ declare function _default(palette: any): {
         sizing350: string;
         sizing375: string;
         sizing400: string;
+        sizing450: string;
         sizing500: string;
         sizing600: string;
         sizing700: string;
@@ -605,6 +607,7 @@ declare function _default(palette: any): {
         boxShadow200: string;
         boxShadow300: string;
         boxShadow400: string;
+        boxShadow075: string;
         boxShadow050: string;
         fontWeights400: string;
         fontWeights500: string;
@@ -626,6 +629,9 @@ declare function _default(palette: any): {
         typographyButtonLabelS: string;
         typographyButtonLabelM: string;
         typographyButtonLabelL: string;
+        typographyDatePickerCalendarDateM: string;
+        typographyDatePickerCalendarDayM: string;
+        typographyDatePickerCalendarMonthM: string;
         typographyDialogTitleXs: string;
         typographyDialogTitleS: string;
         typographyDialogTitleMs: string;
@@ -678,6 +684,7 @@ declare function _default(palette: any): {
         typographyMessageHeadingL: string;
         typographyMessageTextM: string;
         typographyMessageTextL: string;
+        typographyPaginationLabelM: string;
         typographyPillLabelS: string;
         typographyPillLabelM: string;
         typographyPillLabelL: string;

package/lib/style/themes/sage/index.d.ts

@@ -88,6 +88,7 @@ declare var _default: {
         colorsUtilityMajor500: string;
         colorsUtilityMajor800: string;
         colorsUtilityMajor025: string;
+        colorsUtilityMajor010: string;
         colorsUtilityMajor040: string;
         colorsUtilityMajor050: string;
         colorsUtilityMajor075: string;
@@ -196,6 +197,7 @@ declare var _default: {
         sizing350: string;
         sizing375: string;
         sizing400: string;
+        sizing450: string;
         sizing500: string;
         sizing600: string;
         sizing700: string;
@@ -248,6 +250,7 @@ declare var _default: {
         boxShadow200: string;
         boxShadow300: string;
         boxShadow400: string;
+        boxShadow075: string;
         boxShadow050: string;
         fontWeights400: string;
         fontWeights500: string;
@@ -269,6 +272,9 @@ declare var _default: {
         typographyButtonLabelS: string;
         typographyButtonLabelM: string;
         typographyButtonLabelL: string;
+        typographyDatePickerCalendarDateM: string;
+        typographyDatePickerCalendarDayM: string;
+        typographyDatePickerCalendarMonthM: string;
         typographyDialogTitleXs: string;
         typographyDialogTitleS: string;
         typographyDialogTitleMs: string;
@@ -321,6 +327,7 @@ declare var _default: {
         typographyMessageHeadingL: string;
         typographyMessageTextM: string;
         typographyMessageTextL: string;
+        typographyPaginationLabelM: string;
         typographyPillLabelS: string;
         typographyPillLabelM: string;
         typographyPillLabelL: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "carbon-react",
-  "version": "104.7.3",
+  "version": "104.10.1",
   "description": "A library of reusable React components for easily building user interfaces.",
   "engineStrict": true,
   "engines": {
@@ -156,7 +156,7 @@
   "dependencies": {
     "@octokit/rest": "^18.12.0",
     "@popperjs/core": "^2.9.0",
-    "@sage/design-tokens": "^1.89.0",
+    "@sage/design-tokens": "^1.91.0",
     "@styled-system/prop-types": "^5.1.5",
     "@tippyjs/react": "^4.2.5",
     "@types/styled-system": "^5.1.11",