@itcase/ui 1.9.56 → 1.9.57

package/dist/components/Tile/Tile.js

@@ -0,0 +1,26 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import clsx from 'clsx';
+import { mergeAppearanceKeys } from 'src/utils';
+import { useAppearanceConfig } from '../../hooks/useAppearanceConfig';
+import { useDevicePropsGenerator } from '../../hooks/useDevicePropsGenerator';
+import { useStyles } from '../../hooks/useStyles';
+import { Badge } from '../Badge/Badge';
+import { Icon } from '../Icon';
+import { Text } from '../Text';
+import { Title } from '../Title';
+import { tileAppearance } from './Tile.appearance';
+const tileConfig = {
+    appearance: tileAppearance,
+    setAppearance: (appearanceConfig) => {
+        tileConfig.appearance = appearanceConfig;
+    },
+};
+function Tile(props) {
+    const { appearance, className, dataTestId, dataTour, type, title, desc, badgeValue, iconClick, before, after, isSkeleton, onClick, children, } = props;
+    const appearanceConfig = useAppearanceConfig(appearance, tileConfig);
+    const propsGenerator = useDevicePropsGenerator(props, appearanceConfig);
+    const { directionClass, alignClass, alignDirectionClass, fillClass, titleTextAlign, titleTextColor, titleTextSize, titleTextWeight, titleTextWrap, descTextColor, descTextSize, descTextWrap, borderColorClass, borderColorHoverClass, borderTypeClass, borderWidthClass, badgeAppearance, badgeAppearanceSize, badgeShape, badgeSize, badgeTextColor, badgeTextSize, icon, iconAppearance, iconFill, iconFillIcon, iconFillSize, iconShape, iconSize, iconSrc, shapeClass, shapeStrengthClass, sizeClass, widthClass, } = propsGenerator;
+    const { styles: tileStyles } = useStyles(props);
+    return (_jsx("div", { className: clsx('tile', className, fillClass && `fill_${fillClass}`, shapeClass && `shape_${shapeClass}`, shapeStrengthClass && `shape-strength_${shapeStrengthClass}`, alignClass && `align_${alignClass}`, directionClass && `direction_${directionClass}`, borderColorClass && `border-color_${borderColorClass}`, borderColorHoverClass && `border-color_hover_${borderColorHoverClass}`, borderWidthClass && `border-width_${borderWidthClass}`, borderTypeClass && `border_type_${borderTypeClass}`, sizeClass && `tile_size_${sizeClass}`, type && `tile_type_${type}`, badgeValue && `tile_state_badge`, widthClass && `width_${widthClass}`, isSkeleton && `tile_skeleton`), "data-testid": dataTestId, "data-tour": dataTour, style: tileStyles, onClick: onClick, children: _jsxs("div", { className: clsx('tile__wrapper', alignClass, alignDirectionClass), children: [before, _jsxs("div", { className: "tile__header", children: [_jsxs("div", { className: "tile__header-inner", children: [title && (_jsx(Title, { className: "tile__title", size: titleTextSize, textAlign: titleTextAlign, textColor: titleTextColor, textWeight: titleTextWeight, textWrap: titleTextWrap, children: title })), desc && (_jsx(Text, { className: "tile__text", size: descTextSize, textColor: descTextColor, textWrap: descTextWrap, children: desc }))] }), _jsxs("div", { className: "tile__header-actions", children: [badgeValue && (_jsx(Badge, { appearance: mergeAppearanceKeys(badgeAppearance, badgeAppearanceSize), className: "tile__badge", size: badgeSize, textColor: badgeTextColor, textSize: badgeTextSize, shape: badgeShape, value: badgeValue })), (icon || iconSrc) && (_jsx(Icon, { appearance: iconAppearance, className: "tile__icon", fill: iconFill, fillSize: iconFillSize, iconFill: iconFillIcon, iconSize: iconSize, imageSrc: iconSrc, shape: iconShape, SvgImage: icon, onClick: iconClick }))] })] }), children, after] }) }));
+}
+export { Tile, tileConfig };

package/dist/components/Tile/appearance/tileShape.js

@@ -0,0 +1,25 @@
+const tileAppearanceShape = {
+    circular: {
+        shape: 'circular',
+    },
+    rounded: {
+        shape: 'rounded',
+    },
+    roundedXL: {
+        shape: 'rounded',
+        shapeStrength: '2m',
+    },
+    roundedL: {
+        shape: 'rounded',
+        shapeStrength: '1_5m',
+    },
+    roundedM: {
+        shape: 'rounded',
+        shapeStrength: '1m',
+    },
+    roundedS: {
+        shape: 'rounded',
+        shapeStrength: '0_5m',
+    },
+};
+export { tileAppearanceShape };

package/dist/components/Tile/appearance/tileSize.js

@@ -0,0 +1,51 @@
+const tileAppearanceSize = {
+    sizeXL: {
+        size: 'xl',
+        titleTextSize: 'h4',
+        descTextSize: 'l',
+        badgeAppearanceSize: 'sizeM',
+        iconFillSize: '32',
+        iconSize: '24',
+    },
+    sizeL: {
+        size: 'l',
+        titleTextSize: 'h4',
+        descTextSize: 'l',
+        badgeAppearanceSize: 'sizeM',
+        iconFillSize: '24',
+        iconSize: '24',
+    },
+    sizeM: {
+        size: 'm',
+        titleTextSize: 'h4',
+        descTextSize: 'm',
+        badgeAppearanceSize: 'sizeM',
+        iconFillSize: '24',
+        iconSize: '24',
+    },
+    sizeS: {
+        size: 's',
+        titleTextSize: 'h4',
+        descTextSize: 's',
+        badgeAppearanceSize: 'sizeM',
+        iconFillSize: '24',
+        iconSize: '24',
+    },
+    sizeXS: {
+        size: 'xs',
+        titleTextSize: 'h6',
+        descTextSize: 'xs',
+        badgeAppearanceSize: 'sizeXXS',
+        iconFillSize: '12',
+        iconSize: '12',
+    },
+    sizeXXS: {
+        size: 'xxs',
+        titleTextSize: 'h6',
+        descTextSize: 'xs',
+        badgeAppearanceSize: 'sizeXXS',
+        iconFillSize: '12',
+        iconSize: '12',
+    },
+};
+export { tileAppearanceSize };

package/dist/components/Tile/appearance/tileStyle.js

@@ -0,0 +1,14 @@
+const tileAppearanceStyle = {
+    solid: {
+        borderColor: 'none',
+    },
+    outlined: {
+        fill: 'none',
+    },
+    full: {},
+    ghost: {
+        fill: 'none',
+        borderColor: 'none',
+    },
+};
+export { tileAppearanceStyle };

package/dist/components/Tile/appearance/tileSurface.js

@@ -0,0 +1,35 @@
+const tileAppearanceSurface = {
+    surfacePrimary: {
+        fill: 'surfacePrimary',
+        titleTextColor: 'surfaceTextPrimary',
+        descTextColor: 'surfaceTextPrimary',
+        borderColor: 'surfaceBorderTertiary',
+        badgeAppearance: 'accentPrimary',
+        iconAppearance: 'accentPrimary',
+    },
+    surfaceQuaternary: {
+        fill: 'surfaceQuaternary',
+        titleTextColor: 'surfaceTextPrimary',
+        descTextColor: 'surfaceTextPrimary',
+        borderColor: 'surfaceBorderTertiary',
+        badgeAppearance: 'accentPrimary',
+        iconAppearance: 'accentPrimary',
+    },
+    surfaceSecondary: {
+        fill: 'surfaceSecondary',
+        titleTextColor: 'surfaceTextPrimary',
+        descTextColor: 'surfaceTextPrimary',
+        borderColor: 'surfaceBorderTertiary',
+        badgeAppearance: 'accentPrimary',
+        iconAppearance: 'accentPrimary',
+    },
+    surfaceTertiary: {
+        fill: 'surfaceTertiary',
+        titleTextColor: 'surfaceTextPrimary',
+        descTextColor: 'surfaceTextPrimary',
+        borderColor: 'surfaceBorderTertiary',
+        badgeAppearance: 'accentPrimary',
+        iconAppearance: 'accentPrimary',
+    },
+};
+export { tileAppearanceSurface };

package/dist/components/Tile/index.js

@@ -0,0 +1,2 @@
+export { Tile, tileConfig } from './Tile';
+export { tileAppearance } from './Tile.appearance';

package/dist/components/Title/Title.appearance.js

@@ -0,0 +1,29 @@
+import { titleAppearanceAccent } from './appearance/titleAccent';
+import { titleAppearanceDanger } from './appearance/titleDanger';
+import { titleAppearanceDisabled } from './appearance/titleDisabled';
+import { titleAppearanceError } from './appearance/titleError';
+import { titleAppearanceExtra } from './appearance/titleExtra';
+import { titleAppearanceInfo } from './appearance/titleInfo';
+import { titleAppearanceRequire } from './appearance/titleRequire';
+import { titleAppearanceSize } from './appearance/titleSize';
+import { titleAppearanceSpecial } from './appearance/titleSpecial';
+import { titleAppearanceStyle } from './appearance/titleStyle';
+import { titleAppearanceSuccess } from './appearance/titleSuccess';
+import { titleAppearanceSurface } from './appearance/titleSurface';
+import { titleAppearanceWarning } from './appearance/titleWarning';
+const titleAppearance = {
+    ...titleAppearanceSize,
+    ...titleAppearanceDisabled,
+    ...titleAppearanceStyle,
+    ...titleAppearanceAccent,
+    ...titleAppearanceDanger,
+    ...titleAppearanceError,
+    ...titleAppearanceInfo,
+    ...titleAppearanceSpecial,
+    ...titleAppearanceExtra,
+    ...titleAppearanceSuccess,
+    ...titleAppearanceSurface,
+    ...titleAppearanceWarning,
+    ...titleAppearanceRequire,
+};
+export { titleAppearance };

package/dist/components/Title/Title.interface.js

@@ -0,0 +1 @@
+export {};

package/dist/components/Title/Title.js

@@ -0,0 +1,43 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMemo } from 'react';
+import clsx from 'clsx';
+import { useAppearanceConfig } from 'src/hooks/useAppearanceConfig';
+import { useDevicePropsGenerator } from 'src/hooks/useDevicePropsGenerator';
+import { useStyles } from 'src/hooks/useStyles';
+import { Icon } from 'src/components/Icon';
+import { titleAppearance } from './Title.appearance';
+const titleConfig = {
+    appearance: titleAppearance,
+    setAppearance: (appearanceConfig) => {
+        titleConfig.appearance = appearanceConfig;
+    },
+};
+function Title(props) {
+    const { appearance, className, dataTestId, dataTour, text, afterWrapper, beforeWrapper, style, tag = 'span', before, after, isActive, isDisabled, isSkeleton, onClick, children, } = props;
+    const appearanceConfig = useAppearanceConfig(appearance, titleConfig, isDisabled);
+    const propsGenerator = useDevicePropsGenerator(props, appearanceConfig);
+    const { directionClass, size, fillClass, fillHoverClass, textAlignClass, textColorActiveClass, textColorActiveHoverClass, textColorClass, textColorDisabledClass, textColorHoverClass, textFontClass, textStyleClass, textTruncateClass, textWeightClass, textWrap, heightClass, iconAfter, iconAfterFill, iconAfterFillIcon, iconAfterFillSize, iconAfterShape, iconAfterSize, iconAfterSrc, iconBadgeAppearance, iconBadgeShape, iconBadgeSize, iconBadgeTextColor, iconBadgeTextSize, iconBadgeValue, iconBefore, iconBeforeFill, iconBeforeFillIcon, iconBeforeFillSize, iconBeforeShape, iconBeforeSize, iconBeforeSrc, svgFillClass, svgFillHoverClass, widthClass, wrapperDirectionClass, onClickIconAfter, onClickIconBefore, } = propsGenerator;
+    const { styles: titleStyles, wrapper: titleWrapperStyles } = useStyles(props);
+    const Tag = useMemo(() => {
+        if (tag) {
+            return tag;
+        }
+        return size ? size : 'span';
+    }, [tag, size]);
+    return (_jsxs(Tag, { className: clsx(className, 'title', fillClass && `fill_${fillClass}`, fillHoverClass && `fill_hover_${fillHoverClass}`, svgFillClass && `svg_fill_${svgFillClass}`, svgFillHoverClass && `svg_fill_hover_${svgFillHoverClass}`, widthClass && `width_${widthClass}`, heightClass && `height_${heightClass}`, size && `title_size_${size}`, directionClass && `title_direction_${directionClass}`, isDisabled &&
+            textColorDisabledClass &&
+            `text-color_${textColorDisabledClass}`, !isActive &&
+            !isDisabled &&
+            textColorClass &&
+            `text text-color_${textColorClass}`, isActive &&
+            !isDisabled &&
+            textColorActiveClass &&
+            `text-color_active_${textColorActiveClass}`, !isActive &&
+            !isDisabled &&
+            textColorHoverClass &&
+            `text-color_hover_${textColorHoverClass}`, isActive &&
+            !isDisabled &&
+            textColorActiveHoverClass &&
+            `text-color_active_hover${textColorActiveHoverClass}`, textFontClass && `text-font_${textFontClass}`, textStyleClass && `text-style_${textStyleClass}`, textWeightClass && `text-weight_${textWeightClass}`, textWrap && `word-wrap_${textWrap}`, iconBadgeValue && 'title_badge', isSkeleton && 'title_skeleton'), "data-testid": dataTestId, "data-tour": dataTour, style: Object.assign({}, titleStyles, style), onClick: onClick, children: [before, _jsxs("span", { className: clsx(textAlignClass && `text-align_${textAlignClass}`, wrapperDirectionClass && `title_direction_${wrapperDirectionClass}`, 'title__wrapper', textTruncateClass && `text-truncate_${textTruncateClass}`), style: titleWrapperStyles, children: [(iconBefore || iconBeforeSrc) && (_jsx(Icon, { className: clsx('title__icon_before', iconBadgeValue && 'title__icon_before-badge'), fill: iconBeforeFill, fillSize: iconBeforeFillSize, badgeAppearance: iconBadgeAppearance, badgeClass: 'title__icon_before_badge', badgeShape: iconBadgeShape, badgeSize: iconBadgeSize, badgeTextColor: iconBadgeTextColor, badgeTextSize: iconBadgeTextSize, badgeValue: iconBadgeValue, iconFill: iconBeforeFillIcon, iconSize: iconBeforeSize, imageSrc: iconBeforeSrc, shape: iconBeforeShape, SvgImage: iconBefore, onClick: onClickIconBefore })), beforeWrapper, children || text, afterWrapper, (iconAfter || iconAfterSrc) && (_jsx(Icon, { className: clsx('title__icon_after', iconBadgeValue && 'title__icon_after-badge'), fill: iconAfterFill, fillSize: iconAfterFillSize, badgeAppearance: iconBadgeAppearance, badgeClass: 'title__icon_after_badge', badgeShape: iconBadgeShape, badgeSize: iconBadgeSize, badgeTextColor: iconBadgeTextColor, badgeTextSize: iconBadgeTextSize, badgeValue: iconBadgeValue, iconFill: iconAfterFillIcon, iconSize: iconAfterSize, imageSrc: iconAfterSrc, shape: iconAfterShape, SvgImage: iconAfter, onClick: onClickIconAfter }))] }), after] }));
+}
+export { Title, titleConfig };

package/dist/components/Title/appearance/titleAccent.js

@@ -0,0 +1,11 @@
+const titleAppearanceAccent = {
+    accentPrimary: {
+        fill: 'accentPrimary',
+        fillHover: 'accentHoverPrimary',
+    },
+    accentSecondary: {
+        fill: 'accentPrimary',
+        fillHover: 'accentHoverPrimary',
+    },
+};
+export { titleAppearanceAccent };

package/dist/components/Title/appearance/titleDanger.js

@@ -0,0 +1,7 @@
+const titleAppearanceDanger = {
+    dangerPrimary: {
+        fill: 'dangerPrimary',
+        fillHover: 'dangerHoverPrimary',
+    },
+};
+export { titleAppearanceDanger };

package/dist/components/Title/appearance/titleDisabled.js

@@ -0,0 +1,16 @@
+const titleAppearanceDisabled = {
+    disabledPrimary: {
+        fill: 'surfacePrimary',
+        borderColor: 'errorBorderQuaternary',
+        borderHover: 'errorBorderHoverQuaternary',
+        textColor: 'surfaceTextQuaternary',
+        iconBeforeFill: 'errorQuaternary',
+    },
+    disabledSecondary: {
+        fill: 'surfaceSecondary',
+        borderColor: 'surfaceBorderTertiary',
+        borderHover: 'surfaceBorderHoverQuaternary',
+        iconBeforeFill: 'surfaceQuaternary',
+    },
+};
+export { titleAppearanceDisabled };

package/dist/components/Title/appearance/titleError.js

@@ -0,0 +1,9 @@
+const titleAppearanceError = {
+    errorPrimary: {
+        fill: 'errorPrimary',
+        fillHover: 'errorHoverPrimary',
+        textColor: 'errorTextPrimary',
+        textColorHover: 'errorTextPrimary',
+    },
+};
+export { titleAppearanceError };

package/dist/components/Title/appearance/titleExtra.js

@@ -0,0 +1,8 @@
+const titleAppearanceExtra = {
+    extraPrimary: {
+        fill: 'extraPrimary',
+        fillHover: 'extraHoverPrimary',
+        textColor: 'extraTextPrimary',
+    },
+};
+export { titleAppearanceExtra };

package/dist/components/Title/appearance/titleInfo.js

@@ -0,0 +1,11 @@
+const titleAppearanceInfo = {
+    infoPrimary: {
+        fill: 'accentPrimary',
+        fillHover: 'accentHoverPrimary',
+    },
+    infoSecondary: {
+        fill: 'accentPrimary',
+        fillHover: 'accentHoverPrimary',
+    },
+};
+export { titleAppearanceInfo };

package/dist/components/Title/appearance/titleRequire.js

@@ -0,0 +1,16 @@
+const titleAppearanceRequire = {
+    requirePrimary: {
+        fill: 'warningTertiary',
+        borderColor: 'warningBorderQuaternary',
+        borderHover: 'warningBorderQuaternary',
+        textColor: 'surfaceTextPrimary',
+        iconBeforeFill: 'warningQuaternary',
+    },
+    requireSecondary: {
+        fill: 'surfaceSecondary',
+        borderColor: 'surfaceBorderTertiary',
+        borderHover: 'surfaceBorderQuaternary',
+        iconBeforeFill: 'surfaceQuaternary',
+    },
+};
+export { titleAppearanceRequire };

package/dist/components/Title/appearance/titleSize.js

@@ -0,0 +1,45 @@
+const titleAppearanceSize = {
+    h1: {
+        size: 'h1',
+        iconAfterFillSize: '24',
+        iconAfterSize: '24',
+        iconBeforeFillSize: '24',
+        iconBeforeSize: '24',
+    },
+    h2: {
+        size: 'h2',
+        iconAfterFillSize: '24',
+        iconAfterSize: '24',
+        iconBeforeFillSize: '24',
+        iconBeforeSize: '24',
+    },
+    h3: {
+        size: 'h3',
+        iconAfterFillSize: '24',
+        iconAfterSize: '24',
+        iconBeforeFillSize: '24',
+        iconBeforeSize: '24',
+    },
+    h4: {
+        size: 'h4',
+        iconAfterFillSize: '24',
+        iconAfterSize: '24',
+        iconBeforeFillSize: '24',
+        iconBeforeSize: '24',
+    },
+    h5: {
+        size: 'h5',
+        iconAfterFillSize: '20',
+        iconAfterSize: '20',
+        iconBeforeFillSize: '20',
+        iconBeforeSize: '20',
+    },
+    h6: {
+        size: 'h6',
+        iconAfterFillSize: '16',
+        iconAfterSize: '16',
+        iconBeforeFillSize: '16',
+        iconBeforeSize: '16',
+    },
+};
+export { titleAppearanceSize };

package/dist/components/Title/appearance/titleSpecial.js

@@ -0,0 +1,7 @@
+const titleAppearanceSpecial = {
+    specialPrimary: {
+        fill: 'specialPrimary',
+        fillHover: 'specialHoverPrimary',
+    },
+};
+export { titleAppearanceSpecial };

package/dist/components/Title/appearance/titleStyle.js

@@ -0,0 +1,11 @@
+const titleAppearanceStyle = {
+    solid: {},
+    outlined: {
+        fill: 'none',
+    },
+    full: {},
+    ghost: {
+        fill: 'none',
+    },
+};
+export { titleAppearanceStyle };

package/dist/components/Title/appearance/titleSuccess.js

@@ -0,0 +1,7 @@
+const titleAppearanceSuccess = {
+    successPrimary: {
+        fill: 'successPrimary',
+        fillHover: 'successHoverPrimary',
+    },
+};
+export { titleAppearanceSuccess };

package/dist/components/Title/appearance/titleSurface.js

@@ -0,0 +1,19 @@
+const titleAppearanceSurface = {
+    surfacePrimary: {
+        fill: 'surfacePrimary',
+        fillHover: 'surfaceHoverPrimary',
+    },
+    surfaceQuaternary: {
+        fill: 'surfaceQuaternary',
+        fillHover: 'surfaceHoverQuaternary',
+    },
+    surfaceSecondary: {
+        fill: 'surfaceSecondary',
+        fillHover: 'surfaceHoverSecondary',
+    },
+    surfaceTertiary: {
+        fill: 'surfaceTertiary',
+        fillHover: 'surfaceHoverTertiary',
+    },
+};
+export { titleAppearanceSurface };

package/dist/components/Title/appearance/titleWarning.js

@@ -0,0 +1,9 @@
+const titleAppearanceWarning = {
+    warningPrimary: {
+        fill: 'warningPrimary',
+        fillHover: 'warningHoverPrimary',
+        textColor: 'warningTextSecondary',
+        textColorHover: 'warningTextSecondary',
+    },
+};
+export { titleAppearanceWarning };

package/dist/components/Title/index.js

@@ -0,0 +1,2 @@
+export { Title, titleConfig } from './Title';
+export { titleAppearance } from './Title.appearance';

package/dist/components/Tooltip/Tooltip.appearance.js

@@ -0,0 +1,19 @@
+import { tooltipAppearanceDefault } from './appearance/tooltipDefault';
+import { tooltipAppearanceDisabled } from './appearance/tooltipDisabled';
+import { tooltipAppearanceError } from './appearance/tooltipError';
+import { tooltipAppearanceRequire } from './appearance/tooltipRequire';
+import { tooltipAppearanceShape } from './appearance/tooltipShape';
+import { tooltipAppearanceSize } from './appearance/tooltipSize';
+import { tooltipAppearanceStyle } from './appearance/tooltipStyle';
+import { tooltipAppearanceSuccess } from './appearance/tooltipSuccess';
+const tooltipAppearance = {
+    ...tooltipAppearanceDefault,
+    ...tooltipAppearanceSize,
+    ...tooltipAppearanceDisabled,
+    ...tooltipAppearanceRequire,
+    ...tooltipAppearanceShape,
+    ...tooltipAppearanceStyle,
+    ...tooltipAppearanceError,
+    ...tooltipAppearanceSuccess,
+};
+export { tooltipAppearance };

package/dist/components/Tooltip/Tooltip.interface.js

@@ -0,0 +1 @@
+export {};

package/dist/components/Tooltip/Tooltip.js

@@ -0,0 +1,68 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React, { useCallback, useImperativeHandle, useRef, useState, } from 'react';
+import clsx from 'clsx';
+import { useAppearanceConfig } from 'src/hooks/useAppearanceConfig';
+import { useDevicePropsGenerator } from 'src/hooks/useDevicePropsGenerator';
+import { useStyles } from 'src/hooks/useStyles';
+import { Text } from 'src/components/Text';
+import { Title } from 'src/components/Title';
+import { tooltipAppearance } from './Tooltip.appearance';
+const tooltipConfig = {
+    appearance: tooltipAppearance,
+    setAppearance: (appearanceConfig) => {
+        tooltipConfig.appearance = appearanceConfig;
+    },
+};
+const Tooltip = React.forwardRef(function Tooltip(props, ref) {
+    const { appearance, className, dataTestId, dataTour, initialIsVisible, title, text, before, after, openTimeoutDelay = 500, closeTimeoutDelay = 250, isSkeleton, isTooltipDisableState, children, } = props;
+    const tooltipElementRef = useRef(null);
+    const tooltipTimeoutHideRef = useRef(null);
+    const tooltipTimeoutShowRef = useRef(null);
+    const isTooltipCloseAnimationInProgressRef = useRef(false);
+    const [isTooltipVisible, setIsTooltipVisible] = useState(initialIsVisible);
+    const openTooltip = useCallback(() => {
+        if (!isTooltipCloseAnimationInProgressRef.current) {
+            if (tooltipTimeoutHideRef.current) {
+                clearTimeout(tooltipTimeoutHideRef.current);
+            }
+            tooltipTimeoutShowRef.current = setTimeout(() => {
+                setIsTooltipVisible(true);
+            }, openTimeoutDelay);
+        }
+    }, [openTimeoutDelay]);
+    const closeTooltip = useCallback(() => {
+        if (tooltipTimeoutShowRef.current) {
+            clearTimeout(tooltipTimeoutShowRef.current);
+        }
+        tooltipTimeoutHideRef.current = setTimeout(() => {
+            setIsTooltipVisible((prevState) => {
+                const newState = false;
+                if (prevState === true) {
+                    isTooltipCloseAnimationInProgressRef.current = true;
+                }
+                return newState;
+            });
+        }, closeTimeoutDelay);
+    }, [closeTimeoutDelay]);
+    const onAnimationEnd = useCallback(() => {
+        isTooltipCloseAnimationInProgressRef.current = false;
+    }, []);
+    useImperativeHandle(ref, () => ({
+        get tooltipElement() {
+            return tooltipElementRef.current;
+        },
+        openTooltip: openTooltip,
+        closeTooltip: closeTooltip,
+        isTooltipVisible: isTooltipVisible,
+    }), [isTooltipVisible, openTooltip, closeTooltip]);
+    const appearanceConfig = useAppearanceConfig(appearance, tooltipConfig);
+    const propsGenerator = useDevicePropsGenerator(props, appearanceConfig);
+    const { alignClass, alignDirectionClass, alignmentClass, alignPosition, fillClass, titleColor, titleSize, titleWeight, borderColorClass, borderTypeClass, borderWidthClass, textColor, textSize, textWeight, arrowPosition, centeringClass, elevationClass, shapeClass, shapeStrengthClass, sizeClass, widthClass, } = propsGenerator;
+    const { styles: tooltipStyles } = useStyles(props);
+    return (_jsxs("div", { className: clsx(className, 'tooltip', !isTooltipDisableState
+            ? isTooltipVisible
+                ? 'tooltip_state_open'
+                : 'tooltip_state_close'
+            : null, alignPosition && `tooltip_align-position_${alignPosition}`, alignDirectionClass && `align_${alignDirectionClass}`, alignClass && `align_${alignClass}`, elevationClass && `elevation_${elevationClass}`, centeringClass && `centering_${centeringClass}`, alignmentClass && `alignment_${alignmentClass}`, sizeClass && `tooltip_size_${sizeClass}`, isSkeleton && 'tooltip_skeleton', widthClass && `width_${widthClass}`), ref: tooltipElementRef, "data-testid": dataTestId, "data-tour": dataTour, style: tooltipStyles, onAnimationEnd: onAnimationEnd, children: [arrowPosition && (_jsx("div", { className: clsx('tooltip__arrow', arrowPosition && `tooltip__arrow_position_${arrowPosition}`, fillClass && `fill_${fillClass}`), children: "\u00A0" })), before, _jsxs("div", { className: clsx('tooltip__inner', borderWidthClass && `border-width_${borderWidthClass}`, borderColorClass && `border-color_${borderColorClass}`, borderTypeClass && `border_type_${borderTypeClass}`, fillClass && `fill_${fillClass}`, shapeClass && `shape_${shapeClass}`, shapeStrengthClass && `shape-strength_${shapeStrengthClass}`), children: [title && (_jsx(Title, { className: "tooltip__title text", size: titleSize, textColor: titleColor, textWeight: titleWeight, children: title })), text && (_jsx(Text, { className: "tooltip__text", size: textSize, textColor: textColor, textWeight: textWeight, children: text })), children] }), after] }));
+});
+export { Tooltip, tooltipConfig };

package/dist/components/Tooltip/appearance/tooltipDefault.js

@@ -0,0 +1,10 @@
+const tooltipAppearanceDefault = {
+    defaultPrimary: {
+        fill: 'surfacePrimary',
+        fillHover: 'surfaceHoverPrimary',
+        titleColor: 'surfaceTextPrimary',
+        borderColor: 'surfaceBorderPrimary',
+        textColor: 'surfaceTextPrimary',
+    },
+};
+export { tooltipAppearanceDefault };

package/dist/components/Tooltip/appearance/tooltipDisabled.js

@@ -0,0 +1,9 @@
+const tooltipAppearanceDisabled = {
+    disabledPrimary: {
+        fill: 'disabledPrimary',
+        fillHover: 'disabledHoverPrimary',
+        titleColor: 'surfaceTextPrimary',
+        textColor: 'surfaceTextPrimary',
+    },
+};
+export { tooltipAppearanceDisabled };

package/dist/components/Tooltip/appearance/tooltipError.js

@@ -0,0 +1,10 @@
+const tooltipAppearanceError = {
+    errorPrimary: {
+        fill: 'errorPrimary',
+        fillHover: 'errorHoverPrimary',
+        borderColor: 'errorBorderPrimary',
+        titleColor: 'errorTextPrimary',
+        textColor: 'errorTextPrimary',
+    },
+};
+export { tooltipAppearanceError };

package/dist/components/Tooltip/appearance/tooltipRequire.js

@@ -0,0 +1,10 @@
+const tooltipAppearanceRequire = {
+    requirePrimary: {
+        fill: 'warningPrimary',
+        fillHover: 'warningHoverPrimary',
+        borderColor: 'warningBorderPrimary',
+        titleColor: 'warningTextPrimary',
+        textColor: 'warningTextPrimary',
+    },
+};
+export { tooltipAppearanceRequire };

package/dist/components/Tooltip/appearance/tooltipShape.js

@@ -0,0 +1,25 @@
+const tooltipAppearanceShape = {
+    circular: {
+        shape: 'circular',
+    },
+    rounded: {
+        shape: 'rounded',
+    },
+    roundedXL: {
+        shape: 'rounded',
+        shapeStrength: '2m',
+    },
+    roundedL: {
+        shape: 'rounded',
+        shapeStrength: '1_5m',
+    },
+    roundedM: {
+        shape: 'rounded',
+        shapeStrength: '1m',
+    },
+    roundedS: {
+        shape: 'rounded',
+        shapeStrength: '0_5m',
+    },
+};
+export { tooltipAppearanceShape };

package/dist/components/Tooltip/appearance/tooltipSize.js

@@ -0,0 +1,18 @@
+const tooltipAppearanceSize = {
+    sizeL: {
+        size: 'l',
+        titleSize: 'h5',
+        textSize: 's',
+    },
+    sizeM: {
+        size: 'm',
+        titleSize: 'h5',
+        textSize: 's',
+    },
+    sizeS: {
+        size: 's',
+        titleSize: 'h5',
+        textSize: 's',
+    },
+};
+export { tooltipAppearanceSize };

package/dist/components/Tooltip/appearance/tooltipStyle.js

@@ -0,0 +1,14 @@
+const tooltipAppearanceStyle = {
+    solid: {
+        borderColor: 'none',
+    },
+    outlined: {
+        fill: 'none',
+    },
+    full: {},
+    ghost: {
+        fill: 'none',
+        borderColor: 'none',
+    },
+};
+export { tooltipAppearanceStyle };