carbon-react 142.3.1 → 142.4.0

package/esm/__internal__/checkable-input/checkable-input.component.d.ts

@@ -6,10 +6,10 @@ export interface CommonCheckableInputProps extends ValidationProps, CommonHidden
     disabled?: boolean;
     /** @private @ignore */
     loading?: boolean;
-    /** Help content to be displayed under an input */
+    /** [Legacy] Help content to be displayed under an input */
     fieldHelp?: React.ReactNode;
     /**
-     * If true, the FieldHelp will be displayed inline
+     * [Legacy] If true, the FieldHelp will be displayed inline
      * To be used with labelInline prop set to true
      */
     fieldHelpInline?: boolean;
@@ -19,7 +19,7 @@ export interface CommonCheckableInputProps extends ValidationProps, CommonHidden
     inputWidth?: number;
     /** Label content */
     label?: React.ReactNode;
-    /** The content for the help tooltip, to appear next to the Label */
+    /** [Legacy] The content for the help tooltip, to appear next to the Label */
     labelHelp?: React.ReactNode;
     /** Spacing between label and a field for inline label, given number will be multiplied by base spacing unit (8) */
     labelSpacing?: 1 | 2;

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

@@ -1,5 +1,5 @@
 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, { useRef } from "react";
+import React, { useRef, useContext } from "react";
 import PropTypes from "prop-types";
 import { StyledCheckableInput, StyledCheckableInputWrapper } from "./checkable-input.style";
 import { InputBehaviour } from "../input-behaviour";
@@ -7,6 +7,7 @@ import FormField from "../form-field";
 import HiddenCheckableInput from "./hidden-checkable-input.component";
 import guid from "../utils/helpers/guid";
 import useInputAccessibility from "../../hooks/__internal__/useInputAccessibility";
+import NewValidationContext from "../../components/carbon-provider/__internal__/new-validation.context";
 const CheckableInput = /*#__PURE__*/React.forwardRef(({
   ariaLabelledBy,
   autoFocus,
@@ -41,6 +42,9 @@ const CheckableInput = /*#__PURE__*/React.forwardRef(({
   const {
     current: id
   } = useRef(inputId || guid());
+  const {
+    validationRedesignOptIn
+  } = useContext(NewValidationContext);
   const {
     labelId,
     fieldHelpId,
@@ -76,7 +80,7 @@ const CheckableInput = /*#__PURE__*/React.forwardRef(({
     // However, we still want the input element to receive the required prop
     isRequired: required,
     isOptional,
-    useValidationIcon: validationOnLabel
+    useValidationIcon: validationRedesignOptIn ? false : validationOnLabel
   };
   const inputProps = {
     ariaDescribedBy,

package/esm/components/checkbox/checkbox-group/checkbox-group.component.d.ts

@@ -5,8 +5,8 @@ export interface CheckboxGroupProps extends ValidationProps, MarginProps {
     /** The content for the CheckboxGroup Legend */
     legend?: string;
     /**
-     * The content for the CheckboxGroup Help tooltip,
-     * will be rendered as hint text when `validationRedesignOptIn` is true.
+     * The content for the CheckboxGroup hint text,
+     * will only be rendered when `validationRedesignOptIn` is true.
      */
     legendHelp?: string;
     /** [Legacy] When true, legend is placed inline with the checkboxes */
@@ -27,7 +27,7 @@ export interface CheckboxGroupProps extends ValidationProps, MarginProps {
     isOptional?: boolean;
     /** [Legacy] Overrides the default tooltip */
     tooltipPosition?: "top" | "bottom" | "left" | "right";
-    /** When true, Checkboxes are in line */
+    /** When true, Checkboxes are inline */
     inline?: boolean;
 }
 export declare const CheckboxGroup: {

package/esm/components/checkbox/checkbox-group/checkbox-group.component.js

@@ -35,12 +35,8 @@ export const CheckboxGroup = props => {
   return /*#__PURE__*/React.createElement(React.Fragment, null, validationRedesignOptIn ? /*#__PURE__*/React.createElement(Fieldset, _extends({
     legend: legend,
     inline: legendInline,
-    legendWidth: legendWidth,
-    legendAlign: legendAlign,
-    legendSpacing: legendSpacing,
     error: error,
     warning: warning,
-    info: info,
     isRequired: required,
     isOptional: isOptional
   }, tagComponent("checkboxgroup", props), {
@@ -56,7 +52,6 @@ export const CheckboxGroup = props => {
   }), /*#__PURE__*/React.createElement(StyledCheckboxGroup, {
     "data-component": "checkbox-group",
     "data-role": "checkbox-group",
-    legendInline: legendInline,
     inline: inline
   }, /*#__PURE__*/React.createElement(CheckboxGroupContext.Provider, {
     value: {
@@ -83,7 +78,8 @@ export const CheckboxGroup = props => {
   }, filterStyledSystemMarginProps(props)), /*#__PURE__*/React.createElement(StyledCheckboxGroup, {
     "data-component": "checkbox-group",
     "data-role": "checkbox-group",
-    legendInline: legendInline
+    legendInline: legendInline,
+    inline: inline
   }, /*#__PURE__*/React.createElement(CheckboxGroupContext.Provider, {
     value: {
       error: !!error,

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

@@ -12,13 +12,13 @@ export interface CheckboxProps extends CommonCheckableInputProps, MarginProps {
     "data-element"?: string;
     /** Identifier used for testing purposes, applied to the root element of the component. */
     "data-role"?: string;
-    /** Aria label for rendered help component */
+    /** [Legacy] Aria label for rendered help component */
     helpAriaLabel?: string;
     /** When true label is inline */
     labelInline?: boolean;
     /** Accepts a callback function which is triggered on click event */
     onClick?: (ev: React.MouseEvent<HTMLInputElement>) => void;
-    /** Overrides the default tooltip position */
+    /** [Legacy] Overrides the default tooltip position */
     tooltipPosition?: "top" | "bottom" | "left" | "right";
     /** The value of the checkbox, passed on form submit */
     value?: string;

package/esm/components/checkbox/checkbox.component.js

@@ -61,6 +61,13 @@ const Checkbox = /*#__PURE__*/React.forwardRef(({
     deprecateUncontrolledWarnTriggered = true;
     Logger.deprecate("Uncontrolled behaviour in `Checkbox` is deprecated and support will soon be removed. Please make sure all your inputs are controlled.");
   }
+  const commonProps = {
+    fieldHelpInline,
+    labelSpacing,
+    labelHelp,
+    fieldHelp
+  };
+  const isInGroup = Object.keys(checkboxGroupContext).length !== 0;
   const inputProps = {
     ariaLabelledBy,
     onClick,
@@ -74,28 +81,23 @@ const Checkbox = /*#__PURE__*/React.forwardRef(({
     type: "checkbox",
     name,
     reverse: !reverse,
-    fieldHelp,
     autoFocus,
-    labelHelp,
-    labelSpacing,
     required,
     isOptional,
-    fieldHelpInline,
     checked,
     disabled,
     inputWidth,
     labelWidth,
     ref,
-    ...rest
+    ...rest,
+    ...(isInGroup && validationRedesignOptIn ? {} : {
+      ...commonProps
+    })
   };
   const validationProps = {
     error: contextError || error,
     warning: contextWarning || warning,
-    ...(validationRedesignOptIn ? {
-      validationOnLabel: false
-    } : {
-      info: contextInfo || info
-    })
+    info: contextInfo || info
   };
   const marginProps = useFormSpacing(rest);
   const componentToRender = /*#__PURE__*/React.createElement(CheckboxStyle, _extends({

package/esm/components/checkbox/checkbox.style.js

@@ -41,11 +41,12 @@ const StyledCheckbox = styled.div`
       ${!disabled && css`
         border: 1px solid var(--colorsUtilityMajor300);
 
-        ${info && `border: 1px solid var(--colorsSemanticInfo500);`}
-        ${warning && `border: 1px solid var(--colorsSemanticCaution500);`}
         ${error && `border: 2px solid var(--colorsSemanticNegative500);`}
 
-        ${warning && applyNewValidation && `border: 1px solid var(--colorsUtilityMajor300);`}
+        ${!applyNewValidation && css`
+          ${info && `border: 1px solid var(--colorsSemanticInfo500);`}
+          ${warning && `border: 1px solid var(--colorsSemanticCaution500);`}
+        `}
       `}
     }
 

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/components/radio-button/radio-button-group/radio-button-group.component.d.ts

@@ -15,8 +15,8 @@ export interface RadioButtonGroupProps extends ValidationProps, MarginProps {
     /** The content for the RadioGroup Legend */
     legend?: string;
     /**
-     * The content for the RadioButtonGroup Legend Help tooltip,
-     * will be rendered as hint text when `validationRedesignOptIn` is true.
+     * The content for the RadioButtonGroup hint text,
+     * will only be rendered when `validationRedesignOptIn` is true.
      */
     legendHelp?: string;
     /** [Legacy] Text alignment of legend when inline */