carbon-react 111.12.3 → 111.12.4

package/esm/components/flat-table/flat-table-row-header/flat-table-row-header.component.js

@@ -1,4 +1,5 @@
 function _extends() { _extends = Object.assign || 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); }
+
 import React, { useCallback } from "react";
 import PropTypes from "prop-types";
 import styledSystemPropTypes from "@styled-system/prop-types";
@@ -6,6 +7,7 @@ import { filterStyledSystemPaddingProps } from "../../../style/utils";
 import Icon from "../../icon";
 import { StyledFlatTableRowHeader, StyledFlatTableRowHeaderContent } from "./flat-table-row-header.style";
 const paddingPropTypes = filterStyledSystemPaddingProps(styledSystemPropTypes.space);
+
 const FlatTableRowHeader = ({
   align = "left",
   children,
@@ -51,44 +53,57 @@ const FlatTableRowHeader = ({
     mr: "8px"
   }), children));
 };
+
 FlatTableRowHeader.propTypes = {
   /** Styled system padding props */
   ...paddingPropTypes,
+
   /** Content alignment */
   align: PropTypes.oneOf(["center", "left", "right"]),
   children: PropTypes.oneOfType([PropTypes.node, PropTypes.string]),
+
   /** Column width, pass a number to set a fixed width in pixels */
   width: PropTypes.number,
+
   /** Truncate cell content and add ellipsis to any text that overflows */
   truncate: PropTypes.bool,
+
   /** Title text to display if cell content truncates */
   title: PropTypes.string,
+
   /**
    * @private
    * @ignore
    */
   expandable: PropTypes.bool,
+
   /**
    * @private
    * @ignore
    */
   onClick: PropTypes.func,
+
   /**
    * @private
    * @ignore
    */
   onKeyDown: PropTypes.func,
+
   /** Sets a custom vertical right border */
   verticalBorder: PropTypes.oneOf(["small", "medium", "large"]),
+
   /** Sets a vertical right border color, provide design token, any color from palette or any valid css color value. */
   verticalBorderColor: PropTypes.string,
+
   /** Defines whether the column should be sticky on the left or right hand side of the Table */
   stickyAlignment: PropTypes.oneOf(["left", "right"]),
+
   /**
    * @private
    * @ignore
    */
   leftPosition: PropTypes.number,
+
   /**
    * @private
    * @ignore

package/esm/components/flat-table/flat-table.component.js

@@ -1,4 +1,5 @@
 function _extends() { _extends = Object.assign || 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); }
+
 import React from "react";
 import PropTypes from "prop-types";
 import styledSystemPropTypes from "@styled-system/prop-types";
@@ -7,6 +8,7 @@ import { DrawerSidebarContext } from "../drawer";
 import { filterStyledSystemMarginProps } from "../../style/utils";
 export const FlatTableThemeContext = /*#__PURE__*/React.createContext({});
 const marginPropTypes = filterStyledSystemMarginProps(styledSystemPropTypes.space);
+
 const FlatTable = ({
   caption,
   children,
@@ -30,9 +32,11 @@ const FlatTable = ({
     isZebra,
     size
   };
+
   if (ariaDescribedby) {
     tableStylingProps["aria-describedby"] = ariaDescribedby;
   }
+
   return /*#__PURE__*/React.createElement(DrawerSidebarContext.Consumer, null, ({
     isInSidebar
   }) => /*#__PURE__*/React.createElement(StyledFlatTableWrapper, _extends({
@@ -65,34 +69,48 @@ const FlatTable = ({
     hasStickyFooter: hasStickyFooter
   }, footer)));
 };
-FlatTable.propTypes = {
-  ...marginPropTypes,
+
+FlatTable.propTypes = { ...marginPropTypes,
+
   /** The HTML id of the element that contains a description of this table. */
   ariaDescribedby: PropTypes.string,
+
   /** A string to render as the table's caption */
   caption: PropTypes.string,
+
   /** FlatTableHead and FlatTableBody */
   children: PropTypes.node.isRequired,
+
   /** If true, the header does not scroll with the content */
   hasStickyHead: PropTypes.bool,
+
   /** `FlatTable` color theme */
   colorTheme: PropTypes.oneOf(["light", "transparent-base", "transparent-white", "dark"]),
+
   /** Content to be rendered at the foot of the table */
   footer: PropTypes.node,
+
   /** If true, the header does not scroll with the content */
   hasStickyFooter: PropTypes.bool,
+
   /** Set the height of the table. String can be any valid CSS string, numbers will be converted to pixels. */
   height: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+
   /** Set the min-height of the table. A string can be any valid CSS string, numbers will be converted to pixels. */
   minHeight: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+
   /** Toggles the zebra striping for the table rows */
   isZebra: PropTypes.bool,
+
   /** Used to define the tables size Renders as: 'compact', 'small', 'medium', 'large' and 'extraLarge' */
   size: PropTypes.oneOf(["compact", "small", "medium", "large", "extraLarge"]),
+
   /** Applies max-height of 100% to FlatTable if true */
   hasMaxHeight: PropTypes.bool,
+
   /** Set the overflow X of the table wrapper. Any valid CSS string */
   overflowX: PropTypes.string,
+
   /** Width of the table. Any valid CSS string */
   width: PropTypes.string
 };

package/esm/components/flat-table/flat-table.style.js

@@ -127,6 +127,7 @@ const StyledFlatTableWrapper = styled(Box)`
             border-left-color: var(--colorsUtilityMajor150);
           }
         `;
+
     case "transparent-base":
       return css`
           ${StyledFlatTableHeader},
@@ -142,6 +143,7 @@ const StyledFlatTableWrapper = styled(Box)`
             border-left-color: var(--colorsUtilityMajor025);
           }
         `;
+
     case "transparent-white":
       return css`
           ${StyledFlatTableHeader},
@@ -158,6 +160,7 @@ const StyledFlatTableWrapper = styled(Box)`
           }
         `;
     // default theme is "dark"
+
     default:
       return css`
           ${StyledFlatTableHead} ${StyledFlatTableCheckbox},

package/esm/components/flat-table/sort/sort.component.js

@@ -4,19 +4,23 @@ import Event from "../../../__internal__/utils/helpers/events";
 import Icon from "../../icon";
 import { StyledSort, StyledSpaceHolder } from "./sort.style";
 import guid from "../../../__internal__/utils/helpers/guid";
+
 const Sort = ({
   children,
   onClick,
   sortType
 }) => {
   const id = useRef(guid());
+
   const onKeyDown = e => {
     if (Event.isEnterOrSpaceKey(e)) {
       e.preventDefault();
       return onClick();
     }
+
     return null;
   };
+
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("span", {
     hidden: true,
     id: id.current
@@ -33,11 +37,14 @@ const Sort = ({
     color: "--colorsUtilityMajor200"
   })), !sortType && /*#__PURE__*/React.createElement(StyledSpaceHolder, null));
 };
+
 Sort.propTypes = {
   /** if `asc` it will show `sort_up` icon, if `desc` it will show `sort_down` */
   sortType: PropTypes.oneOf(["ascending", "descending", false]),
+
   /** Callback fired when the `FlatTableSortHeader` is clicked */
   onClick: PropTypes.func,
+
   /** The content of `FlatTableSortHeader` */
   children: PropTypes.node
 };

package/esm/components/form/__internal__/form-summary.component.js

@@ -1,9 +1,11 @@
 function _extends() { _extends = Object.assign || 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); }
+
 import React, { useMemo } from "react";
 import PropTypes from "prop-types";
 import { StyledFormSummary, StyledInternalSummary, StyledMessagePrefix } from "./form-summary.style";
 import Icon from "../../icon";
 import useLocale from "../../../hooks/__internal__/useLocale";
+
 const Summary = ({
   type,
   errorCount = 0,
@@ -15,6 +17,7 @@ const Summary = ({
     warningCount
   };
   const message = useMemo(() => l.errors.messages.formSummary(errorCount, warningCount, type), [l.errors.messages, errorCount, warningCount, type]);
+
   if (messages[`${type}Count`]) {
     return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(StyledMessagePrefix, null, message === null || message === void 0 ? void 0 : message[0]), /*#__PURE__*/React.createElement(StyledInternalSummary, {
       type: type,
@@ -23,14 +26,17 @@ const Summary = ({
       type: type
     }), /*#__PURE__*/React.createElement("span", null, message === null || message === void 0 ? void 0 : message[1])));
   }
+
   return null;
 };
+
 Summary.propTypes = {
   "errorCount": PropTypes.number,
   "type": PropTypes.oneOf(["error", "warning"]).isRequired,
   "warningCount": PropTypes.number
 };
 export { Summary };
+
 const FormSummary = ({
   fullWidth,
   ...props
@@ -45,6 +51,7 @@ const FormSummary = ({
     type: "warning"
   }, props)), props.children);
 };
+
 FormSummary.propTypes = {
   "children": PropTypes.node,
   "errorCount": PropTypes.number,

package/esm/components/form/form.component.js

@@ -1,10 +1,12 @@
 function _extends() { _extends = Object.assign || 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); }
+
 import React, { useRef, useContext } from "react";
 import PropTypes from "prop-types";
 import { SidebarContext } from "../sidebar/sidebar.component";
 import { ModalContext } from "../modal/modal.component";
 import FormSummary from "./__internal__/form-summary.component";
 import { StyledForm, StyledFormContent, StyledFormFooter, StyledLeftButtons, StyledRightButtons, StyledFullWidthButtons } from "./form.style";
+
 const Form = ({
   children,
   saveButton,
@@ -76,6 +78,7 @@ const Form = ({
     warningCount: warningCount
   }, saveButton))));
 };
+
 Form.propTypes = {
   "buttonAlignment": PropTypes.oneOf(["left", "right"]),
   "children": PropTypes.node,

package/esm/components/form/form.style.js

@@ -57,6 +57,7 @@ export const StyledFormFooter = styled.div`
     `}
   `}
 `;
+
 const formBottomMargins = fieldSpacing => ({
   0: "var(--spacing000)",
   1: "var(--spacing100)",
@@ -66,9 +67,9 @@ const formBottomMargins = fieldSpacing => ({
   5: "var(--spacing500)",
   6: "var(--spacing600)",
   7: "var(--spacing700)"
-})[fieldSpacing];
+})[fieldSpacing]; // Accounts for height of the header of Modal parent, the height form footer and some additional spacing
+
 
-// Accounts for height of the header of Modal parent, the height form footer and some additional spacing
 const HEIGHT_SPACING = 216;
 export const StyledForm = styled.form`
   ${space}

package/esm/components/global-header/global-header.component.js

@@ -1,4 +1,5 @@
 function _extends() { _extends = Object.assign || 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); }
+
 import React from "react";
 import PropTypes from "prop-types";
 import styled, { css } from "styled-components";
@@ -8,7 +9,9 @@ import Box from "../box";
 const StyledGlobalHeader = styled(StyledNavigationBar).attrs(({
   theme
 }) => ({
-  theme: theme || /* istanbul ignore next */baseTheme
+  theme: theme ||
+  /* istanbul ignore next */
+  baseTheme
 }))`
   ${({
   theme
@@ -36,6 +39,7 @@ const StyledLogo = styled(Box)`
     margin-left: var(--spacing500);
   }
 `;
+
 const GlobalHeader = ({
   children,
   logo,
@@ -52,6 +56,7 @@ const GlobalHeader = ({
     "data-element": "global-header-logo-wrapper"
   }, logo), children);
 };
+
 GlobalHeader.propTypes = {
   "alignContent": PropTypes.oneOfType([PropTypes.oneOf(["-moz-initial", "baseline", "center", "end", "flex-end", "flex-start", "inherit", "initial", "normal", "revert", "space-around", "space-between", "space-evenly", "start", "stretch", "unset"]), PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf(["-moz-initial", "baseline", "center", "end", "flex-end", "flex-start", "inherit", "initial", "normal", "revert", "space-around", "space-between", "space-evenly", "start", "stretch", "unset", null]), PropTypes.shape({
     "__@iterator": PropTypes.func.isRequired,

package/esm/components/grid/grid-container/grid-container.component.js

@@ -1,10 +1,13 @@
 function _extends() { _extends = Object.assign || 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); }
+
 import React from "react";
 import PropTypes from "prop-types";
 import StyledGridContainer from "./grid-container.style";
+
 const GridContainer = props => /*#__PURE__*/React.createElement(StyledGridContainer, _extends({
   "data-component": "grid"
 }, props));
+
 GridContainer.propTypes = {
   "about": PropTypes.string,
   "accessKey": PropTypes.string,
@@ -64,6 +67,9 @@ GridContainer.propTypes = {
   "color": PropTypes.string,
   "contentEditable": PropTypes.oneOfType([PropTypes.oneOf(["false", "inherit", "true"]), PropTypes.bool]),
   "contextMenu": PropTypes.string,
+  "css": PropTypes.oneOfType([PropTypes.func, PropTypes.number, PropTypes.object, PropTypes.shape({
+    "__emotion_styles": PropTypes.any.isRequired
+  }), PropTypes.string, PropTypes.bool]),
   "dangerouslySetInnerHTML": PropTypes.shape({
     "__html": PropTypes.string.isRequired
   }),

package/esm/components/grid/grid-item/grid-item.component.js

@@ -1,7 +1,9 @@
 function _extends() { _extends = Object.assign || 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); }
+
 import React from "react";
 import PropTypes from "prop-types";
 import StyledGridItem from "./grid-item.style";
+
 const GridItem = props => {
   const {
     children,
@@ -12,6 +14,7 @@ const GridItem = props => {
     responsiveSettings: responsiveSettings
   }), children);
 };
+
 GridItem.propTypes = {
   "about": PropTypes.string,
   "accessKey": PropTypes.string,
@@ -72,6 +75,9 @@ GridItem.propTypes = {
   "color": PropTypes.string,
   "contentEditable": PropTypes.oneOfType([PropTypes.oneOf(["false", "inherit", "true"]), PropTypes.bool]),
   "contextMenu": PropTypes.string,
+  "css": PropTypes.oneOfType([PropTypes.func, PropTypes.number, PropTypes.object, PropTypes.shape({
+    "__emotion_styles": PropTypes.any.isRequired
+  }), PropTypes.string, PropTypes.bool]),
   "dangerouslySetInnerHTML": PropTypes.shape({
     "__html": PropTypes.string.isRequired
   }),

package/esm/components/grid/grid-item/grid-item.style.js

@@ -5,32 +5,45 @@ export function getSpacing(prop) {
     switch (prop) {
       case 0:
         return "var(--spacing000)";
+
       case 1:
         return "var(--spacing100)";
+
       case 2:
         return "var(--spacing200)";
+
       case 3:
         return "var(--spacing300)";
+
       case 4:
         return "var(--spacing400)";
+
       case 5:
         return "var(--spacing500)";
+
       case 6:
         return "var(--spacing600)";
+
       case 7:
         return "var(--spacing700)";
+
       case 8:
         return "var(--spacing800)";
+
       case 9:
         return "var(--spacing900)";
+
       case 10:
         return "var(--spacing1000)";
+
       default:
         return "var(--spacing100)";
     }
   }
+
   return String(prop);
 }
+
 function responsiveGridItem(responsiveSettings) {
   return responsiveSettings.map(setting => {
     const {
@@ -62,6 +75,7 @@ function responsiveGridItem(responsiveSettings) {
     `;
   });
 }
+
 const StyledGridItem = styled.div`
   margin: 0;
   ${padding}

package/esm/components/grouped-character/grouped-character.component.js

@@ -1,8 +1,10 @@
 function _extends() { _extends = Object.assign || 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); }
+
 import React, { useState } from "react";
 import PropTypes from "prop-types";
 import Textbox from "../textbox";
 import { generateGroups, toSum } from "./grouped-character.utils";
+
 const buildCustomTarget = ({
   target
 }, value) => {
@@ -10,8 +12,7 @@ const buildCustomTarget = ({
     name,
     id
   } = target;
-  return {
-    ...(name && {
+  return { ...(name && {
       name
     }),
     ...(id && {
@@ -20,6 +21,7 @@ const buildCustomTarget = ({
     value
   };
 };
+
 const GroupedCharacter = ({
   defaultValue,
   groups,
@@ -34,9 +36,13 @@ const GroupedCharacter = ({
   const separator = rawSeparator.substring(0, 1); // Ensure max length is 1
 
   const maxRawLength = groups.reduce(toSum);
+
   const formatValue = val => generateGroups(groups, val).join(separator);
+
   const sanitizeValue = val => val.split(separator).join("").substring(0, maxRawLength);
+
   const value = isControlled ? externalValue : internalValue;
+
   const handleChange = ev => {
     const {
       target
@@ -49,6 +55,7 @@ const GroupedCharacter = ({
     const formattedValue = formatValue(rawValue);
     const isLastPosition = target.value.length === newCursorPos;
     const isAtOneBeyondSeparator = formattedValue[newCursorPos - 1] === separator;
+
     if (isLastPosition) {
       const targetValSeparatorCount = target.value.split(separator).length - 1;
       const formatValSeparatorCount = formattedValue.split(separator).length - 1;
@@ -58,17 +65,21 @@ const GroupedCharacter = ({
       const isDeleting = value.length > rawValue.length;
       newCursorPos += isDeleting ? -1 : 1;
     }
+
     const modifiedEvent = ev;
     modifiedEvent.target = buildCustomTarget(ev, {
       rawValue,
       formattedValue
     });
     onChange === null || onChange === void 0 ? void 0 : onChange(modifiedEvent);
+
     if (!isControlled) {
       setInternalValue(rawValue);
     }
+
     setTimeout(() => target.setSelectionRange(newCursorPos, newCursorPos));
   };
+
   const handleBlur = ev => {
     if (onBlur) {
       const {
@@ -84,18 +95,21 @@ const GroupedCharacter = ({
       onBlur(modifiedEvent);
     }
   };
+
   const handleKeyPress = ev => {
     const {
       selectionStart,
       selectionEnd
     } = ev.target;
-
     /* istanbul ignore next */
+
     const hasSelection = (selectionEnd ?? 0) - (selectionStart ?? 0) > 0;
+
     if (maxRawLength === value.length && !hasSelection) {
       ev.preventDefault();
     }
   };
+
   return /*#__PURE__*/React.createElement(Textbox, _extends({}, rest, {
     value: value,
     formattedValue: formatValue(value),
@@ -104,6 +118,7 @@ const GroupedCharacter = ({
     onKeyPress: handleKeyPress
   }));
 };
+
 GroupedCharacter.propTypes = {
   "about": PropTypes.string,
   "accept": PropTypes.string,
@@ -173,6 +188,9 @@ GroupedCharacter.propTypes = {
   "contentEditable": PropTypes.oneOfType([PropTypes.oneOf(["false", "inherit", "true"]), PropTypes.bool]),
   "contextMenu": PropTypes.string,
   "crossOrigin": PropTypes.string,
+  "css": PropTypes.oneOfType([PropTypes.func, PropTypes.number, PropTypes.object, PropTypes.shape({
+    "__emotion_styles": PropTypes.any.isRequired
+  }), PropTypes.string, PropTypes.bool]),
   "dangerouslySetInnerHTML": PropTypes.shape({
     "__html": PropTypes.string.isRequired
   }),

package/esm/components/heading/heading.component.js

@@ -1,10 +1,12 @@
 function _extends() { _extends = Object.assign || 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); }
+
 import React from "react";
 import PropTypes from "prop-types";
 import { filterStyledSystemMarginProps } from "../../style/utils";
 import tagComponent from "../../__internal__/utils/helpers/tags/tags";
 import { StyledHeading, StyledHeadingIcon, StyledSubHeader, StyledHeader, StyledSeparator, StyledHeaderHelp, StyledHeadingTitle, StyledDivider, StyledHeaderContent, StyledHeadingBackButton, StyledHeadingPills } from "./heading.style";
 import useLocale from "../../hooks/__internal__/useLocale";
+
 const Heading = ({
   children,
   backLink,
@@ -28,15 +30,16 @@ const Heading = ({
       ariaLabel: helpAriaLabel
     }, help);
   };
+
   const l = useLocale();
+
   const getBackButton = () => {
     const backButtonProps = typeof backLink === "string" ? {
       href: backLink
     } : {
       onClick: backLink
     };
-    return /*#__PURE__*/React.createElement(StyledHeadingBackButton
-    // this event allows an element to be focusable on click event on IE
+    return /*#__PURE__*/React.createElement(StyledHeadingBackButton // this event allows an element to be focusable on click event on IE
     , _extends({
       "aria-label": l.heading.backLinkAriaLabel(),
       "data-element": "back",
@@ -45,6 +48,7 @@ const Heading = ({
       type: "chevron_left"
     }));
   };
+
   const getSubheader = () => {
     return /*#__PURE__*/React.createElement(StyledSubHeader, {
       "data-element": "subtitle",
@@ -53,11 +57,13 @@ const Heading = ({
       hasSeparator: separator
     }, subheader);
   };
+
   const getPills = () => {
     return /*#__PURE__*/React.createElement(StyledHeadingPills, {
       "data-element": "pills"
     }, pills);
   };
+
   const marginProps = filterStyledSystemMarginProps(rest);
   const dataAttributes = {
     "data-element": rest["data-element"],
@@ -77,6 +83,7 @@ const Heading = ({
     "data-element": "divider"
   }), children) : null;
 };
+
 Heading.propTypes = {
   "backLink": PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
   "children": PropTypes.node,

package/esm/components/help/help.component.js

@@ -1,4 +1,5 @@
 function _extends() { _extends = Object.assign || 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); }
+
 import React, { useContext, useEffect, useRef, useState } from "react";
 import PropTypes from "prop-types";
 import Icon from "../icon";
@@ -8,6 +9,7 @@ import Events from "../../__internal__/utils/helpers/events";
 import { TooltipContext } from "../../__internal__/tooltip-provider";
 import { filterStyledSystemMarginProps } from "../../style/utils";
 import guid from "../../__internal__/utils/helpers/guid";
+
 const Help = ({
   as,
   ariaLabel = "help",
@@ -35,21 +37,25 @@ const Help = ({
     function handleKeyPress(ev) {
       if (Events.isEscKey(ev)) {
         var _helpElement$current;
+
         helpElement === null || helpElement === void 0 ? void 0 : (_helpElement$current = helpElement.current) === null || _helpElement$current === void 0 ? void 0 : _helpElement$current.blur();
         updateTooltipVisible(false);
       }
     }
+
     document.addEventListener("keydown", handleKeyPress);
     return function cleanup() {
       document.removeEventListener("keydown", handleKeyPress);
     };
   });
   const tagType = as || href && "a" || "div";
+
   function handleFocusBlur(isVisible) {
     return () => {
       updateTooltipVisible(isVisible);
     };
   }
+
   return /*#__PURE__*/React.createElement(StyledHelp, _extends({
     "aria-describedby": isFocused || isTooltipVisible ? tooltipId || defaultTooltipId.current : undefined,
     "aria-label": helpAriaLabel || ariaLabel,
@@ -60,6 +66,7 @@ const Help = ({
     ref: helpElement,
     onClick: () => {
       var _helpElement$current2;
+
       helpElement === null || helpElement === void 0 ? void 0 : (_helpElement$current2 = helpElement.current) === null || _helpElement$current2 === void 0 ? void 0 : _helpElement$current2.focus();
     },
     onFocus: handleFocusBlur(true),
@@ -86,6 +93,7 @@ const Help = ({
     tooltipId: tooltipId || defaultTooltipId.current
   }));
 };
+
 Help.propTypes = {
   "ariaLabel": PropTypes.string,
   "as": PropTypes.oneOf(["a", "abbr", "address", "animate", "animateMotion", "animateTransform", "area", "article", "aside", "audio", "b", "base", "bdi", "bdo", "big", "blockquote", "body", "br", "button", "canvas", "caption", "circle", "cite", "clipPath", "code", "col", "colgroup", "data", "datalist", "dd", "defs", "del", "desc", "details", "dfn", "dialog", "div", "dl", "dt", "ellipse", "em", "embed", "feBlend", "feColorMatrix", "feComponentTransfer", "feComposite", "feConvolveMatrix", "feDiffuseLighting", "feDisplacementMap", "feDistantLight", "feDropShadow", "feFlood", "feFuncA", "feFuncB", "feFuncG", "feFuncR", "feGaussianBlur", "feImage", "feMerge", "feMergeNode", "feMorphology", "feOffset", "fePointLight", "feSpecularLighting", "feSpotLight", "feTile", "feTurbulence", "fieldset", "figcaption", "figure", "filter", "footer", "foreignObject", "form", "g", "h1", "h2", "h3", "h4", "h5", "h6", "head", "header", "hgroup", "hr", "html", "i", "iframe", "image", "img", "input", "ins", "kbd", "keygen", "label", "legend", "li", "line", "linearGradient", "link", "main", "map", "mark", "marker", "mask", "menu", "menuitem", "meta", "metadata", "meter", "mpath", "nav", "noindex", "noscript", "object", "ol", "optgroup", "option", "output", "p", "param", "path", "pattern", "picture", "polygon", "polyline", "pre", "progress", "q", "radialGradient", "rect", "rp", "rt", "ruby", "s", "samp", "script", "section", "select", "slot", "small", "source", "span", "stop", "strong", "style", "sub", "summary", "sup", "svg", "switch", "symbol", "table", "tbody", "td", "template", "text", "textarea", "textPath", "tfoot", "th", "thead", "time", "title", "tr", "track", "tspan", "u", "ul", "use", "var", "video", "view", "wbr", "webview"]),