carbon-react 105.1.2 → 105.2.0

package/esm/components/button/button.config.d.ts

@@ -1,3 +1,4 @@
-export const BUTTON_VARIANTS: string[];
-export const BUTTON_SIZES: string[];
-export const BUTTON_ICON_POSITIONS: string[];
+import { ButtonTypes } from "./button.component";
+export declare const BUTTON_VARIANTS: ButtonTypes[];
+export declare const BUTTON_SIZES: string[];
+export declare const BUTTON_ICON_POSITIONS: string[];

package/esm/components/button/button.style.d.ts

@@ -1,9 +1,7 @@
-export const StyledButtonSubtext: import("styled-components").StyledComponent<"span", any, {}, never>;
-export default StyledButton;
-declare const StyledButton: import("styled-components").StyledComponent<"button", any, {
-    iconOnly: any;
-    disabled: any;
-    buttonType: any;
-    size: any;
-    destructive: any;
+import { SpaceProps } from "styled-system";
+import { ButtonProps } from "./button.component";
+declare const StyledButton: import("styled-components").StyledComponent<"button", any, SpaceProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, string | number | symbol> & Omit<ButtonProps, "as"> & {
+    iconOnly?: boolean | undefined;
 }, never>;
+export declare const StyledButtonSubtext: import("styled-components").StyledComponent<"span", any, {}, never>;
+export default StyledButton;

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

@@ -1,65 +1,10 @@
 import styled, { css } from "styled-components";
 import { space } from "styled-system";
-import PropTypes from "prop-types";
-import propTypes from "@styled-system/prop-types";
 import BaseTheme from "../../style/themes/base";
 import buttonTypes from "./button-types.style";
 import StyledIcon from "../icon/icon.style";
-import { BUTTON_ICON_POSITIONS, BUTTON_SIZES, BUTTON_VARIANTS } from "./button.config";
-import { ICONS } from "../icon/icon-config";
-const StyledButton = styled.button`
-  ${space}
-  ${({
-  disabled,
-  noWrap
-}) => css`
-    align-items: center;
-    cursor: ${disabled ? "not-allowed" : "pointer"};
-    display: inline-flex;
-    flex-direction: column;
-    flex-flow: wrap;
-    border-radius: 0;
-
-    ${noWrap && css`
-      white-space: nowrap;
-    `}
-    justify-content: center;
-    vertical-align: middle;
-    outline-offset: 0;
-    ${stylingForType}
-  `}
-
-  ${({
-  fullWidth
-}) => fullWidth && css`
-      width: 100%;
-    `}
 
-  ${({
-  iconOnly,
-  iconPosition
-}) => css`
-    ${StyledIcon} {
-      margin-left: ${!iconOnly && iconPosition === "after" ? "var(--spacing100)" : "0px"};
-      margin-right: ${!iconOnly && iconPosition === "before" ? "var(--spacing100)" : "0px"};
-      margin-bottom: ${iconOnly ? "1px" : "0px"};
-      height: ${additionalIconStyle};
-      svg {
-        margin-top: 0;
-      }
-      ${iconOnly && "margin-left: auto; margin-right: auto"}
-    }
-  `}
-`;
-export const StyledButtonSubtext = styled.span`
-  font-size: 14px;
-  font-weight: 400;
-  display: block;
-`;
-
-function additionalIconStyle({
-  iconType
-}) {
+function additionalIconStyle(iconType) {
   if (iconType === "services") return "6px";
   return "16px";
 }
@@ -89,7 +34,7 @@ function stylingForIconOnly(size) {
 function stylingForType({
   iconOnly,
   disabled,
-  buttonType,
+  buttonType = "secondary",
   size,
   destructive
 }) {
@@ -122,46 +67,57 @@ function stylingForType({
   `;
 }
 
-StyledButton.defaultProps = {
-  theme: BaseTheme,
-  medium: true,
-  buttonType: "secondary"
-};
-StyledButton.propTypes = {
-  /** Styled system spacing props */
-  ...propTypes.space,
-
-  /** Button types for new business themes */
-  buttonType: PropTypes.oneOf(BUTTON_VARIANTS),
-
-  /** The text the button displays */
-  children: PropTypes.node.isRequired,
-
-  /** Apply destructive style to the button */
-  destructive: PropTypes.bool,
-
-  /** Apply disabled state to the button */
-  disabled: PropTypes.bool,
-
-  /** Apply fullWidth style to the button */
-  fullWidth: PropTypes.bool,
-
-  /** Apply iconOnly to display button with the icon only  */
-  iconOnly: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),
-
-  /** Defines an Icon position within the button */
-  iconPosition: PropTypes.oneOf([...BUTTON_ICON_POSITIONS, ""]),
-
-  /** Defines an Icon type within the button (see Icon for options) */
-  iconType: PropTypes.oneOf([...ICONS, ""]),
+const StyledButton = styled.button`
+  ${space}
+  ${({
+  disabled,
+  noWrap
+}) => css`
+    align-items: center;
+    cursor: ${disabled ? "not-allowed" : "pointer"};
+    display: inline-flex;
+    flex-direction: column;
+    flex-flow: wrap;
+    border-radius: 0;
 
-  /** If provided, the text inside a button will not wrap */
-  noWrap: PropTypes.bool,
+    ${noWrap && css`
+      white-space: nowrap;
+    `}
+    justify-content: center;
+    vertical-align: middle;
+    outline-offset: 0;
+    ${stylingForType}
+  `}
 
-  /** Assigns a size to the button */
-  size: PropTypes.oneOf(BUTTON_SIZES),
+  ${({
+  fullWidth
+}) => fullWidth && css`
+      width: 100%;
+    `}
 
-  /** Second text child, renders under main text, only when size is "large" */
-  subtext: PropTypes.string
+  ${({
+  iconOnly,
+  iconPosition,
+  iconType
+}) => css`
+    ${StyledIcon} {
+      margin-left: ${!iconOnly && iconPosition === "after" ? "var(--spacing100)" : "0px"};
+      margin-right: ${!iconOnly && iconPosition === "before" ? "var(--spacing100)" : "0px"};
+      margin-bottom: ${iconOnly ? "1px" : "0px"};
+      height: ${additionalIconStyle(iconType)};
+      svg {
+        margin-top: 0;
+      }
+      ${iconOnly && "margin-left: auto; margin-right: auto"}
+    }
+  `}
+`;
+export const StyledButtonSubtext = styled.span`
+  font-size: 14px;
+  font-weight: 400;
+  display: block;
+`;
+StyledButton.defaultProps = {
+  theme: BaseTheme
 };
 export default StyledButton;

package/esm/components/button/index.d.ts

@@ -1,2 +1,2 @@
-export { default } from "./button";
-export * from "./button";
+export { default, ButtonWithForwardRef } from "./button.component";
+export type { ButtonProps } from "./button.component";

package/esm/components/duelling-picklist/picklist-group/picklist-group.style.d.ts

@@ -1,5 +1,4 @@
 export const StyledGroupWrapper: import("styled-components").StyledComponent<"li", any, {}, never>;
 export const StyledPicklistGroupUl: import("styled-components").StyledComponent<"ul", any, {}, never>;
 export const StyledPicklistGroup: import("styled-components").StyledComponent<"li", any, {}, never>;
-export const StyledGroupButton: import("styled-components").StyledComponent<typeof ButtonWithForwardRef, any, {}, never>;
-import { ButtonWithForwardRef } from "../../button/button";
+export const StyledGroupButton: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("../../button").ButtonProps & import("react").RefAttributes<HTMLButtonElement>>, any, {}, never>;

package/esm/components/duelling-picklist/picklist-item/picklist-item.style.d.ts

@@ -1,5 +1,4 @@
 export const StyledPicklistItem: import("styled-components").StyledComponent<"li", any, {}, never>;
-export const StyledButton: import("styled-components").StyledComponent<typeof ButtonWithForwardRef, any, {}, never>;
+export const StyledButton: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("../../button").ButtonProps & import("react").RefAttributes<HTMLButtonElement>>, any, {}, never>;
 export const StyledLockIcon: import("styled-components").StyledComponent<typeof Icon, any, {}, never>;
-import { ButtonWithForwardRef } from "../../button/button";
 import Icon from "../../icon";

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

@@ -44,6 +44,11 @@ declare class Heading extends React.Component<any, any, any> {
      * @return {Object} JSX
      */
     get pills(): Object;
+    /**
+     * @method render
+     * @return {Object} JSX
+     */
+    render(): Object;
 }
 declare namespace Heading {
     namespace propTypes {

package/esm/components/icon/index.d.ts

@@ -1 +1,2 @@
 export { default } from "./icon";
+export * from "./icon";

package/esm/components/multi-action-button/multi-action-button.component.d.ts

@@ -1,5 +1,5 @@
 export default MultiActionButton;
-declare function MultiActionButton({ align, disabled, as, buttonType, size, children, text, subtext, ...rest }: {
+declare function MultiActionButton({ align, disabled, as, buttonType, size, children, text, subtext, "data-element": dataElement, "data-role": dataRole, ...rest }: {
     [x: string]: any;
     align?: string | undefined;
     disabled: any;
@@ -9,6 +9,8 @@ declare function MultiActionButton({ align, disabled, as, buttonType, size, chil
     children: any;
     text: any;
     subtext: any;
+    "data-element": any;
+    "data-role": any;
 }): JSX.Element;
 declare namespace MultiActionButton {
     const propTypes: {

package/esm/components/multi-action-button/multi-action-button.component.js

@@ -7,7 +7,7 @@ import { StyledMultiActionButton, StyledButtonChildrenContainer } from "./multi-
 import Button, { ButtonWithForwardRef } from "../button";
 import Events from "../../__internal__/utils/helpers/events";
 import Popover from "../../__internal__/popover";
-import { filterStyledSystemMarginProps } from "../../style/utils";
+import { filterStyledSystemMarginProps, filterOutStyledSystemSpacingProps } from "../../style/utils";
 import { defaultFocusableSelectors } from "../../__internal__/focus-trap/focus-trap-utils";
 import Logger from "../../__internal__/utils/logger";
 const marginPropTypes = filterStyledSystemMarginProps(styledSystemPropTypes.space);
@@ -22,6 +22,8 @@ const MultiActionButton = ({
   children,
   text,
   subtext,
+  "data-element": dataElement,
+  "data-role": dataRole,
   ...rest
 }) => {
   if (!deprecatedWarnTriggered && as) {
@@ -133,7 +135,6 @@ const MultiActionButton = ({
       disabled,
       displayed: showAdditionalButtons,
       onTouchStart: showButtons,
-      onClick: rest.onClick,
       onFocus: focusMainButton,
       onBlur: () => {
         isMainButtonFocused.current = false;
@@ -141,7 +142,8 @@ const MultiActionButton = ({
       onKeyDown: handleMainButtonKeyDown,
       buttonType: buttonType || as,
       size,
-      subtext
+      subtext,
+      ...filterOutStyledSystemSpacingProps(rest)
     };
 
     if (!disabled) {
@@ -185,8 +187,8 @@ const MultiActionButton = ({
     onMouseLeave: hideButtons,
     ref: ref,
     "data-component": "multi-action-button",
-    "data-element": rest["data-element"],
-    "data-role": rest["data-role"],
+    "data-element": dataElement,
+    "data-role": dataRole,
     align: align,
     displayed: showAdditionalButtons
   }, filterStyledSystemMarginProps(rest)), /*#__PURE__*/React.createElement(Button, _extends({

package/esm/components/multi-action-button/multi-action-button.d.ts

@@ -1,8 +1,10 @@
-import SplitButton from "../split-button";
+import { SplitButtonProps } from "../split-button";
 
-declare class MultiActionButton extends SplitButton {
+export interface MultiActionButtonProps extends SplitButtonProps {
   /** Button type: "primary" | "secondary" | "tertiary" */
   buttonType?: "primary" | "secondary" | "tertiary";
 }
 
+declare function MultiActionButton(props: MultiActionButtonProps): JSX.Element;
+
 export default MultiActionButton;

package/esm/components/multi-step-wizard/multi-step-wizard.d.ts

@@ -8,6 +8,21 @@ declare class MultiStepWizard extends React.Component<any, any, any> {
      * @return {void}
      */
     getChildContext(): void;
+    /**
+     * A lifecycle method that is called before initial render.
+     * Can set up state of component without causing a re-render.
+     *
+     * @method componentWillMount
+     */
+    UNSAFE_componentWillMount(): void;
+    /**
+     * A lifecycle method to update the currentStep state when a new valid value has been specified.
+     *
+     * @method componentWillReceiveProps
+     * @param {Object} props The new props passed down to the component
+     * @return {void}
+     */
+    UNSAFE_componentWillReceiveProps(nextProps: any): void;
     /**
      * Validate step props
      *
@@ -50,6 +65,13 @@ declare class MultiStepWizard extends React.Component<any, any, any> {
      * @return {Object} JSX
      */
     get wizardStepsHTML(): Object;
+    /**
+     * Renders the component.
+     *
+     * @method render
+     * @return {Object} JSX
+     */
+    render(): Object;
 }
 declare namespace MultiStepWizard {
     namespace propTypes {

package/esm/components/multi-step-wizard/step/step.d.ts

@@ -124,6 +124,12 @@ declare class Step extends React.Component<any, any, any> {
      * @return {String}
      */
     get mainClasses(): string;
+    /**
+     * Renders the component.
+     *
+     * @method render
+     */
+    render(): JSX.Element;
 }
 declare namespace Step {
     namespace propTypes {

package/esm/components/multi-step-wizard/step/step.style.d.ts

@@ -1,11 +1,13 @@
 export const StyledStep: import("styled-components").StyledComponent<"div", any, {}, never>;
 export const StyledStepContent: import("styled-components").StyledComponent<"div", any, {}, never>;
-export const StyledStepButton: import("styled-components").StyledComponent<typeof Button, any, {}, never>;
+export const StyledStepButton: import("styled-components").StyledComponent<{
+    ({ size, subtext, as, children, forwardRef, "aria-label": ariaLabel, disabled, destructive, buttonType: buttonTypeProp, iconType, iconPosition, href, m, px, noWrap, target, rel, iconTooltipMessage, iconTooltipPosition, fullWidth, ...rest }: import("../../button").ButtonProps): JSX.Element;
+    displayName: string;
+}, any, {}, never>;
 export const StyledStepIndicatorBar: import("styled-components").StyledComponent<"div", any, {}, never>;
 export const StyledStepIndicatorBackground: import("styled-components").StyledComponent<"div", any, {}, never>;
 export const StyledStepIndicatorIconContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
 export const StepIndicatorIconPlaceholder: import("styled-components").StyledComponent<"div", any, {}, never>;
 export const StepIndicatorIconContent: import("styled-components").StyledComponent<"div", any, {}, never>;
 export const StyledStepIndicatorIcon: import("styled-components").StyledComponent<typeof Icon, any, {}, never>;
-import Button from "../../button";
 import Icon from "../../icon";

package/esm/components/radio-button/radio-button-svg.component.js

@@ -1,22 +1,35 @@
 import React from "react";
+import PropTypes from "prop-types";
 import StyledCheckableInputSvgWrapper from "../../__internal__/checkable-input/checkable-input-svg-wrapper.style";
 
 const RadioButtonSvg = () => {
-  return /*#__PURE__*/React.createElement(StyledCheckableInputSvgWrapper, null, /*#__PURE__*/React.createElement("svg", {
-    focusable: "false",
-    viewBox: "0 0 15 15"
-  }, /*#__PURE__*/React.createElement("g", {
-    stroke: "none",
-    strokeWidth: "1",
-    fill: "none",
-    fillRule: "evenodd"
-  }, /*#__PURE__*/React.createElement("circle", {
-    className: "radio-button-check",
-    fill: "#FFFFFF",
-    cx: "7.5",
-    cy: "7.5",
-    r: "5"
-  }))));
+  return /*#__PURE__*/ React.createElement(
+    StyledCheckableInputSvgWrapper,
+    null,
+    /*#__PURE__*/ React.createElement(
+      "svg",
+      {
+        focusable: "false",
+        viewBox: "0 0 15 15",
+      },
+      /*#__PURE__*/ React.createElement(
+        "g",
+        {
+          stroke: "none",
+          strokeWidth: "1",
+          fill: "none",
+          fillRule: "evenodd",
+        },
+        /*#__PURE__*/ React.createElement("circle", {
+          className: "radio-button-check",
+          fill: "#FFFFFF",
+          cx: "7.5",
+          cy: "7.5",
+          r: "5",
+        })
+      )
+    )
+  );
 };
 
-export default /*#__PURE__*/React.memo(RadioButtonSvg, () => true);
+export default /*#__PURE__*/ React.memo(RadioButtonSvg, () => true);

package/esm/components/scrollable-list/scrollable-list.component.d.ts

@@ -1,8 +1,15 @@
 export default ScrollableList;
 declare class ScrollableList extends React.Component<any, any, any> {
     constructor(props: any);
+    state: {
+        selectedItem: number;
+    };
     blockOptionsHover: boolean;
     scrollBox: React.RefObject<any>;
+    UNSAFE_componentWillReceiveProps(nextProps: any): void;
+    componentDidUpdate(prevProps: any): void;
+    componentDidMount(): void;
+    componentWillUnmount(): void;
     updateScroll(item: any): void;
     setScrollTop({ item, children, listHeight, itemHeight }: {
         item: any;
@@ -28,6 +35,7 @@ declare class ScrollableList extends React.Component<any, any, any> {
         };
     }) => void;
     handleKeyDown: (e: any) => void;
+    render(): JSX.Element;
 }
 declare namespace ScrollableList {
     namespace propTypes {

package/esm/components/split-button/split-button-toggle.style.d.ts

@@ -1,8 +1,4 @@
 export default StyledSplitButtonToggle;
-declare const StyledSplitButtonToggle: import("styled-components").StyledComponent<"button", any, {
-    iconOnly: any;
-    disabled: any;
-    buttonType: any;
-    size: any;
-    destructive: any;
+declare const StyledSplitButtonToggle: import("styled-components").StyledComponent<"button", any, import("styled-system").SpaceProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, string | number | symbol> & Omit<import("../button").ButtonProps, "as"> & {
+    iconOnly?: boolean | undefined;
 }, never>;

package/esm/components/split-button/split-button.component.d.ts

@@ -1,5 +1,5 @@
 export default SplitButton;
-declare function SplitButton({ align, as, buttonType, children, disabled, iconPosition, iconType, onClick, size, subtext, text, ...rest }: {
+declare function SplitButton({ align, as, buttonType, children, disabled, iconPosition, iconType, onClick, size, subtext, text, "data-element": dataElement, "data-role": dataRole, ...rest }: {
     [x: string]: any;
     align?: string | undefined;
     as: any;
@@ -12,6 +12,8 @@ declare function SplitButton({ align, as, buttonType, children, disabled, iconPo
     size?: string | undefined;
     subtext: any;
     text: any;
+    "data-element": any;
+    "data-role": any;
 }): JSX.Element;
 declare namespace SplitButton {
     const propTypes: {

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

@@ -12,7 +12,7 @@ import StyledSplitButtonChildrenContainer from "./split-button-children.style";
 import Events from "../../__internal__/utils/helpers/events";
 import guid from "../../__internal__/utils/helpers/guid";
 import Popover from "../../__internal__/popover";
-import { filterStyledSystemMarginProps } from "../../style/utils";
+import { filterStyledSystemMarginProps, filterOutStyledSystemSpacingProps } from "../../style/utils";
 import { baseTheme } from "../../style/themes";
 import { defaultFocusableSelectors } from "../../__internal__/focus-trap/focus-trap-utils";
 import Logger from "../../__internal__/utils/logger";
@@ -32,6 +32,8 @@ const SplitButton = ({
   size = "medium",
   subtext,
   text,
+  "data-element": dataElement,
+  "data-role": dataRole,
   ...rest
 }) => {
   if (!deprecatedWarnTriggered && as) {
@@ -114,7 +116,8 @@ const SplitButton = ({
       iconType,
       onClick,
       size,
-      subtext
+      subtext,
+      ...filterOutStyledSystemSpacingProps(rest)
     };
   }
 
@@ -142,8 +145,8 @@ const SplitButton = ({
   function componentTags() {
     return {
       "data-component": "split-button",
-      "data-element": rest["data-element"],
-      "data-role": rest["data-role"]
+      "data-element": dataElement,
+      "data-role": dataRole
     };
   }
 

package/esm/components/split-button/split-button.d.ts

@@ -1,6 +1,9 @@
 import * as React from "react";
+import { MarginProps } from "styled-system";
 
-export interface SplitButtonProps {
+export interface SplitButtonProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
+    MarginProps {
   /** Set align of the rendered content */
   align?: "left" | "right";
   /** Button type: "primary" | "secondary" for legacy theme */
@@ -23,6 +26,6 @@ export interface SplitButtonProps {
   text: string;
 }
 
-declare class SplitButton extends React.Component<SplitButtonProps> {}
+declare function SplitButton(props: SplitButtonProps): JSX.Element;
 
 export default SplitButton;

package/esm/components/tooltip/index.d.ts

@@ -1 +1,2 @@
-export { default } from "./tooltip";
+export { default } from "./tooltip.component";
+export type { TooltipProps } from "./tooltip.component";

package/esm/components/tooltip/tooltip-pointer.style.d.ts

@@ -1,2 +1,11 @@
+import { Placement } from "tippy.js";
+interface StyledTooltipPointer {
+    /** Sets position of the tooltip */
+    position?: Placement;
+    /** Defines the message type */
+    type?: string;
+    /** Override background color of the Tooltip, provide any color from palette or any valid css color value. */
+    bgColor?: string;
+}
+declare const StyledTooltipPointer: import("styled-components").StyledComponent<"div", any, StyledTooltipPointer, never>;
 export default StyledTooltipPointer;
-declare const StyledTooltipPointer: import("styled-components").StyledComponent<"div", any, {}, never>;

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

@@ -1,9 +1,8 @@
-import PropTypes from "prop-types";
 import styled, { css } from "styled-components";
 import baseTheme from "../../style/themes/base";
 import { toColor } from "../../style/utils/color";
 
-const pointerColor = (type, theme, bgColor) => {
+const pointerColor = (theme, bgColor, type) => {
   if (bgColor) return toColor(theme, bgColor);
   return type === "error" ? "var(--colorsSemanticNegative500)" : "var(--colorsSemanticNeutral500)";
 };
@@ -22,7 +21,7 @@ const StyledTooltipPointer = styled.div`
     ${position === "top" && css`
       border-left: 8px solid transparent;
       border-right: 8px solid transparent;
-      border-top: 8px solid ${pointerColor(type, theme, bgColor)};
+      border-top: 8px solid ${pointerColor(theme, bgColor, type)};
       bottom: calc(-1 * var(--spacing100));
       @-moz-document url-prefix() {
         bottom: -7px;
@@ -32,7 +31,7 @@ const StyledTooltipPointer = styled.div`
     ${position === "bottom" && css`
       border-left: 8px solid transparent;
       border-right: 8px solid transparent;
-      border-bottom: 8px solid ${pointerColor(type, theme, bgColor)};
+      border-bottom: 8px solid ${pointerColor(theme, bgColor, type)};
       top: calc(-1 * var(--spacing100));
       @-moz-document url-prefix() {
         top: -7px;
@@ -42,7 +41,7 @@ const StyledTooltipPointer = styled.div`
     ${position === "right" && css`
       border-top: 8px solid transparent;
       border-bottom: 8px solid transparent;
-      border-right: 8px solid ${pointerColor(type, theme, bgColor)};
+      border-right: 8px solid ${pointerColor(theme, bgColor, type)};
       left: calc(-1 * var(--spacing100));
       @-moz-document url-prefix() {
         left: -7px;
@@ -52,7 +51,7 @@ const StyledTooltipPointer = styled.div`
     ${position === "left" && css`
       border-top: 8px solid transparent;
       border-bottom: 8px solid transparent;
-      border-left: 8px solid ${pointerColor(type, theme, bgColor)};
+      border-left: 8px solid ${pointerColor(theme, bgColor, type)};
       right: calc(-1 * var(--spacing100));
       @-moz-document url-prefix() {
         right: -7px;
@@ -64,10 +63,4 @@ StyledTooltipPointer.defaultProps = {
   theme: baseTheme,
   position: "top"
 };
-StyledTooltipPointer.propTypes = {
-  position: PropTypes.oneOf(["bottom", "left", "right", "top"]),
-  theme: PropTypes.object,
-  type: PropTypes.string,
-  bgColor: PropTypes.string
-};
 export default StyledTooltipPointer;

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

@@ -1,3 +1,34 @@
-export default Tooltip;
-declare const Tooltip: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
 import React from "react";
+import { TooltipPositions } from "./tooltip.config";
+export declare type InputSizes = "small" | "medium" | "large";
+export interface TooltipProps {
+    /** The message to be displayed within the tooltip */
+    message: React.ReactNode;
+    /** The id attribute to use for the tooltip */
+    id?: string;
+    /** Whether to to show the Tooltip */
+    isVisible?: boolean;
+    /** Sets position of the tooltip */
+    position?: TooltipPositions;
+    /** Defines the message type */
+    type?: string;
+    /** Children elements */
+    children: React.ReactElement;
+    /** Defines the size of the tooltip content */
+    size?: "medium" | "large";
+    /** Override background color of the Tooltip, provide any color from palette or any valid css color value. */
+    bgColor?: string;
+    /** Override font color of the Tooltip, provide any color from palette or any valid css color value. */
+    fontColor?: string;
+    /**
+     * Overrides the default flip behaviour of the Tooltip,
+     * must be an array containing some or all of ["top", "bottom", "left", "right"]
+     * (see https://popper.js.org/docs/v2/modifiers/flip/#fallbackplacements)
+     */
+    flipOverrides?: TooltipPositions[];
+    target?: Element;
+    isPartOfInput?: boolean;
+    inputSize?: InputSizes;
+}
+export declare const Tooltip: React.ForwardRefExoticComponent<TooltipProps & React.RefAttributes<HTMLDivElement | null>>;
+export default Tooltip;