@dnanpm/styleguide 3.7.0 → 3.7.2

package/build/es/components/Tabs/Tabs.d.ts

@@ -0,0 +1,45 @@
+import type { MouseEvent, ReactNode } from 'react';
+import React from 'react';
+import type { Props as TabProps } from '../Tab/Tab';
+interface Props extends Omit<TabProps, 'label' | 'children' | 'activeTab' | 'onClick'> {
+    /**
+     * Content of the component
+     *
+     * @type Tab
+     */
+    children: ReactNode;
+    /**
+     * Allows to pass default tab explicitly
+     *
+     * @default children[0].props.label
+     */
+    defaultTab?: string;
+    /**
+     * Allows to stretch tabs list to full container width
+     */
+    isFullWidth?: boolean;
+    /**
+     * Allows to reduce gap between tabs in `underlined` type
+     */
+    isNarrowUnderlined?: boolean;
+    /**
+     * On tab change callback
+     *
+     * @deprecated Use `onClick` property
+     */
+    onChange?: (tab: string) => void;
+    /**
+     * Allows to pass common mouse click callback to all children
+     */
+    onClick?: (e: MouseEvent<HTMLElement>) => void;
+    /**
+     * Allows to pass a custom className
+     *
+     * @deprecated Prefix 'tabs' is deprecated and will be removed in next major version
+     */
+    className?: string;
+}
+/** @visibleName Tabs */
+declare const Tabs: ({ type, "data-testid": dataTestId, ...props }: Props) => React.JSX.Element | null;
+/** @component */
+export default Tabs;

package/build/es/components/Tabs/Tabs.js

@@ -10,7 +10,7 @@ const Tablist = styled.ul `
     flex-flow: row wrap;
     padding: 0;
 
-    ${({ isFullWidth }) => isFullWidth &&
+    ${({ isFullWidth }) => isFullWidth &&
     `
         align-items: stretch;
 
@@ -20,8 +20,8 @@ const Tablist = styled.ul `
         }
     `}
 
-    ${({ $type, isNarrowUnderlined }) => {
-    if ($type === 'box' || $type === 'default' || $type === 'panel') {
+    ${({ $type, isNarrowUnderlined }) => {
+    if ($type === 'box' || $type === 'default' || $type === 'panel') {
         return `
                 margin: 0;
                 
@@ -39,75 +39,75 @@ const Tablist = styled.ul `
                     border-right: 1px solid ${theme.color.line.L03};
                     border-top-right-radius: ${theme.radius.default};
                 }
-            `;
-    }
-    if ($type === 'underlined') {
+            `;
+    }
+    if ($type === 'underlined') {
         return `
                 gap: ${isNarrowUnderlined ? '1.25rem' : '2.5rem'};
                 border-bottom: 1px solid ${theme.color.line.L02};
-            `;
-    }
-    if ($type === 'gray') {
+            `;
+    }
+    if ($type === 'gray') {
         return `
                 gap: 1.25rem;
-            `;
-    }
-    return '';
+            `;
+    }
+    return '';
 }}
-`;
+`;
 const ContentContainer = styled.div `
-    ${({ $type, isFullWidth }) => {
-    if ($type === 'box' || $type === 'default') {
+    ${({ $type, isFullWidth }) => {
+    if ($type === 'box' || $type === 'default') {
         return `
                 border-top-left-radius: 0;
                 ${isFullWidth ? 'border-top-right-radius: 0;' : ''}
-            `;
-    }
-    if ($type === 'panel') {
+            `;
+    }
+    if ($type === 'panel') {
         return `
                 border-top: 1px solid ${theme.color.line.L03};
-            `;
-    }
-    if ($type === 'underlined' || $type === 'gray') {
+            `;
+    }
+    if ($type === 'underlined' || $type === 'gray') {
         return `
                 margin-top: ${theme.grid.gutter};
-            `;
-    }
-    return '';
+            `;
+    }
+    return '';
 }}
-`;
-/** @visibleName Tabs */
-const Tabs = (_a) => {
-    var { type = 'box', 'data-testid': dataTestId } = _a, props = __rest(_a, ["type", 'data-testid']);
-    const [activeTab, setActiveTab] = useState(props.defaultTab);
-    const tabs = Children.map(props.children, child => isValidElement(child) && child.type === Tab ? child : null);
-    const onClickTabItem = (tab, e) => {
-        setActiveTab(tab);
-        if (tab !== activeTab) {
-            if (props.onChange) {
-                props.onChange(tab);
-            }
-            if (props.onClick && e) {
-                props.onClick(e);
-            }
-        }
-    };
-    if (!tabs) {
-        return null;
-    }
-    const outerActiveTab = tabs.find(child => child.props.isActive || child.props.activeTab === child.props.label);
-    if (!activeTab) {
-        setActiveTab((outerActiveTab === null || outerActiveTab === void 0 ? void 0 : outerActiveTab.props.label) || tabs[0].props.label);
-    }
-    return (React__default.createElement("div", { className: props.className ? `tabs ${props.className}` : 'tabs', "data-testid": dataTestId },
-        React__default.createElement(Tablist, { role: "tablist", "$type": props.tabStyle || type, isFullWidth: props.isFullWidth, isNarrowUnderlined: props.isNarrowUnderlined }, Children.map(props.children, tab => isValidElement(tab) &&
-            tab.type === Tab && (React__default.createElement(Tab, { id: tab.props.id, key: tab.props.label, label: tab.props.label, type: props.tabStyle || type, isActive: tab.props.isActive
-                ? tab.props.isActive
-                : activeTab === tab.props.label, activeTab: tab.props.activeTab, onClick: onClickTabItem, className: tab.props.className, "data-testid": tab.props['data-testid'] })))),
-        React__default.createElement(ContentContainer, { role: "tabpanel", "$type": props.tabStyle || type, isFullWidth: props.isFullWidth, as: (type === 'box' || type === 'default') && !props.tabStyle ? Box : undefined }, Children.map(props.children, tab => isValidElement(tab) &&
-            tab.type === Tab &&
-            (tab.props.isActive || tab.props.label === activeTab) &&
-            tab.props.children))));
+`;
+/** @visibleName Tabs */
+const Tabs = (_a) => {
+    var { type = 'box', 'data-testid': dataTestId } = _a, props = __rest(_a, ["type", 'data-testid']);
+    const [activeTab, setActiveTab] = useState(props.defaultTab);
+    const tabs = Children.map(props.children, child => isValidElement(child) && child.type === Tab ? child : null);
+    const onClickTabItem = (tab, e) => {
+        setActiveTab(tab);
+        if (tab !== activeTab) {
+            if (props.onChange) {
+                props.onChange(tab);
+            }
+            if (props.onClick && e) {
+                props.onClick(e);
+            }
+        }
+    };
+    if (!tabs) {
+        return null;
+    }
+    const outerActiveTab = tabs.find(child => child.props.isActive || child.props.activeTab === child.props.label);
+    if (!activeTab) {
+        setActiveTab((outerActiveTab === null || outerActiveTab === void 0 ? void 0 : outerActiveTab.props.label) || tabs[0].props.label);
+    }
+    return (React__default.createElement("div", { className: props.className ? `tabs ${props.className}` : 'tabs', "data-testid": dataTestId },
+        React__default.createElement(Tablist, { role: "tablist", "$type": props.tabStyle || type, isFullWidth: props.isFullWidth, isNarrowUnderlined: props.isNarrowUnderlined }, Children.map(props.children, tab => isValidElement(tab) &&
+            tab.type === Tab && (React__default.createElement(Tab, { id: tab.props.id, key: tab.props.label, label: tab.props.label, type: props.tabStyle || type, isActive: tab.props.isActive
+                ? tab.props.isActive
+                : activeTab === tab.props.label, activeTab: tab.props.activeTab, onClick: onClickTabItem, className: tab.props.className, "data-testid": tab.props['data-testid'] })))),
+        React__default.createElement(ContentContainer, { role: "tabpanel", "$type": props.tabStyle || type, isFullWidth: props.isFullWidth, as: (type === 'box' || type === 'default') && !props.tabStyle ? Box : undefined }, Children.map(props.children, tab => isValidElement(tab) &&
+            tab.type === Tab &&
+            (tab.props.isActive || tab.props.label === activeTab) &&
+            tab.props.children))));
 };
 
 export { Tabs as default };

package/build/es/components/Textarea/Textarea.d.ts

@@ -0,0 +1,95 @@
+import type { ChangeEvent, FocusEvent, KeyboardEvent } from 'react';
+import React from 'react';
+type InputStatus = 'none' | 'success' | 'error' | 'comment';
+interface Props {
+    /**
+     * Unique ID for the input element
+     */
+    id: string;
+    /**
+     * Name of the input element
+     */
+    name: string;
+    /**
+     * Default value of input element
+     */
+    value?: string | number;
+    /**
+     * Text to be passed down to `LabelText` component. Acts as the input element label
+     */
+    label?: string;
+    /**
+     * Text of placeholder for the input value
+     */
+    placeholder?: string;
+    /**
+     * Integer attribute indicating the sequence of keyboard navigation
+     */
+    tabIndex?: number;
+    /**
+     * On input change callback
+     */
+    onChange?: (val: string, e: ChangeEvent<HTMLTextAreaElement>) => void;
+    /**
+     * On input blur callback
+     */
+    onBlur?: (val: string, e: FocusEvent<HTMLTextAreaElement>) => void;
+    /**
+     * On input focus callback
+     */
+    onFocus?: (e: FocusEvent<HTMLTextAreaElement>) => void;
+    /**
+     * On input key press callback
+     */
+    onKeyPress?: (e: KeyboardEvent<HTMLTextAreaElement>) => void;
+    /**
+     * On input key down callback
+     */
+    onKeyDown?: (e: KeyboardEvent<HTMLTextAreaElement>) => void;
+    /**
+     * Allows to disable the component functionality
+     *
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Allows to set input as mandatory
+     *
+     * @default false
+     */
+    required?: boolean;
+    /**
+     * Text of the comment message when input is in comment state
+     */
+    commentMessage?: string;
+    /**
+     * Allows to change the amount of rows for textarea element
+     *
+     * @default 3
+     */
+    height?: number;
+    /**
+     * Depending on the passed status, the styling changes and additional elements are shown
+     *
+     * @param {InputStatus} none Default styling
+     * @param {InputStatus} success Displays `success` icon with `theme.color.notification.success` color in the input element
+     * @param {InputStatus} error Displays `error` icon with `theme.color.notification.error` color in the input element and error message underneath the input
+     * @param {InputStatus} comment Displays comment message underneath the input
+     */
+    status?: InputStatus;
+    /**
+     * Text of the error message when textarea is in error state
+     */
+    errorMessage?: string;
+    /**
+     * Allows to pass a custom className
+     */
+    className?: string;
+    /**
+     * Allows to pass testid string for testing purposes
+     */
+    'data-testid'?: string;
+}
+declare const Textarea: ({ height, "data-testid": dataTestId, ...props }: Props) => React.JSX.Element;
+/** @component */
+export default Textarea;

package/build/es/components/Textarea/Textarea.js

@@ -8,7 +8,7 @@ import LabelText from '../LabelText/LabelText.js';
 const FieldContainer = styled.div `
     color: ${theme.color.text.black};
     margin-bottom: ${getMultipliedSize(theme.base.baseWidth, 1)};
-`;
+`;
 const StyledTextarea = styled.textarea `
     display: block;
     font-family: ${theme.fontFamily.default};
@@ -41,42 +41,42 @@ const StyledTextarea = styled.textarea `
     &::placeholder {
         color: ${theme.color.text.black}${theme.color.transparency.T40};
     }
-`;
+`;
 const Message = styled.div `
     font-size: ${theme.fontSize.s};
     font-weight: ${theme.fontWeight.book};
     line-height: ${theme.lineHeight.s};
     color: ${theme.color.text.gray};
     margin-top: ${getMultipliedSize(theme.base.baseHeight, 0.5)};
-`;
+`;
 const ErrorMessage = styled(Message) `
     font-weight: ${theme.fontWeight.medium};
     color: ${theme.color.notification.error};
-`;
-const Textarea = (_a) => {
-    var { height = 3, 'data-testid': dataTestId } = _a, props = __rest(_a, ["height", 'data-testid']);
-    const inputRef = useRef(null);
-    const handleOnBlur = (e) => {
-        if (props.onBlur) {
-            props.onBlur(e.target.value, e);
-        }
-    };
-    const handleChange = (e) => {
-        if (props.onChange) {
-            props.onChange(e.target.value, e);
-        }
-    };
-    const onClick = (e) => {
-        e.preventDefault();
-        if (inputRef && inputRef.current) {
-            inputRef.current.focus();
-        }
-    };
-    return (React__default.createElement(FieldContainer, { className: props.className },
-        props.label && (React__default.createElement(LabelText, { htmlFor: props.id, "data-testid": dataTestId && `${dataTestId}-label`, status: props.status === 'error' ? props.status : undefined, isMandatory: props.required }, props.label)),
-        React__default.createElement(StyledTextarea, { id: props.id, name: props.name, ref: inputRef, value: props.value, rows: height, placeholder: props.placeholder, tabIndex: props.tabIndex, onChange: handleChange, onBlur: handleOnBlur, onFocus: props.onFocus, onClick: onClick, onKeyDown: props.onKeyDown, onKeyPress: props.onKeyPress, required: props.required, disabled: props.disabled, "aria-disabled": props.disabled, "aria-label": props.id, "data-testid": dataTestId }),
-        props.commentMessage && (React__default.createElement(Message, { "data-testid": dataTestId && `${dataTestId}-comment` }, props.commentMessage)),
-        props.status === 'error' && props.errorMessage && (React__default.createElement(ErrorMessage, { "data-testid": dataTestId && `${dataTestId}-error` }, props.errorMessage))));
+`;
+const Textarea = (_a) => {
+    var { height = 3, 'data-testid': dataTestId } = _a, props = __rest(_a, ["height", 'data-testid']);
+    const inputRef = useRef(null);
+    const handleOnBlur = (e) => {
+        if (props.onBlur) {
+            props.onBlur(e.target.value, e);
+        }
+    };
+    const handleChange = (e) => {
+        if (props.onChange) {
+            props.onChange(e.target.value, e);
+        }
+    };
+    const onClick = (e) => {
+        e.preventDefault();
+        if (inputRef && inputRef.current) {
+            inputRef.current.focus();
+        }
+    };
+    return (React__default.createElement(FieldContainer, { className: props.className },
+        props.label && (React__default.createElement(LabelText, { htmlFor: props.id, "data-testid": dataTestId && `${dataTestId}-label`, status: props.status === 'error' ? props.status : undefined, isMandatory: props.required }, props.label)),
+        React__default.createElement(StyledTextarea, { id: props.id, name: props.name, ref: inputRef, value: props.value, rows: height, placeholder: props.placeholder, tabIndex: props.tabIndex, onChange: handleChange, onBlur: handleOnBlur, onFocus: props.onFocus, onClick: onClick, onKeyDown: props.onKeyDown, onKeyPress: props.onKeyPress, required: props.required, disabled: props.disabled, "aria-disabled": props.disabled, "aria-label": props.id, "data-testid": dataTestId }),
+        props.commentMessage && (React__default.createElement(Message, { "data-testid": dataTestId && `${dataTestId}-comment` }, props.commentMessage)),
+        props.status === 'error' && props.errorMessage && (React__default.createElement(ErrorMessage, { "data-testid": dataTestId && `${dataTestId}-error` }, props.errorMessage))));
 };
 
 export { Textarea as default };

package/build/es/components/Toaster/Toaster.d.ts

@@ -0,0 +1,45 @@
+import type { MouseEvent, ReactNode } from 'react';
+import React from 'react';
+type ToasterType = 'info' | 'success' | 'warning' | 'error';
+interface Props {
+    /**
+     * Depending on the passed type, the color is determined
+     *
+     * @param {ToasterType} info Uses #007d91 color code as border & icon color
+     * @param {ToasterType} success Uses #e80c0c color code as border & icon color
+     * @param {ToasterType} warning Uses #00b201 color code as border & icon color
+     * @param {ToasterType} error Uses #ff7800 color code as border & icon color
+     *
+     * @default 'info'
+     */
+    type: ToasterType;
+    /**
+     * Content of the toaster
+     */
+    children?: ReactNode;
+    /**
+     * Allows to pass a custom className
+     */
+    className?: string;
+    /**
+     * Label to show for the close button in the content
+     */
+    closeLabel?: string;
+    /**
+     * Allows to pass testid string for testing purposes
+     */
+    'data-testid'?: string;
+    /**
+     * Allows to dismiss the toaster programmatically
+     *
+     * @default false
+     */
+    dismissed?: boolean;
+    /**
+     * On close button click callback
+     */
+    onClickCloseButton?: (e: MouseEvent<HTMLElement>) => void;
+}
+declare const Toaster: ({ type, "data-testid": dataTestId, ...props }: Props) => React.JSX.Element | null;
+/** @component */
+export default Toaster;

package/build/es/components/Toaster/Toaster.js

@@ -8,15 +8,15 @@ import Box from '../Box/Box.js';
 import ButtonClose from '../Button/ButtonClose.js';
 import Icon from '../Icon/Icon.js';
 
-const iconsMap = {
-    info: Info,
-    success: Check,
-    warning: Warning,
-    error: Error,
-};
+const iconsMap = {
+    info: Info,
+    success: Check,
+    warning: Warning,
+    error: Error,
+};
 const ToasterWrapper = styled__default.div `
     width: 300px;
-`;
+`;
 const StyledBox = styled__default(Box) `
     position: relative;
     font-size: ${theme.fontSize.s};
@@ -26,7 +26,7 @@ const StyledBox = styled__default(Box) `
     display: flex;
     align-items: center;
     padding-right: ${getMultipliedSize(theme.base.baseWidth, 4.5)};
-`;
+`;
 const IconWrapper = styled__default.div `
     display: none;
     align-items: center;
@@ -36,26 +36,26 @@ const IconWrapper = styled__default.div `
     ${media.xs `
         display: flex;
     `}
-`;
+`;
 const ContentWrapper = styled__default.div `
     flex: 1;
-`;
+`;
 const ButtonCloseStyled = styled__default(ButtonClose) `
     display: flex;
     top: auto;
-`;
-const Toaster = (_a) => {
-    var { type = 'info', 'data-testid': dataTestId } = _a, props = __rest(_a, ["type", 'data-testid']);
-    if (props.dismissed) {
-        return null;
-    }
-    return (React__default.createElement(ToasterWrapper, { role: "alert", "aria-live": "assertive", "aria-atomic": "true", className: props.className, "data-testid": dataTestId },
-        React__default.createElement(StyledBox, { type: type, padding: getMultipliedSize(theme.base.baseWidth, 1), elevation: "extraHigh" },
-            React__default.createElement(IconWrapper, null,
-                React__default.createElement(Icon, { icon: iconsMap[type], size: "2rem", color: theme.color.notification[type] })),
-            React__default.createElement(ContentWrapper, null, props.children),
-            React__default.createElement(ButtonCloseStyled, { "aria-label": props.closeLabel, onClick: props.onClickCloseButton },
-                React__default.createElement(Icon, { icon: Close, color: theme.color.text.black })))));
+`;
+const Toaster = (_a) => {
+    var { type = 'info', 'data-testid': dataTestId } = _a, props = __rest(_a, ["type", 'data-testid']);
+    if (props.dismissed) {
+        return null;
+    }
+    return (React__default.createElement(ToasterWrapper, { role: "alert", "aria-live": "assertive", "aria-atomic": "true", className: props.className, "data-testid": dataTestId },
+        React__default.createElement(StyledBox, { type: type, padding: getMultipliedSize(theme.base.baseWidth, 1), elevation: "extraHigh" },
+            React__default.createElement(IconWrapper, null,
+                React__default.createElement(Icon, { icon: iconsMap[type], size: "2rem", color: theme.color.notification[type] })),
+            React__default.createElement(ContentWrapper, null, props.children),
+            React__default.createElement(ButtonCloseStyled, { "aria-label": props.closeLabel, onClick: props.onClickCloseButton },
+                React__default.createElement(Icon, { icon: Close, color: theme.color.text.black })))));
 };
 
 export { Toaster as default };

package/build/es/components/Tooltip/Tooltip.d.ts

@@ -0,0 +1,71 @@
+import type { ReactNode } from 'react';
+import React from 'react';
+import type { ITooltip as ReactTooltipProps } from 'react-tooltip';
+type Position = 'left' | 'right' | 'middle';
+interface Props {
+    /**
+     * Unique ID for the search input element
+     */
+    id: string;
+    /**
+     * Allows to set the placement of Tooltip content
+     *
+     * @param {ReactTooltipProps['place']} top Places Tooltip above the trigger element
+     * @param {ReactTooltipProps['place']} right Places Tooltip right of the trigger element
+     * @param {ReactTooltipProps['place']} bottom Places Tooltip under the trigger element
+     * @param {ReactTooltipProps['place']} left Places Tooltip left of the trigger element
+     *
+     * @default 'top'
+     */
+    placement?: ReactTooltipProps['place'];
+    /**
+     * Content of the component
+     */
+    children?: ReactNode;
+    /**
+     * Allows to set position of Tooltip icon relative to other content and adds appropriate margins
+     *
+     * @param {Position} left Tooltip component icon is on the left side of content, add right margin
+     * @param {Position} right Tooltip component icon is on the right side of content, add left margin
+     * @param {Position} middle Tooltip component icon is in the middle of content, add left and right margins
+     *
+     * @default false
+     */
+    position?: Position;
+    /**
+     * Allows to hide trigger element. Use `data-tooltip-id` on custom trigger element to attach it to the Tooltip
+     *
+     * @default false
+     */
+    hideTriggerElement?: boolean;
+    /**
+     * Allows to close Tooltip by pressing ESC key
+     *
+     * @default true
+     */
+    closeWithEsc?: boolean;
+    /**
+     * Allows to open Tooltip by clicking the trigger element instead of hovering it
+     */
+    isClickable?: boolean;
+    /**
+     * Allows to keep Tooltip open when hovered. Useful when it contains interactive elements
+     */
+    isHoverable?: boolean;
+    /**
+     * Allows to break plain text to multiple lines.
+     * Multiline content is supported by default by passing appropriate content to `children` property
+     */
+    isMultiline?: boolean;
+    /**
+     * Allows to pass a custom className
+     */
+    className?: string;
+    /**
+     * Allows to pass testid string for testing purposes
+     */
+    'data-testid'?: string;
+}
+declare const Tooltip: ({ "data-testid": dataTestId, closeWithEsc, ...props }: Props) => React.JSX.Element;
+/** @component */
+export default Tooltip;

package/build/es/components/Tooltip/Tooltip.js

@@ -12,15 +12,15 @@ const Helper = styled.div `
     display: inline;
     vertical-align: middle;
     ${({ isClickable }) => isClickable && `cursor: pointer`};
-`;
-const getArrowOverrides = () => {
-    const arrowConfig = {
-        top: ['bottom', '45deg'],
-        right: ['left', '135deg'],
-        bottom: ['top', '225deg'],
-        left: ['right', '315deg'],
-    };
-    return Object.entries(arrowConfig)
+`;
+const getArrowOverrides = () => {
+    const arrowConfig = {
+        top: ['bottom', '45deg'],
+        right: ['left', '135deg'],
+        bottom: ['top', '225deg'],
+        left: ['right', '315deg'],
+    };
+    return Object.entries(arrowConfig)
         .map(([placement, value]) => `
         &.react-tooltip__place-${placement} {
             & .react-tooltip-arrow {
@@ -28,9 +28,9 @@ const getArrowOverrides = () => {
                 transform: rotate(${value[1]});
             }
         }
-    `)
-        .join('');
-};
+    `)
+        .join('');
+};
 const StyledReactTooltip = styled(Tooltip$1) `
     --rt-opacity: 1;
 
@@ -55,13 +55,13 @@ const StyledReactTooltip = styled(Tooltip$1) `
     }
 
     ${getArrowOverrides()}
-`;
-const Tooltip = (_a) => {
-    var { 'data-testid': dataTestId, closeWithEsc = true } = _a, props = __rest(_a, ['data-testid', "closeWithEsc"]);
-    return (React__default.createElement(React__default.Fragment, null,
-        !props.hideTriggerElement && (React__default.createElement(Helper, { "data-tooltip-id": props.id, isClickable: props.isClickable, className: props.className, "data-testid": dataTestId },
-            React__default.createElement(Icon, { icon: Info, size: "1rem", position: props.position }))),
-        React__default.createElement(StyledReactTooltip, { id: props.id, place: props.placement, closeOnEsc: closeWithEsc, openOnClick: props.isClickable, clickable: props.isHoverable, isMultiline: props.isMultiline, disableStyleInjection: true, "data-testid": dataTestId && `${dataTestId}-content` }, props.children)));
+`;
+const Tooltip = (_a) => {
+    var { 'data-testid': dataTestId, closeWithEsc = true } = _a, props = __rest(_a, ['data-testid', "closeWithEsc"]);
+    return (React__default.createElement(React__default.Fragment, null,
+        !props.hideTriggerElement && (React__default.createElement(Helper, { "data-tooltip-id": props.id, isClickable: props.isClickable, className: props.className, "data-testid": dataTestId },
+            React__default.createElement(Icon, { icon: Info, size: "1rem", position: props.position }))),
+        React__default.createElement(StyledReactTooltip, { id: props.id, place: props.placement, closeOnEsc: closeWithEsc, openOnClick: props.isClickable, clickable: props.isHoverable, isMultiline: props.isMultiline, disableStyleInjection: true, "data-testid": dataTestId && `${dataTestId}-content` }, props.children)));
 };
 
 export { Tooltip as default };