carbon-react 106.7.0 → 107.1.1

package/lib/components/i18n-provider/i18n-provider.component.d.ts

@@ -82,15 +82,6 @@ declare namespace I18nProvider {
             titleSelect: PropTypes.Requireable<PropTypes.InferProps<{
                 deselect: PropTypes.Requireable<(...args: any[]) => any>;
             }>>;
-            wizards: PropTypes.Requireable<PropTypes.InferProps<{
-                multiStep: PropTypes.Requireable<PropTypes.InferProps<{
-                    buttons: PropTypes.Requireable<PropTypes.InferProps<{
-                        submit: PropTypes.Requireable<(...args: any[]) => any>;
-                        next: PropTypes.Requireable<(...args: any[]) => any>;
-                        back: PropTypes.Requireable<(...args: any[]) => any>;
-                    }>>;
-                }>>;
-            }>>;
         }>>;
         export { locale_1 as locale };
         export const children: PropTypes.Validator<string | number | boolean | {} | PropTypes.ReactElementLike | PropTypes.ReactNodeArray>;

package/lib/components/i18n-provider/i18n-provider.component.js

@@ -101,15 +101,6 @@ I18nProvider.propTypes = {
     }),
     titleSelect: _propTypes.default.shape({
       deselect: _propTypes.default.func
-    }),
-    wizards: _propTypes.default.shape({
-      multiStep: _propTypes.default.shape({
-        buttons: _propTypes.default.shape({
-          submit: _propTypes.default.func,
-          next: _propTypes.default.func,
-          back: _propTypes.default.func
-        })
-      })
     })
   }),
   children: _propTypes.default.node.isRequired

package/lib/components/menu/__internal__/submenu/submenu.component.js

@@ -27,6 +27,8 @@ var _scrollableBlock = _interopRequireDefault(require("../../scrollable-block"))
 
 var _submenu2 = _interopRequireDefault(require("./submenu.context"));
 
+var _clickAwayWrapper = _interopRequireDefault(require("../../../../__internal__/click-away-wrapper"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function () { return cache; }; return cache; }
@@ -209,12 +211,11 @@ const Submenu = /*#__PURE__*/_react.default.forwardRef(({
       }
     }
   }, [submenuFocusIndex, submenuOpen, href, menuContext, arrayOfFormattedChildren, numberOfChildren, openSubmenu, closeSubmenu, onKeyDown, characterString, restartCharacterTimeout, startCharacterTimeout]);
-  const onClickOutside = (0, _react.useCallback)(event => {
-    if (!_events.default.composedPath(event).includes(submenuRef.current)) {
-      document.removeEventListener("click", onClickOutside);
-      closeSubmenu();
-    }
-  }, [closeSubmenu]);
+
+  const handleClickAway = () => {
+    document.removeEventListener("click", handleClickAway);
+    closeSubmenu();
+  };
 
   const handleClick = event => {
     if (clickToOpen) {
@@ -233,15 +234,6 @@ const Submenu = /*#__PURE__*/_react.default.forwardRef(({
     } // eslint-disable-next-line react-hooks/exhaustive-deps
 
   }, [characterString]);
-  (0, _react.useEffect)(() => {
-    if (submenuOpen) {
-      document.addEventListener("click", onClickOutside);
-    }
-
-    return function cleanup() {
-      document.removeEventListener("click", onClickOutside);
-    };
-  }, [onClickOutside, submenuOpen]);
 
   if (inFullscreenView) {
     return /*#__PURE__*/_react.default.createElement(_submenu.StyledSubmenuWrapper, {
@@ -275,7 +267,10 @@ const Submenu = /*#__PURE__*/_react.default.forwardRef(({
     }, child))));
   }
 
-  return /*#__PURE__*/_react.default.createElement(_submenu.StyledSubmenuWrapper, {
+  return /*#__PURE__*/_react.default.createElement(_clickAwayWrapper.default, {
+    handleClickAway: handleClickAway,
+    targets: [submenuRef]
+  }, /*#__PURE__*/_react.default.createElement(_submenu.StyledSubmenuWrapper, {
     "data-component": "submenu-wrapper",
     onMouseOver: !clickToOpen ? () => openSubmenu() : undefined,
     onMouseLeave: () => closeSubmenu(),
@@ -313,7 +308,7 @@ const Submenu = /*#__PURE__*/_react.default.forwardRef(({
       updateFocusIndex: setSubmenuFocusIndex,
       itemIndex: child.type === _menuItem2.default ? index : undefined
     }
-  }, child))));
+  }, child)))));
 });
 
 Submenu.propTypes = {

package/lib/components/menu/index.d.ts

@@ -1,6 +1,5 @@
 export { default as Menu } from "./menu";
 export { default as MenuItem } from "./menu-item/menu-item";
 export { default as ScrollableBlock } from "./scrollable-block/scrollable-block";
-export { default as SubmenuBlock } from "./submenu-block/submenu-block";
 export { default as MenuDivider } from "./menu-divider/menu-divider";
 export { default as MenuSegmentTitle } from "./menu-segment-title/menu-segment-title";

package/lib/components/menu/index.js

@@ -15,12 +15,6 @@ Object.defineProperty(exports, "MenuItem", {
     return _menuItem.default;
   }
 });
-Object.defineProperty(exports, "SubmenuBlock", {
-  enumerable: true,
-  get: function () {
-    return _submenuBlock.default;
-  }
-});
 Object.defineProperty(exports, "MenuDivider", {
   enumerable: true,
   get: function () {
@@ -50,8 +44,6 @@ var _menu = _interopRequireDefault(require("./menu.component"));
 
 var _menuItem = _interopRequireDefault(require("./menu-item/menu-item.component"));
 
-var _submenuBlock = _interopRequireDefault(require("./submenu-block/submenu-block.component"));
-
 var _menuDivider = _interopRequireDefault(require("./menu-divider/menu-divider.component"));
 
 var _menuSegmentTitle = _interopRequireDefault(require("./menu-segment-title/menu-segment-title.component"));

package/lib/components/menu/menu-item/menu-item.component.js

@@ -25,8 +25,6 @@ var _submenu = _interopRequireDefault(require("../__internal__/submenu/submenu.c
 
 var _submenu2 = _interopRequireDefault(require("../__internal__/submenu/submenu.context"));
 
-var _submenuBlock = _interopRequireDefault(require("../submenu-block/submenu-block.component"));
-
 var _menu2 = require("../menu.style");
 
 var _search = _interopRequireDefault(require("../../search"));
@@ -71,11 +69,6 @@ const MenuItem = ({
   } = menuContext;
 
   const childrenItems = _react.default.Children.map(children, child => {
-    if (child && child.type === _submenuBlock.default) {
-      const childArray = Array.isArray(child.props.children) ? child.props.children : [child.props.children];
-      return [...childArray.map(innerChild => innerChild)];
-    }
-
     if ((child === null || child === void 0 ? void 0 : child.type) === _search.default) {
       isChildSearch.current = true;
     }

package/lib/components/multi-action-button/multi-action-button.component.d.ts

@@ -6,5 +6,5 @@ export interface MultiActionButtonProps extends Omit<SplitButtonProps, "buttonTy
     /** Second text child, renders under main text, only when size is "large" */
     subtext?: string;
 }
-export declare const MultiActionButton: ({ align, disabled, as, buttonType, size, children, text, subtext, "data-element": dataElement, "data-role": dataRole, ...rest }: MultiActionButtonProps) => JSX.Element;
+export declare const MultiActionButton: ({ align, disabled, buttonType, size, children, text, subtext, "data-element": dataElement, "data-role": dataRole, ...rest }: MultiActionButtonProps) => JSX.Element;
 export default MultiActionButton;

package/lib/components/multi-action-button/multi-action-button.component.js

@@ -21,8 +21,6 @@ var _utils = require("../../style/utils");
 
 var _focusTrapUtils = require("../../__internal__/focus-trap/focus-trap-utils");
 
-var _logger = _interopRequireDefault(require("../../__internal__/utils/logger"));
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function () { return cache; }; return cache; }
@@ -31,12 +29,9 @@ function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj;
 
 function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
-let deprecatedWarnTriggered = false;
-
 const MultiActionButton = ({
   align = "left",
   disabled,
-  as,
   buttonType,
   size,
   children,
@@ -46,13 +41,6 @@ const MultiActionButton = ({
   "data-role": dataRole,
   ...rest
 }) => {
-  if (!deprecatedWarnTriggered && as) {
-    deprecatedWarnTriggered = true;
-
-    _logger.default.deprecate( // eslint-disable-next-line max-len
-    "The `as` prop is deprecated and will soon be removed from the `MultiActionButton` component interface. You should use the `buttonType` prop to achieve the same styling. The following codemod is available to help with updating your code https://github.com/Sage/carbon-codemod/tree/master/transforms/rename-prop");
-  }
-
   const ref = (0, _react.useRef)(null);
   const buttonRef = (0, _react.useRef)(null);
   const buttonContainer = (0, _react.useRef)(null);
@@ -211,7 +199,7 @@ const MultiActionButton = ({
     onFocus: focusMainButton,
     onBlur: blurMainButton,
     onKeyDown: handleMainButtonKeyDown,
-    buttonType: buttonType || as,
+    buttonType,
     size,
     subtext,
     ...(!disabled && {
@@ -306,7 +294,6 @@ MultiActionButton.propTypes = {
   "aria-valuemin": _propTypes.default.number,
   "aria-valuenow": _propTypes.default.number,
   "aria-valuetext": _propTypes.default.string,
-  "as": _propTypes.default.oneOf(["primary", "secondary"]),
   "autoCapitalize": _propTypes.default.string,
   "autoCorrect": _propTypes.default.string,
   "autoFocus": _propTypes.default.bool,

package/lib/components/navigation-bar/navigation-bar.component.d.ts

@@ -3,7 +3,6 @@ import { PaddingProps, FlexboxProps } from "styled-system";
 export declare type Position = "sticky" | "fixed";
 export declare type Orientation = "top" | "bottom";
 export declare type NavigationType = "light" | "dark" | "white" | "black";
-export declare type StickyPosition = "top" | "bottom";
 export interface NavigationBarProps extends PaddingProps, FlexboxProps {
     children?: React.ReactNode;
     ariaLabel?: string;
@@ -11,10 +10,6 @@ export interface NavigationBarProps extends PaddingProps, FlexboxProps {
     navigationType?: NavigationType;
     /** If 'true' the children will not be visible */
     isLoading?: boolean;
-    /** Defines the position of sticky navigation bar */
-    stickyPosition?: StickyPosition;
-    /** Defines the offset of sticky navigation bar */
-    stickyOffset?: string;
     /** Defines whether the navigation bar should be positioned fixed or sticky */
     position?: Position;
     /** Defines the offset of navigation bar */
@@ -22,5 +17,5 @@ export interface NavigationBarProps extends PaddingProps, FlexboxProps {
     /** Defines whether the navigation bar should be positioned top or bottom */
     orientation?: Orientation;
 }
-export declare const NavigationBar: ({ navigationType, isLoading, children, ariaLabel, stickyOffset, stickyPosition, position, offset, orientation, ...props }: NavigationBarProps) => JSX.Element;
+export declare const NavigationBar: ({ navigationType, isLoading, children, ariaLabel, position, offset, orientation, ...props }: NavigationBarProps) => JSX.Element;
 export default NavigationBar;

package/lib/components/navigation-bar/navigation-bar.component.js

@@ -11,40 +11,25 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _navigationBar = _interopRequireDefault(require("./navigation-bar.style"));
 
-var _logger = _interopRequireDefault(require("../../__internal__/utils/logger"));
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
-let deprecatedWarnTriggered = false;
-
 const NavigationBar = ({
   navigationType = "light",
   isLoading = false,
   children,
   ariaLabel,
-  stickyOffset = "0",
-  stickyPosition,
   position,
   offset = "0",
   orientation,
   ...props
 }) => {
-  if (!deprecatedWarnTriggered && stickyPosition) {
-    deprecatedWarnTriggered = true;
-
-    _logger.default.deprecate( // eslint-disable-next-line max-len
-    "The `stickyPosition` and `stickyOffset` props are deprecated and will soon be removed. You should use the `position`, `offset` and `orientation` props to achieve the same layout. The following codemods are available to help with updating your code: https://github.com/Sage/carbon-codemod/tree/master/transforms/remove-prop and https://github.com/Sage/carbon-codemod/tree/master/transforms/add-prop");
-  }
-
   return /*#__PURE__*/_react.default.createElement(_navigationBar.default, _extends({
     role: "navigation",
     "aria-label": ariaLabel,
     navigationType: navigationType,
     "data-component": "navigation-bar",
-    stickyOffset: stickyOffset,
-    stickyPosition: stickyPosition,
     position: position,
     offset: offset,
     orientation: orientation
@@ -1052,9 +1037,7 @@ NavigationBar.propTypes = {
     "description": _propTypes.default.string,
     "toString": _propTypes.default.func.isRequired,
     "valueOf": _propTypes.default.func.isRequired
-  }), _propTypes.default.string]),
-  "stickyOffset": _propTypes.default.string,
-  "stickyPosition": _propTypes.default.oneOf(["bottom", "top"])
+  }), _propTypes.default.string])
 };
 var _default = NavigationBar;
 exports.default = _default;

package/lib/components/navigation-bar/navigation-bar.style.d.ts

@@ -3,10 +3,6 @@ import { Position, Orientation, NavigationType } from "./navigation-bar.componen
 declare const StyledNavigationBar: import("styled-components").StyledComponent<"nav", any, PaddingProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & FlexboxProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & {
     /** Color scheme of navigation component */
     navigationType?: NavigationType | undefined;
-    /** Defines the position of sticky navigation bar */
-    stickyPosition?: Orientation | undefined;
-    /** Defines the offset of sticky navigation bar */
-    stickyOffset?: string | undefined;
     /** Defines whether the navigation bar should be positioned fixed or sticky */
     position?: Position | undefined;
     /** Defines the offset of navigation bar */

package/lib/components/navigation-bar/navigation-bar.style.js

@@ -49,14 +49,6 @@ const StyledNavigationBar = _styledComponents.default.nav`
     margin-right: 10px;
   }
 
-  ${({
-  stickyPosition,
-  stickyOffset
-}) => stickyPosition && (0, _styledComponents.css)`
-      position: sticky;
-      ${stickyPosition}: ${stickyOffset};
-    `}
-
   ${({
   position,
   orientation,

package/lib/components/popover-container/popover-container.component.js

@@ -21,6 +21,8 @@ var _guid = _interopRequireDefault(require("../../__internal__/utils/helpers/gui
 
 var _utils = require("../../style/utils");
 
+var _clickAwayWrapper = _interopRequireDefault(require("../../__internal__/click-away-wrapper"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function () { return cache; }; return cache; }
@@ -49,6 +51,7 @@ const PopoverContainer = ({
 }) => {
   const isControlled = open !== undefined;
   const [isOpenInternal, setIsOpenInternal] = (0, _react.useState)(false);
+  const ref = (0, _react.useRef)();
   const closeButtonRef = (0, _react.useRef)();
   const openButtonRef = (0, _react.useRef)();
   const guid = (0, _react.useRef)((0, _guid.default)());
@@ -89,10 +92,21 @@ const PopoverContainer = ({
     ref: closeButtonRef,
     ariaLabel: closeButtonAriaLabel
   };
-  return /*#__PURE__*/_react.default.createElement(_popoverContainer.PopoverContainerWrapperStyle, {
+
+  const handleClickAway = e => {
+    if (!isControlled) setIsOpenInternal(false);
+    if (onClose) onClose(e);
+  };
+
+  return /*#__PURE__*/_react.default.createElement(_clickAwayWrapper.default, {
+    targets: [ref],
+    handleClickAway: handleClickAway,
+    eventTypeId: "mousedown"
+  }, /*#__PURE__*/_react.default.createElement(_popoverContainer.PopoverContainerWrapperStyle, {
     "data-component": "popover-container",
     role: "region",
-    "aria-labelledby": popoverContainerId
+    "aria-labelledby": popoverContainerId,
+    ref: ref
   }, renderOpenComponent(renderOpenComponentProps), /*#__PURE__*/_react.default.createElement(_reactTransitionGroup.Transition, {
     in: isOpen,
     timeout: {
@@ -116,7 +130,7 @@ const PopoverContainer = ({
   }, (0, _utils.filterStyledSystemPaddingProps)(rest)), /*#__PURE__*/_react.default.createElement(_popoverContainer.PopoverContainerHeaderStyle, null, /*#__PURE__*/_react.default.createElement(_popoverContainer.PopoverContainerTitleStyle, {
     id: popoverContainerId,
     "data-element": "popover-container-title"
-  }, title), renderCloseComponent(renderCloseComponentProps)), children)));
+  }, title), renderCloseComponent(renderCloseComponentProps)), children))));
 };
 
 PopoverContainer.propTypes = { ...paddingPropTypes,

package/lib/components/radio-button/radio-button-group.component.js

@@ -17,7 +17,7 @@ var _fieldset = _interopRequireDefault(require("../../__internal__/fieldset"));
 
 var _radioButtonGroup = _interopRequireDefault(require("./radio-button-group.style"));
 
-var _radioButtonMapper = _interopRequireDefault(require("./radio-button-mapper.component"));
+var _radioButtonMapper = _interopRequireDefault(require("../../__internal__/radio-button-mapper/radio-button-mapper.component"));
 
 var _useIsAboveBreakpoint = _interopRequireDefault(require("../../hooks/__internal__/useIsAboveBreakpoint"));
 

package/lib/components/select/select-list/select-list.component.js

@@ -258,7 +258,7 @@ const SelectList = /*#__PURE__*/_react.default.forwardRef(({
     }
 
     setListHeight(`${newHeight}px`);
-  }, [children, listRef.current]);
+  }, [children]);
   (0, _react.useEffect)(() => {
     const keyboardEvent = "keydown";
     const listElement = listRef.current;
@@ -365,7 +365,7 @@ SelectList.propTypes = {
   /** The Id of the label */
   labelId: _propTypes.default.string,
 
-  /** Child components (such as <Option>) for the <ScrollableList> */
+  /** Child components (such as <Option>) */
   children: _propTypes.default.node,
 
   /** Boolean to toggle where DatePicker is rendered in relation to the Date Input */

package/lib/components/simple-color-picker/simple-color-picker.component.js

@@ -19,7 +19,7 @@ var _fieldset = _interopRequireDefault(require("../../__internal__/fieldset"));
 
 var _simpleColor = _interopRequireDefault(require("./simple-color"));
 
-var _radioButtonMapper = _interopRequireDefault(require("../radio-button/radio-button-mapper.component"));
+var _radioButtonMapper = _interopRequireDefault(require("../../__internal__/radio-button-mapper/radio-button-mapper.component"));
 
 var _simpleColorPicker = require("./simple-color-picker.style");
 

package/lib/components/split-button/split-button-toggle.style.d.ts

@@ -1,4 +1,4 @@
 export default StyledSplitButtonToggle;
-declare const StyledSplitButtonToggle: import("styled-components").StyledComponent<"button", any, import("styled-system").SpaceProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, string | number | symbol> & Omit<import("../button").ButtonProps, "as"> & {
+declare const StyledSplitButtonToggle: import("styled-components").StyledComponent<"button", any, import("styled-system").SpaceProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, string | number | symbol> & import("../button").ButtonProps & {
     iconOnly?: boolean | undefined;
 }, never>;

package/lib/components/split-button/split-button.component.d.ts

@@ -1,8 +1,7 @@
 export default SplitButton;
-declare function SplitButton({ align, as, buttonType, children, disabled, iconPosition, iconType, onClick, size, subtext, text, "data-element": dataElement, "data-role": dataRole, ...rest }: {
+declare function SplitButton({ align, buttonType, children, disabled, iconPosition, iconType, onClick, size, subtext, text, "data-element": dataElement, "data-role": dataRole, ...rest }: {
     [x: string]: any;
     align?: string | undefined;
-    as: any;
     buttonType?: string | undefined;
     children: any;
     disabled?: boolean | undefined;
@@ -19,8 +18,6 @@ declare namespace SplitButton {
     const propTypes: {
         /** Button type: "primary" | "secondary" */
         buttonType: PropTypes.Requireable<string>;
-        /** Button type: "primary" | "secondary" for legacy theme */
-        as: PropTypes.Requireable<string>;
         /** The additional button to display. */
         children: PropTypes.Validator<string | number | boolean | {} | PropTypes.ReactElementLike | PropTypes.ReactNodeArray>;
         /** A custom value for the data-element attribute */

package/lib/components/split-button/split-button.component.js

@@ -35,8 +35,6 @@ var _themes = require("../../style/themes");
 
 var _focusTrapUtils = require("../../__internal__/focus-trap/focus-trap-utils");
 
-var _logger = _interopRequireDefault(require("../../__internal__/utils/logger"));
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function () { return cache; }; return cache; }
@@ -47,11 +45,9 @@ function _extends() { _extends = Object.assign || function (target) { for (var i
 
 const marginPropTypes = (0, _utils.filterStyledSystemMarginProps)(_propTypes2.default.space);
 const CONTENT_WIDTH_RATIO = 0.75;
-let deprecatedWarnTriggered = false;
 
 const SplitButton = ({
   align = "left",
-  as,
   buttonType = "secondary",
   children,
   disabled = false,
@@ -65,13 +61,6 @@ const SplitButton = ({
   "data-role": dataRole,
   ...rest
 }) => {
-  if (!deprecatedWarnTriggered && as) {
-    deprecatedWarnTriggered = true;
-
-    _logger.default.deprecate( // eslint-disable-next-line max-len
-    "The `as` prop is deprecated and will soon be removed from the `SplitButton` component interface. You should use the `buttonType` prop to achieve the same styling. The following codemod is available to help with updating your code https://github.com/Sage/carbon-codemod/tree/master/transforms/rename-prop");
-  }
-
   const theme = (0, _react.useContext)(_styledComponents.ThemeContext) || _themes.baseTheme;
 
   const isToggleButtonFocused = (0, _react.useRef)(false);
@@ -159,7 +148,6 @@ const SplitButton = ({
       onFocus: hideButtons,
       onTouchStart: hideButtons,
       iconPosition,
-      as,
       buttonType,
       disabled,
       iconType,
@@ -180,7 +168,7 @@ const SplitButton = ({
         isToggleButtonFocused.current = false;
       },
       onKeyDown: handleToggleButtonKeyDown,
-      buttonType: as || buttonType,
+      buttonType,
       size
     };
 
@@ -204,7 +192,7 @@ const SplitButton = ({
       primary: theme.colors.white,
       secondary: theme.colors.primary
     };
-    return colorsMap[as || buttonType];
+    return colorsMap[buttonType];
   }
 
   function renderMainButton() {
@@ -315,9 +303,6 @@ SplitButton.propTypes = { ...marginPropTypes,
   /** Button type: "primary" | "secondary" */
   buttonType: _propTypes.default.oneOf(["primary", "secondary"]),
 
-  /** Button type: "primary" | "secondary" for legacy theme */
-  as: _propTypes.default.oneOf(["primary", "secondary"]),
-
   /** The additional button to display. */
   children: _propTypes.default.node.isRequired,
 
@@ -342,6 +327,6 @@ SplitButton.propTypes = { ...marginPropTypes,
   /** Set align of the rendered content */
   align: _propTypes.default.oneOf(["left", "right"])
 };
-SplitButton.safeProps = ["buttonType", "as", "disabled", "size"];
+SplitButton.safeProps = ["buttonType", "disabled", "size"];
 var _default = SplitButton;
 exports.default = _default;

package/lib/components/split-button/split-button.d.ts

@@ -6,8 +6,6 @@ export interface SplitButtonProps
     MarginProps {
   /** Set align of the rendered content */
   align?: "left" | "right";
-  /** Button type: "primary" | "secondary" for legacy theme */
-  as?: "primary" | "secondary";
   /** Button type: "primary" | "secondary" */
   buttonType?: "primary" | "secondary";
   /** The additional button to display. */

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

@@ -1,7 +1,6 @@
 export default Tile;
-declare function Tile({ as, variant, p, children, orientation, width, ...props }: {
+declare function Tile({ variant, p, children, orientation, width, ...props }: {
     [x: string]: any;
-    as: any;
     variant?: string | undefined;
     p?: number | undefined;
     children: any;

package/lib/components/tile/tile.component.js

@@ -13,16 +13,11 @@ var _propTypes2 = _interopRequireDefault(require("@styled-system/prop-types"));
 
 var _tileStyle = require("./tile.style.js");
 
-var _logger = _interopRequireDefault(require("../../__internal__/utils/logger"));
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
-let deprecatedWarnTriggered = false;
-
 const Tile = ({
-  as,
   variant = "tile",
   p = 3,
   children,
@@ -30,13 +25,6 @@ const Tile = ({
   width,
   ...props
 }) => {
-  if (!deprecatedWarnTriggered && as) {
-    deprecatedWarnTriggered = true;
-
-    _logger.default.deprecate( // eslint-disable-next-line max-len
-    "The `as` prop is deprecated and will soon be removed from the `Tile` component interface. You should use the `variant` prop to achieve the same styling. The following codemod is available to help with updating your code https://github.com/Sage/carbon-codemod/tree/master/transforms/rename-prop");
-  }
-
   const isHorizontal = () => orientation === "horizontal";
 
   const isVertical = () => orientation === "vertical";
@@ -66,7 +54,7 @@ const Tile = ({
   });
 
   return /*#__PURE__*/_react.default.createElement(_tileStyle.StyledTile, _extends({
-    tileTheme: as || variant,
+    tileTheme: variant,
     width: width,
     "data-component": "tile",
     isHorizontal: isHorizontal(orientation),
@@ -78,9 +66,6 @@ Tile.propTypes = {
   /** Styled system spacing props */
   ..._propTypes2.default.space,
 
-  /** Sets the theme of the tile - either 'tile' or 'transparent' */
-  as: _propTypes.default.oneOf(["tile", "transparent"]),
-
   /** Sets the theme of the tile - either 'tile' or 'transparent' */
   variant: _propTypes.default.oneOf(["tile", "transparent"]),
 

package/lib/components/tile/tile.d.ts

@@ -2,8 +2,6 @@ import * as React from "react";
 import { SpaceProps } from "styled-system";
 
 export interface TileProps extends SpaceProps {
-  /** Sets the theme of the tile - either 'tile' or 'transparent' */
-  as?: "tile" | "transparent";
   /** Sets the theme of the tile - either 'tile' or 'transparent' */
   variant?: "tile" | "transparent";
   /**

package/lib/components/tile-select/tile-select-group.component.js

@@ -15,7 +15,7 @@ var _tags = _interopRequireDefault(require("../../__internal__/utils/helpers/tag
 
 var _tileSelect = _interopRequireDefault(require("./tile-select.component"));
 
-var _radioButtonMapper = _interopRequireDefault(require("../radio-button/radio-button-mapper.component"));
+var _radioButtonMapper = _interopRequireDefault(require("../../__internal__/radio-button-mapper/radio-button-mapper.component"));
 
 var _tileSelect2 = require("./tile-select.style");
 

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

@@ -1,7 +1,6 @@
 export default Toast;
-declare function Toast({ as, children, className, id, isCenter, maxWidth, onDismiss, open, targetPortalId, timeout, variant, ...restProps }: {
+declare function Toast({ children, className, id, isCenter, maxWidth, onDismiss, open, targetPortalId, timeout, variant, ...restProps }: {
     [x: string]: any;
-    as: any;
     children: any;
     className: any;
     id: any;
@@ -17,8 +16,6 @@ declare namespace Toast {
     const propTypes: {
         /** Customizes the appearance in the DLS theme */
         variant: PropTypes.Requireable<string>;
-        /** Customizes the appearance in a legacy theme through colour (see the 'iconColorSets' for possible values) */
-        as: PropTypes.Requireable<string>;
         /** Custom className */
         className: PropTypes.Requireable<string>;
         /** Custom id  */