carbon-react 132.1.0 → 132.2.1

package/esm/__internal__/focus-trap/focus-trap.component.js

@@ -137,7 +137,7 @@ const FocusTrap = ({
   }, [triggerRefocusFlag, refocusTrap]);
   const [tabIndex, setTabIndex] = useState(0);
   useEffect(() => {
-    // issue in cypress prevents setting tabIndex to -1, instead tabIndex is set to 0 and removed on blur.
+    // tabIndex is set to 0 and removed on blur.
     if (!isOpen) {
       setTabIndex(0);
     }

package/esm/components/loader-spinner/index.d.ts

@@ -0,0 +1,2 @@
+export { default as LoaderSpinner } from "./loader-spinner.component";
+export type { LoaderSpinnerProps } from "./loader-spinner.component";

package/esm/components/loader-spinner/index.js

@@ -0,0 +1 @@
+export { default as LoaderSpinner } from "./loader-spinner.component";

package/esm/components/loader-spinner/loader-spinner.component.d.ts

@@ -0,0 +1,36 @@
+import React from "react";
+import { MarginProps } from "styled-system";
+import { TagProps } from "../../__internal__/utils/helpers/tags/tags";
+import { LoaderSpinnerSizes, LoaderSpinnerVariants } from "./loader-spinner.config";
+export interface LoaderSpinnerProps extends MarginProps, TagProps {
+    /**
+     * The size prop allows a specific size to be set, ranging from
+     * `extra-small` to `extra-large`
+     */
+    size?: LoaderSpinnerSizes;
+    /**
+     * If set to `false` no visual label will be displayed, however
+     * a visually hidden label will still be available for assistive technologies
+     */
+    showSpinnerLabel?: boolean;
+    /**
+     * The variant prop can be used to change the appearance of the component.
+     * Typically both the outer and inner spinner will change color,
+     * however there will still be sufficient contrast between them
+     */
+    variant?: LoaderSpinnerVariants;
+    /** If set to `false` all motion will be suspended */
+    hasMotion?: boolean;
+    /**
+     * If set to `true` the animation type will become tracked, this is
+     * used specifically for when wait times are predictable
+     */
+    isTracked?: boolean;
+    /**
+     * The total animation time (in seconds). Default animation is time `1` second.
+     * For any gradient variants the default animation time is `2` seconds
+     */
+    animationTime?: number;
+}
+export declare const LoaderSpinner: ({ size, showSpinnerLabel, variant, isTracked, hasMotion, animationTime, ...rest }: LoaderSpinnerProps) => React.JSX.Element;
+export default LoaderSpinner;

package/esm/components/loader-spinner/loader-spinner.component.js

@@ -0,0 +1,60 @@
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+import React from "react";
+import PropTypes from "prop-types";
+import tagComponent from "../../__internal__/utils/helpers/tags/tags";
+import { StyledSpinnerWrapper, StyledLabel, StyledSpinnerCircleSvg } from "./loader-spinner.style";
+import { filterStyledSystemMarginProps } from "../../style/utils";
+import useLocale from "../../hooks/__internal__/useLocale";
+import useMediaQuery from "../../hooks/useMediaQuery";
+import Typography from "../typography";
+export const LoaderSpinner = ({
+  size = "medium",
+  showSpinnerLabel = true,
+  variant = "action",
+  isTracked = false,
+  hasMotion = true,
+  animationTime,
+  ...rest
+}) => {
+  const locale = useLocale();
+  const reduceMotion = !useMediaQuery("screen and (prefers-reduced-motion: no-preference)");
+  const isLabelDark = variant !== "inverse" && variant !== "gradient-white";
+  const spinnerLabel = /*#__PURE__*/React.createElement(StyledLabel, {
+    "data-role": "visible-label",
+    variant: "span",
+    fontWeight: "500",
+    size: size,
+    color: isLabelDark ? "var(--colorsUtilityYin090);" : "var(--colorsActionMajorYang100);",
+    fontSize: size === "extra-large" ? "var(--sizing200)" : "var(--sizing175)",
+    lineHeight: size === "extra-large" ? "var(--sizing300)" : "var(--sizing250)"
+  }, locale.loaderSpinner.loading());
+  const isGradientVariant = variant === "gradient-white" || variant === "gradient-grey";
+  const calculateDefaultAnimationTime = () => {
+    if (animationTime) {
+      return animationTime;
+    }
+    return isGradientVariant ? 2 : 1;
+  };
+  return /*#__PURE__*/React.createElement(StyledSpinnerWrapper, _extends({
+    size: size,
+    role: "status"
+  }, tagComponent("loader-spinner", rest), filterStyledSystemMarginProps(rest)), reduceMotion ? spinnerLabel : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(StyledSpinnerCircleSvg, {
+    role: "presentation",
+    size: size,
+    variant: variant,
+    hasMotion: hasMotion,
+    isTracked: isTracked,
+    isGradientVariant: isGradientVariant,
+    animationTime: calculateDefaultAnimationTime(),
+    viewBox: "0 0 24 24"
+  }, /*#__PURE__*/React.createElement("circle", {
+    "data-role": "outer-arc"
+  }), /*#__PURE__*/React.createElement("circle", {
+    "data-role": "inner-arc"
+  })), showSpinnerLabel ? spinnerLabel : /*#__PURE__*/React.createElement(Typography, {
+    "data-role": "hidden-label",
+    variant: "span",
+    screenReaderOnly: true
+  }, locale.loaderSpinner.loading())));
+};
+export default LoaderSpinner;

package/esm/components/loader-spinner/loader-spinner.config.d.ts

@@ -0,0 +1,11 @@
+declare const LOADER_SPINNER_VARIANTS: readonly ["action", "neutral", "inverse", "gradient-grey", "gradient-white"];
+declare type LoaderSpinnerVariants = typeof LOADER_SPINNER_VARIANTS[number];
+declare const LOADER_SPINNER_SIZES: readonly ["extra-small", "small", "medium", "large", "extra-large"];
+declare type LoaderSpinnerSizes = typeof LOADER_SPINNER_SIZES[number];
+declare type LoaderSpinnerSizeParams = Record<LoaderSpinnerSizes, {
+    wrapperDimensions: number;
+    strokeWidth: number;
+}>;
+declare const LOADER_SPINNER_SIZE_PARAMS: LoaderSpinnerSizeParams;
+export type { LoaderSpinnerSizes, LoaderSpinnerVariants };
+export { LOADER_SPINNER_SIZES, LOADER_SPINNER_VARIANTS, LOADER_SPINNER_SIZE_PARAMS, };

package/esm/components/loader-spinner/loader-spinner.config.js

@@ -0,0 +1,25 @@
+const LOADER_SPINNER_VARIANTS = ["action", "neutral", "inverse", "gradient-grey", "gradient-white"];
+const LOADER_SPINNER_SIZES = ["extra-small", "small", "medium", "large", "extra-large"];
+const LOADER_SPINNER_SIZE_PARAMS = {
+  "extra-small": {
+    wrapperDimensions: 20,
+    strokeWidth: 4
+  },
+  small: {
+    wrapperDimensions: 32,
+    strokeWidth: 4
+  },
+  medium: {
+    wrapperDimensions: 56,
+    strokeWidth: 3.3
+  },
+  large: {
+    wrapperDimensions: 80,
+    strokeWidth: 3.7
+  },
+  "extra-large": {
+    wrapperDimensions: 104,
+    strokeWidth: 3.7
+  }
+};
+export { LOADER_SPINNER_SIZES, LOADER_SPINNER_VARIANTS, LOADER_SPINNER_SIZE_PARAMS };

package/esm/components/loader-spinner/loader-spinner.style.d.ts

@@ -0,0 +1,13 @@
+/// <reference types="react" />
+import { LoaderSpinnerProps } from "./loader-spinner.component";
+export declare const StyledSpinnerWrapper: import("styled-components").StyledComponent<"div", any, Pick<LoaderSpinnerProps, "size">, never>;
+export declare const StyledLabel: import("styled-components").StyledComponent<{
+    ({ "data-component": dataComponent, variant, as, id, fontSize, fontWeight, textTransform, lineHeight, textDecoration, display, listStyleType, whiteSpace, wordWrap, textAlign, textOverflow, truncate, color, backgroundColor, bg, opacity, children, className, screenReaderOnly, isDisabled, "aria-hidden": ariaHidden, ...rest }: import("../typography").TypographyProps): import("react").JSX.Element;
+    displayName: string;
+}, any, Required<Pick<LoaderSpinnerProps, "size">>, never>;
+interface StyledSpinnerCircleSvgProps extends Omit<LoaderSpinnerProps, "showSpinnerLabel"> {
+    isGradientVariant?: boolean;
+    size: Required<LoaderSpinnerProps>["size"];
+}
+export declare const StyledSpinnerCircleSvg: import("styled-components").StyledComponent<"svg", any, StyledSpinnerCircleSvgProps, never>;
+export {};

package/esm/components/loader-spinner/loader-spinner.style.js

@@ -0,0 +1,127 @@
+import styled, { css } from "styled-components";
+import { margin } from "styled-system";
+import { LOADER_SPINNER_SIZE_PARAMS } from "./loader-spinner.config";
+import Typography from "../typography";
+const calculateColors = (isWheel, variant) => {
+  switch (variant) {
+    case "neutral":
+      return isWheel ? "var(--colorsSemanticNeutral500)" : "var(--colorsSemanticNeutral200)";
+    case "gradient-grey":
+      return isWheel ? "#00D639" : "#0000001A";
+    case "gradient-white":
+      return isWheel ? "#00D639" : "var(--colorsActionMajorYang100)";
+    case "inverse":
+      return "var(--colorsActionMajorYang100)";
+    default:
+      return isWheel ? "var(--colorsActionMajor500)" : "var(--colorsActionMajor150)";
+  }
+};
+export const StyledSpinnerWrapper = styled.div`
+  ${margin}
+  display: flex;
+  flex-direction: ${({
+  size
+}) => size === "extra-small" ? "row" : "column"};
+`;
+export const StyledLabel = styled(Typography)`
+  ${({
+  size
+}) => css`
+      display: flex;
+      justify-content: center;
+      ${size !== "extra-small" && `width: ${LOADER_SPINNER_SIZE_PARAMS[size].wrapperDimensions}px`};
+      ${size === "extra-small" && `margin-left: var(--spacing100)`};
+    `}
+`;
+export const StyledSpinnerCircleSvg = styled.svg`
+  ${({
+  size,
+  isTracked,
+  hasMotion,
+  isGradientVariant,
+  animationTime,
+  variant
+}) => {
+  const dimensions = `${LOADER_SPINNER_SIZE_PARAMS[size].wrapperDimensions}px`;
+  return size && css`
+        width: ${dimensions};
+        height: ${dimensions};
+        min-width: ${dimensions};
+        min-height: ${dimensions};
+
+        circle[data-role="outer-arc"] {
+          fill: transparent;
+          stroke-width: ${LOADER_SPINNER_SIZE_PARAMS[size].strokeWidth}px;
+          stroke: ${calculateColors(false, variant)};
+          ${variant === "inverse" && `stroke-opacity: 0.3`}
+          cx: 12px;
+          cy: 12px;
+          r: 10px;
+        }
+
+        circle[data-role="inner-arc"] {
+          fill: transparent;
+          stroke-width: ${LOADER_SPINNER_SIZE_PARAMS[size].strokeWidth}px;
+          stroke: ${calculateColors(true, variant)};
+          stroke-linecap: round;
+          stroke-dasharray: 100px;
+          stroke-dashoffset: 80px;
+          transform-origin: 12px 12px 0px;
+          cx: 12px;
+          cy: 12px;
+          r: 10px;
+          transform: rotate(270deg);
+
+          @keyframes gradientAnimation {
+            0% {
+              stroke: #00d639;
+            }
+
+            33% {
+              stroke: #11afff;
+            }
+
+            66% {
+              stroke: #8f49fe;
+            }
+          }
+
+          @keyframes trackedAnimation {
+            from {
+              stroke-dasharray: 100;
+              stroke-dashoffset: 100;
+            }
+
+            to {
+              stroke-dasharray: 100;
+              stroke-dashoffset: 20;
+            }
+          }
+
+          @keyframes untrackedAnimation {
+            0% {
+              transform: rotate(0deg);
+              stroke-dasharray: 100;
+            }
+
+            40% {
+              stroke-dasharray: 80;
+            }
+
+            80% {
+              stroke-dasharray: 100;
+            }
+
+            100% {
+              transform: rotate(360deg);
+            }
+          }
+
+          animation-name: ${isTracked && !isGradientVariant ? "trackedAnimation" : "untrackedAnimation"},
+            ${variant === "gradient-grey" || variant === "gradient-white" && "gradientAnimation" ? "gradientAnimation" : "none"};
+          ${hasMotion && `animation-duration: ${animationTime}s`};
+          animation-timing-function: cubic-bezier(0.2, 0.1, 0.8, 1);
+          animation-iteration-count: ${hasMotion ? "infinite" : "none"};
+        `;
+}};
+`;

package/esm/components/menu/__internal__/submenu/submenu.component.js

@@ -30,7 +30,7 @@ const Submenu = /*#__PURE__*/React.forwardRef(({
   onClick,
   ...rest
 }, ref) => {
-  const submenuRef = useRef(null);
+  const [submenuRef, setSubmenuRef] = useState(null);
   const submenuId = useRef(guid());
   const menuContext = useContext(MenuContext);
   const {
@@ -43,6 +43,7 @@ const Submenu = /*#__PURE__*/React.forwardRef(({
   const [submenuFocusId, setSubmenuFocusId] = useState(null);
   const [submenuItemIds, setSubmenuItemIds] = useState([]);
   const [characterString, setCharacterString] = useState("");
+  const [applyFocusRadius, setApplyFocusRadius] = useState(false);
   const shiftTabPressed = useRef(false);
   const focusFirstMenuItemOnOpen = useRef(false);
   const numberOfChildren = submenuItemIds.length;
@@ -51,15 +52,15 @@ const Submenu = /*#__PURE__*/React.forwardRef(({
   } = useContext(FixedNavigationBarContext);
   const onSubmenuOpen = useStableCallback(onSubmenuOpenProp);
   const blockIndex = useMemo(() => {
-    const items = submenuRef.current?.querySelectorAll(BLOCK_INDEX_SELECTOR);
+    const items = submenuRef?.querySelectorAll(BLOCK_INDEX_SELECTOR);
     if (items && submenuOpen && numberOfChildren) {
       const childrenArray = Array.from(items);
-      const scrollableBlock = submenuRef.current?.querySelector(`[data-component='${SCROLLABLE_BLOCK}']`);
+      const scrollableBlock = submenuRef?.querySelector(`[data-component='${SCROLLABLE_BLOCK}']`);
       const index = scrollableBlock ? childrenArray.indexOf(scrollableBlock) : -1;
       return scrollableBlock?.querySelector(`[data-component='${SCROLLABLE_BLOCK_PARENT}']`) ? index + 1 : index;
     }
     return -1;
-  }, [submenuOpen, numberOfChildren]);
+  }, [submenuOpen, numberOfChildren, submenuRef]);
   const characterTimer = useRef(null);
   const startCharacterTimeout = useCallback(() => {
     characterTimer.current = setTimeout(() => {
@@ -77,6 +78,35 @@ const Submenu = /*#__PURE__*/React.forwardRef(({
     setSubmenuOpen(true);
     setOpenSubmenuId(submenuId.current);
   }, [setOpenSubmenuId]);
+  const lastMenuItemElement = useRef();
+  useEffect(() => {
+    const handleBorderRadiusStyling = () => {
+      // Finds all ul elements that are not submenus
+      const ulElements = Array.from(submenuRef?.querySelectorAll("ul:not([data-component='submenu'])") || /* istanbul ignore next */[]);
+
+      // Terminate early if there are no ul elements as we have nothing we need to apply styles to.
+      if (ulElements.length === 0) return;
+
+      // Get the last menu item in the submenu
+      const lastMenuItem = Array.from(submenuRef?.querySelectorAll("[data-component='menu-item']") || /* istanbul ignore next */[]).pop();
+      lastMenuItemElement.current = lastMenuItem;
+
+      // Get the last segment block
+      const lastSegmentBlock = ulElements.pop();
+
+      // Get all the menu items from the last segment block
+      const segmentBlockMenuItems = Array.from(lastSegmentBlock?.querySelectorAll("[data-component='menu-item']") || /* istanbul ignore next */[]);
+
+      // Get the last menu item in the last segment block
+      const lastMenuItemInSegmentBlock = segmentBlockMenuItems.pop();
+      // Check if the last item in the segment block is the same as the last MenuItem in the submenu
+      const menuItemsMatch = !!lastMenuItemInSegmentBlock && lastMenuItemInSegmentBlock === lastMenuItem;
+      setApplyFocusRadius(menuItemsMatch);
+    };
+    if (submenuOpen && submenuRef) {
+      handleBorderRadiusStyling();
+    }
+  }, [submenuOpen, submenuRef]);
   useEffect(() => {
     if (submenuOpen && onSubmenuOpen) {
       onSubmenuOpen();
@@ -144,6 +174,7 @@ const Submenu = /*#__PURE__*/React.forwardRef(({
       if (Events.isUpKey(event)) {
         event.preventDefault();
         shiftTabPressed.current = false;
+        setApplyFocusRadius(false);
         if (nextIndex > 0) {
           nextIndex -= 1;
         }
@@ -194,15 +225,15 @@ const Submenu = /*#__PURE__*/React.forwardRef(({
   }, [submenuItemIds, submenuOpen, href, numberOfChildren, submenuFocusId, findCurrentIndex, openSubmenu, closeSubmenu, onKeyDown, characterString, restartCharacterTimeout, startCharacterTimeout]);
   useEffect(() => {
     /* istanbul ignore else */
-    if (submenuRef.current && children) {
-      const items = submenuRef.current?.querySelectorAll(ALL_CHILDREN_SELECTOR);
+    if (submenuRef && children) {
+      const items = submenuRef?.querySelectorAll(ALL_CHILDREN_SELECTOR);
 
       /* istanbul ignore else */
       if (items) {
         setSubmenuItemIds(Array.from(items).map(item => item.getAttribute("id")));
       }
     }
-  }, [children, submenuOpen]);
+  }, [children, submenuOpen, submenuRef]);
   useEffect(() => {
     if (focusFirstMenuItemOnOpen.current && submenuOpen && !submenuFocusId && submenuItemIds.length) {
       focusFirstMenuItemOnOpen.current = false;
@@ -221,7 +252,7 @@ const Submenu = /*#__PURE__*/React.forwardRef(({
     }
   };
   useEffect(() => {
-    const items = submenuRef.current?.querySelectorAll(ALL_CHILDREN_SELECTOR);
+    const items = submenuRef?.querySelectorAll(ALL_CHILDREN_SELECTOR);
     if (items && characterString !== "") {
       const submenuChildren = Array.from(items);
       const nextItem = characterNavigation(characterString, submenuChildren);
@@ -229,7 +260,7 @@ const Submenu = /*#__PURE__*/React.forwardRef(({
         setSubmenuFocusId(nextItem.id);
       }
     }
-  }, [characterString, submenuItemIds]);
+  }, [submenuRef, characterString, submenuItemIds]);
   if (inFullscreenView) {
     return /*#__PURE__*/React.createElement(StyledSubmenuWrapper, {
       "data-component": "submenu-wrapper",
@@ -251,7 +282,8 @@ const Submenu = /*#__PURE__*/React.forwardRef(({
       variant: variant,
       menuType: menuType,
       inFullscreenView: inFullscreenView,
-      ref: submenuRef
+      ref: setSubmenuRef,
+      applyFocusRadiusStyling: false
     }, /*#__PURE__*/React.createElement(SubmenuContext.Provider, {
       value: {
         handleKeyDown,
@@ -266,7 +298,7 @@ const Submenu = /*#__PURE__*/React.forwardRef(({
     onMouseLeave: () => closeSubmenu(),
     isSubmenuOpen: submenuOpen,
     onClick: handleClickInside,
-    ref: submenuRef
+    ref: setSubmenuRef
   }, /*#__PURE__*/React.createElement(StyledMenuItemWrapper, _extends({}, rest, {
     className: className,
     menuType: menuType,
@@ -289,7 +321,8 @@ const Submenu = /*#__PURE__*/React.forwardRef(({
     variant: variant,
     menuType: menuType,
     role: blockIndex === 0 ? "presentation" : "list",
-    maxHeight: submenuMaxHeight
+    maxHeight: submenuMaxHeight,
+    applyFocusRadiusStyling: applyFocusRadius
   }, /*#__PURE__*/React.createElement(SubmenuContext.Provider, {
     value: {
       submenuFocusId,

package/esm/components/menu/__internal__/submenu/submenu.style.d.ts

@@ -11,6 +11,7 @@ interface StyledSubmenuWrapperProps extends SharedStyleProps {
 interface StyledSubmenuProps extends SharedStyleProps, Pick<SubmenuProps, "variant"> {
     submenuDirection?: string;
     maxHeight?: string;
+    applyFocusRadiusStyling: boolean;
 }
 declare const StyledSubmenuWrapper: import("styled-components").StyledComponent<"div", any, StyledSubmenuWrapperProps, never>;
 declare const StyledSubmenu: import("styled-components").StyledComponent<"ul", any, StyledSubmenuProps, never>;

package/esm/components/menu/__internal__/submenu/submenu.style.js

@@ -1,10 +1,13 @@
 import styled, { css } from "styled-components";
+import StyledScrollableBlock from "../../../menu/scrollable-block/scrollable-block.style";
 import { baseTheme } from "../../../../style/themes";
 import { StyledLink } from "../../../link/link.style";
 import { StyledMenuItem } from "../../menu.style";
+import StyledBox from "../../../box/box.style";
 import StyledMenuItemWrapper from "../../menu-item/menu-item.style";
 import StyledIcon from "../../../icon/icon.style";
 import menuConfigVariants from "../../menu.config";
+import { StyledSegmentChildren } from "../../menu-segment-title/menu-segment-title.style";
 const StyledSubmenuWrapper = styled.div`
   position: relative;
   width: fit-content;
@@ -38,7 +41,8 @@ const StyledSubmenu = styled.ul`
   submenuDirection,
   variant,
   inFullscreenView,
-  maxHeight
+  maxHeight,
+  applyFocusRadiusStyling
 }) => css`
     ${!inFullscreenView && menuType && css`
       box-shadow: var(--boxShadow100);
@@ -71,6 +75,32 @@ const StyledSubmenu = styled.ul`
         border-bottom-left-radius: var(--borderRadius100);
         border-bottom-right-radius: var(--borderRadius100);
       }
+
+      & ${StyledSegmentChildren} > ${StyledMenuItem}:last-of-type a,
+      ${StyledSegmentChildren} > ${StyledMenuItem}:last-of-type button,
+      ${StyledSegmentChildren} > ${StyledMenuItem}:last-of-type > span,
+      ${StyledSegmentChildren} > ${StyledMenuItem}:last-of-type > div {
+        border-bottom-right-radius: var(--borderRadius000);
+        border-bottom-left-radius: var(--borderRadius000);
+
+        :focus {
+          border-bottom-right-radius: ${applyFocusRadiusStyling ? "var(--borderRadius100)" : "var(--borderRadius000)"};
+          border-bottom-left-radius: ${applyFocusRadiusStyling ? "var(--borderRadius100)" : "var(--borderRadius000)"};
+        }
+      }
+
+      &&&& ${StyledScrollableBlock} {
+        ${StyledBox} {
+          border-bottom-right-radius: var(--borderRadius000);
+          border-bottom-left-radius: ${applyFocusRadiusStyling ? "var(--borderRadius100)" : "var(--borderRadius000)"};
+
+          ${StyledMenuItem}:last-child ${StyledLink}, ${StyledMenuItem}:last-child a,
+          ${StyledMenuItem}:last-child button {
+            border-bottom-right-radius: var(--borderRadius000);
+            border-bottom-left-radius: ${applyFocusRadiusStyling ? "var(--borderRadius100)" : "var(--borderRadius000)"};
+          }
+        }
+      }
     `}
 
     display: block;

package/esm/components/modal/__internal__/modal-manager.js

@@ -2,7 +2,7 @@ function _classCallCheck(instance, Constructor) { if (!(instance instanceof Cons
 function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, _toPropertyKey(descriptor.key), descriptor); } }
 function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }
 function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : String(i); }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
 function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
 let ModalManagerInstance = /*#__PURE__*/function () {
   function ModalManagerInstance() {
@@ -34,7 +34,7 @@ let ModalManagerInstance = /*#__PURE__*/function () {
     }
     this.modalList = window.__CARBON_INTERNALS_MODAL_LIST;
   }
-  _createClass(ModalManagerInstance, [{
+  return _createClass(ModalManagerInstance, [{
     key: "getTopModal",
     value: function getTopModal() {
       if (!this.modalList.length) {
@@ -93,7 +93,6 @@ let ModalManagerInstance = /*#__PURE__*/function () {
       }
     }
   }]);
-  return ModalManagerInstance;
 }();
 const ModalManager = new ModalManagerInstance();
 export { ModalManagerInstance };

package/esm/hooks/__internal__/useScrollBlock/scroll-block-manager.js

@@ -2,7 +2,7 @@ function _classCallCheck(instance, Constructor) { if (!(instance instanceof Cons
 function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, _toPropertyKey(descriptor.key), descriptor); } }
 function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }
 function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : String(i); }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
 function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
 // TODO: This component can be refactored to remove redundant code
 // once we can confirm that all Sage products use version 105.0.0^
@@ -25,7 +25,7 @@ let ScrollBlockManager = /*#__PURE__*/function () {
     // TODO: originalValues can be removed
     this.originalValues = window.__CARBON_INTERNALS_SCROLL_BLOCKERS.originalValues;
   }
-  _createClass(ScrollBlockManager, [{
+  return _createClass(ScrollBlockManager, [{
     key: "registerComponent",
     value: function registerComponent(id) {
       this.components[id] = true;
@@ -69,6 +69,5 @@ let ScrollBlockManager = /*#__PURE__*/function () {
       return Object.entries(this.components).length !== 0;
     }
   }]);
-  return ScrollBlockManager;
 }();
 export default ScrollBlockManager;

package/esm/locales/__internal__/es-es.js

@@ -89,6 +89,9 @@ const esES = {
   loader: {
     loading: () => "Cargando"
   },
+  loaderSpinner: {
+    loading: () => "Cargando..."
+  },
   menuFullscreen: {
     ariaLabels: {
       closeButton: () => "Cerrar"

package/esm/locales/en-gb.js

@@ -91,6 +91,9 @@ const enGB = {
   loader: {
     loading: () => "Loading"
   },
+  loaderSpinner: {
+    loading: () => "Loading..."
+  },
   menuFullscreen: {
     ariaLabels: {
       closeButton: () => "Close"

package/esm/locales/locale.d.ts

@@ -74,6 +74,9 @@ interface Locale {
     loader: {
         loading: () => string;
     };
+    loaderSpinner: {
+        loading: () => string;
+    };
     menuFullscreen: {
         ariaLabels: {
             closeButton: () => string;

package/lib/__internal__/character-count/character-count.style.js

@@ -9,7 +9,7 @@ var _base = _interopRequireDefault(require("../../style/themes/base"));
 var _visuallyHidden = _interopRequireDefault(require("../../style/utils/visually-hidden"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 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 && Object.prototype.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 _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 StyledCharacterCountWrapper = exports.StyledCharacterCountWrapper = _styledComponents.default.div``;
 const StyledCharacterCount = exports.StyledCharacterCount = _styledComponents.default.div`
   text-align: left;

package/lib/__internal__/checkable-input/checkable-input.component.js

@@ -14,7 +14,7 @@ var _guid = _interopRequireDefault(require("../utils/helpers/guid"));
 var _useInputAccessibility = _interopRequireDefault(require("../../hooks/__internal__/useInputAccessibility"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 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 && Object.prototype.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 _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() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 const CheckableInput = /*#__PURE__*/_react.default.forwardRef(({
   ariaLabelledBy,

package/lib/__internal__/checkable-input/checkable-input.style.js

@@ -13,7 +13,7 @@ var _help = _interopRequireDefault(require("../../components/help/help.style"));
 var _validationIcon = _interopRequireDefault(require("../validations/validation-icon.style"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 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 && Object.prototype.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 _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 StyledCheckableInput = exports.StyledCheckableInput = _styledComponents.default.div`
   display: inline-block;
   position: relative;

package/lib/__internal__/checkable-input/hidden-checkable-input.component.js

@@ -10,7 +10,7 @@ var _hiddenCheckableInput = _interopRequireDefault(require("./hidden-checkable-i
 var _inputBehaviour = require("../input-behaviour");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 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 && Object.prototype.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 _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() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 const HiddenCheckableInput = /*#__PURE__*/_react.default.forwardRef(({
   ariaDescribedBy,