carbon-react 142.3.2 → 142.4.0

package/esm/components/flat-table/flat-table-cell/flat-table-cell.component.d.ts

@@ -1,7 +1,8 @@
 import React from "react";
 import { PaddingProps } from "styled-system";
 import { TableBorderSize, TableCellAlign } from "..";
-export interface FlatTableCellProps extends PaddingProps {
+import { TagProps } from "../../../__internal__/utils/helpers/tags";
+export interface FlatTableCellProps extends PaddingProps, Omit<TagProps, "data-component"> {
     /** Content alignment */
     align?: TableCellAlign;
     /** Cell content */
@@ -24,7 +25,7 @@ export interface FlatTableCellProps extends PaddingProps {
     id?: string;
 }
 export declare const FlatTableCell: {
-    ({ align, children, pl, width, truncate, title, colspan, rowspan, id, ...rest }: FlatTableCellProps): React.JSX.Element;
+    ({ align, children, pl, width, truncate, title, colspan, rowspan, id, "data-element": dataElement, "data-role": dataRole, ...rest }: FlatTableCellProps): React.JSX.Element;
     displayName: string;
 };
 export default FlatTableCell;

package/esm/components/flat-table/flat-table-cell/flat-table-cell.component.js

@@ -15,6 +15,8 @@ export const FlatTableCell = ({
   colspan,
   rowspan,
   id,
+  "data-element": dataElement,
+  "data-role": dataRole,
   ...rest
 }) => {
   const internalId = useRef(id || guid());
@@ -41,7 +43,9 @@ export const FlatTableCell = ({
     makeCellSticky: makeCellSticky,
     className: makeCellSticky ? "isSticky" : undefined,
     align: align,
-    "data-element": "flat-table-cell",
+    "data-component": "flat-table-cell",
+    "data-element": dataElement || "flat-table-cell",
+    "data-role": dataRole,
     pl: pl,
     onClick: isExpandableCell ? onClick : undefined,
     tabIndex: isExpandableCell ? tabIndex : undefined,
@@ -61,7 +65,8 @@ export const FlatTableCell = ({
     onFocus: handleOnFocus
   }), /*#__PURE__*/React.createElement(StyledCellContent, {
     title: truncate && !title && typeof children === "string" ? children : title,
-    expandable: expandable
+    expandable: expandable,
+    "data-role": "flat-table-cell-content"
   }, expandable && isFirstCell && /*#__PURE__*/React.createElement(Icon, {
     type: "chevron_down_thick",
     mr: "8px"

package/esm/components/flat-table/flat-table-header/flat-table-header.component.d.ts

@@ -1,7 +1,8 @@
 import React from "react";
 import { PaddingProps } from "styled-system";
+import { TagProps } from "../../../__internal__/utils/helpers/tags";
 import { TableBorderSize, TableCellAlign } from "..";
-export interface FlatTableHeaderProps extends PaddingProps {
+export interface FlatTableHeaderProps extends PaddingProps, Omit<TagProps, "data-component"> {
     /** Content alignment */
     align?: TableCellAlign;
     /** If true sets alternative background color */
@@ -22,7 +23,7 @@ export interface FlatTableHeaderProps extends PaddingProps {
     id?: string;
 }
 export declare const FlatTableHeader: {
-    ({ align, children, colspan, rowspan, width, py, px, id, ...rest }: FlatTableHeaderProps): React.JSX.Element;
+    ({ align, children, colspan, rowspan, width, py, px, id, "data-element": dataElement, "data-role": dataRole, ...rest }: FlatTableHeaderProps): React.JSX.Element;
     displayName: string;
 };
 export default FlatTableHeader;

package/esm/components/flat-table/flat-table-header/flat-table-header.component.js

@@ -14,6 +14,8 @@ export const FlatTableHeader = ({
   py,
   px,
   id,
+  "data-element": dataElement,
+  "data-role": dataRole,
   ...rest
 }) => {
   const ref = useRef(null);
@@ -33,8 +35,7 @@ export const FlatTableHeader = ({
     makeCellSticky: makeCellSticky,
     className: makeCellSticky ? "isSticky" : undefined,
     align: align,
-    colorTheme: colorTheme,
-    "data-element": "flat-table-header"
+    colorTheme: colorTheme
   }, colspan !== undefined && {
     colSpan: Number(colspan)
   }, rowspan !== undefined && {
@@ -44,8 +45,13 @@ export const FlatTableHeader = ({
     py: py,
     px: px
   }, rest, {
+    "data-component": "flat-table-header",
+    "data-element": dataElement || "flat-table-header",
+    "data-role": dataRole,
     id: internalId.current
-  }), /*#__PURE__*/React.createElement("div", null, children));
+  }), /*#__PURE__*/React.createElement("div", {
+    "data-role": "flat-table-header-content"
+  }, children));
 };
 FlatTableHeader.displayName = "FlatTableHeader";
 export default FlatTableHeader;

package/esm/components/flat-table/flat-table-row/flat-table-row.component.js

@@ -131,6 +131,8 @@ const FlatTableRow = /*#__PURE__*/React.forwardRef(({
   }
   function handleCellKeyDown(ev) {
     const isEnterOrSpaceKey = Event.isEnterKey(ev) || Event.isSpaceKey(ev);
+
+    /* istanbul ignore else */
     if (isEnterOrSpaceKey) {
       ev.preventDefault();
       toggleExpanded();

package/esm/components/flat-table/flat-table-row-header/flat-table-row-header.component.d.ts

@@ -2,7 +2,7 @@ import React from "react";
 import { PaddingProps } from "styled-system";
 import { TableBorderSize, TableCellAlign } from "..";
 import { TagProps } from "../../../__internal__/utils/helpers/tags/tags";
-export interface FlatTableRowHeaderProps extends PaddingProps, TagProps {
+export interface FlatTableRowHeaderProps extends PaddingProps, Omit<TagProps, "data-component"> {
     /** Content alignment */
     align?: TableCellAlign;
     /** RowHeader content */

package/esm/components/flat-table/flat-table-row-header/flat-table-row-header.component.js

@@ -41,6 +41,7 @@ export const FlatTableRowHeader = ({
     bringToFront(ev, "TH");
   };
   const handleOnKeyDown = useCallback(ev => {
+    /* istanbul ignore else */
     if (isExpandableCell && onKeyDown) {
       onKeyDown(ev);
     }
@@ -48,11 +49,7 @@ export const FlatTableRowHeader = ({
   return /*#__PURE__*/React.createElement(StyledFlatTableRowHeader, _extends({
     leftPosition: stickyAlignment === "left" ? leftPosition || 0 : undefined,
     rightPosition: stickyAlignment === "right" ? rightPosition || 0 : undefined,
-    align: align
-  }, tagComponent("flat-table-row-header", {
-    "data-element": "flat-table-row-header",
-    ...rest
-  }), {
+    align: align,
     width: width,
     py: py || "10px",
     px: px || 3,
@@ -68,13 +65,17 @@ export const FlatTableRowHeader = ({
     rowSpan: Number(rowspan)
   }, {
     "data-selected": isInSelectedRow && isExpandableCell,
-    "data-highlighted": isInHighlightedRow && isExpandableCell
-  }, rest, {
-    id: internalId.current,
+    "data-highlighted": isInHighlightedRow && isExpandableCell,
     onFocus: handleOnFocus
+  }, rest, tagComponent("flat-table-row-header", {
+    "data-element": "flat-table-row-header",
+    ...rest
+  }), {
+    id: internalId.current
   }), /*#__PURE__*/React.createElement(StyledFlatTableRowHeaderContent, {
     title: truncate && !title && typeof children === "string" ? children : title,
-    expandable: expandable
+    expandable: expandable,
+    "data-role": "flat-table-row-header-content"
   }, expandable && isFirstCell && /*#__PURE__*/React.createElement(Icon, {
     type: "chevron_down_thick",
     mr: "8px"

package/esm/components/grouped-character/grouped-character.component.js

@@ -50,7 +50,7 @@ const GroupedCharacter = /*#__PURE__*/React.forwardRef(({
     const {
       selectionEnd
     } = target;
-    let newCursorPos = selectionEnd ?? 0;
+    let newCursorPos = selectionEnd ?? /* istanbul ignore next */0;
     const rawValue = sanitizeValue(target.value);
     const formattedValue = formatValue(rawValue);
     const isLastPosition = target.value.length === newCursorPos;

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

@@ -0,0 +1,2 @@
+export { default } from "./loader-star.component";
+export type { LoaderStarProps } from "./loader-star.component";

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

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

package/esm/components/loader-star/internal/star.component.d.ts

@@ -0,0 +1,9 @@
+interface StarProps {
+    starContainerClassName: "star-1" | "star-2" | "star-3";
+    gradientId: "gradient1" | "gradient2" | "gradient3";
+}
+declare const Star: {
+    ({ starContainerClassName, gradientId, }: StarProps): JSX.Element;
+    displayName: string;
+};
+export default Star;

package/esm/components/loader-star/internal/star.component.js

@@ -0,0 +1,40 @@
+import React from "react";
+import PropTypes from "prop-types";
+import { GradientStopBottom, GradientStopTop, StyledLoaderStarContainer, StyledStarSVG } from "./star.style";
+const Star = ({
+  starContainerClassName,
+  gradientId
+}) => {
+  return /*#__PURE__*/React.createElement(StyledLoaderStarContainer, {
+    "data-component": "star",
+    role: "presentation",
+    className: starContainerClassName
+  }, /*#__PURE__*/React.createElement(StyledStarSVG, {
+    className: "ai-star-svg",
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 217 216"
+  }, /*#__PURE__*/React.createElement("path", {
+    className: "ai-star-path",
+    fill: "#000",
+    fillRule: "evenodd",
+    d: "M108.502 215.994c-.166.006-.334.006-.502.006-7.218 0-11.975-3.217-15.497-8.335-4.396-5.656-7.56-13.591-10.338-21.896l-.597-1.807-.667-2.063-.91-2.87-1.225-3.904c-1.831-5.82-3.65-11.42-5.751-16.135-1.456-2.661-3.075-5.078-4.921-7.146-.356-.391-.72-.777-1.094-1.156-4.054-4.038-9.808-7.093-16.262-9.726-14.49-4.937-33.33-8.698-43.486-17.634C2.766 119.712 0 114.918 0 108l.003-.413c.108-6.697 2.852-11.372 7.25-14.916 10.155-8.935 28.995-12.696 43.485-17.633C57.192 72.405 62.946 69.35 67 65.312c.373-.38.738-.765 1.094-1.156 1.846-2.068 3.465-4.485 4.922-7.145 2.567-5.764 4.713-12.849 6.976-20.04l.91-2.87.666-2.063.338-1.028c2.84-8.586 6.063-16.843 10.598-22.675C95.954 3.32 100.592.13 107.57.004L108 0c.168 0 .336 0 .502.006L109 0l.405.003c6.999.119 11.645 3.316 15.102 8.347 5.071 6.529 8.5 16.09 11.592 25.75l.335 1.054 2.362 7.501c1.645 5.178 3.304 10.125 5.19 14.358 1.456 2.66 3.074 5.075 4.92 7.142.356.392.72.778 1.094 1.157 4.054 4.038 9.808 7.093 16.262 9.726 14.49 4.937 33.33 8.698 43.486 17.634C214.234 96.288 217 101.082 217 108c0 6.918-2.766 11.712-7.252 15.328-10.156 8.936-28.996 12.697-43.486 17.634-6.454 2.633-12.208 5.688-16.262 9.726-.373.38-.738.765-1.094 1.157-1.846 2.067-3.464 4.482-4.92 7.142-1.886 4.233-3.545 9.18-5.19 14.358l-2.362 7.5-.335 1.054c-3.091 9.66-6.521 19.222-11.592 25.751-3.524 5.127-8.282 8.35-15.507 8.35l-.498-.006Z"
+  }), /*#__PURE__*/React.createElement("defs", null, /*#__PURE__*/React.createElement("linearGradient", {
+    id: gradientId,
+    x1: "0%",
+    y1: "0%",
+    x2: "100%",
+    y2: "100%"
+  }, /*#__PURE__*/React.createElement(GradientStopTop, {
+    offset: "0%"
+  }), /*#__PURE__*/React.createElement(GradientStopBottom, {
+    offset: "100%"
+  })))));
+};
+if (process.env.NODE_ENV !== "production") {
+  Star.propTypes = {
+    "gradientId": PropTypes.oneOf(["gradient1", "gradient2", "gradient3"]).isRequired,
+    "starContainerClassName": PropTypes.oneOf(["star-1", "star-2", "star-3"]).isRequired
+  };
+}
+Star.displayName = "Star";
+export default Star;

package/esm/components/loader-star/internal/star.style.d.ts

@@ -0,0 +1,4 @@
+export declare const StyledStarSVG: import("styled-components").StyledComponent<"svg", any, {}, never>;
+export declare const GradientStopTop: import("styled-components").StyledComponent<"stop", any, {}, never>;
+export declare const GradientStopBottom: import("styled-components").StyledComponent<"stop", any, {}, never>;
+export declare const StyledLoaderStarContainer: import("styled-components").StyledComponent<"div", any, {}, never>;

package/esm/components/loader-star/internal/star.style.js

@@ -0,0 +1,126 @@
+import styled, { keyframes } from "styled-components";
+const animateStar = keyframes`
+  0% {
+    transform: translate3d(0px, 0px, 0px) scale(0.3);
+    opacity: 0;
+  }
+  10% {
+    transform: translate3d(0px, 0px, 0px) scale(0.3);
+    opacity: 0;
+  }
+  20% {
+    transform: translate3d(0px, 0px, 0px) scale(0.6);
+    opacity: 1;
+  }
+  35% {
+    transform: translate3d(0px, 0px, 0px) scale(0.6);
+    opacity: 1;
+  }
+  55% {
+    transform: translate3d(16px, -12px, 0px) scale(1.4);
+    opacity: 1;
+  }
+  60% {
+    transform: translate3d(16px, -12px, 0px) scale(1.4);
+    opacity: 1;
+  }
+  90% {
+    transform: translate3d(0px, -24px, 0px) scale(0.8);
+    opacity: 1;
+  }
+  100% {
+    transform: translate3d(0px, -24px, 0px) scale(0.6);
+    opacity: 0;
+  }
+`;
+const animateStopTop = keyframes`
+  0% { stop-color: #13a038; }
+  10% { stop-color: #13a038; }
+  50% { stop-color: #0092db; }
+  90% { stop-color: #8f49fe; }
+  100% { stop-color: #8f49fe; }
+`;
+const animateStopBottom = keyframes`
+  0% { stop-color: #13a038; }
+  10% { stop-color: #13a038; }
+  50% { stop-color: #13a038; }
+  90% { stop-color: #0092db; }
+  100% { stop-color: #0092db; }
+`;
+const time = "3s";
+export const StyledStarSVG = styled.svg`
+  animation: ${animateStar} ${time} ease-in-out forwards infinite;
+  height: var(--sizing200);
+  opacity: 0;
+  width: var(--sizing200);
+`;
+export const GradientStopTop = styled.stop`
+  animation: ${animateStopTop} ${time} ease-in-out forwards infinite;
+`;
+export const GradientStopBottom = styled.stop`
+  animation: ${animateStopBottom} ${time} ease-in-out forwards infinite;
+`;
+export const StyledLoaderStarContainer = styled.div`
+  bottom: 0;
+  height: var(--sizing200);
+  left: 0;
+  position: absolute;
+  width: var(--sizing200);
+
+  &.star-1 {
+    .ai-star-path {
+      fill: url(#gradient1);
+    }
+
+    ${StyledStarSVG} {
+      animation-delay: -2s;
+    }
+
+    #gradient1 {
+      ${GradientStopTop} {
+        animation-delay: -2s;
+      }
+      ${GradientStopBottom} {
+        animation-delay: -2s;
+      }
+    }
+  }
+
+  &.star-2 {
+    .ai-star-path {
+      fill: url(#gradient2);
+    }
+
+    ${StyledStarSVG} {
+      animation-delay: -1s;
+    }
+
+    #gradient2 {
+      ${GradientStopTop} {
+        animation-delay: -1s;
+      }
+      ${GradientStopBottom} {
+        animation-delay: -1s;
+      }
+    }
+  }
+
+  &.star-3 {
+    .ai-star-path {
+      fill: url(#gradient3);
+    }
+
+    ${StyledStarSVG} {
+      animation-delay: 0s;
+    }
+
+    #gradient3 {
+      ${GradientStopTop} {
+        animation-delay: 0s;
+      }
+      ${GradientStopBottom} {
+        animation-delay: 0s;
+      }
+    }
+  }
+`;

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

@@ -0,0 +1,14 @@
+import { TagProps } from "../../__internal__/utils/helpers/tags/tags";
+export interface LoaderStarProps extends Omit<TagProps, "data-component"> {
+    /**
+     * The loaderStarLabel prop allows a specific label to be set.
+     * This label will be present if the user has `reduce-motion` enabled and will also be available to assistive technologies.
+     * By default the label will be `Loading...`.
+     */
+    loaderStarLabel?: string;
+}
+declare const LoaderStar: {
+    ({ loaderStarLabel, ...rest }: LoaderStarProps): JSX.Element;
+    displayName: string;
+};
+export default LoaderStar;

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

@@ -0,0 +1,46 @@
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+import React from "react";
+import PropTypes from "prop-types";
+import tagComponent from "../../__internal__/utils/helpers/tags/tags";
+import { StyledLoaderStarWrapper, StyledLabel, StyledStars } from "./loader-star.style";
+import useLocale from "../../hooks/__internal__/useLocale";
+import useMediaQuery from "../../hooks/useMediaQuery";
+import Star from "./internal/star.component";
+import Typography from "../typography";
+const LoaderStar = ({
+  loaderStarLabel,
+  ...rest
+}) => {
+  const locale = useLocale();
+  const reduceMotion = !useMediaQuery("screen and (prefers-reduced-motion: no-preference)");
+  const label = /*#__PURE__*/React.createElement(StyledLabel, {
+    "data-role": "visible-label",
+    variant: "span",
+    fontWeight: "500"
+  }, loaderStarLabel || locale.loaderStar.loading());
+  return /*#__PURE__*/React.createElement(StyledLoaderStarWrapper, _extends({
+    role: "status"
+  }, tagComponent("loader-star", rest)), reduceMotion ? label : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(StyledStars, null, /*#__PURE__*/React.createElement(Star, {
+    starContainerClassName: "star-1",
+    gradientId: "gradient1"
+  }), /*#__PURE__*/React.createElement(Star, {
+    starContainerClassName: "star-2",
+    gradientId: "gradient2"
+  }), /*#__PURE__*/React.createElement(Star, {
+    starContainerClassName: "star-3",
+    gradientId: "gradient3"
+  })), /*#__PURE__*/React.createElement(Typography, {
+    "data-role": "hidden-label",
+    variant: "span",
+    screenReaderOnly: true
+  }, loaderStarLabel || locale.loaderStar.loading())));
+};
+if (process.env.NODE_ENV !== "production") {
+  LoaderStar.propTypes = {
+    "data-element": PropTypes.string,
+    "data-role": PropTypes.string,
+    "loaderStarLabel": PropTypes.string
+  };
+}
+LoaderStar.displayName = "LoaderStar";
+export default LoaderStar;

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

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import { LoaderStarProps } from "./loader-star.component";
+export declare const StyledLoaderStarWrapper: import("styled-components").StyledComponent<"div", any, LoaderStarProps, never>;
+export declare const StyledLabel: import("styled-components").StyledComponent<{
+    ({ "data-component": dataComponent, variant, as, id, fontSize, fontWeight, textTransform, lineHeight, textDecoration, display, listStyleType, whiteSpace, wordBreak, 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, {}, never>;
+export declare const StyledStars: import("styled-components").StyledComponent<"div", any, {}, never>;

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

@@ -0,0 +1,15 @@
+import styled from "styled-components";
+import Typography from "../typography";
+export const StyledLoaderStarWrapper = styled.div`
+  position: relative;
+  width: max-content;
+`;
+export const StyledLabel = styled(Typography)`
+  display: flex;
+  justify-content: center;
+  text-align: center;
+`;
+export const StyledStars = styled.div`
+  width: 40px;
+  height: 40px;
+`;

package/esm/locales/de-de.js

@@ -91,6 +91,9 @@ const deDE = {
   loaderSpinner: {
     loading: () => "Laden..."
   },
+  loaderStar: {
+    loading: () => "Laden..."
+  },
   menuFullscreen: {
     ariaLabels: {
       closeButton: () => "Schließen"

package/esm/locales/en-gb.js

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

package/esm/locales/es-es.js

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

package/esm/locales/fr-ca.js

@@ -92,6 +92,9 @@ const frCA = {
   loaderSpinner: {
     loading: () => "Chargement..."
   },
+  loaderStar: {
+    loading: () => "Chargement..."
+  },
   menuFullscreen: {
     ariaLabels: {
       closeButton: () => "Fermer"

package/esm/locales/fr-fr.js

@@ -92,6 +92,9 @@ const frFR = {
   loaderSpinner: {
     loading: () => "Téléhargement..."
   },
+  loaderStar: {
+    loading: () => "Téléhargement..."
+  },
   menuFullscreen: {
     ariaLabels: {
       closeButton: () => "Fermer"

package/esm/locales/locale.d.ts

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

package/lib/components/flat-table/flat-table-cell/flat-table-cell.component.d.ts

@@ -1,7 +1,8 @@
 import React from "react";
 import { PaddingProps } from "styled-system";
 import { TableBorderSize, TableCellAlign } from "..";
-export interface FlatTableCellProps extends PaddingProps {
+import { TagProps } from "../../../__internal__/utils/helpers/tags";
+export interface FlatTableCellProps extends PaddingProps, Omit<TagProps, "data-component"> {
     /** Content alignment */
     align?: TableCellAlign;
     /** Cell content */
@@ -24,7 +25,7 @@ export interface FlatTableCellProps extends PaddingProps {
     id?: string;
 }
 export declare const FlatTableCell: {
-    ({ align, children, pl, width, truncate, title, colspan, rowspan, id, ...rest }: FlatTableCellProps): React.JSX.Element;
+    ({ align, children, pl, width, truncate, title, colspan, rowspan, id, "data-element": dataElement, "data-role": dataRole, ...rest }: FlatTableCellProps): React.JSX.Element;
     displayName: string;
 };
 export default FlatTableCell;

package/lib/components/flat-table/flat-table-cell/flat-table-cell.component.js

@@ -24,6 +24,8 @@ const FlatTableCell = ({
   colspan,
   rowspan,
   id,
+  "data-element": dataElement,
+  "data-role": dataRole,
   ...rest
 }) => {
   const internalId = (0, _react.useRef)(id || (0, _guid.default)());
@@ -50,7 +52,9 @@ const FlatTableCell = ({
     makeCellSticky: makeCellSticky,
     className: makeCellSticky ? "isSticky" : undefined,
     align: align,
-    "data-element": "flat-table-cell",
+    "data-component": "flat-table-cell",
+    "data-element": dataElement || "flat-table-cell",
+    "data-role": dataRole,
     pl: pl,
     onClick: isExpandableCell ? onClick : undefined,
     tabIndex: isExpandableCell ? tabIndex : undefined,
@@ -70,7 +74,8 @@ const FlatTableCell = ({
     onFocus: handleOnFocus
   }), /*#__PURE__*/_react.default.createElement(_flatTableCell.StyledCellContent, {
     title: truncate && !title && typeof children === "string" ? children : title,
-    expandable: expandable
+    expandable: expandable,
+    "data-role": "flat-table-cell-content"
   }, expandable && isFirstCell && /*#__PURE__*/_react.default.createElement(_icon.default, {
     type: "chevron_down_thick",
     mr: "8px"

package/lib/components/flat-table/flat-table-header/flat-table-header.component.d.ts

@@ -1,7 +1,8 @@
 import React from "react";
 import { PaddingProps } from "styled-system";
+import { TagProps } from "../../../__internal__/utils/helpers/tags";
 import { TableBorderSize, TableCellAlign } from "..";
-export interface FlatTableHeaderProps extends PaddingProps {
+export interface FlatTableHeaderProps extends PaddingProps, Omit<TagProps, "data-component"> {
     /** Content alignment */
     align?: TableCellAlign;
     /** If true sets alternative background color */
@@ -22,7 +23,7 @@ export interface FlatTableHeaderProps extends PaddingProps {
     id?: string;
 }
 export declare const FlatTableHeader: {
-    ({ align, children, colspan, rowspan, width, py, px, id, ...rest }: FlatTableHeaderProps): React.JSX.Element;
+    ({ align, children, colspan, rowspan, width, py, px, id, "data-element": dataElement, "data-role": dataRole, ...rest }: FlatTableHeaderProps): React.JSX.Element;
     displayName: string;
 };
 export default FlatTableHeader;

package/lib/components/flat-table/flat-table-header/flat-table-header.component.js

@@ -23,6 +23,8 @@ const FlatTableHeader = ({
   py,
   px,
   id,
+  "data-element": dataElement,
+  "data-role": dataRole,
   ...rest
 }) => {
   const ref = (0, _react.useRef)(null);
@@ -42,8 +44,7 @@ const FlatTableHeader = ({
     makeCellSticky: makeCellSticky,
     className: makeCellSticky ? "isSticky" : undefined,
     align: align,
-    colorTheme: colorTheme,
-    "data-element": "flat-table-header"
+    colorTheme: colorTheme
   }, colspan !== undefined && {
     colSpan: Number(colspan)
   }, rowspan !== undefined && {
@@ -53,8 +54,13 @@ const FlatTableHeader = ({
     py: py,
     px: px
   }, rest, {
+    "data-component": "flat-table-header",
+    "data-element": dataElement || "flat-table-header",
+    "data-role": dataRole,
     id: internalId.current
-  }), /*#__PURE__*/_react.default.createElement("div", null, children));
+  }), /*#__PURE__*/_react.default.createElement("div", {
+    "data-role": "flat-table-header-content"
+  }, children));
 };
 exports.FlatTableHeader = FlatTableHeader;
 FlatTableHeader.displayName = "FlatTableHeader";

package/lib/components/flat-table/flat-table-row/flat-table-row.component.js

@@ -140,6 +140,8 @@ const FlatTableRow = exports.FlatTableRow = /*#__PURE__*/_react.default.forwardR
   }
   function handleCellKeyDown(ev) {
     const isEnterOrSpaceKey = _events.default.isEnterKey(ev) || _events.default.isSpaceKey(ev);
+
+    /* istanbul ignore else */
     if (isEnterOrSpaceKey) {
       ev.preventDefault();
       toggleExpanded();

package/lib/components/flat-table/flat-table-row-header/flat-table-row-header.component.d.ts

@@ -2,7 +2,7 @@ import React from "react";
 import { PaddingProps } from "styled-system";
 import { TableBorderSize, TableCellAlign } from "..";
 import { TagProps } from "../../../__internal__/utils/helpers/tags/tags";
-export interface FlatTableRowHeaderProps extends PaddingProps, TagProps {
+export interface FlatTableRowHeaderProps extends PaddingProps, Omit<TagProps, "data-component"> {
     /** Content alignment */
     align?: TableCellAlign;
     /** RowHeader content */

package/lib/components/flat-table/flat-table-row-header/flat-table-row-header.component.js

@@ -50,6 +50,7 @@ const FlatTableRowHeader = ({
     bringToFront(ev, "TH");
   };
   const handleOnKeyDown = (0, _react.useCallback)(ev => {
+    /* istanbul ignore else */
     if (isExpandableCell && onKeyDown) {
       onKeyDown(ev);
     }
@@ -57,11 +58,7 @@ const FlatTableRowHeader = ({
   return /*#__PURE__*/_react.default.createElement(_flatTableRowHeader.StyledFlatTableRowHeader, _extends({
     leftPosition: stickyAlignment === "left" ? leftPosition || 0 : undefined,
     rightPosition: stickyAlignment === "right" ? rightPosition || 0 : undefined,
-    align: align
-  }, (0, _tags.default)("flat-table-row-header", {
-    "data-element": "flat-table-row-header",
-    ...rest
-  }), {
+    align: align,
     width: width,
     py: py || "10px",
     px: px || 3,
@@ -77,13 +74,17 @@ const FlatTableRowHeader = ({
     rowSpan: Number(rowspan)
   }, {
     "data-selected": isInSelectedRow && isExpandableCell,
-    "data-highlighted": isInHighlightedRow && isExpandableCell
-  }, rest, {
-    id: internalId.current,
+    "data-highlighted": isInHighlightedRow && isExpandableCell,
     onFocus: handleOnFocus
+  }, rest, (0, _tags.default)("flat-table-row-header", {
+    "data-element": "flat-table-row-header",
+    ...rest
+  }), {
+    id: internalId.current
   }), /*#__PURE__*/_react.default.createElement(_flatTableRowHeader.StyledFlatTableRowHeaderContent, {
     title: truncate && !title && typeof children === "string" ? children : title,
-    expandable: expandable
+    expandable: expandable,
+    "data-role": "flat-table-row-header-content"
   }, expandable && isFirstCell && /*#__PURE__*/_react.default.createElement(_icon.default, {
     type: "chevron_down_thick",
     mr: "8px"

package/lib/components/grouped-character/grouped-character.component.js

@@ -59,7 +59,7 @@ const GroupedCharacter = exports.GroupedCharacter = /*#__PURE__*/_react.default.
     const {
       selectionEnd
     } = target;
-    let newCursorPos = selectionEnd ?? 0;
+    let newCursorPos = selectionEnd ?? /* istanbul ignore next */0;
     const rawValue = sanitizeValue(target.value);
     const formattedValue = formatValue(rawValue);
     const isLastPosition = target.value.length === newCursorPos;

package/lib/components/loader-star/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from "./loader-star.component";
+export type { LoaderStarProps } from "./loader-star.component";

package/lib/components/loader-star/index.js

@@ -0,0 +1,13 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "default", {
+  enumerable: true,
+  get: function () {
+    return _loaderStar.default;
+  }
+});
+var _loaderStar = _interopRequireDefault(require("./loader-star.component"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }

package/lib/components/loader-star/internal/star.component.d.ts

@@ -0,0 +1,9 @@
+interface StarProps {
+    starContainerClassName: "star-1" | "star-2" | "star-3";
+    gradientId: "gradient1" | "gradient2" | "gradient3";
+}
+declare const Star: {
+    ({ starContainerClassName, gradientId, }: StarProps): JSX.Element;
+    displayName: string;
+};
+export default Star;

package/lib/components/loader-star/internal/star.component.js

@@ -0,0 +1,47 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _star = require("./star.style");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const Star = ({
+  starContainerClassName,
+  gradientId
+}) => {
+  return /*#__PURE__*/_react.default.createElement(_star.StyledLoaderStarContainer, {
+    "data-component": "star",
+    role: "presentation",
+    className: starContainerClassName
+  }, /*#__PURE__*/_react.default.createElement(_star.StyledStarSVG, {
+    className: "ai-star-svg",
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 217 216"
+  }, /*#__PURE__*/_react.default.createElement("path", {
+    className: "ai-star-path",
+    fill: "#000",
+    fillRule: "evenodd",
+    d: "M108.502 215.994c-.166.006-.334.006-.502.006-7.218 0-11.975-3.217-15.497-8.335-4.396-5.656-7.56-13.591-10.338-21.896l-.597-1.807-.667-2.063-.91-2.87-1.225-3.904c-1.831-5.82-3.65-11.42-5.751-16.135-1.456-2.661-3.075-5.078-4.921-7.146-.356-.391-.72-.777-1.094-1.156-4.054-4.038-9.808-7.093-16.262-9.726-14.49-4.937-33.33-8.698-43.486-17.634C2.766 119.712 0 114.918 0 108l.003-.413c.108-6.697 2.852-11.372 7.25-14.916 10.155-8.935 28.995-12.696 43.485-17.633C57.192 72.405 62.946 69.35 67 65.312c.373-.38.738-.765 1.094-1.156 1.846-2.068 3.465-4.485 4.922-7.145 2.567-5.764 4.713-12.849 6.976-20.04l.91-2.87.666-2.063.338-1.028c2.84-8.586 6.063-16.843 10.598-22.675C95.954 3.32 100.592.13 107.57.004L108 0c.168 0 .336 0 .502.006L109 0l.405.003c6.999.119 11.645 3.316 15.102 8.347 5.071 6.529 8.5 16.09 11.592 25.75l.335 1.054 2.362 7.501c1.645 5.178 3.304 10.125 5.19 14.358 1.456 2.66 3.074 5.075 4.92 7.142.356.392.72.778 1.094 1.157 4.054 4.038 9.808 7.093 16.262 9.726 14.49 4.937 33.33 8.698 43.486 17.634C214.234 96.288 217 101.082 217 108c0 6.918-2.766 11.712-7.252 15.328-10.156 8.936-28.996 12.697-43.486 17.634-6.454 2.633-12.208 5.688-16.262 9.726-.373.38-.738.765-1.094 1.157-1.846 2.067-3.464 4.482-4.92 7.142-1.886 4.233-3.545 9.18-5.19 14.358l-2.362 7.5-.335 1.054c-3.091 9.66-6.521 19.222-11.592 25.751-3.524 5.127-8.282 8.35-15.507 8.35l-.498-.006Z"
+  }), /*#__PURE__*/_react.default.createElement("defs", null, /*#__PURE__*/_react.default.createElement("linearGradient", {
+    id: gradientId,
+    x1: "0%",
+    y1: "0%",
+    x2: "100%",
+    y2: "100%"
+  }, /*#__PURE__*/_react.default.createElement(_star.GradientStopTop, {
+    offset: "0%"
+  }), /*#__PURE__*/_react.default.createElement(_star.GradientStopBottom, {
+    offset: "100%"
+  })))));
+};
+if (process.env.NODE_ENV !== "production") {
+  Star.propTypes = {
+    "gradientId": _propTypes.default.oneOf(["gradient1", "gradient2", "gradient3"]).isRequired,
+    "starContainerClassName": _propTypes.default.oneOf(["star-1", "star-2", "star-3"]).isRequired
+  };
+}
+Star.displayName = "Star";
+var _default = exports.default = Star;

package/lib/components/loader-star/internal/star.style.d.ts

@@ -0,0 +1,4 @@
+export declare const StyledStarSVG: import("styled-components").StyledComponent<"svg", any, {}, never>;
+export declare const GradientStopTop: import("styled-components").StyledComponent<"stop", any, {}, never>;
+export declare const GradientStopBottom: import("styled-components").StyledComponent<"stop", any, {}, never>;
+export declare const StyledLoaderStarContainer: import("styled-components").StyledComponent<"div", any, {}, never>;

package/lib/components/loader-star/internal/star.style.js

@@ -0,0 +1,134 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.StyledStarSVG = exports.StyledLoaderStarContainer = exports.GradientStopTop = exports.GradientStopBottom = void 0;
+var _styledComponents = _interopRequireWildcard(require("styled-components"));
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+const animateStar = (0, _styledComponents.keyframes)`
+  0% {
+    transform: translate3d(0px, 0px, 0px) scale(0.3);
+    opacity: 0;
+  }
+  10% {
+    transform: translate3d(0px, 0px, 0px) scale(0.3);
+    opacity: 0;
+  }
+  20% {
+    transform: translate3d(0px, 0px, 0px) scale(0.6);
+    opacity: 1;
+  }
+  35% {
+    transform: translate3d(0px, 0px, 0px) scale(0.6);
+    opacity: 1;
+  }
+  55% {
+    transform: translate3d(16px, -12px, 0px) scale(1.4);
+    opacity: 1;
+  }
+  60% {
+    transform: translate3d(16px, -12px, 0px) scale(1.4);
+    opacity: 1;
+  }
+  90% {
+    transform: translate3d(0px, -24px, 0px) scale(0.8);
+    opacity: 1;
+  }
+  100% {
+    transform: translate3d(0px, -24px, 0px) scale(0.6);
+    opacity: 0;
+  }
+`;
+const animateStopTop = (0, _styledComponents.keyframes)`
+  0% { stop-color: #13a038; }
+  10% { stop-color: #13a038; }
+  50% { stop-color: #0092db; }
+  90% { stop-color: #8f49fe; }
+  100% { stop-color: #8f49fe; }
+`;
+const animateStopBottom = (0, _styledComponents.keyframes)`
+  0% { stop-color: #13a038; }
+  10% { stop-color: #13a038; }
+  50% { stop-color: #13a038; }
+  90% { stop-color: #0092db; }
+  100% { stop-color: #0092db; }
+`;
+const time = "3s";
+const StyledStarSVG = exports.StyledStarSVG = _styledComponents.default.svg`
+  animation: ${animateStar} ${time} ease-in-out forwards infinite;
+  height: var(--sizing200);
+  opacity: 0;
+  width: var(--sizing200);
+`;
+const GradientStopTop = exports.GradientStopTop = _styledComponents.default.stop`
+  animation: ${animateStopTop} ${time} ease-in-out forwards infinite;
+`;
+const GradientStopBottom = exports.GradientStopBottom = _styledComponents.default.stop`
+  animation: ${animateStopBottom} ${time} ease-in-out forwards infinite;
+`;
+const StyledLoaderStarContainer = exports.StyledLoaderStarContainer = _styledComponents.default.div`
+  bottom: 0;
+  height: var(--sizing200);
+  left: 0;
+  position: absolute;
+  width: var(--sizing200);
+
+  &.star-1 {
+    .ai-star-path {
+      fill: url(#gradient1);
+    }
+
+    ${StyledStarSVG} {
+      animation-delay: -2s;
+    }
+
+    #gradient1 {
+      ${GradientStopTop} {
+        animation-delay: -2s;
+      }
+      ${GradientStopBottom} {
+        animation-delay: -2s;
+      }
+    }
+  }
+
+  &.star-2 {
+    .ai-star-path {
+      fill: url(#gradient2);
+    }
+
+    ${StyledStarSVG} {
+      animation-delay: -1s;
+    }
+
+    #gradient2 {
+      ${GradientStopTop} {
+        animation-delay: -1s;
+      }
+      ${GradientStopBottom} {
+        animation-delay: -1s;
+      }
+    }
+  }
+
+  &.star-3 {
+    .ai-star-path {
+      fill: url(#gradient3);
+    }
+
+    ${StyledStarSVG} {
+      animation-delay: 0s;
+    }
+
+    #gradient3 {
+      ${GradientStopTop} {
+        animation-delay: 0s;
+      }
+      ${GradientStopBottom} {
+        animation-delay: 0s;
+      }
+    }
+  }
+`;

package/lib/components/loader-star/loader-star.component.d.ts

@@ -0,0 +1,14 @@
+import { TagProps } from "../../__internal__/utils/helpers/tags/tags";
+export interface LoaderStarProps extends Omit<TagProps, "data-component"> {
+    /**
+     * The loaderStarLabel prop allows a specific label to be set.
+     * This label will be present if the user has `reduce-motion` enabled and will also be available to assistive technologies.
+     * By default the label will be `Loading...`.
+     */
+    loaderStarLabel?: string;
+}
+declare const LoaderStar: {
+    ({ loaderStarLabel, ...rest }: LoaderStarProps): JSX.Element;
+    displayName: string;
+};
+export default LoaderStar;

package/lib/components/loader-star/loader-star.component.js

@@ -0,0 +1,53 @@
+"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/tags"));
+var _loaderStar = require("./loader-star.style");
+var _useLocale = _interopRequireDefault(require("../../hooks/__internal__/useLocale"));
+var _useMediaQuery = _interopRequireDefault(require("../../hooks/useMediaQuery"));
+var _star = _interopRequireDefault(require("./internal/star.component"));
+var _typography = _interopRequireDefault(require("../typography"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+const LoaderStar = ({
+  loaderStarLabel,
+  ...rest
+}) => {
+  const locale = (0, _useLocale.default)();
+  const reduceMotion = !(0, _useMediaQuery.default)("screen and (prefers-reduced-motion: no-preference)");
+  const label = /*#__PURE__*/_react.default.createElement(_loaderStar.StyledLabel, {
+    "data-role": "visible-label",
+    variant: "span",
+    fontWeight: "500"
+  }, loaderStarLabel || locale.loaderStar.loading());
+  return /*#__PURE__*/_react.default.createElement(_loaderStar.StyledLoaderStarWrapper, _extends({
+    role: "status"
+  }, (0, _tags.default)("loader-star", rest)), reduceMotion ? label : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_loaderStar.StyledStars, null, /*#__PURE__*/_react.default.createElement(_star.default, {
+    starContainerClassName: "star-1",
+    gradientId: "gradient1"
+  }), /*#__PURE__*/_react.default.createElement(_star.default, {
+    starContainerClassName: "star-2",
+    gradientId: "gradient2"
+  }), /*#__PURE__*/_react.default.createElement(_star.default, {
+    starContainerClassName: "star-3",
+    gradientId: "gradient3"
+  })), /*#__PURE__*/_react.default.createElement(_typography.default, {
+    "data-role": "hidden-label",
+    variant: "span",
+    screenReaderOnly: true
+  }, loaderStarLabel || locale.loaderStar.loading())));
+};
+if (process.env.NODE_ENV !== "production") {
+  LoaderStar.propTypes = {
+    "data-element": _propTypes.default.string,
+    "data-role": _propTypes.default.string,
+    "loaderStarLabel": _propTypes.default.string
+  };
+}
+LoaderStar.displayName = "LoaderStar";
+var _default = exports.default = LoaderStar;

package/lib/components/loader-star/loader-star.style.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import { LoaderStarProps } from "./loader-star.component";
+export declare const StyledLoaderStarWrapper: import("styled-components").StyledComponent<"div", any, LoaderStarProps, never>;
+export declare const StyledLabel: import("styled-components").StyledComponent<{
+    ({ "data-component": dataComponent, variant, as, id, fontSize, fontWeight, textTransform, lineHeight, textDecoration, display, listStyleType, whiteSpace, wordBreak, 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, {}, never>;
+export declare const StyledStars: import("styled-components").StyledComponent<"div", any, {}, never>;

package/lib/components/loader-star/loader-star.style.js

@@ -0,0 +1,22 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.StyledStars = exports.StyledLoaderStarWrapper = exports.StyledLabel = void 0;
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _typography = _interopRequireDefault(require("../typography"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const StyledLoaderStarWrapper = exports.StyledLoaderStarWrapper = _styledComponents.default.div`
+  position: relative;
+  width: max-content;
+`;
+const StyledLabel = exports.StyledLabel = (0, _styledComponents.default)(_typography.default)`
+  display: flex;
+  justify-content: center;
+  text-align: center;
+`;
+const StyledStars = exports.StyledStars = _styledComponents.default.div`
+  width: 40px;
+  height: 40px;
+`;

package/lib/components/loader-star/package.json

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

package/lib/locales/de-de.js

@@ -98,6 +98,9 @@ const deDE = {
   loaderSpinner: {
     loading: () => "Laden..."
   },
+  loaderStar: {
+    loading: () => "Laden..."
+  },
   menuFullscreen: {
     ariaLabels: {
       closeButton: () => "Schließen"

package/lib/locales/en-gb.js

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

package/lib/locales/es-es.js

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

package/lib/locales/fr-ca.js

@@ -99,6 +99,9 @@ const frCA = {
   loaderSpinner: {
     loading: () => "Chargement..."
   },
+  loaderStar: {
+    loading: () => "Chargement..."
+  },
   menuFullscreen: {
     ariaLabels: {
       closeButton: () => "Fermer"

package/lib/locales/fr-fr.js

@@ -99,6 +99,9 @@ const frFR = {
   loaderSpinner: {
     loading: () => "Téléhargement..."
   },
+  loaderStar: {
+    loading: () => "Téléhargement..."
+  },
   menuFullscreen: {
     ariaLabels: {
       closeButton: () => "Fermer"

package/lib/locales/locale.d.ts

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

package/package.json

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