carbon-react 146.6.1 → 147.0.0

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

@@ -20,7 +20,10 @@ export interface LabelProps extends ValidationProps, StyledLabelProps, StyledLab
     useValidationIcon?: boolean;
     /** Id of the validation icon */
     validationIconId?: string;
-    /** Sets className for component */
+    /**
+     * @private
+     * @internal
+     * Sets className for component. INTERNAL USE ONLY. */
     className?: string;
     /** Sets aria-label for label element */
     "aria-label"?: string;

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

@@ -2,8 +2,6 @@ import React from "react";
 import { SpaceProps } from "styled-system";
 import { StyledAccordionContainerProps } from "./accordion.style";
 export interface AccordionProps extends StyledAccordionContainerProps, SpaceProps {
-    /** Width of the buttonHeading when it's set, defaults to 150px */
-    buttonWidth?: number | string;
     /** Content of the Accordion component */
     children?: React.ReactNode;
     /** Set the default state of expansion of the Accordion if component is meant to be used as uncontrolled */

package/esm/components/accordion/accordion.component.js

@@ -4,11 +4,8 @@ import PropTypes from "prop-types";
 import useResizeObserver from "../../hooks/__internal__/useResizeObserver";
 import createGuid from "../../__internal__/utils/helpers/guid";
 import Events from "../../__internal__/utils/helpers/events";
-import Logger from "../../__internal__/utils/logger";
 import { StyledAccordionContainer, StyledAccordionHeadingsContainer, StyledAccordionTitleContainer, StyledAccordionTitle, StyledAccordionSubTitle, StyledAccordionIcon, StyledAccordionContentContainer, StyledAccordionContent } from "./accordion.style";
 import ValidationIcon from "../../__internal__/validations";
-let deprecatedSchemeWarnTriggered = false;
-let deprecatedButtonHeadingWarnTriggered = false;
 const Accordion = /*#__PURE__*/React.forwardRef(({
   borders = "default",
   defaultExpanded,
@@ -20,7 +17,6 @@ const Accordion = /*#__PURE__*/React.forwardRef(({
   index,
   iconType,
   iconAlign,
-  scheme = "white",
   size = "large",
   subTitle,
   title,
@@ -30,20 +26,10 @@ const Accordion = /*#__PURE__*/React.forwardRef(({
   error,
   warning,
   info,
-  buttonHeading,
-  buttonWidth = "150px",
   openTitle,
   variant = "standard",
   ...rest
 }, ref) => {
-  if (!deprecatedSchemeWarnTriggered && scheme === "transparent") {
-    deprecatedSchemeWarnTriggered = true;
-    Logger.deprecate("The `scheme` prop for `Accordion` component is deprecated and will soon be removed.");
-  }
-  if (!deprecatedButtonHeadingWarnTriggered && buttonHeading) {
-    deprecatedButtonHeadingWarnTriggered = true;
-    Logger.deprecate("The `buttonHeading` prop for `Accordion` component is deprecated and will soon be removed. Please use `subtle` variant instead.");
-  }
   const isControlled = expanded !== undefined;
   const [isExpandedInternal, setIsExpandedInternal] = useState(defaultExpanded || false);
   const [contentHeight, setContentHeight] = useState(isExpandedInternal ? "auto" : 0);
@@ -82,8 +68,6 @@ const Accordion = /*#__PURE__*/React.forwardRef(({
     "data-role": "accordion-container",
     width: width,
     borders: variant === "subtle" ? "none" : borders,
-    scheme: scheme,
-    buttonHeading: buttonHeading,
     variant: variant
   }, rest), /*#__PURE__*/React.createElement(StyledAccordionTitleContainer, _extends({
     "data-element": "accordion-title-container",
@@ -96,23 +80,17 @@ const Accordion = /*#__PURE__*/React.forwardRef(({
     iconAlign: iconAlign || (variant === "standard" ? "right" : "left"),
     ref: ref,
     size: size,
-    buttonHeading: buttonHeading,
     isExpanded: isExpanded,
     variant: variant,
-    buttonWidth: buttonWidth,
-    hasButtonProps: buttonHeading && !(typeof headerSpacing === "undefined"),
     role: "button"
-  }, buttonHeading && {
-    p: 0
   }, headerSpacing), /*#__PURE__*/React.createElement(StyledAccordionHeadingsContainer, {
     "data-element": "accordion-headings-container",
-    hasValidationIcon: showValidationIcon,
-    buttonHeading: buttonHeading
-  }, !buttonHeading && typeof title === "string" ? /*#__PURE__*/React.createElement(StyledAccordionTitle, {
+    hasValidationIcon: showValidationIcon
+  }, /*#__PURE__*/React.createElement(StyledAccordionTitle, {
     "data-element": "accordion-title",
     size: size,
     variant: variant
-  }, title) : getTitle(), !buttonHeading && variant !== "subtle" && /*#__PURE__*/React.createElement(React.Fragment, null, showValidationIcon && /*#__PURE__*/React.createElement(ValidationIcon, {
+  }, getTitle()), variant !== "subtle" && /*#__PURE__*/React.createElement(React.Fragment, null, showValidationIcon && /*#__PURE__*/React.createElement(ValidationIcon, {
     error: error,
     warning: warning,
     info: info,
@@ -142,8 +120,6 @@ const Accordion = /*#__PURE__*/React.forwardRef(({
 if (process.env.NODE_ENV !== "production") {
   Accordion.propTypes = {
     "borders": PropTypes.oneOf(["default", "full", "none"]),
-    "buttonHeading": PropTypes.bool,
-    "buttonWidth": PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
     "children": PropTypes.node,
     "defaultExpanded": PropTypes.bool,
     "disableContentPadding": PropTypes.bool,
@@ -775,7 +751,6 @@ if (process.env.NODE_ENV !== "production") {
       "toString": PropTypes.func.isRequired,
       "valueOf": PropTypes.func.isRequired
     }), PropTypes.string]),
-    "scheme": PropTypes.oneOf(["transparent", "white"]),
     "size": PropTypes.oneOf(["large", "small"]),
     "subTitle": PropTypes.string,
     "title": PropTypes.node,

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

@@ -3,10 +3,6 @@ declare const StyledAccordionGroup: import("styled-components").StyledComponent<
 export interface StyledAccordionContainerProps {
     /** Toggles left and right borders, set to none when variant is subtle */
     borders?: "default" | "full" | "none";
-    /** (Deprecated) Renders the accordion heading in the style of a tertiary button */
-    buttonHeading?: boolean;
-    /** (Deprecated) Sets background as white or transparent, set to transparent when variant is subtle */
-    scheme?: "white" | "transparent";
     /** Sets accordion width */
     width?: string;
     /** Sets accordion variant */
@@ -25,13 +21,10 @@ interface StyledAccordionIconProps {
 }
 declare const StyledAccordionIcon: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("../icon").IconProps & import("react").RefAttributes<HTMLSpanElement>>, any, StyledAccordionIconProps, never>;
 interface StyledAccordionHeadingsContainerProps {
-    buttonHeading?: boolean;
     hasValidationIcon?: boolean;
 }
 declare const StyledAccordionHeadingsContainer: import("styled-components").StyledComponent<"div", any, StyledAccordionHeadingsContainerProps, never>;
 interface StyledAccordionTitleContainerProps {
-    buttonHeading?: boolean;
-    buttonWidth?: number | string;
     hasButtonProps?: boolean;
     iconAlign?: "left" | "right";
     size?: "large" | "small";

package/esm/components/accordion/accordion.style.js

@@ -10,10 +10,11 @@ const StyledAccordionGroup = styled.div`
 const StyledAccordionContainer = styled.div`
   ${space}
   display: flex;
-  align-items: ${({
-  buttonHeading,
+  ${({
   variant
-}) => (!buttonHeading || variant !== "subtle") && "stretch"};
+}) => variant && css`
+      align-items: stretch;
+    `};
   justify-content: center;
   flex-direction: column;
   box-sizing: border-box;
@@ -22,9 +23,8 @@ const StyledAccordionContainer = styled.div`
 }) => width || "100%"};
   color: var(--colorsUtilityYin090);
   background-color: ${({
-  scheme,
   variant
-}) => scheme === "white" && variant !== "subtle" ? "var(--colorsUtilityYang100)" : "var(--colorsUtilityMajorTransparent)"};
+}) => variant !== "subtle" ? "var(--colorsUtilityYang100)" : "var(--colorsUtilityMajorTransparent)"};
   border: 1px solid var(--colorsUtilityMajor100);
   ${({
   borders
@@ -79,36 +79,32 @@ const StyledAccordionIcon = styled(Icon)`
 `;
 const StyledAccordionHeadingsContainer = styled.div`
   ${({
-  buttonHeading,
   hasValidationIcon
-}) => !buttonHeading && css`
-      display: grid;
-      ${hasValidationIcon && css`
-        grid-template-columns: min-content auto;
+}) => css`
+    display: grid;
+    ${hasValidationIcon && css`
+      grid-template-columns: min-content auto;
 
-        ${StyledAccordionSubTitle} {
-          grid-column: span 3;
-        }
-      `}
+      ${StyledAccordionSubTitle} {
+        grid-column: span 3;
+      }
+    `}
 
-      ${!hasValidationIcon && css`
-        grid-template-rows: auto auto;
-      `}
+    ${!hasValidationIcon && css`
+      grid-template-rows: auto auto;
+    `}
 
     ${ValidationIconStyle} {
-        height: 20px;
-        position: relative;
-        top: 2px;
-      }
-    `}
+      height: 20px;
+      position: relative;
+      top: 2px;
+    }
+  `}
 `;
 const StyledAccordionTitleContainer = styled.div`
   ${({
-  buttonHeading,
-  buttonWidth,
   iconAlign,
   size,
-  hasButtonProps,
   isExpanded,
   variant
 }) => css`
@@ -149,46 +145,11 @@ const StyledAccordionTitleContainer = styled.div`
       }
     `}
 
-    ${!buttonHeading && variant !== "subtle" && css`
+    ${variant !== "subtle" && css`
       &:hover {
         background-color: var(--colorsUtilityMajor050);
       }
     `}
-
-    ${buttonHeading && css`
-      box-sizing: border-box;
-      font-weight: 500;
-      text-decoration: none;
-      font-size: var(--fontSizes100);
-      min-height: var(--spacing500);
-
-      color: var(--colorsActionMajor500);
-
-      ${!hasButtonProps && css`
-        ${StyledAccordionHeadingsContainer} {
-          margin-left: ${iconAlign === "right" ? "var(--spacing300)" : "var(--spacing100)"};
-        }
-      `}
-
-      ${StyledAccordionIcon} {
-        color: var(--colorsActionMajor500);
-        ${!hasButtonProps && css`
-          position: relative;
-          ${iconAlign}: 16px;
-        `}
-      }
-
-      &:hover {
-        color: var(--colorsActionMajor600);
-        ${StyledAccordionIcon} {
-          color: var(--colorsActionMajor600);
-        }
-      }
-
-      ${buttonWidth && css`
-        width: ${typeof buttonWidth === "number" ? `${buttonWidth}px` : buttonWidth};
-      `}
-    `}
   `}
 `;
 const StyledAccordionContentContainer = styled.div`

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

@@ -23,8 +23,6 @@ export interface BoxProps extends FlexboxProps, Omit<GridProps, "gridGap" | "gri
     scrollVariant?: ScrollVariant;
     /** Set the box-sizing attribute of the Box component */
     boxSizing?: BoxSizing;
-    /** (Deprecated) Allows a tabindex to be specified */
-    tabIndex?: number;
     /** Gap, an integer multiplier of the base spacing constant (8px) or any valid CSS string." */
     gap?: Gap;
     /** Column gap, an integer multiplier of the base spacing constant (8px) or any valid CSS string." */
@@ -35,7 +33,11 @@ export interface BoxProps extends FlexboxProps, Omit<GridProps, "gridGap" | "gri
     boxShadow?: BoxShadowsType;
     /** Design Token for Border Radius. Note: please check that the border radius design token you are using is compatible with the Box component. **This prop will not do anything if you have the roundedCornerOptOut flag set in the CarbonProvider** */
     borderRadius?: BorderRadiusType;
-    /** @private @ignore */
+    /**
+     * @private
+     * @ignore
+     * @internal
+     * Sets className for component. INTERNAL USE ONLY. */
     className?: string;
     /** Set the color attribute of the Box component */
     color?: string;

package/esm/components/box/box.component.js

@@ -4,8 +4,6 @@ import PropTypes from "prop-types";
 import { filterStyledSystemMarginProps, filterStyledSystemPaddingProps, filterStyledSystemLayoutProps, filterStyledSystemFlexboxProps, filterStyledSystemGridProps } from "../../style/utils";
 import StyledBox from "./box.style";
 import tagComponent from "../../__internal__/utils/helpers/tags";
-import Logger from "../../__internal__/utils/logger";
-let deprecatedTabIndex = false;
 const Box = /*#__PURE__*/React.forwardRef(({
   "data-component": dataComponent,
   as,
@@ -14,7 +12,6 @@ const Box = /*#__PURE__*/React.forwardRef(({
   overflowWrap,
   scrollVariant,
   boxSizing,
-  tabIndex,
   gap,
   columnGap,
   rowGap,
@@ -31,10 +28,6 @@ const Box = /*#__PURE__*/React.forwardRef(({
   "aria-hidden": ariaHidden,
   ...rest
 }, ref) => {
-  if (!deprecatedTabIndex && tabIndex !== undefined) {
-    deprecatedTabIndex = true;
-    Logger.deprecate("The `tabIndex` prop for `Box` component has been deprecated and will soon be removed.");
-  }
   let actualWidth = "";
   if (typeof width === "number") {
     actualWidth = width <= 1 ? `${(width * 100).toFixed(0)}%` : `${width}px`;
@@ -63,7 +56,6 @@ const Box = /*#__PURE__*/React.forwardRef(({
     gap: gap,
     columnGap: columnGap,
     rowGap: rowGap,
-    tabIndex: tabIndex,
     className: className,
     ref: ref,
     bg: bg,
@@ -3555,7 +3547,6 @@ if (process.env.NODE_ENV !== "production") {
       "trimStart": PropTypes.func.isRequired,
       "valueOf": PropTypes.func.isRequired
     }), PropTypes.string]),
-    "tabIndex": PropTypes.number,
     "top": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
       "__@iterator": PropTypes.func.isRequired,
       "anchor": PropTypes.func.isRequired,

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

@@ -65,7 +65,8 @@ export interface ButtonProps extends SpaceProps, TagProps {
     /**
      * @private
      * @internal
-     * Set a class name on the button element
+     * @ignore
+     * Set a class name on the button element. INTERNAL USE ONLY.
      */
     className?: string;
 }

package/esm/components/button/button.component.js

@@ -9,8 +9,6 @@ import { TooltipProvider } from "../../__internal__/tooltip-provider";
 import ButtonBarContext from "../button-bar/__internal__/button-bar.context";
 import SplitButtonContext from "../split-button/__internal__/split-button.context";
 import BatchSelectionContext from "../batch-selection/__internal__/batch-selection.context";
-import Logger from "../../__internal__/utils/logger";
-let deprecatedClassNameWarningShown = false;
 function renderChildren({
   /* eslint-disable react/prop-types */
   iconType,
@@ -84,10 +82,6 @@ const Button = /*#__PURE__*/React.forwardRef(({
   target,
   ...rest
 }, ref) => {
-  if (!deprecatedClassNameWarningShown && rest.className) {
-    Logger.deprecate("The 'className' prop has been deprecated and will soon be removed from the 'Button' component.");
-    deprecatedClassNameWarningShown = true;
-  }
   const {
     buttonType: buttonTypeContext,
     size: sizeContext,

package/esm/components/button-toggle/button-toggle-group/button-toggle-group.component.d.ts

@@ -38,14 +38,9 @@ export interface ButtonToggleGroupProps extends MarginProps, TagProps {
     allowDeselect?: boolean;
     /** Disable all user interaction. */
     disabled?: boolean;
-    /**
-     * @private @ignore
-     * Set a class on the component
-     */
-    className?: string;
 }
 declare const ButtonToggleGroup: {
-    ({ children, fieldHelp, fieldHelpInline, "aria-label": ariaLabel, label, labelHelp, labelSpacing, inputHint, inputWidth, fullWidth, labelInline, labelWidth, onChange, value, "data-component": dataComponent, "data-element": dataElement, "data-role": dataRole, helpAriaLabel, id, allowDeselect, disabled, className, ...props }: ButtonToggleGroupProps): React.JSX.Element;
+    ({ children, fieldHelp, fieldHelpInline, "aria-label": ariaLabel, label, labelHelp, labelSpacing, inputHint, inputWidth, fullWidth, labelInline, labelWidth, onChange, value, "data-component": dataComponent, "data-element": dataElement, "data-role": dataRole, helpAriaLabel, id, allowDeselect, disabled, ...props }: ButtonToggleGroupProps): React.JSX.Element;
     displayName: string;
 };
 export default ButtonToggleGroup;

package/esm/components/button-toggle/button-toggle-group/button-toggle-group.component.js

@@ -12,9 +12,7 @@ import { InputGroupBehaviour } from "../../../__internal__/input-behaviour";
 import Events from "../../../__internal__/utils/helpers/events";
 import NewValidationContext from "../../carbon-provider/__internal__/new-validation.context";
 import ButtonToggleGroupContext from "./__internal__/button-toggle-group.context";
-import Logger from "../../../__internal__/utils/logger";
 const BUTTON_TOGGLE_SELECTOR = '[data-element="button-toggle-button"]';
-let deprecatedClassNameWarningShown = false;
 const ButtonToggleGroup = ({
   children,
   fieldHelp,
@@ -37,13 +35,8 @@ const ButtonToggleGroup = ({
   id,
   allowDeselect,
   disabled,
-  className,
   ...props
 }) => {
-  if (!deprecatedClassNameWarningShown && className) {
-    Logger.deprecate("The 'className' prop has been deprecated and will soon be removed from the 'ButtonToggleGroup' component.");
-    deprecatedClassNameWarningShown = true;
-  }
   const hasCorrectItemStructure = useMemo(() => {
     const incorrectChild = React.Children.toArray(children).find(child => {
       return ! /*#__PURE__*/React.isValidElement(child) || child.type.displayName !== ButtonToggle.displayName;
@@ -156,7 +149,6 @@ const ButtonToggleGroup = ({
     "data-role": dataRole,
     "data-element": dataElement,
     id: id,
-    className: className,
     disabled: disabled
   }), children)))));
 };

package/esm/components/button-toggle/button-toggle.component.d.ts

@@ -13,8 +13,6 @@ export interface ButtonToggleProps extends Partial<StyledButtonToggleProps> {
     "data-element"?: string;
     /** Identifier used for testing purposes, applied to the root element of the component. */
     "data-role"?: string;
-    /** DEPRECATED: Remove spacing from between buttons. */
-    grouped?: boolean;
     /** Callback triggered by blur event on the button. */
     onBlur?: (ev: React.FocusEvent<HTMLButtonElement>) => void;
     /** Callback triggered by focus event on the button. */
@@ -27,7 +25,7 @@ export interface ButtonToggleProps extends Partial<StyledButtonToggleProps> {
     value?: string;
 }
 export declare const ButtonToggle: {
-    ({ "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, buttonIcon, buttonIconSize, children, "data-component": dataComponent, "data-element": dataElement, "data-role": dataRole, disabled, grouped, onBlur, onFocus, onClick, pressed, size, value, }: ButtonToggleProps): React.JSX.Element;
+    ({ "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, buttonIcon, buttonIconSize, children, "data-component": dataComponent, "data-element": dataElement, "data-role": dataRole, disabled, onBlur, onFocus, onClick, pressed, size, value, }: ButtonToggleProps): React.JSX.Element;
     displayName: string;
 };
 export default ButtonToggle;

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

@@ -9,7 +9,6 @@ import ButtonToggleIcon from "./button-toggle-icon.component";
 import Logger from "../../__internal__/utils/logger";
 import { InputGroupContext } from "../../__internal__/input-behaviour";
 let deprecateUncontrolledWarnTriggered = false;
-let deprecateGroupedWarnTriggered = false;
 export const ButtonToggle = ({
   "aria-label": ariaLabel,
   "aria-labelledby": ariaLabelledBy,
@@ -20,7 +19,6 @@ export const ButtonToggle = ({
   "data-element": dataElement,
   "data-role": dataRole,
   disabled,
-  grouped,
   onBlur,
   onFocus,
   onClick,
@@ -29,10 +27,6 @@ export const ButtonToggle = ({
   value
 }) => {
   !!!(children || buttonIcon) ? process.env.NODE_ENV !== "production" ? invariant(false, "Either prop `buttonIcon` must be defined, or this node must have children") : invariant(false) : void 0;
-  if (grouped && !deprecateGroupedWarnTriggered) {
-    deprecateGroupedWarnTriggered = true;
-    Logger.deprecate("The `grouped` prop in `ButtonToggle` component is deprecated and will soon be removed. Spacing between buttons is no longer no removed.");
-  }
   const buttonRef = useRef(null);
   const {
     onMouseEnter,
@@ -103,8 +97,7 @@ export const ButtonToggle = ({
   return /*#__PURE__*/React.createElement(StyledButtonToggleWrapper, {
     "data-component": dataComponent || "button-toggle",
     "data-element": dataElement,
-    "data-role": dataRole,
-    grouped: grouped
+    "data-role": dataRole
   }, /*#__PURE__*/React.createElement(StyledButtonToggle, _extends({
     "aria-label": ariaLabel,
     "aria-labelledby": ariaLabelledBy,
@@ -118,7 +111,6 @@ export const ButtonToggle = ({
     onMouseEnter: onMouseEnter,
     onMouseLeave: onMouseLeave,
     size: size,
-    grouped: grouped,
     value: value,
     onFocus: handleFocus,
     onBlur: handleBlur,

package/esm/components/button-toggle/button-toggle.style.d.ts

@@ -25,7 +25,6 @@ export interface StyledButtonToggleProps {
     disabled?: boolean;
     /** ButtonToggle size */
     size: "small" | "medium" | "large";
-    grouped?: boolean;
     /** Allow button to be deselected when already selected */
     allowDeselect?: boolean;
 }
@@ -36,8 +35,5 @@ export interface StyledButtonToggleIconProps {
     hasContent?: boolean;
 }
 declare const StyledButtonToggleIcon: import("styled-components").StyledComponent<"div", any, StyledButtonToggleIconProps, never>;
-export interface StyledButtonToggleWrapperProps {
-    grouped?: boolean;
-}
-declare const StyledButtonToggleWrapper: import("styled-components").StyledComponent<"div", any, StyledButtonToggleWrapperProps, never>;
+declare const StyledButtonToggleWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
 export { StyledButtonToggle, StyledButtonToggleWrapper, StyledButtonToggleIcon, StyledButtonToggleContentWrapper, };

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

@@ -1,7 +1,7 @@
 import styled, { css } from "styled-components";
 import StyledIcon from "../icon/icon.style";
-import addFocusStyling from "../../style/utils/add-focus-styling";
 import baseTheme from "../../style/themes/base";
+import addFocusStyling from "../../style/utils/add-focus-styling";
 export const heightConfig = {
   small: 24,
   medium: 32,
@@ -72,8 +72,8 @@ const StyledButtonToggle = styled.button`
       min-height: ${heightLargeIconConfig[size]}px;
       padding: ${paddingLargeIconConfig[size]};
       flex-direction: column;
-    `}  
-    
+    `}
+
   &:focus {
     ${addFocusStyling()}
     z-index: 100;
@@ -153,43 +153,10 @@ StyledButtonToggle.defaultProps = {
 const StyledButtonToggleWrapper = styled.div`
   display: inline-block;
   vertical-align: middle;
-
-  ${({
-  grouped
-}) => css`
-    ${!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);
-          }
-        }
-
-        :last-of-type {
-          ${StyledButtonToggle} {
-            border-top-right-radius: var(--borderRadius050);
-            border-bottom-right-radius: var(--borderRadius050);
-          }
-        }
-      }
-    `}
-  `}
-
-  ${({
-  grouped
-}) => grouped && css`
-      &:not(:first-of-type) {
-        margin-left: -1px;
-      }
-    `};
+  &&&& {
+    ${StyledButtonToggle} {
+      border-radius: var(--borderRadius050);
+    }
+  }
 `;
 export { StyledButtonToggle, StyledButtonToggleWrapper, StyledButtonToggleIcon, StyledButtonToggleContentWrapper };

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

@@ -25,8 +25,6 @@ export interface DecimalProps extends Omit<CommonTextboxProps, "onChange" | "onB
     onChange?: (ev: CustomEvent) => void;
     /** Handler for blur event */
     onBlur?: (ev: CustomEvent) => void;
-    /** [Deprecated] Handler for key press event */
-    onKeyPress?: (ev: React.KeyboardEvent<HTMLInputElement>) => void;
     /** The input name */
     name?: string;
     /** The decimal precision of the value in the input */

package/esm/components/decimal/decimal.component.js

@@ -7,7 +7,6 @@ import LocaleContext from "../../__internal__/i18n-context";
 import usePrevious from "../../hooks/__internal__/usePrevious";
 import Logger from "../../__internal__/utils/logger";
 let deprecateUncontrolledWarnTriggered = false;
-let deprecateOnKeyPressWarnTriggered = false;
 const Decimal = /*#__PURE__*/React.forwardRef(({
   align = "right",
   defaultValue,
@@ -16,7 +15,6 @@ const Decimal = /*#__PURE__*/React.forwardRef(({
   readOnly,
   onChange,
   onBlur,
-  onKeyPress,
   id,
   name,
   allowEmptyValue = false,
@@ -41,7 +39,7 @@ const Decimal = /*#__PURE__*/React.forwardRef(({
       return valueToFormat;
     }
 
-    /* Guards against any white-space only strings like "   " being 
+    /* Guards against any white-space only strings like "   " being
     mishandled and returned as `NaN` for the value displayed in the textbox */
     if (valueToFormat === "" || valueToFormat.match(/\s+/g)) {
       return valueToFormat;
@@ -93,8 +91,8 @@ const Decimal = /*#__PURE__*/React.forwardRef(({
     const valueWithoutNBS = getSeparator("group")?.match(/\s+/) && !i18nValue.match(/\s{2,}/) ? i18nValue.replace(/\s+/g, "") : i18nValue;
     /* If a value is passed in that is a number but has too many delimiters in succession, we want to handle this
     value without formatting it or removing delimiters. We also want to consider that,
-    if a value consists of only delimiters, we want to treat that 
-    value in the same way as if the value was NaN. We want to pass this value to the 
+    if a value consists of only delimiters, we want to treat that
+    value in the same way as if the value was NaN. We want to pass this value to the
     formatValue function, before the delimiters can be removed. */
     const errorsWithDelimiter = new RegExp(`([^A-Za-z0-9]{2,})|(^[^A-Za-z0-9-]+)|([^0-9a-z-,.])|([^0-9-,.]+)|([W,.])$`, "g");
     const separator = getSeparator("decimal");
@@ -167,12 +165,7 @@ const Decimal = /*#__PURE__*/React.forwardRef(({
     deprecateUncontrolledWarnTriggered = true;
     Logger.deprecate("Uncontrolled behaviour in `Decimal` is deprecated and support will soon be removed. Please make sure all your inputs are controlled.");
   }
-  if (!deprecateOnKeyPressWarnTriggered && onKeyPress) {
-    deprecateOnKeyPressWarnTriggered = true;
-    Logger.deprecate("`onKeyPress` prop in `Decimal` is deprecated and will soon be removed, please use `onKeyDown` instead.");
-  }
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Textbox, _extends({
-    onKeyPress: onKeyPress,
     align: align,
     readOnly: readOnly,
     inputWidth: inputWidth,

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

@@ -3,7 +3,11 @@ import { MarginProps } from "styled-system";
 import { IconType } from "../icon";
 import { TagProps } from "../../__internal__/utils/helpers/tags/tags";
 export interface DetailProps extends MarginProps, TagProps {
-    /** Custom className. */
+    /**
+     * @private
+     * @internal
+     * @ignore
+     * Sets className for component. INTERNAL USE ONLY. */
     className?: string;
     /** The type of icon to use. */
     icon?: IconType;

package/esm/components/detail/detail.component.js

@@ -4,8 +4,6 @@ import PropTypes from "prop-types";
 import { filterStyledSystemMarginProps } from "../../style/utils";
 import tagComponent from "../../__internal__/utils/helpers/tags/tags";
 import { StyledDetail, StyledDetailContent, StyledDetailIcon, StyledDetailFootnote } from "./detail.style";
-import Logger from "../../__internal__/utils/logger";
-let deprecatedClassNameWarningShown = false;
 export const Detail = ({
   className,
   icon,
@@ -13,10 +11,6 @@ export const Detail = ({
   children,
   ...rest
 }) => {
-  if (!deprecatedClassNameWarningShown && className) {
-    Logger.deprecate("The 'className' prop has been deprecated and will soon be removed from the 'Detail' component.");
-    deprecatedClassNameWarningShown = true;
-  }
   return /*#__PURE__*/React.createElement(StyledDetail, _extends({
     className: `carbon-detail ${className}`
   }, tagComponent("detail", rest), filterStyledSystemMarginProps(rest)), icon && /*#__PURE__*/React.createElement(StyledDetailIcon, {