carbon-react 144.4.0 → 144.5.0

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

@@ -1,10 +1,10 @@
 import styled, { css } from "styled-components";
 import FieldHelpStyle from "../field-help/field-help.style";
 import { FieldLineStyle } from "../form-field/form-field.style";
-import HiddenCheckableInputStyle from "./hidden-checkable-input.style";
 import LabelStyle, { StyledLabelContainer } from "../label/label.style";
-import StyledHelp from "../../components/help/help.style";
 import StyledValidationIcon from "../validations/validation-icon.style";
+import StyledHelp from "../../components/help/help.style";
+import HiddenCheckableInputStyle from "./hidden-checkable-input.style";
 const StyledCheckableInput = styled.div`
   display: inline-block;
   position: relative;
@@ -18,6 +18,8 @@ const StyledCheckableInputWrapper = styled.div`
   labelInline,
   reverse
 }) => css`
+    width: 100% !important;
+
     ${FieldLineStyle} {
       display: flex;
     }
@@ -86,6 +88,7 @@ const StyledCheckableInputWrapper = styled.div`
     ${inputWidth !== undefined && inputWidth !== 0 && css`
       ${StyledCheckableInput} {
         width: ${inputWidth}% !important;
+        min-width: 67px;
       }
     `}
 

package/esm/__internal__/label/label.component.d.ts

@@ -24,7 +24,9 @@ export interface LabelProps extends ValidationProps, StyledLabelProps, StyledLab
     className?: string;
     /** Sets aria-label for label element */
     "aria-label"?: string;
+    /** Whether this component is shown against a dark background */
+    isDarkBackground?: boolean;
 }
-export declare const Label: ({ align, as, children, disabled, error, help, helpIcon, htmlFor, info, inline, isRequired, labelId, optional, pr, pl, tooltipId, useValidationIcon, validationIconId, warning, width, className, "aria-label": ariaLabel, }: LabelProps) => React.JSX.Element;
-declare const _default: React.MemoExoticComponent<({ align, as, children, disabled, error, help, helpIcon, htmlFor, info, inline, isRequired, labelId, optional, pr, pl, tooltipId, useValidationIcon, validationIconId, warning, width, className, "aria-label": ariaLabel, }: LabelProps) => React.JSX.Element>;
+export declare const Label: ({ align, as, children, disabled, error, help, helpIcon, htmlFor, info, inline, isDarkBackground, isRequired, labelId, optional, pr, pl, tooltipId, useValidationIcon, validationIconId, warning, width, className, "aria-label": ariaLabel, }: LabelProps) => React.JSX.Element;
+declare const _default: React.MemoExoticComponent<({ align, as, children, disabled, error, help, helpIcon, htmlFor, info, inline, isDarkBackground, isRequired, labelId, optional, pr, pl, tooltipId, useValidationIcon, validationIconId, warning, width, className, "aria-label": ariaLabel, }: LabelProps) => React.JSX.Element>;
 export default _default;

package/esm/__internal__/label/label.component.js

@@ -34,6 +34,7 @@ export const Label = ({
   htmlFor,
   info,
   inline,
+  isDarkBackground = false,
   isRequired,
   labelId,
   optional,
@@ -116,7 +117,8 @@ export const Label = ({
     onMouseLeave: handleMouseLeave,
     isRequired: isRequired,
     as: as,
-    "aria-label": ariaLabel
+    "aria-label": ariaLabel,
+    isDarkBackground: isDarkBackground
   }), children), icon());
 };
 export default /*#__PURE__*/React.memo(Label);

package/esm/__internal__/label/label.style.d.ts

@@ -3,6 +3,8 @@ export interface StyledLabelProps {
     disabled?: boolean;
     /** Flag to configure component as mandatory */
     isRequired?: boolean;
+    /** Flag to determine whether to use colours for dark backgrounds */
+    isDarkBackground?: boolean;
 }
 declare const StyledLabel: import("styled-components").StyledComponent<"label", any, StyledLabelProps, never>;
 export interface StyledLabelContainerProps {

package/esm/__internal__/label/label.style.js

@@ -1,6 +1,10 @@
 import styled, { css } from "styled-components";
 const StyledLabel = styled.label`
-  color: var(--colorsUtilityYin090);
+  ${({
+  isDarkBackground
+}) => css`
+    color: ${isDarkBackground ? "var(--colorsUtilityYang100)" : "var(--colorsUtilityYin090)"};
+  `}
   display: block;
   font-weight: var(--fontWeights500);
 

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/__internal__/validation-message/validation-message.component.d.ts

@@ -8,6 +8,8 @@ export interface ValidationMessageProps {
     /** Indicate that warning has occurred
     Pass string to display hint with warning */
     warning?: boolean | string;
+    /** Whether this component resides on a dark background */
+    isDarkBackground?: boolean;
 }
-declare const ValidationMessage: ({ error, validationId, warning, }: ValidationMessageProps) => React.JSX.Element | null;
+declare const ValidationMessage: ({ error, validationId, warning, isDarkBackground, }: ValidationMessageProps) => React.JSX.Element | null;
 export default ValidationMessage;

package/esm/__internal__/validation-message/validation-message.component.js

@@ -4,14 +4,16 @@ import StyledValidationMessage from "./validation-message.style";
 const ValidationMessage = ({
   error,
   validationId,
-  warning
+  warning,
+  isDarkBackground
 }) => {
   const validation = error || warning;
   const isStringValidation = typeof validation === "string";
   return isStringValidation ? /*#__PURE__*/React.createElement(StyledValidationMessage, {
     id: validationId,
     isWarning: !!(!error && warning),
-    "data-role": "validation-message"
+    "data-role": "validation-message",
+    isDarkBackground: isDarkBackground
   }, validation) : null;
 };
 export default ValidationMessage;

package/esm/__internal__/validation-message/validation-message.style.d.ts

@@ -1,5 +1,6 @@
 interface StyledValidationMessageProps {
     isWarning?: boolean;
+    isDarkBackground?: boolean;
 }
 declare const StyledValidationMessage: import("styled-components").StyledComponent<"p", any, StyledValidationMessageProps, never>;
 export default StyledValidationMessage;

package/esm/__internal__/validation-message/validation-message.style.js

@@ -1,12 +1,16 @@
 import styled, { css } from "styled-components";
 const StyledValidationMessage = styled.p`
   ${({
-  isWarning
-}) => css`
-    color: ${isWarning ? "var(--colorsSemanticCaution600)" : "var(--colorsSemanticNegative500)"};
-    font-weight: ${isWarning ? "normal" : "500"};
-    margin-top: 0px;
-    margin-bottom: 8px;
-  `}
+  isWarning,
+  isDarkBackground
+}) => {
+  const darkBgColour = isDarkBackground ? "var(--colorsSemanticNegative450)" : "var(--colorsSemanticNegative500)";
+  return css`
+      color: ${isWarning ? "var(--colorsSemanticCaution600)" : darkBgColour};
+      font-weight: ${isWarning ? "normal" : "500"};
+      margin-top: 0px;
+      margin-bottom: 8px;
+    `;
+}}
 `;
 export default StyledValidationMessage;

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.component.d.ts

@@ -35,9 +35,11 @@ export interface FlatTableProps extends MarginProps, Omit<TagProps, "data-compon
     overflowX?: string;
     /** Width of the table. Any valid CSS string */
     width?: string;
+    /** The title to describe the table when one or more tables are used on a single page */
+    title?: string;
 }
 export declare const FlatTable: {
-    ({ caption, children, hasStickyHead, colorTheme, footer, hasStickyFooter, height, isZebra, size, hasMaxHeight, hasOuterVerticalBorders, bottomBorderRadius, ariaDescribedby, minHeight, overflowX, width, ...rest }: FlatTableProps): React.JSX.Element;
+    ({ caption, children, hasStickyHead, colorTheme, footer, hasStickyFooter, height, isZebra, size, hasMaxHeight, hasOuterVerticalBorders, bottomBorderRadius, ariaDescribedby, minHeight, overflowX, width, title, ...rest }: FlatTableProps): React.JSX.Element;
     displayName: string;
 };
 export default FlatTable;

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

@@ -23,6 +23,7 @@ export const FlatTable = ({
   minHeight,
   overflowX,
   width,
+  title,
   ...rest
 }) => {
   const wrapperRef = useRef(null);
@@ -162,7 +163,8 @@ export const FlatTable = ({
     onKeyDown: handleKeyDown,
     isFocused: focused
   }, rest, {
-    "data-component": "flat-table-wrapper"
+    "data-component": "flat-table-wrapper",
+    title: title
   }), /*#__PURE__*/React.createElement(StyledTableContainer, {
     ref: container,
     onFocus: () => {

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/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`