carbon-react 118.5.1 → 118.6.0

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

@@ -1,5 +1,4 @@
-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); }
-
+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); }
 import React, { useContext, useEffect, useRef, useState } from "react";
 import PropTypes from "prop-types";
 import Icon from "../icon";
@@ -9,24 +8,24 @@ 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",
-  children,
-  className,
-  href,
-  helpId,
-  isFocused,
-  tabIndex = 0,
-  tooltipBgColor,
-  tooltipFontColor,
-  tooltipFlipOverrides,
-  tooltipId,
-  tooltipPosition = "top",
-  type = "help",
-  ...rest
-}) => {
+const Help = _ref => {
+  let {
+    as,
+    ariaLabel = "help",
+    children,
+    className,
+    href,
+    helpId,
+    isFocused,
+    tabIndex = 0,
+    tooltipBgColor,
+    tooltipFontColor,
+    tooltipFlipOverrides,
+    tooltipId,
+    tooltipPosition = "top",
+    type = "help",
+    ...rest
+  } = _ref;
   const defaultTooltipId = useRef(guid());
   const helpElement = useRef(null);
   const [isTooltipVisible, updateTooltipVisible] = useState(false);
@@ -36,26 +35,21 @@ const Help = ({
   useEffect(() => {
     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();
+        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,
@@ -65,9 +59,7 @@ const Help = ({
     id: helpId,
     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();
+      helpElement?.current?.focus();
     },
     onFocus: handleFocusBlur(true),
     onBlur: handleFocusBlur(false),
@@ -93,7 +85,6 @@ 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"]),

package/esm/components/help/help.style.js

@@ -19,11 +19,14 @@ const StyledHelp = styled.div`
     color: var(--colorsUtilityYin065);
   }
 
-  ${({
-  href
-}) => href && css`
+  ${_ref => {
+  let {
+    href
+  } = _ref;
+  return href && css`
       cursor: pointer;
-    `}
+    `;
+}}
 
   &:focus ${StyledIcon},
   &:hover ${StyledIcon} {

package/esm/components/hr/hr.component.js

@@ -1,25 +1,22 @@
-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); }
-
+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); }
 import React from "react";
 import PropTypes from "prop-types";
 import StyledHr from "./hr.style";
 import useIsAboveBreakpoint from "../../hooks/__internal__/useIsAboveBreakpoint";
-
-const Hr = ({
-  adaptiveMxBreakpoint,
-  ml,
-  mr,
-  ...rest
-}) => {
+const Hr = _ref => {
+  let {
+    adaptiveMxBreakpoint,
+    ml,
+    mr,
+    ...rest
+  } = _ref;
   const largeScreen = useIsAboveBreakpoint(adaptiveMxBreakpoint);
   let marginLeft = ml;
   let marginRight = mr;
-
   if (adaptiveMxBreakpoint && !largeScreen) {
     marginLeft = 0;
     marginRight = 0;
   }
-
   return /*#__PURE__*/React.createElement(StyledHr, _extends({
     "data-component": "hr",
     ml: marginLeft,
@@ -28,7 +25,6 @@ const Hr = ({
     mb: rest.mb || 3
   }, rest));
 };
-
 Hr.propTypes = {
   "adaptiveMxBreakpoint": PropTypes.number,
   "m": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({

package/esm/components/i18n-provider/i18n-provider.component.d.ts

@@ -4,5 +4,5 @@ export interface I18nProviderProps {
     locale?: Partial<Locale>;
     children: React.ReactNode;
 }
-export declare const I18nProvider: ({ locale, children }: I18nProviderProps) => JSX.Element;
+export declare const I18nProvider: ({ locale, children }: I18nProviderProps) => React.JSX.Element;
 export default I18nProvider;

package/esm/components/i18n-provider/i18n-provider.component.js

@@ -3,144 +3,13 @@ import PropTypes from "prop-types";
 import merge from "lodash/merge";
 import Context from "../../__internal__/i18n-context";
 import enGB from "../../locales/en-gb";
-
-const I18nProvider = ({
-  locale,
-  children
-}) => locale ? /*#__PURE__*/React.createElement(Context.Provider, {
-  value: merge({}, enGB, locale)
-}, children) : /*#__PURE__*/React.createElement(React.Fragment, null, children);
-
-I18nProvider.propTypes = {
-  "children": PropTypes.node,
-  "locale": PropTypes.shape({
-    "actionPopover": PropTypes.shape({
-      "ariaLabel": PropTypes.func.isRequired
-    }),
-    "actions": PropTypes.shape({
-      "delete": PropTypes.func.isRequired,
-      "edit": PropTypes.func.isRequired
-    }),
-    "advancedColorPicker": PropTypes.shape({
-      "ariaLabel": PropTypes.func.isRequired,
-      "currentColorAssigned": PropTypes.func.isRequired,
-      "currentColorDescriptionTerm": PropTypes.func.isRequired
-    }),
-    "batchSelection": PropTypes.shape({
-      "selected": PropTypes.func.isRequired
-    }),
-    "breadcrumbs": PropTypes.shape({
-      "ariaLabel": PropTypes.func.isRequired
-    }),
-    "characterCount": PropTypes.shape({
-      "charactersLeft": PropTypes.func.isRequired,
-      "hintString": PropTypes.func.isRequired,
-      "tooManyCharacters": PropTypes.func.isRequired
-    }),
-    "confirm": PropTypes.shape({
-      "no": PropTypes.func.isRequired,
-      "yes": PropTypes.func.isRequired
-    }),
-    "date": PropTypes.shape({
-      "dateFnsLocale": PropTypes.func.isRequired
-    }),
-    "dialog": PropTypes.shape({
-      "ariaLabels": PropTypes.shape({
-        "close": PropTypes.func.isRequired
-      }).isRequired
-    }),
-    "dialogFullScreen": PropTypes.shape({
-      "ariaLabels": PropTypes.shape({
-        "close": PropTypes.func.isRequired
-      }).isRequired
-    }),
-    "errors": PropTypes.shape({
-      "messages": PropTypes.shape({
-        "formSummary": PropTypes.func.isRequired
-      }).isRequired
-    }),
-    "heading": PropTypes.shape({
-      "backLinkAriaLabel": PropTypes.func.isRequired
-    }),
-    "link": PropTypes.shape({
-      "skipLinkLabel": PropTypes.func.isRequired
-    }),
-    "loader": PropTypes.shape({
-      "loading": PropTypes.func.isRequired
-    }),
-    "locale": PropTypes.func,
-    "message": PropTypes.shape({
-      "closeButtonAriaLabel": PropTypes.func.isRequired
-    }),
-    "numeralDate": PropTypes.shape({
-      "validation": PropTypes.shape({
-        "day": PropTypes.func.isRequired,
-        "month": PropTypes.func.isRequired,
-        "year": PropTypes.func.isRequired
-      }).isRequired
-    }),
-    "pager": PropTypes.shape({
-      "first": PropTypes.func.isRequired,
-      "last": PropTypes.func.isRequired,
-      "next": PropTypes.func.isRequired,
-      "ofY": PropTypes.func.isRequired,
-      "pageX": PropTypes.func.isRequired,
-      "previous": PropTypes.func.isRequired,
-      "records": PropTypes.func.isRequired,
-      "show": PropTypes.func.isRequired
-    }),
-    "password": PropTypes.shape({
-      "ariaLiveHiddenMessage": PropTypes.func.isRequired,
-      "ariaLiveShownMessage": PropTypes.func.isRequired
-    }),
-    "pod": PropTypes.shape({
-      "undo": PropTypes.func.isRequired
-    }),
-    "progressTracker": PropTypes.shape({
-      "of": PropTypes.func.isRequired
-    }),
-    "select": PropTypes.shape({
-      "actionButtonText": PropTypes.func.isRequired,
-      "noResultsForTerm": PropTypes.func.isRequired,
-      "placeholder": PropTypes.func.isRequired
-    }),
-    "sidebar": PropTypes.shape({
-      "ariaLabels": PropTypes.shape({
-        "close": PropTypes.func.isRequired
-      }).isRequired
-    }),
-    "switch": PropTypes.shape({
-      "off": PropTypes.func.isRequired,
-      "on": PropTypes.func.isRequired
-    }),
-    "textEditor": PropTypes.shape({
-      "ariaLabels": PropTypes.shape({
-        "bold": PropTypes.func.isRequired,
-        "bulletList": PropTypes.func.isRequired,
-        "italic": PropTypes.func.isRequired,
-        "numberList": PropTypes.func.isRequired
-      }).isRequired,
-      "tooltipMessages": PropTypes.shape({
-        "bold": PropTypes.func.isRequired,
-        "bulletList": PropTypes.func.isRequired,
-        "italic": PropTypes.func.isRequired,
-        "numberList": PropTypes.func.isRequired
-      }).isRequired
-    }),
-    "tileSelect": PropTypes.shape({
-      "deselect": PropTypes.func.isRequired
-    }),
-    "toast": PropTypes.shape({
-      "ariaLabels": PropTypes.shape({
-        "close": PropTypes.func.isRequired
-      }).isRequired
-    }),
-    "verticalMenuFullScreen": PropTypes.shape({
-      "ariaLabels": PropTypes.shape({
-        "close": PropTypes.func.isRequired
-      }).isRequired
-    })
-  })
+export const I18nProvider = _ref => {
+  let {
+    locale,
+    children
+  } = _ref;
+  return locale ? /*#__PURE__*/React.createElement(Context.Provider, {
+    value: merge({}, enGB, locale)
+  }, children) : /*#__PURE__*/React.createElement(React.Fragment, null, children);
 };
-export { I18nProvider };
 export default I18nProvider;

package/esm/components/icon/icon-unicodes.js

@@ -228,10 +228,8 @@ const legacyNames = {
   // it tries to use `delete` as an identifier, but `delete` is a reserved keyword.
   // By using ["delete"] instead, tsc generates a different - valid - .d.ts file
   // See also: https://github.com/microsoft/TypeScript/issues/53111
-
   /* eslint-disable-next-line dot-notation */
   bin: batchActions["delete"],
-
   /* eslint-disable-next-line dot-notation */
   bulk_destroy: batchActions["delete"],
   caret_down: actions.dropdown,
@@ -256,7 +254,8 @@ const legacyNames = {
   in_transit: navigation.arrow_left_right_small,
   progress: misc.circle_with_dots
 };
-const iconUnicodes = { ...communications,
+const iconUnicodes = {
+  ...communications,
   ...business,
   ...primaryNavigation,
   ...actions,

package/esm/components/icon/icon.component.js

@@ -8,38 +8,37 @@ import tagComponent from "../../__internal__/utils/helpers/tags/tags";
 import StyledIcon from "./icon.style";
 import { ICON_TOOLTIP_POSITIONS } from "./icon-config";
 import { TabTitleContext } from "../tabs/__internal__/tab-title";
-const Icon = /*#__PURE__*/React.forwardRef(({
-  "aria-hidden": ariaHidden,
-  ariaLabel,
-  bg,
-  bgShape,
-  bgSize = "small",
-  className,
-  color,
-  disabled,
-  focusable = true,
-  fontSize = "small",
-  id,
-  inputSize,
-  isPartOfInput,
-  tabIndex,
-  tooltipMessage,
-  tooltipPosition,
-  tooltipVisible,
-  tooltipBgColor,
-  tooltipFontColor,
-  tooltipFlipOverrides,
-  tooltipId,
-  type,
-  role,
-  ...rest
-}, ref) => {
+const Icon = /*#__PURE__*/React.forwardRef((_ref, ref) => {
+  let {
+    "aria-hidden": ariaHidden,
+    ariaLabel,
+    bg,
+    bgShape,
+    bgSize = "small",
+    className,
+    color,
+    disabled,
+    focusable = true,
+    fontSize = "small",
+    id,
+    inputSize,
+    isPartOfInput,
+    tabIndex,
+    tooltipMessage,
+    tooltipPosition,
+    tooltipVisible,
+    tooltipBgColor,
+    tooltipFontColor,
+    tooltipFlipOverrides,
+    tooltipId,
+    type,
+    role,
+    ...rest
+  } = _ref;
   const flipBehaviourCheck = Array.isArray(tooltipFlipOverrides) && tooltipFlipOverrides.every(override => ICON_TOOLTIP_POSITIONS.includes(override));
-
   if (tooltipFlipOverrides) {
     !flipBehaviourCheck ? process.env.NODE_ENV !== "production" ? invariant(false, `The tooltipFlipOverrides prop supplied to \`Icon\` must be an array containing some or all of ["top", "bottom", "left", "right"].`) : invariant(false) : void 0;
   }
-
   const isInteractive = !!tooltipMessage && !disabled;
   const {
     tooltipPosition: tooltipPositionFromContext,
@@ -51,27 +50,22 @@ const Icon = /*#__PURE__*/React.forwardRef(({
   const {
     isInTab
   } = useContext(TabTitleContext);
-  /** Return Icon type with overrides */
 
+  /** Return Icon type with overrides */
   const iconType = useMemo(() => {
     // switch tweaks icon names for actual icons in the set
     switch (type) {
       case "help":
         return "question";
-
       case "maintenance":
         return "settings";
-
       case "new":
         return "gift";
-
       case "success":
         return "tick";
-
       case "messages":
       case "email":
         return "message";
-
       default:
         return type;
     }
@@ -82,7 +76,6 @@ const Icon = /*#__PURE__*/React.forwardRef(({
     if (isInTab) {
       return undefined;
     }
-
     return hasTooltip && tabIndex === undefined ? 0 : tabIndex;
   }, [isInTab, hasTooltip, tabIndex]);
   const styledIconProps = {
@@ -107,11 +100,9 @@ const Icon = /*#__PURE__*/React.forwardRef(({
     ...tagComponent("icon", rest),
     ...filterStyledSystemMarginProps(rest)
   };
-
   const shouldShowTooltip = () => {
     return tooltipVisibleFromContext !== undefined ? tooltipVisibleFromContext : tooltipVisible;
   };
-
   if (tooltipMessage) {
     const visible = disabled ? undefined : shouldShowTooltip();
     return /*#__PURE__*/React.createElement(Tooltip, {
@@ -128,7 +119,6 @@ const Icon = /*#__PURE__*/React.forwardRef(({
       target: target
     }, /*#__PURE__*/React.createElement(StyledIcon, styledIconProps));
   }
-
   return /*#__PURE__*/React.createElement(StyledIcon, styledIconProps);
 });
 Icon.propTypes = {

package/esm/components/icon/icon.style.js

@@ -7,33 +7,30 @@ import iconConfig from "./icon-config";
 import browserTypeCheck, { isSafari } from "../../__internal__/utils/helpers/browser-type-check";
 import styledColor from "../../style/utils/color";
 import getColorValue from "../../style/utils/get-color-value";
-
 function adjustIconBgSize(fontSize, bgSize) {
   if (fontSize && fontSize !== "small") {
     return iconConfig.backgroundSize[fontSize];
   }
-
   return bgSize ? iconConfig.backgroundSize[bgSize] : undefined;
 }
-
 const StyledIcon = styled.span`
-  ${({
-  theme,
-  color,
-  bg,
-  isInteractive,
-  bgSize,
-  bgShape,
-  type,
-  fontSize,
-  disabled,
-  hasTooltip
-}) => {
+  ${_ref => {
+  let {
+    theme,
+    color,
+    bg,
+    isInteractive,
+    bgSize,
+    bgShape,
+    type,
+    fontSize,
+    disabled,
+    hasTooltip
+  } = _ref;
   let finalColor;
   let finalHoverColor;
   let bgColor;
   let bgHoverColor;
-
   try {
     if (disabled) {
       finalColor = "var(--colorsYin030)";
@@ -51,7 +48,6 @@ const StyledIcon = styled.span`
       finalColor = "var(--colorsYin090)";
       finalHoverColor = "var(--colorsYin090)";
     }
-
     if (bg) {
       const {
         backgroundColor
@@ -69,7 +65,6 @@ const StyledIcon = styled.span`
     // eslint-disable-next-line no-console
     console.error(e);
   }
-
   return css`
       position: relative;
       color: ${finalColor};

package/esm/components/icon-button/icon-button.component.js

@@ -1,5 +1,4 @@
-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); }
-
+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); }
 import React, { useState, useCallback, useContext } from "react";
 import PropTypes from "prop-types";
 import invariant from "invariant";
@@ -9,39 +8,34 @@ import { TooltipProvider } from "../../__internal__/tooltip-provider";
 import { ButtonBarContext } from "../button-bar/button-bar.component";
 import Logger from "../../__internal__/utils/logger";
 let onActionButtonWarnTriggered = false;
-const IconButton = /*#__PURE__*/React.forwardRef(({
-  "aria-label": ariaLabel,
-  onAction,
-  onClick,
-  children,
-  disabled,
-  ...rest
-}, ref) => {
-  var _internalRef$querySel;
-
+const IconButton = /*#__PURE__*/React.forwardRef((_ref, ref) => {
+  let {
+    "aria-label": ariaLabel,
+    onAction,
+    onClick,
+    children,
+    disabled,
+    ...rest
+  } = _ref;
   if (!onActionButtonWarnTriggered && onAction) {
     onActionButtonWarnTriggered = true;
     Logger.deprecate("The `onAction` callback for the `IconButton` component is deprecated and will soon be removed. Please use `onClick` instead");
   }
-
   !!(onClick && onAction) ? process.env.NODE_ENV !== "production" ? invariant(false, "onClick and onAction have both been set, please use onClick as onAction will soon be deprecated") : invariant(false) : void 0;
   const [internalRef, setInternalRef] = useState();
   const context = useContext(ButtonBarContext);
-  const ariaLabelValue = Object.keys(context).length ? ariaLabel || (internalRef === null || internalRef === void 0 ? void 0 : (_internalRef$querySel = internalRef.querySelector("[data-component='icon']")) === null || _internalRef$querySel === void 0 ? void 0 : _internalRef$querySel.getAttribute("type")) || undefined : ariaLabel;
-
+  const ariaLabelValue = Object.keys(context).length ? ariaLabel || internalRef?.querySelector("[data-component='icon']")?.getAttribute("type") || undefined : ariaLabel;
   const handleKeyDown = e => {
     if (Events.isEnterKey(e) || Events.isSpaceKey(e)) {
       e.preventDefault();
-      onAction === null || onAction === void 0 ? void 0 : onAction(e);
-      onClick === null || onClick === void 0 ? void 0 : onClick(e);
+      onAction?.(e);
+      onClick?.(e);
     }
   };
-
   const handleOnClick = e => {
-    onAction === null || onAction === void 0 ? void 0 : onAction(e);
-    onClick === null || onClick === void 0 ? void 0 : onClick(e);
+    onAction?.(e);
+    onClick?.(e);
   };
-
   const setRefs = useCallback(reference => {
     setInternalRef(reference);
     if (!ref) return;

package/esm/components/icon-button/icon-button.style.js

@@ -5,9 +5,11 @@ import { baseTheme } from "../../style/themes";
 const StyledIconButton = styled.button.attrs({
   type: "button"
 })`
-  ${({
-  disabled
-}) => css`
+  ${_ref => {
+  let {
+    disabled
+  } = _ref;
+  return css`
     && {
       ${space}
     }
@@ -40,7 +42,8 @@ const StyledIconButton = styled.button.attrs({
         border: none;
       }
     }
-  `}
+  `;
+}}
 `;
 StyledIconButton.defaultProps = {
   theme: baseTheme

package/esm/components/image/image.component.d.ts

@@ -1,7 +1,7 @@
-/// <reference types="react" />
+import React from "react";
 import { StyledImageProps } from "./image.style";
 export declare const Image: {
-    ({ alt, decorative, src, children, ...rest }: StyledImageProps): JSX.Element;
+    ({ alt, decorative, src, children, ...rest }: StyledImageProps): React.JSX.Element;
     displayName: string;
 };
 export default Image;