carbon-react 144.3.0 → 144.4.1

package/esm/__internal__/utils/helpers/events/composedPath.js

@@ -4,14 +4,9 @@
 
 // https://developer.mozilla.org/en-US/docs/Web/API/Event/composedPath
 export default ev => {
-  // When testing with enzyme, we want to trigger a listener on an element but pretend
-  // that it bubbled from the enzymeTestingTarget
-  // e.g. document.dispatchEvent(new MouseClick('click', {
-  //   detail: {enzymeTestingTarget: document.body}
-  // }))
   // In this example composedPath would show that the event started at document.body
   // but it would trigger the eventListener on document
-  let element = ev.detail && ev.detail.enzymeTestingTarget || ev.target || null;
+  let element = ev.target || null;
   if (!element || !element.parentElement) {
     return [];
   }

package/esm/__internal__/utils/helpers/events/events.js

@@ -108,7 +108,7 @@ const Events = {
    * @see https://developer.mozilla.org/en-US/docs/Web/API/Event/composedPath
    */
   composedPath: ev => {
-    return ev.detail?.enzymeTestingTarget && composedPath(ev) || ev.composedPath && ev.composedPath() || composedPath(ev);
+    return ev.composedPath?.() || composedPath(ev);
   }
 };
 export default Events;

package/esm/components/action-popover/action-popover.style.js

@@ -88,18 +88,18 @@ const StyledMenuItem = styled.button`
   childHasSubmenu,
   hasSubmenu
 }) => css`
-      justify-content: ${horizontalAlignment === "left" ? "flex-start" : "flex-end"};
+    justify-content: ${horizontalAlignment === "left" ? "flex-start" : "flex-end"};
 
-      ${horizontalAlignment === "left" && submenuPosition === "right" && css`
-        justify-content: space-between;
-      `}
+    ${horizontalAlignment === "left" && submenuPosition === "right" && css`
+      justify-content: space-between;
+    `}
 
-      ${horizontalAlignment === "right" && submenuPosition === "left" && css`
-        ${childHasSubmenu && hasSubmenu && css`
-          justify-content: space-between;
-        `}
+    ${horizontalAlignment === "right" && submenuPosition === "left" && css`
+      ${childHasSubmenu && hasSubmenu && css`
+        justify-content: space-between;
       `}
     `}
+  `}
 
   text-decoration: none;
   background-color: var(--colorsActionMajorYang100);

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

@@ -30,8 +30,8 @@ export const Divider = styled.span`
     ${({
   isDarkBackground
 }) => css`
-        color: ${isDarkBackground ? "var(--colorsUtilityYang100)" : "var(--colorsUtilityYin055)"};
-      `}
+      color: ${isDarkBackground ? "var(--colorsUtilityYang100)" : "var(--colorsUtilityYin055)"};
+    `}
   }
 `;
 export default {

package/esm/components/button-toggle/button-toggle.style.js

@@ -162,32 +162,32 @@ const StyledButtonToggleWrapper = styled.div`
   ${({
   grouped
 }) => css`
-      ${!grouped && css`
-        &&&& {
-          ${StyledButtonToggle} {
-            border-radius: var(--borderRadius050);
-          }
+    ${!grouped && css`
+      &&&& {
+        ${StyledButtonToggle} {
+          border-radius: var(--borderRadius050);
         }
-      `}
+      }
+    `}
 
-      ${grouped && css`
-        &&&& {
-          :first-of-type {
-            ${StyledButtonToggle} {
-              border-top-left-radius: var(--borderRadius050);
-              border-bottom-left-radius: var(--borderRadius050);
-            }
+    ${grouped && css`
+      &&&& {
+        :first-of-type {
+          ${StyledButtonToggle} {
+            border-top-left-radius: var(--borderRadius050);
+            border-bottom-left-radius: var(--borderRadius050);
           }
+        }
 
-          :last-of-type {
-            ${StyledButtonToggle} {
-              border-top-right-radius: var(--borderRadius050);
-              border-bottom-right-radius: var(--borderRadius050);
-            }
+        :last-of-type {
+          ${StyledButtonToggle} {
+            border-top-right-radius: var(--borderRadius050);
+            border-bottom-right-radius: var(--borderRadius050);
           }
         }
-      `}
+      }
     `}
+  `}
 
   ${({
   grouped

package/esm/components/card/card.config.d.ts

@@ -1,4 +1,4 @@
 export declare const CARD_SPACING: readonly ["small", "medium", "large"];
 export declare const CARD_ALIGNS: readonly ["left", "center", "right"];
-export declare type CardAlign = typeof CARD_ALIGNS[number];
-export declare type CardSpacing = typeof CARD_SPACING[number];
+export declare type CardAlign = (typeof CARD_ALIGNS)[number];
+export declare type CardSpacing = (typeof CARD_SPACING)[number];

package/esm/components/date/__internal__/date-picker/day-picker.style.js

@@ -312,13 +312,17 @@ const StyledDayPicker = styled.div`
     }
   }
 
-  .DayPicker-Day--selected:not(.DayPicker-Day--disabled):not(.DayPicker-Day--outside) {
+  .DayPicker-Day--selected:not(.DayPicker-Day--disabled):not(
+      .DayPicker-Day--outside
+    ) {
     background-color: var(--colorsActionMajor500);
     color: var(--colorsUtilityYang100);
     border-radius: var(--borderRadius400);
   }
 
-  .DayPicker-Day--selected.DayPicker-Day--disabled:not(.DayPicker-Day--outside) {
+  .DayPicker-Day--selected.DayPicker-Day--disabled:not(
+      .DayPicker-Day--outside
+    ) {
     background-color: var(--colorsActionMajor500);
     color: var(--colorsUtilityYang100);
   }

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

@@ -4,7 +4,7 @@ import { TagProps } from "../../__internal__/utils/helpers/tags";
 import { DialogSizes } from "./dialog.config";
 import { CustomRefObject } from "../../__internal__/focus-trap";
 declare const PADDING_VALUES: readonly [0, 1, 2, 3, 4, 5, 6, 7, 8];
-declare type PaddingValues = typeof PADDING_VALUES[number];
+declare type PaddingValues = (typeof PADDING_VALUES)[number];
 export interface ContentPaddingInterface {
     p?: PaddingValues;
     py?: PaddingValues;

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

@@ -1,2 +1,2 @@
 export declare const DIALOG_SIZES: readonly ["auto", "extra-small", "small", "medium-small", "medium", "medium-large", "large", "extra-large", "maximise"];
-export declare type DialogSizes = typeof DIALOG_SIZES[number];
+export declare type DialogSizes = (typeof DIALOG_SIZES)[number];

package/esm/components/dialog/dialog.style.js

@@ -54,8 +54,8 @@ const StyledDialog = styled.div`
   ${({
   backgroundColor
 }) => css`
-      background-color: ${backgroundColor};
-    `}
+    background-color: ${backgroundColor};
+  `}
 
   ${({
   dialogHeight

package/esm/components/drawer/drawer.style.js

@@ -31,26 +31,26 @@ const StyledDrawerSidebar = styled(Box)`
   hasControls,
   isExpanded
 }) => css`
-      ${!isExpanded && css`
-        display: none;
-        opacity: 0;
-      `}
+    ${!isExpanded && css`
+      display: none;
+      opacity: 0;
+    `}
 
-      ${isExpanded && css`
-        display: flex;
-        flex-direction: column;
-        flex: 1 1 0%;
-      `}
+    ${isExpanded && css`
+      display: flex;
+      flex-direction: column;
+      flex: 1 1 0%;
+    `}
 
       ${hasControls && css`
-        ${StyledTabs} {
-          margin-top: 48px;
-          ${!isExpanded && css`
-            display: none;
-          `}
-        }
-      `}
+      ${StyledTabs} {
+        margin-top: 48px;
+        ${!isExpanded && css`
+          display: none;
+        `}
+      }
     `}
+  `}
 
   &::-webkit-scrollbar {
     width: 12px;

package/esm/components/flat-table/flat-table.style.js

@@ -128,20 +128,20 @@ const StyledFlatTableWrapper = styled(StyledBox)`
   theme,
   isFocused
 }) => css`
-      box-sizing: border-box;
+    box-sizing: border-box;
 
-      /* istanbul ignore next */
-      ${theme.focusRedesignOptOut && isFocused && /* istanbul ignore next */
+    /* istanbul ignore next */
+    ${theme.focusRedesignOptOut && isFocused && /* istanbul ignore next */
 css`
-        ${oldFocusStyling}
-      `}
+      ${oldFocusStyling}
+    `}
 
-      ${!theme.focusRedesignOptOut && isFocused && css`
-        ${addFocusStyling()}
-      `}
+    ${!theme.focusRedesignOptOut && isFocused && css`
+      ${addFocusStyling()}
+    `}
 
       ${isInSidebar ? "min-width: fit-content;" : ""}
-    `}
+  `}
 
   ${({
   colorTheme

package/esm/components/form/form.config.d.ts

@@ -1,5 +1,5 @@
 export declare const FORM_BUTTON_ALIGNMENTS: readonly ["left", "right"];
-export declare type FormButtonAlignment = typeof FORM_BUTTON_ALIGNMENTS[number];
+export declare type FormButtonAlignment = (typeof FORM_BUTTON_ALIGNMENTS)[number];
 export declare const formSpacing: {
     0: string;
     1: string;

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

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { MarginProps } from "styled-system";
 export interface HrProps extends MarginProps {
     /** Set whether the component should be recognised by assistive technologies */

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

@@ -1,7 +1,7 @@
 declare const LOADER_SPINNER_VARIANTS: readonly ["action", "neutral", "inverse", "gradient-grey", "gradient-white"];
-declare type LoaderSpinnerVariants = typeof LOADER_SPINNER_VARIANTS[number];
+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 LoaderSpinnerSizes = (typeof LOADER_SPINNER_SIZES)[number];
 declare type LoaderSpinnerSizeParams = Record<LoaderSpinnerSizes, {
     wrapperDimensions: number;
     strokeWidth: number;

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

@@ -27,11 +27,11 @@ export const StyledLabel = styled(Typography)`
   ${({
   size
 }) => css`
-      display: flex;
-      justify-content: center;
-      text-align: center;
-      ${size === "extra-small" ? "margin-left: var(--spacing100)" : `margin-top: ${LOADER_SPINNER_SIZE_PARAMS[size].labelMarginTop}px`};
-    `}
+    display: flex;
+    justify-content: center;
+    text-align: center;
+    ${size === "extra-small" ? "margin-left: var(--spacing100)" : `margin-top: ${LOADER_SPINNER_SIZE_PARAMS[size].labelMarginTop}px`};
+  `}
 `;
 export const StyledSpinnerCircleSvg = styled.svg`
   ${({

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

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 interface StarProps {
     starContainerClassName: "star-1" | "star-2" | "star-3";
     gradientId: "gradient1" | "gradient2" | "gradient3";

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

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { TagProps } from "../../__internal__/utils/helpers/tags/tags";
 export interface LoaderStarProps extends Omit<TagProps, "data-component"> {
     /**

package/esm/components/menu/menu-segment-title/menu-segment-title.component.d.ts

@@ -2,7 +2,7 @@ import React from "react";
 import { VariantType } from "../menu-item";
 import { TagProps } from "../../../__internal__/utils/helpers/tags";
 declare const AS_VALUES: readonly ["h2", "h3", "h4", "h5", "h6"];
-declare type AllowedAsValues = typeof AS_VALUES[number];
+declare type AllowedAsValues = (typeof AS_VALUES)[number];
 export interface MenuTitleProps extends TagProps {
     children?: React.ReactNode;
     text: string;

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

@@ -20,7 +20,7 @@ export interface NoteProps extends MarginProps {
         timeStamp: string;
     };
     /** Adds a Title to the Note */
-    title?: string;
+    title?: React.ReactNode;
     /** Set a percentage-based width for the whole Note component, relative to its parent. */
     width?: number;
 }

package/esm/components/note/note.component.js

@@ -3,12 +3,13 @@ import React from "react";
 import PropTypes from "prop-types";
 import { Editor } from "draft-js";
 import invariant from "invariant";
-import { StyledNote, StyledNoteContent, StyledNoteMain, StyledInlineControl, StyledTitle, StyledFooter, StyledFooterContent } from "./note.style";
+import { StyledNote, StyledNoteContent, StyledNoteMain, StyledInlineControl, StyledTitleWrapper, StyledFooter, StyledFooterContent } from "./note.style";
 import StatusIcon from "./__internal__/status-icon";
 import { ActionPopover } from "../action-popover";
 import { getDecoratedValue } from "../text-editor/__internal__/utils";
 import EditorContext from "../text-editor/__internal__/editor.context";
 import LinkPreview from "../link-preview";
+import Typography from "../typography";
 function hasExpectedDisplayName(child, displayName) {
   return child.type.displayName === displayName;
 }
@@ -50,7 +51,14 @@ export const Note = ({
     width: width
   }, rest, {
     "data-component": "note"
-  }), /*#__PURE__*/React.createElement(StyledNoteMain, null, /*#__PURE__*/React.createElement(StyledNoteContent, null, title && /*#__PURE__*/React.createElement(StyledTitle, null, title), /*#__PURE__*/React.createElement(Editor, {
+  }), /*#__PURE__*/React.createElement(StyledNoteMain, null, /*#__PURE__*/React.createElement(StyledNoteContent, null, title && (typeof title === "string" ? /*#__PURE__*/React.createElement(Typography, {
+    "data-role": "note-title",
+    fontWeight: "700",
+    fontSize: "16px",
+    lineHeight: "21px",
+    paddingBottom: "16px",
+    variant: "h2"
+  }, title) : /*#__PURE__*/React.createElement(StyledTitleWrapper, null, title)), /*#__PURE__*/React.createElement(Editor, {
     readOnly: true,
     editorState: getDecoratedValue(noteContent),
     onChange: /* istanbul ignore next */() => {}

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

@@ -3,7 +3,7 @@ declare const StyledNoteContent: import("styled-components").StyledComponent<"di
 }, never>;
 declare const StyledNoteMain: import("styled-components").StyledComponent<"div", any, {}, never>;
 declare const StyledInlineControl: import("styled-components").StyledComponent<"div", any, {}, never>;
-declare const StyledTitle: import("styled-components").StyledComponent<"header", any, {}, never>;
+declare const StyledTitleWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
 declare const StyledFooterContent: import("styled-components").StyledComponent<"div", any, {
     hasName: boolean;
 }, never>;
@@ -11,4 +11,4 @@ declare const StyledFooter: import("styled-components").StyledComponent<"div", a
 declare const StyledNote: import("styled-components").StyledComponent<"div", any, {
     width: number;
 }, never>;
-export { StyledNote, StyledNoteContent, StyledNoteMain, StyledInlineControl, StyledTitle, StyledFooter, StyledFooterContent, };
+export { StyledNote, StyledNoteContent, StyledNoteMain, StyledInlineControl, StyledTitleWrapper, StyledFooter, StyledFooterContent, };

package/esm/components/note/note.style.js

@@ -2,6 +2,7 @@ import styled, { css } from "styled-components";
 import { margin } from "styled-system";
 import baseTheme from "../../style/themes/base";
 import { StyledLinkPreview } from "../link-preview/link-preview.style";
+import { VARIANT_TYPES } from "../typography/typography.component";
 const StyledNoteContent = styled.div`
   position: relative;
   width: 100%;
@@ -11,13 +12,11 @@ const StyledNoteContent = styled.div`
 }) => css`
     div.DraftEditor-root {
       min-height: inherit;
-      height: 100%;
     }
 
     div.DraftEditor-editorContainer,
     div.public-DraftEditor-content {
       min-height: inherit;
-      height: 100%;
       background-color: var(--colorsUtilityYang100);
       line-height: 21px;
     }
@@ -40,11 +39,15 @@ const StyledInlineControl = styled.div`
   display: inline-block;
   min-width: fit-content;
 `;
-const StyledTitle = styled.header`
+const StyledTitleWrapper = styled.div`
+  ${VARIANT_TYPES.map(variant => `
+${variant}{
   font-weight: 700;
   font-size: 16px;
   line-height: 21px;
   padding-bottom: 16px;
+}
+  `)}
 `;
 const StyledFooterContent = styled.div`
   line-height: 21px;
@@ -128,4 +131,4 @@ const StyledNote = styled.div`
 StyledNote.defaultProps = {
   theme: baseTheme
 };
-export { StyledNote, StyledNoteContent, StyledNoteMain, StyledInlineControl, StyledTitle, StyledFooter, StyledFooterContent };
+export { StyledNote, StyledNoteContent, StyledNoteMain, StyledInlineControl, StyledTitleWrapper, StyledFooter, StyledFooterContent };

package/esm/components/numeral-date/numeral-date.component.d.ts

@@ -93,6 +93,6 @@ export interface NumeralDateProps<DateType extends NumeralDateObject = FullDate>
     /** Flag to configure component as optional. */
     isOptional?: boolean;
 }
-export declare type ValidDateFormat = typeof ALLOWED_DATE_FORMATS[number];
+export declare type ValidDateFormat = (typeof ALLOWED_DATE_FORMATS)[number];
 export declare const NumeralDate: <DateType extends NumeralDateObject = FullDate>({ dateFormat, defaultValue, disabled, error, warning, "data-component": dataComponent, "data-element": dataElement, "data-role": dataRole, info, id, name, onBlur, onChange, value, validationOnLabel, label, labelInline, labelWidth, labelAlign, labelHelp, labelSpacing, fieldHelp, adaptiveLabelBreakpoint, required, isOptional, readOnly, size, enableInternalError, enableInternalWarning, tooltipPosition, helpAriaLabel, dayRef, monthRef, yearRef, ...rest }: NumeralDateProps<DateType>) => React.JSX.Element;
 export default NumeralDate;

package/esm/components/pager/pager.style.js

@@ -27,8 +27,8 @@ const StyledPagerContainer = styled.div`
   ${({
   variant
 }) => css`
-      background-color: ${variant === "alternate" ? "var(--colorsUtilityMajor040)" : "var(--colorsUtilityMajor010)"};
-    `}
+    background-color: ${variant === "alternate" ? "var(--colorsUtilityMajor040)" : "var(--colorsUtilityMajor010)"};
+  `}
 `;
 const StyledPagerSizeOptions = styled.div`
   display: flex;

package/esm/components/pod/pod.config.d.ts

@@ -1,6 +1,6 @@
 export declare const POD_SIZES: readonly ["extra-small", "small", "medium", "large", "extra-large"];
 export declare const POD_ALIGNMENTS: readonly ["left", "center", "right"];
 export declare const POD_VARIANTS: readonly ["primary", "secondary", "tertiary", "tile", "transparent"];
-export declare type PodSize = typeof POD_SIZES[number];
-export declare type PodAlignment = typeof POD_ALIGNMENTS[number];
-export declare type PodVariant = typeof POD_VARIANTS[number];
+export declare type PodSize = (typeof POD_SIZES)[number];
+export declare type PodAlignment = (typeof POD_ALIGNMENTS)[number];
+export declare type PodVariant = (typeof POD_VARIANTS)[number];

package/esm/components/pod/pod.style.js

@@ -39,52 +39,52 @@ const StyledBlock = styled.div`
   isHovered,
   isFocused
 }) => css`
-      box-sizing: border-box;
-      border-radius: var(--borderRadius100);
-      display: flex;
-      flex-direction: column;
-      background-color: ${blockBackgrounds[variant]};
-      width: 100%;
-      height: 100%;
+    box-sizing: border-box;
+    border-radius: var(--borderRadius100);
+    display: flex;
+    flex-direction: column;
+    background-color: ${blockBackgrounds[variant]};
+    width: 100%;
+    height: 100%;
 
-      ${variant === "tile" && "box-shadow: 0 2px 3px 0 rgba(2, 18, 36, 0.2)"};
+    ${variant === "tile" && "box-shadow: 0 2px 3px 0 rgba(2, 18, 36, 0.2)"};
 
-      ${noBorder ? "border: none" : `border: 1px solid var(--colorsUtilityMajor100)`};
+    ${noBorder ? "border: none" : `border: 1px solid var(--colorsUtilityMajor100)`};
 
-      ${hasButtons && !(fullWidth || internalEditButton) && "width: auto;"};
+    ${hasButtons && !(fullWidth || internalEditButton) && "width: auto;"};
 
-      ${contentTriggersEdit && "cursor: pointer"};
+    ${contentTriggersEdit && "cursor: pointer"};
 
-      ${(isHovered || isFocused) && css`
-        background-color: var(--colorsUtilityMajor075);
+    ${(isHovered || isFocused) && css`
+      background-color: var(--colorsUtilityMajor075);
 
-        ${internalEditButton && variant === "tile" && "background-color: var(--colorsUtilityMajorTransparent);"}
+      ${internalEditButton && variant === "tile" && "background-color: var(--colorsUtilityMajorTransparent);"}
 
-        ${contentTriggersEdit && css`
-          background-color: var(--colorsActionMajor600);
-          * {
-            color: var(--colorsUtilityYang100);
-          }
-        `}
+      ${contentTriggersEdit && css`
+        background-color: var(--colorsActionMajor600);
+        * {
+          color: var(--colorsUtilityYang100);
+        }
       `}
+    `}
 
-      ${(!internalEditButton || contentTriggersEdit) && (isFocused ? css`
-            outline: 3px solid var(--colorsSemanticFocus500);
-            border: none;
-            padding: ${noBorder ? 0 : 1}px;
-          ` : css`
-            outline: none;
-          `)}
+    ${(!internalEditButton || contentTriggersEdit) && (isFocused ? css`
+          outline: 3px solid var(--colorsSemanticFocus500);
+          border: none;
+          padding: ${noBorder ? 0 : 1}px;
+        ` : css`
+          outline: none;
+        `)}
 
       ${softDelete && css`
-        border: none;
-        background-color: var(--colorsActionDisabled500);
+      border: none;
+      background-color: var(--colorsActionDisabled500);
 
-        & > * {
-          color: var(--colorsUtilityYin065);
-        }
-      `};
-    `}
+      & > * {
+        color: var(--colorsUtilityYin065);
+      }
+    `};
+  `}
 `;
 const contentPaddings = {
   "extra-small": "8px",

package/esm/components/progress-tracker/progress-tracker.style.js

@@ -35,8 +35,8 @@ const StyledProgressTracker = styled.div`
   ${({
   length
 }) => css`
-      width: ${length};
-    `};
+    width: ${length};
+  `};
   ${({
   labelsPosition
 }) => labelsPosition === "left" && css`

package/esm/components/select/__internal__/list-action-button/list-action-button.style.js

@@ -4,7 +4,9 @@ const StyledListActionButtonWrapper = styled.div`
   padding-top: var(--spacing100);
   padding-bottom: var(--spacing100);
   border-top: 1px solid var(--colorsUtilityDisabled600);
-  box-shadow: 0 0px 0 0 rgba(0, 0, 0, 0), 0 -8px 8px 0 rgba(0, 0, 0, 0.03);
+  box-shadow:
+    0 0px 0 0 rgba(0, 0, 0, 0),
+    0 -8px 8px 0 rgba(0, 0, 0, 0.03);
   width: 100%;
   position: sticky;
   bottom: 0;

package/esm/components/switch/switch.style.js

@@ -16,14 +16,14 @@ export const ErrorBorder = styled.span`
   ${({
   warning
 }) => css`
-      position: absolute;
-      z-index: 6;
-      width: 2px;
-      background-color: ${warning ? "var(--colorsSemanticCaution500)" : "var(--colorsSemanticNegative500)"};
-      left: -12px;
-      bottom: -4px;
-      top: 2px;
-    `}
+    position: absolute;
+    z-index: 6;
+    width: 2px;
+    background-color: ${warning ? "var(--colorsSemanticCaution500)" : "var(--colorsSemanticNegative500)"};
+    left: -12px;
+    bottom: -4px;
+    top: 2px;
+  `}
 `;
 export const StyledHintText = styled.div`
   margin-top: 8px;

package/esm/components/text-editor/__internal__/toolbar/toolbar-button/toolbar-button.component.js

@@ -20,7 +20,8 @@ const ToolbarButton = /*#__PURE__*/React.forwardRef(({
     onKeyDown: onKeyDown,
     onMouseDown: onMouseDown,
     isActive: activated,
-    "aria-label": ariaLabel
+    "aria-label": ariaLabel,
+    "aria-pressed": activated
   }, !tabbable && {
     tabIndex: -1
   }, {

package/esm/components/textbox/textbox.style.js

@@ -4,14 +4,14 @@ const ErrorBorder = styled.span`
   warning,
   inline
 }) => css`
-      position: absolute;
-      z-index: 6;
-      width: 2px;
-      background-color: ${warning ? "var(--colorsSemanticCaution500)" : "var(--colorsSemanticNegative500)"};
-      left: -12px;
-      bottom: ${inline ? "10px" : "0px"};
-      top: 0px;
-    `}
+    position: absolute;
+    z-index: 6;
+    width: 2px;
+    background-color: ${warning ? "var(--colorsSemanticCaution500)" : "var(--colorsSemanticNegative500)"};
+    left: -12px;
+    bottom: ${inline ? "10px" : "0px"};
+    top: 0px;
+  `}
 `;
 const StyledHintText = styled.div`
   ::after {

package/esm/components/tile/flex-tile-divider/flex-tile-divider.component.d.ts

@@ -1,2 +1,3 @@
+/// <reference types="react" />
 export declare const FlexTileDivider: () => JSX.Element;
 export default FlexTileDivider;

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

@@ -4,7 +4,7 @@ import { SpaceProps, WidthProps } from "styled-system";
 import { TagProps } from "../../__internal__/utils/helpers/tags";
 import { TILE_HIGHLIGHT_VARIANTS } from "./tile.config";
 declare type DesignTokensType = keyof typeof DesignTokens;
-declare type HighlightVariantType = typeof TILE_HIGHLIGHT_VARIANTS[number];
+declare type HighlightVariantType = (typeof TILE_HIGHLIGHT_VARIANTS)[number];
 export interface TileProps extends SpaceProps, WidthProps, TagProps {
     /** Sets the theme of the tile */
     variant?: "tile" | "transparent" | "active" | "grey";