carbon-react 119.9.3 → 119.10.1

package/lib/components/pager/pager.component.js

@@ -16,41 +16,40 @@ 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 Pager = _ref => {
-  let {
-    currentPage = 1,
-    hideDisabledElements = false,
-    interactivePageNumber = true,
-    pageSizeSelectionOptions = [{
-      id: "10",
-      name: 10
-    }, {
-      id: "25",
-      name: 25
-    }, {
-      id: "50",
-      name: 50
-    }, {
-      id: "100",
-      name: 100
-    }],
-    pageSize = 10,
-    showPageSizeSelection = false,
-    totalRecords = 0,
-    onPagination,
-    onNext,
-    onFirst,
-    onPrevious,
-    onLast,
-    showPageSizeLabelBefore = true,
-    showPageSizeLabelAfter = true,
-    showTotalRecords = true,
-    showFirstAndLastButtons = true,
-    showPreviousAndNextButtons = true,
-    showPageCount = true,
-    variant = "default",
-    ...rest
-  } = _ref;
+const Pager = ({
+  currentPage = 1,
+  hideDisabledElements = false,
+  interactivePageNumber = true,
+  pageSizeSelectionOptions = [{
+    id: "10",
+    name: 10
+  }, {
+    id: "25",
+    name: 25
+  }, {
+    id: "50",
+    name: 50
+  }, {
+    id: "100",
+    name: 100
+  }],
+  pageSize = 10,
+  showPageSizeSelection = false,
+  totalRecords = 0,
+  onPagination,
+  onNext,
+  onFirst,
+  onPrevious,
+  onLast,
+  showPageSizeLabelBefore = true,
+  showPageSizeLabelAfter = true,
+  showTotalRecords = true,
+  showFirstAndLastButtons = true,
+  showPreviousAndNextButtons = true,
+  showPageCount = true,
+  variant = "default",
+  ...rest
+}) => {
   const l = (0, _useLocale.default)();
   const [page, setPage] = (0, _react.useState)(+currentPage);
   const [currentPageSize, setCurrentPageSize] = (0, _react.useState)(+pageSize);
@@ -110,14 +109,16 @@ const Pager = _ref => {
   }, [onPagination]);
   const handleKeyDown = (0, _react.useCallback)(e => _events.default.isEnterKey(e) && handleOnPagination(e.target.value), [handleOnPagination]);
   const sizeSelector = () => {
-    return /*#__PURE__*/_react.default.createElement(_pager.StyledSelectContainer, null, /*#__PURE__*/_react.default.createElement(_select.Select, {
+    return /*#__PURE__*/_react.default.createElement(_pager.StyledSelectContainer, null, /*#__PURE__*/_react.default.createElement(_select.Select, _extends({
       value: String(value),
       onChange: ev => setValue(+ev.target.value),
       onBlur: () => setValue(currentPageSize),
       onKeyDown: handleKeyDown,
       "data-element": "page-select",
       id: pageSizeSelectId
-    }, pageSizeSelectionOptions.map(sizeOption => /*#__PURE__*/_react.default.createElement(_select.Option, {
+    }, !showPageSizeLabelBefore && !showPageSizeLabelAfter ? {
+      ariaLabel: l.pager.show()
+    } : {}), pageSizeSelectionOptions.map(sizeOption => /*#__PURE__*/_react.default.createElement(_select.Option, {
       key: sizeOption.id,
       text: sizeOption.id,
       value: String(sizeOption.name),
@@ -125,9 +126,10 @@ const Pager = _ref => {
     }))));
   };
   const renderPageSizeOptions = () => {
-    return showPageSizeSelection && /*#__PURE__*/_react.default.createElement(_pager.StyledPagerSizeOptionsInner, null, showPageSizeLabelBefore && /*#__PURE__*/_react.default.createElement("label", {
+    const wrapper = (isLabel, child) => isLabel ? /*#__PURE__*/_react.default.createElement("label", {
       htmlFor: pageSizeSelectId
-    }, l.pager.show()), sizeSelector(), showPageSizeLabelAfter && /*#__PURE__*/_react.default.createElement("div", null, l.pager.records(currentPageSize, false)));
+    }, child) : /*#__PURE__*/_react.default.createElement("div", null, child);
+    return showPageSizeSelection && /*#__PURE__*/_react.default.createElement(_pager.StyledPagerSizeOptionsInner, null, showPageSizeLabelBefore && wrapper(showPageSizeLabelBefore, l.pager.show()), sizeSelector(), showPageSizeLabelAfter && wrapper(!showPageSizeLabelBefore, l.pager.records(currentPageSize, false)));
   };
   const renderTotalRecords = () => showTotalRecords && l.pager.records(totalRecords);
   return /*#__PURE__*/_react.default.createElement(_pager.StyledPagerContainer, _extends({

package/lib/components/pager/pager.style.js

@@ -35,19 +35,16 @@ const StyledPagerContainer = _styledComponents.default.div`
   border-top: none;
   color: var(--colorsUtilityYin090);
 
-  ${_ref => {
-  let {
-    variant
-  } = _ref;
-  return (0, _styledComponents.css)`
+  ${({
+  variant
+}) => (0, _styledComponents.css)`
       border-width: 1px 1px 1px 1px;
       border-style: none solid solid solid;
       border-bottom-left-radius: var(--borderRadius100);
       border-bottom-right-radius: var(--borderRadius100);
       border-color: var(--colorsUtilityMajor100);
       background-color: ${variant === "alternate" ? "var(--colorsUtilityMajor040)" : "var(--colorsUtilityMajor010)"};
-    `;
-}}
+    `}
 `;
 exports.StyledPagerContainer = StyledPagerContainer;
 const StyledPagerSizeOptions = _styledComponents.default.div`
@@ -126,16 +123,13 @@ const StyledPagerLink = (0, _styledComponents.default)(_link.default)`
   margin-left: 7px;
   margin-right: 7px;
 
-  ${_ref2 => {
-  let {
-    hideDisabledButtons
-  } = _ref2;
-  return hideDisabledButtons && (0, _styledComponents.css)`
+  ${({
+  hideDisabledButtons
+}) => hideDisabledButtons && (0, _styledComponents.css)`
       & {
         visibility: hidden;
       }
-    `;
-}}
+    `}
 `;
 exports.StyledPagerLink = StyledPagerLink;
 const StyledPagerNoSelect = _styledComponents.default.div`

package/lib/components/pages/page/page.component.js

@@ -16,13 +16,12 @@ 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 Page = _ref => {
-  let {
-    role,
-    title,
-    children,
-    ...rest
-  } = _ref;
+const Page = ({
+  role,
+  title,
+  children,
+  ...rest
+}) => {
   const styledPageNodeRef = (0, _react.useRef)(null);
   const {
     transitionName

package/lib/components/pages/pages.component.js

@@ -22,14 +22,13 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 const NEXT = "next";
 const PREVIOUS = "previous";
 const TRANSITION_TIME = 500;
-const Pages = _ref => {
-  let {
-    pageIndex: incomingPageIndex,
-    initialpageIndex = 0,
-    transition = "slide",
-    children,
-    ...props
-  } = _ref;
+const Pages = ({
+  pageIndex: incomingPageIndex,
+  initialpageIndex = 0,
+  transition = "slide",
+  children,
+  ...props
+}) => {
   const [pageIndex, setPageIndex] = (0, _react.useState)(Number(incomingPageIndex) || Number(initialpageIndex));
   const transitionDirection = (0, _react.useRef)(NEXT);
   const transitionName = () => {

package/lib/components/password/password.component.js

@@ -15,13 +15,12 @@ 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 Password = _ref => {
-  let {
-    id,
-    disabled,
-    forceObscurity = false,
-    ...rest
-  } = _ref;
+const Password = ({
+  id,
+  disabled,
+  forceObscurity = false,
+  ...rest
+}) => {
   const internalInputId = (0, _react.useRef)(id || (0, _guid.default)());
   const l = (0, _useLocale.default)();
   const [passwordShown, setPasswordShown] = (0, _react.useState)(false);

package/lib/components/pill/pill.component.js

@@ -12,40 +12,37 @@ var _tags = _interopRequireDefault(require("../../__internal__/utils/helpers/tag
 var _iconButton = _interopRequireDefault(require("../icon-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 Pill = _ref => {
-  let {
-    wrapText,
-    borderColor,
-    colorVariant = "neutral",
-    children,
-    fill = false,
-    maxWidth,
-    onClick,
-    onDelete,
-    pillRole = "tag",
-    size = "M",
-    ariaLabelOfRemoveButton = "remove pill",
-    ...rest
-  } = _ref;
-  return /*#__PURE__*/_react.default.createElement(_pill.default, _extends({
-    inFill: fill,
-    colorVariant: colorVariant,
-    isDeletable: !!onDelete,
-    pillRole: pillRole,
-    size: size,
-    borderColor: borderColor,
-    onClick: onClick
-  }, (0, _tags.default)("pill", rest), {
-    maxWidth: maxWidth,
-    wrapText: wrapText
-  }, rest), children, onDelete && /*#__PURE__*/_react.default.createElement(_iconButton.default, {
-    onClick: onDelete,
-    "data-element": "close",
-    "aria-label": ariaLabelOfRemoveButton
-  }, /*#__PURE__*/_react.default.createElement(_icon.default, {
-    type: "cross"
-  })));
-};
+const Pill = ({
+  wrapText,
+  borderColor,
+  colorVariant = "neutral",
+  children,
+  fill = false,
+  maxWidth,
+  onClick,
+  onDelete,
+  pillRole = "tag",
+  size = "M",
+  ariaLabelOfRemoveButton = "remove pill",
+  ...rest
+}) => /*#__PURE__*/_react.default.createElement(_pill.default, _extends({
+  inFill: fill,
+  colorVariant: colorVariant,
+  isDeletable: !!onDelete,
+  pillRole: pillRole,
+  size: size,
+  borderColor: borderColor,
+  onClick: onClick
+}, (0, _tags.default)("pill", rest), {
+  maxWidth: maxWidth,
+  wrapText: wrapText
+}, rest), children, onDelete && /*#__PURE__*/_react.default.createElement(_iconButton.default, {
+  onClick: onDelete,
+  "data-element": "close",
+  "aria-label": ariaLabelOfRemoveButton
+}, /*#__PURE__*/_react.default.createElement(_icon.default, {
+  type: "cross"
+})));
 exports.Pill = Pill;
 var _default = Pill;
 exports.default = _default;

package/lib/components/pill/pill.style.js

@@ -26,18 +26,17 @@ function addStyleToPillIcon(fontSize) {
 }
 const StyledPill = _styledComponents.default.span`
   ${_styledSystem.margin}
-  ${_ref => {
-  let {
-    wrapText,
-    borderColor,
-    colorVariant,
-    isDeletable,
-    inFill,
-    maxWidth,
-    pillRole,
-    size,
-    theme
-  } = _ref;
+  ${({
+  wrapText,
+  borderColor,
+  colorVariant,
+  isDeletable,
+  inFill,
+  maxWidth,
+  pillRole,
+  size,
+  theme
+}) => {
   const isStatus = pillRole === "status";
   let pillColor;
   let buttonFocusColor;

package/lib/components/pod/pod.component.js

@@ -17,30 +17,29 @@ 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); }
 let deprecationOnEditStringWarnTriggered = false;
 let deprecationOnEditObjectWarnTriggered = false;
-const Pod = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
-  let {
-    "data-element": dataElement,
-    "data-role": dataRole,
-    alignTitle = "left",
-    border = true,
-    children,
-    className,
-    displayEditButtonOnHover,
-    editContentFullWidth,
-    footer,
-    height,
-    internalEditButton,
-    onDelete,
-    onEdit,
-    onUndo,
-    size = "medium",
-    softDelete,
-    subtitle,
-    title,
-    triggerEditOnContent,
-    variant = "primary",
-    ...rest
-  } = _ref;
+const Pod = /*#__PURE__*/_react.default.forwardRef(({
+  "data-element": dataElement,
+  "data-role": dataRole,
+  alignTitle = "left",
+  border = true,
+  children,
+  className,
+  displayEditButtonOnHover,
+  editContentFullWidth,
+  footer,
+  height,
+  internalEditButton,
+  onDelete,
+  onEdit,
+  onUndo,
+  size = "medium",
+  softDelete,
+  subtitle,
+  title,
+  triggerEditOnContent,
+  variant = "primary",
+  ...rest
+}, ref) => {
   if (!deprecationOnEditStringWarnTriggered && typeof onEdit === "string") {
     deprecationOnEditStringWarnTriggered = true;
     _logger.default.deprecate("Support for passing strings to the `onEdit` prop of the `Pod` component is now deprecated. Please only pass event handlers to `onEdit`.");

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`