carbon-react 111.12.3 → 111.12.5

package/esm/components/textarea/textarea.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, { useRef, useEffect, useContext } from "react";
 import PropTypes from "prop-types";
 import styledSystemPropTypes from "@styled-system/prop-types";
@@ -17,6 +18,7 @@ import { NewValidationContext } from "../carbon-provider/carbon-provider.compone
 import { ErrorBorder, StyledHintText } from "../textbox/textbox.style";
 import ValidationMessage from "../../__internal__/validation-message";
 const marginPropTypes = filterStyledSystemMarginProps(styledSystemPropTypes.space);
+
 const Textarea = ({
   autoFocus,
   fieldHelp,
@@ -58,20 +60,25 @@ const Textarea = ({
   const {
     validationRedesignOptIn
   } = useContext(NewValidationContext);
+
   const computeLabelPropValues = prop => validationRedesignOptIn ? undefined : prop;
+
   const {
     current: id
   } = useRef(idProp || guid());
   const inputRef = useRef();
   const minHeight = useRef(MIN_HEIGHT);
+
   const expandTextarea = () => {
     const textarea = inputRef.current;
+
     if (textarea.scrollHeight > minHeight.current) {
-      textarea.style.height = "0px";
-      // Set the height so all content is shown
+      textarea.style.height = "0px"; // Set the height so all content is shown
+
       textarea.style.height = `${Math.max(textarea.scrollHeight, minHeight.current)}px`;
     }
   };
+
   const {
     labelId,
     validationIconId,
@@ -86,8 +93,7 @@ const Textarea = ({
     label,
     fieldHelp
   });
-  const [maxLength, characterCount] = useCharacterCount(value,
-  // TODO: Can be removed after the characterLimit type is changed to number
+  const [maxLength, characterCount] = useCharacterCount(value, // TODO: Can be removed after the characterLimit type is changed to number
   typeof characterLimit === "string" ? parseInt(characterLimit, 10) : characterLimit, warnOverLimit, enforceCharacterLimit);
   useEffect(() => {
     if (rows) {
@@ -104,6 +110,7 @@ const Textarea = ({
       window.addEventListener("resize", expandTextarea);
       minHeight.current = inputRef.current.clientHeight;
     }
+
     return () => {
       if (expandable) {
         window.removeEventListener("resize", expandTextarea);
@@ -182,90 +189,127 @@ const Textarea = ({
     useValidationIcon: !(validationRedesignOptIn || validationOnLabel)
   }))), characterCount)));
 };
-Textarea.propTypes = {
-  ...marginPropTypes,
+
+Textarea.propTypes = { ...marginPropTypes,
+
   /** Automatically focus the input on component mount */
   autoFocus: PropTypes.bool,
+
   /** Identifier used for testing purposes, applied to the root element of the component. */
   "data-component": PropTypes.string,
+
   /** Identifier used for testing purposes, applied to the root element of the component. */
   "data-element": PropTypes.string,
+
   /** Identifier used for testing purposes, applied to the root element of the component. */
   "data-role": PropTypes.string,
+
   /** id of the input */
   id: PropTypes.string,
+
   /** Character limit of the textarea */
   characterLimit: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+
   /** Type of the icon that will be rendered next to the input */
   children: PropTypes.node,
+
   /** The visible width of the text control, in average character widths */
   cols: PropTypes.number,
+
   /** Adds disabled property */
   disabled: PropTypes.bool,
+
   /** Stop the user typing over the characterLimit */
   enforceCharacterLimit: PropTypes.bool,
+
   /** Allows the Textareas Height to change based on user input */
   expandable: PropTypes.bool,
+
   /** Help content to be displayed under an input */
   fieldHelp: PropTypes.node,
+
   /** The content of the label for the input */
   label: PropTypes.string,
+
   /** Text applied to label help tooltip */
   labelHelp: PropTypes.node,
+
   /** Inline label alignment */
   labelAlign: PropTypes.oneOf(["left", "right"]),
+
   /** When true, label is placed in line with an input */
   labelInline: PropTypes.bool,
+
   /** Spacing between label and a field for inline label, given number will be multiplied by base spacing unit (8) */
   labelSpacing: PropTypes.oneOf([1, 2]),
+
   /** Width of a label in percentage. Works only when labelInline is true */
   labelWidth: PropTypes.number,
+
   /** Width of an input in percentage. Works only when labelInline is true */
   inputWidth: PropTypes.number,
+
   /** Name of the input */
   name: PropTypes.string,
+
   /** Callback fired when the user types in the Textarea */
   onChange: PropTypes.func,
+
   /** Placeholder text for the component */
   placeholder: PropTypes.string,
+
   /** Adds readOnly property */
   readOnly: PropTypes.bool,
+
   /** The number of visible text lines for the control */
   rows: PropTypes.number,
+
   /** One of type of size to apply to the textarea */
   size: PropTypes.oneOf(["small", "medium", "large"]),
+
   /** The value of the Textarea */
   value: PropTypes.string,
+
   /** Whether to display the character count message in red */
   warnOverLimit: PropTypes.bool,
+
   /** Indicate that error has occurred
   Pass string to display icon, tooltip and red border
   Pass true boolean to only display red border */
   error: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),
+
   /** Indicate that warning has occurred
   Pass string to display icon, tooltip and orange border
   Pass true boolean to only display orange border */
   warning: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),
+
   /** Indicate additional information
   Pass string to display icon, tooltip and blue border
   Pass true boolean to only display blue border */
   info: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),
+
   /** When true, validation icon will be placed on label instead of being placed on the input */
   validationOnLabel: PropTypes.bool,
+
   /**
    * <a href="https://brand.sage.com/d/NdbrveWvNheA/foundations#/icons/icons" target="_blank">List of supported icons</a>
    *
    * Icon to display inside of the Textarea
    */
   inputIcon: PropTypes.string,
+
   /** Message to be displayed in a Tooltip when the user hovers over the help icon */
   tooltipMessage: PropTypes.string,
+
   /** Breakpoint for adaptive label (inline labels change to top aligned). Enables the adaptive behaviour when set */
   adaptiveLabelBreakpoint: PropTypes.number,
+
   /** Flag to configure component as mandatory */
   required: PropTypes.bool,
+
   /** Overrides the default tooltip position */
   tooltipPosition: PropTypes.oneOf(["top", "bottom", "left", "right"]),
+
   /** Aria label for rendered help component */
   helpAriaLabel: PropTypes.string
 };

package/esm/components/textbox/textbox.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 } from "react";
 import PropTypes from "prop-types";
 import { filterStyledSystemMarginProps } from "../../style/utils";
@@ -15,6 +16,7 @@ import { ErrorBorder, StyledHintText } from "./textbox.style";
 import ValidationMessage from "../../__internal__/validation-message";
 import { NewValidationContext } from "../carbon-provider/carbon-provider.component";
 import NumeralDateContext from "../numeral-date/numeral-date-context";
+
 const Textbox = ({
   align = "left",
   autoFocus,
@@ -70,8 +72,7 @@ const Textbox = ({
   ...props
 }) => {
   const characterCountValue = typeof value === "string" ? value : "";
-  const [maxLength, characterCount] = useCharacterCount(characterCountValue,
-  // TODO: Can be removed after the characterLimit type is changed to number
+  const [maxLength, characterCount] = useCharacterCount(characterCountValue, // TODO: Can be removed after the characterLimit type is changed to number
   typeof characterLimit === "string" ? parseInt(characterLimit, 10) : characterLimit, warnOverLimit, enforceCharacterLimit);
   const {
     validationRedesignOptIn
@@ -79,7 +80,9 @@ const Textbox = ({
   const {
     disableErrorBorder
   } = useContext(NumeralDateContext);
+
   const computeLabelPropValues = prop => validationRedesignOptIn ? undefined : prop;
+
   const [uniqueId, uniqueName] = useUniqueId(id, name);
   const {
     labelId: internalLabelId,
@@ -181,6 +184,7 @@ const Textbox = ({
     validationIconId: validationRedesignOptIn ? undefined : validationIconId
   }))), characterCount));
 };
+
 Textbox.propTypes = {
   "about": PropTypes.string,
   "accept": PropTypes.string,
@@ -250,6 +254,9 @@ Textbox.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/tile/tile-footer/tile-footer.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 styledSystemPropTypes from "@styled-system/prop-types";
 import StyledTileFooter from "./tile-footer.style";
 import { filterStyledSystemPaddingProps } from "../../../style/utils";
 const paddingPropTypes = filterStyledSystemPaddingProps(styledSystemPropTypes.space);
+
 const TileFooter = ({
   variant,
   children,
@@ -15,8 +17,9 @@ const TileFooter = ({
     variant: variant
   }, props), children);
 };
-TileFooter.propTypes = {
-  ...paddingPropTypes,
+
+TileFooter.propTypes = { ...paddingPropTypes,
+
   /** set which background color variant should be used */
   variant: PropTypes.oneOf(["default", "transparent"]),
   children: PropTypes.node

package/esm/components/tile/tile.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 from "react";
 import PropTypes from "prop-types";
 import propTypes from "@styled-system/prop-types";
 import { StyledTile, TileContent } from "./tile.style.js";
+
 const Tile = ({
   variant = "tile",
   p = 3,
@@ -12,11 +14,14 @@ const Tile = ({
   ...props
 }) => {
   const isHorizontal = () => orientation === "horizontal";
+
   const isVertical = () => orientation === "vertical";
+
   const wrappedChildren = React.Children.map(children, (child, index) => {
     if (!child) {
       return null;
     }
+
     const {
       width: contentWidth,
       ...childProps
@@ -43,11 +48,14 @@ const Tile = ({
     p: p
   }, props), wrappedChildren);
 };
+
 Tile.propTypes = {
   /** Styled system spacing props */
   ...propTypes.space,
+
   /** Sets the theme of the tile - either 'tile', 'transparent' or 'active' */
   variant: PropTypes.oneOf(["tile", "transparent", "active"]),
+
   /**
    * The content to render within the tile. Each child will be wrapped with
    * a TileContent wrapper, which allows any individual child component to take a
@@ -56,8 +64,10 @@ Tile.propTypes = {
    * Width will have no effect on a child component if the tile orientation is set to 'vertical'.
    */
   children: PropTypes.node,
+
   /** The orientation of the tile - set to either horizontal or vertical */
   orientation: PropTypes.oneOf(["horizontal", "vertical"]),
+
   /**
    * Set a percentage-based width for the whole Tile component, relative to its parent.
    * If unset or zero, this will default to 100%.

package/esm/components/tile-select/__internal__/accordion/accordion.component.js

@@ -2,6 +2,7 @@ import React, { useEffect, useRef, useState } from "react";
 import PropTypes from "prop-types";
 import { StyledContentContainer, StyledContent } from "./accordion.style";
 import useResizeObserver from "../../../../hooks/__internal__/useResizeObserver";
+
 const Accordion = ({
   children,
   expanded,
@@ -28,6 +29,7 @@ const Accordion = ({
     "aria-labelledby": controlId
   }, children));
 };
+
 Accordion.propTypes = {
   children: PropTypes.node.isRequired,
   expanded: PropTypes.bool,

package/esm/components/tile-select/tile-select-group.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";
@@ -8,6 +9,7 @@ import RadioButtonMapper from "../../__internal__/radio-button-mapper/radio-butt
 import { StyledTileSelectFieldset, StyledGroupDescription } from "./tile-select.style";
 import { filterStyledSystemMarginProps } from "../../style/utils";
 const marginPropTypes = filterStyledSystemMarginProps(styledSystemPropTypes.space);
+
 const TileSelectGroup = props => {
   const {
     children,
@@ -21,6 +23,7 @@ const TileSelectGroup = props => {
     ...rest
   } = props;
   let tiles;
+
   if (multiSelect) {
     tiles = children;
   } else {
@@ -33,14 +36,16 @@ const TileSelectGroup = props => {
       type: "radio"
     })));
   }
+
   return /*#__PURE__*/React.createElement(StyledTileSelectFieldset, _extends({
     legend: legend
   }, tagComponent("tile-select-group", rest), {
     multiSelect: multiSelect
   }, filterStyledSystemMarginProps(rest)), /*#__PURE__*/React.createElement(StyledGroupDescription, null, description), /*#__PURE__*/React.createElement("div", null, tiles));
 };
-TileSelectGroup.propTypes = {
-  ...marginPropTypes,
+
+TileSelectGroup.propTypes = { ...marginPropTypes,
+
   /** The TileSelect components to be rendered in the group */
   children: (props, propName, componentName) => {
     let error;
@@ -52,20 +57,29 @@ TileSelectGroup.propTypes = {
     });
     return error;
   },
+
   /** The content for the TileSelectGroup Legend */
   legend: PropTypes.string,
+
   /** Description to be rendered below the legend */
   description: PropTypes.string,
+
   /** The currently selected value - only for single select mode. */
   value: PropTypes.string,
+
   /** The name to apply to the input - only for single select mode. */
   name: PropTypes.string,
+
   /** A callback triggered when one of tiles is selected - only for single select mode. */
   onChange: PropTypes.func,
+
   /** A callback triggered when one of tiles is blurred - only for single select mode. */
   onBlur: PropTypes.func,
+
   /** When passed as true TileSelectGroup serves only visual purpose */
+
   /** It wraps TileSelects in fieldset element and renders the legend and description props content */
+
   /** onChange, onBlur, value, checked and name props are meant to be passed individually on each of the TileSelects */
   multiSelect: PropTypes.bool
 };

package/esm/components/tile-select/tile-select.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, { useState, useEffect, useRef } from "react";
 import PropTypes from "prop-types";
 import styledSystemPropTypes from "@styled-system/prop-types";
@@ -11,9 +12,11 @@ import Accordion from "./__internal__/accordion";
 import { StyledTileSelectContainer, StyledTileSelect, StyledTileSelectInput, StyledTitleContainer, StyledTitle, StyledSubtitle, StyledAdornment, StyledDescription, StyledDeselectWrapper, StyledFooterWrapper, StyledFocusWrapper, StyledAccordionFooterWrapper } from "./tile-select.style";
 import { filterStyledSystemMarginProps } from "../../style/utils";
 const marginPropTypes = filterStyledSystemMarginProps(styledSystemPropTypes.space);
+
 const checkPropTypeIsNode = prop => typeof prop !== "string" && {
   as: "div"
 };
+
 const TileSelect = ({
   onChange,
   onBlur,
@@ -41,9 +44,9 @@ const TileSelect = ({
 }) => {
   const l = useLocale();
   const [hasFocus, setHasFocus] = useState(false);
+
   const handleDeselect = () => onChange({
-    target: {
-      ...(name && {
+    target: { ...(name && {
         name
       }),
       ...(id && {
@@ -53,6 +56,7 @@ const TileSelect = ({
       checked: false
     }
   });
+
   const renderActionButton = () => /*#__PURE__*/React.createElement(StyledDeselectWrapper, {
     hasActionAdornment: !!actionButtonAdornment
   }, customActionButton && customActionButton(handleDeselect), !customActionButton && checked && /*#__PURE__*/React.createElement(Button, {
@@ -61,6 +65,7 @@ const TileSelect = ({
     disabled: disabled,
     onClick: handleDeselect
   }, l.tileSelect.deselect()), actionButtonAdornment);
+
   useEffect(() => {
     if (disabled && hasFocus) {
       setHasFocus(false);
@@ -81,11 +86,13 @@ const TileSelect = ({
     onBlur: ev => {
       setHasFocus(false);
       /* istanbul ignore else */
+
       if (onBlur) onBlur(ev);
     },
     onFocus: ev => {
       setHasFocus(true);
       /* istanbul ignore else */
+
       if (onFocus) onFocus(ev);
     },
     checked: checked,
@@ -118,57 +125,79 @@ const TileSelect = ({
     expanded: accordionExpanded
   }, accordionContent)));
 };
+
 TileSelect.defaultProps = {
   checked: false,
   type: "checkbox"
 };
-TileSelect.propTypes = {
-  ...marginPropTypes,
+TileSelect.propTypes = { ...marginPropTypes,
+
   /** title of the TileSelect */
   title: PropTypes.node,
+
   /** adornment to be rendered next to the title */
   titleAdornment: PropTypes.node,
+
   /** subtitle of the TileSelect */
   subtitle: PropTypes.node,
+
   /** description of the TileSelect */
   description: PropTypes.node,
+
   /** disables the TileSelect input */
   disabled: PropTypes.bool,
+
   /** the value that is represented by this TileSelect */
   value: PropTypes.string,
+
   /** input id */
   id: PropTypes.string,
+
   /** input name */
   name: PropTypes.string,
+
   /** Callback triggered when user selects or deselects this tile */
   onChange: PropTypes.func,
+
   /** Callback triggered when the user blurs this tile */
   onBlur: PropTypes.func,
+
   /** Callback triggered when the user focuses this tile */
   onFocus: PropTypes.func,
+
   /** determines if this tile is selected or unselected */
   checked: PropTypes.bool,
+
   /** Custom class name passed to the root element of TileSelect */
   className: PropTypes.string,
+
   /** Type of the TileSelect input */
   type: PropTypes.oneOf(["radio", "checkbox"]),
+
   /** Render prop that allows overriding the default action button. `(onClick) => <Button onClick={onClick}>...</Button>` */
   customActionButton: PropTypes.func,
+
   /** An additional help info icon rendered next to the action button */
   actionButtonAdornment: PropTypes.node,
+
   /** footer of the TileSelect */
   footer: PropTypes.node,
+
   /** Component to render in the top left corner of TileSelect */
   prefixAdornment: PropTypes.node,
+
   /** Component to render additional information row between title and description */
   additionalInformation: PropTypes.node,
+
   /** Components to render in the TileSelect Accordion */
   accordionContent: PropTypes.node,
+
   /**
    * Render prop to support rendering the control to handle the expanded state of the TileSelect Accordion.
    * `(controlId, contentId) => <Button id={controlId} aria-controls={contentId}>...</Button>`
    */
   accordionControl: PropTypes.func,
+
   /** Flag to control the open state of TileSelect Accordion */
   accordionExpanded: PropTypes.bool
 };

package/esm/components/toast/toast.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, useEffect, useMemo, useRef, useState } from "react";
 import classNames from "classnames";
 import { TransitionGroup, CSSTransition } from "react-transition-group";
@@ -45,15 +46,18 @@ const Toast = /*#__PURE__*/React.forwardRef(({
   useModalManager(open, dismissToast, refToPass);
   useEffect(() => {
     clearTimeout(timer.current);
+
     if (!timeout || !open || !onDismiss) {
       return;
     }
+
     timer.current = setTimeout(() => onDismiss(), timeout);
   }, [onDismiss, open, timeout]);
   useEffect(() => {
     if (!disableAutoFocus) {
       if (open) {
         var _toastContentNodeRef$;
+
         focusedElementBeforeOpening.current = document.activeElement;
         (_toastContentNodeRef$ = toastContentNodeRef.current) === null || _toastContentNodeRef$ === void 0 ? void 0 : _toastContentNodeRef$.focus();
       } else if (focusedElementBeforeOpening.current) {
@@ -70,6 +74,7 @@ const Toast = /*#__PURE__*/React.forwardRef(({
       }
     };
   }, []);
+
   function renderCloseIcon() {
     if (!onDismiss) return null;
     return /*#__PURE__*/React.createElement(IconButton, {
@@ -81,6 +86,7 @@ const Toast = /*#__PURE__*/React.forwardRef(({
       type: "close"
     }));
   }
+
   function renderToastContent() {
     if (!open) return null;
     const toastProps = {
@@ -116,6 +122,7 @@ const Toast = /*#__PURE__*/React.forwardRef(({
       isDismiss: onDismiss
     }, children), renderCloseIcon()));
   }
+
   return /*#__PURE__*/React.createElement(StyledPortal, {
     id: targetPortalId,
     isCenter: isCenter,
@@ -129,26 +136,37 @@ const Toast = /*#__PURE__*/React.forwardRef(({
 Toast.propTypes = {
   /** Customizes the appearance in the DLS theme */
   variant: PropTypes.oneOf(["error", "info", "success", "warning", "notice"]),
+
   /** Custom className */
   className: PropTypes.string,
+
   /** Custom id  */
   id: PropTypes.string,
+
   /** Component name */
   "data-component": PropTypes.string,
+
   /** The rendered children of the component. */
   children: PropTypes.node,
+
   /** Determines if the Toast is open. */
   open: PropTypes.bool,
+
   /** Callback for when dismissed. */
   onDismiss: PropTypes.func,
+
   /** Time for Toast to remain on screen */
   timeout: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+
   /** Centers the Toast on the screen */
   isCenter: PropTypes.bool,
+
   /** Target Portal ID where the Toast will render */
   targetPortalId: PropTypes.string,
+
   /** Maximum toast width */
   maxWidth: PropTypes.string,
+
   /** Disables auto focus functionality when the Toast has a close icon */
   disableAutoFocus: PropTypes.bool
 };

package/esm/components/tooltip/tooltip-pointer.style.js

@@ -1,10 +1,12 @@
 import styled, { css } from "styled-components";
 import baseTheme from "../../style/themes/base";
 import { toColor } from "../../style/utils/color";
+
 const pointerColor = (theme, bgColor, type) => {
   if (bgColor) return toColor(theme, bgColor);
   return type === "error" ? "var(--colorsSemanticNegative500)" : "var(--colorsSemanticNeutral500)";
 };
+
 const StyledTooltipPointer = styled.div`
   ${({
   position,

package/esm/components/tooltip/tooltip.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 Tippy from "@tippyjs/react/headless";
@@ -29,6 +30,7 @@ const Tooltip = /*#__PURE__*/React.forwardRef(({
 }, ref) => {
   const isFlipOverridesValid = !flipOverrides || Array.isArray(flipOverrides) && flipOverrides.every(placement => TOOLTIP_POSITIONS.includes(placement));
   !isFlipOverridesValid ? process.env.NODE_ENV !== "production" ? invariant(false, `The flipOverrides prop supplied to Tooltip must be an array containing some or all of ["top", "bottom", "left", "right"].`) : invariant(false) : void 0;
+
   const tooltip = (attrs, content) => {
     const currentPosition = attrs["data-placement"] || position;
     return /*#__PURE__*/React.createElement(CarbonScopedTokensProvider, null, /*#__PURE__*/React.createElement(StyledTooltip, _extends({
@@ -56,6 +58,7 @@ const Tooltip = /*#__PURE__*/React.forwardRef(({
       bgColor: bgColor
     })), content));
   };
+
   return /*#__PURE__*/React.createElement(Tippy, _extends({
     placement: position,
     delay: TOOLTIP_DELAY