carbon-react 144.4.0 → 144.5.0

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

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

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

@@ -5,9 +5,9 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = exports.StyledSwitchSlider = exports.HiddenContent = void 0;
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
-var _switchSliderPanel = _interopRequireDefault(require("./switch-slider-panel.style"));
 var _validationIcon = _interopRequireDefault(require("../../../__internal__/validations/validation-icon.style"));
 var _base = _interopRequireDefault(require("../../../style/themes/base"));
+var _switchSliderPanel = _interopRequireDefault(require("./switch-slider-panel.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; }
@@ -19,7 +19,8 @@ const StyledSwitchSlider = exports.StyledSwitchSlider = _styledComponents.defaul
   size,
   error,
   warning,
-  theme
+  theme,
+  isDarkBackground
 }) => (0, _styledComponents.css)`
     display: flex;
     font-size: 12px;
@@ -34,14 +35,14 @@ const StyledSwitchSlider = exports.StyledSwitchSlider = _styledComponents.defaul
     z-index: 2;
     border-radius: ${theme?.roundedCornersOptOut ? "90px" : "var(--borderRadius400)"};
     border-style: solid;
-    border-color: var(--colorsActionMinor400);
+    border-color: ${isDarkBackground ? "var(--colorsUtilityYang100)" : "var(--colorsActionMinor400)"};
     border-width: var(--borderWidth200);
     box-sizing: border-box;
     margin-top: ${size === "large" ? "-47px" : "-28px"};
     align-items: center;
 
     &::before {
-      background-color: var(--colorsActionMinor400);
+      background-color: ${isDarkBackground ? "var(--colorsUtilityYang100)" : "var(--colorsActionMinor400)"};
       bottom: 4px;
       content: "";
       height: ${size === "large" ? "var(--spacing400)" : "var(--spacing200)"};
@@ -54,7 +55,7 @@ const StyledSwitchSlider = exports.StyledSwitchSlider = _styledComponents.defaul
     }
 
     ${checked && (0, _styledComponents.css)`
-        background-color: var(--colorsActionMinor500);
+        background-color: ${isDarkBackground ? "var(--colorsUtilityYang100)" : "var(--colorsActionMinor500)"};
         border-color: var(--colorsActionMinorTransparent);
 
         &::before {
@@ -62,7 +63,7 @@ const StyledSwitchSlider = exports.StyledSwitchSlider = _styledComponents.defaul
             100% -
               ${size === "large" ? "var(--spacing500)" : "var(--spacing300)"}
           );
-          background-color: var(--colorsActionMinorYang100);
+          background-color: ${isDarkBackground ? "var(--colorsUtilityYin100)" : "var(--colorsActionMinorYang100)"};
         }
       `}
 

package/lib/components/switch/switch.component.d.ts

@@ -24,6 +24,8 @@ export interface SwitchProps extends CommonCheckableInputProps, MarginProps {
     tooltipPosition?: "top" | "bottom" | "left" | "right";
     /** [Legacy] Aria label for rendered help component */
     helpAriaLabel?: string;
+    /** Whether this component resides on a dark background */
+    isDarkBackground?: boolean;
 }
 export declare const Switch: React.ForwardRefExoticComponent<SwitchProps & React.RefAttributes<HTMLInputElement>>;
 export default Switch;

package/lib/components/switch/switch.component.js

@@ -6,17 +6,17 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = exports.Switch = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
-var _switch = _interopRequireWildcard(require("./switch.style"));
+var _box = _interopRequireDefault(require("../box"));
 var _checkableInput = _interopRequireDefault(require("../../__internal__/checkable-input"));
-var _switchSlider = _interopRequireDefault(require("./__internal__/switch-slider.component"));
-var _useIsAboveBreakpoint = _interopRequireDefault(require("../../hooks/__internal__/useIsAboveBreakpoint"));
+var _label = _interopRequireDefault(require("../../__internal__/label"));
 var _tooltipProvider = require("../../__internal__/tooltip-provider");
-var _logger = _interopRequireDefault(require("../../__internal__/utils/logger"));
-var _useFormSpacing = _interopRequireDefault(require("../../hooks/__internal__/useFormSpacing"));
 var _newValidation = _interopRequireDefault(require("../carbon-provider/__internal__/new-validation.context"));
+var _logger = _interopRequireDefault(require("../../__internal__/utils/logger"));
 var _validationMessage = _interopRequireDefault(require("../../__internal__/validation-message/validation-message.component"));
-var _box = _interopRequireDefault(require("../box"));
-var _label = _interopRequireDefault(require("../../__internal__/label"));
+var _useFormSpacing = _interopRequireDefault(require("../../hooks/__internal__/useFormSpacing"));
+var _useIsAboveBreakpoint = _interopRequireDefault(require("../../hooks/__internal__/useIsAboveBreakpoint"));
+var _switch = _interopRequireWildcard(require("./switch.style"));
+var _switchSlider = _interopRequireDefault(require("./__internal__/switch-slider.component"));
 var _guid = _interopRequireDefault(require("../../__internal__/utils/helpers/guid"));
 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); }
@@ -54,6 +54,7 @@ const Switch = exports.Switch = /*#__PURE__*/_react.default.forwardRef(({
   "data-element": dataElement,
   "data-role": dataRole,
   helpAriaLabel,
+  isDarkBackground = false,
   ...rest
 }, ref) => {
   const isControlled = checked !== undefined;
@@ -86,6 +87,7 @@ const Switch = exports.Switch = /*#__PURE__*/_react.default.forwardRef(({
     "data-role": dataRole,
     "data-element": dataElement,
     checked: isControlled ? checked : checkedInternal,
+    isDarkBackground,
     fieldHelpInline,
     labelInline: shouldLabelBeInline,
     labelSpacing,
@@ -98,6 +100,7 @@ const Switch = exports.Switch = /*#__PURE__*/_react.default.forwardRef(({
     checked: isControlled ? checked : checkedInternal,
     disabled: disabled || loading,
     loading,
+    isDarkBackground,
     size,
     error,
     warning,
@@ -118,6 +121,7 @@ const Switch = exports.Switch = /*#__PURE__*/_react.default.forwardRef(({
     labelInline: shouldLabelBeInline,
     labelSpacing,
     onBlur,
+    isDarkBackground,
     onFocus,
     onChange: isControlled ? onChange : onChangeInternal,
     id,
@@ -141,6 +145,8 @@ const Switch = exports.Switch = /*#__PURE__*/_react.default.forwardRef(({
     "data-role": dataRole,
     "data-element": dataElement,
     checked: isControlled ? checked : checkedInternal,
+    labelInline: shouldLabelBeInline,
+    isDarkBackground,
     size,
     ...marginProps
   };
@@ -148,6 +154,7 @@ const Switch = exports.Switch = /*#__PURE__*/_react.default.forwardRef(({
     checked: isControlled ? checked : checkedInternal,
     disabled: disabled || loading,
     loading,
+    isDarkBackground,
     size,
     error,
     warning
@@ -156,10 +163,12 @@ const Switch = exports.Switch = /*#__PURE__*/_react.default.forwardRef(({
     autoFocus,
     // set aria-invalid but prevent validationIconId from being added to aria-describedby
     error: !!error,
+    warning,
     disabled: disabled || loading,
     loading,
     checked: isControlled ? checked : checkedInternal,
     onBlur,
+    isDarkBackground,
     onFocus,
     onChange: isControlled ? onChange : onChangeInternal,
     id,
@@ -174,30 +183,66 @@ const Switch = exports.Switch = /*#__PURE__*/_react.default.forwardRef(({
   };
   const applyValidation = error || warning;
   const ariaDescribedBy = [labelHelp && inputHintId.current, applyValidation && validationMessageId.current].filter(Boolean).join(" ");
-  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, validationRedesignOptIn ? /*#__PURE__*/_react.default.createElement(_switch.default, switchStylePropsForNewValidation, /*#__PURE__*/_react.default.createElement(_label.default, {
+  if (!validationRedesignOptIn) {
+    return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_tooltipProvider.TooltipProvider, {
+      helpAriaLabel: helpAriaLabel,
+      tooltipPosition: tooltipPosition
+    }, /*#__PURE__*/_react.default.createElement(_switch.default, switchStyleProps, /*#__PURE__*/_react.default.createElement(_checkableInput.default, inputProps, /*#__PURE__*/_react.default.createElement(_switchSlider.default, switchSliderProps)))));
+  }
+  const defaultMargin = labelInline ? 1 : 0;
+  const defaultInputWrapperMargin = labelInline ? 3 : 0;
+  const errorMargin = error || warning ? defaultInputWrapperMargin : defaultMargin;
+  const direction = labelInline ? "row" : "column";
+  const reverseDirection = labelInline ? "row-reverse" : "column";
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_switch.default, switchStylePropsForNewValidation, /*#__PURE__*/_react.default.createElement(_box.default, {
+    "data-role": "field-reverse-wrapper",
+    display: "flex",
+    flexWrap: "wrap",
+    alignItems: error || warning ? "flex-start" : undefined,
+    flexDirection: !reverse ? reverseDirection : direction,
+    width: labelInline ? "100%" : "auto"
+  }, /*#__PURE__*/_react.default.createElement(_box.default, {
+    "data-role": "label-wrapper"
+    // width={labelInline ? rest.labelWidth : 30}
+    // minWidth={label && labelInline ? "32px" : 0}
+  }, /*#__PURE__*/_react.default.createElement(_label.default, {
+    isDarkBackground: isDarkBackground,
     labelId: labelId.current,
     disabled: disabled,
     isRequired: required,
     optional: isOptional
-  }, label), labelHelp && /*#__PURE__*/_react.default.createElement(_switch.StyledHintText, {
+  }, label), labelHelp && /*#__PURE__*/_react.default.createElement(_box.default, {
+    "data-role": "hint-text-wrapper",
+    mb: labelInline ? 0 : 1,
+    mr: reverse ? 0 : 1,
+    ml: reverse ? 0 : 1
+  }, /*#__PURE__*/_react.default.createElement(_switch.StyledHintText, {
     "data-role": "hint-text",
-    id: inputHintId.current
-  }, labelHelp), /*#__PURE__*/_react.default.createElement(_box.default, {
-    position: "relative"
+    id: inputHintId.current,
+    isDarkBackground: isDarkBackground
+  }, labelHelp))), /*#__PURE__*/_react.default.createElement(_box.default, {
+    ml: reverse ? errorMargin : defaultInputWrapperMargin,
+    mr: !reverse ? errorMargin : defaultInputWrapperMargin,
+    position: "relative",
+    id: "input-wrapper"
   }, /*#__PURE__*/_react.default.createElement(_validationMessage.default, {
     error: error,
     warning: warning,
-    validationId: validationMessageId.current
+    validationId: validationMessageId.current,
+    isDarkBackground: isDarkBackground
   }), applyValidation && /*#__PURE__*/_react.default.createElement(_switch.ErrorBorder, {
     "data-role": "error-border",
-    warning: !!(!error && warning)
+    warning: !!(!error && warning),
+    reverse: !reverse,
+    isDarkBackground: isDarkBackground
   }), /*#__PURE__*/_react.default.createElement(_checkableInput.default, _extends({
     ariaLabelledBy: `${label && labelId.current}`,
     ariaDescribedBy: ariaDescribedBy
-  }, inputPropsForNewValidation), /*#__PURE__*/_react.default.createElement(_switchSlider.default, switchSliderPropsForNewValidation)))) : /*#__PURE__*/_react.default.createElement(_tooltipProvider.TooltipProvider, {
-    helpAriaLabel: helpAriaLabel,
-    tooltipPosition: tooltipPosition
-  }, /*#__PURE__*/_react.default.createElement(_switch.default, switchStyleProps, /*#__PURE__*/_react.default.createElement(_checkableInput.default, inputProps, /*#__PURE__*/_react.default.createElement(_switchSlider.default, switchSliderProps)))));
+  }, inputPropsForNewValidation, {
+    fieldHelp: labelInline ? undefined : rest.fieldHelp
+  }), /*#__PURE__*/_react.default.createElement(_switchSlider.default, switchSliderPropsForNewValidation))))), labelInline && rest.fieldHelp && /*#__PURE__*/_react.default.createElement(_box.default, {
+    color: isDarkBackground ? "var(--colorsUtilityYang100)" : "var(--colorsUtilityYin090)"
+  }, rest.fieldHelp));
 });
 if (process.env.NODE_ENV !== "production") {
   Switch.propTypes = {
@@ -350,6 +395,7 @@ if (process.env.NODE_ENV !== "production") {
     "inputMode": _propTypes.default.oneOf(["decimal", "email", "none", "numeric", "search", "tel", "text", "url"]),
     "inputWidth": _propTypes.default.number,
     "is": _propTypes.default.string,
+    "isDarkBackground": _propTypes.default.bool,
     "isOptional": _propTypes.default.bool,
     "itemID": _propTypes.default.string,
     "itemProp": _propTypes.default.string,

package/lib/components/switch/switch.style.d.ts

@@ -1,6 +1,11 @@
+interface StyledHintTextProps {
+    isDarkBackground?: boolean;
+}
 export declare const ErrorBorder: import("styled-components").StyledComponent<"span", any, {
+    reverse: boolean;
     warning: boolean;
+    isDarkBackground: boolean;
 }, never>;
-export declare const StyledHintText: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const StyledHintText: import("styled-components").StyledComponent<"div", any, StyledHintTextProps, never>;
 declare const StyledSwitch: import("styled-components").StyledComponent<"div", any, {}, never>;
 export default StyledSwitch;

package/lib/components/switch/switch.style.js

@@ -6,15 +6,15 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = exports.StyledHintText = exports.ErrorBorder = void 0;
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
 var _styledSystem = require("styled-system");
-var _base = _interopRequireDefault(require("../../style/themes/base"));
-var _fieldHelp = _interopRequireDefault(require("../../__internal__/field-help/field-help.style"));
+var _checkableInput = require("../../__internal__/checkable-input/checkable-input.style");
 var _hiddenCheckableInput = _interopRequireDefault(require("../../__internal__/checkable-input/hidden-checkable-input.style"));
+var _fieldHelp = _interopRequireDefault(require("../../__internal__/field-help/field-help.style"));
+var _formField = require("../../__internal__/form-field/form-field.style");
 var _label = require("../../__internal__/label/label.style");
-var _checkableInput = require("../../__internal__/checkable-input/checkable-input.style");
-var _switchSlider = _interopRequireDefault(require("./__internal__/switch-slider.style"));
 var _validationIcon = _interopRequireDefault(require("../../__internal__/validations/validation-icon.style"));
-var _formField = require("../../__internal__/form-field/form-field.style");
+var _base = _interopRequireDefault(require("../../style/themes/base"));
 var _addFocusStyling = _interopRequireDefault(require("../../style/utils/add-focus-styling"));
+var _switchSlider = _interopRequireDefault(require("./__internal__/switch-slider.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; }
@@ -23,23 +23,33 @@ const oldFocusStyling = `
 `;
 const ErrorBorder = exports.ErrorBorder = _styledComponents.default.span`
   ${({
-  warning
-}) => (0, _styledComponents.css)`
+  reverse,
+  warning,
+  isDarkBackground
+}) => {
+  const darkBgColour = isDarkBackground ? "var(--colorsSemanticNegative450)" : "var(--colorsSemanticNegative500)";
+  return (0, _styledComponents.css)`
       position: absolute;
       z-index: 6;
       width: 2px;
-      background-color: ${warning ? "var(--colorsSemanticCaution500)" : "var(--colorsSemanticNegative500)"};
-      left: -12px;
+      background-color: ${warning ? "var(--colorsSemanticCaution500)" : darkBgColour};
+      ${reverse ? "right" : "left"}: -12px;
       bottom: -4px;
       top: 2px;
-    `}
+    `;
+}}
 `;
 const StyledHintText = exports.StyledHintText = _styledComponents.default.div`
   margin-top: 8px;
   margin-bottom: 8px;
-  color: var(--colorsUtilityYin055);
   font-size: 14px;
   font-weight: 400;
+  max-width: 160px;
+  ${({
+  isDarkBackground
+}) => (0, _styledComponents.css)`
+    color: ${isDarkBackground ? "var(--colorsUtilityYang065)" : "var(--colorsUtilityYin055)"};
+  `}
 `;
 const StyledSwitch = _styledComponents.default.div`
   ${({
@@ -60,6 +70,9 @@ const StyledSwitch = _styledComponents.default.div`
       `}
     }
 
+    display: flex;
+    flex-flow: ${labelInline ? "row wrap" : "column wrap"};
+
     ${_checkableInput.StyledCheckableInput}, ${_hiddenCheckableInput.default} {
       border: none;
       box-sizing: border-box;

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

@@ -27,7 +27,8 @@ const ToolbarButton = exports.ToolbarButton = /*#__PURE__*/_react.default.forwar
     onKeyDown: onKeyDown,
     onMouseDown: onMouseDown,
     isActive: activated,
-    "aria-label": ariaLabel
+    "aria-label": ariaLabel,
+    "aria-pressed": activated
   }, !tabbable && {
     tabIndex: -1
   }, {

package/lib/components/textbox/textbox.style.js

@@ -12,14 +12,14 @@ const ErrorBorder = exports.ErrorBorder = _styledComponents.default.span`
   warning,
   inline
 }) => (0, _styledComponents.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 = exports.StyledHintText = _styledComponents.default.div`
   ::after {

package/lib/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/lib/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";

package/lib/components/time/time.style.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-export declare const StyledLabel: import("styled-components").StyledComponent<import("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, }: import("../../__internal__/label").LabelProps) => import("react").JSX.Element>, any, {}, never>;
+export declare const StyledLabel: import("styled-components").StyledComponent<import("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, }: import("../../__internal__/label").LabelProps) => import("react").JSX.Element>, any, {}, never>;
 export declare const StyledHintText: import("styled-components").StyledComponent<"div", any, {
     isDisabled?: boolean | undefined;
     hasError?: boolean | undefined;

package/lib/components/typography/typography.component.d.ts

@@ -2,7 +2,7 @@ import React from "react";
 import { SpaceProps } from "styled-system";
 import { TagProps } from "../../__internal__/utils/helpers/tags";
 export declare const VARIANT_TYPES: readonly ["h1-large", "h1", "h2", "h3", "h4", "h5", "segment-header", "segment-header-small", "segment-subheader", "segment-subheader-alt", "p", "span", "small", "big", "sup", "sub", "strong", "b", "em", "ul", "ol"];
-export declare type VariantTypes = typeof VARIANT_TYPES[number];
+export declare type VariantTypes = (typeof VARIANT_TYPES)[number];
 export interface TypographyProps extends SpaceProps, TagProps {
     /** Override the variant component */
     as?: React.ElementType;

package/lib/components/typography/typography.style.js

@@ -191,7 +191,7 @@ const StyledTypography = _styledComponents.default.span.attrs(({
     ${variant === "sup" && "vertical-align: super;"};
     ${variant === "sub" && "vertical-align: sub;"};
     ${display && `display: ${display};`};
-    ${listStyleType && `list-style-type: ${listStyleType};`}; ;
+    ${listStyleType && `list-style-type: ${listStyleType};`};
   `}
   ${_styledSystem.space}
     ${({

package/lib/components/vertical-divider/vertical-divider.component.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { SpaceProps } from "styled-system";
 declare type TintRange = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 | 66 | 67 | 68 | 69 | 70 | 71 | 72 | 73 | 74 | 75 | 76 | 77 | 78 | 79 | 80 | 81 | 82 | 83 | 84 | 85 | 86 | 87 | 88 | 89 | 90 | 91 | 92 | 93 | 94 | 95 | 96 | 97 | 98 | 99 | 100;
 export interface VerticalDividerProps extends SpaceProps {

package/lib/global.d.ts

@@ -7,7 +7,7 @@ declare global {
   interface Window {
     __CARBON_INTERNALS_MODAL_LIST?: ModalList;
     __CARBON_INTERNALS_MODAL_SETTER_LIST?: ((
-      topModal: HTMLElement | null
+      topModal: HTMLElement | null,
     ) => void)[];
     __CARBON_INTERNALS_SCROLL_BLOCKERS?: {
       components: {

package/lib/hooks/__internal__/useCharacterCount/useCharacterCount.d.ts

@@ -1,2 +1,3 @@
+/// <reference types="react" />
 declare const useCharacterCount: (value?: string, characterLimit?: number, characterCountAriaLive?: "off" | "polite") => [JSX.Element | null, string | undefined];
 export default useCharacterCount;

package/lib/style/utils/box-gap.d.ts

@@ -1,5 +1,5 @@
 export declare const GAP_VALUES: number[];
-export declare type AllowedNumericalValues = typeof GAP_VALUES[number];
+export declare type AllowedNumericalValues = (typeof GAP_VALUES)[number];
 export declare type Gap = AllowedNumericalValues | string;
 export declare const getGapValue: (gapValue: number | string) => string;
 export default function gap(gapValue: number | string): string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "carbon-react",
-  "version": "144.4.0",
+  "version": "144.5.0",
   "description": "A library of reusable React components for easily building user interfaces.",
   "files": [
     "lib",
@@ -97,7 +97,6 @@
     "@testing-library/user-event": "^14.5.1",
     "@types/crypto-js": "^4.2.1",
     "@types/draft-js": "^0.11.10",
-    "@types/enzyme": "3.10.13",
     "@types/glob": "^8.1.0",
     "@types/invariant": "^2.2.37",
     "@types/jest": "^29.5.0",
@@ -114,7 +113,6 @@
     "@types/uuid": "^8.3.4",
     "@typescript-eslint/eslint-plugin": "^5.59.5",
     "@typescript-eslint/parser": "^5.59.5",
-    "@wojtekmaj/enzyme-adapter-react-17": "^0.8.0",
     "axe-core": "^4.8.2",
     "babel-jest": "^29.7.0",
     "babel-plugin-dev-expression": "^0.2.3",
@@ -130,8 +128,6 @@
     "date-fns-tz": "^1.3.8",
     "dayjs": "^1.11.10",
     "draft-js": "^0.11.7",
-    "enzyme": "^3.11.0",
-    "enzyme-to-json": "^3.6.2",
     "eslint": "^8.55.0",
     "eslint-config-airbnb": "^19.0.0",
     "eslint-config-prettier": "^9.1.0",
@@ -162,7 +158,7 @@
     "mockdate": "^2.0.5",
     "nock": "^13.3.8",
     "node-fetch": "^3.3.2",
-    "prettier": "~2.2.0",
+    "prettier": "~3.3.3",
     "raf": "^3.4.1",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
@@ -209,10 +205,7 @@
   "overrides": {
     "playwright-core": "$@playwright/experimental-ct-react17",
     "@testing-library/dom": "$@testing-library/dom",
-    "jsdom": "$jsdom",
-    "enzyme": {
-      "cheerio": "1.0.0-rc.12"
-    }
+    "jsdom": "$jsdom"
   },
   "config": {
     "commitizen": {