carbon-react 119.9.3 → 119.10.1

package/esm/playwright/support/constants.d.ts

@@ -0,0 +1,25 @@
+export declare const SIZE: {
+    readonly EXTRASMALL: "extra-small";
+    readonly SMALL: "small";
+    readonly MEDIUMSMALL: "medium-small";
+    readonly MEDIUM: "medium";
+    readonly MEDIUMLARGE: "medium-large";
+    readonly LARGE: "large";
+    readonly EXTRALARGE: "extra-large";
+};
+export declare const VALIDATION: {
+    readonly ERROR: "rgb(203, 55, 74)";
+    readonly WARNING: "rgb(239, 103, 0)";
+    readonly INFO: "rgb(0, 96, 167)";
+};
+export declare const COLOR: {
+    readonly BLACK: "rgb(0, 0, 0)";
+    readonly RED: "rgb(205, 56, 75)";
+    readonly ORANGE: "rgb(255, 156, 75)";
+    readonly BROWN: "rgb(105, 61, 57)";
+};
+export declare const CHARACTERS: {
+    readonly DIACRITICS: "mp150ú¿¡üßä";
+    readonly SPECIALCHARACTERS: "!@#$%^*()_+-=~[];:.,?{}&\"'<>";
+    readonly STANDARD: "cypress_data";
+};

package/esm/playwright/support/helper.d.ts

@@ -0,0 +1,25 @@
+import type { Locator, Page } from "@playwright/test";
+/**
+ * Retrieve a computed style for an element.
+ * @param locator The Playwright locator to evaluate (see: https://playwright.dev/docs/locators)
+ * @param cssProp The CSS property for the style to retrieve
+ * @returns a Promise for the style value
+ * @example await getStyle(locator, "width");
+ */
+export declare const getStyle: (locator: Locator, cssProp: string) => Promise<string>;
+/**
+ * Check the accessibility rules for an element.
+ * @param {Page} page
+ * @example await checkAccessibility(page);
+ */
+export declare const checkAccessibility: (page: Page) => Promise<void>;
+declare type OutlineType = "outline" | "border" | "border-top" | "border-bottom" | "border-left" | "border-right";
+/**
+ * Asserts if an element has the correct golden outline used as a focus indicator
+ * @param element Target element as a Playwright locator
+ * @param outlinePixelWidth
+ * @param outline
+ * @example await checkGoldenOutline(locator);
+ */
+export declare const checkGoldenOutline: (element: Locator, outlinePixelWidth?: string, outline?: OutlineType) => Promise<void>;
+export {};

package/esm/src/components/badge/components.test-pw.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+import { BadgeProps } from "./badge.component";
+declare const BadgeComponent: (props: Partial<BadgeProps>) => React.JSX.Element;
+export default BadgeComponent;

package/esm/src/components/breadcrumbs/breadcrumbs.pw.d.ts

@@ -0,0 +1 @@
+export {};

package/esm/src/components/breadcrumbs/components.test-pw.d.ts

@@ -0,0 +1,6 @@
+import React from "react";
+import { BreadcrumbsProps } from ".";
+import { CrumbProps } from "./crumb";
+declare const Default: (props: Partial<BreadcrumbsProps>) => React.JSX.Element;
+declare const DefaultCrumb: (props: Partial<CrumbProps>) => React.JSX.Element;
+export { Default, DefaultCrumb };

package/esm/src/components/button-bar/button-bar.pw.d.ts

@@ -0,0 +1 @@
+export {};

package/esm/src/components/button-bar/components.test-pw.d.ts

@@ -0,0 +1,7 @@
+import React from "react";
+import { ButtonBarProps } from ".";
+declare const DefaultWithWrapper: (args: Partial<ButtonBarProps>) => React.JSX.Element;
+declare const ButtonBarWithMinorButtonChildren: () => React.JSX.Element;
+declare const Default: (args: Partial<ButtonBarProps>) => React.JSX.Element;
+declare const DefaultWithButtonMinor: (args: Partial<ButtonBarProps>) => React.JSX.Element;
+export { Default, DefaultWithWrapper, ButtonBarWithMinorButtonChildren, DefaultWithButtonMinor, };

package/{lib → esm/src}/components/checkbox/checkbox-group.component.d.ts

@@ -4,6 +4,8 @@ import { ValidationProps } from "../../__internal__/validations";
 export interface CheckboxGroupProps extends ValidationProps, MarginProps {
     /** The content for the CheckboxGroup Legend */
     legend?: string;
+    /** The content for the CheckboxGroup Legend Help text  */
+    legendHelp?: string;
     /** When true, legend is placed inline with the checkboxes */
     legendInline?: boolean;
     /** Percentage width of legend (only when legend is inline)  */
@@ -20,6 +22,8 @@ export interface CheckboxGroupProps extends ValidationProps, MarginProps {
     required?: boolean;
     /** Overrides the default tooltip */
     tooltipPosition?: "top" | "bottom" | "left" | "right";
+    /** When true, Checkboxes are in line */
+    inline?: boolean;
 }
 export declare const CheckboxGroupContext: React.Context<ValidationProps>;
 export declare const CheckboxGroup: {

package/{lib → esm/src}/components/checkbox/checkbox-group.style.d.ts

@@ -1,4 +1,6 @@
+export declare const StyledHintText: import("styled-components").StyledComponent<"div", any, {}, never>;
 declare const StyledCheckboxGroup: import("styled-components").StyledComponent<"div", any, {
     legendInline?: boolean | undefined;
+    inline?: boolean | undefined;
 }, never>;
 export default StyledCheckboxGroup;

package/esm/src/components/loader/components.test-pw.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+import { LoaderProps } from ".";
+declare const LoaderInsideButton: (props: LoaderProps) => React.JSX.Element;
+export default LoaderInsideButton;

package/esm/src/components/loader/loader.config.d.ts

@@ -0,0 +1 @@
+export declare const LOADER_SIZES: readonly ["small", "medium", "large"];

package/esm/src/components/loader/loader.pw.d.ts

@@ -0,0 +1 @@
+export {};

package/esm/{components → src/components}/select/__internal__/select-text/select-text.component.d.ts

@@ -15,7 +15,6 @@ export interface SelectTextProps {
     /** Callback function for when the Select Textbox is focused. */
     onFocus?: (ev: React.FocusEvent<HTMLElement>) => void;
     /** Callback function for when the key is pressed when focused on Select Text. */
-    onKeyDown?: (ev: React.KeyboardEvent<HTMLElement>) => void;
     /** Callback function for when the left mouse key is pressed when focused on Select Text. */
     onMouseDown?: (ev: React.MouseEvent<HTMLElement>) => void;
     /** Placeholder string to be displayed when formattedValue is empty */
@@ -24,10 +23,8 @@ export interface SelectTextProps {
     readOnly?: boolean;
     /** If true the component has no border and a transparent background */
     transparent?: boolean;
-    /** Id of the Select Text element */
-    textId?: string;
     /** Component size */
     size?: "small" | "medium" | "large";
 }
-declare const SelectText: ({ disabled, formattedValue, onClick, onKeyDown, onMouseDown, placeholder, readOnly, textId, transparent, size, }: SelectTextProps) => React.JSX.Element;
+declare const SelectText: ({ disabled, formattedValue, onClick, onMouseDown, placeholder, readOnly, transparent, size, }: SelectTextProps) => React.JSX.Element;
 export default SelectText;

package/{lib → esm/src}/components/select/option/option.component.d.ts

@@ -6,9 +6,9 @@ export interface OptionProps extends Omit<React.InputHTMLAttributes<HTMLLIElemen
      * Will use a randomly generated GUID if none is provided.
      */
     id?: string;
-    /** The option's visible text, displayed within <Textbox> of <Select>, and used for filtering */
+    /** The option's visible text, displayed within `<Textbox>` of `<Select>`, and used for filtering */
     text: string;
-    /** Optional: alternative rendered content, displayed within <SelectList> of <Select> (eg: an icon, an image, etc) */
+    /** Optional: alternative rendered content, displayed within `<SelectList>` of `<Select>` (eg: an icon, an image, etc) */
     children?: React.ReactNode;
     /** The option's invisible internal value */
     value: string | Record<string, unknown>;

package/esm/style/design-tokens/carbon-scoped-tokens-provider/carbon-scoped-tokens-provider.component.js

@@ -14,12 +14,9 @@ const CarbonScopedTokensProvider = styled.div`
   width: auto;
   display: inline;
 
-  ${_ref => {
-  let {
-    theme
-  } = _ref;
-  return generateCssVariables(theme.compatibility, theme.roundedCornersOptOut);
-}}
+  ${({
+  theme
+}) => generateCssVariables(theme.compatibility, theme.roundedCornersOptOut)}
 `;
 CarbonScopedTokensProvider.defaultProps = {
   theme: baseTheme

package/esm/style/design-tokens/debug-theme.util.js

@@ -10,8 +10,7 @@ import mint from "../themes/mint";
  *
  */
 
-const debugTheme = themeProperties => Object.fromEntries(Object.entries(themeProperties).map(_ref => {
-  let [key, value] = _ref;
+const debugTheme = themeProperties => Object.fromEntries(Object.entries(themeProperties).map(([key, value]) => {
   if (typeof value === "string" && (value.startsWith("#") || value.startsWith("rgb") || value.startsWith("rgba") || value.startsWith("hsl") || value.startsWith("hsla"))) {
     return [key, `rgba(255, 20, 147, .2)`];
   }

package/esm/style/design-tokens/generate-css-variables.util.js

@@ -7,8 +7,7 @@
  *
  */
 
-export default ((theme, roundedCornersOptOupt) => Object.entries(theme).map(_ref => {
-  let [key, value] = _ref;
+export default ((theme, roundedCornersOptOupt) => Object.entries(theme).map(([key, value]) => {
   if (roundedCornersOptOupt && key.startsWith("borderRadius") && key !== "borderRadiusCircle") {
     return `--${key}: 0px;`;
   }

package/esm/style/palette/index.js

@@ -1,15 +1,12 @@
 import tint from "../utils/tint";
 import shade from "../utils/shade";
-const cachedFunc = cb => function () {
-  let cache = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-  return weight => {
-    if (cache[weight]) {
-      return cache[weight];
-    }
-    const color = cb(weight);
-    cache[weight] = color;
-    return color;
-  };
+const cachedFunc = cb => (cache = {}) => weight => {
+  if (cache[weight]) {
+    return cache[weight];
+  }
+  const color = cb(weight);
+  cache[weight] = color;
+  return color;
 };
 
 /**

package/esm/style/utils/color.js

@@ -40,13 +40,12 @@ export const toColor = (theme, color) => {
   }
   return color;
 };
-export default (_ref => {
-  let {
-    color,
-    bg,
-    backgroundColor,
-    ...rest
-  } = _ref;
+export default (({
+  color,
+  bg,
+  backgroundColor,
+  ...rest
+}) => {
   const obj = {};
   obj.color = color ? toColor(rest.theme, color) : undefined;
   obj.bg = bg || backgroundColor ? toColor(rest.theme, bg || backgroundColor) : undefined;

package/esm/style/utils/filter-out-styled-system-spacing-props.js

@@ -1,7 +1,4 @@
 import { marginPropertyNames } from "./filter-styled-system-margin-props";
 import { paddingPropertyNames } from "./filter-styled-system-padding-props";
-const filterOutStyledSystemSpacingProps = props => Object.fromEntries(Object.entries(props).filter(_ref => {
-  let [key] = _ref;
-  return ![...marginPropertyNames, ...paddingPropertyNames].includes(key);
-}));
+const filterOutStyledSystemSpacingProps = props => Object.fromEntries(Object.entries(props).filter(([key]) => ![...marginPropertyNames, ...paddingPropertyNames].includes(key)));
 export default filterOutStyledSystemSpacingProps;

package/esm/style/utils/form-style-utils.js

@@ -56,8 +56,7 @@ export const calculateWidthValue = props => {
   const paddingValue = `(${paddingLeft ?? `${HORIZONTAL_PADDING}px`} + ${paddingRight ?? `${HORIZONTAL_PADDING}px`})`;
   return `width: calc(100% + ${paddingValue});`;
 };
-export const calculateFormSpacingValues = function (props, isFormContent) {
-  let containerComponent = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : "dialog";
+export const calculateFormSpacingValues = (props, isFormContent, containerComponent = "dialog") => {
   const {
     paddingTop,
     paddingBottom,

package/esm/style/utils/merge-deep.js

@@ -4,10 +4,7 @@
 export function isObject(item) {
   return item && typeof item === "object" && !Array.isArray(item);
 }
-function merge(_target) {
-  for (var _len = arguments.length, _sources = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
-    _sources[_key - 1] = arguments[_key];
-  }
+function merge(_target, ..._sources) {
   if (!_sources.length) return _target;
   const source = _sources.shift();
   if (isObject(_target) && isObject(source)) {
@@ -27,11 +24,8 @@ function merge(_target) {
 /**
  * Deep merge two objects.
  */
-export function mergeDeep(target) {
+export function mergeDeep(target, ...sources) {
   // ensure function is not mutative
   const newTarget = JSON.parse(JSON.stringify(target));
-  for (var _len2 = arguments.length, sources = new Array(_len2 > 1 ? _len2 - 1 : 0), _key2 = 1; _key2 < _len2; _key2++) {
-    sources[_key2 - 1] = arguments[_key2];
-  }
   return merge(newTarget, ...sources);
 }

package/esm/style/utils/mix.js

@@ -1,10 +1,7 @@
 const decToHex = decimal => decimal.toString(16);
 const hexToDec = hex => parseInt(hex, 16);
 const isShortHex = hex => hex.length === 3;
-const processHexes = function () {
-  for (var _len = arguments.length, hexes = new Array(_len), _key = 0; _key < _len; _key++) {
-    hexes[_key] = arguments[_key];
-  }
+const processHexes = (...hexes) => {
   return hexes.map(hex => hex.replace(/#/, "")).map(hex => {
     return isShortHex(hex) ? hex.repeat(2) : hex;
   });
@@ -13,8 +10,7 @@ const processHexes = function () {
 /**
  * A Javascript implementation of the Sass `mix` mixin.
  */
-export default (function (inputColorA, inputColorB) {
-  let weight = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 50;
+export default ((inputColorA, inputColorB, weight = 50) => {
   const [colorA, colorB] = processHexes(inputColorA, inputColorB);
   const colorAPairs = colorA.match(/.{1,2}/g);
   const colorBPairs = colorB.match(/.{1,2}/g);

package/esm/style/utils/width.js

@@ -7,11 +7,8 @@ import { layout } from "styled-system";
  * That's why the purpose of this function is to pass only the`width` prop to the `layout` function.
  */
 
-export default (_ref => {
-  let {
-    width
-  } = _ref;
-  return layout({
-    width
-  });
-});
+export default (({
+  width
+}) => layout({
+  width
+}));

package/lib/__internal__/character-count/character-count.component.js

@@ -9,13 +9,12 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 var _characterCount = _interopRequireDefault(require("./character-count.style"));
 var _useLocale = _interopRequireDefault(require("../../hooks/__internal__/useLocale"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-const CharacterCount = _ref => {
-  let {
-    value,
-    limit,
-    isOverLimit,
-    "data-element": dataElement
-  } = _ref;
+const CharacterCount = ({
+  value,
+  limit,
+  isOverLimit,
+  "data-element": dataElement
+}) => {
   const limitMinusValue = +limit - +value;
   const valueMinusLimit = +value - +limit;
   const l = (0, _useLocale.default)();

package/lib/__internal__/character-count/character-count.style.js

@@ -14,21 +14,15 @@ const StyledCharacterCount = _styledComponents.default.div`
   font-size: 12px;
   margin-top: 4px;
   margin-bottom: 4px;
-  color: ${_ref => {
-  let {
-    isOverLimit
-  } = _ref;
-  return isOverLimit ? "var(--colorsSemanticNegative500)" : "var(--colorsUtilityYin055)";
-}};
+  color: ${({
+  isOverLimit
+}) => isOverLimit ? "var(--colorsSemanticNegative500)" : "var(--colorsUtilityYin055)"};
 
-  ${_ref2 => {
-  let {
-    isOverLimit
-  } = _ref2;
-  return isOverLimit && (0, _styledComponents.css)`
+  ${({
+  isOverLimit
+}) => isOverLimit && (0, _styledComponents.css)`
       font-weight: 700;
-    `;
-}}
+    `}
 `;
 StyledCharacterCount.defaultProps = {
   theme: _base.default

package/lib/__internal__/checkable-input/checkable-input.component.js

@@ -16,38 +16,37 @@ 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 CheckableInput = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
-  let {
-    ariaLabelledBy,
-    autoFocus,
-    checked,
-    children,
-    disabled,
-    loading,
-    error,
-    fieldHelp,
-    fieldHelpInline,
-    info,
-    id: inputId,
-    type,
-    value,
-    inputWidth,
-    label,
-    labelAlign,
-    labelHelp,
-    labelInline = true,
-    labelSpacing = 1,
-    labelWidth,
-    name,
-    onBlur,
-    onChange,
-    onFocus,
-    required,
-    reverse = false,
-    validationOnLabel,
-    warning,
-    ...props
-  } = _ref;
+const CheckableInput = /*#__PURE__*/_react.default.forwardRef(({
+  ariaLabelledBy,
+  autoFocus,
+  checked,
+  children,
+  disabled,
+  loading,
+  error,
+  fieldHelp,
+  fieldHelpInline,
+  info,
+  id: inputId,
+  type,
+  value,
+  inputWidth,
+  label,
+  labelAlign,
+  labelHelp,
+  labelInline = true,
+  labelSpacing = 1,
+  labelWidth,
+  name,
+  onBlur,
+  onChange,
+  onFocus,
+  required,
+  reverse = false,
+  validationOnLabel,
+  warning,
+  ...props
+}, ref) => {
   const {
     current: id
   } = (0, _react.useRef)(inputId || (0, _guid.default)());

package/lib/__internal__/checkable-input/checkable-input.style.js

@@ -20,16 +20,14 @@ const StyledCheckableInput = _styledComponents.default.div`
 `;
 exports.StyledCheckableInput = StyledCheckableInput;
 const StyledCheckableInputWrapper = _styledComponents.default.div`
-  ${_ref => {
-  let {
-    disabled,
-    fieldHelpInline,
-    inputWidth,
-    labelWidth,
-    labelInline,
-    reverse
-  } = _ref;
-  return (0, _styledComponents.css)`
+  ${({
+  disabled,
+  fieldHelpInline,
+  inputWidth,
+  labelWidth,
+  labelInline,
+  reverse
+}) => (0, _styledComponents.css)`
     ${_formField.FieldLineStyle} {
       display: flex;
     }
@@ -106,7 +104,6 @@ const StyledCheckableInputWrapper = _styledComponents.default.div`
         width: ${labelWidth}% !important;
       }
     `}
-  `;
-}}
+  `}
 `;
 exports.StyledCheckableInputWrapper = StyledCheckableInputWrapper;

package/lib/__internal__/checkable-input/hidden-checkable-input.component.js

@@ -12,20 +12,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 HiddenCheckableInput = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
-  let {
-    ariaDescribedBy,
-    ariaLabelledBy,
-    name,
-    checked,
-    type,
-    value,
-    onChange,
-    autoFocus,
-    role,
-    validationIconId,
-    ...props
-  } = _ref;
+const HiddenCheckableInput = /*#__PURE__*/_react.default.forwardRef(({
+  ariaDescribedBy,
+  ariaLabelledBy,
+  name,
+  checked,
+  type,
+  value,
+  onChange,
+  autoFocus,
+  role,
+  validationIconId,
+  ...props
+}, ref) => {
   const {
     onBlur,
     onFocus,

package/lib/__internal__/field-help/field-help.component.js

@@ -8,20 +8,17 @@ var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _fieldHelp = _interopRequireDefault(require("./field-help.style"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-const FieldHelp = _ref => {
-  let {
-    children,
-    labelInline,
-    labelWidth = 30,
-    id
-  } = _ref;
-  return /*#__PURE__*/_react.default.createElement(_fieldHelp.default, {
-    "data-element": "help",
-    labelInline: labelInline,
-    labelWidth: labelWidth,
-    id: id
-  }, children);
-};
+const FieldHelp = ({
+  children,
+  labelInline,
+  labelWidth = 30,
+  id
+}) => /*#__PURE__*/_react.default.createElement(_fieldHelp.default, {
+  "data-element": "help",
+  labelInline: labelInline,
+  labelWidth: labelWidth,
+  id: id
+}, children);
 exports.FieldHelp = FieldHelp;
 var _default = FieldHelp;
 exports.default = _default;

package/lib/__internal__/field-help/field-help.style.js

@@ -13,16 +13,13 @@ const StyledFieldHelp = _styledComponents.default.span`
   margin-top: 8px;
   white-space: pre-wrap;
 
-  ${_ref => {
-  let {
-    labelInline,
-    labelWidth
-  } = _ref;
-  return labelInline && (0, _styledComponents.css)`
+  ${({
+  labelInline,
+  labelWidth
+}) => labelInline && (0, _styledComponents.css)`
       margin-left: ${labelWidth}%;
       padding-left: 0;
-    `;
-}}
+    `}
 `;
 var _default = StyledFieldHelp;
 exports.default = _default;