carbon-react 119.10.0 → 119.10.2

package/lib/components/pod/pod.style.js

@@ -18,18 +18,12 @@ const StyledPod = _styledComponents.default.div`
   display: flex;
   align-items: flex-start;
   width: 100%;
-  ${_ref => {
-  let {
-    internalEditButton
-  } = _ref;
-  return internalEditButton && "position: relative";
-}};
-  ${_ref2 => {
-  let {
-    height
-  } = _ref2;
-  return height && `height: ${height}`;
-}};
+  ${({
+  internalEditButton
+}) => internalEditButton && "position: relative"};
+  ${({
+  height
+}) => height && `height: ${height}`};
 
   &:focus {
     outline: none;
@@ -44,19 +38,17 @@ const blockBackgrounds = {
   tile: "var(--colorsUtilityYang100)"
 };
 const StyledBlock = _styledComponents.default.div`
-  ${_ref3 => {
-  let {
-    variant,
-    softDelete,
-    noBorder,
-    hasButtons,
-    contentTriggersEdit,
-    fullWidth,
-    internalEditButton,
-    isHovered,
-    isFocused
-  } = _ref3;
-  return (0, _styledComponents.css)`
+  ${({
+  variant,
+  softDelete,
+  noBorder,
+  hasButtons,
+  contentTriggersEdit,
+  fullWidth,
+  internalEditButton,
+  isHovered,
+  isFocused
+}) => (0, _styledComponents.css)`
       box-sizing: border-box;
       border-radius: var(--borderRadius100);
       display: flex;
@@ -102,8 +94,7 @@ const StyledBlock = _styledComponents.default.div`
           color: var(--colorsUtilityYin065);
         }
       `};
-    `;
-}}
+    `}
 `;
 exports.StyledBlock = StyledBlock;
 const contentPaddings = {
@@ -115,12 +106,9 @@ const contentPaddings = {
 };
 const StyledContent = _styledComponents.default.div`
   text-align: left;
-  padding: ${_ref4 => {
-  let {
-    size
-  } = _ref4;
-  return contentPaddings[size];
-}};
+  padding: ${({
+  size
+}) => contentPaddings[size]};
   flex-grow: 1;
 `;
 exports.StyledContent = StyledContent;
@@ -132,13 +120,11 @@ const footerPaddings = {
   "extra-large": "24px 40px"
 };
 const StyledFooter = _styledComponents.default.div`
-  ${_ref5 => {
-  let {
-    variant,
-    size,
-    softDelete
-  } = _ref5;
-  return (0, _styledComponents.css)`
+  ${({
+  variant,
+  size,
+  softDelete
+}) => (0, _styledComponents.css)`
     background-color: var(--colorsUtilityMajor025);
     border-bottom-left-radius: var(--borderRadius100);
     border-bottom-right-radius: var(--borderRadius100);
@@ -149,25 +135,21 @@ const StyledFooter = _styledComponents.default.div`
     ${softDelete && `color: var(--colorsUtilityYin055)`};
 
     ${variant === "tile" && `border-top: 1px solid var(--colorsUtilityMajor100)`};
-  `;
-}}
+  `}
 `;
 exports.StyledFooter = StyledFooter;
 const StyledActionsContainer = _styledComponents.default.div`
   display: flex;
   flex-direction: column;
 
-  ${_ref6 => {
-  let {
-    internalEditButton
-  } = _ref6;
-  return internalEditButton && (0, _styledComponents.css)`
+  ${({
+  internalEditButton
+}) => internalEditButton && (0, _styledComponents.css)`
       position: absolute;
       right: 2px;
       top: 2px;
       z-index: 10;
-    `;
-}}
+    `}
 `;
 exports.StyledActionsContainer = StyledActionsContainer;
 const actionButtonSizes = {
@@ -186,17 +168,15 @@ const actionButtonBackgrounds = {
 };
 const StyledEditAction = _styledComponents.default.a`
   && {
-    ${_ref7 => {
-  let {
-    displayOnlyOnHover,
-    isHovered,
-    isFocused,
-    variant,
-    size,
-    internalEditButton,
-    noBorder
-  } = _ref7;
-  return (0, _styledComponents.css)`
+    ${({
+  displayOnlyOnHover,
+  isHovered,
+  isFocused,
+  variant,
+  size,
+  internalEditButton,
+  noBorder
+}) => (0, _styledComponents.css)`
       cursor: pointer;
       background-color: ${actionButtonBackgrounds[variant]};
       border: 1px solid var(--colorsActionMinor200);
@@ -239,8 +219,7 @@ const StyledEditAction = _styledComponents.default.a`
         outline: 3px solid var(--colorsSemanticFocus500);
         border: none;
       `};
-    `;
-}};
+    `};
   }
 
   ${_link.StyledContent} {
@@ -251,16 +230,14 @@ const StyledEditAction = _styledComponents.default.a`
 exports.StyledEditAction = StyledEditAction;
 const StyledDeleteButton = (0, _styledComponents.default)(_iconButton.default)`
   && {
-    ${_ref8 => {
-  let {
-    noBorder,
-    internalEditButton,
-    isHovered,
-    isFocused,
-    variant,
-    size
-  } = _ref8;
-  return (0, _styledComponents.css)`
+    ${({
+  noBorder,
+  internalEditButton,
+  isHovered,
+  isFocused,
+  variant,
+  size
+}) => (0, _styledComponents.css)`
       cursor: pointer;
       background-color: ${actionButtonBackgrounds[variant]};
       border: ${noBorder ? "none" : "1px solid var(--colorsActionMinor200)"};
@@ -296,23 +273,20 @@ const StyledDeleteButton = (0, _styledComponents.default)(_iconButton.default)`
         outline: 3px solid var(--colorsSemanticFocus500);
         border: none;
       `};
-    `;
-}}
+    `}
   }
 `;
 exports.StyledDeleteButton = StyledDeleteButton;
 const StyledUndoButton = (0, _styledComponents.default)(_iconButton.default)`
   && {
-    ${_ref9 => {
-  let {
-    isHovered,
-    isFocused,
-    variant,
-    size,
-    noBorder,
-    internalEditButton
-  } = _ref9;
-  return (0, _styledComponents.css)`
+    ${({
+  isHovered,
+  isFocused,
+  variant,
+  size,
+  noBorder,
+  internalEditButton
+}) => (0, _styledComponents.css)`
       cursor: pointer;
       background-color: ${actionButtonBackgrounds[variant]};
       border: 1px solid var(--colorsActionMinor200);
@@ -350,8 +324,7 @@ const StyledUndoButton = (0, _styledComponents.default)(_iconButton.default)`
         outline: 3px solid var(--colorsSemanticFocus500);
         border: none;
       `};
-    `;
-}}
+    `}
   }
 `;
 exports.StyledUndoButton = StyledUndoButton;
@@ -363,21 +336,18 @@ const headerRightAlignMargins = {
   "extra-large": 30
 };
 const StyledHeader = _styledComponents.default.div`
-  ${_ref10 => {
-  let {
-    alignTitle,
-    internalEditButton,
-    size
-  } = _ref10;
-  return (0, _styledComponents.css)`
+  ${({
+  alignTitle,
+  internalEditButton,
+  size
+}) => (0, _styledComponents.css)`
     margin-bottom: 24px;
     text-align: ${alignTitle};
 
     ${alignTitle === "right" && internalEditButton && (0, _styledComponents.css)`
       margin-right: ${headerRightAlignMargins[size]}px;
     `};
-  `;
-}}
+  `}
 `;
 exports.StyledHeader = StyledHeader;
 const StyledSubtitle = _styledComponents.default.h5`

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

@@ -18,77 +18,67 @@ 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 renderOpen = _ref => {
-  let {
-    tabIndex,
-    onClick,
-    "data-element": dataElement,
-    ref,
-    "aria-label": ariaLabel,
-    id,
-    "aria-expanded": ariaExpanded,
-    "aria-haspopup": ariaHasPopup
-  } = _ref;
-  return /*#__PURE__*/_react.default.createElement(_popoverContainer.PopoverContainerOpenIcon, {
-    tabIndex: tabIndex,
-    onClick: onClick,
-    "data-element": dataElement,
-    ref: ref,
-    "aria-label": ariaLabel,
-    "aria-haspopup": ariaHasPopup,
-    "aria-expanded": ariaExpanded,
-    id: id
-  }, /*#__PURE__*/_react.default.createElement(_icon.default, {
-    type: "settings"
-  }));
-};
+const renderOpen = ({
+  tabIndex,
+  onClick,
+  "data-element": dataElement,
+  ref,
+  "aria-label": ariaLabel,
+  id,
+  "aria-expanded": ariaExpanded,
+  "aria-haspopup": ariaHasPopup
+}) => /*#__PURE__*/_react.default.createElement(_popoverContainer.PopoverContainerOpenIcon, {
+  tabIndex: tabIndex,
+  onClick: onClick,
+  "data-element": dataElement,
+  ref: ref,
+  "aria-label": ariaLabel,
+  "aria-haspopup": ariaHasPopup,
+  "aria-expanded": ariaExpanded,
+  id: id
+}, /*#__PURE__*/_react.default.createElement(_icon.default, {
+  type: "settings"
+}));
 exports.renderOpen = renderOpen;
-const renderClose = _ref2 => {
-  let {
-    "data-element": dataElement,
-    tabIndex,
-    onClick,
-    ref,
-    "aria-label": ariaLabel
-  } = _ref2;
-  return /*#__PURE__*/_react.default.createElement(_popoverContainer.PopoverContainerCloseIcon, {
-    "data-element": dataElement,
-    tabIndex: tabIndex,
-    onClick: onClick,
-    ref: ref,
-    "aria-label": ariaLabel
-  }, /*#__PURE__*/_react.default.createElement(_icon.default, {
-    type: "close"
-  }));
-};
+const renderClose = ({
+  "data-element": dataElement,
+  tabIndex,
+  onClick,
+  ref,
+  "aria-label": ariaLabel
+}) => /*#__PURE__*/_react.default.createElement(_popoverContainer.PopoverContainerCloseIcon, {
+  "data-element": dataElement,
+  tabIndex: tabIndex,
+  onClick: onClick,
+  ref: ref,
+  "aria-label": ariaLabel
+}, /*#__PURE__*/_react.default.createElement(_icon.default, {
+  type: "close"
+}));
 exports.renderClose = renderClose;
-const popoverMiddleware = [(0, _dom.offset)(_ref3 => {
-  let {
-    rects
-  } = _ref3;
-  return {
-    mainAxis: -rects.reference.height
-  };
-}), (0, _dom.flip)({
+const popoverMiddleware = [(0, _dom.offset)(({
+  rects
+}) => ({
+  mainAxis: -rects.reference.height
+})), (0, _dom.flip)({
   fallbackStrategy: "initialPlacement"
 })];
-const PopoverContainer = _ref4 => {
-  let {
-    children,
-    title,
-    position = "right",
-    open,
-    onOpen,
-    onClose,
-    renderOpenComponent = renderOpen,
-    renderCloseComponent = renderClose,
-    shouldCoverButton = false,
-    ariaDescribedBy,
-    openButtonAriaLabel,
-    closeButtonAriaLabel = "close",
-    containerAriaLabel,
-    ...rest
-  } = _ref4;
+const PopoverContainer = ({
+  children,
+  title,
+  position = "right",
+  open,
+  onOpen,
+  onClose,
+  renderOpenComponent = renderOpen,
+  renderCloseComponent = renderClose,
+  shouldCoverButton = false,
+  ariaDescribedBy,
+  openButtonAriaLabel,
+  closeButtonAriaLabel = "close",
+  containerAriaLabel,
+  ...rest
+}) => {
   const isControlled = open !== undefined;
   const [isOpenInternal, setIsOpenInternal] = (0, _react.useState)(false);
   const closeButtonRef = (0, _react.useRef)(null);

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

@@ -30,17 +30,13 @@ const PopoverContainerContentStyle = _styledComponents.default.div`
   box-shadow: var(--boxShadow100);
   min-width: 300px;
   position: absolute;
-  z-index: ${_ref => {
-  let {
-    theme
-  } = _ref;
-  return theme.zIndex.popover;
-}};
+  z-index: ${({
+  theme
+}) => theme.zIndex.popover};
 
-  ${_ref2 => {
-  let {
-    animationState
-  } = _ref2;
+  ${({
+  animationState
+}) => {
   switch (animationState) {
     case "entering":
       return `

package/lib/components/portal/portal.js

@@ -13,13 +13,12 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 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 PortalContext = /*#__PURE__*/_react.default.createContext({});
 exports.PortalContext = PortalContext;
-const Portal = _ref => {
-  let {
-    children,
-    className,
-    id,
-    onReposition
-  } = _ref;
+const Portal = ({
+  children,
+  className,
+  id,
+  onReposition
+}) => {
   const [portalNode, setPortalNode] = (0, _react.useState)(null);
   const uniqueId = (0, _react.useMemo)(() => (0, _guid.default)(), []);
   const {

package/lib/components/portrait/portrait-gravatar.component.js

@@ -10,14 +10,13 @@ var _md = _interopRequireDefault(require("crypto-js/md5"));
 var _portrait = require("./portrait.style");
 var _portrait2 = require("./portrait.config");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-const PortraitGravatar = _ref => {
-  let {
-    gravatarEmail,
-    size,
-    alt,
-    shape = "circle",
-    errorCallback
-  } = _ref;
+const PortraitGravatar = ({
+  gravatarEmail,
+  size,
+  alt,
+  shape = "circle",
+  errorCallback
+}) => {
   const gravatarSrc = () => {
     const {
       dimensions

package/lib/components/portrait/portrait-initials.component.js

@@ -12,14 +12,13 @@ var _portrait2 = require("./portrait.config");
 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 PortraitInitials = _ref => {
-  let {
-    initials,
-    size,
-    shape = "circle",
-    darkBackground,
-    alt
-  } = _ref;
+const PortraitInitials = ({
+  initials,
+  size,
+  shape = "circle",
+  darkBackground,
+  alt
+}) => {
   const [cachedImageDataUrl, setCachedImageDataUrl] = (0, _react.useState)();
   (0, _react.useEffect)(() => {
     setCachedImageDataUrl("");

package/lib/components/portrait/portrait.component.js

@@ -18,27 +18,26 @@ 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 Portrait = _ref => {
-  let {
-    alt = "",
-    darkBackground = false,
-    gravatar,
-    iconType = "individual",
-    initials,
-    shape,
-    size = "M",
-    src,
-    onClick,
-    tooltipMessage,
-    tooltipId,
-    tooltipIsVisible,
-    tooltipPosition,
-    tooltipType,
-    tooltipSize,
-    tooltipBgColor,
-    tooltipFontColor,
-    ...rest
-  } = _ref;
+const Portrait = ({
+  alt = "",
+  darkBackground = false,
+  gravatar,
+  iconType = "individual",
+  initials,
+  shape,
+  size = "M",
+  src,
+  onClick,
+  tooltipMessage,
+  tooltipId,
+  tooltipIsVisible,
+  tooltipPosition,
+  tooltipType,
+  tooltipSize,
+  tooltipBgColor,
+  tooltipFontColor,
+  ...rest
+}) => {
   const [externalError, setExternalError] = (0, _react.useState)(false);
   const {
     roundedCornersOptOut

package/lib/components/portrait/portrait.style.js

@@ -13,11 +13,10 @@ var _portrait = require("./portrait.config");
 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; }
-function stylingForSize(_ref) {
-  let {
-    size,
-    initials
-  } = _ref;
+function stylingForSize({
+  size,
+  initials
+}) {
   const params = _portrait.PORTRAIT_SIZE_PARAMS[size];
   if (initials) {
     return (0, _styledComponents.css)`
@@ -31,10 +30,9 @@ function stylingForSize(_ref) {
     height: ${params?.dimensions}px;
   `;
 }
-function stylingForShape(_ref2) {
-  let {
-    shape
-  } = _ref2;
+function stylingForShape({
+  shape
+}) {
   let cssString = "overflow: hidden;";
   if (shape === "square") cssString += "border-radius: 0px;";
   if (shape === "circle") cssString += "border-radius: var(--borderRadiusCircle);";
@@ -42,11 +40,10 @@ function stylingForShape(_ref2) {
     ${cssString}
   `;
 }
-function stylingForIcon(_ref3) {
-  let {
-    size,
-    darkBackground
-  } = _ref3;
+function stylingForIcon({
+  size,
+  darkBackground
+}) {
   const params = _portrait.PORTRAIT_SIZE_PARAMS[size];
   let color = "var(--colorsUtilityMajor200)";
   let backgroundColor = "var(--colorsUtilityMajor025)";
@@ -112,23 +109,17 @@ const StyledIcon = (0, _styledComponents.default)(_icon.default)`
     ${stylingForSize}
     ${stylingForIcon}
     ${stylingForShape}
-    border: 1px dashed ${_ref4 => {
-  let {
-    darkBackground
-  } = _ref4;
-  return darkBackground ? "var(--colorsUtilityMajorTransparent)" : "var(--colorsUtilityMajor200)";
-}};
+    border: 1px dashed ${({
+  darkBackground
+}) => darkBackground ? "var(--colorsUtilityMajorTransparent)" : "var(--colorsUtilityMajor200)"};
   }
 `;
 exports.StyledIcon = StyledIcon;
 const StyledPortraitContainer = _styledComponents.default.div`
   display: inline-block;
-  ${_ref5 => {
-  let {
-    onClick
-  } = _ref5;
-  return onClick && "cursor: pointer";
-}}
+  ${({
+  onClick
+}) => onClick && "cursor: pointer"}
   ${_styledSystem.margin}
 `;
 exports.StyledPortraitContainer = StyledPortraitContainer;

package/lib/components/preview/__internal__/preview-placeholder.component.js

@@ -10,14 +10,13 @@ var _tags = _interopRequireDefault(require("../../../__internal__/utils/helpers/
 var _previewPlaceholder = require("./preview-placeholder.style");
 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 PreviewPlaceholder = _ref => {
-  let {
-    height,
-    index,
-    lines,
-    width,
-    ...props
-  } = _ref;
+const PreviewPlaceholder = ({
+  height,
+  index,
+  lines,
+  width,
+  ...props
+}) => {
   const isLastLine = lines > 1 && lines === index;
   return /*#__PURE__*/_react.default.createElement(_previewPlaceholder.StyledPreviewPlaceholder, _extends({
     height: height,

package/lib/components/preview/__internal__/preview-placeholder.style.js

@@ -16,19 +16,13 @@ const StyledPreviewPlaceholder = _styledComponents.default.span`
   animation: ${shimmer} 2s ease infinite;
   background: var(--colorsUtilityMajor150);
   display: block;
-  height: ${_ref => {
-  let {
-    height
-  } = _ref;
-  return height || "15px";
-}};
+  height: ${({
+  height
+}) => height || "15px"};
   opacity: 0.6;
-  width: ${_ref2 => {
-  let {
-    width
-  } = _ref2;
-  return width || "100%";
-}};
+  width: ${({
+  width
+}) => width || "100%"};
 
   & + & {
     margin-top: 3px;