carbon-react 119.10.0 → 119.10.2

package/lib/components/form/form.component.js

@@ -16,24 +16,23 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 function _extends() { _extends = Object.assign ? Object.assign.bind() : 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); }
-const Form = _ref => {
-  let {
-    children,
-    saveButton,
-    leftSideButtons,
-    rightSideButtons,
-    errorCount,
-    warningCount,
-    onSubmit,
-    buttonAlignment = "right",
-    stickyFooter,
-    fieldSpacing = 3,
-    noValidate = true,
-    height,
-    fullWidthButtons = false,
-    footerPadding = {},
-    ...rest
-  } = _ref;
+const Form = ({
+  children,
+  saveButton,
+  leftSideButtons,
+  rightSideButtons,
+  errorCount,
+  warningCount,
+  onSubmit,
+  buttonAlignment = "right",
+  stickyFooter,
+  fieldSpacing = 3,
+  noValidate = true,
+  height,
+  fullWidthButtons = false,
+  footerPadding = {},
+  ...rest
+}) => {
   const {
     isInSidebar
   } = (0, _react.useContext)(_sidebar.SidebarContext);

package/lib/components/form/form.style.js

@@ -15,40 +15,32 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 const StyledFormContent = _styledComponents.default.div`
-  ${_ref => {
-  let {
-    stickyFooter,
-    isInModal
-  } = _ref;
-  return (0, _styledComponents.css)`
+  ${({
+  stickyFooter,
+  isInModal
+}) => (0, _styledComponents.css)`
     ${stickyFooter && (0, _styledComponents.css)`
       overflow-y: ${isInModal ? "auto" : "inherit"};
       flex: 1;
     `}
-  `;
-}}
+  `}
 `;
 exports.StyledFormContent = StyledFormContent;
 const StyledFormFooter = _styledComponents.default.div`
   align-items: center;
   display: flex;
 
-  ${_ref2 => {
-  let {
-    buttonAlignment
-  } = _ref2;
-  return buttonAlignment === "right" && (0, _styledComponents.css)`
+  ${({
+  buttonAlignment
+}) => buttonAlignment === "right" && (0, _styledComponents.css)`
       justify-content: flex-end;
-    `;
-}}
+    `}
 
-  ${_ref3 => {
-  let {
-    stickyFooter,
-    fullWidthButtons,
-    isInModal
-  } = _ref3;
-  return (0, _styledComponents.css)`
+  ${({
+  stickyFooter,
+  fullWidthButtons,
+  isInModal
+}) => (0, _styledComponents.css)`
     ${!stickyFooter && (0, _styledComponents.css)`
       margin-top: 48px;
     `}
@@ -70,8 +62,7 @@ const StyledFormFooter = _styledComponents.default.div`
       flex-direction: column;
       align-items: stretch;
     `}
-  `;
-}}
+  `}
 
   ${_styledSystem.padding}
 `;
@@ -85,14 +76,11 @@ const HEIGHT_SPACING = 216;
 const StyledForm = _styledComponents.default.form`
   ${_styledSystem.space}
 
-  ${_ref4 => {
-  let {
-    height
-  } = _ref4;
-  return height && (0, _styledComponents.css)`
+  ${({
+  height
+}) => height && (0, _styledComponents.css)`
       height: ${height};
-    `;
-}}
+    `}
     
     ${_textarea.default}
       ${_formField.default} {
@@ -103,13 +91,11 @@ const StyledForm = _styledComponents.default.form`
     margin-bottom: 0px;
   }
 
-  ${_ref5 => {
-  let {
-    stickyFooter,
-    isInModal,
-    isInSidebar
-  } = _ref5;
-  return stickyFooter && (0, _styledComponents.css)`
+  ${({
+  stickyFooter,
+  isInModal,
+  isInSidebar
+}) => stickyFooter && (0, _styledComponents.css)`
       display: flex;
       flex-direction: column;
       position: relative;
@@ -121,24 +107,17 @@ const StyledForm = _styledComponents.default.form`
       ${isInSidebar && (0, _styledComponents.css)`
         min-height: 100%;
       `}
-    `;
-}}
+    `}
 `;
 exports.StyledForm = StyledForm;
 const StyledRightButtons = _styledComponents.default.div`
   display: flex;
-  ${_ref6 => {
-  let {
-    fullWidthButtons
-  } = _ref6;
-  return fullWidthButtons ? `margin-left: 0px;` : `margin-left: 16px;`;
-}}
-  ${_ref7 => {
-  let {
-    buttonAlignment
-  } = _ref7;
-  return buttonAlignment === "left" && "flex-grow: 1";
-}};
+  ${({
+  fullWidthButtons
+}) => fullWidthButtons ? `margin-left: 0px;` : `margin-left: 16px;`}
+  ${({
+  buttonAlignment
+}) => buttonAlignment === "left" && "flex-grow: 1"};
 
   ${_button.default}:last-child {
     margin-right: 0;
@@ -153,18 +132,12 @@ exports.StyledFullWidthButtons = StyledFullWidthButtons;
 const StyledLeftButtons = _styledComponents.default.div`
   display: flex;
   justify-content: flex-end;
-  ${_ref8 => {
-  let {
-    fullWidthButtons
-  } = _ref8;
-  return fullWidthButtons ? `margin-right: 0px;` : `margin-right: 16px;`;
-}}
-  ${_ref9 => {
-  let {
-    buttonAlignment
-  } = _ref9;
-  return buttonAlignment === "right" && "flex-grow: 1";
-}};
+  ${({
+  fullWidthButtons
+}) => fullWidthButtons ? `margin-right: 0px;` : `margin-right: 16px;`}
+  ${({
+  buttonAlignment
+}) => buttonAlignment === "right" && "flex-grow: 1"};
 
   ${_button.default}:last-child {
     margin-right: 0;

package/lib/components/global-header/global-header.component.js

@@ -31,12 +31,11 @@ const StyledLogo = (0, _styledComponents.default)(_box.default)`
     margin-left: var(--spacing500);
   }
 `;
-const GlobalHeader = _ref => {
-  let {
-    children,
-    logo,
-    ...rest
-  } = _ref;
+const GlobalHeader = ({
+  children,
+  logo,
+  ...rest
+}) => {
   return /*#__PURE__*/_react.default.createElement(_navigationBar.default, _extends({
     isGlobal: true
   }, rest), logo && /*#__PURE__*/_react.default.createElement(StyledLogo, {

package/lib/components/grid/grid-item/grid-item.style.js

@@ -75,31 +75,28 @@ const StyledGridItem = _styledComponents.default.div`
   margin: 0;
   ${_styledSystem.padding}
 
-  ${_ref => {
-  let {
-    alignSelf,
-    justifySelf,
-    gridArea = "auto / 1 / auto / 13",
-    gridColumn,
-    gridRow,
-    responsiveSettings
-  } = _ref;
-  return (0, _styledComponents.css)`
+  ${({
+  alignSelf,
+  justifySelf,
+  gridArea = "auto / 1 / auto / 13",
+  gridColumn,
+  gridRow,
+  responsiveSettings
+}) => (0, _styledComponents.css)`
     ${(0, _styledSystem.flexbox)({
-    alignSelf,
-    justifySelf
-  })}
+  alignSelf,
+  justifySelf
+})}
     ${(0, _styledSystem.grid)({
-    gridArea,
-    gridColumn,
-    gridRow
-  })};
+  gridArea,
+  gridColumn,
+  gridRow
+})};
 
     ${responsiveSettings && (0, _styledComponents.css)`
       ${responsiveGridItem(responsiveSettings)};
     `}
-  `;
-}}
+  `}
 `;
 var _default = StyledGridItem;
 exports.default = _default;

package/lib/components/grouped-character/grouped-character.component.js

@@ -13,10 +13,9 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 function _extends() { _extends = Object.assign ? Object.assign.bind() : 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); }
-const buildCustomTarget = (_ref, value) => {
-  let {
-    target
-  } = _ref;
+const buildCustomTarget = ({
+  target
+}, value) => {
   const {
     name,
     id
@@ -33,17 +32,16 @@ const buildCustomTarget = (_ref, value) => {
 };
 let deprecateInputRefWarnTriggered = false;
 let deprecateUncontrolledWarnTriggered = false;
-const GroupedCharacter = /*#__PURE__*/_react.default.forwardRef((_ref2, ref) => {
-  let {
-    defaultValue,
-    groups,
-    onBlur,
-    onChange,
-    separator: rawSeparator,
-    value: externalValue,
-    inputRef,
-    ...rest
-  } = _ref2;
+const GroupedCharacter = /*#__PURE__*/_react.default.forwardRef(({
+  defaultValue,
+  groups,
+  onBlur,
+  onChange,
+  separator: rawSeparator,
+  value: externalValue,
+  inputRef,
+  ...rest
+}, ref) => {
   const [internalValue, setInternalValue] = (0, _react.useState)(defaultValue || "");
   const isControlled = externalValue !== undefined;
   const separator = rawSeparator.substring(0, 1); // Ensure max length is 1

package/lib/components/heading/heading.component.js

@@ -12,23 +12,22 @@ var _heading = require("./heading.style");
 var _useLocale = _interopRequireDefault(require("../../hooks/__internal__/useLocale"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _extends() { _extends = Object.assign ? Object.assign.bind() : 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); }
-const Heading = _ref => {
-  let {
-    children,
-    backLink,
-    divider = true,
-    help,
-    helpAriaLabel,
-    helpLink,
-    pills,
-    separator = false,
-    subheader,
-    subtitleId,
-    headingType = "h1",
-    title,
-    titleId,
-    ...rest
-  } = _ref;
+const Heading = ({
+  children,
+  backLink,
+  divider = true,
+  help,
+  helpAriaLabel,
+  helpLink,
+  pills,
+  separator = false,
+  subheader,
+  subtitleId,
+  headingType = "h1",
+  title,
+  titleId,
+  ...rest
+}) => {
   const getHelp = () => {
     return /*#__PURE__*/_react.default.createElement(_heading.StyledHeaderHelp, {
       "data-element": "help",

package/lib/components/heading/heading.style.js

@@ -30,13 +30,11 @@ const StyledHeaderContent = _styledComponents.default.div`
 `;
 exports.StyledHeaderContent = StyledHeaderContent;
 const StyledHeader = _styledComponents.default.div`
-  ${_ref => {
-  let {
-    divider,
-    subheader,
-    hasBackLink
-  } = _ref;
-  return (0, _styledComponents.css)`
+  ${({
+  divider,
+  subheader,
+  hasBackLink
+}) => (0, _styledComponents.css)`
     ${subheader && (0, _styledComponents.css)`
       margin-bottom: 16px;
     `}
@@ -53,8 +51,7 @@ const StyledHeader = _styledComponents.default.div`
       display: grid;
       grid-template-columns: min-content auto;
     `}
-  `;
-}}
+  `}
 `;
 exports.StyledHeader = StyledHeader;
 const StyledHeadingBackButton = (0, _styledComponents.default)(_link.default)`
@@ -87,14 +84,11 @@ const StyledHeadingBackButton = (0, _styledComponents.default)(_link.default)`
 exports.StyledHeadingBackButton = StyledHeadingBackButton;
 const StyledHeadingTitle = (0, _styledComponents.default)(_typography.default)`
   line-height: 32px;
-  ${_ref2 => {
-  let {
-    withMargin
-  } = _ref2;
-  return withMargin ? (0, _styledComponents.css)`
+  ${({
+  withMargin
+}) => withMargin ? (0, _styledComponents.css)`
           margin-right: 16px;
-        ` : null;
-}}
+        ` : null}
 `;
 exports.StyledHeadingTitle = StyledHeadingTitle;
 const StyledHeadingPills = _styledComponents.default.span`
@@ -107,24 +101,18 @@ const StyledSubHeader = _styledComponents.default.div`
   margin-top: 5px;
   grid-row: 2;
 
-  ${_ref3 => {
-  let {
-    hasBackLink
-  } = _ref3;
-  return hasBackLink && (0, _styledComponents.css)`
+  ${({
+  hasBackLink
+}) => hasBackLink && (0, _styledComponents.css)`
       grid-column: 2;
-    `;
-}}
+    `}
 
-  ${_ref4 => {
-  let {
-    hasSeparator
-  } = _ref4;
-  return hasSeparator && (0, _styledComponents.css)`
+  ${({
+  hasSeparator
+}) => hasSeparator && (0, _styledComponents.css)`
       grid-row: 3;
       margin-top: 0px;
-    `;
-}}
+    `}
 `;
 exports.StyledSubHeader = StyledSubHeader;
 const StyledHeadingIcon = (0, _styledComponents.default)(_icon.default)`

package/lib/components/help/help.component.js

@@ -17,24 +17,23 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 function _extends() { _extends = Object.assign ? Object.assign.bind() : 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); }
-const Help = _ref => {
-  let {
-    as,
-    ariaLabel = "help",
-    children,
-    className,
-    href,
-    helpId,
-    isFocused,
-    tabIndex = 0,
-    tooltipBgColor,
-    tooltipFontColor,
-    tooltipFlipOverrides,
-    tooltipId,
-    tooltipPosition = "top",
-    type = "help",
-    ...rest
-  } = _ref;
+const Help = ({
+  as,
+  ariaLabel = "help",
+  children,
+  className,
+  href,
+  helpId,
+  isFocused,
+  tabIndex = 0,
+  tooltipBgColor,
+  tooltipFontColor,
+  tooltipFlipOverrides,
+  tooltipId,
+  tooltipPosition = "top",
+  type = "help",
+  ...rest
+}) => {
   const defaultTooltipId = (0, _react.useRef)((0, _guid.default)());
   const helpElement = (0, _react.useRef)(null);
   const [isTooltipVisible, updateTooltipVisible] = (0, _react.useState)(false);

package/lib/components/help/help.style.js

@@ -28,14 +28,11 @@ const StyledHelp = _styledComponents.default.div`
     color: var(--colorsUtilityYin065);
   }
 
-  ${_ref => {
-  let {
-    href
-  } = _ref;
-  return href && (0, _styledComponents.css)`
+  ${({
+  href
+}) => href && (0, _styledComponents.css)`
       cursor: pointer;
-    `;
-}}
+    `}
 
   &:focus ${_icon.default},
   &:hover ${_icon.default} {

package/lib/components/hr/hr.component.js

@@ -10,13 +10,12 @@ var _hr = _interopRequireDefault(require("./hr.style"));
 var _useIsAboveBreakpoint = _interopRequireDefault(require("../../hooks/__internal__/useIsAboveBreakpoint"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _extends() { _extends = Object.assign ? Object.assign.bind() : 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); }
-const Hr = _ref => {
-  let {
-    adaptiveMxBreakpoint,
-    ml,
-    mr,
-    ...rest
-  } = _ref;
+const Hr = ({
+  adaptiveMxBreakpoint,
+  ml,
+  mr,
+  ...rest
+}) => {
   const largeScreen = (0, _useIsAboveBreakpoint.default)(adaptiveMxBreakpoint);
   let marginLeft = ml;
   let marginRight = mr;

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

@@ -10,15 +10,12 @@ var _merge = _interopRequireDefault(require("lodash/merge"));
 var _i18nContext = _interopRequireDefault(require("../../__internal__/i18n-context"));
 var _enGb = _interopRequireDefault(require("../../locales/en-gb"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-const I18nProvider = _ref => {
-  let {
-    locale,
-    children
-  } = _ref;
-  return locale ? /*#__PURE__*/_react.default.createElement(_i18nContext.default.Provider, {
-    value: (0, _merge.default)({}, _enGb.default, locale)
-  }, children) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, children);
-};
+const I18nProvider = ({
+  locale,
+  children
+}) => locale ? /*#__PURE__*/_react.default.createElement(_i18nContext.default.Provider, {
+  value: (0, _merge.default)({}, _enGb.default, locale)
+}, children) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, children);
 exports.I18nProvider = I18nProvider;
 var _default = I18nProvider;
 exports.default = _default;

package/lib/components/icon/icon.component.js

@@ -17,33 +17,32 @@ var _tabTitle = require("../tabs/__internal__/tab-title");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-const Icon = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
-  let {
-    "aria-hidden": ariaHidden,
-    ariaLabel,
-    bg,
-    bgShape,
-    bgSize = "small",
-    className,
-    color,
-    disabled,
-    focusable = true,
-    fontSize = "small",
-    id,
-    inputSize,
-    isPartOfInput,
-    tabIndex,
-    tooltipMessage,
-    tooltipPosition,
-    tooltipVisible,
-    tooltipBgColor,
-    tooltipFontColor,
-    tooltipFlipOverrides,
-    tooltipId,
-    type,
-    role,
-    ...rest
-  } = _ref;
+const Icon = /*#__PURE__*/_react.default.forwardRef(({
+  "aria-hidden": ariaHidden,
+  ariaLabel,
+  bg,
+  bgShape,
+  bgSize = "small",
+  className,
+  color,
+  disabled,
+  focusable = true,
+  fontSize = "small",
+  id,
+  inputSize,
+  isPartOfInput,
+  tabIndex,
+  tooltipMessage,
+  tooltipPosition,
+  tooltipVisible,
+  tooltipBgColor,
+  tooltipFontColor,
+  tooltipFlipOverrides,
+  tooltipId,
+  type,
+  role,
+  ...rest
+}, ref) => {
   const flipBehaviourCheck = Array.isArray(tooltipFlipOverrides) && tooltipFlipOverrides.every(override => _iconConfig.ICON_TOOLTIP_POSITIONS.includes(override));
   if (tooltipFlipOverrides) {
     !flipBehaviourCheck ? process.env.NODE_ENV !== "production" ? (0, _invariant.default)(false, `The tooltipFlipOverrides prop supplied to \`Icon\` must be an array containing some or all of ["top", "bottom", "left", "right"].`) : (0, _invariant.default)(false) : void 0;

package/lib/components/icon/icon.style.js

@@ -23,19 +23,18 @@ function adjustIconBgSize(fontSize, bgSize) {
   return bgSize ? _iconConfig.default.backgroundSize[bgSize] : undefined;
 }
 const StyledIcon = _styledComponents.default.span`
-  ${_ref => {
-  let {
-    theme,
-    color,
-    bg,
-    isInteractive,
-    bgSize,
-    bgShape,
-    type,
-    fontSize,
-    disabled,
-    hasTooltip
-  } = _ref;
+  ${({
+  theme,
+  color,
+  bg,
+  isInteractive,
+  bgSize,
+  bgShape,
+  type,
+  fontSize,
+  disabled,
+  hasTooltip
+}) => {
   let finalColor;
   let finalHoverColor;
   let bgColor;