carbon-react 119.9.3 → 119.10.1

package/lib/components/accordion/accordion-group/accordion-group.component.js

@@ -16,11 +16,10 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 // typescript-to-proptypes breaks on recursive type references so it has to be an interface
 // eslint-disable-next-line @typescript-eslint/no-empty-interface
 
-const AccordionGroup = _ref => {
-  let {
-    children,
-    ...rest
-  } = _ref;
+const AccordionGroup = ({
+  children,
+  ...rest
+}) => {
   const hasProperChildren = (0, _react.useMemo)(() => {
     let hasAccordionChildren = true;
     _react.default.Children.toArray(children).forEach(child => {

package/lib/components/accordion/accordion.component.js

@@ -15,33 +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; }
 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 Accordion = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
-  let {
-    borders = "default",
-    defaultExpanded,
-    expanded,
-    onChange,
-    children,
-    handleKeyboardAccessibility,
-    id,
-    index,
-    iconType = "chevron_down",
-    iconAlign = "right",
-    scheme = "white",
-    size = "large",
-    subTitle,
-    title,
-    width,
-    headerSpacing,
-    disableContentPadding = false,
-    error,
-    warning,
-    info,
-    buttonHeading,
-    buttonWidth = "150px",
-    openTitle,
-    ...rest
-  } = _ref;
+const Accordion = /*#__PURE__*/_react.default.forwardRef(({
+  borders = "default",
+  defaultExpanded,
+  expanded,
+  onChange,
+  children,
+  handleKeyboardAccessibility,
+  id,
+  index,
+  iconType = "chevron_down",
+  iconAlign = "right",
+  scheme = "white",
+  size = "large",
+  subTitle,
+  title,
+  width,
+  headerSpacing,
+  disableContentPadding = false,
+  error,
+  warning,
+  info,
+  buttonHeading,
+  buttonWidth = "150px",
+  openTitle,
+  ...rest
+}, ref) => {
   const isControlled = expanded !== undefined;
   const [isExpandedInternal, setIsExpandedInternal] = (0, _react.useState)(defaultExpanded || false);
   const [contentHeight, setContentHeight] = (0, _react.useState)(isExpandedInternal ? "auto" : 0);

package/lib/components/accordion/accordion.style.js

@@ -19,46 +19,31 @@ exports.StyledAccordionGroup = StyledAccordionGroup;
 const StyledAccordionContainer = _styledComponents.default.div`
   ${_styledSystem.space}
   display: flex;
-  align-items: ${_ref => {
-  let {
-    buttonHeading
-  } = _ref;
-  return buttonHeading ? "flex-start" : "stretch";
-}};
+  align-items: ${({
+  buttonHeading
+}) => buttonHeading ? "flex-start" : "stretch"};
   justify-content: center;
   flex-direction: column;
   box-sizing: border-box;
-  width: ${_ref2 => {
-  let {
-    width
-  } = _ref2;
-  return width || "100%";
-}};
+  width: ${({
+  width
+}) => width || "100%"};
   color: var(--colorsUtilityYin090);
-  background-color: ${_ref3 => {
-  let {
-    scheme
-  } = _ref3;
-  return scheme === "white" ? "var(--colorsUtilityYang100)" : "var(--colorsUtilityMajorTransparent)";
-}};
+  background-color: ${({
+  scheme
+}) => scheme === "white" ? "var(--colorsUtilityYang100)" : "var(--colorsUtilityMajorTransparent)"};
   border: 1px solid var(--colorsUtilityMajor100);
-  ${_ref4 => {
-  let {
-    borders
-  } = _ref4;
-  return borders === "default" && (0, _styledComponents.css)`
+  ${({
+  borders
+}) => borders === "default" && (0, _styledComponents.css)`
       border-left: none;
       border-right: none;
-    `;
-}}
-  ${_ref5 => {
-  let {
-    borders
-  } = _ref5;
-  return borders === "none" && (0, _styledComponents.css)`
+    `}
+  ${({
+  borders
+}) => borders === "none" && (0, _styledComponents.css)`
       border: none;
-    `;
-}}
+    `}
 
   & + & {
     margin-top: -1px;
@@ -68,18 +53,12 @@ const StyledAccordionContainer = _styledComponents.default.div`
 `;
 exports.StyledAccordionContainer = StyledAccordionContainer;
 const StyledAccordionTitle = _styledComponents.default.h3`
-  font-size: ${_ref6 => {
-  let {
-    size
-  } = _ref6;
-  return size === "small" ? "14" : "20";
-}}px;
-  font-weight: ${_ref7 => {
-  let {
-    size
-  } = _ref7;
-  return size === "small" ? 700 : 900;
-}};
+  font-size: ${({
+  size
+}) => size === "small" ? "14" : "20"}px;
+  font-weight: ${({
+  size
+}) => size === "small" ? 700 : 900};
   line-height: 1;
   user-select: none;
   margin: 0;
@@ -91,29 +70,23 @@ const StyledAccordionSubTitle = _styledComponents.default.span`
 exports.StyledAccordionSubTitle = StyledAccordionSubTitle;
 const StyledAccordionIcon = (0, _styledComponents.default)(_icon.default)`
   transition: transform 0.3s;
-  margin-right: ${_ref8 => {
-  let {
-    iconAlign
-  } = _ref8;
-  return iconAlign === "left" ? "var(--spacing200)" : "var(--spacing000)";
-}};
-  ${_ref9 => {
-  let {
-    isExpanded,
-    iconAlign
-  } = _ref9;
+  margin-right: ${({
+  iconAlign
+}) => iconAlign === "left" ? "var(--spacing200)" : "var(--spacing000)"};
+  ${({
+  isExpanded,
+  iconAlign
+}) => {
   return !isExpanded && (iconAlign === "right" ? "transform: rotate(90deg)" : "transform: rotate(-90deg)");
 }};
   color: var(--colorsActionMinor500);
 `;
 exports.StyledAccordionIcon = StyledAccordionIcon;
 const StyledAccordionHeadingsContainer = _styledComponents.default.div`
-  ${_ref10 => {
-  let {
-    buttonHeading,
-    hasValidationIcon
-  } = _ref10;
-  return !buttonHeading && (0, _styledComponents.css)`
+  ${({
+  buttonHeading,
+  hasValidationIcon
+}) => !buttonHeading && (0, _styledComponents.css)`
       display: grid;
       ${hasValidationIcon && (0, _styledComponents.css)`
         grid-template-columns: min-content auto;
@@ -132,20 +105,17 @@ const StyledAccordionHeadingsContainer = _styledComponents.default.div`
         position: relative;
         top: 2px;
       }
-    `;
-}}
+    `}
 `;
 exports.StyledAccordionHeadingsContainer = StyledAccordionHeadingsContainer;
 const StyledAccordionTitleContainer = _styledComponents.default.div`
-  ${_ref11 => {
-  let {
-    buttonHeading,
-    buttonWidth,
-    iconAlign,
-    size,
-    hasButtonProps
-  } = _ref11;
-  return (0, _styledComponents.css)`
+  ${({
+  buttonHeading,
+  buttonWidth,
+  iconAlign,
+  size,
+  hasButtonProps
+}) => (0, _styledComponents.css)`
     padding: ${size === "small" ? "var(--spacing200)" : "var(--spacing300)"};
     ${_styledSystem.space}
     display: flex;
@@ -204,8 +174,7 @@ const StyledAccordionTitleContainer = _styledComponents.default.div`
         width: ${typeof buttonWidth === "number" ? `${buttonWidth}px` : buttonWidth};
       `}
     `}
-  `;
-}}
+  `}
 `;
 exports.StyledAccordionTitleContainer = StyledAccordionTitleContainer;
 const StyledAccordionContentContainer = _styledComponents.default.div`
@@ -213,20 +182,17 @@ const StyledAccordionContentContainer = _styledComponents.default.div`
   box-sizing: border-box;
   overflow: hidden;
   transition: all 0.3s;
-  ${_ref12 => {
-  let {
-    maxHeight,
-    isExpanded
-  } = _ref12;
-  return (0, _styledComponents.css)`
+  ${({
+  maxHeight,
+  isExpanded
+}) => (0, _styledComponents.css)`
     max-height: ${isExpanded ? `${maxHeight}px` : "0px"};
     height: ${isExpanded ? `${maxHeight}px` : "0px"};
 
     ${!isExpanded && `
       visibility: hidden;
     `}
-  `;
-}}
+  `}
 `;
 exports.StyledAccordionContentContainer = StyledAccordionContentContainer;
 const StyledAccordionContent = _styledComponents.default.div`
@@ -234,14 +200,11 @@ const StyledAccordionContent = _styledComponents.default.div`
   padding-top: 0;
   overflow: hidden;
 
-  ${_ref13 => {
-  let {
-    disableContentPadding
-  } = _ref13;
-  return disableContentPadding && (0, _styledComponents.css)`
+  ${({
+  disableContentPadding
+}) => disableContentPadding && (0, _styledComponents.css)`
       padding: 0;
-    `;
-}}
+    `}
 `;
 exports.StyledAccordionContent = StyledAccordionContent;
 StyledAccordionGroup.defaultProps = {

package/lib/components/action-popover/action-popover-item/action-popover-item.component.js

@@ -38,27 +38,26 @@ function calculateSubmenuPosition(ref, submenuRef, submenuPosition, currentSubme
   }
   return windowWidth >= right + offsetWidth ? "right" : "left";
 }
-const ActionPopoverItem = _ref => {
-  let {
-    children,
-    icon,
-    disabled = false,
-    onClick: onClickProp,
-    submenu,
-    placement = "bottom",
-    focusItem,
-    download,
-    href,
-    horizontalAlignment,
-    childHasSubmenu,
-    childHasIcon,
-    currentSubmenuPosition,
-    setChildHasSubmenu,
-    setChildHasIcon,
-    setCurrentSubmenuPosition,
-    isASubmenu = false,
-    ...rest
-  } = _ref;
+const ActionPopoverItem = ({
+  children,
+  icon,
+  disabled = false,
+  onClick: onClickProp,
+  submenu,
+  placement = "bottom",
+  focusItem,
+  download,
+  href,
+  horizontalAlignment,
+  childHasSubmenu,
+  childHasIcon,
+  currentSubmenuPosition,
+  setChildHasSubmenu,
+  setChildHasIcon,
+  setCurrentSubmenuPosition,
+  isASubmenu = false,
+  ...rest
+}) => {
   const l = (0, _useLocale.default)();
   const context = (0, _react.useContext)(_actionPopoverContext.default);
   !context ? process.env.NODE_ENV !== "production" ? (0, _invariant.default)(false, "ActionPopoverItem must be used within an ActionPopover component") : (0, _invariant.default)(false) : void 0;

package/lib/components/action-popover/action-popover-menu/action-popover-menu.component.js

@@ -16,20 +16,19 @@ 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 ActionPopoverMenu = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
-  let {
-    children,
-    parentID,
-    focusIndex,
-    isOpen,
-    menuID,
-    setOpen,
-    setFocusIndex,
-    placement = "bottom",
-    horizontalAlignment,
-    isASubmenu,
-    ...rest
-  } = _ref;
+const ActionPopoverMenu = /*#__PURE__*/_react.default.forwardRef(({
+  children,
+  parentID,
+  focusIndex,
+  isOpen,
+  menuID,
+  setOpen,
+  setFocusIndex,
+  placement = "bottom",
+  horizontalAlignment,
+  isASubmenu,
+  ...rest
+}, ref) => {
   const context = (0, _react.useContext)(_actionPopoverContext.default);
   !context ? process.env.NODE_ENV !== "production" ? (0, _invariant.default)(false, "ActionPopoverMenu must be used within an ActionPopover component") : (0, _invariant.default)(false) : void 0;
   const {

package/lib/components/action-popover/action-popover-menu-button/action-popover-menu-button.component.js

@@ -10,22 +10,19 @@ var _actionPopover = require("../action-popover.style");
 var _button = _interopRequireDefault(require("../../button"));
 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 ActionPopoverMenuButton = _ref => {
-  let {
-    buttonType,
-    iconType,
-    iconPosition,
-    size,
-    children,
-    ...props
-  } = _ref;
-  return /*#__PURE__*/_react.default.createElement(_actionPopover.MenuButtonOverrideWrapper, null, /*#__PURE__*/_react.default.createElement(_button.default, _extends({
-    buttonType: buttonType,
-    iconType: iconType,
-    iconPosition: iconPosition,
-    size: size
-  }, props), children));
-};
+const ActionPopoverMenuButton = ({
+  buttonType,
+  iconType,
+  iconPosition,
+  size,
+  children,
+  ...props
+}) => /*#__PURE__*/_react.default.createElement(_actionPopover.MenuButtonOverrideWrapper, null, /*#__PURE__*/_react.default.createElement(_button.default, _extends({
+  buttonType: buttonType,
+  iconType: iconType,
+  iconPosition: iconPosition,
+  size: size
+}, props), children));
 exports.ActionPopoverMenuButton = ActionPopoverMenuButton;
 ActionPopoverMenuButton.displayName = "ActionPopoverMenuButton";
 var _default = ActionPopoverMenuButton;

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

@@ -23,19 +23,18 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && 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 onOpenDefault = () => {};
 const onCloseDefault = () => {};
-const ActionPopover = _ref => {
-  let {
-    children,
-    id,
-    onOpen = onOpenDefault,
-    onClose = onCloseDefault,
-    rightAlignMenu,
-    renderButton,
-    placement = "bottom",
-    horizontalAlignment = "left",
-    submenuPosition = "left",
-    ...rest
-  } = _ref;
+const ActionPopover = ({
+  children,
+  id,
+  onOpen = onOpenDefault,
+  onClose = onCloseDefault,
+  rightAlignMenu,
+  renderButton,
+  placement = "bottom",
+  horizontalAlignment = "left",
+  submenuPosition = "left",
+  ...rest
+}) => {
   const l = (0, _useLocale.default)();
   const [isOpen, setOpenState] = (0, _react.useState)(false);
   const [focusIndex, setFocusIndex] = (0, _react.useState)(0);
@@ -121,10 +120,9 @@ const ActionPopover = _ref => {
     modalRef: buttonRef
   });
   (0, _react.useEffect)(() => {
-    const handler = _ref2 => {
-      let {
-        target
-      } = _ref2;
+    const handler = ({
+      target
+    }) => {
       // If the event didn't came from part of this component, close the menu.
       // There will be multiple document click listeners but we cant prevent propagation because it will interfere with
       // other instances on the same page

package/lib/components/action-popover/action-popover.style.js

@@ -14,24 +14,18 @@ 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 Menu = _styledComponents.default.div`
-  ${_ref => {
-  let {
-    isOpen
-  } = _ref;
-  return isOpen ? "display: block;" : "visibility: hidden;";
-}}
+  ${({
+  isOpen
+}) => isOpen ? "display: block;" : "visibility: hidden;"}
   margin: 0;
   padding: var(--spacing100) 0;
   box-shadow: var(--boxShadow100);
   position: absolute;
   border-radius: var(--borderRadius100);
   background-color: var(--colorsUtilityYang100);
-  z-index: ${_ref2 => {
-  let {
-    theme
-  } = _ref2;
-  return `${theme.zIndex?.popover}`;
-}}; // TODO (tokens): implement elevation tokens - FE-4437
+  z-index: ${({
+  theme
+}) => `${theme.zIndex?.popover}`}; // TODO (tokens): implement elevation tokens - FE-4437
 `;
 exports.Menu = Menu;
 function getPaddingValues(childHasSubmenu, childHasIcon, hasIcon, hasSubmenu) {
@@ -63,17 +57,15 @@ function getIconPaddingValues(index, horizontalAlignment, submenuPosition, sibli
   return "var(--spacing100)";
 }
 const StyledMenuItemInnerText = _styledComponents.default.div`
-  ${_ref3 => {
-  let {
-    childHasSubmenu,
-    childHasIcon,
-    hasIcon,
-    hasSubmenu,
-    submenuPosition,
-    horizontalAlignment,
-    isASubmenu
-  } = _ref3;
-  return (0, _styledComponents.css)`
+  ${({
+  childHasSubmenu,
+  childHasIcon,
+  hasIcon,
+  hasSubmenu,
+  submenuPosition,
+  horizontalAlignment,
+  isASubmenu
+}) => (0, _styledComponents.css)`
     padding-left: ${isASubmenu ? `var(--spacing000)` : `var(--spacing100)`};
     padding-right: ${isASubmenu ? `var(--spacing000)` : `var(--spacing100)`};
 
@@ -84,8 +76,7 @@ const StyledMenuItemInnerText = _styledComponents.default.div`
     ${horizontalAlignment === "right" && submenuPosition === "right" && !isASubmenu && (0, _styledComponents.css)`
       padding-right: ${getPaddingValues(childHasSubmenu, childHasIcon, hasIcon, hasSubmenu)};
     `}
-  `;
-}}
+  `}
 `;
 exports.StyledMenuItemInnerText = StyledMenuItemInnerText;
 const StyledMenuItemOuterContainer = _styledComponents.default.div`
@@ -93,14 +84,12 @@ const StyledMenuItemOuterContainer = _styledComponents.default.div`
 `;
 exports.StyledMenuItemOuterContainer = StyledMenuItemOuterContainer;
 const StyledMenuItem = _styledComponents.default.button`
-  ${_ref4 => {
-  let {
-    horizontalAlignment,
-    submenuPosition,
-    childHasSubmenu,
-    hasSubmenu
-  } = _ref4;
-  return (0, _styledComponents.css)`
+  ${({
+  horizontalAlignment,
+  submenuPosition,
+  childHasSubmenu,
+  hasSubmenu
+}) => (0, _styledComponents.css)`
       justify-content: ${horizontalAlignment === "left" ? "flex-start" : "flex-end"};
 
       ${horizontalAlignment === "left" && submenuPosition === "right" && (0, _styledComponents.css)`
@@ -112,8 +101,7 @@ const StyledMenuItem = _styledComponents.default.button`
           justify-content: space-between;
         `}
       `}
-    `;
-}}
+    `}
 
   text-decoration: none;
   background-color: var(--colorsActionMajorYang100);
@@ -138,11 +126,9 @@ const StyledMenuItem = _styledComponents.default.button`
     border-radius: var(--borderRadius000);
   }
 
-  ${_ref5 => {
-  let {
-    isDisabled
-  } = _ref5;
-  return isDisabled && (0, _styledComponents.css)`
+  ${({
+  isDisabled
+}) => isDisabled && (0, _styledComponents.css)`
       color: var(--colorsUtilityYin030);
       cursor: not-allowed;
 
@@ -150,14 +136,11 @@ const StyledMenuItem = _styledComponents.default.button`
         cursor: not-allowed;
         color: var(--colorsUtilityYin030);
       }
-    `;
-}}
+    `}
 
-  ${_ref6 => {
-  let {
-    isDisabled
-  } = _ref6;
-  return !isDisabled && (0, _styledComponents.css)`
+  ${({
+  isDisabled
+}) => !isDisabled && (0, _styledComponents.css)`
       &:focus,
       &:hover {
         background-color: var(--colorsUtilityMajor100);
@@ -165,8 +148,7 @@ const StyledMenuItem = _styledComponents.default.button`
       && ${_icon2.default} {
         cursor: pointer;
       }
-    `;
-}}
+    `}
 `;
 exports.StyledMenuItem = StyledMenuItem;
 const StyledMenuItemWrapper = _styledComponents.default.div`
@@ -207,33 +189,28 @@ const StyledButtonIcon = _styledComponents.default.div`
 `;
 exports.StyledButtonIcon = StyledButtonIcon;
 const MenuItemIcon = (0, _styledComponents.default)(_icon.default)`
-  ${_ref7 => {
-  let {
-    horizontalAlignment,
-    submenuPosition,
-    childHasIcon,
-    childHasSubmenu,
-    hasIcon,
-    hasSubmenu,
-    isASubmenu
-  } = _ref7;
-  return (0, _styledComponents.css)`
+  ${({
+  horizontalAlignment,
+  submenuPosition,
+  childHasIcon,
+  childHasSubmenu,
+  hasIcon,
+  hasSubmenu,
+  isASubmenu
+}) => (0, _styledComponents.css)`
     justify-content: ${horizontalAlignment};
     padding: var(--spacing100)
       ${getIconPaddingValues(1, horizontalAlignment, submenuPosition, childHasIcon && childHasSubmenu && hasIcon && !hasSubmenu, isASubmenu)}
       var(--spacing100)
       ${getIconPaddingValues(2, horizontalAlignment, submenuPosition, childHasIcon && childHasSubmenu && hasIcon && !hasSubmenu, isASubmenu)};
     color: var(--colorsUtilityYin065);
-  `;
-}}
+  `}
 `;
 exports.MenuItemIcon = MenuItemIcon;
 const SubMenuItemIcon = (0, _styledComponents.default)(ButtonIcon)`
-  ${_ref8 => {
-  let {
-    type
-  } = _ref8;
-  return (0, _styledComponents.css)`
+  ${({
+  type
+}) => (0, _styledComponents.css)`
     ${type === "chevron_left_thick" && (0, _styledComponents.css)`
       left: -5px;
     `}
@@ -244,8 +221,7 @@ const SubMenuItemIcon = (0, _styledComponents.default)(ButtonIcon)`
         top: var(--sizing100);
       `}
     `}
-  `;
-}}
+  `}
 `;
 exports.SubMenuItemIcon = SubMenuItemIcon;
 const MenuButtonOverrideWrapper = _styledComponents.default.div`