carbon-react 119.10.0 → 119.10.2

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

@@ -31,45 +31,34 @@ export const Box = styled.div`
   ${flexbox}
   ${calculatePosition}
 
-  ${_ref => {
-  let {
-    theme,
-    borderRadius = "borderRadius000"
-  } = _ref;
-  return !theme.roundedCornersOptOut && css`
+  ${({
+  theme,
+  borderRadius = "borderRadius000"
+}) => !theme.roundedCornersOptOut && css`
       border-radius: var(--${borderRadius});
-    `;
-}}
+    `}
 
-  ${_ref2 => {
-  let {
-    color,
-    bg,
-    backgroundColor,
-    ...rest
-  } = _ref2;
-  return styledColor({
-    color,
-    bg,
-    backgroundColor,
-    ...rest
-  });
-}}
+  ${({
+  color,
+  bg,
+  backgroundColor,
+  ...rest
+}) => styledColor({
+  color,
+  bg,
+  backgroundColor,
+  ...rest
+})}
 
-  ${_ref3 => {
-  let {
-    overflowWrap
-  } = _ref3;
-  return overflowWrap && css`
+  ${({
+  overflowWrap
+}) => overflowWrap && css`
       overflow-wrap: ${overflowWrap};
-    `;
-}}
+    `}
 
-  ${_ref4 => {
-  let {
-    scrollVariant
-  } = _ref4;
-  return scrollVariant && css`
+  ${({
+  scrollVariant
+}) => scrollVariant && css`
       scrollbar-color: ${boxConfig[scrollVariant].thumb}
         ${boxConfig[scrollVariant].track};
 
@@ -82,26 +71,20 @@ export const Box = styled.div`
       &::-webkit-scrollbar-thumb {
         background-color: ${boxConfig[scrollVariant].thumb};
       }
-    `;
-}}
+    `}
 
-  ${_ref5 => {
-  let {
-    boxSizing
-  } = _ref5;
-  return boxSizing && css`
+  ${({
+  boxSizing
+}) => boxSizing && css`
       box-sizing: ${boxSizing};
-    `;
-}}
+    `}
 
-    ${_ref6 => {
-  let {
-    display,
-    gap,
-    columnGap,
-    rowGap
-  } = _ref6;
-  return (display === "flex" || display === "inline-flex") && css`
+    ${({
+  display,
+  gap,
+  columnGap,
+  rowGap
+}) => (display === "flex" || display === "inline-flex") && css`
       ${gap !== undefined && css`
         gap: ${boxConfig.gap(gap)};
       `}
@@ -113,17 +96,13 @@ export const Box = styled.div`
       ${rowGap !== undefined && css`
         row-gap: ${boxConfig.gap(rowGap)};
       `}
-    `;
-}};
+    `};
 
-  ${_ref7 => {
-  let {
-    boxShadow
-  } = _ref7;
-  return boxShadow && css`
+  ${({
+  boxShadow
+}) => boxShadow && css`
       box-shadow: var(--${boxShadow});
-    `;
-}}
+    `}
 `;
 Box.defaultProps = {
   theme: BaseTheme

package/esm/components/breadcrumbs/breadcrumbs.component.js

@@ -4,11 +4,10 @@ import PropTypes from "prop-types";
 import tagComponent from "../../__internal__/utils/helpers/tags";
 import StyledBreadcrumbs from "./breadcrumbs.style";
 import useLocale from "../../hooks/__internal__/useLocale";
-const Breadcrumbs = /*#__PURE__*/React.forwardRef((_ref, ref) => {
-  let {
-    children,
-    ...rest
-  } = _ref;
+const Breadcrumbs = /*#__PURE__*/React.forwardRef(({
+  children,
+  ...rest
+}, ref) => {
   const l = useLocale();
   return /*#__PURE__*/React.createElement(StyledBreadcrumbs, _extends({
     ref: ref,

package/esm/components/breadcrumbs/crumb/crumb.component.js

@@ -3,23 +3,20 @@ import React from "react";
 import PropTypes from "prop-types";
 import tagComponent from "../../../__internal__/utils/helpers/tags";
 import { StyledCrumb, Divider } from "./crumb.style";
-const Crumb = /*#__PURE__*/React.forwardRef((_ref, ref) => {
-  let {
-    href,
-    isCurrent,
-    children,
-    onClick,
-    ...rest
-  } = _ref;
-  return /*#__PURE__*/React.createElement("li", null, /*#__PURE__*/React.createElement(StyledCrumb, _extends({
-    ref: ref,
-    isCurrent: isCurrent,
-    "aria-current": isCurrent ? "page" : undefined
-  }, tagComponent("crumb", rest), rest, !isCurrent && {
-    href,
-    onClick
-  }), children), !isCurrent && /*#__PURE__*/React.createElement(Divider, null));
-});
+const Crumb = /*#__PURE__*/React.forwardRef(({
+  href,
+  isCurrent,
+  children,
+  onClick,
+  ...rest
+}, ref) => /*#__PURE__*/React.createElement("li", null, /*#__PURE__*/React.createElement(StyledCrumb, _extends({
+  ref: ref,
+  isCurrent: isCurrent,
+  "aria-current": isCurrent ? "page" : undefined
+}, tagComponent("crumb", rest), rest, !isCurrent && {
+  href,
+  onClick
+}), children), !isCurrent && /*#__PURE__*/React.createElement(Divider, null)));
 Crumb.propTypes = {
   "aria-activedescendant": PropTypes.string,
   "aria-atomic": PropTypes.oneOfType([PropTypes.oneOf(["false", "true"]), PropTypes.bool]),

package/esm/components/breadcrumbs/crumb/crumb.style.js

@@ -2,11 +2,9 @@ import styled, { css } from "styled-components";
 import Link from "../../link";
 export const StyledCrumb = styled(Link)`
   font: var(--typographyLinkTextM);
-  ${_ref => {
-  let {
-    isCurrent
-  } = _ref;
-  return isCurrent && css`
+  ${({
+  isCurrent
+}) => isCurrent && css`
       a {
         color: var(--colorsUtilityYin090);
         text-decoration: none;
@@ -18,8 +16,7 @@ export const StyledCrumb = styled(Link)`
           cursor: text;
         }
       }
-    `;
-}}
+    `}
 `;
 export const Divider = styled.span.attrs({
   children: "/",

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

@@ -9,20 +9,19 @@ import { TooltipProvider } from "../../__internal__/tooltip-provider";
 import Logger from "../../__internal__/utils/logger";
 import { ButtonBarContext } from "../button-bar/button-bar.component";
 import SplitButtonContext from "../split-button/__internal__/split-button.context";
-function renderChildren(_ref) {
-  let {
-    /* eslint-disable react/prop-types */
-    iconType,
-    iconPosition,
-    size,
-    subtext,
-    children,
-    disabled,
-    buttonType,
-    iconTooltipMessage,
-    iconTooltipPosition,
-    tooltipTarget
-  } = _ref;
+function renderChildren({
+  /* eslint-disable react/prop-types */
+  iconType,
+  iconPosition,
+  size,
+  subtext,
+  children,
+  disabled,
+  buttonType,
+  iconTooltipMessage,
+  iconTooltipPosition,
+  tooltipTarget
+}) {
   const iconColorMap = {
     primary: "--colorsActionMajorYang100",
     secondary: "--colorsActionMajor500",
@@ -59,30 +58,29 @@ function renderChildren(_ref) {
 }
 let deprecatedForwardRefWarnTriggered = false;
 let deprecatedDashedButtonWarnTriggered = false;
-const Button = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
-  let {
-    size: sizeProp = "medium",
-    subtext = "",
-    children,
-    forwardRef,
-    "aria-label": ariaLabel,
-    disabled = false,
-    destructive = false,
-    buttonType: buttonTypeProp = "secondary",
-    iconType,
-    iconPosition: iconPositionProp = "before",
-    href,
-    m = 0,
-    px,
-    noWrap,
-    target,
-    rel,
-    iconTooltipMessage,
-    iconTooltipPosition,
-    fullWidth: fullWidthProp = false,
-    onClick,
-    ...rest
-  } = _ref2;
+const Button = /*#__PURE__*/React.forwardRef(({
+  size: sizeProp = "medium",
+  subtext = "",
+  children,
+  forwardRef,
+  "aria-label": ariaLabel,
+  disabled = false,
+  destructive = false,
+  buttonType: buttonTypeProp = "secondary",
+  iconType,
+  iconPosition: iconPositionProp = "before",
+  href,
+  m = 0,
+  px,
+  noWrap,
+  target,
+  rel,
+  iconTooltipMessage,
+  iconTooltipPosition,
+  fullWidth: fullWidthProp = false,
+  onClick,
+  ...rest
+}, ref) => {
   const {
     buttonType: buttonTypeContext,
     size: sizeContext,

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

@@ -24,14 +24,13 @@ function stylingForIconOnly(size) {
   width: ${dimension}; 
   min-height: ${dimension}`;
 }
-function stylingForType(_ref) {
-  let {
-    iconOnly,
-    disabled,
-    buttonType = "secondary",
-    size,
-    destructive
-  } = _ref;
+function stylingForType({
+  iconOnly,
+  disabled,
+  buttonType = "secondary",
+  size,
+  destructive
+}) {
   return css`
     ${buttonTypes(disabled, destructive)[buttonType]};
 
@@ -55,12 +54,10 @@ function stylingForType(_ref) {
 }
 const StyledButton = styled.button`
   ${space}
-  ${_ref2 => {
-  let {
-    disabled,
-    noWrap
-  } = _ref2;
-  return css`
+  ${({
+  disabled,
+  noWrap
+}) => css`
     align-items: center;
     cursor: ${disabled ? "not-allowed" : "pointer"};
     display: inline-flex;
@@ -79,25 +76,19 @@ const StyledButton = styled.button`
     }
 
     ${stylingForType}
-  `;
-}}
+  `}
 
-  ${_ref3 => {
-  let {
-    fullWidth
-  } = _ref3;
-  return fullWidth && css`
+  ${({
+  fullWidth
+}) => fullWidth && css`
       width: 100%;
-    `;
-}}
+    `}
     
-  ${_ref4 => {
-  let {
-    iconOnly,
-    iconPosition,
-    iconType
-  } = _ref4;
-  return css`
+  ${({
+  iconOnly,
+  iconPosition,
+  iconType
+}) => css`
     ${StyledIcon} {
       margin-left: ${!iconOnly && iconPosition === "after" ? "var(--spacing100)" : "0px"};
       margin-right: ${!iconOnly && iconPosition === "before" ? "var(--spacing100)" : "0px"};
@@ -108,8 +99,7 @@ const StyledButton = styled.button`
       }
       ${iconOnly && "margin-left: auto; margin-right: auto"}
     }
-  `;
-}}
+  `}
 `;
 export const StyledButtonSubtext = styled.span`
   font-size: 14px;

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

@@ -3,25 +3,22 @@ import React from "react";
 import PropTypes from "prop-types";
 import StyledButtonBar from "./button-bar.style";
 export const ButtonBarContext = /*#__PURE__*/React.createContext({});
-export const ButtonBar = _ref => {
-  let {
-    children,
-    size = "medium",
-    iconPosition = "before",
-    fullWidth = false,
-    ...rest
-  } = _ref;
-  return /*#__PURE__*/React.createElement(StyledButtonBar, _extends({}, rest, {
-    fullWidth: fullWidth,
-    size: size
-  }), /*#__PURE__*/React.createElement(ButtonBarContext.Provider, {
-    value: {
-      buttonType: "secondary",
-      size,
-      iconPosition,
-      fullWidth
-    }
-  }, children));
-};
+export const ButtonBar = ({
+  children,
+  size = "medium",
+  iconPosition = "before",
+  fullWidth = false,
+  ...rest
+}) => /*#__PURE__*/React.createElement(StyledButtonBar, _extends({}, rest, {
+  fullWidth: fullWidth,
+  size: size
+}), /*#__PURE__*/React.createElement(ButtonBarContext.Provider, {
+  value: {
+    buttonType: "secondary",
+    size,
+    iconPosition,
+    fullWidth
+  }
+}, children));
 ButtonBar.displayName = "ButtonBar";
 export default ButtonBar;

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

@@ -10,12 +10,10 @@ const commonHoverStyles = `
 `;
 const StyledButtonBar = styled.div`
   ${space}
-  ${_ref => {
-  let {
-    fullWidth,
-    size
-  } = _ref;
-  return css`
+  ${({
+  fullWidth,
+  size
+}) => css`
     ${fullWidth && css`
       width: 100%;
       display: flex;
@@ -110,8 +108,7 @@ const StyledButtonBar = styled.div`
         border-right-color: var(--colorsActionMajor500);
       }
     }
-  `;
-}}
+  `}
 `;
 StyledButtonBar.defaultProps = {
   theme: BaseTheme,

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

@@ -3,14 +3,13 @@ import React, { useContext } from "react";
 import PropTypes from "prop-types";
 import StyledButtonMinor from "./button-minor.style";
 import { ButtonBarContext } from "../button-bar/button-bar.component";
-export const ButtonMinor = _ref => {
-  let {
-    buttonType: buttonTypeProp = "secondary",
-    size: sizeProp = "medium",
-    iconPosition: iconPositionProp = "before",
-    fullWidth: fullWidthProp = false,
-    ...rest
-  } = _ref;
+export const ButtonMinor = ({
+  buttonType: buttonTypeProp = "secondary",
+  size: sizeProp = "medium",
+  iconPosition: iconPositionProp = "before",
+  fullWidth: fullWidthProp = false,
+  ...rest
+}) => {
   const {
     buttonType: buttonTypeContext,
     size: sizeContext,

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

@@ -16,24 +16,19 @@ function makeColors(color) {
 const StyledButtonMinor = styled(Button)`
   border-radius: var(--borderRadius050);
 
-  ${_ref => {
-  let {
-    children
-  } = _ref;
-  return !children && css`
+  ${({
+  children
+}) => !children && css`
       ${StyledIcon} {
         position: absolute;
       }
-    `;
-}}
+    `}
 
-  ${_ref2 => {
-  let {
-    buttonType,
-    destructive,
-    disabled
-  } = _ref2;
-  return !destructive && !disabled && css`
+  ${({
+  buttonType,
+  destructive,
+  disabled
+}) => !destructive && !disabled && css`
       ${buttonType === "primary" && `
         background: var(--colorsActionMinor500);
         border-color: var(--colorsActionMinorTransparent);
@@ -63,15 +58,12 @@ const StyledButtonMinor = styled(Button)`
           background: var(--colorsActionMinor600);
         }
       `}
-    `;
-}}
+    `}
     
-    ${_ref3 => {
-  let {
-    isInPassword,
-    disabled
-  } = _ref3;
-  return isInPassword && !disabled && css`
+    ${({
+  isInPassword,
+  disabled
+}) => isInPassword && !disabled && css`
       ${StyledIcon} {
         color: var(--colorsUtilityMajor300);
       }
@@ -83,14 +75,11 @@ const StyledButtonMinor = styled(Button)`
         color: var(--colorsActionMinor500);
         background: transparent;
       }
-    `;
-}}
+    `}
 
-  ${_ref4 => {
-  let {
-    size
-  } = _ref4;
-  return css`
+  ${({
+  size
+}) => css`
     ${size === "small" && `
       min-height: var(--sizing400);
       padding: var(--spacing000) var(--spacing100) var(--spacing000)
@@ -106,7 +95,6 @@ const StyledButtonMinor = styled(Button)`
       padding-left: var(--spacing200);
       padding-right: var(--spacing200);
     `}
-  `;
-}}
+  `}
 `;
 export default StyledButtonMinor;

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

@@ -20,31 +20,30 @@ export const ButtonToggleGroupContext = /*#__PURE__*/createContext({
   allowDeselect: false,
   isInGroup: false
 });
-const ButtonToggleGroup = _ref => {
-  let {
-    children,
-    fieldHelp,
-    fieldHelpInline,
-    "aria-label": ariaLabel,
-    label,
-    labelHelp,
-    labelSpacing,
-    inputWidth,
-    fullWidth,
-    labelInline,
-    labelWidth,
-    labelAlign,
-    name,
-    onChange,
-    value,
-    "data-component": dataComponent = "button-toggle-group",
-    "data-element": dataElement,
-    "data-role": dataRole,
-    helpAriaLabel,
-    id,
-    allowDeselect,
-    ...props
-  } = _ref;
+const ButtonToggleGroup = ({
+  children,
+  fieldHelp,
+  fieldHelpInline,
+  "aria-label": ariaLabel,
+  label,
+  labelHelp,
+  labelSpacing,
+  inputWidth,
+  fullWidth,
+  labelInline,
+  labelWidth,
+  labelAlign,
+  name,
+  onChange,
+  value,
+  "data-component": dataComponent = "button-toggle-group",
+  "data-element": dataElement,
+  "data-role": dataRole,
+  helpAriaLabel,
+  id,
+  allowDeselect,
+  ...props
+}) => {
   const hasCorrectItemStructure = useMemo(() => {
     const incorrectChild = React.Children.toArray(children).find(child => {
       return ! /*#__PURE__*/React.isValidElement(child) || child.type.displayName !== ButtonToggle.displayName;

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

@@ -3,14 +3,11 @@ import { margin } from "styled-system";
 import { baseTheme } from "../../../style/themes";
 import { StyledButtonToggle, StyledButtonToggleWrapper } from "../button-toggle.style";
 export const StyledButtonToggleGroupWrapper = styled.div`
-  ${_ref => {
-  let {
-    labelInline
-  } = _ref;
-  return labelInline && css`
+  ${({
+  labelInline
+}) => labelInline && css`
       display: flex;
-    `;
-}}
+    `}
 `;
 const StyledButtonToggleGroup = styled.div`
   ${margin}
@@ -35,28 +32,22 @@ const StyledButtonToggleGroup = styled.div`
     border-bottom-right-radius: var(--borderRadius400);
   }
 
-  ${_ref2 => {
-  let {
-    fullWidth
-  } = _ref2;
-  return fullWidth && css`
+  ${({
+  fullWidth
+}) => fullWidth && css`
       ${StyledButtonToggle} {
         width: 100%;
       }
       ${StyledButtonToggleWrapper} {
         flex: auto;
       }
-    `;
-}}
+    `}
 
-  ${_ref3 => {
-  let {
-    inputWidth
-  } = _ref3;
-  return inputWidth && css`
+  ${({
+  inputWidth
+}) => inputWidth && css`
       width: ${`${inputWidth}%`};
-    `;
-}}
+    `}
 `;
 StyledButtonToggleGroup.defaultProps = {
   theme: baseTheme