@alma-oss/spirit-web-react 4.0.0

package/components/Tooltip/Tooltip.cjs

@@ -0,0 +1,867 @@
+'use strict';
+
+var React = require('react');
+var classNames = require('classnames');
+var spiritDesignTokens = require('@alma-oss/spirit-design-tokens');
+var htmlDomParser = require('html-dom-parser');
+var domToReactLib = require('html-react-parser/lib/dom-to-react');
+var react = require('@floating-ui/react');
+
+const ENVIRONMENTS = {
+    PRODUCTION: 'production',
+};
+const isProduction = () => process.env.NODE_ENV === ENVIRONMENTS.PRODUCTION;
+
+const warning = (condition, message) => {
+    if (!isProduction()) {
+        const text = `Warning: ${message}`;
+        if (typeof console !== 'undefined') {
+            console.warn(text);
+        }
+        try {
+            throw Error(text);
+        }
+        catch (x) {
+        }
+    }
+};
+
+var __rest$b = (undefined && undefined.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+function createUppercaseKeyDictionary(obj) {
+    return Object.fromEntries(Object.keys(obj).map((key) => [key.toUpperCase(), key]));
+}
+const AlignmentX = {
+    LEFT: 'left',
+    CENTER: 'center',
+    RIGHT: 'right',
+};
+Object.assign({ SPACE_BETWEEN: 'space-between', STRETCH: 'stretch' }, AlignmentX);
+const AlignmentY = {
+    TOP: 'top',
+    CENTER: 'center',
+    BOTTOM: 'bottom',
+};
+Object.assign({ BASELINE: 'baseline', STRETCH: 'stretch' }, AlignmentY);
+createUppercaseKeyDictionary(spiritDesignTokens.componentColors.button);
+createUppercaseKeyDictionary(spiritDesignTokens.emotionColors);
+const TextColors = createUppercaseKeyDictionary(spiritDesignTokens.textColors);
+const Sizes = {
+    SMALL: 'small',
+    MEDIUM: 'medium',
+    LARGE: 'large',
+};
+Object.assign(Object.assign({ XSMALL: 'xsmall' }, Sizes), { XLARGE: 'xlarge' });
+const _a = createUppercaseKeyDictionary(spiritDesignTokens.containers), { MAXWIDTH, PADDING } = _a; __rest$b(_a, ["MAXWIDTH", "PADDING"]);
+
+const Direction = {
+    HORIZONTAL: 'horizontal',
+    VERTICAL: 'vertical',
+};
+Object.assign(Object.assign({}, Direction), { HORIZONTAL_REVERSED: 'horizontal-reversed' });
+var DirectionAxis;
+(function (DirectionAxis) {
+    DirectionAxis["X"] = "x";
+    DirectionAxis["Y"] = "y";
+})(DirectionAxis || (DirectionAxis = {}));
+
+const SpacingStyleProp = {
+    margin: 'm',
+    marginTop: 'mt',
+    marginRight: 'mr',
+    marginBottom: 'mb',
+    marginLeft: 'ml',
+    marginX: 'mx',
+    marginY: 'my',
+};
+const DisplayStyleProps = {
+    hideOn: 'd',
+    hideFrom: 'd',
+};
+const ThemeStyleProps = {
+    theme: '',
+};
+
+const defaultContext$2 = undefined;
+const ClassNamePrefixContext = React.createContext(defaultContext$2);
+ClassNamePrefixContext.Provider;
+ClassNamePrefixContext.Consumer;
+
+Object.assign(Object.assign({}, Sizes), { AUTO: 'auto' });
+
+const STYLE_SPACING_AUTO = 'auto';
+
+const BREAKPOINT_MOBILE = 'mobile';
+
+var SpiritBreakpoints;
+(function (SpiritBreakpoints) {
+    SpiritBreakpoints["TABLET"] = "tablet";
+    SpiritBreakpoints["DESKTOP"] = "desktop";
+})(SpiritBreakpoints || (SpiritBreakpoints = {}));
+
+const TOOLTIP_TRIGGER = {
+    CLICK: 'click',
+    HOVER: 'hover',
+    FOCUS: 'focus',
+    OUTSIDE_PRESS: 'outside-press',
+    ESCAPE_KEY: 'escape-key',
+};
+
+const isNullish = (value) => value == null;
+const isEmptyString = (value) => typeof value === 'string' && value.trim() === '';
+const isEmptyArray = (value) => Array.isArray(value) && value.length === 0;
+const isEmptyObject = (value) => typeof value === 'object' && value !== null && Object.keys(value).length === 0;
+const isEnumerable = (value) => {
+    if (typeof value === 'object' && value !== null) {
+        for (const key in value) {
+            if (Object.hasOwnProperty.call(value, key)) {
+                return true;
+            }
+        }
+    }
+    return false;
+};
+const isEmpty = (value) => {
+    if (isNullish(value)) {
+        return true;
+    }
+    if (isEmptyString(value)) {
+        return true;
+    }
+    if (isEmptyArray(value)) {
+        return true;
+    }
+    if (isEmptyObject(value)) {
+        return true;
+    }
+    if (isEnumerable(value)) {
+        return false;
+    }
+    return false;
+};
+
+const applyClassNamePrefix = (prefix) => (className) => prefix != null && prefix !== '' ? `${prefix}-${className}` : className;
+
+const htmlReactParser = (html) => {
+    if (typeof html !== 'string') {
+        throw new TypeError('First argument must be a string');
+    }
+    if (!html) {
+        return [];
+    }
+    const htmlToDOM = typeof htmlDomParser.default === 'function' ? htmlDomParser.default : htmlDomParser;
+    const domToReact = typeof domToReactLib.default === 'function' ? domToReactLib.default : domToReactLib;
+    return domToReact(htmlToDOM(html));
+};
+
+function mergeStyleProps(ElementTag, styleProps) {
+    const isSpiritComponent = typeof ElementTag !== 'string' && !!(ElementTag === null || ElementTag === void 0 ? void 0 : ElementTag.spiritComponent);
+    const isNonNullableObject = (styleProp) => typeof styleProp === 'object' && styleProp !== null;
+    const extractClassNames = (styleProp) => {
+        if (typeof styleProp === 'string') {
+            return [styleProp];
+        }
+        if (isNonNullableObject(styleProp)) {
+            return [styleProp.className, styleProp.UNSAFE_className].filter(Boolean);
+        }
+        return [];
+    };
+    const extractCssVariables = (styleProp) => isNonNullableObject(styleProp)
+        ? Object.entries(styleProp)
+            .filter(([key]) => key.startsWith('--'))
+            .reduce((extractedCssVariable, [key, value]) => (Object.assign(Object.assign({}, extractedCssVariable), { [key]: value })), {})
+        : {};
+    const extractCssStylesAndVariables = (cssProperties, styleProp) => {
+        if (!isNonNullableObject(styleProp)) {
+            return cssProperties;
+        }
+        const typedStyleProp = styleProp;
+        const styles = typedStyleProp.style || typedStyleProp.UNSAFE_style || {};
+        const cssVariables = extractCssVariables(styleProp);
+        return Object.assign(Object.assign(Object.assign({}, cssProperties), styles), cssVariables);
+    };
+    const mergedClasses = Object.values(styleProps).flatMap(extractClassNames).filter(Boolean).join(' ');
+    const mergedStyles = Object.values(styleProps)
+        .filter(isNonNullableObject)
+        .reduce(extractCssStylesAndVariables, {});
+    return isSpiritComponent
+        ? { UNSAFE_className: mergedClasses, UNSAFE_style: mergedStyles }
+        : { className: mergedClasses, style: mergedStyles };
+}
+
+const camelCaseToKebabCase = (input) => input.replace(/([a-z0-9])([A-Z])/g, '$1-$2').toLowerCase();
+
+const CLASS_SEPARATOR = '-';
+const normalizeSpacingValue = (value) => value === STYLE_SPACING_AUTO ? STYLE_SPACING_AUTO : value.replace(/[^0-9]/g, '');
+const isSpaceToken = (value) => typeof value === 'string' && value.startsWith('space-');
+const getUtilityValue = (value) => (isSpaceToken(value) ? normalizeSpacingValue(value) : value);
+const isKeyIncluded = (object, key) => Object.keys(object).includes(key);
+const processBreakpointProperties = (utilityName, propValue, prefix) => Object.keys(propValue).reduce((accumulatedBreakpointUtilities, breakpoint) => {
+    const breakpointValue = propValue[breakpoint];
+    if (typeof breakpointValue === 'string') {
+        const utilityValue = getUtilityValue(breakpointValue);
+        const infix = breakpoint === BREAKPOINT_MOBILE ? '' : `${CLASS_SEPARATOR}${breakpoint}`;
+        accumulatedBreakpointUtilities.push(applyClassNamePrefix(prefix)(`${utilityName}${infix}${CLASS_SEPARATOR}${utilityValue}`));
+    }
+    return accumulatedBreakpointUtilities;
+}, []);
+const processHideOnProperty = (utilityName, propValue, prefix) => {
+    const breakpoints = Array.isArray(propValue) ? propValue : [propValue];
+    return breakpoints.map((breakpoint) => applyClassNamePrefix(prefix)(`${utilityName}${CLASS_SEPARATOR}only${CLASS_SEPARATOR}${breakpoint}${CLASS_SEPARATOR}none`));
+};
+const processHideFromProperty = (utilityName, propValue, prefix) => {
+    const breakpoint = propValue;
+    const infix = breakpoint === BREAKPOINT_MOBILE ? '' : `${CLASS_SEPARATOR}${breakpoint}`;
+    return [applyClassNamePrefix(prefix)(`${utilityName}${infix}${CLASS_SEPARATOR}none`)];
+};
+const processDisplayProperties = (utilityKey, utilityName, propValue, prefix) => {
+    switch (utilityKey) {
+        case 'hideOn':
+            return processHideOnProperty(utilityName, propValue, prefix);
+        case 'hideFrom':
+            return processHideFromProperty(utilityName, propValue, prefix);
+        default:
+            return [];
+    }
+};
+const processProperties = (utilityKey, utilityName, propValue, prefix) => {
+    if (utilityName === ThemeStyleProps.theme) {
+        if (typeof propValue !== 'string') {
+            return [];
+        }
+        const themeClassName = camelCaseToKebabCase(propValue);
+        return [applyClassNamePrefix(prefix)(themeClassName)];
+    }
+    if (utilityKey in DisplayStyleProps) {
+        return processDisplayProperties(utilityKey, utilityName, propValue, prefix);
+    }
+    if (typeof propValue === 'boolean') {
+        return propValue ? [applyClassNamePrefix(prefix)(utilityName)] : [];
+    }
+    if (typeof propValue === 'string') {
+        return [applyClassNamePrefix(prefix)(`${utilityName}-${getUtilityValue(propValue)}`)];
+    }
+    return processBreakpointProperties(utilityName, propValue, prefix);
+};
+const isStylePropProcessable = (styleProps, stylePropKey, stylePropValue, options = { includesKey: true }) => {
+    const isStylePropKeyIncluded = isKeyIncluded(styleProps, stylePropKey);
+    const isProcessable = (options.includesKey ? isStylePropKeyIncluded : !isStylePropKeyIncluded) && !isEmpty(stylePropValue);
+    return isProcessable;
+};
+const useStyleUtilities = (props, prefix = '', additionalProps = {}) => {
+    const styleProps = Object.assign(Object.assign(Object.assign(Object.assign({}, SpacingStyleProp), DisplayStyleProps), ThemeStyleProps), additionalProps);
+    const propEntries = Object.entries(props);
+    const styleUtilities = propEntries.reduce((accumulatedUtilities, [key, propValue]) => {
+        if (isStylePropProcessable(styleProps, key, propValue)) {
+            const utilityName = styleProps[key];
+            return [
+                ...accumulatedUtilities,
+                ...processProperties(key, utilityName, propValue, prefix),
+            ];
+        }
+        return accumulatedUtilities;
+    }, []);
+    const updatedProps = propEntries.reduce((accumulatedProps, [key, propValue]) => {
+        if (isStylePropProcessable(styleProps, key, propValue, { includesKey: false })) {
+            return Object.assign(Object.assign({}, accumulatedProps), { [key]: propValue });
+        }
+        return accumulatedProps;
+    }, {});
+    return {
+        styleUtilities,
+        props: updatedProps,
+    };
+};
+
+var __rest$a = (undefined && undefined.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+function useStyleProps(props, additionalUtilities) {
+    const classNamePrefix = React.useContext(ClassNamePrefixContext);
+    const { UNSAFE_className, UNSAFE_style } = props, otherProps = __rest$a(props, ["UNSAFE_className", "UNSAFE_style"]);
+    const styleUtilitiesConfig = Object.assign({ theme: ThemeStyleProps.theme }, ({}));
+    const { styleUtilities, props: modifiedProps } = useStyleUtilities(otherProps, classNamePrefix, styleUtilitiesConfig);
+    const style = Object.assign({}, UNSAFE_style);
+    if (modifiedProps.className) {
+        warning(false, 'The className prop is unsafe and is unsupported in Spirit Web React. ' +
+            'Please use style props with Spirit Design Tokens, or UNSAFE_className if you absolutely must do something custom. ' +
+            'Note that this may break in future versions due to DOM structure changes.');
+        delete modifiedProps.className;
+    }
+    if (modifiedProps.style) {
+        warning(false, 'The style prop is unsafe and is unsupported in Spirit Web React. ' +
+            'Please use style props with Spirit Design Tokens, or UNSAFE_style if you absolutely must do something custom. ' +
+            'Note that this may break in future versions due to DOM structure changes.');
+        delete modifiedProps.style;
+    }
+    const styleProps = {
+        style: Object.keys(style).length > 0 ? style : undefined,
+        className: classNames(UNSAFE_className, ...styleUtilities) || undefined,
+    };
+    return {
+        styleProps,
+        props: modifiedProps,
+    };
+}
+
+const useClassNamePrefix = (className) => {
+    const classNamePrefix = React.useContext(ClassNamePrefixContext);
+    let prefixedClassName = className;
+    if (className && classNamePrefix) {
+        prefixedClassName = applyClassNamePrefix(classNamePrefix)(className);
+    }
+    else if (classNamePrefix) {
+        prefixedClassName = classNamePrefix;
+    }
+    return prefixedClassName;
+};
+
+const defaultContext$1 = undefined;
+const IconsContext = React.createContext(defaultContext$1);
+IconsContext.Provider;
+IconsContext.Consumer;
+
+const useIcon = (name) => {
+    const icons = React.useContext(IconsContext);
+    if (icons != null && icons[name] != null) {
+        return icons[name];
+    }
+    warning(false, `The ${name} icon is missing from your assets or icon map provided by the IconsProvider. Please make sure you have provided all icons needed by used components.`);
+    return '';
+};
+
+const defaultContext = {
+    anchorRef: () => { },
+    arrowRef: { current: null },
+    getReferenceProps: () => ({
+        id: '',
+        ref: () => { },
+    }),
+    getFloatingProps: () => ({
+        id: '',
+        ref: () => { },
+    }),
+    id: '',
+    isDismissible: false,
+    isOpen: false,
+    middlewareData: {},
+    onToggle: () => { },
+    placement: 'bottom',
+    sizeMaxWidth: undefined,
+    tooltipMaxWidth: undefined,
+    tooltipRef: () => { },
+    triggerRef: () => { },
+    x: 0,
+    y: 0,
+    position: 'absolute',
+};
+const TooltipContext = React.createContext(defaultContext);
+const TooltipProvider = TooltipContext.Provider;
+TooltipContext.Consumer;
+const useTooltipContext = () => React.useContext(TooltipContext);
+
+const stringToArray = (value) => Array.isArray(value) ? value : [value];
+const useFloating = (props) => {
+    const { arrowRef, cornerOffset = 0, flipCrossAxis, flipFallbackAxisSideDirection = 'none', flipFallbackPlacements, flipProp, isDismissible, isOpen = false, offset: tooltipOffset = 0, onToggle, isFocusableOnHover, shiftProp, sizeProp, positionStrategy = 'absolute', tooltipArrowWidth = 0, tooltipPlacement, trigger, } = props;
+    const [maxWidth, setMaxWidth] = React.useState(undefined);
+    const [isClicked, setIsClicked] = React.useState(false);
+    const mainAxisOffset = cornerOffset + tooltipArrowWidth;
+    const isHoverEnabled = trigger === null || trigger === void 0 ? void 0 : trigger.includes(TOOLTIP_TRIGGER.HOVER);
+    const isClickEnabled = trigger === null || trigger === void 0 ? void 0 : trigger.includes(TOOLTIP_TRIGGER.CLICK);
+    const isFocusEnabled = trigger === null || trigger === void 0 ? void 0 : trigger.includes(TOOLTIP_TRIGGER.FOCUS);
+    const useSafePolygons = (isClickable) => isClickable
+        ? react.safePolygon({
+            requireIntent: false,
+        })
+        : undefined;
+    const { x, y, floatingStyles, refs, context, placement, middlewareData } = react.useFloating({
+        open: isOpen,
+        onOpenChange: (open, event, reason) => {
+            if (isHoverEnabled) {
+                if (reason === TOOLTIP_TRIGGER.CLICK) {
+                    setIsClicked((prev) => !prev);
+                }
+                if (isOpen && isClicked && reason === TOOLTIP_TRIGGER.HOVER) {
+                    return;
+                }
+                if (isOpen &&
+                    isClicked &&
+                    (reason === TOOLTIP_TRIGGER.CLICK ||
+                        reason === TOOLTIP_TRIGGER.OUTSIDE_PRESS ||
+                        reason === TOOLTIP_TRIGGER.ESCAPE_KEY)) {
+                    setIsClicked(false);
+                    onToggle(false);
+                    return;
+                }
+            }
+            onToggle(open);
+        },
+        placement: tooltipPlacement,
+        whileElementsMounted: react.autoUpdate,
+        middleware: [
+            react.offset(tooltipOffset),
+            react.inline(),
+            flipProp &&
+                react.flip({
+                    crossAxis: flipCrossAxis,
+                    fallbackPlacements: flipFallbackPlacements ? stringToArray(flipFallbackPlacements) : undefined,
+                    fallbackAxisSideDirection: flipFallbackAxisSideDirection,
+                }),
+            shiftProp &&
+                react.shift({
+                    limiter: react.limitShift({
+                        offset: () => ({
+                            mainAxis: mainAxisOffset,
+                        }),
+                    }),
+                }),
+            sizeProp &&
+                react.size({
+                    apply({ availableWidth }) {
+                        setMaxWidth(availableWidth);
+                    },
+                }),
+            react.arrow({ element: arrowRef.current, padding: cornerOffset }),
+        ],
+        strategy: positionStrategy,
+    });
+    const click = react.useClick(context, { enabled: isClickEnabled });
+    const hover = react.useHover(context, {
+        enabled: isHoverEnabled,
+        handleClose: useSafePolygons(!!isFocusableOnHover),
+    });
+    const focus = react.useFocus(context, { enabled: isFocusEnabled });
+    const dismiss = react.useDismiss(context, { outsidePress: !isDismissible });
+    const role = react.useRole(context, { role: 'tooltip' });
+    const { getReferenceProps: originalGetReferenceProps, getFloatingProps } = react.useInteractions([
+        click,
+        hover,
+        focus,
+        dismiss,
+        role,
+    ]);
+    const getReferenceProps = (userProps) => {
+        const referenceProps = originalGetReferenceProps(userProps);
+        if (isFocusEnabled) {
+            const originalOnMouseDown = referenceProps.onMouseDown;
+            referenceProps.onMouseDown = ((event) => {
+                if (originalOnMouseDown) {
+                    originalOnMouseDown(event);
+                }
+                const element = event.currentTarget;
+                if (element && element !== document.activeElement) {
+                    const isFocusable = element instanceof HTMLElement &&
+                        (element.tabIndex >= 0 ||
+                            element instanceof HTMLButtonElement ||
+                            element instanceof HTMLAnchorElement ||
+                            element instanceof HTMLInputElement ||
+                            element instanceof HTMLSelectElement ||
+                            element instanceof HTMLTextAreaElement);
+                    if (isFocusable) {
+                        element.focus();
+                    }
+                }
+            });
+        }
+        return referenceProps;
+    };
+    return {
+        context,
+        getFloatingProps,
+        getReferenceProps,
+        maxWidth,
+        middlewareData,
+        placement,
+        refs,
+        x,
+        y,
+        position: floatingStyles.position,
+    };
+};
+
+var __rest$9 = (undefined && undefined.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+const useTooltipStyleProps = (props) => {
+    const { isDismissible, isOpen } = props, modifiedProps = __rest$9(props, ["isDismissible", "isOpen"]);
+    const tooltipClass = useClassNamePrefix('Tooltip');
+    const tooltipPopoverClass = `${tooltipClass}Popover`;
+    const arrowClass = `${tooltipPopoverClass}__arrow`;
+    const closeButtonClass = `${tooltipPopoverClass}__close`;
+    const rootDismissibleClass = `${tooltipPopoverClass}--dismissible`;
+    const rootHiddenClass = 'is-hidden';
+    const isHiddenClass = React.useMemo(() => isOpen === false, [isOpen]);
+    const tooltipPopoverClassName = classNames(tooltipPopoverClass, {
+        [rootDismissibleClass]: isDismissible,
+        [rootHiddenClass]: isHiddenClass,
+    });
+    return {
+        classProps: {
+            rootClassName: tooltipClass,
+            popoverClassName: tooltipPopoverClassName,
+            arrowClassName: arrowClass,
+            closeButtonClassName: closeButtonClass,
+        },
+        props: modifiedProps,
+    };
+};
+
+var __rest$8 = (undefined && undefined.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+const Tooltip = (props) => {
+    var _a;
+    const { children, elementType: ElementTag = 'div', enableFlipping: flipProp = true, enableFlippingCrossAxis: flipCrossAxis = true, enableShifting: shiftProp = true, enableSizing: sizeProp = true, flipFallbackAxisSideDirection = 'none', flipFallbackPlacements = ['bottom', 'top'], id, isDismissible = false, isFocusableOnHover = false, isOpen = false, onToggle, placement: tooltipPlacement, positionStrategy = 'absolute', trigger = ['click', 'hover'] } = props, restProps = __rest$8(props, ["children", "elementType", "enableFlipping", "enableFlippingCrossAxis", "enableShifting", "enableSizing", "flipFallbackAxisSideDirection", "flipFallbackPlacements", "id", "isDismissible", "isFocusableOnHover", "isOpen", "onToggle", "placement", "positionStrategy", "trigger"]);
+    const { classProps, props: modifiedProps } = useTooltipStyleProps(Object.assign({ isDismissible,
+        isOpen }, restProps));
+    const { styleProps, props: otherProps } = useStyleProps(modifiedProps);
+    const mergedStyleProps = mergeStyleProps(ElementTag, {
+        classProps: classProps.rootClassName,
+        styleProps,
+    });
+    const arrowRef = React.useRef(null);
+    const tooltipRef = React.useRef(null);
+    let tooltipMaxWidth;
+    let tooltipOffset;
+    let tooltipCornerOffset;
+    let tooltipArrowWidth;
+    const tooltipElement = (_a = tooltipRef.current) === null || _a === void 0 ? void 0 : _a.querySelector('[data-spirit-element="tooltip"]');
+    const tooltipArrowElement = tooltipElement === null || tooltipElement === void 0 ? void 0 : tooltipElement.querySelector('[data-spirit-element="tooltip-arrow"]');
+    if (tooltipElement) {
+        const tooltipComputedStyle = window.getComputedStyle(tooltipElement);
+        const tooltipArrowComputedStyle = tooltipArrowElement && window.getComputedStyle(tooltipArrowElement);
+        tooltipMaxWidth = parseInt(tooltipComputedStyle.getPropertyValue('--tooltip-max-width'), 10);
+        tooltipOffset = parseInt(tooltipComputedStyle.getPropertyValue('--tooltip-offset'), 10);
+        tooltipCornerOffset = tooltipArrowComputedStyle
+            ? parseInt(tooltipArrowComputedStyle.getPropertyValue('--tooltip-arrow-corner-offset'), 10)
+            : 0;
+        tooltipArrowWidth = tooltipArrowComputedStyle ? parseInt(tooltipArrowComputedStyle.width, 10) : 0;
+    }
+    const { getFloatingProps, getReferenceProps, maxWidth, middlewareData, placement, refs, x, y, position } = useFloating({
+        arrowRef,
+        cornerOffset: tooltipCornerOffset,
+        flipCrossAxis,
+        flipFallbackAxisSideDirection,
+        flipFallbackPlacements,
+        flipProp,
+        isDismissible,
+        isFocusableOnHover,
+        isOpen,
+        offset: tooltipOffset,
+        onToggle,
+        shiftProp,
+        sizeProp,
+        positionStrategy,
+        tooltipArrowWidth,
+        tooltipPlacement,
+        trigger,
+    });
+    return (React.createElement(TooltipProvider, { value: {
+            anchorRef: refs.setPositionReference,
+            arrowRef,
+            getFloatingProps,
+            getReferenceProps,
+            id,
+            isDismissible,
+            isOpen,
+            middlewareData,
+            onToggle,
+            placement,
+            sizeMaxWidth: maxWidth,
+            tooltipMaxWidth,
+            tooltipRef: refs.setFloating,
+            triggerRef: refs.setReference,
+            x,
+            y,
+            position,
+        } },
+        React.createElement(ElementTag, Object.assign({}, otherProps, { ref: tooltipRef }, mergedStyleProps), children)));
+};
+Tooltip.spiritComponent = 'Tooltip';
+
+const DEFAULT_BOX_SIZE = 24;
+
+const useIconBoxSize = (boxSize) => { var _a; return typeof boxSize === 'object' ? ((_a = boxSize.mobile) !== null && _a !== void 0 ? _a : DEFAULT_BOX_SIZE) : (boxSize !== null && boxSize !== void 0 ? boxSize : DEFAULT_BOX_SIZE); };
+
+var __rest$7 = (undefined && undefined.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+const setCustomDimension = (prefix, size) => {
+    const style = {};
+    if (typeof size === 'object') {
+        Object.entries(size).forEach(([breakpoint, breakpointSize]) => {
+            const breakpointSuffix = breakpoint === 'mobile' ? '' : `-${breakpoint}`;
+            style[`${prefix}${breakpointSuffix}`] = `${breakpointSize === null || breakpointSize === void 0 ? void 0 : breakpointSize.toString()}px`;
+        });
+    }
+    return style;
+};
+const useIconStyleProps = (props) => {
+    const { boxSize, color, name } = props, otherProps = __rest$7(props, ["boxSize", "color", "name"]);
+    const stylePrefix = `--${spiritDesignTokens.cssVariablePrefix}icon`;
+    const isDualtoneIcon = String(name).includes('-dualtone');
+    const dualtoneColorWithDefault = isDualtoneIcon && !color ? TextColors.PRIMARY : color;
+    const iconClass = useClassNamePrefix('Icon');
+    const iconDualtoneColorClass = `${iconClass}--${dualtoneColorWithDefault}`;
+    const classProps = classNames(iconClass, {
+        [iconDualtoneColorClass]: color || dualtoneColorWithDefault,
+    });
+    const customizedIconStyle = Object.assign({}, (boxSize ? setCustomDimension(`${stylePrefix}-size`, boxSize) : {}));
+    return {
+        classProps,
+        iconStyleProps: customizedIconStyle,
+        props: otherProps,
+    };
+};
+
+var __rest$6 = (undefined && undefined.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+const defaultProps$1 = {
+    ariaHidden: true,
+    boxSize: DEFAULT_BOX_SIZE,
+};
+const _Icon = (props, ref) => {
+    const propsWithDefaults = Object.assign(Object.assign({}, defaultProps$1), props);
+    const { boxSize, name, title, ariaHidden } = propsWithDefaults, restProps = __rest$6(propsWithDefaults, ["boxSize", "name", "title", "ariaHidden"]);
+    let icon = useIcon(name);
+    const iconSize = useIconBoxSize(boxSize);
+    const { classProps, iconStyleProps, props: modifiedProps } = useIconStyleProps(Object.assign({ boxSize, name }, restProps));
+    const { styleProps, props: otherProps } = useStyleProps(modifiedProps);
+    const mergedStyleProps = mergeStyleProps('svg', {
+        classProps,
+        iconStyleProps,
+        styleProps,
+    });
+    if (title) {
+        icon = `<title>${title}</title>${icon}`;
+    }
+    return (React.createElement("svg", Object.assign({}, otherProps, mergedStyleProps, { viewBox: "0 0 24 24", fill: "none", width: iconSize, height: iconSize, "aria-hidden": ariaHidden, ref: ref }), htmlReactParser(icon)));
+};
+const Icon = React.forwardRef(_Icon);
+Icon.spiritComponent = 'Icon';
+
+var __rest$5 = (undefined && undefined.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+function useVisuallyHiddenProps(props) {
+    const restProps = __rest$5(props, []);
+    const visuallyHiddenClass = useClassNamePrefix('accessibility-hidden');
+    return {
+        classProps: visuallyHiddenClass,
+        props: restProps,
+    };
+}
+
+var __rest$4 = (undefined && undefined.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+const VisuallyHidden = (props) => {
+    const { children, elementType: ElementTag = 'span' } = props, rest = __rest$4(props, ["children", "elementType"]);
+    const { classProps, props: modifiedProps } = useVisuallyHiddenProps(rest);
+    const { styleProps, props: otherProps } = useStyleProps(modifiedProps);
+    const mergedStyleProps = mergeStyleProps(ElementTag, { classProps, styleProps, otherProps });
+    return (React.createElement(ElementTag, Object.assign({}, otherProps, mergedStyleProps), children));
+};
+VisuallyHidden.spiritComponent = 'VisuallyHidden';
+
+var __rest$3 = (undefined && undefined.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+const TooltipCloseButton = (_a) => {
+    var { label = 'Close', onClick } = _a, restProps = __rest$3(_a, ["label", "onClick"]);
+    const { classProps, props: modifiedProps } = useTooltipStyleProps(restProps);
+    const { styleProps } = useStyleProps(Object.assign({}, modifiedProps));
+    return (React.createElement("button", { type: "button", className: classNames(classProps.closeButtonClassName, styleProps.className), style: styleProps.style, onClick: onClick, "aria-expanded": "true" },
+        React.createElement(Icon, { name: "close", "aria-hidden": "true" }),
+        React.createElement(VisuallyHidden, null, label)));
+};
+TooltipCloseButton.spiritComponent = 'TooltipCloseButton';
+
+var __rest$2 = (undefined && undefined.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+const TooltipPopover = (props) => {
+    const { children } = props, rest = __rest$2(props, ["children"]);
+    const { arrowRef, getFloatingProps, isDismissible, isOpen, middlewareData, onToggle, placement, tooltipRef, x, y, position, sizeMaxWidth, tooltipMaxWidth, } = useTooltipContext();
+    const { classProps, props: modifiedProps } = useTooltipStyleProps(Object.assign({ isOpen,
+        isDismissible }, rest));
+    const { styleProps: contentStyleProps, props: contentOtherProps } = useStyleProps(modifiedProps);
+    const renderCloseButton = React.useMemo(() => isDismissible && React.createElement(TooltipCloseButton, { onClick: () => onToggle(false), label: "close" }), [isDismissible, onToggle]);
+    const getMaxHeightAndWidth = () => {
+        if (isOpen && sizeMaxWidth && tooltipMaxWidth) {
+            return {
+                maxWidth: tooltipMaxWidth < sizeMaxWidth ? tooltipMaxWidth : sizeMaxWidth,
+            };
+        }
+        return undefined;
+    };
+    const getArrowStaticSidePosition = () => {
+        if (placement && arrowRef.current) {
+            const { arrow } = middlewareData;
+            const side = placement.split('-')[0];
+            const staticSide = {
+                top: 'bottom',
+                right: 'left',
+                bottom: 'top',
+                left: 'right',
+            }[side];
+            const arrowEl = arrowRef.current;
+            const offset = staticSide === 'top' || staticSide === 'bottom'
+                ? arrowEl.offsetHeight
+                : (arrowEl.offsetHeight + arrowEl.offsetWidth) / 2;
+            return {
+                left: arrow === null || arrow === void 0 ? void 0 : arrow.x,
+                top: arrow === null || arrow === void 0 ? void 0 : arrow.y,
+                [staticSide]: offset && -Math.floor(offset),
+            };
+        }
+        return undefined;
+    };
+    return (React.createElement("div", Object.assign({ ref: tooltipRef, className: classNames(classProps.popoverClassName, contentStyleProps.className) }, contentOtherProps, getFloatingProps(), { style: Object.assign(Object.assign({ position, top: y !== null && y !== void 0 ? y : 0, left: x !== null && x !== void 0 ? x : 0 }, getMaxHeightAndWidth()), contentStyleProps.style), "data-spirit-element": "tooltip", "data-spirit-placement": placement }),
+        children,
+        renderCloseButton,
+        React.createElement("span", { ref: arrowRef, className: classProps.arrowClassName, "data-spirit-element": "tooltip-arrow", style: Object.assign({ position: 'absolute' }, getArrowStaticSidePosition()) })));
+};
+TooltipPopover.spiritComponent = 'TooltipPopover';
+
+var __rest$1 = (undefined && undefined.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+const defaultProps = {
+    elementType: 'button',
+    children: null,
+};
+const TooltipTrigger = (props) => {
+    const propsWithDefaults = Object.assign(Object.assign({}, defaultProps), props);
+    const { elementType: ElementTag = 'button', children } = propsWithDefaults, restProps = __rest$1(propsWithDefaults, ["elementType", "children"]);
+    const { id, isOpen, triggerRef, getReferenceProps } = useTooltipContext();
+    const { styleProps: triggerStyleProps, props: transferProps } = useStyleProps(restProps);
+    const mergedStyleProps = mergeStyleProps(ElementTag, { triggerStyleProps, transferProps });
+    return (React.createElement(ElementTag, Object.assign({}, transferProps, mergedStyleProps, { id: id, ref: triggerRef }, getReferenceProps()), typeof children === 'function' ? children({ isOpen }) : children));
+};
+TooltipTrigger.spiritComponent = 'TooltipTrigger';
+
+const useTooltip = (isOpenProp = false) => {
+    const [isOpen, setOpen] = React.useState(isOpenProp);
+    return {
+        isOpen,
+        onToggle: setOpen,
+    };
+};
+
+var __rest = (undefined && undefined.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+const UncontrolledTooltip = (props) => {
+    const { children, isOpen: isOpenProp } = props, restProps = __rest(props, ["children", "isOpen"]);
+    const { isOpen, onToggle } = useTooltip(isOpenProp);
+    return (React.createElement(Tooltip, Object.assign({}, restProps, { isOpen: isOpen, onToggle: onToggle }), children));
+};
+UncontrolledTooltip.spiritComponent = 'UncontrolledTooltip';
+
+exports.Tooltip = Tooltip;
+exports.TooltipCloseButton = TooltipCloseButton;
+exports.TooltipPopover = TooltipPopover;
+exports.TooltipTrigger = TooltipTrigger;
+exports.UncontrolledTooltip = UncontrolledTooltip;
+exports.useTooltip = useTooltip;
+exports.useTooltipStyleProps = useTooltipStyleProps;
+//# sourceMappingURL=Tooltip.cjs.map