carbon-react 144.4.0 → 144.5.0

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

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

package/lib/__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/lib/__internal__/validation-message/validation-message.component.js

@@ -11,14 +11,16 @@ function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e
 const ValidationMessage = ({
   error,
   validationId,
-  warning
+  warning,
+  isDarkBackground
 }) => {
   const validation = error || warning;
   const isStringValidation = typeof validation === "string";
   return isStringValidation ? /*#__PURE__*/_react.default.createElement(_validationMessage.default, {
     id: validationId,
     isWarning: !!(!error && warning),
-    "data-role": "validation-message"
+    "data-role": "validation-message",
+    isDarkBackground: isDarkBackground
   }, validation) : null;
 };
 var _default = exports.default = ValidationMessage;

package/lib/__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/lib/__internal__/validation-message/validation-message.style.js

@@ -9,12 +9,16 @@ function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return
 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 StyledValidationMessage = _styledComponents.default.p`
   ${({
-  isWarning
-}) => (0, _styledComponents.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 (0, _styledComponents.css)`
+      color: ${isWarning ? "var(--colorsSemanticCaution600)" : darkBgColour};
+      font-weight: ${isWarning ? "normal" : "500"};
+      margin-top: 0px;
+      margin-bottom: 8px;
+    `;
+}}
 `;
 var _default = exports.default = StyledValidationMessage;

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

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

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

@@ -39,8 +39,8 @@ const Divider = exports.Divider = _styledComponents.default.span`
     ${({
   isDarkBackground
 }) => (0, _styledComponents.css)`
-        color: ${isDarkBackground ? "var(--colorsUtilityYang100)" : "var(--colorsUtilityYin055)"};
-      `}
+      color: ${isDarkBackground ? "var(--colorsUtilityYang100)" : "var(--colorsUtilityYin055)"};
+    `}
   }
 `;
 var _default = exports.default = {

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

@@ -171,32 +171,32 @@ const StyledButtonToggleWrapper = exports.StyledButtonToggleWrapper = _styledCom
   ${({
   grouped
 }) => (0, _styledComponents.css)`
-      ${!grouped && (0, _styledComponents.css)`
-        &&&& {
-          ${StyledButtonToggle} {
-            border-radius: var(--borderRadius050);
-          }
+    ${!grouped && (0, _styledComponents.css)`
+      &&&& {
+        ${StyledButtonToggle} {
+          border-radius: var(--borderRadius050);
         }
-      `}
+      }
+    `}
 
-      ${grouped && (0, _styledComponents.css)`
-        &&&& {
-          :first-of-type {
-            ${StyledButtonToggle} {
-              border-top-left-radius: var(--borderRadius050);
-              border-bottom-left-radius: var(--borderRadius050);
-            }
+    ${grouped && (0, _styledComponents.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/lib/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/lib/components/date/__internal__/date-picker/day-picker.style.js

@@ -321,13 +321,17 @@ const StyledDayPicker = _styledComponents.default.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/lib/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/lib/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/lib/components/dialog/dialog.style.js

@@ -63,8 +63,8 @@ const StyledDialog = exports.StyledDialog = _styledComponents.default.div`
   ${({
   backgroundColor
 }) => (0, _styledComponents.css)`
-      background-color: ${backgroundColor};
-    `}
+    background-color: ${backgroundColor};
+  `}
 
   ${({
   dialogHeight

package/lib/components/drawer/drawer.style.js

@@ -40,26 +40,26 @@ const StyledDrawerSidebar = exports.StyledDrawerSidebar = (0, _styledComponents.
   hasControls,
   isExpanded
 }) => (0, _styledComponents.css)`
-      ${!isExpanded && (0, _styledComponents.css)`
-        display: none;
-        opacity: 0;
-      `}
+    ${!isExpanded && (0, _styledComponents.css)`
+      display: none;
+      opacity: 0;
+    `}
 
-      ${isExpanded && (0, _styledComponents.css)`
-        display: flex;
-        flex-direction: column;
-        flex: 1 1 0%;
-      `}
+    ${isExpanded && (0, _styledComponents.css)`
+      display: flex;
+      flex-direction: column;
+      flex: 1 1 0%;
+    `}
 
       ${hasControls && (0, _styledComponents.css)`
-        ${_tabs.default} {
-          margin-top: 48px;
-          ${!isExpanded && (0, _styledComponents.css)`
-            display: none;
-          `}
-        }
-      `}
+      ${_tabs.default} {
+        margin-top: 48px;
+        ${!isExpanded && (0, _styledComponents.css)`
+          display: none;
+        `}
+      }
     `}
+  `}
 
   &::-webkit-scrollbar {
     width: 12px;

package/lib/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/lib/components/flat-table/flat-table.component.js

@@ -32,6 +32,7 @@ const FlatTable = ({
   minHeight,
   overflowX,
   width,
+  title,
   ...rest
 }) => {
   const wrapperRef = (0, _react.useRef)(null);
@@ -171,7 +172,8 @@ const FlatTable = ({
     onKeyDown: handleKeyDown,
     isFocused: focused
   }, rest, {
-    "data-component": "flat-table-wrapper"
+    "data-component": "flat-table-wrapper",
+    title: title
   }), /*#__PURE__*/_react.default.createElement(_flatTable.StyledTableContainer, {
     ref: container,
     onFocus: () => {

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

@@ -137,20 +137,20 @@ const StyledFlatTableWrapper = exports.StyledFlatTableWrapper = (0, _styledCompo
   theme,
   isFocused
 }) => (0, _styledComponents.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 */
 (0, _styledComponents.css)`
-        ${oldFocusStyling}
-      `}
+      ${oldFocusStyling}
+    `}
 
-      ${!theme.focusRedesignOptOut && isFocused && (0, _styledComponents.css)`
-        ${(0, _addFocusStyling.default)()}
-      `}
+    ${!theme.focusRedesignOptOut && isFocused && (0, _styledComponents.css)`
+      ${(0, _addFocusStyling.default)()}
+    `}
 
       ${isInSidebar ? "min-width: fit-content;" : ""}
-    `}
+  `}
 
   ${({
   colorTheme

package/lib/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/lib/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/lib/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/lib/components/loader-spinner/loader-spinner.style.js

@@ -36,11 +36,11 @@ const StyledLabel = exports.StyledLabel = (0, _styledComponents.default)(_typogr
   ${({
   size
 }) => (0, _styledComponents.css)`
-      display: flex;
-      justify-content: center;
-      text-align: center;
-      ${size === "extra-small" ? "margin-left: var(--spacing100)" : `margin-top: ${_loaderSpinner.LOADER_SPINNER_SIZE_PARAMS[size].labelMarginTop}px`};
-    `}
+    display: flex;
+    justify-content: center;
+    text-align: center;
+    ${size === "extra-small" ? "margin-left: var(--spacing100)" : `margin-top: ${_loaderSpinner.LOADER_SPINNER_SIZE_PARAMS[size].labelMarginTop}px`};
+  `}
 `;
 const StyledSpinnerCircleSvg = exports.StyledSpinnerCircleSvg = _styledComponents.default.svg`
   ${({

package/lib/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/lib/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/lib/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/lib/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/lib/components/pager/pager.style.js

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

package/lib/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/lib/components/pod/pod.style.js

@@ -48,52 +48,52 @@ const StyledBlock = exports.StyledBlock = _styledComponents.default.div`
   isHovered,
   isFocused
 }) => (0, _styledComponents.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) && (0, _styledComponents.css)`
-        background-color: var(--colorsUtilityMajor075);
+    ${(isHovered || isFocused) && (0, _styledComponents.css)`
+      background-color: var(--colorsUtilityMajor075);
 
-        ${internalEditButton && variant === "tile" && "background-color: var(--colorsUtilityMajorTransparent);"}
+      ${internalEditButton && variant === "tile" && "background-color: var(--colorsUtilityMajorTransparent);"}
 
-        ${contentTriggersEdit && (0, _styledComponents.css)`
-          background-color: var(--colorsActionMajor600);
-          * {
-            color: var(--colorsUtilityYang100);
-          }
-        `}
+      ${contentTriggersEdit && (0, _styledComponents.css)`
+        background-color: var(--colorsActionMajor600);
+        * {
+          color: var(--colorsUtilityYang100);
+        }
       `}
+    `}
 
-      ${(!internalEditButton || contentTriggersEdit) && (isFocused ? (0, _styledComponents.css)`
-            outline: 3px solid var(--colorsSemanticFocus500);
-            border: none;
-            padding: ${noBorder ? 0 : 1}px;
-          ` : (0, _styledComponents.css)`
-            outline: none;
-          `)}
+    ${(!internalEditButton || contentTriggersEdit) && (isFocused ? (0, _styledComponents.css)`
+          outline: 3px solid var(--colorsSemanticFocus500);
+          border: none;
+          padding: ${noBorder ? 0 : 1}px;
+        ` : (0, _styledComponents.css)`
+          outline: none;
+        `)}
 
       ${softDelete && (0, _styledComponents.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/lib/components/progress-tracker/progress-tracker.style.js

@@ -44,8 +44,8 @@ const StyledProgressTracker = exports.StyledProgressTracker = _styledComponents.
   ${({
   length
 }) => (0, _styledComponents.css)`
-      width: ${length};
-    `};
+    width: ${length};
+  `};
   ${({
   labelsPosition
 }) => labelsPosition === "left" && (0, _styledComponents.css)`

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

@@ -11,7 +11,9 @@ const StyledListActionButtonWrapper = _styledComponents.default.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/lib/components/switch/__internal__/switch-slider-panel.style.d.ts

@@ -2,6 +2,7 @@ import { SwitchProps } from "../switch.component";
 export interface SwitchSliderPanelProps {
     isLoading?: boolean;
     size?: SwitchProps["size"];
+    isDarkBackground?: boolean;
 }
 declare const SwitchSliderPanel: import("styled-components").StyledComponent<"div", any, SwitchSliderPanelProps, never>;
 export default SwitchSliderPanel;

package/lib/components/switch/__internal__/switch-slider-panel.style.js

@@ -5,29 +5,31 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
-var _loader = _interopRequireDefault(require("../../loader/loader.style"));
 var _loaderSquare = _interopRequireDefault(require("../../loader/loader-square.style"));
+var _loader = _interopRequireDefault(require("../../loader/loader.style"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 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 SwitchSliderPanel = _styledComponents.default.div`
   ${({
   isLoading,
-  size
+  size,
+  isDarkBackground
 }) => (0, _styledComponents.css)`
     border: 0;
-    color: var(--colorsActionMinorYang100);
+    color: ${isDarkBackground ? "var(--colorsUtilityYin100)" : "var(--colorsActionMinorYang100)"};
     margin: auto;
     position: absolute;
     left: 0;
 
     &[type="on"] {
+      color: ${isDarkBackground ? "var(--colorsUtilityYin100)" : "var(--colorsUtilityYang100)"};
       margin-left: 9px;
       padding-right: ${size === "large" ? "43px" : "27px"};
     }
 
     &[type="off"] {
-      color: var(--colorsActionMinor500);
+      color: ${isDarkBackground ? "var(--colorsUtilityYang100)" : "var(--colorsActionMinor500)"};
       margin-right: 9px;
       padding-left: ${size === "large" ? "43px" : "27px"};
     }

package/lib/components/switch/__internal__/switch-slider.component.d.ts

@@ -6,6 +6,7 @@ export interface SwitchSliderProps extends ValidationProps {
     loading?: boolean;
     size?: "small" | "large";
     useValidationIcon?: boolean;
+    isDarkBackground?: boolean;
 }
-declare const SwitchSlider: ({ checked, disabled, loading, size, error, warning, info, useValidationIcon, }: SwitchSliderProps) => React.JSX.Element;
+declare const SwitchSlider: ({ checked, disabled, loading, size, error, warning, info, useValidationIcon, isDarkBackground, }: SwitchSliderProps) => React.JSX.Element;
 export default SwitchSlider;

package/lib/components/switch/__internal__/switch-slider.component.js

@@ -21,7 +21,8 @@ const SwitchSlider = ({
   error,
   warning,
   info,
-  useValidationIcon
+  useValidationIcon,
+  isDarkBackground
 }) => {
   const locale = (0, _useLocale.default)();
   const onText = locale.switch.on();
@@ -38,13 +39,15 @@ const SwitchSlider = ({
     size,
     error,
     warning,
-    info
+    info,
+    isDarkBackground
   };
   const sliderPanelStyleProps = {
     isLoading: loading,
     size,
     type: checked ? "on" : "off",
-    disabled
+    disabled,
+    isDarkBackground
   };
   const loaderProps = {
     isInsideButton: true,