carbon-react 119.9.3 → 119.10.1

package/lib/components/checkbox/checkbox.component.js

@@ -21,42 +21,41 @@ 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 deprecateInputRefWarnTriggered = false;
 let deprecateUncontrolledWarnTriggered = false;
-const Checkbox = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
-  let {
-    "aria-labelledby": ariaLabelledBy,
-    id,
-    label,
-    onChange,
-    name,
-    /* FIXME: FE-4102 */
-    onClick,
-    onBlur,
-    onFocus,
-    value,
-    fieldHelp,
-    autoFocus,
-    labelHelp,
-    labelSpacing = 1,
-    labelWidth,
-    adaptiveSpacingBreakpoint,
-    required,
-    error,
-    warning,
-    info,
-    fieldHelpInline,
-    reverse = false,
-    checked,
-    disabled,
-    inputWidth,
-    size,
-    tooltipPosition,
-    "data-component": dataComponent = "checkbox",
-    "data-element": dataElement,
-    "data-role": dataRole,
-    helpAriaLabel,
-    inputRef,
-    ...rest
-  } = _ref;
+const Checkbox = /*#__PURE__*/_react.default.forwardRef(({
+  "aria-labelledby": ariaLabelledBy,
+  id,
+  label,
+  onChange,
+  name,
+  /* FIXME: FE-4102 */
+  onClick,
+  onBlur,
+  onFocus,
+  value,
+  fieldHelp,
+  autoFocus,
+  labelHelp,
+  labelSpacing = 1,
+  labelWidth,
+  adaptiveSpacingBreakpoint,
+  required,
+  error,
+  warning,
+  info,
+  fieldHelpInline,
+  reverse = false,
+  checked,
+  disabled,
+  inputWidth,
+  size,
+  tooltipPosition,
+  "data-component": dataComponent = "checkbox",
+  "data-element": dataElement,
+  "data-role": dataRole,
+  helpAriaLabel,
+  inputRef,
+  ...rest
+}, ref) => {
   const {
     validationRedesignOptIn
   } = (0, _react.useContext)(_carbonProvider.NewValidationContext);
@@ -94,38 +93,42 @@ const Checkbox = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
     labelHelp,
     labelSpacing,
     required,
-    error: contextError || error,
-    warning: contextWarning || warning,
-    info: contextInfo || info,
     fieldHelpInline,
     checked,
     disabled,
     inputWidth,
     labelWidth,
-    tooltipPosition,
     ref: ref || inputRef,
     ...rest
   };
+  const validationProps = {
+    error: contextError || error,
+    warning: contextWarning || warning,
+    ...(validationRedesignOptIn ? {
+      validationOnLabel: false
+    } : {
+      info: contextInfo || info
+    })
+  };
   const marginProps = (0, _useFormSpacing.default)(rest);
-  return /*#__PURE__*/_react.default.createElement(_tooltipProvider.TooltipProvider, {
-    helpAriaLabel: helpAriaLabel,
-    tooltipPosition: tooltipPosition
-  }, /*#__PURE__*/_react.default.createElement(_checkbox.default, _extends({
+  const componentToRender = /*#__PURE__*/_react.default.createElement(_checkbox.default, _extends({
     "data-component": dataComponent,
     "data-role": dataRole,
     "data-element": dataElement,
     disabled: disabled,
     labelSpacing: labelSpacing,
     inputWidth: inputWidth,
-    adaptiveSpacingSmallScreen: adaptiveSpacingSmallScreen,
-    error: contextError || error,
-    warning: contextWarning || warning,
-    info: contextInfo || info,
+    adaptiveSpacingSmallScreen: adaptiveSpacingSmallScreen
+  }, validationProps, {
     fieldHelpInline: fieldHelpInline,
     reverse: reverse,
     size: size,
     applyNewValidation: validationRedesignOptIn
-  }, marginProps), /*#__PURE__*/_react.default.createElement(_checkableInput.default, inputProps, /*#__PURE__*/_react.default.createElement(_checkboxSvg.default, null))));
+  }, marginProps), /*#__PURE__*/_react.default.createElement(_checkableInput.default, _extends({}, inputProps, validationProps), /*#__PURE__*/_react.default.createElement(_checkboxSvg.default, null)));
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, validationRedesignOptIn ? componentToRender : /*#__PURE__*/_react.default.createElement(_tooltipProvider.TooltipProvider, {
+    helpAriaLabel: helpAriaLabel,
+    tooltipPosition: tooltipPosition
+  }, componentToRender));
 });
 exports.Checkbox = Checkbox;
 Checkbox.propTypes = {

package/lib/components/checkbox/checkbox.style.js

@@ -18,21 +18,19 @@ 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 StyledCheckbox = _styledComponents.default.div`
   ${_styledSystem.margin}
-  ${_ref => {
-  let {
-    disabled,
-    error,
-    warning,
-    info,
-    fieldHelpInline,
-    labelSpacing,
-    inputWidth,
-    reverse,
-    size,
-    adaptiveSpacingSmallScreen,
-    applyNewValidation
-  } = _ref;
-  return (0, _styledComponents.css)`
+  ${({
+  disabled,
+  error,
+  warning,
+  info,
+  fieldHelpInline,
+  labelSpacing,
+  inputWidth,
+  reverse,
+  size,
+  adaptiveSpacingSmallScreen,
+  applyNewValidation
+}) => (0, _styledComponents.css)`
     ${adaptiveSpacingSmallScreen && "margin-left: 0;"}
 
     ${_checkableInput.StyledCheckableInput} {
@@ -186,8 +184,7 @@ const StyledCheckbox = _styledComponents.default.div`
         }
       `}
     `}
-  `;
-}}
+  `}
 `;
 StyledCheckbox.defaultProps = {
   theme: _base.default

package/lib/components/confirm/confirm.component.js

@@ -18,35 +18,34 @@ 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 Confirm = _ref => {
-  let {
-    "aria-labelledby": ariaLabelledBy,
-    "aria-describedby": ariaDescribedBy,
-    "aria-label": ariaLabel,
-    open,
-    children,
-    cancelButtonDestructive = false,
-    confirmButtonDestructive = false,
-    cancelButtonType = "secondary",
-    confirmButtonType = "primary",
-    cancelButtonIconType,
-    cancelButtonIconPosition,
-    confirmButtonIconType,
-    confirmButtonIconPosition,
-    cancelLabel,
-    onCancel,
-    disableCancel,
-    onConfirm,
-    isLoadingConfirm,
-    disableConfirm,
-    confirmLabel,
-    iconType,
-    subtitle,
-    title,
-    size = "extra-small",
-    showCloseIcon = false,
-    ...rest
-  } = _ref;
+const Confirm = ({
+  "aria-labelledby": ariaLabelledBy,
+  "aria-describedby": ariaDescribedBy,
+  "aria-label": ariaLabel,
+  open,
+  children,
+  cancelButtonDestructive = false,
+  confirmButtonDestructive = false,
+  cancelButtonType = "secondary",
+  confirmButtonType = "primary",
+  cancelButtonIconType,
+  cancelButtonIconPosition,
+  confirmButtonIconType,
+  confirmButtonIconPosition,
+  cancelLabel,
+  onCancel,
+  disableCancel,
+  onConfirm,
+  isLoadingConfirm,
+  disableConfirm,
+  confirmLabel,
+  iconType,
+  subtitle,
+  title,
+  size = "extra-small",
+  showCloseIcon = false,
+  ...rest
+}) => {
   const l = (0, _useLocale.default)();
   const {
     current: titleId

package/lib/components/confirm/confirm.style.js

@@ -27,22 +27,16 @@ const StyledConfirmHeading = _styledComponents.default.div`
   ${_icon.default} {
     margin-right: 16px;
     margin-bottom: 20px;
-    ${_ref => {
-  let {
-    type
-  } = _ref;
-  return type === "warning" && (0, _styledComponents.css)`
+    ${({
+  type
+}) => type === "warning" && (0, _styledComponents.css)`
         color: var(--colorsSemanticCaution500);
-      `;
-}}
-    ${_ref2 => {
-  let {
-    type
-  } = _ref2;
-  return type === "error" && (0, _styledComponents.css)`
+      `}
+    ${({
+  type
+}) => type === "error" && (0, _styledComponents.css)`
         color: var(--colorsSemanticNegative500);
-      `;
-}}
+      `}
   }
 `;
 exports.StyledConfirmHeading = StyledConfirmHeading;

package/lib/components/content/content.component.js

@@ -9,17 +9,16 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 var _content = require("./content.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 Content = _ref => {
-  let {
-    variant = "primary",
-    children,
-    title,
-    inline = false,
-    align = "left",
-    titleWidth,
-    bodyFullWidth = false,
-    ...rest
-  } = _ref;
+const Content = ({
+  variant = "primary",
+  children,
+  title,
+  inline = false,
+  align = "left",
+  titleWidth,
+  bodyFullWidth = false,
+  ...rest
+}) => {
   return /*#__PURE__*/_react.default.createElement(_content.StyledContent, _extends({
     align: align,
     bodyFullWidth: bodyFullWidth

package/lib/components/content/content.style.js

@@ -10,12 +10,10 @@ var _themes = require("../../style/themes");
 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 StyledContent = _styledComponents.default.div`
-  ${_ref => {
-  let {
-    bodyFullWidth,
-    align
-  } = _ref;
-  return (0, _styledComponents.css)`
+  ${({
+  bodyFullWidth,
+  align
+}) => (0, _styledComponents.css)`
     ${_styledSystem.margin}
 
     & + & {
@@ -28,21 +26,19 @@ const StyledContent = _styledComponents.default.div`
     ${bodyFullWidth && (0, _styledComponents.css)`
       text-align: left;
     `}
-  `;
-}}
+  `}
 `;
 exports.StyledContent = StyledContent;
 StyledContent.defaultProps = {
   theme: _themes.baseTheme
 };
 const StyledContentTitle = _styledComponents.default.div`
-  ${_ref2 => {
-  let {
-    titleWidth,
-    inline,
-    variant,
-    align
-  } = _ref2;
+  ${({
+  titleWidth,
+  inline,
+  variant,
+  align
+}) => {
   return (0, _styledComponents.css)`
       display: ${inline ? "inline-block" : "block"};
       font-weight: bold;
@@ -63,13 +59,12 @@ const StyledContentTitle = _styledComponents.default.div`
 `;
 exports.StyledContentTitle = StyledContentTitle;
 const StyledContentBody = _styledComponents.default.div`
-  ${_ref3 => {
-  let {
-    bodyFullWidth,
-    titleWidth,
-    inline,
-    align
-  } = _ref3;
+  ${({
+  bodyFullWidth,
+  titleWidth,
+  inline,
+  align
+}) => {
   return (0, _styledComponents.css)`
       display: ${inline ? "inline-block" : "block"};
       margin-top: 2px;

package/lib/components/date/__internal__/date-formats/index.js

@@ -37,11 +37,10 @@ const getOutputFormatForLocale = localeCode => {
   };
   const formatter = new Intl.DateTimeFormat(localeCode);
   let separator = "";
-  const format = formatter.formatToParts(new Date()).map(_ref => {
-    let {
-      type,
-      value
-    } = _ref;
+  const format = formatter.formatToParts(new Date()).map(({
+    type,
+    value
+  }) => {
     if (["day", "month", "year"].includes(type)) {
       return formatMap[type];
     }
@@ -77,10 +76,9 @@ const getTrailingChar = format => {
   const lastChar = format.split("").pop();
   return ["y", "M", "d"].includes(lastChar) ? "" : lastChar;
 };
-const getFormatData = _ref2 => {
-  let {
-    code = "en-GB"
-  } = _ref2;
+const getFormatData = ({
+  code = "en-GB"
+}) => {
   if (["en-CA", "en-US"].includes(code)) {
     const format = "MM/dd/yyyy";
     const formats = getInputFormatsArrayForLocale(format);

package/lib/components/date/__internal__/date-picker/date-picker.component.js

@@ -23,18 +23,17 @@ function _extends() { _extends = Object.assign ? Object.assign.bind() : function
 const popoverMiddleware = [(0, _dom.offset)(3), (0, _dom.flip)({
   fallbackStrategy: "initialPlacement"
 })];
-const DatePicker = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
-  let {
-    inputElement,
-    minDate,
-    maxDate,
-    selectedDays,
-    disablePortal,
-    onDayClick,
-    pickerMouseDown,
-    pickerProps,
-    open
-  } = _ref;
+const DatePicker = /*#__PURE__*/_react.default.forwardRef(({
+  inputElement,
+  minDate,
+  maxDate,
+  selectedDays,
+  disablePortal,
+  onDayClick,
+  pickerMouseDown,
+  pickerProps,
+  open
+}, ref) => {
   const l = (0, _useLocale.default)();
   const {
     localize,

package/lib/components/date/__internal__/date-picker/day-picker.style.js

@@ -187,12 +187,9 @@ const StyledDayPicker = _styledComponents.default.div`
   position: absolute;
   height: 346px;
   width: 352px;
-  z-index: ${_ref => {
-  let {
-    theme
-  } = _ref;
-  return theme.zIndex.popover;
-}};
+  z-index: ${({
+  theme
+}) => theme.zIndex.popover};
 
   .DayPicker {
     z-index: 1000;

package/lib/components/date/__internal__/navbar/navbar.component.js

@@ -10,24 +10,21 @@ var _button = _interopRequireDefault(require("./button.style"));
 var _navbar = _interopRequireDefault(require("./navbar.style"));
 var _icon = _interopRequireDefault(require("../../../icon"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-const Navbar = _ref => {
-  let {
-    onPreviousClick,
-    onNextClick,
-    className
-  } = _ref;
-  return /*#__PURE__*/_react.default.createElement(_navbar.default, {
-    className: className
-  }, /*#__PURE__*/_react.default.createElement(_button.default, {
-    onClick: () => onPreviousClick?.()
-  }, /*#__PURE__*/_react.default.createElement(_icon.default, {
-    type: "chevron_left"
-  })), /*#__PURE__*/_react.default.createElement(_button.default, {
-    onClick: () => onNextClick?.()
-  }, /*#__PURE__*/_react.default.createElement(_icon.default, {
-    type: "chevron_right"
-  })));
-};
+const Navbar = ({
+  onPreviousClick,
+  onNextClick,
+  className
+}) => /*#__PURE__*/_react.default.createElement(_navbar.default, {
+  className: className
+}, /*#__PURE__*/_react.default.createElement(_button.default, {
+  onClick: () => onPreviousClick?.()
+}, /*#__PURE__*/_react.default.createElement(_icon.default, {
+  type: "chevron_left"
+})), /*#__PURE__*/_react.default.createElement(_button.default, {
+  onClick: () => onNextClick?.()
+}, /*#__PURE__*/_react.default.createElement(_icon.default, {
+  type: "chevron_right"
+})));
 exports.Navbar = Navbar;
 var _default = Navbar;
 exports.default = _default;

package/lib/components/date/__internal__/utils.js

@@ -140,9 +140,7 @@ function checkISOFormatAndLength(value) {
 /**
  * Returns the disabled array of days specified by props maxDate and minDate
  */
-function getDisabledDays() {
-  let minDate = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : "";
-  let maxDate = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : "";
+function getDisabledDays(minDate = "", maxDate = "") {
   const days = [];
   if (!minDate && !maxDate) {
     return undefined;

package/lib/components/date/__internal__/weekday/weekday.component.js

@@ -10,20 +10,17 @@ var _weekday = _interopRequireDefault(require("./weekday.style"));
 var _abbr = _interopRequireDefault(require("./abbr.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 Weekday = _ref => {
-  let {
-    className,
-    title,
-    children,
-    ...props
-  } = _ref;
-  return /*#__PURE__*/_react.default.createElement(_weekday.default, _extends({
-    className: className,
-    role: "columnheader"
-  }, props), /*#__PURE__*/_react.default.createElement(_abbr.default, {
-    title: title
-  }, children));
-};
+const Weekday = ({
+  className,
+  title,
+  children,
+  ...props
+}) => /*#__PURE__*/_react.default.createElement(_weekday.default, _extends({
+  className: className,
+  role: "columnheader"
+}, props), /*#__PURE__*/_react.default.createElement(_abbr.default, {
+  title: title
+}, children));
 exports.Weekday = Weekday;
 var _default = Weekday;
 exports.default = _default;

package/lib/components/date/date.component.js

@@ -23,37 +23,36 @@ 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; }
 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 deprecateInputRefWarnTriggered = false;
-const DateInput = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
-  let {
-    adaptiveLabelBreakpoint,
-    allowEmptyValue,
-    autoFocus,
-    "data-component": dataComponent,
-    "data-element": dataElement,
-    "data-role": dataRole,
-    disabled,
-    disablePortal = false,
-    helpAriaLabel,
-    labelInline,
-    minDate,
-    maxDate,
-    onBlur,
-    onChange,
-    onClick,
-    onFocus,
-    onKeyDown,
-    pickerProps = {},
-    readOnly,
-    size = "medium",
-    tooltipPosition,
-    value,
-    inputRef,
-    inputWidth,
-    labelWidth,
-    maxWidth,
-    inputName,
-    ...rest
-  } = _ref;
+const DateInput = /*#__PURE__*/_react.default.forwardRef(({
+  adaptiveLabelBreakpoint,
+  allowEmptyValue,
+  autoFocus,
+  "data-component": dataComponent,
+  "data-element": dataElement,
+  "data-role": dataRole,
+  disabled,
+  disablePortal = false,
+  helpAriaLabel,
+  labelInline,
+  minDate,
+  maxDate,
+  onBlur,
+  onChange,
+  onClick,
+  onFocus,
+  onKeyDown,
+  pickerProps = {},
+  readOnly,
+  size = "medium",
+  tooltipPosition,
+  value,
+  inputRef,
+  inputWidth,
+  labelWidth,
+  maxWidth,
+  inputName,
+  ...rest
+}, ref) => {
   const wrapperRef = (0, _react.useRef)(null);
   const parentRef = (0, _react.useRef)(null);
   const internalInputRef = (0, _react.useRef)(null);

package/lib/components/date/date.style.js

@@ -25,28 +25,23 @@ const StyledDateInput = _styledComponents.default.div`
 
   & ${_inputPresentation.default} {
     flex: none;
-    width: ${_ref => {
-  let {
-    inputWidth,
-    maxWidth,
-    size = "medium"
-  } = _ref;
-  return maxWidth || inputWidth ? "" : datePickerWidth[size];
-}};
+    width: ${({
+  inputWidth,
+  maxWidth,
+  size = "medium"
+}) => maxWidth || inputWidth ? "" : datePickerWidth[size]};
 
     ${_input.default} {
       margin-right: -8px;
     }
   }
 
-  ${_ref2 => {
-  let {
-    applyDateRangeStyling,
-    maxWidth,
-    size = "medium",
-    labelInline
-  } = _ref2;
-  return applyDateRangeStyling && !labelInline && (0, _styledComponents.css)`
+  ${({
+  applyDateRangeStyling,
+  maxWidth,
+  size = "medium",
+  labelInline
+}) => applyDateRangeStyling && !labelInline && (0, _styledComponents.css)`
       ${_formField.FieldLineStyle} {
         max-width: ${maxWidth || datePickerWidth[size]}};
       }
@@ -54,8 +49,7 @@ const StyledDateInput = _styledComponents.default.div`
       ${_validationMessage.default}, ${_label.default} {
         overflow-wrap: anywhere;
       }
-    `;
-}}
+    `}
 `;
 StyledDateInput.defaultProps = {
   theme: _base.default