carbon-react 104.34.1 → 104.35.0

package/esm/__internal__/focus-trap/focus-trap.component.js

@@ -0,0 +1,154 @@
+import React, { useCallback, useContext, useEffect, useLayoutEffect, useRef, useState } from "react";
+import PropTypes from "prop-types";
+import { defaultFocusableSelectors, nextNonRadioElementIndex, isRadio, setElementFocus } from "./focus-trap-utils";
+import { ModalContext } from "../../components/modal/modal.component";
+
+const FocusTrap = ({
+  children,
+  autoFocus = true,
+  focusFirstElement,
+  bespokeTrap,
+  wrapperRef
+}) => {
+  const trapRef = useRef(null);
+  const firstOpen = useRef(true);
+  const [focusableElements, setFocusableElements] = useState();
+  const [firstElement, setFirstElement] = useState();
+  const [lastElement, setLastElement] = useState();
+  const [currentFocusedElement, setCurrentFocusedElement] = useState();
+  const {
+    isAnimationComplete,
+    triggerRefocusFlag
+  } = useContext(ModalContext);
+  const hasNewInputs = useCallback(candidate => {
+    if (!focusableElements || candidate.length !== focusableElements.length) {
+      return true;
+    }
+
+    return Array.from(candidate).some((el, i) => el !== focusableElements[i]);
+  }, [focusableElements]);
+  const updateFocusableElements = useCallback(() => {
+    const ref = wrapperRef === null || wrapperRef === void 0 ? void 0 : wrapperRef.current;
+
+    if (ref) {
+      const elements = Array.from(ref.querySelectorAll(defaultFocusableSelectors)).filter(el => Number(el.tabIndex) !== -1);
+
+      if (hasNewInputs(elements)) {
+        setFocusableElements(Array.from(elements));
+        setFirstElement(elements[0]);
+        setLastElement(elements[elements.length - 1]);
+      }
+    }
+  }, [hasNewInputs, wrapperRef]);
+  useEffect(() => {
+    const observer = new MutationObserver(updateFocusableElements);
+    observer.observe(trapRef.current, {
+      subtree: true,
+      childList: true,
+      attributes: true,
+      characterData: true
+    });
+    return () => observer.disconnect();
+  }, [updateFocusableElements]);
+  useLayoutEffect(() => {
+    updateFocusableElements();
+  }, [children, updateFocusableElements]);
+  useEffect(() => {
+    if (autoFocus && firstOpen.current && isAnimationComplete && (focusFirstElement || firstElement)) {
+      setElementFocus(focusFirstElement || firstElement);
+      firstOpen.current = false;
+    }
+  }, [autoFocus, firstElement, focusFirstElement, isAnimationComplete]);
+  useEffect(() => {
+    const trapFn = ev => {
+      if (bespokeTrap) {
+        bespokeTrap(ev, firstElement, lastElement);
+        return;
+      }
+
+      const {
+        activeElement
+      } = document;
+
+      if (ev.key === "Tab") {
+        if (!focusableElements.length) {
+          /* Block the trap */
+          ev.preventDefault();
+        } else if (ev.shiftKey) {
+          /* shift + tab */
+          if (activeElement === firstElement) {
+            lastElement.focus();
+            ev.preventDefault();
+          } // If current element is radio button -
+          // find next non radio button element
+
+
+          if (isRadio(activeElement)) {
+            const nextIndex = nextNonRadioElementIndex(activeElement, focusableElements);
+            setElementFocus(focusableElements[nextIndex]);
+            ev.preventDefault();
+          }
+        } else if (activeElement === lastElement) {
+          firstElement.focus();
+          ev.preventDefault();
+        }
+      }
+    };
+
+    document.addEventListener("keydown", trapFn);
+    return function cleanup() {
+      document.removeEventListener("keydown", trapFn);
+    };
+  }, [firstElement, lastElement, focusableElements, bespokeTrap]);
+  const updateCurrentFocusedElement = useCallback(() => {
+    const element = focusableElements === null || focusableElements === void 0 ? void 0 : focusableElements.find(el => el === document.activeElement);
+
+    if (element) {
+      setCurrentFocusedElement(element);
+    }
+  }, [focusableElements]);
+  useEffect(() => {
+    document.addEventListener("focusin", updateCurrentFocusedElement);
+    return () => {
+      document.removeEventListener("focusin", updateCurrentFocusedElement);
+    };
+  }, [updateCurrentFocusedElement]);
+  const refocusTrap = useCallback(() => {
+    /* istanbul ignore else */
+    if (currentFocusedElement && !currentFocusedElement.hasAttribute("disabled")) {
+      // the trap breaks if it tries to refocus a disabled element
+      setElementFocus(currentFocusedElement);
+    } else if (firstElement) {
+      setElementFocus(firstElement);
+    }
+  }, [currentFocusedElement, firstElement]);
+  useEffect(() => {
+    if (triggerRefocusFlag) {
+      refocusTrap();
+    }
+  }, [triggerRefocusFlag, refocusTrap]);
+  return /*#__PURE__*/React.createElement("div", {
+    ref: trapRef
+  }, children);
+};
+
+FocusTrap.propTypes = {
+  children: PropTypes.node.isRequired,
+
+  /** flag to set focus automatically on first render */
+  autoFocus: PropTypes.bool,
+
+  /** provide a custom first element to focus */
+  focusFirstElement: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({
+    current: PropTypes.any
+  })]),
+
+  /** a custom callback that will override the default focus trap behaviour */
+  bespokeTrap: PropTypes.func,
+
+  /** a ref to the container wrapping the focusable elements */
+  wrapperRef: PropTypes.shape({
+    current: PropTypes.any
+  })
+};
+export default FocusTrap;

package/esm/__internal__/focus-trap/index.d.ts

@@ -0,0 +1 @@
+export { default } from "./focus-trap.component";

package/esm/__internal__/focus-trap/index.js

@@ -0,0 +1 @@
+export { default } from "./focus-trap.component";

package/esm/__internal__/form-field/form-field.component.d.ts

@@ -0,0 +1,66 @@
+export default FormField;
+declare function FormField({ children, disabled, fieldHelp: fieldHelpContent, fieldHelpInline, error, warning, info, tooltipId, fieldHelpId, helpTabIndex, label, labelId, labelAlign, labelHelp, labelHelpIcon, labelInline, labelSpacing, labelWidth, id, reverse, isOptional, useValidationIcon, adaptiveLabelBreakpoint, isRequired, validationIconId, ...rest }: {
+    [x: string]: any;
+    children: any;
+    disabled: any;
+    fieldHelp: any;
+    fieldHelpInline: any;
+    error: any;
+    warning: any;
+    info: any;
+    tooltipId: any;
+    fieldHelpId: any;
+    helpTabIndex: any;
+    label: any;
+    labelId: any;
+    labelAlign: any;
+    labelHelp: any;
+    labelHelpIcon: any;
+    labelInline: any;
+    labelSpacing?: number | undefined;
+    labelWidth: any;
+    id: any;
+    reverse: any;
+    isOptional: any;
+    useValidationIcon: any;
+    adaptiveLabelBreakpoint: any;
+    isRequired: any;
+    validationIconId: any;
+}): JSX.Element;
+declare namespace FormField {
+    const propTypes: {
+        children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        disabled: PropTypes.Requireable<boolean>;
+        "data-component": PropTypes.Requireable<string>;
+        "data-role": PropTypes.Requireable<string>;
+        "data-element": PropTypes.Requireable<string>;
+        fieldHelp: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        fieldHelpInline: PropTypes.Requireable<boolean>;
+        error: (props: any, propName: any, componentName: any, ...rest: any[]) => Error | null;
+        warning: (props: any, propName: any, componentName: any, ...rest: any[]) => Error | null;
+        info: (props: any, propName: any, componentName: any, ...rest: any[]) => Error | null;
+        tooltipId: PropTypes.Requireable<string>;
+        fieldHelpId: PropTypes.Requireable<string>;
+        helpTabIndex: PropTypes.Requireable<string | number>;
+        id: PropTypes.Validator<string>;
+        isOptional: PropTypes.Requireable<boolean>;
+        label: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        labelId: PropTypes.Requireable<string>;
+        labelAlign: PropTypes.Requireable<string>;
+        labelHelp: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        labelHelpIcon: PropTypes.Requireable<string>;
+        labelInline: PropTypes.Requireable<boolean>;
+        /** Spacing between label and a field for inline label, given number will be multiplied by base spacing unit (8) */
+        labelSpacing: PropTypes.Requireable<number>;
+        labelWidth: PropTypes.Requireable<number>;
+        reverse: PropTypes.Requireable<boolean>;
+        useValidationIcon: PropTypes.Requireable<boolean>;
+        /** Breakpoint for adaptive label (inline labels change to top aligned). Enables the adaptive behaviour when set */
+        adaptiveLabelBreakpoint: PropTypes.Requireable<number>;
+        /** Flag to configure component as mandatory */
+        isRequired: PropTypes.Requireable<boolean>;
+        /** Id of the validation icon */
+        validationIconId: PropTypes.Requireable<string>;
+    };
+}
+import PropTypes from "prop-types";

package/esm/__internal__/form-field/form-field.component.js

@@ -0,0 +1,137 @@
+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 } from "react";
+import PropTypes from "prop-types";
+import styledSystemPropTypes from "@styled-system/prop-types";
+import { filterStyledSystemMarginProps } from "../../style/utils";
+import FormFieldStyle, { FieldLineStyle } from "./form-field.style";
+import Label from "../label";
+import FieldHelp from "../field-help";
+import tagComponent from "../utils/helpers/tags/tags";
+import { TabContext } from "../../components/tabs/tab";
+import useIsAboveBreakpoint from "../../hooks/__internal__/useIsAboveBreakpoint";
+const marginPropTypes = filterStyledSystemMarginProps(styledSystemPropTypes.space);
+
+const FormField = ({
+  children,
+  disabled,
+  fieldHelp: fieldHelpContent,
+  fieldHelpInline,
+  error,
+  warning,
+  info,
+  tooltipId,
+  fieldHelpId,
+  helpTabIndex,
+  label,
+  labelId,
+  labelAlign,
+  labelHelp,
+  labelHelpIcon,
+  labelInline,
+  labelSpacing = 2,
+  labelWidth,
+  id,
+  reverse,
+  isOptional,
+  useValidationIcon,
+  adaptiveLabelBreakpoint,
+  isRequired,
+  validationIconId,
+  ...rest
+}) => {
+  const context = useContext(TabContext);
+  const largeScreen = useIsAboveBreakpoint(adaptiveLabelBreakpoint);
+  let inlineLabel = labelInline;
+
+  if (adaptiveLabelBreakpoint) {
+    inlineLabel = largeScreen;
+  }
+
+  useEffect(() => {
+    if (context && context.setError && context.setWarning && context.setInfo) {
+      context.setError(id, !!error);
+      context.setWarning(id, !!warning);
+      context.setInfo(id, !!info);
+    }
+  }, [id, context, error, warning, info]);
+  const marginProps = filterStyledSystemMarginProps(rest);
+  const fieldHelp = fieldHelpContent ? /*#__PURE__*/React.createElement(FieldHelp, {
+    labelInline: inlineLabel,
+    labelWidth: labelWidth,
+    id: fieldHelpId
+  }, fieldHelpContent) : null;
+  return /*#__PURE__*/React.createElement(FormFieldStyle, _extends({}, tagComponent(rest["data-component"], rest), marginProps), /*#__PURE__*/React.createElement(FieldLineStyle, {
+    inline: inlineLabel
+  }, reverse && children, label && /*#__PURE__*/React.createElement(Label, {
+    labelId: labelId,
+    align: labelAlign,
+    disabled: disabled,
+    error: error,
+    warning: warning,
+    info: info,
+    help: labelHelp,
+    tooltipId: tooltipId,
+    helpTabIndex: helpTabIndex,
+    htmlFor: id,
+    helpIcon: labelHelpIcon,
+    inline: inlineLabel,
+    width: labelWidth,
+    optional: isOptional,
+    useValidationIcon: useValidationIcon,
+    pr: !reverse ? labelSpacing : undefined,
+    pl: reverse ? labelSpacing : undefined,
+    isRequired: isRequired,
+    validationIconId: validationIconId
+  }, label), fieldHelpInline && fieldHelp, !reverse && children), !fieldHelpInline && fieldHelp);
+};
+
+const errorPropType = (props, propName, componentName, ...rest) => {
+  if (props[propName] && props.disabled) {
+    return new Error(`Prop \`${propName}\` cannot be used in conjunction with \`disabled\`. ` + "Use `readOnly` if you require users to see validations with a non-interactive field");
+  }
+
+  return PropTypes.oneOfType([PropTypes.bool, PropTypes.string])(props, propName, componentName, ...rest);
+};
+
+FormField.propTypes = {
+  /** Styled system margin props */
+  ...marginPropTypes,
+  children: PropTypes.node,
+  disabled: PropTypes.bool,
+  "data-component": PropTypes.string,
+  "data-role": PropTypes.string,
+  "data-element": PropTypes.string,
+  fieldHelp: PropTypes.node,
+  fieldHelpInline: PropTypes.bool,
+  error: errorPropType,
+  warning: errorPropType,
+  info: errorPropType,
+  tooltipId: PropTypes.string,
+  fieldHelpId: PropTypes.string,
+  helpTabIndex: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+  id: PropTypes.string.isRequired,
+  isOptional: PropTypes.bool,
+  label: PropTypes.node,
+  labelId: PropTypes.string,
+  labelAlign: PropTypes.oneOf(["left", "right"]),
+  labelHelp: PropTypes.node,
+  labelHelpIcon: PropTypes.string,
+  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]),
+  labelWidth: PropTypes.number,
+  reverse: PropTypes.bool,
+  useValidationIcon: PropTypes.bool,
+
+  /** 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 */
+  isRequired: PropTypes.bool,
+
+  /** Id of the validation icon */
+  validationIconId: PropTypes.string
+};
+export default FormField;

package/esm/__internal__/form-field/form-field.d.ts

@@ -0,0 +1,68 @@
+import * as React from "react";
+import { MarginProps } from "styled-system";
+import { ValidationPropTypes } from "../validations";
+
+export interface CommonFormFieldPropTypes
+  extends MarginProps,
+    ValidationPropTypes {
+  /** If true, the component will be disabled */
+  disabled?: boolean;
+  /** Help content to be displayed under an input */
+  fieldHelp?: React.ReactNode;
+  /** The unique id of the Help component tooltip, used for accessibility */
+  tooltipId?: string;
+  /** The unique id of the FieldHelp component */
+  fieldHelpId?: string;
+  /** Overrides the default tabindex of the Help component */
+  helpTabIndex?: number | string;
+  /** Label content */
+  label?: React.ReactNode;
+  /** Text alignment of the label */
+  labelAlign?: "left" | "right";
+  /** A message that the Help component will display */
+  labelHelp?: React.ReactNode;
+  /** Help Icon type */
+  labelHelpIcon?: string;
+  /** The unique id of the label element */
+  labelId?: string;
+  /** When true label is inline */
+  labelInline?: boolean;
+  /** Spacing between label and a field for inline label, given number will be multiplied by base spacing unit (8) */
+  labelSpacing?: 1 | 2;
+  /** Label width */
+  labelWidth?: number;
+  /** If true the label switches position with the input */
+  reverse?: boolean;
+  /** Id of the validation icon */
+  validationIconId?: string;
+}
+
+export interface FormFieldPropTypes extends CommonFormFieldPropTypes {
+  /** Breakpoint for adaptive label (inline labels change to top aligned). Enables the adaptive behaviour when set */
+  adaptiveLabelBreakpoint?: number;
+  /** Content to be rendered inside the FormField */
+  children?: React.ReactNode;
+  /**
+   * If true, the FieldHelp will be displayed inline
+   * To be used with labelInline prop set to true
+   */
+  fieldHelpInline?: boolean;
+  /** Id of the element a label should be bound to */
+  id: string;
+  /** [Legacy] Flag to configure component as optional in Form */
+  isOptional?: boolean;
+  /** Flag to configure component as mandatory */
+  isRequired?: boolean;
+  /** Whether to show the validation icon */
+  useValidationIcon?: boolean;
+  /** Identifier used for testing purposes, applied to the root element of the component. */
+  "data-component"?: string;
+  /** Identifier used for testing purposes, applied to the root element of the component. */
+  "data-element"?: string;
+  /** Identifier used for testing purposes, applied to the root element of the component. */
+  "data-role"?: string;
+}
+
+declare function FormField(props: FormFieldPropTypes): JSX.Element;
+
+export default FormField;

package/esm/__internal__/form-field/form-field.style.d.ts

@@ -0,0 +1,3 @@
+export default FormFieldStyle;
+export const FieldLineStyle: import("styled-components").StyledComponent<"div", any, {}, never>;
+declare const FormFieldStyle: import("styled-components").StyledComponent<"div", any, {}, never>;

package/esm/__internal__/form-field/form-field.style.js

@@ -0,0 +1,30 @@
+import styled from "styled-components";
+import { space } from "styled-system";
+import BaseTheme from "../../style/themes/base";
+const FormFieldStyle = styled.div`
+  & + & {
+    margin-top: 16px;
+  }
+
+  &&& {
+    ${space}
+  }
+`;
+FormFieldStyle.defaultProps = {
+  theme: BaseTheme
+};
+const FieldLineStyle = styled.div`
+  ${({
+  inline
+}) => {
+  if (inline) {
+    return `
+        display: flex;
+      `;
+  }
+
+  return "display: block;";
+}}
+`;
+export { FieldLineStyle };
+export default FormFieldStyle;

package/esm/__internal__/form-field/index.d.ts

@@ -0,0 +1,5 @@
+export {
+  default,
+  CommonFormFieldPropTypes,
+  FormFieldPropTypes,
+} from "./form-field";

package/esm/__internal__/form-field/index.js

@@ -0,0 +1 @@
+export { default } from "./form-field.component";

package/esm/__internal__/full-screen-heading/full-screen-heading.component.d.ts

@@ -0,0 +1,3 @@
+export default FullScreenHeading;
+declare const FullScreenHeading: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
+import React from "react";

package/esm/__internal__/full-screen-heading/full-screen-heading.component.js

@@ -0,0 +1,19 @@
+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 tagComponent from "../utils/helpers/tags/tags";
+import StyledFullScreenHeading, { StyledHeaderContainer } from "./full-screen-heading.style";
+const FullScreenHeading = /*#__PURE__*/React.forwardRef((props, ref) => {
+  const {
+    children,
+    ...otherProps
+  } = props;
+  return /*#__PURE__*/React.createElement(StyledFullScreenHeading, _extends({}, otherProps, tagComponent("full-screen-heading", props), {
+    ref: ref
+  }), /*#__PURE__*/React.createElement(StyledHeaderContainer, null, children));
+});
+FullScreenHeading.propTypes = {
+  children: PropTypes.node
+};
+export default FullScreenHeading;

package/esm/__internal__/full-screen-heading/full-screen-heading.style.d.ts

@@ -0,0 +1,3 @@
+export const StyledHeaderContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
+export default StyledFullScreenHeading;
+declare const StyledFullScreenHeading: import("styled-components").StyledComponent<"div", any, {}, never>;

package/esm/__internal__/full-screen-heading/full-screen-heading.style.js

@@ -0,0 +1,39 @@
+import styled, { css } from "styled-components";
+import { StyledHeader, StyledHeading } from "../../components/heading/heading.style";
+export const StyledHeaderContainer = styled.div`
+  display: flex;
+  flex-wrap: wrap;
+`;
+const StyledFullScreenHeading = styled.div`
+  ${({
+  hasContent
+}) => hasContent && css`
+      border-bottom: 1px solid var(--colorsUtilityMajor050);
+    `}
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+
+  padding: 0 16px;
+  @media screen and (min-width: 600px) {
+    padding: 0 24px;
+  }
+  @media screen and (min-width: 960px) {
+    padding: 0 32px;
+  }
+  @media screen and (min-width: 1260px) {
+    padding: 0 40px;
+  }
+
+  ${StyledHeading} {
+    width: auto;
+    margin-bottom: 24px;
+
+    ${StyledHeader} {
+      background-color: transparent;
+      padding-bottom: 0;
+      margin: 22px 24px 0 0;
+    }
+  }
+`;
+export default StyledFullScreenHeading;

package/esm/__internal__/full-screen-heading/index.d.ts

@@ -0,0 +1 @@
+export { default } from "./full-screen-heading.component";

package/esm/__internal__/full-screen-heading/index.js

@@ -0,0 +1 @@
+export { default } from "./full-screen-heading.component";

package/esm/__internal__/i18n-context/index.d.ts

@@ -0,0 +1,2 @@
+declare var _default: import("react").Context<import("../../locales/locale").default>;
+export default _default;

package/esm/__internal__/i18n-context/index.js

@@ -0,0 +1,3 @@
+import { createContext } from "react";
+import enGB from "../../locales/en-gb";
+export default /*#__PURE__*/createContext(enGB);

package/esm/__internal__/input/extract-props/extract-props.d.ts

@@ -0,0 +1 @@
+export default function extractProps(props: any, reactComponent: any): {};

package/esm/__internal__/input/extract-props/extract-props.js

@@ -0,0 +1,11 @@
+export default function extractProps(props, reactComponent) {
+  const expectedKeys = reactComponent.safeProps;
+  const mainObjectKeys = Object.keys(props);
+  const filteredKeys = mainObjectKeys.filter(key => expectedKeys.includes(key));
+  const filteredObject = filteredKeys.reduce((obj, key) => {
+    return { ...obj,
+      [key]: props[key]
+    };
+  }, {});
+  return filteredObject;
+}

package/esm/__internal__/input/extract-props/index.d.ts

@@ -0,0 +1 @@
+export { default } from "./extract-props";

package/esm/__internal__/input/extract-props/index.js

@@ -0,0 +1 @@
+export { default } from "./extract-props";

package/esm/__internal__/input/index.d.ts

@@ -0,0 +1,5 @@
+export { default, InputProps, CommonInputProps } from "./input";
+export {
+  InputPresentationProps,
+  CommonInputPresentationProps,
+} from "./input-presentation";

package/esm/__internal__/input/index.js

@@ -0,0 +1,4 @@
+import Input from "./input.component";
+import InputPresentation from "./input-presentation.component";
+export { Input, InputPresentation };
+export default Input;

package/esm/__internal__/input/input-presentation.component.d.ts

@@ -0,0 +1,28 @@
+export default InputPresentation;
+declare function InputPresentation({ children, positionedChildren, inputWidth, align, disabled, readOnly, size, error, warning, info, }: {
+    children: any;
+    positionedChildren: any;
+    inputWidth: any;
+    align: any;
+    disabled: any;
+    readOnly: any;
+    size: any;
+    error: any;
+    warning: any;
+    info: any;
+}): JSX.Element;
+declare namespace InputPresentation {
+    namespace propTypes {
+        const children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        const align: PropTypes.Requireable<string>;
+        const disabled: PropTypes.Requireable<boolean>;
+        const inputWidth: PropTypes.Requireable<number>;
+        const readOnly: PropTypes.Requireable<boolean>;
+        const positionedChildren: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        const size: PropTypes.Requireable<string>;
+        const error: PropTypes.Requireable<string | boolean>;
+        const warning: PropTypes.Requireable<string | boolean>;
+        const info: PropTypes.Requireable<string | boolean>;
+    }
+}
+import PropTypes from "prop-types";