carbon-react 141.4.3 → 142.0.0

package/esm/components/file-input/__internal__/file-upload-status/file-upload-status.component.js

@@ -3,7 +3,7 @@ import PropTypes from "prop-types";
 import Link from "../../../link";
 import ButtonMinor from "../../../button-minor";
 import StyledTypography from "../../../typography/typography.style";
-import ProgressTracker from "../../../progress-tracker";
+import { StyledProgressBar, InnerBar } from "../../../progress-tracker/progress-tracker.style";
 import LoaderBar from "../../../loader-bar";
 import Icon from "../../../icon";
 import { StyledFileUploadStatus, StyledFileUploadStatusRow, StyledFileLinkContainer } from "./file-upload-status.style";
@@ -24,10 +24,18 @@ export const FileUploadStatus = ({
   switch (status) {
     case "uploading":
       buttonText = locale.fileInput.actions.cancel();
-      progressBar = statusProps.progress === undefined ? /*#__PURE__*/React.createElement(LoaderBar, null) : /*#__PURE__*/React.createElement(ProgressTracker, {
+      progressBar = statusProps.progress === undefined ? /*#__PURE__*/React.createElement(LoaderBar, null) : /*#__PURE__*/React.createElement(StyledProgressBar, {
+        "data-element": "progress-tracker-bar",
+        "data-role": "progress-tracker-bar",
         progress: statusProps.progress,
-        length: "100%"
-      });
+        "aria-hidden": "true"
+      }, /*#__PURE__*/React.createElement(InnerBar, {
+        "data-element": "inner-bar",
+        "data-role": "inner-bar",
+        size: "medium",
+        progress: statusProps.progress,
+        error: false
+      }));
       break;
     case "previously":
     case "completed":

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

@@ -29,8 +29,9 @@ export const Loader = ({
     "aria-label": ariaLabel || l.loader.loading(),
     role: "progressbar"
   }, tagComponent("loader", rest), filterStyledSystemMarginProps(rest)), reduceMotion ? l.loader.loading() : /*#__PURE__*/React.createElement(React.Fragment, null, ["#13A038", "#0092DB", "#8F49FE"].map(color => /*#__PURE__*/React.createElement(StyledLoaderSquare, _extends({
+    "data-role": "loader-square",
     key: color,
-    backgroundColor: variant === "gradient" ? color : "var(--colorsActionMajor500)"
+    backgroundColor: variant === "gradient" ? /* istanbul ignore next */color : "var(--colorsActionMajor500)"
   }, loaderSquareProps)))));
 };
 export default Loader;

package/esm/components/message/{message-content → __internal__/message-content}/message-content.component.d.ts

@@ -1,12 +1,8 @@
 import React from "react";
 export interface MessageContentProps {
-    /** set message title */
     title?: React.ReactNode;
-    /** set content to component */
     children?: React.ReactNode;
-    /** determines if the close icon is shown */
     showCloseIcon?: boolean;
-    /** @ignore @private used to reduce the left-padding for the transparent variant */
     reduceLeftPadding?: boolean;
 }
 declare const MessageContent: ({ title, children, showCloseIcon, reduceLeftPadding, }: MessageContentProps) => React.JSX.Element;

package/esm/components/message/{message-content → __internal__/message-content}/message-content.component.js

@@ -1,12 +1,12 @@
 import React from "react";
 import PropTypes from "prop-types";
-import Content from "../../content";
+import Content from "../../../content";
 import MessageContentStyle from "./message-content.style";
 const MessageContent = ({
   title,
   children,
   showCloseIcon,
-  reduceLeftPadding = false
+  reduceLeftPadding
 }) => {
   return /*#__PURE__*/React.createElement(MessageContentStyle, {
     showCloseIcon: showCloseIcon,

package/{lib/components/message → esm/components/message/__internal__}/type-icon/type-icon.component.d.ts

@@ -1,10 +1,8 @@
 import React from "react";
-import { MessageVariant } from "../message.component";
+import { MessageVariant } from "../../message.component";
 export interface TypeIconProps {
-    /** set background to be invisible */
     transparent?: boolean;
-    /** set type of message based on new DLS standard */
-    variant?: MessageVariant;
+    variant: MessageVariant;
 }
 declare const TypeIcon: ({ variant, transparent }: TypeIconProps) => React.JSX.Element;
 export default TypeIcon;

package/esm/components/message/{type-icon → __internal__/type-icon}/type-icon.component.js

@@ -1,10 +1,10 @@
 import React from "react";
 import PropTypes from "prop-types";
 import TypeIconStyle from "./type-icon.style";
-import Icon from "../../icon";
+import Icon from "../../../icon";
 const TypeIcon = ({
-  variant = "info",
-  transparent = false
+  variant,
+  transparent
 }) => {
   function iconToRender() {
     if (variant === "neutral") return "info";

package/{lib/components/message → esm/components/message/__internal__}/type-icon/type-icon.style.d.ts

@@ -1,8 +1,6 @@
-import { MessageVariant } from "../message.component";
+import { MessageVariant } from "../../message.component";
 declare type TypeIconStyleProps = {
-    /** set background to be invisible */
     transparent?: boolean;
-    /** set type of message based on new DLS standard */
     variant: MessageVariant;
 };
 declare const TypeIconStyle: import("styled-components").StyledComponent<"div", any, TypeIconStyleProps, never>;

package/esm/components/message/message.component.js

@@ -2,8 +2,8 @@ function _extends() { return _extends = Object.assign ? Object.assign.bind() : f
 import React, { useRef } from "react";
 import PropTypes from "prop-types";
 import MessageStyle from "./message.style";
-import TypeIcon from "./type-icon/type-icon.component";
-import MessageContent from "./message-content/message-content.component";
+import TypeIcon from "./__internal__/type-icon/type-icon.component";
+import MessageContent from "./__internal__/message-content/message-content.component";
 import tagComponent from "../../__internal__/utils/helpers/tags/tags";
 import Icon from "../icon";
 import IconButton from "../icon-button";

package/esm/components/numeral-date/numeral-date.component.js

@@ -264,7 +264,8 @@ export const NumeralDate = ({
       marginBottom: undefined
     }, /*#__PURE__*/React.createElement(Typography, {
       mb: "4px",
-      id: labelId
+      id: labelId,
+      "data-role": "numeral-date-input-text"
     }, getDateLabel(datePart, locale)), /*#__PURE__*/React.createElement(Textbox, _extends({}, index === 0 && {
       id: uniqueId
     }, {

package/esm/components/progress-tracker/progress-tracker.component.d.ts

@@ -1,32 +1,16 @@
 import React from "react";
 import { MarginProps } from "styled-system";
 export interface ProgressTrackerProps extends MarginProps {
-    /** (Deprecated) Specifies an aria label to the component */
-    "aria-label"?: string;
-    /** (Deprecated) Specifies the aria describedby for the component */
-    "aria-describedby"?: string;
-    /** (Deprecated) The value of progress to be read out to the user. */
-    "aria-valuenow"?: number;
-    /** (Deprecated) The minimum value of the progress tracker */
-    "aria-valuemin"?: number;
-    /** (Deprecated) The maximum value of the progress tracker */
-    "aria-valuemax"?: number;
-    /** (Deprecated) Prop to define the human readable text alternative of aria-valuenow
-     * if aria-valuenow is not a number
-     */
-    "aria-valuetext"?: string;
     /** Size of the progress bar. */
     size?: "small" | "medium" | "large";
     /** Length of the component, any valid css string. */
     length?: string;
     /** Current progress (percentage). */
     progress?: number;
-    /** If error occurs. */
+    /** Flag to control error state. */
     error?: boolean;
-    /** Flag to control whether the default value labels (as percentages) should be rendered. */
-    description?: string;
     /** Value to add a description to the label */
-    showDefaultLabels?: boolean;
+    description?: string;
     /** Value to display as current progress. */
     currentProgressLabel?: string;
     /** Value to display as the maximum progress limit. */
@@ -35,14 +19,13 @@ export interface ProgressTrackerProps extends MarginProps {
     customValuePreposition?: string;
     /**
      * The position the value label are rendered in.
-     * Top/bottom apply to horizontal and left applies to vertical orientation.
      */
     labelsPosition?: "top" | "bottom" | "left";
-    /** Label width */
+    /** Label width when position is "left" */
     labelWidth?: string;
 }
 declare const ProgressTracker: {
-    ({ "aria-label": ariaLabel, "aria-describedby": ariaDescribedBy, "aria-valuenow": ariaValueNow, "aria-valuemin": ariaValueMin, "aria-valuemax": ariaValueMax, "aria-valuetext": ariaValueText, size, length, error, progress, description, showDefaultLabels, currentProgressLabel, customValuePreposition, maxProgressLabel, labelsPosition, labelWidth, ...rest }: ProgressTrackerProps): React.JSX.Element;
+    ({ size, length, error, progress, description, currentProgressLabel, customValuePreposition, maxProgressLabel, labelsPosition, labelWidth, ...rest }: ProgressTrackerProps): React.JSX.Element;
     displayName: string;
 };
 export default ProgressTracker;

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

@@ -1,25 +1,15 @@
 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, { useCallback, useLayoutEffect, useRef, useState } from "react";
+import React from "react";
 import PropTypes from "prop-types";
 import useLocale from "../../hooks/__internal__/useLocale";
 import tagComponent from "../../__internal__/utils/helpers/tags";
 import { StyledProgressBar, InnerBar, StyledValuesLabel, StyledProgressTracker, StyledValue, StyledDescription } from "./progress-tracker.style";
-import useResizeObserver from "../../hooks/__internal__/useResizeObserver";
-import Logger from "../../__internal__/utils/logger";
-let deprecatedAriaTagsWarnTriggered = false;
 const ProgressTracker = ({
-  "aria-label": ariaLabel,
-  "aria-describedby": ariaDescribedBy,
-  "aria-valuenow": ariaValueNow,
-  "aria-valuemin": ariaValueMin,
-  "aria-valuemax": ariaValueMax,
-  "aria-valuetext": ariaValueText,
   size = "medium",
   length = "256px",
   error = false,
   progress = 0,
   description,
-  showDefaultLabels = false,
   currentProgressLabel,
   customValuePreposition,
   maxProgressLabel,
@@ -27,40 +17,22 @@ const ProgressTracker = ({
   labelWidth,
   ...rest
 }) => {
-  if ((ariaLabel || ariaDescribedBy || ariaValueNow || ariaValueMax || ariaValueMin || ariaValueText) && !deprecatedAriaTagsWarnTriggered) {
-    deprecatedAriaTagsWarnTriggered = true;
-    Logger.deprecate("The 'aria-' attribute props in `ProgressTracker` have been deprecated and will soon be removed.");
-  }
   const l = useLocale();
-  const barRef = useRef(null);
-  const [barLength, setBarLength] = useState("0px");
   const prefixLabels = labelsPosition !== "bottom";
-  const updateBarLength = useCallback(() => {
-    setBarLength(`${barRef.current?.offsetWidth}px`);
-  }, []);
-  useLayoutEffect(() => {
-    updateBarLength();
-  }, [updateBarLength]);
-  useResizeObserver(barRef, () => {
-    updateBarLength();
-  });
   const renderValueLabels = () => {
-    if (!showDefaultLabels && !currentProgressLabel) {
-      return null;
+    let displayedCurrentProgressLabel, displayedMaxProgressLabel;
+    if (currentProgressLabel) {
+      displayedCurrentProgressLabel = currentProgressLabel;
+      displayedMaxProgressLabel = maxProgressLabel || undefined;
+    } else {
+      displayedCurrentProgressLabel = `${progress}%`;
+      displayedMaxProgressLabel = "100%";
     }
-    const label = (value, defaultValue) => {
-      if (value) {
-        return value;
-      }
-      return showDefaultLabels ? defaultValue : undefined;
-    };
-    const displayedCurrentProgressLabel = label(currentProgressLabel, `${progress}%`);
-    const displayedMaxProgressLabel = label(maxProgressLabel, "100%");
     return /*#__PURE__*/React.createElement(StyledValuesLabel, {
       labelsPosition: labelsPosition,
       size: size,
       labelWidth: labelWidth
-    }, displayedCurrentProgressLabel && /*#__PURE__*/React.createElement(StyledValue, {
+    }, /*#__PURE__*/React.createElement(StyledValue, {
       "data-element": "current-progress-label"
     }, displayedCurrentProgressLabel), displayedMaxProgressLabel && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("span", {
       "data-element": "custom-preposition"
@@ -70,29 +42,18 @@ const ProgressTracker = ({
       "data-element": "progress-tracker-description"
     }, description));
   };
-  const valueMin = ariaValueMin === undefined ? 0 : ariaValueMin;
-  const valueMax = ariaValueMax === undefined ? 100 : ariaValueMax;
-  const defaultValueNow = valueMin + (valueMax - valueMin) * progress / 100;
   return /*#__PURE__*/React.createElement(StyledProgressTracker, _extends({
     length: length
   }, rest, tagComponent("progress-bar", rest), {
-    role: "progressbar",
-    "aria-label": ariaLabel || "progress tracker",
-    "aria-describedby": ariaDescribedBy,
-    "aria-valuenow": ariaValueNow === undefined ? defaultValueNow : ariaValueNow,
-    "aria-valuemin": ariaValueMin,
-    "aria-valuemax": ariaValueMax,
-    "aria-valuetext": ariaValueText,
     labelsPosition: labelsPosition
   }), prefixLabels && renderValueLabels(), /*#__PURE__*/React.createElement(StyledProgressBar, {
-    size: size,
-    ref: barRef,
     progress: progress,
-    error: error
+    error: error,
+    "aria-hidden": "true"
   }, /*#__PURE__*/React.createElement(InnerBar, {
     "data-element": "inner-bar",
+    "data-role": "inner-bar",
     size: size,
-    length: barLength,
     progress: progress,
     error: error
   })), !prefixLabels && renderValueLabels());

package/esm/components/progress-tracker/progress-tracker.style.d.ts

@@ -1,8 +1,8 @@
 import { ProgressTrackerProps } from "./progress-tracker.component";
 declare const StyledProgressTracker: import("styled-components").StyledComponent<"div", any, Pick<ProgressTrackerProps, "length" | "margin" | "labelsPosition">, never>;
-declare const StyledProgressBar: import("styled-components").StyledComponent<"span", any, Pick<ProgressTrackerProps, "error" | "progress" | "size">, never>;
+declare const StyledProgressBar: import("styled-components").StyledComponent<"span", any, Pick<ProgressTrackerProps, "error" | "progress">, never>;
 declare const StyledValue: import("styled-components").StyledComponent<"span", any, {}, never>;
 declare const StyledDescription: import("styled-components").StyledComponent<"span", any, {}, never>;
 declare const StyledValuesLabel: import("styled-components").StyledComponent<"span", any, Pick<ProgressTrackerProps, "labelWidth" | "size" | "labelsPosition">, never>;
-declare const InnerBar: import("styled-components").StyledComponent<"span", any, Pick<ProgressTrackerProps, "error" | "progress" | "length" | "size">, never>;
+declare const InnerBar: import("styled-components").StyledComponent<"span", any, Required<Pick<ProgressTrackerProps, "error" | "progress" | "size">>, never>;
 export { StyledProgressBar, InnerBar, StyledProgressTracker, StyledValuesLabel, StyledValue, StyledDescription, };

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

@@ -46,7 +46,6 @@ const StyledProgressTracker = styled.div`
 `;
 const StyledProgressBar = styled.span`
   ${({
-  size,
   progress,
   error,
   theme
@@ -108,8 +107,7 @@ const StyledValuesLabel = styled.span`
 const InnerBar = styled.span`
   ${({
   progress,
-  size = "medium",
-  length,
+  size,
   error,
   theme
 }) => css`
@@ -120,7 +118,7 @@ const InnerBar = styled.span`
   error
 })};
     border-radius: ${theme.roundedCornersOptOut ? "25px" : "var(--borderRadius400)"};
-    width: calc(${length} * ${progress && progress / 100});
+    width: ${progress}%;
     min-width: 2px;
     height: ${getHeight(size)};
   `}

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

@@ -9,15 +9,18 @@ const SwitchSliderPanel = styled.div`
     border: 0;
     color: var(--colorsActionMinorYang100);
     margin: auto;
-    margin-top: ${size === "large" ? "12px" : "5px"};
+    position: absolute;
+    left: 0;
 
     &[type="on"] {
       margin-left: 9px;
+      padding-right: ${size === "large" ? "43px" : "27px"};
     }
 
     &[type="off"] {
       color: var(--colorsActionMinor500);
-      margin-right: 6px;
+      margin-right: 9px;
+      padding-left: ${size === "large" ? "43px" : "27px"};
     }
 
     ${isLoading && css`

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

@@ -1,7 +1,8 @@
+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 Loader from "../../loader/loader.component";
-import StyledSwitchSlider from "./switch-slider.style";
+import { StyledSwitchSlider, HiddenContent } from "./switch-slider.style";
 import SwitchSliderPanel from "./switch-slider-panel.style";
 import ValidationIcon from "../../../__internal__/validations/validation-icon.component";
 import useLocale from "../../../hooks/__internal__/useLocale";
@@ -15,8 +16,14 @@ const SwitchSlider = ({
   info,
   useValidationIcon
 }) => {
-  const l = useLocale();
-  const panelContent = checked ? l.switch.on() : l.switch.off();
+  const locale = useLocale();
+  const onText = locale.switch.on();
+  const offText = locale.switch.off();
+
+  // Need to convert to uppercase to ensure hidden element
+  // has same computed width as the visual text that's rendered
+  const longestText = onText.length > offText.length ? onText.toUpperCase() : offText.toUpperCase();
+  const panelContent = checked ? onText : offText;
   const switchSliderStyleProps = {
     isLoading: loading,
     checked,
@@ -38,12 +45,17 @@ const SwitchSlider = ({
     size
   };
   const sliderContent = /*#__PURE__*/React.createElement(SwitchSliderPanel, sliderPanelStyleProps, loading ? /*#__PURE__*/React.createElement(Loader, loaderProps) : panelContent);
-  return /*#__PURE__*/React.createElement(StyledSwitchSlider, switchSliderStyleProps, sliderContent, useValidationIcon && /*#__PURE__*/React.createElement(ValidationIcon, {
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(HiddenContent, {
+    size: size,
+    "aria-hidden": true
+  }, longestText), /*#__PURE__*/React.createElement(StyledSwitchSlider, _extends({
+    "data-component": "slider"
+  }, switchSliderStyleProps), sliderContent, useValidationIcon && /*#__PURE__*/React.createElement(ValidationIcon, {
     error: error,
     warning: warning,
     info: info,
     size: size,
     tooltipFlipOverrides: ["top", "bottom"]
-  }));
+  })));
 };
 export default SwitchSlider;

package/esm/components/switch/__internal__/switch-slider.style.d.ts

@@ -1,2 +1,10 @@
-declare const StyledSwitchSlider: import("styled-components").StyledComponent<"span", any, {}, never>;
+import { SwitchSliderProps } from "./switch-slider.component";
+import { ThemeObject } from "../../../style/themes/base";
+interface StyledSwitchSliderProps extends Pick<SwitchSliderProps, "checked" | "disabled" | "size" | "error" | "warning"> {
+    isLoading?: boolean;
+    theme?: Partial<ThemeObject>;
+}
+declare const StyledSwitchSlider: import("styled-components").StyledComponent<"div", any, {}, never>;
+declare const HiddenContent: import("styled-components").StyledComponent<"div", any, Pick<StyledSwitchSliderProps, "size">, never>;
+export { StyledSwitchSlider, HiddenContent };
 export default StyledSwitchSlider;

package/esm/components/switch/__internal__/switch-slider.style.js

@@ -2,7 +2,7 @@ import styled, { css } from "styled-components";
 import SwitchSliderPanel from "./switch-slider-panel.style";
 import StyledValidationIcon from "../../../__internal__/validations/validation-icon.style";
 import baseTheme from "../../../style/themes/base";
-const StyledSwitchSlider = styled.span`
+const StyledSwitchSlider = styled.div`
   ${({
   checked,
   isLoading,
@@ -18,90 +18,87 @@ const StyledSwitchSlider = styled.span`
     height: 28px;
     left: 0;
     letter-spacing: 1px;
-    position: absolute;
+    position: relative;
     text-transform: uppercase;
     top: 0;
-    width: 64px;
-    min-width: fit-content;
+    width: 100%
     z-index: 2;
     border-radius: ${theme?.roundedCornersOptOut ? "90px" : "var(--borderRadius400)"};
     border-style: solid;
     border-color: var(--colorsActionMinor400);
     border-width: var(--borderWidth200);
     box-sizing: border-box;
+    margin-top: ${size === "large" ? "-47px" : "-28px"};
+    align-items: center;
 
     &::before {
       background-color: var(--colorsActionMinor400);
       bottom: 4px;
       content: "";
-      height: 16px;
+      height: ${size === "large" ? "var(--spacing400)" : "var(--spacing200)"};
       position: absolute;
       left: 4px;
-      transition: transform 0.4s;
-      width: 16px;
+      transition: margin-left 0.4s;
+      width: ${size === "large" ? "var(--spacing400)" : "var(--spacing200)"};
       z-index: 1;
       border-radius: 50%;
     }
 
-    ${checked && `
-      background-color: var(--colorsActionMinor500);
-      border-color: var(--colorsActionMinorTransparent);
-
-      &::before {
-        transform: translateX(36px);
-        background-color: var(--colorsActionMinorYang100);
-      }
+    ${checked && css`
+        background-color: var(--colorsActionMinor500);
+        border-color: var(--colorsActionMinorTransparent);
 
-    `}
+        &::before {
+          margin-left: calc(
+            100% -
+              ${size === "large" ? "var(--spacing500)" : "var(--spacing300)"}
+          );
+          background-color: var(--colorsActionMinorYang100);
+        }
+      `}
 
     ${disabled && !isLoading && css`
-      border-color: var(--colorsActionDisabled600);
+        border-color: var(--colorsActionDisabled600);
 
-      &::before {
-        background-color: var(--colorsActionDisabled600);
-      }
+        &::before {
+          background-color: var(--colorsActionDisabled600);
+        }
 
-      ${SwitchSliderPanel} {
-        color: var(--colorsUtilityYin030);
-      }
+        ${SwitchSliderPanel} {
+          color: var(--colorsUtilityYin030);
+        }
 
-      ${checked && `
-        background-color: var(--colorsActionDisabled500);
-        border-color: var(--colorsActionMinorTransparent);
+        ${checked && css`
+          background-color: var(--colorsActionDisabled500);
+          border-color: var(--colorsActionMinorTransparent);
 
-        &::before {
-          background-color: var(--colorsActionMinorYang100);
-        }
+          &::before {
+            background-color: var(--colorsActionMinorYang100);
+          }
 
-        ${SwitchSliderPanel} { color: var(--colorsUtilityYin030); }
+          ${SwitchSliderPanel} {
+            color: var(--colorsUtilityYin030);
+          }
+        `}
       `}
-    `}
 
     ${size === "large" && css`
-      ${theme?.roundedCornersOptOut ? "border-radius: 30px;" : ""}
-      &::before {
-        height: 32px;
-        width: 32px;
-
-        ${checked && `
-          transform: translateX(38px);
-        `}
-      }
-    `}
+        ${theme?.roundedCornersOptOut ? "border-radius: 30px;" : ""}
+      `}
 
     ${isLoading && css`
-      &::before {
-        display: none;
-      }
-    `}
+        &::before {
+          display: none;
+        }
+      `}
 
     ${warning && !disabled && css`
-      border-color: var(--colorsSemanticCaution500);
-    `}
+        border-color: var(--colorsSemanticCaution500);
+      `}
 
     ${error && !disabled && css`
-      border-color: var(--colorsSemanticNegative500);
-    `}
+        border-color: var(--colorsSemanticNegative500);
+      `}
 
     ${StyledValidationIcon} {
       position: absolute;
@@ -110,7 +107,17 @@ const StyledSwitchSlider = styled.span`
     }
   `}
 `;
+const HiddenContent = styled.div`
+  ${({
+  size
+}) => css`
+    visibility: hidden;
+    height: 0px;
+    padding-left: ${size === "large" ? "var(--spacing700)" : "var(--spacing500)"};
+  `}
+`;
 StyledSwitchSlider.defaultProps = {
   theme: baseTheme
 };
+export { StyledSwitchSlider, HiddenContent };
 export default StyledSwitchSlider;

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

@@ -43,21 +43,32 @@ const StyledSwitch = styled.div`
     ${margin}
     ${FieldLineStyle} {
       display: flex;
-      flex-flow: row wrap;
+      flex-flow: ${labelInline ? "row wrap" : "column wrap"};
+
+      ${!labelInline && fieldHelpInline && css`
+        display: grid;
+        grid-template-columns: max-content max-content;
+      `}
     }
 
     ${StyledCheckableInput}, ${HiddenCheckableInputStyle} {
       border: none;
       box-sizing: border-box;
       height: 24px;
-      width: 60px;
-      min-width: fit-content;
       flex-basis: 100%;
       margin-left: 0;
     }
 
+    ${HiddenCheckableInputStyle} {
+      width: 100%;
+    }
+
+    ${StyledCheckableInput} {
+      width: min-content;
+    }
+
     ${HiddenCheckableInputStyle}:not([disabled]) {
-      &:focus + ${StyledSwitchSlider} {
+      &:focus ~ ${StyledSwitchSlider} {
         ${!theme.focusRedesignOptOut ? addFocusStyling() : /* istanbul ignore next */oldFocusStyling}
       }
     }
@@ -150,7 +161,6 @@ const StyledSwitch = styled.div`
     ${size === "large" && css`
       ${StyledCheckableInput}, ${HiddenCheckableInputStyle}, ${StyledSwitchSlider} {
         height: 44px;
-        width: 82px;
         min-width: fit-content;
       }
 

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

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import TypeIcon from "../message/type-icon/type-icon.style";
+import TypeIcon from "../message/__internal__/type-icon/type-icon.style";
 import { MessageVariant } from "../message/message.component";
 declare const StyledPortal: import("styled-components").StyledComponent<({ children, className, id, onReposition, inertOptOut, }: import("../portal/portal").PortalProps) => import("react").JSX.Element, any, {
     align?: "left" | "right" | "center" | undefined;

package/esm/components/toast/toast.style.js

@@ -1,5 +1,5 @@
 import styled, { css } from "styled-components";
-import TypeIcon from "../message/type-icon/type-icon.style";
+import TypeIcon from "../message/__internal__/type-icon/type-icon.style";
 import StyledIconButton from "../icon-button/icon-button.style";
 import Portal from "../portal/portal";
 import baseTheme from "../../style/themes/base";